/* ==========================================================================
   Jibhi.co.in — "Shikha" theme
   New OpenCart 3.0.3.8 theme, visually modelled on hotelshikha.com's
   header + hero + footer (same colour scheme), rebuilt for Bootstrap 3.3.5.
   Drop-in replacement for catalog/view/theme/ecomlite/ — see NOTES.md.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Colour & font variables (ported 1:1 from hotelshikha.com)
   -------------------------------------------------------------------- */
:root{
  --default-font:"Roboto",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --heading-font:"Josefin Sans",sans-serif;
  --nav-font:"Poppins",sans-serif;

  --default-color:#40524d;
  --heading-color:#0d1f1a;
  --accent-color:#2f5d50;
  --accent-color-dark:#213a33;
  --surface-color:#ffffff;
  --contrast-color:#ffffff;

  --header-bg:#436e62;
  --topbar-bg:#2a4c43;

  --nav-color:rgba(255,255,255,.7);
  --nav-hover-color:#ffffff;
  --nav-mobile-bg:#ffffff;
  --nav-dropdown-bg:#ffffff;
  --nav-dropdown-color:#40524d;
  --nav-dropdown-hover-color:#2f5d50;

  --light-bg:#f1f6f5;
}

/* --------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------- */
html,body{ overflow-x:hidden; }

body{
  font-family:var(--default-font);
  color:var(--default-color);
  background:#fff;
  font-size:15px;
  line-height:1.7;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--heading-font);
  color:var(--heading-color);
  font-weight:600;
}

a{ color:var(--accent-color); }
a:hover,a:focus{ color:var(--accent-color-dark); text-decoration:none;outline: none; }

/* --------------------------------------------------------------------
   3. Responsive .container schedule (Bootstrap 5 tiers, ported onto
      Bootstrap 3.3.5's fixed-width .container — width:, not max-width:,
      so it wins the cascade over bootstrap.min.css without !important)
   -------------------------------------------------------------------- */
.container{ width:100%; }
@media (min-width:576px){ .container{ width:540px; } }
@media (min-width:768px){ .container{ width:720px; } }
@media (min-width:992px){ .container{ width:960px; } }
@media (min-width:1200px){ .container{ width:1140px; } }
@media (min-width:1400px){ .container{ width:1320px; } }

/* --------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------- */
.btn-book-now{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--accent-color);
  color:#fff;
  padding:10px 22px;
  border-radius:50px;
  font-family:var(--heading-font);
  font-size:14px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:.3s;
  border:2px solid var(--accent-color);
}
.btn-book-now:hover,.btn-book-now:focus{
  background:var(--accent-color-dark);
  border-color:var(--accent-color-dark);
  color:#fff;
}

.btn.btn-primary,
.btn-primary{
  background-color:var(--accent-color);
  border-color:var(--accent-color);
  color:#fff;
  border-radius:50px;
  padding:12px 30px;
  font-family:var(--heading-font);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.btn.btn-primary:hover,
.btn-primary:hover,
.btn.btn-primary:focus{
  background-color:var(--accent-color-dark);
  border-color:var(--accent-color-dark);
  color:#fff;
}

.btn.btn-outline{
  background:transparent;
  border:2px solid var(--accent-color);
  color:var(--accent-color);
  border-radius:50px;
  padding:10px 28px;
  font-family:var(--heading-font);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.btn.btn-outline:hover{ background:var(--accent-color); color:#fff; }

/* --------------------------------------------------------------------
   5. Header — topbar + branding row (full width / 100vw)
   -------------------------------------------------------------------- */
#shikha-header{
  background:var(--header-bg);
  position:relative;
  z-index:997;
}

#shikha-header .topbar{
  background:var(--topbar-bg);
  color:#fff;
  font-size:13px;
  padding:8px 0;
}
#shikha-header .topbar .container{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex-wrap:wrap;
  gap:6px 20px;
  padding-left:15px;
  padding-right:15px;
  box-sizing:border-box;
}
#shikha-header .topbar .contact-info{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}
#shikha-header .topbar .currency-lang{
  display:flex;
  align-items:center;
}
#shikha-header .topbar .contact-info a{
  color:#fff;
  opacity:.92;
}
#shikha-header .topbar .contact-info a:hover{ opacity:1; text-decoration:underline; }
#shikha-header .topbar .contact-info i{ margin-right:6px; }

