:root {
  /* --- PRIMARY BRAND COLORS --- */
  --color-primary: #0D1B2A;         /* Midnight Petrol */
  --color-secondary: #415A77;       /* Gunmetal Blue */
  --color-accent: #9B2226;          /* Burnt Terracotta */

  /* --- TYPOGRAPHY & NEUTRALS (REVISED) --- */
  --color-headline: #0D1B2A;        /* Deep Petrol */
  --color-body: #333333;            /* Graphite Grey */
  --color-neutral-dark: #1B263B;    /* Slate Shadow */
  --color-neutral-light: #DBE2E9;   /* Steel Frost (Blue-tinted light grey) */
  --color-white: #FFFFFF;           /* Ice White (Blue-tinted white) */

  /* --- LOGO TINTS (For Transparent Header) --- */
  /* These are light "shades" of your specific Blue and Red */
  --color-logo-blue-light: #A2B2C1; /* A lightened version of Gunmetal */
  --color-logo-red-light: #E5B3B5;  /* A lightened version of Terracotta */

  /* --- GRADIENTS --- */
  /* Dark Logo */
  --gradient-dark-blue: linear-gradient(135deg, #415A77 0%, #0D1B2A 100%);
  --gradient-dark-red: linear-gradient(135deg, #C1272D 0%, #9B2226 100%);

  /* Light Logo (Using the new tints) */
  --gradient-light-blue: linear-gradient(135deg, #DBE2E9 0%, #A2B2C1 100%);
  --gradient-light-red: linear-gradient(135deg, #F4F7FA 0%, #E5B3B5 100%);

  /* --- STATUS --- */
  --color-success: #2D5A27;
  --color-error: #B91C1C;
  --color-warning: #D97706;
  --color-info: #3E5C76;

  /* Fluid Typography System */
  /* Viewport range: 390px (iPhone 12) to 1440px */

  --font-h1: clamp(2rem, 1.52rem + 2.29vw, 4rem);        /* 32px → 64px */
  --font-h2: clamp(1.75rem, 1.37rem + 1.83vw, 3rem);     /* 28px → 48px */
  --font-h3: clamp(1.5rem, 1.26rem + 1.14vw, 2.25rem);   /* 24px → 36px */
  --font-h4: clamp(1.25rem, 1.11rem + 0.69vw, 1.75rem);  /* 20px → 28px */
  --font-h5: clamp(1.125rem, 1.03rem + 0.46vw, 1.5rem);  /* 18px → 24px */
  --font-h6: clamp(1rem, 0.92rem + 0.38vw, 1.25rem);     /* 16px → 20px */
  --font-body: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);  /* 16px → 18px */
  --font-small: clamp(0.875rem, 0.84rem + 0.19vw, 1rem); /* 14px → 16px */

  --lh-tight: 1.2;   /* headings */
  --lh-normal: 1.5;  /* body */
  --lh-relaxed: 1.75; /* long-form content */
}

/* Header CSS */

.l-header.bg_transparent:not(.sticky) .l-subheader.at_middle {
  background: rgba(0, 0, 0, 0.14)!important;
  color: var(--color-header-transparent-text);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

ul.my-own-ul {
  margin-left: 1.5rem!important;
}

.grecaptcha-badge { 
    visibility: hidden !important;
}

/* Home CSS */

.inner-hero-section .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 3rem;
    }

@media (min-width: 1024px) {
    .inner-hero-section .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 2fr 1fr;
        align-items: center;
        gap: 3rem;
    }
}

.hero-title,
h1 .hero-title,
.hero-title h1 {
  color: var(--color-white);
  font-weight: 900;
}

.hero-sub-title,
h2 .hero-sub-title,
.hero-sub-title h2 {
  color: var(--color-white);
  font-weight: 700;
}

.hero-intro,
.hero-intro div {
  color: var(--color-white);
  font-size: var(--font-h4);
  font-weight: 700;
}

.cta-wrapper {
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .cta-wrapper {
    flex-direction: row;
    align-items: flex-start;
}
}

.intro-section {
  background: var(--color-primary);
  padding-block: 4rem;
}

.inner-intro-section .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 3rem;
    }

.intro-left-wrapper {

}

.intro-right-wrapper:empty {
  display: none;
}

@media (min-width: 1024px) {
    .inner-intro-section .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 3fr 1fr;
        align-items: center;
        gap: 3rem;
    }
}

.intro-sub-title,
h2 .intro-sub-title,
.intro-sub-title h2 {
  font-weight: 900;
  color: var(--color-white);
}

.intro-text {
  color: var(--color-white);
  font-weight: 300;
  font-size: var(--font-h5);
}

