*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
    overflow-x: hidden;

}
#main{
    width: 100vw;
}

body::-webkit-scrollbar {
  width: 1vw;
}
 
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px #91C3CE;
}
 
body::-webkit-scrollbar-thumb {
  background-color: #F37925;
  border-radius: 4vw;

}

#page1{
    width: 100vw;
    height: 100vh;
    background-color: orange;
    display: flex;
}
#page1_left{
    width: 50vw;
    height: 100vh;
    background-color: #FAC670;
}

#nav{
    width: 50vw;
    height: 12vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vw;
}
#navimage1{
  width: 10vw;
}

#navimage2{
  width: 3.5vw;
}


#page1_text1{
    font-family: suisseintl,sans-serif;
    font-size: 3vw;
    width: 30vw;
    font-weight: 900;
    line-height: 5vw;
    color:#1B1A19;
    margin: 5vw 0 0 3vw;
}


#new{
    color: #F37925;
}
#page1_text2{
    width: 22vw;
    font-family: gilroy;
    font-size: 1.4vw;
    font-weight: 700;
    margin: 7vw 0 0 3vw;
}
#page1_right{
    width: 50vw;
    height: 100vh;
    padding: 4.5vw 0vw 5vw 5vw;
    background-color: #1B1A19;
}
.box1{
    width: 45vw;
    height: 15vh;
    border-radius: 0.4vw;
    margin-top: 0.5vw;
}
.line1{
    background-color: #91C3CE;
    padding: 1.5vw;
    cursor: pointer;
}
.line2{
    background-color: #FAC670;
    padding: 1.5vw;
    cursor: pointer;
}
.line3{
    background-color: #F5E1BE;
    padding: 1.5vw;
    cursor: pointer;
}
.line4{
    background-color: #F37925;
    padding: 1.5vw;
    cursor: pointer;
}
.line5{
    background-color: #C0A8E6;
    padding: 1.5vw;
    cursor: pointer;
}
.boxshape{
    width: 4vw;
    height: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: gilroy;
    font-size: 1.7vw;
    background-color: rgb(65, 64, 64);
    opacity: 30;
    border-radius: 0.4vw;
    
}

/* ---------page2------------ */

#page2{
    width: 100vw;
    height: 165vh;
    background-color: aqua;
    display: flex;
   
}
#page2_left{
    width: 50vw;
    height: 165vh;
    background-color: #F3F3F3;
    padding: 1vw 0 0 2.5vw;

}
#toptext{
    font-family: gilroy;
    font-size: 1.2vw;
    font-weight: 700;
    margin-left: 1vw;
}


.box2{
    width: 45vw;
    height: 19vh;
    border-radius: 0.4vw;
    margin-top: 0.5vw;
    margin-right: 3vw;
    padding: 1vw;
   
}
.line11{
    padding: 1.5vw;
    cursor: pointer;
    margin-top: 6vw;
}

.line12{
    padding: 1.5vw;
    cursor: pointer;
}
.line13{
    padding: 1.5vw;
    cursor: pointer;
}
.line14{
    padding: 1.5vw;
    cursor: pointer;
}
.line15{
    padding: 1.5vw;
    cursor: pointer;
}

.line16{
    padding: 1.5vw;
    cursor: pointer;
}
.line17{
    padding: 1.5vw;
    cursor: pointer;
}
.one11{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2vw;
    width: 42vw;
    height: 6vw;
    
}
.one12{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2vw;
    width: 42vw;
    height: 6vw;
    
}
.one13{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2vw;
    width: 42vw;
    height: 6vw;
    
}
.one14{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2vw;
    width: 42vw;
    height: 6vw;
    
}
.one15{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2vw;
    width: 42vw;
    height: 6vw;
    
}
.one16{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2vw;
    width: 42vw;
    height: 6vw;
    
}
.one17{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2vw;
    width: 42vw;
    height: 6vw;
}

.img1{
    width: 4vw;
}
.text1{
    font-family: gilroy;
    font-size: 4vw;
    font-weight: 900;

}


#page2_right{
    width: 50vw;
    height: 165vh;
    background-color: black;
}
#page2_right_boxmain{
    width: 50vw;
    height: 100vh;
    background-color: aqua;
    display: flex;
    flex-wrap: wrap;
    position: sticky;
    top: 0%; 
}
#page2_right_box1{
    width: 25vw;
    height: 45vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #91C3CE;
}
#page2_right_box1>img{
    width: 13vw;
}

#page2_right_box2>img{
  width: 8vw;
}


#page2_right_box2{
    width: 25vw;
    height: 45vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #F37925;
}

