@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap');

:root{
   --yellow:#fed330;
   --red:#e74c3c;
   --white:#fff;
   --black:#222;
   --light-color:#777;
   --border:.2rem solid var(--black);
}


.message{
   position: sticky;
   top:0;
   max-width: 1200px;
   margin:0 auto;
   padding:2rem;
   display: flex;
   align-items: center;
   gap:1rem;
   justify-content: space-between;
   background-color: var(--yellow);
}

.message span{
   font-size: 2rem;
   color:var(--black);
}

.message i{
   font-size: 2.5rem;
   color:var(--red);
   cursor: pointer;
}

.message i:hover{
   color:var(--black);
}

.empty{
   border:var(--border);
   padding:1.5rem;
   text-align: center;
   width: 100%;
   font-size: 2rem;
   text-transform: capitalize;
   color:var(--red);
}

.flex-btn{
   display: flex;
   gap:1rem;
}








/*   ------------------------------------------------------------------*/
.category .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   gap:1.5rem;
   align-items: flex-start;
 
   


}

.category .box-container .box{
   
   padding:1px;
   text-align: center;
   box-shadow:3px 2px 3px 2px;
   border-radius:10px;
   background-color:maroon;
}

.category .box-container .box img{
   width: 100%;
   height: 20rem;
   object-fit: contain;
   border-radius:10px;
   
   
}

.container .category .box-container .box h3{
   margin-top:1rem;
   font-size:18px;
   color:white;
   text-transform: capitalize;
}

.category .box-container .box:hover{
   background-color:blue;

}




.category .box-container .box:hover h3{
   color:var(--white);
}
/*   ------------------------------------------------------------------*/







.contact .row{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap:1.5rem;
}

.contact .row .image{
   flex:1 1 40rem;
}

.contact .row .image img{
   width: 100%;
}

.contact .row form{
   border:var(--border);
   flex:1 1 40rem;
   padding:2rem;
   text-align: center;
}

.contact .row form h3{
   font-size: 2.5rem;
   color:var(--black);
   margin-bottom: 1rem;
   text-transform: capitalize;
}

.contact .row form .box{
   margin:.7rem 0;
   font-size: 1.8rem;
   color:var(--black);
   border:var(--border);
   padding:1.4rem;
   width: 100%;
}

.contact .row form textarea{
   height: 15rem;
   resize: none;
}



.form-container form{
   border:var(--border);
   margin:0 auto;
   max-width: 50rem;
   padding:2rem;
   text-align: center;
}

.form-container form h3{
   font-size: 2.5rem;
   color:var(--black);
   text-transform: uppercase;
   margin-bottom: 1rem;
}

.form-container form .box{
   margin:.7rem 0;
   width: 100%;
   border:var(--border);
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
}

.form-container form p{
   margin-top: 1.5rem;
   font-size: 2rem;
   color:var(--light-color);
}

.form-container form p a{
   color:var(--black);
}

.form-container form p a:hover{
   text-decoration: underline;
}












@media (max-width:991px) {
   
   html{
      font-size: 55%;
   }

}

@media (max-width:768px){

   
}

@media (max-width:450px) {
   
   html{
      font-size: 50%;
   }

   
   .heading h3{
      font-size:1rem;
   }

 
     
   
}