/* =========================
RESET
========================= */

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


:root{

--bg:#020617;
--text:#ffffff;
--muted:#94a3b8;

--card:rgba(255,255,255,.05);

--nav:#ffffff;

--accent:#38bdf8;


--blur1:#0ea5e9;
--blur2:#8b5cf6;

--section:transparent;

}


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


body.light-mode{

--bg:#f8fafc;
--text:#0f172a;

--muted:#475569;

--card:#ffffff;

--nav:#0f172a;

--accent:#0ea5e9;


--blur1:#60a5fa;

--blur2:#a78bfa;

--section:#f1f5f9;

}



/* =========================
BODY
========================= */


body{

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

background:var(--bg);

color:var(--text);

overflow-x:hidden;

transition:.4s ease;

}



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


.container{

width:90%;

max-width:1350px;

margin:auto;

}



section{

padding:120px 0;

position:relative;

background:var(--section);

transition:.4s;

}



a{

text-decoration:none;

}



img{

max-width:100%;

display:block;

}



ul{

list-style:none;

}



p{

color:var(--muted);

line-height:1.8;

transition:.4s;

}



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


#particles-js{

position:fixed;

width:100%;

height:100%;

top:0;

left:0;

z-index:-2;

}



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


::-webkit-scrollbar{

width:10px;

}


::-webkit-scrollbar-thumb{

background:linear-gradient(
#0ea5e9,
#8b5cf6
);

border-radius:20px;

}



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


.blur1,
.blur2{

position:fixed;

width:420px;

height:420px;

border-radius:50%;

filter:blur(160px);

z-index:-1;

}



.blur1{

background:var(--blur1);

top:-180px;

left:-120px;

opacity:.18;

}



.blur2{

background:var(--blur2);

bottom:-180px;

right:-120px;

opacity:.18;

}



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


.cursor{

width:20px;

height:20px;

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

border-radius:50%;

position:fixed;

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

pointer-events:none;

z-index:99999;

}



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


.card{

background:var(--card);

backdrop-filter:blur(20px);

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

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

border-radius:30px;

transition:.4s;

}



.card:hover{

transform:translateY(-10px);

}

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


header{

position:fixed;

top:0;

left:0;

width:100%;

padding:20px 0;

z-index:999;

transition:.4s;

}



header.active{

background:rgba(2,6,23,.85);

backdrop-filter:blur(20px);

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

}



/* LIGHT MODE HEADER */


body.light-mode header.active{

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

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

}



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


.navbar{

display:flex;

justify-content:space-between;

align-items:center;

}



.logo{

font-size:35px;

font-weight:800;

color:var(--text);

}



.logo span{

color:var(--accent);

}



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


.nav-links{

display:flex;

gap:30px;

}



.nav-links li a{

color:var(--nav);

font-weight:500;

position:relative;

transition:.3s;

}



.nav-links li a::after{

content:'';

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--accent);

transition:.3s;

}



.nav-links li a:hover::after,
.nav-links li a.active::after{

width:100%;

}



.nav-links li a:hover,
.nav-links li a.active{

color:var(--accent);

}



/* LIGHT MODE NAV */


body.light-mode .nav-links li a{

color:#0f172a;

}



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


.menu-btn{

display:none;

font-size:28px;

cursor:pointer;

color:var(--text);

}



/* =========================
THEME TOGGLE
========================= */


.theme-toggle{

width:65px;

height:35px;

cursor:pointer;

display:flex;

align-items:center;

}



.toggle-track{

width:100%;

height:100%;

background:#0f172a;

border-radius:50px;

position:relative;

transition:.4s;

}



.toggle-thumb{

width:28px;

height:28px;

border-radius:50%;

background:linear-gradient(
45deg,
#0ea5e9,
#8b5cf6
);

position:absolute;

top:50%;

left:4px;

transform:translateY(-50%);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:14px;

transition:.4s;

}



/* LIGHT MODE TOGGLE */


body.light-mode .toggle-track{

background:#e2e8f0;

}



body.light-mode .toggle-thumb{

left:33px;

background:linear-gradient(
45deg,
#f59e0b,
#f97316
);

}



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


