/*
  The Softball Studio — COMPLETE Custom CSS (replace all)
  Goals:
    • Hero full-bleed (centered correctly)
    • Home page text truly LEFT aligned (headings, paragraphs, links)
  Brand:
    Navy  #1A237E
    Pink  #E91E63
    Text  #333333
*/

/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400&family=Quicksand:wght@400;600;700&display=swap');

/* ===== Global layout & typography ===== */
#sb-main-container,
#content,
#sb_content,
#main-content {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 1.65;
  font-size: 1.05rem;
  color: #333;
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

h1, h2, h3 { color:#1A237E; letter-spacing:.2px; }
h1 { font-size:2rem; margin:0 0 12px; }
h2 { font-size:1.6rem; margin:28px 0 12px; }
h3 { font-size:1.35rem; margin:22px 0 10px; }

a { color:#1A237E; text-decoration:none; }
a:hover { text-decoration:underline; }

hr {
  border:0;
  height:1px;
  background:linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,.03));
  margin:22px 0;
}

ul { padding-left:1.25rem; margin:8px 0 16px; }
ul li { margin:6px 0; }
ul li strong { color:#1A237E; }

/* ===== Logo text in hero ===== */
#main-buttons .company-name{
  font-family:"Bebas Neue",sans-serif !important;
  font-size:60px !important;
  font-weight:400 !important;
  letter-spacing:2px;
  color:#E91E63 !important; /* Charity Pink */
  text-shadow:1px 1px 3px rgba(0,0,0,.4);
}

/* ===== CTA button ===== */
.book-now-inline{
  display:inline-block !important;
  padding:12px 22px !important;
  border-radius:28px !important;
  background:#E91E63 !important;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:700 !important;
  box-shadow:0 6px 16px rgba(233,30,99,.28) !important;
  transition:transform .05s ease, filter .2s ease;
  margin:0 !important;
}
.book-now-inline:hover{ filter:brightness(1.05) !important; transform:translateY(-1px); }
@media (max-width:480px){ .book-now-inline{ width:100% !important; text-align:center !important; } }

/* ===== HERO full-bleed (stable centering) ===== */
#main-buttons{
  position:relative !important;
  width:100vw !important;
  max-width:100vw !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
#main-buttons :is(.section-pd,.container,.sb-container,.swiper,.swiper-wrapper,.swiper-slide){
  max-width:none !important; width:100% !important; margin:0 !important; padding:0 !important;
}
#main-buttons :is(img,picture,video){
  display:block !important; width:100% !important; height:auto !important; max-width:none !important;
}

/* ============================================================
   HOME PAGE LEFT ALIGN — target the actual SB containers
   SB renders the home into #index_page; many skins place your
   HTML specifically inside #about-us .txt. We neutralize both.
   ============================================================ */

/* 1) Force the home page container and its descendants LEFT */
#index_page, #index_page * {
  text-align: left !important;
  text-align-last: left !important;
}

/* 2) Override inline style="text-align:center" the theme injects */
#index_page [style*="text-align:center"] {
  text-align: left !important;
}

/* 3) Kill centering helper classes inside home */
#index_page .text-center,
#index_page .center {
  text-align: left !important;
}

/* 4) Prevent flex/grid wrappers from re-centering children */
#index_page, #index_page * {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* 5) Links/buttons should not become centered blocks */
#index_page :is(a,.btn,.button,.sb-btn) {
  display: inline-block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 6) Keep bullets nicely indented */
#index_page ul { padding-left: 1.25rem !important; }

/* 7) In some skins, the content lives under #about-us .txt — cover it too */
#about-us .txt, #about-us .txt * {
  text-align: left !important;
  text-align-last: left !important;
}
#about-us .txt [style*="text-align:center"] { text-align:left !important; }
#about-us .txt .text-center, #about-us .txt .center { text-align:left !important; }
#about-us .txt :is(a,.btn,.button,.sb-btn){ display:inline-block !important; margin-left:0 !important; margin-right:0 !important; }
#about-us .txt ul { padding-left: 1.25rem !important; }

/* ===== Mobile type scale ===== */
@media (max-width:480px){
  #main-buttons .company-name{ font-size:44px !important; }
  #index_page h1{ font-size:1.75rem; }
  #index_page h2{ font-size:1.35rem; }


