:root {
            --primary: #002147;   /* Reference Navy */
            --accent: #be1e2d;    /* Reference Red */
            --bg-light: #f9fafb;
        }

        body { font-family: 'Poppins', sans-serif; color: #444; }

        /* --- 1. Navbar Area (Reference Style) --- */
        .top-header { background: var(--primary); color: #fff; padding: 8px 0; font-size: 13px; }
        .top-header i { color: var(--accent); margin-right: 5px; }
        
        .navbar { padding: 15px 0; background: #fff !important; }
        .navbar-brand { font-weight: 800; font-size: 26px; color: var(--primary) !important; letter-spacing: -1px; }
        .navbar-brand span { color: var(--accent); }
        .nav-link { font-weight: 600; color: var(--primary) !important; text-transform: uppercase; font-size: 14px; margin: 0 10px; }
        .nav-link:hover { color: var(--accent) !important; }
        .btn-join { background: var(--accent); color: #fff; border-radius: 5px; padding: 10px 25px; font-weight: 600; border: none; }

/* Base Link Styles */
.navbar-nav .nav-link {
    color: var(--primary) !important;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 15px !important;
    position: relative;
    transition: all 0.3s ease;
}

/* The Animated Underline (Invisible by default) */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 50%;
    background-color: var(--accent); /* Your theme red */
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Hover State */
.navbar-nav .nav-link:hover {
    color: var(--accent) !important;
}

.navbar-nav .nav-link:hover::after {
    width: 60%; /* Line grows to 60% of the link width */
}

/* ACTIVE STATE - Persistent Style */
.navbar-nav .nav-link.active {
    color: var(--accent) !important;
}

.navbar-nav .nav-link.active::after {
    width: 60%; /* Underline stays visible for the active page */
}


/* Remove all default borders and shadows from the toggle button */
.custom-toggler {
    border: none !important;
    padding: 0;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    cursor: pointer;
}

/* Create the thick modern bars */
.toggler-icon {
    display: block;
    width: 28px;
    height: 4px; /* Thick bars */
    background-color: #002147; /* Navy Blue to match Tech PSC */
    margin: 5px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* Ensure mobile menu occupies full width and aligns text correctly */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: #ffffff;
        text-align: left;
        padding-bottom: 20px;
    }
    
    .nav-link {
        padding: 12px 0;
        border-bottom: 1px solid #f8f9fa; /* Subtle separator for readability */
        font-size: 1.1rem;
    }
}
/* Ensure the Enroll Button doesn't get the underline */
.btn-join::after {
    display: none !important;
}

        /* --- 2. Banner Image Slider --- */
        .main-slider {
        width: 100%;
        /* Adjusted for Big Size - you can use 70vh to 85vh */
        height: auto; 
        overflow: hidden;
    }

    .main-slider .carousel-item img {
        width: 100%;
        /*height: 80vh; *//* Big Size height */
        object-fit: cover; /* Ensures image covers area without stretching */
        display: block;
    }

    /* Mobile Adjustment */
    @media (max-width: 768px) {
        .main-slider .carousel-item img {
            /*height: 50vh;*/ /* Slightly shorter on mobile to prevent excessive scrolling */
        }
    }

    /* Reference Style Navigation Arrows */
    .carousel-control-prev, .carousel-control-next {
        width: 5%;
    }
    .carousel-control-prev-icon, .carousel-control-next-icon {
        background-color: var(--primary); /* Using the Navy Blue from reference */
        padding: 25px;
        border-radius: 50%;
        background-size: 50%;
    }

        /* --- Sections Layout --- */
        .section-padding { padding: 80px 0; }
        .heading-center { text-align: center; margin-bottom: 50px; }
        .heading-center h2 { font-weight: 700; color: var(--primary); position: relative; padding-bottom: 15px; }
        .heading-center h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 3px; background: var(--accent); }

        /* --- 3. Course Listing --- */
        .course-section {
    background-color: #f8fbff;
    padding: 100px 0;
}

.course-card {
    background: #fff;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    height: 100%;
}

.course-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.course-img-wrapper {
    position: relative;
    overflow: hidden;
}

.course-img-wrapper img {
    transition: transform 0.5s ease;
    width: 100%;
    height: auto;
	object-fit: cover;
}

.course-card:hover .course-img-wrapper img {
    transform: scale(1.1);
}

.course-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--accent); /* Reference Red */
    color: #fff;
    padding: 4px 15px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.course-content {
    padding: 25px;
}

.course-content h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary); /* Reference Navy */
    margin-bottom: 15px;
    line-height: 1.5;
    transition: 0.3s;
}

.course-content h5:hover {
    color: var(--accent);
    cursor: pointer;
}

.course-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #777;
}

.course-meta span i {
    color: var(--accent);
    margin-right: 5px;
}

        /* --- 4. Rank Listing --- */
        .ranker-section {
    background-color: #ffffff;
    padding: 100px 0;
}

