/*
The circles template stylesheet
*/
.circles {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-flow: row wrap;
    gap: 1.5rem;
    padding-bottom: 3rem;
}
.circle_img_box {
    position: absolute;
    height: 250px;
    width: 250px;
    z-index: 3;
    box-shadow: inset 15px 10px 15px 2px rgba(0, 0, 0, .3), inset 10px 10px 20px 20px rgba(0, 0, 0, .1), inset 5px 5px 5px 2px rgba(0, 0, 0, .1);
    background-position: 80% 110%;
    background-size: 120%;
    border-radius: 50%;
    overflow: hidden;
    /* necessary to prevent visible scale behind */
    background-color: white;
}
.circle_activity .circle_img_box.box_0 {
    background-position: 80% 110%;
    background-size: 120%;
}
.circle_activity .circle_img_box.box_1 {
    background-position: 45% 35%;
    background-size: 145%;
}
.circle_activity .circle_img_box.box_2 {
    background-position: 41% 50%;
    background-size: 115%;
}
.circle_activity .circle_img_box.box_3 {
    background-position: 55% 110%;
    background-size: 135%;
}
.circle_activity .circle_img_box.box_4 {
    background-position: 50% 40%;
    background-size: 100%;
}
.circle_activity .circle_img_box.box_5 {
    background-position: center 30%;
    background-size: 180%;
    scale: -1 1;
}
.circle_img_box::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(192, 186, 169, 0);
    border-radius: 50%;
    transition: all .5s ease;
}
.circle .circle_img_box,
.circle .circle_title_box p {
    transition: .5s ease;
}
.parenthesis {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    border-radius: 50%;
}
.parenthesis::before,
.parenthesis::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    transform: scale(.5);
    z-index: 1;
    transition: all .5s ease;
}
.parenthesis::before {
    width: 315px;
    height: 320px;
    background-color: var(--light-grey);
}
.parenthesis::after {
    width: 332px;
    height: 312px;
    background-color: var(--main-gold);
    z-index: 0;
}
.circle_title,
.circle_subtitle {
    position: relative;
    text-align: center;
    text-transform: uppercase;
    transition: all .5s ease;
    color: var(--main-black);
    z-index: 1;
}
.circle_title_box {
    position: relative;
    z-index: 2;
}
.circle_title {
    font-size: min(max(1.2rem, 1.2vw), 1.5rem);
    font-weight: 700;
}
.circle_subtitle {
    font-size: min(max(.85rem, 1vw), 1.1rem);
}
.know_more {
    position: absolute;
    z-index: 3;
}
.know_more_p {
    display: block;
    padding: 1rem;
    background-color: white;
    color: var(--main-gold);
    transform: scale(0);
    transition: all .5s ease;
}
/* RESPONSIVE */
@media all and (max-width: 1100px) {
    .circle_img_box {
        width: 240px;
        height: 240px;
    }
    .parenthesis::before {
        width: 310px;
        height: 320px;
    }
    .parenthesis::after {
        width: 330px;
        height: 310px;
    }
}
@media all and (max-width: 900px) {
    .circles {
        gap: .5rem;
    }
    .circle_img_box {
        width: 230px;
        height: 230px;
    }
    .parenthesis {
        width: 300px;
        height: 300px;
    }
    .parenthesis::before {
        width: 290px;
        height: 310px;
    }
    .parenthesis::after {
        width: 305px;
        height: 300px;
    }
}