/* --- FONT DECLARATIONS --- */
@font-face {
  font-family: 'Articulat CF';
  src: url('../fonts/ArticulatCF-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Articulat CF';
  src: url('../fonts/ArticulatCF-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Articulat CF';
  src: url('../fonts/ArticulatCF-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Articulat CF';
  src: url('../fonts/ArticulatCF-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Articulat CF';
  src: url('../fonts/ArticulatCF-DemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Articulat CF';
  src: url('../fonts/ArticulatCF-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Articulat CF';
  src: url('../fonts/ArticulatCF-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

/* --- DESIGN SYSTEM & VARIABLES --- */
:root {
  --primary-color: #244C95;
  /* Cobalt Blue from the branding */
  --secondary-color: #FF0019;
  /* Accent Red */
  --text-dark: #121212;
  --text-muted: #595959;
  --text-light: #999999;
  --bg-footer: #000000;
  --border-footer: rgba(255, 255, 255, 0.1);
  --star-color: #ff9c00;

  --font-main: 'Articulat CF', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- GENERAL STYLES --- */
html,
body {
  overflow-x: hidden;
}

/* --- CUSTOM SCROLLBAR (Balustrade / Metal Gate theme) --- */
::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track {
  background-color: #0c0c0c;
  /* A repeating linear-gradient that visualizes vertical metallic gate / balustrade bars */
  background-image: repeating-linear-gradient(90deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, 0.05) 6px,
      rgba(255, 255, 255, 0.05) 8px);
  border-left: 1px solid rgba(255, 255, 255, 0.03);
}

::-webkit-scrollbar-thumb {
  background-color: #1a1a1a;
  /* Premium repeating SVG of a detailed wrought-iron baluster post with chrome central collar and red scroll brackets */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='50' viewBox='0 0 14 50'><g fill='none' stroke-linecap='round'><line x1='7' y1='0' x2='7' y2='50' stroke='%23888888' stroke-width='2'/><path d='M2 15 Q7 25 12 15' stroke='%23ff0019' stroke-width='1.5'/><path d='M2 35 Q7 25 12 35' stroke='%23ff0019' stroke-width='1.5'/><circle cx='7' cy='25' r='3' fill='%23ffffff' stroke='%23888888' stroke-width='1.5'/></g></svg>");
  background-repeat: repeat-y;
  background-position: center;
  border: 2px solid #0c0c0c;
  border-radius: 7px;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1), 0 0 8px rgba(255, 0, 25, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #262626;
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2), 0 0 12px rgba(255, 0, 25, 0.4);
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  font-family: var(--font-main);
  background-color: #ffffff;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- PRELOADER --- */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
}

.preloader-panel {
  position: absolute;
  top: 0;
  width: 50.5%;
  /* slight overlap to avoid line gaps */
  height: 100%;
  background-color: #000000;
  z-index: 1;
  transition: transform 1.2s cubic-bezier(0.85, 0, 0.15, 1);
  will-change: transform;
}

.preloader-left {
  left: 0;
}

.preloader-right {
  right: 0;
}

.preloader.hidden .preloader-left {
  transform: translateX(-100%);
}

.preloader.hidden .preloader-right {
  transform: translateX(100%);
}

.preloader.hidden {
  pointer-events: none;
}

.preloader-content {
  position: relative;
  z-index: 2;
  transition: opacity 0.5s ease;
}

.preloader-logo {
  opacity: 0;
  transform: scale(0.85);
  will-change: transform, opacity;
}

.preloader-img {
  max-width: 580px;
  width: 90vw;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.4));
}

.preloader.hidden .preloader-content {
  opacity: 0;
}

.preloader-text-wrap {
  display: flex;
  gap: 24px;
  font-family: 'Articulat CF', sans-serif;
  font-size: 5.5rem;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  line-height: 1.2;
}

.preloader-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(120px);
  will-change: transform, opacity;
}

.preloader-word.blue-word {
  color: var(--primary-color);
}

.preloader-word.red-word {
  color: var(--secondary-color);
}

.preloader-signature {
  font-family: 'Caveat', cursive;
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 15px;
  overflow: visible;
  height: auto;
  min-height: 100px;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

/* Ensure cursive ascenders/descenders are never clipped by word spans */
.preloader-signature .split-word {
  overflow: visible !important;
  margin-right: 0.15em;
  /* spacing for signature characters */
}

/* Make 'A' red and 'Z' blue in signature */
.preloader-signature .split-word:first-child .split-char:nth-child(1) {
  color: var(--secondary-color) !important;
}

.preloader-signature .split-word:first-child .split-char:nth-child(2) {
  color: var(--primary-color) !important;
}

.preloader-signature .split-char {
  display: inline-block;
  transform: translateY(110%) rotate(15deg);
  opacity: 0;
  will-change: transform, opacity;
  line-height: 1.2;
}

@media (max-width: 991.98px) {
  .preloader-text-wrap {
    font-size: 4rem;
    gap: 16px;
  }
}

@media (max-width: 767.98px) {
  .preloader-text-wrap {
    font-size: 2.8rem;
    gap: 12px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .preloader-word {
    transform: translateY(80px);
  }
}

/* --- NAVBAR SCROLL STATE --- */
.site-header .navbar {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 0;
  border: 1px solid transparent;
  background-color: transparent;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.site-header.scrolled {
  position: fixed;
  top: 15px;
  animation: navSlideDown 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.site-header.scrolled .navbar {
  width: 92%;
  max-width: 1200px;
  background-color: rgba(12, 12, 12, 0.72);
  /* Dark glassmorphism default */
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  /* Floating pill */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  padding: 8px 24px !important;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.site-header.scrolled .navbar-nav .nav-link,
.site-header.scrolled .nav-search-btn i {
  color: #ffffff !important;
  transition: color 0.3s ease !important;
}

.site-header.scrolled .navbar-nav .nav-link:hover,
.site-header.scrolled .navbar-nav .nav-link.active,
.site-header.scrolled .navbar-nav .nav-item.active>.nav-link,
.site-header.scrolled .navbar-nav .nav-item.current-menu-item>.nav-link,
.site-header.scrolled .navbar-nav .nav-item.current_page_item>.nav-link {
  color: var(--secondary-color) !important;
  font-weight: 700 !important;
}

.site-header.scrolled .navbar-nav .nav-link.az-nav-link-red {
  color: var(--secondary-color) !important;
}

.site-header.scrolled .navbar-nav .nav-link.az-nav-link-red:hover {
  color: #ffffff !important;
}

.site-header.scrolled .navbar-nav .nav-link.active::after,
.site-header.scrolled .navbar-nav .nav-item.active>.nav-link::after,
.site-header.scrolled .navbar-nav .nav-item.current-menu-item>.nav-link::after,
.site-header.scrolled .navbar-nav .nav-item.current_page_item>.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 12px;
  right: 12px;
  height: 3px;
  background-color: var(--secondary-color) !important;
  border-radius: 2px;
  display: block !important;
}

/* White hamburger icon default */
.site-header.scrolled .navbar-toggler-icon {
  filter: none;
  transition: filter 0.3s ease;
}

.site-header.scrolled .header-logo {
  max-width: 165px;
}

/* Desktop Navbar Scaling (992px to 1400px laptop/tablet screens) */
@media (min-width: 992px) and (max-width: 1250px) {
  .site-header .navbar-nav .nav-link {
    font-size: 0.8rem !important;
    padding: 6px 7px !important;
  }

  .az-header-phone-btn {
    padding: 4px 10px 4px 5px !important;
  }

  .az-header-phone-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.72rem !important;
  }

  .az-header-phone-sub {
    font-size: 0.5rem !important;
  }

  .az-header-phone-num {
    font-size: 0.75rem !important;
  }

  .site-header .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

.site-header.scrolled .navbar-nav .nav-link {
  font-size: 0.82rem !important;
  padding: 6px 9px !important;
  white-space: nowrap;
  letter-spacing: 0;
}

.site-header.scrolled .navbar-nav {
  flex-wrap: nowrap !important;
  align-items: center;
}

/* --- LIGHT THEME STICKY NAV OVERRIDES (For Light Background Sections) --- */
.site-header.scrolled.nav-light-theme .navbar {
  background-color: rgba(255, 255, 255, 0.92);
  /* Light glassmorphism */
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.site-header.scrolled.nav-light-theme .navbar-nav .nav-link,
.site-header.scrolled.nav-light-theme .nav-search-btn i {
  color: #1d70e8 !important;
  /* High-contrast electric blue visible on both dark/light states */
}

.site-header.scrolled.nav-light-theme .navbar-nav .nav-link:hover,
.site-header.scrolled.nav-light-theme .navbar-nav .nav-link.active,
.site-header.scrolled.nav-light-theme .navbar-nav .nav-item.current-menu-item>.nav-link,
.site-header.scrolled.nav-light-theme .navbar-nav .nav-item.current_page_item>.nav-link {
  color: var(--secondary-color) !important;
  font-weight: 700 !important;
}

.site-header.scrolled.nav-light-theme .navbar-toggler-icon {
  filter: invert(1);
  /* Black hamburger icon */
}

/* Light Theme (White Background) State for Header Phone Button */
.site-header.scrolled.nav-light-theme .az-header-phone-btn {
  background: linear-gradient(135deg, var(--primary-color) 0%, #153a7a 100%) !important;
  border-color: rgba(36, 76, 149, 0.3) !important;
  box-shadow: 0 4px 14px rgba(36, 76, 149, 0.25) !important;
}

.site-header.scrolled.nav-light-theme .az-header-phone-btn .az-header-phone-num {
  color: #ffffff !important;
}

.site-header.scrolled.nav-light-theme .az-header-phone-btn .az-header-phone-sub {
  color: rgba(255, 255, 255, 0.8) !important;
}

.site-header.scrolled.nav-light-theme .az-header-phone-btn .az-header-phone-icon {
  background: #ffffff !important;
  color: var(--primary-color) !important;
}

.site-header.scrolled.nav-light-theme .az-header-phone-btn:hover {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  box-shadow: 0 6px 20px rgba(255, 0, 25, 0.35) !important;
}

.site-header.scrolled.nav-light-theme .az-header-phone-btn:hover .az-header-phone-icon {
  background: #ffffff !important;
  color: var(--secondary-color) !important;
}

.site-header.scrolled.nav-light-theme .az-header-mobile-call-btn {
  background: rgba(36, 76, 149, 0.1) !important;
  border-color: rgba(36, 76, 149, 0.25) !important;
  color: var(--primary-color) !important;
}

.site-header.scrolled.nav-light-theme .az-header-mobile-call-btn:hover {
  background: var(--primary-color) !important;
  color: #ffffff !important;
}

@keyframes navSlideDown {
  from {
    transform: translateY(-120%);
  }

  to {
    transform: translateY(0);
  }
}

/* --- SCROLL REVEAL (IntersectionObserver) --- */
/* Elements are ALWAYS visible by default. .az-reveal only adds an entrance animation. */
.az-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.65s ease, transform 0.65s ease;
}

/* Before entering viewport — subtle hidden state via CSS only */
/* Applied right before the element is observed, so no flash of invisible content */
.az-reveal:not(.az-revealed) {
  opacity: 0;
  transform: translateY(24px);
}

/* Once in viewport — animate to final natural state */
.az-reveal.az-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* --- SPLIT TEXT ANIMATION --- */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.split-char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}

.split-line {
  display: block;
  overflow: hidden;
  line-height: inherit;
  padding: 0;
  margin: 0;
}

.split-line-inner {
  display: block;
  transform: translateY(100%);
  will-change: transform;
  line-height: inherit;
  padding: 0;
  margin: 0;
}

/* --- CURTAIN IMAGE REVEAL --- */
.curtain-reveal {
  position: relative;
  overflow: hidden;
}

.curtain-reveal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--text-dark);
  transform-origin: right;
  z-index: 2;
}

/* --- MAGNETIC BUTTON EFFECT --- */
.magnetic-btn {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

/* --- CUSTOM CURSOR FOLLOWER --- */
.cursor-follower {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  mix-blend-mode: difference;
  will-change: transform;
}

.cursor-follower.hovering {
  width: 70px;
  height: 70px;
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 991.98px) {
  .cursor-follower {
    display: none !important;
  }
}

/* --- HORIZONTAL LINE DRAW --- */
.line-draw {
  position: relative;
}

.line-draw::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--secondary-color);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* --- PARALLAX LAYER --- */
.parallax-layer {
  will-change: transform;
}

/* --- SERVICES SECTION & FINISHES SECTION --- */
.services-section {
  background-color: #ffffff;
}

.finishes-section {
  position: relative;
  background: 
    radial-gradient(ellipse at 80% 20%, rgba(36, 76, 149, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 15% 85%, rgba(20, 50, 110, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, #eef4fc 0%, #e3ecf8 50%, #edf3fb 100%);
  border-top: 1px solid rgba(36, 76, 149, 0.14);
  border-bottom: 1px solid rgba(36, 76, 149, 0.14);
  padding: 85px 0;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(36, 76, 149, 0.04), inset 0 -2px 8px rgba(36, 76, 149, 0.04);
}

.finishes-section::before {
  content: '';
  position: absolute;
  top: -150px;
  left: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(36, 76, 149, 0.22) 0%, rgba(36, 76, 149, 0.05) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}

.finishes-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  right: -80px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(36, 76, 149, 0.2) 0%, rgba(20, 50, 110, 0.06) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}

.finishes-section .container {
  position: relative;
  z-index: 1;
}

/* Custom Swiper Navigation Buttons styling */
.services-slider-container,
.finishes-slider-container {
  position: relative;
  overflow: visible !important;
  /* allows arrows to float outside card track */
}

.services-swiper,
.finishes-swiper {
  overflow: hidden !important;
  padding: 10px 0 !important;
}

.services-slider-container .swiper-button-prev,
.services-slider-container .swiper-button-next,
.finishes-slider-container .swiper-button-prev,
.finishes-slider-container .swiper-button-next {
  width: 46px !important;
  height: 46px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  z-index: 10 !important;
  top: 50% !important;
  margin-top: -23px !important;
  backdrop-filter: blur(8px) !important;
}

/* Swiper default chevron icon sizing */
.services-slider-container .swiper-button-prev::after,
.services-slider-container .swiper-button-next::after,
.finishes-slider-container .swiper-button-prev::after,
.finishes-slider-container .swiper-button-next::after {
  font-size: 16px !important;
  font-weight: bold !important;
}

/* Offset positioning outside the slider wrapper on desktop */
.services-slider-container .swiper-button-prev,
.finishes-slider-container .swiper-button-prev {
  left: -65px !important;
}

.services-slider-container .swiper-button-next,
.finishes-slider-container .swiper-button-next {
  right: -65px !important;
}

/* Hover effects */
.services-slider-container .swiper-button-prev:hover,
.services-slider-container .swiper-button-next:hover,
.finishes-slider-container .swiper-button-prev:hover,
.finishes-slider-container .swiper-button-next:hover {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: #ffffff !important;
  transform: scale(1.15) !important;
  box-shadow: 0 8px 24px rgba(255, 0, 25, 0.25) !important;
}

/* On Mobile and Tablet: place them slightly inside the viewport bounds */
@media (max-width: 1200px) {

  .services-slider-container .swiper-button-prev,
  .finishes-slider-container .swiper-button-prev {
    left: 10px !important;
  }

  .services-slider-container .swiper-button-next,
  .finishes-slider-container .swiper-button-next {
    right: 10px !important;
  }
}

.services-top-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: #7f7f7f;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.services-top-link i {
  font-size: 0.9rem;
}

.services-top-link:hover {
  color: var(--primary-color);
}

.services-top-link.active-link {
  color: var(--primary-color);
}

.service-item-card {
  margin-bottom: 20px;
}

.service-img-wrapper {
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 338px;
  height: 401px;
  margin: 0 auto;
}

.service-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-item-card:hover .service-img {
  transform: scale(1.05);
}

.service-item-title {
  font-family: 'Articulat CF', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--text-dark);
  text-transform: capitalize;
  margin-top: 24px;
  margin-bottom: 12px;
}

.service-item-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* --- TOP BAR --- */
.top-bar {
  background-color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.top-bar-link {
  color: #121212;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.top-bar-link:hover {
  color: var(--secondary-color);
}

.top-bar-divider {
  color: #eaeaea;
}

.top-bar-socials a {
  color: #555555;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.top-bar-socials a:hover {
  color: var(--secondary-color);
}

/* --- HEADER / NAVIGATION --- */
.site-header {
  position: absolute;
  top: 40px;
  /* height of top bar */
  left: 0;
  right: 0;
  z-index: 100;
  transition: top 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.header-logo {
  max-width: 220px;
  height: auto;
  transition: max-width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.navbar-nav .nav-link {
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  padding: 8px 12px !important;
  position: relative;
  white-space: nowrap;
  transition: color 0.25s ease !important;
}

/* Default (White) Nav Link Hover -> Turns Red */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.current-menu-item>.nav-link,
.navbar-nav .nav-item.current_page_item>.nav-link {
  color: var(--secondary-color) !important;
  font-weight: 700 !important;
}

/* Red Nav Links (e.g. Architectural, Structural) -> Red by default, Turns White on hover */
.navbar-nav .nav-link.az-nav-link-red,
.az-dropdown-item.az-nav-link-red {
  color: var(--secondary-color) !important;
}

.navbar-nav .nav-link.az-nav-link-red:hover,
.az-dropdown-item.az-nav-link-red:hover {
  color: #ffffff !important;
}

.navbar-nav .nav-link.active::after,
.navbar-nav .nav-item.current-menu-item>.nav-link::after,
.navbar-nav .nav-item.current_page_item>.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background-color: var(--secondary-color) !important;
  border-radius: 2px;
}

.nav-search-btn {
  font-size: 0.95rem;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.nav-search-btn:hover {
  transform: scale(1.1);
}

@media (min-width: 992px) {
  .navbar-nav {
    gap: 0.3rem !important;
  }
}

/* --- DROPDOWN MENUS --- */
.navbar-nav .dropdown-menu {
  background: rgba(12, 18, 32, 0.96) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 10px 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  margin-top: 10px !important;
}

.navbar-nav .dropdown-item {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--font-main) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  padding: 8px 24px !important;
  transition: all 0.25s ease !important;
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item.active {
  background-color: var(--secondary-color) !important;
  color: #ffffff !important;
}

.navbar-nav .dropdown-toggle::after {
  display: none !important;
}

.navbar-nav .dropdown-toggle-split {
  cursor: pointer;
  padding: 8px 8px 8px 4px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: color 0.25s ease, transform 0.25s ease;
}

.navbar-nav .dropdown-toggle-split:hover,
.navbar-nav .dropdown:hover .dropdown-toggle-split {
  color: var(--secondary-color);
}

.dropdown-chevron-svg {
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  vertical-align: middle;
}

@media (min-width: 992px) {
  .navbar-nav .dropdown:hover .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .navbar-nav .dropdown:hover .dropdown-chevron-svg {
    transform: rotate(180deg) !important;
  }

  .navbar-nav .dropdown:hover .nav-link {
    color: var(--secondary-color) !important;
  }

  .navbar-nav .dropdown-menu {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) !important;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }
}

/* Rotate SVG chevron on active dropdown on mobile */
.navbar-nav .dropdown-toggle-split[aria-expanded="true"] .dropdown-chevron-svg {
  transform: rotate(180deg) !important;
  color: var(--secondary-color) !important;
}

/* Animated Mobile Plus Icon */
.mobile-plus-icon {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-block;
}

.plus-line {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.85);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.25s ease;
}

.plus-horizontal {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
  border-radius: 1px;
}

.plus-vertical {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
  border-radius: 1px;
}

/* Transform plus to minus on click */
.navbar-nav .dropdown-toggle-split[aria-expanded="true"] .plus-vertical {
  transform: rotate(90deg) !important;
  background-color: var(--secondary-color) !important;
}

.navbar-nav .dropdown-toggle-split[aria-expanded="true"] .plus-horizontal {
  background-color: var(--secondary-color) !important;
}

/* ===== CUSTOM AZ DROPDOWN SYSTEM ===== */

/* Desktop: inline-block li with relative positioning for absolute dropdown */
.nav-item.az-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Mobile: full-width row, link grows to fill, button at far right */
@media (max-width: 991.98px) {
  .nav-item.az-dropdown {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* lets .az-dropdown-menu wrap to next line */
    align-items: center;
    width: 100%;
  }

  .nav-item.az-dropdown>.nav-link {
    flex: 1 1 0;
    /* take all remaining width on the row */
    min-width: 0;
    padding-right: 0 !important;
  }

  .nav-item.az-dropdown>.az-dropdown-btn {
    flex: 0 0 auto;
    /* don't grow or shrink, just its own size */
    margin-left: auto;
    /* push to far right end */
  }

  .nav-item.az-dropdown>.az-dropdown-menu {
    flex: 0 0 100%;
    /* wrap to its own full-width row below */
    width: 100%;
  }
}

/* The trigger button */
.az-dropdown-btn {
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.25s ease;
  line-height: 1;
}

.az-dropdown-btn:hover,
.nav-item.az-dropdown:hover .az-dropdown-btn {
  color: var(--secondary-color);
}

/* Desktop: show on hover & spacing adjustments */
@media (min-width: 992px) {

  .az-dropdown-btn[aria-expanded="true"] .dropdown-chevron-svg,
  .nav-item.az-dropdown:hover .dropdown-chevron-svg {
    transform: rotate(180deg);
    color: var(--secondary-color);
  }

  .nav-item.az-dropdown>.nav-link {
    padding-right: 4px !important;
  }

  .nav-item.az-dropdown>.az-dropdown-btn {
    padding-left: 2px !important;
  }
}

/* Mobile tap target */
@media (max-width: 991.98px) {
  .az-dropdown-btn {
    padding: 14px 20px;
  }
}

/* The submenu list */
.az-dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Desktop: absolute drop below */
@media (min-width: 992px) {
  .az-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 260px;
    background: rgba(15, 15, 15, 0.97);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.25s;
    z-index: 9999;
  }

  .nav-item.az-dropdown:hover .az-dropdown-menu,
  .nav-item.az-dropdown.open .az-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* Mobile: full-width slide down */
@media (max-width: 991.98px) {
  .az-dropdown-menu {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
  }

  .nav-item.az-dropdown.open .az-dropdown-menu {
    max-height: 1000px;
    /* higher to fit nested submenu contents without clipping */
    opacity: 1;
  }
}

/* Submenu items */
.az-dropdown-item {
  display: block;
  padding: 10px 20px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.az-dropdown-item:hover,
.az-dropdown-item.active {
  color: var(--secondary-color);
  padding-left: 26px;
}

/* Level 3 Submenu (Dropdown inside Dropdown) */
.az-dropdown-submenu {
  position: relative;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100%;
}

.az-dropdown-submenu>.az-dropdown-item {
  flex: 1 1 auto;
}

.az-submenu-btn {
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s ease;
  line-height: 1;
}

.az-submenu-btn:hover,
.az-dropdown-submenu:hover>.az-submenu-btn,
.az-dropdown-submenu.open>.az-submenu-btn {
  color: var(--secondary-color);
}

.az-submenu-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Desktop layout for submenu */
@media (min-width: 992px) {
  .az-dropdown-submenu {
    display: block !important;
  }

  .az-dropdown-submenu>.az-submenu-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%) !important;
    padding: 4px !important;
  }

  .az-dropdown-submenu>.az-submenu-btn .dropdown-chevron-svg {
    transform: rotate(-90deg) !important;
    /* points right */
  }

  .az-dropdown-submenu:hover>.az-submenu-btn .dropdown-chevron-svg {
    transform: rotate(-90deg) !important;
  }

  .az-submenu-menu {
    position: absolute;
    top: -8px;
    left: 100%;
    min-width: 260px;
    background: rgba(15, 15, 15, 0.98);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.25s;
    z-index: 10000;
  }

  .az-dropdown-submenu:hover>.az-submenu-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

/* Mobile layout for submenu */
@media (max-width: 991.98px) {
  .az-dropdown-submenu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    padding-left: 12px !important;
    /* indented hierarchy */
  }

  .az-dropdown-submenu>.az-dropdown-item {
    flex: 1 1 0 !important;
    /* take all remaining width */
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  .az-dropdown-submenu>.az-submenu-btn {
    flex: 0 0 auto !important;
    /* stay natural size */
    margin-left: auto !important;
    /* push to far right */
    padding: 14px 20px !important;
  }

  .az-dropdown-submenu>.az-submenu-menu {
    flex: 0 0 100% !important;
    /* wrap to its own line below */
    width: 100% !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    margin-top: 4px;
  }

  .az-dropdown-submenu.open>.az-submenu-menu {
    max-height: 300px;
    opacity: 1;
  }

  .az-dropdown-submenu.open>.az-submenu-btn .plus-vertical {
    transform: rotate(90deg) !important;
    background-color: var(--secondary-color) !important;
  }

  .az-dropdown-submenu.open>.az-submenu-btn .plus-horizontal {
    background-color: var(--secondary-color) !important;
  }
}

/* Mobile plus icon rotate on open */
@media (max-width: 991.98px) {
  .nav-item.az-dropdown.open .az-dropdown-btn .plus-vertical {
    transform: rotate(90deg);
    background-color: var(--secondary-color);
  }

  .nav-item.az-dropdown.open .az-dropdown-btn .plus-horizontal {
    background-color: var(--secondary-color);
  }

  .nav-item.az-dropdown.open .az-dropdown-btn {
    color: var(--secondary-color);
  }
}

/* Mobile dropdown smooth transition and positioning */
@media (max-width: 991.98px) {
  .navbar-nav .dropdown {
    width: 100% !important;
  }

  .navbar-nav .dropdown-toggle-split {
    padding: 16px 20px !important;
    /* comfortable tap targets */
  }

  .navbar-nav .dropdown-menu {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, padding 0.3s ease !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
    margin-top: 5px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    float: none !important;
    position: static !important;
  }

  .navbar-nav .dropdown-menu.show {
    max-height: 300px !important;
    /* height to accommodate menu list items */
    opacity: 1 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .navbar-nav .dropdown-item {
    padding: 10px 24px !important;
    background: transparent !important;
  }

  .navbar-nav .dropdown-item:hover,
  .navbar-nav .dropdown-item.active {
    color: var(--secondary-color) !important;
  }
}

/* --- HERO SLIDER BANNER --- */
.hero-slider-section {
  position: relative;
  height: 800px;
  background-color: #000000;
  overflow: hidden;
}

.hero-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 1;
  transform: scale(1.12);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide.active {
  opacity: 1;
  z-index: 2;
  transform: scale(1);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 20%, rgba(0, 0, 0, 0.3) 100%);
}

.hero-subtitle {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero-title {
  font-family: 'Articulat CF', sans-serif;
  font-size: 76px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -1px;
}

.hero-cta-btn {
  background-color: var(--secondary-color);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 38px;
  border-radius: 30px;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.hero-cta-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.hero-cta-btn:hover {
  background-color: #ffffff;
  color: var(--secondary-color);
  transform: translateY(-2px);
}

.hero-cta-btn:hover .hero-cta-arrow {
  transform: translate(2px, -2px);
}

.hero-cta-btn:hover .hero-cta-arrow svg path {
  stroke: var(--secondary-color);
}

/* Slider Controls (Bottom Right) */
.hero-slider-controls {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  background-color: #ffffff;
  width: 235px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-top: 3px solid var(--secondary-color);
}

.hero-control-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

#hero-prev {
  color: #c2c2c2;
}

#hero-next {
  color: #000000;
}

.hero-control-btn:hover {
  opacity: 0.7;
}



/* Responsive adjustments for Hero */
@media (max-width: 991.98px) {
  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .site-header.scrolled {
    position: fixed;
    top: 10px;
    background-color: transparent;
  }

  .site-header.scrolled .navbar {
    width: 94%;
    padding: 6px 16px !important;
  }

  .navbar-nav {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    box-shadow: none !important;
  }

  .site-header.scrolled .navbar-nav {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .hero-slider-section {
    height: 550px;
  }

  .hero-title {
    font-size: 48px;
  }

  .hero-slider-controls {
    width: 160px;
    height: 60px;
  }

  .about-main-title {
    font-size: 38px;
  }

  .section-title {
    font-size: 42px;
  }

  .rooftop-img {
    height: 480px;
  }

  .header-logo {
    max-width: 180px;
  }
}

@media (max-width: 767.98px) {
  .hero-slider-section {
    height: 480px;
  }

  .hero-title {
    font-size: 38px;
  }

  .rooftop-img {
    height: 320px;
  }
}

/* --- SUPPLIER SECTION --- */
.supplier-section {
  background-color: #ffffff;
  padding: 40px 0;
  overflow: hidden;
}

.supplier-title {
  font-family: 'Articulat CF', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #7f7f7f;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.supplier-marquee-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px 0;
}

.supplier-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 80px;
  animation: supplierMarqueeLoop 30s linear infinite;
  will-change: transform;
}

.supplier-logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
  opacity: 0.8;
}

.supplier-logo-item:hover {
  opacity: 1;
  transform: scale(1.08);
}

.supplier-logo-img {
  max-height: 95px;
  width: auto;
  max-width: 280px;
  display: block;
}

@keyframes supplierMarqueeLoop {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    /* Translate exactly by 1/3 of the track content width (5 logo items * item width + gap) */
    transform: translate3d(calc(-100% / 3), 0, 0);
  }
}

/* --- ABOUT SECTION & MODERN STATS STRIP --- */
.about-section {
  background-color: #ffffff;
}

.about-main-title {
  font-family: 'Articulat CF', sans-serif;
  font-size: 56px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.15;
  margin-top: 15px;
}

.about-text {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: 20px;
}

.read-more-btn {
  background-color: var(--secondary-color);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 38px;
  border-radius: 30px;
  text-transform: uppercase;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.read-more-btn:hover {
  background-color: #000000;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.read-more-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.read-more-btn:hover .read-more-arrow {
  transform: translate(2px, -2px);
}

/* About Stats Row & Badge */
.about-stats-row {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.stat-item-box {
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.stat-item-box:hover {
  transform: translateY(-4px);
}

.stat-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease;
}

.stat-item-box:hover .stat-icon-wrap {
  transform: scale(1.08);
}

.stat-number {
  font-family: 'Articulat CF', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--primary-color, #244C95);
  line-height: 1;
  letter-spacing: -0.5px;
  display: block;
  margin-bottom: 4px;
}

.stat-label {
  font-family: 'Articulat CF', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #4b5563;
  line-height: 1.2;
}

.stat-badge-img-wrapper {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stat-badge-img-wrapper:hover {
  transform: scale(1.06);
}

.stat-badge-img {
  max-height: 68px;
  width: auto;
  display: block;
  object-fit: contain;
}

.stat-craftsmanship-title {
  font-family: 'Articulat CF', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--primary-color, #244C95);
  line-height: 1.15;
  letter-spacing: -0.3px;
  display: block;
  margin-bottom: 2px;
}

.stat-craftsmanship-icon {
  width: 54px;
  height: 56px;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  display: block;
}

.stat-craftsmanship-wrap {
  width: 54px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-item-box:hover .stat-craftsmanship-icon {
  transform: scale(1.08);
}

.badge-years {
  max-height: 68px;
}

.badge-warranty {
  max-height: 68px;
}

.stat-badges-group {
  display: flex;
  align-items: center;
}

@media (max-width: 767.98px) {
  .stat-badges-group {
    justify-content: center !important;
    gap: 20px !important;
  }
  .stat-badge-img {
    max-height: 56px;
  }
}

/* Core Capabilities Highlight Strip */
.about-capabilities-strip {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  width: 100%;
}

.capabilities-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 5.5vw, 80px);
  margin: 0 auto;
  flex-wrap: nowrap;
}

.capability-item {
  font-family: 'Articulat CF', sans-serif;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 700;
  color: #111827;
  letter-spacing: clamp(2px, 0.25vw, 3px);
  transition: all 0.3s ease;
  cursor: default;
  white-space: nowrap;
}

.capability-item:hover {
  color: var(--secondary-color);
  transform: translateY(-2px);
}

.capability-divider {
  color: #d1d5db;
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  font-weight: 300;
  user-select: none;
  opacity: 0.8;
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .about-main-title {
    font-size: 40px;
  }
  .stat-number {
    font-size: 34px;
  }
  .stat-craftsmanship-title {
    font-size: 22px;
  }
  .stat-craftsmanship-icon,
  .stat-craftsmanship-wrap {
    width: 44px;
    height: 48px;
  }
  .capabilities-bar {
    gap: 16px 20px;
    flex-wrap: wrap;
  }
  .capability-item {
    font-size: 0.95rem;
    letter-spacing: 1.5px;
  }
  .capability-divider {
    font-size: 1rem;
  }
}

@media (max-width: 767.98px) {
  .capabilities-bar {
    justify-content: center;
    gap: 10px 16px;
    flex-wrap: wrap;
  }
  .capability-item {
    font-size: 0.88rem;
    letter-spacing: 1.2px;
  }
}

/* --- ROOFTOP BANNER SECTION --- */
.rooftop-banner-section {
  background-color: #ffffff;
  overflow: hidden;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.rooftop-banner-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin: 0 5%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  background-color: #0c0c0c;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    margin 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.rooftop-banner-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(12, 12, 12, 0.15), rgba(12, 12, 12, 0.45));
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 1.2s ease;
}

.rooftop-img {
  display: block;
  width: 100%;
  height: 650px;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.rooftop-banner-wrapper:hover {
  margin: 0 0%;
  border-radius: 0px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}

.rooftop-banner-wrapper:hover .rooftop-img {
  transform: scale(1.08);
}

.rooftop-banner-wrapper:hover::after {
  opacity: 0.4;
}

@media (max-width: 991.98px) {
  .rooftop-banner-wrapper {
    margin: 0 15px;
    border-radius: 16px;
  }

  .rooftop-banner-wrapper:hover {
    margin: 0 0px;
    border-radius: 0px;
  }

  .rooftop-img {
    height: 400px;
  }
}

/* --- PROJECTS SECTION --- */
.projects-section {
  background-color: #000000;
  color: #ffffff;
  overflow: hidden;
  position: relative;
  /* Thin wavy/grid studio lines simulation */
  background-image:
    radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.03) 0%, transparent 60%),
    linear-gradient(to bottom, #000000, #060606);
}

.projects-subtitle {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.projects-title {
  font-family: 'Articulat CF', sans-serif;
  font-size: 74px;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 30px;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.projects-desc {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #888888;
  margin-bottom: 20px;
  font-weight: 400;
}

.view-projects-btn {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  transition: color 0.3s ease;
}

.view-projects-btn:hover {
  color: var(--secondary-color);
}

.view-projects-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.view-projects-btn:hover .view-projects-arrow {
  transform: translate(3px, -3px);
}

/* Slider Wrapper */
.projects-slider-wrapper {
  position: relative;
  padding-right: 15px;
}

.projects-carousel {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.projects-carousel::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.projects-carousel {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* Project Card */
.project-card {
  flex: 0 0 460px;
  height: 580px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.project-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.project-card:hover .project-card-img {
  transform: scale(1.06);
}

.project-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 80%);
  padding: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
}

.project-card-info {
  color: #ffffff;
}

.project-card-tag {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 1px;
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.project-card-title-text {
  font-family: 'Articulat CF', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 0;
  text-transform: capitalize;
}

.project-card-link-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
  flex-shrink: 0;
}

.project-card:hover .project-card-link-btn {
  transform: scale(1.1);
  background-color: #ffffff;
}

.project-card:hover .project-card-link-btn svg path {
  stroke: var(--secondary-color);
}

/* Slider Dots */
.projects-slider-dots {
  display: flex;
  gap: 12px;
  margin-top: 40px;
  justify-content: center;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2d2d2d;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dot.active {
  background-color: var(--secondary-color);
  box-shadow: 0 0 0 2px #000000, 0 0 0 4px #ffffff;
}

/* Responsive adjustments for projects */
@media (max-width: 1199.98px) {
  .project-card {
    flex: 0 0 380px;
    height: 480px;
  }

  .projects-title {
    font-size: 2.8rem;
  }
}

@media (max-width: 991.98px) {
  .projects-title {
    font-size: 2.5rem;
  }

  .project-card {
    flex: 0 0 340px;
    height: 430px;
  }
}

/* --- TESTIMONIALS SECTION --- */
.testimonials-section {
  background-color: #ffffff;
}

.section-subtitle {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}

.section-title {
  font-family: 'Articulat CF', sans-serif;
  font-size: 65px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 0;
  line-height: 1.1;
}

.slider-controls {
  display: flex;
  gap: 15px;
}

.slider-btn {
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.slider-btn svg {
  stroke: #c2c2c2;
  transition: stroke 0.3s ease;
}

.slider-btn:hover svg {
  stroke: var(--text-dark);
}

/* Testimonials Carousel Slider */
.testimonials-carousel {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 5px 25px 5px;
  cursor: grab;
}

.testimonials-carousel::-webkit-scrollbar {
  display: none;
}

.testimonial-card-slide {
  flex: 0 0 380px;
  max-width: 380px;
}

@media (max-width: 767.98px) {
  .testimonial-card-slide {
    flex: 0 0 300px;
    max-width: 300px;
  }
}

/* Testimonial Cards */
.testimonial-card {
  background: #ffffff;
  border: 1px solid #f2f2f2;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.stars-rating {
  color: var(--star-color);
  margin-bottom: 24px;
  font-size: 1.1rem;
  display: flex;
  gap: 4px;
}

.testimonial-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: 30px;
  /* Match design's visual rhythm */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimonial-author-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.author-info {
  line-height: 1.3;
}

.author-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.author-title {
  font-size: 0.85rem;
  color: var(--text-light);
  font-weight: 500;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

/* Social Proof Banner */
.social-proof-banner {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.overlapping-avatars {
  display: flex;
  align-items: center;
}

.overlapping-avatars .avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  object-fit: cover;
  margin-left: -10px;
}

.overlapping-avatars .avatar-img:first-child {
  margin-left: 0;
}

.avatar-count-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #000000;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  margin-left: -10px;
}

.social-proof-text {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.social-proof-divider {
  width: 1px;
  height: 24px;
  background-color: #e5e5e5;
  margin: 0 15px;
}

.social-proof-rating {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.social-proof-rating i {
  color: var(--star-color);
}

/* --- FOOTER SECTION --- */
.site-footer {
  background-color: var(--bg-footer);
  color: #ffffff;
  padding: 100px 0 0;
  font-weight: 400;
}

.footer-top {
  padding-bottom: 80px;
}

.footer-col {
  position: relative;
  display: flex;
  flex-direction: column;
}

.footer-logo {
  max-width: 250px;
  height: auto;
  margin-bottom: 25px;
}

.footer-desc {
  color: #a3a3a3;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 30px;
  font-weight: 400;
}

.footer-warranty-wrapper {
  display: none !important;
}

.footer-warranty {
  max-width: 195px;
  height: auto;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 1.25rem;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.footer-socials a:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #ffffff;
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 20px rgba(255, 0, 25, 0.35);
}

.footer-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 30px;
  letter-spacing: 0.3px;
}

.footer-links {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.footer-links li {
  margin-bottom: 16px;
}

.footer-links li:last-child {
  margin-bottom: 0;
}

.footer-links li a {
  color: #a3a3a3;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  font-weight: 400;
}

.footer-links li a:hover {
  color: #ffffff;
}

.footer-links li a span.chevron {
  color: #7f7f7f;
  margin-right: 10px;
  font-size: 0.95rem;
  font-weight: 400;
}

/* Services Layout (Two Sub-columns) */
.services-list-grid {
  display: flex;
  gap: 40px;
}

.services-list-grid ul {
  flex: 1;
}

/* Contact Info Column */
.contact-item {
  display: flex;
  margin-bottom: 24px;
  align-items: center;
}

.contact-item:last-child {
  margin-bottom: 0;
}

.contact-icon-wrapper {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: #ffffff;
  transition: all 0.3s ease;
}

.contact-icon-wrapper i {
  font-size: 0.95rem;
}

.contact-item:hover .contact-icon-wrapper {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.05);
}

.contact-details {
  line-height: 1.4;
}

.contact-label {
  font-size: 0.8rem;
  color: #7f7f7f;
  display: block;
  font-weight: 400;
  margin-bottom: 2px;
}

.contact-value {
  font-size: 0.95rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 400;
  display: block;
}

a.contact-value {
  transition: color 0.2s ease;
}

a.contact-value:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Footer Bottom Area */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 35px 0;
  text-align: center;
}

.copyright-text {
  font-size: 0.85rem;
  color: #7f7f7f;
  margin-bottom: 0;
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* Vertical dividers on desktop view */
@media (min-width: 992px) {
  .footer-col {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 50px;
    padding-right: 50px;
  }

  .footer-col-1 {
    padding-left: 0;
    padding-right: 50px;
  }

  .footer-col-4 {
    border-right: none;
    padding-right: 0;
    padding-left: 50px;
  }
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .site-footer {
    padding: 70px 0 0;
  }

  .footer-top {
    padding-bottom: 40px;
  }

  .footer-col {
    margin-bottom: 50px;
  }

  .footer-col:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 575.98px) {
  .section-title-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .testimonial-card {
    padding: 25px;
  }

  .services-list-grid {
    flex-direction: column;
    gap: 16px;
  }

  .about-main-title {
    font-size: 30px;
  }

  .section-title {
    font-size: 32px;
  }

  .service-img-wrapper {
    height: 300px;
  }

  .hero-cta-btn {
    padding: 12px 28px;
    font-size: 0.8rem;
  }

  .read-more-btn {
    padding: 12px 28px;
    font-size: 0.8rem;
  }

  .header-logo {
    max-width: 140px;
  }
}



/* ==========================================================================
   SUPPLIER LOGOS INTERACTIVE HOVER
   ========================================================================== */
.supplier-logo-img {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  opacity: 0.8;
  cursor: pointer;
}

.supplier-logo-img:hover {
  transform: translateY(-8px) scale(1.1);
  opacity: 1;
}

/* ==========================================================================
   SERVICES CARDS 3D CARD HOVER
   ========================================================================== */
.service-item-card {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-item-card:hover {
  transform: translateY(-12px);
}

.service-img-wrapper {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  border-radius: 8px;
}

.service-item-card:hover .service-img-wrapper {
  transform: scale(1.03);
}

.service-img {
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-item-card:hover .service-img {
  transform: scale(1.08) rotate(1.5deg);
}

.service-item-title {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease;
}

.service-item-card:hover .service-item-title {
  transform: translateY(-3px);
  color: var(--secondary-color) !important;
  /* Red accent on hover */
}

/* ==========================================================================
   PROJECTS CARDS 3D INTERACTIVE TILT DEPTHEFFECTS
   ========================================================================== */
.project-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.4s ease;
}

.project-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.project-card-img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.project-card:hover .project-card-img {
  transform: translateZ(25px) scale(1.08);
  /* 3D layer depth pop */
}

.project-card-overlay {
  transform-style: preserve-3d;
  transition: background-color 0.4s ease;
}

.project-card-info {
  transform: translateZ(40px);
  /* 3D layer labels */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.project-card-link-btn {
  transform: translateZ(50px) rotate(0deg);
  /* 3D layer buttons */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
}

.project-card:hover .project-card-link-btn {
  background-color: var(--secondary-color) !important;
  transform: translateZ(50px) scale(1.1) rotate(45deg);
}

/* ==========================================================================
   CTA BUTTON PREMIUM HOVER EFFECTS
   ========================================================================== */
.hero-cta-btn,
.read-more-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.hero-cta-btn:hover {
  transform: translateY(-3px);
  background-color: #ffffff !important;
  color: var(--secondary-color) !important;
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.3);
}

.hero-cta-btn:hover .hero-cta-arrow svg path {
  stroke: var(--secondary-color) !important;
}

.read-more-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 82, 204, 0.3);
  background-color: var(--primary-color) !important;
  /* Premium brand blue on read more */
}

.hero-cta-arrow,
.read-more-arrow,
.view-projects-arrow {
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-cta-btn:hover .hero-cta-arrow,
.read-more-btn:hover .read-more-arrow,
.view-projects-btn:hover .view-projects-arrow {
  transform: translate(4px, -4px);
}

/* ==========================================================================
   ADVANCED GSAP + SPLITTING.JS ANIMATION STYLES
   ========================================================================== */

/* 1. Kinetic Marquee Banner */
.kinetic-marquee-wrapper {
  background: #0c0c0c;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
  white-space: nowrap;
}

.kinetic-marquee-track {
  display: flex;
  gap: 3rem;
  will-change: transform;
}

.marquee-item {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.marquee-star {
  color: var(--secondary-color);
  font-size: 1rem;
}

/* 2. Curtain Image Reveal Clips */
.curtain-reveal-wrapper {
  overflow: hidden;
  position: relative;
}

.curtain-reveal-img {
  will-change: transform, clip-path;
  transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 5. Spotlight Glow Effect on Cards */
.service-item-card,
.project-card,
.testimonial-card {
  position: relative;
}

.spotlight-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.08), transparent 40%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.service-item-card:hover .spotlight-glow,
.project-card:hover .spotlight-glow,
.testimonial-card:hover .spotlight-glow {
  opacity: 1;
}

/* 7. Liquid Sheen on Buttons */
.hero-cta-btn::before,
.read-more-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.hero-cta-btn:hover::before,
.read-more-btn:hover::before {
  left: 100%;
}

/* --- RESPONSIVE TYPOGRAPHY & FLUID HEADINGS --- */
.responsive-banner-title {
  font-size: clamp(1.8rem, 4vw + 1rem, 3.2rem) !important;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.responsive-section-title {
  font-size: clamp(1.5rem, 2.5vw + 0.75rem, 2.25rem) !important;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

@media (max-width: 991.98px) {
  .responsive-banner-title {
    font-size: clamp(1.75rem, 4vw + 0.5rem, 2.5rem) !important;
  }

  .responsive-section-title {
    font-size: clamp(1.4rem, 2.8vw + 0.5rem, 1.95rem) !important;
  }
}

@media (max-width: 575.98px) {
  .responsive-banner-title {
    font-size: clamp(1.5rem, 5.5vw + 0.2rem, 2rem) !important;
  }

  .responsive-section-title {
    font-size: clamp(1.3rem, 4.5vw + 0.2rem, 1.65rem) !important;
  }
}

/* --- SERVICES SWIPER & PAGINATION --- */
.services-swiper {
  width: 100%;
  padding-bottom: 45px !important;
}

.services-swiper .swiper-slide {
  height: auto;
}

.services-swiper .swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.15);
  opacity: 1;
  width: 8px;
  height: 8px;
  transition: all 0.3s ease;
}

.services-swiper .swiper-pagination-bullet-active {
  background: var(--primary-color) !important;
  width: 24px;
  border-radius: 4px;
}

/* --- REFINED LUXURY HEADER PHONE BUTTON (BRAND RED PILL) --- */
.az-header-phone-btn {
  background: linear-gradient(135deg, var(--secondary-color) 0%, #b30012 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff !important;
  padding: 5px 15px 5px 6px;
  border-radius: 50px;
  box-shadow: 0 4px 18px rgba(255, 0, 25, 0.32);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
  text-decoration: none;
}

.az-header-phone-icon {
  width: 32px;
  height: 32px;
  background: #ffffff;
  color: var(--secondary-color);
  border-radius: 50%;
  font-size: 0.82rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, color 0.3s ease;
}

.az-header-phone-sub {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.1;
  transition: color 0.3s ease;
}

.az-header-phone-num {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #ffffff;
  line-height: 1.2;
  transition: color 0.3s ease;
}

/* Hover: crisp white pill with red typography and elevated glow */
.az-header-phone-btn:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 0, 25, 0.42);
}

.az-header-phone-btn:hover .az-header-phone-icon {
  background: var(--secondary-color);
  color: #ffffff;
  transform: scale(1.08) rotate(12deg);
}

.az-header-phone-btn:hover .az-header-phone-sub {
  color: #64748b;
}

.az-header-phone-btn:hover .az-header-phone-num {
  color: var(--secondary-color);
}

/* Scrolled Sticky Navbar Adaptation */
.site-header.scrolled .az-header-phone-btn {
  padding: 4px 13px 4px 5px;
  box-shadow: 0 4px 16px rgba(255, 0, 25, 0.28);
}

.site-header.scrolled .az-header-phone-icon {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

.site-header.scrolled .az-header-phone-num {
  font-size: 0.8rem;
}

.site-header.scrolled .az-header-phone-sub {
  font-size: 0.52rem;
}

/* Mobile Top Bar Quick Call Button (Brand Red) */
.az-header-mobile-call-btn {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--secondary-color) 0%, #b30012 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.95rem;
  box-shadow: 0 3px 10px rgba(255, 0, 25, 0.35);
  transition: all 0.25s ease;
}

.az-header-mobile-call-btn:hover,
.az-header-mobile-call-btn:active {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--secondary-color);
  transform: scale(1.08);
}

.site-header.scrolled .az-header-mobile-call-btn {
  width: 34px;
  height: 34px;
  font-size: 0.85rem;
}

/* Mobile & Tablet Drawer Menu Adjustments */
@media (max-width: 991.98px) {
  .az-header-phone-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    margin-top: 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--secondary-color) 0%, #b30012 100%);
  }

  .az-header-phone-icon {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .az-header-phone-sub {
    font-size: 0.65rem;
  }

  .az-header-phone-num {
    font-size: 0.95rem;
  }
}

/* --- WPFORMS GLOBAL STYLING SYSTEM --- */
#az-wpforms-wrapper .wpforms-container,
#az-wpforms-wrapper .wpforms-container-full,
#az-wpforms-wrapper .wpforms-form,
.az-modal-wpforms-wrapper .wpforms-container,
.az-modal-wpforms-wrapper .wpforms-container-full,
.az-modal-wpforms-wrapper .wpforms-form {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
}

#az-wpforms-wrapper .wpforms-field-container,
.az-modal-wpforms-wrapper .wpforms-field-container {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 22px !important;
}

#az-wpforms-wrapper .wpforms-field,
.az-modal-wpforms-wrapper .wpforms-field {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 2-Column Grid for Name + Contact */
#az-wpforms-wrapper #wpforms-309-field_1-container,
#az-wpforms-wrapper #wpforms-309-field_2-container,
#az-wpforms-wrapper .wpforms-field-name,
#az-wpforms-wrapper .wpforms-field-phone,
#az-wpforms-wrapper .wpforms-one-half,
.az-modal-wpforms-wrapper #wpforms-309-field_1-container,
.az-modal-wpforms-wrapper #wpforms-309-field_2-container,
.az-modal-wpforms-wrapper .wpforms-field-name,
.az-modal-wpforms-wrapper .wpforms-field-phone,
.az-modal-wpforms-wrapper .wpforms-one-half {
  width: calc(50% - 11px) !important;
}

@media (max-width: 767px) {

  #az-wpforms-wrapper #wpforms-309-field_1-container,
  #az-wpforms-wrapper #wpforms-309-field_2-container,
  #az-wpforms-wrapper .wpforms-field-name,
  #az-wpforms-wrapper .wpforms-field-phone,
  #az-wpforms-wrapper .wpforms-one-half,
  .az-modal-wpforms-wrapper #wpforms-309-field_1-container,
  .az-modal-wpforms-wrapper #wpforms-309-field_2-container,
  .az-modal-wpforms-wrapper .wpforms-field-name,
  .az-modal-wpforms-wrapper .wpforms-field-phone,
  .az-modal-wpforms-wrapper .wpforms-one-half {
    width: 100% !important;
  }
}

/* Label Styling & Icons */
#az-wpforms-wrapper .wpforms-field-label,
#az-wpforms-wrapper label.wpforms-field-label,
.az-modal-wpforms-wrapper .wpforms-field-label,
.az-modal-wpforms-wrapper label.wpforms-field-label {
  display: flex !important;
  align-items: center !important;
  font-size: 0.875rem !important;
  font-weight: 650 !important;
  color: #0f172a !important;
  margin: 0 0 9px 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

#az-wpforms-wrapper .wpforms-required-label,
.az-modal-wpforms-wrapper .wpforms-required-label {
  color: var(--secondary-color) !important;
  margin-left: 4px !important;
  font-weight: 700 !important;
}

/* Label Icons */
#az-wpforms-wrapper .wpforms-field-name .wpforms-field-label::before,
#az-wpforms-wrapper #wpforms-309-field_1-container .wpforms-field-label::before,
.az-modal-wpforms-wrapper .wpforms-field-name .wpforms-field-label::before,
.az-modal-wpforms-wrapper #wpforms-309-field_1-container .wpforms-field-label::before {
  content: "\F4DA";
  font-family: "bootstrap-icons" !important;
  margin-right: 7px;
  font-size: 0.95rem;
  color: var(--primary-color);
}

#az-wpforms-wrapper .wpforms-field-phone .wpforms-field-label::before,
#az-wpforms-wrapper #wpforms-309-field_2-container .wpforms-field-label::before,
.az-modal-wpforms-wrapper .wpforms-field-phone .wpforms-field-label::before,
.az-modal-wpforms-wrapper #wpforms-309-field_2-container .wpforms-field-label::before {
  content: "\F5C7";
  font-family: "bootstrap-icons" !important;
  margin-right: 7px;
  font-size: 0.95rem;
  color: var(--primary-color);
}

#az-wpforms-wrapper #wpforms-309-field_4-container .wpforms-field-label::before,
.az-modal-wpforms-wrapper #wpforms-309-field_4-container .wpforms-field-label::before {
  content: "\F3E8";
  font-family: "bootstrap-icons" !important;
  margin-right: 7px;
  font-size: 0.95rem;
  color: var(--primary-color);
}

#az-wpforms-wrapper #wpforms-309-field_5-container .wpforms-field-label::before,
.az-modal-wpforms-wrapper #wpforms-309-field_5-container .wpforms-field-label::before {
  content: "\F51B";
  font-family: "bootstrap-icons" !important;
  margin-right: 7px;
  font-size: 0.95rem;
  color: var(--primary-color);
}

#az-wpforms-wrapper .wpforms-field-textarea .wpforms-field-label::before,
#az-wpforms-wrapper #wpforms-309-field_6-container .wpforms-field-label::before,
.az-modal-wpforms-wrapper .wpforms-field-textarea .wpforms-field-label::before,
.az-modal-wpforms-wrapper #wpforms-309-field_6-container .wpforms-field-label::before {
  content: "\F256";
  font-family: "bootstrap-icons" !important;
  margin-right: 7px;
  font-size: 0.95rem;
  color: var(--primary-color);
}

#az-wpforms-wrapper .wpforms-field-file-upload .wpforms-field-label::before,
#az-wpforms-wrapper #wpforms-309-field_7-container .wpforms-field-label::before,
.az-modal-wpforms-wrapper .wpforms-field-file-upload .wpforms-field-label::before,
.az-modal-wpforms-wrapper #wpforms-309-field_7-container .wpforms-field-label::before {
  content: "\F4A8";
  font-family: "bootstrap-icons" !important;
  margin-right: 7px;
  font-size: 0.95rem;
  color: var(--primary-color);
}

/* Luxury Input Controls */
#az-wpforms-wrapper input[type="text"],
/* Luxury Input Controls */
#az-wpforms-wrapper input[type="text"],
#az-wpforms-wrapper input[type="email"],
#az-wpforms-wrapper input[type="tel"],
#az-wpforms-wrapper input[type="url"],
#az-wpforms-wrapper input[type="number"],
#az-wpforms-wrapper input[type="password"],
#az-wpforms-wrapper select,
#az-wpforms-wrapper textarea,
.az-modal-wpforms-wrapper input[type="text"],
.az-modal-wpforms-wrapper input[type="email"],
.az-modal-wpforms-wrapper input[type="tel"],
.az-modal-wpforms-wrapper input[type="url"],
.az-modal-wpforms-wrapper input[type="number"],
.az-modal-wpforms-wrapper input[type="password"],
.az-modal-wpforms-wrapper select,
.az-modal-wpforms-wrapper textarea,
div.wpforms-container input[type="text"],
div.wpforms-container input[type="email"],
div.wpforms-container input[type="tel"],
div.wpforms-container select,
div.wpforms-container textarea {
  display: block !important;
  width: 100% !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 15px 20px !important;
  font-size: 0.94rem !important;
  color: #0f172a !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════
   WPFORMS SMART PHONE / INTL-TEL-INPUT GLOBAL FIX
   ══════════════════════════════════════════════════════ */
.wpforms-container .wpforms-field,
#az-wpforms-wrapper .wpforms-field,
.az-modal-wpforms-wrapper .wpforms-field {
  position: relative !important;
  z-index: 1;
}

.wpforms-container .wpforms-field-phone,
#az-wpforms-wrapper .wpforms-field-phone,
.az-modal-wpforms-wrapper .wpforms-field-phone {
  position: relative !important;
  z-index: 50 !important;
  overflow: visible !important;
}

.wpforms-container .wpforms-field-phone:focus-within,
.wpforms-container .wpforms-field-phone:hover,
#az-wpforms-wrapper .wpforms-field-phone:focus-within,
#az-wpforms-wrapper .wpforms-field-phone:hover,
.az-modal-wpforms-wrapper .wpforms-field-phone:focus-within,
.az-modal-wpforms-wrapper .wpforms-field-phone:hover {
  z-index: 999999 !important;
}

.wpforms-container .iti,
#az-wpforms-wrapper .iti,
.az-modal-wpforms-wrapper .iti,
.iti {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
}

.wpforms-container .iti input[type="tel"],
.wpforms-container input.wpforms-smart-phone-field,
#az-wpforms-wrapper .iti input[type="tel"],
#az-wpforms-wrapper input.wpforms-smart-phone-field,
.az-modal-wpforms-wrapper .iti input[type="tel"],
.az-modal-wpforms-wrapper input.wpforms-smart-phone-field {
  padding-left: 56px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.wpforms-container .iti__country-container,
.wpforms-container .iti__flag-container,
#az-wpforms-wrapper .iti__country-container,
#az-wpforms-wrapper .iti__flag-container,
.az-modal-wpforms-wrapper .iti__country-container,
.az-modal-wpforms-wrapper .iti__flag-container {
  z-index: 10 !important;
}

.wpforms-container .iti__country-list,
.wpforms-container .iti__dropdown-content,
#az-wpforms-wrapper .iti__country-list,
#az-wpforms-wrapper .iti__dropdown-content,
.az-modal-wpforms-wrapper .iti__country-list,
.az-modal-wpforms-wrapper .iti__dropdown-content,
.iti__country-list,
.iti__dropdown-content {
  z-index: 9999999 !important;
  position: absolute !important;
}

#az-wpforms-wrapper input:hover,
#az-wpforms-wrapper textarea:hover,
#az-wpforms-wrapper select:hover,
.az-modal-wpforms-wrapper input:hover,
.az-modal-wpforms-wrapper textarea:hover,
.az-modal-wpforms-wrapper select:hover {
  border-color: rgba(36, 76, 149, 0.35) !important;
  background: #ffffff !important;
}

#az-wpforms-wrapper input:focus,
#az-wpforms-wrapper select:focus,
#az-wpforms-wrapper textarea:focus,
.az-modal-wpforms-wrapper input:focus,
.az-modal-wpforms-wrapper select:focus,
.az-modal-wpforms-wrapper textarea:focus {
  border-color: var(--primary-color) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(36, 76, 149, 0.12), 0 6px 20px rgba(36, 76, 149, 0.08) !important;
  outline: none !important;
}

#az-wpforms-wrapper input::placeholder,
#az-wpforms-wrapper textarea::placeholder,
.az-modal-wpforms-wrapper input::placeholder,
.az-modal-wpforms-wrapper textarea::placeholder {
  color: #94a3b8 !important;
  font-size: 0.88rem !important;
  opacity: 1 !important;
}

#az-wpforms-wrapper textarea,
.az-modal-wpforms-wrapper textarea {
  min-height: 135px !important;
  resize: vertical !important;
}

/* File Upload Area */
#az-wpforms-wrapper .wpforms-field-file-upload .wpforms-uploader-default,
#az-wpforms-wrapper .wpforms-field-file-upload .wpforms-field-upload-wrapper,
.az-modal-wpforms-wrapper .wpforms-field-file-upload .wpforms-uploader-default,
.az-modal-wpforms-wrapper .wpforms-field-file-upload .wpforms-field-upload-wrapper {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 2px dashed rgba(36, 76, 149, 0.25) !important;
  border-radius: 14px !important;
  padding: 32px 24px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

#az-wpforms-wrapper .wpforms-field-file-upload .wpforms-uploader-default:hover,
.az-modal-wpforms-wrapper .wpforms-field-file-upload .wpforms-uploader-default:hover {
  border-color: var(--primary-color) !important;
  background: rgba(36, 76, 149, 0.03) !important;
  box-shadow: 0 8px 24px rgba(36, 76, 149, 0.08) !important;
}

/* Submit Button */
#az-wpforms-wrapper .wpforms-submit-container,
.az-modal-wpforms-wrapper .wpforms-submit-container {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  display: block !important;
  clear: both !important;
  width: 100% !important;
}

#az-wpforms-wrapper button[type="submit"].wpforms-submit,
#az-wpforms-wrapper .wpforms-submit,
.az-modal-wpforms-wrapper button[type="submit"].wpforms-submit,
.az-modal-wpforms-wrapper .wpforms-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 17px 32px !important;
  background: linear-gradient(135deg, var(--secondary-color) 0%, #d60017 50%, #b30013 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 6px 20px rgba(255, 0, 25, 0.25) !important;
}

#az-wpforms-wrapper .wpforms-submit::after,
.az-modal-wpforms-wrapper .wpforms-submit::after {
  content: "\F138";
  font-family: "bootstrap-icons" !important;
  font-size: 1.15rem;
  transition: transform 0.25s ease;
}

#az-wpforms-wrapper .wpforms-submit:hover,
.az-modal-wpforms-wrapper .wpforms-submit:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(255, 0, 25, 0.38) !important;
  background: linear-gradient(135deg, #ff1a35 0%, var(--secondary-color) 50%, #cc0014 100%) !important;
}

#az-wpforms-wrapper .wpforms-submit:hover::after,
.az-modal-wpforms-wrapper .wpforms-submit:hover::after {
  transform: translateX(4px);
}

/* Validation & Feedback */
#az-wpforms-wrapper label.wpforms-error,
.az-modal-wpforms-wrapper label.wpforms-error {
  color: var(--secondary-color) !important;
  font-size: 0.81rem !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  display: block !important;
}

#az-wpforms-wrapper input.wpforms-error,
#az-wpforms-wrapper textarea.wpforms-error,
.az-modal-wpforms-wrapper input.wpforms-error,
.az-modal-wpforms-wrapper textarea.wpforms-error {
  border-color: var(--secondary-color) !important;
  background: rgba(255, 0, 25, 0.02) !important;
  box-shadow: 0 0 0 4px rgba(255, 0, 25, 0.1) !important;
}

#az-wpforms-wrapper .wpforms-confirmation-container-full,
#az-wpforms-wrapper .wpforms-confirmation-container,
.az-modal-wpforms-wrapper .wpforms-confirmation-container-full,
.az-modal-wpforms-wrapper .wpforms-confirmation-container {
  background: rgba(36, 76, 149, 0.05) !important;
  border: 1.5px solid rgba(36, 76, 149, 0.2) !important;
  border-radius: 14px !important;
  padding: 32px 28px !important;
  text-align: center !important;
  color: #0f172a !important;
}

#az-wpforms-wrapper hr,
.az-modal-wpforms-wrapper hr {
  display: none !important;
}

content: "\F256";
font-family: "bootstrap-icons" !important;
margin-right: 7px;
font-size: 0.95rem;
color: var(--primary-color);
}

#az-wpforms-wrapper .wpforms-field-file-upload .wpforms-field-label::before,
#az-wpforms-wrapper #wpforms-309-field_7-container .wpforms-field-label::before {
  content: "\F4A8";
  font-family: "bootstrap-icons" !important;
  margin-right: 7px;
  font-size: 0.95rem;
  color: var(--primary-color);
}

/* Luxury Input Controls */
#az-wpforms-wrapper input[type="text"],
#az-wpforms-wrapper input[type="email"],
#az-wpforms-wrapper input[type="tel"],
#az-wpforms-wrapper input[type="url"],
#az-wpforms-wrapper input[type="number"],
#az-wpforms-wrapper input[type="password"],
#az-wpforms-wrapper select,
#az-wpforms-wrapper textarea {
  display: block !important;
  width: 100% !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 15px 20px !important;
  font-size: 0.94rem !important;
  color: #0f172a !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#az-wpforms-wrapper input:hover,
#az-wpforms-wrapper textarea:hover,
#az-wpforms-wrapper select:hover {
  border-color: rgba(36, 76, 149, 0.35) !important;
  background: #ffffff !important;
}

#az-wpforms-wrapper input:focus,
#az-wpforms-wrapper select:focus,
#az-wpforms-wrapper textarea:focus {
  border-color: var(--primary-color) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(36, 76, 149, 0.12), 0 6px 20px rgba(36, 76, 149, 0.08) !important;
  outline: none !important;
}

#az-wpforms-wrapper input::placeholder,
#az-wpforms-wrapper textarea::placeholder {
  color: #94a3b8 !important;
  font-size: 0.88rem !important;
  opacity: 1 !important;
}

#az-wpforms-wrapper textarea {
  min-height: 135px !important;
  resize: vertical !important;
}

/* File Upload Area */
#az-wpforms-wrapper .wpforms-field-file-upload .wpforms-uploader-default,
#az-wpforms-wrapper .wpforms-field-file-upload .wpforms-field-upload-wrapper {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 2px dashed rgba(36, 76, 149, 0.25) !important;
  border-radius: 14px !important;
  padding: 32px 24px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

#az-wpforms-wrapper .wpforms-field-file-upload .wpforms-uploader-default:hover {
  border-color: var(--primary-color) !important;
  background: rgba(36, 76, 149, 0.03) !important;
  box-shadow: 0 8px 24px rgba(36, 76, 149, 0.08) !important;
}

/* Submit Button */
#az-wpforms-wrapper .wpforms-submit-container {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  display: block !important;
  clear: both !important;
  width: 100% !important;
}

#az-wpforms-wrapper button[type="submit"].wpforms-submit,
#az-wpforms-wrapper .wpforms-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 17px 32px !important;
  background: linear-gradient(135deg, var(--secondary-color) 0%, #d60017 50%, #b30013 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 6px 20px rgba(255, 0, 25, 0.25) !important;
}

#az-wpforms-wrapper .wpforms-submit::after {
  content: "\F138";
  font-family: "bootstrap-icons" !important;
  font-size: 1.15rem;
  transition: transform 0.25s ease;
}

#az-wpforms-wrapper .wpforms-submit:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(255, 0, 25, 0.38) !important;
  background: linear-gradient(135deg, #ff1a35 0%, var(--secondary-color) 50%, #cc0014 100%) !important;
}

#az-wpforms-wrapper .wpforms-submit:hover::after {
  transform: translateX(4px);
}

