/* =========================================================
   WRENOVA RESPONSIVE
   ========================================================= */


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1300px) {

    .wr-hero-main {

        grid-template-columns:
            0.88fr
            1.12fr;

    }


    .wr-container-visual {

        height: 600px;

        right: 9%;

        bottom: 30%;

    }


    .wr-container-image-wrap {

        width: 115%;

    }

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .wr-hero-top {

        height: 100px;

    }


    .wr-hero-logo {

        width: 205px;

    }


    .wr-hero-main {

        grid-template-columns:
            1fr;

        padding-top: 60px;

    }


    .wr-hero-content {

        padding-bottom: 25px;

    }


    .wr-hero-title {

        font-size:
            clamp(
                66px,
                11vw,
                100px
            );

    }


    .wr-hero-description {

        max-width: 520px;

    }


    .wr-container-visual {

        height: 570px;

    }


    .wr-container-image-wrap {

        width: 100%;

        right: -2%;

        bottom: 20px;

    }


    .wr-container-orbit {

        width: 500px;

        height: 500px;

        right: 8%;

    }


    .wr-hero-monogram {

        width: 750px;

        height: 750px;

        left: 60%;

        top: 60%;

    }


    .wr-mini-statement {

        margin-top: 45px;

    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .wr-container {

        width: 90%;

    }


    .wr-hero-top {

        height: 90px;

    }


    .wr-hero-logo {

        width: 180px;

    }


    .wr-top-note {

        display: none;

    }


    .wr-hero-main {

        padding-top: 45px;

    }


    .wr-hero-content {

        padding:
            0 0
            20px;

    }


    .wr-hero-eyebrow {

        margin-bottom: 24px;

    }


    .wr-hero-title {

        font-size:
            clamp(
                51px,
                15vw,
                73px
            );

        line-height: 0.88;

    }


    .wr-hero-description {

        margin-top: 28px;

        font-size: 15px;

    }


    .wr-main-button {

        width: 100%;

        justify-content:
            space-between;

    }


    .wr-mini-statement {

        margin-top: 40px;

    }


    /* CONTAINER */

    .wr-container-visual {

        height: 400px;

        margin-top: 15px;

    }


    .wr-container-image-wrap {

        width: 125%;

        right: -16%;

        bottom: 40px;

    }


    .wr-container-orbit {

        width: 340px;

        height: 340px;

        right: -40px;

        top: 15px;

    }


    .wr-container-orbit::before {

        inset: 35px;

    }


    .wr-container-label {

        top: 5%;

        right: 0;

    }


    .wr-container-dot {

        top: 14%;

        right: 3%;

    }


    /* MONOGRAM */

    .wr-hero-monogram {

        width: 400px;

        height: 400px;

        top: 67%;

        left: 50%;

        opacity: 0.1;

    }


    /* BOTTOM */

    .wr-hero-bottom {

        min-height: 120px;

        padding:
            25px 0;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 20px;

    }


    .wr-scroll {

        align-self:
            flex-end;

    }

}


/* =========================================================
   WHY WRENOVA RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .wr-why-values {

        grid-template-columns:
            repeat(3, 1fr);

        row-gap: 55px;

    }

}


@media (max-width: 850px) {

    .wr-why-section {

        padding:
            95px 0;

    }


    .wr-why-heading {

        grid-template-columns:
            1fr;

        gap: 25px;

    }


    .wr-why-heading-left {

        min-width: 0;

    }


    .wr-why-box {

        padding:
            50px 30px;

    }


    .wr-why-values {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 560px) {

    .wr-why-heading-left h2 {

        font-size: 48px;

    }


    .wr-why-box {

        margin-top: 35px;

        padding:
            40px 20px;

        border-radius:
            0 18px 18px 18px;

    }


    .wr-why-intro p {

        font-size: 15px;

    }


    .wr-why-values {

        grid-template-columns:
            1fr;

        gap: 45px;

        margin-top: 65px;

    }


    .wr-why-item h3 {

        min-height: auto;

    }


    .wr-why-item p {

        max-width: 260px;

    }

}

/* =========================================================
   MINIMAL CTA RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .wr-mini-cta {

        padding:
            75px 0;

    }


    .wr-mini-cta-box {

        min-height: 400px;

        border-radius: 24px;

    }


    .wr-mini-cta-content {

        width: 82%;

    }


    .wr-mini-cta-side {

        display: none;

    }


    .wr-mini-cta-mark {

        width: 330px;
        height: 330px;

        left: -120px;
        bottom: -120px;

    }

}


@media (max-width: 600px) {

    .wr-mini-cta {

        padding:
            55px 0;

    }


    .wr-mini-cta-box {

        min-height: 420px;

        padding:
            55px 22px;

        border-radius: 20px;

    }


    .wr-mini-cta-content {

        width: 100%;

    }


    .wr-mini-cta-kicker {

        gap: 10px;

    }


    .wr-mini-cta-kicker span {

        width: 22px;

    }


    .wr-mini-cta-kicker p {

        font-size: 7px;

        letter-spacing: 1.8px;

    }


    .wr-mini-cta-content h2 {

        font-size:
            clamp(
                43px,
                13vw,
                62px
            );

    }


    .wr-mini-cta-text {

        font-size: 14px;

    }


    .wr-mini-cta-button {

        width: 100%;

        justify-content: space-between;

    }


    .wr-mini-cta-mark {

        width: 280px;
        height: 280px;

        left: -140px;
        bottom: -100px;

    }


    .wr-mini-cta-circle-one {

        width: 310px;
        height: 310px;

        right: -220px;

    }


    .wr-mini-cta-circle-two {

        width: 230px;
        height: 230px;

        right: -170px;

    }


    .wr-mini-cta-circle-three {

        display: none;

    }

}

/* =========================================================
   CONTACT RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .wr-contact-section {

        padding:
            110px 0;

    }


    .wr-contact-layout {

        grid-template-columns:
            1fr;

        gap: 65px;

    }


    .wr-contact-intro {

        max-width: 700px;

    }

}


@media (max-width: 650px) {

    .wr-contact-section {

        padding:
            85px 0;

    }


    .wr-contact-heading {

        font-size:
            clamp(
                50px,
                14vw,
                70px
            );

    }


    .wr-contact-card {

        padding:
            34px 22px;

        border-radius: 22px;

    }


    .wr-contact-card-head {

        margin-bottom: 34px;

    }


    .wr-form-row {

        grid-template-columns:
            1fr;

    }


    .wr-contact-submit {

        width: 100%;

        justify-content:
            space-between;

    }


    .wr-contact-card-index {

        width: 44px;
        height: 44px;

    }

}

/* =========================================================
   FOOTER RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .wr-footer-main {

        grid-template-columns:
            1fr;

        gap: 55px;

    }


    .wr-footer-brand {

        max-width: 520px;

    }


    .wr-footer-contact {

        grid-template-columns:
            repeat(3, 1fr);

        gap: 22px;

    }

}


@media (max-width: 850px) {

    .wr-footer {

        padding:
            65px 0
            28px;

    }


    .wr-footer-contact {

        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 34px;

    }


    .wr-footer-contact-item:last-child {

        grid-column:
            1 / -1;

        max-width: 520px;

    }


    .wr-footer-divider {

        margin:
            50px 0
            26px;

    }

}


@media (max-width: 650px) {

    .wr-footer {

        padding:
            55px 0
            24px;

    }


    .wr-footer-main {

        gap: 45px;

    }


    .wr-footer-logo {

        width: 210px;

    }


    .wr-footer-brand p {

        max-width: 340px;

        margin-top: 22px;

        font-size: 14px;

        line-height: 1.65;

    }


    .wr-footer-contact {

        grid-template-columns:
            1fr;

        gap: 28px;

    }


    .wr-footer-contact-item:last-child {

        grid-column: auto;

        max-width: none;

    }


    .wr-footer-contact-item {

        gap: 14px;

    }


    .wr-footer-icon {

        width: 42px;
        height: 42px;

    }


    .wr-footer-icon svg {

        width: 17px;
        height: 17px;

    }


    .wr-footer-contact-item a,
    .wr-footer-contact-item p {

        font-size: 13px;

    }


    .wr-footer-divider {

        margin:
            42px 0
            24px;

    }


    .wr-footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }


    .wr-footer-bottom-right {

        justify-content: flex-start;

        flex-wrap: wrap;

        gap: 10px;

    }

}


@media (max-width: 420px) {

    .wr-footer-logo {

        width: 190px;

    }


    .wr-footer-brand p {

        font-size: 13px;

    }


    .wr-footer-contact-item {

        align-items: flex-start;

    }


    .wr-footer-contact-item a,
    .wr-footer-contact-item p {

        font-size: 12px;

        line-height: 1.6;

    }


    .wr-footer-bottom > p {

        font-size: 9px;

        line-height: 1.6;

    }


    .wr-footer-bottom-right {

        font-size: 6px;

        letter-spacing: 1.5px;

    }

}

/* =========================================================
   COMING SOON RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .wr-coming-soon {

        padding:
            105px 0;

    }


    .wr-countdown {

        gap: 12px;

    }


    .wr-countdown-item {

        width: 130px;
        height: 130px;

    }

}


@media (max-width: 650px) {

    .wr-coming-soon {

        padding:
            90px 0;

    }


    .wr-coming-inner h2 {

        font-size:
            clamp(
                52px,
                15vw,
                76px
            );

    }


    .wr-coming-description {

        font-size: 14px;

    }


    .wr-countdown {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 16px;

        max-width: 320px;

        margin:
            50px auto 0;

    }


    .wr-countdown-item {

        width: 100%;
        height: auto;

        aspect-ratio: 1;

    }


    .wr-countdown-divider {

        display: none;

    }


    .wr-countdown-number {

        font-size: 46px;

    }


    .wr-coming-bottom {

        gap: 10px;

        margin-top: 45px;

        font-size: 6px;

        letter-spacing: 1.5px;

    }


    .wr-coming-monogram {

        width: 380px;
        height: 380px;

        right: -180px;
        bottom: -130px;

    }

}