/* Hide submenu by default */
		.user-dropdown {
    position: relative;
}
.user-dropdown .sub-menu {
    display: none;
    position: absolute;
    background: #fff;
    min-width: 180px;
    top: 100%;
    left: 100px;
    z-index: 999;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 10px 0;
}

/* Show on hover */
.user-dropdown:hover .sub-menu {
    display: block;
}

/* Styling */
.user-dropdown .sub-menu li {
    list-style: none;
}

.user-dropdown .sub-menu li a {
    display: block;
    padding: 8px 15px;
    color: #333;
}

.user-dropdown .sub-menu li a:hover {
    background: #f5f5f5;
}

/* custom styles for top header strip */
    .top-header-strip {
      background-color: #0a2540;   /* deep navy blue, professional & educational */
      color: #f0f4fc;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.85rem;
      padding: 6px 0;
      border-bottom: 1px solid #1e3a5f;
      position: relative;
      z-index: 1030;
    }
    .top-header-strip a {
      color: #e0edff;
      text-decoration: none;
      transition: all 0.2s ease;
      font-weight: 500;
      margin: 0 4px;
    }
    .top-header-strip a:hover {
      color: #ffffff;
      text-decoration: none;
      transform: translateY(-1px);
    }
    .top-header-strip .contact-info i,
    .top-header-strip .quick-links i,
    .top-header-strip .social-icons i {
      margin-right: 6px;
      font-size: 0.8rem;
    }
    .top-header-strip .divider {
      color: #3b6e9e;
      margin: 0 6px;
      font-size: 0.7rem;
    }
    .top-header-strip .quick-links a,
    .top-header-strip .social-icons a {
      margin: 0 6px;
      display: inline-flex;
      align-items: center;
    }
    .top-header-strip .social-icons a {
      background: rgba(255,255,255,0.08);
      width: 26px;
      height: 26px;
      border-radius: 50%;
      justify-content: center;
      transition: background 0.2s;
      margin: 0 3px;
    }
    .top-header-strip .social-icons a i {
      margin-right: 0;
      font-size: 0.8rem;
    }
    .top-header-strip .social-icons a:hover {
      background: #0d6efd;
      color: white;
    }
    /* responsive adjustments */
    @media (max-width: 767.98px) {
      .top-header-strip .contact-info .full-text {
        display: none;
      }
      .top-header-strip .contact-info i {
        margin-right: 0;
        font-size: 0.9rem;
      }
      .top-header-strip .quick-links a span {
        display: none;
      }
      .top-header-strip .quick-links a i {
        margin-right: 0;
        font-size: 1rem;
      }
      .top-header-strip .divider {
        display: none;
      }
      .top-header-strip .social-icons a {
        /*width: 28px;
        height: 28px;*/
        display:none;
      }
    }
    @media (max-width: 576px) {
      .top-header-strip .contact-info {
        /*margin-bottom: 6px;*/
        display: none;
      }
      .top-header-strip .row {
        /*flex-direction: column;
        text-align: center;*/
      }
      /*.top-header-strip .col,
      .top-header-strip .col-auto {
        width: 100%;
        text-align: center;
        justify-content: center !important;
      }*/
      .top-header-strip .quick-links {
        margin: 6px 0;
      }
    }
/* Left Fixed Social Sidebar */
.social-sidebar {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 9999;
}

.social-sidebar a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin: 2px 0;
}

.social-sidebar a:hover {
    width: 60px;
    padding-left: 10px;
}

/* Social Colors */
.facebook {
    background: #1877f2;
}

.instagram {
    background: #e4405f;
}

.twitter {
    background: #1da1f2;
}

.linkedin {
    background: #0077b5;
}

.youtube {
    background: #ff0000;
}

.whatsapp {
    background: #25d366;
}