/*---------------page1_bottom_left-------------*/
#page1_bottom_left {
    width: 50vw;
    height: 55vh;
    overflow: hidden;
    position: relative;
    background-color: #1B1A19;
    /* border-radius: 11vh; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  /*---------------page1_bottom_left-navtop------------*/
  #nav_top_craft {
    width: 100%;
    height: 15vh;
    display: flex;
    position: absolute;
    top: 0;
    justify-content: space-between;
    align-items: center;
    padding: 0 3vw;
    background-color: transparent;
  }
  #nav_top_craft h3 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3vh;
    font-weight: 500;
    line-height: 2vh;
    color: white;
  }
  #nav_top_craft i {
    font-size: 5vh;
    width: 4vw;
    height: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 50%;
  }
  
  /*---------------page1_bottom_left-navbottom------------*/
  #nav_bottom_see_our_services {
    width: 100%;
    height: 15vh;
    display: flex;
    position: absolute;
    bottom: 0%;
    justify-content: space-between;
    align-items: center;
    padding: 0 3vw;
    background-color: transparent;
  }
  #nav_bottom_see_our_services h3 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3vh;
    font-weight: 500;
    line-height: 2vh;
    color: white;
  }
  #nav_bottom_see_our_services i {
    font-size: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  
  /*---------------page1_bottom_left--shape-----------*/
  #page1_bottom_left_shape {
    /* background-color: red; */
    width: 25vw;
    height: 40vh;
    display: flex;
    /* display: none; */
    justify-content: center;
    align-items: center;
    position: relative;
    animation: text 10s linear infinite both;
    transform: rotate(0deg);
  }
  @keyframes text {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  /*-----------shape_cercle-------------*/
  #shape_cercle {
    width: 7vw;
    position: absolute;
    height: 14.5vh;
    top: 3%;
    border-radius: 50vh;
    background-color: darkgrey;
    animation: text 10s linear infinite both;
    transform: rotate(0deg);
  }
  @keyframes text {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  /*-----------shape_square------------*/
  #shape_square {
    width: 6vw;
    height: 13vh;
    top: 60%;
    left: 65%;
    position: absolute;
    background-color: darkgrey;
    animation: text 12s linear infinite both;
    transform: rotate(0deg);
  }
  @keyframes text {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  /*-----------shape_triangle-----------*/
  #shape_triangle {
    top: 60%;
    left: 15%;
    position: absolute;
    border-left: 7vh solid transparent;
    border-right: 7vh solid transparent;
    border-bottom: 14vh solid darkgrey;
    animation: text 12s linear infinite both;
    transform: rotate(0deg);
  }
  @keyframes text {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  /*---------------page1_bottom_left--movetext-----------*/
  #show_text_infinite {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    z-index: 1000;
    gap: 0.4vw;
  }
  #show_text_infinite::-webkit-scrollbar {
    display: none;
  }
  #show_text_infinite > h1 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 5vw;
    font-weight: 600;
    font-family: gilroy;
    line-height: normal;
    color: #ffffff;
    animation: open 10s linear infinite both;
  }
  @keyframes open {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

 


/* ----------------page4----------------- */
#page4{
  width: 100vw;
  height: 160vh;
  background-color: #F5E1BE;
  display: flex;
}
#page4_left{
  width: 50vw;
  height: 160vh;
  background-color: #EAD0A3;
  padding: 3vw;
}
#page4_left>h1{
  width: 32vw;
  height: 65vh;
  font-family: gilroy;
  font-size: 6vw;
  padding-top: 2vw;
  line-height: 5vw;
  font-weight: 900;
  position: sticky;
  top: 0%;
  /* background-color: #F37925; */
}
#page4_left>p{
  width: 25vw;
  height: 5vh;
  font-family: gilroy;
  font-size: 1.5vw;
  line-height: 2vw;
  font-weight: 900;
  margin-top: 37vw;
}

/* --------------------------------- */
#page4_right{
  width: 50vw;
  height: 160vh;
  padding: 2.5vw;
}

#page4_right_main{
  display: flex;
  width: 50vw;
  height: 50vh;
}

#page4_right_box1{
  width: 14vw;
  height: 40vh;
  border-radius: 1vw;
  background-color: #91C3CE;
}

#page4_right_box1>img{
  width: 14vw;
  height: 40vh;
}

#page4_right_box1>h1{
  font-family: gilroy;
  font-size: 1.8vw;
  margin-left: 3vw;
}

