*{
   margin: 0;
   color: black;
   font-family: Arial, Helvetica, sans-serif;
}
.main{
   
   
   overflow: hidden;
}
.nav-panel{
   height: 4rem;
   width: calc(100% - 6rem);;
   z-index: 1;
   display:flex;
   align-items: center;
   justify-content: space-between;
   position: fixed;
   background-color: white;
   padding: 0 3rem 0 3rem;
   
   
}
.nav-option{
   
   position: fixed;
     
   left: 50%;
   transform: translate(-50%);
   
}


.nav-logo img{
   height: 3rem;
   width: 5rem;
   object-fit: cover;


}

.nav-buttons{
   
   font-size: 1rem;  ;
   border: none;
   background-color: white;
   font-weight: 500;
   padding: 0.75rem;
}
.nav-buttons:hover{
   border-top: 2px solid white;
   border-bottom: 2px solid black;
   
}
 #search{
   width: 5.25rem;
   height: 1.5rem;
   padding: 0.5rem 3rem;
   background-color: #f5f5f5;
   border: none;
   font-size: 1rem;
   border-radius: 100px;
   margin-right: 0.75rem;
}
.search-icon{
   position: absolute;
   border: none;
   padding: 0.4rem 0.5rem;
   border-radius: 100px;
   width: 2.25rem;
   height: 2.25rem;
   margin-right: 0.75rem;
   background-color: #f5f5f5;
   margin-top: 0.1rem;
}
.search-icon:hover{
   background-color: #e5e5e5;
}

main-section{
   /* display: flex; */
   /* width: calc(100%-3rem); */
   /* flex-wrap: wrap; */
   padding-top: 4rem;
   overflow: hidden;
   
} 
.button-shop{
   border: none;
   padding: 0.4rem 0.5rem;
   border-radius: 100px;
   width: 2.25rem;
   height: 2.25rem;
   margin-right: 0.75rem;
   background-color: white;
   
}

.button-shop-i{
   font-size: 1.3rem;

   /* width: 1.5rem; */
}


.button-shop:hover{
   background-color: #e5e5e5;
   
}


.banner{
   width: 100%;
   object-fit: cover;

}

.content{
   padding-left: 3rem;
   padding-right: 3rem;
}
.banner-top{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
   margin-top: 4rem;
   width: 100%;
   height: 4rem;
   background-color: #f5f5f5;
}
.banner-top-up{
   font-size: 1.1rem;
   font-weight: 500;
}
.banner-top-down{
   font-size: 0.85rem;
   text-decoration: underline;
   font-weight: 500;
}
.infoban{
   margin-top: 4.5rem;
   height: 3.75rem;
}
.infoban p{
   
   font-size: 1.6rem;
   
}
.product-detail{
   
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 2rem 10rem 2rem 10rem;
   line-height: 2rem;
}
.heading{
   
   font-size: 4.5rem;
   font-weight: 500;
   font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   height: 5rem;
   padding: 0;
   
}
.heading-top{
   margin-top: 2rem;
}
.details{
   
   font-size: 1rem;
   text-align: center ;
   line-height: 1.5rem;
}
.banner-button{
   font-size: 1rem;
   background-color: black;
   color:white;
   padding: 0.6rem 1.25rem;
   border: none;
   border-radius: 100px;
   margin: 0.375rem 0.375rem 0 0;
}
.cfirst {
   
   background: url(./assets/card1.png);
   background-size: inherit;
   background-position: center 50%;
}
.cards{
   position: relative;
   margin: 0 0.375rem ;
   width: 100%;
   height: 100%;
   
}
.csecond {
   position: relative;
   background: url(./Assets/card2.png) ;
   background-size: inherit;
   background-position: center 50%;
   
}
.cardsout{
  
   width: 100%;
   height: 38.8rem;
   display: flex;
   background-size: cover;
}
.card-p-1{
   font-size: 1.2rem;
   font-weight: 100;
   
}
.card-p-2{
  
   font-size: 0.9rem;
   font-weight: 500; 
}
.card-position{
   position: absolute;
   top: 100px;
   display: flex;
   flex-direction: column;
}
.card-p-2{
   margin-top: 29.5rem;
}
.set{
   margin-left: 2.45rem;
}
.card-p-1{
   margin-top: 0.45rem;
}
.banner-button{
   margin-top: 1.5rem;
}
.banner-button:hover{
   background-color: #757575;
}
.banner3{
   width: 100%;
   height: 30.75rem;
   display: flex;
   
}
.p1{
   background: url(./assets/poster1.png);
}
.p2{
   background: url(./assets/poster2.png);
}
.p3{
   background: url(./assets/poster3.png);
}

.poster{
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center 50%;
   margin: 0 0.375rem;
}
.banner-button2{
   
   font-size: 1rem;
   background-color: white;
   color:black;
   padding: 0.6rem 1.25rem;
   border: none;
   border-radius: 100px;
   margin-top: 25.7rem;
   margin-left: 2rem;
   
}