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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    color:#222;

    overflow-x:hidden;

    background:#fff;

}

h1,h2,h3,h4,h5{

    font-family:'Plus Jakarta Sans',sans-serif;

    font-weight:800;

}

/* ==========================================
   APPLE FLOATING NAVBAR
========================================== */

/* ==========================================
   APPLE NATURE GLASS NAVBAR
========================================== */

.custom-navbar{

    position:fixed;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:100%;
    max-width:100%;

    padding:15px 0;

    z-index:99999;

    border-radius:0;

    /* Forest green glass */
    background:rgba(34, 84, 61, 0.42);

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

    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);

    transition:all .45s cubic-bezier(.22,1,.36,1);

}
.custom-navbar.scrolled{

    top:12px;

    width:92%;
    max-width:1400px;

    padding:5px 0;

    border-radius:18px;

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

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

    backdrop-filter:blur(22px) saturate(180%);
    -webkit-backdrop-filter:blur(22px) saturate(180%);

    box-shadow:
        0 18px 45px rgba(0,0,0,.12),
        0 4px 12px rgba(0,0,0,.06);

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

.logo-icon{
    font-size:2.2rem;      /* Increase only the icon */
    margin-right:10px;
    vertical-align:middle;
    display:inline-block;
}

.custom-navbar .navbar-brand{

    color:#fff !important;

    font-size:1.55rem;

    font-weight:800;

    letter-spacing:.6px;

    line-height:1;

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

}

.custom-navbar.scrolled .navbar-brand{

    color:#111827 !important;

}

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

.custom-navbar .nav-link{

    color:#fff !important;

    font-weight:700;

    padding:10px 18px !important;

    margin-left:8px;

    border-radius:999px;

    transition:.3s;

    text-shadow:
        0 2px 14px rgba(0,0,0,.85);

}

.custom-navbar.scrolled .nav-link{

    color:#374151 !important;

    text-shadow:none;

}

.custom-navbar .nav-link:hover{

    color:#FFC107 !important;

}

.custom-navbar.scrolled .nav-link:hover{

    background:#f3f4f6;

}

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

.nav-btn{

    border-radius:999px;

    padding:5px 18px;

    font-weight:700;

}

.custom-navbar::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(

            rgba(255,255,255,.22),

            rgba(255,255,255,.05)

        );

    pointer-events:none;

}

/*=========================================================
    PREMIUM GLASS DROPDOWN MENU
=========================================================*/

.dropdown-mega{

    position:relative;

}

/*=========================================================
    DROPDOWN PANEL
=========================================================*/

.mega-dropdown{

    position:absolute;

    top:125%;
    left:50%;

    transform:
        translateX(-50%)
        translateY(25px);

    width:310px;

    padding:18px;

    border-radius:24px;

    background:
        rgba(15,35,25,.88);

    backdrop-filter:blur(24px);

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

    border:
        1px solid rgba(124,255,107,.25);

    box-shadow:

        0 25px 70px rgba(0,0,0,.35),

        0 0 40px rgba(124,255,107,.10);

    opacity:0;

    visibility:hidden;

    transition:
        all .45s cubic-bezier(.22,1,.36,1);

    z-index:999;

}

/*=========================================================
    SHOW MENU
=========================================================*/

.dropdown-mega:hover .mega-dropdown{

    opacity:1;

    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0);

}

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

.mega-dropdown::before{

    content:"";

    position:absolute;

    width:18px;
    height:18px;

    top:-9px;
    left:50%;

    transform:
        translateX(-50%)
        rotate(45deg);

    background:
        rgba(15,35,25,.88);

    border-left:
        1px solid rgba(124,255,107,.25);

    border-top:
        1px solid rgba(124,255,107,.25);

}

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

.mega-dropdown a{

    display:flex;

    align-items:center;

    gap:16px;

    padding:15px 18px;

    margin-bottom:8px;

    border-radius:16px;

    text-decoration:none;

    color:#7CFF6B;

    font-size:15px;

    font-weight:700;

    transition:all .35s ease;

}

.mega-dropdown a:last-child{

    margin-bottom:0;

}

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

.mega-dropdown a i{

    width:36px;
    height:36px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:12px;

    background:

        rgba(124,255,107,.15);

    color:#7CFF6B;

    font-size:1rem;

    transition:all .35s ease;

}

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

.mega-dropdown a:hover{

    transform:
        translateX(10px);

    background:

        linear-gradient(
            135deg,
            rgba(124,255,107,.18),
            rgba(0,255,180,.15)
        );

    color:#B8FF9F;

}

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

