/* ================================================
       VARIABLES & BASE
    ================================================ */
    :root {
      --navy:      rgb(26, 55, 97);
      --navy-dark: rgb(18, 38, 68);
      --gold:      rgb(255, 180, 0);
      --text:      rgb(96, 96, 96);
      --light-bg:  #f7f9fc;
      --white:     #ffffff;
      --border:    #dee2e6;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Aleo', serif !important;
      font-weight: 400;
      font-size: 17px;
      line-height: 26px;
      color: var(--text);
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: 'Poppins', sans-serif;
      color: var(--navy);
    }
    h1 { font-weight: 800; font-size: 54px; line-height: 59px; }
    h2 { font-weight: 700; }
    h3 { font-weight: 600; }
    p  { color: var(--text); 
        font-family: 'Aleo', serif;
         font-size: 17px;}
    a  { text-decoration: none; color: inherit; }
    img { max-width: 100%; }
    
.btn-close:focus{
  box-shadow: none !important; 
}
    /* ================================================
       HERO  — full-bleed with transparent nav inside
    ================================================ */
    .hero-section {
      position: relative;
      background: url('../images/banner.png') center 30% / cover no-repeat;
      display: flex;
      flex-direction: column;
      padding-bottom: 20%;
          background-color: rgba(255, 255, 255, 0.32);
    background-blend-mode: overlay;
    }

    /* ---- Transparent navbar inside hero ---- */
    .hero-navbar {
      position: relative;
      z-index: 10;
      padding: 18px 0 16px;
    }

    .hero-navbar .logo img {
         width: 160px;
      object-fit: contain;
      /* keep logo vibrant over the light-ish top gradient */
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12));
    }

    /* Nav links */
    .hero-nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
      list-style: none;
      margin: 0; padding: 0;
      flex-wrap: nowrap;
    }
    .hero-nav-links li a {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 12.5px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--navy);
      padding: 6px 10px;
      border-radius: 4px;
      white-space: nowrap;
      transition: color .2s, background .2s;
      display: inline-flex; align-items: center; gap: 4px;
    }
    .hero-nav-links li a:hover,
    .hero-nav-links li a.active {
      color: #1a8fcb;
    }
    .hero-nav-links li a .nav-arrow {
      font-size: 9px;
      opacity: 0.7;
    }

    /* Pill Call-Now button */
    .btn-call-now {
      background-color: var(--navy);
      color: var(--white) !important;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 15px;
      line-height: 1.3;
      padding: 12px 22px;
      border-radius: 50px;          /* full pill shape */
      border: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      white-space: nowrap;
      box-shadow: 0 4px 18px rgba(26,55,97,0.35);
      transition: background .25s, transform .15s;
      flex-shrink: 0;
      text-decoration: none;
    }
    .btn-call-now:hover {
      background-color: #0f2040;
      transform: translateY(-1px);
    }

    /* Mobile burger toggle */
    .hero-burger {
      display: none;
      background: none; border: none;
      color: var(--navy); font-size: 24px;
      cursor: pointer; padding: 4px;
    }

    /* Mobile dropdown nav */
    .hero-nav-mobile {
      display: none;
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: rgba(255,255,255,0.97);
      border-top: 2px solid var(--navy);
      z-index: 200;
      padding: 16px 20px 20px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    .hero-nav-mobile.open { display: block; }
    .hero-nav-mobile a {
      display: block;
      font-family: 'Poppins', sans-serif;
      font-weight: 600; font-size: 14px;
      color: var(--navy);
      padding: 9px 0;
      border-bottom: 1px solid #eee;
      text-transform: uppercase; letter-spacing: .5px;
    }
    .hero-nav-mobile a:last-child { border-bottom: none; }
    .hero-nav-mobile a:hover { color: #1a8fcb; }

    /* ---- Hero text block (below navbar) ---- */
    .hero-body {
      position: relative;
      z-index: 1;
      flex: 1;
      display: flex;
      align-items: center;
          padding-top: 12%;
    }

    .hero-content {
      text-align: center;
      padding: 50px 20px 70px;
      width: 100%;
    }
    .hero-content h1 {
      color: var(--navy);
      font-size: clamp(26px, 5vw, 45px);
      line-height: 1.15;
      margin-bottom: 18px;
      font-weight: 800;
    }
    .hero-content h4 {
        font-family: 'Poppins', sans-serif;
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      margin-bottom: 16px;
      color: var(--navy);
    }
    .hero-content p {
      color: rgba(255,255,255,.82);
      font-size: 16px;
      margin-bottom: 30px;
    }

    .btn-request {
background-color: var(--navy);
      color: var(--white) !important;
      font-family: 'Poppins', sans-serif;
      font-weight: 800;
      font-size: 15px;
      padding: 13px 36px;
          border-radius: 35px;
      border: 2px solid var(--navy);
      display: inline-block;
      transition: background .25s, color .25s;
          font-size: 20px;
          text-transform: uppercase;
          text-decoration: none;
    }
    .btn-request:hover {
      background-color: transparent;
      color: var(--navy) !important;
    }

    /* ================================================
       SECTION DIVIDER
    ================================================ */
    .section-divider {
      width: 75px; height: 4px;
      background: var(--navy);
      margin: 0 auto 40px;
      border-radius: 2px;
    }

    /* ================================================
       ABOUT
    ================================================ */
    .about-section { padding: 70px 0; background: var(--white); }
    .about-section h4 {
      font-weight: 700; font-size: 20px;
      color: var(--navy); line-height: 30px;
      margin-bottom: 18px;
      font-family: 'Aleo', serif;
    }
    .about-section p { font-size: 17px; line-height: 26px; margin-bottom: 12px; font-family: 'Aleo', serif;}

    /* ================================================
       AWARDS
    ================================================ */
    .awards-section { text-align: center; }
    .main-heading { 
        margin-bottom: 8px;
    font-size: 52px !important;
    font-weight: 800;
        color: var(--navy);
     }
    .award-badge { display: flex; align-items: center; justify-content: center; padding: 20px; }
    .award-badge img {     max-height: 350px; object-fit: contain; transition: transform .25s; }
    .award-badge img:hover { transform: scale(1.05); }

    .cqc-box {
      background: var(--white); border: 2px solid var(--border);
      border-radius: 8px; padding: 18px 24px;
      display: inline-flex; flex-direction: column;
      align-items: center; gap: 6px;
    }
    .cqc-box .cqc-label { font-family: 'Poppins',sans-serif; font-size: 12px; color: #555; }
    .cqc-box .cqc-good {
      background: #00a550; color: #fff;
      font-family: 'Poppins',sans-serif; font-weight: 700;
      font-size: 22px; padding: 4px 24px;
      border-radius: 4px; letter-spacing: 1px;
    }
    .cqc-box img { height: 50px; }

    /* ================================================
       PARTNERS
    ================================================ */
    .partners-section { padding: 55px 0; background: var(--white); }
    .partners-section h2 { font-size: 34px; text-align: center; margin-bottom: 8px; }
    .partner-logo { display: flex; align-items: center; justify-content: center; padding: 16px 0px; }
    .partner-logo img {
      object-fit: contain;
/*      filter: grayscale(30%);*/
    }
/*    .partner-logo img:hover { filter: grayscale(0%); opacity: 1; }*/

    /* ================================================
       CALLBACK SPLIT
    ================================================ */
    .contact-split-section { padding: 70px 0; background: var(--light-bg); }
    .contact-split-section h3 { font-size: 32px; font-weight: 800; line-height: 42px; margin-bottom: 16px; }
    .contact-split-section p  { margin-bottom: 0; }

    .callback-card {
      background: var(--navy); border-radius: 8px;
      padding: 36px 32px; color: var(--white);
    }
    .callback-card h4 { color: var(--white); font-size: 26px; font-weight: 700; margin-bottom: 20px; 
    text-align:center; }
    .callback-card .form-control {
          background: transparent;
    border-bottom: 1px solid rgb(255 255 255) !important;
    color: var(--white);
    font-size: 14px;
    padding: 10px 0px;
    border-radius: 0px;
    margin-bottom: 12px;
    border: none;
    font-family: 'Aleo', serif;
    }
    .callback-card .form-control::placeholder { color: rgba(255,255,255,.6); }
    .callback-card .form-control:focus {
      background: transparent;
      border-color: none; color: var(--white); box-shadow: none;
    }
    .callback-card .form-check-label { color: rgba(255,255,255); font-size: 15px; }
    .callback-card .form-check-input { accent-color: var(--gold); }
    .callback-card .note-text {
        font-size: 14px;
    color: rgba(255, 255, 255);
    margin-bottom: 14px;
    line-height: 20px;
    text-align: center;
    font-weight: 300;
    }
    .btn-send {
      background: #08c; color: var(--white);
      font-family: 'Poppins',sans-serif; font-weight: 800;
      font-size: 18px; padding: 11px 36px;
      border: none; border-radius: 35px;
      transition: background .25s, transform .15s;
          margin: 0 auto;
    display: block;
        border: 2px solid transparent;
    }
    .btn-send:hover { background: transparent; transform: translateY(-1px);     border: 2px solid #08c;}

    /* ================================================
       DEDICATION BANNER
    ================================================ */
    .dedication-section {
         background: url('../images/bg-4.png');
             background-position: left bottom;
    background-size: cover;
      padding: 60px 20px; text-align: center;
      position: relative; overflow: hidden;
          padding: 10% 0;
    }
 /*   .dedication-section::before,
    .dedication-section::after {
      content: ''; position: absolute;
      width: 320px; height: 320px;
      border-radius: 50%; background: rgba(255,255,255,.04);
    }
    .dedication-section::before { top: -80px; left: -80px; }
    .dedication-section::after  { bottom: -80px; right: -80px; }*/
    .dedication-section h2 {
          font-weight: 300;
    font-family: 'Aleo', serif;
      color: var(--white);
      font-size: clamp(24px,4vw,40px);
      position: relative; z-index: 1;
    }

    /* ================================================
       TESTIMONIAL SLIDER  — exact screenshot layout
       Left: decorative navy circle + portrait photo (rounded rect) + large navy half-circle + prev/next buttons
       Right: quote mark icon + text + author
    ================================================ */
    .testimonials-section {
      padding: 80px 0 100px;
      background: var(--white);
      overflow: hidden;
    }
    .testimonials-section .section-title {
      text-align: center;
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 800;
      margin-bottom: 10px;
    }

    /* Slider wrapper */
    .tslider {
      position: relative;
      min-height: 520px;
    }

    /* A single slide */
    .tslide {
      display: none;
      align-items: start;
      gap: 0;
    }
    .tslide.active { display: flex; }

    /* ---- LEFT visual column ---- */
    .tslide-visual {
      position: relative;
      flex: 0 0 450px;
      width: 380px;
      height: 480px;
    }

    /* Small navy circle top-left decoration */
    .tslide-visual .deco-circle-sm {
      position: absolute;
      top: -25px;
    left: -5px;
      width: 130px; height: 130px;
      border-radius: 50%;
      background: var(--navy);
      z-index: 1;
    }

    /* Portrait photo */
    .tslide-visual .portrait {
      position: absolute;
      top: 30px; left: 50px;
      width: 400px; height: 400px;
      border-radius: 16px;
      object-fit: cover;
      object-position: top center;
      z-index: 2;
      box-shadow: 0 12px 40px rgba(26,55,97,.18);
    }

    /* Large navy semicircle bottom-right */
    .tslide-visual .deco-circle-lg {
          position: absolute;
    bottom: -100px;
    right: -135px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: var(--navy);
    z-index: 1;
    }

    /* Prev / Next buttons sit on top of big circle */
    .tslide-visual .slider-controls {
      position: absolute;
          bottom: -6%;
    right: -20%;transform: translateX(-50%);
      z-index: 4;
      display: flex; gap: 12px;
    }
    .slider-btn {
      width: 50px; height: 50px;
      border-radius: 50%;
      background: var(--white);
      border: none;
      color: var(--navy);
      font-size: 16px;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 3px 10px rgba(0,0,0,.15);
      cursor: pointer;
      transition: background .2s, color .2s;
    }
/*    .slider-btn:hover { background: var(--navy); color: var(--white); }*/

    /* ---- RIGHT quote column ---- */
    .tslide-quote {
      flex: 1;
      padding-left: 70px;
    }
    .tslide-quote .quote-icon {
      margin-bottom: 24px;
    }
    .tslide-quote .quote-icon i {
      font-size: 48px;
      color: #c8d4e4;
      line-height: 1;
    }
    .tslide-quote blockquote {
      font-family: 'Aleo', serif;
      font-size: 17px;
      line-height: 28px;
      color: var(--text);
      border: none;
      padding: 0;
      margin: 0 0 28px;
    }
    .tslide-quote .author {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: var(--navy);
      text-align: right;
    }

    /* Slide fade transition */
    .tslide {
      animation: slideIn .4s ease;
    }
    @keyframes slideIn {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    /* ================================================
       CONTACT STRIP
    ================================================ */
    .contact-strip {
      padding: 36px 0;
    }
    .contact-strip .contact-item {
      display: flex; align-items: center;
      gap: 14px; justify-content: center;
    }
   .contact-strip .contact-icon {
      width: 50px; 
    }
    .contact-strip .contact-label {
         font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #1a3761;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: left;
    }
    .contact-strip .contact-value {
     color: #1a3761;
    font-family: 'Aleo', serif;
    font-weight: 300;
    font-size: 22px;
    text-decoration: none;
    }

    /* ================================================
       GET IN TOUCH — overlaps footer by negative margin
    ================================================ */
    /* Wrapper creates the overlap context */
    .get-in-touch-wrapper {
      position: relative;
      z-index: 10;
      /* pulls the card down INTO the footer area */
      margin-bottom: -60px;
    }

    .get-in-touch-card {
      background: var(--white);
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(26,55,97,.14);
      padding: 56px 60px;
    }

    .get-in-touch-card h2 {
      font-size: 32px; margin-bottom: 4px;
    }
    .get-in-touch-card p.sub {
      font-size: 20px;     color: #606060; margin-bottom: 28px;
    }
    .get-in-touch-card .form-control,
    .get-in-touch-card .form-select {
      border-bottom: 1px solid #1a3761 !important;
      border:none;
      font-size: 15px; padding: 11px 0px;
      border-radius: 0; margin-bottom: 14px;
      color: var(--text);
    }
    .get-in-touch-card .form-control:focus,
    .get-in-touch-card .form-select:focus {
      border: none;
      box-shadow: none;
    }
    .get-in-touch-card textarea.form-control {
      min-height: 120px; resize: vertical;
    }

    .btn-submit {
      background: var(--navy); color: var(--white);
      font-family: 'Poppins',sans-serif; font-weight: 800;
      font-size: 18px;     padding: 10px 25px;
      border: 2px solid var(--navy); border-radius: 34px;
      transition: background .25s, color .25s;
    }
    .btn-submit:hover { background: transparent; color: var(--navy); }

    .map-frame {
      width: 100%; height: 100%;
      min-height: 380px;
      border-radius: 8px; border: none;
    }

    /* ================================================
       FOOTER  — has top padding to reveal the card
    ================================================ */
    .site-footer {
      background: #0C3979;
      color: rgba(255,255,255,.75);
      /* extra padding-top so footer content clears the overlapping card */
      padding: 100px 0 0;
    }

    .site-footer .footer-logo img {
      width: 150px;
    }
    .site-footer h5 {
      color: var(--white);
      font-family: 'Poppins',sans-serif; font-weight: 700;
      font-size: 16px; margin-bottom: 16px;
      text-transform: uppercase; letter-spacing: .5px;
    }
    .site-footer ul { list-style: none; padding: 0; margin: 0; }
    .site-footer ul li { margin-bottom: 8px; }
    .site-footer ul li a {
      color: rgba(255,255,255,.7); font-size: 14px;
      transition: color .2s;
    }
    .site-footer ul li a:hover { color: var(--gold); }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.1);
      margin-top: 40px; padding: 18px 0;
      font-size: 17px; color: rgba(255,255,255);
    }
    .footer-bottom a { color: rgba(255,255,255,.6); }
    .footer-bottom a:hover { color: var(--gold); }

    .social-icons a {
      width: 36px; height: 36px; border-radius: 0;
      background: rgba(255,255,255,.1); color: var(--white);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 16px; margin-right: 8px;
      transition: background .2s;
          border: 1px solid #fff;
          text-decoration: none;
          margin-top: 20px;
    }
/*    .social-icons a:hover { background: var(--gold); color: var(--navy); }*/

    /* ================================================
       FADE-UP SCROLL ANIMATION
    ================================================ */
    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .55s ease, transform .55s ease;
    }
    .fade-up.visible { opacity: 1; transform: translateY(0); }

    /* ================================================
       RESPONSIVE
    ================================================ */
    /* ---- Nav responsive: hide links + show burger below 1100px ---- */
    @media (max-width: 1100px) {
      .hero-nav-links { gap: 2px; }
      .hero-nav-links li a { font-size: 11.5px; padding: 5px 7px; }
    }

    @media (max-width: 900px) {
      .hero-nav-links { display: none; }
      .hero-burger { display: block; }
      .hero-navbar .container { flex-wrap: nowrap; }
    }

    @media (max-width: 991px) {
      h1 { font-size: clamp(26px,6vw,42px); line-height: 1.2; }

      /* testimonial slider: stack on tablet */
      .tslide { flex-direction: column; align-items: center; }
      .tslide-visual { flex: none; width: 280px; height: 360px; }
      .tslide-visual .portrait { width:100%; height: 320px; top: 20px; left: 0px; }
      .tslide-visual .deco-circle-sm { width: 90px; height: 90px;     left: -50px;}
      .tslide-visual .deco-circle-lg { width: 190px; height: 190px;         right: -30%;
        bottom: -25%; }
      .tslide-quote { padding-left: 0; padding-top: 80px; text-align: center; }
      .tslide-quote .author { text-align: center; }
.tslide-visual .slider-controls{
      bottom: -13%;
    right: -37%;
}
      .get-in-touch-card { padding: 40px 32px; }
      .get-in-touch-wrapper { margin-bottom: -100px; }
      .site-footer { padding-top: 140px; }
      .contact-strip .contact-value {
font-size: 20px;
      }

    }

    @media (max-width: 767px) {
      .hero-section { min-height: 520px; }
      .hero-content { padding: 40px 16px 60px; }
      .about-section,
      .contact-split-section { padding: 50px 0; }
      .awards-section { padding: 50px 0; }
      .testimonials-section { padding: 60px 0 80px; }
      .contact-strip .contact-item { margin-bottom: 20px; }
      .callback-card { padding: 28px 20px; }
      .get-in-touch-card { padding: 32px 20px; }
      .get-in-touch-wrapper { margin-bottom: -80px; }
      .site-footer { padding-top: 120px; }
      .map-frame { min-height: 240px; }

      .tslide-visual { width: 240px; height: 320px; }
      .tslide-visual .portrait { width: 100%; height: 220px; top: 16px; left: 0px; }
      .tslide-visual .deco-circle-sm { width: 75px; height: 75px; }
      .tslide-visual .deco-circle-lg { width: 160px; height: 160px; bottom:0; }
      .tslide-quote { padding-top: 60px; }
          .tslide-visual .slider-controls {
        bottom: 9%;
        right: -44%;
    }
    }

    @media (max-width: 480px) {
      .btn-call-now { font-size: 11px; padding: 10px 16px; }
      .btn-request  { font-size: 13px; padding: 10px 24px; }
    }