/*mobile*/
@media screen and (max-width: 480px ){
    .navbar{
        font-size:24px;
    }
    /* All sections padding classes*/
 
    .services,
    .project-details,
    .testimonial,
    .blog,
    .contact,
    .projects
    {
        padding-right: 5%;
        padding-left: 5%;
        margin:0;
    }
    .hero-section{
        padding-bottom: 1rem;
        padding-right: 5%;
        padding-left: 5%;
    }
    .flex-container {
        display: flex;
    }
    .menu-toggle {
        order: 3;
    }     
    .logo{
        content: url('../media/logo/small logo.png'); 
        text-align: center;
        line-height: normal;
        height: 6.3vh;
    }
    /*Hero*/
    .hero-section{
        background-color: var(--primary);
    
    }
     .hero-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .hero-section .hero-content h3{
        text-align: center;
        font-size: medium;
    }
    .hero-section .hero-content h1{
        text-align: center;
    }
    .hero-section .hero-content p{
        display: none;
    }
    .hero-images img{
        height: 30vh;
        width: 60vw;
    }
    .hero-image{
        padding-bottom: 3rem;
    }
    .hero-button{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:0.5rem;
    }

    /*  About Us */
    .about-img img{
        text-align: center;
        
    }
    .about-section .top{
        padding:3rem 1rem;
    }
    .about-section .bottom{
        margin:3rem 0rem;

    }
   
    .about-grid{
        display: grid;
        grid-template-columns: repeat(1fr, 2fr);
        gap: 1rem;
    }
    .about-grid div{
        display: grid;
        grid-template-columns: repeat(1fr, 2fr);
        gap: 1rem;
    }
    .about-card{
        padding: 1rem;
    }
    .about-card-img img{
        display: none;
    }
    .marquee{
        padding: 2%;
    }

    /*Services*/
    .service-card{
        margin-bottom: 5%;
        padding: 4%;
    }
    .services .service-grid{
        flex-direction: column;
        gap: 3%;
    }
    .service-info{
        padding: 1% 2%;
    }

    /*   Projects   */
    .overflow-container{
         /*height: 200px; /* Set the specific height for the container */
        overflow: auto; /* Enable vertical and horizontal scrolling when content exceeds the container height */
        border-bottom: 0.5px solid #fff; /* Optional: Add a border for visual clarity */
    }
    .project-card{
        margin-bottom: 5%;
    }

    /*Slider Testimonilas*/
    .slider-container {
        display: flex;
        width: 100vw;
        transition: transform 0.5s ease-in-out;
    }
    .slide {
        flex: 1;
        text-align: center;
        align-items: center;
        min-width:94vw;
        box-sizing: border-box;
        padding: 8% 5%;
    }

    /*Blog*/
    .blog{
        font-size: 1.5rem;
    }
    .blog .quote-img i{
        font-size: 2rem;
        color: var(--secondary);
    }
    .blog-quote{
        border-bottom: 1px solid var(--primary);
    }
    /*blog team*/
    .blog .team{
        margin: 3rem 0rem;
    }
    .blog .team .images{
        display: grid;
        grid-template-columns: repeat(1, 2fr);
        gap: 1rem;
    }

    /*Forms*/
    .forms{
        flex-direction: column;
    }
    form{
        margin: 3% 0%;
    }
    .form-group{
        margin:1.3rem 0rem;
    }


    /*Footer*/
    .footer-container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    footer a{
        color: var(--tertiary);
        margin-top: 0.8rem;
    }

   
}

/*Extra Small Devices*/
@media screen and (min-width: 481px) and (max-width: 767px) {
    .navbar{
        font-size:24px;
    }
    /* All sections padding classes*/
    .hero-section,
    .services,
    .project-details,
    .testimonial,
    .blog,
    .contact,
    .projects
    {
        padding-right: 5%;
        padding-left: 5%;
        margin:0;
    }
    
    .logo{
        content: url('../media/logo/small logo.png'); 
        height: 6.5vh;
        line-height: normal;
    }

     /*Hero*/
     .hero-section{
        background-color: var(--primary);
        height: 100%;
    }
     .hero-section{
        padding: 2%;
     }
     .hero-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;

    }
    .hero-section .hero-content h3{
        text-align: center;
        font-size: medium;
    }
    .hero-section .hero-content h1{
        text-align: center;
    }
    .hero-section .hero-content p{
        display: none;
    }
    .hero-images img{
        height: 45vh;
        width:60vw;
    }
    .hero-button{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:0.5rem;
    }

    /*  About Us */
    .about-img{
        text-align: center;
    }
    .about-section .top{
        padding-top:3rem;
    }
    .about-section .bottom{
        margin:3rem 0rem;

    }
    .about-img img{
        padding: 2%;
    }
    .about-grid{
        display: grid;
        grid-template-columns: repeat(1fr, 2fr);
        gap: 1rem;
    }
    .about-grid div{
        display: grid;
        gap: 0.5rem;
    }
    .about-card{
        padding: 1rem;
    }
    .about-card-img img{
        display: none;
    }
    .marquee{
        padding: 2%;
    }

    /*Services*/
    .service-card{
        margin-bottom: 5%;
    }
    .services .service-grid{
        flex-direction: column;
        gap: 3%;
    }
    .service-info{
        padding: 1% 2%;
    }
    .service-card .service-img img{
        height: 40vh;
    }

    /*   Projects   */

    .overflow-container{
         /*height: 200px; /* Set the specific height for the container */
        overflow: auto; /* Enable vertical and horizontal scrolling when content exceeds the container height */
        border-bottom: 0.5px solid #fff; /* Optional: Add a border for visual clarity */
    }
    .project-card{
        margin-bottom: 5%;
    }

    /*Slider Testimonilas*/
    .slider-container {
        display: flex;
        width: 100vw;
        transition: transform 0.5s ease-in-out;
    }
    .slide {
        flex: 1;
        text-align: center;
        align-items: center;
        min-width:94vw;
        box-sizing: border-box;
        padding: 8% 5%;
    }

    /*Blog*/
    .blog{
        font-size: 2rem;
    }
    .blog .quote-img i{
        font-size: 4rem;
        color: var(--secondary);
    }
    .blog-quote{
        border-bottom: 1px solid var(--primary);
    }
    /*blog team*/
    .blog .team{
        margin: 3rem 0rem;
        
    }
    .blog .team .images{
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        gap: 1rem;
    }

    /*Forms*/
    .forms{
        flex-direction: column;
    }
    form{
        margin: 3% 0%;
    }
    .form-group{
        margin:1.3rem 0rem;
    }


    /*Footer*/
    .footer-container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    footer a{
        color: var(--tertiary);
        margin-top: 0.8rem;
    }



}