@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");


/* =========================================
   ABOUT SECTION - CLEAN EDITORIAL LAYOUT
   Desktop design preserved
========================================= */

.about {
    position: relative;
    z-index: 5;

    width: 100%;

    min-height: 0;

    padding: 62px 0 60px;

    background: #ffffff;
}


.about-container {
    width: 92%;
    max-width: 1500px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 50px;
}


.about-content {
    max-width: 760px;
}


.about-title {
    margin: 0;

    font-size: clamp(46px, 4.35vw, 68px);

    line-height: 1.08;

    letter-spacing: -2.2px;

    font-weight: 100;

    color: #292929;
}


.about-details {
    max-width: 720px;

    justify-self: end;
}


.about-description {
    max-width: 700px;

    margin: 0 0 25px;

    font-size: clamp(17px, 1.25vw, 22px);

    line-height: 1.42;

    font-weight: 400;

    color: #171717;
}


.about-description:last-of-type {
    margin-bottom: 29px;
}


.about-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    padding: 15px 30px;

    border: 1.5px solid #171717;

    background: transparent;

    color: #171717;

    border-radius: 999px;

    font-size: 17px;

    font-weight: 400;

    text-decoration: none;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.about-btn:hover {
    background: #171717;

    color: #ffffff;

    transform: translateY(-2px);
}


.about-btn span {
    font-size: 20px;

    line-height: 1;
}


/* =========================================================
   1440px AND BELOW
   Large Desktop
========================================================= */

@media screen and (max-width: 1440px) {

    .about-container {
        width: 92%;

        max-width: 1400px;

        gap: 45px;
    }

    .about-content {
        max-width: 720px;
    }

    .about-details {
        max-width: 680px;
    }

    .about-title {
        font-size: clamp(46px, 4.35vw, 68px);
    }

    .about-description {
        font-size: clamp(17px, 1.25vw, 21px);
    }
}


/* =========================================================
   1152px AND BELOW
   Laptop / Small Desktop
========================================================= */

@media screen and (max-width: 1152px) {

    .about {
        padding: 58px 0 56px;
    }

    .about-container {
        width: 90%;

        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(0, 0.95fr);

        gap: 40px;
    }

    .about-content {
        max-width: 650px;
    }

    .about-details {
        max-width: 600px;
    }

    .about-title {
        font-size: clamp(44px, 4.8vw, 62px);

        line-height: 1.07;

        letter-spacing: -1.8px;
    }

    .about-description {
        font-size: clamp(16px, 1.5vw, 20px);

        line-height: 1.45;
    }

    .about-btn {
        font-size: 16px;

        padding: 14px 28px;
    }
}


/* =========================================================
   992px AND BELOW
   TABLET
========================================================= */

@media screen and (max-width: 992px) {

    .about {
        width: 100%;

        min-height: auto;

        padding: 65px 0;
    }

    .about-container {
        width: 88%;

        margin: 0 auto;

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .about-content,
    .about-details {
        max-width: 100%;

        width: 100%;

        justify-self: stretch;
    }

    .about-title {
        max-width: 800px;

        font-size: clamp(44px, 7vw, 64px);

        line-height: 1.06;

        letter-spacing: -1.8px;
    }

    .about-details {
        max-width: 750px;
    }

    .about-description {
        max-width: 750px;

        font-size: 19px;

        line-height: 1.48;

        margin-bottom: 25px;
    }

    .about-btn {
        font-size: 16px;

        padding: 14px 28px;
    }
}


/* =========================================================
   768px AND BELOW
   LARGE MOBILE / TABLET PORTRAIT
========================================================= */

@media screen and (max-width: 768px) {

    .about {
        padding: 55px 0;
    }

    .about-container {
        width: 88%;

        gap: 32px;
    }

    .about-content,
    .about-details {
        width: 100%;

        max-width: 100%;
    }

    .about-title {
        max-width: 100%;

        font-size: clamp(40px, 8.5vw, 56px);

        line-height: 1.06;

        letter-spacing: -1.5px;
    }

    .about-description {
        max-width: 100%;

        font-size: 18px;

        line-height: 1.5;

        margin: 0 0 24px;
    }

    .about-description:last-of-type {
        margin-bottom: 27px;
    }

    .about-btn {
        font-size: 15px;

        padding: 13px 26px;

        gap: 10px;
    }
}


/* =========================================================
   576px AND BELOW
   MEDIUM MOBILE
========================================================= */

@media screen and (max-width: 576px) {

    .about {
        padding: 50px 0;
    }

    .about-container {
        width: 88%;

        gap: 28px;
    }

    .about-title {
        font-size: clamp(36px, 9.5vw, 50px);

        line-height: 1.07;

        letter-spacing: -1.25px;
    }

    .about-description {
        font-size: 17px;

        line-height: 1.5;

        margin-bottom: 23px;
    }

    .about-description:last-of-type {
        margin-bottom: 25px;
    }

    .about-btn {
        font-size: 15px;

        padding: 12px 24px;

        border-width: 1.5px;
    }
}


/* =========================================================
   480px AND BELOW
   SMALL MOBILE
========================================================= */

@media screen and (max-width: 480px) {

    .about {
        padding: 45px 0;
    }

    .about-container {
        width: 87%;

        gap: 25px;
    }

    .about-title {
        font-size: clamp(34px, 10vw, 46px);

        line-height: 1.07;

        letter-spacing: -1.1px;
    }

    .about-description {
        font-size: 16px;

        line-height: 1.52;

        margin-bottom: 22px;
    }

    .about-description:last-of-type {
        margin-bottom: 24px;
    }

    .about-btn {
        font-size: 14px;

        padding: 11px 22px;

        gap: 8px;
    }

    .about-btn span {
        font-size: 18px;
    }
}


/* =========================================================
   320px AND BELOW
   EXTRA SMALL DEVICES
========================================================= */

@media screen and (max-width: 320px) {

    .about {
        padding: 40px 0;
    }

    .about-container {
        width: 90%;

        gap: 23px;
    }

    .about-title {
        font-size: 32px;

        line-height: 1.08;

        letter-spacing: -0.9px;
    }

    .about-description {
        font-size: 15px;

        line-height: 1.5;

        margin-bottom: 20px;
    }

    .about-description:last-of-type {
        margin-bottom: 22px;
    }

    .about-btn {
        font-size: 14px;

        padding: 10px 20px;

        gap: 7px;
    }

    .about-btn span {
        font-size: 17px;
    }
}


/* =========================================================
   SECTION TYPOGRAPHY
   Applied only inside About section
========================================================= */

.about,
.about * {
    font-family: "Aktiv Grotesk", Verdana, sans-serif;
}


/* =========================================================
   SWID-STYLE TYPE HIERARCHY
========================================================= */

.about-title {
    font-family: "Aktiv Grotesk", Verdana, sans-serif;
}


.about-description {
    font-family: "Aktiv Grotesk", Verdana, sans-serif;

    font-weight: 300;

    letter-spacing: -0.01em;
}


.about-btn {
    font-family: "Aktiv Grotesk", Verdana, sans-serif;
}