*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins',sans-serif;
} 

/* Body */
 
nav{

   display: flex;
   width: 100%;
   background-color:   #6B8B8A;
   position: relative;
   justify-content: space-between;
   text-align: center;
   padding: 15px 30px;
}
nav .icon{
   font-size: 35px;
   font-weight: 800;
   color: #f7f6f6;
}
nav ol{
   display: flex;
   list-style: none;
   margin: auto 0 ;
}
nav ol li a{
   color: #f7f6f6;
   font-size: 20px;
   text-decoration: none;
   text-transform: capitalize;
   letter-spacing: 1px;
   padding: 5px 10px; 
}
nav ol li:hover a{
   background: #0c0c0c;
   background-color: #6B8B8A;
   border-radius: 10px;
}
nav .search_box{
   display: flex;
   margin: auto 0;
   height: 35px;
   line-height: 35px;
   border-radius: 10px;
}
nav .search_box input {
   border: none;
   outline: none;
   background: #fffefe;
   height: 100%;
   padding: 0 10px;
   font-size: 20px;
   width: 350px;
   border-radius: 10px 0 0  10px;
}
nav .search_box button{
    background-color:  #6B8B8A;
   font-size: 20px;  
   height: 100%;
   padding: 8px;
   position: relative;
   cursor: pointer;
   border-radius: 0 10px 10px  0;
   z-index: 1;
}
nav .search_box button::after{
   height: 100%;
   width: 0%;
   border-radius: 0 10px 10px  0;
   content: '';
   background:  #fdfdfd;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   transition: 0.3s;
}
nav .search_box button:hover:after{
width: 100%;
}
nav .bar{
   position: relative;
   margin: auto;
   display: none;
}
nav .bar span{
   position: absolute;
   color: #f7f6f6;
   font-size: 35px;
}
 
input[type="checkbox"] {
   opacity: 0;
   position: absolute;
   pointer-events: none;
}
 
@media screen and (max-width:280px) {
   nav {
       display: block;
       padding: 0;
   }
   nav .icon{
       display: inline-block;
       padding: 10px 30px;
   }
   nav .search_box {
       width: 100%;
       display: inline-flex;
       justify-content: center;
       margin-bottom: 15px;
   }
   nav .search_box input{
       width: 90%;
   }
   nav ol{
       display: flex;
       flex-direction: column;
       background: #0a0a0a;
       height: 0;
       visibility: hidden;
       transition: 0.5s;
   }
   nav ol li {
       text-align: center;
   }
   nav ol li a {
       color: #000;
       font-size: 28px;
       padding: 25px;
       display: block;
   }
 
   nav .bar{
   display: block;
   position: absolute;
   top: 20px;
   right: 50px;
   cursor: pointer;
   }
   nav .bar #times{
       display: none;

   }
   #check:checked ~   nav .bar #times{
       display: block;

   }
   #check:checked ~   nav .bar #bars{
       display: none;

   }
   #check:checked ~ nav ol{
       visibility: visible;
       height: 465px;
   }

 
}
@media screen and (max-width:1250px) {
   nav {
       display: block;
       padding: 0;
   }
   nav .icon{
       display: inline-block;
       padding: 10px 30px;
   }
   nav .search_box {
       width: 100%;
       display: inline-flex;
       justify-content: center;
       margin-bottom: 15px;
   }
   nav .search_box input{
       width: 80%;
   }
   nav ol{
       display: flex;
       flex-direction: column;
       background-color: #6B8B8A;
       height: 0;
       visibility: hidden;
       transition: 0.3s;
   }
   nav ol li {
       text-align: center;
   }
   nav ol li a {
       color: #f7f6f6;
       font-size: 28px;
       padding: 25px;
       display: block;
   }
   nav .bar{
   display: block;
   position: absolute;
   top: 20px;
   right: 40px;
   cursor: pointer;
   }
   nav .bar #times{
       display: none;

   }
   #check:checked ~   nav .bar #times{
       display: block;

   }
   #check:checked ~   nav .bar #bars{
       display: none;

   }
   #check:checked ~ nav ol{
       visibility: visible;
       height: 370px;
   }

   .menu{
    position: relative;
    z-index: 1000;
    backdrop-filter: blur(7px);
   }
}
 
footer{
    text-align: center;
    background: #6B8B8A;
    color: #f8f6f6; 
    padding:20px ;
  }