/*!--------------------
Template Name: Influtics - Social Influencer Portfolio & Video Sharing HTML Template
Author: tempticspro
Version: 1.0

CSS INDEX
=================== 
01. CUSTOM PROPERTIES
02. GLOBAL
03. Components
04. CSS Animation
05. Header
06. Hero
07. Social Links
08. Reels
09. Services
10. Intro
11. Live
12. Videos
13. Contact
14. Article
15. Footer

--- INNER PAGES

16. About Page
17. Service Page
18. Service Details Page
19. Videos Page
20. Video Details Page
21. Video Shop Page
22. Video Shop Details Page
23. Login Page
24. Checkout Page
25. Blogs Page
26. Pricing Page
27. Contact Page
28. Blog Details Page

*/
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/* FAQ Section */

.di-faq {
    padding: 90px 15px;
    background: #f7f9ff;
}

.di-faq-title {
    text-align: center;
    font-weight: 800;
    background: linear-gradient(90deg,#27c7c0,#ff8a34,#ff5fa2,#4aa3df);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.di-faq-sub {
    text-align: center;
    margin-bottom: 55px;
    color: #666;
}

.di-faq-wrap {
    max-width: 900px;
    margin: auto;
}

.di-faq-item {
    background: #fff;
    border-radius: 22px;
    margin-bottom: 18px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.08);
    overflow: hidden;
    border-left: 6px solid transparent;
    transition: 0.3s;
}

    .di-faq-item.active {
        border-left-color: #27c7c0;
    }

.di-faq-q {
    padding: 24px 26px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

    .di-faq-q i {
        font-style: normal;
        font-size: 28px;
        color: #ff8a34;
        transition: 0.3s;
    }

.di-faq-item.active .di-faq-q i {
    transform: rotate(45deg);
    color: #ff5fa2;
}

.di-faq-a {
    max-height: 0;
    overflow: hidden;
    padding: 0 26px;
    color: #555;
    line-height: 1.7;
    transition: all 0.4s ease;
}

.di-faq-item.active .di-faq-a {
    max-height: 300px;
    padding-bottom: 26px;
}

/* 🔴 Error red bottom line */

.large {
    position: relative;
    top: -15px;
}


/* login */
.otp-error-text {
    color: #ff2f2f;
    font-weight: 600;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 12px;
    display: block;
}

.forget_text {
    font-size: 15px;
}

.forget_title {
    color: #E94057;
}

.forget-link-btn {
    border-radius: 14px;
    background: linear-gradient(45deg,#E94057,#FF7BAC);
}

.login_btn {
    color: #6B4EFF;
}

.toggle-pass {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 20px;
    color: #E94057;
}

.error-text {
    font-size: 15px;
    color: #ff2f2f;
    font-weight: 600;
    display: block;
    position: relative;
    top: -15px;
}

.login-bg {
    min-height: 100vh;
    background: linear-gradient(45deg, #F72585, #6B4EFF);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.login-box {
    width: 420px;
    background: rgba(255,255,255,0.90);
    padding: 40px;
    border-radius: 22px;
    backdrop-filter: blur(12px);
    box-shadow: 0px 18px 45px rgba(233, 64, 87, 0.25);
}

.input-group-text i {
    font-size: 20px;
    color: #E94057;
}

#emailStatus {
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

.toggle-eye {
    cursor: pointer;
    font-size: 20px;
    color: #6B4EFF;
}

.input-group input {
    padding: 10px;
}

.email-status-line {
    height: 3px;
    width: 100%;
    border-radius: 3px;
    transition: 0.3s ease-in-out;
    margin-top: -4px;
    margin-bottom: 6px;
}

/* registration (center without using body) */
.page-bg {
    min-height: 100vh;
    background: linear-gradient(45deg, #F72585, #6B4EFF);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.regi_login {
    color: #6B4EFF;
    text-decoration: none;
}
/* GLASS EFFECT BOX */
.reg-box {
    width: 450px;
    background: rgba(255,255,255,0.90);
    backdrop-filter: blur(12px);
    padding: 40px;
    border-radius: 22px;
    box-shadow: 0px 18px 45px rgba(233, 64, 87, 0.25);
}

.reg-title {
    text-align: center;
    font-weight: 700;
    font-size: 26px;
    margin-bottom: 25px;
    color: #E94057;
}

/* INPUT GROUP STYLING */
.input-group-text {
    background: #fff;
    border-right: none;
}

    .input-group-text i {
        color: #E94057; /* MAIN INFLUENCER ICON COLOR */
        font-size: 20px;
        transition: 0.3s;
    }



.form-control {
    border-left: none !important;
    padding: 14px;
    border-radius: 12px;
}



/* PREMIUM BUTTON */
.btn-influencer {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    background: linear-gradient(45deg, #E94057, #FF7BAC);
    color: #fff;
    transition: 0.3s;
    box-shadow: 0px 5px 15px rgba(233, 64, 87, 0.35);
}

    .btn-influencer:hover {
        transform: scale(1.05);
        background: linear-gradient(45deg, #F72585, #6B4EFF);
    }

.email-error-line {
    width: 100%;
    height: 2px;
    background: transparent; /* default */
    margin-top: -6px;
    transition: 0.3s;
}

    .email-error-line.active {
        background: #ff3b3b; /* red underline */
    }

.email-error-text {
    font-size: 13px;
    color: #ff3b3b;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
    margin-top: 3px;
}

.input-group input {
    padding: 10px;
}

.toggle-eye {
    cursor: pointer;
    font-size: 20px;
    color: #6B4EFF;
    background: #fff;
}

.toggle-pass {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 20px;
    color: #E94057;
}



.steps-wrap {
    position: relative;
    padding-bottom: 430px;
}




.step {
    display: flex;
    align-items: center;
    margin-bottom: 130px;
    width: 100%;
}

    /* left steps */
    .step.left {
        justify-content: flex-start;
    }

    /* right steps */
    .step.right {
        justify-content: flex-end;
        text-align: right;
    }

/* number + text wrapper */
.num-text-wrap {
    display: flex;
    align-items: center;
}

.step.right .num-text-wrap {
    flex-direction: row-reverse;
    /* swap order */
}

/* number double font */
.double-style {
    width: 45px;
    height: 75px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}



    .double-style .top {
        color: #4491c71a;
        font-size: 285px;
        z-index: 2;
        font-weight: 300;
        font-family: "Tourney", sans-serif;
    }



.text-box {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    position: relative;
    left: -21px;
}

.text-box-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 100%;
}

    .text-box-right h4 {
        font-size: 40px;
        font-weight: 700;
        position: relative;
        left: 34px;
        top: -75px;
    }

    .text-box-right p {
        font-size: 20px;
        color: #555;
        line-height: 1.6;
        text-align: start;
        width: 50%;
        /* display: flex; */
        position: absolute;
        top: 360px;
        left: 61%;
    }

.text-box h4 {
    font-size: 40px;
    font-weight: 700;
}

.text-box p {
    font-size: 20px;
    color: #555;
    line-height: 1.6;
    width: 50%;
}

.text-box3 {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin-left: 15px;
    margin-top: 30px;
}

    .text-box3 h4 {
        font-size: 40px;
        font-weight: 700;
        width: 50%;
    }

    .text-box3 p {
        font-size: 20px;
        color: #555;
        line-height: 1.6;
        width: 48%;
    }


.bottom {
    position: relative;
    left: -400px;
    color: #4491c71a;
    font-size: 285px;
    z-index: 2;
    font-weight: 300;
    font-family: "Tourney", sans-serif;
}

.num-text-wrap img {
    width: 300px;
    height: 230px;
    margin-top: 50px;
    border-radius: 20px;
    border: 2px solid #4491c7;
}

.num-text-wrap a {
    position: absolute;
    left: 15px;
    top: 150px;
}

.thumb-wrap2 {
    position: relative;
    left: 199%;
    top: 294px;
}

.thumb-wrap1 {
    height: 230px;
    border-radius: 20px;
    position: relative;
    left: -20%;
    top: 610px;
}

@media (max-width: 768px) {
    #growLine {
        display: none;
    }

    #endDot {
        display: none !important;
    }

    .step {
        flex-direction: column !important;
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: 180px;
        /* spacing fix */
    }

    .num-text-wrap {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px;
    }

    .double-style {
        position: relative;
        left: -80px;
        top: -4px;
    }

        .double-style .top,
        .double-style .bottom {
            font-size: 180px !important;
            /* reduced for mobile */
        }

    .text-box h4 {
        width: 75%;
        position: relative;
        top: -104px;
        /* margin-left: 43px; */
        font-size: 27px;
        /* left: 42px; */
        margin-left: 100px;
    }

    .text-box p {
        text-align: start;
        font-size: 18px;
        margin-top: -105px;
        margin-left: 125px;
        letter-spacing: 0px;
    }

    .thumb-wrap2 {
        border-radius: 20px;
    }

    .thumb-wrap {
        position: static !important;
        margin-top: 15px;
        display: block;
        width: 100%;
        text-align: center;
    }

        .thumb-wrap img {
            border-radius: 12px;
            margin-left: 46px;
            margin-top: 10px;
            width: 275px;
            height: 250px;
        }

    #growLine,
    .steps-wrap::after {
        position: absolute;
        left: 10px;
        top: 135px;
        display: none;
    }

    .bottom {
        position: relative;
        top: -40px;
        left: 4px;
    }

    .text-box-right {
        margin-top: -161px;
    }

        .text-box-right h4 {
            text-align: left;
            width: 70%;
            margin-left: 75px;
            font-size: 27px;
            margin-top: 82px;
            letter-spacing: 1px;
        }

        .text-box-right p {
            width: 70%;
            margin-left: 104px;
            text-align: start;
            position: absolute;
            left: 2px;
            top: 905px;
        }

    .thumb-wrap2 {
        position: relative;
        left: 30px;
        top: 1135px;
    }

    .last {
        position: relative;
        top: 470px;
    }

    .text-box3 h4 {
        position: relative;
        top: 330px;
        left: 77px;
        font-size: 27px;
        width: 80%;
        text-align: start;
    }

    .text-box3 p {
        left: 77px;
        position: relative;
        text-align: start;
        top: 325px;
        width: 80%;
    }

    .thumb-wrap1 {
        position: relative;
        left: 30px;
        top: 1780px;
    }
}

.meet_title {
    font-family: Alan Sans, sans-serif;
    font-weight: 700;
    font-size: 40px
}

.team-area_About {
    display: flex;
    justify-content: center;
    gap: 50px;
}

/* MAIN CAPSULE CONTAINER */
.capsule-card_About {
    position: relative;
    width: 260px;
    height: 460px;
    border-radius: 140px;
    padding: 25px 0px;
    text-align: center;
    overflow: hidden;
    transition: 0.4s ease;
}

/* Pastel background colors */
.pink_About {
    background: #f69e6f;
}

.mint_About {
    background: #8ebcbc;
}

.beige_About {
    background: #d2e8f0;
}

.yellow_About {
    background: #82a4bd;
}

/* TEXT POSITION FIX */
.capsule-card_About h3 {
    margin-top: 40px;
    font-size: 18px;
    font-weight: 900;
    color: #000;
}

.capsule-card_About p {
    margin-top: 10px;
    margin-bottom: 35px;
    font-size: 14px;
    opacity: 0.8;
}

/* IMAGE BLEND FIX */
.capsule-card_About img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    object-position: center 10%;
    position: absolute;
    bottom: 0;
    left: 0;
    filter: grayscale(100%);
    transition: 0.5s;
    mix-blend-mode: multiply;
    opacity: 0.90;
}

/* Hover Effect Normal Color */
.capsule-card_About:hover img {
    filter: grayscale(0%);
    mix-blend-mode: normal;
    opacity: 1;
}

/* Text full color on hover */
.capsule-card_About:hover h3,
.capsule-card_About:hover p {
    opacity: 1;
    color: #000;
}

/* Up-Down Layout */
.up_About {
    margin-top: 0;
}

.down_About {
    margin-top: 180px;
}

@media (max-width: 768px) {
    .team-area_About {
        flex-direction: column;
        align-items: center;
    }

    .down_About {
        margin-top: 40px;
    }
}

.team-wrapperss_About {
    padding: 60px 0 80px;
}

.team-headingss-liness_About {
    width: 90px;
    height: 4px;
    background: #f2463b;
    margin-bottom: 16px;
}

.team-headingssss_About h2 {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

.team-headingss_About span.meet-text_About {
    color: #f2463b;
    margin-right: 5px;
}

.team-headingss_About span.team-text_About {
    color: #222;
}
/* FULL PAGE BG */
.page_About {
    min-height: 100vh;
}

.about_title {
    color: #e75582d6;
    font-weight: 700;
    font-size: 30px;
}
/* MAIN HERO CARD */
.shell_About {
    margin: 0 auto;
    border-radius: 32px;
    padding-bottom: 70px;
    position: relative;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    padding-top: 125px;
}

/* CENTER LOGO */
.center-logo_About {
    width: 90px;
    height: 90px;
    border-radius: 22px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 22px auto;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

    .center-logo_About img {
        width: 46px;
    }

/* HERO TEXT */
.hero-title_About {
    width: 71%;
    font-family: Alan Sans, sans-serif;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    line-height: 1.15;
    margin: auto;
    color: #2da9a7;
}



.hero-subs_About {
    font-family: Nunito, sans-serif;
    font-size: 18px;
    text-align: center;
    color: #53537a;
    margin-top: 14px;
    margin-bottom: 28px;
    font-weight: 800;
    padding: 9px;
}

/* CTA BUTTON */
.hero-cta_About {
    text-align: center;
}

.hero-btn_About {
    padding: 14px 34px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    border: none;
    cursor: pointer;
    background: linear-gradient(120deg, #a57aff, #6d4bff);
    box-shadow: 0 18px 44px rgba(93, 66, 255, 0.56);
    margin-top: 30px;
}

.hero-note_About {
    margin-top: 8px;
    font-size: 12px;
    color: #8a8ab0;
}

/* FLOATINGS */
.floating_About {
    position: absolute;
    z-index: 3;
    left: 120px;
    top: 310px;
}

/* LEFT FLOAT */
.f-top-left_About {
    top: 65px;
    left: 60px;
}

.f-mid-left_About {
    top: 220px;
    left: 40px;
}

.f-bottom-left_About {
    bottom: 55px;
    left: 70px;
}

/* RIGHT FLOAT */
.f-top-right_About {
    top: 80px;
    right: 60px;
}

.f-mid-right_About {
    top: 240px;
    right: 40px;
}

.f-bottom-right_About {
    bottom: 55px;
    right: 70px;
}

/* FLOAT TAG SMALL */
.float-tag_About {
    background: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #e6e6f4;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
    display: flex;
    gap: 6px;
    align-items: center;
}

.float-tag-badge_About {
    width: 20px;
    height: 20px;
    border-radius: 8px;
    background: linear-gradient(135deg,#6b8bff,#c96bff);
}

/* FLOAT CARDS */
.float-card_About {
    background: #fff;
    padding: 15px;
    border-radius: 22px;
    border: 1px solid #ececf5;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    min-width: 220px;
}

    .float-card_About.small_About {
        min-width: 180px;
    }

/* VIDEO CLIP CARD */
.video-thumb_About {
    height: 120px;
    border-radius: 18px;
    background: linear-gradient(135deg, #141127, #ff4b9b);
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
}

.timeline_About {
    height: 5px;
    margin-top: 10px;
    background: #ececf3;
    border-radius: 999px;
    position: relative;
}

    .timeline_About:after {
        content: "";
        position: absolute;
        width: 45%;
        left: 0;
        top: 0;
        bottom: 0;
        background: linear-gradient(90deg, #ffb86c, #ff6bd5);
        border-radius: 999px;
    }

/* X CARD */
.x-card_About {
    background: #ffffff;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #e8e8f4;
    box-shadow: 0 18px 44px rgba(18, 16, 60, 0.14);
    min-width: 230px;
    position: absolute;
    top: 17PX;
    transform: rotate(14deg);
    left: -80px;
}

.x-header_About {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.x-profile_About {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6d4bff, #bb78ff);
}

.x-name_About {
    font-size: 13px;
    font-weight: 600;
}

.x-id_About {
    font-size: 10px;
    color: #9696b3;
    display: block;
}

.x-text_About {
    font-size: 12px;
    color: #535375;
    line-height: 1.45;
    margin-bottom: 10px;
}

.x-hash_About {
    color: #6d4bff;
    font-weight: 600;
}

.x-post-img_About {
    width: 100%;
    height: 118px;
    border-radius: 14px;
    background: url('https://picsum.photos/230') center/cover;
    margin-bottom: 10px;
}

.x-actions_About {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #6a6a89;
}

/* BASE ROTATION (soft tilt) */
.floating_About {
    transform: rotate(1.6deg);
}

/* LEFT SIDE slightly opposite */
.f-top-left_About,
.f-mid-left_About,
.f-bottom-left_About {
    transform: rotate(-1.4deg);
}

/* RIGHT SIDE tilt */
.f-top-right_About,
.f-mid-right_About,
.f-bottom-right_About {
    transform: rotate(1.8deg);
}

/* X Post card special tilt */
.f-left-x-post_About {
    transform: rotate(-2deg);
}

@keyframes floaty {
    0% {
        transform: translateY(0px) rotate(1deg);
    }

    50% {
        transform: translateY(-14px) rotate(2.2deg);
    }

    100% {
        transform: translateY(0px) rotate(1deg);
    }
}

@keyframes floaty2 {
    0% {
        transform: translateY(0px) rotate(-1deg);
    }

    50% {
        transform: translateY(14px) rotate(-2deg);
    }

    100% {
        transform: translateY(0px) rotate(-1deg);
    }
}

.social-center_About {
    margin-top: 100px;
    position: relative;
    width: 60%;
    height: 180px;
    margin-left: auto;
    margin-right: auto;
}

/* Shared styling from previous step */
.s-icon_About {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(18px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 18px rgba(118, 70, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.35s ease;
    border: 1px solid rgba(210, 210, 240, 0.65);
    position: absolute;
}

    .s-icon_About img {
        width: 28px;
        transition: 0.35s ease;
    }

    /* HOVER pop */
    .s-icon_About:hover {
        transform: translateY(-10px) scale(1.15) rotate(2deg);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18), 0 0 26px rgba(118, 70, 255, 0.55);
    }

        .s-icon_About:hover img {
            transform: scale(1.2);
        }

/* ⭐ Zig-Zag floating positions */
.i1_About {
    top: -9px;
    left: 141px;
}

.i2_About {
    top: 50px;
    left: 80%;
}

.i3_About {
    top: 145px;
    left: 321px;
}

.i4_About {
    top: 173px;
    left: 63%;
}

.i5_About {
    top: -50px;
    left: 50%;
}

/* ⭐ Gentle float animation */
@keyframes softFloat {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.s-icon_About {
    animation: softFloat 5s ease-in-out infinite;
}

.i2_About,
.i4_About {
    animation-delay: 0.8s;
}

.i3_About {
    animation-delay: 1.6s;
}

/* RIGHT SIDE TWITTER POST FLOAT ANIMATION */
.f-right-x-post_About {
    animation: floaty2 7s ease-in-out infinite;
    transform: rotate(2deg);
}

.y-card_About {
    background: #ffffff;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #e8e8f4;
    box-shadow: 0 18px 44px rgba(18, 16, 60, 0.14);
    min-width: 230px;
    position: relative;
    top: -20px;
    transform: rotate(-6deg);
    left: 1150px;
    margin-top: 80px;
}

.trust-block_About {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    text-align: center;
}

.trust-text_About {
    font-size: 18px;
    line-height: 1.7;
    color: #222;
    margin-bottom: 18px;
    text-align: justify;
    width: 480px;
    margin: auto;
}

.trust-emoji {
    font-size: 34px;
    margin: 10px 0 20px;
}

/* 📱 Mobile fine tuning */
@media (max-width: 768px) {
    .trust-text_About {
        font-size: 15px;
        width: 345px;
    }

    .trust-emoji {
        font-size: 28px;
    }
}



.avatar-row_About {
    display: flex;
    justify-content: center;
    align-items: center;
}

.t-ava_About {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
    margin-left: -10px;
    background-size: cover;
}

    .t-ava_About:first-child {
        margin-left: 0;
    }



/* 📱 RESPONSIVE: only 2 main posts show, all other floats hide */
@media (max-width: 1024px) {
    /* hide all extra side floats */
    .f-top-left_About, .f-mid-left_About, .f-bottom-left_About, .f-top-right_About, .f-mid-right_About, .f-bottom-right_About {
        display: none !important;
    }
    /* keep main posts visible + center */
    .main-post-left_About,
    .f-left-x-post_About {
        left: 50% !important;
        transform: translateX(-50%) scale(0.78) rotate(-1deg) !important;
        top: 360px !important;
    }

    .main-post-right_About,
    .f-right-x-post_About {
        left: 50% !important;
        transform: translateX(-50%) scale(0.78) rotate(2deg) !important;
        top: 640px !important;
    }

    .social-center_About {
        margin-top: 285px;
        margin-left: -60px;
    }

    .y-card_About {
        position: absolute;
        right: -220px;
        transform: rotate(6deg);
    }

    .x-card_About {
        position: absolute;
        top: 468px;
        transform: rotate(10deg);
        left: -57px;
    }

    .i3_About {
        left: 258px;
    }

    .i1_About {
        left: 218px;
    }

    .i2_About {
        left: 150px;
        top: 64px;
    }
}

@media(max-width:768px) {
    .jo-circle-box {
        display: none;
    }

    .view-all-btn {
        position: relative;
        top: -80px;
    }
}

.login-btn-theme {
    background-color: #4491c7;
    color: white;
    font-size: 18px;
    padding: 10px 15px;
    border-radius: 30px;
}

.di-wwgy {
    padding: 64px 16px;
    background: linear-gradient(135deg, #ffffff 0%, #fff8fb 50%, #f3f7ff 100%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.di-wwgy-wrapper {
    max-width: 1180px;
    margin: 0 auto;
}

.di-wwgy-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.verified-badge {
    width: 18px;
    height: 18px;
    background: #1d9bf0; /* Twitter blue */
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 0 0 2px #fff;
}

.di-eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--di-blue);
    font-weight: 600;
}

.di-wwgy-head h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--di-text-dark);
}

.di-outline-btn {
    border-radius: 999px;
    padding: 8px 18px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

    .di-outline-btn:hover {
        background: #f5f5f5;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    }

/* main card */

.di-wwgy-card {
    background: radial-gradient(circle at top left, rgba(0, 177, 168, 0.18), transparent 55%), radial-gradient(circle at top right, rgba(58, 134, 255, 0.18), transparent 55%), #ffffff;
    border-radius: 26px;
    padding: 22px 22px 26px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 79, 163, 0.12);
}

/* toggle row */

.di-toggle-row {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 28px rgba(0,)
}

.live-heart--phone {
    bottom: -10px; /* thodu niche thi start – need hoy to -20px pan kari sake */
}

.Script_Code {
}

.Script_Section {
    height: 60px;
    width: 60px;
    background-color: red;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999; /* VIP access 😎 */
    border-radius: 8px; /* optional */
    cursor: pointer;
}

.ns-container {
    background: #d6eeff;
    position: relative;
    width: 100vw;
    height: 110vh;
    overflow: hidden;
}
/* HERO SECTION */
/* HERO SECTION */
.hero {
    /* margin-top: 200px; */
    background: #fbfbfb;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* Image + Circle Stats */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-wrap {
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--blue), var(--teal));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px;
}

/* Stats */
.stat {
    position: absolute;
    background: #fff;
    border-radius: 20px;
    padding: 8px 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

    .stat h3 {
        margin: 0;
        font-weight: 800;
        color: var(--blue);
        font-size: 1.2rem;
    }

    .stat p {
        margin: 0;
        font-size: 0.72rem;
        font-weight: 600;
        color: #555;
    }

/* Position Stats */
.stat1 {
    top: -10px;
    left: -10px;
}

.stat2 {
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--pink);
    color: #fff;
}

    .stat2 h3, .stat2 p {
        color: #fff;
    }

.stat3 {
    bottom: -12px;
    left: 20%;
}


/* Responsive */
@media (max-width: 992px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-visual {
        order: -1;
    }

        .hero-visual .inlu-pht img {
            width: 177%;
            height: 394px;
        }
}

@media (max-width: 640px) {
    .circle-wrap {
        width: 260px;
        height: 260px;
    }

    .hero-person {
        width: 210px;
    }

    .stat {
        padding: 6px 10px;
    }
}

.hero-person {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    /* optional: thodu depth mate */
    /* filter: drop-shadow(0 18px 40px rgba(15, 23, 42, 0.35)); */
}

/* ===== VIDEO BACKGROUND ===== */
.video-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

    .video-bg video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.video-overlay {
    position: absolute;
    inset: 0;
    /* left side thodu bright, right side thodu dark for text */
    background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 40%, transparent 70%), linear-gradient(to right, rgba(255, 255, 255, 0.35), rgba(15, 23, 42, 0.75));
}

/* HERO CONTENT */
/* HERO CONTENT – proper glass panel */
.hero-content {
    position: relative;
    z-index: 5;
    max-width: 720px;
    /* margin-inline: auto; */
    margin-right: auto;
    /* 👈 pushes to right */
    text-align: center;
    /* 👈 text also right aligned */
    color: #111827;
    /* dark text for readability */
    padding: 2.2rem 2.6rem;
    /* glass background */
}

    /* light reflection on glass */
    .hero-content::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0.40), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.18));
        opacity: 0.55;
        mix-blend-mode: screen;
        pointer-events: none;
    }



.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.875rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    margin-bottom: 1rem;
}

    .tag-pill span.hash {
        color: var(--pink);
    }

    .tag-pill span.text {
        background: linear-gradient(90deg, var(--teal), var(--orange), var(--blue));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.hero-title {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.9rem;
}

.hero-title,
.logo-text-2 span {
    font-family: "Alan Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

    .hero-title span.accent1 {
        color: var(--orange);
    }

    .hero-title span.accent2 {
        color: #4491c6;
    }

.hero-sub {
    font-size: 20px;
    max-width: 480px;
    margin: 0 auto 1.7rem;
    color: #000000;
    font-weight: 700;
}

    .hero-sub strong {
        color: var(--teal);
    }

.cta-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
}

    .cta-group:hover a {
        color: white;
    }

.btn-main {
    border-radius: 999px;
    padding: 0.75rem 1.8rem;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

    .btn-main span {
        position: relative;
        z-index: 2;
    }

    .btn-main::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), transparent, rgba(255, 255, 255, 0.1));
        transform: translateX(-100%);
        transition: transform 0.4s ease;
    }

    .btn-main:hover::before {
        transform: translateX(100%);
    }

    .btn-main:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 16px 35px rgba(15, 23, 42, 0.4);
    }

