/* ===================================
   Laptop
=================================== */
@media (max-width:1200px){

  .navbar-custom ul{
    gap:8px;
  }

  .navbar-custom li > a{
    padding:10px 16px;
    font-size:14px;
  }

  .book-btn{
    padding:12px 20px;
  }

  .content h1{
    font-size:58px;
  }

}


/* ===================================
   Tablet & Mobile
=================================== */
@media (max-width:991.98px){

  body{
    padding:0;
  }

  .header{
    margin-top:6px;
  }

  .header-wrap{
    border-radius:18px;
    padding:10px 14px;
  }

  .logo-img{
    height:54px;
  }

  .menu-btn{
    display:flex !important;
    align-items:center;
    justify-content:center;
    z-index:1001;
  }

  .book-btn{
    display:none !important;
  }

  /* ==========================
     Drawer
  ========================== */

  .navbar-custom{
    position:fixed;
    top:0;
    left:-100%;

    width:300px;
    max-width:85%;
    height:100vh;

    background:var(--surface);

    padding:20px 20px 30px;
    overflow-y:auto;

    transition:left .35s ease;
    z-index:1000;
  }

  .navbar-custom.open{
    left:0;
  }

  .navbar-custom ul{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
  }

  .navbar-custom li{
    width:100%;
  }

  .navbar-custom li > a{
    width:100%;
    justify-content:space-between;

    color:var(--text);

    border-radius:12px;
    padding:14px 16px;
  }

  .navbar-custom li > a.active{
    background:var(--primary);
    color:var(--surface);
  }

  /* ==========================
     Mobile Dropdown
  ========================== */

  .submenu{
    position:static;
    width:100%;

    display:none;
    max-height:0;

    overflow:hidden;

    opacity:1;
    visibility:visible;
    transform:none;

    margin-top:0;
    padding:0;

    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:none;
  }

  .dropdown-custom:hover .submenu{
    display:none;
  }

  .dropdown-custom.open .submenu{
    display:block;
    max-height:220px;
    margin-top:8px;
    padding:8px;
  }

  .submenu li a{
    display:block;
    padding:12px;
    border-radius:8px;
    background:transparent;
    color:var(--text);
  }

  .submenu li a:hover{
    background:var(--bg);
    color:var(--primary);
  }

  /* Overlay */

  .overlay.show{
    opacity:1;
    visibility:visible;
  }

  /* ==========================
     Hero
  ========================== */
  

  .content{
    left:30px;
    right:30px;
    max-width:100%;
  }

  .content h1{
    font-size:44px;
  }

  .content p{
    font-size:16px;
    line-height:1.7;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .primary,
  .outline{
    width:100%;
    text-align:center;
  }

  .arrow{
    display:none;
  }

}


/* ===================================
   Small Mobile
=================================== */
@media (max-width:575.98px){

  .logo-img{
    height:42px;
  }

  .content{
    left:22px;
    right:22px;
  }

  .content h1{
    font-size:36px;
    line-height:1.15;
  }

  .content p{
    font-size:15px;
  }

  .tag{
    font-size:13px;
    padding:8px 14px;
  }

  .dots{
    bottom:22px;
  }

}