/* =================================================== */
/* GLOBAL/UTILITY STYLES */
/* =================================================== */
html {
  scroll-behavior: smooth;
}


.fakeimg {
    height: 300px;
}


/* ========================================================= */
/* GLOBAL FONT STYLES */
/* ========================================================= */

/* Apply Lato to the main body text for overall readability */
/*body {
    font-family: 'Lato', sans-serif;
}*/

/* Apply Montserrat to all main headings for a strong, modern appearance */
/*h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; /* Extra bold */
/*}

/* ========================================================= */
/* SPECIFIC BLOCK FONT STYLES */
/* ========================================================= */

/* Target the h5 elements inside the mission block */
.col-sm-6.border h5 {
    font-family: 'Montserrat', sans-serif; /* Keep the mission points bold and prominent */
    font-weight: 700; /* Bold */
    line-height: 1.4; /* Slightly increase line spacing for better readability */
}

/* Target the text *within* the h5 for possible differentiation (optional) */
/*.col-sm-6.border h5 span {
    /* If you wanted the main text to be softer: */
    /* font-family: 'Lato', sans-serif; */
    /* font-weight: 400; */
/*}


/* =================================================== */
/* CAROUSEL STYLES */
/* =================================================== */

/* 1. Set the maximum height for the entire slideshow area */
.carousel-inner {
    max-height: 600px;
}

/* 2. Ensure each slide item fills that max height */
.carousel-item {
    height: 500px; /* Explicit height for the item container */
}

/* 3. Apply object-fit to the images and control the position */
.carousel-inner img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* Anchor the image to the top */
    object-position: top;
}