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

.hero-content{

    position: relative;
    z-index: 10;

    max-width: 900px;

    margin: 0 auto;

    padding-top: 120px; /* Pushes content below navbar */

    text-align: center;

    color: #fff;

    animation: fadeUp 1.2s ease;

}

.hero-content .small-title{

    display: inline-block;

    color: #F4B400;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 4px;

    font-weight: 700;

    margin-bottom: 20px;

}

.hero-content h1{

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

    font-weight: 800;

    line-height: 1.15;

    margin-bottom: 25px;

    text-shadow: 0 5px 20px rgba(0,0,0,.5);

}

.hero-content p{

    font-size: 1.2rem;

    line-height: 1.9;

    color: #e5e5e5;

    max-width: 750px;

    margin: auto;

    margin-bottom: 40px;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@media(max-width:768px){

.hero-content{

padding:0 20px;

}

.hero-content h1{

font-size:2.6rem;

}

.hero-content p{

font-size:1rem;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;

text-align:center;

}

}

.btn{

    background:#F4B400;

    color:#111;

    padding:15px 35px;

    border-radius:50px;

    font-weight:700;

}

.btn-outline{

    color:#fff;

    border:2px solid #fff;

    padding:15px 35px;

    border-radius:50px;

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#ffffff;

    color:#222;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

section{

width:100%;
    padding:90px 12%;

}

.container{

    width:min(1200px,100%);

    margin:auto;

}

h1,h2,h3,h4{

    font-family:'Poppins',sans-serif;

}

.hero{

    position:relative;
    height:100vh;
    overflow:hidden;

}

/* SLIDER */

.hero-slider,
.slide{

    position:absolute;
    inset:0;

}

.slide{

    opacity:0;
    transition:opacity 1.5s ease;

}

.slide.active{

    opacity:1;
    z-index:2;

}

.slide img{

    width:100%;
    height:100%;

    object-fit:cover;

}

/* OVERLAY */

.overlay{

    position:absolute;
    inset:0;
    z-index:2;

    background:linear-gradient(

        90deg,

        rgba(0,0,0,.85) 0%,

        rgba(0,0,0,.55) 45%,

        rgba(0,0,0,.15) 100%

    );

}

.hero-content{
    z-index:3;
}

/*=====================================
        PREMIUM STICKY NAVBAR
=====================================*/

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 8%;

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

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    z-index:9999;

    transition:.35s ease;

}

/* Navbar after scrolling */

.navbar.scrolled{

    background:#111;

    padding:15px 8%;

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

}



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

.logo{

    color:#fff;
    font-size:2rem;
    font-weight:800;
    text-transform: uppercase;
    letter-spacing:1px;

}

.logo span{

    color:#F4B400;

}

/*=====================================
            NAVIGATION LINKS
=====================================*/

.nav-links{

    display:flex;

    align-items:center;

    gap:35px;

    list-style:none;

}

.nav-links.active{
    right:0;
}

.nav-links li{

    list-style:none;

}

.nav-links a{

    position:relative;

    text-decoration:none;

    color:#ffffff;

    font-size:1rem;

    font-weight:600;

    letter-spacing:.5px;

    transition:.3s ease;

}

/* Hover */

.nav-links a:hover{

    color:#F4B400;

}

/* Animated Underline */

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#F4B400;

    transition:.35s;

}

.nav-links a:hover::after{

    width:100%;



}

@media (max-width:768px){

.nav-links{

    position:fixed;
    top:80px;
    right:-100%;
    width:280px;
    height:calc(100vh - 80px);

    display:flex;
    flex-direction:column;
    transition:.4s;

}

}

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

.navbar .btn{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F4B400;

    color:#111;

    padding:14px 28px;

    border-radius:40px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

/*=========================
        HAMBURGER
=========================*/

.hamburger{

    width:35px;
    height:28px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    cursor:pointer;

    z-index:10001;

}

.hamburger span{

    width:100%;
    height:4px;

    background:#fff;

    border-radius:10px;

    transition:.4s;

}

/*=========================
        SIDE MENU
=========================*/

.side-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:340px;

    height:100vh;

    background:#111;

    padding:90px 40px;

    transition:.5s ease;

    z-index:10000;

    overflow-y:auto;

}

.side-menu.active{

    right:0;

}

.side-menu ul{

    list-style:none;

}

.side-menu li{

    margin:22px 0;

}

.side-menu a{

    color:#fff;

    text-decoration:none;

    font-size:1.15rem;

    font-weight:600;

    transition:.3s;

}

.side-menu a:hover{

    color:#F4B400;

    padding-left:10px;

}

.menu-title{

    color:#F4B400;

    text-transform:uppercase;

    font-size:.9rem;

    letter-spacing:3px;

    margin-top:40px;

    margin-bottom:15px;

}

.close-btn{

    position:absolute;

    top:25px;

    right:30px;

    font-size:2rem;

    color:#fff;

    cursor:pointer;

}

