@font-face {
    font-display: block;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('/font/poppins-v20-latin-300.woff2?v=1') format('woff2'),
         url('/font/poppins-v20-latin-300.woff?v=1') format('woff');
}

@font-face {
    font-display: block;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('/font/poppins-v20-latin-700.woff2?v=1') format('woff2'),
         url('/font/poppins-v20-latin-700.woff?v=1') format('woff');
}

@font-face {
    font-family: 'icons';
    font-style: normal;
    font-weight: normal;
    font-display: block;
    src: url('/font/icons.woff2?v=1') format('woff2'),
         url('/font/icons.woff?v=1') format('woff');
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-lightbulb:before {
    content: "\e923";
}
.icon-lock:before {
    content: "\e900";
}
.icon-key:before {
    content: "\e901";
}
.icon-face-frown:before {
    content: "\e902";
}
.icon-face-meh:before {
    content: "\e903";
}
.icon-face-laugh:before {
    content: "\e904";
}
.icon-spinner:before {
    content: "\e905";
}
.icon-spinner {
    animation-name: spin;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.icon-magnifying-glass:before {
    content: "\e906";
}
.icon-chevron-left:before {
    content: "\e907";
}
.icon-battery-three-quarters:before {
    content: "\e908";
}
.icon-signal:before {
    content: "\e909";
}
.icon-user-secret:before {
    content: "\e90a";
}
.icon-paper-plane:before {
    content: "\e90b";
}
.icon-circle-user:before {
    content: "\e90c";
}
.icon-check:before {
    content: "\e90d";
}
.icon-bars:before {
    content: "\e90e";
}
.icon-xmark:before {
    content: "\e90f";
}
.icon-envelope:before {
    content: "\e910";
}
.icon-credit-card:before {
    content: "\e911";
}
.icon-box-open:before {
    content: "\e912";
}
.icon-fire-flame-curved:before {
    content: "\e913";
}
.icon-masks-theater:before {
    content: "\e914";
}
.icon-building:before {
    content: "\e915";
}
.icon-shapes:before {
    content: "\e916";
}
.icon-graduation-cap:before {
    content: "\e917";
}
.icon-poo:before {
    content: "\e918";
}
.icon-triangle-exclamation:before {
    content: "\e919";
}
.icon-wand-magic-sparkles:before {
    content: "\e91a";
}
.icon-bullhorn:before {
    content: "\e91b";
}
.icon-circle-info:before {
    content: "\e91c";
}
.icon-arrow-right-from-bracket:before {
    content: "\e91d";
}
.icon-coins:before {
    content: "\e91e";
}
.icon-circle-exclamation:before {
    content: "\e91f";
}
.icon-copy:before {
    content: "\e920";
}
.icon-user-shield:before {
    content: "\e921";
}
.icon-unlock:before {
    content: "\e922";
}





* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 115px;
    height: 100%;
}
body {
    margin: 0;
    font-family: Poppins,sans-serif;
    font-weight: 300;
    line-height: 135%;
    color: #5A5959;
    background-color: #f8f7f6;
    min-height: 100%;
    flex-direction: column;
    position: relative;
}
body:after {
    content: "";
    background-image: url(/img/bg.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    position: fixed;
    bottom: -45px;
    right: 0;
    width: 460px;
    height: 100%;
}
body.locked {
    overflow: hidden;
}




h1 {
    font-size: 32px;
}
h2 {
    font-size: 30px;
}
h1, h2 {
    padding: 0 20px;
    text-align: center;
    text-transform: uppercase;
}
h3, h4, h5 {
    font-weight: normal;
    margin-bottom: 15px;
}
h1, h2, h3, h4, h5 {
    margin-top: 0;
    line-height: 135%;
}
h1 > span,
h2 > span {
    color: #e4660d;
}




p {
    margin-bottom: 0;
    overflow-wrap: break-word;
    text-align: justify;
    hyphens: auto;
}
p:first-of-type {
    margin-top: 0;
}
p ~ form {
    margin-top: 20px;
}
p ~ h3,
ul ~ h3 {
    margin-top: 35px;
}
a,
.btn.link {
    color: #30659a;
    transition: text-decoration-color 0.3s ease;
    text-decoration: underline;
    text-decoration-color: #30659a;
}
body:not(.touch) a:hover,
body:not(.touch) .btn.link:hover {
    text-decoration-color: transparent;
    background-color: transparent;
}
.box .btn.link {
    color: #3179c1;
}




input, textarea, select {
    outline: 0;
    font-family: 'Poppins', sans-serif;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: 300;
    color: #5A5959;
    outline: 1px solid #ededed;
    border: 2px dashed transparent;
    background-color: #fdfdfd;
    transition: border 0.6s ease;
    border-radius: 12px;
    width: 100%;
}
input.error,
textarea.error,
select.error {
    border: 2px dashed #ea3030;
}
input[type="checkbox"].error  {
    border: 1px dashed #ea3030;
}
textarea {
    min-height: 180px;
    resize: none;
    min-width: 100%;
}




.checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 19px;
}
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    display: grid;
    padding: 3px;
    width: auto;
    border-radius: 0;
    border-width: 1px;
}
input[type="checkbox"]::before {
    content: "";
    transform: scale(0);
    transform-origin: center;
    transition: 0.1s transform ease-in-out;
    box-shadow: inset 1em 1em #339042;
    width: 0.6em;
    height: 0.6em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="checkbox"]:checked::before {
    transform: scale(1);
}
.checkbox label {
    cursor: pointer;
}



