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

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

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

:root{

    --bg:#050816;
    --bg2:#0b1226;

    --white:#ffffff;
    --text:#b8c3d9;

    --primary:#7c3aed;
    --secondary:#2563eb;
    --cyan:#06b6d4;
    --green:#22c55e;
    --yellow:#facc15;
    --pink:#ec4899;

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

    --shadow:
    0 20px 60px rgba(0,0,0,.45);

}

/* ==========================================================
   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);

overflow-x:hidden;

}

/* ==========================================================
   GLOBAL
========================================================== */

img{

display:block;
max-width:100%;

}

a{

text-decoration:none;
color:inherit;

}

button{

font-family:inherit;
cursor:pointer;

}

.container{

width:min(92%,1350px);

margin:auto;

}

section{

padding:120px 0;

position:relative;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#020617;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(

180deg,

var(--primary),

var(--secondary),

var(--cyan)

);

border-radius:50px;

}

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

.loader{

position:fixed;

inset:0;

background:#050816;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

z-index:99999;

transition:.8s;

}

.loader-logo{

display:flex;

align-items:center;

gap:20px;

margin-bottom:35px;

}

.pm{

width:90px;

height:90px;

display:flex;

justify-content:center;

align-items:center;

border-radius:25px;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

font-family:'Space Grotesk';

font-size:30px;

font-weight:700;

color:#fff;

box-shadow:

0 20px 50px rgba(37,99,235,.35);

}

.loader-logo h2{

font-family:'Space Grotesk';

font-size:42px;

color:white;

letter-spacing:4px;

}

.loading{

width:260px;

height:6px;

background:#16203d;

border-radius:50px;

overflow:hidden;

}

.loading span{

display:block;

width:0;

height:100%;

background:

linear-gradient(

90deg,

var(--primary),

var(--secondary),

var(--cyan)

);

animation:loading 2.8s forwards;

}

@keyframes loading{

100%{

width:100%;

}

}

/* ==========================================================
   CURSOR
========================================================== */

.cursor{

position:fixed;

width:260px;

height:260px;

border-radius:50%;

pointer-events:none;

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

background:

radial-gradient(

circle,

rgba(124,58,237,.18),

transparent 70%

);

filter:blur(12px);

z-index:-1;

}

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

.bg{

position:fixed;

inset:0;

overflow:hidden;

z-index:-5;

background:

radial-gradient(

circle at top,

#111827,

#050816 65%

);

}

.blob{

position:absolute;

border-radius:50%;

filter:blur(120px);

opacity:.45;

animation:blob 18s infinite ease-in-out;

}

.b1{

width:500px;

height:500px;

background:#7c3aed;

left:-120px;

top:-120px;

}

.b2{

width:600px;

height:600px;

background:#2563eb;

right:-180px;

top:10%;

animation-delay:4s;

}

.b3{

width:450px;

height:450px;

background:#06b6d4;

bottom:-120px;

left:35%;

animation-delay:8s;

}

@keyframes blob{

50%{

transform:

translateY(-60px)

scale(1.2);

}

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

padding:22px 0;

z-index:999;

backdrop-filter:blur(20px);

background:

rgba(5,8,22,.45);

border-bottom:

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

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

position:relative;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo-box{

width:58px;

height:58px;

display:flex;

justify-content:center;

align-items:center;

border-radius:18px;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

font-family:'Space Grotesk';

font-size:22px;

font-weight:700;

color:white;

box-shadow:

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

}

.logo h3{

font-family:'Space Grotesk';

font-size:20px;

color:white;

}

.logo p{

font-size:12px;

color:var(--cyan);

letter-spacing:2px;

text-transform:uppercase;

}

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

nav{

display:flex;

gap:35px;

}

nav a{

position:relative;

font-weight:600;

transition:.3s;

}

nav a:hover{

color:white;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:

linear-gradient(

90deg,

var(--primary),

var(--cyan)

);

transition:.3s;

}

nav a:hover::after{

width:100%;

}

/* ==========================================================
   RESUME BUTTON
========================================================== */

.resume{

display:flex;

align-items:center;

gap:10px;

padding:14px 28px;

border-radius:50px;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:white;

font-weight:600;

transition:.35s;

box-shadow:

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

}

.resume:hover{

transform:

translateY(-5px);

}

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

#home{

min-height:100vh;

display:flex;

align-items:center;

padding-top:170px;

position:relative;

overflow:hidden;

}

