kids.css

*{
    text-align: center;
    margin: 0px;
    padding: 0px;
    /* background-color: #F3F3F3; */
}
#kids-top-img{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 60px;
    background-color: #F3F3F3;
    padding-bottom: 30px;
    margin-top:5px;
}
#kids-top-img a  img{
    width: 100%;
}
#kids-bot-img{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 60px;
    margin-top: 50px;
    margin-bottom: 60px;
    background-color: #F3F3F3;
    padding: 60px 0;
}
#kids-bot-img img{
    width: 100%;
}
.product{
position: relative;
overflow: hidden;
padding: 40px 0; 
width: 80%;
margin: auto;
background-color: #F3F3F3;
}
.product-category{
padding: 0 10vw;
font-size: 30px;
font-weight: 500;
text-transform: capitalize;

}
.product-container{
padding: 0 10vw;
display: flex;
overflow-x: auto;

scroll-behavior: smooth;
}
.product-container::-webkit-scrollbar{
display: none;
}

.product-card{
flex: 0 0 auto;
width: 33%;
height: 80%;
margin-right:40px;
background-color: white;
margin-bottom: 10px;
justify-content:space-between;
}
.product-image{
position: relative;
width: 100%;

}
a:link{ text-decoration: none;}
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
a h3, a h4, a p{
color: black;
}
.product-image img{
width: 100%;
}
.pre-btn,.nxt-btn{
width: 60px;
border: none;
height: 100%;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 9;

}
.pre-btn{
left: 0;
background-color: #F3F3F3;
}
.nxt-btn{
right: 0;
background-color: #F3F3F3;
}
.pre-btn svg,
.nxt-btn svg{
opacity: 0.3;
} 
.pre-btn:hover svg,
.nxt-btn:hover svg{
opacity:0.8;
} 
.product-image>h4,.product-image>p,.product-image>h3{
padding-bottom: 10px;
}
#kids-middle-1{
    margin-bottom: 50px;
}
#kids-middle-1 button{
    border: none;
    text-decoration: underline;
    background-color: #F3F3F3;
    font-size: 15px;
    margin-bottom: 30px;
    margin: 40px 0;
}
#kids-middle-1 button:hover{
    border: none;
    text-decoration: underline;
    background-color: #F3F3F3;
    font-size: 15px;
    color: rgb(160, 163, 163);
    margin-bottom: 40px;
}
#kids-middle-2{
    margin-bottom: 50px;
}
#kids-middle-2 button{
    border: none;
    text-decoration: underline;
    background-color: #F3F3F3;
    font-size: 15px;
    margin:40px 0;
}
#kids-middle-2 button:hover{
    border: none;
    text-decoration: underline;
    background-color: #F3F3F3;
    font-size: 15px;
    color: rgb(160, 163, 163);
}
#kid-bot-1>div>div>p{
    margin: 30px 0px;
}
#kid-bot-1{
    margin: 100px 0px;
    background-color: #F3F3F3;
    padding: 30px;
}
#kid-bot-1>div{
    display: flex;
    justify-content: space-evenly;
    margin: 40px 0;
}
#kid-bot-1>div>div>p{
    color: grey;
    font-size: 15px;
}
#kid-bot-1>div>div{
    width: 25%;
    background-color: white;

}
#kid-bot-1>div>div a{
   border: none;
   margin: 10px 0;
   font-weight: bolder;
   background-color: white;
   font-size: 16px;
   color: rgb(15, 15, 15);

}
#kid-bot-1>div>div>div{
    margin: 10px 0;
}
#kid-bot-1>div>div>div:last-child{
    margin-top: 40px;
    margin-bottom: 20px;
}
#kid-bot-1>div>div a:hover{
   border: none;
   color: rgb(160, 163, 163);
   margin: 10px 0px;
   font-weight: bolder;
   background-color: white;
   font-size: 15px;
}
.mid-btn{
    margin-top: 60px;
    margin-bottom: 30px;
}
.mid-btn a{
    color: rgb(71, 73, 73);
    text-decoration: underline;
}
#kid-bot-2{
    display: flex;
    justify-content: space-evenly;
}
#kid-bot-2>a:nth-child(2)>div img{
   height: 650px;
   
}
#kid-bot-2>a:nth-child(1) >div img{
   padding-top: 30px;
   height: 600px;
}
#kid-bot-2>a:nth-child(3)>div img{
   padding-top: 30px;
   height: 600px;
}
#kid-bot-2>a>{
    width: 30%;
}
#kid-bot-2>a>div img{
    height: 100%;
    width: 97%;
}
#kid-bot-2>a>div>h2{
    margin: 17px 0;
    color: black;
}
#kid-bot-2>a>div>p{
    color: rgb(111, 114, 114);
    font-weight: lighter;
    margin: 10px 0;
}
#kid-bot-2>a>div button{
    border: none;
    background-color: white;
    text-decoration: underline;
    font-weight:bold;
    margin: 5px 8px;
}
#kid-bot-2>a>div button:hover{
    border: none;
    color: rgb(160, 163, 163);
    background-color: white;
    text-decoration: underline;
    font-weight:bold;
    margin: 5px 8px;
}

/*--------------------navbar-------------*/

