/*sales_new*/

@import url('https://fonts.googleapis.com/css2?family=Handlee&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    
}

body,
html {
    font-size: 62.5%;
    overflow-x: hidden;
}

.desktop-max-width {
    max-width: 130rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

:root {
    --brand-color: #3B6EE3;

    --hand-font: "Handlee", cursive;
}

.gradient-text .brand-text{
  background: linear-gradient(90deg, #151f9d, #ea0294);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.red-text {
    color: rgb(235, 0, 0);
}

.yellow-text {
    color: rgb(230, 230, 0);
}

.light-pink-text {
    color: #fdf0d5;
}

.blueviolet-text {
    color: blueviolet;
}



.image100 {
    width: 100%;
}




.bg-blue {
    background-color: #4D6BFE;
}

.bg-green {
    background-color: #00E800;
}

.bg-blueviolet {
    background-color: blueviolet;
}
.bg-indigo{
    background-color: indigo;
}
.indigo-box{
    padding: 3.2rem;
    border-radius: 2.4rem;
    backdrop-filter: blur(3px);
}
.margin-0{
    margin-bottom: 0rem!important;
}

.bg-pink {
    background-color: rgb(255, 28, 168);
}

.bg-skin {
    background-color: #fdf0d5;
}

.image-positining{
    position: absolute;
    top: 7%;
    left: 0%;
}

.para-1 {
    font-size: 1.8rem;
    font-weight: 400;
    color: #fafafa;
    line-height: 150%;
    margin-bottom: 1.4rem;
}

.para-2 {
    font-size: 2.4rem;
    font-weight: 400;
    color: #fafafa;
    line-height: 150%;
    margin-bottom: 2.4rem;
}

.para-3 {
    font-size: 3.2rem;
    font-weight: 400;
    color: #fafafa;
    line-height: 150%;
    margin-bottom: 2.4rem;
}


.heading-1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #fafafa;
    line-height: 150%;
    text-align: center;
    margin-bottom: 2.4rem;
}


.heading-2 {
    font-size: 6rem;
    font-weight: 700;
    color: #fafafa;
    line-height: 150%;
    text-align: center;
    margin-bottom: 2.4rem;
}


.heading-3 {
    font-size: 6rem;
    font-weight: 700;
    color: #fafafa;
    line-height: 150%;
    text-align: center;
    margin-bottom: 2.4rem;
}

.hand-font {
    font-family: var(--hand-font);
}

.blue-dot-border-pill {
    padding: 2.4rem;
    border: 1.6px dashed var(--brand-color);
    width: fit-content;
}


.t-center {
    text-align: center;
}

.everything-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.stripe {
    width: 100%;
    padding: 2.4rem 20rem;
    margin-bottom: 0rem;

    background-color: blueviolet;
    color: #fff;
}

.placeholder {
    width: 100%;

    border: 1.6px dashed blueviolet;

}





/* hero: start  */
.hero {
    position: relative;
    padding: 1rem 0rem 5rem;
    z-index: 1;
    overflow: hidden;
    
}

.hero::before {
     content: "";
    position: absolute;
    inset: 0;
    background: black;
    opacity: 1; /* <-- adjust this */
    z-index: -1;
}



.hero-heading {
    font-size: 5rem;
    font-weight: 700;
    color: #fafafa;
    line-height: 139%;
    text-align: center;
}





.grid-2-col-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem;
}

.hero-item-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
}

.hero-assured {
    width: 25rem;
}

.hero-payment {
    width: 32rem;
}

.blue-border-pill {
    padding: 2.4rem;
    border: 1.2px solid rgb(0, 0, 228);


    width: 100%;
    text-align: center;
}

/* inline image that behaves like an emoji */
.inline-emoji {
  width: 1.7em;
height: 1.7em;
vertical-align: -0.32em;
     /* keep aspect ratio */
  object-fit: contain;
  display: inline-block;
   /* small space after the image */
  pointer-events: none; /* optional: image doesn't catch clicks */
}



.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #fcb040, #ff9500);
    color: white;
    font-weight: bold;
    font-size: 3.2rem;
    padding: 2rem 2.3rem;
    border: none;
    border-radius: 99rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s;
    border: 5px solid white;
    width: 100%;
    text-align: center;



}

.cta-button:hover {
    transform: scale(1.05);
}

.cta-button i {
    margin-right: 12px;
    font-size: 2.4rem;
}

.cta-assured {
    margin-bottom: 1.2rem;
}


.list-box {
    .list-item {

        display: flex;
        align-items: flex-start;
        justify-content: start;
        gap: .4rem;

        margin-bottom: 1.6rem;

        .list-item-image {
            width: 5.2rem;
            height: 5.2rem;
        }
    }
}
.video-div{
    width: 100%;
    border: 3px solid #9f28f5;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 3rem;
}

.dotted-bg {
    background-image: url('../assets2/course/border.webp'); /* your dotted boundary image */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    display: inline-block;

    padding: 10px 12px 10px; /* top, left/right, bottom */
    line-height: 1.15;      
}


.underline-img {
    position: relative;
    display: inline-block;
    z-index: 10;
}

.underline-img::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;    /* move underline up/down */
    width: 100%;
    height: 12px;    /* adjust based on your image height */
    z-index: 10;
    background-image: url('../assets2/course/underline.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;  /* makes it stretch perfectly under the word */
}

/* hero: end  */




/* random1: start */

.random {
    padding: 8rem 0rem;
    background: url(../assets2/course/bg-3.webp) no-repeat center center / cover;
    margin-top: 0rem;
}

.random1_image {
    margin: 0rem 0rem 2rem;
    width: 64rem;
}

/* random1: end */











/* ==========================================================================
   SECTION 3: OFFER CARD - COMMON STYLES (All Devices)
   ========================================================================== */
#offer-section {
    background-color: #05051a; 
    position: relative;
}

.offer-card {
    background-color: #ffffff;
    border: 3px solid #ea0294; /* Pink Brand Border */
    margin: 0 auto; /* Centers the card */
    text-align: center;
    box-shadow: 0 0 50px rgba(234, 2, 148, 0.2); /* Pink Glow */
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;

}

.offer-headline {
    font-family: var(--font-headline);
    color: #000000;
    font-weight: 800;
    line-height: 1.2;
}

.offer-subhead {
    font-family: var(--font-body);
    color: #444;
    font-weight: 500;
}

.strike-price {
    text-decoration: line-through;
    color: #777;
    margin-right: 10px;
}

.hot-price {
    color: #ea0294;
    font-weight: 800;
}

.big-cta-btn {
    background: linear-gradient(90deg, #9900ff 0%, #ff00cc 100%);
    color: white;
    font-family: var(--font-headline);
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(153, 0, 255, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    
}

.big-cta-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 35px rgba(153, 0, 255, 0.6);
}

.urgency-strip {
    background-color: #ffe6f7;
    color: #d100b2;
    border-radius: 5px;
    display: inline-block;
    font-weight: 600;
        animation: pulseZoom 1.6s ease-in-out infinite;
    transform-origin: center;
}
@keyframes pulseZoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.guarantee-badge {
    border: 2px solid #ea9e02;
    color: #ea9e02;
    font-weight: 700;
    background: #fff8e1;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.license-note {
    border: 2px dashed #ea0294;
    border-radius: 50px;
    display: inline-block;
    color: #05051a;
    font-weight: 700;
}

/* ==========================================================================
   SECTION 3: DESKTOP / FULL SIZE (1920x1080 & Laptops)
   ========================================================================== */
@media screen and (min-width: 993px) {
    #offer-section {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 80px 0 120px 0;
    }

   .offer-card {
        max-width: 1400px;
        width: 100%;
        margin: 0 auto !important;
        border-radius: 20px;
    }

    .offer-headline {
        font-size: 6rem; /* Big, high-impact text */
        margin-bottom: 25px;
    }

    .offer-subhead {
        font-size: 3.5rem;
        margin-bottom: 40px;
    }

    .big-cta-btn {
        display: inline-block;
        padding: 22px 70px; /* Big click area */
        font-size: 3.5rem;
        margin-bottom: 35px;
        width: auto; /* Allow button to size itself */
    }

    .trust-badges-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        margin-bottom: 35px;
    }

    .urgency-strip {
        padding: 12px 30px;
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .guarantee-badge {
        padding: 8px 20px;
        font-size: 2rem;
        margin-top: 40px;
    }

    .license-note {
        padding: 12px 30px;
        font-size: 2rem;
    }
}

/* ==========================================================================
   SECTION 3: MOBILE STYLES (Phones & Small Tablets)
   ========================================================================== */
@media screen and (max-width: 992px) {
    #offer-section {
        padding: 50px 0 80px 0;
    }

    .offer-card {
        padding: 30px 20px;
        width: 92%; /* Use full available width */
        border-radius: 15px;
        border-width: 2px; /* Thinner border for mobile */
    }

    .offer-headline {
        font-size: 1.8rem; /* Readable on phone */
        margin-bottom: 15px;
    }

    .offer-subhead {
        font-size: 1rem;
        margin-bottom: 25px;
        display: flex;
        flex-direction: column; /* Stack price on mobile */
        gap: 5px;
    }

    .big-cta-btn {
        display: block; /* Make it a block element */
        width: 100%; /* Full width button */
        padding: 16px 10px;
        font-size: 1.2rem;
        margin-bottom: 25px;
    }

    .trust-badges-row {
        display: flex;
        flex-direction: column; /* Stack badges vertically */
        gap: 15px;
        margin-bottom: 25px;
    }

    .urgency-strip {
        padding: 8px 15px;
        font-size: 0.9rem;
        margin-bottom: 15px;
        width: 100%;
    }

    .guarantee-badge {
        padding: 8px 15px;
        font-size: 0.9rem;
        width: 100%; /* Full width badge */
    }

    .license-note {
        padding: 8px 15px;
        font-size: 0.9rem;
        width: 100%;
    }
}








/* Container Logic */
.template-showcase {
    background: url(../assets2/course/create-section1.webp)no-repeat center center/cover;
    padding: 80px 0;
    overflow: hidden;
    width: 100%;
    position: relative;
}


.showcase-top-header {
    text-align: center;
    margin-bottom: 50px; /* Space between title and images */
    padding: 0 20px;
}

