/* === Base =================================================== */
body{
  margin:0;
  font-family:'Quicksand',sans-serif;
  background:#fffdfb;
}
html{scroll-behavior:smooth;}

/* === Splash Screen === */
.splash-container{position:relative;height:100vh;width:100vw;overflow:hidden;}
.splash-img{height:100%;width:100%;object-fit:cover;display:block;}
.typing-box{
  position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);
  font-size:1.8rem;color:#222;white-space:pre;display:flex;align-items:center;
  justify-content:center;font-weight:bold;
}
.arrow-enter{
  font-size:2rem;color:#f4a6b0;margin-left:12px;cursor:pointer;
  animation:fadeIn 1s ease-in-out;transition:transform .2s;
}
.arrow-enter:hover{transform:scale(1.2);color:#e95f80;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* === Hero Section === */
.hero{height:100vh;position:relative;overflow:hidden;}
.hero-video{
  width:100%;height:100%;object-fit:cover;
  position:absolute;top:0;left:0;z-index:-1;
}
.hero-buttons{
  position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
  display:flex;flex-wrap:wrap;gap:1rem;z-index:1;
}
.pink-btn{
  background:#f6d2dc;color:#3b3b3b;padding:.7rem 1.4rem;border-radius:14px;
  text-decoration:none;font-weight:600;box-shadow:0 3px 6px rgba(0,0,0,.12);
  transition:transform .2s,background-color .2s,box-shadow .2s;
}
.pink-btn:hover{
  background:#f4b6c2;transform:translateY(-3px);
  box-shadow:0 6px 12px rgba(0,0,0,.15);
}
.hero::after{content:"";display:block;height:1px;}

/* === About Section === */
.about-section{
  background:#fff0f4;padding:5rem 2rem;position:relative;
  overflow:visible;min-height:100vh;
}
.about-wrapper{max-width:1100px;width:100%;margin:0 auto;}
.about-title{font-size:2rem;color:#c05a7c;font-weight:bold;margin-bottom:2rem;}
.about-content{
  position:relative;width:100%;min-height:450px;
  overflow:visible;margin-bottom:14rem;
}
.about-bubble{
  position:absolute;top:0;right:0;max-width:650px;padding:2.5rem;
  background:#fffdfb;border:8px solid #f9c6d1;border-radius:40px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);text-align:center;color:#333;
  font-size:1.15rem;line-height:1.8;opacity:0;transform:translateY(30px);
  transition:opacity 1s,transform 1s;z-index:2;
}
.about-bubble.visible{opacity:1;transform:translateY(0);}
.about-bubble::after{
  content:'';position:absolute;bottom:-20px;left:40px;width:40px;height:40px;
  background:#fffdfb;border-bottom:8px solid #f9c6d1;border-right:8px solid #f9c6d1;
  border-radius:0 0 0 40px;transform:rotate(45deg);
}
.about-image{
  position:absolute;bottom:-225px !important;left:0 !important;width:340px;
  max-width:45vw;object-fit:contain;z-index:1;opacity:0;transform:translateY(30px);
  transition:opacity 1s,transform 1s;
}
.about-image.visible{opacity:1;transform:translateY(0);}

/* === Skills Box === */
.skills-box{
  margin-top:16rem;background:#ffeaf1;border:2px solid #f9c6d1;border-radius:20px;
  padding:2rem;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.05);
  max-width:850px;margin-left:auto;margin-right:auto;
}
.skills-title{font-size:1.5rem;color:#b84c6b;margin-bottom:1rem;}
.skills-list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
  padding:0;list-style:none;margin:0;
}
.skills-list li{
  background:#fbd5df;color:#5c2d3b;padding:.5rem 1rem;border-radius:12px;
  font-size:.95rem;font-weight:500;box-shadow:0 2px 4px rgba(0,0,0,.05);
  transition:transform .2s,background-color .2s;
}
.skills-list li:hover{transform:translateY(-3px) scale(1.05);background:#f9b8c4;}

/* === ≤768px adjustments (existing) === */
@media(max-width:768px){
  .typing-box{font-size:1.4rem;flex-direction:column;}
  .hero-buttons{flex-direction:column;align-items:center;}
  .about-title{text-align:center;}
  .about-content{flex-direction:column;align-items:center;min-height:auto;}
  .about-image,.about-bubble{position:static;opacity:1;transform:none;margin-bottom:2rem;}
  .skills-box{margin-top:2rem;}
}

/* === Skills frame decor === */
.skills-frame-wrapper{margin-top:12 rem;position:relative;margin:3rem auto;max-width:800px;width:90%;}
.skills-frame{width:100%;height:auto;display:block;}
.skills-overlay{
  position:absolute;top:24%;left:50%;transform:translateX(-50%);
  width:85%;max-width:640px;padding:.5rem 1rem;z-index:2;
}
/* align hover style with earlier list */
.skills-list{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 1.2rem;padding:0;list-style:none;margin:0;}
.skills-list li{cursor:default;}
.skills-list li:hover{transform:translateY(-3px) scale(1.05);background:#f9b8c4;}

/* === Resume button === */
.resume-download{text-align:center;margin-top:3rem;}
.resume-download a{
  display:inline-flex;align-items:center;gap:.75rem;background:#fcd2de;
  padding:1rem 1.8rem;border-radius:16px;text-decoration:none;color:#5c2d3b;
  font-weight:600;font-size:1.05rem;box-shadow:0 4px 10px rgba(0,0,0,.08);
  transition:transform .2s,background-color .2s;
}
.resume-download a:hover{background:#fbbacb;transform:translateY(-3px);}
.resume-icon{width:30px;height:30px;}

/* === Timeline ================================================= */
.timeline-section{background:#fff8fa;padding:4rem 1rem;}
.timeline{position:relative;max-width:1000px;margin:0 auto;}
.timeline::before{
  content:"";position:absolute;left:50%;width:4px;background:#f9c6d1;
  top:0;bottom:0;transform:translateX(-50%);
}
.timeline-item{position:relative;width:50%;padding:2rem;box-sizing:border-box;}
.timeline-item.left{left:0;text-align:right;}
.timeline-item.right{left:50%;text-align:left;}

/* Dot + connector (hidden until JS adds .in-view) */
.timeline-dot{
  position:absolute;top:1.1rem;width:20px;height:20px;background:#fbb6c4;
  border:4px solid #fffdfb;border-radius:50%;box-shadow:0 0 0 3px #fbb6c4;
  z-index:3;transform:scale(0);transition:transform .45s;
}
.timeline-line{
  position:absolute;top:1.65rem;height:4px;background:#f9c6d1;
  transform:scaleX(0);transition:transform .45s .15s;transform-origin:right;
}
.timeline-item.left  .timeline-dot{right:-10px;}
.timeline-item.left  .timeline-line{right:-4px;width:calc(50% - 40px);}
.timeline-item.right .timeline-dot{left:-10px;}
.timeline-item.right .timeline-line{left:-4px;width:calc(50% - 40px);transform-origin:left;}
.timeline-item.in-view .timeline-dot {transform:scale(1);}
.timeline-item.in-view .timeline-line{transform:scaleX(1);}

/* Mobile timeline tweak */
@media(max-width:768px){
  .timeline::before{left:18px;}
  .timeline-item{width:100%;left:0;padding-left:55px;}
  .timeline-item .timeline-dot{left:-12px;}
  .timeline-item .timeline-line{left:-4px;width:35px;transform-origin:left;}
}

/* === Course Cards Grid ======================================= */
.course-section{
  min-height:100vh;padding:0 2rem 4rem;background:#fff0f4;
  display:flex;flex-direction:column;justify-content:center;
}
.course-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2rem;max-width:1100px;margin:0 auto;
}
.course-grid a{text-decoration:none;color:inherit;}
.course-card{
  background:#ffeaf1;border:2px solid #f9c6d1;border-radius:18px;
  padding:0;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.05);
  transition:.25s ease;display:flex;flex-direction:column;height:320px;overflow:hidden;
}
.course-card img{flex:1 1 auto;width:100%;object-fit:cover;}
.course-card p{
  margin:0;padding:.8rem 0;background:#ffeaf1;font-weight:600;
  color:#6a3350;font-size:1.05rem;
}
.course-card:hover{transform:translateY(-6px);box-shadow:0 8px 18px rgba(0,0,0,.08);}
#projects{scroll-margin-top:0px;}

/* timeline lists inside cards */
.timeline-item ul{list-style:none;padding-left:0;margin:0;}
.timeline-item li{margin-bottom:.6rem;padding-left:0;}

.course-link{text-decoration:none;}

/* === Contact Section ========================================= */
.contact-section{
  background:#fff0f4;min-height:100vh;padding:2rem 2rem 2rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  scroll-margin-top:0;text-align:center;
}
.contact-section h2{font-size:2rem;color:#c05a7c;margin-bottom:1rem;}
.contact-section p{color:#5c2d3b;font-size:1.1rem;margin-bottom:2.5rem;max-width:600px;}
.contact-form{
  display:flex;flex-direction:column;gap:1.2rem;width:100%;max-width:500px;
}
.contact-form input,
.contact-form textarea{
  padding:1rem;border:2px solid #f9c6d1;border-radius:14px;
  font-size:1rem;font-family:'Quicksand',sans-serif;resize:vertical;
  box-shadow:0 3px 8px rgba(0,0,0,.04);
}
.contact-form textarea{min-height:150px;}
.contact-form button{
  background:#fcd2de;border:none;padding:1rem;border-radius:14px;
  font-weight:bold;color:#6a3350;font-size:1.1rem;cursor:pointer;
  transition:background-color .3s ease;
}
.contact-form button:hover{background:#fbbacb;}

/* skill pills tooltip */
.skills-list li{position:relative;}
.skills-list li::after{
  content:attr(data-tooltip);position:absolute;bottom:120%;left:50%;
  transform:translateX(-50%);background:#fff0f4;color:#b84c6b;
  padding:.5rem .75rem;border-radius:8px;font-size:.85rem;white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.1);opacity:0;pointer-events:none;
  transition:opacity .2s;z-index:10;
}
.skills-list li:hover::after{opacity:1;}

/* Social icons */
.social-icons{margin-top:2.5rem;display:flex;gap:2rem;justify-content:center;}
.social-icons a{
  font-size:1.8rem;color:#b84c6b;transition:transform .2s,color .2s;
}
.social-icons a:hover{color:#f06292;transform:scale(1.2);}

/* ==========================================================
   📱  RESPONSIVE LAYER — layout tweaks only
   ========================================================== */

/* Tablets / small laptops */
@media(max-width:992px){
  .hero-video{object-position:50% 50%;}
  .hero-buttons{gap:.8rem;}

  .about-content{margin-bottom:8rem;}
  .about-bubble{max-width:90%;padding:2rem;}
  .about-image{width:260px;bottom:-180px !important;}

  .timeline::before{width:3px;}
}

/* Large phones / portrait tablets */
@media(max-width:768px){
  h1,.about-title{font-size:1.7rem;}
  .typing-box{font-size:1.3rem;}

  .hero-buttons{flex-direction:column;}

  .about-content{margin-bottom:6rem;}
  .skills-list{gap:.4rem .6rem;}

  .course-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}

  .timeline::before{left:12px;}
  .timeline-item{padding-left:48px;}
  .timeline-item.left,.timeline-item.right{text-align:left;}
  .timeline-item .timeline-dot{left:-12px;}
  .timeline-item .timeline-line{
    left:-4px;width:32px;transform-origin:left;
  }
}

/* Small phones */
@media(max-width:480px){
  body,.contact-section{padding-left:.75rem;padding-right:.75rem;}
  .hero{height:85vh;}
  .skills-list li{font-size:.85rem;padding:.45rem .9rem;}
  .social-icons a{font-size:1.5rem;}
  .contact-form{max-width:100%;}
}