@import url('https://fonts.googleapis.com/css2?family=Chicle&display=swap');

/* Global Styles */

body {
  background: linear-gradient(135deg, #ffffff 0%, #e8f2ff 50%, #fffaf0 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #000; 
}

h1, h2 {
    font-family: Georgia, serif;
}

/* Header and Footer Styles */
#main-header {
    background-color: #2f4bbd; /* Updated to a darker blue for better contrast */
    color: #ffffff; /* White text for better readability */
    padding: 10px 20px; /* Add some padding */
    font-family: 'Chicle', cursive; /* Apply the new font */
}

footer {
    background-color: #2f4bbd; /* Updated to a darker blue for better contrast */
    color: #ffffff; /* White text for better readability */
    padding: 10px 20px; /* Add some padding */
    font-family: 'Chicle', cursive; /* Apply the new font */
}

/* Navigation */
#nav-toggle {
    z-index: 1051;
    background-color: #2f4bbd;
}


#nav-toggle .fas,
#nav-toggle i.fas,
#nav-toggle .fa-bars {
    /* Bars within toggle to white */
  color: #ffffff;
}

.hero-image { height: 300px; object-fit: cover; filter: saturate(1.05); }
.text-shadow { text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.card-img-top {
width: 100%;
height: 550px;
object-fit: cover;      /* Fills the area, cropping as needed */
background: #f8f9fa;  /* Optional: fallback background */
}
.card {
min-height: 500px;  /* Adjust as needed for your layout */
}