/* ============================================================
   BRAINNOVA STUDIOS — RESPONSIVE + TYPOGRAPHY FIXES
   Applied on top of main.min.css
   ============================================================ */

/* ── 1. GLOBAL TYPOGRAPHY — Reduce & standardize font sizes ── */
:root {
  --inter: "Inter", sans-serif;
}

body { font-size: 14px; line-height: 1.6; }

h1, .h1, .light-title { font-size: 52px !important; line-height: 64px !important; }
h2                     { font-size: 36px !important; line-height: 46px !important; }
h3                     { font-size: 26px !important; line-height: 36px !important; }
h4                     { font-size: 20px !important; line-height: 30px !important; }
h5                     { font-size: 17px !important; line-height: 26px !important; }
h6                     { font-size: 14px !important; line-height: 22px !important; }

p, th, td, li, input, textarea, select, label, span {
  font-size: 15px !important;
  line-height: 26px !important;
}

.primary-text   { font-size: 16px !important; line-height: 26px !important; }
.secondary-text { font-size: 22px !important; line-height: 32px !important; }
.tertiary-text  { font-size: 13px !important; line-height: 22px !important; }

a, button { font-size: 14px !important; line-height: 18px !important; }

/* Banner headline override */
.banner__content h1 { font-size: 52px !important; line-height: 62px !important; }

/* ── 2. NAVBAR — Fix hamburger + logo size, single line ── */
.primary-navbar {
  height: auto !important;
  padding: 0 !important;
}

.secondary--navbar {
  padding: 16px 0 !important;
}

.primary-navbar .navbar {
  height: 64px !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;  /* prevent wrap that pushes hamburger down */
  align-items: center !important;
}

/* Logo size */
.primary-navbar .navbar__logo a img,
.footer-two .logo a img,
header .navbar__logo a img {
  max-width: 130px !important;
  width: 130px !important;
  height: auto !important;
}

