@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');



/* =============== index =========================== */


@media only screen and (min-width:1024px) {
  body {
    width: 100%;
    margin: 0%;
  }

  header {
    width: 100%;
    height: 100vh;
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
      /* ชั้นมืดโปร่งใส */
      url(img/banner_home.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
  }

  .container_nav {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
	
	

    .container_nav .menu {
    width: 65%;
    flex-direction: row;
    justify-content: space-around;
	gap: 20px;
  }

  .container_nav a {
    font-family: 'Open Sans', sans-serif;
    margin: 5PX;
    text-decoration: none;
    color: white;
    letter-spacing: 0.5px;
  }

  .menu a.active {
    color: #F06B23;
    font-size: 18px;
  }

  /* กล่องหลักของเมนู dropdown */
  .espace {
    position: relative;
    /* ให้เมนูย่อยวางตามพ่อ */
    display: inline-block;
  }

  /* ลิงก์หลัก */
  .dropespace {
    text-decoration: none;
    color: white;
    padding: 10px 12px;
    display: inline-block;
  }

  .dropeespace:hover {
    color: var(--brand);
  }

  /* เมนูย่อย */
  .dropdown-espace {
    display: none;
    /* ซ่อนก่อน */
    position: absolute;
    top: 45px;
    left: 20px;
    background-color: white;
    opacity: 60%;
    min-width: fit-content;
    z-index: 1000;
  }

  /* ลิงก์ในเมนูย่อย */
  .dropdown-espace a {
    color: black;
    opacity: 60%;
    font-size: 13px;
    padding: 5px 3px;
    text-decoration: none;
    display: block;
  }

  .dropdown-espace a:hover {
    color: black;
    opacity: 100%;
  }


  /* แสดงเมนูย่อยเมื่อ hover */
  .espace:hover .dropdown-espace {
    display: block;
  }

  .Menu_btn {
    width: 30%;


  }

  .Menu_btn a {
    text-decoration: none;
    margin: 3px;
    padding: 8PX 15PX;
    border-radius: 2px;
  }

  .Menu_btn .btn_register {
    background-color: #F06B23;
  }


  /* ==== Hero ==== */
  .hero {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    margin-top: 100px;
    margin-bottom: 60px;
  }

  .hero h1 {
    margin: 5px;
    font-size: 45px;
    font-weight: 900;
  }

  .hero p {
    font-size: 26px;
    font-weight: 500;
  }

  /* Availability */
  .availability {
    margin: auto;
    width: 65%;
    font-family: 'Open Sans', sans-serif;
    display: block;
    justify-content: center;
    text-align: start;
  }

  .availability h4 {
    color: #F06B23;
    margin-bottom: -1px;
	  margin: 0%;
    font-size: 16px;
    font-weight: 300;
  }

  .availability .room_type {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .room_type .patage_room_availability {
    display: block;
  }

  .room_type .small_room_availability {
    display: block;
  }

  .room_type .big_room_availability {
    display: block;
  }

  .room_type span {
    color: #F06B23;
    font-size: 32px;
    font-style: italic;
    font-weight: 900;
    text-shadow: 1px 1px 1px rgb(255, 255, 255, 0.2);
  }

  .room_type a {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
  }


  /* Booking */
  .booking {
    background: #ffffff;
    border-radius: 2PX;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    max-width: 960px;
    margin: 5px auto 0;

  }

  .field {
    font-family: 'Montserrat', sans-serif;
    width: 20%;
    display: flex;
    flex-direction: column;
    margin: 5px;
    padding: 3px;

  }

  .label {
    font-size: 20px;
    font-weight: 600;
    color: black;
    letter-spacing: 0.5PX;
  }

  .field select {
    font-family: 'Open Sans', sans-serif;
    color: #797979;
    font-size: 18px;
    font-weight: 100;
    padding-top: 10px;
    border: none;
  }

  .input {
    color: #797979;
    font-size: 18px;
    font-weight: 100;
    padding-top: 10px;
    border: none;
  }

  .booking .btn.primary {
    background-color: #F06B23;
    margin-left: 10px;
    width: 13%;
    justify-content: right;
    border-radius: 2px;
    border: none;
    font-family: 'Open Sans' sans-serif;
    font-size: 16px;
    color: white;
    font-weight: 700;
    padding: 18px;

  }



  /* ==== Sections ==== */
  .main {
    background-color: #ffffff;
    width: 80%;
    margin: 20px auto;
  }

  .container h2 {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 34px;
  }

  .container p {
    font-family: 'Open Sans', sans-serif;
    width: 80%;
    margin: auto;
    font-size: 16px;
    text-align: center;
  }

  .promo {
    border: 2px solid #f36c21;
    width: 40%;
    height: fit-content;
    margin: 30PX auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .promo .btn {
    background-color: #F06B23;
    width: 40%;
    padding: 20px;


  }

  .btn a {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: white;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
  }

  .promo .promoparheure {
    width: 50%;
    padding-left: 20px;
	  padding: 1px;
  }

  .promoparheure h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #167892;
    font-weight: 800;

  }

  .promoparheure a {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #000000;
    font-weight: 200;
  }


  /* Cards */
  .spaces {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin-top: 70px;
  }

  .card {
    width: 30%;
    height: max-content;
    background-color: white;
    border: 1px solid gray;

  }

  .card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }

  .content h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #000000;
    letter-spacing: 0.5px;
    margin-bottom: 0px;
  }

  .content a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #F06B23;
    letter-spacing: 0.5px;
  }

  .content p {
    width: 80%;
    margin: auto;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #000000;
    letter-spacing: 0.5px;
    padding: 20px;
    line-height: 22px;
  }

  .content .price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #000000;
  }

  .content span {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: #000000;
    font-style: italic;
  }

  .card .cta {
    width: 40%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #F06B23;
    padding: 5px;
    border-radius: 2px;
  }

  .cta a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: hsl(0, 0%, 100%);
    text-decoration: none;
  }

  /* USP strip */
  .usp {
    background-color: #F06B23;
    margin-top: 90px;
  }

  .usp h2 {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 40px;
  }

  .usp-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 2 คอลัมน์ */
    gap: 10px;
    /* ระยะห่างระหว่าง items */
    justify-items: center;
    /* จัดให้อยู่กลางแต่ละช่อง */
  }

  .usp-item {
    margin: 3px;
    width: 300px;
    text-align: center;
  }


  .usp-item i {
    font-size: 40px;
    /* ขนาด icon */
    color: white;
    /* สี icon */
  }

  .usp-item h4 {
    margin-top: 0%;
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 500;
  }


  /* Testimonials */

  .comment-preview {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 55px;
    padding: 5px;
  }

  .cmtcard {
    width: 45%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 15px;
  }

  .comment {
    width: 75%;
    display: block;
  }

  .comment-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .comment-title .meta {
    height: 45px;
  }

  .meta a {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    letter-spacing: 0.5px;
  }

  .meta span {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #000000;
    letter-spacing: 0.5px;
  }

  .comment-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #000000;
  }

  .stars i {
    font-size: 24px;
    color: #F06B23;
    letter-spacing: 2px;
  }

  .avatar img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
  }

  .btn-readcomment {
    background-color: #f37021;
    width: 50px;
    height: 50px;
    color: white;
    padding: 10px;
    font-size: 30px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 90%;
  }



  /* Footer */
  .footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #F06B23;
    color: #e5e7eb;
    padding: 15px;
    font-family: 'Open Sans', sans-serif;
  }

  .footer h5 {
    font-style: 13PX;
    font-weight: 800;
    margin-bottom: 0%;
  }

  .footer p,
  .footer a {
    font-size: 10px;
    font-weight: 500;
  }

  .footer .cols1 {
    width: 50%;
    display: flex;
    flex-direction: column;
    text-align: left;
    text-decoration: none;
  }

  .cols1 h5,
  .cols1 p,
  .cols1 input,
  .cols1 a {
    margin-left: 20px;
	  text-decoration: none;
  }

  .subscribe-section {

    color: white;
    font-family: sans-serif;
  }

  .subscribe-form {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .subscribe-form input {
    background: transparent;
    width: 200px;
    border: none;
    border-bottom: 1px solid white;
    color: white;
    outline: none;
  }

  .subscribe-btn {
    background-color: #444;
    color: white;
    border: none;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 2px;
    cursor: pointer;
  }

  .footer .cols2 {
    width: 20%;
	  text-decoration: none;

  }

  .footer .cols3 {
    width: 25%;
    display: flex;
    flex-direction: column;
  }

  .cols3 .social-section {
    color: white;
  }

  .social-section ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
  }

  .social-section li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    font-size: 14px;
	  text-decoration: none;
  }

  .social-section i {
    font-size: 18px;
  }





  /* ------------------------------- a propse ----------------------------------------------------------*/

  .about-header {
    background-image: url("img/about_banner.png");
    background-size: cover;
    background-position: bottom;
  }

  .about-quote {
    width: 32%;
    margin-top: 12%;
    margin-left: 50%;
    background: hsl(0, 0%, 100%);
    color: #F06B23;
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    padding: 32px 36px;
  }

  .about-quote a {
    font-size: 26px;
    ;
  }

  .about-main {
    width: 80%;
    margin: auto;
    margin-top: 5%;
  }

  .about-main h2 {
    font-family: 'montserrat', sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #F06B23;
    margin-bottom: 0%;
  }

  .about-main p {
    font-family: 'Open sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    letter-spacing: 0.5px;
    line-height: 28px;
  }

  .about-main img {
    width: 95%;
    height: 300px;
    object-fit: cover;
    margin-top: 20px;
    margin-bottom: 60px;
  }

  .feature-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 10px;
  }

  .feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .feature-list i {
    font-size: 22px;
    padding: 5px;
  }

  .feature-list a {
    font-size: 14px;
    font-family: 'Open sans', sans-serif;
  }

  /* CTA row */
  .cta-row {
    display: flex;
    gap: 18px;
    margin-top: 30px;
    margin-bottom: 50px;
  }

  .cta-row a {
    background: #F06B23;
    color: #fff;
    padding: 12px 18px;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
  }






  /* ------------------------------- espace coworking ----------------------------------------------------------*/

  .espace-header {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)),
      /* ชั้นมืดโปร่งใส */
      url(img/espace_banner.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
  }

  .card-product {
    width: 75%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .card-product .product {
    display: block;
    background-color: #ffffff;
    border: 1px solid gray;
    width: 100%;
    height: fit-content;
    margin-top: 100px;
    padding-bottom: 20px;
  }

  .product img {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }

  .product .product-details {
    padding-left: 20px;
    padding-right: 20px
  }

  .product .title-price {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
  }

  .title-price a {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-top: -100px;
  }

  .title-price h2 {
    margin-bottom: 0%;
  }

  .product-details a {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
  }

  .esp-funtion ul {
    list-style: square;
    margin-top: 1px;
    line-height: 25px;
  }

  .btn-detail {
    display: flex;
    align-items: center;
    /* จัดให้อยู่กึ่งกลางในแนวดิ่ง */
    justify-content: flex-end;
    gap: 8PX;
  }

  .btn-detail a {
    color: #F06B23;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
  }


  .btn-detail button {
    background-color: #f37021;
    width: 50px;
    height: 50px;
    color: white;
    padding: 10px;
    font-size: 30px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }



  .card-product .service {
    font-family: 'Montserrat', sans-serif;
    color: #F06B23;
    margin-top: 40px;
    margin-bottom: 40PX;
  }

  .service a {
    font-weight: 700;
  }

  .Services-inclus a {
    font-weight: 500;
    line-height: 25px;
  }

  .Services-inclus ul {
    list-style: square;
  }




  /*------------------------patager salle---------------------------*/
  .patagersalle-header {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
      /* ชั้นมืดโปร่งใส */
      url(img/Espaces\ Patargés.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 60dvh;
  }

  .main-patagersalle {
    width: 75%;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 10%;
  }

  .main-patagersalle .main-section1 {
    display: flex;
    flex-direction: column;
    margin-top: 10%;
  }

  .main-patagersalle .sub-section1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .sub-section1 .principales {
    width: 45%;
  }

  .main-patagersalle h4 {
    margin: 0%;
    font-family: 'Montserrat', sans-serif;
    color: #F06B23;
    font-size: 26px;
    letter-spacing: 1px;
  }

  .main-patagersalle a {
    font-family: 'Montserrat', sans-serif;
    color: #000000;
    font-size: 14px;

  }

  .main-patagersalle .sub-section2 {
    display: flex;
    flex-direction: column;
  }

  .main-patagersalle li {
    list-style: square;
    line-height: 25px;
  }

  .main-patagersalle h5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
    margin-top: 14px;
  }


  .main-patagersalle .main-section2 {
    margin-top: 5%;
    margin-bottom: 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /*----------------sectin 2-------------------*/
  .main-section2 img {
    width: 32%;
    height: 200px;
    object-fit: cover;
    margin-top: 2%;
  }

  /*-------booking form-----*/
  .sub-section2 .booking {
    width: 70%;
    margin: 0%;
    margin-top: 25px;
    padding: 0%;
    justify-content: space-around;
    border: 1PX solid gray;
  }

  .sub-section2 .field {
    width: fit-content;
    align-items: flex-start;
  }

  .main-patagersalle button {
    width: max-content;
    background-color: #F06B23;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #ffffff;
    border-radius: 2px;
    border: none;
    padding: 10px 15px;
    margin-top: 20px;
  }

  /*------------------------PRIVATE PETITE---------------------------*/
  .privatepetite-header {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
      /* ชั้นมืดโปร่งใส */
      url(img/Petites\ Salles\ Privées.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 60dvh;
  }

  /*------------------------PRIVATE PETITE---------------------------*/
  .privatgrande-header {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      /* ชั้นมืดโปร่งใส */
      url(img/Grandes\ Salles\ Privées.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 60dvh;
  }

  /*------------------------contacr---------------------------*/
  .contact-header {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      /* ชั้นมืดโปร่งใส */
      url(img/contact_banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 60dvh;
  }

  .contact-header .hero p {
    font-size: 20px;
    font-weight: 600;
  }

  .main-contact {
    width: 70%;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 15%;
  }

  .main-contact h3 {
    font-family: 'Montsrrat', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #F06B23;
    margin-bottom: 0%;
    letter-spacing: 0.5px;
  }

  .main-contact h6 {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #000000;
    margin: 0%;
    letter-spacing: 0.5px;
  }

  .main-contact a {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: gray;
    letter-spacing: 0.5px;
    font-style: italic;
  }

  .main-contact h5 {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #000000;
    margin: 0%;
    letter-spacing: 0.5px;
  }

  .main-contact img {
    width: 50%;
    height: 300px;
    object-fit: cover;
  }


  /*------------------------reservations---------------------------*/
  .body-reservation {
    background-color: #000000;
  }

  .reservation-header {
    background-image: none;
    background-color: #000000;
    height: 60dvh;
  }

  .reservation-header .hero {
    width: 70%;
    margin: auto;
    text-align: left;
    margin-top: 5%;
  }

  .main-reservation {
    background-color: #000000;
    width: 70%;
    margin: auto;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
  }

  .main-reservation h1,
  .main-reservation var {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: #ffffff;
  }

  .main-reservation .reserver-title {
    background-color: #ffffff;
    width: 50%;
    height: fit-content;
    padding-top: 3px;
  }

  .main-reservation h4 {
    font-family: 'montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 0%;
    padding-left: 10px;
  }

  .main-reservation .salle-resever {
    display: flex;
    justify-content: space-between;
    /* ดันให้ซ้าย-ขวาแยกสุด */
    align-items: center;
    /* จัดให้อยู่กึ่งกลางแนวดิ่ง */
    padding: 15px;
  }

  .main-reservation span {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #F06B23;
  }

  .main-reservation i {
    font-size: 22px;
    cursor: pointer;
  }

  .main-reservation img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }

  .main-reservation .information-resever {
    background-color: #ffffff;
    width: 50%;
    height: max-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
  }

  .timm-resever h4 {
    padding-left: 5px;
  }

  .main-reservation a {
    font-family: 'Roboto mono', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #F06B23;
    padding: 10px;
  }


  .duree-resever a {
    padding-right: 15px;
  }

  .main-reservation .resever-total {
    background-color: #ffffff;
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    margin-bottom: 55px;
  }

  .resever-total .Total {
    height: max-content;
    display: flex;
    justify-content: space-between;
    /* ดันปุ่มไปขวาสุด */
    align-items: center;
    /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    width: 100%;

  }

  .resever-total button {
    width: max-content;
    background-color: #F06B23;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #ffffff;
    border-radius: 2px;
    border: none;
    padding: 10px 15px;
    margin-top: 20px;
    margin-right: 15px;
  }

  .res {
    background-color: #ffffff;
    width: 40%;
    height: fit-content;
    padding-top: 3px;
    margin-left: 15%;
    font-family: 'Roboto mono', sans-serif;
    margin-bottom: 20px;
    padding: 5px;
  }

  .res .btn {
    width: max-content;
    background-color: #F06B23;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #ffffff;
    border-radius: 2px;
    border: none;
    padding: 5px 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-right: 5px;
  }


}




/*-----------------------Popup------------------------------------*/
/* พื้นหลังดำโปร่ง */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  /* ซ่อนก่อน */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* กล่อง popup */
.popup-content {
  background: #fff;
  padding: 30px;
  border-radius: 2px;
  text-align: center;
  max-width: 400px;
  width: 100%;
  position: relative;
}

.popup-content h3 {
  color: #F06B23;
  font-family: 'Montserrat', sans-serif;
  font-size: 23px;
  text-align: left;
}

.popup-content p {
  color: #000000;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  text-align: left;
}

/* ปุ่มปิด (X) */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

/* ปุ่ม confirm */
.popup-content .btn {
  background-color: #F06B23;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-top: 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}


/*--------------ceer compt----------*/
.auth-wrap {

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Montserrat', sans-serif;
}

.auth-card {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 2px;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .18);
}

.auth-card h1 {
  color: #f06523;
  margin-bottom: 20px;
}

.signup-form .group {
  margin-bottom: 15px;
}

.signup-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}

.signup-form input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
}

.actions {
  display: flex;
  justify-content: flex-end;
}

.btn-primary {
  background: #f06523;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.btn-primary:hover {
  background: #d9531e;
}

.alt {
  margin-top: 15px;
  text-align: center;
}

.alt a {
  color: #f06523;
  text-decoration: none;
  font-weight: bold;
}

.grid-2 .group {
  gap: 2PX;
}

.auth-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.auth-top a {
  text-decoration: none;
  color: #444;
  font-size: 16px;
}

.auth-card .alt {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.alt .deja-compt {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-weight: 500;
}


/*-------------All comment----------*/

.comment-page {
  background-color: #a9a9a9;
}

.comment-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.comment-list li {
  width: 70%;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 2px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .18);
  text-align: left;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: #686666;
}

.comment-list img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
}