.mega-dropdown a:hover i{

    background:#7CFF6B;

    color:#10341D;

    transform:
        rotate(360deg)
        scale(1.1);

    box-shadow:

        0 0 20px rgba(124,255,107,.70);

}

/*=========================================================
    CHEVRON
=========================================================*/

.dropdown-mega .fa-chevron-down{

    margin-left:6px;

    font-size:.75rem;

    transition:.35s;

}

.dropdown-mega:hover .fa-chevron-down{

    transform:rotate(180deg);

}

/*=========================================================
    SCROLLED NAVBAR
=========================================================*/

.custom-navbar.scrolled .mega-dropdown{

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

    border:
        1px solid rgba(124,255,107,.20);

}

.custom-navbar.scrolled .mega-dropdown::before{

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

}

.custom-navbar.scrolled .mega-dropdown a{

    color:#16A34A;

}

.custom-navbar.scrolled .mega-dropdown a i{

    color:#16A34A;

    background:
        rgba(22,163,74,.10);

}

.custom-navbar.scrolled .mega-dropdown a:hover{

    background:

        linear-gradient(
            135deg,
            #16A34A,
            #22C55E
        );

    color:white;

}

.custom-navbar.scrolled .mega-dropdown a:hover i{

    background:white;

    color:#16A34A;

}

/*=========================================================
    SUBTLE ENTRY ANIMATION
=========================================================*/

.dropdown-mega:hover .mega-dropdown a{

    animation:menuItem .45s ease forwards;

}

.dropdown-mega:hover .mega-dropdown a:nth-child(1){

    animation-delay:.05s;

}

.dropdown-mega:hover .mega-dropdown a:nth-child(2){

    animation-delay:.10s;

}

.dropdown-mega:hover .mega-dropdown a:nth-child(3){

    animation-delay:.15s;

}

.dropdown-mega:hover .mega-dropdown a:nth-child(4){

    animation-delay:.20s;

}

.dropdown-mega:hover .mega-dropdown a:nth-child(5){

    animation-delay:.25s;

}

.dropdown-mega:hover .mega-dropdown a:nth-child(6){

    animation-delay:.30s;

}

@keyframes menuItem{

    from{

        opacity:0;

        transform:
            translateX(-15px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

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

.hero{

    width:100%;
	

    height:100vh;

    position:relative;
	

    z-index:1;

    overflow:hidden;

}

.heroSwiper{

    width:100%;

    height:100%;

}

.swiper-slide{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

.swiper-pagination{
    display:none !important;
}



/* ==========================================
   VIDEO-LIKE IMAGE
========================================== */

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.08);

    transition:transform 8s linear;

}



/* ==========================================
   KEN BURNS
========================================== */




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

.overlay{

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(0,0,0,.02) 10%,
            rgba(0,0,0,.18) 65%,
            rgba(0,0,0,.28) 100%
        );

}



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

.content{

    position:relative;

    z-index:10;

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    height:100%;

    max-width:750px;

}

.hero-tag{

    display:inline-block;

    width:fit-content;

    padding:8px 18px;

    margin-bottom:20px;

    border-radius:50px;

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

    backdrop-filter:blur(12px);

    font-weight:600;

    letter-spacing:1px;

}

.content h1{

    font-size:4rem;

    line-height:1.1;

    margin-bottom:25px;

}

.content p{

    font-size:1.2rem;

    line-height:1.8;

    max-width:650px;

    margin-bottom:35px;

}

.content .btn{

    width:fit-content;

    padding:15px 40px;

    font-weight:700;

    border-radius:50px;

    transition:.4s;

}

.content .btn:hover{

    transform:translateY(-4px);

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

}



/* ==========================================
   SWIPER
========================================== */

.swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#fff;

    opacity:.5;

}

.swiper-pagination-bullet-active{

    opacity:1;

    background:#ffc107;

}



/* ==========================================
   NEXT SECTIONS
========================================== */

section{

    position:relative;

}

.py-5{

    padding-top:100px!important;

    padding-bottom:100px!important;

}



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

@media(max-width:992px){

.content{

padding:0 20px;

}

.content h1{

font-size:2.8rem;

}

.content p{

font-size:1.05rem;

}

}

@media(max-width:768px){

.hero{

height:100vh;

}

.content h1{

font-size:2.2rem;

}

.content p{

font-size:1rem;

}

.nav-link{

margin-left:0;

padding:12px 0;

}

}