/* Mobile Responsive */
@media(max-width:768px) {
    .social-sidebar a {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}
.carousel-tabs{
    margin-top:20px;
}

.carousel-tabs .nav-link{
    border-radius:0;
    text-align:center;
    color:#333;
    padding:15px;
    border:1px solid #ddd;
}

.carousel-tabs .nav-link.active{
    background:#0d6efd;
    color:#fff;
}

.carousel-tabs small{
    display:block;
    font-size:12px;
}
.leaderboard-section{
    padding:60px 0;
}
.section-title{
    text-align:center;
    margin-bottom:40px;
}
.section-title h2{
    font-size:38px;
    font-weight:700;
    color:#1e293b;
}

.section-title p{
    color:#6b7280;
    font-size:16px;
}

.leaderboard-card{
    background:#fff;
    border-radius:20px;
    padding:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.3s;
    margin-bottom:25px;
    position:relative;
    overflow:hidden;
}

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

.rank-badge{
    position:absolute;
    top:15px;
    right:15px;
    width:40px;
    height:40px;
    border-radius:50%;
    background:#0d6efd;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:18px;
}

.student-image{
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
    margin:auto;
    border:5px solid #f1f5f9;
}

.student-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.student-name{
    margin-top:15px;
    font-size:22px;
    font-weight:700;
    color:#111827;
}

.student-grade{
    display:inline-block;
    padding:6px 16px;
    border-radius:30px;
    background:#e0f2fe;
    color:#0369a1;
    font-weight:600;
    margin-top:10px;
}

.score-box{
    margin-top:15px;
}

.score-box h4{
    font-size:32px;
    font-weight:700;
    color:#16a34a;
    margin-bottom:0;
}

.score-box p{
    margin-bottom:0;
    color:#6b7280;
}

.trophy-icon{
    font-size:42px;
    margin-bottom:10px;
}

.gold{
    color:#facc15;
}

.silver{
    color:#cbd5e1;
}

.bronze{
    color:#d97706;
}

.top-student{
    border:2px solid #facc15;
    transform:scale(1.03);
}

@media(max-width:767px){

    .section-title h2{
        font-size:28px;
    }

}

/* Page Heading */
.page-banner{
    background: linear-gradient(135deg,#0d6efd,#001f4d);
    padding:60px 0;
    color:#fff;
}

.page-banner h1{
    font-size:42px;
    font-weight:700;
}

.page-banner p{
    margin-top:10px;
    opacity:0.9;
}

/* Project Card */
.project-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:25px;
    box-shadow:0 4px 18px rgba(0,0,0,0.08);
    transition:0.3s;
}

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

.project-thumb{
    width:100%;
    height:200px;
    object-fit:cover;
}

.project-body{
    padding:20px;
}

.project-title{
    font-size:22px;
    font-weight:700;
    color:#222;
    margin-bottom:10px;
}

.project-desc{
    color:#666;
    line-height:1.7;
    margin-bottom:15px;
}

.project-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}

.download-count{
    color:#555;
    font-weight:600;
}

.download-btn{
    border-radius:50px;
    padding:10px 22px;
    font-weight:600;
}

/* Sidebar */
.sidebar-box{
    background:#fff;
    border-radius:12px;
    padding:15px;
    margin-bottom:25px;
    box-shadow:0 4px 18px rgba(0,0,0,0.08);
}

.sidebar-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:15px;
    color:#111;
}

.ad-banner{
    width:100%;
    border-radius:10px;
    margin-bottom:15px;
}

.search-box input{
    border-radius:50px;
    height:48px;
}

/* Responsive */
@media(max-width:767px){

    .page-banner{
        padding:40px 0;
    }

    .page-banner h1{
        font-size:28px;
    }

    .project-title{
        font-size:20px;
    }

}

