body {
    height        : 100% !important;
    font-size     : 16px;
    color         : #333333;
    font-family   : 'Roboto', sans-serif;
    vertical-align: baseline;
    line-height   : 26px;
    font-weight   : 400;
    overflow-x    : hidden;

}



.padding_gap_box {
    padding: 0px 12%;
}

p {
    margin   : 0px 0 12px;
    font-size: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin     : 0 0 26px;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
}

.bg-img {
    background-image: url("image/bg-img.png");
    background-size : cover;
}

.support {
    font-size   : 18px;
    margin-right: 20px;
    color       : #7a12d4;
    margin-top  : 13px;
}

.login-btn {
    border-color : #7a12d4;
    border-radius: 20px;
    padding      : 10px;
    font-size    : 18px;
}

.main-title h1 {
    text-align    : center;
    margin-top    : 50px;
    color         : #595e67;
    font-size     : 22px;
    letter-spacing: 0.3px;
    font-weight   : 700;
}

.main-title h2 {
    text-align : center;
    font-size  : 50px;
    margin-top : 20px;
    line-height: 4rem;
    font-weight: 700;
    color      : #000
}

.main-title h3 {
    text-align    : center;
    margin-top    : 30px;
    letter-spacing: 0.2px;
    font-size     : 20px;
    color         : #000
}

.membership-page {
    margin-top   : 50px;
    margin-bottom: 50px;
}

.membership-img img {
    width        : 100%;
    border-radius: 20px;
}

.pricing-card {
    background   : #fff;
    border-radius: 20px;
    width        : 350px;
    box-shadow   : 0 10px 30px rgba(0, 0, 0, 0.1);
}

.tab_menu_box a {
    font-size: 15px;
}

/* Toggle */
.toggle-btn .btn {
    border-radius: 20px;
    padding      : 6px 18px;
    font-weight  : 500;
}

