.dropdown {
    max-width: max-content;
}
.video-container{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 335px;
    width: 100%;
    z-index: 10;
    cursor: pointer;
    padding: 7px;
    min-width: 300px;
    min-height: 666px;
}
.why-tabs-swiper {
    overflow: visible;
}
.video-container-border {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/phone-border-bg.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.btn-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: 0s;
    background-image: url(../img/video-poster.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
}
.video-container video{
    max-width: 300px;
    width: 100%;
    border-radius: 46px;
    height: 100%;
    transition: 0s;
}
.playing .btn-play {
    opacity: 0;
    pointer-events: none;
}
.video-container:hover .play-icon {
    animation: hithere 1s ease infinite;
}


.play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    animation: pulse 1s infinite ease-in-out alternate;
}
@keyframes pulse {
    from { transform:translate(-50%, -50%) scale(0.8); }
    to { transform:translate(-50%, -50%) scale(1.2); }
    }
    @keyframes hithere {
    30% { transform: translate(-50%, -50%) scale(1.2); }
    40%, 60% { transform: translate(-50%, -50%) rotate(-20deg) scale(1.2); }
    50% { transform: translate(-50%, -50%) rotate(20deg) scale(1.2); }
    70% { transform: translate(-50%, -50%) rotate(0deg) scale(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); }
    }
.play-icon path {
    fill: currentColor
}
/* .video-container video {
    opacity: 0;
} */
/* .video-container.playing video {
    opacity: 1;
} */
/* .video-container.playing.is-loading video,
.video-container.is-loading video {
    opacity: 0;
} */

.video-container.is-loading .btn-play{
    opacity: 1;
}
.dropdown__body {
    display: none;
    position: fixed;    
    background-color: white;
    box-shadow: 0px 11px 20px rgba(0, 0, 0, .2);
    overflow: auto;
    margin-top: 15px;
    z-index: 9999;
}
.dropdown__body.is-open {
    display: block;
    white-space: nowrap;
}

.footer {
    padding: 32px 0;
    border-top: 2px solid var(--border-color);
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.footer-top__item {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.social-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.social-links .btn {
    flex-direction: column;
    gap: var(--gap--xs);
    font-size: var(--text--sm);
}

.footer-bottom {
    padding-top: 17px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-color);
    gap: 20px;
}

.footer-bottom__menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
}

.footer-bottom__menu a:hover {
    color: var(--primary);
}
.g-32 {
    --bs-gutter-x: 32px;
    --bs-gutter-y: 32px;
}
.g-48 {
    --bs-gutter-x: 48px;
    --bs-gutter-y: 48px;
}
.mb-56 {
    margin-bottom: 56px;
}
.pt-32 {
    padding-top: 32px;
}
.hr {
    border-bottom: 1px solid var(--border-color);
}
.how-it-work-title {
    padding: 0 40px;
}
.pt-56 {
    padding-top: 56px;
}
.hero-section {
    padding: 32px 0 112px;
    position: relative;
    display: flex;
    align-items: center;
    /* background-position: bottom center;
    background-size: contain;
    background-repeat: no-repeat; */
    min-height: calc(100dvh - var(--header-height)) ;
}
.hero-section::after {
    content: "";
    background-image: var(--bg-hero-image);
    position: absolute;
    bottom: 0;
    width: 90%;
    height: 100%;
    z-index: -1;
    background-position: bottom right;
    background-size: cover;
}
.unlock-effortless-gif {
    max-width: 325px;
}
.hero-section-content {
    display: flex;
    flex-direction: column;
    gap: 56px;
}
.section-heading {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-actions-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-actions-group__btns {
    display: flex;
    align-items: center;
    gap: 40px;
}
.hero-qr-code {
    overflow: hidden;
    max-width: 104px;
    border-radius: 16px;
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
    background-color: var(--white);
} 
.btn--primary-2 {
    background-color: var(--primary-500);
    color: white;
    box-shadow: 2px 2px 5px 0px #06275DE5 inset,
    -2px -2px 4px 0px #062B65E5 inset,
    2px -2px 4px 0px #06275D33 inset,
    -2px 2px 4px 0px #06275D33 inset;

}
.page-404 {
    padding: 88px 0 128px;
}
.page-404--body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 44px;
}
.page-404--body__title-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.radius-12 {
    border-radius: 12px;
}
.hero-images {
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.understand-card .card-body > img {
    max-height: 64px;
}
.accordion-list__handle {
    font-size: 20px;
}
.understanding-content b {
    font-weight: 600;
}
.hero-images > {
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);
}

.hero-section + .section {
    padding-top: 0;
}

.section-title {
    margin-bottom: 56px;
}

.who-choose-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.who-choose-image {
    background-image: url(../img/background-half-circle.png);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 156px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gif-wrapper {
    max-width: 220px;
    /* max-height: 220px; */
    /* overflow: hidden; */
}
.gif-wrapper > img {
    max-width: 220px;
    aspect-ratio: 1/1.1;
}



.accordion-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.accordion-icon {
    display: block;
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background-color: var(--primary-500);
    color: white;
}
.accordion-list__item {
    border: 1px solid var(--border-color);
    border-radius: 16px;
}
.answer__body {
    padding: 8px 24px 16px;
}

.accordion-list__handle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    transition: color .3s;
    cursor: pointer;
    gap: 20px;
}
.accordion-list__item.active .accordion-list__handle,
.accordion-list__item:hover .accordion-list__handle{
    color: var(--primary-500);
}
.accordion-list__item:hover {
    background-color: var(--primary-100);
}
.accordion-icon::after,
.accordion-icon::before {
    content: "";
    display: block;
    background-color: currentColor;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-size: 18px;
    z-index: 2;
}

