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

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* overflow-x: hidden; */
    font-family: "Libertinus Serif Display", system-ui;
}

.container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* NAVBAR */

.nav{
    /* border: 2px solid black; */
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
#navLeft{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
#icon{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: rgb(167, 165, 165);
}
#brandName{
    padding: 5px;
    font-size: 30px;
    font-weight: 700;
}

#navRight{
   display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px; 
}

#navRight a {
    text-decoration: none;
    font-size: 30px;
    
    color: black;
}
#wish,#cart{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5px;
}
#wi i {
    font-size: 25px;
}
#ci i {
    font-size: 25px;
}

#signin,#signup{
    background-color: rgb(167, 165, 165);
    border-radius: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* IMAGE SECTION */
.imgsection{
    width: 100%;
    height: 40rem;
    /* background-image: url('big.avif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%; */
    position: relative ;

    display: flex;
    justify-content: center;
    

}
.imgsection img{
    width: 100%;
}
.overlay {
    position: absolute;
    background-color: white;
    opacity: 1;
    border-radius: 20px;
    color: black;
    text-decoration: none;
    padding: 10px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.overlay a {
    color: black;
    text-decoration: none;
    font-size: 30px;
    font-weight: 600;
}

.overlay2{
    position: absolute;
    width: 100%;
    opacity: 1;
    margin-top: 300px;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    overflow:visible;
}

.overlay2 .slide1{
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: rgb(145, 145, 145);
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.slide1 a i {
    text-decoration: none;
    color: black;
    font-size: 40px;
}

.shopnow {
    position: absolute;
    opacity: 1;
    margin-top: 350px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#ld {
    font-size: 40px;
    color: white;
    font-family:"Great Vibes", cursive;
}

#j {
    font-size: 60px;
    font-weight: 600;
    color: white;
    font-family: "Dancing Script", cursive;
}

#button {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 60px;
    padding-right: 60px;
    font-size: 50px;
    border-radius: 30px;
    border: none;
    background-color: rgb(131, 87, 5);
    color: black;
}

/* EXPLORE NEW TREND */
.ENT {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px;
}

#txt {
    font-size: 2.8rem;
    font-weight: 800;
    color: rgb(96, 96, 96);
}

#line1{
    border: 2px solid orange;
    width: 54%;
}

.content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 10px;

}

.slide2{
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: rgb(218, 216, 216);
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.slide2 a i {
    text-decoration: none;
    color: black;
    font-size: 40px;
}

.trinkt{
    border: 4px solid rgb(183, 122, 8);
    height: auto;
    width: 18rem;
    border-radius: 20px;
    background-color: rgb(214, 214, 214);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
}
.expimg{
    width: 100%;
    height: 190px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.exppara{
    font-size: 50px;
    font-weight: 700;
    
}

.expbutton {
    font-size: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 15px;
    border: none;
    font-weight: 600;
    background-color: rgb(183, 122, 8);
}

/* EYE-CATCHING OFFERS */

.ECO {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px;
}

#txt1 {
    font-size: 2.8rem;
    font-weight: 800;
    color: rgb(96, 96, 96);
}

#line2{
    border: 2px solid orange;
    width: 53%;
}

.slide3{
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: rgb(145, 145, 145);
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide3 a i {
    text-decoration: none;
    color: black;
    font-size: 40px;
}

#button2{
    position: absolute;
    opacity: 1;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 60px;
    padding-right: 60px;
    font-size: 50px;
    border-radius: 30px;
    border: none;
    background-color: rgb(131, 87, 5);
    color: black;
    margin-top: 30rem;
}

/* WATCH NOW */

#line3{
    border: 2px solid orange;
    width: 68%;
}

/* OUR SERVICES */

#line4{
    border: 2px solid orange;
    width: 65%;
}

.oursevicescontent{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 10px;
    height: 400px;

}

/* .cards{
    border: 2px solid rgb(183, 122, 8);
    height: 21rem;
    width: 18rem;
    border-radius: 20px;
    background-color: rgb(214, 214, 214);
} */

.cards{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
    padding: 20px;
    
}

.card1 , .card2 , 
.card3 , .card4 , 
.card5 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background-color: rgb(241, 241, 241);
    height: 208px;
    width: 176px;
    border-radius: 10px;
} 

