@media (max-width: 768px) {
    
    
  .logo-container{
    display: none;
  }
    .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: rgb(167, 64, 64);
        width: 100%;
        z-index: 1000;
        padding: 20px ;
    }
    .menu.active {
        display: flex;
    }
    .menu li {
        text-align: center;

    }
    .menu li a{
        color: white;

    }
    .menu-toggle {
        display: block;
        color: black; 
    }

    .floating-phone {
        padding: 8px 12px;  
        font-size: 14px;    
    }

    .floating-phone img {
        width: 16px;
        height: 16px;
    }

        .desktop-slider {
            display: none;
        }
        .mobile-slider {
            display: block;
            
        }

        .buttons {
            right: 50%;
            transform: translateX(50%);
            display: flex;
            flex-direction: row;
            justify-content: center; /* Keep buttons in a row */
            /* flex-wrap: wrap; Prevent stretching */
            width: auto;
        }
    
        .buttons a {
            white-space: nowrap; /* Prevent buttons from breaking into multiple lines */
            padding: 10px 15px; /* Keep button size consistent */
        }

    h1{
        margin-top: 0px;
        margin-bottom: 40px;
        font-size: 25px;
        /* border: 2px solid red; */
        width: 100%;
    }
    
    /* Optional: Adjust images to fit nicely */
    .slider img {
        width: 100%;
        height: auto;
        
    }


    /* -----------------------cards----------------------- */

    .cards-container {
        flex-direction: row;
    }
    
    .card {
        width: 100;
        height: 170px;
    }

/* ---------------------------------service animation -------------------------- */

.scroll-text {
    font-size: 1.5rem;
}
.scroll-strip {
    padding: 25px 0;
}
.scroll-wrapper {
    animation-duration: 62s; /* Faster scrolling on smaller screens */
}

    /* ------------------first container--------------------------------- */


    .container {
        flex-direction: column;
        text-align: center;
    }

    .image-container, .text-container {
        width: 100%;
        padding: 10px;
    }

    .text-container {
        flex: 1;
        padding: 8px;
        /* border: 2px solid red; */
        min-height: 500px;
    }
    
    .text-container h2 {
        font-size: 18px;
        margin-bottom: 50px;
        text-align: center;

    }
    
    .text-container p {
        font-size: 14px;
        color: #1f1f1f;
        line-height: 1.5;
    }

    .container {
        flex-direction: column;
        text-align: center;

}


.container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    height: auto;
    gap: 20px;
    padding: 50px 10px;
    background-color: white;
    box-shadow: inset 0px 8px 15px rgba(0, 0, 0, 0.2); /* Adds inner shadow */
    border-radius: 10px; /* Optional: Softens the edges */
}

.blood-animation {
    width: 90%;
    max-width: 300px; /* Reduce max-width for smaller screens */
    height: auto;
    aspect-ratio: 1 / 1; /* Ensures it's always square */
}

.vial {
    width: 100%;
    height: auto;
}

.liquid {
    width: 100%;
    bottom: 0;


}

.text-content {
    width: 90%;
    max-width: 500px;
    text-align: left;

}

.text-content h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.text-content p {
    font-size: 14px;
    line-height: 1.5;
}


/* --------------------------government scheme----------------------------- */

.choose-us-container {
    
    margin: 30px auto;
    width: 90%;
    
}

.content-container {
    flex-direction: column;
    text-align: center;
}

.image-container, .text-container {
    max-width: 100%;
}

/* -----------------------------why choose us------------------------------- */

.choose-us-content {
    flex-direction: column;
    text-align: center;
  
}

.choose-us-image, .choose-us-text {
    max-width: 100%;
}

.choose-us-text ul {
    display: inline-block;
    text-align: left;
}

/* ---------------------------------video----------------------------- */

.video-container {
    flex-direction: column;
    align-items: center;
}

.video-box {
    width: 90%;
}

/* ---------------------------Testimonals------------------------ */
.testimonial-container {
    flex-direction: column;
    text-align: center;
}


/* --------------------footer--------------------- */

.footer-container {
    flex-direction: column;
    text-align: center;
}
}