:root {
    --header-bg: linear-gradient(90deg, #080808 0%, #363636 100%);
    --header-height: 94px;
    --text-color: #FFFFFF;
    --accent-color: #c5a47e;
}

body {
    font-family: 'Funnel Display', 'Outfit', sans-serif;
    background-color: #000;
}

/* Wider Container */
.container {
    max-width: 1600px;
}

.main-header {
    width: 100%;
    height: var(--header-height);
    background: var(--header-bg);
    position: sticky;
    /* Changed from relative to sticky */
    top: 0;
    /* Stick to top */
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Logo Styling */
.navbar-brand.logo {
    color: var(--accent-color) !important;
    line-height: 0.8;
    transition: transform 0.3s ease;
    padding: 0;
}

.navbar-brand.logo:hover {
    transform: scale(1.02);
}

.logo .meram {
    font-size: 11px;
    letter-spacing: 6px;
    font-weight: 300;
    margin-bottom: 2px;
    text-transform: uppercase;
    padding-left: 2px;
}

.logo .cadde {
    font-size: 42px;
    font-weight: 200;
    letter-spacing: -2px;
    text-transform: lowercase;
}

/* Announcement Bar (Desktop) */
.announcement-bar {
    background: rgba(45, 45, 45, 0.5);
    padding: 10px 28px;
    border-radius: 50px;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    color: #fff;
}

.announcement-bar:hover {
    background: rgba(60, 60, 60, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
}

.announcement-bar .icon {
    color: #ffffff;
}

.announcement-bar .cta {
    text-decoration: underline;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
}

/* Mobile Topbar Styling */
.announcement-bar-mobile {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    width: 100%;
}

.announcement-bar-mobile .ann-text {
    font-size: 15px;
    font-weight: 500;
}

.announcement-bar-mobile .cta {
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-transform: uppercase;
}

.announcement-bar-mobile .icon {
    color: #fff;
}

/* Navigation Links */
.navbar-nav .nav-link {
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
    opacity: 1;
    color: var(--accent-color) !important;
}



/* Mobile Toggle Styling */
.navbar-toggler {
    background-image: none !important;
}

/* Hero Section Styling */
.hero-section {
    height: calc(100vh - var(--header-height));
    max-height: calc(100vh - var(--header-height));
    overflow: hidden;
    position: relative;
}

.hero-section>.container {
    position: relative;
    z-index: 10;
    pointer-events: none;
}

.hero-left {
    pointer-events: auto;
}

.hero-img-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
}

.hero-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: right center;
}

/* Signage Events Wrapper - Grid Layout */
.signage-events-wrapper {
    position: absolute;
    top: -2%;
    right: 5%;
    display: grid;
    grid-template-columns: 550px 250px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "signage signage"
        "events events"
        "weather vale";
    justify-content: end;
    z-index: 2;
    transform: scale(0.85);
    transform-origin: top right;
    pointer-events: auto;
}

/* Animations */
@keyframes dropDownBounce {
    0% {
        transform: translateY(-200px);
        opacity: 0;
    }

    60% {
        transform: translateY(20px);
        opacity: 1;
    }

    80% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUpFade {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.hero-signage {
    grid-area: signage;
    width: auto;
    max-width: 80%;
    opacity: 0;
    justify-self: end;
    animation: dropDownBounce 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-events-widget {
    grid-area: events;
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(62px);
    -webkit-backdrop-filter: blur(62px);
    padding: 30px 60px;
    border-radius: 0 0 57px 0;
    margin-top: 0;

    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    animation: slideUpFade 0.8s ease-out 0.4s forwards;

}

.widget-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #fff;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.event-name {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
    color: #fff;
}

.event-date {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 3px;
    color: #fff;
}

/* Widgets */
.widget-weather {
    grid-area: weather;
    width: 100%;
    height: 219px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: slideUpFade 0.8s ease-out 0.6s forwards;
}

.weather-bg-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.weather-content {
    position: relative;
    z-index: 2;
    padding: 40px;
}

.widget-weather .weather-icon {
    font-size: 32px;
    color: var(--accent-color);
    margin-bottom: 15px;
    display: block;
}

.widget-weather h4 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.widget-weather p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

.widget-weather strong {
    color: #fff;
}

.text-accent {
    color: var(--accent-color);
}

.widget-vale {
    grid-area: vale;
    width: 100%;
    height: 219px;
    background: #fff;
    padding: 30px;
    border-radius: 0 57px 0 0;
    /* Curve on top-right as shown in image */
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    animation: slideUpFade 0.8s ease-out 0.6s forwards;
}

.vale-icons-wrap {
    display: flex;
    gap: 15px;
    margin-bottom: 5px;
}

.vale-icons-wrap .material-symbols-outlined {
    font-size: 42px;
    color: #b5957d;
}

.vale-title-wrap {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}

.vale-title-wrap h4 {
    font-size: 42px;
    font-weight: 400;
    margin: 0;
    line-height: 1;
}

.vale-status {
    font-size: 16px;
    font-weight: 400;
    color: #000;
}

.vale-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25;
    margin: 0 !important;
    color: #000;
}

.hero-title {
    font-size: 10vw;
    font-weight: 800;
    line-height: 0.85;
    margin-bottom: 0;
    color: #fff;
    letter-spacing: -2px;
}

.cadde-text {
    display: flex;
    align-items: center;
    gap: 10px;
}




.hero-subtitle {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 42px;
    font-weight: 400;
    color: var(--accent-color);
    letter-spacing: 15px;
    margin-top: 40px;
    margin-bottom: 60px;
    line-height: 1.2;
}

.hero-subtitle span:nth-child(2) {
    color: #fff;
}

.hero-actions .btn-action {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.hero-actions .btn-action .action-text {
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 2px;
    transition: all 0.3s ease;
}

.hero-actions .btn-action:hover .action-text {
    color: var(--accent-color);
    text-decoration-color: var(--accent-color);
}

.hero-actions .btn-action .material-symbols-outlined {
    color: var(--accent-color);
    font-size: 24px;
}



@media (max-width: 991px) {
    body {
        overflow: auto !important;
    }

    .main-header {
        height: auto;
        padding-top: 0;
        padding-bottom: 0;
    }

    .navbar {
        padding: 15px 0;
    }

    .navbar-collapse {
        margin-top: 20px;
        padding: 25px;
        border-radius: 20px;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(15px);
    }

    .hero-section {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        min-height: 100vh;
        padding-top: 20px;
        /* Reduced from 140px to pull content up */
        padding-bottom: 80px;
    }

    .hero-title {
        font-size: 16vw;
        text-align: center;
        line-height: 0.9;
    }

    .cadde-text {
        justify-content: center;
        margin-top: 10px;
    }

    .hero-subtitle {
        font-size: 24px;
        letter-spacing: 12px;
        align-items: center;
        text-align: center;
        margin-top: 40px;
        margin-bottom: 50px;
        gap: 15px;
    }

    .hero-actions {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center;
        gap: 15px !important;
        flex-wrap: wrap;
    }

    .hero-actions .btn-action {
        font-size: 16px;
    }

    .hero-actions .btn-action:last-child .action-text {
        max-width: 140px;
        white-space: normal;
        display: inline-block;
        line-height: 1.4;
        text-align: left;
        text-underline-offset: 4px;
    }

    .hero-img-wrapper {
        position: relative;
        width: 100%;
        height: auto;
        justify-content: center;
        margin-top: 0;
        order: 2;
    }

    .hero-section>.container {
        order: 1;
        margin-top: 40px;
    }

    .hero-left {
        width: 100%;
        padding: 0 20px;
    }

    .hero-img {
        display: none;
    }

    .signage-events-wrapper {
        position: relative;
        top: 0;
        margin-top: 60px;
        right: 0;
        transform: scale(1);
        width: 100%;
        padding: 0 15px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "signage weather"
            "events vale";
        gap: 15px;
        justify-items: start;
    }

    .hero-signage {
        grid-area: signage;
        width: 100%;
        max-width: 150px;
        /* Reduced max-width to match image */
        justify-self: start;
        margin-bottom: 20px;
        align-self: start;
    }

    .widget-weather {
        grid-area: weather;
        width: 100% !important;
        height: auto !important;
        padding: 0 0 20px 20px;
        /* Left padding to separate from center */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }

    .widget-weather .weather-bg-svg {
        display: none;
    }

    .widget-weather .weather-content {
        padding: 0;
    }

    .widget-weather .weather-icon {
        margin-bottom: 10px;
        font-size: 28px;
    }

    .widget-weather h4 {
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 8px;
    }

    .widget-weather p {
        font-size: 13px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.8);
    }

    .hero-events-widget {
        grid-area: events;
        width: 100%;
        padding: 25px 20px;
        border-radius: 20px;
        background: #080808;
        border: 1px solid rgba(255, 255, 255, 0.1);
        min-height: 350px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* Space out content vertically */
    }

    .widget-title {
        font-size: 12px;
        margin-bottom: 20px;
    }

    .event-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 15px 0;
    }

    .event-name {
        font-size: 16px;
    }

    .event-date {
        font-size: 16px;
        color: var(--accent-color);
    }

    .widget-vale {
        grid-area: vale;
        width: 100% !important;
        height: auto !important;
        min-height: 350px;
        border-radius: 20px !important;
        margin-top: 50px !important;
        /* Push down to offset staggered look if needed, but grid aligns tops. Let's keep it standard first. */
        margin-top: 0 !important;
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* Adjust vale offset to match "staggered" look only if weather is shorter than signage. 
       In the image, Vale starts lower than Events. 
       Events is below Signage. Vale is below Weather. 
       If Signage is shorter than Weather, Events starts higher.
       Wait, in Grid, row 2 starts at the same line.
       To get the staggered look (Masonry), we'd need flex columns.
       But let's stick to Grid for stability. 
       To simulate the "gap" or stagger, we can add margin-top to the Vale widget 
       OR margin-bottom to the Weather widget?
       Actually, in the image, the gap between Signage->Events and Weather->Vale looks distinct.
       Let's add some top margin to the Vale widget relative to the grid row if needed.
       But standard grid is safer. I will stick to standard alignment first.
    */

    .vale-title-wrap h4 {
        font-size: 42px;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .hero-title {
        font-size: 8vw;
    }

    .signage-events-wrapper {
        grid-template-columns: 400px 200px;
    }
}

/* Experience Section */
.experience-section {
    padding: 100px 0;
    position: relative;
    background-color: #fff;
    overflow: hidden;
}

.text-light-gold {
    color: #b5957d;
    /* Darker gold/brown for light background */
    font-weight: 400;
}

.section-title {
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 30px;
}

.section-text p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    /* Dark text for light bg */
    margin-bottom: 20px;
    max-width: 90%;
}

/* Cleaned up Experience Section visual classes */
/* Text Animation Start State */
.experience-section .col-lg-4:first-child {
    opacity: 0;
    transform: translateX(-200px);
    transition: all 1s ease-out;
}

.building-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    /* Occupies roughly the right side */
    object-fit: cover;
    z-index: 0;
    /* Animation Start State */
    opacity: 0;
    transform: translateY(400px);
    /* Slides up from further below */
    transition: all 1.2s ease-out;
}

.women-img {
    width: 100%;
    height: auto;
    position: relative;
    transform: scale(1.15);
    /* Slightly larger */
    z-index: 2;
    /* Ensure above building */
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}

/* Trigger Animations on Scroll */
.experience-section.animated .col-lg-4:first-child {
    opacity: 1;
    transform: translateX(0);
}

.experience-section.animated .building-img {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 991px) {
    .building-img {
        position: relative;
        width: 100%;
        height: auto;
        margin-top: 20px;
    }

    .women-img {
        transform: none;
        margin-bottom: 20px;
    }
}

/* Feature Cards Wrapper */
.services-wrapper {
    background-color: #FFFBF9;
    border-radius: 20px;
    padding: 60px 40px;
}

/* Feature Cards */
/* Feature Cards */
.feature-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    transition: transform 0.3s ease, opacity 1s ease, transform 1s ease;
    /* Extended transition for animation */
    box-shadow: none;
    border: none;
}

