*
{
margin:0;
padding:0;
}


.first
{
width:100%;
display:grid;
flex-wrap:wrap;
flex-flow:row-wrap;
grid-template-columns:30% 58% 12%;
background:white;
align-items:center;
position:fixed;
z-index:99;
box-shadow:1px 1px red;
}


.first
{
animation-name:slidedown;
animation-duration:2s;
transition:all 1s ease-in-out;
}

@keyframes slidedown
{
0%
	{
		transform:translateY(0);
	}
1%
	{
		transform:translateY(-100%);
	}
}



.navbar ul
{
display:flex;
flex-wrap:wrap;
flex-flow:row-wrap;
list-style:none;

}

.navbar ul li
{
font-size:18px;
padding:0px 15px;
color:black;
letter-spacing:2px;
font-weight:bold;
cursor:pointer;
}

.navbar ul li:hover
{
color:black;
cursor:hand;
}

.menu i
{
padding:0px 15px;
}

.fa-regular
{
font-size:18px;
}

.fa-regular:hover
{
color:red;
}


.logo
{
padding:10px 0px 10px 30px;
}

.banner
{
padding:60px 0px 0px 0px;
animation-name:slideleft;
animation-duration:2s;
transition:all 1s ease-in-out;
}


@keyframes slideleft
{
	0%
	{
		transform:translateY(0);
	}
	1%
	{
		transform:translateY(100%);
	}
	
}














.child1
{
padding:0px 130px;
display:flex;
flex-wrap:wrap;
flex-flow:row-wrap;
justify-content:space-evenly;
z-index:-99;
}



.bag2
{
padding:20px 0px;
background:#EEEEEE;
}

.bag1
{
padding:20px 0px;
background:#EEEEEE;
}
.bag3
{
padding:20px 0px;
background:#EEEEEE;
}
.bag4
{
padding:20px 0px;
background:#EEEEEE;
z-index:-999;
}



.box2
{
position:relative;
overflow:hidden;
height:340px;
cursor:hand;
}




.box2 .girl2 
{  
    background-color:#F0F3FF;   
    padding: 27px;
    display: flex;
    flex-wrap:wrap;
flex-flow:row-wrap;
    position: absolute;
    top: 0;
    opacity: 0;
}


.box2:hover .girl2 
{   
     
    transform:scale(120%);
    transition: all 1s ease-in-out;    
    opacity: 1;
    cursor:hand;
}

.girl2 
{   
     
    transform:scale(100%);
    transition: all 1s ease-in-out;    
    opacity: 1;
    cursor:hand;
}

.box1
{
position:relative;
overflow:hidden;
height:340px;
cursor:hand;
}

.box1 .girl1 
{  
    background-color:#F0F3FF;   
    padding: 27px;
    display: flex;
    flex-wrap:wrap;
flex-flow:row-wrap;
    position: absolute;
    top: 0;
    opacity: 0;
}


.box1:hover .girl1 
{    
    transform:scale(120%);
    transition: all 1s ease-in-out;    
    opacity: 1;
    cursor:hand;
}

.girl1 
{   
     
    transform:scale(100%);
    transition: all 1s ease-in-out;    
    opacity: 1;
    cursor:hand;
}

.box3
{
position:relative;
overflow:hidden;
height:340px;
cursor:hand;
}

.box3 .girl3 
{  
    background-color:#F0F3FF;   
    padding: 27px;
    display: flex;
    flex-wrap:wrap;
flex-flow:row-wrap;
    position: absolute;
    top: 0;
    opacity: 0;
}


.box3:hover .girl3 
{   
    animation-name: nextimage;   
    animation-duration: 0s;   
    animation-fill-mode: both;   
    transform:scale(120%);
    transition: all 1s ease-in-out;    
    opacity: 1;
    cursor:hand;
}

.girl3 
{   
     
    transform:scale(100%);
    transition: all 1s ease-in-out;    
    opacity: 1;
    cursor:hand;
}

