* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    -webkit-overflow-scrolling: touch;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal !important;
    background-color: #FFFFFF;
    overflow-x: hidden;
}

.container {
    z-index: 1;
    max-width: clamp(992px, 100vw, 1920px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.container-large {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

.container-small {
    width: 100%;
    max-width: 630px;
    margin-left: auto;
    margin-right: auto;
}

.hero {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero {
    --bgX: 0%;
    --bgY: 50%;
}

.hero::after {
    content: "";
    width: 773px;
    height: 355px;
    bottom: 0;
    right: 30px;
    background: linear-gradient(106.1deg,
            #FFB1CD 33.93%,
            rgba(70, 78, 229, 0.6) 60.22%,
            #FFFFFF 85.59%,
            #70FF44 85.59%);
    background-size: 200% 200%;
    /* gives room to move */
    background-position: 0% 50%;
    /* starting position */
    filter: blur(100px);
    position: absolute;
    transform: rotate(200deg);
    z-index: -1;
    border-radius: 50%;
    animation: heroBgShift 12s ease-in-out infinite alternate;
}
@keyframes heroBgShift {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 25% 55%;
    }

    50% {
        background-position: 50% 50%;
    }

    75% {
        background-position: 75% 45%;
    }

    100% {
        background-position: 100% 50%;
    }
}
.hero_section {
    padding-top: 45px;
}

.hero_section-wrapper {
    position: relative;
}

.right-doodle {
    position: absolute;
    right: -3.5%;
    top: 20%;
    z-index: 2;
}

.left-bg {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 29px 0;
}

.nabar-parent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    margin-top: 20px;
}

.nabar-parent.sticky .navbar {
    background: #FFFFFF33;
    backdrop-filter: blur(20px);
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
}

.nabar-parent .navbar {
    padding: 8px 24px;
    border-radius: 50px;
}

/* 
.navbar.sticky {
    transform: translateX(-50%);
    background: #FFFFFF33;
    backdrop-filter: blur(20px);
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
} */

html.header-fixed {
    scroll-padding-top: 90px;
    /* prevents content jump */
}

.navbar .middle-menu-box ul {
    display: flex;
    align-items: center;
    list-style-type: none;
    background: #101621;
    border-radius: 300px;
    border: 1px solid #FFFFFF0A;
    backdrop-filter: blur(50px);
    padding: 8px;
    position: relative;
    transform: translateX(45px);
}

.navbar .hamberger {
    display: none;
}

.bg-border {
    position: relative;
}

.bg-border .yellow-border {
    position: absolute;
    left: -12px;
    top: -10px;
    z-index: -1;
    width: 100%;
}

.navbar .middle-menu-box ul li {
    padding: 13px 24px;
    position: relative;
    z-index: 1;
}

.middle-menu-box .active-slider {
    position: absolute;
    top: 8px;
    height: calc(100% - 16px);
    background: #464EE5;
    border-radius: 300px;
    z-index: 0;
    transition: all 0.3s ease;
}

.brand_logo_box img {
    width: 100%;
}

.hero_banner {
    width: 100%;
    padding-top: 30px;
}

.hero_banner_wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.hero_banner_wrapper .bg-lines {
    position: absolute;
    z-index: -1;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
}

.navbar .middle-menu-box ul li a {
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 400;
    text-decoration: none;
}

.hero_card {
    box-shadow: -7.03px 16.08px 39.19px 0px #0000001A;
    position: relative;
    border-radius: 25px;
    background-color: #fff;
    margin-bottom: -105px;
    /* Perfect subtle tilt */
    backface-visibility: hidden;
    will-change: transform;
    transform: perspective(1200px) rotate3d(1.3, -2, 0, 25deg);
    transform-origin: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.creator_card {
    box-shadow: -6.7px 15.32px 37.35px 0px #0000001A;
    position: relative;
    border-radius: 25px;
    background-color: #fff;
    padding-top: 82px;
    background: url('../assets/creator-bg.webp') center center #FFFFFF;
    /* Perfect subtle tilt */
    /* transform: perspective(1200px) rotate3d(1.3, -2, 0, 25deg);
        transform-origin: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease; */
}

.professionl_card {
    box-shadow: -6.7px 15.32px 37.35px 0px #0000001A;
    position: relative;
    border-radius: 25px;
    background-color: #fff;
    padding-top: 82px;
    background: url('../assets/professionnal.jpg') center center #FFFFFF;
    background-size: cover;
}

.business_card {
    box-shadow: -6.7px 15.32px 37.35px 0px #0000001A;
    position: relative;
    border-radius: 25px;
    background-color: #fff;
    padding-top: 82px;
    background: #FFFFFF;
    background: url('../assets/car.png') top center #FFFFFF;
    background-repeat: no-repeat;
}

.community_card {
    box-shadow: -6.7px 15.32px 37.35px 0px #0000001A;
    position: relative;
    border-radius: 25px;
    background-color: #fff;
    padding-top: 82px;
    background: #FFFFFF;
    background: url('../assets/lee-bg.png') top center #FFFFFF;
    background-repeat: no-repeat;
}

.creator_card .hero_dp,
.professionl_card .hero_dp,
.business_card .hero_dp,
.community_card .hero_dp {
    width: 77.79px;
    height: 77.79px;
    object-fit: contain;
    border-radius: 50%;
    background-color: #fff;
}

.creator_card .hero_profile h6,
.professionl_card .hero_profile h6 {
    color: #FFFFFF;
    font-size: 18.39px;
    font-weight: 700;
    line-height: 1.2;
    padding: 6px 0 4px 0;
}

.business_card .hero_profile h6,
.community_card .hero_profile h6 {
    color: #000000;
    font-size: 18.39px;
    font-weight: 700;
    line-height: 1.2;
    padding: 6px 0 4px 0;
}

.creator_card .hero_profile p,
.professionl_card .hero_profile p {
    color: #FFFFFF;
    font-size: 9.9px;
    font-weight: 500;
    line-height: 1.5;
    padding-bottom: 5px;
}

.business_card .hero_profile p,
.community_card .hero_profile p {
    color: #5D5D5D;
    font-size: 9.9px;
    font-weight: 500;
    line-height: 1.5;
    padding-bottom: 5px;
}

.creator_card p.try,
.professionl_card p.try {
    color: #FFFFFF;
    font-size: 9.9px;
    font-weight: 600;
    line-height: 1.5;
    padding-bottom: 10px;
}

.business_card p.try,
.community_card p.try {
    color: #000000;
    font-size: 9.9px;
    font-weight: 600;
    line-height: 1.5;
    padding-bottom: 10px;
}

.creator_card p.try span,
.professionl_card p.try span,
.business_card p.try span,
.community_card p.try span {
    color: #464EE5;
}

.creator_card .social img,
.professionl_card .social img,
.business_card .social img,
.community_card .social img {
    width: 22px;
    height: 22px;
}

.creator_card .sites-list img.b-arrow,
.professionl_card .sites-list img.b-arrow,
.business_card .sites-list img.b-arrow,
.community_card .sites-list img.b-arrow {
    width: 8.46px;
    height: 8.46px;

}

.creator_card .sites-list li {
    background: #FFF7F7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    color: #000000;
    font-weight: 500;
    font-size: 11.32px;
    padding: 9.8px 11.32px;
    width: 100%;
    border-width: 0px, 2.83px, 2.83px, 0px;
    border-style: solid;
    border-color: transparent #000000 #000000 transparent;
}

.professionl_card .sites-list li {
    background: #FFF7F7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    border-radius: 100px;
    color: #000000;
    font-weight: 500;
    font-size: 11.32px;
    padding: 9.8px 11.32px;
    width: 100%;
    border-width: 0px, 2.83px, 2.83px, 0px;
    border-style: solid;
    border-color: transparent #000000 #000000 transparent;
}

.business_card .sites-list li {
    background: #57D593;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    border-radius: 100px;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 11.32px;
    padding: 9.8px 11.32px;
    width: 100%;
}

.community_card .sites-list li {
    background: #EFA3FF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    color: #000000;
    font-weight: 500;
    font-size: 11.32px;
    padding: 9.8px 11.32px;
    width: 100%;
    border-radius: 100px;
}

.creator_card .sites-list,
.hero_card .sites-list,
.professionl_card .sites-list,
.business_card .sites-list,
.community_card .sites-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style-type: none;
    gap: 8.87px;
    width: 100%;
    padding: 17px;
}

.hero_card .sites-list li:first-child {
    transform: translate(-20%, -6px);
}

.hero_card .sites-list li:nth-child(2) {
    transform: translate(-12%, -3px);
}

.hero_card .sites-list li:nth-child(3),
.hero_card .sites-list li:nth-child(4),
.hero_card .sites-list li:nth-child(5) {
    transform: translate(-4%, 0px);
}

.hero_card .sites-list li {
    background: #202A2F;
    border-radius: 35px;
    font-size: 11.83px;
    font-weight: 500;
    color: #FFFFFF;
    padding: 10px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* Each li slightly rotated for depth effect */
    transform: translateZ(5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* .hero_card .sites-list li:hover {
    transform: translateZ(15px) scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
} */

.hero_card .wave {
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
}

.hero_card .hero_profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: -90px;
}

.hero_card .hero_profile img.hero_dp {
    width: 81px;
    height: 81px;
    object-fit: contain;
    border-radius: 50%;
}

.hero_card p {
    color: #5D5D5D;
    font-size: 10.35px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    padding: 17px 0;
}

.hero_card p span {
    color: #464EE5;
}

.hero_card .hero_profile h6 {
    font-size: 19.23px;
    font-weight: 700;
    line-height: 1.3;
    color: #000000;
}

.hero_card .hero_profile .social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.hero_card .hero_profile p {
    color: #000000;
    font-size: 10.35px;
    font-weight: 500;
    line-height: 1.3;
    padding: 0;
}

.blue-btn {
    background: #464EE5;
    border-radius: 319px;
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 400;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blue-btn:hover .button__text {
    color: #FFFFFF;
}

.button__text {
    position: relative;
    z-index: 2;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 400;
    color: #FFFFFF;
    transition: 300ms ease;
}

.blue-btn .button__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 30px;
    border-radius: 319px;
    background: #464EE5;
}

.blue-btn .button__spotlight {
    position: absolute;
    z-index: 1;
    height: 10px;
    width: 10px;
    opacity: 1;
    border-radius: 50%;
    background: #0D0D0D;
    inset: 0;
    top: 50%;
    transform: scale(0);
}

.login_wrapper {
    display: flex;
    align-items: center;
    gap: 0.833vw;
}

.black-btn {
    background: #0D0D0D;
    border-radius: 319px;
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 400;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.black-btn .button__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 30px;
    border-radius: 319px;
    background: #0D0D0D;
}

.black-btn .button__spotlight {
    position: absolute;
    z-index: 1;
    height: 10px;
    width: 10px;
    opacity: 1;
    border-radius: 50%;
    background: #464EE5;
    inset: 0;
    top: 50%;
    transform: scale(0);
}

.white-btn {
    background: #FFFFFF;
    border-radius: 319px;
    color: #000000;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 400;
    text-decoration: none;
    padding: 11px 30px;
}

.hero_section .hero_sectionwrapper .header-wrapper,
.hero_section .hero_sectionwrapper .header-wrapper .heading_dv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero_section .hero_sectionwrapper .header-wrapper {
    gap: 30px;
}

.hero_section .hero_sectionwrapper .header-wrapper .heading_dv {
    gap: 8px;
    text-align: center;
    width: 80%;
}

.hero_section .hero_sectionwrapper .header-wrapper .heading_dv h2 {
    font-size: 60px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
}

.hero_section .hero_sectionwrapper .header-wrapper .heading_dv p {
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    line-height: 1.4;
}

.clients {
    background: #FFFFFF;
    padding: 11px 0 18px 0;
    border-bottom: 4px solid #E0EAFF;
    box-shadow: 2px 4px 10px 0px #464EE508, 9px 15px 17px 0px #464EE508, 20px 34px 24px 0px #464EE505, 35px 60px 28px 0px #464EE500, 55px 94px 31px 0px #464EE500;
    position: relative;
    z-index: 2;
}

.clients h6 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: #888888;
    text-align: center;
    margin-bottom: 12px;
}

.clients ul {
    list-style-type: none;
    display: flex;
}

.shorten-url-wrapper {
    border-radius: 337px;
    background: #EEF4FF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* width: 35%; */
    /* width: auto; */
    overflow: hidden;

}

.shorten-url-wrapper p {
    opacity: 0;
    transform: translateY(20px);
}

.shorten-url-wrapper p {
    font-size: 20px;
    font-weight: 600;
    color: #464EE5;
    line-height: 1.2;
    letter-spacing: 0.22px;
    padding-left: 18px;
}

.walkthrough .walkthrough_wrapper {
    border-radius: 60px;
    background: url(../assets/plastikbg.webp) center center #0b0b0b;
    background-size: cover !important;
    background-attachment: fixed !important;
    width: 100%;
    height: 602px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    position: relative;
}

.walk_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.walkthrough .walkthrough_wrapper .walkthrough_heading h2 {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.4;
    color: #FFFFFF;
}

.walkt_btns_dv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.walkt_btns .blue-btn .button__wrapper {
    padding: 21.2px 30px;
}

.walkt_btns_dv p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: #E7E7E7;
    text-align: center;
}

.walkt_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.corner_flower {
    position: absolute;
    top: -20%;
    left: -6%;
}

.footer {
    margin-top: 50px;
}

.footer_top_div {
    margin: 0 16px;
    background: #464EE4;
    border-radius: 30px;
    padding-top: 21px;
}

.footer_top_div .footer_links_wrapper {
    display: flex;
    align-items: flex-start;
    border-top: 1px solid #D9D9D940;
}

.cpy_ryt_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 40px;
}

.cpy_ryt_wrapper p {
    color: #000000;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.3;
}

.cpy_ryt_wrapper ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.links-list_wrapper {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 40px 0 70px 0;
    border-left: 1px solid #D9D9D940;
}

.links-list_wrapper .column {
    width: calc(100% / 3);
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    padding-left: 100px;
}

.links-list_wrapper .column .inner_column:nth-child(2) {
    margin-top: 50px;
}

.links-list_wrapper .column h6 {
    font-size: 20px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.3;
    margin-bottom: 30px;
}

.links-list_wrapper ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.links-list_wrapper .column li a,
.links-list_wrapper .column li {
    text-decoration: none;
    color: #B9B9B9;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}

.footer_top_div .footer_links_wrapper .brand_logo {
    width: 30%;
    padding-top: 45px;
}

.footer_top_div .footer_links_wrapper .footer_links_div {
    width: 70%;
}

.pricing {
    text-align: center;
    padding: 90px 0 220px 0;
}

.pricing-header .sub-heading,
.section-header .sub-heading {
    color: #464EE5;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 10px;
}

.pricing-header h2,
.section-header h2 {
    font-size: 46px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 10px;
}

.pricing-header .description,
.section-header .description {
    max-width: 600px;
    margin: 0 auto 39px;
    color: #454545;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}

.toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #606060;
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 52px;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #D9D9D94D;
    border: 1px solid #000000;
    border-radius: 30px;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: #000;
    border-radius: 50%;
    transition: 0.4s;
}

input:checked+.slider {
    background-color: #000;
}

input:checked+.slider:before {
    transform: translateX(24px);
    background-color: #fff;
}

/* Pricing Cards */
.pricing-cards {
    display: flex;
    gap: 43px;
    justify-content: center;
    flex-wrap: wrap;
}

.card {
    background: #fff;
    border-radius: 36px;
    box-shadow: -9px 18px 44px 0px #00000008,
        -37px 72px 81px 0px #00000008,
        -84px 161px 109px 0px #00000005,
        -149px 286px 129px 0px #00000000,
        -233px 448px 141px 0px #00000000;
    width: calc((100% / 3) - 43px);
    text-align: left;
    display: flex;
    flex-direction: column;
}

.card.purple {
    background: #A7BEFB;
}

.card.pink {
    background: #F8DBFE;
}

.card.black {
    background: #181818;
    color: #fff;
}

.card.black .price,
.card.black .per {
    color: #fff;
}

.card.black .pricing-features li img {
    filter: invert(1);
}

.card.black .btn {
    background: #fff;
    color: #000;
}

.card .card_header {
    border-bottom: 1px solid #00000033;
    padding: 24px 30px;
}

.card .card-body {
    padding: 24px 30px;
}



.card .plan {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 9px;
}

.card .price {
    font-size: 41.31px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 5px;
}

.card .price .old-price {
    font-size: 30px;
    text-decoration: line-through;
    color: #B9B9B9;
    margin-left: 10px;
}

.card .per {
    font-size: 17px;
    font-weight: 400;
    color: #606060;
}

.card .pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.card .pricing-features li {
    display: flex;
    align-items: center;
    gap: 20px;
    line-height: 1.6;
    font-size: 17px;
    font-weight: 400;
}

.card .pricing-features li.not-included {
    color: #606060;
}

.card .pricing-features li.not-included img {
    filter: grayscale(1) opacity(0.6);
}

.card .pricing-features .disabled {
    color: #aaa;
}

.card .pricing-features .disabled::before {
    color: #ccc;
}

.card .btn {
    margin-top: auto;
    padding: 17px;
    border-radius: 50px;
    border: none;
    background: #000;
    color: #fff;
    font-weight: 400;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
}

.btn:hover {
    background: #333;
}

.menu-icon {
    display: none;
    cursor: pointer;
}

.section-header {
    text-align: center;
    margin-bottom: 38px;
}

.navbar .middle-menu-box ul li a img,
.hamberger .close-menu,
.middle-menu-box .blue-btn {
    display: none;
}

.login-button-box {
    opacity: 1;
}

/* Testimonials */
.testimonials,
.faq {
    background: #FFFAEE;
    padding: 68px 0 96px 0;
    position: relative;
}

.testimonials {
    padding-bottom: 160px;
}

.right-path {
    position: absolute;
    right: 0;
    top: 5%;
}

.left-duddle {
    position: absolute;
    left: 0;
    top: 0;
}

.right-flw {
    position: absolute;
    right: 0;
    bottom: 0;
}

.testimonial-swiper {
    padding-top: 38px !important;
}

.testimonial-card {
    background: #fff;
    border-radius: 36px;
    padding: 24px;
    text-align: left;
    /* min-height: 220px; */
}

.testimonial-card .profile_img img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: contain;
}

.testimonial-card p.comment {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
    margin-bottom: 8px;
    letter-spacing: 0.2px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    min-height: 62px;
}

.testimonial-card .author p {
    font-family: "Dancing Script", cursive;
    font-style: normal;
    font-size: 28px;
    font-weight: 400;
    color: #606060;
    letter-spacing: 0.4px;
    margin-bottom: 0;
}

.testimonial-card .author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.testimonial-card .author img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.testimonial-card .author span {
    font-weight: 600;
}

/* FAQ */
.faq-list {
    max-width: 630px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 24px 32px;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    border: none;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.faq-question img {
    transform: rotate(180deg);
    transition: transform 0.3s;
}

.faq-item.active .faq-question img {
    transform: rotate(360deg);
    transition: transform 0.3s;
}

.faq-item.active .faq-question {
    padding: 24px 32px 16px 32px;
}

.faq-answer {
    display: none;
    overflow: hidden;
    padding: 0 16px;
}

.faq-item.active .faq-answer {
    display: block;
    padding: 0 16px 24px 30px;
}

.faq-item .faq-answer p {
    color: #5D5D5D;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.stacked-cards {
    /* padding: 40px 0; */
    /* padding-top: 0 !important; */
    padding: 75px 0 200px 0;
    position: relative;
    min-height: 100vh !important;
    height: auto !important;
}

.stacked-cards .left-path {
    position: absolute;
    left: 0;
    bottom: 20%;
}

.stacked-cards .right-path {
    top: 15%;
}

.stacked-cards-list {
    display: flex;
    flex-direction: column;
    position: relative;
}

.stacked-cards-list .stacked-card:nth-child(2),
.stacked-cards-list .stacked-card:nth-child(3) {
    /* margin-top: -70%; */
    position: absolute;
    left: 0;
    right: 0;
}

/* Optional hover effect to bring card forward */

.stacked-cards-list .stacked-card.pink {
    background-color: #F8DBFE;
    top: 27%;
}

.stacked-cards-list .stacked-card.sky-blue {
    background-color: #C1E5FF;
    top: 14%;
}

.stacked-cards-list .stacked-card.cream {
    background-color: #FFFAEE;
}

.stacked-cards-list .stacked-card {
    border-radius: 46px;
    padding: 24px 30px;
    /* box-shadow: 0px -17px 38px 0px #00000008,
        0px -68px 68px 0px #00000008,
        0px -153px 92px 0px #00000005,
        0px -273px 109px 0px #00000000,
        0px -426px 119px 0px #00000000; */
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.05),
        0 2px 6px rgba(0, 0, 0, 0.03);
}

.stacked-cards-list .stacked-card .card_heading {
    margin-bottom: 24px;
}

.stacked-cards-list .stacked-card .card_heading h6 {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 28.4px;
    font-weight: 500;
    line-height: 1.4;
    color: #000000;
    margin-bottom: 8px;
}

.stacked-cards-list .stacked-card .card_heading p {
    font-size: 14.4px;
    letter-spacing: 0.2px;
    font-weight: 400;
    color: #000000;
    line-height: 1.3;
}

.stacked-cards .stacked-cards-wrapper {
    max-width: 630px;
    margin: 0 auto;
}

.scroll-slider {
    background: #F8DBFE;
    padding: 140px 0;
    overflow: hidden;
}

.scroll-slider .scroll-slider-wrapper h2 {
    text-transform: uppercase;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.4px;
    color: #000000;
    white-space: nowrap;
    margin-bottom: 55px;
}

.scroll-slider .scroll-slider-wrapper ul {
    list-style-type: none;
    display: flex;
    align-items: center;
}

.scroll-slider .scroll-slider-wrapper ul li {
    border-radius: 48px;
    background: #FFFFFF;
    padding: 36px;
}

.scroll-slider .scroll-slider-wrapper ul li h6 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #000000;
    font-size: 28.4px;
    font-weight: 500;
    letter-spacing: 0.4px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.scroll-slider .scroll-slider-wrapper ul li p {
    font-size: 14.4px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.2px;
    color: #000000;
}

.scroll-slider .scroll-slider-wrapper ul li .slide_img {
    margin-top: 36px;
}

.stacked-cards-list .stacked-card .card_img img {
    width: 100%;
    height: 360px;
    object-fit: contain;
}

.scroll-slider .scroll-slider-wrapper ul li .slide_img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 32px;
}