.inputGroup {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    gap: 0 !important;
    max-width: 100%;
    width: 420px;
}
.inputGroup > input {
    border-radius: 6px 0 0 6px;
    cursor: copy;
}
.inputGroup > span {
    border-radius: 0 6px 6px 0;
    cursor: copy;
}



button.btn {
    min-width: 220px;
    cursor: pointer;
    width: 100%;
}
a.btn {
    width: 100%;
    text-decoration: none;
    color: inherit;
}
.btn {
    padding: 15px 20px;
    display: flex;
    font-size: 21px;
    line-height: normal;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 6px;
    gap: 12px;
    width: max-content;
    max-width: 100%;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    font-family: 'Poppins', sans-serif;
    border: 0;
    background-color: #F0F0F0;
    font-weight: 300;
    margin: 0 auto;
}
.btn:disabled {
    opacity: .6;
    cursor: default;
    pointer-events: none;
}
body:not(.touch) .btn:hover,
.btn.selected {
    background-color: #d3e8d7;
}
.btn.link {
    display: inline;
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    width: auto;
    line-height: 100%;
    text-decoration: underline;
    min-width: auto;
}
.btn.info,
.btn.green,
.btn.orange,
.btn.red {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.btn.info {
    background-color: rgba(61, 127, 174, 0.8);
    color: #fdfdfd;
}
.btn.green {
    background-color: rgba(61, 174, 82, 0.8);
    color: #fdfdfd;
}
.btn.orange {
    background-color: rgba(223, 140, 42, 0.8);
    color: #fdfdfd;
}
.btn.red {
    background-color: rgba(174, 61, 61, 0.8);
    color: #fdfdfd;
}
.btnGroup {
    gap: 0 !important;
    margin: 20px 0;
    display: flex;
    justify-content: center;
}
.list ~ .btnGroup.small {
    margin-top: 40px;
}
.btnGroup.small {
    max-width: 100%;
    margin: 20px auto 0 auto;
}
.btnGroup.small ~ div {
    margin-top: 20px;
}
.btnGroup > a,
.btnGroup > button {
    border-radius: 6px 0 0 6px;
    border-right: 0;
}
.btnGroup > span {
    border-radius: 0 6px 6px 0;
    border-left: 0;
    font-size: 30px;
    padding: 0;
    min-width: 95px;
}
body:not(.touch) .btn.info:hover,
.btnGroup > span.info {
    background-color: rgba(61, 127, 174, 1);
}
body:not(.touch) .btn.green:hover,
.btnGroup > span.green {
    background-color: rgba(61, 174, 82, 1);
}
body:not(.touch) .btn.orange:hover,
.btnGroup > span.orange {
    background-color: rgba(223, 140, 42, 1);
}
body:not(.touch) .btn.red:hover,
.btnGroup > span.red {
    background-color: rgba(174, 61, 61, 1);
}




.box {
    padding: 20px;
    border: 2px solid #f1f1f1;
    background-color: #f8f8f8;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.box > div {
    display: flex;
    position: relative;
    gap: 15px;
}
.box .field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.box .field > label {
    display: block;
    margin-bottom: 6px;
    margin-left: 3px;
}




.list {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,auto));
    grid-gap: 15px;
    position: relative;
    width: 100%;
}
.list .box {
    padding: 0;
    gap: 0;
    margin-top: 0;
    overflow: hidden;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}