.rank-card {
    position: relative;
    text-align: center;
    background: #fff;
    padding: 40px 20px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    margin-top: 40px; /* Space for the badge overlap */
}

.rank-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

.rank-img-container {
    position: relative;
    width: 130px;
    height: 130px;
    margin: -80px auto 20px; /* Pulls image up to overlap background */
}

.rank-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* The Modern Round Badge Overlay */
.rank-badge-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--accent);
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(255, 25, 73, 0.3);
}

.rank-info h5 {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 5px;
}

.rank-info p {
    color: var(--accent);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.rank-exam {
    font-size: 12px;
    color: #777;
    background: #f8f9fa;
    padding: 3px 12px;
    border-radius: 20px;
    display: inline-block;
}

        /* --- 5. Notice Board (Separate) --- */
        .notice-section {
    background-color: #f0f4f8; /* Light blue-grey background */
    overflow: hidden;
}

/* Character Styling */
.notice-character-img {
    max-width: 110%;
    transform: translateX(-50px); /* Slight overlap effect */
    filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.1));
}

.notice-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Glassmorphism Notice Cards */
.modern-notice-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.modern-notice-card:hover {
    transform: translateX(10px);
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-left: 5px solid var(--accent);
}

.notice-icon-box {
    min-width: 60px;
    height: 60px;
    background: var(--primary);
    color: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.notice-icon-box .day { font-size: 18px; font-weight: 700; line-height: 1; }
.notice-icon-box .month { font-size: 10px; text-transform: uppercase; font-weight: 500; }

.notice-body h6 {
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 5px;
}

.notice-body p {
    font-size: 13px;
    color: #666;
    margin-bottom: 0;
}

.badge-new {
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 10px;
    vertical-align: middle;
}
        /* --- 6. Testimonials (Separate) --- */
        To make the Student Feedback section look as premium as the reference site, we’ll implement a responsive testimonial carousel. This layout features a clean, white "bubble" style with a focus on the student's photo and the coaching category they succeeded in.

I’ve used the Bootstrap Carousel component but customized it to show multiple cards at once on desktop, while collapsing to a single card on mobile.

Modern Testimonial Carousel (CSS)
Add this to your <style> block:

CSS
/* Testimonial Section Styles */
.testimonial-section {
    padding: 100px 0;
    background-color: #fff;
}

.testimonial-card {
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    border-radius: 15px;
    padding: 40px 30px;
    margin: 15px;
    position: relative;
    transition: 0.3s;
    height: 100%;
}

.testimonial-card:hover {
    background: #fff;
    box-shadow: 0 15px 45px rgba(0,33,71,0.08);
    border-color: transparent;
}

.quote-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 40px;
    color: var(--accent);
    opacity: 0.1;
}

.testimonial-text {
    font-style: italic;
    color: #555;
    line-height: 1.8;
    margin-bottom: 25px;
}

.student-info {
    display: flex;
    align-items: center;
}

.student-info img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid var(--accent);
}

.student-name {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0;
}

.student-designation {
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
}