#page4_right_box2{
  width: 14vw;
  height: 40vh;
  border-radius: 1vw;
  margin-left: 2vw;
  background-color: #FAC670;
}

#page4_right_box2>img{
  width: 14vw;
  height: 40vh;
}

#page4_right_box2>h1{
  font-family: gilroy;
  font-size: 1.8vw;
  margin-left: 3vw;
}

/* ------------------------- */
#page4_right_main2{
  width: 50vw;
  height: 50vh;
  display: flex;
  padding: 0 0 0 11vw;
}

#page4_right_box3{
  width: 14vw;
  height: 40vh;
  border-radius: 1vw;
  margin-left: 2vw;
  background-color: #C0A8E6;
}

#page4_right_box3>h1{ 
  font-family: gilroy;
  font-size: 1.6vw;
  margin-left: 1.7vw;
}

#page4_right_box3>img{
  width: 14vw;
  height: 40vh;
}

#page4_right_box4{
  width: 14vw;
  height: 40vh;
  border-radius: 1vw;
  margin-left: 2vw;
  background-color:#F37925;
}

#page4_right_box4>h1{
  font-family: gilroy;
  font-size: 1.6vw;
  margin-left: 1.9vw;
}

#page4_right_box4>img{
  width: 14vw;
  height: 40vh;
}

/* ------------------------- */
#page4_right_main3{
  width: 50vw;
  height: 50vh;
  display: flex;
}

#page4_right_box5{
  width: 14vw;
  height: 40vh;
  border-radius: 0.5vw;
  background-color: #FAC670;
}

#page4_right_box5>h1{
  font-family: gilroy;
  font-size: 1.8vw;
  margin-left: 2vw;
}

#page4_right_box5>img{
  width: 14vw;
  height: 40vh;
}

#page4_right_box6{
  width: 14vw;
  height: 40vh;
  border-radius: 0.5vw;
  margin-left: 2vw;
  background-color:#91C3CE;
}

#page4_right_box6>h1{
  font-family: gilroy;
  font-size: 1.8vw;
  margin-left: 3vw;
}

#page4_right_box6>img{
  width: 14vw;
  height: 40vh;
}

/* --------------------page5------------------- */

#page5{
  width: 100vw;
  height: 100vh;
  display: flex;
}

#page5_left{
  width: 50vw;
  height: 100vh;
  background-color: #1B1A19;
}

.page5_left_video{
  width: 50vw;
  height: 100vh;
  object-fit: fill;
  background-position: center;
  background-size: cover;
}

#page5_right{
  width: 50vw;
  height: 100vh;
  background-color: #F3F3F3;
}

#page5_right>h1{
  width: 40vw;
  height: 60vh;
  font-family: gilroy;
  font-size: 5.5vw;
  font-weight: 800;
  padding: 2vw 0 0 2vw;
  line-height: 5vw;
  position: sticky;
  top: 0;
}

#page5_right>p{
  width: 23vw;
  height: 18vh;
  font-family: gilroy;
  font-size: 1.4vw;
  font-weight: 800;
  margin-top: 10vw;
  margin-left: 3vw;
  padding: 1vw 0 0 0;
}

/* ----------------page6---------------- */
#page6{
  width: 100vw;
  height: 100vh;
  display: flex;
  background-color: hotpink;
}
#page6_left{
  width: 50vw;
  height: 100vh;
  padding: 2.5vw;
  background-color: #F3F3F3;
}

.box40{
  width: 45vw;
  height: 12vh;
  background-color: #EEEBF2;
  margin-top: 1vw;
  padding: 2vw;
  border-radius: 1vw;
  cursor: pointer;
}
.box40>h1{
  font-family: gilroy;
  font-size: 1.4vw;
  font-weight: 700;
  color: #222222;
}

.box41{
  width: 45vw;
  height: 12vh;
  background-color: #EEEBF2;
  margin-top: 1vw;
  padding: 2vw;
  border-radius: 1vw;
  cursor: pointer;
}
.box41>h1{
  font-family: gilroy;
  font-size: 1.4vw;
  font-weight: 700;
  color: #222222;
}

.box42{
  width: 45vw;
  height: 12vh;
  background-color: #EEEBF2;
  margin-top: 1vw;
  padding: 2vw;
  border-radius: 1vw;
  cursor: pointer;
}
.box42>h1{
  font-family: gilroy;
  font-size: 1.4vw;
  font-weight: 700;
  color: #222222;
}

.box43{
  width: 45vw;
  height: 12vh;
  background-color: #EEEBF2;
  margin-top: 1vw;
  padding: 2vw;
  border-radius: 1vw;
  cursor: pointer;
}
.box43>h1{
  font-family: gilroy;
  font-size: 1.4vw;
  font-weight: 700;
  color: #222222;
}

