/* only stylesheet for modal form */
.modal {
    z-index: 2000;
    transition: all 1.2s cubic-bezier(.91, -.01, .3, 1);
}

.main .modal {
    background: linear-gradient(110.69deg, rgb(0 87 137 / 80%) 14.18%, rgb(0 44 81 / 80%) 88.2%);
}

.seo .modal {
    background: radial-gradient(110.17% 305.69% at 0.64% -1.91%, rgb(241 93 254 / 80%) 0%, rgb(136 90 216 / 80%) 63.76%, rgb(38 86 180 / 80%) 100%);
}

.dev .modal {
    background: radial-gradient(85.64% 96.69% at 5.05% 11.35%, rgb(2 134 255 / 80%) 0%, rgb(2 76 187 / 80%) 100%);
}


.soft .modal {
    background: radial-gradient(83.89% 81.42% at 6.22% 0%, rgb(157 128 239 / 80%) 0.15%, rgb(107 55 218 / 80%) 100%);
}

.aso .modal {
    background: radial-gradient(68.16% 86.49% at 12.32% 15.59%, rgb(18 196 98 / 80%) 0%, rgb(0 178 80 / 80%) 100%);
}

.chatbots .modal {
    background: radial-gradient(76.13% 97.65% at 15.7% 23.19%, rgb(85 167 255 / 80%) 0%, rgb(0 105 228 / 80%) 100%);
}

.marketing .modal {
    background: radial-gradient(88.02% 84.38% at 12.54% 9.93%, rgb(255 108 123 / 80%) 0%, rgb(201 43 58 / 80%) 97.4%);
}

.modal-backdrop {
    display: none;
}

.modal .modal-dialog {
    max-width: 400px;
}

.modal .modal-dialog.modal-lg {
    max-width: 800px;
}

.modal .modal-dialog .modal-content {
    background-color: unset;
    box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
}

.modal .modal-dialog .modal-content svg {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border-radius: 10px;
}

.modal .modal-dialog .modal-content rect {
    fill: transparent;
    stroke: #fff;
    stroke-dasharray: 0, 100%;
    stroke-width: 10;

    transition: all 1.5s linear;
}

.modal.show .modal-dialog .modal-content rect {
    stroke-dasharray: 100%, 100%;
    stroke-dashoffset: 48;
    transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: 1.2s;
}

.modal .modal-dialog .modal-content .close-container {
    position: absolute;
    z-index: 1;
    top: 4px;
    right: 20px;
}

.modal .modal-dialog .modal-content .close-container .leftright, .modal .modal-dialog .modal-content .close-container .rightleft {
    background-color: #C4C4C4;
}

.modal .modal-dialog .modal-content .modal-body {
    padding: 40px 50px;

    opacity: 1;
    background-color: #fff;
    border-radius: 10px;

    transition: all 3s cubic-bezier(.91, -.01, .3, 1);
    transition-delay: 1.2s;
}

.modal.show .modal-dialog .modal-content .modal-body {
    opacity: 1;
}

.modal .modal-dialog .modal-content .modal-body .title {
    margin-bottom: 30px;

    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    color: #050808;
}

.modal .modal-dialog .modal-content .modal-body .text {
    margin-bottom: 55px;
    color: #666;
}

.modal .modal-dialog .modal-content .modal-body .text p {
    margin-bottom: 12px;
    text-align: center;
}

.modal .modal-dialog .modal-content .modal-body a {
    font-size: 20px;
    font-weight: 700;
    color: #050808;
}

.modal .modal-body label {
    display: none;
}

.modal .modal-dialog .modal-content .modal-body .agreement a {
    font-size: 14px;
    color: #666;
    text-decoration: underline;
}

.modal .modal-dialog .modal-content .modal-body input, .modal .modal-dialog .modal-content .modal-body textarea {
    outline: 0;
}