.payment_faster {
    padding: 210px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment_faster .payment_faster_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 52px;
    position: relative;
}

.payment_faster .payment_faster_wrapper::after {
    content: "";
    width: 770px;
    height: 450px;
    top: 0;
    right: 30px;
    background: linear-gradient(106.1deg, #464EE5 18.66%, #F8DBFE 56.42%, #FFFFFF 85.59%);
    filter: blur(100px);
    position: absolute;
    transform: rotate(157deg);
    z-index: -1;
    border-radius: 50%;
}

/* .bg-gradient{
    position: absolute;
    width: 770px;
    height: 450px;
    top: 0;
    right: 0;
    background: linear-gradient(106.1deg, #464EE5 18.66%, #F8DBFE 56.42%, #FFFFFF 85.59%);
    backdrop-filter: blur(264px);
} */
.payment_faster .payment_faster_wrapper h2 {
    text-align: center;
    color: #00000026;
    font-size: 130px;
    font-weight: 700;
    line-height: 1.2;
}

.payment_faster .payment_faster_wrapper .payment-count {
    width: 100%;
}

.payment_faster .payment_faster_wrapper .payment-count ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    width: 100%;
}

.payment_faster .payment_faster_wrapper .payment-count ul li {
    width: calc(100% / 4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payment_faster .payment_faster_wrapper .payment-count ul li h3 {
    color: #000000;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.2;
}

.payment_faster .payment_faster_wrapper .payment-count ul li p {
    color: #606060;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 10px;
}

.payment_faster_wrapper .blue-btn .button__wrapper {
    padding: 16px 30px;
}

.features {
    min-height: 100vh !important;
    height: auto !important;
}

.features .feature-slide.lightblue {
    background-color: #C1E5FF;
}

.features .feature-slide.cream {
    background: #FFFAEE;
}

.features .feature-slide.green {
    background: #BCF5D7;
}

.features .feature-slide.pink {
    background-color: #F8DBFE;
}

.features .features-wrapper {
    display: flex;
}

.features .feature-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 127px 29px;
    /* width: calc(100% / 4); */
    overflow: hidden;
}

.features .feature-slide .slide_wrapper .feature_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
}

