/* ==========================================
   PerfectIT - style.css
   ========================================== */

:root{
  --bg:#070b14;
  --surface:#0b1220;
  --card:#0f172a;
  --border:#1f2937;
  --primary:#60a5fa;
  --primary-dark:#2563eb;
  --accent:#22c55e;
  --accent-hover:#16a34a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --shadow-sm:0 2px 10px rgba(0,0,0,.25);
  --shadow-md:0 4px 15px rgba(0,0,0,.35);
  --shadow-lg:0 8px 25px rgba(0,0,0,.4);
  --radius:12px;
  --transition:all .3s ease;
}

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

body{
  padding-top:80px;
  font-family:Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

main{max-width:2000px;margin:auto}
section{max-width:2000px;margin:auto;padding:25px 20px}
#student-success{

    max-width:2000px;

    margin:auto;

}
h2{color:var(--primary);font-size:1.6rem;margin-bottom:15px}
ul{padding-left:18px}

/* Navigation */

.navbar,.landing-navbar{
  position:fixed;
  top:0;left:0;width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  z-index:1000;
}

.navbar{padding:10px 0}
.landing-navbar{height:85px;padding:0 25px}

.main-logo,.logo{
  display:flex;
  align-items:center;
  margin-left:15px;
}

.main-logo img{width:150px;height:60px}
.logo img{width:25px;height:35px}

.logo-text h3{color:#fff;font-size:1.5rem}
.logo-text span{color:var(--primary);font-size:.85rem}

.menu-toggle{
  display:none;
  margin-right:20px;
  font-size:2rem;
  color:#fff;
  cursor:pointer;
}

.nav-links{
  display:flex;
  gap:20px;
  margin-right:30px;
}

.nav-links a,
.nav-links a:visited{
  color:#fff;
  text-decoration:none;
  font-weight:500;
  transition:var(--transition);
}

.nav-links a:hover{color:var(--primary)}
.nav-links a.active{
  color:#00bfff;
  border-bottom:2px solid var(--primary);
  font-weight:bold;
}


/* Hero */

/* ==========================================
   Home Hero
========================================== */

.hero{

    padding:90px 20px;

    background:
    radial-gradient(circle at top,#172033 0%,#070b14 70%);

}

.hero-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    max-width:900px;

    margin:auto;


}

.hero-text{

    text-align:center;

}

.hero-tag{

    display:inline-block;

    margin-bottom:20px;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(96,165,250,.12);

    border:1px solid rgba(96,165,250,.25);

    color:var(--primary);

    font-size:.9rem;

    font-weight:700;

}

.hero h1{

    font-size:3.8rem;

    line-height:1.1;

    margin-bottom:25px;

    color:white;

}

.hero-description{

    margin:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

     width:100%;

    max-width:520px;


}

/* ==========================================
   Featured Student (Home Page)
========================================== */

.student-carousel{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:1200px;
    min-height:590px;
    margin:10px auto 42px;
    padding:25px 58px;
    overflow:hidden;
}

.carousel-track{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;
    gap:22px;
    width:100%;
    min-height:520px;
}

.student-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:0;
    min-height:455px;
    padding:30px 24px;
    background:linear-gradient(145deg,#111b30,var(--card));
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:var(--shadow-md);
    transition:opacity .4s ease,transform .4s ease,border-color .4s ease;
}

.student-avatar{
    width:112px;
    height:112px;
    margin-bottom:18px;
    flex:0 0 auto;
}

.student-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border:4px solid var(--primary);
    border-radius:50%;
    box-shadow:0 0 0 5px rgba(96,165,250,.13);
}


.student-initials{

    width:100%;
    height:100%;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:2.35rem;
    font-weight:700;

    color:white;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

}

.student-card h3{
    margin-bottom:3px;
    color:#fff;
    font-size:1.15rem;
    line-height:1.3;
}

.student-card .institution{
    min-height:48px;
    margin-bottom:7px;
    color:var(--muted);
    font-size:.88rem;
}

.student-card .stars{
    color:#fbbf24;
    font-size:1.05rem;
    letter-spacing:2px;
}

.student-card .modules{
    margin:11px 0 16px;
    color:var(--primary);
    font-size:.78rem;
    font-weight:700;
}

.student-card .testimonial{
    display:-webkit-box;
    margin:0;
    overflow:hidden;
    color:#d1d5db;
    font-size:.9rem;
    line-height:1.65;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:6;
}

.student-card .btn-secondary{
    margin-top:auto;
    padding-top:10px;
}

.previous{
    opacity:.38;
    transform:scale(.88) translateX(24px);

}

.current{
    min-height:515px;
    padding:34px 28px;
    border-color:rgba(96,165,250,.65);
    box-shadow:0 22px 55px rgba(0,0,0,.5),0 0 35px rgba(96,165,250,.1);
    transform:scale(1.03);
    z-index:5;

}

.next{
    opacity:.38;
    transform:scale(.88) translateX(-24px);

}

.carousel-btn{
    position:absolute;
    top:50%;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid rgba(96,165,250,.45);
    border-radius:50%;
    background:rgba(15,23,42,.94);
    color:#fff;
    font-size:1.45rem;
    cursor:pointer;
    box-shadow:var(--shadow-md);
    transform:translateY(-50%);
    transition:background .25s ease,border-color .25s ease,transform .25s ease;
    z-index:10;
}

.carousel-btn:hover,
.carousel-btn:focus-visible{
    background:var(--primary);
    border-color:var(--primary);
    outline:none;
    transform:translateY(-50%) scale(1.08);
}

.carousel-btn:disabled{
    opacity:.35;
    cursor:not-allowed;
}

#prevStudent{left:4px}
#nextStudent{right:4px}

.carousel-message{
    grid-column:1/-1;
    color:var(--muted);
}

.carousel-track.slide-left .student-card{
    animation:carouselFromRight .42s ease both;
}

.carousel-track.slide-right .student-card{
    animation:carouselFromLeft .42s ease both;
}

@keyframes carouselFromRight{
    from{opacity:0;translate:45px 0}
}

@keyframes carouselFromLeft{
    from{opacity:0;translate:-45px 0}
}

@media (max-width:900px){

    .student-carousel{
        min-height:550px;
        padding-inline:46px;
    }

    .carousel-track{
        display:flex;
        justify-content:center;
        min-height:505px;
    }

    .student-card.previous,
    .student-card.next{
        display:none;
    }

    .student-card.current{
        width:min(100%,520px);
        min-height:485px;
        transform:none;
    }

}

@media (max-width:600px){

    .student-carousel{
        min-height:520px;
        margin-bottom:28px;
        padding:16px 34px;
    }

    .carousel-track{
        min-height:485px;
    }

    .student-card.current{
        min-height:465px;
        padding:27px 20px;
    }

    .student-avatar{
        width:96px;
        height:96px;
    }

    .student-card .testimonial{
        -webkit-line-clamp:7;
    }

    .carousel-btn{
        width:38px;
        height:38px;
        font-size:1.15rem;
    }

    #prevStudent{left:0}
    #nextStudent{right:0}

}


/* ==========================================
   Student Success Preview
========================================== */

.success-preview{

    padding:70px 20px;

    background:#0b1220;

}

.success-content{

    max-width:1200px;

    margin:auto;

    text-align:center;

}

.success-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(34,197,94,.12);

    border:1px solid rgba(34,197,94,.3);

    color:var(--accent);

    font-weight:700;

    margin-bottom:20px;

}

.success-description{

    max-width:760px;

    margin:20px auto 40px;

    color:var(--muted);

    line-height:1.8;

}

.success-highlights{

    display:grid;

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

    gap:25px;

    margin-bottom:40px;

}

.highlight{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:16px;

    padding:25px;

}

.highlight h3{

    color:var(--primary);

    font-size:2rem;

    margin-bottom:8px;

}

.highlight p{

    color:var(--muted);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:10px;

    border:2px solid var(--primary);

    color:var(--primary);

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.btn-secondary:hover{

    background:var(--primary);

    color:#07111f;

}

.logo-container{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:2px;
  margin-bottom:20px;
}

.logo-container img{width:400px;height:auto}

.hero-logo-text{text-align:left}
.hero-logo-text h1{font-size:3.5rem;color:#fff}
.hero-logo-text p{color:var(--primary)}

/* Buttons */

.btn,.cta,#contactForm button{
  display:inline-block;
  padding:14px 28px;
  border:none;
  border-radius:10px;
  text-decoration:none;
  font-weight:bold;
  cursor:pointer;
  transition:var(--transition);
}

.cta,#contactForm button{
  background:var(--accent);
  color:#fff;
}

.cta:hover,#contactForm button:hover{
  background:var(--accent-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

/* Cards */

.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.card{
    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;

    background: var(--card);
    border: 1px solid var(--border);

    padding: 25px;
    border-radius: var(--radius);
    margin-bottom: 20px;

    opacity: 0;
    transform: translateY(30px);

    transition: var(--transition);
}

/* ==========================================
   Landing Page Cards
========================================== */

.landing-page .card{
    justify-content: center;
    align-items: center;
    text-align: center;
}

.card.show{opacity:1;transform:translateY(0)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.grid .card .cta{margin-top:15px;padding:10px 20px}

.main-Icon img{width:100px;height:auto;object-fit:cover}

/* Profile */

.profile{text-align:center;margin-top:-20px}
.profile img{
  width:170px;height:170px;
  border-radius:50%;
  border:3px solid var(--accent);
  object-fit:cover;
}

/* Contact */

#contactForm{max-width:700px;margin:auto}
#contactForm form{display:flex;flex-direction:column;gap:15px}

#contactForm input,
#contactForm textarea{
  width:100%;
  padding:12px;
  border:1px solid #ddd;
  border-radius:8px;
  font:inherit;
}

#contactForm textarea{min-height:150px;resize:vertical}

#contactForm input:focus,
#contactForm textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 8px rgba(96,165,250,.3);
}

