/* ==========================================================
   SABYASACHI ROUT PORTFOLIO
   Version 2.0
========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:linear-gradient(
180deg,
#ffffff 0%,
#f8fafc 100%
);

    color:#111827;

    overflow-x:hidden;

}

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

header{

position:fixed;

top:0;

width:100%;

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

backdrop-filter:blur(14px);

z-index:999;

border-bottom:1px solid #ececec;

}

.container{

max-width:1200px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

}

.logo{

font-size:32px;

font-weight:800;

color:#2563EB;

}

nav{

display:flex;

gap:40px;

}

nav a{

text-decoration:none;

color:#444;

font-weight:600;

transition:.3s;

}

nav a:hover{

color:#2563EB;

}

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

.hero{

max-width:1800px;

margin:auto;

padding:170px 20px 120px;

display:flex;

align-items:center;

justify-content:space-between;

gap:80px;

}

.hero-content{

flex:1;

}

.hero-image{

flex:1;

display:flex;

justify-content:center;

}
.hero-image{

position:relative;

}

.hero-image::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:#DBEAFE;

border-radius:50%;

filter:blur(70px);

z-index:-1;

}
.hero-image img{

width:380px;

height:380px;

border-radius:50%;

object-fit:cover;

border:8px solid white;

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

background:white;

box-shadow:

0 30px 80px rgba(37,99,235,.25);

transition:.4s;

}

.hero-image img:hover{

transform:scale(1.03);

}

.badge{

display:inline-block;

padding:10px 18px;

background:#dbeafe;

color:#2563EB;

font-weight:700;

border-radius:50px;

margin-bottom:25px;

}

.hero h1{

font-size:68px;

font-weight:800;

line-height:1.1;

margin-bottom:10px;

}

.hero h2{

font-size:34px;

font-weight:600;

color:#2563EB;

margin-bottom:25px;

}

.hero p{

font-size:22px;

line-height:1.8;

color:#555;

max-width:650px;

margin-bottom:40px;

}

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

.buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn{

padding:16px 36px;

border-radius:10px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.primary{

background:#2563EB;

color:white;

}

.primary:hover{

background:#1D4ED8;

transform:translateY(-3px);

}

.secondary{

border:2px solid #2563EB;

color:#2563EB;

}

.secondary:hover{

background:#2563EB;

color:white;

}

/* ================= METRICS ================= */

.impact{

max-width:1200px;

margin:20px auto 100px;

display:grid;

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

gap:25px;

padding:20px;

}

.metric{

background:white;

padding:40px;

text-align:center;

border-radius:18px;

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

transition:.3s;

}

.metric:hover{

transform:translateY(-8px);

}

.metric h3{

font-size:48px;

color:#2563EB;

margin-bottom:10px;

}

.metric p{

color:#666;

}

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

.about{

max-width:1000px;

margin:120px auto;

padding:20px;

text-align:center;

}

.about h2{

font-size:48px;

margin-bottom:35px;

}

.about p{

font-size:22px;

line-height:2;

color:#555;

}

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

footer{

margin-top:120px;

padding:60px 20px;

background:#0f172a;

color:white;

text-align:center;

}

footer h2{

font-size:36px;

margin-bottom:20px;

}

footer p{

margin:10px 0;

color:#cbd5e1;

}

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

