/*==============================
ROOT
==============================*/

:root{

--bg:#08111f;
--card:#111c2f;
--primary:#2563eb;
--secondary:#38bdf8;
--text:#ffffff;
--light:#94a3b8;

}

/*==============================
BODY
==============================*/

body{

background:var(--bg);

color:var(--text);

cursor:none;

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

overflow-x:hidden;

}
.logo{

flex:0 0 auto;

}

nav{

flex:1;

display:flex;

justify-content:center;

}

.nav-icons{

flex:0 0 auto;

}

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



.logo{

flex:0 0 auto;

}

nav{

flex:1;

display:flex;

justify-content:center;

}

.nav-icons{

display:flex;

align-items:center;

gap:15px;

flex:0 0 auto;

}

header{

position:fixed;

top:0;

left:0;

width:100%;

height:80px;

padding:0 8%;

display:flex;

align-items:center;

justify-content:space-between;

background:rgba(8,17,31,.75);

backdrop-filter:blur(20px);

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

z-index:999;

}

header.scrolled{

padding:15px 8%;

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

}

/* Logo */

.logo{

font-size:34px;

font-weight:700;

cursor:pointer;

}

.logo span{

color:var(--secondary);

}

/* Nav */
.nav-icons{

display:flex;

align-items:center;

gap:15px;

margin-left:25px;


}



.theme-toggle:hover,
.menu-btn:hover{

background:#2563eb;

transform:translateY(-3px);

}



nav ul{
    
display:flex;

gap:35px;

}

nav a{

font-weight:500;

position:relative;

transition:.3s;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#38bdf8;

transition:.4s;

}

nav a:hover{

color:#38bdf8;

}

nav a:hover::after{

width:100%;

}
nav ul li a{

color:#fff;

text-decoration:none;

font-weight:500;

transition:.3s;

}

nav ul li a:hover{

color:#38bdf8;

}

nav ul li a.active{

color:#38bdf8;

}

.nav-icons{

display:flex;

align-items:center;

gap:15px;

margin-left:30px;

}

.theme-toggle,
.menu-btn{

width:45px;
height:45px;

display:flex;

align-items:center;

justify-content:center;

background:#1e293b;

border:none;

border-radius:50%;

color:white;

cursor:pointer;

font-size:18px;

}


.hero{

display:flex;

align-items:center;

justify-content:space-between;

padding:160px 8% 100px;

min-height:100vh;

gap:80px;

}
.hero{

max-width:1400px;

margin:auto;

}

.hero-left{

flex:1;

}

.hero-left h3{

font-size:22px;

color:#94a3b8;

}

.hero-left h1{

font-size:78px;

font-weight:800;

margin:15px 0;

line-height:1;

}

.hero-left h2{

font-size:34px;

color:#38bdf8;

margin-bottom:25px;

}

.hero-left p{

font-size:18px;

line-height:34px;

color:#cbd5e1;

max-width:650px;

}

.typing{

height:45px;

font-size:24px;

font-weight:600;

margin-bottom:20px;

color:#22d3ee;

}


.buttons{

display:flex;

gap:20px;

margin-top:40px;

}

.btn{
text-decoration: none;
color:#fff;

}

.btn2{

color:#38bdf8;

}

.btn2:hover{

color:#fff;

}

