@font-face{
  font-family:"Vazirmatn";
  src:url("../assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Vazirmatn";
  src:url("../assets/fonts/Vazirmatn-SemiBold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Vazirmatn";
  src:url("../assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}


/* =========================================================
   ROOT
========================================================= */

:root{
  --navy:#071a2d;
  --navy2:#0b2035;

  --gold:#dca83d;
  --gold2:#f1c566;

  --white:#fff;

  --ink:#182536;
  --muted:#687586;

  --cream:#f6f2e9;
  --line:#ded8cc;

  --shadow:0 20px 60px rgba(0,0,0,.15);
}


/* =========================================================
   RESET
========================================================= */

*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
  scroll-padding-top:20px;
}


body{
  margin:0;

  color:var(--ink);

  background:#fff;

  font-family:"Vazirmatn",Tahoma,Arial,sans-serif;

  line-height:1.9;
}


img{
  max-width:100%;
}


a{
  text-decoration:none;
  color:inherit;
}


button{
  font:inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.container{
  width:min(1380px,calc(100% - 80px));

  margin:auto;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar{
  height:58px;

  background:#061728;

  color:#dbe4ed;

  border-bottom:1px solid rgba(255,255,255,.15);

  font-size:13px;
}


.topbar-inner{
  height:100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;
}


.top-contact{
  display:flex;

  align-items:center;

  gap:16px;

  direction:ltr;
}


.top-contact a,
.top-contact span{
  white-space:nowrap;
}


.top-contact a{
  color:#e4e8ed;
}


.top-icon{
  color:var(--gold2);

  margin-right:6px;
}


.top-divider{
  width:1px;

  height:20px;

  background:rgba(255,255,255,.2);
}


.languages{
  display:flex;

  align-items:center;

  gap:8px;

  direction:ltr;
}


.lang{
  background:none;

  border:0;

  padding:0;

  color:#c5ced8;

  cursor:pointer;

  font-size:13px;
}


.lang.active{
  color:var(--gold2);

  font-weight:700;
}


/* =========================================================
   HEADER
========================================================= */

.header{
  height:125px;

  background:#071a2d;

  color:#fff;

  border-bottom:1px solid rgba(255,255,255,.12);

  position:relative;

  z-index:1000;
}


.nav{
  height:100%;

  display:flex;

  align-items:center;

  gap:35px;
}


/* =========================================================
   BRAND
========================================================= */

.brand{
  display:flex;

  align-items:center;

  gap:18px;

  margin-right:0;

  flex-shrink:0;
}


.hotel-brand{
  display:flex;

  align-items:center;

  gap:12px;

  text-decoration:none;
}


/* =========================================================
   DESKTOP LOGOS
========================================================= */

.hotel-logo{
  height:75px;

  width:auto;

  object-fit:contain;

  display:block;
}


.tadbir-link{
  display:flex;

  align-items:center;

  text-decoration:none;
}


.tadbir-logo{
  height:85px;

  width:auto;

  object-fit:contain;

  display:block;

  transition:
    transform .3s ease,
    opacity .3s ease;
}


.tadbir-link:hover .tadbir-logo{
  transform:scale(1.05);

  opacity:.85;
}


/* =========================================================
   BRAND TEXT
========================================================= */

.brand-logo{
  width:75px;

  height:75px;

  object-fit:contain;

  display:block;
}


.brand-text{
  display:flex;

  flex-direction:column;

  align-items:flex-start;

  direction:rtl;
}


.brand-text strong{
  font-family:"Vazirmatn",Tahoma,sans-serif;

  font-size:22px;

  line-height:1.3;

  font-weight:600;

  white-space:nowrap;
}


.brand-text small{
  font-family:Georgia,"Times New Roman",serif;

  font-size:13px;

  letter-spacing:1.5px;

  color:#f1f1f1;

  direction:ltr;

  margin-top:5px;

  white-space:nowrap;
}


/* =========================================================
   NAVIGATION
========================================================= */

.main-nav{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:50px;

  margin-right:auto;

  margin-left:auto;
}


.main-nav a{
  color:#f3f5f7;

  font-size:16px;

  white-space:nowrap;

  transition:.25s;
}


.main-nav a:hover{
  color:var(--gold2);
}


.nav-cta{
  min-width:180px;

  height:54px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:12px;

  border:1px solid var(--gold);

  border-radius:30px;

  color:var(--gold2);

  font-size:15px;

  transition:.25s;

  white-space:nowrap;
}


.nav-cta:hover{
  background:var(--gold);

  color:#091827;
}


.calendar-icon{
  font-size:18px;
}


.menu-btn{
  display:none;

  border:0;

  background:none;

  color:#fff;

  font-size:28px;

  cursor:pointer;
}


/* =========================================================
   HERO
========================================================= */

.hero{
  min-height:700px;

  height:calc(100vh - 183px);

  max-height:850px;

  position:relative;

  overflow:hidden;

  color:#fff;

  background:#102a44;
}


.hero-image{
  position:absolute;

  inset:0;

  background-image:url("../assets/hero.webp");

  background-repeat:no-repeat;

  background-size:90% 100%;

  background-position:center center;

  transform:scale(1.01);
}


.hero-shade{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(3,16,30,.86) 0%,
      rgba(4,18,32,.67) 28%,
      rgba(4,18,32,.27) 54%,
      rgba(4,18,32,.05) 78%,
      rgba(4,18,32,.15) 100%
    );
}


.hero-container{
  position:relative;

  height:100%;
}


/* =========================================================
   HERO TEXT
========================================================= */

.hero-copy{
  position:absolute;

  left:0;

  top:50%;

  transform:translateY(-53%);

  width:570px;

  direction:rtl;

  text-align:right;

  z-index:4;
}


.eyebrow{
  display:flex;

  align-items:center;

  justify-content:flex-start;

  gap:14px;

  color:var(--gold2);

  font-size:16px;

  margin-bottom:22px;
}


.eyebrow-line{
  width:70px;

  height:1px;

  background:var(--gold2);

  display:block;
}


.hero-copy h1{
  margin:0 0 22px;

  font-family:"Vazirmatn",Tahoma,sans-serif;

  font-size:clamp(52px,5vw,82px);

  line-height:1.35;

  font-weight:500;

  letter-spacing:-2px;
}


.hero-copy h1 em{
  display:inline-block;

  color:var(--gold2);

  font-style:normal;

  font-weight:500;
}


.hero-copy p{
  max-width:520px;

  margin:0 0 30px;

  color:#f1f4f6;

  font-size:17px;

  line-height:2;

  text-align:right;
}


.hero-actions{
  display:flex;

  align-items:center;

  justify-content:flex-start;

  gap:14px;

  direction:rtl;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
  min-height:52px;

  padding:10px 28px;

  border-radius:30px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:12px;

  font-size:14px;

  font-weight:600;

  transition:.25s;
}


.btn-gold{
  background:var(--gold);

  color:#111d28;
}


.btn-gold:hover{
  background:var(--gold2);

  transform:translateY(-2px);
}


.btn-outline{
  border:1px solid rgba(255,255,255,.65);

  color:#fff;

  background:rgba(0,0,0,.08);
}


.btn-outline:hover{
  border-color:var(--gold2);

  color:var(--gold2);
}


.btn-dark{
  background:var(--navy);

  color:#fff;
}


.btn-dark:hover{
  background:var(--navy2);

  transform:translateY(-2px);
}


/* =========================================================
   FOUR FEATURES
========================================================= */

.hero-features{
  position:absolute;

  left:410px;

  bottom:15px;

  width:500px;

  min-height:110px;

  z-index:6;

  display:grid;

  grid-template-columns:repeat(4,1fr);

  direction:rtl;

  background:rgba(5,20,31,.91);

  border:1px solid rgba(255,255,255,.35);

  border-radius:18px;

  box-shadow:0 18px 45px rgba(0,0,0,.28);

  backdrop-filter:blur(10px);

  overflow:hidden;
}


.hero-feature{
  min-width:0;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:14px 9px;

  position:relative;
}


.hero-feature:not(:last-child)::after{
  content:"";

  position:absolute;

  left:0;

  top:20px;

  bottom:20px;

  width:1px;

  background:rgba(255,255,255,.18);
}


.feature-icon{
  width:38px;

  height:38px;

  color:var(--gold2);

  margin-bottom:6px;
}


.feature-icon svg{
  width:100%;

  height:100%;
}


.hero-feature strong{
  color:var(--gold2);

  font-size:12px;

  font-weight:700;

  line-height:1.6;

  white-space:nowrap;
}


.hero-feature span{
  color:#fff;

  font-size:10px;

  line-height:1.6;

  margin-top:2px;

  white-space:nowrap;
}


/* =========================================================
   SCROLL
========================================================= */

.scroll-cue{
  position:absolute;

  bottom:12px;

  left:50%;

  transform:translateX(-50%);

  color:#fff;

  font-size:22px;

  opacity:.75;

  z-index:7;
}


/* =========================================================
   TRUST
========================================================= */

.trust-strip{
  background:#061a2d;

  color:#fff;
}


.trust-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  min-height:92px;
}


.trust-grid>div{
  display:flex;

  align-items:center;

  justify-content:center;

  gap:14px;

  border-left:1px solid rgba(255,255,255,.12);

  padding:15px;
}


.trust-grid>div:last-child{
  border-left:0;
}


.trust-grid b{
  color:var(--gold2);

  font-size:20px;

  font-weight:500;
}


.trust-grid span{
  font-size:12px;

  color:#e0e6eb;
}


/* =========================================================
   SECTIONS
========================================================= */

.section{
  padding:105px 0;
}


.split{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:90px;

  align-items:center;
}


.kicker{
  color:#b28a3b;

  font-size:11px;

  font-weight:700;

  letter-spacing:2px;

  direction:ltr;

  display:inline-block;
}


.section-copy h2,
.section-head h2,
.location h2,
.contact h2,
.final-cta h2{
  font-family:"Vazirmatn",Tahoma,sans-serif;

  font-size:clamp(34px,4vw,52px);

  font-weight:500;

  line-height:1.4;

  margin:12px 0 22px;
}


.section-copy>p,
.section-head>p{
  color:var(--muted);

  font-size:15px;

  max-width:650px;
}


.feature-list{
  margin-top:35px;

  display:grid;

  gap:20px;
}


.feature-list>div{
  display:flex;

  gap:15px;
}


.feature-list>div>span{
  color:var(--gold);

  font-size:18px;
}


.feature-list b{
  font-size:14px;
}


.feature-list p{
  color:var(--muted);

  font-size:12px;

  margin:3px 0 0;
}


/* =========================================================
   ABOUT IMAGE
========================================================= */

.about-card{
  position:relative;

  padding:0 0 25px 25px;
}


.about-card:before{
  content:"";

  position:absolute;

  left:0;

  bottom:0;

  width:65%;

  height:70%;

  background:var(--cream);

  z-index:0;
}


.about-image{
  position:relative;

  z-index:1;

  aspect-ratio:4/5;

  overflow:hidden;

  border-radius:5px;

  box-shadow:var(--shadow);
}


.about-image img{
  width:100%;

  height:100%;

  object-fit:cover;

  display:block;
}


.about-caption{
  position:absolute;

  z-index:2;

  right:-20px;

  bottom:0;

  background:var(--navy);

  color:#fff;

  padding:18px 22px;

  display:flex;

  flex-direction:column;

  gap:3px;

  box-shadow:0 15px 35px rgba(0,0,0,.2);
}


.about-caption span{
  font-size:9px;

  letter-spacing:3px;

  color:var(--gold2);
}


.about-caption strong{
  font-size:16px;
}


/* =========================================================
   DARK SECTION
========================================================= */

.dark-section{
  background:var(--navy);

  color:#fff;
}


.section-head{
  display:flex;

  justify-content:space-between;

  gap:40px;

  align-items:end;

  margin-bottom:45px;
}


.section-head.light p{
  color:#aeb8c4;
}


/* =========================================================
   ROOMS
========================================================= */

.room-grid{
  display:flex;

  justify-content:center;

  align-items:center;

  width:100%;
}


.room-card{
  min-height:480px;

  position:relative;

  overflow:hidden;

  border-radius:5px;

  background:#16283b;
}


.room-card img{
  width:100%;

  height:100%;

  object-fit:cover;

  display:block;
}


.room-card:after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      0deg,
      rgba(2,10,18,.9),
      transparent 65%
    );
}


.room-overlay{
  position:absolute;

  z-index:20;

  bottom:0;

  right:0;

  left:0;

  padding:30px;
}


.room-overlay span{
  color:var(--gold2);

  font-size:10px;

  letter-spacing:2px;
}


.room-overlay h3{
  font-size:28px;

  font-weight:500;

  margin:5px 0;
}


.room-overlay p{
  font-size:12px;

  color:#d3dbe4;

  max-width:450px;
}


.room-overlay a{
  color:var(--gold2);

  font-size:12px;
}


.info-card{
  border:1px solid rgba(255,255,255,.13);

  padding:34px 30px;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  min-height:480px;

  background:rgba(255,255,255,.025);
}


.info-icon{
  font-size:42px;

  color:var(--gold2);

  margin-bottom:auto;
}


.info-card h3{
  font-size:28px;

  font-weight:500;

  margin-bottom:8px;
}


.info-card p{
  font-size:12px;

  color:#aeb8c4;
}


.info-card a{
  font-size:12px;

  color:var(--gold2);

  direction:ltr;

  text-align:right;
}


/* =========================================================
   SERVICES
========================================================= */

.services{
  background:var(--cream);
}


.services-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  border-top:1px solid #ddd5c7;
}


