@import url('https://fonts.googleapis.com/css2?family=Elsie+Swash+Caps:wght@400;900&family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Elsie+Swash+Caps:wght@400;900&display=swap');

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   scroll-padding-top: 4rem;
   scroll-behavior: smooth;
   list-style: none;
   text-decoration: none;
}


/* 2. Variables Definition */
:root {
    --main-font: 'Elsie Swash Caps', serif; /* අර image එකේ වගේ කැරලි තියෙන font එක */
    --base-font: 'Inter', sans-serif;
    --main-color: #caa16b;
    --hover-color:#dbb382;
    --text-color: #000000;
    --p-color: #463723;
    --base-color:#fbf0e4;
}

/* Header Base Styling--------------------------------------------------------------------------------------------------------------------------------------------------------- */
.studio-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: #ffffff !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    transform: translateY(-100%) !important;
    pointer-events: none !important;
    transition: all 0.4s ease-in-out !important;
}

.studio-header.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Shared Buttons */
.btn-book1 {
    color: #000000 !important;
    text-decoration: none !important;
    padding: 10px 22px !important;
    border-radius: 30px !important;
    font-family: var(--base-font);
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 2px solid black;
}

.nav-links {
    font-family: var(--base-font);
}

.nav-links a {
    position: relative;
    transition: color 0.3s ease !important;
    text-decoration: none;
}

.nav-links a:hover,
.nav-links a.active {
    color: #c5a880 !important;
}

/* 💻 DESKTOP ONLY VERSION (>= 993px) */
@media (min-width: 993px) {
    .studio-header {
        padding: 15px 40px !important;
    }
    .header-middle {
        display: block !important;
    }
    .nav-links {
        display: flex !important;
        list-style: none !important;
        gap: 30px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .nav-links a {
        color: #000000 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
    }
    .btn-call {
        display: flex !important;
        background-color: #ffffff !important;
        color: black !important;
        border: 2px solid black;
        width: 45px !important;
        height: 45px !important;
        border-radius: 50% !important;
        justify-content: center !important;
        align-items: center !important;
        text-decoration: none !important;
    }
    .mobile-menu-btn {
        display: none !important;
    }
    .mobile-only-call {
        display: none !important;
    }
    
    /* Desktop Dropdown Styles */
    .nav-links li {
        position: relative;
        display: inline-block;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #ffffff;
        min-width: 220px; /* ලින්ක් 4ක් නිසා පොඩ්ඩක් පළල වැඩි කළා */
        box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08);
        border: 1px solid #eaeaea;
        z-index: 1000;
        padding: 10px 0;
    }
    .dropdown-menu li {
        display: block;
        width: 100%;
    }
    .dropdown-menu li a {
        padding: 12px 20px !important;
        display: block !important;
        color: #333333 !important;
        font-size: 13px !important;
    }
    .dropdown-menu li a:hover {
        background-color: #f9f6f0;
        color: #bfa15f !important;
        padding-left: 25px !important;
    }
    .nav-links li:hover .dropdown-menu {
        display: block;
    }
    .nav-links li a i {
        font-size: 10px;
        margin-left: 5px;
    }
}

/* 📱 PREMIUM MOBILE VERSION (<= 992px) */
@media (max-width: 992px) {
    .studio-header {
        padding: 12px 20px !important;
    }
    .btn-book1 {
        width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 50% !important;
        border: 2px solid #000000 !important;
    }
    .btn-book1 span {
        display: none !important;
    }
    .btn-book1 i {
        font-size: 18px !important;
    }
    .header-right .btn-call {
        display: none !important;
    }
    .mobile-menu-btn {
        display: block !important;
        background: none !important;
        border: none !important;
        font-size: 22px !important;
        color: #000000 !important;
        cursor: pointer !important;
    }
    .header-middle {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.4s ease-in-out !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    }
    
    /* 💡 ලින්ක් 4ක් ආපු නිසා උස 550px දක්වා වැඩි කරා කැපෙන්නේ නැති වෙන්න */
    .header-middle.active {
        max-height: 550px !important;
    }
    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 35px 20px !important;
        gap: 22px !important;
    }
    .nav-links li {
        width: 100% !important;
        text-align: center !important;
    }
    .nav-links li a {
        color: #000000 !important;
        font-size: 20px !important;
        font-weight: 500 !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        border: none !important;
        padding: 4px 0 !important;
    }
    .dropdown-menu {
        display: none;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 6px 0 0 0 !important;
        width: 100% !important;
    }
    .dropdown-menu.show {
        display: block !important;
    }
    .dropdown-menu li a {
        font-size: 16px !important;
        color: #555555 !important;
        padding: 8px 0 !important;
    }
    .mobile-only-call {
        display: block !important;
        margin-top: 15px !important;
    }
    .btn-mobile-phone {
        color: #000000 !important;
        font-size: 22px !important;
    }

}
/* header end-------------------------------------------------------------------------------------------------------------------------------------------------------- */



/* home page--------------------------------------------------------------------------------------------------------------------------- */
/* ---- HERO SECTION BASE ---- */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Background Image Slider Loop (Pure CSS) */
.hero-slider {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
}

.hero-slider .slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: imageSlider 32s infinite linear;
}

.hero-slider .slide:nth-child(1) { animation-delay: 0s; }
.hero-slider .slide:nth-child(2) { animation-delay: 8s; }
.hero-slider .slide:nth-child(3) { animation-delay: 16s; }
.hero-slider .slide:nth-child(4) { animation-delay: 24s; }

@keyframes imageSlider {
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; }
    25% { opacity: 1; }
    33% { opacity: 0; }
    100% { opacity: 0; }
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

/* ---- TOP NAVIGATION ---- */
.hero-nav {
    position: absolute;
    top: 0; left: 0; width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    z-index: 10;
}