.quote-btn{

    background:#F4B400;

    color:#111;

    padding:14px 28px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.quote-btn:hover{

    background:#FFD54A;

    transform:translateY(-3px);

}

@media(max-width:768px){

.quote-btn{

display:none;

}

.side-menu{

width:100%;
padding:25px;

}

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(244,180,0,.35);

}





/* DOTS */

.slider-dots{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:20;

}

.dot{

    width:12px;

    height:12px;

    background:#ffffff66;

    border-radius:50%;

}

.dot.active{

    background:#F4B400;

}

@media (max-width:768px){

.hero{

    min-height:100vh;

    padding:120px 20px 80px;

}

.hero-content{

    width:100%;

    text-align:center;

}

.hero-content h1{

    font-size:2.6rem;

    line-height:1.2;

}

.hero-content p{

    font-size:1rem;

    margin:20px 0 30px;

}

.hero-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

    align-items:center;

}

.hero-buttons a{

    width:100%;

    max-width:280px;

    text-align:center;

}

}

.section-title{
    text-align:center;
    max-width:900px;
    margin:0 auto 70px;
}

.section-title span{
    color:#F4B400;
    margin-bottom:15px;
}

.section-title h2{
    color: #111 !important;
    margin-bottom:20px;
}

.section-title p{
    color: #555 !important;
    max-width:700px;
    margin:0 auto;
}

/* Initial hidden state */

.slide-left,
.slide-right,
.slide-up{
    opacity:0;
    transition:all 1.2s ease;
}

.slide-left{
    transform:translateX(-80px);
}

.slide-right{
    transform:translateX(80px);
}

.slide-up{
    transform:translateY(60px);
}

/* When visible */

.show{
    opacity:1;
    transform:translate(0,0);
}

.core-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.core-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.4s;
}

.core-card:hover{
    transform:translateY(-10px);
}

.core-card img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.core-card h3{
    color:#111;
    font-size:1.5rem;
    margin:20px;
}

.core-card p{
    color:#666;
    margin:0 20px 25px;
    line-height:1.8;
}

.core-card:nth-child(1){
    transition-delay:.2s;
}

.core-card:nth-child(2){
    transition-delay:.4s;
}

.core-card:nth-child(3){
    transition-delay:.6s;
}

.core-card:nth-child(4){
    transition-delay:.8s;
}

.core-card:nth-child(5){
    transition-delay:1s;
}

.fleet-title{
    text-align: center;
    max-width: 850px;
    margin: 0 auto 70px;
}

.fleet-title span{
    display: block;
    color: #d4af37;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.fleet-title h2{
    color: #2f2f2f;
    font-size: 2.9rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.fleet-title p{
    color: #555;
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

.fleet-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
    gap: 35px;
    margin-top: 50px;
}

.fleet-card{
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    height: 340px;
    box-shadow: 0 15px 35px rgba(0,0,0,.15);
    transition: .5s ease;
}

.fleet-card:hover{
    transform: translateY(-10px);
}

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

.fleet-card:hover img{
    transform:scale(1.08);
}

.fleet-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.9) 5%,
        rgba(0,0,0,.45) 40%,
        transparent 75%
    );
    z-index:1;
}

.fleet-card h3{
    position:absolute;
    bottom:25px;
    left:25px;

    color:#fff;
    font-size:1.6rem;
    font-weight:700;

    z-index:2;
}

@media (max-width:768px){

    .fleet{
        padding:70px 20px;
    }

    .fleet-title h2{
        font-size:2rem;
    }

    .fleet-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .fleet-card{
        height:280px;
    }
}



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



.about{

    position:relative;

    background:#ffffff;

    padding:140px 8%;

}

/* Diagonal transition */

.about::before{

    content:"";

    position:absolute;

    top:-120px;

    left:0;

    width:100%;

    height:180px;

    background:#111;

    clip-path:polygon(0 0,100% 0,100% 40%,0 100%);

}

.about-container{

    width: 100%;

    max-width:1400px;

    margin:auto;

    position:relative;

    z-index:2;

}

.about::before{

    content:"";

    position:absolute;

    top:-120px;

    left:0;

    width:100%;

    height:180px;

    background:#111;

    clip-path:polygon(0 0,100% 0,100% 40%,0 100%);

}


.section-heading{

    text-align:center;

    margin-bottom:60px;

}

.section-heading span{

    color:#F4B400;

    letter-spacing:3px;

    font-weight:700;

}

.section-heading h2{

    font-size:3rem;

    margin-top:15px;

    color:#111;

}

.about-image{

    position:relative;

    margin-bottom:60px;

}

.about-image img{

    width:100%;

    height:550px;

    object-fit:cover;

    border-radius:25px;

}



/*==============================
      FLOATING ABOUT CARDS
==============================*/

.about-cards{

    display:grid;

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

    gap:30px;

    margin:80px 0 60px;

}

.about-card{

    background:#fff;

    padding:30px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    transition:all .4s ease;

    position:relative;

    overflow:hidden;

}