.services-grid article{
  padding:40px 28px;

  border-left:1px solid #ddd5c7;
}


.services-grid article:last-child{
  border-left:0;
}


.service-icon{
  font-size:28px;

  color:var(--gold);

  margin-bottom:24px;
}


.services-grid h3{
  font-size:21px;

  font-weight:500;
}


.services-grid p{
  font-size:12px;

  color:var(--muted);
}


/* =========================================================
   LOCATION
========================================================= */

.location{
  padding:100px 0;

  background:#fff;
}


.location-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:80px;

  align-items:center;
}


.location-copy>p{
  font-size:16px;

  color:var(--muted);
}


.address-box{
  display:flex;

  gap:15px;

  margin:30px 0;

  padding:20px 0;

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);
}


.address-box>span{
  font-size:28px;

  color:var(--gold);
}


.address-box b{
  display:block;

  font-size:11px;

  color:var(--muted);

  margin-bottom:4px;
}


.address-box strong{
  font-size:12px;

  font-weight:500;

  direction:ltr;

  text-align:right;

  display:block;
}


/* =========================================================
   LEAFLET MAP
========================================================= */

.map-card{
  position:relative;

  width:100%;

  height:480px;

  min-height:480px;

  overflow:hidden;

  border-radius:20px;

  background:#e9e5dd;

  box-shadow:var(--shadow);

  border:1px solid rgba(7,26,45,.08);
}