.btn-creator {
    background: #f46f28;
    color: #ffffff;
}

.btn-brand {
    background: #2da9a7;
    color: #ffffff;
}

.btn-main:active {
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.35);
}

.micro-copy {
    font-weight: 600;
    margin-top: 1rem;
    font-size: 0.78rem;
    color: #000000;
}

    .micro-copy span {
        color: var(--pink);
        font-weight: 600;
    }

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero {
        padding-top: 5.5rem;
    }

    .hero-content {
        padding: 1.4rem 1.5rem;
        border-radius: 20px;
        margin-top: 36px;
    }

    .hero-sub {
        font-size: 0.9rem;
    }
}

.photo-registred {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 18px;
    margin-left:15px;
}

.not-registered {
    width: 45px;
    height: 45px;
    object-fit: cover;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

@media (max-width: 576px) {
    .nav-bar {
        padding-inline: 1rem;
    }

    .brand-logo img {
        height: 26px;
    }

    .tag-pill {
        font-size: 0.7rem;
    }

    .cta-group {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-main {
        width: 100%;
        justify-content: center;
    }

    .hero-title {
        font-size: 1.9rem;
    }
}

.glass-phones {
    position: absolute;
    /* image na bottom par thodu overlap */
    bottom: 50%;
    left: 1%;
    height: 271px;
    width: 239px;
    background: linear-gradient( 120deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15) );
    backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
    z-index: 3; /* 👉 image karta upar aavse */
}

    .glass-phones img {
        height: 297px;
        width: 240px;
        /* height: auto; */
        /* max-width: auto; */
        border-radius: 20px;
    }

@media (max-width: 768px) {
    .glass-phones {
        /* bottom: 19%; */
        left: 35%;
        transform: translateX(-50%);
        width: 209px;
        height: 292px;
        top: 42%;
    }

    .jo-circle-box .circle-3 {
        left: 58%;
    }

    .jo-circle-box .circle-4 {
        left: 65%;
    }

    .jo-circle-box .circle-2 {
        left: 32%;
    }
}

.in-glass-icon {
    position: absolute;
    bottom: 82%;
    left: 69%;
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
    z-index: 3;
}

/* icon */
.in-glass-icon__icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at 30% 30%, #fdf497, #fd5949, #d6249f, #285AEB);
}

    .in-glass-icon__icon img {
        width: 60%;
        height: 60%;
        object-fit: contain;
    }

/* text */
.in-glass-icon__text {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #000; /* jet black */
}

/* mobile adjust */
@media (max-width: 768px) {
    .in-glass-icon {
        bottom: 88%;
        left: 66%;
        transform: translateX(-50%);
        padding: 7px 16px;
    }

    .in-glass-icon__text {
        font-size: 13px;
    }
}

.in-glass-H {
    position: absolute;
    overflow: hidden;
    bottom: 21%;
    left: 51%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 7px 21px;
    min-width: 183px;
    max-width: 236px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3);
    z-index: 5;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* LIVE HEARTS – Instagram style */
.live-heart-stream {
    position: absolute;
    inset: 0;
    pointer-events: none; /* click / hover block na kare */
}

.live-heart {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    opacity: 0;
    animation: floatHeart 2.4s ease-out forwards;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}

    /* multiple shades like insta */
    .live-heart:nth-child(3n) {
        color: #ff4b8b;
    }

    .live-heart:nth-child(3n+1) {
        color: #ff7a30;
    }

    .live-heart:nth-child(3n+2) {
        color: #ff2e63;
    }

@keyframes floatHeart {
    0% {
        transform: translateX(-50%) translateY(0) scale(0.7);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translateX(calc(-50% + var(--x-move, 0px))) translateY(-130px) scale(1.4);
        opacity: 0;
    }
}

/* header */
.tweet-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tweet-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.tweet-user {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.tweet-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tweet-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.tweet-badge {
    font-size: 11px;
    background: #1d9bf0;
    color: #fff;
    border-radius: 999px;
    padding: 1px 5px;
}

.tweet-handle {
    font-size: 12px;
    color: #64748b;
}

/* X logo right side */
.tweet-x-logo {
    margin-left: auto;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

/* text */
.tweet-text {
    font-size: 13px;
    color: #111827;
    margin: 2px 0 0;
}

    .tweet-text span {
        color: #1d9bf0;
        font-weight: 600;
    }

/* actions */
.tweet-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}

/* mobile position adjust */
@media (max-width: 768px) {
    .in-glass-H {
        left: 62%;
        transform: translateX(-50%);
        bottom: -21%;
        min-width: 230px;
        max-width: 250px;
        padding: 10px 14px;
    }
}

.logo-text-2 {
    font-weight: 700;
    font-size: inherit;
    letter-spacing: 0.5px;
}



.digii-section {
    background: #ffeef0;
}

.digii-title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.btn-digii-outline {
    border-radius: 999px;
    padding: 8px 22px;
    font-weight: 600;
    border: 1px solid #111827;
    background: #fff;
    font-size: 14px;
}

    .btn-digii-outline:hover {
        background: #111827;
        color: #fff;
    }

.digii-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: 22px;
    padding: 22px 24px;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
}



.digii-subtitle {
    font-size: 22px;
    font-weight: 700;
}

    .digii-subtitle span {
        color: #f97316;
    }

.digii-lead {
    font-size: 14px;
    color: #4b5563;
}

.digii-list {
    margin-top: 10px;
    padding-left: 18px;
    list-style: none;
}

    .digii-list li {
        position: relative;
        padding-left: 18px;
        margin-bottom: 6px;
        font-size: 14px;
        color: #111827;
    }

        .digii-list li::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: linear-gradient(135deg, #037ef3, #ff4b8b);
            position: absolute;
            left: 0;
            top: 7px;
        }

.digii-image-wrap {
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(3, 126, 243, 0.18), rgba(255, 75, 139, 0.12));
    padding: 6px;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
    .digii-title {
        font-size: 24px;
    }

    .digii-card {
        padding: 18px;
    }
}
/* Influencer Categories */
.influencer-categories {
    background: #f5f7fa;
}

.card.c1 {
    width: var(--card-size);
    height: var(--card-size);
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 10px;
    text-align: center;
    transition: .3s ease;
    position: relative;
    margin: auto;
}

    .card.c1:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-strong);
    }

.icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.icon-glyph img.icon-img {
    width: 165px;
    height: 100%;
    object-fit: contain;
    display: block;
    margin-top: 70px;
}

@keyframes floatUp {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.card.c1:hover .icon-glyph {
    animation: floatUp 1s ease-in-out infinite;
}

.title-btn {
    margin-top: 85px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    background: #ffffff;
    border: 2px solid #e3e3e3;
    border-radius: 30px;
    transition: all .35s ease;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    color: #333;
}

    .title-btn:hover {
        background: #4491c5;
        border-color: #4491c5;
        color: white;
        transform: translateY(-4px);
        box-shadow: 0 8px 18px rgba(76, 143, 255, 0.4);
    }

/* MOBILE - FIX (2 per row only) */
@media (max-width: 576px) {

    .card.c1 {
        width: 165px;
        height: 150px;
        padding-top: 6px;
        margin-top: 10px;
    }

    .icon-circle {
        width: 60px;
        height: 60px;
    }

    .icon-glyph img.icon-img {
        width: 110px;
        margin-top: 60px; /* 🔥 was 45px */
        height:100px;
    }

    .title-btn {
        margin-top: 65px; /* 🔥 was 55px */
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Platform */
.toran-wrapper {
    position: relative;
    width: 100%;
    padding-top: 180px;
    overflow: hidden;
    padding-bottom: 100px;
}

.card-box:hover {
    animation: hoverSwing 0.9s ease-in-out infinite;
}

.tap-swing {
    animation: hoverSwing 0.9s ease-in-out;
}

.toran-line {
    position: absolute;
    top: -40px;
    left: 50%;
    width: 100%;
    height: 180px;
    border-bottom: 3px solid #b7b7b7;
    border-radius: 0 0 60% 60%;
    transform: translateX(-50%);
    z-index: 0;
}

/* MAIN SLIDER */
.cards-slider {
    display: flex;
    gap: 30px;
    width: max-content;
    padding-left: 5%;
    position: relative;
    will-change: transform;
}

/* MAIN Card styling */
.card-box {
    width: 220px;
    background: white;
    border-radius: 20px;
    padding: 65px 15px 15px;
    transform-origin: top center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

    /* Tilt ALWAYS – laptop + tablet + mobile */
    .card-box:nth-child(odd) {
        margin-top: -35px;
        transform: rotate(1deg);
    }

    .card-box:nth-child(even) {
        margin-top: -25px;
        transform: rotate(1deg);
    }

    /* Image */
    .card-box img {
        width: 100%;
        height: 140px;
        border-radius: 12px;
        object-fit: cover;
    }

/* Clip */
.clip {
    width: 34px;
    height: 44px;
    background: #4491c5;
    border-radius: 8px;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 3px 6px rgba(0,0,0,0.22);
}

    .clip::after {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: white;
        position: absolute;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
    }

/* Hover swing effect (MOBILE + LAPTOP both) */
.card-box:hover {
    animation: hoverSwing 0.9s ease-in-out infinite;
}

@keyframes hoverSwing {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-3deg);
    }

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

.view-all-btn {
    background: transparent;
    border: 2px solid #000;
    padding: 6px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: .3s ease;
}

    .view-all-btn:hover {
        background: #000;
        color: #fff;
    }
/* ===================== RESPONSIVE ===================== */

/* Tablet view → 2.2 cards visible */
@media (max-width: 768px) {
    .card-box {
        width: 45vw;
        padding: 55px 12px 15px;
    }

    .cards-slider {
        gap: 22px;
    }
}

/* Mobile view → EXACTLY 2 cards + tilt same + hover same */
@media (max-width: 600px) {
    .card-box {
        width: 48vw !important; /* 2 cards fit exactly */
        margin-top: 0 !important;
    }
        /* KEEP tilt on mobile also */
        .card-box:nth-child(odd) {
            transform: rotate(-3deg) !important;
        }

        .card-box:nth-child(even) {
            transform: rotate(3deg) !important;
        }

    .cards-slider {
        gap: 15px !important;
    }

    .toran-line {
        top: -15px !important;
    }
}

/* Very small phones */
@media (max-width: 430px) {
    .card-box {
        width: 50vw !important;
    }

    .cards-slider {
        gap: 12px !important;
    }

    .card-box:nth-child(odd),
    .card-box:nth-child(even) {
        transform: rotate(-2deg) !important;
    }
}

.platform_title {
    padding-top: 45px;
    font-size: 40px;
    font-weight: 700;
    color: #4390c6;
    text-transform: uppercase;
    background: #000;
    -webkit-background-clip: text;
    font-family: Alan Sans, sans-serif;
}

.platform-heading {
    text-align: center;
    margin-bottom: 30px;
}
/* Services */
.cs-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.cs-heading {
    text-align: center;
    margin-bottom: 30px;
}
/* CARD BOX */
.cs-box {
    position: relative;
    background: #ffffff;
    padding: 25px;
    border-radius: 22px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    margin-top: 30px;
    transition: 0.35s ease;
    cursor: pointer;
}

    /* TILT EFFECT */
    .cs-box:nth-child(odd) {
        transform: rotate(-3deg);
    }

    .cs-box:nth-child(even) {
        transform: rotate(3deg);
    }

    /* HOVER EFFECT */
    .cs-box:hover {
        transform: translateY(-10px) scale(1.03) rotate(0deg);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 20px 40px rgba(0, 0, 0, 0.12);
    }

/* INNER COLOR BOX */
.inner {
    padding: 18px;
    border-radius: 16px;
    margin-top: 18px;
    text-align: left;
}

/* BACKGROUND COLORS */
.c1 {
    background: rgba(173, 255, 190, .35);
}

.c2 {
    background: rgba(255, 196, 220, .40);
}

.c9 {
    background: rgba(255, 160, 160, .40);
}

.c4 {
    background: rgba(255, 200, 150, .40);
}

.c5 {
    background: rgba(255, 233, 168, .40);
}

.c6 {
    background: rgba(187, 215, 255, .40);
}

.c7 {
    background: rgba(235, 210, 255, .40);
}

.c8 {
    background: rgba(171, 255, 240, .40);
}

/* NUMBER STYLE */
.cs-number {
    font-size: 34px;
    font-weight: 600;
    color: #0a7c41;
    letter-spacing: -1px;
    margin-bottom: 10px;
    line-height: 1;
}

/* NUMBER COLOR MATCHING */
.c1 .cs-number {
    color: #0a7c41;
}

.c2 .cs-number {
    color: #d81b60;
}

.c9 .cs-number {
    color: #d00000;
}

.c4 .cs-number {
    color: #e65100;
}

.c5 .cs-number {
    color: #b57f00;
}

.c6 .cs-number {
    color: #1a3dbf;
}

.c7 .cs-number {
    color: #7b1fa2;
}

.c8 .cs-number {
    color: #0077b6;
}

/* HEADINGS */
.inner h3 {
    font-size: 20px;
    font-weight: 800;
    color: #000;
    margin-bottom: 6px;
}

/* PARAGRAPH */
.inner p {
    font-size: 14px;
    font-weight: 300;
    color: #555;
    line-height: 1.6;
    margin-top: 6px;
}

/* PIN ICON */
.pin-svg {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
}

    .pin-svg img {
        width: 45px;
        height: 46px;
        transform: rotate(40deg);
        filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.28));
    }

/* ---------------------------
                       RESPONSIVE DESIGN
                    ---------------------------- */

/* Tablet */
@media (max-width: 992px) {
    .cs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pin-svg img {
        width: 40px;
        height: 41px;
        transform: rotate(35deg);
        margin-top: 7px;
    }

    .cs-box {
        padding: 22px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .cs-grid {
        grid-template-columns: 1fr;
    }

    .cs-box {
        padding: 20px;
        margin-top: 22px;
    }

    .pin-svg {
        top: -28px;
    }

        .pin-svg img {
            width: 46px;
            height: 46px;
            transform: rotate(32deg);
        }

    .inner {
        padding: 15px;
    }

    .cs-number {
        font-size: 22px;
    }
}


.cheatsheet {
    text-align: center;
    margin-bottom: 30px;
}

.services_title {
    margin-top: 50px;
    font-size: 40px;
    font-weight: 700;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: #2da9a7;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-family: Alan Sans, sans-serif;
}
/* Brand Card */
.give-title {
    font-family: "Alan Sans", sans-serif;
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    color: #e65682;
    letter-spacing: 1px;
}

.brand-card-wrapper {
    max-width: 1200px;
}

/* single card container (for each left / right card) */
.brand-card-outer {
    position: relative;
    width: 360px;
    max-width: 100%;
    margin: 40px auto;
}

/* blue rotated shadow behind card */
.brand-shadow-card {
    position: absolute;
    top: 20px;
    right: -34px;
    width: 100%;
    height: 400px;
    background: #0076af;
    border-radius: 26px;
    transform: rotate(6deg);
    z-index: 0;
}

.brand-shadow-cards {
    position: absolute;
    top: 30px;
    right: -34px;
    width: 100%;
    height: 81%;
    background: #ffffff;
    border-radius: 26px;
    transform: rotate(6deg);
    z-index: 0;
}
/* WHITE CARD */
.brand-card {
    position: relative;
    background: #ffffff;
    border-radius: 26px;
    padding: 38px 28px 38px 48px;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

.brand-cards {
    position: relative;
    background: #0076af;
    border-radius: 26px;
    padding: 38px 28px 38px 48px;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18);
    z-index: 2;
    color: white;
    /* color:white; */
}
/* TOP TITLE / YEAR */
.brand-title-top {
    font-family: Nunito, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #0076af;
}

.brand-title-tops {
    font-family: Nunito, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    letter-spacing: 2px;
}

.brand-title-year {
    font-family: Nunito, sans-serif;
    font-size: 2.7rem;
    font-weight: 800;
    color: #0076af;
}

.brand-title-years {
    font-family: Nunito, sans-serif;
    font-size: 2.7rem;
    font-weight: 800;
    color: white;
}
/* STAR IMAGE */
.brand-top-img {
    position: absolute;
    top: -70px;
    right: 54px;
    width: 92px;
    height: 92px;
    z-index: 10;
}

    .brand-top-img img {
        width: 145px;
        height: 145px;
        object-fit: contain;
        transform: rotate(4deg);
        filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.23));
        transition: 0.45s ease;
    }

        .brand-top-img img:hover {
            transform: rotate(4deg) scale(1.15);
            filter: drop-shadow(0 0 22px rgba(255, 230, 140, 0.8));
        }

