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

body{
font-family:Inter,sans-serif;
background:#0f172a;
color:#fff;
line-height:1.6;
overflow-x:hidden;
}

section{
padding:100px 10%;
}

body{

background:#09090f;

font-family:Inter,sans-serif;

color:white;

}


.container{

width:min(1200px,92%);

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

}


.header{

position:fixed;

top:0;

left:0;

right:0;

height:80px;

backdrop-filter:blur(20px);

background:rgba(10,10,25,.75);

z-index:999;

}


.logo{

font-size:32px;

font-weight:700;

text-decoration:none;

color:white;

}


.logo span{

color:#4f8cff;

}


nav ul{

display:flex;

gap:35px;

list-style:none;

}


nav a{

color:white;

text-decoration:none;

transition:.3s;

}


nav a:hover{

color:#4f8cff;

}


.hero{

min-height:100vh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

padding-top:100px;

}


.hero h1{

font-size:72px;

line-height:1.05;

margin:20px 0;

}


.subtitle{

color:#4f8cff;

font-weight:700;

letter-spacing:4px;

}


.hero p{

font-size:20px;

color:#b6bfd6;

}


.buttons{

display:flex;

gap:20px;

margin-top:40px;

}


.btn{

background:#4f8cff;

padding:18px 36px;

border-radius:14px;

text-decoration:none;

color:white;

font-weight:600;

transition:.3s;

}


.btn:hover{

transform:translateY(-5px);

}


.btn-outline{

border:2px solid #4f8cff;

padding:18px 36px;

border-radius:14px;

color:white;

text-decoration:none;

transition:.3s;

}


.btn-outline:hover{

background:#4f8cff;

}


.hero-image{

display:flex;

justify-content:center;

}


.hero-image img{

width:550px;

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

}


footer{

padding:40px;

text-align:center;

color:#7a8799;

}

body.light{

background:white;

color:#111;

}


body.light .header{

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

}


body.light nav a{

color:#111;

}


body.light .logo{

color:#111;

}


body.light .hero p{

color:#555;

}

.section-title{

text-align:center;

margin-bottom:70px;

}


.section-title span{

color:#4f8cff;

letter-spacing:4px;

font-weight:700;

}


.section-title h2{

font-size:45px;

margin-top:15px;

}



.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



.about-image img{

width:100%;

border-radius:30px;

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

}



.about-text h3{

font-size:38px;

margin-bottom:25px;

}


.about-text p{

color:#aab5c9;

font-size:18px;

}



.info-box{

display:flex;

gap:25px;

margin-top:40px;

}



.info-box div{

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

padding:25px;

border-radius:20px;

text-align:center;

}



.info-box strong{

font-size:40px;

color:#4f8cff;

}




.skills{

background:#0d1324;

}



.skill{

margin-bottom:30px;

}



.skill-head{

display:flex;

justify-content:space-between;

margin-bottom:10px;

}


.progress{

height:12px;

background:#202a44;

border-radius:20px;

overflow:hidden;

}


.progress div{

height:100%;

background:
linear-gradient(
90deg,
#4f8cff,
#8b5cf6
);

}



.cards{

display:grid;

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

gap:30px;

}



.card{

background:

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

padding:40px;

border-radius:25px;

transition:.4s;

border:

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

}



.card:hover{

transform:
translateY(-15px);

box-shadow:

0 20px 60px rgba(0,0,0,.4);

}



.icon{

font-size:50px;

margin-bottom:25px;

}



.card h3{

font-size:28px;

margin-bottom:15px;

}
.portfolio{

background:#090f20;

}



.filters{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:50px;

}



.filter{

background:#151e35;

border:none;

color:white;

padding:15px 30px;

border-radius:30px;

cursor:pointer;

transition:.3s;

}



.filter:hover,
.filter.active{

background:#4f8cff;

}



.projects{

display:grid;

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

gap:30px;

}



.project-card{

position:relative;

overflow:hidden;

border-radius:25px;

background:#111827;

transition:.4s;

}



.project-card img{

width:100%;

height:300px;

object-fit:cover;

transition:.5s;

}



.project-card:hover img{

transform:scale(1.1);

}



.project-info{

padding:30px;

}



.project-info h3{

font-size:26px;

}



