@media (max-width:1600px) {
    /* i thik it's good no need to change in 1600px */
}
@media (max-width:1366px) {

  
}@media (max-width:1180px) {
  
  
}
@media (max-width:1024px) {
  #matter-container{
    p{
      font-size: 2vw;
    }
    img{
      width: 45% !important;
    }
    button{
      font-size: 3vw !important;
      padding: 2vh 7vw;
    }
  }
  nav{
    .logo{
      img{
        width: 10vw;
      }
    }
    .right{
      .menu{
        a{
          font-size: 8vw;
        }
        button{
          .button-lg{
            padding: 31px 52px;
          }
          .button_text{
            font-size: 3vw;
          }
        }
      }
    }
  }
  .hero{

    .left{
      .top{
        font-size: 2.2vw;
        /* background-color: darkcyan; */
        /* padding: 10vh 15vw; */
      }
    }
    #bg-video {
      top: 1%;
      height: 80vh;
      /* background-color: darkblue; */
      display: block;
  }
  #bg-phone{
    display: none;
  }
  .right{
    .text{
      font-size: 2vw;
      a{
        font-size: 2vw;
        i{
          font-size: 2vw;
        }
      }
    }
  }
  }
  .scroller{
    height: 20vh;
    /* background-color: darkcyan; */
  }
  .section2{
    height: 80vh;
    /* padding: 10vh 2vw; */
    /* padding: ; */
    /* background-color: darkcyan; */
    .container{
      flex-direction: column;
      .left{
        width: 100%;
        margin-top: 1rem;
        video{
          width: 80%;
          /* height: 70%; */
        }
      }
      .right{
        padding: 10vh 2vw;
        width: 100%;
        height: 60%;
        /* background-color: darkblue; */
        h3{
          font-size: 4vw;
        }
        .button>a{
          font-size: 1.8vw;
        }
      }
    }
  }
  .section3{
    flex-direction: column;
    /* background-color: saddlebrown  ; */
    height: 65vh;
    .left{
      width: 100%;
      height: 70%;
      p{
        font-size: 3.5vw;
        br{
          display: none;
        }
      }
      button>a{
        font-size: 2.5vw;
      }
    }
    .right{
      width: 100%;
      height: 35%;
      h4{
        font-size: 4.5vw;
      }
      h1{
        margin-top: 0;
        font-size: 7vw;
      }
    }
  }

  .section4{
    gap: 0.5vw;
    min-height: 100vh;
    padding: 0.1vh 2vw;
    /* overflow-y: scroll; */
    width: 100%;
    /* background-color: sandybrown; */
    flex-wrap: wrap;
    .box{
      height: 30%;
      border-radius: 40px;
      width: 100%;
      border-radius: 30px;
      padding: 2vh 4vw;
      video{
        height: 75%;
        /* background-color: sandybrown; */
      }
      button{
        font-size: 3.5vw;
      }
      h2{
        font-size: 4.2vw;
      }
      
    }
   
  }
  .section5{
    height: 20vh;
    padding: 0;
    .box{
      height: 45%;
    }
    #firstBox{
      i{
        font-size: 4vw;
        color: #101010;
      }

      h3{
        font-size: 1.8vw;
        line-height: 1;
        font-family: HelvR;
        font-weight: 300;
        padding-bottom: 2vh;
      }
    }
  }
  .section6{
    /* background-color: rgb(167, 50, 108); */
    /* height: 100vh !important; */
    
  }
  .section7{
    height: 60vh;
    /* background-color: firebrick; */
    flex-direction: column;
    .left{
      width: 100%;
      height: 40%;
      /* background-color: forestgreen; */
      p{
        font-size: 3vw;
      
      }
      h1{
        span{
          font-size: 10vw;
        }
      }
      h2{
        font-size: 10vw;
        img{
          width: 100%;
          height: auto;
        }
      }
    }
    .right{
      width: 100%;
      height: 60%;
      /* background-color: gold; */
      p{
        font-size: 3vw;
      }
      .button{
        font-size: 25px;
        padding: 0.5rem 1rem;
      }
      button>a{
        font-size: 2vw;
      }
    }
  }
  .section8{
    /* background-color: firebrick; */
    height: 100vh;
    .box {
      .top {
          h5 {
              font-size: 5vw;
          } 
          h3{
            font-size: 2.6vw;
          }
         
        }
        p{
          font-size: 1.5vw;
        }
      }
      
  }
  .section9{
    .top {
      .left {
          h3 {
            font-size: 5.4vw;
          }
        }
        .right {
          button>a{
            font-size: 2vw;
          }
        }
  }
  .bottom {
    .m-scroll{
      font-size: 8vw;
    }
  }
}
.section11{
  #page{
  padding: 5vh 5vw 6vh 5vw;

  }
 
  .left{
    padding: 5vh 0;
    /* background-color: firebrick; */
    h2{
      font-size: 5vw;
    }
    h5{
      font-size: 2.5vw;
      text-align: start;
    }
    img{
      width: 25%;
    }
  }
  .right{
    /* background-color: gold; */
    .top{
      flex-direction: column;
      /* background-color: darkblue; */
      justify-content: center;
      align-items: center;
      gap: 0.5rem;

    }
    .mid{
      /* background-color: firebrick; */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
    }
    
    .box{
      width: 100%;
      height: 45%;
      /* background-color: forestgreen; */
      gap: 1vh;
      h3{
        font-size: 2vw;
      }
      h4{
        font-size: 1.5vw;
        br{
          display: none;
        }

      }
      ul{
        font-size: 0.5vw;
        
        width: 100%;
        li{
          width: 100%;
          margin-left: 2vw;

          font-size: 1.3vw;
        }
      }
    }
    .bottom{
      /* background-color: rgb(82, 82, 144); */
      h3{
        font-size: 1.8vw;
      }
      h4{
        font-size: 1.5vw;
      }
    }

  }
}
.section12{
  /* background-color: darkcyan; */
  height: 80vh;
  padding: 6vh 2vw;
  .top{
    /* background-color: forestgreen; */
    h1{

      font-size: 12vw;
    }
  }
  .mid{
    /* background-color: firebrick; */
    /* justify-content: start; */

    gap: 3vh;
    button{
      padding: 1vh 1.5vw;
      font-size: 2vw;
    }
    .button{
      padding: 0.8em 3.4em;
    }
    .button>a{
      font-size: 2vw;
    }
  }
}
.section13{
  /* background-color: gray; */
  .top{
    flex-direction: column;
    /* background-color: gold; */
    .left{
      width: 100%;
      height: 50%;
      /* background-color: darkcyan; */
      img:nth-child(1){
        width: 100px;
      }
      img:nth-child(2){
        width: 100px;
      }
      img:nth-child(3){
        width: 70px;
      }
      img:nth-child(4){
        width: 100px;
      }
      img:nth-child(5){
        width: 60px;
      }
      img:nth-child(6){
        width: 80px;
      }
    }
    .right{
      width: 100%;
      height: 50%;
      /* background-color: firebrick; */
      h3{
        font-size: 2.5vw;
        padding: 0vw;

      }
      a{
        font-size: 3vw;
        i{
          font-size: 3vw;
        }
      }
    }
  }
  .bottom{
    /* background-color: greenyellow; */
    h3{
      font-size: 2vw;
    }
  }
}
}
@media (max-width:900px) {   
  /* section 4 ma video na text small lage to badalje */
  nav{
    .logo{
      img{
        width: 10vw;
      }
    }
  }
  .hero{

    .left{
      .top{
        font-size: 2.2vw;
        /* background-color: darkcyan; */
        /* padding: 10vh 15vw; */
      }
    }
    #bg-video {
      top: 1%;
      height: 80vh;
      /* background-color: darkblue; */
      display: none;
  }
  .right{
    #bg-phone{
      display: block;
    }
    .text{
      font-size: 2vw;
      a{
        font-size: 2vw;
        i{
          font-size: 2vw;
        }
      }
    }
  }
  }
  .scroller{
    height: 20vh;
    /* background-color: darkcyan; */
  }
  .section2{
    height: 100vh;
    padding: 5vh 2vw;
    /* padding: ; */
    /* background-color: darkcyan; */
    .container{
      height: 100%;
      /* background-color: darkblue; */
      flex-direction: column;
      .left{
        /* background-color: firebrick; */
        width: 100%;
        height: 50%;
        margin-top: 1rem;
        video{
          width: 70%;
          /* height: 70%; */
          object-fit: cover;
        }
      }
      .right{
        padding: 10vh 2vw;
        width: 100%;
        height: 50%;
        padding: 1vh 2vw;
        /* background-color: rgb(91, 91, 122); */
        /* margin-left: 50px; */
        h3{
        /* margin-left: 50px; */
          font-size: 4.5vw;
        }
        .button>a{
          font-size: 1vw;
        }
      }
    }
  }
  .section3{
    flex-direction: column;
    /* background-color: saddlebrown  ; */
    height: 80vh;
    .left{
      width: 100%;
      height: 65%;
      /* background-color: forestgreen; */
      padding: 1rem;
      p{
        font-size: 4.5vw;
        br{
          display: none;
        }
      }
      button>a{
        font-size: 2.5vw;
      }
    }
    .right{
      width: 100%;
      height: 35%;
      /* background-color: rgb(246, 192, 84); */
      h4{
        font-size: 4vw;
      }
      h1{
        margin-top: 0;
        font-size: 11vw;
      }
    }
  }

  .section4{
    gap: 0.5vw;
    width: 100%;
    height: 100vh;
    padding: 0.1vh 2vw;
    /* overflow-y: scroll; */
    /* background-color: sandybrown; */
    flex-wrap: wrap;
    .box{
      width: 100%;
      height: 30%;
      border-radius: 40px;
      border-radius: 30px;
      padding: 2vh 4vw;
      video{
        height: 75%;
        /* background-color: sandybrown; */
      }
      button{
        font-size: 3.5vw;
      }
      h2{
        font-size: 4.2vw;
      }
      
    }
   
  }
  
  .section11{
    #page{
    padding: 5vh 5vw 6vh 5vw;
  
    }
   
    .left{
      padding: 5vh 0;
      /* background-color: firebrick; */
      h2{
        font-size: 5vw;
      }
      h5{
        font-size: 2.5vw;
        text-align: start;
      }
      img{
        width: 50%;
      }
    }
    .right{
      /* background-color: gold; */
      .top{
        flex-direction: column;
        /* background-color: darkblue; */
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
  
      }
      .mid{
        /* background-color: firebrick; */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
      }
      
      .box{
        width: 100%;
        height: 45%;
        /* background-color: forestgreen; */
        gap: 1vh;
        h3{
          font-size: 2.5vw;
        }
        h4{
          font-size: 1.8vw;
          br{
            display: none;
          }
  
        }
        ul{
          font-size: 0.5vw;
          
          width: 100%;
          li{
            width: 100%;
            margin-left: 2vw;
  
            font-size: 1.5vw;
          }
        }
      }
      .bottom{
        /* background-color: rgb(82, 82, 144); */
        h3{
          font-size: 2.2vw;
        }
        h4{
          font-size: 1.8vw;
        }
      }
  
    }
  }
}



