/*about section*/

.about-section{
    position: relative;
    padding-block: 70px;
}

.about-section .about-row1{
    padding-inline: 190px;
    padding-bottom: 0px;
    position: relative;
}

.puzzle{
    position: absolute;
    left: 81px;
    top: -177px;
    width: 167px;
    height: 178px;
}

.puzzle img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.arrow3{
    position: absolute;
    right: 335px;
    top: -65px;
    width: 212px;
    height: 211px;
}

.arrow3 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.about-section .about-row2{
    padding-inline: 190px;
    margin-top: -71px;
}

.about-section .about-row3{
    padding-inline: 100px;
    padding-top: 150px;
    position: relative;
}

.arrow{
    position: absolute;
    width: 200px;
    height: 212px;
    top: -56px;
    left: 0;
}

.arrow img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.arrow2{
    position: absolute;
    width: 181px;
    height: 185px;
    top: -26px;
    right: 34px;
}

.arrow2 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.col-about-shape{
    position: relative;
}

.about-shape{
    width: 286px;
    height: 294px;
    margin-bottom: 10px;
}

.about-shape img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-right: -53px;
}

.about-content h2{
    color: var(--primary-color);
    font-size: var(--site-title);
    /*font-weight: 600;*/
    margin-bottom: 22px;
    font-family: 'VZ-Bold';
}

.about-row1 .about-content h2{
    text-align: center;
}

.about-content p{
    font-size: var(--p-size);
    line-height: 28px;
    color: var(--text-color);
    text-align: justify;
}

.col-about-right{
    padding-left: 130px;
    position: relative;
}

.goal{
    position: absolute;
    right: 44px;
    top: -59px;
    width: 170px;
    height: 172px;
}

.goal img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.col-about-left{
    padding-right: 130px;
}

.col-about-right{
    padding-top: 80px;
}