.about-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:#F4B400;

}

.about-card:hover{

    transform:translateY(-15px);

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

}

.card-icon{

    width:80px;
    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#F4B400;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

}

.about-card h3{

    font-size:3rem;

    color:#111;

    margin-bottom:8px;

}

.about-card h4{

    font-size:1.3rem;

    margin-bottom:15px;

    color:#111;

}

.about-card p{

    color:#666;

    line-height:1.8;

}

.featured{

    transform:translateY(-25px);

    background:#111;

}

.featured h3,
.featured h4,
.featured p{

    color:#fff;

}

.featured:hover{

    transform:translateY(-40px);

}

@media(max-width:768px){

.about-cards{

grid-template-columns:1fr;

gap:25px;
padding:25px;

}

.featured{

transform:none;

}

.featured:hover{

transform:translateY(-15px);

}

}

.company-info{

    padding:100px 8%;
    background:#f8f9fa;

}

.company-title{

    text-align:center;
    max-width:850px;
    margin:0 auto 70px;

}

.company-title span{

    color:#d4af37;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;

}

.company-title h2{

    color:#333;
    font-size:2.8rem;
    margin:20px 0;

}

.company-title p{

    color:#666;
    line-height:1.8;
    max-width:700px;
    margin:auto;

}

.company-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;

}

.company-card{

    background:#fff;
    padding:40px 30px;
    text-align:center;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.4s;

}

.company-card:hover{

    transform:translateY(-10px);

}

.company-card i{

    font-size:3rem;
    color:#d4af37;
    margin-bottom:20px;

}

.company-card h3{

    color:#333;
    margin-bottom:12px;

}

.company-card p{

    color:#666;
    line-height:1.6;

}

@media(max-width:768px){

.company-info{

padding:70px 20px;

}

.company-title h2{

font-size:2rem;

}

.company-grid{

grid-template-columns:1fr;

}

}

/*==============================
      COMPANY SHOWCASE
==============================*/

.company-showcase{

    position:relative;

    margin:100px auto 80px;

}

.company-showcase img{

    width:100%;

    height:600px;

    object-fit:cover;

    border-radius:30px;

}

.experience-badge{

    position:absolute;

    bottom:-40px;

    left:60px;

    background:#F4B400;

    color:#111;

    padding:30px 40px;

    border-radius:20px;

    box-shadow:0 20px 40px rgba(0,0,0,.25);

}

.experience-badge h2{

    font-size:3.5rem;

    font-weight:800;

}

.experience-badge span{

    font-weight:600;

}

/*==============================
          STATISTICS
==============================*/

.stats{

    display:grid;

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

    gap:30px;

    margin-top:120px;

}

.stat-box{

    background:#111;

    color:#fff;

    padding:30px;

    border-radius:20px;

    text-align:center;

    transition:.4s;

}

.stat-box:hover{

    background:#F4B400;

    color:#111;

    transform:translateY(-12px);

}

.stat-box h2{

    font-size:3.5rem;

    margin-bottom:10px;

}

.stat-box p{

    font-size:1rem;

    font-weight:500;

}

@media(max-width:768px){

.company-showcase img{

height:300px;
padding:22px;

}

.experience-badge{

left:20px;

bottom:-25px;

padding:20px;

}

.experience-badge h2{

font-size:2.3rem;

}

.stats{

grid-template-columns:1fr 1fr;

gap:20px;

margin-top:70px;

}

.stat-box{

padding:25px;

}

}

/*==============================
      MOBILE NAVIGATION
==============================*/

.hamburger{

display:none;

cursor:pointer;

flex-direction:column;

gap:6px;

z-index:1001;

}

.hamburger span{

width:28px;

height:3px;

background:#fff;

transition:.4s;

border-radius:3px;

}

@media(max-width:768px){

.hamburger{

display:flex;

}

#sideMenu{

position:fixed;

top:0;

right:-100%;

width:280px;

height:100vh;

background:#111;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:25px;

transition:.4s;

z-index:999;

}

#sideMenu.active{

right:0;

}

#sideMenu li{

list-style:none;

}

#sideMenu a{

color:#fff;

font-size:1.1rem;

text-decoration:none;

font-weight:600;

}

}

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



.section-heading h2{

font-size:2.2rem;

}

.about-image img{

height:300px;

}

.experience{

left:20px;

bottom:-30px;

padding:20px;

}

.experience h3{

font-size:2rem;

}

.about-grid{

grid-template-columns:1fr;

}

/*=================================
        WHAT WE BUILD
=================================*/

.services{

    padding:140px 8%;

    background:#f8f8f8;

}

.service-grid{

    display:grid;

    gap:30px;

}

.service-card{

    position:relative;

    height:340px;

    border-radius:25px;

    overflow:hidden;

    background-size:cover;

    background-position:center;

    cursor:pointer;

    transition:.5s;

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.15));

    transition:.4s;

}