.btn-purple {
    background: linear-gradient(#9b37f2, #7a12d4);
    color     : #fff;
}

.toggle-btn .active {
    background: #eaeaea;
}

/* Price */
.price {
    font-size: 60px;
    color    : #111;
}

/* Gradient Button */
.btn-gradient {
    background   : linear-gradient(45deg, #ff7e00, #ff4d00);
    color        : #fff !important;
    border-radius: 30px !important;
    font-weight  : bold !important;
    transition   : 0.3s !important;
}

.btn-gradient:hover {
    opacity: 0.9;
}

/* Payment icons */
.payments img {
    width : 37px;
    margin: 5px;
}

.member-title {
    font-size: 13px !important;
}

.powered {
    text-align   : center;
    font-size    : 16px;
    margin-bottom: 10px;
}

.powered span {
    font-weight: bold;
    color      : #333;
}

.vat {
    font-size    : 13px;
    color        : #555;
    margin-bottom: 15px;
}

.box-two {
    font-size: 14px !important;
    color    : #fff;
}

.box-two span {
    color    : #ff0101;
    font-size: 20px;
}

.secure {
    display    : flex;
    align-items: flex-start;
    gap        : 10px;
}

.icon {
    width          : 35px;
    height         : 35px;
    border         : 2px solid #999;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 16px;
}

.secure p {
    font-size: 14px;
    color    : #333;
    margin   : 0;
}

/* tab content start */
.course {
    margin-top   : 30px;
    margin-bottom: 30px;
    color        : #000;
}

.program-title h2,
h6 {
    text-align: center;
    color     : #000;
}



.tab-header {
    display         : flex;
    position        : relative;
    border-bottom   : 2px solid #eee;
    border-top      : 2px solid #eee;
    background-color: #fff;
}

.tab-btn {
    flex       : 1;
    padding    : 15px;
    background : none;
    border     : none;
    cursor     : pointer;
    font-size  : 14px;
    font-weight: 600;
    color      : #666;
    transition : color 0.3s;
}

.tab-btn.active {
    color: #5f2ded;
}

.tab-line {
    position     : absolute;
    bottom       : -2px;
    left         : 0;
    width        : 10.33%;
    height       : 3px;
    background   : #5f2ded;
    transition   : all 0.4s ease;
    border-radius: 5px;
}


.tab-content {
    display  : none;
    padding  : 25px;
    animation: fade 0.4s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fade {
    from {
        opacity  : 0;
        transform: translateY(10px);
    }

    to {
        opacity  : 1;
        transform: translateY(0);
    }
}

/* .programe_conent_box {
    padding: 50px;
} */

.programe_conent_box h4 {
    color           : #000 !important;
    font-size       : 50px !important;
    font-weight     : 900;
    text-align      : center;
    /* margin-bottom: 30px; */
}

.programe_conent_box-1 h4 {
    color         : #000 !important;
    font-size     : 38px !important;
    font-weight   : 600;
    text-align    : left;
    margin-bottom : 30px;
    letter-spacing: -0.8px;
    line-height   : 45px;
}

.programe_conent_box p {
    font-size     : 18px !important;
    text-align    : justify;
    letter-spacing: 0.8px;
    padding-bottom: 15px;
    font-weight   : 400 !important;
}

.program_img_box img {
    width        : 100%;
    border-radius: 15px;
    margin-top   : 15px;
    margin-bottom: 20px;
}

.credentials {
    font-weight: 600;
    font-size  : 26px;
}

.programe_conent_box h6 {
    margin-top : 25px;
    font-size  : 23px;
    text-align : start;
    font-weight: 600;
}

.course-image img {
    border-radius   : 20px;
    /* margin-bottom: 30px;
    margin-top      : 30px; */
    width           : 100%;
}

.programe_conent_box h3 {
    font-weight: 500;
    font-size  : 26px;
}


.method_content_box {}

.method_content_box h5 {
    color        : #292d38;
    margin-bottom: 10px;
}

.method_content_box p {
    font-size: 17px !important;
}

/* Info Boxes */
.info-box {
    position       : absolute;
    background     : rgba(200, 180, 255, 0.3);
    backdrop-filter: blur(10px);
    padding        : 15px 20px;
    border-radius  : 12px;
    max-width      : 280px;
    color          : #5a2ea6;
    box-shadow     : 0 4px 15px rgba(0, 0, 0, 0.1);
}

.info-box h4 {
    font-weight  : 700;
    margin-bottom: 5px;
}

.info-box p {
    font-size: 14px;
    margin   : 0;
    color    : #333;
}

/* Positioning */
.box1 {
    top  : 20%;
    right: -40px;
}

.box2 {
    top  : 45%;
    right: -60px;
}

.box3 {
    bottom: 10%;
    right : -30px;
}

/* Responsive */
@media (max-width: 768px) {
    .info-box {
        position  : static;
        margin-top: 15px;
    }
}

/* Image Container */
.main-image-container {
    position : relative;
    max-width: 500px;
}

/* Floating Cards Styling */
.floating-card {
    position        : absolute;
    background      : var(--soft-purple);
    border-radius   : 12px;
    box-shadow      : rgba(0, 0, 0, 0.24) 0px 3px 8px;
    width           : 280px;
    z-index         : 2;
    background-color: #eedaff;

}

.floating-card h5 {
    color: #7a12d4;
}

/* Positions */
.top-right {
    top  : 10%;
    right: -120px;
}

.center-right {
    top  : 45%;
    right: -160px;
}

.bottom-right {
    bottom: 0%;
    right : -120px;
}

/* Tags Styling */
.growth-tag {
    border       : 1px solid #dee2e6;
    padding      : 8px 16px;
    border-radius: 50px;
    font-size    : 0.9rem;
    color        : #333;
    transition   : all 0.3s ease;
}

/* .growth-tag:hover {
    background-color: var(--brand-purple);
    color           : white;
    border-color    : var(--brand-purple);
} */

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .floating-card {
        position  : relative;
        right     : 0 !important;
        top       : 0 !important;
        bottom    : 0 !important;
        margin-top: 15px;
        width     : 100%;
    }

    .main-image-container {
        max-width: 100%;
    }
}




.custom-card {
    border       : none;
    border-radius: 12px;
    box-shadow   : rgb(0 0 0 / 17%) 0px 3px 8px;
    transition   : transform 0.3s ease;
    height       : 87%;
    border-top   : 8px solid #7d2ae8;
    /* Purple top bar */
}

.custom-card:hover {
    transform: translateY(-5px);
}

.three-card {
    margin-top             : 50px;
    height                 : 16px;
    width                  : 100%;
    background             : #7a12d4;
    border-top-left-radius : 71px !important;
    border-top-right-radius: 71px !important;

}

.three-card-body {
    padding      : 3rem 1.5rem;
    text-align   : center;
    box-shadow   : rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 20px;
    height       : 223px;
}

/* Hexagon Icon Container */
.icon-wrapper {
    color        : #7d2ae8;
    font-size    : 2.5rem;
    margin-bottom: 1.5rem;
    display      : inline-block;
    position     : relative;
    width        : 80px;
    height       : 80px;
    line-height  : 80px;
}

/* Simulating the hexagonal border from the image */
.icon-wrapper::after {
    content : "";
    position: absolute;
    top     : 0;
    left    : 0;
    right   : 0;
    bottom  : 0;
    border  : 2px solid #7d2ae8;

}

.card-text {
    font-weight: 600;
    color      : #1a1a1a;
    font-size  : 1.15rem;
    line-height: 1.4;
}

/* tab content end */

/* part 1 start */
.wrapper {
    max-width: 900px;
    margin   : auto;
}

.part {
    position     : relative;
    padding-left : 40px;
    margin-bottom: 30px;
}

.part::before {
    content      : '';
    position     : absolute;
    left         : 12px;
    top          : 8px;
    width        : 12px;
    height       : 12px;
    background   : #5f2ded;
    border-radius: 50%;
    animation    : blinkDot 1.5s infinite ease-in-out;
}

@keyframes blinkDot {
    0% {
        box-shadow: 0 0 0 0 rgba(122, 44, 255, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(122, 44, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(122, 44, 255, 0);
    }

}

.part small {
    color        : #5f2ded;
    font-weight  : 600;
    display      : block;
    margin-bottom: 6px;
}

.part h2 {
    font-size: 22px;
    margin   : 0 0 6px;
}

.toggle-btn {
    font-size    : 14px;
    color        : #5f2ded;
    cursor       : pointer;
    user-select  : none;
    display      : inline-block;
    margin-bottom: 10px;
}

.part-content {
    display    : none;
    margin-top : 10px;
    color      : #444;
    line-height: 1.6;
}



.part .line {
    position  : absolute;
    left      : 17px;
    top       : 20px;
    bottom    : -39px;
    width     : 2px;
    background: #5f2ded;
}

.part .line {
    animation: lineGrow 1.5s infinite;
}

@keyframes lineGrow {
    0% {
        opacity: .3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .3;
    }
}

/* part 2 start */

/* photo start */
.photo-section {
    margin-top      : 30px;
    /* margin-bottom: 50px; */
}

.image-sec {
    margin-bottom: 70px;
}

.photo-sec img {
    width        : 100%;
    border-radius: 20px;

}

/* photo end */

/* As seen on start */
.as-seen-on {
    box-shadow   : rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    padding      : 20px;
    border-radius: 10px;
    height       : 100%;

}

.as-soon-title {
    text-align   : center;
    font-size    : 40px;
    font-weight  : 900;
    margin-top   : 30px;
    margin-bottom: 30px;
}

.bg-grey {
    background-color: #f9f9f9;
    padding         : 30px;
}

.as-seen-on img {
    width: 100%;
}

.small-image {
    width        : 40% !important;
    margin-top   : 20px;
    margin-bottom: 20px;
    height       : 54px;
}

.as-seen-on h5 {
    font-size    : 20px;
    font-weight  : 600;
    margin-bottom: 30px;
}

/* As seen on end */

/*  Case Studies Start */
.main-title {
    font-size     : clamp(2.5rem, 8vw, 5rem);
    /* Responsive typography */
    line-height   : 1.1;
    letter-spacing: -2px;
}

.number-accent {
    margin-right: 20px;
    font-size   : 80px;
    font-weight : 700;
}


/* Image Stacking Logic */
.image-stack {
    position   : relative;
    display    : inline-flex;
    align-items: center;
    height     : 80px;
}

.stack-img {
    width: 100%;

    margin-left: -15px;
    object-fit : cover;
}

.logo-row img {
    height    : 40px;
    object-fit: contain;

    transition: 0.3s;
}

.logo-row img:hover {
    opacity  : 1;
    transform: scale(1.1);
}

/*  Case Studies Start end */

/* student result start */

.student-result h5 {
    margin-top: 20px;
}

.read-more {
    background-color: #5a2ea6;
    color           : #fff;
    padding         : 10px;
    border-radius   : 10px;
    font-size       : 18px;
}

.student-result h6 {
    text-align : start;
    margin-top : 20px;
    font-size  : 18px;
    font-weight: 600;
}

/* student result end */


/* Introducing Membership start */
.introducing-membership h4 {
    text-align   : center;
    margin-bottom: 30px;
    margin-top   : 50px;
}

.introducing-membership h5 {
    text-align   : center;
    margin-bottom: 30px;
    font-weight  : 600;
    font-size    : 25px;
}

.introducing-membership img {
    margin-bottom: 30px;
}

/* Introducing Membership end */

/* membership part 1 start */
.membership-desc {
    text-align: center;
}

.membership-title {
    font-weight: 600;
    text-align : center;
}

.number {
    color: #7a12d4;
}

.main-box {
    background-color: #f9f9f9;
    border          : 1px solid #000;
    padding         : 20px;
    border-radius   : 20px;

}

.custom-card {
    border: none;

    border-radius: 12px;
    transition   : 0.3s;
}

.custom-card img {
    width     : 100%;
    height    : 120px;
    object-fit: cover;
}

.custom-card:hover {
    transform: scale(1.05);
}

.tag-container {
    display  : flex;
    flex-wrap: wrap;
    gap      : 10px;
}

/* Tag style */
.tag {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    padding      : 8px 14px;
    background   : #fff;
    border       : 1px solid #ddd;
    border-radius: 25px;
    font-size    : 14px;
    color        : #333;
    cursor       : pointer;
    transition   : 0.3s;
}

/* Hover effect */
.tag:hover {
    background: #f0f0f0;
    transform : translateY(-2px);
}

/* Icon circle */
.tag-icon {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 22px;
    height         : 22px;
    border-radius  : 50%;
    font-size      : 12px;
    color          : #fff;
}

/* Colors */
.blue {
    background: #3498db;
}

.green {
    background: #2ecc71;
}

.yellow {
    background: #f1c40f;
}

.teal {
    background: #1abc9c;
}

.orange {
    background: #e67e22;
}

.pink {
    background: #e84393;
}

/* Try it for 15 days risk free start */
.risk-free-card {
    background-color   : #f8efff !important;
    border-radius      : 20px;
    padding            : 40px;
    /* width           : 60%; */
    border             : none;
    box-shadow         : 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom      : 50px;
}

/* The circular badge */
.badge-circle {
    background     : white;
    width          : 140px;
    height         : 140px;
    border-radius  : 50%;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    box-shadow     : 0 4px 10px rgba(0, 0, 0, 0.1);
    border         : 1px solid #eee;
}

.badge-number {
    font-size    : 3.5rem;
    font-weight  : 900;
    line-height  : 1;
    color        : #1a1a1a;
    margin-bottom: -5px;
}

.badge-text-days {
    font-size     : 1.2rem;
    font-weight   : 800;
    color         : #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.badge-label-black {
    background-color: #1a1a1a;
    color           : white;
    font-size       : 0.65rem;
    font-weight     : bold;
    padding         : 2px 8px;
    border-radius   : 4px;
    text-transform  : uppercase;
    margin-top      : 2px;
}

/* Typography */
.card-title {
    font-weight: 800;
    font-size  : 1.75rem;
    color      : #000;
}

.card-text {
    color      : #333;
    font-size  : 1.05rem;
    line-height: 1.6;
}

.refund-link {
    color          : #9b51e0;
    /* Purple link color */
    text-decoration: none;
    font-weight    : 600;
}

.refund-link:hover {
    text-decoration: underline;
}

/* Try it for 15 days risk free end */


/* Transform now with Mindvalley start */


.pricing-section {
    /* min-height      : 100vh; */
    background      : radial-gradient(circle at top right, #1a1e4a, #0a0e31);
    background-color: var(--mv-blue);
    padding         : 40px 0;
}

/* Custom Purple Tick */
.text-purple {
    color: var(--mv-purple);
}

/* Pricing Card */
.pricing-card {
    background   : white;
    border-radius: 20px;
    width        : 410px;
    box-shadow   : 0 20px 40px rgba(0, 0, 0, 0.3);
}



/* Transform now with Mindvalley end */

/* Less than 20 minutes a day. Anywhere, anytime start */
/* 
.learning-section {
    overflow-x: hidden;
} */

.steps-container {
    position    : relative;
    padding-left: 20px;
}

.step-card {
    position     : relative;
    margin-bottom: 2rem;
    max-width    : 450px;
    transition   : transform 0.3s ease;
}


.step-number {
    font-size  : 12rem;
    font-weight: 900;
    line-height: 1;
    color      : #000;
    position   : absolute;
    left       : -68px;
    top        : -20px;
    z-index    : 0;
    user-select: none;
}


.step-card .card {
    border       : 1px solid #a4a4a4;
    border-radius: 12px;
    z-index      : 1;
    background   : white;
    width        : 100%;
}


.step-2 {
    margin-left: 50px;
}

.step-3 {
    margin-left: 0px;
}

.step-4 {
    margin-left: 60px;
}

/* Responsive adjustments */
@media (max-width: 991px) {

    .step-2,
    .step-3,
    .step-4 {
        margin-left: 20px;
        /* Reset stagger for smaller screens */
    }

    .step-number {
        font-size: 6rem;
    }
}


/* Less than 20 minutes a day. Anywhere, anytime end */

/* Frequently asked questions start */
.accordion .accordion-item {
    border-bottom: 1px solid #e5e5e5;
}

.accordion .accordion-item button[aria-expanded='true'] {
    border-bottom: 1px solid #7911d4;
}

.accordion button {
    position   : relative;
    display    : block;
    text-align : left;
    width      : 100%;
    padding    : 1em 0;
    color      : #000;
    font-size  : 18px;
    font-weight: 400;
    border     : none;
    background : none;
    outline    : none;
}

.accordion button:hover,
.accordion button:focus {
    cursor: pointer;
    color : #7911d4;
}

.accordion button:hover::after,
.accordion button:focus::after {
    cursor   : pointer;
    color    : #7911d4;
    /* border: 1px solid #7911d4; */
}

.accordion button .accordion-title {
    padding    : 10px;
    color      : #000;
    font-weight: 600;
}

.accordion button .icon {
    display      : inline-block;
    position     : absolute;
    top          : 18px;
    right        : 13px;
    width        : 22px;
    height       : 22px;
    border       : 1px solid;
    border-radius: 22px;
}

.accordion button .icon::before {
    display   : block;
    position  : absolute;
    content   : '';
    top       : 9px;
    left      : 5px;
    width     : 10px;
    height    : 2px;
    background: currentColor;
}

.accordion button .icon::after {
    display   : block;
    position  : absolute;
    content   : '';
    top       : 5px;
    left      : 9px;
    width     : 2px;
    height    : 10px;
    background: currentColor;
}

.accordion button[aria-expanded='true'] {
    color: #7911d4;
}

.accordion button[aria-expanded='true'] .icon::after {
    width: 0;
}

.accordion button[aria-expanded='true']+.accordion-content {
    opacity    : 1;
    max-height : 9em;
    transition : all 200ms linear;
    will-change: opacity, max-height;
}

.accordion .accordion-content {
    opacity    : 0;
    max-height : 0;
    overflow   : hidden;
    transition : opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
}

.accordion .accordion-content p {
    font-size  : 1rem;
    font-weight: 300;
    margin     : 10px;
    padding    : 10px;
}

.curriculum img {
    width: 100%;
}

.curriculum-section {
    margin-top: 20px;
}

/* Frequently asked questions end */

/* What people say about Membership start start */
.tag-icon-wrapper i {
    color        : #7911d4;
    font-size    : 40px;
    margin-bottom: 20px;
}

.three-card {}

/* What people say about Membership start end */


/* responsive start */
@media (max-width:991px) {
    .programe_conent_box {
        padding: 0px !important;
    }

    .risk-free-card {
        width: 100% !important;
    }
}

/* new nav bar start */


.sticky-nav {
    position       : sticky;
    top            : 0 ;
    width          : 100%;
    background     : white;
    display        : flex ;
    justify-content: space-between ;
    padding        : 15px 30px;
    box-shadow     : 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index        : 1000 ;
}

.nav-links {
    display : flex;
    position: relative;
    gap     : 20px;
}

.nav-item {
    text-decoration: none;
    color          : #666;
    padding        : 10px 0;
    transition     : 0.3s;
}

.nav-item.active {
    color      : #000;
    font-weight: bold;
}


.tab-line {
    position  : absolute;
    bottom    : 0;
    height    : 3px;
    background: #7a12d4;
    transition: all 0.3s ease-in-out;
}

.btn-gradient {
    background     : linear-gradient(90deg, linear-gradient(45deg, #ff7e00, #ff4d00));
    color          : white;
    padding        : 10px 20px;
    border-radius  : 5px;
    text-decoration: none;
}

.nav-actions {
    display    : flex;
    align-items: center;
    gap        : 20px;
}



/* new nav bar end */
.play-win-section {
    padding: 25px 20% !important;
}

.fa-solid {
    color: #7911d4;
}

.display-1 {
    font-size: 54px !important;
}

.card-member {
    font-size: 25px !important;
}


/* ========================= */


.pt-60 {
    padding-top: 60px;
}

.choose_what_box {
    text-align   : left !important;
    background   : #fff;
    border-radius: 16px;
    box-shadow   : 0 5px 20px rgba(0, 0, 0, .1);
    padding      : 15px;
    border-top   : 6px solid #ea4c89;
}

.choose_what_box h6 {
    text-align   : left !important;
    margin-top   : 15px !important;
    margin-bottom: 15px !important;
    font-size    : 20px;
}

.choose_what_box p {
    text-align: left !important;
}

/* responsive start */
@media (max-width: 767px) {
 /* .sticky-nav {
    display: block !important;
  } */

  .padding_gap_box {
    padding: 0px !important;
  }
  .programe_conent_box h4{
    font-size: 30px !important;
  }
  .choose_what_box{
    margin-bottom: 20px;
  }
}
/* responsive end */