/* Navigation */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

 

a {
   text-decoration: none;
}

li {
   list-style: none;
}

/* NAVBAR STYLING STARTS */
.navbar {
   display: flex;    
   align-items: center;
   justify-content: space-between;
   padding: 0 1em;
   width: 100%;

   /* position: fixed; */
}

headers{
   display: flex;
   align-items: center;
   justify-content: space-between;
    width: 100%;
   background-color: #f5f5f5;
   position: fixed;
   top: 0;
   z-index: 1;
}

.donate {
   background-color: #200303a8;
   padding: 7px;
   border-radius: 3px;
}

.nav-links a {
   color: rgb(0, 0, 0);
}

/* LOGO */
.logoHolder {
   margin: 20px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.logoHolder h1{
   font-size: 24px;
   font-weight: 700;
   justify-content: center;
   align-items: center;    
   color: #494949;
   font-family: 'Courier New', Courier, monospace;
}

.logoHolder img {
   width: 100px;
   height: 50px;
}


/* NAVBAR MENU */
.menu {
   display: flex;
   gap: 1em;
   font-size: 18px;
}

/* .menu li:hover {
   background-color: #00b613;
   transition: all 0.5s ease-in-out;
   transition: 0.3s ease;
   padding: 5px;
} */

.navName:hover{
   background-color: #ffffff;
   transition: all 0.5s ease-in-out;
   transition: 0.3s ease;
   padding: 5px;
}

.menu li {
   padding: 5px 14px;
   font-family: 'Courier New', Courier, monospace;
}

/* DROPDOWN MENU */
.services {
   position: relative;
}

.dropdown {
   background-color: #f5f5f5;
   padding: 1em 0;
   position: absolute;
   /*WITH RESPECT TO PARENT*/
   display: none;
    top: 35px;
    z-index: 1;
}

.dropdown li+li {
   margin-top: 10px;
}

.dropdown li {
   padding: 0.5em 1em;
   width: 15em;
   text-align: center;
}

.dropdown li:hover {
   background-color: #ffffff;
}

.services:hover .dropdown {
   display: block;
}


#navDrop ul{
   float: left;
    width: 9000px;
}

/*RESPONSIVE NAVBAR MENU STARTS*/
/* CHECKBOX HACK */
input[type=checkbox] {
   display: none;
}

/*HAMBURGER MENU*/
.hamburger {
   display: none;
   font-size: 24px;
   color: rgb(0, 0, 0);
   user-select: none;
}

/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
   .menu {
       display: none;
       position: absolute;
       background-color: #FEBE00;
       right: 0;
       left: 0;
       text-align: center;
       padding: 16px 0;
   }

   .menu li:hover {
       display: inline-block;
       background-color: #4c9e9e;
       transition: 0.3s ease;
       color: #fff;
   }

   .menu li+li {
       margin-top: 12px;
   }

   input[type=checkbox]:checked~.menu {
       display: block;
   }

   .hamburger {
       display: block;
   }

   .dropdown {
       left: 50%;
       top: 30px;
       transform: translateX(35%);
   }

   .dropdown li:hover {
       background-color: #4c9e9e;
   }
}

.active1 {
   background-color: #00b613;
   /* padding: 0.5em 0.5em 0.5em; */
   padding: 5px;
}

.Login{             
   border-radius: 10px;
   border: 1px solid #494949;
   padding: 7px;
 }

   .Login:hover{
       background-color: #494949;
       transition: all 0.5s ease-in-out;
       transition: 0.3s ease;
       padding: 5px;
       color: #ffffff;
   }

   .Signup{
       background-color: #494949;
       padding: 7px;
       border-radius: 10px;
    }

   .Signup:hover{
       background-color: #f5f5f5;
       /* background-color: #ff8e8e; */
       transition: all 0.5s ease-in-out;
       transition: 0.3s ease;
       padding: 5px;
   }

   .Signup a:hover{
       color: #494949;
   }

   .Signup a{
       color: #fff;
    }

/* sereach bar */
.searchBar {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-left: 10px;    
}

input{
   width: 700px;
   height: 40px;
   border-radius: 3px;
   border: 1px solid #ffffff;
   padding: 0 10px;
}
 
 



 
 
 /* Filter Generetor */
 
 .ArtCollection1 {   
   width: 85%;
    margin: auto;
    margin-top: 85px;
    display: flex;
    /* background-color: aquamarine; */
     }
.filter1 h1{
      font-size: 20px;
      font-weight: 700;
      justify-content: center;
      align-items: center;    
      color: #494949;
      font-family: 'Courier New', Courier, monospace;
 }

 .filter1 h5{
      font-size: 15px;
      font-weight: 700;
      justify-content: center;
      align-items: center;    
      color: #494949;
      font-family: 'Courier New', Courier, monospace;
 }

.filter2 h2 {
   margin-top: 20px;
}
 
.search {
   width: 100%;
   background-color: #f5f5f5;
   display: flex;
   flex-direction: row;
   color: #ffffff;
   border:  none;
}
 
