/*
========================================
Gen Tree Resort Management System
Global Styles
Version 2.0
========================================
*/

/* ========================================
   VARIABLES
======================================== */

:root{

    --primary:#0B5FA5;
    --primary-light:#1597E5;

    --gold:#D4AF5A;
    --gold-dark:#B88A2E;

    --white:#FFFFFF;
    --light:#F6FBFF;

    --dark:#1E293B;
    --text:#334155;

    --success:#198754;
    --danger:#DC3545;
    --warning:#FFC107;
    --info:#0DCAF0;

    --radius:18px;

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

    --transition:.3s ease;

}

/* ========================================
   RESET
======================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:var(--light);
    color:var(--text);
    overflow-x:hidden;

}

/* ========================================
   TYPOGRAPHY
======================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:'Playfair Display',serif;
    color:var(--primary);
    font-weight:700;

}

p{

    line-height:1.8;

}

/* ========================================
   LINKS
======================================== */

a{

    text-decoration:none;
    transition:var(--transition);

}

/* ========================================
   IMAGES
======================================== */

img{

    max-width:100%;
    display:block;

}

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

.logo{

    width:90px;
    height:auto;

}

/* ========================================
   BAR
======================================== */

.bar{

    padding:18px 0;
    transition:var(--transition);

}

.bar-brand{

    font-size:1.4rem;
    font-weight:700;

}

.-link{

    margin-left:18px;
    font-weight:500;

}

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

.btn{

    border-radius:12px;
    padding:.8rem 1.8rem;
    font-weight:600;
    transition:var(--transition);

}

.btn-primary{

    background:var(--gold);
    border-color:var(--gold);

}

.btn-primary:hover{

    background:var(--gold-dark);
    border-color:var(--gold-dark);

}

.btn-success{

    background:var(--success);
    border-color:var(--success);

}

.btn-danger{

    background:var(--danger);
    border-color:var(--danger);

}

/* ========================================
   FORMS
======================================== */

.form-control{

    border-radius:12px;
    padding:.75rem 1rem;

}

.form-control:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 .2rem rgba(200,169,91,.25);

}

/* ========================================
   CARDS
======================================== */

.card{

    border:none;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.card-luxury{

    border:none;

    border-radius:20px;

    box-shadow:var(--shadow);

}

/* ========================================
   TABLES
======================================== */

.table{

    background:white;

}

.table thead{

    background:var(--primary);

    color:white;

}

/* ========================================
   BADGES
======================================== */

.badge{

    border-radius:20px;

    padding:.6rem .9rem;

}

/* ========================================
   UTILITIES
======================================== */

.section-title{

    font-size:2.5rem;

    margin-bottom:15px;

}

.section-tag{

    display:inline-block;

    padding:8px 22px;

    border-radius:30px;

    background:#EAF7FF;

    color:var(--primary);

    font-weight:600;

    margin-bottom:20px;

}

.shadow-soft{

    box-shadow:var(--shadow);

}

.rounded-xl{

    border-radius:20px;

}

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

footer{

    padding:50px 0;

}

/* ========================================
   ANIMATIONS
======================================== */

.fade-up{

    animation:fadeUp .6s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ========================================
   SCROLLBAR
======================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#eee;

}
/*=========================================
NAVBAR
=========================================*/

.navbar-custom{

    background:#0B5FA5;

    padding:14px 0;

    box-shadow:0 4px 20px rgba(0,0,0,.15);

    transition:.35s ease;

}

.navbar-brand{

    color:#fff !important;

    font-family:'Playfair Display',serif;

    font-size:1.5rem;

    font-weight:700;

}

.navbar-brand:hover{

    color:#D4AF5A !important;

}

.logo{

    width:65px;

    transition:.3s;

}

.navbar-nav .nav-link{

    color:rgba(255,255,255,.9) !important;

    font-weight:500;

    margin-left:18px;

    position:relative;

}

.navbar-nav .nav-link:hover{

    color:#D4AF5A !important;

}

.navbar-nav .nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#D4AF5A;

    transition:.3s;

}

.navbar-nav .nav-link:hover::after{

    width:100%;

}

.navbar-toggler{

    border:none;

}