.hero{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:80px;

}

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

.hero-left{

position:relative;

z-index:10;

animation:fadeUp 1s ease;

}

.tag{

display:inline-flex;

align-items:center;

gap:12px;

padding:12px 24px;

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

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

border-radius:50px;

backdrop-filter:blur(20px);

color:#fff;

font-size:13px;

font-weight:600;

letter-spacing:2px;

margin-bottom:35px;

}

.dot{

width:10px;

height:10px;

background:var(--green);

border-radius:50%;

box-shadow:0 0 15px var(--green);

animation:pulse 2s infinite;

}

@keyframes pulse{

50%{

transform:scale(1.5);

opacity:.4;

}

}

.hero-left h1{

font-family:'Space Grotesk',sans-serif;

font-size:88px;

line-height:1;

color:#fff;

margin-bottom:15px;

}

.hero-left h2{

font-size:34px;

font-weight:700;

background:linear-gradient(

90deg,

var(--primary),

var(--cyan)

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:18px;

}

.hero-left h3{

font-size:24px;

font-weight:500;

color:#fff;

margin-bottom:30px;

}

.hero-left p{

font-size:18px;

line-height:2;

max-width:650px;

color:var(--text);

margin-bottom:45px;

}

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

.buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-bottom:45px;

}

.btn{

padding:18px 35px;

border-radius:60px;

font-weight:700;

font-size:15px;

display:flex;

align-items:center;

justify-content:center;

transition:.35s;

position:relative;

overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transition:.8s;

}

.btn:hover::before{

left:120%;

}

.primary{

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:#fff;

box-shadow:

0 20px 45px rgba(37,99,235,.35);

}

.primary:hover{

transform:translateY(-7px);

}

.secondary{

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

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

color:#fff;

}

.secondary:hover{

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

transform:translateY(-7px);

}

.outline{

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

color:var(--cyan);

}

.outline:hover{

background:var(--cyan);

color:#050816;

transform:translateY(-7px);

}

/* ==========================================================
   TECH TAGS
========================================================== */

.tech{

display:flex;

gap:16px;

flex-wrap:wrap;

}

.tech span{

padding:12px 20px;

border-radius:40px;

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

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

color:#fff;

font-size:14px;

font-weight:600;

transition:.35s;

backdrop-filter:blur(15px);

}

.tech span:hover{

transform:translateY(-6px);

background:linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

}

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

.hero-right{

position:relative;

display:flex;

justify-content:center;

align-items:center;

min-height:720px;

}

/* ==========================================================
   GLOW
========================================================== */

.glow{

position:absolute;

width:520px;

height:520px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(124,58,237,.45),

rgba(37,99,235,.25),

transparent 70%

);

filter:blur(40px);

animation:glow 6s ease-in-out infinite;

}

@keyframes glow{

50%{

transform:scale(1.12);

}

}

/* ==========================================================
   PHOTO
========================================================== */

.photo{

position:relative;

width:430px;

height:560px;

border-radius:40px;

overflow:hidden;

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

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

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

z-index:5;

transition:.5s;

}

.photo:hover{

transform:translateY(-12px) rotate(-2deg);

}

.photo img{

width:100%;

height:100%;

object-fit:cover;

}

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

.float{

position:absolute;

display:flex;

align-items:center;

gap:10px;

padding:15px 22px;

border-radius:18px;

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

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

backdrop-filter:blur(18px);

color:#fff;

font-size:15px;

font-weight:600;

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

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

z-index:10;

}

.float i{

font-size:20px;

color:var(--cyan);

}

.excel{

top:50px;

left:-60px;

}

.pbi{

top:160px;

right:-60px;

animation-delay:1s;

}

.sql{

bottom:180px;

left:-70px;

animation-delay:2s;

}

.sap{

bottom:70px;

right:-10px;

animation-delay:3s;

}

.ai{

top:48%;

right:-90px;

animation-delay:4s;

}

@keyframes float{

50%{

transform:translateY(-15px);

}

}

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

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

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

