* {
     Margin: 0;
     Padding: 0;
     Box-sizing: border-box;
     font-family: Verdana, Geneva, Tahoma, sans-serif;
 }

 html,
 body {
     Width: 100%;
     Height: 100%;
 }

 /* Loader */

 #loader {
     z-index: 999;
     position: relative;
     top: 0;
     transition: all ease 0.7s;
     display: flex;
     ;
     justify-content: center;
     align-items: center;
     position: fixed;
     height: 100vh;
     width: 100vw;
     background-color: black;
     color: white;
 }

 #loader h2 {
     position: absolute;
     font-size: 4vw;
     background: linear-gradient(to right, orange, orangered);
     color: transparent;
     -webkit-background-clip: text;
     opacity: 0;
     animation-name: loader;
     animation-duration: 1s;
     animation-delay: 1s;
     animation-timing-function: linear;
 }

 #loader h2:nth-child(2) {
     animation-delay: 2s;

 }

 #loader h2:nth-child(3) {

     animation-delay: 3s;
 }

 @keyframes loader {
     0% {
         opacity: 0;
     }

     10% {
         opacity: 1;
     }

     90% {
         opacity: 1;
     }

     100% {
         opacity: 0;
     }

 }

 /* deleeete */

 .fixed {
     height: 100vh;
     width: 100%;
     background: white;
 }


 /* ******main*/
 #main {
     position: relative;
     z-index: 11;
 }

 /* ***********Menu cover **************** */

 #menucover{
    position: absolute;
    z-index: 99 ;
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.576);
    top: -100%;
    transition: all ease 0.5s;
}
#menu{
    z-index: 1000;
}
#whitemenu{
    height: 50%;
    width: 100%;
    background-color: #EFEAE3;
    transition: all ease 1s;
    border-bottom-left-radius: 10vw;
    border-bottom-right-radius: 10vw;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: flex-end;
}
#whitemenu h1{
 padding: 2vh;
 margin: 1vh;
}
#menu p {
    transition: all ease 0.4s;

}
nav img{
    transition: all ease 0.3s;
}

 /* ********************************************** page1 */
 #page1 {
     min-height: 100vh;
     width: 100%;
     background-color: #EFEAE3;
     /* background-color: #b56e0a;  */

     position: relative;
     padding: 0vh 3vh;
 }

 nav {
     padding: 2vw 0vw;
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 #nav-part2 {
     display: flex;
     gap: 1vw;
 }

 #nav-part2 h4 {
     padding: 10px 20px;
     border: 1px solid rgba(0, 0, 0, 0.545);
     border-radius: 50px;
     color: rgba(0, 0, 0, 0.835);
     font-weight: 500;
     font-size: 17px;
     position: relative;
     cursor: pointer;
     overflow: hidden;
     z-index: 2;
 }

 #nav-part2 h4::after {
     content: "";
     transition: all ease 0.4s;
     position: absolute;
     background-color: black;
     height: 100%;
     width: 100%;
     left: 0;
     bottom: -100%;
     border-radius: 50px;
     z-index: -1;
     color: white;

 }

 #nav-part2 h4:hover::after {
     bottom: 0;
 }

 #nav-part2 h4:hover {
     position: relative;
     color: white;
     z-index: 2;
 }

 #nav-part2 h3 {
     display: none;
 }



 /* center */

 #center {
     position: relative;
     padding: 2vw 2vw;
     height: 76vh;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     border-bottom: 1px solid rgba(0, 0, 0, 0.436);

 }

 #left h3 {
     margin-bottom: 4rem;
     width: 30vw;
     line-height: 2.5vw;
     font-size: 1.8vw;
     font-weight: 900;
 }

 #center h1 {
     font-size: 10vw;
     line-height: 8vw;
     text-align: right;

 }

 /* 1st video  */
 #page1 video {
     position: relative;
     width: 100%;
     border-radius: 1vw;
     margin-top: 4vw;

 }

 /* hero-shape */

 #hero-shape {

     position: absolute;
     top: 85vh;
     right: 0;
     height: 36vw;
     width: 46vw;

 }

 #hero1 {
     height: 100%;
     width: 100%;
     background-color: orangered;
     border-top-left-radius: 50%;
     border-bottom-left-radius: 50%;
     filter: blur(30px);
     position: absolute;
 }

 #hero2 {
     height: 30vw;
     width: 30vw;
     background: linear-gradient(#fe430a, #fe470a);
     position: absolute;

     filter: blur(25px);

     animation-name: anime2;
     animation-duration: 3s;
     animation-timing-function: linear;
     animation-direction: alternate;
     animation-iteration-count: infinite;


 }

 #hero3 {
     background: linear-gradient(#FE320A, #fe470a);
     height: 30vw;
     width: 30vw;

     position: absolute;
     filter: blur(25px);
     animation-name: anime1;
     animation-duration: 3s;
     animation-timing-function: linear;
     animation-direction: alternate;
     animation-iteration-count: infinite;
 }



 /* Animation of sun 1st */

 @keyframes anime1 {
     from {
         transform: translate(-1%, -1%);
     }

     to {
         transform: translate(10%, 10%);
     }
 }

 @keyframes anime2 {
     from {
         transform: translate(-10%, 10%);
     }

     to {
         transform: translate(15%, 30%);
     }
 }


 /*      Page2    */

 #page2 {
     min-height: 100vh;
     width: 100%;
     background-color: #EFEAE3;
     padding: 8vw 0;
     position: relative;
     z-index: -2;
 }

 #moving-text {
     white-space: nowrap;
     overflow-x: auto;
 }

 #moving-text::-webkit-scrollbar {
     display: none;
 }

 .con {
     display: inline-block;
     white-space: nowrap;
     animation-name: moving-text;
     animation-duration: 11s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
 }

 #moving-text h1 {
     font-size: 8vw;
     display: inline-block;

 }

 #gola {
     height: 50px;
     width: 50px;
     border-radius: 50%;
     background-color: #fe430a;
     display: inline-block;
     margin: 1vw 2vw;
 }

 @keyframes moving-text {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-100%);
     }
 }

 /*    Page2-bottom text and img */

 #page2-bottom {
     width: 100%;
     height: 80vh;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20vw 7vw;
     z-index: 2;
 }

 .page2-bottom-text h1 {
     line-height: 4vw;
     width: 60vw;
     font-size: 2.5rem;
     font-weight: 900;
     z-index: 2;
 }

 .page2-bottom-img {
     width: 30%;
     margin-top: 15vw;
 }

 .page2-bottom-img img {
     border-radius: 4vw;
     margin-top: 11vw;
     width: 100%;
     padding: 0.8vw 3vw;
 }

 .page2-bottom-img p {
     line-height: 1.2vw;
     padding: 1vw 2vw;
     margin-bottom: 5rem;
     font-size: 1rem;
     font-weight: 200;
     margin-left: 1vw;

 }

 /* sunpart2 */

 #sun2 {
     height: 30vw;
     width: 30vw;
     background-color: #FE320A;
     border-radius: 50%;
     position: absolute;
     top: 33vw;
     left: 28vw;
     filter: blur(20px);
     z-index: -1;

 }

 #sun2_1 {
     height: 30vw;
     width: 30vw;
     background-color: #fe530a;
     border-radius: 50%;
     position: absolute;
     top: 33vw;
     left: 28vw;
     filter: blur(20px);
     z-index: -1;
     animation-name: sun2move;
     animation-duration: 2s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
     animation-direction: alternate;

 }

 @keyframes sun2move {

     from {
         filter: blur(20px);
         transform: translate(10%, -10%) skew(0);
     }

     to {
         filter: blur(30px);
         transform: translate(-12%, 10%) skew(-15deg);
     }

 }

 /* ***********page3*********** */

 #page3 {
     min-height: 80vh;
     width: 100%;
     background-color: #EFEAE3;
     /* overflow: hidden; */
 }

 .ele {
     position: relative;
     width: 100%;
     height: 20vh;
     /* background-color: #fe530a; */
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0rem 1rem;
     border-top: 1px solid rgb(72, 72, 72);
     z-index: 1;
     overflow: hidden;
     cursor: pointer;


 }

 .ele img {
     display: none;
 }

 .ele .overlay {
     position: absolute;
     height: 100%;
     width: 100%;
     top: -100%;
     left: 0;
     background-color: orange;
     z-index: 1;
     transition: all ease 0.2s;
 }

 .ele:hover .overlay {
     top: 0;
     z-index: -1;
 }


 /********************************************** fixed frame */
 #fixed-frame {
     height: 70vh;
     width: 25vw;
     /* background-color: red; */
     border-radius: 1rem;
     position: fixed;
     top: 20%;
     bottom: 20%;
     left: 50%;
     z-index: 99;
     display: none;
     background-size: cover;
     background-position: center;

 }

 /* **************************page 4 */

 .page4 {
     height: 130vh;
     width: 100%;
     padding: 5rem 0rem 2rem 0rem;
     background-color: #EFEAE3;
     color: white;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .page4-left {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
     background-color: rgb(1, 1, 1);
 }

 .design {
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 70%;
     height: 100%;
 }

 .design h2 {
     border-left: 1px solid gray;
     padding: 0vh 6vh;
     font-size: 2.4rem;
     line-height: 3.5rem;
 }

 h2:active {
     padding: 0vh 0vh;
 }

 p {
     margin: 1rem 0rem;
 }

 .page4-img {
     width: 100%;
     height: 100%;

 }

 .page4-img img {
     width: 100%;
     height: 100%;

 }


 /* *********************page 5  swiper*/

 #page5 {
     height: 100vh;
     background-color: #EFEAE3;
     cursor: pointer;
     width: 100%;
     padding: 10vw 2vw;
 }

 .swiper {
     width: 100%;
     height: 70%;
 }

 .swiper-slide {
     width: 25% !important;
     text-align: center;
     font-size: 1rem;
     background-color: #EFEAE3;
     display: flex !important;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     border-left: 1px solid gray;
 }

 .swiper-slide img {
     /* display: block; */
     margin: 1rem;
     position: absolute;
     top: 0;
     left: 0;
     width: 30%;
     height: 20%;
 }

 .swiper-slide p {
     position: absolute;
     font-size: 0.8rem;
     left: 1rem;
     top: 4rem;
     font-weight: 100 !important;
     height: 100% !important;
     line-height: 1rem;
     text-align: left;
     width: 90%;
 }


 /* Footer */
 footer {
     position: relative;
     padding: 2vh;
     position: fixed;
     background-color: black;
     height: 100vh;
     width: 100%;
     color: #EFEAE3;
     z-index: 9;
     bottom: 0;

 }

 footer h1 {
     position: absolute;
     padding: 5vh;
     bottom: 0;
     font-size: 42vh;
 }

 footer h2 {
     margin: 2vh 7vh;
     padding: 1vh;
     font-size: 6vh;
 }

 /* blacksun */
 .blacksun {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 60vw;
     width: 60vw;
     background-color: #FE320A;
     border-radius: 50%;
     filter: blur(20px);
     animation-name: blacksun;
     animation-duration: 4s;
     animation-iteration-count: infinite;
     animation-direction: alternate;

 }

 .blacksun1 {
     position: absolute;
     left: 35vh;
     top: 35vh;
     margin: 4vh;
     display: flex;
     display: flex;
     justify-content: flex-end;
     /* align-items: center; */
     height: 40vw;
     width: 40vw;
     background: #fe430a;
     border-radius: 50%;
     filter: blur(20px);
     animation-name: blacksun1;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     animation-direction: alternate;

 }

 @keyframes blacksun {

     from {
         transform: translate(1%, 2%);
     }

     to {
         transform: translate(-1%, -2%);
     }

 }

 @keyframes blacksun1 {

     from {
         transform: translate(1%, 2%);
     }

     to {
         transform: translate(-1%, -2%);
     }

 }

 /* Media query  */

 @media (max-width: 600px) {
     nav h4 {
         display: none;
     }



     #loader h2 {
         /* loader done*/
         font-size: 15vw;
     }

     nav img {
         /* nav done*/
         /* margin: 0vh 2vh; */
         padding: 0.7vh 0vh;
         height: 8vh;
     }

     #nav-part2 h3 {
         display: block;
         padding: 8px 16px;
         border: 1px solid rgba(0, 0, 0, 0.545);
         border-radius: 50px;
         font-weight: 100;
     }

     #nav-part2 h3 p {
         display: inline;
         padding: 0.1rem;
         font-weight: 900;

     }

     /* Animation of sun 1st */

     @keyframes anime1 {
         from {
             transform: translate(-20%, -30%);
         }

         to {
             transform: translate(1%, 1%);
         }
     }

     @keyframes anime2 {
         from {
             transform: translate(-15%, 15%);
         }

         to {
             transform: translate(45%, 30%);
         }
     }

     #center {
         /* center done*/
         padding: 2vw 2vw;
         height: 50vh;
         display: flex;
         flex-direction: column-reverse;
         align-items: center;
         justify-content: space-between;
         border-bottom: 1px solid rgba(0, 0, 0, 0.436);

     }

     #center h1 {
         margin-left: 40%;
         font-size: 11vw;
         line-height: 10vw;
         text-align: right;

     }

     #left h3 {
         width: 90vw;
         line-height: 8vw;
         font-size: 7vw;
         font-weight: 600;
     }

     /* hero-shape */

     #hero-shape {
         /* hero-shape DONE*/
         top: 50vh;
     }

     #page1 video {
         height: 50vh;
         object-fit: cover;
         border-radius: 1rem;
     }

     /*      Page2    DONE*/

     #moving-text h1 {
         font-size: 10vw;
         display: inline-block;

     }

     #gola {
         height: 20px;
         width: 20px;
         margin: 1vw 2vw;
     }

     /*    Page2-bottom text and img DONE */

     #page2-bottom {
         flex-direction: column;

     }

     .page2-bottom-text h1 {
         line-height: 10vw;
         font-size: 1.5rem;
         width: 100%;
         height: 50%;

     }

     .page2-bottom-img {
         padding: 0vh;
         margin: 0vh;
         width: 100%;
         height: 50%;
     }

     .page2-bottom-img img {
         padding: 0px;
         margin: 2vh;
         border-radius: 4vw;
         width: 80%;
         height: 60%;
     }

     .page2-bottom-img p {
         margin-top: 0vh;
         width: 70%;
         font-size: 1rem;
         font-weight: 200;
         line-height: 2.4vh;

     }

     /* sunpart2 DONE */
     @keyframes sun2move {

         from {
             filter: blur(20px);
             transform: translate(40%, -10%) skew(0);
         }

         to {
             filter: blur(30px);
             transform: translate(-20%, 30%) skew(-15deg);
         }

     }

     #sun2 {
         top: 50vw;
     }

     #sun2_1 {
         top: 50vw;
     }


     /* ***********page3*********** */

     #page3 {
         background-color: #EFEAE3;
     }

     .ele {
         all: unset;
         padding: 1vh;
     }

     .ele p {
         display: none !important;
     }

     .ele img {
         display: block;
     }

     .ele .overlay {
         all: unset;
     }

     #fixed-frame {
         display: none !important;

     }

     /* **************************page 4 DONE */

     .page4 {
         height: 95vh;
         width: 100%;
         flex-direction: column;
     }

     .design h2 {
         padding: 0vh 3vh;
         font-size: 2rem;
         line-height: 3rem;
     }

     .page4-img {
         padding: 1vh;

     }

     .page4-img img {
         object-fit: cover;

     }

     /* *********************page 5  swiper DONE*/

     #page5 {
         height: 60vh;
     }

     .swiper-slide {
         width: 60% !important;
     }

     .swiper-slide img {
         width: 42%;
         height: 26%;
     }

     /* Footer */
     footer h1 {
         left: 0;
         font-size: 10vh;
     }

     footer h2 {
         margin: 1vh 4vh;
         padding: 1vh;
         font-size: 6vh;
     }

     /* blacksun */
     .blacksun1 {
         left: 10vh;
         top: 35vh;

     }

     @keyframes blacksun {

         from {
             transform: translate(-12%, -20%);
         }

         to {
             transform: translate(5%, 10%);
         }

     }

     @keyframes blacksun1 {

         from {
             transform: translate(5%, 10%);
         }

         to {
             transform: translate(-12%, -20%);
         }

     }
     #loader h2{
        font-size: 8vh;
     }

 }