.feature-card:hover {
    transform: translateY(-10px);
}

/* Animation Setup */
/* 1st (WC) starts shifted RIGHT (inwards) */
.services-wrapper .col-6:first-child .feature-card {
    opacity: 0;
    transform: translateX(100px);
}

/* 4th (Otopark) starts shifted LEFT (inwards) */
.services-wrapper .col-6:last-child .feature-card {
    opacity: 0;
    transform: translateX(-100px);
}

/* When animated class is added */
.services-wrapper.animated .col-6:first-child .feature-card {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

.services-wrapper.animated .col-6:last-child .feature-card {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
    /* Sync with left one for symmetry, or keep distinct? User said 'yaval yaval' earlier, now 'çoğalıyor'. Symmetric expansion looks best mostly. Let's start with symmetric delay or slight staggered opacity. */
    transition-delay: 0.4s;
}

.card-icon {
    margin-bottom: 20px;
    color: #c5a47e;
    /* Accent color */
}

.card-icon .material-symbols-outlined {
    font-size: 48px;
}

.feature-card h4 {
    color: #000;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.feature-card p {
    color: #666;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

/* Responsive Experience Section */
@media (max-width: 991px) {
    .experience-section {
        padding: 0 0 60px 0;
        /* No top padding */
    }

    .section-title {
        font-size: 36px;
        text-align: center;
    }

    .section-text {
        text-align: center;
    }

    .section-text p {
        margin: 0 auto 20px;
    }

    /* Reset/Adjust animations for mobile to avoid horizontal scroll issues */
    .experience-section .col-lg-4:first-child {
        transform: translateY(30px);
        /* Vertical instead of horizontal for safety */
    }

    .building-img {
        position: relative;
        width: 100%;
        height: auto;
        margin-top: 0;
        /* No top margin */
        margin-bottom: 30px;
        /* Space between building and text */
        z-index: 0;
        transform: translateY(50px);
        /* Smaller animation distance */
    }

    .services-wrapper {
        padding: 40px 20px;
    }

    .feature-card {
        padding: 20px 10px;
    }

    .services-wrapper .col-6:first-child .feature-card,
    .services-wrapper .col-6:last-child .feature-card {
        transform: translateY(30px);
        /* Simple vertical fade up for mobile */
    }

    /* Clean up old classes if any remain */
    .visuals-wrapper,
    .circle-image-mask,
    .women-image-wrap {
        display: none;
    }
}

/* Open Air Section */
.open-air-section {
    background-color: #6EC7C7;
    /* User specified color */
    padding-top: 100px;
    color: #fff;
    position: relative;
}

.open-air-title {
    font-size: 46px;
    line-height: 1.2;
    letter-spacing: 8px;
    /* Wide spacing */
    font-weight: 400;
    text-transform: uppercase;
}

.open-air-text {
    font-size: 20px;
    line-height: 1.6;
}

/* Entertainment Section (Dark) */
.entertainment-section {
    background-color: #2D3035;
    padding-top: 100px;
    color: #fff;
    position: relative;
}

.entertainment-title {
    font-size: 46px;
    line-height: 1.4;
    letter-spacing: 4px;
    /* Wide spacing */
    font-weight: 300;
    text-transform: uppercase;
}

.entertainment-title strong {
    font-weight: 700;
}

/* Reusing general text styles or creating new specific ones? User said 'open-air-title değilde farklı bi ismle'. Let's rename the title class usage in HTML. For CSS, we can reuse or duplicate. Duplication is safer for independence. */

.entertainment-text {
    font-size: 16px;
    line-height: 1.6;
}

.entertainment-text strong {
    font-weight: 700;
}

.entertainment-visual-wrapper {
    position: relative;
    width: 100%;
}

.entertainment-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@media (max-width: 991px) {
    .entertainment-section {
        padding-top: 60px;
    }

    .entertainment-title {
        font-size: 28px;
        letter-spacing: 2px;
        text-align: center;
        margin-bottom: 30px;
    }

    .entertainment-text {
        text-align: center;
        margin: 0 auto;
    }
}

/* Parking Section */
/* Parking Section */
.parking-section {
    padding: 0;
    position: relative;
    /* User: arkaplan koyma */
}

.parking-wrapper {
    position: relative;
    width: 100%;
}

.parking-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.parking-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.parking-title {
    font-size: 46px;
    /* Matched to user request for others */
    line-height: 1.4;
    letter-spacing: 4px;
    font-weight: 300;
    text-transform: uppercase;
    color: #fff;
}

.parking-title span {
    display: inline-block;
    /* Bright blue underline */
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.parking-title strong {
    font-weight: 700;
}

.parking-text {
    font-size: 20px;
    line-height: 1.6;
    color: #fff;
    max-width: 90%;
}

@media (max-width: 991px) {
    .parking-section {
        padding-top: 0;
    }

    .parking-wrapper {
        min-height: 400px;
        /* Ensure height for text on mobile */
    }

    .parking-img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .parking-overlay {
        position: absolute;
        /* Keep it absolute/overlay */
        height: 100%;
        padding: 20px;
        background: rgba(0, 0, 0, 0.3);
        /* Slight dim for readability on mobile just in case */
    }

    .parking-title {
        font-size: 28px;
        letter-spacing: 2px;
        text-align: left;
        /* Align left as per desktop design usually, or center? Reference is left aligned. */
    }

    .parking-text {
        text-align: left;
        font-size: 18px;
        max-width: 70%;
        /* Force line breaks */
    }
}

/* Beauty Section */
.beauty-section {
    padding: 0;
    position: relative;
}

.beauty-wrapper {
    position: relative;
    width: 100%;
}

.beauty-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.beauty-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Align to right */
}

.beauty-title {
    font-size: 46px;
    line-height: 1.4;
    letter-spacing: 4px;
    font-weight: 300;
    text-transform: uppercase;
    color: #8B6D36;
    /* Gold/Brown */
    margin-bottom: 30px;
}

.beauty-title strong {
    font-weight: 700;
}

.beauty-text {
    font-size: 18px;
    line-height: 1.6;
    color: #8B6D36;
    max-width: 90%;
}

.open-air-visual-wrapper {
    position: relative;
    width: 100%;
}

.open-air-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.wellness-circle {
    position: absolute;
    top: 0;
    left: 36%;
    transform: translate(-50%, 40%);
    width: 310px;
    height: 310px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
}

.wellness-circle::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    right: 22px;
    bottom: 22px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    z-index: -1;
}

.wellness-circle .material-symbols-outlined {
    font-size: 32px;
    margin-bottom: 10px;
}

.wellness-circle h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wellness-circle p {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

@media (max-width: 991px) {
    .open-air-section {
        padding-top: 60px;
    }

    .open-air-title {
        font-size: 22px;
        letter-spacing: 4px;
        text-align: center;
        margin-bottom: 30px;
    }

    .open-air-text {
        text-align: center;
        margin: 0 auto;
    }

    .wellness-circle {
        width: 200px;
        height: 200px;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 20px auto 30px;
        /* Center horizontally with vertical spacing */
    }

    .wellness-circle::before {
        top: 14px;
        left: 14px;
        right: 14px;
        bottom: 14px;
    }

    .wellness-circle h4 {
        font-size: 16px;
    }

    .beauty-wrapper {
        min-height: auto;
        display: flex;
        flex-direction: column-reverse;
    }

    .beauty-img {
        position: relative;
        height: 300px;
        width: 100%;
        object-fit: cover;
    }

    .beauty-overlay {
        position: relative;
        height: auto;
        background-color: #FFF4E4;
        padding: 40px 20px;
        align-items: center;
        justify-content: center;
    }

    .beauty-title {
        font-size: 28px;
        letter-spacing: 2px;
        text-align: center;
    }

    .beauty-text {
        text-align: center;
        margin: 0 auto;
        font-size: 16px;
        max-width: 100%;
        color: #8B6D36;
    }



    .yoga-title {
        font-size: 28px;
        letter-spacing: 3px;
        text-align: center;
        margin-bottom: 20px;
    }

    .yoga-text {
        text-align: center;
        margin-bottom: 30px;
    }

    .yoga-visual-wrapper {
        margin-top: 30px;
    }

    .yoga-badge {
        width: 140px;
        height: 140px;
        top: 10px;
        right: 10px;
    }

    .yoga-badge h4 {
        font-size: 14px;
    }

    .yoga-badge .material-symbols-outlined {
        font-size: 24px;
    }
}

/* Yoga Section */
.yoga-section {
    background-color: #fff;
    position: relative;
}

.yoga-title {
    font-size: 42px;
    font-weight: 300;
    letter-spacing: 6px;
    line-height: 1.3;
    text-transform: uppercase;
    color: #000;
}

.yoga-title strong {
    font-weight: 700;
}

.yoga-text {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.yoga-visual-wrapper {
    margin-top: 60px;
    position: relative;
    width: 100%;
}

.yoga-img {
    width: 100%;
    height: auto;
    display: block;
}

.yoga-badge {
    position: absolute;
    top: 20%;
    right: 15%;
    width: 240px;
    height: 240px;
    border: 1px solid #000;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    z-index: 10;
    color: #000;
}

.yoga-badge .material-symbols-outlined {
    font-size: 32px;
    margin-bottom: 5px;
}

.yoga-badge h4 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
    line-height: 1.2;
}


/* Flavor Section */
.flavor-section {
    padding: 0;
    position: relative;
    /* Full background image intent */
}

.flavor-wrapper {
    position: relative;
    width: 100%;
    min-height: 600px;
    /* Taller for background logic */
}

.flavor-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.flavor-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 180px 0;
    /* Vertical spacing */
    display: flex;
    align-items: center;
}

.flavor-title {
    font-size: 46px;
    /* Match others */
    font-weight: 300;
    letter-spacing: 6px;
    line-height: 1.3;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 30px;
}

.flavor-title strong {
    font-weight: 700;
}

.flavor-text {
    font-size: 16px;
    line-height: 1.6;
    color: #111;
    /* Dark text */
    max-width: 550px;
}

/* Glass Badge for Flavor */
.flavor-badge {
    position: absolute;
    top: 15%;
    right: 20%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.flavor-badge .material-symbols-outlined {
    font-size: 28px;
    margin-bottom: 5px;
    color: #000;
}

.flavor-badge h4 {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.2;
}

.flavor-badge p {
    font-size: 13px;
    color: #333;
    margin-top: 5px;
    line-height: 1.3;
}

@media (max-width: 991px) {
    .flavor-section {
        padding: 0;
    }

    .flavor-wrapper {
        min-height: auto;
        display: flex;
        flex-direction: column-reverse;
    }

    .flavor-img {
        position: relative;
        height: 500px;
        /* Bigger height */
        width: 100%;
        object-fit: cover;
        object-position: 90% center;
        /* Shift focus to right-center */
    }

    .flavor-overlay {
        position: relative;
        height: auto;
        background-color: #EEEEEE;
        /* Creamy/Coffee background */
        padding: 40px 20px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }

    .flavor-title {
        font-size: 28px;
        text-align: center;
        margin-bottom: 20px;
    }

    .flavor-text {
        text-align: center;
        margin: 0 auto;
        font-size: 16px;
        max-width: 100%;
        color: #111;
    }

    .flavor-badge {
        display: none;
    }
}

/* Change Section */
.change-section {
    padding: 100px 0;
    background-color: #11161A;
    position: relative;
    min-height: 700px;
    /* From design 729px ish */
    display: flex;
    align-items: center;
    justify-content: center;
}

.change-content {
    text-align: center;
    position: relative;
    z-index: 5;
}

.change-trigger {
    cursor: pointer;
    transition: transform 0.5s ease;
    display: inline-block;
    position: relative;
}

.change-trigger:hover {
    transform: scale(1.05);
}

.change-trigger img {
    width: 300px;
    /* approximate size from visual */
    height: auto;
    display: block;
}

.change-content {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.change-section.power-active .change-content {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    position: absolute;
}

/* Power Content */
.power-content-wrapper {
    display: flex;
    width: 100%;
    height: 100%;

    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(30px);

    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.3s;
}

/* When active, show content */
.change-section.power-active .power-content-wrapper {
    opacity: 1;
    visibility: visible;
    position: relative;
    transform: translateY(0);
}

.change-section.power-active {
    padding: 0;
    align-items: stretch;
}

.power-img-col {
    width: 50%;
    position: relative;
    height: 100%;
    /* Ensure it fills wrapper */
    min-height: 600px;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease 0.5s;
}

.change-section.power-active .power-img-col {
    opacity: 1;
    transform: translateX(0);
}

.power-img {
    width: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.power-text-col {
    width: 60%;
    height: 100%;
    /* Ensure it fills wrapper match img */
    padding: 220px 80px 80px;
    /* Large top padding to push content down */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #11161A;
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s ease 0.5s;
    z-index: 2;
}

.change-section.power-active .power-text-col {
    opacity: 1;
    transform: translateX(0);
}

.power-title {
    font-size: 46px;
    font-weight: 300;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 30px;
}

.power-title span {
    color: #8B6D36;
    /* Brown/Gold */
    font-weight: 300;
    /* As per image looks same weight */
}

.power-desc {
    font-size: 18px;
    line-height: 1.6;
    color: #e0e0e0;
}

@media (max-width: 991px) {
    .change-section.power-active .power-content-wrapper {
        flex-direction: column;
    }

    .power-img-col {
        width: 100%;
        height: 450px;
        min-height: auto;
    }

    .power-text-col {
        width: 100%;
        padding: 40px 20px;
        text-align: center;
    }

    .power-title {
        font-size: 28px;
    }
}

/* Footer Section */
.footer-section {
    background-color: #000;
    /* Black bg as per image */
    padding: 80px 0;
    color: #fff;
    font-family: 'Inter', sans-serif;
    /* Ensuring modern font */
}