.elementor-719 .elementor-element.elementor-element-3773c459{--display:flex;--background-transition:0.3s;--padding-top:040px;--padding-bottom:0px;--padding-left:100px;--padding-right:100px;}.elementor-719 .elementor-element.elementor-element-3773c459, .elementor-719 .elementor-element.elementor-element-3773c459::before{--border-transition:0.3s;}.elementor-719 .elementor-element.elementor-element-763dbc57 .elementor-heading-title{color:#323940;font-family:"Poppins", Sans-serif;font-size:64px;font-weight:600;line-height:90px;}.elementor-719 .elementor-element.elementor-element-2eed6333{--display:flex;--background-transition:0.3s;--padding-top:40px;--padding-bottom:40px;--padding-left:100px;--padding-right:100px;}.elementor-719 .elementor-element.elementor-element-2eed6333, .elementor-719 .elementor-element.elementor-element-2eed6333::before{--border-transition:0.3s;}.elementor-719 .elementor-element.elementor-element-6ceec788{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;}.elementor-719 .elementor-element.elementor-element-6ceec788:not(.elementor-motion-effects-element-type-background), .elementor-719 .elementor-element.elementor-element-6ceec788 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-719 .elementor-element.elementor-element-6ceec788, .elementor-719 .elementor-element.elementor-element-6ceec788::before{--border-transition:0.3s;}.elementor-719 .elementor-element.elementor-element-ff9e744{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--padding-top:0px;--padding-bottom:0px;--padding-left:100px;--padding-right:100px;}.elementor-719 .elementor-element.elementor-element-d9ca2a8{text-align:center;}.elementor-719 .elementor-element.elementor-element-32e7921c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--padding-top:30px;--padding-bottom:30px;--padding-left:100px;--padding-right:100px;}.elementor-719 .elementor-element.elementor-element-32e7921c, .elementor-719 .elementor-element.elementor-element-32e7921c::before{--border-transition:0.3s;}@media(max-width:1024px){.elementor-719 .elementor-element.elementor-element-3773c459{--padding-top:0px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-719 .elementor-element.elementor-element-763dbc57 .elementor-heading-title{font-size:36px;}.elementor-719 .elementor-element.elementor-element-2eed6333{--padding-top:0px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-719 .elementor-element.elementor-element-ff9e744{--padding-top:0px;--padding-bottom:0px;--padding-left:40px;--padding-right:40px;}.elementor-719 .elementor-element.elementor-element-32e7921c{--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}}@media(max-width:767px){.elementor-719 .elementor-element.elementor-element-3773c459{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-719 .elementor-element.elementor-element-763dbc57 .elementor-heading-title{font-size:24px;line-height:2.0;}.elementor-719 .elementor-element.elementor-element-2eed6333{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-719 .elementor-element.elementor-element-6ceec788{--padding-top:30px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-719 .elementor-element.elementor-element-5f0fd08b > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-719 .elementor-element.elementor-element-ff9e744{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-719 .elementor-element.elementor-element-32e7921c{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for shortcode, class: .elementor-element-41a5d6d8 */.responsive-bento {
    display: flex;
    gap: 1.5%; /* Fluid gap */
    width: 100%;
    align-items: stretch;
}

.bento-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Column Width Proportions */
.col-1 { flex: 2.05; } /* The Large Left Image */
.col-2 { flex: 1; }    /* Middle Column */
.col-3 { flex: 1; }    /* Right Column */

/* Image Containers */
.bento-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}

/* --- Responsive Height Ratios --- */
/* We use flex-grow to ensure they always fill the column height perfectly */

.img-large { flex: 1; } 

/* Middle Column: 220 / 496 ratio */
.img-mid-1 { flex: 0.30; } 
.img-mid-2 { flex: 0.70; }

/* Right Column: 213 / 270 / 213 ratio */
.img-right-1 { flex: 0.30; }
.img-right-2 { flex: 0.40; }
.img-right-3 { flex: 0.30; }