@media(max-width:950px){

.hero{

flex-direction:column-reverse;

text-align:center;

padding-top:130px;

}

.hero-image img{

width:260px;

height:260px;

}

.hero h1{

font-size:46px;

}

.hero h2{

font-size:28px;

}

.hero p{

font-size:18px;

}

.buttons{

justify-content:center;

}

nav{

display:none;

}

.impact{

grid-template-columns:1fr;

}

.about h2{

font-size:38px;

}

.about p{

font-size:18px;

}

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

.expertise{

max-width:1200px;

margin:120px auto;

padding:20px;

}

.expertise h2{

text-align:center;

font-size:48px;

margin-bottom:60px;

}

.expertise-grid{

display:grid;

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

gap:30px;

}

.skill-card{

background:white;

padding:35px;

border-radius:20px;

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

transition:.3s;

border-top:5px solid #2563EB;

}

.skill-card:hover{

transform:translateY(-10px);

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

}

.skill-card h3{

margin-bottom:15px;

font-size:26px;

color:#2563EB;

}

.skill-card p{

line-height:1.8;

color:#666;

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

.timeline-section{

max-width:1100px;

margin:120px auto;

padding:20px;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:48px;

margin-bottom:15px;

}

.section-title p{

font-size:20px;

color:#666;

}

.timeline{

position:relative;

margin-top:40px;

}

.timeline:before{

content:"";

position:absolute;

left:18px;

top:0;

bottom:0;

width:4px;

background:#2563EB;

}

.timeline-item{

position:relative;

padding-left:70px;

margin-bottom:60px;

}

.timeline-dot{

position:absolute;

left:8px;

top:10px;

width:24px;

height:24px;

border-radius:50%;

background:#2563EB;

border:5px solid white;

box-shadow:0 0 0 5px #DBEAFE;

}

.timeline-content{

background:white;

padding:35px;

border-radius:18px;

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

transition:.3s;

}

.timeline-content:hover{

transform:translateY(-8px);

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

}

.timeline-content span{

color:#2563EB;

font-weight:700;

font-size:15px;

}

.timeline-content h3{

margin-top:15px;

font-size:30px;

}

.timeline-content h4{

margin:10px 0 20px;

color:#666;

font-weight:600;

}

.timeline-content p{

line-height:1.8;

color:#666;

}

@media(max-width:768px){

.timeline:before{

left:10px;

}

.timeline-dot{

left:0;

}

.timeline-item{

padding-left:45px;

}

}
/* =======================================
BUSINESS IMPACT
======================================= */

.projects{

max-width:1200px;

margin:140px auto;

padding:20px;

}

.project-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.project-card{

background:white;

padding:40px;

border-radius:22px;

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

transition:.35s;

}

.project-card:hover{

transform:translateY(-10px);

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

}

.project-icon{

font-size:42px;

margin-bottom:25px;

}

.project-card h3{

font-size:28px;

margin-bottom:20px;

}

.project-card p{

line-height:1.8;

color:#666;

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

.achievements{

max-width:1200px;

margin:140px auto;

padding:20px;

}

.achievement-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.achievement-card{

padding:45px;

background:linear-gradient(135deg,#2563EB,#1D4ED8);

color:white;

border-radius:24px;

transition:.35s;

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

}

.achievement-card:hover{

transform:translateY(-12px);

}

.number{

font-size:52px;

font-weight:800;

margin-bottom:20px;

}

.achievement-card h3{

margin-bottom:15px;

font-size:28px;

}

.achievement-card p{

opacity:.92;

line-height:1.8;

}
/* ==========================================
LEADERSHIP
========================================== */

.leadership{

max-width:1200px;

margin:140px auto;

padding:20px;

}

/* ==========================
CASE STUDIES
========================== */

.case-studies{

max-width:1200px;

margin:140px auto;

padding:20px;

}

.case-study{

background:white;

padding:50px;

margin-top:40px;

border-radius:20px;

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

}

.case-study h3{

font-size:34px;

margin-bottom:35px;

color:#2563EB;

}

.case-grid{

display:grid;

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

gap:35px;

}

.case-grid h4{

margin-bottom:12px;

font-size:20px;

}

.case-grid p{

line-height:1.9;

color:#666;

}

.case-summary{

font-size:20px;

color:#555;

margin-bottom:40px;

line-height:1.8;

}

.case-grid ul{

padding-left:20px;

margin-top:15px;

}

.case-grid li{

margin-bottom:14px;

line-height:1.8;

color:#555;

}