/*==============================
GLOBAL
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Outfit',sans-serif;
    background:#ffffff;
    color:#222;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}

.container{
    width:min(92%,1400px);
    margin:auto;
}


 /*====================================================
                TOP HEADER
====================================================*/

.top-header {

    position: sticky;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    background: rgba(255, 255, 255, 0.94);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    border-bottom: 1px solid rgba(222, 93, 0, 0.12);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


/* Header Container */

.top-header .container {

    min-height: 84px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/*====================================================
                    LOGO
====================================================*/

.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    text-decoration: none;

}


.logo img {

    width: auto;

    height: 58px;

    display: block;

    transition: transform .35s ease;

}


.logo:hover img {

    transform: scale(1.03);

}


/*====================================================
                MAIN NAVIGATION
====================================================*/

.main-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    margin-left: auto;

}


.main-nav a {

    position: relative;

    display: inline-flex;

    align-items: center;

    height: 84px;

    color: #222;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: .04em;

    text-transform: uppercase;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color .3s ease,
        transform .3s ease;

}


/* Gold/Orange Underline */

.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 22px;

    width: 0;

    height: 2px;

    background: #c38a53;

    transition: width .35s ease;

}


.main-nav a:hover {

    color: #c38a53;

}


.main-nav a:hover::after {

    width: 100%;

}


/*====================================================
                HEADER ACTIONS
====================================================*/

.header-actions {

    display: flex;

    align-items: center;

    gap: 9px;

    flex-shrink: 0;

}


/*====================================================
                SOCIAL ICONS
====================================================*/

.header-social {

    width: 38px;
    height: 38px;

    display: flex;

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

    border: 1px solid rgba(34, 34, 34, .25);

    border-radius: 50%;

    color: #333;

    background: transparent;

    font-size: 14px;

    text-decoration: none;

    transition:
        all .35s ease;

}


.header-social:hover {

    color: #fff;

    background: #c38a53;

    border-color: #c38a53;

    transform: translateY(-3px);

}


/* WhatsApp */

.header-social.whatsapp:hover {

    background: #25D366;

    border-color: #25D366;

}


/*====================================================
                    CALL BUTTON
====================================================*/

.header-call {

    height: 42px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 0 17px;

    margin-left: 5px;

    color: #fff;

    background: #c38a53;

    border: 1px solid #c38a53;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .02em;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 8px 25px rgba(222, 93, 0, .22);

    transition:
        all .35s ease;

}


.header-call i {

    font-size: 13px;

}


.header-call:hover {

    color: #fff;

    background: #111;

    border-color: #111;

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .18);

}


/*====================================================
                MOBILE MENU BUTTON
====================================================*/

.mobile-menu-toggle {

    width: 42px;
    height: 42px;

    display: none;

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

    flex-direction: column;

    gap: 5px;

    padding: 0;

    border: 1px solid rgba(222, 93, 0, .35);

    border-radius: 50%;

    background: #fff;

    cursor: pointer;

    transition: .3s ease;

}


.mobile-menu-toggle span {

    width: 17px;

    height: 2px;

    display: block;

    background: #222;

    transition: .3s ease;

}


.mobile-menu-toggle:hover {

    background: #c38a53;

    border-color: #c38a53;

}


.mobile-menu-toggle:hover span {

    background: #fff;

}


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

.mobile-nav {

    display: none;

}


/*====================================================
                    SCROLLED HEADER
====================================================*/

.top-header.scrolled {

    background: rgba(255, 255, 255, .98);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .08);

    border-bottom-color:
        rgba(222, 93, 0, .18);

}


.top-header.scrolled .top-header .container {

    min-height: 74px;

}


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

@media (max-width: 1200px) {

    .main-nav {

        gap: 18px;

    }

    .main-nav a {

        font-size: 11px;

    }

    .header-call span {

        display: none;

    }

    .header-call {

        width: 38px;
        height: 38px;

        padding: 0;

        justify-content: center;

        border-radius: 50%;

    }

}


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

@media (max-width: 900px) {

    .top-header .container {

        min-height: 72px;

        gap: 10px;

    }


    /* Logo */

    .logo img {

        height: 48px;

    }


    /* Hide Desktop Navigation */

    .main-nav {

        display: none;

    }


    /* Actions */

    .header-actions {

        gap: 7px;

    }


    .header-social {

        width: 36px;
        height: 36px;

        font-size: 13px;

    }


    .header-call {

        width: 36px;
        height: 36px;

        padding: 0;

        margin-left: 0;

        justify-content: center;

        border-radius: 50%;

    }


    .header-call span {

        display: none;

    }


    /* Menu Button */

    .mobile-menu-toggle {

        display: flex;

    }


    /* Mobile Navigation */

    .mobile-nav {

        display: flex;

        flex-direction: column;

        gap: 0;

        max-height: 0;

        overflow: hidden;

        opacity: 0;

        background: rgba(255, 255, 255, .98);

        border-top: 1px solid transparent;

        transition:
            max-height .45s ease,
            opacity .35s ease,
            border-color .35s ease;

    }


    .mobile-nav.active {

        max-height: 500px;

        opacity: 1;

        border-top-color:
            rgba(222, 93, 0, .12);

    }


    .mobile-nav a {

        position: relative;

        padding: 17px 22px;

        color: #222;

        font-size: 13px;

        font-weight: 600;

        letter-spacing: .05em;

        text-transform: uppercase;

        text-decoration: none;

        border-bottom:
            1px solid rgba(0, 0, 0, .06);

        transition:
            color .3s ease,
            padding-left .3s ease;

    }


    .mobile-nav a:hover {

        color: #c38a53;

        padding-left: 30px;

    }


}


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

@media (max-width: 520px) {

    .top-header .container {

        min-height: 68px;

        padding-left: 15px;

        padding-right: 15px;

    }


    .logo img {

        height: 43px;

        max-width: 165px;

    }


    .header-actions {

        gap: 5px;

    }


    .header-social {

        width: 33px;
        height: 33px;

        font-size: 12px;

    }


    .header-call {

        width: 33px;
        height: 33px;

        font-size: 12px;

    }


    .mobile-menu-toggle {

        width: 36px;
        height: 36px;

    }


    .mobile-menu-toggle span {

        width: 15px;

    }

}


/*====================================================
            VERY SMALL MOBILE
====================================================*/

@media (max-width: 380px) {

    .header-social.facebook {

        display: none;

    }

    .logo img {

        max-width: 145px;

    }

}
 /*====================================================
                    HERO SECTION
====================================================*/

.hero-section {

    position: relative;

    width: 100%;

    height: 500px;

    overflow: hidden;

    background: #111;

}


/*====================================================
                    HERO SLIDER
====================================================*/

.hero-slider {

    position: relative;

    width: 100%;

    height: 100%;

}


.hero-slide {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0;

    visibility: hidden;

    transform: scale(1.06);

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease,
        transform 6s cubic-bezier(.2,.65,.25,1);

}


.hero-slide.active {

    opacity: 1;

    visibility: visible;

    transform: scale(1);

    z-index: 2;

}


/*====================================================
                    DARK OVERLAY
====================================================*/

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.62) 35%,
            rgba(0,0,0,.30) 70%,
            rgba(0,0,0,.12) 100%
        );

}


/* Subtle luxury light */

.hero-light {

    position: absolute;

    top: -100px;

    right: 5%;

    width: 420px;

    height: 420px;

    background:
        radial-gradient(
            circle,
            rgba(222,93,0,.20) 0%,
            rgba(222,93,0,.06) 35%,
            transparent 70%
        );

    z-index: 2;

    pointer-events: none;

}


/*====================================================
                    CONTENT
====================================================*/

.hero-slide .container {

    position: relative;

    z-index: 5;

    height: 100%;

    display: flex;

    align-items: center;

}


.hero-content {

    width: 100%;

    max-width: 700px;

    color: #fff;

    padding-top: 5px;

}


/*====================================================
                    EYEBROW
====================================================*/

.hero-eyebrow {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 16px;

    color: #c38a53;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.hero-eyebrow::before {

    content: "";

    width: 32px;

    height: 1px;

    background: #c38a53;

}


/*====================================================
                    HEADING
====================================================*/

.hero-content h1 {

    margin: 0 0 18px;

    max-width: 720px;

    color: #fff;

    font-size: clamp(38px, 5vw, 64px);

    line-height: 1.04;

    font-weight: 500;

    letter-spacing: -1.5px;

}


.hero-content h1 span {

    display: block;

    color: #c38a53;

    font-weight: 600;

}


/*====================================================
                    PARAGRAPH
====================================================*/

.hero-content p {

    max-width: 610px;

    margin: 0 0 27px;

    color: rgba(255,255,255,.82);

    font-size: 16px;

    line-height: 1.7;

    font-weight: 300;

}


/*====================================================
                    BUTTONS
====================================================*/

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

}


.btn-primary,
.btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 48px;

    padding: 0 25px;

    border-radius: 0;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s ease;

}


.btn-primary {

    color: #fff;

    background: #c38a53;

    border: 1px solid #c38a53;

}


.btn-primary i {

    font-size: 11px;

    transition: transform .3s ease;

}


.btn-primary:hover {

    color: #fff;

    background: #b94b00;

    border-color: #b94b00;

    transform: translateY(-2px);

}


.btn-primary:hover i {

    transform: translateX(4px);

}


.btn-secondary {

    color: #fff;

    background: transparent;

    border: 1px solid rgba(255,255,255,.65);

}


.btn-secondary:hover {

    color: #111;

    background: #fff;

    border-color: #fff;

    transform: translateY(-2px);

}


/*====================================================
                    SLIDER ARROWS
====================================================*/

.slider-arrow {

    position: absolute;

    top: 50%;

    z-index: 20;

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    color: #fff;

    background: rgba(0,0,0,.25);

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 0;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;

}


.slider-arrow:hover {

    color: #fff;

    background: #c38a53;

    border-color: #c38a53;

}


.slider-arrow.prev {

    left: 25px;

}


.slider-arrow.next {

    right: 25px;

}


/*====================================================
                    PROGRESS
====================================================*/

.slider-progress {

    position: absolute;

    right: 70px;

    bottom: 28px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

}


.progress-number {

    color: rgba(255,255,255,.55);

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 1px;

}


.current-number {

    color: #fff;

}


.progress-line {

    position: relative;

    width: 90px;

    height: 1px;

    background: rgba(255,255,255,.3);

    overflow: hidden;

}


.progress-fill {

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 100%;

    background: #c38a53;

}


/*====================================================
                    SCROLL
====================================================*/

.hero-scroll {

    position: absolute;

    right: 25px;

    bottom: 26px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,.7);

    font-size: 9px;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

    writing-mode: vertical-rl;

    transition: color .3s ease;

}


.hero-scroll i {

    color: #c38a53;

    font-size: 10px;

}


.hero-scroll:hover {

    color: #fff;

}


/*====================================================
                SLIDE CONTENT ANIMATION
====================================================*/

.hero-content > * {

    opacity: 0;

    transform: translateY(25px);

}


.hero-slide.active .hero-content > * {

    animation:
        heroContentReveal .9s cubic-bezier(.2,.7,.2,1) forwards;

}


.hero-slide.active .hero-eyebrow {

    animation-delay: .15s;

}


.hero-slide.active h1 {

    animation-delay: .28s;

}


.hero-slide.active p {

    animation-delay: .40s;

}


.hero-slide.active .hero-buttons {

    animation-delay: .52s;

}


@keyframes heroContentReveal {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/*====================================================
                IMAGE TRANSITION
====================================================*/

@keyframes luxuryZoom {

    from {

        transform: scale(1.06);

    }

    to {

        transform: scale(1);

    }

}


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

@media (max-width: 900px) {

    .hero-section {

        height: 500px;

    }


    .hero-slide {

        background-position: center center;

    }


    .hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.82) 0%,
                rgba(0,0,0,.58) 60%,
                rgba(0,0,0,.38) 100%
            );

    }


    .hero-slide .container {

        align-items: center;

    }


    .hero-content {

        max-width: 620px;

        padding-right: 40px;

    }


    .hero-content h1 {

        font-size: clamp(34px, 8vw, 52px);

        letter-spacing: -1px;

    }


    .hero-content p {

        max-width: 530px;

        font-size: 15px;

        line-height: 1.6;

    }


    .slider-arrow {

        width: 40px;

        height: 40px;

    }


    .slider-arrow.prev {

        left: 12px;

    }


    .slider-arrow.next {

        right: 12px;

    }


    .slider-progress {

        right: 20px;

        bottom: 18px;

    }


    .hero-scroll {

        display: none;

    }

}


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

@media (max-width: 600px) {

    .hero-section {

        height: 500px;

    }


    .hero-slide {

        background-position: 62% center;

    }


    .hero-slide .container {

        padding-left: 20px;

        padding-right: 20px;

    }


    .hero-content {

        padding-right: 20px;

    }


    .hero-eyebrow {

        margin-bottom: 13px;

        font-size: 9px;

        letter-spacing: 2px;

    }


    .hero-eyebrow::before {

        width: 22px;

    }


    .hero-content h1 {

        margin-bottom: 15px;

        font-size: 36px;

        line-height: 1.06;

    }


    .hero-content p {

        margin-bottom: 22px;

        font-size: 14px;

        line-height: 1.55;

    }


    .hero-buttons {

        flex-wrap: wrap;

        gap: 8px;

    }


    .btn-primary,
    .btn-secondary {

        min-height: 44px;

        padding: 0 17px;

        font-size: 10px;

        letter-spacing: .8px;

    }


    .slider-arrow {

        top: auto;

        bottom: 20px;

        transform: none;

        width: 36px;

        height: 36px;

    }


    .slider-arrow.prev {

        left: 20px;

    }


    .slider-arrow.next {

        left: 65px;

        right: auto;

    }


    .slider-progress {

        right: 20px;

        bottom: 34px;

    }


    .progress-line {

        width: 55px;

    }

}


/*====================================================
                EXTRA SMALL MOBILE
====================================================*/

@media (max-width: 380px) {

    .hero-content h1 {

        font-size: 31px;

    }


    .hero-content p {

        font-size: 13px;

    }


    .btn-primary,
    .btn-secondary {

        padding: 0 13px;

    }

}
 
 
 /*====================================================*
    OUR PROJECTS
*====================================================*/

.projects-section {

    position: relative;

    padding: 110px 0 90px;

    background: #f8f7f4;

    overflow: hidden;

}


/*====================================================*
    HEADING
*====================================================*/

.projects-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 60px;

    margin-bottom: 55px;

}


.projects-heading-left {

    max-width: 650px;

}


.projects-eyebrow {

    display: block;

    margin-bottom: 18px;

    color: #c38a53;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 4px;

}


.projects-heading h2 {

    margin: 0;

    color: #161616;

    font-size: clamp(38px, 4.5vw, 45px);

    line-height: 1.04;

    font-weight: 600;

    letter-spacing: -2px;

}


.projects-heading h2 span {

    display: block;

    color: #c38a53;

}


.projects-heading-right {

    width: 360px;

    padding-bottom: 5px;

}


.projects-heading-right p {

    margin: 0 0 22px;

    color: #666;

    font-size: 15px;

    line-height: 1.8;

}


.projects-line {

    width: 100%;

    height: 1px;

    background: #d9d5cf;

    position: relative;

}


