* {
    --color-main-yellow: #FFAF03;
    --color-main-blue: #3251F5;
    --color-light-blue: #AFCCF2;
    --color-main-pink: #F50076;
    --color-main-green: #49E600;
    --color-dark-purple: #5A0B4D;
    --color-black: #061424;
    --color-white: #FFFFFF;

    /* font-family: "Poppins", sans-serif; */
    font-family: Inter, sans-serif;
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */

    --fw-extralight: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-regular-medium: 450;
    --fw-medium: 500;
    --fw-medium-semibold: 550;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* --fs-paragraph: 1.0625rem; */
    --fs-paragraph: 1.15rem;
    /* Rewriting the website to be correct sizing, and making it 16px based */
}
@font-face {
    font-family: 'Integral CF Regular';
    src: url(./Resources/Fonts/Fontspring-DEMO-integralcf-regular.otf);
}
/* Makes the website not have any scrollability before and after the website */
/* html, body {
  overscroll-behavior: none;
} */

.no-select-selector {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.font-inter {
    font-family: Inter, sans-serif;
}
.font-poppins {
    font-family: "Poppins", sans-serif;
}
h1{
    /* No h1 is being used */
}
h2{
    font-family: 'Integral CF Regular';
    font-size: 2.4rem;
    /* line-height: 2rem; */
}
.h2-title {
    font-family: inherit;
    font-size: 2.3rem;
    font-weight: var(--fw-medium);
    line-height: 1;
}
h3{
    font-size: 1.45rem;
    font-weight: var(--fw-medium-semibold);
    color: inherit;
    text-decoration: none;
    /* 80pt */
}
h4{
    /* 50pt */
}
h5{
    font-weight: var(--fw-medium);
    /* font-size: 2.7rem; */
    /* 30pt */
}
p {
    font-weight: var(--fw-light);
    font-size: var(--fs-paragraph);
    /* line-height: 1.3; */
    /* 24pt */
}

a {
    font-weight: inherit;
    font-size: inherit;
    text-decoration: none;
    color: inherit;
}

/* Header section */

header {
    display: flex;
    height: 100dvh;
    height: 100vh;
    background-color: var(--color-main-blue);
    color: var(--color-white);
    justify-content: center;
    align-items: center;
}

.headder-typografy {
    display: flex;
    text-align: center;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 1.3rem;
}
header img {
    width: clamp(20rem, 50vw, 38rem);
}

header p {
    font-style: italic;
    font-weight: var(--fw-extralight);
    letter-spacing: 2.2px;
}

/* Project Section */
.projects-section {
    --inline-padding: 6.2rem;
    padding-bottom: 10rem;
}

/* Project Section Grid */
.pr-sec-main-title {
    padding-block: 5.5rem;
    text-align: center;
}
.pr-sec-main-title p {
    font-style: italic;
    font-weight: var(--fw-regular);
    transform: translateY(0.7rem)
}

#pr-sec-grid-previews {
    display: grid;
    height: 30rem;
    /* grid-template-columns: 1fr 2fr 3fr 2fr 1fr; */
    padding-inline: var(--inline-padding);
    gap: 1.4rem;
    transition: grid-template-columns 400ms;
}
.mobile-mode {
    /* background-color: red; */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.mobile-mode div:last-child {
        /* grid-row-end: -1; */
        grid-column: 1 / -1;
    }

.desktop-mode {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 2fr 1fr;
    max-width: 80rem;
    margin: 0 auto;
}

#pr-sec-grid-previews > * {
    border-radius: 1.2rem;
}

#pr-sec-grid-item-1 {
    background-color: var(--color-main-pink);
}
#pr-sec-grid-item-2 {
    background-color: var(--color-main-green);
}
#pr-sec-grid-item-3 {
    background-color: var(--color-main-blue);
}
#pr-sec-grid-item-4 {
    background-color: var(--color-main-yellow);
}
#pr-sec-grid-item-5 {
    background-color: var(--color-dark-purple);
}

