body {
    font-family: 'Poppins', sans-serif;
    background: #fff;
    margin: 0;
    padding: 0;
    color: #333;
   
}
/* === Final Fix for Chart Image === */
.right-section {
    display: flex !important;
    flex-direction: column !important;
   /* height: 70vh !important;*/
}

    .right-section > div:nth-child(1),
    .right-section > div:nth-child(2) {
        flex: 0 0 auto !important; /* keep natural height */
    }

    .right-section > div:nth-child(3) {
        flex: 1 1 auto !important; /* take leftover height */
        padding: 3px !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
        background: #fff !important;
    }

        
/* === Final Chart Wrapper + Image Fix === */








.left-section {
    position: relative; /* anchor the alert inside */
}

.custom-alert {
    position: absolute;
    top: 65%; /* roughly where the OTP button sits */
    left: 50%;
    transform: translateX(-50%);
    display: none; /* hidden by default */
    z-index: 9999;
}

.custom-alert-content {
    background: #fff;
    padding: 12px 18px;
    border-radius: 10px;
    text-align: center;
    max-width: 250px;
    width: max-content;
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    border: 1px solid #ddd;
    animation: fadeInScale 0.3s ease;
    background: linear-gradient(180deg, #F5F7E9, #FAF0C8);
}

    .custom-alert-content p {
        margin-bottom: 10px;
        font-size: 0.95rem;
        color: #333;
    }

    .custom-alert-content button {
        background: #fff;
        color: #DC3031;
       
        padding: 6px 14px;
        border-radius: 6px;
        
        cursor: pointer;
        font-size: 0.85rem;
        border: solid 1px #DC3031;
    }

        .custom-alert-content button:hover {
            background: #d62828;
            color: #fff;
        }

/* Small animation */
@keyframes fadeInScale {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (min-width: 1900px) {
    .custom-alert-content {
        max-width: 400px; /* wider box */
        min-width: 250px;
        padding: 20px 28px; /* more padding */
        border-radius: 14px;
    }

        .custom-alert-content p {
            font-size: 1.2rem; /* larger text */
        }

        .custom-alert-content button {
            font-size: 1rem;
            padding: 10px 20px; /* bigger button */
            border-radius: 8px;
            border: solid 1px #DC3031;
            background: #fff;
            color: #DC3031;
        }
            .custom-alert-content button:hover {
                background: #d62828;
                color: #fff;
            }

    .otp-button{
        font-size:16px !important;
    }
}



#otpRow {
    display: none; /* hide initially */
}

.terms-list li::marker {
    font-weight: bold; /* Makes numbers bold */
    color: #444; /* Optional: same as text color */
}
/* Make the modal same width as lady image */
#termsModal .modal-dialog {
    max-width: 70%; /* Take full available width */
    width: 90%; /* Adjust percentage as needed */
    margin: auto; /* Keep it centered */
}

/* Optional: adjust modal body for better scroll */
#termsModal .modal-body {
    max-height: 70vh; /* 70% of viewport height */
    overflow-y: auto; /* Scrollable if content exceeds */
}


