/* ==========================================================
   SHC THEME - COMPLETE OVERRIDE (Responsive + Offcanvas)
   Replace BOTH shc-clean.css and shc-theme.css with this file
   ========================================================== */

:root {
  --shc-primary: #08AEB0;
  --shc-secondary: #0e3a4f;
  --shc-accent: #FF7A3D;
  --shc-text: #24323a;
  --shc-muted: rgba(36,50,58,.72);
  --shc-border: rgba(31,74,97,.16);
  --shc-radius: 32px;
  --shc-radius-sm: 14px;
  --shc-gradient: linear-gradient(135deg, var(--shc-secondary) 0%, var(--shc-primary) 100%);
  --offcanvas-overlay-color: rgba(14, 58, 79, 0.50);
}

/* ==========================================================
   1. BODY PADDING FOR FIXED HEADER
   ========================================================== */
body {
  padding-top: 75px; /* Account for fixed header */
  color: var(--shc-text);
}

/* Remove padding on mobile where header is smaller */
@media (max-width: 991px) {
  body {
    padding-top: 65px;
  }
}

/* ==========================================================
   2. FIXED HEADER STYLES
   ========================================================== */
.main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: #fff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  border-bottom: 2px solid var(--shc-accent) !important;
  min-height: 75px;
}

.main-header .shc-header-container {
  width: 100%;
}
/* FIX: real HTML logo (styles.css overrides) */
.main-header a.logo{
  margin-top: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.main-header a.logo img.site-logo{
  max-height: 56px !important; /* prominent but not too tall */
  width: auto !important;
  display: block !important;
}


.main-header .shc-navbar {
  padding: 10px 22px;
}

.main-header .logo img {
  max-height: 65px;
  width: auto;
}
.main-header .logo{
  display: flex;
  align-items: center;
}
/* Remove all default borders */
.main-header *,
.navbar-collapse {
  border: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================
   3. MOBILE TOGGLE BUTTON
   ========================================================== */
.shc-menu-toggle {
  display: none;
  float: right;
  background: transparent;
  border: 2px solid var(--shc-accent);
  border-radius: 4px;
  padding: 8px 10px;
  margin-top: 12px;
  cursor: pointer;
}

.shc-menu-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 3px !important;
  background-color: var(--shc-accent) !important;
  border-radius: 1px;
  margin: 4px 0;
}

@media (max-width: 991px) {
  .shc-menu-toggle {
    display: block !important;
  }
  
  /* Hide desktop menu on mobile */
  #mainNavbar,
  .navbar-collapse.collapse,
  .shc-menu-wrapper {
    display: none !important;
    visibility: hidden !important;
    margin-top: 0 !important;
  }
}

@media (min-width: 992px) {
  /* Show desktop menu, hide toggle */
  #mainNavbar,
  .navbar-collapse.collapse,
  .shc-menu-wrapper {
    display: block !important;
    visibility: visible !important;
    float: none !important;
  }
  
  .shc-menu-toggle {
    display: none !important;
  }
}
/* Desktop header layout: keep logo + menu in one row */
.main-header .shc-navbar{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* stop bootstrap container from forcing center layout */
.main-header .shc-navbar > .container{
  width: auto !important;
  margin: 0 !important;
  padding-left: 22px !important;
  padding-right: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* menu area */
#mainNavbar{
  width: auto !important;
  padding-right: 22px !important;
}

#mainNavbar .navbar-nav{
  float: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

#mainNavbar .navbar-nav > li{
  float: none !important;
  margin-left: 16px; /* spacing between items */
}


/* ==========================================================
   4. OFFCANVAS SYSTEM (MOBILE ONLY)
   ========================================================== */

/* Overlay */
.shc-offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--offcanvas-overlay-color);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Panel */
.shc-offcanvas {
  position: fixed;
  top: 0;
  right: -320px; /* Hidden off-screen */
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: linear-gradient(135deg, rgba(14, 58, 79, 0.40) 0%, rgba(8, 174, 176, 0.40) 100%);
  z-index: 10001;
  opacity: trasparent;
  overflow-y: auto;
  transition: right 0.3s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: -4px 0 12px rgba(0,0,0,0.3);
}