@media(max-width:500px){

.content h1{

font-size:1.8rem;

}

.hero-tag{

font-size:.85rem;

}

.content .btn{

padding:12px 28px;

}

}

/* ==========================================
   INTRO SECTION
========================================== */

.intro-section{

    padding:10px 0;

    background:#fafaf8;

}

.intro-text{

    max-width:820px;

    margin:auto;

    text-align:center;

    margin-bottom:10px;

}

.section-tag{

    display:inline-block;

    padding:10px 2px;

    border-radius:40px;

    background:#e8f5e9;

    color:#2e7d32;

    font-weight:700;

    margin-bottom:5px;

}

.intro-text h2{

    font-size:3rem;

    line-height:1.2;

    margin-bottom:8px;

    color:#153a25;

}

.intro-text p{

    font-size:1.18rem;

    color:#555;

    line-height:1.9;

}

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

.feature-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

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

    transition:.45s;

    height:100%;

}

.feature-card:hover{

    transform:translateY(-10px);

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

}

.feature-card img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

    transition:transform .8s ease;

}

.feature-card:hover img{

    transform:scale(1.08);

}

.feature-card .card-body{

    padding:35px;

}

.card-tag{

    display:inline-block;

    padding:6px 6px;

    border-radius:50px;

    background:#E8F5E9;

    color:#2E7D32;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:10px;

}

.feature-card h3{

    font-size:2rem;

    margin-bottom:10px;

}

.feature-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:8px;

}

.feature-card h3{

    margin-bottom:8px;

    color:#16351d;

}

.feature-card p{

    color:#666;

    line-height:1.8;

}

/* ==========================================
   DESTINATION CAROUSEL
========================================== */

.destination-gallery{

    padding:10px 0;

    overflow:hidden;

}

.gallery-title{

    font-size:3rem;

    margin-bottom:15px;

}

.gallery-subtitle{

    color:#666;

    font-size:1.15rem;

    margin-bottom:25px;

}

.destinationSwiper{

    width:100%;

    padding:40px 0 25px;

}

.destinationSwiper .swiper-slide{

    width:420px;
    height:550px;

    border-radius:24px;

    overflow:hidden;

    transition:.6s;

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

}

.destinationSwiper .swiper-slide img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform 8s ease;

}

.destinationSwiper .swiper-slide-active img{

    transform:scale(1.15);

}

.destinationSwiper .swiper-slide:hover{

    transform:translateY(-12px);

}

/* ==========================================
   STORIES CAROUSEL
========================================== */

.stories-section{

    padding:50px 0;

    background:#f8faf8;

    overflow:hidden;

}

.stories-title{

    font-size:3rem;

    margin-bottom:15px;

}

.stories-subtitle{

    color:#666;

    margin-bottom:10px;

}

.storiesSwiper{

    padding:10px 0;

}

.storiesSwiper,
.storiesSwiper .swiper-wrapper{

    height:auto;

}

.storiesSwiper .swiper-slide{

    height:auto;

}

.story-card{

    background:#fff;

    border-radius:28px;

    padding:45px;

    min-height:240px;

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

    transition:.5s;

}

.story-tag{

    display:inline-block;

    background:#E8F5E9;

    color:#2E7D32;

    padding:8px 18px;

    border-radius:40px;

    font-weight:700;

    margin-bottom:25px;

}

.story-card h3{

    margin-bottom:20px;

}

.story-card p{

    color:#666;

    line-height:1.9;

}

.swiper-slide-active .story-card{

    transform:scale(1.05);

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

}

/* ==========================================
   FEATURED DESTINATIONS
========================================== */

.featured-destinations{

    padding:60px 0;

    background:#ffffff;

}

.section-heading{

    max-width:760px;

    margin:auto auto 35px;

}



.section-heading h2{

    font-size:3rem;

    margin-bottom:20px;

}

.section-heading p{

    color:#666;

    font-size:1.1rem;

    line-height:1.9;

}

/* GRID */

.destination-grid{

    display:grid;

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

    grid-auto-rows:260px;

    gap:25px;

}

.large{

    grid-column:span 2;

    grid-row:span 2;

}

.wide{

    grid-column:span 2;

}

/* CARD */

.destination-item{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    cursor:pointer;

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

}

.destination-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform 8s ease,
        filter .6s;

}

.destination-item:hover img{

    transform:scale(1.15);

    filter:brightness(.8);

}

/* Overlay */

.destination-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    color:#fff;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.65)
    );

}