.service-card:hover{

    transform:translateY(-10px);

}

.service-card:hover::before{

    background:linear-gradient(to top,
        rgba(244,180,0,.85),
        rgba(0,0,0,.2));

}

.service-content{

    position:absolute;

    left:40px;

    bottom:40px;

    color:white;

    z-index:2;

    transition:.4s;

}

.service-card:hover .service-content{

    transform:translateY(-15px);

}

.service-content h3{

    font-size:2rem;

    margin-bottom:15px;

}

.service-content p{

    margin-bottom:20px;

    max-width:1400px;

}

.service-content a{

    color:white;

    text-decoration:none;

    font-weight:700;

}

.residential{

background-image:url("images/WhatsApp Image 2026-07-07 at 12.06.06.jpeg");

}

.commercial{

background-image:url("images/WhatsApp Image 2026-07-07 at 11.47.38.jpeg");

}

.earthmoving{

background-image:url("images/WhatsApp Image 2026-07-07 at 11.47.37.jpeg");

}

.civil{

background-image:url("images/WhatsApp Image 2026-07-07 at 11.47.36.jpeg");

}

.sand{

background-image:url("images/WhatsApp Image 2026-07-07 at 11.47.35.jpeg");

}

@media(max-width:768px){

.service-card{

height:250px;
padding:22px;

}

.service-content{

left:25px;

bottom:25px;

}

.service-content h3{

font-size:1.5rem;

}

}

/*==============================
      FEATURED PROJECTS
==============================*/

.projects{

    padding:140px 8%;

    background:#fff;

}

.project-grid{

    display:grid;

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

    gap:25px;

}

.project-card{

    position:relative;

    min-height:320px;

    border-radius:25px;

    overflow:hidden;

    background-size:cover;

    background-position:center;

    cursor:pointer;

    transition:.5s ease;

}

.large{

    min-height:450px;

}

.warehouse{

    grid-column:span 2;

    min-height:420px;

}

.project-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.9),
    rgba(0,0,0,.15));

    transition:.4s;

}

.project-card:hover{

    transform:scale(1.02);

}

.project-card:hover::before{

    background:linear-gradient(to top,
    rgba(244,180,0,.85),
    rgba(0,0,0,.2));

}

.project-overlay{

    position:absolute;

    bottom:35px;

    left:35px;

    z-index:2;

    color:#fff;

}

.project-overlay span{

    display:inline-block;

    background:#F4B400;

    color:#111;

    padding:6px 14px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:700;

    margin-bottom:15px;

}

.project-overlay h3{

    font-size:2rem;

    margin-bottom:10px;

}

.project-overlay p{

    margin-bottom:18px;

}

.project-overlay a{

    color:#fff;

    text-decoration:none;

    font-weight:700;

}

.mall{

background-image:url("images/projects/WhatsApp Image 2026-07-07 at 12.28.31.jpeg");

}

.home{

background-image:url("images/projects/WhatsApp Image 2026-07-07 at 12.28.32.jpeg");

}

.warehouse{

background-image:url("images/projects/WhatsApp Image 2026-07-07 at 12.28.3.jpeg");

}

.earth{

background-image:url("images/projects/WhatsApp Image 2026-07-07 at 12.28.26.jpeg");

}

.office{

background-image:url("images/projects/WhatsApp Image 2026-07-07 at 12.28.28.jpeg");

}

@media(max-width:768px){

.project-grid{

    padding:20px;

grid-template-columns:1fr;

}

.warehouse{

grid-column:span 1;

}

.large{

min-height:320px;

}

.project-overlay h3{

font-size:1.5rem;

}

}

/*===============================
      WHY CHOOSE US PREMIUM
================================*/

.why-new{

    background: linear-gradient(
        135deg,
        #1f1f1f,
        #2d2d2d,
        #1a1a1a,
    );

    padding:120px 8%;

}

