*{
    margin: 0;
    padding: 0;
  
}
body{
     font-family: 'Montserrat';
}

 


.card-body img {
	border-radius: 50%;
	
}





.n a {
  text-decoration: none;
  float: right;
  
  padding: 8px 16px;
}



.n .next {
  background-color: #04AA6D;
  color: white;
}
.overlay li {
	margin-top:20px;
	list-style-type: none;
}



.closebtn{
	display: none;
}

.part{
	 text-align: center;
	 background-color: rgb(222, 221, 218);
	 
}


#fa{
	display: none;
	font-size: 30px;
}





.orde{
    display: grid;
    grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%   ;
    
    /*----------- border: 2px solid black;
     box-sizing: border-box;
    
    ------*/
   
    
   
    

  
}

.orde img{
    width: 190px;
    
 /*------ border: 1px solid black;-----*/
    margin: 10px;
}

.orde h4 span{
    float: right;
}

.orde .pr{
    float: right;
    font-weight: bold;
    color: rgb(140, 124, 1);
   
}

.orde .pr b{
    color: black;

}

.or{
    margin: 10px;

}

.see{
    float: right;
}



.info1{
font-size: 14px;
margin-top: 10px;
    box-sizing: border-box;

}

.or h3{
    margin-top: 20px;
}

.info1 select{

    font-weight: bold;
    margin-top: 25px;
    text-align: center;
 
}




nav{
    flex: 1;
 display: flex;
    



}
nav ul{
   
    list-style-type: none;
}
nav ul li{
    display: inline-block;
    margin-right: 20px;
    
  


}
nav a{
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 20px;
}

/*----
nav a:hover{
border: 2px solid rgb(53, 132, 228);
	
	
}---*/

.stars i{
	color: #e8d82c;
}

.fad{
	font-size: 35px;
	margin-top:20px
}

.cart-btn {
  position: relative;
  display: flex;
 
  justify-content: center;
}

#cart {
  position: relative;
  font-size: 2rem;
  cursor: pointer;
  margin: 1em 4em 0 0;
  display: flex	;
  justify-content: center;
}

.cart-quantity {
  color: white;
  background-color: red;
  padding: .2em .3em;
  position: absolute;
  margin: -.5em -.5em 0 0;
  right: 0;
  border: solid 2px red;
  border-radius: 15px;
 
  font-weight: bolder;
 
}


.cart-modal-overlay {
  position:fixed ;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  z-index: 2;
  transform: translateX(-200%);
  transition: .5s ease-out;
  
}

.cart-modal {
  height: 100vh;
  width: 40%;
  background-color: rgb(50,50,50);
  float: right;
  overflow: scroll;
  overflow-x: hidden;
}

#close-btn {
  font-size: 1.5rem;
  float: right;
  margin: .5em 2em 0 0;
  color: white;
  cursor: pointer;
}

.cart-is-empty {
  color: white;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1em;
  display: none;
  
}

.total {
  text-align: center;
  margin: 2em 0 2em 0;
/*   display: none; */
}

.cart-total {
  color: white;
}

.total-price {
  color: white;
  font-size: 2rem;
  display: block;
}

.purchase-btn {
  font-size: 1rem;
  font-weight: bolder;
  background-color: green;
  color: white;
  padding: 1em 2em;
  border-radius: 10px;
  outline: none;
  border: none;
  cursor: pointer;
  margin: 2em 0 1em 0;
}

.product-rows {
  margin-top: 3em;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  
}
.cart-image {
  width: 10rem;
  margin: 1em;
}

.cart-price {
  color: white;
  font-size: 1.5rem;
  font-weight: bolder;
}

.remove-btn {
  padding: 1em 2em;
  background-color: red;
  color: white;
  outline: none;
  border: none;
  cursor: pointer;
  margin-left: 3rem;
  font-weight: bolder;
  font-size: 1rem;
}