#contactForm label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:var(--text);

}

#contactForm select{

    width:100%;

    padding:12px;

    border:1px solid #ddd;

    border-radius:8px;

    background:white;

    font:inherit;

}

#contactForm select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 8px rgba(96,165,250,.3);

}

#contactForm .grid{

    margin-bottom:20px;

}

#formStatus{

    margin-top:20px;

    font-weight:600;

    text-align:center;

    min-height:24px;

}

#formStatus.success{

    color:#22C55E;

}

#formStatus.error{

    color:#EF4444;

}



/* Floating Buttons */

#topBtn{
  position:fixed;
  bottom:90px;
  right:20px;
  display:none;
  width:50px;height:50px;
  border:none;border-radius:50%;
  background:#003366;color:#fff;
  cursor:pointer;
  box-shadow:var(--shadow-md);
  transition:var(--transition);
  z-index:999;
}

#topBtn:hover{transform:scale(1.1)}

.whatsapp-float{
  position:fixed;
  left:25px;
  bottom:25px;
  width:40px;height:40px;
  z-index:9999;
  transition:var(--transition);
}
.whatsapp-float:hover{transform:scale(1.1)}
.whatsapp-float img{width:100%;height:100%}

/* Footer */

footer{
  text-align:center;
  padding:30px;
  background:var(--surface);
  color:#6b7280;
}

/* Landing Icons */

.landing-icons{
  display:flex;
  align-items:center;
  gap:25px;
  margin-right:25px;
}

.landing-icons a{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  width:60px;height:60px;
  border-radius:50%;
  transition:var(--transition);
}

.landing-icons img{
  width:40px;height:40px;
  transition:var(--transition);
}

.landing-icons a:hover{background:#172033}
.landing-icons a:hover img{transform:scale(1.2)}

.landing-icon-label{
  position:absolute;
  left:50%;
  bottom:-29px;
  z-index:10;
  width:max-content;
  max-width:170px;
  padding:6px 9px;
  border:1px solid rgba(96,165,250,.42);
  border-radius:7px;
  background:#0f172a;
  color:#e5e7eb;
  box-shadow:0 8px 22px rgba(0,0,0,.34);
  font-size:.72rem;
  font-weight:700;
  line-height:1.1;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-4px);
  transition:opacity .18s ease,transform .18s ease;
}

.landing-icons a:hover .landing-icon-label,
.landing-icons a:focus-visible .landing-icon-label{
  opacity:1;
  transform:translate(-50%,0);
}

.landing-icons a:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
}

/* Mobile */

@media (max-width:768px){

    /* Navigation */

    .navbar {

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:10px 15px;

}
    
    .hamburger {

    display: flex;

    }
    .main-logo{
        margin-left:0;
    }

    .menu-toggle{
        display:block;
        transition:0.3s;
    }

    .menu-toggle.open{

    transform:rotate(90deg);

    }

    /* Mobile dropdown menu */
.nav-links {
    position: absolute;
    top: 70px; /* adjust to your navbar height */
    right: 15px;

    width: 220px;

    background: var(--surface);

    display: flex;
    flex-direction: column;

    padding: 20px;

    border-radius: 18px; /* smooth rounded edges */

    box-shadow: 0 15px 35px rgba(0,0,0,0.35);

    overflow: hidden;

    height: auto;        /* important */
    min-height: unset;   /* important */

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


/* When hamburger opens */
.nav-links.active {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

    .nav-links a {
    padding: 12px 10px;
    border-radius: 10px;
    transition: 0.2s ease;
}


.nav-links a:hover {
    background: rgba(96,165,250,0.15);
    padding-left: 18px;
}

    /* Hero */

    .hero{
        padding:40px 15px;
    }

    .hero h1{
        font-size:2.3rem;
    }

    .logo-container{
        flex-direction:column;
    }

    .logo-container img{
        width:85%;
        max-width:280px;
        height:auto;
    }

    .hero-logo-text{
        text-align:center;
    }

    .hero-logo-text h1{
        font-size:2.3rem;
    }

    .success-highlights
    {

        grid-template-columns:1fr;

    }
    /* Cards */

    .grid{
        grid-template-columns:1fr;
    }

    /* Landing Navigation */

    .landing-navbar{
        height:82px;
        padding:0 10px;
    }

    .landing-icons{
        gap:6px;
        margin-right:0;
    }

    .landing-icons a{
        flex-direction:column;
        width:58px;
        height:66px;
        border-radius:10px;
    }

    .landing-icons img{
        width:24px;
        height:24px;
    }

    .landing-icon-label{
        position:static;
        width:58px;
        max-width:none;
        margin-top:4px;
        padding:0;
        border:0;
        background:transparent;
        box-shadow:none;
        color:#cbd5e1;
        font-size:.53rem;
        line-height:1.05;
        text-align:center;
        opacity:1;
        transform:none;
    }

    .landing-icons a:hover .landing-icon-label,
    .landing-icons a:focus-visible .landing-icon-label{
        transform:none;
    }

    .featured-student{

    flex-direction:column;

    text-align:center;

}

.featured-photo img{

    width:130px;

    height:130px;

}

.featured-info h3{

    font-size:1.6rem;

}


}

/* ==========================================
   STUDENT SUCCESS
========================================== */

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin:40px 0;
}

.stat-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    padding:25px;
    text-align:center;
    transition:.3s;
}

.stat-card:hover{
    transform:translateY(-6px);
    border-color:var(--primary);
}

.stat-card h3{
    font-size:2rem;
    color:var(--primary);
    margin-bottom:10px;
}

.stat-card p{
    margin:0;
}

.testimonial-toolbar{

    margin:25px 0;

}

#testimonialSearch{

    width:100%;

    padding:15px 20px;

    background:#111827;

    border:1px solid var(--border);

    border-radius:12px;

    color:white;

    font-size:1rem;

    transition:.3s;

}

#testimonialSearch:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 15px rgba(96,165,250,.25);

}


.module-filters{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:30px;

}

.filter-btn{

    background:#111827;

    color:white;

    border:1px solid var(--border);

    border-radius:30px;

    padding:10px 18px;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.filter-btn:hover{

    border-color:var(--primary);

    transform:translateY(-2px);

}

.filter-btn.active{

    background:var(--primary);

    color:#07111f;

    border-color:var(--primary);

}


.testimonial-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(min(500px,100%),1fr));

    gap:35px;

    margin-top:40px;

    align-items:start;

}

.testimonial-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:20px;

    padding:20px;

    /*display:flex;*/

    flex-direction:column;

    transition:all .3s ease;

    min-width:0;

    max-width:100%;

}

.testimonial-card:hover{

    border-color:#60A5FA;

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.35);

}

.testimonial-header{

display:flex;

align-items:center;

margin-bottom:20px;

}

.student{

display:flex;

align-items:center;

gap:15px;

width:100%;

min-width:0;

}

.student-info{

min-width:0;

overflow-wrap:anywhere;

}

.student img{

width:130px;
height:130px;

border-radius:50%;

object-fit:cover;

border:4px solid var(--primary);

box-shadow:0 0 18px rgba(0,0,0,.25);

transition:.3s;

}
.avatar
{

    width:130px;
    height:130px;

    min-width:75px;

    border-radius:50%;

    background:linear-gradient(135deg,var(--primary),#2563eb);

    display:flex;
    justify-content:center;
    align-items:center;

    color:#fff;

    font-size:2rem;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

    border:4px solid var(--primary);

    box-shadow:0 0 18px rgba(0,0,0,.25);

    user-select:none;

}

.student-info h3{

margin:0;

font-size:1.35rem;

    font-weight:700;

}

.student-info p{

margin:4px 0;

font-size:.9rem;

opacity:.8;

}

.rating{

font-size:1.4rem;

color:gold;


}

.review{

    margin:0px 0px;

    padding:5px;

    background:#111827;

    border-left:4px solid var(--primary);

    border-radius:12px;

    line-height:1.6;

    font-style:italic;

    position:relative;

    transition:max-height .35s ease;

}

.quote-icon{

    display:block;

    font-size:3rem;

    line-height:1;

    color:rgba(96,165,250,.25);

    font-family:Georgia, serif;

    margin-bottom:-20px;

}
.review.collapsed{

    max-height:120px;

    overflow:hidden;

}

.review.expanded{

    max-height:1200px;

}

.review.collapsed::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:60px;

    background:linear-gradient(
        transparent,
        #111827 90%
    );

    pointer-events:none;

}

