/* =========================================================
   RESET
========================================================= */

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

html{
    scroll-behavior:smooth;
    max-width:100%;
    overflow-x:hidden;
}

body{
    margin:0;
    padding:0;
    font-family:"Poppins",Arial,sans-serif;
    color:#171b43;
    background:#fff;
    overflow-x:hidden;
}

img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    font-family:inherit;
}


/* =========================================================
   ROOT
========================================================= */

:root{
    --navy:#171b43;
    --navy-dark:#0e1233;
    --gold:#b58a4a;
    --gold-light:#d2ad70;
    --cream:#f6f5f1;
    --light:#f7f7f5;
    --text:#707070;
    --border:#e8e8e8;
}


/* =========================================================
   COMMON
========================================================= */

.container{
    width:88%;
    max-width:1450px;
    margin:auto;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    color:var(--gold);
    font-size:10px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
}

.section-tag::before{
    content:"";
    width:35px;
    height:1px;
    background:var(--gold);
}

.section-top{
    width:88%;
    max-width:1450px;
    margin:0 auto 50px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
}

.section-top h2,
.section-center h2{
    margin:0;
    color:var(--navy);
    font-size:50px;
    line-height:1.08;
    font-weight:500;
    letter-spacing:-1.5px;
}

.section-top h2 strong{
    font-weight:500;
    color:var(--gold);
}

.section-center{
    margin-bottom:60px;
    text-align:center;
}

.section-center .section-tag{
    justify-content:center;
}

.section-center h2{
    font-size:50px;
}

.section-center p{
    max-width:570px;
    margin:18px auto 0;
    color:var(--text);
    font-size:12px;
    line-height:1.9;
}

.view-all{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding-bottom:8px;
    border-bottom:1px solid #d7d7d7;
    color:var(--navy);
    font-size:9px;
    font-weight:600;
    letter-spacing:2px;
    white-space:nowrap;
    transition:.35s ease;
}

.view-all i{
    color:var(--gold);
    transition:.35s ease;
}

.view-all:hover{
    color:var(--gold);
    border-color:var(--gold);
}

.view-all:hover i{
    transform:translateX(5px);
}


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

.hero-slider{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#000;
}

.hero-slide{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    opacity:0;
    visibility:hidden;
    transition:opacity 1s ease,visibility 1s ease;
}

.hero-slide.active{
    position:relative;
    opacity:1;
    visibility:visible;
}

.hero-slide img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    object-position:center;
}

.hero-slide::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:2;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.18),
        transparent 50%,
        rgba(0,0,0,.08)
    );
}

.hero-dots{
    position:absolute;
    z-index:10;
    bottom:25px;
    left:50%;
    display:flex;
    align-items:center;
    gap:8px;
    transform:translateX(-50%);
}

.hero-dot{
    width:7px;
    height:7px;
    padding:0;
    border:1px solid #fff;
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    transition:all .35s ease;
}

.hero-dot.active{
    width:28px;
    border-radius:20px;
    background:#fff;
}

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

.about-section{
    position:relative;
    width:100%;
    padding:125px 0 135px;
    background:#fff;
    overflow:hidden;
    scroll-margin-top:100px;
}


/* =========================================================
   BACKGROUND DECORATIVE CIRCLES
========================================================= */

.about-section::before{
    content:"";
    position:absolute;

    top:40px;
    right:-190px;

    width:520px;
    height:520px;

    border:1px solid rgba(181,138,74,.10);
    border-radius:50%;

    pointer-events:none;
}

.about-section::after{
    content:"";
    position:absolute;

    bottom:-320px;
    left:-270px;

    width:620px;
    height:620px;

    border:1px solid rgba(23,27,67,.035);
    border-radius:50%;

    pointer-events:none;
}


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

.about-container{
    position:relative;
    z-index:2;

    width:88%;
    max-width:1450px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);

    align-items:center;

    gap:80px;
}


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

.about-content{
    position:relative;

    width:100%;
    max-width:650px;

    min-width:0;
}


/* =========================================================
   SECTION TAG
========================================================= */

.about-content .section-tag{
    position:relative;

    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:20px;

    color:var(--gold);

    font-size:10px;
    font-weight:600;

    letter-spacing:3px;
}

.about-content .section-tag::before{
    content:"";

    width:38px;
    height:1px;

    flex-shrink:0;

    background:var(--gold);
}


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

.about-content h2{
    width:100%;
    max-width:650px;

    margin:0 0 27px;

    color:var(--navy);

    font-size:clamp(42px,4.3vw,62px);

    line-height:1.06;

    font-weight:500;

    letter-spacing:-2.5px;
}