.features .feature-slide .slide_wrapper .feature_head img,
.features .feature-slide .slide_wrapper .feature_head svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 100%;
}

.feature_screen {
    z-index: 2;
}

.feature_screen .iphone {
    display: block;
    max-width: 100%;
    width: 277px;
    height: auto;
    aspect-ratio: 9 / 16;
}

/* Common transition for all phones & list items */
.feature_screen .iphone,
.feature_screen .sites-list li {
    transition: transform 0.6s ease;
    transform: none;
    /* baseline for smooth back transition */
}

/* ========== 1st SLIDE ========== */

.features .feature-slide:nth-child(1) .feature_screen:hover .iphone {
    transform: perspective(1200px) rotate3d(0, 2, -0.01, 31deg);
}

.features .feature-slide:nth-child(1) .feature_screen:hover .sites-list li:first-child {
    transform: translate(32%, -10px);
}

.features .feature-slide:nth-child(1) .feature_screen:hover .sites-list li:nth-child(2) {
    transform: translate(25%, -3px);
}

.features .feature-slide:nth-child(1) .feature_screen:hover .sites-list li:nth-child(3) {
    transform: translate(20%, 0px);
}

.features .feature-slide:nth-child(1) .feature_screen:hover .sites-list li:nth-child(4) {
    transform: translate(17%, 0px);
}

.features .feature-slide:nth-child(1) .feature_screen:hover .sites-list li:nth-child(5),
.features .feature-slide:nth-child(1) .feature_screen:hover .sites-list li:nth-child(6) {
    transform: translate(12%, 0px);
}

/* ========== 2nd SLIDE ========== */
.features .feature-slide:nth-child(2) .feature_screen .iphone {
    transform: perspective(1200px) rotate3d(0, 0, 0, 0);
    /* baseline */
}

.features .feature-slide:nth-child(2) .feature_screen:hover .iphone {
    transform: perspective(1200px) rotate3d(1.3, -2, 0, 25deg);
}

.features .feature-slide:nth-child(2) .feature_screen .sites-list li {
    transform: translate(0, 0);
    /* baseline */
}

.features .feature-slide:nth-child(2) .feature_screen:hover .sites-list li:first-child {
    transform: translate(-30%, -6px);
}

.features .feature-slide:nth-child(2) .feature_screen:hover .sites-list li:nth-child(2) {
    transform: translate(-20%, -3px);
}

.features .feature-slide:nth-child(2) .feature_screen:hover .sites-list li:nth-child(3) {
    transform: translate(-12%, 0px);
}

.features .feature-slide:nth-child(2) .feature_screen:hover .sites-list li:nth-child(4),
.features .feature-slide:nth-child(2) .feature_screen:hover .sites-list li:nth-child(5),
.features .feature-slide:nth-child(2) .feature_screen:hover .sites-list li:nth-child(6) {
    transform: translate(-9%, 0px);
}

