header {
    position: relative;
}

p {
    font-family: "Kollektif", sans-serif;
    font-size: 14px;
}

/* Index Styling */
section.indexHero {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100vh;
    max-height: 980px;
    min-height: fit-content;
    z-index: 1;

    @media (max-height: 767px) {
        height: -webkit-fill-available;
    }

    @media (max-width: 767px) {
        /* height: -webkit-fill-available;
        max-height: -webkit-fill-available; */
        height: 100%;
        /*max-height: 100%;*/
        max-height: fit-content;
    }

    .hero-bg {
        &:hover {
            #bannerStatic {
                display: none;
            }

            #bannerVid {
                display: block;
            }
        }

        video {
            position: absolute;
            z-index: 0;
            width: 100%;
            /* height: -webkit-fill-available; */
            height: 100%;
            object-fit: cover;

            &#bannerVid {
                display: none;
            }
        }

        img {
            position: absolute;
            z-index: 1;
            opacity: 70%;
            width: 100%;
            /* height: -webkit-fill-available; */
            height: 100%;
            object-fit: cover;

            &#bannerStatic {
                opacity: 100%;
            }
        }
    }

    .hero-contents {
        width: -webkit-fill-available;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 2;
        padding-top: 200px;
        align-items: center;
        margin: auto;
        color: var(--color-beige);

        @media (min-width: 1200px) {
            max-width: 925px;
        }

        @media (max-width: 1199px) {
            padding-top: 140px;
            padding: 70px 30px 0 30px !important;
            margin-bottom: 30px;
            margin-top: 165px;
        }

        @media (max-width: 767px) {
            padding-top: 100px;
            margin-top: 0;
        }

        h2 {
            text-align: center;
            margin-bottom: 30px;

            &.quasi-h1 {
                font-family: var(--fontMainBold);
                color: var(--color-gold);
                font-size: 120px !important;

                @media (max-width: 1199px) {
                    font-size: 80px !important;
                }

                @media (max-width: 767px) {
                    font-size: 60px !important;
                }

                /*@media (max-width: 440px) {
                    font-size: 27.27vw !important;
                }*/
            }
        }

        p {
            margin-bottom: 30px;

            &.subtitle {
                max-width: 600px;
                margin-bottom: 40px;
                line-height: 24px;
            }
        }

        .get-audit {
            display: flex;
            flex-direction: column;
            position: relative;
            width: -webkit-fill-available;
            max-width: 600px;

            a {
                text-decoration: none;

                &.submit-btn {
                    position: absolute;
                    right: 10px;
                    top: 9px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: -webkit-fill-available;
                    max-width: 90px;
                    height: 100vh;
                    max-height: 24px;
                    border-radius: 1000px;
                    padding: 7px 15px;
                    background: var(--color-gold);
                    box-shadow: none !important;
                    border: none;
                    color: var(--color-beige);
                    font-family: var(--fontSecond);
                    text-align: center;
                    transition: 0.5s ease;

                    &:hover {
                        background: var(--color-green);
                    }

                    @media (max-width: 440px) {
                        position: relative;
                        right: 0;
                        top: 0;
                        margin: auto;
                        margin-bottom: 30px;
                    }
                }
            }
        }

        #wpcf7-f1981-o1 {
            label {
                position: relative;
                width: fit-content;

                @media (max-width: 767px) {
                    max-width: -webkit-fill-available;
                }
            }

            span {
                &.wpcf7-spinner {
                    display: none !important;
                }
            }

            form.wpcf7-form.init {
                display: flex;
                flex-direction: column;
                position: relative;
                align-items: center;
            }

            .wpcf7-response-output {
                display: none;
            }
        }

        .wpcf7 input[type="email"] {
            width: 100vw;
            max-width: 550px;
            height: 100vh;
            max-height: 30px;
            padding: 12px !important;
            padding-left: 40px !important;
            border-radius: 1000px;
            border: 1px solid var(--color-gold);
            background: rgba(245, 245, 220, 0.1);
            position: relative;
            color: var(--color-beige);
            font-family: var(--fontSecond);
            font-size: 16px;
            margin-bottom: 30px;

            @media (max-width: 440px) {
                padding-left: 12px !important;
            }

            &::placeholder {
                color: var(--color-beige);
                font-family: var(--fontSecond);

                @media (max-width: 440px) {
                    text-align: center;
                }
            }

            &:not(:placeholder-shown) {
                background: rgba(245, 245, 220, 0.3);
                border-color: var(--color-gold);
            }

            &:focus {
                outline: none;
                box-shadow: none;
            }

            @media (max-width: 767px) {
                max-width: -webkit-fill-available;
            }
        }

        .wpcf7 input[type="submit"] {
            display: none;
        }

        .hero-ratings {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            width: -webkit-fill-available;
            max-width: 600px;
            margin-bottom: 40px;

            @media (max-width: 767px) {
                flex-direction: column;
            }

            .stars {
                display: flex;
                gap: 10px;
            }
        }

        a {
            &.sig-btn {
                border-radius: 1000px;
                /* padding: 15px 25px; */
                padding: 10px 20px;
                font-size: 24px;
                text-align: center;
                width: 100%;
                max-width: 125px;
                border: 1px solid var(--color-gold);
                transition: 0.3s ease;

                &:hover {
                    background: none;
                }
            }
        }
    }

    .hero-socmed {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        right: 100px;
        z-index: 2;
        height: 100vh;
        max-height: 980px;

        @media (max-width: 1199px) {
            flex-direction: row;
            justify-content: center;
            position: relative;
            right: 0;
            z-index: 2;
            height: auto;
            margin-bottom: 70px;
        }

        @media (max-width: 767px) {
            margin-bottom: 50px;
        }

        .socmed-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 35px;
            background: rgba(245, 245, 220, 0.1);
            border: 1px solid var(--color-gold);
            border-radius: 1000px;
            padding: 24px 16px;

            @media (max-width: 1199px) {
                flex-direction: row;
                padding: 16px;
            }

            a {
                &.socmed-btn {
                    svg {
                        transition: 0.3s ease;
                    }

                    &:hover {
                        svg {
                            filter: brightness(1.5);
                        }
                    }
                }
            }
        }
    }
}