.about-content h2 span{
    display:block;

    margin-top:2px;

    color:var(--gold);

    font-family:Georgia,"Times New Roman",serif;

    font-style:italic;

    font-weight:400;

    letter-spacing:-1px;
}


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

.about-content p{
    width:100%;
    max-width:580px;

    margin:0 0 17px;

    color:var(--text);

    font-size:13px;

    line-height:2;

    font-weight:400;
}


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

.about-btn{
    position:relative;

    display:inline-flex;

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

    gap:15px;

    margin-top:18px;

    padding:16px 27px;

    overflow:hidden;

    background:var(--navy);

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

    color:#fff;

    font-size:9px;
    font-weight:600;

    letter-spacing:2px;

    transition:
        transform .35s ease,
        background .4s ease,
        border-color .4s ease;
}

.about-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:0;
    height:100%;

    background:var(--gold);

    transition:
        width .45s cubic-bezier(.22,.61,.36,1);
}

.about-btn:hover::before{
    width:100%;
}

.about-btn:hover{
    border-color:var(--gold);

    transform:translateY(-3px);
}

.about-btn i{
    position:relative;
    z-index:2;

    transition:
        transform .35s ease;
}

.about-btn:hover i{
    transform:translateX(6px);
}


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

.about-visual{
    position:relative;

    width:100%;
    height:560px;

    min-width:0;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.about-image-main{
    position:absolute;

    top:0;
    right:0;

    width:79%;
    height:475px;

    overflow:hidden;

    background:#f5f5f5;
}

.about-image-main::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            120deg,
            rgba(23,27,67,.08),
            transparent 60%
        );

    pointer-events:none;
}

.about-image-main img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;

    transition:
        transform 1s cubic-bezier(.22,.61,.36,1);
}

.about-visual:hover .about-image-main img{
    transform:scale(1.045);
}


/* =========================================================
   SMALL IMAGE
========================================================= */

.about-image-small{
    position:absolute;

    z-index:3;

    left:0;
    bottom:0;

    width:47%;
    height:275px;

    padding:9px;

    overflow:hidden;

    background:#fff;

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

.about-image-small img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;

    transition:
        transform .7s ease;
}

.about-image-small:hover img{
    transform:scale(1.045);
}


/* =========================================================
   EXPERIENCE BOX
========================================================= */