.destination-overlay h3{

    font-size:2rem;

    margin-bottom:10px;

}

.destination-overlay p{

    opacity:.9;

}

/* Hover */

.destination-item{

    transition:
        transform .45s,
        box-shadow .45s;

}

.destination-item:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 60px rgba(0,0,0,.18);

}

/* Responsive */

@media(max-width:991px){

.destination-grid{

    grid-template-columns:1fr;

}

.large,
.wide{

    grid-column:auto;

    grid-row:auto;

}

}

/* ==========================================
   WHY US
========================================== */

.why-us{

    padding:60px 0;

    background:#ffffff;

    overflow:hidden;

}

.why-image{

    overflow:hidden;

    border-radius:30px;

}

.why-image img{

    width:100%;

    border-radius:30px;

    transition:1s;

}

.why-image:hover img{

    transform:scale(1.08);

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    background:#E8F5E9;

    color:#2E7D32;

    border-radius:40px;

    font-weight:700;

    margin-bottom:8px;

}

.section-title{

    font-size:3rem;

    margin-bottom:10px;

}

.section-text{

    color:#666;

    line-height:1.9;

    margin-bottom:10px;

}

.why-card{

    background:#fff;

    border-radius:22px;

    padding:10px;

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

    transition:.45s;

    height:100%;

}

.why-card:hover{

    transform:translateY(-12px);

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

}

.why-card i{

    font-size:2.6rem;

    color:#2E7D32;

    margin-bottom:8px;

}

.why-card h4{

    margin-bottom:2px;

}

.why-card p{

    color:#666;

    line-height:1.8;

}

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

.experience-video{

    position:relative;

    height:85vh;

    overflow:hidden;

}

.experience-video video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.08);

}

.video-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.25),
        rgba(0,0,0,.45)
    );

}

.video-content{

    position:relative;

    z-index:2;

    height:85vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    max-width:850px;

    margin:auto;

}

.video-tag{

    display:inline-block;

    padding:8px 20px;

    border-radius:40px;

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

    backdrop-filter:blur(12px);

    margin-bottom:15px;

    font-weight:700;

}

.video-content h2{

    font-size:4rem;

    margin-bottom:25px;

}

.video-content p{

    font-size:1.15rem;

    line-height:1.9;

    margin-bottom:20px;

}

.video-content .btn{

    border-radius:50px;

    padding:16px 10px;

}

/* ==========================================
   WHY SECTION
========================================== */

.discover-card{

    position:relative;

    overflow:hidden;

    background:#fff;

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

    transition:.45s;

    min-height:650px;

    display:flex;

    flex-direction:column;

}

/* Card 1 */

.discover-card:nth-child(1){

    border-radius:
        120px 35px
        140px 40px
        / 55px 130px
        45px 140px;

}

/* Card 2 */

.discover-card:nth-child(2){

    border-radius:
        40px 140px
        35px 120px
        / 140px 45px
        130px 60px;

}

/* Card 3 */

.discover-card:nth-child(3){

    border-radius:
        140px 50px
        45px 120px
        / 80px 140px
        60px 120px;

}

/* Card 4 */

.discover-card:nth-child(4){

    border-radius:
        50px 130px
        140px 45px
        / 140px 70px
        120px 55px;

}
.discover-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    display:block;

    transition:1s;

}
.discover-card:hover{
    transform:translateY(-14px);
    box-shadow:0 40px 80px rgba(0,0,0,.16);
}

.discover-card:hover img{
    transform:scale(1.08);
}

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

.discover-section{

    padding:130px 0;
    background:#f7faf7;
    overflow:hidden;

}

.discover-grid{

    display:grid;

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

    gap:45px;

    align-items:start;

}

@media(max-width:992px){

    .discover-grid{

        grid-template-columns:1fr;

    }

}

.discover-content{

    padding:42px 42px 45px;

    flex:1;

}

.discover-content h3{

    margin-bottom:18px;

    font-size:1.9rem;

}

.discover-content p{

    line-height:1.9;

    color:#666;

}

.discover-card:nth-child(1){ transform:rotate(-2deg); }

.discover-card:nth-child(2){ transform:rotate(2deg); }

.discover-card:nth-child(3){ transform:rotate(1.5deg); }

.discover-card:nth-child(4){ transform:rotate(-1.5deg); }

.discover-card:hover{

    transform:translateY(-14px) scale(1.02) rotate(0deg);

}

.regions-section{

    padding:130px 0;

    background:#ffffff;

}

