/* =========================================
   NOFAL ZORG V5
   Premium Corporate Design
========================================= */

:root{

--navy:#082640;
--navy-light:#113b60;
--mint:#58b947;
--mint-dark:#3f9632;

--bg:#edf3f2;
--section:#e5efec;
--card:#ffffff;

--text:#16314a;
--muted:#687684;
--border:#d7e2de;

--shadow:0 18px 45px rgba(8,38,64,.08);
--radius:18px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:Arial,Helvetica,sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.7;

}

img{
display:block;
max-width:100%;
}

a{
text-decoration:none;
transition:.3s;
}

.container{

width:min(1180px,92%);
margin:auto;

}

/* ==========================
HEADER
========================== */

.site-header{

position:sticky;

top:0;

z-index:999;

background:rgba(255,255,255,.96);

backdrop-filter:blur(12px);

border-bottom:1px solid rgba(0,0,0,.05);

box-shadow:0 6px 24px rgba(0,0,0,.05);

}

.nav{

display:flex;

align-items:center;

justify-content:space-between;

min-height:92px;

gap:30px;

}

.brand{

display:flex;

align-items:center;

gap:14px;

color:var(--navy);

}

.brand img{

width:78px;

height:70px;

object-fit:contain;

}

.brand-text strong{

display:block;

font-size:24px;

letter-spacing:.05em;

}

.brand-text span{

font-size:11px;

font-weight:700;

color:var(--muted);

}

nav{

display:flex;

gap:28px;

margin-left:auto;

}

nav a{

font-weight:700;

font-size:14px;

color:var(--navy);

position:relative;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--mint);

transition:.3s;

}

nav a:hover{

color:var(--mint);

}

nav a:hover::after{

width:100%;

}

.nav-cta{

background:var(--navy);

color:#fff;

padding:14px 20px;

border-radius:10px;

font-weight:700;

box-shadow:var(--shadow);

}

.nav-cta:hover{

background:var(--mint);

transform:translateY(-2px);

}

/* ==========================
HERO
========================== */

.hero{

position:relative;

min-height:780px;

display:flex;

align-items:center;

overflow:hidden;

}

.hero-image{

position:absolute;

inset:0;

background:url("assets/nofal-office-2026.jpg")
center center/cover no-repeat;

transform:scale(1.03);

}

.hero-overlay{

position:absolute;

inset:0;

background:linear-gradient(
90deg,
rgba(237,243,242,.96) 0%,
rgba(237,243,242,.90) 34%,
rgba(237,243,242,.52) 62%,
rgba(237,243,242,.08) 100%
);

}

.hero-inner{

position:relative;

z-index:2;

padding:100px 0;

}

.hero-copy{

max-width:640px;

}

.eyebrow{

color:var(--mint);

font-size:13px;

font-weight:800;

letter-spacing:.18em;

text-transform:uppercase;

margin-bottom:18px;

}

.hero h1{

font-size:82px;

line-height:.9;

color:var(--navy);

margin-bottom:18px;

letter-spacing:-3px;

}

.hero h2{

font-size:31px;

font-weight:700;

margin-bottom:24px;

color:var(--navy-light);

}

.hero-lead{

font-size:19px;

color:var(--muted);

margin-bottom:36px;

max-width:560px;

}

.hero-actions{

display:flex;

gap:16px;

flex-wrap:wrap;

}

/* ==========================
BUTTONS
========================== */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 26px;

border-radius:12px;

font-weight:700;

transition:.3s;

}

.btn-primary{

background:var(--mint);

color:white;

box-shadow:var(--shadow);

}

.btn-primary:hover{

background:var(--mint-dark);

transform:translateY(-3px);

}

.btn-secondary{

background:white;

color:var(--navy);

border:2px solid var(--navy);

}

.btn-secondary:hover{

background:var(--navy);

color:white;

} 
/* =========================================

   TRUST STRIP

========================================= */

.trust-strip{

margin-top:-45px;

position:relative;

z-index:5;

}

.trust-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

}