@media(max-width:768px){


.menu-btn{

display:block;

z-index:1001;

}



.nav-links{

position:fixed;

top:90px;

right:-100%;

width:280px;

height:calc(100vh - 90px);

background:var(--bg);

flex-direction:column;

padding:40px 30px;

transition:.4s;

overflow-y:auto;

}



.nav-links.active{

right:0;

}



body.light-mode .nav-links{

background:#ffffff;

}



.nav-links li a{

color:var(--text);

}



body.light-mode .nav-links li a{

color:#0f172a;

}



.theme-toggle{

margin-left:auto;

margin-right:20px;

}


}

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


.btn{

padding:17px 35px;

border:none;

border-radius:60px;

cursor:pointer;

font-size:15px;

font-weight:600;

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

transition:.4s;

}



.btn:hover{

transform:translateY(-6px);

}



.btn-primary{

background:linear-gradient(
45deg,
#0ea5e9,
#8b5cf6
);

color:#fff;

}



.btn-outline{

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

background:transparent;

color:var(--accent);

}



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


.hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:120px;

}



.hero-wrapper{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:80px;

align-items:center;

}



/* TEXT */


.hero-text small{

color:var(--accent);

letter-spacing:4px;

}



.hero-text h1{

font-size:85px;

line-height:1.1;

margin:20px 0;

}



.hero-text h1 span{

background:linear-gradient(
45deg,
#38bdf8,
#8b5cf6
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



.hero-text h3{

font-size:32px;

margin-bottom:20px;

}



.typing{

color:var(--accent);

}



.hero-text p{

line-height:2;

margin-bottom:40px;

}



/* BUTTON GROUP */


.hero-btns{

display:flex;

gap:20px;

flex-wrap:wrap;

}



/* SOCIAL ICON */


.social-icons{

display:flex;

gap:18px;

margin-top:45px;

}



.social-icons a{

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

color:var(--text);

transition:.4s;

}



.social-icons a:hover{

background:linear-gradient(
45deg,
#0ea5e9,
#8b5cf6
);

transform:translateY(-6px);

}



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


.hero-image{

position:relative;

text-align:center;

}



.hero-image::before{

content:'';

position:absolute;

width:420px;

height:420px;

background:linear-gradient(
45deg,
var(--blur1),
var(--blur2)
);

filter:blur(80px);

opacity:.3;

border-radius:50%;

left:50%;

top:50%;

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

}



.hero-image img{

width:430px;

height:430px;

object-fit:cover;

border-radius:40px;

position:relative;

z-index:2;

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

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

}



/* IMAGE FLOAT */


@keyframes float{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}


100%{

transform:translateY(0);

}


}



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


@media(max-width:1100px){


.hero-wrapper{

grid-template-columns:1fr;

text-align:center;

}



.hero-btns,
.social-icons{

justify-content:center;

}



.hero-text h1{

font-size:55px;

}


}




@media(max-width:768px){


.hero-text h1{

font-size:40px;

}



.hero-text h3{

font-size:25px;

}



.hero-image img{

width:300px;

height:300px;

}



.hero{

padding-top:100px;

}


}




@media(max-width:480px){


.hero-text h1{

font-size:32px;

}



.hero-image img{

width:260px;

height:260px;

}



.btn{

padding:14px 25px;

font-size:13px;

}


}

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


.section-title{

text-align:center;

margin-bottom:70px;

}



.section-title small{

color:var(--accent);

letter-spacing:4px;

}



.section-title h2{

font-size:52px;

margin-top:10px;

color:var(--text);

}



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


.about-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



/* IMAGE */


.about-image img{

height:600px;

width:100%;

object-fit:cover;

border-radius:35px;

}



/* CONTENT */


.about-content h3{

font-size:42px;

margin-bottom:25px;

}



.about-content p{

line-height:2;

margin-bottom:25px;

}



/* ABOUT GRID */


.about-grid{

display:grid;

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

gap:25px;

margin-top:30px;

}



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


.about-buttons{

display:flex;

gap:16px;

margin-top:25px;

width:100%;

max-width:520px;

align-items:center;

}



.about-buttons a{

flex:1;

display:flex;

justify-content:center;

align-items:center;

white-space:nowrap;

padding:16px 26px;

border-radius:60px;

font-size:15px;

font-weight:600;

transition:.4s;

}



/* PRIMARY */


.about-buttons .btn-primary{

background:linear-gradient(
45deg,
#0ea5e9,
#8b5cf6
);

color:#fff;

box-shadow:
0 12px 28px rgba(14,165,233,.25);

}



/* OUTLINE */


.about-buttons .btn-outline{

background:transparent;

color:var(--accent);

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

}



/* HOVER */


.about-buttons a:hover{

transform:translateY(-6px);

}



.about-buttons .btn-outline:hover{

background:var(--accent);

color:#020617;

box-shadow:
0 12px 25px rgba(56,189,248,.25);

}



/* CLICK */


.about-buttons a:active{

transform:translateY(-2px);

}



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


@media(max-width:1100px){


.about-wrapper{

grid-template-columns:1fr;

text-align:center;

}



.about-buttons{

margin-left:auto;

margin-right:auto;

}


}




@media(max-width:768px){


.about-grid{

grid-template-columns:1fr;

}



.about-image img{

height:400px;

}



.about-content h3{

font-size:32px;

}



.about-buttons{

flex-direction:column;

max-width:100%;

}



.about-buttons a{

width:100%;

}


}




@media(max-width:480px){


.section-title h2{

font-size:28px;

}



.about-image img{

height:300px;

}


}

/* =========================
SERVICES
========================= */


.services-grid{

display:grid;

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

gap:35px;

}



.service-card{

padding:45px 35px;

}



/* ICON */


.service-icon{

width:90px;

height:90px;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

border-radius:25px;

background:linear-gradient(
45deg,
#0ea5e9,
#8b5cf6
);

margin-bottom:30px;

color:#fff;

}



.service-card h3{

font-size:26px;

margin-bottom:15px;

}



.service-card p{

line-height:1.8;

}



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


.skills-grid{

display:grid;

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

gap:35px;

}



.skill-card{

padding:35px;

}



.skill-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:15px;

}