.card3{
    border: 2px solid orange;
    scale: 1.5;
    z-index: 1;
}

.card2, .card4 {
    scale: 1.25;
}

/* VISIT US OR GET HOME DELIVERY */

#line5{
    border: 2px solid orange;
    width: 32%;
}
#txtvu {
    font-size: 2.8rem;
    font-weight: 800;
    color: rgb(96, 96, 96);
}

.vuoghd{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 50px;
    padding: 20px;
}

.vuoghdl{
   display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 50px;
}

#vuoghdlu , #vuoghdld {
    background-color: rgb(202, 202, 202);
    height: 290px;
    width: 490px;
}

.vuoghdr{
   display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 50px;
}

#vuoghdru , #vuoghdrd {
    background-color: rgb(202, 202, 202);
    height: 290px;
    width: 490px;
}


/* OUR CATEGORY */
#line6{
    border: 2px solid orange;
    width: 60%;
}

.eyeglass{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    margin-left: 110px;
    margin-right: 110px;
    padding-bottom: 5px;
    border-bottom: 3px solid black;
    margin-bottom: 10px;
    
}

.eyeglass p {
    font-size: 2.8rem;
    font-weight: 800;
    color: rgb(96, 96, 96);
}
.eyeglass a {
  text-decoration: none;
  font-size: 2rem;
  font-weight: 600;
  color: rgb(215, 128, 128);
}

/* #line7 {
    border: 2px solid black;
    width: 85%;
    margin-bottom: 20px;
    align-self: center;
} */

.eyeglasspics{
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.egpics{
    background-color: rgb(202, 202, 202);
    border-radius: 20px;
    height: 250px;
    width: 230px;
}

.imgbox{
    width: 100%;
    height: 300px;
    background-color: rgb(202, 202, 202);
    margin-bottom: 20px;
}

/* CUSTOMER TESTIMONIALS */

#line8{
    border: 2px solid orange;
    width: 45%;
}

#txtct {
    font-size: 2.8rem;
    font-weight: 800;
    color: rgb(96, 96, 96);
}

.CUSTOMERTESTIMONIALS{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 10px;
    height: 400px;
}

.cardsCT{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
    padding: 20px;
    
}

.cardCT1 , .cardCT2 , 
.cardCT3 , .cardCT4 , 
.cardCT5 {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 25px;
    padding: 10px;
    background-color: rgb(241, 241, 241);
    height: auto;
    width: 190px;
    border-radius: 10px;
    border: 2px solid orange;
   
} 

.cardCT3{
    
    scale: 1.5;
    z-index: 1;
}


.cardCT2, .cardCT4 {
    scale: 1.25;
}

.profile {
    display: flex;
    flex-direction: row;
    gap: 10px;

}

.profileimg{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: rgb(117, 117, 117);
}

.name {
    font-size: large;
    font-weight: 800;
    
}

.location {
    font-size: small;
    font-weight: 200;
   
}

.imgboxlast{
    width: 100%;
    height: 500px;
    background-color: rgb(202, 202, 202);
    margin-bottom: 20px;
}

/* FOOTER */
.footer{
    margin-top: 20px;
    width: 100%;
    height: auto;
    background-color: rgb(104, 70, 0);
    display: flex;
    flex-direction: column;
}

.about{
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 60px;
    padding-left: 90px;
    padding-right: 90px;
    overflow-x: visible;
    gap: 10px;
}

.about h2{
    color: white;
   font-size: 40px;
  
}

.about p {
   font-size: 24px;
   color: rgb(150, 149, 149);
 
}

.midftr{
    padding-left: 40px;
    padding-right: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.catageryquicklink{
    display: flex;
    flex-direction: row;
    gap: 30px;
    
}

.ctgri{
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: white;
    font-size: 25px;
}

.ctgri a {
    text-decoration: none;
    color: rgb(150, 149, 149);
}

.ctgri h3 {
    text-underline-offset: 8px;
    text-decoration-thickness: 1px;
}

.quicklink{
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: white;
    font-size: 25px;
}

.quicklink a {
    text-decoration: none;
    color: rgb(150, 149, 149);
}

.quicklink h3 {
     text-underline-offset: 8px;
     text-decoration-thickness: 1px;
}

.subscribe{
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: white;
    font-size: 30px;
    font-weight: 900;
}

#email {
    border-radius: 20px;
    padding: 20px;
    font-size: 20px;
    border: none;
    margin-left: 5px;
    width: 268px;
}