.col-about-side .about-content{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.about-row3 .about-content h2{
    text-align: left;
}


/*about section*/


/*people*/

.people_section{
    position: relative;
    background: var(--secondary-color);
    padding-block: 57px 80px;
    margin-bottom: 150px;
}

.people-box{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.person-image{
    width: 270px;
    height: 270px;
    position: relative;
}

.iso_swiper .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
}

.iso_swiper .swiper-slide .each-person{
    position: relative;
}

.vibrate1{
    position: absolute;
    width: 50px;
    height: 50px;
    right: -24px;
    top: 30%;
}

.vibrate2{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 4px;
    top: 5px;
}

.vibrate3{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 31px;
    bottom: -8px;
}

.vibrate4{
    position: absolute;
    width: 50px;
    height: 50px;
    right: 5px;
    top: 4%;
}

.vibrate5{
    position: absolute;
    width: 50px;
    height: 50px;
    left: -26px;
    bottom: 14px;
}

.vibrate6{
    position: absolute;
    width: 50px;
    height: 50px;
    right: -3px;
    bottom: 5px;
}



.person-image img{
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 50%;
}

.person-image::before{

}


.person-image::before{

}

.title-about{
    text-align: center;
    padding-bottom: 53px;
}

.title-about h2{
    font-size: var(--site-title);
    /*font-weight: 600;*/
    color: var(--primary-color);
    font-family: 'VZ-Bold';
}

.title-about h2 span{
    font-family: "Comfortaa", serif;
    font-size: 33px;
}


/*people*/






/*responsive*/

@media screen and (max-width: 1500px){

    .about-shape {
        width: 176px;
        height: 184px;
    }

    .puzzle {
        top: -141px;
        width: 130px;
        height: 125px;
    }

    .goal {
        top: -34px;
        width: 128px;
        height: 128px;
    }
}




@media screen and (max-width: 1399px){


    .goal {
        position: absolute;
        right: 23px;
        top: -26px;
        width: 127px;
    }

}


@media screen and (max-width: 1199px){

    .goal {
        right: 190px;
        top: 84px;
        width: 131px;
        height: 144px;
    }

    .about-shape {
        width: 140px;
        height: 144px;
        right: 0px;
        top: 172px;
    }

    .puzzle {
        width: 112px;
        height: 145px;
    }

    .about-section .about-row1 {
        padding-inline: 126px;
        /*padding-bottom: 96px;*/
    }

    .arrow3 {
        position: absolute;
        right: 242px;
        top: -60px;
        width: 166px;
        height: 210px;
    }

    .about-content h2 {
        font-size: 38px;
    }

    .goal {
        right: 0;
        top: 25px;
        width: 107px;
        height: 112px;
    }

    .arrow2 {
        position: absolute;
        width: 84px;
        height: 146px;
        top: -26px;
        right: 114px;
    }

    .arrow {
        position: absolute;
        width: 143px;
        height: 170px;
        top: -46px;
        left: 45px;
    }

    .about-content h2 {
        font-size: 31px;
    }

    .person-image {
        width: 229px;
        height: 230px;
    }

    .title-about h2 {
        font-size: 38px;
    }

    .about-content p {
        font-size: 16px;
    }

}


@media screen and (max-width: 991px){


    .people_section {
        background: unset;
    }

    .iso_swiper .swiper-slide .each-person {
        position: relative;
        background: var(--secondary-color);
        padding: 22px;
        border-radius: 143px;
        height: 400px;
    }
    .vibrate1, .vibrate2, .vibrate3, .vibrate4, .vibrate5, .vibrate6{
        display: none;
    }

    .iso_swiper .swiper-slide .each-person::before{
        position: absolute;
        content:url('data:image/svg+xml,<svg width="43" height="41" viewBox="0 0 43 41" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_361_23)"><path d="M1.15685 0C0.505337 1.59646 -1.05106 3.55575 1.04827 4.13628C7.09288 7.18407 16.1055 8.88938 21.6434 12.4451C28.05 16.5814 32.502 24.6 35.289 30.6956C36.8454 34.1062 36.1215 38.4965 39.4877 41C46.22 39.4035 41.6594 30.6593 39.2705 25.9788C32.9363 13.715 19.8698 0 1.15685 0Z" fill="%23443895"/></g><defs><clipPath id="clip0_361_23"><rect width="43" height="41" fill="white"/></clipPath></defs></svg>');
        width: 30px;
        height: 30px;
        top: 8px;
        right: 12px;
        transform: scale(0.7);
    }

    .iso_swiper .swiper-slide .each-person::after{
        position: absolute;
        content: url('data:image/svg+xml,<svg width="44" height="27" viewBox="0 0 44 27" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M43.4741 24.3161C44.0249 23.95 42.8009 23.6754 42.5866 23.8279C30.4072 21.8143 15.1371 17.2989 4.12054 3.26452C3.11069 1.98312 3.2331 0.274585 1.1522 0C-2.51999 3.14248 3.53911 8.14603 6.04844 10.4953C14.0354 18.0616 25.5722 23.6754 34.2324 25.872C37.4762 26.6958 41.2402 27.8247 43.8413 26.0856C43.6577 25.4754 44.5145 24.9263 43.4741 24.2856V24.3161Z" fill="%23443895"/></svg>');
        width: 30px;
        height: 30px;
        bottom: 8px;
        left: 12px;
        transform: scale(0.7);
    }


    .about-shape {
        position: unset;
    }

    .col-about-shape {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .about-section .about-row1 {
        padding-inline: 20px;
        padding-bottom: 60px;
        flex-direction: column;
        padding-top: 50px;
    }

    .arrow3{
        display: none;
    }

    .about-section .about-row2 {
        padding-inline: 20px;
    }
    .about-content h2 {
        font-size: 31px;
        text-align: center;
    }

    .arrow{
        display: none;
    }

    .arrow2{
        display: none;
    }

    .puzzle {
        position: unset;
        align-self: center;
    }

    .goal {
        position: unset;
    }

    .col-about-right{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .col-about-right {
        padding-left: 0;
        position: relative;
    }

    .col-about-right {
        padding-top: 0;
    }

    .about-row3 .about-content h2 {
        text-align: center;
    }

    .about-section .about-row3 {
        padding-inline: 20px;
        padding-top: 50px;
        position: relative;
    }

    .col-about-left {
        padding-right: 0;
    }

    .about-content p {
        font-size: 14px;
        text-align: justify;
    }

    .col-about-left{
        padding-top: 70px;
    }

    .col-about-side .about-content {
        gap: 19px;
    }

    .puzzle {
        padding-top: 30px;
    }

    .about-section .container{
        display: flex;
        flex-direction: column;
    }

    .row.about-row2{
        order: -1;
    }

    .about-content{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about-shape img {
        margin-right: 0;
    }

    .about-content{
        order: 3;
    }

    .about-h{
        order: 1;
    }

    .puzzle{
        order: 2;
        margin-bottom: 20px;
    }

    .goal{
        order: 2;
        margin-bottom: 20px;
    }

    .col-about-left .about-content h2{
        text-align: right;
    }

    .col-about-left .about-content p{
        text-align: right;
    }

    .title-about h2 {
        font-size: 30px;
    }

    .title-about h2 span {
        font-family: "Comfortaa", serif;
        font-size: 30px;
    }

}

@media screen and (max-width: 767px){

    .about-content h2 {
        font-weight: 500;
    }

    .people_section {
        margin-bottom: 60px;
    }

    .title-about h2 {
        font-size: 23px;
    }

    .title-about h2 span {
        font-family: "Comfortaa", serif;
        font-size: 23px;
    }

}

@media screen and (max-width: 575px){


    .col-about-side .about-content {
        gap: 3px;
    }

    .about-h {
        order: 2;
    }

    .about-shape {
        width: 96px;
        height: 89px;
        right: 0px;
        top: 172px;
    }

    .about-section .about-row3 {
        padding-top: 10px;
    }

    .about-content p {
        font-size: var(--mobile-text-font);
        line-height: var(--mobile-line-height);
    }

    .about-content h2 {
        font-size: var(--main-mobile-title);
        /*font-weight: 600;*/
        line-height: var(--mobile-line-height);
        margin-bottom: 6px;
        font-family: 'VZ-Bold';
    }

    .about-section .about-row2 {
        padding-inline: 0;
    }

    .about-section .about-row1 {
        padding-inline: 0px;
        padding-bottom: 32px;
        padding-top: 32px;
    }

    .col-about-left {
        padding-top: 37px;
    }

    .people_section {
        padding-block: 37px 52px;
    }

    .col-about-right {
        padding-right: 0;
        padding-right: calc(var(--bs-gutter-x)* .5);
        padding-left: calc(var(--bs-gutter-x)* .5);
    }

    .about-section .about-row3 {
        padding-inline: 0;
    }

    .col-about-left {
        padding-left: 0;
        padding-right: calc(var(--bs-gutter-x)* .5);
        padding-left: calc(var(--bs-gutter-x)* .5);
    }

    .puzzle {
        width: 109px;
        height: 91px;
        padding-top: 10px;
    }

    .goal {
        width: 114px;
        height: 100px;
    }

    .person-image {
        width: 154px;
        height: 154px;
    }

    .iso_swiper .swiper-slide .each-person {
        height: 291px;
    }

    .people_section {
        margin-bottom: 30px;
    }

    .iso_swiper .swiper-slide .each-person::before {
        top: -2px;
        right: 12px;
        transform: scale(0.6);
    }

    .title-about h2 {
        font-size: var(--main-mobile-title);
        line-height: var(--mobile-line-height);
        /*font-weight: 600;*/
        font-family: 'VZ-Bold';
    }

    .title-about h2 span {
        font-size: var(--main-mobile-title);
        line-height: var(--mobile-line-height);
        /*font-weight: 600;*/
        font-family: 'VZ-Bold';
    }

    .about-section {
        position: relative;
        padding-block: 61px 15px;
    }

    .title-about {
        text-align: center;
        padding-bottom: 36px;
    }

}

@media screen and (max-width: 425px){


    .person-image {
        width: 145px;
        height: 145px;
    }

    .iso_swiper .swiper-slide .each-person {
        padding: 19px;
        border-radius: 143px;
        height: 278px;
    }

    .iso_swiper .swiper-slide .each-person::before {
        top: 8px;
        right: -3px;
        transform: scale(0.6);
    }

    .iso_swiper .swiper-slide .each-person::after {
        bottom: -6px;
        left: 27px;
        transform: scale(0.6);
    }

}

@media screen and (max-width: 375px){


}

@media screen and (max-width: 320px){
    .person-image {
        width: 123px;
        height: 123px;
    }

    .iso_swiper .swiper-slide .each-person {
        height: 240px;
    }

}



/*responsive*/