/*==========> XS + SM : < 768px (MOBILE) ==========*/
@media (max-width: 767.98px) {
  /* GLOBAL */
  :root {
    --section-spacer: 5em;
    --section-title-spacer: 3em;
  }
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 32px;
  }
  h3 {
    font-size: 24px;
  }
  h4 {
    font-size: 20px;
  }
  h5 {
    font-size: 18px;
  }
  h6 {
    font-size: 14px;
  }
  body {
    font-size: 14px;
  }

  .card-title {
    font-size: 24px;
  }
  /* GLOBAL// */

  .offcanvas-body {
    padding-top: 7em;
  }

  /* service */
  .service-equal {
    height: auto !important;
  }

  /* features */
  .features-area {
    min-height: auto;
    padding-top: calc(var(--section-spacer) * 1.5);
  }
  .features-pop {
    position: relative;
    left: auto;
    right: auto !important;
    top: auto !important;
    width: unset;
    max-width: none;
    margin-top: 0.5em;
  }

  .features-pop .card-body,
  .features-pop .card-header {
    width: 100%;
  }
  .features-pops {
    margin: 7.5em 1.5rem 0;
    display: flex;
    flex-direction: column;
  }

  .features-pops .features-pop .card-header {
    justify-content: space-between !important;
  }

  .card.py-4,
  .card.px-4,
  .card.px-5,
  .card-img-overlay.px-4,
  .card-img-overlay.px-5,
  .card-body.px-4,
  .card-body.px-5 {
    padding-left: 2em !important;
    padding-right: 2em !important;
  }
  .card.py-4,
  .card.py-5,
  .card-img-overlay.py-4,
  .card-img-overlay.py-5,
  .card-body.py-4,
  .card-body.py-5 {
    padding-top: 2em !important;
    padding-bottom: 2em !important;
  }
  .card.p-4,
  .card.p-5,
  .card-img-overlay.p-4,
  .card-img-overlay.p-5,
  .card-body.p-4,
  .card-body.p-5 {
    padding: 2em !important;
  }

  .cta-area .card-img-top {
    margin-top: -5%;
  }

  /* product */
  .product-area.clip-bottom-end {
    clip-path: none;
  }

  /* blog */
  .fs-4 {
    font-size: 1.1rem !important;
  }

  /* inner-page */
  .inner-page-content {
    margin-top: 6em;
  }
}

/*==========> XS + SM + MD : < 991px ==========*/
@media (max-width: 991.98px) {
}

/*========== MD + LG + XL : 768px TO < 1400px (MIDDLE) ==========*/
@media (min-width: 768px) and (max-width: 1399.98px) {
  /* GLOBAL */
  h1 {
    font-size: 50px;
  }
  h2 {
    font-size: 42px;
  }
  h3 {
    font-size: 32px;
  }
  h4 {
    font-size: 25px;
  }
  h5 {
    font-size: 20px;
  }
  h6 {
    font-size: 15px;
  }
  body {
    font-size: 15px;
  }
  /* GLOBAL// */

  .offcanvas-body {
    padding-top: 7em;
  }

  .navbar-brand {
    width: 14em;
  }

  .card.py-4,
  .card.px-4,
  .card.px-5,
  .card-img-overlay.px-4,
  .card-img-overlay.px-5,
  .card-body.px-4,
  .card-body.px-5 {
    padding-left: 2.2em !important;
    padding-right: 2.2em !important;
  }
  .card.py-4,
  .card.py-5,
  .card-img-overlay.py-4,
  .card-img-overlay.py-5,
  .card-body.py-4,
  .card-body.py-5 {
    padding-top: 2.2em !important;
    padding-bottom: 2.2em !important;
  }
  .card.p-4,
  .card.p-5,
  .card-img-overlay.p-4,
  .card-img-overlay.p-5,
  .card-body.p-4,
  .card-body.p-5 {
    padding: 2.2em !important;
  }

  .fs-4 {
    font-size: 1.2rem !important;
  }
  .fs-1 {
    font-size: 1.8rem !important;
  }

  .features-pops {
    width: fit-content;
    margin-left: auto;
    margin-right: 56px;
    margin-top: -350px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .features-pops .features-pop .card-header {
    justify-content: space-between !important;
    width: 400px !important;
  }

  .justify-content-end {
    justify-content: space-between !important;
  }

  .features-pops .features-pop {
    position: static !important;
  }
}

/*==========> MD : 768px TO < 991px ==========*/
@media (min-width: 768px) and (max-width: 991.98px) {
  /* GLOBAL */
  :root {
    --container-width: 760px;
  }
  /* GLOBAL// */
}

/*==========> LG : 992px TO < 1200px. ==========*/
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* GLOBAL */
  :root {
    --container-width: 980px;
  }
  /* GLOBAL// */
}

/*==========> LG AND GREATER. ==========*/
@media (min-width: 992px) {
  .p-lg-6,
  .px-lg-6 {
    padding-left: 3.75rem !important;
    padding-right: 3.75rem !important;
  }
  .p-lg-6,
  .py-lg-6 {
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
  }
  .inner-page-wrapper .col-lg-9 {
    width: 71.5%;
  }
  .inner-page-wrapper .col-lg-3 {
    width: 28.5%;
  }
}

/*==========> XL : 1200px TO < 1400px ==========*/
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* GLOBAL */
  :root {
    --container-width: 1190px;
  }
  /* GLOBAL// */
}

/*==========> SM : 576px TO < 768px ==========*/
@media (min-width: 576px) and (max-width: 767.98px) {
  /* GLOBAL */
  :root {
    --container-width: 460px;
  }
  /* GLOBAL// */
}

.project-detail-title {
  font-size: 32px;
}

@media (min-width: 1400px) and (max-width: 1712px) {
  .features-pops .features-pop:nth-child(5) {
    top: 40% !important;
  }

  .features-pops .features-pop:nth-child(4) {
    top: 52% !important;
  }

  .features-pops .features-pop:nth-child(3) {
    right: 28.5% !important;
    top: 59% !important;
  }

  .features-pops .features-pop:nth-child(2) {
    right: 48.5% !important;
    top: 64% !important;
  }
}