.read-more-btn{

    margin-top:14px;

    background:none;

    border:none;

    color:var(--primary);

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.read-more-btn:hover{

    color:white;

    transform:translateX(5px);

}

.read-more-btn:hover{

    text-decoration:underline;

}

.badge{

display:inline-block;

background:var(--primary);

color:white;

padding:6px 14px;

border-radius:30px;

font-size:.8rem;

font-weight:bold;

margin-bottom:15px;

margin-right:8px;

margin-bottom:8px;

}

.recommend{

margin-top:15px;

color:var(--accent);

font-weight:bold;

}

/* ==========================================
   Student Cards - Mobile Fix
========================================== */

@media (max-width:768px){

    .student img,
    .avatar{
        width:100px;
        height:100px;
        min-width:100px;
        min-height:100px;
        max-width:120px;
        max-height:120px;

        border-radius:50%;
        object-fit:cover;

        flex-shrink:0;
    }


    /* Student testimonials on mobile */

  .testimonial-header
  {
      flex-direction:column;
      align-items:flex-start;
      gap:15px;
  }

  .student
  {
      width:100%;
  }

  .rating
  {
      align-self:flex-start;
      font-size:1.1rem;
  }


.skill-badges{

justify-content:center;

}


.skill-badge{

width:70px;

height:80px;

}


.cert-title{

font-size:.9rem;

}


}

/* ==========================================
   Student Certification Badges
========================================== */


.certification{

    margin-top:auto;

    padding-top:12px;

    border-top:1px solid var(--border);

}


.cert-title{

font-weight:bold;

color:var(--primary);

margin-bottom:15px;

display:flex;

align-items:center;

gap:8px;

}



.skill-badges{

    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content: flex-start; 
     margin-top:15px;
}

.badge-container{

    display:flex;
    flex-direction:column;
    align-items:center;

    width:75px;

}

.skill-badge{

    width:70px;
    height:70px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:15px;

    background:#111827;

    border:2px solid #334155;

    transition:all .3s ease;

}

.skill-badge img{

    width:38px;
    height:38px;

    object-fit:contain;

}

.badge-label{

    margin-top:8px;

    text-align:center;

    font-size:.72rem;

    color:#d1d5db;

    line-height:1.2;

}

/* Badge Colours */

.badge-java{

border-color:#F97316;

}
.badge-java:hover{

    box-shadow:0 0 18px rgba(249,115,22,.45);

}

.badge-csharp{

border-color:#8B5CF6;

}
.badge-csharp:hover{

    box-shadow:0 0 18px rgba(139,92,246,.45);

}

.badge-python{

border-color:#FACC15;

}
.badge-python:hover{

    box-shadow:0 0 18px rgba(250,204,21,.45);

}
.badge-cpp{

border-color:#2563EB;

}
.badge-cpp:hover{

    box-shadow:0 0 18px rgba(37,99,235,.45);

}

.badge-db{

border-color:#2563EB;

}
.badge-db:hover{

    box-shadow:0 0 18px rgba(37,99,235,.45);

}
.badge-pld{

border-color:#22C55E;

}
.badge-pld:hover{

    box-shadow:0 0 18px rgba(34,197,94,.45);

}
.badge-intro{

border-color:#4ADE80;

}
.badge-intro:hover{

    box-shadow:0 0 18px rgba(74,222,128,.45);

}
.badge-sad{

border-color:#9CA3AF;

}
.skill-badge:hover{

 transform:translateY(-6px) scale(1.08);

}
.badge-sad:hover{

    box-shadow:0 0 18px rgba(156,163,175,.45);

}


.skill-badge span{

font-size:.75rem;

margin-top:5px;

color:white;

text-align:center;

}

/* ==========================================
   Student Specialization Colours
========================================== */

/* C# */
.spec-csharp{
    border-color:#8B5CF6 !important;
    box-shadow:0 0 18px rgba(139,92,246,.45);
}

/* Java */
.spec-java{
    border-color:#F97316 !important;
    box-shadow:0 0 18px rgba(249,115,22,.45);
}

/* C++ */
.spec-cpp{
    border-color:#2563EB !important;
}

/* Python */
.spec-python{
    border-color:#FACC15 !important;
    box-shadow:0 0 18px rgba(250,204,21,.45);
}

/* Database */
.spec-db{
    border-color:#2563EB !important;
}

/* Programming Logic & Design */
.spec-pld{
    border-color:#22C55E !important;
}

/* Introduction to Programming Logic */
.spec-intro{
    border-color:#4ADE80 !important;
}

/* System Analysis & Design */
.spec-sad{
    border-color:#9CA3AF !important;
}

.spec-java-ring{

    border-color:#F97316 !important;

}

.spec-csharp-ring{

    border-color:#8B5CF6 !important;

}

.spec-python-ring{

    border-color:#FACC15 !important;

}

.spec-cpp-ring{

    border-color:#2563EB !important;

}

.spec-db-ring{

    border-color:#2563EB !important;

}

.spec-pld-ring{

    border-color:#22C55E !important;

}

.spec-intro-ring{

    border-color:#4ADE80 !important;

}


.student-specialization{

     margin-top:8px;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.3px;

}

.spec-java-text{

    color:#F97316;

}

.spec-python-text{

    color:#FACC15;

}

.spec-csharp-text{

    color:#8B5CF6;

}

.spec-cpp-text{

    color:#2563EB;

}

.spec-db-text{

    color:#2563EB;

}

.spec-pld-text{

    color:#22C55E;

}

.spec-intro-text{

    color:#4ADE80;

}

.spec-sad-text{

    color:#9CA3AF;

}

.resource-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:25px;

margin-top:25px;

}

.resource-card{

background:white;

padding:25px;

border-radius:15px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

display:flex;

flex-direction:column;

transition:.3s;

}

.resource-card:hover{

transform:translateY(-8px);

}

.resource-icon{

font-size:3rem;

margin-bottom:15px;

}

.resource-meta{

display:flex;

flex-wrap:wrap;

gap:10px;

margin:20px 0;

}

.resource-meta span{

background:#f1f1f1;

padding:6px 12px;

border-radius:30px;

font-size:.85rem;

}

.download-btn{

display:block;

width:100%;

margin-top:auto;

padding:12px;

border:none;

border-radius:8px;

background:#0a66c2;

color:white;

text-align:center;

text-decoration:none;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

.preview-btn{

display:block;

width:100%;

margin-bottom:12px;

padding:12px;

border:none;

border-radius:8px;

background:#2563eb;

color:white;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

.preview-btn:hover{

background:#1d4ed8;

}



.download-btn:hover{

background:#084d91;

}

.download-btn.disabled{

background:#6b7280;

cursor:not-allowed;

opacity:.75;

}

.download-btn.disabled:hover{

background:#6b7280;

transform:none;

}

#resourceSearch{

    width:100%;

    padding:15px 20px;

    background:#111827;

    border:1px solid var(--border);

    border-radius:12px;

    color:white;

    font-size:1rem;

    transition:.3s;

}

#resourceSearch:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 15px rgba(96,165,250,.25);

}

.resource-count{

    margin-top:12px;

    color:var(--muted);

    font-size:.95rem;

    font-weight:600;

}

.resource-search-wrapper{

    position:relative;

}

.resource-search-wrapper{

    position:relative;

}

.clear-search-btn{

    position:absolute;

    right:12px;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    color:var(--muted);

    font-size:1rem;

    cursor:pointer;

    display:none;

    transition:.3s;

}

.clear-search-btn:hover{

    color:var(--primary);

}

.preview-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.project-video{

    margin:25px 0;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.35);

}

.project-video iframe{

    width:100%;

    aspect-ratio:16 / 9;

    border:none;

    display:block;

}


.preview-content{
    background:var(--card);
    padding:18px;
    border-radius:18px;
    width:90%;
    max-width:1100px;
    max-height:85vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

#previewBody{
    overflow-y:auto;
    flex:1;
    padding-right:5px;
    text-align:center;
}

.download-btn,
.download-btn.disabled{
    margin-top:15px;
}

.close-preview{
    position:absolute;
    top:10px;
    right:15px;
    z-index:20;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    padding:0;
    border:2px solid rgba(255,255,255,.7);
    border-radius:50%;
    background:rgba(7,11,20,.92);
    box-shadow:0 8px 22px rgba(0,0,0,.45);
    color:#fff;
    font-size:34px;
    line-height:1;
    cursor:pointer;
    transition:transform .2s ease,background .2s ease,border-color .2s ease;
}

.close-preview:hover,
.close-preview:focus-visible{
    background:#dc2626;
    border-color:#fecaca;
    outline:none;
    transform:scale(1.08);
}

.close-preview span{
    display:block;
    translate:0 -2px;
}

.preview-image{

    display:block;

    width:100%;

    max-width:500px;

    height:250px;

    object-fit:cover;

    border-radius:15px;

    margin:0 auto 20px;

}

#previewBody{
    text-align:center;
}

#previewBody h2{
    margin:8px 0;
    font-size:1.8rem;
}

#previewBody p{
    line-height:1.5;
    margin-bottom:10px;
}

.resource-meta{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin:15px 0;
}

.resource-meta span{
    background:var(--primary);
    color:white;
    padding:6px 14px;
    border-radius:30px;
    font-size:.9rem;
    font-weight:600;
}

#previewActions{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    justify-content:center;

    margin-top:25px;

}

#previewActions .download-btn{

    flex:1;

    min-width:180px;

    margin:0;

}

.projects-header{
    text-align:center;
    max-width:800px;
    margin:40px auto;
}

