/*==========================================================
ENTITY ENTERPRISES
Layout + Sections
==========================================================*/

.container{

    width:min(92%,1400px);

    margin-inline:auto;

}

.section{

    position:relative;

    padding:180px 0;

}

.grid{

    display:grid;

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

    gap:40px;

}

.col-5{

    grid-column:span 5;

}

.col-7{

    grid-column:span 7;

}

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

Horizontal Projects

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

.projects-slider{

display:flex;

gap:32px;

overflow-x:auto;

padding:60px calc((100vw - min(92%,1400px))/2);

scroll-snap-type:x mandatory;

scrollbar-width:none;

}

.projects-slider::-webkit-scrollbar{

display:none;

}

.project-card{

position:relative;

min-width:540px;

height:720px;

overflow:hidden;

border-radius:28px;

flex-shrink:0;

scroll-snap-align:center;

cursor:pointer;

background:#ddd;

}

.project-card img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.project-card:hover img{

transform:scale(1.08);

}

.overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:50px;

background:

linear-gradient(

transparent,

rgba(0,0,0,.9)

);

color:white;

transition:.5s;

}

.overlay span{

display:block;

font-size:.8rem;

letter-spacing:.25em;

text-transform:uppercase;

margin-bottom:12px;

opacity:.8;

}

.overlay h3{

font-size:2.4rem;

color:white;

}

/*==========================================================
SECTION TITLE
==========================================================*/

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:16px;

    font-size:.82rem;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:var(--clr-primary);

    font-weight:600;

}

.section-tag::before{

    content:"";

    width:60px;

    height:1px;

    background:var(--clr-primary);

}

.section-title{

    margin-top:28px;

    font-family:var(--font-heading);

    font-size:clamp(3rem,5vw,5rem);

    line-height:.95;

    letter-spacing:-.05em;

    color:var(--clr-heading);

}

.section-description{

    max-width:640px;

    font-size:1.08rem;

    line-height:1.9;

}


/*==========================================================
ABOUT
==========================================================*/

.about-stats{

    display:grid;

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

    gap:40px;

    margin-top:70px;

}

.stat{

    padding:32px;

    border:1px solid rgba(0,0,0,.06);

    background:white;

    transition:.4s;

}

.stat:hover{

    transform:translateY(-8px);

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

}

.stat h3{

    font-size:3rem;

    color:var(--clr-primary);

    margin-bottom:12px;

}

.stat p{

    color:#777;

}


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

OUR EXPERTISE

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

.services-home{

padding:180px 0;

background:#fff;

}

.service-showcase{

margin-top:90px;

}

.service-row{

display:grid;

grid-template-columns:120px 1fr auto;

align-items:center;

gap:60px;

padding:65px 0;

}

.service-number{

font-size:4rem;

font-weight:700;

color:#0D3B8C;

opacity:.15;

}

.service-content h3{

font-size:2.3rem;

font-weight:600;

color:#081C3A;

margin-bottom:18px;

}

.service-content p{

font-size:1.08rem;

line-height:1.9;

max-width:650px;

color:#667085;

margin-bottom:22px;

}

.service-content a{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:600;

text-decoration:none;

color:#0D3B8C;

transition:.3s;

}

.service-content a:hover{

gap:18px;

}

.service-showcase hr{

border:none;

height:1px;

background:#E6ECF3;

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

.projects-grid{

    display:grid;

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

    gap:28px;

}

.project-card{

    position:relative;

    overflow:hidden;

    height:620px;

    cursor:pointer;

}

.project-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-card .project-content{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:40px;

    color:white;

    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.85)

    );

}

.project-card .project-content span{

    display:block;

    margin-bottom:10px;

    letter-spacing:.2em;

    font-size:.8rem;

    text-transform:uppercase;

}

.project-card .project-content h3{

    font-size:2rem;

}


/*==========================================================
CLIENTS
==========================================================*/

.clients-grid{

    display:grid;

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

    gap:24px;

}

.client-logo{

    height:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

    border:1px solid rgba(0,0,0,.06);

    transition:.4s;

}

.client-logo img{

    width:120px;

    opacity:.55;

    filter:grayscale(100%);

    transition:.4s;

}

.client-logo:hover{

    transform:translateY(-8px);

}

.client-logo:hover img{

    opacity:1;

    filter:none;

}


/*==========================================================
CTA
==========================================================*/

