*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins', sans-serif;

background:#07131f;

overflow-x:hidden;

color:white;

position:relative;

}

/* BACKGROUND GLOW */

body::before{

content:'';

position:fixed;

width:500px;
height:500px;

background:#ff7b00;

top:-180px;
left:-180px;

border-radius:50%;

filter:blur(150px);

opacity:0.35;

z-index:-2;

}

body::after{

content:'';

position:fixed;

width:500px;
height:500px;

background:#00bfff;

bottom:-180px;
right:-180px;

border-radius:50%;

filter:blur(150px);

opacity:0.25;

z-index:-2;

}

/* NAVBAR */

.navbar{

background:rgba(7,19,31,0.55);

backdrop-filter:blur(20px);

border-bottom:
1px solid rgba(255,255,255,0.08);

padding:18px 0;

transition:0.3s;

}

.navbar-brand{

color:white !important;

font-family:'Bebas Neue', sans-serif;

font-size:42px;

letter-spacing:4px;

}

.nav-link{

color:white !important;

margin-left:18px;

font-weight:500;

transition:0.3s;

position:relative;

}

.nav-link:hover{

color:#ffb347 !important;

}

.nav-link::after{

content:'';

position:absolute;

left:0;
bottom:-5px;

width:0%;

height:2px;

background:#ffb347;

transition:0.4s;

}

.nav-link:hover::after{

width:100%;

}
.navbar-toggler{

border:none;

box-shadow:none !important;

}

.navbar-toggler:focus{

box-shadow:none !important;

outline:none;

}

.navbar-toggler-icon{

filter: invert(1);

}

.dropdown-menu{

background:#0d1d2d;

border:none;

border-radius:22px;

padding:15px;

}

.dropdown-item{

color:white;

padding:12px 18px;

border-radius:12px;

transition:0.3s;

}

.dropdown-item:hover{

background:#ff7b00;

color:white;

}

/* HERO */

.hero{

min-height:100vh;

display:flex;

align-items:center;

padding:120px 0;

}

.hero-title{

font-family:'Bebas Neue', sans-serif;

font-size:120px;

line-height:1;

letter-spacing:5px;

background:
linear-gradient(
90deg,
#ffffff,
#ffb347,
#ffffff
);

background-size:300% 300%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:textGradient 6s ease infinite;

}

@keyframes textGradient{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

.hero-sub{

color:#d9d9d9;

font-size:22px;

line-height:2;

margin-top:20px;

}

.hero-img{

width:100%;

max-width:380px;

border-radius:35px;

box-shadow:
0 20px 50px rgba(0,0,0,0.4);

animation:floatImage 4s ease infinite;

}

@keyframes floatImage{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0px);
}

}

/* BUTTON */

.hero-btn{

display:flex;

gap:20px;

margin-top:40px;

flex-wrap:wrap;

}

.btn-custom{

padding:15px 35px;

border-radius:60px;

text-decoration:none;

font-weight:600;

transition:0.4s;

}

.btn-orange{

background:#ff7b00;

color:white;

box-shadow:
0 10px 25px rgba(255,123,0,0.3);

}

.btn-orange:hover{

transform:translateY(-5px);

color:white;

}

.btn-blue{

background:#00bfff;

color:white;

box-shadow:
0 10px 25px rgba(0,191,255,0.3);

}

.btn-blue:hover{

transform:translateY(-5px);

color:white;

}

/* SECTION */

.section{

padding:120px 0;

}

.section-title{

text-align:center;

font-family:'Bebas Neue', sans-serif;

font-size:82px;

letter-spacing:4px;

margin-bottom:20px;

}

.section-sub{

text-align:center;

max-width:800px;

margin:auto;

line-height:2;

color:#d9d9d9;

margin-bottom:70px;

}

/* GLASS CARD */

.glass-card{

background:
linear-gradient(
145deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.03)
);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(20px);

border-radius:35px;

padding:35px;

transition:0.4s;

height:100%;

overflow:hidden;

position:relative;

}

.glass-card::before{

content:'';

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.08),
transparent
);

transition:0.7s;

}

.glass-card:hover::before{

left:100%;

}

.glass-card:hover{

transform:
translateY(-10px)
scale(1.02);

}

/* SKILL BADGE */

.skill-badge{

display:inline-block;

background:#ff7b00;

padding:12px 24px;

border-radius:50px;

margin:10px;

font-weight:600;

transition:0.3s;

}

.skill-badge:hover{

transform:translateY(-5px);

background:#00bfff;

}

/* PROJECT */

.project-card{

overflow:hidden;

border-radius:30px;

background:
linear-gradient(
145deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.03)
);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(20px);

transition:0.4s;

height:100%;

}

.project-card:hover{

transform:translateY(-12px);

}

.project-img{

width:100%;

height:240px;

object-fit:cover;

transition:0.5s;

}

.project-card:hover .project-img{

transform:scale(1.08);

}

.project-content{

padding:30px;

}

.project-title{

font-size:28px;

font-weight:700;

color:#ffb347;

margin-bottom:15px;

}

/* CAROUSEL */

.carousel-img{

height:420px;

object-fit:cover;

border-radius:30px;

}

/* AWARD */

.award-img{

width:100%;

border-radius:25px;

transition:0.4s;

cursor:pointer;

}

.award-img:hover{

transform:scale(1.05);

}

/* CONTACT */

.contact-card{

text-align:center;

padding:60px;

border-radius:40px;

background:
linear-gradient(
145deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.03)
);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(20px);

}

.contact-btn{

display:inline-flex;

align-items:center;

gap:10px;

margin:12px;

padding:16px 32px;

border-radius:60px;

text-decoration:none;

color:white;

font-weight:600;

transition:0.4s;

}

.contact-btn:hover{

transform:translateY(-5px);

color:white;

}

.wa{
background:#25D366;
}

.ig{
background:#E1306C;
}

.gmail{
background:#ff4d4d;
}

/* FOOTER */

footer{

text-align:center;

padding:40px;

color:#d9d9d9;

}

/* RESPONSIVE */

@media(max-width:992px){

.hero-title{
font-size:80px;
}

}

@media(max-width:768px){

.hero{
text-align:center;
}

.hero-title{
font-size:60px;
}

.hero-sub{
font-size:18px;
}

.hero-btn{
justify-content:center;
}

.section-title{
font-size:52px;
}

.carousel-img{
height:260px;
}

}
