/* ─── Reset / base ─────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
html{scroll-behavior:smooth}
body{background:#080808;color:#fff}

/* ─── Header / hero ───────────────────────────────────────────────────── */
#header{width:100%;height:100vh;background:url(images/B3.webp) center/cover no-repeat}
.container{padding:10px 10%}

nav{display:flex;align-items:center;justify-content:space-between}
#waveText{font-size:1.5rem;font-weight:700;white-space:nowrap}
#waveText span{display:inline-block;transition:transform .2s ease-out}

nav ul{display:flex;align-items:center;list-style:none}
nav ul li{position:relative}
nav ul li a{
  display:flex;align-items:center;
  padding:10px 13px;font-size:1.2rem;font-weight:700;color:#fff;text-decoration:none;
  transition:color .3s ease
}
nav ul li a:hover{color:#ff0000}
nav ul li a::after{
  content:'';position:absolute;left:0;bottom:5px;width:0;height:3px;background:#ff0000;
  transition:width .3s ease-in-out
}
nav ul li a:hover::after{width:100%}

.header-text{margin-top:20%;font-size:30px}
.header-text h1{margin-top:60px;font-size:40px}
.header-text h1 span{color:#ff0000}

/* ─── About section ───────────────────────────────────────────────────── */
#about{padding:80px 0;color:#ababab}
.row{display:flex;justify-content:space-between;flex-wrap:wrap}
.about-col-1{flex-basis:35%}
.about-col-1 img{width:100%;border-radius:15px}
.about-col-2{flex-basis:60%}
.sub-title{font-size:60px;font-weight:600;color:#fff}

/* tabs */
.tab-titles{display:flex;margin:20px 0 40px}
.tab-links{margin-right:50px;font-size:18px;font-weight:500;cursor:pointer;position:relative}
.tab-links::after{content:'';position:absolute;left:0;bottom:-8px;width:0;height:3px;background:#ff0000;transition:.5s}
.tab-links.active-link::after{width:70%}
.tab-contents{display:none}
.tab-contents.active-tab{display:block}
.tab-contents ul li{list-style:none;margin:10px 0}
.tab-contents ul li span{color:#ff0000;font-size:14px}

/* ─── Services / Work ─────────────────────────────────────────────────── */
#work{padding:30px 0}
.services-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;margin-top:50px
}
.services-list div{
  background:#262626;padding:40px;font-size:13px;font-weight:300;border-radius:10px;
  transition:background .5s,transform .5s
}
.services-list div i{font-size:50px;margin-bottom:30px}
.services-list div h2{font-size:30px;font-weight:500;margin-bottom:15px}
.services-list div:hover{background:#ff0000;transform:translateY(-10px)}

/* ─── Experience / Education grids ───────────────────────────────────── */
.exp-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px
}
.exp-item{margin:0}
.exp-date{color:#ff0000;font-size:14px}
.exp-heading{color:#fff;margin-bottom:12px}

.edu-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px
}
.course-list li{list-style:disc inside;margin:4px 0}

/* ─── Contact ─────────────────────────────────────────────────────────── */
.contact-left{flex-basis:35%}
.contact-right{flex-basis:60%}
.contact-left p{margin-top:30px}
.contact-left p i{color:#ff0000;margin-right:15px;font-size:25px}

.social-icons{margin-top:30px}
.social-icons a{
  font-size:30px;margin-right:15px;color:#fff;display:inline-block;text-decoration:none;
  transition:transform .5s
}
.social-icons a:hover{color:#ff0000;transform:translateY(-5px)}

.btn{display:block;margin:50px auto;padding:14px 50px;border-radius:6px;color:#fff;
     width:max-content;border:1px solid #ff0000;text-decoration:none;transition:background .5s}
.btn:hover{background:#ff0000}
.btn2{background:#ff0000}
.btn2:hover{background:#9d0101;transform:translateY(-3px)}

form input,form textarea{
  width:100%;background:#262626;color:#fff;border:0;border-radius:6px;
  padding:15px;margin:15px 0;font-size:18px;outline:none
}

#formMsg{display:block;margin-top:12px;color:#07c517}

/* footer */
.copyright{width:100%;text-align:center;padding:25px 0;background:#262626;font-weight:300;margin-top:20px}

/* ─── Mobile tweaks ───────────────────────────────────────────────────── */
nav .fa-solid{display:none}

@media(max-width:600px){
  #header{background-image:url(images/B3.webp)}
  .header-text{margin-top:100%;font-size:16px}
  .header-text h1{font-size:30px}

  nav .fa-solid{display:block;font-size:25px}

  nav ul{
    background:#1d1c1c;position:fixed;top:0;right:-200px;width:200px;height:100vh;padding-top:50px;
    z-index:2;transition:right .5s
  }
  nav ul li{display:block;margin:25px}
  nav ul .fa-solid{position:absolute;top:25px;left:25px;cursor:pointer}

  .sub-title{font-size:40px}
  .about-col-1,.about-col-2{flex-basis:100%}
  .about-col-1{margin-bottom:30px}
  .about-col-2{font-size:14px}
  .tab-links{font-size:16px;margin-right:20px}
  .contact-left,.contact-right{flex-basis:100%}
  .grad-grid{grid-template-columns:1fr}
}