.navbar-toggler:focus{

    box-shadow:none;

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    background:
        linear-gradient(
            rgba(8,47,36,.60),
            rgba(11,61,46,.75)
        ),
        url("../images/hero/hero.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    overflow:hidden;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.20),
        rgba(0,0,0,.35)
    );

}

.hero .container{

    position:relative;

    z-index:2;

}

.hero-content{

    max-width:850px;

    margin:auto;

}

.hero-subtitle{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

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

    color:#fff;

    backdrop-filter:blur(10px);

    font-weight:600;

    letter-spacing:1px;

}

.hero-title{

    font-size:4.2rem;

    color:#fff;

    line-height:1.15;

    margin-top:20px;

    text-shadow:0 8px 20px rgba(0,0,0,.35);

}

.hero-description{

    max-width:700px;

    margin:auto;

    font-size:1.2rem;

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

    line-height:2;

}

.hero-buttons .btn{

    padding:15px 35px;

    border-radius:50px;

    font-size:1rem;

    font-weight:600;

}

.hero .btn-primary{

    background:#D4AF5A;

    border-color:#D4AF5A;

}

.hero .btn-primary:hover{

    background:#B88A2E;

    border-color:#B88A2E;

    transform:translateY(-3px);

}

.hero .btn-outline-light:hover{

    color:#0B5FA5;

    background:#fff;

}

@media(max-width:991px){

    .hero{

        min-height:90vh;

        background-attachment:scroll;

    }

    .hero-title{

        font-size:2.8rem;

    }

    .hero-description{

        font-size:1rem;

    }

    .hero-buttons .btn{

        width:100%;

        margin:10px 0;

    }

    .hero-buttons .btn.ms-3{

        margin-left:0 !important;

    }

}

/*=========================================
 FEATURES
=========================================*/

.features-section{

    padding:100px 0;

    background:#F6FBFF;

}

.section-description{

    max-width:700px;

    margin:auto;

    color:#64748B;

    font-size:1.05rem;

    line-height:1.9;

}

.feature-card{

    background:#fff;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

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

    transition:.35s;

    height:100%;

    position:relative;

    overflow:hidden;

}

.feature-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #0B5FA5,
        #1597E5,
        #D4AF5A
    );

}

.feature-card:hover{

    transform:translateY(-12px);

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

}

.features-section .feature-card .feature-icon {
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #7DD3FC 0%,
        #38BDF8 45%,
        #0284C7 100%
    ) !important;

    color: #ffffff !important;
    font-size: 2rem;

    box-shadow:
        0 12px 28px rgba(14, 165, 233, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/*=========================================
 RESTAURANT
=========================================*/

.restaurant-section{

    padding:100px 0;

    background:#fff;

}

.restaurant-image-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:25px;

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

}

.restaurant-image{

    width:100%;

    display:block;

    transition:.5s;

}

.restaurant-image:hover{

    transform:scale(1.08);

}

.restaurant-description{

    color:#64748B;

    line-height:2;

    font-size:1.05rem;

}

.restaurant-feature{

    background:#F6FBFF;

    border-radius:15px;

    padding:15px 20px;

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:500;

    transition:.3s;

    border:1px solid rgba(11,61,46,.08);

}

.restaurant-feature:hover{

    background:#0B5FA5;

    color:#fff;

    transform:translateY(-5px);

}

.restaurant-feature i{

    color:#D4AF5A;

    font-size:1.2rem;

}

.restaurant-feature:hover i{

    color:#FFD166;

}

/*=========================================
RESTAURANT GALLERY
=========================================*/

.restaurant-section{

    padding:110px 0;

    background:#fff;

}

.restaurant-gallery{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:18px;

}

.gallery-main img{

    width:100%;

    height:540px;

    object-fit:cover;

    border-radius:25px;

    transition:.5s;

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

}

.gallery-side{

    display:grid;

    gap:18px;

}

.gallery-side img{

    width:100%;

    height:261px;

    object-fit:cover;

    border-radius:20px;

    transition:.5s;

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

}

.gallery-bottom{

    grid-column:1 / span 2;

}

.gallery-bottom img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:20px;

    transition:.5s;

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

}

.restaurant-gallery img:hover{

    transform:scale(1.05);

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

}