.why-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.why-image{

    overflow:hidden;

    border-radius:25px;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.why-image img{

    width:100%;

    height:600px;

    object-fit:cover;

    transition:.5s;

}

.why-image:hover img{

    transform:scale(1.06);

}

.section-tag{

    color:#F4B400;

    font-weight:700;

    letter-spacing:3px;

    display:block;

    margin-bottom:15px;

}

.why-content h2{

    color:#080808;

    font-size:3rem;

    margin-bottom:20px;

}

.why-content p{

    color:#080808;

    line-height:1.9;

    margin-bottom:35px;

}

.why-list{

    display:grid;

    gap:18px;

    margin-bottom:40px;

}

.why-item{

    background:#181818;

    border-left:4px solid #F4B400;

    padding:18px 22px;

    color:#fff;

    border-radius:12px;

    transition:.3s;

}

.why-item:hover{

    transform:translateX(8px);

    background:#202020;

}

.why-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn-outline{

    padding:15px 30px;

    border:2px solid #F4B400;

    color:#F4B400;

    text-decoration:none;

    border-radius:50px;

    transition:.3s;

}

.btn-outline:hover{

    background:#F4B400;

    color:#111;

}

@media(max-width:900px){

.why-wrapper{

grid-template-columns:1fr;

}

.why-image img{

height:350px;

}

.why-content{

text-align:center;

}

.why-buttons{

justify-content:center;

}

}

/*==================================
        OUR PROCESS
==================================*/

.process{

    padding:140px 8%;

    background:#f8f8f8;

}

.timeline{

    margin-top:80px;

    display:grid;

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

    gap:30px;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    top:40px;

    left:10%;

    width:80%;

    height:4px;

    background:#F4B400;

}

.timeline-item{

    position:relative;

    text-align:center;

    z-index:2;

}

.circle{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:#111;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    font-weight:700;

    border:5px solid #F4B400;

    transition:.4s;

}

.timeline-item:hover .circle{

    background:#F4B400;

    color:#111;

    transform:scale(1.1);

}

.timeline-item h3{

    margin-top:25px;

    font-size:1.3rem;

    color:#111;

}

.timeline-item p{

    margin-top:15px;

    color:#666;

    line-height:1.8;

}

@media(max-width:900px){

.timeline{

grid-template-columns:1fr;

}

.timeline::before{

display:none;

}

.timeline-item{

margin-bottom:40px;

}

}




/*=================================
        SERVICE AREA
==================================*/

.service-area{

    padding:140px 8%;

    background:#f8f8f8;

}

.area-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.area-card{

    background:#fff;

    padding:30px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;

}

.area-card:hover{

    transform:translateY(-10px);

    background:#F4B400;

}

.area-card:hover h3,

.area-card:hover p{

    color:#111;

}

.area-card h3{

    margin-bottom:15px;

    font-size:1.4rem;

}

.area-card p{

    color:#666;

}

@media(max-width:768px){

.area-grid{

grid-template-columns:1fr;

}

}

.project-value{

    margin-top:auto;

    display:inline-block;

    background:#222;

    color:#fff;

    padding:12px 22px;

    border-radius:35px;

    font-weight:700;

}

.project-status{

    margin-top:18px;

    color:#1b8a3d;

    font-weight:700;

}



/*=========================
PROJECT EXPERIENCE
==========================*/



#experience{

    background:#f7f7f7;
    padding:110px 8%;

}

#experience .services-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:35px;

}

#experience .service-card{

    position:relative;
    background:#fff;
    border-radius:18px;
    padding:35px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.4s;

    display:flex;
    flex-direction:column;

    justify-content:flex-start;

    min-height:430px;

    overflow:visible;

}


#experience .service-card:hover{

    transform:translateY(-12px);
    box-shadow:0 20px 45px rgba(0,0,0,.14);

}

/* Gold strip */

#experience .service-card::before{

    content:"";
    position:absolute;
    left:0;
    top:0;
    width:7px;
    height:100%;
    background:#D4AF37;

}

/* Year Badge */

#experience h3{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:80px;

    height:80px;

    border-radius:50%;

    background:#D4AF37;

    color:#111;

    font-size:18px;

    font-weight:700;

    margin-bottom:25px;

}

/* Client */

#experience h4{

    font-size:1.4rem;
    color:#222;
    margin-bottom:18px;

}

/* Text */

#experience p{

    color:#666;
    line-height:1.8;
    margin-bottom:12px;

}

/* Project Value */

.project-value{

    display:inline-block;
    margin-top:18px;
    background:#222;
    color:#fff;
    padding:12px 22px;
    border-radius:40px;
    font-weight:700;
    letter-spacing:.5px;

}

/* Status */

.project-status{

    margin-top:18px;
    color:#1c7c38;
    font-weight:700;

}

/* Heading */

#experience .section-heading{

    text-align:center;
    margin-bottom:70px;

}

#experience .section-heading span{

    color:#D4AF37;
    letter-spacing:3px;
    font-weight:700;

}

#experience .section-heading h2{

    color:#222;
    font-size:2.8rem;
    margin:20px 0;

}

#experience .section-heading p{

    max-width:800px;
    margin:auto;
}

/* Mobile */

@media(max-width:768px){

#experience{

    padding:70px 20px;

}

#experience .section-heading h2{

    font-size:2rem;

}

}

/*==================================
        FREE QUOTE SECTION
==================================*/

.quote-section{

    width:100%;
    padding:90px 20px;

    background:linear-gradient(
        135deg,
        #0d0d0d,
        #181818,
        #0d0d0d
    );

    background-size:300% 300%;

    animation:gradientMove 12s ease infinite;

}

.quote-container{

    width: 100%;

    max-width:1400px;

    margin:auto;

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

    backdrop-filter:blur(12px);

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

    border-radius:25px;

    padding:0 20px;

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

}

.quote-container h2{

    color:#fff;

    text-align:center;

    font-size:3rem;

    margin-bottom:15px;

}

.quote-container p{

    color:#d8d8d8;

    text-align:center;

    margin-bottom:40px;

    line-height:1.8;

}

