*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body{
    height: 100%;
    width: 100%;
}
#main{
    height: 100%;
    width: 100%;
    background-color: #f8f8f8;
    position: relative;
    padding-top: 0.1px;
}
#nav{
    height: 12vh;
    width: 100%;
    /* background-color: red;  */
    margin-top: 40px;
    border-top: 2px solid black; 
    border-bottom: 2px solid black;
    display:flex;
    align-items: center; 
    justify-content: space-evenly; 
    
}
#nav h1{
    /* background-color: pink;  */
    height: 100%;
    width:20%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monument;
    font-size: 40px;
    letter-spacing: -2;
    position: relative;

}
#nav h1::after{
    content: "©";
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 500;
    font-size: 26px;
    position: absolute;
    top: 5%;
    right: 7%;
}
#nav h1::before{
    content: "model management";
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 500;
    font-size: 14px;
    position: absolute;
    bottom: 19%;
    right: 14%;
    color: #666;
}
#nav h2{
    /* background-color: pink;  */
    height: 100%;
    width:20%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right:2px solid black;
    font-size: 26px;
    font-weight: 400;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}
#nav h2:nth-last-child(2){
    width: 29%;
    /* background-color: red;  */
}
#center{
    height: 90%;
    width: 100%;
    /* background-color: red;  */
    padding: 6vh;
    position: relative;

}
#content{
    height: 100%;
    width: 100%;
    /* background-color: blue;  */
    position: relative;
}
#content video{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#overlay{
    height: 52%;
    width: 100%;
    bottom: 0;
    /* background-color: red;  */
    position: absolute;
    padding: 3vw;
    color: #fff;
    background-color: rgb(0,0,0,0.154);
    backdrop-filter: blur(0.5px);
}
#over1 h1{
    font-family:monument;
    font-size: 3.6vw;
    
}
#over1{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2vw;

}
#over1 h2{
    font-size: 1vw;
    padding: 2vw 2.2vw;
    /* background-color: blue;  */
    border-radius: 50%;
    border:1px solid white;
    border-bottom: 4px solid #fff;
}
#over2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 2px solid white;
    padding:2vw 0;

}
#over2 h4{
    font-size: 1.3vw;
    font-weight: 500;
}
#over2 img{
    height: 3vw;
}
#scroll{
    height: 40vh;
    width: 100%;
    /* background-color: yellow; */
    /* padding: 1vw; */
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;

}
#container{
    height: 100%;
    width: 110%;
    /* background-color:blue; */
    display: inline-block;
    padding: 2vw;
    animation-name: anime;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}
#scroll img{
    /* display: none; */
    height: 95%;
    border-radius: 50%;
    width: 15%;
    margin: 1vw;
    object-fit: cover;
    object-position: 25% 25%;
}
@keyframes anime{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}
#alphabet {
    height:11vh;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 1rem;
    background-color: #00000010;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-style: italic;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}


#alphabet  h5{
    font-size: 2vw;
    text-transform: uppercase;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 2px;
    border-bottom: 2px solid #00000000;
    margin-right:2vw;

}
#alphabet  h6{
    font-size: 1vw;
    text-transform: uppercase;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 2px;
    /* background-color: yellow; */
    padding: 0.6vw 0.8vw;
    border-radius: 50%;
    border:1px solid #00000000;
    cursor:pointer;
    transition:all ease-in 0.3s;

}
#alphabet h6:hover{
    border: 1px solid #000;
}