/* Transparent Buttons (Top Bar) */
.hero-btn {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    padding: 10px 22px;
    border-radius: 30px;
    font-family: var(--base-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.hero-btn:hover {
    background-color: var(--hover-color);
    border-color: var(--hover-color);
}

/* Logo Styling */
.hero-logo img {
    height: 60px;
    width: auto;
    object-fit: contain;
}

/* ---- MAIN CONTENT & MEDDE BUTTON ---- */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 950px;
    padding: 0 20px;
    color: #ffffff;
    margin-top: 60px;
}

.hero-title {
    font-family: var(--main-font);
    font-size: 54px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 20px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.6);
}

.hero-subtitle {
    font-family: var(--base-font);
    font-size: 20px;
    font-weight: 300;
    color: #e0e0e0;
    letter-spacing: 1px;
    margin-bottom: 35px; /* Button එකට ඉඩ තියන්න */
}

/* මැද තියෙන අලුත් Book Now Button එක */
.btn-main-book {
    display: inline-block;
    font-family: var(--base-font);
    text-decoration: none;
    color: #ffffff;
    background-color: var(--main-color);
    padding: 12px 35px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-main-book:hover {
    background-color: var(--hover-color);
    border-color: var(--hover-color);
    transform: scale(1.05);
}

/* ---- SIDE MENU WINDOW ---- */
.side-menu {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    background-image: url('../img/Untitled design.webp');
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 1000px;
    z-index: 2000;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    transition: right 0.4s ease-in-out;
}

.side-menu.open {
    right: 0;
}

.menu-close-btn {
    position: absolute;
    top: 20px; right: 20px;
    background: transparent; border: none;
    color: #ffffff; font-size: 35px; cursor: pointer;
}

.side-menu-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 60px;
}

.side-menu-links a {
    color: #ffffff;
    text-decoration: none;
    font-family: var(--main-font);
    font-size: 18px;
    transition: color 0.3s ease;
}
.side-menu-links a img{
    width: 400px;
    margin-left:-90px 
}

.side-menu-links a:hover,
.side-menu-links a.active {
    color: var(--hover-color);
}


/* ==========================================================================
   📱 MOBILE & TABLET RESPONSIVE STYLES (768px සහ ඊට අඩු ස්ක්‍රීන් සඳහා)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. උඩ වම් පැත්තේ බුකින් බටන් එක සහ දකුණු පැත්තේ මෙනු බටන් එක හංගනවා */
    .hero-btn.btn-book,
    .hero-btn.btn-menu {
        display: none !important;
    }

    /* 2. ලෝගෝ එක විතරක් ඉතිරි වන නිසා හෙඩර් එක මැදට ගන්න එක සකස් කිරීම */
    .hero-nav {
        justify-content: center !important; /* ලෝගෝ එක හරියටම මැදට ගන්නවා */
        padding: 15px 20px;
    }

    .hero-logo img {
        height: 50px; /* මොබයිල් එකේදී ලෝගෝ එක පොඩ්ඩක් පොඩි කරනවා */
    }

    /* 3. මැද තියෙන ප්‍රධාන Text Content මොබයිල් එකට ගැලපෙන්න සකස් කිරීම */
    .hero-title {
        font-size: 32px !important; /* ලොකු අකුරු පේළි කැඩෙන්නේ නැතිවෙන්න පොඩි කරා */
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .hero-subtitle {
        font-size: 16px !important;
        margin-bottom: 25px;
    }

    /* 4. මැද තියෙන ප්‍රධාන Book Now බටන් එක */
    .btn-main-book {
        padding: 10px 28px;
        font-size: 14px;
    }

    /* 5. දකුණු පැත්තෙන් ඇදිලා එන Side Menu එක මොබයිල් එකට responsive කිරීම */
    .side-menu {
        max-width: 100%; /* ෆෝන් එකේදී මුළු screen එකම වැහෙන්න ගන්නවා */
        padding: 20px;
    }

    .side-menu-links a img {
        width: 250px; /* Side menu එක ඇතුළේ තියෙන ලෝගෝ එක ෆෝන් එකට ගැලපෙන්න පොඩි කරා */
        margin-left: 0;
        margin-bottom: 10px;
    }
    
    .side-menu-links a {
        font-size: 24px !important; /* මෙනූ ලින්ක්ස් ටික පැහැදිලිව පෙනෙන්න ටිකක් ලොකු කරා */
    }
}

/* home page end--------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* ---- PARTNER LOGO BAR STYLING ---------------------------------------------------------------------------------------------------------------------------------------------- */

.logo-bar-section {
    background-color: #0b0b0b;
    padding: 35px 0;
    width: 100%;
    overflow: hidden; /* Screen එකෙන් එළියට යන කෑලි හංගන්න */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
}

.logo-slider-container {
    display: flex;
    width: max-content; /* Content එක තියෙන උපරිම දිග ගන්නවා */
}

.logo-track {
    display: flex;
    align-items: center;
    gap: 120px; /* ඔන්න ලෝගෝ අතර පරතරය 120px දක්වා වැඩි කරා බොසා */
    padding-right: 120px;
    
    /* මාරම smooth වෙන්න තත්පර 25ක infinite loop එකක් දැම්මා */
    animation: smoothScrollLeft 25s linear infinite; 
}

/* Logos Styling */
.logo-track img {
    height: 55px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.8);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.logo-track img:hover {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05); /* Hover වෙද්දි පොඩ්ඩක් ලොකු වෙන්න */
}

/* මැදින් නවතින්නේ නැතුව දිගටම ගලාගෙන යන CSS Animation එක */
@keyframes smoothScrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.33%); /* සෙට් 3ක් තියෙන නිසා හරියටම 1/3ක් ගියාම loop එක repeat වෙනවා */
    }
}