.hero-section{
            background: linear-gradient(135deg,#004aad,#00b4db);
            color:#fff;
            padding:80px 0;
        }
        .hero-badge{
        background:#ffc107;
        color:#000;
        padding:8px 18px;
        border-radius:30px;
        font-weight:600;
        display:inline-block;
        margin-bottom:20px;
    }

    .info-card{
        background:#fff;
        border-radius:15px;
        padding:25px;
        box-shadow:0 5px 20px rgba(0,0,0,0.08);
        margin-bottom:25px;
    }
        .hero-section h1{
            font-size:48px;
            font-weight:700;
        }

        .hero-section p{
            font-size:18px;
            margin-top:15px;
        }

        .exam-card{
            border:none;
            border-radius:15px;
            overflow:hidden;
            transition:0.3s;
            box-shadow:0 4px 15px rgba(0,0,0,0.08);
            background:#fff;
            height:100%;
        }
        .info-card h4{
        font-size:22px;
        font-weight:700;
        margin-bottom:20px;
    }

    .icon-box{
        width:60px;
        height:60px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#007bff;
        color:#fff;
        font-size:24px;
        margin-bottom:20px;
    }

    .section-title{
        font-size:34px;
        font-weight:700;
        margin-bottom:15px;
    }

    .table-custom thead{
        background:#007bff;
        color:#fff;
    }

    .syllabus-box{
        background:#fff;
        border-radius:15px;
        padding:25px;
        box-shadow:0 5px 20px rgba(0,0,0,0.08);
        margin-bottom:25px;
    }

    .timeline{
        position:relative;
        padding-left:30px;
        overflow:hidden;
    }

    .timeline::before{
        content:'';
        position:absolute;
        left:8px;
        top:0;
        width:3px;
        height:100%;
        background:#007bff;
    }

    .timeline-item{
        position:relative;
        margin-bottom:30px;
    }

    .timeline-item::before{
        content:'';
        position:absolute;
        left:-27px;
        top:5px;
        width:18px;
        height:18px;
        background:#007bff;
        border-radius:50%;
    }

    .cta-section{
        background:linear-gradient(135deg,#141e30,#243b55);
        color:#fff;
        border-radius:20px;
        padding:60px 30px;
    }

    .faq-card .card-header{
        background:#fff;
        border:none;
    }

    .faq-card .card-link{
        font-weight:600;
        color:#222;
        display:block;
    }

    @media(max-width:768px){

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

        .hero-section h1{
            font-size:34px;
        }
    }
        .exam-card:hover{
            transform:translateY(-8px);
        }

        .exam-header{
            padding:18px;
            color:#fff;
            font-size:22px;
            font-weight:600;
        }

        .exam-list li{
            padding:12px 0;
            border-bottom:1px solid #eee;
        }

        .exam-list li:last-child{
            border-bottom:none;
        }

        .section-title{
            font-size:36px;
            font-weight:700;
            margin-bottom:15px;
        }

        .info-box{
            background:#fff;
            padding:30px;
            border-radius:15px;
            box-shadow:0 4px 15px rgba(0,0,0,0.08);
        }

        .cta-section{
            background:linear-gradient(135deg,#141e30,#243b55);
            color:#fff;
            padding:60px 0;
            border-radius:20px;
        }

        .exam-link{
            color:#222;
            text-decoration:none;
            display:block;
        }

        .exam-link:hover{
            text-decoration:none;
            color:#007bff;
        }

        .exam-desc{
            font-size:13px;
            color:#777;
        }

        /* ========= NEW CUSTOM STYLES FOR ENGAGING SECTIONS (DYNAMIC) ========= */
        .update-card, .resource-card, .story-card {
            background: #fff;
            border-radius: 20px;
            transition: all 0.25s ease;
            box-shadow: 0 8px 20px rgba(0,0,0,0.05);
            height: 100%;
            border: 1px solid rgba(0,0,0,0.03);
        }
        .update-card:hover, .resource-card:hover, .story-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 16px 28px rgba(0,0,0,0.1);
        }
        .update-badge {
            font-size: 12px;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 30px;
            background: #ffe8df;
            color: #c45b00;
        }
        .update-date {
            font-size: 0.85rem;
            color: #6c757d;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .resource-icon {
            width: 48px;
            height: 48px;
            background: #eef2ff;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: #004aad;
        }
        .story-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .rating-star {
            color: #ffb800;
            font-size: 14px;
            letter-spacing: 2px;
        }
        .btn-outline-accent {
            border: 1px solid #004aad;
            color: #004aad;
            border-radius: 50px;
            padding: 6px 18px;
            font-weight: 500;
            transition: 0.2s;
        }
        .btn-outline-accent:hover {
            background: #004aad;
            color: white;
        }
        .resource-link {
            text-decoration: none;
            font-weight: 600;
        }
        .section-bg-light {
            background: #ffffff;
            border-radius: 30px;
        }
        .badge-new {
            background: #0d6efd;
            color: white;
            font-size: 11px;
            border-radius: 30px;
            padding: 4px 10px;
        }
        @media(max-width:768px){
            .hero-section h1{
                font-size:34px;
            }
            .section-title {
                font-size: 28px;
            }
        }
p.details {
    margin-bottom: 34px !important;
    text-align: center !important;
}
.btn-uploading{

    background:#ff9800;

    color:#fff;

    border:none;

    padding:12px 22px;

    border-radius:50px;

    font-weight:600;

    cursor:not-allowed;

    opacity:0.95;

}
.note-image{
    width:100%;
    height:240px; /* fixed height */

    overflow:hidden;

    border-radius:12px 12px 0 0;

    background:#f5f5f5;

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

.note-image img{

    width:100%;
    height:100%;

    object-fit:contain;

    transition:0.4s ease;
}

/* Hover Zoom Effect */

.single_blog:hover .note-image img{

    transform:scale(1.05);

}



/* Full-width ad section with edge-to-edge background */
        .full-width-ad {
            background: linear-gradient(105deg, #0f2b3d 0%, #1b4f6e 100%);
            position: relative;
            overflow: hidden;
        }
        /* Optional overlay pattern */
        .full-width-ad::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" opacity="0.05"><path fill="white" d="M70 30l30-20 30 20v40l-30 20-30-20zM140 80l30-20 30 20v40l-30 20-30-20zM0 130l30-20 30 20v40l-30 20-30-20z"/></svg>');
            background-repeat: repeat;
            pointer-events: none;
        }
        .ad-content {
            position: relative;
            z-index: 2;
            padding: 3rem 1rem;
        }
        .badge-ad {
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(4px);
            border-radius: 40px;
            padding: 5px 14px;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            display: inline-block;
            color: #fff;
            border: 1px solid rgba(255,255,255,0.3);
        }
        .ad-title {
            font-size: 2.2rem;
            font-weight: 800;
            line-height: 1.2;
        }
        .ad-desc {
            font-size: 1rem;
            opacity: 0.9;
            margin-bottom: 1.5rem;
        }
        .btn-ad-primary {
            background: #ffb703;
            border: none;
            border-radius: 60px;
            padding: 10px 28px;
            font-weight: 700;
            color: #1e2a3e;
            transition: 0.2s;
            box-shadow: 0 8px 16px -5px rgba(0,0,0,0.2);
        }
        .btn-ad-primary:hover {
            background: #ffc107;
            transform: translateY(-2px);
            color: #000;
            box-shadow: 0 12px 22px -8px rgba(0,0,0,0.3);
        }
        .btn-outline-ad {
            background: transparent;
            border: 1.5px solid white;
            border-radius: 60px;
            padding: 10px 28px;
            font-weight: 600;
            color: white;
            margin-left: 12px;
            transition: 0.2s;
        }
        .btn-outline-ad:hover {
            background: white;
            color: #0f2b3d;
            text-decoration: none;
        }
        .ad-image-area img {
            max-width: 100%;
            filter: drop-shadow(0 20px 25px -10px rgba(0,0,0,0.3));
            border-radius: 24px;
        }
        .close-ad {
            position: absolute;
            top: 15px;
            right: 20px;
            background: rgba(0,0,0,0.4);
            color: white;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: 0.2s;
            backdrop-filter: blur(4px);
            font-size: 1.2rem;
        }
        .close-ad:hover {
            background: rgba(0,0,0,0.7);
            transform: scale(1.05);
        }
        @media (max-width: 768px) {
            .ad-title { font-size: 1.6rem; }
            .ad-content { padding: 2rem 1rem; text-align: center; }
            .btn-group-ad .btn { margin: 5px; display: block; width: 100%; margin-left: 0 !important; }
            .btn-outline-ad { margin-left: 0 !important; margin-top: 10px; }
            .ad-image-area { margin-top: 20px; text-align: center; }
        }
        @media (max-width: 576px) {
            .ad-title { font-size: 1.4rem; }
        }

        .ad-slide{
    min-height:350px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
    border-radius:15px;
    overflow:hidden;
}

.ad-slide::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.55);
}

.ad-overlay{
    position:relative;
    z-index:2;
    max-width:800px;
    padding:30px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-color:rgba(0,0,0,.5);
    border-radius:50%;
    padding:20px;
}
.hero-ad{
    height:350px;
    overflow:hidden;
}
.hero-ad img{
    width:100%;
    /*height:100%;*/
    object-fit:cover;
}
/* =========================
QUIZ CARD
========================= */

.quiz-card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    transition:0.35s ease;
    height:100%;
    display:flex;
    flex-direction:column;
    border:1px solid #eee;
}