#page2{
    height: 100%;
    width:100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding: 2vw 5vw;
    

}
#page2-part1{
    height:100%;
    width: 50%;
    background-image:url(https://i.pinimg.com/originals/67/ae/d8/67aed867ad78e2c247ba2dd0a2775222.jpg);
    background-size: cover;
    background-position: top;

    
}
#page2-part2{
    height: 100%;
    width: 45%;
}
#page2-part2 img{
    height: 75%;
    width: 100%;
    object-fit: cover;
    background-size:cover;
}
#page2-text{
    /* background-color: red; */
    display:flex;
    justify-content: space-between;
    padding: 1.2vw;

}
#page2-text h4{
    /* background-color: blue; */
    font-size: 25px;
    font-weight: 500;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing: -1;

}
#page2-text h6{
    /* background-color: pink; */
    font-size: 12px;
    font-weight: 500;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing:-1;

}
#vogue{
    height: 15%;
    width: 100%;
    /* background-color: pink; */
    padding: 0.2vw 5vw;
    font-family: monument;
}
#vogue h2{
    font-size: 1.8vw;
    /* font-weight: 600; */
    letter-spacing: 2px;
}

#page3{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding: 2vw 5vw;
}
#page3-part1 h5{
    /* background-color: red; */
    height:80%;
    width:45%;
    background-size:cover;
    object-fit: cover;
    /* background-color: red; */
}
#page3-part2{
    height:100%;
    width: 55%;
    background-image:url(https://i.pinimg.com/736x/f5/52/4f/f5524fda4ce7de0b98128c209ca13d57.jpg);
    background-size:cover;
    background-position:top;
}

#page3-part1{
    height: 75%;
    width:40%;
    /* background-color: red; */
}
#page3-part1 img{
    height:75%;
    width:100%;
    object-fit: cover;
    background-size: cover;
    /* background-color: blue; */
    

}

#page3-text{
    height: 20%;
    width: 100%;
    /* background-color: red; */
}
#page3-text h5{
    font-size: 17px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 500;
    /* padding: 1vw; */

    
}

#page4{
    /* background-color: red; */
    width: 100%;
    height: 100%;
    
}
#page4 img{
    height:100%;
    width:100%;
    object-fit: cover;
    background-size: cover;
    padding:3vw;
    border:2px solid  black;
}
#page5{
    height: 100%;
    width:100%;
    position: relative;
    padding: 5vw;
}

#page5>h1{
    text-align: center;
    font-size: 3vw;
    /* font-weight:700; */
    font-family:monument;
    margin-bottom: 7vh;

}

.elem{
    height: 15.5vh;
    width: 100%;
    /* background-color: red; */
    border-top: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2vw;
    position:relative;
    transition: all ease 0.7s;


}
.elem img{
    height: 100px;
    width: 100px;
    position: absolute;
    border-radius: 50%;
    left:12%;
    object-fit: cover;
    object-position: top;
    opacity: 0;
    transition: all ease 0.7s;


}
.elem h4{
    font-size: 1.4vw;
    /* background-color: red; */
    text-transform: uppercase;
    font-weight: 500;
    width: 6%;
    
}
.elem .elem-part2{
    width: 45%;
    /* background-color: red; */
}
.elem-part2 h1{
    font-size: 2.5vw;
    font-weight: 500;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.elem-part2 h5{
    font-size: 1vw;
    font-family: monument;
    font-weight: 400;
}

.elem:nth-last-child(1){
    border-bottom:2px solid black;
}
.elem:nth-last-child(1) img{
    left: 40%;
}
.elem:nth-last-child(3) img{
    left: 40%;
}

.elem:hover img{
    opacity: 1;
    left:24%;
}
.elem:hover{
    background-color: #e9e2e2cb;
}
/* //////////////////////////////////////////////// */
.elem .elem-part3{
    width: 45%;
    /* background-color: red; */
}
.elem-part3 h1{
    font-size: 2.5vw;
    font-weight: 500;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.elem-part3 h5{
    font-size: 1vw;
    font-family: monument;
    font-weight: 400;
}

/* ////////////////////////////////////////////////////// */
.elem .elem-part4{
    width: 45%;
    /* background-color: red; */
}
.elem-part4 h1{
    font-size: 2.5vw;
    font-weight: 500;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.elem-part4 h5{
    font-size: 1vw;
    font-family: monument;
    font-weight: 400;
}
/* ///////////////////////////////////////////////////////////// */
.elem .elem-part5{
    width: 45%;
    /* background-color: red; */
}
.elem-part5 h1{
    font-size: 2.5vw;
    font-weight: 500;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    /* background-color:blue; */
}
.elem-part5 h5{
    font-size: 1vw;
    font-family: monument;
    font-weight: 400;
}

#page6{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding:2vw 5vw;
    /* background-color: red; */
}
#page6-part1{
    /* background-color: green; */
    height:100%;
    width: 50%;
    background-image:url(https://images.unsplash.com/photo-1575818184258-1ceb64f40ff8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Z2lybCUyMG1vZGVsfGVufDB8fDB8fHww);
    background-size:cover;
    object-fit: cover;
    object-position: top;
    
}
#page6-part2{
    /* background-color: pink; */
    height: 100%;
    width: 43%;
}
#page6-part2-text h1{
    font-family: monument;
    font-size: 35px;
    font-weight: 400;
    padding-bottom: 20px;
}
#page6-part2-text h4{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 22px;
    font-weight: 400;
    padding-bottom: 25px;
}
#page6-part2-text h6{
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    font-weight: 900;
    /* background-color: aqua; */
}
#page6-part2 img{
    /* background-color: crimson; */
    height: 435px;
    width: 285px;
    object-fit: cover;
    background-size:cover;
    margin-top: 30px;
    /* justify-content: space-between; */

}

