/* =========================================
   1. Global Styles & Variables
   ========================================= */
:root {
    --primary-color: #003366;
    /* Deep Navy Blue */
    --secondary-color: #e6b800;
    /* Golden Yellow */
    --accent-color: #00509e;
    /* Lighter Blue */
    --text-dark: #2c3e50;
    --text-light: #6c757d;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s ease;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    transition: var(--transition);
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* =========================================
   2. Top Bar
   ========================================= */
.top-bar {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 10px 0;
    font-size: 0.9rem;
}

.top-bar .contact-info i {
    color: var(--secondary-color);
}

.top-bar .social-links a {
    color: var(--white);
    margin-left: 15px;
    font-size: 1rem;
}

.top-bar .social-links a:hover {
    color: var(--secondary-color);
    transform: translateY(-2px);
}

/* =========================================
   3. Main Header
   ========================================= */
.main-header {
    padding: 20px 0;
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 100;
}

.brand-logo img {
    height: 80px;
    margin-right: 20px;
}

.brand-text h1 {
    font-size: 1.8rem;
    margin-bottom: 5px;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.brand-text p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-light);
    font-weight: 500;
}

/* =========================================
   4. Navigation
   ========================================= */
.navbar {
    background-color: var(--accent-color);
    padding: 0;
    box-shadow: var(--shadow-md);
}

.navbar-nav .nav-link {
    color: var(--white) !important;
    padding: 15px 20px !important;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.95rem;
    position: relative;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--secondary-color);
    transition: var(--transition);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 100%;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
}

.dropdown-menu {
    border: none;
    box-shadow: var(--shadow-lg);
    border-radius: 0;
    margin-top: 0;
}

.dropdown-item {
    padding: 10px 20px;
    font-size: 0.95rem;
}

.dropdown-item:hover {
    background-color: var(--bg-light);
    color: var(--primary-color);
    border-left: 3px solid var(--secondary-color);
}

.navbar-toggler {
    border: none;
    color: var(--white);
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* =========================================
   5. Hero Carousel
   ========================================= */
.hero-section {
    position: relative;
}

.carousel-item {
    height: 600px;
}

.carousel-item img {
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    /* Darken image for better text readability */
}

.hero-caption {
    bottom: 30%;
    text-align: left;
    left: 10%;
    right: 10%;
}

.hero-caption h3 {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 1s ease-out;
}

.hero-caption p {
    font-size: 1.5rem;
    color: #f0f0f0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 1.2s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   6. About Section
   ========================================= */
.section-padding {
    padding: 80px 0;
}

.about-img {
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}

.about-img:hover {
    transform: scale(1.02);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* =========================================
   7. Cards (Management, News, Notice)
   ========================================= */
.card-custom {
    border: none;
    border-radius: 10px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    overflow: hidden;
}

.card-custom:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.card-header {
    background-color: var(--primary-color);
    color: var(--white);
    border-bottom: none;
    padding: 15px;
}

.card-header h5 {
    color: var(--white);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0;
}

.card-body {
    padding: 25px;
}

/* Management Card Specifics */
.rounded-circle {
    border: 4px solid var(--bg-light);
    box-shadow: var(--shadow-sm);
}

/* News Items */
.news-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.news-date {
    font-size: 0.85rem;
    color: var(--secondary-color);
    font-weight: 600;
}

/* Notice Board List */
.list-unstyled li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.list-unstyled li a {
    color: var(--text-dark);
    font-weight: 500;
    display: block;
}

.list-unstyled li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

/* =========================================
   8. Footer
   ========================================= */
.footer {
    background-color: #1a1a1a;
    color: #b3b3b3;
    padding: 60px 0 0;
    font-size: 0.95rem;
    width: 100%;
    margin: 0;
}

.footer h5 {
    color: var(--white);
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--secondary-color);
}

.footer a {
    color: #b3b3b3;
    display: block;
    margin-bottom: 10px;
}

.footer a:hover {
    color: var(--secondary-color);
    padding-left: 5px;
}

.footer .social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    color: var(--white);
}

.footer .social-links a:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.footer-bottom {
    background-color: #111;
    padding: 20px 0;
    margin-top: 40px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
}

/* =========================================
   9. Responsive Adjustments
   ========================================= */
@media (max-width: 991px) {
    .main-header {
        text-align: center;
    }

    .brand-logo {
        margin-bottom: 10px;
    }

    .brand-text h1 {
        font-size: 1.5rem;
    }

    .carousel-item {
        height: 400px;
    }

    .hero-caption h3 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }

    .carousel-item {
        height: 300px;
    }
}