.quiz-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

/* =========================
QUIZ IMAGE
========================= */

.quiz-image{
    width:100%;
    height:240px;
    overflow:hidden;
    background:#f8f9fa;
    display:flex;
    justify-content:center;
    align-items:center;
    border-bottom:1px solid #eee;
}

.quiz-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:0.4s ease;
}

.quiz-card:hover .quiz-image img{
    transform:scale(1.05);
}

/* =========================
BODY
========================= */

.quiz-body{
    padding:20px;
    flex:1;
    display:flex;
    flex-direction:column;
}

/* Category Badge */

.quiz-category{
    display:inline-block;
    background:#eef2ff;
    color:#4f46e5;
    font-size:13px;
    font-weight:600;
    padding:6px 14px;
    border-radius:30px;
    margin-bottom:15px;
}

/* Title */

.quiz-title{
    font-size:20px;
    font-weight:700;
    color:#222;
    margin-bottom:15px;
    line-height:1.4;
    min-height:56px;
}

/* Quiz Info */

.quiz-meta{
    margin-bottom:18px;
}

.quiz-meta p{
    margin-bottom:8px;
    color:#555;
    font-size:15px;
}

.quiz-meta i{
    width:22px;
    color:#4f46e5;
}

/* Button */

.quiz-btn{
    margin-top:auto;
    width:100%;
    border:none;
    border-radius:40px;
    padding:12px;
    background:#4f46e5;
    color:#fff;
    font-weight:600;
    transition:0.3s;
    text-align:center;
    text-decoration:none;
    display:block;
}

.quiz-btn:hover{
    background:#3b35c6;
    color:#fff;
    text-decoration:none;
}

/* Empty State */

.quiz-empty{
    background:#fff3cd;
    border:1px solid #ffeeba;
    color:#856404;
    padding:18px;
    border-radius:10px;
    text-align:center;
}

/* =========================================
TOP MENU WRAPPER
========================================= */

.top-menu-wrapper{
    position:relative;
    display:flex;
    align-items:center;
}

/* =========================================
SCROLLABLE AREA
========================================= */

.top-menu-scroll{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    gap:12px;
    width:100%;
    padding:10px 45px;
    scrollbar-width:none;
}

/* HIDE SCROLLBAR */

.top-menu-scroll::-webkit-scrollbar{
    display:none;
}

/* =========================================
MENU BUTTON
========================================= */