/* LIST + CHECKBOX */
.brand-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.brand-lists {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .brand-lists li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid #868686;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        color: white;
    }

.brand-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #868686;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #0076af;
}

    .brand-list li:last-child {
        border-bottom: none;
    }

.brand-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid #00a78d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.25s ease;
}

    .brand-checkbox.active {
        background: #00cfb4;
        border-color: #00b3a0;
        box-shadow: 0 4px 12px rgba(0, 200, 180, 0.4);
    }

    .brand-checkbox::after {
        content: "✔";
        font-size: 14px;
        color: white;
        opacity: 0;
        transform: scale(0.4);
        transition: 0.22s ease-out;
    }

    .brand-checkbox.active::after {
        opacity: 1;
        transform: scale(1);
    }

/* RESPONSIVE – cards center on mobile */
@media (max-width: 768px) {
    .brand-card-outer {
        margin: 30px auto;
    }
}

@media (max-width: 576px) {
    .brand-shadow-card, .brand-shadow-cards {
        right: 8px;
    }
}
/* CTA Section */
.choose-who {
    text-align: center;
    padding: 100px 10px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}


    .choose-who::before {
        content: "";
        position: absolute;
        top: -40px;
        left: -50px;
        width: 120%;
        height: 200px;
        background: #0d70b7; /* Updated Blue Patti */
        transform: skewY(-6deg);
        z-index: -1;
    }


/* TITLE */
.choose-title {
    font-size: 3rem;
    font-family: Alan Sans, sans-serif;
    font-weight: 700;
    color: #0d70b7;
    margin-bottom: 10px;
    text-transform: capitalize;
}

/* SUBTEXT */
.choose-subtitle {
    font-size: 1.1rem;
    color: #5c768a;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 55px;
}

/* BUTTONS ROW */
/* BUTTONS ROW */
.choose-options {
    display: flex;
    justify-content: space-between;
    max-width: 900px; /* thodi width ochhi kari */
    margin: auto;
    width: 100%;
    padding: 0 10px;
    gap: 20px; /* gap vadhu ochhu */
}

    .choose-options a:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 16px 35px rgba(15, 23, 42, 0.4);
        color: white;
    }

/* COMMON BUTTON STYLE */
/* BIGGER BUTTONS */
.choose-card {
    width: 420px; /* 380 → 420 */
    padding: 28px 35px; /* more height */
    border-radius: 55px;
    font-size: 30px; /* text vadhyu */
    gap: 14px;
    color: white;
    font-weight: bold;
}
    /* ICON bigger */
    .choose-card i {
        font-size: 26px;
    }

/* Bigger main heading space adjust */
.choose-title {
    margin-bottom: 6px;
}

.choose-subtitle {
    margin-bottom: 45px;
}
/* LEFT BLUE BUTTON */
.choose-card.influencer {
    background: #f46f28;
}

/* RIGHT GREEN BUTTON */
.choose-card.brand {
    background: #00b3a0;
}


