/* General Body Styles */
body {
    font-family: 'Baloo 2', 'Open Sans', sans-serif; /* Example font, adjust as needed */
    line-height: 1.6;
    color: #333;
	text-align: justify;
}
.bg-light {
    background-color: #fff !important;
}

.me-2 {
	width: 50px;
    height: auto;
}

.btn-lg:hover {
	background-color: #ff656d !important;
	color: #fff !important;
	border: 4px solid #ff656d;
}

.btn-lg {
	background-color: #fdcaab !important;
	color: #555 !important;
	border: 4px solid #ff656d;
}

.i2 {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 0.5rem;
	background-color: #ff656d !important;
	color: #fff !important;
	border: 4px solid #ff656d;
}
.i2:hover {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 0.5rem;
	background-color: #ff656d !important;
	color: #fff !important;
	border: 4px solid #ff656d;
}

.i3 {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 0.5rem;
	background-color: #0a8859 !important;
	color: #fff !important;
	border: 4px solid #0a8859;
}
.i3:hover {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 0.5rem;
	background-color: #0a8859 !important;
	color: #fff !important;
	border: 4px solid #0a8859;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #cdebf1 !important;
	background: linear-gradient(135deg, #ffbf58, #d02b5d, #f03cee);
    background-size: 200% 200%;
    animation: gradientShift 10s ease infinite;
}

.i1::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 3px;
    width: 60px;
    background-color: #fff;
}

.txt-black {
	color: #555;
}

.txt-black:hover {
	color: #cb5c5c;
}

/* Navbar Customization */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,.08); /* Subtle shadow */
}

.navbar-brand {
    font-weight: 700;
    font-size: 2rem;
    color: #ff666b !important; /* Bootstrap primary blue */
}

.navbar-nav .nav-link {
    font-weight: 600;
    color: #555 !important;
    padding: 0.8rem 1rem;
    transition: color 0.3s ease-in-out;
	font-size: 1.2rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #ff666b !important; /* Primary color on hover/active */
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('img/hero.png') no-repeat center center/cover;
    min-height: 70vh; /* Adjust height as needed */
    color: white;
    position: relative;
    overflow: hidden; /* Ensures background image doesn't overflow */
}

.hero-section h1 {
    font-size: 3.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-section .btn-primary {
    background-color: #ff666b; /* Primary color */
    border-color: #ff666b;
    font-weight: 600;
    padding: 0.8rem 2rem;
    border-radius: 50px; /* Pill button */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hero-section .btn-primary:hover {
    background-color: #03528d; /* Darker primary on hover */
    border-color: #03528d;
}

/* Section Headings */
h2 {
    font-weight: 700;
    color: #333;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 2rem;
}

h2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 3px;
    width: 60px;
    background-color: #ff666b; /* Primary color */
}

/* Align after pseudo-element for left-aligned headings */
#about h2::after {
    left: 0;
    transform: translateX(0);
}

/* Card Styles (Programs Section) */
.card {
    border: none;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15) !important;
}

.card-img-top {
    height: 200px; /* Fixed height for consistent image size */
    object-fit: cover; /* Ensures image covers the area without distortion */
}

.card-title {
    color: #ff666b; /* Primary color for titles */
}

/* Testimonials Section */
#testimonials {
    background-color: #cdebf1; /* Primary color background */
    color: white;
}

#testimonials .carousel-item {
    padding: 2rem;
}

#testimonials .blockquote-footer {
    color: #fee2b8 !important;
    font-size: 1rem;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    border-radius: 50%;
    padding: 1.5rem;
}


/* Contact Form */
#contact .form-control {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

#contact .btn-primary {
    width: auto;
    padding: 0.75rem 2.5rem;
    border-radius: 0.5rem;
}

/* Footer */
footer {
    color: #f8f9fa !important; /* Light text */
}

footer a {
    color: #f8f9fa;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #ff666b; /* Primary color on hover */
}

footer .fab {
    font-size: 1.5rem;
}

/* Utility Classes (optional, but good for consistency) */
.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.text-center {
    text-align: center !important;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-section p.lead {
        font-size: 1rem;
    }

    h2 {
        font-size: 2rem;
    }

    h2::after {
        left: 50%;
        transform: translateX(-50%);
    }

    #about h2::after {
        left: 50%; /* Center on smaller screens */
        transform: translateX(-50%);
    }
}