.restaurant-description{

    color:#64748B;

    font-size:1.05rem;

    line-height:2;

}

.restaurant-feature{

    background:#F6FBFF;

    padding:15px 18px;

    border-radius:15px;

    display:flex;

    align-items:center;

    gap:12px;

    border:1px solid rgba(11,61,46,.08);

    transition:.3s;

}

.restaurant-feature:hover{

    background:#0B5FA5;

    color:#fff;

    transform:translateY(-5px);

}

.restaurant-feature i{

    color:#D4AF5A;

}

.restaurant-feature:hover i{

    color:#FFD166;

}

@media(max-width:991px){

    .restaurant-gallery{

        grid-template-columns:1fr;

    }

    .gallery-bottom{

        grid-column:auto;

    }

    .gallery-main img,

    .gallery-side img,

    .gallery-bottom img{

        height:280px;

    }

}
/*=========================================
 EVENTS
=========================================*/

.events-section{

    padding:110px 0;

    background:#F6FBFF;

}

.event-card{

    position:relative;

    overflow:hidden;

    border-radius:25px;

    height:500px;

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

}

.event-image{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.event-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(11,61,46,.92),
        rgba(11,61,46,.25)
    );

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    color:#fff;

}

.event-card:hover .event-image{

    transform:scale(1.1);

}

.event-card:hover{

    transform:translateY(-8px);

    transition:.35s;

}

.event-badge{

    display:inline-block;

    align-self:flex-start;

    background:#D4AF5A;

    color:#fff;

    padding:8px 18px;

    border-radius:50px;

    font-size:.85rem;

    margin-bottom:18px;

    font-weight:600;

}

.event-overlay h3{

    color:#fff;

    margin-bottom:15px;

}

.event-overlay p{

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

    margin-bottom:25px;

}

.event-overlay .btn{

    align-self:flex-start;

    border-radius:50px;

    padding:12px 28px;

    font-weight:600;

}

.event-overlay .btn:hover{

    background:#D4AF5A;

    color:#fff;

    border-color:#D4AF5A;

}

@media(max-width:991px){

    .event-card{

        height:400px;

    }

}
/* =========================================
   HOME GALLERY
========================================= */

.gallery-section {
    position: relative;
    padding: 90px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.gallery-item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 18px;
    background: #111;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

/* Make the first gallery item taller */
.gallery-item:first-child {
    grid-row: span 2;
    aspect-ratio: auto;
    min-height: 100%;
}

.gallery-media,
.gallery-item img,
.gallery-item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

.gallery-item:hover .gallery-media,
.gallery-item:hover img,
.gallery-item:hover video {
    transform: scale(1.07);
    filter: brightness(0.75);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    background: rgba(0, 0, 0, 0.12);
    opacity: 0;
    transition:
        opacity 0.3s ease,
        background 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.32);
}

.gallery-video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    color: #fff;
    font-size: 38px;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.gallery-video-icon i {
    margin-left: 4px;
}