#shikha-header .branding{
  padding:14px 0;
}
#shikha-header .branding .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* Bootstrap's .container carries a clearfix (::before/::after with
   content:" "; display:table) meant for float layouts. Wherever we turn
   .container into a flex container, those two pseudo-elements become
   extra flex items themselves, splitting justify-content:space-between
   across 4 items instead of 2/3 and pushing the real content away from
   the edges. Strip the clearfix content specifically on every .container
   we flex, so only the real children participate in the flex layout. */
#shikha-header .topbar .container::before,
#shikha-header .topbar .container::after,
#shikha-header .branding .container::before,
#shikha-header .branding .container::after,
.info-page-title .container::before,
.info-page-title .container::after{
  content:none;
  display:none;
}

#shikha-header .logo{
  display:flex;
  align-items:center;
  line-height:1;
  flex-shrink:1;
  min-width:0;
}
#shikha-header .logo img{
  max-height:38px;
  width:auto;
}
#shikha-header .logo .so-logo-text{
  margin:0;
  font-size:22px;
  color:#fff;
}
#shikha-header .logo .so-logo-text a{ color:#fff; }
#shikha-header .logo .logo-mobile{ display:none; }

#shikha-header .header-cta{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}

/* --------------------------------------------------------------------
   6. Nav menu — desktop hover-dropdown + mobile slide-in overlay
      (ported from hotelshikha's plain CSS/JS navmenu, jQuery instead
      of vanilla JS — see js/theme.js)
   -------------------------------------------------------------------- */
.navmenu{ flex:1 1 auto; }
.navmenu ul{ margin:0; padding:0; list-style:none; }
.navmenu .mobile-nav-toggle{ display:none; }

@media (min-width:1200px){
  .navmenu ul{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
  }
  .navmenu li{ position:relative; }
  .navmenu a,.navmenu a:focus{
    color:var(--nav-color);
    padding:14px 15px;
    font-size:15px;
    font-family:var(--nav-font);
    font-weight:400;
    display:flex;
    align-items:center;
    white-space:nowrap;
    transition:.3s;
  }
  .navmenu li:last-child a{ padding-right:0; }
  .navmenu a i{ font-size:11px; margin-left:5px; transition:.3s; }
  .navmenu li:hover>a,
  .navmenu .active>a{ color:var(--nav-hover-color); }

  .navmenu .dropdown ul{
    display:block;
    position:absolute;
    left:0;
    top:130%;
    min-width:230px;
    margin:0;
    padding:10px 0;
    background:var(--nav-dropdown-bg);
    visibility:hidden;
    opacity:0;
    border-radius:4px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    transition:.3s;
    z-index:99;
  }
  .navmenu .dropdown ul li{ min-width:100%; }
  .navmenu .dropdown ul a{
    padding:9px 20px;
    font-size:14px;
    color:var(--nav-dropdown-color);
  }
  .navmenu .dropdown ul a:hover{ color:var(--nav-dropdown-hover-color); }
  .navmenu .dropdown:hover>ul{
    top:100%;
    opacity:1;
    visibility:visible;
  }
}