.btn{

padding:16px 38px;

border-radius:50px;

background:linear-gradient(135deg,#2563eb,#38bdf8);

font-weight:600;

transition:.35s;

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

}

.btn:hover{

transform:translateY(-6px);

box-shadow:0 20px 45px rgba(37,99,235,.5);

}

.btn2{

background:transparent;

border:2px solid #38bdf8;

}

.btn2:hover{

background:#38bdf8;

color:#000;

}
.hero-right{

flex:1;

display:flex;

justify-content:center;

}

.profile-card{

width:430px;

height:430px;

border-radius:50%;

padding:8px;

background:linear-gradient(45deg,#2563eb,#06b6d4,#38bdf8);

box-shadow:

0 0 30px rgba(37,99,235,.5),

0 0 70px rgba(6,182,212,.3);

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

}

.profile-card img{

width:100%;

height:100%;

border-radius:50%;

object-fit:cover;

border:8px solid #08111f;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

.about{

padding:120px 8%;

background:#111827;

}

.about h2{

text-align:center;

font-size:48px;

margin-bottom:30px;

}

.about p{

max-width:900px;

margin:auto;

text-align:center;

font-size:18px;

line-height:34px;

color:#cbd5e1;

}

.about-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.card{

background:#1e293b;

padding:45px;

border-radius:20px;

transition:.35s;

text-align:center;

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

}

.card:hover{

transform:translateY(-10px);

background:#2563eb;

box-shadow:0 0 35px rgba(37,99,235,.4);

}

.card h1{

font-size:52px;

margin-bottom:10px;

}

.card h3{

font-size:22px;

}

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

.skills{

padding:120px 8%;

background:#0f172a;

}

.skills h2{

text-align:center;

margin-bottom:70px;

}

.skills-grid{

display:grid;

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

gap:30px;

}

.skill-card{

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

backdrop-filter:blur(15px);

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

border-radius:20px;

padding:35px;

text-align:center;

transition:.4s;

cursor:pointer;

}

.skill-card:hover{

transform:translateY(-10px);

box-shadow:0 0 30px rgba(37,99,235,.35);

background:#2563eb;

}

.skill-card i{

font-size:45px;

margin-bottom:20px;

color:#38bdf8;

}

.skill-card:hover i{

color:white;

}

.skill-card h3{

font-size:22px;

font-weight:600;

}

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

.experience{

padding:120px 8%;

background:#111827;

}

.timeline{

position:relative;

margin-top:70px;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

transform:translateX(-50%);

width:4px;

height:100%;

background:#2563eb;

}

.timeline-item{

width:50%;

padding:20px 40px;

position:relative;

}

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

left:0;

text-align:right;

}

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

left:50%;

}

.timeline-content{

background:#1e293b;

padding:30px;

border-radius:20px;

transition:.4s;

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

}

.timeline-content:hover{

transform:translateY(-10px);

box-shadow:0 0 25px rgba(37,99,235,.3);

}

.timeline-content span{

color:#38bdf8;

font-size:15px;

font-weight:600;

}

.timeline-content h3{

margin:15px 0;

font-size:24px;

}

.timeline-content h4{

color:#94a3b8;

margin-bottom:15px;

}

.timeline-content p{

color:#cbd5e1;

line-height:28px;

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

.projects{

padding:120px 8%;

background:#0b1120;

}

.project-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.project-card{

background:#1e293b;

padding:40px;

border-radius:20px;

transition:.4s;

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

}

.project-card:hover{

transform:translateY(-12px);

background:#2563eb;

}

.project-card h3{

font-size:26px;

margin-bottom:20px;

}

.project-card p{

line-height:32px;

color:#d1d5db;

}
/*==============================
CERTIFICATIONS
==============================*/

.certifications{

padding:120px 8%;

background:#111827;

}

.certificate-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.certificate-card{

background:#1e293b;

padding:45px;

border-radius:20px;

text-align:center;

transition:.4s;

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

}

.certificate-card:hover{

transform:translateY(-10px);

background:#2563eb;

box-shadow:0 0 30px rgba(37,99,235,.35);

}

.certificate-card i{

font-size:55px;

margin-bottom:20px;

color:#38bdf8;

}

.certificate-card h3{

font-size:28px;

margin-bottom:15px;

}

.certificate-card span{

display:inline-block;

margin-bottom:20px;

padding:8px 18px;

background:#38bdf8;

border-radius:30px;

font-weight:600;

color:#08111f;

}

.certificate-card p{

color:#d1d5db;

line-height:30px;

}
/*==============================
ACHIEVEMENTS
==============================*/

.achievements{

padding:120px 8%;

background:#0b1120;

}

.achievement-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.achievement-card{

background:#1e293b;

padding:40px;

text-align:center;

border-radius:20px;

transition:.4s;

}

.achievement-card:hover{

background:#2563eb;

transform:translateY(-10px);

}

.achievement-card i{

font-size:55px;

margin-bottom:20px;

color:gold;

}

.achievement-card h3{

margin-bottom:15px;

}

/*==============================
EDUCATION
==============================*/

.education{

padding:120px 8%;

background:#111827;

}

.education-card{

max-width:700px;

margin:auto;

background:#1e293b;

padding:50px;

text-align:center;

border-radius:20px;

transition:.4s;

}

.education-card:hover{

transform:translateY(-10px);

box-shadow:0 0 35px rgba(37,99,235,.35);

}

.education-card i{

font-size:55px;

margin-bottom:20px;

color:#38bdf8;

}

.education-card h3{

font-size:30px;

margin-bottom:15px;

}

.education-card h4{

color:#38bdf8;

margin-bottom:20px;

}

.education-card span{

display:block;

margin-top:20px;

font-weight:600;

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

.contact{

padding:120px 8%;

background:#0b1120;

}

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

margin-top:70px;

}

.contact-info{

display:flex;

flex-direction:column;

gap:30px;

}

.info{

display:flex;

align-items:center;

gap:20px;

font-size:18px;

}

.info i{

font-size:24px;

color:#38bdf8;

}

form{

display:flex;

flex-direction:column;

gap:20px;

}

form input,

form textarea{

padding:18px;

border:none;

outline:none;

border-radius:15px;

background:#1e293b;

color:white;

}

form textarea{

resize:none;

}

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

footer{

padding:40px 8%;

text-align:center;

background:#08111f;

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

}

.footer-logo{

font-size:34px;

font-weight:700;

margin-bottom:15px;

}

.footer-logo span{

color:#38bdf8;

}

.footer-social{

margin:25px 0;

display:flex;

justify-content:center;

gap:20px;

}

.footer-social a{

height:50px;

width:50px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#1e293b;

transition:.4s;

}

.footer-social a:hover{

background:#2563eb;

transform:translateY(-8px);

}
/*==============================
TOP BUTTON
==============================*/

#topBtn{

position:fixed;

bottom:30px;

right:30px;

height:55px;

width:55px;

border:none;

border-radius:50%;

background:#2563eb;

color:white;

font-size:20px;

cursor:pointer;

display:none;

z-index:999;

transition:.4s;

}

#topBtn:hover{

background:#38bdf8;

transform:translateY(-5px);

}
@media(max-width:991px){

.contact-wrapper{

grid-template-columns:1fr;

}

.timeline::before{

left:20px;

}

.timeline-item{

width:100%;

left:0 !important;

padding-left:60px;

text-align:left !important;

}

}
@media(max-width:768px){



nav{

position:fixed;

top:80px;

left:-100%;

width:280px;

height:100vh;

background:#111827;

padding:40px 30px;

transition:.4s;

}

nav.active{

left:0;

}

nav ul{

display:flex;

flex-direction:column;

gap:25px;

}

}


