/**
 * Theme Name:     Slingshot
 * Author:         Shahin
 * Template:       generatepress
 * Text Domain:	   slingshot
 * Description:    GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
 */




html, body {
 overflow-x: hidden;
}

a{
    text-decoration: none;
    color: #fff;
}

/* ===== Header base ===== */
.custom-header {
    background: #c8102e;
    color: #fff;
    padding: 15px 0;
    position: relative;
    z-index: 1000;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Logo */
.header-logo img { width: 200px; display: block; }

/* Contact (desktop) */
.contact-section {
    display: flex;
    gap: 1rem;
    font-family: sans-serif;
    position: relative;
    align-items: flex-start;
}
.contact-title { display:flex; align-items:center; gap:.5rem; color:#fff; }
.contact-title img { width:100px; height:auto; }
.contact-list { display:flex; flex-direction:column; gap:.3rem; }
.contact-item {
    background: #fff;
    color: #0b63c6;
    
    padding: 0 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight:600;
    text-align: right;
}
.small { font-size:12px; text-align:center; padding:0 30px; line-height:1.2; margin-top:7px; font-weight:600; }

/* Desktop hamburger */
.hamburger-menu {
    cursor: pointer;
    display: inline-block;
    background: transparent;
    border: 0;
    padding: 6px;
}
.hamburger-menu .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px 0;
    transition: transform 0.35s ease, opacity 0.25s ease;
}
.hamburger-menu.active .bar:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
.hamburger-menu.active .bar:nth-child(2) { opacity: 0; }
.hamburger-menu.active .bar:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }

.menu-container { display: none; }
.main-menu li { margin: 10px 0; list-style: none; text-align: center; }
.main-menu a { color: #fff; text-decoration: none; font-size: 18px; }

/* Mobile top row */
.mobile-top { display: none; }

/* ===================== MOBILE ===================== */
@media (max-width: 992px) {
    
    .contact-item { width: 100%; padding: 3px 8px; text-align: center; background: #0b63c6; color: #fff; font-weight: 600; }
    
    .contact-item li a{
        text-decoration: none;
        color: #fff;
    }
    .mobile-top {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 8px 14px;
        box-sizing: border-box;
    }
    .mobile-top .mobile-contact-icon img { width: 56px; height: auto; display: block; }
    .mobile-hamburger {
        background: transparent;
        border: 0;
        padding: 6px;
        width: 46px;
        height: 42px;
        display: inline-block;
        cursor: pointer;
    }
    .mobile-hamburger .bar {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #fff;
        margin: 5px 0;
        transition: transform 0.35s ease, opacity 0.25s ease;
    }
    .mobile-hamburger.active .bar:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
    .mobile-hamburger.active .bar:nth-child(2) { opacity: 0; }
    .mobile-hamburger.active .bar:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }

    .header-container { flex-direction: column; align-items: center; gap: 8px; padding: 6px 12px; }
    .header-logo { order: 1; display: flex; justify-content: center; }
    .header-logo img { max-width: 220px; height:auto; }
    .contact-section { order: 2; flex-direction: column; align-items: center; gap: 8px; }
    .contact-section .contact-title { display: none; }
    .contact-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
        justify-items: center;
    }
    .contact-item { width: 100%; padding: 5px 8px; text-align: center; background: #0073e6; color: #fff; font-weight: 600; border: 1px solid #fff; }
    .small { order: 3; width: 100%; text-align:center; margin:10px 0 18px; }

    /* Fullscreen menu (mobile overlay) */
    .menu-container {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: #6d00e2;
        transform: translateY(-100%);
        transition: transform 0.35s ease-in-out;
        
        overflow-y: auto;
    }
    
    .main-menu{
        margin: 0px;
    }
    .menu-container.active { transform: translateY(0); }

    /* Mobile overlay close button top-right */
    .menu-container .menu-close {
        position: absolute;
        right: 14px;
        top: 14px;
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 6px;
        z-index: 10002;
    }
    .menu-container .menu-close .bar {
        display: block;
        width: 25px;
        height: 3px;
        background: #fff;
        margin: 5px 0;
    }

    .menu-container nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .menu-container .main-menu { display:flex; flex-direction:column; gap:18px; align-items:center; }
    .menu-container .main-menu a { font-size: 22px; font-weight: 700; color: #fff; }
    .menu-container .menu-footer {
        position: absolute;
        bottom: 24px;
        width: 100%;
        text-align: center;
        color: rgba(255,255,255,0.9);
    }
    .hamburger-menu { display: none !important; }
}

/* ===================== DESKTOP ===================== */
@media (min-width: 993px) {
    .menu-container { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #003366; }
    .menu-container.active { display: block; }
    .menu-container nav { display: flex; justify-content: center; }
    .menu-container .main-menu { display: flex; flex-direction: column; gap: 24px; }
    .menu-container .menu-close, .menu-container .menu-footer { display: none !important; }
}

/* Mobile: make the "Monday to Friday / 8am - 5pm" line full width, centered, bigger & bold */
@media (max-width: 992px) {
  .contact-list { /* keep two-column layout for contacts, but allow .small to span */ }
  .small {
    order: 3;                 /* keep below contact items */
    grid-column: 1 / -1;      /* span both columns of the contact grid */
    width: 100%;
    text-align: center;
    margin: 12px 0 20px;
    padding: 6px 12px;
    font-size: clamp(16px, 4.4vw, 22px); /* responsive sizing */
    font-weight: 800;
    line-height: 1.05;
    color: #ffffff;           /* white text on red header */
    background: transparent;  /* don't use the white pill used by other contact items */
    text-transform: uppercase;
    /* subtle shadow/stroke to improve contrast like the design */
    -webkit-text-stroke: 0.6px rgba(0,0,0,0.25);
    text-shadow: 0 4px 0 rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.32);
}
}

/* Fix: keep logo left — contact + hamburger on the right (desktop only) */
@media (min-width: 993px) {
  /* push contact area to the right group */
  .contact-section,
  .slingshot-contact-shortcode {            /* cover both possible class outputs */
    margin-left: auto !important;
    margin-right: 12px;                     /* spacing between contact and hamburger */
    order: 2;                               /* ensure it sits after the logo */
    display: flex;
    align-items: flex-start;                /* keep top alignment */
    text-align: left;                       /* avoid centered text */
  }

  /* logo left, contact next, hamburger last */
  .header-logo { order: 1; }
  .hamburger-menu { order: 3; flex: 0 0 auto; }

  /* if the contact became vertically centered, force top align */
  .header-container { align-items: flex-start; }
}



/* ===== Signs Showcase (Left sidebar + Right big image) ===== */
.signs-showcase {
  width: 100%;
  box-sizing: border-box;;
}

/* wrapper to center and limit width
   NOTE: gap set to 0 -> no space between the two columns */
   .signs-inner {
      margin: 0 auto;
      display: grid;
      grid-template-columns: 460px 1fr; /* left column fixed width, right expands */
      column-gap: 0; /* no gap between left and right */
      row-gap: 0;
      align-items: stretch; /* make columns match height */
      box-sizing: border-box;
  }

/* Force full-height appearance of right panel to match sidebar */
.showcase-sidebar {
  background: #0a66ff;
  color: #fff;
  padding: 18px;
  box-sizing: border-box;
  border-radius: 6px 0 0 6px; /* rounded left corners only so joined edge is flush */
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* each titled section in sidebar */
.sidebar-block {
  margin-bottom: 10px;
  padding-bottom: 0px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sidebar-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.block-title {
  margin: 0 0 10px;
  text-align: center;
  font-weight: 600;
  font-size: 22px;
  color: #ffffff;
  letter-spacing: 0.6px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.15);
}

/* images grid inside each block: 2 per row */
.block-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px 10px;
  align-items: center;
}

.img-wrap {
  background: #fff;
  padding: 0px;
  border-radius: 4px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-wrap img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* ---------- RIGHT PANEL ---------- */
.showcase-right {
  width: 100%;
  display: block;
}

/* make the image-wrap stretch to the same height as the sidebar */
.showcase-image-wrap {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14);
  background: #111;
  height: 100%;           /* important: stretch to fill the grid row height */
  border-radius: 0 6px 6px 0; /* rounded right corners only */
  display: block;
}

/* big image fills the right area and matches the sidebar height */
.big-showcase-img {
  width: 100%;
  height: 100%; /* fill the parent which is stretched to sidebar height */
  object-fit: cover;
  display: block;
}

/* ---------- LEGEND OVERLAY ---------- */
.legend-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 12px 18px;
  box-sizing: border-box;
  background: #8b8a8adb;
  color: #fff;
}

/* legend grid - 4 columns */
.legend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 18px;
  align-items: start;
  justify-items: stretch;
}