.gallery-item:hover .gallery-video-icon {
    background: rgba(0, 0, 0, 0.75);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Tablet: 2 columns */
@media (max-width: 991.98px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-item:first-child {
        grid-row: span 2;
    }
}

/* Mobile: 1 column */
@media (max-width: 575.98px) {
    .gallery-section {
        padding: 65px 0;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gallery-item,
    .gallery-item:first-child {
        grid-row: auto;
        aspect-ratio: 4 / 3;
        min-height: 0;
        border-radius: 14px;
    }

    .gallery-video-icon {
        width: 54px;
        height: 54px;
        font-size: 32px;
    }
}

/*=========================================
 CALL TO ACTION
=========================================*/

.cta-section{

    padding:120px 0;

    background:linear-gradient(
        rgba(11,61,46,.88),
        rgba(20,92,69,.90)
    ),
    url("../images/hero/hero.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.cta-box{

    max-width:850px;

    margin:auto;

    color:#fff;

}

.cta-box h2{

    color:#fff;

    font-size:3rem;

}

.cta-box p{

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

    font-size:1.1rem;

    line-height:2;

}

.cta-box .btn{

    padding:16px 40px;

    border-radius:50px;

    font-weight:600;

}

.cta-box .btn-outline-light:hover{

    background:#fff;

    color:#0B5FA5;

}

@media(max-width:768px){

    .cta-box h2{

        font-size:2.2rem;

    }

    .cta-box .btn{

        width:100%;

        margin:10px 0;

    }

}

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

.footer{

    background:#082F24;

    color:#D6E5DF;

    padding:90px 0 30px;

}

.footer-logo{

    width:80px;

}

.footer h4,
.footer h5{

    color:#fff;

    margin-bottom:25px;

}

.footer p{

    line-height:2;

}

.footer-links,
.footer-contact{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-links li,
.footer-contact li{

    margin-bottom:15px;

}

.footer-links a{

    color:#D6E5DF;

    transition:.3s;

}

.footer-links a:hover{

    color:#D4AF5A;

    padding-left:8px;

}

.footer-contact i{

    color:#D4AF5A;

    margin-right:10px;

}

.footer-map{

    overflow:hidden;

    border-radius:18px;

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

}

.footer-map iframe{

    width:100%;

    height:220px;

    border:0;

}

.footer-divider{

    border-color:rgba(255,255,255,.15);

    margin:50px 0 25px;

}

.social-icons a{

    width:42px;

    height:42px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    border-radius:50%;

    margin-left:10px;

    transition:.3s;

    font-size:1.1rem;

}

.social-icons a:hover{

    background:#D4AF5A;

    color:#fff;

    transform:translateY(-4px);

}

@media(max-width:768px){

    .social-icons{

        text-align:center;

        margin-top:25px;

    }

}
/* Professional home gallery */
.home-gallery-pro{background:linear-gradient(180deg,#ffffff 0%,#f5f8f6 100%);position:relative;overflow:hidden}
.home-gallery-pro:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(200,169,91,.10);top:-160px;right:-140px;filter:blur(10px)}
.home-gallery-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:42px;position:relative;z-index:1}
.home-gallery-heading .section-description{max-width:690px}
.home-gallery-link{align-items:center;gap:10px;color:#0B5FA5;font-weight:700;text-decoration:none;white-space:nowrap;border-bottom:2px solid #D4AF5A;padding-bottom:5px;transition:.25s}
.home-gallery-link:hover{color:#D4AF5A;transform:translateY(-2px)}
.home-gallery-card{min-height:280px;background:#073C67;isolation:isolate;border:1px solid rgba(11,61,46,.08)}
.home-gallery-card:nth-child(1){min-height:580px}
.home-gallery-media{width:100%;height:100%!important;min-height:280px;object-fit:cover;display:block;transition:transform .65s ease,filter .4s ease;background:#15251f}
.home-gallery-card:nth-child(1) .home-gallery-media{min-height:580px}
.home-gallery-video{pointer-events:none}
.home-gallery-card:hover .home-gallery-media{transform:scale(1.07);filter:saturate(1.08)}
.home-gallery-overlay{opacity:1!important;align-items:flex-end!important;justify-content:space-between!important;padding:24px;background:linear-gradient(180deg,rgba(0,0,0,0) 32%,rgba(4,28,21,.90) 100%)!important}
.home-gallery-caption{display:flex;flex-direction:column;gap:4px;color:#fff;transform:translateY(8px);transition:.3s}
.home-gallery-caption small{text-transform:uppercase;letter-spacing:1.4px;font-size:11px;color:#ead38b;font-weight:700}
.home-gallery-caption strong{font-family:'Playfair Display',serif;font-size:21px;line-height:1.2}
.home-gallery-card:hover .home-gallery-caption{transform:translateY(0)}
.home-gallery-open{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);transition:.3s}
.home-gallery-card:hover .home-gallery-open{background:#D4AF5A;border-color:#D4AF5A;transform:scale(1.08)}
.home-gallery-type{position:absolute;z-index:3;top:16px;left:16px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.90);backdrop-filter:blur(8px);color:#0B5FA5;font-size:11px;font-weight:700;display:inline-flex;gap:6px;align-items:center;box-shadow:0 8px 20px rgba(0,0,0,.13)}
.home-gallery-play{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(200,169,91,.94);color:#fff;font-size:34px;box-shadow:0 0 0 12px rgba(255,255,255,.16),0 18px 35px rgba(0,0,0,.28);transition:.3s}
.home-gallery-card:hover .home-gallery-play{transform:translate(-50%,-50%) scale(1.10)}
@media(max-width:991px){.home-gallery-card:nth-child(1),.home-gallery-card:nth-child(1) .home-gallery-media{min-height:320px}.home-gallery-heading{align-items:flex-start}.home-gallery-media{min-height:300px}}
@media(max-width:576px){.home-gallery-heading{margin-bottom:28px}.home-gallery-card,.home-gallery-card:nth-child(1),.home-gallery-media,.home-gallery-card:nth-child(1) .home-gallery-media{min-height:280px}.home-gallery-overlay{padding:18px}.home-gallery-caption strong{font-size:18px}.home-gallery-play{width:60px;height:60px;font-size:29px}}


/* Uniform elegant home gallery */
.home-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.home-gallery-card,.home-gallery-card:nth-child(1){min-height:0!important;height:auto;aspect-ratio:4/3;border-radius:20px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.home-gallery-card:hover{transform:translateY(-6px);box-shadow:0 22px 45px rgba(11,61,46,.18);border-color:rgba(200,169,91,.45)}
.home-gallery-media,.home-gallery-card:nth-child(1) .home-gallery-media{min-height:0!important;height:100%!important;position:absolute;inset:0}
.home-gallery-overlay{align-items:flex-end!important;justify-content:flex-end!important;padding:18px!important;background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(4,28,21,.58) 100%)!important}
.home-gallery-open{opacity:0;transform:translateY(7px);transition:opacity .25s ease,transform .25s ease,background .25s ease}
.home-gallery-card:hover .home-gallery-open{opacity:1;transform:translateY(0) scale(1.05)}
@media(max-width:991px){.home-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:576px){.home-gallery-grid{grid-template-columns:1fr;gap:16px}.home-gallery-card,.home-gallery-card:nth-child(1){aspect-ratio:4/3}}


/* Homepage gallery clean uniform layout - July 2026 */
.home-gallery-pro{
    padding:90px 0!important;
    background:#fff!important;
}
.home-gallery-pro .container{
    max-width:1140px!important;
}
.home-gallery-heading{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:32px!important;
    margin-bottom:34px!important;
}
.home-gallery-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:22px!important;
    width:100%!important;
}
.home-gallery-grid .home-gallery-card,
.home-gallery-grid .home-gallery-card:nth-child(1){
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:4 / 3!important;
    overflow:hidden!important;
    border-radius:18px!important;
    background:#0b2f24!important;
    border:1px solid rgba(11,61,46,.09)!important;
    box-shadow:0 10px 28px rgba(11,61,46,.10)!important;
    transform:none!important;
}
.home-gallery-grid .home-gallery-card:hover{
    transform:translateY(-5px)!important;
    box-shadow:0 20px 42px rgba(11,61,46,.18)!important;
}
.home-gallery-grid .home-gallery-media,
.home-gallery-grid .home-gallery-card:nth-child(1) .home-gallery-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:cover!important;
    border-radius:0!important;
}
.home-gallery-grid .home-gallery-overlay{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:flex-end!important;
    padding:16px!important;
    opacity:1!important;
    background:linear-gradient(180deg,transparent 62%,rgba(3,26,19,.48) 100%)!important;
}
.home-gallery-grid .home-gallery-open{
    opacity:0!important;
    transform:translateY(8px)!important;
}
.home-gallery-grid .home-gallery-card:hover .home-gallery-open{
    opacity:1!important;
    transform:translateY(0)!important;
}
.home-gallery-type{
    display:none!important;
}
.home-gallery-play{
    width:64px!important;
    height:64px!important;
    font-size:31px!important;
}
@media(max-width:991px){
    .home-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:576px){
    .home-gallery-pro{padding:65px 0!important}
    .home-gallery-heading{display:block!important;margin-bottom:26px!important}
    .home-gallery-grid{grid-template-columns:1fr!important;gap:16px!important}
}

/* Force all four Home Feature circles to Sky Blue */
#features .feature-icon {
    background: linear-gradient(
        135deg,
        #7DD3FC,
        #38BDF8,
        #0284C7
    ) !important;

    color: #ffffff !important;
}