/* Custom Carousel Dots */
.testimonial-section .carousel-indicators [data-bs-target] {
    background-color: var(--primary);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

        /* --- Footer --- */
        .footer-top { background: #081828; color: #abb8c3; padding: 80px 0 40px; }
        .footer-top h4 { color: #fff; margin-bottom: 25px; font-weight: 600; }
        .footer-bottom { background: #061421; color: #abb8c3; padding: 20px 0; font-size: 14px; border-top: 1px solid rgba(255,255,255,0.05); }
        .social-link { width: 35px; height: 35px; background: rgba(255,255,255,0.1); color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 10px; transition: 0.3s; }
        .social-link:hover { background: var(--accent); color: #fff; }
		
		
		/* Branding Adjustment */
.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
}

.brand-logo-img {
    height: 45px; /* Adjust height based on your actual logo design */
    width: auto;
    border-radius: 4px; /* Optional: adds a slight modern rounding */
    transition: transform 0.3s ease;
}

.navbar-brand:hover .brand-logo-img {
    transform: rotate(-5deg) scale(1.05); /* Subtle hover interaction */
}

.brand-text {
    font-weight: 800;
    font-size: 24px;
    color: var(--primary) !important;
    letter-spacing: -0.5px;
    line-height: 1;
}

.brand-text span {
    color: var(--accent);
}

/* Mobile Tweak */
@media (max-width: 991px) {
    .brand-logo-img {
        height: 38px; /* Slightly smaller for mobile */
    }
    .brand-text {
        font-size: 20px;
    }
}

.btn-view-more {
    background-color: var(--primary); /* Navy Blue */
    color: #fff;
    padding: 12px 35px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50px;
    border: 2px solid var(--primary);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-view-more:hover {
    background-color: transparent;
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 33, 71, 0.2);
}

.btn-view-more i {
    transition: transform 0.3s ease;
}

.btn-view-more:hover i {
    transform: translateX(5px); /* Arrow slides out on hover */
}

/* Card Body Layout */
.course-content {
    padding: 25px 20px 30px 20px; /* Increased bottom padding (30px) for a modern look */
    min-height: 160px; /* Adjust based on your title lengths to keep cards uniform */
}

.course-content h5 {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0; /* Let the flex-spacer handle the gap */
    line-height: 1.4;
}

/* Modern "Read More" Button Style */
.read-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--accent); /* Your theme red */
    border: 1px solid rgba(227, 30, 36, 0.2); /* Light border */
    padding: 6px 20px;
    border-radius: 50px; /* Pill shape */
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.read-more-btn:hover {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(227, 30, 36, 0.3);
}

.read-more-btn i {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.read-more-btn:hover i {
    transform: translateX(3px);
}

/* Hero Header */
.about-hero {
    background: linear-gradient(rgba(0, 33, 71, 0.9), rgba(0, 33, 71, 0.9)), 
                url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=1500');
    background-size: cover;
    background-position: center;
    padding: 80px 0 60px;
}

/* Image Stack with Badge */
.about-img-stack {
    position: relative;
    padding: 20px;
}

.experience-badge {
    position: absolute;
    bottom: -10px;
    right: 0;
    background: var(--accent);
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(227, 30, 36, 0.3);
}

.experience-badge .number {
    display: block;
    font-size: 28px;
    font-weight: 800;
}

.experience-badge .text {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Feature List */
.about-list {
    list-style: none;
    padding: 0;
    margin-top: 25px;
}

.about-list li {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

/* Stats Styling */
.stats-section {
    background-color: #001a35 !important;
}

.stats-section h3 {
    font-size: 32px;
    margin-top: 10px;
}

/* Better Text Readability */
.leading-relaxed {
    line-height: 1.8;
    font-size: 15px;
    text-align: justify; /* Keeps the professional look */
}

/* Icon box styling */
.icon-sm {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff5f5; /* Very light red */
    flex-shrink: 0;
}

.italic-quote {
    border-left: 3px solid var(--accent);
    padding-left: 15px;
    font-style: italic;
    color: #444 !important;
}

/* Mobile Alignment Fix */
@media (max-width: 991px) {
    .about-content {
        text-align: center;
        padding-left: 0 !important;
    }
    .about-content .d-flex {
        justify-content: center;
        margin-bottom: 15px;
    }
}

/* Container Spacing & Typography */
.ls-2 { letter-spacing: 2px; }
.color-primary { color: #002147; }

.story-description p {
    line-height: 1.8;
    color: #555;
    font-size: 15px;
    text-align: justify; /* Proper alignment like professional brochures */
}

/* Image Badge Styling */
.about-img-container {
    padding: 15px;
}

.stats-badge-overlay {
    position: absolute;
    bottom: 20px;
    right: -10px;
    background: #e31e24; /* Theme Red */
    color: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(227, 30, 36, 0.4);
    animation: floatBadge 3s ease-in-out infinite;
}

.badge-content .count {
    display: block;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.badge-content .label {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Subtle Badge Animation */
@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Responsive Fixes */
@media (max-width: 991px) {
    .stats-badge-overlay {
        right: 20px;
        padding: 15px;
    }
    .story-description p {
        text-align: left; /* Better for mobile readability */
    }
}

/* Tab Styling */
.nav-pills .nav-link {
    color: var(--primary);
    background: #fff;
    border: 1px solid #eee;
    margin: 0 10px;
    padding: 12px 25px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
    background-color: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(227, 30, 36, 0.2);
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: #f8f9fa;
    border-color: var(--accent);
    color: var(--accent);
}

/* Ensure Course Cards align in a grid even with different title heights */
.course-card {
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.course-card:hover {
    transform: translateY(-10px);
}

/* Animation for filtering */
.course-item {
    transition: all 0.4s ease-in-out;
}

/* Ensure the cards look great when filtered */
#course-grid {
    min-height: 400px; /* Prevents footer jump when cards are hidden */
}

/* Contact Section Styles */
.contact-detail-box {
    border: 1px solid #eee;
}

/* Remove focus shadows from all form elements */
.form-control:focus, 
.form-select:focus {
    border-color: #e31e24 !important; /* Tech PSC Red */
    box-shadow: none !important;      /* Removes the glow completely */
    outline: 0 none;
}

/* Styling inputs for a flat, clean look */
.form-control, .form-select {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 12px;
    transition: border-color 0.2s ease-in-out;
}

.form-label {
    color: #495057;
    margin-bottom: 5px;
}

/* Button hover effect without shadow */
.btn-danger:hover {
    background-color: #c4191f !important;
    transition: background 0.3s;
}

.footer-bottom a{
	color: #abb8c3 !important;
}