/* legend column and list items */
.legend-column {
  list-style: none;
  margin: 0;
  padding: 0;
}
.legend-column li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 6px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.6px;
}

/* number badge style - small red circle with white number */
.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #d52b2b;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  margin-right: 4px;
}

/* responsive adjustments for signs showcase */
@media (max-width: 1200px) {
  .signs-inner { grid-template-columns: 300px 1fr; padding: 0 16px; }
  .img-wrap img { height: auto; }
}

@media (max-width: 992px) {
  /* stack on narrow screens: sidebar above image */
  .signs-inner { grid-template-columns: 1fr; gap: 18px; padding: 0 0px; }
  .showcase-sidebar { border-radius: 0px; }
  .showcase-image-wrap { border-radius: 0px; height: auto; }
  .big-showcase-img { height: 380px; object-fit: cover; }
  .legend-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .img-wrap img { height: auto; }
  
  .legend-overlay {
      position: relative;
      background: #6d00e2;

  }
  .legend-grid{
    gap: 0px;
}
}

@media (max-width: 480px) {
  .big-showcase-img { height: auto; object-position: center 35%; }
  .legend-grid { grid-template-columns: 1fr; }
  .block-grid { grid-template-columns: 1fr 1fr; }
  .img-wrap img { height: auto; }
}

