:root {
    --white: #FAFEFF;
    --black: #0C2834;
    --blue: #1959A4;
}

#landing {
    font-family: 'Avenir Next', sans-serif !important;
    font-weight: 500;
    color: var(--black);
    font-size: 20px;
}

#landing em {
    font-style: italic;
}

#landing strong {
    font-weight: bold;
}

#landing .shadow {
    box-shadow: 0 30px 100px 0 rgba(25, 89, 164, 0.1);
}

#landing .block-1 {
    height: 560px;
    background-image: url("../assets/landing-bg-1.png");
    background-position: center;
}

#landing .block-1__heading {
    margin: 80px auto 0;
    width: fit-content;
    text-align: center;
}

#landing .block-1__heading h2 {
    font-weight: 900;
}

#landing .block-1__heading h3 {
    color: var(--white);
}

@media screen and (max-width: 767px) {
    #landing .block-1__heading {
        margin-top: 50px;
        max-width: 280px;
    }

    #landing .block-1__heading h2 {
        font-size: 30px;
    }
}

#landing h2 {
    font-size: 40px;
    padding-bottom: 5px;
}

.gradient-text {
    background: linear-gradient(to right, #F9BF4F 0%, #F9824F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#landing .block-1 h2 {
    width: fit-content;
}

#landing .block-1 h3 {
    font-size: 20px;
    width: fit-content;
    margin: 5px auto 0;
}

#landing .chat-arrow {
    position: absolute;
    right: -82px;
    top: -175px;
}

#landing .chat-star {
    position: absolute;
    right: -66px;
    top: -54px;
    z-index: 2;
}

#landing .chat-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#landing .chat-container {
    max-width: 800px;
    height: 280px;
    margin: auto;
}

#landing .get-started-block {
    margin-top: 68px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#landing .get-started-block a {
    background-color: #E44141;
    color: white;
    border-radius: 22px;
    padding: 0 70px 0 80px;
    height: 44px;
    display: flex;
    align-items: center;
}

#landing .get-started-block a:after {
    content: '';
    background-image: url('data:image/svg+xml,<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 18L15.5 12L9.5 6" stroke="%23FAFEFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    width: 24px;
    height: 24px;
    margin-left: 10px;
}

#landing .get-started-block a:hover {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}

#landing .get-started-block a:focus {
    outline: solid 3px rgba(12, 40, 52, 0.1);
}

#landing .get-started-block span {
    color: #9D9D9D;
    font-size: 10px;
    font-style: italic;
    margin-top: 9px;
}

#landing .chat-container__inner {
    border-radius: 10px;
    height: 480px;
    position: relative;
    top: -200px;
    border: 1px solid #0C28341A;
    z-index: 1;
    background: var(--white);
}


@media screen and (max-width: 767px) {
    #landing .chat-container__inner:before {
        content: 'First 3 wishes are free!';
        width: 100%;
        height: 50px;
        top: -36px;
        background: linear-gradient(to right, #F9BF4F 0%, #F9824F 100%);
        border: 1px solid #f6da20;
        color: #0C2834;
        position: absolute;
        text-align: center;
        z-index: -1;
        border-radius: 10px;
        padding-top: 10px;
    }
}

#landing .chat-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    min-height: unset !important;
}

.salesgenii-embedded {
    height: 100%;
}

@media screen and (max-width: 979px) {
    #landing .chat-container {
        padding: 0 80px;
    }

    #landing .chat-arrow {
        right: -78px;
    }

    #landing .chat-star {
        right: -65px;
    }
}

#landing .chat-subtitle {
    max-width: 450px;
    font-size: 10px;
    font-style: italic;
    color: #9D9D9D;
    margin: 10px auto 0;
    text-align: center;
}

@media screen and (max-width: 767px) {
    #landing .chat-container {
        padding: 0 24px;
        height: 190px;
    }

    #landing .chat-container__inner {
        top: -250px;
        height: 430px;
    }

    .chat-container__inner img {
        display: none;
    }

    #landing .chat-subtitle {
        margin-top: 34px;
    }
}

#landing .block-2 {
    height: 700px;
    background-color: var(--white);
}

@media screen and (max-width: 767px) {
    #landing .block-2 {
        height: 600px;
    }
}

#landing .features-container {
    height: 0;
}


#landing .features-container__inner {
    position: relative;
    top: -220px;
}

#landing .features-container__inner .swiper-container {
    max-width: 1040px;
    margin: auto;
}

.features-container .swiper-pagination {
    position: relative;
    bottom: -2px !important;
}

.features-container .swiper-pagination-bullet {
    background: var(--white);
    opacity: 1;
    width: 5px;
    height: 5px;
}

.features-container .swiper-pagination-bullet-active {
    width: 20px;
    border-radius: 5px;
}

.features-container .swiper {
    padding: 0 10px !important;
}

#landing .features-container ul li {
    padding: 40px 40px 100px;
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border: 1px solid #0C28341A;
    border-radius: 10px;
    box-sizing: border-box;
    width: 322px;

    background-repeat: no-repeat;
    background-size: auto;
    background-position: center bottom 5px;

    box-shadow: 0 30px 100px 0 rgba(25, 89, 164, 0.1);
}

#landing .features-container ul li:nth-child(1) {
    background-image: url('../assets/feature-bottom-1.svg');
}

#landing .features-container ul li:nth-child(2) {
    background-image: url('../assets/feature-bottom-2.svg');
}

#landing .features-container ul li:nth-child(3) {
    background-image: url('../assets/feature-bottom-3.svg');
}

#landing .features-container ul li .title {
    color: var(--blue);
}

#landing .features-container ul li .text {
    color: #0C2834;
    margin-top: 40px;
    font-size: 16px;
    line-height: 22px;
}