/* --- Tablet & Mobile Breakpoints --- */

/* --- Tablet & Mobile Breakpoints --- */

@media (max-width: 1024px) {
    .responsive-bento { 
        flex-wrap: wrap; 
        gap: 20px; /* Ensures vertical gap between columns when they wrap */
    }
    
    .col-1 { 
        flex: 1 0 100%; 
        /* ADD THIS: Creates the gap below the large image in tab view */
        margin-bottom: 5px; 
    } 

    .col-2, .col-3 { 
        flex: 1; 
    } 
    
    .img-large { 
        aspect-ratio: 16 / 9; 
    }
}

@media (max-width: 767px) {
    .responsive-bento { 
        flex-direction: column; 
        gap: 15px; /* Consistent gap for mobile stacking */
    }
    
    .bento-col { 
        width: 100%; 
        margin-bottom: 0; 
    }
    
    .bento-img { 
        aspect-ratio: 4 / 3; 
    }
}

/* This stops the images from jumping back to original size */
.bento-img img, 
.bento-main-img img, 
.responsive-bento img {
    
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;     /* Forces the image to stay inside the box */
    display: block !important;
     border-radius: 5px !important;

}/* End custom CSS */
/* Start custom CSS for image-carousel, class: .elementor-element-5f0fd08b *//* 1. Allow the carousel to overflow so we can see side slides */
.elementor-719 .elementor-element.elementor-element-5f0fd08b .elementor-main-swiper {
    overflow: visible !important;
}

/* 2. Shrink the main image slightly to create side gaps */
.elementor-719 .elementor-element.elementor-element-5f0fd08b .swiper-slide {
    padding: 0 10px; /* Space between the images */
    transition: transform 0.3s ease;
}

/* 3. Ensure the images fill the slide container */
.elementor-719 .elementor-element.elementor-element-5f0fd08b .elementor-image-carousel img {
    width: 100% !important;
    height: 400px !important; /* Set your preferred mobile height */
    object-fit: cover !important;
    border-radius: 10px !important;
}

/* 4. Optional: Make the side images slightly smaller/faded */
.elementor-719 .elementor-element.elementor-element-5f0fd08b .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.7;
    transform: scale(0.9);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-467789ec *//* ══════════════════════════════════════════════
   SAFARI PAGE CONSOLIDATED CSS
   ══════════════════════════════════════════════ */

/* ==========================================
   1. TAB SELECTION STYLES
   ========================================== */

/* Center the buttons and add spacing */
.safari-tabs-header {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.safari-packages-main-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 30px;
    font-family: 'Inter', sans-serif;
}

/* Theme-Buster: Inactive Button Styles */
.safari-tabs-header button.safari-tab-btn {
    background-color: transparent !important;
    border: none !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    color: #4B5563 !important;
    cursor: pointer !important;
    border-radius: 30px !important;
    box-shadow: none !important; /* Removes default theme shadows */
    transition: all 0.3s ease !important;
}

/* Add a soft gray hover effect for inactive tabs */
.safari-tabs-header button.safari-tab-btn:hover {
    color: #1F2937 !important;
    background-color: #F3F4F6 !important; 
}

/* Theme-Buster: ACTIVE Clicked Button Style */
.safari-tabs-header button.safari-tab-btn.active {
    background-color: #1F2937 !important; /* Dark Gray/Black from your Figma */
    color: #ffffff !important; /* White text */
}

/* Smooth fade when swapping tabs */
.safari-tab-panel {
    animation: fadeInTab 0.3s ease-in-out;
    justify-content: center;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ==========================================
   2. DYNAMIC LAYOUT: ACCORDION & IMAGE GRID
   (Forcing Elementor to obey Flexbox)
   ========================================== */

/* 1. The Parent Row */
.elementor-719 .elementor-element.elementor-element-467789ec .safari-content-row,
.safari-content-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important; /* Forces columns to match heights */
    gap: 40px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
}