/* Project Section Description */

.pr-sec-project-description-container {
    display: grid;
    /* background-color: blue; */
    justify-content: center;
    margin-top: 5.6rem;

    /* Gap between paragraphs and view more button */
    gap: 1.5rem;
    padding-inline: var(--inline-padding);
}

.pr-sec-project-description {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 4.75rem;
    max-width: 61rem;
}

.typografy {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    letter-spacing: 0.34px;
    line-height: 1.17;
}

.typografy h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pr-sec-typografy-text-1 {
    text-align: justify;
}
.pr-sec-typografy-text-2 {
    max-width: 28rem;
}

.view-more-button {
    position: relative;
    display: inline-block;
    color: inherit;
    text-decoration: none;
    font-size: var(--fs-paragraph);
    font-weight: var(--fw-medium);
}

.view-more-button::after {
    content: '';
    position: absolute;
    width: 0px;
    height: 2px;
    bottom: -5px;
    display: block;
    background: black; 
    transition: 200ms ease;
    border-radius: 50rem;
}

.view-more-button:hover::after {
    width: 100%;
}

/* About Section */

.about-me-section {
    background-color: var(--color-dark-purple);
    font-family: "Poppins", sans-serif;
    overflow: hidden;
}

.about-me-centering-container {
    --padding-amount: 60rem;
    --oval-height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* transform: translateY(calc(-1 * var(--oval-height)/2)); */
    /* gap: 7rem; */
}

.about-me-title {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

/* Curved Text */

.about-me-transition-element #transition-element {
    fill: white;
}
.about-be-curved-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    overflow: visible;
    /* max-width: 70rem; */
}
#curve {
    fill: transparent;
    /* fill: rgba(255, 0, 0, 0.338); */
}
.about-be-curved-text text {
    fill: white;
}
.about-be-curved-text textPath {
    font-family: 'Integral CF Regular';
}

/* About me typografy */
.about-me-typografy {
    display: flex;
    flex-direction: column;
    color: white;
    max-width: clamp(35rem, 60vw, 80rem);
    gap: 3rem;
    margin-bottom: 7em;
}
.about-me-typografy > * {
    font-family: "Poppins", sans-serif;
}
.about-me-typografy .paragraph-text {
    font-family: "Poppins", sans-serif;
    font-weight: var(--fw-light);
}
.about-me-typografy .paragraph-text a {
    font-family: "Poppins", sans-serif;
    font-weight: var(--fw-medium);
    font-size: inherit;
    /* letter-spacing: 0.3px; */
}
.about-me-typografy .text-container {
    font-family: "Poppins", sans-serif;
    line-height: 1.2;
}

.pfp {
    --pfp-width: 4.5rem;
    aspect-ratio: 1;
    width: var(--pfp-width);
    overflow: hidden;
    border-radius: 50rem;
    /* transform: translateX(0.5rem); */
}
.pfp img {
    aspect-ratio: 1;
    object-fit: cover;
    width: var(--pfp-width);
    transform: scale(2) translate(2px, 0);
}
.profile {
    font-family: "Poppins", sans-serif;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding-bottom: 6rem;
}
.profile .name {
    font-family: "Poppins", sans-serif;
    font-weight: var(--fw-medium);
}
.profile .name-title {
    font-family: "Poppins", sans-serif;
    font-style: italic;
    font-weight: var(--fw-extralight);
}

/* Services Section */