#quoteForm{

    display:grid;

    gap:20px;

}

#quoteForm input,
#quoteForm select,
#quoteForm textarea{

    width:100%;

    padding:18px;

    background:#1b1b1b;

    color:#fff;

    border:1px solid #333;

    border-radius:12px;

    font-size:1rem;

    transition:.3s;

}

#quoteForm input:focus,
#quoteForm select:focus,
#quoteForm textarea:focus{

    outline:none;

    border-color:#F4B400;

    box-shadow:0 0 12px rgba(244,180,0,.35);

}

#quoteForm input::placeholder,
#quoteForm textarea::placeholder{

    color:#bdbdbd;

}

#quoteForm textarea{

    resize:vertical;

    min-height:180px;

}

#quoteForm button{

    background:#F4B400;

    color:#111;

    border:none;

    padding:18px;

    border-radius:50px;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

#quoteForm button:hover{

    background:#fff;

    transform:translateY(-4px);

    box-shadow:0 10px 30px rgba(244,180,0,.35);

}

.privacy-check{

    color:#d8d8d8;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:.95rem;

}

.privacy-check input{

    width:auto;

}

/* Mobile */

@media(max-width:768px){

.quote-container{

padding: 25px;

}

.quote-container h2{

font-size:2.2rem;

}

}

.locations{

    padding:110px 8%;
    background:#111;

}

.locations-title{

    text-align:center;
    max-width:850px;
    margin:auto;
    margin-bottom:70px;

}

.locations-title span{

    color:#d4af37;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;

}

.locations-title h2{

    color:#fff;
    font-size:2.8rem;
    margin:20px 0;

}

.locations-title p{

    color:#cfcfcf;
    max-width:720px;
    margin:auto;
    line-height:1.8;

}

.locations-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:35px;

}

.location-card{

    background:#1b1b1b;
    border-radius:20px;
    padding:45px 30px;
    text-align:center;
    transition:.4s;
    border:1px solid rgba(212,175,55,.25);

}

.location-card:hover{

    transform:translateY(-10px);
    border-color:#d4af37;

}

.location-icon{

    width:75px;
    height:75px;
    margin:0 auto 25px;

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

    background:#d4af37;
    color:#111;

    border-radius:50%;
    font-size:1.8rem;

}

.location-card h3{

    color:#fff;
    margin-bottom:10px;
    font-size:1.4rem;

}

.location-card h4{

    color:#d4af37;
    margin-bottom:20px;
    font-size:1.1rem;

}

.location-card p{

    color:#cfcfcf;
    line-height:1.8;

}

@media(max-width:768px){

.locations{

padding:70px 20px;

}

.locations-title h2{

font-size:2rem;

}

.locations-grid{

grid-template-columns:1fr;

}

}

/*==================================
        GOOGLE MAP
==================================*/

.map-section{

    width:100%;

    padding:90px 20px;

    background:#f8f8f8;

}

.map-container{

    overflow:hidden;

    border-radius:25px;

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

    margin-top:60px;

}

.map-container iframe{

    width:100%;

    height:500px;

    border:none;

}

@media(max-width:768px){

.map-container iframe{

height:350px;

}

}

/*==================================
            FOOTER
==================================*/

.footer{

    background:#0b0b0b;

    color:#fff;

    padding:90px 8% 25px;

}

.footer-container{

    width: 100%;

    max-width:1400px;
    margin:auto;
    padding:0 20px;

    display:grid;

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

    gap:50px;

}

.footer-box h2{

    font-size:2rem;

    margin-bottom:20px;

}

.footer-box h3{

    color:#F4B400;

    margin-bottom:20px;

    font-size:1.3rem;

}

.footer-box p{

    color:#bdbdbd;

    line-height:1.8;

    margin-bottom:12px;

}

.footer-box ul{

    list-style:none;

    padding:0;

}

.footer-box ul li{

    margin-bottom:15px;

}

.footer-box ul li a{

    color:#bdbdbd;

    text-decoration:none;

    transition:.3s;

}

.footer-box ul li a:hover{

    color:#F4B400;

    padding-left:8px;

}





.social-icons{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.social-icons a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#1c1c1c;

    color:#fff;

    text-decoration:none;

    transition:.4s;

}

.social-icons a:hover{

    background:#F4B400;

    color:#111;

    transform:translateY(-8px);

}

.footer-bottom{

    margin-top:60px;

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

    padding-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

}

.footer-bottom p{

    color:#999;

}

.footer-bottom strong{

    color:#F4B400;

}

@media(max-width:768px){

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.social-icons{

justify-content:center;

}

.footer-bottom{

flex-direction:column;

gap:10px;

text-align:center;

}

}

/*==================================
        WHATSAPP BUTTON
==================================*/

.whatsapp{

    position:fixed;

    bottom:30px;

    right:30px;

    width:65px;

    height:65px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:2rem;

    text-decoration:none;

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

    z-index:999;

    animation:pulse 2s infinite;

    transition:.3s;

}