@media(max-width:1200px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.hero-left{

order:2;

}

.hero-right{

order:1;

min-height:520px;

}

.hero-left p{

margin:auto auto 40px;

}

.buttons,

.tech{

justify-content:center;

}

.float{

display:none;

}

}

@media(max-width:768px){

.hero-left h1{

font-size:54px;

}

.hero-left h2{

font-size:26px;

}

.hero-left h3{

font-size:20px;

}

.hero-left p{

font-size:16px;

}

.photo{

width:310px;

height:410px;

}

.glow{

width:340px;

height:340px;

}

.buttons{

flex-direction:column;

}

.btn{

width:100%;

}

}

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

.section-title{

text-align:center;

margin-bottom:80px;

}

.section-title > span{

display:inline-block;

padding:10px 22px;

border-radius:40px;

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

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

color:var(--cyan);

font-size:13px;

font-weight:700;

letter-spacing:3px;

margin-bottom:20px;

text-transform:uppercase;

}

.section-title h2{

font-family:'Space Grotesk',sans-serif;

font-size:56px;

color:#fff;

margin-bottom:20px;

}

.section-title p{

max-width:750px;

margin:auto;

line-height:1.9;

font-size:18px;

color:var(--text);

}

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

.about{

position:relative;

}

.snapshot-grid{

display:grid;

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

gap:30px;

margin-bottom:70px;

}

.snapshot-card{

padding:35px;

border-radius:30px;

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

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

backdrop-filter:blur(20px);

transition:.35s;

text-align:center;

}

.snapshot-card:hover{

transform:translateY(-10px);

border-color:var(--cyan);

box-shadow:0 25px 60px rgba(6,182,212,.18);

}

.snapshot-card .icon{

width:80px;

height:80px;

margin:auto;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

font-size:28px;

color:#fff;

margin-bottom:25px;

}

.snapshot-card h3{

font-size:16px;

color:var(--cyan);

margin-bottom:10px;

}

.snapshot-card h4{

font-size:22px;

color:#fff;

margin-bottom:10px;

}

.snapshot-card p{

color:var(--text);

}

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

.about-content{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:60px;

align-items:start;

}

.about-left h2{

font-size:42px;

font-family:'Space Grotesk';

color:#fff;

margin-bottom:25px;

}

.about-left p{

font-size:18px;

line-height:2;

margin-bottom:40px;

}

/* ==========================================================
   SERVICE GRID
========================================================== */

.service-grid{

display:grid;

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

gap:20px;

}

.service{

display:flex;

align-items:center;

gap:18px;

padding:20px;

border-radius:20px;

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

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

transition:.35s;

}

.service:hover{

transform:translateX(10px);

background:linear-gradient(

135deg,

rgba(124,58,237,.20),

rgba(37,99,235,.20)

);

}

.service i{

font-size:24px;

color:var(--cyan);

}

.service span{

font-size:16px;

font-weight:600;

color:#fff;

}

/* ==========================================================
   GLASS CARD
========================================================== */

.glass-card{

padding:35px;

margin-bottom:30px;

border-radius:30px;

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

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

backdrop-filter:blur(20px);

transition:.35s;

}

.glass-card:hover{

transform:translateY(-8px);

}

.glass-card span{

display:inline-block;

margin-bottom:18px;

color:var(--cyan);

font-size:13px;

letter-spacing:3px;

font-weight:700;

}

.glass-card h3{

font-size:30px;

color:#fff;

margin-bottom:18px;

font-family:'Space Grotesk';

}

.glass-card p{

line-height:1.9;

font-size:16px;

}

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

.experience{

position:relative;

}

.timeline{

position:relative;

max-width:1100px;

margin:auto;

padding-left:50px;

}

.timeline::before{

content:"";

position:absolute;

left:14px;

top:0;

width:4px;

height:100%;

border-radius:50px;

background:linear-gradient(

180deg,

var(--primary),

var(--secondary),

var(--cyan)

);

}

.timeline-item{

position:relative;

margin-bottom:70px;

}

.timeline-dot{

position:absolute;

left:-44px;

top:40px;

width:30px;

height:30px;

border-radius:50%;

background:var(--cyan);

border:5px solid #050816;

box-shadow:0 0 20px var(--cyan);

}

.timeline-card{

padding:40px;

border-radius:30px;

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

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

transition:.35s;

backdrop-filter:blur(20px);

}