.services-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    padding-inline: 2rem;
}
.services-title {
    text-align: center;
    padding-top: 10rem;
    padding-bottom: 3rem;
}
/* Service text section */
.service-typografy {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 28rem;
}
.service-typografy h2 {
    padding-bottom: 0.7rem;
}
.service-container {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

/* Layout for each service offer */
.service-o {
    display: flex;
    align-items: center;
    max-width: 62.5rem;
    gap: 10.2rem;
    justify-content: space-between;
    /* background-color: blue; */
    padding-right: 3.6rem;
    box-sizing: border-box;
}

.service-offer-2 p {max-width: 25rem;}

/* The circular background behind icons */
.icon-image {
    --circle-size: 18.5rem; /* Adjust size here */
    width: var(--circle-size);
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-color: var(--color-main-blue);
}

/* Make all icons uniform in size */
.icon-image img {
    height: auto;
    object-fit: contain;
    display: block;
}

/* Color variations (optional) */
.service-offer-1 .icon-image {
    background-color: var(--color-main-pink);
    img {
        width: 65%;
    }
}
.service-offer-2 .icon-image {
    background-color: var(--color-main-green);
    img {
        width: 42%;
        transform: translateX(-5%);
    }
}
.service-offer-3 .icon-image {
    background-color: var(--color-main-yellow);
    img {
        width: 65%;
    }
}

.cta-section {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    margin-block: 12rem;
    margin-bottom: 8rem;
}


.cta-container {
    flex: 1;
    max-width: 62rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    gap: 2.5rem;
    padding-block: 7rem;
    padding-inline: 3rem;
    margin-inline: 1rem;

    box-sizing: border-box;
    
    color: var(--color-white);
    border-radius: 2rem;
    background-color: var(--color-main-blue);
}

.cta-typografy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: "Poppins", sans-serif;
}
.cta-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* gap: 0.5rem; */
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    border-radius: 500rem;
    background-color: var(--color-white);
    color: var(--color-black);

    font-weight: var(--fw-medium);
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;

    transition: width 0.3s ease; /* Apply transition to width */
    width: 11rem;
    img {
        width: 1rem;
        max-width: 100%;
    }
}
.cta-button:hover {
    width: 15rem;
}

footer {
    display: flex;
    flex-direction: column;
    background-color: var(--color-main-blue);
    align-items: center;
    padding: 1.25rem;
    gap: 0.3rem;
    color: var(--color-light-blue);
}
footer p {
    font-size: 1rem;
}
footer img {
    width: 6.5rem;
}

/* Responsive design - Media Queries */
@media (max-width: 1030px) {
    .services-section {
        gap: 5rem;
    }
    .service-o {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 0;
    }
    
    .service-offer-2 {
        flex-direction: column-reverse;
        padding-block: 5rem;
        border-block: 2px solid var(--color-black);
        box-sizing: border-box;
    }
    .service-offer-2 p {max-width: 30rem;}

    .service-typografy {
        max-width: 40rem;
    }

    .icon-image {
        --circle-size: 6rem;
        /* display: none; */
    }

    .icon-image img {
        width: 65%;
    }

    /* Cta section */
    .cta-section {
        margin-block:  8rem;
    }
    .cta-container {
        padding-block: 8rem;
        padding-inline: 3rem;
    }
}

@media (max-width: 600px) {
    .paragraph-text {
        padding-inline: 2rem;
    }
    .profile {
        flex-direction: column;
        padding-bottom: 2rem;
        /* padding-bottom: 15rem; */
    }

    /* Projects Section*/
    .pr-sec-project-description-container {
        padding-inline: 1.5rem;
    }
    #pr-sec-grid-previews {
        padding-inline: 1.5rem;
    }
    
}
@media (max-width: 900px) {
    .projects-section {
        --inline-padding: 3rem;
    }
    #pr-sec-grid-previews {
        /* padding-inline: 3rem; */
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    #pr-sec-grid-previews div:last-child {
        /* grid-row-end: -1; */
        grid-column: 1 / -1;
    }
    .pr-sec-project-description {
        grid-template-columns: 1fr;
    }
    .pr-sec-typografy-text-2 {
        max-width: none;
    }
}
@media (max-width: 1300px) {
    .pr-sec-typografy-text-1 {
        text-align: left;
    }
}