/* ==================================================
   BURAKEYE SAFARI
   RESPONSIVE HEADER
================================================== */


/* ==================================================
   HEADER HEIGHT VARIABLES
================================================== */

:root {
    --header-height: 88px;
}


/* ==================================================
   TABLET HEADER
   ≤ 992px
================================================== */

@media (max-width: 992px) {

    :root {
        --header-height: 80px;
    }

}


/* ==================================================
   MOBILE HEADER
   ≤ 768px
================================================== */

@media (max-width: 768px) {

    :root {
        --header-height: 76px;
    }

}


/* ==================================================
   SMALL PHONE HEADER
   ≤ 576px
================================================== */

@media (max-width: 576px) {

    :root {
        --header-height: 72px;
    }

}


/* ==================================================
   LARGE TABLETS
   ≤ 1200px
================================================== */

@media (max-width: 1200px) {

    .navbar {
        gap: 2rem;
    }

    .nav-menu {
        gap: 1.4rem;
    }

}


/* ==================================================
   TABLETS & MOBILE
   ≤ 992px
================================================== */

@media (max-width: 992px) {

    /* ----------------------------------------------
       SITE HEADER
    ---------------------------------------------- */

    .site-header {
        min-height: var(--header-height);
    }


    /* ----------------------------------------------
       NAVBAR
    ---------------------------------------------- */

    .navbar {

        position: relative;

        grid-template-columns:
            auto 1fr auto;

        min-height: var(--header-height);

        gap: 1.25rem;

    }


    /* ----------------------------------------------
       DESKTOP NAVIGATION
    ---------------------------------------------- */

    .nav-menu {
        display: none;
    }


    /* ----------------------------------------------
       DESKTOP BOOKING BUTTON
    ---------------------------------------------- */

    .btn-book {
        display: none;
    }


    /* ----------------------------------------------
       MOBILE MENU TOGGLE
    ---------------------------------------------- */

    .menu-toggle {

        display: flex;

        align-items: center;

        justify-content: center;

        position: relative;

        z-index: 10001;

    }


    /* ----------------------------------------------
       OPEN MOBILE NAVIGATION
    ---------------------------------------------- */

    .nav-menu.active {

        display: flex;

        position: fixed;

        top: var(--header-height);

        left: 0;

        right: 0;

        width: 100%;

        max-width: none;

        max-height:
            calc(100dvh - var(--header-height));

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 0;

        margin: 0;

        padding: 1rem 1.5rem 1.5rem;

        background:
            linear-gradient(
                180deg,
                var(--primary-color) 0%,
                var(--primary-dark) 100%
            );

        box-shadow: var(--shadow-lg);

        border-top:
            1px solid rgba(255, 255, 255, .08);

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior: contain;

        z-index: 10000;

        list-style: none;

    }


    /* ----------------------------------------------
       MOBILE MENU ITEMS
    ---------------------------------------------- */

    .nav-menu.active li {

        width: 100%;

        margin: 0;

        padding: 0;

        list-style: none;

    }


    /* ----------------------------------------------
       MOBILE MENU LINKS
    ---------------------------------------------- */

    .nav-menu.active a {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        width: 100%;

        padding: 1rem 0;

        color: var(--white);

        font-size: 1rem;

        font-weight: 600;

        line-height: 1.4;

        text-decoration: none;

        border-bottom:
            1px solid rgba(255, 255, 255, .08);

        transition:
            color .25s ease,
            padding-left .25s ease;

    }


    /* ----------------------------------------------
       REMOVE DESKTOP ACTIVE INDICATOR
    ---------------------------------------------- */

    .nav-menu.active a::after {
        display: none;
    }


    /* ----------------------------------------------
       MOBILE LINK HOVER
    ---------------------------------------------- */

    .nav-menu.active a:hover {

        color: var(--secondary-color);

        padding-left: .5rem;

    }


    /* ----------------------------------------------
       ACTIVE PAGE
    ---------------------------------------------- */

    .nav-menu.active a.active {
        color: var(--secondary-color);
    }

}


/* ==================================================
   MOBILE
   ≤ 768px
================================================== */

@media (max-width: 768px) {

    /* ----------------------------------------------
       HEADER
    ---------------------------------------------- */

    .site-header {
        min-height: var(--header-height);
    }


    /* ----------------------------------------------
       NAVBAR
    ---------------------------------------------- */

    .navbar {

        min-height: var(--header-height);

        gap: 1rem;

    }


    /* ----------------------------------------------
       LOGO
    ---------------------------------------------- */

    .logo {
        gap: .75rem;
    }


    .logo img {

        width: 50px;

        height: 50px;

    }


    /* Hide desktop name */

    .logo-desktop {
        display: none;
    }


    /* Show mobile name */

    .logo-mobile {

        display: block;

        font-size: 1.25rem;

    }


    /* ----------------------------------------------
       MOBILE MENU
    ---------------------------------------------- */

    .nav-menu.active {

        padding-left: 1.5rem;

        padding-right: 1.5rem;

    }

}


/* ==================================================
   SMALL PHONES
   ≤ 576px
================================================== */

@media (max-width: 576px) {

    /* ----------------------------------------------
       HEADER
    ---------------------------------------------- */

    .site-header {
        min-height: var(--header-height);
    }


    /* ----------------------------------------------
       NAVBAR
    ---------------------------------------------- */

    .navbar {

        min-height: var(--header-height);

        gap: .75rem;

    }


    /* ----------------------------------------------
       CONTAINER
    ---------------------------------------------- */

    .container {
        padding-inline: 1rem;
    }


    /* ----------------------------------------------
       LOGO
    ---------------------------------------------- */

    .logo {
        gap: .65rem;
    }


    .logo img {

        width: 46px;

        height: 46px;

    }


    .logo-mobile {
        font-size: 1.1rem;
    }


    /* ----------------------------------------------
       MENU BUTTON
    ---------------------------------------------- */

    .menu-toggle {

        width: 44px;

        height: 44px;

        font-size: 1.25rem;

    }


    /* ----------------------------------------------
       OPEN MENU
    ---------------------------------------------- */

    .nav-menu.active {

        padding:
            .75rem 1.25rem 1.25rem;

    }


    .nav-menu.active a {

        padding: .9rem 0;

        font-size: .98rem;

    }

}


/* ==================================================
   EXTRA SMALL PHONES
   ≤ 400px
================================================== */

@media (max-width: 400px) {

    /* ----------------------------------------------
       CONTAINER
    ---------------------------------------------- */

    .container {
        padding-inline: .85rem;
    }


    /* ----------------------------------------------
       LOGO
    ---------------------------------------------- */

    .logo img {

        width: 42px;

        height: 42px;

    }


    .logo-mobile {
        font-size: 1rem;
    }


    /* ----------------------------------------------
       MENU BUTTON
    ---------------------------------------------- */

    .menu-toggle {

        width: 42px;

        height: 42px;

        font-size: 1.2rem;

    }


    /* ----------------------------------------------
       OPEN MENU
    ---------------------------------------------- */

    .nav-menu.active {

        padding:
            .65rem 1rem 1rem;

    }


    .nav-menu.active a {

        padding: .85rem 0;

        font-size: .95rem;

    }

}
}
/*==================================================
                    FOOTER
                RESPONSIVE STYLES
==================================================*/


/*==================================================
                LARGE TABLETS
                1200px and below
==================================================*/

@media (max-width: 1200px) {

    .footer-grid {

        grid-template-columns:
            1.4fr 1fr 1fr 1fr;

        gap: 2rem;

    }

    .footer-about {

        max-width: 300px;

    }

    .footer-contact span,
    .footer-contact a {

        font-size: .85rem;

    }

}


/*==================================================
                    TABLET
                992px and below
==================================================*/

@media (max-width: 992px) {

    .footer {

        padding-top: 3rem;

    }

    .footer-grid {

        grid-template-columns:
            1.4fr 1fr 1fr;

        gap: 2.25rem 1.75rem;

    }

    .footer-about {

        max-width: 100%;

    }

    .footer-description {

        max-width: 38ch;

    }

    .footer-social-row {

        margin-top: 2.25rem;

    }

    .footer-social-row .container {

        gap: 1.5rem;

    }

    .footer-bottom-content {

        align-items: flex-start;

    }

}


/*==================================================
                SMALL TABLET
                768px and below
==================================================*/