#hotel-map{
  width:100%;

  height:100%;

  min-height:480px;

  z-index:1;
}


/* جلوگیری از خراب شدن تصاویر Leaflet توسط CSS عمومی سایت */

#hotel-map img{
  max-width:none;
}


/* =========================================================
   LEAFLET FONT
========================================================= */

#hotel-map,
#hotel-map .leaflet-control,
#hotel-map .leaflet-popup-content{
  font-family:"Vazirmatn",Tahoma,Arial,sans-serif;
}


/* =========================================================
   LEAFLET CONTROLS
========================================================= */

.leaflet-control-zoom{
  border:0 !important;

  box-shadow:0 5px 18px rgba(0,0,0,.18) !important;
}


.leaflet-control-zoom a{
  width:38px !important;

  height:38px !important;

  line-height:38px !important;

  color:var(--navy) !important;

  background:#fff !important;

  border:0 !important;

  font-size:18px !important;
}


.leaflet-control-zoom a:hover{
  color:var(--gold) !important;

  background:#fff !important;
}


.leaflet-control-attribution{
  font-family:Tahoma,Arial,sans-serif;

  font-size:9px;

  background:rgba(255,255,255,.85) !important;
}


/* =========================================================
   CUSTOM LOCATION BUTTON
========================================================= */

