/*============================================================
    For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1150px) {

    /* slider */
    .carousel-caption h3 {
        font-size: 45px;
    }

    /* works */


    /* team */

    .member-thumb {
        width: auto;
    }

}


/*============================================================
    Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {


    /* slider */

    .carousel-caption {
        padding: 20px;
        text-align: center;
    }

    .carousel-caption h2 {
        font-size: 40px;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .carousel-caption h3 {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .carousel-caption p {
        font-size: 16px;
        line-height: 1.4;
        padding: 0 10px;
    }

    .blinking-button {
        font-size: 14px;
        padding: 8px 15px;
        margin-top: 10px;
        display: inline-block;
    }

    /* services */

    .service-item {
        margin: 0 auto 30px;
        text-align: center;
        width: 325px;
    }

    .service-icon {
        float: none;
        margin: 0 auto 15px;
        text-align: center;
        width: 50px;
    }

    .service-desc {
        margin-left: 0;
        position: relative;
        top: 0;
    }

    /* works */

    .work-item {
        width: 33%;
    }

    /* team */

    .member-thumb .overlay h5 {
        margin: 25px 0;
    }

    .member-thumb {
        margin: 0 auto;
    }

    /* fatcs */

    #facts {
        background-position: center top !important;
    }

    .counters-item {
        margin-bottom: 30px;
    }

    .counters-item i {
        margin: 0 0 15px;
    }

    .counters-item strong {
        font-size: 45px;
    }

    /* contact */

    .contact-form .name-email input {
        margin-right: 0;
        width: 100%;
    }

    .footer-social {
        margin-top: 45px;
    }

    /* footer */

    .footer-single {
        margin-bottom: 30px;
    }

    /* Team mamber */

    .team-member {
        margin-bottom: 20px;
    }

}


/*============================================================
    Mobile (Portrait) Design for a width of 320px
==============================================================*/

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

    /* Banner/Slider Fixes */
    #slider .item {
        background-size: cover !important;
        background-position: center center !important;
        min-height: 60vh !important;
        height: auto !important;
    }

    .carousel-caption {
        position: absolute;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 90% !important;
        padding: 15px !important;
        text-align: center !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 10px !important;
        margin: 0 !important;
    }

    .carousel-caption h2 {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    .carousel-caption h3 {
        font-size: 18px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    .carousel-caption p {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin: 0 auto !important;
        padding: 0 5px !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
    }

    .blinking-button {
        font-size: 12px !important;
        padding: 6px 12px !important;
        margin-top: 8px !important;
        display: inline-block !important;
        margin-left: 0 !important;
    }

    /* Ensure text doesn't overflow */
    .carousel-caption * {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    .sec-sub-title p {
        font-size: 14px;
    }

    .social-links {
        margin-top: 20%;
    }

    /* services */

    .service-item {
        margin: 0 auto 30px;
        text-align: center;
        width: 280px;
    }

    .service-icon {
        float: none;
        margin: 0 auto 15px;
        text-align: center;
        width: 50px;
    }

    .service-desc {
        margin-left: 0;
        position: relative;
        top: 0;
    }

    /* works */

    .work-item {
        left: 5% !important;
        width: 90%;
    }

    /* team */

    .team-member {
        margin-bottom: 30px;
    }

    .team-member:last-child {
        margin-bottom: 0;
    }

    .member-thumb {
        margin: 0 auto;
    }

    /* facts */

    #facts {
        background-position: center top !important;
    }

    .counters-item {
        margin-bottom: 30px;
    }

    /* contact */
    .contact-address {
        margin-bottom: 30px;
    }

    .footer-social {
        margin-top: 20px;
        text-align: center;
    }

    .footer-social li {
        display: inline-block;
    }

    .footer-social li a {
        margin: 0 10px;
    }

    /* footer */

    .footer-single {
        margin-bottom: 30px;
    }

}


/*============================================================
    Mobile (Landscape) Design for a width of 480px
==============================================================*/

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

    /* slider adjustments */
    .carousel-caption {
        width: 85% !important;
    }

    .carousel-caption h2 {
        font-size: 28px !important;
    }

    .carousel-caption h3 {
        font-size: 20px !important;
    }

    .carousel-caption p {
        font-size: 15px !important;
    }

    /* services */

    .service-item {
        margin: 0 auto 30px;
        text-align: center;
        width: 325px;
    }

    .service-icon {
        float: none;
        margin: 0 auto 15px;
        text-align: center;
        width: 50px;
    }

    .service-desc {
        margin-left: 0;
        position: relative;
        top: 0;
    }

    /* works */

    .work-item {
        left: inherit !important;
        width: 50%;
    }

}

