/* ==========================================
   GOOGLE FONT
========================================== */

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

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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#08131f;

    color:#ffffff;

    overflow-x:hidden;

    line-height:1.7;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}

/* ==========================================
   COLORS
========================================== */

:root{

    --primary:#00d4ff;

    --secondary:#2563eb;

    --dark:#08131f;

    --card:#112033;

    --light:#f8fafc;

    --gray:#94a3b8;

    --transition:.4s ease;

    --radius:20px;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

}

::-webkit-scrollbar-track{

    background:#0d1c2d;

}

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

section{

    padding:120px 0;

}

.section-title{

    text-align:center;

    margin-bottom:80px;

}

.section-title h5{

    color:var(--primary);

    letter-spacing:3px;

    margin-bottom:15px;

}

.section-title h2{

    font-size:45px;

    font-weight:700;

}

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

.btn{

    display:inline-block;

    padding:15px 35px;

    border-radius:50px;

    transition:var(--transition);

    font-weight:600;

}

.primary{

    background:var(--primary);

    color:#08131f;

}

.primary:hover{

    transform:translateY(-5px);

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

}

.secondary{

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

    color:#fff;

}

.secondary:hover{

    background:var(--primary);

    color:#08131f;

}

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

header{

    width:100%;

    position:fixed;

    top:0;

    left:0;

    z-index:999;

    backdrop-filter:blur(20px);

    background:rgba(8,19,31,.7);

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

}

nav{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-size:30px;

    font-weight:800;

}

.logo span{

    color:var(--primary);

}

.nav-links{

    display:flex;

    gap:40px;

}

.nav-links a{

    color:white;

    transition:var(--transition);

}

.nav-links a:hover{

    color:var(--primary);

}

.menu-btn{

    display:none;

    font-size:32px;

    cursor:pointer;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

}

.hero-container{

    display:grid;

    grid-template-columns:1fr 450px;

    align-items:center;

    gap:70px;

}

.hero-badge{

    display:inline-block;

    padding:10px 18px;

    background:#10314d;

    border-radius:50px;

    color:var(--primary);

    margin-bottom:25px;

}

.hero h4{

    color:var(--primary);

    font-size:22px;

}

.hero h1{

    font-size:70px;

    line-height:1.1;

    margin:20px 0;

}

.hero h1 span{

    color:var(--primary);

}

.typing{

    font-size:34px;

    color:#38bdf8;

    height:45px;

    margin-bottom:25px;

}

.hero p{

    color:var(--gray);

    font-size:18px;

    margin-bottom:40px;

    max-width:650px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:35px;

}

.socials{

    display:flex;

    gap:20px;

}

.socials a{

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--card);

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:22px;

    transition:var(--transition);

}

.socials a:hover{

    background:var(--primary);

    color:#08131f;

    transform:translateY(-5px);

}

.hero-image{

    position:relative;

}

.hero-image img{

    width:430px;

    height:430px;

    object-fit:cover;

    border-radius:50%;

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

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

}

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

.about{

    background:#0d1728;

}

.about-grid{

    display:grid;

    grid-template-columns:400px 1fr;

    gap:80px;

    align-items:center;

}

.about-image img{

    border-radius:25px;

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

}

.about-content p{

    color:var(--gray);

    font-size:17px;

    margin-bottom:40px;

}

.stats{

    display:grid;

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

    gap:25px;

}

.stat-card{

    background:var(--card);

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:var(--transition);

}

.stat-card:hover{

    transform:translateY(-10px);

    background:#18314a;

}

.stat-card h2{

    font-size:45px;

    color:var(--primary);

    margin-bottom:10px;

}

.stat-card p{

    color:white;

}

/* ==========================================
   SKILLS
========================================== */

.skills{

    background:#08131f;

}

.skills-grid{

    display:grid;

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

    gap:30px;

}

.skill-card{

    background:var(--card);

    padding:40px 25px;

    border-radius:20px;

    text-align:center;

    transition:var(--transition);

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

}

.skill-card:hover{

    transform:translateY(-10px);

    background:#18314a;

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

}

.skill-card i{

    font-size:55px;

    color:var(--primary);

    margin-bottom:20px;

}

.skill-card h3{

    font-size:20px;

    font-weight:600;

}

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

.projects{

    background:#0d1728;

}

.projects-grid{

    display:grid;

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

    gap:35px;

}

.project-card{

    background:var(--card);

    border-radius:25px;

    overflow:hidden;

    transition:var(--transition);

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

}

.project-card:hover{

    transform:translateY(-12px);

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

}

.project-image{

    width:100%;

    height:240px;

    overflow:hidden;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-content{

    padding:30px;

}

.project-content h3{

    margin-bottom:15px;

    font-size:24px;

}

.project-content p{

    color:var(--gray);

    margin-bottom:25px;

}

.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}

.tech-stack span{

    padding:8px 15px;

    background:#17324b;

    border-radius:30px;

    font-size:14px;

    color:var(--primary);

}

.project-links{

    display:flex;

    gap:15px;

}

.project-links a{

    flex:1;

    text-align:center;

    padding:12px;

    border-radius:40px;

    background:var(--primary);

    color:#08131f;

    font-weight:600;

    transition:var(--transition);

}

.project-links a:hover{

    transform:translateY(-3px);

}

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

.timeline{

    position:relative;

    max-width:950px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:4px;

    height:100%;

    background:var(--primary);

    transform:translateX(-50%);

}

.timeline-item{

    position:relative;

    width:50%;

    padding:30px;

}

.timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}

.timeline-item:nth-child(even){

    left:50%;

}

.timeline-content{

    background:var(--card);

    padding:30px;

    border-radius:20px;

    transition:var(--transition);

}

.timeline-content:hover{

    transform:translateY(-8px);

    background:#18314a;

}

.timeline-content h3{

    margin-bottom:10px;

}

.timeline-content h4{

    color:var(--primary);

    margin-bottom:10px;

}

.timeline-content p{

    color:var(--gray);

}

.timeline-item::before{

    content:"";

    position:absolute;

    top:45px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

}

.timeline-item:nth-child(odd)::before{

    right:-11px;

}

.timeline-item:nth-child(even)::before{

    left:-11px;

}

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

.contact-form{

    max-width:800px;

    margin:auto;

    display:grid;

    gap:25px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:18px;

    border:none;

    border-radius:15px;

    background:var(--card);

    color:white;

    outline:none;

    font-size:16px;

}

.contact-form textarea{

    resize:none;

}

.contact-form button{

    cursor:pointer;

    border:none;

    font-size:18px;

}

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

footer{

    padding:40px 0;

    background:#050b13;

    text-align:center;

}

footer p{

    color:var(--gray);

}

/* ==========================================
   SIMPLE FADE ANIMATION
========================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:1s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.zoom{

    opacity:0;

    transform:scale(.9);

    transition:1s;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}

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

@media (max-width:1100px){

.hero-container,
.about-grid{

    grid-template-columns:1fr;
    text-align:center;

}

.hero-image{

    order:-1;

    margin-bottom:40px;

}

.hero-image img{

    width:320px;
    height:320px;
    margin:auto;

}

.hero-buttons{

    justify-content:center;

}

.socials{

    justify-content:center;

}

.hero p{

    margin:auto auto 40px;

}

.timeline::before{

    left:30px;

}

.timeline-item{

    width:100%;
    left:0 !important;
    padding-left:80px;
    padding-right:20px;
    text-align:left !important;

}

.timeline-item::before{

    left:22px !important;
    right:auto;

}

}

@media (max-width:768px){

nav{

    height:70px;

}

.menu-btn{

    display:block;

    font-size:34px;

}

.nav-links{

    position:fixed;

    top:70px;

    left:-100%;

    width:100%;

    background:#08131f;

    display:flex;

    flex-direction:column;

    text-align:center;

    padding:40px 0;

    gap:30px;

    transition:.4s;

}

.nav-links.active{

    left:0;

}

.hero{

    padding-top:130px;

}

.hero h1{

    font-size:46px;

}

.typing{

    font-size:24px;

}

.section-title h2{

    font-size:34px;

}

.stats{

    grid-template-columns:1fr;

}

.projects-grid{

    grid-template-columns:1fr;

}

.skills-grid{

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

}

}

@media (max-width:500px){

.container{

    width:92%;

}

.hero h1{

    font-size:38px;

}

.hero p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

}

.btn{

    width:100%;
    text-align:center;

}

.socials{

    flex-wrap:wrap;

}

.skills-grid{

    grid-template-columns:1fr;

}

.hero-image img{

    width:260px;
    height:260px;

}

}

/* ==========================================
   UTILITIES
========================================== */

.text-center{

    text-align:center;

}

.mt-1{

    margin-top:20px;

}

.mt-2{

    margin-top:40px;

}

.mt-3{

    margin-top:60px;

}

.mb-1{

    margin-bottom:20px;

}

.mb-2{

    margin-bottom:40px;

}

.mb-3{

    margin-bottom:60px;

}

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

.loader{

    position:fixed;

    inset:0;

    background:#08131f;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:.6s;

}

.loader.hide{

    opacity:0;

    visibility:hidden;

}

.loader span{

    width:70px;

    height:70px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.15);

    border-top:5px solid var(--primary);

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================
   SCROLL TO TOP BUTTON
========================================== */

.scroll-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--primary);

    color:#08131f;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.4s;

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

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

}

/* ==========================================
   GLASS EFFECT
========================================== */

.glass{

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

    backdrop-filter:blur(15px);

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

}

/* ==========================================
   FLOATING ANIMATION
========================================== */

.float{

    animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%{

    transform:translateY(0);

}

50%{

    transform:translateY(-12px);

}

100%{

    transform:translateY(0);

}

}

/* ==========================================
   GRADIENT TEXT
========================================== */

.gradient{

    background:linear-gradient(90deg,#00d4ff,#2563eb);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* ==========================================
   CARD HOVER EFFECT
========================================== */

.skill-card,
.project-card,
.stat-card,
.timeline-content{

    position:relative;

    overflow:hidden;

}

.skill-card::after,
.project-card::after,
.stat-card::after,
.timeline-content::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.06),

        transparent

    );

    transition:.8s;

}

.skill-card:hover::after,
.project-card:hover::after,
.stat-card:hover::after,
.timeline-content:hover::after{

    left:120%;

}

/* ==========================================
   IMAGE HOVER
========================================== */

img{

    transition:.4s;

}

img:hover{

    transform:scale(1.02);

}

/* ==========================================
   SELECTION
========================================== */

::selection{

    background:var(--primary);

    color:#08131f;

}

/* ==========================================
   REMOVE INPUT AUTOFILL BACKGROUND
========================================== */

input:-webkit-autofill,
textarea:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #112033 inset !important;

    -webkit-text-fill-color:white !important;

}

/* ==========================================
   END OF FILE
========================================== */