@media (max-width:1199px){
  #shikha-header .branding .container{ flex-wrap:nowrap; padding-left:15px; padding-right:15px; box-sizing:border-box; }
  #shikha-header .header-cta{ display:none; }
  #shikha-header .logo{ max-width:calc(100% - 50px); }
  #shikha-header .logo img{ max-height:32px; }
  #shikha-header .logo .logo-desktop{ display:none; }
  #shikha-header .logo .logo-mobile{ display:block; }
  .navmenu{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
  .navmenu .mobile-nav-toggle{
    display:block;
    position:static;
    font-size:26px;
    line-height:0;
    color:#fff;
    cursor:pointer;
    z-index:2;
  }
  .navmenu ul{
    display:none;
    position:fixed;
    inset:0 20px 20px 20px;
    top:70px;
    margin:0;
    padding:10px 0;
    background:var(--nav-mobile-bg);
    border-radius:8px;
    box-shadow:0 0 30px rgba(0,0,0,.15);
    overflow-y:auto;
    z-index:9998;
  }
  .navmenu a,.navmenu a:focus{
    color:var(--nav-dropdown-color);
    padding:11px 20px;
    font-family:var(--nav-font);
    font-size:16px;
    font-weight:500;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .navmenu a i{
    font-size:12px;
    width:26px;height:26px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:rgba(47,93,80,.08);
    transition:.3s;
  }
  .navmenu .dropdown ul{
    position:static;
    display:none;
    inset:auto;
    background:#f6f9f8;
    box-shadow:none;
    border:1px solid rgba(0,0,0,.06);
    margin:6px 16px 6px 16px;
    padding:6px 0;
  }
  .navmenu .dropdown.dropdown-active>ul{ display:block; }
  .navmenu .dropdown.dropdown-active>a i{ transform:rotate(180deg); background:var(--accent-color); color:#fff; }

  body.mobile-nav-active{ overflow:hidden; }
  body.mobile-nav-active .navmenu .mobile-nav-toggle{
    position:fixed;
    top:16px;right:16px;
    font-size:30px;
    z-index:9999;
    color:#fff;
  }
  body.mobile-nav-active .navmenu{
    position:fixed;inset:0;
    background:rgba(13,31,26,.85);
    z-index:9997;
  }
  body.mobile-nav-active .navmenu ul{ display:block; }
}

/* --------------------------------------------------------------------
   7. Hero — full-bleed OpenCart Slideshow module, restyled
   -------------------------------------------------------------------- */
.shikha-hero{
  position:relative;
  width:100%;
  margin:0;
  border:0;
  padding:0;
}
.shikha-hero,
.shikha-hero *{ box-sizing:border-box; }
.shikha-hero .swiper-viewport,
.shikha-hero .swiper-container,
.shikha-hero .swiper-wrapper{ width:100%; margin:0; padding:0; border:0; }
.shikha-hero .swiper-slide{
  position:relative;
  min-height:400px;
  margin:0;
  padding:0;
  border:0;
}
.shikha-hero .swiper-slide img{
  width:100%;
  height:60vh;
  min-height:400px;
  max-height:640px;
  object-fit:cover;
  display:block;
  position:relative;
  z-index:0;
}
/* Even, subtle darkening across the whole slide so the centered text
   stays readable no matter what part of the photo sits behind it
   (the old version only darkened a strip at the bottom, which only
   worked while the text itself was bottom-anchored). */
.shikha-hero .swiper-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(13,31,26,.32);
  z-index:1;
}
.shikha-hero .slideshow-banner-text{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  max-width:900px;
  padding:0 6%;
  z-index:2;
  color:#fff;
  font-family:var(--heading-font);
  font-size:clamp(22px,4vw,42px);
  font-weight:600;
  text-align:center;
  text-shadow:0 2px 14px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45);
}
.shikha-hero .swiper-pagination{ bottom:16px !important; z-index:3; }
@media (max-width:768px){
  .shikha-hero .swiper-slide{ min-height:260px; }
  .shikha-hero .swiper-slide img{ height:42vh; min-height:260px; }
}

/* Swiper's default navigation arrows render in swiper's own blue
   (--swiper-theme-color); hide them everywhere on the site (hero
   slideshow, homepage destinations strip, and any other swiper
   instance) rather than restyle them. */
.swiper-button-next,
.swiper-button-prev{
  display:none !important;
}

/* --------------------------------------------------------------------
   7b. Homepage main content — boxed at 1320px, with real padding on
   mobile regardless of how any nested Bootstrap row/col cancels it out.

   The homepage has TWO separate blocks assigned to OpenCart's
   "Content Top" layout position: the Slideshow module (.shikha-hero,
   meant to stay full-bleed) and an admin-authored raw-HTML block (an
   unclassed <div> with the "Jibhi Tourism - Himachal" heading/intro
   and a couple of image rows). OpenCart concatenates both into one
   string with no wrapping element around either — so the raw-HTML
   block was rendering full viewport width with no cap and no mobile
   padding. #common-home (the actual OpenCart "content" position) was
   already boxed; this second rule boxes that admin block the same
   way, while explicitly leaving the hero and the destinations
   carousel full-bleed. */
#common-home{
  max-width:1320px;
  margin:0 auto;
}
.shikha-hero ~ div:not(#common-home):not(.carousel){
  max-width:1320px;
  margin-left:auto;
  margin-right:auto;
  padding-left:15px;
  padding-right:15px;
  box-sizing:border-box;
}
@media (max-width:767px){
  #common-home > .row{ margin-left:0; margin-right:0; }
  #common-home > .row > #content{ padding-left:15px; padding-right:15px; }
}