/* Validation & Feedback */
#az-wpforms-wrapper label.wpforms-error {
  color: var(--secondary-color) !important;
  font-size: 0.81rem !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  display: block !important;
}

#az-wpforms-wrapper input.wpforms-error,
#az-wpforms-wrapper textarea.wpforms-error {
  border-color: var(--secondary-color) !important;
  background: rgba(255, 0, 25, 0.02) !important;
  box-shadow: 0 0 0 4px rgba(255, 0, 25, 0.1) !important;
}

#az-wpforms-wrapper .wpforms-confirmation-container-full,
#az-wpforms-wrapper .wpforms-confirmation-container {
  background: rgba(36, 76, 149, 0.05) !important;
  border: 1.5px solid rgba(36, 76, 149, 0.2) !important;
  border-radius: 14px !important;
  padding: 32px 28px !important;
  text-align: center !important;
  color: #0f172a !important;
}

#az-wpforms-wrapper hr {
  display: none !important;
}

#az-wpforms-wrapper .wpforms-clear,
#az-wpforms-wrapper .wpforms-cf {
  clear: both !important;
  display: block !important;
}

#az-wpforms-wrapper .wpforms-submit-spinner {
  display: inline-block !important;
  margin-left: 8px !important;
}

/* --- COMPACT MODAL FORM GRID (PREVENT SCROLLING) --- */
#quoteModal #az-wpforms-wrapper .wpforms-field-container {
  gap: 10px !important;
}

