/* Start:/local/templates/agames/css/contacts.css?17422083462639*/
h1{margin-bottom:45px;color:var(--orange);text-align:center;font-size:96px;font-weight:700}
.under-title.black{margin-bottom:20px;color:#4b4b4b;text-align:center;font-size:32px;font-weight:600}
.under-title.green{margin-bottom:55px;color:#29c034;text-align:center;font-size:32px;font-weight:700}
#contacts{margin-bottom:125px}
#contacts h2{margin-bottom:40px;color:#626262;text-align:center;font-size:64px;font-weight:700}
#social .social-btn{max-width:980px;width:100%;height:90px;margin:0 auto 25px;padding:5px 55px;display:flex;align-items:center;justify-content:space-between;border-radius:45px 30px;color:var(--white);transition:opacity var(--trans)}
#social .social-btn:hover{opacity:.7}
#social .social-btn#tg{background-color:#229ed9}
#social .social-btn#wa{background-color:#60d669}
#social .social-btn#vk{background-color:#006ef8}
#social .social-btn#phone{background-color:var(--orange)}
#social .social-btn .icon{max-width:60px;max-height:60px}
#social .social-btn .text{padding:0 20px;display:flex;align-items:center;text-align:center;font-size:28px}
#top-right-circle{
    top:0;
    right:0;
    left: 70%;

}
#top-left-circle{
    /* top:600px;left:0 */
    top: 300px;
    right: 86%;
}
#middle-right-circle{
    top:1000px;
    /* right:0 */
    left: 80%;
}
#aigr-middle{
    /* top:980px;right:20% */
    width: 300px;
    top: 700px;
    left: 65%;
}
.back__img{z-index:-1;transition:opacity var(--trans)}
@media screen and (max-width:1200px){
.back__img{opacity:.5}
}
@media screen and (max-width:998px){
    .back__img{opacity:.3}
    #middle-right-circle{display:none}
    #aigr-middle{
        width: 200px;
        /* top: 1200px; */
        top: unset;
        bottom: 5px;
        right:10%;
    }
    h1{font-size:70px;line-height:1}
    #contacts h2 {font-size: 40px;}
    .under-title.black{font-size:20px}
    .under-title.green{font-size:20px}
    #social .social-btn {
        height: 70px;
        margin-bottom: 15px;
        padding: 5px 20px
    }
    #social .social-btn .text {font-size: 22px;}
    #social .social-btn .icon {
        max-width: 40px;
        max-height: 40px;
    }
    #social .social-btn .right-arrow {
        height: 40px;
    }
    
}
@media screen and (max-width:768px){
    #contacts h2 {font-size: 30px;}
    #social .social-btn {
        height: 60px;
        padding: 5px 20px
    }
    #social .social-btn .text {font-size: 18px;}
    #social .social-btn .icon {
        max-width: 26px;
        max-height: 26px;
    }
    #social .social-btn .right-arrow {
        height: 26px;
    }
}
/* End */


/* Start:/local/templates/agames/components/bitrix/main.feedback/contact-form/style.css?17618081983671*/
#contact {
    margin-bottom: 150px
}

#submit-btn {
    width: fit-content;
    height: 70px;
    margin-top: 45px;
    margin-bottom: 20px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--orange);
    filter: drop-shadow(14px 14px 23px #53000029);
    color: var(--white);
    font-size: 27px;
    font-weight: 600;
    border-top-left-radius: 70px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 70px;
    transition: opacity var(--trans);
    cursor: pointer
}

#submit-btn:hover {
    opacity: .7
}

.form-field {
    position: relative
}

#contact .form-field input[type=text],
#contact .form-field textarea {
    height: 73px;
    padding: 10px 35px;
    border-radius: 45px 30px;
    font-size: 20px;
    font-family: Montserrat, sans-serif;
    border: 2px solid var(--orange)
}

#contact .form-field textarea {
    padding: 20px 35px 10px;
    font-size: 20px;;
    resize: vertical
}

.form-line {
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
    column-gap: 50px
}

.form-checkbox {
    margin-top: 25px;
    display: flex;
    flex-direction: row;
    align-items: center
}

.form-checkbox label {
    font-size: 21px;
    font-weight: 500
}
.form-checkbox a {color: var(--orange);}

.form-field label {
    position: absolute;
    top: 25px;
    left: 40px;
    color: var(--orange);
    font-size: 21px;
    font-weight: 400;
    pointer-events: none;
    transition: all .2s ease
}

.form-field input:focus+label,
.form-field input:not(:placeholder-shown)+label,
.form-field textarea:focus+label,
.form-field textarea:valid+label {
    top: -35px
}

.form-field input::placeholder {
    opacity: 0
}

#agreement {
    height: 1px;
    width: 1px;
    opacity: 0
}

.custom-checkbox input[type=checkbox] {
    display: none
}

.custom-checkbox .checkmark {
    width: 32px;
    height: 32px;
    margin-right: 25px;
    display: inline-block;
    border: 2px solid var(--orange);
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    transition: all .3s ease
}

.custom-checkbox:hover .checkmark {
    border-color: var(--orange)
}

input[type=checkbox]:checked+.custom-checkbox .checkmark::after {
    width: 13px;
    height: 13px;
    content: "";
    position: absolute;
    top: 4px;
    left: 7px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

input[type=checkbox]:checked+.custom-checkbox .checkmark {
    background-color: var(--orange);
    border-color: var(--orange)
}

@media screen and (max-width:998px) {
    .form-line {
        grid-template-columns: 1fr
    }

    .form-field input[type=text],
    .form-field textarea,
    .passw-container {
        width: 100%;
        height: fit-content;
        padding: 5px 35px;
        position: relative
    }

    .form-field .hover-label {
        top: 10px;
        left: 35px;
        font-size: 16px;
        line-height: 1
    }

    .form-line {
        margin: 30px 0;
        row-gap: 20px
    }

    #submit-btn {
        height: 50px;
        margin-top: 20px;
        font-size: 20px
    }

    .form-field input:focus+label,
    .form-field input:not(:placeholder-shown)+label,
    .form-field textarea:focus+label,
    .form-field textarea:valid+label {
        top: -25px
    }

    .form-checkbox label {
        font-size: 14px
    }

    #contact .form-field textarea,
    #contact .form-field input[type=text]{
        font-size: 16px;
    }
    #contact .form-field input[type=text] {
        height: 40px;
    }

}
/* End */
/* /local/templates/agames/css/contacts.css?17422083462639 */
/* /local/templates/agames/components/bitrix/main.feedback/contact-form/style.css?17618081983671 */