.projects-line::before {

    content: "";

    position: absolute;

    left: 0;

    top: -2px;

    width: 70px;

    height: 5px;

    background: #c38a53;

}


/*====================================================*
    SLIDER
*====================================================*/

.projects-slider-wrap {

    width: 100%;

    position: relative;

}


.projects-slider {

    display: flex;

    gap: 22px;

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none;

    cursor: grab;

    padding: 10px 0 35px;

    overscroll-behavior-x: contain;

}


.projects-slider::-webkit-scrollbar {

    display: none;

}


.projects-slider.dragging {

    cursor: grabbing;

    scroll-behavior: auto;

    user-select: none;

}


/*====================================================*
    PROJECT CARD
*====================================================*/

.project-card {

    position: relative;

    flex: 0 0 calc(25% - 15px);

    min-width: 330px;

    height: 390px;

    background: #fff;

    border: 1px solid #e5e1db;

    overflow: hidden;

    text-decoration: none;

    color: inherit;

    display: flex;

    flex-direction: column;

    transition:
        transform .6s cubic-bezier(.16,1,.3,1),
        box-shadow .6s ease,
        border-color .4s ease;

}


.project-card:hover {

    transform: translateY(-8px);

    border-color: #c38a53;

    box-shadow:
        0 25px 60px rgba(0,0,0,.12);

}


/*====================================================*
    NUMBER
*====================================================*/

.project-number {

    position: absolute;

    top: 20px;

    left: 22px;

    z-index: 5;

    color: #222;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

}


.project-number span {

    color: #999;

    font-weight: 400;

}


/*====================================================*
    IMAGE AREA
*====================================================*/

.project-image {

    height: 255px;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff;

    overflow: hidden;

    position: relative;

}


/* Luxury orange corner */

.project-image::before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 75px;

    height: 75px;

    background: #c38a53;

    clip-path: polygon(100% 0, 100% 100%, 0 0);

    opacity: .95;

    z-index: 2;

}


.project-image::after {

    content: "VIEW PROJECT";

    position: absolute;

    bottom: 18px;

    left: 22px;

    color: #fff;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    opacity: 0;

    transform: translateY(10px);

    transition: .4s ease;

    z-index: 4;

}


.project-card:hover .project-image::after {

    opacity: 1;

    transform: translateY(0);

}


.project-image img {

    width: 82%;

    height: 270px;

    object-fit: contain;

    transition:
        transform .7s cubic-bezier(.16,1,.3,1),
        filter .5s ease;

    user-select: none;

    -webkit-user-drag: none;

}


.project-card:hover .project-image img {

    transform: scale(1.08);

}


/*====================================================*
    PROJECT INFO
*====================================================*/

.project-info {

    flex: 1;

    border-top: 1px solid #e8e5e0;

    padding: 24px 22px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    background: #fff;

}


.project-category {

    display: block;

    margin-bottom: 8px;

    color: #c38a53;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}


.project-info h3 {

    margin: 0 0 5px;

    color: #171717;

    font-size: 24px;

    font-weight: 600;

    line-height: 1.1;

}


.project-info p {

    margin: 0;

    color: #888;

    font-size: 13px;

}


.project-arrow {

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #ddd8d0;

    color: #222;

    font-size: 19px;

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s ease;

}


.project-card:hover .project-arrow {

    background: #c38a53;

    color: #fff;

    border-color: #c38a53;

    transform: translate(3px, -3px);

}


/*====================================================*
    BOTTOM
*====================================================*/

.projects-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 10px;

}


.projects-progress {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #777;

    font-size: 11px;

    letter-spacing: 2px;

}


.progress-current {

    color: #c38a53;

    font-weight: 700;

}


.progress-line {

    position: relative;

    width: 160px;

    height: 1px;

    background: #d6d1ca;

}


.progress-line span {

    position: absolute;

    left: 0;

    top: -1px;

    width: 25%;

    height: 3px;

    background: #c38a53;

    transition: width .5s ease;

}


/*====================================================*
    CONTROLS
*====================================================*/

.projects-controls {

    display: flex;

    gap: 10px;

}


.project-control {

    width: 50px;

    height: 50px;

    border: 1px solid #d6d1ca;

    background: transparent;

    color: #222;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s ease;

}


.project-control:hover {

    background: #c38a53;

    color: #fff;

    border-color: #c38a53;

    transform: translateY(-3px);

}


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

@media (max-width: 1200px) {

    .project-card {

        flex: 0 0 calc(50% - 11px);

    }

}


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

@media (max-width: 768px) {

    .projects-section {

        padding: 75px 0 65px;

    }


    .projects-heading {

        display: block;

        margin-bottom: 35px;

    }


    .projects-heading-left {

        max-width: 100%;

    }


    .projects-eyebrow {

        font-size: 11px;

        letter-spacing: 3px;

        margin-bottom: 14px;

    }


    .projects-heading h2 {

        font-size: 38px;

        line-height: 1.05;

        letter-spacing: -1px;

    }


    .projects-heading-right {

        width: 100%;

        margin-top: 22px;

    }


    .projects-heading-right p {

        font-size: 14px;

        line-height: 1.7;

    }


    .projects-slider {

        gap: 14px;

        padding-bottom: 25px;

        margin-right: -15px;

        padding-right: 15px;

    }


    .project-card {

        flex: 0 0 86%;

        min-width: 0;

        height: 350px;

    }


    .project-image {

        height: 220px;

    }


    .project-image img {

        width: 78%;

        height: 125px;

    }


    .project-info {

        padding: 20px 18px;

    }


    .project-info h3 {

        font-size: 21px;

    }


    .project-arrow {

        width: 40px;

        height: 40px;

    }


    .projects-bottom {

        margin-top: 5px;

    }


    .progress-line {

        width: 90px;

    }


    .project-control {

        width: 44px;

        height: 44px;

    }

}


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

@media (max-width: 480px) {

    .projects-heading h2 {

        font-size: 33px;

    }


    .project-card {

        flex: 0 0 88%;

    }


    .project-image {

        height: 205px;

    }


    .project-image img {

        width: 80%;

    }

}
 
 
 /*====================================================*
                    OUR LEGACY
*====================================================*/

.legacy-section {

    position: relative;

    padding: 125px 0 90px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf8f4 55%,
            #f3efe9 100%
        );

    overflow: hidden;

}


/*====================================================*
                BACKGROUND WATERMARK
*====================================================*/

.legacy-watermark {

    position: absolute;

    right: -70px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 650px;

    line-height: .8;

    font-family: Georgia, serif;

    font-weight: 700;

    color: #c38a53;

    opacity: .025;

    pointer-events: none;

    user-select: none;

}


/*====================================================*
                BACKGROUND ORBIT
*====================================================*/

.legacy-orbit {

    position: absolute;

    width: 600px;

    height: 600px;

    right: -280px;

    top: 50%;

    transform: translateY(-50%);

    border: 1px solid rgba(222,93,0,.12);

    border-radius: 50%;

    pointer-events: none;

}


.legacy-orbit::before {

    content: "";

    position: absolute;

    inset: 55px;

    border: 1px solid rgba(222,93,0,.08);

    border-radius: 50%;

}


.legacy-orbit::after {

    content: "";

    position: absolute;

    width: 7px;

    height: 7px;

    background: #c38a53;

    top: 100px;

    left: 80px;

    box-shadow:
        0 0 0 7px rgba(222,93,0,.08),
        0 0 25px rgba(222,93,0,.25);

}


/*====================================================*
                    TOP LINE
*====================================================*/

.legacy-topline {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 20px;

    margin-bottom: 70px;

    border-bottom: 1px solid #dedad4;

}


.legacy-eyebrow {

    color: #c38a53;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;

}


.legacy-year {

    color: #999;

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 600;

}


/*====================================================*
                    MAIN GRID
*====================================================*/

.legacy-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 90px;

    align-items: center;

}


/*====================================================*
                    LEFT CONTENT
*====================================================*/

.legacy-content {

    position: relative;

}


.legacy-small-title {

    display: block;

    color: #999;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 20px;

}


.legacy-content h2 {

    margin: 0;

    color: #161616;

    font-size: clamp(55px, 5.5vw, 45px);

    line-height: .95;

    font-weight: 600;

    letter-spacing: -3px;

}


.legacy-content h2 span {

    display: block;

    color: #c38a53;

    margin-top: 8px;

}


/*====================================================*
                    DIVIDER
*====================================================*/

.legacy-divider {

    position: relative;

    width: 120px;

    height: 1px;

    background: #ccc5bc;

    margin: 35px 0;

}


.legacy-divider::before {

    content: "";

    position: absolute;

    left: 0;

    top: -2px;

    width: 35px;

    height: 5px;

    background: #c38a53;

}


/*====================================================*
                    TEXT
*====================================================*/

.legacy-intro {

    max-width: 620px;

    color: #3f3f3f;

    font-size: 18px;

    line-height: 1.8;

    margin: 0 0 18px;

}


.legacy-intro strong {

    color: #171717;

    font-weight: 700;

}


.legacy-description {

    max-width: 590px;

    color: #777;

    font-size: 15px;

    line-height: 1.9;

    margin: 0 0 38px;

}


.legacy-description strong {

    color: #c38a53;

}


/*====================================================*
                    BUTTONS
*====================================================*/

.legacy-buttons {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

}


.legacy-primary-btn {

    min-height: 54px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    gap: 25px;

    background: #c38a53;

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .5px;

    transition: .4s ease;

}


.legacy-primary-btn i {

    transition: .4s ease;

}


.legacy-primary-btn:hover {

    background: #171717;

}


.legacy-primary-btn:hover i {

    transform: translateX(5px);

}


.legacy-outline-btn {

    min-height: 54px;

    padding: 0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #ccc6bd;

    color: #222;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: .4s ease;

}


.legacy-outline-btn:hover {

    border-color: #c38a53;

    color: #c38a53;

}


/*====================================================*
                    STATS GRID
*====================================================*/

.legacy-stats {

    display: grid;

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

    border-top: 1px solid #d8d2ca;

    border-left: 1px solid #d8d2ca;

}


/*====================================================*
                    STAT
*====================================================*/

.legacy-stat {

    min-height: 245px;

    padding: 28px;

    position: relative;

    background: rgba(255,255,255,.48);

    border-right: 1px solid #d8d2ca;

    border-bottom: 1px solid #d8d2ca;

    transition:
        background .4s ease,
        transform .4s ease;

}


.legacy-stat:hover {

    background: #fff;

    z-index: 3;

    transform: translateY(-5px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.08);

}


/*====================================================*
                    STAT TOP
*====================================================*/

.stat-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 38px;

}


.stat-number {

    color: #aaa;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}


.stat-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #c38a53;

    border: 1px solid rgba(222,93,0,.35);

    font-size: 14px;

}


/*====================================================*
                    STAT VALUE
*====================================================*/

.stat-value {

    display: flex;

    align-items: baseline;

    color: #171717;

    font-size: 54px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: -2px;

}


.stat-value sup {

    color: #c38a53;

    font-size: 22px;

    margin-left: 4px;

    font-weight: 700;

}


.stat-text {

    font-size: 39px;

    letter-spacing: -1px;

}


/*====================================================*
                    STAT TITLE
*====================================================*/

.legacy-stat h3 {

    margin: 15px 0 25px;

    color: #555;

    font-size: 13px;

    font-weight: 500;

}


/*====================================================*
                    STAT LINE
*====================================================*/

.stat-line {

    width: 35px;

    height: 2px;

    background: #c38a53;

    transition: width .4s ease;

}


.legacy-stat:hover .stat-line {

    width: 75px;

}


/*====================================================*
                BOTTOM STATEMENT
*====================================================*/

.legacy-bottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 70px;

    color: #999;

}


.legacy-bottom span {

    color: #c38a53;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

}


.legacy-bottom div {

    width: 70px;

    height: 1px;

    background: #ccc6bd;

}


.legacy-bottom p {

    margin: 0;

    font-size: 12px;

    letter-spacing: 1px;

}


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

@media (max-width: 1100px) {

    .legacy-grid {

        grid-template-columns: 1fr;

        gap: 65px;

    }


    .legacy-content {

        max-width: 750px;

    }


    .legacy-watermark {

        right: -180px;

        opacity: .02;

    }

}


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

@media (max-width: 768px) {

    .legacy-section {

        padding: 80px 0 65px;

    }


    .legacy-topline {

        margin-bottom: 45px;

    }


    .legacy-eyebrow {

        font-size: 10px;

        letter-spacing: 2.5px;

    }


    .legacy-year {

        font-size: 9px;

        letter-spacing: 1.5px;

    }


    .legacy-grid {

        gap: 45px;

    }


    .legacy-content {

        text-align: left;

    }


    .legacy-small-title {

        font-size: 9px;

        letter-spacing: 3px;

    }


    .legacy-content h2 {

        font-size: 50px;

        line-height: .95;

        letter-spacing: -2px;

    }


    .legacy-divider {

        margin: 27px 0;

    }


    .legacy-intro {

        font-size: 16px;

        line-height: 1.75;

    }


    .legacy-description {

        font-size: 14px;

        line-height: 1.8;

    }


    .legacy-buttons {

        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 10px;

    }


    .legacy-primary-btn,
    .legacy-outline-btn {

        width: 100%;

        min-height: 52px;

        padding: 0 12px;

        font-size: 11px;

    }


    .legacy-primary-btn {

        justify-content: space-between;

        gap: 8px;

    }


    /* TWO COLUMN MOBILE */

    .legacy-stats {

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

    }


    .legacy-stat {

        min-height: 205px;

        padding: 20px 16px;

    }


    .stat-top {

        margin-bottom: 30px;

    }


    .stat-number {

        font-size: 8px;

    }


    .stat-icon {

        width: 32px;

        height: 32px;

        font-size: 12px;

    }


    .stat-value {

        font-size: 38px;

    }


    .stat-value sup {

        font-size: 17px;

    }


    .stat-text {

        font-size: 28px;

    }


    .legacy-stat h3 {

        font-size: 11px;

        line-height: 1.4;

        margin-top: 12px;

    }


    .legacy-bottom {

        margin-top: 45px;

        gap: 12px;

        flex-wrap: wrap;

    }


    .legacy-bottom p {

        width: 100%;

        font-size: 11px;

    }


    .legacy-watermark {

        font-size: 350px;

        right: -160px;

        top: 55%;

    }


    .legacy-orbit {

        width: 350px;

        height: 350px;

        right: -190px;

    }

}


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

@media (max-width: 480px) {

    .legacy-topline {

        align-items: flex-start;

    }


    .legacy-year {

        text-align: right;

        max-width: 80px;

        line-height: 1.5;

    }


    .legacy-content h2 {

        font-size: 45px;

    }


    .legacy-buttons {

        grid-template-columns: 1fr;

    }


    .legacy-primary-btn,
    .legacy-outline-btn {

        width: 100%;

    }


    .legacy-stat {

        min-height: 190px;

        padding: 17px 13px;

    }


    .stat-value {

        font-size: 33px;

    }


    .stat-text {

        font-size: 24px;

    }

}


/*====================================================
                WHY CHOOSE MERLIONN
====================================================*/

.trust-section {

    position: relative;

    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            #faf8f4 0%,
            #ffffff 45%,
            #faf8f4 100%
        );

    overflow: hidden;
}


