/* ----------------------------------------
   Brand highlight for clickable links only
   ---------------------------------------- */
a.brand-highlight-link {
  color: #24FFF0 !important;        /* brand cyan */
  text-decoration: none !important; /* no underline by default */
  font-weight: 600;
  transition: color 0.3s ease;
}

a.brand-highlight-link:hover,
a.brand-highlight-link:focus {
  color: #F39300 !important;        /* Scene Team orange */
  text-decoration: underline !important;
}
/* =========================
   Portfolio Collapsible Menu – Layout + Polish
   ========================= */

.collapsible-menu{
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Heading */
.collapsible-menu h4{
  margin: 0 0 22px 0;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.2;
}

/* Top-level list becomes a responsive grid */
.collapsible-menu > ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 40px;
}

/* Desktop: 2 columns */
@media (min-width: 900px){
  .collapsible-menu > ul{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Top-level items */
.collapsible-menu > ul > li{
  margin: 0;
}

/* Make links and buttons visually consistent */
.collapsible-menu a,
.collapsible-menu .submenu-toggle{
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 14px 14px;
  border-radius: 10px;

  font-size: 16px;
  line-height: 1.3;

  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

/* Hover */
.collapsible-menu a:hover,
.collapsible-menu .submenu-toggle:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

/* Button reset */
.collapsible-menu .submenu-toggle{
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* Add a clean chevron indicator (replaces the “random ▼” feel) */
.collapsible-menu .submenu-toggle::after{
  content: "▾";
  opacity: 0.75;
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

/* Rotate chevron when open */
.collapsible-menu .submenu-toggle[aria-expanded="true"]::after{
  transform: rotate(180deg);
}

/* Submenu */
.collapsible-menu .submenu{
  list-style: none;
  padding: 10px 0 0 0;
  margin: 0 0 6px 0;
}

/* Submenu items */
.collapsible-menu .submenu li{
  margin: 8px 0 0 0;
}

/* Submenu links: slightly lighter treatment */
.collapsible-menu .submenu a{
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 15px;
}
/* Brand colours for portfolio menu */
.collapsible-menu a,
.collapsible-menu .submenu-toggle{
  color: #24FFF0 !important;
}

.collapsible-menu a:hover,
.collapsible-menu a:focus,
.collapsible-menu .submenu-toggle:hover,
.collapsible-menu .submenu-toggle:focus{
  color: #FF6B00 !important;
}

/* Nested submenu indentation (Early Learning) */
.collapsible-menu .submenu .submenu{
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.10);
}

/* Contact cards: consistent link styling */
.zscustom-contact-box a,
.zscustom-contact-box a:link,
.zscustom-contact-box a:visited {
  color: #24FFF0 !important;           /* brand cyan */
  text-decoration: none !important;
  font-weight: 600;
  transition: color 0.2s ease;
}

.zscustom-contact-box a:hover,
.zscustom-contact-box a:focus {
  color: #F39300 !important;           /* Scene Team orange (hover) */
  text-decoration: underline !important;
}
/* Studio Northbridge special hover color */
.zscustom-contact-box a[href*="studionorthbridge.com"]:hover,
.zscustom-contact-box a[href*="studionorthbridge.com"]:focus {
  color: #58b7dd !important;  /* Studio Northbridge blue */
  text-decoration: underline;
}

/* ===============================
   Tighten Photo Circle
   =============================== */

.zscustom-section-evento-dark-04 .zpelem-col{
  text-align: center !important;
}
.zscustom-section-evento-dark-04 { text-align: center; }

.zscustom-section-evento-dark-04 
.zscustom-speaker-photo-box{
    margin-inline: auto !important;
    max-width: fit-content !important;
    width: fit-content !important;
    padding: 14px !important;
    display: inline-block !important;
}

.zscustom-section-evento-dark-04 
.zscustom-speaker-photo-box img{
    border-radius: 999px !important;
    display: block;
}

.zscustom-section-evento-dark-04 
.zscustom-speaker-name-box{
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -22px !important;
    padding: 22px 24px !important;
}

@media (max-width: 767px){
  .zscustom-section-evento-dark-04 
  .zscustom-speaker-photo-box{
      max-width: 92% !important;
      padding: 14px !important;
  }

  .zscustom-section-evento-dark-04 
  .zscustom-speaker-name-box{
      max-width: 92% !important;
      padding: 16px 16px !important;
  }
}
/* Apply to the SECTION that contains the 3 main CTAs */

.connect-actions{
  text-align: center !important;   /* centers inline elements */
}

/* Center Zoho’s button wrapper */
.connect-actions .zpbutton-container{
  display: inline-block !important;
  margin: 0 auto !important;
  text-align: center !important;
  width: auto !important;
}

/* Desktop: smaller, consistent width */
.connect-actions .zpbutton{
  width: 320px !important;         /* <-- tighter desktop */
  display: inline-flex !important; /* keeps label centered */
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* Tablet + mobile: centered, not left, and comfortably wide */
@media (max-width: 991px){

  .connect-actions .zpbutton-container{
    display: block !important;
    width: 100% !important;
  }

  .connect-actions .zpbutton{
    width: 320px !important;      /* same size on tablet + mobile */
    max-width: 90% !important;    /* safety on very small phones */
    margin: 0 auto !important;    /* keep centered */
  }
}
/* Studio Northbridge button – light blue */
.studio-section .zpbutton{
    background-color: #58B7DD !important;
    color: #ffffff !important;
    border: 2px solid #58B7DD !important;
    box-shadow: 0 4px 12px rgba(88, 183, 221, 0.25);
    transition: all 0.3s ease;

    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Hover – dark blue background but LIGHT border */
.studio-section .zpbutton:hover{
    background-color: #183350 !important;
    border: 2px solid #58B7DD !important;
    box-shadow: 0 6px 18px rgba(24, 51, 80, 0.35);
}

/* ===============================
   H1 One line Connect Page
   =============================== */

/* Desktop (large screens) */
@media (min-width: 992px){
  .zscustom-section-evento-dark-04 
  [data-element-id="elm_PXfdleNs3NbefhG5_pGJrA"] 
  h1.zpheading{
      font-size: 40px !important;
      line-height: 1.15 !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px){
  .zscustom-section-evento-dark-04 
  [data-element-id="elm_PXfdleNs3NbefhG5_pGJrA"] 
  h1.zpheading{
      font-size: 34px !important;
  }
}

/* Mobile */
@media (max-width: 767px){
  .zscustom-section-evento-dark-04 
  [data-element-id="elm_PXfdleNs3NbefhG5_pGJrA"] 
  h1.zpheading{
      font-size: 30px !important;
  }
}
.acknowledgement-section {
  background: rgba(255,255,255,0.03);
  padding: 20px 0;
  margin-top: 5px;
  text-align: center;
}
/* =====================================================
   Overlay Badge — CLEAN SYSTEM (no :has, no clipping)
   Uses padding-space + translate overlap (safe in publish)
   ===================================================== */

/* 1) Make the IMAGE COLUMN the positioning anchor + create space for overlap */
[data-element-id="elm_fDra_Ad_cYVGggAlouKt-A"].zpelem-col{
  position: relative !important;
  overflow: visible !important;
  padding-bottom: 120px !important;   /* desktop/tablet space for badge */
}

/* Mobile needs less space */
@media (max-width: 767px){
  [data-element-id="elm_fDra_Ad_cYVGggAlouKt-A"].zpelem-col{
    padding-bottom: 88px !important;  /* room so badge doesn't hit “About us” */
  }
}

/* 2) Ensure the image wrapper itself never clips */
[data-element-id="elm_V9x2Kx7BfTB9q7q0nWnJng"].zpelem-image,
[data-element-id="elm_V9x2Kx7BfTB9q7q0nWnJng"] .zpimage-container,
[data-element-id="elm_V9x2Kx7BfTB9q7q0nWnJng"] figure,
[data-element-id="elm_V9x2Kx7BfTB9q7q0nWnJng"] picture{
  overflow: visible !important;
}

/* 3) Badge base (desktop/tablet) */
.zscustom-overlay-box{
  position: absolute !important;
  z-index: 999 !important;

  width: 230px !important;           /* sized for “Conferences” */
  height: 140px !important;
  padding: 12px 14px !important;
  border-radius: 22px !important;

  box-sizing: border-box !important;
  overflow: visible !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  box-shadow: 0 18px 40px rgba(0,0,0,0.30) !important;

  /* KEY: place it in the column’s bottom padding area, then lift it up
     so it overlaps the image — no negative bottoms, no clipping */
  bottom: 0 !important;
  right: 24px !important;
  transform: translate3d(34px, -50%, 0) !important;
}

/* 4) Clean inner spacing + typography */
.zscustom-overlay-box h1,
.zscustom-overlay-box h2,
.zscustom-overlay-box h3,
.zscustom-overlay-box p{
  margin: 0 !important;
  padding: 0 !important;
}

.zscustom-overlay-box .zpelem-icon{
  margin: 0 !important;
  padding: 0 !important;
}

.zscustom-overlay-box .zpicon-container{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* Icon: closer to text */
.zscustom-overlay-box .zpicon{
  transform: scale(0.82) !important;
  transform-origin: center !important;
}

/* Heading */
.zscustom-overlay-box h2{
  font-size: 20px !important;         /* slightly larger */
  font-weight: 700 !important;
  line-height: 1.05 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Stat */
.zscustom-overlay-box p{
  font-size: 18px !important;         /* slightly larger */
  font-weight: 700 !important;
  line-height: 1.05 !important;
}

/* Remove any accidental pseudo characters on the number */
.zscustom-overlay-box .zpelem-text p::before,
.zscustom-overlay-box .zpelem-text p::after{
  content: "" !important;
  display: none !important;
}

/* 5) Desktop: move DOWN + RIGHT */
@media (min-width: 992px){
  .zscustom-overlay-box{
    right: 24px !important;
    transform: translate3d(58px, -38%, 0) !important; /* more right, less lift = lower */
  }

  /* give it a touch more room so it never kisses the next row */
  [data-element-id="elm_fDra_Ad_cYVGggAlouKt-A"].zpelem-col{
    padding-bottom: 132px !important;
  }
}

/* 6) Tablet: move DOWN + LEFT (half of desktop shift) */
@media (max-width: 991px) and (min-width: 768px){
  .zscustom-overlay-box{
    right: 18px !important;
    transform: translate3d(10px, -42%, 0) !important; /* left vs desktop + slightly lower */
  }

  [data-element-id="elm_fDra_Ad_cYVGggAlouKt-A"].zpelem-col{
    padding-bottom: 120px !important;
  }
}

/* 7) Mobile: move UP so half the badge sits over the image */
@media (max-width: 767px){

  /* Slightly reduce the column padding so the gap before "About us" tightens */
  [data-element-id="elm_fDra_Ad_cYVGggAlouKt-A"].zpelem-col{
    padding-bottom: 72px !important;   /* was 88px — tighter */
  }

  /* Badge positioning */
  [data-element-id="elm_FkgssVB3_b-L1YhZtAO3NA"].zpelem-box{
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;

    /* Move badge further UP over the image */
    transform: translate3d(-50%, -74%, 0) !important;

    width: auto !important;
    max-width: calc(100% - 28px) !important;

    height: 56px !important;
    padding: 9px 12px !important;
    border-radius: 16px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;    /* tighter icon/text spacing */
    white-space: nowrap !important;
  }

  /* tighten inner spacing */
  [data-element-id="elm_FkgssVB3_b-L1YhZtAO3NA"] .zpelem-icon,
  [data-element-id="elm_FkgssVB3_b-L1YhZtAO3NA"] .zpelem-heading,
  [data-element-id="elm_FkgssVB3_b-L1YhZtAO3NA"] .zpelem-text{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* slightly tighter text gap */
  [data-element-id="elm_FkgssVB3_b-L1YhZtAO3NA"] .zpelem-text{
    padding-left: 6px !important;
  }
}