.benefit-section {
  background: var(--color-white);
  padding-block: 4rem;
}

.inner-benefit-section .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 3rem;
    }

@media (min-width: 1024px) {
    .inner-benefit-section .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: flex-start;
        gap: 3rem;
    }
}

.benefit-left-wrapper {

}

.benefit-right-wrapper {
  position: relative;
  color: var(--color-white);
  padding: 1.5rem;
  border-radius: 1.5rem;
}

@media (min-width: 1024px) {
    .benefit-right-wrapper {
      padding: 2.5rem;
      border-radius: 1.8rem;
    }
}

/* Dark overlay */
.benefit-right-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* adjust darkness here */
  z-index: 0;
  border-radius: 1.8rem;
}

/* Ensure content stays above overlay */
.benefit-right-wrapper > * {
  position: relative;
  z-index: 1;
}

.who-we-serve-title,
.who-we-serve-title h3,
h3 .who-we-serve-title {
  color: var(--color-white);
  font-weight: 900;
}

.key-benefit-title,
h3 .key-benefit-title,
.key-benefit-title h3 {
  color: var(--color-headline);
  font-weight: 900;
}

.cta-section {
  background: var(--color-accent);
  color: var(--color-white);
  padding-block: 4rem;
}

.inner-cta-section .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 3rem;
    }

@media (min-width: 1024px) {
    .inner-cta-section .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 2fr 1fr;
        align-items: flex-start;
        gap: 3rem;
    }
}

.cta-left-wrapper {
  flex-direction: column;
}

@media (min-width: 1024px) {
  .cta-left-wrapper {
    flex-direction: row;
    column-gap: 4rem;
  }
}

.cta-title,
.cta-title h4,
h4 cta-title {
  font-weight: 900;
  color: var(--color-white);
}

.cta-text {
  font-weight: 300;
  font-size: var(--font-h6);
}

.cta-question {
  font-size: var(--font-h6);
  font-weight: 900;
  color: var(--color-white);
}

.service-section {
  background: var(--color-logo-blue-light);
  padding-block: 3rem;
}

.service-grig-home .service-media {
    border-radius: 1.5rem;
}

@media (min-width: 1024px) {
    .service-grig-home .service-media {
      border-radius: 1.8rem;
    }
}

.service-title {
  font-size: var(--font-h5);
  font-weight: 700;
}

/* Service page css */

.services-section {
  background: var(--color-white);
  padding-block: 4rem;
}

/*.service-grid-page .service-item {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .service-grid-page .service-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
}*/

/* =========================================
   Services grid items (mobile-first)
   Uses your existing classes:
   .service-grid-page, .service-item, .service-media, .service-content
   ========================================= */

/* Row */
.service-grid-page .service-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}

/* Make image behave nicely */
.service-grid-page .service-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.5rem; /* optional */
  overflow: hidden; /* required */
}

/* Optional: improve readability/spacing */
.service-grid-page .service-content {
  display: grid;
  gap: 0.8rem;
}

.service-grid-page .service-title {
  margin: 0;
}

.service-grid-page .service-text p {
  margin: 0 0 1rem;
}

.service-grid-page .service-text p:last-child {
  margin-bottom: 0;
}

