/*
The circles template stylesheet
*/

.circles {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-flow: row wrap;
    gap: 1rem;
    padding: 2rem 0;
}
.activity_img_box {
    position: absolute;
    /* height: 350px;
    width: 350px; */
    height: 330px;
    width: 330px;
    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;
}
.activity_img_box.box_0 {
    background-position: 80% 110%;
    background-size: 120%;
}
.activity_img_box.box_1 {
    background-position: 45% 35%;
    background-size: 145%;
}
.activity_img_box.box_2 {
    background-position: 41% 34%;
    background-size: 220%;
}
.activity_img_box.box_3 {
    background-position: 55% 110%;
    background-size: 135%;
}
.activity_img_box.box_4 {
    background-position: 43% 55%;
    background-size: 152%;
}
.activity_img_box.box_5 {
    background-position: center 30%;
    background-size: 180%;

    scale: -1 1;

    /* transform: sclae; */
}
.activity_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;
}
.activity:hover .activity_img_box::before {
    background-color: rgba(192, 186, 169, .7);
}
.activity .activity_img_box,
.activity .activity_title_box p {
    transition: .5s ease;
}
.activity:hover .activity_img_box,
.activity:hover .activity_title_box p {
    transform: scale(1.1);
}
.parenthesis {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    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: 400px; */
    width: 405px;
    height: 410px;
    background-color: var(--light-grey);
    z-index: 2;
}
.parenthesis::after {
    /* width: 420px; */
    width: 430px;
    height: 400px;
    background-color: var(--main-gold);
}
.activity:hover .parenthesis::before,
.activity:hover .parenthesis::after {
    transform: scale(1);
}
.activity_title,
.activity_subtitle {
    text-align: center;
    text-transform: uppercase;
    color: var(--main-black);
    transition: all .5s ease;
    z-index: 1;
    position: relative;
}
.activity_title_box {
    position: relative;
    z-index: 2;
}
.activity_title {
    /* font-size: min(max(1.6rem, 2.2vw), 2.4rem); */
    font-size: min(max(1.3rem, 1.5vw), 2rem);
    font-weight: 700;
}
.activity_subtitle {
    font-size: min(max(.95rem, 1.1vw), 1.5rem);
}
.activity:hover .activity_title,
.activity:hover .activity_subtitle {
    color: var(--main-gold);
}
/* RESPONSIVE */
@media all and (max-width: 1600px) {
    .activity_img_box {
        /* width: 280px;
        height: 280px; */
        width: 260px;
        height: 260px;
    }
    .parenthesis {
        width: 330px;
        height: 330px;
    }
    .parenthesis::before {
        width: 330px;
        height: 340px;
    }
    .parenthesis::after {
        width: 350px;
        height: 330px;
    }
    /* .activity_title {
        font-size: min(max(1.8rem, 1.8vw), 2rem);
    } */
    /* .activity_subtitle {
        font-size: min(max(1.3rem, 1.3vw), 1.8rem);
    } */
}
@media all and (max-width: 1100px) {
    .circles {
        gap: .5rem;
    }
    .activity_img_box {
        /* width: 250px;
        height: 250px; */
        width: 230px;
        height: 230px;
    }
    .parenthesis {
        width: 300px;
        height: 300px;
    }
    .parenthesis::before {
        width: 290px;
        height: 310px;
    }
    .parenthesis::after {
        width: 305px;
        height: 300px;
    }
    /* .activity_title {
        font-size: min(max(1.7rem, 1.8vw), 2rem);
    } */
    /* .activity_subtitle {
        font-size: min(max(1.2rem, 1.3vw), 1.8rem);
    } */
}
@media (max-width: 977px) {
    /* .activity_title {
        font-size: min(max(1.6rem, 2vw), 2rem);
    } */
    /* .activity_subtitle {
        font-size: min(max(1.2rem, 1.8vw), 1.8rem);
    } */
}