.trust-grid article{

background:var(--card);

border-radius:var(--radius);

padding:28px;

box-shadow:var(--shadow);

display:flex;

gap:18px;

align-items:flex-start;

transition:.35s;

}

.trust-grid article:hover{

transform:translateY(-8px);

}

.trust-grid b{

font-size:34px;

color:var(--mint);

line-height:1;

}

.trust-grid h3{

font-size:18px;

color:var(--navy);

margin-bottom:8px;

}

.trust-grid p{

font-size:14px;

color:var(--muted);

}

/* =========================================

   SECTIONS

========================================= */

.section{

padding:100px 0;

}

.section:nth-child(even){

background:var(--section);

}

.section-label{

font-size:13px;

font-weight:800;

letter-spacing:.18em;

text-transform:uppercase;

color:var(--mint);

margin-bottom:16px;

}

.section h2{

font-size:46px;

line-height:1.15;

color:var(--navy);

margin-bottom:45px;

}

/* =========================================

   SERVICES

========================================= */

.services{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:28px;

}

.services article{

background:white;

border-radius:22px;

padding:34px 28px;

box-shadow:var(--shadow);

border-top:6px solid var(--mint);

transition:.35s;

min-height:220px;

display:flex;

flex-direction:column;

}

.services article:hover{

transform:translateY(-10px);

}

.services span{

width:52px;

height:52px;

display:flex;

align-items:center;

justify-content:center;

background:rgba(88,185,71,.12);

color:var(--mint);

border-radius:50%;

font-size:20px;

font-weight:800;

margin-bottom:24px;

}

.services h3{

font-size:22px;

color:var(--navy);

margin-bottom:16px;

}

.services p{

color:var(--muted);

font-size:15px;

line-height:1.8;

margin-top:auto;

}

/* =========================================

   ABOUT

========================================= */

.about{

background:linear-gradient(

180deg,

#eef5f3 0%,

#e5efec 100%

);

}

.about-grid{

display:grid;

grid-template-columns:430px 1fr;

gap:70px;

align-items:center;

}

.about-logo{

background:white;

border-radius:24px;

box-shadow:var(--shadow);

display:flex;

align-items:center;

justify-content:center;

padding:40px;

min-height:320px;

}

.about-logo img{

width:80%;

max-width:260px;

}

.about-copy h2{

margin-bottom:24px;

}

.about-copy .intro{

font-size:21px;

font-weight:700;

color:var(--navy);

margin-bottom:24px;

}

.about-copy p{

font-size:17px;

color:var(--muted);

margin-bottom:18px;

line-height:1.9;

}
/* =========================================

   REVIEWS

========================================= */

.reviews{

background:#f4f8f7;

}

.reviews-grid{

display:grid;

grid-template-columns:.85fr 1.15fr;

gap:30px;

align-items:stretch;

}

.review-placeholder,

.review-form-card{

background:var(--card);

border:1px solid var(--border);

border-radius:24px;

padding:38px;

box-shadow:var(--shadow);

}

.review-placeholder{

display:flex;

flex-direction:column;

justify-content:center;

min-height:430px;

background:

linear-gradient(

135deg,

rgba(8,38,64,.98),

rgba(17,59,96,.94)

);

color:#fff;

}

.stars{

color:#f2bd38;

font-size:28px;

letter-spacing:.12em;

margin-bottom:24px;

}

.review-placeholder p{

font-size:25px;

font-weight:700;

line-height:1.5;

margin-bottom:18px;

}

.review-placeholder span{

color:#d4e2e9;

font-size:14px;

line-height:1.7;

}

.review-form-card h3{

font-size:27px;

color:var(--navy);

margin-bottom:10px;

}

.review-form-card > p{

color:var(--muted);

margin-bottom:26px;

}

.review-form-card form{

display:grid;

gap:18px;

}

.review-form-card label{

display:block;

font-size:14px;

font-weight:700;

color:var(--navy);

}

input,

select,

textarea{

width:100%;

margin-top:8px;

padding:14px 15px;

border:1px solid var(--border);

border-radius:12px;

background:#f9fbfa;

color:var(--text);

font:inherit;

outline:none;

transition:.25s;

}

input:focus,