.timeline-card:hover{

transform:translateX(12px);

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

}

.timeline-card .year{

display:inline-block;

margin-bottom:15px;

padding:8px 16px;

border-radius:30px;

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

color:var(--cyan);

font-size:13px;

font-weight:700;

}

.timeline-card h3{

font-size:34px;

font-family:'Space Grotesk';

color:#fff;

margin-bottom:8px;

}

.timeline-card h4{

font-size:20px;

color:var(--primary);

margin-bottom:20px;

}

.timeline-card p{

line-height:1.9;

margin-bottom:25px;

}

.stack{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.stack span{

padding:10px 18px;

border-radius:30px;

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

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

font-size:14px;

color:#fff;

}

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

@media(max-width:991px){

.snapshot-grid{

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

}

.about-content{

grid-template-columns:1fr;

}

.service-grid{

grid-template-columns:1fr;

}

.timeline{

padding-left:35px;

}

}

@media(max-width:768px){

.section-title h2{

font-size:38px;

}

.snapshot-grid{

grid-template-columns:1fr;

}

.timeline{

padding-left:25px;

}

.timeline-dot{

left:-20px;

width:20px;

height:20px;

}

.timeline-card{

padding:25px;

}

.timeline-card h3{

font-size:26px;

}

}

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

.skills{

position:relative;

}

.skills-grid{

display:grid;

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

gap:30px;

}

.skill-card{

padding:35px;

border-radius:30px;

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

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

backdrop-filter:blur(18px);

transition:.4s;

overflow:hidden;

position:relative;

}

.skill-card::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.12),

transparent

);

transition:.8s;

}

.skill-card:hover::before{

left:120%;

}

.skill-card:hover{

transform:translateY(-12px);

border-color:var(--cyan);

box-shadow:

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

}

.skill-icon{

width:80px;

height:80px;

display:flex;

justify-content:center;

align-items:center;

border-radius:22px;

margin-bottom:30px;

font-size:30px;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:white;

}

.skill-card h3{

font-size:24px;

font-family:'Space Grotesk';

margin-bottom:18px;

color:white;

}

.skill-card p{

line-height:1.9;

font-size:15px;

}

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

.education{

position:relative;

}

.education-wrapper{

max-width:900px;

margin:auto;

}

.education-card{

display:flex;

align-items:center;

gap:35px;

padding:45px;

border-radius:35px;

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

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

transition:.4s;

}

.education-card:hover{

transform:translateY(-10px);

box-shadow:

0 25px 70px rgba(37,99,235,.18);

}

.edu-icon{

width:110px;

height:110px;

border-radius:28px;

display:flex;

justify-content:center;

align-items:center;

font-size:42px;

color:white;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

}

.edu-details span{

color:var(--cyan);

font-weight:700;

letter-spacing:3px;

font-size:13px;

}

.edu-details h3{

margin-top:18px;

font-size:34px;

font-family:'Space Grotesk';

color:white;

}

.edu-details h4{

margin:12px 0;

font-size:22px;

color:var(--primary);

}

.edu-details p{

line-height:1.9;

}

/* ==========================================================
   CERTIFICATES
========================================================== */

.certificate-grid{

display:grid;

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

gap:30px;

}

.certificate-card{

padding:35px;

border-radius:30px;

text-align:center;

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

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

transition:.35s;

}

.certificate-card:hover{

transform:translateY(-10px);

background:

linear-gradient(

135deg,

rgba(124,58,237,.20),

rgba(37,99,235,.20)

);

}

.certificate-card i{

font-size:42px;

margin-bottom:20px;

color:var(--yellow);

}

.certificate-card h3{

font-size:24px;

color:white;

margin-bottom:12px;

font-family:'Space Grotesk';

}

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

.creator{

position:relative;

}

.creator-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.creator-left img{

width:180px;

margin-bottom:30px;

}

.creator-left h3{

font-size:42px;

font-family:'Space Grotesk';

color:white;

margin-bottom:25px;

}

.creator-left p{

font-size:17px;

line-height:2;

margin-bottom:35px;

}

.creator-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.creator-stats{

display:grid;

grid-template-columns:1fr;

gap:30px;

}

.creator-stats div{

padding:40px;

border-radius:30px;

text-align:center;

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

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

transition:.35s;

}

