/* ==========================================================================

   SQUAREA Global Luxury Real Estate - About Us Page Stylesheet

   ========================================================================== */



/* Theme Variables (Warm Charcoal Gray & Deep velvet Black) */

:root {

    --about-accent: #9A805E;

    --about-bg: #FAF9F6;

    --about-panel-bg: #FFFFFF;

    --about-panel-border: rgba(154, 128, 94, 0.15);

    --about-text-muted: #4A4A4A;

    --about-transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



/* Page Background Setup */

body.about-page-theme {

    background-color: var(--about-bg) !important;

}



/* remove section */

.milestone-section{

    display: none;

}

/* 1. Immersive Full-Background Hero Styling */

.about-hero-banner {

    position: relative;

    width: 100%;

    overflow: hidden;

    background-color: #EAEAEA;

    padding-top: 190px; /* Generous space for header */

    padding-bottom: 140px; /* Generous space for stats cards & marquee */

}



.about-hero-bg {

    position: absolute;

    top: -1px;

    left: 0;

    width: 100%;

    height: calc(100% + 2px);

    z-index: 1;

}



.about-hero-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.35;

    will-change: transform;

    transform: scale(1.05); /* Animated zoom start */

}



.about-hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(15, 15, 15, 0.1);

    z-index: 2;

}



