@charset 'UTF-8';
:root { --primary-blue: #003366; --secondary-orange: #FF9933; --pure-white: #FFFFFF; }
body { font-family: 'Inter', sans-serif; background: #fff; color: #333; margin: 0; }
.top-ribbon { background: var(--primary-blue); color: #fff; padding: 10px 0; text-align: center; font-size: 0.9rem; }
.carousel-item { height: 500px; min-height: 400px; }
.navbar-brand img { transition: 0.3s; }
.navbar-brand:hover img { transform: scale(1.1); }
.logo-box { box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 2px solid #fff; }
.scrolling-section { padding: 50px 0; overflow-x: auto; white-space: nowrap; }
.card-devotional { display: inline-block; width: 300px; margin-right: 20px; border: 1px solid #eee; border-radius: 15px; background: #fff; transition: 0.3s; }
.card-devotional:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.text-primary { color: var(--primary-blue); }
.text-secondary { color: var(--secondary-orange); }
.btn-temple-orange { background: var(--secondary-orange); color: #fff; border-radius: 20px; border: none; padding: 10px 25px; cursor: pointer; transition: 0.3s; }
.btn-temple-orange:hover { background: #e68a00; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255,153,51,0.4); }

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .carousel-item { height: 60vh !important; min-height: 350px !important; }
    .carousel-caption h1 { font-size: 2rem !important; }
    .carousel-caption p { font-size: 1rem !important; }
    .navbar-brand img { width: 50px !important; }
    .navbar-brand h3 { font-size: 1.2rem !important; }
    .navbar-brand p { font-size: 0.7rem !important; }
    .section-title { font-size: 1.5rem !important; text-align: center; margin-bottom: 30px; }
    .scrolling-section { padding: 30px 0; }
    .card-devotional { width: 260px; }
}

/* Base Utility Classes */
.bg-light-blue { background-color: #f0f7ff; }
.bg-temple-blue { background-color: var(--primary-blue); }
.text-temple-orange { color: var(--secondary-orange); }
.section-title { font-family: 'Lora', serif; weight: 700; margin-bottom: 40px; color: var(--primary-blue); position: relative; display: inline-block; }
.section-title::after { content: ''; position: absolute; width: 50px; height: 3px; background: var(--secondary-orange); bottom: -10px; left: 0; }