select:focus,

textarea:focus{

border-color:var(--mint);

background:#fff;

box-shadow:0 0 0 4px rgba(88,185,71,.12);

}

textarea{

resize:vertical;

min-height:130px;

}

button{

border:0;

cursor:pointer;

font:inherit;

}

.review-form-card button{

justify-self:start;

margin-top:4px;

}

/* =========================================

   CONTACT

========================================= */

.contact{

padding-top:40px;

background:var(--bg);

}

.contact-panel{

position:relative;

overflow:hidden;

display:flex;

justify-content:space-between;

align-items:center;

gap:50px;

padding:55px;

border-radius:28px;

background:

linear-gradient(

135deg,

var(--navy-dark),

var(--navy),

#174e72

);

color:#fff;

box-shadow:0 25px 60px rgba(5,26,45,.2);

}

.contact-panel::after{

content:"";

position:absolute;

width:340px;

height:340px;

right:-130px;

top:-150px;

border-radius:50%;

background:rgba(88,185,71,.16);

}

.contact-panel > div{

position:relative;

z-index:2;

}

.section-label.light{

color:#aee5a3;

}

.contact-panel h2{

color:#fff;

font-size:clamp(32px,4vw,48px);

max-width:670px;

margin-bottom:14px;

}

.contact-panel p{

color:#d5e3ea;

font-size:17px;

}

.contact-details{

display:flex;

flex-direction:column;

gap:15px;

min-width:300px;

}