.box4
{
position:relative;
overflow:hidden;
height:340px;
}

.box4 .girl4 
{  
    background-color:#F0F3FF;   
    padding: 27px;
    display: flex;
    flex-wrap:wrap;
flex-flow:row-wrap;
    position: absolute;
    top: 0;
    opacity: 0;
}


.box4:hover .girl4 
{   
    animation-name: nextimage;   
    animation-duration: 0s;   
    animation-fill-mode: both;   
    transform:scale(120%);
    transition: all 1s ease-in-out;    
    opacity: 1;
    cursor:hand;
}

.girl4
{   
     
    transform:scale(100%);
    transition: all 1s ease-in-out;    
    opacity: 1;
    cursor:hand;
}















.child2
{
padding:10px 0px 0px 0px;
display:grid;
justify-content:space-between;
flex-wrap:wrap;
flex-flow:row-wrap;
grid-template-columns:33% 33% 33%;
}


.lady1
{
object-fit:cover;
 transform:scale(100%);
    transition: all 0.5s ease-in-out;    
    opacity: 1;

}

.lady2
{
object-fit:cover;
 transform:scale(100%);
    transition: all 0.5s ease-in-out;    
    opacity: 1;

}

.lady3
{
object-fit:cover;
 transform:scale(100%);
    transition: all 0.5s ease-in-out;    
    opacity: 1;

}


.square1:hover .lady1 
{   
    animation-name: image; 
    transform:scale(110%);
    transition: all 0.5s ease-in-out;    
}

.square1
{
overflow:hidden;
}

.square2:hover .lady2 
{   
    animation-name: image;  
    transform:scale(110%);
    transition: all 0.5s ease-in-out;    
}

.square2
{
overflow:hidden;
}

.square3:hover .lady3
{   
    animation-name: image;    
    transform:scale(110%);
    transition: all 0.5s linear;
}

.square3
{
overflow:hidden;
}















.combo
{
width:300px;
height:300px;
background:#EEEEEE;
line-height:300px;
}

.bags
{
width:300px;
height:300px;
background:#EEEEEE;
line-height:300px;
}

.totes
{
width:300px;
height:300px;
background:#EEEEEE;
line-height:300px;
}

.accessories
{
width:300px;
height:300px;
background:#EEEEEE;
line-height:300px;
}

.category
{
cursor:pointer;
display:grid;
flex-wrap:wrap;
flex-flow:row-wrap;
grid-template-columns:25% 25% 25% 25%;
}




.child3 
{
position:relative;
overflow:hidden;
height:302px;
}

.child3 .combo2
{
padding:0px 34px;
display: flex;
flex-wrap:wrap;
flex-flow:row-wrap;
position: relative;
bottom: 300px;
opacity: 0;
}

.child3:hover .combo2
{
animation-name:virat;
animation-duration:2s;
transition: all 1.5s ease-in-out;
opacity:1;
}

@keyframes virat
{
	0%
	{
		transform:translateY(0);
		visibility:visible;
	}
	1%
	{
		transform:translateY(-100%);
	}
}

.child4
{
position:relative;
overflow:hidden;
height:302px;
}

.child4 .totes2
{
padding:0px 34px;
display: flex;
flex-wrap:wrap;
flex-flow:row-wrap;
position: relative;
bottom: 300px;
opacity: 0;
}

.child4:hover .totes2
{
animation-name:virat;
animation-duration:2s;
transition: all 1.5s ease-in-out;
opacity:1;
}

@keyframes virat
{
	0%
	{
		transform:translateY(0);
		visibility:visible;
	}
	1%
	{
		transform:translateY(-100%);
	}
}

.child5
{
position:relative;
overflow:hidden;
height:302px;
}

.child5 .bags2
{
padding:0px 34px;
display: flex;
flex-wrap:wrap;
flex-flow:row-wrap;
position: relative;
bottom: 300px;
opacity: 0;
}

.child5:hover .bags2
{
animation-name:virat;
animation-duration:2s;
transition: all 1.5s ease-in-out;
opacity:1;
}

@keyframes virat
{
	0%
	{
		transform:translateY(0);
		visibility:visible;
	}
	1%
	{
		transform:translateY(-100%);
	}
}

.child6
{
position:relative;
overflow:hidden;
height:302px;
}

.child6 .accessories2
{
padding:0px 34px;
display: flex;
flex-wrap:wrap;
flex-flow:row-wrap;
position: relative;
bottom: 300px;
opacity: 0;
}

.child6:hover .accessories2
{
animation-name:virat;
animation-duration:2s;
transition: all 1.5s ease-in-out;
opacity:1;
}

@keyframes virat
{
	0%
	{
		transform:translateY(0);
		visibility:visible;
	}
	1%
	{
		transform:translateY(-100%);
	}
}


.accessories2
{
animation-name:kohli;
animation-duration:2s;
transition: all 1.5s ease-in-out;
opacity:1;
}

@keyframes kohli
{
	0%
	{
		transform:translateY(-100);
		visibility:visible;
	}
	1%
	{
		transform:translateY(0%);
	}
}

.bags2
{
animation-name:kohli;
animation-duration:2s;
transition: all 1.5s ease-in-out;
opacity:1;
}

@keyframes kohli
{
	0%
	{
		transform:translateY(-100);
		visibility:visible;
	}
	1%
	{
		transform:translateY(0%);
	}
}

.totes2
{
animation-name:kohli;
animation-duration:2s;
transition: all 1.5s ease-in-out;
opacity:1;
}

@keyframes kohli
{
	0%
	{
		transform:translateY(-100);
		visibility:visible;
	}
	1%
	{
		transform:translateY(0%);
	}
}

.combo2
{
animation-name:kohli;
animation-duration:2s;
transition: all 1.5s ease-in-out;
opacity:1;
}

@keyframes kohli
{
	0%
	{
		transform:translateY(-100);
		visibility:visible;
	}
	1%
	{
		transform:translateY(0%);
	}
}


.child7
{
	display:grid;
	grid-template-columns:19.5% 19.5% 19.5% 19.5% 19.5%;
	justify-content:space-evenly;
}

.child7
{
cursor:pointer;
}






.child hr
{
color:red;
width:40px;
border:2px solid red;
}

.child:hover hr
{
color:red;
width:100px;
}

.text hr
{
color:red;
width:40px;
border:2px solid red;
}

.text:hover hr
{
color:red;
width:150px;
}

.text1 hr
{
color:red;
width:80px;
border:2px solid red;
}

.text1:hover hr
{
color:red;
width:250px;
}

li hr
{
opacity:0;
}

li:hover hr
{
opacity:1;
color:#FF0000;
}



.text2 hr
{
color:red;
width:40px;
border:2px solid red;
}

.text2:hover hr
{
color:red;
width:230px;
}








.child8
{
background:#8CB9BD;
width:100%;
height:100px;
display:grid;
grid-template-columns:auto auto auto;
justify-content:space-around;
place-items:center;
color:white;
}


.child9
{
padding:20px 0px 0px 0px;
align-items:baseline;
background:black;
width:100%;
height:220px;
display:grid;
grid-template-columns:auto auto auto;
justify-content:space-around;

color:white;

}

.fa-brands
{
letter-spacing:30px;
}

.fa-brands:hover
{
color:#8CB9BD;
}

.text6
{
line-height:35px;
}

.text7
{
line-height:35px;
}

.text8
{
line-height:35px;
}


.button
{
width:350px;
padding:15px;
border-radius:30px;
background:none;
color:white;
border:1px solid white;
font-size:15px;
}

.button1
{
width:150px;
padding:13px;
border-radius:30px;
background:#373A40;
color:white;
border:none;
font-size:18px;
}

.button1:hover
{
background:#8CB9BD;
color:black;
}