@import url(../global/global.css);

/*--------------------contact-us---------------------*/
.contact-us p {
    color: #999BA8;
}

.contact-us .tel-btn {
    background: white;
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    display: table;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    transition: all ease-in-out 0.3s;
}

.contact-us .tel-btn:hover {
    background-color: var(--secondary-color);
    color: white;
    border: none;
}

@media (max-width: 1200px) {
    .contact-us .tel-btn {
        width: 100% !important;
    }
}

.contact-us .tel-btn svg path {
    stroke: var(--secondary-color);
}

.contact-us .tel-btn:hover svg path {
    stroke: white;
}

.contact-us img {
    border-radius: 47px 0 47px 47px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

/*--------------------tels-box---------------------*/
main .box {
    border-radius: 2.5rem;
    background: #fff;
    box-shadow: 0 20px 40px 0 rgba(108, 118, 128, 0.1);
    position: relative;
    padding: 32px 20px 20px 20px;
    height: 100%;
}

main .box .title-box {
    background-color: white;
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    border-radius: 1rem;
    position: absolute;
    top: -23px;
    padding: 10px 20px;
    font-weight: bold;
}

.form-box {
    border-radius: 30px;
    background: var(--secondary-color);
    box-shadow: 0 20px 40px 0 rgba(0, 160, 140, 0.01);
    position: relative;
    padding: 32px 20px 20px 20px;
}

.form-control {
    margin-top: 20px;
    height: 50px;
    border-radius: 10px;
}

.form-control:focus {
    box-shadow: none;
}

@media screen and (max-width: 768px) {
    .contact-text::before {
        content: none !important;
    }
}

/*--------------------forms---------------------*/

form .buttons-container {
    text-align: center;
    margin-top: 30px;
}

form .buttons-container button {
    padding: 6px 30px;
    border-radius: 1.7rem;
    border: 1px solid var(--secondary-color);
    transition: all ease 0.3s;
}

form .buttons-container .submit {
    background-color: white;
    color: var(--secondary-color);
    transition: 0.3s all ease-in-out;
}

form .buttons-container .submit:hover {
    scale: 1.1;
}

form .form-row + .form-row {
    margin-top: 20px;
}

form .form-row textarea {
    border-radius: 10px !important;
    border: 1px solid #c1c1c1;
    background: #fff;
    resize: none;
    box-shadow: none !important;
    min-height: 180px;
}

form .form-row input:active, form .form-row input:focus,
form .form-row textarea:active,
form .form-row textarea:focus {
    border-color: var(--secondary-color);
}

.information-box {
    padding-top: 30px;
}

.information-box .information {
    display: flex;
    line-height: 2.3;
}

.information-box .information .icon {
    line-height: 2.3;
    flex: 0 0 40px;
}

.information-box .information .title {
    font-weight: 500;
    margin-left: 20px;
    flex: 0 0 80px;
    color: var(--secondary-color);
}

.information-box .information + .information {
    margin-top: 20px;
}

.information-box .information .value {
    display: flex;
    flex-direction: column;
    text-align: justify;
}

.information.tel a:hover {
    color: var(--secondary-color);
}

@media (max-width: 576px) {
    .information-box .information .value {
        font-size: 13px;
    }
}

.information-box .information .value a {
    color: inherit;
}

.information-box .information .value a + a {
    margin-top: 10px;
}

.information-box .information .value a:hover {
    color: var(--secondary-color);
}

.information-box svg path {
    fill: var(--secondary-color);
}

.information-box .information.email svg path {
    fill: transparent;
    stroke: var(--secondary-color);
}

.person {
    border-radius: 8px;
    background: var(--secondary-color);
    padding: 80px 10px 40px;
    margin-top: 74px;
    margin-bottom: 23px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 300px;
}

    .person .avatar.no-avatar {
        background-size: 100%;
        background-position: center;
        padding: 17px;
        background-color: #fff;
        border: 5px solid #00a08c;
    }

    .person .avatar {
        border-radius: 50%;
        width: 148px;
        height: 148px;
        overflow: hidden;
        position: absolute;
        top: -74px;
    }

    .person .name {
        height: 69px !important;
    }

    .person .name {
        height: auto !important;
    }

    .person .name {
        color: #fff;
        text-align: center;
        font-size: 1.71em;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
        letter-spacing: -0.96px;
    }

    .person .name {
        height: 75px;
        overflow: hidden;
    }

    .person .position {
        height: 42px !important;
    }

    .person .position {
        color: #000;
        text-align: center;
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: -0.8px;
        margin-top: 17px;
    }

    .person .line {
        color: #000;
        text-align: center;
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.8px;
        margin-top: 16px;
        margin-bottom: 7px;
    }

    .person .value {
        border-radius: 8px;
        background: #fff;
        padding: 7px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        direction: ltr;
        width: 100%;
        margin-top: 7px;
        color: #000;
        font-size: 15px;
    }

    .person .value {
        border-radius: 8px;
        background: #fff;
        padding: 7px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        direction: ltr;
        width: 100%;
        margin-top: 7px;
        color: #000;
        font-size: 15px;
    }

    .person .telegram:before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 18px;
        margin-right: 10px;
        background-color: #009FE3;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' fill='none'%3E%3Cpath d='M1.90891 8.0952L17.2976 1.44458C18.0212 1.13183 18.8054 1.74041 18.682 2.51906L16.5779 15.795C16.448 16.6151 15.4331 16.9287 14.8631 16.325L11.5295 12.7699C10.8523 12.0526 10.7992 10.9488 11.4045 10.1698L13.7232 6.92966C13.8626 6.75029 13.6425 6.51431 13.4538 6.64086L8.60651 9.89269C7.78393 10.4445 6.78586 10.6715 5.80554 10.5297L2.16248 10.0028C1.16449 9.8585 0.98328 8.49523 1.90891 8.0952Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18' fill='none'%3E%3Cpath d='M1.90891 8.0952L17.2976 1.44458C18.0212 1.13183 18.8054 1.74041 18.682 2.51906L16.5779 15.795C16.448 16.6151 15.4331 16.9287 14.8631 16.325L11.5295 12.7699C10.8523 12.0526 10.7992 10.9488 11.4045 10.1698L13.7232 6.92966C13.8626 6.75029 13.6425 6.51431 13.4538 6.64086L8.60651 9.89269C7.78393 10.4445 6.78586 10.6715 5.80554 10.5297L2.16248 10.0028C1.16449 9.8585 0.98328 8.49523 1.90891 8.0952Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
        vertical-align: middle;
        line-height: 0;
    }

    .person .phone:before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: 10px;
        background-color: var(--secondary-color);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 10.5V10C15 8.34315 16.3431 7 18 7M21 10.5V10C21 8.34315 19.6569 7 18 7M18 7C19.1046 7 20 6.10457 20 5C20 3.89543 19.1046 3 18 3C16.8954 3 16 3.89543 16 5C16 6.10457 16.8954 7 18 7ZM21 17.3541V19C21 20.1046 20.1046 21 19 21C10.1634 21 3 13.8366 3 5C3 3.89543 3.89543 3 5 3H6.64593C7.46374 3 8.19916 3.4979 8.50289 4.25722L9.31654 6.29136C9.70285 7.25714 9.28438 8.35781 8.35402 8.82299L8 9C8 9 8.5 11.5 10.5 13.5C12.5 15.5 15 16 15 16L15.177 15.646C15.6422 14.7156 16.7429 14.2971 17.7086 14.6835L19.7428 15.4971C20.5021 15.8008 21 16.5363 21 17.3541Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 10.5V10C15 8.34315 16.3431 7 18 7M21 10.5V10C21 8.34315 19.6569 7 18 7M18 7C19.1046 7 20 6.10457 20 5C20 3.89543 19.1046 3 18 3C16.8954 3 16 3.89543 16 5C16 6.10457 16.8954 7 18 7ZM21 17.3541V19C21 20.1046 20.1046 21 19 21C10.1634 21 3 13.8366 3 5C3 3.89543 3.89543 3 5 3H6.64593C7.46374 3 8.19916 3.4979 8.50289 4.25722L9.31654 6.29136C9.70285 7.25714 9.28438 8.35781 8.35402 8.82299L8 9C8 9 8.5 11.5 10.5 13.5C12.5 15.5 15 16 15 16L15.177 15.646C15.6422 14.7156 16.7429 14.2971 17.7086 14.6835L19.7428 15.4971C20.5021 15.8008 21 16.5363 21 17.3541Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
        vertical-align: middle;
        line-height: 0;
    }

    .person .links {
        display: flex;
        align-content: center;
        justify-content: center;
        position: absolute;
        bottom: -23px;
    }

        .person .links a {
            width: 47px;
            height: 47px;
            border-radius: 50%;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f8f0ce;
            margin: 0 10px;
            transition: background-color ease 0.3s;
            border: 1px solid transparent;
        }

            .person .links a.phone-link:before {
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 7L20.2929 5.70711C20.6834 5.31658 20.6834 4.68342 20.2929 4.29289L19 3M15 7L16.2929 5.70711C16.6834 5.31658 16.6834 4.68342 16.2929 4.29289L15 3M13 5H16M21 17.3541V19C21 20.1046 20.1046 21 19 3C10.1634 21 3 13.8366 3 5C3 3.89543 3.89543 3 5 3H6.64593C7.46374 3 8.19916 3.4979 8.50289 4.25722L9.31654 6.29136C9.70285 7.25714 9.28438 8.35781 8.35402 8.82299L8 9C8 9 8.5 11.5 10.5 13.5C12.5 15.5 15 16 15 16L15.177 15.646C15.6422 14.7156 16.7429 14.2971 17.7086 14.6835L19.7428 15.4971C20.5021 15.8008 21 16.5363 21 17.3541Z' stroke='%23D7AE00' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                line-height: 0;
            }

            .person .links a.telegram-link:before {
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8.5 12H12M2 9.99999H4M2 14H4M9.45352 4.26033L20.6842 9.87225C22.4386 10.7489 22.4386 13.2511 20.6842 14.1278L9.45352 19.7397C7.45607 20.7378 5.30682 18.6853 6.21382 16.6458L7.85018 12.9662C8.12373 12.3511 8.12373 11.6489 7.85018 11.0338L6.21382 7.35425C5.30682 5.31474 7.45607 3.26221 9.45352 4.26033Z' stroke='%23D7AE00' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
                line-height: 0;
            }