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


body  {
    
    font-family: Arial, Helvetica, sans-serif;
    
    background: #ffffff;
}


.w4ll-header  {
    
    width: 100%;
    
    background: #ffffff;
    
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
}


.nav-container  {
    
    padding: 18px 70px;
}


.w4ll-logo img  {
    
    width: 145px;
    
    height: auto;
    
    display: block;
}


.desktop-menu  {
    
    width: 100%;
}


.nav-menu  {
    
    gap: 24px;
    
    align-items: center;
}


.nav-menu .nav-link,
.mobile-nav-menu .nav-link  {
    
    position: relative;
    
    color: #050505;
    
    font-size: 16px;
    
    font-weight: 500;
    
    padding: 8px 0 !important;
}


.nav-menu .nav-link:hover,
.mobile-nav-menu .nav-link:hover  {
    
    color: #c91eff;
}


.nav-menu .nav-link.active  {
    
    color: #050505;
}


.nav-menu .nav-link.active::after  {
    
    content: "";
    
    position: absolute;
    
    left: 0;
    
    bottom: -7px;
    
    width: 100%;
    
    height: 3px;
    
    border-radius: 10px;
    
    background: linear-gradient(90deg, #d72cff, #8b4dff);
}


.nav-buttons  {
    
    display: flex;
    
    align-items: center;
    
    gap: 14px;
}


.login-btn  {
    
    min-width: 82px;
    
    height: 42px;
    
    border: 1px solid #3466ff;
    
    color: #111111;
    
    font-size: 14px;
    
    font-weight: 700;
    
    border-radius: 7px;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
}


.login-btn:hover  {
    
    background: #3466ff;
    
    color: #ffffff;
}


.started-btn  {
    
    min-width: 112px;
    
    height: 42px;
    
    border: none;
    
    color: #ffffff;
    
    font-size: 14px;
    
    font-weight: 700;
    
    border-radius: 7px;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
    
    background: linear-gradient(90deg, #eb28cc, #1f64ff);
    
    box-shadow: 0 8px 18px rgba(49, 95, 255, 0.25);
}


.started-btn:hover  {
    
    color: #ffffff;
    
    transform: translateY(-1px);
}


.custom-toggler  {
    
    border: none;
    
    box-shadow: none !important;
}


.custom-toggler:focus  {
    
    box-shadow: none;
}


.mobile-offcanvas  {
    
    width: 310px;
    
    border-right: none;
}


.offcanvas-header  {
    
    padding: 22px;
    
    border-bottom: 1px solid #eeeeee;
}


.custom-close  {
    
    box-shadow: none !important;
}


.offcanvas-body  {
    
    padding: 20px 24px;
}


.mobile-nav-menu  {
    
    gap: 8px;
}


.mobile-nav-menu .nav-link  {
    
    font-size: 15px;
    
    padding: 12px 0 !important;
    
    border-bottom: 1px solid #f0f0f0;
}


.mobile-nav-menu .nav-link.active  {
    
    color: #c91eff;
}


.mobile-buttons  {
    
    display: flex;
    
    flex-direction: column;
    
    gap: 14px;
    
    margin-top: 28px;
}


.mobile-buttons .login-btn,
.mobile-buttons .started-btn  {
    
    width: 100%;
}

/* Put this BELOW all existing CSS */
@media (max-width: 991px) {
    .mobile-offcanvas {
        width: 75vw !important;
        max-width: 75vw !important;
    }
}

@media (max-width:1399px)  {
    
    .nav-container  {
        
        padding: 16px 45px;
    }
    

    .nav-menu  {
        
        gap: 17px;
    }
    

    .nav-menu .nav-link  {
        
        font-size: 13px;
    }
}


@media (max-width:1199px)  {
    
    .nav-container  {
        
        padding: 15px 30px;
    }
    

    .w4ll-logo img  {
        
        width: 130px;
    }
    

    .nav-menu  {
        
        gap: 12px;
    }
    

    .nav-menu .nav-link  {
        
        font-size: 12px;
    }
    

    .login-btn  {
        
        min-width: 74px;
    }
    

    .started-btn  {
        
        min-width: 102px;
    }
}


/* @media (max-width:991px)  {
    
    .nav-container  {
        
        padding: 14px 22px;
    }
    

    .w4ll-logo img  {
        
        width: 125px;
    }
} */


@media (max-width:575px)  {
    
    .nav-container  {
        
        padding: 13px 16px;
    }
    

    .w4ll-logo img  {
        
        width: 115px;
    }
    

    .mobile-offcanvas  {
        
        width: 285px;
    }
}


.w4-hero-section  {
    
    position: relative;
    
    overflow: hidden;
    
    background: radial-gradient(circle at 76% 30%, rgba(234, 220, 255, 0.75), transparent 28%), radial-gradient(circle at 53% 52%, rgba(235, 245, 255, 0.9), transparent 30%), #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
}


.w4-hero-container  {
    
    padding: 24px 72px 28px;
}


.w4-badge,
.w4-bottom-badge  {
    
    width: fit-content;
    
    padding: 5px 14px;
    
    border: 1.5px solid #a86cff;
    
    border-radius: 50px;
    
    background: #ffffff;
    
    color: #8f45ff;
    
    font-size: 12px;
    
    font-weight: 800;
    
    text-transform: uppercase;
    
    line-height: 1;
}


.w4-badge i,
.w4-bottom-badge i  {
    
    color: #ec24cb;
    
    margin-right: 5px;
}


.w4-hero-content h1  {
    
    margin-top: 32px;
    
    margin-bottom: 0;
    
    font-size: 45px;
    
    line-height: 1.12;
    
    font-weight: 600;
    
    letter-spacing: -1.6px;
    
    color: #08091f;
}


.w4-hero-content h1 span  {
    
    background: linear-gradient(90deg, #ee139d 0%, #2369ff 90%);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-hero-text  {
    
    width: 88%;
    
    margin-top: 18px;
    
    margin-bottom: 0;
    
    color: #222838;
    
    font-size: 17.5px;
    
    line-height: 1.65;
}


.w4-stats  {
    
    display: flex;
    
    align-items: center;
    
    gap: 28px;
    
    margin-top: 34px;
    
    flex-wrap: nowrap;
}


.w4-stat-item  {
    
    display: flex;
    
    align-items: center;
    
    gap: 3px;
}


.w4-stat-icon  {
    
    width: 47px;
    
    height: 47px;
    
    border: 1.5px solid #2c67ff;
    
    border-radius: 10px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    color: #2368ff;
    
    font-size: 25px;
    
    background: #ffffff;
}


.w4-stat-item h5  {
    
    margin: 0;
    
    color: #08091f;
    
    font-size: 18px;
    
    font-weight: 600;
    
    line-height: 1.1;
}


.w4-stat-item p  {
    
    margin: 2px 0 0;
    
    color: #1d2433;
    
    font-size: 12px;
    
    font-weight: 500;
}


.w4-hero-buttons  {
    
    display: flex;
    
    align-items: center;
    
    gap: 16px;
    
    margin-top: 34px;
}


.w4-start-btn,
.w4-demo-btn  {
    
    height: 55px;
    
    padding: 0 34px;
    
    border-radius: 8px;
    
    font-size: 16px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-start-btn  {
    
    border: none;
    
    color: #ffffff;
    
    background: linear-gradient(90deg, #ed159d 0%, #2269ff 100%);
    
    box-shadow: 0 10px 22px rgba(37, 105, 255, 0.18);
}


.w4-start-btn:hover  {
    
    color: #ffffff;
    
    transform: translateY(-1px);
}


.w4-demo-btn  {
    
    gap: 9px;
    
    color: #111827;
    
    border: 1.5px solid #2c67ff;
    
    background: #ffffff;
}


.w4-demo-btn i  {
    
    color: #2368ff;
    
    font-size: 20px;
}


.w4-demo-btn:hover  {
    
    color: #ffffff;
    
    background: #2368ff;
}


.w4-demo-btn:hover i  {
    
    color: #ffffff;
}


.w4-trust-box  {
    
    display: flex;
    
    align-items: center;
    
    gap: 18px;
    
    margin-top: 52px;
}


.w4-avatar-group  {
    
    display: flex;
    
    align-items: center;
}


.w4-avatar-group img  {
    
    width: 35px;
    
    height: 35px;
    
    margin-left: -6px;
    
    border-radius: 50%;
    
    border: 2px solid #ffffff;
    
    object-fit: cover;
    
    background: #ddd;
}


.w4-avatar-group img:first-child  {
    
    margin-left: 0;
}


.w4-trust-box p  {
    
    max-width: 380px;
    
    margin: 0;
    
    color: #111827;
    
    font-size: 13px;
    
    line-height: 1.55;
    
    font-weight: 500;
}


.w4-hero-visual  {
    
    position: relative;
    
    min-height: 575px;
}


.w4-circle-bg  {
    
    position: absolute;
    
    width: 590px;
    
    height: 590px;
    
    top: 0;
    
    right: 90px;
    
    border-radius: 50%;
    
    border: 2px solid rgba(181, 131, 255, 0.45);
    
    background: radial-gradient(circle, rgba(249, 241, 255, 0.85), transparent 65%);
}


.w4-laptop-img  {
    
    position: absolute;
    
    width: 680px;
    
    top: 0;
    
    right: 130px;
    
    z-index: 2;
}


.w4-mobile-img  {
    
    position: absolute;
    
    width: 205px;
    
    top: 118px;
    
    right: 38px;
    
    z-index: 5;
}


.w4-float-card  {
    
    position: absolute;
    
    width: 68px;
    
    height: 68px;
    
    border-radius: 14px;
    
    background: #ffffff;
    
    box-shadow: 0 14px 32px rgba(48, 40, 95, 0.14);
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    z-index: 6;
    
    font-size: 28px;
}


.w4-icon-card-one  {
    
    left: 35px;
    
    top: 190px;
    
    color: #ec21c9;
}


.w4-icon-card-two  {
    
    right: 0;
    
    top: 24px;
    
    color: #6257ff;
}


.w4-icon-card-three  {
    
    right: 48px;
    
    top: 123px;
    
    color: #2c68ff;
}


.w4-analytics-card  {
    
    position: absolute;
    
    left: 70px;
    
    bottom: 45px;
    
    width: 270px;
    
    padding: 18px 22px 10px;
    
    border-radius: 14px;
    
    background: #ffffff;
    
    box-shadow: 0 18px 40px rgba(45, 36, 90, 0.16);
    
    z-index: 7;
}


.w4-analytics-card h6  {
    
    margin: 0 0 8px;
    
    color: #111827;
    
    font-size: 14px;
    
    font-weight: 900;
}


.w4-analytics-card p  {
    
    margin: 0;
    
    color: #6b7280;
    
    font-size: 12px;
    
    line-height: 1.2;
}


.w4-analytics-card strong  {
    
    color: #111827;
    
    font-size: 28px;
    
    font-weight: 900;
}


.w4-analytics-card span  {
    
    margin-left: 6px;
    
    color: #20b66b;
    
    font-size: 12px;
    
    font-weight: 700;
}


.w4-analytics-card svg  {
    
    width: 100%;
    
    height: 76px;
    
    margin-top: 4px;
}


.w4-analytics-card path  {
    
    fill: none;
    
    stroke: #f222a9;
    
    stroke-width: 4;
    
    stroke-linecap: round;
}


.w4-template-row  {
    
    display: grid;
    
    grid-template-columns: repeat(5, 1fr);
    
    gap: 24px;
    
    margin-top: 26px;
}


.w4-template-card  {
    
    padding: 10px;
    
    border: 2px solid #d9c9ff;
    
    border-radius: 12px;
    
    background: #ffffff;
    
    box-shadow: 0 10px 28px rgba(80, 70, 140, 0.08);
}


.w4-template-card img  {
    
    width: 100%;
    
    height: 105px;
    
    border-radius: 8px;
    
    display: block;
}


.w4-template-card h5  {
    
    margin: 16px 0 13px;
    
    text-align: center;
    
    color: #111827;
    
    font-size: 14px;
    
    font-weight: 700;
}


.w4-template-card div  {
    
    display: flex;
    
    gap: 8px;
}


.w4-template-card a  {
    
    flex: 1;
    
    padding: 9px 8px;
    
    border: 1.5px solid #2c68ff;
    
    border-radius: 6px;
    
    color: #111827;
    
    background: #ffffff;
    
    text-align: center;
    
    text-decoration: none;
    
    font-size: 13px;
    
    font-weight: 600;
}


.w4-template-card a:hover  {
    
    background: #eef3ff;
}


.w4-template-card .use-btn  {
    
    color: #ffffff;
    
    background: #096bff;
}


.w4-template-card .use-btn:hover  {
    
    color: #ffffff;
    
    background: #005be0;
}


.w4-bottom-badge  {
    
    margin: 35px auto 0;
}


@media (max-width:1399px)  {
    
    .w4-hero-container  {
        
        padding-left: 48px;
        
        padding-right: 48px;
    }
    

    .w4-hero-content h1  {
        
        font-size: 50px;
    }
    

    .w4-laptop-img  {
        
        width: 610px;
    }
    

    .w4-mobile-img  {
        
        width: 185px;
    }
}


@media (max-width:1199px)  {
    
    .w4-hero-content h1  {
        
        font-size: 44px;
    }
    

    .w4-hero-text  {
        
        width: 100%;
    }
    

    .w4-laptop-img  {
        
        width: 499px;
        
        right: 95px;
    }
    

    .w4-mobile-img  {
        
        width: 165px;
    }
    

    .w4-template-row  {
        
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width:991px)  {
    
    .w4-hero-container  {
        
        padding-left: 24px;
        
        padding-right: 24px;
    }
    

    .w4-hero-content  {
        
        text-align: center;
    }
    

    .w4-badge  {
        
        margin: 0 auto;
    }
    

    .w4-hero-content h1  {
        
        font-size: 46px;
    }
    

    .w4-stats,
    .w4-hero-buttons,
    .w4-trust-box  {
        
        justify-content: center;
    }
    

    .w4-hero-visual  {
        
        min-height: 520px;
        
        margin-top: 35px;
    }
    

    .w4-circle-bg  {
        
        right: 50%;
        
        transform: translateX(50%);
    }
    

    .w4-laptop-img  {
        
        width: 610px;
        
        right: 50%;
        
        transform: translateX(45%);
    }
    

    .w4-mobile-img  {
        
        right: 7%;
    }
    

    .w4-analytics-card  {
        
        left: 8%;
    }
    

    .w4-template-row  {
        
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width:767px)  {
    
    .w4-hero-content h1  {
        
        font-size: 38px;
    }
    

    .w4-hero-text  {
        
        font-size: 15px;
    }
    

    .w4-stat-item  {
        
        width: 45%;
        
        justify-content: center;
    }
    

    .w4-hero-buttons  {
        
        flex-direction: column;
    }
    

    .w4-start-btn,
    .w4-demo-btn  {
        
        width: 100%;
    }
    

    .w4-hero-visual  {
        
        min-height: 420px;
    }
    

    .w4-laptop-img  {
        
        width: 460px;
    }
    

    .w4-mobile-img  {
        
        width: 130px;
        
        top: 105px;
    }
    

    .w4-analytics-card  {
        
        width: 220px;
        
        left: 4%;
        
        bottom: 20px;
    }
    

    .w4-float-card  {
        
        width: 52px;
        
        height: 52px;
        
        font-size: 22px;
    }
    

    .w4-template-row  {
        
        grid-template-columns: 1fr;
    }
}


@media (max-width:575px)  {
    
    .w4-hero-container  {
        
        padding: 20px 16px 30px;
    }
    

    .w4-hero-content h1  {
        
        font-size: 32px;
        
        letter-spacing: -0.8px;
    }
    

    .w4-badge,
    .w4-bottom-badge  {
        
        font-size: 10px;
    }
    

    .w4-stats  {
        
        gap: 7px;
    }
    

    .w4-stat-item  {
        
        width: 100%;
    }
    

    .w4-trust-box  {
        
        flex-direction: column;
    }
    

    .w4-trust-box p  {
        
        text-align: center;
    }
    

    .w4-hero-visual  {
        
        min-height: 350px;
    }
    

    .w4-circle-bg  {
        
        width: 340px;
        
        height: 340px;
    }
    

    .w4-laptop-img  {
        
        width: 360px;
        
        top: 35px;
    }
    

    .w4-mobile-img  {
        
        width: 105px;
        
        right: 2%;
        
        top: 115px;
    }
    

    .w4-analytics-card  {
        
        width: 190px;
        
        left: 0;
        
        bottom: 5px;
        
        padding: 14px;
    }
    

    .w4-analytics-card strong  {
        
        font-size: 22px;
    }
    

    .w4-icon-card-one,
    .w4-icon-card-two,
    .w4-icon-card-three  {
        
        display: none;
    }
    

    .w4-template-card img  {
        
        height: 140px;
    }
}


.waall-work-pricing-section  {
    
    padding: 0 0 28px;
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.waall-section-title  {
    
    text-align: center;
}


.waall-section-title h2  {
    
    margin: 0;
    
    color: #07091f;
    
    font-size: 36px;
    
    font-weight: 600;
    
    line-height: 1.2;
}


.waall-section-title h2 span  {
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.waall-steps-wrapper  {
    
    position: relative;
    
    max-width: 1080px;
    
    margin: 14px auto 32px;
}


.waall-step-line  {
    
    position: absolute;
    
    top: 67px;
    
    left: 12%;
    
    right: 12%;
    
    border-top: 3px dashed #d9ccff;
    
    z-index: 0;
}


.waall-step-card  {
    
    position: relative;
    
    z-index: 2;
    
    text-align: center;
    
    padding: 4px 20px 0;
}


.waall-step-number  {
    
    position: absolute;
    
    top: 12px;
    
    left: 48px;
    
    width: 28px;
    
    height: 28px;
    
    border-radius: 50%;
    
    background: #ec168f;
    
    color: #ffffff;
    
    font-size: 13px;
    
    font-weight: 900;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.waall-step-icon  {
    
    width: 104px;
    
    height: 104px;
    
    margin: 0 auto 14px;
    
    border-radius: 50%;
    
    border: 2px solid #d6c5ff;
    
    background: radial-gradient(circle, #ffffff 45%, #f5f0ff 100%);
    
    color: #6b48ff;
    
    font-size: 46px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.waall-step-card h5  {
    
    margin: 0 0 8px;
    
    color: #090b22;
    
    font-size: 15px;
    
    font-weight: 700;
}


.waall-step-card p  {
    
    max-width: 160px;
    
    margin: 0 auto;
    
    color: #111827;
    
    font-size: 16px;
    
    font-weight: 500;
    
    line-height: 1.35;
}


.waall-small-badge  {
    
    width: fit-content;
    
    margin: 35px auto 20px;
    
    padding: 6px 15px;
    
    border: 1.5px solid #b26cff;
    
    border-radius: 30px;
    
    background: #ffffff;
    
    color: #7b4dff;
    
    font-size: 12px;
    
    font-weight: 900;
    
    text-transform: uppercase;
    
    box-shadow: 0 8px 18px rgba(129, 83, 255, 0.12);
}


.waall-small-badge i  {
    
    color: #ed149d;
    
    margin-right: 4px;
}


.pricing-title  {
    
    margin-bottom: 26px;
}


.pricing-title h2  {
    
    font-size: 32px;
}


.waall-pricing-card  {
    
    position: relative;
    
    max-width: 360px;
    
    height: 100%;
    
    margin: 0 auto;
    
    padding: 30px 46px 28px;
    
    border: 1.5px solid #d7e0ff;
    
    border-radius: 16px;
    
    background: #ffffff;
    
    box-shadow: 0 20px 45px rgba(42, 90, 180, 0.12);
}


.waall-pricing-card h4  {
    
    margin: 0;
    
    color: #080b35;
    
    text-align: center;
    
    font-size: 20px;
    
    font-weight: 700;
}


.waall-plan-subtitle  {
    
    margin: 6px 0 4px;
    
    color: #1f2937;
    
    text-align: center;
    
    font-size: 16px;
    
    font-weight: 500;
}


.waall-pricing-card h3  {
    
    margin: 0 0 22px;
    
    color: #1765ff;
    
    text-align: center;
    
    font-size: 38px;
    
    font-weight: 600;
}


.waall-pricing-card ul  {
    
    list-style: none;
    
    padding: 0;
    
    margin: 0 0 26px;
}


.waall-pricing-card ul li  {
    
    display: flex;
    
    align-items: center;
    
    gap: 12px;
    
    margin-bottom: 11px;
    
    color: #101827;
    
    font-size: 14px;
    
    font-weight: 500;
}


.waall-pricing-card ul li i  {
    
    color: #1765ff;
    
    font-size: 16px;
    
    font-weight: 900;
}


.waall-price-btn  {
    
    width: 100%;
    
    height: 50px;
    
    border-radius: 8px;
    
    color: #ffffff;
    
    text-decoration: none;
    
    font-size: 15px;
    
    font-weight: 700;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.blue-btn  {
    
    background: linear-gradient(90deg, #155cff, #246dff);
}


.pink-btn  {
    
    background: linear-gradient(90deg, #ec168f, #ec0789);
}


.waall-price-btn:hover  {
    
    color: #ffffff;
    
    transform: translateY(-2px);
}


.popular-card  {
    
    border: 2px solid #ec168f;
    
    box-shadow: 0 22px 50px rgba(236, 22, 143, 0.18);
}


.popular-card h4,
.popular-card h3  {
    
    color: #ec168f;
}


.popular-card ul li i  {
    
    color: #ec168f;
}


.waall-popular-label  {
    
    position: absolute;
    
    top: -15px;
    
    left: 50%;
    
    transform: translateX(-50%);
    
    min-width: 150px;
    
    padding: 8px 20px;
    
    border-radius: 0 0 14px 14px;
    
    background: #ec168f;
    
    color: #ffffff;
    
    text-align: center;
    
    font-size: 11px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.bottom-badge  {
    
    margin-top: 22px;
}


@media (max-width:1199px)  {
    
    .waall-pricing-card  {
        
        padding: 30px 32px 28px;
    }
}


@media (max-width:991px)  {
    
    .waall-work-pricing-section  {
        
        padding-top: 28px;
    }
    

    .waall-section-title h2  {
        
        font-size: 32px;
    }
    

    .waall-step-line  {
        
        display: none;
    }
    

    .waall-step-card  {
        
        padding: 10px 18px;
    }
    

    .waall-step-number  {
        
        left: 50%;
        
        transform: translateX(-68px);
    }
    

    .waall-pricing-card  {
        
        max-width: 420px;
    }
}


@media (max-width:767px)  {
    
    .waall-section-title h2  {
        
        font-size: 28px;
    }
    

    .pricing-title h2  {
        
        font-size: 26px;
    }
    

    .waall-step-icon  {
        
        width: 92px;
        
        height: 92px;
        
        font-size: 40px;
    }
    

    .waall-step-number  {
        
        top: 16px;
    }
}


@media (max-width:575px)  {
    
    .waall-work-pricing-section  {
        
        padding: 26px 0;
    }
    

    .waall-section-title h2  {
        
        font-size: 25px;
    }
    

    .waall-small-badge  {
        
        font-size: 10px;
        
        padding: 6px 12px;
    }
    

    .waall-pricing-card  {
        
        padding: 28px 24px 24px;
    }
    

    .waall-pricing-card h4  {
        
        font-size: 18px;
    }
    

    .waall-pricing-card h3  {
        
        font-size: 36px;
    }
    

    .waall-pricing-card ul li  {
        
        font-size: 13px;
    }
}


.w4-success-template-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-success-container  {
    
    padding: 0 76px 18px;
}


.w4-section-heading,
.w4-template-heading  {
    
    margin: 0;
    
    color: #08091f;
    
    text-align: center;
    
    font-size: 32px;
    
    font-weight: 600;
    
    line-height: 1.2;
    
    margin-bottom: 20px;
}


.w4-feature-grid  {
    
    display: grid;
    
    grid-template-columns: repeat(10, 1fr);
    
    gap: 18px;
    
    margin-top: 16px;
}


.w4-feature-card  {
    
    min-height: 130px;
    
    padding: 18px 10px 14px;
    
    border: 1px solid #e3e6f3;
    
    border-radius: 12px;
    
    background: #ffffff;
    
    text-align: center;
    
    box-shadow: 0 12px 28px rgba(39, 63, 120, 0.08);
}


.w4-feature-icon  {
    
    width: 42px;
    
    height: 42px;
    
    margin: 0 auto 12px;
    
    border-radius: 50%;
    
    background: linear-gradient(135deg, #f3169f, #2368ff);
    
    color: #ffffff;
    
    font-size: 22px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-feature-icon.green-icon  {
    
    background: #ffffff;
    
    color: #20b46b;
    
    border: 1px solid #96e3bf;
}


.w4-feature-icon.google-icon  {
    
    background: linear-gradient(90deg, #4285f4 0%, #ea4335 30%, #fbbc05 60%, #34a853 100%);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
    
    font-size: 30px;
    
    font-weight: 900;
}


.w4-feature-card h6  {
    
    margin: 0;
    
    color: #111827;
    
    font-size: 14px;
    
    line-height: 1.35;
}


.w4-small-badge  {
    
    width: fit-content;
    
    margin: 26px auto 8px;
    
    padding: 6px 15px;
    
    border: 1.5px solid #b26cff;
    
    border-radius: 30px;
    
    background: #ffffff;
    
    color: #7b4dff;
    
    font-size: 11px;
    
    font-weight: 900;
    
    text-transform: uppercase;
    
    box-shadow: 0 8px 18px rgba(129, 83, 255, 0.12);
}


.w4-small-badge i  {
    
    color: #ed149d;
    
    margin-right: 4px;
}


.w4-template-heading  {
    
    font-size: 30px;
}


.w4-template-tabs  {
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    gap: 28px;
    
    list-style: none;
    
    padding: 0;
    
    margin: 16px 0 18px;
    
    flex-wrap: wrap;
}


.w4-template-tabs button  {
    
    border: none;
    
    background: transparent;
    
    color: #111827;
    
    font-size: 13px;
    
    font-weight: 700;
    
    padding: 8px 15px;
    
    border-radius: 8px;
}


.w4-template-tabs button.active  {
    
    color: #ffffff;
    
    background: #ed149d;
}


.w4-template-tabs button:hover  {
    
    color: #ffffff;
    
    background: #2368ff;
}


.w4-feature-tabs button:hover  {
    
    color: #ffffff;
    
    background: #2368ff;
}


.template-tabs button:hover  {
    
    color: #ffffff;
    
    background: #2368ff;
}


.template-sort button:hover  {
    
    color: #ffffff;
    
    background: #2368ff;
}


.w4-template-showcase  {
    
    display: grid;
    
    grid-template-columns: repeat(5, 1fr);
    
    align-items: end;
    
    gap: 32px;
}


.w4-laptop-card  {
    
    text-align: center;
}


.w4-laptop-card img  {
    
    width: 100%;
    
    height: 160px;
    
    object-fit: contain;
    
    display: block;
    
    filter: drop-shadow(0 12px 12px rgba(15, 23, 42, 0.18));
}


.w4-laptop-card p  {
    
    margin: 15px 0 0;
    
    color: #111827;
    
    font-size: 15px;
    
    font-weight: 600;
}


.bottom-badge  {
    
    margin-top: 18px;
    
    margin-bottom: 0;
}


@media (max-width:1399px)  {
    
    .w4-success-container  {
        
        padding-left: 56px;
        
        padding-right: 56px;
    }
    

    .w4-feature-grid  {
        
        gap: 14px;
    }
}


@media (max-width:1199px)  {
    
    .w4-feature-grid  {
        
        grid-template-columns: repeat(5, 1fr);
    }
    

    .w4-template-showcase  {
        
        grid-template-columns: repeat(3, 1fr);
    }
    

    .w4-laptop-card img  {
        
        height: 150px;
    }
}


@media (max-width:991px)  {
    
    .w4-success-container  {
        
        padding-left: 24px;
        
        padding-right: 24px;
    }
    

    .w4-section-heading,
    .w4-template-heading  {
        
        font-size: 28px;
    }
    

    .w4-template-tabs  {
        
        gap: 12px;
    }
}


@media (max-width:767px)  {
    
    .w4-feature-grid  {
        
        grid-template-columns: repeat(2, 1fr);
    }
    

    .w4-template-showcase  {
        
        grid-template-columns: repeat(2, 1fr);
        
        gap: 24px;
    }
    

    .w4-laptop-card img  {
        
        height: 130px;
    }
}


@media (max-width:575px)  {
    
    .w4-success-container  {
        
        padding: 0 16px 20px;
    }
    

    .w4-section-heading,
    .w4-template-heading  {
        
        font-size: 24px;
    }
    

    .w4-feature-card  {
        
        min-height: 118px;
        
        padding: 14px 8px;
    }
    

    .w4-feature-icon  {
        
        width: 38px;
        
        height: 38px;
        
        font-size: 19px;
    }
    

    .w4-template-tabs  {
        
        justify-content: flex-start;
        
        overflow-x: auto;
        
        flex-wrap: nowrap;
        
        padding-bottom: 8px;
    }
    

    .w4-template-tabs::-webkit-scrollbar  {
        
        height: 4px;
    }
    

    .w4-template-tabs::-webkit-scrollbar-thumb  {
        
        background: #d7c4ff;
        
        border-radius: 20px;
    }
    

    .w4-template-showcase  {
        
        grid-template-columns: 1fr;
    }
    

    .w4-laptop-card img  {
        
        height: 155px;
    }
    

    .w4-small-badge  {
        
        font-size: 10px;
        
        padding: 6px 12px;
    }
}


.w4-trust-faq-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
    
    padding-top: 0;
}


#testimonialCarousel  {
    
    position: relative;
    
    overflow: hidden;
    
    padding: 0px 0 0px;
}


.w4-review-card  {
    
    height: 100%;
    
    min-height: 220px;
    
    padding: 25px;
    
    border-radius: 18px;
    
    background: #fff;
    
    border: 1px solid #e5eaf4;
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    
    transition: 0.3s ease;
}


.w4-review-card:hover  {
    
    transform: translateY(-6px);
}


.w4-stars  {
    
    color: #ffc107;
    
    font-size: 18px;
    
    margin-bottom: 14px;
}


.w4-review-card p  {
    
    font-size: 15px;
    
    color: #555;
    
    line-height: 1.7;
    
    margin-bottom: 20px;
}


.w4-user  {
    
    display: flex;
    
    align-items: center;
    
    gap: 12px;
}


.w4-user img  {
    
    width: 55px;
    
    height: 55px;
    
    border-radius: 50%;
    
    object-fit: cover;
}


.w4-user h6  {
    
    margin: 0;
    
    font-size: 16px;
    
    font-weight: 600;
}


.w4-user span  {
    
    font-size: 14px;
    
    color: #777;
}


.w4-slider-arrow  {
    
    position: absolute;
    
    top: 45%;
    
    transform: translateY(-50%);
    
    width: 52px;
    
    height: 52px;
    
    border-radius: 50%;
    
    background: #fff !important;
    
    border: none;
    
    color: #111827 !important;
    
    display: flex !important;
    
    align-items: center;
    
    justify-content: center;
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    
    z-index: 999;
    
    opacity: 1 !important;
    
    transition: 0.3s ease;
}


.w4-slider-arrow:hover  {
    
    background: #ec149d !important;
    
    color: #fff !important;
}


.w4-slider-arrow i  {
    
    font-size: 22px;
}


.left-arrow  {
    
    left: 0;
}


.right-arrow  {
    
    right: 0;
}


.carousel-indicators  {
    
    position: relative;
    
    bottom: -20px;
    
    margin-top: 30px;
}


.carousel-indicators button  {
    
    width: 10px !important;
    
    height: 10px !important;
    
    border-radius: 50%;
    
    background: #d1d5db !important;
    
    border: none !important;
    
    margin: 0 6px !important;
}


.carousel-indicators .active  {
    
    background: #ec149d !important;
}


@media (max-width:991px)  {
    
    .w4-review-card  {
        
        min-height: auto;
    }
}


@media (max-width:768px)  {
    
    .w4-slider-arrow  {
        
        width: 42px;
        
        height: 42px;
    }
    

    .left-arrow  {
        
        left: 10px;
    }
    

    .right-arrow  {
        
        right: 10px;
    }
    

    .w4-slider-arrow i  {
        
        font-size: 18px;
    }
    

    .w4-review-card  {
        
        padding: 20px;
    }
}


.w4-small-badge  {
    
    width: fit-content;
    
    margin: 0 auto 8px;
    
    padding: 5px 14px;
    
    border: 1.5px solid #b26cff;
    
    border-radius: 30px;
    
    background: #ffffff;
    
    color: #7b4dff;
    
    font-size: 11px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.w4-small-badge i  {
    
    color: #ed149d;
    
    margin-right: 4px;
}


.faq-title  {
    
    margin-bottom: 14px;
}


.w4-love-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-love-container  {
    
    padding: 50px 76px;
}


.w4-love-badge  {
    
    width: fit-content;
    
    padding: 7px 16px;
    
    border: 1.5px solid #8b5cff;
    
    border-radius: 30px;
    
    color: #7b35ff;
    
    font-size: 12px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.w4-love-badge i  {
    
    color: #ec149d;
    
    margin-right: 6px;
}


.w4-love-content h2  {
    
    margin: 30px 0 18px;
    
    color: #08091f;
    
    font-size: 45px;
    
    line-height: 1.2;
    
    font-weight: 600;
}


.w4-love-content h2 span  {
    
    background: linear-gradient(90deg, #ec149d, #2368ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-love-content p  {
    
    max-width: 460px;
    
    margin: 0;
    
    color: #374151;
    
    font-size: 17.5px;
    
    line-height: 1.7;
}


.w4-love-stats  {
    
    display: flex;
    
    gap: 1px;
    
    flex-wrap: nowrap;
    
    margin-top: 42px;
}


.w4-love-stat  {
    
    display: flex;
    
    align-items: center;
    
    gap: 8px;
}


.w4-love-stat i  {
    
    width: 38px;
    
    height: 38px;
    
    border-radius: 50%;
    
    color: #7b35ff;
    
    background: #f1e8ff;
    
    font-size: 18px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-love-stat h5  {
    
    margin: 0;
    
    color: #08091f;
    
    font-size: 16px;
    
    font-weight: 600;
}


.w4-love-stat span  {
    
    color: #4b5563;
    
    font-size: 14px;
    
    font-weight: 500;
}


.w4-testimonial-visual  {
    
    position: relative;
    
    min-height: 390px;
}


.w4-circle-bg  {
    
    position: absolute;
    
    right: 70px;
    
    top: 34px;
    
    width: 500px;
    
    height: 300px;
    
    border-radius: 50%;
    
    background: radial-gradient(circle, #f6e9ff 0%, #ffffff 72%);
}


.w4-dots-bg  {
    
    position: absolute;
    
    left: 80px;
    
    top: 40px;
    
    width: 80px;
    
    height: 80px;
    
    opacity: 0.35;
    
    background-image: radial-gradient(#7b35ff 2px, transparent 2px);
    
    background-size: 16px 16px;
}


.w4-test-card  {
    
    position: absolute;
    
    width: 285px;
    
    padding: 18px;
    
    border: 1px solid #e2e7f2;
    
    border-radius: 12px;
    
    background: #ffffff;
    
    box-shadow: 0 14px 34px rgba(30, 50, 100, 0.1);
    
    z-index: 2;
}


.card-top  {
    
    top: 0;
    
    left: 210px;
}


.card-left  {
    
    left: 120px;
    
    bottom: 24px;
}


.card-right  {
    
    right: 70px;
    
    bottom: 18px;
}


.w4-card-head  {
    
    display: flex;
    
    align-items: center;
    
    gap: 10px;
}


.w4-card-head img  {
    
    width: 42px;
    
    height: 42px;
    
    border-radius: 50%;
    
    object-fit: cover;
}


.w4-card-head h6  {
    
    margin: 0;
    
    color: #08091f;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-card-head span  {
    
    color: #6b7280;
    
    font-size: 13px;
    
    font-weight: 600;
}


.quote-icon  {
    
    margin-left: auto;
    
    color: #7b35ff;
    
    font-size: 28px;
}


.w4-stars  {
    
    color: #ffb400;
    
    font-size: 14px;
    
    margin: 10px 0;
}


.w4-test-card p  {
    
    margin: 0;
    
    color: #374151;
    
    font-size: 14px;
    
    line-height: 1.55;
    
    font-weight: 500;
}


@media (max-width:1199px)  {
    
    .w4-love-container  {
        
        padding: 45px 40px;
    }
    

    .w4-love-content h2  {
        
        font-size: 40px;
    }
    

    .card-top  {
        
        left: 150px;
    }
    

    .card-left  {
        
        left: 40px;
    }
    

    .card-right  {
        
        right: 20px;
    }
}


@media (max-width:991px)  {
    
    .w4-love-content  {
        
        text-align: center;
    }
    

    .w4-love-badge,
    .w4-love-content p  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-love-stats  {
        
        justify-content: center;
    }
    

    .w4-testimonial-visual  {
        
        margin-top: 40px;
    }
}


@media (max-width:767px)  {
    
    .w4-love-container  {
        
        padding: 36px 18px;
    }
    

    .w4-love-content h2  {
        
        font-size: 32px;
    }
    

    .w4-testimonial-visual  {
        
        min-height: auto;
        
        display: grid;
        
        gap: 18px;
    }
    

    .w4-circle-bg,
    .w4-dots-bg  {
        
        display: none;
    }
    

    .w4-test-card  {
        
        position: static;
        
        width: 100%;
    }
}


.w4-faq-grid  {
    
    display: grid;
    
    grid-template-columns: repeat(3, 1fr);
    
    gap: 14px 28px;
    
    margin-bottom: 20px;
}


.w4-faq-item button  {
    
    width: 100%;
    
    min-height: 52px;
    
    padding: 0 20px;
    
    border: 1px solid #e2e7f1;
    
    border-radius: 7px;
    
    background: #ffffff;
    
    color: #111827;
    
    text-align: left;
    
    font-size: 13px;
    
    font-weight: 800;
    
    box-shadow: 0 6px 18px rgba(30, 50, 100, 0.06);
    
    display: flex;
    
    align-items: center;
    
    justify-content: space-between;
}


.w4-faq-item button i  {
    
    font-size: 18px;
    
    color: #111827;
}


.w4-cta-banner  {
    
    margin-top: 0px;
    
    padding: 30px 0;
    
    background: linear-gradient(90deg, #2457f5 0%, #7e3dff 42%, #ec149d 100%);
}


.w4-cta-content  {
    
    display: flex;
    
    align-items: center;
    
    justify-content: space-between;
    
    gap: 28px;
}


.w4-cta-icon  {
    
    width: 86px;
    
    height: 86px;
    
    flex: 0 0 86px;
    
    border-radius: 50%;
    
    border: 2px solid rgba(255, 255, 255, 0.65);
    
    color: #ffffff;
    
    font-size: 45px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-cta-text  {
    
    flex: 1;
}


.w4-cta-text h2  {
    
    margin: 0 0 6px;
    
    color: #ffffff;
    
    font-size: 34px;
    
    font-weight: 900;
}


.w4-cta-text p  {
    
    margin: 0;
    
    color: #ffffff;
    
    font-size: 15px;
    
    font-weight: 500;
}


.w4-cta-buttons  {
    
    display: flex;
    
    gap: 18px;
}


.w4-cta-primary,
.w4-cta-outline  {
    
    min-width: 150px;
    
    height: 50px;
    
    border-radius: 8px;
    
    text-decoration: none;
    
    font-size: 14px;
    
    font-weight: 900;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-cta-primary  {
    
    background: #ffffff;
    
    color: #195cff;
}


.w4-cta-outline  {
    
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    
    color: #ffffff;
}


.w4-cta-primary:hover  {
    
    color: #195cff;
    
    transform: translateY(-2px);
}


.w4-cta-outline:hover  {
    
    background: #ffffff;
    
    color: #ec149d;
}


@media (max-width:1199px)  {
    
    .left-arrow  {
        
        left: 0px;
    }
    

    .right-arrow  {
        
        right: 0px;
    }
    

    .w4-cta-text h2  {
        
        font-size: 30px;
    }
}


@media (max-width:991px)  {
    
    .w4-section-title  {
        
        font-size: 28px;
    }
    

    .w4-slider-arrow  {
        
        display: none;
    }
    

    .w4-faq-grid  {
        
        grid-template-columns: repeat(2, 1fr);
    }
    

    .w4-cta-content  {
        
        text-align: center;
        
        flex-direction: column;
    }
    

    .w4-cta-text h2  {
        
        font-size: 28px;
    }
}


@media (max-width:767px)  {
    
    .w4-review-card  {
        
        padding: 20px;
    }
    

    .w4-faq-grid  {
        
        grid-template-columns: 1fr;
        
        gap: 12px;
    }
    

    .w4-cta-buttons  {
        
        width: 100%;
        
        flex-direction: column;
    }
    

    .w4-cta-primary,
    .w4-cta-outline  {
        
        width: 100%;
    }
}


@media (max-width:575px)  {
    
    .w4-section-title  {
        
        font-size: 24px;
    }
    

    .w4-review-card p  {
        
        font-size: 13px;
    }
    

    .w4-faq-item button  {
        
        font-size: 12px;
        
        padding: 0 14px;
    }
    

    .w4-cta-banner  {
        
        padding: 26px 0;
    }
    

    .w4-cta-icon  {
        
        width: 74px;
        
        height: 74px;
        
        flex-basis: 74px;
        
        font-size: 38px;
    }
    

    .w4-cta-text h2  {
        
        font-size: 25px;
    }
    

    .w4-cta-text p  {
        
        font-size: 13px;
    }
}


.w4-faq-footer-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-faq-container  {
    
    padding-top: 6px;
    
    padding-bottom: 18px;
}


.w4-small-badge  {
    
    width: fit-content;
    
    margin: 35px auto 20px;
    
    padding: 4px 14px;
    
    border: 1.5px solid #b26cff;
    
    border-radius: 30px;
    
    background: #ffffff;
    
    color: #7b4dff;
    
    font-size: 11px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.w4-small-badge i  {
    
    color: #ed149d;
    
    margin-right: 4px;
}


.w4-faq-grid  {
    
    display: grid;
    
    grid-template-columns: repeat(3, 1fr);
    
    gap: 14px 28px;
}


.w4-faq-item  {
    
    border: 0;
    
    background: transparent;
}


.w4-faq-item .accordion-button  {
    
    min-height: 52px;
    
    padding: 0 20px;
    
    border: 1px solid #e2e7f1;
    
    border-radius: 7px !important;
    
    background: #ffffff;
    
    color: #111827;
    
    font-size: 16px;
    
    font-weight: 500;
    
    box-shadow: 0 6px 18px rgba(30, 50, 100, 0.06);
}


.w4-faq-item .accordion-button:focus  {
    
    box-shadow: 0 6px 18px rgba(30, 50, 100, 0.06);
}


.w4-faq-item .accordion-button:not(.collapsed)  {
    
    color: #ffffff;
    
    background: linear-gradient(90deg, #2368ff, #ed149d);
}


.w4-faq-item .accordion-button::after  {
    
    background-size: 16px;
}


.w4-faq-item .accordion-button:not(.collapsed)::after  {
    
    filter: brightness(0) invert(1);
}


.w4-faq-item .accordion-collapse  {
    
    border: 1px solid #e2e7f1;
    
    border-top: 0;
    
    border-radius: 0 0 7px 7px;
    
    background: #ffffff;
}


.w4-faq-item .accordion-body  {
    
    padding: 14px 18px;
    
    color: #4b5563;
    
    font-size: 13px;
    
    line-height: 1.6;
}


.w4-cta-banner  {
    
    padding: 30px 0;
    
    background: linear-gradient(90deg, #2457f5 0%, #773cff 45%, #ec149d 100%);
}


.w4-cta-content  {
    
    display: flex;
    
    align-items: center;
    
    justify-content: space-between;
    
    gap: 28px;
}


.w4-cta-icon  {
    
    width: 86px;
    
    height: 86px;
    
    flex: 0 0 86px;
    
    border: 2px solid rgba(255, 255, 255, 0.65);
    
    border-radius: 50%;
    
    color: #ffffff;
    
    font-size: 45px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-cta-text  {
    
    flex: 1;
}


.w4-cta-text h2  {
    
    margin: 0 0 6px;
    
    color: #ffffff;
    
    font-size: 34px;
    
    font-weight: 600;
}


.w4-cta-text p  {
    
    margin: 0;
    
    color: #ffffff;
    
    font-size: 15px;
    
    font-weight: 500;
}


.w4-cta-buttons  {
    
    display: flex;
    
    gap: 18px;
}


.w4-cta-primary,
.w4-cta-outline  {
    
    min-width: 150px;
    
    height: 50px;
    
    border-radius: 8px;
    
    text-decoration: none;
    
    font-size: 14px;
    
    font-weight: 700;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-cta-primary  {
    
    background: #ffffff;
    
    color: #195cff;
}


.w4-cta-outline  {
    
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    
    color: #ffffff;
}


.w4-cta-primary:hover  {
    
    color: #195cff;
    
    transform: translateY(-2px);
}


.w4-cta-outline:hover  {
    
    background: #ffffff;
    
    color: #ec149d;
}


.w4-footer  {
    
    background: #0f1535;
}


.w4-footer-container  {
    
    padding: 34px 76px 8px;
}


.w4-footer-brand img  {
    
    width: 120px;
    
    margin-bottom: 10px;
}


.w4-footer-brand p,
.w4-newsletter-box p  {
    
    margin: 0 0 14px;
    
    color: #fff;
    
    font-size: 13px;
    
    line-height: 1.55;
}


.w4-social-links  {
    
    display: flex;
    
    gap: 12px;
    
    align-items: center;
}


.w4-social-links a  {
    
    width: 32px;
    
    height: 32px;
    
    border: 1px solid #dfe5f2;
    
    border-radius: 50%;
    
    color: #111827;
    
    text-decoration: none;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-social-links a:hover  {
    
    color: #ffffff;
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
}


.w4-footer-box  {
    
    min-height: 150px;
    
    padding-left: 28px;
    
    border-left: 1px solid #dde3f0;
}


.w4-footer-box h5  {
    
    margin: 0 0 12px;
    
    color: #ffffff;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-footer-box ul  {
    
    list-style: none;
    
    padding: 0;
    
    margin: 0;
}


.w4-footer-box ul li  {
    
    margin-bottom: 6px;
}


.w4-footer-box a,
.w4-footer-box span  {
    
    color: #fff;
    
    text-decoration: none;
    
    font-size: 13px;
    
    font-weight: 500;
}


.w4-footer-box a:hover  {
    
    color: #2368ff;
}


.w4-contact-list li  {
    
    display: flex;
    
    align-items: center;
    
    gap: 9px;
}


.w4-contact-list i  {
    
    color: #2368ff;
    
    font-size: 15px;
}


.w4-newsletter-box  {
    
    min-width: 190px;
}


.w4-newsletter-form  {
    
    width: 100%;
    
    height: 42px;
    
    padding: 4px;
    
    border: 1px solid #dfe5f2;
    
    border-radius: 8px;
    
    display: flex;
    
    background: #ffffff;
    
    box-shadow: 0 8px 20px rgba(35, 104, 255, 0.08);
}


.w4-newsletter-form input  {
    
    width: 100%;
    
    border: none;
    
    outline: none;
    
    padding: 0 10px;
    
    color: #111827;
    
    font-size: 12px;
}


.w4-newsletter-form button  {
    
    width: 34px;
    
    height: 34px;
    
    border: none;
    
    border-radius: 7px;
    
    color: #ffffff;
    
    background: #2368ff;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-footer-bottom  {
    
    text-align: center;
    
    margin-top: 8px;
}


.w4-footer-bottom p  {
    
    margin: 0;
    
    color: #4b5563;
    
    font-size: 13px;
}


@media (max-width:1199px)  {
    
    .w4-footer-container  {
        
        padding-left: 48px;
        
        padding-right: 48px;
    }
    

    .w4-cta-text h2  {
        
        font-size: 30px;
    }
}


@media (max-width:991px)  {
    
    .w4-section-title  {
        
        font-size: 27px;
    }
    

    .w4-faq-grid  {
        
        grid-template-columns: repeat(2, 1fr);
    }
    

    .w4-cta-content  {
        
        text-align: center;
        
        flex-direction: column;
    }
    

    .w4-footer-container  {
        
        padding-left: 24px;
        
        padding-right: 24px;
    }
    

    .w4-footer-box  {
        
        padding-left: 0;
        
        border-left: none;
    }
    

    .w4-newsletter-box  {
        
        min-width: 100%;
    }
}


@media (max-width:767px)  {
    
    .w4-faq-grid  {
        
        grid-template-columns: 1fr;
        
        gap: 12px;
    }
    

    .w4-cta-buttons  {
        
        width: 100%;
        
        flex-direction: column;
    }
    

    .w4-cta-primary,
    .w4-cta-outline  {
        
        width: 100%;
    }
}


@media (max-width:575px)  {
    
    .w4-section-title  {
        
        font-size: 24px;
    }
    

    .w4-faq-item .accordion-button  {
        
        font-size: 12px;
        
        padding: 0 14px;
    }
    

    .w4-cta-banner  {
        
        padding: 26px 0;
    }
    

    .w4-cta-icon  {
        
        width: 74px;
        
        height: 74px;
        
        flex-basis: 74px;
        
        font-size: 38px;
    }
    

    .w4-cta-text h2  {
        
        font-size: 25px;
    }
    

    .w4-cta-text p  {
        
        font-size: 13px;
    }
    

    .w4-footer-container  {
        
        padding: 22px 16px 10px;
    }
    

    .w4-footer-box  {
        
        min-height: auto;
    }
    

    .w4-newsletter-form  {
        
        max-width: 320px;
        
        margin: 0 auto;
    }
}


.w4-tools-section  {
    
    position: relative;
    
    overflow: hidden;
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
}


.w4-tools-container  {
    
    padding: 26px 78px 48px;
}


.w4-tools-badge  {
    
    width: fit-content;
    
    padding: 7px 17px;
    
    border: 1.5px solid #2368ff;
    
    border-radius: 30px;
    
    color: #293cff;
    
    background: #ffffff;
    
    font-size: 13px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.w4-tools-badge i  {
    
    color: #ed149d;
    
    margin-right: 7px;
}


.w4-tools-content h2  {
    
    margin: 42px 0 0;
    
    color: #090b22;
    
    font-size: 45px;
    
    line-height: 1.28;
    
    font-weight: 700;
    
    letter-spacing: -1.5px;
}


.w4-tools-content h2 span  {
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-tools-content p  {
    
    max-width: 625px;
    
    margin: 34px 0 0;
    
    color: #242b3d;
    
    font-size: 17.5px;
    
    line-height: 1.8;
    
    font-weight: 500;
}


.w4-tools-stats  {
    
    display: flex;
    
    align-items: center;
    
    gap: 34px;
    
    margin-top: 62px;
}


.w4-tools-stat  {
    
    display: flex;
    
    align-items: center;
    
    gap: 14px;
    
    padding-right: 21px;
    
    border-right: 1px solid #d8deec;
}


.w4-tools-stat:last-child  {
    
    border-right: 0;
    
    padding-right: 0;
}


.w4-tools-stat i  {
    
    color: #1f5fff;
    
    font-size: 43px;
}


.w4-tools-stat h5  {
    
    margin: 0;
    
    color: #08091f;
    
    font-size: 20px;
    
    font-weight: 600;
}


.w4-tools-stat span  {
    
    color: #1f2937;
    
    font-size: 15px;
    
    font-weight: 500;
}


.w4-tools-visual  {
    
    position: relative;
    
    min-height: 515px;
}


.w4-dots  {
    
    position: absolute;
    
    left: 60px;
    
    top: 100px;
    
    width: 90px;
    
    height: 90px;
    
    opacity: 0.35;
    
    background-image: radial-gradient(#715cff 2px, transparent 2px);
    
    background-size: 18px 18px;
}


.w4-orbit  {
    
    position: absolute;
    
    width: 470px;
    
    height: 470px;
    
    right: 34px;
    
    top: 30px;
    
    border-radius: 50%;
    
    border: 3px solid rgba(240, 31, 177, 0.14);
    
    border-left-color: transparent;
    
    border-bottom-color: transparent;
}


.w4-browser-card  {
    
    position: absolute;
    
    top: 8px;
    
    right: 165px;
    
    width: 470px;
    
    height: 310px;
    
    border: 1px solid #dfe4f1;
    
    border-radius: 16px;
    
    background: rgba(255, 255, 255, 0.82);
    
    box-shadow: 0 22px 50px rgba(35, 55, 115, 0.1);
    
    backdrop-filter: blur(8px);
    
    z-index: 2;
}


.w4-browser-top  {
    
    height: 48px;
    
    padding: 0 24px;
    
    border-bottom: 1px solid #edf0f7;
    
    display: flex;
    
    align-items: center;
    
    gap: 8px;
}


.w4-browser-top span  {
    
    width: 7px;
    
    height: 7px;
    
    border-radius: 50%;
}


.w4-browser-top span:nth-child(1)  {
    
    background: #ff5f57;
}


.w4-browser-top span:nth-child(2)  {
    
    background: #ffbd2e;
}


.w4-browser-top span:nth-child(3)  {
    
    background: #28c840;
}


.w4-browser-top i  {
    
    margin-left: auto;
    
    color: #2368ff;
    
    font-size: 20px;
}


.w4-browser-logo  {
    
    position: absolute;
    
    top: 78px;
    
    left: 28px;
    
    color: #ed149d;
    
    font-size: 20px;
    
    font-weight: 900;
    
    font-style: italic;
}


.w4-browser-logo span  {
    
    color: #2368ff;
}


.w4-browser-body  {
    
    position: absolute;
    
    left: 68px;
    
    right: 68px;
    
    top: 116px;
    
    height: 160px;
    
    border-radius: 11px;
    
    background: rgba(255, 255, 255, 0.78);
    
    display: grid;
    
    grid-template-columns: 135px 1fr;
    
    column-gap: 34px;
    
    align-items: center;
    
    padding: 28px;
}


.w4-image-box  {
    
    height: 110px;
    
    border-radius: 8px;
    
    background: #eef3ff;
    
    color: #b7bdf5;
    
    font-size: 54px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-lines span  {
    
    display: block;
    
    height: 8px;
    
    border-radius: 20px;
    
    background: #d4dbff;
    
    margin-bottom: 17px;
}


.w4-lines span:nth-child(1)  {
    
    width: 140px;
}


.w4-lines span:nth-child(2)  {
    
    width: 120px;
}


.w4-lines span:nth-child(3)  {
    
    width: 95px;
}


.w4-browser-body button  {
    
    position: absolute;
    
    right: 86px;
    
    bottom: 28px;
    
    width: 92px;
    
    height: 30px;
    
    border: none;
    
    border-radius: 30px;
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
}


.w4-float-tool  {
    
    position: absolute;
    
    width: 78px;
    
    height: 78px;
    
    border-radius: 14px;
    
    background: #ffffff;
    
    color: #2368ff;
    
    box-shadow: 0 14px 34px rgba(35, 55, 115, 0.12);
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    font-size: 36px;
    
    z-index: 4;
}


.w4-code-icon  {
    
    top: 58px;
    
    right: 28px;
}


.w4-img-icon-one  {
    
    top: 142px;
    
    right: 138px;
}


.w4-img-icon-two  {
    
    top: 210px;
    
    right: -28px;
}


.w4-text-tool  {
    
    position: absolute;
    
    left: 25px;
    
    top: 190px;
    
    width: 82px;
    
    height: 82px;
    
    border: 2px dashed #2368ff;
    
    border-radius: 7px;
    
    background: #ffffff;
    
    color: #090b22;
    
    font-size: 28px;
    
    font-weight: 800;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    z-index: 4;
}


.w4-color-palette  {
    
    position: absolute;
    
    left: 88px;
    
    bottom: 130px;
    
    width: 185px;
    
    height: 72px;
    
    padding: 20px;
    
    border-radius: 12px;
    
    background: #ffffff;
    
    box-shadow: 0 14px 34px rgba(35, 55, 115, 0.12);
    
    display: flex;
    
    gap: 16px;
    
    z-index: 4;
}


.w4-color-palette span  {
    
    width: 30px;
    
    height: 30px;
    
    border-radius: 6px;
}


.w4-color-palette span:nth-child(1)  {
    
    background: linear-gradient(135deg, #ed149d, #814dff);
}


.w4-color-palette span:nth-child(2)  {
    
    background: linear-gradient(135deg, #2368ff, #b38cff);
}


.w4-color-palette span:nth-child(3)  {
    
    background: #ffc36d;
}


.w4-color-palette span:nth-child(4)  {
    
    background: #d9f3ee;
}


.w4-mini-chart  {
    
    position: absolute;
    
    right: 235px;
    
    bottom: 22px;
    
    width: 175px;
    
    padding: 20px 18px 12px;
    
    border-radius: 12px;
    
    background: #ffffff;
    
    box-shadow: 0 14px 36px rgba(35, 55, 115, 0.13);
    
    z-index: 5;
}


.w4-mini-chart button  {
    
    position: absolute;
    
    top: 14px;
    
    right: 14px;
    
    width: 12px;
    
    height: 12px;
    
    border: none;
    
    background: transparent;
}


.w4-mini-chart button::before,
.w4-mini-chart button::after  {
    
    content: "";
    
    position: absolute;
    
    width: 10px;
    
    height: 1px;
    
    background: #c5cadd;
    
    left: 0;
    
    top: 5px;
}


.w4-mini-chart button::before  {
    
    transform: rotate(45deg);
}


.w4-mini-chart button::after  {
    
    transform: rotate(-45deg);
}


.w4-mini-chart p,
.w4-score-card p  {
    
    margin: 0 0 8px;
    
    color: #6b7280;
    
    font-size: 11px;
    
    font-weight: 700;
}


.w4-mini-chart h5  {
    
    margin: 0;
    
    color: #08091f;
    
    font-size: 18px;
    
    font-weight: 900;
}


.w4-mini-chart h5 span  {
    
    color: #2368ff;
    
    font-size: 10px;
}


.w4-mini-chart svg  {
    
    width: 100%;
    
    height: 58px;
    
    margin-top: 6px;
}


.w4-mini-chart path  {
    
    fill: none;
    
    stroke: #9b35ff;
    
    stroke-width: 4;
    
    stroke-linecap: round;
}


.w4-score-card  {
    
    position: absolute;
    
    right: 72px;
    
    bottom: 55px;
    
    width: 155px;
    
    height: 190px;
    
    padding: 22px;
    
    border-radius: 12px;
    
    background: #ffffff;
    
    box-shadow: 0 14px 36px rgba(35, 55, 115, 0.13);
    
    text-align: center;
    
    z-index: 5;
}


.w4-score-circle  {
    
    width: 94px;
    
    height: 94px;
    
    margin: 0 auto 10px;
    
    border-radius: 50%;
    
    background: radial-gradient(circle at center, #ffffff 58%, transparent 59%), conic-gradient(#2368ff 0deg, #9b35ff 325deg, #eef0f8 325deg);
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-score-circle span  {
    
    color: #08091f;
    
    font-size: 34px;
    
    font-weight: 800;
}


.w4-score-card small  {
    
    display: block;
    
    color: #6b7280;
    
    font-size: 11px;
}


.w4-score-card strong  {
    
    display: block;
    
    margin-top: 4px;
    
    color: #15a06c;
    
    font-size: 11px;
    
    font-weight: 800;
}


@media (max-width:1399px)  {
    
    .w4-tools-container  {
        
        padding-left: 58px;
        
        padding-right: 58px;
    }
    

    .w4-tools-content h2  {
        
        font-size: 50px;
    }
    

    .w4-browser-card  {
        
        right: 120px;
    }
}


@media (max-width:1199px)  {
    
    .w4-tools-content h2  {
        
        font-size: 42px;
    }
    

    .w4-tools-content p  {
        
        font-size: 16px;
    }
    

    .w4-tools-stats  {
        
        gap: 18px;
    }
    

    .w4-tools-stat  {
        
        padding-right: 18px;
    }
    

    .w4-browser-card  {
        
        width: 400px;
        
        right: 90px;
    }
    

    .w4-browser-body  {
        
        left: 45px;
        
        right: 45px;
        
        grid-template-columns: 105px 1fr;
    }
}


@media (max-width:991px)  {
    
    .w4-tools-container  {
        
        padding: 40px 24px;
    }
    

    .w4-tools-content  {
        
        text-align: center;
    }
    

    .w4-tools-badge  {
        
        margin: 0 auto;
    }
    

    .w4-tools-content h2  {
        
        font-size: 42px;
        
        margin-top: 28px;
    }
    

    .w4-tools-content p  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-tools-stats  {
        
        justify-content: center;
        
        margin-top: 36px;
        
        flex-wrap: wrap;
    }
    

    .w4-tools-visual  {
        
        min-height: 500px;
        
        margin-top: 35px;
    }
    

    .w4-browser-card  {
        
        right: 50%;
        
        transform: translateX(50%);
    }
    

    .w4-code-icon  {
        
        right: 10%;
    }
    

    .w4-img-icon-two  {
        
        right: 5%;
    }
    

    .w4-score-card  {
        
        right: 15%;
    }
    

    .w4-mini-chart  {
        
        right: 39%;
    }
}


@media (max-width:767px)  {
    
    .w4-tools-content h2  {
        
        font-size: 35px;
    }
    

    .w4-tools-stat  {
        
        width: 45%;
        
        border-right: 0;
        
        padding-right: 0;
        
        justify-content: center;
    }
    

    .w4-tools-visual  {
        
        min-height: 430px;
    }
    

    .w4-browser-card  {
        
        width: 360px;
        
        height: 270px;
    }
    

    .w4-browser-body  {
        
        top: 105px;
        
        height: 135px;
        
        padding: 18px;
    }
    

    .w4-float-tool  {
        
        width: 58px;
        
        height: 58px;
        
        font-size: 28px;
    }
    

    .w4-text-tool  {
        
        width: 62px;
        
        height: 62px;
        
        font-size: 22px;
        
        left: 0;
    }
    

    .w4-color-palette  {
        
        width: 145px;
        
        height: 58px;
        
        padding: 14px;
        
        gap: 10px;
        
        left: 30px;
    }
    

    .w4-color-palette span  {
        
        width: 24px;
        
        height: 24px;
    }
    

    .w4-mini-chart  {
        
        width: 150px;
        
        right: 42%;
    }
    

    .w4-score-card  {
        
        width: 130px;
        
        height: 170px;
        
        right: 4%;
    }
}


@media (max-width:575px)  {
    
    .w4-tools-container  {
        
        padding: 32px 16px;
    }
    

    .w4-tools-content h2  {
        
        font-size: 30px;
    }
    

    .w4-tools-content p  {
        
        font-size: 14px;
        
        line-height: 1.7;
    }
    

    .w4-tools-stat  {
        
        width: 100%;
    }
    

    .w4-tools-visual  {
        
        min-height: 360px;
    }
    

    .w4-browser-card  {
        
        width: 300px;
        
        height: 230px;
    }
    

    .w4-browser-body  {
        
        left: 26px;
        
        right: 26px;
        
        top: 95px;
        
        height: 110px;
        
        grid-template-columns: 80px 1fr;
        
        column-gap: 16px;
    }
    

    .w4-image-box  {
        
        height: 75px;
        
        font-size: 34px;
    }
    

    .w4-lines span  {
        
        height: 6px;
        
        margin-bottom: 12px;
    }
    

    .w4-browser-body button  {
        
        width: 65px;
        
        height: 22px;
        
        right: 55px;
        
        bottom: 16px;
    }
    

    .w4-code-icon,
    .w4-img-icon-one,
    .w4-img-icon-two  {
        
        display: none;
    }
    

    .w4-text-tool  {
        
        display: none;
    }
    

    .w4-color-palette  {
        
        left: 10px;
        
        bottom: 78px;
    }
    

    .w4-mini-chart  {
        
        width: 130px;
        
        right: 42%;
        
        bottom: 0;
    }
    

    .w4-score-card  {
        
        width: 115px;
        
        height: 155px;
        
        right: 0;
        
        bottom: 24px;
        
        padding: 16px;
    }
    

    .w4-score-circle  {
        
        width: 74px;
        
        height: 74px;
    }
    

    .w4-score-circle span  {
        
        font-size: 26px;
    }
}


.w4-features-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-features-container  {
    
    padding: 30px 76px 44px;
}


.w4-feature-tabs  {
    
    max-width: 1710px;
    
    margin: 0 auto 36px;
    
    padding: 10px;
    
    border: 1px solid #dce3f1;
    
    border-radius: 14px;
    
    list-style: none;
    
    display: grid;
    
    grid-template-columns: 1.1fr 1.2fr 1.15fr 1.2fr 1.7fr 1.7fr;
    
    gap: 8px;
    
    background: #ffffff;
}


.w4-feature-tabs a  {
    
    text-decoration: none;
}


.w4-feature-tabs button  {
    
    width: 100%;
    
    min-height: 68px;
    
    padding: 0 20px;
    
    border: none;
    
    border-radius: 9px;
    
    background: transparent;
    
    color: #111827;
    
    font-size: 15px;
    
    font-weight: 600;
    
    display: flex;
    
    align-items: center;
    
    gap: 12px;
    
    white-space: nowrap;
}


.w4-feature-tabs button i  {
    
    color: #5145e5;
    
    font-size: 24px;
}


.w4-feature-tabs button i:hover  {
    
    color: #fff;
    
    font-size: 24px;
}


.w4-feature-tabs button.active  {
    
    color: #ffffff;
    
    background: linear-gradient(90deg, #ed149d, #115dff);
    
    box-shadow: 0 12px 25px rgba(35, 104, 255, 0.18);
}


.w4-feature-tabs button.active i  {
    
    color: #ffffff;
}


.w4-feature-card-grid  {
    
    display: grid;
    
    grid-template-columns: repeat(5, 1fr);
    
    gap: 26px 32px;
}


.w4-feature-main-card  {
    
    min-height: 390px;
    
    padding: 52px 28px 34px;
    
    border: 1px solid #dfe5f0;
    
    border-radius: 16px;
    
    background: #ffffff;
    
    text-align: center;
    
    box-shadow: 0 14px 32px rgba(30, 50, 100, 0.06);
    
    transition: 0.3s ease;
}


.w4-feature-main-card:hover  {
    
    transform: translateY(-6px);
    
    box-shadow: 0 22px 45px rgba(30, 50, 100, 0.11);
}


.w4-feature-icon  {
    
    width: 92px;
    
    height: 92px;
    
    margin: 0 auto 36px;
    
    border-radius: 28px;
    
    font-size: 42px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.blue-soft  {
    
    color: #1765ff;
    
    background: linear-gradient(135deg, #eef4ff, #dfe8ff);
}


.purple-soft  {
    
    color: #7b2cff;
    
    background: linear-gradient(135deg, #f5eaff, #eadbff);
}


.green-soft  {
    
    color: #00b98f;
    
    background: linear-gradient(135deg, #e6fbf4, #d9f5ee);
}


.orange-soft  {
    
    color: #ff9000;
    
    background: linear-gradient(135deg, #fff5e8, #ffecd1);
}


.pink-soft  {
    
    color: #ff1584;
    
    background: linear-gradient(135deg, #fff0f8, #ffe1ef);
}


.whatsapp-soft  {
    
    color: #22b96a;
    
    background: linear-gradient(135deg, #e9fff4, #d8f6e7);
}


.document-soft  {
    
    color: #1765ff;
    
    background: linear-gradient(135deg, #eef4ff, #dfe8ff);
}


.analytics-soft  {
    
    color: #9b35ff;
    
    background: linear-gradient(135deg, #f7ecff, #f0dcff);
}


.rocket-soft  {
    
    color: #ff5b1f;
    
    background: linear-gradient(135deg, #fff1e8, #ffe3d5);
}


.security-soft  {
    
    color: #1765ff;
    
    background: linear-gradient(135deg, #eef4ff, #dfe8ff);
}


.gold-soft  {
    
    color: #c59c17;
    
    background: linear-gradient(135deg, #fff7d6, #fbefd1);
}


.dark-soft  {
    
    color: #050505;
    
    background: linear-gradient(135deg, #e8dede, #f6f2f2);
}


.red-soft  {
    
    color: #ec0c0c;
    
    background: linear-gradient(135deg, #fcf0f0, #fedede);
}


.w4-feature-main-card h4  {
    
    margin: 0 0 22px;
    
    color: #07091f;
    
    font-size: 17px;
    
    font-weight: 600;
}


.w4-feature-main-card p  {
    
    max-width: 240px;
    
    margin: 0 auto 34px;
    
    color: #354052;
    
    font-size: 15px;
    
    line-height: 1.7;
    
    font-weight: 500;
}


.w4-feature-main-card a  {
    
    color: #ec149d;
    
    text-decoration: none;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-feature-main-card a i  {
    
    margin-left: 8px;
}


.w4-feature-main-card a:hover  {
    
    color: #1765ff;
}


.w4-explore-btn  {
    
    min-width: 315px;
    
    height: 58px;
    
    margin-top: 30px;
    
    border-radius: 8px;
    
    color: #ffffff;
    
    text-decoration: none;
    
    background: linear-gradient(90deg, #ed149d, #115dff);
    
    font-size: 15px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
    
    box-shadow: 0 12px 25px rgba(35, 104, 255, 0.18);
}


.w4-explore-btn:hover  {
    
    color: #ffffff;
    
    transform: translateY(-2px);
}


@media (max-width:1399px)  {
    
    .w4-features-container  {
        
        padding-left: 54px;
        
        padding-right: 54px;
    }
    

    .w4-feature-card-grid  {
        
        gap: 24px;
    }
    

    .w4-feature-tabs button  {
        
        font-size: 13px;
        
        padding: 0 14px;
    }
}


@media (max-width:1199px)  {
    
    .w4-feature-tabs  {
        
        display: flex;
        
        overflow-x: auto;
        
        padding-bottom: 12px;
    }
    

    .w4-feature-tabs li  {
        
        flex: 0 0 auto;
    }
    

    .w4-feature-tabs button  {
        
        min-width: 210px;
    }
    

    .w4-feature-tabs::-webkit-scrollbar  {
        
        height: 5px;
    }
    

    .w4-feature-tabs::-webkit-scrollbar-thumb  {
        
        background: #d3c9ff;
        
        border-radius: 20px;
    }
    

    .w4-feature-card-grid  {
        
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width:991px)  {
    
    .w4-features-container  {
        
        padding-left: 24px;
        
        padding-right: 24px;
    }
    

    .w4-feature-card-grid  {
        
        grid-template-columns: repeat(2, 1fr);
    }
    

    .w4-feature-main-card  {
        
        min-height: 350px;
        
        padding: 42px 24px 30px;
    }
}


@media (max-width:767px)  {
    
    .w4-feature-tabs  {
        
        margin-bottom: 26px;
    }
    

    .w4-feature-main-card  {
        
        min-height: auto;
    }
    

    .w4-feature-icon  {
        
        width: 78px;
        
        height: 78px;
        
        margin-bottom: 26px;
        
        border-radius: 22px;
        
        font-size: 34px;
    }
    

    .w4-feature-main-card h4  {
        
        font-size: 18px;
    }
    

    .w4-feature-main-card p  {
        
        font-size: 14px;
    }
}


@media (max-width:575px)  {
    
    .w4-features-container  {
        
        padding: 24px 16px 36px;
    }
    

    .w4-feature-tabs  {
        
        border-radius: 12px;
    }
    

    .w4-feature-tabs button  {
        
        min-width: 190px;
        
        min-height: 58px;
        
        font-size: 12px;
    }
    

    .w4-feature-card-grid  {
        
        grid-template-columns: 1fr;
        
        gap: 18px;
    }
    

    .w4-feature-main-card  {
        
        padding: 34px 20px 28px;
    }
    

    .w4-explore-btn  {
        
        width: 100%;
        
        min-width: auto;
    }
}


.w4-choose-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-choose-container  {
    
    padding: 42px 76px 44px;
}


.w4-choose-title  {
    
    margin: -27px 0 26px;
    
    color: #07091f;
    
    text-align: center;
    
    font-size: 34px;
    
    font-weight: 600;
}


.w4-choose-title span  {
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-benefits-row  {
    
    display: grid;
    
    grid-template-columns: repeat(5, 1fr);
    
    align-items: center;
    
    margin-bottom: 34px;
}


.w4-benefit-item  {
    
    min-height: 74px;
    
    padding: 0 28px;
    
    border-right: 1px solid #dce2ef;
    
    display: flex;
    
    align-items: center;
    
    gap: 16px;
}


.w4-benefit-item:last-child  {
    
    border-right: 0;
}


.w4-benefit-icon  {
    
    width: 54px;
    
    height: 54px;
    
    flex: 0 0 54px;
    
    border-radius: 50%;
    
    background: #eef2ff;
    
    color: #5c48ff;
    
    font-size: 25px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-benefit-item h5  {
    
    margin: 0 0 6px;
    
    color: #07091f;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-benefit-item p  {
    
    margin: 0;
    
    color: #374151;
    
    font-size: 15px;
    
    font-weight: 500;
}


.w4-dream-cta  {
    
    min-height: 170px;
    
    padding: 10px 20px;
    
    border-radius: 16px;
    
    background: linear-gradient(100deg, #ed149d 0%, #7d35ff 48%, #1765ff 100%);
    
    box-shadow: 0 18px 40px rgba(36, 87, 245, 0.2);
    
    display: flex;
    
    align-items: center;
    
    gap: 42px;
}


.w4-rocket-box  {
    
    width: 170px;
    
    height: 125px;
    
    flex: 0 0 170px;
    
    position: relative;
    
    color: #ffffff;
    
    font-size: 92px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-rocket-box::before  {
    
    content: "";
    
    position: absolute;
    
    width: 130px;
    
    height: 38px;
    
    left: 10px;
    
    bottom: 0;
    
    border-radius: 50px 50px 8px 8px;
    
    background: rgba(255, 255, 255, 0.35);
}


.w4-rocket-box::after  {
    
    content: "✦";
    
    position: absolute;
    
    left: 18px;
    
    top: 20px;
    
    color: #ffffff;
    
    font-size: 20px;
}


.w4-rocket-box i  {
    
    position: relative;
    
    z-index: 2;
    
    transform: rotate(42deg);
    
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.12));
}


.w4-dream-text  {
    
    flex: 1;
}


.w4-dream-text h3  {
    
    margin: 0 0 10px;
    
    color: #ffffff;
    
    font-size: 31px;
    
    font-weight: 600;
}


.w4-dream-text p  {
    
    margin: 0;
    
    color: #ffffff;
    
    font-size: 16px;
    
    font-weight: 500;
}


.w4-dream-buttons  {
    
    display: flex;
    
    align-items: center;
    
    gap: 18px;
}


.w4-white-btn,
.w4-outline-btn  {
    
    min-width: 190px;
    
    height: 58px;
    
    border-radius: 8px;
    
    text-decoration: none;
    
    font-size: 16px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-white-btn  {
    
    color: #145fff;
    
    background: #ffffff;
}


.w4-outline-btn  {
    
    color: #ffffff;
    
    border: 1.5px solid rgba(255, 255, 255, 0.75);
}


.w4-white-btn:hover  {
    
    color: #145fff;
    
    transform: translateY(-2px);
}


.w4-outline-btn:hover  {
    
    color: #ed149d;
    
    background: #ffffff;
}


@media (max-width:1399px)  {
    
    .w4-choose-container  {
        
        padding-left: 54px;
        
        padding-right: 54px;
    }
    

    .w4-benefit-item  {
        
        padding: 0 18px;
    }
}


@media (max-width:1199px)  {
    
    .w4-benefits-row  {
        
        grid-template-columns: repeat(3, 1fr);
        
        gap: 22px 0;
    }
    

    .w4-benefit-item:nth-child(3)  {
        
        border-right: 0;
    }
    

    .w4-dream-cta  {
        
        gap: 26px;
    }
    

    .w4-dream-text h3  {
        
        font-size: 27px;
    }
    

    .w4-white-btn,
    .w4-outline-btn  {
        
        min-width: 160px;
    }
}


@media (max-width:991px)  {
    
    .w4-choose-container  {
        
        padding-left: 24px;
        
        padding-right: 24px;
    }
    

    .w4-benefits-row  {
        
        grid-template-columns: repeat(2, 1fr);
    }
    

    .w4-benefit-item  {
        
        border-right: 0;
        
        justify-content: center;
        
        text-align: left;
    }
    

    .w4-dream-cta  {
        
        flex-direction: column;
        
        text-align: center;
    }
    

    .w4-dream-text h3  {
        
        font-size: 28px;
    }
}


@media (max-width:767px)  {
    
    .w4-choose-title  {
        
        font-size: 28px;
    }
    

    .w4-benefits-row  {
        
        display: flex;
        
        flex-direction: column;
        
        justify-content: flex-start;
        
        align-items: flex-start;
    }
    

    .w4-benefit-item  {
        
        justify-content: flex-start;
        
        padding: 0;
    }
    

    .w4-dream-buttons  {
        
        width: 100%;
        
        flex-direction: column;
    }
    

    .w4-white-btn,
    .w4-outline-btn  {
        
        width: 100%;
    }
}


@media (max-width:575px)  {
    
    .w4-choose-container  {
        
        padding: 34px 16px;
    }
    

    .w4-benefits-row  {
        
        display: flex;
        
        flex-direction: column;
        
        justify-content: flex-start;
        
        align-items: flex-start;
    }
    

    .w4-choose-title  {
        
        font-size: 25px;
    }
    

    .w4-dream-cta  {
        
        padding: 26px 20px;
    }
    

    .w4-rocket-box  {
        
        width: 130px;
        
        height: 100px;
        
        flex-basis: 100px;
        
        font-size: 72px;
    }
    

    .w4-dream-text h3  {
        
        font-size: 24px;
    }
    

    .w4-dream-text p  {
        
        font-size: 13px;
        
        line-height: 1.6;
    }
}


.w4-template-hero-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-template-hero-container  {
    
    padding: 48px 76px 42px;
}


.w4-template-badge  {
    
    width: fit-content;
    
    padding: 7px 17px;
    
    border: 1.5px solid #2368ff;
    
    border-radius: 30px;
    
    color: #293cff;
    
    background: #ffffff;
    
    font-size: 13px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.w4-template-badge i  {
    
    color: #ed149d;
    
    margin-right: 7px;
}


.w4-template-hero-content h2  {
    
    margin: 40px 0 0;
    
    color: #090b22;
    
    font-size: 45px;
    
    line-height: 1.18;
    
    font-weight: 700;
    
    letter-spacing: -1.4px;
}


.w4-template-hero-content h2 span  {
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-template-hero-content p  {
    
    max-width: 600px;
    
    margin: 30px 0 0;
    
    color: #242b3d;
    
    font-size: 17.5px;
    
    line-height: 1.75;
    
    font-weight: 500;
}


.w4-template-stats  {
    
    display: flex;
    
    align-items: center;
    
    gap: 34px;
    
    margin-top: 52px;
}


.w4-template-stat  {
    
    display: flex;
    
    align-items: center;
    
    gap: 14px;
    
    padding-right: 34px;
    
    border-right: 1px solid #d8deec;
}


.w4-template-stat:last-child  {
    
    border-right: 0;
    
    padding-right: 0;
}


.w4-template-stat-icon  {
    
    width: 54px;
    
    height: 54px;
    
    border: 1.5px solid #d724ff;
    
    border-radius: 8px;
    
    color: #2368ff;
    
    background: #ffffff;
    
    font-size: 26px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-template-stat h5  {
    
    margin: 0;
    
    color: #08091f;
    
    font-size: 18px;
    
    font-weight: 600;
}


.w4-template-stat span  {
    
    color: #1f2937;
    
    font-size: 16px;
    
    font-weight: 500;
}


.w4-template-visual  {
    
    position: relative;
    
    min-height: 439px;
}


.w4-template-bg-circle  {
    
    position: absolute;
    
    width: 600px;
    
    height: 410px;
    
    right: 60px;
    
    top: -22px;
    
    border-radius: 50%;
    
    background: radial-gradient(circle, rgba(246, 238, 255, 0.9) 0%, rgba(246, 238, 255, 0.55) 42%, transparent 72%);
}


.w4-template-dots  {
    
    position: absolute;
    
    left: 70px;
    
    top: 190px;
    
    width: 70px;
    
    height: 70px;
    
    opacity: 0.32;
    
    background-image: radial-gradient(#715cff 2px, transparent 2px);
    
    background-size: 15px 15px;
}


.w4-template-laptop  {
    
    position: absolute;
    
    width: 560px;
    
    right: 170px;
    
    top: 30px;
    
    z-index: 2;
}


.w4-template-mobile  {
    
    position: absolute;
    
    width: 180px;
    
    right: 95px;
    
    top: 112px;
    
    z-index: 4;
}


.w4-template-floating-icon  {
    
    position: absolute;
    
    width: 68px;
    
    height: 68px;
    
    border-radius: 13px;
    
    background: #ffffff;
    
    color: #2368ff;
    
    box-shadow: 0 14px 34px rgba(35, 55, 115, 0.12);
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    font-size: 30px;
    
    z-index: 5;
}


.w4-template-floating-icon.icon-one  {
    
    left: 38px;
    
    top: 40px;
    
    color: #ed149d;
}


.w4-template-floating-icon.icon-two  {
    
    right: 22px;
    
    top: 185px;
}


@media (max-width:1399px)  {
    
    .w4-template-hero-container  {
        
        padding-left: 54px;
        
        padding-right: 54px;
    }
    

    .w4-template-hero-content h2  {
        
        font-size: 50px;
    }
    

    .w4-template-laptop  {
        
        width: 510px;
        
        right: 145px;
    }
    

    .w4-template-mobile  {
        
        width: 160px;
        
        right: 82px;
    }
}


@media (max-width:1199px)  {
    
    .w4-template-hero-content h2  {
        
        font-size: 43px;
    }
    

    .w4-template-hero-content p  {
        
        font-size: 16px;
    }
    

    .w4-template-stats  {
        
        gap: 18px;
    }
    

    .w4-template-stat  {
        
        padding-right: 18px;
    }
    

    .w4-template-laptop  {
        
        width: 440px;
        
        right: 110px;
    }
    

    .w4-template-mobile  {
        
        width: 138px;
        
        right: 55px;
    }
}


@media (max-width:991px)  {
    
    .w4-template-hero-container  {
        
        padding: 40px 24px;
    }
    

    .w4-template-hero-content  {
        
        text-align: center;
    }
    

    .w4-template-badge  {
        
        margin: 0 auto;
    }
    

    .w4-template-hero-content h2  {
        
        font-size: 42px;
        
        margin-top: 28px;
    }
    

    .w4-template-hero-content p  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-template-stats  {
        
        justify-content: center;
        
        flex-wrap: wrap;
        
        margin-top: 36px;
    }
    

    .w4-template-stat  {
        
        border-right: 0;
    }
    

    .w4-template-visual  {
        
        min-height: 390px;
        
        margin-top: 35px;
    }
    

    .w4-template-bg-circle  {
        
        right: 50%;
        
        transform: translateX(50%);
    }
    

    .w4-template-laptop  {
        
        right: 50%;
        
        transform: translateX(35%);
    }
    

    .w4-template-mobile  {
        
        right: 12%;
    }
    

    .w4-template-floating-icon.icon-one  {
        
        left: 12%;
    }
    

    .w4-template-floating-icon.icon-two  {
        
        right: 6%;
    }
}


@media (max-width:767px)  {
    
    .w4-template-hero-content h2  {
        
        font-size: 35px;
    }
    

    .w4-template-stat  {
        
        width: 45%;
        
        justify-content: center;
        
        padding-right: 0;
    }
    

    .w4-template-visual  {
        
        min-height: 320px;
    }
    

    .w4-template-bg-circle  {
        
        width: 420px;
        
        height: 320px;
    }
    

    .w4-template-laptop  {
        
        width: 390px;
    }
    

    .w4-template-mobile  {
        
        width: 118px;
        
        top: 95px;
    }
    

    .w4-template-floating-icon  {
        
        width: 54px;
        
        height: 54px;
        
        font-size: 24px;
    }
}


@media (max-width:575px)  {
    
    .w4-template-hero-container  {
        
        padding: 32px 16px;
    }
    

    .w4-template-hero-content h2  {
        
        font-size: 30px;
    }
    

    .w4-template-hero-content p  {
        
        font-size: 14px;
        
        line-height: 1.7;
    }
    

    .w4-template-stat  {
        
        width: 100%;
    }
    

    .w4-template-visual  {
        
        min-height: 260px;
    }
    

    .w4-template-laptop  {
        
        width: 300px;
        
        top: 48px;
    }
    

    .w4-template-mobile  {
        
        width: 90px;
        
        right: 4%;
        
        top: 105px;
    }
    

    .w4-template-floating-icon  {
        
        display: none;
    }
    

    .w4-template-dots  {
        
        display: none;
    }
}


.template-category-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
}


.template-container  {
    
    padding: 18px 72px 34px;
}


.template-container h2  {
    
    margin: 0 0 18px;
    
    color: #08091f;
    
    font-size: 24px;
    
    font-weight: 600;
}


.template-tabs  {
    
    display: flex;
    
    gap: 22.5px;
    
    margin-bottom: 34px;
    
    overflow-x: auto;
}


.template-tabs::-webkit-scrollbar  {
    
    height: 4px;
}


.template-tabs::-webkit-scrollbar-thumb  {
    
    background: #d6ccff;
    
    border-radius: 20px;
}


.template-tabs button  {
    
    min-width: 104px;
    
    height: 54px;
    
    border: 1px solid #d9e0ed;
    
    border-radius: 8px;
    
    background: #ffffff;
    
    color: #111827;
    
    font-size: 14px;
    
    font-weight: 600;
    
    white-space: nowrap;
}


.template-tabs button.active  {
    
    color: #ffffff;
    
    border-color: transparent;
    
    background: linear-gradient(135deg, #ed149d, #125dff);
}


.template-tabs button.active,
.template-tabs button:hover  {
    
    color: #ffffff;
    
    border-color: transparent;
    
    background: linear-gradient(135deg, #ed149d, #125dff);
}


.template-sort button.active,
.template-sort button:hover  {
    
    color: #ffffff;
    
    border-color: transparent;
    
    background: linear-gradient(135deg, #ed149d, #125dff);
}


.template-tabs button.active,
 {
    
color: #ffffff;
    
border-color: transparent;
    
background: linear-gradient(135deg, #ed149d, #125dff);
}


.template-tabs button i  {
    
    margin-left: 8px;
    
    font-size: 13px;
}


.template-filter-row  {
    
    display: flex;
    
    justify-content: space-between;
    
    gap: 20px;
    
    margin-bottom: 24px;
}


.template-search  {
    
    position: relative;
    
    width: 360px;
}


.template-search input  {
    
    width: 100%;
    
    height: 54px;
    
    padding: 0 52px 0 18px;
    
    border: 1px solid #d9e0ed;
    
    border-radius: 7px;
    
    outline: none;
    
    color: #111827;
    
    font-size: 14px;
}


.template-search input::placeholder  {
    
    color: #7b8496;
}


.template-search i  {
    
    position: absolute;
    
    right: 18px;
    
    top: 50%;
    
    transform: translateY(-50%);
    
    color: #64748b;
    
    font-size: 18px;
}


.template-sort  {
    
    display: flex;
    
    align-items: center;
    
    gap: 10px;
}


.template-sort span  {
    
    color: #111827;
    
    font-size: 14px;
    
    font-weight: 600;
}


.template-sort button  {
    
    min-width: 130px;
    
    height: 54px;
    
    border: 1px solid #d9e0ed;
    
    border-radius: 7px;
    
    background: #ffffff;
    
    color: #111827;
    
    font-size: 14px;
    
    font-weight: 700;
}


.template-sort button .template-sort button i  {
    
    margin-left: 18px;
}


.template-grid  {
    
    display: grid;
    
    grid-template-columns: repeat(5, 1fr);
    
    gap: 24px;
}


.template-card  {
    
    padding: 10px 10px 14px;
    
    border: 1px solid #d9e0ed;
    
    border-radius: 10px;
    
    background: #ffffff;
    
    box-shadow: 0 10px 24px rgba(30, 50, 100, 0.07);
}


.template-card img  {
    
    width: 100%;
    
    height: 174px;
    
    border-radius: 6px;
    
    object-fit: cover;
    
    display: block;
}


.template-card h4  {
    
    margin: 16px 0 6px;
    
    color: #08091f;
    
    font-size: 17px;
    
    font-weight: 600;
}


.template-card p  {
    
    margin: 0 0 22px;
    
    color: #667085;
    
    font-size: 16px;
    
    font-weight: 500;
}


.template-card div  {
    
    display: flex;
    
    gap: 12px;
}


.template-card a  {
    
    flex: 1;
    
    height: 42px;
    
    border-radius: 6px;
    
    text-decoration: none;
    
    font-size: 13px;
    
    font-weight: 600;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.preview-btn  {
    
    color: #111827;
    
    border: 1px solid #d9e0ed;
    
    background: #ffffff;
}


.use-btn  {
    
    color: #ffffff;
    
    background: linear-gradient(90deg, #1260ff, #5f26ff);
}


.preview-btn:hover  {
    
    color: #111827;
    
    background: #f8fafc;
}


.use-btn:hover  {
    
    color: #ffffff;
}


.template-view-more  {
    
    text-align: center;
    
    margin-top: 32px;
}


.template-view-more a  {
    
    min-width: 255px;
    
    height: 54px;
    
    padding: 0 28px;
    
    border: 1.5px solid #e424d5;
    
    border-radius: 8px;
    
    color: #111827;
    
    background: #ffffff;
    
    text-decoration: none;
    
    font-size: 15px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
    
    gap: 18px;
}


.template-view-more a i  {
    
    color: #1260ff;
    
    font-size: 20px;
}


@media (max-width:1399px)  {
    
    .template-container  {
        
        padding-left: 48px;
        
        padding-right: 48px;
    }
    

    .template-grid  {
        
        gap: 20px;
    }
    

    .template-card img  {
        
        height: 150px;
    }
}


@media (max-width:1199px)  {
    
    .template-grid  {
        
        grid-template-columns: repeat(3, 1fr);
    }
    

    .template-card img  {
        
        height: 165px;
    }
}


@media (max-width:991px)  {
    
    .template-container  {
        
        padding-left: 24px;
        
        padding-right: 24px;
    }
    

    .template-filter-row  {
        
        flex-direction: column;
    }
    

    .template-search  {
        
        width: 100%;
    }
    

    .template-sort  {
        
        justify-content: flex-end;
    }
}


@media (max-width:767px)  {
    
    .template-grid  {
        
        grid-template-columns: repeat(2, 1fr);
    }
    

    .template-card img  {
        
        height: 140px;
    }
}


@media (max-width:575px)  {
    
    .template-container  {
        
        padding: 18px 16px 30px;
    }
    

    .template-container h2  {
        
        font-size: 21px;
    }
    

    .template-tabs  {
        
        margin-bottom: 22px;
    }
    

    .template-tabs button  {
        
        min-width: 95px;
        
        height: 48px;
        
        font-size: 12px;
    }
    

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

    .template-card img  {
        
        height: 180px;
    }
    

    .template-sort  {
        
        justify-content: space-between;
    }
    

    .template-view-more a  {
        
        width: 100%;
    }
}


.w4-best-template-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-best-template-container  {
    
    padding: 18px 76px 36px;
}


.w4-best-box  {
    
    padding: 28px 34px 34px;
    
    border-radius: 14px;
    
    background: linear-gradient(90deg, #f6f3ff 0%, #ffffff 50%, #f5f1ff 100%);
}


.w4-best-box h2  {
    
    margin: 0 0 34px;
    
    color: #07091f;
    
    text-align: center;
    
    font-size: 32px;
    
    font-weight: 600;
}


.w4-best-features  {
    
    display: grid;
    
    grid-template-columns: repeat(6, 1fr);
    
    gap: 26px;
}


.w4-best-item  {
    
    display: flex;
    
    align-items: center;
    
    gap: 14px;
}


.w4-best-icon  {
    
    width: 54px;
    
    height: 54px;
    
    flex: 0 0 54px;
    
    border: 1px solid #d9d2ff;
    
    border-radius: 50%;
    
    background: #ffffff;
    
    color: #b000ff;
    
    font-size: 25px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-best-item h5  {
    
    margin: 0 0 6px;
    
    color: #07091f;
    
    font-size: 14px;
    
    font-weight: 600;
}


.w4-best-item p  {
    
    margin: 0;
    
    color: #1f2937;
    
    font-size: 14px;
    
    line-height: 1.45;
    
    font-weight: 500;
}


.w4-custom-template-cta  {
    
    margin-top: 28px;
    
    min-height: 165px;
    
    padding: 28px 48px;
    
    border-radius: 16px;
    
    background: linear-gradient(100deg, #ed149d 0%, #7c35ff 48%, #1765ff 100%);
    
    box-shadow: 0 18px 40px rgba(36, 87, 245, 0.2);
    
    display: flex;
    
    align-items: center;
    
    gap: 42px;
}


.w4-rocket-area  {
    
    width: 215px;
    
    height: 125px;
    
    flex: 0 0 215px;
    
    position: relative;
    
    color: #ffffff;
    
    font-size: 90px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-rocket-area::before  {
    
    content: "";
    
    position: absolute;
    
    width: 150px;
    
    height: 42px;
    
    left: 8px;
    
    bottom: -2px;
    
    border-radius: 50px 50px 8px 8px;
    
    background: rgba(255, 255, 255, 0.35);
}


.w4-rocket-area::after  {
    
    content: "✦";
    
    position: absolute;
    
    left: 22px;
    
    top: 16px;
    
    color: #ffffff;
    
    font-size: 18px;
}


.w4-rocket-area i  {
    
    position: relative;
    
    z-index: 2;
    
    transform: rotate(42deg);
    
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.14));
}


.w4-custom-text  {
    
    flex: 1;
}


.w4-custom-text h3  {
    
    margin: 0 0 10px;
    
    color: #ffffff;
    
    font-size: 30px;
    
    font-weight: 600;
}


.w4-custom-text p  {
    
    margin: 0;
    
    color: #ffffff;
    
    font-size: 16px;
    
    font-weight: 500;
}


.w4-custom-btn  {
    
    min-width: 305px;
    
    height: 58px;
    
    border-radius: 8px;
    
    background: #ffffff;
    
    color: #165fff;
    
    text-decoration: none;
    
    font-size: 15px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
    
    gap: 16px;
}


.w4-custom-btn i  {
    
    font-size: 20px;
}


.w4-custom-btn:hover  {
    
    color: #165fff;
    
    transform: translateY(-2px);
}


@media (max-width:1399px)  {
    
    .w4-best-template-container  {
        
        padding-left: 54px;
        
        padding-right: 54px;
    }
    

    .w4-best-features  {
        
        gap: 20px;
    }
}


@media (max-width:1199px)  {
    
    .w4-best-features  {
        
        grid-template-columns: repeat(3, 1fr);
    }
    

    .w4-custom-template-cta  {
        
        gap: 28px;
    }
    

    .w4-custom-text h3  {
        
        font-size: 26px;
    }
    

    .w4-custom-btn  {
        
        min-width: 260px;
    }
}


@media (max-width:991px)  {
    
    .w4-best-template-container  {
        
        padding-left: 24px;
        
        padding-right: 24px;
    }
    

    .w4-best-box h2  {
        
        font-size: 28px;
    }
    

    .w4-best-features  {
        
        grid-template-columns: repeat(2, 1fr);
    }
    

    .w4-custom-template-cta  {
        
        flex-direction: column;
        
        text-align: center;
    }
    

    .w4-rocket-area  {
        
        width: 150px;
        
        height: 105px;
        
        flex-basis: 105px;
    }
}


@media (max-width:767px)  {
    
    .w4-best-box  {
        
        padding: 26px 22px;
    }
    

    .w4-best-features  {
        
        grid-template-columns: 1fr;
    }
    

    .w4-custom-btn  {
        
        width: 100%;
        
        min-width: auto;
    }
}


@media (max-width:575px)  {
    
    .w4-best-template-container  {
        
        padding: 16px 16px 30px;
    }
    

    .w4-best-box h2  {
        
        font-size: 24px;
    }
    

    .w4-best-item  {
        
        align-items: flex-start;
    }
    

    .w4-custom-template-cta  {
        
        padding: 26px 20px;
    }
    

    .w4-custom-text h3  {
        
        font-size: 23px;
    }
    

    .w4-custom-text p  {
        
        font-size: 13px;
        
        line-height: 1.6;
    }
    

    .w4-rocket-area  {
        
        font-size: 72px;
    }
}


.w4-pricing-section  {
    
    position: relative;
    
    overflow: hidden;
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
}


.w4-pricing-section::before,
.w4-pricing-section::after  {
    
    content: "";
    
    position: absolute;
    
    width: 280px;
    
    height: 280px;
    
    border: 2px solid rgba(165, 120, 255, 0.15);
    
    border-radius: 50%;
}


.w4-pricing-section::before  {
    
    left: -140px;
    
    top: 180px;
}


.w4-pricing-section::after  {
    
    right: -140px;
    
    top: 180px;
}


.w4-pricing-container  {
    
    position: relative;
    
    z-index: 2;
    
    padding: 40px 76px 60px;
}


.w4-pricing-badge  {
    
    width: fit-content;
    
    margin: 0 auto 18px;
    
    padding: 7px 18px;
    
    border: 1.5px solid #2368ff;
    
    border-radius: 30px;
    
    color: #5a35ff;
    
    background: #ffffff;
    
    font-size: 13px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.w4-pricing-badge i  {
    
    color: #ed149d;
    
    margin-right: 6px;
}


.w4-pricing-title  {
    
    margin: 0;
    
    text-align: center;
    
    color: #07091f;
    
    font-size: 45px;
    
    font-weight: 600;
    
    line-height: 1.2;
}


.w4-pricing-title span  {
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-pricing-subtitle  {
    
    margin: 18px 0 32px;
    
    text-align: center;
    
    color: #374151;
    
    font-size: 17.5px;
    
    font-weight: 500;
}


.w4-pricing-top-features  {
    
    display: flex;
    
    justify-content: center;
    
    align-items: center;
    
    gap: 42px;
    
    margin-bottom: 54px;
}


.w4-top-feature  {
    
    display: flex;
    
    align-items: center;
    
    gap: 12px;
}


.w4-top-feature i  {
    
    color: #5a35ff;
    
    font-size: 24px;
}


.w4-top-feature span  {
    
    color: #111827;
    
    font-size: 15px;
    
    font-weight: 700;
}


.w4-pricing-grid  {
    
    display: grid;
    
    grid-template-columns: repeat(3, 1fr);
    
    gap: 34px;
}


.w4-price-card  {
    
    position: relative;
    
    padding: 44px 34px 34px;
    
    border: 1px solid #dce3f1;
    
    border-radius: 16px;
    
    background: #ffffff;
    
    box-shadow: 0 16px 40px rgba(30, 50, 100, 0.06);
    
    transition: 0.3s ease;
}


.w4-price-card:hover  {
    
    transform: translateY(-6px);
    
    box-shadow: 0 24px 55px rgba(30, 50, 100, 0.12);
}


.business-card  {
    
    border: 2px solid #ed149d;
}


.w4-popular-tag  {
    
    position: absolute;
    
    left: 50%;
    
    top: -14px;
    
    transform: translateX(-50%);
    
    padding: 8px 18px;
    
    border-radius: 30px;
    
    background: #ed149d;
    
    color: #ffffff;
    
    font-size: 11px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.w4-plan-icon  {
    
    width: 88px;
    
    height: 88px;
    
    margin: 0 auto 28px;
    
    border-radius: 50%;
    
    font-size: 38px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.blue-icon  {
    
    color: #1765ff;
    
    background: linear-gradient(135deg, #eef4ff, #dfe8ff);
}


.pink-icon  {
    
    color: #ed149d;
    
    background: linear-gradient(135deg, #ffeaf5, #ffd8ea);
}


.green-icon  {
    
    color: #16b364;
    
    background: linear-gradient(135deg, #e8fff3, #d7f7e5);
}


.w4-price-card h3  {
    
    margin: 0 0 8px;
    
    text-align: center;
    
    color: #07091f;
    
    font-size: 25px;
    
    font-weight: 600;
}


.w4-price-card small  {
    
    display: block;
    
    margin-bottom: 22px;
    
    text-align: center;
    
    color: #4b5563;
    
    font-size: 16px;
    
    font-weight: 500;
}


.w4-price  {
    
    text-align: center;
    
    color: #1765ff;
    
    font-size: 35px;
    
    font-weight: 600;
    
    line-height: 1;
}


.pink-price  {
    
    color: #ed149d;
}


.green-price  {
    
    color: #16b364;
}


.w4-payment-text  {
    
    margin: 16px 0 34px;
    
    text-align: center;
    
    color: #4b5563;
    
    font-size: 15px;
    
    font-weight: 500;
}


.w4-plan-features  {
    
    list-style: none;
    
    padding: 0;
    
    margin: 0 0 38px;
}


.w4-plan-features li  {
    
    display: flex;
    
    align-items: center;
    
    gap: 12px;
    
    margin-bottom: 16px;
    
    color: #111827;
    
    font-size: 15px;
    
    font-weight: 500;
}


.w4-plan-features i  {
    
    color: #1765ff;
    
    font-size: 18px;
}


.pink-check i  {
    
    color: #ed149d;
}


.green-check i  {
    
    color: #16b364;
}


.w4-plan-btn  {
    
    width: 100%;
    
    height: 58px;
    
    border-radius: 8px;
    
    text-decoration: none;
    
    font-size: 16px;
    
    font-weight: 600;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.blue-btn  {
    
    color: #ffffff;
    
    background: linear-gradient(90deg, #1765ff, #1148ff);
}


.gradient-btn  {
    
    color: #ffffff;
    
    background: linear-gradient(90deg, #ed149d, #235dff);
}


.green-btn  {
    
    color: #ffffff;
    
    background: linear-gradient(90deg, #16b364, #10a05c);
}


.w4-plan-btn:hover  {
    
    color: #ffffff;
    
    transform: translateY(-2px);
}


@media (max-width:1399px)  {
    
    .w4-pricing-container  {
        
        padding-left: 54px;
        
        padding-right: 54px;
    }
    

    .w4-pricing-title  {
        
        font-size: 48px;
    }
    

    .w4-price-card h3  {
        
        font-size: 28px;
    }
    

    .w4-price  {
        
        font-size: 54px;
    }
}


@media (max-width:1199px)  {
    
    .w4-pricing-grid  {
        
        gap: 24px;
    }
    

    .w4-price-card  {
        
        padding: 40px 24px 30px;
    }
    

    .w4-price-card h3  {
        
        font-size: 25px;
    }
    

    .w4-price  {
        
        font-size: 48px;
    }
    

    .w4-plan-features li  {
        
        font-size: 14px;
    }
}


@media (max-width:991px)  {
    
    .w4-pricing-container  {
        
        padding-left: 24px;
        
        padding-right: 24px;
    }
    

    .w4-pricing-title  {
        
        font-size: 42px;
    }
    

    .w4-pricing-top-features  {
        
        flex-wrap: wrap;
        
        gap: 20px 28px;
    }
    

    .w4-pricing-grid  {
        
        grid-template-columns: 1fr;
        
        max-width: 620px;
        
        margin: 0 auto;
    }
}


@media (max-width:767px)  {
    
    .w4-pricing-title  {
        
        font-size: 34px;
    }
    

    .w4-pricing-subtitle  {
        
        font-size: 15px;
    }
    

    .w4-top-feature span  {
        
        font-size: 13px;
    }
    

    .w4-price-card h3  {
        
        font-size: 22px;
    }
    

    .w4-price  {
        
        font-size: 42px;
    }
}


@media (max-width:575px)  {
    
    .w4-pricing-container  {
        
        padding: 34px 16px 46px;
    }
    

    .w4-pricing-title  {
        
        font-size: 28px;
    }
    

    .w4-pricing-top-features  {
        
        flex-direction: column;
    }
    

    .w4-price-card  {
        
        padding: 36px 20px 28px;
    }
    

    .w4-plan-icon  {
        
        width: 74px;
        
        height: 74px;
        
        font-size: 30px;
    }
    

    .w4-price  {
        
        font-size: 38px;
    }
    

    .w4-plan-btn  {
        
        height: 52px;
        
        font-size: 14px;
    }
}


.w4-compare-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-compare-container  {
    
    padding: 28px 76px 27px;
}


.w4-compare-title  {
    
    margin: 0 0 16px;
    
    text-align: center;
    
    color: #08091f;
    
    font-size: 28px;
    
    font-weight: 600;
}


.w4-table-wrap  {
    
    max-width: 1430px;
    
    margin: 0 auto 34px;
    
    overflow-x: auto;
    
    border: 1px solid #d9e1f1;
    
    border-radius: 12px;
}


.w4-compare-table  {
    
    width: 100%;
    
    min-width: 850px;
    
    border-collapse: collapse;
    
    background: #ffffff;
}


.w4-compare-table th,
.w4-compare-table td  {
    
    padding: 12px 24px;
    
    border-right: 1px solid #dfe6f3;
    
    border-bottom: 1px solid #dfe6f3;
    
    color: #111827;
    
    font-size: 15px;
}


.w4-compare-table th:last-child,
.w4-compare-table td:last-child  {
    
    border-right: 0;
}


.w4-compare-table tr:last-child td  {
    
    border-bottom: 0;
}


.w4-compare-table thead th  {
    
    height: 88px;
    
    background: #fbfcff;
    
    font-size: 15px;
    
    font-weight: 600;
    
    text-align: center;
}


.w4-compare-table thead th:first-child,
.w4-compare-table tbody td:first-child  {
    
    text-align: left;
    
    font-weight: 700;
}


.w4-compare-table tbody td:not(:first-child)  {
    
    text-align: center;
    
    font-weight: 600;
}


.blue-price,
.blue-text  {
    
    color: #115dff !important;
}


.pink-price,
.pink-text  {
    
    color: #ed149d !important;
}


.green-price,
.green-text  {
    
    color: #12b76a !important;
}


.w4-compare-table span  {
    
    font-size: 22px;
    
    font-weight: 600;
}


.no-icon  {
    
    color: #667085 !important;
}


.w4-benefit-grid  {
    
    display: grid;
    
    grid-template-columns: repeat(6, 1fr);
    
    gap: 22px;
    
    margin-bottom: 34px;
}


.w4-benefit-card  {
    
    min-height: 165px;
    
    padding: 24px 18px;
    
    border: 1px solid #dfe5f0;
    
    border-radius: 12px;
    
    background: #ffffff;
    
    text-align: center;
    
    box-shadow: 0 12px 28px rgba(30, 50, 100, 0.06);
}


.w4-benefit-icon  {
    
    width: 58px;
    
    height: 58px;
    
    margin: 0 auto 18px;
    
    border-radius: 14px;
    
    font-size: 28px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.blue-soft  {
    
    color: #1765ff;
    
    background: #eef4ff;
}


.orange-soft  {
    
    color: #ff9300;
    
    background: #fff1df;
}


.purple-soft  {
    
    color: #7b35ff;
    
    background: #f2e8ff;
}


.green-soft  {
    
    color: #12b76a;
    
    background: #e8fff3;
}


.w4-benefit-card h5  {
    
    margin: 0 0 10px;
    
    color: #08091f;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-benefit-card p  {
    
    margin: 0;
    
    color: #344054;
    
    font-size: 15px;
    
    line-height: 1.55;
    
    font-weight: 500;
}


.w4-final-cta  {
    
    position: relative;
    
    min-height: 210px;
    
    padding: 32px 70px;
    
    border-radius: 16px;
    
    background: linear-gradient(100deg, #d916a8 0%, #733cff 48%, #056bff 100%);
    
    box-shadow: 0 18px 40px rgba(36, 87, 245, 0.22);
    
    display: grid;
    
    grid-template-columns: 320px 1fr 240px;
    
    align-items: center;
    
    gap: 38px;
    
    overflow: hidden;
}


.w4-cta-card-preview  {
    
    width: 280px;
    
    height: 150px;
    
    padding: 14px;
    
    border-radius: 12px;
    
    background: rgba(255, 255, 255, 0.32);
    
    backdrop-filter: blur(8px);
}


.w4-preview-top  {
    
    display: flex;
    
    gap: 6px;
    
    margin-bottom: 18px;
}


.w4-preview-top span  {
    
    width: 8px;
    
    height: 8px;
    
    border-radius: 50%;
    
    background: #ffffff;
}


.w4-preview-body  {
    
    display: grid;
    
    grid-template-columns: 46px 1fr;
    
    gap: 16px;
    
    align-items: center;
}


.w4-pin  {
    
    width: 46px;
    
    height: 46px;
    
    border-radius: 50%;
    
    background: #ffffff;
    
    color: #ed149d;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    font-size: 20px;
}


.w4-preview-lines span  {
    
    display: block;
    
    height: 9px;
    
    border-radius: 20px;
    
    background: rgba(255, 255, 255, 0.75);
    
    margin-bottom: 12px;
}


.w4-preview-lines span:first-child  {
    
    width: 150px;
}


.w4-preview-lines span:last-child  {
    
    width: 110px;
}


.w4-preview-buttons  {
    
    grid-column: 2;
    
    display: flex;
    
    gap: 14px;
}


.w4-preview-buttons span  {
    
    width: 84px;
    
    height: 22px;
    
    border-radius: 6px;
    
    background: #ed149d;
}


.w4-preview-buttons span:last-child  {
    
    background: #ffffff;
}


.w4-final-text h3  {
    
    margin: 0 0 10px;
    
    color: #ffffff;
    
    font-size: 34px;
    
    font-weight: 600;
}


.w4-final-text p  {
    
    max-width: 600px;
    
    margin: 0 0 24px;
    
    color: #ffffff;
    
    font-size: 15px;
    
    line-height: 1.6;
}


.w4-final-buttons  {
    
    display: flex;
    
    gap: 18px;
}


.w4-final-primary,
.w4-final-outline  {
    
    min-width: 190px;
    
    height: 54px;
    
    border-radius: 8px;
    
    text-decoration: none;
    
    font-size: 15px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-final-primary  {
    
    color: #ed149d;
    
    background: #ffffff;
}


.w4-final-outline  {
    
    color: #ffffff;
    
    border: 1.5px solid rgba(255, 255, 255, 0.75);
}


.w4-final-rocket  {
    
    color: #ffffff;
    
    font-size: 110px;
    
    text-align: center;
}


.w4-final-rocket i  {
    
    display: inline-block;
    
    transform: rotate(42deg);
}


@media (max-width:1399px)  {
    
    .w4-compare-container  {
        
        padding-left: 54px;
        
        padding-right: 54px;
    }
    

    .w4-benefit-grid  {
        
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width:1199px)  {
    
    .w4-final-cta  {
        
        grid-template-columns: 260px 1fr;
    }
    

    .w4-final-rocket  {
        
        display: none;
    }
    

    .w4-cta-card-preview  {
        
        width: 240px;
    }
}


@media (max-width:991px)  {
    
    .w4-compare-container  {
        
        padding-left: 24px;
        
        padding-right: 24px;
    }
    

    .w4-benefit-grid  {
        
        grid-template-columns: repeat(2, 1fr);
    }
    

    .w4-final-cta  {
        
        grid-template-columns: 1fr;
        
        text-align: center;
        
        padding: 32px 24px;
    }
    

    .w4-cta-card-preview  {
        
        margin: 0 auto;
    }
    

    .w4-final-text p  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-final-buttons  {
        
        justify-content: center;
    }
}


@media (max-width:767px)  {
    
    .w4-compare-title  {
        
        font-size: 24px;
    }
    

    .w4-benefit-grid  {
        
        grid-template-columns: 1fr;
    }
    

    .w4-final-buttons  {
        
        flex-direction: column;
    }
    

    .w4-final-primary,
    .w4-final-outline  {
        
        width: 100%;
    }
    

    .w4-final-text h3  {
        
        font-size: 27px;
    }
}


@media (max-width:575px)  {
    
    .w4-compare-container  {
        
        padding: 24px 16px 38px;
    }
    

    .w4-compare-table th,
    .w4-compare-table td  {
        
        padding: 10px 16px;
        
        font-size: 12px;
    }
    

    .w4-cta-card-preview  {
        
        width: 100%;
        
        max-width: 280px;
    }
    

    .w4-final-text h3  {
        
        font-size: 24px;
    }
    

    .w4-final-text p  {
        
        font-size: 13px;
    }
}


.w4-how-section  {
    
    background: #fff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-how-container  {
    
    position: relative;
    
    padding: 10px 76px 44px;
}


.w4-how-badge  {
    
    width: fit-content;
    
    margin: 0 auto 10px;
    
    padding: 6px 18px;
    
    border: 1.5px solid #7d7cff;
    
    border-radius: 30px;
    
    color: #315dff;
    
    font-size: 12px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.w4-how-title  {
    
    margin: 0;
    
    text-align: center;
    
    color: #08091f;
    
    font-size: 45px;
    
    font-weight: 600;
}


.w4-how-title span  {
    
    background: linear-gradient(90deg, #ee149d, #2368ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-how-subtitle  {
    
    margin: 12px 0 42px;
    
    text-align: center;
    
    color: #1f2937;
    
    font-size: 17.5px;
    
    line-height: 1.7;
    
    font-weight: 500;
}


.w4-how-wrapper  {
    
    position: relative;
}


.w4-dots  {
    
    position: absolute;
    
    width: 58px;
    
    height: 58px;
    
    opacity: .35;
    
    background-image: radial-gradient(#8b5cff 2px, transparent 2px);
    
    background-size: 13px 13px;
}


.dot-left  {
    
    left: 35px;
    
    top: -115px;
}


.dot-right  {
    
    right: 35px;
    
    top: -115px;
}


.w4-side-arc  {
    
    position: absolute;
    
    top: -80px;
    
    width: 180px;
    
    height: 440px;
    
    border: 3px solid #eee6ff;
    
    border-radius: 50%;
    
    z-index: 0;
}


.left-arc  {
    
    left: -120px;
    
    border-right: 0;
}


.right-arc  {
    
    right: -120px;
    
    border-left: 0;
}


.w4-step-card  {
    
    position: relative;
    
    z-index: 2;
    
    height: 100%;
    
    min-height: 420px;
    
    padding: 38px 26px 24px;
    
    border: 1.5px solid #e8e8f4;
    
    border-radius: 16px;
    
    background: #fff;
    
    text-align: center;
    
    box-shadow: 0 12px 28px rgba(35, 55, 115, 0.08);
}


.w4-step-card::after  {
    
    content: "";
    
    position: absolute;
    
    top: 85px;
    
    right: -32px;
    
    width: 35px;
    
    border-top: 3px dotted #7657ff;
}


.col-xl-3:last-child .w4-step-card::after  {
    
    display: none;
}


.w4-step-number  {
    
    position: absolute;
    
    top: -26px;
    
    left: 50%;
    
    transform: translateX(-50%);
    
    width: 52px;
    
    height: 52px;
    
    border-radius: 50%;
    
    color: #fff;
    
    font-size: 15px;
    
    font-weight: 900;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.pink-card .w4-step-number,
.pink-card .w4-step-icon  {
    
    background: #e6159f;
}


.purple-card .w4-step-number,
.purple-card .w4-step-icon  {
    
    background: #7437ff;
}


.blue-card .w4-step-number,
.blue-card .w4-step-icon  {
    
    background: #1765ff;
}


.green-card .w4-step-number,
.green-card .w4-step-icon  {
    
    background: #08ad78;
}


.w4-step-icon  {
    
    width: 92px;
    
    height: 92px;
    
    margin: 0 auto 20px;
    
    border-radius: 50%;
    
    color: #fff;
    
    font-size: 46px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    opacity: .18;
}


.w4-step-card .w4-step-icon i  {
    
    opacity: 1;
}


.w4-step-card h5  {
    
    margin: 0 0 12px;
    
    color: #07091f;
    
    font-size: 16px;
    
    font-weight: 600;
}


.w4-step-card p  {
    
    max-width: 210px;
    
    margin: 0 auto 22px;
    
    color: #1f2937;
    
    font-size: 16px;
    
    line-height: 1.65;
    
    font-weight: 500;
}


.w4-plan-preview  {
    
    display: grid;
    
    grid-template-columns: repeat(3, 1fr);
    
    gap: 6px;
    
    padding: 12px;
    
    border: 1px solid #f1d8ff;
    
    border-radius: 8px;
}


.w4-plan-preview div  {
    
    padding: 9px 5px;
    
    border: 1px solid #e6e9f5;
    
    border-radius: 5px;
    
    text-align: left;
}


.w4-plan-preview .active  {
    
    border-color: #ee149d;
}


.w4-plan-preview b  {
    
    display: block;
    
    font-size: 8px;
}


.w4-plan-preview strong  {
    
    display: block;
    
    color: #08091f;
    
    font-size: 13px;
    
    margin: 6px 0;
}


.w4-plan-preview .active strong  {
    
    color: #ee149d;
}


.w4-plan-preview span  {
    
    display: block;
    
    height: 5px;
    
    margin-top: 5px;
    
    border-radius: 10px;
    
    background: #e5e7ef;
}


.w4-template-preview  {
    
    display: grid;
    
    grid-template-columns: repeat(3, 1fr);
    
    gap: 8px;
}


.w4-template-preview img  {
    
    width: 100%;
    
    height: 62px;
    
    border-radius: 5px;
    
    object-fit: cover;
    
    box-shadow: 0 5px 12px rgba(30, 50, 100, .12);
}


.w4-builder-preview  {
    
    height: 36%;
    
    display: flex;
    
    grid-template-columns: 48px 1fr;
    
    border: 1px solid #dfe5f3;
    
    border-radius: 8px;
    
    overflow: hidden;
}


.builder-sidebar  {
    
    background: #122351;
    
    padding: 12px 10px;
}


.builder-sidebar span  {
    
    display: block;
    
    height: 8px;
    
    margin-bottom: 11px;
    
    border-radius: 10px;
    
    background: #ffffff;
    
    opacity: .45;
}


.builder-body  {
    
    background: #fff;
    
    padding: 12px;
}


.builder-top  {
    
    height: 18px;
    
    border-radius: 5px;
    
    background: #eef2ff;
    
    margin-bottom: 15px;
}


.builder-content  {
    
    display: grid;
    
    grid-template-columns: 1fr 70px;
    
    gap: 12px;
    
    align-items: center;
}


.builder-content span  {
    
    height: 55px;
    
    border-radius: 6px;
    
    background: #eef2ff;
}


.builder-content div  {
    
    height: 55px;
    
    border-radius: 6px;
    
    background: linear-gradient(135deg, #7dc8ff, #446dff);
}


.w4-publish-preview  {
    
    position: relative;
    
    height: 135px;
    
    padding-top: 38px;
}


.domain-box  {
    
    width: 170px;
    
    height: 38px;
    
    margin: 0 auto 10px;
    
    border-radius: 8px;
    
    background: #fff;
    
    box-shadow: 0 8px 22px rgba(30, 50, 100, .12);
    
    font-size: 12px;
    
    font-weight: 800;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    gap: 6px;
}


.domain-box i  {
    
    color: #08ad78;
}


.w4-publish-preview button  {
    
    border: 0;
    
    padding: 10px 25px;
    
    border-radius: 6px;
    
    background: #08ad78;
    
    color: #fff;
    
    font-size: 12px;
    
    font-weight: 900;
}


.confetti  {
    
    position: absolute;
    
    width: 8px;
    
    height: 28px;
    
    border-radius: 5px;
}


.c1  {
    
    left: 30px;
    
    top: 35px;
    
    background: #1765ff;
    
    transform: rotate(-35deg);
}


.c2  {
    
    right: 34px;
    
    top: 28px;
    
    background: #ee149d;
    
    transform: rotate(35deg);
}


.c3  {
    
    left: 55px;
    
    bottom: 20px;
    
    background: #ffc12b;
    
    transform: rotate(50deg);
}


@media (max-width:1199px)  {
    
    .w4-step-card::after  {
        
        display: none;
    }
}


@media (max-width:991px)  {
    
    .w4-how-container  {
        
        padding: 20px 24px 40px;
    }
    

    .w4-how-title  {
        
        font-size: 34px;
    }
    

    .w4-side-arc,
    .w4-dots  {
        
        display: none;
    }
}


@media (max-width:575px)  {
    
    .w4-how-container  {
        
        padding: 18px 16px 34px;
    }
    

    .w4-how-title  {
        
        font-size: 28px;
    }
    

    .w4-how-subtitle  {
        
        font-size: 13px;
    }
    

    .w4-step-card  {
        
        min-height: auto;
        
        padding: 36px 18px 22px;
    }
}


.w4-easy-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-easy-container  {
    
    padding: 10px 42px 34px;
}


.w4-easy-title  {
    
    margin: 0 0 24px;
    
    text-align: center;
    
    color: #08091f;
    
    font-size: 24px;
    
    font-weight: 700;
}


.w4-easy-features  {
    
    display: grid;
    
    grid-template-columns: repeat(6, 1fr);
    
    margin-bottom: 30px;
}


.w4-easy-feature  {
    
    min-height: 142px;
    
    padding: 0 28px;
    
    border-right: 1px solid #dfe4f0;
    
    text-align: center;
}


.w4-easy-feature:last-child  {
    
    border-right: 0;
}


.w4-easy-icon  {
    
    width: 56px;
    
    height: 56px;
    
    margin: 0 auto 18px;
    
    border-radius: 14px;
    
    font-size: 28px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-easy-icon.pink  {
    
    color: #ed149d;
    
    background: #ffe9f6;
}


.w4-easy-icon.purple  {
    
    color: #7437ff;
    
    background: #efe7ff;
}


.w4-easy-icon.blue  {
    
    color: #1765ff;
    
    background: #eaf1ff;
}


.w4-easy-icon.green  {
    
    color: #12b76a;
    
    background: #dcfbef;
}


.w4-easy-icon.orange  {
    
    color: #ff8b2b;
    
    background: #fff0e2;
}


.w4-easy-icon.violet  {
    
    color: #8b35ff;
    
    background: #f2e8ff;
}


.w4-easy-feature h5  {
    
    margin: 0 0 10px;
    
    color: #08091f;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-easy-feature p  {
    
    max-width: 150px;
    
    margin: 0 auto;
    
    color: #1f2937;
    
    font-size: 15px;
    
    line-height: 1.65;
    
    font-weight: 500;
}


.w4-builder-box  {
    
    padding: 34px 48px;
    
    border-radius: 18px;
    
    background: #f4f2ff;
}


.w4-builder-preview img  {
    
    width: 100%;
    
    display: block;
    
    filter: drop-shadow(0 16px 28px rgba(35, 55, 115, 0.12));
}


.w4-builder-content  {
    
    position: relative;
    
    padding-left: 30px;
}


.w4-builder-content h3  {
    
    margin: 0 0 28px;
    
    color: #08091f;
    
    font-size: 29px;
    
    font-weight: 700;
}


.w4-builder-content h3 span  {
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-builder-content ul  {
    
    list-style: none;
    
    padding: 0;
    
    margin: 0;
}


.w4-builder-content li  {
    
    margin-bottom: 18px;
    
    color: #111827;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-builder-content li i  {
    
    color: #6f35ff;
    
    margin-right: 14px;
    
    font-size: 18px;
}


.w4-dot-pattern  {
    
    position: absolute;
    
    right: 10px;
    
    bottom: 20px;
    
    width: 58px;
    
    height: 58px;
    
    opacity: .35;
    
    background-image: radial-gradient(#8b5cff 2px, transparent 2px);
    
    background-size: 13px 13px;
}


.w4-ready-cta  {
    
    min-height: 160px;
    
    margin-top: 24px;
    
    padding: 26px 48px;
    
    border-radius: 16px;
    
    background: linear-gradient(100deg, #ed149d 0%, #7d35ff 48%, #086bff 100%);
    
    display: flex;
    
    align-items: center;
    
    gap: 42px;
}


.w4-ready-rocket  {
    
    width: 170px;
    
    height: 112px;
    
    flex: 0 0 170px;
    
    position: relative;
    
    color: #ffffff;
    
    font-size: 88px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-ready-rocket::before  {
    
    content: "";
    
    position: absolute;
    
    width: 125px;
    
    height: 40px;
    
    left: 10px;
    
    bottom: 0;
    
    border-radius: 50px 50px 8px 8px;
    
    background: rgba(255, 255, 255, 0.35);
}


.w4-ready-rocket i  {
    
    position: relative;
    
    z-index: 2;
    
    transform: rotate(42deg);
}


.w4-ready-text  {
    
    flex: 1;
}


.w4-ready-text h3  {
    
    margin: 0 0 8px;
    
    color: #ffffff;
    
    font-size: 27px;
    
    font-weight: 600;
}


.w4-ready-text p  {
    
    max-width: 430px;
    
    margin: 0;
    
    color: #ffffff;
    
    font-size: 15px;
    
    line-height: 1.6;
}


.w4-ready-buttons  {
    
    display: flex;
    
    gap: 22px;
}


.w4-ready-primary,
.w4-ready-outline  {
    
    min-width: 210px;
    
    height: 54px;
    
    border-radius: 8px;
    
    text-decoration: none;
    
    font-size: 14px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-ready-primary  {
    
    color: #1765ff;
    
    background: #ffffff;
}


.w4-ready-outline  {
    
    color: #ffffff;
    
    border: 1.5px solid rgba(255, 255, 255, 0.75);
}


.w4-ready-primary:hover  {
    
    color: #1765ff;
    
    transform: translateY(-2px);
}


.w4-ready-outline:hover  {
    
    color: #ed149d;
    
    background: #ffffff;
}


@media (max-width:1199px)  {
    
    .w4-easy-features  {
        
        grid-template-columns: repeat(3, 1fr);
        
        gap: 24px 0;
    }
    

    .w4-easy-feature:nth-child(3)  {
        
        border-right: 0;
    }
    

    .w4-ready-cta  {
        
        gap: 24px;
    }
    

    .w4-ready-primary,
    .w4-ready-outline  {
        
        min-width: 170px;
    }
}


@media (max-width:991px)  {
    
    .w4-easy-container  {
        
        padding: 20px 24px 34px;
    }
    

    .w4-builder-content  {
        
        padding-left: 0;
        
        text-align: center;
    }
    

    .w4-builder-content li  {
        
        text-align: left;
    }
    

    .w4-ready-cta  {
        
        flex-direction: column;
        
        text-align: center;
    }
    

    .w4-ready-text p  {
        
        margin: 0 auto;
    }
}


@media (max-width:767px)  {
    
    .w4-easy-features  {
        
        grid-template-columns: repeat(2, 1fr);
    }
    

    .w4-easy-feature  {
        
        border-right: 0;
    }
    

    .w4-builder-box  {
        
        padding: 26px 20px;
    }
    

    .w4-ready-buttons  {
        
        width: 100%;
        
        flex-direction: column;
    }
    

    .w4-ready-primary,
    .w4-ready-outline  {
        
        width: 100%;
    }
}


@media (max-width:575px)  {
    
    .w4-easy-container  {
        
        padding: 18px 16px 30px;
    }
    

    .w4-easy-title  {
        
        font-size: 21px;
    }
    

    .w4-easy-features  {
        
        grid-template-columns: 1fr;
    }
    

    .w4-easy-feature  {
        
        min-height: auto;
        
        padding: 0 10px 18px;
    }
    

    .w4-builder-content h3  {
        
        font-size: 23px;
    }
    

    .w4-builder-content li  {
        
        font-size: 13px;
    }
    

    .w4-ready-cta  {
        
        padding: 24px 18px;
    }
    

    .w4-ready-rocket  {
        
        width: 130px;
        
        height: 95px;
        
        flex-basis: 95px;
        
        font-size: 70px;
    }
    

    .w4-ready-text h3  {
        
        font-size: 23px;
    }
}


.w4-faq-section  {
    
    position: relative;
    
    background: #fff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-faq-container  {
    
    position: relative;
    
    padding: 1px 80px 3px;
}


.w4-faq-badge  {
    
    width: fit-content;
    
    margin: 0 auto 16px;
    
    padding: 6px 15px;
    
    border: 1.5px solid #9b64ff;
    
    border-radius: 30px;
    
    color: #7c35ff;
    
    font-size: 12px;
    
    font-weight: 900;
}


.w4-faq-title  {
    
    text-align: center;
    
    color: #08091f;
    
    font-size: 45px;
    
    font-weight: 600;
    
    margin: 0;
}


.w4-faq-title span  {
    
    background: linear-gradient(90deg, #ec149d, #1765ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-faq-subtitle  {
    
    text-align: center;
    
    color: #182033;
    
    font-size: 17px;
    
    line-height: 1.7;
    
    margin: 16px 0 28px;
}


.w4-faq-subtitle a  {
    
    color: #ec149d;
    
    font-weight: 700;
    
    text-decoration: none;
}


.w4-search-box  {
    
    max-width: 620px;
    
    height: 56px;
    
    margin: 0 auto 40px;
    
    padding: 0 22px;
    
    border: 1.5px solid #8f8cff;
    
    border-radius: 8px;
    
    display: flex;
    
    align-items: center;
    
    gap: 14px;
}


.w4-search-box i  {
    
    color: #7b35ff;
    
    font-size: 18px;
}


.w4-search-box input  {
    
    width: 100%;
    
    border: 0;
    
    outline: 0;
    
    font-size: 14px;
}


.w4-faq-sidebar  {
    
    padding: 10px;
    
    border: 1px solid #edf0f8;
    
    border-radius: 14px;
    
    background: #fff;
    
    box-shadow: 0 15px 35px rgba(30, 50, 100, 0.08);
}


.w4-faq-sidebar a  {
    
    text-decoration: none;
}


.w4-faq-sidebar button  {
    
    width: 100%;
    
    height: 56px;
    
    border: 0;
    
    border-radius: 9px;
    
    background: transparent;
    
    color: #26324a;
    
    font-size: 13px;
    
    font-weight: 700;
    
    display: flex;
    
    align-items: center;
    
    gap: 13px;
    
    padding: 0 14px;
}


.w4-faq-sidebar button i  {
    
    color: #7b35ff;
    
    font-size: 18px;
}


.w4-faq-sidebar button span  {
    
    margin-left: auto;
    
    width: 24px;
    
    height: 24px;
    
    border-radius: 50%;
    
    background: #f1f3fa;
    
    color: #7b35ff;
    
    font-size: 11px;
    
    display: grid;
    
    place-items: center;
}


.w4-faq-sidebar button.active  {
    
    color: #ec149d;
    
    border: 1px solid #ff86cf;
    
    background: #fff3fa;
}


.w4-faq-sidebar button:hover  {
    
    border-color: #ff4fc1;
    
    background: #fdf3f8;
    
    color: #ff1493;
    
    transform: translateY(-2px);
}


.w4-help-card  {
    
    margin-top: 28px;
    
    padding: 32px 24px 28px;
    
    border-radius: 14px;
    
    background: linear-gradient(135deg, #fff1fb, #f7efff);
}


.w4-help-icon  {
    
    text-align: center;
    
    color: #8b35ff;
    
    font-size: 65px;
    
    margin-bottom: 18px;
}


.w4-help-card h5  {
    
    color: #111827;
    
    font-size: 18px;
    
    font-weight: 700;
}


.w4-help-card p  {
    
    color: #344054;
    
    font-size: 13px;
    
    line-height: 1.6;
}


.w4-help-card a  {
    
    height: 48px;
    
    border-radius: 7px;
    
    color: #fff;
    
    text-decoration: none;
    
    background: linear-gradient(90deg, #ec149d, #1765ff);
    
    font-size: 13px;
    
    font-weight: 700;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    gap: 10px;
}


.w4-faq-accordion  {
    
    padding: 18px;
    
    border: 1px solid #edf0f8;
    
    border-radius: 16px;
    
    background: #fff;
    
    box-shadow: 0 15px 35px rgba(30, 50, 100, 0.08);
    
    height: 100%;
}


@media (max-width:991px)  {
    
    .w4-faq-accordion  {
        
        margin-bottom: 20px;
    }
}


.w4-faq-accordion .accordion-item  {
    
    margin-bottom: 12px;
    
    border: 1px solid #edf0f8;
    
    border-radius: 10px;
    
    overflow: hidden;
}


.w4-faq-accordion .accordion-button  {
    
    min-height: 58px;
    
    background: #fff;
    
    color: #111827;
    
    font-size: 14px;
    
    font-weight: 600;
    
    box-shadow: none;
    
    gap: 14px;
}


.w4-faq-accordion .accordion-button span  {
    
    color: #7b35ff;
    
    font-weight: 900;
}


.w4-faq-accordion .accordion-button::after  {
    
    background-image: none;
    
    content: "+";
    
    color: #111827;
    
    font-size: 24px;
    
    transform: none;
}


.w4-faq-accordion .accordion-button:not(.collapsed)::after  {
    
    content: "−";
    
    color: #ec149d;
}


.w4-faq-accordion .accordion-body  {
    
    padding: 15px 25px 15px;
    
    color: #26324a;
    
    font-size: 14px;
    
    line-height: 1.8;
}


@media (max-width:1199px)  {
    
    .w4-faq-container  {
        
        padding-left: 48px;
        
        padding-right: 48px;
    }
}


@media (max-width:991px)  {
    
    .w4-faq-container  {
        
        padding-left: 24px;
        
        padding-right: 24px;
    }
    

    .w4-faq-title  {
        
        font-size: 36px;
    }
    

    .w4-help-card  {
        
        display: none;
    }
}


@media (max-width:767px)  {
    
    .w4-faq-title  {
        
        font-size: 30px;
    }
    

    .w4-search-box  {
        
        height: 52px;
    }
    

    .w4-faq-accordion  {
        
        padding: 12px;
    }
    

    .w4-faq-accordion .accordion-body  {
        
        padding: 0 20px 20px 48px;
    }
}


@media (max-width:575px)  {
    
    .w4-faq-container  {
        
        padding: 24px 16px 40px;
    }
    

    .w4-faq-title  {
        
        font-size: 26px;
    }
    

    .w4-faq-subtitle  {
        
        font-size: 13px;
    }
    

    .w4-faq-sidebar button,
    .w4-faq-accordion .accordion-button  {
        
        font-size: 12px;
    }
    

    .w4-faq-accordion .accordion-body  {
        
        font-size: 12px;
        
        padding-left: 20px;
    }
}


.w4-still-question-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    padding: 28px 12px;
}


.w4-still-question-box  {
    
    min-height: 160px;
    
    padding: 28px 35px;
    
    border-radius: 14px;
    
    background: linear-gradient(90deg, #fff4fb 0%, #fbf5ff 50%, #fff4fb 100%);
    
    display: grid;
    
    grid-template-columns: 180px 1fr auto;
    
    align-items: center;
    
    gap: 30px;
    
    position: relative;
    
    overflow: hidden;
    
    text-align: center;
    
    justify-items: center;
}


.w4-still-question-box::before,
.w4-still-question-box::after  {
    
    content: "";
    
    position: absolute;
    
    width: 58px;
    
    height: 58px;
    
    opacity: 0.35;
    
    background-image: radial-gradient(#7b35ff 2px, transparent 2px);
    
    background-size: 14px 14px;
}


.w4-still-question-box::before  {
    
    left: 28px;
    
    top: 45px;
}


.w4-still-question-box::after  {
    
    right: 48px;
    
    top: 50px;
}


.w4-question-graphic  {
    
    position: relative;
    
    width: 180px;
    
    height: 105px;
}


.bubble  {
    
    position: absolute;
    
    color: #ffffff;
    
    font-weight: 900;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.bubble-one  {
    
    width: 105px;
    
    height: 86px;
    
    right: 35px;
    
    top: 0;
    
    border-radius: 32px 32px 32px 8px;
    
    background: linear-gradient(135deg, #8f42ff, #1765ff);
    
    font-size: 54px;
    
    box-shadow: 0 14px 26px rgba(123, 53, 255, 0.25);
}


.bubble-two  {
    
    width: 76px;
    
    height: 54px;
    
    right: 0;
    
    bottom: 0;
    
    border-radius: 22px 22px 8px 22px;
    
    background: linear-gradient(135deg, #ff49bf, #ed149d);
    
    font-size: 25px;
    
    letter-spacing: 3px;
    
    box-shadow: 0 12px 24px rgba(237, 20, 157, 0.2);
}


.w4-question-content h3  {
    
    margin: 0 0 8px;
    
    color: #08091f;
    
    font-size: 26px;
    
    font-weight: 700;
}


.w4-question-content h3 span  {
    
    background: linear-gradient(90deg, #ed149d, #7b35ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-question-content p  {
    
    margin: 0;
    
    color: #26324a;
    
    font-size: 16px;
    
    line-height: 1.6;
    
    font-weight: 500;
    
    margin-bottom: 6px;
}


.w4-question-actions  {
    
    display: flex;
    
    align-items: center;
    
    gap: 14px;
    
    flex-wrap: wrap;
}


.support-btn,
.build-btn  {
    
    margin: 0;
    
    min-width: 170px;
    
    height: 46px;
    
    border-radius: 7px;
    
    text-decoration: none;
    
    font-size: 14px;
    
    font-weight: 700;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
    
    gap: 10px;
    
    transition: 0.3s ease;
}


.support-btn  {
    
    color: #ffffff;
    
    background: linear-gradient(90deg, #ed149d, #1765ff);
}


.build-btn  {
    
    color: #1765ff;
    
    border: 1.5px solid #7b74ff;
    
    background: #ffffff;
}


.support-btn:hover  {
    
    color: #ffffff;
    
    transform: translateY(-2px);
}


.build-btn:hover  {
    
    color: #ffffff;
    
    background: #1765ff;
}


@media (max-width:991px)  {
    
    .w4-still-question-box  {
        
        grid-template-columns: 1fr;
        
        text-align: center;
        
        padding: 35px 25px;
        
        gap: 22px;
    }
    

    .w4-question-graphic  {
        
        margin: 0 auto;
    }
    

    .w4-question-content h3  {
        
        font-size: 24px;
    }
    

    .w4-question-content p  {
        
        max-width: 600px;
        
        margin: 0 auto;
    }
    

    .w4-question-actions  {
        
        justify-content: center;
    }
}


@media (max-width:575px)  {
    
    .w4-still-question-section  {
        
        padding: 20px 12px;
    }
    

    .w4-still-question-box  {
        
        padding: 30px 18px;
        
        border-radius: 12px;
    }
    

    .w4-question-graphic  {
        
        width: 170px;
        
        height: 100px;
    }
    

    .bubble-one  {
        
        width: 88px;
        
        height: 72px;
        
        right: 50px;
        
        font-size: 42px;
    }
    

    .bubble-two  {
        
        width: 66px;
        
        height: 46px;
        
        right: 5px;
        
        font-size: 20px;
    }
    

    .w4-question-content h3  {
        
        font-size: 22px;
        
        line-height: 1.3;
    }
    

    .w4-question-content p  {
        
        font-size: 13px;
    }
    

    .w4-question-actions  {
        
        width: 100%;
        
        flex-direction: column;
        
        gap: 12px;
    }
    

    .support-btn,
    .build-btn  {
        
        width: 100%;
        
        min-width: 100%;
    }
}


.w4-portfolio-section  {
    
    background: #fff;
    
    font-family: Arial, Helvetica, sans-serif;
}


.w4-portfolio-container  {
    
    padding: 26px 76px 46px;
}


.w4-port-badge  {
    
    width: fit-content;
    
    padding: 6px 15px;
    
    border: 1.5px solid #d02cff;
    
    border-radius: 30px;
    
    color: #b000ff;
    
    font-size: 12px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.w4-port-badge i  {
    
    color: #ed149d;
    
    margin-right: 5px;
}


.w4-portfolio-hero h1  {
    
    margin: 28px 0 18px;
    
    color: #08091f;
    
    font-size: 45px;
    
    line-height: 1.16;
    
    font-weight: 600;
}


.w4-portfolio-hero h1 span  {
    
    background: linear-gradient(90deg, #ed149d, #1765ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-portfolio-hero p  {
    
    max-width: 560px;
    
    color: #273044;
    
    font-size: 17.5px;
    
    line-height: 1.8;
}


.w4-port-stats  {
    
    display: flex;
    
    gap: 21px;
    
    margin-top: 28px;
    
    flex-wrap: nowrap;
}


.w4-port-stat  {
    
    display: flex;
    
    align-items: center;
    
    gap: 12px;
}


.w4-port-stat i  {
    
    width: 42px;
    
    height: 42px;
    
    border-radius: 50%;
    
    background: #f0efff;
    
    color: #6b35ff;
    
    display: grid;
    
    place-items: center;
    
    font-size: 20px;
}


.w4-port-stat h5  {
    
    margin: 0;
    
    font-size: 18px;
    
    font-weight: 600;
}


.w4-port-stat span  {
    
    font-size: 14px;
    
    color: #374151;
}


.w4-port-device  {
    
    position: relative;
    
    text-align: center;
}


.w4-port-circle  {
    
    position: absolute;
    
    width: 390px;
    
    height: 260px;
    
    right: 80px;
    
    top: 20px;
    
    border-radius: 50%;
    
    background: #fde8fb;
}


.w4-port-device img  {
    
    position: relative;
    
    z-index: 2;
    
    width: 656px;
    
    max-width: 100%;
}


.w4-port-tabs  {
    
    margin: 31px 0 30px;
    
    padding: 12px;
    
    border: 1px solid #dfe5f0;
    
    border-radius: 12px;
    
    list-style: none;
    
    display: flex;
    
    gap: 10px;
    
    overflow-x: auto;
}


.w4-port-tabs li  {
    
    flex: 0 0 auto;
}


.w4-port-tabs button  {
    
    height: 42px;
    
    padding: 0 16px;
    
    border: none;
    
    border-radius: 7px;
    
    background: transparent;
    
    color: #26324a;
    
    font-size: 13px;
    
    font-weight: 700;
}


.w4-port-tabs button i  {
    
    color: #7b35ff;
    
    margin-right: 6px;
}


.w4-port-tabs button.active,
.w4-port-tabs button:hover  {
    
    color: #fff;
    
    background: linear-gradient(90deg, #ed149d, #1765ff);
}


.w4-port-tabs button.active i,
.w4-port-tabs button:hover i  {
    
    color: #fff;
}


.w4-portfolio-grid  {
    
    display: grid;
    
    grid-template-columns: repeat(4, 1fr);
    
    gap: 26px;
}


.w4-port-card  {
    
    border: 1px solid #dfe5f0;
    
    border-radius: 12px;
    
    background: #fff;
    
    overflow: hidden;
    
    box-shadow: 0 12px 30px rgba(30, 50, 100, 0.08);
}


.w4-port-card img  {
    
    width: 100%;
    
    height: 170px;
    
    padding: 10px;
    
    object-fit: cover;
    
    border-radius: 16px;
}


.w4-port-body  {
    
    padding: 10px 18px 20px;
}


.w4-port-body span  {
    
    color: #667085;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-port-body h4  {
    
    margin: 8px 0 10px;
    
    color: #08091f;
    
    font-size: 17px;
    
    font-weight: 600;
}


.w4-port-body p  {
    
    min-height: 46px;
    
    margin: 0 0 18px;
    
    color: #344054;
    
    font-size: 15px;
    
    line-height: 1.6;
}


.w4-card-buttons  {
    
    display: grid;
    
    grid-template-columns: 1fr 1fr;
    
    gap: 12px;
}


.w4-card-buttons a  {
    
    height: 42px;
    
    border-radius: 6px;
    
    text-decoration: none;
    
    font-size: 13px;
    
    font-weight: 700;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.preview  {
    
    color: #1765ff;
    
    border: 1.5px solid #1765ff;
}


.details  {
    
    color: #fff;
    
    background: linear-gradient(90deg, #ed149d, #1765ff);
}


@media (max-width:1199px)  {
    
    .w4-portfolio-container  {
        
        padding-left: 48px;
        
        padding-right: 48px;
    }
    

    .w4-portfolio-grid  {
        
        grid-template-columns: repeat(3, 1fr);
    }
    

    .w4-portfolio-hero h1  {
        
        font-size: 42px;
    }
}


@media (max-width:991px)  {
    
    .w4-portfolio-container  {
        
        padding-left: 24px;
        
        padding-right: 24px;
    }
    

    .w4-portfolio-hero  {
        
        text-align: center;
    }
    

    .w4-port-badge,
    .w4-portfolio-hero p  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-port-stats  {
        
        justify-content: center;
    }
    

    .w4-port-device  {
        
        margin-top: 30px;
    }
    

    .w4-portfolio-grid  {
        
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width:767px)  {
    
    .w4-portfolio-hero h1  {
        
        font-size: 34px;
    }
    

    .w4-port-device img  {
        
        width: 420px;
    }
    

    .w4-port-circle  {
        
        width: 300px;
        
        height: 210px;
        
        right: 50%;
        
        transform: translateX(50%);
    }
}


@media (max-width:575px)  {
    
    .w4-portfolio-container  {
        
        padding: 24px 16px 36px;
    }
    

    .w4-portfolio-hero h1  {
        
        font-size: 29px;
    }
    

    .w4-portfolio-grid  {
        
        grid-template-columns: 1fr;
    }
    

    .w4-port-card img  {
        
        height: 190px;
    }
    

    .w4-card-buttons  {
        
        grid-template-columns: 1fr;
    }
}


.w4-ready-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    padding: 22px 42px;
}


.w4-ready-box  {
    
    min-height: 200px;
    
    padding: 2px 0px;
    
    border-radius: 18px;
    
    background: linear-gradient(90deg, #f5f6ff 0%, #ffffff 48%, #f7f0ff 100%);
    
    display: grid;
    
    grid-template-columns: 1.4fr 0.9fr 220px;
    
    align-items: center;
    
    gap: 40px;
    
    overflow: hidden;
}


.w4-stats-area  {
    
    display: grid;
    
    grid-template-columns: repeat(4, 1fr);
    
    gap: 0px;
}


.w4-stat-item  {
    
    position: relative;
    
    text-align: center;
}


.w4-stat-item:not(:last-child)::after  {
    
    content: "";
    
    position: absolute;
    
    right: -14px;
    
    top: 4px;
    
    height: 48px;
    
    border-right: 2px dotted #cfc9ff;
}


.w4-stat-icon  {
    
    height: 50px;
    
    color: #302cff;
    
    font-size: 44px;
    
    margin-bottom: 12px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-stat-item h3  {
    
    margin: 0px 0px 11px 0px;
    
    color: #08091f;
    
    font-size: 20px;
    
    font-weight: 600;
}


.w4-stat-item p  {
    
    margin: 8px 0 16px;
    
    color: #253047;
    
    font-size: 16px;
    
    font-weight: 500;
}


.w4-ready-content h2  {
    
    margin: 0px -30px 0px -5px;
    
    color: #08091f;
    
    font-size: 25px;
    
    font-weight: 600;
}


.w4-ready-content p  {
    
    margin: 0 -2px 13px;
    
    max-width: 450px;
    
    color: #1f2937;
    
    font-size: 16px;
    
    line-height: 1.7;
}


.w4-ready-btn  {
    
    width: fit-content;
    
    min-width: 245px;
    
    height: 58px;
    
    padding: 0 18px 0 38px;
    
    border-radius: 8px;
    
    color: #ffffff;
    
    text-decoration: none;
    
    background: linear-gradient(90deg, #ed149d, #1765ff);
    
    font-size: 16px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: space-between;
    
    gap: 16px;
}


.w4-ready-btn span  {
    
    width: 26px;
    
    height: 26px;
    
    border-radius: 50%;
    
    background: #ffffff;
    
    color: #1765ff;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-ready-btn:hover  {
    
    color: #ffffff;
    
    transform: translateY(-2px);
}


.w4-rocket-wrap  {
    
    position: relative;
    
    height: 150px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-rocket-wrap::before  {
    
    content: "";
    
    position: absolute;
    
    width: 145px;
    
    height: 38px;
    
    bottom: 6px;
    
    border-radius: 50%;
    
    background: #ddd9ff;
}


.w4-rocket-wrap i  {
    
    position: relative;
    
    z-index: 2;
    
    color: #7b35ff;
    
    font-size: 115px;
    
    transform: rotate(42deg);
    
    filter: drop-shadow(0 12px 12px rgba(123, 53, 255, 0.18));
}


@media (max-width:1199px)  {
    
    .w4-ready-box  {
        
        grid-template-columns: 1fr;
        
        text-align: center;
    }
    

    .w4-ready-content p  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-ready-btn  {
        
        margin: 0 auto;
    }
}


@media (max-width:767px)  {
    
    .w4-ready-section  {
        
        padding: 24px 18px;
    }
    

    .w4-ready-box  {
        
        padding: 30px 22px;
    }
    

    .w4-stats-area  {
        
        grid-template-columns: repeat(2, 1fr);
        
        gap: 28px 18px;
    }
    

    .w4-stat-item::after  {
        
        display: none;
    }
    

    .w4-ready-content h2  {
        
        font-size: 25px;
    }
    

    .w4-ready-content p  {
        
        font-size: 14px;
    }
}


@media (max-width:575px)  {
    
    .w4-stats-area  {
        
        grid-template-columns: 1fr;
    }
    

    .w4-ready-btn  {
        
        width: 100%;
        
        min-width: auto;
    }
    

    .w4-rocket-wrap i  {
        
        font-size: 90px;
    }
}


.w4-testimonial-section  {
    
    padding: 80px 0;
    
    background: #f8fbff;
}


.w4-section-title  {
    
    text-align: center;
    
    font-size: 30px;
    
    font-weight: 600;
    
    color: #000000;
    
    margin-bottom: 11px;
}


.w4-review-card  {
    
    height: 100%;
    
    min-height: 240px;
    
    padding: 28px;
    
    border-radius: 18px;
    
    background: #ffffff;
    
    border: 1px solid #e4e9f5;
    
    box-shadow: 0 14px 35px rgba(20, 40, 90, 0.08);
}


.w4-stars  {
    
    color: #ffb400;
    
    font-size: 18px;
    
    letter-spacing: 2px;
}


.w4-review-card p  {
    
    color: #4b5563;
    
    font-size: 16px;
    
    line-height: 1.7;
    
    margin-bottom: 22px;
}


.w4-user  {
    
    display: flex;
    
    align-items: center;
    
    gap: 12px;
}


.w4-user img  {
    
    width: 52px;
    
    height: 52px;
    
    border-radius: 50%;
    
    object-fit: cover;
    
    background: #dbe7ff;
}


.w4-user h6  {
    
    margin: 0;
    
    font-size: 16px;
    
    font-weight: 700;
    
    color: #071b4d;
}


.w4-user span  {
    
    font-size: 14px;
    
    color: #6b7280;
}


@media (max-width:991px)  {
    
    .w4-section-title  {
        
        font-size: 32px;
    }
}


@media (max-width:575px)  {
    
    .w4-testimonial-section  {
        
        padding: 55px 0;
    }
    

    .w4-section-title  {
        
        font-size: 26px;
        
        margin-bottom: 30px;
    }
    

    .w4-review-card  {
        
        padding: 22px;
    }
}


.w4-client-review-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-client-container  {
    
    padding: 1px 76px 42px;
}


.w4-client-title  {
    
    margin: 0;
    
    color: #08091f;
    
    font-size: 36px;
    
    font-weight: 600;
}


.w4-client-subtitle  {
    
    margin: 12px 0 26px;
    
    color: #344054;
    
    font-size: 17px;
    
    font-weight: 500;
}


.w4-review-tabs  {
    
    display: flex;
    
    justify-content: center;
    
    gap: 12px;
    
    list-style: none;
    
    padding: 0 0 12px;
    
    margin: 0 0 22px;
    
    overflow-x: auto;
}


.w4-review-tabs li  {
    
    flex: 0 0 auto;
}


.w4-review-tabs button  {
    
    height: 42px;
    
    padding: 0 18px;
    
    border: 1px solid #e0e5f2;
    
    border-radius: 7px;
    
    background: #ffffff;
    
    color: #111827;
    
    font-size: 13px;
    
    font-weight: 600;
    
    display: flex;
    
    align-items: center;
    
    gap: 8px;
}


.w4-review-tabs a  {
    
    text-decoration: none;
}


.w4-review-tabs button.active,
.w4-review-tabs button:hover  {
    
    color: #ffffff;
    
    border-color: transparent;
    
    background: linear-gradient(135deg, #ed149d, #125dff);
}


.w4-review-tabs button i  {
    
    color: #8b35ff;
}


.w4-review-tabs button.active  {
    
    color: #ffffff;
    
    border-color: transparent;
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
}


.w4-review-tabs button.active i  {
    
    color: #ffffff;
}


.w4-review-grid  {
    
    display: grid;
    
    grid-template-columns: repeat(3, 1fr);
    
    gap: 28px;
}


.w4-client-card  {
    
    min-height: 300px;
    
    padding: 30px 33px 26px;
    
    border: 1px solid #e5e9f3;
    
    border-radius: 14px;
    
    background: #ffffff;
    
    box-shadow: 0 14px 34px rgba(30, 50, 100, 0.07);
}


.pink-card  {
    
    border-color: #ffd2ed;
}


.purple-card  {
    
    border-color: #ddd5ff;
}


.blue-card  {
    
    border-color: #d5e3ff;
}


.green-card  {
    
    border-color: #cdeee8;
}


.orange-card  {
    
    border-color: #ffe2bd;
}


.w4-card-top  {
    
    display: flex;
    
    align-items: center;
    
    gap: 28px;
    
    margin-bottom: 26px;
}


.w4-quote  {
    
    width: 54px;
    
    height: 54px;
    
    border-radius: 8px;
    
    font-size: 36px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-quote.pink  {
    
    color: #ed149d;
    
    background: #ffe8f5;
}


.w4-quote.purple  {
    
    color: #7b35ff;
    
    background: #f0eaff;
}


.w4-quote.blue  {
    
    color: #1765ff;
    
    background: #e9f0ff;
}


.w4-quote.green  {
    
    color: #12b886;
    
    background: #e3fff6;
}


.w4-quote.orange  {
    
    color: #ff9f1c;
    
    background: #fff1dd;
}


.w4-stars  {
    
    color: #ffc107;
    
    font-size: 18px;
    
    letter-spacing: 2px;
}


.w4-client-card p  {
    
    min-height: 84px;
    
    margin: 0 0 38px;
    
    color: #101828;
    
    font-size: 16px;
    
    line-height: 1.75;
}


.w4-card-bottom  {
    
    display: flex;
    
    align-items: center;
    
    justify-content: space-between;
}


.w4-user  {
    
    display: flex;
    
    align-items: center;
    
    gap: 13px;
}


.w4-user img  {
    
    width: 48px;
    
    height: 48px;
    
    border-radius: 50%;
    
    object-fit: cover;
}


.w4-user h6  {
    
    margin: 0;
    
    color: #08091f;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-user span  {
    
    color: #667085;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-chat-icon  {
    
    width: 42px;
    
    height: 42px;
    
    border: 3px solid currentColor;
    
    border-radius: 50%;
    
    font-size: 20px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-chat-icon.pink  {
    
    color: #ed149d;
}


.w4-chat-icon.purple  {
    
    color: #7b35ff;
}


.w4-chat-icon.blue  {
    
    color: #1765ff;
}


.w4-chat-icon.green  {
    
    color: #12b886;
}


.w4-chat-icon.orange  {
    
    color: #ff9f1c;
}


@media (max-width:1399px)  {
    
    .w4-client-container  {
        
        padding-left: 54px;
        
        padding-right: 54px;
    }
}


@media (max-width:1199px)  {
    
    .w4-review-grid  {
        
        gap: 22px;
    }
    

    .w4-client-card  {
        
        padding: 26px 24px;
    }
}


@media (max-width:991px)  {
    
    .w4-client-container  {
        
        padding-left: 24px;
        
        padding-right: 24px;
    }
    

    .w4-review-tabs  {
        
        justify-content: flex-start;
    }
    

    .w4-review-grid  {
        
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width:767px)  {
    
    .w4-client-title  {
        
        font-size: 28px;
    }
    

    .w4-review-grid  {
        
        grid-template-columns: 1fr;
    }
    

    .w4-client-card p  {
        
        min-height: auto;
    }
}


@media (max-width:575px)  {
    
    .w4-client-container  {
        
        padding: 24px 16px 34px;
    }
    

    .w4-client-title  {
        
        font-size: 25px;
    }
    

    .w4-client-subtitle  {
        
        font-size: 13px;
    }
    

    .w4-review-tabs button  {
        
        height: 38px;
        
        font-size: 12px;
        
        padding: 0 14px;
    }
    

    .w4-client-card  {
        
        padding: 22px 18px;
    }
    

    .w4-card-top  {
        
        gap: 18px;
    }
}


.w4-video-testimonial-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-video-container  {
    
    padding: 28px 76px 36px;
}


.w4-video-banner  {
    
    position: relative;
    
    min-height: 215px;
    
    padding: 28px 146px;
    
    border-radius: 14px;
    
    background: linear-gradient(90deg, #f4f1ff 0%, #ffffff 52%, #f4f1ff 100%);
    
    display: flex;
    
    align-items: center;
    
    gap: 60px;
    
    overflow: hidden;
}


.w4-dots  {
    
    position: absolute;
    
    width: 70px;
    
    height: 70px;
    
    opacity: 0.35;
    
    background-image: radial-gradient(#8b6cff 2px, transparent 2px);
    
    background-size: 15px 15px;
}


.left-dots  {
    
    left: 28px;
    
    top: 72px;
}


.right-dots  {
    
    right: 34px;
    
    top: 72px;
}


.w4-video-collage  {
    
    position: relative;
    
    width: 385px;
    
    height: 160px;
    
    flex: 0 0 385px;
}


.w4-video-collage .img  {
    
    position: absolute;
    
    border-radius: 6px;
    
    object-fit: cover;
}


.img-1  {
    
    width: 360px;
    
    height: 186px;
    
    left: 39px;
    
    top: -13px;
}


.img-2  {
    
    width: 118px;
    
    height: 92px;
    
    left: 100px;
    
    top: 0;
}


.img-3  {
    
    width: 82px;
    
    height: 70px;
    
    left: 220px;
    
    top: 12px;
}


.img-4  {
    
    width: 120px;
    
    height: 86px;
    
    left: 118px;
    
    bottom: 0;
}


.img-5  {
    
    width: 78px;
    
    height: 64px;
    
    left: 246px;
    
    bottom: 18px;
}


.img-6  {
    
    width: 70px;
    
    height: 70px;
    
    left: 0;
    
    bottom: 18px;
}


.w4-play-btn  {
    
    position: absolute;
    
    left: 50%;
    
    top: 50%;
    
    width: 74px;
    
    height: 74px;
    
    border: none;
    
    border-radius: 50%;
    
    transform: translate(-50%, -50%);
    
    background: #ffffff;
    
    color: #7b35ff;
    
    font-size: 38px;
    
    box-shadow: 0 15px 35px rgba(80, 50, 150, 0.22);
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    z-index: 5;
}


.w4-video-content  {
    
    max-width: 560px;
    
    position: relative;
    
    z-index: 2;
}


.w4-video-content h2  {
    
    margin: 0 0 12px;
    
    color: #08091f;
    
    font-size: 34px;
    
    font-weight: 600;
}


.w4-video-content h2 span  {
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-video-content p  {
    
    margin: 0 0 18px;
    
    color: #344054;
    
    font-size: 14px;
    
    line-height: 1.65;
    
    font-weight: 500;
}


.w4-watch-btn  {
    
    width: fit-content;
    
    height: 42px;
    
    padding: 0 18px;
    
    border-radius: 6px;
    
    color: #ffffff;
    
    text-decoration: none;
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
    
    font-size: 13px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    gap: 10px;
}


.w4-watch-btn:hover  {
    
    color: #ffffff;
    
    transform: translateY(-2px);
}


.w4-story-box  {
    
    margin-top: 22px;
    
    min-height: 96px;
    
    padding: 22px 72px;
    
    border-radius: 14px;
    
    background: linear-gradient(90deg, #f5f2ff 0%, #ffffff 52%, #f5f2ff 100%);
    
    display: flex;
    
    align-items: center;
    
    gap: 24px;
}


.w4-story-icon  {
    
    width: 62px;
    
    height: 62px;
    
    flex: 0 0 62px;
    
    border-radius: 50%;
    
    background: linear-gradient(135deg, #ed149d, #7b35ff);
    
    color: #ffffff;
    
    font-size: 28px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-story-text  {
    
    flex: 1;
}


.w4-story-text h5  {
    
    margin: 0 0 7px;
    
    color: #08091f;
    
    font-size: 18px;
    
    font-weight: 600;
}


.w4-story-text p  {
    
    margin: 0;
    
    color: #344054;
    
    font-size: 17px;
    
    font-weight: 500;
}


.w4-story-btn  {
    
    min-width: 235px;
    
    height: 48px;
    
    border: 1.5px solid #9b35ff;
    
    border-radius: 7px;
    
    color: #7b35ff;
    
    text-decoration: none;
    
    background: #ffffff;
    
    font-size: 15px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
    
    gap: 12px;
}


.w4-story-btn:hover  {
    
    color: #ffffff;
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
}


@media (max-width:1199px)  {
    
    .w4-video-container  {
        
        padding-left: 48px;
        
        padding-right: 48px;
    }
    

    .w4-video-banner  {
        
        gap: 35px;
        
        padding: 28px 42px;
    }
}


@media (max-width:991px)  {
    
    .w4-video-container  {
        
        padding: 28px 24px 34px;
    }
    

    .w4-video-banner  {
        
        flex-direction: column;
        
        text-align: center;
    }
    

    .w4-video-collage  {
        
        width: 360px;
        
        flex-basis: auto;
    }
    

    .w4-story-box  {
        
        padding: 24px;
        
        flex-direction: column;
        
        text-align: center;
    }
    

    .w4-story-btn  {
        
        width: 100%;
    }
}


@media (max-width:575px)  {
    
    .w4-video-container  {
        
        padding: 24px 16px;
    }
    

    .w4-video-banner  {
        
        padding: 24px 18px;
    }
    

    .w4-video-collage  {
        
        width: 290px;
        
        height: 145px;
    }
    

    .img-2  {
        
        width: 95px;
        
        height: 78px;
    }
    

    .img-4  {
        
        width: 100px;
        
        height: 76px;
    }
    

    .img-3,
    .img-5  {
        
        display: none;
    }
    

    .w4-play-btn  {
        
        width: 62px;
        
        height: 62px;
        
        font-size: 32px;
    }
    

    .w4-video-content h2  {
        
        font-size: 25px;
    }
    

    .w4-video-content p  {
        
        font-size: 13px;
    }
    

    .w4-story-icon  {
        
        width: 54px;
        
        height: 54px;
        
        font-size: 24px;
    }
}


.w4-login-section  {
    
    min-height: 100vh;
    
    padding: 32px;
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
}


.w4-login-wrapper  {
    
    min-height: calc(100vh - 64px);
    
    border-radius: 18px;
    
    background: linear-gradient(120deg, #fbf7ff 0%, #fefafe 48%, #fdf8fe 100%);
    
    display: grid;
    
    grid-template-columns: 1.05fr 0.95fr;
    
    align-items: center;
    
    gap: 48px;
    
    padding: 0px 72px;
    
    overflow: hidden;
}


.w4-login-left  {
    
    position: relative;
}


.w4-dots  {
    
    width: 90px;
    
    height: 80px;
    
    margin-bottom: 38px;
    
    opacity: 0.25;
    
    background-image: radial-gradient(#7d5cff 2px, transparent 2px);
    
    background-size: 14px 14px;
}


.w4-login-left h2  {
    
    margin: 0;
    
    color: #0a0d24;
    
    font-size: 45px;
    
    font-weight: 600;
}


.w4-login-left h1  {
    
    margin: 8px 0 18px;
    
    color: #ed149d;
    
    font-size: 45px;
    
    font-weight: 600;
}


.w4-login-left h1 span  {
    
    color: #155cff;
}


.w4-login-left>p  {
    
    max-width: 520px;
    
    color: #32384a;
    
    font-size: 17.5px;
    
    line-height: 1.7;
}


.w4-device-box img  {
    
    width: 520px;
    
    max-width: 100%;
    
    display: block;
    
    margin: 28px 0 20px;
}


.w4-login-features  {
    
    display: grid;
    
    grid-template-columns: repeat(3, 1fr);
    
    gap: 34px;
    
    max-width: 560px;
}


.w4-login-feature  {
    
    text-align: center;
}


.feature-icon  {
    
    width: 48px;
    
    height: 48px;
    
    margin: 0 auto 14px;
    
    border-radius: 14px;
    
    background: #f1e8ff;
    
    color: #9d4dff;
    
    font-size: 23px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-login-feature h6  {
    
    margin: 0 0 9px;
    
    color: #0a0d24;
    
    font-size: 14px;
    
    font-weight: 600;
}


.w4-login-feature p  {
    
    margin: 0;
    
    color: #4b5563;
    
    font-size: 14px;
    
    line-height: 1.6;
}


.w4-login-right  {
    
    display: flex;
    
    justify-content: center;
}


.w4-login-card  {
    
    width: 100%;
    
    max-width: 500px;
    
    padding: 48px;
    
    border: 1px solid #e4e9f5;
    
    border-radius: 16px;
    
    background: #ffffff;
    
    box-shadow: 0 20px 50px rgba(30, 50, 100, 0.1);
}


.w4-login-card h3  {
    
    margin: 0 0 14px;
    
    color: #0a0d24;
    
    font-size: 30px;
    
    font-weight: 600;
}


.signup-text  {
    
    margin: 0 0 34px;
    
    color: #4b5563;
    
    font-size: 15px;
}


.signup-text a,
.w4-form-options a,
.terms-box a  {
    
    color: #155cff;
    
    font-weight: 600;
    
    text-decoration: none;
}


.form-group  {
    
    margin-bottom: 24px;
}


.form-group label  {
    
    margin-bottom: 10px;
    
    color: #111827;
    
    font-size: 15px;
    
    font-weight: 600;
}


.input-box  {
    
    height: 56px;
    
    border: 1px solid #d7deea;
    
    border-radius: 7px;
    
    display: flex;
    
    align-items: center;
    
    padding: 0 16px;
}


.input-box i  {
    
    color: #59657a;
    
    font-size: 18px;
}


.input-box input  {
    
    width: 100%;
    
    border: none;
    
    outline: none;
    
    padding: 0 14px;
    
    color: #111827;
    
    font-size: 13px;
}


.eye-icon  {
    
    cursor: pointer;
}


.w4-form-options  {
    
    display: flex;
    
    justify-content: space-between;
    
    align-items: center;
    
    margin-bottom: 30px;
    
    font-size: 15px;
}


.w4-form-options label  {
    
    display: flex;
    
    align-items: center;
    
    gap: 8px;
    
    color: #4b5563;
}


.w4-form-options input  {
    
    accent-color: #1765ff;
}


.w4-login-btn  {
    
    width: 100%;
    
    height: 56px;
    
    border: none;
    
    border-radius: 7px;
    
    color: #ffffff;
    
    background: linear-gradient(90deg, #ed149d, #155cff);
    
    font-size: 15px;
    
    font-weight: 600;
}


.divider  {
    
    position: relative;
    
    text-align: center;
    
    margin: 28px 0;
}


.divider::before  {
    
    content: "";
    
    position: absolute;
    
    left: 0;
    
    top: 50%;
    
    width: 100%;
    
    height: 1px;
    
    background: #e2e8f0;
}


.divider span  {
    
    position: relative;
    
    padding: 0 18px;
    
    background: #ffffff;
    
    color: #6b7280;
    
    font-size: 15px;
}


.social-login-grid  {
    
    display: grid;
    
    grid-template-columns: repeat(2, 1fr);
    
    gap: 14px;
}


.social-login-grid button,
.apple-btn  {
    
    height: 50px;
    
    border: 1px solid #d7deea;
    
    border-radius: 7px;
    
    background: #ffffff;
    
    color: #111827;
    
    font-size: 15px;
    
    font-weight: 600;
}


.social-login-grid button i,
.apple-btn i  {
    
    margin-right: 10px;
    
    font-size: 18px;
}


.social-login-grid .bi-google  {
    
    color: #4285f4;
}


.social-login-grid .bi-facebook  {
    
    color: #1877f2;
}


.apple-btn  {
    
    width: 100%;
    
    margin-top: 14px;
}


.terms-box  {
    
    display: flex;
    
    gap: 12px;
    
    margin-top: 34px;
    
    align-items: flex-start;
}


.terms-icon  {
    
    width: 38px;
    
    height: 38px;
    
    flex: 0 0 38px;
    
    border-radius: 12px;
    
    background: #f1e8ff;
    
    color: #8c4dff;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.terms-box p  {
    
    margin: 0;
    
    color: #4b5563;
    
    font-size: 14px;
    
    line-height: 1.6;
}


@media (max-width:1199px)  {
    
    .w4-login-wrapper  {
        
        padding: 36px;
        
        gap: 30px;
    }
    

    .w4-login-card  {
        
        padding: 36px;
    }
}


@media (max-width:991px)  {
    
    .w4-login-wrapper  {
        
        grid-template-columns: 1fr;
    }
    

    .w4-login-left  {
        
        text-align: center;
    }
    

    .w4-dots  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-login-left>p  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-device-box img  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-login-features  {
        
        margin: 0 auto;
    }
}


@media (max-width:767px)  {
    
    .w4-login-section  {
        
        padding: 16px;
    }
    

    .w4-login-wrapper  {
        
        padding: 28px 18px;
    }
    

    .w4-login-left h2,
    .w4-login-left h1  {
        
        font-size: 28px;
    }
    

    .w4-login-features  {
        
        grid-template-columns: 1fr;
        
        gap: 22px;
    }
    

    .w4-login-card  {
        
        padding: 28px 20px;
    }
    

    .social-login-grid  {
        
        grid-template-columns: 1fr;
    }
}


@media (max-width:575px)  {
    
    .w4-login-section  {
        
        padding: 0;
    }
    

    .w4-login-wrapper  {
        
        min-height: 100vh;
        
        border-radius: 0;
    }
    

    .w4-login-card h3  {
        
        font-size: 26px;
    }
    

    .w4-form-options  {
        
        flex-direction: column;
        
        gap: 12px;
        
        align-items: flex-start;
    }
}


.w4-signup-promo  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
}


.w4-signup-container  {
    
    padding: 18px 55px 32px;
}


.w4-signup-card  {
    
    display: grid;
    
    grid-template-columns: 230px 1fr 1fr;
    
    align-items: center;
    
    gap: 38px;
    
    min-height: 190px;
    
    padding: 28px 0px;
    
    border-radius: 12px;
    
    background: linear-gradient(100deg, #fbf6ff 0%, #ffffff 48%, #f4f2ff 100%);
}


.w4-rocket-img img  {
    
    width: 177px;
    
    max-width: 100%;
}


.w4-signup-content h2  {
    
    margin: 0 0 14px;
    
    color: #08091f;
    
    font-size: 30px;
    
    font-weight: 600;
}


.w4-signup-content p  {
    
    max-width: 470px;
    
    margin: 0 0 18px;
    
    color: #293244;
    
    font-size: 16px;
    
    line-height: 1.7;
    
    font-weight: 500;
}


.w4-create-btn  {
    
    width: fit-content;
    
    height: 44px;
    
    border-radius: 5px;
    
    color: #ffffff;
    
    text-decoration: none;
    
    background: linear-gradient(90deg, #ed149d, #1765ff);
    
    font-size: 13px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
    
    gap: 14px;
}


.w4-create-btn:hover  {
    
    color: #ffffff;
    
    transform: translateY(-1px);
}


.w4-create-account-btn  {
    
    width: fit-content;
    
    height: 47px;
    
    padding: 0 57px;
    
    border-radius: 5px;
    
    color: #ffffff;
    
    text-decoration: none;
    
    background: linear-gradient(90deg, #ed149d, #1765ff);
    
    font-size: 16px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    gap: 14px;
}


.w4-create-account-btn:hover  {
    
    color: #ffffff;
    
    transform: translateY(-1px);
}


.w4-signup-list  {
    
    list-style: none;
    
    margin: 0;
    
    padding: 0;
}


.w4-signup-list li  {
    
    display: flex;
    
    align-items: center;
    
    gap: 13px;
    
    margin-bottom: 18px;
    
    color: #111827;
    
    font-size: 14px;
    
    font-weight: 600;
}


.w4-signup-list li:last-child  {
    
    margin-bottom: 0;
}


.w4-signup-list i  {
    
    color: #5b35ff;
    
    font-size: 18px;
}


.w4-stats-row  {
    
    max-width: 1120px;
    
    margin: 36px 7px 0;
    
    display: grid;
    
    grid-template-columns: repeat(4, 1fr);
}


.w4-stat-box  {
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    gap: 18px;
    
    min-height: 72px;
    
    border-right: 1px solid #dfe5f0;
}


.w4-stat-box:last-child  {
    
    border-right: none;
}


.w4-stat-icon  {
    
    width: 54px;
    
    height: 54px;
    
    border-radius: 14px;
    
    background: #f1eaff;
    
    color: #673cff;
    
    font-size: 25px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-stat-icon.pink-icon  {
    
    background: #ffe8f5;
    
    color: #ed149d;
}


.w4-stat-box h4  {
    
    margin: 0 0 5px;
    
    color: #08091f;
    
    font-size: 23px;
    
    font-weight: 600;
}


.w4-stat-box p  {
    
    margin: 0;
    
    color: #344054;
    
    font-size: 15px;
    
    font-weight: 500;
}


@media (max-width:1199px)  {
    
    .w4-signup-card  {
        
        grid-template-columns: 180px 1fr 1fr;
        
        padding: 26px 36px;
        
        gap: 28px;
    }
}


@media (max-width:991px)  {
    
    .w4-signup-container  {
        
        padding: 18px 24px 32px;
    }
    

    .w4-signup-card  {
        
        grid-template-columns: 1fr;
        
        text-align: center;
    }
    

    .w4-rocket-img img  {
        
        margin: 0 auto;
    }
    

    .w4-signup-content p,
    .w4-create-btn  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-signup-list  {
        
        max-width: 430px;
        
        margin: 0 auto;
        
        text-align: left;
    }
    

    .w4-stats-row  {
        
        grid-template-columns: repeat(2, 1fr);
        
        gap: 22px 0;
    }
    

    .w4-stat-box:nth-child(2)  {
        
        border-right: none;
    }
}


@media (max-width:575px)  {
    
    .w4-signup-container  {
        
        padding: 16px;
    }
    

    .w4-signup-card  {
        
        padding: 26px 18px;
    }
    

    .w4-signup-content h2  {
        
        font-size: 25px;
    }
    

    .w4-signup-list li  {
        
        font-size: 13px;
    }
    

    .w4-stats-row  {
        
        grid-template-columns: 1fr;
        
        margin-top: 26px;
    }
    

    .w4-stat-box  {
        
        border-right: none;
        
        justify-content: flex-start;
        
        padding: 0 20px;
    }
}


.w4-contact-section  {
    
    background: #fff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-contact-container  {
    
    padding: 38px 76px 46px;
}


.w4-contact-badge  {
    
    width: fit-content;
    
    padding: 7px 16px;
    
    border: 1px solid #bba7ff;
    
    border-radius: 30px;
    
    color: #6b35ff;
    
    font-size: 12px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.w4-contact-badge i  {
    
    color: #ed149d;
    
    margin-right: 6px;
}


.w4-contact-hero h1  {
    
    margin: 26px 0 18px;
    
    color: #090b22;
    
    font-size: 45px;
    
    line-height: 1.12;
    
    font-weight: 600;
}


.w4-contact-hero h1 span  {
    
    background: linear-gradient(90deg, #ed149d, #1765ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-contact-hero p  {
    
    max-width: 640px;
    
    color: #344054;
    
    font-size: 17.5px;
    
    line-height: 1.8;
}


.w4-info-cards  {
    
    margin-top: 24px;
}


.w4-info-card  {
    
    min-height: 176px;
    
    padding: 22px 12px;
    
    border: 1px solid #e1e7f2;
    
    border-radius: 12px;
    
    background: #fff;
    
    text-align: center;
    
    box-shadow: 0 12px 30px rgba(30, 50, 100, 0.07);
}


.w4-info-icon  {
    
    width: 44px;
    
    height: 44px;
    
    margin: 0 auto 15px;
    
    border-radius: 50%;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    color: #fff;
}


.w4-info-icon.pink  {
    
    color: #db15d3;
    
    background: #f6e7f6;
}


.w4-info-icon.purple  {
    
    color: #6b08d4;
    
    background: #efedf5;
}


.w4-info-icon.blue  {
    
    color: #005be0;
    
    background: #e9f1ff;
}


.w4-info-icon.green  {
    
    color: #1ae60c;
    
    background: #e3f1ed;
}


.w4-info-card h6  {
    
    margin: 0 0 6px;
    
    font-size: 14px;
    
    font-weight: 600;
}


.w4-info-card small  {
    
    color: #344054;
    
    font-size: 13px;
    
    font-weight: 500;
}


.w4-contact-visual  {
    
    position: relative;
    
    min-height: 430px;
}


.w4-circle-bg  {
    
    position: absolute;
    
    width: 430px;
    
    height: 430px;
    
    top: -15px;
    
    right: 0px;
    
    border-radius: 50%;
    
    background: #faeaff;
}


.w4-laptop  {
    
    position: absolute;
    
    width: 680px;
    
    right: 2px;
    
    top: 65px;
    
    z-index: 3;
}


.w4-plant  {
    
    position: absolute;
    
    width: 317px;
    
    left: -21px;
    
    bottom: 0;
    
    z-index: 4;
}


.w4-headphone  {
    
    position: absolute;
    
    width: 190px;
    
    right: 34px;
    
    bottom: 0;
    
    z-index: 5;
}


.w4-dots  {
    
    position: absolute;
    
    width: 75px;
    
    height: 75px;
    
    background-image: radial-gradient(#7b61ff 2px, transparent 2px);
    
    background-size: 16px 16px;
    
    opacity: .35;
}


.dots-one  {
    
    left: 20px;
    
    top: 120px;
}


.dots-two  {
    
    right: 36px;
    
    top: 10px;
}


.w4-floating-icon  {
    
    position: absolute;
    
    width: 58px;
    
    height: 58px;
    
    border-radius: 50%;
    
    background: #fff;
    
    box-shadow: 0 15px 35px rgba(30, 50, 100, 0.12);
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    z-index: 8;
    
    font-size: 22px;
}


.w4-floating-icon.mail  {
    
    top: 20px;
    
    left: 130px;
    
    color: #ed149d;
}


.w4-floating-icon.call  {
    
    top: 145px;
    
    left: 115px;
    
    color: #6b35ff;
}


.w4-floating-icon.user  {
    
    top: 95px;
    
    right: 20px;
    
    color: #1765ff;
}


.w4-floating-icon.location  {
    
    top: 235px;
    
    right: 10px;
    
    color: #20c997;
}


.w4-form-card,
.w4-get-card  {
    
    height: 100%;
    
    padding: 28px;
    
    border: 1px solid #e1e7f2;
    
    border-radius: 14px;
    
    background: #fff;
    
    box-shadow: 0 15px 35px rgba(30, 50, 100, 0.07);
}


.w4-form-card h3,
.w4-get-card h3  {
    
    margin: 0 0 6px;
    
    color: #090b22;
    
    font-size: 22px;
    
    font-weight: 600;
}


.w4-form-card p  {
    
    margin: 0 0 22px;
    
    color: #344054;
    
    font-size: 16px;
}


.w4-input-box,
.w4-textarea-box  {
    
    position: relative;
}


.w4-input-box i,
.w4-textarea-box i  {
    
    position: absolute;
    
    left: 14px;
    
    top: 50%;
    
    transform: translateY(-50%);
    
    color: #7b61ff;
    
    font-size: 15px;
}


.w4-textarea-box i  {
    
    top: 18px;
    
    transform: none;
}


.w4-input-box input,
.w4-input-box select,
.w4-textarea-box textarea  {
    
    width: 100%;
    
    border: 1px solid #dde5f2;
    
    border-radius: 6px;
    
    outline: none;
    
    color: #111827;
    
    font-size: 13px;
    
    background: #fff;
}


.w4-input-box input,
.w4-input-box select  {
    
    height: 50px;
    
    padding: 0 14px 0 42px;
}


.w4-textarea-box textarea  {
    
    height: 135px;
    
    padding: 16px 14px 14px 42px;
    
    resize: none;
}


.w4-send-btn  {
    
    width: 100%;
    
    height: 50px;
    
    border: none;
    
    border-radius: 6px;
    
    color: #fff;
    
    background: linear-gradient(90deg, #ed149d, #065cff);
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-send-btn i  {
    
    margin-left: 16px;
}


.w4-contact-list  {
    
    margin-top: 20px;
}


.w4-contact-list div  {
    
    display: flex;
    
    gap: 14px;
    
    margin-bottom: 39px;
}


.w4-contact-list span  {
    
    width: 34px;
    
    height: 34px;
    
    flex: 0 0 34px;
    
    border-radius: 8px;
    
    display: flex;
    
    align-items: center;
}


.w4-contact-list p  {
    
    margin: 0;
    
    color: #344054;
    
    font-size: 14px;
    
    line-height: 1.5;
}



.w4-contact-list b  {
    
    display: block;
    
    color: #090b22;
    
    font-size: 16px;
}


.w4-get-card h5  {
    
    margin: 22px 0 14px;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-social-links  {
    
    display: flex;
    
    gap: 12px;
}


.w4-social-links a  {
    
    width: 36px;
    
    height: 36px;
    
    border: 1px solid #e1e7f2;
    
    border-radius: 50%;
    
    color: #fff;
    
    text-decoration: none;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-social-links a:hover  {
    
    color: #fff;
    
    background: linear-gradient(90deg, #ed149d, #1765ff);
}


.w4-social-links-icon  {
    
    display: flex;
    
    gap: 12px;
}


.w4-social-links-icon a  {
    
    width: 36px;
    
    height: 36px;
    
    border: 1px solid #e1e7f2;
    
    border-radius: 50%;
    
    color: #080707;
    
    text-decoration: none;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-social-links-icon a:hover  {
    
    color: #fff;
    
    background: linear-gradient(90deg, #ed149d, #1765ff);
}


@media (max-width:1199px)  {
    
    .w4-contact-container  {
        
        padding: 36px 48px;
    }
    

    .w4-contact-hero h1  {
        
        font-size: 44px;
    }
    

    .w4-laptop  {
        
        width: 400px;
    }
}


@media (max-width:991px)  {
    
    .w4-contact-container  {
        
        padding: 32px 24px;
    }
    

    .w4-contact-hero  {
        
        text-align: center;
    }
    

    .w4-contact-badge  {
        
        margin: 0 auto;
    }
    

    .w4-contact-hero p  {
        
        margin: 0 auto;
    }
    

    .w4-contact-visual  {
        
        min-height: 380px;
    }
    

    .w4-circle-bg  {
        
        right: 50%;
        
        transform: translateX(50%);
    }
    

    .w4-laptop  {
        
        right: 50%;
        
        transform: translateX(50%);
    }
}


@media (max-width:575px)  {
    
    .w4-contact-container  {
        
        padding: 28px 16px;
    }
    

    .w4-contact-hero h1  {
        
        font-size: 32px;
    }
    

    .w4-contact-visual  {
        
        min-height: 300px;
    }
    

    .w4-circle-bg  {
        
        width: 300px;
        
        height: 300px;
    }
    

    .w4-laptop  {
        
        width: 285px;
    }
    

    .w4-plant  {
        
        width: 95px;
        
        left: 0;
    }
    

    .w4-headphone  {
        
        width: 110px;
        
        right: 0;
    }
    

    .w4-floating-icon,
    .w4-dots  {
        
        display: none;
    }
    

    .w4-form-card,
    .w4-get-card  {
        
        padding: 22px;
    }
}


.w4-office-section  {
    
    background: #fff;
    
    font-family: Arial, Helvetica, sans-serif;
}


.w4-office-container  {
    
    padding: 28px 76px 36px;
}


.w4-map-card,
.w4-faq-card  {
    
    padding: 22px;
    
    border: 1px solid #e3e8f3;
    
    border-radius: 14px;
    
    box-shadow: 0 12px 30px rgba(30, 50, 100, 0.06);
}


.w4-map-card h3  {
    
    margin: 0 0 5px;
    
    font-size: 18px;
    
    font-weight: 600;
}


.w4-map-card p  {
    
    margin: 0 0 18px;
    
    color: #475467;
    
    font-size: 13px;
}


.w4-map-box  {
    
    position: relative;
    
    height: 170px;
    
    overflow: hidden;
    
    border-radius: 8px;
}


.w4-map-box img  {
    
    width: 100%;
    
    height: 100%;
    
    object-fit: cover;
}


.w4-map-info  {
    
    position: absolute;
    
    left: 36px;
    
    top: 35px;
    
    width: 190px;
    
    padding: 18px;
    
    border-radius: 10px;
    
    background: #fff;
    
    box-shadow: 0 12px 30px rgba(30, 50, 100, 0.15);
}


.w4-map-info h6  {
    
    margin: 0 0 5px;
    
    color: #ed149d;
    
    font-size: 14px;
    
    font-weight: 600;
}


.w4-map-info span,
.w4-map-info a  {
    
    display: block;
    
    font-size: 12px;
    
    font-weight: 700;
}


.w4-map-info a  {
    
    margin-top: 12px;
    
    color: #ed149d;
    
    text-decoration: none;
}


.w4-why-title,
.w4-faq-title  {
    
    margin: 28px 0 18px;
    
    text-align: center;
    
    color: #08091f;
    
    font-size: 30px;
    
    font-weight: 600;
}


.w4-why-title span,
.w4-faq-title span  {
    
    color: #ed149d;
}


.w4-why-grid  {
    
    display: grid;
    
    grid-template-columns: repeat(6, 1fr);
    
    gap: 22px;
    
    margin-bottom: 28px;
}


.w4-why-card  {
    
    min-height: 145px;
    
    padding: 22px 12px;
    
    border: 1px solid #e3e8f3;
    
    border-radius: 12px;
    
    text-align: center;
    
    background: #fff;
    
    box-shadow: 0 12px 28px rgba(30, 50, 100, 0.06);
}


.w4-why-icon  {
    
    width: 48px;
    
    height: 48px;
    
    margin: 0 auto 14px;
    
    border-radius: 50%;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    color: #fff;
}


.pink  {
    
    color: #de05be;
    
    background: #f3e4ed;
}


.purple  {
    
    color: #9e08e8;
    
    background: #eee8fb;
}


.blue  {
    
    color: #5106f3;
    
    background: #e3ebfb;
}


.green  {
    
    color: #41d622;
    
    background: #ebf8e6;
}


.orange  {
    
    color: #eb8e12;
    
    background: #f8eede;
}


.w4-why-card h5  {
    
    margin: 0 0 8px;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-why-card p  {
    
    margin: 0;
    
    color: #475467;
    
    font-size: 16px;
    
    line-height: 1.5;
    
    font-weight: 500;
}


.w4-faq-card  {
    
    background: linear-gradient(90deg, #f8f5ff, #fff);
}


.w4-faq-visual  {
    
    position: relative;
    
    min-height: 210px;
}


.w4-dots  {
    
    position: absolute;
    
    left: 20px;
    
    top: 70px;
    
    width: 75px;
    
    height: 75px;
    
    background-image: radial-gradient(#8b5cf6 2px, transparent 2px);
    
    background-size: 15px 15px;
    
    opacity: .35;
}


.w4-chat-bubble  {
    
    position: absolute;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.pink-bubble  {
    
    left: 134px;
    
    bottom: 19px;
    
    width: 101px;
    
    height: 82px;
    
    border-radius: 30px;
    
    background: #ed149d;
    
    color: #fff;
    
    font-size: 34px;
}


.purple-bubble  {
    
    left: 193px;
    
    top: 20px;
    
    width: 128px;
    
    height: 109px;
    
    border-radius: 55px 55px 55px 12px;
    
    background: #7c3cff;
    
    color: #fff;
    
    font-size: 54px;
    
    font-weight: 900;
}


.w4-faq-title  {
    
    margin-top: 0;
}


.w4-faq-accordion .accordion-item  {
    
    margin-bottom: 8px;
    
    border: 1px solid #e3e8f3;
    
    border-radius: 6px;
    
    overflow: hidden;
}


.w4-faq-accordion .accordion-button  {
    
    min-height: 40px;
    
    padding: 0 14px;
    
    font-size: 15px;
    
    font-weight: 500;
    
    box-shadow: none;
}


.w4-faq-accordion .accordion-button:not(.collapsed)  {
    
    color: #fff;
    
    background: linear-gradient(90deg, #ed149d, #1765ff);
}


.w4-faq-accordion .accordion-body  {
    
    color: #475467;
    
    font-size: 16px;
}


.w4-view-faq  {
    
    display: inline-block;
    
    margin-top: 8px;
    
    color: #ed149d;
    
    font-size: 14px;
    
    font-weight: 600;
    
    text-decoration: none;
}


.w4-build-cta  {
    
    margin-top: 22px;
    
    padding: 24px 38px;
    
    border-radius: 12px;
    
    background: linear-gradient(90deg, #ed149d, #1765ff);
    
    display: flex;
    
    align-items: center;
    
    gap: 32px;
}


.w4-rocket  {
    
    color: #fff;
    
    font-size: 78px;
}


.w4-rocket i  {
    
    display: inline-block;
    
    transform: rotate(42deg);
}


.w4-cta-text  {
    
    flex: 1;
}


.w4-cta-text h3  {
    
    margin: 0 0 8px;
    
    color: #fff;
    
    font-size: 24px;
    
    font-weight: 600;
}


.w4-cta-text p  {
    
    margin: 0;
    
    color: #fff;
    
    font-size: 16px;
}


.w4-cta-actions  {
    
    display: flex;
    
    gap: 14px;
}


.w4-white-btn,
.w4-outline-btn  {
    
    height: 46px;
    
    padding: 0 24px;
    
    border-radius: 6px;
    
    text-decoration: none;
    
    font-size: 15px;
    
    font-weight: 600;
    
    display: inline-flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-white-btn  {
    
    color: #1765ff;
    
    background: #fff;
}


.w4-outline-btn  {
    
    color: #fff;
    
    border: 1px solid rgba(255, 255, 255, .8);
}


@media (max-width:1199px)  {
    
    .w4-office-container  {
        
        padding: 28px 48px;
    }
    

    .w4-why-grid  {
        
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width:991px)  {
    
    .w4-office-container  {
        
        padding: 26px 24px;
    }
    

    .w4-faq-visual  {
        
        min-height: 180px;
    }
    

    .w4-build-cta  {
        
        text-align: center;
        
        flex-direction: column;
    }
}


@media (max-width:767px)  {
    
    .w4-why-grid  {
        
        grid-template-columns: repeat(2, 1fr);
    }
    

    .w4-cta-actions  {
        
        width: 100%;
        
        flex-direction: column;
    }
    

    .w4-white-btn,
    .w4-outline-btn  {
        
        width: 100%;
    }
}


@media (max-width:575px)  {
    
    .w4-office-container  {
        
        padding: 22px 16px;
    }
    

    .w4-map-box  {
        
        height: 150px;
    }
    

    .w4-map-info  {
        
        left: 15px;
        
        top: 25px;
        
        width: 165px;
    }
    

    .w4-why-grid  {
        
        grid-template-columns: 1fr;
    }
    

    .w4-faq-visual  {
        
        display: none;
    }
    

    .w4-build-cta  {
        
        padding: 24px 20px;
    }
    

    .w4-rocket  {
        
        font-size: 62px;
    }
}


.footer-bottom  {
    
    border-top: 1px solid rgba(214, 167, 88, 0.25);
    
    margin-top: 40px;
    
    padding-top: 18px;
    
    padding-bottom: 18px;
    
    display: flex;
    
    justify-content: space-between;
    
    gap: 20px;
}


.footer-bottom p  {
    
    margin: 0;
    
    font-size: 14px;
    
    color: #fff;
}


.footer-bottom a  {
    
    font-size: 14px;
    
    margin-left: 3px;
    
    text-decoration: none;
}


.sticky-call  {
    
    position: fixed;
    
    left: 20px;
    
    bottom: 25px;
    
    width: 60px;
    
    height: 60px;
    
    background: #0d6efd;
    
    color: #fff;
    
    border-radius: 50%;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    font-size: 28px;
    
    text-decoration: none;
    
    z-index: 9999;
    
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    
    transition: 0.3s;
}


.sticky-whatsapp  {
    
    position: fixed;
    
    right: 20px;
    
    bottom: 25px;
    
    width: 60px;
    
    height: 60px;
    
    background: #25D366;
    
    color: #fff;
    
    border-radius: 50%;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    font-size: 30px;
    
    text-decoration: none;
    
    z-index: 9999;
    
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    
    transition: 0.3s;
}


.sticky-whatsapp:hover,
.sticky-call:hover  {
    
    transform: scale(1.1);
    
    color: #fff;
}


@media (max-width:576px)  {
    

    .sticky-whatsapp,
    .sticky-call  {
        
        width: 52px;
        
        height: 52px;
        
        font-size: 24px;
        
        bottom: 20px;
    }
    

    .sticky-call  {
        
        left: 15px;
    }
    

    .sticky-whatsapp  {
        
        right: 15px;
    }
}


.blog-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
}


.blog-container  {
    
    padding: 10px 108px 35px;
}


.blog-card  {
    
    height: 100%;
    
    background: #ffffff;
    
    border: 1px solid #e5e8f0;
    
    border-radius: 8px;
    
    overflow: hidden;
    
    box-shadow: 0 8px 20px rgba(30, 50, 100, 0.06);
    
    transition: 0.3s ease;
}


.blog-card:hover  {
    
    transform: translateY(-5px);
    
    box-shadow: 0 14px 30px rgba(30, 50, 100, 0.12);
}


.blog-card img  {
    
    width: 100%;
    
    height: 150px;
    
    object-fit: cover;
    
    display: block;
}


.blog-content  {
    
    padding: 16px 15px 15px;
}


.blog-category  {
    
    display: inline-block;
    
    margin-bottom: 10px;
    
    font-size: 10px;
    
    font-weight: 700;
    
    text-transform: uppercase;
}


.blog-category.purple  {
    
    color: #7b35ff;
}


.blog-category.green  {
    
    color: #16b364;
}


.blog-category.pink  {
    
    color: #ed149d;
}


.blog-category.blue  {
    
    color: #2368ff;
}


.blog-content h5  {
    
    margin: 0 0 9px;
    
    color: #111827;
    
    font-size: 16px;
    
    font-weight: 600;
    
    line-height: 1.35;
}


.blog-content p  {
    
    margin: 0 0 14px;
    
    color: #4b5563;
    
    font-size: 16px;
    
    line-height: 1.55;
}


.blog-meta  {
    
    display: flex;
    
    align-items: center;
    
    gap: 14px;
    
    margin-bottom: 13px;
}


.blog-meta span  {
    
    color: #6b7280;
    
    font-size: 11px;
    
    font-weight: 600;
}


.blog-content a  {
    
    color: #5b35ff;
    
    text-decoration: none;
    
    font-size: 15px;
    
    font-weight: 600;
}


.blog-content a i  {
    
    margin-left: 3px;
    
    font-size: 12px;
}


.blog-content a:hover  {
    
    color: #ed149d;
}


@media (max-width:1199px)  {
    
    .blog-card img  {
        
        height: 165px;
    }
}


@media (max-width:767px)  {
    
    .blog-container  {
        
        padding: 10px 16px 30px;
    }
    

    .blog-card img  {
        
        height: 180px;
    }
}


@media (max-width:575px)  {
    
    .blog-card img  {
        
        height: 200px;
    }
    

    .blog-content h5  {
        
        font-size: 15px;
    }
    

    .blog-content p  {
        
        font-size: 12px;
    }
}


.preview-modal  {
    
    display: none;
    
    position: fixed;
    
    top: 0;
    
    left: 0;
    
    width: 100%;
    
    height: 100%;
    
    background: rgba(0, 0, 0, 0.8);
    
    justify-content: center;
    
    align-items: center;
    
    z-index: 9999;
}


.preview-modal img  {
    
    max-width: 80%;
    
    max-height: 80vh;
    
    border-radius: 10px;
    
    background: #fff;
    
    padding: 10px;
}


.close-btn  {
    
    position: absolute;
    
    top: 20px;
    
    right: 35px;
    
    font-size: 40px;
    
    color: #fff;
    
    cursor: pointer;
}


.w4-register-section  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-register-container  {
    
    padding: 36px 90px 40px;
}


.w4-register-badge  {
    
    width: fit-content;
    
    padding: 8px 22px;
    
    border: 1.5px solid #8b35ff;
    
    border-radius: 30px;
    
    color: #ec149d;
    
    font-size: 12px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.w4-register-left h1  {
    
    margin: 42px 0 20px;
    
    color: #08091f;
    
    font-size: 45px;
    
    line-height: 1.18;
    
    font-weight: 600;
}


.w4-register-left h1 span  {
    
    background: linear-gradient(90deg, #ec149d, #2368ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-register-text  {
    
    max-width: 560px;
    
    color: #243047;
    
    font-size: 17.5px;
    
    line-height: 1.7;
}


.w4-benefits  {
    
    display: grid;
    
    grid-template-columns: repeat(3, 1fr);
    
    gap: 34px;
    
    margin-top: 44px;
    
    max-width: 650px;
}


.w4-benefit  {
    
    text-align: left;
}


.w4-benefit-icon  {
    
    width: 72px;
    
    height: 72px;
    
    margin: 0 3px 14px;
    
    border-radius: 16px;
    
    font-size: 34px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-benefit-icons  {
    
    width: 72px;
    
    height: 72px;
    
    margin: 0 auto 14px;
    
    border-radius: 16px;
    
    font-size: 34px;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
}


.w4-benefit-icon.pink  {
    
    color: #ec149d;
    
    background: #ffe8f5;
}


.w4-benefit-icon.purple  {
    
    color: #6b35ff;
    
    background: #f0e8ff;
}


.w4-benefit h5  {
    
    margin: 0 0 8px;
    
    color: #08091f;
    
    font-size: 15px;
    
    font-weight: 600;
}


.w4-benefit p  {
    
    margin: 0;
    
    color: #344054;
    
    font-size: 15px;
    
    line-height: 1.5;
    
    font-weight: 500;
}


@media (max-width:767px)  {
    
    .w4-benefit  {
        
        text-align: center;
        
        margin-bottom: 25px;
    }
    

    .w4-benefit-icon  {
        
        margin: 0 auto 14px;
    }
    

    .w4-benefit h5,
    .w4-benefit p  {
        
        text-align: center;
    }
}


.w4-device-preview  {
    
    position: relative;
    
    min-height: 360px;
    
    margin-top: 28px;
}


.w4-laptop-img-reg  {
    
    position: absolute;
    
    width: 636px;
    
    left: auto;
    
    bottom: 0;
    
    z-index: 2;
}


.w4-register-card  {
    
    max-width: 760px;
    
    margin-left: auto;
    
    padding: 52px 62px;
    
    border: 1px solid #dfe5f0;
    
    border-radius: 18px;
    
    background: #ffffff;
    
    box-shadow: 0 18px 50px rgba(30, 50, 100, 0.08);
}


.w4-register-card h2  {
    
    margin: 0 0 12px;
    
    color: #08091f;
    
    text-align: center;
    
    font-size: 36px;
    
    font-weight: 600;
}


.w4-register-card>p  {
    
    margin: 0 0 34px;
    
    text-align: center;
    
    color: #344054;
    
    font-size: 16px;
    
    font-weight: 600;
}


.w4-register-card p a,
.w4-check a  {
    
    color: #5b22ff;
    
    text-decoration: none;
    
    font-weight: 600;
}


.w4-input-group  {
    
    height: 56px;
    
    padding: 0 18px;
    
    border: 1.5px solid #d8dfec;
    
    border-radius: 7px;
    
    background: #ffffff;
    
    display: flex;
    
    align-items: center;
    
    gap: 14px;
}


.w4-input-group i  {
    
    color: #6b35ff;
    
    font-size: 20px;
}


.w4-input-group input  {
    
    width: 100%;
    
    border: none;
    
    outline: none;
    
    color: #08091f;
    
    font-size: 14px;
    
    font-weight: 500;
}


.w4-input-group input::placeholder  {
    
    color: #667085;
}


.w4-input-group span i  {
    
    color: #344054;
    
    font-size: 16px;
}


.w4-check  {
    
    display: flex;
    
    align-items: center;
    
    gap: 12px;
    
    margin: 24px 0;
    
    color: #344054;
    
    font-size: 15px;
    
    font-weight: 500;
}


.w4-check input  {
    
    width: 18px;
    
    height: 18px;
    
    accent-color: #6b35ff;
}


.w4-create-btn  {
    
    width: 100%;
    
    height: 60px;
    
    border: none;
    
    border-radius: 8px;
    
    color: #ffffff;
    
    background: linear-gradient(90deg, #ec149d, #2368ff);
    
    font-size: 16px;
    
    font-weight: 600;
}


.w4-create-btn i  {
    
    margin-left: 18px;
    
    font-size: 22px;
}


.w4-divider  {
    
    position: relative;
    
    margin: 34px 0 26px;
    
    text-align: center;
}


.w4-divider::before  {
    
    content: "";
    
    position: absolute;
    
    left: 0;
    
    top: 50%;
    
    width: 100%;
    
    height: 1px;
    
    background: #e2e7f2;
}


.w4-divider span  {
    
    position: relative;
    
    padding: 0 18px;
    
    background: #ffffff;
    
    color: #667085;
    
    font-size: 16px;
    
    font-weight: 500;
}


.w4-social-login  {
    
    display: grid;
    
    grid-template-columns: repeat(3, 1fr);
    
    gap: 18px;
}


.w4-social-login a  {
    
    height: 54px;
    
    border: 1px solid #dfe5f0;
    
    border-radius: 7px;
    
    color: #344054;
    
    text-decoration: none;
    
    font-size: 15px;
    
    font-weight: 600;
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    gap: 10px;
}


.w4-social-login a i  {
    
    font-size: 22px;
}


.w4-social-login a:hover  {
    
    background: #f8faff;
}


.w4-social-login .bi-google  {
    
    font-size: 22px;
    
    background: conic-gradient(from 20deg, #4285F4 0deg 90deg, #DB4437 90deg 180deg, #F4B400 180deg 250deg, #0F9D58 250deg 360deg);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
    
    display: inline-block;
}


.w4-social-login .bi-facebook  {
    
    color: #1877F2;
}


.w4-social-login .bi-apple  {
    
    color: #000000;
}


@media (max-width:1399px)  {
    
    .w4-register-container  {
        
        padding-left: 60px;
        
        padding-right: 60px;
    }
    

    .w4-register-left h1  {
        
        font-size: 48px;
    }
    

    .w4-register-card  {
        
        padding: 44px;
    }
}


@media (max-width:991px)  {
    
    .w4-register-container  {
        
        padding: 36px 24px;
    }
    

    .w4-register-left  {
        
        text-align: center;
    }
    

    .w4-register-badge,
    .w4-register-text  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-benefits  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-device-preview  {
        
        display: none;
    }
    

    .w4-register-card  {
        
        margin: 0 auto;
    }
}


@media (max-width:767px)  {
    
    .w4-register-left h1  {
        
        font-size: 36px;
    }
    

    .w4-benefits  {
        
        grid-template-columns: 1fr;
        
        gap: 22px;
    }
    

    .w4-register-card  {
        
        padding: 34px 24px;
    }
    

    .w4-register-card h2  {
        
        font-size: 28px;
    }
    

    .w4-social-login  {
        
        grid-template-columns: 1fr;
    }
}


@media (max-width:575px)  {
    
    .w4-register-container  {
        
        padding: 28px 16px;
    }
    

    .w4-register-left h1  {
        
        font-size: 30px;
    }
    

    .w4-register-text  {
        
        font-size: 15px;
    }
    

    .w4-register-card  {
        
        padding: 28px 18px;
    }
    

    .w4-check  {
        
        align-items: flex-start;
        
        font-size: 12px;
    }
}


.toggle-password  {
    
    cursor: pointer;
}


.w4-input-group  {
    
    position: relative;
}


.toggle-password  {
    
    position: absolute;
    
    right: 15px;
    
    top: 50%;
    
    transform: translateY(-50%);
}


.seyfert  {
    
    color: #000;
}


.w4-map-wrapper  {
    
    position: relative;
    
    width: 100%;
    
    padding-bottom: 56.25%;
    
    height: 0;
    
    overflow: hidden;
    
    border-radius: 10px;
    
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}


.w4-map-wrapper iframe  {
    
    position: absolute;
    
    top: 0;
    
    left: 0;
    
    width: 100%;
    
    height: 100%;
    
    border: 0;
}


@media (min-width:768px) and (max-width:1024px)  {
    
    .w4-map-wrapper  {
        
        padding-bottom: 100%;
    }
    

    .w4-laptop-img-reg  {
        
        width: 485px;
        
        height: 300px;
    }
}


@media (max-width:767px)  {
    
    .w4-map-wrapper  {
        
        padding-bottom: 100%;
        
        border-radius: 8px;
    }
}


.v-icon  {
    
    font-size: 20px;
    
    font-weight: 700;
    
    text-decoration: none;
}


.w4-blog-detail  {
    
    padding: 70px 0;
    
    background: #f8fbff;
}


.w4-back-btn  {
    
    display: inline-flex;
    
    align-items: center;
    
    gap: 8px;
    
    margin-bottom: 25px;
    
    text-decoration: none;
    
    color: #5b3df5;
    
    font-size: 16px;
    
    font-weight: 700;
}


.w4-back-btn:hover  {
    
    color: #4528db;
}


.w4-blog-image  {
    
    overflow: hidden;
    
    border-radius: 24px;
    
    margin-bottom: 35px;
}


.w4-blog-image img  {
    
    width: 100%;
    
    height: 80%;
    
    border-radius: 24px;
}


.w4-blog-content  {
    
    max-width: 900px;
    
    margin: auto;
}


.w4-blog-title  {
    
    margin: 15px 0 20px;
    
    font-size: 30px;
    
    font-weight: 600;
    
    line-height: 1.3;
    
    color: #0f172a;
}


.w4-blog-description  {
    
    font-size: 19px;
    
    color: #64748b;
    
    line-height: 1.9;
    
    margin-bottom: 35px;
}


.w4-blog-content h3  {
    
    margin-bottom: 12px;
    
    font-size: 28px;
    
    font-weight: 700;
    
    color: #111827;
}


.w4-blog-content p  {
    
    font-size: 17px;
    
    line-height: 1.9;
    
    color: #475569;
    
    margin-bottom: 20px;
}


@media (max-width:991px)  {
    
    .w4-blog-title  {
        
        font-size: 36px;
    }
    

    .w4-blog-image img  {
        
        height: 380px;
    }
}


@media (max-width:576px)  {
    
    .w4-blog-detail  {
        
        padding: 45px 0;
    }
    

    .w4-blog-image img  {
        
        height: 240px;
    }
    

    .w4-blog-title  {
        
        font-size: 28px;
    }
    

    .w4-blog-description  {
        
        font-size: 16px;
    }
    

    .w4-blog-content h3  {
        
        font-size: 22px;
    }
    

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


.w4-blog-hero  {
    
    background: #ffffff;
    
    font-family: Arial, Helvetica, sans-serif;
    
    overflow: hidden;
}


.w4-blog-container  {
    
    padding: 48px 76px 30px;
}


.w4-blog-badge  {
    
    width: fit-content;
    
    padding: 7px 18px;
    
    border: 1.5px solid #8b5cff;
    
    border-radius: 30px;
    
    color: #552cff;
    
    font-size: 13px;
    
    font-weight: 900;
    
    text-transform: uppercase;
}


.w4-blog-badge-bg  {
    
    width: fit-content;
    
    padding: 7px 18px;
    
    border: 1.5px solid #8b5cff;
    
    border-radius: 30px;
    
    color: #552cff;
    
    font-size: 10px;
    
    font-weight: 600;
    
    text-transform: uppercase;
}


.w4-blog-badge i  {
    
    color: #ed149d;
    
    margin-right: 6px;
}


.w4-blog-content h1  {
    
    margin: 36px 0 0;
    
    color: #08091f;
    
    font-size: 45px;
    
    line-height: 1.22;
    
    font-weight: 600;
    
    letter-spacing: -1.5px;
}


.w4-blog-content h1 span  {
    
    background: linear-gradient(90deg, #ed149d, #2368ff);
    
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
}


.w4-blog-content p  {
    
    max-width: 100%;
    
    margin: 28px 0 0;
    
    color: #253047;
    
    font-size: 16px;
    
    line-height: 1.8;
    
    font-weight: 500;
    
    text-align: justify;
}


.w4-blog-search  {
    
    max-width: 675px;
    
    height: 72px;
    
    margin-top: 34px;
    
    padding: 7px;
    
    border: 1.5px solid #b8c5ff;
    
    border-radius: 10px;
    
    display: flex;
    
    background: #ffffff;
    
    box-shadow: 0 12px 28px rgba(35, 104, 255, 0.08);
}


.w4-blog-search input  {
    
    width: 100%;
    
    border: none;
    
    outline: none;
    
    padding: 0 20px;
    
    color: #111827;
    
    font-size: 14px;
}


.w4-blog-search button  {
    
    width: 58px;
    
    border: none;
    
    border-radius: 8px;
    
    color: #ffffff;
    
    background: linear-gradient(135deg, #7b35ff, #2368ff);
    
    font-size: 22px;
}


.w4-popular-topics  {
    
    display: flex;
    
    align-items: center;
    
    flex-wrap: wrap;
    
    gap: 14px;
    
    margin-top: 24px;
}


.w4-popular-topics strong  {
    
    color: #111827;
    
    font-size: 13px;
    
    font-weight: 600;
}


.w4-popular-topics a  {
    
    padding: 7px 15px;
    
    border: 1px solid #c9b8ff;
    
    border-radius: 20px;
    
    color: #5c35ff;
    
    background: #ffffff;
    
    text-decoration: none;
    
    font-size: 12px;
    
    font-weight: 600;
}


.w4-blog-visual  {
    
    position: relative;
    
    min-height: 430px;
}


.w4-pink-shape  {
    
    position: absolute;
    
    width: 381px;
    
    height: 311px;
    
    right: 5px;
    
    top: -35px;
    
    border-radius: 50%;
    
    background: #ffe0f2;
    
    z-index: 0;
}


.w4-dot-pattern  {
    
    position: absolute;
    
    width: 80px;
    
    height: 80px;
    
    opacity: 0.4;
    
    background-image: radial-gradient(#7b8cff 2px, transparent 2px);
    
    background-size: 14px 14px;
}


.dot-left  {
    
    left: 45px;
    
    top: 62px;
}


.dot-right  {
    
    right: 70px;
    
    top: 25px;
}


.w4-blog-laptop  {
    
    position: absolute;
    
    width: 565px;
    
    right: 31px;
    
    top: 25px;
    
    z-index: 2;
}


.w4-blog-mobile  {
    
    position: absolute;
    
    width: 175px;
    
    right: 105px;
    
    top: 126px;
    
    z-index: 4;
}


.w4-blog-plant  {
    
    position: absolute;
    
    width: 155px;
    
    left: 55px;
    
    bottom: 18px;
    
    z-index: 5;
}


.w4-blog-float  {
    
    position: absolute;
    
    width: 66px;
    
    height: 66px;
    
    border-radius: 50%;
    
    background: #ffffff;
    
    box-shadow: 0 14px 30px rgba(30, 50, 100, 0.12);
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
    z-index: 6;
    
    font-weight: 900;
}


.pencil  {
    
    left: 175px;
    
    top: 0;
    
    color: #ed149d;
    
    font-size: 28px;
}


.chart  {
    
    left: 125px;
    
    top: 138px;
    
    color: #1765ff;
    
    font-size: 28px;
}


.seo  {
    
    right: 28px;
    
    top: 130px;
    
    color: #14b86a;
    
    font-size: 14px;
}


.ai  {
    
    right: 26px;
    
    top: 250px;
    
    color: #7b35ff;
    
    font-size: 18px;
}


.heart  {
    
    right: 70px;
    
    bottom: 42px;
    
    color: #ff1478;
    
    font-size: 26px;
}


@media (max-width:1399px)  {
    
    .w4-blog-container  {
        
        padding-left: 54px;
        
        padding-right: 54px;
    }
    

    .w4-blog-content h1  {
        
        font-size: 50px;
    }
    

    .w4-blog-laptop  {
        
        width: 500px;
    }
}


@media (max-width:1199px)  {
    
    .w4-blog-content h1  {
        
        font-size: 42px;
    }
    

    .w4-blog-content p  {
        
        font-size: 16px;
    }
    

    .w4-blog-laptop  {
        
        width: 440px;
        
        right: 120px;
    }
    

    .w4-blog-mobile  {
        
        width: 145px;
        
        right: 70px;
    }
}


@media (max-width:991px)  {
    
    .w4-blog-container  {
        
        padding: 40px 24px;
    }
    

    .w4-blog-content  {
        
        text-align: center;
    }
    

    .w4-blog-badge  {
        
        margin: 0 auto;
    }
    

    .w4-blog-content p,
    .w4-blog-search  {
        
        margin-left: auto;
        
        margin-right: auto;
    }
    

    .w4-popular-topics  {
        
        justify-content: center;
    }
    

    .w4-blog-visual  {
        
        min-height: 380px;
        
        margin-top: 35px;
    }
    

    .w4-blog-laptop  {
        
        right: 4%;
        
        transform: translateX(4%);
    }
    

    .w4-blog-mobile  {
        
        right: 12%;
    }
}


@media (max-width:767px)  {
    
    .w4-blog-content h1  {
        
        font-size: 36px;
    }
    

    .w4-blog-search  {
        
        height: 62px;
    }
    

    .w4-blog-visual  {
        
        min-height: 320px;
    }
    

    .w4-blog-laptop  {
        
        width: 365px;
    }
    

    .w4-blog-mobile  {
        
        width: 112px;
        
        top: 115px;
    }
    

    .w4-blog-plant  {
        
        width: 110px;
    }
    

    .w4-blog-float  {
        
        width: 50px;
        
        height: 50px;
    }
}


@media (max-width:575px)  {
    
    .w4-blog-container  {
        
        padding: 32px 16px;
    }
    

    .w4-blog-content h1  {
        
        font-size: 30px;
    }
    

    .w4-blog-content p  {
        
        font-size: 14px;
    }
    

    .w4-blog-search input  {
        
        padding: 0 12px;
        
        font-size: 12px;
    }
    

    .w4-blog-visual  {
        
        min-height: 260px;
    }
    

    .w4-blog-laptop  {
        
        width: 100%;
        
        top: 12px;
    }
    

    .w4-blog-mobile  {
        
        width: 82px;
        
        right: 4%;
        
        top: 118px;
    }
    

    .w4-blog-plant,
    .w4-blog-float,
    .w4-dot-pattern  {
        
        display: none;
    }
}


.back-to-top  {
    
    position: fixed;
    
    bottom: 150px;
    
    right: 20px;
    
    width: 50px;
    
    height: 50px;
    
    background: #6b35ff;
    
    color: #fff;
    
    border: none;
    
    border-radius: 50%;
    
    font-size: 22px;
    
    cursor: pointer;
    
    display: none;
    
    z-index: 999;
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    
    transition: all 0.3s ease;
}


.back-to-top:hover  {
    
    transform: translateY(-5px);
}


.back-to-top.show  {
    
    display: block;
}

.email-link {
    white-space: nowrap;
    text-decoration: none;
    color: #000000;
}

/* SEO content section for homepage keyword consistency */
.w4-seo-content-section {
  padding: 70px 0 30px;
  background: #ffffff;
}
.w4-seo-content-box {
  max-width: 1100px;
  margin: 0 auto;
  padding: 38px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(248, 250, 255, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}
.w4-seo-label {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #be0bbf;
  background: rgba(190, 11, 191, 0.08);
}
.w4-seo-content-box h2 {
  margin-bottom: 16px;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.18;
  color: #101828;
}
.w4-seo-content-box p {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.8;
  color: #475467;
}
.w4-seo-feature-row {
  margin-top: 22px;
}
.w4-seo-feature-row h3 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 750;
  color: #101828;
}
@media (max-width: 575px) {
  .w4-seo-content-section {
    padding: 45px 0 20px;
  }
  .w4-seo-content-box {
    padding: 24px;
    border-radius: 22px;
  }
}
.js-email{
     margin: 0;
    
    color: #344054;
    
    font-size: 14px;
    
    line-height: 1.5;
    text-decoration: none;
}
.phone-number{
     margin: 0;
    
    color: #344054;
    
    font-size: 14px;
    
    line-height: 1.5;
    text-decoration: none;
}
.phone{
    text-decoration: none;
    color: #344054;
}