.remove-btn:active {
  transform: translateY(5px);
}



 .search-container button {

   padding: 6px 10px;
   margin-top: 8px;
   
   background: rgb(192, 191, 188);
   font-size: 17px;
   border: none;
   cursor: pointer;
   
 }
 
 .search-container button:hover {
   background: rgb(154, 153, 150);
 }

 .search-container input[type=text] {
   padding: 6px;
   margin-top: 8px;
   font-size: 17px;
   border: none;
   max-width:200px;
   background-color: rgb(153, 193, 241);
   

 }




p{
    color: rgb(0, 0, 0);

  
}
.container{
    max-width: 1500px;
    margin: auto;
    padding-left:20px ;
    padding-right: 20px;
}
.row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}
.col-2{
    flex-basis: 50%;
    min-width: 300px;
}
.col-2 img{
max-width: 100%;
padding: 50px 0;
}
.col-2 h1{
    font-size: 50px;
    line-height: 60px;
    margin: 25px 0;
}
.btn{
    display: inline-block;
    background:#ff523b;
    color: #fff;
    padding: 8px 30px;
    margin: 30px 0;
    border-radius: 30px;
    transition:background 0.5s ;
}

.btn:hover{
    background: #563434;
}
.header{
    background: radial-gradient(#fff,#ffd6d6);
}

.header .row{
   margin-top: 70px; 
}

.categories{
    margin: 70px 0;
}
.col-3{
    flex-basis: 30%;
    min-width: 80px;
    margin-bottom: 30px;
}

.col-3 img{
    width: 100%;
}

.small-container{
   max-width: 1300px;
   margin: auto;
   padding-left: 25px;
   padding-right: 25px;
}
.col-4{
    flex-basis: 25%;
	
	padding: 20px;
 
    margin-bottom: 50px;
    transition: transform 0.5s;
}
.col-4 img{
    width: 100%;
   
}


.col-4 img:hover{
    cursor: pointer;
   
}
.title{
   text-align: center;
   margin: 0 auto 80px;
   position: relative;
   line-height: 60px;
   color: #555;
  
}

.title::after{
    content: '';
    background: #ff523b;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);

}

h4{
    color: #555;
    font-weight: normal;

}
.col-4 p{
    font-size: 1px;

}
.ic .fa{
    color: #ff523b;
}

/*
.col-4:hover{
    transform: translateY(-5px);
   
}

*/
 
/*----------------offer-----------------------------*/
.offer{
    background: radial-gradient(#fff,#ffd6ff);
    margin-top: 80px;
    padding: 30px 0;
}
.col-2 .offer-img{
    padding: 50px;
}
small{
    color: #555;
}

/*--------------------footer------------*/

.footer{
    background: #000;
    color: #8a8a8a;
    font-size: 14px;
    padding: 60px 0 20px;
}

.footer p{
   color: #8a8a8a; 
}
.footer h3{
    color: #fff;
    margin-bottom: 20px;
}

.footer-col-1, .footer-col-2, .footer-col-3, .footer-col-4{
min-width: 250px;
margin-bottom: 2px;
}
.footer-col-1{
    flex-basis: 30%;
}
.footer-col-2{
    flex: 1;
    text-align: center;
}

.footer-col-3 ul, .footer-col-4 ul{
	list-style-type: none;
	color: white;
	font-size: 20px;

	
}

.footer-col-4 ul a{
	
	color: white;
	list-style-type: none;
	text-decoration: none;
	}

.footer-col-4 ul a:hover{
	
	color: rgb(248, 228, 92);

	}


.footer-col-1 h3, .footer-col-3 h3, .footer-col-4 h3{
	font-size: 30px;
	color: white;
	

	
}

.footer-col-1 p{
	
	color: white;
	font-size: 15px;
}

.app-log{
    margin-top: 20px;
}
.app-logo img{
    width:50px ;
}

.menu-icon{
    width: 28px;
    margin-left: 20px;
    display: none;
}

/*-------------all products-------------------*/

.row-2 {
    justify-content: space-between;
    margin: 10px auto 5px;
}

select{
    border: 1px solid #ff523b;
    padding: 2px;
}
select:focus{
    outline:none;
}

.page-btn{
    margin: 0 auto 80px;

}
.page-btn span{
    display: inline-block;
    border: 1px solid #ff523b;
    margin-left:10px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
}

.page-btn span:hover{
    background: #ff523b;
    color:white
}

/*-----------single products name------*/
.single-product{
    margin-top: 80px;

}
.single-product .col-2 img{
    padding: 0;
}
.single-product .col-2{
    padding: 20px;
}
.single-product h4{
    margin: 20px 0;
    font-size: 22px;
    font-weight: bold;
}
.single-product select{
    display: block;
    padding: 5px;
    margin-top: 20px;
}
.single-product input{
    width: 100px;
    height: 40px;
    padding-left: 10px;
    font-size: 20px;
    margin-right: 10px;
    border: 1px solid #ff523b;
}

input:focus{
    outline: none;
}

.small-img-row{
    display: flex;
    justify-content: space-between;

}
.small-img-col{
    flex-basis: 24%;
    cursor: pointer;
}

.add-to-cart{
	
	   
  border-radius: 4px;
  background-color: rgb(255, 163, 72); /* Green */
 color: rgb(36, 31, 49);
  padding: 15px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 20px;
  font-size: 16px;
   cursor: pointer;
	
}

.add-to-cart:hover{
	
	   
transition: 0.7s;
  background-color: rgb(255, 120, 0); /* Green */
 color: white;

	
}


.bt{
	 border-radius: 4px;
  background-color:rgb(53, 132, 228); 
 color: white;
  padding: 15px 20px 15px 20px;
  

  text-decoration: none;
  display: inline-block;
 
  font-size: 20px;
   cursor: pointer;
	
}


.bt:hover{
	background: rgb(246, 211, 45);
		color: #000;
		
		transition: 0.7s;
}
.btn1{
    
  border-radius: 4px;
  background-color:rgb(53, 132, 228); 
 color: white;
  padding: 11px 10px 13px 20px;
  

  text-decoration: none;
  display: inline-block;
  border-radius: 20px;
  font-size: 10px;
   cursor: pointer;

}

.btn1:hover{
		background: rgb(246, 211, 45);
		color: #000;
		
		transition: 0.7s;
}
.btn2{
     
  color: #fff;
  border-radius: 4px;
  text-align: center;
  background-color: #ee2207; 
  border: none;
  color: white;
  padding: 15px 29.5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 11spx; 
}
.btn2:hover {background: #ed4d25;

color: #000;
}

.btn3{
     
    color: #131212;
    border-radius: 4px;
    text-align: center;
    background-color: #e6ee07; /* Green */
  border: none;
 
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px; 
  font-family: 'Times New Roman', Times, serif;
}
.btn3:hover {background: #edb21d;

color: #000;
}

.btn4{
	color: #131212;
    border-radius: 4px;
    text-align: center;
    background-color: #e6ee07; /* Green */
  border: none;
 
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px; 
  font-family: 'Times New Roman', Times, serif;
}
.btn4:hover {background: #edb21d;

color: #000;
}


/*------back--------*/

.logo img{
    align-items: center;
    margin-left:2rem;
}
.addP{
    background-color:aliceblue;
    text-align: center;
    
}
/*
html:not(.browser-android) select {
    background: #0f0;
    border: 1px solid #ff0;
}
*/
.addP{
    background-color: aliceblue;
    text-align: center;
    margin: 3%;
    margin-left: 20%;
    margin-right: 20%;

    
}
input {
  width: 100%;
  padding: 10px 15px;
  margin: 3px 0;
  box-sizing: border-box;
}
input:focus {
  border: 3px solid #555;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

.opt{
  font-size: 15px;
  color:white;
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: rgb(100,100,100); 
}

#IMGS,#Images{
	visibility:hidden;
	
	
}

.row{
    text-align: center;
    
    
}
.ord{
    text-align: left;
  
 color: rgb(0, 0, 0);
background: rgb(222, 221, 218);
}

.col-6 a{
	text-decoration: none;
	list-style-type: none;
	color: black;
}

.ord select{
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: #ecfd03;
    background-color: #2f302f;
}



.small-container1{
   max-width: 1080px;
   margin: auto;
   padding-left: 25px;
   padding-right: 25px;
}
.col-6{
    flex-basis: 15%;
    padding: 10px;
    min-width: 100px;
    margin-bottom: 50px;
    transition: transform 0.5s;
}
.col-6 img{
    width: 100%;
}


h4{
    color: #555;
    font-weight: normal;

}

.ic .fa{
    color: #ff523b;
}

/*----
.col-6:hover{
    transform: translateY(-5px);
    border:1px solid #000 ;
}
---*/

.row1{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
}

.sidebar{
    
    color: rgb(250, 161, 8);
    height: 100%;
}
.card{
    position: relative;
    display: flex;
    flex-direction: column;
}
.row2{
    text-align: center;
    width: 40%;
    margin:auto;
    border: 1px solid black;
    font-size: 25px;
    
 box-sizing: box;
    
}
 .col-md-3, .col-md-9{
   background-color: #f3eded;
   box-sizing: box;

}



/*------------------cart items ------------*/

.cart-page{
    margin: 180px auto;

}
table{
    width: 100%;
    border-collapse: collapse;
    
}

.cart-info{
    display: flex;
    flex-wrap: wrap;
}
th{
    text-align: left;
    padding: 5px;
    color: #fff;
    background: #ff523b;
    font-size: normal;
}
td{
    padding: 10px 5px;
}
td input{
    width: 40px;
    height: 30px;
    padding: 5px;
}
td a{
    color: #ff523b;
    font-size:12px ;
}
/*.cart-info img{
    width: 50%;
}*/
td img{
    width: 80px;
    height: 80px;
    margin-right: 10px;
}

.total-price{
    display: flex;
    justify-content: flex-end;
}
.total-price table{
    border-top: 3px solid #ff523b;
    width: 100%;
    max-width: 400px;
}
td:last-child{
    text-align: right;

}
th:last-child{
    text-align: right;
}

.out{
	


	text-align: center;
	width: 100%;
	margin:auto;
	font-size: 20px;
	border-radius: 23px;
	border: 2px solid white;
}

.out:hover{
	
background-color: rgb(94, 92, 100);
padding: 5px;


	
}
.nam{
	color: yellow;
	font-size: 23px;
}

.btn1 a{
	text-decoration: none;
	color: white;
	font-size: 23px;
	list-style-type: none;
	text-align: center;
	align-items: center;
	margin-right: 20px;

}

.btn1 a:hover{
	text-decoration: none;
	color: rgb(0, 0, 0);
	font-size: 23px;
	list-style-type: none;
	text-align: center;
	align-items: center;
	

}


/* formulaire*/

 .header1{
    background-color: #000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.header1 p{
    text-align: center;
    padding:10px;
    font-size: 20px;
    color:#fff;
    font-family: sans-serif;
}

    
    .container1 {
     width:600px;
    height:100%;
    background-color: #fff;
    margin:auto;
  
    margin-top: 40px;
    border-radius: 5px;
    
    border: 2px solid;
    }
    
    .form-group1 {

      margin-bottom: 20px;
      display: grid;
      margin-left: 30px;
      grid-template-columns: 2fr 4.5fr 5fr; 
      gap: 20px;

    }
    
    .form-group label {
      display:flexbox;
      font-weight: bold;
      margin-bottom: 20px;
    }
    small{
        color: #818181;
    }
    
    .form-group1 input[type="text"]{

    width: 80%;
  
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #dcdada;

    }

    .form-group2{
        margin-bottom: 15px;
        display: grid;
        margin-left: 30px;
        grid-template-columns: 1fr 4fr;
    }
    

    .form-group2 input[type="email"],
    .form-group2 input[type="text"],
    .form-group2 input[type="number"] , input[type="date"]{
        width: 90%;
        margin-bottom: 20px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    background-color: #dcdada;
    }
    
    .form-group3{
        display: grid;
        margin-bottom: 20px;
        margin-left: 30px;
        grid-template-columns: 2.8fr 4fr 7fr;
    }
.form-group3 input[type="tel"]{

         width: 85%;
      padding: 8px;
     
      border: 1px solid #ccc;
      border-radius: 4px;
    background-color: #dcdada;
    }
    .form-group3 input[type="tel1"]{

         width: 50%;
      padding: 8px;
    
      border: 1px solid #ccc;
      border-radius: 4px;
    background-color: #dcdada;
    }
    .form-group2 select {

 
       width: 95%;
      padding: 8px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
    background-color: #dcdada;
    }
    
    .form-group input[type="button"] {
      padding: 10px 30px;
    margin-top: 25px;
      background-color:red;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .form-group input[type="button"]:hover {
      background-color: #f50b0b;
    }


    .checkbox-round {
    width: 1.3em;
  
    height: 1.3em;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ddd;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    
}

.checkbox-round:checked {
    background-color:green;
}

.form-group{
    margin-left: 30px;
}


.tab tr td:hover {background-color: rgb(255, 255, 255);
color: black;}

.tab tr:hover{
    background-color: rgb(192, 191, 188);
    color: white;
    
}

table {
    border-collapse: collapse;
    width: 100%;


  }
  .tab th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  .tab th {
    background-color: rgb(0, 0, 0);
    color: white;
  }
  .tab  td a {
   
   text-decoration: none;
   color: rgb(229, 165, 10);
  }
  .tab{
    overflow-x: auto;
    margin: 20px;
     background-color: aliceblue;
  }
 
  .p ul{
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    
  }

  .p ul a{
    text-decoration: none;
    font-size: 25px;
  }
 
 .p .search-container{
	 display: flex;
	 justify-content: end;
 }
 
 
 /*-------comment ---*/
 
 .comment{
	 
	  border: 1px solid black; 
	   width: 60%;
	     margin: auto;
 }
 
 .comment h2{
	 text-align: center;
 }
 .container2 {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;

 

  
}

.darker {
  border-color: #ccc;
  background-color: #ddd;
}

.container2::after {
  content: "";
  clear: both;
  display: table;
}

.container2 img {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

.container2 img.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
}

.feed{
	text-align: center;

}
.feed img{
	width: 100%;
	max-width: 100px;
	border-radius: unset;
	margin-left: 40%;
	display: inline;
}

.time-right {
  float: right;
  color: #aaa;
}

.time-left {
  float: left;
  color: #999;
}

.fb-form {
	
   width:40%;
   top:50%;left:50%;
   position:relative;
   h2 {
      text-align:center;
      font-size:1.4em;
   }
   transform:translateY(-50%) translateX(-50%);
   input {
      margin:15px 0;
   }
   input[type="submit"] {
      margin-top:0;
   }
   textarea {
      height:100px;
   }
}


@media only screen and (max-width:1200px){
	
	    .row2{
    text-align: center;
    width: 70%;
    margin:auto;
    border: 1px solid black;
    font-size: 25px;
    
 box-sizing: box;}

       .container img{
		width: 40px;
		top: 15px;
	}
    
    .orde{
    display: grid;
    grid-template-columns: 25% 25% 25% 25% ;

   
    

  
}
    
#fa{
	display: flex;
}

   
  
    nav ul li{
        display: block;
        margin-right: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
		text-align:center;
    }
    nav ul li a {
        color: #fff;
    }
    .menu-icon{
        display: block;
        cursor: pointer;
          position: absolute;
  top: 0;
  right: 45px;

    }
    .row{
    text-align:center;
    }
    .col-2,.col-3,.col-4{
    flex-basis:33.3%;
    }
    
    .active{
 
      
       width: 100%;
      /* padding-left: 105px;
       padding-right: 110px;*/
       text-align: center;
       font-size: 20px;
      
}



.title{
   text-align: center;
   margin: 0 auto 80px;
   position: relative;
   line-height: 60px;
   color: #555;
  
}

.title::after{
    content: '';
    background: #ff523b;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);

}








.overlay {
  height:0;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 0;
  right: 45px;
  font-size: 60px;
}


    

 }
 
 

 
    
	
	
	
	







/*------------------media query for menu--------------------------------*/
@media only screen and (max-width:950px){
    nav ul li:hover {
    background-color:#ed4d25;
    }
    
 
   
    nav ul li{
        display: block;
        margin-right: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
		text-align:center;
    }
    nav ul li a {
        color: #fff;
    }
    .menu-icon{
        display: block;
        cursor: pointer;
       
    }
    .row{
    text-align:center;
    }
    .col-2,.col-3,.col-4{
    flex-basis:33.3%;
    }
    
     .logo{
		display: none;
	}
    
    
       .row2{
    text-align: center;
    width: 70%;
    margin:auto;
    border: 1px solid black;
    font-size: 20px;
    
 box-sizing: box;
    
}







}

@media only sceen and (max-width:800px){
	
	 .orde{
    display: grid;
    grid-template-columns:  50% ;
  
}


}



@media only sceen and (max-width:710px){
	
	
       .row2{
    text-align: center;
    width: 90%;
    margin:auto;
    border: 1px solid black;
    font-size: 20px;
    
 box-sizing: box;
    
}


	
	 .orde{
    display: grid;
    grid-template-columns:  50% ;
  
} 


}

@media only sceen and (max-width:650px){
	
	  .p ul{
  
    justify-content: space-between;

  }

  .p ul a{
 
    font-size: 12px;
  }
  



}


/*------------------media query for menu--------------------------------*/
@media only screen and (max-width:580px){

.cart-btn {
  position: relative;
  display: flex;
margin-left: 0px;  


margin-right: -30px;
  justify-content: left;
}


.search-container input[type=text] {
   padding: 7px;
   margin-top: 8px;
   margin-right: 0;
   
   font-size: 17px;
   border: none;
   max-width:500px;
   background-color: rgb(153, 193, 241);
   

 }
 
.container{
    max-width: 100%;
    margin: auto;
    padding-left:0px ;
    padding-right: 0px;
}

 .search-container button {

display: none;
   border: none;
   cursor: pointer;
   
 }
 
  .container1 {
     width:100%;
   
    background-color: #fff;
    margin:auto;
  
    margin-top: 40px;
    border-radius: 5px;
    }
    
    
     
       .row2{
    text-align: center;
    width: 80%;
    margin:auto;
    border: 1px solid black;
    font-size: 20px;
    
 box-sizing: box;
 
 }
    
}



/*------------------media query for menu--------------------------------*/
@media only screen and (max-width:500px){
    nav ul li:hover {
    background-color:#ed4d25;
    }
    
    
    nav ul li{
        display: block;
        margin-right: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
		text-align:center;
    }
    nav ul li a {
        color: #fff;
        
  
    }
    .menu-icon{
        display: block;
        cursor: pointer;
    }
    .row{
    text-align:center;
    }
    .col-2,.col-3,.col-4{
    flex-basis:50%;
    }
    
    .row{
		flex-basis: 50%;
	}
	
	    .active{
 
     
       width: 100%;
      
       text-align: center;
       font-size: 20px;
      
}
	
	
    
    
    
       .row2{
    text-align: center;
    width: 95%;
    margin:auto;
    border: 1px solid black;
    font-size: 20px;
    
 box-sizing: box;
 
 }
 
 

    
}


/*------------------media query for menu--------------------------------*/
@media only screen and (max-width:400px){
   
 .fad{
	font-size: 20px;
	margin-top:20px
}
 

    
}



/*------------------media query for menu--------------------------------*/
@media only screen and (max-width:380px){
    nav ul li:hover {
    background-color:#ed4d25;
    }
    
   
    nav ul li{
        display: block;
        margin-right: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
		text-align:center;
    }
    nav ul li a {
        color: #fff;
        
  
    }
    .menu-icon{
        display: block;
        cursor: pointer;
    }
    .row{
    text-align:center;
    }
    .col-2,.col-3,.col-4{
    flex-basis:50%;
    }
    
    .row{
		flex-basis: 50%;
	}
	
	    .active{
 
  
       width: 100%;
      
       text-align: center;
       font-size: 20px;
      
}
	
	
    
    
    
       .row2{
    text-align: center;
    width: 100%;
 
    border: 1px solid black;
    font-size: 15px;
    
 box-sizing: box;
 
 }
 
 

    
}