.accordion-icon::after {
    height: 12px;
    width: 1.6px;
    right: 16px;
}

.accordion-icon::before {
    width: 12px;
    height: 1.6px;
    right: 11px;
}
.accordion-list__item.active .accordion-icon:after {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
}

.accordion-list__item.active .accordion-icon::before {
    -webkit-transform:translateY(-50%) rotate(-180deg);
    -ms-transform:translateY(-50%) rotate(-180deg);
    transform:translateY(-50%) rotate(-180deg);
}
.accordion-list__item div.answer {
    display: none;   
}
.understanding-content{
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.understand-card,
.pricing-card,
.hear-card {
    --card-spacer-y: 40px;
    --card-spacer-x: 40px;
    height: 100%;
}
.hear-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hear-card {
    background-image: url(../img/quote-mark.png);
    background-repeat: no-repeat;
    /* background-size: 146px 1; */
    background-position: right 40px bottom 60px;
    --card-border-radius: 16px;
}
.hear-card .card-body h5 {
    font-weight: 600;
    color: var(--defaultTextColor);
}
.hear-name {
    margin-top: auto;
}
.max-w-732 {
    max-width: 732px;
}
.max-w-170 {
    max-width: 170px;
}
.max-w-70 {
    max-width: 70px;
}
.card--primary {
    --card-bg: var(--primary-100);
}

.hear-card {
    --card-bg: var(--primary-100);
    --card-border-width:2px;
    --card-border-color: rgba(194, 217, 255, 0.3);
    box-shadow: 0px 0px 40px 0px rgba(217, 223, 232, 0.4);

}
.understand-card .card-body{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.pricing-card .card-body {
    display: flex; 
    flex-direction: column;
    gap: 24px;
}
.pricing-card .page-actions-group__btns {
    gap: 16px;
}
.pricing-card .page-actions-group__btns .hero-qr-code {
    border-radius: 10px;
}
.pricing-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pricing-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 120%;
}

.pricing-list li .ico {
    flex: 0 0 18px;
}

.pricing-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 11px;
    border-bottom: 2px solid rgba(194, 217, 255, 0.3);
}
.pricing-value {
    font-size: 18px;
    font-weight: 700;
    line-height: 25.2px;
    color: var(--secondary-600);
}

.mb-16 {
    margin-bottom: 16px;
}

.security-assurance-wrap {
    padding: 16px 0;
    background-color: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(194, 217, 255, 0.2);
    border-radius: 16px;
}
.security-assurance {
    display: flex;
    align-items: flex-start;
    padding: 24px 40px;
    gap: 96px;
    position: relative;
    z-index: 2;
}
.security-assurance + .security-assurance {
    border-top: 2px solid rgba(194, 217, 255, 0.2);
}
.security-assurance__title {
    flex: 0 0 200px;
}
.security-assurance__item {
    position: relative;
    flex: 1;
    align-self: stretch;
}
.arrow-decore {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -86px;
    z-index: -1;
}
.swiper-hear .swiper-slide{
    width: 480px;
    height: 400px;
}
.swiper-hear .swiper-slide h5 {
    line-height:33.6px;
}
.max-w-640 {
    max-width: 640px;
}
.mb-32 {
    margin-bottom: 32px;
}
.mb-26 {
    margin-bottom: 26px;
}
.unlock-effortless {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.how-it-work {
    background-color: var(--primary-100);
    padding: 60px 0;
}
.why-tabs {
    display: flex;
    flex-direction: column;
    padding: 16px 40px 40px;
}
.why-tabs__tab-link {
    padding: 24px 0;
    gap: 24px;
    font-size: var(--text--xl);
    line-height: 31px;
    justify-content: flex-start;
    text-align: start;
    border-bottom: 2px solid rgba(22, 23, 23, 0.05);
    color: rgba(133, 135, 138, 1);
    cursor: pointer;
}
.why-tabs__tab-link .ico {
    --ico-size: 64px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(235, 240, 250, 1);
    border-radius: 50%;
    font-size: 24px;
    font-weight: 700;
    line-height: 33.6px;
    color: rgba(133, 135, 138, 1);
}

.why-tabs__tab-link.active-tab .ico{
    background: var(--white);
    color: rgba(22, 23, 23, 1);
}
@media (hover: hover) {
    .why-tabs__tab-link:hover {
        color: rgba(22, 23, 23, 1);
    }
}

.why-tabs__tab-link.active-tab{
    color: rgba(22, 23, 23, 1);
    border-bottom: 2px solid rgba(22, 23, 23, 0.16);
    /* pointer-events: none; */
}

.why-tabs-body {
    position: relative;
    height: 100%;
}

.circle-shapes {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 356px;
    height: 356px;
}

.circle-shapes span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    border: 1px solid rgba(22, 23, 23, 0.16);
    opacity: 0;
    animation: shapes 6s linear var(--delay) infinite;
    
}
.why-tabs-body-tab {
    display: none;
}
.why-tabs-body-tab.active-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
@keyframes  shapes {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

.section-privacy {
    padding: 50px 0 128px;
}

.mb-24 {
    margin-bottom: 24px;
}
.mb-80 {
    margin-bottom: 80px;
}
.text-editor {
    font-size: var(--text--lg);
}
.text-editor ul ,
.text-editor li {
    list-style: revert;
}

.text-editor ul {
    padding-left: 30px;
}