#quoteModal #az-wpforms-wrapper .wpforms-field {
  width: calc(50% - 5px) !important;
  margin-bottom: 0 !important;
}

/* Name, Phone, Email, Site Address are 50% width */
#quoteModal #az-wpforms-wrapper #wpforms-309-field_1-container,
#quoteModal #az-wpforms-wrapper #wpforms-309-field_2-container,
#quoteModal #az-wpforms-wrapper #wpforms-309-field_3-container,
#quoteModal #az-wpforms-wrapper #wpforms-309-field_4-container,
#quoteModal #az-wpforms-wrapper .wpforms-field-name,
#quoteModal #az-wpforms-wrapper .wpforms-field-phone {
  width: calc(50% - 5px) !important;
}

/* Description (textarea), Approx Meter, File Upload, and Submit button are full width */
#quoteModal #az-wpforms-wrapper #wpforms-309-field_5-container,
#quoteModal #az-wpforms-wrapper #wpforms-309-field_6-container,
#quoteModal #az-wpforms-wrapper #wpforms-309-field_7-container,
#quoteModal #az-wpforms-wrapper .wpforms-field-textarea,
#quoteModal #az-wpforms-wrapper .wpforms-field-file-upload,
#quoteModal #az-wpforms-wrapper .wpforms-submit-container {
  width: 100% !important;
}

