/*small tablets*/
@media screen and (min-width: 768px) and (max-width: 991px) { 
    .logo{
        content: url('../media/logo/name only.png'); 
    }
    /* All sections padding classes*/
    .hero-section,
    .services,
    .project-details,
    .testimonial,
    .blog,
    .contact,
    .projects
    {
        padding-right: 3%;
        padding-left: 3%;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    /*Logo*/
    .logo {
        height: 3vh;
    }
    .navbar{
        font-size:14px;
    }

     /*header*/
     .cta-button button{
        font-size:1rem;
     }

    /*   Hero Section  */
    .hero-section{
        height:100%;   
    }
    .hero-section .hero-content{
        align-items:left;
        text-align:left;
        justify-content:space-between;
        padding-right:2rem;
    }
    .hero-text{
        font-size: 20px;
    }
    .hero-images img{
        width:40vw;
        height:60vh;
    }
    .hero-container{
        display:flex;
        flex-direction:row;
        align-items: center;
    }
    .hero-button button{
        float:left;
        margin-top:1rem;
    }

    /*About*/
    .about-section{
        padding-top: 3rem;
    }
    /*About*/
   
    .about-section .flex{
        padding-top: 3rem;
        display: flex;
        flex-direction: column;
    }
    .about-img img{
        width: 40vw;
    }
    .top{
        display: flex;
        flex-direction: row;
        gap: 3rem;
    }
    .bottom{
        padding-bottom: 3rem;
    }

   
    .about-grid{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            gap: 0.5rem;
    }
    
    .div1 { 
        grid-area: 1 / 1 / 2 / 3; 
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .div2 { 
        grid-area: 2 / 1 / 3 / 3; 
        display: flex;
        flex-direction: row;
    }
    .div3 { grid-area: 1 / 3 / 3 / 5; }
    .div4 { grid-area: 1 / 4 / 3 / 5; display: none;}

  
  
    .marquee{
        padding: 2%;
    }

    /* services*/
    .service-grid{
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap:2rem;

    }
    .service-card .service-img img{
        height: auto;
    }


    /* projects */
    .overflow-container{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        grid-gap:2rem;
        height: 400px;
        padding-right: 1rem;;
    }
    .project-details{
        padding:1rem;    
    }
    .designs{
        padding-bottom:2rem;
    }

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

    
  
    /*Forms*/
    .forms{
        flex-direction: row;
        justify-content:space-between;
        align-items: flex-end;
    }
    .form-group{
        margin:1.3rem 0rem;
    }
    .form-group input[type="text"], input[type="email"]{
        padding: 0.4rem;
    }
    .form-one{
        padding-right:2rem;
    }
    .form-two{
        padding-left:2rem;
    }

    /*   footer    */
    .footer-container{
        display: grid;
        grid-template-columns:repeat(3, 1fr);
        grid-gap:2rem;
        place-items:center;
    }
    .first{
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        height:30vh;
        padding:2rem 0rem;
    }
 

}


/* Large Tablets Laptops*/
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .logo{
        content: url('../media/logo/name only.png'); 
    }
    /*Logo*/
    .logo {
        height: 3.5vh;
    }
    .navbar{
        font-size:16px;
    }

    /*   Hero Section  */
    .hero-section{
        height:85vh;
        
    }
    /* All sections padding classes*/
    .hero-section,
    .services,
    .project-details,
    .testimonial,
    .blog,
    .contact,
    .projects
    {
        padding-right: 3%;
        padding-left: 3%;
        padding-top:3rem ;
    }
    /*Logo*/
    .logo {
        height: 3vh;
    }
    .navbar{
        font-size:14px;
    }

     /*header*/
     .cta-button button{
        font-size:1rem;
     }

    /*   Hero Section  */
    .hero-section{
        height:80vh;   
    }
    .hero-section .hero-content{
        align-items:left;
        text-align:left;
        justify-content:space-between;
        padding-right:2rem;
    }
    .hero-text{
        font-size: 20px;
    }
    .hero-images img{
        width: 40vw;
        height:60vh;
        padding: 1rem;
    }
    .hero-container{
        display:flex;
        flex-direction:row;
        align-items: center;
    }
    .hero-button button{
        float:left;
        margin-top:2rem;
    }

    /*About*/
   
    .about-section .flex{
        padding-top: 3rem;
        display: flex;
        flex-direction: column;
    }
    .top{
        display: flex;
        flex-direction: row;
        gap: 3rem;
    }
    .about-img img{
        width: 40vw;
    }
    .bottom{
        padding-bottom: 3rem;
    }

 
    .about-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 1rem;
        }
        
        .div1 { 
            grid-area: 1 / 1 / 2 / 2; 
            display: grid;
            gap: 1rem;
        }
        .div2 { 
            grid-area: 2 / 1 / 3 / 3; 
            display: grid;
            gap: 1rem;
        }
        .div3 { 
            grid-area: 1 / 2 / 2 / 3; 
        }
        .div4{
            display: none;
        }

  
    .about-card-img img{
        display: none; 
    }

    .marquee{
        padding: 1rem;
    }

    /* services*/
    .service-grid{
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap:2rem;

    }
    .service-card .service-img img{
        height: auto;
    }


    /* projects */
    .overflow-container{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        grid-gap:2rem;
        height: 400px;
        
    }
    .project-details{
        padding:1rem;    
    }
    .designs{
        padding-bottom:2rem;
    }

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

    /*Forms*/
    .forms{
        flex-direction: row;
        justify-content:space-between;
    }
    .form-group{
        margin:1.3rem 0rem;
    }
    .form-group input[type="text"], input[type="email"]{
        padding: 0.4rem;
    }

    /*   footer    */
    .footer-container{
        display: grid;
        grid-template-columns:repeat(3, 1fr);
        grid-gap:2rem;
        place-items:center;
    }
    .first{
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        height:30vh;
        padding:2rem 0rem;
    }
}