@media only screen and (min-width:321px) and (max-width:820px)
{
  #matter-container{
    z-index: 9999;
  }

  nav{
    z-index: 999;
    /* background-color: rgb(121, 93, 38); */
    .logo{
      img{
        width: 20vw;
      }
    }
    .right{
      .menu{
        z-index: 999;
        top: -250%;
        width: 120vw;
      }
      .button{
        bottom: 25%;
      }
    }
  }
  .hero{
    z-index: 99;
    /* background-color: ; */
    /* background-color: firebrick; */
    #bg-video {
      top: 1%;
      height: 80vh;
      right: 15rem; 
      display: none;
      /* background-color: darkblue; */
      
  }
  .left{
    .top{
      font-size: 5vw;
      width: 100%;
    }
    .bottom{
      h4{
        font-size: 2vw;
      }
      h1{
        font-size: 2.8vw;
        /* background-color: firebrick; */
        line-height: 0.1 !important;
        /* perspective: 0px; */

      }
    }
  }
  .right{
    #bg-phone{
      display: block;
      width: 100vw;
      height: 100vh;
      position: relative;
      left: 0;
      top: 0;
      bottom: 0;
      object-fit:contain;
      /* mix-blend-mode: multiply; */
    }
  }
  
  }
  .scroller{
    height: 10vh;
    /* background-color: salmon; */

  }
  .section2{
    height: 70vh;
    /* justify-content: center; */
    padding: 8vh 2vw;
    /* background-color: darkcyan; */
    .container{
      flex-direction: column;
      height: 100%;
      /* background-color: goldenrod; */
      .text{
        font-family: HelvM;
        font-size: 4vw;
        letter-spacing: .5px;
        transform: rotate(-90deg);
        position: absolute;
        left: -8%;
        top: 22%;
    }
      .left{
        width: 100%;
        height: 50%;

        margin-top: 1rem;
        /* background-color: forestgreen; */
        video{
          width: 80%;
          /* height: 100%; */
          object-fit: contain;
        }
      }
      .right{
        padding: 1vh 2vw;
        /* margin-top: 3rem; */
        width: 100%;
        height: 50%;
        /* background-color: darkblue; */
        h3{
          font-size: 4vw;
          /* background-color: darkgoldenrod; */
        }
        .button>a{
          font-size: 1.8vw;
        }
      }
    }
  }
  .section3{
    /* background-color: darkblue; */
    flex-direction: column;
    height: 70vh;
    .left{
      width: 100%;
      height: 65%;
      /* background-color: rgb(133, 157, 133); */
      p{
        font-size: 4.2vw;
        br{
          display: none;
        }
      }
      button>a{
        font-size: 2.5vw;
      }
    }
    .right{
      width: 100%;
      height: 35%;
      /* background-color: bisque; */
      h4{
        font-size: 2.5vw;
      }
      h1{
        font-size: 10vw;
      }
    }
  }
  .section6{
    height: 200vh;
  }
  .section7{
    height: 50vh;
    
  }
  .section9{
    /* background-color: firebrick; */
  .bottom {
      .scroller {
        height: 70%;
      }
    .m-scroll{
      font-size: 8vw;
    }
  }
}
.section11{
  #page{
  padding: 2vh 2vw 2vh 2vw;
    /* background-color: rgb(0, 115, 255); */
    flex-direction: column;
  }

  .one{
    border-top: 1px solid #1010103c;
  }
 
  .left{
    /* padding: 5vh 0; */
    /* background-color: firebrick; */
    width: 100%;
    height: 45%;
    padding: 1rem;
    gap: 0.5rem;
    h2{
      font-size: 7vw;
      width: 100%;
      font-family: HelvM;
      font-weight: 300;
      /* background-color: hotpink; */
      br{
        display: none;
      }
    }
    h5{
      font-size: 3.6vw !important;
      opacity: .7;
      text-align: start;
      margin-top: 10px;
      /* line-height: 1% */
      /* background-color: gold; */
      br{
        display: none;
      }
    }
    img{
      width: 25% !important;
      /* background-color: gainsboro; */
      /* height: 30%; */
    }
  }
  .right{
    /* background-color: gold; */
    width: 100%;
    height: 70%;
    padding: 0;
    .top{
      /* background-color: darkblue; */
      justify-content: space-between;
      display: flex;
      flex-direction: row;
      /* align-items: center; */
      gap: 1rem;
      padding: 1rem;

    }
    .mid{
      /* background-color: firebrick; */
      justify-content: space-between;
      /* align-items: center; */
      gap: 1rem;
      flex-direction: row;
      padding: 1rem;

    }
    
    .box{
      width: 50%;
      height: 100%;
      padding: 0;
      /* background-color: forestgreen; */
      gap: 1vh;
      h3{
        font-size: 3.4vw !important;
      }
      h4{
        font-size: 2.8vw !important;
        br{
          display: none;
        }

      }
      ul{
        /* font-size: 0.5vw; */
        
        width: 100%;
        li{
          width: 100%;
          margin-left: 2vw;

          font-size: 2.8vw !important;
        }
      }
    }
    .bottom{
      /* background-color: rgb(82, 82, 144); */
      padding: 1rem;
      h3{
        font-size: 3.2vw;
      }
      h4{
        font-size: 1.1rem;
      }
    }

  }
  .one{
    .right{
      height: 50%;
    }
  }
  .two{
    .right{
      /* height: 70%; */
      ul{
        p{
          font-size: 2vw;
        }
      }
      .bottom{
        display: none;
      }
    }
  }
  .four, .five{
    .right{
     .box{
      /* color: darkblue; */
      h3{
        font-size: 3vw;
      }
      h4{
        font-size: 2.5vw;
      }
     }
      
    }
  }
}
}
@media (max-width:680px) {
  .hero{
    .left{
      .bottom{
        h4{
          font-size: 2.3vw;
        }
        .button{
          /* font-size: 10rem; */
          padding: 0.45rem 1.5rem;
        }
      }
    }
  }
  .section3{
    .left{
      p{
        font-size: 4.6vw;
      }
    }
    .right{
      h4{
        font-size: 5vw;
      }
      h1{
        font-size: 12vw;
        line-height: 0.4 !important;
      }
    }
  }
  .section5{
    flex-wrap: wrap;
    height: 50vh;
    .box{
      width: 50%;
      height: 25%;
      padding: 0.5vh 2vw;
        h4{
          font-size: 5.1vw;
      }
    }
    #firstBox{
      border-left: 2px solid #cacaca !important;

      i{
        font-size: 6vw;
        color: #101010;
      }

      h3{
        font-size: 4.8vw;
        

      }
    }
    #fourthBox{
      border-left: 2px solid #cacaca !important;

    }
    #lastBox{
      border-right: 2px solid #cacaca !important;
    }
  }
  .section7{
    .left{

    }
    .right{
      p{
        font-size: 3.5vw;
      }
    }
  }
  
}