#marque{
    /* height: 15vh; */
    margin-top: 20px;
    width: 100%;
    padding: 0.8vw;
    /* background-color: yellow; */
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    border-top: 3px solid black;
    border-bottom: 3px solid black;

}
#marque h1{
    display: inline-block;
    font-size: 3.5vw;
    text-transform: uppercase;
    font-weight: 900;
    -webkit-text-stroke: 2px black;
    color:transparent;
    font-family: monument;
    /* background-color: blue; */
    margin-right: 16px;
    letter-spacing: 2px;
    animation-name: move;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes move {
    form{
        transform: translateX(0);
    }
    to{
        transform: translateX(calc(-100% - 20px));
    }
}

#blog{
    height: 100%;
    width: 100%;
    /* background-color: yellowgreen; */
    display: flex;
    justify-content: space-between;
    padding: 5vw;
    padding-right: 12vw;


}
#blog h1{
    height: 70%;
    width: 15%;
    /* background-color: pink; */
    /* padding: 1.2vw 5vw; */
    font-size: 35px;
    font-weight: 600;
    font-family: monument;
   
}

#end{
    width: 100%;
    height: 80%;
    /* background-color: red; */
    display: flex;
    justify-content: space-between;
    padding-left: 70px;
    padding-right: 70px;
}
#end-text1 h4{
    /* background-color: pink; */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 400;
    font-size: 18px;
    padding-bottom: 30px;
   
    
}
#end-text2 h4{
    /* background-color: pink; */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 400;
    font-size: 18px;
    padding-bottom: 30px;
  
    
    

}
#end-text1 img{
    height: 335px;
    width:410px;
    /* background-color: pink; */
    object-fit: cover;
   
    
}
#end-text2 img{
    height: 335px;
    width:410px;
    /* background-color: pink; */
    object-fit: cover;
   
}
#dior{
    /* height: 100%; */
    margin-top: 20px;
    width: 100%;

    padding: 0.8vw;
    /* background-color: yellow; */
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    border-top: 3px solid black;
    border-bottom: 3px solid black;


}
#dior h1{
    display: inline-block;
    font-size: 3.5vw;
    text-transform: uppercase;
    font-weight: 900;
    -webkit-text-stroke: 2px black;
    color:transparent;
    font-family: monument;
    /* background-color: blue; */
    margin-right: 16px;
    letter-spacing: 1px;
    animation-name: vikash;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes vikash {
    form{
        transform: translateX(0);
    }
    to{
        transform: translateX(calc(-100% - 20px));
    }
}