.cta-box{

    padding:120px;

    text-align:center;

    background:var(--clr-primary);

    color:white;

}

.cta-box p{

    max-width:700px;

    margin:30px auto 50px;

    color:rgba(255,255,255,.75);

}

.cta-title{

    font-size:clamp(3rem,5vw,5rem);

    line-height:.95;

}


/*==========================================================
CONTACT
==========================================================*/

.contact-form{

    display:grid;

    gap:24px;

}

.contact-form input,

.contact-form textarea{

    padding:22px 26px;

    background:white;

    border:1px solid rgba(0,0,0,.08);

    font-size:1rem;

    resize:none;

    transition:.35s;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:var(--clr-primary);

}


/* Removed duplicate footer block 1 */
/*==========================================================

Construction Timeline

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

.construction-process{

background:#fbfbfb;

position:relative;

overflow:hidden;

}

.timeline{

position:relative;

margin-top:100px;

display:grid;

gap:80px;

}

.timeline-line{

position:absolute;

left:29px;

top:0;

bottom:0;

width:2px;

background:#e4e4e4;

}

.timeline-progress{

position:absolute;

left:29px;

top:0;

height:0;

width:2px;

background:var(--clr-primary);

transition:height .6s;

}

.timeline-item{

display:flex;

gap:45px;

align-items:flex-start;

}

.timeline-dot{

width:60px;

height:60px;

border-radius:50%;

background:white;

border:2px solid var(--clr-primary);

flex-shrink:0;

position:relative;

z-index:2;

transition:.4s;

}

.timeline-item.active .timeline-dot{

background:var(--clr-primary);

transform:scale(1.12);

}

.timeline-content{

padding-top:10px;

}

.timeline-content span{

display:block;

letter-spacing:.3em;

font-size:.75rem;

color:#999;

margin-bottom:12px;

}

.timeline-content h3{

font-size:2rem;

margin-bottom:18px;

}

.timeline-content p{

max-width:500px;

line-height:1.9;

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

Logo Marquee

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

.clients-section{

overflow:hidden;

background:#fff;

}

.logo-marquee{

position:relative;

overflow:hidden;

margin-top:80px;

}

.logo-track{

display:flex;

align-items:center;

gap:70px;

width:max-content;

animation:logoMarquee 28s linear infinite;

}

.logo-item{

width:240px;

height:120px;

display:flex;

align-items:center;

justify-content:center;

background:white;

border:1px solid rgba(0,0,0,.06);

border-radius:20px;

flex-shrink:0;

transition:.4s;

}

.logo-item:hover{

transform:translateY(-10px);

box-shadow:

0 30px 60px rgba(0,0,0,.08);

}

.logo-item img{

max-width:130px;

max-height:70px;

opacity:.55;

filter:grayscale(100%);

transition:.4s;

}

.logo-item:hover img{

opacity:1;

filter:none;

}

@keyframes logoMarquee{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

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

Premium Contact

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

.contact-premium{

display:grid;

grid-template-columns:1fr 1fr;

min-height:100vh;

background:white;

}

.contact-image{

overflow:hidden;

position:relative;

}

.contact-image img{

width:100%;

height:100%;

object-fit:cover;

transition:8s;

}

.contact-premium:hover .contact-image img{

transform:scale(1.08);

}

.contact-content{

padding:120px;

display:flex;

flex-direction:column;

justify-content:center;

}

.contact-info{

display:grid;

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

gap:24px;

margin:50px 0;

}

.info-box{

padding:24px;

background:#fafafa;

border:1px solid rgba(0,0,0,.06);

border-radius:18px;

transition:.35s;

}

.info-box:hover{

transform:translateY(-6px);

box-shadow:0 20px 50px rgba(0,0,0,.06);

}

.info-box h4{

margin-bottom:10px;

font-size:1rem;

}

.grid-2{

display:grid;

grid-template-columns:1fr 1fr;

gap:22px;

margin-bottom:22px;

}

.premium-form input,

.premium-form textarea{

width:100%;

padding:22px;

border:none;

background:#fafafa;

border:1px solid rgba(0,0,0,.08);

font-size:1rem;

font-family:inherit;

border-radius:18px;

transition:.35s;

}

.premium-form input:focus,

.premium-form textarea:focus{

outline:2px solid var(--clr-primary);

outline-offset:2px;

border-color:var(--clr-primary);

background:white;

}

.premium-form textarea{

margin-bottom:25px;

resize:none;

}
/* Removed duplicate premium footer */

