:root{
    --cream:#f1e7de;
    --cream-soft:#efe7d9;
    --cream-bold:#795138;
    --ink:#241a12;
    --ink-soft:#3a2c20;
    --brown:#5c4632;
    --tan:#a9805a;
    --tan-light:#c9a377;
    --gold:#8a6a3f;
    --line: rgba(36,26,18,.12);
    --container: 1200px;
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 4px;
    --ease: cubic-bezier(.4,0,.2,1);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Jost', sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  i[class*="fa-"]{line-height:1; display:inline-block; vertical-align:middle;}
  ul{list-style:none;}
  h1,h2,h3,.serif{font-family:'Cormorant Garamond', serif;}
  .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 32px;
  }
  .container-medium{
    max-width: 1100px;
  }
  .container-small{
    max-width: 800px;
  }
  .content-page{
    margin: 30px 0;
  }
  section{position:relative;}
  ::selection{background:var(--tan-light); color:var(--ink);}

  /* ---------- focus ---------- */
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--tan); outline-offset:3px;
  }

  /* ---------- reveal-on-scroll ---------- */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ================= SOCIAL RAIL ================= */
  .social-rail{
    position:fixed; right:20px; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; gap:10px; z-index:60;
  }
  .social-rail a{
    width:38px; height:38px; border-radius:50%;
    background: #9b6946;
    color:#f4efe6; display:flex; align-items:center; justify-content:center;
    font-size:14px; transition:background .3s var(--ease), transform .3s var(--ease);
    backdrop-filter:blur(4px); flex:none; padding:0; line-height:0;
  }
  .social-rail a i{position:relative; top:0.5px;}
  .social-rail a:hover{background:var(--tan); transform:scale(1.12);}

  /* ================= HEADER ================= */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:transparent;
    border-bottom:1px solid transparent;
    transition:border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  }
  header.scrolled{
    background:rgba(244,239,230,.9);
    backdrop-filter:blur(10px);
    border-bottom-color:var(--line);
    box-shadow:0 6px 24px rgba(36,26,18,.08);
  }
  header .brand-text .name,
  header .brand-mark{ transition:color .35s var(--ease), border-color .35s var(--ease); }

  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px; max-width:var(--container); margin:0 auto;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand-mark{
    display:flex; align-items:center; justify-content:center;
  }
  .brand-text .name{font-family:'Cormorant Garamond',serif; font-size:30px; letter-spacing:3px; color:var(--cream-bold);line-height: 100%;}
   .brand-text .name img{
    max-width: 120px;
   }
  .brand-text .sub{font-size:15px; letter-spacing:3px; color:var(--brown);}
  .nav-links{display:flex; gap:36px; font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase;}
  .nav-links a{position:relative; padding:4px 0; color:var(--ink-soft); transition:color .25s;
    white-space: nowrap;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold);
    transition:width .3s var(--ease);
  }
  .nav-links a:hover,   .nav-links a.active{color:var(--cream-bold);}
  .nav-links a:hover::after, .nav-links a.active::after{width:100%;}
  .nav-right{display:flex; align-items:center; gap:18px;}
  .lang{
    font-size:12px; letter-spacing:1px; border:1px solid var(--line); border-radius:20px;
    padding:10px 14px; display:flex; align-items:center; gap:6px; cursor:pointer; background:transparent;
    color:var(--ink-soft); transition:border-color .25s;
  }
  .lang:hover{border-color:var(--tan);}
  .lang a.selected{color: var(--tan);}
  .btn{
    display:inline-flex; align-items:center; gap:8px; justify-content:center;
    font-size:12px; letter-spacing:1.5px; padding:10px 26px; text-transform:uppercase;
    border:1px solid var(--ink); cursor:pointer; background:transparent; color:var(--ink);
    border-radius:var(--radius-sm);
    transition:background .35s var(--ease), color .35s var(--ease), transform .25s var(--ease), box-shadow .35s var(--ease);
  }
  .btn-dark{background:var(--cream-bold); color:var(--cream); border-color:var(--cream-bold);}
  .btn-dark:hover{background:var(--tan-light); border-color:var(--tan-light); box-shadow:0 10px 26px rgba(138,106,63,.35); transform:translateY(-2px);}
  .btn-outline:hover{background:var(--ink); color:var(--cream); transform:translateY(-2px);}
  .btn-light{background:var(--cream); color:var(--ink); border-color:var(--cream);}
  .btn-light:hover{background:var(--tan-light); transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.15);}

  .burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
  .burger span{width:24px; height:1.5px; background:var(--ink); transition:.3s var(--ease);}
  .burger.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .burger.active span:nth-child(2){opacity:0;}
  .burger.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  /* ================= HERO ================= */
  .hero{
    position:relative; display:flex; align-items:center;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    padding-bottom: 30px;
  }
  .hero::before{
    content:""; position:absolute; inset:0;
    pointer-events:none;
  }
  .hero-glow{
    position:absolute; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle, rgba(201,163,119,.35), transparent 70%);
    top:-120px; left:-160px; filter:blur(10px); animation:float 12s ease-in-out infinite;
  }
  @keyframes float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(30px);} }
  .hero-inner{
    position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:0 32px;
    width:100%; text-align:center; color:var(--cream);
  }
  .hero-eyebrow{
    font-size:13px; letter-spacing:6px; color:var(--tan-light); margin-bottom:22px;
    opacity:0; animation:fadeUp .9s var(--ease) .15s forwards;
  }
  .hero h1{
    font-size:clamp(52px, 9vw, 108px); font-weight:500; letter-spacing:6px; line-height:1;
    opacity:0; animation:fadeUp 1s var(--ease) .3s forwards;
  }
  .hero h2{
    font-family:'Jost',sans-serif; font-weight:300; letter-spacing:9px; font-size:clamp(16px,2.4vw,26px);
    margin-top:14px; 
    opacity:0; animation:fadeUp 1s var(--ease) .5s forwards;
  }
  .hero h2.name-sub {
    text-transform: uppercase;
    font-size: 40px;
    padding-top: 140px;
    font-family: 'Cormorant Garamond', serif;
  }
  .hero.bg_sub{
    min-height: auto;
    min-height: 300px;
  }
  .hero .tagline{
    font-family:'Cormorant Garamond', serif; font-style:italic; font-size:clamp(22px,3vw,32px);
    margin:26px 0 12px; 
    opacity:0; animation:fadeUp 1s var(--ease) .7s forwards;
  }
  .hero .meta{
    font-size:13px; letter-spacing:3px;  margin-bottom:40px;
    opacity:0; animation:fadeUp 1s var(--ease) .85s forwards;
  }
  .hero .cta{ opacity:0; animation:fadeUp 1s var(--ease) 1s forwards; }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }

  .scroll-cue{
    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
    width:1px; height:52px; background:linear-gradient(var(--tan-light), transparent);
    z-index:2;
  }
  .scroll-cue::after{
    content:""; position:absolute; top:0; left:-2.5px; width:6px; height:6px; border-radius:50%;
    background:var(--tan-light); animation:cue 2.2s ease-in-out infinite;
  }
  @keyframes cue{ 0%{top:0; opacity:1;} 80%{opacity:0;} 100%{top:46px; opacity:0;} }

  /* ================= SECTION HEAD ================= */
  .section-pad{padding:30px 0;}
  .eyebrow{
    font-size:12px; letter-spacing:4px; color:var(--ink); margin-bottom:10px; text-transform:uppercase; font-weight:500;
  }
  .h2-title{font-size:clamp(30px,4vw,44px); font-weight:500; letter-spacing:1px;text-transform: uppercase;}
  .divider{
    position:relative;
    width:56px; height:1px; background:var(--tan); margin:20px 0;
  }
  .divider::after{
    content:"";
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:7px; height:7px; border-radius:50%;
    background:var(--tan);
    box-shadow:0 0 0 4px var(--cream);
  }
  .divider.center{margin-left:auto; margin-right:auto;}
  .services .divider::after, .booking .divider::after{box-shadow:0 0 0 4px var(--ink);}

  /* ================= ABOUT ================= */
  .about{background:#f1e7de;}
  .about-grid{
    display:grid; grid-template-columns: 1fr minmax(auto, 500px); gap:60px; align-items:center;
  }
  .about-copy p{color:var(--brown); max-width:42ch; margin-bottom:30px; font-size:15.5px;}
  .about-media{
    position:relative; border-radius:240px 240px 14px 14px; overflow:hidden;
    width:100%;
    box-shadow:0 30px 70px -24px rgba(36,26,18,.4);
    border: 8px solid #dabfaa;
    border-bottom: 0;
  }
  .about-media .about-img {
    position: relative; /* Thay đổi từ absolute thành relative */
    width: 100%; 
    height: auto;       /* Để chiều cao tự động co giãn theo file ảnh gốc */
    display: block;
    object-fit: cover;
    transition: transform .9s var(--ease);
  }

  .about-media .ph {
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%;
    transition: transform .9s var(--ease);
    background:
      radial-gradient(circle at 75% 15%, rgba(201,163,119,.55), transparent 40%),
      radial-gradient(circle at 20% 85%, rgba(92,70,50,.5), transparent 45%),
      linear-gradient(165deg, #4a3625 0%, #241a12 70%);
  }
  .about-media:hover .ph, .about-media:hover .about-img{transform:scale(1.05);}
  

  /* ================= SERVICES ================= */
  .services{
    background:var(--ink); color:var(--cream);
  }
  .services .eyebrow{color:var(--tan-light);}
  .services-head{text-align:center; margin-bottom:60px;}
  .services-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; margin-top:32px;
  }
  .service-card{
    display:block;
    position:relative;
    background:#332417;
    border:1px solid rgba(244,239,230,.08);
    border-radius:var(--radius);
    padding:0 0 30px;
    transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
    overflow:visible;
    cursor:pointer;
    box-shadow:0 18px 40px -26px rgba(0,0,0,.7);
  }
  .service-card:hover{
    transform:translateY(-8px);
    border-color:var(--tan);
    box-shadow:0 26px 54px -20px rgba(0,0,0,.65);
  }
  .service-media{
    aspect-ratio:2/1; position:relative; overflow:hidden;
    border-radius:var(--radius) var(--radius) 0 0;
    background:linear-gradient(150deg, #5c4632, #241a12);
  }
  .service-media::after{
    content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.4), transparent 55%);
  }
  .service-media img, .service-media .ph, .service-media .media-img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
  .service-media .ph, .service-media .media-img{position:absolute; inset:0;}
  .service-card:hover .service-media img, .service-card:hover .service-media .ph, .service-card:hover .service-media .media-img{transform:scale(1.08);}
  .service-icon{
    position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
    width:58px; height:58px; border-radius:50%; border:1.5px solid var(--tan-light);
    display:flex; align-items:center; justify-content:center;
    z-index:5; background: var(--cream-bold);
    color:var(--cream); font-size:20px; line-height:0;
    box-shadow:0 8px 20px rgba(0,0,0,.4);
    transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  }
  .service-icon img{
    filter: brightness(0) invert(1);
  }
  .service-icon i{position:relative; top:0.5px;}
  .service-card:hover .service-icon{background:var(--tan); color:var(--ink); border-color:var(--tan); transform:translate(-50%,-50%) scale(1.06);}
  .service-card h3{
    text-align:center; font-size:20px; letter-spacing:2px; font-weight:500; margin:26px 0 10px;
    text-transform:uppercase; color:var(--cream); transition:color .35s var(--ease);
  }
  .service-card:hover h3{color:var(--tan-light);}
  .service-card .des{
    text-align:center; font-size:13.5px; color:#c9bfae; padding:0 26px; margin-bottom:18px; min-height:60px;
  }
  .service-card p{
    padding: 0;
    margin: 0;
  }
  .service-link{
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:12px; letter-spacing:2px; color:var(--tan-light); text-transform:uppercase;
  }
  .service-link svg{transition:transform .3s var(--ease);}
  .service-card:hover .service-link svg{transform:translateX(5px);}

  

  /* ================= PRICELIST ================= */
  .pricelist{background:var(--cream-soft);}
  .price-head{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;
    text-align:center; 
  }
  .price-head .divider.center{margin-top: 0;margin-bottom: 0;}
  .price-head-inner{margin:0 auto; text-align:center;}
  .price-full-link{
    display:inline-flex; align-items:center; gap:8px; letter-spacing:1.5px;
    border:1px solid var(--ink); padding:10px 18px; transition:.3s var(--ease);
    border-radius:10px;
    text-transform: uppercase;
    font-size: 14px;
  }
  .price-full-link:hover{background:var(--ink); color:var(--cream);}
  .price-grid{
    display:grid; grid-template-columns:200px 1fr 340px; gap:36px; align-items:stretch;
  }
  .price-tabs{display:flex; flex-direction:column; gap:10px;}
  .price-tab{
    text-align:left; padding:16px 20px; font-size:13px; letter-spacing:1.5px;
    background: #efe2d9; border:1px solid var(--line); cursor:pointer; color:var(--ink-soft);
    transition:.3s var(--ease); position:relative; overflow:hidden;
    border-radius:var(--radius-sm);
    text-align: center;
    text-transform: uppercase;
  }
  .price-tab::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tan);
    transform:scaleY(0); transition:transform .3s var(--ease);
  }
  .price-tab:hover{border-color:var(--tan);}
  .price-tab.active{background:var(--tan); color:var(--cream); border-color:var(--tan);}
  .price-tab.active::before{transform:scaleY(1);}

  .price-table-wrap{
    background:var(--cream); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden;
  }
  .price-table-title{
    text-align:center; padding:16px; font-size:13px; letter-spacing:3px;
    background:var(--tan); color:var(--cream); font-weight:500;
  }
  table.price-table{width:100%; border-collapse:collapse; font-size:14.5px;}
  table.price-table tr{border-bottom:1px solid var(--line); transition:background .25s;}
  table.price-table tr:hover{background:rgba(138,106,63,.06);}
  table.price-table td{padding:14px 22px; color: #000;}
  table.price-table td:last-child{text-align:right; font-weight:500; color:var(--ink);}
  table.price-table td.dur{color:var(--brown); text-align:center;}
  table.price-table tr.pack-first td{padding-top:22px; border-top:1px solid var(--line);}
  .price-note{text-align:center; font-size:14px; color:#000; padding:0; margin-top:24px; opacity:.8;}
  .price-media{position:relative;  border-radius:var(--radius);}
  .price-media .ph, .price-media .media-img{
    object-fit:cover;
    transition:transform .8s var(--ease);
    text-align: center;
    width: 100%;
    display: inline-block;
  }
  .price-media .media-img{
    border-radius: 15px;
  }
  .price-media .sm-item{
    text-align: center;
  }

  .price-media:hover .ph, .price-media:hover .media-img{transform:scale(1.06);}

   
  /* ================= BOOKING CTA ================= */
  .booking{
    background:#987356;
    color:var(--cream);
  }
  .booking-row{
    margin:0 auto;
    display:flex; align-items:stretch; min-height:200px;
  }
  .booking-media{
    position:relative; overflow:hidden; flex:0 0 23%;
    text-align: left;
    display: flex;
    align-items: center; 
  }
  .booking-media .ph, .booking-media .media-img{
    max-width:100%;object-fit:cover;
  }
  .booking-media .ph{
    background:radial-gradient(circle at 60% 30%, rgba(244,239,230,.5), transparent 55%), linear-gradient(160deg,#5c4632,#241a12);
  }
  .booking-text{
    flex:1 1 240px; display:flex; flex-direction:column; justify-content:center;
    padding:24px 36px;
  }
  .booking-text h2{
    font-size:clamp(18px,2.6vw,20px); letter-spacing:1px; margin-bottom:8px;
    text-transform: uppercase;
  }
  .booking-text p{font-size:13px; max-width:230px; line-height:1.5;}
  .booking-options{
    flex:0 1 auto; display:flex; align-items:center; gap:16px;
    padding:20px 0 20px 0;
  }
  .booking-card{
    background: #d3baa6; padding:14px 26px; display:flex; align-items:center; gap:14px;
    min-width:250px;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
    cursor:pointer; border-radius:20px;
  }
  .booking-card:hover{transform:translateY(-5px); box-shadow:0 18px 34px -14px rgba(36,26,18,.4); background:var(--cream);}
  .booking-card .bicon{
    width:42px; height:42px; border-radius:50%; border:1.5px solid var(--ink); flex:none;
    display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--ink);
    line-height:0;
  }
  .booking-card .bicon i{position:relative; top:0.5px;}
  .booking-card .btext{display:flex; flex-direction:column; gap:2px;}
  .booking-card .btitle{font-size:16px; letter-spacing:1.5px; font-weight:600; color:var(--ink);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .booking-card .bdesc{font-size:16px; color:rgba(36,26,18,.68);}
  .booking-card .arrow{margin-left:auto; color:var(--ink); transition:transform .3s var(--ease); font-size:13px;}
  .booking-card:hover .arrow{transform:translateX(6px);}

  

  /* ================= FOOTER ================= */
  footer{background:var(--ink); color:#d9cdb9; padding:30px 0 0;}
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:20px;
    border-bottom:1px solid rgba(244,239,230,.1);
  }
  .footer-brand .brand-mark{border-color:var(--tan-light); color:var(--tan-light);}
  .footer-brand .name{color:var(--tan-light);line-height: 100%;}
   .footer-brand .brand-text .sub{color: #fff;font-size: 12px;}
  .footer-brand p{margin-top:16px; font-size:13px; color:var(--cream); max-width:26ch;text-align: center;}
  footer h5{font-size:12px; letter-spacing:2px; color:var(--cream); margin-bottom:16px; text-transform:uppercase;}
  footer .fcol p, footer .fcol a{font-size:13.5px; color:var(--cream); margin-bottom:8px; display:block; transition:color .25s;}
  footer .fcol a:hover{color:var(--cream);}
  footer .fcol a.contact-line{display:flex; align-items:center; gap:9px;}
  footer .fcol a.contact-line i{color:var(--tan-light); font-size:12px; width:14px; text-align:center;}
  .footer-social{display:flex; gap:10px; margin-top:6px;}
  .footer-social a{
    width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(244,239,230,.35);
    display:flex !important; align-items:center; justify-content:center; font-size:14px; color:#d9cdb9;
    transition:.3s var(--ease); flex:none; padding:0; line-height:0;
  }
  .footer-social a i{position:relative; top:0.5px;}
  .footer-social a:hover{background:var(--tan); border-color:var(--tan); color:var(--ink); transform:translateY(-3px);}
  .footer-bottom{
    text-align:center; padding:26px 0; font-size:12px; color:#8a7c66; letter-spacing:.5px;
  }
  .header-logo img{max-width: 70px;}


  /* ================= BACK TO TOP ================= */
  #toTop{
    position:fixed; right:20px; bottom:24px; width:44px; height:44px; border-radius:50%;
    background:var(--ink); color:var(--cream); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:16px; line-height:0;
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:.35s var(--ease); z-index:55;
  }
  #toTop i{position:relative; top:0.5px;}
  #toTop.show{opacity:1; visibility:visible; transform:translateY(0);}
  #toTop:hover{background:var(--gold);}

.site-footer {
  font-size: 14px;
}

.footer-container {
  display: flex;
  justify-content: center;   
  align-items: center;      
  flex-wrap: wrap;          
  gap: 8px;     
}

.footer-link {
  color: var(--cream);        
  text-decoration: none;    
  transition: color 0.3s;
}

.footer-link:hover {
  color: #fff;       
}

  @media (max-width:1100px){
      .nav-links{
        gap: 15px;
      }
      .header-logo img{
        max-width: 40px;
      }
      .brand-text .name img {
        max-width: 100px;
      }
      .brand-text .sub{
        font-size: 10px;
        letter-spacing: 2px;
      }
   }


  @media (max-width:980px){
    .price-grid{grid-template-columns:1fr; }
    .price-tabs{flex-direction:row; flex-wrap:wrap;}
    .price-tab{flex:1 1 45%;}

    .booking-row {
      display: grid;
      grid-template-columns: 1fr 1fr; 
    }
    .booking-options {
      grid-column: 1 / 3; 
  
    }
    .booking-card {
      width: 100%; 
    }

    .footer-grid{grid-template-columns:1fr 1fr 1fr; row-gap:36px;} 
    .about-grid{
      grid-template-columns: 1fr 1fr;
    }
  
  }

  @media (max-width:950px){
    .nav-links{
      position:fixed; inset:0 0 0 auto; top:73px; height:calc(100vh - 73px);
      background:var(--cream); flex-direction:column; width:78%; max-width:320px;
      padding:40px 32px; gap:26px; font-size:15px;
      transform:translateX(100%); transition:transform .4s var(--ease);
      box-shadow:-10px 0 30px rgba(0,0,0,.08);
    }
    .nav-links.open{transform:translateX(0);}
    .nav-links.open a{color:var(--ink-soft) !important;}
    .nav-links.open a:hover{color:var(--ink) !important;}
    .nav-right .btn-dark{display:none;}
    .burger{display:flex;}
  }

  @media (max-width:940px){ 
    .services-grid{grid-template-columns:1fr 1fr; row-gap:50px;} 
    .about-copy p{max-width: 100%;}
  }

  @media (max-width:640px){
    .about-media{aspect-ratio:4/3;}
    .section-pad{padding:70px 0;}
    .about-grid{grid-template-columns:1fr; gap:40px;}
    .about-media{order:-1;}
    .price-full-link{font-size: 12px;margin-top: 10px;}
    .booking-text{flex: 1 1 120px;}
    .hero{background-attachment: scroll; }
    .container{padding: 0 15px;}
    .nav{padding: 18px 15px;}
    .brand-text .sub{font-size: 10px;}
    .header-logo img{max-width: 40px;}
    .brand-text .name img{max-width: 110px;}
    .hero .meta{font-size: 12px;letter-spacing: 2px;}
    .hero h2.name-sub{font-size: 30px;}
    .booking-options {
      grid-column: 1 / 3; 
      display: flex;
      flex-direction: column; 
    }
    .social-rail{
      top: auto;
      bottom: 10px;
      right: 5px;
      transform: none;
    }
    #toTop.show{
      opacity: 0;
    }
     .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}
  }
  @media (max-width:600px){ 
    .services-grid{
      grid-template-columns:1fr; row-gap:50px;
    } 
  }
  @media (max-width:420px){ 
    .footer-grid{grid-template-columns:1fr;} 
  }