.list .box > span,
.list .box > a {
    margin: 0;
    padding: 12px 20px;
    background-color: #fdfdfd;
    font-weight: normal;
    font-size: 18px;
    color: inherit;
    text-decoration: none;
}
.list .box > span > i,
.list .box > a > i {
    margin-right: 8px;
}
.list .box > p {
    margin: 14px 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-all;
    overflow: hidden;
    font-size: 15px;
}
.list .btn {
    border-radius: 0 0 9px 9px;
    padding: 10px 30px;
    font-size: 17px;
}




.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block!important;
}




#popup {
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}




header {
    top: 0;
    position: fixed;
    background-color: #fdfdfd;
    background-image: url(/img/bg-body.svg);
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    border-bottom: 4px solid #e4660d;
    transition: transform 0.3s;
    z-index: 9;
}
header.hide {
    transform: translateY(-115px);
}
header ~ .con {
    display: flex;
    flex-direction: column;
    padding-top: 90px;
    gap: 100px;
    flex: 1;
}
header > div {
    display: flex;
    gap: 50px;
    justify-content: space-between;
    align-items: center;
}
header > div > a {
    margin-top: 51px;
}
header > div > nav {
    display: flex;
}
.menuMob {
    display: none;
}
.menu {
    display: flex;
    align-items: center;
    gap: 25px;
}
.menu:not(.box) .btn {
    width: auto;
    min-width: inherit;
    padding: 8px 12px;
    font-size: 16px;
}




header ~ .usp {
    margin-top: 80px;
    background-color: #fdfdfd;
    z-index: 2;
}
.usp ul {
    display: flex;
    gap: 35px;
    list-style: none;
    height: 41px;
    margin: 0;
    padding: 10px 0;
    justify-content: center;
}
.usp ul > li {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.usp ul > li > i {
    color: #339042;
}




.ex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    gap: 0 1px;
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    background: transparent;
    border: 0;
}
.ex > .title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: hsla(0,0%,0%,.05);
    padding: 18px;
    cursor: pointer;
    transition: background ease .3s;
    font-size: 17px;
    flex: 1;
}
.ex > .title:first-of-type {
    border-left: 3px solid #f2f2f2;
}
.ex > .title:last-of-type {
    border-right: 3px solid #f2f2f2;
}
.ex > .title i {
    margin-top: -3px;
}
.ex > div {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    padding: 50px 30px;
    background-color: #fdfdfd;
    border: 3px solid #f2f2f2;
    border-radius: 0 0 13px 13px;
    background-image: url(/img/bg-body.svg);
    background-size: 145px;
    border-top: none;
}
.ex > span.active {
    background-color: #fdfdfd;
}






.con {
    width: 1260px;
    max-width: 100%;
    margin: 0 auto;
    z-index: 2;
}




.flex {
    display: flex;
    gap: 40px;
}
.flex > div {
    width: 100%;
}
.flexCol {
    flex-direction: column;
}
.fade {
    transition: opacity 0.4s ease;
    flex-direction: column;
}
.fade.hide {
    opacity: 0;
}