/* =========================================
   10. Page Header (About Us)
   ========================================= */
.page-header {
    background: linear-gradient(rgba(0, 51, 102, 0.9), rgba(0, 51, 102, 0.8)), url('assets/images/hero1.png');
    background-size: cover;
    background-position: center;
    padding: 60px 0;
    color: var(--white);
    text-align: center;
}

.page-header h2 {
    color: var(--white);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.breadcrumb {
    justify-content: center;
    background: transparent;
    padding: 0;
    margin: 0;
}

.breadcrumb-item a {
    color: var(--secondary-color);
}

.breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.7);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

/* =========================================
   11. Mission & Vision Section
   ========================================= */
.mission-vision-section {
    background-color: var(--bg-light);
}

.section-title {
    font-size: 2.2rem;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--secondary-color);
}

.mv-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border-top: 5px solid transparent;
}

.mv-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.mission-card {
    border-top-color: var(--primary-color);
}

.vision-card {
    border-top-color: var(--secondary-color);
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: rgba(0, 51, 102, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: var(--transition);
}

.mv-card:hover .icon-wrapper {
    background-color: var(--primary-color);
}

.icon-wrapper i {
    font-size: 2.5rem;
    color: var(--primary-color);
    transition: var(--transition);
}

.mv-card:hover .icon-wrapper i {
    color: var(--white);
}

.vision-card .icon-wrapper i {
    color: var(--secondary-color);
}

.vision-card:hover .icon-wrapper {
    background-color: var(--secondary-color);
}

.mv-content h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.mv-content p {
    color: var(--text-light);
    margin-bottom: 25px;
}

.mv-list {
    text-align: left;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.mv-list li {
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--text-dark);
}

.mv-list li i {
    margin-right: 10px;
}

.mission-card .mv-list li i {
    color: var(--primary-color);
}

.vision-card .mv-list li i {
    color: var(--secondary-color);
}

/* =========================================
   12. Contact Section
   ========================================= */
.contact-section {
    background-color: var(--bg-light);
}

.contact-card {
    border: none;
    border-radius: 15px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.contact-card .card-body {
    background-color: var(--white);
}

.form-label {
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.form-control {
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: var(--transition);
    font-size: 0.95rem;
}

.form-control:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.2rem rgba(230, 184, 0, 0.25);
}

.form-control::placeholder {
    color: #aaa;
    font-size: 0.9rem;
}

.btn-submit {
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    padding: 15px 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0, 51, 102, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(45deg, var(--secondary-color), #f1c40f);
    transition: all 0.4s ease;
    z-index: -1;
    border-radius: 50px;
}

/* Fixed stray properties */

.mv-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.mission-card {
    border-top-color: var(--primary-color);
}

.vision-card {
    border-top-color: var(--secondary-color);
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: rgba(0, 51, 102, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: var(--transition);
}

.mv-card:hover .icon-wrapper {
    background-color: var(--primary-color);
}

.icon-wrapper i {
    font-size: 2.5rem;
    color: var(--primary-color);
    transition: var(--transition);
}

.mv-card:hover .icon-wrapper i {
    color: var(--white);
}

.vision-card .icon-wrapper i {
    color: var(--secondary-color);
}

.vision-card:hover .icon-wrapper {
    background-color: var(--secondary-color);
}

.mv-content h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.mv-content p {
    color: var(--text-light);
    margin-bottom: 25px;
}

.mv-list {
    text-align: left;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.mv-list li {
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--text-dark);
}

.mv-list li i {
    margin-right: 10px;
}

.mission-card .mv-list li i {
    color: var(--primary-color);
}

.vision-card .mv-list li i {
    color: var(--secondary-color);
}

/* =========================================
   12. Contact Section
   ========================================= */
.contact-section {
    background-color: var(--bg-light);
}

.contact-card {
    border: none;
    border-radius: 15px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.contact-card .card-body {
    background-color: var(--white);
}

.form-label {
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.form-control {
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: var(--transition);
    font-size: 0.95rem;
}

.form-control:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.2rem rgba(230, 184, 0, 0.25);
}

.form-control::placeholder {
    color: #aaa;
    font-size: 0.9rem;
}

.btn-submit {
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    padding: 15px 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0, 51, 102, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(45deg, var(--secondary-color), #f1c40f);
    transition: all 0.4s ease;
    z-index: -1;
    border-radius: 50px;
}

.btn-submit:hover::before {
    width: 100%;
}

.btn-submit:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(230, 184, 0, 0.4);
}

.btn-submit:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(230, 184, 0, 0.3);
}

/* =========================================
   13. Education Tree Section
   ========================================= */
.education-section {
    background-color: var(--bg-light);
    /* overflow-x: auto; - Removed to prevent horizontal scroll */
    padding-bottom: 100px;
}

.tree {
    width: 100%;
    /* Changed from max-content to 100% to fit screen */
    margin: 0 auto;
    padding-top: 20px;
    display: flex;
    justify-content: center;
}

.tree ul {
    padding-top: 20px;
    position: relative;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
}

.tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
}

/* We will use ::before and ::after to draw the connectors */
.tree li::before,
.tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid var(--primary-color);
    width: 50%;
    height: 20px;
}

.tree li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid var(--primary-color);
}

/* We need to remove left-right connectors from elements without any siblings */
.tree li:only-child::after,
.tree li:only-child::before {
    display: none;
}

/* Remove space from the top of single children */
.tree li:only-child {
    padding-top: 0;
}

/* Remove left connector from first child and right connector from last child */
.tree li:first-child::before,
.tree li:last-child::after {
    border: 0 none;
}

/* Adding back the vertical connector to the last nodes */
.tree li:last-child::before {
    border-right: 2px solid var(--primary-color);
    border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
    border-radius: 5px 0 0 0;
}

/* Time to add downward connectors from parents */
.tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid var(--primary-color);
    width: 0;
    height: 20px;
}

