/* ============================================================
   IQ UP Deep: site-wide theme. Loaded after style.css on every page
   and overrides the template's dark and orange palette.

   Palette
     primary background    #14460a   (template main-bg, body)
     secondary background  #326E00   (template sub-bg, filled buttons, banners)
     headings              #ffffff
     body text             #C8FA64   (lime: paragraphs, lists, accordion copy, form text)
     labels                #ffffff   (sub-titles, tags, nav links, footer headings,
                                      stat labels, buttons)
   Only white and lime are used for text. Hairlines are translucent white,
   accents (progress fill, focus rings, active states) are lime.
   Font: Poppins everywhere.

   Page files in assets/css/pages/ handle layout only; every color lives here.
   ============================================================ */

:root {
  --iq-bg: #14460a;
  --iq-bg-2: #326E00;
  --iq-head: #ffffff;
  --iq-text: #C8FA64;
  --iq-lime: #C8FA64;
  --iq-line: rgba(255, 255, 255, 0.16);
  --iq-line-soft: rgba(255, 255, 255, 0.1);
  --iq-line-strong: rgba(255, 255, 255, 0.3);
  --iq-lime-line: rgba(200, 250, 100, 0.45);
  --iq-placeholder: rgba(200, 250, 100, 0.72);
  --iq-shadow: rgba(4, 24, 0, 0.45);
}

/* ---------- Typography: Poppins everywhere (icon fonts untouched) ---------- */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, label, blockquote,
input, textarea, select, button,
.butn, .sub-title, .nav-link, .rolling-text, .tag, .num {
  font-family: 'Poppins', sans-serif;
}

/* ============================================================
   Base colors
   ============================================================ */
html { background-color: var(--iq-bg); }

body {
  background-color: var(--iq-bg);
  color: var(--iq-text);
}

h1, h2, h3, h4, h5, h6 { color: var(--iq-head); }

p,
li,
label,
blockquote,
.p-color,
.accordion-info,
.accordion-info p,
.accordion-info li { color: var(--iq-text); }

/* labels, tags, sub-titles, stat labels: white */
.sub-title,
.sub-title.p-color,
h6.p-color.sub-title,
.tag,
.services-inline2 .item .num { color: var(--iq-head) !important; }

/* former orange accent (mostly on sub-titles) -> white; former lime accent -> lime */
.main-color { color: var(--iq-head) !important; }
.main-color2 { color: var(--iq-lime) !important; }
.main-colorbg,
.main-colorbg2 { background: var(--iq-bg-2) !important; }

/* section backgrounds */
.main-bg,
.sub-bg2 { background: var(--iq-bg) !important; }
.sub-bg { background: var(--iq-bg-2) !important; }
[data-overlay-dark]:before { background: var(--iq-bg); }