section.indexMarquee {
    background: var(--color-gold);
    padding: 40px;

    position: relative;
    z-index: 1;

    @media (max-width: 1199px) {
        /*padding: 20px 30px;*/
    }

    @media (max-width: 767px) {
        /*padding: 20px 20px;*/
    }

    .marquee-contents {
        width: 100%;
        max-width: 1575px;
        margin: 0 auto;

        h2 {
            font-size: 20px !important;
            color: var(--color-beige);
            text-align: center;
            margin-bottom: 40px;
        }

        .logo-marquee {
            display: flex;
            gap: 50px;
            position: relative;
            overflow: hidden;
            width: 100%;
            mask-image: linear-gradient(
                to right,
                transparent,
                black 10%,
                black 90%,
                transparent
            );
            -webkit-mask-image: linear-gradient(
                to right,
                transparent,
                black 10%,
                black 90%,
                transparent
            );

            .logo-marquee-track {
                display: flex;

                .logo-track {
                    display: flex;
                    width: max-content;
                    animation: scroll-left 20s linear infinite;
                    height: 100%;
                    max-height: 30px;

                    .logo-item {
                        flex: 0 0 auto;
                        padding: 0 2rem;

                        img {
                            width: 100%;
                            max-width: 200px;
                            height: 100%;
                            max-height: 100px;
                            object-fit: contain;
                        }
                    }
                }
            }
        }
    }
}

/* Keyframes for the loop */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-60%);
    }
}

section.indexTransforms {
    background-color: #d5c3aa;

    background-image:
        linear-gradient(rgba(213, 195, 170, 0.3), rgba(213, 195, 170, 0.3)),
        linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
        url("../../assets/revamp/images/transforms-texture.jpg");

    background-blend-mode: normal, normal, multiply;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    padding: 0;
    position: relative;
    /* overflow: hidden; */

    .bubble-bg {
        display: flex;
        position: absolute;

        &.bubble-top {
            top: -310px;
            left: -240px;
        }

        &.bubble-bottom {
            justify-content: flex-end;
            bottom: -400px;
            right: 175px;
        }

        img {
            width: 600px;
            height: 600px;
            opacity: 30%;

            @media (max-width: 380px) {
                width: 157.89vw;
            }
        }
    }

    .transforms-contents {
        width: 100%;
        max-width: 62.25vw;
        margin: 0 auto;

        z-index: 1;
        position: relative;

        /* padding: 100px 0; */
        /* padding-bottom: 0; */

        @media (min-width: 1921px) {
            max-width: 1245px;
        }

        @media (max-width: 1199px) {
            max-width: -webkit-fill-available;
        }

        @media (max-width: 767px) {
            display: flex;
            flex-direction: column;
        }

        &::before {
            content: " ";
            display: table;
        }

        &::after {
            content: " ";
            display: table;
            clear: both;
        }

        .left-contents {
            float: left;
            width: 53%;
            position: sticky;
            top: 120px;

            @media (max-width: 767px) {
                display: flex;
                flex-direction: column;
                width: 100%;
                position: relative;
                top: 0;

                text-align: center;
            }

            .left-header {
                margin-bottom: 40px;

                h2 {
                    color: var(--color-black);
                    margin-bottom: 20px;
                }

                p {
                    line-height: 24px;
                    font-size: 14px;

                    @media (max-width: 767px) {
                        margin-bottom: 0;
                    }
                }
            }

            .quad-boxes {
                .quad-upper {
                    display: flex;

                    @media (max-width: 1199px) {
                        flex-direction: column;
                    }

                    .main-box {
                        background: var(--color-green);
                        border-radius: 16px;
                        position: relative;
                        top: 24px;
                        width: 100%;
                        max-width: 270px;
                        padding: 70px 50px;
                        display: flex;
                        flex-direction: column;
                        z-index: 1;

                        @media (max-width: 1199px) {
                            top: 0px;
                            max-width: -webkit-fill-available;
                            padding: 50px 30px;
                            margin-bottom: 50px;
                        }

                        @media (max-width: 767px) {
                            padding: 30px;
                        }

                        p {
                            font-family: var(--fontSecond);
                            font-size: 14px;
                            line-height: 24px;
                            color: var(--color-beige);
                            margin-bottom: 30px;
                        }

                        a {
                            &.sig-btn {
                                /* padding: 15px 25px; */
                                padding: 10px 20px;
                                border-radius: 1000px;
                                font-size: 24px;
                                text-align: center;
                                border: 1px solid var(--color-gold);
                                transition: 0.3s ease;

                                &:hover {
                                    background: none;
                                }
                            }
                        }
                    }

                    img {
                        display: block;
                        position: absolute;
                        right: 0;

                        @media (max-width: 1199px) {
                            position: relative;
                            max-height: 150px;
                            object-fit: cover;
                            border-radius: 16px;
                        }

                        @media (max-width: 767px) {
                            display: none;
                        }
                    }
                }

                .quad-lower {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;

                    @media (max-width: 1880px) {
                        margin-top: 50px;
                    }

                    @media (max-width: 1199px) {
                        flex-direction: column;
                    }

                    @media (max-width: 767px) {
                        display: none;
                    }

                    img {
                        &:first-of-type {
                            width: 100%;
                            /* max-width: 360px; */
                            max-width: 18.75vw;
                            height: 100vh;
                            max-height: 260px;
                            margin-right: 24px;
                            object-fit: cover;
                            border-radius: 16px;

                            @media (max-width: 1199px) {
                                max-width: -webkit-fill-available;
                                margin-right: 0;
                                margin-bottom: 50px;
                                max-height: 150px;
                            }
                        }

                        &:last-of-type {
                            width: 100%;
                            /* max-width: 250px; */
                            max-width: 13.02vw;
                            height: 100vh;
                            max-height: 300px;
                            object-fit: cover;
                            border-radius: 16px;

                            @media (max-width: 1880px) {
                                max-height: 260px;
                            }

                            @media (max-width: 1199px) {
                                max-width: -webkit-fill-available;
                                max-height: 150px;
                            }
                        }
                    }
                }
            }
        }

        .right-contents {
            float: right;
            width: 43%;
            display: flex;
            flex-direction: column;
            gap: 24px;

            @media (max-width: 767px) {
                display: flex;
                flex-direction: column;
                width: 100%;
            }

            .card-right {
                padding: 40px;
                border-radius: 16px;
                border: 1px solid var(--color-black);
                display: flex;
                flex-direction: column;
                justify-content: center;

                h3 {
                    color: var(--color-green);
                    font-family: var(--fontMain);
                    font-size: 36px;
                    margin-bottom: 15px;
                }

                p {
                    color: var(--color-black);
                    font-family: var(--fontSecond);
                    font-size: 14px;
                    line-height: 24px;
                    margin-bottom: 0;
                }
            }
        }
    }
}