@media (max-width:550px) {
  #matter-container{
    p{
      font-size: 3vw;
      font-weight: 600;
      width: 70%;
    }p::after{
      left: 36%;
      top: 75% !important;
      width: 57%;
    }
    #infosys{
      button{
        padding: 2vh 8vw !important;
      }
      img{
        width: 65% !important;
      }
    }
  }
  nav{
    .right{
      .menu{
        width: 100vw;
        /* background-color: #000000; */
        /* z-index: 68464584; */
        
        a{
          font-size: 8vw;
        }
        button{
          .button-lg{
            padding: 31px 52px;
          }
          .button_text{
            font-size: 3vw;
          }
        }
      }
    }
  }
  .hero{
    flex-direction: column;
    /* background-color: firebrick; */

    /* background-color: darkgoldenrod;/ */
    /* background: url('assets/f.mp4'); */
    /* background-color: #000000; */
    position: relative;
    .left{
      width: 100%;
      /* background-color: darkblue; */
      /* height: 100%; */
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      /* display: none; */
      z-index: 56565;
      .top{
        width: 100%;
        height: 30%;
        position: absolute;
        /* background-color: darkcyan; */
        z-index: 656;
      }
      .bottom{
        /* background-color: firebrick; */
        width: 100%;
        height: 70%;
        position: absolute;
        h4{
          font-size: 2vw;
        }
        h1{
          font-size: 3vw;
          line-height: 0.4 !important;
        }
        .button{
          font-size: 2vw;
          /* padding: 0.7rem 1.3rem; */
        }
      }
    }
    #bg-video {
      top: 5%;
      /* height: 60vh; */
      right: 23rem;
      /* width: 100%; */
      /* background-color: darkblue; */
      display: none;
  }
  