.showcase-top-header h2 {
    font-size: 6rem; /* Big, confident title */
    font-weight: 800;
    color: #111;
    margin-bottom: 10px;
    letter-spacing: -1px; /* Tighter spacing for modern look */
}

.showcase-top-header .subhead {
    font-size: 3.5rem;
    color: #555;
    font-weight: 500;
}
.scroll-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 40px; /* Space between the two rows */
}

.scroll-track {
    display: flex;
    gap: 30px; /* Gap between images */
    width: max-content;
    will-change: transform;
}

/* --- BIG IMAGES --- */
.template-img {
    height: 180px; /* Large Size as requested */
    width: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Stronger shadow for depth */
    transition: transform 0.3s ease;
    display: block;
}

/* Hover Effect */
.template-img:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    cursor: pointer;
}

/* --- ANIMATION LOGIC --- */

/* 1. Move Left to Right */
@keyframes scrollLeftToRight {
    0% { transform: translateX(-25%); }
    100% { transform: translateX(0); }
}

.move-left-to-right {
    /* Speed is 20s (Faster) */
    animation: scrollLeftToRight 20s linear infinite;
}

/* 2. Move Right to Left */
@keyframes scrollRightToLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-25%); }
}

.move-right-to-left {
    /* Speed is 20s (Faster) */
    animation: scrollRightToLeft 20s linear infinite;
}

/* Pause on Hover */
.scroll-container:hover .scroll-track {
    animation-play-state: paused;
}

/* --- FADE GRADIENTS --- */
.fade-overlay {
    position: absolute;
    top: 0; bottom: 0;
    width: 150px; /* Wider fade for bigger images */
    z-index: 2;
    pointer-events: none;
}
.fade-left {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
}
.fade-right {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
}

/* --- RESPONSIVE --- */
@media screen and (max-width: 1024px) {
    .template-img {
        height: 250px; /* Smaller on laptops */
    }
}

@media screen and (max-width: 768px) {
    .template-img {
        height: 80px; /* Smaller on mobile to fit screen */
        border-radius: 10px;
        width:120px ;
    }
    .scroll-track {
        gap: 15px;
    }
    .fade-overlay {
        width: 50px;
    }
}

/* --- EXISTING SCROLLING CSS STAYS THE SAME --- */

/* --- NEW BOTTOM TEXT STYLES --- */
.showcase-bottom-text {
    text-align: center;
    margin-top: 60px; /* Space between the last images and the text */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}

.showcase-bottom-text h3 {
    font-size: 4rem; /* Large, readable heading */
    font-weight: 700;
    color: #111; /* Dark text for contrast */
    margin-bottom: 15px;
    line-height: 1.2;
}

.showcase-bottom-text p {
    font-size: 2rem;
    color: #666; /* Softer subtext color */
    line-height: 1.6;
}

/* Responsive adjustment for the text */
@media screen and (max-width: 768px) {
    .showcase-bottom-text h3 {
        font-size: 1.75rem;
    }
    .showcase-bottom-text {
        margin-top: 40px;
    }
}

















/* --- Section Background --- */
.success-stories-section {
    background-color: #0a0e1a; /* Deep dark blue/black */
    background-image: url(../assets2/bg1.webp);
        /* radial-gradient(circle at 20% 20%, rgba(30, 48, 80, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(20, 30, 50, 0.4) 0%, transparent 40%); */
    padding: 100px 20px;
    color: #ffffff;
    overflow: hidden;

}

/* --- Section Header (Huge & Bold) --- */
.stories-header {
    text-align: center;
    max-width: 1400px;
    width: 95%; /* Ensures it fills the screen on laptops */
    margin: 0 auto 80px auto;
}

.stories-header h2 {
    font-size: 6rem; /* MUCH BIGGER */
    font-weight: 900;  /* Extra Bold */
    margin-bottom: 25px;
    line-height: 1.1;
    letter-spacing: -1px; /* Tighter for impact */
    
}

.stories-header .subhead {
    font-size: 3.5rem; /* Bigger subhead */
    color: white;
    line-height: 1.5;
    margin: 0 auto;
}

.stories-header .highlight {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #4a90e2; /* Blue underline for emphasis */
}

/* --- Paper Container --- */
.papers-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px; /* More space between the big papers */
width: 96%;
    margin: 0 auto;
}

