/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 1200px) {

  h3 {
    font-size: 40px;
  }

  h5 {
    font-size: 22px;
  }

  .about {
    img {
      width: 100%;
    }

    .title-img {
      width: 80%;
    }

    .bottom-amenities {
      display: none;

      img {
        width: 80%;
      }
    }

    .about-content {
      margin-top: 40px;
    }

    ul li {
      font-size: 14px;
      padding: 4px 0px;
    }
  }

  .choose {
    .container {
      .email {
        a {
          font-size: 16px;
        }
      }

      .choose-number {
        a {
          font-size: 16px;
        }
      }
    }

    .choose-img {
      a {
        font-size: 16px;
      }
    }
  }

  .testimonial {
    .testi-content-box {
      width: 90%;
    }

    .testimonial-img {
      img {
        height: 100vh;
        object-fit: cover;
      }
    }
  }

  .room {
    img {
      height: 700px;
    }
  }


  /* ================ Blog page ============= */
  #blog-page {
    .blog-section .blog-items {
      max-width: 46%;
    }
  }

}

@media only screen and (max-width: 1024px) {

  #blog-page {
    .main-blog .container {
        flex-direction: column;
    }
    .latest-post-section {
      width: 100%;
      max-width: 100%;
  }
  .blog-section {
    max-width: 100%;
  }
}

