/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap');

/* ---- Design tokens ---- */
:root{
  --primary:#1655A5;                 /* Justice Blue (used only for overlay) */
  --secondary:#F4C21B;               /* Beacon Gold (overlay) */
  --primary-rgb:22,85,165;
  --secondary-rgb:244,194,27;
}
.primary-opacity-6:{
	background-color:rgba(22, 85, 165, 0.6)!important;
}
.secondary-opacity-6:{
	background-color:rgba(244, 194, 27, 0.6)!important;
}
.content-grid .content-grid-item .img-fluid{
  max-width:60%;
  margin:10px;
}
.img-fluid-high{
  max-width:37.5%!important;
}




/* ========== Type setup ========== */
:root{
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Poppins', 'Inter', system-ui, Arial, sans-serif;

  --fs-base-min: 15px;    /* mobile base */
  --fs-base-max: 17px;    /* desktop base */
  --lh-base: 1.7;
  --lh-head: 1.15;

  --text-color: #2A2F36;
  --head-color: #1D2330;
}

html{ font-size:100%; }

body{
  font-family: var(--font-body);
  font-size: clamp(var(--fs-base-min), 0.30vw + 14px, var(--fs-base-max));
  line-height: var(--lh-base);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6{
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--lh-head);
  color: var(--head-color);
  margin: 0 0 .5em;
}

h1{ font-size: clamp(32px, 3.2vw + 16px, 56px); }
h2{ font-size: clamp(26px, 2.2vw + 14px, 40px); }
h3{ font-size: clamp(22px, 1.4vw + 12px, 30px); }
h4{ font-size: clamp(18px, 1.0vw + 10px, 24px); }
h5{ font-size: clamp(16px, 0.6vw + 9px, 20px); }
h6{ font-size: clamp(14px, 0.4vw + 8px, 18px); }

/* Paragraph helpers */
.lead{ font-size: clamp(17px, 0.6vw + 14px, 20px); line-height: 1.6; }
.small, .text-small{ font-size: 0.875rem; }   /* ~14px */
.xsmall{ font-size: 0.8125rem; }              /* ~13px */

/* Hero tagline (optional, if you use this class) */
.jsc-hero-tagline{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(20px, 1.2vw + 18px, 30px);
  line-height: 1.25;
}

/* Buttons (optional but consistent) */
.btn{
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.btn.btn-lg{
  font-size: clamp(14px, 0.3vw + 12px, 16px);
  padding: .9rem 1.6rem;
}
/* Brand CTA (Beacon Gold) */
.btn-brand{
  background:#F4C21B;           /* Beacon Gold */
  border-color:#F4C21B;
  color:#1A1A1A;                 /* dark text for contrast */
}
.btn-brand:hover,
.btn-brand:focus{
  background:#E5B114;            /* a bit darker on hover */
  border-color:#E5B114;
  color:#1A1A1A;
}
.btn-brand:active{
  background:#D6A20F;
  border-color:#D6A20F;
  color:#1A1A1A;
}
.btn-brand:focus{
  outline:0;
  box-shadow:0 0 0 .2rem rgba(244,194,27,.35);
}

/* Optional secondary CTA (Justice Blue) */
.btn-brand-secondary{
  background:#1655A5;
  border-color:#1655A5;
  color:#fff;
}
.btn-brand-secondary:hover,
.btn-brand-secondary:focus{
  background:#114285;
  border-color:#114285;
  color:#fff;
}



.min-vh-100{
	min-height:100vh;
}
.min-vh-75{
	min-height:75vh;
}


.overlay-color-uablue:before{
  background:rgba(22, 85, 165, 0.9)!important;
}
.overlay-color-clear:before{
  background:rgba(238, 238, 238, 0.11)!important;
}
/* === Overlay stacking fix (keep overlay BEHIND content) === */

/* Ensure overlay sections create a stacking context */
.overlay { position: relative; }

/* Put the overlay layer behind and make it non-interactive */
.overlay::before,
.overlay.overlay-show::before,
.overlay.show::before,
.overlay[class*="overlay-op-"]::before,
.overlay[class*="overlay-op-"].overlay-show::before,
.overlay[class*="overlay-op-"].show::before {
  z-index: 0 !important;
  pointer-events: none !important;
}
.section.overlay .container,
.section.overlay .container-lg,
.section.overlay .container-fluid { position: relative; z-index: 1; }

/* If you only want to scope to the mission section: */
#mission { position: relative; }
#mission .container-lg { position: relative; z-index: 1; }


/* ---- CONTACT SECTION UPGRADE ---- */
.section-contact-upgraded {
  position: relative;
  overflow: hidden;
}
.section-contact-upgraded::before{
  /* subtle dark overlay so cards pop on any bg image */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,16,31,.55) 0%, rgba(7,16,31,.35) 60%, rgba(7,16,31,.15) 100%);
  pointer-events:none;
  z-index:0;
}