.tree li a {
    border: 2px solid var(--primary-color);
    padding: 10px 20px;
    text-decoration: none;
    color: var(--primary-color);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-block;
    border-radius: 5px;
    transition: all 0.5s;
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
}

/* Hover effects */
.tree li a:hover,
.tree li a:hover+ul li a {
    background: var(--primary-color);
    color: var(--white);
    border: 2px solid var(--primary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

/* Connector styles on hover */
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
    border-color: var(--secondary-color);
}

/* Root node specific styles */
.root-node {
    font-size: 1.2rem !important;
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    padding: 15px 30px !important;
}

.category-node {
    font-size: 1.1rem !important;
    background-color: var(--accent-color) !important;
    color: var(--white) !important;
}

/* =========================================
   14. Subject List Wrappers (Custom Addition)
   ========================================= */
.subject-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    padding-top: 20px;
}

.subject-list li {
    padding: 5px;
    /* Tighter padding for wrapped items */
    float: none;
    /* Reset float for flex items */
}

/* Override tree connectors for subject list items */
.subject-list.tree ul ul::before,
/* Remove parent connector line */
.subject-list li::before,
.subject-list li::after {
    display: none !important;
    border: none !important;
}

/* Ensure the vertical line from the parent category to the group still exists if needed, 
   but usually flex-wrap breaks the strict tree drawing. 
   We will hide the vertical connector going INTO this list to avoid alignment issues 
   or keep it if it looks okay. For now, let's clear the lines inside the wrapped block.
*/

/* Remove the top vertical line for the subject list group itself if it misaligns, 
   but usually ".tree ul ul::before" handles the parent-to-child line.
   However, since we are wrapping, the single vertical line might look odd if the items are wide.
*/

.subject-list li a {
    border-radius: 50px;

    /* Pill shape */
}

.btn-submit:hover::before {
    width: 100%;
}

.btn-submit:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(230, 184, 0, 0.4);
}

.btn-submit:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(230, 184, 0, 0.3);
}

/* =========================================
   15. Success Modal (Bootstrap Customization)
   ========================================= */
.custom-modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.modal-icon {
    font-size: 4rem;
    color: #2ecc71;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.custom-modal-content h3 {
    color: var(--primary-color);
    font-family: var(--font-heading);
    font-weight: 700;
}

.custom-modal-content p {
    color: var(--text-dark);
    font-size: 1.1rem;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}