.skill-top h3{

font-size:22px;

}



.skill-top span{

color:var(--accent);

font-weight:600;

}



.skill-card p{

margin-top:18px;

line-height:1.8;

}



/* PROGRESS */


.progress{

height:12px;

background:#0f172a;

border-radius:20px;

overflow:hidden;

}



.progress-bar{

height:100%;

border-radius:20px;

background:linear-gradient(
45deg,
#0ea5e9,
#8b5cf6
);

}



/* WIDTHS */


.html{

width:95%;

}


.js{

width:90%;

}


.asp{

width:88%;

}


.sql{

width:85%;

}



/* =========================
HOVER EFFECT
========================= */


.service-card:hover,
.skill-card:hover{

transform:translateY(-10px);

}



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


@media(max-width:1100px){


.services-grid{

grid-template-columns:1fr 1fr;

}



.skills-grid{

grid-template-columns:1fr;

}


}




@media(max-width:768px){


.services-grid{

grid-template-columns:1fr;

}



.skills-grid{

grid-template-columns:1fr;

}



.service-card,
.skill-card{

padding:30px 25px;

}


}

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


.timeline{

position:relative;

max-width:1000px;

margin:auto;

}



/* CENTER LINE */


.timeline::before{

content:'';

position:absolute;

left:50%;

transform:translateX(-50%);

width:4px;

height:100%;

background:linear-gradient(
#0ea5e9,
#8b5cf6
);

}



/* ITEMS */


.timeline-item{

position:relative;

width:50%;

padding:30px 40px;

}



.timeline-item:nth-child(odd){

left:0;

}



.timeline-item:nth-child(even){

left:50%;

}



/* CONTENT */


.timeline-content{

padding:35px;

}



.timeline-content span{

color:var(--accent);

font-weight:600;

}



.timeline-content h3{

font-size:28px;

margin:12px 0;

}



.timeline-content h4{

margin-bottom:18px;

color:var(--muted);

}



.timeline-content p{

line-height:1.9;

}



/* DOT */


.timeline-item::before{

content:'';

position:absolute;

top:50px;

right:-12px;

width:24px;

height:24px;

border-radius:50%;

background:var(--accent);

border:4px solid var(--bg);

}



.timeline-item:nth-child(even)::before{

left:-12px;

}





/* =========================
PORTFOLIO + BLOG
========================= */


.portfolio-grid{

display:grid;

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

gap:35px;

}