section {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
section > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
section > div > div {
    background-color: #fdfdfd;
    border: 3px solid #f4f4f4;
    border-radius: 20px;
    padding: 50px 30px;
    width: 100%;
    max-width: 1260px;
    background-image: url(/img/bg-body.svg);
    background-size: 145px;
}




.boxE {
    display: flex;
    align-items: center;
    border-radius: 6px;
    background-color: #fdfdfd;
    margin: 25px 0;
    gap: 0;
}
.boxE > span {
    font-size: 32px;
    max-width: 115px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.boxE > p {
    padding: 12px;
}
.boxE.tip {
    border: 2px dashed #efce83;
}
.boxE.tip:not(.xSmall) > p {
    background-color: #fff8ea;
}
.boxE.info {
    border: 2px dashed #83ceef;
}
.boxE.info:not(.xSmall) > p {
    background-color: #f4faff;
}
.boxE.small {
    max-width: 570px;
    margin: 0 auto;
    gap: 0;
}
.boxE.small > span {
    max-width: 80px;
}
.boxE.xSmall {
    border-radius: 0;
    font-size: 13px;
    margin: 0;
}
.boxE.xSmall > p {
    padding: 3px 12px;
}




.con .usp {
    grid-template-columns: repeat(auto-fit,minmax(250px,auto));
    padding: 0 30px;
}
.con .usp > .boxE {
    padding: 20px;
    border: 2px dashed #aec0d4;
    background-image: url(/img/bg-body.svg);
    justify-content: center;
    background-size: 145px;
    margin: 0;
    gap: 20px;
}
.con .usp > .boxE > p {
    padding: 0;
    word-break: break-word;
    text-align: center;
    font-size: 20px;
}
.con .usp > .boxE > span {
    max-width: max-content !important;
}




.moreContent {
    overflow: hidden;
    padding-bottom: 30px;
}
.btn.link.readMore {
    width: 100%;
    position: relative;
    padding-top: 4px;
    font-size: 14px;
}
.btn.link.readMore:before {
    content: "";
    background: linear-gradient(to bottom, transparent 0, #fdfdfd 90%);
    position: absolute;
    height: 30px;
    width: 100%;
    top: -30px;
    left: 0;
}




.createSms .charCount {
    position: absolute;
    bottom: 2px;
    left: 2px;
    padding: 10px 20px;
    font-size: 14px;
    background-color: #F1F7FB;
    border: 2px solid transparent;
    width: calc(100% - 4px);
    display: flex;
    gap: 50px;
    justify-content: space-between;
    border-radius: 0 0 10px 10px;
    transition: opacity .6s ease;
    opacity: 0;
}
.createSms textarea {
    padding-bottom: 39px;
}
.mobile {
    background: #fdfdfd;
    padding: 18px 15px;
    max-width: 350px;
    height: auto;
    box-shadow: 0 0 20px #e2e2e2;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}
.mobile .overlay {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}
.top {
    width: 140px;
    height: 25px;
    background: white;
    position: absolute;
    border-radius: 0 0 12px 12px;
    z-index: 2;
}
.speaker {
    width: 60px;
    height: 5px;
    background: #d2d2d2;
    display: block;
    margin: auto;
    margin-top: 5px;
    border-radius: 20px;
}
.camera {
    height: 7px;
    width: 7px;
    background: #d2d2d2;
    border-radius: 100%;
    margin-left: 70px;
}
.screen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    background: #f9f9f9;
    border-radius: 12px;
    overflow-y: auto;
    width: 100%;
}
.screen > div {
    padding: 0 10px;
}
.screen .bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 4px 0 16px;
    font-size: 14px;
}
.screen .bar .icons {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 13px;
}
.screen .app {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #f4f3f3;
    padding-top: 8px;
    padding-bottom: 8px;
}
.screen .back {
    margin-left: 10px;
    margin-top: 2px;
}
.screen .user {
    display: flex;
    align-items: center;
    gap: 12px;
}
.screen .user > i {
    font-size: 45px;
    color: #dbdbdb;
}
.screen .chatCon {
    height: 100%;
    background: #f9f9f9;
    background-image: url(/img/mobile-phone-bg.webp);
    background-size: 450px;
    min-height: 160px;
}
.screen .chatCon > .message {
    position: relative;
    margin: 10px;
    margin-left: 40px;
    background-color: #d9f6c0;
    border-radius: 5px 0px 5px 5px;
    word-break: break-word;
    padding: 8px 12px;
    font-size: 14px;
}
.screen .chatCon > .message:after {
    border-width: 0px 0 10px 10px;
    border-color: transparent transparent transparent #d9f6c0;
    top: 0;
    right: -10px;
}
.screen .chatCon > .message:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
}
#dateTimeCon {
    height: 0px;
    overflow: hidden;
    padding: 1px;
    transition: height 0.3s ease;
}
#dateTimeCon > input {
    margin-top: 15px;
}