/* left column container */


/* section kicker + h3 */
.contact-reasons .kicker {
  display:inline-block;
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#b8c7ff;
  opacity:.9;
  margin-bottom:.25rem;
}
.contact-reasons h3 {
  color:#fff;
  margin-bottom:1.25rem;
}


/* micro-CTA strip under reasons */
.reasons-cta{
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,216,77,.95), rgba(255,231,135,.95));
  color:#0b1a2a;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  flex-wrap:wrap;
}
.reasons-cta strong{ font-weight:800; }
.reasons-cta .btn{
  background:#0b1a2a; color:#fff; border:0;
  padding:.55rem 1rem; border-radius: 999px;
}
.reasons-cta .btn:hover{ opacity:.9; }



/* helper: flag icons alignment in a bubble */
.flag-pair { display:flex; gap:6px; align-items:center; }

/* spacing on smaller screens */
@media (max-width: 991.98px){
  .contact-reasons{ margin-top:2rem; }
}

/* =======================
   CONTACT SECTION (UA theme)
   ======================= */
:root{
  --ua-blue:    #0057B7;  /* Ukraine flag blue */
  --ua-blue-600:#0a3f8a;  /* darker blue for hover */
  --ua-yellow:  #FFD700;  /* Ukraine flag yellow */
  --ink:        #0b1a2a;
  --paper:      #ffffff;
}

.section-contact-upgraded {
  position: relative;
  overflow: hidden;
}
.section-contact-upgraded::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,87,183,.55) 0%, rgba(0,87,183,.35) 60%, rgba(0,87,183,.15) 100%);
  pointer-events:none;
  z-index:0;
}

/* LEFT: persuasion panel */


.contact-reasons .kicker {
  display:inline-block;
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#cfe0ff;
  opacity:.95;
  margin-bottom:.25rem;
}
.contact-reasons h3 {
  color:#fff;
  margin-bottom:1.25rem;
  position:relative;
}