/* ==================== SEPARATOR ==================== */
.separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

    .separator::before,
    .separator::after {
        content: "";
        flex: 1;
        border-bottom: 2px solid #666;
    }

    .separator span {
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .separator span::before,
        .separator span::after {
            content: "";
            width: 8px;
            height: 8px;
            background: #666;
            border-radius: 50%;
        }

        .separator span i {
            width: 10px;
            height: 10px;
            background: #666;
            transform: rotate(45deg);
            display: inline-block;
        }

/* ==================== LEFT SECTION ==================== */
.left-section {
    /*background: #f5f5dc;*/
    
    background-image: url('../images/grid-image.png');
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    height: 70vh;
}

    .left-section img.logo {
        width: 30%;
        margin: 0 auto 10px;
        display: block;
    }

    .left-section img.pngname {
        width: 90%;
        margin: 0 auto 10px;
        display: block;
    }

.scheme {
    text-align: center;
    color: #a4161a;
    font-weight: bold;
    margin: 15px 0;
    font-size:28px;
}

.otp-box {
    text-align: center;
    margin: 10px 0;
}

.otp-box-mobileno,
.otp-box-otpno {
    padding: 3px;
    margin: 3px;
    border: 1px solid #ccc;
    border-radius: 8px;
    
}

.otp-button {
    background: #fff;
    color: #DC3031;
    padding: 6px 15px;
    border: solid 1px #DC3031;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
}

    .otp-button:hover {
        background: #d62828;
        color: #fff;
    }

.social-icons {
    text-align: center;
    margin: 15px 0;
}

    .social-icons img {
        width: 25px;
        margin: 0 6px;
        cursor: pointer;
    }

.terms-text {
    text-align: center;
    font-size: 18px;
}

    .terms-text a {
        color: blue;
        text-decoration: none;
    }

        .terms-text a:hover {
            text-decoration: underline;
        }

/* ==================== RIGHT SECTION ==================== */
.right-section {
    height: 70vh;
}

.heading {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    color: #a4161a;
    margin-bottom: 10px;
    /*height:5%;*/
}
.top-cards{
    /*height:25%;*/
}

.card {
    position: relative;
    background: linear-gradient(180deg, #fffdf2, #fff1a8); /* beige theme */
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    overflow: hidden;
}

.ribbon {
    position: absolute;
    top: 12px;
    left: -40px; /* shift to corner */
    transform: rotate(-42deg);
    background: linear-gradient(90deg, rgb(245, 84, 75), rgb(248, 173, 169));
    color: #fff;
    padding: 4px 35px; /* smaller size */
    font-size: 16px; /* smaller text */
    font-weight: bold;
    border: 1px solid #8b6f47; /* darker beige border */
    border-radius: 3px;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    /* Glow + subtle shimmer */
    animation: softGlow 2.5s infinite alternate, glitter 3s linear infinite;
    background-size: 200% 200%;
    overflow: hidden;
}

/* Glow effect */
@keyframes softGlow {
    from {
        box-shadow: 0 0 4px rgba(210,180,140,0.6);
    }

    to {
        box-shadow: 0 0 10px rgba(189,154,90,0.9);
    }
}

/* Shimmer effect */
@keyframes glitter {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Sparkle dots */
.ribbon::after {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 2px, transparent 3px) repeat;
    background-size: 40px 40px; /* distance between sparkles */
    animation: sparkleMove 4s linear infinite;
    pointer-events: none; /* don’t block clicks */
}

@keyframes sparkleMove {
    from {
        transform: translate(0,0);
    }

    to {
        transform: translate(-40px,-40px);
    }
}






.card h3 {
    font-size: 24px;
    color: #a4161a;
    margin-bottom: 8px;
}

.card p {
    font-size: 20px;
    margin: 0;
}

.total-box {
    background: #008f3e;
    color: #fff;
    padding: 2px 8px;
    border-radius: 8px;
    margin-top: 4px;
    font-size: 20px;
    width:fit-content;
}

.chart-img {
    width: 100%;
  height: 67%;
    
    opacity: 0;
    transform: translateY(80px);
    animation: slideUp 2s ease forwards;
}
.SSYImg {
    max-height: 179px !important;
}

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

/* ==================== STEPS SECTION ==================== */
.step-img {
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    object-fit: cover;
}

.step {
    position: relative;
    padding: 45px 15px 15px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: 0.2s;
    /*height: 100%;*/
}

    .step:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 16px rgba(0,0,0,0.3);
    }

    .step img {
        width: 25%;
       /* height: 25%;*/
        margin-bottom: 10px;
    }

    .step p {
        font-size: 18px;
        font-weight: 500;
        margin: 0;
    }

.dark1 {
    background: linear-gradient(135deg, #ffe6d3, #f4b183);
}

.dark2 {
    background: linear-gradient(135deg, #e8e4f4, #b8b4e9);
}

.dark3 {
    background: linear-gradient(135deg, #f3ede1, #cdbba7);
}

.dark4 {
    background: linear-gradient(135deg, #dafaf4, #b1e6dd);
}



.step-label {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 14px;
    border-radius: 25px;
    animation: glowStep 6s infinite;
}

.dark1 .step-label {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    animation-delay: 0s;
}

.dark2 .step-label {
    background: linear-gradient(135deg, #36d1dc, #5b86e5);
    animation-delay: 1.5s;
}

.dark3 .step-label {
    background: linear-gradient(135deg, #b8a999, #7a5e47);
    animation-delay: 3s;
}

.steps .col-12.col-md-4 img {
    width: 100%; /* full width of 4 cols */
    /*height: 100%; */
   /* object-fit: cover;*/ /* crop nicely if aspect ratio differs */
    border-radius: 10px; /* same rounded look as step */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* same depth */
}



.dark4 .step-label {
    background: linear-gradient(135deg, #3c9f78, #1e6f4d);
    animation-delay: 4.5s;
}

@keyframes glowStep {
    0%,80%,100% {
        opacity: 0.4;
        transform: translateX(-50%) scale(1);
    }

    40% {
        opacity: 1;
        transform: translateX(-50%) scale(1.2);
        box-shadow: 0 0 20px rgba(255,255,255,0.8);
    }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .heading {
        font-size: 30px;
    }
    .step p{
        font-size:14px;
    }
    .step-label {
        font-size: 12px;
        padding: 5px 10px;
    }
    .left-section{
        height:auto;
    }
    .right-section{
        height:auto;
    }
    .chart-img{
        height:auto;
    }

    .card h3 {
        font-size: 16px;
        color: #a4161a;
        margin-bottom: 5px;
    }

    .card p {
        font-size: 14px;
        margin: 0;
    }

    .total-box {
        background: #008f3e;
        color: #fff;
        padding: 2px 6px;
        border-radius: 8px;
        margin-top: 4px;
        font-size: 16px;
        width: fit-content;
    }
    .chart-wrapper {
        height: auto !important; /* container adapts to image */
    }

        .chart-wrapper .chart-img {
            width: 100% !important; /* fill container width */
            height: auto !important; /* preserve aspect ratio */
            object-fit: contain !important; /* prevent distortion */
            display: block !important;
        }
}


/* --- Tablet & Foldable Devices Layout --- */
/* Covers: iPad Mini, iPad Pro (portrait/landscape), Surface Pro, Asus Zenbook Fold tablet mode */
@media (min-width: 768px) and (max-width: 1204px) {
    .chart-wrapper {
        height: auto !important; /* container adapts to image */
    }

        .chart-wrapper .chart-img {
            width: 100% !important; /* fill container width */
            height: auto !important; /* preserve aspect ratio */
            object-fit: contain !important; /* prevent distortion */
            display: block !important;
        }
    .heading{
        font-size:30px;
    }
    .SSYImg {
        max-height: 320px !important;
    }
    /* Left & Right sections stacked, reset vh heights */
    .left-section,
    .right-section {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        height: auto !important; /* override 70vh */
        min-height: unset !important;
        margin-bottom: 20px;
    }

    /* --- Steps Section --- */
    /* First step image full width */
    .steps > .col-md-4:first-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }

    /* Step boxes = 2 per row */
    .steps > .col-md-2 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 20px;
    }

    /* --- Cards Section --- */
    /* Show 2 cards per row for readability */
    .top-cards .col-md-6,
    .top-cards .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 20px;
    }

    .top-cards .card {
        height: 100% !important;
        padding: 18px !important;
        font-size: 0.95rem !important;
    }

        .top-cards .card h3 {
            font-size: 1.1rem !important;
            margin-bottom: 10px;
        }

    .top-cards .total-box {
        font-weight: 600;
        font-size: 0.95rem !important;
        margin-top: 10px;
    }

    /* --- Chart full width like mobile --- */
    .chart-img {
        width: 100vw !important; /* span viewport */
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important; /* push outside container */
        height: auto !important;
        display: block;
    }
    .pngname{
        width:40%!important;
    }
    .logo{
        width:12% !important;
    }
    .card{
        max-height:250px !important
    }
}

/* --- Large Foldable (Zenbook Fold opened, widescreen tablets) ---*/
@media (min-width: 1205px) and (max-width: 1368px) {
    /* still stacked like tablet */
    .left-section,
    .right-section {
        height: 70vh !important;
    }
    .pngname {
        width: 40% !important;
    }

    .logo {
        width: 12% !important;
    }
    .card{
        max-height:250px !important;
        padding:10px;
    }

        .card h3 {
            font-size: 16px;
            color: #a4161a;
            margin-bottom: 5px;
        }

        .card p {
            font-size: 14px;
            margin: 0;
        }
    .total-box {
        background: #008f3e;
        color: #fff;
        padding: 2px 6px;
        border-radius: 8px;
        margin-top: 4px;
        font-size: 16px;
        width: fit-content;
    }
    .chart-img {
        width: 100%;
        height: 79% !important;
        opacity: 0;
        transform: translateY(80px);
        animation: slideUp 2s ease forwards;
       
    }
    .ribbon {
        font-size: 12px;
    }
}
@media(min-width: 1369px) and (max-width: 1600px) {
    .left-section,
    .right-section {
        height: 70vh !important;
    }

    .pngname {
        width: 40% !important;
    }

    .logo {
        width: 12% !important;
    }

    .card {
        max-height: 250px !important;
        padding: 10px;
    }

        .card h3 {
            font-size: 16px;
            color: #a4161a;
            margin-bottom: 5px;
        }

        .card p {
            font-size: 14px;
            margin: 0;
        }
   
    .total-box {
        background: #008f3e;
        color: #fff;
        padding: 2px 6px;
        border-radius: 8px;
        margin-top: 4px;
        font-size: 15px;
        width: fit-content;
    }
    .chart-img {
        width: 100%;
        /*height: fit-content !important;*/
        opacity: 0;
        transform: translateY(80px);
        animation: slideUp 2s ease forwards;
    }
    .ribbon{
        font-size:12px;
    }
}

@media  (min-width: 1023px) and (max-width: 1024px) and (min-height: 1365px) and (max-height: 1024px)  {

    .left-section {
        max-height: 50vh !important;
    }
    .right-section{
        max-height:50vh !important;
    }
}






.chart-wrapper {
    height: 100% !important; /* match row height */
    width: 100% !important; /* match row width */
    padding: 0 !important; /* remove extra spacing */
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
}

    .chart-wrapper .chart-img {
        height: 100% !important;
        width: 100% !important;
        object-fit: fill !important; /* stretch in both directions */
        margin: 0 !important;
        display: block !important;
    }

.heading-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 10px 20px 2px 30px;
}

/* your existing heading */
.heading {
    font-size: 40px;
    font-weight: bold;
    color: #B22222;
    white-space: nowrap;

}
.gold-line {
    flex: 1;
    border-bottom: 4px dashed #b31217; /* 👈#DAA520 dotted underline effect */

    margin: 0 0; /* space between texts */
    height: 0; /* remove extra height */
}

.sub-heading {
    font-size: 22px;
    font-weight: 600;
    /*background: linear-gradient(to right, #ff4e50, #b31217);  gradient */
    color:#b31217;
   
    white-space: nowrap;
}

/* hide this whole thing on mobile */
@media (max-width: 768px) {
    .heading {
        font-size: 22px;
    }
    .sub-heading {
        font-size: 14px;
    }
    .heading-wrapper {
        flex-direction: column;
        gap: 3px;
        align-items: center;
    }

    .gold-line {
        display: none;
    }
}