#landing .swiper {
    width: 100%;
    height: 100%;
}

#landing .swiper-slide {
    background: transparent;
    width: 322px;
    height: auto;
}

#landing .block-3 {
    background-color: var(--blue);
    padding: 160px 30px 80px;
}

#landing .block-3-content {
    margin: 0 auto;
    max-width: 830px;
    text-align: center;
}

#landing .block-3-content h3 {
    margin-top: 50px;
    line-height: 32px;
    color: var(--white);
}

#landing .block-3-content h3:last-child {
    margin-top: 40px;
}

#landing .block-4 {
    padding: 80px 0 128px;
    background-color: var(--white);
}

#landing .block-4 h2 {
    width: fit-content;
    margin: 0 auto;
    color: rgba(15, 55, 101, 1);
}

@media screen and (max-width: 767px) {
    #landing .block-4 {
        padding-bottom: 80px;
    }
}

#landing .faq-container {
    max-width: 1024px;
    margin: 68px auto 0;
    padding: 0 40px;
}

@media screen and (max-width: 767px) {
    #landing .faq-container {
        padding: 0 25px;
    }
}

#landing .accordion {
    display: flex;
    gap: 30px;

    line-height: 32px;
}

#landing .accordion li .accordion-header {
    color: #263238;
}

#landing .accordion li .accordion-action button {
    display: none;
}

#landing .accordion .chat-action-button {
    font-size: 20px;
}

#landing .accordion li.active .accordion-header {
    color: white;
}

#landing .accordion .accordion-content-body * {
    color: #0C2834;
}

#landing .accordion .accordion-action-container button {
    color: var(--white);
    background-color: var(--blue);
}

#landing .accordion .accordion-body {
    visibility: hidden;
    height: 0;
    display: none;
}

#landing .accordion .accordion-content {
    width: 100%;
}

#landing .accordion .accordion-content-body {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

#landing .accordion .accordion-content-body p {
    line-height: 32px;
}

#landing .accordion .accordion-content-body p > a {
    display: inline-block;
    border: 1px solid #0C28341A;
    border-radius: 5px;
    padding: 10px 20px;
    color: var(--white);
    background-color: var(--blue);
}

#landing .accordion .accordion-action-container {
    margin-top: 80px;
    display: flex;
    justify-content: flex-end;
}

.accordion ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.accordion li {
    width: 370px;
    padding: 17px 20px;

    border: 1px solid #9D9D9D;
    border-radius: 10px;
}

.accordion li:hover {
    cursor: pointer;
}

.accordion li.active {
    background-color: var(--blue);
    position: relative;
}

@media screen and (min-width: 768px) {
    #landing .accordion li.active:before,
    #landing .accordion li.active:after {
        width: 20px;
        height: 50%;
        position: absolute;
        right: -19px;
        content: "";
    }

    #landing .accordion li.active:before {
        top: 1px;
        background: linear-gradient(to right top, var(--blue) 44%, transparent 46%);
    }

    #landing .accordion li.active:after {
        top: calc(50% - 1px);
        background: linear-gradient(to right bottom, var(--blue) 44%, transparent 46%);
    }

    #landing .accordion .accordion-header-mobile {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    #landing .accordion {
        flex-direction: column;
        gap: 0;
    }

    #landing .accordion .accordion-header-mobile {
        padding: 20px;
        background-color: #4FC6F9;
        border-radius: 5px;
        border: 0;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: space-between;
    }

    #landing .accordion .accordion-header-mobile span {
        color: var(--blue);
        font-size: 16px;
    }

    #landing .accordion ul {
        display: none;
        padding: 20px 20px 0;
    }

    #landing .accordion ul.active {
        display: flex;
    }

    #landing .accordion ul li {
        width: 100%;
        padding: 22px 20px;
        border: 0;
        border-radius: 5px;
    }

    #landing .accordion ul li.active {
        background-color: #F0F0F0;
        border: 1px solid #0C28341A;
    }

    #landing .accordion ul li .accordion-header {
        color: #0C2834;
        font-size: 16px;
    }

    #landing .accordion ul li.active .accordion-header {
        color: #0C2834;
    }

    #landing .accordion .accordion-content {
        margin-top: 50px;
    }

    #landing .accordion .accordion-action-container {
        justify-content: center;
    }

    #landing .accordion .accordion-action-container button {
        padding: 20px;
    }
}

#landing .block-5 {
    height: 536px;
    background-color: #F9824F;

    position: relative;
    display: flex;
    align-items: center;
}

#landing .block-5 .bg-top {
    position: absolute;
    left: 150px;
    top: 0;
}

#landing .block-5 .bg-bottom {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 172px;
    background-image: url('../assets/block-5-bg-bottom.svg');
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
    #landing .block-5 .bg-top {
        left: -70px;
    }
}

#landing .block-5 .image-container {
    width: 432px;
    position: absolute;
    left: calc((353 / 1728) * 100%);
}

@media screen and (max-width: 1480px) {
    #landing .block-5 .image-container {
        left: 10%;
    }
}

@media screen and (max-width: 1100px) {
    #landing .block-5 .image-container {
        width: 40%;
        left: 7%;
    }
}

#landing .block-5-content {
    max-width: 530px;
    margin-left: 50%;
    z-index: 1;
}

#landing .block-5-content .heading {
    color: #0F3765;
    font-size: 40px;
    font-weight: 900;
}

#landing .block-5-content .text {
    max-width: 400px;
    margin-top: 40px;
    line-height: 32px;
    color: var(--white);
}

#landing .block-5-content a.link-btn {
    margin-top: 40px;
}

@media screen and (max-width: 767px) {
    #landing .block-5 .image-container {
        display: none;
    }

    #landing .block-5-content {
        margin: 0;
        padding: 0 25px;
    }
}