.top-menu-btn{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-width:220px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    padding:12px 18px;
    color:#222;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.top-menu-btn:hover{
    background:#007bff;
    color:#fff;
    text-decoration:none;
    border-color:#007bff;
}

.top-menu-btn i{
    margin-left:12px;
}

/* =========================================
ARROW BUTTONS
========================================= */

.scroll-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
    z-index:10;
    cursor:pointer;
    transition:.3s;
}

.scroll-arrow:hover{
    background:#007bff;
    color:#fff;
}

.left-arrow{
    left:0;
}

.right-arrow{
    right:0;
}

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

@media(max-width:768px){

    .top-menu-btn{
        min-width:190px;
        font-size:14px;
    }

    .scroll-arrow{
        width:34px;
        height:34px;
    }

}

.student-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 3px 15px rgba(0,0,0,.08);
    margin:10px;
}

.student-img{
    position:relative;
}

.student-img img{
    width:100%;
    /*height:280px;*/
    object-fit:contain;
}

.rank-badge{
    position:absolute;
    top:10px;
    right:10px;
    background:#ff9800;
    color:#fff;
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.student-content{
    padding:14px;
}

.student-content h4{
    margin-bottom:2px;
    font-weight:600;
}

.student-class{
    color:#28a745;
    font-weight:600;
}

.student-info p{
    margin-bottom:6px;
    font-size:14px;
}

.achievement-box{
    margin-top:10px;
    padding:5px;
    background:#f8f9fa;
    border-left:4px solid #28a745;
    font-size:12px;
    line-height:18px;
}
/* =====================================
PROFILE CARD
===================================== */

.teacher-profile{
    background:#fff;
    border-radius:12px;
    padding:25px;
    border:1px solid #eee;
    margin-bottom:25px;
}

.teacher-photo{
    width:100%;
    height:auto;
    object-fit:contain;
    border-radius:10px;
}

.teacher-name{
    font-size:32px;
    font-weight:700;
    color:#222;
}

.teacher-role{
    color:#007bff;
    font-size:16px;
    margin-bottom:15px;
}

.rating-stars{
    color:#ffc107;
    font-size:18px;
}

.teacher-meta{
    margin-top:20px;
}

.teacher-meta p{
    margin-bottom:10px;
    color:#555;
}

/* =====================================
ABOUT SECTION
===================================== */

.about-box{
    background:#fff;
    border-radius:12px;
    padding:25px;
    border:1px solid #eee;
    margin-top:20px;
}

.about-box h4{
    margin-bottom:15px;
    font-weight:700;
}

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

.contact-card{
    background:#fff;
    border-radius:12px;
    border:1px solid #eee;
    overflow:hidden;
}

.contact-header{
    background:#007bff;
    color:#fff;
    padding:18px 20px;
    font-size:22px;
    font-weight:600;
}

.contact-body{
    padding:25px;
}

.form-control{
    height:46px;
    border-radius:8px;
}

textarea.form-control{
    height:auto;
}

.btn-submit{
    height:46px;
    border-radius:8px;
    font-weight:600;
}

/* =====================================
NOTES SECTION
===================================== */

.notes-section{
    margin-top:40px;
}

.section-title{
    font-size:28px;
    font-weight:700;
    margin-bottom:25px;
    color:#222;
}

.note-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #eee;
    transition:.3s;
    height:100%;
}

.note-card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.note-image{
    width:100%;
    height:220px;
    object-fit:contain;
}

.note-content{
    padding:20px;
}

.note-title{
    font-size:20px;
    font-weight:600;
    margin-bottom:10px;
}

.note-desc{
    color:#666;
    line-height:1.7;
    font-size:14px;
}

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

@media(max-width:768px){

    .teacher-photo{
        height:250px;
        margin-bottom:20px;
    }

    .teacher-name{
        font-size:26px;
    }

}

</style>


<!-- =========================================
TOP HEADER FEATURE SECTION
Place After Navigation Bar
========================================= -->

<style>

.top-feature-section{
    background:#f5f5f5;
    padding:15px 0;
    border-bottom:1px solid #e5e5e5;
}

/* ======================================
BANNER SECTION
====================================== */

.banner-section{
    margin-top:15px;
}

.main-banner{
    background:#ff6200;
    border-radius:12px;
    overflow:hidden;
    height:100%;
}

.main-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.side-banner{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #eee;
    /*height:100%;*/
}

.side-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ======================================
LATEST UPDATES
====================================== */

.latest-update-box{
    background:#fff;
    border-radius:12px;
    padding:25px;
    margin-top:18px;
    border:1px solid #eee;
}

.latest-update-title{
    font-size:28px;
    font-weight:700;
    margin-bottom:20px;
    display:flex;
    align-items:center;
}

.latest-update-title i{
    margin-right:12px;
    color:#111;
}

.update-list{
    margin:0;
    padding:0;
    list-style:none;
}

.update-list li{
    padding:12px 0;
    border-top:1px solid #f1f1f1;
    font-size:18px;
}