/* Additional Mobile Fixes for Very Small Screens */
@media only screen and (max-width: 360px) {
    .carousel-caption h2 {
        font-size: 20px !important;
    }

    .carousel-caption h3 {
        font-size: 16px !important;
    }

    .carousel-caption p {
        font-size: 13px !important;
    }

    .blinking-button {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
}

/* Fix for banner image responsiveness */
@media (max-width: 768px) {
    #slider .carousel-inner .item {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        min-height: 400px !important;
        max-height: 500px !important;
    }
}
/* ===========================================
   CRITICAL FIXES FOR SLIDER OVERLAP ON MOBILE
   =========================================== */

@media only screen and (max-width: 767px) {
    /* Force slider to take full viewport height and push content down */
    #slider {
        position: relative !important;
        z-index: 100 !important;
        height: auto !important;
        min-height: 70vh !important;
        overflow: hidden !important;
    }
    
    #slider .carousel-inner {
        height: 100% !important;
        min-height: 70vh !important;
    }
    
    #slider .item {
        height: 100% !important;
        min-height: 70vh !important;
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important;
    }
    
    /* Fix carousel caption positioning */
    .carousel-caption {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 95% !important;
        max-width: 95% !important;
        padding: 20px 15px !important;
        margin: 0 !important;
        text-align: center !important;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(5px) !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Clear text styling */
    .carousel-caption h2,
    .carousel-caption h3,
    .carousel-caption p {
        color: white !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
    
    .carousel-caption h2 {
        font-size: 24px !important;
        font-weight: 700 !important;
    }
    
    .carousel-caption h3 {
        font-size: 18px !important;
        font-weight: 600 !important;
    }
    
    .carousel-caption p {
        font-size: 14px !important;
        margin-top: 10px !important;
    }
    
    /* Fix button positioning */
    .blinking-button {
        display: inline-block !important;
        margin: 10px auto 0 !important;
        padding: 8px 15px !important;
        font-size: 13px !important;
        text-align: center !important;
    }
    
    /* Ensure features section starts after slider */
    #features {
        clear: both !important;
        position: relative !important;
        z-index: 50 !important;
        margin-top: 0 !important;
        padding-top: 60px !important;
    }
    
    /* Hide filter overlay on very small screens if causing overlap */
    @media (max-height: 600px) {
        .slider-filters-overlay {
            display: none !important;
        }
        
        #slider {
            min-height: 80vh !important;
        }
        
        #slider .item {
            min-height: 80vh !important;
        }
    }
}

/* For tablet sizes */
@media (min-width: 768px) and (max-width: 979px) {
    #slider {
        min-height: 60vh !important;
    }
    
    #slider .item {
        min-height: 60vh !important;
    }
    
    .carousel-caption {
        width: 90% !important;
        padding: 25px !important;
    }
    
    .carousel-caption h2 {
        font-size: 32px !important;
    }
    
    .carousel-caption h3 {
        font-size: 22px !important;
    }
    
    .carousel-caption p {
        font-size: 16px !important;
    }
}

/* Fix for landscape mode on mobile */
@media only screen and (max-width: 767px) and (orientation: landscape) {
    #slider {
        min-height: 90vh !important;
    }
    
    #slider .item {
        min-height: 90vh !important;
    }
    
    .carousel-caption {
        top: 45% !important;
        padding: 15px !important;
    }
    
    .carousel-caption h2 {
        font-size: 20px !important;
        margin-bottom: 5px !important;
    }
    
    .carousel-caption h3 {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }
    
    .carousel-caption p {
        font-size: 13px !important;
    }
}