.whatsapp:hover{

    transform:scale(1.1);

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.6);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}

/*==================================
        BACK TO TOP
==================================*/

#topBtn{

    position:fixed;

    bottom:110px;

    right:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#F4B400;

    color:#111;

    font-size:1.2rem;

    cursor:pointer;

    display:none;

    z-index:999;

    transition:.4s;

}

#topBtn:hover{

    transform:translateY(-5px);

}

/*==================================
      SCROLL PROGRESS BAR
==================================*/

#progressBar{

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:5px;

    background:#F4B400;

    z-index:9999;

}

.navbar.scrolled{

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

    backdrop-filter:blur(15px);

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

}

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

.projects-hero{

height:70vh;

background-image:url(images/projects/project-banner.jpg);

background-size:cover;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.projects-hero::before{

content:"";

position:absolute;

inset:0;

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

}

.projects-overlay{

position:relative;

z-index:2;

text-align:center;

color:#fff;

}

.projects-overlay h1{

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

font-weight:800;

margin-bottom:20px;

}

.projects-overlay p{

font-size:1.2rem;

}

.project-filter{

padding:100px 8% 40px;

text-align:center;

}

.filter-buttons{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin-top:30px;

}

.filter-buttons button{

padding:14px 28px;

border:none;

background:#111;

color:#fff;

border-radius:50px;

cursor:pointer;

transition:.4s;

}

.filter-buttons button:hover,

.filter-buttons .active{

background:#F4B400;

color:#111;

}

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

.projects-hero{

    height:90vh;

    background:url("images/WhatsApp Image 2026-07-03 at 11.44.02.jpeg");

    background-size:cover;

    background-position:center;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

#sideMenu a.active{

    color:#F4B400;

}

.projects-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.65),

        rgba(0,0,0,.55)

    );

}

.hero-overlay{

    position:relative;

    z-index:2;

    text-align:center;

    color:white;

    max-width:1400px;

    padding:20px;

}

.breadcrumb{

    margin-bottom:30px;

    font-size:.95rem;

}

.breadcrumb a{

    color:#F4B400;

    text-decoration:none;

}

.breadcrumb span{

    color:#ddd;

}

.projects-hero h1{

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

    font-weight:800;

    margin-bottom:25px;

    line-height:1.1;

}

.projects-hero p{

    font-size:1.2rem;

    line-height:1.8;

    color:#eee;

    margin-bottom:40px;

}

.hero-btn{

    display:inline-block;

    padding:18px 45px;

    background:#F4B400;

    color:#111;

    text-decoration:none;

    border-radius:50px;

    font-weight:700;

    transition:.4s;

}

.hero-btn:hover{

    background:white;

    transform:translateY(-5px);

}

@media(max-width:768px){

.projects-hero{

height:75vh;

}

.projects-hero h1{

font-size:2.7rem;

}

.featured-project,
.featured-project.reverse{

    grid-template-columns:1fr;

}

.featured-project .featured-content,
.featured-project .featured-video,
.featured-project.reverse .featured-content,
.featured-project.reverse .featured-video{

    order:unset;

}

.projects-hero p{

font-size:1rem;

}

.hero-btn{

padding:15px 35px;


}

}

/*==================================
        PROJECT NAVBAR
==================================*/

.project-navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:18px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

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

    backdrop-filter:blur(10px);

    z-index:1000;

}

.project-logo img{

    height:60px;

}

.project-nav{

    display:flex;

    align-items:center;

    gap:35px;

    list-style:none;

}

