/* Custom responsive layout overrides */

/* ==========================================================================
   DESKTOP VIEW (Slider with uniform heights)
   ========================================================================== */
.module-slider .themify_builder_slider,
.module-slider .tf_swiper-wrapper,
.module-slider .tf_swiper-slide,
.module-slider .swiper-slide {
    height: 550px !important; /* Fixed height on desktop */
}

.module-slider .slide-image,
.module-slider .slide-image img {
    height: 550px !important;
    object-fit: cover !important;
    object-position: top center !important; /* Crop bottom, keep top */
    width: 100% !important;
}

.module-slider .tf_swiper-slide,
.module-slider .swiper-slide {
    background-size: cover !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
}

/* ==========================================================================
   MOBILE & TABLET VIEW (Static Hero Section - Second Slide Only)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Hide navigation arrows and pagination dots */
    .carousel-nav-wrap,
    .tf_carousel_nav_wrap,
    .carousel-prev,
    .carousel-next,
    .carousel-pager {
        display: none !important;
    }

    /* 2. Disable swiper translation movement */
    .module-slider .tf_swiper-wrapper,
    .module-slider .swiper-wrapper {
        transform: none !important;
        display: block !important;
        height: auto !important;
    }

    /* 3. Hide all slides by default on mobile */
    .module-slider .tf_swiper-slide,
    .module-slider .swiper-slide {
        display: none !important;
    }

    /* 4. Force Slide 2 (index 1) to display as static hero */
    .module-slider .tf_swiper-slide[data-swiper-slide-index="1"],
    .module-slider .swiper-slide[data-swiper-slide-index="1"] {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 500px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Fallback if Swiper is not initialized yet */
    .module-slider .tf_swiper-slide:not([data-swiper-slide-index]):nth-child(2),
    .module-slider .swiper-slide:not([data-swiper-slide-index]):nth-child(2) {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 500px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .module-slider .slide-image,
    .module-slider .slide-image img {
        height: 500px !important;
    }

    /* 5. Force inner rows, columns, and background containers inside second slide to cover full height */
    .module-slider .tf_swiper-slide[data-swiper-slide-index="1"] .themify_builder_row,
    .module-slider .tf_swiper-slide[data-swiper-slide-index="1"] .row_inner,
    .module-slider .tf_swiper-slide[data-swiper-slide-index="1"] .module_column,
    .module-slider .tf_swiper-slide[data-swiper-slide-index="1"] .tb-column-inner,
    .module-slider .tf_swiper-slide[data-swiper-slide-index="1"] .big-video,
    .module-slider .tf_swiper-slide[data-swiper-slide-index="1"] .tb_row_video,
    .module-slider .tf_swiper-slide[data-swiper-slide-index="1"] .tb-background-video,
    .module-slider .tf_swiper-slide:not([data-swiper-slide-index]):nth-child(2) .themify_builder_row,
    .module-slider .tf_swiper-slide:not([data-swiper-slide-index]):nth-child(2) .row_inner,
    .module-slider .tf_swiper-slide:not([data-swiper-slide-index]):nth-child(2) .module_column,
    .module-slider .tf_swiper-slide:not([data-swiper-slide-index]):nth-child(2) .tb-column-inner {
        height: 100% !important;
        min-height: 100% !important;
        position: relative;
    }

    /* Ensure absolute background images occupy the full row height */
    .module-slider .tf_swiper-slide[data-swiper-slide-index="1"] .big-video,
    .module-slider .tf_swiper-slide[data-swiper-slide-index="1"] .tb_row_video,
    .module-slider .tf_swiper-slide[data-swiper-slide-index="1"] .tb-background-video,
    .module-slider .tf_swiper-slide[data-swiper-slide-index="1"] .tb_slider_video,
    .module-slider .tf_swiper-slide:not([data-swiper-slide-index]):nth-child(2) .big-video,
    .module-slider .tf_swiper-slide:not([data-swiper-slide-index]):nth-child(2) .tb_row_video,
    .module-slider .tf_swiper-slide:not([data-swiper-slide-index]):nth-child(2) .tb-background-video {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
    }

    /* 6. Adjust text padding and prevent overflow */
    .module-slider .slide-content {
        padding: 0 24px !important;
        box-sizing: border-box !important;
        position: relative;
        z-index: 1; /* Keep text above background image */
    }

    .module-slider .slide-title {
        font-size: 1.45rem !important;
        line-height: 1.25 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        margin-bottom: 12px !important;
    }

    .module-slider .slide-content p {
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
    }
}

/* ==========================================================================
   WHATSAPP FLOATING BUTTON (STAND OUT EFFECT)
   ========================================================================== */
/* Make the WhatsApp button stand out */
.floatwa {
    bottom: 30px !important;
    right: 30px !important;
}

.floatwa .circle-button {
    background-color: #25d366 !important; /* Authentic WhatsApp green */
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4) !important; /* Soft glowing shadow */
    transition: all 0.3s ease !important; /* Smooth transition */
    animation: waPulse 2s infinite !important; /* Continuous pulse animation */
    
    /* Enlarge button dimensions */
    padding: 12px 28px !important;
    border-radius: 50px !important;
    box-sizing: border-box !important;
}

/* Enlarge button text */
.floatwa .circle-button span {
    font-size: 1.15rem !important;
}

/* Enlarge WhatsApp icon */
.floatwa .circle-button i {
    font-size: 1.45rem !important;
}

/* Hover effects */
.floatwa .circle-button:hover {
    transform: scale(1.08) !important; /* Slight grow on hover */
    background-color: #20ba5a !important; /* Slightly darker green */
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6) !important; /* Stronger glow shadow */
}

/* Attention-grabbing pulse keyframes */
@keyframes waPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}