.project-info button{

margin-top:20px;

padding:12px 25px;

border:none;

border-radius:20px;

background:#4f8cff;

color:white;

cursor:pointer;

}





.modal{

display:none;

position:fixed;

inset:0;

background:
rgba(0,0,0,.8);

align-items:center;

justify-content:center;

z-index:2000;

}



.modal-content{

background:#111827;

padding:50px;

border-radius:30px;

width:500px;

position:relative;

}



.close{

position:absolute;

right:25px;

top:15px;

font-size:35px;

cursor:pointer;

}
.timeline{

max-width:900px;

margin:auto;

}



.timeline-item{

display:flex;

gap:40px;

margin-bottom:40px;

}



.year{

font-size:35px;

color:#4f8cff;

font-weight:700;

}



.timeline-box{

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

padding:30px;

border-radius:25px;

flex:1;

}




.review-grid{

display:grid;

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

gap:30px;

}



.review-card{

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

padding:35px;

border-radius:25px;

text-align:center;

}



.avatar{

font-size:55px;

}



.stars{

color:#ffd700;

margin-top:15px;

}




.blog-grid{

display:grid;

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

gap:30px;

}



.blog-card{

background:#111827;

border-radius:25px;

overflow:hidden;

}



.blog-card img{

width:100%;

height:220px;

object-fit:cover;

}



.blog-card div{

padding:25px;

}



.blog-card a{

color:#4f8cff;

text-decoration:none;

}



.faq-item{

max-width:800px;

margin:20px auto;

}



.faq-item button{

width:100%;

padding:25px;

border:none;

border-radius:15px;

background:#151e35;

color:white;

font-size:18px;

cursor:pointer;

}


.faq-item p{

display:none;

padding:20px;

background:#0d1324;

border-radius:15px;

}
.contact-grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:60px;

}



.contact-info h3{

font-size:35px;

margin-bottom:20px;

}



.contact-item{

margin:25px 0;

font-size:18px;

}



.contact-item a{

color:#4f8cff;

text-decoration:none;

}



.socials{

display:flex;

gap:15px;

margin-top:30px;

}


.socials a{

background:#151e35;

padding:12px 25px;

border-radius:20px;

color:white;

text-decoration:none;

}



.contact-form form{

display:flex;

flex-direction:column;

gap:20px;

}



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

background:#111827;

border:1px solid #28344f;

padding:18px;

border-radius:15px;

color:white;

font-size:16px;

}



.contact-form textarea{

height:160px;

resize:none;

}



.contact-form button{

padding:18px;

border:none;

border-radius:20px;

background:#4f8cff;

color:white;

font-size:17px;

cursor:pointer;

}



.map{

margin-top:70px;

}


.map iframe{

width:100%;

height:400px;

border:0;

border-radius:25px;

}



.footer{

background:#050816;

padding:70px 10% 30px;

}



.footer-grid{

display:grid;

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

gap:40px;

}



.footer a{

display:block;

color:#9ca8bf;

text-decoration:none;

margin:10px 0;

}



.copyright{

text-align:center;

margin-top:50px;

color:#667085;

}



#scrollTop{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border-radius:50%;

border:none;

background:#4f8cff;

color:white;

font-size:25px;

cursor:pointer;

display:none;

}



.cookie{

position:fixed;

bottom:30px;

left:30px;

right:30px;

background:#111827;

padding:25px;

border-radius:20px;

display:flex;

justify-content:space-between;

align-items:center;

z-index:3000;

}



.cookie button{

background:#4f8cff;

border:none;

padding:12px 30px;

border-radius:20px;

color:white;

}
.preloader{

position:fixed;

inset:0;

background:#09090f;

display:flex;

align-items:center;

justify-content:center;

z-index:9999;

transition:.5s;

}


.loader{

display:flex;

gap:15px;

}


.loader span{

width:20px;

height:20px;

background:#4f8cff;

border-radius:50%;

animation:
loading 1s infinite alternate;

}


.loader span:nth-child(2){

animation-delay:.2s;

}


.loader span:nth-child(3){

animation-delay:.4s;

}



@keyframes loading{

from{

transform:translateY(0);

opacity:.5;

}

to{

transform:translateY(-25px);

opacity:1;

}

}


.preloader.hide{

opacity:0;

visibility:hidden;

}