.about-hero-banner .container {

    position: relative;

    z-index: 3;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.about-hero-content {

    text-align: center;

    max-width: 850px;

    margin-bottom: 50px;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.about-hero-subtitle {

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: var(--about-bg);

    margin-bottom: 20px;

    display: inline-block;

}



.about-hero-title {

    font-family: var(--font-heading);

    font-size: 4.5rem;

    font-weight: 300;

    line-height: 1.05;

    letter-spacing: -2px;

    color: var(--white);

    margin: 0;

}



.about-hero-lead {

    font-family: var(--font-body);

    font-size: 1.25rem;

    font-weight: 300;

    line-height: 1.75;

    color: rgba(255, 255, 255, 0.8);

    margin-top: 25px;

    max-width: 650px;

}



/* 1.7. Infinite Marquee Ticker */

.hero-marquee-ticker {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    background: var(--charcoal-black);

    border-top: 1px solid rgba(31, 31, 31, 0.05);

    border-bottom: 1px solid rgba(31, 31, 31, 0.05);

    padding: 18px 0;

    overflow: hidden;

    z-index: 5;

}



.marquee-track {

    display: flex;

    width: max-content;

    animation: marquee-loop 35s linear infinite;

}



.marquee-track span {

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 3px;

    color: var(--soft-grey);

    white-space: nowrap;

    padding-right: 40px;

    display: inline-block;

}



@keyframes marquee-loop {

    0% {

        transform: translate3d(0, 0, 0);

    }

    100% {

        transform: translate3d(-50%, 0, 0);

    }

}



.inner-hero-subtitle {

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: var(--about-bg);

    display: inline-block;

    margin-bottom: 20px;

    position: relative;

    padding-left: 25px;

}



.inner-hero-subtitle::before {

    content: '';

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 12px;

    height: 1px;

    background-color: var(--about-accent);

}



.inner-hero-title {

    font-family: var(--font-heading);

    font-size: 6.5rem;

    font-weight: 300;

    line-height: 1.05;

    letter-spacing: -2px;

    color: var(--white);

    margin: 0;

}



/* 1.5. Glassmorphic Stats Row */

.hero-stats-row {

    display: grid;

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

    gap: 30px;

    margin-top: 80px;

    width: 100%;

}



.hero-stat-card {

    background: rgba(10, 10, 10, 0.45);

    border: 1px solid var(--about-panel-border);

    backdrop-filter: blur(12px);

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

    padding: 35px 40px;

    border-radius: 12px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    transition: var(--about-transition);

}



.hero-stat-card:hover {

    border-color: rgba(214, 198, 174, 0.25);

    background: rgba(10, 10, 10, 0.65);

    transform: translateY(-5px);

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

}



.hero-stat-num {

    font-family: var(--font-heading);

    font-size: 2.6rem;

    font-weight: 400;

    color: var(--white);

    line-height: 1;

}



.hero-stat-lbl {

    font-family: var(--font-body);

    font-size: 0.85rem;

    color: rgba(255, 255, 255, 0.85);

    letter-spacing: 0.5px;

    line-height: 1.4;

}



/* 2. Immersive Split Intro Section */

.intro-statement-section {

    position: relative;

}



/* .dark-section{

    padding: 50px 0;

} */



.intro-watermark {

    position: absolute;

    font-family: var(--font-heading);

    font-size: 13rem;

    font-weight: 900;

    color: rgba(255, 255, 255, 0.015);

    top: 50%;

    left: 50%;

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

    pointer-events: none;

    letter-spacing: 15px;

    z-index: 1;

    user-select: none;

}



.about-intro-split-grid {

    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: 80px;

    align-items: flex-start;

    position: relative;

    z-index: 2;

}



.about-intro-left-col {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.intro-index {

    font-family: var(--font-body);

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: var(--about-accent);

}



.intro-bold-heading {

    font-family: var(--font-heading);

    font-size: 2.2rem;

    font-weight: 300;

    line-height: 1.3;

    color: var(--off-white);

    margin: 0;

}



.about-intro-right-col {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.intro-highlight-text {

    font-family: var(--font-body);

    font-size: 1.15rem;

    font-weight: 400;

    line-height: 1.7;

    color: var(--off-white);

    margin: 0;

    position: relative;

    padding-left: 25px;

    border-left: 2px solid var(--about-accent);

}



.intro-desc-text {

    font-family: var(--font-body);

    font-size: 0.95rem;

    font-weight: 300;

    line-height: 1.8;

    color: var(--about-text-muted);

    margin: 0;

    padding-left: 27px;

}



/* 3. Asymmetric Overlapping Perspective Section */

.perspective-section {

    padding: 40px 0;

}



.perspective-overlap-grid {

    display: grid;

    grid-template-columns: 0.8fr 1.2fr; /* Narrower image column, wider content column */

    gap: 60px;

    align-items: center;

    position: relative;

}



.perspective-image-side {

    position: relative;

    width: 100%;

    max-width: 300px; /* Smaller, more elegant image constraint */

    margin: 0 auto;

}



.image-border-offset {

    position: absolute;

    top: 15px;

    left: -15px;

    width: 100%;

    height: 100%;

    border: 1px solid var(--about-accent);

    border-radius: 12px;

    opacity: 0.15;

    z-index: 1;

    pointer-events: none;

    transition: var(--about-transition);

}



.perspective-image-container {

    position: relative;

    border-radius: 12px;

    overflow: hidden;

    aspect-ratio: 4/5;

    border: 1px solid var(--about-panel-border);

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);

    z-index: 2;

    background: var(--about-panel-bg);

}



.perspective-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center 25%;

    transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.perspective-image-side:hover .perspective-image {

    transform: scale(1.06);

}



.perspective-image-side:hover .image-border-offset {

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

    opacity: 0.25;

}



.advisor-floating-badge {

    position: absolute;

    bottom: 20px;

    left: 20px;

    right: 20px;

    background: rgba(10, 10, 10, 0.7);

    border: 1px solid rgba(31, 31, 31, 0.08);

    backdrop-filter: blur(15px);

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

    border-radius: 8px;

    padding: 10px 14px;

    display: flex;

    flex-direction: column;

    gap: 2px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);

    z-index: 3;

    transition: var(--about-transition);

}



.perspective-image-side:hover .advisor-floating-badge {

    background: rgba(10, 10, 10, 0.9);

    border-color: rgba(214, 198, 174, 0.2);

}



.badge-title {

    font-family: var(--font-heading);

    font-size: 0.95rem;

    font-weight: 300;

    color: var(--about-bg);

    letter-spacing: 0.5px;

}



.badge-subtitle {

    font-family: var(--font-body);

    font-size: 0.65rem;

    color: var(--about-accent);

    text-transform: uppercase;

    letter-spacing: 1.5px;

}



.perspective-content-side {

    position: relative;

    z-index: 3;

}



.perspective-quote-wrapper {

    position: relative;

    margin-top: 12px;

    margin-bottom: 20px;

}



.quote-watermark {

    position: absolute;

    top: -40px;

    left: -30px;

    font-family: var(--font-heading);

    font-size: 6.5rem;

    line-height: 1;

    font-weight: 700;

    color: var(--about-accent);

    opacity: 0.05;

    pointer-events: none;

}



.perspective-title {

    font-family: var(--font-heading);

    font-size: 1.85rem; /* Smaller title font size for compact aesthetic */

    font-weight: 300;

    line-height: 1.25;

    color: var(--off-white);

    margin-bottom: 15px;

}



.perspective-title span {

    font-style: italic;

    color: var(--about-accent);

}



.perspective-quote-text {

    font-family: var(--font-body);

    font-size: 0.95rem; /* Compact quote body font size */

    font-weight: 300;

    line-height: 1.6;

    color: var(--off-white);

    margin: 0;

    border-left: 2px solid var(--about-accent);

    padding-left: 18px;

}



.perspective-description {

    font-family: var(--font-body);

    font-size: 0.85rem; /* Smaller description text */

    font-weight: 300;

    line-height: 1.65;

    color: var(--about-text-muted);

    margin-bottom: 25px;

    padding-left: 20px;

}



.perspective-btn {

    margin-left: 20px;

    padding: 12px 24px;

    font-size: 0.8rem;

}



/* 4. Core Pillars / Philosophies */

.philosophies-section{

    padding-block: 60px;

}



.philosophies-grid {

    display: grid;

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

    gap: 30px;

}



.philosophy-card {

    background: #FFFFFF;

    border: 1px solid rgba(0, 0, 0, 0.06);

    border-radius: 12px;

    padding: 40px;

    backdrop-filter: blur(10px);

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

    transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),

                background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),

                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),

                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.philosophy-card:hover {

    border-color: var(--about-accent);

    background: #FFFFFF;

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

    transform: translateY(-8px);

}