.features .feature-slide:nth-child(2) .feature_screen:hover .sites-list li {
    transition-delay: calc(var(--i, 0) * 0.08s);
}


/* ========== 3rd SLIDE ========== */
.features .feature-slide:nth-child(3) .feature_screen .iphone {
    transform: perspective(1200px) rotate3d(0, 0, 0, 0);
}

.features .feature-slide:nth-child(3) .feature_screen:hover .iphone {
    transform: perspective(1200px) rotate3d(0, 2, -0.01, 31deg);
}

.features .feature-slide:nth-child(3) .feature_screen .sites-list li {
    transform: translate(0, 0);
}

.features .feature-slide:nth-child(3) .feature_screen:hover .sites-list li:first-child {
    transform: translate(30%, -8px);
}

.features .feature-slide:nth-child(3) .feature_screen:hover .sites-list li:nth-child(2) {
    transform: translate(20%, -3px);
}

.features .feature-slide:nth-child(3) .feature_screen:hover .sites-list li:nth-child(3) {
    transform: translate(12%, 0px);
}

.features .feature-slide:nth-child(3) .feature_screen:hover .sites-list li:nth-child(4),
.features .feature-slide:nth-child(3) .feature_screen:hover .sites-list li:nth-child(5),
.features .feature-slide:nth-child(3) .feature_screen:hover .sites-list li:nth-child(6) {
    transform: translate(9%, 0px);
}

