/* =======================================================================
   site.css — Gramen Roofing (Astro port)
   Custom overrides + lightweight reveal animations.
   Loaded LAST (after main.css) so it wins the cascade.
   Replaces: animate.css (60KB), WOW.js, and the inline button-ripple JS.
   ======================================================================= */

/* ---- Extra design tokens (brand vars already set by main.css :root) ---- */
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-card: 0 10px 40px rgba(16, 32, 57, 0.08);
  --space-section: 120px;
  --space-section-md: 100px;
  --space-section-sm: 80px;
}

/* ---- Preloader: ensure it sits above everything and fades cleanly ---- */
#preloader {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =======================================================================
   Modern entrance reveal (WOW.js / animate.css replacement, overhauled)
   Transition-based rise-and-fade on a premium easeOut curve. reveal.ts adds
   `.is-revealing` (hidden) only when JS runs, then `.is-revealed` on scroll —
   with a small per-item stagger for grid cascades. No-JS / reduced-motion =
   everything visible.
   Curve: cubic-bezier(.22,1,.36,1) "easeOutQuint" — smooth, decisive settle.
   ======================================================================= */
.wow.is-revealing,
.reveal-item.is-revealing {
  opacity: 0;
  transform: translateY(26px);
  will-change: opacity, transform;
}
/* subtle directional nuance for the template's left/right/down intents */
.wow.fadeInLeft.is-revealing { transform: translate(-30px, 0); }
.wow.fadeInRight.is-revealing { transform: translate(30px, 0); }
.wow.fadeInDown.is-revealing { transform: translateY(-26px); }
.wow.slideInLeft.is-revealing { transform: translateX(-46px); }
.wow.fadeIn.is-revealing { transform: none; }

.wow.is-revealed,
.reveal-item.is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: auto;
}

/* Respect users who prefer reduced motion — show everything, no movement.
   Also covers the banner's main.css .img-custom-anim-* (opacity:0 by default). */