#single-post {
  .main-post {
      .container {
          display: flex;
          gap: 40px;
          flex-direction: column;
      }
  }
}

}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 992px) {
  .post-content{
    padding-right: 0px !important;
  }
  .blog-img img{
    max-width: 100%;
  }
  h3 {
    font-size: 32px;
  }

  .sub-text {
    font-size: 16px;
  }

  header {
    .bottom-header {
      nav a {
        font-size: 14px;
      }

      .primary-menu {
        gap: 10px;
      }

      .book-btn a {
        padding: 10px;
        font-size: 12px;
      }
    }


  }

  .banner {
    padding: 100px 0px;

    .banner-content {
      gap: 10px;
    }

    p {
      width: 100%;
    }
  }

  .about {
    .about-content {
      gap: 25px;

      .bottom-amenities {
        bottom: -182px;
        left: 0px;

        img {
          width: 70%;
        }
      }
    }
  }

  .room {
    .room-details {
      padding: 15px;
    }
  }

  .choose {
    padding: 40px 0px;

    .container {
      gap: 30px;

      .choose-number {
        text-align: center;
      }
    }
  }

  .testimonial {
    gap: 30px;

    .testimonial-content {
      padding: 0px 0px;
    }

    .testi-content-box {
      gap: 5px;
    }
  }

  .cta {
    padding: 40px 0px;

    h3 {
      font-size: 30px;
    }

    .main-cta {
      padding: 20px;
      gap: 20px;
    }

    .group-btn {
      gap: 10px;
    }

    .cta-call {
      gap: 6px;
    }

    .call-icon img {
      width: 35px;
    }

    .call-content {
      a {
        font-size: 16px;
      }
    }
  }

  /* ========== inner page ======= */
  .inner-banner {
    padding: 80px 0px;
  }

  #about-page {
    .about-main {
      padding: 40px 0px;
    }

    /* 
    .about-data {
      flex-direction: column-reverse;
    } */
  }

  /* ============== single-post ============= */

  #single-post {
    .main-post {
      .container {
        flex-direction: column;
      }
    }

    .post-data {
      max-width: 100%;
    }

    .latest-post-section {
      max-width: 100%;
    }
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
  .blog-heading {
    font-size: 19px;
    font-weight: 600;
}


  header {
    .bottom-header {
      .primary-menu {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;

        ul {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          gap: 15px;
        }

        nav {
          text-align: center;

          a {
            display: block;
            padding: 10px 0px;
            font-size: 16px;
          }
        }

        /* display: none; */
      }

      .menu-icon {
        display: block;
        border: none;
        background: transparent;
        width: 40px;
        z-index: 9;
        font-size: 24px;
      }
    }

    .primary-menu {
      /* display: none; */
      padding: 150px 20px;
      position: fixed;
      background: #fff;
      width: 100%;
      max-width: 350px;
      right: -100%;
      top: 0px;
      /* transform: translateY(-10px); */
      -webkit-transition: all .4s ease-in;
      -o-transition: all .4s ease-in;
      transition: all .4s ease-in;
      z-index: 1;
      height: 100vh;
      -webkit-transition: .5s;
      -o-transition: .5s;
      transition: .5s;
    }


    .primary-menu.active {
      right: 0%;
    }
  }

  .banner {
    padding: 65px 0px;
  }

  .about {
    padding: 40px 0px 80px;

    .about-title {
      .title {
        margin-left: 20px;
      }
    }

    .about-content {
      flex-direction: column;

      .main-content {
        width: 100%;
      }

      .amenities {
        width: 100%;
      }

      .bottom-amenities {
        display: block;
        bottom: -79px;
        left: 100px;
      }
    }
  }

  .room {
    .room-box:nth-child(3) {
      display: none;
    }

    .room-box {
      width: 100%;
      max-width: 50%;
    }
  }

  .choose {
    .container {
      flex-direction: column;

      .choose-img {
        width: 100%;
      }

      .choose-content {
        width: 100%;
      }
    }


  }

  .testimonial {
    flex-direction: column;

    .testimonial-img {
      width: 100%;

      img {
        height: 100%;
      }
    }

    .testimonial-content {
      width: 100%;
      padding: 0px 30px;
    }
  }

  .cta {
    .main-cta {
      flex-direction: column;
    }

    .cta-img {
      img {
        width: 50%;
      }
    }
  }

  footer {
    .top-footer .container {
      flex-wrap: wrap;
    }

    .footer-about {
      width: 45%;
    }

    .useful-link {
      width: 45%;
    }

    .contact-info {
      width: 45%;
    }

    .footer-gallery {
      width: 45%;
    }
  }


  /* ============== inner page ============= */
  .inner-banner {
    padding: 50px 0px;
  }

  #about-page {
    .about-main {
      padding: 40px 0px;
    }

    .about-data {
      flex-direction: column-reverse;
      gap: 20px;

      .about-content {
        max-width: 100%;
      }

      .about-img {
        max-width: 55%;
      }
    }

    .about-data:nth-child(2) {
      margin-top: 30px;
      flex-direction: column-reverse;
    }
  }

  /* ============= contact page ========= */

  #contact-page {
    .lodge-contact {
      padding: 40px 0px;

      .container {
        flex-direction: column;
      }
    }

    .contact-text {
      max-width: 100%;
    }

    .contact-form {
      max-width: 100%;
    }

    a {
      word-break: break-all;
    }

    .lodge-contact-details {
      .box {
        max-width: 100%;
      }
    }
  }

  /* ============= blog page =========== */

  #blog-page {
    .main-blog {
      padding: 40px 0px;
    }

    .main-blog .container {
      flex-direction: column;
    }

    .blog-section {
      max-width: 100%;
    }

    .latest-post-section {
      max-width: 100%;
    }
  }

  /* ============== single-post ============= */

  #single-post {
    .main-heading{
      font-size: 26px;
    }
    h1 {
      font-size: 30px;
    }

    .main-post {
      padding: 40px 0px;
    }
  }

  .leave-comment {
    form {
      max-width: 100%;
    }
    
  }

  /* ======== room page ======= */

  #room-page {
    .main-room {
      padding: 40px 0px;
    }
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 600px) {

  p {
    font-size: 14px;
  }

  h1 {
    font-size: 30px;
  }

  h4 {
    font-size: 20px;
  }

  header {
    .top-header {

      /* display: none; */
      .social-media {
        display: none;
      }

      .call {
        /* width: 100%; */
        display: flex;

      }

      .loge-details {
        flex-direction: column;
        gap: 6px;
      }

      .address {
        /* width: 100%; */
        display: flex;
      }

      span {
        display: block;
      }

      a {
        font-size: 12px;
      }
    }
  }

  .banner {
    .banner-content {
      max-width: 100%;
    }
  }

  .about {
    padding: 30px 0px;

    .about-title {
      flex-direction: column-reverse;

      .title {
        width: 80%;
      }

      .title-img {
        width: 100%;
      }
    }

    .room-img {
      display: none;
    }

    .about-content {
      .top-amenities {
        justify-content: start;
        /* display: none; */
      }

      .bottom-amenities {
        position: static;
      }
    }
  }

  .room {
    margin-top: 0px;

    .room-types {
      flex-direction: column;
    }

    .room-box {
      max-width: 100%;
    }

    img {
      height: 580px;
    }

    .room-box:nth-child(3) {
      display: block;
    }
  }


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


  /* ============= blog page =========== */

  #blog-page {
    .blog-section .blog-items {
      max-width: 100%;
    }
  }

  /* ======== room page ======= */

  #room-page {
    .room-item {
      flex-direction: column-reverse;
      gap: 20px;
    }

    .room-item-content {
      width: 100%;
    }

    .room-item-img {
      width: 65%;
    }

    .main-room {
      padding: 20px 0px;
    }

    .room-item:nth-child(2) {
      flex-direction: column-reverse;
      margin: 40px 0px;
    }

    .room-item:nth-child(4) {
      flex-direction: column-reverse;
      margin: 20px 0px;
    }
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 450px) {
  .media-img img {
    max-width: 80px !important;
    border-radius: 5px;
}

  h1 {
    font-size: 24px;
  }

  header {
    .primary-menu {
      width: 100%;
      max-width: 300px;

    }
  }

  h3 {
    font-size: 26px;
  }

  .choose {
    .container {
      .choose-img {
        display: none;
      }
    }
  }

  .cta {
    h3 {
      font-size: 20px;
    }

    .group-btn {
      flex-direction: column;
      /* justify-content: start; */
      align-items: start;
    }
  }

  .about {
    .about-title {
      gap: 15px;
    }
  }

  footer {
    padding: 30px 0px 0px;
    font-size: 14px;

    .footer-about {
      width: 100%;
    }

    .useful-link {
      width: 100%;
    }

    .contact-info {
      width: 100%;
    }

    .footer-gallery {
      width: 100%;
    }
  }


  /* ========= contact page ========== */

  #contact-page {
    .contact-form {
      form {
        padding: 20px;
      }

      .name,
      .tel-mail {
        flex-direction: column;

        input {
          max-width: 100%;
        }
      }

    }
  }

  #single-post {
    h1 {
      font-size: 22px;
    }
  }

  .leave-comment {
    .name-mail {
      flex-direction: column;

      input {
        width: 100%;
        max-width: 100%;
      }
    }

    form {
      max-width: 100%;
    }
  }
}