*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}
body{background:#f5f6fa;color:#1b1b1b}
body{
font-family: "Inter", sans-serif;
}
.container{width:1100px;max-width:95%;margin:auto}

/* NAV */
/* NAVBAR */

nav{
background:linear-gradient(120deg,#2e3cc7,#6db2d9);
padding:18px 0;
position:sticky;
top:0;
z-index:1000;

}

.nav-inner{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-size:20px;
font-weight:700;
color: #f3d339;
text-transform: uppercase;
    letter-spacing: 7px;
}

/* MENU */

nav ul{
display:flex;
gap:25px;
list-style:none;
}

nav ul li a{
text-decoration:none;
color:#233a9f;
font-weight:500;
transition:.3s;
}

nav ul li a:hover{
color:#ffd84a;
}

/* HAMBURGER */

.menu-toggle{
display:none;
flex-direction:column;
cursor:pointer;
gap:5px;
}

.menu-toggle span{
width:25px;
height:3px;
background:#333;
border-radius:3px;
}

/* MOBILE */

@media (max-width:768px){

.menu-toggle{
display:flex;
}

nav ul{
position:absolute;
top:70px;
left:0;
width:100%;
background:#fff;
flex-direction:column;
align-items:center;
padding:25px 0;
gap:20px;
display:none;
border-top:1px solid #eee;
}

nav ul.active{
display:flex;
}

}

body{
margin:0;
font-family: 'Inter', sans-serif;
}

.container{
width:1100px;
max-width:95%;
margin:auto;
}

/* HERO */

.hero{
position:relative;
padding:140px 0;
color:white;
background:linear-gradient(120deg,#2e3cc7,#6db2d9);
overflow:hidden;
}

/* ANIMATED GRADIENT */

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(120deg,#4b5dff,#6db2d9,#2e3cc7);
opacity:0.35;
animation:gradientMove 12s infinite alternate;
}

@keyframes gradientMove{
0%{transform:scale(1)}
100%{transform:scale(1.2)}
}

.hero-content{
position:relative;
z-index:2;
}

/* TEXT */

.hero-tag{
display:inline-block;
background:#ffd84a;
color:#000;
padding:6px 14px;
border-radius:6px;
font-size:13px;
font-weight:600;
margin-bottom:20px;
}

.hero h1{
font-size:64px;
line-height:1.1;
margin-bottom:15px;
}

.hero h1 span{
color:#ffd84a;
}

.hero-subtitle{
font-size:18px;
margin-bottom:8px;
opacity:.95;
}

.hero-location{
font-size:14px;
opacity:.8;
margin-bottom:30px;
}

/* BUTTONS */

.hero-buttons{
display:flex;
gap:15px;
}

.btn-primary{
background:#ffd84a;
color:black;
padding:12px 26px;
border-radius:8px;
font-weight:600;
text-decoration:none;
transition:.3s;
}

.btn-primary:hover{
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(0,0,0,.25);
}

.btn-outline{
border:1px solid white;
padding:12px 26px;
border-radius:8px;
color:white;
text-decoration:none;
transition:.3s;
}

.btn-outline:hover{
background:white;
color:#2e3cc7;
}

/* DECORATIVE CIRCLES */

.hero-bg-circle{
position:absolute;
border-radius:50%;
border:2px solid rgba(255,255,255,0.3);
}

.circle1{
width:120px;
height:120px;
right:160px;
top:120px;
}

.circle2{
width:70px;
height:70px;
right:80px;
bottom:100px;
}

/* ABOUT */
section{padding:70px 0}
.about{display:flex;gap:40px}
.about .box{background:#1c2b7a;color:white;padding:25px;border-radius:10px;width:280px}

/* SKILLS */
.skills{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.skill{padding:25px;border-radius:10px;color:white}
.skill:nth-child(1){background:#1c2b7a}
.skill:nth-child(2){background:#59a8d6}
.skill:nth-child(3){background:#7488ff}
.skill:nth-child(4){background:#f4c533;color:#1b1b1b}

/* EXPERIENCE */
.timeline{border-left:3px solid #d9d9d9;padding-left:25px}
.timeline-item{margin-bottom:25px;background:white;padding:18px;border-radius:8px}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat{background:white;padding:25px;border-radius:10px;text-align:center}
.stat h2{color:#1c2b7a}

/* PROJECTS */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.project{padding:25px;border-radius:10px;background:linear-gradient(120deg,#4a59d1,#6fb6df);color:white}

/* METHODOLOGY */
.method{display:grid;grid-template-columns:repeat(2,1fr);gap:25px}
.method .card{background:white;padding:25px;border-radius:10px}

/* STANDOUT */
.standout{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.standout .card{background:#fff6da;padding:20px;border-radius:8px}

/* EDUCATION */
.education{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.education .card{background:white;padding:20px;border-radius:8px}

/* CONTACT */
.contact{background:linear-gradient(120deg,#3c3f9f,#5ab0d6);color:white;text-align:center;padding:80px 0}

footer{padding:20px;text-align:center;color:#888}

@media(max-width:900px){
.skills,.projects,.stats,.standout,.education{grid-template-columns:1fr 1fr}
.about{flex-direction:column}
}

@media(max-width:600px){
.skills,.projects,.stats,.standout,.education,.method{grid-template-columns:1fr}
.hero h1{font-size:36px}
}
body{
font-family: 'Inter', sans-serif;
background:#f4f4f6;
margin:0;
}

.container{
width:1100px;
max-width:95%;
margin:auto;
}

/* SECTION TITLE */


/* ABOUT SECTION */

.about-section{
padding:80px 0;
background:#fff;
}

.about-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:60px;
align-items:center;
}

.about-text h2{
font-size:48px;
color:#233a9f;
margin-bottom:30px;
}

.about-text p{
color:#5c6575;
line-height:1.8;
margin-bottom:20px;
text-align: justify;
}

.about-highlight{
    background: #1e2fa8;
    color: white;
    padding: 70px 29px;
    border-radius: 20px;
    text-align: right;
}
.about-highlight h3{
color:#ffd83a;
margin-bottom:20px;
}

/* SKILLS */

.skills-section{
padding:80px 0;
background:#f7f7f9;
}

.skills-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.skill-card{
padding:35px;
border-radius:18px;
color:white;
min-height:180px;
}

.skill-card i{
font-size:28px;
margin-bottom:15px;
}

.skill-card h3{
margin-bottom:10px;
font-size:18px;
}

.skill-card p{
font-size:14px;
line-height:1.6;
}

/* CARD COLORS */

.backend{
background:#1f2fa5;
}

.fullstack{
background:#53a9c9;
}

.hosting{
background:#7288e8;
}

.seo{
background:#f3d339;
color:#222;
}

/* RESPONSIVE */

@media(max-width:900px){

.about-grid{
grid-template-columns:1fr;
}

.skills-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:600px){

.skills-grid{
grid-template-columns:1fr;
}

}
/* EXPERIENCE */

.experience-section{
padding:90px 0;
background:#f6f7fb;
}

.section-title{
font-size:42px;
color:#243a9b;
margin-bottom:60px;
font-weight:700;
text-align: center;
}

.timeline{
position:relative;
padding-left:70px;
}

.timeline:before{
content:"";
position:absolute;
left:28px;
top:0;
width:2px;
height:100%;
background:#d6d9e6;
}

.timeline-item{
position:relative;
margin-bottom:40px;
display:flex;
align-items:flex-start;
}

.timeline-number{
width:36px;
height:36px;
background:#233a9f;
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:600;
position:absolute;
left:-10px;
}

.timeline-content{
background:white;
border:1px solid #e2e6f3;
padding:25px 30px;
border-radius:10px;
width:100%;
}

.timeline-content h3{
margin:0;
font-size:16px;
color:#1b1f3b;
}

.timeline-content span{
display:block;
font-size:13px;
color:#5670ff;
margin:6px 0 8px;
}

.timeline-content p{
font-size:14px;
color:#6b7280;
margin:0;
}

/* RESPONSIVE */

@media(max-width:768px){

.timeline{
padding-left:50px;
}

.timeline-number{
left:-5px;
}

}
.achievement-section{
padding:90px 0;
background:#f6f7fb;
}

.stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:40px;
}

.stat-card{
background:white;
padding:35px;
border-radius:12px;
text-align:center;
border:1px solid #e4e8f3;
}

.stat-card h2{
font-size:40px;
color:#243a9b;
margin-bottom:10px;
}

.stat-card p{
color:#6b7280;
}
.projects-section{
padding:90px 0;
background:#ffffff;
}

.projects-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:40px;
}

.project-card{
padding:35px;
border-radius:14px;
color:white;
background:linear-gradient(120deg,#4c63d6,#5cb3d9);
}

.project-card h3{
margin-bottom:10px;
}

.project-note{
margin-top: 20px;
    color: #6b7280;
    max-width: 100%;
    text-align: center;
    font-size: 14px;
}
.method-section{
padding:90px 0;
background:#f6f7fb;
}

.method-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:40px;
}

.method-card{
background:white;
padding:35px;
border-radius:12px;
border:1px solid #e3e7f3;
}

.method-card h3{
margin-bottom:20px;
color:#243a9b;
}

.method-card ul{
padding-left:18px;
color:#6b7280;
line-height:1.8;
}
@media(max-width:900px){

.stats,
.projects-grid{
grid-template-columns:1fr 1fr;
}

.method-grid{
grid-template-columns:1fr;
}

}

@media(max-width:600px){

.stats,
.projects-grid{
grid-template-columns:1fr;
}

}


.standout-section{
padding:90px 0;
background:#ffffff;
}

.standout-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:40px;
}

.standout-card{
background:#fff6d9;
padding:30px;
border-radius:12px;
}

.standout-card h3{
margin-bottom:10px;
color:#1c2b7a;
}

.standout-card p{
color:#6b7280;
}

.education-section{
padding:90px 0;
background:#f6f7fb;
}

.education-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:40px;
}

.education-card{
background:white;
padding:30px;
border-radius:12px;
border:1px solid #e3e7f3;
}

.education-card h3{
margin-bottom:8px;
color:#243a9b;
}

.education-card p{
color:#555;
margin-bottom:6px;
}

.education-card span{
font-size:14px;
color:#6b7280;
}

.connect-section{
padding:100px 0;
background:linear-gradient(120deg,#3f4fd7,#6db3d9);
text-align:center;
color:white;
}

.connect-section h2{
font-size:40px;
margin-bottom:15px;
}

.connect-section p{
max-width:600px;
margin:auto;
margin-bottom:30px;
font-size: 14px;
}

.connect-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.btn-primary{
background:#ffd84a;
color:black;
padding:12px 25px;
border-radius:8px;
text-decoration:none;
font-weight:600;
}

.btn-outline{
border:1px solid white;
color:white;
padding:12px 25px;
border-radius:8px;
text-decoration:none;
}
.freelance-section{
padding:80px 0;
background:#f8f9fb;
}

.freelance-intro{
text-align:center;
max-width:700px;
margin:auto;
margin-bottom:40px;
}

.freelance-calculator{
max-width:500px;
margin:auto;
display:flex;
flex-direction:column;
gap:10px;
}

.freelance-calculator input{
padding:12px;
font-size:16px;
border:1px solid #ddd;
border-radius:6px;
}

.freelance-calculator button{
padding: 12px;
    background: #f3d339;
    color: #090808;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 900;
}

.result-box{
margin-top:20px;
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.deliverables-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:40px;
}

.deliverable-card{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
text-align:center;
}

.consulting-section{
padding:80px 0;
background:#f8f9fb;
text-align:center;
}

.consulting-card-single{
max-width:500px;
margin:auto;
background:white;
padding:40px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.consulting-description{
margin:15px 0 25px;
font-size:15px;
color:#555;
}

.consulting-fee span{
font-size:14px;
color:#777;
}

.consulting-fee h1{
font-size:48px;
margin:5px 0;
}

.consulting-fee p{
font-size:16px;
color:#666;
}

.consulting-note{
margin:25px 0;
font-size:14px;
color:#555;
}

.freelance-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-top:40px;
align-items:start;
}

.deliverables-wrapper{
width:100%;
}

.deliverables-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.deliverable-card{
background:white;
padding:15px;
border-radius:8px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
text-align:center;
}

@media(max-width:900px){

.freelance-layout{
grid-template-columns:1fr;
}

.deliverables-grid{
grid-template-columns:1fr;
}

}
.hero-content{
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
flex-wrap:wrap;
}

.consult-card{
background: #ffd84a;
    padding: 50px;
    border-radius: 14px;
    box-shadow: 0 15px 40px rgb(48 63 200);
    max-width: 354px;
    text-align: center;
}

.consult-label{
font-size:24px;
color:#00031a;
margin-bottom:5px;
}

.consult-card h2{
font-size:36px;
margin:5px 0;
color: #233a9f;
}

.consult-card span{
font-size: 14px;
    color: #ffffff;
}

.consult-desc{
font-size:13px;
margin:15px 0;
color:#555;
}

.consult-btn{
display:inline-block;
padding:10px 18px;
background:#101548;
color:white;
border-radius:6px;
font-size:14px;
text-decoration:none;
}

@media(max-width:900px){

.hero-content{
flex-direction:column;
text-align:center;
}

.consult-card{
max-width:320px;
}

}
























.hero-content{
display:flex;
align-items:center;
justify-content:space-between;
gap:70px;
flex-wrap:wrap;
}

.hero-left{
max-width:600px;
}

.hero-stats{
display:flex;
gap:40px;
margin:25px 0;
}

.hero-stat h3{
font-size:26px;
margin:0;
}

.hero-stat span{
font-size:13px;
color:#090426;
}

/* CONSULT CARD */

/*.consult-card{*/
/*background:white;*/
/*padding:35px;*/
/*border-radius:16px;*/
/*box-shadow:0 20px 50px rgba(0,0,0,0.08);*/
/*width:300px;*/
/*}*/

.consult-badge{
background:#3245c8;
color:#4f46e5;
font-size:12px;
padding:6px 10px;
border-radius:20px;
display:inline-block;
margin-bottom:15px;

}

.consult-card h3{
margin-bottom:10px;
color: #1a1f52;
    font-size: 22px;
}

.consult-price{
font-size:38px;
font-weight:600;
margin:10px 0 20px;
color: #031228;
}

.consult-price span{
font-size:14px;
color:#3245c8;
}

.consult-features{
list-style:none;
padding:0;
margin-bottom:25px;
}

.consult-features li{
font-size:12px;
    margin-bottom: 4px;
    color: #2f3ec7;
}

.consult-btn{
display:block;
text-align:center;
background:#101548;
color:white;
padding:12px;
border-radius:8px;
text-decoration:none;
font-size:14px;
}

@media(max-width:900px){

.hero-content{
flex-direction:column;
text-align:center;
}

.hero-stats{
justify-content:center;
}

.consult-card{
width:100%;
max-width:350px;
}

}







.projects-intro{
max-width:700px;
margin:auto;
text-align:center;
margin-bottom:40px;
color:#666;
}

.project-card{

box-shadow:0 10px 30px rgb(76 102 214 / 49%);
transition:0.3s;
}

.project-card:hover{
transform:translateY(-6px);
}

.project-tag{
font-size:12px;
background:#eef2ff;
color:#4f46e5;
display:inline-block;
padding:5px 10px;
border-radius:20px;
margin-bottom:12px;
}

.project-tech{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:15px;
list-style:none;
padding:0;
}

.project-tech li{
font-size:12px;
background:#021d54;
padding:6px 10px;
border-radius:6px;
}

.projects-footer{
text-align:center;
margin-top:40px;
color:#555;
}