/* ==========================================================================
   Hero & Image Layout
   Standardizes heights for the main entrance and card visuals
   ========================================================================== */
   html {
    overflow-y: scroll !important;
}
html,
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.hero-section {
    height: 80vh;
    /* Set hero section height for visual impact */
    overflow: hidden;
}

.hero-section .carousel-item {
    height: 80vh;
}

.hero-section img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}


/* ==========================================================================
   Interactive Card Animation
   Handles the rotation and color shift when a user hovers over a card
   ========================================================================== */

/* 1. Base style for smooth transitions */
.col .card {
    /* Apply transition to transform (for rotation) and background-color (for yellow hover) */
    transition: transform 0.4s ease-in-out, background-color 0.4s ease-in-out;
    /* Optional: Ensure the card has a background color to transition from */
    background-color: #ffffff;
    transform: translateY(0);
}

/* 2. Hover and Focus effect */
/* Target the card element on both hover (mouse) and focus (keyboard tabbing) */
.col .card:hover,
.col .card:focus {
    /* Change background color to yellow */
    background-color: #fff9c4;
    /* A light yellow for better contrast */

  
    /* Optional: Enhance shadow on hover/focus (using !important to override Bootstrap's shadow-sm if needed) */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Ensure card is focusable for testing the :focus state */
.card[tabindex="0"]:focus {
    outline: 2px solid #ffc107;
    /* Add a visible outline for accessibility */
    outline-offset: 3px;
}


/* ==========================================================================
   Success Button Transitions
   Subtle lift and glow for primary action buttons
   ========================================================================== */

/* 1. Apply smooth transitions to the base button class */
.btn-success {
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* 2. Style on Hover (Mouse interaction) */
.btn-success:hover {
    background-color: #525250;
    /* Slightly darker green */
    transform: translateY(-2px);
    /* Lift up */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 3. Style on Focus (Keyboard interaction) */
.btn-success:focus {
    background-color: #198754;
    transform: translateY(-2px);
    /* Custom shadow/ring for focus state (adjust colors as needed) */
    box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5), 0 4px 8px rgba(0, 0, 0, 0.2);
    outline: 0;
}


/* ==========================================================================
   "Pop Out" Card Effect
   Makes specific cards feel tactile and elevated
   ========================================================================== */

/* Base Card Styling and Transition Setup */
.card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    /* Key: Apply smooth transition to transform and box-shadow */
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
    /* Ensure the card is focusable for the :focus effect (only necessary if it's not a link) */
    outline: none;
}

/* The "Pop Out" Effect on Hover and Focus */
.card:hover,
.card:focus {
    /* 1. Slight scale up */
    transform: scale(1.03) translateY(-8px);

    /* 2. Enhanced, deep shadow for the "pop" feeling */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 128, 0, 0.2);
    z-index: 10;
    /* Bring the card slightly forward */
    border-color: #28a745;
    /* Highlight border with success color */
}

/* Adjusting image height for a "portrait" look */
.card-img-top {
    height: 300px;
    /* Fixed height for consistent portrait look */
    object-fit: cover;
    /* Ensures image covers the area without distortion */
}


/* ==========================================================================
   Button Consistency
   Ensures success buttons across different sections behave the same way
   ========================================================================== */

/* Style the link buttons */
.btn-success {
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #198754;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* General layout adjustments */
#activities {
    background-color: #f8f9fa;
}


