html{
  scroll-behavior: smooth;
}

/* =========================================================
   Page shell
   ========================================================= */

.guidePage{
  padding: 26px 0 80px;
  background:
    radial-gradient(circle at top center, rgba(24,60,134,.05), transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, #f5f8fc 100%);
}

/* =========================================================
   Sticky rail
   ========================================================= */

.guideStickyHelp{
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg,#f7fbfd 0%,#f2f9fc 100%);
  border-inline-start: 4px solid #25b8c8;
}

.guideStickyHelp__title{
  margin-bottom: 10px;
  color: #0f2345;
  font-size: .94rem;
  font-weight: 900;
}

.guideStickyHelp__item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  color: #6c7b92;
  font-size: .92rem;
  border-bottom: 1px solid rgba(16,33,59,.06);
}

.guideStickyHelp__item:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.guideStickyHelp__item strong{
  color: #0f2345;
  font-size: 1.08rem;
  font-weight: 900;
}

html[dir="rtl"] .guideToc a:hover{
  transform: translateX(-2px);
}

html[dir="ltr"] .guideToc a:hover{
  transform: translateX(2px);
}

/* =========================================================
   Back button
   ========================================================= */

.guideBack{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  text-decoration:none;
  color:#25b8c8;
  font-weight:800;
  font-size:.98rem;
}

.guideBack:hover{
  text-decoration:none;
  opacity:.92;
}

.guideBack__arrow{
  font-size:1.08rem;
  line-height:1;
}

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

.guideHeroCard{
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 30px 24px 22px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 10%, rgba(63,182,200,.14), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(24,60,134,.10), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(17, 50, 100, .08);
  box-shadow: 0 20px 45px rgba(15, 23, 42, .06);
  text-align: center;
}

.guideHeroCard__kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(24,60,134,.08);
  color: #1a4c9b;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 18px;
}

.guideDetailTitle{
  margin: 0;
  color: #183c86;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.guideQuickFacts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  max-width:900px;
  margin:20px auto 0;
}

.guideQuickFact{
  position: relative;
  overflow: hidden;
  padding:16px 18px;
  border-radius:20px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(24,60,134,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
}

.guideQuickFact::after{
  content:"";
  position:absolute;
  inset-inline:18px;
  bottom:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#25b8c8 0%, #183c86 100%);
  opacity:0;
  transform:scaleX(.7);
  transform-origin:center;
  transition:opacity .24s ease, transform .24s ease;
}

.guideQuickFact:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 28px rgba(15,23,42,.08);
  border-color:rgba(37,184,200,.20);
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}

.guideQuickFact:hover::after{
  opacity:1;
  transform:scaleX(1);
}

.guideQuickFact__label{
  display:block;
  margin-bottom:6px;
  color:#6a7b96;
  font-size:.82rem;
  font-weight:700;
}

.guideQuickFact strong{
  display:block;
  color:#10213b;
  font-size:1rem;
  font-weight:800;
}
/* =========================================================
   Before arrival — polished
   ========================================================= */

.guideMiniPrep{
  margin-bottom: 22px;
}

.guideMiniPrep__card{
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(37,184,200,.10), transparent 24%),
    radial-gradient(circle at 100% 100%, rgba(24,60,134,.07), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(16,33,59,.06);
  box-shadow: 0 18px 40px rgba(15,23,42,.05);
}

.guideMiniPrep__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.guideMiniPrep__title{
  margin:0 0 8px;
  color:#183c86;
  font-size:1.34rem;
  font-weight:900;
  line-height:1.2;
}

.guideMiniPrep__intro{
  max-width:780px;
  margin:0;
  color:#65758d;
  font-size:.98rem;
  line-height:1.8;
}

/* 4 in one row on large screens */
.guideMiniPrep__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.guidePrepItem{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:14px;
  min-height:178px;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(16,33,59,.06);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease,
    background .24s ease;
}

.guidePrepItem::after{
  content:"";
  position:absolute;
  inset-inline:18px;
  bottom:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#25b8c8 0%, #183c86 100%);
  opacity:0;
  transform:scaleX(.7);
  transform-origin:center;
  transition:opacity .24s ease, transform .24s ease;
}

.guidePrepItem:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 32px rgba(15,23,42,.08);
  border-color:rgba(37,184,200,.22);
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}

.guidePrepItem:hover::after{
  opacity:1;
  transform:scaleX(1);
}

