/* BASE & LAYOUT STYLES */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #F7F9FF; 
            color: #333;
        }

        /* HEADER (Fixed Top Bar) */
        .header {
            background-color: #002255;
            color: white;
            padding: 15px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            position: fixed; 
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 450px; 
            margin: 0 auto;
            padding: 0 20px;
            box-sizing: border-box;
        }
        
        .logo-section {
            display: flex;
            align-items: center;
        }
        
        .logo-text {
            font-size: 14px;
            font-weight: bold;
        }

        .logo-image {
            width: 50px; 
            height: auto;
            display: block;
            margin-right: 10px;
        }
        
        .header-icons {
            font-size: 24px;
            color: white;
        }
		
		.header-icons a{
		color: white;
        
		}
		
		.header-icons a:hover {
		color: white;
        
		}
        
        
        /* MAIN CONTENT WRAPPER: Centers the content */
        .main-wrapper {
            max-width: 450px; 
            width: 100%;
            margin: 0 auto; 
            
            padding-top: 55px; 
            padding-bottom: 25px; 
            
            box-sizing: border-box;
        }

        /* CONTENT STYLING (Title and Cards) */
        .content {
            text-align: left; 
            padding: 0px 20px 0; 
        }

        h1 {
            font-size: 24px; 
            font-weight: bold;
            margin-bottom: 5px;
            color: #222;
        }
		
		h3 {
			font-size: 12px;
			font-weight: bold;
            margin-bottom: 5px;
            color: #222;
		}

        p {
            font-size: 14px;
            color: #555;
         /*   margin-bottom: 25px;*/
        }
        
        /* CARD STYLING 
        .account-card {
            background-color: #fff; 
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: border-color 0.2s;
        }
*/
        .account-card:hover {
             border-color: #004499; 
        }


  .card-image-container img {
    position: absolute; /* Take the image out of the normal flow */
    top: 50%; /* Move the top edge to the vertical center of the container */
    left: 50%; /* Move the left edge to the horizontal center of the container */
    transform: translate(-50%, -50%); /* Shift the image back by half its own width/height */
    max-width: 100%; /* Ensures image doesn't overflow */
    max-height: 100%; /* Ensures image doesn't overflow */
}
        
        .card-title {
            font-size: 18px;
            font-weight: bold;
            color: #000;
            margin-bottom: 5px;
        }
        
        .card-description {
            font-size: 13px;
            color: #555;
            line-height: 1.4;
        }

        /* BUTTON CONTAINER: No longer fixed. Part of the scrollable flow. */
        
        /* NEXT BUTTON */
        .next-btn {
            background-color: #004499; 
            color: white;
            border: none;
            padding: 15px 0; 
            width: 100%;
            display: block;
            font-weight: 600;
            font-size: 18px;
            text-align: center;
            text-decoration: none;
            margin: 0 auto;
            border-radius: 5px; 
        }
		
		
			.illustration {
			width: 100%;
			max-width: 450px;
			height: auto;
			min-height: 250px;	
			margin: 0 auto;
			background-image: url('images/screen1_banner.png'); 
			background-size: cover; 
			background-position: center;
			background-repeat: no-repeat;
		}

        
        .button-container {
            width: 100%;
            z-index: 10;
            padding: 10px 20px 0px 20px; /* Adjust bottom 20px for the gap */
            box-sizing: border-box;
        }
        
        
        .get-started-btn {
            background-color: #004499; 
            color: white;
            border: none;
            padding: 18px 0; 
            width: 100%;
            max-width: 450px; 
            display: block;
            font-weight: 600;
            font-size: 18px;
            text-align: center;
            text-decoration: none;
            margin: 0 auto;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
        }
		
		
		/*Step3 css**/
		
		
		
		/* ==================================== */
/* 3. ILLUSTRATION CONTAINER */
/* ==================================== */
.illustration-container {
    width: 100%;
    height: 0; 
    padding-bottom: 55%; /* Aspect ratio of the image (55% height relative to width) */
    
    background-image: url('./images/screen1_banner.png');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px; /* Space above button */
}

/* ==================================== */
/* 4. BUTTON STYLES */
/* ==================================== */
.button-container {
    padding: 0 20px; /* Aligns with .content and .help-options */
    margin-bottom: 25px;
}

.proceed-btn { 
    background-color: #004499;
    color: white;
    border: none;
    padding: 12px 0; /* Increased vertical padding for better look */
    width: 100%;
    display: block;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s;
}

.proceed-btn:hover {
    background-color: #003377;
}

/* ==================================== */
/* 5. HELP OPTIONS (CARDS) */
/* ==================================== */
.help-options {
    padding: 10px 20px 0; /* Horizontal padding for alignment */
    margin-top: 15px; 
}

.help-row {
    display: flex;
    justify-content: space-between;
    gap: 15px; /* Space between two cards in a row */
    margin-bottom: 15px;
}

/* --- SMALL CARD STYLES (How to Apply, Resume, OTP, Bio Verify) --- */
.help-card {
    flex: 1; 
    background-color: #fff;
    border-radius: 8px;
    padding: 10px; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    
    /* Icon aur text ko side-by-side aur vertically center mein rakhega */
    display: flex;
    align-items: center; 
    text-align: left;
    
    font-size: 14px;
    font-weight: bold;
    color: #444;
    cursor: pointer;
    transition: transform 0.2s;
}

.help-card:hover, .support-chat-card:hover {
    transform: translateY(-2px); /* Lift effect on hover */
}

/* --- ICON CONTAINER FIX (The Parent) --- */
.help-icon-container {
    /* *** FIX: ZAROORI FOR ABSOLUTE POSITIONING *** */
    position: relative; 
    
    /* Icon area size set karein */
    width: 40px; 
    height: 40px; 
    
    margin-right: 12px; 
    flex-shrink: 0;
}