/* 1. Base style for smooth transitions on all interaction properties */
.btn-success {
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* 2. Hover Style (Pop Out Effect) */
.btn-success:hover {
    background-color: #198754;
    /* Slightly darker background color for visual feedback */
    transform: translateY(-2px);
    /* Slight lift/pop out effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    outline: none;
}

/* 3. Focus Style (Pop Out Effect and custom color for focus ring) */
.btn-success:focus {
    background-color: #198754;
    /* Keep the darker background on focus for consistency */
    transform: translateY(-2px);
    /* Apply the slight lift/pop out effect */
    outline: none;
    /* Remove default browser outline */

    /* Apply the requested #525250 color to the focus ring (the first shadow value) */
    /* #525250 is RGB(82, 82, 80). */
    box-shadow: 0 0 0 0.25rem rgba(82, 82, 80, 0.5), 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* ==========================================================================
   Package Hero & Overlays
   Settings for specific travel package header images
   ========================================================================== */

.package-hero {
    height: 60vh;
    background: url('https://via.placeholder.com/1920x1080?text=Sigiriya+Package+Hero') center center no-repeat;
    background-size: cover;
    position: relative;
}

.package-hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   List Item Hover Effects
   Adds a slight zoom to images within list group items
   ========================================================================== */

/* Custom CSS for the Hover Animation */
.list-group-item-action {
    /* Set up the transition for smooth animation */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Effect when hovering over the list item */
.list-group-item-action:hover {
    /* Lifts the card slightly */
    transform: scale(1.015);
    /* Adds a stronger, floating shadow effect */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    /* Ensures the background change from Bootstrap is smooth */
    background-color: #f8f9fa;
    /* Optional: Keep background color consistent */
}

/* Style for the image inside the list item */
.list-group-item-action img {
    /* Ensure the image scales gracefully with the parent container */
    transition: transform 0.3s ease-in-out;
}

/* Slight zoom effect on the image when hovering the parent item */
.list-group-item-action:hover img {
    transform: scale(1.05);
}


/* ==========================================================================
   Feature Cards (Why Choose Us)
   Flexbox-based layout for selling points/features
   ========================================================================== */

/* Container holding all features */
.features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Individual feature cards */
.feature {
    width: 250px;
    padding: 30px;
    margin: 15px;

    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .15);
    transition: 0.4s;
    font-size: 18px;
    font-weight: 500;
}

/* Hover effect with a modern gradient */
.feature:hover {
    background: linear-gradient(135deg, #00c3ff, #0072ff);
    color: white;
    transform: scale(1.08);
}

.footer-logo {
    max-width: 150px; /* Adjust based on your logo design */
    height: auto;
}

/* ==========================================================================
   Carousel Caption Animations
   Handles vertical centering and fade-up text effects
   ========================================================================== */

/* Centering the caption vertically */
.carousel-caption {
    top: 50%;
    bottom: auto;
    /* Overrides Bootstrap default bottom positioning */
    transform: translateY(-50%);
}

/* Animation keyframes */
@keyframes textFadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply this to each element you want to animate */
.animate-text {
    opacity: 0;
    /* Ensures text is hidden before animation starts */
    animation: textFadeUp 1.2s ease forwards;
}

/* Delays for smooth sequence */
.delay {
    animation-delay: 0.4s;
}

.delay2 {
    animation-delay: 0.8s;
}


/* ==========================================================================
   Readability Helpers
   Deep charcoal gray text with a subtle glow for better contrast on images
   ========================================================================== */

.text-dark-custom {
    color: #333333 !important;
    /* Deep charcoal gray */
    /* Subtle white glow helps readability on bright videos */
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8),
        0px 0px 5px rgba(255, 255, 255, 0.5);
    font-weight: 600;
    /* Making it slightly bolder helps it stand out */
}


/* ==========================================================================
   Animated Booking Button
   Sliding arrow effect to encourage user interaction
   ========================================================================== */

.btn-arrow-anim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    overflow: hidden;
    /* Clips the arrow when it's outside */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-text {
    transition: transform 0.3s ease;
}

.btn-arrow {
    position: absolute;
    transform: translateX(30px);
    /* Move arrow off-screen to the right */
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    margin-left: 8px;
}

/* Hover Interaction */
.btn-arrow-anim:hover .btn-text {
    transform: translateX(-10px);
    /* Nudge text to the left */
}

.btn-arrow-anim:hover .btn-arrow {
    position: relative;
    /* Bring into layout flow */
    transform: translateX(0);
    /* Slide into position */
    opacity: 1;
}

/* Subtle Pulse for the Arrow */
@keyframes arrow-bounce {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}

.btn-arrow-anim:hover .btn-arrow {
    animation: arrow-bounce 1s infinite;
    /* Continuous micro-bounce on hover */
}


/* ==========================================================================
   Floating WhatsApp Button
   Fixed positioning for easy customer support access
   ========================================================================== */

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* Deepened green to exceed 4.5:1 contrast ratio */
    background-color: #075e54 !important; 
    color: #ffffff !important;
    padding: 12px 20px; /* Slightly more padding */
    border-radius: 50px;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 16px; /* Ensuring font is large enough */
    font-weight: 700; /* Extra bold helps contrast scores */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #043d36 !important; /* Even darker on hover */
    color: #ffffff !important;
}
/* Responsive: Hide text on very small mobile screens for a cleaner look */
@media (max-width: 576px) {
    .whatsapp-text {
        display: none;
    }

    
}

/* Hover animation to make it feel professional */
.whatsapp-float:hover {
    background-color: #128c7e;
    color: white;
    transform: translateY(-5px);
    /* Smooth lift-up effect */
}


/* ==========================================================================
   Mobile Navigation Logic
   Custom toggle logic for the menu when using checkboxes instead of JS
   ========================================================================== */

@media (max-width: 991px) {
    .collapse:not(.show) {
        display: none;
    }

    /* When checkbox is checked, show the menu */
    #navbar-logic:checked~.collapse {
        display: block;
    }
}



/* ==========================================================================
   Carousel Video & Layering Logic
   Ensures text stays on top and videos behave as backgrounds
   ========================================================================== */

/* The main slide container needs relative positioning to anchor the caption */
.carousel-item {
    position: relative;
}

/* Keeps the video container at the bottom of the stack (z-index 1) */
.carousel-video-container {
    position: relative;
    z-index: 1;
}

/* Standardizing the caption position to sit above the video layers */
.carousel-caption {
    position: absolute;
    z-index: 10;
}

/* Prevents the YouTube/Video iframe from "stealing" mouse clicks.
   This ensures users can still click buttons or links in the caption. 
*/
.carousel-video-container iframe {
    pointer-events: none;
}

/* Dark overlay to sit between the video and the text.
   This makes the white text much easier to read against bright video scenes.
*/
.video-overlay {
    position: absolute;
    /* 'inset: 0' is a modern shorthand to cover the full width and height */
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Final layer adjustment to make sure the text is definitely on top 
   of the video and the dark overlay.
*/
.carousel-caption {
    z-index: 3;
}



body.modal-open {
    padding-right: 0 !important;
}

/* ==========================================================================
   Refined Typography & Accents
   Matches the Plus Jakarta Sans vibe from the reference design
   ========================================================================== */

/* Stronger font weight for the main "Discover" heading */
.fw-black {
    font-weight: 800;
}

/* Update your success button to use the brighter "Primary" green from the new design */
.btn-success {
    background-color: #0df259 !important;
    color: #111813 !important;
    /* Dark text on bright green is more readable */
    border: none !important;
    box-shadow: 0 10px 15px -3px rgba(13, 242, 89, 0.3) !important;
}

.btn-success:hover {
    background-color: #0be052 !important;
    transform: translateY(-3px);
    box-shadow: 0 20px 25px -5px rgba(13, 242, 89, 0.4) !important;
}

/* Ensure the Material Symbols align perfectly with text */
.material-symbols-outlined {
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Final Contrast Fix: Deepened greens for small text and prices */
.text-success { 
    color: #11663e !important; /* Darker green for price '€50' and headers */
}

/* Fixes 'Starting from' and '/ day' contrast */
.text-muted { 
    color: #4d4d4d !important; /* Darker gray for better visibility */
}

.small.text-muted { 
    color: #4d4d4d !important; 
}

/* Fixes the 'Available' badge contrast once and for all */
.badge.bg-light.text-success.border-success {
    color: #0b4a2d !important;
    border-color: #0b4a2d !important;
    background-color: #f8f9fa !important;
}

/* Watermark Section Green - Deepened for readability */
#watermarck-section span[style*="color: #0df259"] {
    color: #007d2c !important;
}
/* end of file */