#enter{
    width: fit-content;
    border-radius: 10px;
    padding: 10px;
    font-size: 18px;
    border: none;
    margin-left: 10px;
}

.linef{
    margin-top: 30px;
    border: 1px solid rgb(150, 149, 149);
    width: 95%;
    align-self: center;
}

.footerb{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    padding: 20px;
    
}

.footerbl{
    display: flex;
    flex-direction: row;
    gap: 20px;
    color: white;
    font-size: 20px;
}

.footerbm{
    color: white;
    font-size: 20px;
}

.footerbr{
    display: flex;
    flex-direction: row;
    gap: 20px;
    color: white;
    font-size: 20px;
}

.footerbr a {
    text-decoration: none;
    color: white;
}

/* media query section */

/* NAVBAR */

@media (max-width:800px){
    .nav{
        flex-direction: column;
    }
}

@media (max-width:557px){
   #navRight{
    flex-wrap: wrap;
   }
}

/* IMAGE SECTION */

@media (max-width:569px){
   .overlay{
    flex-wrap: wrap;
   }
}

/* EXPLORE NEW TREND */

@media (max-width:1120px){
   .ENT #line1 {
    display: none;
   }
}

@media (max-width:800px){
   .slide2{
      display: none;
   }
}

@media (max-width:800px){
    .trinkt{
        height: 270px;
    }
.expimg{
    width: 100%;
    height: 145px;
    
}
.exppara{
    font-size: 30px;
    font-weight: 500;
    
}

.expbutton {
    font-size: 20px;
    font-weight: 500;
}

}

@media (max-width: 528px){
    .ENT #txt{
       font-size: 2.3rem;
       font-weight: 800;
    }

    .content{
        gap: 20px;
    }

    .trinkt{
        height: 200px;
        gap: 5px;
        padding-bottom: 5px;
    }
    .expimg{
    width: 100%;
    height: 120px;
    
    }
    .exppara{
    font-size: 20px;
    font-weight: 500;
    
    }

    .expbutton {
    font-size: 15px;
    font-weight: 500;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;

    }


}

@media (max-width: 444px){
     .ENT #txt{
       font-size: 1.8rem;
       font-weight: 800;
     }
}

/* EYE-CATCHING OFFERS */

@media (max-width: 956px){
    #line2{
        display: none;
    }
}

@media (max-width: 552px){
    #txt1{
        font-size: 2.3rem;
    font-weight: 800;
    }
}

@media (max-width: 461px){
    #txt1{
        font-size: 1.8rem;
    font-weight: 800;
    }
}

/* WATCH NOW */
@media (max-width: 1020px){
    #line3{
         display: none;
    }
}

/* OUR SERVICES */

@media (max-width: 975px){
    #line4{
         display: none;
    }
}

@media (max-width:1079px) {
  #osls{
    display: none;
  }
  #osrs{
    display: none;
  }
}

@media (max-width : 890px){
    .card1 , .card2 , 
.card3 , .card4 , 
.card5 {
   
    gap: 10px;
    padding: 15px;
    height: 168px;
    width: 136px;
    border-radius: 10px;
}
}

@media (max-width : 685px){
    /* .card1 , .card2 , 
.card3 , .card4 , 
.card5 {
   
    gap: 5px;
    padding: 10px;
    height: 138px;
    width: 106px;
    border-radius: 10px;
} */
 .card1 ,.card5 {
    display: none;
 }
}

/* VISIT US OR GET HOME DELIVERY */

@media(max-width : 1043px){
    #line5{
       display: none;
    }
}

@media(max-width : 785px){
    #txtvu{
       font-size: 2.2rem;
       font-weight: 800;
    }
}

@media(max-width : 627px){
    #txtvu{
       font-size: 1.9rem;
       font-weight: 800;
    }
}