.box44{
  width: 45vw;
  height: 12vh;
  background-color: #EEEBF2;
  margin-top: 1vw;
  padding: 2vw;
  border-radius: 1vw;
  cursor: pointer;
}
.box44>h1{
  font-family: gilroy;
  font-size: 1.4vw;
  font-weight: 700;
  color: #222222;
}

#page6_right{
  width: 50vw;
  height: 100vh;
  background-color:#C0A8E6;
}
#page6_right>h1{
  font-family: gilroy;
  font-size: 1.8vw;
  width: 42vw;
  height: 20vh;
  display: flex;
  margin-left: 2.5vw;
  justify-content: center;
  align-items: center;
  line-height: 2.5vw;
}
#page6_right>img{
  width: 48.8vw;
  margin-top: 28.1%;
}

/* ---------------page7-------------------- */
#page7{
  width: 100vw;
  height: 100vh;
  display: flex;
}

#page7_left{
  width: 50vw;
  height: 100vh;
  background-color: #F5E1BE;
}

#page7_left_one{
  width: 50vw;
  height: 75vh;
  position: relative;
}
#page7_left_one>.one11{
  width: 25vw;
  height: 75vh;
  border-radius: 7vw;
  margin-left: 16vw;
  background-color: #FAC670;
}
#page7_left_one>.one12{
  width: 20vw;
  height: 40vh;
  border-radius: 10vw;
  position: absolute;
  top: 45%;
  left: 10%;
  background-color: #F37925;
}

#page7_left_one>img{
  width: 35vw;
  position: absolute;
  top: 18%;
  left: 10%;
}

#page7_right{
  width: 50vw;
  height: 100vh;
  background-color:#EAD0A3;
}

#page7_right>h1{
  width: 33vw;
  /* background-color: #F37925; */
  font-family: gilroy;
  font-size: 5.5vw;
  line-height: 5.2vw;
  margin: 2vw 0 0 3vw;
  font-weight: 800;
  position: sticky;
  top: 1%;
}

#page7_right>p{
  width: 32vw;
  background-color: #F37925;
  font-family: gilroy;
  font-size: 1.3vw;
  font-weight: 800;
  margin: 10vw 0 0 3vw;
}

/* --------------------page8----------------- */
#page8{
  width: 100vw;
  height: 100vh;
  background-color:red;
  display: flex;
}

#page8_left{
  width: 50vw;
  height: 100vh;
  padding: 3vw 0 0 3vw;
  background-color: #FAC670;
}
#page8_left>h1{
  font-family: gilroy;
  font-size: 6vw;
  line-height: 5vw;
  font-weight: 900;
  width: 28vw;
  height: 50vh;
  padding-top: 1vw;
  position: sticky;
  top: 0%;
}
#page8_left>h1>span{
  color: #F37925;
}

#page8_right{
  width: 50vw;
  height: 100vh;
  background-color: #F3F3F3;
  padding: 3vw;
}
#name{
  width: 44.5vw;
  height: 15vh;
  border-radius: 0.7vw;
  background-color: #F5E1BE;
  padding: 1vw 0 0 2vw;
  margin-top: 1vw;
  border: none;
}

#name:hover{
  outline: 0.2vw solid  #F37925;
  transition: 0.1s;
  cursor: pointer;
}

#name>h2{
  font-family: gilroy;
  font-size: 1.2vw;
  color: #F37925;
}

#name>input{
  border: none;
  background-color: transparent;
  font-family: gilroy;
  font-size: 1.6vw;
  margin-top: 1vw;
  font-weight: 900;
  outline: none;

}

#message{
  width: 44.5vw;
  height: 25vh;
  border-radius: 0.7vw;
  background-color: #F5E1BE;
  padding: 1vw 0 0 2vw;
  margin-top: 1vw;
  border: none;
}

#message:hover{
  outline: 0.2vw solid  #F37925;
  transition: 0.1s;
  cursor: pointer;
}

#message>h2{
  font-family: gilroy;
  font-size: 1.2vw;
  color: #F37925;
  letter-spacing: 0.1vw;
}
#message>input{
  border: none;
  background-color: transparent;
  font-family: gilroy;
  font-size: 1.6vw;
  margin-top: 1vw;
  font-weight: 900;
  outline: none;

}
#checkbox{
    width: 44.5vw;
    height: 25vh;
    margin-top: 1vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;

}
#checkbox_left{
  width: 22vw;
  height: 12vh;
  display: flex;
  justify-content: space-between;
}
#checkbox_left>input{
  width: 4vw;
  background-color: tomato;
  cursor: pointer;
}