.hotel-location-button{
  width:38px;

  height:38px;

  padding:0;

  margin-top:8px;

  border:0;

  border-radius:8px;

  background:#fff;

  color:var(--navy);

  cursor:pointer;

  font-size:18px;

  line-height:38px;

  text-align:center;

  box-shadow:0 5px 15px rgba(0,0,0,.2);

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;
}


.hotel-location-button:hover{
  background:var(--gold);

  color:var(--navy);

  transform:translateY(-1px);
}


/* =========================================================
   HOTEL MARKER
========================================================= */

.hotel-marker-icon{
  width:52px;

  height:52px;

  border-radius:50%;

  background:var(--navy);

  border:4px solid var(--gold);

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:24px;

  box-shadow:
    0 6px 18px rgba(0,0,0,.35);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.hotel-marker-icon:hover{
  transform:scale(1.08);

  box-shadow:
    0 9px 24px rgba(0,0,0,.4);
}


/* =========================================================
   LEAFLET POPUP
========================================================= */

.leaflet-popup-content-wrapper{
  border-radius:14px;

  padding:0;

  box-shadow:
    0 12px 35px rgba(0,0,0,.22);
}


.leaflet-popup-content{
  margin:0 !important;

  direction:rtl;

  text-align:right;

  min-width:240px;
}


.leaflet-popup-tip{
  box-shadow:2px 2px 5px rgba(0,0,0,.08);
}


.hotel-map-popup{
  min-width:240px;

  padding:18px;

  direction:rtl;

  text-align:right;
}


.hotel-map-popup h3{
  margin:0 0 10px;

  color:var(--navy);

  font-family:"Vazirmatn",Tahoma,sans-serif;

  font-size:17px;

  font-weight:700;

  line-height:1.7;
}


.hotel-map-popup p{
  margin:4px 0;

  color:#596675;

  font-size:12px;

  line-height:1.9;
}


.hotel-route-btn{
  display:block;

  margin-top:13px;

  padding:9px 14px;

  border-radius:8px;

  background:var(--navy);

  color:#fff !important;

  text-decoration:none;

  text-align:center;

  font-family:"Vazirmatn",Tahoma,Arial,sans-serif;

  font-size:12px;

  transition:
    background .25s ease,
    transform .25s ease;
}


.hotel-route-btn:hover{
  background:var(--gold);

  color:var(--navy) !important;

  transform:translateY(-1px);
}


/* =========================================================
   LOCATION BUTTON
========================================================= */

.location-copy .btn{
  margin-top:10px;
}


/* =========================================================
   CONTACT
========================================================= */

.contact{
  background:#f8f6f1;
}


.contact-grid{
  display:grid;

  grid-template-columns:1.5fr .8fr;

  gap:80px;

  align-items:center;
}


.contact-main p{
  color:var(--muted);

  max-width:600px;
}


.phone-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:12px;

  margin:35px 0;
}


