/*--------------------------------------------------------------------- File Name: responsive.css ---------------------------------------------------------------------*/


/*------------------------------------------------------------------- 991px x 768px ---------------------------------------------------------------------*/

@media (min-width: 992px) and (max-width: 1199px) { 
    .carousel-indicators {
        bottom: 17px;
    }
    .about_img {
        margin-right: 0px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .about_img {
        margin-right: 0px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .carousel-indicators {
        bottom: 27px;
    }
    .about .titlepage {
        max-width: inherit;
    }
    .about_img {
        margin-right: 0px;
        margin-top: 30px;
    }
    .main_form .send_btn {
        margin-bottom: 30px;
    }
    .booking-form-container {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        padding: 0 15px;
        margin-top: -60px; /* Pull it up over the banner a bit */
        margin-bottom: 30px;
    }

    .booking-form-horizontal .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .booking-form-horizontal .form-group {
        margin-right: 0;
        margin-bottom: 15px;
        flex: 1 1 auto;
    }

    .booking-form-horizontal .form-group:last-child {
        margin-bottom: 0;
    }
    .navigation .navbar-collapse {
        background: linear-gradient(to bottom, #1a1a1a, #2e2e2e);
        padding: 20px;
        margin-top: 56px;
        position: absolute;
        width: 100%;
        margin-right: 20px;
        z-index: 999;
    }
    .navigation.navbar-dark .navbar-toggler-icon {
      background-image: none; /* ลบภาพพื้นหลังเดิมออก */
      position: relative;
      width: 2em;
      height: 2em;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .navigation.navbar-dark .navbar-toggler-icon::before,
    .navigation.navbar-dark .navbar-toggler-icon::after {
      content: '';
      display: block;
    }

    .navigation.navbar-dark .navbar-toggler-icon,
    .navigation.navbar-dark .navbar-toggler-icon::before,
    .navigation.navbar-dark .navbar-toggler-icon::after {
      background-color: #ffffff; /* สีของเส้น (เปลี่ยนเป็นสีขาว) */
      height: 3px; /* ความหนาของเส้น */
      border-radius: 2px;
      transition: all 0.3s ease-in-out;
    }

    .d_none {
        display: none;
    }
}

@media (max-width: 575px) {
    /* เพิ่ม rule นี้เพื่อควบคุมขนาดของโลโก้บนมือถือโดยเฉพาะ */
    #hotel-logo-img {
        max-height: 60px; /* <-- คุณสามารถปรับค่านี้เพื่อทำให้โลโก้เล็กลงได้อีก */
        width: auto;      /* รักษาสัดส่วนของรูปภาพ */
    }
    .about .titlepage {
        max-width: inherit;
    }
    .about_img {
        margin-right: 0px;
        margin-top: 30px;
    }
    .main_form .send_btn {
        margin-bottom: 30px;
    }
    .navigation .navbar-collapse {
        background: linear-gradient(to bottom, #1a1a1a, #2e2e2e);
        padding: 20px;
       margin-top: -5px;
        position: absolute;
        width: 100%;
    }
    .navigation.navbar-dark .navbar-toggler {
        border: 1px solid #fff;
        float: right;
        margin-top: -61px;
    }
    .testimonial_box {
        padding: 0px 19px 40px 20px;
    }

    .navigation.navbar-dark .navbar-toggler-icon {
      background-image: none; /* ลบภาพพื้นหลังเดิมออก */
      position: relative;
      width: 2em;
      height: 2em;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .navigation.navbar-dark .navbar-toggler-icon::before,
    .navigation.navbar-dark .navbar-toggler-icon::after {
      content: '';
      display: block;
    }

    .navigation.navbar-dark .navbar-toggler-icon,
    .navigation.navbar-dark .navbar-toggler-icon::before,
    .navigation.navbar-dark .navbar-toggler-icon::after {
      background-color: #ffffff; /* สีของเส้น (เปลี่ยนเป็นสีขาว) */
      height: 3px; /* ความหนาของเส้น */
      border-radius: 2px;
      transition: all 0.3s ease-in-out;
    }

    .d_none {
        display: none;
    }
}

@media (max-width: 767px) {
    .modern-room-card {
        flex-direction: column;
    }
    .modern-room-image {
        flex: 0 0 250px; /* Fixed height for image on mobile */
    }
    .modern-room-details {
        padding: 25px;
    }
    .modern-room-title {
        font-size: 1.5rem;
    }
    .modern-room-details .read_more {
        align-self: stretch; /* Full width button on mobile */
        text-align: center;
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .modern-header {
        background: linear-gradient(to bottom, #1a1a1a, #2e2e2e); /* Use theme gradient on mobile */
        padding: 5px 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .modern-header .navbar-brand img {
        max-height: 50px;
    }
    .modern-header .navbar-toggler {
        color: #fff; /* Change toggler color to white for dark background */
    }
    .modern-header .navbar-collapse {
        background: #fff;
        padding: 15px;
        margin-top: 10px;
        border-radius: 8px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .modern-header .navbar-nav .nav-link,
    .modern-header.scrolled .navbar-nav .nav-link {
        color: #333;
        padding: 10px 0;
    }
    .modern-header .navbar-nav .nav-link::after {
        display: none; /* No underline on mobile nav items */
    }
    .modern-header .btn-book-now {
        display: block;
        text-align: center;
        margin-top: 15px;
    }
    .modern-header .auth-link {
        border-top: 1px solid #f0f0f0;
        padding-top: 10px;
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    .modern-footer .footer-heading {
        margin-top: 30px;
    }
    .modern-footer .col-lg-4:first-child .footer-heading,
    .modern-footer .col-md-6:first-child .footer-heading {
        margin-top: 0;
    }
}

/* Responsive adjustments for the summary bar */
@media (max-width: 991px) {
    .booking-summary-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 15px;
    }
    .summary-item {
        padding: 15px 0;
    }
    .summary-item:not(:last-of-type) {
        border-right: none;
        border-bottom: 1px solid #e9ecef;
    }
    .summary-action {
        margin-left: 0;
        padding-left: 0;
        margin-top: 15px;
    }
    .summary-action .btn {
        width: 100%;
    }
}