...
*/
/* So spacing is handled by mt-5 of container and mb-5 of row */
.feature-card {
border: none;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
background-color: #ffffff;
border-radius: 10px;
overflow: hidden;
height: 100%; /* Ensure cards in a row are same height if d-flex is on parent row */
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.feature-card .card-body {
padding: 30px 25px; /* Increased padding */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.feature-card .card-body i {
font-size: 3.2rem; /* Adjusted icon size */
margin-bottom: 20px;
color: #2874A6;
transition: color 0.3s ease;
}
.feature-card:hover .card-body i {
color: #1F618D;
}
.feature-card .card-title {
color: #1A5276;
font-weight: 600;
font-size: 1.35rem; /* Adjusted title size */
margin-bottom: 12px;
}
.feature-card .card-text {
color: #555;
font-size: 0.9rem; /* Adjusted text size */
line-height: 1.5;
}
/* Vision & Mission Section */
/* PHP: */
/* my-5 for inter-section spacing. p-4 for Bootstrap padding. Specific padding below will override p-4. */
.vision-mission-section {
background-color: #F0F8FF;
padding: 50px 40px; /* Specific padding, will override p-4. Approx 3.1rem, 2.5rem */
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
border-left: 6px solid #2874A6;
}
/* Uses .section-heading for its title */
.vision-mission-section h4 {
color: #1A5276;
font-weight: 600;
font-size: 1.6rem;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.vision-mission-section h4 i {
font-size: 1.8rem;
margin-right: 12px;
}
.vision-mission-section .content-area p,
.vision-mission-section .content-area ul {
font-size: 1.05rem;
color: #495057;
line-height: 1.7;
}
.vision-mission-section .content-area ul {
list-style: none;
padding-left: 0;
}
.vision-mission-section .content-area ul li {
position: relative;
padding-left: 30px;
margin-bottom: 10px;
}
.vision-mission-section .content-area ul li::before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 0;
top: 4px;
color: #239B56;
font-size: 1rem;
}
/* Stats Section */
/* PHP: */
/* my-5 for inter-section. py-5 for Bootstrap padding (3rem top/bottom). Specific padding below overrides. */
.stats-section {
background: linear-gradient(45deg, #1A5276, #2874A6);
color: #fff;
padding: 70px 25px; /* Specific padding, overrides py-5. Approx 4.3rem, 1.5rem */
border-radius: 10px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
text-align: center;
}
.stats-section h2 { /* Overrides .section-heading color */
color: #fff;
font-size: clamp(2.2rem, 5vw, 2.8rem);
margin-bottom: 40px;
}
.stats-section h2::after { background-color: #fff; }
.stats-section .row > div { padding: 15px; }
.stats-section i {
font-size: 3.5rem;
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.85);
}
.stats-section h3 {
font-size: clamp(2.5rem, 7vw, 3.5rem);
font-weight: 700;
margin-bottom: 8px;
color: #fff;
}
.stats-section p.lead {
font-size: clamp(1rem, 2.5vw, 1.15rem);
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
}
/* News & Events Section */
/* PHP: */
/* my-5 for inter-section. Is a container. Will get global section padding (3rem top/bottom). */
.news-events-section .news-card {
border: 1px solid #e0e0e0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
height: 100%; /* For d-flex rows */
}
.news-events-section .news-card:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
transform: translateY(-5px);
}
.news-events-section .news-card .card-img-top {
height: 200px;
object-fit: cover;
width: 100%;
}
.news-events-section .news-card .card-body {
padding: 20px;
display: flex;
flex-direction: column; /* Ensure footer button aligns bottom */
}
.news-events-section .news-card .card-title {
font-size: 1.25rem;
font-weight: 600;
color: #1A5276;
margin-bottom: 8px;
}
.news-events-section .news-card .card-text small.text-muted {
font-size: 0.85rem;
display: block;
margin-bottom: 10px;
}
.news-events-section .news-card .summary-text {
font-size: 0.95rem;
color: #555;
line-height: 1.6;
margin-bottom: 15px;
flex-grow: 1; /* Make summary take available space */
}
.news-events-section .btn-outline-primary {
color: #2874A6;
border-color: #2874A6;
font-weight: 500;
transition: all 0.3s ease;
align-self: flex-start; /* Align button to start if card body is flex */
}
.news-events-section .btn-outline-primary:hover {
background-color: #2874A6;
color: #fff;
}
.news-events-section .text-center .btn-info { /* "View All News" button */
background-color: #17a2b8;
border-color: #17a2b8;
color: #fff;
padding: 10px 25px;
border-radius: 25px;
font-weight: 500;
transition: all 0.3s ease;
}
.news-events-section .text-center .btn-info:hover {
background-color: #138496;
border-color: #117a8b;
transform: translateY(-2px);
}
/* Testimonials Section */
/* PHP: */
/* my-5 inter-section. p-4 Bootstrap. Specific padding below overrides. */
.testimonials-section {
background-color: #E6F0F6;
padding: 60px 25px; /* Specific padding, overrides p-4. Approx 3.75rem, 1.5rem */
border-radius: 10px;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.05);
}
.testimonials-section .testimonial-img-hp {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
margin: 0 auto 20px auto; /* Centered image */
}
.testimonials-section .carousel-item { padding: 0 10%; } /* Inner padding for carousel content */
.testimonials-section .blockquote {
font-style: italic;
margin-top: 10px;
color: #343a40;
font-size: clamp(1.05rem, 2.5vw, 1.2rem);
line-height: 1.7;
}
.testimonials-section .blockquote-footer {
font-size: 1rem;
color: #555;
margin-top: 15px;
font-style: normal;
}
.testimonials-section .blockquote-footer cite { font-weight: 500; }
#testimonialCarouselHomepage .carousel-control-prev-icon,
#testimonialCarouselHomepage .carousel-control-next-icon {
background-color: rgba(40, 116, 166, 0.7);
border-radius: 50%;
width: 40px;
height: 40px;
background-size: 50% 50%;
}
#testimonialCarouselHomepage .carousel-control-prev,
#testimonialCarouselHomepage .carousel-control-next {
width: auto; opacity: 0.8;
}
#testimonialCarouselHomepage .carousel-control-prev:hover,
#testimonialCarouselHomepage .carousel-control-next:hover { opacity: 1; }
/* Quick Links Section */
/* PHP: */
/* my-5 inter-section. p-4 Bootstrap. Specific padding below overrides. */
.quick-links-section {
background-image: linear-gradient(to right, #007bff, #0056b3);
padding: 60px 25px; /* Specific padding. Approx 3.75rem, 1.5rem */
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
color: #fff;
}
.quick-links-section h2 { color: #fff; }
.quick-links-section h2::after { background-color: #fff; }
.quick-links-section .btn-light {
font-weight: 600;
color: #0056b3;
font-size: 1.05rem; /* Adjusted */
padding: 14px 18px; /* Adjusted */
border-radius: 8px;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
line-height: 1.3;
width: 100%; /* Make buttons full width within their columns */
}
.quick-links-section .btn-light:hover {
background-color: #f8f9fa;
color: #004085;
transform: translateY(-3px) scale(1.03);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}
.quick-links-section .btn-light i {
margin-right: 10px;
font-size: 1.2em;
}
/* Gallery CTA Section */
/* PHP: */
/* my-5 inter-section. p-5 Bootstrap (3rem all-around). Specific padding below overrides. */
.gallery-cta-section {
background-color: #fff3cd;
padding: 70px 25px; /* Specific padding. Approx 4.3rem, 1.5rem */
border-radius: 10px;
border-left: 6px solid #FFC107;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
text-align: center;
}
.gallery-cta-section h2 { color: #856404; }
.gallery-cta-section h2::after { background-color: #FFC107; }
.gallery-cta-section p.lead {
color: #555;
font-size: clamp(1.1rem, 2.5vw, 1.25rem);
margin-bottom: 30px;
}
.gallery-cta-section .btn {
font-size: clamp(1rem, 2.5vw, 1.15rem);
padding: 12px 28px;
border-radius: 30px;
font-weight: 600;
transition: all 0.3s ease;
margin: 8px 5px; /* Spacing for buttons */
}
.gallery-cta-section .btn-primary {
background-color: #2874A6; border-color: #2874A6; color: #fff;
}
.gallery-cta-section .btn-primary:hover {
background-color: #1F618D; border-color: #1F618D; transform: translateY(-2px) scale(1.05);
}
.gallery-cta-section .btn-success {
background-color: #28a745; border-color: #28a745; color: #fff;
}
.gallery-cta-section .btn-success:hover {
background-color: #218838; border-color: #1e7e34; transform: translateY(-2px) scale(1.05);
}
.gallery-cta-section .btn i { margin-right: 8px; }
/* Admission CTA Section */
/* PHP: */
/* my-5 inter-section. p-5 Bootstrap (3rem all-around). Specific padding below overrides. */
.admission-cta {
background-image: linear-gradient(to right, #28A745, #1e7e34);
padding: 80px 25px; /* Specific padding. Approx 5rem, 1.5rem */
border-radius: 10px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
text-align: center;
}
.admission-cta h2 {
color: #fff;
font-size: clamp(2.2rem, 5vw, 3rem);
margin-bottom: 20px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.admission-cta h2::after { background-color: #fff; }
.admission-cta p.lead {
color: #f0f0f0;
font-size: clamp(1.1rem, 2.5vw, 1.3rem);
margin-bottom: 30px;
opacity: 0.95;
}
.admission-cta .btn-light {
color: #218838; background-color: #fff; font-weight: 700;
font-size: clamp(1.1rem, 2.5vw, 1.3rem);
padding: 15px 35px; border-radius: 35px;
transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.admission-cta .btn-light:hover {
background-color: #e9ecef; color: #155724;
transform: translateY(-3px) scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
/* Announcement Section */
.announcements-ticker-container {
overflow: hidden;
position: relative;
/* Base height for desktop - adjust to fit one comfortable line */
height: 1.8em; /* Slightly increased for better padding */
line-height: 1.8em;
flex-grow: 1;
}
.ticker-item {
display: none;
/* Desktop: keep it as a single line, truncate if too long */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
width: 100%;
left: 0; top: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
padding: 0 0.25em; /* Add slight horizontal padding */
}
.ticker-item.active {
display: block;
opacity: 1;
}
.ticker-link {
text-decoration: underline;
font-weight: bold;
}
.ticker-link:hover {
text-decoration: none;
}
/* Fallback for no-JS */
.no-js .announcements-ticker-container {
height: auto; /* Allow content to determine height */
line-height: 1.4em; /* Normal line height for stacked items */
white-space: normal;
}
.no-js .ticker-item {
display: block;
position: static;
opacity: 1;
margin-bottom: 0.5rem; /* Space between stacked items */
white-space: normal; /* Allow wrapping */
overflow: visible; /* Show all content */
text-overflow: initial;
height: auto; /* Adjust height to content */
padding: 0; /* Reset padding if needed */
}
/* Optional: Only show the first item if JS is disabled */
/*
.no-js .ticker-item:not(:first-child) {
display: none;
}
*/
/* --- Base Styles for Upcoming Events Snippet (Keep these) --- */
.upcoming-events-snippet-section .event-snippet-card {
border: 1px solid #e0e0e0; /* Slightly lighter border */
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
display: flex; /* Ensure card itself is flex for h-100 to work well with d-flex on col */
flex-direction: column;
}
.upcoming-events-snippet-section .event-snippet-card:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transform: translateY(-4px);
}
.upcoming-events-snippet-section .card-header.bg-primary {
background-color: #007bff !important; /* Standard Bootstrap primary, or your theme's #1A5276 */
color: white;
padding: 0.75rem 0.5rem; /* Adjust padding */
}
.event-snippet-date-day {
font-size: 1.8rem; /* Desktop size */
font-weight: 700;
display: block;
line-height: 1;
}
.event-snippet-date-month {
font-size: 0.85rem; /* Desktop size */
text-transform: uppercase;
display: block;
letter-spacing: 0.5px;
}
.event-snippet-date-year {
font-size: 0.75rem; /* Desktop size */
opacity: 0.85;
}
.event-snippet-title {
font-size: 1.05rem; /* Desktop size */
color: #2874A6;
font-weight: 600;
line-height: 1.3;
/* min-height: 2.6em; */ /* Approx 2 lines with 1.3 line-height. Consider removing for natural flow. */
margin-bottom: 0.5rem; /* Add some space below title */
}
.event-snippet-desc {
font-size: 0.875rem; /* Desktop size */
color: #555;
line-height: 1.5;
/* min-height: 3em; */ /* Approx 2 lines. Consider removing for natural flow. */
margin-bottom: 0.75rem; /* Space before button */
}
.upcoming-events-snippet-section .card-body {
display: flex;
flex-direction: column;
flex-grow: 1; /* Make card body take available space */
}
.upcoming-events-snippet-section .btn-outline-primary {
margin-top: auto; /* Push button to bottom */
align-self: center; /* Center button if card-body is text-center */
font-size: 0.85rem;
padding: 0.25rem 0.75rem;
}
/* Responsive Adjustments */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
.hero-section .carousel-item { height: 480px; }
.hero-section .carousel-caption {
left: 5%; bottom: 12%; max-width: 55%; padding: 25px 30px;
}
.hero-section .carousel-caption h1 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
.hero-section .carousel-caption p { font-size: clamp(0.85rem, 1.8vw, 1.05rem); margin-bottom: 15px; }
.hero-section .carousel-caption .btn { font-size: clamp(0.8rem, 1.5vw, 1rem); padding: 8px 20px; }
.feature-card .card-body i { font-size: 3rem; }
.feature-card .card-title { font-size: 1.25rem; }
.stats-section { padding: 60px 20px; }
.stats-section h3 { font-size: clamp(2rem, 6vw, 3rem); }
.stats-section p.lead { font-size: clamp(0.9rem, 2vw, 1rem); }
.vision-mission-section { padding: 40px 30px; }
.vision-mission-section h4 { font-size: 1.4rem; }
.news-events-section .card-title { font-size: 1.15rem; }
.testimonials-section { padding: 50px 20px; }
.testimonials-section .carousel-item { padding: 0 8%; }
.quick-links-section { padding: 50px 20px; }
.quick-links-section .btn-light { font-size: 1rem; padding: 12px 18px; }
.gallery-cta-section { padding: 60px 20px; }
.admission-cta { padding: 70px 20px; }
.gallery-cta-section .btn, .admission-cta .btn-light {
font-size: 1.05rem; padding: 10px 25px;
}
}
@media (max-width: 767.98px) { /* Small devices (landscape phones) */
body { font-size: 15px; }
.section-heading { font-size: clamp(1.8rem, 6vw, 2.2rem); margin-bottom: 30px; }
.hero-section .carousel-item { height: 400px; }
/* .carousel-caption is d-none d-md-block, so hidden here unless class changes */
.hero-section .carousel-caption p { display: none; } /* Retain this rule if caption becomes visible */
.feature-card { margin-bottom: 20px; }
.feature-card .card-body i { font-size: 2.8rem; }
.feature-card .card-title { font-size: 1.2rem; }
.vision-mission-section { padding: 30px 20px; }
.vision-mission-section h4 { font-size: 1.3rem; }
.vision-mission-section .content-area p,
.vision-mission-section .content-area ul { font-size: 1rem; }
.stats-section { padding: 50px 15px; }
.stats-section i { font-size: 3rem; }
.stats-section h3 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
.stats-section p.lead { font-size: clamp(0.8rem, 2.5vw, 0.9rem); }
.news-events-section .card-img-top { height: 180px; }
.news-events-section .card-title { font-size: 1.1rem; }
.testimonials-section { padding: 40px 15px; }
.testimonials-section .carousel-item { padding: 0 5%; }
.testimonials-section .testimonial-img-hp { width: 80px; height: 80px; }
.testimonials-section .blockquote { font-size: 1rem; }
.quick-links-section { padding: 40px 15px; }
.quick-links-section .btn-light {
font-size: 0.95rem; padding: 10px 15px; width: 100%; margin-bottom: 10px;
}
.quick-links-section .row .col-md-3:last-child .btn-light { margin-bottom: 0; }
.gallery-cta-section, .admission-cta { padding: 50px 20px; }
.gallery-cta-section p.lead, .admission-cta p.lead { font-size: 1.05rem; }
.gallery-cta-section .btn, .admission-cta .btn-light {
width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 10px;
}
.gallery-cta-section .btn:last-child, .admission-cta .btn-light:last-child {
margin-bottom: 0;
}
.alert.small { font-size: 0.85rem; padding: 0.5rem 0.75rem !important; }
.alert .close { font-size: 1.2rem; padding: 0.5rem 0.75rem; }
.announcements-ticker-section .d-flex {
/* Allow icon/title and ticker to stack if they don't fit side-by-side */
/* flex-wrap: wrap; // Already set on parent in previous example */
}
.announcement-icon-title {
margin-bottom: 0.25rem; /* Add a little space if it wraps under */
}
.announcements-ticker-container {
white-space: normal; /* Allow the container to respect wrapped children */
height: auto; /* Allow container height to adjust to wrapped content */
min-height: 1.5em; /* Ensure it has some base height */
line-height: 1.4em; /* Adjust for multi-line readability */
}
.ticker-item {
white-space: normal; /* CRUCIAL: Allow text to wrap on mobile */
overflow: visible; /* Ensure all wrapped text is visible */
text-overflow: initial;/* Reset text-overflow */
position: relative; /* Change from absolute for natural height flow in JS transitions */
/* OR keep absolute and dynamically set container height with JS (more complex) */
/* For simple fade with varying height, relative might be okay, but test visual glitches */
/* If using position: relative for ticker-item to manage its own height naturally */
display: none; /* JS will still handle which one is active */
opacity: 1; /* Opacity handled by 'active' class with transition still */
padding: 0; /* Remove side padding if it causes issues with full width */
}
.ticker-item.active {
display: block; /* Show the active item */
/* If you keep position:absolute for ticker-item and height:auto for container,
you'll need JS to measure the active item's height and set the container's height.
For simplicity, changing ticker-item to position:relative on mobile for natural height: */
}
.upcoming-events-snippet-section .event-snippet-card {
/* Cards will stack naturally due to Bootstrap columns. No specific change needed here unless desired. */
}
.upcoming-events-snippet-section .card-header.bg-primary {
padding: 0.5rem; /* Slightly reduce padding in date header */
}
.event-snippet-date-day {
font-size: 1.5rem; /* Smaller font for day */
}
.event-snippet-date-month {
font-size: 0.75rem; /* Smaller font for month */
}
.event-snippet-date-year {
font-size: 0.7rem; /* Smaller font for year */
}
.event-snippet-title {
font-size: 1rem; /* Slightly smaller title */
min-height: 0; /* Remove min-height to allow natural wrapping */
line-height: 1.3;
}
.event-snippet-desc {
font-size: 0.8rem; /* Slightly smaller description text */
min-height: 0; /* Remove min-height to allow natural wrapping */
line-height: 1.4; /* Adjust line height for smaller font */
/* If text still overflows and you want ellipsis for a fixed number of lines (more complex): */
/*
display: -webkit-box;
-webkit-line-clamp: 3; // Show 3 lines
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: calc(1.4em * 3); // line-height * number of lines
*/
}
.upcoming-events-snippet-section .card-body {
padding: 0.75rem; /* Reduce padding inside card body */
}
.upcoming-events-snippet-section .btn-outline-primary {
width: 100%; /* Make button full width for easier tapping */
font-size: 0.9rem; /* Slightly larger button text for mobile */
}
}
@media (max-width: 575.98px) { /* Extra small devices (portrait phones) */
.hero-section .carousel-item { height: 350px; }
/* .carousel-caption is d-none d-md-block */
.hero-section .carousel-caption h1 { font-size: clamp(1.6rem, 6vw, 2rem); } /* Retain if caption becomes visible */
.feature-card .card-body { padding: 20px; }
.feature-card .card-body i { font-size: 2.5rem; }
.stats-section { padding: 40px 15px; }
.stats-section i { font-size: 2.5rem; }
.event-snippet-title {
font-size: 0.95rem; /* Even smaller title */
}
.event-snippet-desc {
font-size: 0.75rem; /* Even smaller description */
}
.upcoming-events-snippet-section .card-header.bg-primary {
padding: 0.4rem;
}
.event-snippet-date-day {
font-size: 1.3rem;
}
.event-snippet-date-month {
font-size: 0.7rem;
}
}