/* Future Clean visual system — shared UI layer */
:root {
  --fc-ink: #092328;
  --fc-muted: #496467;
  --fc-brand: #2A835F;
  --fc-brand-dark: #12544F;
  --fc-accent: #8BBB92;
  --fc-surface: #ffffff;
  --fc-soft: #f4f8f8;
  --fc-line: #d6e7dc;
  --fc-radius: 18px;
  --fc-shadow: 0 16px 45px rgba(17, 43, 60, .09);
  --fc-shadow-hover: 0 22px 55px rgba(17, 43, 60, .15);
}
html { scroll-behavior: smooth; }
body { background: var(--fc-soft); color: var(--fc-ink); line-height: 1.8; }
body, h1, h2, h3, h4, h5, h6, p, a, span, button, input, select, textarea { font-family: 'Cairo', sans-serif !important; }
.container { max-width: 1180px !important; }
.navbar { min-height: 78px; background: rgba(9,35,40,.98) !important; border-bottom: 1px solid rgba(139,187,146,.35); box-shadow: 0 8px 28px rgba(4,20,24,.28) !important; backdrop-filter: blur(14px); }
.navbar .container { min-height: 78px; }
.navbar-brand img { width: auto; height: 54px; object-fit: contain; }
.navbar-nav { gap: 4px; align-items: center; }
.navbar .nav-link { color: rgba(255,255,255,.9) !important; font-size: .92rem; font-weight: 700; padding: .65rem .8rem !important; border-radius: 10px; transition: color .2s ease, background .2s ease; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--fc-accent) !important; background: rgba(139,187,146,.14); }
.navbar .nav-link.active { color: var(--fc-ink) !important; background: var(--fc-accent); }
.navbar .dropdown-menu { background: var(--fc-brand-dark) !important; border: 1px solid rgba(139,187,146,.4) !important; border-radius: 16px; padding: 12px; box-shadow: 0 18px 40px rgba(4,20,24,.3) !important; }
.navbar .dropdown-header { color: var(--fc-accent); font-weight: 800; }
.navbar .dropdown-item { border-radius: 9px; padding: .5rem .75rem; color: rgba(255,255,255,.9); }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background: var(--fc-accent); color: var(--fc-ink); }
.navbar-toggler { color: var(--fc-accent) !important; padding: .45rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(139,187,146,.3); }
.navbar .nav-cta { margin-right: 1rem; white-space: nowrap; }
.custom-mobile-menu { border-radius: 20px 0 0 20px; background: var(--fc-ink) !important; color: #fff; border-left: 1px solid rgba(139,187,146,.35); box-shadow: -10px 0 30px rgba(4,20,24,.35); }
.custom-mobile-menu .offcanvas-header { padding: 22px; }
.custom-mobile-menu .nav-link { color: rgba(255,255,255,.92) !important; border-bottom: 1px solid rgba(139,187,146,.2); }
.custom-mobile-menu .nav-link:hover, .custom-mobile-menu .nav-link:focus { color: var(--fc-ink) !important; background: var(--fc-accent); }
.custom-mobile-menu .offcanvas-body .collapse a { color: rgba(255,255,255,.78); }
.custom-mobile-menu .offcanvas-body .collapse a:hover { color: var(--fc-accent); }
.custom-mobile-menu .offcanvas-body .collapse strong { color: var(--fc-accent); }
.custom-mobile-menu .offcanvas-header .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .9; }
h1, h2, h3, h4, h5, h6 { color: var(--fc-ink); letter-spacing: -.02em; }
h1, h2 { font-weight: 800; }
p { color: var(--fc-muted); }
.btn { border-radius: 10px !important; padding: .72rem 1.35rem !important; font-weight: 800 !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important; }
.btn:hover { transform: translateY(-2px); }
.btn-info, .btn-primary { background: var(--fc-brand) !important; border-color: var(--fc-brand) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(15,107,120,.2); }
.btn-info:hover, .btn-primary:hover { background: var(--fc-brand-dark) !important; border-color: var(--fc-brand-dark) !important; box-shadow: 0 12px 24px rgba(15,107,120,.27); }
.btn-outline-custom, .btn-outline-info { color: var(--fc-brand) !important; border-color: var(--fc-brand) !important; }
.btn-outline-custom:hover, .btn-outline-info:hover { color: #fff !important; background: var(--fc-brand) !important; }
.text-info, .text-primary { color: var(--fc-brand) !important; }
.bg-light { background: var(--fc-soft) !important; }
#heroCarousel { margin-top: 78px; background: var(--fc-ink); }
#heroCarousel .carousel-item, #heroCarousel .carousel-bg { height: min(72vh, 680px); min-height: 470px; }
#heroCarousel .carousel-bg { background-position: center; background-size: cover; filter: saturate(.88) brightness(.78); }
#heroCarousel .carousel-item::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(9,35,40,.18) 0%, rgba(9,35,40,.42) 38%, rgba(9,35,40,.76) 72%, rgba(9,35,40,.94) 100%), linear-gradient(0deg, rgba(9,35,40,.32), transparent 48%); }
#heroCarousel .carousel-caption { z-index: 3; inset: 0 10% 0 auto; width: min(600px, 74%); display: flex !important; flex-direction: column; justify-content: center; align-items: flex-start; text-align: right; transform: none; padding: 2rem 2.2rem; border-right: 3px solid var(--fc-accent); border-radius: 18px; background: rgba(9,35,40,.22); box-shadow: 0 18px 42px rgba(9,35,40,.16); backdrop-filter: blur(3px); }
#heroCarousel .slide-title { color: #fff; font-size: clamp(2.15rem, 4vw, 4.2rem); line-height: 1.22; font-weight: 800; text-shadow: 0 3px 18px rgba(9,35,40,.8); max-width: 100%; }
#heroCarousel .slide-subtitle { color: rgba(255,255,255,.94); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.9; max-width: 520px; text-shadow: 0 2px 10px rgba(9,35,40,.8); }
#heroCarousel .carousel-caption .btn-outline-light { color: #fff !important; background: var(--fc-brand) !important; border: 2px solid var(--fc-brand) !important; box-shadow: 0 8px 20px rgba(9,35,40,.3); }
#heroCarousel .carousel-caption .btn-outline-light:hover, #heroCarousel .carousel-caption .btn-outline-light:focus { color: var(--fc-ink) !important; background: var(--fc-accent) !important; border-color: var(--fc-accent) !important; }
#heroCarousel .carousel-indicators { z-index: 4; bottom: 28px; }
#heroCarousel .carousel-indicators button { width: 30px; height: 5px; border: 0; border-radius: 10px; background: rgba(255,255,255,.55); }
#heroCarousel .carousel-indicators button.active { background: var(--fc-accent); }
#heroCarousel .custom-arrow { z-index: 4; width: 8%; color: #fff; text-shadow: 0 2px 12px rgba(9,35,40,.9); }
.hero-banner { margin-top: 78px; padding: 90px 0 !important; background: linear-gradient(135deg, #eaf4f4, #f8fbfb); }
.hero-banner h1 { font-size: clamp(2.2rem, 4vw, 4rem); }
section { position: relative; }
section.py-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.card, .service-card, .feature-box, .feature-item, .work-box, .glass-form { border: 1px solid var(--fc-line) !important; border-radius: var(--fc-radius) !important; box-shadow: var(--fc-shadow) !important; }
.card, .service-card, .feature-box, .feature-item { background: var(--fc-surface) !important; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.card:hover, .service-card:hover, .feature-box:hover, .feature-item:hover { transform: translateY(-6px); box-shadow: var(--fc-shadow-hover) !important; }
.card-img-top, .service-img { object-fit: cover; }
.nav-tabs { border-bottom: 1px solid var(--fc-line); gap: 8px; }
.nav-tabs .nav-link { border: 0 !important; color: var(--fc-muted); font-weight: 800; border-radius: 10px 10px 0 0 !important; }
.nav-tabs .nav-link.active { color: #fff; background: var(--fc-brand); }
.skewed-divider-section { background: transparent; padding: 0; }
.animated-line-divider span { background: var(--fc-accent); height: 3px; }
.triangle { border-bottom-color: var(--fc-accent); }
.work-box { height: 300px; }
.work-overlay { background: linear-gradient(180deg, rgba(8,43,53,.05), rgba(8,43,53,.82)); color: #fff; opacity: 1; display: flex; align-items: flex-end; }
.work-box:hover { transform: translateY(-5px); }
.about-us-section { background: var(--fc-soft); }
.about-content img { border-radius: var(--fc-radius) !important; box-shadow: var(--fc-shadow) !important; }
#why-us { background: linear-gradient(135deg, var(--fc-brand-dark) 0%, var(--fc-ink) 100%) !important; }
#why-us .container { padding-top: 6rem !important; padding-bottom: 6rem !important; }
#why-us h2 { color: #fff !important; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; text-shadow: 0 3px 16px rgba(9,35,40,.45); }
#why-us p { max-width: 850px; margin-inline: auto; padding: 1.35rem 1.6rem; border-right: 4px solid var(--fc-accent); border-radius: 14px; background: rgba(9,35,40,.28); color: rgba(255,255,255,.96) !important; font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 600; line-height: 2; text-shadow: 0 2px 10px rgba(9,35,40,.45); box-shadow: 0 14px 34px rgba(4,20,24,.16); }
.stats { margin-top: 5rem; padding: 4rem 0; background: var(--fc-brand-dark); }
.stats h3, .stats p { color: #fff; }
.stat-box h3 { font-size: 2.7rem; font-weight: 800; }
.contact-section { margin-top: 78px; min-height: calc(100vh - 78px); background-position: center; }
.contact-intro h1 { color: #fff; font-size: clamp(2.25rem, 5vw, 4rem); }
.contact-intro p, .contact-kicker { color: rgba(255,255,255,.82); }
.contact-kicker { display: inline-block; color: var(--fc-accent); font-weight: 800; letter-spacing: .04em; margin-bottom: .6rem; }
.contact-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(320px, 1.2fr); gap: 2rem; align-items: start; max-width: 1000px; margin: 0 auto; }
.contact-details { display: grid; gap: 1rem; }
.contact-detail-card { display: flex; align-items: center; gap: .9rem; padding: 1.1rem; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.09); }
.contact-detail-card > div { min-width: 0; }
.contact-detail-card strong, .contact-detail-card a, .contact-detail-card span { display: block; color: #fff; }
.contact-detail-card a { color: var(--fc-accent); text-decoration: none; }
.contact-detail-card > .contact-detail-icon { width: 42px; height: 42px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--fc-accent); color: var(--fc-ink); line-height: 1; text-align: center; }
.contact-detail-icon i { display: block; line-height: 1; margin: 0; }
.contact-note { margin: .5rem 0 0; color: rgba(255,255,255,.72); font-size: .92rem; }
.glass-form label { display: block; color: var(--fc-ink); font-weight: 800; margin: 0 0 .35rem; }
.glass-form label span { color: var(--fc-brand); }
.glass-form label em { color: var(--fc-muted); font-size: .78rem; font-style: normal; font-weight: 600; }
.glass-form .field-error { display: block; color: #b42318; font-size: .8rem; margin-top: .3rem; }
.glass-form .form-control[aria-invalid="true"] { border-color: #b42318 !important; }
.glass-form .btn:disabled { opacity: .65; cursor: wait; transform: none; }
.dynamic-alert { border-radius: 12px; border: 0; margin-bottom: 1.5rem; }
.alert-success { background: #e8f5eb; color: #12544F; }
.alert-danger { background: #fff0ef; color: #8a1c13; }
.glass-form { background: rgba(255,255,255,.97) !important; color: var(--fc-ink) !important; padding: 2rem !important; }
.glass-form .form-control { color: var(--fc-ink) !important; background: #f8fbfb !important; border: 1px solid var(--fc-line) !important; border-radius: 10px !important; padding: .85rem 2.7rem .85rem .9rem !important; }
.glass-form .form-control::placeholder { color: #8da0a6; }
.glass-form .form-control:focus { border-color: var(--fc-brand) !important; box-shadow: 0 0 0 4px rgba(15,107,120,.12) !important; }
.form-group .icon { right: 14px !important; color: var(--fc-brand) !important; }
.social-links a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); border-radius: 50%; color: #fff !important; }
.social-links a:hover { background: var(--fc-accent); transform: translateY(-3px); }
.cta-help-section { background: var(--fc-brand-dark) !important; padding: 4.5rem 0 !important; }
.cta-help-section h3, .cta-help-section p { color: #fff !important; }
footer { background: #09222e !important; border-top: 1px solid rgba(255,255,255,.08); }
footer h5 { color: #fff; font-size: 1.05rem; }
footer p, footer li, footer em { color: rgba(255,255,255,.7) !important; }
footer a { color: rgba(255,255,255,.76) !important; transition: color .2s ease; }
footer a:hover { color: var(--fc-accent) !important; }
.social-icons a { background: rgba(255,255,255,.1) !important; }
.social-icons a:hover { background: var(--fc-accent) !important; }
.contact-icons-container .contact-icon { background: var(--fc-brand) !important; box-shadow: 0 8px 20px rgba(8,47,57,.25); }
@media (max-width: 991.98px) { .navbar-nav { align-items: stretch; } #heroCarousel .carousel-caption { inset: 0 8% 0 auto; width: 82%; } }
@media (max-width: 767.98px) { #heroCarousel .carousel-item, #heroCarousel .carousel-bg { height: 72vh; min-height: 520px; } #heroCarousel .carousel-caption { inset: 0 6% 0 auto; width: 88%; transform: none; padding: 1.35rem 1.25rem; border-right-width: 2px; background: rgba(9,35,40,.3); } #heroCarousel .slide-title { font-size: clamp(1.85rem, 8vw, 2.45rem); line-height: 1.3; } #heroCarousel .slide-subtitle { font-size: 1rem; line-height: 1.75; } #heroCarousel .carousel-caption .btn { margin-top: .75rem !important; padding: .65rem 1rem !important; } #heroCarousel .custom-arrow { width: 9%; font-size: 1.8rem; } #heroCarousel .carousel-indicators { bottom: 18px; } section.py-5 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } .hero-banner { padding: 60px 0 !important; } .glass-form { padding: 1.25rem !important; } }
@media (max-width: 767.98px) { .contact-layout { grid-template-columns: 1fr; gap: 1.25rem; } .contact-details { order: 2; } .contact-layout .glass-form { order: 1; } .contact-section { padding-top: 105px !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }