/* =========================================================
                PRATEEK PORTFOLIO V3
                STYLE.CSS
========================================================= */

/* 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;
scroll-behavior:smooth;
}

html{
scroll-behavior:smooth;
}

body{

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

overflow-x:hidden;

background:var(--bg);

color:var(--text);

transition:.4s;

}

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

:root{

--primary:#3B82F6;

--primary-dark:#2563EB;

--bg:#07111F;

--bg2:#0F172A;

--card:#111C2F;

--text:#FFFFFF;

--text-light:#94A3B8;

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

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

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

--radius:20px;

}

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

body.light{

--bg:#F8FAFC;

--bg2:#FFFFFF;

--card:#FFFFFF;

--text:#111827;

--text-light:#4B5563;

--border:#E5E7EB;

--glass:rgba(255,255,255,.8);

}

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

::selection{

background:var(--primary);

color:#fff;

}

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

::-webkit-scrollbar{

width:9px;

}

::-webkit-scrollbar-track{

background:var(--bg);

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

/* =========================================================
                CONTAINER
========================================================= */

.container{

width:90%;

max-width:1300px;

margin:auto;

}

/* =========================================================
                LINKS
========================================================= */

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

img{

display:block;

max-width:100%;

}

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

.loader{
display:none;
}

position:fixed;

inset:0;

