@import url(./teamMedia.css);

@media (min-width: 0px) and (max-width: 320px) {
    .contentHeaderServices h2 {
        font-size: 40px;
        font-weight: 700;
        line-height: 44px;
        color: rgba(34, 43, 62, 1);
        text-align: center;
    }
    
    .containerHeaderServices p {
        display: none;
    }

    /* =================================================================Services */
    .containerServices {
        padding: 50px 0px;
        background: linear-gradient(#213A55, #16283B);
    }

    .contentServices1 .row {
        display: flex;
        flex-direction: column;
    }

    .contentServices2 .row {
        display: flex;
        flex-direction: column;
    }

    .headerServices {
        margin-bottom: 50px;
        color: white;
    }

    .headerServices h2 {
        color: rgba(255, 255, 255, 1);
        font-size: 40px;
        font-weight: 700;
        line-height: 44px;
        font-family: 'Gilroy';
        align-items: center;
    }

    .mainServices {
        width: max-content;
        margin-bottom: 50px;
        margin: 0px auto 50px auto;
    }

    .blockServices {
        width: 407px;
        height: 375px;
        padding: 30px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        transition: 1s;
    }

    .blockServices:hover {
        box-shadow: inset 0px -120px 120px -120px #EFC079;
    }





    .blockServices1 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 60.png);
    }

    .blockServices2 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 59.png);
    }

    .blockServices3 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 58.png);
    }

    .blockServices4 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 63.png);
    }

    .blockServices5 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 64.png);
    }

    .blockServices6 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 65.png);
    }

    .blockServices7 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 61.png);
    }

    .blockServices8 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 62.png);
    }

    .blockServices9 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 42.png);
    }

    .textServices {
        width: 100%;
        color: white;
        font-size: 26px;
        border-left: 2px solid white;
        padding: 5px 14px;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }



    .blockServices {
        width: 300px;
        height: 277px;
        padding: 30px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        transition: 1s;
        position: relative;
        /* Обязательно, чтобы позиционировать содержимое внутри блока */
    }

    .blockServices:hover {
        box-shadow: inset 0px -100px 100px -100px #EFC079;
    }

    .blockServices:hover .circle-btn .circle {
        transform: translateX(40px);
        /* Смещение круга вправо */
        background-color: #EFC079;
        /* Заливка круга */
    }

    .blockServices:hover .circle-btn .arrow {
        color: white;
        /* Стрелка становится белой */
    }

    .circle-btn {
        display: none;
        position: absolute;
        /* Позиционируем кнопку внутри блока */
        bottom: 20px;
        /* Расстояние от нижнего края */
        right: 20px;
        /* Расстояние от правого края */
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Разделение круга и стрелки */
        width: 100px;
        height: 100px;
        background: none;
        border: none;
        cursor: pointer;
        outline: none;
        overflow: hidden;
        /* Чтобы анимация не выходила за границы */
    }

    .circle {

        display: none;
        margin: 0px;
        position: relative;
        width: 40px;
        /* Размер круга */
        height: 40px;
        border: 2px solid #EFC079;
        /* Рамка круга */
        border-radius: 50%;
        background: transparent;
        transition: transform 0.4s ease, background-color 0.4s ease;
    }

    .arrow {
        display: none;
        margin: 0;
        position: absolute;
        top: 45%;
        left: 25%;
        transform: translateY(-50%);
        /* Центрирование стрелки */
        font-size: 50px;
        color: #EFC079;
        transition: color 0.4s ease;
        /* Плавное изменение цвета стрелки */
    }

    .contentServices2 {
        display: block;
    }

    .btn-vector .circle {
        display: block;
    }

    /* =================================================================END-Services */
}

/* ============================================================================================================================================================== */
/* ==============================================================================WIDTH576PX====================================================================== */
/* ============================================================================================================================================================== */

@media (min-width: 320px) and (max-width: 576px) {
    .contentHeaderServices h2 {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        color: rgba(34, 43, 62, 1);
        text-align: center;
    }
    
    .containerHeaderServices p {
        display: none;
    }

    .textHeaderServices {
        font-size: 20px;
    }

    /* =================================================================Services */
    .container_services {
        padding: 50px 0px;
        background: linear-gradient(#213A55, #16283B);
    }

    .contentServices1 .row {
        display: flex;
        flex-direction: column;
    }

    .contentServices2 .row {
        display: flex;
        flex-direction: column;
    }

    .headerServices {
        margin-bottom: 50px;
        color: white;
    }

    .headerServices h2 {
        color: rgba(255, 255, 255, 1);
        font-size: 40px;
        font-weight: 700;
        line-height: 44px;
        font-family: 'Gilroy';
        align-items: center;
    }

    .mainServices {
        width: max-content;
        margin-bottom: 50px;
        margin: 0px auto 50px auto;
    }

    .blockServices {
        width: 407px;
        height: 375px;
        padding: 30px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        transition: 1s;
    }

    .blockServices:hover {
        box-shadow: inset 0px -120px 120px -120px #EFC079;
    }





    .blockServices1 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 60.png);
    }

    .blockServices2 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 59.png);
    }

    .blockServices3 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 58.png);
    }

    .blockServices4 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 63.png);
    }

    .blockServices5 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 64.png);
    }

    .blockServices6 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 65.png);
    }

    .blockServices7 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 61.png);
    }

    .blockServices8 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 62.png);
    }

    .blockServices9 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 42.png);
    }

    .textServices {
        width: 100%;
        color: white;
        font-size: 26px;
        border-left: 2px solid white;
        padding: 5px 14px;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }



    .blockServices {
        width: 300px;
        height: 277px;
        padding: 30px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        transition: 1s;
        position: relative;
        /* Обязательно, чтобы позиционировать содержимое внутри блока */
    }

    .blockServices:hover {
        box-shadow: inset 0px -100px 100px -100px #EFC079;
    }

    .blockServices:hover .circle-btn .circle {
        transform: translateX(40px);
        /* Смещение круга вправо */
        background-color: #EFC079;
        /* Заливка круга */
    }

    .blockServices:hover .circle-btn .arrow {
        color: white;
        /* Стрелка становится белой */
    }

    .circle-btn {
        display: none;
        position: absolute;
        /* Позиционируем кнопку внутри блока */
        bottom: 20px;
        /* Расстояние от нижнего края */
        right: 20px;
        /* Расстояние от правого края */
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Разделение круга и стрелки */
        width: 100px;
        height: 100px;
        background: none;
        border: none;
        cursor: pointer;
        outline: none;
        overflow: hidden;
        /* Чтобы анимация не выходила за границы */
    }

    .circle {

        display: none;
        margin: 0px;
        position: relative;
        width: 40px;
        /* Размер круга */
        height: 40px;
        border: 2px solid #EFC079;
        /* Рамка круга */
        border-radius: 50%;
        background: transparent;
        transition: transform 0.4s ease, background-color 0.4s ease;
    }

    .arrow {
        display: none;
        margin: 0;
        position: absolute;
        top: 45%;
        left: 25%;
        transform: translateY(-50%);
        /* Центрирование стрелки */
        font-size: 50px;
        color: #EFC079;
        transition: color 0.4s ease;
        /* Плавное изменение цвета стрелки */
    }

    .contentServices2 {
        display: block;
    }

    .btn-vector .circle {
        display: block;
    }

    /* =================================================================END-Services */
}