/* --- IMAGE FIX (The Child) --- */
.card-icon-img {
    /* Image ko parent (.help-icon-container) ke 100% size tak scale karein */
    width: 100%;
    height: 100%;
    
    /* Image ko center mein rakhega aur aspect ratio maintain karega */
    object-fit: contain; 
    
    /* Absolute centering ki zaroorat nahi agar width/height 100% hai */
    position: absolute; 
    top: 0; 
    left: 0; 
    
    display: block;
    margin: 0;
    float: none;
}

/* --- LARGE CARD (Check Application Status) --- */
.help-card.large-card {
    flex: 1; /* Pure row ki width lega */
    padding: 15px 10px; /* Thora zyada vertical padding */
}

/* --- SUPPORT CHAT BUTTON --- */
.support-chat-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: bold;
    transition: transform 0.2s;
    width: 100%; /* Ensure it spans the entire row */
}

.support-icon {
    /* Icon container for support chat */
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    flex-shrink: 0;
}

.support-icon-img {
    /* Support Icon Image */
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================================== */
/* 6. RESPONSIVE ADJUSTMENTS */
/* ==================================== */
@media (max-width: 380px) {
    .help-card, .help-card.large-card, .support-chat-card {
        padding: 10px; 
        font-size: 13px;
    }
    
    .help-icon-container, .support-icon {
        width: 35px;
        height: 35px;
        margin-right: 8px;
    }
}
		
		
		
		/***step 4**/
		
		 .account-choices {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            padding: 0 20px;
            margin-bottom: 25px;
        }
        
        .choice-card {
            flex: 1;
            background-color: #fff;
            border: 2px solid #fff; /* Default border white rakha */
            border-radius: 10px;
            padding: 20px 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Thora zyada shadow */
            cursor: pointer;
            text-align: center;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .choice-card.selected {
            border-color: #004499;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); 
        }
     
        
        .choice-card-title {
            font-size: 18px;
            font-weight: bold;
            color: #000;
            margin-bottom: 5px;
        }
        
        .choice-card-desc {
            font-size: 12px;
            color: #555;
            line-height: 1.3;
        }
		
		
		 .trading-cards {
            padding: 0 20px;
        }

        .trading-card {
            background-color: #fff; 
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: border-color 0.2s;
        }
        
        .trading-card.selected {
            border-color: #004499;
        }

       .card-image-container {
    width: 100%;
    height: 0;
    padding-bottom: 40%;
    margin-bottom: 15px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;

    /* --- Add these three lines to enable Flexbox centering --- */
    display: flex; /* 1. Activate Flexbox */
    justify-content: center; /* 2. Center horizontally */
    align-items: center; /* 3. Center vertically */
}
        
        .card-title {
            font-size: 18px;
            font-weight: bold;
            color: #000;
            margin-bottom: 5px;
        }
        
        .card-description {
            font-size: 13px;
            color: #555;
            line-height: 1.4;
        }

        /* --- MINOR REQUIREMENTS & HELP/SUPPORT --- */
        .minor-details {
            /*padding: 0 20px;*/
        }

        /* Requirements Box */
        .requirements-box {
            background-color: #fff;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            margin-bottom: 25px;
        }

        .requirements-title {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 10px;
            color: #222;
        }

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

        .requirements-box ul li {
            font-size: 13px;
            color: #555;
            margin-bottom: 8px;
            /*display: flex;*/
            align-items: center;
        }

        .requirements-box ul li i {
            color: #004499;
            margin-right: 8px;
            font-size: 16px;
        }

        /* Help/Support Cards */
        .help-options {
            padding: 0; /* Padding is handled by .minor-details */
        }

        .help-row {
            display: flex;
            justify-content: space-between;
            gap: 15px; 
            margin-bottom: 15px;
        }

        .help-row.single-card-row {
            display: block; /* Full-width card ke liye block display */
        }
        
        .help-card {
            flex: 1; 
            background-color: #fff;
            border-radius: 8px;
            padding: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            
            display: flex;
            align-items: center; 
            text-align: left; 
            
            font-size: 14px;
            font-weight: 500;
            color: #444;
            cursor: pointer;
        }
        
        .help-icon-container {
            font-size: 20px;
            color: #004499; 
            margin-right: 12px;
            flex-shrink: 0; 

        }

        .help-card.large-card {
            width: 100%;
            padding: 15px; 
            font-weight: 600;
        }

        .support-chat-card {
            width: 100%;
            background-color: #fff;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            font-weight: 500;
            color: #444;
            cursor: pointer;
        }

        .support-icon {
            font-size: 20px;
            color: #004499;
            margin-right: 15px;
            flex-shrink: 0;
        }   
		
		
		/* --- REQUIRED CSS FOR SHOW/HIDE FUNCTIONALITY --- */

/* Default state: Hide the main content area */
.hidden-content {
    display: none; 
    padding-bottom: 20px; /* Neeche space ke liye */
}

/* Card Selection Highlighting */
.choice-card {
    /* Existing styles... */
    border: 2px solid #fff; /* Default border white */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.choice-card.selected {
    border-color: #004499; /* Blue border on selection */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); 
}

/* Individual and Minor options ko default hide rakhein */
#individual-options, #minor-options {
    display: none; 
    padding: 0 20px; /* Content ke liye horizontal padding */
}



/* Requirements Box ki styling (Minor ke liye) */
.requirements-box {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.requirements-box ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.requirements-box ul li {
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
    /*display: flex;*/
    align-items: center;
}

.requirements-box ul li i {
    color: #004499;
    margin-right: 8px;
}


/* --- MINOR OPTIONS SPECIFIC STYLES --- */

.requirements-box {
    /* Existing box styles */
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
}

.requirements-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    color: #222;
}

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

/* Document List (for Juvenile Card, Form-B, etc.) */
.document-list {
    list-style: disc; /* Simple bullet points */
    padding-left: 20px; /* Padding for bullets to show */
    margin: 0 0 15px 0;
}

.document-list li {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Separator Line */
.separator {
    border: 0;
    height: 1px;
    background-color: #eee;
    margin: 15px 0;
}

/* Guardianship Note (Justice Scale Icon and Text) */
.guardianship-note {
    display: flex;
    align-items: flex-start; /* Icon aur text ko top align karein */
    margin-top: 15px;
}

.guardianship-note i {
    font-size: 24px;
    color: #004499; /* Blue color for icon */
    margin-right: 15px;
    flex-shrink: 0; /* Icon ko chhota na hone de */
    /* Adjusting vertical alignment of the icon */
    transform: translateY(2px);
}

.guardianship-note p {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    padding: 0; /* P tag ki default padding/margin hata dein */
    margin: 0;
}


/* ======================================================= */
/* 1. Container (.choice-card-icon) */
/* ======================================================= */
.choice-card-icon {
    /* Dimensions and Appearance */
    width: 80px; 
    height: 80px;
    border-radius: 50%;
    background-color: #f0f7ff;
    margin: 0 auto 15px auto; /* Container ko card ke andar center kiya */
    
    /* CORE FIX: Enable positioning context */
    position: relative; 
    
    /* Anti-Conflict Measures */
    display: block; /* Flexbox ya Text-Align override nahi hoga */
    padding: 0;
}

/* ======================================================= */
/* 2. Image (.card-icon-img) */
/* ======================================================= */
.card-icon-img {
    /* Image Sizing: 70% of the parent container (80px x 80px) */
    width: 70%; 
    height: 70%; 
    object-fit: contain;
    
    /* CORE FIX: Absolute Center */
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    
    /* Anti-Conflict Measures */
    display: block;
    /* Margin aur float ki zaroorat nahi hai agar absolute position use ho raha hai */
    margin: 0; 
    float: none;
}


/**step 8**/

/* General Form Styling */
.form-group {
    /*margin-bottom: 22px;  *//* Spacing adjusted */
	/*Padding-top:10px;*/
}



/* Label Styling - Reduced from 16px to 15px */
.form-group label {
    display: block;
    font-size: 12px; /* Label font size reduced */
    font-weight: bold;
    margin-bottom: 7px;
    color: #333333;
    font-family: Arial, sans-serif;
}

/* Input/Text Field Styling - Reduced from 16px to 15px */
.form-control {
    width: 100%;
    padding: 10px 15px; /* Padding slightly reduced */
    height: 45px; /* Height slightly reduced */
    
    border: 1px solid #e0e0e0;
    border-radius: 8px; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    
    font-size: 15px; /* Input font size reduced */
    color: #333333; 
    
    box-sizing: border-box; 
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Placeholder Text Styling */
.form-control::placeholder {
    color: #999999;
    font-weight: normal;
}

/* Specific styling for the read-only Country Code field */
.country-code-input {
    color: #333333;
    font-weight: normal;
    background-color: #ffffff;
    cursor: default;
}

/* Continue Button Styling - Reduced from 18px */
.continue-button {
    /* ... other styles remain ... */
    padding: 14px 20px; /* Padding slightly reduced */
    font-size: 17px; /* Button font size reduced */
    font-weight: bold;
    /* ... other styles remain ... */
}

/* Assuming this is applied to a main container or a block element */
.label-container {
    /* Sizing */
    width: 353px;
    /* Height: 297px; (इसे आमतौर पर फॉर्म कंटेनर के लिए Auto रखा जाता है, ताकि कंटेंट के हिसाब से बढ़े) */
    
    /* Position and Layout - If using absolute positioning: */
    position: absolute;
    top: 189px;
    left: 20px;
    
    /* Or, if using margins (more common in responsive design): */
    /* margin-top: 189px; */
    /* margin-left: 20px; */

    /* Appearance */
    border-radius: 5px; /* Corner rounding */
    opacity: 1; /* Fully visible */
    
    /* No rotation needed as angle is 0 */
}

.content-heading{
	
	padding-bottom: 15px;
}
/* --- OTP Input Fields --- */
        .otp-inputs {
            display: flex;
            justify-content: center;
            gap: 12px; /* Space between input boxes */
            margin-bottom: 40px;
        }
        .otp-input {
            width: 40px; 
            height: 45px;
            font-size: 20px;
            text-align: center;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background-color: #ffffff;
            /* White background for the empty box look */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            outline: none;
            transition: border-color 0.3s;
            -moz-appearance: textfield; 
        }
        .otp-input::-webkit-outer-spin-button,
        .otp-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .otp-input:focus {
            border-color: #004797; /* Blue focus border */
            box-shadow: 0 0 0 3px rgba(0, 71, 151, 0.1); /* Subtle glow */
        }

        /* --- Verify Button --- */
        .verify-button {
            width: 100%;
            background-color: #004797; /* Deep blue */
            color: white;
            padding: 15px 20px;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .verify-button:hover {
            background-color: #003366;
        }

        /* --- Resend OTP Link --- */
        .resend-otp {
            margin-top: 20px;
            font-size: 14px;
            color: #555;
        }
        .resend-otp a {
            color: #004797; 
            text-decoration: none;
            font-weight: bold;
        }
        .resend-otp a:hover {
            text-decoration: underline;
        }
		
		
		
		/***step 10**/
		
		/* The actual dashed upload area */
        .upload-box {
            border: 2px dashed #b8c3d3; /* Light blue/gray dashed border */
            border-radius: 8px;
            padding: 30px 20px;
            text-align: center;
            background-color: #f7f9fc; /* Very light background inside box */
            cursor: pointer;
            transition: border-color 0.3s, background-color 0.3s;
        }
        .upload-box:hover {
            border-color: #004797;
        }

        /* Image Placeholder Icon */
        .upload-icon {
            width: 50px;
            height: 50px;
            margin: 0 auto 10px auto;
            /* Placeholder for an SVG/Image icon */
            background-color: #e0e7f1; /* Light blue circle background */
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .upload-icon svg {
            fill: #004797; /* Dark blue icon color */
            width: 30px;
            height: 30px;
        }

        .upload-text {
            font-size: 14px;
            color: #555;
            line-height: 1.4;
        }

        /* Footer Buttons */
        .footer-buttons {
            padding-top: 20px;
            width: 100%;
            max-width: 500px;
            box-sizing: border-box;
        }
    
        
        .reload-btn {
            background-color: #cc0033; /* Red color */
            color: white;
        }
        .reload-btn:hover {
            background-color: #a3002a;
        }
        
        .continue-button {
            background-color: #004797; /* Deep blue */
            color: white;
        }
        .continue-button:hover {
            background-color: #003366;
        }
		
		.upload-card-wrapper {
            width: 100%;
            max-width: 450px;
            background-color: #ffffff; /* White Background */
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle Shadow */
            box-sizing: border-box;
        }
		
		 
        .reload-btn { /* Button ka naam 'proceed-btn' kiya */
            background-color: #cc0033; 
            color: white;
            border: none;
            padding: 9px 0; 
            width: 100%;
            max-width: 450px; /* Button ki max width content ke barabar */
            display: block;
            font-weight: 600;
            font-size: 18px;
            text-align: center;
            text-decoration: none;
            margin: 0 auto;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
            transition: background-color 0.2s; /* Hover effect */
        }

    .proceed-btn.disabled-btn {
        background-color: #ccc !important;
        cursor: not-allowed;
        pointer-events: none;
        opacity: 0.6;
    }
	
	
	

/***************step11*******/

 .upload-box { border: 2px dashed #007bff; padding: 30px; text-align: center; cursor: pointer; background: #f8fbff; border-radius: 10px; position: relative; }
        .upload-box:hover { background: #f0f7ff; }
        .preview-img { max-width: 100%; max-height: 200px; border-radius: 8px; margin-top: 10px; display: none; }
        .remove-btn-red { background: #ff4d4d; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 14px; margin-top: 10px; }
        .alert-box { background: #ffebeb; color: #d93025; padding: 12px; border-radius: 5px; margin-bottom: 20px; border: 1px solid #fad2d2; }
		
/***************step12*******/
.ukn-container {
            max-width: 400px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            font-size: 15px;
        }
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        /* Style for hidden state */
        .hidden {
            display: none !important;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        }
        .checkbox-group input {
            margin-right: 10px;
        }
        .checkbox-group label {
            margin: 0;
            font-weight: normal;
        }

        .continue-button {
            width: 100%;
            padding: 12px;
            background-color: #004797;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        /* Style for disabled button */
        .continue-button:disabled {
            background-color: #a0a0a0;
            cursor: not-allowed;
        }
		
		
		/********step 13*****/
		/* --- Global Styles --- */


/* --- Comparison Tables --- */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    background-color: #ffffff;
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.comparison-table thead th {
    background-color: #004797; 
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 15px; 
    text-align: left;
}

/* Header columns (Sahulat & Standard) ko center karna */
.comparison-table thead th:not(:first-child) {
    text-align: center; 
}

/* Body columns (Icons wale) ko center karna */
.comparison-table tbody td {
    font-size: 12px;
    color: #555;
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

/* First column (Text) left align rahega, baki center */
.comparison-table tbody td:not(:first-child) {
    text-align: center; 
}

/* --- Icons (White Tick/Cross on Colored Boxes) --- */
.check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;  /* Size thoda barhaya visibility ke liye */
    height: 22px;
    background-color: #2e7d32; /* Stronger Green */
    border-radius: 4px;
	color: white;
    margin: 0 auto; /* Horizontal centering */
}

.check-icon svg {
    fill: #ffffff; /* White Tick */
    width: 16px;
    height: 16px;
}

.cross-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    color:white;
	height: 22px;
    background-color: #c62828; /* Stronger Red */
    border-radius: 4px;
    margin: 0 auto; /* Horizontal centering */
}

.cross-icon svg {
    fill: #ffffff; /* White Cross */
    width: 14px;
    height: 14px;
}

/* --- Account Cards Layout --- */
.account-cards {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    /*margin: 20px 0;*/
    width: 100%;
    padding: 0;
}

.account-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    padding: 20px 10px;
    text-align: center;
    flex: 1; 
    border: 2px solid #f0f0f0; 
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.account-card.selected {
    border: 2px solid #004797; 
    box-shadow: 0 4px 12px rgba(0, 71, 151, 0.2);
    background-color: #f2f7ff;
}

.account-card-icon {
    width: 55px;
    height: 55px;
    background-color: #f2f7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
}

.account-card-icon img {
    max-width: 35px;
    height: auto;
}

.account-card p {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin: 0;
    line-height: 1.2;
}

/* --- Responsive Adjustments --- */
@media (max-width: 480px) {
    .account-cards {
        gap: 10px;
    }
    .account-card {
        padding: 15px 5px;
    }
    .account-card p {
        font-size: 12px;
    }
    .comparison-table thead th, 
    .comparison-table tbody td {
        padding: 10px 8px; /* Mobile par thori jagah kam */
    }
}


/***********step14*******/

    .occupation-grid-container {
        display: grid;
        /* Default: 3 cards per row */
        grid-template-columns: repeat(3, 1fr); 
        gap: 15px; /* Cards ke beech ka fasla */
        width: 100%;
        max-width: 500px; /* Overall width control */
        margin-bottom: 30px;
    }
    .occupation-card {
        background-color: #ffffff;
        border-radius: 8px;
        /*padding: 15px 5px;*/
        text-align: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        border: 1px solid #f0f0f0;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        min-height: 100px; /* Height set kiya taaki saare cards uniform dikhen */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* Selected State CSS */
    .occupation-card.selected {
        border: 2px solid #004797; /* Blue Border */
        box-shadow: 0 4px 8px rgba(0, 71, 151, 0.2);
    }
    
    /* Icon Styling (Container) */
    .card-icon {
        width: 50px;
        height: 50px;
        background-color: #e6f0ff; /* Light blue icon background */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px auto;
    }

    /* Image Styling */
    .grid-image {
        width: 30px; /* Image ki size */
        height: 30px;
        object-fit: contain;
    }

    .occupation-card p {
        font-size: 13px; /* Font size chota rakha for multi-line text */
        line-height: 1.3;
        font-weight: bold;
        color: #555;
        margin: 0;
    }
    
	
	/****step15***/
	
	.document-table {
            width: 100%;
            max-width: 600px;
            margin: auto;
            border-collapse: collapse;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .document-table th, .document-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
			font-size: 12px;
			font-weight: bold;
        }
        .document-table thead th {
            background-color: #004d99; /* Dark blue header background */
            color: white;
            font-weight: bold;
            font-size: 16px;
        }
        .document-table tbody tr {
            background-color: #ffffff; /* White row background */
        }
        .document-table tbody tr:nth-child(even) {
            background-color: #f0f8ff; /* Light blue background for alternate rows */
        }
        .document-table tbody tr:last-child td {
            border-bottom: none;
        }
        .icon {
            margin-right: 10px;
            color: #004d99; /* Icon color */
        }
        /* Custom font for the icon (using a generic equivalent for visual representation) */
        .icon-text:before {
            content: '📄'; /* Document icon */
            font-size: 1.2em;
            vertical-align: middle;
            margin-right: 5px;
        }
		
		
		
		/**step 17 **/
		
		/* Basic Input Fields (Text, Email, Password, Number) */
       
	   
	   .form-container {
            max-width: 500px; /* Adjust width to match the image column look */
            margin: 0 auto;
            background-color: #ffffff;
            padding: 20px;
        }

        /* Styling for Labels (Headings) */
        .form-label-heading {
            display: block;
            margin-top: 20px;
            margin-bottom: 8px;
            font-weight: bold;
            font-size: 16px;
            color: #333;
        }
        
        /* General Input and Select Styling */
        .form-group {
            margin-bottom: 15px;
        }

        .form-input, 
        .form-select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #e0e0e0; /* Very light border */
            border-radius: 8px; /* Large rounded corners like in the image */
            box-sizing: border-box;
            font-size: 15px;
            color: #555;
            background-color: #f7f9fc; /* Slightly off-white background */
            /* Add a very subtle inner shadow to mimic the raised look */
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); 
            transition: border-color 0.2s;
        }

        .form-select {
            appearance: none; /* Remove default arrow */
            background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23777' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); /* Custom down arrow */
            background-repeat: no-repeat;
            background-position: right 10px center;
            padding-right: 30px; /* Space for the custom arrow */
        }

        .form-input::placeholder {
            color: #aaa;
        }

        .form-input:focus,
        .form-select:focus {
            border-color: #007bff; /* Focus color for subtle highlight */
            background-color: #fff;
            box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.2);
            outline: none;
        }

        /* Checkbox Styling */
        .checkbox-container {
            display: flex;
            align-items: center;
            margin: 25px 0 25px 0; /* Margin around the checkbox */
        }

        .checkbox-container input[type="checkbox"],
		.input-option input[type="radio"] {
            /* Customizing checkbox to look clean */
            width: 20px;
            height: 20px;
            margin-right: 10px;
            border-radius: 3px;
            border: 1px solid #ccc;
            accent-color: #007bff; /* Blue checkmark */
        }

        .checkbox-label {
            color: #555;
            font-size: 15px;
        }

        /* Upload Section Styling */
        .upload-proof-box {
            margin-top: 30px;
            padding: 20px;
            border: 2px dashed #b3cde0; /* Dashed blue border */
            border-radius: 10px;
            text-align: center;
            background-color: #fbfdff;
        }

        .upload-proof-box .form-label-heading {
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
            text-align: left;
        }

        .upload-proof-box .icon-placeholder {
            font-size: 40px;
            color: #007bff;
            margin-bottom: 5px;
            /* Placeholder for the image/icon */
        }
        .upload-instruction {
            font-size: 14px;
            color: #666;
        }
		
		.radio-group {
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background-color: #f9f9f9;
        }
		
		
		
		.card-container {
            max-width: 500px; /* Width of the cards */
            width: 100%;
            background-color: #ffffff;
            padding: 25px;
            border-radius: 12px; /* Rounded corners for the cards */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Subtle shadow for the card effect */
        }

        /* Heading Styling */
        .card-heading {
            font-weight: bold;
            font-size: 16px;
            color: #333;
            margin-bottom: 15px;
        }

        /* Radio Button Group Styling */
        .radio-group {
            display: flex;
            flex-direction: column;
            gap: 15px; /* Space between radio options */
        }
        
        .radio-option {
            display: flex;
            align-items: center;
        }
        
        .radio-option input[type="radio"] {
            /* Customizing radio button appearance */
            appearance: none; /* Hide default radio button */
            width: 20px;
            height: 20px;
            border: 2px solid #ccc; /* Grey border */
            border-radius: 50%; /* Make it circular */
            margin-right: 10px;
            display: grid;
            place-content: center; /* Center the dot */
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }

        .radio-option input[type="radio"]::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            transform: scale(0);
            transition: transform 0.2s ease-in-out;
            background-color: #007bff; /* Blue dot */
        }

        .radio-option input[type="radio"]:checked {
            border-color: #007bff; /* Blue border when checked */
            background-color: #e6f2ff; /* Light blue background when checked */
        }
        
        .radio-option input[type="radio"]:checked::before {
            transform: scale(1); /* Show the dot when checked */
        }

        .radio-label {
            color: #555;
            font-size: 15px;
            cursor: pointer;
        }

        /* Upload Section Styling */
        .upload-box {
            margin-top: 15px; /* Space from the heading */
            padding: 25px;
            border: 2px dashed #b3cde0; /* Dashed blue border */
            border-radius: 10px;
            text-align: center;
            background-color: #fbfdff; /* Light blue background for the box */
        }

        .upload-box .icon-placeholder {
            font-size: 45px; /* Large icon size */
            color: #007bff; /* Blue icon color */
            margin-bottom: 10px;
            /* Using a generic image icon for visual representation */
        }
        .upload-text {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }
		
		
		.form-textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #e0e0e0; 
            border-radius: 8px; 
            box-sizing: border-box;
            font-size: 15px;
            color: #555;
            background-color: #f7f9fc; 
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); 
            transition: border-color 0.2s;
        }

        .form-textarea {
            resize: vertical;
            min-height: 80px;
        }
		
		.form-input::placeholder, .form-textarea::placeholder {
            color: #aaa;
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            border-color: #007bff; 
            background-color: #fff;
            box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.2);
            outline: none;
        }
		
		.hidden-file-input {
    display: none;
}



#imagePreviewContainer {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    text-align: center;
}

.uploaded-preview-img {
    max-width: 100%;
    height: auto;
    max-height: 250px; 
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid #eee;
}


.uploaded-file-name {
    font-size: 14px;
    color: #007bff;
    font-weight: 600;
    margin-top: 5px;
}


.uploaded-file-pdf {
    color: #dc3545; 
}


/* Card Section Styling (If not already present from previous examples) */
.card-section {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Lighter shadow for inner cards */
    margin-bottom: 20px; /* Space between the two cards */
}

/* Radio Button Group Styling (Based on image_ec3e6a.png) */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 15px; 
}
/* This styling is complex for pure CSS and may require the custom radio CSS shared previously. */
.radio-option {
    display: flex;
    align-items: center;
    /* Optional: To mimic the raised block look for the radio option */
  /*  padding: 10px;
    border-radius: 8px;
    background-color: #f7f9fc; 
    border: 1px solid #e0eeef;*/
}
.radio-option input[type="radio"] {
    /* Custom Radio CSS (as shared previously) */
    accent-color: #007bff;
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

/* Upload Proof Box (Ensure the dash border is present) */
.upload-proof-box {
    /* ... other upload styles ... */
    border: 2px dashed #b3cde0; 
}

/* Preview Container */
#taxPreviewContainer {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    text-align: center;
}



/* Ensure these preview containers are hidden by default */
#taxPreviewContainer,
#bankStatementPreviewContainer {
    display: none; /* This is the key line */
    
    /* Rest of the styling (margin, padding, etc.) */
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    text-align: center;
}