.guidePrepItem__icon{
  width:52px;
  height:52px;
  min-width:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:linear-gradient(180deg,#edf9fb 0%, #f5fbfe 100%);
  color:#25b8c8;
  box-shadow:
    inset 0 0 0 1px rgba(37,184,200,.14),
    0 8px 18px rgba(37,184,200,.08);
}

.guidePrepItem__icon svg{
  width:22px;
  height:22px;
}

.guidePrepItem__body{
  min-width:0;
  width:100%;
}

.guidePrepItem__title{
  margin:0 0 8px;
  color:#10213b;
  font-size:1rem;
  font-weight:850;
  line-height:1.35;
}

.guidePrepItem__text{
  margin:0;
  color:#60718a;
  font-size:.95rem;
  line-height:1.8;
}

/* English only: make cards feel more balanced */
html[dir="ltr"] .guidePrepItem{
  text-align:left;
}

html[dir="ltr"] .guidePrepItem__title{
  max-width: 90%;
}

html[dir="ltr"] .guidePrepItem__text{
  max-width: 100%;
}

/* RTL */
html[dir="rtl"] .guideMiniPrep__card,
html[dir="rtl"] .guideMiniPrep__title,
html[dir="rtl"] .guideMiniPrep__intro,
html[dir="rtl"] .guidePrepItem,
html[dir="rtl"] .guidePrepItem__body{
  text-align:right;
  direction:rtl;
}

html[dir="ltr"] .guideMiniPrep__intro{
  max-width: 760px;
}

html[dir="ltr"] .guideMiniPrep__title{
  letter-spacing: -.01em;
}

/* animation */
@media (prefers-reduced-motion: no-preference){
  .guidePrepItem{
    opacity:0;
    animation: guidePrepFadeUp .55s ease forwards;
  }

  .guidePrepItem:nth-child(1){ animation-delay:.04s; }
  .guidePrepItem:nth-child(2){ animation-delay:.10s; }
  .guidePrepItem:nth-child(3){ animation-delay:.16s; }
  .guidePrepItem:nth-child(4){ animation-delay:.22s; }

  @keyframes guidePrepFadeUp{
    from{
      opacity:0;
      transform:translateY(14px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }
}

/* breakpoints */
@media (max-width: 1399px){
  .guideMiniPrep__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .guideMiniPrep__card{
    padding:20px 16px;
    border-radius:24px;
  }

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

  .guidePrepItem{
    min-height:auto;
    padding:16px;
    border-radius:18px;
  }

  .guidePrepItem__icon{
    width:46px;
    height:46px;
    min-width:46px;
  }

  .guidePrepItem__title{
    font-size:.98rem;
  }

  .guidePrepItem__text{
    font-size:.93rem;
  }
}

/* =========================================================
   Sections / article shell
   ========================================================= */

.guideSection{
  margin-top: 22px;
}

.guideSection--hotels{
  margin-top: 18px;
}

.guideSectionShell{
  border-radius: 28px;
}

.guideArticle{
  max-width: 100%;
  margin: 0 auto;
}

.rteContent{
  padding: 34px 30px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(16,33,59,.06);
  box-shadow: 0 18px 40px rgba(15,23,42,.05);
}

/* =========================================================
   Anchor offset
   ========================================================= */

#guide-about,
#guide-hotels,
#guide-prayer,
#guide-weather,
#guide-contacts{
  scroll-margin-top: 120px;
}

/* =========================================================
   RTE cleanup
   ========================================================= */

.rteContent [style*="text-align: left"]{
  text-align: inherit !important;
}

.rteContent [style*="text-align: right"]{
  text-align: inherit !important;
}

.rteContent [style*="border-left"]{
  border-left: none !important;
}

.rteContent [style*="border-right"]{
  border-right: none !important;
}

.rteContent > *:first-child{
  margin-top: 0 !important;
}

/* =========================================================
   Typography
   ========================================================= */

.rteContent h2{
  position: relative;
  margin: 0 0 18px;
  padding-bottom: 14px;
  color: #183c86;
  font-weight: 900;
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  line-height: 1.2;
}

.rteContent h2::after{
  content:"";
  display:block;
  width:74px;
  height:4px;
  margin-top:12px;
  border-radius:999px;
  background:linear-gradient(90deg, #25b8c8 0%, #183c86 100%);
}

.rteContent h3{
  margin: 26px 0 10px;
  color: #0f2345;
  font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.5;
}

.rteContent p{
  margin: 0 0 16px;
  color: #5f708c;
  font-size: 1.08rem;
  line-height: 1.95;
}

.rteContent strong{
  color: #0b1a33;
  font-weight: 800;
}

.rteContent a{
  color: #1e72c9;
  font-weight: 800;
  text-decoration: none;
}

.rteContent a:hover{
  text-decoration: underline;
}

.rteContent ul,
.rteContent ol{
  margin: 0 0 22px;
  padding-left: 1.3rem;
}

.rteContent li{
  margin-bottom: 10px;
  color: #4f617d;
}

.rteContent li > p{
  margin-bottom: 8px;
}

.rteContent li::marker{
  color: #25b8c8;
}

/* =========================================================
   Tables
   ========================================================= */

.rteContent table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 18px 0 26px !important;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid #dfe8f2;
  box-shadow: 0 10px 28px rgba(15,23,42,.04);
  background: #fff;
}

.rteContent th,
.rteContent td{
  padding: 18px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #e8eef5 !important;
  vertical-align: middle;
}

.rteContent tr:last-child td{
  border-bottom: 0 !important;
}

.rteContent th{
  background: #f2f6fb !important;
  color: #0f2345;
  font-weight: 800;
  font-size: .95rem;
}

.rteContent td{
  color: #4d5f79;
  font-size: .97rem;
}

.rteContent th p,
.rteContent td p{
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: 1.7 !important;
}

.rteContent tr:hover td{
  background: #fbfdff;
}

/* =========================================================
   Note boxes
   ========================================================= */

.rteContent div[style*="background: rgb(247, 251, 253)"]{
  margin: 22px 0 !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f7fbfd 0%, #f3f9fc 100%) !important;
  border: 1px solid rgba(37,184,200,.18) !important;
  border-inline-start: 4px solid #25b8c8 !important;
  color: #5d6f88 !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.03);
}

.rteContent div[style*="background: rgb(247, 251, 253)"] strong{
  color:#10213b;
}

/* =========================================================
   Hotels
   ========================================================= */

.vg-hotels,
.vg-hotels *{
  box-sizing:border-box;
}

.vg-hotels{
  width:100%;
  margin:0;
  padding:34px 24px 24px;
  border-radius:30px;
  background:
    radial-gradient(circle at top center, rgba(24,60,134,.07), transparent 34%),
    linear-gradient(180deg,#f7f9fc 0%,#f2f5f9 100%);
  border:1px solid rgba(16,33,59,.06);
  box-shadow:0 18px 40px rgba(15,23,42,.05);
}

.vg-hotels__header{
  text-align:center;
  margin-bottom:24px;
}

.vg-hotels__title{
  margin:0 0 10px;
  color:#10213b;
  font-size:clamp(1.8rem, 2.5vw, 2.4rem);
  line-height:1.15;
  font-weight:900;
}

.vg-hotels__intro{
  max-width:760px;
  margin:0 auto 16px;
  color:#5a6880;
  font-size:1rem;
  line-height:1.85;
}

.vg-hotels__note{
  max-width:880px;
  margin:0 auto;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(16,33,59,.08);
  color:#596882;
  font-size:.95rem;
  line-height:1.8;
}

.vg-hotels__note strong{
  color:#10213b;
}

.vg-hotels__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:22px;
  align-items:stretch;
}

.vg-hotel{
  display:flex;
  flex-direction:column;
  min-height:410px;
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid #e5ecf5;
  border-top:4px solid #1b7ed8;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.vg-hotel--featured{
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

.vg-hotel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.vg-hotel__stars{
  color:#d4a514;
  font-size:.95rem;
  letter-spacing:2px;
  line-height:1;
}

.vg-hotel__distance{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  background:#eef4fb;
  color:#1457a6;
  font-size:.74rem;
  font-weight:800;
  white-space:nowrap;
}

.vg-hotel__title{
  margin:0 0 6px;
  color:#10213b;
  font-size:1.12rem;
  line-height:1.35;
  font-weight:800;
}

.vg-hotel__city{
  margin:0 0 14px;
  color:#6a778d;
  font-size:.93rem;
}

.vg-hotel__offer{
  margin-bottom:14px;
  padding:12px 13px;
  border-radius:14px;
  background:#f7fbff;
  border:1px solid #e5eef8;
  min-height:100px;
}

.vg-hotel__label{
  display:block;
  margin-bottom:6px;
  color:#1457a6;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.vg-hotel__offer p{
  margin:0;
  color:#22344d;
  font-size:.95rem;
  line-height:1.75;
}

.vg-hotel__meta{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
  flex:1 1 auto;
}

.vg-hotel__meta p{
  margin:0;
  color:#415067;
  font-size:.94rem;
  line-height:1.65;
  word-break:break-word;
}

.vg-hotel__meta strong{
  color:#10213b;
}

.vg-hotel__meta a{
  color:#1457a6;
  text-decoration:none;
}

.vg-hotel__meta a:hover{
  text-decoration:underline;
}

.vg-hotel__btn{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:46px;
  padding:12px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,#0f5aaa 0%,#1b7ed8 100%);
  color:#fff;
  text-decoration:none;
  font-size:.93rem;
  font-weight:800;
  box-shadow:0 10px 22px rgba(15,90,170,.18);
  transition:transform .2s ease, box-shadow .2s ease;
}

.vg-hotel__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(15,90,170,.22);
  color:#fff;
  text-decoration:none;
}

/* RTL hotels */
.vg-hotels--rtl{
  direction:rtl;
  text-align:right;
}

.vg-hotels--rtl .vg-hotels__header{
  text-align:center;
}

.vg-hotels--rtl .vg-hotel{
  text-align:right;
}

.vg-hotels--rtl .vg-hotel__top{
  flex-direction:row-reverse;
}

.vg-hotels--rtl .vg-hotel__meta p,
.vg-hotels--rtl .vg-hotels__intro,
.vg-hotels--rtl .vg-hotels__note,
.vg-hotels--rtl .vg-hotel__offer p,
.vg-hotels--rtl .vg-hotel__city{
  text-align:right;
}

/* =========================================================
   Arabic RTE
   ========================================================= */

.rteContent--arabic,
html[lang^="ar"] .rteContent{
  direction:rtl;
  text-align:right;
  font-size:1.02rem;
}

.rteContent--arabic p,
html[lang^="ar"] .rteContent p{
  line-height:2.1;
}

.rteContent--arabic h2,
.rteContent--arabic h3,
html[lang^="ar"] .rteContent h2,
html[lang^="ar"] .rteContent h3{
  letter-spacing:0;
}

.rteContent--arabic h2::after,
html[lang^="ar"] .rteContent h2::after{
  margin-right:0;
  margin-left:auto;
}

.rteContent--arabic ul,
.rteContent--arabic ol,
html[lang^="ar"] .rteContent ul,
html[lang^="ar"] .rteContent ol{
  padding-right:1.35rem;
  padding-left:0;
}

.rteContent--arabic th,
.rteContent--arabic td,
html[lang^="ar"] .rteContent th,
html[lang^="ar"] .rteContent td{
  text-align:right;
}

.rteContent--arabic div[style*="background: rgb(247, 251, 253)"],
html[lang^="ar"] .rteContent div[style*="background: rgb(247, 251, 253)"]{
  border-inline-start:0 !important;
  border-inline-end:4px solid #25b8c8 !important;
}

/* =========================================================
   Mobile help
   ========================================================= */

.guideMobileHelp{
  display:none;
  margin-top:22px;
}

.guideMobileHelp__card{
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(16,33,59,.06);
  box-shadow:0 14px 34px rgba(15,23,42,.04);
}

.guideMobileHelp__title{
  margin:0 0 12px;
  color:#183c86;
  font-size:1.05rem;
  font-weight:900;
}

.guideMobileHelp__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.guideMobileHelp__item{
  padding:14px 12px;
  border-radius:16px;
  background:linear-gradient(180deg,#f7fbfd 0%,#f2f9fc 100%);
  border-inline-start:4px solid #25b8c8;
  text-align:center;
}

.guideMobileHelp__item span{
  display:block;
  margin-bottom:6px;
  color:#6c7b92;
  font-size:.88rem;
}

.guideMobileHelp__item strong{
  color:#0f2345;
  font-size:1.08rem;
  font-weight:900;
}

html[dir="rtl"] .guideMobileHelp__item{
  border-inline-start:0;
  border-inline-end:4px solid #25b8c8;
}

/* =========================================================
   Responsive
   ========================================================= */


@media (max-width: 1199px){
  .guideQuickFacts{
    grid-template-columns:1fr;
    max-width:700px;
  }

  .guideHeroCard{
    padding:28px 20px 20px;
  }

  .rteContent{
    padding:28px 22px;
  }
}

@media (max-width: 991px){
  .guideMobileHelp{
    display:block;
  }

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

  .vg-hotels__grid{
    grid-template-columns:1fr;
  }

  .vg-hotel{
    min-height:auto;
  }
}

@media (max-width: 768px){
  .guidePage{
    padding:20px 0 60px;
  }

  .guideDetailTitle{
    font-size:clamp(2.1rem, 9vw, 3.2rem);
  }

  .guideHeroCard{
    border-radius:24px;
  }

  .rteContent{
    padding:20px 16px;
    border-radius:24px;
  }

  .rteContent table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }

  .rteContent th,
  .rteContent td{
    min-width:140px;
  }

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

  .vg-hotels{
    padding:24px 14px 16px;
    border-radius:22px;
  }

  .vg-hotel{
    padding:16px;
    border-radius:18px;
  }

  .vg-hotel__top{
    flex-direction:column;
    align-items:flex-start;
  }

  .vg-hotels--rtl .vg-hotel__top{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================================================
   Hero motion polish
   ========================================================= */

.guideHeroCard{
  transform: translateY(0);
}

.guideQuickFact{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.guideQuickFact:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 28px rgba(15,23,42,.08);
  border-color: rgba(37,184,200,.20);
}

@media (prefers-reduced-motion: no-preference){
  .guideHeroCard{
    opacity: 0;
    animation: guideHeroReveal .65s ease forwards;
  }

  .guideQuickFact{
    opacity: 0;
    animation: guideHeroFactIn .55s ease forwards;
  }

  .guideQuickFact:nth-child(1){ animation-delay: .16s; }
  .guideQuickFact:nth-child(2){ animation-delay: .24s; }
  .guideQuickFact:nth-child(3){ animation-delay: .32s; }

  @keyframes guideHeroReveal{
    from{
      opacity:0;
      transform:translateY(14px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }

  @keyframes guideHeroFactIn{
    from{
      opacity:0;
      transform:translateY(10px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }
}

/* =========================================================
   GUIDE LAYOUT — FINAL REAL FIX
   ========================================================= */

.siteShell,
.guidePage,
.guideShell,
.guideRail,
.guideMain,
.guideMain--content {
  overflow: visible !important;
}

.guideShell {
  display: grid;
  gap: 28px;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px;
}

/* English: rail left, content right */
.guideShell--ltr {
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  direction: ltr;
}

/* Arabic: content left, rail right */
.guideShell--rtl {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  direction: ltr; /* IMPORTANT: do not use rtl on the grid container */
}

.guideMain--content {
  min-width: 0;
  max-width: none;
  margin-top: 0;
  padding-top: 0;
}

.guideRail {
  position: sticky;
  top: 132px;
  align-self: start;
  min-width: 0;
  max-height: calc(100vh - 130px);
}

.guideStickyCard {
  position: relative;
  top: auto;
  z-index: 20;
}

/* Keep Arabic text RTL, but NOT the grid container */
html[dir="rtl"] .guideRail,
html[dir="rtl"] .guideMain--content,
html[dir="rtl"] .guideStickyCard,
html[dir="rtl"] .guideStickyCard__title,
html[dir="rtl"] .guideMiniPrep__card,
html[dir="rtl"] .rteContent,
html[dir="rtl"] .vg-hotels {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .guideMiniPrep__list {
  padding-right: 1.2rem;
  padding-left: 0;
}

/* icons */
.guideToc a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.guideToc__icon {
  width: 22px;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #25b8c8;
  font-size: .95rem;
  line-height: 1;
}

@media (max-width: 1399px) {
  .guideShell--ltr {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .guideShell--rtl {
    grid-template-columns: minmax(0, 1fr) 230px;
  }
}

@media (max-width: 991px) {
  .guideShell,
  .guideShell--ltr,
  .guideShell--rtl {
    grid-template-columns: 1fr;
  }

  .guideRail {
    display: none;
    position: static;
    max-height: none;
  }

  .guideMain--content {
    max-width: none;
  }
}

/* =========================================================
   FINAL ARABIC / RAIL VISUAL FIX
   ========================================================= */

/* bring back the white rail card */
.guideStickyCard{
  padding: 22px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(16,33,59,.08);
  box-shadow: 0 18px 36px rgba(15,23,42,.06);
}

/* top accent line */
.guideStickyCard::before{
  content:"";
  display:block;
  width:42px;
  height:4px;
  margin-bottom:14px;
  border-radius:999px;
  background: linear-gradient(90deg, #25b8c8 0%, #183c86 100%);
}

/* rail title */
.guideStickyCard__title{
  margin: 0 0 14px;
  color: #183c86;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.3;
}

/* quick guide links */
.guideToc{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.guideToc a{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px 10px 16px;
  border-radius:14px;
  color:#546781;
  text-decoration:none;
  font-weight:700;
  line-height:1.4;
  transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.guideToc a::before{
  content:"";
  position:absolute;
  inset-block:10px;
  inset-inline-start:0;
  width:3px;
  border-radius:999px;
  background:transparent;
  transition:background .2s ease;
}

.guideToc a:hover{
  background:#f3f8fc;
  color:#183c86;
  text-decoration:none;
}

.guideToc a.is-active{
  background:linear-gradient(180deg,#eef6fd 0%,#f6fbff 100%);
  color:#183c86;
  box-shadow:inset 0 0 0 1px rgba(24,60,134,.08);
}

.guideToc a.is-active::before{
  background:#25b8c8;
}

.guideToc__icon{
  width:22px;
  min-width:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#25b8c8;
  font-size:.95rem;
  line-height:1;
}

/* help box */
.guideStickyHelp{
  margin-top:16px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg,#f7fbfd 0%,#f2f9fc 100%);
  border-inline-start:4px solid #25b8c8;
}

.guideStickyHelp__title{
  margin-bottom:10px;
  color:#0f2345;
  font-size:.94rem;
  font-weight:900;
}

.guideStickyHelp__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  color:#6c7b92;
  font-size:.92rem;
  border-bottom:1px solid rgba(16,33,59,.06);
}

.guideStickyHelp__item:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.guideStickyHelp__item strong{
  color:#0f2345;
  font-size:1.08rem;
  font-weight:900;
}

/* Arabic alignment */
html[dir="rtl"] .guideStickyCard,
html[dir="rtl"] .guideStickyCard__title,
html[dir="rtl"] .guideToc a,
html[dir="rtl"] .guideStickyHelp,
html[dir="rtl"] .guideStickyHelp__title{
  text-align:right;
}

html[dir="rtl"] .guideToc a{
  padding:10px 16px 10px 12px;
}

/* =========================================================
   FINAL RAIL POLISH
   ========================================================= */

.guideRailStack{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.guideStickyCard{
  padding:22px;
  border-radius:28px;
  background:#ffffff;
  border:1px solid rgba(16,33,59,.08);
  box-shadow:0 18px 36px rgba(15,23,42,.06);
}

.guideStickyCard::before{
  content:"";
  display:block;
  width:42px;
  height:4px;
  margin-bottom:14px;
  border-radius:999px;
  background:linear-gradient(90deg,#25b8c8 0%, #183c86 100%);
}

.guideStickyCard--help::before{
  display:none;
}

.guideStickyCard__title{
  margin:0 0 14px;
  color:#183c86;
  font-size:1rem;
  font-weight:900;
  line-height:1.3;
}

.guideToc{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.guideToc a{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px 11px 14px;
  border-radius:14px;
  color:#5a6d88;
  text-decoration:none;
  font-weight:800;
  line-height:1.4;
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.guideToc a::before{
  content:"";
  position:absolute;
  inset-block:10px;
  inset-inline-start:0;
  width:3px;
  border-radius:999px;
  background:transparent;
  transition:background .2s ease;
}

.guideToc a:hover{
  background:#f4f9fc;
  color:#183c86;
  text-decoration:none;
}

.guideToc a.is-active{
  background:linear-gradient(180deg,#eef6fd 0%,#f7fbff 100%);
  color:#183c86;
  box-shadow:inset 0 0 0 1px rgba(24,60,134,.08);
}

.guideToc a.is-active::before{
  background:#25b8c8;
}

.guideToc__icon{
  width:22px;
  height:22px;
  min-width:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#25b8c8;
  line-height:1;
}

.guideToc__icon svg{
  width:20px;
  height:20px;
  display:block;
}

.guideStickyCard--help{
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.guideStickyHelp{
  margin-top:0;
  padding:18px 16px;
  border-radius:22px;
  background:linear-gradient(180deg,#f7fbfd 0%,#f2f8fc 100%);
  border:1px solid rgba(37,184,200,.10);
  border-inline-start:4px solid #25b8c8;
  box-shadow:0 12px 28px rgba(15,23,42,.04);
}

.guideStickyHelp__title{
  margin:0 0 10px;
  color:#10213b;
  font-size:1rem;
  font-weight:900;
}

.guideStickyHelp__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  color:#71819a;
  font-size:.95rem;
  border-bottom:1px solid rgba(16,33,59,.07);
}

.guideStickyHelp__item:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.guideStickyHelp__item strong{
  color:#10213b;
  font-size:1.15rem;
  font-weight:900;
}

html[dir="rtl"] .guideToc a{
  padding:11px 14px 11px 12px;
  text-align:right;
}

html[dir="rtl"] .guideStickyCard,
html[dir="rtl"] .guideStickyCard__title,
html[dir="rtl"] .guideStickyHelp,
html[dir="rtl"] .guideStickyHelp__title{
  text-align:right;
}

@media (prefers-reduced-motion: no-preference){
  .guideStickyCard--nav{
    opacity:0;
    animation:guideRailFade .45s ease forwards;
  }

  .guideStickyCard--help{
    opacity:0;
    animation:guideRailFade .45s ease .08s forwards;
  }

  @keyframes guideRailFade{
    from{
      opacity:0;
      transform:translateY(10px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }
}

/* =========================================================
   Help card — match nav card style
   ========================================================= */

.guideStickyCard--help{
  padding:22px;
  border-radius:28px;
  background:#ffffff;
  border:1px solid rgba(16,33,59,.08);
  box-shadow:0 18px 36px rgba(15,23,42,.06);
}

.guideStickyCard--help::before{
  content:"";
  display:block;
  width:42px;
  height:4px;
  margin-bottom:14px;
  border-radius:999px;
  background:linear-gradient(90deg,#25b8c8 0%, #183c86 100%);
}

.guideStickyCard--help .guideStickyHelp{
  margin-top:0;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.guideStickyCard--help .guideStickyHelp__title{
  margin:0 0 14px;
  color:#183c86;
  font-size:1rem;
  font-weight:900;
  line-height:1.3;
}

.guideStickyCard--help .guideStickyHelp__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  color:#71819a;
  font-size:.95rem;
  border-bottom:1px solid rgba(16,33,59,.07);
}

.guideStickyCard--help .guideStickyHelp__item:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.guideStickyCard--help .guideStickyHelp__item strong{
  color:#10213b;
  font-size:1.2rem;
  font-weight:900;
  line-height:1;
}

html[dir="rtl"] .guideStickyCard--help,
html[dir="rtl"] .guideStickyCard--help .guideStickyHelp,
html[dir="rtl"] .guideStickyCard--help .guideStickyHelp__title{
  text-align:right;
}

/* =========================================================
   FINAL HOTEL CARD POLISH
   ========================================================= */

.vg-hotels{
  width:100%;
  margin:0;
  padding:34px 24px 24px;
  border-radius:30px;
  background:
    radial-gradient(circle at top center, rgba(24,60,134,.07), transparent 34%),
    linear-gradient(180deg,#f7f9fc 0%,#f2f5f9 100%);
  border:1px solid rgba(16,33,59,.06);
  box-shadow:0 18px 40px rgba(15,23,42,.05);
}

.vg-hotels__header{
  text-align:center;
  margin-bottom:24px;
}

.vg-hotels__title{
  margin:0 0 10px;
  color:#10213b;
  font-size:clamp(1.8rem, 2.5vw, 2.4rem);
  line-height:1.15;
  font-weight:900;
}

.vg-hotels__intro{
  max-width:760px;
  margin:0 auto 16px;
  color:#5a6880;
  font-size:1rem;
  line-height:1.85;
}

.vg-hotels__note{
  max-width:880px;
  margin:0 auto;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(16,33,59,.08);
  color:#596882;
  font-size:.95rem;
  line-height:1.8;
}

.vg-hotels__note strong{
  color:#10213b;
}

.vg-hotels__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:22px;
  align-items:stretch;
}

.vg-hotel{
  display:flex;
  flex-direction:column;
  min-height:430px;
  padding:20px;
  border-radius:24px;
  background:#fff;
  border:1px solid #e5ecf5;
  box-shadow:0 12px 26px rgba(15,23,42,.05);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.vg-hotel:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 32px rgba(15,23,42,.08);
  border-color:rgba(37,184,200,.18);
}

.vg-hotel--featured{
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  border-top:4px solid #1b7ed8;
}

.vg-hotel__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.vg-hotel__stars{
  color:#d4a514;
  font-size:.95rem;
  letter-spacing:2px;
  line-height:1;
}

.vg-hotel__distance{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  background:#eef4fb;
  color:#1457a6;
  font-size:.74rem;
  font-weight:800;
  white-space:nowrap;
}

.vg-hotel__head{
  margin-bottom:14px;
}

.vg-hotel__title{
  margin:0 0 6px;
  color:#10213b;
  font-size:1.12rem;
  line-height:1.35;
  font-weight:800;
}

.vg-hotel__city{
  margin:0;
  color:#6a778d;
  font-size:.93rem;
}

.vg-hotel__offer{
  margin-bottom:14px;
  padding:13px 14px;
  border-radius:16px;
  background:#f7fbff;
  border:1px solid #e5eef8;
}

.vg-hotel__label{
  display:block;
  margin-bottom:6px;
  color:#1457a6;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.vg-hotel__offer p{
  margin:0;
  color:#22344d;
  font-size:.95rem;
  line-height:1.75;
}

.vg-hotel__meta{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:18px;
  flex:1 1 auto;
}

.vg-hotel__meta p{
  margin:0;
  color:#415067;
  font-size:.94rem;
  line-height:1.7;
  word-break:break-word;
}

.vg-hotel__meta strong{
  color:#10213b;
}

.vg-hotel__meta a{
  color:#1457a6;
  text-decoration:none;
}

.vg-hotel__meta a:hover{
  text-decoration:underline;
}

.vg-hotel__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
}

.vg-hotel__action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:11px 14px;
  border-radius:14px;
  background:#f4f8fc;
  border:1px solid #dbe7f2;
  color:#123d73;
  text-decoration:none;
  font-size:.92rem;
  font-weight:800;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.vg-hotel__action:hover{
  transform:translateY(-1px);
  background:#eef6fd;
  border-color:#cfe0f1;
  text-decoration:none;
  color:#0f3769;
}

.vg-hotel__action--primary{
  background:linear-gradient(135deg,#0f5aaa 0%,#1b7ed8 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 20px rgba(15,90,170,.18);
}

.vg-hotel__action--primary:hover{
  color:#fff;
  background:linear-gradient(135deg,#0d529b 0%,#1973c9 100%);
}

.vg-hotels--rtl{
  direction:rtl;
  text-align:right;
}

.vg-hotels--rtl .vg-hotels__header{
  text-align:center;
}

.vg-hotels--rtl .vg-hotel{
  text-align:right;
}

.vg-hotels--rtl .vg-hotel__top{
  flex-direction:row-reverse;
}

@media (prefers-reduced-motion: no-preference){
  .vg-hotel{
    opacity:0;
    animation:vgHotelFade .45s ease forwards;
  }

  .vg-hotel:nth-child(1){ animation-delay:.02s; }
  .vg-hotel:nth-child(2){ animation-delay:.07s; }
  .vg-hotel:nth-child(3){ animation-delay:.12s; }
  .vg-hotel:nth-child(4){ animation-delay:.17s; }
  .vg-hotel:nth-child(5){ animation-delay:.22s; }

  @keyframes vgHotelFade{
    from{
      opacity:0;
      transform:translateY(12px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }
}

@media (max-width: 991px){
  .vg-hotels__grid{
    grid-template-columns:1fr;
  }

  .vg-hotel{
    min-height:auto;
  }
}

@media (max-width: 768px){
  .vg-hotels{
    padding:24px 14px 16px;
    border-radius:22px;
  }

  .vg-hotel{
    padding:16px;
    border-radius:18px;
  }

  .vg-hotel__top{
    flex-direction:column;
    align-items:flex-start;
  }

  .vg-hotels--rtl .vg-hotel__top{
    flex-direction:column;
    align-items:flex-start;
  }

  .vg-hotel__actions{
    flex-direction:column;
  }

  .vg-hotel__action{
    width:100%;
  }
}

.guideMiniPrep__welcome{
  margin-bottom: 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(16,33,59,.08);
}

.guideMiniPrep__welcomeText{
  margin: 0;
  color: #415067;
  font-size: 1rem;
  line-height: 1.9;
}

html[dir="rtl"] .guideMiniPrep__welcome,
html[dir="rtl"] .guideMiniPrep__welcomeText{
  text-align: right;
}

/* =========================================================
   IHG code card — premium gradient + motion
   ========================================================= */

.vg-hotels__ihg{
  margin-top:22px;
  padding:22px;
  border-radius:24px;
  background:
    radial-gradient(circle at top left, rgba(37,184,200,.10), transparent 22%),
    linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);
  border:1px solid rgba(16,33,59,.08);
  box-shadow:0 16px 34px rgba(15,23,42,.05);
}

.vg-hotels__ihgTop{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(280px, .9fr);
  gap:16px;
  align-items:stretch;
  margin-bottom:18px;
}

.vg-hotels__ihgIntro{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.vg-hotels__ihgBadge{
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(24,60,134,.08);
  color:#183c86;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.04em;
}

.vg-hotels__ihgText{
  margin:0;
  color:#44566f;
  font-size:1rem;
  line-height:1.9;
}

.vg-hotels__ihgCodeCard{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  min-height:114px;
  padding:20px 20px 18px;
  border-radius:22px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(135deg, #0f4fa3 0%, #1c73d2 52%, #28b8c8 100%);
  color:#fff;
  box-shadow:
    0 18px 34px rgba(21,88,171,.22),
    inset 0 1px 0 rgba(255,255,255,.10);
  isolation:isolate;
}

.vg-hotels__ihgCodeCard::before{
  content:"";
  position:absolute;
  inset:-40% auto -40% -30%;
  width:60%;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-24deg);
  opacity:.8;
  pointer-events:none;
}

.vg-hotels__ihgCodeCard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events:none;
}

.vg-hotels__ihgCodeLabel{
  position:relative;
  z-index:1;
  font-size:.84rem;
  font-weight:800;
  opacity:.95;
}

.vg-hotels__ihgCodeValue{
  position:relative;
  z-index:1;
  font-size:2rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.08em;
  word-break:break-word;
  text-shadow:0 2px 10px rgba(0,0,0,.12);
}

.vg-hotels__ihgStepsWrap{
  padding-top:16px;
  border-top:1px solid rgba(16,33,59,.08);
}

.vg-hotels__ihgStepsTitle{
  margin:0 0 14px;
  color:#10213b;
  font-size:1.02rem;
  font-weight:900;
  line-height:1.4;
}

.vg-hotels__ihgSteps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.vg-hotels__ihgStep{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  background:#f7fbff;
  border:1px solid #e3edf6;
  color:#51637d;
  line-height:1.75;
}

.vg-hotels__ihgStepNo{
  width:28px;
  height:28px;
  min-width:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(180deg,#eef8fb 0%,#f4fbfe 100%);
  color:#25b8c8;
  font-size:.84rem;
  font-weight:900;
  box-shadow:inset 0 0 0 1px rgba(37,184,200,.16);
}

html[dir="rtl"] .vg-hotels__ihg{
  text-align:right;
}

html[dir="rtl"] .vg-hotels__ihgCodeCard{
  text-align:right;
}

html[dir="rtl"] .vg-hotels__ihgStep{
  text-align:right;
}

@media (prefers-reduced-motion: no-preference){
  .vg-hotels__ihg{
    opacity:0;
    animation:vgIhgFade .55s ease forwards;
  }

  .vg-hotels__ihgCodeCard{
    animation:
      vgIhgFloat 4.2s ease-in-out infinite,
      vgIhgGlow 2.8s ease-in-out infinite alternate;
  }

  .vg-hotels__ihgCodeCard::before{
    animation:vgIhgShine 3.6s ease-in-out infinite;
  }

  @keyframes vgIhgFade{
    from{
      opacity:0;
      transform:translateY(10px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }

  @keyframes vgIhgFloat{
    0%,100%{
      transform:translateY(0);
    }
    50%{
      transform:translateY(-3px);
    }
  }

  @keyframes vgIhgGlow{
    from{
      box-shadow:
        0 18px 34px rgba(21,88,171,.18),
        inset 0 1px 0 rgba(255,255,255,.10);
    }
    to{
      box-shadow:
        0 22px 40px rgba(21,88,171,.28),
        inset 0 1px 0 rgba(255,255,255,.12);
    }
  }

  @keyframes vgIhgShine{
    0%{
      transform:translateX(-120%) skewX(-24deg);
    }
    55%{
      transform:translateX(180%) skewX(-24deg);
    }
    100%{
      transform:translateX(180%) skewX(-24deg);
    }
  }
}

@media (max-width: 991px){
  .vg-hotels__ihgTop{
    grid-template-columns:1fr;
  }

  .vg-hotels__ihgSteps{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px){
  .vg-hotels__ihg{
    padding:18px 16px;
    border-radius:20px;
  }

  .vg-hotels__ihgCodeCard{
    min-height:100px;
    border-radius:18px;
  }

  .vg-hotels__ihgCodeValue{
    font-size:1.6rem;
  }
}