body{
    overflow-x: hidden;
}
.main-nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding:20px 0;
    font-size: 13px;
}

 .main-nav .logo img{
    height: 5em;
 }
.main-nav ul{display: flex;}
.main-nav ul li{margin: 0 1em;}
.main-nav ul li a:hover{border-bottom:  2px solid  var(--primary-color);
}
.main-nav ul li a.active{
    border-bottom:  2px solid  var(--primary-color);
}
.main-nav ul li a{
    color: #262626;
    padding-bottom: 2px;
}
.main-nav ul.main-menu{
    flex: 1;
    margin-left: 1em;   
}
.menu-btn{
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 2;
    display: none;   
}


@media(max-width:700px){
.menu-btn{ display: block;}
.menu-btn:hover{opacity: 0.5;}
.main-nav ul.right-menu{margin-right: 5em;}
.main-nav ul.main-menu{
        display: block;
        position: fixed;
        top:0;
        left: 0;
        background:var(--primary-color);
        width: 50%;
        height: 100vh;
        border-right: var(--gray) 1px solid;
        opacity: 0.9;
        padding:3em 1em;
        transform: translateX(-500px);
        z-index: 1;
        transition:transform 0.5s ease-in-out;        
    }
    .main-nav ul.main-menu li{
    padding: 10px;
    border-bottom: var(--gray) solid 1px;
    font-size: 14px;
    }
    .main-nav ul.main-menu li a{color: #fff;}
    .main-nav ul.main-menu li:last-child{border-bottom: 0;}
    .main-nav ul.main-menu.show{transform: translateX(-20px);}

}

@media(max-width:400px){
    .main-nav .logo h1{ font-size: 1.5rem;}
}

@media(max-width:220px){
    .main-nav .logo {
        display: none;
     }
     .main-nav ul.main-menu{
        width:90%;

     }
     
}


/*===============| Hero |==============*/
.hero{
    position: relative;
    background-color: var(--secondary-color);
    
}
.hero .hero-content .hero-info {
    position: relative;
top:5em;
}
.hero .hero-content .hero-info span {
 color: var(--primary-color);
}
 
.hero .hero-content{position: relative;}
.hero .hero-content .hero-info .hero-form .form-control input[type='number']{
 width: 100%;
 border-radius: 15em;
 border:.2em var(--primary-color) solid;
 padding: .8em 0;
 position: relative;
}
.hero .hero-content .hero-info .hero-form .hero-btn input[type='submit']{
    margin-top: 1em;
    width: 100%;
    text-align: center;
}
 .hero-image img{
    position: relative;
    top: 10em;
    box-shadow: 10px 10px 5px var(--secondary-color);
    
 }
 .hero-form .btn-primary{
    width:100%;
 }

 .features{
    position: relative;
    top: 10em;
 }
 .features .features-content .features-card p{
     margin-top: 2em;
 }

 .features .features-content .features-card .card{
    background-color: var(--secondary-color);
    padding: 1em;
    border-radius: 1em;
 }
      
 
footer
{
    margin-top: 10em;
    background:var(--gray);
    padding:10em 0;
    color:#fff;
}

footer .footer-content .quick_links ul li a{
   color:#fff;

}
/*===============| Media Query |==============*/
@media only screen and (min-width:400px){
    .hero .hero-content .hero-info .hero-slide-content{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: .5em;
    }
    .hero .hero-content .hero-info .hero-form{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: .5em;
    }
    .hero .hero-content .hero-info .hero-form .hero-btn input[type='submit']{margin-top:0;}
}

@media only screen and (min-width:700px){
 nav{display:block;}
 .hero   {
    position: relative;
    top:5em;
}
 .hero-image img{
    position: relative;
    top: -5em;
 }
 
 .hero .hero-content  {
        margin-top: 2em;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 5em;
}
.hero .hero-content .hero-info{text-align: left;}
.hero .hero-content .hero-image{margin-top: -3em;}
.features{
    margin-top: -5em;
}
.features .features-content .features-card{
  
    display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: .8em; 
 }

 .contact-us .contact-us-content{
    display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: .8em; 
 }
 .contact-us .contact-us-content .form{
    position: relative;
    top:5em;
 }

 
footer .footer-content{
    display:grid;
    grid-template-columns:40% 20% 30%;
    gap:2em;
}
}
@media only screen and (min-width:700px){
     
}