/* --- The "Paper" Card (Bigger Canvas) --- */
.paper-card {
    background-color: #ffffff;
    color: #111;
    width: 80%;
    padding: 45px 50px; /* More breathing room */
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 10px 15px rgba(0,0,0,0.2);
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover State */
.paper-card:hover {
    z-index: 10;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    transform: scale(1.02) rotate(0deg) !important;
}



/* --- TYPOGRAPHY INSIDE PAPER (THE IMPORTANT PART) --- */

/* 1. Who is this? (Case Study Title) */
.paper-content h3 {
    font-size: 2.5rem; /* Large Headline */
    font-weight: 800;
    color: #222;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-bottom: 4px solid #eee; /* Thicker line */
    padding-bottom: 15px;
    display: inline-block;
}

/* 2. The Story Text */
.paper-content p {
    font-size: 1.85rem; /* ~22px. Very easy to read. */
    line-height: 1.6;
    margin-bottom: 25px;
    color: #333;
    font-weight: 400;
}

/* 3. The RESULT (The Eye Catcher) */
.result-stat {
    font-size: 2.1rem !important; /* Huge Stat Text */
    font-weight: 700;
    color: #000;
    background: #eef4fa;
    padding: 25px; /* Big padding */
    border-left: 8px solid #2c3e50; /* Thick accent bar */
    border-radius: 0 8px 8px 0;
}

/* 4. The Takeaway */
.takeaway {
    font-size: 1.55rem !important;
    color: #555 !important;
    font-style: italic;
    margin-bottom: 0 !important;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

/* --- Responsive for Mobile (Still needs to be big) --- */
@media screen and (max-width: 768px) {
    .stories-header h2 { font-size: 2.5rem; }
    .stories-header .subhead { font-size: 1.2rem; }
    
    .paper-card {
        padding: 30px;
        transform: rotate(0deg) !important; /* No tilt on mobile */
        margin-top: 0 !important;
    }
    
    .paper-content h4 { font-size: 1.3rem; }
    .paper-content p { font-size: 1.15rem; } /* Still big on mobile */
    .result-stat { font-size: 1.25rem !important; padding: 20px; }
}

/* --- Special Styling for the "You" Card --- */
.last-card {
    background: #fdfdfd;
    border: 4px dashed #2c3e50; /* Dashed border looks like a "space waiting to be filled" */
    text-align: center; /* Center everything */
}

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

/* Make "YOU" text massive */
.huge-statement {
    font-size: 3.5rem !important;
    color: #111;
    margin-bottom: 30px !important;
}

.huge-statement strong {
    color: #e74c3c; /* Red color for "YOU" to grab attention */
}

/* --- The "Start Now" Button --- */
.start-now-btn {
    display: inline-block;
    margin-top: 35px;
    padding: 20px 36px;
    font-size: 4rem;
    font-weight: 800;
    color: white;
    background: linear-gradient(90deg, #ff00e6, #7000ff);
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(112,0,255,0.35);
    transform: scale(1);
    animation: startPop 1.4s ease-in-out infinite;
}

/* Popping animation */
@keyframes startPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.start-now-btn:hover {
    background-color: #219150;
    transform: translateY(-5px); /* Button lifts up */
    box-shadow: 0 15px 30px rgba(39, 174, 96, 0.6);
}

/* Mobile Adjustment for the button */
@media screen and (max-width: 768px) {
    .start-now-btn {
        width: 100%; /* Full width button on mobile */
        font-size: 1.25rem;
        padding: 15px;
    }
    
    .huge-statement {
        font-size: 1.6rem !important;
    }
}
























/* random2: start */
.random2 {
    padding: 8rem 0rem;
    background: url(../assets/random2_bg.webp) no-repeat center center/cover;
}

.orange-underline-2 {
    position: relative;
    display: inline-block;
}

.orange-underline-2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -20px;  /* adjust based on your underline length */
    width: 100%;
    height: 12px;   /* adjust based on underline image height */
    background: url(../assets2/course/underline.webp) no-repeat center;
    background-size: contain;
    pointer-events: none;
}


.glow-pill {
    background: linear-gradient(to bottom, #7d00ff, #3c0073);
    color: white;
    font-weight: bold;
    font-size: 2.4rem;
    padding: 1.6rem 3.6rem;
    border-radius: 99rem;
    border: 5px solid #47008f;
    text-decoration: none;
    box-shadow: 0 0 15px rgba(125, 0, 255, 0.6);
    transition: box-shadow 0.3s, transform 0.2s;
    display: inline-block;
    width: fit-content;
}

.glow-pill:hover {
    box-shadow: 0 0 25px rgba(125, 0, 255, 0.9);
    transform: scale(1.05);
}

/* random2: end */




/* random3: start  */
.random3 {
    background-color: #111;
    padding: 8rem 0rem;
    background: url(../assets2/course/faq-bg-img.webp) no-repeat center center/cover;
}



/* random3: end  */




















/* ways: start */
.ways {
    padding: 8rem 0rem;
    background-color: #111;

    background: url(../assets/ways_bg.webp) no-repeat center center/cover;
}

.ways-box {
    padding: 2.4rem;

    background-color: #141414;
    /* border-radius: 2.4rem; */
    padding: 4rem 3.2rem;
    box-shadow: inset 0 0 5rem rgba(153, 0, 255, 0.5);
    border: 1px solid rgba(153, 0, 255, 0.4);
    position: relative;
    align-items: center;

    margin-bottom: 2rem;
}

.ways_image {
    width: 100%;
    place-self: center;
}

.ways-item-heading {
    padding: 1.6rem 2rem;
    border-radius: 2rem;
    background-color: blueviolet;
    text-align: center;
    margin-bottom: 2.4rem;
}

/* ways: end */


/* popup: start */
#popup-container {
    position: fixed;
    bottom: 7rem;
    left: 2rem;
    z-index: 9999;

    width: 40rem;
}
.video-div iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.popup {
    /* background-color: #f9f9f9; */
    /* background-color: #F8F2C2; */
    /* background: #FF3CAC;
    background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%); */
    border: 2px solid #FF3CAC;
    background: #000000;
    padding: 1.6rem 2rem;
    margin-bottom: 1.2rem;
    border-radius: 1.6rem;
    box-shadow: 0 4px 1.6rem rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.3s ease, transform 0.3s ease;


    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .4rem;


    /* Flashy animation additions */
    animation: gradientAnimation 3s infinite, glow-popup 1.5s infinite alternate;
    position: relative;
    overflow: hidden;
}

@keyframes glow-popup {
    0% {
        box-shadow: 0 0 10px rgba(255, 60, 172, 0.8), 0 0 15px rgba(255, 60, 172, 0.6);
    }

    100% {
        box-shadow: 0 0 20px rgba(43, 134, 197, 0.8), 0 0 25px rgba(43, 134, 197, 0.6);
    }
}

.buy-star {
    width: 7rem;
    height: auto;
    object-fit: contain;
}

.popup.show {
    opacity: 1;
    transform: translateY(0);
}

.popup p {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;

    margin: 0;
    text-align: center;
}

.pack-name {
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    color: #fa3dac;
}

/* popup: end */

/* cta: start */
.cta {

    background: linear-gradient(180deg, #6503FE 0%, #0E031F 100%);

    padding: 8rem 0rem;
}

.side-padding {
    padding: 0rem 2.4rem;
}

.cta-main-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2.4rem;
}

.cta-image {
    width: 100%;
}

.red-dot-pill {
    padding: 2rem;
    border: 2px dashed #fff;
    background-color: #ff002d;

    margin-bottom: 2.4rem;

}

.cta-assured {
    width: 32rem;
}

.cta-payment-image {
    width: 32rem;

    margin: 1rem 0rem;
}

/* cta: end */



/* compare: start */
.compare {
    padding: 8rem 0rem;
    background: url(../assets/random2_bg.webp) no-repeat center center/cover;
}

.compare-image {
    width: 80%;
}

/* compare: end */














/* step: start */
/* Section wrapper */
.three-steps-15 {
    width: 100%;
    margin: 0;                 /* remove centering */
    padding: 5rem 0;
    background: url('../assets2/course/bg4.webp') no-repeat center center;
    background-size: cover;     /* full width + height */
}

/* Inner container to center content */
.three-steps-inner-15 {
    max-width: 1400px;         /* limits content width */
    width: 100%;
    margin: 0 auto;            /* center horizontally */
    padding: 0 1rem;
    text-align: center;           /* optional mobile padding */
}


/* Heading sizes you asked for */
.steps-title-15 {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1.1;
}


.steps-subtitle-15 {
    margin: 2rem auto;
    padding: .8rem 1.8rem;
    background: #ff00d4;
    color: #fff;
    border-radius: 12px;
    display: inline-block;
    font-size: 3.5rem;
}

.steps-desc-15 {
    display: inline-block;
    background: #fff4d5;
    padding: 1.2rem 1.8rem;
    border-radius: 12px;
    margin-top: 1.2rem;
    font-size: 1.8rem;
    line-height: 1.4;
}

.highlight-pink-15 {
    color: #ff00d4;
}

/* Step boxes */
.step-box-15 {
    width: 60%; /* slightly wider for more space */
    border-radius: 24px;
    padding: 4rem 3rem; /* increased padding for bigger content */
    margin: 4rem auto 0 auto; /* center horizontally */
    color: white;
}

.step-1-15 { background: #ff008c; }
.step-2-15 { background: #7a56ff; }
.step-3-15 { background: #ff008c; }

/* Step label */
.step-label-15 {
    background: white;
    color: black;
    font-weight: 700;
    padding: 1rem 1.8rem; /* bigger padding */
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 2rem;
    font-size: 5rem; /* bigger number */
    top: -40px;
        position: relative;       /* enable absolute adjustment */

}

/* Layout */
.step-content-15 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem; /* more space between text and image */
}

.reverse-15 {
    flex-direction: row-reverse;

}

.step-text-15 p {
    font-size: 1.8rem; 
    line-height: 1.8;
    max-width: 350px;
}


.step-text-15 h4 {
    font-size: 3rem; /* bigger step title */
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-align:left;
}


.step-image-15 img {
    width: 100%;
    height: 100%;             /* stretch image */
    object-fit: cover;        /* maintain aspect ratio, cover area */
    border-radius: 14px;
}

/* GIF arrow */
.arrow-wrapper-15 {
    margin: 2.5rem 0; /* increased spacing */
    margin-left: 650px;
}

.arrow-gif-15 {
    width: 100px;
    height: auto;
}

/* RESPONSIVE RULES */
@media (max-width: 1200px) {
    .steps-title-15 { font-size: 5.5rem; }
    .steps-subtitle-15 { font-size: 4rem; }
}

@media (max-width: 992px) {

    .step-content-15 {
        grid-template-columns: repeat(1, 1fr);
        text-align: center;
                gap: 3rem; /* smaller gap for stacked layout */

    }

    .step-image-15 img {
        max-width: 450px;
    }

    .arrow-gif-15 {
        width: 80px;
    }
}

@media (max-width: 600px) {

    .steps-title-15 { font-size: 3.5rem; }
    .steps-subtitle-15 { font-size: 2.8rem; }
    .steps-desc-15 { font-size: 1.6rem; }

    .step-text-15 h4 { font-size: 2.5rem; }
    .step-text-15 p { font-size: 1.5rem; }

    .step-box-15 {
        padding: 2.5rem 1.6rem;
                width: 90%; /* take more space on small screens */

    }

    .step-image-15 img {
        max-width: 300px;
    }

    .arrow-gif-15 {
        width: 60px;
    }
}


/* step: end */













/* john: start */
.john {
    padding: 8rem 0rem;
    background-color: #111;
}

.john-max-width {
    padding: 0rem 2.4rem;
}

.john-list-item-image {
    width: 2.6rem !important;
    height: auto !important;
    object-fit: contain !important;
}

.john-item {
    padding: 4.8rem 2.4rem;
    gap: 2.4rem;
    justify-content: flex-start;

    align-self: center;
}

.john-pill {
    margin-top: -7.2rem;
    font-size: 35px;
    border-radius: 20px;
    padding: 5px;
}

.john-item-1 {
    box-shadow: inset 0 0 2.4rem rgba(255, 0, 0, 0.5);
    border: 1.6px solid rgba(255, 0, 0, 0.4);
}

.john-item-2 {
    box-shadow: inset 0 0 2.4rem rgba(0, 255, 47, 0.5);
    border: 1.6px solid rgba(0, 255, 47, 0.4);
}

.john-item-3 {
    box-shadow: inset 0 0 2.4rem rgba(0, 47, 255, 0.5);
    border: 1.6px solid rgba(0, 47, 255, 0.4);
}

.red-bg {
    background-color: red !important;
    border-radius: 0rem !important;
}

.green-bg {
    background-color: green !important;
    border-radius: 0rem !important;
}

.blue-bg {
    background-color: rgba(0, 47, 255, 1);
    border-radius: 0rem !important;
}
/* grid fix for john section */

.grid-3-col-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem;
    align-items: stretch;
}

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

@media (max-width: 768px) {
    .grid-3-col-box {
        grid-template-columns: 1fr;
    }
}


/* john: end */





/* random4: start */
.random4 {
    background: url(../assets2/bg1.webp) no-repeat center center/cover;
}

/* random4: end */




/* after: start */
.after {
    padding: 8rem 0rem;
    background: url(../assets2/course/create-section1.webp) no-repeat center center/cover;
}


.glow-pill-2 {
     box-shadow: inset 0 0 1.8rem rgba(221, 77, 77);
    border: 1px solid rgba(0, 255, 0, 0.4);
    background-color: #fff;

    padding: 1.2rem 2.4rem;
    border-radius: 99rem;
}

.glow-pill-3 {
    box-shadow: inset 0 0 2.4rem rgba(0, 255, 0, 0.5);
    border: 1px solid rgba(0, 255, 0, 0.4);
    background-color: #fff;

    padding: 1.2rem 2.4rem;
    border-radius: 99rem;
}

.after-item {
    padding: 2.8rem 3.4rem 2rem;
    border-radius: 2.4rem;
}

.after-item-1 {
    background-color: rgb(212, 54, 54);
}

.after-item-2 {
    background-color: rgb(0, 151, 0);
}

.after-image {
    width: 64%;
    margin-bottom: 2.4rem;
}

/* after: end */

















/* ========================================= */
/* MAIN SECTION */
/* ========================================= */

.hero-impact-section99 {
    background-color: #ffffff;
    background-image: url(../assets2/course/create-section1.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 80px 20px;
}

.container99 {
    width:90%;
    max-width: 1200px;
    margin: 0 auto;

}

/* HEADINGS */
.header-group99 {
    text-align: center;
    margin-bottom: 60px;
}

.main-heading99 {
    font-size: 6rem;
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -2px;
}

.highlight-pink99 { color: #d900b8; }
.highlight-green99 { color: #00c853; }

.subheading-box99 {
    display: inline-block;
    background: #8a2be2;
    transform: skew(-5deg);
    padding: 15px 40px;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3);
}

.subheading99 {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    margin: 0;
    transform: skew(5deg);
}

/* ========================================= */
/* TWO COLUMN LAYOUT – PERFECT RESPONSIVE */
/* ========================================= */

.content-grid99 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    margin-top: 50px;
}

/* LEFT TEXT */
.text-column99 {
    flex: 1;
}

.text-column99 p {
    font-size: 1.8rem;
    color: #4a4a5a;
    line-height: 1.5;
    margin-bottom: 25px;
}

.bold-highlight99 {
    font-weight: 800;
    color: #1a1a2e;
}

.final-statement99 {
    font-size: 2rem;
    font-weight: 800;
    color: #111;
    border-left: 6px solid #8a2be2;
    padding-left: 20px;
}

/* RIGHT IMAGE */
.image-column99 {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-person-img99 {
    width: 100%;
    max-width: 520px;    /* perfect desktop size */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
}

/* ========================================= */
/* TABLET (<= 1024px) */
/* ========================================= */

@media (max-width: 1024px) {
    .content-grid99 {
        gap: 40px;
    }

    .hero-person-img99 {
        max-width: 420px;
    }
}

/* ========================================= */
/* MOBILE (<= 768px) */
/* ========================================= */

@media (max-width: 768px) {
    .content-grid99 {
        flex-direction: column;
        text-align: left;
        gap: 40px;
    }

    .main-heading99 {
        font-size: 4rem;
    }

    .subheading99 {
        font-size: 2.4rem;
    }

    .text-column99 p {
        font-size: 1.5rem;
    }

    .final-statement99 {
        font-size: 1.7rem;
    }

    .hero-person-img99 {
        max-width: 340px;
    }
}

/* ========================================= */
/* SMALL MOBILE (<= 450px) */
/* ========================================= */

@media (max-width: 450px) {

    .main-heading99 {
        font-size: 3.2rem;
    }

    .subheading99 {
        font-size: 1.8rem;
    }

    .hero-person-img99 {
        max-width: 300px !important;
    }

    .content-grid99 {
        gap: 30px;
    }
}

















/*Pointing man start9 */
/* --- SECTION CONTAINER --- */
.hero-impact-section9 {
    background-color: #ffffff;
    background-image: url(../assets2/course/WhatsApp\ Image\ 2025-12-08\ at\ 14.04.00_1e0be35c.webp);
    background-repeat: no-repeat;
    background-size: cover;    /* shows the full image */
    background-position: center; /* centers it */
    padding: 80px 20px;
        border: none !important;

}


.container9 {
    width:90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- HEADINGS (DESKTOP SIZES AS REQUESTED) --- */
.header-group9 {
    text-align: center;
    margin-bottom: 60px;
}

.main-heading9 {
    font-size: 6rem; /* REQUESTED SIZE */
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -2px;
}

/* Color Highlights */
.highlight-pink9 { color: #d900b8; }
.highlight-green9 { color: #00c853; }

/* The Purple Box Subheading */
.subheading-box9 {
    display: inline-block;
    background: #8a2be2; /* Vivid Purple */
    transform: skew(-5deg); /* Slight tilt for action */
    padding: 15px 40px;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3);
}

.subheading9 {
    font-size: 3.5rem; /* REQUESTED SIZE */
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    transform: skew(5deg); /* Correct text tilt */
}

/* --- LAYOUT GRID --- */
.content-grid9 {
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: space-between;
    gap: 60px;
    margin-top: 50px;
}

/* --- LEFT COLUMN: TEXT --- */
.text-column9 {
    flex: 1; /* Takes up 50% space */
}

.text-column9 p {
    font-size: 1.8rem; /* REQUESTED SIZE */
    color: #4a4a5a;
    line-height: 1.5;
    margin-bottom: 25px;
    font-weight: 400;
}

.bold-highlight9 {
    font-weight: 800;
    color: #1a1a2e; /* Darker black */
}

.final-statement9 {
    font-size: 2rem !important;
    font-weight: 800;
    color: #111;
    border-left: 6px solid #8a2be2;
    padding-left: 20px;
}

/* --- RIGHT COLUMN: IMAGE STACK --- */
.image-column9 {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* 2. The Man Pointing */
.hero-person-img9 {
    width: 100%;
    max-width: 520px;    /* perfect desktop size */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
}


/* ========================================= */
/* === RESPONSIVE MEDIA QUERY (COMMON) === */
/* ========================================= */
@media  (max-width: 1024px) {

     .content-grid9 {
        gap: 40px;
    }

    .hero-person-img9 {
        max-width: 420px;
    }
}
/* ========================================= */
/* MOBILE (<= 768px) */
/* ========================================= */

@media (max-width: 768px) {
    .content-grid9 {
        flex-direction: column;
        text-align: left;
        gap: 40px;
    }

    .main-heading9 {
        font-size: 4rem;
    }

    .subheading9 {
        font-size: 2.4rem;
    }

    .text-column9 p {
        font-size: 1.5rem;
    }

    .final-statement9 {
        font-size: 1.7rem;
    }

    .hero-person-img9 {
        max-width: 340px;
    }
}

/* ========================================= */
/* SMALL MOBILE (<= 450px) */
/* ========================================= */

@media (max-width: 450px) {

    .main-heading9 {
        font-size: 3.2rem;
    }

    .subheading9 {
        font-size: 1.8rem;
    }

    .hero-person-img9 {
        max-width: 300px !important;
    }

    .content-grid9 {
        gap: 30px;
    }
}



/*pointing ma










/* --- AIFunnelX Case Study Section Styles --- */

.case-study-section {
    --cs-bg-dark: #050505;
    --cs-card-bg: #0e0e0e;
    --cs-text-white: #ffffff;
    --cs-text-gray: #b0b0b0;
    --cs-red: #ff4d4d;
    --cs-green: #00e676;
    --cs-purple: #d500f9;
    --cs-cyan: #00bcd4;
    
    background-color: var(--cs-bg-dark);
    color: var(--cs-text-white);
    font-family: 'Poppins', sans-serif;
    padding: 6rem 1rem;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Container limits width to 1920px but centers it */
.case-study-section .cs-container {
    width: 100%;
    max-width: 1920px; 
    margin: 0 auto;
}

/* --- HEADER --- */
.case-study-section .cs-header {
    text-align: center;
    margin-bottom: 6rem;
}

/* 6rem Heading */
.case-study-section .cs-title {
    font-size: 6rem; 
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 2rem;
    letter-spacing: -2px;
}

.case-study-section .cs-title .highlight-cyan {
    color: var(--cs-cyan);
}

.case-study-section .cs-title .highlight-white {
    color: #fff;
    text-shadow: 0 0 20px rgba(255,255,255,0.1);
}

/* 3.5rem Subheading */
.case-study-section .cs-subtitle {
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--cs-text-gray);
    font-style: italic;
    max-width: 1600px;
    margin: 0 auto;
    line-height: 1.3;
}

/* --- GRID & CARDS --- */
.case-study-section .cs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    align-items: stretch;
    perspective: 1000px; 
}

.case-study-section .cs-card {
    background: var(--cs-card-bg);
    border-radius: 16px;
    padding: 3.5rem 2.5rem;
    position: relative;
    transition: transform 0.1s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
    border: 1px solid #222;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
    height: 100%; /* Ensure equal heights */
}

/* Badge Styling */
.case-study-section .cs-badge {
    display: inline-block;
    padding: 1rem 0;
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 2.5rem;
    width: 100%;
    text-align: center;
    color: #fff;
}

/* Card Headlines */
.case-study-section .cs-card-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* Card Intro Text */
.case-study-section .cs-card-intro {
    font-size: 1.8rem; /* Requested Content Size */
    color: #888;
    margin-bottom: 2.5rem;
    line-height: 1.5;
    font-style: italic;
}

/* --- LIST ITEMS --- */
.case-study-section .cs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.case-study-section .cs-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.case-study-section .cs-icon {
    font-size: 2rem;
    margin-right: 1.5rem;
    font-weight: 900;
    line-height: 1;
}

/* List Item Content 1.8rem */
.case-study-section .cs-text-content h5 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: #fff;
}

.case-study-section .cs-text-content p {
    font-size: 1.4rem; /* Slightly smaller than main content for hierarchy */
    color: #aaa;
    line-height: 1.5;
    margin: 0;
}

/* --- THEMES --- */
/* Red Problem */
.case-study-section .cs-card-problem { border-top: 8px solid var(--cs-red); }
.case-study-section .cs-card-problem .cs-badge {
    background: linear-gradient(90deg, #b71c1c, var(--cs-red));
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.4);
}
.case-study-section .cs-card-problem .cs-icon { color: var(--cs-red); }

/* Green Solution */
.case-study-section .cs-card-solution { border-top: 8px solid var(--cs-green); }
.case-study-section .cs-card-solution .cs-badge {
    background: linear-gradient(90deg, #00695c, var(--cs-green));
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.4);
    color: #000;
}
.case-study-section .cs-card-solution .cs-icon { color: var(--cs-green); }

/* Purple Result */
.case-study-section .cs-card-result { border-top: 8px solid var(--cs-purple); }
.case-study-section .cs-card-result .cs-badge {
    background: linear-gradient(90deg, #7b1fa2, var(--cs-purple));
    box-shadow: 0 0 20px rgba(213, 0, 249, 0.4);
}
.case-study-section .cs-card-result .cs-icon { color: var(--cs-purple); }


/* --- RESPONSIVENESS --- */

/* Laptop (1400px and below) */
@media (max-width: 1400px) {
    .case-study-section .cs-title { font-size: 4.5rem; }
    .case-study-section .cs-subtitle { font-size: 2.5rem; }
    .case-study-section .cs-card-intro { font-size: 1.4rem; }
}

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .case-study-section .cs-title { font-size: 3.5rem; }
    .case-study-section .cs-subtitle { font-size: 2rem; }
    .case-study-section .cs-grid { 
        grid-template-columns: 1fr; /* Stack columns */
        max-width: 700px;
        margin: 0 auto;
    }
}

/* Mobile (600px and below) */
@media (max-width: 600px) {
    .case-study-section { padding: 3rem 1rem; }
    .case-study-section .cs-title { font-size: 2.5rem; }
    .case-study-section .cs-subtitle { font-size: 1.5rem; }
    .case-study-section .cs-card { transform: none !important; } /* Disable 3D */
}
















/* SECTION WRAPPER */
.aifunnelx-problem-section {
    background-image: url(../assets2/aifunnelx/problem-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 20px;
}

/* CONTAINER */
.aifunnelx-problem-section .container {
    max-width: 1400px;
    margin: 0 auto;
}

/* HEADLINE */
.problem-header-group {
    text-align: center;
    margin-bottom: 60px;
}

.problem-main-heading {
    font-size: 6rem;
    font-weight: 900;
    line-height: 1.1;
    color: #1a1a2e;
    margin-bottom: 20px;
    letter-spacing: -2px;
}

/* Highlight */
.highlight-pink {
    color: #d900b8;
}

/* GRID */
.problem-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* IMAGE COLUMN */
.problem-image-column {
    flex: 1;
    display: flex;
    justify-content: center;
}

.problem-main-img {
    width: 550px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
}

/* TEXT COLUMN */
.problem-text-column {
    flex: 1;
    padding-right: 20px;
}

.problem-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.problem-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: #444;
}

.problem-list li::before {
    content: "✖";
    position: absolute;
    left: 0;
    top: 2px;
    color: #ff3b3b;
    font-size: 1.8rem;
}

.problem-body {
    font-size: 1.8rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* ======================= */
/* RESPONSIVE (MOBILE)     */
/* ======================= */

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

    .problem-main-heading {
        font-size: 2.8rem;
        letter-spacing: -1px;
    }

    .problem-grid {
        flex-direction: column;
        gap: 40px;
    }

    .problem-image-column {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .problem-main-img {
        max-width: 320px; /* perfect mobile size */
        width: 100%;
        height: auto;
    }

    .problem-text-column {
        padding: 0 10px;
    }

    .problem-list li,
    .problem-body {
        font-size: 1.3rem;
    }
}












/* much: start */
.much {
    background-color: #111;
    padding: 8rem 0rem;
    background: url(../assets/much_bg.webp) no-repeat center center/cover;
}

.much-item {
    box-shadow: inset 0 0 2.4rem rgba(0, 26, 255, 0.5);
    border: 1.6px solid rgba(0, 26, 255, 0.4);
    padding: 3.2rem 2.2rem;
    border-radius: 2.4rem;


    img {
        width: 100%;
        margin-bottom: 1.6rem;
    }
}

/* much: end */



/* random5: start */
.random5 {
    background: url(../assets/much_bg.webp) no-repeat center center/cover;
}

/* random5: end */


/* random6: start */
.random6 {
    background: url(../assets/random4_bg.webp) no-repeat center center/cover;
}

/* random6: end */



/* risk: start */
.risk {
    padding: 8rem 0rem;
    background-color: #111;
}

.risk-max-width {
    padding: 0rem 2.4rem;
}

.risk-image {
    width: 100%;
}

/* risk: end */



/* compare2: start */
.compare2 {
    padding: 0rem 0rem;

    background-color: #111;
}

.compare2-item {
    img {
        width: 80%;
    }
}

/* compare2: end */






















/*Pointing man start9 */
/* --- SECTION CONTAINER --- */
.hero-impact-section19 {
    background-color: #ffffff;
    background-image: url(../assets2/course/create-section1.webp);
    background-repeat: no-repeat;
    background-size: cover;    /* shows the full image */
    background-position: center; /* centers it */
    padding: 80px 20px;
}




.container19 {
    width:90%;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- HEADINGS (DESKTOP SIZES AS REQUESTED) --- */
.header-group19 {
    text-align: center;
    margin-bottom: 60px;
}

.main-heading19 {
    font-size: 6rem; /* REQUESTED SIZE */
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -2px;
}

/* Color Highlights */
.highlight-pink19 { color: #d900b8; }
.highlight-green19 { color: #00c853; }

/* The Purple Box Subheading */
.subheading-box19 {
    display: inline-block;
    background: #8a2be2;
    transform: skew(-5deg);
    padding: 15px 40px;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3);
    
}

/* hover effect */
/* .subheading-box19:hover {
    transform: skew(-5deg) translateY(-5px);
    box-shadow: 0 14px 30px rgba(138, 43, 226, 0.45);
} */


.subheading19 {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    margin: 0;
    transform: skew(5deg);
}

/* --- LAYOUT GRID --- */
.content-grid19 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    margin-top: 50px;
}

/* --- LEFT COLUMN: TEXT --- */
.text-column19 {
    flex: 1; /* Takes up 50% space */
}

.text-column19 p {
    font-size: 1.8rem;
    color: #4a4a5a;
    line-height: 1.5;
    margin-bottom: 25px;
}

.bold-highlight19 {
    font-weight: 800;
    color: #1a1a2e; /* Darker black */
}

.final-statement19 {
    font-size: 2rem !important;
    font-weight: 800;
    color: #111;
    border-left: 6px solid #8a2be2;
    padding-left: 20px;
}

/* --- RIGHT COLUMN: IMAGE STACK --- */
.image-column19 {
    flex: 1;
    display: flex;
    justify-content: center;
}



/* 2. The Man Pointing */
.hero-person-img19 {
    width: 100%;
    max-width: 520px;    /* perfect desktop size */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
}


/* ========================================= */
/* === RESPONSIVE MEDIA QUERY (COMMON) === */
/* ========================================= */
@media (max-width: 1024px) {
    .content-grid19 {
        gap: 40px;
    }

    .hero-person-img19 {
        max-width: 420px;
    }
}

/* ========================================= */
/* MOBILE (<= 768px) */
/* ========================================= */

@media (max-width: 768px) {
    .content-grid19 {
        flex-direction: column;
        text-align: left;
        gap: 40px;
    }

    .main-heading19 {
        font-size: 4rem;
    }

    .subheading19 {
        font-size: 2.4rem;
    }

    .text-column19 p {
        font-size: 1.5rem;
    }

    .final-statement19 {
        font-size: 1.7rem;
    }

    .hero-person-img19 {
        max-width: 340px;
    }
}
/* ========================================= */
/* SMALL MOBILE (<= 450px) */
/* ========================================= */

@media (max-width: 450px) {

    .main-heading19 {
        font-size: 3.2rem;
    }

    .subheading19 {
        font-size: 1.8rem;
    }

    .hero-person-img19 {
        max-width: 300px !important;
    }

    .content-grid19 {
        gap: 30px;
    }
}















/* changer: start */
.changer {
    background: url(../assets/changer_bg.webp) no-repeat center center/cover;
}

.changer-box {
    box-shadow: inset 0 0 5rem rgba(8, 0, 255, 0.5);
    border: 1px solid rgba(8, 0, 255, 0.4);

    border-radius: 2.4rem;
}

.changer-item-heading {
    color: blue;
    background-color: #fff;
}

/* changer: end */















/* ========================================= */
/* MAIN SECTION */
/* ========================================= */

.hero-impact-section29 {
    background-color: #ffffff;
    background-image: url(../assets2/course/bg1.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 80px 20px;
}

.container29 {
    width:90%;
    max-width: 1200px;
    margin: 0 auto;

}

/* HEADINGS */
.header-group29 {
    text-align: center;
    margin-bottom: 60px;
}

.main-heading29 {
    font-size: 6rem;
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -2px;
}

.highlight-pink29 { color: #d900b8; }
.highlight-green29 { color: #00c853; }

.subheading-box29 {
    display: inline-block;
    background: #8a2be2;
    transform: skew(-5deg);
    padding: 15px 40px;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3);
}

.subheading29 {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    margin: 0;
    transform: skew(5deg);
}

/* ========================================= */
/* TWO COLUMN LAYOUT – PERFECT RESPONSIVE */
/* ========================================= */

.content-grid29 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    margin-top: 50px;
}

/* LEFT TEXT */
.text-column29 {
    flex: 1;
}

.text-column29 p {
    font-size: 1.8rem;
    color: #4a4a5a;
    line-height: 1.5;
    margin-bottom: 25px;
}

.bold-highlight29 {
    font-weight: 800;
    color: #1a1a2e;
}

.final-statement29 {
    font-size: 2rem;
    font-weight: 800;
    color: #111;
    border-left: 6px solid #8a2be2;
    padding-left: 20px;
}

/* RIGHT IMAGE */
.image-column29 {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-person-img29 {
    width: 100%;
    max-width: 520px;    /* perfect desktop size */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
}

/* ========================================= */
/* TABLET (<= 1024px) */
/* ========================================= */

@media (max-width: 1024px) {
    .content-grid29 {
        gap: 40px;
    }

    .hero-person-img29 {
        max-width: 420px;
    }
}

/* ========================================= */
/* MOBILE (<= 768px) */
/* ========================================= */

@media (max-width: 768px) {
    .content-grid29 {
        flex-direction: column;
        text-align: left;
        gap: 40px;
    }

    .main-heading29 {
        font-size: 4rem;
    }

    .subheading29 {
        font-size: 2.4rem;
    }

    .text-column29 p {
        font-size: 1.5rem;
    }

    .final-statement29 {
        font-size: 1.7rem;
    }

    .hero-person-img29 {
        max-width: 340px;
    }
}

/* ========================================= */
/* SMALL MOBILE (<= 450px) */
/* ========================================= */

@media (max-width: 450px) {

    .main-heading29 {
        font-size: 3.2rem;
    }

    .subheading29 {
        font-size: 1.8rem;
    }

    .hero-person-img29 {
        max-width: 300px !important;
    }

    .content-grid29 {
        gap: 30px;
    }
}



















/* random7: start */

.grid-2-col-item {
    align-self: center;
    width:100%;
}

.grid-2-col-item p{
    align-self: center;
    width:100%;
    font-size: 1.9rem;
}

/* random7: end */



/* choice: start */
.choice1 {
    padding: 8rem 0rem;
    background: url(../assets2/course/create-section1.webp) no-repeat center center/cover;
}

.choice1-item {
    img {
        width: 100%;
        margin-bottom: 2.4rem;
    }


}

.choice-pill {
    padding: 3.2rem 3.2rem;
    border-radius: 2.8rem;
}

/* choice: end */



/* switch: start  */
.switch {
    padding: 8rem 0rem;
    background: url(../assets2/course/bg4.webp) no-repeat center center/cover;
}

.switch-box {
    width: 100%;
    gap: 3.2rem;

    img {
        width: 72%;
    }
}

/* switch: end  */



/* choice2: start */
.choice2 {
    background: url(../assets/step_bg.webp) no-repeat center center/cover;
}

.choice2-item {
    padding: 2.4rem;
    background-image: radial-gradient(circle at center center, transparent 0%, rgb(22, 17, 37) 99%), repeating-linear-gradient(0deg, rgba(163, 163, 163, 0.2) 0px, rgba(163, 163, 163, 0.2) 1px, transparent 1px, transparent 6px), repeating-linear-gradient(90deg, rgba(163, 163, 163, 0.2) 0px, rgba(163, 163, 163, 0.2) 1px, transparent 1px, transparent 6px), linear-gradient(90deg, rgb(33, 33, 33), rgb(33, 33, 33));


    border-radius: 4.8rem;
}

/* choice2: end */




/* show: start */
.show {
    background-color: #111;
    padding: 1rem;

    background: url(../assets/hero_bg.webp) no-repeat center center/cover;

}

.show-logo {
    width: 24rem;
}

.product-show-image {
    width: 72%;
}

.show-col-box {
    padding: 3.2rem;
    border-radius: 3.2rem;
    background-color: #000;
}

/* show: end */




/* fixed: start */
.fixed {
    padding: 8rem 0rem;
    background: url(../assets/after_bg.webp) no-repeat center center/cover;
}

/* fixed: end */



/* big: start */
.big {
    padding: 8rem 0rem;
    background: #111;

    background: url(../assets/random4_bg.webp) no-repeat center center/cover;
}

.big-text-box {
    padding: 8rem 2.4rem 2rem;
    border-radius: 2.4rem;
}

.big-image {
    margin-bottom: -8rem;
}

/* big: end */




/* profit: start */
.profit {
    padding: 8rem 0rem;
    background: url(../assets/after_bg.webp) no-repeat center center/cover;
}

.profit-max-width {
    padding: 0rem 2.4rem;
}

.profit-item-image {
    margin-bottom: 2rem;
}

.profit-item {
    padding: 2.4rem 2.4rem 0rem;
    border-radius: 2.4rem;

    border: 1.6px solid pink;
    background-color: rgba(137, 43, 226, 0.1);
}

/* profit: end */




/* top: start */
.top {
    padding: 8rem 0rem;
    background: url(../assets/after_bg.webp) no-repeat center center/cover;
}

.top-max-width {
    max-width: 104rem;
}

.top-item-image {
    margin-bottom: 2rem;
}

.top-item {
    padding: 2.4rem;
    border-radius: 2.4rem;
    border: 1.6px solid #e33bb1;
    background-color: rgba(81, 0, 232, 0.1);
}

/* top: end */




/* video: start */
.video {
    padding: 12rem 0rem;
    background: url(../assets/hero_bg.webp) no-repeat center center/cover;

}


.fast-buying-image {
    border-radius: 2.4rem;
    border: 4px solid #FF3CAC;

    margin-top: 8rem;

    padding: 0;
}

/* video: end */



/* revo: start */
.revo {
    padding: 8rem 0rem;
    background: url(../assets/after_bg.webp) no-repeat center center/cover;
}

/* revo: end */



/* life: start */
.life {
    padding: 8rem 0rem;
    background: url(../assets/after_bg.webp) no-repeat center center/cover;
}

.life-item {
    img {
        margin-bottom: 2rem;
    }
}

/* life: end */




/* choice3: start */
.choice3_image {
    border-radius: 2.4rem;
}

/* choice3: end */



/* random10: start */
.random10 {
    background: url(../assets/much_bg.webp);
}

/* random10: end */



/* random11: start */
.random11 {
    background: url(../assets/after_bg.webp);
}

/* random11: end */




/* final: start  */
.final {
    padding: 8rem 0rem;
    background: url(../assets/changer_bg.webp) no-repeat center center/cover;
}

.final-product-image {
    width: 60rem;
    margin-bottom: -10rem;
    z-index: 1;
}


.final-list-box {
    width: 80rem;

    padding: 12rem 3.2rem;
    border-radius: 2.4rem;

    background-color: #2921ff;
}

.regular-price {
    text-decoration: line-through;
    font-size: 3.2rem;
    font-weight: 600;

}

.today-price {
    color: #FFD929;

}

/* final: end  */


/* random15: start */
.random15 {
    background: url(../assets/much_bg.webp) no-repeat center center/cover;
}

/* random15: end */




/* seller: start */
.seller {
    padding: 10rem 0rem;
    background: url(../assets/hero_bg.webp) no-repeat center center/cover;
}

.seller-image {
    width: 72rem;
    margin-bottom: 5.6rem;
    margin-top: 3.2rem;
}

/* seller: end */











/* Section max width fix (1920px friendly) */
#faq-section_1 {
  background-image: url('../assets2/course/bg4.webp'); /* replace with your path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Center accordion better */
#accordion-container_1 {
  width: 75%; 
  margin: 0 auto;

}


/* Heading adjustments */
#faq-section_1 h2 {
  font-size: clamp(3rem, 6vw, 6.5rem);
  line-height: 1.1;
}

#faq-section_1 p {
  font-size: 2.0rem !important;
  line-height: 1.25;
}

.temp12{
    max-width: 1200px;
    font-size: 3.5rem;
}


.gradient-text_1 {
  background: linear-gradient(90deg, #4b0082, #ff007f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


.card-gradient_1 {
  background-color: #fff;
  transition: all .3s ease;
}

.card-gradient_1:hover {
  box-shadow: 0 8px 15px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}


#accordion-container_1 .card-gradient_1 {
  margin-bottom: 2.5rem; 
}

.accordion-trigger_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
padding-top: 2.2rem;
  padding-bottom: 2.2rem;  cursor: pointer;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 500;
}


.accordion-content_1 {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding: 0 1.5rem;
  font-size: clamp(1rem, 3vw, 1.6rem);
  color: #6b7280;
}

.accordion-content_1.open {
  max-height: 500px;
padding-top: 2.2rem;
  padding-bottom: 2.2rem;}

.accordion-content-inner_1 {
  padding-top: .5rem;
}

.faq {
    padding: 4rem 0rem;
    background: url(../assets/moneyback.webp) no-repeat center center / cover;
    position: relative;
}

.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* padding: 10rem 0rem; */
    background: rgba(0, 0, 0, 0.7);
    z-index: 0;
}

.everything-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.faq-item {
    margin-bottom: 3.2rem;
    width: 72%;
    border: 1px dashed rgba(213, 56, 234, 1);
    padding: 10px 20px;
    border-radius: 5px;
}




/* Mobile optimization */
@media (max-width: 768px) {
  #faq-section_1 {
    padding: 4rem 1rem;
  }

  #accordion-container_1 {
    max-width: 100%;
  }

  .accordion-trigger_1 {
    padding: 1.4rem 1rem;
    font-size: 1.6rem;
  }

  .accordion-content_1 {
    font-size: 1.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}









.sticky-buy-now {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    background: #000;


    padding: 1rem 3.2rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
        width: 20rem;
    }

    h3 {
        margin: 0rem !important;
        font-size: 2.4rem;

        text-transform: uppercase;
    }

    a {
        font-size: 2rem;
        font-weight: 700;
        color: #fff;
        padding: 1rem 2rem;
        border-radius: 2rem;
        background-color: red;
    }


}


.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}




/* integration */
/* value: start  */

#value {
    background: url(../assets/much_bg.webp) no-repeat center center/cover;

    padding: 10rem 0rem;
}

.value-container {
    background: #021333;
    padding: 3.2rem 4.8rem;
    border-radius: 2rem;

    display: flex;
    flex-direction: column;
    gap: 1.6rem;

    max-width: 80%;

    margin: 6.4rem auto;
    margin-bottom: 2.4rem;
}

.value-heading {
    font-size: 5rem;
    text-align: center;
    color: #fff;
}

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

.line-1 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1.6rem;
}

.line-1 img {
    width: 22rem;
    height: auto;
    object-fit: contain;

    margin-left: 0rem;
}

.line-1 h2 {
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;

    margin-right: 4rem;
}

.line h3 {
    font-size: 2.4rem;
    font-weight: 600;
    color: #ffffff;
}

.line .price-image {
    height: 6.4rem;
    width: auto;
    object-fit: contain;
}

.line-14 {
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.line-14 h1 {
    font-size: 4rem;
    color: #ffffff;
    text-align: center;
}

.discount-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    margin-top: 0rem;
}

.discount-container h1 {
    font-size: 4.8rem;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
}

.discount-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
}

