/* Hero Section Home Page */

.hero-section {
    background: linear-gradient(to bottom right, #ffffff, #ade4e9);
}

.hero-card-container, .hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.topic-header {
    font-size: 2.25rem;
    font-family: "Caveat", sans-serif;
    color: #185FA5;
    font-weight: 500;
    margin: 0.5em 0;
    padding: 0;
}

.hero-info {
    display: flex;
    justify-content: left;
    background-color: #ffffff;
    gap: 1.25em;
    padding: 1.25em 1.5em;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    
}

.hero-info, .hero-section h2, .hero-info-age {
    width: 90%;
}

.hero-info-age, .hero-info  {
    border-radius: 12px;
}

.hero-icon {
    align-self: flex-start;
    display: flex;
    align-items: center;
    padding: 0.8em 0.7em;
    border-radius: 8px;
    background-color: #00BCD4;
    color: #ffffff;
}

.hero-text {
    display: flex;
    flex-direction: column;
    margin-top: 0.3em;
    
}

.hero-text span{
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.4em;
}

.hero-text p {
    font-size: 0.9rem;
    font-weight: 400;
    color: #374151;
    line-height: 1.5;
    margin: 0;
}

.hero-text span, .hero-text p {
    text-align: left;
}

.hero-info-age {
    max-width: 672px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    /* background: linear-gradient(to right, #00BCD4, #0097A7); */
    background: linear-gradient(to right, #185FA5, #0D3F6E);
    margin: 1em 0;
    padding: 1.25em 0;
}

.hero-info-age h2 {
    font-size: 1.875rem;
}

.hero-info-age p {
    font-size: 0.9rem;
    line-height: 1.5;
}

.hero-info-age h2, .hero-info-age p {
    font-weight: 400;
    margin: 0;
    padding: 0 0.75em;
    color: #ffffff;
}

.hero-text span { color: #646464; }

.hero-info:nth-child(1) .hero-icon { background-color: #E53935; }
.hero-info:nth-child(2) .hero-icon { background-color: #558B2F; }
.hero-info:nth-child(3) .hero-icon { background-color: #F57F00; }
.hero-info:nth-child(4) .hero-icon { background-color: #4A8CC7; }

.hero-info:nth-child(1) { border-left: 4px solid #E53935; }
.hero-info:nth-child(2) { border-left: 4px solid #558B2F; }
.hero-info:nth-child(3) { border-left: 4px solid #F57F00; }
.hero-info:nth-child(4) { border-left: 4px solid #4A8CC7; }

/* Philosophy Text Section */

.philosophy-section {
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
    padding: 0 !important;
    text-align: center;
    line-height: 1.5;
}

.philosophy-section p {
    font-size: 1.125rem;
    margin-bottom: 1.5em;
}

/* Operational Hours Section */

.operational-hours-section {
    gap: 0.5em;
}

.operational-hours-section, .closed-days {
    display: flex;
    flex-direction: column;
}

.operational-hours-section h2 {
    font-size: 2rem;
    margin-bottom: 0.25em;
}

#hours-operation {
    font-size: 3rem;
    margin-top: -0.35em;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0 0.5em;
    margin-bottom: 0.75em;
}

.section-header h2 {
    font-size: 2.25rem;
    font-weight: 600;
    margin: 0;
}

.fa-clock {
    color: #185FA5;
    font-size: 1.75rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0;
}

.closed-days {
    gap: 0.75em;
    text-align: left;
    list-style-type: none;
    
}

.closed-days li {
    line-height: 1.5;
}

.closed-days li span {
    font-weight: bold;
    text-decoration: none;
}

.operational-hours-section p {
    font-size: 0.875rem;
}


/* Emergency Information Section */

.emergency-information {
    background: linear-gradient(to bottom right, #E0F7FA, #b6f0f8);
}

.emergency-information, .emergency-grid {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.emergency-information .section-header {
    margin-right: 1.5em;
}

.fa-triangle-exclamation {
    color: #e66363;
    font-size: 1.75rem;
    margin-bottom: 1.4em;
}

.emergency-grid {
    width: 100%;
}

.emergency-short-info, .emergency-info {
    width: 90%;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    text-align: left;
    padding: 1.5em;
    line-height: 1.5;
}

.emergency-short-info h3, .emergency-info h3, 
.emergency-short-info p, .emergency-info p {
    margin: 0;
}

.emergency-short-info h3, .emergency-info h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #185FA5;
    margin-bottom: 0.75em;
}

.emergency-info > p {
    margin-bottom: 0.75em;
}


.emergency-sub-text {
    font-size: 0.875rem;
    width: 97.5%;
    background-color: #f7f7f7;
    line-height: 1.5;
    padding: 1em;
    margin: 0 auto;
}

.sub-text-header {
    font-weight: 600;
}

/* Responsive Design */

@media (min-width: 900px) {

    .hero-card-container, .emergency-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* grid-auto-rows: 1fr; */
    }

    .hero-card-container {
        margin: 0 auto;
        max-width: 1000px;
        padding-left: 2em;
    }

    .hero-info {
        height: 100%;
        box-sizing: border-box;
    }

    .topic-header {
        font-size: 3rem;
    }

    .closed-days {
        /* margin-left: 27.5%; */
        margin: 0 auto;
    }

    .emergency-grid {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 2em;
    }


}

@media (min-width: 1024px) {
    .philosophy-section {
        padding-right: 15em;
    }

    
}