#backTop{

width:54px;

height:54px;

border-radius:50%;

border:none;

background:white;

color:#07182E;

font-size:1.3rem;

cursor:pointer;

transition:.4s;

}

#backTop:hover{

transform:translateY(-6px);

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

Image Preview

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

#image-preview{

position:fixed;

left:0;

top:0;

width:380px;

height:260px;

overflow:hidden;

border-radius:24px;

pointer-events:none;

opacity:0;

transform:translate(-50%,-50%) scale(.85);

transition:

opacity .35s,

transform .35s;

z-index:99999;

box-shadow:

0 40px 120px rgba(0,0,0,.25);

}

#image-preview img{

width:100%;

height:100%;

object-fit:cover;

}

#image-preview.active{

opacity:1;

transform:translate(-50%,-50%) scale(1);

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

HOME ABOUT

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

.about-home{

background:#fff;

position:relative;

overflow:hidden;

padding:180px 0;

}

.about-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:90px;

align-items:center;

}

.about-left h2{

font-size:clamp(3rem,5vw,4.8rem);

line-height:1.08;

margin:30px 0;

color:#07182E;

}

.about-left p{

font-size:1.05rem;

line-height:2;

color:#555;

margin-bottom:25px;

max-width:650px;

}

.about-right{

display:flex;

flex-direction:column;

gap:35px;

}

.about-card{

padding:50px;

border-radius:28px;

background:#F8FAFD;

box-shadow:

0 25px 70px rgba(0,0,0,.06);

}

.about-card h3{

font-size:2rem;

margin-bottom:30px;

}

.about-card ul{

display:grid;

gap:22px;

}

.about-card li{

font-size:1rem;

line-height:1.8;

list-style:none;

color:#444;

}

.experience-card{

padding:45px;

background:#0D2346;

border-radius:28px;

color:white;

}

.experience-card span{

letter-spacing:.3em;

font-size:.75rem;

opacity:.7;

}

.experience-card h2{

font-size:5rem;

margin:20px 0;

}