/* MOBILE RESPONSIVE */
@media (max-width: 900px) {
    .choose-options {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .choose-card {
        width: 90%;
        font-size: 1.15rem;
    }

    .choose-title {
        font-size: 2.4rem;
    }
}

:root {
    /* --ttRed: #FF0000; */
    --ttRed: #098abd;
    --ttLightRed: #F2EEEA;
    --ttGray: #B5B5B5;
    --ttGray2: #808080;
    --black: #000;
    --white: #fff;
    --tt-pink: #F820A3;
    --tt-gold: #098abd;
    --tt-gradient-2: linear-gradient(90deg, #f80b6af2 0%, #04d0ee 100%);
    /* --tt-gradient-1:linear-gradient(to right top, #10c8e9, #00b8ff, #67a0ff, #b37eef, #e74fba, #e74fba, #e74fba, #e74fba, #b37eef, #67a0ff, #00b8ff, #10c8e9); */
    --tt-gradient-1: linear-gradient(to right top, #2a74b3, #0088bd, #009bc1, #0aadc1, #44bebe);
    --font-inter: "Inter", sans-serif;
    --plyr-color-main: var(--ttRed);
    --card-size: 200px;
    --shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    --shadow-strong: 0 15px 40px rgba(0, 0, 0, 0.15);
    --teal: #00a7a3;
    --orange: #ff7a30;
    --pink: #ff4f81;
    --blue: #2b80ff;
    --dark: #111827;
    --card-size: 200px;
    --icon-size: 90px;
    --shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    --shadow-strong: 0 15px 40px rgba(0, 0, 0, 0.15);
    --di-teal: #00b1a8;
    --di-orange: #ff7a30;
    --di-pink: #ff4fa3;
    --di-blue: #3a86ff;
    --di-bg-soft: #fff6fd;
    --di-text-dark: #121212;
    --sidebar-width: 250px;
    --brand-gradient: linear-gradient(90deg, #ff6b6b, #ffa53e, #3cd4a0, #4d7cfe);
    --faq-dark: #191A23;
    --faq-bg: #F3F3F3;
    --faq-teal: #2DA9A7;
    --faq-orange: #F56F28;
    --faq-pink: #E85582;
    --faq-blue: #4491C7;
    --faq-shadow: 0px 0.3125rem 0px 0px var(--faq-dark);
    --faq-radius: 2.8rem;
}

.Footer_Bg {
    background-color: #115688;
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-inter);
    margin: auto;
}

ul {
    list-style: none inside;
    padding: 0;
    margin: 0;
}

a,
button,
img,
svg path {
    transition: 0.4s ease;
}

a {
    text-decoration: none !important;
    vertical-align: top;
}

button {
    background-color: transparent;
    border: none;
}

.jo-header img {
    max-width: 200px;
}

i {
    line-height: 1;
}

p {
    line-height: 1.75;
}

[data-sal] {
    transition-duration: 1s;
    transition-delay: 0.2s;
}

@media screen and (max-width: 479px) {
    .col-xxs-12 {
        width: 100%;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1434px;
    }
}

@media screen and (max-width: 575px) {
    .row-cols-xs-1 > * {
        width: 100%;
    }
}

@media screen and (max-width: 479px) {
    .row-cols-xxs-1 > * {
        width: 100%;
    }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

input[type=radio]:checked + span::after {
    opacity: 1;
}



.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

    .preloader .loader {
        width: 150px;
        aspect-ratio: 1.154;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        display: grid;
        background: conic-gradient(from 0deg at 50% 60%, #0219A6 120deg, rgba(0, 0, 0, 0) 0), conic-gradient(from 120deg at 50% 60%, #0219A6 120deg, rgba(0, 0, 0, 0) 0), conic-gradient(from 240deg at 50% 60%, #0219A6 120deg, rgba(0, 0, 0, 0) 0), conic-gradient(from 0deg at 50% 60%, #E5002A 120deg, rgba(0, 0, 0, 0) 0), conic-gradient(from 120deg at 50% 60%, #E5002A 120deg, rgba(0, 0, 0, 0) 0), conic-gradient(from 240deg at 50% 60%, #E5002A 120deg, rgba(0, 0, 0, 0) 0), #0219A6;
        background-size: 200% 200%;
        background-repeat: no-repeat;
        animation: l8 1.5s infinite;
    }

@keyframes l8 {
    0% {
        background-position: left, top, right;
    }

    30%, 50% {
        background-position: left, top, right, center, center, center;
    }

    80%, 100% {
        background-position: center;
    }
}

.tt-container {
    display: flex;
}

.tt-container__left {
    width: 300px;
    height: 100vh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
}

@media screen and (max-width: 1199px) {
    .tt-container__left {
        width: 270px;
    }
}

.tt-container__right {
    width: calc(100% - 300px);
    padding: 30px;
    flex-grow: 1;
    overflow: hidden;
}

@media screen and (max-width: 1199px) {
    .tt-container__right {
        padding: 20px;
    }
}

.tt-section-heading {
    color: var(--ttRed);
    margin-bottom: 22px;
}

.tt-section-heading__btn {
    background: rgba(255, 0, 0, 0.1);
    border-radius: 99px;
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: var(--ttRed);
    flex-shrink: 0;
}

    .tt-section-heading__btn:hover {
        background-color: var(--ttRed);
        color: var(--white);
    }

.tt-section-title {
    color: var(--black);
    font-weight: 700;
    font-size: 15px;
}

.sa-single-accordion-item {
    transition: 0.4s ease;
}

    .sa-single-accordion-item.open .sa-single-accordion-item__header i {
        transform: rotate(90deg);
    }

    .sa-single-accordion-item.open .sa-single-accordion-item__body {
        grid-template-rows: 1fr;
        padding-top: 9px;
    }

.sa-single-accordion-item__header i {
    transition: transform 0.4s ease;
    display: inline-block;
    color: #000;
}

.sa-single-accordion-item__title {
    color: #000;
}

.sa-single-accordion-item__body {
    transition: all 0.4s ease;
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
}

    .sa-single-accordion-item__body > * {
        overflow: hidden;
    }

.tt-slider-nav {
    background-color: var(--white);
    border-radius: 999px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    top: 44%;
    transform: translateY(-50%);
    right: 0;
    color: var(--ttRed);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

    .tt-slider-nav:hover {
        background-color: rgb(255, 0, 0);
        color: var(--white);
    }

.tt-inner-page-banner {
    border-radius: 20px;
    position: relative;
    z-index: 1;
    background: no-repeat center center;
    background-size: cover;
    color: var(--white);
    padding: clamp(60px, 10.73vw, 206px) 15px;
    text-align: center;
    overflow: hidden;
}

    .tt-inner-page-banner::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.7);
    }

.tt-inner-page-title {
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 0;
}

@media screen and (max-width: 479px) {
    .tt-inner-page-title {
        font-size: 30px;
    }
}

.tt-inner-page-inner-title {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 15px;
    margin-top: 50px;
}

@media screen and (max-width: 575px) {
    .tt-inner-page-inner-title {
        margin-top: 30px;
    }
}

.jo-container {
    margin: 0 13.281vw;
}

@media screen and (max-width: 1599px) {
    .jo-container {
        margin: 0 10.281vw;
    }
}

@media screen and (max-width: 1399px) {
    .jo-container {
        margin: 0 7.281vw;
    }
}

@media screen and (max-width: 1199px) {
    .jo-container {
        margin: 0 3.281vw;
    }
}

@media screen and (max-width: 991px) {
    .jo-container {
        margin: 0 15px;
    }
}

.jo-sidebar {
    position: fixed;
    z-index: 10;
    right: 0;
    height: 100%;
    overflow: auto;
    background: #fff;
    z-index: 999;
    transform: translateX(100%);
    transition: 0.4s ease;
    padding: 40px 15px;
    padding-top: 15px;
    max-width: 100%;
    border-left: 1px solid var(--ttRed);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media screen and (max-width: 479px) {
    .jo-sidebar {
        padding: 30px 15px;
        padding-top: 15px;
        width: 77%;
        top: 0;
    }
}

.jo-sidebar.active {
    transform: translateX(0);
}

.jo-sidebar__heading {
    gap: 30px;
    padding-bottom: 15px;
}

.jo-sidebar .logo {
    max-width: 65%;
}

.jo-sidebar-close-btn {
    transform: rotate(45deg);
}

.jo-sidebar .jo-header-nav-in-mobile nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .jo-sidebar .jo-header-nav-in-mobile nav a {
        color: var(--black);
        padding: 12px 15px;
    }





    .jo-sidebar .jo-header-nav-in-mobile nav .has-sub-menu .jo-header-submenu li {
        border: none;
        padding-bottom: 6px;
    }

    .jo-sidebar .jo-header-nav-in-mobile nav .has-sub-menu .jo-header-submenu a {
        padding: 0 15px;
    }

@media screen and (max-width: 991px) {
    .jo-sidebar .jo-header-nav-in-mobile nav > * {
        border-top: 1px solid rgba(0, 0, 0, 0.2);
    }

        .jo-sidebar .jo-header-nav-in-mobile nav > *:last-child {
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        }
}

.jo-sidebar-socials.tt-footer-top__socials {
    margin-top: 15px;
    justify-content: flex-start;
    gap: 10px;
}

    .jo-sidebar-socials.tt-footer-top__socials a {
        border-color: rgba(0, 0, 0, 0.2);
        color: var(--ttRed);
        width: 35px;
        font-size: 18px;
    }

.jo-sidebar .jo-btn {
    width: 100%;
    margin-top: 15px;
}

    .jo-sidebar .jo-btn i {
        font-size: 10px;
        padding-right: 5px;
    }

.jo-header-nav-in-mobile {
    margin: 0 -15px;
}

@media screen and (max-width: 479px) {
    .jo-header-nav-in-mobile {
        margin: 0 -15px;
    }
}

.jo-section-title {
    font-weight: 700;
    font-size: 40px;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #e75581;
    font-family: Alan Sans, sans-serif;
    text-transform: uppercase;
}

.jo-btn {
    background: var(--tt-gradient-1);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    height: 42px;
    gap: 3px;
    border-radius: 6px;
    color: var(--white);
    position: relative;
    z-index: 1;
    transition: all 0.4s;
    transition-timing-function: cubic-bezier(0.5, 3, 0, 1);
}

    .jo-btn::before {
        position: absolute;
        content: "";
        inset: 0;
        border-radius: 6px;
        z-index: -1;
        /* background: linear-gradient(90deg, var(--tt-gold) 0%, var(--tt-pink) 100%); */
        /* background: linear-gradient(90deg, #04d0ee 0%, #f80b6af2  100%); */
        /* background-image: linear-gradient(to right top, #ec1e76, #da50b6, #af79e5, #7099fe, #16b1ff, #16b1ff, #16b1ff, #16b1ff, #7099fe, #af79e5, #da50b6, #ec1e76); */
        background-image: linear-gradient(to right top, #44bebe, #0aadc1, #009bc1, #0088bd, #2a74b3);
        transition: 0.4s ease;
    }

    .jo-btn:hover {
        color: var(--white);
    }

        .jo-btn:hover::before {
            opacity: 0;
        }

.jo-breadcrumb {
    padding: 14.323vw 0 11.458vw;
    background: url(../img/breadcrumb-bg.jpg) no-repeat center center;
    background-size: cover;
    text-align: center;
    position: relative;
    z-index: 1;
    color: var(--white);
    overflow: hidden;
    object-fit: cover;
}

.jo-breadcrumb1 {
    padding: 10.323vw 0 11.458vw;
    /* background: url(../img/registration.png) no-repeat center center; */
    background: var(--tt-gradient-2);
    background-size: cover;
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

@media screen and (max-width: 1199px) {
    .jo-breadcrumb {
        padding: 140px 0 100px;
    }
}

@media screen and (max-width: 479px) {
    .jo-breadcrumb {
        padding: 130px 0 80px;
    }
}

.jo-breadcrumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--tt-pink), var(--tt-gold));
    z-index: -1;
    opacity: 80%;
}
/* 
.jo-breadcrumb1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--tt-pink), var(--tt-gold));
  z-index: -1;
  opacity: 80%;
} */
.jo-breadcrumb-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .jo-breadcrumb-nav a {
        color: var(--white);
    }

        .jo-breadcrumb-nav a:hover {
            color: var(--black);
        }

.jo-page-title {
    color: var(--white);
    margin-bottom: 3px;
}

.jo-breadcrumb1 .jo-page-title {
    position: relative;
    font-size: 35px !important;
}

    .jo-breadcrumb1 .jo-page-title::before {
        content: '';
        position: absolute;
        width: 20%;
        height: 3px;
        bottom: -10px;
        left: 40%;
        background-color: var(--white);
    }

.jo-radio label {
    position: relative;
    display: inline-block;
}

    .jo-radio label > span {
        padding-left: 30px;
        display: inline-block;
    }

        .jo-radio label > span::before,
        .jo-radio label > span::after {
            content: "";
            position: absolute;
            width: 20px;
            aspect-ratio: 1/1;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .jo-radio label > span::after {
            width: 8px;
            aspect-ratio: 1/1;
            background-color: var(--ttRed);
            border: none;
            left: 6px;
            opacity: 0;
        }

.jo-radio input[type=radio]:checked + span::after {
    opacity: 1;
}

.jo-select-wrapper {
    height: 100%;
}

.jo-tab {
    transition: 0.2s ease;
    pointer-events: none;
    display: none;
}

    .jo-tab.active {
        display: block;
        pointer-events: all;
    }

.tt-channel-content-pagination > button {
    color: var(--ttRed);
    height: 20px;
}

.tt-channel-content-pagination .pages {
    display: flex;
    gap: 11px;
    overflow: auto;
}

    .tt-channel-content-pagination .pages a {
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1/1;
        background-color: rgba(158, 158, 158, 0.102);
        font-weight: 700;
        font-size: 16px;
        color: var(--black);
        border-radius: 50%;
        flex-shrink: 0;
    }

@media screen and (max-width: 479px) {
    .tt-channel-content-pagination .pages a {
        width: 32px;
    }
}

.tt-channel-content-pagination .pages a:hover,
.tt-channel-content-pagination .pages a.active {
    background-color: var(--ttRed);
    color: var(--white);
}

.jo-inner-faq {
    padding: 4.583vw 0 5.208vw;
}

@media screen and (max-width: 991px) {
    .jo-inner-faq {
        padding: 38px 0 50px;
    }
}

.tt-accordion {
    margin: 2.448vw 12.5vw 0;
}

@media screen and (max-width: 1199px) {
    .tt-accordion {
        margin: 25px 12.5vw 0;
    }
}

@media screen and (max-width: 991px) {
    .tt-accordion {
        margin: 25px 15px 0;
    }
}

@media screen and (max-width: 479px) {
    .tt-accordion {
        margin: 25px 0 0;
    }
}

.tt-accordion .sa-single-accordion-item {
    padding: 30px 20px;
    border-radius: 10px;
    background-color: #f4f4f4;
}

    .tt-accordion .sa-single-accordion-item:not(:last-child) {
        margin-bottom: 20px;
    }

.tt-accordion .sa-single-accordion-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .tt-accordion .sa-single-accordion-item__header .left {
        display: flex;
        gap: 20px;
        align-items: center;
    }

        .tt-accordion .sa-single-accordion-item__header .left > * {
            margin-bottom: 0;
        }

        .tt-accordion .sa-single-accordion-item__header .left h5 {
            font-weight: bold;
            font-size: 20px;
        }

@media screen and (max-width: 991px) {
    .tt-accordion .sa-single-accordion-item__header .left h5 {
        font-size: 18px;
    }
}

.tt-accordion .sa-single-accordion-item__header .left .order-num {
    color: var(--ttRed);
}

.tt-accordion .sa-single-accordion-item__title {
    margin-bottom: 0;
    transition: 0.4s ease;
}

.tt-accordion .sa-single-accordion-item__body {
    padding-left: 40px;
}

    .tt-accordion .sa-single-accordion-item__body p {
        margin-bottom: 0;
        color: var(--white);
        font-weight: 600;
    }

.tt-accordion .sa-single-accordion-item.open {
    background-color: var(--ttRed);
    color: var(--white);
}

    .tt-accordion .sa-single-accordion-item.open .sa-single-accordion-item__header .order-num {
        color: var(--white);
    }

    .tt-accordion .sa-single-accordion-item.open .sa-single-accordion-item__title {
        color: var(--white);
    }

    .tt-accordion .sa-single-accordion-item.open .sa-single-accordion-item__header i {
        color: var(--white);
    }

    .tt-accordion .sa-single-accordion-item.open .sa-single-accordion-item__body {
        padding-top: 20px;
    }

.jo-circle-box > * {
    position: absolute;
    width: 50px;
    height: 50px;
    opacity: 80%;
    transform-origin: left;
}

.jo-circle-box .circle-1 {
    left: 15%;
    top: 65%;
    animation: services-triangle 6s linear infinite alternate;
}

.jo-circle-box .circle-2 {
    left: 50%;
    top: 6%;
    animation: services-triangle 8s linear infinite alternate;
}

.jo-circle-box .circle-3 {
    left: 93%;
    top: 70%;
    animation: services-triangle 10s linear infinite alternate;
}

.jo-circle-box .circle-4 {
    left: 90%;
    top: 32%;
    animation: services-triangle 9s linear infinite alternate;
}

.jo-circle-box .circle-5 {
    left: 10%;
    top: 10%;
    animation: services-triangle 6s linear infinite alternate;
}

.jo-circle-box .circle-6 {
    left: 10%;
    top: 92%;
    animation: services-triangle 8s linear infinite alternate;
}

.jo-circle-box .circle-7 {
    left: 70%;
    top: 94%;
    animation: services-triangle 10s linear infinite alternate;
}

.jo-circle-box .circle-8 {
    left: 90%;
    top: 15%;
    animation: services-triangle 9s linear infinite alternate;
}

@keyframes services-triangle {
    0% {
        -webkit-transform: rotate(0deg) translateX(-50px);
        -moz-transform: rotate(0deg) translateX(-50px);
        -ms-transform: rotate(0deg) translateX(-50px);
        transform: rotate(0deg) translateX(-50px);
    }

    100% {
        -webkit-transform: rotate(360deg) translateY(100px);
        -moz-transform: rotate(360deg) translateY(100px);
        -ms-transform: rotate(360deg) translateY(100px);
        transform: rotate(360deg) translateY(100px);
    }
}

.tt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    margin-bottom: 30px;
}

@media screen and (max-width: 1199px) {
    .tt-header {
        gap: 20px;
    }
}

@media screen and (max-width: 575px) {
    .tt-header {
        margin-bottom: 20px;
    }
}

.tt-header button {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .tt-header button i {
        font-size: 16px;
    }

    .tt-header button:hover {
        color: var(--ttRed);
    }

@media screen and (max-width: 767px) {
    .tt-header__search-wrapper {
        position: fixed !important;
        width: auto !important;
        left: 20px;
        right: 20px;
        z-index: 22;
    }
}

.tt-header__search {
    background-color: var(--white);
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 100px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 55px;
}

@media screen and (max-width: 767px) {
    .tt-header__search {
        position: fixed;
        z-index: 99;
        width: auto;
        top: 60px;
        left: 10px;
        right: 10px;
        height: 50px;
        box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.1);
        transform: translateY(-10%);
        opacity: 0;
        pointer-events: none;
        transition: 0.2s ease;
    }

        .tt-header__search.active {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
}

.tt-header__search input {
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
}

.tt-header__search button {
    font-size: 18px;
    color: var(--ttRed);
}

    .tt-header__search button:hover {
        color: var(--black);
    }

.tt-header-search-suggestion {
    background-color: var(--white);
    position: absolute;
    z-index: 22;
    box-shadow: 0px 4px 64px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 12px 20px;
    width: 100%;
    top: calc(100% + 10px);
    display: none;
}

    .tt-header-search-suggestion.active {
        display: block;
    }

@media screen and (max-width: 767px) {
    .tt-header-search-suggestion {
        top: 90px;
    }
}

.tt-header-search-suggestion a {
    display: block;
    color: var(--black);
    padding: 6px 0;
}

    .tt-header-search-suggestion a:hover {
        color: var(--ttRed);
    }

.tt-header__right {
    flex-shrink: 0;
    display: flex;
    gap: 20px;
}

@media screen and (max-width: 1199px) {
    .tt-header__right {
        gap: 15px;
    }
}

.tt-header__right button {
    border: 1px solid rgba(181, 181, 181, 0.25);
    height: 40px;
    padding: 0 15px;
    border-radius: 99px;
}

@media screen and (max-width: 1199px) {
    .tt-header__right button {
        padding: 0 11px;
    }
}

.tt-mobile-nav {
    position: fixed;
    bottom: 0;
    z-index: 99;
    left: 0;
    right: 0;
    background-color: var(--white);
    display: none;
    padding: 21px 20px 15px;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    box-shadow: 0px 4px 70px rgba(0, 0, 0, 0.1);
    border-radius: 20px 20px 0px 0px;
}

@media screen and (max-width: 767px) {
    .tt-mobile-nav {
        display: flex;
    }
}

.tt-mobile-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: var(--black);
    font-size: 14px;
}

    .tt-mobile-nav a:hover,
    .tt-mobile-nav a.active {
        color: var(--ttRed);
    }

    .tt-mobile-nav a i {
        font-size: 16px;
    }

.jo-header {
    position: fixed;
    z-index: 99;
    padding: 5px 20px;
    /* background: rgba(255, 255, 255, 0.5); */
    background-color: rgb(255 255 255 / 77%);
    backdrop-filter: blur(75px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
    height: 85px;
    width: 92%;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 0 0 20px 20px;
}



@media screen and (max-width: 991px) {
    .jo-header {
        padding: 15px 13px;
    }
}





.jo-header-right {
    display: flex;
    align-items: center;
    margin-right: 45px;
    margin-bottom: 13px;
}





@media screen and (max-width: 479px) {
    .jo-header-right .jo-btn {
        font-size: 14px;
        padding: 0 10px;
        height: 38px;
        position: absolute;
        right: 20px;
        bottom: 20px;
    }

    .main_logo {
        width: 160px;
    }
}

@media (max-width: 991px) {
    .jo-header nav .jo-btn {
        border-radius: 12px;
        font-weight: 600;
    }
}

.jo-header-right .jo-btn.jo-header-sidebar-open-btn {
    padding-top: 3px;
    background-color: #4390c6;
}



    .jo-header-right .jo-btn.jo-header-sidebar-open-btn i {
        font-size: 18px;
        padding-right: 0;
    }

@media screen and (max-width: 479px) {
    .jo-header-right .jo-btn.jo-header-sidebar-open-btn i {
        font-size: 16px;
    }
}



.jo-header-nav nav {
    font-weight: 500;
    display: flex;
    gap: 2.604vw;
}

@media screen and (max-width: 1399px) {
    .jo-header-nav nav {
        gap: 30px;
    }
}

@media screen and (max-width: 1199px) {
    .jo-header-nav nav {
        gap: 20px;
    }
}

@media screen and (max-width: 991px) {
    .jo-header-nav nav {
        display: none;
    }
}

.jo-header-nav nav a {
    color: var(--black) !important;
    font-size: 18px;
    height: clamp(70px, 3.89vw, 74px);
    display: grid;
    align-items: center;
}

    .jo-header-nav nav a:not([href]):hover,
    .jo-header-nav nav a:hover {
        color: var(--tt-pink);
    }

.jo-header-submenu {
    position: absolute;
    min-width: 200px;
    background-color: var(--white);
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.03);
    top: 100%;
    left: 0;
    opacity: 0;
    transition: 0.4s ease, pointer-events 0s;
    transform: translateY(-5px);
    pointer-events: none;
    width: max-content;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

    .jo-header-submenu li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

        .jo-header-submenu li:last-child {
            border-bottom: 0;
        }

        .jo-header-submenu li a {
            height: auto;
            padding: 8px 15px;
            display: inline-block;
            width: 100%;
        }

@media screen and (max-width: 991px) {
    .jo-header-submenu li a {
        padding: 4px 10px;
    }
}

@media screen and (max-width: 991px) {
    .jo-header-submenu {
        position: static;
        transform: translateY(0);
        opacity: 1;
        width: 100%;
        overflow: hidden;
        box-shadow: none;
    }
}

.has-sub-menu {
    position: relative;
    display: grid;
    grid-template-rows: max-content 0fr;
    transition: 0.4s ease;
}

    .has-sub-menu > a {
        position: relative;
    }

@media screen and (max-width: 991px) {

    .has-sub-menu > a::before,
    .has-sub-menu > a::after {
        content: "";
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 1px;
        background-color: var(--tt-pink);
    }

    .has-sub-menu > a::after {
        transform: rotate(90deg) translateX(-5%);
        transition: 0.4s ease;
    }
}

@media screen and (max-width: 991px) {
    .has-sub-menu.active {
        grid-template-rows: max-content 1fr;
    }
}

.has-sub-menu.active > a::after {
    transform: rotate(0deg);
}

.has-sub-menu.active .jo-header-submenu {
    margin-bottom: 5px;
    pointer-events: all;
}

.has-sub-menu:hover .jo-header-submenu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.jo-inner-header {
    background-color: var(--white);
}

.jo-banner {
    /* background: url(../img/banner-2-bg.jpg) no-repeat center center; */
    background-size: cover;
    padding: 8.125vw 0 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-image: linear-gradient(to right top, #34a19c, #299da3, #2598a9, #2a93ad, #368eaf, #3995b7, #3c9cbf, #3fa3c7, #3ab9d7, #3bcfe3, #48e5ec, #5ffbf1);
}

@media screen and (max-width: 1599px) {
    .jo-banner {
        padding: 126px 0 0;
    }
}

@media screen and (max-width: 1199px) {
    .jo-banner {
        padding: 106px 0 0;
    }
}

.jo-banner .vector {
    position: absolute;
    bottom: 115px;
    right: 0;
}

.jo-banner-container {
    margin: 0 7.031vw;
}

@media screen and (max-width: 1599px) {
    .jo-banner-container {
        margin: 0 75px;
    }
}

@media screen and (max-width: 1199px) {
    .jo-banner-container {
        margin: 0 45px;
    }
}

@media screen and (max-width: 479px) {
    .jo-banner-container {
        margin: 0 15px;
    }
}

.jo-banner__txt {
    position: relative;
}

    .jo-banner__txt .vector {
        /* bottom: -65px;
  right: 370px; */
        bottom: -9px;
        right: 268px;
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count: infinite;
    }

@keyframes example {
    0% {
        bottom: -9px;
    }

    50% {
        bottom: 0px;
    }

    100% {
        bottom: 10px;
    }
}

.jo-banner__title {
    margin-top: 25px;
    font-size: clamp(34px, 5.73vw, 110px);
    font-weight: 700;
    color: var(--white);
    line-height: 1.05;
    margin-bottom: 30px;
}

    .jo-banner__title > span:first-child {
        display: block;
    }

    .jo-banner__title span.styled {
        position: relative;
        z-index: 1;
    }

        .jo-banner__title span.styled::before,
        .jo-banner__title span.styled::after {
            position: absolute;
            content: "";
            inset: 0;
            top: -30px;
            z-index: -1;
            background: url(../img/banner-txt-vector-1.svg) no-repeat center center;
            background-size: 100% 100%;
            animation: move;
        }

        .jo-banner__title span.styled::after {
            background-image: url(../img/banner-txt-vector-2.svg);
            z-index: 1;
            inset: -10px;
            left: -8px;
            top: -30px;
        }

.jo-banner__notifi {
    background-color: var(--white);
    border-radius: 999px;
    padding: 5px 8px;
    max-width: 160px;
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
    font-size: 14px;
    color: var(--ttGray2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

    .jo-banner__notifi > img {
        width: 40px;
        aspect-ratio: 1/1;
        display: inline-block;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }

    .jo-banner__notifi .icon {
        position: absolute;
        top: 0;
        right: 10px;
        transform: translateY(-40%);
        border-radius: 999px;
        box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);
    }

        .jo-banner__notifi .icon img {
            width: 30px;
        }

.jo-banner__btns {
    display: flex;
    gap: 20px;
}

    .jo-banner__btns > *:last-child {
        background: none;
    }

        .jo-banner__btns > *:last-child:hover {
            background: var(--tt-pink);
        }

        .jo-banner__btns > *:last-child::before {
            border: 1px solid transparent;
            background: linear-gradient(90deg, var(--tt-pink), var(--white)) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
        }

@media screen and (max-width: 991px) {
    .jo-banner__img {
        text-align: center;
    }
}

.jo-banner__img > img {
    max-width: 33.854vw;
}

@media screen and (max-width: 991px) {
    .jo-banner__img > img {
        max-width: 60%;
        margin: auto;
    }
}

.jo-banner__img::before,
.jo-banner__img::after {
    transform: translateX(-50%) !important;
    pointer-events: none;
}

.jo-banner__img .jo-banner__notifi {
    position: absolute;
    top: 70%;
    left: 0;
    text-align: left;
}

.jo-banner__followers {
    background: url(../img/banner-follower-count.svg) no-repeat center center;
    background-size: contain;
    text-align: center;
    font-size: 14px;
    padding: 28px 32px;
    position: absolute;
    right: 0;
    top: 30%;
}

@media screen and (max-width: 479px) {
    .jo-banner__followers {
        padding: 18px 22px;
    }

    .jo-banner__title span.styled::after {
        left: -7px;
        top: -14px;
        inset: -4px;
    }

    .jo-banner__title span.styled::before {
        top: -8px;
    }
}

.jo-banner__followers .number {
    font-weight: 700;
    font-size: 26px;
    color: var(--ttRed);
    display: block;
    margin-bottom: 0;
    line-height: 1;
}

@media screen and (max-width: 479px) {
    .jo-banner__followers .number {
        font-size: 22px;
    }
}

.jo-social-links {
    padding: 100px 0 50px;
}

@media screen and (max-width: 1399px) {
    .jo-social-links {
        padding: 70px 0 20px;
    }
}

@media screen and (max-width: 767px) {
    .jo-social-links {
        padding: 50px 0 10px;
    }
}

@media screen and (min-width: 1400px) {
    .jo-social-links .container {
        max-width: 1417px;
    }
}

@media (min-width: 576px) {
    .jo-social-links .row {
        --bs-gutter-x: 1.25vw;
    }
}

@media screen and (max-width: 1399px) {
    .jo-social-links .row {
        --bs-gutter-x: 15px;
        --bs-gutter-y: 15px;
    }
}

.jo-social-link {
    background-color: var(--white);
    box-shadow: 0 4px 70px rgba(255, 0, 0, 0.1);
    border-radius: 10px;
    padding: 1.563vw 1.042vw;
    display: flex;
    gap: 0.781vw;
    align-items: center;
}

@media screen and (max-width: 1399px) {
    .jo-social-link {
        padding: 15px;
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media screen and (max-width: 479px) {
    .jo-social-link {
        gap: 10px;
    }
}

.jo-social-link .icon {
    max-width: clamp(40px, 2.604vw, 50px);
    flex-shrink: 0;
}

.jo-social-link .txt {
    flex-grow: 1;
}

    .jo-social-link .txt h5 {
        font-weight: 600;
        font-size: clamp(18px, 1.042vw, 20px);
        margin-bottom: 0.156vw;
    }

    .jo-social-link .txt span {
        font-weight: 400;
        font-size: clamp(12px, 0.729vw, 14px);
        color: var(--ttGray2);
    }

.jo-social-link .jo-btn {
    padding: 0 8px;
    font-size: 13px;
    height: 29px;
    flex-shrink: 0;
}

.jo-reels {
    padding: 50px 0;
}

@media screen and (max-width: 991px) {
    .jo-reels {
        padding: 50px 0 0;
    }
}

@media screen and (max-width: 767px) {
    .jo-reels {
        padding: 40px 0 0;
    }
}

.jo-reels-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;
    gap: 8px;
}

@media screen and (max-width: 479px) {
    .jo-reels-heading {
        margin-bottom: 10px;
    }
}

.jo-reels-heading button {
    flex-shrink: 0;
    background-color: rgba(255, 0, 0, 0.1);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    color: var(--ttRed);
    transition: 0.4s ease;
}

    .jo-reels-heading button i {
        padding-top: 2px;
    }

    .jo-reels-heading button:hover {
        color: var(--white);
        background-color: var(--ttRed);
    }

.jo-reels-container {
    max-width: 1920px;
    margin: auto;
    padding: 0px 3.91vw;
}

@media screen and (max-width: 991px) {
    .jo-reel .plyr {
        min-width: 0;
    }
}

.jo-reel .plyr__poster {
    background-color: transparent;
}

.jo-reel-video {
    margin-bottom: 16px;
    border-radius: 20px;
    overflow: hidden;
}

    .jo-reel-video video {
        max-width: 100%;
        height: 25.63vw;
        max-height: 492px;
        width: 100%;
        object-fit: cover;
        background: #ddd;
        vertical-align: top;
    }

@media screen and (max-width: 767px) {
    .jo-reel-video video {
        height: 42.63vw;
    }
}

@media screen and (max-width: 575px) {
    .jo-reel-video video {
        height: 66.63vw;
    }
}

@media screen and (max-width: 479px) {
    .jo-reel-video video {
        height: 138.73vw;
    }
}

.jo-reel .link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
}

.jo-reel-title a {
    font-weight: 700;
    font-size: 1.042vw;
    color: var(--black);
}

@media screen and (max-width: 1399px) {
    .jo-reel-title a {
        font-size: 16px;
    }
}

.jo-reel-title a:hover {
    color: var(--tt-pink);
}

.jo-reel-info {
    color: var(--ttGray2);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.platform-tag,
.jo-reel .link {
    background-color: var(--white);
    padding: 10px 15px;
    width: max-content;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--black);
}

    .platform-tag img,
    .jo-reel .link img {
        width: 16px;
    }

.jo-services {
    padding: 2.604vw 0;
}

@media screen and (max-width: 991px) {
    .jo-services {
        padding: 40px 0;
    }
}

@media (min-width: 1400px) {
    .jo-services .container {
        max-width: 1417px;
    }
}

.jo-services-wrapper {
    padding: 2.604vw;
    background-color: #FFF1F1;
    border-radius: 20px;
}

@media screen and (max-width: 1399px) {
    .jo-services-wrapper {
        padding: 30px;
    }
}

@media screen and (max-width: 991px) {
    .jo-services-wrapper {
        padding: 20px;
    }
}

@media screen and (max-width: 479px) {
    .jo-services-wrapper {
        padding: 15px;
    }
}

.jo-services-wrapper .heading {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 26px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

@media screen and (max-width: 479px) {
    .jo-services-wrapper .heading {
        margin-bottom: 20px;
        padding-bottom: 21px;
    }
}

.jo-services-tabs-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1.563vw;
}

@media screen and (max-width: 991px) {
    .jo-services-tabs-wrapper {
        flex-direction: column;
    }
}

@media screen and (max-width: 479px) {
    .jo-services-tabs-wrapper {
        gap: 20px;
    }
}

.jo-services-tab-navs {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 0.781vw, 15px);
    flex-shrink: 0;
}

@media screen and (max-width: 991px) {
    .jo-services-tab-navs {
        width: 100%;
        text-align: center;
    }
}

.jo-services-tab-navs .tab-nav {
    background-color: var(--white);
    border-radius: 10px;
    height: 3.906vw;
    min-width: 19.271vw;
    text-align: left;
    padding: 0 1.042vw;
    font-weight: 600;
    font-size: 1.042vw;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 1399px) {
    .jo-services-tab-navs .tab-nav {
        min-width: 0;
        font-size: 16px;
        height: 55px;
    }
}

@media screen and (max-width: 991px) {
    .jo-services-tab-navs .tab-nav {
        font-size: 14px;
        height: 45px;
        padding: 0 15px;
        text-align: center;
    }
}

.jo-services-tab-navs .tab-nav::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px;
    /* background: linear-gradient(90deg, #04d0ee 0%, #e90bf8 100%); */
    background: var(--tt-gradient-1);
    z-index: -1;
    opacity: 0;
    transition: 0.4s ease;
}

.jo-services-tab-navs .tab-nav.active {
    color: var(--white);
}

    .jo-services-tab-navs .tab-nav.active::before {
        opacity: 1;
    }

.tt-tab {
    overflow: hidden;
    opacity: 0;
    height: 0;
    pointer-events: none;
    transition: 0.4s ease;
}

    .tt-tab.active {
        opacity: 1;
        height: auto;
        pointer-events: auto;
    }

.tt-service-tab {
    display: flex;
    gap: 1.563vw;
    background-color: var(--white);
    padding: 1.563vw;
    border-radius: 10px;
}

@media screen and (max-width: 1199px) {
    .tt-service-tab {
        flex-direction: column;
        gap: 20px;
    }
}

@media screen and (max-width: 767px) {
    .tt-service-tab {
        padding: 20px;
    }
}

@media screen and (max-width: 479px) {
    .tt-service-tab {
        padding: 15px;
    }
}

.tt-service-tab .img {
    max-width: 21.302vw;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
}

@media screen and (max-width: 1399px) {
    .tt-service-tab .img {
        max-width: 350px;
    }
}

.tt-service-tab .title {
    font-size: clamp(17px, 1.042vw, 20px);
    font-weight: 700;
    color: var(--black);
    margin-bottom: 0.365vw;
}

@media screen and (max-width: 991px) {
    .tt-service-tab .title {
        margin-bottom: 12px;
    }
}

.tt-service-tab .descr {
    font-weight: 400;
    font-size: clamp(13px, 0.833vw, 16px);
    line-height: 1.65;
    color: var(--ttGray2);
    margin-bottom: 0.885vw;
}

@media screen and (max-width: 991px) {
    .tt-service-tab .descr {
        margin-bottom: 15px;
    }
}

.tt-service-tab .list {
    font-size: clamp(13px, 0.833vw, 16px);
    list-style: disc inside;
    padding-left: 10px;
    margin-bottom: 0;
}

    .tt-service-tab .list li:not(:last-child) {
        margin-bottom: 0.521vw;
    }

.jo-intro-lives-wrapper {
    background: url(../img/intro-live-bg.png) var(--black) no-repeat center center;
    background-size: cover;
    padding: 50px 0;
}

.jo-intro {
    overflow: hidden;
    position: relative;
    padding: 50px 0;
}

@media screen and (max-width: 1399px) {
    .jo-intro {
        padding: 20px 0 50px;
    }
}

.jo-intro__txt {
    color: var(--white);
}

    .jo-intro__txt .jo-section-title {
        color: var(--white);
        margin-bottom: 22px;
    }

    .jo-intro__txt .jo-btn::after {
        content: "";
        position: absolute;
        inset: 1px;
        background-color: var(--black);
        z-index: -1;
        border-radius: 6px;
        transition: 0.4s ease;
    }

    .jo-intro__txt .jo-btn:hover::after {
        opacity: 0;
    }

.jo-intro__descr {
    margin-bottom: 33px;
    font-size: clamp(13px, 0.833vw, 16px);
}

.jo-intro__list {
    padding: 0;
    margin: 0;
    margin-bottom: 50px;
}

    .jo-intro__list li {
        position: relative;
        padding-left: 35px;
        list-style: none;
        font-weight: 600;
        font-size: clamp(13px, 0.833vw, 16px);
    }

        .jo-intro__list li:not(:last-child) {
            margin-bottom: 18px;
        }

        .jo-intro__list li::before {
            position: absolute;
            content: "";
            left: 0;
            top: 1px;
            width: 20px;
            height: 20px;
            background: url(../img/checkmark-badge.svg) no-repeat center center;
            background-size: 100% 100%;
        }

.jo-intro__img {
    display: flex;
    justify-content: flex-start;
    margin-left: 34px;
    position: relative;
}

@media screen and (max-width: 479px) {
    .jo-intro__img {
        margin-left: 0;
    }
}

.jo-intro__img .play-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 56px;
    width: 114px;
    aspect-ratio: 1/1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    color: var(--ttRed);
    border-radius: 99px;
    font-size: 26px;
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.5);
    animation: btn-shadow-anim 2.5s linear infinite forwards;
}

@media screen and (max-width: 767px) {
    .jo-intro__img .play-btn {
        left: 26px;
        width: 84px;
    }
}

@media screen and (max-width: 479px) {
    .jo-intro__img .play-btn {
        left: 10px;
        width: 70px;
        font-size: 20px;
    }
}

.jo-intro__img .play-btn:hover {
    background-color: var(--ttRed);
    color: var(--white);
}

.jo-intro__img img {
    max-width: none;
    max-height: 34.371vw;
    border-radius: 999px 0 0 999px;
}

.jo-intro__vector {
    position: absolute;
    top: 27px;
    left: -427px;
    animation: spin 5.5s linear infinite forwards;
}

@media screen and (max-width: 1799px) {
    .jo-intro__vector {
        left: -497px;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes btn-shadow-anim {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
}

.jo-upcoming-lives {
    color: var(--white);
    padding: 50px 0;
}

@media screen and (max-width: 1399px) {
    .jo-upcoming-lives {
        padding: 20px 0;
    }
}

.jo-upcoming-lives__heading {
    text-align: center;
    border: solid rgba(255, 255, 255, 0.2);
    border-width: 1px 0 1px 0;
    color: var(--white);
    padding: 40px 0 30px;
    margin-bottom: 50px;
}

@media screen and (max-width: 1399px) {
    .jo-upcoming-lives__heading {
        padding: 30px 0 20px;
    }
}

.jo-upcoming-lives__heading .jo-section-title {
    color: var(--white);
}

.jo-upcoming-live {
    display: flex;
    align-items: center;
    gap: 2.604vw;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 1.563vw;
}

@media screen and (max-width: 1399px) {
    .jo-upcoming-live {
        gap: 30px;
    }
}

@media screen and (max-width: 1199px) {
    .jo-upcoming-live {
        align-items: flex-start;
    }
}

@media screen and (max-width: 991px) {
    .jo-upcoming-live {
        flex-direction: column;
    }
}

@media screen and (max-width: 767px) {
    .jo-upcoming-live {
        padding: 15px;
    }
}

.jo-upcoming-live:not(:last-child) {
    margin-bottom: 30px;
}

.jo-upcoming-live__img {
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
    max-width: 26.458vw;
}

@media screen and (max-width: 1399px) {
    .jo-upcoming-live__img {
        max-width: 478px;
    }
}

@media screen and (max-width: 1199px) {
    .jo-upcoming-live__img {
        max-width: 418px;
    }
}

.jo-upcoming-live__txt .platform-tag {
    margin-bottom: 1.302vw;
}

.jo-upcoming-live__txt .title {
    font-weight: 700;
    font-size: 20px, 1.25vw, 24px;
}

.jo-upcoming-live__txt .date {
    font-size: clamp(12px, 0.729vw, 14px);
    font-weight: 500;
    padding-bottom: 1.302vw;
    display: inline-block;
}

@media screen and (max-width: 479px) {
    .jo-upcoming-live__txt .date {
        padding-bottom: 15px;
    }
}

.jo-upcoming-live__txt .descr {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1.042vw;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.667vw;
    font-size: clamp(13px, 0.833vw, 16px);
}

@media screen and (max-width: 479px) {
    .jo-upcoming-live__txt .descr {
        padding-top: 15px;
        margin-bottom: 20px;
    }
}

.jo-videos {
    padding: 100px 0;
}

@media screen and (max-width: 1399px) {
    .jo-videos {
        padding: 70px 0;
    }
}

.jo-videos__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 45px;
    flex-wrap: wrap;
    gap: 8px;
}

    .jo-videos__heading .jo-section-title {
        margin-bottom: 0;
    }

    .jo-videos__heading .jo-videos__btn {
        color: var(--ttRed);
    }

        .jo-videos__heading .jo-videos__btn i {
            padding-top: 4px;
            padding-right: 4px;
        }

        .jo-videos__heading .jo-videos__btn:hover {
            color: var(--white);
        }

            .jo-videos__heading .jo-videos__btn:hover::after {
                opacity: 0;
            }

        .jo-videos__heading .jo-videos__btn::after {
            position: absolute;
            inset: 1px;
            content: "";
            z-index: -1;
            background-color: var(--white);
            border-radius: 5px;
            transition: 0.4s ease;
        }

.jo-videos-slider {
    margin-bottom: 30px;
}

.jo-video-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    z-index: 1;
    max-width: 35.94vw;
    min-width: 30vw;
}

@media screen and (max-width: 991px) {
    .jo-video-card {
        max-width: 350px;
    }
}

@media screen and (max-width: 479px) {
    .jo-video-card {
        max-width: 315px;
    }
}

.jo-video-card:hover::before {
    opacity: 1;
}

.jo-video-card:hover .bottom {
    transform: translateY(0);
}

.jo-video-card::before {
    position: absolute;
    content: "";
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(248, 11, 106, 0.51), #04d0ee);
    opacity: 0;
    transition: 0.4s ease;
}

.jo-video-card__img {
    width: 100%;
    object-fit: contain;
    background-color: #f5f5f5;
}

.jo-video-card__txt {
    position: absolute;
    inset: 40px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

@media screen and (max-width: 1399px) {
    .jo-video-card__txt {
        inset: 30px;
    }
}

@media screen and (max-width: 1199px) {
    .jo-video-card__txt {
        inset: 20px;
    }
}

@media screen and (max-width: 479px) {
    .jo-video-card__txt {
        inset: 15px;
    }
}

.jo-video-card__btn {
    border: 1px solid var(--white);
    border-radius: 50%;
    width: 50px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding-top: 1px;
    color: var(--white);
}

    .jo-video-card__btn:hover {
        background-color: var(--white);
        color: var(--tt-pink);
    }

.jo-video-card__premium-tag {
    width: 50px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background-color: var(--ttRed);
    border-radius: 50%;
    padding-top: 1px;
}

.jo-video-card .bottom {
    transform: translateY(calc(100% - 27px));
    transition: 0.4s ease;
}

.jo-video-card .price {
    display: inline-block;
    background: var(--white);
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    padding: 3.5px 10px;
    color: var(--ttRed);
    margin-bottom: 10px;
}

.jo-video-card__title {
    font-weight: 700;
    font-size: clamp(21px, 1.26vw, 24px);
    line-height: 29px;
    color: var(--white);
    margin-bottom: 4px;
    display: inline-block;
}

    .jo-video-card__title:hover {
        color: var(--black);
    }

.jo-video-card__infos {
    color: var(--white);
    font-weight: 300;
}

    .jo-video-card__infos > *:not(:last-child) {
        border-right: 1px solid var(--white);
        padding-right: 10px;
        margin-right: 5px;
    }

.jo-contact {
    overflow: hidden;
}

    .jo-contact .top {
        padding-top: 100px;
        background: url(../img/contact-bg.jpg) no-repeat center center;
        background-size: cover;
    }

@media screen and (max-width: 1399px) {
    .jo-contact .top {
        padding-top: 70px;
    }
}

@media screen and (max-width: 991px) {
    .jo-contact .top {
        padding: 70px 0;
    }
}

.jo-contact__img {
    position: relative;
    z-index: 1;
}

    .jo-contact__img::before,
    .jo-contact__img::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: -50px;
        left: 50%;
        transform: translateX(-42%);
        width: 594px;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.5);
        animation: scale 3s infinite linear;
    }

    .jo-contact__img::after {
        width: 510px;
        height: 510px;
        top: -7px;
        transform: translateX(-40.8%);
    }

.jo-contact-form-wrapper {
    border-radius: 20px;
    background-color: var(--white);
    padding: 2.083vw;
    box-shadow: 0px 4px 70px rgba(255, 0, 0, 0.1);
    margin-bottom: -225px;
}

@media screen and (max-width: 1199px) {
    .jo-contact-form-wrapper {
        padding: 30px;
    }
}

@media screen and (max-width: 991px) {
    .jo-contact-form-wrapper {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 479px) {
    .jo-contact-form-wrapper {
        padding: 20px;
    }
}

.jo-contact-form-wrapper > .icon {
    display: inline-block;
    margin-bottom: 0.781vw;
}

.jo-contact-form-wrapper .jo-section-title {
    margin-bottom: 0.781vw;
}

@media screen and (max-width: 1399px) {
    .jo-contact-form-wrapper .jo-section-title {
        margin-bottom: 10px;
    }
}

.jo-contact-form-wrapper p {
    margin-bottom: 1.563vw;
}

@media screen and (max-width: 1399px) {
    .jo-contact-form-wrapper p {
        margin-bottom: 12px;
    }
}

.jo-contact-form > *:not(:last-child) {
    margin-bottom: 1.458vw;
}

@media screen and (max-width: 1399px) {
    .jo-contact-form > *:not(:last-child) {
        margin-bottom: 15px;
    }
}

.jo-contact-form label {
    display: block;
    width: max-content;
    max-width: 100%;
    font-weight: 600;
    color: var(--black);
    font-size: clamp(13px, 0.833vw, 16px);
    margin-bottom: 0.885vw;
}

.jo-contact-form input,
.jo-contact-form textarea {
    border: 1px solid rgba(0, 0, 0, 0.15);
    height: clamp(56px, 3.385vw, 65px);
    width: 100%;
    padding: 0 1.302vw;
    font-size: clamp(13px, 0.833vw, 16px);
    font-weight: 500;
    color: var(--black);
    border-radius: 10px;
    background-color: rgba(245, 245, 245, 0.5);
}

@media screen and (max-width: 479px) {

    .jo-contact-form input,
    .jo-contact-form textarea {
        padding: 0 15px;
        height: 45px;
    }
}

.jo-contact-form textarea {
    height: clamp(120px, 7.187vw, 138px);
    padding: 0.781vw 1.302vw;
}

@media screen and (max-width: 1399px) {
    .jo-contact-form textarea {
        padding: 15px;
    }
}

.jo-contact-form textarea:focus {
    outline: none;
}

.jo-contact .jo-btn {
    font-size: clamp(13px, 0.833vw, 16px);
}

.jo-contact .bottom {
    background-color: #FFF1F1;
    height: 300px;
}

@media screen and (max-width: 1399px) {
    .jo-contact .bottom {
        padding-bottom: 70px;
    }
}

@media screen and (max-width: 767px) {
    .jo-contact .bottom {
        padding-bottom: 50px;
        display: none;
    }
}

.jo-contact .bottom .blank-space {
    pointer-events: none;
}

@keyframes scale {
    0% {
        scale: 1;
        opacity: 1;
    }

    100% {
        scale: 1.1;
        opacity: 0;
    }
}

.jo-partners-title {
    font-weight: 600;
    font-size: 24px;
    color: var(--black);
    text-align: center;
    margin-bottom: 40px;
    margin-top: 45px;
}

.jo-partners-slider-pagination {
    text-align: center;
    margin-top: 55px;
}

    .jo-partners-slider-pagination .swiper-pagination-bullet-active {
        background-color: var(--ttRed);
    }

.jo-articles {
    padding: 100px 0;
}

@media screen and (max-width: 1399px) {
    .jo-articles {
        padding: 70px 0;
    }
}

.jo-articles .jo-section-title {
    margin-bottom: 30px;
}

.jo-article {
    border: 1px solid #e5e5e5;
    padding: 24px;
    border-radius: 16px;
    transition: .4s all;
    overflow: hidden;
}

.jo-article__img > img {
    filter: brightness(0.5);
}

.jo-article:hover .jo-article__img > img {
    transform: scale(1.2);
    filter: brightness(100%);
}

.wrapper:hover > :not(:hover) {
    filter: blur(1px);
    opacity: 0.7;
}

@media screen and (max-width: 1199px) {
    .jo-article {
        padding: 18px;
    }
}

.jo-article__img {
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 20px;
    position: relative;
}

    .jo-article__img img {
        width: 100%;
        aspect-ratio: 402/265;
    }

.jo-article .date {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background-color: var(--white);
    border-radius: 10px;
    font-weight: 500;
    font-size: clamp(11px, 0.729vw, 14px);
    color: var(--black);
    display: inline-block;
    text-transform: uppercase;
    overflow: hidden;
    text-align: center;
}

@media screen and (max-width: 1399px) {
    .jo-article .date {
        bottom: 20px;
        left: 20px;
    }
}

.jo-article .date .number {
    background: var(--ttRed);
    display: block;
    color: var(--white);
    padding: 3px;
    border-radius: 10px;
}

.jo-article .date .txt {
    padding: 2px 11px;
    display: block;
}

.jo-article__infos {
    display: flex;
    align-items: center;
    gap: 1.563vw;
    font-size: clamp(12px, 0.729vw, 14px);
    font-weight: 500;
    margin-bottom: 0.625vw;
}

.jo-article__info {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}

    .jo-article__info i {
        font-size: 18px;
        color: var(--ttRed);
    }

.jo-article__title {
    font-weight: 600;
    font-size: clamp(19px, 1.146vw, 22px);
    margin-bottom: 1.302vw;
    line-height: 1.4;
}

@media screen and (max-width: 1399px) {
    .jo-article__title {
        margin-bottom: 18px;
    }
}

.jo-article__title a {
    color: var(--black);
    display: inline-block;
}

    .jo-article__title a:hover {
        color: var(--ttRed);
    }

.jo-article__btn {
    font-weight: 600;
    color: var(--ttRed);
    font-size: clamp(13px, 0.833vw, 16px);
    display: inline-flex;
}

    .jo-article__btn:hover {
        color: var(--black);
    }

    .jo-article__btn .icon {
        font-size: 22px;
        line-height: 0.7;
        padding-top: 1px;
        padding-left: 4px;
    }

.tt-footer {
    background-color: var(--black);
    padding: 55px 30px;
    color: var(--white);
}

@media screen and (max-width: 479px) {
    .tt-footer {
        padding: 45px 20px;
    }
}

.tt-footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 35px;
    padding-bottom: 40px;
}

@media screen and (max-width: 1399px) {
    .tt-footer-top {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media screen and (max-width: 767px) {
    .tt-footer-top > * {
        flex-grow: 1;
    }
}

.tt-footer-top__about {
    max-width: 600px;
    flex-shrink: 0;
}

@media screen and (max-width: 767px) {
    .tt-footer-top__about {
        max-width: 100%;
    }
}

.tt-footer-top__logo {
    margin-bottom: 20px;
    display: inline-block;
}

.tt-footer-top__descr {
    margin-bottom: 30px;
}

.tt-footer-top__socials {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .tt-footer-top__socials > a {
        width: 47px;
        font-size: 20px;
        color: rgba(195, 22, 22, 0.7);
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #E11D77;
        border-radius: 50%;
        transition: 0.4s ease;
    }

    .tt-footer-top__socials a i {
        padding-top: 3px;
    }

    .tt-footer-top__socials a:hover {
        background-color: var(--ttRed);
        color: var(--white);
        border-color: var(--ttRed);
    }

.tt-footer-widget__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 18px;
}

.tt-footer-widget__links a {
    font-size: 16px;
    display: block;
    margin-bottom: 8px;
    color: var(--white);
}

    .tt-footer-widget__links a:hover {
        color: var(--ttRed);
    }

.tt-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0 0;
    gap: 20px 10px;
}

    .tt-footer-bottom p,
    .tt-footer-bottom a {
        color: white;
    }

    .tt-footer-bottom .links {
        gap: 8px 35px;
    }



.jo-footer {
    /* background-color: var(--black); */
    /* background: url(../img/intro-live-bg.png) var(--black) no-repeat center center; */
    /* background: url(../img/11.png)    ; */
    background: rgba(255, 255, 255, 0.23);
    /*    border-radius: 16px;*/
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7.3px);
    -webkit-backdrop-filter: blur(7.3px);
    /*    border: 1px solid rgba(255, 255, 255, 1);*/
    /*     background: url(../img/23.png) no-repeat center center; */



    background-size:  cover;
}

.jo-footer-top {
    padding: 2.76vw 1.563vw;
    /* background: linear-gradient(90deg, var(--ttRed), var(--tt-gold)); */
    /* background-image: linear-gradient(to right top, #ffffff, #dce7fa, #a3d5f0, #5bc5d4, #00b3a4); */
    /* background-image: linear-gradient(to top, #5ffbf1, #88fbff, #affaff, #d1f9ff, #eef9ff, #eef9ff, #eef9ff, #eef9ff, #d1f9ff, #affaff, #88fbff, #5ffbf1); */
    border-radius: 0 0 20px 20px;
    background: #ececec;
}

@media screen and (max-width: 1199px) {
    .jo-footer-top {
        padding: 40px 1.563vw;
    }
}

@media screen and (max-width: 991px) {
    .jo-footer-top {
        padding: 30px 10px;
    }
}

.jo-footer-top .logo {
    width: 211px;
}

@media screen and (max-width: 1199px) {
    .jo-footer-top .logo {
        width: 150px;
    }
}

.jo-footer-top__nwsltr {
    display: flex;
    background-color: var(--white);
    border-radius: 999px;
    padding: 5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

@media screen and (max-width: 479px) {
    .jo-footer-top__nwsltr {
        flex-direction: column;
        border-radius: 20px;
        gap: 5px;
    }
}

.jo-footer-top__nwsltr input {
    background-color: transparent !important;
    width: 100%;
    height: 3.385vw;
    border-radius: 40px;
    padding: 0 25px;
    font-size: 16px;
    border: none !important;
    border-color: white;
}

@media screen and (max-width: 1199px) {
    .jo-footer-top__nwsltr input {
        height: 45px;
    }
}

@media screen and (max-width: 479px) {
    .jo-footer-top__nwsltr input {
        padding: 0 15px;
    }
}

.jo-footer-top__nwsltr button {
    height: auto;
    border-radius: 999px;
    flex-shrink: 0;
    padding: 0 1.25vw;
}

@media screen and (max-width: 479px) {
    .jo-footer-top__nwsltr button {
        height: 45px;
    }
}

.jo-footer-top__nwsltr button::before {
    border-radius: 999px;
}

.jo-footer-top__socials a {
    position: relative;
    z-index: 1;
    border: 2px solid var(--tt-gold);
    color: var(--tt-gold);
}

    .jo-footer-top__socials a:hover::before {
        opacity: 1;
    }

    .jo-footer-top__socials a::before {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: -1;
        border-radius: 999px;
        background: var(--tt-gradient-2);
        ;
        opacity: 0;
        transition: 0.4s ease;
    }

.jo-footer-middle {
    padding: 3.125vw 0 2.083vw;
    color: var(--white);
}

@media screen and (max-width: 479px) {
    .jo-footer-middle {
        padding: 40px 0;
    }
}

.jo-footer-widget__title {
    font-weight: 700;
    font-size: clamp(17px, 1.042vw, 20px);
    margin-bottom: 20px;
    color: var(--white);
}

.jo-footer-contact a {
    font-size: clamp(22px, 1.563vw, 30px);
    font-weight: 500;
    color: #000000;
}

@media screen and (max-width: 479px) {
    .jo-footer-contact a {
        font-size: 22px;
    }
}

.jo-footer-links .links {
    justify-content: center;
    font-size: clamp(13px, 0.833vw, 16px);
    display: grid;
    gap: 8px 40px;
    grid-template-columns: repeat(2, max-content);
}

    .jo-footer-links .links a {
        font-weight: 500;
        color: #ffffff;
    }



.jo-footer-gallery .imgs {
    display: flex;
    gap: 15px;
    overflow: hidden;
    border-radius: 5px;
}

    .jo-footer-gallery .imgs img:hover {
        scale: 1.1;
        border-radius: 10px;
    }

    .jo-footer-gallery .imgs img {
        border-radius: 10px;
        max-width: clamp(80px, 5.208vw, 100px);
    }

.jo-footer .tt-footer-bottom {
    padding-bottom: 20px;
    border-top-color: white;
    font-size: clamp(13px, 0.833vw, 16px);
    justify-content: center;
}

.jo-inner-social-links {
    padding: 100px 0;
}

@media screen and (max-width: 1399px) {
    .jo-inner-social-links {
        padding: 70px 0;
    }
}

@media screen and (max-width: 767px) {
    .jo-inner-social-links {
        padding: 50px 0;
    }
}

.jo-inner-videos {
    background-color: #FFF1F1;
}

.jo-inner-about {
    padding: 5.208vw 0 4.323vw;
}

@media screen and (max-width: 991px) {
    .jo-inner-about {
        padding: 50px 0 47px;
    }
}

.jo-inner-about .top-wrapper {
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.jo-inner-about-left {
    background: url(../img/inner-about-left-bg.png) var(--black) no-repeat center center;
    background-size: cover;
    height: 100%;
    border-radius: 20px;
    padding: 2.083vw 5.729vw;
    width: max-content;
    max-width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 1199px) {
    .jo-inner-about-left {
        padding: 25px 50px;
    }
}

@media screen and (max-width: 991px) {
    .jo-inner-about-left {
        width: 100%;
    }
}

@media screen and (max-width: 479px) {
    .jo-inner-about-left {
        padding: 25px 35px;
    }
}

.jo-inner-about-left .title {
    color: var(--white);
    font-weight: 600;
    font-size: clamp(21px, 1.25vw, 24px);
    margin-bottom: clamp(18px, 1.198vw, 22px);
}

.jo-inner-about-left .jo-btn {
    border-radius: 999px;
}

    .jo-inner-about-left .jo-btn::before {
        border-radius: 999px;
    }

.jo-inner-about-left .sub-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--ttGray2);
    margin-top: clamp(20px, 1.563vw, 30px);
    margin-bottom: 0;
}

.jo-inner-about-left .img {
    position: relative;
    border-radius: 999px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: clamp(20px, 2.083vw, 40px);
}

    .jo-inner-about-left .img img {
        border: 0.9vw solid var(--white);
        border-radius: 999px;
        max-width: 15.937vw;
        aspect-ratio: 1/1;
    }

@media screen and (max-width: 1599px) {
    .jo-inner-about-left .img img {
        max-width: 17.937vw;
    }
}

@media screen and (max-width: 1199px) {
    .jo-inner-about-left .img img {
        max-width: 20.937vw;
    }
}

@media screen and (max-width: 991px) {
    .jo-inner-about-left .img img {
        max-width: 100%;
    }
}

.jo-inner-about-left .img .follower-tag {
    position: absolute;
    top: 42px;
    left: -33px;
    background-color: #18E76E;
    border-radius: 999px;
    color: var(--white);
    padding: 4px 10px;
    font-weight: 400;
    font-size: clamp(13px, 0.781vw, 15px);
}

.jo-inner-about-txt {
    padding: 1.563vw;
    padding-left: 0;
}

@media screen and (max-width: 991px) {
    .jo-inner-about-txt {
        padding: 25px;
    }
}

@media screen and (max-width: 575px) {
    .jo-inner-about-txt {
        padding: 15px;
    }
}

.jo-inner-about .jo-section-title {
    margin-bottom: 1.198vw;
}

.jo-inner-about-second-title {
    font-size: clamp(26px, 2.083vw, 40px);
    font-weight: 500;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 0;
    margin-top: 4.167vw;
}

@media screen and (max-width: 767px) {
    .jo-inner-about-second-title {
        font-size: 22px;
    }
}

@media screen and (max-width: 479px) {
    .jo-inner-about-second-title {
        font-size: 20px;
    }
}

.jo-inner-about-second-title .txt-gold {
    color: var(--tt-gold);
}

.jo-inner-about-second-title .txt-pink {
    color: var(--tt-pink);
}

.jo-inner-services {
    padding: 5.208vw 0;
}

@media screen and (max-width: 991px) {
    .jo-inner-services {
        padding: 50px 0;
    }
}

.jo-inner-service {
    background-color: #FFF1F1;
    border: none;
    border-radius: 20px;
    padding: clamp(15px, 1.563vw, 30px);
}

    .jo-inner-service .jo-article__img {
        border-radius: 15px;
    }

        .jo-inner-service .jo-article__img img {
            aspect-ratio: 390/261;
        }

    .jo-inner-service .jo-article__info {
        gap: 10px;
    }

        .jo-inner-service .jo-article__info i {
            font-size: clamp(17px, 1.042vw, 20px);
        }

    .jo-inner-service .jo-article__title {
        font-size: clamp(17px, 1.042vw, 20px);
        font-weight: 700;
        margin-bottom: 10px;
    }

.jo-inner-service-descr {
    color: var(--ttGray2);
    font-size: clamp(18px, 1.146vw, 22px);
}

.jo-inner-service .jo-btn {
    gap: 6px;
    color: var(--tt-pink);
}

    .jo-inner-service .jo-btn::after {
        content: "";
        position: absolute;
        z-index: -1;
        background-color: #FFF1F1;
        position: absolute;
        inset: 1px;
        border-radius: 4px;
        transition: 0.4s ease;
    }

    .jo-inner-service .jo-btn:hover {
        color: var(--white);
    }

        .jo-inner-service .jo-btn:hover::after {
            opacity: 0;
        }

    .jo-inner-service .jo-btn .icon {
        font-size: 10px;
        padding-top: 4px;
    }

.jo-inner-features {
    background: url(../img/features-bg.jpg) no-repeat center center;
    background-size: cover;
    padding: 5.208vw 0;
}

@media screen and (max-width: 991px) {
    .jo-inner-features {
        padding: 50px 0;
    }
}

.jo-inner-feature {
    text-align: center;
}

    .jo-inner-feature .icon {
        width: 6.25vw;
        max-width: 100%;
        padding-top: 0.625vw;
        aspect-ratio: 1/1;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        margin: auto;
        margin-bottom: 1.563vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(45px, 3.125vw, 60px);
        background: linear-gradient(180deg, var(--ttRed), var(--tt-gold));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

@media screen and (max-width: 991px) {
    .jo-inner-feature .icon {
        width: 65px;
    }
}

@media screen and (max-width: 767px) {
    .jo-inner-feature .icon {
        padding-top: 7px;
    }
}

.jo-inner-feature .title {
    font-weight: 700;
    font-size: clamp(17px, 1.042vw, 20px);
    color: var(--white);
}

.jo-inner-main-content {
    padding: 5.208vw 0;
}

@media screen and (max-width: 991px) {
    .jo-inner-main-content {
        padding: 50px 0;
    }
}

.jo-service-details-sidebar {
    background-color: #FFF1F1;
    border-radius: 20px;
    padding: 1.719vw;
}

@media screen and (max-width: 991px) {
    .jo-service-details-sidebar {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

        .jo-service-details-sidebar > * {
            width: calc((100% - 15px) / 2);
        }
}

@media screen and (max-width: 991px) and (max-width: 479px) {
    .jo-service-details-sidebar > * {
        width: calc((100% - 15px) / 1);
    }
}

@media screen and (max-width: 479px) {
    .jo-service-details-sidebar {
        justify-content: center;
        padding: 25px 14px;
    }
}

.jo-service-details-sidebar .service-list li:not(:last-child) {
    margin-bottom: clamp(12px, 1.042vw, 20px);
}

.jo-service-details-sidebar .service-list a {
    padding: clamp(7.5px, 0.66vw, 12.5px) clamp(12px, 1.042vw, 20px);
    border-radius: 10px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, var(--ttRed), var(--tt-gold));
    font-weight: 500;
    font-size: 20px;
    color: var(--black);
}

@media screen and (max-width: 1599px) {
    .jo-service-details-sidebar .service-list a {
        font-size: 17px;
    }
}

@media screen and (max-width: 575px) {
    .jo-service-details-sidebar .service-list a {
        font-size: 16px;
    }
}

.jo-service-details-sidebar .service-list a::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    background-color: #FFF1F1;
    border-radius: 8.5px;
    transition: 0.4s ease;
}

.jo-service-details-sidebar .service-list a:hover,
.jo-service-details-sidebar .service-list a.current {
    color: var(--white);
}

    .jo-service-details-sidebar .service-list a:hover::before,
    .jo-service-details-sidebar .service-list a.current::before {
        opacity: 0;
    }

.jo-service-details__cta {
    margin-top: 1.563vw;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 991px) {
    .jo-service-details__cta {
        margin-top: 0;
    }
}

.jo-service-details__cta .img {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
}

    .jo-service-details__cta .img::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.7);
    }