.update-list li:first-child{
    border-top:none;
}

.update-list a{
    color:#2b50c7;
    text-decoration:underline;
    font-weight:600;
}

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

@media(max-width:768px){

    .top-menu-btn{
        min-width:220px;
    }

    .latest-update-title{
        font-size:22px;
    }

    .update-list li{
        font-size:15px;
    }

}


/* =========================================
EXAM SECTION
========================================= */

.exam-section{
    background:#f7f7f7;
}

/* TITLE */

.exam-title{
    font-size:32px;
    font-weight:700;
    color:#111;
}

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

.exam-card{
    background:#fff;
    border:1px solid #e9e9e9;
    border-radius:16px;
    padding:25px 20px;
    display:block;
    text-decoration:none;
    transition:.3s;
    position:relative;
    height:100%;
    min-height:170px;
}

.exam-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    text-decoration:none;
}

/* ICON */

.exam-icon{
    margin-bottom:20px;
}

.exam-icon img{
    width:55px;
    height:55px;
    object-fit:contain;
}

/* NAME */

.exam-name{
    font-size:20px;
    font-weight:600;
    color:#111;
}

/* ARROW */

.exam-arrow{
    position:absolute;
    right:20px;
    bottom:20px;
    color:#999;
    font-size:22px;
}

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

@media(max-width:768px){

    .exam-title{
        font-size:24px;
    }

    .exam-card{
        min-height:150px;
        padding:20px 15px;
    }

    .exam-name{
        font-size:16px;
    }

    .exam-icon img{
        width:45px;
        height:45px;
    }

}



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

.revision-section{
    background:#f5f5f5;
}

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

.revision-card{
    background:#fff;
    border-radius:12px;
    padding:30px;
    border:1px solid #eee;
}

/* TITLE */

.revision-title{
    font-size:38px;
    font-weight:700;
    color:#111;
    margin-bottom:25px;
}

/* =========================================
LIST
========================================= */

.revision-list{
    margin:0;
    padding:0;
    list-style:none;
}

.revision-list li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #eee;
    padding:18px 0;
}

.revision-list li:last-child{
    border-bottom:none;
}

.revision-list li a{
    font-size:24px;
    color:#5865f2;
    text-decoration:none;
    font-weight:500;
}

.revision-list li a:hover{
    color:#007bff;
}

/* DOT */

.revision-list li::before{
    content:"•";
    color:#000;
    font-size:28px;
    margin-right:15px;
}

/* =========================================
ARROW ICON
========================================= */

.arrow-icon{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#ff6b35;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    flex-shrink:0;
}

/* =========================================
ADVERTISEMENT
========================================= */

.ad-banner{
    position:relative;
    overflow:hidden;
    border-radius:12px;
    background:#fff;
    border:1px solid #eee;
    height:100%;
}

.ad-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
}

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

@media(max-width:768px){

    .revision-title{
        font-size:28px;
    }

    .revision-list li{
        padding:14px 0;
    }

    .revision-list li a{
        font-size:16px;
    }

    .arrow-icon{
        width:28px;
        height:28px;
        font-size:12px;
    }

}


/* Section */
.teacher-section{
    padding:60px 0;
}

.section-title{
    text-align:center;
    margin-bottom:40px;
}

.section-title h2{
    font-size:38px;
    font-weight:700;
    color:#111;
}

.section-title p{
    color:#666;
    margin-top:10px;
}

/* Card */
.teacher-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    transition:0.4s;
    margin:10px;
}

.teacher-card:hover{
    transform:translateY(-8px);
}

/* Image */
.teacher-img{
    position:relative;
    overflow:hidden;
}

.teacher-img img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    transition: 0.4s;
}

.teacher-card:hover .teacher-img img{
    transform:scale(1.05);
}

