:root{
    --navy:#002C6D;
    --orange:#F97316;
    --light:#f8fafc;
}
*
{
    margin: 0;
}
html
{
    scroll-behavior: smooth;
}

.gallery-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}
.gallery-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
    rgba(0,44,109,.04) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(0,44,109,.04) 1px,
    transparent 1px);

    background-size:70px 70px;

}   
.gallery-glow{

    position:absolute;

    width:900px;
    height:900px;

    right:-300px;
    top:-300px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(249,115,22,.15),
        transparent 70%
    );

    filter:blur(80px);

}
.gallery-container{

    width:min(1400px,90%);

    margin:auto;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:80px;

    align-items:center;

    position:relative;

    z-index:5;

}
.gallery-tag{

    display:inline-flex;

    padding:12px 22px;

    border-radius:100px;

    background:
    rgba(249,115,22,.12);

    color:#F97316;

    font-weight:700;

    margin-bottom:25px;

}
.gallery-content h1{

    font-size:
    clamp(4rem,8vw,7rem);

    line-height:.95;

    color:#002C6D;

    margin-bottom:25px;

}
.gallery-content p{

    font-size:1.15rem;

    line-height:1.9;

    color:#666;

    max-width:650px;

    margin-bottom:40px;

}
.gallery-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}
.btn-primary{

    padding:18px 32px;

    background:#F97316;

    color:white;

    text-decoration:none;

    border-radius:100px;

    font-weight:700;

}
.btn-secondary{

    padding:18px 32px;

    border-radius:100px;

    text-decoration:none;

    color:#002C6D;

    border:1px solid rgba(0,44,109,.15);

}
.gallery-preview{

    position:relative;

    height:650px;

}
.preview-card{

    position:absolute;

    border-radius:30px;

    overflow:hidden;

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

}
.preview-card img{

    width:100%;
    height:100%;

    object-fit:cover;

}
.card-1{

    width:320px;
    height:420px;

    top:0;
    left:0;

    z-index:3;

}
.card-2{

    width:280px;
    height:350px;

    right:0;
    top:80px;

    z-index:2;

}
.card-3{

    width:340px;
    height:260px;

    left:120px;
    bottom:0;

    z-index:1;

}
.scroll-indicator{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

}
.scroll-indicator span{

    width:28px;
    height:48px;

    border-radius:30px;

    border:2px solid #002C6D;

    display:block;

    position:relative;

}
.scroll-indicator span::before{

    content:"";

    position:absolute;

    width:6px;
    height:6px;

    background:#002C6D;

    border-radius:50%;

    left:50%;

    transform:translateX(-50%);

    animation:scrollDot 2s infinite;

}
@keyframes scrollDot{

    0%{

        top:8px;
        opacity:1;

    }

    100%{

        top:28px;
        opacity:0;

    }

}

































.featured-projects{

    position:relative;

    padding:160px 0;

}
.featured-header{

    width:min(900px,90%);

    margin:auto;

    text-align:center;

    margin-bottom:120px;

}

.featured-header h2{

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

    color:#002C6D;

    margin:20px 0;

    line-height:1;

}

.featured-header p{

    color:#666;

    line-height:1.8;

}
.projects-wrapper{

    width:min(1400px,90%);

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:120px;

}
.project-item{

    display:grid;

    grid-template-columns:
    1.2fr 1fr;

    gap:70px;

    align-items:center;

}
.project-item.reverse{

    grid-template-columns:
    1fr 1.2fr;

}

.project-item.reverse .project-image{

    order:2;

}

.project-item.reverse .project-content{

    order:1;

}
.project-image{

    position:relative;

    overflow:hidden;

    border-radius:35px;

}
.project-image img{

    width:100%;
    height:700px;

    object-fit:cover;

    transition:.8s;

}
.project-item:hover img{

    transform:scale(1.08);

}
.project-number{

    position:absolute;

    top:30px;
    left:30px;

    width:90px;
    height:90px;

    border-radius:50%;

    backdrop-filter:blur(20px);

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

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

    display:flex;

    justify-content:center;
    align-items:center;

    color:white;

    font-size:1.8rem;

    font-weight:700;

}
.project-location{

    display:inline-block;

    color:#F97316;

    font-weight:700;

    margin-bottom:20px;

    letter-spacing:2px;

}
.project-content h3{

    font-size:clamp(
    2.5rem,
    4vw,
    4rem);

    color:#002C6D;

    line-height:1.05;

    margin-bottom:25px;

}
.project-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:30px;

}
.project-content ul{

    list-style:none;

    padding:0;

    margin-bottom:40px;

}