.projects-header h1{
    font-size:2.2rem;
    margin-bottom:10px;
}

.projects-header p{
    opacity:0.8;
    line-height:1.6;
}

.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:20px;
    max-width:1100px;
    margin:0 auto;
    padding:20px;
}

.project-card{

    background:var(--card);

    padding:22px;

    border-radius:18px;

    border:1px solid var(--border);

    transition:.3s ease;

}

.project-card:hover{
    transform:translateY(-5px);
}

.project-card.featured{

    border:2px solid #facc15;

    box-shadow:
    0 0 30px rgba(250,204,21,.2);

}


.project-card.featured h3{

    color:#facc15;

}

.project-image img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:10px;

    margin-bottom:15px;

}

.student-name{
    opacity:0.7;
    margin-bottom:10px;
}

.project-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
}

.project-meta span{
    background:var(--primary);
    color:white;
    padding:4px 10px;
    border-radius:20px;
    font-size:0.8rem;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.skills-title{

    margin-top:18px;

    margin-bottom:8px;

    color:var(--primary);

    font-size:.95rem;

}


.project-skills{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:15px;

}


.project-skills span{

    background:#0b1220;

    border:1px solid #334155;

    padding:5px 10px;

    border-radius:20px;

    font-size:.75rem;

    color:#d1d5db;

}

.project-tech span {

    background:#172033;

    border:1px solid #334155;

    padding:6px 12px;

    border-radius:20px;

    font-size:.8rem;

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}


.project-tech span:hover{

    transform:translateY(-3px);

    border-color:var(--primary);

}

.project-student{

    display:flex;

    align-items:center;

    gap:15px;

    margin:15px 0;

}

.project-student img{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid var(--primary);

}

.project-student-initials{
    width:60px;
    height:60px;
    flex-shrink:0;
    border:2px solid var(--primary);
    border-radius:50%;
    font-size:1rem;
}

.student-details h4{

    margin:0;

    font-size:1rem;

}

.student-details small{

    color:#888;

}

.featured-project{

    display:flex;
    gap:15px;
    align-items:center;
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.15);

}

.featured-project img{

    width:90px;
    height:70px;
    object-fit:cover;
    border-radius:8px;
    flex-shrink:0;

}

.project-details{

    flex:1;

}

.project-details h5{

    margin-bottom:6px;

}

.project-details p{

    margin-bottom:10px;

}

.projects-showcase{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(min(340px,100%),1fr));

    gap:25px;

    margin-top:30px;

}

.project-showcase-card{

    display:flex;

    gap:18px;

    align-items:center;

    background:var(--card);

    border-radius:12px;

    padding:18px;

    min-width:0;

    max-width:100%;

}

.project-showcase-card img{

    width:110px;

    height:85px;

    object-fit:cover;

    border-radius:8px;

    flex-shrink:0;

}

.project-showcase-info{

    flex:1;

    min-width:0;

    overflow-wrap:anywhere;

}

.project-showcase-info h3{

    margin-bottom:8px;

}

.project-showcase-info p{

    margin:4px 0;

    color:var(--muted);

}


.student-project-gallery{

    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:18px;

    max-width:100%;

}

.project-thumb{

    width:90px;
    height:90px;

    overflow:hidden;

    border-radius:12px;

    border:2px solid var(--border);

    position:relative;

    transition:.3s;

    cursor:pointer;

    box-shadow:0 6px 15px rgba(0,0,0,.25);

}

.project-thumb img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.project-thumb:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    box-shadow:0 12px 25px rgba(0,0,0,.35);

}

.student-project-section{

    margin-top:20px;

    min-width:0;

    max-width:100%;

}

/* ==========================================
   Student Success - Mobile Width
========================================== */

@media (max-width:768px){

    #student-success,
    .student-projects-showcase-section{
        width:100%;
        max-width:100%;
        padding-inline:15px;
    }

    .testimonial-grid,
    .projects-showcase{
        width:100%;
        min-width:0;
        grid-template-columns:minmax(0,1fr);
        gap:22px;
    }

    .testimonial-card{
        width:100%;
        min-width:0;
        padding:16px;
    }

    .student{
        align-items:flex-start;
    }

    .student-info h3,
    .student-info p,
    .review-text,
    .cert-title{
        overflow-wrap:anywhere;
        word-break:normal;
    }

    .skill-badges{
        justify-content:flex-start;
        gap:12px;
    }

    .project-showcase-card{
        width:100%;
        min-width:0;
        padding:14px;
        gap:14px;
    }

    .project-showcase-card img{
        width:90px;
        height:75px;
    }

}

@media (max-width:420px){

    .student{
        flex-direction:column;
    }

    .project-showcase-card{
        align-items:flex-start;
        flex-direction:column;
    }

    .project-showcase-card img{
        width:100%;
        height:160px;
    }

}

/* =========================================================
   EMPLOYER JOURNEY
   ========================================================= */
