/* 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;
}









/* Collection of the day */
.artistHomeContent {
   width: 85%;
   margin: auto;
    margin-top: 80px;
}
.artist {
   margin-left: 30px;
      flex-direction: column;
      justify-content: center;
       }
   
   .artist h1{
      font-size: 50px;
      font-weight: 700;
      justify-content: center;
      align-items: center;    
      color: #494949;
      font-family: 'Courier New', Courier, monospace;
      text-transform: uppercase;
   }
   
   .artist h2{
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 20px;
      font-weight: 700;
      justify-content: center;
      align-items: center;    
      color: #494949;
      font-family: 'Courier New', Courier, monospace;
      /* text-transform: uppercase; */
   }
   
   .artist h3{
      font-size: 20px;
      font-weight: 700;
      justify-content: center;
      align-items: center;    
      color: rgb(73, 73, 73);
      font-family: 'Courier New', Courier, monospace;
      text-transform: uppercase;
   }
   
   .artist p{
      font-size: 15px;
      color: #494949;
      font-family: 'Courier New', Courier, monospace;
   }
 
 
#Artistsection{
    display: flex; 
    flex-wrap: wrap;
    justify-content: center;
  } 
 
 /* .Artistscollectionbox{
      box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
 } */
 
 .Artistscollectionbox img{
    width: 300px;
    height: 300px;
    background-color: #ffffff;
    margin: 10px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    transition: 0.5s;
    position: relative;
 }
 
 
 .ArtistscollectInfo  {
     /* background-color: #FEBE00; */
    display: flex;
    flex-direction: row;
    gap: 10;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
 }
 
 .Artistscollectionbox h1{
    color: rgb(73, 73, 73);
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: 700;
  }
 
 .ArtistscollectInfo  h3,h2,p{
    font-size: 15px;
    color: #494949;
    font-family: 'Courier New', Courier, monospace;
 }
 .ArtistscollectIcon {
    margin-top: 5px;
    display: flex;
    flex-direction: row;
 }
 .ArtistscollectIcon p{
    margin-left: 10px;
 }
 
 .ArtistscollectIcon{
       color: #494949;
 }
 
 .Artistsection button{
    width: '100%';
    font-family: 'Courier New', Courier, monospace;
    display: block;
    margin: auto;
    padding: 10px 20px;
    background-color: #f5f5f5;
    border: none;
    outline: none;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    cursor: pointer;
    transition: 0.5s;
 }
 
 .Artistsection button:hover{
    background-color: #494949;
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
 }