@import "../partials/faqs.css";

/* Hero */
section.page-section.hp-hero {
    position: relative;
    background: #1A1322;
}

.hero-grid-bg {
    background-image:
            linear-gradient(to right, #ffffff42 0.3px, transparent 0.3px),
            linear-gradient(to bottom, #ffffff42 0.3px, transparent 0.3px);
    background-size: 30px 30px;
    background-color: transparent;
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-content {
    z-index: 3;
    position: relative;
    padding: 66px 16px;
    gap: 25px;
}

div#hero-animation {
    width: 40px;
    margin: 0 auto;
    text-align: center;
}

.hero-content .title-super {
    text-align: center;
    color: var(--orange-marker);
    margin: 40px 0 25px;
}

h1.hero-title {
    font: 400 36px / 39px var(--SpaceGrotesk);
    letter-spacing: -3%;
    text-align: center;
    color: var(--grey-50);
}

p.hero-text {
    color: var(--grey-50);
    text-align: center;
    margin: 0;
}

.hero-right {
    gap: 60px;
}

.btn-outline.invert {
    width: 270px;
    margin: 0 auto;
}

@media (min-width: 1024px) {

    .hero-grid-bg {
        background-image:
                linear-gradient(to right, #ffffff42 0.4px, transparent 0.4px),
                linear-gradient(to bottom, #ffffff42 0.4px, transparent 0.4px);
        background-size: 36px 36px;
    }

    .hero-content {
        grid-template-columns: 1fr 1fr;
        padding: 110px;

        gap: min(150px ,11.4vw);
    }

    div#hero-animation {
        margin: 0;
    }

    .hero-right {
        gap: 44px;
    }

    p.hero-text,
    .hero-content .title-super {
        margin: 0 0 30px;
        text-align: left;
    }

    p.hero-text {
        text-align: left;
    }

    h1.hero-title {
        font: 400 60px / 64px var(--SpaceGrotesk);
        text-align: left;
        letter-spacing: -5%;
    }

    .btn-outline.invert {
        width: max-content;
        margin: 0;
    }
}



/* Comparison */

section.comparison {
    background: var(--grey-10);
    padding: 50px 0;
}

.comparison h2 {
    font: 400 30px / 33px var(--SpaceGrotesk);
    letter-spacing: -4%;
    margin: 0 auto 17px;
}

.comparison-table {
    max-width: 995px;
    margin: 0 auto;
    overflow: auto;
    padding-bottom: 22px;
}

.comparison-table-wrapper {
    row-gap: 14px;
}

.headings-wrapper,
.rows-wrapper {
    grid-template-columns: 195px 400px 400px;
    border: 0.5px solid #1A1322B2;
    border-radius: 10px;
    overflow: hidden;
}

.comparison-table .col {
    color: #08173B;
    font: 400 13px / 18px var(--PlusJakartaSans);
    letter-spacing: 0;
}

.headings-wrapper .col {
    font-weight: 700;
    padding: 8px 11px;
}

.rows-wrapper .col {
    padding: 16px 16px 20px;
}

.headings-wrapper .col {
    background: var(--grey-50);
}

.headings-wrapper .col-3 {
    background: var(--orange-marker);
}

.col-2.col {
    border-right: 0.5px solid #1A1322B2;
    border-left: 0.5px solid #1A1322B2;
}

.comparison-table::-webkit-scrollbar {
    width: 3px;
    height: 5px;
}

.comparison-table::-webkit-scrollbar-track {
    background: #0000001A;
    border-radius: 20px;
}

.comparison-table::-webkit-scrollbar-thumb {
    background: #6D6D6D;
    border-radius: 20px;
}

@media (min-width: 1024px) {
    section.comparison {
        padding: 90px 0;
    }

    .comparison h2 {
        font: 400 45px / 48px var(--SpaceGrotesk);
        margin: 0 auto 48px;
        text-align: center;
    }

    .comparison-table {
        overflow: hidden;
    }

    .comparison-table-wrapper {
        width: 100%;
    }

    .headings-wrapper .col {
        padding: 13px 16px;
    }

    .rows-wrapper .col {
        padding: 13px 8px 20px;
    }

    .comparison-table .col {
        font: 400 16px /22px var(--PlusJakartaSans);
    }
}

/* Why */
.why {
    padding: 50px 0;
}

.why h3 {
    font: 400 30px / 33px var(--SpaceGrotesk);
    letter-spacing: -4%;
    margin: 0 auto 50px;
    text-align: center;
}

.row-title {
    font: 400 14px / 100% var(--SpaceGrotesk);
    letter-spacing: -3%;
    border: 0.5px solid #1A1322;
    width: max-content;
    padding: 10px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.why-facts:not(:last-of-type) {
    margin-bottom: 50px;
}

.why-facts:nth-of-type(3) .row-title {
    background-color: var(--orange-marker);
}

.platform-image {
    margin: 50px 0;
}

.platform-inner:nth-of-type(2n) .platform-image {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 18px 18px 33px 0 #1B08080F,
    57px 57px 60px 0 #1B08080D,
    96px 96px 81px  #1B080808,
    172px 170px 96px 0 #1B080803,
    269px 266px 106px 0 #1B080800;
}
/*.platform-inner:not(:first-of-type) {*/
/*    padding-top: 50px;*/
/*}*/
@media (min-width: 1024px) {
    .why {
        padding: 120px 0;
    }

    .platform-inner {
        grid-template-columns: 1fr 1fr;
    }

    .platform-inner:not(:last-of-type) {
        margin-bottom: 100px;
    }


    .platform-image {
        margin: 0;
    }

    .why h3 {
        text-align: left;
    }

    .platform-header {
        padding-right: 70px;
    }

    .platform-inner:nth-of-type(2n) .platform-header {
        order: 2;
        padding-right: 0;
        padding-left: 70px;
    }

    .why-facts {
        grid-template-columns: auto auto;
        gap: 32px;
    }

    .row-title {
        padding: 35px 16px;
        border-radius: 10px;
        margin-bottom: 0;
        height: max-content;
    }

    .row-title {
        width: 90px;
    }

}

/* Different */
section.different {
    padding: 30px 0 70px;
}

section.different .section-container {
    max-width: 1390px;
}

section.different h2 {
    text-align: center;
    margin-bottom: 30px;
}

.different ul.features-list {
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
}

.different .banner-inner {
    width: 100vw;
    position: relative;
    margin: 0 -20px;
}

.different li.feature-card {
    position: relative;
    padding: 38px 25px 28px;
    border-radius: 18px;
    background: var(--grey-10);
    box-shadow: 18px 18px 33px #1B08080F,
    57px 57px 60px #1B08080D,
    96px 96px 81px #1B080808,
    172px 170px 96px #1B080803,
    269px 266px 106px #1B080800;
}

.feature-card .card-grid-bg {
    background-image:
            linear-gradient(to right, var(--dark-100-015) 0.3px, transparent 0.3px),
            linear-gradient(to bottom, var(--dark-100-015) 0.3px, transparent 0.3px);
    background-size: 20px 20px;
    background-color: transparent;
    position: absolute;
    inset: 17px;
    z-index: 0;
}

.card-content {
    z-index: 3;
    position: relative;
    height: 100%;
}

.different .feature-card .card-icon svg {
    width: 40px;
    height: auto;
}

.different .card-icon {
    margin-bottom: 55px;
}

.feature-card .title-super {
    margin: 50px 0 10px;
}

.feature-card h4 {
    font: 400 22px / 35px var(--SpaceGrotesk);
    letter-spacing: -2%;
    margin-bottom: 12px;
}

a.card-cta {
    margin-top: 6px;
    font-weight: 700;
    color: var(--dark-100);
}

a.card-cta svg {
    margin-left: 5px;
}

.different .header-inner {
    max-width: unset;
}

.different .banner-header {
    position: absolute;
    inset: 0;
    padding: 55px 20px;
    align-items: start;
    justify-content: flex-start;
}

.different .banner-header h3 {
    font: 400 23px / 34px var(--SpaceGrotesk);
    letter-spacing: -2%;
    margin-bottom: 0;
}

.card-content p {
    font-size: 15px;
}



@media (max-width: 768px) {
    .different .slick-initialized .slick-slide {
        margin: 0 20px;
        height: auto !important;
    }

    .different ul.features-list.slick-initialized.slick-slider {
        margin: 0 -20px;
    }

    .different .content-slider-navigation {
        margin: -100px auto 30px;
    }

    .different .slick-track {
        display: flex !important;
        padding-bottom: 135px;
    }
}

@media (min-width: 768px) {

    .different .banner-header h3 {
        font: 400 37px / 58px var(--SpaceGrotesk);
        letter-spacing: -4%;
        margin-bottom: 0;
    }

    .different .header-inner {
        max-width: 725px;
    }

    .different .feature-card h4 {
        margin-bottom: 10px;
    }

    .different .banner-animation {
        aspect-ratio: 390 / 260;
    }

    .different .banner-header {
        padding: 110px 70px;
        justify-content: flex-start;
    }

    .different ul.features-list {
        gap: 14px;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {

    .card-content p {
        font-size: 17px;
    }

    .different  .banner-inner {
        width: 100%;
        margin: 0;
        border-radius: 32px;
        overflow: auto;
    }

    .different ul.features-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .different .feature-card {
        padding: 60px 40px 45px;
    }

    .feature-card .card-grid-bg {
        background-image:
                linear-gradient(to right, var(--dark-100-015) 0.4px, transparent 0.4px),
                linear-gradient(to bottom, var(--dark-100-015) 0.4px, transparent 0.4px);
        background-size: 28px 28px;
        inset: 17px;
    }

    .different li.feature-card {
        padding: 45px 30px 35px;
        border-radius: 22px;
    }

    .different .card-icon {
        margin-bottom: 65px;
    }

    .different .feature-card .card-icon svg {
        width: 48px;
    }

    .different .feature-card h4 {
        font: 400 27px / 123% var(--SpaceGrotesk);
        letter-spacing: -2%;
        margin-bottom: 14px;
    }
}

/* Compare */
section.compare h2 {
    text-align: center;
}


ul.compare-list {
    gap: 12px;
    margin: 0 -8px;
    padding: 40px 0;
}

.compare-box {
    padding: 6px;
    grid-template-columns: 84px auto;
    color: var(--dark-100);
    border-radius: 16px;
    background: var(--grey-10);
    box-shadow: 18px 18px 33px #1B08080F,
    57px 57px 60px #1B08080D,
    96px 96px 81px #1B080808,
    172px 170px 96px #1B080803,
    269px 266px 106px #1B080800;
}

.box-text {
    padding: 25px 15px 30px 18px;
    align-items: center;
    gap: 12px;
}

p.box-title {
    font: 500 18px / 21px var(--SpaceGrotesk);
    letter-spacing: -2%;
}

span.number {
    font: 700 14px / 160% var(--PlusJakartaSans);
    letter-spacing: 0%;
    color: var(--blue-100);
}

.box-image {
    padding: 26px;
    width: max-content;
    border-radius: 8px;
    background-color: var(--grey-100);
}

.box-image img {
    width: 32px;
    height: 32px;
    /*border-radius: 6px;*/
    /*object-fit: cover;*/
    /*height: 100%;*/
}

@media (min-width: 1025px) {
    section.page-section.compare {
        padding: 120px 0 20px;
    }

    ul.compare-list.list-none.d-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}