#quoteModal #az-wpforms-wrapper textarea {
  min-height: 55px !important;
  height: 55px !important;
  padding: 8px 12px !important;
}

#quoteModal #az-wpforms-wrapper .wpforms-field-file-upload .wpforms-uploader-default {
  padding: 10px 15px !important;
  min-height: auto !important;
}

#quoteModal #az-wpforms-wrapper .wpforms-field-file-upload .wpforms-uploader-default .wpforms-attachment-icon {
  font-size: 1.2rem !important;
  margin-bottom: 4px !important;
}

#quoteModal #az-wpforms-wrapper input[type="text"],
#quoteModal #az-wpforms-wrapper input[type="email"],
#quoteModal #az-wpforms-wrapper input[type="tel"],
#quoteModal #az-wpforms-wrapper select {
  padding: 8px 14px !important;
  font-size: 0.88rem !important;
}

#quoteModal #az-wpforms-wrapper .wpforms-field-label,
#quoteModal #az-wpforms-wrapper label.wpforms-field-label {
  margin-bottom: 3px !important;
  font-size: 0.8rem !important;
}

#quoteModal #az-wpforms-wrapper button[type="submit"].wpforms-submit,
#quoteModal #az-wpforms-wrapper .wpforms-submit {
  padding: 11px 24px !important;
  font-size: 0.88rem !important;
  border-radius: 8px !important;
}

