@font-face {
    font-family: neu;
    src: url(./NeueHaasDisplayMediu.ttf);
}
@font-face {
    font-family: neu;
    font-weight: 100;
    src: url(./NeueHaasDisplayLight.ttf);
}
@font-face {
    font-family: neu;
    font-weight: 200;
    src: url(./NeueHaasDisplayRoman.ttf);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:neu;
}
html, body{
    height: 100%;
    width: 100%;
  
}
#main{
    /* background-color: #0000003a; */
    z-index: 10;
    position: relative;
}
#page1{
    min-height: 110vh;
    width: 100%;
    background-color: #EDE8F5;
    position: relative;
    padding: 0 2vw;
}
#logo{
    height: 20vh;

}
nav{
    z-index: 100;
    position: relative;
    padding: 1vw 0vw;
    max-width: 100%;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.nav-part2{
  display: flex;
  align-items: center;
  gap: 1vw;  
}
.nav-part2 h4{
    padding: 10px 20px;
    border: 1px solid #0000005b;
    border-radius: 50px;
    font-weight: 500;
    position: relative;
    transition: all ease 0.4s;
    color: #000000bb;
    font-size: 18px;
    overflow: hidden;
}
.nav-part2 h4::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: black;
    left: 0;
    bottom: -100%;
    border-radius: 50%;
    transition: all ease 0.4s;
}
.nav-part2 h4:hover::after{
    bottom: 0;
    border-radius: 0%;
   
}
nav h3{
    display: none;
}
.nav-part2 h4 a{
    color: #000000bb;
    text-decoration: none;
    z-index: 9;
    position: relative;

}
.nav-part2 h4:hover a{
    color: #fff;
}
#center{
    /* background-color: orange; */
    height: 67vh;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px solid #000000bb;
    padding-bottom: 2.5vw;
}
#left h3{
    width: 25vw;
    font-size: 1.8vw;
    line-height: 2vw;
}
#right h1{
    padding: 5vh 5vh;
    position: static;
    font-size: 10vw;
    line-height: 8vw;
    
    
}
#page1 #video{
    height: 113.8vh;
    width: 100%;
    border-radius: 15px;
    margin-top: 4vw;
    margin-bottom: 4vw;
    position: relative;
}
#hero-shape{
    position: absolute;
    width: 46vw;
    height: 36vw;
    background-color: #FE400F;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    right: 0;
    top: 79vh;
    filter: blur(10px);
}
#hero1{
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #FE400F;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    filter: blur(10px);
}
#hero2{
    height: 30vw;
    width: 30vw;
    background: linear-gradient(#FE400F,#fe370a);
    border-radius: 50%;
    position: absolute;
    filter: blur(15px);
    animation-name: anime2;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
#hero3{
    height: 30vw;
    width: 30vw;
    position: absolute;
    background: linear-gradient(#FE400F,#fe370a);
   border-radius: 50%;
    filter: blur(15px);
    animation-name: anime1;
    animation-duration: 4s;
    animation-timing-function: linear;
   animation-direction: alternate;
    animation-iteration-count: infinite;
}
#hero4{
    height: 30vw;
    width: 30vw;
    position: absolute;
    background: linear-gradient(#FE400F,#fe370a);
   border-radius: 50%;
    filter: blur(15px);
    animation-name: anime3;
    animation-duration: 4s;
    animation-timing-function: linear;
   animation-direction: alternate;
    animation-iteration-count: infinite;
}
@keyframes anime1{
    from{
        transform: translate(5%, -7%) skew(0);
    }
    to{
        transform: translate(-2%, 2%) skew(-20deg);
    }
}
@keyframes anime2{
    from{
        transform: translate(5%, -7%) skew(0);
    }
    to{
        transform: translate(-10%, 5%) skew(-20deg);
    }
}
@keyframes anime3{
    from{
        transform: translate(45%, -10%) skew(0);
    }
    to{
        transform: translate(-10%, 5%) skew(-20deg);
    }
}
#page2{
    min-height: 100vh;
    width: 100%;
    background-color: #EDE8F5;
    padding: 8vw 0;
    position: relative;
}
#moving-text{
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 2vw;
}
#moving-text::-webkit-scrollbar{
    display: none;
}
#moving-text h1{
    font-size: 9vw;
    display: inline-block;
}
.circle{
    height: 70px;
    width: 70px;
    background-color: #fe370a;
    border-radius: 50%;
    display: inline-block;
    margin: 1vw 2vw;
}
.con{
    white-space: nowrap;
    display: inline-block;
    animation-name: moving;
    animation-timing-function: linear;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
@keyframes moving{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}
#page2-bottom{
    height: 80vh;
    width: 100%;
    padding: 4.5vw;
    /* background-color: #EDE8F5; */
    display: flex;
    align-items: center; 
    justify-content: space-between;
    position: relative;
    z-index: 9;
}
#page2-bottom h1{
    font-size: 3vw;
    line-height: 4vw;
    width: 50%;
}
#bottom-part2{
    width: 25%;
}
#bottom-part2 img{
    width: 100%;
    border-radius: 15px;
}
#bottom-part2 p{
    font-weight: 200;
    margin-top: 2vw;
    font-size: 1vw;
}
#page2 #circle2{
    height: 30vw;
    width: 30vw;
    background: linear-gradient(to top,#ff3507, #fe780a);
    position: absolute;
    border-radius: 50%;
    top: 58%;
    left: 25%;
    filter: blur(30px);
    animation-name: circle2;
    animation-direction: alternate;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes circle2{
    from{
        transform: translate(10%, -10%) skew(0);
    }
    to{
        transform: translate(-10%, 10%) skew(-12deg);  
      }
}
#page3{
    min-height: 100vh;
    width: 100%;
    background-color: #EDE8F5;
    padding: 4vw 0;
}
.element{
    height: 150px;
    width: 100%;
    border-bottom: 1px solid #0000003a;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 2vw;
    overflow: hidden;
    justify-content: space-between;
}
#p1{
    z-index: 9;
    font-size: 15px;
    font-weight: 100;
}
.element h2{
    font-size: 3vw;
    position: relative;
    z-index: 9;
}
.element .overlay{
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: orange;
    left: 0;
    top: -100%;
    transition: all ease 0.2s;
}
.element:hover .overlay{
    top: 0;
}
#fixed-images{
    cursor: none;
    box-shadow: 0px 0px 0px 1000px rgba(0, 0, 0, 0.5);
    height: 30vw;
    width: 25vw;
    border-radius: 20px;
    position: fixed;
    z-index: 99;
    left: 50%;
    top: 25%;
    display: none;
    background-size: cover;
    background-position: center;
}
#featured-project{
    padding: 1vh;
    display: flex;
    gap: 5px;
    align-items: center;
}
#red-dot{
    height: 10px;
    width: 10px;
    position: relative;
    background-color: #fe370a;
    border-radius: 50%;
}
#page4{
    height: 110vh;
    width: 100%;
    background-color: #EDE8F5;
    /* padding: 5vw 2vw ; */
}
#Beautiful-sights{
    top: -50%;
    height: 10vh;
    padding: 1vh;
    display: flex;
    gap: 5px;
    align-items: center;

}
#red-dot2{
    height: 10px;
    width: 10px;
    position: relative;
    background-color: #fe370a;
    border-radius: 50%;
}