/**step20****/
.alert { padding: 15px; margin-bottom: 20px; border-radius: 8px; font-size: 14px; }
        .warning { background-color: #fff3cd; border: 1px solid #ffeeba; color: black; font-weight:bold; font-size: 12px;  }
        .section-box { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
        .doc-sample { flex: 1; padding: 15px; border: 1px dashed #ccc; border-radius: 8px; }
        .doc-sample p { font-size:12px; font-weight: bold; }
        .selection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }
        .selection-option { text-align: center; padding: 15px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; background-color: white; }
       
	   
	   /* ... (Existing Modal Styles) ... */

/* Download Button Styling */
.download-button {
    display: none; /* Initially hide it, JS will show it */
    position: fixed; /* Position over the modal content */
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s;
    z-index: 1001; /* Above modal content */
}

.download-button:hover {
    background-color: #0056b3;
}



/**********************/
        .doc-sample img { 
            cursor: pointer; 
            max-width: 100%;
            height: auto;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        /* Modal (Popup) Styles */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1000; 
            padding-top: 50px; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.9); 
        }
        .modal-content {
            margin: auto;
            display: block;
            width: 90%;
            max-width: 700px;
        }
        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }
        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }
        /* Style for selected Zakat card */
        .occupation-card.selected {
            border: 2px solid #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
            background-color: #e6f0ff;
        }
        /* Style for Download Button */
        .download-button {
            display: none; 
            position: fixed; 
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
            transition: background-color 0.3s;
            z-index: 1001; 
        }
        .download-button:hover {
            background-color: #0056b3;
        }
        
        /* 💡 NEW: Styles for the Uploaded Preview */
        #upload-zakat-proof-section {
            min-height: 150px; /* Ensure space for the section when visible */
        }
        .uploaded-preview-img {
            max-width: 100%;
            max-height: 150px;
            border-radius: 4px;
            margin-bottom: 5px;
        }
        .uploaded-file-name {
            font-size: 0.9em;
            color: #333;
            word-break: break-all;
        }
        .uploaded-file-pdf {
            font-weight: bold;
            color: #dc3545; /* Red for PDF indication */
        }
		
		
		
		/******************step25*****/
		
	
		/* Card Container Styles */
        .card {
            background-color: #ffffff;
            border-radius: 12px;
            padding: 5px;
			margin: 5px 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            /*max-width: 500px; /* Adjust max width as needed */
            /*width: 100%;*/
        }

        /* --- Download Section Styles --- */
        .download-section p {
            font-size: 1em;
            color: #333;
            margin-top: 0;
            margin-bottom: 20px;
           font-weight: bold;
			font-size:12px;
        }

        .app-store-links {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap; /* Allows wrapping on smaller screens */
        }

        .app-store-links img {
            height: 35px; /* Standard size for store badges */
            cursor: pointer;
            border-radius: 8px; /* Slight rounding for the buttons */
        }
        
        /* Ensures the app store buttons maintain aspect ratio and size */
        .app-store-links a {
             display: inline-block;
        }

        /* --- Video Tutorial Section Styles --- */
        .video-card {
            display: flex;
            gap: 15px;
            align-items: flex-start;
			
        }
        
        /* Video Thumbnail Placeholder */
        .video-thumbnail-wrapper {
            position: relative;
            width: 150px;
            height: 90px;
            background-color: #e9ecef;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0; /* Prevents shrinking */
        }

        .play-icon {
            width: 30px;
            height: 30px;
            border: 2px solid white;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Play icon triangle (HTML entity for a triangle) */
        .play-icon::after {
            content: "▶";
            color: white;
            font-size: 1em;
            margin-left: 2px;
        }

        .video-details {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .video-details h3 {
            font-size: 1em;
            margin: 0 0 5px 0;
            color: #333;
            font-style: bold;
			font-size:12px;
        }

        .video-details p {
            font-size: 0.85em;
            color: #666;
            margin: 0 0 15px 0;
            line-height: 1.3;
			font-size:11px;
        }
        
        .video-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto; /* Pushes watch button to the bottom */
        }

        .duration-tag {
            background-color: #fff8f5;
            color: #e67700;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.8em;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* Icon for the clock */
        .duration-tag::before {
            content: "\23f1"; /* Unicode clock icon */
            font-size: 1em;
        }

        .watch-button {
            background-color: #004d99; /* Darker blue for button */
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.9em;
            white-space: nowrap; /* Prevents button text from wrapping */
            border: none;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .watch-button:hover {
            background-color: #003a73;
        }
        
        /* Media query for better responsiveness on small screens */
        @media (max-width: 400px) {
            .video-card {
                flex-direction: column;
                align-items: center;
            }
            .video-thumbnail-wrapper {
                width: 100%;
                height: auto;
                padding-top: 56.25%; /* 16:9 aspect ratio */
                position: relative;
            }
            .play-icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .video-details {
                align-items: center;
                text-align: center;
            }
            .video-footer {
                flex-direction: column;
                gap: 10px;
            }
        }
		
		
		
		/**step 27**/
		
		.accordion-item {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            overflow: hidden; /* Important for clean transitions */
        }

        /* Accordion Header (The clickable part) */
        .accordion-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            font-weight: bold;
            font-size: 1.1em;
            color: #004d99; /* Blue color for text */
            cursor: pointer;
            user-select: none;
            border-bottom: 1px solid transparent; /* Placeholder for separation */
        }
        
        /* Icon Styling */
        .accordion-icon {
            font-size: 1em;
            color: #004d99;
            transition: transform 0.3s ease;
        }

        /* Rotate icon when active/open */
        .accordion-item.active .accordion-icon {
            transform: rotate(180deg);
        }

        /* Accordion Content (The hidden part) */
        .accordion-content {
            max-height: 0;
            padding: 0 20px;
            overflow: hidden;
            transition: max-height 0.4s ease-out, padding 0.4s ease-out;
            color: #555;
            font-size: 0.9em;
        }
        
        /* Apply height and padding when the item is active */
        .accordion-item.active .accordion-content {
            /* This value should be large enough to contain all content */
            max-height: 500px; 
            padding: 15px 20px; 
            border-top: 1px solid #eee;
        }

        /* Checkbox Agreement Styling */
      .agreement-box {
            display: flex;
            align-items: flex-start;
            padding: 10px 0;
            font-size: 1em;
            color: #333;
        }

       

        .agreement-box input[type="checkbox"] {
            margin-top: 3px;
            margin-right: 10px;
            /* Basic styling to match the light grey checkbox */
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f5f5f5;
            cursor: pointer;
        }

        .agreement-box input[type="checkbox"]:checked {
            background-color: #004d99; /* Blue checked color */
            border-color: #004d99;
        }
         /* Checkmark for checked state */
        .agreement-box input[type="checkbox"]:checked::after {
            content: "\f00c"; /* Font Awesome check icon */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            color: white;
            font-size: 12px;
            display: block;
            text-align: center;
            line-height: 16px;
        }
		
		.main-container {
            max-width: 600px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 15px; /* Spacing between accordion items */
        }
		
		
		  .account-card {
            border: 2px solid #ddd;
            padding: 20px;
            border-radius: 12px;
            cursor: pointer;
            transition: 0.3s;
            margin-bottom: 15px;
            text-align: center;
			Background:White;
        }
        .account-card.selected {
            border-color: #0067c0;
            background: #eef6ff;
        }
        .account-card img {
            width: 120px;
        }
        .hidden-radio {
            display: none;
        }
		
		
		/* Default mein upload section ko chhipa dein */
#guardianship-upload-section {
    display: none;
}


.congratulations {
	
	text-align: center !important;
}


    .upload-box { cursor: pointer; border: 2px dashed #007bff; padding: 30px; text-align: center; margin-bottom: 20px; background: #f0f7ff; border-radius: 10px; }
    .preview-container { text-align: center; padding: 20px; border: 1px solid #ddd; border-radius: 10px; background: #fafafa; margin-bottom: 20px; }
    .preview-container img { max-width: 100%; max-height: 250px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
    .remove-btn { background: #ff4d4d; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin-top: 15px; font-weight: bold; }
    .remove-btn:hover { background: #cc0000; }
    .form-errors { color: red; margin-bottom: 15px; font-weight: bold; }

    .form-input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; box-sizing: border-box; text-transform: uppercase; }
	
	
	
        .accordion-item { background: white; margin-bottom: 10px; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; }
        .accordion-header { padding: 15px; cursor: pointer; display: flex; justify-content: space-between; font-weight: bold; background: #fff; }
        .accordion-content { padding: 0 15px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #fafafa; }
        .accordion-item.active .accordion-content { max-height: 200px; padding: 15px; border-top: 1px solid #eee; }
        .accordion-item.active .accordion-icon { transform: rotate(180deg); }
        .checkbox-container { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; cursor: pointer; font-size: 14px; }
        .error-msg { color: red; font-size: 13px; margin-top: 10px; }



/**step21*/

   /* .upload-box { border: 2px dashed #007bff; padding: 20px; text-align: center; border-radius: 10px; cursor: pointer; background: #f0f7ff; min-height: 120px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
     
*/	 .remove-btn { background: #ff4d4d; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-top: 10px; font-size: 11px; }
        .form-group { margin-bottom: 15px; }
        .form-control, .form-select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
        .alert.warning { background: #fff3cd; color: #856404; padding: 12px; border-radius: 5px; border-left: 5px solid #ffeeba; margin-bottom: 20px; font-size: 14px; }
        /* Style for disabled button */
        .proceed-btn:disabled { background-color: #ccc; cursor: not-allowed; opacity: 0.6; }
.alert.error {
    background: #f8d7da;       /* Light red background */
    color: #721c24;            /* Dark red text */
    padding: 12px;
    border-radius: 5px;
    border-left: 5px solid #f5c6cb; /* Slightly darker red border */
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;             /* Icon aur text ko align karne ke liye */
    align-items: center;
}
		
		        .optional-tag { background: #e9ecef; color: #495057; padding: 2px 8px; border-radius: 4px; font-size: 12px;  font-weight: bold; }
				
				
				
				/**step 10**/
				
				.upload-box { cursor: pointer; border: 2px dashed #ccc; padding: 20px; text-align: center; position: relative; background: #fafafa; border-radius: 10px; margin-bottom: 15px; transition: 0.3s; }
        .upload-box:hover { border-color: #007bff; background: #f0f7ff; }
        .upload-box img { max-width: 100%; max-height: 90px; display: block; margin: 0 auto; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        #cropModal { display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.9); overflow-y: auto; }
        .modal-content { position:relative; margin: 20px auto; width:95%; max-width:600px; background:#fff; padding:15px; border-radius:12px; }
        .cropper-container-wrapper { width: 100%; height: 400px; background: #333; overflow: hidden; border-radius: 8px; position: relative; }
        #imageToCrop { display: block; max-width: 100%; }
        .modal-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 15px; }
        .btn-tool { flex: 1; background:#f0f0f0; color:#333; border:1px solid #ddd; padding:12px; border-radius:8px; cursor:pointer; font-size: 16px; }
        .btn-success { background:#28a745; color:#fff; border:none; font-weight: bold; }
        .btn-danger { background:#dc3545; color:#fff; border:none; }
        .remove-btn { background: #ff4d4d; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; margin-top: 10px; font-size: 12px; }
        
        /* Debug Box Style */
        .debug-data { background: #fff3cd; border: 1px dashed #856404; padding: 15px; margin-bottom: 20px; border-radius: 8px; text-align: left; overflow: auto; }
		
		
		
		    .wa-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: flex;
        align-items: center;
        z-index: 1000;
    }

    .wa-label {
        background: #fff;
        color: #333;
        padding: 8px 15px;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        margin-right: 10px;
        font-size: 13px;
        font-weight: 600;
        border: 1px solid #25d366;
        white-space: nowrap;
        animation: fadeIn 0.5s ease-in-out;
    }

    .wa-float {
        background: #25d366;
        color: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        box-shadow: 2px 2px 15px rgba(0,0,0,0.3);
        text-decoration: none;
        transition: transform 0.3s;
        position: relative;
    }

    /* Catchy Pulsing Effect */
    .wa-float::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: #25d366;
        border-radius: 50%;
        z-index: -1;
        animation: pulse-wa 2s infinite;
    }

    .wa-float:hover {
        transform: scale(1.1);
    }

    @keyframes pulse-wa {
        0% { transform: scale(1); opacity: 1; }
        100% { transform: scale(1.5); opacity: 0; }
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateX(10px); }
        to { opacity: 1; transform: translateX(0); }
    }
	
	.help-text {
        display: block;
        margin-top: 6px;
        color: #004795; /* AKD Blue color matching */
        font-size: 12.5px;
        font-weight: 500;
        background: #e7f0ff; /* Light blue highlight */
        padding: 5px 10px;
        border-radius: 5px;
        border-left: 3px solid #004795;
    }
    
    .help-text i {
        margin-right: 5px;
    }