.creator-stats div:hover{

transform:translateY(-10px);

}

.creator-stats h2{

font-size:54px;

font-family:'Space Grotesk';

color:white;

margin-bottom:10px;

}

.creator-stats p{

font-size:17px;

}

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

@media(max-width:1100px){

.skills-grid{

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

}

.creator-wrapper{

grid-template-columns:1fr;

}

.certificate-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.skills-grid{

grid-template-columns:1fr;

}

.education-card{

flex-direction:column;

text-align:center;

}

.creator-left{

text-align:center;

}

.creator-left img{

margin:auto auto 30px;

}

.creator-buttons{

justify-content:center;

}

}

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

.contact{
    position:relative;
}

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:start;
}


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

.contact-left{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.contact-card{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 20px;
    min-height:78px;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    text-decoration:none;
    color:inherit;
    transition:transform .3s ease,
               border-color .3s ease,
               box-shadow .3s ease,
               background .3s ease;
}

.contact-card:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.07);
    border-color:#06b6d4;
    box-shadow:0 12px 30px rgba(6,182,212,.15);
}


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

.contact-icon{
    width:48px;
    height:48px;
    border-radius:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#7c3aed,#2563eb);
    flex-shrink:0;
}

.contact-icon i{
    font-size:19px;
    color:#fff;
}


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

.contact-info{
    flex:1;
    min-width:0;
}

.contact-info h3{
    font-size:17px;
    font-weight:700;
    color:#fff;
    margin:0 0 4px;
}

.contact-info p{
    font-size:13px;
    line-height:1.5;
    color:#9ca3af;
    margin:0;
    overflow-wrap:anywhere;
}


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

.contact-card > .fa-chevron-right{
    font-size:14px;
    color:#6b7280;
    flex-shrink:0;
    transition:.3s;
}

.contact-card:hover > .fa-chevron-right{
    transform:translateX(4px);
    color:#06b6d4;
}


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

.contact-right{
    width:100%;
    padding:35px;
    border-radius:24px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

#google-form{
    width:100%;
}

.input-box{
    width:100%;
    margin-bottom:18px;
}


/* ==========================================================
   INPUT + TEXTAREA + SELECT
========================================================== */

.input-box input,
.input-box textarea,
.input-box select{
    width:100%;
    box-sizing:border-box;
    padding:16px 18px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    outline:none;
    font-size:15px;
    font-family:'Inter',sans-serif;
    color:#fff;
    transition:.3s;
}

.input-box textarea{
    min-height:130px;
    resize:vertical;
}

.input-box select{
    cursor:pointer;
    appearance:auto;
}


/* ==========================================================
   INPUT FOCUS
========================================================== */

.input-box input:focus,
.input-box textarea:focus,
.input-box select:focus{
    border-color:#06b6d4;
    box-shadow:0 0 20px rgba(6,182,212,.15);
}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.input-box input::placeholder,
.input-box textarea::placeholder{
    color:#9ca3af;
}


/* ==========================================================
   SELECT OPTIONS
========================================================== */

.input-box select option{
    background:#111827;
    color:#fff;
}


/* ==========================================================
   SEND MESSAGE BUTTON
========================================================== */

.contact-right .btn{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    cursor:pointer;
}


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

@media (max-width:992px){

    .contact-wrapper{
        grid-template-columns:1fr;
        gap:35px;
    }

    .contact-left{
        width:100%;
    }

    .contact-right{
        width:100%;
        padding:30px;
    }

}


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

@media (max-width:576px){

    .contact-wrapper{
        gap:28px;
    }

    .contact-left{
        gap:12px;
    }

    .contact-card{
        min-height:70px;
        padding:13px 15px;
        gap:13px;
        border-radius:14px;
    }

    .contact-icon{
        width:44px;
        height:44px;
        border-radius:12px;
    }

    .contact-icon i{
        font-size:17px;
    }

    .contact-info h3{
        font-size:15px;
    }

    .contact-info p{
        font-size:12px;
    }

    .contact-card > .fa-chevron-right{
        font-size:12px;
    }

    .contact-right{
        padding:20px;
        border-radius:18px;
    }

    .input-box{
        margin-bottom:14px;
    }

    .input-box input,
    .input-box textarea,
    .input-box select{
        padding:14px 15px;
        border-radius:12px;
        font-size:14px;
    }

    .input-box textarea{
        min-height:120px;
    }

    .contact-right .btn{
        min-height:48px;
    }

}

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

