/* ==========================
   Logo
   ========================== */

.navbar-brand img {
    max-height: 100px;
    width: 110px;
    transition: .3s ease;
}

@media (max-width: 992px) {
    .navbar-brand img {
        max-height: 62px;
    }
}

@media (max-width: 576px) {
    .navbar-brand img {
        max-height: 86px;
    }
}

/* ==========================
   Navbar Dropdown Menu
   ========================== */

.program-menu {
    position: relative;
    display: inline-block;
}

.program-link {
    display: inline-flex;
    align-items: center;
}

.program-link::after {
    content: "▼";
    font-size: 10px;
    margin-left: 6px;
    transition: 0.3s;
}

.program-menu:hover .program-link::after {
    transform: rotate(180deg);
}

.program-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    border-radius: 10px;
    padding: 10px 0;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .3s ease;
    z-index: 999;
}

.program-dropdown a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: #333;
    white-space: nowrap;
    transition: .3s;
}

.program-dropdown a:hover {
    background: #f5f5f5;
    color: #398121;
}

.program-menu:hover .program-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ===========================
   Mobile Program Dropdown
   =========================== */

.mobile-menu-title{
    color: var(--fg);
    font-weight:700;
    pointer-events:none;
    margin-top:10px;
}

.mobile-submenu{
    padding-right:25px;
    font-size:20px;
    text-transform:none;
}

@media (max-width: 991px){

    .nav-links{
        display:none;
    }

    .nav-toggle{
        display:flex;
    }

        .nav{
        display:flex;
        align-items:center;
    }

    .nav-cta-row{
        margin-left:auto;
    }

}

/* ===========================
   course Background
   =========================== */

/* Shared colorful premium card */
.cap-gradient{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow:
    0 20px 50px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* Gradient layer */
.cap-gradient::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.22), transparent 28%),
    radial-gradient(circle at 85% 85%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(
      135deg,
      #FF6B6B 0%,
      #FFB347 25%,
      #4F8CFF 65%,
      #7C4DFF 100%
    );
}

/* Soft glow */
.cap-gradient::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(
      to bottom,
      rgba(255,255,255,.08),
      rgba(0,0,0,.12)
  );
}