.contact-details a{

display:flex;

flex-direction:column;

padding:18px 22px;

border-radius:15px;

background:rgba(255,255,255,.98);

color:var(--navy);

box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.contact-details a:hover{

transform:translateY(-4px);

background:#f3fff0;

}

.contact-details span{

font-size:12px;

font-weight:700;

text-transform:uppercase;

letter-spacing:.1em;

color:var(--muted);

margin-bottom:3px;

}

.contact-details strong{

font-size:17px;

}

/* =========================================

   FOOTER

========================================= */

footer{

margin-top:90px;

padding:55px 0;

background:var(--navy-dark);

color:#fff;

}

.footer-inner{

display:flex;

align-items:center;

justify-content:center;

gap:36px;

}

.footer-inner img{

width:190px;

height:135px;

object-fit:contain;

padding:12px;

border-radius:18px;

background:#fff;

}

.footer-inner strong{

font-size:29px;

letter-spacing:.05em;

}

.footer-inner p{

margin:5px 0;

color:#cbd9e2;

}

/* =========================================

   RESPONSIVE — TABLET

========================================= */

@media (max-width:1050px){

nav{

display:none;

}

.nav-cta{

margin-left:auto;

}

.hero-copy{

max-width:70%;

}

.trust-grid{

grid-template-columns:repeat(2,1fr);

}

.about-grid{

grid-template-columns:340px 1fr;

gap:45px;

}

.reviews-grid{

grid-template-columns:1fr;

}

.contact-panel{

flex-direction:column;

align-items:flex-start;

}

.contact-details{

width:100%;

flex-direction:row;

}

.contact-details a{

flex:1;

}

}

/* =========================================

   RESPONSIVE — MOBILE

========================================= */

@media (max-width:700px){

.container{

width:90%;

}

.nav{

min-height:76px;

gap:12px;

}

.brand{

gap:9px;

}

.brand img{

width:56px;

height:52px;

}

.brand-text strong{

font-size:17px;

}

.brand-text span{

font-size:8px;

}

.nav-cta{

padding:11px 13px;

font-size:0;

border-radius:9px;

}

.nav-cta::after{

content:"Offerte";

font-size:12px;

}

.hero{

min-height:700px;

align-items:flex-start;

}

.hero-image{

background-position:64% center;

}

.hero-overlay{

background:

linear-gradient(

180deg,

rgba(237,243,242,.98) 0%,

rgba(237,243,242,.94) 48%,

rgba(237,243,242,.4) 76%,

rgba(237,243,242,.1) 100%

);

}

.hero-inner{

padding:70px 0 190px;

}

.hero-copy{

max-width:100%;

}

.hero h1{

font-size:56px;

letter-spacing:-2px;

}

.hero h2{

font-size:22px;

line-height:1.35;

}

.hero-lead{

font-size:16px;

}

.hero-actions{

flex-direction:column;

}

.hero-actions .btn{

width:100%;

}

.trust-strip{

margin-top:-70px;

}

.trust-grid{

grid-template-columns:1fr;

gap:14px;

}

.trust-grid article{

padding:22px;

}

.section{

padding:70px 0;

}

.section h2{

font-size:34px;

margin-bottom:30px;

}

.services{

grid-template-columns:1fr;

gap:20px;

}

.services article{

min-height:auto;

padding:28px 24px;

}

.about-grid{

grid-template-columns:1fr;

gap:30px;

}

.about-logo{

min-height:230px;

padding:30px;

}

.about-logo img{

max-width:210px;

}

.about-copy .intro{

font-size:19px;

}

.review-placeholder,

.review-form-card{

padding:27px 22px;

border-radius:20px;

}

.review-placeholder{

min-height:310px;

}

.review-placeholder p{

font-size:21px;

}

.review-form-card button{

width:100%;

}

.contact{

padding-top:20px;

}

.contact-panel{

padding:34px 22px;

border-radius:22px;

gap:30px;

}

.contact-panel h2{

font-size:32px;

}

.contact-details{

min-width:0;

width:100%;

flex-direction:column;

}

.contact-details a{

width:100%;

}

footer{

margin-top:65px;

padding:45px 0;

}

.footer-inner{

flex-direction:column;

text-align:center;

gap:24px;

}

.footer-inner img{

width:215px;

height:150px;

}

.footer-inner strong{

font-size:25px;

}

}
/* =========================================
   FINAL POLISH 01 — HEADER & HERO
========================================= */

@media (min-width:701px){
  .brand img{
    width:86px;
    height:76px;
  }
}

.hero-overlay{
  background:linear-gradient(
    90deg,
    rgba(237,243,242,.93) 0%,
    rgba(237,243,242,.84) 36%,
    rgba(237,243,242,.38) 65%,
    rgba(237,243,242,.04) 100%
  );
}

@media (max-width:700px){
  .hero-overlay{
    background:linear-gradient(
      180deg,
      rgba(237,243,242,.96) 0%,
      rgba(237,243,242,.88) 46%,
      rgba(237,243,242,.30) 74%,
      rgba(237,243,242,.05) 100%
    );
  }

  .hero h1{
    font-size:52px;
    line-height:.95;
  }

  .hero-lead{
    color:#526777;
  }
}
/* =========================================
   Service Card Glow
========================================= */

.services article::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:
linear-gradient(
90deg,
#58b947,
#8ad66e
);

opacity:0;

transition:.35s;

}

.services article{

position:relative;

}

.services article:hover::before{

opacity:1;

}
/* ===== Premium Hover Effects ===== */

.service-card,
.review-card,
.contact-card {
    transition: transform .35s ease, box-shadow .35s ease;
}

.service-card:hover,
.review-card:hover,
.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0,0,0,.12);
}

.btn,
.button,
.cta-button {
    transition: all .3s ease;
}

.btn:hover,
.button:hover,
.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,124,186,.25);
}

img {
    transition: transform .4s ease;
}

.service-card:hover img {
    transform: scale(1.05);
}
/* ===== Luxury Light Effect ===== */

.service-card,
.review-card {
    position: relative;
    overflow: hidden;
}

.service-card::before,
.review-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );
    transition: left .8s ease;
}

.service-card:hover::before,
.review-card:hover::before {
    left: 160%;
}
/* ===== Elegant Section Background ===== */

section {
    position: relative;
    overflow: hidden;
}

section::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(0,124,186,.05), transparent 70%);
    top: -180px;
    right: -180px;
    pointer-events: none;
}

section::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(46,204,113,.05), transparent 70%);
    bottom: -170px;
    left: -170px;
    pointer-events: none;
}
/* ===== Footer last line ===== */

.footer-inner p:last-of-type {
    color: #163a63 !important;
}