footer{

padding:70px 0 30px;

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

background:#030712;

}

.footer-wrapper{

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

flex-wrap:wrap;

margin-bottom:40px;

}

.footer-logo{

display:flex;

align-items:center;

gap:18px;

margin-bottom:20px;

}

.footer-icon{

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

border-radius:18px;

font-family:'Space Grotesk';

font-size:22px;

font-weight:700;

color:#fff;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

}

.footer-left h3{

font-size:24px;

font-family:'Space Grotesk';

color:#fff;

}

.footer-left p{

line-height:1.8;

}

.footer-right{

display:flex;

gap:28px;

flex-wrap:wrap;

}

.footer-right a{

transition:.3s;

font-weight:600;

}

.footer-right a:hover{

color:var(--cyan);

}

.copyright{

text-align:center;

padding-top:30px;

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

font-size:15px;

color:#94a3b8;

}

.copyright strong{

color:#fff;

}

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

.scroll-top{

position:fixed;

right:30px;

bottom:30px;

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

border:none;

border-radius:50%;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:#fff;

font-size:20px;

cursor:pointer;

box-shadow:

0 20px 45px rgba(37,99,235,.30);

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.35s;

z-index:999;

}

.scroll-top.active{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.scroll-top:hover{

transform:translateY(-8px);

}

/* ==========================================================
   REVEAL ANIMATION
========================================================== */

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

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

@media(max-width:1100px){

.contact-wrapper{

grid-template-columns:1fr;

}

.footer-wrapper{

flex-direction:column;

text-align:center;

}

.footer-right{

justify-content:center;

}

}

@media(max-width:768px){

.contact-right{

padding:25px;

}

.contact-card{

flex-direction:column;

text-align:center;

}

.contact-card i{

margin-bottom:10px;

}

.footer-logo{

justify-content:center;

}

.scroll-top{

width:50px;

height:50px;

right:20px;

bottom:20px;

}

}

/* ==========================================================
   PARTICLES
========================================================== */

.particle{

position:fixed;

width:6px;

height:6px;

border-radius:50%;

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

pointer-events:none;

animation:particleFloat linear infinite;

z-index:-2;

}

@keyframes particleFloat{

0%{

transform:translateY(100vh) scale(0);

opacity:0;

}

20%{

opacity:1;

transform:scale(1);

}

100%{

transform:translateY(-120vh) scale(0);

opacity:0;

}

}

/* ==========================================================
   RIPPLE EFFECT
========================================================== */

.btn{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

transform:scale(0);

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

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

/* ==========================================================
   SCROLL PROGRESS BAR
========================================================== */

.scroll-progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

z-index:99999;

background:

linear-gradient(

90deg,

var(--primary),

var(--secondary),

var(--cyan)

);

box-shadow:

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

}

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

header.active{

padding:15px 0;

background:rgba(3,7,18,.85);

backdrop-filter:blur(30px);

box-shadow:

0 15px 45px rgba(0,0,0,.25);

}

/* ==========================================================
   ACTIVE NAV
========================================================== */

nav a.active{

color:white;

}

nav a.active::after{

width:100%;

}

/* ==========================================================
   GLASS HOVER
========================================================== */

.snapshot-card,

.skill-card,

.timeline-card,

.education-card,

.certificate-card,

.contact-card,

.glass-card{

position:relative;

overflow:hidden;

}

.snapshot-card::after,

.skill-card::after,

.timeline-card::after,

.education-card::after,

.certificate-card::after,

.contact-card::after,

.glass-card::after{

content:"";

position:absolute;

top:-100%;

left:-100%;

width:220%;

height:220%;

background:

linear-gradient(

45deg,

transparent,

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

transparent

);

transform:rotate(25deg);

transition:1s;

}

.snapshot-card:hover::after,

.skill-card:hover::after,

.timeline-card:hover::after,

.education-card:hover::after,

.certificate-card:hover::after,

.contact-card:hover::after,

.glass-card:hover::after{

top:100%;

left:100%;

}

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

.photo{

cursor:pointer;

}

.photo img{

transition:.6s;

}

.photo:hover img{

transform:scale(1.08);

}

/* ==========================================================
   SOCIAL ICON ANIMATION
========================================================== */

.contact-card i,

.skill-icon,

.icon,

.edu-icon,

.footer-icon{

transition:.35s;

}

.contact-card:hover i,

.skill-card:hover .skill-icon,

.snapshot-card:hover .icon,

.education-card:hover .edu-icon{

transform:rotate(-8deg) scale(1.1);

}

/* ==========================================================
   INPUT AUTOFILL
========================================================== */

input:-webkit-autofill,

textarea:-webkit-autofill{

-webkit-text-fill-color:#fff;

transition:background-color 9999s;

}

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

::selection{

background:var(--primary);

color:#fff;

}

/* ==========================================================
   FOCUS
========================================================== */

a:focus,

button:focus,

input:focus,

textarea:focus{

outline:none;

}

/* ==========================================================
   SMOOTH TRANSITION
========================================================== */

*{

transition:

background-color .3s,

border-color .3s,

color .3s,

box-shadow .3s;

}

/* ==========================================================
   MOBILE MENU PLACEHOLDER
========================================================== */

.mobile-toggle{

display:none;

font-size:28px;

color:white;

cursor:pointer;

}

/* ==========================================================
   LARGE SCREEN
========================================================== */

@media(min-width:1600px){

.container{

max-width:1500px;

}

.hero-left h1{

font-size:110px;

}

.photo{

width:480px;

height:620px;

}

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

.mobile-toggle{

display:flex;

align-items:center;

justify-content:center;

width:50px;

height:50px;

font-size:26px;

color:#fff;

cursor:pointer;

z-index:1001;

}

.resume{

display:none;

}

nav{

position:fixed;

top:90px;

left:-100%;

width:100%;

height:calc(100vh - 90px);

background:#050816;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:35px;

transition:left .4s ease;

z-index:1000;

}

nav.show{

left:0;

}

nav a{

font-size:22px;

}

}

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

@media(max-width:576px){

.container{

width:92%;

}

section{

padding:70px 0;

}

.section-title h2{

font-size:30px;

}

.hero-left h1{

font-size:42px;

}

.hero-left h2{

font-size:22px;

}

.hero-left h3{

font-size:18px;

}

.hero-left p{

font-size:15px;

line-height:1.8;

}

.tag{

font-size:11px;

padding:10px 18px;

}

.photo{

width:270px;

height:360px;

}

.tech{

gap:10px;

}

.tech span{

font-size:12px;

padding:10px 16px;

}

.footer-right{

gap:15px;

font-size:14px;

}

.copyright{

font-size:13px;

}

}

.contact-right select{

width:100%;

padding:18px 20px;

border-radius:14px;

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

background:#111827;

color:#fff;

font-family:inherit;

font-size:15px;

outline:none;

cursor:pointer;

transition:.3s;

}

.contact-right select:focus{

border-color:#06b6d4;

box-shadow:0 0 0 3px rgba(6,182,212,.1);

}

.contact-right select option{

background:#111827;

color:#fff;

}

/* ===== FINAL GOOGLE FORM OVERRIDE ===== */

#contact .contact-wrapper{
    display:grid !important;
    grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr) !important;
    gap:32px !important;
    align-items:stretch !important;
    max-width:1120px !important;
    margin:0 auto !important;
}

