/* ============================================================
   Home page responsive refinements (tablet & mobile)
   ------------------------------------------------------------
   Loaded AFTER the theme's style.css so these rules win on
   cascade order. Breakpoints follow the theme:
     <= 991px  tablet
     <= 767px  mobile
     <= 575px  small mobile
   ============================================================ */

/* ---------------------------------------------------------- */
/* Hero (Mainhero -> .hero-layout2)                            */
/* The theme hero was designed around a search form. This site */
/* only shows a title + a floating "bag" image, so the large   */
/* bottom padding and the absolutely-positioned nav arrows are */
/* tuned for a layout that no longer exists.                   */
/* ---------------------------------------------------------- */
@media (max-width: 991px) {
  /* Trim the big empty band left under the title/image. */
  .hero-layout2 .hero-mask {
    padding-top: 90px;
    padding-bottom: 40px;
  }

  .hero-layout2 .hero-bottom {
    margin-top: 0;
  }

  /* Once the two columns stack, keep the bag image sensibly sized
     and centred instead of stretching to the full column width. */
  .hero-layout2 .hero-img {
    margin-top: 24px;
    text-align: center;
  }

  .hero-layout2 .hero-img .img1 {
    width: 70%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
  }

  /* The up/down chevron arrows are positioned for the taller desktop
     hero and float over the content on small screens. Autoplay keeps
     the slides moving, so hide them below the desktop breakpoint. */
  .hero-layout2 .icon-btn {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .hero-layout2 .hero-mask {
    padding-top: 80px;
    padding-bottom: 28px;
  }

  .hero-layout2 .hero-img .img1 {
    max-width: 240px;
  }
}

/* ---------------------------------------------------------- */
/* Upcoming destination blog card (.blog-wrapper1)            */
/* The theme already stacks .blog-style4 at <=991px; just tidy */
/* the surrounding spacing so it doesn't feel cramped.         */
/* ---------------------------------------------------------- */
@media (max-width: 991px) {
  .blog-wrapper1.space-top {
    padding-top: 60px;
  }

  .blog-style4 .blog-image img {
    width: 100%;
    border-radius: 15px;
  }
}

/* ---------------------------------------------------------- */
/* Sponsors & Attendees logo grids (.brand--layout5)         */
/* These use inline JS-driven layouts; here we just keep the   */
/* logos from getting oversized and the divider proportional.  */
/* ---------------------------------------------------------- */
@media (max-width: 991px) {
  .brand--layout5 img {
    max-height: 100px;
  }
}

@media (max-width: 575px) {
  .brand--layout5 img {
    max-height: 80px;
  }
}

/* ---------------------------------------------------------- */
/* Stats / facts band (.fact--layout1)                       */
/* Stop the three stat blocks from crowding into one tight row */
/* on phones; let them wrap and breathe.                       */
/* ---------------------------------------------------------- */
@media (max-width: 767px) {
  .fact--layout1 .fact-block {
    text-align: center;
    margin-bottom: 24px;
  }

  .fact--layout1 .col-auto {
    flex: 0 0 auto;
    width: 50%;
  }
}

@media (max-width: 575px) {
  .fact--layout1 .col-auto {
    width: 100%;
  }
}

/* ---------------------------------------------------------- */
/* Testimonial cards (.testi-style3)                          */
/* On desktop the white "card" is a fixed-size background SVG  */
/* (max 373x373) that cannot grow with the text. Below the     */
/* desktop 2-up layout the carousel switches to single,        */
/* full-width slides (see Testhome.jsx), so here we replace    */
/* the static SVG with a real, self-sizing white card. This is */
/* what stops the name/quote from spilling outside the white   */
/* area on tablets, and gives a cleaner mobile design.         */
/* ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .testimonial-style4 .title-area {
    margin-bottom: 30px;
  }

  .testi-style3 {
    max-width: 560px;
    min-height: auto;
    margin: 0 auto 24px;
    padding: 30px 28px;
    background-color: var(--white-color);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
  }

  /* The decorative speech-bubble SVG is sized for the desktop card only. */
  .testi-style3 .testi-bg {
    display: none;
  }

  /* Show the quote first, then the attribution — a cleaner reading order. */
  .testi-style3 .testi-body {
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
  }

  .testi-style3 .testi-text {
    padding: 0;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--body-color);
  }

  /* The avatar circle is empty in this carousel, so drop it and
     left-align the name with a small theme-coloured marker. */
  .testi-style3 .testi-header {
    justify-content: flex-start;
    align-items: center;
  }

  .testi-style3 .testi-avater {
    display: none;
  }

  .testi-style3 .testi-client {
    text-align: left;
    padding-right: 0;
  }

  .testi-style3 .testi-name {
    position: relative;
    margin-bottom: 0;
    padding-left: 16px;
    font-size: 18px;
  }

  .testi-style3 .testi-name::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--theme-color);
  }
}