@media (prefers-reduced-motion: reduce) {
  .wow.is-revealing,
  .wow.is-revealed,
  .reveal-item.is-revealing,
  .reveal-item.is-revealed,
  .img-custom-anim-left,
  .img-custom-anim-right,
  .img-custom-anim-top,
  .img-custom-anim-bottom {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* =======================================================================
   Misc fidelity fixes
   ======================================================================= */
/* The template baked a hardcoded ripple <span style="top:147px;left:108px">
   into every button. We render a clean <span> and position it with JS
   (buttonRipple.ts). Reset any stray inline coords gracefully. */
.btn-hover { position: relative; overflow: hidden; }

/* Mobile offcanvas nav (replaces meanmenu) submenu toggle */
.mobile-menu .submenu {
  display: none;
}
.mobile-menu li.submenu-open > .submenu {
  display: block;
}
.mobile-menu .menu-expand {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.mobile-menu li { position: relative; }

/* Offcanvas mobile menu link styling (replaces meanmenu.css, which we dropped).
   The offcanvas panel is #191919, so links must be light. */
.offcanvas__info .mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.offcanvas__info .mobile-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.offcanvas__info .mobile-menu li a {
  display: block;
  color: #fff;
  padding: 12px 0;
  font-family: var(--primary-font, 'Inter', sans-serif);
  font-weight: 500;
  font-size: 16px;
  text-transform: capitalize;
}
.offcanvas__info .mobile-menu li a:hover {
  color: var(--theme-color, #ea1826);
}
.offcanvas__info .mobile-menu .submenu {
  padding-left: 15px;
}
.offcanvas__info .mobile-menu .submenu li a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}
.offcanvas__info .mobile-menu .menu-expand {
  color: #fff;
}
.offcanvas__info .mobile-menu .menu-expand:hover {
  color: var(--theme-color, #ea1826);
}

/* Offcanvas contact block */
.offcanvas__contact h4 {
  color: #fff;
  font-size: 20px;
  margin-bottom: 18px;
}
.offcanvas__contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.offcanvas__contact ul li {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.offcanvas__contact-icon {
  margin-right: 12px;
}
.offcanvas__contact-icon i {
  color: var(--theme-color, #ea1826);
  font-size: 16px;
}
.offcanvas__contact-text,
.offcanvas__contact-text a {
  color: rgba(255, 255, 255, 0.75);
}
.offcanvas__contact-text a:hover {
  color: var(--theme-color, #ea1826);
}
.offcanvas__socials span {
  margin-right: 14px;
}
.offcanvas__socials span a {
  color: #fff;
  font-size: 15px;
}
.offcanvas__socials span a:hover {
  color: var(--theme-color, #ea1826);
}

/* =======================================================================
   Image-slot normalisation
   The template relied on its demo images having specific aspect ratios.
   Real client photos have different ratios, which broke the layout, so we
   force every content image to FILL its slot (object-fit:cover) at the
   template's original proportions. Now any photo matches the demo layout.
   ======================================================================= */

/* Project cards — slider + grid (template slot 450×499) */
.project-slider-two-box figure.image,
.project-box figure.image {
  aspect-ratio: 450 / 499;
  overflow: hidden;
}
.project-slider-two-box figure.image img,
.project-box figure.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Service-tab image (template slot 324×380) */
.service-tab-content figure.image {
  aspect-ratio: 324 / 380;
  overflow: hidden;
}
.service-tab-content figure.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* About-two images. The main image keeps the template's rounded top-right
   corner; the small image is a FIXED-SIZE framed photo overlapping the
   bottom-right (the earlier object-fit rule left it width-less → a thin strip). */
.about-2-image-area .main-image {
  aspect-ratio: 452 / 548;
  overflow: hidden;
  border-radius: 0 100px 0 0;
}
.about-2-image-area .main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 100px 0 0;
}
.about-2-image-area .small-image {
  width: 240px;
  height: 255px;
  overflow: hidden;
  border-radius: 6px;
}
.about-2-image-area .small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Blog cards (template slot ~400×315) */
.blog-style-two .blog-image,
.blog-style-one .blog-image {
  aspect-ratio: 400 / 315;
  overflow: hidden;
  display: block;
}
.blog-style-two .blog-image img,
.blog-style-one .blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Help-form CTA image — fill the left column */
.help-form-section .image-area {
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.help-form-section .image-area img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

/* Footer gallery thumbnails — square */
.footer-gallery a {
  overflow: hidden;
}
.footer-gallery a img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* =======================================================================
   Lightbox (Magnific Popup replacement) — used by .popup-image / .popup-video
   ======================================================================= */
.gx-lightbox {
  border: none;
  background: transparent;
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  overflow: visible;
}
.gx-lightbox::backdrop {
  background: rgba(8, 14, 26, 0.88);
  backdrop-filter: blur(2px);
}
.gx-lightbox__content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gx-lightbox__content img {
  max-width: 88vw;
  max-height: 88vh;
  border-radius: var(--radius-sm);
  display: block;
}
.gx-lightbox__video {
  width: min(90vw, 960px);
  aspect-ratio: 16 / 9;
}
.gx-lightbox__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-sm);
}
.gx-lightbox__close,
.gx-lightbox__nav {
  position: fixed;
  top: 24px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--theme-color, #ea1826);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.gx-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}
.gx-lightbox__prev { left: 28px; right: auto; }
.gx-lightbox__next { right: 28px; }
.gx-lightbox__nav[hidden] { display: none; }


/* =======================================================================
   КАКВО ПРЕДЛАГАМЕ — Service Tabs: Editorial Premium elevation
   Scoped under .service-tab-section. Appended last → wins over main.css.
   Card is WHITE (#fff): the section is NOT .is-dark. Navy text, red accents.
   Cohesive with About-2: object-fit cover, rounded top-right corner, red+navy badge.
   ======================================================================= */

/* ---- LEFT nav tabs: radius, depth, hover slide, red activity rail ---- */
.service-tab-section .service-tab-btn-area ul .nav-link {
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(8, 14, 26, 0.16);
  transition: transform .28s cubic-bezier(.2,.7,.2,1),
              box-shadow .28s ease, background-color .2s ease, color .2s ease;
  overflow: visible;
  padding-right: 52px; /* reserve room for the active-tab arrow indicator */
}
/* Hide the template's pointed chevron pseudo (it looked clipped/glitchy). */
.service-tab-section .service-tab-btn-area ul .nav-link:before {
  display: none !important;
}
.service-tab-section .service-tab-btn-area ul .nav-link .icon-box {
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.service-tab-section .service-tab-btn-area ul .nav-link:not(.active):hover {
  transform: translateX(6px);
  box-shadow: 0 12px 30px rgba(234, 24, 38, 0.16);
}
.service-tab-section .service-tab-btn-area ul .nav-link:not(.active):hover .icon-box {
  transform: translateX(3px) scale(1.05);
}
.service-tab-section .service-tab-btn-area ul .nav-link.active {
  transform: translateX(8px);
  box-shadow: 0 14px 32px rgba(234, 24, 38, 0.30);
}
/* Active indicator: a clean chevron-arrow icon in a soft white disc on the
   right (replaces the white rail). Sits in the reserved right padding. */
.service-tab-section .service-tab-btn-area ul .nav-link.active::after {
  content: "\e901"; /* icomoon arrow-right-angle */
  font-family: 'icomoon';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  z-index: 2;
}

/* ---- WHITE content card: rounded, layered shadow, hairline border ---- */
.service-tab-section .service-tab-content {
  border-radius: 16px;
  border: 1px solid rgba(16, 32, 57, 0.06);
  box-shadow:
    0 2px 6px rgba(8, 14, 26, 0.06),
    0 24px 60px rgba(8, 14, 26, 0.22);
  align-items: stretch;
}
/* Remove the decorative bg-shape that bled as stray "lines" above the card. */
.service-tab-section .service-tab-content .tab-bg-shape {
  display: none;
}

/* ---- PHOTO: fixed-aspect object-fit cover, About rounded top-right corner ---- */
.service-tab-section .service-tab-content figure.image {
  position: relative;
  margin: 0;
  aspect-ratio: 324 / 380;
  overflow: hidden;
  border-radius: 12px;
  border-top-right-radius: 56px;
  box-shadow: inset 0 0 0 1px rgba(16, 32, 57, 0.08);
}
.service-tab-section .service-tab-content figure.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  border-top-right-radius: 56px;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.service-tab-section .service-tab-content:hover figure.image img {
  transform: scale(1.04);
}

/* ---- SIGNATURE: navy price badge floating top-right of the photo ---- */
.service-tab-section .service-price-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 14px 16px 12px;
  background: var(--theme-color-1, #102039);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(8, 14, 26, 0.35);
  line-height: 1.05;
  text-align: left;
}
.service-tab-section .service-price-tag::before {
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--theme-color, #EA1826);
}
.service-tab-section .service-price-tag small {
  font-family: var(--primary-font, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.service-tab-section .service-price-tag strong {
  font-family: var(--primary-font, 'Inter', sans-serif);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.service-tab-section .service-price-tag em {
  font-family: var(--secondary-font, 'Roboto', sans-serif);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
.service-tab-section .service-price-tag strong.price-quote {
  font-size: 16px;
  font-weight: 700;
  max-width: 132px;
  line-height: 1.25;
}

/* ---- HEADLINE scale + red accent rule ---- */
.service-tab-section .service-tab-content .content h4 {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}
.service-tab-section .service-tab-content .content .title-rule {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--theme-color, #EA1826);
  margin: 14px 0 4px;
}

/* ---- CHECKLIST: 2-column, circular red check chips ---- */
.service-tab-section .service-tab-content ul.tab-list-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 26px;
  row-gap: 12px;
  margin: 8px 0 4px;
  padding: 0;
}
.service-tab-section .service-tab-content ul.tab-list-content li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 14.5px;
  line-height: 22px;
  font-weight: 600;
  color: var(--theme-color-1, #102039);
}
.service-tab-section .service-tab-content ul.tab-list-content li:before {
  content: "\e921";
  font-family: 'icomoon';
  position: static;
  top: auto;
  left: auto;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--theme-color, #EA1826);
  background: rgba(234, 24, 38, 0.10);
  border-radius: 50%;
}

/* ---- CTA row: button + inline price at decision altitude ---- */
.service-tab-section .service-tab-content .content .tab-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.service-tab-section .tab-price-inline {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--primary-font, 'Inter', sans-serif);
  font-size: 17px;
  font-weight: 800;
  color: var(--theme-color-1, #102039);
}
.service-tab-section .tab-price-inline > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--theme-color, #EA1826);
}

/* ======================  RESPONSIVE  ====================== */
@media only screen and (max-width: 991px) {
  .service-tab-section .service-tab-btn-area ul .nav-link.active {
    transform: translateX(4px);
  }
}
@media only screen and (max-width: 767px) {
  .service-tab-section .service-tab-btn-area ul .nav-link,
  .service-tab-section .service-tab-btn-area ul .nav-link.active,
  .service-tab-section .service-tab-btn-area ul .nav-link:not(.active):hover {
    transform: none;
  }
  .service-tab-section .service-tab-content {
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(8, 14, 26, 0.25);
  }
  .service-tab-section .service-tab-content figure.image,
  .service-tab-section .service-tab-content figure.image img {
    aspect-ratio: 16 / 10;
    border-top-right-radius: 40px;
  }
  .service-tab-section .service-price-tag {
    top: 12px;
    left: 12px;
    padding: 10px 12px 9px;
  }
  .service-tab-section .service-price-tag strong { font-size: 20px; }
  .service-tab-section .service-tab-content .content h4 {
    font-size: 24px;
    line-height: 32px;
  }
  .service-tab-section .service-tab-content ul.tab-list-content {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .service-tab-section .service-tab-content .content .tab-cta-row {
    gap: 16px;
    margin-top: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-tab-section .service-tab-btn-area ul .nav-link,
  .service-tab-section .service-tab-btn-area ul .nav-link .icon-box,
  .service-tab-section .service-tab-content figure.image img {
    transition: none;
  }
  .service-tab-section .service-tab-content:hover figure.image img { transform: none; }
}

/* =======================================================================
   "Имате нужда от ремонт?" — CTA band (redesign of .help-form-section).
   New scoped class .help-cta-section so the template's quirky absolute
   image-cutout CSS no longer applies. Darkened roofing backdrop + headline
   + phone on the left, white quick-quote card on the right.
   ======================================================================= */
.help-cta-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.help-cta-section .help-cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: left center;
  z-index: -2;
}
.help-cta-section .help-cta-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(16, 32, 57, 0.95) 0%,
    rgba(16, 32, 57, 0.9) 42%,
    rgba(16, 32, 57, 0.62) 100%
  );
}
.help-cta-section .small-container {
  padding-top: 88px;
  padding-bottom: 88px;
}
.help-cta-section .help-cta-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

/* ---- LEFT: headline + phone ---- */
.help-cta-section .help-cta-text { color: #fff; }
.help-cta-section .help-cta-eyebrow {
  display: inline-block;
  color: #fff;
  font-family: var(--primary-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 18px;
  background: var(--theme-color, #ea1826);
  border-radius: 50px;
  margin-bottom: 22px;
}
.help-cta-section .help-cta-text h3 {
  color: #fff;
  font-size: 40px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.help-cta-section .help-cta-text p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 28px;
  margin-bottom: 30px;
  max-width: 520px;
}
.help-cta-section .help-cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.help-cta-section .help-cta-phone .ic {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--theme-color, #ea1826);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  transition: transform 0.25s ease;
}
.help-cta-section .help-cta-phone:hover .ic { transform: scale(1.06); }
.help-cta-section .help-cta-phone .tx {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.help-cta-section .help-cta-phone .tx small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}
.help-cta-section .help-cta-phone .tx strong {
  color: #fff;
  font-family: var(--primary-font, 'Inter', sans-serif);
  font-size: 24px;
  font-weight: 800;
  transition: color 0.2s ease;
}
.help-cta-section .help-cta-phone:hover .tx strong { color: var(--theme-color, #ea1826); }

/* ---- RIGHT: white quick-quote card ---- */
.help-cta-section .help-cta-form {
  background: #fff;
  border-radius: 18px;
  padding: 38px;
  box-shadow: 0 30px 70px rgba(8, 14, 26, 0.4);
}
.help-cta-section .help-cta-form h4 {
  color: var(--theme-color-1, #102039);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 22px;
}
.help-cta-section .help-cta-form .hf-field { margin-bottom: 14px; }
.help-cta-section .help-cta-form input {
  width: 100%;
  height: 54px;
  border: 1px solid rgba(16, 32, 57, 0.14);
  border-radius: 10px;
  padding: 0 18px;
  font-family: var(--secondary-font, 'Roboto', sans-serif);
  font-size: 15px;
  color: var(--theme-color-1, #102039);
  background: #f6f7f9;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.help-cta-section .help-cta-form input::placeholder { color: #9aa3b0; }
.help-cta-section .help-cta-form input:focus {
  outline: none;
  border-color: var(--theme-color, #ea1826);
  background: #fff;
}
.help-cta-section .help-cta-form .hf-submit {
  width: 100%;
  justify-content: center;
  border-radius: 10px;
  margin-top: 8px;
}

/* ---- responsive ---- */
@media only screen and (max-width: 991px) {
  .help-cta-section .help-cta-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .help-cta-section .small-container {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .help-cta-section .help-cta-overlay {
    background: linear-gradient(180deg, rgba(16, 32, 57, 0.93), rgba(16, 32, 57, 0.93));
  }
  .help-cta-section .help-cta-text h3 { font-size: 30px; }
}
@media only screen and (max-width: 575px) {
  .help-cta-section .help-cta-form { padding: 24px; }
  .help-cta-section .help-cta-text h3 { font-size: 26px; }
  .help-cta-section .help-cta-phone .tx strong { font-size: 21px; }
}

/* =======================================================================
   Global modern-rounding polish
   Unify buttons, cards, inputs and card-images to the rounded aesthetic of
   the CTA section (buttons 10px, cards 16px, inputs 10px). Radii + a few
   overflow:hidden only — no layout/spacing changes, nothing structural.
   Icon-circle buttons (search, slider nav, back-to-top, phone chips) are NOT
   targeted, so they stay round.
   ======================================================================= */

/* ---- Buttons: consistent modern rounded rectangle (was 50px pill / blob) -- */
.primary-btn-1,
.primary-btn-2,
.primary-btn-3,
.primary-btn-4,
.primary-btn-5 {
  border-radius: 10px !important;
}

/* ---- Form inputs / selects / textareas: 10px ---- */
.contact__from-input input,
.contact__from-input textarea,
.contact__select select,
.help-form-area input,
.df-search-input input,
.contact-form input,
.contact-form textarea,
.blog-sidebar input,
.comment-form input,
.comment-form textarea {
  border-radius: 10px !important;
}

/* ---- Feature cards (were sharp; accent/halftone clip to the rounded corner) -- */
.features-box-area {
  border-radius: 16px;
  overflow: hidden;
}

/* ---- Project cards (slider + grid) ---- */
.project-slider-two-box,
.project-box {
  border-radius: 16px;
  overflow: hidden;
}

/* ---- Blog cards ---- */
.blog-style-one,
.blog-style-two {
  border-radius: 16px;
  overflow: hidden;
}

/* ---- Appointment form card (testimonials section) ---- */
.contact-from {
  border-radius: 16px;
}

/* ---- Counter / work-process cards (only rounds if they carry a background) -- */
.icon-box-counter-area,
.work-process-box {
  border-radius: 16px;
}

/* ---- Contact info cards + map (contact page) ---- */
.contact-info-card,
.contact-map iframe,
.contact-map {
  border-radius: 16px;
  overflow: hidden;
}

/* =======================================================================
   Header navigation interaction polish
   The template applies a blanket `transition: all .3s` to a/li/span/etc which
   makes header hover + the dropdown feel sluggish and glitchy. Replace it with
   tight, fast, intentional transitions and a clean modern dropdown:
   snappy fade + subtle slide, rounded bottom, and an invisible hover-bridge so
   the cursor never hits a dead zone moving from the link into the panel (which
   is what made the menu "hide itself" — especially once the header is sticky).
   ======================================================================= */

/* nav links — quick colour transition only (not "all") + animated underline */
.main-menu nav ul li > a {
  transition: color 0.2s ease;
}
/* underline that wipes in from left to right on hover / active.
   Scoped to TOP-LEVEL items only (direct children of the nav ul), so submenu
   links don't get it. */
.main-menu nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 41px;
  width: 100%;
  height: 2px;
  background: var(--theme-color, #ea1826);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.main-menu nav > ul > li:hover > a::after,
.main-menu nav > ul > li.active > a::after {
  transform: scaleX(1);
}
/* the inner-page header uses 40px link padding → sit the underline a touch higher */
.header-area:not(.header-style-two) .main-menu nav > ul > li > a::after {
  bottom: 36px;
}

/* dropdown panel — snappy, modern, rounded */
.main-menu nav ul li .submenu {
  margin-top: 0;
  padding: 0;
  border-radius: 0 0 12px 12px;
  transform: translateY(7px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}
.main-menu nav ul li:hover > .submenu {
  transform: translateY(0);
}

/* invisible hover-bridge: spans the link's bottom padding so moving the cursor
   from the trigger into the menu never crosses an un-hovered gap. Exists only
   while the menu is rendered (it's a child of the panel). */
.main-menu nav ul li.has-dropdown > .submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  height: 22px;
}

/* submenu items — fast, tactile hover with a subtle nudge */
.main-menu nav ul li .submenu li a {
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    padding-inline-start 0.16s ease;
}
.main-menu nav ul li .submenu li:hover > a {
  padding-inline-start: 30px;
}
/* round the last item's hover background to match the panel's rounded corners */
.main-menu nav ul li .submenu li:last-child > a {
  border-radius: 0 0 12px 12px;
}

/* header action buttons (GET A QUOTE / search / call) — snappy, no laggy "all" */
.header-search .search-icon,
.header-link-1 .icon,
.sidebar__toggle .bar-icon {
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

/* ---- Header dropdown clipping fix ----
   The template sets `.header-area { overflow-x: clip }` to guard against
   horizontal overflow, but `overflow-x: clip` also clips the Y axis, so the
   hover dropdown got cut off at the header's bottom edge. The header has no
   horizontally-overflowing content here, so let it overflow visibly and the
   submenu can escape. */
.header-area {
  overflow: visible !important;
}

/* ---- Button arrow: a single bold chevron (replaces the old "| ->" pipe+arrow) -- */
.btn-arrow {
  margin-inline-start: 9px;
  font-size: 1.15em;
  font-weight: 900; /* bold (fa-solid is 900 already; explicit for safety) */
  vertical-align: middle;
  position: relative;
  z-index: 1;
}
.read-more-link .btn-arrow {
  margin-inline-start: 7px;
}

/* ---- Hero trust badge (replaces the client-avatar group) ---- */
.banner-trust {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.banner-trust .banner-stars {
  display: inline-flex;
  gap: 4px;
  color: #ffb400;
  font-size: 17px;
}
.banner-trust .banner-trust-text {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--secondary-font, 'Roboto', sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  max-width: 220px;
}
.banner-trust .banner-trust-text strong {
  color: #fff;
  font-family: var(--primary-font, 'Inter', sans-serif);
  font-weight: 800;
}

/* =======================================================================
   ПОЛЕЗНО / Полезни статии — Modern blog card (grid variant, 2-up)
   Scoped to .blog-modern-grid .blog-card-modern so ONLY this teaser is
   affected — never the standard/featured/text variants or other pages.
   Fixes: image too tall (400/315 -> 16/10), content had no padding/bg
   (template padded .blog-content; our markup uses .blog-content-area), weak
   hierarchy, no card definition.
   ======================================================================= */
.blog-modern-grid .blog-card-modern {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(16, 32, 57, 0.07);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(16, 32, 57, 0.06);
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              box-shadow .35s cubic-bezier(.22,1,.36,1),
              border-color .35s ease;
  will-change: transform;
}
.blog-modern-grid .blog-card-modern:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(16, 32, 57, 0.14);
  border-color: rgba(234, 24, 38, 0.18);
}

/* Image: calmer 16/10 landscape band + slow zoom on hover */
.blog-modern-grid .blog-card-modern .blog-image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0;
}
.blog-modern-grid .blog-card-modern .blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.blog-modern-grid .blog-card-modern:hover .blog-image img {
  transform: scale(1.06);
}
.blog-modern-grid .blog-card-modern .blog-image::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgba(16,32,57,.34), transparent);
  pointer-events: none;
}

/* Floating red DATE CHIP (signature) — date lifted onto image seam */
.blog-modern-grid .blog-card-modern .post-meta {
  display: flex;
  align-items: center;
}
.blog-modern-grid .blog-card-modern .meta-date {
  position: absolute;
  left: 24px;
  top: -17px;            /* sit on the image/content seam, NOT at the bottom
                            (bottom:18px landed it on top of the read-more) */
  bottom: auto;
  z-index: 3;
}
.blog-modern-grid .blog-card-modern .meta-date a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: var(--theme-color, #EA1826);
  color: #fff;
  font-family: var(--secondary-font, 'Roboto', sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(234, 24, 38, 0.35);
  white-space: nowrap;
}
.blog-modern-grid .blog-card-modern .meta-date a i {
  color: #fff;
  margin: 0;
  font-size: 12px;
}

/* Content block: real padding + structure (the -area bug fix) */
.blog-modern-grid .blog-card-modern .blog-content-area {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: none;
  padding: 26px 28px 28px;
}

/* author meta row (date chip is pulled out above) */
.blog-modern-grid .blog-card-modern .post-meta .p-relative:not(.meta-date) {
  font-family: var(--secondary-font, 'Roboto', sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: #8a93a3;
}
.blog-modern-grid .blog-card-modern .post-meta .p-relative:not(.meta-date) a { color: inherit; }
.blog-modern-grid .blog-card-modern .post-meta .p-relative:not(.meta-date) i {
  color: var(--theme-color, #EA1826);
  margin-right: 7px;
}

/* title — bold navy, 2-line clamp, red underline-wipe on hover */
.blog-modern-grid .blog-card-modern .blog-title {
  margin: 12px 0 10px;
  font-family: var(--primary-font, 'Inter', sans-serif);
  font-size: 21px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-modern-grid .blog-card-modern .blog-title a {
  color: var(--theme-color-1, #102039);
  background-image: linear-gradient(var(--theme-color,#EA1826), var(--theme-color,#EA1826));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color .25s ease, background-size .35s cubic-bezier(.22,1,.36,1);
}
.blog-modern-grid .blog-card-modern:hover .blog-title a,
.blog-modern-grid .blog-card-modern .blog-title a:hover {
  color: var(--theme-color, #EA1826);
  background-size: 100% 2px;
}

/* excerpt — tidy, 2-line clamp so both cards balance */
.blog-modern-grid .blog-card-modern .blog-text {
  margin: 0 0 22px;
  color: #6c7382;
  font-family: var(--secondary-font, 'Roboto', sans-serif);
  font-size: 15px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* read-more — pinned to bottom (matched pair), red + chevron nudge */
.blog-modern-grid .blog-card-modern .read-more-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--theme-color, #EA1826);
  font-family: var(--primary-font, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
.blog-modern-grid .blog-card-modern .read-more-link .btn-arrow {
  font-size: 12px;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.blog-modern-grid .blog-card-modern .read-more-link:hover { color: var(--theme-color-1, #102039); }
.blog-modern-grid .blog-card-modern .read-more-link:hover .btn-arrow { transform: translateX(4px); }

.blog-modern-grid .blog-card-modern hr { display: none; }

@media (max-width: 991px) {
  .blog-modern-grid .blog-card-modern .blog-image { aspect-ratio: 16 / 10; }
  .blog-modern-grid .blog-card-modern .blog-content-area { padding: 24px 24px 26px; }
  .blog-modern-grid .blog-card-modern .blog-title { font-size: 20px; }
}
@media (max-width: 767px) {
  .blog-modern-grid .blog-card-modern .blog-image { aspect-ratio: 3 / 2; }
  .blog-modern-grid .blog-card-modern .blog-content-area { padding: 22px 20px 24px; }
  .blog-modern-grid .blog-card-modern .blog-title { font-size: 19px; }
  .blog-modern-grid .blog-card-modern .meta-date { left: 18px; top: -16px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-modern-grid .blog-card-modern,
  .blog-modern-grid .blog-card-modern .blog-image img,
  .blog-modern-grid .blog-card-modern .read-more-link .btn-arrow { transition: none; }
  .blog-modern-grid .blog-card-modern:hover { transform: none; }
  .blog-modern-grid .blog-card-modern:hover .blog-image img { transform: none; }
}

/* =======================================================================
   Sticky header — smooth slide-down + a brand-fitting background.
   The template's .sticky rule animated with animate.css's `fadeInDown`, which
   we dropped — so the header just snapped in ("aggressive pop up"). Define our
   own smooth slide, and replace the ugly black home-header background with a
   navy glass that matches the brand.
   ======================================================================= */
.sticky {
  animation: gx-sticky-down 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gx-sticky-down {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Home (transparent) header: navy glass instead of black #151515 */
.header-style-two.sticky {
  background: rgba(16, 32, 57, 0.94);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  box-shadow: 0 8px 30px rgba(8, 14, 26, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .sticky { animation: none; }
}