.main-about-container{
    padding: 20px;
}

.mainTitle {
    background-color: #358092;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    font-size: 2em;  /* Slightly larger for prominence */
    margin-bottom: 20px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.infoSection {
    padding: 25px;  /* More padding for a spacious look */
    background-color: #fff;
    max-width: 1400px;
    margin: 15px auto;
    border-radius: 30px;
    box-shadow: 0 6px 10px rgb(213, 213, 213);
    transition: transform .3s, box-shadow .3s;  /* Added shadow transition */
}

.infoSection:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 15px rgb(213, 213, 213);  /* Deeper shadow on hover */
}

.infoSectionCTA{
    padding: 20px;  /* More padding for a spacious look */
    background-color: #fff;
    max-width: 1400px;
    margin: 50px auto;
    border-radius: 70px;
    box-shadow: 0 6px 10px rgb(213, 213, 213);
    transition: transform .3s, box-shadow .3s;  /* Added shadow transition */
}

.infoSection h1 {
    font-weight: 400;  /* Bolder for distinction */
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;  /* Increased margin */
    font-size: 1.8rem;
}

.infoSection h2 {
    font-size: 1.3rem;
}

/* This creates the line beneath each h2 */
.infoSection h1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #358092;  /* Matching the title color */
}

.infoSection p {
    position: relative;
    margin-bottom: 15px;  /* Increased margin for spacing */
}

.infoSectionCTA h1 {
    font-weight: 400;  /* Bolder for distinction */
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;  /* Increased margin */
    font-size: 1.8rem;
}

.infoSectionCTA h2 {
    font-size: 1.3rem;
}

/* This creates the line beneath each h1 */
.infoSectionCTA h1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 50px;
    height: 3px;
    background-color: #358092;  /* Matching the title color */
    transform: translateX(-50%);  /* Shift left by half its width */
}

.infoSectionCTA p {
    position: relative;
    margin-bottom: 15px;  /* Increased margin for spacing */
}

.ctaButton {
    display: block;
    padding: 15px 30px;  /* Wider button for better visual appeal */
    background-color: #358092;  /* Color consistency with title */
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color .3s, transform .3s;  /* Added transform transition */
    font-weight: 600;  /* Bolder font for CTA */
    letter-spacing: 1px;  /* Slight letter spacing for refined look */
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
}

.ctaButton:hover {
    background-color: #2a6575;  /* Slightly darker on hover */
    transform: translateY(-3px);  /* Slight lift effect */
}

@media screen and (max-width: 600px) {
    .infoSection {
        padding: 25px;  /* Adjusted padding for mobile */
    }
    .mainTitle {
        font-size: 1.5em;
        padding: 20px 0;
    }
}