@media (max-width: 768px) {

    .footer {

        padding-top: 2.75rem;

    }


    /*----------------------------------------------
                    FOOTER GRID
    ----------------------------------------------*/

    .footer-grid {

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

        gap: 2rem 1.5rem;

    }


    /*----------------------------------------------
                    COMPANY
    ----------------------------------------------*/

    .footer-about {

        grid-column: 1 / -1;

        max-width: 100%;

    }

    .footer-description {

        max-width: 55ch;

    }


    /*----------------------------------------------
                    SOCIAL ROW
    ----------------------------------------------*/

    .footer-social-row {

        margin-top: 2rem;

        padding: 1.25rem 0;

    }

    .footer-social-row .container {

        flex-direction: column;

        justify-content: center;

        text-align: center;

        gap: 1rem;

    }

    .social-icons {

        justify-content: center;

    }


    /*----------------------------------------------
                    BRAND MESSAGE
    ----------------------------------------------*/

    .footer-message {

        padding: 1rem 0;

    }

    .footer-message p {

        font-size: .82rem;

    }


    /*----------------------------------------------
                    FOOTER BOTTOM
    ----------------------------------------------*/

    .footer-bottom {

        padding: 1rem 0;

    }

    .footer-bottom-content {

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

        gap: .75rem;

    }

    .footer-bottom-links {

        justify-content: center;

        gap: .75rem 1.1rem;

    }

}


/*==================================================
                    MOBILE
                576px and below
==================================================*/

@media (max-width: 576px) {

    .footer {

        padding-top: 2.5rem;

    }


    /*----------------------------------------------
                    FOOTER GRID
    ----------------------------------------------*/

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 1.75rem;

    }


    /*----------------------------------------------
                    COMPANY
    ----------------------------------------------*/

    .footer-about {

        grid-column: auto;

        text-align: center;

    }

    .footer-logo {

        width: 70px;

        height: 70px;

        margin-bottom: .85rem;

    }

    .footer-logo img {

        width: 70px;

        height: 70px;

    }

    .footer-description {

        max-width: 42ch;

        margin-left: auto;

        margin-right: auto;

        font-size: .86rem;

        line-height: 1.55;

    }

    .footer-cta {

        margin-top: .15rem;

    }


    /*----------------------------------------------
                    COLUMN HEADINGS
    ----------------------------------------------*/

    .footer-column:not(.footer-about) {

        text-align: center;

    }

    .footer-column h3 {

        margin-bottom: .85rem;

    }

    .footer-column h3::after {

        left: 50%;

        transform: translateX(-50%);

    }


    /*----------------------------------------------
                    LINKS
    ----------------------------------------------*/

    .footer-column ul {

        display: flex;

        flex-direction: column;

        align-items: center;

    }

    .footer-column li:not(:last-child) {

        margin-bottom: .45rem;

    }

    .footer-column a {

        justify-content: center;

        font-size: .86rem;

    }


    /*----------------------------------------------
                    CONTACT
    ----------------------------------------------*/

    .footer-contact {

        justify-items: center;

    }

    .footer-contact li {

        align-items: center;

        justify-content: center;

        text-align: left;

    }


    /*----------------------------------------------
                    SOCIAL
    ----------------------------------------------*/

    .footer-social-row {

        margin-top: 1.75rem;

        padding: 1.15rem 0;

    }

    .footer-social-row h3 {

        font-size: 1.1rem;

    }

    .social-icons {

        gap: .6rem;

    }

    .social-icons a {

        width: 44px;

        height: 44px;

        font-size: .9rem;

    }


    /*----------------------------------------------
                    MESSAGE
    ----------------------------------------------*/

    .footer-message {

        padding: .9rem 0;

    }

    .footer-message p {

        font-size: .78rem;

        line-height: 1.5;

    }


    /*----------------------------------------------
                    BOTTOM
    ----------------------------------------------*/

    .footer-bottom {

        padding: .9rem 0;

    }

    .footer-bottom p {

        font-size: .76rem;

    }

    .footer-bottom-links {

        gap: .5rem .9rem;

    }

    .footer-bottom-links a {

        font-size: .76rem;

    }

}


/*==================================================
                VERY SMALL PHONES
                400px and below
==================================================*/

@media (max-width: 400px) {

    .footer {

        padding-top: 2.25rem;

    }

    .footer-description {

        font-size: .82rem;

    }

    .footer-cta {

        width: 100%;

        max-width: 280px;

    }

    .social-icons a {

        width: 42px;

        height: 42px;

    }

    .footer-bottom-links {

        flex-direction: column;

        gap: .45rem;

    }

}

/*==================================================
                LARGE LAPTOPS
==================================================*/

@media (max-width:1200px) {

    .hero-content {

        max-width: 42rem;

    }

    .hero-title {

        font-size: clamp(3rem, 6vw, 5.2rem);

    }

}


/*==================================================
                TABLET
==================================================*/

