/**
 * NOS SERVICES SECTION - MOBILE RESPONSIVE STYLES
 * Optimized for mobile devices (max-width: 767px)
 * Display ONE service card at a time on mobile
 */

@media only screen and (max-width: 767px) {

    /* ==========================================
       SECTION CONTAINER
       ========================================== */

    .project-one {
        padding: 40px 0 !important;
        position: relative !important;
    }

    .project-one .auto-container {
        padding: 0 15px !important;
    }

    /* ==========================================
       SECTION TITLE
       ========================================== */

    .project-one .sec-title_title {
        font-size: 1.5rem !important; /* Reduced from 2.8rem */
        padding: 12px 25px !important;
        margin-bottom: 15px !important;
        letter-spacing: 0.5px !important;
        border: 2px solid rgba(255,255,255,0.4) !important;
        display: block !important;
        width: auto !important;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .project-one .sec-title_heading {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
        padding: 0 10px !important;
    }

    .project-one .sec-title_heading br {
        display: none !important;
    }

    /* ==========================================
       DECORATIVE ICONS - Hide on mobile
       ========================================== */

    .project-one_icon,
    .project-one_icon-two {
        display: none !important;
    }

    /* ==========================================
       CAROUSEL CONTAINER
       ========================================== */

    .three-item_carousel {
        padding: 0 !important; /* Remove side padding */
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .three-item_carousel .swiper-wrapper {
        display: flex !important;
        width: 100% !important;
    }

    .three-item_carousel .swiper-slide {
        width: 100% !important; /* Force full width per slide */
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 0 25px !important; /* Increased padding for better centering */
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important; /* center the card inside the slide */
        align-items: center !important; /* vertically center */
        flex-shrink: 0 !important; /* Prevent shrinking */
    }

    /* Fix for cloned slides in loop mode */
    .three-item_carousel .swiper-slide.swiper-slide-duplicate {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Force Swiper to respect mobile layout */
    .three-item_carousel.swiper-container {
        width: 100% !important;
        overflow: visible !important; /* Allow shadow to show */
    }

    /* ==========================================
       SERVICE CARD
       ========================================== */

    .project-block_one {
        width: 100% !important;
        margin: 0 auto !important;
        max-width: 360px !important; /* Limit max width for better mobile viewing */
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .project-block_one-inner {
        width: 100% !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .project-block_one-inner:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 10px 30px rgba(255, 152, 0, 0.3) !important;
    }

    /* ==========================================
       SERVICE IMAGE
       ========================================== */

    .project-block_one-image {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    .project-block_one-image img {
        width: 100% !important;
        height: auto !important;
        min-height: 320px !important; /* Increased for better visibility */
        max-height: 420px !important; /* Increased */
        object-fit: cover !important;
        display: block !important;
    }

    /* ==========================================
       SERVICE OVERLAY
       ========================================== */

    .project-block_one-overlay {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%) !important;
        padding: 15px 12px 12px 12px !important; /* Reduced padding */
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important; /* Reduced gap */
    }

    /* ==========================================
       SERVICE CONTENT
       ========================================== */

    .project-block_one-content {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 8px !important; /* Reduced */
        position: relative !important;
    }

    /* Hide heading in overlay since it's displayed on top */
    .project-block_one-overlay .project-block_one-heading {
        display: none !important;
    }

    .project-block_one-designation {
        font-size: 0.9rem !important; /* Reduced */
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 500 !important;
        margin-bottom: 8px !important; /* Reduced */
    }

    /* ==========================================
       SERVICE OPTIONS (Buttons)
       ========================================== */

    .project-block_one-options {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
        z-index: 20 !important;
        position: relative !important;
    }

    .project-block_one-arrow {
        width: 45px !important;
        height: 45px !important;
        background: rgba(255, 152, 0, 0.95) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        font-size: 18px !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    .project-block_one-arrow:hover {
        background: rgba(255, 152, 0, 1) !important;
        transform: scale(1.1) !important;
    }

    .project-block_one-more {
        padding: 10px 20px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        color: var(--main-color) !important;
        border-radius: 25px !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    .project-block_one-more:hover {
        background: rgba(255, 255, 255, 1) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    }

    /* ==========================================
       NAVIGATION ARROWS
       ========================================== */

    .services-carousel-nav {
        position: static !important;
        margin-top: 30px !important;
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }

    .services-slider-prev,
    .services-slider-next {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 45px !important;
        height: 45px !important;
        background: rgba(255, 152, 0, 0.9) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        font-size: 18px !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.3s ease !important;
        z-index: 10 !important;
    }

    .services-slider-prev:hover,
    .services-slider-next:hover {
        background: rgba(255, 152, 0, 1) !important;
        transform: scale(1.1) !important;
    }

    .services-slider-prev:active,
    .services-slider-next:active {
        transform: scale(0.95) !important;
    }

    /* ==========================================
       FACEBOOK REEL SECTION
       ========================================== */

    .project-one .auto-container[style*="margin-top: 60px"] {
        margin-top: 40px !important;
        padding: 0 15px !important;
    }

    .project-one .row.clearfix {
        margin: 0 !important;
    }

    /* Stack reel and content vertically on mobile */
    .project-one .row.clearfix > .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 30px !important;
    }

    /* Facebook reel iframe container */
    .project-one .row.clearfix iframe {
        border-radius: 12px !important;
    }

    /* Social media icons */
    .project-one .row.clearfix > .col-lg-6 div[style*="gap: 20px"] {
        gap: 15px !important;
        margin-top: 20px !important;
    }

    .project-one .row.clearfix > .col-lg-6 a[style*="width: 50px"] {
        width: 45px !important;
        height: 45px !important;
    }

    .project-one .row.clearfix > .col-lg-6 a svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* ==========================================
       COLOR LAYER
       ========================================== */

    .project-one_color-layer {
        opacity: 0.4 !important; /* Lighter for better text readability */
    }
}

/* ==========================================
   SMALL MOBILE (max-width: 480px)
   ========================================== */

@media only screen and (max-width: 480px) {

    .project-one {
        padding: 30px 0 !important;
    }

    .project-one .sec-title_title {
        font-size: 1.3rem !important;
        padding: 10px 20px !important;
    }

    .project-one .sec-title_heading {
        font-size: 1.3rem !important;
    }

    /* Title - smaller on small mobile but still visible */
    .project-block_one-heading {
        font-size: 1.3rem !important;
        padding: 10px 15px !important;
        margin-bottom: 10px !important;
    }

    .project-block_one-image img {
        min-height: 280px !important;
        max-height: 380px !important;
    }

    .project-block_one-overlay {
        padding: 22px 12px 12px 12px !important;
    }


    .project-block_one-designation {
        font-size: 0.85rem !important; /* Reduced */
        margin-bottom: 6px !important;
    }

    .project-block_one-arrow {
        width: 36px !important; /* Reduced */
        height: 36px !important;
        font-size: 14px !important;
    }

    .project-block_one-more {
        padding: 7px 15px !important; /* Reduced */
        font-size: 0.85rem !important;
    }

    .services-slider-prev,
    .services-slider-next {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    .project-one .row.clearfix > .col-lg-6 a[style*="width: 50px"] {
        width: 40px !important;
        height: 40px !important;
    }

    .project-one .row.clearfix > .col-lg-6 a svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ==========================================
   TABLET (768px - 991px)
   ========================================== */

@media only screen and (min-width: 768px) and (max-width: 991px) {

    .project-one .sec-title_title {
        font-size: 2rem !important;
    }

    .project-one .sec-title_heading {
        font-size: 1.8rem !important;
    }

    /* Show 2 services per view on tablet */
    .three-item_carousel .swiper-slide {
        width: 50% !important;
        padding: 0 10px !important;
    }

    .services-carousel-nav {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-top: 0 !important;
        width: 100% !important;
        justify-content: space-between !important;
        padding: 0 20px !important;
    }

    .services-slider-prev {
        position: static !important;
    }

    .services-slider-next {
        position: static !important;
    }
}