/* ================= GLOBAL ================= */
body {
    background: rgb(255, 255, 255) !important;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

:root{
    --primary:#EE7126;
    --dark:#101E46;
}

body{
    background:#f9f9f9;
    color:#333;
}

/* ================= NAV ================= */

.nav{
    position:fixed;
    top:0;
    width:100%;
    height:80px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 8%;
    background:white;
    box-shadow:0 5px 20px rgba(0,0,0,0.05);
    z-index:1000;
}

.logo img{
    height:45px;
}

nav{
    display:flex;
    gap:25px;
    align-items:center;
}

nav a{
    text-decoration:none;
    color:#111;
}

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

.btn{
    background:var(--primary);
    color:white;
    padding:10px 18px;
    border-radius:6px;
    text-decoration:none;
}

.btn-outline{
    border:2px solid var(--primary);
    padding:10px 18px;
    text-decoration:none;
    color:var(--primary);
}

.hamburger{
    display:none;
    font-size:28px;
}

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

.hero{
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:0 20px;
}

.hero h1{
    font-size:clamp(28px,5vw,55px);
    color:var(--dark);
}

.hero p{
    margin-top:10px;
    max-width:600px;
}

.hero-btns{
    margin-top:20px;
    display:flex;
    gap:15px;
}

/* ================= SERVICES ================= */

.services{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.service-box{
    background:rgb(211, 197, 197);
    padding:20px;
    border-radius:10px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

/* ================= PORTFOLIO ================= */

.section{
    padding:100px 8%;
}

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

.filters{
    text-align:center;
    margin-bottom:30px;
}

.filters button{
    padding:8px 15px;
    border:1px solid #ddd;
    margin:5px;
    cursor:pointer;
    background:transparent;
}

.filters button:hover{
    background:var(--primary);
    color:white;
}

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

.card{
    position:relative;
    overflow:hidden;
    border-radius:12px;
}

.card img{
    width:100%;
    height:280px;
    object-fit:cover;
    transition:0.5s;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(16,30,70,0.85);
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:0.3s;
}

.card:hover img{
    transform:scale(1.1);
}

.card:hover .overlay{
    opacity:1;
}

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

.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    text-align:center;
    padding:80px 8%;
    background:#101E46;
    color:white;
}

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

#contact{
    text-align:center;
}

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

footer{
    text-align:center;
    padding:30px;
    background:#101E46;
    color:white;
}

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

@media(max-width:768px){

    nav{
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:white;
        flex-direction:column;
        display:none;
        padding:20px;
    }

    nav.show{
        display:flex;
    }

    .hamburger{
        display:block;
    }

    .stats{
        grid-template-columns:1fr;
        gap:20px;
    }
}
/* =========================
   LEVEL 2 ANIMATIONS
========================= */

/* Smooth page feel */
html{
    scroll-behavior:smooth;
}

/* Scroll reveal base */
.hidden{
    opacity:0;
    transform:translateY(40px);
    transition:all 0.8s ease;
}

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

/* Navbar scroll effect */
.nav.scrolled{
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    background:white;
}

/* Card hover upgrade */
.card{
    transition:0.3s ease;
}

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

/* Button animation */
.btn, .btn-outline{
    transition:0.3s ease;
}

.btn:hover, .btn-outline:hover{
    transform:scale(1.05);
}

/* ================= LIGHTBOX ================= */

.lightbox{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.lightbox img{
    max-width:90%;
    max-height:80%;
    border-radius:10px;
}

.lightbox.show{
    display:flex;
}

/* ================= LOADER ================= */

.loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:white;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.loader span{
    width:15px;
    height:15px;
    margin:5px;
    background:#EE7126;
    border-radius:50%;
    animation:bounce 0.6s infinite alternate;
}

.loader span:nth-child(2){
    animation-delay:0.2s;
}

.loader span:nth-child(3){
    animation-delay:0.4s;
}

@keyframes bounce{
    to{
        transform:translateY(-15px);
        opacity:0.5;
    }
}
/* =========================
   LEVEL 3 HERO UPGRADE
========================= */

.typing{
    color:#EE7126;
    border-right:2px solid #EE7126;
    padding-right:5px;
    animation:blink 0.7s infinite;
}

@keyframes blink{
    50%{
        border-color:transparent;
    }
}

/* Smooth section transitions */
section{
    transition:all 0.6s ease;
}

/* Better spacing feel (agency style) */
.section{
    padding:120px 8%;
}

/* Micro interaction upgrade */
.service-box, .card{
    transition:0.3s ease;
}

.service-box:hover{
    transform:translateY(-6px);
}

/* Buttons feel more premium */
.btn, .btn-outline{
    transition:0.3s ease;
    letter-spacing:0.5px;
}
.hero{
    position:relative;
    overflow:hidden;
}

/* background layer */
.bg-animation{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
}

/* make hero content stay above background */
.hero h1,
.hero p,
.hero-btns{
    position:relative;
    z-index:2;
}

/* floating circles */
.bg-animation span{
    position:absolute;
    display:block;
    width:20px;
    height:20px;
    background:rgba(238,113,38,0.15);
    border-radius:50%;
    animation:float 10s linear infinite;
}

@keyframes float{
    0%{
        transform:translateY(100vh) scale(0);
        opacity:0;
    }
    50%{
        opacity:1;
    }
    100%{
        transform:translateY(-10vh) scale(1);
        opacity:0;
    }
}