background:var(--bg);

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader-circle{

width:70px;

height:70px;

border-radius:50%;

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

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

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

.bg-gradient{

position:fixed;

width:100%;

height:100%;

background:
radial-gradient(circle at top left,#2563eb33,transparent 40%),
radial-gradient(circle at bottom right,#7c3aed33,transparent 40%);

z-index:-5;

}

.blur{

position:fixed;

border-radius:50%;

filter:blur(120px);

opacity:.35;

z-index:-4;

}

.blur-one{

width:280px;

height:280px;

background:#2563EB;

top:-60px;

left:-60px;

}

.blur-two{

width:340px;

height:340px;

background:#9333EA;

bottom:-120px;

right:-120px;

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

padding:22px 0;

backdrop-filter:blur(18px);

background:rgba(7,17,31,.45);

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

transition:.35s;

}

.navbar{

width:90%;

max-width:1300px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

}

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

.logo{

font-size:34px;

font-weight:800;

color:var(--primary);

letter-spacing:2px;

transition:.35s;

}

.logo:hover{

transform:scale(1.08);

}

/* =========================================================
                NAVIGATION
========================================================= */

.nav-links{

display:flex;

align-items:center;

gap:35px;

}

.nav-links a{

position:relative;

font-size:16px;

font-weight:500;

color:var(--text);

transition:.35s;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.35s;

}

.nav-links a:hover::after,

.nav-links .active::after{

width:100%;

}

/* =========================================================
                RIGHT SIDE
========================================================= */

.nav-right{

display:flex;

align-items:center;

gap:18px;

}

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

.theme-btn{

width:48px;

height:48px;

border:none;

border-radius:50%;

cursor:pointer;

background:var(--glass);

color:var(--text);

font-size:18px;

transition:.35s;

backdrop-filter:blur(20px);

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

}

.theme-btn:hover{

background:var(--primary);

color:#fff;

transform:rotate(180deg);

}

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

.resume-btn{

padding:12px 26px;

background:var(--primary);

color:#fff;

border-radius:40px;

font-weight:600;

transition:.35s;

box-shadow:0 10px 30px rgba(59,130,246,.35);

}

.resume-btn:hover{

transform:translateY(-4px);

background:var(--primary-dark);

}

/* =========================================================
                MENU BUTTON
========================================================= */

.menu-btn{

display:none;

width:48px;

height:48px;

border:none;

border-radius:50%;

background:var(--glass);

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

color:var(--text);

cursor:pointer;

font-size:20px;

transition:.35s;

}

.menu-btn:hover{

background:var(--primary);

color:#fff;

}

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

.hero{

min-height:100vh;

display:flex;

justify-content:space-between;

align-items:center;

gap:80px;

padding:150px 8% 80px;

}

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

.hero-left{

flex:1;

}

.hello{

font-size:20px;

font-weight:500;

color:var(--primary);

margin-bottom:15px;

}

.hero-left h1{

font-size:74px;

line-height:1.1;

font-weight:800;

margin-bottom:18px;

}

.hero-left h1 span{

color:var(--primary);

}

.hero-left h2{

font-size:34px;

font-weight:600;

height:48px;

margin-bottom:22px;

color:var(--text-light);

}

.hero-description{

font-size:18px;

line-height:34px;

max-width:650px;

color:var(--text-light);

margin-bottom:35px;

}

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

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:40px;

}

.primary-btn{

padding:15px 34px;

background:var(--primary);

color:#fff;

border-radius:50px;

font-weight:600;

transition:.35s;

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

}

.primary-btn:hover{

transform:translateY(-5px);

}

.secondary-btn{

padding:15px 34px;

border-radius:50px;

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

color:var(--primary);

font-weight:600;

transition:.35s;

}

.secondary-btn:hover{

background:var(--primary);

color:#fff;

}

/* =========================================================
                SOCIAL ICONS
========================================================= */

.social-links{

display:flex;

gap:18px;

}

.social-links a{

width:54px;

height:54px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--glass);

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

font-size:22px;

transition:.35s;

}

.social-links a:hover{

background:var(--primary);

color:#fff;

transform:translateY(-6px);

}

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

.hero-right{

flex:1;

display:flex;

justify-content:center;

}

.profile-card{

position:relative;

width:420px;

height:420px;

display:flex;

justify-content:center;

align-items:center;

}

.profile-border{

width:340px;

height:340px;

border-radius:50%;

overflow:hidden;

padding:8px;

background:linear-gradient(135deg,#2563EB,#7C3AED);

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

}

.profile-border img{

width:100%;

height:100%;

object-fit:cover;

border-radius:50%;

}

.floating-circle{

position:absolute;

border-radius:50%;

background:var(--primary);

opacity:.25;

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

}

.circle-1{

width:22px;

height:22px;

top:40px;

left:30px;

}

.circle-2{

width:18px;

height:18px;

bottom:60px;

right:35px;

}

.circle-3{

width:14px;

height:14px;

top:120px;

right:10px;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

}
/* =========================================================
                STATS SECTION
========================================================= */

.stats{

padding:100px 8%;

}

.stats .container{

display:grid;

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

gap:30px;

}

.stat-card{

background:var(--glass);

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

backdrop-filter:blur(20px);

border-radius:var(--radius);

padding:40px 30px;

text-align:center;

transition:.35s;

box-shadow:var(--shadow);

}

.stat-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

}

.stat-card i{

font-size:40px;

color:var(--primary);

margin-bottom:20px;

}

.stat-card h2{

font-size:42px;

margin-bottom:10px;

font-weight:700;

}

.stat-card p{

color:var(--text-light);

font-size:16px;

}

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

section{

padding:110px 8%;

}

.section-title{

font-size:46px;

font-weight:800;

text-align:center;

margin-bottom:15px;

}

.section-subtitle{

text-align:center;

font-size:18px;

color:var(--text-light);

margin-bottom:60px;

}

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

.skills-grid{

display:grid;

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

gap:28px;

}

.skill-card{

background:var(--glass);

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

border-radius:var(--radius);

padding:40px 20px;

text-align:center;

transition:.35s;

backdrop-filter:blur(20px);

}

.skill-card:hover{

transform:translateY(-12px);

background:var(--primary);

color:#fff;

}

.skill-card i{

font-size:48px;

margin-bottom:20px;

color:var(--primary);

transition:.35s;

}

.skill-card:hover i{

color:#fff;

}

.skill-card h3{

font-size:22px;

font-weight:600;

}

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

.projects-grid{

display:grid;

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

gap:35px;

}

.project-card{

background:var(--glass);

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

border-radius:24px;

padding:35px;

transition:.35s;

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

}

.project-card:hover{

transform:translateY(-12px);

border-color:var(--primary);

}

.project-card h3{

font-size:28px;

margin-bottom:18px;

}

.project-card p{

color:var(--text-light);

line-height:30px;

margin-bottom:25px;

}

.project-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:25px;

}