section.indexServices {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-green);
    z-index: 1;

    .services-contents {
        width: 100%;
        max-width: 62.25vw;
        margin: 0 auto;
        display: flex;
        flex-direction: row-reverse;
        gap: 24px;

        @media (max-width: 1440px) {
            flex-direction: column;
        }

        @media (max-width: 1199px) {
            max-width: 100%;
        }

        .stack-main {
            display: flex;
            flex-direction: column;
            gap: 20px;

            .stack-header {
                @media (min-width: 1200px) {
                    padding: 40px;
                }

                h2 {
                    color: var(--color-gold);
                    font-size: 60px !important;
                    font-family: var(--fontMain);
                    margin-bottom: 20px;

                    @media (max-width: 1199px) {
                        font-size: 45px !important;
                    }

                    @media (max-width: 767px) {
                        font-size: 40px !important;
                    }
                }

                p {
                    color: var(--color-beige);
                    font-size: 14px;
                    font-family: var(--fontSecond);
                }
            }
        }

        .stack-sub {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .stack-box {
            height: 100%;
            max-height: 450px;
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;

            @media (max-width: 440px) {
                max-height: 590px;
            }

            .box-cover {
                display: flex;
                /* display: none; */
                flex-direction: column;
                align-items: center;
                position: absolute;
                /* background: var(--color-beige); */
                background:
                    linear-gradient(
                        180deg,
                        rgba(0, 0, 0, 0) 0%,
                        rgba(0, 0, 0, 0.1) 100%
                    ),
                    #d5c3aa;
                height: 100%;
                width: 100vw;
                max-width: -webkit-fill-available;
                justify-content: center;
                z-index: 2;

                /* prior hover */
                transition: opacity 0.3s ease;

                span {
                    &.above {
                        color: var(--color-green);
                        font-family: var(--fontMain);
                        font-size: 38px;
                        display: flex;
                        align-items: center;
                        gap: 10px;

                        @media (max-width: 1199px) {
                            font-size: 32px;
                        }

                        @media (max-width: 767px) {
                            font-size: 30px;
                        }
                    }

                    &.below {
                        color: var(--color-gold);
                        font-family: var(--fontMain);
                        font-size: 60px;
                        text-align: center;

                        @media (max-width: 1199px) {
                            font-size: 45px;
                        }

                        @media (max-width: 767px) {
                            font-size: 40px;
                        }
                    }
                }
            }

            .spacer {
                display: flex;
                position: absolute;
                right: 0;
                z-index: 1;

                @media (max-width: 440px) {
                    display: none;
                }
            }

            .stack-inner {
                border-radius: 16px;
                border: 1px solid var(--color-green);
                padding: 20px 48px;
                padding-top: 0;
                display: flex;
                flex-direction: column;
                position: relative;
                justify-content: flex-end;
                height: 100vh;
                max-height: 600px;

                .box-contents {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    /* height: 100vh; */
                    height: 100%;

                    .sub-cats {
                        display: flex;
                        justify-content: flex-end;
                        gap: 20px;
                        position: relative;
                        right: -40px;
                        z-index: 1;

                        /* prior hover */
                        transition: 0.3s ease;
                        top: 20px;

                        @media (max-width: 440px) {
                            right: 0;
                            justify-content: center;
                            flex-wrap: wrap;
                            margin-top: 20px;

                            padding: 25px;
                            background: var(--color-green);
                            border-radius: 20px;
                        }

                        .sub-cat {
                            padding: 5px 20px;
                            border-radius: 1000px;
                            background: var(--color-gold);
                            color: var(--color-beige);
                            font-family: var(--fontMain);
                            font-size: 20px;
                            margin-top: 20px;
                            text-align: center;
                            width: 100%;
                            max-width: 88px;

                            @media (max-width: 440px) {
                                margin: 0;
                            }
                        }
                    }

                    .box-details {
                        background: var(--color-light-beige);
                        border-radius: 16px;
                        padding: 20px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        text-align: center;
                        position: relative;

                        /* prior hover */
                        transition: 0.3s ease;
                        top: 20px;

                        h3 {
                            color: var(--color-green);
                            font-family: var(--fontMain);
                            font-size: 36px;
                            margin-bottom: 20px;
                        }

                        p {
                            font-size: 14px;
                            line-height: 24px;
                        }
                    }
                }
            }
        }

        .stack-special {
            border-radius: 16px;
            overflow: hidden;

            .box-contents {
                padding: 80px 60px;
                height: 100vh;
                max-height: 526px;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;

                .box-details {
                    h2 {
                        color: #fff;
                        font-family: var(--fontMain);
                        font-size: 36px !important;
                        font-weight: 400;
                        margin-bottom: 24px;

                        @media (max-width: 1199px) {
                            font-size: 32px !important;
                        }

                        @media (max-width: 767px) {
                            font-size: 30px !important;
                        }
                    }

                    p {
                        color: #fff;
                        font-size: 14px;
                        line-height: 24px;
                        margin-bottom: 40px;
                    }

                    a {
                        color: #fff;
                        font-size: 24px;
                        text-align: center;

                        &.sig-btn {
                            background: rgba(255, 255, 255, 0);
                            border: 1px solid #fff;
                            border-radius: 1000px;
                            padding: 15px 25px;
                            display: flex;
                            justify-content: center;
                            width: 100%;
                            max-width: 200px;
                            transition: 0.3s ease;

                            @media (max-width: 440px) {
                                max-width: -webkit-fill-available;
                            }

                            &:hover {
                                background: #fff;
                                color: var(--color-gold);
                            }
                        }
                    }
                }
            }
        }
    }
}