/* Header */
.shc-offcanvas-head {
  padding: 20px;
  background: linear-gradient(135deg, rgba(14, 58, 79, 0.40) 0%, rgba(8, 174, 176, 0.40) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shc-offcanvas-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

.shc-offcanvas-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.shc-offcanvas-close:hover {
  opacity: 1;
}

/* Navigation inside offcanvas */
.shc-offcanvas-nav {
  padding: 0;
}

.shc-offcanvas-nav .navbar-nav {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shc-offcanvas-nav .navbar-nav > li {
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.shc-offcanvas-nav .navbar-nav > li > a {
  display: block;
  padding: 15px 20px;
  color: var(--shc-accent) !important;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.shc-offcanvas-nav .navbar-nav > li > a:hover {
  background: #08AEB0(255,255,255,0.50);
  color: var(--shc-secondary) !important;
}

/* Dropdowns in offcanvas */
.shc-offcanvas-nav .drop-down {
  position: static !important;
  width: 100% !important;
  background: rgba(0,0,0,0.3) !important;
  border: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  padding: 0 !important;
}

.shc-offcanvas-nav .drop-down li a {
  padding: 12px 20px 12px 40px !important;
  color: rgba(255,255,255,0.8) !important;
  background: transparent !important;
}

.shc-offcanvas-nav .drop-down li a:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
/* 1. When body has the 'shc-menu-open' class, show the overlay */
body.shc-menu-open .shc-offcanvas-overlay {
    opacity: 1; /* Make it visible (now using the transparent RGBA color) */
    visibility: visible;
}

/* 2. When body has the 'shc-menu-open' class, slide the panel into view */
body.shc-menu-open .shc-offcanvas {
    right: 0; /* Slides the panel from the right (-320px) to visible (0) */
}
/* ==========================================================
   5. BODY WHEN MENU IS OPEN
   ========================================================== */
body.shc-menu-open {
  overflow: hidden; /* Disable scroll */
}

body.shc-menu-open .shc-offcanvas-overlay {
  opacity: 1;
  visibility: visible;
}

body.shc-menu-open .shc-offcanvas {
  right: 0; /* Slide in */
}

/* ==========================================================
   6. DESKTOP NAVIGATION (Keep existing theme)
   ========================================================== */
.navbar-default .navbar-nav > li > a {
  color: var(--shc-text) !important;
  font-weight: 800;
  font-size: 17px;
  text-transform: uppercase;
  padding: 18px 12px;
  position: relative;
}
.navbar-default .navbar-nav > li > a::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 2px;
  background: var(--shc-secondary); /* dark-teal line */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

.navbar-default .navbar-nav > li > a:hover::after,
.navbar-default .navbar-nav > li > a:focus::after,
.navbar-default .navbar-nav > .active > a::after{
  transform: scaleX(1);
}


.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a {
  color: var(--shc-accent) !important;
  background: transparent !important;
}

/* Dropdown styling (desktop only) */
@media (min-width: 992px) {
  .navbar-default .navbar-nav li ul.drop-down {
    background: #fff !important;
    border-top: 3px solid var(--shc-primary) !important;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
  }

  .navbar-default .navbar-nav li ul.drop-down li a {
    color: var(--shc-text) !important;
    padding: 12px 20px;
  }

  .navbar-default .navbar-nav li ul.drop-down li a:hover {
    background: var(--shc-primary) !important;
    color: #fff !important;
  }
}

/* Font Awesome 4 dropdown arrows (remove FA5 pseudo-elements) */
.navbar-default .navbar-nav > li.drop > a:after,
.navbar-default .navbar-nav > li.dropdown > a:after {
  content: "\f107" !important; /* FA4 caret-down */
  font-family: "FontAwesome" !important;
  font-weight: normal !important;
  color: var(--shc-accent) !important;
  margin-left: 5px;
}

.navbar-default .navbar-nav li ul.drop-down li.drop > a:after {
  content: "\f105" !important; /* FA4 caret-right */
  font-family: "FontAwesome" !important;
  font-weight: normal !important;
  color: var(--shc-accent) !important;
  float: right;
}

/* ==========================================================
   7. BUTTONS & THEME COLORS (Keep existing theme)
   ========================================================== */
.btn-theme,
a.btn-theme {
  background: var(--shc-primary) !important;
  border-color: var(--shc-primary) !important;
  color: #fff !important;
  border-radius: var(--shc-radius) !important;
}

.btn-theme:hover,
a.btn-theme:hover {
  background: var(--shc-accent) !important;
  border-color: var(--shc-accent) !important;
  color: #fff !important;
}

.btn-theme.btn-theme-invert {
  background: transparent !important;
  color: var(--shc-primary) !important;
  border: 2px solid var(--shc-primary) !important;
}

.btn-theme.btn-theme-invert:hover {
  background: var(--shc-accent) !important;
  border-color: var(--shc-accent) !important;
  color: #fff !important;
}

/* ==========================================================
   8. FORM STYLING (Keep gradient background)
   ========================================================== */
.section-appointment-bg .appointment-form-wrapper,
.contact-form-block {
  background: var(--shc-gradient) !important;
  border-radius: var(--shc-radius-sm) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
}

.section-appointment-bg .appointment-form-wrapper label {
  color: rgba(255,255,255,.92) !important;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
  border-color: rgba(8,174,176,.65) !important;
  box-shadow: 0 0 0 4px rgba(8,174,176,.16) !important;
}

/* ==========================================================
   9. FOOTER (Keep gradient)
   ========================================================== */
footer,
.footer-widget-area,
.footer-widget-area-bg,
.footer-contents {
  background: var(--shc-gradient) !important;
}

footer,
footer p,
footer h3,
footer a,
footer span {
  color: rgba(255,255,255,.92) !important;
}

footer a:hover {
  color: var(--shc-accent) !important;
}

/* ==========================================================
   10. MISC THEME ELEMENTS
   ========================================================== */
.text-primary-color,
.color-primary {
  color: var(--shc-primary) !important;
}

.text-highlighter-primary,
.text-curly,
.text-curly-no-italic {
  color: var(--shc-accent) !important;
}

.section-heading-wrapper h2:after,
.section-heading-wrapper-alt h2:after,
.widget-title:after {
  background: var(--shc-primary) !important;
}

a:hover,
a:focus {
  color: var(--shc-accent) !important;
}

/* Remove back-to-top button */
#backTop,
#toTop,
#scrollTop,
.scroll-top,
.back-to-top,
.return-to-top {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ==========================================================
   11. MOBILE HEADER CLEANUP (REVISED for Absolute Positioning)
   ========================================================== */
@media (max-width: 991px) {
    /* Step 1: Set .main-header as the positioning context for the absolute button.
    (Removing the previous conflicting 'display: flex' on .main-header)
    */
    .main-header {
        min-height: 65px;
        position: relative; 
        padding: 0; 
    }

    /* Ensure the inner containers match height (if needed) */
    .shc-header-container,
    .shc-navbar,
    .shc-navbar .container {
        min-height: 65px; 
    }
    
    /* Ensure logo is properly aligned to the left */
    .main-header .logo {
        display: flex;
        align-items: center;
        height: 65px;
        width: auto;
        /* Add left padding to keep logo off the edge */
        padding-left: 15px; 
    }
    
    /* Ensure no bootstrap borders on mobile */
    .main-header .navbar-default,
    .main-header .container,
    .navbar-header {
        border: 0 !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
    
    /* --- Step 2: Offcanvas Menu Button: Absolute Positioning Fix --- */

    /* Target the main navigation toggle button */
    .navbar-toggle {
        position: absolute; /* Take button out of flow */
        
        /* Positioning it relative to .main-header or .shc-navbar */
        top: 50%; /* Center vertically */
        right: 15px; /* Push to the right edge (matches logo's left padding) */
        transform: translateY(-50%); /* Adjust for perfect vertical center */
        
        z-index: 1000; /* Ensure it stays above everything */
        float: none !important; /* Remove any conflicting float */
        
        border: 0 !important; /* Ensure border is removed here as well */
        background: transparent !important;
    }

    /* Hide the main desktop navigation block on mobile (shc-menu-wrapper class used in your HTML) */
    .shc-menu-wrapper { 
        display: none !important; 
    }
    
}
/* ==========================================================
   12. HOMEPAGE SLIDER FIXES (Background Image Scaling)
   ========================================================== */

/* Target the main slider item container where the background image is applied */
.slider_item_container {
    background-size: cover !important; 

    /* Center the image both horizontally and vertically inside the container */
    background-position: center center !important; 

    /* Prevent the image from tiling */
    background-repeat: no-repeat !important;

    /* min-height: 500px; */ 
}
/* --- Mobile Height Adjustment for Slider --- */
@media (max-width: 991px) {
    /* Ensure the slider container has a decent height on mobile devices */
    .slider_item_container {
        /* Set a fixed minimum height to display content and background image properly */
        min-height: 500px !important; 
        
        /* padding-top: 50px; 
        padding-bottom: 50px; */
    }
}

/* --- If 992px tak ka size theek nahi lag raha, toh isse thoda bada height dein. --- */
@media (max-width: 767px) {
    .slider_item_container {
        /* Chote mobile screens ke liye height ko aur adjust karein */
        min-height: 400px !important; 
    }
}
/* 1. Target the Prev/Next buttons */
.slider-wrap .owl-nav button {
    /* VISIBILITY FIX: Ensure they are fully visible */
    opacity: 1 !important; 
    visibility: visible !important;
    
    /* COLOR: Apply the SHC accent color to the arrows/icons */
    color: var(--shc-accent) !important;
    background: transparent !important; /* No solid background */
    border: 2px solid var(--shc-accent) !important; /* Accent border for visibility */
    
    /* DESIGN & UX: Soft rounding and good size */
    border-radius: var(--shc-radius-sm) !important; 
    padding: 8px 12px !important;
    font-size: 24px; /* Ensure arrows are large and readable */
    line-height: 1;
    transition: all 0.3s ease;
}

/* 2. Style the span inside (The arrow icon/text is often inside a span) */
.slider-wrap .owl-nav button span {
    /* Apply accent color to inner text/icon (as requested) */
    color: var(--shc-accent) !important;
    /* Font size may need to be adjusted here if the above rule doesn't work */
}

/* 3. Smooth Hover Effect */
.slider-wrap .owl-nav button:hover {
    background-color: var(--shc-accent) !important; /* Orange background on hover */
    color: #ffffff !important; /* White text/icon on hover */
    cursor: pointer;
}

/* Ensure the inner span also turns white on hover */
.slider-wrap .owl-nav button:hover span {
    color: #ffffff !important; 
}

/* Slider heading highlight word (span) */
.slider-wrap .jumbo-heading span{
  color: var(--shc-accent) !important;
}

/* ==========================================================
   SHC: Replace old red/pink lines with SHC accent
   ========================================================== */

/* Section heading decorative bar */
.section-heading-wrapper h2:after{
  background: var(--shc-accent) !important; /* #FF7A3D */
}

/* Inline heading small underline (usually left/bottom) */
.section-heading-wrapper.inline-heading-style h2:before{
  background: var(--shc-accent) !important;
}

/* About slogan underline line */
.about-us-slogan:after{
  background: var(--shc-accent) !important;
}



/* ==========================================================
   SHC: Icons + Arrow Keys (Accent)
   Add at END of shc-theme.css
   ========================================================== */

/* 1) Common icons (Font Awesome 4) */
.footer-widget-area .fa-footer,
.review-stars i.fa,
.highlight-layout-1 a.bg_1 i.fa,
.text-highlighter-primary,
.shc-bullet i,
.shc-badge i,
.shc-h-icon {
  color: var(--shc-accent) !important;
}

/* 2) Owl Carousel arrows (Service/Event/Highlight etc.) */
.service-carousel .owl-nav .owl-prev,
.service-carousel .owl-nav .owl-next,
.event-carousel .owl-nav .owl-prev,
.event-carousel .owl-nav .owl-next,
.highlight-carousel .owl-nav .owl-prev,
.highlight-carousel .owl-nav .owl-next,
.testimonial-container .owl-nav .owl-prev,
.testimonial-container .owl-nav .owl-next {
  color: var(--shc-accent) !important;
}

.service-carousel .owl-nav .owl-prev:hover,
.service-carousel .owl-nav .owl-next:hover,
.event-carousel .owl-nav .owl-prev:hover,
.event-carousel .owl-nav .owl-next:hover,
.highlight-carousel .owl-nav .owl-prev:hover,
.highlight-carousel .owl-nav .owl-next:hover,
.testimonial-container .owl-nav .owl-prev:hover,
.testimonial-container .owl-nav .owl-next:hover {
  color: var(--shc-secondary) !important;
}

/* 3) Logo carousel arrows (these use DIVs + solid bg in styles.css) */
.logo-items .owl-nav div.owl-prev,
.logo-items .owl-nav div.owl-next {
  background: var(--shc-accent) !important;
  color: #fff !important;
}

.logo-items .owl-nav div.owl-prev:hover,
.logo-items .owl-nav div.owl-next:hover {
  background: var(--shc-secondary) !important;
  color: #fff !important;
}

/* 4) Dots (optional but arrows/dots usually match) */
.highlight-carousel .owl-dots .active span,
#slider_1 .owl-dots .active,
#slider_1 .owl-dots .active span {
  background: var(--shc-accent) !important;
}
/* SHC: Counter section icons -> accent orange */
.counter-block-1 .icon.invert{
  color: var(--shc-accent) !important; /* #FF7A3D */
}
/* SHC: Counter underline + numbers -> accent orange */
.counter-block-1 h4:before,
.counter-block-1 .counter{
  
  color: var(--shc-accent) !important;
}

/* ================================
   SHC: Exercise/Wellness cards text color fix
   ================================ */

#exercise .event_wrapper{
  border: 1px solid var(--shc-border) !important;
  border-radius: var(--shc-radius-sm) !important;
  overflow: hidden;
}

#exercise .event_wrapper .event-text{
  color: var(--shc-text) !important;
  padding: 18px 16px 16px !important;
}

/* Title link color */
#exercise .event_wrapper .event-text h5 a{
  color: var(--shc-secondary) !important;
}
#exercise .event_wrapper .event-text h5 a:hover{
  color: var(--shc-accent) !important;
}

/* Description color consistency */
#exercise .event_wrapper .event-text .event-time{
  color: var(--shc-muted) !important;
  font-weight: 500 !important; /* default 600 ki wajah se dark/bold lagta tha */
  line-height: 1.6;
}

/* Agar kisi description me <b>/<strong> a gaya ho to bhi same rahe */
#exercise .event_wrapper .event-text .event-time b,
#exercise .event_wrapper .event-text .event-time strong{
  color: inherit !important;
  font-weight: inherit !important;
}
/* SHC: Fix testimonial quote icon (use Font Awesome 4) */
.testimony-layout-1 .testimony-text:before,
.testimonial-container.text-left .testimony-text:before{
  font-family: "FontAwesome" !important;   /* FA4 font */
  content: "\f10d" !important;             /* quote-left */
  color: var(--shc-accent) !important;     /* #FF7A3D */
}
/* ==========================================
   SHC: Review stars – more premium + readable
   ========================================== */