#nav{
    height: 160px;
    width: 100%;
    border: 1px solid white;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 
 }
 #nav_1{
     height: 20%;
     width: 100%;
     border: 1px solid white;
     display: flex;
 }
 #nav_2{
     height: 50%;
     width: 100%;
     border: 1px solid white;
    
 }
 #nav_3{
     height: 29%;
     width: 100%;
     border: 1px solid white;
     background-color: black;
     display: flex;
     align-items: center;
 }
 #nav_1_1{
     height: 100%;
     width: 33.3%;
     border: 1px solid white;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
    
 }
 #nav_1_2{
     height: 100%;
     width: 33.3%;
     border: 1px solid white;
 }
 #nav_1_3{
     height: 100%;
     width: 33%;
     border: 1px solid white;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
 }
 #select_btn{
     width: auto;
     border: 1px solid white;
     text-decoration: underline;
     font-size: 13px;
     font-weight: lighter;
 }
 #select_btn:hover{
     text-decoration: none;
     font-weight: bolder;
 }
 #customer_btn{
     font-weight: lighter;
    
     font-size: 13px;
     color: black;
 }
 #customer_btn:hover{
     text-decoration: none;
     font-weight: bolder;
 }
 #nav_1_3 div{
     font-size: 13px;
     font-weight: lighter;
     
 }
 #register_btn:hover{
     text-decoration: none;
     font-weight: bolder;
 }
 #login_btn:hover{
     text-decoration: none;
     font-weight: bolder;
 }
 #nav_1_3 a{
     color: black;
 }
 #nav_1_3 a:hover{
     font-weight: bolder;
 }
 #nav_1_2{
     display: flex;
     align-items: center;
     font-size: 13px;
     font-weight: lighter;
     color: black;
 }
 #nav_2_1{
     height: 100%;
     width: 80%;
     border: 1px solid white;
     margin: auto;
     display: flex;
 }
 #nav_2_1_1{
     height: 100%;
     width: 33%;
     border: 1px solid white;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
 }
 #nav_2_1_2{
     height: 100%;
     width: 33%;
     border: 1px solid white;
     display: flex;
     justify-content: center;
 }
 #nav_2_1_3{
     height: 100%;
     width: 33%;
     border: 1px solid white;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
 }
 #nav_2_1_1 a{
     font-weight: lighter;
     color: black;
     font-size: 13px;
     text-decoration: none;
 }
 #nav_2_1_2 a{
    display: flex;
    justify-content: center;
 }
 #nav_3_1{
     height: 95%;
     width: 80%;
     border: 1px solid black;
     margin: auto;
     display: flex;
     justify-content: space-evenly;
     background-color: black;
     align-items: center;
 }
 #nav_3_1 div{
     font-weight: lighter;
     color: black;
     font-size: 13px;
     text-decoration: none;
    
 }
 #nav_3_1 a{
     color: white;
     text-decoration: none;
    
 }
 #nav_3_1 a:hover{
     color: rgb(117, 113, 113);
 }
 #nav_3_1 div{
     height: auto;
 }
 #nav_2_1_1 a:hover{
     text-decoration: underline;
     font-weight: bolder;
 }
 #new1{
     padding: 15px;
    
 }
 /*--------------------footer-------------*/
 #footer{
     height: 600px;
     width: 100%;
     border: 1px solid #F3F3F3;
 }
 #footer_1{
     height: 75%;
     width: 100%;
     border: 1px solid #F3F3F3;
     background-color: #F3F3F3;
 }
 #footer_2{
     height: 25%;
     width: 100%;
     border: 1px solid #F3F3F3;
     display: flex;
     flex-direction: column;
     text-align: center;
     justify-content: center;
     color: white;
     background-color: black;
     font-size: 12px;
 } 
 #footer_1_1{
     height: 85%;
     width: 100%;
     border: 1px solid #F3F3F3;
 }
 #footer_1_2{
     height: 15%;
     width: 100%;
     border: 1px solid #F3F3F3;
 } 
 #footer_1_1_1{
     height: 90%;
     width: 80%;
     border: 1px solid #F3F3F3;
     margin: auto;
     display: flex;
    margin-top: 15px;
 }
 .foot{
     height: 100%;
     width: 17%;
     border: 1px solid #F3F3F3;
     text-align: center;
   
 }
 #footnew{
     height: 100%;
     width: 32%;
     border: 1px solid #F3F3F3;
      text-align: center;
      background-color: white;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 }
 .foot *{
     margin-top: 10px;
 }
 #footnew *{
    margin-top: 10px;
 }
 #footnew input{
     padding: 8px;
 }
 #footnew button{
     padding: 10px;
     width: 200px;
     background-color: black;
     color: white;
 }
 #footnew button:hover{
     color: rgb(173, 166, 166);
 }
 #footer_1_2{
     display: flex;
 }
 #footer_1_2 div{
    height: 97%;
    width: 50%;
    border: 1px solid #F3F3F3;
 }
 #footer_1_2_1{
     display: flex;
     margin-left: 0px;
     align-items: center;
     justify-content: space-evenly;
 }
 #footer_1_2_2{
     display: flex;
     margin-left: 0px;
     align-items: center;
     justify-content: space-evenly;
 }