.region-menu{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.region-btn{

    border:none;

    background:#F4F8F4;

    padding:20px;

    border-radius:22px;

    text-align:left;

    font-weight:700;

    transition:.4s;

}

.region-btn:hover,
.region-btn.active{

    background:#2E7D32;

    color:#fff;

    transform:translateX(10px);

}

.region-display{

    position:relative;

    border-radius:35px;

    overflow:hidden;

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

}

.region-display img{

    width:100%;

    height:650px;

    object-fit:cover;

    transition:1s;

}

.region-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.20),
        rgba(0,0,0,.60)

    );

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:40px;

    color:#fff;

}

.region-overlay h3{

    font-size:3rem;

    margin-bottom:20px;

}

.region-overlay p{

    font-size:1.1rem;

    line-height:1.8;

    max-width:600px;

    margin-bottom:15px;

}

/*==========================================
TIMELINE
==========================================*/

.timeline-section{

    padding:130px 0;
    background:#ffffff;

}

.timeline{

    position:relative;
    max-width:1000px;
    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:4px;

    height:100%;

    background:#2E7D32;

    transform:translateX(-50%);

}

.timeline-item{

    width:50%;
    padding:40px;

    position:relative;

}

.timeline-item.left{

    left:0;
    text-align:right;

}

.timeline-item.right{

    left:50%;

}

.timeline-content{

    background:#fff;

    border-radius:30px;

    padding:35px;

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

    transition:.4s;

}

.timeline-content:hover{

    transform:translateY(-12px);

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

}

.timeline-content span{

    color:#2E7D32;

    font-weight:700;

}

.timeline-content h3{

    margin:15px 0;

}

.timeline-content p{

    color:#666;
    line-height:1.8;

}

.timeline-item::after{

    content:"";

    position:absolute;

    top:60px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#2E7D32;

}

.timeline-item.left::after{

    right:-11px;

}

.timeline-item.right::after{

    left:-11px;

}

@media(max-width:992px){

.timeline::before{

    left:25px;

}

.timeline-item{

    width:100%;
    left:0!important;
    padding-left:70px;
    text-align:left;

}

.timeline-item::after{

    left:14px!important;

}

}

/*==========================================
FEATURED DESTINATIONS
==========================================*/

.featured-section{

    padding:70px 0;
    background:#f8faf8;
    overflow:hidden;

}

.featured-layout{
    display:grid;
    grid-template-columns:1.6fr .9fr;
    gap:45px;
    align-items:stretch;
}

.featured-large{

    position:relative;
    overflow:hidden;
    border-radius:45px;
    box-shadow:0 30px 70px rgba(0,0,0,.15);

}

.featured-large img{

    width:100%;
    height:700px;
    object-fit:cover;
    transition:1s;

}

.featured-large:hover img{

    transform:scale(1.08);

}

.featured-overlay{

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    padding:45px;

    color:#fff;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );

}

.featured-overlay span{

    display:inline-block;
    background:#2E7D32;
    padding:8px 18px;
    border-radius:30px;
    margin-bottom:18px;

}

.featured-small{

    display:flex;
    flex-direction:column;
    gap:28px;
    width:100%;

}

.small-card{

    display:flex;
    align-items:center;
    gap:20px;

    width:100%;

    background:#fff;
    border-radius:28px;
    padding:20px;

}

.small-card img{

    width:150px;
    height:120px;
    object-fit:cover;
    border-radius:20px;

}

.small-card:hover{

    transform:translateX(18px);

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

}

.small-card p{

    color:#666;
    margin-top:10px;

}

@media(max-width:992px){

.featured-layout{

    grid-template-columns:1fr;

}

.featured-large img{

    height:420px;

}

.small-card{

    flex-direction:column;
    text-align:center;

}

.small-card img{

    width:100%;
    height:220px;

}

}

/* ==========================================
   EXPLORE BY CATEGORY
========================================== */

.category-section{

    padding:100px 0;
    background:#F8FBF8;
    overflow:hidden;

}

.category-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;

}

.category-card{

    position:relative;
    height:400px;
    overflow:hidden;
    border-radius:40px;
    cursor:pointer;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
    transition:.5s;

}

.category-card img{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;
    object-fit:cover;

    transition:1s;

}

.category-overlay{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:40px;

    color:#fff;

    background:linear-gradient(
        transparent 20%,
        rgba(0,0,0,.78)
    );

}

.category-overlay h3{

    font-size:2rem;
    margin-bottom:15px;

    transform:translateY(40px);
    transition:.45s;

}