.jo-service-details__cta .txt {
    position: absolute;
    /* bottom: clamp(25px, 2.604vw, 50px); */
    bottom: clamp(25px, 10.604vw, 150px);
    z-index: 2;
    color: var(--white);
    text-align: center;
    width: 100%;
}

    .jo-service-details__cta .txt .icon {
        font-size: clamp(25px, 2.604vw, 50px);
        line-height: 1;
        margin-bottom: 6px;
    }

    .jo-service-details__cta .txt .title {
        font-weight: 600;
        font-size: clamp(14px, 0.938vw, 18px);
        display: block;
        margin-bottom: 0.781vw;
    }

    .jo-service-details__cta .txt a {
        font-weight: 700;
        font-size: clamp(18px, 1.25vw, 24px);
        color: var(--white);
    }

        .jo-service-details__cta .txt a:hover {
            color: var(--tt-pink);
        }

.jo-service-details-cover-img {
    margin-bottom: 1.563vw;
}

@media screen and (max-width: 1199px) {
    .jo-service-details-cover-img {
        margin-bottom: 18px;
    }
}

.jo-service-details-cover-img img {
    border-radius: 20px;
    aspect-ratio: 930/433;
    max-width: 100%;
    object-fit: cover;
}

.jo-service-details__tag {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0.677vw;
    display: flex;
    align-items: center;
    gap: 5px;
}