/* Hamburger button — keep in line */
.secondary--navbar .open-offcanvas-nav {
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.primary-navbar .navbar__options {
  flex-shrink: 0 !important;
  gap: 12px !important;
}

.primary-navbar .navbar__options button {
  /*height: auto !important;*/
  margin-top: 0 !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

/* ── 3. FOOTER — Reduce oversized elements ── */
.footer-two .logo {
  margin-bottom: 20px;
}

.footer-two .logo a img {
  max-width: 130px !important;
  width: 130px !important;
}

.footer-two .paragraph p {
  font-size: 14px !important;
  line-height: 24px !important;
}

/* Email link in footer */
.footer-two .section__content-cta h2,
.footer-two .section__content-cta h2 a {
  font-size: 18px !important;
  line-height: 26px !important;
  word-break: break-word;
}

.footer-two .footer__single-meta a {
  font-size: 13px !important;
  line-height: 22px !important;
}

.footer__copyright p,
.footer__copyright a,
.footer__copyright li {
  font-size: 13px !important;
  line-height: 22px !important;
}

/* ── 4. SERVICE CARDS — Fix numbering + card text ── */
.service-t__slider-single .sub-title {
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 10px 16px !important;
}

.service-t__slider-single h5 a {
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
}

.service-t__slider-single p {
  font-size: 14px !important;
  line-height: 24px !important;
}

/* ── 5. BANNER TEXT — Fix ajeeb sizing on resize ── */
.banner__content h1 {
  font-size: clamp(28px, 5vw, 56px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

.banner__content-inner p {
  font-size: 14px !important;
  line-height: 24px !important;
}

.banner__content-inner .cta h5 {
  font-size: 22px !important;
  line-height: 1 !important;
  color: var(--primary-color);
}

.cmn-banner h2.title {
  font-size: clamp(22px, 4vw, 38px) !important;
  line-height: 1.2 !important;
}

/* ── 6. SECTION HEADERS ── */
.section__header .title,
.section__content .title {
  font-size: clamp(22px, 3.5vw, 36px) !important;
  line-height: 1.25 !important;
}

.sub-title {
  font-size: 11px !important;
  line-height: 1 !important;
  padding: 10px 16px !important;
}

/* ── 7. AGENCY SECTION ── */
.agency__content .title {
  font-size: clamp(22px, 3vw, 34px) !important;
  line-height: 1.2 !important;
}

.skill-bar-single .primary-text {
  font-size: 14px !important;
}

/* ── 8. OFFER / SERVICES LIST ── */
.offer__cta h2 a {
  font-size: clamp(20px, 3vw, 36px) !important;
  line-height: 1.2 !important;
}

/* ── 9. TESTIMONIAL ── */
.testimonial-s__content h4 {
  font-size: 16px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
}

.testimonial-s__content .content-cta h5 {
  font-size: 14px !important;
  line-height: 22px !important;
}

/* ── 10. NEXT PAGE SLIDER ── */
.next__text-slider-single h2 a,
.portfolio__text-slider-single h2 a,
.testimonial__text-slider-single h2 a {
  font-size: clamp(28px, 5vw, 60px) !important;
  line-height: 1.2 !important;
}

/* ── 11. BUTTON SIZES ── */
.btn {
  padding: 12px 24px !important;
  font-size: 13px !important;
}

.slide-btn {
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  font-size: 28px !important;
}

/* ── 12. OFFCANVAS NAV ── */
.offcanvas-nav .offcanvas-menu .navbar__item a,
.offcanvas-nav .offcanvas-menu .navbar__item button {
  font-size: 20px !important;
  padding: 16px 70px 16px 20px !important;
}

/* ── 13. UX PROCESS ── */
.ux-process .intro-btn h4 {
  font-size: 18px !important;
  line-height: 26px !important;
}

.ux-process .body-cn p {
  font-size: 14px !important;
  line-height: 24px !important;
}

/* ──────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   ────────────────────────────────────────── */

/* Tablet 992–1199 */
@media (max-width: 1199.98px) {
  h1, .h1, .light-title { font-size: 38px !important; line-height: 50px !important; }
  h2 { font-size: 28px !important; line-height: 38px !important; }
  h3 { font-size: 22px !important; line-height: 32px !important; }
  .banner__content h1 { font-size: 38px !important; }

  /* Navbar stays single line */
  .primary-navbar .navbar {
    flex-wrap: nowrap !important;
    height: 60px !important;
  }
  .secondary--navbar { padding: 14px 0 !important; }
}

/* Tablet 768–991 */
@media (max-width: 991.98px) {
  h1, .h1, .light-title { font-size: 30px !important; line-height: 40px !important; }
  h2 { font-size: 24px !important; line-height: 34px !important; }
  h3 { font-size: 20px !important; line-height: 28px !important; }
  h4 { font-size: 17px !important; line-height: 26px !important; }

  .banner__content h1 {
    font-size: clamp(22px, 5vw, 32px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  /* Prevent banner text going huge */
  .banner { padding: 160px 0 100px !important; }

  /* Keep navbar single line on tablet */
  .primary-navbar .navbar {
    flex-wrap: nowrap !important;
    height: auto !important;
    padding: 0 !important;
  }

  .secondary--navbar {
    padding: 12px 0 !important;
  }

  .secondary--navbar .open-offcanvas-nav {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
  }

  .primary-navbar .navbar__logo a img {
    max-width: 110px !important;
    width: 110px !important;
  }
}

/* Mobile 576–767 */
@media (max-width: 767.98px) {
  h1, .h1 { font-size: 26px !important; line-height: 36px !important; }
  h2 { font-size: 22px !important; line-height: 32px !important; }
  h3 { font-size: 18px !important; line-height: 26px !important; }
  h4 { font-size: 16px !important; line-height: 24px !important; }
  h5 { font-size: 15px !important; line-height: 22px !important; }

  .banner__content h1 {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  .banner { padding: 140px 0 80px !important; }

  /* Hamburger stays in line with logo */
  .primary-navbar .navbar {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 56px !important;
  }

  .secondary--navbar {
    padding: 10px 0 !important;
  }

  .secondary--navbar .open-offcanvas-nav {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }

  .primary-navbar .navbar__logo a img {
    max-width: 100px !important;
    width: 100px !important;
  }

  .footer-two .logo a img {
    max-width: 110px !important;
    width: 110px !important;
  }

  .footer-two .section__content-cta h2 {
    font-size: 15px !important;
  }

  .offer__cta h2 a {
    font-size: 18px !important;
  }

  .next__text-slider-single h2 a,
  .portfolio__text-slider-single h2 a,
  .testimonial__text-slider-single h2 a {
    font-size: 22px !important;
  }
}

/* Small mobile <576 */
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 22px !important; line-height: 32px !important; }
  h2 { font-size: 19px !important; line-height: 28px !important; }
  h3 { font-size: 17px !important; line-height: 24px !important; }

  .banner__content h1 {
    font-size: clamp(18px, 7vw, 24px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  .banner { padding: 120px 0 60px !important; }

  .secondary--navbar {
    padding: 8px 0 !important;
  }

  .secondary--navbar .open-offcanvas-nav {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  .primary-navbar .navbar__logo a img {
    max-width: 90px !important;
    width: 90px !important;
  }

  .primary-navbar .navbar {
    min-height: 52px !important;
    flex-wrap: nowrap !important;
  }

  p, span, li { font-size: 13px !important; line-height: 22px !important; }

  .btn { padding: 10px 18px !important; font-size: 12px !important; }

  .offer__cta h2 a { font-size: 16px !important; }

  .next__text-slider-single h2 a,
  .testimonial__text-slider-single h2 a {
    font-size: 18px !important;
  }

  .section { padding: 70px 0 !important; }

  .footer-two .paragraph p { font-size: 13px !important; }
  .footer-two .section__content-cta h2 { font-size: 13px !important; }
}

/* ============================================================
   PATCH 2 — Hamburger circle fix + Other pages navbar fix
   ============================================================ */

/* ── HAMBURGER: Keep circle dot style, just fix size & position ── */
.secondary--navbar .open-offcanvas-nav {
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 1px solid #414141 !important;
  position: relative !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;   /* remove any negative margin pushing it down */
}

/* The dot inside the circle */
.secondary--navbar .open-offcanvas-nav::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 12px !important;
  height: 12px !important;
  background-color: #414141 !important;
  border-radius: 50% !important;
  transition: background-color 0.3s !important;
}

.secondary--navbar .open-offcanvas-nav:hover {
  border-color: var(--primary-color) !important;
}
.secondary--navbar .open-offcanvas-nav:hover::before {
  background-color: var(--primary-color) !important;
}

/* ── OTHER PAGES NAVBAR (cmn-nav / primary-navbar) ──
   Fix: was position:fixed top:-10px causing it to stick to very top
   Make it sit properly with breathing room ── */

.primary-navbar.cmn-nav {
  position: fixed !important;
  top: 0 !important;          /* was -10px — now flush but correct */
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  background-color: var(--black) !important;
  border-bottom: 1px solid #414141 !important;
  padding: 0 !important;
}

.primary-navbar.cmn-nav .navbar {
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
}

/* Logo on other pages */
.primary-navbar.cmn-nav .navbar__logo a img {
  max-width: 120px !important;
  width: 120px !important;
  height: auto !important;
}

/* Push page content down so it doesn't hide under fixed navbar */
.cmn-banner {
  padding-top: 160px !important;
}

/* Hamburger on other pages (mobile menu trigger) */
.primary-navbar.cmn-nav .open-mobile-menu {
  font-size: 24px !important;
  color: var(--white) !important;
  flex-shrink: 0 !important;
}

/* Navbar menu links on other pages */
.primary-navbar.cmn-nav .navbar__item a,
.primary-navbar.cmn-nav .navbar__item button {
  padding: 24px 16px !important;
  font-size: 13px !important;
}

/* Let's Talk button */
.primary-navbar.cmn-nav .btn--secondary {
  padding: 10px 20px !important;
  font-size: 13px !important;
}

/* Responsive fixes for cmn-nav */
@media (max-width: 991.98px) {
  .primary-navbar.cmn-nav .navbar {
    height: 60px !important;
  }
  .primary-navbar.cmn-nav .navbar__logo a img {
    max-width: 100px !important;
    width: 100px !important;
  }
  .cmn-banner {
    padding-top: 140px !important;
  }
}

@media (max-width: 767.98px) {
  .primary-navbar.cmn-nav .navbar {
    height: 56px !important;
    flex-wrap: nowrap !important;
  }
  .primary-navbar.cmn-nav .navbar__logo a img {
    max-width: 90px !important;
  }
  .cmn-banner {
    padding-top: 120px !important;
  }
}

@media (max-width: 575.98px) {
  .primary-navbar.cmn-nav .navbar {
    height: 52px !important;
  }
  .primary-navbar.cmn-nav .navbar__logo a img {
    max-width: 80px !important;
  }
  .cmn-banner {
    padding-top: 110px !important;
  }
}

/* ============================================================
   PATCH 3 — Hamburger big circle + Footer social + Alignment
   ============================================================ */

/* ── HAMBURGER: Big outer circle, small inner dot — no line ── */
.secondary--navbar .open-offcanvas-nav {
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  border: 1px solid #414141 !important;
  background: transparent !important;
  position: relative !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  /* Remove any pseudo-line from original CSS */
  padding: 0 !important;
}

/* Small dot in the center — circle, no line */
.secondary--navbar .open-offcanvas-nav::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background-color: #414141 !important;
  transition: background-color 0.3s !important;
  /* Override any width:0/height:0 from original that made it look like a line */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Remove any ::after that draws a line */
.secondary--navbar .open-offcanvas-nav::after {
  display: none !important;
  content: none !important;
}

.secondary--navbar .open-offcanvas-nav:hover {
  border-color: var(--primary-color) !important;
}
.secondary--navbar .open-offcanvas-nav:hover::before {
  background-color: var(--primary-color) !important;
}

/* ── FOOTER SOCIAL BUTTONS — reduce size ── */
.footer-two .social {
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.footer-two .social a {
  width: 130px !important;
  min-width: 130px !important;
  height: 52px !important;
  border-radius: 100px !important;
  border: 1px solid #454545 !important;
  font-size: 13px !important;
  padding: 0 12px !important;
  gap: 10px !important;
}

.footer-two .social a span {
  font-size: 13px !important;
  line-height: 1 !important;
}

.footer-two .social a i {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
}

/* ── FOOTER: Location + Phone + Email alignment fix ── */
.footer-two .footer__single-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 20px 0 30px !important;
}

/* Every item in meta: same alignment, same style */
.footer-two .footer__single-meta a,
.footer-two .footer__single-meta > div,
.footer-two .footer__single-meta > div a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--white) !important;
  max-width: 100% !important;
}

/* Icon alignment — same top position for all */
.footer-two .footer__single-meta a i,
.footer-two .footer__single-meta > div a i {
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Phone numbers wrapper — same indent as location */
.footer-two .footer__single-meta > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding-left: 0 !important;
}

/* Flag images in phone links */
.footer-two .footer__single-meta > div a img {
  width: 18px !important;
  height: auto !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

/* Responsive: smaller screens */
@media (max-width: 575.98px) {
  .footer-two .social a {
    width: 110px !important;
    min-width: 110px !important;
    height: 46px !important;
    font-size: 12px !important;
  }
  .footer-two .social a span { font-size: 12px !important; }
  .footer-two .social a i {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .secondary--navbar .open-offcanvas-nav {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
  }
  .secondary--navbar .open-offcanvas-nav::before {
    width: 12px !important;
    height: 12px !important;
  }
}

/* ============================================================
   PATCH 4 — Footer social 3+2 grid + New fancy hamburger
   ============================================================ */

/* ── FOOTER SOCIAL: 3 top, 2 bottom ── */
.footer-two .social {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  justify-items: start !important;
}

/* 4th and 5th items go to second row, centered */
.footer-two .social a:nth-child(4),
.footer-two .social a:nth-child(5) {
  grid-column: auto !important;
}

/* Second row: 2 items centered */
.footer-two .social a:nth-child(4) {
  grid-column: 1 / 2 !important;
}
.footer-two .social a:nth-child(5) {
  grid-column: 2 / 3 !important;
}

.footer-two .social a {
  width: 100% !important;
  min-width: unset !important;
  max-width: 140px !important;
  height: 50px !important;
  border-radius: 100px !important;
  border: 1px solid #454545 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  overflow: hidden !important;
}

.footer-two .social a span {
  font-size: 13px !important;
  line-height: 1 !important;
  transform: translateX(-20px) !important;
  transition: transform 0.3s ease !important;
}

.footer-two .social a:hover span {
  transform: translateX(0) !important;
}

.footer-two .social a i {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  font-size: 13px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-image: linear-gradient(180deg, #343d91 0%, #2b59ee 100%) !important;
  color: #fff !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-20px) !important;
  transition: all 0.3s ease !important;
}

.footer-two .social a:hover i {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
}

@media (max-width: 575.98px) {
  .footer-two .social {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-two .social a:nth-child(4) { grid-column: auto !important; }
  .footer-two .social a:nth-child(5) { grid-column: auto !important; }
  .footer-two .social a { max-width: 100% !important; height: 46px !important; }
}

/* ── FANCY HAMBURGER — animated 3 bars morphing ── */

/* Hide the original ::before dot */
.secondary--navbar .open-offcanvas-nav::before {
  display: none !important;
}
.secondary--navbar .open-offcanvas-nav::after {
  display: none !important;
}

/* The button itself — transparent, no border by default */
.secondary--navbar .open-offcanvas-nav {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1.5px solid #555 !important;
  background: transparent !important;
  position: relative !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: border-color 0.3s !important;
  overflow: visible !important;
}

.secondary--navbar .open-offcanvas-nav:hover {
  border-color: var(--primary-color) !important;
}

/* 3 animated bars via box-shadow trick on a single span */
.secondary--navbar .open-offcanvas-nav .hamburger-bars {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  background: #ccc !important;
  border-radius: 2px !important;
  position: relative !important;
  transition: background 0.3s !important;
}

.secondary--navbar .open-offcanvas-nav .hamburger-bars::before,
.secondary--navbar .open-offcanvas-nav .hamburger-bars::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  width: 20px !important;
  height: 2px !important;
  background: #ccc !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
}

.secondary--navbar .open-offcanvas-nav .hamburger-bars::before {
  top: -6px !important;
  width: 14px !important; /* shorter top bar for style */
}

.secondary--navbar .open-offcanvas-nav .hamburger-bars::after {
  top: 6px !important;
  width: 17px !important; /* medium bottom bar */
}

.secondary--navbar .open-offcanvas-nav:hover .hamburger-bars,
.secondary--navbar .open-offcanvas-nav:hover .hamburger-bars::before,
.secondary--navbar .open-offcanvas-nav:hover .hamburger-bars::after {
  background: var(--primary-color) !important;
}

/* Hover: bars animate */
.secondary--navbar .open-offcanvas-nav:hover .hamburger-bars::before {
  width: 20px !important;
}
.secondary--navbar .open-offcanvas-nav:hover .hamburger-bars::after {
  width: 20px !important;
}

@media (max-width: 575.98px) {
  .secondary--navbar .open-offcanvas-nav {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
  .secondary--navbar .open-offcanvas-nav .hamburger-bars,
  .secondary--navbar .open-offcanvas-nav .hamburger-bars::before,
  .secondary--navbar .open-offcanvas-nav .hamburger-bars::after {
    width: 16px !important;
  }
  .secondary--navbar .open-offcanvas-nav .hamburger-bars::before { width: 11px !important; }
  .secondary--navbar .open-offcanvas-nav .hamburger-bars::after  { width: 13px !important; }
}

/* ============================================================
   PATCH 5 — Projects page: project-sl content h2 font fix
   ============================================================ */

/* Project titles: Branding & Identity, Web Design etc */
.project-sl .content h2 {
  font-size: 28px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

.project-sl .content h2 a {
  font-size: 28px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  writing-mode: vertical-rl !important;
  transform: rotate(-180deg) !important;
  text-transform: capitalize !important;
}

.project-sl .content h2 a:hover {
  color: var(--primary-color) !important;
}

@media (max-width: 991.98px) {
  .project-sl .content h2,
  .project-sl .content h2 a {
    font-size: 22px !important;
  }
}

@media (max-width: 575.98px) {
  .project-sl .content h2,
  .project-sl .content h2 a {
    font-size: 18px !important;
  }
}

/* ============================================================
   PATCH 6 — Contact form success popup
   ============================================================ */
.contact-success-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
.contact-success-overlay.active {
  display: flex;
}
.contact-success-box {
  background: #fff;
  border-radius: 18px;
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: popIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.contact-success-box .success-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, #364090, #4A56B8);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.2rem;
  font-size: 2rem; color: #fff;
}
.contact-success-box h4 {
  font-size: 1.3rem; font-weight: 700;
  color: #1C2855; margin-bottom: 0.6rem;
}
.contact-success-box p {
  font-size: 0.9rem; color: #555; margin-bottom: 1.5rem; line-height: 1.6;
}
.contact-success-box .success-close-btn {
  background: linear-gradient(135deg, #364090, #4A56B8);
  color: #fff; border: none;
  padding: 11px 32px; border-radius: 50px;
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: 0.2s;
}
.contact-success-box .success-close-btn:hover {
  opacity: 0.88; transform: translateY(-1px);
}
/* Error highlight */
.contact-main__form input.field-error,
.contact-main__form textarea.field-error,
.contact-main__form .nice-select.field-error {
  border-bottom: 2px solid #e53935 !important;
}
.field-err-msg {
  color: #e53935; font-size: 0.75rem;
  margin-top: 3px; display: block;
}