.category-overlay p{

    line-height:1.8;

    opacity:0;

    transform:translateY(25px);

    transition:.45s;

}

.category-links{

    display:flex;
    gap:18px;
    align-items:center;
    margin-top:25px;

}

.category-links .btn{

    border-radius:50px;
    padding:12px 28px;

    opacity:0;

    transform:translateY(25px);

    transition:.45s;

}

.learn-link{

    color:#fff;
    font-weight:700;
    text-decoration:none;

    opacity:0;

    transform:translateY(25px);

    transition:.45s;

}

.learn-link:hover{

    color:#FFD54F;
    letter-spacing:1px;

}

.category-card:hover{

    transform:translateY(-12px);

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

}

.category-card:hover img{

    transform:scale(1.12);

}

.category-card:hover h3{

    transform:translateY(0);

}

.category-card:hover p,

.category-card:hover .btn,

.category-card:hover .learn-link{

    opacity:1;
    transform:translateY(0);

}

@media(max-width:992px){

.category-grid{

    grid-template-columns:1fr;

}

.category-card{

    height:360px;

}

}

/* ==========================================
   STATS SECTION
========================================== */

.stats-section{

    position:relative;

    padding:140px 0;

    background:url("../images/stats-bg.jpg") center center/cover fixed;

    overflow:hidden;

}

.stats-overlay{

    position:absolute;

    inset:0;

    background:rgba(8,35,20,.60);

}

.stat-box{

    text-align:center;

    color:#fff;

    padding:45px 25px;

    border-radius:30px;

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

    backdrop-filter:blur(18px);

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

    transition:.45s;

}

.stat-box:hover{

    transform:translateY(-12px) scale(1.03);

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

}

.stat-box h2{

    font-size:4rem;

    font-weight:800;

    color:#FFD54F;

    margin-bottom:15px;

}

.stat-box h5{

    font-size:1.15rem;

    line-height:1.6;

}

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

.experience-section{

    padding:120px 0;

    background:#ffffff;

}

.experience-list{

    display:flex;
    flex-direction:column;
    gap:45px;

}

.experience-card{

    display:grid;
    grid-template-columns:45% 55%;

    align-items:center;

    overflow:hidden;

    background:#fff;

    border-radius:35px;

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

    transition:.5s;

}

.experience-card:nth-child(even){

    direction:rtl;

}

.experience-card:nth-child(even) .experience-info{

    direction:ltr;

}

.experience-card img{

    width:100%;
    height:350px;
    object-fit:cover;
    transition:1s;

}

.experience-card:hover img{

    transform:scale(1.08);

}

.experience-info{

    padding:50px;

}

.experience-info span{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:#E8F5E9;

    color:#2E7D32;

    font-weight:700;

    margin-bottom:18px;

}

.experience-info h3{

    font-size:2.2rem;

    margin-bottom:20px;

}

.experience-info p{

    color:#666;

    line-height:1.9;

    margin-bottom:30px;

}

.experience-card:hover{

    transform:translateY(-12px);

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

}

/* ==========================================
   PLAN SECTION
========================================== */

.plan-section{

    padding:130px 0;
    background:#ffffff;

}

.plan-image{

    position:relative;

}

.plan-image img{

    width:100%;
    border-radius:40px;

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

    transition:1s;

}

.plan-image:hover img{

    transform:scale(1.04);

}

/* Floating cards */

.floating-card{

    position:absolute;

    background:#fff;

    padding:18px 28px;

    border-radius:20px;

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

    text-align:center;

}

.card-one{

    top:40px;
    left:-30px;

}

.card-two{

    bottom:40px;
    right:-30px;

}

.floating-card h5{

    font-size:2rem;
    color:#2E7D32;

    margin-bottom:4px;

}

.floating-card span{

    color:#666;

}

.plan-list{

    margin-top:35px;

}

.plan-item{

    padding:14px 0;

    font-size:1.1rem;

    color:#444;

    border-bottom:1px solid #eee;

}

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

/* ==========================================
   COUNTY SECTION
========================================== */

/* ==========================================
   COUNTY SECTION
========================================== */

.county-section{

    padding:140px 0;
    background:#f6faf7;

}

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

.map-card{

    background:#fff;

    border-radius:40px;

    padding:40px;

    min-height:700px;

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

    box-shadow:0 25px 70px rgba(0,0,0,.08);

    overflow:hidden;

}

#kenya-map{

    width:100%;
    height:100%;

}

#kenyaSVG{

    width:100%;
    height:700px;
    border:none;
}