.swiper {
    width: 100%;
    height: 80vh;
  }

.swiper-slide {
    top: 0vh;
    display: flexbox;
    padding: 30px;
    width: 30%;
    justify-content: center;
    align-items: center;
    border: 1px solid #bbbbbb;
    border-radius: 30px;
    flex-direction: column;
  }
 
 .swiper-slide img{
    border-radius: 30px;
    position: relative;
    object-position: center;
    object-fit: cover;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
 } 
 .swiper-slide img:hover{
    transform: scaleX(112%) scaleY(109%);
    transition: 150ms;
 }
#page5{
    min-height: 120vh;
    width: 100%;
  
}
.slide{
    height: 100%
}

#footer{
    position: fixed;
    height: 120vh;
    width: 100%;
    background-color: #000;
    color: #fff;
    bottom: 0;
    z-index: 9;
    display: flex;
    padding: 1vw 2vw ;
    justify-content: flex-end;
    flex-direction: column;   
}
#circle-returns-0{
    position: absolute;
    width: 100vw;
    height: 25vw;
    background-color: #FE400F;
    /* border-top-left-radius: 100%;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%; */
    top: 0vh;
    filter: blur(30px);
}
#circle-returns-2{
    position: absolute;
    width: 70vw;
    left: -10vw;
    top: 0;
    height: 45vw;
    background-color: #FE400F;
    border-top-left-radius: 10%;
    /* border-bottom-left-radius: 10%; */
    border-bottom-right-radius: 100%;
    top: -15vh;
    filter: blur(30px);
}
#circle-returns-1{
    position: absolute;
    width: 70vw;
    right: -15vw;
    top: 0;
    height: 45vw;
    background-color: #FE400F;
    border-top-left-radius: 10%;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: -10%;
    top: -15vh;
    filter: blur(30px);
    animation-name: circling;
    animation-timing-function: linear;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}