/* Desktop: 2 columns */
@media (min-width: 1024px) {
  .service-grid-page .service-media img {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden; /* required */
    border-radius: 1.8rem; 
  }
  .service-grid-page .service-item{
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  /* Alternate layout automatically:
     even items = Image | Text (default)
     odd items  = Text | Image
  */
  .service-grid-page .w-grid-item:nth-child(even) .service-item .service-media{
    order: 1;
  }
  .service-grid-page .w-grid-item:nth-child(even) .service-item .service-content{
    order: 2;
  }

  .service-grid-page .w-grid-item:nth-child(odd) .service-item .service-media{
    order: 2;
  }
  .service-grid-page .w-grid-item:nth-child(odd) .service-item .service-content{
    order: 1;
  }
}

.service-grid-page .service-media {
  position: relative;
  overflow: hidden; /* required */
  border-radius: 1.8rem;
}

@media (min-width: 1024px){
  .service-grid-page .service-media{
    border-radius: 1.5rem;
  }
}

/* Image itself */
.service-grid-page .service-media img {
  width: 100%;
  height: auto;
  display: block;
  transition:
    transform 0.6s ease,
    filter 0.6s ease;
}

@media (hover: hover) and (pointer: fine) {
  .service-grid-page .service-item:hover .service-media img {
    transform: scale(1.06);
    filter: brightness(0.9);
  }
}

.how-we-work-section {
  background: var(--color-primary);
  padding-block: 4rem;
}

.how-we-work-subtitle,
h2 .how-we-work-subtitle,
.how-we-work-subtitle h2 {
  font-size: var(--font-h4);
  font-weight: 900;
  color: var(--color-white);
}

.wow-we-work-item {
  padding: 2rem;
  background: var(--color-logo-blue-light);
  border-radius: 1.5rem;
}

@media (min-width: 1024px) {
  .wow-we-work-item {
    background: var(--color-logo-blue-light);
    border-radius: 1.8rem;
}
}

.how-we-work-abovetitle {
  font-weight: 700;
  font-size: var(--font-h6);
  color: var(--color-primary);
  margin-bottom: 0.2rem!important;
}

.wow-we-work-title {
  color: var(--color-white);
  font-size: var(--font-h5);
  font-weight: 900;
}

.wow-we-work-text {
  color: var(--color-white);
  font-size: var(--font-h6);
  font-weight: 300;
}

/* About us css */
.about-us-left-wrapper {

}

.about-us-left-wrapper  {
  flex-direction: column;
}

@media (min-width: 1024px) {
  .about-us-left-wrapper  {
    flex-direction: row;
    column-gap: 4rem;
  }
}

.about-us-left-wrapper ul.my-own-ul {
    margin-left: 1.5rem !important;
    font-size: var(--font-h4);
    font-weight: 700;
}

.about-us-right-wrapper {
  position: relative;
  color: var(--color-white);
  padding: 1.5rem;
  border-radius: 1.5rem;
}

@media (min-width: 1024px) {
    .about-us-right-wrapper {
      padding: 2.5rem;
      border-radius: 1.8rem;
    }
}

.about-us-right-wrapper{
  position: relative;
  color: #fff;
  overflow: hidden;               /* 🔑 clips overlay */
  border-radius: 1.8rem;
}

@media (min-width: 1024px){
  .about-us-right-wrapper{
    border-radius: 1.5rem;
  }
}

/* Overlay */
.about-us-right-wrapper::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* adjust if needed */
  z-index: 0;
  pointer-events: none;
}

/* Content above overlay */
.about-us-right-wrapper > *{
  position: relative;
  z-index: 1;
}

.our-mission-title,
h3 .our-mission-title,
.our-mission-title h3 {
  color: var(--color-white);
  font-weight: 900;
}

.our-mission-text {
  font-size: var(--font-h4);
  font-weight: 300;
  color: var(--color-white);
}

.contact-form-section {
  background: var(--color-white);
  padding-block: 3rem;
}

/* Contact us css*/
.inner-contact-form-section {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .inner-contact-form-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

/* Footer CSS */

.footer-section {
  background: var(--color-logo-blue-light);
  padding-block: 3rem;
}

.inner-footer-section .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 3rem;
    }

@media (min-width: 1024px) {
    .inner-footer-section .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: flex-start;
        gap: 3rem;
    }
}

/* Privacy Policy CSS */

.privacy-policy-hero {
  padding-top: 4rem;
  padding-bottom: 1rem;
}

.privacy-policy-section {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

.inner-privacy-policy-section .vc_column-inner > .wpb_wrapper {
      display: grid;
      grid-template-columns: 1fr;
      align-items: flex-start;
      gap: 2rem;
}

@media (min-width: 1024px) {
  .inner-privacy-policy-section .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: flex-start;
        gap: 3rem;
  }
}

.privacy-policy-title h1,
h1 .privacy-policy-title {
  font-weight: 900;
  font-size: var(--font-h3);
}

.privacy-policy-content p {
  margin-bottom: 0.5rem;
  margin-top: 1.2rem;
}

span.policy-headline {
  font-weight: 700;
  display: block;
  font-size: var(--font-h5);
}

[type="submit"].gform_button {
    font-family: var(--font-family);
    font-style: normal;
    text-transform: none;
    font-size: 1rem;
    line-height: 1.1 !important;
    font-weight: 700;
    letter-spacing: 0em;
    padding: 0.8em 1.4em;
    transition-duration: 0.3s;
    border-radius: 3em;
    transition-timing-function: ease;
    --btn-height: calc(1.1em + 2 * 0.8em);
    --btn-border-width: 0px;
    --btn-background: var(--color-secondary);
    --btn-hover-background: var(--color-accent);
    --btn-border-color: transparent;
    background: var(--btn-background, transparent);
    border-color: var(--btn-border-color, transparent);
    border-image: none;
    color: var(--color-white) !important;
}

.no-touch [type="submit"].gform_button:hover {
    background: var(--btn-hover-background, transparent);
    border-color: var(--btn-hover-border-color, transparent);
    border-image: none;
    color: var(--color-white) !important;
}