@media (max-width:992px) {

    .hero {

        min-height: auto;

        padding:
            calc(var(--header-height) + 2.5rem) 0 5rem;

    }

    .hero-title {

        max-width: 12ch;

        font-size: clamp(3rem, 7vw, 4.8rem);

    }

    .hero-text {

        max-width: 36rem;

    }

    .hero-highlights {

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

        width: 100%;

    }

    .highlight:last-child {

        width: 100%;

    }

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

@media (max-width:768px) {

    .hero {

        text-align: center;

        min-height: auto;

        padding:
            calc(var(--header-height) + 2rem) 0 4rem;

    }

    .hero .container {

        justify-content: center;

    }

    .hero-content {

        max-width: 100%;

    }

    .hero-tag {

        margin-inline: auto;

    }

    .hero-title {

        max-width: none;

        font-size: clamp(2.5rem, 11vw, 3.9rem);

    }

    .hero-text {

        margin-inline: auto;

        font-size: 1rem;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-buttons .btn {

        width: 100%;

    }

    .hero-highlights {

        grid-template-columns: 1fr;

    }

    .highlight,

    .highlight:last-child {

        width: 100%;

        grid-column: auto;

    }

    .hero-scroll {

        display: none;

    }

}


/*==================================================
                SMALL PHONES
==================================================*/

@media (max-width:480px) {

    .hero {

        padding-top:

            calc(var(--header-height) + 1.5rem);

    }

    .hero-tag {

        font-size: .72rem;

        padding: .65rem 1rem;

    }

    .hero-title {

        font-size: 2.3rem;

    }

    .hero-text {

        font-size: .95rem;

    }

    .highlight strong {

        font-size: 2rem;

    }

}

/*==================================================
    WHY US SECTION - LARGE TABLETS (1200px)
==================================================*/

@media (max-width:1200px) {

    .why-grid {

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

        gap: 1.75rem;

    }

}


/*==================================================
    WHY US SECTION - TABLETS (992px)
==================================================*/

@media (max-width:992px) {

    .section-heading {

        margin-bottom: 3.5rem;

    }

    .feature-card {

        padding: 2.5rem 2rem;

    }

    .feature-icon {

        width: 80px;
        height: 80px;

        font-size: 1.8rem;

        margin-bottom: 1.5rem;

    }

    .feature-card h3 {

        font-size: 1.4rem;

    }

}


/*==================================================
    WHY US SECTION - MOBILE (768px)
==================================================*/

@media (max-width:768px) {

    .why-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    .feature-card {

        padding: 2.25rem 1.75rem;

    }

    .feature-icon {

        width: 74px;
        height: 74px;

        font-size: 1.65rem;

    }

}


/*==================================================
    WHY US SECTION - SMALL MOBILE (576px)
==================================================*/

@media (max-width:576px) {

    .section-heading {

        margin-bottom: 2.5rem;

    }

    .feature-card {

        padding: 2rem 1.5rem;

        border-radius: 20px;

    }

    .feature-card h3 {

        font-size: 1.3rem;

    }

    .feature-card p {

        font-size: .95rem;

        line-height: 1.75;

    }

}

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

@media(max-width:1200px) {

    .signature-grid {

        grid-template-columns: 1fr;

    }

    .price-card {

        position: relative;

        top: auto;

    }

}

@media(max-width:992px) {

    .package-features {

        grid-template-columns: 1fr;

    }

    .package-facts {

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

    }

}

@media(max-width:768px) {

    .signature-grid {

        gap: 2rem;

    }

    .signature-image img {

        min-height: 420px;

    }

    .package-facts {

        grid-template-columns: 1fr;

    }

    .package-buttons {

        flex-direction: column;

    }

}

@media(max-width:576px) {

    .price {

        font-size: 2.4rem;

    }

    .signature-overview h3 {

        font-size: 2rem;

    }

    .fact-card {

        padding: 1.75rem;

    }

}

/*==================================================
        992px
==================================================*/

@media (max-width:992px){

    .featured-layout{

        grid-template-columns:1fr;

    }

    .featured-image img{

        height:360px;

    }

    .highlights-grid{

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

    }

    .booking-panel{

        flex-direction:column;

        text-align:center;

    }

}

/*==================================================
        768px
==================================================*/

@media (max-width:768px){

    .featured-safari{

        padding:4rem 0;

    }

    .featured-image img{

        height:300px;

    }

    .overview-list{

        grid-template-columns:1fr;

    }

    .highlights-grid{

        grid-template-columns:1fr;

    }

    .package-buttons{

        width:100%;

        flex-direction:column;

    }

    .package-buttons .btn{

        width:100%;

        justify-content:center;

    }

}

/*==================================================
        576px
==================================================*/

@media (max-width:576px){

    .section-heading{

        margin-bottom:2rem;

    }

    .featured-layout{

        gap:2rem;

    }

    .highlights-section{

        margin-top:2rem;

    }

    .booking-panel{

        margin-top:2rem;

        padding:1.5rem;

    }

    .price{

        font-size:2.3rem;

    }

}
/*=========================================
DESTINATIONS - 1200px
=========================================*/

@media (max-width:1200px) {

    .destination-grid {

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

        gap: 1.5rem;

    }

    .destination-content {

        padding: var(--space-3);

    }

}

/*=========================================
DESTINATIONS - 992px
=========================================*/

@media (max-width:992px) {

    .destination-grid {

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

    }

    .destination-image img {

        aspect-ratio: 16 / 9;

    }

}

/*=========================================
DESTINATIONS - 768px
=========================================*/

@media (max-width:768px) {

    .destination-grid {

        grid-template-columns: 1fr;

        gap: var(--grid-gap);

    }

    .destination-card {

        max-width: 600px;

        margin-inline: auto;

    }

    .destination-content {

        text-align: center;

    }

    .destination-content a {

        justify-content: center;

    }

}

/*=========================================
COLLECTIONS 
=========================================*/

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

@media (max-width:1400px) {

    .collection-grid {

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

    }

}

@media (max-width:1200px) {

    .collection-grid {

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

    }

}

@media (max-width:992px) {

    .collection-featured {

        grid-template-columns: 1fr;

    }

    .collection-card.featured {

        padding: 2.5rem;

    }

}

@media (max-width:768px) {

    .collection-grid {

        grid-template-columns: 1fr;

    }

    .collection-featured {

        gap: 1.5rem;

    }

    .collection-card {

        padding: 2rem;

    }

    .collection-card.featured {

        padding: 2rem;

    }

    .collection-icon {

        width: 72px;

        height: 72px;

    }

    .collection-icon i {

        font-size: 1.8rem;

    }

    .collection-card.featured .collection-icon {

        width: 90px;

        height: 90px;

    }

    .collection-card.featured .collection-icon i {

        font-size: 2.5rem;

    }

}

@media (max-width:576px) {

    .collection-card {

        padding: 1.75rem;

        border-radius: 20px;

    }

    .collection-card h3 {

        font-size: 1.35rem;

    }

    .collection-card.featured h3 {

        font-size: 1.75rem;

    }

    .collection-card p {

        font-size: .95rem;

    }

    .collection-icon {

        width: 64px;

        height: 64px;

        border-radius: 18px;

    }

    .collection-icon i {

        font-size: 1.6rem;

    }

}

/*=========================================
BOOKING PROCESS - 1200px
=========================================*/

@media (max-width:1200px) {

    .process-grid {

        gap: 1.5rem;

    }

}

/*=========================================
BOOKING PROCESS - 992px
=========================================*/

@media (max-width:992px) {

    .process-grid {

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

    }

}

/*=========================================
BOOKING PROCESS - 768px
=========================================*/

@media (max-width:768px) {

    .process-grid {

        grid-template-columns: 1fr;

    }

    .process-card {

        max-width: 600px;

        margin-inline: auto;

    }

}

/*=========================================
BOOKING PROCESS - 576px
=========================================*/

@media (max-width:576px) {

    .process-card {

        max-width: 100%;

        padding: var(--space-4);

    }

    .process-number {

        width: 38px;

        height: 38px;

        font-size: .85rem;

    }

}

/*=========================================
TESTIMONIALS - 1200px
=========================================*/

@media (max-width:1200px) {

    .testimonial-grid {

        gap: 1.5rem;

    }

}

/*=========================================
TESTIMONIALS - 992px
=========================================*/

@media (max-width:992px) {

    .testimonial-grid {

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

    }

}

/*=========================================
TESTIMONIALS - 768px
=========================================*/

@media (max-width:768px) {

    .testimonial-grid {

        grid-template-columns: 1fr;

    }

    .testimonial-card {

        max-width: 650px;

        margin-inline: auto;

    }

}

/*=========================================
TESTIMONIALS - 576px
=========================================*/

@media (max-width:576px) {

    .testimonial-card {

        padding: var(--space-4);

    }

    .testimonial-avatar {

        width: 56px;

        height: 56px;

        font-size: 1rem;

    }

    .author-info h4 {

        font-size: 1.1rem;

    }

}

/*=========================================
CTA - 1200px
=========================================*/

@media (max-width:1200px) {

    .cta-content {

        max-width: 800px;

    }

}

/*=========================================
CTA - 992px
=========================================*/

@media (max-width:992px) {

    .cta-trust {

        gap: var(--space-4);

    }

}

/*=========================================
CTA - 768px
=========================================*/

@media (max-width:768px) {

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    .cta-trust {

        flex-direction: column;

        align-items: center;

        gap: var(--space-3);

    }

}

/*=========================================
CTA - 576px
=========================================*/

@media (max-width:576px) {

    .cta-content h2 {

        line-height: 1.25;

    }

    .cta-content>p {

        margin-bottom: var(--space-3);

    }

    .cta-note {

        margin-bottom: var(--space-4);

    }

}


/*=========================================
PACKAGES HERO - 1200px
=========================================*/

@media (max-width:1200px) {

    .packages-hero-content {

        max-width: 800px;

    }

}

/*=========================================
PACKAGES HERO - 992px
=========================================*/

@media (max-width:992px) {

    .packages-hero {

        min-height: 80vh;

    }

}

/*=========================================
PACKAGES HERO - 768px
=========================================*/

@media (max-width:768px) {

    .packages-hero {

        min-height: 75vh;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }

}

/*=========================================
PACKAGES HERO - 576px
=========================================*/

@media (max-width:576px) {

    .packages-hero {

        min-height: 70vh;

    }

    .packages-hero-content p {

        margin-bottom: var(--space-4);

    }

}

/*=========================================
PACKAGE INTRODUCTION - 1200px
=========================================*/

@media (max-width:1200px) {

    .intro-content {

        max-width: 820px;

    }

}

/*=========================================
PACKAGE INTRODUCTION - 992px
=========================================*/

@media (max-width:992px) {

    .intro-content {

        max-width: 700px;

    }

}

/*=========================================
PACKAGE INTRODUCTION - 768px
=========================================*/

@media (max-width:768px) {

    .intro-content {

        max-width: 100%;

    }

}

/*=========================================
PACKAGE INTRODUCTION - 576px
=========================================*/

@media (max-width:576px) {

    .intro-content p {

        font-size: .95rem;

        line-height: 1.8;

    }

}

/*=========================================
PACKAGE CATEGORIES - 1200px
=========================================*/

@media (max-width:1200px) {

    .category-grid {

        gap: var(--grid-gap-sm);

    }

}

/*=========================================
PACKAGE CATEGORIES - 992px
=========================================*/

@media (max-width:992px) {

    .category-grid {

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

    }

}

/*=========================================
PACKAGE CATEGORIES - 768px
=========================================*/

@media (max-width:768px) {

    .category-grid {

        grid-template-columns: 1fr;

    }

    .category-image {

        height: 320px;

    }

}

/*=========================================
PACKAGE CATEGORIES - 576px
=========================================*/

@media (max-width:576px) {

    .category-image {

        height: 280px;

    }

    .category-overlay {

        padding: var(--space-3);

    }

}

/*=========================================
SAFARI PACKAGES - 1200px
=========================================*/

@media (max-width:1200px) {

    .package-grid {

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

        gap: var(--grid-gap-sm);

    }

    .package-buttons .btn {

        width: 170px;

    }

}

/*=========================================
SAFARI PACKAGES - 992px
=========================================*/

@media (max-width:992px) {

    .package-grid {

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

    }

    .package-content {

        padding: var(--space-3);

    }

    .package-buttons .btn {

        width: 180px;

    }

}

/*=========================================
SAFARI PACKAGES - 768px
=========================================*/

@media (max-width:768px) {

    .package-grid {

        grid-template-columns: 1fr;

    }

    .package-image img {

        height: 240px;

    }

    .package-buttons {

        width: 100%;

    }

    .package-buttons .btn {

        width: 100%;

    }

}

/*=========================================
SAFARI PACKAGES - 576px
=========================================*/

@media (max-width:576px) {

    .package-content {

        padding: var(--space-2);

    }

    .package-image img {

        height: 200px;

    }

    .package-duration {

        font-size: .8rem;

    }

    .package-content h3 {

        font-size: 1.6rem;

    }

    .package-content p {

        font-size: .95rem;

    }

    .package-footer h4 {

        font-size: 1.25rem;

    }

}

/*=========================================
WHY BOOK - 1200px
=========================================*/

@media (max-width:1200px) {

    .why-grid {

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

    }

}

/*=========================================
WHY BOOK - 992px
=========================================*/

@media (max-width:992px) {

    .why-grid {

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

        gap: var(--grid-gap-sm);

    }

}

/*=========================================
WHY BOOK - 768px
=========================================*/

@media (max-width:768px) {

    .why-grid {

        grid-template-columns: 1fr;

    }

}

/*=========================================
WHY BOOK - 576px
=========================================*/

@media (max-width:576px) {

    .why-card {

        padding: var(--space-3);

    }

}

/*=========================================
CTA - 1200px
=========================================*/

@media (max-width:1200px) {

    .cta-content {

        max-width: 760px;

    }

}

/*=========================================
CTA - 992px
=========================================*/

@media (max-width:992px) {

    .cta-content h2 {

        font-size: clamp(2.2rem, 5vw, 3.3rem);

    }

}

/*=========================================
CTA - 768px
=========================================*/

@media (max-width:768px) {

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    .cta-buttons .btn {

        width: 100%;

        max-width: 320px;

    }

    .cta-trust {

        flex-direction: column;

        gap: var(--space-3);

    }

}

/*=========================================
CTA - 576px
=========================================*/

@media (max-width:576px) {

    .cta-content h2 {

        font-size: 2rem;

    }

    .cta-content>p {

        font-size: .95rem;

    }

}

/*=========================================
EXPERIENCES HERO - 1200px
=========================================*/

@media (max-width:1200px) {

    .experiences-content {

        max-width: 800px;

    }

}

/*=========================================
        TABLET
=========================================*/

@media (max-width:992px) {

    .experiences-hero {

        min-height: 90vh;

    }

    .experiences-content h1 {

        font-size: clamp(2.6rem, 7vw, 4rem);

    }

    .experiences-content p {

        font-size: 1rem;

    }

}

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

@media (max-width:768px) {

    .experiences-hero {

        min-height: 85vh;

        padding: 7rem 0 5rem;

    }

    .hero-tag {

        font-size: .8rem;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }

    .hero-buttons .btn {

        width: 100%;

        max-width: 320px;

    }

    .hero-highlights {

        gap: .8rem;

    }

    .hero-highlight {

        width: 100%;

        justify-content: center;

    }

}

@media (max-width:480px) {

    .experiences-content h1 {

        font-size: 2.4rem;

    }

    .experiences-content p {

        font-size: .95rem;

        line-height: 1.8;

    }

}

/*=========================================
MORE THAN A SAFARI - 1200px
=========================================*/

@media (max-width:1200px) {

    .intro-content {

        max-width: 820px;

    }

}

@media (max-width:992px) {

    .intro-grid {

        grid-template-columns: 1fr;

        gap: 3rem;

    }

}

@media (max-width:768px) {

    .highlight-item {

        padding: 1.25rem;

    }

}

@media (max-width:576px) {

    .highlight-item {

        flex-direction: column;

        text-align: center;

        align-items: center;

    }

}

/*==================================================
        EXPERIENCES SECTION RESPONSIVE
==================================================*/

/*=========================================
        LARGE DESKTOPS (≤ 1400px)
=========================================*/

@media (max-width: 1400px) {

    .experience-grid {

        gap: 1.8rem;

    }

}

/*=========================================
        SMALL DESKTOPS (≤ 1200px)
=========================================*/

@media (max-width: 1200px) {

    .experience-grid {

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

        gap: 2rem;

    }

    .experience-image {

        height: 250px;

    }

}

/*=========================================
        TABLETS (≤ 992px)
=========================================*/

@media (max-width: 992px) {

    .experience-content {

        padding: 1.8rem;

    }

    .experience-content h3 {

        font-size: 1.4rem;

    }

    .experience-content p {

        font-size: .96rem;

    }

}

/*=========================================
        MOBILE DEVICES (≤ 768px)
=========================================*/

@media (max-width: 768px) {

    .experience-grid {

        grid-template-columns: 1fr;

        gap: 1.8rem;

    }

    .experience-image {

        height: 240px;

    }

    .experience-content {

        padding: 1.6rem;

    }

    .experience-content i {

        width: 58px;

        height: 58px;

        font-size: 1.35rem;

    }

}

/*=========================================
        SMALL MOBILE (≤ 576px)
=========================================*/

@media (max-width: 576px) {

    .experience-image {

        height: 220px;

    }

    .experience-content {

        padding: 1.4rem;

    }

    .experience-content h3 {

        font-size: 1.25rem;

    }

    .experience-content p {

        font-size: .95rem;

        line-height: 1.7;

    }

}

/*=========================================
        EXTRA SMALL DEVICES (≤ 400px)
=========================================*/

@media (max-width: 400px) {

    .experience-image {

        height: 200px;

    }

    .experience-content {

        padding: 1.25rem;

    }

    .experience-content i {

        width: 52px;

        height: 52px;

        font-size: 1.2rem;

    }

    .experience-content h3 {

        font-size: 1.15rem;

    }

}

/*==================================================
        FEATURED EXPERIENCE RESPONSIVE
==================================================*/

/*=========================================
        SMALL DESKTOPS
=========================================*/

@media (max-width:1200px) {

    .featured-grid {

        gap: 3rem;

    }

    .featured-image img {

        height: 560px;

    }

}

/*=========================================
        TABLETS
=========================================*/

@media (max-width:992px) {

    .featured-grid {

        grid-template-columns: 1fr;

    }

    .featured-image {

        order: -1;

    }

    .featured-image img {

        height: 500px;

    }

    .featured-highlights {

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

    }

}

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

@media (max-width:768px) {

    .featured-highlights {

        grid-template-columns: 1fr;

    }

    .featured-list {

        grid-template-columns: 1fr;

    }

    .featured-buttons {

        flex-direction: column;

    }

    .featured-buttons .btn {

        width: 100%;

        justify-content: center;

    }

    .featured-image img {

        height: 380px;

    }

}

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

@media (max-width:576px) {

    .featured-image img {

        height: 300px;

    }

    .highlight-card {

        padding: 1.3rem;

    }

    .highlight-card h3 {

        font-size: 1.6rem;

    }

    .featured-image figcaption {

        left: 1.25rem;

        bottom: 1.25rem;

        font-size: .9rem;

    }

}
/*==================================================
        WHY BURAKEYE RESPONSIVE
==================================================*/

@media (max-width:1200px) {

    .stats-grid {

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

    }

}

@media (max-width:768px) {

    .stats-grid {

        grid-template-columns: 1fr;

    }

    .stat-card {

        padding: 2rem;

    }

}

@media (max-width:576px) {

    .stat-icon {

        width: 60px;

        height: 60px;

        font-size: 1.3rem;

    }

}
/*=========================================
        EXPERIENCE STATS - 1200px
=========================================*/

@media (max-width:1200px) {

    .stats-grid {

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

    }

}

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

@media (max-width:1200px) {

    .gallery-grid {

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

    }

    .gallery-large {

        grid-row: span 1;

        grid-column: span 2;

        height: 420px;

    }

}

@media (max-width:768px) {

    .gallery-grid {

        grid-template-columns: 1fr;

        grid-auto-rows: 260px;

    }

    .gallery-large {

        grid-column: auto;

        height: auto;

    }

}

@media (max-width:576px) {

    .gallery-grid {

        grid-auto-rows: 220px;

    }

    .gallery-item figcaption {

        left: 1.25rem;

        bottom: 1.25rem;

    }

    .gallery-item h3 {

        font-size: 1.2rem;

    }

}

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

@media (max-width:1200px) {

    .faq-grid {

        grid-template-columns: 1fr;

    }

    .faq-card {

        position: static;

    }

}

@media (max-width:768px) {

    .faq-question {

        padding: 1.25rem 1.5rem;

    }

    .faq-answer p {

        padding: 0 1.5rem 1.5rem;

    }

    .faq-card {

        padding: 2rem;

    }

}

@media (max-width:576px) {

    .faq-question {

        font-size: .95rem;

    }

    .faq-card {

        padding: 1.75rem;

    }

}


/*==================================================
        EXPERIENCES CTA RESPONSIVE
==================================================*/

@media (max-width:1200px) {

    .experiences-cta {

        padding: 7rem 0;

    }

}

@media (max-width:992px) {

    .cta-stats {

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

    }

}

@media (max-width:768px) {

    .experiences-cta {

        padding: 6rem 0;

    }

    .cta-buttons {

        flex-direction: column;

    }

    .cta-buttons .btn {

        width: 100%;

        justify-content: center;

    }

    .cta-features {

        flex-direction: column;

        align-items: flex-start;

        max-width: 320px;

        margin: 2.5rem auto;

    }

}

@media (max-width:576px) {

    .cta-stats {

        grid-template-columns: 1fr;

    }

    .cta-stat {

        padding: 1.5rem;

    }

    .cta-content h2 {

        font-size: 2.2rem;

    }

}

/*=========================================
        DESTINATIONS HERO
=========================================*/
/*=========================================
        <=1200px
=========================================*/

@media (max-width:1200px) {

    .destinations-hero {

        min-height: 90vh;

        padding: 160px 0 100px;

    }

    .hero-content {

        max-width: 760px;

    }

    .destinations-hero h1 {

        font-size: clamp(2.6rem, 5vw, 4rem);

    }

}

/*=========================================
        <=992px
=========================================*/

@media (max-width:992px) {

    .destinations-hero {

        min-height: 85vh;

        padding: 150px 0 90px;

    }

    .hero-content {

        max-width: 680px;

        text-align: center;

        margin: 0 auto;

    }

    .breadcrumb {

        justify-content: center;

    }

    .hero-buttons {

        justify-content: center;

    }

}

/*=========================================
        <=768px
=========================================*/

@media (max-width:768px) {

    .destinations-hero {

        min-height: auto;

        padding: 140px 0 80px;

    }

    .hero-content {

        max-width: 100%;

    }

    .destinations-hero h1 {

        font-size: clamp(2.2rem, 8vw, 3.3rem);

        line-height: 1.2;

    }

    .destinations-hero p {

        max-width: 100%;

        font-size: .98rem;

    }

    .section-tag {

        padding: .6rem 1rem;

        font-size: .85rem;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;

        width: 100%;

    }

    .hero-buttons a {

        width: 100%;

        max-width: 320px;

    }

}

/*=========================================
        <=576px
=========================================*/

@media (max-width:576px) {

    .destinations-hero {

        padding: 130px 0 70px;

    }

    .breadcrumb {

        font-size: .82rem;

        gap: .5rem;

        flex-wrap: wrap;

    }

    .section-tag {

        font-size: .8rem;

    }

    .destinations-hero h1 {

        font-size: 2.2rem;

    }

    .destinations-hero p {

        font-size: .95rem;

        line-height: 1.8;

    }

}

/*=========================================
        <=480px
=========================================*/

@media (max-width:480px) {

    .destinations-hero {

        padding: 120px 0 60px;

    }

    .destinations-hero h1 {

        font-size: 2rem;

    }

    .hero-buttons a {

        width: 100%;

    }

}

/*=========================================
        DESTINATIONS INTRO
=========================================*/

/*=========================================
        <= 1200px
=========================================*/

@media (max-width:1200px) {

    .destinations-intro .section-heading {

        max-width: 800px;

    }

}

/*=========================================
        <= 992px
=========================================*/

@media (max-width:992px) {

    .destinations-intro {

        text-align: center;

    }

    .destinations-intro .section-heading {

        max-width: 700px;

    }

    .destinations-intro p {

        max-width: 650px;

    }

}

/*=========================================
        <= 768px
=========================================*/

@media (max-width:768px) {

    .destinations-intro .section-heading {

        max-width: 100%;

    }

    .destinations-intro h2 {

        margin-bottom: var(--space-3);

    }

    .destinations-intro p {

        max-width: 100%;

        font-size: .98rem;

        line-height: 1.8;

    }

}

/*=========================================
        <= 576px
=========================================*/

@media (max-width:576px) {

    .destinations-intro .section-subtitle {

        font-size: .8rem;

        padding: .6rem 1rem;

    }

    .destinations-intro h2 {

        margin: var(--space-2) 0;

    }

    .destinations-intro p {

        font-size: .95rem;

        line-height: 1.8;

    }

}

/*=========================================
        <= 480px
=========================================*/

@media (max-width:480px) {

    .destinations-intro {

        text-align: center;

    }

    .destinations-intro h2 {

        line-height: 1.3;

    }

    .destinations-intro p {

        font-size: .92rem;

    }

}

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

/*=========================================
        <=1200px
=========================================*/

@media (max-width:1200px) {

    .destination-grid {

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

        gap: 1.75rem;

    }

}

/*=========================================
        <=992px
=========================================*/

@media (max-width:992px) {

    .destination-grid {

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

    }

}

/*=========================================
        <=768px
=========================================*/

@media (max-width:768px) {

    .destination-grid {

        grid-template-columns: 1fr;

    }

    .destination-image {

        height: 280px;

    }

}

/*=========================================
        <=576px
=========================================*/

@media (max-width:576px) {

    .destination-content {

        padding: 1.5rem;

    }

    .destination-image {

        height: 240px;

    }

    .destination-highlights {

        gap: .5rem;

    }

    .destination-highlights li {

        font-size: .78rem;

    }

}

/*=========================================
        <=480px
=========================================*/

@media (max-width:480px) {

    .destination-image {

        height: 220px;

    }

    .destination-content h3 {

        font-size: 1.35rem;

    }

}

/*=========================================
        SAFARI REGIONS
=========================================*/
/*=========================================
        <=1200px
=========================================*/

@media (max-width:1200px) {

    .regions-grid {

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

    }

}

/*=========================================
        <=992px
=========================================*/

@media (max-width:992px) {

    .region-card {

        padding: 1.75rem;

    }

}

/*=========================================
        <=768px
=========================================*/

@media (max-width:768px) {

    .regions-grid {

        grid-template-columns: 1fr;

    }

    .region-card {

        text-align: center;

    }

    .region-icon {

        margin-inline: auto;

    }

    .region-card ul {

        justify-content: center;

    }

}

/*=========================================
        <=576px
=========================================*/

@media (max-width:576px) {

    .region-card {

        padding: 1.5rem;

    }

    .region-card h3 {

        font-size: 1.4rem;

    }

}

/*=========================================
        <=480px
=========================================*/

@media (max-width:480px) {

    .region-icon {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }

    .region-card li {

        font-size: .75rem;

    }

}

/*=========================================
        WHY VISIT KENYA
=========================================*/

/*=========================================
        <=1200px
=========================================*/

@media (max-width:1200px) {

    .why-grid {

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

    }

}

/*=========================================
        <=992px
=========================================*/

@media (max-width:992px) {

    .why-card {

        padding: 1.75rem;

    }

}

/*=========================================
        <=768px
=========================================*/

@media (max-width:768px) {

    .why-grid {

        grid-template-columns: 1fr;

        gap: var(--space-4);

    }

    .why-card {

        max-width: 550px;

        margin-inline: auto;

    }

}

/*=========================================
        <=576px
=========================================*/

@media (max-width:576px) {

    .why-card {

        padding: 1.5rem;

    }

    .why-icon {

        width: 64px;

        height: 64px;

        font-size: 1.6rem;

    }

    .why-card h3 {

        font-size: 1.3rem;

    }

    .why-tag {

        font-size: .75rem;

        padding: .4rem .9rem;

    }

    .why-highlights {

        gap: .5rem;

    }

    .why-highlights li {

        font-size: .75rem;

        padding: .38rem .8rem;

    }

}

/*=========================================
        <=480px
=========================================*/

@media (max-width:480px) {

    .why-card {

        padding: 1.4rem;

    }

    .why-icon {

        width: 58px;

        height: 58px;

        font-size: 1.4rem;

    }

    .why-card h3 {

        font-size: 1.2rem;

    }

    .why-card p {

        font-size: .92rem;

        line-height: 1.75;

    }

}

/*=========================================
        BEST TIME TO VISIT
=========================================*/
/*=========================================
        <=1200px
=========================================*/

@media (max-width:1200px) {

    .season-grid {

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

    }

}

/*=========================================
        <=992px
=========================================*/

@media (max-width:992px) {

    .season-card {

        padding: 1.75rem;

    }

}

/*=========================================
        <=768px
=========================================*/

@media (max-width:768px) {

    .season-grid {

        grid-template-columns: 1fr;

        gap: var(--space-4);

    }

    .season-card {

        max-width: 550px;

        margin-inline: auto;

    }

}

/*=========================================
        <=576px
=========================================*/

@media (max-width:576px) {

    .season-card {

        padding: 1.5rem;

    }

    .season-icon {

        width: 64px;

        height: 64px;

        font-size: 1.6rem;

    }

    .season-tag {

        font-size: .75rem;

    }

    .season-card h3 {

        font-size: 1.3rem;

    }

    .season-highlights li {

        font-size: .75rem;

    }

}

/*=========================================
        <=480px
=========================================*/

@media (max-width:480px) {

    .season-icon {

        width: 58px;

        height: 58px;

        font-size: 1.4rem;

    }

    .season-card {

        padding: 1.4rem;

    }

    .season-card p {

        font-size: .92rem;

    }

}
/*=========================================
        FAQ SECTION
=========================================*/

/*=========================================
        <=768px
=========================================*/

@media (max-width:768px) {

    .faq-container {

        margin-top: var(--space-5);

    }

    .faq-item summary {

        padding: 1.2rem 1.4rem;

        font-size: 1rem;

    }

    .faq-item p {

        padding: 0 1.4rem 1.3rem;

    }

}

/*=========================================
        <=576px
=========================================*/

@media (max-width:576px) {

    .faq-item summary {

        padding: 1rem 1.2rem;

        font-size: .95rem;

        align-items: flex-start;

    }

    .faq-item summary::after {

        width: 30px;

        height: 30px;

        font-size: 1.1rem;

    }

    .faq-item p {

        padding: 0 1.2rem 1.2rem;

        font-size: .92rem;

    }

}

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

@media (max-width:768px) {

    .cta-content h2 {

        font-size: 2.5rem;

    }

    .cta-content p {

        font-size: 1rem;

    }

}

@media (max-width:576px) {

    .cta-tag {

        font-size: .78rem;

    }

    .cta-content h2 {

        font-size: 2rem;

    }

    .cta-highlights {

        flex-direction: column;

        align-items: center;

    }

    .cta-buttons {

        flex-direction: column;

        width: 100%;

    }

    .cta-buttons .btn-primary,
    .cta-buttons .btn-secondary,
    .cta-buttons .btn-white {

        width: 100%;

        max-width: 320px;

        justify-content: center;

    }

}

/*=========================================
        ABOUT HERO
=========================================*/

@media (max-width:992px) {

    .about-hero {

        min-height: 75vh;

    }

}

@media (max-width:768px) {

    .about-hero {

        min-height: 70vh;

    }

    .hero-highlights {

        gap: .75rem;

    }

}

@media (max-width:576px) {

    .about-hero {

        text-align: center;

    }

    .about-hero .hero-content {

        margin-inline: auto;

    }

    .hero-highlights {

        justify-content: center;

        flex-direction: column;

        align-items: center;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }

    .hero-buttons .btn {

        width: 100%;

        max-width: 320px;

    }

}

/*=========================================
        OUR STORY
=========================================*/

@media (max-width:992px) {

    .story-grid {

        grid-template-columns: 1fr;

        gap: 4rem;

    }

    .story-content {

        order: 2;

    }

    .story-image {

        order: 1;

    }

    .story-highlights {

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

    }

}

@media (max-width:768px) {

    .story-highlights {

        grid-template-columns: 1fr;

    }

}

@media (max-width:576px) {

    .story-content {

        text-align: center;

    }

    .story-content p {

        margin-inline: auto;

    }

    .story-content .btn {

        width: 100%;

        max-width: 320px;

    }

}

/*=========================================
        MISSION • VISION • VALUES
=========================================*/

@media (max-width:1200px) {

    .mission-grid {

        gap: 1.5rem;

    }

}

@media (max-width:992px) {

    .mission-grid {

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

    }

}

@media (max-width:768px) {

    .mission-grid {

        grid-template-columns: 1fr;

    }

    .mission-card {

        text-align: center;

    }

    .values-list {

        align-items: flex-start;

        text-align: left;

    }

}

@media (max-width:576px) {

    .mission-card {

        padding: var(--space-4);

    }

}

/*=========================================
        WHY CHOOSE BURAKEYE
=========================================*/

@media (max-width:1200px) {

    .why-grid {

        gap: 1.5rem;

    }

}

@media (max-width:992px) {

    .why-grid {

        grid-template-columns: 1fr;

    }

}

@media (max-width:768px) {

    .why-card {

        padding: var(--space-4);

    }

}

@media (max-width:576px) {

    .why-card {

        text-align: center;

    }

    .why-card .icon-circle {

        margin-inline: auto;

    }

}

/*=========================================
        RESPONSIBLE TOURISM
=========================================*/

@media (max-width:1200px) {

    .tourism-grid {

        gap: 3rem;

    }

}

@media (max-width:992px) {

    .tourism-grid {

        grid-template-columns: 1fr;

    }

}

@media (max-width:768px) {

    .tourism-content {

        text-align: center;

    }

    .tourism-list {

        max-width: 500px;

        margin-inline: auto;

        margin-top: var(--space-4);

    }

}

@media (max-width:576px) {

    .tourism-content h2 {

        text-align: center;

    }

    .tourism-list {

        text-align: left;

    }

}

/*=========================================
        OUR PROMISE
=========================================*/

@media (max-width:768px) {

    .promise-content {

        padding: var(--space-5);

    }

    .promise-grid {

        flex-direction: column;

        align-items: stretch;

    }

    .promise-item {

        justify-content: center;

    }

}

@media (max-width:576px) {

    .promise-content {

        padding: var(--space-4);

    }

    .promise-item {

        text-align: center;

        line-height: 1.6;

    }

}

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

@media (max-width:768px) {

    .about-cta h2 {

        font-size: 2.5rem;

    }

    .cta-highlights {

        flex-direction: column;

        align-items: center;

    }

}

@media (max-width:576px) {

    .about-cta {

        text-align: center;

    }

    .cta-buttons {

        flex-direction: column;

    }

    .cta-buttons .btn {

        width: 100%;

        max-width: 320px;

        justify-content: center;

    }

}

/*=========================================
        TRAVEL GUIDE HERO
=========================================*/

@media (max-width:992px) {

    .travel-hero {

        min-height: 85vh;

    }

}

@media (max-width:768px) {

    .travel-hero {

        text-align: center;

    }

    .travel-hero .hero-content {

        margin-inline: auto;

    }

    .travel-hero .breadcrumb {

        justify-content: center;

    }

    .travel-hero .hero-tag {

        justify-content: center;

    }

    .travel-hero .hero-buttons {

        justify-content: center;

    }

}

@media (max-width:576px) {

    .travel-hero {

        min-height: 75vh;

    }

    .travel-hero .hero-buttons {

        flex-direction: column;

    }

    .travel-hero .hero-buttons .btn {

        width: 100%;

        max-width: 320px;

        justify-content: center;

    }

}

/*=========================================
        PLAN YOUR JOURNEY
=========================================*/

@media (max-width:992px) {

    .journey-grid {

        grid-template-columns: 1fr;

    }

    .journey-image {

        order: -1;

    }

}

@media (max-width:768px) {

    .journey-content {

        text-align: center;

    }

    .journey-features {

        grid-template-columns: 1fr;

    }

    .feature {

        text-align: left;

    }

}

@media (max-width:576px) {

    .journey-image img {

        aspect-ratio: 4/3;

    }

    .feature {

        padding: 1rem;

    }

    .feature i {

        width: 48px;

        height: 48px;

        font-size: 1.1rem;

    }

}

/*=========================================
        VISA & ENTRY REQUIREMENTS
=========================================*/

@media (max-width:992px) {

    .visa-grid {

        grid-template-columns: 1fr;

    }

}

@media (max-width:768px) {

    .info-notice {

        flex-direction: column;

        text-align: center;

        align-items: center;

    }

    .info-content {

        text-align: center;

    }

    .visa-card {

        padding: var(--space-4);

    }

}

@media (max-width:576px) {

    .info-icon,

    .visa-icon {

        width: 64px;

        height: 64px;

        font-size: 1.5rem;

    }

    .visa-card li {

        padding-left: 1.8rem;

    }

}

/*=========================================
        BEST TIME TO VISIT
=========================================*/

@media (max-width:1200px) {

    .season-grid {

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

    }

}

@media (max-width:768px) {

    .season-grid {

        grid-template-columns: 1fr;

    }

    .season-card {

        padding: var(--space-4);

    }

}

@media (max-width:576px) {

    .season-icon {

        width: 70px;

        height: 70px;

        font-size: 1.7rem;

    }

    .season-card h3 {

        font-size: 1.5rem;

    }

}

/*=========================================
        GETTING AROUND EAST AFRICA
=========================================*/

@media (max-width:1200px) {

    .transport-grid {

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

    }

}

@media (max-width:768px) {

    .transport-grid {

        grid-template-columns: 1fr;

    }

    .transport-card {

        padding: var(--space-4);

    }

}

@media (max-width:576px) {

    .transport-icon {

        width: 70px;

        height: 70px;

        font-size: 1.7rem;

    }

}

/*=========================================
        HEALTH & SAFETY
=========================================*/

@media (max-width:992px) {

    .health-grid {

        grid-template-columns: 1fr;

    }

    .health-image {

        order: -1;

    }

}

@media (max-width:768px) {

    .health-image img {

        min-height: 380px;

    }

}

@media (max-width:576px) {

    .health-image img {

        min-height: 300px;

    }

    .health-content h2 {

        font-size: 2rem;

    }

}

/*=========================================
        PACKING CHECKLIST
=========================================*/

@media (max-width:1200px) {

    .packing-grid {

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

    }

}

@media (max-width:768px) {

    .packing-grid {

        grid-template-columns: 1fr;

    }

    .packing-card {

        padding: var(--space-4);

    }

}

@media (max-width:576px) {

    .packing-icon {

        width: 70px;

        height: 70px;

        font-size: 1.7rem;

    }

}

/*=========================================
        FREQUENTLY ASKED QUESTIONS
=========================================*/

@media (max-width:768px) {

    .faq-item summary {

        padding: var(--space-3);

        font-size: 1rem;

    }

    .faq-item p {

        padding: 0 var(--space-3) var(--space-3);

    }

}

/*=========================================
        TRAVEL TIPS
=========================================*/

@media (max-width:1200px) {

    .tips-grid {

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

    }

}

@media (max-width:768px) {

    .tips-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    .tip-card {

        padding: var(--space-4);

    }

    .tip-card i {

        width: 64px;

        height: 64px;

        font-size: 1.5rem;

        margin-bottom: var(--space-3);

    }

}

@media (max-width:576px) {

    .tip-card {

        text-align: center;

        align-items: center;

    }

}

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

@media (max-width:992px) {

    .travel-cta-content {

        max-width: 700px;

    }

}

@media (max-width:768px) {

    .travel-cta h2 {

        font-size: 2.4rem;

    }

    .travel-cta p {

        font-size: 1rem;

    }

    .travel-cta .cta-buttons {

        flex-direction: column;

        width: 100%;

    }

    .travel-cta .cta-buttons a {

        width: 100%;

        max-width: 320px;

        justify-content: center;

    }

}

@media (max-width:576px) {

    .travel-cta h2 {

        font-size: 2rem;

    }

}

/*=========================================
        SAFARI PACKAGES HERO
=========================================*/

@media (max-width:992px) {

    .packages-hero {

        min-height: 75vh;

    }

    .packages-hero-content h1 {

        font-size: clamp(2.5rem, 6vw, 3.8rem);

    }

}

@media (max-width:768px) {

    .packages-hero {

        min-height: 70vh;

    }

    .packages-hero-content {

        max-width: 100%;

    }

    .packages-hero-content p {

        font-size: 1rem;

    }

    .hero-buttons {

        flex-direction: column;

        width: 100%;

    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {

        width: 100%;
        max-width: 320px;

    }

}

@media (max-width:576px) {

    .packages-hero {

        min-height: 65vh;

    }

    .hero-tag {

        font-size: .8rem;

        padding: .65rem 1.2rem;

    }

    .packages-hero-content h1 {

        font-size: 2.3rem;

    }

}
/*=========================================
    DISCOVER EAST AFRICA
=========================================*/

@media (max-width:991px) {

    .package-intro {

        padding: 90px 0;

    }

    .package-intro h2 {

        font-size: 2.5rem;

    }

    .intro-content {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .intro-stats {

        max-width: 650px;

        margin: auto;

    }

}

@media (max-width:768px) {

    .package-intro {

        padding: 80px 0;

    }

    .package-intro h2 {

        font-size: 2.1rem;

    }

    .intro-text h3 {

        font-size: 1.7rem;

    }

    .intro-stats {

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

        gap: 18px;

    }

    .intro-stat {

        padding: 28px 18px;

    }

    .intro-stat h3 {

        font-size: 2.3rem;

    }

}

@media (max-width:576px) {

    .package-intro .section-subtitle {

        font-size: .85rem;

        padding: 9px 18px;

    }

    .package-intro h2 {

        font-size: 1.8rem;

    }

    .package-intro .section-heading p {

        font-size: 1rem;

    }

    .intro-text h3 {

        font-size: 1.45rem;

    }

    .intro-text p {

        font-size: .98rem;

    }

    .intro-stats {

        grid-template-columns: 1fr;

    }

    .intro-stat {

        padding: 25px;

    }

}
/*==================================================
  SAFARI STYLE
==================================================*/

@media (max-width:1100px) {

    .style-grid {

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

    }

}

@media (max-width:768px) {

    .safari-style {

        padding: 90px 0;

    }

    .safari-style h2 {

        font-size: 2.3rem;

    }

    .style-grid {

        grid-template-columns: 1fr;

    }

    .style-card {

        padding: 35px 30px;

    }

    .style-card h3 {

        font-size: 1.45rem;

    }

    .style-card p {

        font-size: .98rem;

    }

}

@media (max-width:576px) {

    .safari-style {

        padding: 70px 0;

    }

    .safari-style .section-subtitle {

        font-size: .82rem;

        padding: 8px 18px;

    }

    .safari-style h2 {

        font-size: 1.9rem;

    }

    .safari-style .section-heading {

        margin-bottom: 50px;

    }

    .style-card {

        padding: 30px 24px;

        border-radius: 20px;

    }

    .style-icon {

        width: 65px;

        height: 65px;

        font-size: 26px;

    }

    .style-label {

        font-size: .72rem;

    }

}
/*=========================================
    EAST AFRICA DESTINATIONS SHOWCASE
=========================================*/

@media (max-width: 992px) {

    .destination-grid {
        grid-template-columns: 1fr;
    }

    .destination-image {
        height: 280px;
    }

    .destination-content {
        padding: 30px;
    }

    .destination-content h3 {
        font-size: 1.8rem;
    }

}

@media (max-width: 768px) {

    .destination-grid {
        gap: 30px;
    }

    .destination-image {
        height: 240px;
    }

    .destination-content {
        padding: 25px;
    }

    .destination-content h3 {
        font-size: 1.6rem;
    }

    .destination-tags {
        gap: 10px;
    }

    .destination-tags span {
        font-size: .85rem;
        padding: 8px 14px;
    }

}

@media (max-width: 576px) {

    .destination-image {
        height: 220px;
    }

    .destination-content {
        padding: 22px;
    }

    .country-name {
        font-size: .8rem;
    }

    .destination-content h3 {
        font-size: 1.4rem;
    }

    .destination-content p {
        font-size: .95rem;
    }

    .destination-link {
        font-size: .95rem;
    }

}
/*=========================================
    SIGNATURE SAFARI PACKAGES
=========================================*/

@media (max-width:1200px) {

    .signature-grid {

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

    }

}

@media (max-width:768px) {

    .signature-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .signature-image {

        height: 240px;

    }

    .signature-content {

        padding: 25px;

    }

    .signature-content h3 {

        font-size: 1.5rem;

    }

    .signature-footer {

        flex-direction: column;
        align-items: flex-start;

    }

    .signature-footer .btn {

        width: 100%;
        text-align: center;

    }

}

@media (max-width:576px) {

    .signature-image {

        height: 220px;

    }

    .package-features {

        gap: 10px;

    }

    .package-features span {

        font-size: .8rem;

        padding: 7px 12px;

    }

    .price strong {

        font-size: 1.3rem;

    }

}
/*=========================================
    BROWSE BY SAFARI STYLE
=========================================*/

@media (max-width:992px) {

    .style-grid {

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

    }

}

@media (max-width:768px) {

    .style-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .style-card {

        padding: 40px 30px;

    }

    .style-icon {

        width: 75px;
        height: 75px;

        font-size: 1.8rem;

    }

    .style-card h3 {

        font-size: 1.5rem;

    }

}

@media (max-width:576px) {

    .style-card {

        padding: 35px 25px;

    }

}
/*=========================================
    SAFARI COLLECTIONS
=========================================*/

@media (max-width:992px) {

    .collections-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width:768px) {

    .collections-grid {
        grid-template-columns: 1fr;
    }

    .collection-card {
        padding: 2rem;
    }

    .collections-cta {
        padding: 3rem 2rem;
    }

    .collections-cta h3 {
        font-size: 1.7rem;
    }

}

@media (max-width:480px) {

    .collection-card {
        padding: 1.8rem;
    }

    .collection-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .collection-card h3 {
        font-size: 1.35rem;
    }

    .collections-cta {
        padding: 2.5rem 1.5rem;
    }

}

/*==================================================
 WHY CHOOSE BURAKEYE RESPONSIVE
==================================================*/

@media (max-width:1200px) {

    .why-burakeye-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width:768px) {

    .why-burakeye {
        padding: 80px 0;
    }

    .why-burakeye-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .why-card {
        padding: 2rem;
    }

    .why-icon {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    .why-card h3 {
        font-size: 1.4rem;
    }

    .why-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 3rem;
    }

    .stat {
        padding: 2rem 1rem;
    }

    .stat:nth-child(2) {
        border-right: none;
    }

    .stat:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .stat h3 {
        font-size: 2.3rem;
    }

}

@media (max-width:480px) {

    .why-card {
        padding: 1.7rem;
    }

    .why-icon {
        width: 58px;
        height: 58px;
        font-size: 1.35rem;
        border-radius: 16px;
    }

    .why-card h3 {
        font-size: 1.25rem;
    }

    .why-card p {
        font-size: .95rem;
    }

    .why-stats {
        grid-template-columns: 1fr;
    }

    .stat {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .stat:last-child {
        border-bottom: none;
    }

    .stat h3 {
        font-size: 2.1rem;
    }

}
/*=========================================
PLANNING RESPONSIVE
=========================================*/

@media (max-width:1100px) {

    .planning-grid {
        gap: 3rem;
    }

    .planning-content h2 {
        font-size: 2.3rem;
    }

}

@media (max-width:992px) {

    .planning-grid {
        grid-template-columns: 1fr;
    }

    .planning-image {
        order: 1;
    }

    .planning-content {
        order: 2;
    }

}

@media (max-width:768px) {

    .planning-section {
        padding: 80px 0;
    }

    .planning-content h2 {
        font-size: 2rem;
    }

    .planning-features {
        grid-template-columns: 1fr;
    }

    .planning-buttons {
        flex-direction: column;
    }

    .planning-buttons .btn {
        width: 100%;
    }

    .planning-trust {
        gap: 1rem;
        flex-direction: column;
    }

}

@media (max-width:480px) {

    .planning-content h2 {
        font-size: 1.7rem;
    }

    .planning-item {
        padding: .9rem 1rem;
    }

    .planning-image::before,
    .planning-image::after {
        display: none;
    }

}
/*=========================================
CTA RESPONSIVE
=========================================*/

@media (max-width:768px) {

    .safari-cta {

        padding: 90px 0;

    }

    .safari-cta h2 {

        font-size: 2.2rem;

    }

    .cta-highlights {

        grid-template-columns: 1fr;

    }

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    .cta-buttons .btn,

    .btn-outline-light {

        width: 100%;

        max-width: 320px;

        text-align: center;

    }

}

@media (max-width:480px) {

    .safari-cta h2 {

        font-size: 1.8rem;

    }

    .safari-cta p {

        font-size: .98rem;

    }

}
/*=========================================
        CONTACT HERO RESPONSIVE
=========================================*/

@media (max-width:992px) {

    .contact-hero {

        min-height: 75vh;

    }

    .contact-hero h1 {

        font-size: 3rem;

    }

}

@media (max-width:768px) {

    .contact-hero {

        min-height: 70vh;

        padding: 7rem 0 5rem;

    }

    .contact-hero h1 {

        font-size: 2.5rem;

    }

    .contact-hero p {

        font-size: 1rem;

    }

    .hero-highlights {

        gap: .8rem;

    }

    .highlight {

        width: 100%;

        justify-content: center;

    }

}

@media (max-width:576px) {

    .contact-hero h1 {

        font-size: 2.1rem;

    }

}

/*=========================================
    RESPONSIVE - 1200px
=========================================*/

@media (max-width:1200px) {

    .contact-grid {

        gap: 3rem;

    }

    .contact-info h2,
    .contact-form h2 {

        font-size: 2.2rem;

    }

    .contact-form {

        padding: 2rem;

    }

    .contact-item {

        padding: 1rem;

    }

}

/*=========================================
    RESPONSIVE - 992px
=========================================*/

@media (max-width:992px) {

    .contact-section {

        padding: 5rem 0;

    }

    .contact-grid {

        grid-template-columns: 1fr;

        gap: 3rem;

    }

    .contact-info {

        order: 1;

    }

    .contact-form {

        order: 2;

        max-width: 700px;

        margin: 0 auto;

    }

    .contact-info h2,
    .contact-form h2 {

        font-size: 2rem;

    }

}

/*=========================================
    RESPONSIVE - 768px
=========================================*/

@media (max-width:768px) {

    .form-grid {

        grid-template-columns: 1fr;

    }

    .contact-form {

        padding: 1.8rem;

    }

    .contact-cards {

        gap: .85rem;

    }

    .contact-item {

        gap: .9rem;

    }

    .contact-item i {

        width: 48px;

        height: 48px;

        font-size: 1rem;

    }

    .contact-info h2,
    .contact-form h2 {

        font-size: 1.8rem;

    }

}

/*=========================================
    RESPONSIVE - 576px
=========================================*/

@media (max-width:576px) {

    .contact-section {

        padding: 4rem 0;

    }

    .contact-form {

        padding: 1.5rem;

        border-radius: 16px;

    }

    .contact-item {

        flex-direction: column;

        align-items: flex-start;

    }

    .contact-item i {

        margin-bottom: .25rem;

    }

    .contact-info h2,
    .contact-form h2 {

        font-size: 1.65rem;

    }

    .contact-info>p,
    .contact-form>p {

        font-size: .95rem;

    }

}

/*=========================================
    RESPONSIVE - 420px
=========================================*/

@media (max-width:420px) {

    .contact-form {

        padding: 1.25rem;

    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {

        padding: 12px 15px;

        font-size: .92rem;

    }

    .contact-item {

        padding: .9rem;

    }

    .contact-item h4 {

        font-size: 1rem;

    }

    .contact-item p,
    .contact-item a {

        font-size: .92rem;

    }

    .contact-info h2,
    .contact-form h2 {

        font-size: 1.45rem;

    }

}

/*=========================================
    OUR OFFICE RESPONSIVE
=========================================*/

@media (max-width:1200px) {

    .location-wrapper {

        grid-template-columns: 380px 1fr;
        gap: 1.75rem;

    }

    .location-left {

        padding: 2.25rem;

    }

    .location-right {

        padding: 0 2.25rem 2.25rem;

    }

    .office-map {

        min-height: 560px;

    }

}

@media (max-width:992px) {

    .location-wrapper {

        grid-template-columns: 1fr;

    }

    .location-card {

        order: 1;

    }

    .office-map {

        order: 2;
        min-height: 450px;

    }

}

@media (max-width:768px) {

    .location-left {

        padding: 2rem 1.75rem 1.25rem;

    }

    .location-right {

        padding: 0 1.75rem 2rem;

    }

    .office-buttons {

        flex-direction: column;

    }

    .office-buttons .btn {

        width: 100%;

    }

    .office-detail {

        gap: .9rem;

    }

    .detail-icon {

        width: 45px;
        height: 45px;
        font-size: 1rem;

    }

    .office-map {

        min-height: 380px;

    }

}

@media (max-width:576px) {

    .location-left,
    .location-right {

        padding: 1.5rem;

    }

    .office-icon {

        width: 60px;
        height: 60px;
        font-size: 1.3rem;
        margin-bottom: 1rem;

    }

    .office-badge {

        font-size: .8rem;
        padding: .4rem .9rem;

    }

    .location-left h3 {

        font-size: 1.6rem;

    }

    .office-address {

        gap: .75rem;

    }

    .office-detail {

        gap: .75rem;
        padding: .85rem 0;

    }

    .detail-content h4 {

        font-size: 1rem;

    }

    .detail-content p,
    .detail-content a {

        font-size: .95rem;

    }

    .office-map {

        min-height: 320px;

    }

}

/*=========================================
    CONTACT CTA RESPONSIVE
=========================================*/

@media (max-width:1200px) {

    .cta-trust {

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

    }

}

@media (max-width:768px) {

    .contact-cta {

        padding: 5rem 0;

    }

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    .cta-buttons .btn {

        width: 100%;

        max-width: 320px;

    }

    .cta-trust {

        grid-template-columns: 1fr;

        gap: 1rem;

    }

}

@media (max-width:576px) {

    .contact-cta h2 {

        font-size: 2rem;

    }

    .cta-note {

        font-size: .95rem;

    }

}