.about-experience{
    position:absolute;

    z-index:5;

    right:3%;
    bottom:35px;

    width:145px;
    height:145px;

    display:flex;

    flex-direction:column;

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

    background:var(--gold);

    color:#fff;

    box-shadow:
        0 18px 40px rgba(181,138,74,.30);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.about-experience:hover{
    transform:
        translateY(-6px)
        rotate(2deg);

    box-shadow:
        0 25px 50px rgba(181,138,74,.38);
}

.about-experience strong{
    display:block;

    font-size:40px;

    line-height:1;

    font-weight:500;
}

.about-experience span{
    display:block;

    margin-top:9px;

    font-size:8px;

    line-height:1.6;

    letter-spacing:2px;

    text-align:center;
}


/* =========================================================
   IMAGE LOADING / RENDERING FIX
========================================================= */

.about-image-main img,
.about-image-small img{
    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    transform:translateZ(0);

    -webkit-transform:translateZ(0);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .about-image-main img,
    .about-image-small img,
    .about-btn,
    .about-btn::before,
    .about-btn i,
    .about-experience{
        transition:none !important;
    }

}

/* =========================================================
   STATS
========================================================= */

.stats-section{
    position:relative;
    padding:72px 0;
    overflow:hidden;
    background:var(--navy);
}

.stats-section::before{
    content:"";
    position:absolute;
    top:-280px;
    right:-180px;
    width:600px;
    height:600px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:50%;
}

.stats-section::after{
    content:"";
    position:absolute;
    bottom:-300px;
    left:-200px;
    width:500px;
    height:500px;
    border:1px solid rgba(255,255,255,.04);
    border-radius:50%;
}

.stats-container{
    position:relative;
    z-index:2;
    width:88%;
    max-width:1450px;
    margin:auto;
    display:flex;
    align-items:stretch;
    justify-content:space-between;
}

.stat-item{
    position:relative;
    flex:1 1 25%;
    padding:8px 20px;
    text-align:center;
}

.stat-item::after{
    content:"";
    position:absolute;
    top:10%;
    right:0;
    width:1px;
    height:80%;
    background:rgba(255,255,255,.15);
}

.stat-item:last-child::after{
    display:none;
}

.stat-item strong{
    display:block;
    color:#fff;
    font-size:55px;
    line-height:1;
    font-weight:500;
    letter-spacing:-2px;
}

.stat-item strong span{
    color:var(--gold-light);
    font-size:30px;
}

.stat-item p{
    margin-top:12px;
    color:#aeb1c1;
    font-size:8px;
    font-weight:500;
    letter-spacing:2.5px;
}


/* =========================================================
   PROJECT SHOWCASE
========================================================= */

.project-showcase{
    position:relative;
    width:100%;
    padding:100px 0;
    overflow:hidden;
    background:#fff;
}

.project-showcase .section-top{
    width:min(1400px,92%);
    margin:0 auto 50px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
}

.project-showcase .section-tag{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
    color:var(--gold);
    font-size:12px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
}

.project-showcase .section-tag::before{
    width:35px;
    background:var(--gold);
}

.project-showcase .section-top h2{
    margin:0;
    color:#171717;
    font-size:clamp(40px,5vw,72px);
    line-height:1.2;
    font-weight:300;
    letter-spacing:-2px;
}

.project-showcase .section-top h2 strong{
    color:#171717;
    font-weight:700;
}


/* =========================================================
   PROJECT CONTROLS
========================================================= */

.project-slider-controls{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.project-arrow{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d9d9d9;
    background:#fff;
    color:#171717;
    cursor:pointer;
    font-size:16px;
    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.project-arrow:hover{
    border-color:#171717;
    background:#171717;
    color:#fff;
}

.project-arrow:active{
    transform:scale(.94);
}

.project-arrow:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
}


/* =========================================================
   PROJECT SLIDER
========================================================= */

.project-slider{
    position:relative;
    width:100%;
    max-width:1400px;
    margin:0 auto;
    overflow:hidden;
    isolation:isolate;
}

.project-track{
    display:flex;
    flex-wrap:nowrap;
    gap:24px;
    width:max-content;
    transform:translate3d(0,0,0);
    will-change:transform;
    transition:transform 700ms cubic-bezier(.22,.61,.36,1);
    backface-visibility:hidden;
    transform-style:preserve-3d;
}

.project-track.no-transition{
    transition:none!important;
}


/* =========================================================
   PROJECT CARD
========================================================= */

.premium-project-card{
    position:relative;
    flex:0 0 calc((min(1400px,92vw) - 72px) / 4);
    width:calc((min(1400px,92vw) - 72px) / 4);
    min-width:0;
    overflow:hidden;
    border:1px solid #e8e8e8;
    background:#fff;
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.premium-project-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(0,0,0,.1);
}


/* =========================================================
   PROJECT IMAGE
========================================================= */

.premium-project-image{
    position:relative;
    width:100%;
    height:320px;
    overflow:hidden;
    background:#eee;
}

.premium-project-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s cubic-bezier(.22,.61,.36,1);
}

.premium-project-card:hover .premium-project-image img{
    transform:scale(1.06);
}

.project-image-overlay{
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.05) 20%,
        rgba(0,0,0,.12) 50%,
        rgba(0,0,0,.65) 100%
    );
}


/* =========================================================
   PROJECT STATUS
========================================================= */

