/* Decorative Circles for Section Headings */

/* General Left Alignment Overrides */
.about-us-section .section-title,
.advantage-section .section-title,
.teachers-section .section-title,
.classes-section .sec-title {
    text-align: left;
}

.about-us-section .section-title p,
.advantage-section .section-title p,
.teachers-section .section-title p,
.classes-section .sec-title p {
    margin: 0;
    max-width: 530px;
    text-align: left;
}

/* 
   For Left Layout:
   We do NOT need inline-block. The block element h2 starts at the left edge.
   The ::before element at left: -70px will be relative to that left edge.
   Since content is left aligned, this places it correctly behind the first word.
*/

/* About SproutSong - Yellow Circle */
.about-us-section .section-title>h2 {
    position: relative;
    z-index: 1;
    /* display: block; Default */
}

.about-us-section .section-title>h2::before {
    content: "";
    position: absolute;
    top: -40px;
    left: -70px;
    width: 114px;
    height: 108px;
    background-image: url(../img/sec-bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

/* Our Services - Yellow Circle */
.classes-section .sec-title>h2 {
    position: relative;
    z-index: 1;
}

/* Note: .sec-title > h2:before is in main.css. We rely on that or override here if needed. 
   Currently main.css has the correct image. */

/* The SproutSong Advantage - Yellow Circle */
.advantage-section .section-title>h2 {
    position: relative;
    z-index: 1;
}

.advantage-section .section-title>h2::before {
    content: "";
    position: absolute;
    top: -40px;
    left: -70px;
    width: 114px;
    height: 108px;
    background-image: url(../img/sec-bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

/* Our Awesome Team - Yellow Circle */
.teachers-section .section-title>h2 {
    position: relative;
    z-index: 1;
}

.teachers-section .section-title>h2::before {
    content: "";
    position: absolute;
    top: -40px;
    left: -70px;
    width: 114px;
    height: 108px;
    background-image: url(../img/sec-bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 767px) {

    .about-us-section .section-title>h2::before,
    .advantage-section .section-title>h2::before,
    .teachers-section .section-title>h2::before {
        width: 80px;
        height: 76px;
        top: -30px;
        left: -50px;
        z-index: -1 !important;
    }
}