.phone-grid a{
  background:#fff;

  border:1px solid var(--line);

  padding:18px 16px;

  display:flex;

  flex-direction:column;

  gap:5px;

  transition:.2s;
}


.phone-grid a:hover{
  border-color:var(--gold);

  transform:translateY(-2px);
}


.phone-grid small{
  font-size:8px;

  letter-spacing:2px;

  color:var(--muted);
}


.phone-grid strong{
  font-size:13px;

  direction:ltr;

  text-align:right;
}


.contact-links{
  display:flex;

  gap:28px;

  font-size:12px;

  color:var(--gold);

  direction:ltr;
}


/* =========================================================
   QR
========================================================= */

.qr-card{
  width:190px;

  background:#fff;

  padding:12px;

  border:1px solid var(--line);

  box-shadow:var(--shadow);

  margin:0 auto;
}


.qr-card img{
  width:165px;

  height:165px;

  object-fit:contain;

  display:block;

  margin:0 auto;
}


.qr-card p{
  font-size:9px;

  color:var(--muted);

  text-align:center;

  margin:8px 0 0;
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta{
  background:var(--navy2);

  color:#fff;

  padding:65px 0;
}


.final-inner{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;
}


.final-cta h2{
  margin:8px 0 0;

  font-size:40px;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
  background:#061322;

  color:#aab5c1;

  padding:65px 0 20px;
}


.footer-grid{
  display:grid;

  grid-template-columns:2fr 1fr 1fr 1fr;

  gap:35px;
}


.footer .brand{
  margin-bottom:15px;
}


.footer .brand-logo{
  width:65px;

  height:65px;
}


.footer p{
  font-size:11px;

  line-height:2;

  color:#8995a2;
}


.footer b{
  color:#e3e8ed;

  font-size:11px;
}


.footer a:hover{
  color:var(--gold2);
}


.copyright{
  border-top:1px solid rgba(255,255,255,.08);

  margin-top:45px;

  padding-top:20px;

  font-size:9px;

  color:#697684;

  direction:ltr;

  text-align:left;
}


.floating-call{
  display:none;

  position:fixed;

  z-index:3000;

  bottom:20px;

  left:20px;

  width:54px;

  height:54px;

  border-radius:50%;

  background:var(--gold);

  color:#0b1726;

  place-items:center;

  font-size:23px;

  box-shadow:0 10px 25px rgba(0,0,0,.2);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

  .container{
    width:min(100% - 50px,1380px);
  }


  .nav{
    gap:20px;
  }


  .main-nav{
    gap:22px;
  }


  .main-nav a{
    font-size:13px;
  }


  .hero-copy{
    width:520px;
  }


  .hero-features{
    width:520px;

    left:250px;
  }


  .location-grid{
    gap:45px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:800px){

  .container{
    width:calc(100% - 28px);
  }


  /* TOPBAR */

  .topbar{
    height:auto;

    padding:9px 0;
  }


  .top-contact{
    display:none;
  }


  .topbar-inner{
    justify-content:center;
  }


  /* HEADER */

  .header{
    height:85px;
  }


  .nav{
    gap:10px;
  }


  .brand-logo{
    width:58px;

    height:58px;
  }


  .brand-text strong{
    font-size:16px;
  }


  .brand-text small{
    font-size:9px;
  }


  .main-nav,
  .nav-cta{
    display:none;
  }


  .menu-btn{
    display:block;

    margin-right:auto;
  }


  /* =====================================================
     HERO MOBILE
  ====================================================== */

  .hero{
    height:760px;

    min-height:760px;

    max-height:none;
  }


  .hero-image{
    background-size:cover;

    background-position:80% 85%;

    transform:none;
  }


  .hero-shade{
    background:
      linear-gradient(
        180deg,
        rgba(3,16,30,.58),
        rgba(3,16,30,.75)
      );
  }


  .hero-copy{
    left:14px;

    right:14px;

    width:auto;

    top:40px;

    transform:none;

    text-align:right;
  }


  .hero-copy h1{
    font-size:45px;

    letter-spacing:-1px;
  }


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


  .hero-actions{
    flex-wrap:wrap;
  }


  /* FEATURES */

  .hero-features{
    left:14px;

    right:14px;

    bottom:28px;

    width:auto;

    min-height:120px;

    grid-template-columns:repeat(2,1fr);
  }


  .hero-feature{
    padding:10px 5px;
  }


  .hero-feature strong{
    font-size:11px;
  }


  .hero-feature span{
    font-size:9px;
  }


  .feature-icon{
    width:32px;

    height:32px;
  }


  /* =====================================================
     TRUST
  ====================================================== */

  .trust-grid{
    grid-template-columns:1fr;
  }


  .trust-grid>div{
    border-left:0;

    border-bottom:1px solid rgba(255,255,255,.1);

    padding:12px 0;
  }


  /* =====================================================
     SECTIONS
  ====================================================== */

  .section{
    padding:75px 0;
  }


  .split,
  .location-grid,
  .contact-grid{
    grid-template-columns:1fr;

    gap:45px;
  }


  /* =====================================================
     ABOUT
  ====================================================== */

  .about-card{
    padding-left:14px;
  }


  .about-caption{
    right:-4px;
  }


  /* =====================================================
     HEADINGS
  ====================================================== */

  .section-head{
    display:block;
  }


  .section-head p{
    margin-top:20px;
  }


  /* =====================================================
     ROOMS
  ====================================================== */

  .room-grid{
    grid-template-columns:1fr;
  }


  .room-card{
    min-height:430px;
  }


  .info-card{
    min-height:300px;
  }


  /* =====================================================
     SERVICES
  ====================================================== */

  .services-grid{
    grid-template-columns:1fr;
  }


  .services-grid article{
    border-left:0;

    border-bottom:1px solid #ddd5c7;
  }


  /* =====================================================
     LEAFLET MAP MOBILE
  ====================================================== */

  .map-card{
    width:100%;

    height:380px;

    min-height:380px;

    border-radius:18px;

    box-shadow:
      0 14px 35px rgba(0,0,0,.13);
  }


  #hotel-map{
    width:100%;

    height:380px;

    min-height:380px;
  }


  .leaflet-control-zoom a{
    width:36px !important;

    height:36px !important;

    line-height:36px !important;
  }


  .hotel-location-button{
    width:36px;

    height:36px;

    line-height:36px;
  }


  .hotel-map-popup{
    min-width:205px;

    padding:15px;
  }


  .hotel-map-popup h3{
    font-size:15px;
  }


  .hotel-map-popup p{
    font-size:11px;
  }


  /* =====================================================
     CONTACT
  ====================================================== */

  .phone-grid{
    grid-template-columns:1fr;
  }


  /* =====================================================
     FINAL CTA
  ====================================================== */

  .final-inner{
    display:block;
  }


  .final-cta .btn{
    margin-top:25px;
  }


  /* =====================================================
     FOOTER
  ====================================================== */

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }


  .footer-grid>div:first-child{
    grid-column:1/-1;
  }


  .contact-links{
    flex-direction:column;

    gap:8px;
  }


  .floating-call{
    display:grid;
  }


  /* =====================================================
     MOBILE LOGOS
  ====================================================== */

  .brand{
    display:flex;

    align-items:center;

    gap:18px;
  }


  .hotel-brand{
    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;
  }


  .hotel-logo{
    height:70px;

    width:auto;

    object-fit:contain;
  }


  .tadbir-link{
    display:flex;

    align-items:center;

    text-decoration:none;
  }


  .tadbir-logo{
    height:40px;

    width:auto;

    object-fit:contain;

    transition:
      transform .3s ease,
      opacity .3s ease;
  }


  .tadbir-link:hover .tadbir-logo{
    transform:scale(1.05);

    opacity:.85;
  }

}