.cap-gradient:nth-child(1)::before{
  background:linear-gradient(135deg,#FF6B6B,#FFB347);
}

.cap-gradient:nth-child(2)::before{
  background:linear-gradient(135deg,#00C6A7,#00E5A8);
}

.cap-gradient:nth-child(3)::before{
  background:linear-gradient(135deg,#4F8CFF,#7C4DFF);
}

.cap-gradient:nth-child(4)::before{
  background:linear-gradient(135deg,#EC4899,#8B5CF6);
}

.cap-gradient:nth-child(5)::before{
  background:linear-gradient(135deg,#14B8A6,#22C55E);
}

.cap-gradient:nth-child(6)::before{
  background:linear-gradient(135deg,#F97316,#EF4444);
}

.cap-gradient:nth-child(7)::before{
  background:linear-gradient(135deg,#3B82F6,#06B6D4);
}

/* ===========================================
   Feature Pills
=========================================== */

.feature-pill{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.4rem;
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;

    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .03em;

    border: 1px solid rgba(255,255,255,.15);

    box-shadow:
        0 12px 30px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.25);

    transition: all .35s ease;
}

/* Gradient Background */

.feature-pill::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;

    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 28%),
        linear-gradient(
            135deg,
            #FF6B6B 0%,
            #FF9F43 20%,
            #FFD93D 40%,
            #00C897 65%,
            #3B82F6 100%
        );
}

/* Gloss Effect */

.feature-pill::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.18),
        rgba(255,255,255,0) 45%,
        rgba(0,0,0,.08)
    );
}

/* Hover */

.feature-pill:hover{
    transform: translateY(-6px) scale(1.05);
    box-shadow:
        0 20px 45px rgba(0,0,0,.22),
        0 0 30px rgba(255,255,255,.18);
}


/* ===========================================
   Home-course
=========================================== */
.home-course{
background:
radial-gradient(circle at 15% 20%, #FFE082 0%, transparent 22%),
radial-gradient(circle at 80% 25%, #A5D8FF 0%, transparent 20%),
radial-gradient(circle at 70% 80%, #B9FBC0 0%, transparent 22%),
radial-gradient(circle at 30% 85%, #FFD6E7 0%, transparent 20%),
#FDFCF8;
}

/* =========================================================
   TESTIMONIAL SECTION
========================================================= */

.testimonials-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:

        radial-gradient(circle at 8% 15%, rgba(255,193,7,.15), transparent 25%),

        radial-gradient(circle at 90% 20%, rgba(59,130,246,.14), transparent 30%),

        radial-gradient(circle at 20% 90%, rgba(34,197,94,.13), transparent 25%),

        radial-gradient(circle at 85% 85%, rgba(236,72,153,.13), transparent 30%),

        linear-gradient(
            135deg,
            #FFFDF8,
            #FFF8F1,
            #F8FBFF,
            #F8FFF9
        );

}


/* =========================================================
   SLIDER
========================================================= */

.testimonial-slider{

    margin-top:70px;

    overflow:hidden;

    width:100%;

    position:relative;

}

.testimonial-track{

    display:flex;

    gap:28px;

    align-items:stretch;

    width:max-content;

    will-change:transform;

}


/* =========================================================
   CARD
========================================================= */

.testimonial-card{

    position:relative;

    width:360px;

    min-height:320px;

    flex-shrink:0;

    overflow:hidden;

    padding:35px;

    border-radius:32px;

    color:#fff;

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

    transition:.45s ease;

}


/* Hover */

.testimonial-card:hover{

    transform:

        translateY(-10px)

        rotate(-1deg)

        scale(1.03);

}


/* =========================================================
   DIFFERENT COLOR FOR EVERY CARD
========================================================= */


.testimonial-card:nth-child(8n+1){

background:
linear-gradient(135deg,#FF6B6B,#FFB347);

}

.testimonial-card:nth-child(8n+2){

background:
linear-gradient(135deg,#00C6A7,#22C55E);

}

.testimonial-card:nth-child(8n+3){

background:
linear-gradient(135deg,#4F8CFF,#7C4DFF);

}

.testimonial-card:nth-child(8n+4){

background:
linear-gradient(135deg,#EC4899,#8B5CF6);

}

.testimonial-card:nth-child(8n+5){

background:
linear-gradient(135deg,#F97316,#EF4444);

}

.testimonial-card:nth-child(8n+6){

background:
linear-gradient(135deg,#14B8A6,#3B82F6);

}

.testimonial-card:nth-child(8n+7){

background:
linear-gradient(135deg,#10B981,#06B6D4);

}

.testimonial-card:nth-child(8n){

background:
linear-gradient(135deg,#8B5CF6,#3B82F6);

}


/* =========================================================
   GLOW
========================================================= */

.testimonial-card::before{

content:"";

position:absolute;

width:240px;

height:240px;

border-radius:50%;

background:

rgba(255,255,255,.12);

top:-90px;

right:-70px;

}


/* =========================================================
   QUOTE ICON
========================================================= */

.quote-icon{

position:absolute;

top:20px;

right:30px;

font-size:100px;

line-height:1;

opacity:.12;

font-family:Georgia;

}


/* =========================================================
   STARS
========================================================= */

.stars{

font-size:22px;

letter-spacing:4px;

color:#FFD84D;

margin-bottom:25px;

}


/* =========================================================
   PARAGRAPH
========================================================= */

.testimonial-card p{

line-height:1.9;

font-size:16px;

margin-bottom:35px;

opacity:.96;

}


/* =========================================================
   AUTHOR
========================================================= */

.author{

display:flex;

align-items:center;

gap:15px;

margin-top:auto;

}

.author img{

width:62px;

height:62px;

border-radius:50%;

object-fit:cover;

border:3px solid rgba(255,255,255,.25);

box-shadow:

0 8px 20px rgba(0,0,0,.2);

}


.author h4{

margin:0;

font-size:18px;

font-weight:700;

}


.author span{

display:block;

margin-top:4px;

font-size:14px;

opacity:.85;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

.testimonial-card{

width:300px;

padding:28px;

}

}