.features .feature-slide:nth-child(3) .feature_screen:hover .sites-list li {
    transition-delay: calc(var(--i, 0) * 0.08s);
}

/* ---------- Typewriter effect for <h6> ---------- */
.features .feature-slide:nth-child(3) .feature_screen .hero_profile h6 {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid transparent;
    width: 100%;
}

.features .feature-slide:nth-child(3) .feature_screen:hover .hero_profile h6 {
    animation: typewriter 2s steps(12, end) forwards, blink 0.7s step-end infinite;
}

/* keyframes */
@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 12ch;
    }
}

.feature_screen .hero_profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@keyframes blink {
    50% {
        border-color: #fff;
    }

    /* blinking cursor */
}

/* ========== 4th SLIDE ========== */
.features .feature-slide:nth-child(4) .feature_screen .iphone {
    transform: perspective(1200px) rotate3d(0, 0, 0, 0);
}

.features .feature-slide:nth-child(4) .feature_screen:hover .iphone {
    transform: perspective(1200px) rotate3d(0, -2, -0.01, 31deg);
}

.features .feature-slide:nth-child(4) .feature_screen .sites-list li {
    transform: translate(0, 0);
}

.features .feature-slide:nth-child(4) .feature_screen:hover .sites-list li:first-child {
    transform: translate(-30%, -10px);
}

.features .feature-slide:nth-child(4) .feature_screen:hover .sites-list li:nth-child(2) {
    transform: translate(-20%, -3px);
}

.features .feature-slide:nth-child(4) .feature_screen:hover .sites-list li:nth-child(3) {
    transform: translate(-12%, 0px);
}

.features .feature-slide:nth-child(4) .feature_screen:hover .sites-list li:nth-child(4),
.features .feature-slide:nth-child(4) .feature_screen:hover .sites-list li:nth-child(5),
.features .feature-slide:nth-child(4) .feature_screen:hover .sites-list li:nth-child(6) {
    transform: translate(-9%, 0px);
}

.features .feature-slide:nth-child(4) .feature_screen:hover .sites-list li {
    transition-delay: calc(var(--i, 0) * 0.1s);
}

.feature_screen img {
    width: 100%;
}

.features .feature-slide .slide_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
}

.features .feature-slide .slide_wrapper h4 {
    color: #000000;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    z-index: 2;
}

.features .feature-slide .slide_wrapper .feature_head p {
    color: #454545;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    z-index: 2;
}

.features .feature-slide .slide_wrapper .feature_head .iphone-path {
    display: block;
    width: auto;
    height: auto;
}

.pie-chart {
    padding: 20px;
    border-radius: 22px;
    box-shadow: 7px 8px 24px 0px #0000000D,
        29px 33px 44px 0px #0000000A,
        65px 75px 60px 0px #00000005,
        115px 134px 71px 0px #00000003,
        179px 209px 77px 0px #00000000;
    background: #FFFFFF;
    transform: translate(90px, 10px) rotateZ(10deg);

}

.pie-chart svg {
    width: 100%;
}

.pie-chart p {
    color: #000000;
    font-size: 11.49px;
    font-weight: 700;
    line-height: 1.3;
}