.artfilter{
   width: 20%;
   height: 500px;
   display: flex;
   flex-direction: column;
   gap: 10;
   padding: 10px;
     
 }

 .KeySearch  {
   margin-top: 10px;
   margin-bottom: 10px;
 }

 input{
   margin-top: 10px;
   margin-bottom: 20px;
 }

.artfilter hr{
   margin-top: 10px;
   width: 100%;
   height: 1px;
   background-color: #494949;
   border: none;
}

.artCollection2 {
   width: '100%';
   height: auto;
    align-items: center;
   justify-content: center;
   /* margin: 50px; */
   margin-left: 10px;
   }
  .filter2 h1{
   margin-top: 30px;
  }

.filter2 h2{
   font-size: 20px;
       font-weight: 700;
      justify-content: center;
      align-items: center;    
      color: rgb(73, 73, 73);
      font-family: 'Courier New', Courier, monospace;
 }
/* Collection of the day */
 
#artsection{
   display: flex; 
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 20px;
} 



.artcollectionbox img{
   width: 300px;
   height: 200px;
   background-color: #ffffff;
   margin: 10px;
   box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
   transition: 0.5s;
   position: relative;
}
.artcollectionbox img:hover{
   transform: scale(1.1);
   box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
}

.artcollectInfo  {
    /* background-color: #FEBE00; */
   display: flex;
   flex-direction: row;
   gap: 10;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
}

.artcollectionbox h1{
   color: rgb(73, 73, 73);
   font-family: 'Courier New', Courier, monospace;
   font-size: 20px;
   font-weight: 700;
 }

.artcollectInfo  h3,h2,p{
   font-size: 15px;
   color: #494949;
   font-family: 'Courier New', Courier, monospace;
}
.artcollectIcon {
   display: flex;
   flex-direction: column;
   gap: 10;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
}

.artcollectIcon{
   align-self: center;
   width: 30px;
    color: #494949;
}

.artsection button{
   font-family: 'Courier New', Courier, monospace;
   display: block;
   margin: 20px auto;
   padding: 10px 20px;
   background-color: #f5f5f5;
   border: none;
   outline: none;
   font-size: 20px;
   font-weight: 600;
   color: #000000;
   cursor: pointer;
   transition: 0.5s;
}

.artsection button:hover{   
   background-color: #494949;
   color: #ffffff;
   transform: scale(1.1);
   box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
}

 
/* Filter Select */
select{
   width: 100%;
   height: 40px;
   border-radius: 4px;
   display: block;
   margin-top: 10px;
   border: 1px solid #f5f5f5;
   padding: 10px;
   margin-bottom: 20px;
}

.selectArtist, .selectType, .selectTime option{
   font-family: 'Courier New', Courier, monospace;
   font-size: 17px;
   color: #494949;
   cursor: pointer;
   transition: 0.5s;
}

.selectType,.selectArtist  option{
   font-family: 'Courier New', Courier, monospace;
   font-size: 17px;
   color: #494949;
   cursor: pointer;
   transition: 0.5s;
}

.selectSize option{
   font-family: 'Courier New', Courier, monospace;
   font-size: 17px;
   color: #494949;
   cursor: pointer;
   transition: 0.5s;
}

.selectTime, .selectSize option, .selectSize{
   font-family: 'Courier New', Courier, monospace;
   font-size: 17px;
   color: #494949;
   cursor: pointer;
   transition: 0.5s; 
}

 .selectStyle option, .selectStyle{
   font-family: 'Courier New', Courier, monospace;
   font-size: 17px;
   color: #494949;
   cursor: pointer;
   transition: 0.5s;
 }

 .artFoot {
   margin-top: 300px;
   z-index: 1;
   background-color: aqua;
 }

 
/* Footer */
.section-products {
   width: 85%;
    margin: auto;
    margin-top: 50px;
}
.HomeEach-fade {
   margin-top: 50px;
}
.HomeEach-fade img{
   background-image: none;
   height: 700px;
}

.col  p,a{
   color: #494949;
    font-family: 'Courier New', Courier, monospace;
   margin-top: 5px;
}

.col h4{
   font-size: 20px;
    color: #494949;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;

 }
.social-media h4{
   color: #494949;
    font-family: 'Courier New', Courier, monospace;
   margin-top: 20px;
}


.social-icon{
   margin-top: 5px;
   display: flex;
}

.social-icon i{
   padding: 5px;
}

.social-icon  .fa-facebook-f:hover{
   color: #4267B2;
   transition: 0.3s;
}

.social-icon  .fa-twitter:hover{
  color: #1DA1F2;
  transition: 0.3s;
}

.social-icon  .fa-instagram:hover{
  color: #C13584;
  transition: 0.3s;
}

.social-icon  .fa-youtube:hover{
  color: #FF0000;
  transition: 0.3s;
}

.pro{
  background-color: #006e3b10;
}



#container3{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.row img{
      width: 150px;
      height: 50px;
      margin-right: 10px;
}

footer{
    background-color: #f5f5f5;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

footer .col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}

footer .col a{
  color: #1b1b1b;
  margin-top: 10px;
}

 .copyright{
    padding: 20px;
}

.social-icon i:hover{
   color: #494949;
   transition: 0.3s;
}