/* Small mobile refinements */
@media (max-width: 575px) {
  .testi-style3 {
    padding: 24px 20px;
    border-radius: 14px;
  }

  .testi-style3 .testi-text {
    font-size: 15px;
  }
}

/* Gallery / video band — keep it a sensible height on tablet/mobile.
   (Moved here from an inline injected <style> in Testhome.jsx.) */
@media (max-width: 991px) {
  .gallery-style5 {
    min-height: 312px;
  }
}

/* ---------------------------------------------------------- */
/* Top destinations gallery (.top-destination-section)       */
/* Give the stacked thumbnails consistent spacing on mobile.   */
/* ---------------------------------------------------------- */
@media (max-width: 767px) {
  .new-top-desti-thumb {
    margin-bottom: 24px;
  }
}

/* ============================================================
   About page responsive refinements
   ============================================================ */

/* ---------------------------------------------------------- */
/* "We are DestinationDSO" image cluster (.image-box1)        */
/* On desktop img2 (circle), the "16 LEADERS" badge and the    */
/* "480+" badge are all absolutely positioned so they overlap  */
/* the main photo by design. The Bootstrap columns stack at    */
/* <=991px, but the theme only unstacks these at <=767px —     */
/* and even then img2 stays absolute and overlaps img1.        */
/* Below 991px, lay the whole cluster out as a centred         */
/* vertical stack so the images sit one after another with no  */
/* overlap, with the two stat badges side by side underneath.  */
/* ---------------------------------------------------------- */
@media (max-width: 991px) {
  .image-box1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin: 0 0 30px;
  }

  /* Main photo takes its own row, full width and centred. */
  .image-box1 .img1 {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* Pull the circle image out of absolute positioning so it
     sits below the main photo instead of on top of it. */
  .image-box1 .img2 {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 150px;
    height: 150px;
    padding: 10px;
    margin: 0 auto;
  }

  /* The two stat badges drop into the flow, side by side. */
  .image-box1 .media-box1,
  .image-box1 .media-box2 {
    position: relative;
    width: 45%;
    height: fit-content;
    padding: 15px;
    border: none;
    outline: none;
    text-align: center;
    margin: 0;
    top: unset;
    bottom: unset;
    right: unset;
    left: unset;
  }

  .image-box1 .media-box1 .media-info,
  .image-box1 .media-box2 .media-info {
    font-size: 20px;
  }

  .image-box1 .media-box1 .media-text,
  .image-box1 .media-box2 .media-text {
    font-size: 15px;
  }
}