.section-testimonial-bg .review-stars{
  display: inline-flex;
  align-items: center;
  gap: 6px;                        /* better spacing */
  padding: 8px 12px;               /* pill look */
  border-radius: 999px;
  background: rgba(14, 58, 79, .28); /* uses SHC secondary tone */
  border: 1px solid rgba(255, 122, 61, .22); /* accent border */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.section-testimonial-bg .review-stars i.fa{
  color: var(--shc-accent) !important;      /* #FF7A3D */
  font-size: 16px;                          /* slightly larger */
  line-height: 1;
  text-shadow: 0 6px 18px rgba(255, 122, 61, .30); /* soft glow */
}

/* Optional: subtle hover (not flashy) */
.section-testimonial-bg .review-stars:hover{
  background: rgba(14, 58, 79, .36);
  border-color: rgba(255, 122, 61, .35);
}
/* ==========================================
   SHC: Testimonial quote icon (make it subtle & classy)
   ========================================== */

.testimony-layout-1 .testimony-text{
  position: relative;     /* needed for ::before positioning */
  z-index: 1;
}

.testimony-layout-1 .testimony-text:before,
.testimonial-container.text-left .testimony-text:before{
  font-family: "FontAwesome" !important;  /* FA4 */
  content: "\f10d" !important;            /* quote-left */
  position: absolute;
  left: -6px;                             /* move slightly left */
  top: -28px;                             /* move up */
  font-size: 96px;                        /* nicer size */
  line-height: 1;
  color: rgba(255, 122, 61, .18) !important; /* SHC accent, soft */
  z-index: -1;                            /* behind text */
  transform: rotate(-6deg);               /* subtle style */
  pointer-events: none;
}
/* ================================
   SHC Footer Heading Underline Fix
   ================================ */

.footer-widget-area .footer-widget-header h3:after {
  background: var(--shc-accent);
}
/* ==========================================================
   SHC: Global Page Header Gradient (all pages)
   ========================================================== */

.page-header{
  background: var(--shc-gradient) !important;
  background-image: none !important;          /* removes header-bg.jpg */
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Optional overlay for readability (replaces black overlay) */
.page-header:before{
  background: var(--shc-gradient) !important;
}

/* Keep text readable + consistent */
.page-header h3,
.page-header .page-breadcrumb,
.page-header .page-breadcrumb a{
  color: #fff !important;
}

/* Breadcrumb hover should be SHC accent (not old pink) */
.page-header .page-breadcrumb a:hover{
  color: var(--shc-accent) !important;
}
/* Footer heading underline => SHC Accent */
.footer-widget-area .footer-widget-header h3:after{
  background: var(--shc-accent) !important;
}
/* ==============================
   SHC Gallery Grid (3 per row + hover zoom)
   ============================== */

.shc-gallery-grid{
  display: flex;
  flex-wrap: wrap;
  margin: -12px;
}

.shc-gallery-item{
  width: 33.3333%;
  padding: 12px;
}

.shc-gallery-item a{
  display:block;
  border-radius: var(--shc-radius-sm);
  overflow:hidden;
  border: 1px solid var(--shc-border);
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}

.shc-gallery-item img{
  width:100%;
  height:auto;
  display:block;
  transform: scale(1);
  transition: transform .45s ease;
}

.shc-gallery-item a:hover img{
  transform: scale(1.07);
}

.shc-gallery-item a:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 122, 61, .25);
}