.discount-price h1 {
    font-size: 6.8rem;
    color: yellow;
}

.discount-container img {
    width: 12rem;
    height: auto;
    object-fit: contain;
}

.discount-btn {
    font-size: 2.8rem;
    font-weight: 800;
    max-width: fit-content;
    padding-inline: 7.2rem;
}



/* value: end  */




/* offer: start */
.offer {
    padding: 9rem 0rem;
    background: url(../assets/much_bg.webp) no-repeat center center/cover;
}


.offer-main-box {
    .offer-box {
        height: fit-content;
    }

    .bonus-image {
        width: 72%;
        height: auto;
        object-fit: contain;
    }
}


.intro-box {
    margin-top: 8rem;
}

.grid-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    align-items: center;
    margin-top: 4.8rem;
}

.grid-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;

    align-items: center;
    margin-top: 4.8rem;

    div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        padding: 2.4rem;
        border-radius: 2.4rem;

        height: 40rem;

        h3 {
            font-size: 3.2rem;
            font-weight: 700;
            text-align: center;
            line-height: 150%;
            color: #ffffff;
        }

        span {
            font-size: 2.8rem;
            font-weight: 600;
            text-align: center;
            line-height: 150%;
            color: #ffffff;
            margin-bottom: 2.4rem;
        }
    }

    .grid-box-1 {
        background-color: #ff9a8b;
        background-image: linear-gradient(90deg,
                #ff9a8b 0%,
                #ff6a88 55%,
                #ff99ac 100%);
    }

    .grid-box-2 {
        background-color: #08aeea;
        background-image: linear-gradient(0deg, #08aeea 0%, #2af598 100%);
    }

    .grid-box-3 {
        background-color: #ff3cac;
        background-image: linear-gradient(225deg,
                #ff3cac 0%,
                #784ba0 50%,
                #2b86c5 100%);
    }
}


/* offer: end */



/* review: start */
.review {
    padding: 9rem 0rem;
    background: url(../assets/after_bg.webp) no-repeat center center/cover;

}

.heading-review-image {
    width: 52rem;
    height: auto;
    object-fit: contain;
}

.review-screenshot {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7.2rem;
    padding: 2.4rem;
}

.review-item img {
    width: 90%;
    display: block;
    border-radius: 2.8rem;

    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
}

/* Subtle random tilt effect for 12 images */
.review-item:nth-child(1) img {
    transform: rotate(-1.5deg);
}

.review-item:nth-child(2) img {
    transform: rotate(1.2deg);
}

.review-item:nth-child(3) img {
    transform: rotate(-0.8deg);
}

.review-item:nth-child(4) img {
    transform: rotate(0.5deg);
}

.review-item:nth-child(5) img {
    transform: rotate(-1deg);
}

.review-item:nth-child(6) img {
    transform: rotate(1.5deg);
}

.review-item:nth-child(7) img {
    transform: rotate(-0.3deg);
}

.review-item:nth-child(8) img {
    transform: rotate(0.9deg);
}

.review-item:nth-child(9) img {
    transform: rotate(-1.1deg);
}

.review-item:nth-child(10) img {
    transform: rotate(0.6deg);
}

.review-item:nth-child(11) img {
    transform: rotate(-0.7deg);
}

.review-item:nth-child(12) img {
    transform: rotate(1.3deg);
}

/* Responsive design */
@media (max-width: 768px) {
    .review-screenshot {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .review-screenshot {
        grid-template-columns: 1fr;
    }
}

/* review: end */



/* features: start */
.features-main {
    padding: 9rem 0rem;

    background: url('../assets/changer_bg.webp') no-repeat center center/cover;

}

.mail-image-features {
    width: 8rem;
    height: auto;
    object-fit: contain;
    margin-bottom: 1.6rem;
}

.feature-main-content-box {
    padding: 3.2rem;
    border-radius: 2.4rem;


    backdrop-filter: blur(3px);
}
.feature-main-content-box .heading-1{
    text-align: left;
}
.feature-main-image {
    width: 50rem;
    height: auto;
    object-fit: contain;
}

.feature-main-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5.6rem;

    margin-bottom: 5.6rem;
}



/* features: end */



.success-screenshot {
    width: 80%;
}





/* table : start */
.table {
    padding: 9rem 0rem;
    background: url(../assets/random2_bg.webp) no-repeat center center/cover;
}

.heading-table-image {
    width: 21rem;
    height: auto;
    object-fit: contain;
}

.comparison-table {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    overflow-x: auto;
    border-radius: 2.4rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: white;
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    border-radius: 2rem;
    overflow: hidden;
}

th,
td {
    padding: 2.4rem;
    border: 2px solid #ddd;
    text-align: center;
}

thead {
    background: linear-gradient(135deg, #ffcccc, #ffe6e6);
    color: #333;
}

thead th {
    font-size: 2.4rem;
    font-weight: 600;
    text-transform: uppercase;
}

thead th img {
    width: 100%;
}

tbody tr:nth-child(even) {
    background-color: #f5f5f5;
}

tbody tr:hover {
    background-color: #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Highlighted column */
td:nth-child(2),
th:nth-child(2) {
    background: linear-gradient(135deg, #ff66b2, #ff99cc);
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    border: none;
    animation: flashy 2s infinite alternate;
}

@keyframes flashy {
    0% {
        box-shadow: 0 0 15px rgba(255, 105, 180, 0.8);
    }

    100% {
        box-shadow: 0 0 5px rgba(255, 105, 180, 0.4);
    }
}

td {
    font-size: 1.6rem;
    color: #555;
}

/* table : end */


/* money back: start */
.money-back {
    padding: 9rem 0rem;
    background: url(../assets/after_bg.webp) no-repeat center center/cover;
}

.money-back-item-1 {

    img {
        width: 64%;
    }
}

.money-back-box {
    padding: 3.2rem;
    box-shadow: inset 0 0 7.2rem rgba(0, 255, 47, 0.5);
    border:
        2px solid rgba(0, 255, 47, 0.4);
}

/* money back: end */




/*  */
/* footer: start */
footer {
    background: #0C0306;
    padding: 5.6rem 0rem;

    color: #ffffff;
    font-size: 1.8rem;
}

.footer-links a {
    color: #ffffff;
    font-size: 1.8rem;
    margin-right: 2rem;
}

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


/* footer: end */


/* disclaimer: start */
#disclaimer {
    background-color: #0C0306;
    padding-top: 5.6rem;

}

.disclaimer-heading-box {
    display: flex;
    flex-direction: column;
}

.disclaimer-heading {
    font-size: 4.8rem;
    text-align: center;
}

.disclaimer-text {
    font-size: 1.8rem;
    font-weight: 400;
    color: #ffffff;
    text-align: center;

    line-height: 175%;

    margin-top: 1.8rem;
    padding-bottom: 2.4rem;
}

.heading-disclaimer-image {
    width: 28rem;
    height: auto;
    object-fit: contain;
}

/* disclaimer: end */


/* footer: start */
.plr {
    background-color: #111111;
    padding-block: 7.2rem;
}

.footer-main-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
}

.footer-box {
    padding: 2.4rem;
    border-radius: 2.4rem;
    background-color: #222;
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: .8rem !important;
}

.footer-list li {
    list-style: none;

    display: flex;
    gap: .8rem;
}

.footer-list li span {
    color: #ffffff !important;
    font-size: 1.6rem;
}

.footer-list li img {
    width: 2.4rem !important;
    height: 2.4rem !important;
}

.refund {
    margin-top: 3.2rem;
}

.big-para {
    font-size: 2.4rem;
    font-weight: 500;
    text-align: center;
    line-height: 150%;
    color: #111111;
    margin-bottom: 2.4rem;
}

/* footer: end */
/*  */

.main-footer {
    padding-bottom: 14rem;
}

.sticky_anchor {
    text-decoration: none;
    border: 4px solid white;
    border-radius: 0.99rem;;
}

.sticky_anchor span {
    text-decoration: line-through;
}

/* upsell/downsell/thanks: generals: end */


/* upsell: start */
.upsell-one {
    padding-top: 4.8rem;
}

.upsell-one-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.upsell-one-btn-image {
    width: 40rem;
    height: auto;
    object-fit: contain;
}

@media (max-width: 450px) {
    .upsell-one-btn-image {
        width: 100%;
    }
}

.upsell-one-skip-text {
    color: blue;
}

.upsell-one-offer {
    font-weight: 700;
    text-transform: capitalize;
}

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



.upsell-product-image {
    width: 64rem;
    height: auto;
    object-fit: contain;
}























.hero-section109 {
            --primary-color109: #6366f1; /* Indigo */
            --primary-hover109: #4f46e5;
            --text-dark109: #1f2937;
            --text-gray109: #4b5563;
            --bg-color109: #f9fafb;
            --orbit-size109: 500px; 
            --clock-rope-height109: 60px;
        }

        /* --- Main Section Container 109 --- */
        .hero-section109 {
            position: relative;
            width: 100%;
            max-width: 100%;
            min-height: auto;
 padding-top: 60px;
    padding-bottom: 40px;
                display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            background-color: var(--bg-color109);
            overflow: hidden; 
    background: url(../assets2/course/create-section1.webp) no-repeat center center/cover;
        border: none !important;
        outline: none !important;

        }

        /* --- Left Side: Content 109 --- */
        .hero-content109 {
            flex: 1;
            z-index: 2;
            padding-right: 20px;
                            padding-left: 140px; /* <-- this fixes your left spacing */

        }

        .hero-heading109 {
            font-size: 6rem;
            line-height: 1.1;
            color: var(--text-dark109);
            margin-bottom: 1.5rem;
            margin-top: 0;
            font-weight: 800;
            
        }

        .hero-heading109 span {
            color: var(--primary-color109);
        }

        .hero-subheading109 {
            font-size: 3.5rem;
            line-height: 1.2;
            color: var(--text-dark109);
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        .hero-description109 {
            font-size: 1.8rem;
            line-height: 1.6;
            color: var(--text-gray109);
            margin-bottom: 3rem;
            max-width: 90%;
        }

        .cta-button109 {
            display: inline-block;
    background: linear-gradient(90deg, #ff00e6, #7000ff);
            color: white;
            font-weight: 700;
            padding: 20px 45px;
            border-radius: 50px;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
            font-size: 3.5rem;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
                animation: startPop 1.4s ease-in-out infinite;

        }

        .cta-button109:hover {
            background-color: var(--primary-hover109);
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
        }

        /* --- Right Side: Orbit Animation 109 --- */
        .hero-visuals109 {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            height: 700px;
        }

        .orbit-container109 {
            position: relative;
            width: var(--orbit-size109);
            height: var(--orbit-size109);
            /* No border, no background */
            display: flex;
            justify-content: center;
            align-items: center;
            animation: rotateOrbit109 20s linear infinite;
        }

        /* The Main Central Image 109 */
        .main-image109 {
            position: absolute;
            width: 300px; /* Adjust width as needed */
            height: auto;
            max-height: 350px;
            object-fit: contain;
            z-index: 10;
            /* PURE IMAGE: No shadow, no background, no border */
            background: transparent;
            box-shadow: none;
            border: none;
            padding: 0;
            animation: counterRotate109 20s linear infinite; 
        }

        /* The Orbiting Objects 109 */
        .orbit-item109 {
            position: absolute;
            width: 120px; /* Adjust width as needed */
            height: auto;
            /* PURE IMAGE CONTAINER: Transparent */
            background: transparent;
            box-shadow: none;
            border: none;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: counterRotate109 20s linear infinite;
        }
        
        .orbit-item109 img {
            width: 100%;
            height: auto;
            display: block;
            /* Ensure the image itself has no styling artifacts */
            border: none;
            outline: none;
        }

        /* Positioning the 3 items */
        .item-1-109 { top: -40px; left: 50%; transform: translateX(-50%); } 
        .item-2-109 { bottom: 40px; right: -30px; } 
        .item-3-109 { bottom: 40px; left: -30px; } 

        /* --- Hanging Clock 109 --- */
        .hanging-clock-container109 {
            position: absolute;
            top: 0;
            right: 5%;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 20;
            transform-origin: top center;
            animation: swing109 3s ease-in-out infinite;
        }

        .clock-rope109 {
            width: 3px;
            height: var(--clock-rope-height109);
            background-color: #333;
        }

        .clock-body109 {
            background-color: #ef4444; 
            color: white;
            padding: 20px 30px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            border: 3px solid #b91c1c;
        }

        .clock-label109 {
            font-size: 1.7rem;
            text-transform: uppercase;
            font-weight: bold;
            margin-bottom: 5px;
            letter-spacing: 1px;
        }

        .clock-timer109 {
            font-family: 'Courier New', Courier, monospace;
            font-size: 2.4rem;
            font-weight: 900;
        }

        /* --- Animations 109 --- */
        @keyframes rotateOrbit109 {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes counterRotate109 {
            from { transform: rotate(0deg); }
            to { transform: rotate(-360deg); }
        }

        @keyframes swing109 {
            0% { transform: rotate(2deg); }
            50% { transform: rotate(-2deg); }
            100% { transform: rotate(2deg); }
        }

        /* --- Responsive Design 109 --- */
        @media (max-width: 1200px) {
            .hero-heading109 { font-size: 4.5rem; }
            .hero-subheading109 { font-size: 2.5rem; }
            .hero-description109 { font-size: 1.5rem; }
            .hero-section109 {
                flex-direction: column;
                justify-content: center;
                text-align: center;
                padding-top: 220px; 
            }
            .hero-description109 { margin: 0 auto 30px auto; }
            .hanging-clock-container109 {
                right: 50%;
                transform: translateX(50%);
                animation: none;
                top: 0;
            }
            .main-image109{
                width: 920px;
            }
            .clock-rope109 { height: 30px; }
        }

        @media (max-width: 768px) {

    .hero-section109 {
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 160px;
        padding-bottom: 80px;  
        --orbit-size109: 340px;
    }
    .hero-content109{
        padding-left: 0px;
        padding-right: 0px;
    }

    .hero-heading109 { font-size: 3.2rem; }
    .hero-subheading109 { font-size: 2rem; }
    .hero-description109 { font-size: 1.4rem; }

    .hero-visuals109 {
        height: auto;
        top: 0;
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .main-image109 {
        width: 320px;   /* Bigger and proportional */
        max-width: 90%;
    }

    .orbit-item109 {
        width: 90px;
    }

    .cta-button109 {
        font-size: 1.5rem;
        padding: 18px 40px;
    }
}

















/* --- POPUP VARIABLES --- */
:root {
    --popup-red-bg: #E93223;
    --popup-yellow-bg: #FEEB3B;
    --popup-orange-btn: #FA7D19;
    --popup-red-text: #D92C1E;
    --popup-green-text: #2E8B57;
    --popup-addon-bg: #FDFEDA;
    --popup-border-dashed: #888;
}

/* --- The Overlay (Background Blur & Fade) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    
    /* Flexbox Center */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;

    /* ANIMATION STATES (Hidden by default) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevents clicking when hidden */
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Class to add via JS to show the modal */
.modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- Modal Container (Pop Animation) --- */
.modal-container {
    position: relative;
    width: 100%;
    /* INCREASED SIZE FOR DESKTOP */
    max-width: 700px; 
    
    /* ANIMATION: Start slightly smaller and transparent */
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

/* When overlay is visible, scale container to normal size */
.modal-overlay.is-visible .modal-container {
    transform: scale(1);
    opacity: 1;
}

/* --- Close Button --- */
.close-btn {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 45px; /* Bigger button */
    height: 45px;
    background-color: var(--popup-red-text);
    color: white;
    border: 3px solid white;
    border-radius: 50%;
    font-size: 30px;
    font-weight: bold;
    line-height: 38px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: background-color 0.2s, transform 0.2s;
}
.close-btn:hover {
    background-color: darkred;
    transform: rotate(90deg); /* Nice spin effect on hover */
}

/* --- Box Structure --- */
.modal-box {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    text-align: center;
}

/* --- Content Styling (Upscaled) --- */
.modal-header-red {
    background-color: var(--popup-red-bg);
    color: white;
padding: 0px 85px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
}

.stop-img {
    /* Increased size significantly */
    height: 190px; 
    width: auto;
    object-fit: contain;
    
    /* These ensure no extra space is added by the browser */
    margin: 0;
    padding: 0;
    display: block;
    
    /* OPTIONAL: If you feel it's still too far right, 
       you can use a negative margin to pull it left */
    /* margin-left: -20px; */ 
}
.wait-text {
    font-size: 100px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}

.modal-subheader-yellow {
    background-color: var(--popup-yellow-bg);
    color: black;
    font-weight: bold;
    padding: 12px;
    font-size: 20px;
}

.modal-body { padding: 35px 40px; }

.main-headline {
    color: #333;
    font-size: 34px; /* Bigger Headline */
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 25px;
    margin-top: 0;
}

.highlight-red { color: var(--popup-red-text); }
.highlight-green { color: var(--popup-green-text); }
.underline { text-decoration: underline; }

.price-banner-yellow {
    background-color: var(--popup-yellow-bg);
    font-weight: bold;
    font-size: 24px; /* Bigger Price */
    padding: 15px;
    margin-bottom: 25px;
    color: #222;
}

.claim-button-orange {
    width: 100%;
    padding: 18px;
    background-color: var(--popup-orange-btn);
    background-image: linear-gradient(to bottom, #fb9d4d, #f97c1b);
    color: white;
    border: none;
    font-size: 30px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.1s ease;
    margin-bottom: 30px;

    display: inline-block;      /* key fix */
    transform-origin: center;   /* key fix */
}



.claim-button-orange:hover { transform: scale(1.02); }

/* --- Add-on Section --- */
.addon-section {
    border: 2px dashed var(--popup-border-dashed);
    background-color: var(--popup-addon-bg);
    padding: 20px;
    text-align: left;
    font-size: 15px;
    color: #444;
}

.checkbox-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.arrow-gif { height: 24px; margin-right: 12px; }
#addonCheckbox { transform: scale(1.6); margin-right: 12px; cursor: pointer; }

.checkbox-label {
    font-weight: bold;
    font-size: 16px;
    color: black;
    cursor: pointer;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
/* Scale down for tablets/mobile so the "Bigger" desktop size doesn't break phones */
@media (max-width: 768px) {
    .modal-container { max-width: 90%; }
    .wait-text { font-size: 50px; }
    .stop-img { height: 60px; }
    .main-headline { font-size: 24px; }
    .price-banner-yellow { font-size: 18px; }
    .claim-button-orange { font-size: 22px; padding: 14px; }
    .modal-body { padding: 20px; }
    .header-content { gap: 15px; }
    .close-btn { width: 35px; height: 35px; font-size: 24px; line-height: 28px; top: -15px; right: -15px; }
}

@media (max-width: 480px) {
    .wait-text { font-size: 28px; }
    .stop-img { height: 35px; }
    .main-headline { font-size: 20px; }
    .claim-button-orange { font-size: 18px; }
    .addon-section { font-size: 13px; }
}
















/* --- MAIN COMPONENT (-50) --- */
.puzzle-component-50 {
    position: relative;
    width: 100%;
    height: 1000px; /* Keeps the image ratio intact */
    
    /* Background Image */
    background-image: url('../assets2/course/faq-bg-img.webp'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Centering & Border */
    margin: 0 auto;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-top: 2px solid black;

    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    padding-bottom: 0;
}

/* Utility to hide elements */
.hidden-50 {
    display: none !important;
}

.overlay-container-50 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- TYPOGRAPHY: HEADING (6rem) --- */
.top-title-50 {
    text-align: center;
    margin-top: 5%;
    
    /* Responsive sizing: min 2rem, preferred 8vw, max 6rem */
    font-size: clamp(2.5rem, 8vw, 6rem); 
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    
    /* Colorful Gradient Text */
    background: linear-gradient(to right, #fd049f, #f0fe04);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
    /* Glow */
    filter: drop-shadow(0 0 10px rgba(255, 0, 204, 0.3));
    z-index: 2;
    position: relative;
}

.gradient-text-19{
  color:  white;
  font-size: 2.8rem;
   margin-top: 1rem; 
   text-align:center;
   font-weight: bold;
}
/* --- CHALKBOARD AREA --- */
.chalkboard-interaction-area-50 {
    position: absolute;
    top: 36%;   /* Align with green board in image */
    left: 24%;
    width: 51%;
    height: 44%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 5;
}

/* --- LOCKED STATE --- */
.locked-state-50 {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px); /* Blurs the board behind it */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.lock-icon-50 {
    font-size: clamp(3rem, 5vw, 5rem);
    margin-bottom: 0;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
}

/* --- SUBHEADING (3.5rem) --- */
.subheading-text-50 {
    /* Responsive: min 1.5rem, max 3.5rem */
    font-size: clamp(1.5rem, 4vw, 3.5rem); 
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* --- PUZZLE ACTIVE STATE --- */
.puzzle-state-50 {
    width: 100%;
}

.math-text-50 {
    /* Big Math Text */
    font-size: clamp(2rem, 5vw, 4rem); 
    color: #fff;
    text-shadow: 2px 2px 0 #000;
    margin-bottom: 10px;
}

.answer-box-50 {
    padding: 5px;
    /* Content Size (1.8rem) */
    font-size: 1.8rem; 
    border-radius: 10px;
    border: 3px solid #fff;
    background: rgba(0,0,0,0.5);
    color: #fff;
    width: 70%;
    text-align: center;
    font-weight: bold;
    outline: none;
}
.answer-box-50::placeholder { color: #ddd; }
.answer-box-50:focus { border-color: #ff00cc; background: rgba(0,0,0,0.8); }

/* --- CONTROLS AREA --- */
.controls-container-50 {
    position: absolute;
    bottom: 5%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    
}

/* --- TIMER --- */
.timer-box-50 {
    background: #fff;
    color: #ff4757;
    padding: 5px 5px;
    border-radius: 50px;
    font-size: 1.8rem; /* Content Size */
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    margin-bottom: 20px;
}
.steps-50{
    font-size: 3.0rem; 
    margin-top: 3.5rem; 
    color: #fdf0d5; 
    text-align:center;
}

/* --- BUTTON --- */
.orange-btn-50 {
    /* Bright Gradient */
    background: linear-gradient(90deg, #FF512F 0%, #DD2476 100%);
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    color: white;
    font-size: 1.8rem; /* Content Size */
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 25px rgba(221, 36, 118, 0.6);
    transition: transform 0.2s;
    text-transform: uppercase;
        animation: pulseZoom50 1.4s ease-in-out infinite;

}
@keyframes pulseZoom50 {
    0% { transform: scale(1.3); }
    50% { transform: scale(1.52); }
    100% { transform: scale(1.3); }
}

.orange-btn-50:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(221, 36, 118, 0.8);
}

/* --- RESULTS --- */
.result-message-50 {
    margin-top: 10px;
    padding: 5px 15px;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
}
.result-message-50.success { background-color: #2ecc71; }
.result-message-50.fail { background-color: #e74c3c; }

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 600px) {
    .puzzle-component-50 {
        border-width: 4px;
    }

    .chalkboard-interaction-area-50 {
        top: 59%;           /* pushes it down so it doesn't cover the text */
        left: 50%;          /* centers it horizontally */
        transform: translateX(-50%);
        width: 80%;         /* wider for mobile */
        height: auto;       /* natural height */
    }
    .steps-50{
        font-size: 2.0rem; margin-top: 5.5rem; color: #fff; text-align:center;
    }
    
    .locked-state-50 {
        padding: 25px;
        height: auto;
        min-height: 180px;
    }
    
    .orange-btn-50 {
        padding: 10px 25px;
        font-size: 1.2rem; /* Scale down content on mobile */
    }
    .answer-box-50 {
        font-size: 1.4rem;
    }
}