/*====================================================
                BACKGROUND ELEMENTS
====================================================*/

.trust-section::before {

    content: "MERLIONN";

    position: absolute;

    left: -80px;
    top: 45%;

    font-size: clamp(100px, 15vw, 240px);

    font-weight: 800;

    letter-spacing: 15px;

    color: rgba(222, 93, 0, 0.025);

    transform: rotate(-90deg);

    pointer-events: none;

    white-space: nowrap;
}


.trust-section::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    top: 100px;

    background:
        radial-gradient(
            circle,
            rgba(222, 93, 0, 0.09),
            transparent 70%
        );

    pointer-events: none;
}


/*====================================================
                HEADING
====================================================*/

.trust-heading {

    position: relative;

    z-index: 2;

    margin-bottom: 75px;

    text-align: center;
}


.trust-heading .section-subtitle {

    color: #c38a53;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.trust-heading h2 {

    margin: 18px 0;

    color: #111;

    font-size: clamp(38px, 5vw, 45px);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -1px;
}


.trust-heading h2 span {

    display: block;

    color: #c38a53;
}


.trust-heading p {

    max-width: 700px;

    margin: auto;

    color: #6a6a6a;

    font-size: 16px;

    line-height: 1.8;
}


/*====================================================
                TRUST FLOW
====================================================*/

.trust-flow {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 0;

    max-width: 1100px;

    margin: auto;
}


/*====================================================
                CENTER LINE
====================================================*/

.trust-flow::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(222, 93, 0, 0.35),
            transparent
        );

    transform: translateX(-50%);
}


/*====================================================
                TRUST ROW
====================================================*/

.trust-row {

    position: relative;

    display: grid;

    grid-template-columns: 70px 75px 1fr 60px;

    align-items: center;

    gap: 25px;

    width: 72%;

    min-height: 145px;

    padding: 25px 30px;

    background: rgba(255,255,255,0.72);

    border-top: 1px solid rgba(0,0,0,0.08);

    border-bottom: 1px solid rgba(0,0,0,0.08);

    backdrop-filter: blur(15px);

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        background .4s ease,
        box-shadow .4s ease;
}


/* LEFT ITEMS */

.trust-left {

    align-self: flex-start;

    margin-right: auto;
}


/* RIGHT ITEMS */

.trust-right {

    align-self: flex-end;

    margin-left: auto;
}


/*====================================================
                HOVER
====================================================*/

.trust-row:hover {

    background: #fff;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.08);

    transform: translateX(12px);
}


.trust-right:hover {

    transform: translateX(-12px);
}


/*====================================================
                NUMBER
====================================================*/

.trust-number {

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #aaa;

    transition: .4s;
}


.trust-row:hover .trust-number {

    color: #c38a53;
}


/*====================================================
                ICON
====================================================*/

.trust-icon {

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #c38a53;

    color: #fff;

    font-size: 22px;

    position: relative;

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}


.trust-icon::after {

    content: "";

    position: absolute;

    inset: 5px;

    border: 1px solid rgba(255,255,255,.35);
}


.trust-row:hover .trust-icon {

    transform: rotate(8deg) scale(1.08);

    box-shadow:
        0 10px 30px rgba(222,93,0,.30);
}


/*====================================================
                CONTENT
====================================================*/

.trust-content {

    padding-right: 20px;
}


.trust-label {

    display: block;

    margin-bottom: 6px;

    color: #c38a53;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;
}


.trust-content h3 {

    margin: 0 0 8px;

    color: #111;

    font-size: 25px;

    font-weight: 600;

    transition: .35s;
}


.trust-row:hover .trust-content h3 {

    letter-spacing: .3px;
}


.trust-content p {

    max-width: 570px;

    margin: 0;

    color: #707070;

    font-size: 14px;

    line-height: 1.7;
}


/*====================================================
                ARROW
====================================================*/

.trust-arrow {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #c38a53;

    border-left: 1px solid rgba(0,0,0,.10);

    font-size: 18px;

    transition:
        transform .5s ease,
        color .3s ease;
}


.trust-left:hover .trust-arrow {

    transform: translateX(8px);

}


.trust-right:hover .trust-arrow {

    transform: translateX(-8px);

}


/*====================================================
                MOVING ARROW ANIMATION
====================================================*/

.trust-arrow i {

    animation:
        arrowPulse 2s ease-in-out infinite;
}


@keyframes arrowPulse {

    0%,
    100% {

        opacity: .5;

        transform: translateX(0);

    }

    50% {

        opacity: 1;

        transform: translateX(5px);

    }

}


.trust-right .trust-arrow i {

    animation-name: arrowPulseReverse;
}


@keyframes arrowPulseReverse {

    0%,
    100% {

        opacity: .5;

        transform: translateX(0);

    }

    50% {

        opacity: 1;

        transform: translateX(-5px);

    }

}


/*====================================================
                ORANGE CONNECTOR
====================================================*/

.trust-row::before {

    content: "";

    position: absolute;

    top: 50%;

    width: 50px;

    height: 1px;

    background: #c38a53;

    opacity: .35;
}


.trust-left::before {

    right: -50px;
}


.trust-right::before {

    left: -50px;
}


/* Small connector dot */

.trust-row::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 7px;

    height: 7px;

    background: #c38a53;

    transform: translateY(-50%);

    box-shadow:
        0 0 0 5px rgba(222,93,0,.08),
        0 0 20px rgba(222,93,0,.25);
}


.trust-left::after {

    right: -53px;
}


.trust-right::after {

    left: -53px;
}


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

@media (max-width: 992px) {

    .trust-section {

        padding: 90px 0;

    }

    .trust-flow {

        max-width: 850px;

    }

    .trust-row {

        width: 78%;

        grid-template-columns:
            45px 60px 1fr 45px;

        gap: 18px;

    }

}


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

@media (max-width: 768px) {

    .trust-section {

        padding: 75px 0;

    }


    .trust-heading {

        margin-bottom: 45px;

        padding: 0 10px;

    }


    .trust-heading h2 {

        font-size: 34px;

    }


    .trust-heading p {

        font-size: 14px;

        line-height: 1.7;

    }


    /* Remove center line */

    .trust-flow::before {

        display: none;

    }


    .trust-flow {

        gap: 12px;

    }


    .trust-row,
    .trust-right,
    .trust-left {

        width: 100%;

        margin: 0;

        align-self: stretch;

        grid-template-columns:
            28px 48px 1fr 35px;

        gap: 12px;

        min-height: 125px;

        padding: 20px 12px;

    }


    .trust-row:hover,
    .trust-right:hover {

        transform: translateY(-3px);

    }


    /* Hide external connectors */

    .trust-row::before,
    .trust-row::after {

        display: none;

    }


    .trust-number {

        font-size: 10px;

        letter-spacing: 1px;

    }


    .trust-icon {

        width: 48px;

        height: 48px;

        font-size: 17px;

    }


    .trust-icon::after {

        inset: 4px;

    }


    .trust-content {

        padding-right: 0;

    }


    .trust-label {

        font-size: 8px;

        letter-spacing: 1.5px;

        margin-bottom: 4px;

    }


    .trust-content h3 {

        font-size: 17px;

        margin-bottom: 5px;

    }


    .trust-content p {

        font-size: 11px;

        line-height: 1.5;

    }


    .trust-arrow {

        width: 35px;

        height: 35px;

        font-size: 13px;

    }


    .trust-section::before {

        font-size: 90px;

        left: -60px;

    }

}


/*====================================================
                VERY SMALL DEVICES
====================================================*/

@media (max-width: 380px) {

    .trust-row {

        grid-template-columns:
            22px 42px 1fr 28px;

        gap: 8px;

        padding: 16px 9px;

    }


    .trust-icon {

        width: 42px;

        height: 42px;

        font-size: 15px;

    }


    .trust-content h3 {

        font-size: 15px;

    }


    .trust-content p {

        font-size: 10px;

    }

}


/*====================================================*
    TRUST THE DEVELOPER
*====================================================*/

.developer-trust-section {

    position: relative;

    padding: 120px 0;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf8f4 55%,
            #f4eee7 100%
        );

    overflow: hidden;

}


/*====================================================*
    BACKGROUND WORD
*====================================================*/

.developer-bg-text {

    position: absolute;

    right: -40px;
    bottom: -90px;

    font-size: clamp(140px, 18vw, 300px);

    font-weight: 800;

    letter-spacing: -10px;

    line-height: 1;

    color: rgba(222, 93, 0, .035);

    pointer-events: none;

    user-select: none;

}


/*====================================================*
    GRID
*====================================================*/

.developer-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

}


/*====================================================*
    CONTENT
*====================================================*/

.developer-content {

    position: relative;

    z-index: 3;

}


.developer-eyebrow {

    display: inline-block;

    margin-bottom: 20px;

    color: #c38a53;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 3px;

}


.developer-content h2 {

    margin: 0 0 25px;

    max-width: 600px;

    font-size: clamp(38px, 4.5vw, 45px);

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -2px;

    color: #151515;

}


.developer-content h2 span {

    display: block;

    color: #c38a53;

}


.developer-intro {

    max-width: 620px;

    margin-bottom: 18px;

    font-size: 20px;

    line-height: 1.65;

    color: #333;

}


.developer-text {

    max-width: 620px;

    margin-bottom: 40px;

    font-size: 16px;

    line-height: 1.9;

    color: #707070;

}


.developer-text strong {

    color: #222;

    font-weight: 600;

}


/*====================================================*
    HIGHLIGHTS
*====================================================*/

.developer-highlights {

    display: flex;

    max-width: 600px;

    margin-bottom: 38px;

    border-top: 1px solid rgba(0,0,0,.12);

    border-bottom: 1px solid rgba(0,0,0,.12);

}


.developer-highlight {

    flex: 1;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 25px 20px;

    border-right: 1px solid rgba(0,0,0,.12);

}


.developer-highlight:first-child {

    padding-left: 0;

}


.developer-highlight:last-child {

    border-right: 0;

}


.highlight-number {

    font-size: 42px;

    line-height: 1;

    font-weight: 700;

    color: #c38a53;

}


.highlight-label {

    font-size: 13px;

    line-height: 1.5;

    color: #555;

}


/*====================================================*
    LOCATION LINE
*====================================================*/

.developer-location-line {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #444;

}


.developer-location-line i {

    color: #c38a53;

    font-size: 11px;

}


.location-dot {

    width: 7px;

    height: 7px;

    background: #c38a53;

    display: inline-block;

    box-shadow: 0 0 0 5px rgba(222,93,0,.12);

}


/*====================================================*
    MAP AREA
*====================================================*/

.developer-map-area {

    position: relative;

    min-height: 650px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.map-heading {

    position: absolute;

    top: 0;

    left: 0;

    z-index: 5;

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.map-heading span {

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 700;

    color: #c38a53;

}


.map-heading strong {

    font-size: 28px;

    font-weight: 600;

    color: #161616;

}


/*====================================================*
    MAP WRAPPER
*====================================================*/

.map-wrapper {

    position: relative;

    width: 100%;

    height: 620px;

    margin-top: 30px;

    overflow: hidden;

}


/*====================================================*
    GRID BACKGROUND
*====================================================*/

.map-grid-lines {

    position: absolute;

    inset: 0;

    opacity: .35;

    background-image:

        linear-gradient(
            rgba(222,93,0,.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(222,93,0,.08) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 20%,
            #000 80%,
            transparent
        );

}


/*====================================================*
    SVG MAP
*====================================================*/

.region-map {

    position: absolute;

    width: 90%;

    height: 90%;

    left: 5%;

    top: 7%;

    overflow: visible;

}


/*====================================================*
    REGIONS
*====================================================*/

.map-region {

    fill: rgba(222,93,0,.055);

    stroke: #c38a53;

    stroke-width: 2;

    stroke-linejoin: round;

    transition: .5s ease;

}


.map-region:hover {

    fill: rgba(222,93,0,.15);

}


.punjab {

    fill: rgba(222,93,0,.08);

}


.chandigarh {

    fill: #c38a53;

    stroke: #c38a53;

}


/*====================================================*
    MAP INTERNAL LINES
*====================================================*/

.map-line {

    fill: none;

    stroke: rgba(222,93,0,.28);

    stroke-width: 1.5;

    stroke-dasharray: 4 7;

}


/*====================================================*
    ROUTE
*====================================================*/

.map-route {

    fill: none;

    stroke: #c38a53;

    stroke-width: 3;

    stroke-dasharray: 8 8;

    animation: routeFlow 5s linear infinite;

}


@keyframes routeFlow {

    to {

        stroke-dashoffset: -80;

    }

}


/*====================================================*
    MAP MARKERS
*====================================================*/

.map-marker circle:first-child {

    fill: #c38a53;

    stroke: #fff;

    stroke-width: 3;

}


.marker-pulse {

    fill: none !important;

    stroke: #c38a53;

    stroke-width: 1.5;

    opacity: .5;

    animation: markerPulse 2.5s ease-out infinite;

}


@keyframes markerPulse {

    0% {

        transform: scale(.6);

        opacity: .7;

    }

    70% {

        transform: scale(1.5);

        opacity: 0;

    }

    100% {

        transform: scale(1.5);

        opacity: 0;

    }

}


/*====================================================*
    MAP LABELS
*====================================================*/

.map-label {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    z-index: 5;

    background: rgba(255,255,255,.88);

    backdrop-filter: blur(12px);

    padding: 10px 14px;

    border-left: 2px solid #c38a53;

    box-shadow: 0 12px 30px rgba(0,0,0,.08);

    animation: labelFloat 4s ease-in-out infinite;

}


.map-label span {

    width: 7px;

    height: 7px;

    background: #c38a53;

    flex-shrink: 0;

}


.map-label div {

    display: flex;

    flex-direction: column;

}


.map-label strong {

    font-size: 13px;

    color: #222;

}


.map-label small {

    margin-top: 2px;

    font-size: 10px;

    color: #888;

    letter-spacing: .5px;

}


.label-punjab {

    left: 8%;

    top: 48%;

}


.label-chandigarh {

    left: 28%;

    top: 59%;

    animation-delay: .7s;

}


.label-himachal {

    right: 3%;

    top: 31%;

    animation-delay: 1.3s;

}


@keyframes labelFloat {

    0%,100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-7px);

    }

}


/*====================================================*
    CORNER DETAILS
*====================================================*/

.map-corner {

    position: absolute;

    width: 45px;

    height: 45px;

    border-color: rgba(222,93,0,.5);

}


.map-corner.top-left {

    left: 0;

    top: 50px;

    border-left: 1px solid;

    border-top: 1px solid;

}


.map-corner.bottom-right {

    right: 0;

    bottom: 40px;

    border-right: 1px solid;

    border-bottom: 1px solid;

}


/*====================================================*
    MAP FOOTER
*====================================================*/

.map-footer {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    display: flex;

    justify-content: space-between;

    padding-top: 18px;

    border-top: 1px solid rgba(0,0,0,.12);

    font-size: 11px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #777;

}


.map-footer i {

    color: #c38a53;

    margin-right: 5px;

}


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

@media (max-width: 1100px) {

    .developer-grid {

        gap: 50px;

    }

    .developer-content h2 {

        font-size: 48px;

    }

    .developer-map-area {

        min-height: 560px;

    }

    .map-wrapper {

        height: 540px;

    }

}


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

@media (max-width: 768px) {

    .developer-trust-section {

        padding: 80px 0;

    }


    .developer-bg-text {

        font-size: 100px;

        right: -20px;

        bottom: -20px;

    }


    .developer-grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }


    .developer-content {

        text-align: center;

    }


    .developer-eyebrow {

        font-size: 11px;

        letter-spacing: 2px;

    }


    .developer-content h2 {

        font-size: 38px;

        line-height: 1.1;

        letter-spacing: -1px;

    }


    .developer-intro {

        font-size: 16px;

        line-height: 1.7;

    }


    .developer-text {

        font-size: 14px;

        line-height: 1.8;

    }


    /* Highlights */

    .developer-highlights {

        width: 100%;

        margin-bottom: 30px;

    }


    .developer-highlight {

        padding: 20px 8px;

        flex-direction: column;

        gap: 8px;

        text-align: center;

    }


    .developer-highlight:first-child {

        padding-left: 8px;

    }


    .highlight-number {

        font-size: 30px;

    }


    .highlight-label {

        font-size: 10px;

        line-height: 1.4;

    }


    /* Location */

    .developer-location-line {

        justify-content: center;

        gap: 9px;

        font-size: 9px;

    }


    /* Map */

    .developer-map-area {

        min-height: 480px;

    }


    .map-heading {

        position: relative;

        margin-bottom: 15px;

        text-align: center;

        align-items: center;

    }


    .map-heading strong {

        font-size: 24px;

    }


    .map-wrapper {

        height: 430px;

        margin-top: 0;

    }


    .region-map {

        width: 110%;

        height: 95%;

        left: -5%;

        top: 3%;

    }


    .map-label {

        padding: 7px 9px;

        gap: 7px;

    }


    .map-label strong {

        font-size: 10px;

    }


    .map-label small {

        font-size: 8px;

    }


    .label-punjab {

        left: 3%;

        top: 43%;

    }


    .label-chandigarh {

        left: 24%;

        top: 58%;

    }


    .label-himachal {

        right: 0;

        top: 28%;

    }


    .map-footer {

        font-size: 8px;

        letter-spacing: 1px;

    }


    .map-corner {

        width: 30px;

        height: 30px;

    }

}


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

@media (max-width: 480px) {

    .developer-trust-section {

        padding: 65px 0;

    }


    .developer-content h2 {

        font-size: 32px;

    }


    .developer-highlights {

        margin-top: 25px;

    }


    .developer-highlight {

        padding: 17px 5px;

    }


    .highlight-number {

        font-size: 26px;

    }


    .highlight-label {

        font-size: 9px;

    }


    .developer-map-area {

        min-height: 420px;

    }


    .map-wrapper {

        height: 380px;

    }


    .region-map {

        width: 120%;

        left: -10%;

    }

} 

/*====================================================
    MERLIONN CONNECTIVITY JOURNEY
====================================================*/

.connectivity-section{

    position:relative;

    padding:120px 0 110px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf8f4 50%,
            #ffffff 100%
        );

    overflow:hidden;
}


/*====================================================
    BACKGROUND GLOW
====================================================*/

.connectivity-glow{

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    pointer-events:none;

    filter:blur(80px);

    opacity:.35;
}

.glow-one{

    top:-220px;
    left:-180px;

    background:rgba(222,93,0,.12);
}

.glow-two{

    bottom:-250px;
    right:-180px;

    background:rgba(222,93,0,.10);
}


/*====================================================
    HEADING
====================================================*/

.connectivity-heading{

    position:relative;

    z-index:5;

    max-width:760px;

    margin-bottom:65px;
}

.connectivity-heading .section-subtitle{

    display:block;

    color:#c38a53;

    font-size:13px;

    letter-spacing:4px;

    font-weight:700;

    margin-bottom:18px;
}

.connectivity-heading h2{

    margin:0 0 18px;

    font-size:45px;

    line-height:1.05;

    font-weight:700;

    letter-spacing:-2px;

    color:#151515;
}

.connectivity-heading h2 span{

    color:#c38a53;
}

.connectivity-heading p{

    max-width:700px;

    margin:0;

    font-size:17px;

    line-height:1.8;

    color:#707070;
}


/*====================================================
    JOURNEY AREA
====================================================*/

.connectivity-journey{

    position:relative;

    height:650px;

    width:100%;

    overflow:visible;
}


/*====================================================
    SVG WAVE
====================================================*/

.connectivity-wave{

    position:absolute;

    left:0;

    top:70px;

    width:100%;

    height:420px;

    overflow:visible;

    z-index:1;

    pointer-events:none;
}


/* Soft Shadow Route */

.wave-shadow{

    fill:none;

    stroke:rgba(222,93,0,.07);

    stroke-width:16;

    stroke-linecap:round;

}


/* Main Route */

.wave-line{

    fill:none;

    stroke:rgba(222,93,0,.20);

    stroke-width:2;

    stroke-linecap:round;

    stroke-dasharray:5 12;
}


/* Moving Luxury Light */

.wave-progress{

    fill:none;

    stroke:#c38a53;

    stroke-width:3;

    stroke-linecap:round;

    stroke-dasharray:80 1800;

    animation:waveJourney 5s linear infinite;

    filter:drop-shadow(0 0 7px rgba(222,93,0,.45));
}

@keyframes waveJourney{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-1880;

    }

}


/*====================================================
    JOURNEY POINT
====================================================*/

.journey-point{

    position:absolute;

    width:190px;

    z-index:5;

    transform:translate(-50%,-50%);

    transition:.5s ease;
}


/*====================================================
    POINT POSITIONS
====================================================*/

.point-1{
    left:7%;
    top:215px;
}

.point-2{
    left:17%;
    top:130px;
}

.point-3{
    left:27%;
    top:205px;
}

.point-4{
    left:37%;
    top:300px;
}

.point-5{
    left:47%;
    top:205px;
}

.point-6{
    left:57%;
    top:115px;
}

.point-7{
    left:67%;
    top:205px;
}

.point-8{
    left:77%;
    top:300px;
}

.point-9{
    left:87%;
    top:205px;
}

.point-10{
    left:96%;
    top:135px;
}


/*====================================================
    MARKER
====================================================*/

.journey-marker{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    background:#fff;

    border:1px solid rgba(222,93,0,.35);

    color:#c38a53;

    font-size:21px;

    position:relative;

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);

    transition:.45s ease;
}


/* Outer Pulse */

.journey-marker::before{

    content:"";

    position:absolute;

    inset:-9px;

    border:1px solid rgba(222,93,0,.18);

    animation:markerPulse 2.5s ease-out infinite;
}

@keyframes markerPulse{

    0%{

        transform:scale(.8);

        opacity:.8;

    }

    100%{

        transform:scale(1.5);

        opacity:0;

    }

}


/* Inner Accent */

.journey-marker::after{

    content:"";

    position:absolute;

    width:7px;

    height:7px;

    background:#c38a53;

    top:-4px;

    right:-4px;

    box-shadow:0 0 0 4px #fff;
}


/* Hover */

.journey-point:hover .journey-marker{

    background:#c38a53;

    color:#fff;

    transform:translateY(-8px) rotate(4deg);

    box-shadow:
        0 20px 45px rgba(222,93,0,.25);
}


/*====================================================
    CONTENT
====================================================*/

.journey-content{

    margin-top:20px;

    text-align:center;
}

.journey-content span{

    display:block;

    margin-bottom:7px;

    color:#c38a53;

    font-size:9px;

    letter-spacing:2px;

    font-weight:700;
}

.journey-content h3{

    margin:0 0 8px;

    color:#181818;

    font-size:17px;

    line-height:1.3;

    font-weight:600;
}

.journey-content strong{

    display:inline-block;

    padding-bottom:5px;

    border-bottom:1px solid rgba(222,93,0,.35);

    color:#777;

    font-size:12px;

    font-weight:500;
}


/*====================================================
    TRANSPORT MARKERS
====================================================*/

.transport-marker{

    background:#c38a53;

    color:#fff;

}

.transport-marker::after{

    background:#111;

}


/*====================================================
    BOTTOM MESSAGE
====================================================*/

.connectivity-footer{

    display:flex;

    align-items:center;

    gap:25px;

    position:relative;

    z-index:5;

    margin-top:-20px;
}

.footer-line{

    height:1px;

    flex:1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(222,93,0,.35),
            transparent
        );
}

.footer-message{

    display:flex;

    align-items:center;

    gap:12px;

    white-space:nowrap;

    color:#777;

    font-size:14px;

    letter-spacing:.2px;
}

.footer-message i{

    color:#c38a53;

    font-size:16px;

}

.footer-message strong{

    color:#222;

    font-weight:600;
}


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

@media(max-width:1100px){

    .connectivity-heading h2{

        font-size:48px;
    }

    .connectivity-journey{

        height:700px;

        overflow-x:auto;

        overflow-y:hidden;

        padding-bottom:20px;

        scrollbar-width:none;
    }

    .connectivity-journey::-webkit-scrollbar{

        display:none;
    }

    .connectivity-wave{

        width:1400px;

        left:0;
    }

    .journey-point{

        width:170px;
    }

}


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

@media(max-width:768px){

    .connectivity-section{

        padding:80px 0 70px;
    }


    .connectivity-heading{

        margin-bottom:35px;

        padding:0 5px;
    }

    .connectivity-heading .section-subtitle{

        font-size:11px;

        letter-spacing:3px;
    }

    .connectivity-heading h2{

        font-size:36px;

        letter-spacing:-1px;

        line-height:1.1;
    }

    .connectivity-heading p{

        font-size:14px;

        line-height:1.7;
    }


    /* Horizontal Journey */

    .connectivity-journey{

        height:560px;

        width:calc(100% + 20px);

        margin-left:-10px;

        overflow-x:auto;

        overflow-y:hidden;

        scroll-behavior:smooth;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;
    }

    .connectivity-journey::-webkit-scrollbar{

        display:none;
    }


    /* Wide Wave */

    .connectivity-wave{

        width:1500px;

        height:400px;

        top:65px;
    }


    /* Points */

    .journey-point{

        width:145px;
    }


    .point-1{
        left:7%;
        top:215px;
    }

    .point-2{
        left:17%;
        top:135px;
    }

    .point-3{
        left:27%;
        top:205px;
    }

    .point-4{
        left:37%;
        top:285px;
    }

    .point-5{
        left:47%;
        top:205px;
    }

    .point-6{
        left:57%;
        top:125px;
    }

    .point-7{
        left:67%;
        top:205px;
    }

    .point-8{
        left:77%;
        top:285px;
    }

    .point-9{
        left:87%;
        top:205px;
    }

    .point-10{
        left:97%;
        top:130px;
    }


    .journey-marker{

        width:52px;

        height:52px;

        font-size:17px;
    }


    .journey-content{

        margin-top:16px;
    }

    .journey-content span{

        font-size:8px;

        letter-spacing:1.5px;
    }

    .journey-content h3{

        font-size:14px;

        line-height:1.3;
    }

    .journey-content strong{

        font-size:10px;
    }


    /* Footer */

    .connectivity-footer{

        margin-top:10px;

        padding:0 10px;
    }

    .footer-line{

        display:none;
    }

    .footer-message{

        width:100%;

        justify-content:center;

        text-align:center;

        white-space:normal;

        font-size:12px;

        line-height:1.6;
    }

}


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

@media(max-width:420px){

    .connectivity-heading h2{

        font-size:32px;
    }

    .connectivity-journey{

        height:530px;
    }

    .journey-point{

        width:130px;
    }

    .journey-content h3{

        font-size:13px;
    }

} 

/*====================================================
                TESTIMONIAL SECTION
====================================================*/

.testimonial-section{

    position:relative;

    padding:120px 0;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf8f4 55%,
            #ffffff 100%
        );

    overflow:hidden;

}


/*====================================================
                BACKGROUND DETAILS
====================================================*/

.testimonial-section::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-280px;
    top:-250px;

    background:
        radial-gradient(
            circle,
            rgba(222,93,0,.10),
            transparent 68%
        );

    pointer-events:none;

}


.testimonial-section::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    left:-250px;
    bottom:-220px;

    background:
        radial-gradient(
            circle,
            rgba(222,93,0,.07),
            transparent 70%
        );

    pointer-events:none;

}


/*====================================================
                ORBITS
====================================================*/

.testimonial-orbit{

    position:absolute;

    border:1px solid rgba(222,93,0,.10);

    pointer-events:none;

}

.testimonial-orbit-one{

    width:500px;
    height:500px;

    right:-300px;
    top:120px;

    transform:rotate(25deg);

}

.testimonial-orbit-two{

    width:300px;
    height:300px;

    left:-190px;
    bottom:80px;

    transform:rotate(-20deg);

}


/*====================================================
                HEADING
====================================================*/

.testimonial-heading{

    position:relative;

    z-index:3;

    max-width:800px;

    margin:0 auto 70px;

    text-align:center;

}


.testimonial-heading .section-subtitle{

    display:inline-block;

    color:#c38a53;

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    margin-bottom:18px;

}


.testimonial-heading h2{

    margin:0 0 20px;

    color:#111;

    font-size:45px;

    line-height:1.08;

    font-weight:700;

    letter-spacing:-1.5px;

}


.testimonial-heading h2 span{

    display:inline;

    color:#c38a53;

}


.testimonial-heading p{

    max-width:650px;

    margin:0 auto;

    color:#666;

    font-size:16px;

    line-height:1.8;

}


/*====================================================
                STAGE
====================================================*/

.testimonial-stage{

    position:relative;

    max-width:1050px;

    margin:auto;

    z-index:3;

}


/*====================================================
                HUGE QUOTE
====================================================*/

.testimonial-big-quote{

    position:absolute;

    left:-45px;

    top:-80px;

    font-family:Georgia,serif;

    font-size:220px;

    line-height:1;

    color:rgba(222,93,0,.06);

    z-index:0;

    pointer-events:none;

}


/*====================================================
                SLIDER
====================================================*/

.testimonial-slider{

    position:relative;

    min-height:420px;

    overflow:hidden;

}


/*====================================================
                TESTIMONIAL CARD
====================================================*/

.testimonial-card{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    padding:65px 75px;

    background:rgba(255,255,255,.88);

    border:1px solid rgba(17,17,17,.08);

    box-shadow:
        0 30px 90px rgba(0,0,0,.08);

    opacity:0;

    visibility:hidden;

    transform:
        translateX(90px)
        scale(.96);

    filter:blur(6px);

    transition:
        opacity .8s ease,
        transform 1s cubic-bezier(.16,1,.3,1),
        filter .8s ease;

}


/* Active */

.testimonial-card.active{

    opacity:1;

    visibility:visible;

    transform:
        translateX(0)
        scale(1);

    filter:blur(0);

}


/*====================================================
                NUMBER
====================================================*/

.testimonial-number{

    position:absolute;

    top:28px;

    right:35px;

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

    color:#c38a53;

}


/*====================================================
                ORANGE LINE
====================================================*/

.testimonial-line{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:#c38a53;

    transform-origin:left;

    transform:scaleX(0);

}


.testimonial-card.active .testimonial-line{

    animation:
        testimonialLine 5s linear forwards;

}


@keyframes testimonialLine{

    from{
        transform:scaleX(0);
    }

    to{
        transform:scaleX(1);
    }

}


/*====================================================
                CONTENT
====================================================*/