.modal .modal-dialog .modal-content .modal-body input[type="text"], .modal .modal-dialog .modal-content .modal-body input[type="email"], .modal .modal-dialog .modal-content .modal-body input[type="tel"], .modal .modal-dialog .modal-content .modal-body textarea, .modal input[type="file"] {
    width: 100%;
    height: 23px;
    margin-bottom: 30px;

    font-size: 14px;
    line-height: 120%;
    color: #666;

    border: none;
    border-bottom: 1px solid #A0A0A0;
}

.modal input[type="file"] {
    cursor: pointer;

    height: unset;

    border: 1px solid #A0A0A0;
    outline: 0;
    box-shadow: none;
}

.modal .modal-dialog .modal-content .modal-body input[type="text"]::placeholder, .modal .modal-dialog .modal-content .modal-body input[type="email"]::placeholder, .modal .modal-dialog .modal-content .modal-body input[type="tel"]::placeholder, .modal .modal-dialog .modal-content .modal-body textarea::placeholder, .modal input[type="file"]::placeholder {
    color: rgb(0 0 0 / 25%);
}

.modal .modal-dialog .modal-content .modal-body textarea {
    min-height: 42px;
}

.modal .modal-dialog .modal-content .modal-body input[type="text"]:focus, .modal .modal-dialog .modal-content .modal-body input[type="email"]:focus, .modal .modal-dialog .modal-content .modal-body input[type="tel"]:focus, .modal .modal-dialog .modal-content .modal-body textarea:focus, .modal input[type="file"]:focus {
    color: #666;
    border-bottom: 1px solid #050808;
    outline: 0;
}

.modal input[type="file"]:focus {
    border: 1px solid #050808;
    box-shadow: none;
}

.modal .modal-dialog .modal-content .modal-body input[type="submit"] {
    width: 240px;
    height: 50px;
    margin-top: 20px;
    padding: 0;

    font-size: 18px;
    font-weight: 600;
    line-height: 100%;
    color: #fff;
    letter-spacing: 0.01em;

    background: linear-gradient(91.24deg, #F9CD00 17.45%, #FFB904 106.48%);
    border: 0;
    border-radius: 25px;
    box-shadow: none;
}

.modal .modal-dialog .modal-content .modal-body input[type="submit"]:hover {
    background: linear-gradient(89.71deg, #FFC700 4.54%, #F3A100 99%);
}

.modal .modal-dialog .modal-content .modal-body input[type="submit"]:active {
    background: #F3A100;
}

.modal .modal-dialog .modal-content .modal-body input[type="submit"]:disabled {
    opacity: 0.5;
}

.modal .modal-dialog .modal-content .modal-body .write {
    height: 150px;
}

.modal .modal-dialog .modal-content .modal-body .write .letter-image {
    top: unset;
    transform: translate(-50%, -20%) scale(0.5);
}

.modal .modal-dialog .modal-content .modal-body .write .animated-mail .body {
    border-color: transparent transparent #f3a100;
}

.modal .modal-dialog .modal-content .modal-body .write .animated-mail .left-fold {
    border-color: transparent transparent transparent #f3a100;
}

.modal .modal-dialog .modal-content .modal-body .write .animated-mail .back-fold {
    background: #f3a100;
}

.modal .modal-dialog .modal-content .modal-body .write .animated-mail .top-fold {
    border-color: #f3a100 transparent transparent;
}

.modal .agreement {
    position: relative;
}

.modal .agreement input {
    cursor: pointer;
    top: 4px;
}

.modal .agreement p, .modal .agreement label {
    cursor: pointer;

    display: block;

    margin-bottom: 5px;
    margin-left: 20px;

    font-size: 14px;
    color: #666;
}

.modal .agreement .red {
    color: #f00;
}

.modal a.as_trigger {
    display: none;
}

@media (min-width: 1200px) {

}

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

}

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

}

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

}

@media (max-width: 575px) {
    .modal .modal-dialog {
        width: 300px;
        margin: .5rem auto;
    }

    .modal .modal-dialog .modal-content .modal-body {
        padding: 40px 20px;
    }
}