/* ---------------------------- 
      (max-width:1200px)
----------------------------- */
@media only screen and (max-width: 1200px) {
  .banner-text {
    max-width: 513px;
  }
  .banner-video {
    max-width: 100%;
  }
  .navbar-header .navbar .navbar-nav {
    column-gap: 30px;
  }
  .banner-information {
    column-gap: 30px;
  }
}

/* ---------------------------- 
      (max-width:991px)
------------------------------ */
@media only screen and (max-width: 991px) {
  .navbar-collapse {
    position: absolute;
    top: 80px;
    background-color: #fff;
    width: 100%;
    padding: 20px;
  }
  .navbar-header .navbar {
    padding: 20px 0 50px;
  }
  .steps-free-lesson .container {
    padding-bottom: 50px;
  }
  .private-wellness-text {
    padding: 15px 0 10px;
  }
  .reacting-section,
  .private-wellness,
  .frequently-ask,
  .our-customer,
  .deluxe-amenities {
    padding: 50px 0;
  }
  .deluxe-information {
    padding-bottom: 30px;
  }
  .banner-text {
    padding: 20px 0 30px;
    max-width: 560px;
  }
  .banner-video,
  .short-time {
    max-width: 100%;
  }
  .btn-dark {
    width: 100%;
    padding: 15px 10px;
    font-size: 16px;
    line-height: 24px;
  }
  .our-offer .offer-card {
    row-gap: 20px;
    max-width: 560px;
  }
  .our-offer .offer-card .card {
    display: flex !important;
    flex-direction: row;
    align-items: start;
    max-width: 100%;
    text-align: left !important;
  }
  .our-offer .offer-card .card .icon {
    margin-right: 12px !important;
    margin-bottom: 0;
    width: 60px;
    min-width: 60px;
    height: 60px;
  }
  .our-offer .offer-card .card .icon img {
    width: 29px;
  }
  .our-offer .offer-card .card .card-title {
    font-size: 18px;
    margin-bottom: 3px;
  }
  .our-offer .offer-card .card .card-text {
    font-size: 14px;
    font-weight: 400;
  }
}

/* ---------------------------- 
      (max-width:576px)
------------------------------ */
@media (max-width: 768.98px) {
  .steps-free-lesson .card .card-body {
    padding: 25px;
  }
  .steps-free-lesson .card .card-body .card-title {
    font-size: 22px;
  }
  .steps-free-lesson .card .card-body .card-text {
    font-size: 16px;
  }
  .steps-free-lesson .card .card-img-top {
    height: 170px;
  }
  .private-wellness-image {
    width: 100%;
    text-align: center;
  }
  .private-img {
    width: 100%;
    max-height: 300px;
  }
  .frequently-ask .faq-head {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .accordion-button {
    font-size: 14px;
    padding: 15px 13px 16px;
  }
  .accordion {
    row-gap: 10px;
  }
  .accordion-button::after {
    background-size: 16px;
  }
  .accordion-body {
    padding: 10px 12px 0;
    font-size: 14px;
  }
  .frequently-ask {
    padding: 27px 0 33px;
  }
  .private-wellness-text .section-heading {
    font-size: 20px;
  }
  .private-wellness-text .font-18 {
    font-size: 14px;
  }
  .private-points {
    gap: 10px;
  }
  .customer-image {
    width: 50px;
    height: 50px;
  }
  .our-customer .card .card-head h5 {
    font-size: 17px;
  }
  .our-customer .card .customer-rating {
    max-width: 86px;
  }
  .our-customer .card .card-body .customer-name {
    font-size: 18px;
  }
  .our-customer .card .card-body .card-text {
    font-size: 14px;
  }
}

/* ---------------------------- 
      (max-width:576px)
------------------------------ */
@media (max-width: 575.98px) {
  .main-text {
    max-width: 180px;
    font-size: 12px;
  }

  .font-18 {
    font-size: 16px;
  }

  .header .btn-dark {
    padding: 7px 13px;
  }

  .navbar-header .navbar {
    padding: 20px 0;
  }

  .short-time {
    max-width: 100%;
    font-size: 12px;
  }

  .tittle-s2 {
    font-size: 26px;
  }

  .reacting-star {
    height: 20px;
  }
  .rating-take img {
    width: 82px;
  }
  .rating-take p,
  .percentage-good {
    font-size: 14px;
  }

  .banner-image {
    height: 100%;
    max-width: 430px;
  }

  .video-custom {
    height: 430px;
  }

  .video-custom .play-btn,
  .video-custom .pause-btn {
    width: 80px;
    height: 80px;
  }

  .video-custom .play-pause svg {
    height: 30px;
  }

  .reacting-section {
    padding: 30px 0 50px;
  }

  .reacting-section .font-18 {
    font-size: 14px;
  }

  .steps-free-lesson .container {
    padding-bottom: 40px;
  }

  .wonderful {
    font-size: 16px;
    margin: 8px 0 18px;
  }

  .section-heading {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .private-heading {
    margin-bottom: 30px;
  }
  .steps-free-lesson .step-heading {
    margin-bottom: 0;
  }
  .steps-free-lesson .card {
    max-width: 400px;
  }
  .private-img {
    max-height: 200px;
  }

  .private-wellness {
    padding: 40px 0 30px;
  }

  .our-offer {
    padding-bottom: 40px;
  }
  .our-customer .card {
    max-width: 100%;
    padding: 22px 24px 30px 22px;
  }
  .our-customer {
    padding: 40px 0;
  }
  .deluxe-amenities {
    padding: 40px 0 0;
  }
  .enjoy-responsive .responsive-enjoy {
    margin: 20px;
    height: 343px;
  }
  .contact-info {
    font-size: 14px;
    margin: 20px 0;
  }
  .font-36 {
    font-size: 24px;
  }
  .our-location .container {
    padding: 54px 16px 59px;
  }
  .map {
    margin: 20px 0;
  }
  .deluxe-head {
    font-size: 24px;
    margin-bottom: 30px;
  }
  .mb-20 {
    margin-bottom: 10px;
  }
  .customer-head {
    margin-bottom: 40px;
  }
  .enjoy-stay {
    padding-top: 50px;
  }
  .enjoy-stay-title {
    margin-bottom: 3px;
  }
  .map iframe {
    min-height: 200px;
  }
  .verified-badge {
    font-size: 9px;
    padding: 3px 4px;
    gap: 2px;
  }
  .verified-badge img {
    width: 10px;
  }
  .point-important {
    margin: 15px 0 30px;
  }
  .point-important li img {
    width: 20px;
  }
  .point-important li {
    font-size: 14px;
  }
  .offer-head {
    margin-bottom: 28px;
  }
}

/* ---------------------------- 
      (max-width:425px)
------------------------------ */
@media (max-width: 425px) {
  .pay-app {
    margin-right: 0;
  }
  .steps-free-lesson .card .card-img-top {
    height: 140px;
  }
  .banner-image {
    height: 100%;
    max-width: 430px;
  }
  .video-custom {
    height: 343px;
  }
}

/* ---------------------------- 
      (max-width:350px)
------------------------------ */
@media (max-width: 350px) {
  .btn-dark {
    font-size: 14px;
    padding: 10px;
  }
}