/* Responsive (Mobile) */
@media (max-width: 768px) {
    .logo-bar-section { padding: 25px 0; }
    .logo-track img { height: 40px; }
    .logo-track { gap: 70px; padding-right: 70px; } /* Mobile වලට gap එක 70px කරා */
}
/* ---- PARTNER LOGO BAR STYLING end---- */

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* ---- FEATURED STORIES SECTION ---- */
.featured-stories-section {
    padding: 80px 0;
    background-color: #ffffff;
    text-align: center;
    overflow: hidden;
    width: 100%;
}

.section-header {
    margin-bottom: 50px;
}
.section-tagline {
    font-family: var(--base-font);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #888888;
    margin-bottom: 5px;
}
.section-title {
    font-family: var(--main-font);
    font-size: 42px;
    color: #111111;
    font-weight: 400;
}

/* Carousel Outer Container */
.carousel-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* මැද විතරක් පෙනීලා දෙපැත්ත හැංගෙන්න දෙන wrapper එක */
.carousel-track-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 40px 0; /* Scale වෙද්දි රූප කැපෙන්නේ නැති වෙන්න */
}

/* එක පේළියට images තියාගන්න Track එක */
.carousel-track {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Images අතර පරතරය */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth sliding effect */
    width: max-content;
    margin: 0 auto;
}

/* සාමාන්‍ය Card එකක Style එක (දෙපැත්තේ තියෙන ඒවා) */
.carousel-item {
    text-decoration: none;
    color: #111111;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 240px; /* Default width */
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0.4; /* දෙපැත්තේ ඒවා අඳුරුයි */
    transform: scale(0.85); /* දෙපැත්තේ ඒවා පොඩියි */
}

.carousel-item .image-wrapper {
    width: 100%;
    height: 360px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 📍 හරියටම මැදට එන පින්තූරය (Active One) */
.carousel-item.active {
    opacity: 1; /* හොඳට පේනවා */
    transform: scale(1.15); /* මැදට එද්දී auto ලොකු වෙනවා */
    z-index: 5;
}

/* Album Details (නම් සහ ගම්) */
.carousel-item .album-details {
    margin-top: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* මැද තියෙන එකේ විස්තර විතරක් පෙන්වන්න */
.carousel-item.active .album-details {
    opacity: 1;
}

.couple-name {
    font-family: var(--main-font);
    font-size: 22px;
    font-weight: 400;
    color: #222222;
}

.album-location {
    font-family: var(--base-font);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666666;
    margin-top: 4px;
}

/* ඊතල බටන් දෙක */
.carousel-controls {
    position: absolute;
    top: 45%;
    left: 5%;
    width: 90%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.control-btn {
    pointer-events: auto;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.control-btn:hover {
    background-color: var(--hover-color);
    color: #ffffff;
    border-color: var(--hover-color);
}

@media (max-width: 768px) {
    .section-title {
        font-size: 26px !important;
        padding: 0 15px;
    }

    .carousel-track-wrapper {
        width: 100% !important;
        overflow: hidden !important; /* JS එකෙන් ස්ලයිඩ් වෙන නිසා overflow හංගනවා */
        padding: 20px 0 90px 0 !important;
    }

    .carousel-track {
        display: flex !important;
        gap: 15px !important; /* 💡 JS එකේ මොබයිල් ගැප් එකට සමානයි (15px) */
        width: max-content !important;
        margin: 0 auto !important;
    }

    /* 🖼️ මොබයිල් එකේදී කාඩ් එකක සයිස් එක */
    .carousel-item {
        display: flex !important;
        width: 230px !important; /* 💡 ෆෝන් එකේදී මැද පින්තූරය ලස්සනට පේන්න width එක */
        transform: scale(0.85) !important;
        opacity: 0.4 !important;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease !important;
    }

    /* 📍 Active පින්තූරය හරියටම මැද නූලටම ලොකු වීම */
    .carousel-item.active {
        opacity: 1 !important;
        transform: scale(1.1) !important;
    }

    .carousel-item .image-wrapper {
        width: 100% !important;
        height: 330px !important; /* ෆෝන් එකට ගැලපෙන උස */
    }

    /* 🔀 ඊතල බටන් දෙක පින්තූරයට පහළින් මැදට ගැනීම */
    .carousel-controls {
        position: absolute !important;
        top: auto !important;
        bottom: 15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 140px !important;
        display: flex !important;
        justify-content: space-between !important;
        pointer-events: none;
        z-index: 10;
    }

    .control-btn {
        pointer-events: auto;
        width: 45px !important;
        height: 45px !important;
        font-size: 16px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    }
}
/* ---- FEATURED STORIES SECTION end ---- */


/*-------------------------------------------------------------------------------------------------------------------*/



/*-------------------------------------------------------------------------------------------------------------------*/



/* ---- ABOUT STUDIO SECTION ---- */
.about-studio-section {
    padding: 100px 0;
    background-color: #fafafa; /* ලාවට අළු පාට background එකක් */
    width: 100%;
    overflow: hidden;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 80px; /* කොටු දෙක අතර පරතරය */
}

/* 📸 වම් පැත්තේ Photo Box එක */
.about-image-box {
    position: relative;
    width: 45%;
    height: 500px;
    flex-shrink: 0;
}

/* Images 3 රන් වෙන Slider Area එක */
.about-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    z-index: 2;
}

.about-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    /* වමේ ඉඳන් දකුණට යන ඇනිමේෂන් එක (තත්පර 12ක ලූපයක්) */
    animation: aboutSlideLoop 12s infinite linear;
}

/* එකින් එක පටන් ගන්න Delay එක දෙනවා */
.about-slider .about-slide:nth-child(1) { animation-delay: 0s; }
.about-slider .about-slide:nth-child(2) { animation-delay: 4s; }
.about-slider .about-slide:nth-child(3) { animation-delay: 8s; }

/* වමේ සිට දකුණට එන ලස්සන Slide + Fade Animation එකක් */
@keyframes aboutSlideLoop {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    5% {
        opacity: 1;
        transform: translateX(0);
    }
    33.33% {
        opacity: 1;
        transform: translateX(0);
    }
    38.33% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 0;
    }
}

/* ✍️ දකුණු පැත්තේ Text Content Box */
.about-content-box {
    width: 55%;
    text-align: left;
}

.about-tagline {
    font-family: var(--base-font);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--hover-color);
    margin-bottom: 10px;
    font-weight: 600;
}