/* reset for sections used here */
.gallery-section,
.red-title-section,
.gallery-banner,
.client-logos,
.google-map-section {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== Image Grid ===== */
.gallery-flex { display:flex; flex-wrap:wrap; }
.gallery-item { flex:1 1 20%; max-width:20%; }
.gallery-item img { width:100%; height:450px; object-fit:cover; display:block; }
@media(max-width:1024px){ .gallery-item{ flex:1 1 33.33%; max-width:33.33%; } }
@media(max-width:768px){ .gallery-item{ flex:1 1 50%; max-width:50%; } }
@media(max-width:480px){ .gallery-item{ flex:1 1 100%; max-width:100%; } }

/* ===== Red Title Section ===== */
.red-title-section { background:#c8102e; text-align:center; }
.red-container { max-width:1200px; margin:0 auto; padding:25px 20px; }
.red-container h2 { color:#fff; margin:0; font-size:26px; font-weight:600; }

/* ===== Gallery Banner (desktop styles kept) ===== */
.gallery-banner {
  position: relative;
  height: 600px;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
}
.gallery-bg { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-shape {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 40%;
  background: #0056a6;
  z-index: 2;
  display: flex; align-items: center;
  -webkit-clip-path: ellipse(90% 100% at 0% 50%);
  clip-path: ellipse(90% 100% at 0% 50%);
  box-shadow: 10px 0 20px rgba(0,0,0,0.08) inset;
}
.banner-inner { padding-left: 6%; color: #fff; }
.banner-inner h2 {
  font-weight: 700;
  font-size: clamp(48px, 10vw, 140px);
  line-height: 0.95;
  margin: 0;
  text-shadow: 0 6px 12px rgba(0,0,0,0.25);
}
.banner-inner p { font-size: clamp(16px, 2.2vw, 28px); margin-top: 14px; }
.banner-link:hover .banner-inner {
  opacity: 0.9; /* subtle hover effect */
  transform: translateY(-2px);
  transition: all 0.25s ease;
}
/* ===== Client Logos ===== */
.client-logos { width:100%; padding:40px 0; background:#fff; }
.client-logos-inner { max-width:1200px; margin:0 auto; padding:0 20px; }
.client-logos-inner img { width:100%; height:auto; display:block; }

/* ===== New Google Map Section =====
   Key idea:
   - The <img.map-bg> is full-width and placed behind everything.
   - .map-clip is absolutely positioned and contains the iframe.
   - iframe gets the same clip-path so its curved edge sits flush on the image.
*/
.google-map-section {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: 600px;
  overflow: hidden;
  background: #000; /* fallback while loading */
}

/* full-bleed background image (fills the whole section) */
.google-map-section .map-bg {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* clipped map overlay on top of the background image */
.google-map-section .map-clip {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 40%;
  z-index: 2;
  display: block;
  /* clip on the left side to create the curved edge like the banner */
  -webkit-clip-path: ellipse(90% 100% at 100% 50%);
  clip-path: ellipse(90% 100% at 100% 50%);
  /* optional subtle shadow to sit above the image */
  box-shadow: -20px 0 40px rgba(0,0,0,0.12);
  background: transparent;
  overflow: hidden;
}

/* iframe must fill the clipped container exactly (no margins/gaps) */
.google-map-section .map-clip iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  /* ensure the iframe respects the same clipping on mobile/desktop rendering */
  -webkit-clip-path: none; /* not needed because parent clips, but included for safety */
  clip-path: none;
}

.red-heading .desktop-only { display: inline !important; }
.red-heading .mobile-only  { display: none !important; }

/* responsive adjustments (gallery/grid and red title mobile tweaks) */
@media (max-width: 992px) {
  /* Gallery: make each item 25% width = 4 per row */
  .gallery-flex { align-items: stretch; }
  .gallery-item {
    flex: 1 1 25% !important;
    max-width: 25% !important;
    box-sizing: border-box;
}
.gallery-section .gallery-item:last-child { display: none; }

.gallery-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* Mobile red title swap */
.red-heading .desktop-only { display: none !important; }
.red-heading .mobile-only  { display: inline !important; }
.red-heading .mobile-only {
    text-align: center;
    white-space: pre-line;
    line-height: 1.05;
    font-family: 'Pacifico', cursive;
    font-weight: 700;
}

/* Contact "small" full width & centre (header handled in header.php) */
.small {
    order: 3;
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    margin: 12px 0 20px;
    padding: 6px 12px;
    font-size: clamp(16px, 4.4vw, 22px);
    font-weight: 800;
    line-height: 1.05;
    color: #ffffff;
    background: transparent;
    text-transform: uppercase;
    -webkit-text-stroke: 0.6px rgba(0,0,0,0.25);
    text-shadow: 0 4px 0 rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.32);
}
}

/* very small screen tweaks for gallery & red title */
@media (max-width: 480px) {
  .gallery-item { flex:1 1 50%; max-width:50%; }
  .gallery-item img { height: 180px; }
  .red-title-section .red-container { padding: 20px 12px; padding-bottom: 40px; }
  .red-title-section .red-container h2 { font-size: clamp(24px, 8.5vw, 36px); -webkit-text-stroke: 1.6px #0b63d1; text-shadow: 0 6px 0 rgba(0,0,0,0.26), 0 2px 6px rgba(0,0,0,0.32); font-style: italic; }
}

/* ============================================================
   FINAL MOBILE-ONLY OVERRIDES for gallery-banner (no conflicts)
   Targets <= 992px and converts left desktop arc into a bottom-centered arc
   ============================================================ */
   @media (max-width: 992px) {
      .gallery-banner {
        position: relative !important;
        width: 100vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        height: 78vh !important;        /* slightly smaller so image visible behind arc */
        overflow: visible !important;
        margin: 0 !important;
        z-index: 1 !important;
        display: block;
    }

    /* background image: place behind everything and slightly zoom for better composition */
    .gallery-banner .gallery-bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 0 !important;
        pointer-events: none !important;
        transform: scale(1.05);
    }

    /* bottom semicircle: centered, wide, and slightly pushed below viewport so only top arc appears */
    .gallery-banner .banner-shape {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 170vw !important;       /* very wide for smooth arc */
        height: 72vw !important;       /* flattened circle making a wide arc */
        max-height: 760px !important;
        border-radius: 50% !important;
        background: #0a66ff !important;
        bottom: 0 !important;      /* push most of circle below viewport (show top arc) */
        z-index: 2 !important;         /* sits above the image but below text/logo */
        box-shadow: 0 -6px 0 rgba(0,0,0,0.10) !important, 0 16px 36px rgba(0,0,0,0.28) !important;
        -webkit-clip-path: none !important;
        clip-path: none !important;
        overflow: visible !important;
        pointer-events: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* wrapper for logo + text, positioned slightly higher so text sits nicely on arc */
    .gallery-banner .banner-inner {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: calc(14vw) !important;   /* positions text above visible arc */
        z-index: 4 !important;
        width: 100% !important;
        max-width: 920px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 14px !important;
        pointer-events: none !important;
        text-align: center !important;
        color: #fff !important;
    }

    /* circular logo centered on top-edge of arc */
    .gallery-banner .banner-inner::before {
        content: "";
        background-image: url('http://amarwp.com/slingshot/wp-content/uploads/2025/09/Untitled-19.png') !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        width: 80px !important;
        height: 80px !important;
        border-radius: 50% !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.28) !important;
        display: block !important;
        margin-bottom: 12px !important;
        transform: translateY(6px) !important; /* pulls it a little into the arc */
        z-index: 5 !important;
        pointer-events: none !important;
    }

    /* headline and subtitle: crisp, centered above the arc */
    .gallery-banner .banner-inner h2 {
        margin: 0 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-family: "Helvetica Neue", Arial, sans-serif !important;
        font-size: clamp(34px, 11vw, 86px) !important;
        line-height: 0.98 !important;
        text-align: center !important;
        -webkit-text-stroke: 0.8px rgba(0,0,0,0.12) !important;
        text-shadow: 0 8px 0 rgba(0,0,0,0.26), 0 6px 18px rgba(0,0,0,0.34) !important;
        z-index: 6 !important;
        pointer-events: none !important;
    }

    .gallery-banner .banner-inner p {
        margin: 6px 0 0 !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        font-size: clamp(12px, 3.8vw, 20px) !important;
        text-align: center !important;
        text-shadow: 0 6px 8px rgba(0,0,0,0.28) !important;
        z-index: 6 !important;
        pointer-events: none !important;
    }

    /* subtle dark separator under the arc similar to your mock */
    .gallery-banner::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        height: 6px !important;
        background: rgba(0,0,0,0.42) !important;
        bottom: -4px !important;
        z-index: 3 !important;
        pointer-events: none !important;
    }

    /* final adjustments for very small phones */
    @media (max-width: 420px) {
        .gallery-banner { height: 84vh !important; }
        .gallery-banner .banner-shape {
          width: 190vw !important;
          height: 88vw !important;
          bottom: -34vw !important;
      }
      .gallery-banner .banner-inner { bottom: calc(12.5vw) !important; }
      .gallery-banner .banner-inner::before { width: 64px !important; height: 64px !important; transform: translateY(6px) !important; margin-bottom: 10px !important; }
      .gallery-banner .banner-inner h1 { font-size: clamp(28px, 14vw, 62px) !important; }
      .gallery-banner .banner-inner p  { font-size: clamp(12px, 3.8vw, 16px) !important; }
  }
}
@media (max-width: 992px) {
  .gallery-banner .banner-shape {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 120vw !important;   /* not too wide */
    height: 50vw !important;   /* flatter arc */
    bottom: 0 !important;  /* just enough below so only top arc shows */
    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important; /* smooth semi-circle */
    background: #0a66ff !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.gallery-banner .banner-inner {
    bottom: 18vw !important;   /* lift text up onto the arc */
}
.gallery-banner .banner-shape {
  top: auto;       /* remove top */
  bottom: 0;       /* stick to bottom */
}

}

/* -------------------------
   MOBILE: map as bottom arc
   Replace existing @media (max-width:992px) google-map-section rules
   ------------------------- */
/* -------------------------
   MOBILE: map arc positioned on BOTTOM (use instead of previous mobile map rules)
   ------------------------- */
   @media (max-width: 992px) {
      .google-map-section {
        position: relative !important;
        width: 100vw !important;
        left: 50% !important;
        
        height: 78vh !important;
        overflow: hidden !important;
        margin: 0 !important;
        z-index: 1 !important;
        background: transparent !important;
    }

    .google-map-section .map-bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 0 !important;
        transform: scale(1.03) !important;
        pointer-events: none !important;
    }

    .google-map-section .map-clip {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100%;
        height: 60% !important;
        z-index: 2 !important;
        overflow: hidden !important;
        display: block !important;
        background: transparent !important;
        -webkit-clip-path: ellipse(65% 80% at 50% 100%);
        clip-path: ellipse(65% 80% at 50% 100%);
        pointer-events: auto !important;
    }

    .google-map-section .map-clip iframe {
        display: block !important;
        width: 110% !important;
        height: 160% !important;
        min-height: 420px !important;
        border: 0 !important;

        margin-top: -6% !important; /* lift to show correct map area */
    }
}

/* Social icons mobile block */
.social-icons-mobile {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.social-icons-mobile .social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
}

/* TikTok */
.social-icons-mobile .tiktok {
  background: #000;
}

/* Instagram gradient */
.social-icons-mobile .instagram {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

/* Facebook */
.social-icons-mobile .facebook {
  background: #1877f2;
}

/* Ensure only on mobile */
@media(min-width:993px){
  .social-icons-mobile { display:none; }
}


/* End of style */





/* ===== Slingshot Gallery: scoped styles (prefixed to avoid conflicts) ===== */

/* helper container so we don't clash with global .container */
.slingshot-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ===== Archive ===== */
.slingshot-gallery-archive {
  background: #3e1e5d;
  padding: 60px 20px;
  text-align: center;
}

.slingshot-archive-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 40px;
}

/* grid used both on archive and single but namespaced */
.slingshot-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0 auto;
}

/* card */
.slingshot-gallery-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.slingshot-gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.slingshot-gallery-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.slingshot-gallery-thumb {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

.slingshot-figcaption {
  padding: 15px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
}

/* pagination */
.slingshot-pagination { margin-top: 28px; }

/* ===== Responsive Archive Grid ===== */
@media (max-width: 1024px) {
  .slingshot-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .slingshot-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .slingshot-gallery-grid {
    grid-template-columns: 1fr;
  }
  .slingshot-gallery-thumb {
    height: 200px;
  }
}

/* ===== Single Gallery ===== */
.slingshot-single-gallery {
  background: #f8f9fa;
  padding: 40px 20px;
}

.slingshot-single-gallery .slingshot-container {
  padding: 30px 0;
}

.slingshot-gallery-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: #222;
}

/* Separate grid for single gallery images */
.slingshot-single-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0 auto;
}

.slingshot-single-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.slingshot-single-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.slingshot-single-item:hover img {
  transform: scale(1.05);
}

.slingshot-single-item:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* responsive */
@media (max-width: 1024px) {
  .slingshot-single-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .slingshot-single-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .slingshot-single-grid { grid-template-columns: 1fr; }
  .slingshot-single-item img { height: 200px; }
}

/* small utility states */
.slingshot-no-items,
.slingshot-no-images {
  text-align: center;
  color: #666;
  padding: 18px 0;
}