:root{

--bg:#0f172a;
--card:#111827;
--primary:#38bdf8;
--secondary:#818cf8;
--text:#f8fafc;
--muted:#94a3b8;
--border:rgba(255,255,255,0.08);

}

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

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
max-width:100%;
}

html,
body{
overflow-x:hidden;
width:100%;
}

body{
font-family:'Poppins',sans-serif;
background:var(--bg);
color:var(--text);
}

img,
iframe{
max-width:100%;
display:block;
}

section{
padding:100px 20px;
}

.container{
max-width:1300px;
margin:auto;
width:100%;
}

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

header{
position:fixed;
top:0;
left:0;
width:100%;
background:#0f172ae0;
backdrop-filter:blur(10px);
z-index:1000;
}

.navbar{
max-width:1300px;
margin:auto;
padding:18px 20px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-size:28px;
font-weight:800;
color:var(--primary);
}

.nav-links{
display:flex;
gap:25px;
}

.nav-links a{
text-decoration:none;
color:white;
transition:0.3s;
font-weight:500;
}

.nav-links a:hover{
color:var(--primary);
}

.hamburger{
display:none;
font-size:32px;
cursor:pointer;
color:white;
}

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

.hero{
min-height:100vh;
display:flex;
align-items:center;
padding-top:120px;
overflow:hidden;
}

.hero-container{
max-width:1300px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.hero-img{
display:flex;
justify-content:center;
}

.hero-img img{
width:350px;
height:350px;
border-radius:50%;
object-fit:cover;
border:8px solid rgba(255,255,255,0.1);
}

.hero-content h3{
color:var(--primary);
font-size:24px;
margin-bottom:10px;
}

.hero-content h1{
font-size:64px;
line-height:1.2;
margin-bottom:20px;
word-break:break-word;
}

.hero-content p{
color:var(--muted);
line-height:1.8;
margin-bottom:30px;
}

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

.btn{
padding:14px 28px;
border-radius:12px;
text-decoration:none;
font-weight:600;
transition:0.3s;
display:inline-block;
}

.btn-primary{
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:white;
}

.btn-secondary{
background:var(--card);
color:white;
border:1px solid var(--border);
}

.btn:hover{
transform:translateY(-4px);
}

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

.section-title{
font-size:42px;
text-align:center;
margin-bottom:15px;
}

.section-sub{
text-align:center;
color:var(--muted);
margin-bottom:60px;
}

/* =========================
CARDS
========================= */

.about-grid,
.skills-grid,
.video-grid,
.award-grid,
.project-grid,
.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:25px;
}

.about-card,
.skill-card,
.award-card,
.video-card
.project-card,
.contact-card{
background:var(--card);
padding:30px;
border-radius:24px;
border:1px solid var(--border);
overflow:hidden;
}
. video-card iframe {
   width: 100%;
   aspect-ratio: 16/9;
   border: none;
   border-radius: 12px;
   display: block;
} 
.video-card:hover {
  transform: translateY(-5px); /* Lifts the card up slightly */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Adds a soft glow/shadow */
  cursor: pointer;
}
.about-card i{
font-size:38px;
margin-bottom:20px;
color:var(--primary);
}

.about-card p{
color:var(--muted);
line-height:1.8;
}

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

.timeline{
display:grid;
gap:25px;
}

.timeline-content{
background:var(--card);
padding:30px;
border-radius:24px;
border:1px solid var(--border);
}

.timeline-content p{
color:var(--muted);
line-height:1.8;
}

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

.skill{
margin-bottom:25px;
}

.skill-title{
display:flex;
justify-content:space-between;
margin-bottom:10px;
}

.progress{
height:12px;
background:#1e293b;
border-radius:30px;
overflow:hidden;
}

.progress span{
display:block;
height:100%;
background:linear-gradient(90deg,var(--primary),var(--secondary));
}

/* =========================
VIDEOS & PROJECTS
========================= */