/* =========================================================
   ROOM SLIDESHOW
========================================================= */

.room-card.featured{
  width:min(1000px,100%);

  min-height:620px;
}


.room-slider{
  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  overflow:hidden;
}


.room-slides{
  position:absolute;

  inset:0;

  width:100%;

  height:100%;
}


.room-slide{
  position:absolute !important;

  inset:0;

  width:100% !important;

  height:100% !important;

  object-fit:cover;

  opacity:0;

  visibility:hidden;

  transition:
    opacity .8s ease,
    visibility .8s ease;

  display:block !important;

  z-index:1;
}


.room-slide.active{
  opacity:1;

  visibility:visible;

  z-index:2;
}


/* =========================================================
   ROOM IMAGE OVERLAY
========================================================= */

.room-slider::after{
  content:"";

  position:absolute;

  inset:0;

  z-index:3;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.02) 25%,
      rgba(0,0,0,.78) 100%
    );
}


/* =========================================================
   ROOM SLIDER BUTTONS
========================================================= */

.room-slider-btn{
  position:absolute;

  top:50%;

  transform:translateY(-50%);

  z-index:10;

  width:44px;

  height:44px;

  padding:0;

  border:1px solid rgba(255,255,255,.7);

  border-radius:50%;

  background:rgba(7,26,45,.65);

  color:#fff;

  font-size:32px;

  line-height:40px;

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  transition:all .25s ease;
}


