:root {
    --primary-color: #155e75; /* Cyan */
    --secondary-color: #330f57; /* Blue */
    --text-color: #010d04; /* Black */
    --white-color:#ffffff;
    --light-bg: #f8f9fa;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
body {
    color: white;
}

/* Top Bar */
.top-bar {
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 0.9rem;
}

.top-bar a, .top-bar span {
    color: var(--primary-color);
    color: var(--white-color);
    text-decoration: none;
}

.btn-login {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: 2px solid var(--primary-color);
    transition: all 0.3s ease;
}

.btn-login:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: 2px solid var(--secondary-color);
}

/* Navbar */
.navbar {
    background-color: var(--primary-color);
    color:var(--secondary-color);
}

.navbar .nav-link {
    color: var(--white-color) !important;
    font-size:14px;
    transition: all 0.3s ease;
}

.navbar .nav-link:hover, .navbar .nav-link.active {
    color: var(--secondary-color) !important;
}

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

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2300bcd4' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dropdown-menu {
    background-color: var(--white-color);
    color:var(--primary-color);
    border: none;
}

.dropdown-menu .dropdown-item {
    color: var(--primary-color) !important;
    background-color: transparent;
    font-size:1.0rem;
}

.dropdown-menu .dropdown-item:hover {
    color: var(--white-color) !important;
    background-color: var(--primary-color);
}

/* Dropdown Submenu Container */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%; 
    margin-top: 0;
    margin-left: 0.1rem; 
    width: max-content; 
    min-width: 10rem; 
    background-color: var(--white-color);
    color: var(--primary-color);
    border: 1px solid rgba(0, 0, 0, 0.15); /* Re-add standard border */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}


@media (min-width: 992px) {
    .dropdown-submenu .dropdown-menu {
       
        display: block; 
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        /* Hover state: Visible */
        opacity: 1;
        visibility: visible;
    }
}

.table-bordered {
            border-collapse: collapse;
            width: 100%;
        }
        .table-bordered th, .table-bordered td {
           
            border: 2px solid var(--primary-color); 
            padding: 12px;
            text-align: left;
        }
        .table th{
            background-color: var(--secondary-color); 
            color: white;
        }
        .banner-wrapper {
            position: relative;
            width: 100%;
            height: 450px; /* Responsive height */
            overflow: hidden;
        }
        .banner-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.7); /* Darken for text contrast */
        }
        .banner-content {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 1rem 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
        }
       /* Designer Breadcrumb */
        .breadcrumb-nav {
            display: flex;
            justify-content: center;
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .breadcrumb-nav li {
            font-size: 0.9rem;
            color: var(--primary-color);
            background:var(--secondary-color);
            display: flex;
            align-items: center;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .breadcrumb-nav li:last-child {
            color: var(--primary-color);
        }
        .breadcrumb-nav li a {
            color: #fff;
            text-decoration: none;
            transition: color 0.2s;
        }
        .breadcrumb-nav li a:hover {
            color: var(--primary-color);
        }
        .breadcrumb-separator {
            content: '';
            width: 8px;
            height: 8px;
            background-color: #ccc;
            clip-path: polygon(0% 0%, 100% 50%, 0% 100%); /* Right-pointing triangle */
            margin: 0 10px;
        }
/* Carousel */
.carousel-image {
    margin-top: 10px auto;
    
}

/* Courses Section */
.row .p-4 {
    border:2px solid var(--primary-color) !important;
    border-radius:15px !important;

}
.row .p-4 h4 {
    color: var(--secondary-color);
}

/* Notice Slider */
.notice-slider {
    white-space: nowrap;
    animation: slide-right-to-left 20s linear infinite;
    color:var(--white-color);
}

@keyframes slide-right-to-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.notice-date {
    border: 2px solid var(--secondary-color);
    color:var(--white-color);
    background-color:var(--primary-color);
    border-image: linear-gradient(to right, var(--primary-color), var(--secondary-color)) 1;
    fornt-weight:bolder;
}

/* Testimonial Section */
.testimonial-image {
    border: 5px solid;
    border-image: linear-gradient(to right, var(--primary-color), var(--secondary-color)) 1;
    border-radius: 15px !important;
    width: 150px;
    height: 100px;
    object-fit: cover;
}

/* Footer */
footer {
    background-color: var(--secondary-color); /* Light gray background for footer */
}

footer a {
    color: var(--white-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

footer a:hover {
    color: yellow;
}

.btn-submit {
      background-color: var(--primary-color);
    color: var(--white-color);
    /*color:#000;*/
    border: 2px solid var(--white-color);
    transition: all 0.3s ease;
    padding:4px 8px 4px 8px;
    border-radius:10px;
}

.btn-submit:hover {
      background-color: var(--white-color);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding:4px 8px 4px 8px;
    border-radius:10px;
}

.bottom-bar {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-size: 0.8rem;
}
/*Div*/
.div-container {
    border: 1px solid var(--secondary-color);
    border-radius: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 128, 0, 0.4); /* Green shadow */
    overflow: hidden; /* This is key to ensuring the image doesn't bleed outside the rounded corners */

}
/*Image Container*/
.image-container {
    border: 1px solid var(--secondary-color);
    border-radius: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 128, 0, 0.4); /* Green shadow */
    overflow: hidden; /* This is key to ensuring the image doesn't bleed outside the rounded corners */
}

.image-container img {
    width: 100%; /* Makes the image fill the full width of the div */
    height: 100%; /* Makes the image fill the full height of the div */
    display: block; /* Removes any extra space below the image */
    object-fit: cover; /* This will make the image cover the entire area without distortion, cropping it if necessary */
}
/*headers*/
h2{
    color:var(--primary-color);
    text-align: center;
    font-weight:900;
}
h4{
    color:var(--primary-color);
    text-align: center;
    font-weight:900;
}
h5{
    color:var(--primary-color);
    text-align: left;

    font-weight:700;
}
/*Paragraph*/
.paragraph p,ul,ol,li{
    color:var(--text-color);
    font-size: 14px;
    text-align:justify;
    line-height:2;
}

/*Testimnial*/
.slider-container {
    overflow: hidden;
}

.slider-wrapper {
    display: flex;
    /* This will be set by the animation */
}

/* Small screens: one slide at a time */
.testimonial-card {
    flex-shrink: 0;
    width: 100%;
    margin-right: 20px;
}

/* Keyframes for the infinite loop on small screens */
@keyframes slide-sm {
    from {
        transform: translateX(0);
    }
    to {
        /* Move exactly the total width of the original testimonials */
        transform: translateX(calc(-100% - 60px)); /* 3 cards * 100% + 3 * 20px margin */
    }
}

/* Apply animation for small screens */
.slider-wrapper {
    animation: slide-sm 15s linear infinite;
}

/* Pause animation on hover */
.slider-container:hover .slider-wrapper {
    animation-play-state: paused;
}

/* Large screens (e.g., Bootstrap's 'md' breakpoint and up) */
@media (min-width: 768px) {
    .testimonial-card {
        width: calc(33.333% - 20px);
    }

    /* Keyframes for the infinite loop on large screens */
    @keyframes slide {
        from {
            transform: translateX(0);
        }
        to {
            /* Move exactly the total width of the original testimonials */
            transform: translateX(calc(-300% - 60px)); /* 3 cards * 100% + 3 * 20px margin */
        }
    }

    /* Apply the animation for large screens */
    .slider-wrapper {
        animation: slide 30s linear infinite;
    }
}
/*headers*/
h5{
    color:var(--primary-color);
    text-align:center;
}

/*modal style*/
 .modal-header {
            background-color: var(--primary-color);
            color: #ffffff;
            border-bottom: 2px solid var(--secondary-color);
        }
        .modal-footer {
            background-color: var(--secondary-color);
        }

        /* Specific style to make the modal body large enough for the PDF iframe */
        .pdf-modal-body {
            /* Set a minimum height for the PDF viewing area */
            height: 800px; 
            width:100%;
            padding: 0; /* Remove padding for a full-bleed iframe */
        }
        .pdf-viewer-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
       /* Designer Internal Page Links */
        .plink{
                   color:red;
                   text-decoration:none;
                   font-weight:600px;
        }
/*contact us */
/* Banner Section */
        .banner-wrapper {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
        }
        
        .banner-image {
            width: 100%;
            height: 400px;
            object-fit: cover;
        }
        
        .banner-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            color: white;
            padding: 20px;
        }
        
        .breadcrumb-nav {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
        }
        
        .breadcrumb-item {
            margin-right: 10px;
            font-size: 0.9rem;
        }
        
        .breadcrumb-item a {
            color: #cbd5e1;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .breadcrumb-item a:hover {
            color: white;
            text-decoration: underline;
        }
        
        .breadcrumb-item.active {
            color: white;
            font-weight: 500;
        }
        
        .breadcrumb-item + .breadcrumb-item::before {
            content: ">";
            margin-right: 10px;
            color: #cbd5e1;
        }
        
        /* Main Content Styling */
        .section-title {
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 10px;
            text-align: center;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        .lead {
            color: var(--dark-text);
            text-align: center;
            margin-bottom: 2rem;
        }
        
        /* Map Container */
        .map-container {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            height: 100%;
            min-height: 400px;
        }
        
        .map-iframe {
            width: 100%;
            height: 100%;
            min-height: 400px;
            border: none;
            display: block;
        }
        
        .map-placeholder {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            padding: 20px;
            text-align: center;
            min-height: 400px;
        }
        
        .map-placeholder i {
            font-size: 3rem;
            margin-bottom: 15px;
        }
        
        /* Address Card */
        .address-card {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            height: 100%;
            border-top: 5px solid var(--primary-color);
        }
        
        .address-title {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
        }
        
        .address-title i {
            margin-right: 10px;
            font-size: 1.5rem;
        }
        
        .address-detail {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .address-detail:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .detail-label {
            font-weight: 600;
            color: var(--secondary-color);
            margin-bottom: 5px;
            font-size: 1rem;
        }
        
        .detail-value {
            color: var(--dark-text);
            line-height: 1.6;
            font-size: 0.95rem;
        }
        
        .detail-value a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .detail-value a:hover {
            color: var(--secondary-color);
            text-decoration: underline;
        }
        
        /* Contact Cards */
        .contact-card {
            background-color: white;
            border: 2px solid var(--secondary-color);
            border-radius: 10px;
            color: var(--primary-color);
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            height: 100%;
            transition: transform 0.3s, box-shadow 0.3s;
            border-top: 5px solid;
            margin-bottom: 20px;
        }
        
        .contact-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        }
        
        .card-tpo {
            border-top-color: var(--primary-color);
        }
        
        .card-superintendent {
            border-top-color: var(--secondary-color);
        }
        
        .card-iqac {
            border-top-color: #7c3aed;
        }
        
        .card-principal {
            border-top-color: #059669;
        }
        
        .contact-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 1.8rem;
            color: white;
            margin-left: auto;
            margin-right: auto;
        }
        
        .icon-tpo {
            background-color: var(--primary-color);
        }
        
        .icon-superintendent {
            background-color: var(--secondary-color);
        }
        
        .icon-iqac {
            background-color: #7c3aed;
        }
        
        .icon-principal {
            background-color: #059669;
        }
        
        .contact-name {
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 5px;
            text-align: center;
            font-size: 1.2rem;
        }
        
        .contact-designation {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 15px;
            font-size: 1rem;
            text-align: center;
        }
        
        .contact-card p {
            color: var(--dark-text);
            text-align: center;
            margin-bottom: 15px;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        
        .contact-details {
            margin-top: 15px;
        }
        
        .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px;
        }
        
        .contact-item i {
            color: var(--primary-color);
            margin-right: 10px;
            margin-top: 3px;
            min-width: 20px;
            font-size: 0.9rem;
        }
        
        .contact-info {
            color: var(--dark-text);
            line-height: 1.5;
            font-size: 0.9rem;
            word-break: break-word;
        }
        
        .contact-info a {
            color: var(--dark-text);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .contact-info a:hover {
            color: var(--primary-color);
        }
        
        /* Responsive Adjustments */
        @media (max-width: 1200px) {
            .contact-card {
                padding: 20px;
            }
        }
        
        @media (max-width: 992px) {
            .banner-image {
                height: 350px;
            }
            
            .map-container {
                height: 350px;
                min-height: 350px;
            }
            
            .map-placeholder,
            .map-iframe {
                min-height: 350px;
            }
            
            .address-card {
                padding: 25px;
            }
        }
        
        @media (max-width: 768px) {
            .container {
                padding-left: 15px;
                padding-right: 15px;
            }
            
            .banner-image {
                height: 250px;
            }
            
            .banner-content {
                padding: 15px;
            }
            
            .breadcrumb-item {
                font-size: 0.8rem;
            }
            
            .map-container {
                margin-bottom: 30px;
                height: 300px;
                min-height: 300px;
            }
            
            .map-placeholder,
            .map-iframe {
                min-height: 300px;
            }
            
            .address-card {
                padding: 20px;
            }
            
            .section-title {
                font-size: 1.8rem;
            }
            
            .lead {
                font-size: 1rem;
            }
            
            .contact-card {
                margin-bottom: 15px;
            }
            
            .contact-icon {
                width: 60px;
                height: 60px;
                font-size: 1.5rem;
            }
            
            .contact-name {
                font-size: 1.1rem;
            }
        }
        
        @media (max-width: 576px) {
            .banner-image {
                height: 200px;
            }
            
            .map-container {
                height: 250px;
                min-height: 250px;
            }
            
            .map-placeholder,
            .map-iframe {
                min-height: 250px;
            }
            
            .section-title {
                font-size: 1.6rem;
            }
            
            .address-title {
                font-size: 1.3rem;
            }
            
            .detail-label {
                font-size: 0.9rem;
            }
            
            .detail-value {
                font-size: 0.85rem;
            }
            
            .contact-card {
                padding: 15px;
            }
            
            .contact-icon {
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
                margin-bottom: 15px;
            }
            
            .contact-name {
                font-size: 1rem;
            }
            
            .contact-designation {
                font-size: 0.9rem;
            }
            
            .contact-card p {
                font-size: 0.85rem;
            }
            
            .contact-item i {
                font-size: 0.8rem;
                margin-right: 8px;
            }
            
            .contact-info {
                font-size: 0.85rem;
            }
        }
        
        @media (max-width: 400px) {
            .banner-image {
                height: 180px;
            }
            
            .breadcrumb-nav {
                justify-content: center;
            }
            
            .breadcrumb-item {
                margin-right: 5px;
                font-size: 0.75rem;
            }
            
            .breadcrumb-item + .breadcrumb-item::before {
                margin-right: 5px;
            }
            
            .map-container {
                height: 220px;
                min-height: 220px;
            }
            
            .map-placeholder,
            .map-iframe {
                min-height: 220px;
            }
            
            .address-card {
                padding: 15px;
            }
            
            .section-title {
                font-size: 1.4rem;
            }
            
            .lead {
                font-size: 0.9rem;
            }
        }
        
        /* Ensure images are responsive */
        img {
            max-width: 100%;
            height: auto;
        }
        
        /* Prevent horizontal overflow */
        .row {
            margin-left: 0;
            margin-right: 0;
        }
        
        .col-md-6, .col-lg-6, .col-md-3, .col-lg-3 {
            padding-left: 15px;
            padding-right: 15px;
        }