.testimonial-content{

    max-width:850px;

}


/*====================================================
                QUOTE ICON
====================================================*/

.quote-icon{

    width:64px;
    height:64px;

    display:flex;

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

    background:#c38a53;

    color:#fff;

    font-size:24px;

    margin-bottom:28px;

    box-shadow:
        12px 12px 0 rgba(222,93,0,.10);

    transform:rotate(-3deg);

    transition:.5s;

}


.testimonial-card.active .quote-icon{

    animation:
        quoteReveal .8s cubic-bezier(.16,1,.3,1);

}


@keyframes quoteReveal{

    0%{

        opacity:0;

        transform:
            translateY(20px)
            rotate(-10deg);

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            rotate(-3deg);

    }

}


/*====================================================
                TEXT
====================================================*/

.testimonial-text{

    max-width:800px;

    margin:0 0 40px;

    color:#222;

    font-family:Georgia,serif;

    font-size:27px;

    line-height:1.65;

    font-weight:400;

}


/*====================================================
                AUTHOR
====================================================*/

.testimonial-author{

    display:flex;

    align-items:center;

    gap:18px;

}


.author-image{

    width:58px;
    height:58px;

    overflow:hidden;

    border:2px solid #c38a53;

    flex-shrink:0;

}


.author-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s;

}


.testimonial-card.active
.author-image img{

    animation:
        authorImage .8s ease;

}


@keyframes authorImage{

    from{

        opacity:0;

        transform:scale(1.2);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


.author-info h4{

    margin:0 0 5px;

    color:#111;

    font-size:17px;

    font-weight:700;

}


.author-info span{

    color:#777;

    font-size:13px;

    letter-spacing:.5px;

}


/*====================================================
                NAVIGATION
====================================================*/

.testimonial-navigation{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    margin-top:35px;

}


/*====================================================
                NAV BUTTONS
====================================================*/

.testimonial-navigation button{

    width:52px;
    height:52px;

    border:1px solid rgba(17,17,17,.15);

    background:#fff;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.35s;

}


.testimonial-navigation button:hover{

    background:#c38a53;

    color:#fff;

    border-color:#c38a53;

    transform:translateY(-3px);

}


/*====================================================
                PROGRESS
====================================================*/

.testimonial-progress{

    display:flex;

    align-items:center;

    gap:14px;

    min-width:220px;

}


.progress-current,
.progress-total{

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

}


.progress-current{

    color:#c38a53;

}


.progress-total{

    color:#999;

}


.progress-track{

    flex:1;

    height:2px;

    background:#ddd;

    position:relative;

    overflow:hidden;

}


.progress-fill{

    position:absolute;

    left:0;
    top:0;

    width:33.33%;

    height:100%;

    background:#c38a53;

    transition:
        width .7s cubic-bezier(.16,1,.3,1);

}


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

@media(max-width:992px){

    .testimonial-section{

        padding:90px 0;

    }

    .testimonial-heading h2{

        font-size:46px;

    }

    .testimonial-card{

        padding:55px 50px;

    }

    .testimonial-text{

        font-size:23px;

    }

}


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

@media(max-width:768px){

    .testimonial-section{

        padding:75px 0;

    }

    .testimonial-heading{

        margin-bottom:45px;

        padding:0 10px;

    }

    .testimonial-heading .section-subtitle{

        font-size:11px;

        letter-spacing:3px;

    }

    .testimonial-heading h2{

        font-size:35px;

        line-height:1.15;

        letter-spacing:-.5px;

    }

    .testimonial-heading p{

        font-size:14px;

        line-height:1.7;

    }

    .testimonial-stage{

        width:100%;

    }

    .testimonial-slider{

        min-height:500px;

    }

    .testimonial-card{

        padding:45px 25px;

        align-items:flex-start;

    }

    .testimonial-big-quote{

        left:-15px;

        top:-35px;

        font-size:150px;

    }

    .testimonial-number{

        top:20px;

        right:20px;

        font-size:11px;

    }

    .quote-icon{

        width:52px;
        height:52px;

        font-size:19px;

        margin-bottom:25px;

    }

    .testimonial-text{

        font-size:20px;

        line-height:1.65;

        margin-bottom:35px;

    }

    .testimonial-author{

        gap:14px;

    }

    .author-image{

        width:50px;
        height:50px;

    }

    .author-info h4{

        font-size:15px;

    }

    .author-info span{

        font-size:12px;

    }

    .testimonial-navigation{

        gap:12px;

        margin-top:25px;

    }

    .testimonial-navigation button{

        width:44px;
        height:44px;

    }

    .testimonial-progress{

        min-width:130px;

        gap:8px;

    }

    .testimonial-orbit-one{

        width:300px;
        height:300px;

        right:-210px;

    }

    .testimonial-orbit-two{

        width:220px;
        height:220px;

        left:-170px;

    }

}


/*====================================================
                VERY SMALL MOBILE
====================================================*/

@media(max-width:380px){

    .testimonial-heading h2{

        font-size:31px;

    }

    .testimonial-slider{

        min-height:530px;

    }

    .testimonial-card{

        padding:42px 20px;

    }

    .testimonial-text{

        font-size:18px;

    }

    .progress-track{

        min-width:65px;

    }

}


/*=========================================
Footer
=========================================*/

.testimonial-footer{

    display:flex;

    align-items:center;

    gap:18px;

}

.testimonial-footer img{

    width:75px;

    height:75px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #c38a53;

}

.testimonial-footer h4{

    color:#fff;

    font-size:22px;

    margin-bottom:6px;

}

.testimonial-footer span{

    color:#c38a53;

    font-size:15px;

}


/*=========================================
Navigation
=========================================*/

.testimonial-nav{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:25px;

}

.testimonial-nav button{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:#c38a53;

    color:#fff;

    transition:.35s;

}

.testimonial-nav button:hover{

    background:#fff;

    color:#111;

}


/*=========================================
Dots
=========================================*/

.testimonial-dots{

    display:flex;

    justify-content:center;

    gap:10px;

}

.testimonial-dot{

    width:12px;

    height:12px;

    border-radius:20px;

    background:#666;

    transition:.35s;

    cursor:pointer;

}

.testimonial-dot.active{

    width:40px;

    background:#c38a53;

}


/*=========================================
Responsive
=========================================*/

@media(max-width:768px){

.testimonial-section{

padding:80px 0;

}

.testimonial-slider{

min-height:420px;

margin-top:40px;

}

.testimonial-card{

padding:25px;

border-radius:20px;

}

.quote-icon{

width:55px;

height:55px;

font-size:20px;

margin-bottom:20px;

}

.testimonial-text{

font-size:15px;

line-height:1.8;

margin-bottom:25px;

}

.testimonial-footer img{

width:60px;

height:60px;

}

.testimonial-footer h4{

font-size:18px;

}

.testimonial-footer span{

font-size:13px;

}

}

.testimonial-card{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transform:translateY(40px) scale(.97);

    transition:

        opacity .6s ease,

        transform .6s ease;

}

.testimonial-card.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0) scale(1);

}
 
 
 /*====================================================
                CONTACT SECTION
====================================================*/

.contact-section{

    position:relative;

    padding:120px 0 70px;

    background:#faf8f4;

    overflow:hidden;

    color:#111;

}


/*====================================================
                BACKGROUND DETAILS
====================================================*/

.contact-orb{

    position:absolute;

    pointer-events:none;

    border-radius:50%;

    filter:blur(5px);

}

.contact-orb-one{

    width:500px;

    height:500px;

    top:-250px;

    right:-180px;

    background:
        radial-gradient(
            circle,
            rgba(222,93,0,.10),
            transparent 70%
        );

}

.contact-orb-two{

    width:420px;

    height:420px;

    bottom:-220px;

    left:-200px;

    background:
        radial-gradient(
            circle,
            rgba(222,93,0,.07),
            transparent 70%
        );

}


/*====================================================
                HEADING
====================================================*/

.contact-heading{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:80px;

    align-items:end;

    margin-bottom:20px;

    position:relative;

    z-index:2;

}


.contact-heading-left{

    position:relative;

}


.contact-heading-left::before{

    content:"";

    position:absolute;

    width:55px;

    height:2px;

    background:#c38a53;

    left:0;

    bottom:-25px;

}


.contact-heading .section-subtitle{

    display:inline-block;

    color:#c38a53;

    font-size:13px;

    letter-spacing:4px;

    font-weight:700;

    margin-bottom:20px;

}


.contact-heading h2{

    font-size:45px;

    line-height:1.05;

    font-weight:700;

    letter-spacing:-2px;

    margin:0;

    color:#111;

}


.contact-heading h2 span{

    display:block;

    color:#c38a53;

}


.contact-heading-right{

    padding-bottom:4px;

}


.contact-heading-right p{

    max-width:520px;

    color:#666;

    font-size:17px;

    line-height:1.8;

    margin:0 0 25px;

}


.heading-line{

    width:100%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            #c38a53,
            rgba(222,93,0,.08)
        );

}


/*====================================================
                MAIN LAYOUT
====================================================*/

.contact-layout{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:0;

    position:relative;

    z-index:2;

}


/*====================================================
                FORM AREA
====================================================*/

.contact-form-area{

    background:#fff;

    padding:20px 55px;

    border-top:1px solid rgba(17,17,17,.12);

    border-bottom:1px solid rgba(17,17,17,.12);

    border-left:1px solid rgba(17,17,17,.12);

    position:relative;

}


/* Orange vertical accent */

.contact-form-area::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:#c38a53;

}


/*====================================================
                FORM INTRO
====================================================*/

.form-intro{

    display:flex;

    gap:25px;

    align-items:flex-start;

    margin-bottom:45px;

}


.form-number,
.info-number{

    font-size:12px;

    letter-spacing:3px;

    color:#c38a53;

    font-weight:700;

}


.form-intro h3{

    font-size:32px;

    margin:0 0 8px;

    color:#111;

}


.form-intro p{

    color:#777;

    font-size:15px;

    margin:0;

    line-height:1.7;

}


/*====================================================
                FORM ROW
====================================================*/

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;

    margin-bottom:32px;

}


.field{

    position:relative;

}


.field label{

    display:block;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#777;

    font-weight:600;

    margin-bottom:12px;

}


.field input,
.field select,
.field textarea{

    width:100%;

    border:none;

    border-bottom:1px solid #cfcfcf;

    background:transparent;

    padding:10px 0 14px;

    font-family:inherit;

    font-size:16px;

    color:#111;

    outline:none;

    border-radius:0;

    transition:.35s;

}


.field input::placeholder,
.field textarea::placeholder{

    color:#aaa;

}


.field select{

    appearance:none;

    cursor:pointer;

}


.field textarea{

    resize:none;

    min-height:110px;

}


/* Animated field line */

.field-line{

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:#c38a53;

    transition:.45s ease;

}


.field:focus-within .field-line{

    width:100%;

}


.field:focus-within label{

    color:#c38a53;

}


.field-message{

    margin-bottom:35px;

}


/*====================================================
                FORM BOTTOM
====================================================*/

.form-bottom{

    display:flex;

    align-items:center;

    gap:25px;

}


.contact-submit{

    display:inline-flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;

    min-width:250px;

    padding:17px 20px 17px 25px;

    background:#c38a53;

    color:#fff;

    border:none;

    border-radius:0;

    cursor:pointer;

    font-family:inherit;

    font-size:14px;

    font-weight:600;

    letter-spacing:.3px;

    transition:.4s;

}


.contact-submit i{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.15);

    transition:.4s;

}


.contact-submit:hover{

    background:#111;

    transform:translateY(-3px);

}


.contact-submit:hover i{

    transform:translateX(5px);

}


.form-bottom small{

    color:#999;

    font-size:11px;

    line-height:1.5;

    max-width:170px;

}


/*====================================================
                CONTACT INFO
====================================================*/

.contact-info-area{

    background:#111;

    color:#fff;

    padding:55px;

    position:relative;

    overflow:hidden;

}


/* Architectural lines */

.contact-info-area::before{

    content:"";

    position:absolute;

    width:1px;

    height:180px;

    right:45px;

    top:0;

    background:
        linear-gradient(
            to bottom,
            #c38a53,
            transparent
        );

}


.contact-info-area::after{

    content:"";

    position:absolute;

    width:200px;

    height:200px;

    right:-100px;

    bottom:150px;

    border:1px solid rgba(222,93,0,.2);

    transform:rotate(45deg);

}


/*====================================================
                INFO TOP
====================================================*/

.info-top{

    display:flex;

    gap:25px;

    align-items:center;

    margin-bottom:45px;

}


.info-label{

    font-size:11px;

    letter-spacing:3px;

    color:#aaa;

}


/*====================================================
                INFO ITEM
====================================================*/

.contact-info-item{

    display:flex;

    gap:20px;

    padding:23px 0;

    border-bottom:1px solid rgba(255,255,255,.12);

    position:relative;

    z-index:2;

}


.info-icon{

    width:45px;

    height:45px;

    flex-shrink:0;

    border:1px solid rgba(222,93,0,.55);

    color:#c38a53;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:16px;

    transition:.4s;

}


.contact-info-item:hover .info-icon{

    background:#c38a53;

    color:#fff;

    transform:translateX(5px);

}


.contact-info-item small{

    display:block;

    font-size:9px;

    letter-spacing:2px;

    color:#888;

    margin-bottom:8px;

}


.contact-info-item a{

    color:#fff;

    text-decoration:none;

    font-size:18px;

    transition:.3s;

}


.contact-info-item a:hover{

    color:#c38a53;

}


.contact-info-item p{

    color:#ccc;

    font-size:14px;

    line-height:1.8;

    margin:0;

}


/*====================================================
                SOCIAL
====================================================*/

.contact-social-block{

    padding:30px 0;

}


.contact-social-block > span{

    font-size:9px;

    letter-spacing:3px;

    color:#888;

}


.contact-social{

    display:flex;

    gap:10px;

    margin-top:15px;

}


.contact-social a{

    width:42px;

    height:42px;

    border:1px solid rgba(255,255,255,.2);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

    transition:.35s;

}


.contact-social a:hover{

    background:#c38a53;

    border-color:#c38a53;

    transform:translateY(-4px);

}


/*====================================================
                MAP
====================================================*/

.contact-map{

    position:relative;

    margin-top:10px;

    overflow:hidden;

    border-top:2px solid #c38a53;

}


.contact-map iframe{

    width:100%;

    height:210px;

    border:0;

    display:block;

    filter:
        grayscale(100%)
        contrast(1.1);

    opacity:.78;

    transition:.5s;

}


.contact-map:hover iframe{

    filter:grayscale(0%);

    opacity:1;

}


.map-label{

    position:absolute;

    left:15px;

    bottom:15px;

    display:flex;

    align-items:center;

    gap:8px;

    background:#111;

    padding:9px 12px;

    color:#fff;

    font-size:10px;

    letter-spacing:1px;

    border-left:2px solid #c38a53;

}


.map-label i{

    color:#c38a53;

}


/*====================================================
                BOTTOM
====================================================*/

.contact-bottom{

    display:flex;

    align-items:center;

    gap:25px;

    margin-top:55px;

}


.bottom-line{

    flex:1;

    height:1px;

    background:#ddd;

}


.contact-bottom p{

    margin:0;

    white-space:nowrap;

    color:#999;

    font-size:11px;

    letter-spacing:1px;

}


