@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root{--navy:#071a2d;--navy2:#0b2742;--orange:#f28c28;--orange2:#d87314;--soft:#f4f7fa;--text:#182533;--muted:#687789;--border:#dfe7ef;--shadow:0 18px 50px rgba(7,26,45,.10);--container:1180px}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:"DM Sans",sans-serif;color:var(--text);line-height:1.7;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(92%,var(--container));margin:auto}
.section{padding:95px 0}
.section-light{background:var(--soft)}

.eyebrow{display:inline-flex;gap:9px;align-items:center;color:var(--orange);font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--orange)}
.section-heading{max-width:760px;margin:0 auto 50px;text-align:center}
.section-heading h2,.about-content h2{font-family:Manrope;color:var(--navy);font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;margin-bottom:16px}
.section-heading p,.about-content p{color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:13px 23px;border-radius:9px;font-weight:800;border:1px solid transparent;transition:.3s}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 25px rgba(242,140,40,.25)}
.btn-primary:hover{background:var(--orange2);transform:translateY(-3px)}
.btn-outline{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06)}
.btn-outline:hover{background:#fff;color:var(--navy)}

.site-header{position:fixed;z-index:1000;top:0;width:100%;background:rgba(255,255,255,.94);border-bottom:1px solid var(--border);backdrop-filter:blur(16px);transition:.3s}
.site-header.scrolled{box-shadow:0 8px 35px rgba(7,26,45,.12)}
.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}


/* =========================================
   UPDATED LOGO / BRAND
========================================= */

.brand{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:280px;
}

.brand img{
    width:68px;
    height:68px;
    min-width:68px;
    object-fit:contain;
    border-radius:12px;
    background:#fff;
    padding:4px;
    filter:contrast(1.15) saturate(1.15);
    box-shadow:
        0 4px 12px rgba(7,26,45,.18),
        0 0 0 2px rgba(242,140,40,.18);
    transition:transform .3s ease,box-shadow .3s ease;
}

.brand:hover img{
    transform:scale(1.06);
    box-shadow:
        0 7px 20px rgba(7,26,45,.22),
        0 0 0 3px rgba(242,140,40,.25);
}

.brand-text strong{
    display:block;
    font-family:Manrope;
    color:var(--navy);
    font-size:1.08rem;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.02em;
}

.brand-text span{
    display:block;
    color:var(--muted);
    font-size:.72rem;
    font-weight:600;
    margin-top:5px;
    letter-spacing:.02em;
}


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

