* {
 margin: 0;
 padding: 0;
box-sizing: border-box;
}
html,body {
height:100%;
width:100%;
background-color: #C4BCB3;

}
.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    padding: 30px 40px;
    margin-bottom: 30px;
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
  }


.page1{
    height: 100vh;
    width: 100%;
    background-color: #C5BDB4;
    position: relative;
    
}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
    border-bottom: 1px solid black;
    height: 70px;
    width: 100%;
    
}
.nav img{
    height: 30px;
}
.nav h5{
    font-size: 10px;
}
.nav i{
    font-size: 20px;
    width: 200;
}
.elems{
    height: 300px;
    width: 100%;
    /* background-color: rgb(47, 226, 59); */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 30px 30px;
}
.elems .elem1{
    height: 100%;
    width: 30%;
    /* background-color: rebeccapurple; */
    border-right: 1px solid black;
    align-items: center;
}
.elem1 h2{
    font-size: 30px;
    font-family: canopee;
    margin-top: 10px;
    padding: 10px 10px;
}

.elem1 h2 span{
    background-color: red;
    color: black; 
    margin-left: 7px;
    border-radius: 4px;
    color: white;
}
.elem1 p{
    font-family: Editorial New Light;
    font-size: 20px;

    

}
.elems .elem2{
    height: 100%;
    width: 30%;
    /* background-color: rgb(225, 47, 115); */
    border-right: 1px solid black;
    padding: 0 30px;
    text-align: center;
    
} 
.elem2 h3{
    font-size: 30px;
    font-family: canopee;
    letter-spacing: 2px;
}
.elem2 h4{
    font-size: 25px;
    font-family: Editorial New Light;
    font-weight: 200;
    letter-spacing: 3px;
    margin-top: 5px;
    width: 250px;
    margin-top: 20px;
    text-align: center;
    margin-left: 32px;
}
.elem2 p{
    margin-top: 50px;
    font-family: Editorial New Light;
    font-size: 20px;
}


.elems .elem3{
    height: 100%;
    width: 30%;
    /* background-color: rgb(156, 212, 33); */
  

}
.elem3 h2{
    font-family: canopee;
    padding: 10px 10px;
    font-size: 30px;
    

}
.elem3 p{
    margin-top: 5px;
    font-family: Editorial New Light;
    font-size: 20px;
}
.elem3 span{
    background-color: red;
    border-radius: 5px;
    color: white;
}
.elem1 img {
    height: 100%;
    width: 100%;
    object-fit: fill;
    object-position: center;

}
.elems .elem-img{
height: 50%;
width: 100%;


}
.elem-img img {
    height: 100%;
    width: 90%;
    object-fit: fill;
    object-position: center;
    transition: all linear 1.2s;

}
.elem-img:hover img{
    scale:1.2;
}
.page1 h1{
    font-size: 320px;
    padding: 2px 25px;
    text-transform: uppercase;
    font-family: canopee;
    text-align: center;
    letter-spacing: 2px;
    background-color: rgb(37, 28, 28);
    color: rgb(137, 134, 134);
}
.page2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 140vh;
    background-color: #C4BCB3;
    margin-top: -10px;
    padding: 200px 10px;
}


.box1{
    height: 140vh;
    width: 37%;
    
    
}
.box1 h1{
    font-size: 100px ;
    font-family: canopee;
    text-align: center;
    font-weight: 200;
    margin-bottom: ;

}
.box1 h1 span{
    font-size: 180px;
    
    
}
.box1 img{
    height: 420px;
    width: 95%;
    padding: 10px 40px;
}
.box1 .text {
    display: flex;
    justify-content: flex-start;
}
.text h2{
    font-size: 60px;
    font-family: canopee;
background-color:rgb(55, 50, 50) ;
    color:#C4BCB3;
    padding: 0 10px;
    height: 80px; 
    font-style: italic;
    
}
.text p{
    font-size: 17px;

    font-family: Editorial New Light;
    
}
.box2{
    height: 140vh;
    width: 62%;
    border-left: 1px solid black;
    padding: 20px 0;
    position: relative;

}

.box2 img {
    height: 440px;
    margin-left: 14px;
}
.box2 h1{
    padding: 10px 10px;
    font-size:100px;
    font-family: canopee;
    text-align: center;
    text-decoration:line-through;
    text: decoration weight 200;
    margin-top: 50px;
    line-height: 11vw;
    
}
.page3{
    
    height: 590px;
    width: 100%;
    display: flex;align-self: center;
    justify-content: space-between;
    padding: 60px 20px;
}
.page3 h1{
    font-size: 340px;
    text-transform: uppercase;
    font-family: canopee;
    margin-left: 20px;
    padding: 10px 20px;
    letter-spacing: 2px;
    background-color: rgb(37, 28, 28);
    color: rgb(137, 134, 134);
}
.page3 img{
    height: 350px;
}
.main2{
    height: 400px;
    width: 100%;
    background-color: #C4BCB3;
}
.section{
    position: relative;
    height: 160vh;
    width: 100%;
    background-color: #C4BCB3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.section1{
    height: 100vh;
    width: 100%;
    border-top: 2px solid black;
    padding: 30px 0;
    position: relative;
    margin-top: -30%;
}
.section2{
    height: 300px;
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
}
.section2 .left{
    width: 40%;
}
.section2 .left>h1{
    font-size: 40px;
    margin-top: -40px;
    font-family: Editorial New Light;
    text-transform: uppercase;

}
.section2 .left h2{
    margin-top: 10px;
    font-family: Editorial New Light;
font-weight: 100;
font-size: 30px;
letter-spacing: 2px;
margin-bottom: 30px;

}
.section2 .left p{
    font-family: Editorial New Light;


}
.section2 .right{
    width: 50%;
    border-left: 2px solid black;
    padding: 0 50px;   
}
.section2 .right img{
    height: 120px;
    margin-top: 30px;

}
.section2 .right>h1{
    font-family: canopee;
     font-weight: 200;  
     margin-top: 10px;
     margin-bottom: 10px;
     font-size: 40px;
}
.section2 .right p{
    font-family: Editorial New Light;
font-size: 20px;
}
.section4{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
}
.section4 img{
    height: 560px;
    margin-top: 90px;
}
.section4 .para{
    margin-top: 50px;
}
.section4 .text{
    width: 37%;
    border-left: 2px solid black;
    padding: 0 20px;
      
}
.text h1{
    font-size: 80px;
    font-family: canopee;
    margin-top: -70%;

}
.text p{
    font-size: 30px;

}
.text h3{
    font-size: 150px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: canopee;
}
.text p span{
    height: 100vh;
    font-size: 70px;
    background-color: rgb(51, 48, 48);
    color: white;
    margin-right: 10px;
    padding: 10px 4px;
    font-family: Editorial New Light;
    
}
.navigation{
      height: 180px;
      width: 100%;
      background-color: #C4BCB3;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 90px;    
    position: relative;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    margin-top: -130px;
    padding: 20px 0;

}

.navigation h1{
    
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    font-family: Editorial New Light;    
}

.navigation h2{
    font-size: 80px;
    text-transform: uppercase;
    font-family: canopee;

}
.navigation span{
    font-size: 120px;
    font-weight: 200;
}
.photo{
    height: 190vh;
    width: 100%;
    padding: 30px 20px;
    background-color: #C4BCB3;
    
}
.photo1{
    height: 400px;
    width: 45%;
    display: flex;
    align-items: center;
    z-index: 99;

    justify-content: space-between;
}
.photo img{
    height: 350px;
    width: 280px;
    z-index: 99;

}
.photo h1{
    font-family: canopee;
    font-size: 390px;
    margin-left: 30px;
    z-index: 99;


}
.photo2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9999999;
    

}
.photo2 img{
    height: 680px;
    position: relative;
    margin-top: -32%;
    width: 600px;
    z-index: 9999999;

    
}
.photo2 h2{
    font-size: 400px;
    font-family: canopee;

}
.photo3{
    height: 300px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
.photo3 img{
    height: 300px;
    width: 400px;
}
.photo3 h2{
    font-size: 370px;
    margin-left: 10px; 
    text-align: center;
    text-transform: uppercase;
    font-family: canopee;
}
.photo4{
    height: 400px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.photo4>h1{
    font-size: 340px;
    background-color: black;
    color: #C4BCB3;
    padding: 10px 10px;
}
.photo4 .graph{
    width: 32%;
    
}
.graph p{
    margin-bottom: 20px;
    font-size: 20px;
    font-family: Editorial New Light;
}
.graph h2{
    font-size: 100px;
    font-family: canopee;


}
.infinity{
    height: 120px;
    width: 100%;
    background-color: rebeccapurple;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
.infinity h3{
    font-size: 50px;
    word-wrap: nowrap;
    display: inline-block;

}
.swaap{
    width: 100%;
    background-color: #C4BCB3;
    

}
.swip{ 
    padding: 10px 20px;  
    border-bottom:2px solid black;
    border-top:2px solid black;
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
    margin-top: 30px;

}
.swip h4{
    font-size: 70px;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: white;
    white-space:nowrap;
    gap: 10px;
    animation: neen 3s linear infinite;

}


.main .navee{
    height: 100px;
    width: 100%;
    background-color:#C5BDB4;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    justify-content: space-between;
}
.navee h4{
    font-size: 30px;
    text-transform: uppercase;
    font-family: canopee;
}
.navee .navee1{
    display: flex;
    gap: 20px;
}
.swip span{
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color:black;
    color: #C4BCB3;
    padding: 10px 20px;

}
@keyframes neen{
    0%{
        transform: translate(0);

    }
    100%{
        transform: translate(-100%);
    }
}