.philosophy-num {

    font-family: var(--font-heading);

    font-size: 1.1rem;

    font-style: italic;

    color: var(--about-accent);

    display: block;

    margin-bottom: 25px;

    letter-spacing: 1px;

}



.philosophy-card h3 {

    font-family: var(--font-heading);

    font-size: 1.95rem;

    font-weight: 300;

    color: var(--off-white);

    margin: 0 0 15px 0;

}



.philosophy-card p {

    font-family: var(--font-body);

    font-size: 0.95rem;

    font-weight: 300;

    line-height: 1.7;

    color: var(--about-text-muted);

    margin: 0;

    transition: color 0.4s var(--about-transition);

}



.philosophy-card:hover p {

    color: var(--off-white);

}



/* 5. Horizontal Journey milestones */

.journey-horizontal-container {

    position: relative;

    width: 100%;

    padding: 60px 0 20px 0;

}



.journey-track-line {

    position: absolute;

    top: 73px;

    left: 0;

    right: 0;

    height: 2px;

    background: rgba(31, 31, 31, 0.05);

    z-index: 1;

}



.journey-track-progress {

    position: absolute;

    top: 73px;

    left: 0;

    width: 0%; /* Dynamic fill via GSAP */

    height: 2px;

    background: var(--about-accent);

    z-index: 2;

    transform-origin: left center;

}



.journey-grid {

    display: grid;

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

    gap: 40px;

    position: relative;

    z-index: 3;

}



.journey-card-wrapper {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}



.journey-node-wrapper {

    height: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

}



.journey-node {

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background-color: var(--about-bg);

    border: 3px solid rgba(31, 31, 31, 0.15);

    transition: var(--about-transition);

}



.journey-card-wrapper.active-node .journey-node {

    border-color: var(--about-accent);

    background-color: var(--about-accent);

    box-shadow: 0 0 15px var(--about-accent);

    transform: scale(1.2);

}



.journey-card {

    background: #FFFFFF;

    border: 1px solid rgba(0, 0, 0, 0.06);

    border-radius: 12px;

    padding: 30px 25px;

    backdrop-filter: blur(10px);

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

    width: 100%;

    transition: var(--about-transition);

}



.journey-card-wrapper:hover .journey-card {

    border-color: var(--about-accent);

    background: #FFFFFF;

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

    transform: translateY(-8px);

}



.journey-year {

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 3px;

    color: var(--about-accent);

    display: block;

    margin-bottom: 12px;

    text-transform: uppercase;

}