.project-status{
    position:absolute;
    z-index:3;
    top:18px;
    left:18px;
    padding:8px 13px;
    background:var(--gold);
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.project-status.delivered{
    background:#171717;
}


/* =========================================================
   PROJECT LOCATION
========================================================= */

.project-location{
    position:absolute;
    z-index:3;
    bottom:18px;
    left:18px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-size:12px;
    font-weight:500;
    letter-spacing:.3px;
}

.project-location i{
    color:var(--gold);
    font-size:13px;
}


/* =========================================================
   PROJECT INFO
========================================================= */

.premium-project-info{
    min-height:270px;
    padding:28px 26px 30px;
    display:flex;
    flex-direction:column;
}

.premium-project-type{
    display:block;
    margin-bottom:10px;
    color:var(--gold);
    font-size:10px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.premium-project-info h3{
    margin:0 0 13px;
    color:#171717;
    font-size:25px;
    line-height:1.15;
    font-weight:700;
    letter-spacing:-.4px;
}

.premium-project-info p{
    margin:0;
    color:#777;
    font-size:13px;
    line-height:1.7;
    font-weight:400;
}


/* =========================================================
   PROJECT META
========================================================= */

.premium-project-meta{
    margin-top:auto;
    padding-top:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-top:1px solid #ededed;
}

.premium-project-meta span{
    display:flex;
    align-items:center;
    gap:7px;
    color:#555;
    font-size:10px;
    font-weight:600;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.premium-project-meta i{
    color:var(--gold);
    font-size:12px;
}


/* =========================================================
   VIEW PROJECT
========================================================= */

.project-view-link{
    width:fit-content;
    margin-top:22px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#171717;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;
    transition:color .3s ease,gap .3s ease;
}

.project-view-link i{
    font-size:12px;
    transition:transform .3s ease;
}

.project-view-link:hover{
    gap:14px;
    color:var(--gold);
}

.project-view-link:hover i{
    transform:translateX(3px);
}


/* =========================================================
   PROJECT BOTTOM
========================================================= */

.project-slider-bottom{
    width:min(1400px,92%);
    margin:35px auto 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.project-slider-dots{
    display:flex;
    align-items:center;
    gap:7px;
}

.project-slider-dots button,
.project-slider-dots span{
    width:7px;
    height:7px;
    display:block;
    padding:0;
    border:0;
    border-radius:50%;
    background:#d4d4d4;
    cursor:pointer;
    transition:
        width .3s ease,
        background .3s ease,
        border-radius .3s ease;
}

.project-slider-dots button.active,
.project-slider-dots span.active{
    width:25px;
    border-radius:20px;
    background:var(--gold);
}


/* =========================================================
   ONGOING / DELIVERED
========================================================= */

.ongoing-projects{
    padding-bottom:80px;
}

.delivered-projects{
    padding-top:80px;
    background:#f8f8f6;
}

.delivered-projects .premium-project-card{
    background:#fff;
}





/*==================================================
    AWARDS SLIDER SECTION
==================================================*/

.awards-slider-section{
    position:relative;
    width:100%;
    padding:75px 5%;
    background:#fff;
    overflow:hidden;
}


/*==================================================
    MAIN SLIDER
==================================================*/

.awards-slider{
    position:relative;
    width:100%;
    max-width:1500px;
    margin:0 auto;
    overflow:hidden;
}


/*==================================================
    SLIDER TRACK
==================================================*/

.awards-track{
    display:flex;
    align-items:stretch;
    gap:22px;
    width:100%;
    transition:transform .7s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}


/*==================================================
    SLIDE
==================================================*/

.award-slide{
    flex:0 0 calc((100% - 66px) / 4);
    min-width:0;
}


/*==================================================
    AWARD BOX
==================================================*/

.award-box{
    position:relative;
    width:100%;
    height:360px;

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

    overflow:hidden;

    background:#f7f7f7;

    border:1px solid #eeeeee;

    transition:
        box-shadow .4s ease,
        transform .4s ease;
}


/*==================================================
    AWARD IMAGE
==================================================*/

.award-box img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;

    transition:
        transform .6s cubic-bezier(.22,.61,.36,1);
}


/*==================================================
    IMAGE HOVER
==================================================*/

.award-box:hover{
    transform:translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.10);
}

.award-box:hover img{
    transform:scale(1.035);
}


/*==================================================
    LEFT / RIGHT ARROWS
==================================================*/

.award-arrow{
    position:absolute;

    top:50%;

    z-index:20;

    width:50px;
    height:50px;

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

    padding:0;

    border:1px solid #dedede;
    border-radius:50%;

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

    color:#222;

    cursor:pointer;

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);

    opacity:0;

    transform:
        translateY(-50%)
        scale(.65);

    transition:
        opacity .35s ease,
        transform .35s cubic-bezier(.22,.61,.36,1),
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


/*==================================================
    ARROW SHOW ANIMATION
==================================================*/

.awards-slider:hover .award-arrow{
    opacity:1;

    transform:
        translateY(-50%)
        scale(1);
}


/*==================================================
    PREVIOUS BUTTON
==================================================*/

.award-prev{
    left:18px;
}


/*==================================================
    NEXT BUTTON
==================================================*/

.award-next{
    right:18px;
}


/*==================================================
    ARROW ICON
==================================================*/

.award-arrow i{
    font-size:13px;

    transition:
        transform .35s ease;
}


/*==================================================
    PREVIOUS HOVER
==================================================*/

.award-prev:hover{

    background:#111;

    border-color:#111;

    color:#fff;

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

    transform:
        translateY(-50%)
        scale(1.08);
}

.award-prev:hover i{
    transform:translateX(-5px);
}


/*==================================================
    NEXT HOVER
==================================================*/

.award-next:hover{

    background:#111;

    border-color:#111;

    color:#fff;

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

    transform:
        translateY(-50%)
        scale(1.08);
}

.award-next:hover i{
    transform:translateX(5px);
}


/*==================================================
    BUTTON CLICK
==================================================*/

.award-arrow:active{
    transform:
        translateY(-50%)
        scale(.92);
}


/*==================================================
    BUTTON FOCUS
==================================================*/

.award-arrow:focus{
    outline:none;
}

.award-arrow:focus-visible{
    outline:2px solid #111;
    outline-offset:4px;
}