.video-card iframe,
.project-card iframe{
width:100%;
height:240px;
border:none;
border-radius:16px;
}

/* =========================
AWARDS
========================= */

.award-card{
padding:0;
overflow:hidden;
}

.award-card img{
width:100%;
height:250px;
object-fit:cover;
}

.award-content{
padding:25px;
}

.award-content p{
color:var(--muted);
}

/* =========================
CONTACT
========================= */

.contact-item{
display:flex;
align-items:center;
gap:15px;
margin-bottom:20px;
flex-wrap:wrap;
}

.contact-item i{
color:var(--primary);
font-size:20px;
}

.contact-item a{
color:white;
text-decoration:none;
word-break:break-word;
}

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

footer{
padding:30px;
text-align:center;
background:#020617;
color:var(--muted);
}

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

@media(max-width:768px){

section{
padding:80px 15px;
}

/* NAVBAR */

.navbar{
padding:16px 20px;
position:relative;
}

.logo{
font-size:22px;
line-height:1.2;
}

.hamburger{
display:block;
z-index:1001;
}

.nav-links{
position:fixed;
top:70px;
right:-100%;
width:220px;
height:calc(100vh - 70px);
background:#111827;
display:flex;
flex-direction:column;
gap:20px;
padding:30px 20px;
transition:0.4s ease;
z-index:1000;
}

.nav-links.active{
right:0;
}

.nav-links a{
font-size:16px;
}

/* HERO */

.hero{
padding:120px 15px 60px;
}

.hero-container{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:35px;
width:100%;
}

.hero-img{
width:100%;
display:flex;
justify-content:center;
}

.hero-img img{
width:180px;
height:180px;
}

.hero-content{
width:100%;
}

.hero-content h3{
font-size:22px;
}

.hero-content h1{
font-size:48px;
line-height:1.15;
}

.hero-content p{
font-size:15px;
padding:0 10px;
}

.hero-buttons{
display:flex;
flex-direction:column;
align-items:center;
gap:15px;
width:100%;
}

.btn{
width:90%;
max-width:300px;
text-align:center;
}

/* GRID */

.about-grid,
.skills-grid,
.video-grid,
.award-grid,
.project-grid,
.contact-grid{
grid-template-columns:1fr;
}

/* TITLES */

.section-title{
font-size:34px;
}

.section-sub{
font-size:15px;
}

}

/* EXTRA SMALL DEVICES */

@media(max-width:480px){

.hero-content h1{
font-size:40px;
}

.hero-content h3{
font-size:20px;
}

.btn{
font-size:15px;
padding:14px 20px;
}

.logo{
font-size:20px;
}

}

/* =========================
   footer
========================= */
/* Container Layout and Theme Setup */
.developer-footer {
  background-color: #0f172a;
  color: #f8fafc;
  padding: 1.25rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: system-ui, -apple-system, sans-serif;
}

.footer-credit-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Developer Profile */
.dev-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dev-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #38bdf8;
}

.dev-info {
  display: flex;
  flex-direction: column;
}

.dev-title {
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dev-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #f8fafc;
}

/* Copyright Text */
.footer-copyright p {
  margin: 0;
  font-size: 0.875rem;
  text-align: center;
  color: #94a3b8;
}

/* Social Links */
.dev-social-links {
  display: flex;
  gap: 1.25rem;
}

.dev-link {
  color: #f8fafc;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.3s ease, transform 0.2s ease;
}

.dev-link:hover {
  color: #38bdf8;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .footer-credit-container {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 1.2rem;
  }

  .dev-profile {
    flex-direction: column;
    gap: 0.5rem;
  }

  .dev-social-links {
    justify-content: center;
  }
}

.dev-social-links{
  display:flex;
  gap:12px;
}

.dev-link{
  text-decoration:none;
  padding:8px 14px;
  border-radius:8px;
  color:#f8fafc;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}

.web-link{
  background:#111827;
}

.fb-link{
  background:#818cf8;
}

.dev-link:hover{
  opacity:0.8;
}