@media screen and (max-width: 1199px) {
    .jo-service-details__tag {
        margin-bottom: 12px;
    }
}

.jo-service-details__tag .icon {
    font-size: 20px;
    line-height: 0.7;
    color: var(--ttRed);
}

.jo-service-details__title {
    font-weight: 700;
    font-size: clamp(24px, 1.25vw, 24px);
}

.jo-service-details__descr {
    font-size: 15px;
    color: var(--ttGray2);
}

.jo-service-details__inner-imgs {
    display: flex;
    gap: 24px;
    margin: 1.823vw 0;
}

@media screen and (max-width: 767px) {
    .jo-service-details__inner-imgs {
        gap: 15px;
    }
}

@media screen and (max-width: 479px) {
    .jo-service-details__inner-imgs {
        flex-direction: column;
    }
}

.jo-service-details__inner-imgs img {
    width: 100%;
    border-radius: 20px;
}

.jo-service-details-related-services {
    background-color: #FFF1F1;
}

    .jo-service-details-related-services .heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: clamp(20px, 2.083vw, 40px);
    }

        .jo-service-details-related-services .heading .jo-section-title {
            margin-bottom: 0;
        }

.jo-related-services-slider .jo-inner-service {
    background-color: var(--white);
}

.jo-related-services-slider-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

    .jo-related-services-slider-nav button:hover {
        color: var(--ttRed);
    }

.jo-videos-toggle-switch {
    position: relative;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 2.604vw;
}

@media screen and (max-width: 991px) {
    .jo-videos-toggle-switch {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 479px) {
    .jo-videos-toggle-switch {
        gap: 8px;
    }
}

.jo-videos-toggle-switch .toggle-label {
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.4s ease;
}

@media screen and (max-width: 479px) {
    .jo-videos-toggle-switch .toggle-label {
        font-size: 14px;
    }
}

.jo-videos-toggle-switch .toggle-label.premium {
    color: rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 479px) {
    .jo-videos-toggle-switch .toggle-label i {
        display: none;
    }
}

.jo-videos-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

    .jo-videos-toggle-switch input:checked ~ .slider {
        background-color: var(--black);
    }

        .jo-videos-toggle-switch input:checked ~ .slider:before {
            -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
            transform: translateX(100%);
        }

    .jo-videos-toggle-switch input:checked ~ .toggle-label.premium {
        color: var(--black);
    }

    .jo-videos-toggle-switch input:checked ~ .toggle-label.free {
        color: rgba(0, 0, 0, 0.3);
    }

.jo-videos-toggle-switch .slider {
    cursor: pointer;
    position: relative;
    width: 36px;
    display: block;
    height: 20px;
    background-color: var(--black);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 999px;
}

    .jo-videos-toggle-switch .slider::before {
        position: absolute;
        content: "";
        aspect-ratio: 1/1;
        left: 2px;
        bottom: 2px;
        top: 2px;
        background-color: var(--white);
        -webkit-transition: 0.4s;
        transition: 0.4s;
        border-radius: 50%;
    }

.jo-inner-videos-filter-nav {
    margin-bottom: 3.333vw;
    gap: 10px;
}

@media screen and (max-width: 991px) {
    .jo-inner-videos-filter-nav {
        margin-bottom: 25px;
    }
}

.jo-inner-videos-filter-nav button {
    background: linear-gradient(90deg, var(--ttRed), var(--tt-gold));
    border-radius: 6px;
    height: 2.188vw;
    padding: 0 20px;
    color: var(--ttRed);
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 1599px) {
    .jo-inner-videos-filter-nav button {
        height: 38px;
    }
}

@media screen and (max-width: 479px) {
    .jo-inner-videos-filter-nav button {
        padding: 0 10px;
        height: 35px;
        font-size: 14px;
    }
}

.jo-inner-videos-filter-nav button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    background-color: var(--white);
    border-radius: 4.5px;
    transition: 0.4s ease;
}

.jo-inner-videos-filter-nav button:hover,
.jo-inner-videos-filter-nav button.active {
    color: var(--white);
}

    .jo-inner-videos-filter-nav button:hover::before,
    .jo-inner-videos-filter-nav button.active::before {
        opacity: 0;
    }

.jo-inner-videos-row {
    --bs-gutter-y: 1.563vw;
    --bs-gutter-x: 1.563vw;
}

.jo-inner-video-card {
    max-width: none;
    min-width: 0;
}

    .jo-inner-video-card::before {
        background: linear-gradient(0deg, rgb(0, 0, 0), transparent);
        opacity: 1;
    }

    .jo-inner-video-card .jo-video-card__txt {
        top: auto;
    }

    .jo-inner-video-card .bottom {
        transform: translate(0);
    }

@media screen and (max-width: 479px) {
    .jo-inner-video-card .jo-video-card__btn {
        width: 40px;
    }
}

.jo-inner-video-card .jo-video-card__title {
    margin-top: 1.302vw;
    margin-bottom: 1.042vw;
    font-size: clamp(18px, 1.25vw, 24px);
}

.jo-inner-video-card .jo-video-card__img {
    aspect-ratio: 690/617;
    object-fit: cover;
}

@media screen and (max-width: 575px) {
    .jo-inner-video-card .jo-video-card__img {
        aspect-ratio: 1410/617;
    }
}

@media screen and (max-width: 479px) {
    .jo-inner-video-card .jo-video-card__img {
        aspect-ratio: 1410/967;
    }
}

.jo-inner-video-card--big .jo-video-card__img {
    aspect-ratio: 1410/617;
}

@media screen and (max-width: 479px) {
    .jo-inner-video-card--big .jo-video-card__img {
        aspect-ratio: 1410/967;
    }
}

.jo-inner-video-card-2 {
    border-radius: 0;
    max-width: none;
}

    .jo-inner-video-card-2::before {
        content: none;
    }

    .jo-inner-video-card-2 .jo-video-card__img {
        aspect-ratio: 330/430;
        border-radius: 20px;
    }

    .jo-inner-video-card-2 .jo-video-card__txt {
        position: static;
        color: var(--black);
    }

    .jo-inner-video-card-2 .jo-video-card__btn {
        color: var(--ttRed);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        background-color: var(--white);
    }

        .jo-inner-video-card-2 .jo-video-card__btn:hover {
            background-color: var(--ttRed);
            color: var(--white);
        }

    .jo-inner-video-card-2 .jo-video-card__title {
        color: var(--black);
        font-size: clamp(17px, 1.042vw, 20px);
        font-weight: 500;
        margin-top: 0.99vw;
        margin-bottom: 0.573vw;
    }

        .jo-inner-video-card-2 .jo-video-card__title:hover {
            color: var(--ttRed);
        }

    .jo-inner-video-card-2 .jo-video-card__infos {
        color: var(--black);
    }

.jo-inner-video-card-2--big {
    margin: 0.521vw 0;
}

    .jo-inner-video-card-2--big .jo-video-card__img {
        aspect-ratio: 1410/561;
        object-fit: cover;
    }

@media screen and (max-width: 479px) {
    .jo-inner-video-card-2--big .jo-video-card__img {
        aspect-ratio: 1/1;
    }
}

.jo-inner-video-card-2--big .jo-video-card__btn {
    width: clamp(50px, 4.792vw, 92px);
    font-size: clamp(16px, 1.25vw, 22px);
}

.jo-inner-videos-slider .swiper-slide {
    max-width: 35.938vw;
    min-width: 276px;
}

    .jo-inner-videos-slider .swiper-slide:hover {
        scale: 1.2;
    }

@media screen and (max-width: 575px) {
    .jo-inner-videos-slider .jo-inner-video-card .jo-video-card__img {
        aspect-ratio: 690/617;
    }
}

.jo-inner-videos-slider-nav button {
    width: 45px;
    aspect-ratio: 1/1;
    background-color: rgba(255, 0, 0, 0.1);
    border-radius: 999px;
    color: var(--ttRed);
    padding-top: 6.5px;
}

    .jo-inner-videos-slider-nav button:hover {
        background-color: var(--ttRed);
        color: var(--white);
    }

.jo-inner-page-container {
    margin: 0 19.71vw;
}

@media screen and (max-width: 1599px) {
    .jo-inner-page-container {
        margin: 0 15.71vw;
    }
}

@media screen and (max-width: 1399px) {
    .jo-inner-page-container {
        margin: 0 12.71vw;
    }
}

@media screen and (max-width: 1199px) {
    .jo-inner-page-container {
        margin: 0 9.71vw;
    }
}

@media screen and (max-width: 991px) {
    .jo-inner-page-container {
        margin: 0 15px;
    }
}

.jo-video-details-wrapper {
    padding: 5.25vw 0;
}

.jo-video-details-cover {
    overflow: hidden;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    margin-bottom: clamp(22px, 1.58vw, 30px);
}

    .jo-video-details-cover::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, #000000 100%);
        z-index: 1;
    }

    .jo-video-details-cover img {
        width: 100%;
        aspect-ratio: 1170/570;
    }

    .jo-video-details-cover .video-btn {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--white);
        font-weight: 500;
        text-align: center;
    }

        .jo-video-details-cover .video-btn a {
            border: 1px solid rgba(255, 255, 255, 0.2);
            width: clamp(60px, 5.25vw, 100px);
            aspect-ratio: 1/1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(20px, 1.42vw, 27px);
            color: var(--white);
            margin: auto;
            margin-bottom: 15px;
        }

            .jo-video-details-cover .video-btn a:hover {
                background-color: var(--white);
                color: var(--tt-pink);
            }

            .jo-video-details-cover .video-btn a i {
                padding-top: 4px;
            }

.jo-video-details-txt h2 {
    font-weight: 700;
    font-size: clamp(21px, 1.26vw, 24px);
    color: var(--black);
    margin-bottom: clamp(13px, 0.84vw, 16px);
    margin-top: 20px;
}

.jo-video-details-txt p {
    font-size: 15px;
    color: var(--ttGray2);
}

.jo-video-details-txt ul {
    font-size: clamp(13px, 0.79vw, 15px);
    color: var(--black);
    font-weight: 500;
    margin-bottom: clamp(30px, 2.84vw, 54px);
    margin-top: clamp(20px, 1.58vw, 30px);
}

    .jo-video-details-txt ul li {
        position: relative;
        padding-left: 26px;
        margin-bottom: 15px;
    }

        .jo-video-details-txt ul li::before {
            content: "\f11f";
            font-family: flaticon_jio_-_influencer !important;
            font-style: normal;
            font-weight: normal !important;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            color: var(--ttRed);
            font-size: 14px;
        }

        .jo-video-details-txt ul li:last-child {
            margin-bottom: 0;
        }

.jo-video-details-txt blockquote {
    background-color: rgba(255, 0, 0, 0.1);
    padding: clamp(20px, 1.58vw, 30px);
    border-radius: 20px;
    font-size: clamp(17px, 1.05vw, 20px);
    color: var(--ttGray2);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: clamp(15px, 1.05vw, 20px);
}

@media screen and (max-width: 479px) {
    .jo-video-details-txt blockquote {
        flex-wrap: wrap;
    }
}

.jo-video-details-txt-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.jo-video-details-shares {
    display: flex;
    align-items: center;
    gap: 20px;
}

    .jo-video-details-shares .share-options {
        display: flex;
        gap: 8px;
    }

        .jo-video-details-shares .share-options a {
            width: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1/1;
            border: 1px solid rgba(210, 210, 210, 0.88);
            color: var(--ttGray2);
            border-radius: 999px;
            font-size: 13px;
            padding-top: 3px;
        }

            .jo-video-details-shares .share-options a:hover {
                background-color: var(--ttRed);
                border-color: var(--ttRed);
                color: var(--white);
            }

.jo-video-details-cta {
    background: linear-gradient(45deg, var(--ttRed), var(--tt-gold));
    color: var(--white);
    padding: clamp(30px, 2.63vw, 50px);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px;
    margin-top: clamp(50px, 5.25vw, 100px);
}

    .jo-video-details-cta h3 {
        font-weight: 500;
        font-size: clamp(32px, 2.1vw, 40px);
    }

    .jo-video-details-cta .jo-btn {
        border: 1px solid var(--white);
    }

        .jo-video-details-cta .jo-btn i {
            font-size: 10px;
            padding-top: 1px;
            padding-right: 3px;
        }

.jo-related-videos-slider-nav button:hover {
    color: var(--ttRed);
}

.jo-video-shop {
    padding: 5.25vw 0;
}

.jo-video-shop-sidebar {
    background-color: #FFF1F1;
    padding: clamp(15px, 1.58vw, 30px);
    border-radius: 20px;
}

.jo-video-shop-sidebar-widget-title {
    font-size: clamp(15px, 0.95vw, 18px);
    font-weight: 600;
    color: var(--black);
    margin-bottom: clamp(13px, 0.84vw, 16px);
}

.jo-video-shop-sidebar > * {
    margin-bottom: clamp(20px, 2.1vw, 40px);
}

    .jo-video-shop-sidebar > *:last-child {
        margin-bottom: 0;
    }