#quoteModal .modal-body {
  overflow-y: auto !important;
  max-height: calc(100vh - 180px) !important;
}

/* ============================================
   PREMIUM MAINTENANCE MODAL - TWO PANEL
   ============================================ */
#quote-modal-content {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Floating Close Button */
.quote-modal-close {
  position: absolute !important;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  backdrop-filter: blur(6px);
  transition: all 0.2s ease;
  filter: invert(1) brightness(2);
}

.quote-modal-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.1);
}

/* LEFT DARK ACCENT PANEL */
.quote-modal-left {
  width: 220px;
  flex-shrink: 0;
  background: linear-gradient(160deg, #0b1a3d 0%, #142c6e 55%, #1a3580 100%);
  padding: 36px 24px 28px;
  position: relative;
  overflow: hidden;
}

.quote-modal-left::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 0, 25, 0.18) 0%, transparent 70%);
  border-radius: 50%;
}

.quote-modal-left::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--secondary-color), transparent);
}

.quote-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  padding: 5px 14px;
  margin-bottom: 22px;
  color: #a8c4ff;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.quote-modal-badge .badge-dot {
  width: 6px;
  height: 6px;
  background: var(--secondary-color);
  border-radius: 50%;
  flex-shrink: 0;
}

.quote-modal-title {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px;
}

