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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#050816;

    color:white;

    overflow-x:hidden;

    position:relative;

}

/* =======================
AURORA BACKGROUND
=======================*/

body::before{

content:"";

position:fixed;

top:-30%;

left:-20%;

width:700px;

height:700px;

background:radial-gradient(circle,#2563eb55,transparent 70%);

filter:blur(120px);

animation:aurora1 12s infinite alternate;

z-index:-2;

}

body::after{

content:"";

position:fixed;

bottom:-30%;

right:-20%;

width:700px;

height:700px;

background:radial-gradient(circle,#06b6d455,transparent 70%);

filter:blur(120px);

animation:aurora2 10s infinite alternate;

z-index:-2;

}

@keyframes aurora1{

0%{

transform:translate(0,0);

}

100%{

transform:translate(200px,150px);

}

}

@keyframes aurora2{

0%{

transform:translate(0,0);

}

100%{

transform:translate(-200px,-150px);

}

}

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

nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 10%;

    position:fixed;

    width:100%;

    top:0;

    backdrop-filter:blur(20px);

    background:rgba(10,18,32,.6);

    z-index:1000;

}

.logo{

    font-size:28px;

    font-weight:700;

    color:#4ecdc4;

}

nav ul{

    display:flex;

    list-style:none;

    gap:35px;

}

nav a{

    color:white;

    text-decoration:none;

    transition:.3s;

}

nav a:hover{

    color:#4ecdc4;

}

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

.hero{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:100vh;

    padding:120px 10%;

}

.hero-left{

    width:55%;

}

.hero-left h3{

    color:#4ecdc4;

    margin-bottom:10px;

}

.hero-left h1{

    font-size:70px;

    line-height:80px;

}

.hero-left h2{

    margin-top:15px;

    color:#66d9ff;

    font-weight:500;

}

.hero-left p{

    margin-top:30px;

    line-height:32px;

    color:#d8d8d8;

    max-width:650px;

}

.buttons{

    margin-top:40px;

}

.primary{

background:linear-gradient(135deg,#2563eb,#06b6d4);

color:white;

padding:18px 40px;

border-radius:15px;

text-decoration:none;

font-weight:600;

transition:.4s;

display:inline-block;

}
.primary:hover{

transform:translateY(-5px);

box-shadow:

0 15px 35px rgba(37,99,235,.4);

}

.secondary{

    border:2px solid #4ecdc4;

    color:white;

    padding:16px 35px;

    border-radius:12px;

    text-decoration:none;

}

/* ===========================
PROFILE CARD
===========================*/

.profile-card{

    width:320px;

    height:320px;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

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

}

.circle{

width:120px;

height:120px;

border-radius:50%;

background:

linear-gradient(135deg,#2563eb,#06b6d4);

animation:pulse 3s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

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

}

70%{

transform:scale(1.08);

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

}

100%{

transform:scale(1);

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

}

}

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

.stats{

    display:grid;

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

    gap:25px;

    padding:0 10% 100px;

}

.card{

    background:#101c2f;

    padding:35px;

    border-radius:18px;

    text-align:center;

    transition:.4s;

}

.card:hover{

transform:translateY(-12px) scale(1.04);

box-shadow:

0 10px 30px rgba(37,99,235,.4),

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

}

.card h2{

    font-size:38px;

    color:#4ecdc4;

}

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

section{

    padding:90px 10%;

}

.section-title{

    font-size:40px;

    margin-bottom:40px;

    color:#4ecdc4;

}

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

.skill-grid{

    display:grid;

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

    gap:20px;

}

.skill-grid div{

    background:#101c2f;

    padding:20px;

    text-align:center;

    border-radius:15px;

    transition:.3s;

}

.skill-grid div:hover{

    background:#4ecdc4;

    color:black;

    transform:scale(1.05);

}

/* ===========================
TIMELINE
===========================*/

.timeline-item{

    background:#101c2f;

    padding:30px;

    border-left:5px solid #4ecdc4;

    border-radius:10px;

}

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

.contact-links{

    display:flex;

    gap:30px;

}

.contact-links a{

    text-decoration:none;

    color:white;

    background:#101c2f;

    padding:18px 30px;

    border-radius:12px;

}

.contact-links a:hover{

    background:#4ecdc4;

    color:black;

}

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

footer{

    padding:40px;

    text-align:center;

    color:#aaa;

}

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

@media(max-width:900px){

.hero{

flex-direction:column;

text-align:center;

}

.hero-left{

width:100%;

}

.hero-left h1{

font-size:48px;

line-height:55px;

}

.profile-card{

margin-top:50px;

}

.stats{

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

}

.skill-grid{

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

}

nav{

display:none;

}

.contact-links{

flex-direction:column;

}

}
.hero h1{

background:linear-gradient(90deg,#ffffff,#60a5fa,#06b6d4);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:textGlow 4s infinite;

}

@keyframes textGlow{

0%{

filter:drop-shadow(0 0 10px #2563eb);

}

50%{

filter:drop-shadow(0 0 25px #06b6d4);

}

100%{

filter:drop-shadow(0 0 10px #2563eb);

}

}
/*=========================
Floating Icons
=========================*/

.floating-icons{

position:absolute;

width:100%;

height:100%;

top:0;

left:0;

pointer-events:none;

overflow:hidden;

}

.icon{

position:absolute;

padding:10px 18px;

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

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

backdrop-filter:blur(10px);

border-radius:40px;

font-size:14px;

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

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

}

.aws{

top:15%;

left:10%;

animation-delay:0s;

}

.azure{

top:25%;

right:15%;

animation-delay:1s;

}

.gcp{

bottom:25%;

left:15%;

animation-delay:2s;

}

.terraform{

bottom:15%;

right:18%;

animation-delay:3s;

}

.docker{

top:45%;

left:5%;

animation-delay:4s;

}

.k8s{

top:55%;

right:5%;

animation-delay:5s;

}

@keyframes float{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-20px);

}

}

/*=========================
Scroll Indicator
=========================*/

.scroll-indicator{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

font-size:15px;

opacity:.6;

animation:bounce 2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translate(-50%,0);

}

50%{

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

}

}

/*=========================
Stars
=========================*/

#stars{

position:fixed;

width:100%;

height:100%;

left:0;

top:0;

z-index:-3;

overflow:hidden;

}

.star{

position:absolute;

width:2px;

height:2px;

background:white;

border-radius:50%;

animation:twinkle 4s infinite;

}

@keyframes twinkle{

50%{

opacity:.2;

transform:scale(.5);

}

}

/*=========================
Mouse Glow
=========================*/

#cursor-glow{

position:fixed;

width:300px;

height:300px;

background:radial-gradient(circle,rgba(59,130,246,.18),transparent);

border-radius:50%;

pointer-events:none;

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

z-index:-1;

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

.section-heading{

text-align:center;

max-width:850px;

margin:auto;

margin-bottom:70px;

}

.section-heading h5{

color:#60a5fa;

letter-spacing:3px;

margin-bottom:15px;

}

.section-heading h2{

font-size:42px;

margin-bottom:25px;

}

.subtitle{

color:#cfcfcf;

line-height:32px;

}

.about-grid{

display:grid;

grid-template-columns:1.3fr .7fr;

gap:40px;

align-items:center;

}

.glass-card{

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

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

padding:45px;

border-radius:25px;

backdrop-filter:blur(20px);

transition:.4s;

}

.glass-card:hover{

transform:translateY(-10px);

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

}

.glass-card h3{

margin-bottom:25px;

font-size:30px;

}

.glass-card p{

line-height:34px;

color:#d5d5d5;

}

.about-right{

display:grid;

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

gap:25px;

}

.mini-card{

background:#111827;

border-radius:20px;

padding:35px;

text-align:center;

transition:.4s;

}

.mini-card:hover{

transform:translateY(-10px);

background:#1d4ed8;

}

.mini-card h2{

font-size:42px;

margin-bottom:12px;

color:#60a5fa;

}

.mini-card span{

font-size:15px;

color:#d7d7d7;

}
/*==============================
TIMELINE
==============================*/

.timeline{

position:relative;

max-width:1100px;

margin:80px auto;

padding:40px 0;

}

.timeline-line{

position:absolute;

left:50%;

top:0;

width:4px;

height:100%;

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

transform:translateX(-50%);

}

.timeline-item{

position:relative;

width:50%;

padding:20px 60px;

box-sizing:border-box;

margin-bottom:60px;

}

.timeline-item.left{

left:0;

text-align:right;

}

.timeline-item.right{

left:50%;

}

.timeline-card{

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

backdrop-filter:blur(18px);

padding:30px;

border-radius:20px;

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

transition:.4s;

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

}

.timeline-card:hover{

transform:translateY(-10px);

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

}

.timeline-dot{

position:absolute;

width:22px;

height:22px;

background:#3b82f6;

border:4px solid white;

border-radius:50%;

top:35px;

right:-13px;

z-index:2;

}

.timeline-item.right .timeline-dot{

left:-13px;

}

.year{

display:inline-block;

background:#2563eb;

padding:6px 14px;

border-radius:30px;

font-size:13px;

margin-bottom:15px;

font-weight:600;

}

.timeline-card h3{

margin:10px 0;

font-size:28px;

}

.timeline-card h4{

color:#60a5fa;

margin-bottom:18px;

font-weight:500;

}

.timeline-card p{

line-height:30px;

color:#d4d4d4;

}

.tags{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-top:25px;

}

.timeline-item.left .tags{

justify-content:flex-end;

}

.tags span{

padding:8px 15px;

border-radius:30px;

background:#111827;

font-size:13px;

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

transition:.3s;

}

.tags span:hover{

background:#2563eb;

}

@media(max-width:900px){

.timeline-line{

left:25px;

}

.timeline-item{

width:100%;

left:0!important;

padding-left:70px;

padding-right:20px;

text-align:left;

}

.timeline-dot{

left:14px!important;

right:auto;

}

.timeline-item.left .tags{

justify-content:flex-start;

}

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

.cert-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.cert-card{

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

backdrop-filter:blur(15px);

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

padding:35px;

border-radius:25px;

text-align:center;

transition:.4s;

position:relative;

overflow:hidden;

}

.cert-card:hover{

transform:translateY(-12px);

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

}

.cert-card::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);

transition:.8s;

}

.cert-card:hover::before{

left:120%;

}

.cert-logo{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

font-size:24px;

color:white;

}

.aws-logo{

background:#FF9900;

}

.azure-logo{

background:#0078D4;

}

.gcp-logo{

background:#34A853;

}

.cert-card h3{

margin-bottom:12px;

font-size:24px;

}

.cert-card p{

color:#d3d3d3;

line-height:28px;

}

.coming{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

.coming h2{

font-size:70px;

color:#60a5fa;

}
/*==========================
Responsive
===========================*/

@media(max-width:1024px){

.hero{

flex-direction:column;

text-align:center;

padding-top:120px;

}

.hero-left{

width:100%;

}

.hero-right{

margin-top:50px;

}

.about-grid{

grid-template-columns:1fr;

}

.timeline-item{

width:100%;

padding-left:50px;

left:0!important;

}

.timeline-line{

left:18px;

}

.timeline-dot{

left:10px!important;

}

nav{

padding:20px;

}

}

@media(max-width:768px){

nav{

flex-direction:column;

gap:20px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:20px;

}

.hero h1{

font-size:48px;

}

.hero h2{

font-size:28px;

}

.hero p{

font-size:17px;

}

.stats{

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

}

.skill-grid{

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

}

.cert-grid{

grid-template-columns:1fr;

}

.buttons{

flex-direction:column;

}

.profile-card{

width:300px;

height:300px;

}

}

@media(max-width:480px){

.hero h1{

font-size:36px;

}

.hero h2{

font-size:22px;

}

.section-title{

font-size:32px;

}

.stats{

grid-template-columns:1fr;

}

.skill-grid{

grid-template-columns:1fr;

}

.contact-links{

flex-direction:column;

gap:20px;

}

}
/*==========================
Projects
===========================*/

.project-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.project-card{

background:#111827;

border-radius:25px;

overflow:hidden;

transition:.4s;

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

}

.project-card:hover{

transform:translateY(-12px);

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

}

.project-image{

height:220px;

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;

}

.project-content p{

line-height:28px;

color:#d1d5db;

}

.project-tags{

display:flex;

gap:12px;

margin-top:25px;

flex-wrap:wrap;

}

.project-tags span{

background:#2563eb;

padding:8px 16px;

border-radius:30px;

font-size:14px;

}
/*==========================
CORE EXPERTISE
==========================*/

.expertise-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.expert-card{

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

backdrop-filter:blur(15px);

padding:30px;

border-radius:20px;

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

transition:.4s;

}

.expert-card:hover{

transform:translateY(-10px);

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

}

.expert-card h3{

font-size:24px;

margin-bottom:15px;

color:#00F7FF;

}

.expert-card p{

line-height:1.8;

color:#ddd;

margin-bottom:20px;

}

.progress{

width:100%;

height:10px;

background:#222;

border-radius:50px;

overflow:hidden;

margin-bottom:10px;

}

.progress-bar{

height:100%;

border-radius:50px;

animation:load 2s ease;

}

.aws{width:95%;background:#ff9900;}

.gcp{width:90%;background:#34a853;}

.security{width:96%;background:#00ffd5;}

.terraform{width:92%;background:#7B42BC;}

.devops{width:82%;background:#1e88e5;}

.linux{width:84%;background:#ffd43b;}

@keyframes load{

from{

width:0;

}

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

@media(max-width:768px){

nav{

flex-direction:column;

padding:20px;

}

nav ul{

margin-top:20px;

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero{

flex-direction:column;

padding-top:80px;

text-align:center;

}

.hero-left h1{

font-size:42px;

}

.hero-left h2{

font-size:26px;

}

.hero-right{

margin-top:40px;

}

.profile-card{

width:280px;

margin:auto;

}

.stats{

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

}

.about-grid{

grid-template-columns:1fr;

}

.expertise-grid{

grid-template-columns:1fr;

}

.timeline-item{

width:100%!important;

left:0!important;

padding-left:50px;

padding-right:0;

}

.timeline-line{

left:20px;

}

.timeline-dot{

left:12px!important;

}

.contact-links{

flex-direction:column;

gap:15px;

}

img{

max-width:100%;

height:auto;

}

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

.education-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.education-card{

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

backdrop-filter:blur(15px);

border-radius:20px;

padding:35px;

text-align:center;

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

transition:.4s;

}

.education-card:hover{

transform:translateY(-10px);

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

}

.edu-icon{

font-size:60px;

margin-bottom:20px;

}

.education-card h3{

font-size:26px;

margin-bottom:10px;

}

.education-card h4{

color:#00F7FF;

margin-bottom:15px;

}

.education-card p{

color:#ccc;

margin-bottom:10px;

}

.education-card span{

display:inline-block;

margin-top:15px;

padding:8px 18px;

border-radius:30px;

background:#00F7FF20;

color:#00F7FF;

font-weight:600;

}
/*=========================
JOURNEY
==========================*/

.journey{

max-width:900px;

margin:80px auto;

position:relative;

}

.journey::before{

content:"";

position:absolute;

left:90px;

top:0;

bottom:0;

width:4px;

background:linear-gradient(#00F7FF,#4facfe);

border-radius:10px;

}

.journey-item{

display:flex;

margin-bottom:70px;

position:relative;

}

.journey-year{

width:90px;

height:90px;

border-radius:50%;

background:#00F7FF;

color:#000;

font-size:22px;

font-weight:700;

display:flex;

justify-content:center;

align-items:center;

flex-shrink:0;

box-shadow:0 0 35px rgba(0,247,255,.4);

z-index:10;

}

.journey-content{

margin-left:45px;

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

backdrop-filter:blur(15px);

padding:30px;

border-radius:20px;

flex:1;

transition:.4s;

}

.journey-content:hover{

transform:translateY(-10px);

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

}

.journey-content h3{

font-size:28px;

margin-bottom:10px;

}

.journey-content h4{

color:#00F7FF;

margin-bottom:15px;

}

.journey-content p{

line-height:1.8;

color:#d9d9d9;

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

.journey::before{

left:40px;

}

.journey-item{

flex-direction:column;

padding-left:20px;

}

.journey-year{

width:70px;

height:70px;

font-size:18px;

margin-bottom:20px;

}

.journey-content{

margin-left:0;

}

}