.about-title {
    font-family: var(--main-font);
    font-size: 40px;
    color: #111111;
    line-height: 1.2;
    margin-bottom: 25px;
    font-weight: 400;
}

.about-text {
    font-family: var(--base-font);
    font-size: 16px;
    color: #555555;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Stats Styling */
.about-stats {
    display: flex;
    gap: 50px;
    margin-top: 35px;
    border-top: 1px solid #e0e0e0;
    padding-top: 25px;
}

.stat-item h3 {
    font-family: var(--main-font);
    font-size: 36px;
    color: #111111;
    margin-bottom: 5px;
    font-weight: 400;
}

.stat-item p {
    font-family: var(--base-font);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777777;
}

/* Responsive (Mobile/Tablets වලට layout එක හදනවා) */
@media (max-width: 992px) {
    .about-container {
        flex-direction: column;
        gap: 50px;
    }
    .about-image-box {
        width: 80%;
        height: 400px;
    }
    .about-content-box {
        width: 100%;
        text-align: center;
    }
    .about-stats {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .about-image-box {
        width: 100%;
        height: 300px;
    }
    .about-title {
        font-size: 30px;
    }
}

/* ---- ABOUT STUDIO SECTION end---- */


/*-------------------------------------------------------------------------------------------------------------------*/



/* ==========================================================================
   02. DARK PHILOSOPHY SECTION (Luxury Black Theme with Unique Hover)
   ========================================================================== */
.dark-philosophy-section {
    background-color: #000000; /* Luxury Black Background */
    padding: 100px 0 0 0; /* යටින් padding බිංදුවයි, මොකද image එක එළියට පනින නිසා */
    width: 100%;
    position: relative;
    z-index: 5;
}

/* ඊළඟට එන සෙක්ෂන් එකට ඉඩ තියන්න (පින්තූරය කඩාගෙන පනින නිසා) */
.dark-philosophy-section::after {
    content: '';
    display: block;
    height: 120px; /* Overlap වන උසට සමානයි */
    background-color: #ffffff; /* ඊළඟ සෙක්ෂන් එකේ පසුබිම් පාට */
    margin-top: 100px;
}

.philosophy-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ✍️ Big Typography Styling */
.philosophy-header {
    text-align: left;
    margin-bottom: 60px;

}

.philo-main-title {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.philo-main-title .script-text {
    font-family: var(--main-font); /* Elsie Swash Caps */
    font-size: 50px;
   
    color: #ffffff;
    font-weight: 300;
    text-transform: lowercase;
}

.philo-main-title .bold-text {
    font-family: var(--main-font); /* Inter */
    font-size: 75px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 2px;
}

/* Body Layout */
.philosophy-body {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

/* 📸 වම් පැත්තේ Overlapping Image Box Base */
.philo-image-box {
    width: 45%;
    height: 590px;
    overflow: hidden;
    margin-bottom: -150px; /* කළු බැක්ග්‍රවුන්ඩ් එකෙන් පල්ලෙහාට පනින්න */
    position: relative;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    transition: box-shadow 0.5s ease, transform 0.5s ease;
}

/* Image එක ඇතුලේ තියෙන විදිය */
.philo-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85) contrast(1.05); /* මුලින් ටිකක් dramatic look එකක් දෙනවා */
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
}

/* Luxury Film Overlay කෑල්ල */
.philo-image-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4));
    transition: background 0.5s ease;
    pointer-events: none;
}





/* 📄 දකුණු පැත්තේ Content */
.philo-content-box {
    width: 55%;
    text-align: left;
    padding-top: 20px;
    color: #ffffff;
}