.portfolio-card{

overflow:hidden;

position:relative;

height:420px;

border-radius:30px;

}



.portfolio-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}



.portfolio-card:hover img{

transform:scale(1.1);

}



/* OVERLAY */


.portfolio-overlay{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:35px;


background:linear-gradient(
to top,
rgba(2,6,23,.95),
rgba(2,6,23,.1)
);

}



.portfolio-overlay h3{

color:#fff;

font-size:25px;

margin-bottom:10px;

}



.portfolio-overlay p{

color:#cbd5e1;

}



/* LIGHT MODE OVERLAY */


body.light-mode .portfolio-overlay{

background:linear-gradient(
to top,
rgba(255,255,255,.95),
rgba(255,255,255,.5)
);

}



body.light-mode .portfolio-overlay h3{

color:#0f172a;

}



body.light-mode .portfolio-overlay p{

color:#334155;

}



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


@media(max-width:1100px){


.portfolio-grid{

grid-template-columns:1fr 1fr;

}


}



@media(max-width:768px){


.timeline::before{

left:20px;

}



.timeline-item{

width:100%;

padding-left:70px;

padding-right:20px;

left:0 !important;

}



.timeline-item::before{

left:8px !important;

}



.portfolio-grid{

grid-template-columns:1fr;

}



.portfolio-card{

height:350px;

}


}

/* =========================
PRICING
========================= */


.pricing-grid{

display:grid;

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

gap:35px;

}



.pricing-card{

padding:45px 35px;

text-align:center;

position:relative;

overflow:hidden;

}



.pricing-card.popular{

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

transform:scale(1.05);

}



.pricing-card h3{

font-size:28px;

margin-bottom:15px;

}



.price{

font-size:55px;

font-weight:700;

color:var(--accent);

margin:20px 0;

}



.price span{

font-size:18px;

color:var(--muted);

}



.pricing-card ul{

margin:30px 0;

}



.pricing-card ul li{

margin:12px 0;

color:var(--muted);

}





/* =========================
TESTIMONIALS
========================= */


.testimonials-grid{

display:grid;

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

gap:35px;

}



.testimonial-card{

padding:35px;

}



.testimonial-card p{

line-height:1.9;

margin-bottom:25px;

}



.client{

display:flex;

align-items:center;

gap:15px;

}



.client img{

width:60px;

height:60px;

border-radius:50%;

object-fit:cover;

}



.client span{

font-size:14px;

color:var(--muted);

}








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


body.light-mode .contact-form input,
body.light-mode .contact-form textarea{

background:#ffffff;

color:#0f172a;

border:1px solid #e2e8f0;

}




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


@media(max-width:1100px){


.pricing-grid,
.testimonials-grid{

grid-template-columns:1fr 1fr;

}



.contact-wrapper{

grid-template-columns:1fr;

}



}




@media(max-width:768px){


.pricing-grid,
.testimonials-grid{

grid-template-columns:1fr;

}



.form-row{

grid-template-columns:1fr;

}



.pricing-card.popular{

transform:none;

}


}

/* =========================
FAQ
========================= */


.faq-grid{

display:flex;

flex-direction:column;

gap:20px;

}



.faq-card{

padding:25px 30px;

cursor:pointer;

background:var(--card);

border-radius:25px;

transition:.3s;

}



.faq-card:hover{

transform:translateY(-5px);

}



.faq-question{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

}



.faq-question h3{

font-size:22px;

color:var(--text);

}



.faq-question i{

font-size:18px;

color:var(--accent);

transition:.4s;

}



.faq-answer{

max-height:0;

overflow:hidden;

transition:.4s ease;

}



.faq-answer p{

padding-top:20px;

line-height:1.8;

}



.faq-card.active .faq-answer{

max-height:200px;

}



.faq-card.active .faq-question i{

transform:rotate(45deg);

}





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


.stats-grid{

display:grid;

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

gap:25px;

}



.stats-card{

padding:40px 30px;

text-align:center;

}



.stats-card:hover{

transform:translateY(-8px);

}



.stats-card h4{

font-size:45px;

color:var(--accent);

margin-bottom:10px;

}



.stats-card p{

color:var(--muted);

}





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


.achievement-grid{

display:grid;

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

gap:35px;

}



.achievement-card{

padding:40px 30px;

text-align:center;

}