/* Responsive */
@media (max-width: 991px){
  .shc-gallery-item{ width: 50%; }
}
@media (max-width: 575px){
  .shc-gallery-item{ width: 100%; }
}
/* ==========================================================
   SHC: GALLERY PAGE HEADING + SUBHEADING
   ========================================================== */

.shc-activities-gallery .section-heading,
.shc-activities-gallery .section-heading span{
  color: var(--shc-accent) !important; /* Orange */
}

.shc-activities-gallery .shc-gallery-subheading{
  color: var(--shc-text) !important;   /* readable */
  opacity: 1 !important;
  font-size: 16px;
  line-height: 1.9;
  padding-left: 0 !important;
  max-width: 980px;
}
/* =========================
   SHC Contact Page Fixes
   ========================= */

/* Left side: Contact details list alignment (icon + text) */
.section-contact-block .contact-info{
  list-style:none;
  padding:0;
  margin:0;
}

.section-contact-block .contact-info li{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px; /* slightly tighter than default */
}

.section-contact-block .contact-info .icon-container{
  flex:0 0 42px;
  width:42px;
  height:42px;
  line-height:42px;
  border-radius: var(--shc-radius-sm);
  background: var(--shc-accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:0; /* gap handles spacing */
}

.section-contact-block .contact-info .icon-container i{
  font-size:18px;
}

.section-contact-block .contact-info address{
  flex:1;
  display:block;      /* override inline-block default */
  margin:0;
  line-height:1.6;
}

.section-contact-block .contact-info a{
  color: var(--shc-secondary);
  text-decoration:none;
}

.section-contact-block .contact-info a:hover{
  color: var(--shc-accent);
}

/* Titles underline color fix (uses SHC accent instead of old pink) */
.section-contact-block .contact-title{
  border-bottom: 3px solid var(--shc-border);
  color: var(--shc-secondary);
}

.section-contact-block .contact-title:after{
  background: var(--shc-accent);
}
/* Right side: Form container spacing + SHC look */
.section-contact-block .contact-form-block{
  padding: 34px;
  border-radius: var(--shc-radius);
  background: var(--shc-gradient);
  box-shadow: 0 18px 50px rgba(14,58,79,.18);
}

/* Make heading readable on gradient */
.section-contact-block .contact-form-block .contact-title{
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.22);
}