/* 2. Left Column (Accordion) */
.elementor-719 .elementor-element.elementor-element-467789ec .safari-accordion-col,
.safari-accordion-col {
    width: 50% !important;
    align-self: flex-start !important; /* Pins accordion to the top */
    margin: 0 !important;
}

/* 3. Right Column (Image Wrapper) */
.elementor-719 .elementor-element.elementor-element-467789ec .safari-image-col,
.safari-image-col {
    width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Forces the map into the dead center if accordion is huge */
    align-items: center !important;
    margin: 0 !important;
}

/* Force Elementor's inner widget wrappers to also center */
.safari-image-col .elementor-widget-wrap,
.safari-image-col .elementor-widget-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* 4. The Image Strict Limits */
.safari-image-col img {
    max-height: 550px !important;
    width: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* 5. Mobile Stacking */
@media (max-width: 768px) {
    .elementor-719 .elementor-element.elementor-element-467789ec .safari-content-row,
    .safari-content-row {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .elementor-719 .elementor-element.elementor-element-467789ec .safari-accordion-col, .safari-accordion-col,
    .elementor-719 .elementor-element.elementor-element-467789ec .safari-image-col, .safari-image-col {
        width: 100% !important;
    }
}

.safari-tab-col {
    display: flex;
    gap: 40px;
}

.safari-tab-col-1 {
    flex: 1; 
    width: 600px;
}

.safari-tab-col-2 {
    flex: 1; 
    width: 600px;
}


/* ==========================================
   3. ACCORDION STYLES
   ========================================== */

/* Container Spacing */
.custom-safari-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px; 
    font-family: 'Inter', sans-serif;
}

/* Individual Accordion Box */
.safari-accordion-item {
    background-color: #DBD8D824;
    border-radius: 10px;
    border: none;
    overflow: hidden;
}

/* The Title Bar */
.safari-accordion-title {
    padding: 25px 20px;
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none; /* Disable text selection when clicking fast */
}

/* The Plus/Minus Circular Button */
.safari-accordion-icon {
    background-color: #D5DADF;
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
    padding-bottom: 3px;
}

/* --- THE ANIMATION MAGIC --- */
/* The collapsing wrapper */
.safari-accordion-collapse {
    display: grid;
    grid-template-rows: 0fr; /* Starts completely collapsed */
    transition: grid-template-rows 0.3s ease-out;
}

/* Hidden overflow required for the grid trick */
.safari-accordion-wrapper {
    overflow: hidden;
}

/* The open state expands the grid to its natural height */
.safari-accordion-item.is-open .safari-accordion-collapse {
    grid-template-rows: 1fr; 
}

/* Content Area Text Styles */
.safari-accordion-content {
    padding: 0px 20px 25px 20px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #4B5563;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Fade text in slightly after the box slides open */
.safari-accordion-item.is-open .safari-accordion-content {
    opacity: 1;
    transform: translateY(0);
}

.safari-accordion-content p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   4. TIMELINE STYLES
   ========================================== */

.safari-timeline-container {
    position: relative;
    padding-left: 40px;
}

.highlights-main-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 30px;
    font-family: 'Inter', sans-serif;
}

.highlights-flex-container {
    display: flex;
    align-items: center; 
    gap: 30px;
}

.timeline-item {
    position: relative;
    padding-bottom: 40px;
    display: flex;
    gap: 20px;
    align-items: center;
}


.highlights-right-image img {
    width: 100% !important;
    height: 300px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}


.timeline-day-img, .timeline-content {
    flex: 1; /* Ensures the empty div takes up equal space */
    padding: 20px;
}

/* The Vertical Line */
.timeline-marker {
    position: absolute;
    left: -30px;
    top: 0;
    bottom: 0;
    width: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    background-color: #1F2937;
    border-radius: 50%;
    z-index: 2;
    margin-top: 8px;
}

.timeline-line {
    flex-grow: 1;
    width: 2px;
    background-color: #D5DADF;
}

/* Hide the last line */
.timeline-item:last-child .timeline-line {
    display: none;
}

/* Content Styles */
.timeline-day-title {
    font-size: 20px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 8px;
}

.timeline-day-desc {
    font-size: 16px;
    color: #4B5563;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* --- Global / Base Desktop Styles (768px and up) --- */
.timeline-container {
    width: 100% !important;
}

.itin-main-title {
    text-align: center; 
    font-size: 36px; 
    font-weight: 700; 
    color: #1F2937; 
    margin-bottom: 30px; 
    font-family: 'Inter', sans-serif;
}

.timeline-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 40px; 
    position: relative;
    margin-bottom: 40px;
    width: 100% !important;
    margin-left: -15px !important; 
}

/* Image on the Left */
.timeline-day-img {
    flex: 0 0 45% !important;
    order: 1;
}

.timeline-day-img img {
    width: 100% !important;
    height: 307px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}

/* Content on the Right */
.timeline-content {
    flex: 1;
    order: 2;
    padding-left: 20px;
    padding-top: 5px; 
}

.timeline-day-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px 0 !important;
    color: #1F2937;
}