.experience-card p{

font-size:1rem;

opacity:.85;

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

TRUSTED CLIENTS

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

.trusted-section{

padding:180px 0;

background:#f8fafc;

overflow:hidden;

}

.section-heading.center{

text-align:center;

max-width:760px;

margin:auto;

margin-bottom:70px;

}

.section-heading.center h2{

font-size:clamp(2.8rem,5vw,4.5rem);

margin:25px 0;

color:#07182E;

}

.section-heading.center p{

line-height:2;

color:#666;

}

.logo-slider{

overflow:hidden;

position:relative;

}

.logo-track{

display:flex;

gap:35px;

width:max-content;

animation:logoSlider 35s linear infinite;

}

.logo-slider:hover .logo-track{

animation-play-state:paused;

}

.logo-box{

width:220px;

height:120px;

background:white;

display:flex;

justify-content:center;

align-items:center;

border-radius:22px;

box-shadow:

0 15px 50px rgba(0,0,0,.06);

flex-shrink:0;

transition:.4s;

}

.logo-box:hover{

transform:translateY(-8px);

}

.logo-box img{

max-width:120px;

max-height:55px;

opacity:.7;

filter:grayscale(100%);

transition:.4s;

}

.logo-box:hover img{

filter:none;

opacity:1;

}

@keyframes logoSlider{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

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

FEATURED PROJECTS

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

.featured-projects{

padding:90px 0;

background:white;

}

.project-showcase{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:120px;

margin:120px auto;

max-width:1500px;

padding:0 6%;

}

.project-showcase.reverse{

grid-template-columns:.9fr 1.1fr;

}

.project-showcase.reverse .project-image{

order:2;

}

.project-showcase.reverse .project-content{

order:1;

}

.project-image{

overflow:hidden;

border-radius:34px;

box-shadow:

0 40px 90px rgba(0,0,0,.08);

}

.project-image img{

width:100%;

height:720px;

object-fit:cover;

transition:8s;

}

.project-showcase:hover img{

transform:scale(1.08);

}

.project-content span{

letter-spacing:.25em;

font-size:.9rem;

color:#888;

text-transform:uppercase;

}

.project-content h3{

font-size:clamp(1.8rem, 2.8vw, 2.6rem);

margin:20px 0;

line-height:1.2;

}

.project-content h3 a{

color:inherit;

text-decoration:none;

transition:color 0.3s ease;

}

.project-content h3 a:hover{

color:#0D3B8C;

}

.project-content p{

line-height:2;

color:#555;

margin-bottom:35px;

font-size:1.1rem;

}

.project-content ul{

margin-bottom:40px;

display:grid;

gap:16px;

}

.project-content li{

list-style:none;

font-weight:500;

color:#0D2346;

padding-left:20px;

position:relative;

font-size:1.05rem;

}

.project-content li::before{

content:"";

width:8px;

height:8px;

border-radius:50%;

background:#0D2346;

position:absolute;

left:0;

top:10px;

}

.project-content a{

display:inline-flex;

align-items:center;

padding:14px 28px;

border:1.5px solid #0D3B8C;

color:#0D3B8C;

border-radius:999px;

font-weight:600;

font-size:0.9rem;

text-decoration:none;

transition:all 0.3s ease;

margin-top:15px;

width:fit-content;

}

.project-content a:hover{

background:#0D3B8C;

color:white;

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(13, 59, 140, 0.15);

}

.project-bottom{

display:flex;

justify-content:center;

margin-top:80px;

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

PROCESS

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

.process-section{

padding:90px 0;

background:#F8FAFC;

}

.timeline{

position:relative;

max-width:850px;

margin:100px auto 0;

}

.timeline::before{

content:"";

position:absolute;

left:39px;

top:0;

bottom:0;

width:2px;

background:#d9e2ef;

}

.timeline-progress{

position:absolute;

left:39px;

top:0;

width:2px;

height:0;

background:#0D2346;

transition:1s;

}

.timeline-step{

display:flex;

gap:45px;

margin-bottom:80px;

position:relative;

}

.timeline-circle{

width:80px;

height:80px;

border-radius:50%;

background:white;

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

color:#0D2346;

border:2px solid #0D2346;

position:relative;

z-index:2;

flex-shrink:0;

transition:.4s;

}

.timeline-step.active .timeline-circle{

background:#0D2346;

color:white;

transform:scale(1.08);

}

.timeline-content{

background:#ffffff;

padding:30px 40px;

border-radius:16px;

box-shadow:0 10px 30px rgba(0,0,0,0.02);

border:1px solid rgba(8, 28, 58, 0.05);

transition:all 0.4s ease;

flex-grow:1;

}

.timeline-step.active .timeline-content{

border-color:rgba(13, 59, 140, 0.15);

box-shadow:0 20px 40px rgba(13, 59, 140, 0.06);

}

.timeline-content h3{

font-size:1.5rem;

margin-bottom:12px;

color:#081C3A;

font-weight:700;

}

.timeline-content p{

font-size:1.05rem;

line-height:1.8;

color:#5F6B7A;

}

.timeline-step.active .timeline-circle{

box-shadow:0 0 25px rgba(13, 35, 70, 0.2);

}

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

WHY ENTITY

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

.why-section{

padding:150px 0;

background:#07182E;

color:white;

}

.why-grid{

display:grid;

grid-template-columns:420px 1fr;

gap:70px;

margin-top:90px;

}

.why-left{

display:grid;

grid-template-columns:1fr 1fr;

gap:22px;

}

.why-number{

padding:35px;

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

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

backdrop-filter:blur(15px);

transition:.4s;

}

.why-number:hover{

transform:translateY(-8px);

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

}

.why-number h2{

font-size:3rem;

margin-bottom:10px;

color:white;

}

.why-number span{

font-size:.9rem;

text-transform:uppercase;

letter-spacing:.12em;

opacity:.7;

}

.why-right{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}

.feature-card{

padding:40px;

background:white;

color:#07182E;

border-radius:26px;

transition:.4s;

}

.feature-card:hover{

transform:translateY(-10px);

}

.feature-card h3{

font-size:1.5rem;

margin-bottom:20px;

}

.feature-card p{

line-height:1.9;

color:#555;

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

QUALITY

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

.quality-section{

padding:190px 0;

background:white;

}

.quality-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.quality-left h2{

font-size:clamp(3rem,5vw,4.8rem);

line-height:1.08;

margin:28px 0;

}

.quality-left p{

line-height:2;

font-size:1.05rem;

color:#666;

margin-bottom:40px;

}

.quality-right{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}

.quality-item{

padding:38px;

border-radius:26px;

background:#F8FAFC;

transition:.4s;

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

}

.quality-item:hover{

transform:translateY(-8px);

box-shadow:

0 25px 60px rgba(0,0,0,.08);

}

.quality-item h3{

margin-bottom:18px;

font-size:1.5rem;

color:#07182E;

}

.quality-item p{

line-height:1.9;

color:#666;

}

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

CTA

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

.cta-section{

position:relative;

padding:180px 0;

background:

linear-gradient(

135deg,

#07182E,

#0D2346,

#154C8A

);

overflow:hidden;

}

.cta-overlay{

position:absolute;

inset:0;

background-image:

linear-gradient(

rgba(255,255,255,.05) 1px,

transparent 1px

),

linear-gradient(

90deg,

rgba(255,255,255,.05) 1px,

transparent 1px

);

background-size:60px 60px;

opacity:.25;

}

.cta-content{

position:relative;

z-index:2;

max-width:850px;

margin:auto;

text-align:center;

color:white;

}

.cta-content h2{

font-size:clamp(3.2rem,6vw,5.5rem);

line-height:1.05;

margin:25px 0;

}

.cta-content p{

font-size:1.15rem;

line-height:2;

opacity:.82;

margin:0 auto 50px;

max-width:700px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:22px;

flex-wrap:wrap;

margin-bottom:70px;

}

.cta-buttons .btn {
    color: white;
}

.cta-buttons .btn::after {
    background: white;
}

.cta-buttons .btn-outline {
    border-color: rgba(255, 255, 255, 0.35);
}

.cta-buttons .btn-outline:hover {
    border-color: white;
}

.btn-outline-light{

padding:18px 36px;

border:2px solid rgba(255,255,255,.35);

color:white;

border-radius:999px;

transition:.35s;

}

.btn-outline-light:hover{

background:white;

color:#07182E;

}

.cta-contact{

display:flex;

justify-content:center;

gap:90px;

flex-wrap:wrap;

}

.cta-contact small{

display:block;

letter-spacing:.25em;

text-transform:uppercase;

opacity:.65;

margin-bottom:8px;

}

.cta-contact strong{

font-size:1.15rem;

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

FOOTER

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

.footer{

background:#061629;

padding:90px 0 30px;

color:white;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:60px;

}

.footer-logo-container{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:30px;

}

.footer-logo{

    height:42px;

    width:auto;

}

.footer-logo-text{

    font-size:1.3rem;

    font-weight:800;

    color:white;

    letter-spacing:0.08em;

    text-transform:uppercase;

}

.footer-logo-text-sub{

    font-weight:300;

    color:rgba(255,255,255,0.6);

}

.footer-column p{

line-height:2;

color:rgba(255,255,255,.75);

margin-bottom:12px;

}

.footer-column h3{

margin-bottom:28px;

font-size:1.3rem;

color:#ffffff;

font-weight:700;

position:relative;

padding-bottom:8px;

}

.footer-column h3::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:30px;

height:2px;

background:#0D3B8C;

}

.footer-column a{

display:block;

margin-bottom:15px;

color:rgba(255,255,255,.75);

text-decoration:none;

transition:.3s;

}

.footer-column a:hover{

color:white;

padding-left:10px;

}

.footer-bottom{

margin-top:70px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.1);

display:flex;

justify-content:space-between;

flex-wrap:wrap;

gap:15px;

}

.footer-bottom p{

color:rgba(255,255,255,.6);

}
/* Removed duplicate marquee section */

.client-marquee{

overflow:hidden;

position:relative;

width:100%;

padding:20px 0;

mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);

-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);

}

.client-track{

display:flex;

align-items:center;

gap:90px;

width:max-content;

animation:marquee 35s linear infinite;

}

.client-track img{

height:42px;

width:auto;

object-fit:contain;

opacity:.42;

filter:grayscale(100%) brightness(.8);

transition:.35s;

}

.client-track img:hover{

opacity:1;

filter:none;

transform:translateY(-5px) scale(1.06);

}

.client-marquee:hover .client-track{

animation-play-state:paused;

}

@keyframes marquee{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

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

HOME ABOUT

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

.home-about{

padding:200px 0;

background:#F8FAFC;

position:relative;

overflow:hidden;

}

.home-about-grid{

display:grid;

grid-template-columns:1.05fr .95fr;

gap:120px;

align-items:center;

}

.home-about-image{

position:relative;

overflow:hidden;

border-radius:32px;

box-shadow:

0 45px 120px rgba(8,28,58,.10);

}

.home-about-image img{

display:block;

width:100%;

transition:transform .8s ease;

}

.home-about-image:hover img{

transform:scale(1.05);

}

.home-about-content p{

margin:28px 0;

line-height:2;

color:#666;

}

.about-highlights{

display:grid;

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

gap:18px;

margin:45px 0;

}

.about-highlights div{

padding:18px 22px;

background:white;

border-radius:14px;

font-weight:600;

box-shadow:0 10px 25px rgba(0,0,0,.05);

transition:.3s;

}

.about-highlights div:hover{

transform:translateY(-5px);

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

ENTITY DIFFERENCE

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

.entity-difference{

padding:180px 0;

background:#081C3A;

color:#fff;

}

.entity-difference .section-heading{


max-width:760px;

margin:0 auto 90px;
}


.section-heading.center{

text-align:center;

}


.entity-difference .section-heading span{

display:inline-block;

margin-bottom:22px;

font-size:.78rem;

font-weight:700;

letter-spacing:.22em;

color:#0D3B8C;

text-transform:uppercase;

}

.entity-difference .section-heading h2{

font-size:clamp(3rem,5vw,4.8rem);

line-height:1.08;

font-weight:700;

color:#081C3A;

margin-bottom:28px;

max-width:850px;

}

.entity-difference .section-heading p{

font-size:1.12rem;

line-height:2;

color:#64748B;

max-width:700px;

}

.difference-list{

display:flex;

flex-direction:column;

}

.difference-item{

display:grid;

grid-template-columns:240px 1fr;

gap:60px;

padding:50px 0;

border-top:1px solid rgba(255,255,255,.08);

align-items:start;

}

.difference-number h3{

font-size:4rem;

font-weight:700;

margin-bottom:8px;

color:#fff;

}

.difference-number span{

color:rgba(255,255,255,.65);

font-size:.95rem;

text-transform:uppercase;

letter-spacing:.08em;

}

.difference-content h4{

font-size:1.7rem;

margin-bottom:16px;

font-weight:600;

}

.difference-content p{

max-width:700px;

line-height:1.9;

color:rgba(255,255,255,.72);

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

CTA

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

.cta-section{

padding:220px 0;

background:

linear-gradient(

180deg,

#0B1D3A,

#081C3A

);

text-align:center;

position:relative;

overflow:hidden;

}

.cta-section::before{

content:"";

position:absolute;

inset:0;

background-image:

linear-gradient(

rgba(255,255,255,.03) 1px,

transparent 1px

),

linear-gradient(

90deg,

rgba(255,255,255,.03) 1px,

transparent 1px

);

background-size:80px 80px;

opacity:.45;

}

.cta-content{

position:relative;

z-index:2;

max-width:900px;

margin:auto;

}

.cta-content span{

display:block;

margin-bottom:25px;

letter-spacing:.25em;

font-size:.78rem;

color:#8FB7FF;

font-weight:700;

}

.cta-content h2{

font-size:clamp(3.5rem,7vw,6rem);

line-height:1.05;

color:#fff;

margin-bottom:30px;

}

.cta-content p{

max-width:700px;

margin:auto;

font-size:1.15rem;

line-height:2;

color:rgba(255,255,255,.75);

margin-bottom:55px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:22px;

flex-wrap:wrap;

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

ABOUT IMAGE FRAME

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

.home-about-image::before{

content:"";

position:absolute;

top:-18px;

left:-18px;

width:90px;

height:90px;

border-top:2px solid rgba(13,59,140,.18);

border-left:2px solid rgba(13,59,140,.18);

z-index:3;

}

.home-about-image::after{

content:"";

position:absolute;

bottom:-18px;

right:-18px;

width:90px;

height:90px;

border-bottom:2px solid rgba(13,59,140,.18);

border-right:2px solid rgba(13,59,140,.18);

z-index:3;

}

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

SECTION DIVIDER

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

.section-divider{

width:100%;

height:120px;

position:relative;

overflow:hidden;

background:#fff;

}

.section-divider::before{

content:"";

position:absolute;

top:50%;

left:0;

width:100%;

height:1px;

background:

linear-gradient(

90deg,

transparent,

rgba(13,59,140,.15),

transparent

);

}

.section-divider::after{

content:"";

position:absolute;

left:50%;

top:50%;

width:16px;

height:16px;

border:2px solid rgba(13,59,140,.25);

transform:

translate(-50%,-50%)

rotate(45deg);

background:#fff;

}

/*==========================================================
ARCHITECTURAL CAD & BLUEPRINT FILLERS
==========================================================*/

.bg-blueprint-grid {
    position: relative;
}

.bg-blueprint-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(rgba(13, 59, 140, 0.035) 1.2px, transparent 1.2px),
        linear-gradient(rgba(13, 59, 140, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 59, 140, 0.012) 1px, transparent 1px);
    background-size: 24px 24px, 120px 120px, 120px 120px;
    pointer-events: none;
    z-index: 1;
}

.cad-divider {
    display: none;
    width: 100%;
    height: 1px;
    background: rgba(13, 59, 140, 0.08);
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 5;
}

.cad-divider::before {
    content: "+";
    position: absolute;
    left: 6%;
    top: 50%;
    transform: translateY(-50%);
    font-family: monospace;
    font-size: 14px;
    color: rgba(13, 59, 140, 0.4);
}

.cad-divider::after {
    content: "+";
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    font-family: monospace;
    font-size: 14px;
    color: rgba(13, 59, 140, 0.4);
}

.cad-divider .cad-metadata {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #FAFBFD;
    padding: 0 15px;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: rgba(13, 59, 140, 0.45);
    text-transform: uppercase;
    white-space: nowrap;
}

.cad-divider.white-bg .cad-metadata {
    background: #ffffff;
}

.projects-blueprint-container {
    position: relative;
}

.projects-blueprint-line-y {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(13, 59, 140, 0.04);
    z-index: 1;
    pointer-events: none;
}

.projects-blueprint-line-x {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(13, 59, 140, 0.04);
    z-index: 1;
    pointer-events: none;
}

.blueprint-dimension {
    position: absolute;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.62rem;
    font-weight: 500;
    color: rgba(13, 59, 140, 0.25);
    z-index: 2;
    letter-spacing: 1px;
    pointer-events: none;
}

.timeline-container-wrapper {
    position: relative;
}

.timeline-cad-overlay {
    position: absolute;
    width: 280px;
    height: 220px;
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline-step.active .timeline-cad-overlay {
    opacity: 0.12;
    transform: scale(1.03);
}

.timeline-cad-left {
    left: 4%;
}

.timeline-cad-right {
    right: 4%;
}

@media (max-width: 1200px) {
    .timeline-cad-overlay {
        display: none;
    }
}

.rotating-watermark-wrapper {
    position: absolute;
    width: 420px;
    height: 420px;
    opacity: 0.02;
    pointer-events: none;
    z-index: 1;
    animation: rotateSlowly 180s linear infinite;
    pointer-events: none;
}

@keyframes rotateSlowly {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* NEW S-CURVE TIMELINE PROCESS SECTION */
.workflow-grid {
    display: grid;
    grid-template-columns: 38% 62%;
    gap: 60px;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.workflow-left {
    display: flex;
    flex-direction: column;
}

.workflow-left h2 {
    font-size: clamp(2.2rem, 3.2vw, 3.2rem);
    line-height: 1.15;
    font-weight: 800;
    color: #081C3A;
    margin: 18px 0 24px;
    letter-spacing: -1.2px;
}

.workflow-left p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #5F6B7A;
    margin-bottom: 35px;
}

.workflow-features-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #E6EFFC;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(8, 28, 58, 0.015);
}

.workflow-feature-item {
    display: flex;
    gap: 18px;
    margin-bottom: 24px;
}

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

.workflow-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F0F6FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0D3B8C;
}

.workflow-feature-icon svg {
    stroke: #0D3B8C;
}

.workflow-feature-text h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #081C3A;
    margin: 0 0 6px 0;
}

.workflow-feature-text p {
    font-size: 0.9rem;
    color: #5F6B7A;
    margin: 0;
    line-height: 1.5;
}

/* Wavy Timeline Right Column */
.timeline-wavy-container {
    position: relative;
    padding: 20px 0;
}

.timeline-step {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2;
    margin-bottom: 50px;
}

.timeline-step:last-child {
    margin-bottom: 0;
}

.timeline-svg-wrapper {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 120px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
}

.timeline-svg-wrapper svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.timeline-path-bg {
    fill: none;
    stroke: #E2E8F0;
    stroke-width: 3px;
    stroke-linecap: round;
}

.timeline-path-active {
    fill: none;
    stroke: #0D3B8C;
    stroke-width: 3px;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

.timeline-node-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 3;
    height: 100px;
}

.timeline-node {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-weight: 700;
    font-size: 1.1rem;
    color: #081C3A;
    box-shadow: 0 4px 12px rgba(8, 28, 58, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.timeline-step.active .timeline-node {
    background: #0D3B8C;
    border-color: #0D3B8C;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(13, 59, 140, 0.3);
    transform: scale(1.1);
}

.timeline-card-wrapper {
    opacity: 0;
    transform: translateY(25px);
    transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 2;
}

.timeline-step.active .timeline-card-wrapper {
    opacity: 1;
    transform: translateY(0);
}

.timeline-card-new {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #E6EFFC;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(8, 28, 58, 0.015);
    display: flex;
    gap: 18px;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.timeline-card-new:hover {
    border-color: #CBDDF8;
    box-shadow: 0 15px 30px rgba(8, 28, 58, 0.05);
    transform: translateY(-5px);
}

.timeline-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #F0F6FF;
    color: #0D3B8C;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s, color 0.3s;
}

.timeline-card-icon svg {
    stroke: #0D3B8C;
    transition: stroke 0.3s;
}

.timeline-step.active .timeline-card-icon {
    background: #0D3B8C;
    color: #ffffff;
}

.timeline-step.active .timeline-card-icon svg {
    stroke: #ffffff;
}

.timeline-card-text h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #081C3A;
    margin: 0 0 8px 0;
}

.timeline-card-text p {
    font-size: 0.92rem;
    color: #5F6B7A;
    margin: 0;
    line-height: 1.6;
}

/* CAD Background Wireframe Overlays */
.bg-wireframe-crane {
    position: absolute;
    right: -20px;
    top: 80px;
    width: 340px;
    height: auto;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
    color: #0D3B8C;
}

.bg-wireframe-building {
    position: absolute;
    left: -20px;
    bottom: 40px;
    width: 280px;
    height: auto;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
    color: #0D3B8C;
}

/* RESPONSIVE TIMELINE OVERRIDES */
@media (max-width: 1024px) {
    .workflow-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .workflow-left {
        max-width: 650px;
        margin: 0 auto;
        text-align: center;
        align-items: center;
    }
    
    .workflow-left span.section-tag {
        margin: 0 auto 10px !important;
    }
    
    .workflow-features-card {
        text-align: left;
    }

    .timeline-wavy-container {
        position: relative;
        max-width: 650px;
        margin: 40px auto 0;
        padding-left: 10px;
    }
    
    .timeline-wavy-container::before {
        content: "";
        position: absolute;
        left: 35px;
        top: 10px;
        bottom: 10px;
        width: 3px;
        background: #E2E8F0;
        z-index: 1;
    }
    
    .timeline-wavy-container::after {
        content: "";
        position: absolute;
        left: 35px;
        top: 10px;
        width: 3px;
        background: #0D3B8C;
        z-index: 2;
        height: var(--mobile-timeline-height, 0%);
        max-height: calc(100% - 20px);
        transition: height 0.1s linear;
    }
    
    .timeline-svg-wrapper {
        display: none !important;
    }
    
    .grid-spacer {
        display: none !important;
    }

    .timeline-step {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 20px;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 30px;
    }

    .timeline-step:last-child {
        margin-bottom: 0;
    }
    
    .timeline-node-container {
        order: 1;
        flex-shrink: 0;
        grid-column: auto !important;
        height: auto;
    }
    
    .timeline-node {
        width: 50px;
        height: 50px;
    }
    
    .timeline-card-wrapper {
        order: 2;
        flex: 1;
        min-width: 0;
        grid-column: auto !important;
        opacity: 1 !important;
        transform: none !important;
        width: auto !important;
    }
    
    .timeline-card-new {
        padding: 20px;
    }
    
    .bg-wireframe-crane,
    .bg-wireframe-building {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .timeline-wavy-container {
        padding-left: 0;
    }
    
    .timeline-wavy-container::before,
    .timeline-wavy-container::after {
        left: 20px;
    }
    
    .timeline-node {
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
    }
    
    .timeline-card-new {
        flex-direction: column;
        gap: 12px;
    }
    
    .timeline-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    
    .timeline-card-icon svg {
        width: 18px;
        height: 18px;
    }
}