.pie-chart .chart-pointer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pie-chart .chart-pointer div {
    font-size: 10px;
    font-weight: 600;
    color: #000000;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pie-chart .chart-pointer .d-purple {
    background-color: #3035A3;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.pie-chart .chart-pointer .m-purple {
    background-color: #4246CD;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.pie-chart .chart-pointer .l-purple {
    background-color: #464EE5;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.total-clicks {
    background: #BCF5D7;
    padding: 20px;
    border-radius: 32px;
    box-shadow: -5px 6px 17px 0px #00000008,
        -19px 24px 31px 0px #00000008,
        -42px 55px 42px 0px #00000005,
        -74px 98px 49px 0px #00000000,
        -116px 153px 54px 0px #00000000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 57px;
    transform: translate(-25px, -45px) rotateZ(-9deg);
}

.total-clicks h6 {
    font-size: 16.63px;
    font-weight: 700;
    line-height: 1.4;
    color: #000000;
}

.total-clicks h3 {
    font-size: 33.25px;
    font-weight: 600;
    line-height: 1.4;
    color: #000000;
    margin-bottom: 8px;
}

.total-clicks p {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #454545;
    font-size: 12.47px;
    font-weight: 500;
}

.total-clicks p img {
    transform: rotate(270deg);
    height: 16px;
}

.total-clicks p span {
    font-size: 16.63px;
}

/* Make split words behave and start hidden below (we animate them via GSAP) */
.payment_faster .pWord {
    display: inline-block;
    /* overflow: hidden; */
}

/* When we add .black class to spans inside payment H2, make them visually stronger */
.payment_faster .payment_faster_wrapper h2 span.black {
    color: #000000;
    transition: color 220ms ease;
}

.wordParent,
.lineChild,
.lineParent,
.res-word {
    overflow: hidden;
}

/* Hero section elements start hidden */
.heading_dv h2,
.heading_dv p,
.shorten-url-wrapper {
    opacity: 0;
}

.resources {
    padding: 50px 0 180px 0;
}

.resource-header {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 40px;
}

.resource-header h2 {
    font-size: 60px;
    font-weight: 700;
    color: #000000;
}

.resource-header p {
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    line-height: 1.3;
}

.resources .resource-wrapper ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    list-style-type: none;
    width: 100%;
    gap: 20px;
}

.resources .resource-wrapper ul li {
    width: calc((100% / 3) - 20px);
}

.resources .resource-wrapper ul li .resource-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.resources .resource-wrapper ul li .img_section {
    position: relative;
    border-radius: 38px;
    overflow: hidden;
}

.resources .resource-wrapper ul li .img_section:hover img.thumbnail {
    transition: all 2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale(1.1);
}

.resources .resource-wrapper ul li .img_section img {
    transition: all 2s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: 38px;
    overflow: hidden;
}

.resources .resource-wrapper ul li .img_section img {
    width: 100%;
}

.resources .resource-wrapper ul li .img_section .category_name {
    color: #FFFFFF;
    background-color: #464EE5;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    padding: 10px;
    border-radius: 50px;
    position: absolute;
    left: 15px;
    top: 15px;
}

.resources .resource-wrapper ul li .img_section .detail-link {
    position: absolute;
    bottom: 15px;
    right: 15px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.resources .resource-wrapper ul li .img_section .detail-link:hover {
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

.resources .resource-wrapper ul li:hover .img_section .detail-link {
    opacity: 1;
    pointer-events: visible;
    cursor: pointer;
}

.resources .resource-wrapper ul li .resource_body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 30px;
}

.resources .resource-wrapper ul li .resource_body h6 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: #000000;
}

.resources .resource-wrapper ul li .resource_body p {
    color: #454545;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.resources-listing,
.blog-detail {
    position: relative;
}

.resources-listing .listing-leftpath,
.blog-detail .listing-leftpath {
    position: fixed;
    left: 0;
    top: 20%;
    z-index: -1;
}

.resources-listing .listing-rightpath,
.blog-detail .listing-rightpath {
    position: fixed;
    right: 0;
    z-index: -1;
    top: 35%;
}

.detail-wrapper {
    display: flex;
    gap: 90px;
}

.blog-detail .detail {
    padding-top: 12px;
    padding-bottom: 180px;
}

.author_div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.author_div .category-name p {
    color: #FFFFFF;
    padding: 10px;
    background: #464EE5;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
}

.author_div .author-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
}

.blog-heading h2 {
    font-size: 32px;
    font-weight: 600;
    color: #000000;
    line-height: 1.4;
}

.detail h4 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: #454545;
}

.detail p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    margin: 8px 0 26px 0;
    color: #454545;
}

.blog-detail-img img {
    width: 100%;
    transition: all 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.blogimg img {
    transition: all 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.blog-detail-img:hover img,
.blogimg:hover img {
    transition: all 2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale(1.1);
}

.author_div .author-detail .author_name h6 {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    line-height: 1.3;
}

.author_div .author-detail .author_name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.author_div .author-detail .author_name p {
    color: #454545;
    font-size: 12px;
    font-weight: 500;
    margin: 0;
}

.author_div .author-detail .author_name p span {
    color: #464EE5;
}

.blogimg,
.blog-detail-img {
    border-radius: 38px;
    overflow: hidden;
}

.table-content {
    border-radius: 38px;
    background: #f6f6f6;
    padding: 35px;
    margin-top: 35px;
}

.table-content .header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
}

.table-content ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 0 28px 0;
}