.achievement-icon{

width:90px;

height:90px;

margin:0 auto 25px;

display:flex;

align-items:center;

justify-content:center;

font-size:38px;

border-radius:25px;

background:linear-gradient(
45deg,
#0ea5e9,
#8b5cf6
);

color:#fff;

}



.achievement-card h3{

font-size:24px;

margin-bottom:15px;

}



.achievement-card p{

line-height:1.8;

}





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


.certification-grid{

display:grid;

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

gap:35px;

}



.certification-card{

padding:35px;

text-align:center;

position:relative;

overflow:hidden;

}



.certification-card::before{

content:'';

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(
45deg,
#0ea5e9,
#8b5cf6
);

}



.certification-icon{

font-size:50px;

color:var(--accent);

margin-bottom:20px;

}



.certification-card h3{

font-size:22px;

margin-bottom:10px;

}



.certification-card span{

display:block;

color:var(--accent);

font-weight:600;

margin-bottom:15px;

}



.certification-card p{

line-height:1.8;

}





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


@media(max-width:1100px){


.stats-grid{

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

}



.achievement-grid,
.certification-grid{

grid-template-columns:1fr 1fr;

}


}




@media(max-width:768px){


.stats-grid{

grid-template-columns:1fr;

}



.achievement-grid,
.certification-grid{

grid-template-columns:1fr;

}



.faq-card{

padding:20px;

}



.faq-question h3{

font-size:18px;

}


}

/* =========================
FOOTER CTA SECTION
========================= */


.footer-cta-section{

padding:120px 0 80px;

}



.footer-cta-box{

padding:70px 40px;

text-align:center;

border-radius:30px;

background:linear-gradient(
135deg,
rgba(14,165,233,.12),
rgba(139,92,246,.12)
);

}



.cta-tag{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:rgba(56,189,248,.15);

color:var(--accent);

font-size:12px;

letter-spacing:2px;

margin-bottom:20px;

}



.footer-cta-box h2{

font-size:52px;

margin-bottom:20px;

line-height:1.2;

}



.footer-cta-box p{

max-width:700px;

margin:0 auto 30px;

line-height:1.8;

}



.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}





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


.main-footer{

background:#010814;

padding:80px 0 30px;

}



.footer-layout{

display:grid;

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

gap:40px;

}



.footer-brand h3{

font-size:34px;

margin-bottom:15px;

}



.footer-brand span{

color:var(--accent);

}



.footer-brand p{

line-height:1.9;

margin-bottom:25px;

}



/* SOCIAL */


.footer-social{

display:flex;

gap:15px;

}



.footer-social a{

width:48px;

height:48px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#0f172a;

color:#fff;

transition:.4s;

}



.footer-social a:hover{

background:linear-gradient(
45deg,
#0ea5e9,
#8b5cf6
);

transform:translateY(-5px);

}





/* COLUMNS */


.footer-column h4{

font-size:20px;

margin-bottom:20px;

}



.footer-column ul li{

margin-bottom:12px;

}



.footer-column ul li a{

color:var(--muted);

transition:.3s;

}



.footer-column ul li a:hover{

color:var(--accent);

padding-left:5px;

}





/* CONTACT ITEMS */


.footer-contact-item{

display:flex;

align-items:center;

gap:12px;

margin-bottom:15px;

color:var(--muted);

}



.footer-contact-item i{

color:var(--accent);

}





/* LINE */


.main-footer hr{

margin:50px 0 30px;

border:none;

height:1px;

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

}





/* BOTTOM */


.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

}



.footer-bottom p{

color:var(--muted);

}



.footer-bottom-links{

display:flex;

gap:25px;

flex-wrap:wrap;

}



.footer-bottom-links a{

color:var(--muted);

}



.footer-bottom-links a:hover{

color:var(--accent);

}





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


@media(max-width:1100px){


.footer-layout{

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

}



.footer-cta-box h2{

font-size:42px;

}


}





@media(max-width:768px){


section{

padding:70px 0;

}



.footer-layout{

grid-template-columns:1fr;

text-align:center;

}



.footer-social{

justify-content:center;

}



.footer-contact-item{

justify-content:center;

}



.footer-bottom{

flex-direction:column;

text-align:center;

}



.footer-bottom-links{

justify-content:center;

}



.footer-cta-section{

padding:90px 0 60px;

}



.footer-cta-box{

padding:50px 25px;

}



.footer-cta-box h2{

font-size:32px;

}



.cta-buttons{

flex-direction:column;

align-items:center;

}


}