/* ============================================================================================================================================================== */
/* ==============================================================================WIDTH768px====================================================================== */
/* ============================================================================================================================================================== */

@media (min-width: 576px) and (max-width: 768px) {
    .contentHeaderServices h2 {
        font-size: 40px;
        font-weight: 600;
        line-height: 44px;
        color: rgba(34, 43, 62, 1);
        text-align: center;
    }
    
    .containerHeaderServices p {
        display: none;
    }

    /* =================================================================Services */
    .container_services {
        padding: 50px 0px;
        background: linear-gradient(#213A55, #16283B);
    }

    .contentServices1 .row {
        display: flex;
        flex-direction: column;
    }

    .contentServices2 .row {
        display: flex;
        flex-direction: column;
    }

    .headerServices {
        margin-bottom: 50px;
        color: white;
    }

    .headerServices h2 {
        color: rgba(255, 255, 255, 1);
        font-size: 40px;
        font-weight: 700;
        line-height: 44px;
        font-family: 'Gilroy';
        align-items: center;
    }

    .mainServices {
        width: max-content;
        margin-bottom: 50px;
        margin: 0px auto 50px auto;
    }

    .blockServices {
        width: 407px;
        height: 375px;
        padding: 30px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        transition: 1s;
    }

    .blockServices:hover {
        box-shadow: inset 0px -120px 120px -120px #EFC079;
    }





    .blockServices1 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 60.png);
    }

    .blockServices2 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 59.png);
    }

    .blockServices3 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 58.png);
    }

    .blockServices4 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 63.png);
    }

    .blockServices5 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 64.png);
    }

    .blockServices6 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 65.png);
    }

    .blockServices7 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 61.png);
    }

    .blockServices8 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 62.png);
    }

    .blockServices9 {
        background: 100% 100% / 100% 100% no-repeat url(../images/services/Group\ 42.png);
    }

    .textServices {
        width: 100%;
        color: white;
        font-size: 26px;
        border-left: 2px solid white;
        padding: 5px 14px;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }



    .blockServices {
        width: 300px;
        height: 277px;
        padding: 30px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        transition: 1s;
        position: relative;
        /* Обязательно, чтобы позиционировать содержимое внутри блока */
    }

    .blockServices:hover {
        box-shadow: inset 0px -100px 100px -100px #EFC079;
    }

    .blockServices:hover .circle-btn .circle {
        transform: translateX(40px);
        /* Смещение круга вправо */
        background-color: #EFC079;
        /* Заливка круга */
    }

    .blockServices:hover .circle-btn .arrow {
        color: white;
        /* Стрелка становится белой */
    }

    .circle-btn {
        display: none;
        position: absolute;
        /* Позиционируем кнопку внутри блока */
        bottom: 20px;
        /* Расстояние от нижнего края */
        right: 20px;
        /* Расстояние от правого края */
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Разделение круга и стрелки */
        width: 100px;
        height: 100px;
        background: none;
        border: none;
        cursor: pointer;
        outline: none;
        overflow: hidden;
        /* Чтобы анимация не выходила за границы */
    }

    .circle {

        display: none;
        margin: 0px;
        position: relative;
        width: 40px;
        /* Размер круга */
        height: 40px;
        border: 2px solid #EFC079;
        /* Рамка круга */
        border-radius: 50%;
        background: transparent;
        transition: transform 0.4s ease, background-color 0.4s ease;
    }

    .arrow {
        display: none;
        margin: 0;
        position: absolute;
        top: 45%;
        left: 25%;
        transform: translateY(-50%);
        /* Центрирование стрелки */
        font-size: 50px;
        color: #EFC079;
        transition: color 0.4s ease;
        /* Плавное изменение цвета стрелки */
    }

    .contentServices2 {
        display: block;
    }

    .btn-vector .circle {
        display: block;
    }

    /* =================================================================END-Services */
}

/* ============================================================================================================================================================== */
/* ==============================================================================WIDTH992px====================================================================== */
/* ============================================================================================================================================================== */

@media (min-width: 768px) and (max-width: 992px) {

}