@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');







*{
    margin: 0;
    padding: 0;
}
/* navigation bar  */
.navbar{
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    cursor: pointer;
    background: radial-gradient( rgb(80, 133, 160),rgb(34,34,34));
    z-index: 1;
    font-family: 'Lobster', cursive;
}
/* dropdown********************** */

.dropdn{
    background-color:rgb(59, 103, 126);
    
        top: 75px;
        left: 358px;
        position: absolute;
        display: none;
        
     
}

  
  #product:hover .dropdn {
    display: block;
    
    color: rgb(139, 135, 130);
  }



/* navigation bar items */
.list{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.list li{
    list-style: none;
    padding: 20px;
    
}
.list li a:hover{
    color: black;
   
}
.list li a{
    color: white;
    text-decoration: none;
    margin-left: 3px;
    font-size: 2vw;
}
   /* logo at right side of navigation bar  */
.rightNav{
    width: 50%;
    text-align: right;
    padding-right: 45px;
}

  
.logo img{
    padding-right: 0;
    width:4vw;
    border: 3px solid white;
    border-radius:50px ;
}

   /* body css  */
body{
    
    background:radial-gradient(rgb(248, 242, 244), rgb(144, 172, 187),rgb(34,34,34)); 
}


.itembox{
    display: flex;
    
}
section{
    height: 100%;
    width: 100%;   
}

  /* main heading  */
h1{
    font-size: 5vw;
    font-family: 'Lobster', cursive;
}

.text {
    color: rgb(22, 17, 9);
    text-align: center;
    
}

 /* horizontal scrollbar  */
.scrollbar{
   
    display: flex;
    overflow-x: scroll;

}

  /* horizontal scrollbar image  */
.img{
    
    box-shadow: 10px 15px 15px rgb(17, 2, 2);
    margin: 1em;
    margin-bottom: 2em;
    padding-bottom: 0;
    height: 15em;
    width: auto;
    overflow: hidden;
    /* box-sizing: border-box; */
}

   /* hover effect on images  */
   .img:hover{
       opacity: 0.4;
       transition: 0.5s ease-in;
           
   }
   

      /* footer  */

   .footer{
       display: flex;
       align-items: center;
       justify-content: center;
       height: 5vw;
       color: white;
       background-color: rgb(39, 69, 85);
   }

  

   /* contact form  */

   .signuph{
    background-color: rgb(38, 61, 73);
    color: white;
    
    text-align: center;
    justify-content: center;
    font-family: 'Lobster', cursive;
    
        margin-left: 53px;
        display: inline-flex;
        font-size: xxx-large;
        text-transform: uppercase;
    margin-top: revert;

    

   }

   .contact{
       background-color: rgb(38, 61, 73);
       color: white;
       display: flex;
       text-align: center;
       justify-content: center;
      

   }
   .form{
       margin-top: 3vw;
       font-family: 'Lobster', cursive;
       margin-bottom: 3vw;
       font-size: 1.5vw;
   }

   #fName{
       margin: 1vw;
       
      

   }
   #lName{
    margin: 1vw;

   }

   #email{
    margin: 1vw;

   }
   #password{
    margin: 1vw;

   }

   .btn {
    font-size: 1.5vw;
    margin: 2vw;
    cursor: pointer;
    padding: 2px ;
}

.btn:hover{
    background-color: black;
    color: white;
    padding: 4px;
    border: 2px solid white;
    border-radius: 8px;
}

.btn1{
    position: relative;
    top: 8rem;
    left: -9rem;
    border: 4px solid black;
    border-radius: 23px;
    padding: 10px;
    
}
/* dots */
.new{
    color: rgb(56, 43, 43);
    opacity: 0.4;
}
/* paragraph */
.para{
    font-family: 'Lobster', cursive;
    font-size: 1.5rem;
}


/* hamsburger */
.hamsburger{
    display: none;
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 15px;
    
}
.line{
    width: 33px;
    background-color: white;
    height: 5px;
    margin: 3px 3px;
}
/* 560 */
/* responsiveness */
@media only screen and (max-width:600px) {
    .navbar{
        flex-direction: column;
    }
    .list{
        flex-direction: column;
    }
    .logo img{
        visibility: hidden;
    }
    .hamsburger{
        display: block;
    }
    .navbars{
        height: 45px;

    }
    .navbars a{
        opacity: 0;
    }
    
}