@keyframes circling{
    from{
        transform: translate(10,-10),skew(0deg);
    }
    to{
        transform: translate(-10,10),skew(360deg);
    }
}
#footer h1{
    z-index: 10;
    color: transparent;
    background: linear-gradient(to left,transparent,rgba(255, 255, 255, 0.443),rgba(255, 255, 255, 0.864),rgba(255, 255, 255, 0.931));
    -webkit-background-clip: text;
    -webkit-text-stroke: 2px whitesmoke;
    font-size: 23vw;
}
.footer-design {
    font-weight: 500;
    font-size: 25px;
    z-index: 10;
    height: 25vh;
    width: 100%;
}
.footer-design #p{
    position: relative;
    font-size: 2.5vw;
    text-decoration: none;
    color: black;
    font-weight: 500;
   /* -webkit-text-stroke:0.8px rgba(0, 0, 0, 0.585); */
   /* text-transform: uppercase; */
} 
.footer-design #p::before{
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
color: #EDE8F5;
/* -webkit-text-stroke: 2px #0000008b; */
/* border-right: 2px solid #fe370a; */
overflow: hidden;
animation: animate 4s alternate infinite;
}
@keyframes animate{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}

.footer-design #n{
    position: relative;
    font-size: 4vw;
    text-decoration: none;
    color: black;
    font-weight: 500;
   /* -webkit-text-stroke:0.8px rgba(0, 0, 0, 0.585); */
   /* text-transform: uppercase;*/
}  
.footer-design #n::before{
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    color: #EDE8F5;
    overflow: hidden;
    animation: animate 4s alternate infinite;
}
.footer-design #o{
    position: relative;
    font-size: 2.5vw;
    text-decoration: none;
    color: black;
    font-weight: 500;
} 
.footer-design #o::before{
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    color: #EDE8F5;
    overflow: hidden;
    animation: animate 4s alternate infinite;
}
#footer-bottom{
    border-top: 1px solid #dadada;
    height: 10vh;
    width: 100%;
}
#full-scr{
    height: 100vh;
    width: 100%;
    background-color: #00000074;
    z-index: 99;
    position: fixed;
    top: -100%;
    transition: all ease 0.5s;


}
#full-div{
    position: relative;
    border-bottom: 50%;
    height: 55%;
    width: 100%;
    z-index: 100;
    color: #000;
    background-color: #EDE8F5;
    border-bottom-left-radius: 7%;
    border-bottom-right-radius: 7%;
}
/* #nav-menu{
    background-color: #fe370a;
    font-size: 3vw;
    font-weight: 500;
} */
 #full-div1 {
    gap: 1vh;
    z-index: 101;
    display: inline;
    font-size: 30px;
    color: #000;
 }
#full-div1 #h{
    z-index: 101;
    right: 5%;
    top: 25%;
    position: absolute;
   }