#checkbox_left>h2{
  font-family: gilroy;
  font-size: 1.1vw;
  width: 14vw;
}

#checkbox>button{
  margin-left: 4vw;
  padding: 1.5vw 3vw;
  font-family: gilroy;
  font-size: 4vw;
  font-weight: 900;
  background-color:#FF842F;
  border: none;
  border-radius: 0.5vw;
  cursor: pointer;
  
}

#checkbox>button:hover{
  background-color: #e07122;
  transition: 0.3vw;
}


/* -----------page9---------------- */
#page9{
  width: 100vw;
  height: 60vh;
  display: flex;
  background-color: aqua;
}
#page9_left{
  width: 50vw;
  height: 60vh;
  padding: 3vw;
  background-color: #C0A8E6;
}
#page9_left>img{
  width: 7vw;
}

#page9_left>h1{
  width: 35vw;
  font-family: gilroy;
  font-size: 6vw;
  font-weight: 900;
  line-height: 3vw;
  margin-top: 6vw;
 
}
#page9_left>h1>span{
  font-size: 2vw;
  line-height: 1vw;
  font-style: italic;
  color: white; 
}

#page9_left>h2{
  font-family: gilroy;
  font-size: 3.5vw;
  font-weight: 900;
  margin-top: 4vw;
}

/*  */

#page9_right{
  width: 50vw;
  height: 60vh;
  padding: 3vw;
  background-color: #EAD0A3;
}
#page9_right>img{
  width: 5vw;
}

#page9_right>h1{
  width: 35vw;
  font-family: gilroy;
  font-size: 5.5vw;
  font-weight: 900;
  line-height: 3vw;
  margin-top: 5vw;
 
}
#page9_right>h1>span{
  font-size: 2vw;
  line-height: 1vw;
  font-style: italic;
  color: white; 
  color: #49A3A7;
}

#page9_right>h2{
  font-family: gilroy;
  font-size: 3.5vw;
  font-weight: 900;
  margin-top: 4vw;

}

#social{
  width: 31vw;
  height: 6vw;
  margin-top: 2.5vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.social_one{
  width: 4vw;
  height: 4vw;
  border: none;
  outline: 0.3vw solid black;
  cursor: pointer;
  margin-left: 1.5vw;
}

.social_one>img{
   width: 4vw;
}

/* ----------------page10------------------ */
#page10{
  width: 100vw;
  height: 55vh;
  display: flex;
  background-color: #1B1A19;
}

#page10_left{
  width: 50vw;
  height: 55vh;
  padding: 2vw 0 0 3vw;
  background-color: #1B1A19;
}

#page10_left>img{
  width: 5vw;
}

#page10_left>h1{
  font-family: gilroy;
  font-size: 6vw;
  margin-top: 4vw;
  line-height: 3vw;
  color: white;
}

#page10_left>h1>span{
  font-size: 2vw;
  font-style: italic;
}

#page10_left>h2{
  font-size: 2vw;
  font-family: gilroy;
  margin-top: 2vw;
  font-weight: 900;
  font-size: 3.5vw;
  color: white;
  text-decoration: underline;
}

#page10_right{
  width: 50vw;
  height: 55vh;
  display: flex;
  position: relative;
  background-color: #1B1A19;
}

#page10_right_box1{
  width: 20vw;
  height: 50vh;
  position: absolute;
  left: 25vw;
  top: 2.4vw;
  border-top-left-radius: 4vw;
  border-top-right-radius: 4vw;
  background-color:#49A3A7;
}

#page10_right_box2{
  width: 15vw;
  height: 40vh;
  position: absolute;
  left: 10.1vw;
  top: 7.2vw;
  border-top-left-radius: 1vw;
  border-top-right-radius: 1vw;
  background-color:#C0A8E6;
}

#page10_right>img{
  width: 27.2vw;
  left: 13vw;
  position: absolute;
  z-index: 10;
}

/* -------------------page11--------------------- */
#page11{
  width: 100vw;
  height: 80vh;
  background-color:#FCF3E4;
  padding: 3vw;
}
#page11_top{
  display: flex;
  font-family: gilroy;
  justify-content: space-between;
}
#page11_top>h1{
  cursor: pointer;
  text-decoration: underline;
}

#page11>h1{
  font-family: gilroy;
  font-size: 23.5vw;
  line-height: 40vh;
  margin-top: 18vh;
}