/* =====================================================
   TITAN CONSTRUCTION
   Premium Construction Website
   styles.css
===================================================== */

:root{
    --primary:#F5B800;
    --dark:#0B0F16;
    --dark-2:#111827;
    --white:#FFFFFF;
    --gray:#6B7280;

    --shadow-sm:0 10px 25px rgba(0,0,0,.08);
    --shadow-md:0 20px 40px rgba(0,0,0,.12);
    --shadow-lg:0 30px 60px rgba(0,0,0,.20);
}

/* =====================================================
   GLOBAL
===================================================== */

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    transition:.3s ease;
}

section{
    position:relative;
}

/* =====================================================
   CUSTOM SCROLLBAR
===================================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#111;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
}

::-webkit-scrollbar-thumb:hover{
    background:#e0a800;
}

/* =====================================================
   HEADER
===================================================== */

#header{
    transition:.3s ease;
}

.header-scrolled{
    box-shadow:var(--shadow-lg);
}

nav a{
    color:white;
    font-weight:700;
    position:relative;
}

nav a:hover{
    color:var(--primary);
}

.nav-active{
    color:var(--primary) !important;
}

.nav-active::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-12px;
    width:100%;
    height:3px;
    background:var(--primary);
}

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

.hero-overlay{
    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.80) 50%,
        rgba(0,0,0,.30) 100%
    );
}

.hero-image img{
    transition:transform 1s ease;
}

.hero-image:hover img{
    transform:scale(1.05);
}

/* =====================================================
   BUTTONS
===================================================== */

.btn-primary{
    transition:.3s ease;
}

.btn-primary:hover{
    transform:translateY(-3px);
}

.btn-secondary{
    transition:.3s ease;
}

.btn-secondary:hover{
    background:var(--primary);
    color:black;
}

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

.stat-card{
    display:flex;
    align-items:center;
    gap:20px;

    padding:32px;

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

    transition:.3s ease;
}

.stat-card:hover{
    background:#111827;
}

.stat-card:last-child{
    border-right:none;
}

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

.about-image{
    overflow:hidden;
}

.about-image img{
    transition:1s ease;
}

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

/* =====================================================
   SERVICE CARDS
===================================================== */

.service-card{
    background:white;

    padding:40px;

    border-radius:4px;

    box-shadow:var(--shadow-sm);

    transition:.35s ease;
}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-md);

}

.service-card:hover h3{
    color:var(--primary);
}

.service-card a{
    color:black;
    font-weight:800;
}

.service-card a:hover{
    color:var(--primary);
}

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

.project-card{
    background:#111827;

    overflow:hidden;

    border-radius:6px;

    transition:.35s ease;
}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.project-image{
    width:100%;
    height:240px;
    object-fit:cover;

    transition:.8s ease;
}

.project-card:hover .project-image{
    transform:scale(1.08);
}

.project-content{
    padding:20px;
}

.project-title{
    color:white;
    font-size:1.2rem;
    font-weight:800;
}

.project-category{
    color:var(--primary);
    margin-top:8px;
    font-weight:700;
}

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

.cta-strip{
    position:relative;
    overflow:hidden;
}

.cta-strip::before{
    content:'';

    position:absolute;

    inset:0;

    background:
    repeating-linear-gradient(
        45deg,
        rgba(0,0,0,.03),
        rgba(0,0,0,.03) 15px,
        transparent 15px,
        transparent 30px
    );
}

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

footer a{
    transition:.3s ease;
}

footer a:hover{
    color:var(--primary);
}

footer ul li{
    transition:.3s ease;
}

footer ul li:hover{
    transform:translateX(5px);
}

/* =====================================================
   REVEAL ANIMATION
===================================================== */

.fade-up{
    opacity:0;
    transform:translateY(40px);

    transition:
    opacity .8s ease,
    transform .8s ease;
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

/* =====================================================
   HOVER EFFECTS
===================================================== */

img{
    transition:.5s ease;
}

.shadow-hover:hover{
    box-shadow:var(--shadow-lg);
}

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

@media (max-width:1024px){

    h1{
        font-size:5rem !important;
    }

}

@media (max-width:768px){

    h1{
        font-size:3.5rem !important;
    }

    h2{
        font-size:2.5rem !important;
    }

    .stat-card{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .stat-card:last-child{
        border-bottom:none;
    }

}

@media (max-width:640px){

    h1{
        font-size:2.8rem !important;
    }

    h2{
        font-size:2rem !important;
    }

    .service-card{
        padding:28px;
    }

}