/* Default: flex for desktop (≥992px) */
.reasons-grid {
  display: block;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.reason-card {
  flex: 1 1 calc(25% - 1.5rem); /* 4 per row (equal width) */
}

/* Below 992px: grid 2×2 */
@media (max-width: 991.98px) {
  .reasons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* Optional: Below 576px → single column */
@media (max-width: 575.98px) {
  .reasons-grid {
    grid-template-columns: 1fr;
  }
}

.reason-card{
  position:relative;
  display:flex;
  gap:.85rem;
  padding: 1rem .95rem 1rem 1rem;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  border: 2px solid var(--ua-yellow);
}

.reason-index{
  flex: 0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width: 36px; height:36px; border-radius: 999px;
  font-weight:700; color: var(--ink);
  background: linear-gradient(135deg, var(--ua-yellow), #ffe97a);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);
}

.reason-icon{
  flex: 0 0 auto;
  width: 42px; height:42px;
  display:flex; align-items:center; justify-content:center;
background: var(--ua-yellow);
  color:var(--ua-blue);
  font-size: 1.25rem;
}
.reasons-icon-primary{
    flex: 0 0 auto;
  width: 42px; height:42px;
  display:flex; align-items:center; justify-content:center;
background: var(--ua-blue);
  color:var(--ua-yellow);
  font-size: 1.25rem;
}
.reasons-icon-white{
    flex: 0 0 auto;
  width: 42px; height:42px;
  display:flex; align-items:center; justify-content:center;
background: #fff;
  color:var(--ua-blue);
  font-size: 1.25rem;
}
.reason-body h4{
  color:#f3f7ff;
  font-size:1.05rem;
  line-height:1.35;
  margin: 0 0 .25rem 0;
  font-weight:800;
}
.reason-body p{
  color:#f3f7ff;
  opacity:.92;
  font-size:.95rem;
  margin:0;
}

/* helper */
.flag-pair { display:flex; gap:6px; align-items:center; }

/* mobile spacing */
@media (max-width: 991.98px){
  .contact-reasons{ margin-top:2rem; }
}

* Right-side form wrapper */
.contact-form-underline{
  color:#fff;
  max-width: 760px;
  margin-left:auto;
}

/* Headline & copy */
.contact-form-underline h2{
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.contact-form-underline p{
  color: rgba(255,255,255,.9);
}

/* Underline inputs (no card) */
.contact-form-underline .form-control{
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid var(--ua-blue) !important;
  border-radius: 0 !important;
  color: #fff !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: .6rem !important;
  padding-bottom: .6rem !important;
  box-shadow: none !important;
  caret-color: var(--ua-yellow);
  transition: border-color .2s ease, box-shadow .2s ease, transform .05s ease;
}
.contact-form-underline .form-control::placeholder{ 
  color: var(--ua-blue); 
  font-weight:500;
  opacity:1;
}
.contact-form-underline .form-control:focus{
  border-bottom-color: var(--ua-yellow) !important;
  box-shadow: 0 6px 0 -4px rgba(255,215,0,.55);
  transform: translateY(-1px);
}
.contact-form-underline .form-control.is-invalid{
  border-bottom-color: #ff5a5f !important;
  box-shadow: 0 6px 0 -4px rgba(255,90,95,.45);
}

/* Submit button */
.btn-ua{
  background: linear-gradient(90deg, var(--ua-blue) 0%, var(--ua-blue) 55%, var(--ua-yellow) 100%);
  color:#fff;
  border: 0;
  padding:.85rem 1.25rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing:.02em;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-ua:hover{ filter: brightness(1.05); box-shadow:0 10px 26px rgba(0,0,0,.25); }
.btn-ua:active{ transform: translateY(1px); }

/* alerts readable */
.contact-form-underline .alert{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Mobile spacing */
@media (max-width: 991.98px){
  .contact-form-underline{ margin-top:1.5rem; }
}
.card-clear{
  position: relative;
  z-index: 1;
  padding: 0;
  background: transparent;
}
.form-holder{
  border: 2px solid var(--ua-blue);
  padding: 1rem;
  border-radius: 6px;
}
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) {

  .col-ipad-6 {
    flex: 0 0 auto;
    width: 50%;   /* 6 of 12 columns */
  }
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

    .header-container{
      --bs-gutter-x:0;
      padding-right: 1.5rem;
    }
    .collapse{
      padding:unset!important;
      padding-right: 30px!important;
      padding-left: 15px!important;
    }
}
.wpcf7-response-output{
  color:#fff!important
}
.form-group{
  margin-top:1rem!important;
    
}
.form-group p{
  margin:0px!important;
}

#contact .contact-overlay {
  position: absolute;
  inset: 0;
  background:rgba(255, 221, 51, 0.2); /* translucent blue tint */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari */
  z-index: 1;
}

#contact .container-lg {
  position: relative;
  z-index: 2; /* ensures text/form stay on top */
}

.heading-responsive {
  font-size: 1.25rem; /* Default mobile size */
}

@media (min-width: 576px) { /* Small screens */
  .heading-responsive {
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) { /* Medium screens */
  .heading-responsive {
    font-size: 1.75rem;
  }
}

@media (min-width: 992px) { /* Large screens */
  .heading-responsive {
    font-size: 2rem;
  }
}

@media (min-width: 1200px) { /* Extra large screens */
  .heading-responsive {
    font-size: 2.25rem;
  }
}

.yt-embed {
  position: absolute!important;
  overflow: hidden;
  border-radius: .5rem;
  background: #000;
}

.yt-embed-btn {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  display: block;
}

.yt-embed-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .3s ease;
}

.yt-embed-btn:hover .yt-embed-poster {
  filter: brightness(0.85);
}

/* Official YouTube-style Play Button */
.yt-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background .3s ease;
}

.yt-play-button::before {
  content: "";
  display: block;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}

.yt-embed-btn:hover .yt-play-button {
  background: rgba(255, 0, 0, 0.8); /* YouTube red on hover */
}
/* Counters Flex */
.counters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.counters {
  flex: 1 1 calc(25% - 1.5rem); /* 4 per row (equal width) */
}
/* Below 768px: grid 2×2 */
@media (max-width: 767px) {
  .counters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
/* Optional: Below 576px → single column */
@media (max-width: 575.98px) {
  .counters {
    grid-template-columns: 1fr;
  }
}


/* Grid Columns - Partners */
.reasons-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.reason-card {
  flex: 1 1 calc(25% - 1.5rem); /* 4 per row (equal width) */
}

/* Below 992px: grid 2×2 */
@media (max-width: 991.98px) {
  .reasons-flex {
    display: flex;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* Optional: Below 576px → single column */
@media (max-width: 575.98px) {
  .reasons-flex {
    grid-template-columns: 1fr;
  }
}



.card-custom{
  background:inherit!important;
  border-bottom:none;
  border-top:none;
}


.card-border-custom-yellow{
  border: 2px solid var(--ua-yellow);
}
.card-border-custom-blue{
  border: 2px solid var(--ua-blue);
}

.card-fill-custom-yellow{
  background: var(--ua-yellow);
}
.card-fill-custom-blue{
  background: var(--ua-blue)!important;
}

.card-fill-custom-none{
  background: transparent!important;
}