.quote-modal-title span {
  color: var(--secondary-color);
}

.quote-modal-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  line-height: 1.65;
  margin-bottom: 0;
}

.quote-modal-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quote-modal-features li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.78rem;
  font-weight: 500;
}

.quote-modal-features li i {
  color: var(--secondary-color);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.quote-modal-contact {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}

.quote-modal-contact i {
  color: var(--secondary-color);
  font-size: 0.9rem;
}

/* RIGHT FORM PANEL */
.quote-modal-right {
  background: #ffffff;
  padding: 32px 28px 24px;
  overflow-y: auto;
  max-height: 88vh;
}

.quote-modal-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
  color: #9ca3af;
  font-size: 0.74rem;
}

.quote-modal-privacy i {
  color: var(--primary-color);
  font-size: 0.85rem;
}

/* Compact form inside modal right panel */
#quoteModal #az-wpforms-wrapper input[type="text"],
#quoteModal #az-wpforms-wrapper input[type="email"],
#quoteModal #az-wpforms-wrapper input[type="tel"],
#quoteModal #az-wpforms-wrapper select {
  padding: 9px 14px !important;
  font-size: 0.87rem !important;
  border-radius: 10px !important;
}

#quoteModal #az-wpforms-wrapper textarea {
  border-radius: 10px !important;
}

