/* Hallmark · macrostructure: Multi-page service hub · tone: professional, direct · anchor hue: Fercho's blue
 * adaptation: site-wide brand palette + real Fercho's imagery · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
:root {
  --color-ink: oklch(20% 0.018 70);
  --color-paper: oklch(97% 0.01 84);
  --color-accent: oklch(47.58% 0.0767 255.11);
  --color-brand-blue: oklch(47.58% 0.0767 255.11);
  --color-brand-blue-dark: oklch(39% 0.07 255.11);
  --color-accent-ink: oklch(97% 0.01 84);
  --color-footer-copy: oklch(93% 0.018 255.11);
  --color-footer-border: oklch(97% 0.01 84 / 0.28);
  --color-success: oklch(42% 0.11 155);
  --color-focus: oklch(82% 0.14 82);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 220ms;
}

html,
body {
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
}

#about,
#services,
#projects,
#reviews,
#contact {
  scroll-margin-top: 7rem;
}

.header-top-left .logo img,
.mobile-menu .nav-logo img,
.footer-logo img {
  width: 12rem;
  height: auto;
  max-height: 5rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.sticky-header .logo img {
  width: 8.5rem;
  height: 3.75rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.sticky-header,
.fixed-header .sticky-header {
  background: var(--color-brand-blue);
}

.sticky-header .main-menu .navigation > li > a,
.sticky-header .main-menu .navigation > li.current > a,
.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu.style2 .navigation > li.current > a {
  color: var(--color-paper);
}

.header-contact-info li:nth-child(2) h4 a,
.footer-contact-info li:nth-child(2) a {
  overflow-wrap: anywhere;
}

.main-slider .image-layer::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, oklch(17% 0.018 70 / 0.76), oklch(17% 0.018 70 / 0.08));
  content: "";
}

.main-slider .content h3,
.main-slider .content .big-title h2 {
  position: relative;
  z-index: 2;
  color: var(--color-paper);
  text-shadow: 0 2px 24px oklch(12% 0.018 70 / 0.28);
}

.main-slider .content .btns-box {
  position: relative;
  z-index: 2;
}

.single-project-style1 .img-holder::before {
  background: linear-gradient(to bottom, transparent 0%, transparent 22%, color-mix(in oklch, var(--color-brand-blue) 37%, transparent) 51%, var(--color-brand-blue) 100%);
}

.about-style1-image-box .main-image > img {
  display: block;
  width: 100%;
  aspect-ratio: 115 / 117;
  object-fit: cover;
}

.single-featured-style1 .img-holder > img {
  display: block;
  width: 100%;
  aspect-ratio: 37 / 40;
  object-fit: cover;
}

.testimonial-style2-image-box > img {
  display: block;
  width: 58.125rem;
  max-width: none;
  aspect-ratio: 93 / 70;
  object-fit: cover;
}

.interior-design-area::before,
.discover-area::before {
  background-color: oklch(18% 0.018 70 / 0.76);
}

.team-tab-content .img-holder img,
.single-project-style1 .img-holder > img,
.single-service-style1 .img-holder img,
.single-blog-style1 .img-holder img,
.discover-image-box img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.team-tab-content .img-holder img {
  aspect-ratio: 27 / 20;
}

.single-project-style1 .img-holder > img {
  aspect-ratio: 9 / 10;
}

#projects .project-style1-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

#projects .project-style1-content > li {
  width: 18.75rem;
  max-width: 18.75rem;
  flex: 0 1 18.75rem;
}

#projects .single-project-style1 .img-holder > img {
  aspect-ratio: 60 / 67;
}

.single-service-style1 .img-holder img {
  aspect-ratio: 33 / 23;
}

.single-blog-style1 .img-holder img {
  aspect-ratio: 37 / 28;
}

.discover-image-box img {
  aspect-ratio: 1;
}

.v2-template-discover .discover-image-box .image2 {
  top: 1rem;
  right: 0;
  z-index: 3;
  width: 10rem;
  padding: 0.75rem;
  border-radius: 0.4375rem;
  background: var(--color-paper);
}

.v2-template-discover .discover-image-box .image2 img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
}

.single-testimonial-style1 .client-info .image-box {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-paper);
}

.single-testimonial-style1 .client-info .image-box img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

.estimate-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.375rem;
  align-items: center;
  min-height: 4.375rem;
  overflow: hidden;
  padding-inline-start: 2rem;
  border: 1px solid var(--color-footer-border);
  border-radius: 3rem;
  background: var(--color-paper);
}

.estimate-link > a:first-child {
  overflow: hidden;
  color: var(--color-brand-blue-dark);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.estimate-go {
  display: grid;
  width: 4.375rem;
  height: 4.375rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-brand-blue-dark);
  color: var(--color-paper);
  font-weight: 800;
  text-transform: uppercase;
}

.v2-social-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: currentColor;
}

.header-social-link ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.mobile-menu .social-links li a {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.footer-area::before {
  background-color: var(--color-brand-blue);
}

.footer-area .layer-outer .shape1 {
  opacity: 0.06;
  filter: brightness(0) invert(1);
}

.footer-area .layer-outer .shape2 {
  opacity: 0.14;
  filter: brightness(0) invert(1);
}

.footer-area .layer-outer .shape3 {
  display: none;
}

.footer-area .single-footer-widget .our-company-info .text p,
.footer-area .footer-widget-links1 li a,
.footer-area .footer-widget-links2 li a,
.footer-area .subscribe-box .text p {
  color: var(--color-footer-copy);
}

.footer-area .single-footer-widget .title h3,
.footer-area .single-footer-widget .footer-contact-info ul li .title p,
.footer-area .single-footer-widget .footer-contact-info ul li .title p a,
.footer-area .thm-clr {
  color: var(--color-paper);
}

.footer-area .single-footer-widget .title h3::before {
  background: var(--color-paper);
  opacity: 0.65;
}

.footer-area .estimate-link {
  border-color: var(--color-paper);
  background: var(--color-paper);
}

.footer-area .estimate-link > a:first-child {
  color: var(--color-brand-blue-dark);
}

.footer-area .estimate-go,
.footer-area .estimate-go:hover {
  background: var(--color-brand-blue-dark);
  color: var(--color-paper);
}

.footer-area .subscribe-box .header-social-link ul li a {
  background: var(--color-paper);
  color: var(--color-brand-blue-dark);
}

.footer-area .subscribe-box .header-social-link ul li a:hover {
  background: var(--color-brand-blue-dark);
  color: var(--color-paper);
}

.footer-bottom {
  border-top-color: var(--color-footer-border);
  background: var(--color-brand-blue-dark);
}

.footer-bottom .copyright-text p,
.footer-bottom .copyright-text p a {
  color: var(--color-paper);
}

a,
button,
.tab-btn {
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

a:focus-visible,
button:focus-visible,
.tab-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 * component: floating contact · genre: editorial · theme: Fercho's brand
 */
