@media only screen and (max-width: 1200px) {
  .nav-link {
    padding-right: 18px !important;
  }
}

@media only screen and (max-width: 1024px) {
  /* nav part */
  .navbar-brand {
    width: 180px !important;
  }

  .nav-link {
    padding: 16px 0px !important;
  }

  .navbar-sm {
    display: block !important;
  }

  /* banner part */

  #banner .main {
    height: 700px;
  }

  .banner-slider {
    padding: 20px;
    position: absolute;
    top: 78%;
    left: 50%;
    transform: translateX(-50%);
  }
  .mySwiper {
    width: 100%;
  }

  #package .title {
    width: 100%;
  }

  /* payment */

  #payment .title h3 {
    width: 100%;
  }

  #payment .contant .part-1 {
    display: block;
  }

  #payment .contant .part-2 {
    display: block;
  }

  #payment .contant .part-2 .right {
    width: 100%;
  }

  /* outlook */
  #outlook .amrtab {
    display: grid;
    gap: 20px;
  }

  /* installation part */
  #installation .content .sub-flex {
    margin: 12px 20px;
  }
  /* customization */
  #part-four .sliders {
    display: none;
  }
  #part-four .myslider .slick-dots {
    bottom: -32px;
  }
  #part-four .myslider .fa-arrow-right {
    width: 30px;
    height: 30px;
    bottom: -55px;
    right: 18%;
  }
  #part-four .myslider .fa-arrow-left {
    width: 30px;
    height: 30px;
    bottom: -55px;
    left: 26%;
  }
}

@media only screen and (max-width: 576px) {
  /* nav part */

  .navbar-brand {
    width: 120px !important;
  }

  .nav-link {
    padding: 16px 0px !important;
  }

  .navbar-sm {
    display: block !important;
  }

  /* banner part */

  #banner .main {
    height: 580px !important;
  }

  #banner .main .content h2 {
    font-size: 42px;
    width: 100%;
    line-height: 52px;
  }
  #banner .main .content p {
    font-size: 16px;
    width: 100%;
  }

  #banner .main .content a {
    padding: 12px 26px;
  }
  .banner-slider {
    padding: 20px;
    position: absolute;
    top: 70% !important;
    left: 50%;
    transform: translateX(-50%);
  }
  .mySwiper {
    width: 100%;
    padding: 0px 12px;
  }

  /* package part */

  #package {
    margin-top: 100px;
  }

  #package .title {
    width: 100%;
  }

  #package .title h3 {
    font-size: 24px;
  }

  /* awesome */

  #awesome {
    margin: 60px 0px;
  }

  #awesome .left p {
    width: 100%;
  }

  /* payment */

  #payment {
    margin: 60px 0px;
  }

  #payment .title h3 {
    width: 100%;
    font-size: 36px;
    line-height: 48px;
  }

  #payment .contant .part-1 {
    display: block;
  }

  #payment .contant .part-1 .right h3 {
    width: 100%;
    margin-top: 16px;
  }

  #payment .contant .part-1 .right p {
    width: 100%;
  }

  #payment .contant .part-1 .right .buttons {
    flex-wrap: wrap;
    gap: 8px;
  }

  #payment .contant .part-1 .right .buttons a {
    margin-right: 0px;
  }

  #payment .contant .part-2 {
    display: block;
    margin-top: 40px;
  }

  #payment .contant .part-2 .right h3 {
    width: 100%;
    margin-top: 16px;
    text-align: left;
  }
  #payment .contant .part-2 .right {
    width: 100%;
    display: block;
  }

  #payment .contant .part-2 .right p {
    width: 100%;
    text-align: left;
  }

  #payment .contant .part-2 .right .buttons {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }
  #payment .contant .part-2 .right .buttons a {
    margin-left: 0px;
  }

  /* outlook */
  #outlook {
    margin-bottom: 60px;
  }

  #outlook .amrtab {
    display: grid;
    gap: 20px;
  }

  /* cart */

  #cart .partion .content h6 {
    font-size: 18px;
    line-height: 28px;
  }
  #cart .partion .content .green {
    font-size: 18px;
    line-height: 28px;
  }

  #cart .partion .content p {
    font-size: 12px;
    line-height: 18px;
  }

  /* licence */

  #licence {
    padding: 60px 0px;
  }

  /* skill */

  #skill {
    padding: 60px 0px;
  }

  /* installtion */
  #installation .title {
    margin-top: 60px;
  }

  #installation .top h3 {
    font-size: 32px;
    line-height: 44px;
  }

  #installation .content .sub-flex {
    display: block;
    margin: 12px 20px;
  }

  /* journey */

  #journey .ancor {
    display: block;
  }

  #journey .ancor a {
    padding: 12px 18px;
    margin-right: 8px;
  }

  /* feature part */
  #feature .featuretab {
    display: flex;
    /* justify-content: space-around; */
    gap: 20px;
  }

  #feature .partion {
    padding: 16px 0px;
  }

  #feature .featuretab .nav-item button {
    padding: 12px 20px !important;
  }

  /* feature-journey part */
  #feature .partion p {
    font-size: 18px;
    line-height: 32px;
  }

  #feature-journey .ancor {
    display: block;
  }
  #feature-journey .ancor a {
    padding: 12px 18px;
    margin-right: 8px;
  }

  /* ABOUT PAGE */
  #about-first h3 {
    font-size: 36px;
    line-height: 56px;
  }

  #about-first h6 {
    font-size: 18px;
    line-height: 24px;
  }

  #about-sec .left .heading {
    font-size: 36px;
    line-height: 56px;
  }

  #about-forth .left h3 {
    font-size: 36px;
    line-height: 56px;
  }

  #about-service .main {
    padding: 60px 5px;
  }

  #about-contact .title {
    display: block;
  }

  #about-contact .title h3 {
    font-size: 38px;
  }

  #about-contact .title p {
    font-size: 16px;
  }

  #about-contact .content {
    padding: 60px 0px;
  }

  #about-contact .content .main {
    align-items: center;
    margin-top: 60px;
  }
  #about-contact .content .submit-btn {
    width: 100%;
  }

  /* customization part */
  #part-one {
    margin-top: 0px;
  }

  #part-one .main h3 {
    font-size: 32px;
  }

  #part-four .sliders {
    display: none;
  }
  #part-four .myslider .slick-dots {
    bottom: -32px;
  }
  #part-four .myslider .fa-arrow-right {
    width: 30px;
    height: 30px;
    bottom: -36px;
    right: 18%;
  }
  #part-four .myslider .fa-arrow-left {
    width: 30px;
    height: 30px;
    bottom: -36px;
    left: 26%;
  }

  #part-five .testimonial .middle p {
    font-size: 16px;
  }
  #part-five .testimonial .bottom h3 {
    font-size: 18px;
  }
}

@media (max-width: 375px) {
  #feature-journey .ancor a {
    display: block;
    margin-bottom: 20px;
  }
  #feature-journey .left h3 {
    font-size: 32px;
  }
  #feature-journey .left p {
    padding: 16px 0px;
    font-size: 14px;
  }
}