/* ==========================================
   Services cards – polish pass (no HTML change)
   ========================================== */

/* Section spacing */
.featured-section{
  padding: 80px 0 70px !important;
  background: #fff !important;
}

/* Make all cards same height and cleaner layout */
.featured-section .row{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

/* Your template columns fight flex; this wins without breaking mobile */
.featured-section .services-block-three{
  flex: 1 1 300px;
  margin-bottom: 0 !important;
}

/* Card container */
.services-block-three .inner-box{
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-left: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(15,23,42,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Image polish */
.services-block-three .image-box{
  width: 100% !important;
  height: 190px !important;
  background: #f3f4f6;
}
.services-block-three .image-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .35s ease;
}

/* Title */
.services-block-three .inner-box h3{
  padding: 18px 18px 6px !important;
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.services-block-three .inner-box h3 a{
  color: #0f172a !important;
  text-decoration: none !important;
}
.services-block-three .inner-box h3:before,
.services-block-three .inner-box h3:after{
  display:none !important;
}

/* Body text */
.services-block-three .inner-box .text{
  padding: 0 18px 12px !important;
  margin: 0 !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  line-height: 1.6em !important;
}

/* If you have UL points, make them look premium */
.services-block-three .inner-box ul{
  padding: 0 18px 10px !important;
  margin: 0 !important;
}
.services-block-three .inner-box ul li{
  position: relative;
  padding-left: 22px;
  margin: 8px 0;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.45em;
}
.services-block-three .inner-box ul li:before{
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ff0015;
}

/* Meta row (your "From £38/h / badges" area if present) */
.services-block-three .inner-box .service-meta,
.services-block-three .inner-box .meta-row{
  padding: 12px 18px 0 !important;
}

/* Buttons: stick them to bottom, consistent spacing */
.services-block-three .inner-box .theme-btn{
  margin: 12px 18px 18px !important;
}
.services-block-three .inner-box{
  padding-bottom: 8px !important;
}
.services-block-three .inner-box .theme-btn.btn-style-one{
  width: calc(100% - 36px);
  text-align: center;
}

/* If you have two buttons, make them sit nicely */
.services-block-three .inner-box .service-actions{
  margin-top: auto;
  padding: 0 18px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.services-block-three .inner-box .service-actions a{
  margin: 0 !important;
  width: 100%;
}

/* Hover: subtle, modern */
.services-block-three .inner-box:hover{
  transform: translateY(-6px);
  border-color: rgba(255,0,21,.35);
  box-shadow: 0 18px 45px rgba(15,23,42,.14);
  background: #fff !important; /* stops template blue hover */
}
.services-block-three .inner-box:hover .image-box img{
  transform: scale(1.07);
}
/* stop template hover forcing white text */
.services-block-three .inner-box:hover h3 a,
.services-block-three .inner-box:hover .text{
  color: inherit !important;
}

/* Remove the dark “gutter” feel (common if parent has dark bg) */
.featured-section .services-block-three{
  background: transparent !important;
}

/* Mobile */
@media (max-width: 575px){
  .featured-section .row{ gap: 14px; }
  .services-block-three .image-box{ height: 165px !important; }
  .services-block-three .inner-box .service-actions{
    grid-template-columns: 1fr;
  }
}

/* Icon header for service cards (no dependencies) */
.service-media--icon{
  display:flex;
  align-items:center;
  justify-content:center;
  height:160px;
  background: linear-gradient(135deg, #ffffff, #f9fafb);
  border-bottom: 1px solid #e5e7eb;
}

.service-media--icon svg{
  width:68px;
  height:68px;
  display:block;
}

.service-media--icon .accent{
  fill: var(--simpl-red);
}

.service-media--icon .ink{
  fill: #0f172a;
}

/* Icon header for service cards (premium, no deps) */
.service-media--icon{
  display:flex;
  align-items:center;
  justify-content:center;
  height:160px;
  background:
    radial-gradient(800px 220px at 50% 0%, rgba(255,0,21,.10), rgba(255,0,21,0) 60%),
    linear-gradient(135deg, #ffffff, #f9fafb);
  border-bottom: 1px solid #e5e7eb;
}

.service-media--icon svg{
  width:74px;
  height:74px;
  display:block;
}

.service-media--icon .stroke{
  fill:none;
  stroke:#0f172a;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.service-media--icon .accent-stroke{
  fill:none;
  stroke: var(--simpl-red);
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.service-media--icon:hover{
  background:
    radial-gradient(800px 220px at 50% 0%, rgba(255,0,21,.14), rgba(255,0,21,0) 60%),
    linear-gradient(135deg, #ffffff, #f8fafc);
}

/* Icon header for service cards (no dependencies) */
.service-media--icon{
  display:flex;
  align-items:center;
  justify-content:center;
  height:160px;
  background: linear-gradient(135deg, #ffffff, #f9fafb);
  border-bottom: 1px solid #e5e7eb;
  text-decoration: none !important;
}

.service-media--icon svg{
  width:76px;
  height:76px;
  display:block;
}

/* Make strokes render crisp + consistent */
.service-media--icon .stroke{
  fill: none;
  stroke: #0f172a;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-media--icon .accent-stroke{
  fill: none;
  stroke: var(--simpl-red);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Nice hover */
.service-card:hover .service-media--icon{
  background: linear-gradient(135deg, #fff, rgba(255,0,21,.06));
}

/* Keyboard focus (accessibility) */
.service-media--icon:focus{
  outline: 3px solid rgba(255,0,21,.35);
  outline-offset: -3px;
}

.service-media{
  display:block;
  position:relative;
  aspect-ratio:16/9;
  background:#f3f4f6;
  overflow:hidden;
}

.service-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width: 767px){
  .featured-section .row{
    display:block; /* cancels any weird flex behaviour from template */
  }
  .services-block-three{
    width:100% !important;
    float:none !important;
  }
}

.service-media {
  position: relative;
  overflow: hidden;
}

.service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.18) 100%
  );
  pointer-events: none;
}

.services-block-three .inner-box {
  transition: transform .25s ease, box-shadow .25s ease;
}

.services-block-three .inner-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

/* ===== Trust badges (desktop like before, mobile fills width + BIG logos) ===== */

/* Desktop / default */
.trust-badges .trust-badges-inner{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  width: 100%;
  margin: 18px auto;
  padding: 0 15px;
}

.trust-badges .trust-badge-card{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  border: 3px solid #ff0015;
  border-radius: 18px;
  background: #fff;
  box-sizing: border-box;
}

.trust-badges .trust-badge-card img{
  width: auto;
  height: 64px;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

/* Mobile: 3 badges in one row, full width, BIG logos */
@media (max-width: 600px){
  .trust-badges{
    padding: 0 12px;
  }

  .trust-badges .trust-badges-inner{
    width: 100%;
    max-width: none;
    margin: 18px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 0;
  }

  .trust-badges .trust-badge-card{
    padding: 0;
    height: 100px;             /* slightly taller */
    border-width: 3px;
    border-radius: 18px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .trust-badges .trust-badge-card img{
    width: 86%;                /* make logo large inside card */
    height: 86%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    padding: 0;                /* remove extra shrinking */
    box-sizing: border-box;
  }
}
/* ==========================================
   Mobile trust badges – subtle entrance
   ========================================== */

@media (max-width: 600px){
  .trust-badges{
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    animation: trustFadeUp 420ms ease-out forwards;
    animation-delay: 120ms;
  }
}

@keyframes trustFadeUp{
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .trust-badges{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
.trust-badges { width: 100%; }

.trust-badges .trust-badges-inner{
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px;
  padding-right: 15px;
  justify-items: center;
}

.trust-badges .trust-badge-card{
  float: none !important;
  margin: 0 !important;
}
/* Force badges row to use the SAME "container" width as the rest of the site */
.trust-badges{
  width: 100%;
}

.trust-badges .trust-badges-inner{
  /* match your theme container behaviour */
  max-width: 1170px;        /* common for this template */
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
}

/* keep cards centered */
.trust-badges .trust-badge-card{
  display: flex;
  align-items: center;
  justify-content: center;
}
body .trust-badges .trust-badges-inner{
  max-width: 1200px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   FIX: center alignment for Featured section + Bootstrap row
   Reason: Bootstrap .row has negative side-margins (-15px).
   If you turn it into flex + gap, it visually shifts left.
   ========================================================= */

/* Keep the container centered */
.auto-container{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Neutralise Bootstrap row negative margins inside Featured section */
.featured-section .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center;
}

/* Make the title block span full width in the flex row */
.featured-section .sec-title.centered{
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center;
}

/* If you’re using gap on the row, remove column padding to prevent offset */
.featured-section .services-block-three{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Optional: ensure badges block aligns to same page padding as containers */
.trust-badges{
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
/* ==============================

   MOBILE: Welcome section polish

   ============================== */

@media (max-width: 767px){

  /* Give the section breathing room + stop the chat button covering text */

  .welcome-section,

  .about-section,

  .sec-title,

  .sec-title-two,

  section{

    scroll-margin-top: 90px;

  }

  .welcome-section,

  .about-section{

    padding: 28px 0 22px !important;

  }

  /* Container: make it look intentional on small screens */

  .auto-container{

    padding-left: 18px !important;

    padding-right: 18px !important;

  }

  /* Headline: stronger, tighter, less “washed out” */

  .sec-title h2,

  .sec-title-two h2,

  .welcome-section h2,

  .about-section h2{

    font-size: 30px !important;

    line-height: 1.12 !important;

    margin-bottom: 12px !important;

    letter-spacing: -0.2px;

    color: #111827 !important;

    text-align: center !important;

  }

  /* If your SimpL red L is a span like <span class="theme_color">L</span> */

  .theme_color{

    color: #e11d2e !important;

  }

  /* Body copy: smaller, darker, less vertical space */

  .welcome-section .text,

  .about-section .text,

  .welcome-section p,

  .about-section p{

    font-size: 16px !important;

    line-height: 1.55 !important;

    color: #374151 !important;

    margin-bottom: 14px !important;

    text-align: center !important;

  }

  /* Turn your “list-like” lines into a clean mobile checklist look

     (works when those lines are separate <p> or <div> lines) */

  .welcome-section p,

  .about-section p{

    max-width: 36ch;

    margin-left: auto !important;

    margin-right: auto !important;

  }

  /* Underline bars: force proper centering + consistent width */

  .sec-title .separator,

  .sec-title-two .separator,

  .sec-title .separater,

  .sec-title-two .separater,

  .sec-title .title-separator,

  .sec-title-two .title-separator{

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 10px !important;

    margin: 10px auto 18px !important;

    width: 100% !important;

  }

  .sec-title .separator span,

  .sec-title-two .separator span,

  .sec-title .separater span,

  .sec-title-two .separater span{

    display: block !important;

    height: 4px !important;

    border-radius: 999px !important;

  }

  /* Left and right grey lines */

  .sec-title .separator span:first-child,

  .sec-title .separator span:last-child,

  .sec-title-two .separator span:first-child,

  .sec-title-two .separator span:last-child,

  .sec-title .separater span:first-child,

  .sec-title .separater span:last-child,

  .sec-title-two .separater span:first-child,

  .sec-title-two .separater span:last-child{

    width: 74px !important;

    background: #d1d5db !important;

  }

  /* Middle red bar */

  .sec-title .separator span:nth-child(2),

  .sec-title-two .separator span:nth-child(2),

  .sec-title .separater span:nth-child(2),

  .sec-title-two .separater span:nth-child(2){

    width: 58px !important;

    background: #e11d2e !important;

  }

  /* If your floating chat button overlaps content near bottom */

  .welcome-section,

  .about-section{

    padding-bottom: 90px !important;

  }

}
/* Book a Lesson – center + button style */
.book-lesson-btn {
  display: inline-block;
  margin: 18px auto;
  padding: 10px 18px;
  border: 2px solid #d00000; /* SimpL red */
  border-radius: 12px;
  color: #333;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

.book-lesson-wrapper {
  text-align: center;
}