.room-slider-btn:hover{
  background:var(--gold);

  color:#071a2d;

  border-color:var(--gold);
}


.room-prev{
  left:18px;
}


.room-next{
  right:18px;
}


/* =========================================================
   ROOM DOTS
========================================================= */

.room-dots{
  position:absolute;

  bottom:18px;

  left:50%;

  transform:translateX(-50%);

  z-index:10;

  display:flex;

  align-items:center;

  gap:7px;

  direction:ltr;
}


.room-dot{
  width:9px;

  height:9px;

  padding:0;

  border:1px solid #fff;

  border-radius:50%;

  background:transparent;

  cursor:pointer;

  transition:all .3s ease;
}


.room-dot.active{
  width:25px;

  border-radius:10px;

  background:var(--gold2);

  border-color:var(--gold2);
}


/* =========================================================
   ROOM OVERLAY
========================================================= */

.room-card.featured .room-overlay{
  position:absolute;

  z-index:20;

  right:0;

  left:0;

  bottom:0;

  padding:30px;
}


/* =========================================================
   MOBILE ROOM SLIDESHOW
========================================================= */

@media(max-width:800px){

  .room-card.featured{
    min-height:520px;
  }


  .room-slider-btn{
    width:38px;

    height:38px;

    font-size:27px;
  }


  .room-prev{
    left:10px;
  }


  .room-next{
    right:10px;
  }


  .room-dots{
    bottom:12px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .container{
    width:calc(100% - 22px);
  }


  .header{
    height:78px;
  }


  .brand-logo{
    width:52px;

    height:52px;
  }


  .brand-text strong{
    font-size:14px;
  }


  .brand-text small{
    font-size:8px;
  }


  .hero{
    height:730px;

    min-height:730px;
  }


  .hero-copy{
    top:30px;
  }


  .hero-copy h1{
    font-size:38px;
  }


  .hero-copy p{
    font-size:13px;

    line-height:1.9;
  }


  .hero-features{
    bottom:20px;
  }


  .hero-feature strong{
    font-size:10px;
  }


  .hero-feature span{
    font-size:8px;
  }


  .map-card{
    height:330px;

    min-height:330px;

    border-radius:15px;
  }


  #hotel-map{
    height:330px;

    min-height:330px;
  }


  .room-card.featured{
    min-height:450px;
  }


  .room-overlay{
    padding:20px;
  }


  .room-overlay h3{
    font-size:23px;
  }


  .final-cta h2{
    font-size:30px;
  }


  .footer-grid{
    grid-template-columns:1fr;
  }


  .footer-grid>div:first-child{
    grid-column:auto;
  }

}