.contact-bottom p span{

    color:#c38a53;

    font-weight:700;

    letter-spacing:3px;

}


/*====================================================
                ANIMATION
====================================================*/

.contact-heading,
.contact-form-area,
.contact-info-area{

    animation:contactReveal .9s ease both;

}


.contact-info-area{

    animation-delay:.15s;

}


@keyframes contactReveal{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media(max-width:992px){

    .contact-heading{

        grid-template-columns:1fr;

        gap:25px;

    }


    .contact-heading h2{

        font-size:48px;

    }


    .contact-layout{

        grid-template-columns:1fr;

    }


    .contact-info-area{

        border-top:4px solid #c38a53;

    }

}


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

@media(max-width:768px){

    .contact-section{

        padding:80px 0 50px;

    }


    .contact-heading{

        gap:30px;

        margin-bottom:50px;

    }


    .contact-heading h2{

        font-size:36px;

        line-height:1.1;

        letter-spacing:-1px;

    }


    .contact-heading-right p{

        font-size:14px;

        line-height:1.7;

    }


    .contact-layout{

        display:block;

    }


    .contact-form-area,
    .contact-info-area{

        padding:30px 22px;

    }


    .form-intro{

        gap:15px;

        margin-bottom:35px;

    }


    .form-intro h3{

        font-size:25px;

    }


    .form-intro p{

        font-size:13px;

    }


    .form-row{

        grid-template-columns:1fr;

        gap:25px;

        margin-bottom:25px;

    }


    .field input,
    .field select,
    .field textarea{

        font-size:15px;

    }


    .form-bottom{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }


    .contact-submit{

        width:100%;

        min-width:0;

    }


    .form-bottom small{

        max-width:100%;

    }


    .info-top{

        margin-bottom:25px;

    }


    .contact-info-item{

        padding:20px 0;

    }


    .contact-info-item a{

        font-size:16px;

    }


    .contact-map iframe{

        height:190px;

    }


    .contact-bottom{

        margin-top:40px;

        gap:12px;

    }


    .contact-bottom p{

        font-size:9px;

        text-align:center;

    }

}


@media(max-width:420px){

    .contact-heading h2{

        font-size:32px;

    }


    .contact-form-area,
    .contact-info-area{

        padding:28px 18px;

    }


    .contact-submit{

        font-size:13px;

    }

}
 
 
 /* ====================================================
                LUXURY SIGNATURE FOOTER
==================================================== */

.luxury-footer {

    position: relative;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(222,93,0,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 65%,
            rgba(222,93,0,.10),
            transparent 25%
        ),
        #090909;

    color: #fff;

    overflow: hidden;

    padding: 110px 0 0;

    isolation: isolate;
}


/* ====================================================
                AMBIENT LIGHT
==================================================== */

.footer-ambient {

    position: absolute;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    filter: blur(100px);

    opacity: .12;

    pointer-events: none;

    z-index: -2;
}

.footer-ambient-one {

    background: #c38a53;

    left: -350px;

    top: -250px;

    animation: footerGlowOne 10s ease-in-out infinite alternate;
}

.footer-ambient-two {

    background: #c79a4b;

    right: -350px;

    bottom: -300px;

    animation: footerGlowTwo 12s ease-in-out infinite alternate;
}


@keyframes footerGlowOne {

    0% {
        transform: translate(0,0) scale(1);
    }

    100% {
        transform: translate(100px,80px) scale(1.2);
    }
}


@keyframes footerGlowTwo {

    0% {
        transform: translate(0,0) scale(1);
    }

    100% {
        transform: translate(-100px,-80px) scale(1.25);
    }
}


/* ====================================================
                ARCHITECTURAL WATERMARK
==================================================== */

.footer-architecture {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 420px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 12px;

    opacity: .055;

    pointer-events: none;

    z-index: -1;
}

.building {

    display: block;

    width: 90px;

    background: linear-gradient(
        to top,
        rgba(255,255,255,.9),
        rgba(255,255,255,.1)
    );

    position: relative;
}


/* Building heights */

.b1 {
    height: 170px;
}

.b2 {
    height: 240px;
    width: 120px;
}

.b3 {
    height: 320px;
    width: 100px;
}

.b4 {
    height: 210px;
    width: 150px;
}

.b5 {
    height: 380px;
    width: 110px;
}

.b6 {
    height: 270px;
    width: 130px;
}

.b7 {
    height: 340px;
    width: 100px;
}

.b8 {
    height: 190px;
    width: 150px;
}


/* Building windows */

.building::before {

    content: "";

    position: absolute;

    inset: 20px;

    background-image:
        linear-gradient(
            90deg,
            transparent 45%,
            rgba(222,93,0,.6) 46%,
            rgba(222,93,0,.6) 54%,
            transparent 55%
        ),
        linear-gradient(
            rgba(222,93,0,.6) 1px,
            transparent 1px
        );

    background-size:
        28px 28px,
        28px 28px;

    opacity: .45;
}


/* ====================================================
                MAIN CTA
==================================================== */

.footer-hero {

    position: relative;

    max-width: 1000px;

    margin: 0 auto;

    text-align: center;

    padding-bottom: 85px;
}


.footer-eyebrow {

    display: block;

    color: #c38a53;

    font-size: 12px;

    letter-spacing: 5px;

    font-weight: 700;

    margin-bottom: 22px;

    text-transform: uppercase;
}


.footer-hero h2 {

    margin: 0;

    font-size: clamp(52px, 7vw, 45px);

    line-height: .95;

    letter-spacing: -4px;

    font-weight: 700;

    color: #fff;
}


.footer-hero h2 span {

    display: block;

    color: #c38a53;

    font-style: italic;

    font-weight: 500;
}


.footer-hero p {

    max-width: 570px;

    margin: 30px auto 35px;

    color: #aaa;

    font-size: 17px;

    line-height: 1.8;
}


/* ====================================================
                CTA BUTTON
==================================================== */

.footer-cta {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 25px;

    padding: 17px 24px;

    border: 1px solid rgba(222,93,0,.6);

    color: #fff;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: 12px;

    font-weight: 700;

    overflow: hidden;

    transition: .4s;
}


.footer-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    background: #c38a53;

    transform: translateX(-105%);

    transition: .45s;

    z-index: -1;
}


.footer-cta:hover::before {

    transform: translateX(0);
}


.footer-cta:hover {

    color: #fff;

    border-color: #c38a53;

    padding-left: 30px;

    padding-right: 30px;
}


.footer-cta i {

    transition: .4s;
}


.footer-cta:hover i {

    transform: translateX(7px);
}


/* ====================================================
                DIVIDER
==================================================== */

.footer-divider {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 70px;
}


.footer-divider span {

    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(222,93,0,.5)
        );
}


.footer-divider span:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(222,93,0,.5),
            transparent
        );
}


.footer-divider i {

    color: #c38a53;

    font-size: 8px;

    transform: rotate(45deg);
}


/* ====================================================
                FOOTER MAIN
==================================================== */

.footer-main {

    display: grid;

    grid-template-columns:
        1.7fr
        1fr
        1.15fr
        1.35fr;

    gap: 55px;

    position: relative;

    z-index: 5;
}


/* ====================================================
                BRAND
==================================================== */

.footer-brand {

    max-width: 380px;
}


.footer-logo {

    width: 210px;

    filter:
        brightness(0)
        invert(1)
        opacity(.9);

    margin-bottom: 25px;
}


.footer-brand p {

    color: #999;

    font-size: 15px;

    line-height: 1.9;

    margin-bottom: 30px;
}


/* ====================================================
                SOCIAL
==================================================== */

.footer-social {

    display: flex;

    gap: 18px;
}


.footer-social a {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,.15);

    color: #aaa;

    text-decoration: none;

    transition: .35s;
}


.footer-social a:hover {

    color: #fff;

    border-color: #c38a53;

    background: #c38a53;

    transform: translateY(-5px);
}


/* ====================================================
                COLUMN
==================================================== */

.footer-column-label {

    display: block;

    color: #c38a53;

    font-size: 10px;

    letter-spacing: 3px;

    margin-bottom: 10px;

    font-weight: 700;
}


.footer-column h3 {

    color: #fff;

    font-size: 24px;

    margin: 0 0 28px;

    font-weight: 600;
}


.footer-column ul {

    list-style: none;

    padding: 0;

    margin: 0;
}


.footer-column ul li {

    margin-bottom: 14px;
}


.footer-column ul li a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    color: #999;

    text-decoration: none;

    font-size: 14px;

    transition: .35s;

    padding-bottom: 7px;

    border-bottom: 1px solid transparent;
}


.footer-column ul li a span {

    font-size: 10px;

    color: #555;

    transition: .35s;
}


.footer-column ul li a:hover {

    color: #fff;

    border-bottom-color:
        rgba(222,93,0,.35);

    padding-left: 6px;
}


.footer-column ul li a:hover span {

    color: #c38a53;

    transform: translateX(4px);
}


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

.footer-contact {

    display: flex;

    flex-direction: column;

    gap: 25px;
}


.footer-contact-item {

    display: flex;

    gap: 15px;

    text-decoration: none;

    color: #aaa;

    transition: .35s;
}


.contact-number {

    color: #c38a53;

    font-size: 10px;

    letter-spacing: 1px;

    padding-top: 4px;

    min-width: 20px;
}


.footer-contact-item small {

    display: block;

    color: #666;

    font-size: 9px;

    letter-spacing: 2px;

    margin-bottom: 5px;
}


.footer-contact-item strong {

    display: block;

    color: #aaa;

    font-size: 13px;

    line-height: 1.6;

    font-weight: 400;

    transition: .35s;
}


.footer-contact-item:hover strong {

    color: #c38a53;
}


/* ====================================================
                MOVING ROAD
==================================================== */

.footer-road {

    position: relative;

    height: 150px;


    overflow: hidden;

    z-index: 4;
}


/* Road glow */

.road-glow {

    position: absolute;

    left: 0;
    right: 0;

    bottom: 45px;

    height: 70px;

    background:
        radial-gradient(
            ellipse,
            rgba(222,93,0,.12),
            transparent 70%
        );

    filter: blur(12px);
}


/* Road */

.road-line {

    position: absolute;

    left: -10%;

    width: 120%;

    bottom: 38px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c38a53,
            #c79a4b,
            #c38a53,
            transparent
        );

    box-shadow:
        0 0 15px rgba(222,93,0,.4);
}


/* ====================================================
                MOVING VEHICLES
==================================================== */

.footer-car {

    position: absolute;

    bottom: 45px;

    color: rgba(255,255,255,.12);

    font-size: 38px;

    filter:
        drop-shadow(
            0 0 15px rgba(222,93,0,.2)
        );

    pointer-events: none;
}


/* Car movement */

.car-one {

    animation:
        driveOne 17s linear infinite;

    font-size: 30px;
}


.car-two {

    animation:
        driveTwo 22s linear infinite;

    animation-delay: -8s;

    font-size: 42px;
}


.car-three {

    animation:
        driveThree 28s linear infinite;

    animation-delay: -15s;

    font-size: 34px;
}


.car-four {

    animation:
        driveFour 20s linear infinite;

    animation-delay: -5s;

    font-size: 25px;
}


@keyframes driveOne {

    from {
        left: -10%;
        transform: scaleX(1);
    }

    to {
        left: 110%;
        transform: scaleX(1);
    }
}


@keyframes driveTwo {

    from {
        left: 110%;
        transform: scaleX(-1);
    }

    to {
        left: -15%;
        transform: scaleX(-1);
    }
}


@keyframes driveThree {

    from {
        left: -15%;
        transform: scaleX(1);
    }

    to {
        left: 110%;
        transform: scaleX(1);
    }
}


@keyframes driveFour {

    from {
        left: 110%;
        transform: scaleX(-1);
    }

    to {
        left: -10%;
        transform: scaleX(-1);
    }
}


/* ====================================================
                FOOTER BOTTOM
==================================================== */

.footer-bottom {

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 25px;

    padding: 25px 0;

    border-top:
        1px solid rgba(255,255,255,.08);
}


.footer-bottom p {

    color: #fff;

    font-size: 15px;

    margin: 0;
}


.footer-bottom p:last-child {

    text-align: right;
}


.footer-bottom-center {

    display: flex;

    align-items: center;

    gap: 12px;
}


.footer-bottom-center span {

    width: 35px;

    height: 1px;

    background: #c38a53;
}


.footer-bottom-center small {

    color: #777;

    font-size: 12px;

    letter-spacing: 3px;

    white-space: nowrap;
}


/* ====================================================
                SCROLL REVEAL
==================================================== */

.footer-hero,
.footer-main,
.footer-bottom {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.16,1,.3,1);
}


.luxury-footer.footer-visible
.footer-hero {

    opacity: 1;

    transform: translateY(0);
}


.luxury-footer.footer-visible
.footer-main {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .2s;
}


.luxury-footer.footer-visible
.footer-bottom {

    opacity: 1;

    transform: translateY(0);

    transition-delay: .4s;
}


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

@media(max-width:1100px) {

    .footer-main {

        grid-template-columns:
            1.5fr
            1fr
            1fr;

    }

    .footer-contact-column {

        grid-column: span 3;
    }

}


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

@media(max-width:768px) {

    .luxury-footer {

        padding-top: 75px;
    }


    .footer-hero {

        padding-bottom: 60px;

        padding-left: 10px;

        padding-right: 10px;
    }


    .footer-eyebrow {

        font-size: 9px;

        letter-spacing: 3px;

        margin-bottom: 18px;
    }


    .footer-hero h2 {

        font-size: 48px;

        letter-spacing: -2px;

        line-height: 1;
    }


    .footer-hero p {

        font-size: 14px;

        margin-top: 22px;

        line-height: 1.7;
    }


    .footer-cta {

        padding: 15px 18px;

        font-size: 10px;

        gap: 18px;
    }


    .footer-divider {

        margin-bottom: 50px;
    }


    .footer-main {

        grid-template-columns: 1fr 1fr;

        gap: 45px 25px;
    }


    .footer-brand {

        grid-column: span 2;

        max-width: 100%;
    }


    .footer-logo {

        width: 175px;
    }


    .footer-brand p {

        font-size: 13px;

        line-height: 1.8;
    }


    .footer-column-label {

        font-size: 8px;

        letter-spacing: 2px;
    }


    .footer-column h3 {

        font-size: 19px;

        margin-bottom: 20px;
    }


    .footer-column ul li {

        margin-bottom: 11px;
    }


    .footer-column ul li a {

        font-size: 12px;
    }


    .footer-contact-column {

        grid-column: span 2;
    }


    .footer-contact {

        gap: 20px;
    }


    .footer-contact-item strong {

        font-size: 12px;
    }


    .footer-road {

        height: 110px;

        margin-top: 45px;
    }


    .footer-car {

        bottom: 35px;
    }


    .road-line {

        bottom: 30px;
    }


    .footer-bottom {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 12px;

        padding: 22px 0;
    }


    .footer-bottom p {

        text-align: center !important;

        font-size: 9px;
    }


    .footer-bottom-center {

        justify-content: center;

        order: -1;
    }


    .footer-bottom-center small {

        font-size: 7px;

        letter-spacing: 2px;
    }


    .footer-architecture {

        height: 300px;

        gap: 5px;
    }


    .building {

        width: 45px !important;
    }


    .b1 {
        height: 100px;
    }

    .b2 {
        height: 160px;
    }

    .b3 {
        height: 210px;
    }

    .b4 {
        height: 130px;
    }

    .b5 {
        height: 250px;
    }

    .b6 {
        height: 170px;
    }

    .b7 {
        height: 220px;
    }

    .b8 {
        height: 120px;
    }

}


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