section.indexTestimonies {
    display: flex;
    flex-direction: column;
    background: var(--color-light-beige);
    overflow: hidden;
    /* overflow: clip; */

    .testimonies-contents {
        width: 100%;
        max-width: 62.25vw;
        margin: 0 auto;
        display: flex;
        flex-direction: column;

        @media (max-width: 1199px) {
            max-width: 100%;
        }

        .testimony-main {
            padding: 30px;
            border-radius: 16px;
            height: 100vh;
            max-height: 330px;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            margin-bottom: 80px;
            min-height: 350px;

            @media (max-width: 767px) {
                /*max-height: 775px;*/
                max-height: 500px;
            }

            @media (max-width: 575px) {
                max-height: 350px;
            }

            .card-within {
                background: #fff;
                padding: 40px;
                border-radius: 8px;
                width: 100%;
                max-width: 520px;
                height: 100vh;
                max-height: 210px;

                @media (max-width: 1199px) {
                    max-width: -webkit-fill-available;
                    max-height: max-content;
                }

                .card-user {
                    display: flex;
                    gap: 16px;
                    align-items: center;

                    img {
                        width: 40px;
                        height: 40px;
                    }

                    .user-details {
                        display: flex;
                        flex-direction: column;

                        span {
                            font-size: 14px;
                            font-family: var(--fontSecond);
                            line-height: 24px;
                            color: var(--color-black);

                            &.title {
                                font-weight: 700;
                            }
                        }
                    }
                }

                p {
                    font-size: 24px;
                    font-family: var(--fontMain);
                    margin-bottom: 32px;
                    color: var(--color-black);
                }
            }
        }
    }

    .testimony-carousel {
        display: flex;
        flex-direction: column;
        margin-bottom: 100px;

        .carousel-contents {
            display: flex;
            /* gap: 50px; */
            overflow: visible;
            margin-bottom: 40px;

            @media (max-width: 991px) {
                flex-direction: column;
            }

            .carousel-header {
                display: flex !important;
                flex-direction: column;
                justify-content: center;

                h2 {
                    color: var(--color-black);
                    width: 100vw;
                    max-width: 400px;
                    margin-bottom: 24px;

                    @media (max-width: 991px) {
                        max-width: -webkit-fill-available;
                        text-align: center;
                    }
                }

                .carousel-controls {
                    display: flex;
                    gap: 40px;

                    @media (max-width: 991px) {
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 30px;
                    }

                    .arrows {
                        /* display: flex; */
                        gap: 24px;
                        display: none;

                        @media (max-width: 991px) {
                            width: 100%;
                            justify-content: center;
                        }
                    }

                    a {
                        font-size: 24px;
                        line-height: 20px;
                        display: flex;
                        text-align: center;

                        &.sig-btn {
                            justify-content: center;
                            width: 100%;
                            max-width: 130px;
                            padding: 15px 25px;
                            border-radius: 1000px;
                            border: 1px solid var(--color-gold);
                            transition: 0.3s ease;

                            &:hover {
                                background: none;
                                color: var(--color-gold);
                            }
                        }

                        &.arrow {
                            padding: 17px 13px;
                            border-radius: 1000px;
                            border: 1px solid var(--color-gold);
                            width: 100%;
                            max-width: max-content;
                            cursor: pointer;
                            transition: 0.3s ease;

                            svg {
                                color: var(--color-gold);
                            }

                            &:hover {
                                background: var(--color-gold);

                                svg {
                                    color: var(--color-light-beige);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .testimony-sub {
        padding: 60px;
        border-radius: 16px;
        height: 100vh;
        /*max-height: 600px;*/
        max-height: 478px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border: 1px solid var(--color-gold);

        @media (max-width: 575px) {
            height: 100%;
            max-height: 100%;
        }

        .card-within {
            width: 100%;
            max-width: 616px;
            display: flex;
            flex-direction: column;
            align-items: center;

            h2 {
                color: var(--color-black);
                margin-bottom: 20px;
            }

            p {
                width: 100%;
                max-width: 500px;
                display: flex;
                flex-direction: column;
                position: relative;
                margin: 0 auto;
                margin-bottom: 40px;
                color: var(--color-black);
            }

            a {
                font-size: 24px;
                display: flex;
                justify-content: center;
                border: 1px solid var(--color-gold);
                transition: 0.3s ease;

                &.sig-btn {
                    padding: 15px 25px;
                    border-radius: 1000px;
                    width: 100%;
                    max-width: 250px;

                    &:hover {
                        color: var(--color-gold);
                        background: none;
                    }
                }
            }
        }
    }

    /* Owl Carousel */

    .owl-carousel .owl-stage {
        display: flex;
        width: max-content !important;
    }

    .owl-carousel .owl-stage-outer {
        position: relative;
        overflow: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        margin-left: 35px;
        padding-left: 5px;
    }

    .owl-carousel {
        .owl-item {
            margin-left: 20px;
            margin-right: 20px;

            @media (max-width: 575px) {
                margin-left: 5px;
                margin-right: 5px;
            }

            .item {
                width: 100vw;
                /* max-width: 355px; */
                max-width: 18.23vw;
                background: none;
                padding: 40px 24px;
                border-radius: 16px;
                border: 1px solid var(--color-gold);
                height: 100%;
                max-height: -webkit-fill-available;
                /* margin-left: 20px;
                margin-right: 20px; */

                p {
                    font-family: var(--fontMain);
                    font-size: 24px;
                    color: var(--color-black);
                }

                @media (max-width: 991px) {
                    max-width: 52.23vw;
                }

                @media (max-width: 767px) {
                    max-width: 63.23vw;
                }
            }
        }
    }

    .carousel-progress {
        /* display: flex; */
        display: none;
        width: 100%;
        height: 4px;
        overflow: hidden;
        border-radius: 2px; /* optional for smooth ends */
    }

    .carousel-progress .dot {
        flex: 1;
        height: 100%;
        background: rgba(189, 189, 189, 0.5);
        /* REMOVE margin to eliminate gaps */
        transition: background 0.3s ease;
    }

    .carousel-progress .dot.active {
        background: var(--color-gold);
    }

    .carousel-loop {
        position: relative;
        padding-left: 50px;

        @media (max-width: 991px) {
            padding-left: 0;
        }

        .user-header {
            display: flex;
            gap: 16px;
            margin-bottom: 24px;

            @media (max-width: 1199px) {
                flex-direction: column;
            }

            .user-details {
                display: flex;
                flex-direction: column;
                justify-content: center;

                span {
                    font-family: var(--fontSecond);
                    font-size: 14px;
                    line-height: 24px;
                    letter-spacing: 1px;
                    color: var(--color-black);

                    &.title {
                        font-weight: 700;
                    }
                }
            }
        }

        .stars {
            margin-bottom: 24px;

            path {
                color: var(--color-gold);
            }
        }
    }

    .carousel-loop::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100%;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(
            to right,
            #ede0cf 0%,
            #ede0cf 80%,
            rgba(237, 224, 207, 0.8) 88%,
            rgba(237, 224, 207, 0.4) 94%,
            rgba(237, 224, 207, 0.1) 98%,
            rgba(237, 224, 207, 0) 100%
        );

        @media (max-width: 991px) {
            width: 45px;
        }
    }

    .carousel-loop::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100%;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(
            to left,
            #ede0cf 0%,
            #ede0cf 80%,
            rgba(237, 224, 207, 0.8) 88%,
            rgba(237, 224, 207, 0.4) 94%,
            rgba(237, 224, 207, 0.1) 98%,
            rgba(237, 224, 207, 0) 100%
        );

        @media (max-width: 991px) {
            width: 45px;
        }

        @media (min-width: 992px) {
            display: none;
        }
    }

    /* Owl Carousel - End */
}

section.indexBlogs {
    background: var(--color-green);
    display: flex;
    flex-direction: column;

    .blogs-contents {
        width: 100%;
        max-width: 62.25vw;
        margin: 0 auto;
        display: flex;
        flex-direction: column;

        @media (max-width: 1199px) {
            max-width: 100%;
        }

        .blogs-header {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid var(--color-beige);
            padding-bottom: 50px;

            @media (max-width: 1199px) {
                flex-direction: column;
                align-items: center;
            }

            .header-text {
                width: 100%;
                max-width: 600px;
                margin-right: 50px;

                @media (max-width: 1199px) {
                    max-width: 100%;
                    margin-bottom: 30px;
                    text-align: center;
                    margin-right: 0;
                }

                h2 {
                    color: var(--color-gold);
                    font-family: var(--fontMain);
                    font-size: 60px !important;
                    margin-bottom: 20px;

                    @media (max-width: 1199px) {
                        font-size: 45px !important;
                    }

                    @media (max-width: 767px) {
                        font-size: 40px !important;
                    }
                }

                p {
                    color: var(--color-beige);
                    font-family: var(--fontSecond);
                    font-size: 14px;
                    letter-spacing: 1px;
                }
            }

            .header-button {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 100%;
                max-width: 270px;

                a {
                    &.sig-btn {
                        padding: 15px 25px;
                        border-radius: 1000px;
                        font-size: 24px;
                        line-height: 20px;
                        text-align: center;
                        border: 1px solid var(--color-gold);
                        transition: 0.3s ease;

                        &:hover {
                            background: none;
                            color: var(--color-gold);
                        }
                    }
                }
            }
        }

        .blogs-content {
            .blog-item {
                display: flex;
                gap: 150px;
                padding: 50px 0;
                border-bottom: 1px solid var(--color-beige);

                @media (max-width: 1199px) {
                    flex-direction: column;
                    gap: 30px;
                }

                span {
                    &.date {
                        color: var(--color-beige);
                        font-size: 14px;
                        line-height: 24px;
                        font-family: var(--fontSecond);
                        letter-spacing: 1px;
                    }
                }

                .details {
                    display: flex;
                    justify-content: space-between;
                    width: 75%;

                    @media (max-width: 1199px) {
                        width: 100%;
                        gap: 50px;
                    }

                    @media (max-width: 767px) {
                        flex-direction: column;
                        gap: 30px;
                    }

                    .preview {
                        width: 100%;
                        max-width: 600px;
                        display: flex;
                        flex-direction: column;

                        @media (max-width: 1199px) {
                            max-width: 100%;
                        }

                        h3 {
                            color: var(--color-gold);
                            font-family: var(--fontMain);
                            font-size: 36px;
                            margin-bottom: 20px;
                        }

                        p {
                            color: var(--color-beige);
                            font-family: var(--fontSecond);
                            font-size: 14px;
                            line-height: 24px;
                            letter-spacing: 1px;
                        }
                    }

                    .button {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;

                        a {
                            font-size: 24px;
                            line-height: 20px;
                            display: flex;
                            text-align: center;

                            &.sig-btn {
                                justify-content: center;
                                width: 100%;
                                max-width: 130px;
                                padding: 15px 25px;
                                border-radius: 1000px;
                                border: 1px solid var(--color-gold);
                                transition: 0.3s ease;

                                &:hover {
                                    background: none;
                                    color: var(--color-gold);
                                }
                            }

                            &.arrow {
                                padding: 17px 13px;
                                border-radius: 1000px;
                                border: 1px solid var(--color-gold);
                                width: 100%;
                                max-width: max-content;
                                cursor: pointer;
                                transition: 0.3s ease;

                                svg {
                                    color: var(--color-gold);
                                }

                                &:hover {
                                    background: var(--color-gold);

                                    svg {
                                        color: var(--color-light-beige);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

section.indexContact {
    background: var(--color-beige);
    display: flex;
    flex-direction: column;

    .contact-contents {
        width: 100%;
        max-width: 62.25vw;
        margin: 0 auto;
        display: flex;
        gap: 60px;

        @media (max-width: 1199px) {
            max-width: 100%;
            flex-direction: column;
        }

        .content-left {
            width: 100%;
            max-width: 600px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            @media (max-width: 1199px) {
                /* max-width: -webkit-fill-available; */
                margin: 0 auto;
                text-align: center;
            }

            .left-header {
                h2 {
                    color: var(--color-black);
                    margin-bottom: 20px;
                }

                p {
                    font-family: var(--fontSecond);
                    font-size: 14px;
                    line-height: 24px;
                    letter-spacing: 1px;
                    padding-bottom: 50px;
                    margin-bottom: 50px;

                    border-bottom: 1px solid var(--color-green);
                }
            }

            .left-body {
                a {
                    color: var(--color-green);
                    font-family: var(--fontMain);
                    text-decoration: none;
                    font-size: 28px;
                }

                .contact-details {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 60px;

                    @media (max-width: 1770px) {
                        flex-direction: column;
                        gap: 50px;
                    }

                    span {
                        font-family: var(--fontSecond);
                        font-size: 14px;
                        letter-spacing: 1px;
                    }

                    .email {
                        display: flex;
                        flex-direction: column;
                        gap: 15px;
                    }

                    .contact-number {
                        display: flex;
                        flex-direction: column;
                        gap: 15px;
                    }
                }

                .location-details {
                    display: flex;

                    .address {
                        display: flex;
                        flex-direction: column;
                        gap: 15px;
                    }
                }
            }
        }

        .content-right {
            width: 100%;
            max-width: -webkit-fill-available;
            display: flex;
            flex-direction: column;
            background: var(--color-green);
            padding: 80px 40px;
            border-radius: 20px;

            span {
                &.wpcf7-spinner {
                    display: none;
                }
            }

            .contact-form {
                display: flex;
                flex-direction: column;

                .form-header {
                    margin-bottom: 20px;

                    label {
                        color: var(--color-gold);
                        font-family: var(--fontMain);
                        font-size: 36px;
                    }
                }

                .form-row {
                    margin-bottom: 20px;

                    &.two-col {
                        display: flex;
                        gap: 30px;
                        margin-bottom: 20px;

                        @media (max-width: 1199px) {
                            flex-direction: column;
                        }
                    }

                    &:last-of-type {
                        margin-bottom: 0;
                    }
                }

                input {
                    &:not([type="submit"]) {
                        width: 100%;
                        max-width: -webkit-fill-available;
                        background: none;
                        padding: 10px;
                        border: 1px solid rgba(237, 224, 207, 0.45);
                        border-radius: 6px;
                        font-family: var(--fontSecond);
                        color: rgba(237, 224, 207, 0.7);
                        font-size: 14px;
                        line-height: 24px;
                        transition: 0.3s ease;

                        &::placeholder {
                            font-family: var(--fontSecond);
                            color: rgba(237, 224, 207, 0.7);
                            font-size: 14px;
                            line-height: 24px;
                        }

                        &:focus {
                            box-shadow: rgba(237, 224, 207, 0.7);
                        }
                    }

                    &[type="submit"] {
                        display: flex;
                        width: 100%;
                        max-width: -webkit-fill-available;
                        border-radius: 1000px;
                        border: 1px solid var(--color-gold);
                        padding: 15px 25px;
                        background: var(--color-gold);
                        font-family: var(--fontMain);
                        color: var(--color-beige);
                        font-size: 24px;
                        text-align: center;
                        cursor: pointer;
                        transition: 0.3s ease;

                        &:hover {
                            background: none;
                            color: var(--color-gold);
                        }
                    }
                }

                textarea {
                    width: 100%;
                    max-width: -webkit-fill-available;
                    background: none;
                    padding: 10px;
                    border: 1px solid rgba(237, 224, 207, 0.45);
                    border-radius: 6px;
                    font-family: var(--fontSecond);
                    color: rgba(237, 224, 207, 0.7);
                    font-size: 14px;
                    line-height: 24px;
                    transition: 0.3s ease;

                    &::placeholder {
                        font-family: var(--fontSecond);
                        color: rgba(237, 224, 207, 0.7);
                        font-size: 14px;
                        line-height: 24px;
                    }

                    &:focus {
                        box-shadow: rgba(237, 224, 207, 0.7);
                    }
                }
            }
        }
    }
}

section.indexCreative {
    background: var(--color-light-beige);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;

    .creative-contents {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 62.25vw;
        margin: 0 auto;

        @media (max-width: 1199px) {
            max-width: 100%;
            flex-direction: column;
        }

        .main {
            display: flex;
            flex-direction: column;

            h1 {
                color: var(--color-black);
                text-align: center;
                font-size: 115px;
                margin-bottom: 40px;

                @media (max-width: 1199px) {
                    font-size: 60px !important;
                }

                @media (max-width: 767px) {
                    font-size: 50px !important;
                }

                /*@media (max-width: 767px) {
                    font-size: 14.99vw;
                }*/
            }

            .main-contents {
                display: flex;
                position: relative;

                @media (max-width: 1199px) {
                    flex-direction: column;
                }

                img {
                    height: 100vh;
                    max-height: 500px;
                    width: 100%;
                    max-width: 800px;
                    border-radius: 16px;

                    @media (max-width: 1199px) {
                        max-width: 100%;
                        margin-bottom: 30px;
                        object-fit: cover;
                    }
                }

                .text-content {
                    display: flex;
                    flex-direction: column;
                    padding: 70px 40px;
                    /*background: var(--color-gold);*/
                    background: url("../../assets/revamp/images/index-brown-box-bg.png");
                    background-size: cover;
                    background-position: center;
                    border-radius: 8px;
                    height: 100vh;
                    max-height: 288px;
                    width: 100%;
                    max-width: 420px;
                    position: absolute;
                    right: 0;
                    top: 60px;
                    justify-content: space-between;

                    @media (max-width: 1199px) {
                        position: relative;
                        height: 100%;
                        max-height: -webkit-fill-available;
                        max-width: -webkit-fill-available;
                        top: 0;
                        padding: 50px 30px;
                    }

                    @media (max-width: 767px) {
                        padding: 30px;
                    }

                    p {
                        color: #fff;
                        line-height: 24px;
                        font-size: 14px;

                        @media (max-width: 1199px) {
                            text-align: center;
                        }

                        &:first-of-type {
                            @media (max-width: 1199px) {
                                margin-bottom: 20px;
                            }
                        }

                        &:last-of-type {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }

        .mid {
            display: flex;
            justify-content: space-between;
            padding: 50px 0;
            border-top: 1px solid rgba(160, 129, 82, 0.7);
            border-bottom: 1px solid rgba(160, 129, 82, 0.7);
            margin: 100px 0;

            @media (max-width: 1199px) {
                flex-direction: column;
                margin: 70px 0;
            }

            @media (max-width: 767px) {
                margin: 50px 0;
            }

            .header-content {
                width: 100vw;
                max-width: 533px;

                @media (max-width: 1199px) {
                    max-width: 100%;
                }

                h2 {
                    font-size: 60px !important;
                    margin-right: 20px;

                    @media (max-width: 1199px) {
                        text-align: center;
                        margin-right: 0;
                        margin-bottom: 20px;
                        font-size: 45px !important;
                    }

                    @media (max-width: 767px) {
                        font-size: 40px !important;
                    }
                }
            }

            .text-content {
                display: flex;
                flex-direction: column;
                width: 100vw;
                max-width: 600px;

                @media (max-width: 1199px) {
                    margin: 0 auto;
                    max-width: 100%;
                }

                p {
                    line-height: 24px;
                    font-size: 14px;

                    @media (max-width: 1199px) {
                        text-align: center;
                    }

                    &:first-of-type {
                        margin-bottom: 30px;
                    }
                }
            }
        }

        .sub {
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;

            @media (max-width: 1199px) {
                flex-direction: column;
            }

            .header-content {
                width: 100%;
                max-width: 49%;

                @media (max-width: 1199px) {
                    max-width: 100%;
                }

                h2 {
                    font-size: 54px !important;
                    margin-bottom: 20px;

                    @media (max-width: 1199px) {
                        text-align: center;
                        font-size: 45px !important;
                    }

                    @media (max-width: 767px) {
                        font-size: 40px !important;
                    }
                }

                img {
                    border-radius: 16px;
                    height: 100vh;
                    max-height: 500px;
                    object-fit: cover;
                    width: 100%;

                    @media (max-width: 1199px) {
                        margin-bottom: 20px;
                    }
                }
            }

            .body-content {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: 49%;
                position: relative;

                @media (max-width: 1199px) {
                    max-width: 100%;
                }

                img {
                    height: 100vh;
                    max-height: 400px;
                    border-radius: 16px;
                    width: 100%;
                    max-width: 570px;
                    object-fit: cover;

                    @media (max-width: 1199px) {
                        display: none;
                    }
                }

                .text-content {
                    display: flex;
                    flex-direction: column;
                    padding: 70px 40px;
                    background: var(--color-green);
                    border-radius: 8px;
                    height: 100vh;
                    max-height: 240px;
                    width: 100%;
                    max-width: 490px;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    justify-content: space-between;

                    @media (max-width: 1199px) {
                        position: relative;
                        height: 100%;
                        max-height: 100%;
                        max-width: -webkit-fill-available;
                        padding: 50px 30px;
                    }

                    @media (max-width: 767px) {
                        padding: 30px;
                    }

                    p {
                        color: var(--color-beige);
                        line-height: 24px;
                        font-size: 14px;

                        @media (max-width: 1199px) {
                            text-align: center;
                        }

                        &:first-of-type {
                            @media (max-width: 1199px) {
                                margin-bottom: 20px;
                            }
                        }
                    }
                }
            }
        }
    }
}

section.indexCreativeServices {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;

    .card {
        display: flex;
        flex-direction: column;
        padding: 40px;
        background: none;
        border: 1px solid var(--color-gold);
        border-radius: 16px;

        h3 {
            color: var(--color-green);
            font-family: var(--fontMain);
            font-size: 36px;
            margin-bottom: 15px;
        }

        p {
            font-size: 14px;
            line-height: 24px;
            /* letter-spacing: 1px; */
        }
    }

    .creative-services-contents {
        display: flex;
        gap: 24px;
        width: 100%;
        max-width: 62.25vw;
        margin: 0 auto;

        @media (max-width: 1199px) {
            max-width: 100%;
            flex-direction: column;
        }

        .main-contents {
            .main-header {
                width: 100%;
                max-width: 530px;
                margin-bottom: 40px;

                @media (max-width: 1199px) {
                    max-width: 100%;
                    text-align: center;
                }

                h2 {
                    margin-bottom: 20px;
                }

                p {
                    font-size: 14px;
                    line-height: 24px;
                    /* letter-spacing: 1px; */
                }
            }

            .main-stack {
                display: flex;
                flex-direction: column;
                gap: 24px;
            }
        }

        .sub-contents {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
    }

    .bubble-bg {
        display: flex;
        position: absolute;
        opacity: 15%;
        width: 100%;

        &.bubble-top {
            display: flex;
            justify-content: flex-end;

            img {
                width: 100%;
                max-width: 480px;
                height: 100%;
                max-height: 460px;
                transform: scaleY(-1);
                display: flex;
                position: relative;
                top: -425px;
                filter: brightness(1.5);
            }
        }

        &.bubble-bottom {
            display: flex;
            justify-content: flex-start;

            img {
                width: 100%;
                max-width: 690px;
                height: 100%;
                max-height: 690px;
                display: flex;
                position: relative;
                bottom: -600px;
                left: -323px;
                transform: rotate(-90deg);
                filter: brightness(1.5);
            }
        }
    }
}

section.indexChoose {
    display: flex;
    flex-direction: column;
    background: var(--color-light-beige);
    position: relative;
    z-index: 1;

    .card {
        display: flex;
        flex-direction: column;
        padding: 40px;
        background: none;
        border: 1px solid var(--color-gold);
        border-radius: 16px;

        h3 {
            color: var(--color-green);
            font-family: var(--fontMain);
            font-size: 36px;
            margin-bottom: 15px;
        }

        p {
            font-size: 14px;
            line-height: 24px;
            /* letter-spacing: 1px; */
        }
    }

    .choose-contents {
        display: flex;
        flex-direction: column;
        gap: 100px;
        width: 100%;
        max-width: 62.25vw;
        margin: 0 auto;

        @media (max-width: 1199px) {
            max-width: 100%;
            gap: 70px;
        }

        @media (max-width: 767px) {
            gap: 50px;
        }

        .main-header {
            display: flex;
            justify-content: space-between;
            padding-bottom: 50px;
            border-bottom: 1px solid var(--color-gold);

            @media (max-width: 1199px) {
                flex-direction: column;
            }

            h2 {
                width: 100%;
                max-width: 530px;
                margin-right: 20px;

                @media (max-width: 1199px) {
                    max-width: 100%;
                    text-align: center;
                    margin-bottom: 30px;
                }
            }

            .header-content {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 100%;
                max-width: 500px;

                @media (max-width: 1199px) {
                    max-width: 100%;
                    align-items: center;
                }

                p {
                    width: 100%;
                    max-width: 600px;
                    line-height: 24px;
                    margin-bottom: 30px;

                    @media (max-width: 1199px) {
                        max-width: 100%;
                        text-align: center;
                    }
                }

                a {
                    display: flex;
                    justify-content: center;
                    font-size: 24px;
                    text-align: center;

                    &.sig-btn {
                        padding: 10px 25px;
                        border: 1px solid var(--color-gold);
                        border-radius: 1000px;
                        /* width: 100%; */
                        width: -webkit-fill-available;
                        max-width: 300px;
                        transition: 0.3s ease;

                        &:hover {
                            background: none;
                            color: var(--color-gold);
                        }
                    }
                }
            }
        }

        .stack {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto auto;
            gap: 24px;

            @media (max-width: 1199px) {
                display: flex;
                flex-direction: column;
            }
        }
    }
}

/* Index Styling - End */

/* Pseudo Carousel */
.logo-marquee {
    overflow: hidden;
}

.logo-marquee-track {
    display: flex;
    will-change: transform;
}

.logo-marquee-track > * {
    flex-shrink: 0;
}
/* Pseudo Carousel - end*/