.project-content li{

    margin-bottom:15px;

    color:#002C6D;

    font-weight:600;

    position:relative;

    padding-left:25px;

}
.project-content li::before{

    content:"";

    position:absolute;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#F97316;

    left:0;
    top:8px;

}
.project-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 32px;

    background:#002C6D;

    color:white;

    text-decoration:none;

    border-radius:100px;

    font-weight:600;

    transition:.4s;

}
.project-btn:hover{

    background:#F97316;

    transform:translateY(-5px);

}
.project-item{

    opacity:0;

    transform:
    translateY(80px);

}

.project-item.show{

    opacity:1;

    transform:none;

    transition:
    .9s cubic-bezier(
    .22,
    1,
    .36,
    1);

}





























.gallery-masonry{

    padding:140px 0;

}
.gallery-header{

    width:min(900px,90%);
    margin:auto;

    text-align:center;

    margin-bottom:60px;

}

.gallery-header h2{

    color:#002C6D;

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

    margin:20px 0;

}
.gallery-filters{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:60px;

}
.filter-btn{

    border:none;

    cursor:pointer;

    padding:16px 26px;

    border-radius:100px;

    background:white;

    color:#002C6D;

    font-weight:600;

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

    transition:.35s;

}
.filter-btn:hover{

    transform:translateY(-3px);

}
.filter-btn.active{

    background:#F97316;

    color:white;

}
.masonry-grid{

    width:min(1400px,90%);

    margin:auto;

    columns:4 300px;

    column-gap:20px;

}
.gallery-item{

    position:relative;

    margin-bottom:20px;

    overflow:hidden;

    border-radius:30px;

    cursor:pointer;

    break-inside:avoid;

}
.gallery-item img{

    width:100%;

    display:block;

    transition:.8s;

}
.gallery-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    transparent,
    rgba(0,0,0,.75)
    );

    display:flex;

    justify-content:flex-end;

    flex-direction:column;

    padding:30px;

    opacity:0;

    transition:.4s;

}
.gallery-overlay h3{

    color:white;

    margin-bottom:8px;

}
.gallery-overlay span{

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

}
.gallery-item:hover img{

    transform:scale(1.08);

}
.gallery-item:hover .gallery-overlay{

    opacity:1;

}
.gallery-item{

    opacity:0;

    transform:
    translateY(60px);

}
.gallery-item.show{

    opacity:1;

    transform:none;

    transition:
    .8s cubic-bezier(
    .22,
    1,
    .36,
    1);

}
.gallery-lightbox{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.95);

    display:flex;

    justify-content:center;
    align-items:center;

    z-index:99999;

    opacity:0;
    visibility:hidden;

    transition:.4s;

}
.gallery-lightbox.active{

    opacity:1;

    visibility:visible;

}
.gallery-lightbox img{

    max-width:90%;
    max-height:90%;

    border-radius:20px;

}
.close-lightbox{

    position:absolute;

    top:30px;
    right:50px;

    color:white;

    font-size:4rem;

    cursor:pointer;

}



























.project-process{

    position:relative;

    padding:160px 0;

    overflow:hidden;

}
.process-glow{

    position:absolute;

    width:700px;
    height:700px;

    left:-250px;
    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(249,115,22,.08),
        transparent 70%
    );

    filter:blur(80px);

}
.process-container{

    width:min(1400px,90%);

    margin:auto;

    position:relative;

    z-index:2;

}
.process-header{

    max-width:850px;

    margin:auto;

    text-align:center;

    margin-bottom:100px;

}
.process-header h2{

    color:#002C6D;

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

    line-height:1;

    margin:20px 0;

}
.process-header p{

    color:#666;

    line-height:1.9;

}
.process-timeline{

    display:grid;

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

    gap:35px;

    position:relative;

}
.process-timeline::before{

    content:"";

    position:absolute;

    left:10%;
    right:10%;

    top:55px;

    height:2px;

    background:

    linear-gradient(
    90deg,
    #F97316,
    rgba(249,115,22,.15)
    );

}
.process-step{

    position:relative;

    background:white;

    padding:40px 35px;

    border-radius:30px;

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

    box-shadow:
    0 20px 40px rgba(0,44,109,.05);

    transition:.45s;

}
.process-step:hover{

    transform:
    translateY(-10px);

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

}
.step-number{

    width:90px;
    height:90px;

    border-radius:24px;

    background:#002C6D;

    color:white;

    font-size:2rem;

    font-weight:700;

    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:30px;

    position:relative;

    z-index:2;

    transition:.4s;

}
.process-step:hover .step-number{

    background:#F97316;

    transform:
    rotate(6deg);

}
.process-step h3{

    color:#002C6D;

    font-size:1.6rem;

    line-height:1.2;

    margin-bottom:20px;

}
.process-step p{

    color:#666;

    line-height:1.8;

}
.process-step{

    opacity:0;

    transform:
    translateY(80px);

}
.process-step.show{

    opacity:1;

    transform:none;

    transition:
    .9s cubic-bezier(
    .22,
    1,
    .36,
    1);

}