@media(max-width:420px) {

    .footer-hero h2 {

        font-size: 41px;
    }


    .footer-main {

        gap: 38px 18px;
    }


    .footer-column h3 {

        font-size: 17px;
    }


    .footer-column ul li a {

        font-size: 11px;
    }


    .footer-social a {

        width: 38px;

        height: 38px;
    }

}


/* ====================================================
                REDUCED MOTION
==================================================== */

@media(prefers-reduced-motion:reduce) {

    .footer-car,
    .footer-ambient-one,
    .footer-ambient-two {

        animation: none !important;
    }

    .footer-hero,
    .footer-main,
    .footer-bottom {

        opacity: 1;

        transform: none;

        transition: none;
    }

} 

/* =========================================================
   MERLIONN — LEGACY & ASSURANCE
   ALL CLASSES ARE UNIQUE / ISOLATED
========================================================= */

.mln-assurance {
    position: relative;
    width: 100%;
    padding: 130px 0 110px;
    background: #faf8f4;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.mln-assurance::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(222,93,0,.025) 50%,
            transparent 100%
        );
    pointer-events: none;
}

.mln-assurance-glow {
    position: absolute;
    width: 650px;
    height: 650px;
    right: -300px;
    top: -220px;

    background:
        radial-gradient(
            circle,
            rgba(222,93,0,.10),
            transparent 68%
        );

    pointer-events: none;
}


/* =========================================================
   INNER
========================================================= */

.mln-assurance-inner {
    width: min(1380px, calc(100% - 100px));
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.mln-assurance-header {
    max-width: 850px;
    margin: 0 auto 20px;
    text-align: center;
}

.mln-assurance-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    color: #c38a53;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 5px;

    margin-bottom: 25px;
}

.mln-assurance-eyebrow span {
    width: 28px;
    height: 1px;
    background: #c38a53;
}

.mln-assurance-header h2 {
    margin: 0;

    font-size: clamp(48px, 6vw, 45px);
    line-height: .98;

    font-weight: 500;
    letter-spacing: -3px;

    color: #111;
}

.mln-assurance-header h2 strong {
    font-weight: 700;
}

.mln-assurance-header h2 em {
    color: #c38a53;
    font-style: normal;
    font-weight: 700;
}

.mln-assurance-header p {
    max-width: 700px;
    margin: 30px auto 0;

    color: #6d6d6d;

    font-size: 16px;
    line-height: 1.9;
}


/* =========================================================
   MAIN STAGE
========================================================= */

.mln-assurance-stage {
    position: relative;

    display: grid;

    grid-template-columns:
        100px
        1fr
        330px
        1fr;

    min-height: 470px;

    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

    background: rgba(255,255,255,.35);
}


/* =========================================================
   LEFT INDEX
========================================================= */

.mln-assurance-index {
    border-right: 1px solid #ddd;

    display: flex;
    flex-direction: column;

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

    gap: 18px;
}

.mln-index-line {
    width: 1px;
    height: 70px;

    background: linear-gradient(
        to bottom,
        transparent,
        #c38a53
    );
}

.mln-index-number {
    font-size: 28px;
    font-weight: 600;

    color: #111;
}

.mln-index-label {
    writing-mode: vertical-rl;

    font-size: 9px;
    letter-spacing: 4px;

    color: #c38a53;
}


/* =========================================================
   FEATURE
========================================================= */

.mln-assurance-feature {
    padding: 65px 60px;

    position: relative;

    border-right: 1px solid #ddd;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mln-feature-meta {
    color: #c38a53;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 25px;
}

.mln-assurance-feature h3 {
    margin: 0;

    font-size: clamp(42px, 4vw, 65px);

    line-height: .95;

    color: #111;

    letter-spacing: -2px;
}

.mln-assurance-feature p {
    max-width: 330px;

    margin: 30px 0 0;

    color: #707070;

    font-size: 15px;
    line-height: 1.8;
}

.mln-feature-arrow {
    position: absolute;

    right: 45px;
    bottom: 45px;

    font-size: 34px;

    color: #c38a53;

    transition: .4s ease;
}

.mln-assurance-feature:hover .mln-feature-arrow {
    transform: translateX(10px);
}


/* =========================================================
   CENTRAL SHIELD
========================================================= */

.mln-assurance-symbol {
    position: relative;

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

    flex-direction: column;

    border-right: 1px solid #ddd;

    overflow: hidden;
}


/* Large decorative circle */

.mln-symbol-ring {
    position: absolute;

    width: 280px;
    height: 280px;

    border: 1px solid rgba(222,93,0,.25);

    border-radius: 50%;

    animation: mlnRingPulse 5s ease-in-out infinite;
}

.mln-symbol-ring::before {
    content: "";

    position: absolute;

    inset: 25px;

    border: 1px solid rgba(222,93,0,.15);

    border-radius: 50%;
}


/* Shield */

.mln-symbol-shield {
    position: relative;
    z-index: 3;

    width: 105px;
    height: 125px;

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

    color: #c38a53;

    font-size: 48px;

    clip-path: polygon(
        50% 0%,
        88% 15%,
        88% 55%,
        72% 78%,
        50% 100%,
        28% 78%,
        12% 55%,
        12% 15%
    );

    background: linear-gradient(
        145deg,
        #fff,
        #f1eee8
    );

    border: 1px solid rgba(222,93,0,.25);

    filter:
        drop-shadow(0 20px 30px rgba(0,0,0,.10));
}

.mln-symbol-shield i {
    transform: translateY(-2px);
}


/* Shield text */

.mln-symbol-text {
    position: relative;
    z-index: 3;

    text-align: center;

    margin-top: 28px;
}

.mln-symbol-text span {
    display: block;

    color: #888;

    font-size: 9px;
    letter-spacing: 4px;

    margin-bottom: 5px;
}

.mln-symbol-text strong {
    color: #111;

    font-size: 13px;

    letter-spacing: 3px;
}


/* =========================================================
   RIGHT DETAILS
========================================================= */

.mln-assurance-details {
    display: flex;
    flex-direction: column;

    justify-content: center;
}

.mln-detail-item {
    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 18px;

    padding: 23px 40px;

    border-bottom: 1px solid #e2e2e2;

    transition: .35s ease;
}

.mln-detail-item:last-child {
    border-bottom: none;
}

.mln-detail-item > span {
    color: #c38a53;

    font-size: 11px;

    letter-spacing: 2px;

    padding-top: 3px;
}

.mln-detail-item strong {
    display: block;

    color: #111;

    font-size: 13px;

    letter-spacing: 1.5px;

    margin-bottom: 7px;
}

.mln-detail-item p {
    margin: 0;

    color: #888;

    font-size: 13px;

    line-height: 1.6;
}

.mln-detail-item:hover {
    background: rgba(222,93,0,.035);

    padding-left: 50px;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.mln-assurance-footer {
    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 25px;

    margin-top: 55px;
}

.mln-assurance-footer > span {
    height: 1px;

    background: #ddd;
}

.mln-assurance-footer p {
    margin: 0;

    color: #777;

    font-size: 12px;

    letter-spacing: 2px;

    text-transform: uppercase;

    white-space: nowrap;
}

.mln-assurance-footer i {
    color: #c38a53;

    margin-right: 8px;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes mlnRingPulse {

    0% {
        transform: scale(.92) rotate(0deg);
        opacity: .5;
    }

    50% {
        transform: scale(1.03) rotate(8deg);
        opacity: 1;
    }

    100% {
        transform: scale(.92) rotate(0deg);
        opacity: .5;
    }

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.mln-assurance-header,
.mln-assurance-stage,
.mln-assurance-footer {
    opacity: 0;
    transform: translateY(45px);

    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(.16,1,.3,1);
}

.mln-assurance.mln-is-visible
.mln-assurance-header {

    opacity: 1;
    transform: translateY(0);

}

.mln-assurance.mln-is-visible
.mln-assurance-stage {

    opacity: 1;
    transform: translateY(0);

    transition-delay: .15s;
}

.mln-assurance.mln-is-visible
.mln-assurance-footer {

    opacity: 1;
    transform: translateY(0);

    transition-delay: .3s;
}


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

@media (max-width: 1100px) {

    .mln-assurance-stage {

        grid-template-columns:
            70px
            1fr
            260px;

    }

    .mln-assurance-details {

        grid-column: 2 / 4;

        display: grid;

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

        border-top: 1px solid #ddd;

    }

    .mln-assurance-symbol {

        border-right: none;

    }

    .mln-detail-item {

        padding: 25px;

    }

}


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

@media (max-width: 700px) {

    .mln-assurance {

        padding: 90px 0 70px;

    }

    .mln-assurance-inner {

        width: calc(100% - 40px);

    }

    .mln-assurance-header {

        margin-bottom: 50px;

    }

    .mln-assurance-header h2 {

        font-size: 43px;

        letter-spacing: -2px;

    }

    .mln-assurance-header p {

        font-size: 14px;

    }

    .mln-assurance-stage {

        display: flex;

        flex-direction: column;

        min-height: auto;

    }

    .mln-assurance-index {

        min-height: 70px;

        flex-direction: row;

        justify-content: flex-start;

        padding: 0 25px;

        border-right: none;

        border-bottom: 1px solid #ddd;

    }

    .mln-index-line {

        width: 35px;
        height: 1px;

    }

    .mln-index-label {

        writing-mode: initial;

    }

    .mln-assurance-feature {

        padding: 45px 30px;

        min-height: 350px;

        border-right: none;

        border-bottom: 1px solid #ddd;

    }

    .mln-assurance-feature h3 {

        font-size: 48px;

    }

    .mln-feature-arrow {

        right: 25px;
        bottom: 25px;

    }

    .mln-assurance-symbol {

        min-height: 350px;

        border-right: none;

        border-bottom: 1px solid #ddd;

    }

    .mln-symbol-ring {

        width: 240px;
        height: 240px;

    }

    .mln-assurance-details {

        display: block;

    }

    .mln-detail-item {

        padding: 25px 20px;

    }

    .mln-detail-item:hover {

        padding-left: 30px;

    }

    .mln-assurance-footer {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .mln-assurance-footer > span {

        display: none;

    }

    .mln-assurance-footer p {

        white-space: normal;

        line-height: 1.7;

    }

}

/* =========================================================
   MERLIONN — LEGACY & TRUST VISUAL
   Completely isolated from old map styles
========================================================= */

.merlionn-legacy-visual {

    position: relative;

    width: 100%;
    min-height: 620px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(222,93,0,.08),
            transparent 42%
        );

    isolation: isolate;

}


/* =========================================================
   ARCHITECTURAL GRID
========================================================= */

.merlionn-legacy-visual .legacy-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(0,0,0,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.045) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    opacity: .45;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );

    z-index: 0;

}


/* =========================================================
   HUGE WATERMARK
========================================================= */

.merlionn-legacy-visual .legacy-watermark {

    position: absolute;

    right: -30px;
    bottom: -80px;

    font-family: inherit;

    font-size: 420px;

    font-weight: 800;

    line-height: .8;

    letter-spacing: -35px;

    color: transparent;

    -webkit-text-stroke: 1px rgba(222,93,0,.10);

    user-select: none;

    z-index: 0;

}


/* =========================================================
   SHIELD AREA
========================================================= */

.merlionn-legacy-visual .legacy-shield-wrap {

    position: absolute;

    left: 50%;
    top: 48%;

    transform: translate(-50%, -50%);

    width: 360px;
    height: 450px;

    display: flex;

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

    z-index: 5;

}


/* =========================================================
   GLOW
========================================================= */

.merlionn-legacy-visual .legacy-shield-glow {

    position: absolute;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(222,93,0,.20),
            rgba(222,93,0,.07) 35%,
            transparent 70%
        );

    filter: blur(25px);

    animation: legacyGlow 5s ease-in-out infinite;

}


/* =========================================================
   MAIN SHIELD
========================================================= */

.merlionn-legacy-visual .legacy-shield {

    position: relative;

    width: 285px;
    height: 355px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(248,244,237,.95)
        );

    clip-path: polygon(
        50% 0%,
        91% 18%,
        86% 65%,
        72% 84%,
        50% 100%,
        28% 84%,
        14% 65%,
        9% 18%
    );

    display: flex;

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

    box-shadow:
        0 35px 80px rgba(0,0,0,.12);

}


/* =========================================================
   SHIELD GOLD BORDER
========================================================= */

.merlionn-legacy-visual .legacy-shield::before {

    content: "";

    position: absolute;

    inset: 5px;

    background:
        linear-gradient(
            145deg,
            #dca85c,
            #8f6425,
            #f0c778,
            #a8752c
        );

    clip-path: inherit;

    z-index: -1;

}


/* Inner shield */

.merlionn-legacy-visual .legacy-shield-inner {

    position: absolute;

    inset: 10px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #0d0d0d
        );

    clip-path: inherit;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 40px 25px;

}


/* =========================================================
   LOGO
========================================================= */

.merlionn-legacy-visual .legacy-shield-logo img {

    width: 92px;

    filter:
        brightness(0)
        saturate(100%)
        invert(70%)
        sepia(40%)
        saturate(700%)
        hue-rotate(350deg);

    opacity: .95;

}


/* =========================================================
   SHIELD LINE
========================================================= */

.merlionn-legacy-visual .legacy-shield-line {

    width: 55px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c38a53,
            transparent
        );

    margin: 14px 0 12px;

}


/* =========================================================
   30+
========================================================= */

.merlionn-legacy-visual .legacy-number {

    font-size: 88px;

    line-height: .9;

    font-weight: 800;

    letter-spacing: -5px;

    color: #fff;

    text-shadow:
        0 0 35px rgba(222,93,0,.18);

}


.merlionn-legacy-visual .legacy-number span {

    color: #c38a53;

    font-size: 45px;

    vertical-align: top;

    margin-left: 3px;

}


/* =========================================================
   YEARS
========================================================= */

.merlionn-legacy-visual .legacy-years {

    margin-top: 10px;

    font-size: 13px;

    letter-spacing: 7px;

    color: #c38a53;

    font-weight: 600;

}


/* =========================================================
   EXPERIENCE
========================================================= */

.merlionn-legacy-visual .legacy-experience {

    margin-top: 12px;

    color: rgba(255,255,255,.58);

    font-size: 10px;

    line-height: 1.8;

    letter-spacing: 3px;

}


/* =========================================================
   FLOATING INFO
========================================================= */

.merlionn-legacy-visual .legacy-info {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 14px;

    z-index: 10;

}


/* Top */

.merlionn-legacy-visual .legacy-info-top {

    top: 75px;

    right: 35px;

}


/* Bottom */

.merlionn-legacy-visual .legacy-info-bottom {

    bottom: 70px;

    left: 25px;

}


/* Number */

.merlionn-legacy-visual .legacy-info-number {

    color: #c38a53;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

}


/* Info text */

.merlionn-legacy-visual .legacy-info strong {

    display: block;

    font-size: 11px;

    letter-spacing: 2px;

    color: #222;

}


