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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#f5f5f5;
    color:#222;
    line-height:1.6;

}


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

nav{

    position:fixed;
    top:0;
    left:0;
    width:100%;

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

    padding:20px 8%;

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

    backdrop-filter:blur(10px);

    z-index:1000;

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

}


.logo{

    color:#ff9800;

    font-size:1.8rem;

    font-weight:bold;

    letter-spacing:1px;

}


.nav-links{

    display:flex;
    gap:35px;

}


.nav-links a{

    text-decoration:none;

    color:white;

    font-weight:600;

    transition:.3s;

}


.nav-links a:hover{

    color:#ff9800;

}


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

.hero{

    height:100vh;

    background:
    linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
    url("Images/hero.jpg");

    background-size:cover;
    background-position:center;

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

    text-align:center;

    padding:0 25px;

    color:white;

}


.hero-content{

    max-width:850px;

}


.hero h1{

    font-size:4rem;

    margin-bottom:25px;

    line-height:1.15;

}


.hero p{

    font-size:1.2rem;

    color:#dddddd;

    margin-bottom:40px;

}


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

.hero-buttons{

    display:flex;
    justify-content:center;
    gap:20px;

    flex-wrap:wrap;

}


.btn{

    display:inline-block;

    padding:15px 35px;

    background:#ff9800;

    color:white;

    text-decoration:none;

    font-weight:bold;

    border-radius:50px;

    transition:.3s;

}


.btn:hover{

    transform:translateY(-4px);

    background:#e68900;

}


.btn.secondary{

    background:transparent;

    border:2px solid white;

}


.btn.secondary:hover{

    background:white;

    color:#222;

}


/* ========================================
   GENERAL SECTIONS
======================================== */

.section{

    padding:100px 8%;

}


.section.dark{

    background:#1f1f1f;

    color:white;

}


.section-header{

    max-width:800px;

    margin:0 auto 70px;

    text-align:center;

}


.section-header h2{

    font-size:2.8rem;

    margin-bottom:20px;

}


.section-header p{

    color:#666;

    font-size:1.1rem;

}


.section.dark .section-header p{

    color:#cccccc;

}


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

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}


.about-text h3{

    font-size:2rem;

    margin-bottom:20px;

}


.about-text p{

    margin-bottom:20px;

}


.about-image img{

    width:100%;

    border-radius:15px;

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

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

.services-grid{

    display:grid;

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

    gap:35px;

}


.service-card{

    background:white;

    padding:40px 30px;

    border-radius:15px;

    text-align:center;

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

    transition:.35s;

    border-top:5px solid #ff9800;

}


.service-card:hover{

    transform:translateY(-10px);

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

}


.service-card h3{

    margin-bottom:20px;

    font-size:1.5rem;

    color:#222;

}


.service-card p{

    color:#666;

    line-height:1.8;

}



/* Dark section service cards */

.section.dark .service-card{

    background:#2d2d2d;

}


.section.dark .service-card h3{

    color:white;

}


.section.dark .service-card p{

    color:#d6d6d6;

}



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

.features-grid{

    display:grid;

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

    gap:35px;

}


.feature-box{

    background:white;

    padding:35px;

    border-radius:15px;

    text-align:center;

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

    transition:.35s;

}


.feature-box:hover{

    transform:translateY(-8px);

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

}


.feature-box h3{

    color:#ff9800;

    margin-bottom:18px;

    font-size:1.4rem;

}


.feature-box p{

    color:#666;

}



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

.gallery{

    display:grid;

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

    gap:30px;

}


.gallery-item{

    overflow:hidden;

    border-radius:18px;

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

    cursor:pointer;

    transition:.35s;

}


.gallery-item:hover{

    transform:translateY(-8px);

}


.gallery-item img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

    transition:.45s;

}


.gallery-item:hover img{

    transform:scale(1.08);

}



/* ========================================
   IMAGE OVERLAY EFFECT
======================================== */

.gallery-item{

    position:relative;

}


.gallery-item::after{

    content:"View Project";

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    color:white;

    font-size:1.2rem;

    font-weight:bold;

    opacity:0;

    transition:.35s;

    z-index:5;

}


.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

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

    opacity:0;

    transition:.35s;

    z-index:4;

}


.gallery-item:hover::before{

    opacity:1;

}


.gallery-item:hover::after{

    opacity:1;

}