.main-nav{display:flex;gap:2px}
.main-nav a{position:relative;padding:10px 8px;color:#344252;font-size:.8rem;font-weight:700}
.main-nav a:after{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:2px;background:var(--orange);transform:scaleX(0);transition:.25s}
.main-nav a:hover,.main-nav a.active{color:var(--orange2)}
.main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}
.header-phone{font-size:.8rem;font-weight:800;color:var(--navy);white-space:nowrap}
.header-phone i{color:var(--orange)}
.menu-btn{display:none;width:44px;height:44px;border:0;border-radius:10px;background:var(--navy);color:#fff}

.hero{min-height:720px;position:relative;color:#fff;overflow:hidden;background:var(--navy)}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;background:center/cover no-repeat;transition:opacity .8s}
.hero-slide.active{opacity:1;visibility:visible}
.hero-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,17,30,.92),rgba(7,26,45,.65),rgba(7,26,45,.25))}
.video-slide{background:var(--navy)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,17,30,.92),rgba(7,26,45,.65),rgba(7,26,45,.25))}
.hero-content{position:relative;z-index:5;min-height:720px;display:flex;align-items:center}
.hero-copy{max-width:760px;padding-top:55px}
.hero h1{font-family:Manrope;font-size:clamp(2.7rem,6vw,5.5rem);line-height:1.02;letter-spacing:-.045em;margin-bottom:22px}
.hero h1 span{color:var(--orange)}
.hero p{max-width:680px;color:#d8e2eb;font-size:1.05rem;margin-bottom:30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px}
.slide-btn{position:absolute;z-index:7;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(5,22,38,.45);color:#fff}
.slide-btn:hover{background:var(--orange)}
.prev-slide{left:25px}
.next-slide{right:25px}
.slide-dots{position:absolute;z-index:7;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.slide-dot{width:30px;height:4px;border:0;border-radius:20px;background:rgba(255,255,255,.4)}
.slide-dot.active{width:55px;background:var(--orange)}

.trust-strip{background:var(--orange);color:#fff}
.trust-inner{min-height:68px;display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{display:flex;justify-content:center;align-items:center;gap:9px;font-size:.85rem;font-weight:800;border-right:1px solid rgba(255,255,255,.22)}
.trust-item:last-child{border:0}

.intro-grid,.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.intro-image img,.about-image img{width:100%;aspect-ratio:1/.82;object-fit:cover;border-radius:22px;box-shadow:var(--shadow)}
.check-list{list-style:none;display:grid;gap:10px;margin:24px 0 30px}
.check-list li{display:flex;gap:10px;font-weight:700}
.check-list i{color:var(--orange)}

.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 8px 25px rgba(7,26,45,.05);transition:.35s}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(242,140,40,.35)}
.service-card{padding:30px;min-height:245px}
.service-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,var(--navy),#103957);color:var(--orange);font-size:1.35rem;margin-bottom:20px}
.service-card h3,.project-body h3,.team-body h3,.value-card h3{font-family:Manrope;color:var(--navy);margin-bottom:8px}
.service-card p,.project-body p,.value-card p{color:var(--muted);font-size:.92rem}

.stats-section{background:linear-gradient(135deg,rgba(7,26,45,.97),rgba(11,39,66,.96)),url("images/constuct2.jpg") center/cover;color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{padding:30px;text-align:center;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.06)}
.stat strong{display:block;color:var(--orange);font-family:Manrope;font-size:2.6rem}

.project-image{height:220px;overflow:hidden}
.project-image img{width:100%;height:100%;object-fit:cover;transition:.5s}
.project-card:hover img{transform:scale(1.07)}
.project-body{padding:23px}
.project-tag{display:inline-block;padding:5px 10px;border-radius:30px;background:#fff1e2;color:var(--orange2);font-size:.7rem;font-weight:800;text-transform:uppercase;margin-bottom:9px}

.team-image{height:320px;overflow:hidden}
.team-image img{width:100%;height:100%;object-fit:cover;transition:.5s}
.team-card:hover img{transform:scale(1.04)}
.team-body{padding:22px}
.team-role{color:var(--orange2);font-size:.82rem;font-weight:800}

.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.gallery-item{height:250px;border-radius:14px;overflow:hidden;position:relative;background:var(--navy)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.5s}
.gallery-item:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(7,26,45,.8))}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-caption{position:absolute;z-index:2;left:18px;bottom:15px;color:#fff;font-weight:800}

.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.video-card{overflow:hidden;border-radius:18px;background:var(--navy);box-shadow:var(--shadow)}
.video-card video{width:100%;aspect-ratio:16/10;object-fit:cover}
.video-info{padding:18px;color:#fff}

.page-hero{min-height:410px;display:flex;align-items:center;color:#fff;background:linear-gradient(90deg,rgba(7,26,45,.94),rgba(7,26,45,.58)),url("images/home2.jpg") center/cover}
.page-hero .container{padding-top:60px}
.page-hero h1{font-family:Manrope;font-size:clamp(2.5rem,5vw,4.3rem);line-height:1.05;margin-bottom:12px}
.page-hero p{max-width:650px;color:#d8e2eb}

.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.value-card{padding:28px 23px}
.value-number{color:var(--orange);font-weight:900;margin-bottom:12px}

.cta{padding:75px 0;color:#fff;background:linear-gradient(120deg,rgba(7,26,45,.97),rgba(11,39,66,.88)),url("images/constuct5.jpg") center/cover}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}
.cta h2{font-family:Manrope;font-size:clamp(2rem,4vw,3.2rem);line-height:1.1}
.cta p{color:#c6d3df}

.marquee{overflow:hidden;white-space:nowrap;border-block:1px solid var(--border);padding:25px;background:#fff}
.marquee-track{display:inline-flex;gap:60px;animation:marquee 24s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.logo-pill{font-family:Manrope;font-weight:800;color:#758494;font-size:1.15rem}
.logo-pill i{color:var(--orange)}
@keyframes marquee{to{transform:translateX(-50%)}}

.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:30px}
.contact-panel{padding:35px;border-radius:20px;color:#fff;background:var(--navy);box-shadow:var(--shadow)}
.contact-list{display:grid;gap:19px;margin-top:25px}
.contact-item{display:flex;gap:13px}
.contact-item i{color:var(--orange);width:22px}
.contact-item span{color:#b9c8d5;font-size:.9rem}

.form-card{padding:35px;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-group{margin-bottom:18px}
.form-group.full{grid-column:1/-1}
.form-group label{display:block;margin-bottom:7px;color:var(--navy);font-weight:800;font-size:.86rem}
.form-group input,.form-group select,.form-group textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:13px 14px;outline:0;background:#f9fbfd}
.form-group textarea{min-height:150px;resize:vertical}

.map-wrap{margin-top:25px;border-radius:18px;overflow:hidden;border:1px solid var(--border)}
.map-wrap iframe{width:100%;min-height:360px;border:0;display:block}

.faq-list{max-width:900px;margin:auto;display:grid;gap:12px}
.faq-item{border:1px solid var(--border);border-radius:13px;background:#fff;overflow:hidden}
.faq-question{width:100%;display:flex;justify-content:space-between;gap:20px;padding:21px 24px;border:0;background:#fff;color:var(--navy);text-align:left;font-weight:800}
.faq-question i{color:var(--orange);transition:.25s}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s}
.faq-answer p{padding:0 24px 22px;color:var(--muted)}
.faq-item.open .faq-question i{transform:rotate(180deg)}

.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testimonial-card{padding:27px}
.stars{color:#f4a62a;margin-bottom:15px}
.testimonial-card p{color:var(--muted);margin-bottom:20px}
.testimonial-author{display:flex;gap:12px;align-items:center}
.author-avatar{width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;font-weight:800}

.site-footer{color:#c2ced9;background:#041321;padding-top:70px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
.footer-brand p{max-width:380px;color:#91a3b3;margin:18px 0}
.footer-title{color:#fff;font-family:Manrope;margin-bottom:15px}
.footer-links{list-style:none;display:grid;gap:10px}
.footer-links a{color:#91a3b3;font-size:.88rem}
.footer-links a:hover{color:var(--orange)}
.socials{display:flex;gap:9px}
.socials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:9px;color:#fff}
.socials a:hover{background:var(--orange)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;text-align:center;color:#748697;font-size:.8rem}

.whatsapp-float{position:fixed;z-index:900;right:22px;bottom:22px;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#20c968;color:#fff;font-size:1.5rem;box-shadow:0 10px 28px #0003}
.back-to-top{position:fixed;z-index:850;right:22px;bottom:92px;width:42px;height:42px;border:0;border-radius:10px;background:var(--navy);color:#fff;opacity:0;visibility:hidden;transition:.3s}
.back-to-top.show{opacity:1;visibility:visible}
.reveal{opacity:0;transform:translateY(25px);transition:.7s}
.reveal.visible{opacity:1;transform:none}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1050px){
    .main-nav a{font-size:.72rem;padding:10px 5px}
    .cards-grid,.testimonial-grid{grid-template-columns:repeat(2,1fr)}
    .values-grid{grid-template-columns:repeat(2,1fr)}
    .gallery-grid{grid-template-columns:repeat(3,1fr)}
    .footer-grid{grid-template-columns:repeat(2,1fr)}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .header-phone{display:none}
}

@media(max-width:800px){
    .section{padding:75px 0}
    .menu-btn{display:block}

    .main-nav{
        position:fixed;
        top:70px;
        right:0;
        width:min(360px,88vw);
        height:calc(100vh - 70px);
        padding:24px;
        display:flex;
        flex-direction:column;
        background:#fff;
        box-shadow:-15px 0 50px #071a2d26;
        transform:translateX(105%);
        transition:.35s;
        overflow:auto
    }

    .main-nav.open{transform:translateX(0)}
    .main-nav a{padding:15px;font-size:.95rem}

    .intro-grid,.about-grid,.contact-grid{
        grid-template-columns:1fr;
        gap:45px
    }

    .trust-inner{grid-template-columns:repeat(2,1fr)}
    .cta-inner{flex-direction:column;align-items:flex-start}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .video-grid{grid-template-columns:1fr}
    .hero,.hero-content{min-height:650px}
}


/* =========================================
   MOBILE LOGO
========================================= */

@media(max-width:560px){

    .container{width:91%}
    .section{padding:62px 0}

    .brand{
        gap:10px;
        min-width:auto;
    }

    .brand img{
        width:58px;
        height:58px;
        min-width:58px;
        padding:3px;
        border-radius:10px;
    }

    .brand-text strong{
        font-size:.9rem;
        font-weight:800;
    }

    .brand-text span{
        display:block;
        font-size:.62rem;
        margin-top:3px;
    }

    .hero,.hero-content{min-height:610px}
    .hero h1{font-size:clamp(2.4rem,11vw,4rem)}
    .hero-actions{flex-direction:column}
    .hero-actions .btn{width:100%}
    .cards-grid,.testimonial-grid,.values-grid,.stats-grid,.gallery-grid{grid-template-columns:1fr}
    .trust-inner{grid-template-columns:1fr}
    .trust-item{padding:12px;border-right:0;border-bottom:1px solid #ffffff33}
    .page-hero{min-height:360px}
    .form-grid{grid-template-columns:1fr}
    .form-group.full{grid-column:auto}
    .contact-panel,.form-card{padding:25px}
    .footer-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
    .marquee-track{animation:none}
}


/* =========================================
   PREMIUM TEAM SECTION
========================================= */

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.team-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 15px 45px rgba(7, 26, 45, .08);
    transition: .35s ease;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(7, 26, 45, .15);
}


/* IMAGE */

.team-image {
    position: relative;
    height: 350px;
    overflow: hidden;
    background: var(--soft-2);
    clip-path: polygon(
        0 0,
        100% 0,
        100% 90%,
        88% 100%,
        12% 100%,
        0 90%
    );
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease;
}

.team-card:hover .team-image img {
    transform: scale(1.07);
}


/* DARK IMAGE OVERLAY */

.team-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(7, 26, 45, .75),
            transparent 55%
        );

    pointer-events: none;
}


/* SOCIAL BUTTONS */

.team-overlay {
    position: absolute;
    z-index: 3;
    right: 18px;
    bottom: 28px;

    display: flex;
    gap: 8px;

    opacity: 0;
    transform: translateY(12px);

    transition: .35s ease;
}

.team-card:hover .team-overlay {
    opacity: 1;
    transform: translateY(0);
}

.team-overlay a {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255,255,255,.92);
    color: var(--navy);

    transition: .25s ease;
}

.team-overlay a:hover {
    background: var(--orange);
    color: #fff;
    transform: translateY(-3px);
}


/* TEAM BODY */

.team-body {
    position: relative;
    padding: 25px 24px 28px;
}

.team-number {
    position: absolute;
    right: 22px;
    top: 22px;

    font-family: "Manrope", sans-serif;
    font-size: .75rem;
    font-weight: 800;

    color: var(--orange);
    letter-spacing: .1em;
}

.team-body h3 {
    margin-bottom: 4px;

    color: var(--navy);

    font-family: "Manrope", sans-serif;
    font-size: 1.2rem;
}

.team-role {
    color: var(--orange-dark);
    font-size: .82rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.team-body p {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.65;
}


/* DARK SECTION CARDS */

.section-dark .value-card {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
}

.section-dark .value-card h3 {
    color: #fff;
}

.section-dark .value-card p {
    color: #b8c7d5;
}


/* =========================================
   TEAM RESPONSIVE
========================================= */

@media (max-width: 1050px) {

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-image {
        height: 390px;
    }

    .team-overlay {
        opacity: 1;
        transform: none;
    }

}