@media(max-width : 545px){
    #txtvu{
       font-size: 1.6rem;
       font-weight: 800;
    }
}

@media(max-width : 466px){
    #txtvu{
       font-size: 1.3rem;
       font-weight: 800;
    }
}

 @media (max-width:1040px) {
  .vuoghd{
    flex-direction: column;
   }
   
} 

@media(max-width: 760px){
    #vuoghdlu , #vuoghdld {
    
    height: 290px;
    width: 400px;
    }

    #vuoghdru , #vuoghdrd {
    
    height: 290px;
    width: 400px;
    }
}

@media(max-width:640px){
    #vuoghdlu , #vuoghdld {
    
    height: 250px;
    width: 350px;
    }

    #vuoghdru , #vuoghdrd {
    
    height: 250px;
    width: 350px;
    }
}

@media(max-width:518px){
    #vuoghdlu , #vuoghdld {
    
    height: 220px;
    width: 320px;
    }

    #vuoghdru , #vuoghdrd {
    
    height: 220px;
    width: 320px;
    }
}
 
/* OUR CATEGORY */

@media(max-width:946px){
    #line6{
         display: none;
    }
}

@media(max-width:870px){
    #eyeglassslide{
         display: none;
    }
    .egpics{
    
    height: 200px;
    width: 170px;
}
}

@media(max-width:870px){
    #sunglassslide{
         display: none;
    }
}

@media(max-width:760px){
    .egpics{
    height: 170px;
    width: 140px;
}
}

@media(max-width:640px){
    .egpics{
    height: 140px;
    width: 110px;
}
    .imgbox{
        height: 200px;
    }
}



 @media(max-width:1170px){
    .eyeglass{
    margin-left: 90px;
    margin-right: 90px;
    
   }
}

@media(max-width:890px){
    .eyeglass{
    margin-left: 60px;
    margin-right: 60px;
    
   }

} 

@media(max-width: 845px){
    .eyeglass{
    margin-left: 20px;
    margin-right: 20px;
    
   }

}

@media(max-width:518px){
    .egpics{
    height: 120px;
    width: 90px;
}
    .imgbox{
        height: 150px;
    }
    .eyeglass p {
    font-size: 2.3rem;
    font-weight: 800;
    }

   .eyeglass a {
   font-size: 1.7rem;
   font-weight: 600;
   
  }
    
}

@media(max-width:430px){
    .egpics{
    height: 100px;
    width: 70px;
}
   
    .eyeglass p {
    font-size: 2rem;
    font-weight: 800;
    }

   .eyeglass a {
   font-size: 1.3rem;
   font-weight: 600;
   
  }
    
}

/* CUSTOMER TESTIMONIALS */

@media (max-width:1149px) {
    #line8 {
        display: none;
    }
}

@media(max-width: 640px){
    #txtct {
    font-size: 2.3rem;
    font-weight: 800;
    
}
}

@media(max-width: 533px){
    #txtct {
    font-size: 2rem;
    font-weight: 800;
    
}
}

@media(max-width: 469px){
    #txtct {
    font-size: 1.7rem;
    font-weight: 800;
    
}
}

@media(max-width: 405px){
    #txtct {
    font-size: 1.6rem;
    font-weight: 800;
    
}
  .ECO{
    padding: 10px;
  }
}

@media(max-width:900px){
  .imgboxlast{
    width: 100%;
    height: 400px;
    
}
}

@media(max-width:1157px){
    #ctls{
    display: none;
    }
    #ctrs{
    display: none;
    }
}

@media(max-width: 979px){
    .cardCT1 , .cardCT2 , 
.cardCT3 , .cardCT4 , 
.cardCT5 {
    gap: 20px;
    padding: 10px;
    height: auto;
    width: 160px;
    
   } 
}

@media(max-width: 819px){
    .cardCT1 ,  
.cardCT5 {
    display: none;
   } 
}


/* FOOTER */
@media(max-width: 715px){
    .midftr{
       flex-direction: column;
       gap: 20px;
    }
}

@media(max-width: 1000px){
    .footerb{
       flex-wrap: wrap;
    }
}

@media(max-width: 437px){
    .footerbr{
       flex-wrap: wrap;
    }
}