.jo-video-shop-search-form {
    background-color: var(--white);
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

    .jo-video-shop-search-form input {
        background-color: transparent;
        height: 100%;
        padding: 15px;
        width: 100%;
    }

    .jo-video-shop-search-form button {
        flex-shrink: 0;
        color: var(--ttRed);
        font-size: 20px;
        padding-right: 15px;
        padding-top: 6px;
        padding-left: 0;
    }

.jo-video-shop-price-filter-form {
    background-color: var(--white);
    border-radius: 10px;
    padding: 15px;
}

    .jo-video-shop-price-filter-form .noUi-base {
        margin-bottom: 8px;
    }

    .jo-video-shop-price-filter-form .noUi-horizontal {
        height: 7px;
        border: 1px solid var(--ttRed);
    }

    .jo-video-shop-price-filter-form .noUi-handle {
        width: 18px;
        height: 18px;
        box-shadow: none;
        border: 5px solid var(--ttRed);
        border-radius: 50%;
        top: -7px;
    }

        .jo-video-shop-price-filter-form .noUi-handle::before,
        .jo-video-shop-price-filter-form .noUi-handle::after {
            content: none;
        }

    .jo-video-shop-price-filter-form .noUi-connect {
        background-color: var(--ttRed);
    }

    .jo-video-shop-price-filter-form .noUi-touch-area::before,
    .jo-video-shop-price-filter-form .noUi-touch-area::after {
        content: none;
    }

    .jo-video-shop-price-filter-form .filtered-price {
        font-weight: 500;
        font-size: 12px;
        color: var(--black);
        display: block;
        margin-top: 10px;
    }

.jo-video-shop-categories-link {
    background-color: var(--white);
    border-radius: 10px;
    padding: 25px 15px;
}

    .jo-video-shop-categories-link a {
        display: flex;
        justify-content: space-between;
        color: var(--black);
        margin-bottom: 15px;
    }

        .jo-video-shop-categories-link a:hover {
            color: var(--ttRed);
        }

        .jo-video-shop-categories-link a:last-child {
            margin-bottom: 0;
        }

.jo-video-shop-video-status-form {
    background-color: var(--white);
    border-radius: 10px;
    padding: 15px;
}

    .jo-video-shop-video-status-form > *:not(:last-child) {
        margin-bottom: 10px;
    }

    .jo-video-shop-video-status-form label {
        position: relative;
        display: inline-block;
    }

    .jo-video-shop-video-status-form span {
        padding-left: 30px;
        display: inline-block;
    }

        .jo-video-shop-video-status-form span::before,
        .jo-video-shop-video-status-form span::after {
            content: "";
            position: absolute;
            width: 20px;
            aspect-ratio: 1/1;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .jo-video-shop-video-status-form span::after {
            width: 8px;
            aspect-ratio: 1/1;
            background-color: var(--ttRed);
            border: none;
            left: 6px;
            opacity: 0;
        }

    .jo-video-shop-video-status-form input[type=radio]:checked + span::after {
        opacity: 1;
    }

.jo-video-shop-row {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

@media screen and (max-width: 1599px) {
    .jo-video-shop-row {
        --bs-gutter-x: 20px;
        --bs-gutter-y: 20px;
    }
}

.jo-video-shop-item .premium-badge {
    position: absolute;
    top: clamp(20px, 1.58vw, 30px);
    left: clamp(20px, 1.58vw, 30px);
    width: clamp(40px, 2.63vw, 50px);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    color: var(--ttRed);
    border-radius: 50%;
    padding-top: 5px;
}

.jo-video-shop-item .jo-video-card__btn {
    transform: translate(0);
    bottom: clamp(20px, 1.58vw, 30px);
    left: clamp(20px, 1.58vw, 30px);
    top: auto;
    width: clamp(40px, 2.63vw, 50px);
}

.jo-video-shop-item .jo-video-card__infos {
    color: var(--ttRed);
    font-weight: 500;
}

.jo-video-shop-item .jo-video-card__title:hover {
    color: var(--ttRed);
}

.jo-video-shop-details {
    padding-top: clamp(60px, 5.25vw, 100px);
    padding-bottom: clamp(60px, 5.25vw, 100px);
}

.jo-video-shop-details-video-cover {
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: clamp(17px, 1.21vw, 23px);
}

    .jo-video-shop-details-video-cover .jo-video-card__btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--white);
        color: var(--ttRed);
        width: clamp(50px, 3.68vw, 70px);
        font-size: clamp(15px, 0.95vw, 18px);
    }

        .jo-video-shop-details-video-cover .jo-video-card__btn:hover {
            color: var(--white);
            background-color: var(--ttRed);
        }

.jo-video-shop-details-title {
    font-weight: 600;
    font-size: clamp(22px, 1.58vw, 30px);
    margin-bottom: clamp(13px, 0.84vw, 16px);
}

.jo-video-shop-details-descr {
    color: var(--ttGray2);
    font-size: clamp(13px, 0.79vw, 15px);
}

.jo-video-shop-details-sidebar > * {
    margin-bottom: 0;
}

.jo-video-shop-details-sidebar-title {
    font-weight: 600;
    font-size: clamp(15px, 0.95vw, 18px);
}

.jo-video-shop-details-video-info {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: clamp(15px, 1.58vw, 30px);
}

@media screen and (max-width: 1799px) {
    .jo-video-shop-details-video-info {
        padding: clamp(15px, 1.28vw, 30px);
    }
}

.jo-video-shop-details-video-info:last-child {
    border: none;
}

.jo-video-shop-details-video-info p {
    font-size: 14px;
}

.jo-video-shop-details-video-info .jo-btn {
    width: 100%;
    margin-top: clamp(10px, 1vw, 19px);
}

@media screen and (max-width: 1799px) {
    .jo-video-shop-details-video-info .jo-btn {
        padding: 0 15px;
    }
}

.jo-video-shop-details-video-info .jo-btn i {
    font-size: 10px;
}

.jo-login {
    padding: 12.4vw 0 10.19vw 38.62vw;
    background: url('../img/login123-bg.jpg') no-repeat center center;
    background-size: cover;
}

.jo-logins {
    padding: 12.4vw 0 10.19vw 35.62vw !important;
}

@media screen and (max-width: 767px) {
    .jo-login {
        padding: 12.4vw 0 10.19vw 28.62vw;
    }

    .jo-logins {
        padding: 12.4vw 0 10.19vw 28.62vw;
    }
}

@media screen and (max-width: 479px) {
    .jo-login {
        padding: 12.4vw 15px 10.19vw 15px;
    }

    .jo-logins {
        padding: 12.4vw 15px 10.19vw 15px;
    }
}

.jo-auth-form-wrapper {
    background-color: var(--white);
    width: max-content;
    max-width: 100%;
    border-radius: 20px;
    overflow: hidden;
    max-width: clamp(310px, 30.11vw, 573px);
}

.jo-auth-form-wrappers {
    background-color: var(--white);
    width: max-content;
    max-width: 100%;
    border-radius: 20px;
    overflow: hidden;
    max-width: clamp(37px, 54.11vw, 848px) !important;
}

@media screen and (max-width: 767px) {
    .jo-auth-form-wrapper {
        max-width: clamp(290px, 60.11vw, 573px);
    }

    .jo-auth-form-wrappers {
        max-width: clamp(290px, 60.11vw, 573px);
    }
}

@media screen and (max-width: 479px) {
    .jo-auth-form-wrapper {
        max-width: clamp(290px, 100%, 100%);
        width: 100%;
    }

    .jo-auth-form-wrappers {
        max-width: clamp(290px, 100%, 100%);
        width: 100%;
    }
}

.jo-auth-form-wrapper .heading {
    background-color: var(--ttRed);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(25px, 2.1vw, 40px);
    color: var(--white);
}

    .jo-auth-form-wrapper .heading .logo {
        max-width: 40%;
    }

    .jo-auth-form-wrapper .heading h3 {
        margin-bottom: 0;
        font-weight: 600;
        font-size: clamp(18px, 1.58vw, 30px);
    }

.jo-auth-form-wrapper .bottom {
    padding: clamp(25px, 2.1vw, 40px);
}

.jo-auth-form-wrapper form input {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.22);
    height: clamp(45px, 4.2vw, 80px);
    padding: clamp(15px, 1.58vw, 30px);
    border-radius: 10px;
    margin-bottom: clamp(15px, 1.05vw, 20px);
}

.jo-auth-form-wrapper form .forget-password-btn {
    color: var(--ttGray2);
    font-size: clamp(13px, 0.84vw, 16px);
    padding-top: clamp(7px, 0.53vw, 10px);
    padding-bottom: clamp(15px, 1.16vw, 22px);
}

    .jo-auth-form-wrapper form .forget-password-btn:hover {
        color: var(--ttRed);
    }

.jo-auth-form-wrapper form .jo-btn {
    width: 100%;
    height: clamp(45px, 2.73vw, 52px);
}

.jo-auth-form-wrapper p {
    text-align: center;
    margin-top: clamp(20px, 1.58vw, 30px);
    font-size: clamp(13px, 0.84vw, 16px);
}

    .jo-auth-form-wrapper p a {
        color: var(--ttRed);
    }

        .jo-auth-form-wrapper p a:hover {
            color: var(--black);
        }

.jo-register {
    padding-top: clamp(50px, 5.25vw, 100px);
    padding-bottom: clamp(50px, 5.25vw, 100px);
}

.jo-checkout-wrapper {
    margin: 5.25vw 26.01vw;
}

@media screen and (max-width: 1199px) {
    .jo-checkout-wrapper {
        margin: 5.25vw 20.01vw;
    }
}

@media screen and (max-width: 991px) {
    .jo-checkout-wrapper {
        margin: 60px 15px;
    }
}

.jo-checkout-form {
    background-color: rgba(255, 0, 0, 0.06);
    border-radius: 20px;
}

    .jo-checkout-form .form-block {
        padding: clamp(20px, 2.1vw, 40px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }

        .jo-checkout-form .form-block:last-child {
            border-bottom: 0;
        }

        .jo-checkout-form .form-block .block-title {
            font-weight: 600;
            font-size: clamp(22px, 1.58vw, 30px);
            margin-bottom: clamp(18px, 1.21vw, 23px);
        }

        .jo-checkout-form .form-block p {
            font-size: clamp(13px, 0.84vw, 16px);
        }

            .jo-checkout-form .form-block p a {
                color: var(--ttRed);
            }

    .jo-checkout-form input {
        width: 100%;
        height: clamp(50px, 4.2vw, 80px);
        padding: clamp(15px, 1.58vw, 30px);
        border-radius: 10px;
        margin-bottom: clamp(15px, 1.05vw, 20px);
    }

.jo-checkout-payment-methods label {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: clamp(8px, 0.79vw, 15px);
    margin-bottom: clamp(8px, 0.79vw, 15px);
    font-weight: 600;
}

    .jo-checkout-payment-methods label > span::before,
    .jo-checkout-payment-methods label > span::after {
        top: 16px;
    }

    .jo-checkout-payment-methods label .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

.jo-checkout-note {
    width: 100%;
    background-color: var(--white);
    border-radius: 10px;
    padding: clamp(15px, 1.58vw, 30px);
    border: 1px solid transparent;
    height: 212px;
    margin-top: clamp(25px, 2.1vw, 40px);
    vertical-align: top;
    margin-bottom: clamp(30px, 2.36vw, 43px);
}

    .jo-checkout-note:focus,
    .jo-checkout-note:focus-visible,
    .jo-checkout-note:focus-within {
        outline: none;
        border-color: var(--ttRed);
    }

.jo-checkout-agreement-wrapper {
    margin-bottom: clamp(20px, 2.1vw, 40px);
}

    .jo-checkout-agreement-wrapper label {
        padding-left: 30px;
        position: relative;
        display: inline-block;
    }

        .jo-checkout-agreement-wrapper label .txt::before,
        .jo-checkout-agreement-wrapper label .txt::after {
            content: "";
            position: absolute;
            width: 20px;
            aspect-ratio: 1/1;
            border-radius: 50%;
            border: 1px solid var(--ttGray2);
            top: 4px;
            left: 0;
        }

        .jo-checkout-agreement-wrapper label .txt::after {
            width: 10px;
            top: 9px;
            left: 5px;
            border: none;
            background-color: var(--ttRed);
            opacity: 0;
        }

        .jo-checkout-agreement-wrapper label input:checked ~ .txt::after {
            opacity: 1;
        }

.jo-checkout-total {
    margin-bottom: clamp(10px, 0.95vw, 18px);
}

    .jo-checkout-total h4 {
        font-weight: 600;
        font-size: clamp(20px, 1.58vw, 30px);
        margin-bottom: 0.53vw;
    }

    .jo-checkout-total .number {
        font-weight: 600;
        font-size: clamp(24px, 2.1vw, 40px);
    }

.jo-inner-blogs {
    padding: clamp(60px, 5.25vw, 100px) 0;
}

.jo-inner-blogs-sidebar > * {
    margin-bottom: clamp(15px, 1.26vw, 24px);
}

.jo-inner-blogs-sidebar-widget {
    padding: clamp(25px, 2.1vw, 40px) clamp(15px, 1.58vw, 30px);
    background-color: rgba(255, 0, 0, 0.1);
    border-radius: 10px;
}

.jo-inner-blogs-sidebar-widget-title {
    font-weight: 700;
    font-size: clamp(18px, 1.16vw, 22px);
    color: var(--black);
    position: relative;
    padding-bottom: clamp(4px, 0.47vw, 9px);
    margin-bottom: clamp(15px, 1.58vw, 30px);
}

    .jo-inner-blogs-sidebar-widget-title::before {
        content: "";
        position: absolute;
        bottom: 0;
        height: 2px;
        width: clamp(35px, 2.63vw, 50px);
        background-color: var(--ttRed);
    }

.jo-inner-blogs-search-form {
    background-color: var(--white);
    height: clamp(45px, 3.15vw, 60px);
    border-radius: 10px;
    padding: 0 clamp(12px, 1.05vw, 20px);
    display: flex;
    align-items: center;
}

    .jo-inner-blogs-search-form input {
        width: 100%;
        background-color: transparent;
    }

    .jo-inner-blogs-search-form button {
        color: var(--ttRed);
        padding: 0;
        padding-top: 3px;
        font-size: 20px;
    }

.jo-inner-blogs-categories a {
    background-color: var(--white);
    border-radius: 10px;
    height: clamp(46px, 2.94vw, 56px);
    padding: 0 clamp(15px, 1.05vw, 20px);
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: clamp(13px, 0.84vw, 16px);
    color: var(--black);
    margin-bottom: clamp(9px, 0.63vw, 12px);
}

    .jo-inner-blogs-categories a:hover {
        background-color: var(--ttRed);
        color: var(--white);
    }

.jo-inner-blogs-sidebar-post {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    align-items: center;
    gap: clamp(12px, 0.79vw, 15px);
    padding: clamp(12px, 1.05vw, 20px) 0;
}

    .jo-inner-blogs-sidebar-post:first-child {
        padding-top: 0;
    }

    .jo-inner-blogs-sidebar-post:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    .jo-inner-blogs-sidebar-post .img {
        flex-shrink: 0;
        overflow: hidden;
        border-radius: 10px;
    }

        .jo-inner-blogs-sidebar-post .img img {
            width: 78px;
            aspect-ratio: 1/1;
            object-fit: cover;
        }

    .jo-inner-blogs-sidebar-post .date {
        font-size: clamp(12px, 0.74vw, 14px);
        color: var(--ttRed);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .jo-inner-blogs-sidebar-post .date .icon {
            padding-top: 4px;
            font-size: 16px;
        }

    .jo-inner-blogs-sidebar-post .title {
        font-size: clamp(13px, 0.84vw, 16px);
        line-height: 1.6;
        margin-bottom: 0;
    }

        .jo-inner-blogs-sidebar-post .title a {
            font-weight: 600;
            color: var(--black);
        }

            .jo-inner-blogs-sidebar-post .title a:hover {
                color: var(--ttRed);
            }

.jo-inner-blogs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(3px, 0.63vw, 6px);
}

    .jo-inner-blogs-tags a {
        height: clamp(28px, 1.79vw, 34px);
        padding: 0 clamp(9px, 0.63vw, 12px);
        background-color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        color: var(--black);
        font-size: clamp(13px, 0.84vw, 16px);
    }

        .jo-inner-blogs-tags a:hover {
            background-color: var(--ttRed);
            color: var(--white);
        }

.jo-inner-blog {
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: clamp(15px, 1.58vw, 30px);
    margin-bottom: clamp(18px, 1.26vw, 24px);
    border-radius: 20px;
}

.jo-inner-blog-img {
    margin-bottom: clamp(18px, 1.26vw, 24px);
    border-radius: 20px;
    overflow: hidden;
}

    .jo-inner-blog-img img {
        width: 100%;
        aspect-ratio: 869/470;
        object-fit: cover;
    }

.jo-inner-blog-infos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px clamp(15px, 1.58vw, 30px);
    font-size: 14px;
    margin-bottom: clamp(11px, 0.74vw, 14px);
}

    .jo-inner-blog-infos > *:not(:first-child) {
        position: relative;
        padding-left: clamp(22px, 1.94vw, 37px);
    }

        .jo-inner-blog-infos > *:not(:first-child)::before {
            content: "";
            position: absolute;
            width: 7px;
            aspect-ratio: 1/1;
            background-color: var(--ttRed);
            border-radius: 50%;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

    .jo-inner-blog-infos .author {
        color: var(--ttRed);
        font-weight: 500;
    }

        .jo-inner-blog-infos .author .name {
            color: var(--ttGray2);
            font-weight: 400;
        }

    .jo-inner-blog-infos .date {
        color: var(--black);
    }

.jo-inner-blog-title {
    font-weight: 700;
    font-size: clamp(20px, 1.26vw, 24px);
    margin-bottom: clamp(10px, 0.79vw, 15px);
}

    .jo-inner-blog-title a {
        color: var(--black);
    }

        .jo-inner-blog-title a:hover {
            color: var(--ttRed);
        }

.jo-inner-blog-descr {
    color: var(--ttGray2);
    font-size: clamp(13px, 0.84vw, 16px);
    margin-bottom: clamp(18px, 1.37vw, 26px);
}

.jo-inner-blog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

    .jo-inner-blog-actions > * {
        height: clamp(36px, 2.21vw, 42px);
        border-radius: 10px;
    }

    .jo-inner-blog-actions a {
        aspect-ratio: 1/1;
        background-color: rgba(255, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ttRed);
        font-size: clamp(17px, 1.05vw, 20px);
    }

        .jo-inner-blog-actions a:hover {
            background-color: var(--ttRed);
            color: var(--white);
        }

    .jo-inner-blog-actions .share-btn {
        border: 1px solid rgba(255, 0, 0, 0.1);
        padding: 0 clamp(10px, 1.16vw, 22px);
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: clamp(13px, 0.84vw, 16px);
    }

        .jo-inner-blog-actions .share-btn:hover {
            background-color: var(--ttRed);
            color: var(--white);
        }

            .jo-inner-blog-actions .share-btn:hover i {
                color: var(--white);
            }

        .jo-inner-blog-actions .share-btn i {
            color: var(--ttRed);
            padding-top: 2px;
            transition: 0.4s ease;
        }

.jo-inner-pricing-plan {
    background-color: var(--white);
    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.06);
    padding: clamp(25px, 2.1vw, 40px);
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 16px;
    background: url(../img/pricing-plan-bg.svg) rgba(0, 0, 0, 0.02) no-repeat;
    background-position-x: 0;
    background-position-y: 0;
    background-size: cover;
}

    .jo-inner-pricing-plan::before {
        content: "";
        position: absolute;
        z-index: -1;
        background: url(../img/pricing-plan-vector.svg) no-repeat center center;
        background-size: 100% 100%;
        width: 317px;
        height: 268px;
        top: 60%;
        transform: translateY(-50%);
        right: 0;
        pointer-events: none;
    }

    .jo-inner-pricing-plan .plan-icon {
        width: clamp(60px, 3.68vw, 70px);
        aspect-ratio: 1/1;
        border-radius: 8px;
        box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.06);
        position: absolute;
        top: 0;
        left: 0;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
    }

        .jo-inner-pricing-plan .plan-icon img {
            max-width: clamp(35px, 2.63vw, 50px);
        }

    .jo-inner-pricing-plan .heading {
        padding-left: clamp(45px, 3.68vw, 70px);
        padding-left: 80px;
        border-bottom: 1px solid #D4DCFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: clamp(25px, 2.1vw, 40px);
    }

        .jo-inner-pricing-plan .heading .title {
            font-weight: 700;
            font-size: clamp(20px, 1.26vw, 24px);
        }

        .jo-inner-pricing-plan .heading .sub-title {
            font-size: clamp(13px, 0.84vw, 16px);
            font-weight: 300;
        }

        .jo-inner-pricing-plan .heading .price {
            font-weight: 700;
            font-size: clamp(24px, 1.58vw, 30px);
        }

    .jo-inner-pricing-plan .plan-features {
        padding: clamp(25px, 2.1vw, 40px) 0 clamp(15px, 1.58vw, 30px);
    }

        .jo-inner-pricing-plan .plan-features li {
            position: relative;
            padding: 0 24px;
            font-weight: 600;
            margin-bottom: clamp(9px, 0.63vw, 12px);
        }

            .jo-inner-pricing-plan .plan-features li:last-child {
                margin-bottom: 0;
            }

            .jo-inner-pricing-plan .plan-features li::before,
            .jo-inner-pricing-plan .plan-features li::after {
                content: "";
                position: absolute;
                top: 3px;
                width: 16px;
                aspect-ratio: 1/1;
            }

            .jo-inner-pricing-plan .plan-features li::before {
                left: 0;
                background: url(../img/checkmark.svg) no-repeat center center;
                background-size: cover;
            }

            .jo-inner-pricing-plan .plan-features li::after {
                right: 0;
                content: "\f121";
                font-family: flaticon_jio_-_influencer !important;
                font-style: normal;
                font-weight: normal !important;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                color: #445375;
            }

.jo-inner-pricing-plan-btn {
    height: clamp(45px, 2.94vw, 56px);
    background-color: var(--ttRed);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    gap: 10px;
    font-size: clamp(13px, 0.84vw, 16px);
}

    .jo-inner-pricing-plan-btn:hover {
        color: var(--white);
        background-color: var(--black);
    }

    .jo-inner-pricing-plan-btn i {
        font-size: 14px;
    }

