project_media.css

@media screen and (max-width :1065px) {
    .examples{
        height: 350px;   
    }
    .prices {
        height: 700px; /* Adjust the height to 700px for screens 1000px or wider */
        width: 30%;
    }

    
}
@media screen and (max-width :932px) {
    
    .h{
        font-size: 1.2rem;   
    }
    .nav-toggle{
        display: block;
        margin-right: 20px;
        
    }
    .main-nav{
        overflow: initial;
    }
    .nav-links{
        /* display: none;                   before when we make hamberger icon are generated  */
        position: absolute;
        background-color: white;
        left: -100%;
        top: 100%;
        width: 100%;
        padding-block: 20px;
        transition: 0.2s ease-in-out;
    }
    .nav-links.active{
        left: 0;
    }
    .nav-links ul{
        flex-direction: column;
    }
    
   .examples-card{
    width: calc(50% - 10px);
    height: 180px;
   }
   .examples-area{
    gap: 20px;
   }
   .cta-section{
    padding-block: 80px;
   }
   .examples{
    height: 400px; 
    width: 35%;  
   }
   .examples-area{
    column-gap: 50px;
    row-gap: 50px;
   }
   .work-with{
    flex-direction: column;
   }
   .work-left{
    padding: 10px;
   }
   .left-review{
    padding: 10px;
    width: 30vw;
   }
   
   .right-right-review{
    display: none;
   }
   
 
.shila{
    display: none;
}
.prices {
    height: 830px; /* Adjust the height to 700px for screens 1000px or wider */
    width: 25%;
}
.work-num{
    padding: 10px;
    width: 70vw;
}
.work-img img{
    height: 40px;
}
.work-with{
    padding: 10px;
    margin-top: 20px;
}
.work-left{
    padding: 10px;
    width: 70vw; 
    text-align: left;
}


}

@media screen and (max-width :836px){
    .prices {
        height: 860px; /* Adjust the height to 700px for screens 1000px or wider */
        width: 25%;
    }
    .examples{
        height: 350px; 
        width: 35%;  
       }
       .work-num{
        padding: 10px;
        width: 70vw;
    }
    .work-img img{
        height: 40px;
    }
    .work-with{
        padding: 10px;
        margin-top: 20px;
    }
    .work-left{
        padding: 10px;
        width: 70vw; 
        text-align: left;
    }
}


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

    .primary-button{
        width: 100%;
        text-align: center;
    }
    .nav-toggle{
        font-size: 25px;
    }
    .header-section{
        flex-direction: column-reverse;
    }
    .header-left{
        max-width: 100vw;
        text-align: center;
    }
    .feature-card{
        min-width: calc(50% - 10px); 
    }
    .big-feature-container, #second-big-feature {
        flex-direction: column-reverse;
    }
    .footer-container{
        flex-direction: column;
        gap: 40px;
        text-align: center;
        align-items: center;

    }
    .link-column{
        align-items: stretch;
    }
    .examples{
        height: 300px;   
    }
    .left-review{
        padding: 30px;
        width: 30vw;
    }
    .right-right-review{
        display: none;
    }
    .shila{
        display: none;
    }
    .left-right-review{
        width: 43vw;
    }   
    .work-left{
        padding: 10px;
    } 
    .prices{
        width: 300px;
        height: 700px;
    }
    .work-num{
        padding: 10px;
        width: 70vw;
    }
    .work-img img{
        height: 40px;
    }
    .work-with{
        padding: 10px;
        margin-top: 20px;
    }
    .work-left{
        padding: 10px;
        width: 70vw; 
        text-align: left;
    }



    .what-img {
        display: none;
    }
    
}
@media screen and (max-width :592px){
    :root{
        --padding-inline-section:10px;
    }
    h1{
        font-size: 2rem;
    }
    
    h2{
        font-size: 1.5rem;
    }
    
    h3{
        font-size: 1.2rem;
    }
    p{
        font-size: 1rem;
    }
    .nav-toggle{
        font-size: 20px;
    }
    .features-card{
        min-width: 100%;
        
    }
    .examples-card{
        min-width: 100%;
    }
    .examples{
        width: 350px;
    }
    .examples-area{
        flex-direction: column;
    }
    .prices{
        width: 300px;
        height: 700px;
    }

    .right-review{
        padding-right: 20px;
       
    }
    .left-review{
        /* width: 100px; */
        padding: 10px;
    }
    .review{
        flex-direction: column;
        
    }
    .right-review-box{
        width: 60vw;
    }
    .work-num{
        padding: 10px;
        width: 70vw;
    }
    .work-img img{
        height: 40px;
    }
    .work-with{
        padding: 10px;
        margin-top: 20px;
    }
    .work-left{
        padding: 10px;
        width: 70vw; 
        text-align: left;
    }
    
    .work-righ{
        padding: 100px;
        width: 70vw; 
        text-align: left;
    }

    
    
    
}
@media screen and (max-width :479px){
    :root{
        --padding-inline-section:10px;
    }
    h1{
        font-size: 2rem;
    }
    
    h2{
        font-size: 1.5rem;
    }
    
    h3{
        font-size: 1.2rem;
    }
    p{
        font-size: 1rem;
    }
    .nav-toggle{
        font-size: 20px;
    }
    .features-card{
        min-width: 100%;
        
    }
    .examples-card{
        min-width: 100%;
    }
   
   
    

 
    .right-review{
        padding-right: 20px;
       
    }
    .left-review{
        /* width: 100px; */
        padding: 10px;
    }
    .review{
        flex-direction: column;
        
    }
    .right-review-box{
        width: 60vw;
    }


    .work-num{
        padding: 10px;
        width: 70vw;
    }
    .work-img img{
        height: 40px;
    }
    .work-with{
        padding: 10px;
        margin-top: 20px;
    }
    .work-left{
        padding: 10px;
        width: 70vw; 
        text-align: left;
    }
    .work-righ{
        padding: 10px;
        width: 70vw; 
        text-align: left;
    }
}