.employer-page{background:#07111f;color:#e5edf8}.employer-page main{max-width:none}.employer-navbar{border-bottom:1px solid rgba(96,165,250,.18);background:rgba(7,17,31,.96)}
.employer-nav-label{margin-right:auto;color:#d8e4f3;font-weight:650;letter-spacing:.02em}.employer-nav-label span,.employer-kicker{color:#60a5fa}.employer-logo,.employer-logo-disabled{cursor:default!important;pointer-events:none!important}.employer-logo-disabled{display:inline-flex}
.employer-hero{width:min(1180px,92%);margin:0 auto;padding:110px 0 82px;display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:center}
.employer-kicker{display:block;text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:.78rem;margin-bottom:16px}.employer-hero h1,.employer-form-intro h1{font-size:clamp(2.5rem,5.4vw,5.2rem);line-height:1.02;max-width:900px;margin:0 0 24px;color:#f8fafc}.employer-hero-copy>p{font-size:1.15rem;line-height:1.75;color:#afbdd0;max-width:720px}
.employer-actions{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 18px}.employer-privacy-note{font-size:.86rem!important;color:#8392a8!important}
.employer-proof-card{padding:34px;border:1px solid rgba(96,165,250,.22);border-radius:24px;background:linear-gradient(145deg,rgba(30,58,95,.52),rgba(11,24,42,.88));box-shadow:0 24px 70px rgba(0,0,0,.25)}.employer-proof-card>span{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:#93c5fd;font-weight:800}.employer-proof-card ul{list-style:none;padding:0;margin:22px 0 0}.employer-proof-card li{padding:20px 0;border-top:1px solid rgba(148,163,184,.15)}.employer-proof-card strong,.employer-proof-card small{display:block}.employer-proof-card strong{color:#f8fafc;margin-bottom:6px}.employer-proof-card small{color:#9fb0c4;line-height:1.5}
.employer-value-section{width:100%;box-sizing:border-box;background:#f5f8fc;color:#172033;padding:84px 4%}.employer-section-heading{width:min(1180px,100%);max-width:1180px;margin:0 auto 42px}.employer-section-heading>p{max-width:760px}.employer-section-heading h2,.employer-opportunities h2{max-width:900px;font-size:clamp(2rem,3.8vw,3.6rem);line-height:1.12;margin:0 0 18px}.employer-section-heading p{font-size:1.08rem;color:#506078;line-height:1.75}.employer-value-grid{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.employer-value-grid article{min-width:0;padding:30px;background:white;border:1px solid #dde5ef;border-radius:18px}.employer-value-grid article>span{color:#2563eb;font-weight:800}.employer-value-grid h3{margin:18px 0 10px;font-size:1.2rem}.employer-value-grid p{color:#64748b;line-height:1.65}
.employer-opportunities{width:min(1180px,92%);margin:auto;padding:86px 0}.opportunity-types{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 34px}.opportunity-types span{padding:10px 15px;border:1px solid rgba(147,197,253,.25);border-radius:999px;color:#c4d5e9;background:rgba(30,58,95,.32)}.employer-page footer a{color:#93c5fd;margin-left:12px}
.employer-entry-strip{width:min(1180px,92%);margin:32px auto 0;padding:18px 24px;display:flex;justify-content:space-between;gap:20px;align-items:center;border:1px solid rgba(96,165,250,.22);border-radius:14px;background:linear-gradient(90deg,rgba(30,58,95,.7),rgba(15,23,42,.85));color:#dbeafe;text-decoration:none}.employer-entry-strip span:last-child{color:#93c5fd;font-weight:800;white-space:nowrap}.employer-nav-link{color:#93c5fd!important}
.employer-portfolio-banner{width:min(1180px,92%);margin:42px auto 0;padding:32px;justify-content:space-between;align-items:center;gap:30px;border:1px solid rgba(96,165,250,.25);border-radius:20px;background:linear-gradient(110deg,#0d2340,#101827)}.employer-portfolio-banner h1{margin:0 0 8px;color:#f8fafc}.employer-portfolio-banner p{margin:0;color:#aebed2}.employer-portfolio-mode .projects-header{padding-top:45px}.employer-portfolio-mode .navbar{border-bottom:1px solid rgba(96,165,250,.18);background:rgba(7,17,31,.96)}
.employer-form-intro{width:min(1040px,92%);margin:auto;padding:90px 0 44px}.employer-form-intro h1{font-size:clamp(2.5rem,5vw,4.5rem)}.employer-form-intro p{color:#a9b7ca;max-width:720px;font-size:1.08rem;line-height:1.7}.employer-form-layout{width:min(1040px,92%);margin:0 auto 90px;display:grid;grid-template-columns:.7fr 1.3fr;gap:28px}.employer-form-aside,.employer-form-card{border-radius:20px;padding:30px}.employer-form-aside{background:#10243e;border:1px solid rgba(96,165,250,.18)}.employer-form-aside ul{padding-left:20px;color:#b9c7d9;line-height:1.9}.employer-form-aside p{color:#9eafc4;line-height:1.65}.employer-form-card{background:#f8fafc;color:#172033}.employer-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.employer-form-card label{display:block;margin:0 0 8px;font-weight:700}.employer-form-card input,.employer-form-card select,.employer-form-card textarea{width:100%;box-sizing:border-box}.employer-form-card textarea{min-height:150px}.employer-consent{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important;font-size:.9rem;line-height:1.5;margin:18px 0!important}.employer-consent input{width:auto!important;margin-top:4px}
@media(max-width:850px){.employer-hero,.employer-form-layout{grid-template-columns:1fr}.employer-value-grid{grid-template-columns:1fr}.employer-hero{padding-top:72px;gap:34px}.employer-nav-label{display:none}}
@media(min-width:851px){.employer-value-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.employer-form-grid{grid-template-columns:1fr}.employer-entry-strip,.employer-portfolio-banner{align-items:flex-start;flex-direction:column}.employer-hero h1{font-size:2.45rem}.employer-hero{padding-bottom:58px}.employer-value-section{padding-top:60px;padding-bottom:60px}}

/* =========================================================
   FLEXIBLE SUPPORT PRICING
   ========================================================= */
.learning-options-preview{width:min(1180px,92%);margin:72px auto 18px}.learning-option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.learning-option-card{position:relative;padding:28px;border:1px solid rgba(148,163,184,.2);border-radius:18px;background:linear-gradient(145deg,#111d30,#0b1424);box-shadow:0 16px 40px rgba(0,0,0,.16)}.learning-option-card.featured-option{border-color:rgba(96,165,250,.55);box-shadow:0 18px 50px rgba(37,99,235,.16)}.option-label{display:inline-block;color:#93c5fd;text-transform:uppercase;letter-spacing:.09em;font-size:.68rem;font-weight:800}.learning-option-card h3{margin:13px 0 17px;color:#f8fafc;font-size:1.25rem}.option-price{display:flex;align-items:baseline;gap:9px;margin-bottom:15px}.option-price strong{font-size:2rem;color:#60a5fa}.option-price span{color:#94a3b8;font-size:.82rem}.learning-option-card p{color:#aebbcf;line-height:1.65;margin:0}.learning-options-link{display:table;margin:26px auto 0}
.flexible-support-section{width:min(1180px,92%);margin:10px auto 82px;padding-top:80px;scroll-margin-top:80px}.flexible-pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.flexible-price-card{padding:34px;border:1px solid rgba(148,163,184,.22);border-radius:22px;background:linear-gradient(145deg,#111f34,#0b1525)}.flexible-price-card.group-session{border-color:rgba(96,165,250,.45)}.flexible-card-icon{width:52px;height:52px;display:grid;place-items:center;margin-bottom:18px;border-radius:14px;background:rgba(96,165,250,.13);font-size:1.5rem}.flexible-price-card h3{margin:12px 0;color:#f8fafc;font-size:1.5rem}.flexible-price{display:flex;align-items:baseline;gap:10px;margin:18px 0}.flexible-price strong{font-size:2.5rem;color:#60a5fa}.flexible-price span{color:#9baac0}.flexible-price-card>p{color:#b2bfd0;line-height:1.65}.flexible-price-card ul{margin:22px 0 28px;padding-left:20px;color:#c5d0df;line-height:1.9}.flexible-price-card .cta{width:100%;box-sizing:border-box;text-align:center}.exam-prep-note{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin-top:24px;padding:28px;border:1px solid rgba(250,204,21,.22);border-radius:18px;background:rgba(120,82,8,.12)}.exam-prep-icon{font-size:2rem}.exam-prep-note h3{margin:0 0 7px;color:#f8fafc}.exam-prep-note p{margin:0;color:#b5c1d1;line-height:1.65}.session-terms{padding:18px 22px;margin:18px 0 0;border-left:3px solid #60a5fa;background:rgba(30,58,95,.22);color:#aebdd0;line-height:1.65}
@media(max-width:850px){.learning-option-grid{grid-template-columns:1fr}.flexible-pricing-grid{grid-template-columns:1fr}.exam-prep-note{grid-template-columns:auto 1fr}.exam-prep-note .btn-secondary{grid-column:1/-1;text-align:center}}
@media(max-width:560px){.learning-options-preview{margin-top:52px}.flexible-support-section{padding-top:58px}.flexible-price-card{padding:25px}.exam-prep-note{grid-template-columns:1fr}.exam-prep-icon{margin-bottom:-10px}}

.project-gallery-title{

    color:var(--primary);

    font-size:1rem;

    margin-bottom:12px;

    font-weight:700;

}

/* ===============================
   Student Profile
================================ */

.developer-directory{
    max-width:1150px;
    margin:0 auto 20px;
}

.portfolio-back-link{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:18px;
    padding:10px 16px;
    color:#dbeafe;
    background:#111827;
    border:1px solid #334155;
    border-radius:999px;
    font-weight:800;
    text-decoration:none;
    transition:var(--transition);
}

.portfolio-back-link:hover,
.portfolio-back-link:focus-visible{
    color:#fff;
    background:#1d4ed8;
    border-color:var(--primary);
    outline:none;
    transform:translateX(-3px);
}

.developer-directory-heading{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,520px);
    gap:35px;
    align-items:end;
    margin-bottom:25px;
}

.developer-directory-heading h2{
    margin:5px 0 0;
}

.developer-directory-heading p{
    color:var(--muted);
}

.section-eyebrow{
    color:var(--accent);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.developer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
    gap:22px;
}

.developer-card{
    display:flex;
    gap:20px;
    min-width:0;
    padding:22px;
    background:linear-gradient(145deg,#0f172a,#0b1220);
    border:1px solid #263449;
    border-radius:18px;
    box-shadow:var(--shadow-sm);
}

.developer-card > img,
.developer-initials{
    width:105px;
    height:105px;
    flex-shrink:0;
    object-fit:cover;
    border:3px solid var(--primary);
    border-radius:50%;
}

.developer-initials,
.project-student-initials,
.student-profile-initials{
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,#1d4ed8,#0f172a);
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.developer-initials{
    font-size:1.55rem;
}

.developer-card-content{
    min-width:0;
}

.developer-card-content h3{
    margin:8px 0 2px;
}

.developer-card-content p{
    color:var(--muted);
    overflow-wrap:anywhere;
}

.developer-card-content small{
    display:block;
    margin:12px 0;
    color:#cbd5e1;
}

.developer-card-content > a{
    color:var(--primary);
    font-weight:800;
    text-decoration:none;
}

.developer-status{
    display:inline-flex;
    padding:5px 10px;
    color:#bfdbfe;
    background:rgba(96,165,250,.12);
    border:1px solid rgba(96,165,250,.3);
    border-radius:999px;
    font-size:.72rem;
    font-weight:800;
}

.developer-status.available,
.opportunity-badge{
    color:#bbf7d0;
    background:rgba(34,197,94,.12);
    border-color:rgba(34,197,94,.38);
}

.developer-status + .developer-status{
    margin-left:6px;
}

.developer-status.demo{
    color:#fde68a;
    background:rgba(250,204,21,.1);
    border-color:rgba(250,204,21,.35);
}

.developer-skill-list{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:12px;
}

.developer-skill-list span{
    padding:4px 9px;
    color:#dbeafe;
    background:#172033;
    border:1px solid #334155;
    border-radius:999px;
    font-size:.72rem;
}

.privacy-assurance,
.directory-empty-state,
.demo-directory-notice{
    margin-top:20px;
    padding:16px 18px;
    color:#cbd5e1;
    background:rgba(15,23,42,.75);
    border:1px solid #263449;
    border-radius:14px;
}

.demo-directory-notice,
.demo-profile-notice{
    color:#fde68a;
    background:rgba(250,204,21,.08);
    border:1px solid rgba(250,204,21,.3);
    border-radius:12px;
    font-weight:700;
}

.demo-profile-notice{
    padding:10px 13px;
}

.demo-project-badge{
    position:absolute;
    top:48px;
    left:10px;
    z-index:1;
    padding:5px 10px;
    color:#111827;
    background:#fde68a;
    border-radius:999px;
    font-size:.72rem;
    font-weight:900;
}

.demo-preview-label{
    display:inline-flex;
    margin-bottom:12px;
    padding:7px 12px;
    color:#fde68a;
    background:rgba(250,204,21,.1);
    border:1px solid rgba(250,204,21,.35);
    border-radius:999px;
    font-size:.78rem;
    font-weight:900;
}

.directory-empty-state{
    grid-column:1/-1;
}

.opportunity-panel{
    margin:18px 0;
    padding:18px;
    background:rgba(34,197,94,.07);
    border:1px solid rgba(34,197,94,.3);
    border-radius:16px;
}

.opportunity-badge{
    display:inline-flex;
    padding:6px 11px;
    border:1px solid rgba(34,197,94,.38);
    border-radius:999px;
    font-size:.75rem;
    font-weight:800;
}

#professionalTitle{
    color:#dcfce7;
    font-weight:700;
}

.opportunity-details{
    display:grid;
    gap:10px;
    margin:12px 0;
}

.opportunity-details div{
    display:flex;
    flex-direction:column;
}

.opportunity-details strong{
    color:#86efac;
    font-size:.78rem;
}

.opportunity-contact{
    display:inline-flex;
    margin-top:8px;
    padding:10px 16px;
    color:#052e16;
    background:var(--accent);
    border-radius:999px;
    font-weight:800;
    text-decoration:none;
}

.student-profile{
    margin:40px auto;
}

.student-profile-avatar{
    width:220px;
    height:220px;
    flex-shrink:0;
}

.student-profile-card{
    display:flex;
    align-items:center;
    gap:40px;
    background:var(--card);
    border-radius:20px;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border:1px solid rgba(255,255,255,.08);
}

.student-profile-card img{
    width:220px;
    height:220px;
    border-radius:50%;
    object-fit:cover;
    border:6px solid var(--primary);
    flex-shrink:0;
}

.student-profile-initials{
    width:220px;
    height:220px;
    border:6px solid var(--primary);
    border-radius:50%;
    font-size:3rem;
}

.portfolio-share-panel{
    margin-top:24px;
    padding:18px;
    background:#0b1220;
    border:1px solid #334155;
    border-radius:16px;
}

.portfolio-share-panel p{
    margin:4px 0 12px;
    color:var(--muted);
}

.portfolio-share-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.portfolio-share-actions button,
.portfolio-share-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:9px 14px;
    color:#fff;
    background:#172033;
    border:1px solid #334155;
    border-radius:999px;
    font:inherit;
    font-size:.85rem;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    transition:var(--transition);
}

.portfolio-share-actions button:hover,
.portfolio-share-actions button:focus-visible,
.portfolio-share-actions a:hover,
.portfolio-share-actions a:focus-visible{
    background:#1d4ed8;
    border-color:var(--primary);
    outline:none;
    transform:translateY(-2px);
}

#shareFeedback{
    display:block;
    min-height:1.3em;
    margin-top:8px;
    color:#86efac;
}

.portfolio-share-footer{
    max-width:1100px;
    margin:25px auto;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:25px;
    background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(34,197,94,.08));
    border:1px solid rgba(96,165,250,.32);
    border-radius:18px;
}

.portfolio-share-footer h2{
    margin-bottom:5px;
}

.portfolio-share-footer p{
    color:var(--muted);
}

.student-details{
    flex:1;
}

.student-details h1{
    margin-bottom:10px;
    font-size:2.2rem;
}

.student-details p{
    margin:10px 0;
    line-height:1.7;
}

.student-links{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:20px;
}

.student-links a{
    display:inline-block;
    padding:10px 18px;
    border-radius:30px;
    background:var(--primary);
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.student-links a:hover{
    transform:translateY(-3px);
}

@media(max-width:768px){

    .close-preview{
        top:8px;
        right:8px;
        width:48px;
        height:48px;
    }

    .portfolio-back-link{
        width:100%;
        justify-content:center;
    }

    .developer-directory-heading{
        grid-template-columns:1fr;
        gap:12px;
    }

    .developer-card{
        flex-direction:column;
    }

    .developer-card > img{
        width:90px;
        height:90px;
    }

    .developer-initials{
        width:90px;
        height:90px;
    }

    .student-profile-card{
        flex-direction:column;
        text-align:center;
    }

    .student-profile-card img{
        width:170px;
        height:170px;
    }

    .student-profile-avatar,
    .student-profile-initials{
        width:170px;
        height:170px;
    }

    .student-profile-initials{
        font-size:2.4rem;
    }

    .portfolio-share-footer{
        flex-direction:column;
        align-items:flex-start;
    }

    .portfolio-share-actions,
    .portfolio-share-actions button,
    .portfolio-share-actions a{
        width:100%;
    }

    .student-links{
        justify-content:center;
    }

    .preview-content{

        width:95%;

        max-height:90vh;

        padding:20px;

    }

}

#studentSummary{

    margin:20px 0;

}

#studentSummary p{

    margin:6px 0;

}

#studentRating{

    font-size:1.1rem;

    letter-spacing:2px;

}

.portfolio-badge{

    transform:scale(0.75);

    transform-origin:left center;

}

.portfolio-skill{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    background:#1f2937;

    border:1px solid #334155;

    border-radius:999px;

    color:#fff;

    font-size:.9rem;

}

.portfolio-skill img{

    width:18px;

    height:18px;

    object-fit:contain;

}

.portfolio-skills{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:15px;

}

.project-image{
    position:relative;
}


.featured-badge{

    position:absolute;

    top:10px;
    left:10px;

    padding:6px 12px;

    border-radius:20px;

    background:#facc15;

    color:#111;

    font-size:0.85rem;

    font-weight:bold;

}

.portfolio-preview h3{

    margin-top:25px;

    margin-bottom:12px;

    color:var(--primary);

}


.preview-info{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(150px,1fr));

    gap:15px;

    margin:20px 0;

}


.preview-info div{

    background:#111827;

    padding:12px;

    border-radius:12px;

    border:1px solid var(--border);

}


.preview-info strong{

    color:var(--primary);

    display:block;

    margin-bottom:5px;

}


.preview-info p{

    margin:0;

}

.preview-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:20px;

}


.preview-tags span{

    background:#172033;

    border:1px solid #334155;

    padding:7px 14px;

    border-radius:25px;

    color:var(--primary);

    font-size:.85rem;

    font-weight:600;

}

#previewActions a{

    border-radius:30px;

    padding:12px 22px;

}

/* ==========================================
   About and Programs Pages
========================================== */

.page-hero{
    max-width:none;
    padding:95px 24px 80px;
    background:
        radial-gradient(circle at 15% 20%,rgba(96,165,250,.18),transparent 32%),
        radial-gradient(circle at 85% 75%,rgba(34,197,94,.1),transparent 30%),
        linear-gradient(145deg,#0b1220,#070b14 70%);
    border-bottom:1px solid var(--border);
}

.page-hero-content{
    max-width:920px;
    margin:auto;
    text-align:center;
}

.page-eyebrow,
.section-kicker{
    display:inline-block;
    color:var(--accent);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.page-hero h1{
    max-width:850px;
    margin:15px auto 22px;
    color:#fff;
    font-size:clamp(2.35rem,5vw,4.3rem);
    line-height:1.08;
}

.page-hero p{
    max-width:760px;
    margin:0 auto 25px;
    color:#bdc7d6;
    font-size:1.08rem;
    line-height:1.8;
}

.page-hero .hero-buttons,
.enrolment-copy .hero-buttons{
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
}

.section-heading{
    max-width:760px;
    margin:0 auto 38px;
    text-align:center;
}

.section-heading h2{
    margin:10px 0 12px;
    color:#fff;
    font-size:clamp(1.8rem,3vw,2.65rem);
}

.section-heading p{
    color:var(--muted);
}

.about-introduction,
.about-values-section,
.about-process-section,
.about-audience-section,
.programs-section,
.program-support-section{
    max-width:1200px;
    padding:75px 24px;
}

.about-profile-card{
    display:grid;
    grid-template-columns:minmax(280px,390px) 1fr;
    gap:55px;
    align-items:center;
}

.about-photo-wrap{
    position:relative;
    padding:9px;
    background:rgba(96,165,250,.05);
    border:1px solid rgba(96,165,250,.55);
    border-radius:26px;
}

.about-photo-wrap::before{
    display:none;
}

.about-photo-wrap img{
    position:relative;
    width:100%;
    max-height:470px;
    display:block;
    object-fit:cover;
    object-position:center top;
    border-radius:18px;
    box-shadow:var(--shadow-lg);
}

.about-photo-wrap span{
    position:absolute;
    right:-16px;
    bottom:22px;
    max-width:245px;
    padding:12px 17px;
    background:rgba(15,23,42,.96);
    border:1px solid var(--primary);
    border-radius:12px;
    color:#fff;
    font-size:.86rem;
    font-weight:700;
    box-shadow:var(--shadow-md);
}

.about-profile-copy h2,
.about-process-copy h2{
    margin:10px 0 20px;
    color:#fff;
    font-size:clamp(1.85rem,3vw,2.7rem);
    line-height:1.2;
}

.about-profile-copy p,
.about-process-copy p{
    margin-bottom:17px;
    color:#bdc7d6;
    line-height:1.8;
}

.about-values-section,
.program-support-section{
    max-width:none;
    background:#0b1220;
}

.about-values-grid,
.support-grid{
    max-width:1200px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin:auto;
}

.about-value-card,
.support-grid article{
    padding:28px;
    background:linear-gradient(145deg,#111827,#0f172a);
    border:1px solid var(--border);
    border-radius:18px;
}

.value-number,
.support-grid strong{
    display:block;
    margin-bottom:18px;
    color:var(--primary);
    font-size:1.55rem;
    font-weight:800;
}

.about-value-card h3,
.support-grid h3{
    margin-bottom:10px;
    color:#fff;
}

.about-value-card p,
.support-grid p{
    color:var(--muted);
    font-size:.92rem;
}

.about-process-section{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:65px;
    align-items:center;
}

.text-link{
    display:inline-block;
    color:var(--primary);
    font-weight:700;
    text-decoration:none;
}

.text-link:hover{
    color:#93c5fd;
}

.learning-steps{
    display:grid;
    gap:14px;
}

.learning-step{
    display:flex;
    gap:18px;
    align-items:center;
    padding:19px 22px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
}

.learning-step strong{
    width:43px;
    height:43px;
    flex:0 0 43px;
    display:grid;
    place-items:center;
    background:rgba(96,165,250,.12);
    border:1px solid rgba(96,165,250,.4);
    border-radius:50%;
    color:var(--primary);
}

.learning-step h3{
    color:#fff;
    font-size:1rem;
}

.learning-step p{
    color:var(--muted);
    font-size:.88rem;
}

.audience-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.audience-grid div{
    display:flex;
    gap:13px;
    align-items:center;
    padding:20px;
    background:rgba(15,23,42,.7);
    border:1px solid var(--border);
    border-radius:14px;
    font-size:1.3rem;
}

.audience-grid span{
    color:#d9e0ea;
    font-size:.92rem;
    font-weight:600;
}

.page-cta-section{
    max-width:1152px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    margin:25px auto 80px;
    padding:38px 42px;
    background:linear-gradient(120deg,rgba(37,99,235,.22),rgba(34,197,94,.1));
    border:1px solid rgba(96,165,250,.38);
    border-radius:22px;
}

.page-cta-section h2{
    margin:8px 0;
    color:#fff;
}

.page-cta-section p{
    color:var(--muted);
}

.program-facts{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.program-facts span{
    padding:8px 13px;
    background:rgba(15,23,42,.75);
    border:1px solid #334155;
    border-radius:999px;
    color:#dbeafe;
    font-size:.83rem;
}

.program-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}

.program-card{
    position:relative;
    display:grid;
    grid-template-columns:68px 1fr;
    column-gap:19px;
    padding:29px;
    overflow:hidden;
    background:linear-gradient(145deg,#111827,#0f172a);
    border:1px solid var(--border);
    border-radius:20px;
    transition:transform .3s ease,border-color .3s ease;
}

.program-card:hover{
    transform:translateY(-5px);
    border-color:var(--program-color,var(--primary));
}

.program-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:var(--program-color,var(--primary));
}

.program-java{--program-color:#f97316}
.program-csharp{--program-color:#a78bfa}
.program-python{--program-color:#facc15}
.program-cpp{--program-color:#38bdf8}
.program-logic{--program-color:#22c55e;grid-column:1/-1}

.program-icon{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    grid-row:1/3;
    background:rgba(255,255,255,.05);
    border:1px solid var(--program-color);
    border-radius:15px;
    color:#fff;
    font-size:1.5rem;
    font-weight:800;
}

.program-title span,
.program-title small{
    display:block;
}

.program-title span{
    color:#fff;
    font-size:1.35rem;
    font-weight:800;
}

.program-title small{
    color:var(--program-color);
    font-size:.73rem;
    font-weight:700;
    text-transform:uppercase;
}

.program-card > p,
.program-card > ul,
.program-card > .text-link{
    grid-column:1/-1;
}

.program-card > p{
    margin:22px 0 14px;
    color:#bdc7d6;
}

.program-price-summary{
    display:inline-flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:6px 10px;
    margin:22px 0 4px;
    padding:12px 17px;
    border:1px solid rgba(34,197,94,.48);
    border-radius:12px;
    background:rgba(34,197,94,.09);
}

.program-price-summary span,
.program-price-summary small{
    color:#cbd5e1;
}

.program-price-summary strong{
    color:var(--accent);
    font-size:1.65rem;
}

.program-card-price{
    display:flex;
    align-items:baseline;
    gap:6px;
    width:max-content;
    margin:0 0 17px;
    padding:6px 10px;
    border-radius:8px;
    background:rgba(34,197,94,.1);
    color:var(--accent);
}

.program-card-price strong{
    font-size:1.08rem;
}

.program-card-price span{
    color:#aeb9c8;
    font-size:.75rem;
}

.hero-price-note{
    display:flex;
    align-items:baseline;
    justify-content:center;
    flex-wrap:wrap;
    gap:5px 8px;
    width:max-content;
    max-width:100%;
    margin:19px auto 2px;
    padding:9px 13px;
    border:1px solid rgba(34,197,94,.4);
    border-radius:10px;
    background:rgba(34,197,94,.08);
    color:#cbd5e1;
    text-align:center;
    text-decoration:none;
    transition:var(--transition);
}

.hero-price-note:hover{
    border-color:var(--accent);
    background:rgba(34,197,94,.14);
    transform:translateY(-2px);
}

.hero-price-note strong{
    color:var(--accent);
    font-size:1.25rem;
}

.hero-price-note span,
.hero-price-note small{
    font-size:.78rem;
}

.program-card ul{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px 20px;
    margin-bottom:20px;
    padding:0;
    list-style:none;
}

.program-card li{
    position:relative;
    padding-left:17px;
    color:var(--muted);
    font-size:.88rem;
}

.program-card li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--program-color);
}

.enrolment-panel{
    max-width:1152px;
    display:grid;
    grid-template-columns:330px 1fr;
    gap:45px;
    align-items:center;
    margin:35px auto 80px;
    padding:43px;
    background:linear-gradient(130deg,#111b30,#0f172a);
    border:1px solid rgba(96,165,250,.4);
    border-radius:24px;
}

.enrolment-price{
    padding:27px;
    text-align:center;
    background:rgba(7,11,20,.65);
    border:1px solid var(--border);
    border-radius:18px;
}

.enrolment-price span,
.enrolment-price p{
    color:var(--muted);
    font-size:.86rem;
}

.enrolment-price strong{
    display:block;
    color:var(--accent);
    font-size:3.5rem;
    line-height:1.2;
}

.enrolment-copy h2{
    color:#fff;
    font-size:2rem;
}

.enrolment-copy > p{
    margin:12px 0 5px;
    color:#bdc7d6;
}

.referral-strip{
    max-width:1152px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:24px;
    align-items:center;
    margin:10px auto 70px;
    padding:30px 34px;
    background:linear-gradient(120deg,rgba(34,197,94,.12),rgba(96,165,250,.1));
    border:1px solid rgba(34,197,94,.35);
    border-radius:20px;
}

.referral-strip-icon{
    font-size:2.5rem;
}

.referral-strip h2{
    margin:5px 0;
    color:#fff;
}

.referral-strip p{
    color:var(--muted);
}

@media(max-width:900px){
    .about-values-grid,
    .support-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .about-process-section{
        grid-template-columns:1fr;
        gap:35px;
    }

    .audience-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .enrolment-panel{
        grid-template-columns:260px 1fr;
        margin-inline:20px;
    }
}

@media(max-width:700px){
    .page-hero{
        padding:65px 18px 55px;
    }

    .about-introduction,
    .about-values-section,
    .about-process-section,
    .about-audience-section,
    .programs-section,
    .program-support-section{
        padding:55px 18px;
    }

    .about-profile-card,
    .program-grid,
    .enrolment-panel{
        grid-template-columns:1fr;
    }

    .about-photo-wrap{
        max-width:390px;
        margin:auto;
    }

    .about-values-grid,
    .support-grid,
    .audience-grid{
        grid-template-columns:1fr;
    }

    .page-cta-section,
    .referral-strip{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        margin-inline:18px;
        padding:28px;
    }

    .program-logic{
        grid-column:auto;
    }

    .program-card ul{
        grid-template-columns:1fr;
    }

    .enrolment-panel{
        gap:28px;
        margin-inline:18px;
        padding:26px;
    }

    .enrolment-copy .hero-buttons{
        justify-content:flex-start;
        padding-inline:0;
    }
}

@media(prefers-reduced-motion:reduce){
    .program-card,
    .carousel-track .student-card{
        animation:none!important;
        transition:none!important;
    }
}

/* ==========================================
   Free Resources Refresh
========================================== */

.resource-library-tools,
.resource-library-section{
    max-width:1200px;
    padding:55px 24px 25px;
}

.resource-library-tools{
    padding-bottom:10px;
}

.resource-library-section > h2{
    color:#fff;
    font-size:1.9rem;
}

.resource-card{
    position:relative;
    padding:26px;
    overflow:hidden;
    background:linear-gradient(145deg,#111827,#0f172a);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow-md);
}

.resource-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
}

.resource-card:hover{
    border-color:rgba(96,165,250,.55);
    box-shadow:var(--shadow-lg);
}

.resource-card h3{
    margin-bottom:10px;
    color:#fff;
}

.resource-card > p{
    color:var(--muted);
    line-height:1.65;
}

.resource-icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    background:rgba(96,165,250,.1);
    border:1px solid rgba(96,165,250,.3);
    border-radius:14px;
    font-size:1.8rem;
}

.resource-card .resource-meta{
    justify-content:flex-start;
    margin:18px 0;
}

.resource-card .resource-meta span{
    padding:5px 10px;
    background:#172033;
    border:1px solid #334155;
    color:#bfdbfe;
    font-size:.75rem;
}

.resource-card .preview-btn{
    margin-top:auto;
    margin-bottom:10px;
    background:#1e293b;
    border:1px solid #334155;
}

.resource-card .preview-btn:hover{
    background:#334155;
}

.resource-card .download-btn{
    margin-top:0;
    background:var(--primary-dark);
}

.resource-card .download-btn:hover{
    background:#1d4ed8;
}

.preview-resource-icon{
    width:100px;
    height:100px;
    display:grid;
    place-items:center;
    margin:10px auto 20px;
    background:rgba(96,165,250,.12);
    border:1px solid rgba(96,165,250,.35);
    border-radius:22px;
    font-size:3rem;
}

.preview-content .preview-image{
    width:120px;
    height:120px;
    padding:14px;
    object-fit:contain;
    background:#111827;
    border:1px solid var(--border);
}

.resource-source{
    color:var(--accent);
    font-size:.86rem;
    font-weight:700;
}

@media(max-width:600px){
    .resource-library-tools,
    .resource-library-section{
        padding-inline:18px;
    }
}

/* ==========================================
   Printable Student Portfolio
========================================== */

@media print{

    @page{
        margin:14mm;
    }

    body.portfolio-view{
        padding-top:0;
        color:#111827;
        background:#fff;
        font-size:11pt;
    }

    body.portfolio-view header,
    body.portfolio-view footer,
    body.portfolio-view #topBtn,
    body.portfolio-view .whatsapp-float,
    body.portfolio-view .preview-modal,
    body.portfolio-view .portfolio-back-link,
    body.portfolio-view .portfolio-share-panel,
    body.portfolio-view .portfolio-share-footer,
    body.portfolio-view .preview-btn,
    body.portfolio-view main > section:not(.student-profile):not(#portfolioHeader):not(.projects-grid){
        display:none!important;
    }

    body.portfolio-view main,
    body.portfolio-view section,
    body.portfolio-view .projects-grid{
        max-width:none;
        margin:0;
        padding:0;
    }

    body.portfolio-view .student-profile-card,
    body.portfolio-view .project-card{
        color:#111827;
        background:#fff;
        border:1px solid #cbd5e1;
        box-shadow:none;
        break-inside:avoid;
    }

    body.portfolio-view .student-profile-card{
        margin-bottom:18px;
    }

    body.portfolio-view .projects-grid{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    body.portfolio-view h1,
    body.portfolio-view h2,
    body.portfolio-view h3,
    body.portfolio-view h4,
    body.portfolio-view .skills-title{
        color:#111827!important;
    }

    body.portfolio-view .portfolio-skill,
    body.portfolio-view .project-tech span,
    body.portfolio-view .project-skills span,
    body.portfolio-view .project-meta span{
        color:#111827!important;
        background:#f1f5f9!important;
        border-color:#cbd5e1!important;
    }

    body.portfolio-view .student-profile-initials,
    body.portfolio-view .project-student-initials{
        color:#111827!important;
        background:#f1f5f9!important;
        border-color:#64748b!important;
    }

    body.portfolio-view .project-image img{
        height:150px;
    }

}

/* =========================================================
   VIDEO CONTENT SYSTEM
   ========================================================= */

[hidden]{
    display:none !important;
}

.site-videos-section{
    padding-top:20px;
}

.site-video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
    gap:28px;
    margin-top:32px;
}

.site-video-card,
.testimonial-video-card{
    overflow:hidden;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:0 18px 40px rgba(0,0,0,.22);
}

.responsive-video{
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#020617;
}

.responsive-video video,
.responsive-video iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
    object-fit:cover;
}

.site-video-copy{
    padding:22px;
}

.site-video-copy h3{
    margin:8px 0 10px;
}

.site-video-copy p{
    margin:0;
    color:var(--muted);
}

.video-label{
    display:inline-flex;
    padding:6px 11px;
    border:1px solid rgba(96,165,250,.4);
    border-radius:999px;
    color:var(--primary);
    font-size:.78rem;
    font-weight:700;
}

.testimonial-video-wrap{
    margin:20px 0 8px;
}

.testimonial-video-heading{
    margin:0 0 10px;
    font-size:.95rem;
    color:#dbeafe;
}

.testimonial-video-card{
    border-radius:14px;
}

@media(max-width:600px){
    .site-video-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .site-video-copy{
        padding:18px;
    }
}

/* =========================================================
   FREE RESOURCES — LIBRARY SUMMARY AND MODULE ICON FALLBACKS
   ========================================================= */

.resource-summary{
    width:min(1100px, 92%);
    margin:-14px auto 28px;
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}

.resource-summary-item{
    padding:20px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(15, 23, 42, .96);
    box-shadow:0 14px 34px rgba(0, 0, 0, .22);
    text-align:center;
}

.resource-summary-item strong{
    display:block;
    color:var(--primary);
    font-size:1.65rem;
    margin-bottom:4px;
}

.resource-summary-item span{
    color:#cbd5e1;
    font-size:.9rem;
}

.resource-icon{
    overflow:hidden;
}

.resource-module-icon{
    width:58px;
    height:58px;
    object-fit:contain;
    display:block;
}

.resource-card-heading{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:26px;
}

.resource-source-label,
.resource-featured-label{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 9px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:700;
    line-height:1;
}

.resource-source-label{
    color:#bfdbfe;
    background:rgba(59, 130, 246, .12);
    border:1px solid rgba(96, 165, 250, .22);
}

.resource-featured-label{
    color:#fde68a;
    background:rgba(245, 158, 11, .12);
    border:1px solid rgba(245, 158, 11, .24);
}

.preview-resource-icon{
    min-height:120px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:18px;
}

.preview-resource-module-icon{
    width:96px;
    height:96px;
    object-fit:contain;
}

@media(max-width:700px){
    .resource-summary{
        grid-template-columns:1fr;
        margin-top:-20px;
    }
}

/* =========================================================
   HOME BRAND ADVERT — LOOPING VIDEO EXPERIENCE
   ========================================================= */

.home-brand-video-section{
    padding-top:76px;
}

.home-brand-video-section .site-video-grid{
    grid-template-columns:minmax(0, 1fr);
    width:min(100%, 980px);
    max-width:980px;
    margin:32px auto 0;
}

.home-brand-video-card{
    overflow:hidden;
}

.home-brand-player{
    position:relative;
    background:#020617;
    aspect-ratio:16 / 9;
    overflow:hidden;
}

.home-brand-video{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.home-video-overlay{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(to top, rgba(2, 6, 23, .72), rgba(2, 6, 23, .12) 55%, rgba(2, 6, 23, .22));
    transition:opacity .3s ease, visibility .3s ease;
}

.home-video-overlay.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.home-video-sound-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 20px;
    border:1px solid rgba(255,255,255,.32);
    border-radius:999px;
    color:white;
    background:rgba(2, 6, 23, .76);
    backdrop-filter:blur(10px);
    font:inherit;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(0,0,0,.28);
}

.home-video-sound-button:hover{
    transform:translateY(-2px);
    border-color:var(--primary);
}

.home-video-controls{
    position:absolute;
    left:16px;
    right:16px;
    bottom:14px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    pointer-events:none;
}

.home-video-controls button{
    pointer-events:auto;
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    color:#f8fafc;
    background:rgba(2, 6, 23, .72);
    font:inherit;
    font-size:.8rem;
    font-weight:700;
    cursor:pointer;
    backdrop-filter:blur(8px);
}

.home-brand-video-copy{
    text-align:center;
}

.home-video-note{
    margin-top:10px !important;
    color:#94a3b8 !important;
    font-size:.82rem;
}

@media(max-width:600px){
    .home-brand-video-section{
        padding-top:56px;
    }

    .home-video-controls{
        left:10px;
        right:10px;
        bottom:10px;
    }

    .home-video-controls button{
        padding:7px 11px;
        font-size:.74rem;
    }
}


/* ==========================================
   Landing page mobile launch fixes
   ========================================== */
@media (max-width:768px){
  .landing-navbar{
    width:100%;
    min-width:0;
    padding:0 8px;
    gap:6px;
    overflow:hidden;
  }

  .landing-navbar .main-logo{
    flex:0 0 86px;
    min-width:0;
  }

  .landing-navbar .main-logo img{
    width:86px;
    height:auto;
    max-width:100%;
  }

  .landing-icons{
    flex:1 1 auto;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:2px;
  }

  .landing-icons a{
    width:100%;
    min-width:0;
    height:66px;
  }

  .landing-icon-label{
    width:100%;
    overflow-wrap:anywhere;
  }

  .landing-hero h1{
    font-size:clamp(1.25rem,5.7vw,1.75rem);
    line-height:1.15;
    white-space:nowrap;
  }

  .landing-hero{
    width:100%;
    min-height:calc(100svh - 82px);
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:36px 16px;
  }

  .landing-hero .logo-container{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
    align-items:center;
  }

  .landing-hero .logo-container img{
    display:block;
    margin:0 auto;
  }

  .landing-hero p{
    max-width:34rem;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
}

@media (max-width:420px){
  .landing-navbar .main-logo{
    flex-basis:72px;
  }

  .landing-navbar .main-logo img{
    width:72px;
  }

  .landing-icons img{
    width:22px;
    height:22px;
  }

  .landing-icon-label{
    font-size:.46rem;
    line-height:1;
  }

  .landing-hero{
    padding-left:10px;
    padding-right:10px;
  }

  .landing-hero h1{
    font-size:clamp(1.08rem,5.35vw,1.4rem);
    letter-spacing:-.02em;
  }
}