#contact .contact-left,
#contact .contact-right{
    width:100% !important;
    box-sizing:border-box !important;
}

#contact .contact-right{
    position:relative !important;
    overflow:hidden !important;
    padding:30px !important;
    border-radius:24px !important;
    background:
        linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.045)) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    box-shadow:0 20px 55px rgba(0,0,0,.28), 0 0 35px rgba(6,182,212,.08) !important;
}

#contact .contact-right::before{
    content:"";
    position:absolute;
    inset:-1px;
    background:
        radial-gradient(circle at 18% 0%,rgba(6,182,212,.18),transparent 32%),
        radial-gradient(circle at 100% 22%,rgba(236,72,153,.18),transparent 30%);
    pointer-events:none;
    z-index:-1;
}

#contact .contact-card{
    --accent:#06b6d4;
    --accent-rgb:6,182,212;
    position:relative !important;
    isolation:isolate !important;
    flex-direction:row !important;
    text-align:left !important;
    min-height:82px !important;
    padding:18px 20px !important;
    border-radius:18px !important;
    background:
        linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.045)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    overflow:hidden !important;
    box-shadow:0 12px 32px rgba(0,0,0,.18) !important;
}

#contact .contact-card:nth-child(2){ --accent:#a855f7; --accent-rgb:168,85,247; }
#contact .contact-card:nth-child(3){ --accent:#2563eb; --accent-rgb:37,99,235; }
#contact .contact-card:nth-child(4){ --accent:#ec4899; --accent-rgb:236,72,153; }
#contact .contact-card:nth-child(5){ --accent:#ef4444; --accent-rgb:239,68,68; }