.section-contact-block .contact-form-block .contact-title:after{
  background: var(--shc-accent);
}

/* Form spacing inside (because you’re using col-md-12 on form-group) */
.section-contact-block .contact-form-block .appoinment-form .form-group{
  padding-left:0 !important;
  padding-right:0 !important;
  margin-bottom:14px;
}

.section-contact-block .contact-form-block label{
  color:#fff;
  margin-bottom:8px;
}

/* Inputs */
.section-contact-block .contact-form-block .form-control{
  border-radius: var(--shc-radius-sm);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.96);
  height: 46px;
}

.section-contact-block .contact-form-block textarea.form-control{
  height:auto;
}

.section-contact-block .contact-form-block .form-control:focus{
  border-color: var(--shc-accent);
  box-shadow: 0 0 0 3px rgba(255,122,61,.18);
}

/* Button */
.section-contact-block .contact-form-block .btn.btn-theme-invert{
  background: var(--shc-accent);
  border-color: var(--shc-accent);
  color:#fff;
  border-radius: 999px;
  padding: 12px 26px;
}

.section-contact-block .contact-form-block .btn.btn-theme-invert:hover{
  background: #fff;
  color: var(--shc-secondary);
  border-color: #fff;
}

/* Mobile spacing */
@media (max-width: 767px){
  .section-contact-block .content-block{ padding:0; margin-bottom:24px; }
  .section-contact-block .contact-form-block{ padding: 26px; }
}