#full-div1 #a{
    z-index: 101;
    right: 5%;
    top: 35%;
    position: absolute;
  
   
}
#full-div1 #c{
    z-index: 101;
    right: 5%;
    top: 45%;
    position: absolute;
    
   
}
@media (max-width:600px){
    #page1{
        min-height: 100vh;
        width: 100vw;
        padding: 0vw 0vw;
    }
    #logo{
    transition: all ease 0.2s;
     height: 25vw;
    }
    nav{
        padding: 6vw 5vw;
        width: 100vw;
        background-color: #EDE8F5;
    }
    
    .nav-part2{
      display: none; 
    }
    nav h3{
        cursor: pointer;
        display: block;
        padding: 3vw 5vw;
        border: 1px solid #ababab;
        border-radius: 50px;
        font-size: 4vw;
        font-weight: 200;
        padding-left: 10vw;
    }
    #center{
        /* background-color: orange; */
        height: 67vh;
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        border-bottom: 1px solid #000000bb;
        padding: 7vw 5vw;
        padding-bottom: 6vw;
        position: relative;
        z-index: 9;
        flex-direction: column-reverse;
    }
    #left h3{
        width: 80%;
        font-size: 5vw;
        line-height: 5vw;
    }
    #right h1{
        top: 0%;
        text-align: right;
        /* padding: 5vh 5vh; */
        position: static;
        font-size: 16vw;
        line-height: 13vw;
        
    }
    #page1 #video{
        width: 92%;
        border-radius: 15px;
        margin-top: 4vw;
        object-fit: cover;
        object-position: center;
        height: 37.5vh;
        margin-bottom: 4vw;
        position: relative;
        margin-left: 4%; ;
    }
    #hero-shape{
        position: absolute;
        width: 76vw;
        height: 56vw;
        background-color: #FE400F;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        right: 0;
        top: 79vh;
        filter: blur(10px);
    }
    #hero1{
        height: 100%;
        width: 100%;
        position: absolute;
        background-color: #FE400F;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        filter: blur(10px);
    }
    #hero2{
        height: 30vw;
        width: 30vw;
        background: linear-gradient(#FE400F,#fe370a);
        border-radius: 50%;
        position: absolute;
        filter: blur(15px);
        animation-name: anime2;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }
    #hero3{
        height: 30vw;
        width: 30vw;
        position: absolute;
        background: linear-gradient(#FE400F,#fe370a);
       border-radius: 50%;
        filter: blur(15px);
        animation-name: anime1;
        animation-duration: 4s;
        animation-timing-function: linear;
       animation-direction: alternate;
        animation-iteration-count: infinite;
    }
    #hero4{
        height: 30vw;
        width: 30vw;
        position: absolute;
        background: linear-gradient(#FE400F,#fe370a);
       border-radius: 50%;
        filter: blur(15px);
        animation-name: anime3;
        animation-duration: 4s;
        animation-timing-function: linear;
       animation-direction: alternate;
        animation-iteration-count: infinite;
    }
    #page2{
        min-height: 100vh;
        width: 100%;
        background-color: #EDE8F5;
        padding: 8vw 0;
        position: relative;
    }
    #moving-text{
        overflow-x: auto;
        white-space: nowrap;
        margin-bottom: 2vw;
    }
    #moving-text::-webkit-scrollbar{
        display: none;
    }
    #moving-text h1{
        font-size: 15vw;
        display: inline-block;
    }
    .circle{
        height: 25px;
        width: 25px;
        background-color: #fe370a;
        border-radius: 50%;
        display: inline-block;
        margin: 2vw 2vw;
    }
    .con{
        white-space: nowrap;
        display: inline-block;
        animation-name: moving;
        animation-timing-function: linear;
        animation-duration: 10s;
        animation-iteration-count: infinite;
    }
    @keyframes moving{
        from{
            transform: translateX(0);
        }
        to{
            transform: translateX(-100%);
        }
    }
    #page2-bottom{
        height: 90vh;
        width: 100%;
        padding: 10vw 4vw;
        /* background-color: #EDE8F5; */
        display: flex;
        align-items: flex-start; 
        justify-content: space-between;
        position: relative;
        z-index: 9;
        flex-direction: column;
    }
    #page2-bottom h1{
        font-size: 6vw;
        line-height: 8vw;
        width: 100%;
    }
    #bottom-part2{
        width: 70%;
    }
    #bottom-part2 img{
        width: 100%;
        border-radius: 10px;
    }
    #bottom-part2 p{
        font-weight: 200;
        margin-top: 2vw;
        font-size: 3vw;
    }
    #page2 #circle2{
        height: 62vw;
        width: 62vw;
        background: linear-gradient(to top,#ff3507, #fe780a);
        position: absolute;
        border-radius: 50%;
        top: 58%;
        left: 25%;
        filter: blur(30px);
        animation-name: circle2;
        animation-direction: alternate;
        animation-duration: 6s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }
    #footer{
        position: fixed;
        height: 100%;
        width: 100%;
    }
    
}
#loader{
    height: 100%;
    width: 100%;
    background-color: #000;
    position: fixed;
    z-index: 999;
    top: 0;
    transition: all ease 0.5s;
    display: flex;

    Align-items: center;
    justify-content: center;
}
#loader h1{
 font-size: 4vw;
 color: transparent;
 background: linear-gradient(to right,orange,orangered);
 -webkit-background-clip: text;
 position: absolute;
 animation-name: load;
 opacity: 0;
 animation-duration: 1s;
 animation-delay: 1s;
 animation-timing-function: linear;
 }
#loader h1:nth-child(2){
    animation-delay: 2s;
}
#loader h1:nth-child(3){
    animation-delay: 3s;
}
@keyframes load{
    0%{opacity: 0;}
    10%{opacity: 1;}
    90%{opacity: 1;}
    100%{opacity: 0;}
}
@media (max-width:600px){ 
    #loader h1{
        font-size: 10vw;
    }
}