#contact .contact-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(255,255,255,.08),transparent 38%),
        radial-gradient(circle at 0% 50%,rgba(var(--accent-rgb),.34),transparent 42%);
    opacity:.45;
    transition:.35s ease;
    z-index:-1;
}

#contact .contact-card:hover{
    transform:translateY(-4px) !important;
    border-color:rgba(var(--accent-rgb),.72) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.24), 0 0 26px rgba(var(--accent-rgb),.26) !important;
}

#contact .contact-card:hover::before{
    opacity:.78;
}

#contact .contact-card i{
    margin-bottom:0 !important;
}

#contact .contact-icon{
    background:linear-gradient(135deg,var(--accent),#7c3aed) !important;
    box-shadow:0 10px 24px rgba(var(--accent-rgb),.34) !important;
}

#contact .contact-info h3{
    font-size:16px !important;
}

#contact .contact-info p{
    color:#b8c3d9 !important;
}

#contact #google-form{
    display:block !important;
    width:100% !important;
}

#contact #google-form .input-box{
    display:block !important;
    width:100% !important;
    margin:0 0 16px 0 !important;
}

#contact #google-form input,
#contact #google-form select,
#contact #google-form textarea{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:16px 18px !important;
    margin:0 !important;

    background:rgba(4,10,24,.58) !important;
    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:14px !important;

    color:#fff !important;
    font-family:'Inter',sans-serif !important;
    font-size:15px !important;
    line-height:1.45 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;

    outline:none !important;
}

#contact #google-form textarea{
    min-height:130px !important;
    resize:vertical !important;
}

#contact #google-form input::placeholder,
#contact #google-form textarea::placeholder{
    color:#9ca3af !important;
}

#contact #google-form select{
    cursor:pointer !important;
    color-scheme:dark !important;
}

#contact #google-form select option{
    background:#111827 !important;
    color:#fff !important;
}

#contact #google-form input:focus,
#contact #google-form select:focus,
#contact #google-form textarea:focus{
    border-color:#06b6d4 !important;
    background:rgba(5,12,30,.74) !important;
    box-shadow:0 0 0 3px rgba(6,182,212,.14), 0 0 24px rgba(6,182,212,.14) !important;
}

#contact #submit-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:52px !important;
    margin:0 !important;
    border:none !important;
    cursor:pointer !important;
    background:linear-gradient(135deg,#7c3aed,#2563eb,#06b6d4) !important;
    box-shadow:0 16px 34px rgba(37,99,235,.30) !important;
}

#contact #submit-btn:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 20px 42px rgba(6,182,212,.26) !important;
}

#contact #submit-btn:disabled{
    cursor:not-allowed !important;
    opacity:.72 !important;
    transform:none !important;
}

#contact .form-status{
    min-height:22px !important;
    margin:14px 0 0 !important;
    color:#22d3ee !important;
    font-size:14px !important;
    font-weight:600 !important;
    text-align:center !important;
}

#contact .form-status.error{
    color:#f87171 !important;
}

#contact .form-status.success{
    color:#4ade80 !important;
}

/* TABLET & MOBILE */

@media (max-width:860px){

    #contact .contact-wrapper{
        grid-template-columns:1fr !important;
        gap:30px !important;
    }

    #contact .contact-right{
        padding:25px !important;
    }
}

@media (max-width:576px){

    #contact .contact-right{
        padding:18px !important;
        border-radius:18px !important;
    }

    #contact #google-form input,
    #contact #google-form select,
    #contact #google-form textarea{
        padding:14px 15px !important;
        font-size:14px !important;
    }
}

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