:root {
    --primary-color: #c62828;
    --secondary-color: #fbc02d;
    --accent-color: #d6eefa; /* Light Blue for Badge */
    --text-main: #212121;
    --text-muted: #555555;
    --white: #ffffff;
}

.text-secondary{
    color: var(--secondary-color) !important;
}

/* Card Container */
.nondani-card {
    max-width: 900px;
    background: var(--white);
    border: 1px solid #ddd;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Full Width Responsive Header */
.nondani-header-bg {
    background-image: url('../formimage.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%; 
    width: 100%;
    aspect-ratio: 21 / 9; 
    height: auto; 
    min-height: auto; 
    position: relative;
    border-bottom: 4px solid var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-content {
    padding: 2% 5%;
    width: 100%;
}

@media (max-width: 768px) {
    .nondani-header-bg {
        aspect-ratio: 16 / 9; 
    }
}

@media (max-width: 480px) {
    .nondani-header-bg {
        aspect-ratio: 16 / 10;
        background-size: 100% 100%;
    }
}

.header-content {
    padding: 20px;
    width: 100%;
}

/* Dynamic Text Resizing */
.animate-text {
    font-size: clamp(14px, 4vw, 18px) !important;
}

.animate-title {
    font-size: clamp(20px, 5vw, 36px) !important;
    color: var(--white);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.small-info {
    font-size: clamp(10px, 3vw, 14px) !important;
}

/* Responsive Badge Management */
span.nondani-badge {
    display: inline-block;
    margin-top: 70px;
    font-weight: 700;
    color: var(--text-main);
    font-size: clamp(16px, 4vw, 22px);
    background: var(--accent-color);
    padding: 6px 30px;
    border-radius: 4px;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.2);
}

/* Form Body */
.nondani-body {
    padding: 50px;
    background: var(--white);
}

.form-label {
    font-weight: 600;
    color: var(--text-muted);
}

.custom-input {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid #000;
    background: transparent;
    padding: 5px;
    transition: all 0.3s ease;
}

.custom-input:focus {
    outline: none;
    border-bottom: 2px solid var(--primary-color);
    background: rgba(198, 40, 40, 0.02);
}

.sign-line {
    border-top: 2px solid #000;
    width: 150px;
    margin: 0 auto 10px;
}

/* Animation Highlights */
.aos-animate[data-aos="fade-left"] {
    border-left: 3px solid var(--primary-color);
}

/* --- Responsive Fixes --- */
@media (max-width: 768px) {
    /* .nondani-header-bg {
        min-height: 250px;
    } */
    .nondani-body {
        padding: 25px !important;
    }
    .col-sm-1 {
        display: none;
    }
}

@media (max-width: 480px) {
    .header-content {
        padding-top: 24px;
    }
}
@media (max-width: 580px) {
    .header-content {
        padding-top: 45px;
    }
}