@media screen and (min-width: 360px) and (max-width: 998px) {
  .navbar {
    background: #6B6355 !important;
  }

  .navbar-toggler {
    border: none;
    background-color: transparent;
  }

  .navbar-toggler-icon {
    background-image: none;
  }

  .navbar-toggler-icon::before {
    content: "\f0c9";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: white;
    font-size: 1.5rem;
  }

  .navbar-toggler:hover,
  .navbar-toggler:focus {
    background-color: transparent;
    box-shadow: none;
    border: none;
  }
  .nav-link-navbar,
  .nav-link-navbar:hover,
  .nav-link-navbar:focus {
    color: white;
    text-decoration: none;
    padding-bottom: 20px;
    padding-left: 35%;
    font-size: 15px;
  }

  .logo-mob {
    width: 81.2px;
    height: 66px;
  }
  .banner-content-main {
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translateY(0%);
    color: #fff;
    z-index: 10;
    padding: 125%;
  }
  .banner-button {
    border-radius: 312.5%;
    background: #EFE79C;
    margin-right: 100%;
    display: flex;
    padding: 100% 66.88% 100% 0;
    width: 893.75%;
    box-sizing: border-box;
    padding-left: 187.5%;
    border: none;
  }
  .banner-img-1 {
    background-image: url('assets/vectors/subtract_4_x2.svg');
    height: 3437.5%;
    position: relative;
  }
  .banner-img-2 {
    background-image: url('assets/images/rectangle_121.jpeg');
    height: 2812.5%;
  }
  .banner-img-3 {
    border-radius: 531.25%;
    border: 15.63%;
    background: url('assets/images/rectangle_7.jpeg') 50% / cover no-repeat;
    position: absolute;
    top: 4681.25%;
    right: 1218.75%;
    width: 625%;
    height: 625%;
  }
  .banner-img-4 {
    border-radius: 3125% 3125% 100% 100%;
    border: 15.63%;
    background: url('assets/images/rectangle_6.png') 50% / cover no-repeat;
    position: absolute;
    right: 375%;
    bottom: 31.25%;
    width: 937.5%;
    height: 937.5%;
  }
  .curve {
    bottom: 375%;
    left: 231.25%;
    border-radius: 531.25%;
    border: 15.63%;
    background-color: #FFF7E9;
    position: absolute;
    width: 687.5%;
    height: 687.5%;
  }
/* .arrow {
  border-radius: 50px;
  background: #6B6355;
  position: absolute;
  padding: 37px 0px 37px 0;
  width: 100px;
  height: 100px;
  top: -62.7%;
  left: 37.2%;
  box-sizing: border-box;
}
.arrow-symbol {
  background: url("assets/vectors/arrow_up_19_x2.svg");
  position: absolute;
  top: -59%;
  left: 41%;
  color: white !important;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
} */
    .hero-image-right {
        position: absolute;
        height: 10vh;
        object-fit: cover;
        top: 0%;
    }
    .section-1 {
        position: relative;
        background-color: #FFF7E9;
        height: 85%;
        padding: 20px;
    }
    .sec1-content {
        /* position: absolute; */
        align-items: center;
        justify-content: center;
        padding-top: 20px;
    }
    .image-1 {
        position: absolute;
        top: 75%;
        left: 0;
        border-radius: 0 250px 250px 250px;
        /* background: url(assets/images/rectangle_14.jpeg); */
        background-image: url('assets/PNG/04.png');
        /* object-fit: cover !important; */
        background-position: center;
        margin-bottom: 50px;
        align-self: flex-start;
        width: 100px;
        height: 150px;
    
    }
    .image-2 {
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 0 0 0 150px;
        background: none;
        margin-bottom: 80px;
        width: 354px;
        height: 300px;
    }
    .image-3 {
        position: absolute;
        bottom: 5%;
        left: 40%;
        border-radius: 500px 500px 48px 48px;
        background: url('assets/images/rectangle_9.jpeg');
        background-position: center;
        align-self: flex-end;
        width: 100px;
        height: 150px;
        margin-left: 0px;
    }
    .image-4 {
        position: absolute;
        bottom: 5%;
        right: 0;
        border-radius: 250px 250px 0 250px;
        background: url('assets/PNG/07.png');
        background-position: center;
        width: 100px;
        height: 150px;
    }
    /* section-2 */
    .section-2 {
      padding: 20px;
    }
    .sec2-img-1 {
        background-image: url("assets/vectors/group_39_x2.svg");
        background-repeat: no-repeat;
        height: 100px;
        width: 50%;
        margin-bottom: 20px;
    }
    .sec2-img-2 {
        background-image: url("assets/images/haefele_logo_1.png");
        background-repeat: no-repeat;
        margin: 0px 0 0 0;
        height: 32px;
        width: 50%;
        margin-left: 20px;
    }
    .section-3 {
        padding: 20px !important;
    }
    .sec3-images {
      padding-left: 10px;
    }
    .sec3-img1 {
      border-radius: 300px 300px 48px 48px;
      background: url('assets/images/rectangle_18.png') 50% / cover no-repeat;
      width: 100px;
      height: 127px;
      margin-right: 5px;
    }
    .sec3-img2 {
      border-radius: 500px 500px 48px 48px;
      background: url('assets/images/rectangle_191.png') 50% / cover no-repeat;
      width: 100px;
      height: 127px;
      margin-right: 5px;
    }
    .sec3-img3 {
      border-radius: 300px 300px 48px 48px;
      background: url('assets/images/rectangle_21.jpeg') 50% / cover no-repeat;
      width: 100px;
      height: 127px;
    }
      .sec3-images {
        justify-content: space-evenly;
        padding-left: 10px;
      }
      .accordian-image
      {
        height: 200px;
        margin-left: 25%;
      }
      .section-4 {
        padding: 20px;
      }
      .sec4-img1 {
        border-radius: 100px;
        background: url('assets/PNG/14.png');
        position: absolute;
        left: -10px;
        top: -5px;
        width: 70px;
        height: 123px;
      }
       .sec4-img2 {
        border-radius: 500px;
        background: url('assets/PNG/15.png');
        position: absolute;
        right: -20px;
        bottom: -20px;
        width: 84px;
        height: 83px;
      }
      .sec4-main-img {
        width: 300px;
        height: auto;
      }
      .sec5-img1 {
        border-radius: 24px 220px 24px 24px;
        background: url('assets/images/rectangle_151.png') 50% / cover no-repeat;
        margin-right: 130px;
        width: 320px;
        height: 258px;
      }
      .sec5-img2 {
        border-radius: 179px 24px 24px 24px;
        background: url('assets/images/rectangle_166.jpeg') 50% / cover no-repeat;
        width: 320px;
        height: 258px;
        margin-left: 0;
    }
      .sec5-img3 {
        border-radius: 24px 220px 24px 24px;
        background: url('assets/images/rectangle_162.png') 50% / cover no-repeat;
        margin-right: 130px;
        width: 320px;
        height: 258px;
      }
      .sec5-img4 {
        border-radius: 179px 24px 24px 24px;
        background: url('assets/images/rectangle_1610.jpeg') 50% / cover no-repeat;
        width: 320px;
        height: 258px;
        margin-left: 0;
      }
      .sec5-img5 {
        border-radius: 24px 220px 24px 24px;
        background: url('assets/images/rectangle_167.jpeg') 50% / cover no-repeat;
        margin-right: 100px;
        width: 320px;
        height: 258px;
      }
      .numbers {
        /* border-radius: 114.3px; */
        border-radius: 50px;
       background: #6B6355;
       margin-bottom: 12px;
       margin-top: 20px;
       display: flex;
       align-self: flex-start;
       padding: 6px 18.1px;
       box-sizing: border-box;
       color: white;
     }
     .number {
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
       box-sizing: border-box;
     }
      .rhombus {
        border-radius: 6px;
        background: #6B6355;
        transform: rotate(46.254deg);
        position: relative;
        left: 49.2%;
        top: 84px;
        translate: -50% 0;
        width: 22.2px;
        height: 22.2px;
    
      }
      .sec5-line {
        position: absolute;
        left: 49%;
        top: 44px;
        height: 275vh;
        width: 0px;
        background: none;
      }
      .section-6 {
        padding: 20px;
      }
      .sec6-button {
        margin-bottom: 20px;
      }
      .sec6-image {
        border-radius: 500px 500px 16px 16px;
        background: url('assets/images/rectangle_34624353.jpeg') 50% / cover no-repeat;
        width: 280px;
        height: 258px;
        box-shadow: 20px 10px;
    }
    .card1,
    .card2,
    .card3,
    .card4,
    .card5,
    .card6 {
        margin-bottom: 15px;
    }
    .numbers {
      /* border-radius: 114.3px; */
      border-radius: 50px;
      background: #6B6355;
      margin-bottom: 12px;
      display: flex;
      align-self: flex-start;
      padding: 6px 18.1px;
      box-sizing: border-box;
      color: white;
  }
  .section-7 {
    padding: 20px 10px;
  }
  .section-clients {
    padding: 20px;
  }
  .contact-form {
    padding: 20px;
  }
  h1 {
    font-family: Timeless;
    font-size: 32px;
    font-weight: bold;
  }
  h2 {
    font-family: Timeless;
    font-size: 24px;
    font-weight: bold;
  }
  p {
    font-family: regular;
    font-size: 18px;
  }
  h5 {
    font-family: Timeless;
    font-size: 18px;
  }
  button {
    font-family: Timeless;
    font-size: 16px;
    font-weight: bold;
  }
  .upgrading-to-microso-4 {
    font-family: Timeless;
    font-size: 32px;
    font-weight: bold;
  }
  .frame-1686556492 {
    padding-left: 10px;
  }
  .not-all-blank-casset-9 {
    font-family: regular;
    font-size: 18px;
  }
  .card-title {
    font-family: timeless;
    font-size: 20px;
    font-weight: bold;
  }

}
@media screen and (min-width: 997px) and (max-width: 1269px) {
  .banner-img-3 {
    border-radius: 85px;
    border: 2.5px solid #FFFFFF;
    background: url('assets/images/rectangle_7.jpeg') 50% / cover no-repeat;
    position: absolute;
    top: 149px;
    right: 255px;
    width: 100px;
    height: 100px;
  }
  .banner-img-4 {
    border-radius: 500px 500px 16px 16px;
    border: 2.5px solid #FFFFFF;
    background: url('assets/images/rectangle_6.png') 50% / cover no-repeat;
    position: absolute;
    right: 60px;
    bottom: 5px;
    width: 150px;
    height: 150px;
  }
  .curve {
    bottom: -60px;
    left: 35%;
    border-radius: 85px;
    border: 2.5px solid #FFF7E9;
    background-color: #FFF7E9;
    position: absolute;
    width: 130px;
    height: 130px;
  }
  .arrow {
    border-radius: 50px;
    background: #6B6355;
    position: absolute;
    padding: 37px 0px 37px 0;
    width: 100px;
    height: 100px;
    top: -8%;
    left: 21%;
    box-sizing: border-box;
  }
  .arrow-symbol {
    background: url("assets/vectors/arrow_up_19_x2.svg");
    position: absolute;
    top: -4%;
    left: 23.5%;
    color: white !important;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
  }

}
@media screen and (min-width: 998px) and (max-width: 1201px) {
  .rhombus {
    border-radius: 0px;
    background: white;
    transform: rotate(46.254deg);
    position: relative;
    left: 49.2%;
    top: 84px;
    translate: -50% 0;
    width: 0px;
    height: 0px;

  }
  .sec5-line {
    position: absolute;
    left: 49%;
    top: 44px;
    height: 0vh;
    width: 0px;
    background: none;
  }
  .sec3-img1 {
    border-radius: 300px 300px 48px 48px;
    background: url('assets/images/rectangle_18.png') 50% / cover no-repeat;
    width: 250px;
    height: 250px;
    margin-right: 5px;
    margin-left: 7px;
  }
  .sec3-img2 {
    border-radius: 500px 500px 48px 48px;
    background: url('assets/images/rectangle_191.png') 50% / cover no-repeat;
    width: 250px;
    height: 250px;
    margin-right: 5px;
  }
  .sec3-img3 {
    border-radius: 300px 300px 48px 48px;
    background: url('assets/images/rectangle_21.jpeg') 50% / cover no-repeat;
    width: 250px;
    height: 250px;
  }
    .sec3-images {
      padding-left: 10px;
    }
    .sec4-main-img {
      width: 450px;
      height: auto;
    }
    .sec4-img1 {
      border-radius: 100px;
      background: url('assets/PNG/14.png');
      position: absolute;
      left: 0px;
      top: 0px;
      width: 108px;
      height: 173px;
  }
  .sec4-img2 {
    border-radius: 500px;
    background: url('assets/PNG/15.png');
    position: absolute;
    right: -10px;
    bottom: -13px;
    width: 104px;
    height: 103px;
}
}
@media screen and (min-width: 998px) and (max-width: 1061px) {
  .image-2 {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 0 0 150px;
    background: url('assets/images/rectangle_81.png') 50% / cover no-repeat;
    margin-bottom: 80px;
    width: 304px;
    height: 300px;
}
}
@media screen and (min-width: 360px) and (max-width: 741px) {
  .curve {
    display: none;
    bottom: -60px;
    left: 35%;
    border-radius: 85px;
    border: 2.5px solid white;
    background-color: white;
    position: absolute;
    width: 130px;
    height: 130px;
  }
  .arrow {
    display: none;
    border-radius: 50px;
    background: #6B6355;
    position: absolute;
    padding: 37px 0px 37px 0;
    width: 100px;
    height: 100px;
    top: -68.5%;
    left: 38%;
    box-sizing: border-box;
  }
  .arrow-symbol {
    background: url("assets/vectors/arrow_up_19_x2.svg");
    position: absolute;
    top: -75%;
    left: 47%;
    color: white !important;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
  }
}
/* @media screen and (max-width: 912px) {
  .section-1 {
    position: relative;
    background-color: rgb(255, 247, 233);
    height: 50vh;
    padding: 20px;
}
.arrow {
  border-radius: 50px;
  background: #6B6355;
  position: absolute;
  padding: 37px 0px 37px 0;
  width: 100px;
  height: 100px;
  top: -74%;
  left: 36.5%;
  box-sizing: border-box;
}
.arrow-symbol {
  background: url("assets/vectors/arrow_up_19_x2.svg");
  position: absolute;
  top: -70%;
  left: 40%;
  color: white !important;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
}
.sec3-img1 {
  border-radius: 300px 300px 48px 48px;
  background: url(assets/images/rectangle_18.png) 50% / cover no-repeat;
  width: 250px;
  height: 250px;
  margin-right: 5px;
  margin-left: 70px !important;
}
.sec3-img2 {
  border-radius: 500px 500px 48px 48px;
  background: url(assets/images/rectangle_191.png) 50% / cover no-repeat;
  width: 250px;
  height: 250px;
  margin-right: 5px;
}
.sec3-img3 {
  border-radius: 300px 300px 48px 48px;
  background: url(assets/images/rectangle_21.jpeg) 50% / cover no-repeat;
  width: 250px;
  height: 250px;
}
.sec4-main-img {
  width: 600px;
  height: auto;
}
.sec4-img1 {
  border-radius: 100px;
  background: url(./assets/PNG/14.png);
  background-repeat: no-repeat;
  position: absolute;
  left: -10px;
  top: -5px;
  width: 128px;
    height: 203px;
}
 .sec4-img2 {
  border-radius: 500px;
  background: url('./assets/PNG/15.png');
  position: absolute;
  right: 80px;
  bottom: -20px;
  width: 104px;
    height: 103px;
}
}
@media screen and (max-width: 768px) {
  .arrow {
    border-radius: 50px;
    background: #6B6355;
    position: absolute;
    padding: 37px 0px 37px 0;
    width: 100px;
    height: 100px;
    top: -70%;
    left: 36.5%;
    box-sizing: border-box;
  }
  .arrow-symbol {
    background: url("assets/vectors/arrow_up_19_x2.svg");
    position: absolute;
    top: -66%;
    left: 41%;
    color: white !important;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
  }
  .section-1 {
    position: relative;
    background-color: #FFF7E9;
    height: 70vh;
    padding: 20px;
}
.sec3-img1 {
  border-radius: 300px 300px 48px 48px;
  background: url(assets/images/rectangle_18.png) 50% / cover no-repeat;
  width: 220px;
  height: 250px;
  margin-right: 5px;
  margin-left: 70px !important;
}
.sec3-img2 {
  border-radius: 500px 500px 48px 48px;
  background: url(assets/images/rectangle_191.png) 50% / cover no-repeat;
  width: 220px;
  height: 250px;
  margin-right: 5px;
}
.sec3-img3 {
  border-radius: 300px 300px 48px 48px;
  background: url(assets/images/rectangle_21.jpeg) 50% / cover no-repeat;
  width: 220px;
  height: 250px;
}
.sec4-main-img {
  width: 350px;
  height: auto;
}
.sec4-img1 {
  border-radius: 100px;
  background: url(./assets/PNG/14.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0px;
  top: -7px;
  width: 68px;
    height: 143px;
}
 .sec4-img2 {
  border-radius: 500px;
  background: url('./assets/PNG/15.png');
  position: absolute;
  right: -10px;
  bottom: -20px;
  width: 84px;
    height: 84px;
}
} */
@media screen and (min-width: 992px) and (max-width: 998px) {
  .curve {
    bottom: -60px;
    left: 37%;
    border-radius: 85px;
    border: 2.5px solid #FFF7E9;
    background-color: #FFF7E9;
    position: absolute;
    width: 110px;
    height: 110px;
  }
  .arrow {
    border-radius: 50px;
    background: #6B6355;
    position: absolute;
    padding: 37px 0px 37px 0;
    width: 100px;
    height: 100px;
    top: -7.9%;
    left: 21.5%;
    box-sizing: border-box;
  }
  .arrow-symbol {
    background: url("assets/vectors/arrow_up_19_x2.svg");
    position: absolute;
    top: -4%;
    left: 24.5%;
    color: white !important;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
  }
  .banner-content-main {
    padding-top: 160px;
  }
}
@media screen and (min-width: 360px) and (max-width: 998px) {
  .curve {
    bottom: -60px;
    left: 37%;
    border-radius: 85px;
    border: 2.5px solid #FFF7E9;
    background-color: #FFF7E9;
    position: absolute;
    width: 110px;
    height: 110px;
  }
  .arrow {
    border-radius: 50px;
    background: #6B6355 !important;
    position: absolute;
    padding: 37px 0px 37px 0;
    width: 100px;
    height: 100px;
    top: -44.8% !important;
    left: 36.9%;
    box-sizing: border-box;
  }
  .arrow-symbol {
    background: url("assets/vectors/arrow_up_19_x2.svg");
    position: absolute;
    top: -42% !important;
    left: 42% !important;
    color: red !important;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
  }
  .section-1 {
    position: relative;
    background-color: #FFF7E9;
    height: 100vh;
    padding: 20px;
}

}
@media screen and (min-width: 443px) and (max-width: 998px) {
  /* .arrow {
    border-radius: 50px;
    background: #6B6355;
    position: absolute;
    padding: 37px 0px 37px 0;
    width: 100px;
    height: 100px;
    top: -89.4%;
    left: 37.2%;
    box-sizing: border-box;
  } */
  .arrow-symbol {
    background: url("assets/vectors/arrow_up_19_x2.svg");
    position: absolute;
    top: -84%;
    left: 40.5%;
    color: red !important;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
  }
}
@media screen and (min-width: 360px) and (max-width: 671px) {
/*   
.arrow {
  border-radius: 50px;
  background: #6B6355;
  position: absolute;
  padding: 37px 0px 37px 0;
  width: 100px;
  height: 100px;
  top: -48.1%;
  left: 37.3%;
  box-sizing: border-box;
} */
.arrow-symbol {
  background: url("assets/vectors/arrow_up_19_x2.svg");
  position: absolute;
  top: -45%;
  left: 44.9%;
  color: red !important;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
}
}
@media screen and (min-width: 360px) and (max-width: 470px) {
  .swiper-cont {
    padding: 0 10px;
  }
}
@media screen and (min-width: 669px) and (max-width: 998px) {
  .arrow {
    border-radius: 50px;
    background: #6B6355;
    position: absolute;
    padding: 37px 0px 37px 0;
    width: 100px;
    height: 100px;
    top: -62.7%;
    left: 37.1%;
    box-sizing: border-box;
  }
  .arrow-symbol {
    background: url("assets/vectors/arrow_up_19_x2.svg");
    position: absolute;
    top: -59%;
    left: 40.9%;
    color: red !important;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
  }
}