/* =========================================
   HOTEL LEAFLET MAP
========================================= */

.map-card {
  position: relative;
  width: 100%;
  min-height: 480px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.15);
}

#hotel-map {
  width: 100%;
  height: 480px;
  min-height: 480px;
}

/* Leaflet popup */

.leaflet-popup-content-wrapper {
  border-radius: 14px;
}

.leaflet-popup-content {
  margin: 15px;
  direction: rtl;
  text-align: right;
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
}

/* Hotel popup */

.hotel-map-popup {
  min-width: 220px;
  direction: rtl;
  text-align: right;
}

.hotel-map-popup h3 {
  margin: 0 0 8px;
  color: #071a2d;
  font-size: 17px;
}

.hotel-map-popup p {
  margin: 5px 0;
  color: #555;
  font-size: 13px;
  line-height: 1.8;
}

.hotel-route-btn {
  display: block;
  margin-top: 12px;
  padding: 9px 14px;
  border-radius: 8px;

  background: #071a2d;
  color: #fff;

  text-decoration: none;
  text-align: center;

  font-size: 12px;
  transition: .25s ease;
}

.hotel-route-btn:hover {
  background: #c7a35a;
  color: #fff;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

  .map-card {
    min-height: 400px;
    border-radius: 18px;
  }

  #hotel-map {
    height: 400px;
    min-height: 400px;
  }

}