/* City Badge */
.city-badge{
    position:absolute;
    top:15px;
    left:15px;
    background:#007bff;
    color:#fff;
    padding:6px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

/* Content */
.teacher-content{
    padding:25px;
}

.teacher-content h4{
    font-size:24px;
    font-weight:700;
    margin-bottom:8px;
    color:#111;
}

.teacher-role{
    color:#007bff;
    font-weight:600;
    margin-bottom:15px;
    display:block;
}

.teacher-skills{
    margin-bottom:15px;
}

.teacher-skills span {
    display: contents;
    background: #0e61eb;
    padding: 7px 7px;
    border-radius: 30px;
    margin: 2px;
    font-size: 12px;
    font-weight: 600;
}

/* Info */
.teacher-info{
    margin-top:15px;
}

.teacher-info p{
    margin-bottom:8px;
    color:#666;
    font-size:15px;
}

.teacher-info i{
    color:#007bff;
    margin-right:8px;
}

/* Button */
.teacher-btn{
    margin-top:20px;
}

.teacher-btn a{
    display:inline-block;
    padding:10px 24px;
    background:#007bff;
    color:#fff;
    border-radius:40px;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.teacher-btn a:hover{
    background:#111;
    color:#fff;
}

/* Owl */
.owl-nav{
    text-align:center;
    margin-top:25px;
}

.owl-nav button{
    width:45px;
    height:45px;
    border-radius:50% !important;
    background:#007bff !important;
    color:#fff !important;
    margin:0 6px;
    font-size:20px !important;
}

.owl-nav button:hover{
    background:#111 !important;
}

.owl-dots{
    margin-top:20px;
}

@media(max-width:768px){

    .teacher-img img{
        height:260px;
    }

    .section-title h2{
        font-size:28px;
    }

}
.teacher-card{
    border:none;
    border-radius:15px;
    transition:0.3s;
}

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

.teacher-img{
    height:250px;
    object-fit:contain;
}
/* =========================
PROFILE CARD
========================= */
.teacher-card{
    border:none;
    border-radius:15px;
}
.teacher-photo {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 5px;
}
/* =========================
RATING STARS
========================= */
.rating-stars i{
    color:#ffc107;
    font-size:18px;
}
/* =========================
SKILLS TAG
========================= */
.skill-tag{
    display:inline-block;
    background:#e9f2ff;
    color:#007bff;
    padding:6px 14px;
    border-radius:30px;
    margin:4px;
    font-size:14px;
}
/* =========================
INFO BOX
========================= */
.info-box{
    background:#fff;
    padding:20px;
    border-radius:10px;
    border:1px solid #eee;
    margin-bottom:20px;
}
/* =========================
CONTACT CARD
========================= */
.contact-card{
    border:none;
    border-radius:15px;
}
/* =========================
REVIEWS
========================= */
.review-box{
    transition: all .3s ease;
}

.review-box:hover{
    transform: translateY(-5px);
}

#reviewsCarousel .carousel-control-prev,
#reviewsCarousel .carousel-control-next{
    width: 50px;
}

#reviewsCarousel .carousel-control-prev{
    left: -20px;
}

#reviewsCarousel .carousel-control-next{
    right: -20px;
}
/* =========================
RATING FORM
========================= */
.rating-groupx input{
    display:none;
}
.rating-groupx label{
    font-size:28px;
    color:#ccc;
    cursor:pointer;
    margin-right:5px;
}
.rating-groupx input:checked + label{
    color:#ffc107;
}
/* =========================
MOBILE
========================= */
@media(max-width:768px){
    .teacher-photo{
        height:280px;
        margin-bottom:20px;
    }
}

.course-banner{
    border-radius:20px;
    overflow:hidden;
    position:relative;
    background:#fff;
}

.course-banner img{
    width:100%;
    height:350px;
    object-fit:cover;
}

.course-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to right,rgba(0,0,0,.7),rgba(0,0,0,.2));
    color:#fff;
    display:flex;
    align-items:end;
    padding:30px;
}

.course-card{
    border-radius:18px;
    border:none;
}

.video-list{
    max-height:500px;
    overflow-y:auto;
}

.video-list .list-group-item{
    border:0;
    border-bottom:1px solid #f1f1f1;
    padding:15px;
}

.price-box{
    background:#f8f9fa;
    border-radius:15px;
    padding:20px;
}

.course-meta span{
    margin-right:15px;
}

.note-badge{
    font-size:12px;
}
.course-card{
    border-radius:15px;
    overflow:hidden;
    transition:all .3s ease;
}

.course-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 30px rgba(0,0,0,.15)!important;
}

.course-image{
    height:220px;
    object-fit:cover;
}

.carousel-control-prev,
.carousel-control-next{
    width:5%;
}
.deleteme{
  text-decoration: line-through;
                color:#999;
                margin-right:8px;
                font-size:16px;
}
.course-banner{
    background:#0d6efd;
    color:#fff;
    border-radius:15px;
    padding:30px;
}

.course-card{
    border-radius:15px;
}

.video-list{
    max-height:400px;
    overflow-y:auto;
}
.assignment-banner{
        background:linear-gradient(135deg,#0f172a,#1e293b);
        color:#fff;
        padding:70px 0;
    }

    .assignment-banner h1{
        font-size:42px;
        font-weight:700;
    }

    .assignment-card{
        background:#fff;
        border-radius:12px;
        padding:25px;
        box-shadow:0 3px 15px rgba(0,0,0,0.08);
        margin-bottom:25px;
    }

    .badge-custom{
        background:#007bff;
        color:#fff;
        padding:8px 15px;
        border-radius:30px;
        font-size:14px;
    }

    .code-box{
        background:#0f172a;
        color:#f8fafc;
        padding:20px;
        border-radius:10px;
        overflow:auto;
        font-size:14px;
    }

    .sidebar-card{
        background:#fff;
        border-radius:12px;
        padding:20px;
        box-shadow:0 3px 15px rgba(0,0,0,0.08);
        margin-bottom:25px;
    }

    .related-link{
        display:block;
        padding:10px 0;
        border-bottom:1px solid #eee;
        color:#333;
        text-decoration:none;
    }

    .related-link:last-child{
        border-bottom:none;
    }

    .related-link:hover{
        color:#007bff;
        text-decoration:none;
    }

    .table th{
        width:220px;
        background:#f8f9fa;
    }
    .assignment-section{
    background:#f4f7fc;
    padding:60px 0;
}

.assignment-card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    transition:0.3s;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
    height:100%;
}

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