.journey-card h3 {

    font-family: var(--font-heading);

    font-size: 1.4rem;

    font-weight: 300;

    color: var(--off-white);

    margin: 0 0 12px 0;

    line-height: 1.3;

}



.journey-card p {

    font-family: var(--font-body);

    font-size: 0.85rem;

    font-weight: 300;

    line-height: 1.65;

    color: var(--about-text-muted);

    margin: 0;

    transition: color 0.4s var(--about-transition);

}



.journey-card-wrapper:hover .journey-card p {

    color: var(--off-white);

}



/* 6. Destination Showcase Cards */

.destination-grid-container {

    display: grid;

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

    gap: 30px;

    margin-top: 50px;

}



.destination-grid-card {

    position: relative;

    aspect-ratio: 10/13;

    overflow: hidden;

    border-radius: 12px;

    border: 1px solid var(--about-panel-border);

    display: flex;

    align-items: flex-end;

    text-decoration: none;

    transition: border-color 0.5s var(--about-transition),

                box-shadow 0.5s var(--about-transition),

                transform 0.6s var(--about-transition) !important;

}



.destination-grid-card img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 1;

    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.destination-grid-card::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(360deg, rgba(7, 7, 7, 0.9) 0%, rgba(7, 7, 7, 0.2) 60%, rgba(7, 7, 7, 0.2) 100%);

    z-index: 2;

    transition: background 0.5s var(--about-transition);

}



.destination-grid-card-content {

    position: relative;

    z-index: 3;

    padding: 30px 30px 0px 0px;

    width: 100%;

}



.destination-grid-card-tag {

    font-family: var(--font-body);

    font-size: 0.65rem;

    font-weight: 600;

    letter-spacing: 2px;

    color: var(--about-bg);

    text-transform: uppercase;

    display: block;

    margin-bottom: 10px;

}



.destination-grid-card-title {

    font-family: var(--font-heading);

    font-size: 2.2rem;

    font-weight: 300;

    color: var(--off-white);

    margin: 0 0 15px 0;

}



.destination-grid-card-cta {

    font-family: var(--font-body);

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 1.5px;

    color: rgba(255, 255, 255, 0.8);

    text-transform: uppercase;

    display: flex;

    align-items: center;

    gap: 8px;

    transition: color 0.6s var(--about-transition);

}



.destination-grid-card-cta i {

    font-size: 0.8rem;

    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

}



/* Destination Hover Effects */

.destination-grid-card:hover {

    border-color: rgba(214, 198, 174, 0.25);

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);

    transform: translateY(-8px);

}



.destination-grid-card:hover img {

    transform: scale(1.08);

}



.destination-grid-card:hover .destination-grid-card-cta {

    color: var(--about-accent);

}



.destination-grid-card:hover .destination-grid-card-cta i {

    transform: translateX(6px);

}



/* Custom Cursor Dynamic Hover target class */

.custom-cursor.hover-discover {

    width: 90px !important;

    height: 90px !important;

    background-color: var(--about-accent) !important;

    border-color: var(--about-accent) !important;

    mix-blend-mode: normal !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-shadow: 0 0 35px rgba(214, 198, 174, 0.35);

}



/* Responsive Adaptations */

@media (max-width: 1199px) {

    .hero-stats-row {

        gap: 20px;

    }

    

    .perspective-overlap-grid {

        gap: 50px;

    }

    

    .philosophies-grid {

        gap: 20px;

    }

    

    .philosophy-card {

        padding: 30px;

    }

    

    .destination-grid-container {

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

        gap: 24px;

    }

}