.table-content ul li a {
    font-size: 14px;
    font-weight: 600;
    color: #4F4F4F;
    line-height: 1.3;
    text-decoration: none;
}

.table-content .upgrade-pro {
    background: #464EE5;
    box-shadow: 0px 1px 2px 0px #0D0D120F;
    border-radius: 16px;
    padding: 16px;
}

.table-content .upgrade-pro .header {
    color: #FFFFFF;
    line-height: 1.4;
}

.table-content .upgrade-pro p {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    margin: 4px 0 12px 0;
}

.table-content .upgrade-pro a {
    border-radius: 8px;
    background-color: #000000;
    box-shadow: 0px 1px 2px 0px #0D0D120F;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    width: 100%;
    display: flex;
    justify-content: center;
    text-decoration: none;
    padding: 8px;
}

/* Marquee heading */
.marquee {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.marquee-inner {
    display: flex;
    white-space: nowrap;
}

.marquee h2 {
    display: inline-block;
    white-space: nowrap;
    font-size: 32px;
    padding-right: 40rem;
    /* adjust */
}

.card.black .card_header {
    border-bottom: 1px solid #FFFFFF;
}

/* Swiper slider */
.scroll-slider .swiper {
    padding-left: 140px;
}

.scroll-slider .swiper-slide {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 20px;
    transition: transform 0.3s ease;
}

/* Add to style/style.css */
.contact-popup-overlay {
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contact-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 26px;
}

#contact-form label {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin-top: 15px;
}

#contact-form input {
    padding: 16px 20px;
    border: 1px solid #E7E7E7;
    border-radius: 50px;
}

.contact-popup {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    width: 30%;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.contact-popup h3 {
    margin-top: 0;
}

.popup-actions {
    display: flex;
    gap: 10px;
    margin-top: 1rem;
}

.popup-actions button {
    width: calc((100% / 2) - 10px);
    cursor: pointer;
}

.popup-actions .blue-btn {
    color: #FFFFFF;
    padding: 11px;
    background-color: #464EE5;
    border-radius: 32px;
    font-size: 16px;
    border: none;
    font-weight: 700;
}

.popup-actions .black-btn {
    color: #464EE5;
    padding: 11px;
    border: 2px solid #464EE5;
    border-radius: 32px;
    font-size: 16px;
    font-weight: 700;
    background: transparent;
}

.input-box {
    width: 447px;
}

.input-box .input-wrapper {
    display: flex;
    align-items: center;
    background: #EEF4FF;
    border-radius: 337.35px;
    padding: 7px;
}

.input-box .input-wrapper input {
    border: none;
    outline: none;
    padding: 4px 20px;
    background: transparent;
    width: 100%;
    color: #464EE5 !important;
    font-size: 20px !important;
    font-family: "Manrope", sans-serif;
    font-weight: 600 !important;
}

.input-box .input-wrapper img {
    object-fit: contain;
    transition: all 0.3s ease;
}
.blue-bg-circle {
    width: 53.52px;
    height: 53.52px;
    min-width: 53.52px;
    min-height: 53.52px;
    border-radius: 50%;
    background-color: #464EE5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
/* Loader icon hidden by default */
#shortenBtn img.loading {
    display: none;
    animation: spin 1s linear infinite;
}

/* Rotate effect */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* When active, hide arrow and show loader */
#shortenBtn.loading-active .white-arr {
    display: none;
}

#shortenBtn.loading-active .loading {
    display: inline-block;
}
.input-box .input-wrapper .blue-bg-circle:hover img{
    cursor: pointer;
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

.input-box .input-wrapper input::placeholder {
    color: #464EE5;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.22px;
}

.shorten-url-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transform-origin: left center;
}

.shorten-url-wrapper .input-box {
    width: 100%;
}

.shorten-url-wrapper .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #EEF4FF;
    overflow: hidden;
}
/* Popup overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Popup box */
.popup-content {
    background: #fff;
    border-radius: 30px;
    padding: 30px;
    width: 35%;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
}
.purple-pp{
        position: absolute;
            top: -45px;
            left: -45px;
            background: transparent;
            width: 145px;
            height: auto;
}
.close-popup{
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    cursor: pointer;
}
.popup-logo{
        margin-bottom: 26px;
}
.popup-content h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
    color: #000;
}

.popup-content .popup-sub {
    font-size: 14px;
    font-weight: 600;
    color: #5D5D5D;
    margin-bottom: 26px;
}
.long-url-box{
    display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
.long-url-box label{
    font-size: 14px;
    font-weight: 600;
    color: #000000;
}
.long-url-box input {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid #E7E7E7;
    border-radius: 50px;
    font-size: 16px;
    margin-bottom: 20px;
    color: #6D6D6D;
}

.qr-box img {
    width: 200px;
    height: 200px;
    margin: 10px auto;
    display: block;
}

.short-url {
    color: #464EE5;
    font-size: 22px;
    font-weight: 600;
    margin: 15px 0;
    cursor: pointer;
        display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
}

.popup-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
        padding-top: 26px;
            border-top: 1px solid #D1D1D1;
}

.popup-btns button {
    padding: 11px;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    font-size: 16px;
        font-weight: 700;
        width: calc((100% / 2) - 10px);
}

#shortenAnotherBtn {
    color: #464EE5;
    border: 2px solid #464EE5;
    background: transparent;
}

#downloadQRBtn, #createShortBtn{
    background: #464EE5;
    color: #fff;
}
#createShortBtn{ width: 100% !important; }
/* #qrImage{
    display: none;
} */