@media(max-width:480px){


.container{

width:92%;

}



.section-title h2{

font-size:28px;

}



.footer-cta-box p{

font-size:14px;

}


}

/* =========================
TECH STACK SECTION FIX
========================= */


.tech-grid{

display:grid;

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

gap:30px;

}



.tech-card{

padding:35px;

text-align:center;

background:var(--card);

border-radius:30px;

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

transition:.4s;

}



.tech-card:hover{

transform:translateY(-10px);

}



.tech-card i{

font-size:55px;

color:var(--accent);

margin-bottom:20px;

}



.tech-card h3{

font-size:20px;

color:var(--text);

}



.tech-card p{

color:var(--muted);

}





/* LIGHT MODE */

body.light-mode .tech-card{

background:#ffffff;

border:1px solid #e2e8f0;

}







/* =========================
CONTACT FINAL FIX
========================= */


#contact{

display:block !important;

visibility:visible !important;

opacity:1 !important;

position:relative;

z-index:2;

}




.contact-wrapper{

display:grid !important;

grid-template-columns:1fr 1.2fr;

gap:50px;

align-items:start;

}




.contact-info{

display:flex;

flex-direction:column;

gap:20px;

}




.info-card{

display:flex;

align-items:center;

gap:18px;

padding:25px;

background:var(--card);

border-radius:25px;

transition:.4s;

}



.info-card:hover{

transform:translateY(-8px);

}




.info-icon{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:15px;

background:linear-gradient(
45deg,
#0ea5e9,
#8b5cf6
);

color:#fff;

font-size:22px;

}





.contact-form{

display:flex !important;

flex-direction:column;

gap:18px;

padding:40px;

background:var(--card);

border-radius:30px;

position:relative;

z-index:5;

}





.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}





.contact-form input,
.contact-form textarea{

width:100%;

padding:17px 20px;

border-radius:15px;

background:#0f172a;

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

color:#fff;

outline:none;

font-size:15px;

}



.contact-form textarea{

resize:none;

}





.contact-form input:focus,
.contact-form textarea:focus{

border-color:#38bdf8;

box-shadow:
0 0 0 3px rgba(56,189,248,.15);

}





.send-btn{

width:100%;

justify-content:center;

}







/* LIGHT MODE CONTACT */


body.light-mode .contact-form input,
body.light-mode .contact-form textarea{

background:#ffffff;

color:#0f172a;

border:1px solid #cbd5e1;

}



body.light-mode .info-card{

background:#ffffff;

}






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


@media(max-width:1100px){


.tech-grid{

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

}


.contact-wrapper{

grid-template-columns:1fr !important;

}


}





@media(max-width:768px){


.tech-grid{

grid-template-columns:1fr;

}



.tech-card{

padding:25px;

}



.contact-form{

padding:25px;

}



.form-row{

grid-template-columns:1fr;

}



.info-card{

padding:20px;

}


}

/* =========================
CONTACT FOLLOW ME FIX
========================= */


.social-contact{

padding:30px;

text-align:center;

background:var(--card);

border-radius:30px;

margin-top:20px;

}



.social-contact h3{

font-size:22px;

margin-bottom:20px;

color:var(--text);

}




.social-row{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

flex-wrap:wrap;

}




.social-row a{

width:50px;

height:50px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#0f172a;

color:#fff;

font-size:18px;

transition:.4s;

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

}




.social-row a:hover{

background:linear-gradient(
45deg,
#0ea5e9,
#8b5cf6
);

transform:translateY(-6px);

}



/* LIGHT MODE */


body.light-mode .social-contact{

background:#ffffff;

}



body.light-mode .social-row a{

background:#e2e8f0;

color:#0f172a;

}




/* CONTACT LEFT SIDE SPACING */


.contact-info{

height:100%;

justify-content:flex-start;

}



.info-card + .info-card{

margin-top:5px;

}




/* MOBILE */


@media(max-width:768px){


.social-contact{

margin-top:15px;

padding:25px;

}



.social-row{

gap:15px;

}


}