/* ==========================================
   COUNTY INFO CARD
========================================== */

.county-info{

    background:#fff;

    padding:45px;

    border-radius:35px;

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

    position:sticky;

    top:120px;

}

.county-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:#E8F5E9;

    color:#2E7D32;

    font-weight:700;

    margin-bottom:20px;

}

.county-info h3{

    font-size:2.3rem;

    margin-bottom:25px;

    color:#16351d;

}

.county-info img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:22px;

    margin-bottom:25px;

}

.county-info p{

    color:#666;

    line-height:1.9;

}

.county-info ul{

    margin:25px 0;

    padding-left:20px;

}

.county-info li{

    margin-bottom:12px;

    color:#444;

}

.county-info .btn{

    border-radius:50px;

    padding:15px 38px;

}

/* ==========================================
   SVG COUNTIES
========================================== */

/* Added dynamically by JavaScript */

.county{

    fill:#d8d8d8;
    stroke:#ffffff;
    stroke-width:.7;

    transition:fill .25s;

    cursor:pointer;

}

.county:hover{

    fill:#2E7D32;

}

.county.active{

    fill:#2E7D32;

}

/* ==========================================
   LOADING
========================================== */

.map-loading{

    height:650px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#888;

    font-size:1.15rem;

}

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

@media(max-width:991px){

    .map-card{

        min-height:auto;

        padding:20px;

    }

    #kenyaSVG{

        height:500px;

    }

    .county-info{

        position:relative;

        top:0;

        margin-top:40px;

    }

}

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

.footer-section{

    position:relative;
    overflow:hidden;

    padding:140px 0 40px;


    background:

    /* Yellow glow */
    radial-gradient(
        circle at 85% 15%,
        rgba(255,215,0,.35),
        transparent 35%
    ),


    /* Blue glow */
    radial-gradient(
        circle at 15% 80%,
        rgba(33,150,243,.35),
        transparent 40%
    ),


    /* Green glow */
    radial-gradient(
        circle at 75% 85%,
        rgba(76,175,80,.35),
        transparent 35%
    ),


    /* Red/Pink glow */
    radial-gradient(
        circle at 20% 15%,
        rgba(244,67,54,.35),
        transparent 35%
    ),


    linear-gradient(
        135deg,
        #3A0CA3 0%,
        #7209B7 35%,
        #C9184A 70%,
        #023E8A 100%
    );


    color:white;

}


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


.footer-section::before{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    background:

    radial-gradient(
        circle,
        rgba(255,255,255,.25),
        transparent 65%
    );


    border-radius:50%;

    top:-250px;
    left:-150px;

    filter:blur(60px);

    animation:footerGlow 10s infinite alternate;

}



@keyframes footerGlow{


    from{

        transform:translate(0,0);

    }


    to{

        transform:translate(150px,80px);

    }

}





/* ==========================================
   TOP WAVE
========================================== */


.footer-wave{

    position:absolute;

    top:-1px;

    left:0;

    width:100%;

    line-height:0;

}



.footer-wave svg{

    display:block;

    width:100%;

    height:110px;

}





/* ==========================================
   FLOATING LIGHTS
========================================== */


.footer-light{

    position:absolute;

    border-radius:50%;

    filter:blur(100px);

    opacity:.35;

    pointer-events:none;

}



.light-1{

    width:360px;

    height:360px;

    background:#FF69B4;

    top:-120px;

    left:-120px;

}



.light-2{

    width:300px;

    height:300px;

    background:#8A2BE2;

    top:120px;

    right:-80px;

}



.light-3{

    width:260px;

    height:260px;

    background:#FFD700;

    bottom:-100px;

    left:45%;

}





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


.footer-card{


    position:relative;

    overflow:hidden;


    background:

    linear-gradient(

        145deg,

        rgba(255,255,255,.22),

        rgba(255,255,255,.08)

    );


    backdrop-filter:blur(25px);

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


    border:

    1px solid rgba(255,255,255,.25);


    border-radius:30px;


    padding:38px;


    height:100%;


    transition:.45s;


    box-shadow:

    0 20px 50px rgba(0,0,0,.20);


}



.footer-card::before{


    content:"";


    position:absolute;


    width:150px;

    height:150px;


    top:-60px;

    right:-60px;


    border-radius:50%;


    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.45),

        transparent

    );


}





.footer-card:hover{


    transform:

    translateY(-12px);


    border-color:#FFD166;


    box-shadow:


    0 35px 80px rgba(0,0,0,.35),

    0 0 35px rgba(255,209,102,.4);


}





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