.assignment-img{
    height:200px;
    overflow:hidden;
}

.assignment-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.assignment-body{
    padding:20px;
}

.badge-level{
    padding:6px 12px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
}

.beginner{
    background:#d4edda;
    color:#155724;
}

.intermediate{
    background:#fff3cd;
    color:#856404;
}

.advanced{
    background:#f8d7da;
    color:#721c24;
}

.category-box{
    background:#fff;
    padding:15px;
    border-radius:12px;
    margin-bottom:15px;
    box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

.featured-box{
    background:linear-gradient(
        135deg,
        #007bff,
        #00c6ff
    );
    color:#fff;
    border-radius:15px;
    padding:25px;
}
.training-section-title{
    font-weight:700;
    margin-bottom:15px;
}

.feature-box{
    transition:0.3s;
    border-radius:15px;
}

.feature-box:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.gradient-bg{
    background:linear-gradient(135deg,#0d6efd,#6610f2);
}

.rounded-20{
    border-radius:20px;
}

.register-form .form-control{
    height:52px;
    border-radius:10px;
}

.register-form textarea{
    border-radius:10px;
}

.icon-box{
    width:80px;
    height:80px;
    line-height:80px;
    border-radius:50%;
    background:#eef4ff;
    margin:auto;
    font-size:35px;
    color:#0d6efd;
}
.register-section{
        padding:60px 0;
        position:relative;
        overflow:hidden;
    }

    .register-card{
        border:none;
        border-radius:25px;
        overflow:hidden;
        box-shadow:0 10px 40px rgba(0,0,0,0.08);
        background:#fff;
    }

    .register-left{
        background:linear-gradient(135deg,#0d6efd,#6610f2);
        color:#fff;
        padding:60px 40px;
        height:100%;
        position:relative;
    }

    .register-left h2{
        font-size:42px;
        font-weight:800;
        margin-bottom:20px;
    }

    .register-left p{
        font-size:16px;
        opacity:0.95;
        line-height:28px;
    }

    .feature-box{
        margin-top:35px;
    }

    .feature-item{
        display:flex;
        align-items:center;
        margin-bottom:18px;
    }

    .feature-item i{
        width:45px;
        height:45px;
        border-radius:50%;
        background:rgba(255,255,255,0.15);
        display:flex;
        align-items:center;
        justify-content:center;
        margin-right:15px;
        font-size:18px;
    }

    .register-right{
        padding:50px 40px;
    }

    .register-title{
        font-size:32px;
        font-weight:700;
        color:#111827;
        margin-bottom:10px;
    }

    .register-subtitle{
        color:#6b7280;
        margin-bottom:30px;
    }

    .custom-input{
        height:55px;
        border-radius:12px;
        border:1px solid #dbe2ea;
        padding-left:15px;
        font-size:15px;
        transition:0.3s;
    }

    .custom-input:focus{
        border-color:#0d6efd;
        box-shadow:none;
    }

    .btn-register{
        height:55px;
        border-radius:12px;
        background:linear-gradient(135deg,#0d6efd,#6610f2);
        border:none;
        font-size:17px;
        font-weight:600;
        transition:0.3s;
    }

    .btn-register:hover{
        transform:translateY(-2px);
        box-shadow:0 10px 20px rgba(13,110,253,0.25);
    }

    .otp-box{
        background:#f8f9ff;
        border-radius:18px;
        padding:30px;
        border:1px dashed #0d6efd;
    }

    .otp-input{
        height:60px;
        font-size:28px;
        text-align:center;
        letter-spacing:8px;
        border-radius:15px;
    }

    .verify-btn{
        height:55px;
        border-radius:12px;
        font-size:17px;
        font-weight:600;
    }

    .offer-badge{
        display:inline-block;
        background:#fff;
        color:#0d6efd;
        padding:10px 18px;
        border-radius:50px;
        font-weight:700;
        margin-bottom:25px;
        font-size:14px;
    }

    .floating-circle{
        position:absolute;
        border-radius:50%;
        background:rgba(255,255,255,0.1);
    }

    .circle1{
        width:180px;
        height:180px;
        top:-40px;
        right:-40px;
    }

    .circle2{
        width:120px;
        height:120px;
        bottom:20px;
        left:-20px;
    }

    @media(max-width:768px){

        .register-left{
            padding:40px 25px;
        }

        .register-right{
            padding:40px 25px;
        }

        .register-left h2{
            font-size:32px;
        }

    }