/* --- Vertical Line & Dot Logic --- */
.timeline-marker {
    position: absolute;
    left: 45%; 
    margin-left: 25px; 
    top: 15px; 
    bottom: -110px; /* Adjust this to reach the next dot */
    width: 2px;
    background-color: #E5E7EB;
    z-index: 1;
}

.timeline-dot {
    position: absolute;
    /* Aligns dot to the top of the marker line */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background-color: #00A3C4;
    border-radius: 50%;
    z-index: 2;
    margin-top: 0px;
}

/* FIX: Keep the dot but hide the line for the last item */
.timeline-item:last-child .timeline-marker {
    background-color: transparent !important; /* Hides the line */
    bottom: auto !important; /* Prevents line from stretching */
    height: 14px; /* Matches the dot height */
}

.timeline-item:last-child .timeline-dot {
    display: block !important; /* Ensures the dot stays visible */
}

@media (max-width: 1280px) {
    .safari-tab-col-1 {
        width: 100%;
    }

    .safari-tab-col-2 {
        width: 100%;
    }
}

/* --- Mobile Styles (Below 768px) --- */
@media (max-width: 767px) {
    .safari-packages-main-title {
        text-align: left;
        font-size: 28px;
    }

    .timeline-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
        margin-bottom: -32px;
        margin-left: 0 !important;
    }

    .timeline-content {
        display: contents !important; 
    }

    .timeline-day-title {
        order: 1 !important;
        font-size: 22px;
        margin-bottom: 5px !important;
        padding-left: 0;
        width: 100%;
    }

    .timeline-day-img {
        order: 2 !important;
        width: 100% !important;
        flex: unset !important;
    }

    /* Target description text */
    .timeline-content p, 
    .timeline-content div:not(.timeline-day-title) {
        order: 3 !important;
        padding-left: 0;
    }

    .timeline-marker, .timeline-dot {
        display: none !important;
    }
    
    .timeline-day-img {
        padding-left: 0;
        padding-right: 0;
    }
    
    .timeline-day-img img {
        height: 250px !important;
    }
    
    .highlights-flex-container {
        display: block;
    }
    
    .safari-tab-panel {
        display: block;
    }
    
    .safari-timeline-container {
        padding-left: 0;
    }
    
    .safari-itinerary-wrapper h2 {
        padding: 0 16px;
    }
    
    .safari-tab-col {
        display: block;
    }
    
    .safari-tab-col-1 {
        width: auto;
    }

    .safari-tab-col-2 {
        width: auto;
    }
    
    .custom-safari-accordion {
        margin-bottom: 20px;
    }
}

@media (max-width: 420px) {
    .safari-packages-main-title {
        font-size: 20px;
    }
    
    .safari-tabs-header {
        gap: 0;
    }
    
    .safari-tabs-header button.safari-tab-btn {
        padding: 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #4B5563 !important;
        cursor: pointer !important;
        border-radius: 0px !important;
    }
}/* End custom CSS */