.jo-contact-info {
    border: 1px solid rgba(255, 0, 0, 0.1);
    padding: clamp(15px, 1.58vw, 30px);
    border-radius: 16px;
    text-align: center;
}

    .jo-contact-info .icon {
        border: 1px solid rgba(255, 0, 0, 0.1);
        border-radius: 8px;
        width: clamp(55px, 3.68vw, 70px);
        aspect-ratio: 1/1;
        margin: auto;
        padding: 5px;
        color: var(--ttRed);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(25px, 1.84vw, 35px);
        margin-bottom: clamp(10px, 0.84vw, 16px);
    }

    .jo-contact-info .title {
        font-weight: 700;
        font-size: clamp(18px, 1.26vw, 24px);
        margin-bottom: clamp(7px, 0.53vw, 10px);
    }

        .jo-contact-info .title a {
            color: var(--black);
        }

            .jo-contact-info .title a:hover {
                color: var(--ttRed);
            }

    .jo-contact-info .descr {
        margin-bottom: 0;
        color: #445375;
        font-size: clamp(13px, 0.84vw, 16px);
    }

.jo-inner-contact-form-wrapper {
    background: rgba(255, 255, 255, 0.46);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.4px);
    -webkit-backdrop-filter: blur(6.4px);
    padding: clamp(25px, 2.36vw, 45px);
    border-radius: 27%;
    margin-bottom: clamp(50px, 5.25vw, 100px);
}

.jo-inner-contact-from-left-title {
    font-weight: 700;
    font-size: clamp(25px, 2.1vw, 40px);
    margin-bottom: clamp(33px, 3.05vw, 58px);
}

.jo-inner-contact-img {
    background: url(../img/inner-contact-img-vector.svg) no-repeat top center;
    background-size: contain;
    padding-top: 25px;
}

.jo-inner-contact-form-title {
    font-weight: 700;
    font-size: clamp(24px, 1.58vw, 30px);
}

.jo-inner-contact-form input,
.jo-inner-contact-form textarea,
.jo-inner-contact-form .ss-main {
    height: clamp(45px, 3.15vw, 60px);
    border: 1px solid rgba(255, 0, 0, 0.1);
    border-radius: 35px;
    width: 90%;
    background-color: #eff3f6;
    /* bottom soft shadow */
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
    padding: 10px 20px;
    margin-left: 15px;
}

    .jo-inner-contact-form input:focus,
    .jo-inner-contact-form input:focus-visible,
    .jo-inner-contact-form input:focus-within,
    .jo-inner-contact-form textarea:focus,
    .jo-inner-contact-form textarea:focus-visible,
    .jo-inner-contact-form textarea:focus-within,
    .jo-inner-contact-form .ss-main:focus,
    .jo-inner-contact-form .ss-main:focus-visible,
    .jo-inner-contact-form .ss-main:focus-within {
        outline: none;
    }

.about_title {
    font-family: Alan Sans, sans-serif;
    font-weight: 700;
    font-size: 40px
}

.morph-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 22%;
    animation: morphShape 10s ease-in-out infinite;
    border: 5px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transition: 0.5s;
}

.text-center h2, h3 {
    font-family: Alan Sans, sans-serif;
    font-weight: 700;
    font-size: 40px;
    padding:5px;
}

@keyframes morphShape {
    0% {
        border-radius: 25% 35% 45% 20% / 30% 40% 50% 25%;
    }

    50% {
        border-radius: 40% 20% 35% 45% / 55% 25% 40% 30%;
    }

    100% {
        border-radius: 25% 35% 45% 20% / 30% 40% 50% 25%;
    }
}

.morph-image {
    transition: 0.6s ease;
}

.morph-wrapper:hover .morph-image {
    transform: scale(1.07);
}

.jo-inner-contact-form textarea {
    padding: clamp(15px, 1.05vw, 20px);
    height: 150px;
    vertical-align: top;
    margin-bottom: clamp(15px, 1.58vw, 30px);
}

.jo-inner-contact-form .submit-btn {
    height: clamp(45px, 3.15vw, 60px);
    background-color: var(--ttRed);
    border-radius: 24px;
    /* width: 100%; */
    color: var(--white);
    font-weight: 600;
    display: flex;
    gap: 8px;
    align-items: center;
    /* justify-content: center; */
    padding: 22px;
    margin: auto;
}

    .jo-inner-contact-form .submit-btn:hover {
        color: var(--white);
    }

    .jo-inner-contact-form .submit-btn i {
        font-size: 12px;
        padding-top: 3px;
    }

.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
    background-color: var(--ttRed);
}

.ss-content .ss-list .ss-option:hover {
    background-color: var(--ttRed);
}

.jo-blog-details-img {
    border-radius: 20px;
    overflow: hidden;
}

.jo-blog-details-txt p {
    font-size: 15px;
    color: var(--ttGray2);
}

.jo-blog-details-txt ul {
    font-size: clamp(13px, 0.79vw, 15px);
    color: var(--black);
    font-weight: 500;
    margin-bottom: clamp(30px, 1.58vw, 30px);
    margin-top: clamp(20px, 1.58vw, 30px);
}

    .jo-blog-details-txt ul li {
        position: relative;
        padding-left: 26px;
        margin-bottom: 15px;
    }

        .jo-blog-details-txt ul li::before {
            content: "\f11f";
            font-family: flaticon_jio_-_influencer !important;
            font-style: normal;
            font-weight: normal !important;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            color: var(--ttRed);
            font-size: 14px;
        }

        .jo-blog-details-txt ul li:last-child {
            margin-bottom: 0;
        }

.jo-blog-details-txt blockquote {
    background-color: rgba(255, 0, 0, 0.05);
    padding: clamp(30px, 2.1vw, 40px) clamp(20px, 1.58vw, 30px);
    padding-right: clamp(80px, 6.83vw, 130px);
    border-left: 4px solid var(--ttRed);
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    position: relative;
}

@media screen and (max-width: 479px) {
    .jo-blog-details-txt blockquote {
        flex-wrap: wrap;
    }
}

.jo-blog-details-txt blockquote .quotation-icon {
    position: absolute;
    bottom: 30px;
    right: 30px;
}

.jo-blog-details-inner-imgs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(15px, 1.58vw, 30px);
    margin-bottom: 15px;
}

@media screen and (max-width: 479px) {
    .jo-blog-details-inner-imgs {
        grid-template-columns: repeat(1, 1fr);
    }
}

.jo-blog-details-inner-imgs img {
    width: 100%;
    aspect-ratio: 450/269;
    border-radius: 15px;
}

.jo-blog-details-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
    border: solid #D4DCFF;
    border-width: 1px 0 1px 0;
    padding: 20px 0;
}

    .jo-blog-details-actions .tags-wrapper,
    .jo-blog-details-actions .share {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .jo-blog-details-actions .title {
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 0;
    }

    .jo-blog-details-actions .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

        .jo-blog-details-actions .tags a {
            height: 34px;
            background-color: #F8F8F8;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            padding: 0 16px;
            color: var(--black);
        }

            .jo-blog-details-actions .tags a:hover {
                background-color: var(--ttRed);
                color: var(--white);
            }

    .jo-blog-details-actions .share-options {
        display: flex;
        gap: 20px;
        align-items: center;
        font-size: 18px;
    }

        .jo-blog-details-actions .share-options a {
            color: #445375;
        }

            .jo-blog-details-actions .share-options a:hover {
                color: var(--ttRed);
            }

.jo-blog-comments {
    margin-top: clamp(30px, 3.15vw, 60px);
}

.jo-blog-comments-title {
    font-weight: 600;
    font-size: clamp(20px, 1.26vw, 24px);
    margin-bottom: clamp(28px, 1.84vw, 35px);
}

.jo-blog-comment {
    display: flex;
    gap: 20px;
}

    .jo-blog-comment:not(:last-child) {
        border-bottom: 1px solid #D4DCFF;
        padding-bottom: clamp(25px, 2.1vw, 40px);
        margin-bottom: clamp(25px, 2.1vw, 40px);
    }

.jo-blog-comment-user-img {
    flex-shrink: 0;
}

    .jo-blog-comment-user-img img {
        width: clamp(56px, 5.04vw, 96px);
        border-radius: 50%;
    }

.jo-blog-comment-txt {
    padding-top: clamp(20px, 1.31vw, 25px);
}

    .jo-blog-comment-txt .heading {
        margin-bottom: 12px;
    }

    .jo-blog-comment-txt .name {
        font-weight: 500;
        font-size: clamp(17px, 1.05vw, 20px);
    }

    .jo-blog-comment-txt .date {
        color: #445375;
        font-size: clamp(13px, 0.84vw, 16px);
    }

    .jo-blog-comment-txt .descr {
        color: #445375;
    }

    .jo-blog-comment-txt .reply-btn {
        border-radius: 999px;
        background-color: rgba(255, 0, 0, 0.1);
        height: 30px;
        font-size: 14px;
        padding: 0 16px;
        color: var(--ttRed);
    }

        .jo-blog-comment-txt .reply-btn:hover {
            background-color: var(--ttRed);
            color: var(--white);
        }

.jo-blog-comment-form-wrapper {
    padding-top: clamp(30px, 3.15vw, 60px);
    border-top: 1px solid rgba(255, 0, 0, 0.1);
    margin-top: clamp(25px, 2.1vw, 40px);
}

.jo-blog-comment-form-title {
    font-weight: 600;
    font-size: clamp(21px, 1.26vw, 24px);
    margin-bottom: clamp(25px, 2.1vw, 40px);
}

.jo-blog-comment-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 10px;
}

.jo-blog-comment-form input,
.jo-blog-comment-form textarea {
    height: clamp(55px, 2.94vw, 56px);
    border: 1px solid rgba(255, 0, 0, 0.1);
    border-radius: 4px;
    width: 100%;
    padding: 0 clamp(15px, 1.05vw, 20px);
}

    .jo-blog-comment-form input:focus,
    .jo-blog-comment-form input:focus-visible,
    .jo-blog-comment-form input:focus-within,
    .jo-blog-comment-form textarea:focus,
    .jo-blog-comment-form textarea:focus-visible,
    .jo-blog-comment-form textarea:focus-within {
        outline: none;
    }

.jo-blog-comment-form textarea {
    padding: clamp(15px, 1.05vw, 20px);
    height: 200px;
    vertical-align: top;
}

.jo-blog-comment-form button {
    background-color: var(--ttRed);
    height: clamp(45px, 2.94vw, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(18px, 1.26vw, 24px);
    border-radius: 6px;
    gap: 8px;
    color: var(--white);
    margin-top: clamp(15px, 1.58vw, 30px);
}

    .jo-blog-comment-form button i {
        font-size: 22px;
        padding-top: 3px;
    }


.footer-box {
    background-color: #ececec;
    padding: 20px 25px;
    border-radius: 12px;
    text-align: center;
    color: #fff;
    transition: 0.3s;
}

    .footer-box a {
        text-decoration: none;
        color: #000000;
        font-size: 16px;
    }

    .footer-box:hover {
        background-color: #ececec;
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }

.jo-footer-widget__title {
    font-size: 20px;
    margin-bottom: 8px;
    text-align:center;
}

/*# sourceMappingURL=style.css.map */
* {
    scroll-behavior: smooth;
}


@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pulse-slow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.2
    }

    50% {
        transform: scale(1.05);
        opacity: 0.3
    }
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out;
}

.animate-fade-in {
    animation: fade-in 1s ease-out;
}

.animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
}

.animate-slide-down {
    animation: slide-down 0.3s ease-out;
}

.animate-blink {
    animation: blink 1s ease-in-out infinite;
}

.nav-link {
    position: relative;
    color: #4b5563;
    transition: color .3s;
    font-weight: 500;
}

    .nav-link::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #3b82f6, #8b5cf6);
        transition: width .3s;
    }



.mobile-nav-link {
    display: block;
    padding: .75rem 1rem;
    color: #374151;
    border-radius: .5rem;
    transition: all .25s;
}

    .mobile-nav-link:hover {
        background: #eff6ff;
        color: #1e40af;
    }

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.gradient-text {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mobile-menu {
    animation: slide-down .25s ease-out;
}

/* small svg icon sizes */
.icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.icon-lg {
    width: 28px;
    height: 28px;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.name-premium {
    font-weight: 900;
    text-transform: uppercase;
    background: linear-gradient(90deg, #06b6d4, #3b82f6, #a855f7);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.morph-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 22%;
    animation: morphShape 10s ease-in-out infinite;
    border: 5px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transition: 0.5s;
}

@keyframes morphShape {
    0% {
        border-radius: 25% 35% 45% 20% / 30% 40% 50% 25%;
    }

    50% {
        border-radius: 40% 20% 35% 45% / 55% 25% 40% 30%;
    }

    100% {
        border-radius: 25% 35% 45% 20% / 30% 40% 50% 25%;
    }
}

.morph-image {
    transition: 0.6s ease;
}

.morph-wrapper:hover .morph-image {
    transform: scale(1.07);
}

@keyframes scaleIn {
    0% {
        transform: scale(.7);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-scaleIn {
    animation: scaleIn 0.25s ease-out;
}

.filter-btn {
    padding: 8px 20px;
    border: 2px solid #7c3aed;
    border-radius: 999px;
    color: #7c3aed;
    font-weight: 600;
    transition: .3s;
}

    .filter-btn.active,
    .filter-btn:hover {
        background: linear-gradient(to right, #4f46e5, #9333ea);
        color: #fff;
    }

.insta-card {
    background: white;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px #0001;
    transition: .4s;
}

    .insta-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px #0002;
    }

.insta-img {
    height: 300px;
    overflow: hidden;
}

.post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s;
}

.insta-card:hover .post-image {
    transform: scale(1.12);
}

.insta-info {
    padding: 15px;
    text-align: center;
}

.insta-name {
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(to right, #4f46e5, #9333ea);
    -webkit-background-clip: text;
    color: transparent;
}

.gradient-text {
    background: linear-gradient(to right, #4f46e5, #9333ea, #ec4899);
    -webkit-background-clip: text;
    color: transparent;
}

.gradient-text {
    background: linear-gradient(90deg, #4f46e5, #9333ea, #ec4899);
    -webkit-background-clip: text;
    color: transparent;
}

.brand-track {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    padding: 0.75rem 0;
    transform: translateX(0);
    will-change: transform;
}

.brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    width: 150px;
    height: 60px;
    background: white;
    border-radius: 12px;
    padding: .5rem;
    cursor: pointer;
    filter: grayscale(85%) contrast(.9) opacity(.9);
    transition: .35s cubic-bezier(.2, .9, .2, 1);
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
}

    .brand-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .brand-item:hover {
        filter: none;
        transform: translateY(-6px) scale(1.06);
        z-index: 10;
    }

@media(max - width:640px) {
    .brand-item {
        min-width: 120px;
        width: 120px;
        height: 48px;
    }
}

#brands {
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.03), rgba(236, 72, 153, 0.03));
}

.testimonial-card {
    min-width: 330px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all .4s ease;
}

    .testimonial-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 35px rgba(0, 0, 0, .08);
    }

#testTrack {
    transition: transform .6s ease-in-out;
}
/* mini card */
.vt-mini-card {
    min-width: 170px;
    cursor: pointer;
    transition: .3s ease;
}

    .vt-mini-card:hover {
        transform: translateY(-8px) scale(1.05);
    }

/* video container */
.vt-video-container {
    position: relative;
    height: 240px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    animation: float 4s ease-in-out infinite;
}

/* floating animation */
@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

/* video */
.vt-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s;
}

.vt-mini-card:hover .vt-video {
    transform: scale(1.12);
}

/* gradient overlay */
.vt-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent);
}

/* text */
.vt-text {
    position: absolute;
    bottom: 10px;
    left: 12px;
    color: white;
}

    .vt-text h4 {
        font-size: 15px;
        font-weight: bold;
    }

    .vt-text p {
        font-size: 12px;
        opacity: .8;
    }

/* modal animation */
#vtModalBox.scale-1 {
    transform: scale(1);
}

.img-wrapper {
    position: relative;
    width: 400px; /* jarur pade to adjust karo */
    margin: auto;
    top: -50px;
}

    .img-wrapper img.bg-img {
        width: 100%;
        display: block;
    }

    .img-wrapper img.center-img {
        position: absolute;
        top: 47%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 250px; /* upar ni image size */
        z-index: 2;
    }

@media(max-width:768px) {
    .bg-img {
        margin-left: -53px;
    }

    .jo-circle-box .circle-4 {
        left: 250px;
    }

    .img-wrapper {
        width: 90%;
    }

    .jo-circle-box .circle-3 {
        left: 250px;
    }

    #home span, #about span, #portfolio span, #blog span, #services span, #contact span {
        display: none;
    }

    #testRight {
        margin-right: 18px;
    }

    #testLeft {
        margin-left: 10px;
    }
}

.main_class {
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(14px);
    border-radius: 20px;
    padding: 25px;
}

/* FLEX MAIN CONTAINER */
.reg-container {
    display: flex;
    gap: 25px;
    max-width: 1300px;
    margin: auto;
    flex-wrap: wrap;
}

/* LEFT SIDEBAR (Responsive Fixed Width) */
.sidebar-box {
    width: 300px;
    min-width: 250px;
    background: #07d0ff;
    padding: 25px;
    border-radius: 20px;
    flex-shrink: 0;
}

.step-btn {
    width: 100%;
    background: #fff;
    border: none;
    padding: 13px;
    margin-bottom: 15px;
    border-radius: 12px;
    font-weight: 600;
    transition: 0.3s;
    cursor: pointer;
}

    .step-btn.active {
        border-left: 6px solid #0066ff;
        color: #0066ff;
    }

    .step-btn:hover {
        transform: scale(1.03);
    }

/* RIGHT PANEL */
.right-panel {
    flex: 1;
    min-width: 350px;
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0px 10px 35px rgba(0,0,0,0.15);
}

/* STEPPER */
.stepper-wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 35px;
    margin-top: 10px;
}

    .stepper-wrapper:before {
        content: "";
        position: absolute;
        top: 19px;
        left: 0;
        width: 100%;
        height: 4px;
        background: #d8d8d8;
        border-radius: 10px;
    }

.stepper-step {
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 2;
}

.step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d8d8d8;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #d8d8d8;
    font-weight: 600;
    transition: 0.3s;
}

.stepper-step.active .step-circle {
    background: #ff0066;
    border-color: #ff0066;
    color: #fff;
}

.active-line {
    position: absolute;
    top: 19px;
    left: 0;
    height: 4px;
    background: #ff0066;
    border-radius: 10px;
    transition: 0.4s ease;
    width: 0%;
    z-index: 1;
}

/* FORM INPUT */
.form-control {
    padding: 12px;
    border-radius: 12px;
}

.btn-next {
    background: linear-gradient(45deg, #E94057, #FF7BAC);
    padding: 12px 30px;
    border-radius: 14px;
    border: none;
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    transition: 0.3s;
}

    .btn-next:hover {
        transform: scale(1.05);
        background: linear-gradient(45deg, #F72585, #6B4EFF);
    }

/* HIDE OTHER STEPS */
.step-content {
    display: none;
}

.active-step {
    display: block;
}

/* RESPONSIVE FIX */
@media(max - width: 992px) {
    .reg-container {
        flex-direction: column;
    }

    .sidebar-box {
        width: 100%;
    }

    .right-panel {
        width: 100%;
    }
}

@media(max - width: 576px) {
    .step-btn {
        font-size: 14px;
        padding: 10px;
    }

    .right-panel {
        padding: 25px;
    }
}

.btn-sm {
    background: #6B4EFF;
    color: white;
    font-weight: 600;
    border-radius: 10px;
    padding: 8px 20px;
}

.pricing-title {
    text-align: center;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 40px;
    background: linear-gradient(to right, #6366f1, #ec4899, #f97316);
    -webkit-background-clip: text;
    color: transparent;
}

.pricing-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.pricing-card {
    width: 320px;
    padding: 28px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: .3s;
    position: relative;
    overflow: hidden;
}

    .pricing-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 35px rgba(0,0,0,0.15);
    }

/* Tagline badge */
.tag-badge {
    position: absolute;
    top: 18px;
    right: -40px;
    background: linear-gradient(to right, #4f46e5, #9333ea, #ec4899);
    color: white;
    padding: 6px 50px;
    font-size: 12px;
    font-weight: 600;
    transform: rotate(40deg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Coming Soon (animated glow) */
.coming-btn {
    width: 100%;
    padding: 12px 0;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    border: none;
    cursor: not-allowed;
    background: #d4d4d8;
    color: #555;
    position: relative;
    overflow: hidden;
}

    .coming-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 300%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
        animation: slideShine 2s infinite;
    }

@@keyframes slideShine {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

.buy-btn {
    width: 100%;
    padding: 12px 0;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    background: linear-gradient(to right, #6366f1, #ec4899, #f97316);
    color: white;
    transition: 0.3s;
}

    .buy-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(236, 72, 153, 0.35);
    }

.card-title {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
}

.price-box {
    text-align: center;
    margin: 18px 0;
}

.offer-price {
    font-size: 40px;
    font-weight: 800;
    color: #22c55e;
}

.old-price {
    text-decoration: line-through;
    color: #ef4444;
    margin-left: 8px;
    font-size: 16px;
}

.desc {
    text-align: center;
    color: #6b7280;
    font-size: 15px;
    margin-bottom: 20px;
}

.validity {
    text-align: center;
    font-size: 14px;
    color: #6366f1;
    margin-bottom: 20px;
}

.access-btn {
    transition: 0.3s ease-in-out;
    transform: translateY(0px);
}

    .access-btn:hover {
        background-color: #e63b50 !important;
        color: #fff !important;
        transform: translateY(-4px);
        box-shadow: 0px 8px 20px rgba(230, 59, 80, 0.35);
    }

/* Smooth fade-in animation */
.access-btn {
    animation: fadeUp 0.8s ease;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.back_home {
    padding: 12px 40px;
    font-size: 16px;
    border-radius: 40px;
    border: 2px solid #e63b50;
    color: #e63b50;
    text-align: center;
    text-decoration: none;
}

@media(max-width:768px) {
    .avatar {
        margin-right: 43px;
        margin-top: 13px;
    }
}