#bg-phone{
  display: block;
  width: 100vw;
  height: 100vh;
  position: relative;
  left: 0;
  top: 0;
  bottom: 0;
  object-fit:contain;
}
  .right{
   /* display: none; */
   width: 100%;
   height: 100%;
   #bg-phone{
    display: block;
    width: 100vw;
    height: 100vh;
    position: relative;
    left: 0;
    top: 0;
    bottom: 0;
    object-fit:contain;
  }
  }
  }
  .scroller{
    /* width: 100%; */
    height: 10vh;
    /* background-color: transparent; */
    .m-scroll{
      padding: 1rem;
    }       

  }
  .section2{
    /* height: 55vh; */

    padding: 6vh 2vw;
    .container{
      flex-direction: column;

      .left{
        width: 100%;
        margin-top: 1rem;
        video{
          width: 80%;
          /* height: 70%; */
        }
      }
      .right{
        padding: 1vh 2vw;
        width: 100%;
        height: 60%;
        margin-top: 3rem;

        /* background-color: darkblue; */
        h3{
          font-size: 4.3vw;
        }
        .button>a{
          font-size: 2.8vw;
        }
      }
    }
  }
  .section3{
    flex-direction: column;
    /* background-color: saddlebrown  ; */
    height: 80vh;
    .left{
      width: 100%;
      
      p{
        font-size: 5vw;
        br{
          display: none;
        }
      }
      button>a{
        font-size: 3vw;
      }
    }
    .right{
      width: 100%;

      h4{
        font-size: 4.5vw;
      }
      h1{
        margin-top: 0;
        font-size: 12vw;
        line-height: 1 !important;
      }
    }
  }

  .section4{
    gap: 0.5vw;
    min-height: 100vh;
    padding: 0.1vh 2vw;
    /* overflow-y: scroll; */
    width: 100%;
    /* background-color: sandybrown; */
    flex-wrap: wrap;
    .box{
      height: 30%;
      border-radius: 40px;
      width: 500px;
      border-radius: 30px;
      padding: 2vh 4vw;
      video{
        height: 75%;
        /* background-color: sandybrown; */
      }
      button{
        font-size: 7.5vw;
      }
      h2{
        font-size: 5.2vw;
      }
      
    }
   
  }
  .section7{
    .left{

    }
    .right{
      p{
        font-size: 3.5vw;
      }
      .button{
        font-size: 25px;
        padding: 0.5rem 1rem;
      }
      button>a{
        font-size: 2vw;
      }
    }
  }
  .section8{
    /* background-color: rgb(98, 185, 255); */
    /* height: 60vh;   */
    gap: 5px 3.5vw;
    padding: 2vh 4vw;

    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr 1fr !important;
    grid-template-areas:
        ". . . "
        ". . . "
        ". . . "
        ". . . ";

    .box {
      padding: 2vh 0 3vh 0;
      .top {
          h5 {
              font-size: 7vw;
          } 
          h3{
            font-size: 3.6vw;
          }
         
        }
        p{
          font-size: 2.5vw;
        }
      }
      
  }
  .section10{
    height: 50vh;
    h1{
      font-size: 16vw;
    }
  }
  .section11{
    #page{
    padding: 2vh 2vw 2vh 2vw;
      /* background-color: rgb(0, 115, 255); */
      flex-direction: column;
      justify-content: center;
      height: 90vh;
    }
   
    .left{
      /* padding: 5vh 0; */
      /* background-color: firebrick; */
      width: 100%;
      height: 30%;
      padding: 1rem;
      gap: 0.5rem;
      /* border-bottom: 3px solid violet; */
      h2{
        font-size: 4vw;
        width: 100%;
        /* background-color: hotpink; */
        br{
          display: none;
        }
      }
      h5{
        font-size: 2.8vw;
        text-align: start;
        margin-top: 10px;
        /* line-height: 1% */
        /* background-color: gold; */
        br{
          display: none;
        }
      }
      img{
        width: 20%;
        /* background-color: gainsboro; */
        /* height: 30%; */
      }
    }
    .right{
      /* background-color: rgb(123, 106, 6); */
      width: 100%;
      height: 70%;
      padding: 0;
      .top{
        /* background-color: rgb(13, 13, 176); */
        justify-content: space-between;
        display: flex;
        flex-direction: row;
        /* align-items: center; */
        gap: 0.5rem;
        padding: 1rem;
  
      }
      .mid{
        /* background-color: firebrick; */
        justify-content: space-between;
        /* align-items: center; */
        gap: 0.5rem;
        flex-direction: row;
        padding: 1rem;
  
      }
      
      .box{
        width: 50%;
        height: 100%;
        /* background-color: forestgreen; */
        gap: 1vh;
        padding: 0.1rem;
        h3{
          font-size: 3.5vw;
        letter-spacing: 2px;

        }
        h4{
          font-size: 0.8rem;
          text-align: justify;
          br{
            display: none;
          }
  
        }
        ul{
          /* font-size: 0.5vw; */
          
          width: 100%;
          li{
            width: 100%;
            margin-left: 2vw;
  
            font-size: 0.8rem;
          }
        }
      }
      .bottom{
        /* background-color: rgb(82, 82, 144); */
        padding: 1rem;
        h3{
          font-size: 4vw;
        }
        h4{
          font-size: 3vw;
        }
      }
  
    }
    .one{
      .right{
        height: 70%;
      }
    }
    .two{
      .right{
        /* height: 70%; */
        .mid{
          margin-top: 20px;
        }
        ul{
          p{
            font-size: 2vw;
          }
        }
        .bottom{
          display: none;
        }
      }
    }
    .three{
      .right{
        .box{
          h3{
            font-size: 3vw;
          }
          h4{
            font-size: 2vw;
          }
          ul{
            li{
              font-size: 0.7rem;
            }
          }
        }
      }
    }
    .four, .five{
      .right{
       .box{
        /* color: darkblue; */
        h3{
          font-size: 3vw;
        }
        h4{
          font-size: 2.5vw;
        }
       }
        
      }
    }
  }

  .section12{
    height: 70vh;
    .top{
      h1{
        /* font-size: 12vw; */
      }
    }
    .mid{
      gap: 1.5vh;
      #line{
        flex-wrap: wrap;
        /* gap: ; */
        /* background-color: floralwhite; */
        gap: 0vh;
        span{
          font-size: 5.5vw;
          letter-spacing: .5px;
        }
      }
      
      .line1{
        gap: 1.2vw !important;
        justify-content: start !important;

        
        input{
          width: 40vw;
          padding: 1.1vh 0 0.5vh 1.5vw !important;
          height: 35%;
          font-size: 5vw;
        }
      }
      input{
        /* background-color: gold; */
        height: 80%;
        width: 40vw;
        padding: 1.1vh 0 0.5vh 1.5vw !important;
        font-size: 5vw;
      }
      .line2{
        span{
          font-size: 5.5vw;
          letter-spacing: .5px;
        }
        button{
          width: 30vw;
          font-size: 3.2vw !important;
        }
        margin-top: .1vh;
      }
      span{
        font-size: 5vw;
      }
      button{
        padding: 1vh 2.7vw;
      }
      .button{
        padding: 0.6em 2.2em;
      }
      .button>a{
        font-size: 2.3vw;
      }
    }
  }
  .section13{
    /* background-color: gray; */
    .top{
      /* background-color: gold; */
      height: 75%;
      .left{
        flex-wrap: wrap;
        justify-content: center;
        height: 70%;
        /* background-color: darkcyan; */
        gap: 0vw 5vw;
        img:nth-child(1){
          width: 100px;
        }
        img:nth-child(2){
          width: 100px;
        }
        img:nth-child(3){
          width: 70px;
        }
        img:nth-child(4){
          width: 100px;
        }
        img:nth-child(5){
          width: 50px;
        }
        img:nth-child(6){
          width: 80px;
        }
      }
      .right{
        width: 100%;
        height: 10%;
        /* background-color: firebrick; */
        h3{
          font-size: 3.5vw;
          padding: 0vw;
  
        }
        a{
          font-size: 4vw;
          i{
            font-size: 4vw;
          }
        }
      }
    }
    .bottom{
      height: 25%;
      /* background-color: greenyellow; */
      h3{
        font-size: 2.3vw;
      }
    }
  }
}
@media (max-width:528px) {
  nav{
    /* background-color: firebrick; */
    height: 10vh;
  .logo{
    img{
      width:24vw;
      /* background-color: rgb(68, 47, 47); */
    }
  }
  }
  .hero{
    flex-direction: column;
    /* background-color: darkgoldenrod; */
    background: url('assets/f.mp4');
    /* background-color: #000000; */
    position: relative;
    .left{
      width: 100%;
      /* background-color: darkblue; */
      /* height: 100%; */
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      /* display: none; */
      z-index: 56565;
      .top{
        width: 100%;
        height: 30%;
        position: absolute;
        /* background-color: darkcyan; */
        z-index: 656;
        font-size: 3vw;
      }
      .bottom{
        
        h4{
          font-size: 2.5vw;
        }
        h1{
          font-size: 4vw;
          line-height: 0.4 !important;
        }
        .button{
          font-size: 2vw;
          /* padding: 0.7rem 1.3rem; */
        }
      }
    }
   
  }
  
}