.footer-logo{


    display:inline-block;


    font-size:2.2rem;


    font-weight:900;


    color:white;


    text-decoration:none;


    margin-bottom:20px;


}



.footer-logo span{


    color:#FFD166;


    text-shadow:

    0 0 20px rgba(255,209,102,.8);


}





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


.footer-text{


    color:

    rgba(255,255,255,.92);


    line-height:1.9;


    font-size:1rem;


    margin-bottom:30px;


}





/* ==========================================
   HEADINGS
========================================== */


.footer-card h5{


    position:relative;


    color:white;


    font-size:1.15rem;


    font-weight:800;


    text-transform:uppercase;


    letter-spacing:1.5px;


    margin-bottom:30px;


}



.footer-card h5::after{


    content:"";


    position:absolute;


    left:0;


    bottom:-10px;


    width:60px;


    height:4px;


    border-radius:20px;


    background:

    linear-gradient(

        90deg,

        #FFD166,

        #FF69B4

    );


}





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


.footer-links{


    list-style:none;


    padding:0;

    margin:0;


}



.footer-links li{


    margin-bottom:15px;


}



.footer-links a{


    position:relative;


    color:

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


    text-decoration:none;


    transition:.35s;


}



.footer-links a::after{


    content:"";


    position:absolute;


    left:0;


    bottom:-5px;


    width:0;


    height:2px;


    background:#FFD166;


    transition:.35s;


}



.footer-links a:hover{


    color:#FFD166;


    padding-left:10px;


}



.footer-links a:hover::after{


    width:100%;


}





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


.footer-contact{


    list-style:none;


    padding:0;

    margin:0;


}



.footer-contact li{


    display:flex;


    gap:15px;


    align-items:flex-start;


    margin-bottom:20px;


    color:

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


    line-height:1.7;


}



.footer-contact i{


    color:#FFD166;


    font-size:1.2rem;


    filter:

    drop-shadow(
        0 0 8px rgba(255,209,102,.8)
    );


}





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


.footer-social{


    display:flex;


    gap:15px;


    flex-wrap:wrap;


}



.footer-social a{


    width:55px;


    height:55px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

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


    border:

    1px solid rgba(255,255,255,.25);


    color:white;


    transition:.4s;


}



.footer-social a:hover{


    background:

    linear-gradient(

        135deg,

        #FF69B4,

        #FFD166

    );


    transform:

    translateY(-8px)
    rotate(360deg);


    box-shadow:


    0 0 35px rgba(255,105,180,.7);


}





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


.footer-bottom{


    margin-top:70px;


    padding-top:30px;


    border-top:

    1px solid rgba(255,255,255,.25);


    display:flex;


    justify-content:space-between;


    align-items:center;


    flex-wrap:wrap;


    gap:20px;


}



.footer-bottom p{


    margin:0;


    color:

    rgba(255,255,255,.85);


}



.footer-bottom strong{


    color:white;


}



.footer-bottom-links{


    display:flex;


    gap:30px;


    flex-wrap:wrap;


}



.footer-bottom-links a{


    color:white;


    text-decoration:none;


    transition:.3s;


}



.footer-bottom-links a:hover{


    color:#FFD166;


}





/* ==========================================
   HEART
========================================== */


.heart{


    color:#FF1744;


    animation:pulse 1.5s infinite;


}



@keyframes pulse{


    0%,100%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.3);

    }

}





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


#backToTop{


    position:fixed;


    right:35px;


    bottom:35px;


    width:58px;


    height:58px;


    border:none;


    border-radius:50%;


    background:

    linear-gradient(

        135deg,

        #FF69B4,

        #FFD166

    );


    color:white;


    cursor:pointer;


    z-index:999;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:1.2rem;


    box-shadow:


    0 15px 35px rgba(0,0,0,.3);


    transition:.35s;


}



#backToTop:hover{


    transform:

    translateY(-6px)
    scale(1.1);


    box-shadow:

    0 0 35px rgba(255,105,180,.8);


}





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


@media(max-width:991px){


    .footer-section{


        padding:100px 0 40px;


    }


    .footer-bottom{


        justify-content:center;


        text-align:center;


    }


}



@media(max-width:768px){


    .footer-card{


        padding:28px;


    }



    .footer-logo{


        font-size:1.8rem;


    }



    .footer-social{


        justify-content:center;


    }



    .footer-bottom-links{


        justify-content:center;


    }


}