.v2-contact-rail {
  position: fixed;
  z-index: 9998;
  inset: 0;
  pointer-events: none;
}

.v2-contact-rail__qr {
  position: fixed;
  inset-inline-start: max(1rem, env(safe-area-inset-left));
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  width: 6.25rem;
  pointer-events: auto;
}

.v2-contact-rail__qr img {
  display: block;
  width: 100%;
  height: auto;
}

.v2-contact-rail__whatsapp {
  position: fixed;
  inset-inline-end: max(1rem, env(safe-area-inset-right));
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  width: 3.75rem;
  height: 3.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-paper);
  border-radius: 999px;
  background: var(--color-brand-blue);
  color: var(--color-paper);
  box-shadow: 0 0.25rem 1.5rem oklch(15% 0.02 250 / 0.28);
  pointer-events: auto;
}

.v2-contact-rail__whatsapp::before,
.v2-contact-rail__whatsapp::after {
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-brand-blue);
  border-radius: inherit;
  content: "";
  animation: v2-whatsapp-shockwave 2.4s var(--ease-out) infinite;
  pointer-events: none;
}

.v2-contact-rail__whatsapp::after {
  animation-delay: 1.2s;
}

.v2-contact-rail__whatsapp i {
  font-size: 1.5rem;
}

@keyframes v2-whatsapp-shockwave {
  0% { opacity: 0.58; transform: scale(1); }
  72%, 100% { opacity: 0; transform: scale(1.72); }
}

@media (hover: hover) and (pointer: fine) {
  .v2-contact-rail__qr:hover,
  .v2-contact-rail__whatsapp:hover {
    transform: translateY(-0.25rem);
  }

  .v2-contact-rail__whatsapp:hover {
    background: var(--color-brand-blue-dark);
  }
}

@media (min-width: 62rem) {
  .main-header .header .main-menu .navigation > li > ul.ferchos-services-menu {
    width: 34rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main-header .header .main-menu .navigation > li:hover > ul.ferchos-services-menu,
  .main-header .header .main-menu .navigation > li.open > ul.ferchos-services-menu {
    display: grid;
  }

  .ferchos-services-menu li {
    min-width: 0;
  }
}

@media (min-width: 75rem) and (max-width: 105rem) {
  #projects .project-style1-content > li {
    width: 12.8125rem;
    max-width: 12.8125rem;
    flex-basis: 12.8125rem;
  }
}

@media (max-width: 74.9375rem) {
  .testimonial-style2-image-box > img {
    width: 100%;
    max-width: 100%;
  }

  #projects .project-style1-content {
    flex-direction: column;
  }

  #projects .project-style1-content > li {
    width: 100%;
    max-width: 29.375rem;
    flex: 0 1 auto;
  }
}

@media (max-width: 61.9375rem) {
  .mobile-menu {
    width: min(26.25rem, 100vw);
  }

  .mobile-menu .navigation li > ul.ferchos-services-menu {
    overflow: hidden;
  }

  .mobile-menu .navigation li > ul.ferchos-services-menu > li {
    display: flex;
    float: left;
    width: 50%;
    min-height: 3.75rem;
    align-items: stretch;
  }

  .mobile-menu .navigation li > ul.ferchos-services-menu > li > a {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    margin-left: 0;
    padding: 0.625rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 47.9375rem) {
  .main-slider .content .big-title h2 {
    overflow-wrap: anywhere;
  }

  .estimate-link {
    padding-inline-start: 1.25rem;
  }

  .v2-contact-rail__qr {
    width: 5.5rem;
  }

  .v2-template-discover .discover-image-box .image2 {
    top: 0.75rem;
    right: 0.75rem;
    width: 8rem;
    padding: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .v2-contact-rail__whatsapp::before,
  .v2-contact-rail__whatsapp::after {
    animation: none !important;
  }
}