.project-nav a{

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.project-nav a:hover{

    color:#F4B400;

}

.quote-link{

    background:#F4B400;

    color:#111 !important;

    padding:12px 25px;

    border-radius:40px;

}

.quote-link:hover{

    background:#ffd54f;

}

@media(max-width:768px){

.project-navbar{

flex-direction:column;

padding:20px;

}

.project-nav{

flex-direction:column;

gap:15px;

margin-top:15px;

}

}


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

.featured-project{

    width:90%;

    margin:80px auto;

    display:grid;

    grid-template-columns:1.3fr 1fr;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

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

}

.project-media{

    background:#000;

}

.project-media video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.project-info{

    padding:60px;

}

.project-tag{

    color:#F4B400;

    letter-spacing:3px;

    font-weight:700;

}

.project-info h2{

    font-size:3rem;

    margin:25px 0;

    color:#111;

}

.project-info p{

    color:#666;

    line-height:1.9;

}

.project-meta{

    display:grid;

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

    gap:25px;

    margin-top:50px;

}

.meta-box{

    display:flex;

    gap:12px;

    align-items:flex-start;

}

.meta-box i{

    color:#F4B400;

    font-size:1.6rem;

}

.meta-box strong{

    display:block;

    color:#111;

}

.meta-box p{

    color:#666;

    margin-top:5px;

}

@media(max-width:768px){

.featured-project{

grid-template-columns:1fr;

}

.project-media{

height:280px;

}

.project-info{

padding:30px;

}

.project-info h2{

font-size:2rem;

}

.project-meta{

grid-template-columns:1fr;

gap:20px;

}

}

/*==================================
        REVERSE LAYOUT
==================================*/

.featured-project.reverse{

    grid-template-columns:1fr 1.3fr;

}

.featured-project.reverse .project-info{

    order:1;

}

.featured-project.reverse .project-media{

    order:2;

}

/*==================================
        PROJECT BUTTON
==================================*/

.project-btn{

    display:inline-block;

    margin-top:40px;

    padding:16px 34px;

    background:#F4B400;

    color:#111;

    text-decoration:none;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

}

.project-btn:hover{

    background:#111;

    color:#fff;

    transform:translateY(-4px);

}

.featured-project{

    transition:.35s ease;

}

.featured-project:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

/*==================================
        PROJECT GALLERY
==================================*/

.project-gallery{

    padding:120px 8%;

    background:linear-gradient(
        135deg,
        #0a0a0a,
        #151515,
        #222222,
        #0a0a0a
    );

    background-size:300% 300%;

    animation:galleryGradient 12s ease infinite;

    position:relative;

    overflow:hidden;

}

@keyframes galleryGradient{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

.section-title h2{

    color:white;

    font-size:3.3rem;

    margin:20px 0;

}

.section-title p{

    color:#d9d9d9;

    max-width:1400px;

    margin:auto;

    line-height:1.8;

}

/*==================================
        PROJECT GALLERY
==================================*/

.project-gallery{

    padding:100px 8%;

    background:#111;

}

.gallery-grid{

    display:grid;

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

    gap:25px;

    margin-top:60px;

}

.gallery-item{

    position:relative;

    border-radius:20px;

    overflow:hidden;

    background:#222;

    height:300px;

    transition:.4s;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.85),
    rgba(0,0,0,.15));

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:25px;

    color:#fff;

}

.gallery-overlay h3{

    margin-bottom:8px;

    font-size:1.3rem;

}

.gallery-overlay p{

    color:#d6d6d6;

}

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

@media(max-width:768px){


.gallery-grid{

grid-template-columns:1fr;

gap:20px;

}

.gallery-item{

height:260px;

}

}

/*====================================================
        FINAL MOBILE RESPONSIVE OPTIMIZATION
====================================================*/

@media (max-width:768px){

html,body{
    width:100%;
    overflow-x:hidden;
}

/* Every section */
section{
    width:100%;
    padding:70px 16px !important;
}

/* Every container */
.container,
.about-container,
.services-container,
.stats-container,
.why-container,
.projects-container,
.contact-container,
.quote-container,
.footer-container,
.gallery-grid,
.hero-content{

    width:100% !important;
    max-width:1400px !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;

}

/* Headings */

h1{
    font-size:clamp(2.4rem,4vw,5vw,4.5rem) !important;
    line-height:1.2;
}

h2{
    font-size:clamp(2rem,4vw,3rem) !important;
}

p{
    font-size:1rem;
    line-height:1.8;
}

/* Hero */

.hero{

    min-height:100vh;
    padding:120px 20px 80px !important;

}

.hero-buttons{

    display:flex;
    flex-direction:column;
    gap:15px;

}

.hero-buttons a{

    width:100%;
    text-align:center;

}

/* Cards */

.service-card,
.about-card,
.feature-card,
.stat-card,
.gallery-item,
.contact-card{

    width:100% !important;
    padding:25px !important;

}

/* Quote */

.quote-container{

    width:100% !important;
    border-radius:20px;
    padding:30px 20px !important;

}

#quoteForm input,
#quoteForm select,
#quoteForm textarea,
#quoteForm button{

    width:100%;

}

/* Gallery */

.gallery-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:20px;

}

.gallery-item{

    height:260px;

}

/* Images */

img,
video{

    width:100%;
    max-width:100%;
    height:auto;

}

/* Footer */

.footer-content{

    padding:70px 20px 30px !important;

    display:grid;
    grid-template-columns:1fr;
    gap:30px;
    text-align:center;

}

}

@media (max-width:768px){

section{
    padding:70px 20px !important;
}

.about-container,
.services-container,
.stats-container,
.why-container,
.projects-container,
.contact-container,
.quote-container,
.footer-container{

    padding:0 !important;

}

}

/* ===========================
   MOBILE RESPONSIVENESS
=========================== */

@media (max-width: 768px) {

    .services {
        padding: 60px 20px;
    }

    .section-title h2 {
        font-size: 2rem;
        line-height: 1.3;
    }

    .section-title p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .service-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .service-card {
        border-radius: 15px;
    }

    .service-card img {
        height: 220px;
    }

    .service-card h3 {
        font-size: 1.3rem;
        margin: 18px;
    }

    .service-card p {
        font-size: 0.95rem;
        margin: 0 18px 20px;
        line-height: 1.7;
    }
}