/* Special section formatting for the new updates */
.section {
    margin-top: 10px; /* Reduced from 20px */
}

.section-format {
    text-align: center;
    margin: 40px 0;
}

/* Center the Program Packages heading */
.section-format h1 {
    text-align: center; /* Centers the text */
    font-family: 'Eskorte Latin Extrabold', sans-serif; /* Ensure the correct font is used */
    color: #062d3a; /* Match the color */
    margin-bottom: 20px; /* Add spacing if necessary */
}

.section-format p {
    margin-bottom: 20px;
}

.section-format button {
    margin-top: 20px;
}

.banner {
    background-color: #ffffff;
    padding: 40px 20px;
    border-bottom: 1px solid #ddd;
    text-align: center; /* Center-align banner section */
}

/* Specifically center the Program Packages heading */
#program-packages-title {
    text-align: center;
    width: 100%;
    display: block;
    font-family: 'Eskorte Latin Extrabold', sans-serif;
    color: #062d3a;
    margin-bottom: 20px; /* Optional for spacing */
}

.dark-background {
    background-color: #062d3a; /* Dark background color */
    color: #f6efe5; /* Light text color for readability */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    text-align: center;
}

.dark-background h2 {
    color: #f6efe5; /* Ensures header text is visible */
}

.dark-background p {
    color: #f6efe5; /* Ensure paragraph text is also styled correctly */
}

.dark-background a.button {
    background-color: #db9f5b; /* Keep button as mustard */
    color: #fff;
}

.centered-header {
    text-align: center; /* Centers the text */
    font-family: 'Eskorte Latin Extrabold', sans-serif; /* Correct font */
    color: #f6efe5; /* Ensures proper visibility */
    margin-bottom: 20px; /* Add spacing */
}

.section-format .centered-header {
    text-align: center !important;
    font-family: 'Eskorte Latin Extrabold', sans-serif !important;
    color: #f6efe5 !important;
    margin-bottom: 20px !important;
}

/* Container for both icons and text boxes */
.three-section-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    margin-top: 10px; /* Reduced from 20px */
}

.three-circles {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Row for the text boxes */
.text-row {
    display: flex;
    justify-content: center; /* Center-align the boxes */
    width: 100%;
    max-width: 900px;
    margin: 0 auto 10px; /* Center the row and add bottom margin */
}

/* Text box styling */
.text-box {
    flex: 1 1 30%;
    border: 2px solid #062d3a; /* Dark blue border around the box */
    padding: 15px; /* Space inside the box */
    border-radius: 8px; /* Optional rounded corners */
    background-color: #f6efe5; /* Light background color */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for 3D effect */
    margin: 10px; /* Space around the box */
}

/* Adjust layout for smaller screens like Pixel 7 (width: 412px) */
@media (max-width: 420px) {
    .text-row {
        width: 100%; /* Ensure the container fills the viewport */
        padding: 0 10px; /* Add padding to both sides */
        box-sizing: border-box; /* Include padding in width calculation */
        margin: 0 auto; /* Center the row */
    }

    .text-box {
        flex: 1 1 100%; /* Make each box take full width */
        margin: 10px 0; /* Add vertical spacing between boxes */
    }
}


.boxed-text {
    border: 2px solid #062d3a; /* Dark blue border */
    padding: 15px; /* Space inside the box */
    border-radius: 8px; /* Rounded corners */
    background-color: #f6efe5; /* Light background color */
    display: inline-block; /* Ensures it wraps just around the text */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for 3D effect */
    margin: 10px 0; /* Space above and below the box */
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
}

.styled-text-box {
    background-color: #ffffff;
    border: 2px solid #ffffff;
    color: #062d3a;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-family: 'Wondar Quason', sans-serif;
    margin: 20px auto;
    max-width: 800px;
    width: 80%;
    font-weight: 600; /* Adjusted for a bolder look */
}

@media (max-width: 768px) {
    .styled-text-box {
        width: 95%;
        font-weight: 700; /* Bolder on smaller screens for improved readability */
    }
}

.styled-text-box p {
    font-size: 14px;
}

.image-text-container {
    display: flex;
    align-items: center; /* Vertically centers content */
    justify-content: center; /* Horizontally centers the entire container */
    gap: 10px; /* Space between image and text */
}

.constrained-image {
    width: 150px;
    height: auto; 
    max-width: 100%; 
}
.constrained-image175 {
    width: 175px;
    height: auto; 
    max-width: 100%; 
}
.constrained-image200 {
    width: 200px;
    height: auto; 
    max-width: 100%; 
}
.constrained-image250 {
    width: 250px;
    height: auto; 
    max-width: 100%; 
}
.constrained-image275 {
    width: 275px;
    height: auto; 
    max-width: 100%; 
}
.constrained-image300 {
    width: 300px;
    height: auto; 
    max-width: 100%; 
}

.link-text {
    font-size: 18px;
    color: #db9f5b; /* Mustard color */
    text-decoration: none;
}

.link-text:hover {
    text-decoration: underline; /* Adds underline on hover */
}