.project-tags span{

background:rgba(59,130,246,.15);

color:var(--primary);

padding:8px 16px;

border-radius:40px;

font-size:14px;

}

.project-card a{

display:inline-block;

font-weight:600;

color:var(--primary);

transition:.3s;

}

.project-card a:hover{

transform:translateX(8px);

}

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

.timeline{

display:grid;

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

gap:35px;

}

.timeline-card{

background:var(--glass);

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

border-radius:24px;

padding:35px;

transition:.35s;

box-shadow:var(--shadow);

}

.timeline-card:hover{

transform:translateY(-10px);

border-color:var(--primary);

}

.timeline-card span{

display:inline-block;

background:var(--primary);

color:#fff;

padding:8px 18px;

border-radius:40px;

margin-bottom:20px;

font-size:14px;

}

.timeline-card h3{

font-size:28px;

margin-bottom:10px;

}

.timeline-card h4{

font-size:20px;

color:var(--text-light);

margin-bottom:18px;

}

.timeline-card p{

line-height:30px;

color:var(--text-light);

}
/* =========================================================
                    CTA SECTION
========================================================= */

.cta{

padding:120px 8%;

}

.cta-box{

background:linear-gradient(135deg,#2563EB,#7C3AED);

padding:80px 60px;

border-radius:30px;

text-align:center;

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

}

.cta-box h2{

font-size:48px;

color:#fff;

margin-bottom:20px;

font-weight:700;

}

.cta-box p{

font-size:18px;

line-height:34px;

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

max-width:800px;

margin:auto;

margin-bottom:40px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.cta-buttons .primary-btn{

background:#fff;

color:#2563EB;

}

.cta-buttons .secondary-btn{

border:2px solid #fff;

color:#fff;

}

.cta-buttons .secondary-btn:hover{

background:#fff;

color:#2563EB;

}

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

footer{

padding:80px 8% 30px;

background:var(--bg2);

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

}

.footer-container{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

}

.footer-about h2{

font-size:32px;

margin-bottom:18px;

}

.footer-about p{

line-height:30px;

color:var(--text-light);

}

.footer-links h3,

.footer-social h3{

margin-bottom:20px;

font-size:22px;

}

.footer-links ul{

display:flex;

flex-direction:column;

gap:15px;

}

.footer-links a{

color:var(--text-light);

transition:.3s;

}

.footer-links a:hover{

color:var(--primary);

padding-left:8px;

}

.footer-social .social-icons{

display:flex;

gap:16px;

margin-top:15px;

}

.footer-social .social-icons a{

width:50px;

height:50px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:var(--glass);

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

transition:.35s;

font-size:20px;

}

.footer-social .social-icons a:hover{

background:var(--primary);

color:#fff;

transform:translateY(-6px);

}

.footer-bottom{

margin-top:50px;

padding-top:25px;

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

text-align:center;

color:var(--text-light);

}

/* =========================================================
                UTILITY CLASSES
========================================================= */

.hidden{

opacity:0;

transform:translateY(70px);

transition:1s;

}

.show{

opacity:1;

transform:translateY(0);

}

.text-center{

text-align:center;

}

.mt-50{

margin-top:50px;

}

.mb-50{

margin-bottom:50px;

}

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

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(50px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes floatAnimation{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

.profile-card{

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

}

.primary-btn,
.secondary-btn,
.resume-btn{

transition:.35s;

}

.primary-btn:hover,
.secondary-btn:hover,
.resume-btn:hover{

transform:translateY(-5px);

}

.section-title{

animation:fadeUp .8s ease;

}

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

animation:fadeUp .8s ease;

}

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

.glass{

background:var(--glass);

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

backdrop-filter:blur(18px);

}
.project-buttons .primary-btn{

background:#2563EB;

color:#fff !important;

display:inline-flex;

align-items:center;

justify-content:center;

min-width:160px;

min-height:52px;

font-weight:600;

}

/* =========================================================
                END OF STYLE.CSS
========================================================= */