/* ===========================
   GOOGLE FONT
=========================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ===========================
   VARIABLES
=========================== */

:root{

    --bg:#08131F;
    --surface:#122233;
    --card:rgba(255,255,255,.06);

    --primary:#1E88E5;
    --accent:#00C853;

    --text:#FFFFFF;
    --text-secondary:#B7C3CF;

    --border:rgba(255,255,255,.08);

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

    --radius:18px;

    --transition:.35s ease;

}

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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:var(--bg);

    color:var(--text);

    line-height:1.7;

}

/* ===========================
   BACKGROUND GRID
=========================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:45px 45px;

    pointer-events:none;

    z-index:-1;

}

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

.navbar{

    width:90%;

    max-width:1300px;

    margin:auto;

    padding:20px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-size:30px;

    font-weight:800;

    color:var(--primary);

}

.nav-links{

    display:flex;

    list-style:none;

    gap:35px;

}

.nav-links a{

    color:white;

    text-decoration:none;

    transition:var(--transition);

}

.nav-links a:hover{

    color:var(--primary);

}

#themeToggle{

    border:none;

    background:var(--card);

    color:white;

    cursor:pointer;

    padding:10px 15px;

    border-radius:12px;

}

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

.hero{

    min-height:90vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:80px 20px;

}

.hero-content{

    max-width:900px;

}

.hero h1{

    font-size:68px;

    font-weight:800;

    margin-bottom:15px;

}

.hero h2{

    color:var(--primary);

    font-size:34px;

    margin-bottom:20px;

}

.hero p{

    color:var(--text-secondary);

    font-size:20px;

    margin-bottom:40px;

}

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

.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

    padding:15px 34px;

    border-radius:12px;

    text-decoration:none;

    transition:var(--transition);

    font-weight:600;

}

.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 30px rgba(30,136,229,.4);

}

.btn-secondary{

    border:2px solid var(--primary);

    color:white;

}

.btn-secondary:hover{

    background:var(--primary);

}

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

.cards{

    width:90%;

    max-width:1300px;

    margin:80px auto;

    display:grid;

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

    gap:30px;

}

.card{

    background:var(--card);

    backdrop-filter:blur(18px);

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

    border-radius:var(--radius);

    padding:35px;

    text-decoration:none;

    color:white;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

}

.card h3{

    margin-bottom:18px;

    font-size:24px;

}

.card p{

    color:var(--text-secondary);

}

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

footer{

    text-align:center;

    padding:40px;

    color:var(--text-secondary);

}

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

@media(max-width:900px){

.hero h1{

font-size:48px;

}

.hero h2{

font-size:26px;

}

.nav-links{

display:none;

}

.buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;

}

}
/* ===========================
   LIGHT MODE
=========================== */

body.light-mode{

    --bg:#F4F7FB;
    --surface:#FFFFFF;
    --card:#FFFFFF;

    --text:#08131F;
    --text-secondary:#495057;

    --border:#DCE4EC;

}

/* ===========================
   ANIMATIONS
=========================== */

.card{

    opacity:0;

    transform:translateY(40px);

}

.card.show{

    opacity:1;

    transform:translateY(0);

}

.card{

    transition:
        transform .4s ease,
        opacity .8s ease,
        border-color .3s ease;

}

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

.section{

    width:90%;

    max-width:1300px;

    margin:90px auto;

}

.container{

    width:100%;

}

.section-title{

    font-size:40px;

    margin-bottom:40px;

    color:var(--primary);

}

/* ==========================
   TECHNOLOGY GRID
========================== */

.tech-grid{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.tech-grid span{

    padding:12px 22px;

    border-radius:40px;

    background:var(--card);

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

}

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

.gallery{

    display:grid;

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

    gap:25px;

}

.gallery img{

    width:100%;

    height:240px;

    object-fit:cover;

    border-radius:16px;

    transition:.35s;

    cursor:pointer;

}

.gallery img:hover{

    transform:scale(1.04);

}
/* ==========================
PROJECT CARDS
========================== */

.project-image{

width:100%;

height:220px;

object-fit:cover;

border-radius:12px;

margin-bottom:20px;

}

.tag-list{

display:flex;

flex-wrap:wrap;

gap:10px;

margin:20px 0;

}

.tag-list span{

padding:8px 15px;

background:var(--primary);

border-radius:30px;

font-size:13px;

}

.project-buttons{

display:flex;

gap:15px;

margin-top:25px;

flex-wrap:wrap;

}

.project-buttons a{

flex:1;

text-align:center;

}
/* ==========================
CONTACT FORM
========================== */

.contact-form{

max-width:800px;

margin:auto;

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,
.contact-form textarea{

padding:18px;

border-radius:12px;

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

background:var(--card);

color:var(--text);

font-size:16px;

outline:none;

}

.contact-form textarea{

resize:vertical;

min-height:180px;

}

.contact-form button{

border:none;

cursor:pointer;

}
#searchBox{

width:100%;

padding:18px;

border-radius:12px;

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

background:var(--card);

color:var(--text);

font-size:18px;

margin-bottom:40px;

}
.status{

display:inline-block;

padding:8px 16px;

border-radius:30px;

background:#22c55e;

color:white;

font-weight:bold;

margin-bottom:20px;

}

.software{

display:flex;

flex-wrap:wrap;

gap:10px;

margin:20px 0;

}

.software span{

padding:8px 15px;

background:#1f2937;

border-radius:20px;

font-size:14px;

}