.gallery-cta{

    position:relative;

    padding:140px 0;

    overflow:hidden;

}
.gallery-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        #002C6D 0%,
        #001B45 100%
    );

}
.cta-glow{

    position:absolute;

    width:700px;
    height:700px;

    right:-250px;
    top:-250px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(249,115,22,.25),
        transparent 70%
    );

    filter:blur(90px);

}
.cta-container{

    width:min(1400px,90%);

    margin:auto;

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
    1.2fr .8fr;

    gap:80px;

    align-items:center;

}
.cta-content{

    color:white;

}
.cta-tag{

    display:inline-flex;

    padding:12px 24px;

    border-radius:100px;

    background:
    rgba(249,115,22,.15);

    color:#F97316;

    font-weight:700;

    margin-bottom:25px;

    letter-spacing:1px;

}
.cta-content h2{

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

    line-height:.95;

    margin-bottom:30px;

}
.cta-content p{

    font-size:1.1rem;

    line-height:1.9;

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

    max-width:700px;

    margin-bottom:40px;

}
.cta-features{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:45px;

}
.cta-feature{

    padding:12px 20px;

    border-radius:100px;

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

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

    backdrop-filter:blur(10px);

}
.cta-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}
.cta-primary{

    padding:18px 34px;

    border-radius:100px;

    text-decoration:none;

    background:#F97316;

    color:white;

    font-weight:700;

    transition:.35s;

}
.cta-primary:hover{

    transform:
    translateY(-4px);

}
.cta-secondary{

    padding:18px 34px;

    border-radius:100px;

    text-decoration:none;

    color:white;

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

    transition:.35s;

}
.cta-secondary:hover{

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

}
.cta-side{

    display:flex;

    flex-direction:column;

    gap:20px;

}
.cta-card{

    padding:30px;

    border-radius:28px;

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

    backdrop-filter:blur(18px);

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

    transition:.4s;

}
.cta-card:hover{

    transform:
    translateX(10px);

}
.cta-card span{

    color:#F97316;

    font-size:.85rem;

    letter-spacing:2px;

    font-weight:700;

    display:block;

    margin-bottom:10px;

}
.cta-card h3{

    color:white;

    margin-bottom:10px;

    font-size:1.5rem;

}
.cta-card p{

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

}
.cta-content,
.cta-card{

    opacity:0;

    transform:
    translateY(60px);

}
.cta-content.show,
.cta-card.show{

    opacity:1;

    transform:none;

    transition:
    .9s cubic-bezier(
        .22,
        1,
        .36,
        1
    );

}



























@media(max-width:1100px){

     .cta-container{

        grid-template-columns:1fr;

        gap:50px;

    }
    .process-timeline{

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

}

.process-timeline::before{

    display:none;

}

.project-item,
.project-item.reverse{

    grid-template-columns:1fr;

}

.project-item.reverse .project-image{

    order:1;

}

.project-item.reverse .project-content{

    order:2;

}

.project-image img{

    height:500px;

}
.gallery-container{

    grid-template-columns:1fr;

}

.gallery-preview{

    height:500px;

}

}
@media(max-width:768px){
     .gallery-cta{

        padding:100px 0;

    }

    .cta-content h2{

        font-size:3rem;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-primary,
    .cta-secondary{

        /* width:100%; */

        justify-content:center;

        text-align:center;

    }


    .project-process{

    padding:100px 0;

}

.process-timeline{

    grid-template-columns:1fr;

}

.process-header h2{

    font-size:2.7rem;

}
    .masonry-grid{

    columns:2 180px;

}

.featured-projects{

    padding:100px 0;

}

.project-image img{

    height:350px;

}

.project-content h3{

    font-size:2.2rem;

}

.gallery-content h1{

    font-size:3.5rem;

}

.gallery-preview{

    display:none;

}

}
@media(max-width:550px){

.masonry-grid{

    columns:1;

}

}