/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    /* menu start */
.menu{
    margin-left: 30px;
    margin-right: 30px;
    padding: 10px;
   
}
.menu-content h4{
    font-size: 18px;

}
.menu-btn{
    gap: 15px;
}
.btn a{
    font-size: 16px;
}
/* menu end */
/* banner start */
.banner{
    flex-direction: column-reverse;
    padding: 25px;
}
.b-content{
    margin-bottom: 15px;
}
.b-content h4{
    font-size: 28px;
}
.b-content p{
    margin-bottom: 35px;
    margin-left: 50px;
    margin-right: 50px;
}
.b-content a{
    padding: 20px 20px;
    font-size: 17px;
}
.b-img{
    padding: 35px;
}
/* banner end */
 /* features start */ 
.features{
    flex-direction: column;
    text-align: center;
    gap: 30px;
}
.f-img{
  
}
.f-content{
    width: 100%;
    text-align: center;
}
.f-content h4{
    margin-bottom: 17px;
}
.f-content p{
    margin-bottom: 40px;
}
.f-content a{

}


/* features end */
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* menu start */
.menu{
    margin-left: 30px;
    margin-right: 30px;
}
.menu-content h4{
    font-size: 18px;

}
.menu-btn{
    gap: 15px;
}
.btn a{
    font-size: 16px;
}
/* menu end */
/* banner start */
.banner{
    flex-direction: column-reverse;
    
}
/* banner end */
/* features start */
.features{
    flex-direction: column;
    text-align: center;
    gap: 30px;
}
.f-img{
   grid-template-columns: repeat(1,1fr);
}
.img1{
    
    
}
.f-content{
    width: 100%;
}
.f-content h4{
    margin-bottom: 17px;
}
.f-content p{
    margin-bottom: 40px;
}


/* features end */
}

 /* Medium devices (tablets, 768px and up) */ 
@media (min-width: 768px) and (max-width: 991.98px) {
 /* menu start */
.menu{
    margin-left: 50px;
    margin-right: 50px;
    
    
}
.menu-content h4{
    font-size: 22px;

}
.menu-btn{
    gap: 30px;
} 
/* menu end */
/* banner start */
.banner{
    flex-direction: column-reverse;
    padding: 20px;
}
.b-content{
    margin-bottom: 10px;
}
.b-content h4{
    font-size: 30px;
}
.b-content p{
    margin-bottom: 35px;
    margin-left: 90px;
    margin-right: 90px;
}
.b-content a{
    padding: 15px 15px;
    font-size: 17px;
}
.b-img{
    padding: 35px;
}
/* banner end */
/* features start */
.features{
    flex-direction: column;
    text-align: center;
    gap: 30px;
}
.f-img{
    
}
.img1{
}   
.f-content{
   width: 100%;
}
.f-content h4{
    margin-bottom: 17px;
}
.f-content p{
    margin-bottom: 40px;
}


/* features end */
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* menu start */
.menu{
    margin-left: 150px;
    margin-right: 150px;
    
}
.menu-content h4{
    font-size: 22px;

}
.menu-btn{
    gap: 30px;
}
/* menu end */
/* banner start */
.banner{
    flex-direction: column;
    
}
.b-content{
    margin-bottom: 25px;
}
.b-content h4{
    font-size: 50px;
}
.b-content a{
    padding: 20px 20px;
    font-size: 17px;
}
.b-img{
    padding: 35px;
}
/* banner end */
/* features start */
.features{
    text-align: center;
    gap: 30px;
}
.f-img{
    grid-template-columns: repeat(2,1fr);
  
}
.img1{
    
}
.f-content{
    width: 100%;
}

.f-content p{
    margin-bottom: 40px;
}


/* features end */
}

 /* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width:1399.98px){
/* banner start */
 .banner{
    flex-direction: column;
 }
/* banner end */
}
 /* Extra Extra large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {
 .banner{
    flex-direction: column;
 }
 /* features start */
.features{
    justify-content: center;
}
.All-img{

}
.f-img{
    width: 40%;
    grid-template-columns: repeat(2,1fr);
}
.img1{

}
.f-content{
    width: 60%;
}
/* features end */

}