@media(max-width:768px){

.hero{

flex-direction:column-reverse;

text-align:center;

}

.hero-left,

.hero-right{

width:100%;

}

.about-grid{

grid-template-columns:1fr;

}

.skills-grid{

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

}

.project-grid,

.certificate-grid,

.achievement-grid{

grid-template-columns:1fr;

}

}

/*==============================
THEME
==============================*/

.theme-toggle{

height:45px;

width:45px;

display:flex !important;

visibility:visible !important;

opacity:1 !important;

background:red !important;

color:white !important;

border:2px solid yellow;


justify-content:center;

align-items:center;

/* background:#1e293b; */

border-radius:50%;

cursor:pointer;

transition:.4s;

}

.theme-toggle:hover{

background:#2563eb;

}

body.light{

background:#f5f7fb;

color:#111827;

}

body.light header{

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

}

body.light .card,
body.light .skill-card,
body.light .project-card,
body.light .certificate-card,
body.light .achievement-card,
body.light .education-card{

background:#ffffff;

color:#111827;

}

.menu-btn{
    display:none;
    width:45px;
    height:45px;
    justify-content:center;
    align-items:center;
    border:none;
    border-radius:50%;
    background:#1e293b;
    color:#fff;
    cursor:pointer;
    font-size:30px;
}

@media(max-width:768px){

.menu-btn{

display:block;

}

nav{

position:absolute;

top:80px;

left:-100%;

width:100%;

background:#111827;

transition:.4s;

padding:30px;

}

nav.active{

left:0;

}

nav ul{

flex-direction:column;

gap:20px;

}

}
#progress-bar{

position:fixed;

top:0;

left:0;

height:4px;

background:#38bdf8;

width:0;

z-index:9999;

}
.cursor{

position:fixed;

height:20px;

width:20px;

border-radius:50%;

background:#38bdf8;

pointer-events:none;

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

z-index:99999;

box-shadow:

0 0 25px #38bdf8,

0 0 60px #38bdf8;

}

.hero::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:radial-gradient(#2563eb,transparent);

filter:blur(120px);

top:-150px;

right:-150px;

animation:blob 8s infinite;

}

@keyframes blob{

50%{

transform:translate(-60px,50px);

}

}

.btn{

overflow:hidden;

position:relative;

}

.btn span{

position:relative;

z-index:2;

}

.btn::before{

content:"";

position:absolute;

width:0;

height:0;

border-radius:50%;

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

transition:.5s;

}

.btn:hover::before{

width:300px;

height:300px;

}

.loader{

position:fixed;

inset:0;

background:#08111f;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.6s;

}

.loader-hidden{

opacity:0;

visibility:hidden;

}

.spinner{

height:70px;

width:70px;

border:5px solid #2563eb;

border-top:5px solid white;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}
}


a.logo{
    text-decoration: none;
    color: #fff;
}

.nav-icons{
    position: relative;
    z-index: 9999;
}

.theme-toggle{
    position: relative;
    z-index: 9999;
}