/*Background Color */
.watermark {
 background-color: #EAEAEE;
}

.center-col {
max-width: 100%;
}
/* ──────────────────────────────────────────────────────────────
   1.  Make the logo / donate row a positioning context
   ────────────────────────────────────────────────────────────── */
#full_width-508297456 {        /* row with logo + Donate */
    position: relative;        /* reference box for abs-pos children */
    display: flex;             /* lets logo block and donate button align neatly */
    justify-content: center;   /* keep existing centred look */
    align-items: center;
    flex-wrap: wrap;           /* stay tidy on very wide screens */
}

/* ──────────────────────────────────────────────────────────────
   2.  Re-locate the menu-widget into that same row, on the left
   ────────────────────────────────────────────────────────────── */


/* lay the list items out horizontally */
#full_width-1831958202 .site-menu {
    display: flex;
    gap: 1.25rem;              /* even spacing between menu items     */
    margin: 0;
    padding: 0;
}

/* make sure submenu dropdowns still work */
#full_width-1831958202 .sub-menu {
    position: absolute;        /* retain ClubExpress default */
}

/* ──────────────────────────────────────────────────────────────
   3.  Earlier “mobile” break-point so the menu never overlays the logo
   ────────────────────────────────────────────────────────────── */
@media (max-width: 1875px) {   /* adjust to taste */
    /* hide the wide menu sooner */
    #full_width-1831958202 .site-menu { 
        display: none;         /* rely on ClubExpress hamburger toggle */
    }
    /* keep the hamburger visible */
    #full_width-1831958202 .menutoggle { 
        display: inline-flex; 
        cursor: pointer;
        align-items: center;
    }

    /* restore the black bar look on small screens */
    #full_width-1831958202 { 
        position: relative;    /* drop back into normal flow */
        top: 0; left: 0; 
        transform: none;
        width: 100%;
        padding: .5rem 0;
        justify-content: center;
    }
}

/* ──────────────────────────────────────────────────────────────
   4.  Cosmetic tweaks (optional)
   ────────────────────────────────────────────────────────────── */
#full_width-1831958202 .menutoggle span.material-icons {
    font-size: 32px;           /* larger hamburger if you like */
    color: #000;               /* matches logo row text colour */
}

@media (max-width: 600px) {
    /* stack logo and donate button when really narrow */
    #full_width-508297456 { flex-direction: column; gap: .75rem; }
}

  /* Pin ONLY the PayPal Donate button in that corner */
  .template-column.full .ce-button[href*="paypal"]{
    position: absolute;           /* inside the .template-column box */
    top: 0.5rem;                  /* distance from top edge of the div  */
    right: 5.0rem;                /* distance from right edge of the div */
    z-index: 10;                  /* keeps it above the logo, etc.       */
  }

.ce-button span {
    padding-left: 20px;
    padding-right: 20px;
    
}

#full_width-1831958202 ul.site-menu li {
    padding: 0px;
    line-height: 30px;
    background-color: #FFF;
    margin: 0px 0px 0px 2px;
    border-right: none;
    color: #000;
    background-image: none;
}

.build-row.YBME_Center_Element{
  width: 80%;        /* make the row 80 % as wide as its parent */
  margin: 0 auto;    /* left + right auto → centers it horizontally */
}

.YBME_Text_Box{
  padding: 55px;
}


.YBME_About{
   display:flex;             /* turn the column into a flexbox            */
  flex-direction:column;    /* keep paragraphs stacked top-to-bottom     */
  justify-content:center;   /* ⬆️  vertical centering inside the column  */
  padding:40px;     /* 1.5 rem top/bottom  2 rem left/right */
}

/* Optional: consistent spacing between paragraphs */
.YBME_About p{
  margin-bottom:1rem;
}

.build-column.full.YBME_About_Title{
  /* sizing / placement */
  width: 70%;          /* 70 % as wide as the row */
  max-width: 100%;     /* never exceed the viewport */
  margin: 0 auto;      /* centers the column itself */

  /* flex centering */
  display: flex;       
  justify-content: center;  /* horizontal centering  */
  align-items:   center;    /* vertical   centering  */
  flex-direction: column;   /* keep inner items stacked */

  /* optional aesthetics */
  text-align: center;   /* center inline text */
  padding: 1.5rem 0;    /* breathing room above/below */
}

.YBME_gray_overlay .hero{
  position: relative;          /* anchor for overlay + text layers */
}

/* 1️⃣  Semi-transparent grey layer */
.YBME_gray_overlay .hero::before{
  content: "";
  position: absolute;
  inset: 0;                    /* stretch to all four edges */
  background: rgba(0,0,0,.20); /* grey @ 45 % opacity – adjust alpha as needed */
  z-index: 1;                  /* sits *below* the text but above the image */
}

/* 2️⃣  Text container always on top */
.YBME_gray_overlay .hero-text{
  position: relative;          /* create its own stacking context */
  z-index: 2;                  /* higher than ::before overlay   */
}

/* (Optional) keep links/buttons clickable through the overlay */
.YBME_gray_overlay .hero::before{
  pointer-events:none;
}

/* ─── YBME hero button styling ─────────────────────────────────── */
#full_width-508297456 > div.template-column.full > div > p > a.ce-button{
  /* pill / oval shape */
  border-radius: 999px;
  padding: .75rem 2.5rem;      /* taller + wider for the oval look */

  /* colour to match screenshot (#2FA0D9 ≈ the sample blue) */
  background: #2FA0D9;
  color: #fff;
  border: 2px solid #fff;      /* keeps the white outline you had */

  /* typography & layout */
  font-size: 1.125rem;         /* ~18 px */
  font-weight: 600;
  display: inline-block;
  text-align: center;

  /* smooth hover transition */
  transition: opacity .25s ease-in-out;
}

/* ── hover / focus: slight transparency ─────────────────────────── */
.ce-button:hover,
.ce-button:focus{
  opacity: .85;                /* 15 % fade so text stays readable */
  border: 2px solid #fff;
}

.YBME_Carousel .overlay{
  background: none !important;          /* kills default shading          */
  display: flex;                        /* lets us centre content easily  */
  flex-direction: column;
  align-items: center;                  /* horizontal centring            */
  justify-content: center;              /* vertical centring (optional)   */
  text-align: center;                   /* heading + caption centred      */
  padding: 0 1rem;                      /* slight side breathing room     */
}

/* 2. Slide heading font, size, colour                              */
.YBME_Carousel .overlay h1{
  font-family: "Times New Roman", Times, serif;
  font-size: 48px;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: #FFFFFF;                       /* keep white text on blue bg     */
}

/* 3. Caption under the heading                                     */
.YBME_Carousel .overlay .item-contents{
  font-family: 'Roboto';
  font-size: 20px;                      /* adjust if needed               */
  color: #FFFFFF;
  text-align: center;
}

/*video */
.YBME_Video_center {
position: relative;        /* reference box for abs-pos children */
    display: flex;             /* lets logo block and donate button align neatly */
    justify-content: center;   /* keep existing centred look */
    align-items: center;
    flex-wrap: wrap; 

}