.merlionn-legacy-visual .legacy-info small {

    display: block;

    margin-top: 5px;

    color: #888;

    font-size: 10px;

}


/* =========================================================
   SIDE TEXT
========================================================= */

.merlionn-legacy-visual .legacy-side-text {

    position: absolute;

    right: -55px;

    top: 50%;

    transform:
        translateY(-50%)
        rotate(90deg);

    font-size: 9px;

    letter-spacing: 6px;

    color: rgba(0,0,0,.35);

    white-space: nowrap;

    z-index: 4;

}


/* =========================================================
   ARCHITECTURAL CORNERS
========================================================= */

.merlionn-legacy-visual .legacy-corner {

    position: absolute;

    width: 80px;
    height: 80px;

    border-color: rgba(222,93,0,.45);

    z-index: 3;

}


.merlionn-legacy-visual .legacy-corner-one {

    top: 115px;
    left: 20px;

    border-top: 1px solid;
    border-left: 1px solid;

}


.merlionn-legacy-visual .legacy-corner-two {

    right: 20px;
    bottom: 115px;

    border-right: 1px solid;
    border-bottom: 1px solid;

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes legacyGlow {

    0%,
    100% {

        transform: scale(.92);

        opacity: .65;

    }

    50% {

        transform: scale(1.08);

        opacity: 1;

    }

}


/* Shield reveal */

.merlionn-legacy-visual .legacy-shield {

    animation:
        legacyShieldReveal 1.4s
        cubic-bezier(.16,1,.3,1)
        both;

}


@keyframes legacyShieldReveal {

    from {

        opacity: 0;

        transform:
            translateY(45px)
            scale(.88);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* Floating information */

.merlionn-legacy-visual .legacy-info {

    animation:
        legacyInfoReveal 1.2s
        ease both;

}


@keyframes legacyInfoReveal {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   HOVER
========================================================= */

.merlionn-legacy-visual .legacy-shield {

    transition:
        transform .6s cubic-bezier(.16,1,.3,1),
        box-shadow .6s ease;

}


.merlionn-legacy-visual .legacy-shield:hover {

    transform:
        translateY(-8px)
        scale(1.025);

    box-shadow:
        0 45px 90px rgba(0,0,0,.18);

}


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

@media(max-width:992px) {

    .merlionn-legacy-visual {

        min-height: 550px;

        margin-top: 30px;

    }

    .merlionn-legacy-visual .legacy-shield {

        width: 245px;
        height: 310px;

    }

    .merlionn-legacy-visual .legacy-shield-wrap {

        width: 320px;
        height: 400px;

    }

    .merlionn-legacy-visual .legacy-number {

        font-size: 72px;

    }

    .merlionn-legacy-visual .legacy-watermark {

        font-size: 320px;

    }

}


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

@media(max-width:768px) {

    .merlionn-legacy-visual {

        min-height: 500px;

    }

    .merlionn-legacy-visual .legacy-shield-wrap {

        top: 50%;

        width: 280px;
        height: 350px;

    }

    .merlionn-legacy-visual .legacy-shield {

        width: 215px;
        height: 275px;

    }

    .merlionn-legacy-visual .legacy-shield-logo img {

        width: 65px;

    }

    .merlionn-legacy-visual .legacy-number {

        font-size: 62px;

    }

    .merlionn-legacy-visual .legacy-number span {

        font-size: 32px;

    }

    .merlionn-legacy-visual .legacy-years {

        font-size: 10px;

        letter-spacing: 5px;

    }

    .merlionn-legacy-visual .legacy-info-top {

        top: 30px;

        right: 15px;

    }

    .merlionn-legacy-visual .legacy-info-bottom {

        bottom: 30px;

        left: 15px;

    }

    .merlionn-legacy-visual .legacy-info strong {

        font-size: 9px;

    }

    .merlionn-legacy-visual .legacy-side-text {

        display: none;

    }

    .merlionn-legacy-visual .legacy-watermark {

        font-size: 240px;

        right: -20px;

    }

}

/* =====================================================
                BUILDING BACK TO TOP
===================================================== */

.building-back-top {

    position: fixed;

    right: 28px;
    bottom: 28px;

    width: 52px;
    height: 110px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    text-decoration: none;

    z-index: 9998;

}


/* Building Arrow */

.building-arrow {

    width: 46px;
    height: 46px;

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

    border: 1px solid rgba(195, 138, 83, .7);

    background: rgba(17, 17, 17, .92);

    color: #c38a53;

    transition: all .35s ease;

}


.building-arrow i {

    font-size: 16px;

    animation: buildingArrowUp 1.8s ease-in-out infinite;

}


/* Vertical Building Line */

.building-arrow::before {

    content: "";

    position: absolute;

    bottom: 46px;

    width: 1px;
    height: 58px;

    background: linear-gradient(
        to top,
        #c38a53,
        transparent
    );

}


/* Text */

.building-arrow-text {

    position: absolute;

    bottom: 52px;
    right: 62px;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    color: rgba(255,255,255,.65);

    font-size: 9px;

    letter-spacing: .25em;

    text-transform: uppercase;

    white-space: nowrap;

}


/* Hover */

.building-back-top:hover .building-arrow {

    background: #c38a53;

    border-color: #c38a53;

    color: #fff;

    transform: translateY(-5px);

}


/* Arrow Animation */

@keyframes buildingArrowUp {

    0%,
    100% {

        transform: translateY(4px);

        opacity: .6;

    }

    50% {

        transform: translateY(-5px);

        opacity: 1;

    }

}


/* Mobile */

@media (max-width: 600px) {

    .building-back-top {

        right: 15px;
        bottom: 18px;

        width: 42px;
        height: 90px;

    }


    .building-arrow {

        width: 40px;
        height: 40px;

    }


    .building-arrow::before {

        bottom: 40px;

        height: 48px;

    }


    .building-arrow-text {

        display: none;

    }

}

/*====================================================
            LUXURY ENQUIRY POPUP
====================================================*/

.luxury-popup {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .5s ease,
        visibility .5s ease;

}


/*====================================================
                    ACTIVE
====================================================*/

.luxury-popup.active {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}


/*====================================================
                    BACKDROP
====================================================*/

.luxury-popup-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(245, 241, 234, .88);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

}


/*====================================================
                    MAIN BOX
====================================================*/

.luxury-popup-box {

    position: relative;

    width: min(1050px, 100%);

    min-height: 610px;

    display: grid;

    grid-template-columns: .92fr 1.08fr;

    background:
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #f8f3eb 100%
        );

    border: 1px solid rgba(190, 145, 78, .35);

    box-shadow:
        0 40px 100px rgba(45, 35, 20, .22),
        0 0 0 1px rgba(255,255,255,.8) inset;

    overflow: hidden;

    transform:
        translateY(35px)
        scale(.96);

    opacity: 0;

    transition:
        transform .65s cubic-bezier(.2,.8,.2,1),
        opacity .5s ease;

}


/* Active Animation */

.luxury-popup.active .luxury-popup-box {

    transform:
        translateY(0)
        scale(1);

    opacity: 1;

}


/*====================================================
                DECORATIVE LINES
====================================================*/

.popup-line {

    position: absolute;

    pointer-events: none;

    z-index: 5;

}


.popup-line-top {

    top: 16px;

    left: 16px;

    width: 90px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #b88942,
            transparent
        );

}


.popup-line-bottom {

    bottom: 16px;

    right: 16px;

    width: 90px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b88942
        );

}


/*====================================================
                    CLOSE
====================================================*/

.luxury-popup-close {

    position: absolute;

    top: 20px;

    right: 20px;

    width: 42px;

    height: 42px;

    border: 1px solid rgba(50,50,50,.18);

    background: rgba(255,255,255,.7);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 20;

    transition: .35s ease;

}


.luxury-popup-close span {

    position: absolute;

    width: 17px;

    height: 1px;

    background: #222;

    transition: .3s ease;

}


.luxury-popup-close span:first-child {

    transform: rotate(45deg);

}


.luxury-popup-close span:last-child {

    transform: rotate(-45deg);

}


.luxury-popup-close:hover {

    background: #c38a53;

    border-color: #c38a53;

    transform: rotate(90deg);

}


.luxury-popup-close:hover span {

    background: #fff;

}


/*====================================================
                LEFT INTRO PANEL
====================================================*/

.luxury-popup-intro {

    position: relative;

    padding: 65px 55px;

    background:
        linear-gradient(
            145deg,
            #fbf8f2,
            #eee7da
        );

    border-right:
        1px solid rgba(190,145,78,.22);

    overflow: hidden;

}


/* Architectural Glow */

.luxury-popup-intro::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    right: -230px;

    bottom: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(195,138,83,.18),
            transparent 68%
        );

}


/* Architectural Circle */

.luxury-popup-intro::after {

    content: "";

    position: absolute;

    width: 310px;

    height: 310px;

    border: 1px solid rgba(190,145,78,.18);

    border-radius: 50%;

    right: -150px;

    top: 60px;

}


/*====================================================
                    LOGO
====================================================*/

.popup-brand {

    position: relative;

    z-index: 2;

    margin-bottom: 25px;

}


.popup-brand img {

    width: 210px;

    height: auto;

    display: block;

}


/*====================================================
                INTRO LINE
====================================================*/

.popup-intro-line {

    width: 55px;

    height: 2px;

    background: #c38a53;

    margin-bottom: 25px;

}


/*====================================================
                    EYEBROW
====================================================*/

.popup-eyebrow {

    position: relative;

    z-index: 2;

    display: block;

    color: #a87538;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .2em;

    margin-bottom: 18px;

}


/*====================================================
                    HEADING
====================================================*/

.luxury-popup-intro h2 {

    position: relative;

    z-index: 2;

    max-width: 430px;

    margin: 0 0 20px;

    color: #171717;

    font-family: inherit;

    font-size: clamp(34px, 4vw, 48px);

    line-height: 1.08;

    font-weight: 500;

    letter-spacing: -.03em;

}


.luxury-popup-intro h2 span {

    display: block;

    color: #b27b3e;

    font-style: italic;

    font-weight: 400;

}


/*====================================================
                    DESCRIPTION
====================================================*/

.luxury-popup-intro > p {

    position: relative;

    z-index: 2;

    max-width: 410px;

    color: #666;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 32px;

}


/*====================================================
                    HIGHLIGHTS
====================================================*/

.popup-highlights {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 17px;

}


.popup-highlight {

    display: flex;

    align-items: center;

    gap: 14px;

}


.popup-highlight-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #b27b3e;

    border-left: 1px solid #b27b3e;

    border-bottom: 1px solid rgba(178,123,62,.35);

    font-size: 14px;

}


.popup-highlight strong {

    display: block;

    color: #252525;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 3px;

}


.popup-highlight small {

    display: block;

    color: #858585;

    font-size: 11px;

}


/*====================================================
                    ESTABLISHED
====================================================*/

.popup-est {

    position: absolute;

    bottom: 30px;

    left: 55px;

    z-index: 2;

    color: #9b9b9b;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .17em;

}


.popup-est span {

    margin: 0 8px;

    color: #c38a53;

}


/*====================================================
                    FORM PANEL
====================================================*/

.luxury-popup-form {

    position: relative;

    padding: 68px 65px;

    background: #fff;

}


/*====================================================
                    FORM HEADING
====================================================*/

.form-overline {

    display: block;

    color: #b27b3e;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .2em;

    margin-bottom: 14px;

}


.luxury-popup-form h3 {

    margin: 0 0 12px;

    color: #181818;

    font-size: 34px;

    font-weight: 500;

    letter-spacing: -.02em;

}


.luxury-popup-form h3 span {

    color: #b27b3e;

    font-style: italic;

}


.popup-form-description {

    max-width: 430px;

    margin-bottom: 30px;

    color: #777;

    font-size: 13px;

    line-height: 1.7;

}


/*====================================================
                    INPUTS
====================================================*/

.luxury-input {

    position: relative;

    display: flex;

    align-items: center;

    height: 57px;

    margin-bottom: 15px;

    border-bottom: 1px solid #d7d1c8;

    transition: .35s ease;

}


.luxury-input::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -1px;

    width: 0;

    height: 2px;

    background: #c38a53;

    transition: width .4s ease;

}


.luxury-input:focus-within::after {

    width: 100%;

}


.luxury-input i {

    width: 35px;

    color: #b27b3e;

    font-size: 14px;

}


.luxury-input input,
.luxury-input select {

    width: 100%;

    height: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: #222;

    font-family: inherit;

    font-size: 14px;

}


.luxury-input input::placeholder {

    color: #999;

}


.luxury-input select {

    cursor: pointer;

}


.luxury-input select:invalid {

    color: #999;

}


/*====================================================
                    CAPTCHA
====================================================*/

.popup-captcha {

    margin: 22px 0;

    min-height: 78px;

}


/*====================================================
                    SUBMIT
====================================================*/

.popup-submit {

    position: relative;

    width: 100%;

    min-height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    border: none;

    background:
        linear-gradient(
            100deg,
            #a87538,
            #d0a15f
        );

    color: #fff;

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .04em;

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.popup-submit::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 70%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.3),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .7s ease;

}


.popup-submit:hover::before {

    left: 130%;

}


.popup-submit:hover {

    transform: translateY(-2px);

    box-shadow:
        0 15px 35px rgba(174,125,61,.25);

}


.popup-submit i {

    transition: transform .3s ease;

}


.popup-submit:hover i {

    transform: translateX(5px);

}


/*====================================================
                    SECURITY NOTE
====================================================*/

.popup-form-note {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 15px;

    color: #999;

    font-size: 10px;

}


.popup-form-note i {

    color: #b27b3e;

}


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

@media(max-width:850px) {

    .luxury-popup-box {

        grid-template-columns: 1fr;

        max-width: 550px;

        max-height: 92vh;

        overflow-y: auto;

    }


    .luxury-popup-intro {

        padding: 40px 35px 35px;

        min-height: auto;

        border-right: none;

        border-bottom:
            1px solid rgba(190,145,78,.22);

    }


    .popup-brand img {

        width: 170px;

    }


    .luxury-popup-intro h2 {

        font-size: 34px;

    }


    .popup-highlights {

        display: grid;

        grid-template-columns: 1fr 1fr;

    }


    .popup-est {

        position: relative;

        left: auto;

        bottom: auto;

        margin-top: 25px;

    }


    .luxury-popup-form {

        padding: 40px 35px 45px;

    }

}


@media(max-width:550px) {

    .luxury-popup {

        padding: 12px;

    }


    .luxury-popup-box {

        max-height: 96vh;

    }


    .luxury-popup-intro {

        padding: 35px 25px 30px;

    }


    .luxury-popup-form {

        padding: 35px 25px 35px;

    }


    .luxury-popup-intro h2 {

        font-size: 30px;

    }


    .luxury-popup-form h3 {

        font-size: 28px;

    }


    .popup-highlights {

        grid-template-columns: 1fr;

    }


    .luxury-popup-close {

        top: 12px;

        right: 12px;

    }

}


@media (max-width: 768px) {
.luxury-popup-intro{display:none;}
    .popup-left {
        display: none !important;
    }
	.luxury-popup.active .luxury-popup-box{border: 2px solid #ad7b3a;
  border-radius: 10px;}

    .popup-right {
        width: 100%;
        max-width: 100%;
        flex: 1;
    }

}