.philo-subtitle {
    font-family: var(--base-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #cccccc;
    margin-bottom: 25px;
}

.philo-text {
    font-family: var(--base-font);
    font-size: 15px;
    line-height: 1.8;
    color: #b3b3b3;
    margin-bottom: 20px;
}

/* 🟤 View Pricing Button */
.btn-view-pricing {
    display: inline-block;
    margin-top: 20px;
    background-color: #c5a880; /* Elegant gold/nude color */
    color: #000000;
    text-decoration: none;
    font-family: var(--base-font);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 14px 35px;
    transition: all 0.3s ease;
}

.btn-view-pricing:hover {
    background-color: var(--hover-color);
    color: #ffffff;
    letter-spacing: 3px;
}
@media (max-width: 992px) {
    /* About Section Mobile */
    .about-container {
        flex-direction: column;
        gap: 50px;
    }
    .about-image-box {
        width: 80%;
        height: 400px;
    }
    .about-content-box {
        width: 100%;
        text-align: center;
    }
    .about-stats {
        justify-content: center;
    }

    /* Philosophy Section Mobile */
    .philo-main-title .script-text { font-size: 38px; }
    .philo-main-title .bold-text { font-size: 55px; }
    .philosophy-body { flex-direction: column; gap: 40px; }
    .philo-image-box { width: 100%; height: 400px; margin-bottom: 0; }
    .philo-content-box { width: 100%; }
    .dark-philosophy-section::after { display: none; }
    .dark-philosophy-section { padding-bottom: 80px; }
}

@media (max-width: 576px) {
    .about-image-box {
        width: 100%;
        height: 300px;
    }
    .about-title {
        font-size: 30px;
    }
}

/* ==========================================================================
   02. DARK PHILOSOPHY SECTION end (Luxury Black Theme with Unique Hover)
   ========================================================================== ===============================================================================================================*/
/* ==========================================================================
   04. OWNER PROFILE SECTION (Elegant Art Studio Style)
   ========================================================================== */
.owner-profile-section {
    padding: 120px 0;
    background-color: #ffffff;
    width: 100%;
}

.owner-container {
    max-width: 1455px; /* ටිකක් මැදට වෙන්න container එක කැපුවා */
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 100px; /* තීරූ දෙක අතර පරතරය */
}

/* 📸 Owner Image Column (Left) */
.owner-image-column {
     width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.owner-frame {
    width: 100%;
    max-width: 380px;
    height: 480px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    background-color: #f5f5f5;
}

.owner-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Image එක උඩට mouse එක ගියාම නූලට zoom වෙන්න */
.owner-frame:hover img {
    transform: scale(1.04);
}

/* Name & Signature Box */
.owner-signature-box {
    margin-top: 25px;
    text-align: center;
}

.owner-name {
    font-family: var(--main-font); /* Elsie font එකෙන් අත්සනක් වගේ ලස්සනට පේන්න */
    font-size: 28px; /* නම දිග නිසා font size එක 28px කරා ලස්සනට පේන්න */
    font-style: italic;
    color: #111111;
    margin-bottom: 2px;
}

.owner-role {
    font-family: var(--base-font);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888888;
}

/* ✍ *Owner Content Column (Right) */
.owner-content-column {
    width: 55%;
    text-align: left;
    margin-left: -150px
}

.owner-tagline {
    font-family: var(--base-font);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--hover-color);
    font-weight: 600;
    display: inline-block;
    margin-bottom: 20px;
}

/* Quote එකේ Style එක */
.owner-quote {
    font-family: var(--main-font);
    font-size: 28px;
    line-height: 1.4;
    color: #222222;
    margin: 0 0 30px 0;
    font-weight: 400;
    border-left: 3px solid #111111;
    padding-left: 25px;
}

/* Bio Description */
.owner-bio-text p {
    font-family: var(--base-font);
    font-size: 15px;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 18px;
}

/* ==========================================================================
   📱 OWNER PROFILE SECTION MOBILE RESPONSIVE (768px සහ ඊට අඩු)
   ========================================================================== */
@media (max-width: 768px) {
    .owner-profile-section {
        padding: 60px 0 !important; /* මොබයිල් එකේදී උඩ සහ යට padding අඩු කරා */
    }

    .owner-container {
        flex-direction: column !important; /* 💡 වම/දකුණ තීරූ දෙක උඩ/පල්ලෙහා වෙන විදිහට හැදුවා */
        gap: 40px !important; /* පින්තූරය සහ Text එක අතර පරතරය */
        padding: 0 25px !important; /* දෙපැත්තෙන් ලස්සනට ඉඩ තියාගත්තා */
    }

    /* 📸 පින්තූරය තියෙන කොටස */
    .owner-image-column {
        width: 100% !important; /* මුළු පළලම ගත්තා */
        align-items: center !important;
    }

    .owner-frame {
        width: 100% !important;
        max-width: 320px !important; /* ෆෝන් එකේදී පින්තූරය ඕනෑවට වඩා ලොකු නොවෙන්න සීමා කරා */
        height: 400px !important; /* උස ප්‍රමාණය ෆෝන් එකට ගැලපෙන්න හැදුවා */
    }

    .owner-signature-box {
        margin-top: 20px !important;
    }

    .owner-name {
        font-size: 24px !important; /* අකුරු පොඩ්ඩක් කුඩා කරා */
    }

    /* ✍ Text විස්තර ටික තියෙන කොටස */
    .owner-content-column {
        width: 100% !important; /* මුළු පළලම ගත්තා */
        text-align: center !important; /* 💡 හැම වචනයක්ම හරියටම මැදට (Center) කරා */
        margin-left: 0 !important; /* ❌ ඩෙස්ක්ටොප් එකේ තිබ්බ -150px margin එක අයින් කරා */
    }

    .owner-tagline {
        margin-bottom: 15px !important;
    }

    /* Quote එක මැදට ගැනීම */
    .owner-quote {
        font-size: 20px !important; /* ෆෝන් එකේ ලස්සනට පේන සයිස් එක */
        border-left: none !important; /* ❌ වම් පැත්තේ තිබ්බ ඉර අයින් කරා (මැදට කරද්දී ඒක කැත නිසා) */
        padding-left: 0 !important;
        margin: 0 auto 25px auto !important;
        max-width: 90%; /* දෙපැත්තෙන් ලාවට ඉඩ තිව්වා */
    }

    /* Description Paragraphs */
    .owner-bio-text p {
        font-size: 14px !important;
        line-height: 1.7 !important;
        text-align: center !important; /* 💡 ඡේද ටිකත් මැදටම සකස් කරා */
        margin-bottom: 15px !important;
    }
}




   /* ==========================================================================
   05. TESTIMONIALS SLIDER SECTION (Perfect Horizontal Slide)
   ========================================================================== */
.testimonials-section {
    padding: 100px 0;
    background-color: #fafafa;
    width: 100%;
}

.testi-header {
    text-align: center;
    margin-bottom: 60px;
}

.testi-tagline {
    font-family: var(--base-font);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #888888;
    margin-bottom: 5px;
}

.testi-title {
    font-family: var(--main-font);
    font-size: 42px;
    color: #111111;
    font-weight: 400;
}

/* 📦 ඊතල සහ Slider එක එක පෙළට තියන ප්‍රධාන Wrapper එක */
.testi-outer-wrapper {
    max-width: 1250px; /* ඊතල දෙපැත්තට ඉඩ තියන්න පළල වැඩි කළා */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

/* Main Viewport Window */
.testi-container {
    width: 1100px; /* Slider එකේ නියමිත පළල */
    height: 520px;
    overflow: hidden; /* පටියේ ඉතිරි කෑලි හංගනවා */
}

/* 🎞️ Sliding Track - හැම Slide එකක්ම 1100px ගානේ දුවන පටිය */
.testi-slider-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Individual Slide - හරියටම container එකේ width එකට සමානයි */
.testi-slide {
    width: 1100px; 
    height: 100%;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0 40px;
}

/* 📸 Image Box එකේ Width එක 50% දක්වා වැඩි කළා බොසා */
.testi-image-column {
    width: 50%; 
    height: 480px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
    overflow: hidden;
    flex-shrink: 0;
}

.testi-image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ✍️ Content Box */
.testi-content-column {
    width: 50%;
    text-align: left;
}

.couple-names-title {
    font-family: var(--main-font);
    font-size: 46px;
    color: #111111;
    font-weight: 400;
    margin-bottom: 15px;
}

.testi-highlight-quote {
    font-family: var(--main-font);
    font-size: 20px;
    font-style: italic;
    color: var(--hover-color);
    margin-bottom: 20px;
    font-weight: 400;
}

.testi-paragraph {
    font-family: var(--base-font);
    font-size: 15px;
    line-height: 1.8;
    color: #555555;
}

/* ඊතල බොත්තම් - දැන් මේවා item එක උඩ හිටින්නේ නැහැ */
.testi-arrow-btn {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.testi-arrow-btn:hover {
    background-color: #111111;
    color: #ffffff;
    border-color: #111111;
}/* ==========================================================================
   📱 TESTIMONIALS SECTION MOBILE RESPONSIVE (100% Fixed & Tested)
   ========================================================================== */
@media (max-width: 768px) {
    .testimonials-section {
        padding: 60px 0 !important;
    }

    .testi-header {
        margin-bottom: 35px !important;
    }

    .testi-title {
        font-size: 28px !important;
    }

    /* 💡 ⚡ ප්‍රධාන Wrapper එක සිරස් (Column) Flexbox එකක් කරනවා */
    .testi-outer-wrapper {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        justify-content: transform !important;
        padding: 0 15px !important;
        position: relative !important;
        /* JS එකෙන් මේ wrapper එකට දාන transition එක බටන් වලට බලපාන එක බ්ලොක් කරන්න */
        transition: none !important; 
    }

    /* Slider කන්ටේනරය */
    .testi-container {
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .testi-slider-wrapper {
        width: 100% !important;
    }

    .testi-slide {
        width: 100vw !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
        padding: 0 15px !important;
        height: auto !important;
    }

    .testi-image-column {
        width: 100% !important;
        max-width: 320px !important;
        height: 300px !important;
        margin: 0 auto !important;
    }

    /* ✍️ Text කොටස: යටින් එන බටන් වලට වදින්නේ නැති වෙන්න margin එකක් දීම */
    .testi-content-column {
        width: 100% !important;
        text-align: center !important;
        padding: 0 10px !important;
        margin-bottom: 35px !important; /* 💡 Text එකයි බටන් දෙකයි කිසිදාක එකිනෙක හැප්පෙන්නේ නැහැ */
    }

    .couple-names-title {
        font-size: 26px !important;
        margin-bottom: 10px !important;
    }

    .testi-highlight-quote {
        font-size: 16px !important;
        margin-bottom: 15px !important;
    }

    .testi-paragraph {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* 🔀 🏹 ⚡ ඊතල දෙක Text එකට යටින් නූලටම තිරස්ව (Row) තැබීම */
    .testi-arrow-btn {
        position: absolute !important; /* සෙක්ෂන් එකේ යටටම ලොක් කිරීම */
        bottom: 0 !important;
        width: 50px !important;
        height: 50px !important;
        background: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
        z-index: 999 !important; /* හැමදේටම උඩින් පෙනෙන්න */
        
        /* ❌ JS එක ඔබද්දී ඊතල අකුරු මැකීම 100% වළක්වන ප්‍රධාන කේත */
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 20px !important;
        line-height: 1 !important;
        text-indent: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ⬅️ වම් ඊතලය: මැද සිට වමට තල්ලු කිරීම */
    .testi-arrow-btn.prev-testi {
        left: 50% !important;
        transform: translateX(-60px) !important; /* 💡 මැද ඉඳන් ලස්සනට වමට */
    }
    
    /* ➡️ දකුණු ඊතලය: මැද සිට දකුණට තල්ලු කිරීම */
    .testi-arrow-btn.next-testi {
        left: 50% !important;
        transform: translateX(10px) !important; /* 💡 මැද ඉඳන් ලස්සනට දකුණට */
    }
}


/* ==========================================================================
   ✨ PREMIUM MANGO STYLED WHITE FOOTER
   ========================================================================== */
.pixel-mango-footer {
    background-color: #ffffff !important; /* සුදු පැහැති පසුබිම */
    color: #333333 !important;
    padding: 80px 0 30px 0 !important;
    font-family: 'Poppins', sans-serif !important;
    border-top: 1px solid #eeeeee !important; /* සිහින් අළු පැහැති ඉර */
}

.m-footer-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr 1.3fr 0.7fr !important; /* Mango Layout තීරු සැකැස්ම */
    gap: 40px !important;
}

/* 🎯 Mango Style Italic Headings (About, Our Work වගේමයි) */
.m-footer-col h3 {
    font-family: var(--main-font);
    color: #111111 !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    
    margin-bottom: 25px !important;
}

/* Column 1: Logo & Slogan */
.m-footer-logo {
    max-width: 160px !important;
    height: auto !important;
    display: block !important;
    
}
.m-footer-slogan {
    color: #888888 !important;
    font-size: 13px !important;
    font-style: italic !important;
}

/* Column 2: Quick Links */
.m-footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.m-footer-col ul li {
    margin-bottom: 12px !important;
}
.m-footer-col ul li a {
    color: #555555 !important;
    text-decoration: none !important;
    font-family: var(--base-font);
    font-size: 14px !important;
    transition: color 0.3s ease !important;
}
.m-footer-col ul li a:hover {
    color: #c5a880 !important; /* Hover කරද්දී රන් පැහැ වේ */
}

/* Column 3: Contact Us Details */
.m-footer-contact p {
    font-family: var(--base-font);
    font-size: 14px !important;
    color: #555555 !important;
    margin-bottom: 15px !important;
    line-height: 1.6 !important;
    text-align: left;
}
.m-footer-contact p i {
    color: #c5a880 !important; /* අයිකන්ස් රන් පැහැයෙන් */
    margin-right: 8px !important;
}
.m-footer-contact p a {
    color: #555555 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}
.m-footer-contact p a:hover {
    color: #c5a880 !important;
}

/* Column 4: Follow Us (Social Media Icons) */
.m-social-icons {
    display: flex !important;
    gap: 15px !important;
}
.m-social-icons a {
    color: #c5a880 !important; /* කුඩා රන් පැහැති අයිකන්ස් */
    font-size: 18px !important;
    text-decoration: none !important;
    transition: color 0.3s ease, transform 0.2s ease !important;
}
.m-social-icons a:hover {
    color: #111111 !important; /* මවුස් එක ගෙනිද්දී කළු වේ */
    transform: translateY(-2px) !important;
}

/* Copyright Bottom Line */
.m-footer-bottom {
    max-width: 1200px !important;
    margin: 60px auto 0 auto !important;
    padding: 25px 20px 0 20px !important;
    border-top: 1px solid #eeeeee !important;
    text-align: center !important;
}
.m-footer-bottom a{
    color: #999999;
}
.m-copy {
    font-size: 12px !important;
    color: #999999 !important;
    margin: 0 !important;
}
/* ==========================================================================
   📱 PIXEL MANGO FOOTER MOBILE RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .pixel-mango-footer {
        padding: 50px 0 30px 0 !important; /* මොබයිල් එකට ගැළපෙන පෑඩින් */
    }

    /* 💡 Grid එක තනි තීරුවක් (1fr) කරලා හැම එකක්ම මැදට ගන්නවා */
    .m-footer-container {
        grid-template-columns: 1fr !important; /* තීරු 4 වෙනුවට තනි තීරුවක් කලා */
        gap: 35px !important; /* එකිනෙක අතර පරතරය */
        text-align: center !important; /* හැම අකුරක්ම මැදට */
        justify-items: center !important; /* Elements ඔක්කොම මැදට ලොක් කලා */
    }

    /* Column 1: Logo එක මැදට ගැනීම */
    .m-footer-logo {
        margin: 0 auto !important; /* ලෝගෝ එක සෙන්ටර් කලා */
        max-width: 140px !important;
    }

    /* හැඩින්ග්ස් (Quick Links, Contact Us, Follow Us) */
    .m-footer-col h3 {
        font-size: 22px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    /* Column 2: Quick Links ලැයිස්තුව මැදට ගැනීම */
    .m-footer-col ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Column 3: Contact Us විස්තර මැදට ගැනීම */
    .m-footer-contact p {
        text-align: center !important; /* වමට තිබ්බ ඇඩ්‍රස් එක මැදට ගත්තා */
        margin-bottom: 12px !important;
    }

    /* Column 4: Social Icons මැදට ගැනීම */
    .m-social-icons {
        justify-content: center !important; /* අයිකන්ස් ටික මැදට ගත්තා */
        gap: 20px !important;
    }

    /* Copyright Bottom Line */
    .m-footer-bottom {
        margin-top: 40px !important;
        padding-top: 20px !important;
    }
}















/* ========================================================SERVIS ==================----------------------------------------------------
/* ==========================================================================
   🖼️ PREMIUM LUXURY PACKAGES ROW LAYOUT (MANGO STYLE)
   ========================================================================== */

/* ප්‍රධාන පැකේජ් සෙක්ශන් එක */
.premium-packages-section {
    padding: 100px 20px;
    background-color: #ffffff;
}

/* පැකේජ් සියල්ලම එක පෙළට තබා ගන්නා Container එක */
.large-packages-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 120px; /* පැකේජ් දෙකක් අතර පරතරය */
}

/* ප්‍රධාන පැකේජ් තීරුව (Grid Layout) */
.large-package-row {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* පින්තූරයට සහ විස්තර වලට ඉඩ බෙදීම */
    gap: 60px;
    align-items: center;
}

/* 🔄 Zig-Zag එක වැඩ කරන්න (ඉරට්ටේ සංඛ්‍යා ඇති පැකේජ් වල පින්තූරය දකුණට ගැනීමට) */
.large-package-row.reverse {
    direction: rtl;
}
.large-package-row.reverse .pack-details-side {
    direction: ltr; /* අකුරු ආපහු සාමාන්‍ය පරිදි වමේ සිට දකුණට කිරීමට */
}
.large-package-row.reverse .pack-image-side {
    direction: ltr;
}

/* 📸 පින්තූර කොටස (Image Side) */
.pack-image-side {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

.pack-cover-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* මවුස් එක ගෙනිද්දී පින්තූරය ලස්සනට Zoom වීම */
.large-package-row:hover .pack-cover-img {
    transform: scale(1.03);
}

/* 🏷️ Luxury Tags (Standard Tier / Premium Choice) */
.row-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #111111;
    color: #ffffff;
    font-size: 11px;
    text-transform: uppercase;
    padding: 6px 16px;
    letter-spacing: 1px;
    font-family: 'Poppins', sans-serif;
    z-index: 2;
}
.row-tag.gold-tag {
    background: #c5a880; /* Premium ඒවාට රන් පැහැති Tag එක */
}

/* ✍️ විස්තර ඇතුළත් කොටස (Details Side) */
.pack-subtitle {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    color: #c5a880;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

.pack-details-side h2 {
    font-family: var(--main-font);
    font-size: 38px;
    color: #111111;
    margin: 0 0 20px 0;
    font-weight: 400;
}

.pack-description {
    font-size: 15px;
    color: #666666;
    line-height: 1.8;
    margin-bottom: 25px;
    font-family: 'Poppins', sans-serif;
}

/* 📑 ඇතුළත් විස්තර (Features Bullets) */
.pack-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
}
.pack-bullets li {
    font-size: 14px;
    color: #444444;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Poppins', sans-serif;
}
.pack-bullets li i {
    color: #c5a880; /* Icon එක රන් පැහැයෙන් */
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* 💰 මිල ගණන් පේළිය (Price Box) */
.pack-price-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 35px;
    background: #fbfbfa;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #f2f2f0;
}

/* Preshoot එකේ මිල ගණන් 3ක් ඇති බැවින් එය තීරු 3ක් කිරීම */
.preshoot-prices {
    grid-template-columns: 1fr 1fr 1fr !important;
}

.p-sub-box {
    text-align: center;
    padding: 10px;
}

/* ප්‍රධාන මිල (Wedding & HC) එක කැපිලා පේන්න සුදු පාට කිරීම */
.p-sub-box.active-p {
    background: #ffffff;
    border: 1px solid #e8decb;
    border-radius: 4px;
}

.p-type {
    display: block;
    font-size: 11px;
    color: #888888;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-family: 'Poppins', sans-serif;
}
.p-amt {
    font-size: 19px;
    font-weight: 600;
    color: #222222;
}
.active-p .p-amt {
    color: #b09164; /* Highlighted Price */
}

/* 🔘 බටන් යුගලය (Buttons Group) */
.pack-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.btn-row-pri, .btn-row-sec {
    display: block;
    text-align: center;
    padding: 15px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
}

/* ප්‍රධාන බටන් එක (Wed & HC) */
.btn-row-pri {
    background-color: #111111;
    color: #ffffff;
}
.btn-row-pri:hover {
    background-color: #c5a880;
}

/* දෙවැනි බටන් එක (One Day) */
.btn-row-sec {
    background-color: transparent;
    color: #444444;
    border: 1px solid #cccccc;
}
.btn-row-sec:hover {
    border-color: #111111;
    color: #111111;
}

/* ==========================================================================
   📱 MOBILE RESPONSIVE CONTROL (මොබයිල් ෆෝන් වලට ඔටෝ හැඩගැසීම)
   ========================================================================== */
@media (max-width: 992px) {
    .large-package-row, .large-package-row.reverse {
        grid-template-columns: 1fr !important; /* මොබයිල් වලදී සියල්ල තනි තීරුවට පල්ලෙහාට */
        gap: 40px;
        direction: ltr !important;
    }
    .large-package-row.reverse .pack-details-side {
        direction: ltr !important;
    }
    .pack-cover-img {
        height: 350px; /* මොබයිල් එකේදී උස පොඩ්ඩක් අඩු කිරීම */
    }
    .large-packages-container {
        gap: 80px;
    }
}

@media (max-width: 576px) {
    .pack-details-side h2 {
        font-size: 30px;
    }
    .preshoot-prices {
        grid-template-columns: 1fr !important; /* මොබයිල් වලදී ප්‍රීෂූට් මිල ගණන් පල්ලෙහාට */
    }
    .pack-btn-group {
        grid-template-columns: 1fr; /* බටන් දෙක පල්ලෙහාට වැටීම */
    }
}

/* ==========================================================================
   🖼️ PREMIUM LUXURY PACKAGES ROW LAYOUT end (MANGO STYLE)
   ========================================================================== */

   /* ==========================================================================
   ✍️ PACKAGES INTRO SECTION STYLING
   ========================================================================== */
.packages-intro-box {
    text-align: center;
    max-width: 800px;
    margin: 100px auto 10px auto; /* පල්ලෙහා තියෙන පැකේජ් එකත් එක්ක ලස්සන පරතරයක් තියාගන්න */
    padding: 0 20px;
}

.intro-mini-title {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #c5a880; /* Studio Gold Color */
    margin-bottom: 15px;
    font-family:var(--base-font);
    font-weight: 500;
}

.intro-main-title {
    font-family: var(--main-font);
    font-size: 32px;
    color: #111111;
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 400;
}

.intro-p {
    font-size: 15px;
    color: #666666;
    line-height: 1.8;
    font-family: 'Poppins', sans-serif;
    max-width: 650px;
    margin: 0 auto 25px auto;
}

/* මැදට වැටෙන ලස්සන Luxury ඉර (Divider) */
.intro-luxury-divider {
    width: 60px;
    height: 1px;
    background-color: #c5a880;
    margin: 0 auto;
    position: relative;
}
.intro-luxury-divider::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    background-color: #c5a880;
    border-radius: 50%;
}

/* 📱 Mobile Responsive */
@media (max-width: 768px) {
    .intro-main-title {
        font-size: 24px;
    }
    .packages-intro-box {
        margin-bottom: 40px;
    }
}/* ========================================================servis END==================----------------------------------------------------









/* ========================================================gallery==================----------------------------------------------------