/* --- PREMIUM DROPDOWN SUB-MENU --- */
.navbar-nav .nav-item.dropdown {
  position: relative;
}

/* Hover trigger for Desktop */
@media (min-width: 992px) {
  .navbar-nav .nav-item.dropdown {
    padding-bottom: 12px !important;
    margin-bottom: -12px !important;
  }

  .navbar-nav .nav-item.dropdown:hover>.dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .navbar-nav .dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: rgba(12, 12, 12, 0.96) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    padding: 10px 0 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    margin-top: 5px !important;
  }

  .navbar-nav .nav-item.dropdown:hover>.dropdown-menu {
    display: block !important;
  }

  /* Scrolled sticky state adjustments */
  .site-header.scrolled .navbar-nav .dropdown-menu {
    background: rgba(20, 20, 20, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
}

/* Dropdown toggler caret removal or custom design */
.navbar-nav .dropdown-toggle::after {
  content: "\F282" !important;
  font-family: "bootstrap-icons" !important;
  border: none !important;
  font-size: 0.7rem;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform 0.25s ease;
  display: inline-block;
}

.navbar-nav .nav-item.dropdown:hover .dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Dropdown item styling */
.navbar-nav .dropdown-menu .dropdown-item {
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: var(--font-main);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 10px 20px !important;
  transition: all 0.25s ease !important;
  background: transparent !important;
  border-left: 3px solid transparent;
}

.navbar-nav .dropdown-menu .dropdown-item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-left: 3px solid var(--secondary-color);
  padding-left: 24px !important;
}