footer {
    margin-top: 200px;
    background-color: #fdfdfd;
    display: flex;
    border-top: 3px solid #ebebeb;
    padding: 20px 0;
    z-index: 9;
}
footer > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
}
footer > div > div {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 12px;
}



@media screen and (min-width:620px) {
    .moreContent {
        max-height: 100% !important;
        padding-bottom: 0;
    }
    .btn.link.readMore {
        display: none;
    }
}
@media screen and (max-width:1880px) {
    body:after {
        display: none;
    }
}
@media screen and (max-width:1260px) {
    header,
    footer {
        padding-left: 20px;
        padding-right: 20px;
    }
    section > div > div,
    .ex > div {
        border-right: none;
        border-left: none;
        border-radius: 0;
    }
    .ex {
        border-radius: 0;
    }
    .ex > .title {
        border: none !important;
    }
}
@media screen and (max-width:1120px) {
    .usp ul > li:last-of-type {
        display: none;
    }
}
@media screen and (max-width:920px) {
    .flex {
        flex-direction: column;
    }
    .flex > div {
        max-width: 100%;
    }
    .usp ul > li {
        position: absolute;
        transition: opacity .8s ease;
    }
    .usp ul > li + li {
        opacity: 0;
        display: flex !important;
    }
    .ex > .title:nth-last-child(2) {
        display: none;
    }
}
@media screen and (min-width:801px) {
    header .menuMob.btn {
        display: none;
    }
}
@media screen and (max-width:800px) {
    header .menuMob.btn {
        display: flex;
        font-size: 36px;
        color: inherit;
        text-decoration: none;
    }
    header .menu {
        display: none;
    }
}
@media screen and (max-width:730px) {
    .boxE > span {
        max-width: 65px !important;
    }
    .ex > .title:nth-last-child(3) {
        display: none;
    }
}
@media screen and (max-width:630px) {
    section > div > div,
    .ex > div {
        padding: 30px 15px;
    }
}
@media screen and (max-width:600px) {
    .box > .fields {
        flex-direction: column;
    }
    header ~ .con {
        padding-top: 45px;
        gap: 80px;
    }
}
@media screen and (max-width:520px) {
    .btnGroup > span {
        min-width: 80px;
    }
    .ex > .title:nth-last-child(4) {
        display: none;
    }
}
@media screen and (max-width:460px) {
    header > div > a {
        margin-top: 7px;
    }
    header > div > a img {
        max-width: 195px;
    }
}
@media screen and (max-width:420px) {
    form.box,
    .status .box {
        width: calc(100% + 30px);
        margin-left: -15px;
        border-right: none;
        border-left: none;
        border-radius: 0;
        border: none;
    }
    .ex {
        flex-direction: column;
        gap: 1px 0;
    }
    .ex>.title {
        display: flex !important;
    }
}
@media (max-width:319px) {
    body {
        min-width: 320px;
    }
}




body {
    display: flex!important
};