/* ---------------------------------------------------------- */
/* Sponsorship band (.benefits--layout1)                      */
/* The .img1 background div is fixed at min-height:770px for   */
/* the desktop overlay. Once it drops into the flow (<=991px)  */
/* that height becomes a giant empty image band on phones —    */
/* scale it down to something proportional.                    */
/* ---------------------------------------------------------- */
@media (max-width: 991px) {
  .benefits--layout1 .img1 {
    min-height: 360px;
    border-radius: 15px;
  }

  /* Centre the "More Info" button + phone icon. */
  .benefits--layout1 .about-bottom {
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .benefits--layout1 .img1 {
    min-height: 260px;
  }
}

/* ---------------------------------------------------------- */
/* "About Destination DSO" stat badge (.img-box3 .box1)       */
/* The first section drops a "16 / Leaders Exclusively         */
/* Invited" badge above the image. Keep it centred and stop    */
/* the large "16" from crowding the text on small screens.     */
/* ---------------------------------------------------------- */
@media (max-width: 575px) {
  .img-box3 .box1 .media-box1 .media-info {
    font-size: 2.75rem !important;
  }
}

/* ---------------------------------------------------------- */
/* "Shaping the Future of DSO Leadership" (.about-mission)    */
/* Scoped via the about-mission class (added in About.jsx) so  */
/* the first "About Destination DSO" section — which shares    */
/* .about-layout1 — keeps its left-aligned bullet list.        */
/* On mobile, stack each list item as: icon, then heading,     */
/* then paragraph, all centred. Centre the More Info button    */
/* too. Desktop is untouched. The paired images below already  */
/* stack via the theme's img-box3 rules — we just keep them    */
/* centred and clear of each other.                            */
/* ---------------------------------------------------------- */
@media (max-width: 991px) {
  .about-mission .about-list3 .list-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Icon first, centred, with breathing room before the text. */
  .about-mission .about-list3 .list-item .about-icon {
    margin: 0 0 16px;
  }

  .about-mission .about-list3 .list-item .icon-content {
    text-align: center;
  }

  /* Centre the "More Info" button + phone icon. */
  .about-mission .about-bottom {
    justify-content: center;
  }

  /* Keep the paired images centred and stacked (no overlap). */
  .about-mission .img-box3 {
    text-align: center;
    margin-top: 30px;
  }

  .about-mission .img-box3 .bottom-img {
    display: block;
    margin-top: 20px;
    justify-content: center;
  }

  .about-mission .img-box3 .img1,
  .about-mission .img-box3 .img3 {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
}

/* ============================================================
   Gallery page responsive refinements
   ------------------------------------------------------------
   The grid and tile height are set as INLINE styles in
   Gallery.jsx (repeat(4, 1fr) + height:200px), so they never
   respond to viewport width — 4 columns stay 4 columns on a
   phone. Inline styles can only be overridden with !important,
   so these rules step the column count and tile height down at
   each breakpoint. Desktop (>991px) keeps the inline 4-up grid.
   ============================================================ */

/* Tablet: 4 columns is too tight — drop to 3. */
@media (max-width: 991px) {
  .gallery-mesonary {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  .gallery-mesonary .gallery-img5 img {
    height: 180px !important;
  }
}

/* Mobile: 2 columns. */
@media (max-width: 767px) {
  .gallery-mesonary {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gallery-mesonary .gallery-img5 img {
    height: 160px !important;
  }

  /* Centre the wrapped filter tab buttons instead of left-aligning. */
  .filter-menu1 {
    text-align: center;
  }
}

/* Small mobile: keep 2 columns but tighten the tiles and gaps. */
@media (max-width: 575px) {
  .gallery-mesonary {
    gap: 8px !important;
  }

  .gallery-mesonary .gallery-img5 img {
    height: 130px !important;
  }
}

/* ============================================================
   Footer responsive refinements (.footer-layout4)
   ------------------------------------------------------------
   Desktop and tablet (>=768px, where the two widgets sit side
   by side) are left exactly as-is. These rules only touch the
   <=767px phone layout.
   ============================================================ */

/* The footer's 195px top padding is sized for the desktop background
   art and leaves a huge empty band above the content on smaller
   screens. Trim it right down for tablet and mobile. */
@media (max-width: 991px) {
  .footer-layout4 {
    padding-top: 90px;
  }
}

@media (max-width: 767px) {
  .footer-layout4 {
    padding-top: 60px;
  }

  /* The newsletter row holds only the logo, in a col-sm-6 column.
     At 576–767px that column is just half the row width, so the
     "centred" logo actually lands in the LEFT half of the screen.
     Make the column full width so the logo centres for real. */
  .footer-layout4 .footer-newsletter2 .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .footer-layout4 .footer-newsletter2 .footer-logo {
    width: 100%;
    text-align: center;
  }

  /* The logo's inline width:50% is relative to a now full-width
     column, so it would balloon — pin it to a sensible centred size. */
  .footer-layout4 .footer-logo .logo {
    width: auto !important;
    max-width: 160px !important;
  }

  /* --- Centre the stacked widgets (headings, paragraph, links) --- */
  .footer-layout4 .widget-area2 .footer-widget {
    margin-bottom: 36px;
    text-align: center;
  }

  /* The About paragraph is capped at max-width:275px; text-align
     only centres the text inside that box, so the box itself must
     be centred too — otherwise it hugs the left and looks off. */
  .footer-layout4 .vs-widget-about .footer-text {
    margin-left: auto;
    margin-right: auto;
  }

  /* Re-centre the animated underline under the heading. The dot
     (::after) is driven by the shared `leftToRight` keyframe, which
     animates `left` 0→56px, so we must NOT set `left` here. Instead
     shift the whole decoration to the centre with margin-left:
     calc(50% - 30px) — the keyframe leaves margin untouched, so the
     dot keeps its exact original motion, just centred. */
  .footer-layout4 .footer-widget .widget_title::before {
    left: calc(50% - 30px);
  }

  .footer-layout4 .footer-widget .widget_title::after {
    margin-left: calc(50% - 30px);
  }

  /* Stack the Useful Links list one per row, centred (desktop keeps
     its 2-column float). */
  .footer-layout4 .footer-widget.widget_nav_menu li {
    float: none;
    width: 100%;
    text-align: center;
  }

  .footer-layout4 .footer-widget.widget_nav_menu a {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
  }
}

@media (max-width: 575px) {
  .footer-layout4 .footer-logo .logo {
    max-width: 140px !important;
  }

  /* Wrap the long copyright line cleanly and keep it centred. */
  .footer-layout4 .copyright-text {
    line-height: 1.6;
  }
}