/* =========================================
   1. GLOBAL THEME & TYPOGRAPHY
   ========================================= */
/* Green School Theme */
.bg-primary { background-color: #198754 !important; }
.btn-primary { background-color: #198754 !important; border-color: #198754 !important; }
.text-primary { color: #198754 !important; }
.btn-outline-primary { color: #198754 !important; border-color: #198754 !important; }
.btn-outline-primary:hover { background-color: #198754 !important; color: white !important; }

/* Fonts */
h1, h2, h3, .navbar-brand { font-family: 'Merriweather', serif; }
body { font-family: 'Open Sans', sans-serif; padding-top: 60px; }

/* =========================================
   2. LAYOUT & NAVBAR
   ========================================= */
.navbar-placeholder { background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; }
/* Fix for static navbar brand on subpages */
.navbar-brand-static img { height: 30px; vertical-align: middle; margin-right: 8px; }
.navbar-brand-static span { font-weight: bold; vertical-align: middle; }

.content-section { padding: 40px 15px; } /* Removed text-align:center so text reads better */
.footer { padding: 20px 0; margin-top: 40px; background-color: #f8f9fa; text-align: center; font-size: 0.9em; color: #6c757d; }

/* =========================================
   3. IMAGES & CAROUSEL
   ========================================= */
.principal-pic { width: 180px; height: 180px; object-fit: cover; margin-bottom: 1rem; }

/* Carousel Sizing */
.carousel-item {
    height: 450px;          /* Fixed height */
    background-color: #000; /* Black background for letterboxing */
}
.carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: contain;    /* Prevents cropping */
}

/* =========================================
   4. CONTACT PAGE STYLES
   ========================================= */
.contact-section {
    padding: 50px 0;
    background: linear-gradient(to right, #198754, #146c43); /* Green Gradient */
    color: #fff;
}
.contact-form-wrap { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); color: #333; }
.contact-details-wrap { padding-left: 30px; }
.contact-details-wrap h3 { border-bottom: 2px solid #fff; padding-bottom: 10px; margin-bottom: 20px; color: #fff; }
.contact-details-wrap p { margin-bottom: 15px; display: flex; align-items: center; }
.contact-details-wrap i { font-size: 1.2em; margin-right: 10px; width: 20px; text-align: center; color: #f8f9fa; }
.contact-form .form-control { border-radius: 0; border: none; border-bottom: 1px solid #ced4da; padding-left: 40px; }
.contact-form .input-group-text { background: none; border: none; border-bottom: 1px solid #ced4da; border-radius: 0; color: #6c757d; }
.contact-form .input-group { position: relative; }
.contact-form .input-group i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 3; color: #6c757d; }
.btn-send { background-color: #d9534f; border-color: #d43f3a; color: #fff; font-weight: bold; padding: 10px 30px; border-radius: 5px; }

/* =========================================
   5. NEWS PAGE STYLES
   ========================================= */
.news-card { margin-bottom: 30px; transition: transform 0.2s; }
.news-card:hover { transform: scale(1.02); }
.date-badge { font-size: 0.8em; color: #6c757d; font-weight: bold; }

/* =========================================
   6. WHATSAPP BUTTON
   ========================================= */
.whatsapp-float {
    position: fixed; width: 60px; height: 60px; bottom: 20px; right: 20px;
    background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 30px;
    box-shadow: 2px 2px 3px #999; z-index: 100; display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all 0.3s ease;
}
.whatsapp-float:hover { background-color: #128c7e; transform: scale(1.1); color: white; }