/* --------------------------------------------------------------------
   8. Page title strip (info / category / product pages)
   -------------------------------------------------------------------- */
.info-page-title{
  background:var(--light-bg);
  padding:36px 0;
  border-bottom:1px solid rgba(13,31,26,.08);
  margin-bottom:0;
}
.info-page-title .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 20px;
}
.info-page-title h1{
  font-size:32px;
  margin:0;
}
.info-page-title .breadcrumb{
  background:none;
  padding:0;
  margin:0;
  font-size:14px;
}
.info-page-title .breadcrumb li{
  display:inline-block;
}
.info-page-title .breadcrumb li+li:before{
  content:"/";
  display:inline-block;
  padding:0 8px;
  color:rgba(13,31,26,.35);
}
@media (max-width:768px){
  .info-page-title{ padding:22px 0; }
  .info-page-title .container{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    gap:6px;
    padding-left:15px;
    padding-right:15px;
    box-sizing:border-box;
  }
  .info-page-title h1{ font-size:24px; }
  .info-page-title .breadcrumb{ text-align:left; }
}

/* Content images (information pages, product description tab, category
   description) — a little breathing room around admin-inserted images. */
.info-content img{
  padding:5px;
  box-sizing:border-box;
  height:auto;
}

/* Admin-authored content also uses this class directly on <img> tags
   outside of .info-content (e.g. the homepage's "Jibhi Tourism" image
   row) — give it the same breathing room plus rounded corners. */
.img-responsive-mobile{
  padding:5px;
  box-sizing:border-box;
  border-radius:15px;
  height:auto;
}

/* Several info/category/product templates hard-code style="padding:0"
   on the .info-content column itself (see e.g. product/category.twig),
   which zeroes out its Bootstrap column gutter and leaves the
   description flush against the screen edge on mobile. No amount of
   specificity in an external stylesheet beats that inline style except
   !important, so this is intentional. */
@media (max-width:767px){
  .info-content{
    padding-left:15px !important;
    padding-right:15px !important;
    box-sizing:border-box;
  }
}

/* --------------------------------------------------------------------
   9. Category / product-listing cards ("feature-card" pattern)
   -------------------------------------------------------------------- */
#product-category .product-layout,
.product-layout{ margin-bottom:26px; }

.product-thumb{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.07);
  height:100%;
  transition:.3s;
  border:0;
}
.product-thumb:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.product-thumb .image{ margin:0; }
.product-thumb .image img{
  width:100%;
  height:210px;
  object-fit:cover;
  display:block;
}
.product-thumb .caption{
  padding:18px 20px 8px;
  text-align:left !important;
}
.product-thumb .caption h4,
.product-thumb .caption h3{
  font-family:var(--heading-font);
  font-size:18px;
  margin:0 0 8px;
}
.product-thumb .caption h4 a,
.product-thumb .caption h3 a{ color:var(--heading-color); }
.product-thumb .price{
  font-weight:600;
  color:var(--accent-color);
}
.product-thumb .btnpos,
.product-thumb > .text-center{
  padding:0 20px 20px;
}
.product-thumb .btnpos .btn,
.product-thumb > .text-center .btn{
  width:100%;
  border-radius:50px;
}