/* Sticky Nav Scrolled Text adjustment for child links */
.site-header.scrolled.nav-light-theme .navbar-nav .dropdown-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
}

/*.site-header.scrolled.nav-light-theme .navbar-nav .dropdown-menu .dropdown-item {
  color: #1d70e8 !important;
}*/
.site-header.scrolled.nav-light-theme .navbar-nav .dropdown-menu .dropdown-item {
  color: #1d70e8 !important;
}

.site-header.scrolled.nav-light-theme .navbar-nav .dropdown-menu .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--secondary-color) !important;
}

/* --- MOBILE OFF-CANVAS SLIDE-IN NAV DRAWER --- */
@media (max-width: 991px) {
  .site-header .navbar-collapse {
    position: fixed !important;
    top: 0 !important;
    right: -300px !important;
    /* Start offscreen on the right */
    width: 300px !important;
    height: 100vh !important;
    background: #0d0e12 !important;
    /* Solid premium dark background */
    padding: 70px 24px 30px !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 99999 !important;
    box-shadow: -8px 0 25px rgba(0, 0, 0, 0.6) !important;
    display: block !important;
    overflow-y: auto !important;
    border-left: 2px solid var(--secondary-color) !important;
    pointer-events: none !important;
    /* Prevents closed drawer from blocking clicks */
  }

  .site-header .navbar-collapse.show {
    transform: translateX(-300px) !important;
    /* Slide in to the left */
    pointer-events: auto !important;
    /* Enable clicks when visible */
  }

  /* Close Button in Mobile Drawer */
  .mobile-close-btn {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    z-index: 100000 !important;
    transition: all 0.2s ease !important;
  }

  .mobile-close-btn:hover {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    transform: rotate(90deg) !important;
  }

  /* Adjust mobile nav link layouts */
  .site-header .navbar-nav {
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    padding-top: 15px !important;
  }

  .site-header .navbar-nav .nav-link {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    /* Force crisp white always */
    padding: 12px 14px !important;
    width: 100% !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: none !important;
    text-align: left !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
  }

  /* Force white color in scrolled state */
  .site-header.scrolled .navbar-collapse .navbar-nav .nav-link,
  .site-header.scrolled.nav-light-theme .navbar-collapse .navbar-nav .nav-link {
    color: #ffffff !important;
  }

  .site-header .navbar-nav .nav-link:hover,
  .site-header .navbar-nav .nav-link.active,
  .site-header.scrolled .navbar-collapse .navbar-nav .nav-link:hover,
  .site-header.scrolled.nav-light-theme .navbar-collapse .navbar-nav .nav-link:hover {
    background: rgba(255, 0, 25, 0.08) !important;
    color: var(--secondary-color) !important;
  }

  /* Mobile Dropdown styles */
  .site-header .navbar-nav .dropdown-menu {
    position: static !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 5px 0 !important;
    margin-top: 4px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: none !important;
  }

  .site-header .navbar-nav .dropdown-menu.show {
    display: block !important;
  }

  .site-header .navbar-nav .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    padding: 10px 18px !important;
    border-left: 3px solid transparent !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .site-header .navbar-nav .dropdown-menu .dropdown-item::before {
    content: "\F138";
    font-family: "bootstrap-icons" !important;
    font-size: 0.75rem !important;
    color: var(--secondary-color) !important;
  }

  .site-header .navbar-nav .dropdown-menu .dropdown-item:hover {
    color: #ffffff !important;
    border-left: 3px solid var(--secondary-color) !important;
    background: rgba(255, 255, 255, 0.02) !important;
  }

  /* Custom Backdrop for Mobile Drawer - Disabled to remove shadow */
  .navbar-backdrop {
    display: none !important;
  }

  /* Keep Maintenance button clean on mobile */
  .site-header .navbar-nav .quote-trigger-btn {
    width: 100% !important;
    margin-top: 10px !important;
    padding: 12px !important;
    font-size: 0.85rem !important;
  }
}

/* --- CUSTOM DESIGNER TOGGLER BUTTON --- */
@media (max-width: 991px) {
  .navbar-toggler.custom-toggler {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 30px !important;
    height: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .custom-toggler .toggler-bar {
    display: block !important;
    width: 100% !important;
    height: 2.5px !important;
    /* Slightly thicker for better visibility */
    background-color: var(--secondary-color) !important;
    /* Bold Red accent */
    border-radius: 4px !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  /* Designer look: Shorter middle bar */
  .custom-toggler .bar-middle {
    width: 70% !important;
    align-self: flex-end !important;
  }

  .custom-toggler:hover .bar-middle,
  .custom-toggler:focus .bar-middle {
    width: 100% !important;
  }

  /* Keep it red on sticky scroll states too for premium visibility */
  .site-header.scrolled .custom-toggler .toggler-bar,
  .site-header.scrolled.nav-light-theme .custom-toggler .toggler-bar {
    background-color: var(--secondary-color) !important;
  }
}

/* --- SERVICES SECTION TABS --- */
.services-top-link {
  font-family: var(--font-main);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-light) !important;
  text-transform: uppercase;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 6px !important;
}

.services-top-link i {
  font-size: 0.8rem;
  transition: transform 0.25s ease;
  display: inline-block;
}

.services-top-link:hover {
  color: var(--text-dark) !important;
}

.services-top-link:hover i {
  transform: translate(2px, -2px);
}

.services-top-link.active-link {
  color: var(--primary-color) !important;
}

.services-top-link.active-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

/* --- MOBILE RESPONSIVE MODAL & FORM FIELDS --- */
@media (max-width: 767px) {
  #quoteModal #az-wpforms-wrapper .wpforms-field {
    width: 100% !important;
  }

  #quoteModal #az-wpforms-wrapper #wpforms-309-field_1-container,
  #quoteModal #az-wpforms-wrapper #wpforms-309-field_2-container,
  #quoteModal #az-wpforms-wrapper #wpforms-309-field_3-container,
  #quoteModal #az-wpforms-wrapper #wpforms-309-field_4-container,
  #quoteModal #az-wpforms-wrapper .wpforms-field-name,
  #quoteModal #az-wpforms-wrapper .wpforms-field-phone {
    width: 100% !important;
  }

  #quoteModal.modal {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #quoteModal .modal-dialog {
    margin: 16px auto !important;
    max-height: none !important;
    height: auto !important;
  }

  #quoteModal .modal-dialog-scrollable {
    max-height: none !important;
    display: block !important;
  }

  #quoteModal .modal-dialog-scrollable .modal-content {
    max-height: none !important;
    overflow: visible !important;
  }

  #quoteModal .modal-body {
    max-height: none !important;
    overflow: visible !important;
    padding: 20px !important;
  }
}

#az-wpforms-wrapper select#wpforms-435-field_4 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: normal !important;
}




/* Maintenance Request CTA button (solid brand red default, flips to crisp white on hover) */
.hero-cta-btn-maintenance {
  background: var(--secondary-color) !important;
  border: 1.5px solid var(--secondary-color) !important;
  color: #ffffff !important;
}

.hero-cta-btn-maintenance:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--secondary-color) !important;
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.3) !important;
}

.hero-cta-btn-maintenance:hover .hero-cta-arrow svg path {
  stroke: var(--secondary-color) !important;
}


/* --- FEATURED ARCHITECTURAL & STRUCTURAL CARD HIGHLIGHT --- */
.az-featured-project,
.az-featured-service {
  border-color: var(--secondary-color) !important;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--secondary-color) 0%, rgba(36, 76, 149, 0.4) 100%) border-box !important;
  border: 2px solid transparent !important;
  box-shadow: 0 15px 35px rgba(255, 0, 25, 0.06), 0 5px 15px rgba(12, 18, 32, 0.04) !important;
}

.az-featured-project:hover,
.az-featured-service:hover {
  box-shadow: 0 24px 50px rgba(255, 0, 25, 0.14), 0 8px 22px rgba(36, 76, 149, 0.1) !important;
  transform: translateY(-8px) !important;
}

.az-featured-project h3 a,
.az-featured-service h3 a {
  color: var(--secondary-color) !important;
}

.az-featured-project h3 a:hover,
.az-featured-service h3 a:hover {
  color: var(--primary-color) !important;
}

/* capabilities bar */
@media (max-width: 768px) {
  .capabilities-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px 0; /* Adds vertical space between the two lines */
  }

  .capabilities-bar .capability-item {
    /* Set to ~45% to allow space for the remaining divider in between */
    flex-basis: 45%; 
    text-align: center;
    box-sizing: border-box;
  }

  /* Hide the middle divider (the 4th element in the list) */
  .capabilities-bar > span:nth-child(4) {
    display: none;
  }

  /* Ensure the other dividers stay visible and centered */
  .capabilities-bar .capability-divider {
    display: block;
    width: auto;
  }
} like thisssssss