.text-white { color: #fff; }
.text-dark,
.text-black,
.text-extra-light-gray { color: var(--iq-text); }

::selection { background: rgba(200, 250, 100, 0.35); color: #fff; }

::-webkit-scrollbar-track { background: var(--iq-bg); }
::-webkit-scrollbar-thumb { background: var(--iq-bg-2); border: 2px solid var(--iq-bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(200, 250, 100, 0.6); }

/* the template strips every outline (* { outline: none }); restore a visible
   keyboard focus ring on interactive elements */
a:focus-visible,
button:focus-visible,
.butn:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible,
.progress-wrap:focus-visible {
  outline: 2px solid var(--iq-lime);
  outline-offset: 3px;
}

/* links inside running text: white, underlined, lime on hover */
main p a:not(.butn),
main .text li a:not(.butn),
main .accordion-info a:not(.butn),
.legal-doc a:not(.butn) {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .3s;
}
main p a:not(.butn):hover,
main .text li a:not(.butn):hover,
main .accordion-info a:not(.butn):hover,
.legal-doc a:not(.butn):hover { color: var(--iq-lime); }

/* ============================================================
   Buttons
   ============================================================ */
.butn { color: #fff; }
.butn .text,
.butn span { color: inherit; }

/* filled (nav Contact, .butn-bg, .main-colorbg): secondary green, lime edge */
.butn.butn-bg,
.butn.main-colorbg {
  background: var(--iq-bg-2) !important;
  border-color: var(--iq-lime);
  color: #fff !important;
}
.butn.butn-bg:hover,
.butn.main-colorbg:hover {
  background: transparent !important;
  border-color: var(--iq-lime);
  color: var(--iq-lime) !important;
}
.butn.butn-bg:hover .text,
.butn.main-colorbg:hover .text { color: var(--iq-lime); }
/* a filled button placed on a secondary-green section keeps its edge readable */
.sub-bg .butn.butn-bg,
.sub-bg .butn.main-colorbg { background: var(--iq-bg) !important; }

/* outline buttons: white text and edge, lime on hover (no white fill with dark text) */
.butn.butn-bord { border-color: #fff; color: #fff; }
.butn.butn-bord-thin { border-color: var(--iq-line-strong); color: #fff; }
.butn.butn-bord:hover,
.butn.butn-bord-thin:hover {
  background: rgba(200, 250, 100, 0.08);
  border-color: var(--iq-lime);
  color: var(--iq-lime);
}
.butn.butn-bord:hover span,
.butn.butn-bord-thin:hover span { color: var(--iq-lime); }

.butn-crev .circle { border-color: var(--iq-line-strong); }
.butn-crev:hover .circle { border-color: var(--iq-lime); color: var(--iq-lime); }

.btn-circle { border-color: #fff; }
.btn-circle:after { background: var(--iq-bg-2); }
.btn-circle:hover { border-color: var(--iq-lime); }
.btn-circle:hover span { color: var(--iq-lime); }

.butn-circle-text .circle { border-color: var(--iq-line-strong); }
.circle-button .rotate-circle svg { fill: #fff; }

.vi-more .icon { border-color: var(--iq-line-strong); }
.vi-more:hover .icon { background: var(--iq-bg-2); border-color: var(--iq-lime); color: var(--iq-lime); }

.go-more:after { background: rgba(255, 255, 255, 0.08); }
.vew-all:after { border-color: var(--iq-line-strong); }

/* ============================================================
   Navbar
   ============================================================ */
.navbar.bord,
.navbar.blur,
.navbar.nav-scroll { border-color: var(--iq-line-soft); }

/* top of page: light green tint over the header video; scrolled: solid enough to read */
.navbar.blur { background: rgba(20, 70, 10, 0.35); }
.navbar.nav-scroll { background: rgba(20, 70, 10, 0.9); }
.navbar.main-bg { background: var(--iq-bg); }
.navbar.sub-bg { background: var(--iq-bg-2); }

.navbar .icon-bar,
.navbar .navbar-toggler { color: #fff; }
.navbar .navbar-nav .nav-link { color: #fff; position: relative; }
.navbar .navbar-nav .nav-link:hover { color: var(--iq-lime); }

/* current page */
.navbar .navbar-nav .nav-link.active { color: var(--iq-lime); }
@media (min-width: 993px) {
  .navbar .navbar-nav .nav-link.active:after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--iq-lime);
  }
}

/* dividers after the logo and before the Contact button */
.navbar .logo:after { border-right-color: var(--iq-line); }
.navbar .contact-button:after { border-left-color: var(--iq-line); }

/* dropdowns (none in the current menu, kept consistent in case one returns) */
.navbar .navbar-nav .dropdown-menu,
.navbar .dropdown-menu,
.navbar .dropdown-menu .dropdown-item .dropdown-side,
.navbar .mega-menu .container {
  background: var(--iq-bg-2);
  border-color: var(--iq-line);
  color: #fff;
}
.navbar .dropdown-menu .dropdown-item { color: #fff; }
.navbar .dropdown-menu .dropdown-item:hover { color: var(--iq-lime); background: transparent; }
.navbar .dropdown-menu .dropdown-item:after { background: var(--iq-lime); }

/* ---------- Image logo (nav + footer) ---------- */
.logo.logo-img { display: inline-flex; align-items: center; line-height: 0; }
.logo.logo-img img { display: block; width: auto; max-width: none; }
.navbar .logo.logo-img img { height: 32px; }
footer .logo.logo-img img { height: 36px; }

/* ---------- Mobile menu (collapsed navbar) ---------- */
@media screen and (max-width: 992px) {
  .navbar .logo.logo-img { max-width: none !important; }
  .navbar .logo.logo-img img { height: 28px; }
  .navbar .navbar-toggler { color: #fff; border: 0; }
  .navbar .navbar-collapse { border-top-color: var(--iq-line); }
  .navbar .navbar-collapse.show { background: var(--iq-bg); }
  .navbar:has(.navbar-collapse.show) { background: rgba(20, 70, 10, 0.97); }
  .navbar .navbar-nav .nav-link { border-bottom-color: var(--iq-line-soft); }
  .navbar .navbar-nav .nav-link.active { box-shadow: inset 3px 0 0 var(--iq-lime); }
  .navbar .navbar-nav .mega-menu .item-img { color: #fff; }
  .navbar .navbar-nav .mega-menu .item-img:after { background: var(--iq-lime); }
}

/* ============================================================
   Loader, cursor, scroll-to-top ring
   ============================================================ */
.loader-wrap svg,
.loader-wrap svg path { fill: var(--iq-bg); }
.loader-wrap .loader-wrap-heading .load-text,
.loader-wrap .loader-wrap-heading .load-text span { color: #fff; }

.cursor {
  background-color: var(--iq-lime);
  mix-blend-mode: normal;
}
.cursor.cursor-active { opacity: .18; }
/* touch screens have no pointer to follow: the dot would sit wherever the last tap landed */
@media (hover: none) {
  .cursor { display: none; }
}

.progress-wrap {
  mix-blend-mode: normal;
  background: rgba(20, 70, 10, 0.75);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.progress-wrap::after { color: #fff; }
.progress-wrap:hover::after { color: var(--iq-lime); }
.progress-wrap svg.progress-circle path { stroke: var(--iq-lime); }

/* ============================================================
   Template decoration re-tinted for green
   ============================================================ */

/* decorative orange blur blobs: gone everywhere (footer blob included) */
.circle-blur { display: none !important; }

/* orange radial glows behind heroes, numbers and skills */
.crev-header .full-img:after,
.modern-slider:after,
.header-personal:after,
.my-skills:after,
.numbers-crev:after { display: none !important; }

/* thin gradient rules above/below a section */
.bord-top-grd:before,
.bord-bottom-grd:after {
  background: linear-gradient(to right, transparent, var(--iq-lime), transparent);
  opacity: .6;
}

.overlay-center:after {
  background: linear-gradient(to top, var(--iq-bg), rgba(20, 70, 10, 0) 20%, rgba(20, 70, 10, 0) 80%, var(--iq-bg));
}

.lines.two:after,
.lines.four,
.lines.four:after,
.lines.two-out { border-color: var(--iq-line-soft); }
.line-overlay svg path { stroke: var(--iq-line-strong); }

/* hairlines */
.bord-thin-top { border-top-color: var(--iq-line); }
.bord-thin-bottom { border-bottom-color: var(--iq-line); }
.bord-thin-right { border-right-color: var(--iq-line); }
.bord-thin-left { border-left-color: var(--iq-line); }

/* big section headings: the template faded them from white to near-black;
   headings are plain white in this palette */
.sec-head h2 span {
  background: none;
  -webkit-text-fill-color: currentColor;
}
.sec-head .thin { border-bottom-color: var(--iq-line); }
.sec-bottom:after { border-top-color: var(--iq-line); }
.sec-bottom .d-flex { border-color: var(--iq-line); background: var(--iq-bg); }

.title-bord { border-color: var(--iq-line-strong); color: #fff; }
.title-bord:after { background: var(--iq-lime); }

/* outlined numerals and words */
.stroke {
  color: transparent;
  -webkit-text-stroke: 1px var(--iq-lime);
}

/* ---------- Marquee band ---------- */
.main-marq:after {
  background: linear-gradient(to left, var(--iq-bg), rgba(20, 70, 10, 0) 280px, rgba(20, 70, 10, 0) calc(100% - 280px), var(--iq-bg));
}
.sub-bg .main-marq:after,
.main-marq.sub-bg:after {
  background: linear-gradient(to left, var(--iq-bg-2), rgba(50, 110, 0, 0) 280px, rgba(50, 110, 0, 0) calc(100% - 280px), var(--iq-bg-2));
}
.main-marqv:after {
  background: linear-gradient(to top, var(--iq-bg-2), rgba(50, 110, 0, 0) 80px, rgba(50, 110, 0, 0) calc(100% - 80px), var(--iq-bg-2));
}
.main-marq .box .item h4,
.main-marq .box .item h4 a { color: #fff; }
.main-marq .strok .item h4,
.main-marq .strok .item h4 a,
.main-marq .box .item:nth-of-type(even) h4,
.main-marq .box .item:nth-of-type(even) h4 a,
.main-marq .box:last-of-type .item:nth-of-type(odd) h4,
.main-marq .box:last-of-type .item:nth-of-type(odd) h4 a { -webkit-text-stroke-color: #fff; }
.call-marq .main-marq.sub-bg { box-shadow: 0 20px 50px var(--iq-shadow); }
.call-marq .main-marq.bord-item .item { border-color: var(--iq-line-strong); }

/* 404 marquee strips */
.page-error .marq { background: var(--iq-bg); }
.page-error .marq .strok i { color: #fff; }
.page-error .marq .non-strok i { -webkit-text-stroke-color: #fff; }

/* ============================================================
   Content components
   ============================================================ */

/* tags: identical for <a class="tag"> and <span class="tag"> */
.tag {
  display: inline-block;
  text-decoration: none;
  cursor: default;
}
a.tag[href] { cursor: pointer; }
.work-card .card-item .cont .tag,
.services-clas .item .tag,
.sidebar .widget.last-post-thum .item .cont .tag { border-color: var(--iq-line-strong); background: transparent; }

/* numbers blocks */
.numbers .item h3,
.numbers-crev .item h3:not(.stroke) { color: #fff; }

/* progress bars: lime fill on a subtle track */
.skill-progress,
.skills-box .skill-progress {
  border: 1px solid var(--iq-line);
  background: rgba(255, 255, 255, 0.06);
}
.skill-progress .progres,
.skills-box .skill-progress .progres {
  background: var(--iq-lime);
  max-width: calc(100% - 10px); /* the fill starts 5px in, so 100% would overrun the track */
}

/* accordion */
.accordion .item:first-of-type .title { border-top-color: var(--iq-line); }
.accordion .title,
.accordion .accordion-info { border-bottom-color: var(--iq-line); }
.accordion .title h6 { color: #fff; }
.accordion .title .ico { color: var(--iq-lime); }

/* bullet lists */
.dot-list li:before { background: var(--iq-lime); }
.text-dark .dot-list li:before { background: var(--iq-lime); }

/* social icon circles */
.social-icon a,
footer .subscribe-minimal .social-icon a,
.team-crev .item .social a {
  border-color: var(--iq-line-strong);
  color: #fff;
  transition: all .3s;
}
.social-icon a:hover,
footer .subscribe-minimal .social-icon a:hover,
.team-crev .item .social a:hover {
  background: var(--iq-bg-2);
  border-color: var(--iq-lime);
  color: var(--iq-lime);
}

/* cards and bordered boxes */
.services .item-box,
.services-crev .item-box,
.team-crev .item,
.team-crev2 .item .img,
.team-crev2 .item-bord,
.work-card .card-item,
.feat .item,
.testim-modern .item,
.testim-modern .item .info,
.my-skills .item .box-bord,
.pricing .item,
.price-hr .item,
.services-modern .item,
.blog.style2 .item,
.about-author .profile-img,
.about-author .info,
.contact .info-box { border-color: var(--iq-line); }

.services-inline .item,
.services-inline2 .item { border-top-color: var(--iq-line); border-bottom-color: var(--iq-line); }
.services-inline .item .num,
.services-inline2 .item .num { border-color: var(--iq-line-strong); }
.services-inline2 .item .img:after { border-color: rgba(200, 250, 100, 0.3); }
.services-inline2 .item .img a { background: var(--iq-bg-2); color: var(--iq-lime); border: 1px solid var(--iq-lime); }
.services-inline2 .item .text h6 { color: #fff; }

.about-author .profile-img .icon { border-color: var(--iq-line); background: rgba(255, 255, 255, 0.04); }
.about-author .info .item .icon { background: var(--iq-bg-2); color: var(--iq-lime); }

.pricing .item li:after { background: var(--iq-lime); }
.process .item { border-right-color: var(--iq-line); }
.filtering .filter { border-color: var(--iq-line); }
.filtering span.active { color: var(--iq-lime); }
.team .item .social { background: var(--iq-bg-2); border-color: var(--iq-line); }
.team .item .social .links a:hover,
.team-crev2 .item .img .social a:hover,
.services-clas .item a:hover,
.sidebar .widget.tags a:hover,
.main-post .info-area .share-icon a:hover { background: var(--iq-bg-2); border-color: var(--iq-lime); color: var(--iq-lime); }
.services-clas .item a { background: var(--iq-bg); }

/* next-page teaser boxes */
.next-project .box:after { background: var(--iq-bg-2); }
.next-project .all-works-butn { background: var(--iq-bg); color: #fff; }

/* swiper arrows and pagination */
.swiper-arrow-control .swiper-button-prev,
.swiper-arrow-control .swiper-button-next { border-color: var(--iq-line); background: rgba(255, 255, 255, 0.04); color: #fff; }
.work-crev .swiper-pagination { background: var(--iq-line-soft); }
.work-crev .swiper-pagination .swiper-pagination-progressbar-fill { background: var(--iq-lime); }

/* ============================================================
   Forms: contact form and validation messages
   ============================================================ */
.contact input,
.contact textarea,
.comments-from textarea {
  color: var(--iq-text);
  border-color: var(--iq-line-strong);
  background: transparent;
}
.contact .form2 input,
.contact .form2 textarea {
  border: 1px solid var(--iq-line-strong);
  background: rgba(255, 255, 255, 0.04);
}
.contact input:focus,
.contact textarea:focus,
.comments-from textarea:focus { border-color: var(--iq-lime); }
.contact input::placeholder,
.contact textarea::placeholder,
footer .subscribe-minimal input::placeholder { color: var(--iq-placeholder); opacity: 1; }
/* browser autofill keeps the green look instead of a pale yellow box */
.contact input:-webkit-autofill,
.contact textarea:-webkit-autofill,
footer .subscribe-minimal input:-webkit-autofill {
  -webkit-text-fill-color: var(--iq-text);
  -webkit-box-shadow: 0 0 0 1000px var(--iq-bg) inset;
  caret-color: var(--iq-text);
}

.form-group.has-error input,
.form-group.has-error textarea { border-color: #fff; box-shadow: inset 0 -1px 0 #fff; }
/* the focused field keeps its lime border even while it is flagged invalid */
.form-group.has-error input:focus,
.form-group.has-error textarea:focus { border-color: var(--iq-lime); box-shadow: inset 0 -1px 0 var(--iq-lime); }
.help-block,
.with-errors,
.help-block.with-errors li { color: #fff; font-size: 13px; margin-top: 8px; }

/* AJAX result boxes injected by scripts.js into .messages */
.alert {
  border-radius: 12px;
  padding: 16px 48px 16px 20px;
  font-size: 15px;
  line-height: 1.6;
}
.alert-success {
  background: var(--iq-bg-2);
  border: 1px solid var(--iq-lime);
  color: #fff;
}
.alert-danger,
.alert-warning,
.alert-error {
  background: transparent;
  border: 1px dashed #fff;
  color: #fff;
}
.alert .close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  opacity: .8;
  cursor: pointer;
}
.alert .close:hover { opacity: 1; color: var(--iq-lime); }

/* ============================================================
   Footer
   ============================================================ */
footer.clean-footer { background: var(--iq-bg); }
footer h6,
footer .sub-title { color: #fff; }
footer h6.p-color { color: var(--iq-text) !important; }
footer a:hover { color: var(--iq-lime); }
footer .underline .main-color { color: var(--iq-lime) !important; }
/* the template's frosted panel only existed to blur the (now removed) blob */
footer.clean-footer.crev:after { display: none; }

/* newsletter: template underline input + status line */
footer .subscribe-minimal input {
  color: var(--iq-text);
  border-bottom-color: var(--iq-line-strong);
}
footer .subscribe-minimal input:focus { border-bottom-color: var(--iq-lime); }
footer .subscribe-minimal button { color: #fff; cursor: pointer; transition: color .3s; }
footer .subscribe-minimal button:hover { color: var(--iq-lime); }
footer .subscribe-minimal button:disabled { opacity: .5; cursor: wait; }
.newsletter-form .newsletter-msg {
  color: var(--iq-lime);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 10px;
}
.newsletter-form .newsletter-msg:empty { display: none; }

/* legal links row under the copyright line */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 6px;
}
.legal-links li {
  display: inline-flex;
  align-items: center;
  color: var(--iq-text);
}
.legal-links li + li:before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 14px;
  background: var(--iq-line-strong);
}
.legal-links a,
.legal-links .cookie-settings-link {
  color: var(--iq-text);
  font: inherit;
  line-height: 1.6;
  text-decoration: none;
  transition: color .3s;
}
.legal-links .cookie-settings-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
@media (max-width: 575px) {
  /* separators would dangle at the start of a wrapped line on phones */
  .legal-links { column-gap: 20px; }
  .legal-links li + li:before { display: none; }
}
.legal-links a:hover,
.legal-links .cookie-settings-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Cookie consent banner (injected by iqup.js)
   ============================================================ */
.cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 760px;
  margin: 0 auto;
  z-index: 2147483000; /* above the cursor (99999), progress ring and navbar; the loader stays on top */
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  background: var(--iq-bg-2);
  color: #fff;
  border: 1px solid var(--iq-lime-line);
  border-radius: 16px;
  box-shadow: 0 18px 50px var(--iq-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.cookie-consent.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .35s ease, transform .35s ease, visibility 0s;
}
.cookie-consent p {
  flex: 1 1 auto;
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}
.cookie-consent a {
  color: var(--iq-lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.cookie-consent a:hover { color: #fff; }
.cookie-consent-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}
.cookie-btn {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 11px 24px;
  border-radius: 30px;
  border: 1px solid var(--iq-lime);
  background: var(--iq-bg);
  color: #fff;
  cursor: pointer;
  transition: border-color .3s, color .3s, background .3s;
}
.cookie-btn:hover { border-color: #fff; }
.cookie-btn.cookie-btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
}
.cookie-btn.cookie-btn-ghost:hover { border-color: var(--iq-lime); color: var(--iq-lime); }
@media (max-width: 575px) {
  .cookie-consent {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 18px;
  }
  .cookie-consent-actions .cookie-btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-consent,
  .cookie-consent.is-visible { transform: none; transition: opacity .2s, visibility 0s; }
}

/* ============================================================
   FAQ audience tabs (home: For Parents / For Investors)
   ============================================================ */
.faq-tabs-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 50px;
  padding: 6px;
  border: 1px solid var(--iq-line);
  border-radius: 40px;
}
.faq-tab {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 12px 26px;
  border-radius: 30px;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .3s, border-color .3s, color .3s;
}
.faq-tab:hover { border-color: var(--iq-line-strong); }
.faq-tab.active,
.faq-tab[aria-selected="true"] {
  background: var(--iq-bg-2);
  border-color: var(--iq-lime);
  color: #fff;
}
.faq-tab:focus-visible { outline: 2px solid var(--iq-lime); outline-offset: 3px; }
/* on a secondary-green section the active pill takes the primary green so it still stands out */
.sub-bg .faq-tab.active,
.sub-bg .faq-tab[aria-selected="true"] { background: var(--iq-bg); }
.faq-panel[hidden],
.faq-tabs [hidden] { display: none !important; }
@media (max-width: 575px) {
  .faq-tabs-nav { width: 100%; }
  .faq-tab { flex: 1 1 0; padding: 12px 14px; }
}

/* ============================================================
   Hero header video (home)
   ============================================================ */
.crev-header { overflow: hidden; }

.crev-header .header-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  overflow: hidden;
}
.crev-header .header-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* video fades into the primary green toward the bottom */
.crev-header .header-video:after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 65%;
  background: linear-gradient(to bottom, rgba(20, 70, 10, 0) 0%, var(--iq-bg) 100%);
}
.crev-header .container.ontop { position: relative; z-index: 2; }
.crev-header .full-img { position: relative; z-index: 1; }
/* home.png is a full composed banner (1920x755). The template's fixed 550px-tall
   box cropped its top and bottom on desktop; let height follow the real aspect
   ratio so the whole banner shows. Full-bleed via 100vw (the header is
   overflow:hidden). Mobile (992px and below) keeps the template's cover crop. */
@media (min-width: 993px) {
  .crev-header .full-img {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    aspect-ratio: 1920 / 755;
    background-size: cover;
    background-position: center;
  }
}

/* ============================================================
   Inner-page header band with the shared home.mp4 video
   ============================================================ */
.page-header-video { position: relative; overflow: hidden; min-height: 60vh; }
.page-header-video .header-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  overflow: hidden;
}
.page-header-video .header-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* uniform green tint so the white H1 stays legible over any video frame */
.page-header-video .header-video:after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20, 70, 10, 0.5);
}
/* the band fades into the page background at its bottom edge */
.page-header:after { background: linear-gradient(rgba(20, 70, 10, 0), var(--iq-bg)); }
.header-project:before { background: linear-gradient(to top, var(--iq-bg), rgba(20, 70, 10, 0)); }

@media (max-width: 991px) {
  .page-header-video { min-height: 45vh; }
}

/* ============================================================
   About block: video inside the pill frame
   ============================================================ */
.about-author .profile-img .img { height: 520px; border-radius: 470px; overflow: hidden; }
.about-author .profile-img .img video {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

/* ============================================================
   What We Do: single video instead of the 3-image collage
   ============================================================ */
.intro-skill .imgs.home-media { position: relative; height: 100%; min-height: 340px; }
.intro-skill .imgs.home-media video {
  width: 100%; height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}

/* ============================================================
   Team cards: role line under each name
   ============================================================ */
.team-crev .item .info .role { display: block; margin-top: 6px; font-size: 13px; color: var(--iq-text); }

/* ============================================================
   Equal-height cards
   ============================================================ */
/* services-crev grid: all cards match the tallest; title at the top,
   icon and copy aligned to the bottom */
.services-crev .row.sm-marg > [class*="col-"] { display: flex; }
.services-crev .item-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.services-crev .item-box h5 { margin-bottom: 40px; }
.services-crev .item-box .icon { margin-top: auto; }

/* team-crev: cards match the tallest; photos align to the bottom
   regardless of how many lines the role text wraps to */
.team-crev .row > [class*="col-"] { display: flex; }
.team-crev .item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.team-crev .item .img { margin-top: auto; }

/* ============================================================
   Feature cards (foundation-feat): full-strength icons, equal height
   ============================================================ */
.intro-accord .img img { width: 100%; height: auto; display: block; border-radius: 15px; }

.foundation-feat .item-box .icon-img-70 img { opacity: 1; }
.foundation-feat .row > [class*="col-"] { display: flex; }
.foundation-feat .sec-head .row > [class*="col-"] { display: block; }
.foundation-feat .item-box { width: 100%; height: 100%; }
/* Four-card rows (col-lg-3 col-md-6): the cards stretch to the row height, so
   a bottom margin on some columns only would make those cards shorter, and the
   template's md-/sm- margin utilities switch one pixel off Bootstrap's grid.
   A row gap falls only between wrapped lines, so every card in a line matches. */
.foundation-feat > .container > .row { row-gap: 50px; }

/* full-width banner with native ScrollSmoother parallax (data-speed); the
   whole image always shows and drifts within the vertical slack */
.story-parallax { width: 100%; overflow: hidden; padding: 80px 0; }
.story-parallax img { display: block; width: 100%; height: auto; }

/* ============================================================
   Investors page blocks
   ============================================================ */

/* invest-approach: wide banners shown in full instead of the
   template's fixed 140px pill frame */
.invest-approach .item .img {
  height: auto;
  border-radius: 15px;
  overflow: hidden;
}
.invest-approach .item .img img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  display: block;
}

/* invest-pipeline: full-width infographic */
.invest-pipeline .pipeline-graphic { width: 100%; margin: 0 auto; }
.invest-pipeline .pipeline-graphic img { width: 100%; height: auto; display: block; }

/* invest-roadmap: each step carries a description, so the number aligns to the top */
.invest-roadmap .item { align-items: flex-start; }
.invest-roadmap .item .num { flex: 0 0 45px; margin-top: 6px; }
.invest-roadmap .item p { max-width: 90%; }

/* invest-moment: product shot shown 1:1 */
.invest-moment .img { position: relative; border-radius: 15px; overflow: hidden; }
.invest-moment .img img { width: 100%; margin-left: 0; height: auto; display: block; }

/* ============================================================
   Strategy blocks (reused on pricing and about)
   ============================================================ */

/* strategy-process: wide banners shown in full instead of the pill frame */
.strategy-process .item .img {
  height: auto;
  border-radius: 15px;
  overflow: hidden;
}
.strategy-process .item .img img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  display: block;
}

/* strategy-risk: number aligned to the top of each described step */
.strategy-risk .item { align-items: flex-start; }
.strategy-risk .item .num { flex: 0 0 45px; margin-top: 6px; }
.strategy-risk .item p { max-width: 90%; }

/* strategy-vision: landscape photo 1:1 */
.strategy-vision .img { position: relative; border-radius: 15px; overflow: hidden; }
.strategy-vision .img img { width: 100%; margin-left: 0; height: auto; display: block; }

/* ============================================================
   Startup blocks (reused on about)
   ============================================================ */
.startup-solution-img img { width: 100%; height: auto; display: block; border-radius: 15px; }

/* three "glimpse" videos as uniform square tiles */
.startup-glimpse .glimpse-video {
  aspect-ratio: 1 / 1;
  border-radius: 15px;
  overflow: hidden;
  background: var(--iq-bg-2);
}
.startup-glimpse .glimpse-video video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Site-wide layout fixes
   ============================================================ */

/* Long accordion titles (FAQ questions) must clear the absolute +/x icon. */
.accordion .title h6 { padding-right: 45px; }

/* Below 992px the template hides the label of every sub-title-with-line
   ("The Team", "Our Principles", ...) and keeps only the rule. Those labels
   are spec copy, so keep label and rule on one row. */
@media screen and (max-width: 992px) {
  .sec-head h6.sub-title.d-flex { display: flex !important; }
  .sec-head .sub-title span:first-of-type { display: inline; }
  .sec-head .sub-title span.thin { margin-left: 20px; }
}

/* Accordion titles are focusable buttons (role and tabindex added by iqup.js). */
.accordion .title[role="button"] { cursor: pointer; }

/* Contact button on contact.html (aria-current="page") reads as the current page. */
.navbar .contact-button .butn[aria-current="page"] {
  background: transparent !important;
  border-color: var(--iq-lime);
}
.navbar .contact-button .butn[aria-current="page"] .text { color: var(--iq-lime); }

/* Scroll-reveal content stays visible for keyboard users (class set by iqup.js
   on the first Tab) and for visitors who ask for reduced motion. */
.using-keyboard .wow { visibility: visible !important; -webkit-animation: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .wow { visibility: visible !important; -webkit-animation: none !important; animation: none !important; }
  /* marquee bands stop moving */
  .slide-har .box { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; }
}

/* Footer email field: a visible focus ring, not only a border-color change. */
footer .subscribe-minimal input:focus-visible { outline: 2px solid var(--iq-lime); outline-offset: 4px; }

/* Balanced line breaks so headings do not end on a single orphan word. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }