:root {
    --primary-blue: #00A7E1;
    --dark-blue: #1B365D;
    --white: #ffffff;
}

body, html {
    overflow-x: hidden;
}

.top-header {
    background-color: var(--dark-blue);
    padding: 8px 0;
    color: var(--white);
    font-size: 14px;
    transition: all 0.3s ease;
}

/* Base navbar styles */
#mainNav {
padding: 0;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease;
overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Logo container styling */
.navbar-brand {
padding: 0 0;
margin-right: 2rem;
display: flex;
align-items: center;
}

/* Logo image styling */
.navbar-brand img {
width: auto;
height: 100px;
object-fit: contain;
transition: all 0.3s ease;
}

/* Navigation items styling */
#mainNav .nav-link {
color: #333;
font-weight: 500;
padding: 0.5rem 1rem;
transition: color 0.3s ease;
position: relative;
}

#mainNav .nav-link:hover {
color: #0d6efd;
}

/* Button styling */
#mainNav .btn-primary {
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-weight: 500;
transition: all 0.3s ease;
}

#mainNav .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

/* Sticky navigation styles */
.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
animation: slideDown 0.5s ease;
}

.sticky .navbar-brand {
padding: 8px 0;
}

.sticky .navbar-brand img {
height: 70px;
}

/* Slide down animation */
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}

/* Responsive styles - Extra large devices */
@media (max-width: 1199.98px) {
.navbar-brand img {
height: 90px;
}

.sticky .navbar-brand img {
height: 65px;
}
}

/* Large devices (desktops, less than 992px) */
@media (max-width: 991.98px) {
.navbar-brand img {
height: 80px;
}

.sticky .navbar-brand img {
height: 60px;
}

#mainNav .navbar-collapse {
background-color: #fff;
padding: 1rem 0;
}

#mainNav .navbar-nav {
text-align: center;
}

#mainNav .nav-link {
padding: 10px 15px !important;
margin: 5px 0;
}

#mainNav .btn-sm {
padding: 0.25rem 1rem;
font-size: 0.875rem;
}

/* Fix for mobile menu alignment */
.navbar-collapse {
max-height: calc(100vh - 100px);
overflow-y: auto;
}
}

/* Medium devices (tablets, less than 768px) */
@media (max-width: 767.98px) {
.navbar-brand img {
height: 70px;
}

.sticky .navbar-brand img {
height: 55px;
}

.carousel, .carousel-item {
height: 400px;
}
}

/* Small devices (landscape phones, less than 576px) */
@media (max-width: 575.98px) {
.navbar-brand img {
height: 60px;
}

.sticky .navbar-brand img {
height: 50px;
}
}
/* Modern Carousel Styling */
.carousel {
    position: relative;
    height: 580px; /* Fixed height as per requirement */
    overflow: hidden;
}

.carousel-item {
    height: 580px; /* Fixed height as per requirement */
}

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

.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    background-color: var(--primary-blue);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.9;
}

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

.carousel-control-next {
    right: 20px;
}

.carousel-indicators {
    bottom: 30px;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    background-color: var(--primary-blue);
}


  /* Section Title Styling */
  .section-title {
    color: var(--dark-blue);
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    position: relative;
}

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

/* Service Cards Styling */
.service-card {
    background: var(--white);
    border-radius: 15px;
    padding: 2rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

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

.service-card:hover::before {
    opacity: 1;
}

.card-content {
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.service-card:hover .card-content {
    color: var(--white);
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(0,167,225,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: var(--primary-blue);
    transition: all 0.3s ease;
}

.service-card:hover .icon-wrapper {
    background: rgba(255,255,255,0.2);
    color: var(--white);
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--dark-blue);
    transition: all 0.3s ease;
}

.service-card:hover .card-title {
    color: var(--white);
}

.card-text {
    color: #666;
    text-align: center;
    margin-bottom: 0;
    transition: all 0.3s ease;
}

.service-card:hover .card-text {
    color: rgba(255,255,255,0.9);
}
.overview-bg {
    background: linear-gradient(135deg, #0d6efd 0%, #0099ff 100%);
    position: relative;
    overflow: hidden;
}

.overview-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.1;
}

.overview-section .section-title {
    padding: 0 30px;
    color: #ffffff;
}

.overview-card {
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    text-align: justify;
    z-index: 1;

}
.overview-card, .card {
    overflow: hidden;
}
.overview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.overview-card .card-content p {
    color: #666666;
    font-size: 16px;
    line-height: 1.8;
}
.facilities-section .section-title {
    padding: 0 30px;
}

.facilities-section .section-title::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 2px;
    top: 50%;
    left: 0;
    background: var(--primary);
}

.facilities-section .section-title::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 2px;
    top: 50%;
    right: 0;
    background: var(--primary);
}

.facilities-card {
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
    transition: .5s;
}

.facilities-card:hover {
    box-shadow: 0 0 45px rgba(0, 0, 0, .12);
}

.facilities-card .card-content {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 8px;
}

.facility-item {
    padding: 1rem 0.5rem;
    transition: .5s;
}

.facility-item:hover {
    transform: translateY(-5px);
}

.divider {
    width: 1px;
    height: 50px;
    background-color: #dee2e6;
    margin: 0 10px;
}

.icon-wrapper svg {
    color: var(--primary);
}

.facility-item h5 {
    font-size: 1rem;
    margin: 0;
    color: #555;
}

/* Contact Section Styles */
.contact-section {
background-color: #f8f9fa;
}

.section-title {
color: #2d4263;
font-size: 2rem;
font-weight: 600;
padding-bottom: 10px;
}

.section-title::after {
content: '';
position: absolute;
display: block;
width: 50px;
height: 3px;
background: #0d6efd;
bottom: 0;
left: calc(50% - 25px);
}

.card {
border: none;
transition: transform 0.3s ease-in-out;
border-radius: 10px;
}

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

/* Contact Info Styles */
.info-header {
position: relative;
}

.organization-name {
color: #4a4a4a;
}

.icon-wrapper-contact {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: rgba(13, 110, 253, 0.1);
}

.icon-wrapper-contact i {
color: #0d6efd;
}
.info-content{
padding-left: 4px;
}
.info-content h6 {
font-size: 0.9rem;
font-weight: 600;
}

.info-content p {
line-height: 1.5;
}

/* Form Styles */
.form-control {
border: 1px solid #dee2e6;
padding: 0.75rem;
border-radius: 8px;
}

.form-control:focus {
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
border-color: #0d6efd;
}

.btn-primary {
background-color: #0d6efd;
border: none;
font-weight: 500;
transition: all 0.3s ease;
border-radius: 8px;
}

.btn-primary:hover {
background-color: #0b5ed7;
transform: translateY(-2px);
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
.contact-info-card, .enquiry-card {
height: auto;
}

.section-title {
font-size: 1.75rem;
}
}

@media (max-width: 575.98px) {
.card-body {
padding: 1.25rem;
}

.section-title {
font-size: 1.5rem;
}

.icon-wrapper {
width: 35px;
height: 35px;
}
}
.map-section {
position: relative;
height: 500px;
}
.google-map-container{
width: 100%;
height: 100%;
}
.google-map-container iframe {
width: 100%;
height: 100%;
border: none;
max-width: 100%;
}

.map-card {
position: absolute;
top: 20px;
left: 20px;
max-width: 300px;
background-color: #ffffff;
border-radius: 8px;
padding: 1rem;
transition: transform 0.3s ease;
}

.map-card .card-title {
font-size: 1.25rem;
}

.map-card .card-text {
color: #6c757d;
}

.map-card:hover {
transform: translateY(-5px);
}
.footer-section {
background-color: #1b365d; /* Dark blue to match primary theme */
color: #ffffff;
border-top: 3px solid #00A7E1; /* Optional accent line */
}

.footer-link {
color: #00A7E1; /* Light blue for contrast */
text-decoration: none;
font-weight: 500;
margin: 0 5px;
}

.footer-link:hover {
text-decoration: underline;
color: #ffffff; /* White on hover */
}

.footer-section p {
font-size: 0.9rem;
margin: 0;
}
.text-rights{
color: #ffff;
}
@media (max-width: 768px) {
.footer-section p {
font-size: 0.8rem;
}
}


/* Responsive adjustments */
@media (max-width: 768px) {
.map-section {
height: 300px;
}

.map-card {
max-width: 90%;
left: 50%;
transform: translateX(-50%);
top: 20px;
}
}

@media (max-width: 992px) {
    .facilities-wrapper {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .divider {
        width: 50%;
        height: 1px;
        margin: 0.5rem auto;
    }
    
    .facility-item {
        width: 100%;
        padding: 0.5rem;
    }
}
@media (max-width: 768px) {
    .overview-card .card-content {
        padding: 2rem !important;
    }
}
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .service-card {
        padding: 1.5rem;
    }
}
@media (max-width: 768px) {
    .carousel, .carousel-item {
        height: 300px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 40px;
        height: 40px;
    }
}