.linetitle{
  text-align:center;
  font-family:var(--heading-font);
  margin:10px 0 30px;
  position:relative;
}
.linetitle span{ padding:0 18px; background:#fff; position:relative; z-index:1; }

/* --------------------------------------------------------------------
   10. Product page (conference-hall-jaipur.htm structure)
   -------------------------------------------------------------------- */
.shikha-product .intro-row img{
  border-radius:10px;
  width:100%;
}
.shikha-product h2{ font-size:2rem; margin-bottom:16px; }

.dorm-features-list{
  list-style:none;
  padding:0;
  margin:0 0 8px;
}
.dorm-features-list li{
  display:flex;
  align-items:center;
  margin-bottom:12px;
}
.dorm-features-list li i{
  color:var(--accent-color);
  font-size:17px;
  margin-right:10px;
  width:20px;
  text-align:center;
}

.shikha-product .feature-list .feature-item{
  display:flex;
  align-items:center;
  margin-bottom:30px;
}
.shikha-product .feature-list .feature-item .feature-icon{
  width:64px;height:64px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent-color),var(--accent-color-dark));
  display:flex;align-items:center;justify-content:center;
  margin-right:22px;
  flex-shrink:0;
}
.shikha-product .feature-list .feature-item .feature-icon i{
  font-size:1.5rem;
  color:#fff;
}
.shikha-product .feature-list .feature-item .feature-details h5{
  font-size:1.1rem;
  margin-bottom:6px;
}
.shikha-product .feature-list .feature-item .feature-details p{ margin:0; }

.shikha-photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;
}
.shikha-photo-grid a{
  display:block;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.shikha-photo-grid img{
  width:100%;height:170px;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.shikha-photo-grid a:hover img{ transform:scale(1.06); }

.tariff-note{
  background:rgba(47,93,80,.06);
  border-left:3px solid var(--accent-color);
  padding:18px 22px;
  border-radius:6px;
  margin-bottom:10px;
}
.tariff-note strong{ color:var(--heading-color); }

.shikha-product .enquiry-cta .btn{
  border-radius:50px;
  padding:12px 30px;
  letter-spacing:.5px;
}

/* --------------------------------------------------------------------
   11. Footer — green links area, darker copyright bar
   -------------------------------------------------------------------- */
#shikha-footer{
  color:#e7efec;
  font-size:14px;
  position:relative;
}
#shikha-footer .footer-top{
  background:var(--accent-color);
  padding:50px 0 20px;
}
#shikha-footer .footer-about img{ max-height:44px; margin-bottom:16px; }
#shikha-footer .footer-about p{ color:rgba(255,255,255,.85); line-height:1.8; }
#shikha-footer h4{
  color:#fff;
  font-size:16px;
  font-weight:600;
  position:relative;
  padding-bottom:12px;
  margin-bottom:16px;
}
#shikha-footer h4:after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:24px;height:2px;
  background:#fff;
}
#shikha-footer .footer-links ul{ list-style:none; margin:0; padding:0; }
#shikha-footer .footer-links ul li{ padding:7px 0; }
#shikha-footer .footer-links ul a{ color:rgba(255,255,255,.78); }
#shikha-footer .footer-links ul a:hover{ color:#fff; }
#shikha-footer .whatsapp-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fff;
  color:var(--accent-color-dark);
  padding:10px 20px;
  border-radius:50px;
  font-weight:600;
  margin-top:6px;
}
#shikha-footer .whatsapp-cta:hover{ background:#eafff6; }

#shikha-footer .copyright{
  background:var(--accent-color-dark);
  padding:18px 0;
  text-align:center;
  color:rgba(255,255,255,.85);
  font-size:13px;
}
#shikha-footer .copyright a{ color:#fff; }
#shikha-footer .social-links{ margin-top:8px; }
#shikha-footer .social-links a{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:34px;height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  margin:0 4px;
  transition:.3s;
}
#shikha-footer .social-links a:hover{ background:#fff; color:var(--accent-color-dark); }

/* --------------------------------------------------------------------
   12. Misc
   -------------------------------------------------------------------- */
.whatsapp-float{
  position:fixed;
  right:20px;bottom:20px;
  z-index:998;
  background:#25D366;
  color:#fff;
  width:56px;height:56px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.whatsapp-float:hover{ color:#fff; transform:scale(1.06); }

#information-contact .panel,
#information-information{ padding-top:20px; }