@media (max-width:430px) {
  .hero{
    /* background-color: firebrick; */

    flex-direction: column;
    /* background-color: darkgoldenrod; */
    .left{
      width: 100%;
      /* background-color: darkblue; */
      .top{
        font-size: 5vw;
        /* background-color: darkcyan; */
        /* padding: 10vh 15vw; */
        /* line-height: 0.4; */
      }
      .bottom{
        h4{
          font-size: 3vw;
        }
        h1{
          font-size: 5vw;
          line-height: 0 !important;
        }
      }
    }
    #bg-video {
      top: 5%;
      height: 90vh;
      right: 23rem;
      /* width: 100%; */
      /* background-color: darkblue; */
      display: none;
  }
  .right{
    /* display: none; */
    width: 100%;
    height: 100%;
    #bg-phone{
     display: block;
     width: 100vw;
     height: 100vh;
     position: relative;
     left: 0;
     top: 0;
     bottom: 0;
     object-fit:cover;
   }
   }
  }
  .scroller{
    height: 10vh;
    /* background-color: transparent; */
  }
  .section2{
    height: 60vh;
    padding: 1vh 2vw;
    /* background-color: firebrick; */
    .container{
      height: 100%;
      flex-direction: column;
      /* background-color: salmon; */
      padding: 2vh 2vw;

      .left{
        width: 100%;
        height: 40%;
        margin-top: 1rem;
        video{
          width: 70%;
          /* height: 70%; */
        }
      }
      .right{
        padding: 1vh 2vw;
        width: 100%;
        height: 60%;
        /* background-color: darkblue; */
        margin-top: 3rem;
        h3{
          font-size: 4.3vw;
        }
        .button>a{
          font-size: 3vw;
        }
      }
    }
  }
  .section3{
    flex-direction: column;
    /* background-color: gold; */
    .left{
      /* background-color: gainsboro; */
      width: 100%;
      p{
        font-size: 4.7vw;
        br{
          display: none;
        }
      }
      button>a{
        font-size: 3.5vw;
      }
    }
    .right{
      /* background-color: hotpink; */
      width: 100%;

      h4{
        font-size: 4.5vw;
      }
      h1{
        margin-top: 0;
        font-size: 15vw;
      }
    }
  }
  .section11{
    
    .right{
      .top{
      }
      .mid{
      }
      .box{
        h4{
          font-size: 0.6rem;
        }
        ul{
          li{
            font-size: 0.6rem;
          }
        }
      }
    .three{
      .right{
        .box{
          h4{
            font-size: 1.5vw;
          }
          ul{
            li{
              font-size: 0.6rem;
            }
          }
        }
      }
    }
   
  }
  
}
}
@media only screen and (max-width:400px)
{
 nav{
  /* background-color: gold; */
  height: 10vh;
  .logo{
    img{
      width:24vw;
      /* background-color: rgb(68, 47, 47); */
    }
  }
 } 
 .hero{
  /* background-color: firebrick; */
  h1{
    line-height: 0.1 !important;
  }
 }
 .scroller{
  /* margin-top: 1rem; */
  height: 10vh;
  /* background-color: transparent; */
  .m-scroll{
    padding: 1rem;
  }
}
.section2{
  /* background-color: rgb(19, 168, 106); */
  /* margin-top: 10px; */
  height: 80vh;
  padding: 6vh 2vw;
  .container{
    height: 100%;
    .left{
      /* background-color: gold; */
      video{
        width: 60%;
      }
    }
    .right{
      /* background-color: fuchsia; */
      h3{
        font-size: 4vw;
      }
    }
  }
}
.section3{
  height: 90vh;
  .left{
    p{
      font-size: 5vw;
    }
  }
  .right{
    h4{
      font-size: 5vw;
    }
    h1{
      font-size: 15vw;
    }
  }
}
.section7{
  height: 60vh;
  .left{
    p{
      font-size: 3.5vw;
    }
    h1{
      font-size: 7vw;
    }
    h2{
      font-size: 10vw;
      img{
        width: 100%;
        height: 5vh;
      }
    }
  }
  .right{
    p{
      font-size: 3.5vw;
    }
    .button{
      font-size: 25px;
      padding: 0.5rem 1rem;
    }
    button>a{
      font-size: 2.3vw;
    }
  }
}
.section11{
  #page{
  padding: 3vh 2vw 3vh 2vw;
    /* background-color: rgb(0, 115, 255); */
    flex-direction: column;
    justify-content: center;
    height: 100vh;
  }
 
  .left{
    /* padding: 5vh 0; */
    /* background-color: firebrick; */
    width: 100%;
    height: 30%;
    padding: 1rem;
    gap: 0.3rem;
    /* border-bottom: 3px solid violet; */
    h2{
      font-size: 5vw;
      width: 100%;
      /* background-color: hotpink; */
      line-height: 0;

      br{
        display: none;
      }
    }
    h5{
      font-size: 3vw;
      text-align: start;
      /* margin-top: 10px; */
      /* line-height: 1% */
      /* background-color: gold; */
      br{
        display: none;
      }
    }
    img{
      width: 12%;
      /* background-color: gainsboro; */
      /* height: 30%; */
    }
  }
  .right{
    /* background-color: rgb(123, 106, 6); */
    width: 100%;
    height: 70%;
    padding: 0;
    .top{
      /* background-color: rgb(13, 13, 176); */
      justify-content: space-between;
      display: flex;
      flex-direction: row;
      /* align-items: center; */
      gap: 0.5rem;
      padding: 1rem;

    }
    .mid{
      /* background-color: firebrick; */
      justify-content: space-between;
      /* align-items: center; */
      gap: 0.5rem;
      flex-direction: row;
      padding: 1rem;

    }
    
    .box{
      width: 50%;
      height: 100%;
      /* background-color: forestgreen; */
      gap: 1vh;
      padding: 0.1rem;
      h3{
        font-size: 3.5vw;
      }
      h4{
        font-size: 2.5vw;
        text-align: justify;
        br{
          display: none;
        }

      }
      ul{
        /* font-size: 0.5vw; */
        
        width: 100%;
        li{
          width: 100%;
          margin-left: 2vw;

          font-size: 1.7vw;
        }
      }
    }
    .bottom{
      /* background-color: rgb(82, 82, 144); */
      padding: 1rem;
      h3{
        font-size: 4vw;
      }
      h4{
        font-size: 3vw;
      }
    }

  }
  .one{
    .right{
      height: 70%;
    }
  }
  .two{
    .left{
      h2{
        font-size: 3.7vw;
      }
    }
    .right{
      /* height: 70%; */

      .mid{
        margin-top: 20px;
      }
      ul{
        p{
          font-size: 2vw;
        }
      }
      .bottom{
        display: none;
      }
    }
  }
  .three{
    .right{
      height: 70%;
      /* padding: 0; */
      .top{ 
        /* padding: 0; */
        justify-content: space-between;
      }
      .mid{
        /* padding: 0; */
        margin-top: 10px;
      }
      .box{
        h3{
          font-size: 2.5vw;
        }
        h4{
          font-size: 1.5vw;
        }
        ul{
          li{
            font-size: 0.7rem;
            text-align: start;
            br{
              display: none;
            }
          }
        }
      }
    }
  }
  .four, .five{
    .right{
     .box{
      /* color: darkblue; */
      h3{
        font-size: 3vw;
      }
      h4{
        font-size: 2.5vw;
      }
     }
      
    }
  }
}
}