@media (max-width: 991px) {

    .about-hero-title {

        font-size: 4.8rem;

    }

    

    .about-hero-banner {

        min-height: 60vh;

        padding-top: 120px;

        padding-bottom: 60px;

    }

    

    .about-hero-content {

        margin-bottom: 40px;

    }

    

    .hero-stats-row {

        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 50px;

    }

    

    .about-intro-split-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    

    .intro-watermark {

        font-size: 8rem;

        letter-spacing: 8px;

    }

    

    .intro-bold-heading {

        font-size: 2.2rem;

    }

    

    .intro-highlight-text,

    .intro-desc-text {

        padding-left: 20px;

    }

    

    .perspective-overlap-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    

    .image-border-offset {

        top: 15px;

        left: -15px;

    }

    

    .perspective-description,

    .perspective-btn {

        margin-left: 0;

        padding-left: 6px;

    }

    

    .perspective-quote-text {

        padding-left: 20px;

    }

    

    .philosophies-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    

    .philosophy-card {

        padding: 40px;

    }

    

    .journey-horizontal-container {

        padding: 20px 0;

    }

    

    .journey-track-line,

    .journey-track-progress {

        display: none;

    }

    

    .journey-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    

    .journey-card-wrapper {

        flex-direction: row;

        align-items: flex-start;

        text-align: left;

        gap: 20px;

    }

    

    .journey-node-wrapper {

        margin-bottom: 0;

        height: auto;

        padding-top: 25px;

    }

    

    .journey-card {

        padding: 25px;

    }

}



@media (max-width: 767px) {

    .about-hero-banner {

        min-height: auto;

        padding-top: 120px;

        padding-bottom: 70px;

    }

    

    .about-hero-title {

        font-size: 3.5rem;

    }

    

    .about-hero-lead {

        font-size: 1.1rem;

        margin-top: 15px;

    }

    

    .about-hero-content {

        margin-bottom: 30px;

    }

    

    .hero-stat-card {

        padding: 20px 25px;

    }

    

    .hero-stat-num {

        font-size: 2rem;

    }

    

    .intro-watermark {

        font-size: 5rem;

        letter-spacing: 5px;

    }

    

    .intro-bold-heading {

        font-size: 1.8rem;

    }

    

    .perspective-title {

        font-size: 1.5rem;

    }

    

    .perspective-quote-text {

        font-size: 0.88rem;

        padding-left: 15px;

    }

    

    .journey-card h3 {

        font-size: 1.25rem;

    }

    

    .destination-grid-container {

        grid-template-columns: 1fr;

        gap: 30px;

    }

}



/* ---- Small Mobile (≤576px) ---- */

@media (max-width: 576px) {



    /* 1. About Hero Banner */

    .about-hero-title {

        font-size: 2.5rem;

    }



    .about-hero-lead {

        font-size: 0.95rem;

    }



    /* 2. Hero Stat Cards */

    .hero-stat-card {

        padding: 15px 18px;

        border-radius: 8px;

    }



    .hero-stat-num {

        font-size: 1.6rem;

    }



    .hero-stat-lbl {

        font-size: 0.75rem;

    }



    /* 3. Inner Hero Title */

    .inner-hero-title {

        font-size: 2.8rem;

    }



    /* 4. About Intro Split Grid */

    .about-intro-split-grid {

        gap: 25px;

    }



    .intro-bold-heading {

        font-size: 1.5rem;

    }



    .intro-highlight-text {

        font-size: 1rem;

        padding-left: 15px;

    }



    .intro-desc-text {

        font-size: 0.85rem;

        padding-left: 17px;

    }



    /* 5. Perspective Section */

    .perspective-overlap-grid {

        gap: 30px;

    }



    .perspective-image-side {

        max-width: 220px;

    }



    .perspective-title {

        font-size: 1.3rem;

    }



    .perspective-quote-text {

        font-size: 0.82rem;

        padding-left: 12px;

    }



    .perspective-description {

        font-size: 0.8rem;

    }



    /* 6. Philosophy Cards */

    .philosophy-card {

        padding: 25px;

    }



    .philosophy-card h3 {

        font-size: 1.5rem;

    }



    .philosophy-card p {

        font-size: 0.85rem;

    }



    /* 7. Journey Section */

    .journey-grid {

        gap: 20px;

    }



    .journey-card {

        padding: 20px;

    }



    .journey-card h3 {

        font-size: 1.1rem;

    }



    .journey-card p {

        font-size: 0.78rem;

    }



    /* 8. Destination Grid Cards */

    .destination-grid-card {

        aspect-ratio: 10 / 11;

    }



    .destination-grid-card-title {

        font-size: 1.6rem;

    }



    .destination-grid-card-content {

        padding: 20px;

    }



    /* 9. Section Padding */

    .perspective-section {

        padding: 50px 0;

    }



    /* 10. Advisor Floating Badge */

    .badge-title {

        font-size: 0.85rem;

    }



    .badge-subtitle {

        font-size: 0.6rem;

    }

}