@font-face {
    font-family: 'Furore';
    src: local('Furore'), url('./fonts/Furore.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

ul {
    list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
    margin: 0;
    padding: 0;
}

body {
    max-width: 1920px;
    margin: 0 auto;
    background: #001324 !important;
}

a,
a:visited {
    transition: 0.5s all ease;
    text-decoration: none;
    color: inherit;
}

body {
    background-color: #001a30;
}
main{
    color: #fff;
    font-family: 'Furore', sans-serif;

}
.jura-font {
    font-family: 'Jura', sans-serif;
}

.container {
    color: #ffffff;
    min-width: 320px;
    max-width: 1530px;
    margin: 0 auto;
}

.p60-0 {
    padding: 60px 0;
}

.row {
    --bs-gutter-x: 0 !important;
}

/* COLORS | GRADIENTS | OPACITY */
.turquise-gradient {
    background: #97fae2;
    background: linear-gradient(to bottom, #97fae2 0%, #11e5b3 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.turquise {
    color: #11e5b3;
}

.purple-gradient {
    background: #fcdaff;
    background: linear-gradient(to bottom, #fcdaff -25%, #cf52fe 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.light-purple-gradient {
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #cf52fe 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.translucenced {
    opacity: 0.75;
}

.ultra-translucenced {
    opacity: 0.5;
}

.heading-bg {
    filter: blur(4.1px);
    z-index: -3;
    position: absolute;
    top: 20%;
    left: 10%;
    transform: scale(1.7);
}

.heading-shadow {
    position: absolute;
    filter: blur(4.1px);
    z-index: -1;
    transform: scale(1.7);
    width: 100%;
    bottom: -10%;
}

.heading {
    text-transform: uppercase;
    font-size: 36px;
    line-height: 39.6px;
}
.heading-additional-text {
    font-weight: 500;
    display: flex;
    flex-direction: column;
    position: relative;
}

.additional-heading-text-left-bg {
    position: absolute;
    left: -10%;
    z-index: -1;
    top: -10%;
}

.hor-line-img {
    position: relative;
}

.hor-line-img.left {
    left: -40%;
}

.hor-line-img.right {
    transform: rotate(180deg);
    right: 3%;
    width: 120%;
}

.users-preview {
    width: 72px;
    height: 32px;
}

.heading-additional-text .title {
    font-size: 20px;
    font-family: 'Furore', sans-serif;
}

.heading-additional-text .stat {
    font-size: 32px !important;
}

.heading-additional-text .smaller-text {
    font-size: 14px;
    line-height: 16.8px;
}

.phones {
    z-index: -2;
    height: 258px;
    max-width: 660px;
}

.btn {
    padding: 16px 37px;

    border-radius: 0;
    border: solid 2px #11e5b3;
    background: rgb(0, 137, 105);
    background: linear-gradient(
            0deg,
            rgba(0, 137, 105, 1) 0%,
            rgba(12, 30, 48, 0) 100%
    );
    display: flex;
    align-items: center;
    font-family: 'Jura', sans-serif;
    color: #11e5b3;
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
    gap: 10px;

    transition: all 0.5s ease;
}

.btn:hover {
    background-color: #11e5b3;
    color: #053245;
}

.basic-btn {
    /* background-color: transparent; */
    position: absolute;
    bottom: -32px;
}

.btn img {
    width: 19px !important;
    height: 14px !important;
}

/*.benefits-section {*/
/*    background-image: url('../images/support-section-bg-mobile.png');*/
/*    background-size: cover;*/
/*    background-repeat: no-repeat;*/
/*}*/

.benefits-section > .container {
    backdrop-filter: blur(2px);
}

.card {
    position: relative;
    display: flex;

    align-items: center;
    flex-direction: column;
    gap: 1rem;

    text-align: center;

    border-radius: 2px;
    border: solid 2px #1c8277;

    padding: 16px 20px;

    background: rgb(2, 22, 39);
    background: linear-gradient(
            0deg,
            rgba(2, 22, 39, 1) 70%,
            rgba(2, 22, 39, 0) 100%
    );
    /* !UPD: вообще в дизайне 0% а не 70, но с 0% там все прозрачно и выглядит вообще не так.. */

    cursor: pointer;
    box-shadow: inset 0px 0px 36px 8px #51ecc950;
}

.border-overlaps-wrapper {
    width: max-content;
    height: max-content;
    position: absolute;
    left: -3px;
}

.border-overlaps-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.border-overlap {
    background-color: #1c8277;
    height: 21px;
    width: 4px;
}

.border-overlap.longer {
    height: 68px;
}

.card img {
    width: 36px;
    height: 36px;
}

.card .title {
    font-size: 20px;
    line-height: 24px;
}

.card .description {
    font-weight: 500;
    font-size: 16px;
    line-height: 20.8px;
}

.section-text > h3 {
    font-size: 24px;
    line-height: 28.8px;
}

.section-text > p {
    font-size: 16px;
    line-height: 22.4px;
}

.laptop-section {
    background-image: url('../images/laptop-section-bg.png');
    background-size: cover;
    background-position: center;
}

/*.service-card-section {*/
/*    background-image: url('../images/service-card-section-bg.png');*/
/*    background-size: 100%;*/
/*    background-position-x: left;*/
/*    background-position-y: 30%;*/
/*    background-repeat: no-repeat;*/
/*}*/

.security-section {
    background-position: center bottom;
}

.service-card {
    display: flex;
    border-radius: 2px;
    border: solid 2px #1c8277;
    padding: 20px 20px 0 20px;
    background: rgb(5, 50, 69);
    background: linear-gradient(
            0deg,
            rgba(5, 50, 69, 0) 40%,
            rgba(5, 50, 69, 1) 100%
    );
    position: relative;
    backdrop-filter: blur(5px);
}

.platform-row {
    display: flex;
    gap: 20px;
}

.platform-row img {
    height: 40.15px;
}

.building-img-wrapper {
    margin-top: 28px;
    margin-right: -24px;
    position: relative;
}

.building-img-wrapper > img {
    width: 100%;
}

.service-card .border-overlaps-wrapper {
    bottom: -3px;
    right: 5%;
    left: unset;
}

.service-card .border-overlaps-container {
    flex-direction: row;
}

.service-card .border-overlap {
    width: 52px;
    height: 4px;
}

.service-card .border-overlap.longer {
    width: 180px;
}

.agreement-card {
    transition: 0.5s all ease-in-out;
    text-align: left;
    justify-content: start;
    align-items: start;
}

.agreement-card .border-overlaps-wrapper {
    opacity: 0;
}

.agreement-card.hovered .border-overlaps-wrapper {
    opacity: 1;
}

.agreement-card:hover,
.account-type-card:hover {
    background: rgb(28, 130, 119);
    background: linear-gradient(
            0deg,
            rgba(28, 130, 119, 0) 0%,
            rgba(28, 130, 119, 0.75) 50%
    );
}

.agreement-card.hovered img {
    width: 36px;
    height: 36px;
}

.agreement-card .title {
    font-size: 18px;
    line-height: 21.6px;
}

.markets-bg {
    position: absolute;
    z-index: -1;
    right: 0;
    transform: scale(3);
}

.markets-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.markets-card .header {
    background: rgb(1, 22, 45);
    background: linear-gradient(
            90deg,
            rgba(1, 22, 45, 1) 0%,
            rgba(107, 13, 195, 1) 100%
    );
    display: flex;
    gap: 10px;
    padding: 16px 0;
    align-items: center;
}

.markets-card .header img {
    height: 20px;
}

.markets-card .card-title {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    font-size: 18px;
}

.markets-card .content {
    font-size: 16px;
    line-height: 20.8px;
    padding: 20px;
    height: 100%;
}

.markets-card .content,
.markets-card .header {
    border-image: linear-gradient(to right, #01152b, #6606b0) 1;
    border-style: solid;
    border-width: 2px;
}

.markets-card .border {
    border: none !important;
    border-radius: 2px;
    overflow: hidden;
}

.markets-card .border:last-child {
    flex-grow: 1;
}

/* ! ACCOUNT TYPES SECTION HERE !!!!!! */
.account-type-cards-wrapper {
    align-items: stretch;
    display: flex;
}

.account-types-wrapper {
    display: flex;
    gap: 2px;
}

.account-benefits-card {
    display: flex;
    justify-content: center;
    padding: 0 12px;
    align-items: start;
    flex-direction: column;
    border: 1px solid #1c827775;
    font-family: 'Jura', sans-serif;
    font-size: 10px;
    gap: 20px;
    position: relative;
}

.account-benefits-card > ul:first-child {
    margin-top: 10px;
}

.account-benefits-card > ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.account-benefit:not(:last-of-type) {
    border-bottom: 1px solid #053245;
}

.account-benefit {
    text-align: left;
    padding-bottom: 6px;
}

.account-type-cards-wrapper .btn {
    padding: 12px;
    min-width: 170px;
    position: static;
}

.account-type-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 20px 16px;
    border: 2px solid #1c8277;

    background: rgb(2, 22, 39);
    background: linear-gradient(
            0deg,
            rgba(2, 22, 39, 0) 16%,
            rgba(2, 22, 39, 1) 80%
    );
    position: relative;
}

.account-type-card:hover {
    cursor: pointer;
}

.account-type-card .border-overlaps-wrapper {
    opacity: 0;
    top: 10%;
}

.account-type-card:hover .border-overlaps-wrapper {
    opacity: 1;
}

.account-type-card.desktop {
    display: none;
}

.account-type-card .header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 24px;
    background: transparent;
}

.account-type-card .gradient-line {
    height: 2px;
    background: rgb(17, 229, 179);
    background: linear-gradient(
            90deg,
            rgba(17, 229, 179, 0) 0%,
            rgba(17, 229, 179, 1) 50%,
            rgba(17, 229, 179, 0) 100%
    );
}

.account-type-card .plan {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 14px;
}

.benefits-availability {
    display: flex;
    flex-direction: column;

    align-items: center;
    margin: 24px 0;
    gap: 24px;
}

.benefits-availability img {
    width: 20px;
    height: 20px;
}

.benefits-availability img:first-child {
    margin-top: 12px;
}

.account-type-bg {
    position: absolute;
    z-index: -1;
    width: 140%;
    left: -18%;
    top: 16%;
    filter: blur(4px);
}

.account-type-section .container {
    backdrop-filter: blur(5px);
}

/* ! аааааа сука слайдер  */
.slider-btns-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px;
    gap: 24px;
}

.slider-btns-wrapper img {
    width: 22px;
    height: 16px;
}

.slides-count {
    min-width: 30px;
    text-align: center;
}

.slider-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.slide {
    display: none;
}

.shown {
    display: flex;
}

.faq-bg {
    position: absolute;
    z-index: -1;
    background: #001a30;
    width: 100%;
    height: 100%;
    transform: scale(1.1);
    bottom: 0;
    top: 4%;
}

.faq-li {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-header {
    padding: 24px;
    align-items: start;
    text-align: left;
    border: 2px solid #11e5b3;
    position: relative;
    cursor: initial !important;
}

.faq-header .question-number {
    font-size: 12px;
    line-height: 14.4px;
}

.faq-arrow {
    width: 18px !important;
    height: 20px !important;
    transition: 0.5s all ease-in-out;
    cursor: pointer;
    transform: rotate(90deg);
}

.faq-arrow__revealed {
    transform: rotate(0deg);
}

.faq-body,
.faq-header .question {
    font-weight: 300;
    font-size: 16px;
    line-height: 19.2px;
}

.faq-body {
    padding: 20px;
    border: solid 2px #053245;
    position: relative;
    /* clip-path: polygon(0 0, 100% 0, 100% 90%, 96% 100%, 0 100%); */
    border-bottom-right-radius: 12px;
    visibility: visible;
    transition: 0.5s all ease;
}

.faq-body-wrapper {
    position: relative;
    transition: max-height 0.5s ease-in-out;
}

.faq-body-wrapper__hidden .faq-body {
    visibility: hidden;
    transform: translateY(-100%);
    opacity: 0;
}

.faq-body-wrapper__hidden {
    visibility: hidden;
    max-height: 0;
}

.faq-body-wrapper__shown {
    visibility: visible;
    max-height: fit-content;
}

.faq-body-wrapper__hidden::before {
    visibility: hidden;
}

.faq-header::after {
    content: '';
    position: absolute;
    right: -2px;
    bottom: -10px;
    width: 100px;
    height: 10px;
    background: #11e5b3;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
    visibility: visible;
}

.faq-li:has(.faq-body-wrapper__hidden) .faq-header::after {
    visibility: hidden;
}

.faq-body::before {
    content: '';
    position: absolute;
    left: 0px;
    bottom: -2.6px;
    background: #053245;
    height: 4px;
    width: 100px;
}

/* .faq-body::after {
  content: '';
  position: absolute;
  right: 0%;
  bottom: -1.2%;
  content: '';
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  width: 30px;
  height: 30px;
  border-bottom: 4px solid #053245;
  transform: rotate(-46deg);
} */

.contact-card img {
    width: 20px;
    height: 20px;
}

.contact-card .description {
    transition: 0.5s all ease;
    font-size: 18px;
    line-height: 21.6px;
}

.contact-card:hover .description {
    color: #97fae2;
}

/*.support-section {*/
/*    background-image: url('../images/support-section-bg-mobile.png');*/
/*    background-repeat: no-repeat;*/
/*    background-position-y: bottom;*/
/*}*/

.contact-form {
    text-align: left;
    padding: 20px;
    gap: 20px;
}

.form-title {
    font-size: 24px;
    line-height: 28.8px;
}

.form-description {
    font-weight: 600;
    line-height: 22.4px;
}

.inputs-wrapper {
    display: flex;
    gap: 12px;
}

.inputs-wrapper input {
    padding: 15px 10.5px;
    background: #053245;
    outline: none;
    border: none;
    font-family: 'Jura', sans-serif;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 19.2px;
}

.inputs-wrapper input::placeholder {
    opacity: 0.75;
    color: #fff;
}

.contact-form .btn-wrapper {
    display: flex;
    gap: 12px;
}

.form-subdescription {
    font-size: 10px;
    line-height: 12px;
}

.contact-section-bg {
    position: absolute;
    top: 50%;
    left: -6%;
    filter: blur(6px);
    width: 120%;
    bottom: -35%;
    z-index: -1;
}

@media (min-width: 576px) {
}

@media (min-width: 768px) {
    .contact-card {
        width: 100%;
        max-width: 31%;
    }
}

@media (min-width: 992px) {
    .markets-card {
        max-width: 49%;
    }
    /*.benefits-section {*/
    /*    background-image: url('../images/support-section-bg-left.png'),*/
    /*    url('../images/support-section-bg-right.png');*/
    /*    background-position: left center, right center;*/
    /*    background-size: contain;*/
    /*}*/

    /*.support-section {*/
    /*    background-image: url('../images/support-section-bg.png');*/
    /*    background-repeat: no-repeat;*/
    /*    background-size: contain;*/
    /*    background-position-y: bottom;*/
    /*}*/

    .btn {
        font-size: 18px;
    }

    .basic-btn img {
        height: 16px;
        width: 22px;
    }
    .heading-bg {
        top: 0;
        left: 0;
        transform: scale(1);
    }

    .heading-additional-text .stat {
        font-size: 36px !important;
    }

    .users-preview {
        width: 100px;
        height: 40px;
    }

    .smaller-text {
        font-size: 16px;
        line-height: 19.2px;
    }

    .heading-additional-text .title {
        font-size: 28px;
    }

    .heading-additional-text .description {
        font-size: 18px;
        line-height: 25.2px;
    }

    .phones {
        height: 457px;
    }

    .card.col-lg-4 {
        max-width: 31%;
    }

    .border-overlaps-wrapper {
        left: -5px;
    }

    .border-overlap {
        height: 30px;
        width: 8px;
    }

    .border-overlap.longer {
        height: 98px;
    }

    .border-overlaps-container {
        gap: 12px;
    }

    .service-card {
        padding-top: 0;
    }

    .service-card p {
        font-size: 18px;
    }

    .service-card .border-overlaps-wrapper {
        bottom: -5px;
    }

    .service-card .border-overlap {
        height: 8px;
        width: 52px;
    }

    .service-card .border-overlap.longer {
        width: 180px;
        height: 8px;
    }

    .building-img-wrapper {
        margin-top: 0;
    }

    .building-img-wrapper > img {
        height: 100%;
    }

    .platform-row img {
        height: 64px;
    }

    .card .description {
        font-size: 18px;
    }

    .agreement-card .title {
        font-size: 20px !important;
        line-height: 24px;
    }

    .account-type-card .header {
        font-size: 28px;
    }

    .account-type-card .plan {
        font-size: 18px;
    }

    .benefits-availability img {
        width: 32px;
        height: 32px;
    }

    .account-benefits-card > ul {
        gap: 15px;
    }

    .account-benefits-card {
        height: 756px;
        font-size: 16px;
    }

    .account-type-card.desktop {
        display: flex;
    }

    .account-benefits-card {
    }
    /* ! слайдер  */
    .slider,
    .slider-btns-wrapper {
        display: none;
        visibility: hidden;
    }

    .heading {
        font-size: 88px;
        line-height: 96.8px;
    }

    .section-text > h3 {
        font-size: 40px;
        line-height: 48px;
    }

    .section-text > p {
        font-size: 18px;
        line-height: 28.8px;
    }

    .card .title {
        font-size: 24px;
    }

    .contact-card img {
        width: 48px;
        height: 48px;
    }

    .contact-card .translucenced {
        font-size: 18px;
        line-height: 25.2px;
    }

    .contact-card .description {
        font-size: 20px;
        line-height: 24px;
    }

    .form-title {
        font-size: 40px;
        line-height: 48px;
    }

    .form-description {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
    }

    .form-subdescription {
        font-size: 12px;
        line-height: 14.4px;
    }

    .faq-arrow {
        width: 21px !important;
        height: 24px !important;
    }
    .faq-header .question,
    .faq-body {
        font-size: 20px;
        line-height: 120%;
    }

    .contact-card .title {
        gap: 20px !important;
        font-size: 24px !important;
    }
    .inputs-wrapper input {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
    .account-benefits-card {
        gap: 70px;
    }

    .benefits-availability img:first-child {
        margin-top: 40px;
    }

    .account-benefit {
        font-size: 18px;
    }
    /*.service-card-section {*/
    /*    background-image: url('../images/service-card-section-bg.png');*/
    /*    background-size: auto;*/
    /*    background-position-x: left;*/
    /*    background-position-y: center;*/
    /*    background-repeat: no-repeat;*/
    /*}*/

    .heading {
        font-size: 120px;
        line-height: 132px;
    }

    .heading-additional-text .title {
        font-size: 40px !important;
        line-height: 40px !important;
    }

    .heading-additional-text .smaller-text,
    .heading-additional-text .description {
        font-size: 18px;
        line-height: 25.2px;
    }

    .users-preview {
        width: 120px;
        height: 48px;
    }

    .hor-line-img.right {
        transform: rotate(0);
    }

    .heading-additional-text:first-child {
        max-width: 26%;
    }

    .heading-additional-texts-wrapper {
        margin-top: 10%;
    }

    .basic-btn-wrapper {
        margin-top: -300px;
    }

    .hor-line-img.right {
        right: 12%;
    }

    .phones {
        height: 538px;
    }

    .agreement-cards-wrapper {
        max-width: 52%;
    }

    .agreement-card.hovered img,
    .card img {
        height: 60px;
        width: 60px;
    }

    .card .title {
        font-size: 28px;
        line-height: 120%;
    }

    .card .description {
        font-size: 20px;
        line-height: 28px;
    }

    .agreement-card {
        max-width: 49%;
    }

    .markets-card {
        max-width: 24%;
    }

    .border-overlaps-wrapper {
        left: -7px;
    }

    .border-overlap {
        width: 12px;
        height: 31px;
    }

    .border-overlap.longer {
        height: 100px;
    }

    .section-text > h3 {
        font-size: 48px;
        line-height: 57.6px;
    }

    .account-types-wrapper {
        gap: 18px;
    }

    .contact-form {
        padding: 120px 40px;
    }

    .form-title {
        line-height: 57.6px;
        font-size: 48px;
    }

    .platform-row img {
        height: 80px;
    }

    .inputs-wrapper input {
        max-width: 49%;
    }

    .form-subdescription {
        max-width: 48%;
    }

    .form-content-wrapper {
        width: 47.666667%;
    }

    .markets-card:last-child .header > img {
        margin-left: -50px;
    }

    .faq-arrow {
        width: 22px !important;
    }
    .faq-header .question,
    .faq-body {
        font-size: 24px;
        line-height: 120%;
    }

    .contact-card .header {
        font-size: 28px !important;
    }

    .contact-card .translucenced {
        font-size: 20px;
    }
    .contact-card .description {
        font-size: 24px;
    }
}