/*media query */

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1400px) {
  .open-button {
    margin-right: unset !important;
  }

  .main-header::before {
    /*background: url(../../assets/images/form-bg.webp);*/
    background-size: cover;
    width: 40vw;
    /*height: 572px;*/
  }

  .writer-box img {
    top: -46px;
    left: 145px;
  }

  .topbar ul:nth-child(2) {
    gap: 0 !important;
  }


}

/* 
              ##Device = Laptops, Desktops
              ##Screen = B/w 1025px to 1280px
            */

@media (min-width: 1200px) {
  /*.container {*/
  /*  max-width: 90% !important;*/
  /*}*/


}

@media (min-width: 1025px) and (max-width: 1399px) {

  a.navbar-brand img {
    width: 150px;
  }
}

@media (max-width: 1400px) {
  .main-header::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    background: url(../../assets/images/form-bg.webp);
    width: 500px;
    height: 100%;
  }

  .service-box p:first-of-type {
    font-size: 16px !important;
  }
}

/* 
              ##Device = Tablets, Ipads (portrait)
              ##Screen = B/w 1024px to 1366px
            */

@media (min-width: 1200px) and (max-width: 1365px) {

  .main-header::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    background: url(../../assets/images/form-bg.webp);
    width: 430px;
    height: 100%;
  }
}

@media (max-width: 1200px) {
  /* .container {
    max-width: 90% !important;
  } */

  form {
    position: relative;
    margin-top: 60px;
  }

  .main-header::before {
    width: 350px;
  }
}

/* 
              ##Device = Tablets, Ipads (portrait)
              ##Screen = B/w 768px to 1024px
            */

@media (max-width: 992px) {
  .main-header::before {
    display: none;
  }

  .form-content {

    color: white;
  }

  .header-bg .para {
    color: white;
  }

  .cta img.position-absolute {
    display: none;
  }
}

/* 
              ##Device = Most of the Smartphones Mobiles (Portrait)
              ##Screen = B/w 320px to 479px
            */

@media (min-width: 320px) and (max-width: 480px) {
  .main-header::before {
    content: unset;
  }

  .navbar {
    background-color: #000;
  }

  .navbar .open-button {
    color: #fff !important;
  }

  .writer-box img {
    top: -46px;
    left: 140px;
  }

  .review-content li {
    flex: 100%;
  }

  .review-last {
    background-size: cover;
  }

  .review-last img {
    width: 100%;
    position: unset;
  }

  .content-section-2 .col-md-4 {
    background: var(--primary-color);
    color: #fff;
  }

  .content-section-2 li a {
    color: #fff !important;
  }

  .about-bg img {
    width: 100%;
  }

}