/*-------------comment form----------------*/

.comment-respond {
  background-color: #F06B23;
  font-family: 'Open Sans', sans-serif;


}



/*

 =========================================
   iPad Polished Layout
   =========================================  */
@media screen and (min-width:768px) and (max-width:1023px) {
  body {
    width: 100%;
    margin: 0%;
  }

  header {
    width: 100%;
    height: 100vh;
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
      /* ชั้นมืดโปร่งใส */
      url(img/banner_home.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
  }

  .container_nav {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 10px;
    text-align: center;
  }

  .container_nav img {
    width: 150PX;
	  margin: 0%; 
	  padding: 0%;

  }

  .container_nav .menu {
    width: 45%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    justify-content: center;
    align-items: center;

  }



  .container_nav a {
    font-family: 'Open Sans', sans-serif;
    margin: 5PX;
    text-decoration: none;
    color: white;
    letter-spacing: 0.2px;
  }
	

  .menu a.active {
    color: #F06B23;
    font-size: 16px;
  }


  .Menu_btn {
    width: 35%;

  }

  .Menu_btn a {
    text-decoration: none;
    padding: 5PX 8PX;
    border-radius: 2px;
  }

  .Menu_btn .btn_register {
    background-color: #F06B23;
  }


  /* กล่องหลักของเมนู dropdown */
  .espace {
    position: relative;
    /* ให้เมนูย่อยวางตามพ่อ */
    display: inline-block;
  }

  /* ลิงก์หลัก */
  .dropespace {
    text-decoration: none;
    color: white;
    padding: 10px 12px;
    display: inline-block;
  }

  /* เมนูย่อย */
  .dropdown-espace {
    display: none;
    /* ซ่อนก่อน */
    position: absolute;

    background-color: white;
    opacity: 60%;
    min-width: fit-content;
    z-index: 1000;
  }

  /* ลิงก์ในเมนูย่อย */
  .dropdown-espace a {
    color: black;
    opacity: 60%;
    font-size: 12px;
    text-decoration: none;
    display: block;
  }

  .dropdown-espace a:hover {
    color: black;
    opacity: 100%;
  }


  /* แสดงเมนูย่อยเมื่อ hover */
  .espace:hover .dropdown-espace {
    display: block;
  }

  .menu a.active {
    font-size: 11px;
    margin: 2px;
  }

  .container_nav .Menu_btn {
    width: 30%;
    margin: 0%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }


  /* ==== Hero ==== */
  .hero {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    margin-top: 100px;
    margin-bottom: 60px;
  }

  .hero h1 {
    margin: 5px;
    font-size: 45px;
    font-weight: 900;
  }

  .hero p {
    font-size: 26px;
    font-weight: 500;
  }

  /* Availability */
  .availability {
    margin: auto;
    width: 65%;
    font-family: 'Open Sans', sans-serif;
    display: block;
    justify-content: center;
    text-align: start;
  }

  .availability h4 {
    color: #F06B23;
    margin-bottom: -1px;
    font-size: 16px;
    font-weight: 300;
  }

  .availability .room_type {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .room_type .patage_room_availability {
    display: block;
  }

  .room_type .small_room_availability {
    display: block;
  }

  .room_type .big_room_availability {
    display: block;
  }

  .room_type span {
    color: #F06B23;
    font-size: 32px;
    font-style: italic;
    font-weight: 900;
    text-shadow: 1px 1px 1px rgb(255, 255, 255, 0.2);
  }

  .room_type a {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
  }


  /* Booking */
  .booking {
    background: #ffffff;
    border-radius: 2PX;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
    max-width: 960px;
    margin: 5px auto 0;

  }

  .field {
    font-family: 'Montserrat', sans-serif;
    width: 20%;
    display: flex;
    flex-direction: column;
    margin: 5px;
    padding: 3px;

  }

  .label {
    font-size: 20px;
    font-weight: 600;
    color: black;
    letter-spacing: 0.5PX;
  }

  .field select {
    font-family: 'Open Sans', sans-serif;
    color: #797979;
    font-size: 18px;
    font-weight: 100;
    padding-top: 10px;
    border: none;
  }

  .input {
    color: #797979;
    font-size: 18px;
    font-weight: 100;
    padding-top: 10px;
    border: none;
  }

  .booking .btn.primary {
    background-color: #F06B23;
    margin-left: 10px;
    width: 13%;
    justify-content: right;
    border-radius: 2px;
    border: none;
    font-family: 'Open Sans' sans-serif;
    font-size: 16px;
    color: white;
    font-weight: 700;
    padding: 18px;

  }



  /* ==== Sections ==== */
  .main {
    background-color: #ffffff;
    width: 90%;
    margin: 20px auto;
  }

  .container h2 {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 34px;
  }

  .container p {
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    margin: auto;
    font-size: 16px;
    text-align: center;
  }

  .promo {

    width: 65%;
    height: fit-content;
    margin: 30PX auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .promo .btn {
    background-color: #F06B23;
    width: 40%;
    padding: 27px;
  }

  .btn a {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: white;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
  }

  .promo .promoparheure {
    width: 50%;
    border: 2px solid #f36c21;
    padding: 20px;

  }

  .promoparheure h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #167892;
    font-weight: 800;
    margin-bottom: -2px;
  }

  .promoparheure a {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #000000;
    font-weight: 200;
  }


  /* Cards */
  .spaces {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

  }

  .card {
    width: 70%;
    height: max-content;
    border: 1px solid gray;
    text-align: center;
    margin: 15px;
  }

  .card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }

  .content h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #000000;
    letter-spacing: 0.5px;
    margin-bottom: 0px;
  }

  .content a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #F06B23;
    letter-spacing: 0.5px;
  }

  .content p {
    width: 80%;
    margin: auto;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #000000;
    letter-spacing: 0.5px;
    padding: 20px;
    line-height: 22px;
  }

  .content .price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #000000;
  }

  .content span {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 10px;
    color: #000000;
    font-style: italic;
  }

  .card .cta {
    width: 40%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #F06B23;
    padding: 5px;
    border-radius: 2px;
    height: max-content;
  }

  .cta a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: hsl(0, 0%, 100%);
    text-decoration: none;
  }

  /* USP strip */
  .usp {
    background-color: #F06B23;
    margin-top: 90px;
  }

  .usp h2 {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 40px;
  }

  .usp-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .usp-item {
    margin: 3px;
    width: 300px;
    text-align: center;
  }


  .usp-item i {
    font-size: 60px;
    /* ขนาด icon */
    color: white;
    /* สี icon */
  }

  .usp-item h4 {
    margin-top: 0%;
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 500;
  }


  /* Testimonials */

  .comment-preview {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 55px;
    padding: 5px;
  }

  .cmtcard {
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 15px;
  }

  .comment {
    width: 75%;
    display: block;
  }

  .comment-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .comment-title .meta {
    height: 45px;
  }

  .meta a {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    letter-spacing: 0.5px;
  }

  .meta span {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #000000;
    letter-spacing: 0.5px;
  }

  .comment-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #000000;
  }

  .stars i {
    font-size: 24px;
    color: #F06B23;
    letter-spacing: 2px;
  }

  .avatar img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
  }

  .btn-readcomment {
    background-color: #f37021;
    width: 50px;
    height: 50px;
    color: white;
    padding: 10px;
    font-size: 30px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 90%;
  }

  /* Footer */
  .footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #F06B23;
    color: #e5e7eb;
    padding: 15px;
    font-family: 'Open Sans', sans-serif;
  }

  .footer h5 {
    font-style: 13PX;
    font-weight: 800;
    margin-bottom: 0%;
  }

  .footer p,
  .footer a {
    font-size: 10px;
    font-weight: 500;
  }

  .footer .cols1 {
    width: 50%;
    display: flex;
    flex-direction: column;
    text-align: left;
    text-decoration: none;
  }

  .cols1 h5,
  .cols1 p,
  .cols1 input,
  .cols1 a {
    margin-left: 20px;
  }

  .subscribe-section {

    color: white;
    font-family: sans-serif;
  }

  .subscribe-form {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .subscribe-form input {
    background: transparent;
    width: 200px;
    border: none;
    border-bottom: 1px solid white;
    color: white;
    outline: none;
  }

  .subscribe-btn {
    background-color: #444;
    color: white;
    border: none;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 2px;
    cursor: pointer;
  }

  .footer .cols2 {
    width: 20%;

  }

  .footer .cols3 {
    width: 25%;
    display: flex;
    flex-direction: column;
  }

  .cols3 .social-section {
    color: white;
  }

  .social-section ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
  }

  .social-section li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    font-size: 14px;
  }

  .social-section i {
    font-size: 18px;
  }



  /* ------------------------------- a propse ----------------------------------------------------------*/

  .about-header {
    height: max-content;
    background-image: url("img/about_banner.png");
    background-size: cover;
    background-position: bottom;
  }

  .about-quote {
    width: 50%;
    margin-top: 20%;
    margin-left: 40%;
    background: hsl(0, 0%, 100%);
    color: #F06B23;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    padding: 32px 36px;
    border: none;
  }

  .about-quote a {
    font-size: 22px;
    ;
  }

  .about-main {
    width: 80%;
    margin: auto;
    margin-top: 5%;
  }

  .about-main h2 {
    font-family: 'montserrat', sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #F06B23;
    margin-bottom: 0%;
  }

  .about-main p {
    font-family: 'Open sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    letter-spacing: 0.5px;
    line-height: 28px;
  }

  .about-main img {
    width: 95%;
    height: 300px;
    object-fit: cover;
    margin-top: 20px;
    margin-bottom: 60px;
  }

  .feature-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 10px;
  }

  .feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .feature-list i {
    font-size: 22px;
    padding: 5px;
  }

  .feature-list a {
    font-size: 14px;
    font-family: 'Open sans', sans-serif;
  }

  /* CTA row */
  .cta-row {
    display: flex;
    gap: 18px;
    margin-top: 30px;
    margin-bottom: 50px;
  }

  .cta-row a {
    background: #F06B23;
    color: #fff;
    padding: 12px 18px;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
  }


  /* ------------------------------- espace coworking ----------------------------------------------------------*/

  .espace-header {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)),
      /* ชั้นมืดโปร่งใส */
      url(img/espace_banner.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
  }

  .card-product {
    width: 75%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .card-product .product {
    display: block;
    background-color: #ffffff;
    border: 1px solid gray;
    width: 100%;
    height: fit-content;
    margin-top: 100px;
    padding-bottom: 20px;
  }

  .product img {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }

  .product .product-details {
    padding-left: 20px;
    padding-right: 20px
  }

  .product .title-price {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
  }

  .title-price a {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-top: -100px;
  }

  .title-price h2 {
    margin-bottom: 0%;
  }

  .product-details a {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
  }

  .esp-funtion ul {
    list-style: square;
    margin-top: 1px;
    line-height: 25px;
  }

  .btn-detail {
    display: flex;
    align-items: center;
    /* จัดให้อยู่กึ่งกลางในแนวดิ่ง */
    justify-content: flex-end;
    gap: 8PX;
  }

  .btn-detail a {
    color: #F06B23;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
  }


  .btn-detail button {
    background-color: #f37021;
    width: 50px;
    height: 50px;
    color: white;
    padding: 10px;
    font-size: 30px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }



  .card-product .service {
    font-family: 'Montserrat', sans-serif;
    color: #F06B23;
    margin-top: 40px;
    margin-bottom: 40PX;
  }

  .service a {
    font-weight: 700;
  }

  .Services-inclus a {
    font-weight: 500;
    line-height: 25px;
  }

  .Services-inclus ul {
    list-style: square;
  }




  /*------------------------patager salle---------------------------*/
  .patagersalle-header {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
      /* ชั้นมืดโปร่งใส */
      url(img/Espaces\ Patargés.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 60dvh;
  }

  .main-patagersalle {
    width: 90%;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 10%;
  }

  .main-patagersalle .main-section1 {
    display: flex;
    flex-direction: column;
    margin-top: 10%;
  }

  .main-patagersalle .sub-section1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .sub-section1 .principales {
    width: 45%;
  }

  .main-patagersalle h4 {
    margin: 0%;
    font-family: 'Montserrat', sans-serif;
    color: #F06B23;
    font-size: 26px;
    letter-spacing: 1px;
  }

  .main-patagersalle a {
    font-family: 'Montserrat', sans-serif;
    color: #000000;
    font-size: 14px;

  }

  .main-patagersalle .sub-section2 {
    display: flex;
    flex-direction: column;
  }

  .main-patagersalle li {
    list-style: square;
    line-height: 25px;
  }

  .main-patagersalle h5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
    margin-top: 14px;
  }


  .main-patagersalle .main-section2 {
    margin-top: 5%;
    margin-bottom: 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /*----------------sectin 2-------------------*/
  .main-section2 img {
    width: 32%;
    height: 200px;
    object-fit: cover;
    margin-top: 2%;
  }

  /*-------booking form-----*/
  .sub-section2 .booking {
    width: fit-content;
    margin: 0%;
    margin-top: 25px;
    padding: 0%;
    justify-content: space-around;
    border: 1PX solid gray;
  }

  .sub-section2 .field {
    width: fit-content;
    align-items: flex-start;
  }

  .main-patagersalle button {
    width: max-content;
    background-color: #F06B23;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #ffffff;
    border-radius: 2px;
    border: none;
    padding: 10px 15px;
    margin-top: 20px;
  }

  /*------------------------PRIVATE PETITE---------------------------*/
  .privatepetite-header {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
      /* ชั้นมืดโปร่งใส */
      url(img/Petites\ Salles\ Privées.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 60dvh;
  }

  /*------------------------PRIVATE PETITE---------------------------*/
  .privatgrande-header {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      /* ชั้นมืดโปร่งใส */
      url(img/Grandes\ Salles\ Privées.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 60dvh;
  }

  /*------------------------contacr---------------------------*/
  .contact-header {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      /* ชั้นมืดโปร่งใส */
      url(img/contact_banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 60dvh;
  }

  .contact-header .hero p {
    font-size: 20px;
    font-weight: 600;
  }

  .main-contact {
    width: 70%;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 15%;
  }

  .main-contact h3 {
    font-family: 'Montsrrat', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #F06B23;
    margin-bottom: 0%;
    letter-spacing: 0.5px;
  }

  .main-contact h6 {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #000000;
    margin: 0%;
    letter-spacing: 0.5px;
  }

  .main-contact a {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: gray;
    letter-spacing: 0.5px;
    font-style: italic;
  }

  .main-contact h5 {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #000000;
    margin: 0%;
    letter-spacing: 0.5px;
  }

  .main-contact img {
    width: 50%;
    height: 300px;
    object-fit: cover;
  }


  /*------------------------reservations---------------------------*/
  .body-reservation {
    background-color: #000000;
  }

  .reservation-header {
    background-image: none;
    background-color: #000000;
    height: 40dvh;
  }

  .reservation-header .hero {
    width: 70%;
    margin: auto;
    text-align: left;
    margin-top: 5%;
  }

  .main-reservation {
    background-color: #000000;
    width: 70%;
    margin: auto;
    display: flex;
    flex-direction: column;
    margin-top: 5px;
  }

  .main-reservation h1,
  .main-reservation var {
    font-family: 'Montserrat', sans-serif;
    font-size: 3px;
    font-weight: 800;
    color: #ffffff;
  }

  .main-reservation .reserver-title {
    background-color: #ffffff;
    width: 50%;
    height: fit-content;
    padding-top: 3px;
  }

  .main-reservation h4 {
    font-family: 'montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 0%;
    padding-left: 10px;
  }

  .main-reservation .salle-resever {
    display: flex;
    justify-content: space-between;
    /* ดันให้ซ้าย-ขวาแยกสุด */
    align-items: center;
    /* จัดให้อยู่กึ่งกลางแนวดิ่ง */
    padding: 15px;
  }

  .main-reservation span {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #F06B23;
  }

  .main-reservation i {
    font-size: 22px;
    cursor: pointer;
  }

  .main-reservation img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }

  .main-reservation .information-resever {
    background-color: #ffffff;
    width: 50%;
    height: max-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
  }

  .timm-resever h4 {
    padding-left: 5px;
  }

  .main-reservation a {
    font-family: 'Roboto mono', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #F06B23;
    padding: 10px;
  }


  .duree-resever a {
    padding-right: 15px;
  }

  .main-reservation .resever-total {
    background-color: #ffffff;
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    margin-bottom: 55px;
  }

  .resever-total .Total {
    height: max-content;
    display: flex;
    justify-content: space-between;
    /* ดันปุ่มไปขวาสุด */
    align-items: center;
    /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    width: 100%;

  }

  .resever-total button {
    width: max-content;
    background-color: #F06B23;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #ffffff;
    border-radius: 2px;
    border: none;
    padding: 10px 15px;
    margin-top: 20px;
    margin-right: 15px;
  }

  .res {
    background-color: #ffffff;
    width: 40%;
    height: fit-content;
    padding-top: 3px;
    margin-left: 15%;
    font-family: 'Roboto mono', sans-serif;
    margin-bottom: 20px;
    padding: 5px;
  }

  .res .btn {
    width: max-content;
    background-color: #F06B23;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #ffffff;
    border-radius: 2px;
    border: none;
    padding: 5px 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-right: 5px;
  }

}




/* =========================================
   iPhone
   ========================================= */

@media (max-width:768px) {
   


    body {
      width: 100%;
      margin: 0%;
    }

    header {
      width: 100%;
      height: 100vh;
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
        /* ชั้นมืดโปร่งใส */
        url(img/banner_home.jpg);
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      font-weight: 600;
    }

    .container_nav {
      width: 100%;
      margin: auto;
      display: flex;
       flex-wrap:wrap;
      justify-content: center;
      font-size: 8px;
      text-align: center;
    }

    .container_nav img {
     margin: auto;
    }

    .container_nav .menu {
 	font-size: 8PX;
  	margin: 0%;
    }

    .container_nav a {
      font-family: 'Open Sans', sans-serif;
      text-decoration: none;
      color: white;
      letter-spacing: 0.5px;
    }

    .menu a.active {
      color: #F06B23;
      font-size: 7px;
    }


    .Menu_btn a {
	font-size: 8PX;
      text-decoration: none;
      margin: 0.5px;
      padding: 4PX 6PX;
      border-radius: 2px;
    }

    .Menu_btn .btn_register {
      background-color: #F06B23;
    }


    /* กล่องหลักของเมนู dropdown */
    .espace {
      position: relative;
      /* ให้เมนูย่อยวางตามพ่อ */
      display: inline-block;
    }

    /* ลิงก์หลัก */
    .dropespace {
      text-decoration: none;
      color: white;
      padding: 10px 12px;
      display: inline-block;
    }

    /* เมนูย่อย */
    .dropdown-espace {
      display: none;
      /* ซ่อนก่อน */
      position: absolute;

      background-color: white;
      opacity: 60%;
      min-width: fit-content;
      z-index: 1000;
    }

    /* ลิงก์ในเมนูย่อย */
    .dropdown-espace a {
      color: black;
      opacity: 60%;
      font-size: 12px;
      text-decoration: none;
      display: block;
    }

    .dropdown-espace a:hover {
      color: black;
      opacity: 100%;
    }


    /* แสดงเมนูย่อยเมื่อ hover */
    .espace:hover .dropdown-espace {
      display: block;
    }

    .menu a.active {
      font-size: 11px;
      margin: 2px;
    }

    .container_nav .Menu_btn {
      width: 30%;
      margin: 0%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
	

    /* ==== Hero ==== */
    .hero {
      text-align: center;
      font-family: 'Montserrat', sans-serif;
      color: #ffffff;
      margin-top: 120px;
      margin-bottom: 60px;
    }

    .hero h1 {

      font-size: 22px;
      font-weight: 900;
    }

    .hero p {
      font-size: 14px;
      font-weight: 500;
    }

    /* Availability */
    .availability {
      margin: auto;
      width: 95%;
      font-family: 'Open Sans', sans-serif;
      display: block;
      justify-content: space-between;
      text-align: start;
    }

    .availability h4 {
      color: #F06B23;
      margin-bottom: -1px;
      font-size: 12px;
      font-weight: 300;
    }

    .availability .room_type {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }

    .room_type .patage_room_availability {
      display: block;
    }

    .room_type .small_room_availability {
      display: block;
    }

    .room_type .big_room_availability {
      display: block;
    }

    .room_type span {
      color: #F06B23;
      font-size: 20px;
      font-style: italic;
      font-weight: 900;
      text-shadow: 1px 1px 1px rgb(255, 255, 255, 0.2);
    }

    .room_type a {
      color: #ffffff;
      font-size: 12px;
      font-weight: 600;
    }


    /* Booking */
    .booking {
      background: #ffffff;
      border-radius: 2PX;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 5px;
      width: 95%;
      margin: 2px auto 0;

    }

    .field {
      font-family: 'Montserrat', sans-serif;
      width: 20%;
      display: flex;
      flex-direction: column;
      margin: 1px;
      padding: 1px;

    }

    .label {
      font-size: 10px;
      font-weight: 600;
      color: black;
      letter-spacing: 0.5PX;
    }

    .field select {
      font-family: 'Open Sans', sans-serif;
      color: #797979;
      font-size: 8px;
      font-weight: 100;
      padding-top: 10px;
      border: none;
    }

    .input {
      color: #797979;
      font-size: 8px;
      font-weight: 100;
      padding-top: 10px;
      border: none;
    }

    .booking .btn.primary {
      background-color: #F06B23;
      margin-left: 2px;
      width: 13%;
      justify-content: right;
      border-radius: 2px;
      border: none;
      font-family: 'Open Sans' sans-serif;
      font-size: 8px;
      color: white;
      font-weight: 700;
      padding: 8px;

    }



    /* ==== Sections ==== */
    .main {
      background-color: #ffffff;
      width: 90%;
      margin: 20px auto;
    }

    .container h2 {
      font-family: 'Montserrat', sans-serif;
      text-align: center;
      font-size: 24px;
    }

    .container p {
      font-family: 'Open Sans', sans-serif;
      width: 95%;
      margin: auto;
      font-size: 12px;
      text-align: center;
    }

    .promo {

      width: 85%;
      height: fit-content;
      margin: 30PX auto;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }

    .promo .btn {
      background-color: #F06B23;
      width: 40%;
      padding: 20px;
    }

    .btn a {
      font-family: 'Montserrat', sans-serif;
      font-size: 18px;
      color: white;
      font-weight: 800;
      text-decoration: none;
      text-align: center;
    }

    .promo .promoparheure {
      width: 50%;
      border: 2px solid #f36c21;
      padding: 12px;

    }

    .promoparheure h3 {
      font-family: 'Montserrat', sans-serif;
      font-size: 16px;
      color: #167892;
      font-weight: 800;
      margin-bottom: -2px;
    }

    .promoparheure a {
      font-family: 'Open Sans', sans-serif;
      font-size: 8px;
      color: #000000;
      font-weight: 200;
    }


    /* Cards */
    .spaces {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

    }

    .card {
      width: 80%;
      height: max-content;
      border: 1px solid gray;
      text-align: center;
      margin: 15px;
    }

    .card img {
      width: 100%;
      height: 400px;
      object-fit: cover;
    }

    .content h3 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 22px;
      color: #000000;
      letter-spacing: 0.5px;
      margin-bottom: 0px;
    }

    .content a {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 16px;
      color: #F06B23;
      letter-spacing: 0.5px;
    }

    .content p {
      width: 80%;
      margin: auto;
      font-family: 'Open Sans', sans-serif;
      font-weight: 500;
      font-size: 13px;
      color: #000000;
      letter-spacing: 0.5px;
      padding: 20px;
      line-height: 22px;
    }

    .content .price {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 28px;
      color: #000000;
    }

    .content span {
      font-family: 'Open Sans', sans-serif;
      font-weight: 500;
      font-size: 10px;
      color: #000000;
      font-style: italic;
    }

    .card .cta {
      width: 40%;
      margin: auto;
      margin-top: 20px;
      margin-bottom: 20px;
      background-color: #F06B23;
      padding: 5px;
      border-radius: 2px;
      height: max-content;
    }

    .cta a {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: 20px;
      color: hsl(0, 0%, 100%);
      text-decoration: none;
    }

    /* USP strip */
    .usp {
      background-color: #F06B23;
      margin-top: 90px;
    }

    .usp h2 {
      font-family: 'Montserrat', sans-serif;
      color: #ffffff;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-align: center;
      padding: 40px;
    }

    .usp-grid {
      display: flex;
      flex-direction: column;
      justify-content: center;
		align-content: center;
		text-align: center;
		
    }

    .usp-item {
	margin:auto;
      width: 300px;
      text-align: center;
    }


    .usp-item i {
      font-size: 30px;
      /* ขนาด icon */
      color: white;
      /* สี icon */
    }

    .usp-item h4 {
      margin-top: 0%;
      font-family: 'Montserrat', sans-serif;
      color: white;
      font-size: 16px;
      font-weight: 500;
    }


    /* Testimonials */

    .comment-preview {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-top: 55px;
      padding: 5px;
    }

    .cmtcard {
      width: 95%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 15px;
    }

    .comment {
      width: 80%;
      display: block;
    }

    .comment-title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .comment-title .meta {
      height: 45px;
    }

    .meta a {
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: #000000;
      letter-spacing: 0.5px;
    }

    .meta span {
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: #000000;
      letter-spacing: 0.5px;
    }

    .comment-text {
      font-family: 'Open Sans', sans-serif;
      font-size: 13px;
      font-weight: 400;
      color: #000000;
    }

    .stars i {
      font-size: 24px;
      color: #F06B23;
      letter-spacing: 2px;
    }

    .avatar img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 50%;
		margin-right: 20px;
    }

    .btn-readcomment {
      background-color: #f37021;
      width: 50px;
      height: 50px;
      color: white;
      padding: 10px;
      font-size: 30px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-left: 90%;
    }

    /* Footer */
    .footer {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background: #F06B23;
      color: #e5e7eb;
      padding: 5px;
      font-family: 'Open Sans', sans-serif;
    }

    .footer h5 {
      font-style: 5PX;
      font-weight: 600;
      margin-bottom: 0%;
    }

    .footer p,
    .footer a {
      font-size: 8px;
      font-weight: 500;
    }

    .footer .cols1 {
      width: 50%;
      display: flex;
      flex-direction: column;
      text-align: left;
      text-decoration: none;
    }

    .cols1 h5,
    .cols1 p,
    .cols1 input,
    .cols1 a {
      margin-left: 10px;
    }

    .subscribe-section {

      color: white;
      font-family: sans-serif;
    }

    .subscribe-form {
      display: flex;
      align-items: flex-start;
      gap: 4px;
    }

    .subscribe-form input {
      background: transparent;
      width: 100px;
      border: none;
      border-bottom: 1px solid white;
      color: white;
      outline: none;
    }

    .subscribe-btn {
      background-color: #444;
      color: white;
      border: none;
      padding: 2px 8px;
      font-size: 8px;
      border-radius: 2px;
      cursor: pointer;
    }

    .footer .cols2 {
      width: 20%;

    }

    .footer .cols3 {
      width: 25%;
      display: flex;
      flex-direction: column;
    }

    .cols3 .social-section {
      color: white;
    }

    .social-section ul {
      list-style: none;
      padding: 0;
      margin-top: 15px;
    }

    .social-section li {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 8px 0;
      font-size: 14px;
    }

    .social-section i {
      font-size: 12px;
    }



    /* ------------------------------- a propse ----------------------------------------------------------*/
	

    .about-header {
      height: max-content;
      background-image: url("img/about_banner.png");
      background-size: cover;
      background-position: bottom;
    }

    .about-quote {
      width: 70%;
      margin-top: 20%;
      margin-left: 30%;
      background: hsl(0, 0%, 100%);
      color: #F06B23;
      font-family: 'Montserrat', sans-serif;
      font-size: 12px;
      padding: 32px 36px;
      border: none;
    }

    .about-quote a {
      font-size: 12px;
      ;
    }

    .about-main {
      width: 80%;
      margin: auto;
      margin-top: 5%;
    }

    .about-main h2 {
      font-family: 'montserrat', sans-serif;
      font-size: 30px;
      font-weight: 800;
      color: #F06B23;
      margin-bottom: 0%;
    }

    .about-main p {
      font-family: 'Open sans', sans-serif;
      font-size: 18px;
      font-weight: 400;
      color: #000000;
      letter-spacing: 0.5px;
      line-height: 28px;
    }

    .about-main img {
      width: 95%;
      height: 300px;
      object-fit: cover;
      margin-top: 20px;
      margin-bottom: 60px;
    }

    .feature-list {
      list-style: none;
      padding: 0;
      margin: 16px 0 0;
      display: grid;
      gap: 10px;
    }

    .feature-list li {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .feature-list i {
      font-size: 22px;
      padding: 5px;
    }

    .feature-list a {
      font-size: 14px;
      font-family: 'Open sans', sans-serif;
    }

    /* CTA row */
    .cta-row {
      display: flex;
      gap: 18px;
      margin-top: 30px;
      margin-bottom: 50px;
    }

    .cta-row a {
      background: #F06B23;
      color: #fff;
      padding: 12px 18px;
      border-radius: 2px;
      text-decoration: none;
      font-weight: 800;
      font-family: 'Montserrat', sans-serif;
    }


    /* ------------------------------- espace coworking ----------------------------------------------------------*/

    .espace-header {
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)),
        /* ชั้นมืดโปร่งใส */
        url(img/espace_banner.jpg);
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
    }

    .card-product {
      width: 75%;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }

    .card-product .product {
      display: block;
      background-color: #ffffff;
      border: 1px solid gray;
      width: 100%;
      height: fit-content;
      margin-top: 100px;
      padding-bottom: 20px;
    }

    .product img {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }

    .product .product-details {
      padding-left: 20px;
      padding-right: 20px
    }

    .product .title-price {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-family: 'Montserrat', sans-serif;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.5px;
      margin-bottom: 25px;
    }

    .title-price a {
      font-family: 'Open Sans', sans-serif;
      font-size: 8px;
      font-weight: 600;
      margin-top: -100px;
    }

    .title-price h2 {
      margin-bottom: 0%;
    }

    .product-details a {
      font-family: 'Open Sans', sans-serif;
      font-size: 8px;
    }

    .esp-funtion ul {
      list-style: square;
      margin-top: 1px;
      line-height: 25px;
    }

    .btn-detail {
      display: flex;
      align-items: center;
      /* จัดให้อยู่กึ่งกลางในแนวดิ่ง */
      justify-content: flex-end;
      gap: 8PX;
    }

    .btn-detail a {
      color: #F06B23;
      font-style: italic;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-decoration: none;
    }


    .btn-detail button {
      background-color: #f37021;
      width: 50px;
      height: 50px;
      color: white;
      padding: 10px;
      font-size: 30px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }



    .card-product .service {
      font-family: 'Montserrat', sans-serif;
      color: #F06B23;
      margin-top: 40px;
      margin-bottom: 40PX;
    }

    .service a {
      font-weight: 700;
    }

    .Services-inclus a {
      font-weight: 500;
      line-height: 25px;
    }

    .Services-inclus ul {
      list-style: square;
    }




    /*------------------------patager salle---------------------------*/
    .patagersalle-header {
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
        /* ชั้นมืดโปร่งใส */
        url(img/Espaces\ Patargés.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      height: 60dvh;
    }

	.hero {
		margin-top: 15%;
	}
	
	
	.hero p{
		font-size: 12PX;
	}
    .main-patagersalle {
      width: 90%;
      margin: auto;
      margin-top: 5%;
      margin-bottom: 10%;
    }

    .main-patagersalle .main-section1 {
      display: flex;
      flex-direction: column;
      margin-top: 10%;
    }

    .main-patagersalle .sub-section1 {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .sub-section1 .principales {
      width: 45%;
    }

    .main-patagersalle h4 {
      margin: 0%;
      font-family: 'Montserrat', sans-serif;
      color: #F06B23;
      font-size: 18px;
      letter-spacing: 1px;
    }

    .main-patagersalle a {
      font-family: 'Montserrat', sans-serif;
      color: #000000;
      font-size: 12px;

    }

    .main-patagersalle .sub-section2 {
      display: flex;
      flex-direction: column;
    }

    .main-patagersalle li {
      list-style: square;
      line-height: 25px;
    }

    .main-patagersalle h5 {
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 4px;
      margin-top: 14px;
    }


    .main-patagersalle .main-section2 {
      margin-top: 5%;
      margin-bottom: 5%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    /*----------------sectin 2-------------------*/
    .main-section2 img {
      width: 32%;
      height: 100px;
      object-fit: cover;
      margin-top: 2%;
    }

    /*-------booking form-----*/
    .sub-section2 .booking {
      width: 100%;
      margin: 0%;
      margin-top: 25px;
      padding: 0%;
      justify-content: space-around;
      border: 1PX solid gray;
    }

    .sub-section2 .field {
      width: fit-content;
      align-items: flex-start;
    }

    .main-patagersalle button {
      width: max-content;
      background-color: #F06B23;
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: 10px;
      color: #ffffff;
      border-radius: 2px;
      border: none;
      padding: 5px 8px;
      margin-top: 20px;
    }

    /*------------------------PRIVATE PETITE---------------------------*/
    .privatepetite-header {
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
        /* ชั้นมืดโปร่งใส */
        url(img/Petites\ Salles\ Privées.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      height: 60dvh;
    }

    /*------------------------PRIVATE PETITE---------------------------*/
    .privatgrande-header {
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        /* ชั้นมืดโปร่งใส */
        url(img/Grandes\ Salles\ Privées.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      height: 60dvh;
    }

    /*------------------------contacr---------------------------*/
    .contact-header {
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        /* ชั้นมืดโปร่งใส */
        url(img/contact_banner.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      height: 60dvh;
    }

    .contact-header .hero p {
      font-size: 14px;
      font-weight: 600;
		line-height: 12PX;
    }

    .main-contact {
      width: 70%;
      margin: auto;
      margin-top: 5%;
      margin-bottom: 15%;
    }

    .main-contact h3 {
      font-family: 'Montsrrat', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: #F06B23;
      margin-bottom: 0%;
      letter-spacing: 0.5px;
    }

    .main-contact h6 {
      font-family: 'Open Sans', sans-serif;
      font-size: 18px;
      font-weight: 500;
      color: #000000;
      margin: 0%;
      letter-spacing: 0.5px;
    }

    .main-contact a {
      font-family: 'Open Sans', sans-serif;
      font-size: 15px;
      font-weight: 300;
      color: gray;
      letter-spacing: 0.5px;
      font-style: italic;
    }

    .main-contact h5 {
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      font-weight: 500;
      color: #000000;
      margin: 0%;
      letter-spacing: 0.5px;
    }

    .main-contact img {
      width: 90%;
      height: 200px;
      object-fit: cover;
    }


    /*------------------------reservations---------------------------*/
    .body-reservation {
      background-color: #000000;
      height: fit-content;
    }

    .reservation-header {
      background-image: none;
      background-color: #000000;
      height: 50dvh;
    }

    .reservation-header .hero {
      width: 70%;
      margin: auto;
      text-align: left;
      margin-top: 5%;
    }

    .main-reservation {
      background-color: #000000;
      width: 70%;
      margin: auto;
      display: flex;
      flex-direction: column;
      margin-top: 5px;
    }

    .main-reservation h1,
    .main-reservation var {
      font-family: 'Montserrat', sans-serif;
      font-size: 3px;
      font-weight: 800;
      color: #ffffff;
    }

    .main-reservation .reserver-title {
      background-color: #ffffff;
      width: 50%;
      height: fit-content;
      padding-top: 3px;
    }

    .main-reservation h4 {
      font-family: 'montserrat', sans-serif;
      font-size: 20px;
      font-weight: 700;
      color: #000000;
      margin-bottom: 0%;
      padding-left: 10px;
    }

    .main-reservation .salle-resever {
      display: flex;
      justify-content: space-between;
      /* ดันให้ซ้าย-ขวาแยกสุด */
      align-items: center;
      /* จัดให้อยู่กึ่งกลางแนวดิ่ง */
      padding: 15px;
    }

    .main-reservation span {
      font-family: 'Open Sans', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: #F06B23;
    }

    .main-reservation i {
      font-size: 22px;
      cursor: pointer;
    }

    .main-reservation img {
      width: 100%;
      height: 400px;
      object-fit: cover;
    }

    .main-reservation .information-resever {
      background-color: #ffffff;
      width: 50%;
      height: max-content;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
    }

    .timm-resever h4 {
      padding-left: 5px;
    }

    .main-reservation a {
      font-family: 'Roboto mono', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: #F06B23;
      padding: 10px;
    }


    .duree-resever a {
      padding-right: 15px;
    }

    .main-reservation .resever-total {
      background-color: #ffffff;
      width: 50%;
      display: flex;
      flex-direction: column;
      margin-top: 15px;
      margin-bottom: 55px;
    }

    .resever-total .Total {
      height: max-content;
      display: flex;
      justify-content: space-between;
      /* ดันปุ่มไปขวาสุด */
      align-items: center;
      /* จัดให้อยู่กึ่งกลางแนวตั้ง */
      width: 100%;

    }
    .wrap {
      margin-top: 100px;
      margin-bottom: 100px;
    }
    .resever-total button {
      width: max-content;
      background-color: #F06B23;
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: 18px;
      color: #ffffff;
      border-radius: 2px;
      border: none;
      padding: 10px 15px;
      margin-top: 20px;
      margin-right: 15px;
    }

    .res {
      background-color: #ffffff;
      width: 40%;
      height: fit-content;
      padding-top: 3px;
      margin-left: 15%;
      font-family: 'Roboto mono', sans-serif;
      margin-bottom: 20px;
      padding: 5px;
    }

    .res .btn {
      width: max-content;
      background-color: #F06B23;
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: 12px;
      color: #ffffff;
      border-radius: 2px;
      border: none;
      padding: 5px 10px;
      margin-top: 20px;
      margin-bottom: 10px;
      margin-right: 5px;
    }

  }

/* ===== Breadcrumbs under nav ===== */
.breadcrumb-wrapper {
  width: 100%;
  background: rgba(255,255,255,0.85); /* พื้นหลังโปร่งขาว */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 8px 20px;
  border-bottom: 1px solid #eee;
}

.breadcrumb-wrapper .breadcrumbs,
.breadcrumb-wrapper ol,
.breadcrumb-wrapper ul {
  margin: 0;
  padding: 0;
  list-style: none; /* ตัดตัวเลขออก */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font: 500 14px/1.4 "Open Sans", sans-serif;
  color: #6b7280;
}

.breadcrumb-wrapper li {
  display: flex;
  align-items: center;
}

.breadcrumb-wrapper li + li::before {
  content: "›";          /* ตัวคั่น */
  color: #9ca3af;
  margin: 0 6px;
}

.breadcrumb-wrapper a {
  color: #f06b23;        /* สีแบรนด์ */
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all .2s ease;
}

.breadcrumb-wrapper a:hover {
  background: #ffe9dd;
  color: #c14f0e;
}

.breadcrumb-wrapper .current,
.breadcrumb-wrapper span[aria-current="page"] {
  font-weight: 700;
  color: #111827;
}