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

        DESIGN TOKENS & CUSTOM PROPERTIES

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

    :root {

        --clr-primary: #1D2051;

        --clr-primary-dark: #0A1628;

        --clr-primary-light: #2A3A7A;

        --clr-primary-glow: rgba(29, 32, 81, 0.15);

        --clr-accent: #5BC0DE;

        --clr-accent-light: #8ED2E6;

        --clr-accent-dark: #3A97B2;

        --clr-danger: #dc2626;

        --clr-success: #059669;

        --clr-info: #5BC0DE;

        --clr-bg: #f5f8fa;

        --clr-bg-mesh: radial-gradient(ellipse at 20% 50%, rgba(29, 32, 81, 0.05) 0%, transparent 60%),

                        radial-gradient(ellipse at 80% 20%, rgba(91, 192, 222, 0.06) 0%, transparent 60%),

                        radial-gradient(ellipse at 60% 80%, rgba(29, 32, 81, 0.04) 0%, transparent 50%),

                        #f5f8fa;

        --clr-surface: #ffffff;

        --clr-surface-2: #fafcfe;

        --clr-surface-3: #f0f4f8;

        --clr-border: #dbe4ee;

        --clr-border-strong: #bfcbd9;

        --clr-text: #1a1e2b;

        --clr-text-muted: #4a5568;

        --clr-text-light: #718096;

        --shadow-xs: 0 1px 3px rgba(29, 32, 81, 0.06);

        --shadow-sm: 0 2px 10px rgba(29, 32, 81, 0.09);

        --shadow-md: 0 8px 28px rgba(29, 32, 81, 0.13);

        --shadow-lg: 0 20px 56px rgba(29, 32, 81, 0.18);

        --shadow-accent: 0 6px 20px rgba(91, 192, 222, 0.3);

        --radius-xs: 6px;

        --radius-sm: 10px;

        --radius-md: 16px;

        --radius-lg: 24px;

        --radius-xl: 32px;

        --radius-pill: 100px;

        --font-display: 'Playfair Display', Georgia, serif;

        --font-body: 'Sora', sans-serif;

        --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    }



        .notice-cards-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }
        @media (max-width: 991px) {
            .notice-cards-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 767px) {
            .notice-cards-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ── THREE COLUMN SECTIONS SIDE BY SIDE ── */
        .three-col-sections {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            margin-bottom: 0px;
            border: 1.5px solid var(--clr-border);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .section-col {
            padding: 24px 22px;
            background: var(--clr-surface);
            border-right: 1.5px solid var(--clr-border);
            min-width: 0; /* prevent overflow */
        }

        .section-col:last-child {
            border-right: none;
        }

        .section-col .form-section-title {
            margin-top: 0 !important;
            margin-bottom: 20px !important;
            font-size: 11.5px;
        }

        .section-col .form-control {
            width: 100%;
        }

        .section-col .input-icon-wrap {
            width: 100%;
        }

        @media (max-width: 991px) {
            .three-col-sections {
                grid-template-columns: 1fr;
            }
            .section-col {
                border-right: none;
                border-bottom: 1.5px solid var(--clr-border);
            }
            .section-col:last-child {
                border-bottom: none;
            }
        }

        /* ── CARDS + BANNER SIDE-BY-SIDE LAYOUT ── */
        .cards-banner-layout {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 16px;
            align-items: stretch;
        }

        .cards-side {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .cards-side .asd-feature-card {
            flex: 1 1 auto;
        }

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

        .banner-center .banner-wrapper {
            width: 100%;
            height: auto;
        }

        .banner-center .banner-wrapper img {
            width: 100%;
            height: auto;
            object-fit: contain;
            object-position: center;
            background: transparent;
        }

        @media (max-width: 991px) {
            .cards-banner-layout {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .banner-center {
                padding: 0;
            }
            .banner-center .banner-wrapper {
                min-height: unset;
            }
        }

        a {

            color: var(--clr-primary);

            text-decoration: none !important;

            transition: var(--transition);

        }

        a:hover {

            color: var(--clr-accent-dark);

        }



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

        LEGACY BLINK STYLES (preserved)

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

        .blink {

            width: 100%;

            height: 50px;

            background-color: white;

            text-align: center;

            line-height: 50px;

        }

        .blink1 {

            width: 100%;

            height: 100px;

            background-color: yellow;

            text-align: center;

            line-height: 40px;

        }

        span1 {

            font-size: 20px;

            font-weight: bold;

            color: var(--clr-primary);

            animation: blink 2s linear infinite;

        }

        span2 {

            font-size: 20px;

            font-weight: bold;

            color: #543310;

            animation: blink 2s linear infinite;

        }

        span3 {

            font-size: 20px;

            font-weight: bold;

            color: #32012F;

            animation: blink 2s linear infinite;

        }

        @keyframes blink {

            0%   { opacity: 0.75; }

            50%  { opacity: 1; }

            100% { opacity: 0.75; }

        }



        #example1 {

            border: 2px solid red;

            padding: 10px;

            border-radius: 25px;

        }



        .pic {

            margin-top: 0px !important;

        }



        @media (min-width: 1000px) and (max-width: 1510px) { .item-1 { top: -400%; } }

        @media (min-width: 1520px)                          { .item-1 { top: -450%; } }

        @media (min-width: 768px) and (max-width: 999px)    { .item-1 { top: -400%; } }

        @media only screen and (max-device-width: 480px)    { .item-1 { top: -130%; } }



        /*@media (max-width: 501px) {

            .item-1 { top: -140%; }

        }

        .item-1 { top: -200%; }

        }*/



        @media (min-width: 768px)  { video.ex1 { margin-top: 185px; } }

        @media (max-width: 600px)  { .pic { margin-top: -40px !important; } }

        

    

        

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

        HERO / ILLUSTRATOR THUMB

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

            .ilstrator_thumb {

                width: 100%;

                height: 100vh;

                background-image: url("img/ASD3.jpg");

                background-size: cover;

                background-position: center;

                display: flex;

                flex-direction: column;

                align-items: center;

                justify-content: center;

                color: #fff;

            }



            .service_area {

                padding-top: 10px;

                padding-bottom: 10px;

            }



            .cbtn {

                border-radius: 25px;

            }



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

            BRANDS SLIDER

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

            .brands {

                width: 100%;

                padding-top: 90px;

                padding-bottom: 90px;

            }

            .brands_slider_container {

                height: 120px;

                border: solid 1px #e8e8e8;

                box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);

                /*padding-left: 97px;*/

                /*padding-right: 97px*/

            }

            .brands_slider  { height: 100%; margin-top: 15px; }

            .brands_item    { height: 100%; }

            .brands_item img { max-width: 100%; }

            .brands_nav {

                position: absolute;

                top: 50%;

                -webkit-transform: translateY(-50%);

                -moz-transform: translateY(-50%);

                    -ms-transform: translateY(-50%);

                    -o-transform: translateY(-50%);

                        transform: translateY(-50%);

                padding: 5px;

                cursor: pointer;

            }

            .brands_nav i { color: #e5e5e5; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; }

            .brands_nav:hover i { color: #676767; }

            .brands_prev { left: 40px; }

            .brands_next { right: 40px; }



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

            FIXED SIDE BUTTONS

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

            .contact-opener {

                max-width: 500px;

                /*padding: 30px 30px 10px 30px;*/

                border: 1px solid #ddd;

                position: fixed;

                z-index: 20000;

                right: -40px;

                transform: rotate(-90deg);

                top: 410px;

                padding: 9px;

                /*color: #fff;*/

                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.43);

                cursor: pointer;

                border-radius: 5px 5px 0px 0px;

                background-color: #555;

            }

            .contact-opener1 {

                max-width: 500px;

                border: 1px solid #ddd;

                position: fixed;

                z-index: 20000;

                right: -40px;

                transform: rotate(-90deg);

                top: 260px;

                padding: 9px;

                /*color: #fff;*/

                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.43);

                cursor: pointer;

                border-radius: 5px 5px 0px 0px;

                background-color: #389;

            }



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

            OVERLAY ITEM

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

            .item-1 {

                position: absolute;

                padding: 9px;

                display: block;

                /*top: 10%;*/

                width: 100%;

                color: var(--clr-surface);

                font-size: 1.5vw;

                background-color: var(--clr-primary-glow);

                font-weight: bold;

            }

            @media (min-width: 1000px) and (max-width: 1510px) { .item-1 { top: -400%; } }

            @media (min-width: 1520px)                          { .item-1 { top: -450%; } }

            @media (min-width: 768px) and (max-width: 999px)    { .item-1 { top: -400%; } }

            @media only screen and (max-device-width: 480px)    { .item-1 { top: -130%; } }



            /*@media (max-width: 501px) {

                .item-1 { top: -140%; }

            }

            .item-1 { top: -200%; }

            }*/



            @media (max-width: 600px)  { video.ex1 { margin-top: 115px; } }

            @media (min-width: 768px)  { video.ex1 { margin-top: 185px; } }



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

        PAGE LAYOUT & BACKGROUND

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

        body {

            font-family: var(--font-body);

            background: var(--clr-bg-mesh);

            color: var(--clr-text);

        }



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

        FEATURE CARDS — REDESIGNED

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

        .asd-feature-card {

            background: var(--clr-surface);

            border-radius: var(--radius-lg);

            padding: 24px 20px;

            box-shadow: var(--shadow-sm);

            border: 1.5px solid var(--clr-border);

            transition: var(--transition);

            text-align: center;

            position: relative;

            overflow: hidden;

            z-index: 1;

            display: flex;

            flex-direction: column;

            align-items: center;

        }

        .asd-feature-card::before {

            content: '';

            position: absolute;

            top: 0; left: 0; right: 0; height: 100%;

            background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(0,0,0,0.02) 100%);

            z-index: -1;

        }

        .asd-feature-card:hover {

            transform: translateY(-5px);

            box-shadow: var(--shadow-md);

            border-color: var(--clr-primary-light);

        }

        .feature-icon {

            width: 54px;

            height: 54px;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 24px;

            margin-bottom: 16px;

            box-shadow: var(--shadow-sm);

        }

        .card-blue .feature-icon   { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1d4ed8; }

        .card-amber .feature-icon  { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #b45309; }

        .card-purple .feature-icon { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); color: var(--clr-primary); }

        .card-green .feature-icon  { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); color: #15803d; }



        .card-blue:hover   { border-color: #93c5fd; }

        .card-amber:hover  { border-color: #fcd34d; }

        .card-purple:hover { border-color: #c4b5fd; }

        .card-green:hover  { border-color: #86efac; }



        .feature-title {

            font-family: var(--font-body);

            font-size: 14px;

            font-weight: 800;

            letter-spacing: 0.04em;

            text-transform: uppercase;

            color: var(--clr-primary-dark);

            margin-bottom: 12px;

        }

        .feature-text {

            font-size: 13.5px;

            line-height: 1.6;

            color: var(--clr-text-muted);

            margin: 0;

        }

        .feature-text span1, .feature-text span2, .feature-text span3 {

            color: inherit;

            font-weight: inherit;

            font-size: inherit;

            animation: none;

        }



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

        HERO BANNER IMAGE WRAPPER

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

        .banner-wrapper {

            position: relative;

            border-radius: var(--radius-lg);

            overflow: hidden;

            box-shadow: var(--shadow-lg);

            margin: 0 auto 36px;

            max-width: 850px;

        }

        .banner-wrapper img {

            display: block;

            width: 100%;

            max-width: 100%;

            object-fit: cover;

            transition: transform 0.6s ease;

        }

        .banner-wrapper:hover img { transform: scale(1.01); }

        .banner-wrapper::after {

            content: '';

            position: absolute;

            inset: 0;

            background: linear-gradient(180deg, transparent 55%, rgba(29,32,81,0.22) 100%);

            pointer-events: none;

        }



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

        FORM SECTION WRAPPER

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

        .form-outer-card {

            background: var(--clr-surface);

            border-radius: var(--radius-xl);

            box-shadow: var(--shadow-lg);

            padding: 24px 44px 52px;

            border: 1px solid var(--clr-border);

            margin-bottom: 0px;

            position: relative;

            overflow: hidden;

        }

        .form-outer-card::before {

            content: '';

            position: absolute;

            top: 0; left: 0; right: 0;

            height: 4px;

            background: linear-gradient(90deg, var(--clr-primary-dark) 0%, var(--clr-primary-light) 40%, var(--clr-accent) 70%, var(--clr-primary-light) 100%);

            background-size: 200% 100%;

            animation: shimmerBar 3s linear infinite;

        }

        @keyframes shimmerBar {

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

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

        }

        .form-outer-card::after {

            content: '';

            position: absolute;

            top: -120px; right: -120px;

            width: 300px; height: 300px;

            border-radius: 50%;

            background: radial-gradient(circle, rgba(92,26,122,0.04) 0%, transparent 70%);

            pointer-events: none;

        }

        @media (max-width: 767px) {

            .form-outer-card { padding: 24px 18px 36px; }

        }



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

        FORM HEADLINE & FEE BADGE

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

        .form-headline {

            font-family: var(--font-display);

            font-size: clamp(24px, 4vw, 34px);

            color: var(--clr-primary-dark);

            text-align: center;

            margin-bottom: 6px;

            letter-spacing: -0.02em;

            line-height: 1.2;

        }

        .form-headline small {

            font-family: var(--font-body);

            font-size: 14px;

            font-weight: 400;

            color: var(--clr-text-muted);

            display: block;

            margin-top: 6px;

            font-style: italic;

        }

        .fee-badge {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);

            color: #075985;

            font-family: var(--font-body);

            font-size: 15px;

            font-weight: 700;

            border: 1.5px solid #7dd3fc;

            border-radius: var(--radius-pill);

            padding: 10px 24px;

            margin: 0 auto 32px;

            width: fit-content;

            box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,0.6);

            position: relative;

        }

        .fee-badge .bi {

            font-size: 20px;

            color: #b07800;

        }

        .fee-badge .fee-divider {

            width: 1px; height: 18px;

            background: #f0c040;

            opacity: 0.6;

        }

        .fee-badge .fee-note {

            font-weight: 400;

            font-size: 12.5px;

            color: #a06000;

            white-space: nowrap;

        }



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

        STATS ROW — FIXED TO SINGLE ROW

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

        .stats-row {

            display: flex;

            justify-content: space-between;

            align-items: center;

            flex-wrap: nowrap;

            gap: 6px;

            margin-top: 20px;

            margin-bottom: 45px;

            padding: 0;

            width: 100%;

            max-width: 100%;

            box-sizing: border-box;

        }

        .stat-pill {

            display: flex;

            align-items: center;

            gap: 6px;

            padding: 8px 8px;

            background: #f8fafc;

            border: 1px solid #e2e8f0;

            border-radius: 10px;

            font-size: 11.5px;

            font-weight: 600;

            color: #1e293b;

            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            box-shadow: 0 1px 3px rgba(0,0,0,0.05);

            cursor: default;

            white-space: nowrap;

            flex: 1 1 0;

            min-width: 0;

            justify-content: center;

            box-sizing: border-box;

        }

        .stat-pill:hover {

            transform: translateY(-2px);

            box-shadow: var(--shadow-md);

            border-color: var(--clr-primary-light);

            background: #fff;

        }

        .stat-pill .bi {

            font-size: 15px;

            color: var(--clr-primary);

            flex-shrink: 0;

        }



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

        IMPORTANT INFO PANEL — REDESIGNED

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

        .info-panel {

            background: var(--clr-surface-2);

            border: 1.5px solid var(--clr-border);

            border-radius: var(--radius-lg);

            overflow: hidden;

            margin-bottom: 36px;

            box-shadow: var(--shadow-sm);

        }

        .info-panel-header {

            background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 60%, var(--clr-primary-light) 100%);

            color: #fff;

            font-family: var(--font-body);

            font-weight: 700;

            font-size: 14px;

            letter-spacing: 0.06em;

            text-transform: uppercase;

            padding: 16px 24px;

            display: flex;

            align-items: center;

            gap: 10px;

        }

        .info-panel-header .bi { font-size: 18px; opacity: 0.9; }

        .info-item {

            display: flex;

            gap: 16px;

            padding: 16px 24px;

            border-bottom: 1px solid var(--clr-border);

            font-size: 13.5px;

            line-height: 1.7;

            text-align: justify;

            transition: background 0.15s ease;

            align-items: flex-start;

        }

        .info-item:last-of-type {

            border-bottom: none;

        }

        .info-item:hover {

            background: linear-gradient(90deg, var(--clr-surface-3), transparent);

        }

        .info-num {

            flex-shrink: 0;

            width: 28px;

            height: 28px;

            background: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-accent-dark) 100%);

            color: #fff;

            font-size: 11.5px;

            font-weight: 800;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-top: 2px;

            font-family: var(--font-body);

            box-shadow: 0 2px 8px var(--shadow-accent);

            flex-shrink: 0;

        }

        .info-text { flex: 1; color: var(--clr-text); }



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

        CERTIFICATE TABLES — REDESIGNED

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

        .cert-table-wrapper {

            margin: 16px 0;

            border-radius: var(--radius-md);

            overflow-x: auto; /* Enable scroll on mobile */

            border: 1.5px solid var(--clr-border);

            box-shadow: var(--shadow-sm);

            -webkit-overflow-scrolling: touch;

        }

        .cert-table-wrapper table {

            width: 100%;

            margin: 0;

            border: none;

        }

        .cert-table-wrapper thead th {

            background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary-light) 100%);

            color: #fff;

            font-family: var(--font-body);

            font-size: 12.5px;

            font-weight: 700;

            padding: 13px 20px;

            border: none;

            letter-spacing: 0.03em;

        }

        .cert-table-wrapper tbody tr {

            transition: background 0.15s;

        }

        .cert-table-wrapper tbody tr:nth-child(even) { background: #f8fbff; }

        .cert-table-wrapper tbody tr:hover { background: #edf4ff; }

        .cert-table-wrapper tbody td {

            padding: 12px 20px;

            font-size: 13px;

            border: none;

            border-bottom: 1px solid var(--clr-border);

            vertical-align: middle;

        }

        .cert-table-wrapper tbody tr:last-child td { border-bottom: none; }

        .cert-table-wrapper tbody td a {

            color: var(--clr-primary);

            font-weight: 600;

            display: inline-flex;

            align-items: center;

            gap: 5px;

            padding: 4px 12px;

            border-radius: var(--radius-pill);

            border: 1px solid var(--clr-primary-light);

            font-size: 12px;

            transition: var(--transition);

            background: transparent;

        }

        .cert-table-wrapper tbody td a .bi { font-size: 13px; }

        .cert-table-wrapper tbody td a:hover {

            background: var(--clr-primary);

            color: #fff;

            border-color: var(--clr-primary);

            box-shadow: var(--shadow-sm);

        }



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

        FORM SECTION TITLE — REDESIGNED

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

        .form-section-title {

            font-family: var(--font-body);

            font-size: 13px;

            font-weight: 700;

            color: var(--clr-primary-dark);

            margin: 36px 0 20px;

            padding: 14px 20px;

            background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 100%);

            border-radius: var(--radius-md);

            display: flex;

            align-items: center;

            gap: 12px;

            letter-spacing: 0.06em;

            text-transform: uppercase;

            color: #fff;

            box-shadow: var(--shadow-sm);

            position: relative;

            overflow: hidden;

        }

        .form-section-title::after {

            content: '';

            position: absolute;

            right: -20px; top: -20px;

            width: 80px; height: 80px;

            border-radius: 50%;

            background: rgba(255,255,255,0.06);

            pointer-events: none;

        }

        .form-section-title .section-num {

            width: 28px;

            height: 28px;

            background: rgba(255,255,255,0.2);

            backdrop-filter: blur(4px);

            color: #fff;

            font-size: 13px;

            font-weight: 800;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

            border: 1.5px solid rgba(255,255,255,0.35);

        }

        .form-section-title .bi { font-size: 17px; opacity: 0.85; }



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

        FORM LABELS

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

        .form-label-custom {

            font-family: var(--font-body) !important;

            font-size: 12.5px !important;

            font-weight: 700 !important;

            color: var(--clr-primary-dark) !important;

            margin-bottom: 8px !important;

            letter-spacing: 0.02em;

            display: flex;

            align-items: center;

            gap: 6px;

        }

        .form-label-custom .bi { font-size: 14px; color: var(--clr-primary-light); }

        label[style*="460e6e"],

        label[style*="color"] {

            font-family: var(--font-body) !important;

            font-size: 12.5px !important;

            font-weight: 700 !important;

            color: var(--clr-primary-dark) !important;

            margin-bottom: 8px !important;

            letter-spacing: 0.02em;

        }



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

        FORM CONTROLS

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

        .form-control {

            border: 1.5px solid var(--clr-border);

            border-radius: var(--radius-sm);

            padding: 11px 16px;

            font-family: var(--font-body);

            font-size: 13.5px;

            color: var(--clr-text);

            background: var(--clr-surface);

            transition: var(--transition);

            box-shadow: var(--shadow-xs);

        }

        .form-control:focus {

            border-color: var(--clr-primary-light);

            box-shadow: 0 0 0 4px rgba(92,26,122,0.1);

            outline: none;

            background: #fdfaff;

        }

        .form-control::placeholder { color: #c0b0d0; font-size: 13px; }



        .input-icon-wrap {

            position: relative;

        }

        .input-icon-wrap .bi {

            position: absolute;

            left: 14px;

            top: 50%;

            transform: translateY(-50%);

            color: var(--clr-primary-light);

            font-size: 15px;

            pointer-events: none;

            z-index: 2;

        }

        .input-icon-wrap .form-control {

            padding-left: 40px;

        }



        /* Radio groups */

        .radio-group {

            display: flex;

            flex-wrap: wrap;

            gap: 10px;

            margin-top: 8px;

        }

        

        /* Single row group for many items without scroll */

        .radio-group-row {

            display: flex;

            flex-wrap: wrap;

            gap: 6px;

            margin-top: 15px;

            width: 100%;

            justify-content: flex-start;

        }

        .radio-group-row .radio-chip {

            flex: 1 1 auto;

            text-align: center;

        }

        .radio-group-row .radio-chip label {

            padding: 8px 5px !important;

            font-size: 11.5px !important;

            white-space: nowrap;

            justify-content: center;

            width: 100%;

        }

        .radio-chip {

            position: relative;

        }

        .radio-chip input[type="radio"] {

            position: absolute;

            opacity: 0;

            width: 0; height: 0;

        }

        .radio-chip label {

            display: flex;

            align-items: center;

            gap: 7px;

            padding: 9px 18px;

            border: 1.5px solid var(--clr-border);

            border-radius: var(--radius-pill);

            background: var(--clr-surface);

            font-size: 13px !important;

            font-weight: 600 !important;

            color: var(--clr-text-muted) !important;

            cursor: pointer;

            transition: var(--transition);

            user-select: none;

            box-shadow: var(--shadow-xs);

        }

        .radio-chip input[type="radio"]:checked + label {

            background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%);

            border-color: var(--clr-primary);

            color: #fff !important;

            box-shadow: 0 4px 14px rgba(92,26,122,0.3);

        }

        .radio-chip label:hover {

            border-color: var(--clr-primary-light);

            color: var(--clr-primary) !important;

            background: var(--clr-surface-3);

            transform: translateY(-1px);

        }

        .radio-chip input[type="radio"]:checked + label:hover { transform: translateY(-1px); }

        .radio-chip label .bi { font-size: 14px; }



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

        DOMAIN SELECTION TABLE

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

        .domain-table-wrapper {

            border-radius: var(--radius-md);

            overflow-x: auto; /* Enable scroll on mobile */

            border: 1.5px solid var(--clr-border);

            box-shadow: var(--shadow-sm);

            margin-top: 14px;

            -webkit-overflow-scrolling: touch;

        }

        .domain-table-wrapper table {

            width: 100%;

            margin: 0;

            font-size: 13px;

        }

        .domain-table-wrapper thead th {

            background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 100%);

            color: #fff;

            font-family: var(--font-body);

            font-size: 12.5px;

            font-weight: 700;

            padding: 13px 16px;

            border: none;

            text-align: center;

            letter-spacing: 0.03em;

        }

        .domain-table-wrapper thead th:first-child { text-align: left; }

        .domain-table-wrapper tbody tr {

            transition: background 0.1s;

        }

        .domain-table-wrapper tbody tr:nth-child(even) { background: #faf7ff; }

        .domain-table-wrapper tbody tr:hover { background: #f0e5ff; }

        .domain-table-wrapper tbody th {

            padding: 11px 16px;

            font-weight: 500;

            font-size: 13px;

            border: none;

            border-bottom: 1px solid var(--clr-border);

            color: var(--clr-text);

            vertical-align: middle;

            text-align: left;

        }

        .domain-table-wrapper tbody td {

            padding: 11px 16px;

            border: none;

            border-bottom: 1px solid var(--clr-border);

            text-align: center;

            vertical-align: middle;

        }

        .domain-table-wrapper tbody tr:last-child th,

        .domain-table-wrapper tbody tr:last-child td { border-bottom: none; }



        /* custom radio inside table */

        .domain-table-wrapper input[type="radio"] {

            accent-color: var(--clr-primary);

            width: 18px;

            height: 18px;

            cursor: pointer;

        }



        /* First/Second choice column header badges */

        .choice-header-badge {

            display: inline-flex;

            align-items: center;

            gap: 5px;

            padding: 3px 10px;

            border-radius: var(--radius-pill);

            font-size: 11px;

            font-weight: 700;

            letter-spacing: 0.04em;

        }

        .choice-header-badge.first  { background: rgba(245,158,11,0.25); color: #fcd34d; }

        .choice-header-badge.second { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }



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

        BATCH SELECTION — PILL GRID

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

        .batch-grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

            gap: 10px;

            margin-top: 15px;

        }

        .batch-chip {

            position: relative;

            width: 100%;

        }

        .batch-chip input[type="radio"] {

            position: absolute;

            opacity: 0;

            width: 0; height: 0;

        }

        .batch-chip label {

            display: flex !important;

            align-items: center;

            justify-content: flex-start;

            gap: 12px;

            padding: 10px 16px !important;

            border: 1.5px solid var(--clr-border) !important;

            border-radius: var(--radius-md) !important;

            background: var(--clr-surface) !important;

            font-size: 13.5px !important;

            font-weight: 600 !important;

            color: var(--clr-text-muted) !important;

            cursor: pointer;

            transition: var(--transition);

            user-select: none;

            width: 100%;

            white-space: nowrap;

            box-shadow: var(--shadow-xs) !important;

        }

        .batch-chip input[type="radio"]:checked + label {

            background: var(--clr-primary) !important;

            border-color: var(--clr-primary) !important;

            color: #fff !important;

            box-shadow: var(--shadow-md) !important;

        }

        .batch-chip label:hover {

            border-color: var(--clr-primary-light) !important;

            background: var(--clr-surface-2) !important;

            transform: translateY(-2px);

        }

        .batch-chip input[type="radio"]:checked + label:hover { transform: translateY(-2px); }

        .batch-chip label .existing-tag {

            margin-left: auto;

            font-size: 9px;

            background: #e0f2fe;

            color: #0369a1;

            padding: 2px 10px;

            border-radius: var(--radius-pill);

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: 0.05em;

            transition: var(--transition);

        }

        .batch-chip input[type="radio"]:checked + label .existing-tag {

            background: rgba(255,255,255,0.2);

            color: #fff;

        }

        .batch-chip label .bi { font-size: 14px; }



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

        HINT BOX

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

        .hint-box {

            background: linear-gradient(135deg, #fffbf0 0%, #fff8e6 100%);

            border: 1px solid #f5d67a;

            border-left: 4px solid var(--clr-accent);

            border-radius: var(--radius-sm);

            padding: 12px 16px;

            font-size: 12.5px;

            color: #7a5500;

            line-height: 1.6;

            margin-bottom: 14px;

            display: flex;

            gap: 10px;

            align-items: flex-start;

        }

        .hint-box .bi { font-size: 16px; color: var(--clr-accent-dark); flex-shrink: 0; margin-top: 1px; }

        .hint-box strong { color: #5a3800; }



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

        SUBMIT BUTTON

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

        .btn-asd-submit {

            background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%);

            color: #fff;

            border: none;

            border-radius: var(--radius-pill);

            padding: 15px 52px;

            font-family: var(--font-body);

            font-size: 15px;

            font-weight: 700;

            letter-spacing: 0.04em;

            cursor: pointer;

            box-shadow: 0 8px 24px rgba(92,26,122,0.38);

            transition: var(--transition);

            display: inline-flex;

            align-items: center;

            gap: 10px;

            margin-top: 24px;

            position: relative;

            overflow: hidden;

        }

        .btn-asd-submit::before {

            content: '';

            position: absolute;

            top: 0; left: -100%;

            width: 100%; height: 100%;

            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);

            transition: left 0.45s ease;

        }

        .btn-asd-submit:hover::before { left: 100%; }

        .btn-asd-submit:hover {

            transform: translateY(-3px);

            box-shadow: 0 14px 36px rgba(92,26,122,0.46);

            background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 100%);

            color: #fff;

        }

        .btn-asd-submit:active { transform: translateY(0); }

        .btn-asd-submit .bi { font-size: 18px; }



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

        REQUIRED NOTE

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

        .required-note {

            color: var(--clr-text-muted);

            font-size: 12.5px;

            font-weight: 500;

            margin-top: 14px;

            display: flex;

            align-items: center;

            gap: 6px;

        }

        .required-note strong { color: var(--clr-danger); }



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

        PROCESSING OVERLAY

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

        #processing {

            height: 100vh;

            width: 100vw;

            background-color: #000 !important;

            z-index: 9999;

            position: absolute;

            opacity: 0.7;

            display: block;

            text-align: center;

            left: 0;

        }

        .lds-grid, .lds-grid div { box-sizing: border-box; }

        .lds-grid { display: inline-block; position: relative; width: 80px; height: 80px; }

        .lds-grid div { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: currentColor; animation: lds-grid 1.2s linear infinite; }

        .lds-grid div:nth-child(1) { top:  8px; left:  8px; animation-delay:  0s; }

        .lds-grid div:nth-child(2) { top:  8px; left: 32px; animation-delay: -0.4s; }

        .lds-grid div:nth-child(3) { top:  8px; left: 56px; animation-delay: -0.8s; }

        .lds-grid div:nth-child(4) { top: 32px; left:  8px; animation-delay: -0.4s; }

        .lds-grid div:nth-child(5) { top: 32px; left: 32px; animation-delay: -0.8s; }

        .lds-grid div:nth-child(6) { top: 32px; left: 56px; animation-delay: -1.2s; }

        .lds-grid div:nth-child(7) { top: 56px; left:  8px; animation-delay: -0.8s; }

        .lds-grid div:nth-child(8) { top: 56px; left: 32px; animation-delay: -1.2s; }

        .lds-grid div:nth-child(9) { top: 56px; left: 56px; animation-delay: -1.6s; }

        @keyframes lds-grid {

            0%, 100% { opacity: 1; }

            50%       { opacity: 0.5; }

        }



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

        PAGE CONTAINER PADDING

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

        .asd-page-wrap {

            padding: 28px 0 56px;

        }

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

        FORM GROUP SPACING

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

        .form-group { margin-bottom: 0; }

        .row.mb-3 { margin-bottom: 1.2rem !important; }



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

        DIVIDER

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

        .asd-divider {

            height: 1px;

            background: linear-gradient(90deg, transparent, var(--clr-border-strong), transparent);

            margin: 8px 0 28px;

        }



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

        RESPONSIVE TWEAKS

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

        @media (max-width: 767px) {

            /* Prevent horizontal scrolling */
            html, body {
                overflow-x: hidden !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .container, .asd-page-wrap, .form-outer-card {
                overflow-x: hidden !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            /* Header Fixes - More Space */

            header .logo img, header img { max-height: 28px !important; width: auto !important; margin: 0 6px !important; }

            .header-area { padding: 14px 0 !important; }



            /* Layout & Card - More Space below Header */

            .asd-page-wrap { padding: 60px 0 30px !important; }

            .form-outer-card { padding: 24px 14px 36px; }



            /* Notice/Feature Cards */

            .asd-feature-card {
                padding: 18px 12px;
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
            }

            .feature-icon { width: 44px; height: 44px; font-size: 20px; }

            .feature-title { font-size: 12.5px; }

            .feature-text {
                font-size: 12px;
                white-space: normal !important;
                word-wrap: break-word !important;
            }



            /* Headline & Badge */

            .form-headline { font-size: 21px; margin-bottom: 12px; }

            .form-headline small { font-size: 12.5px; }

            .fee-badge {
                width: 100%;
                flex-direction: column;
                height: auto;
                padding: 12px;
                border-radius: 12px;
                text-align: center;
                gap: 4px;
                font-size: 13.5px;
                max-width: 100% !important;
                overflow: hidden !important;
            }

            .fee-badge .bi { font-size: 18px; }

            .fee-badge .fee-divider { display: none; }



            /* Stats Row - Modern Grid Cards */

            .stats-row {

                display: grid !important;

                grid-template-columns: 1fr 1fr;

                gap: 8px !important;

                padding: 0 !important;

                margin-bottom: 30px !important;

                background: transparent !important;

                box-shadow: none !important;

                overflow: visible !important;

                width: 100% !important;

                max-width: 100% !important;

            }



            .stat-pill { 

                width: 100% !important; 

                justify-content: flex-start !important;

                padding: 12px 10px !important;

                font-size: 11px !important;

                margin: 0 !important;

                border-radius: 12px !important;

                background: #f8fafc !important;

                border: 1px solid #e2e8f0 !important;

                color: #1e293b !important;

                text-align: left !important;

                gap: 8px !important;

                box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;

                white-space: normal !important;

                line-height: 1.3 !important;

            }



            .stat-pill .bi {

                flex-shrink: 0;

                width: 20px;

                font-size: 14px;

                color: var(--clr-primary);

            }



            /* Info Panel */

            .info-panel-header { padding: 12px 14px; font-size: 12.5px; }

            .info-item { padding: 12px 14px; gap: 10px; }

            .info-num { width: 24px; height: 24px; font-size: 10px; }

            .info-text { font-size: 12px; }



            /* Certificate Tables */

            .cert-table-wrapper tbody td { padding: 10px 8px; font-size: 11.5px; }

            .cert-table-wrapper tbody td a { padding: 4px 10px; font-size: 10.5px; white-space: nowrap; }



            /* Domain Table Fixes - Aggressive Scaling */

            .domain-table-wrapper {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .domain-table-wrapper thead th {

                padding: 8px 5px !important;

                font-size: 10.5px !important;

                line-height: 1.3 !important;

                white-space: normal !important;

            }

            .domain-table-wrapper thead th span {

                font-size: 9px !important;

                display: block;

                margin-top: 4px;

            }

            .domain-table-wrapper tbody th {
                padding: 8px 6px;
                font-size: 11.5px;
                white-space: normal !important;
                line-height: 1.4 !important;
            }

            .domain-table-wrapper tbody td {
                padding: 8px 6px;
                font-size: 11.5px;
                white-space: nowrap !important;
                text-align: center;
            }



            .choice-header-badge { 

                font-size: 8.5px !important; 

                padding: 2px 6px !important; 

                gap: 4px !important;

                border-radius: 8px !important;

            }

            .choice-header-badge .bi { font-size: 10px !important; }



            /* Duration Chips */

            .radio-group-row {
                flex-wrap: wrap !important;
                gap: 6px !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
            }

            .radio-group-row .radio-chip {
                flex: 1 1 30% !important;
                min-width: 82px;
                max-width: 100% !important;
            }

            .radio-group-row .radio-chip label {
                font-size: 10.5px !important;
                padding: 6px 2px !important;
                white-space: normal !important;
                word-wrap: break-word !important;
            }



            /* Batch Grid */

            .batch-grid {
                grid-template-columns: 1fr;
                gap: 6px;
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
            }

            .batch-chip label {
                padding: 10px 14px !important;
                font-size: 13px !important;
                white-space: normal !important;
                word-wrap: break-word !important;
            }

            

            /* Form Inputs */

            .form-section-title {
                font-size: 11px;
                padding: 8px 14px;
                margin-top: 20px;
                gap: 8px;
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
            }

            .form-section-title .section-num { width: 22px; height: 22px; font-size: 11px; }

            .form-label-custom {
                font-size: 12px !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .form-control {
                font-size: 13.5px;
                padding: 9px 12px;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .input-icon-wrap {
                width: 100% !important;
                max-width: 100% !important;
            }

            

            /* reCAPTCHA fix for mobile */

            .g-recaptcha {

                transform: scale(0.8);

                transform-origin: 0 0;

                margin: 10px 0;

            }



            /* Submit Button */

            .btn-asd-submit { width: 100%; justify-content: center; padding: 14px 20px; font-size: 14.5px; }

        }

        

/* =============================================
   MODERNIZED FORM DESIGN
   ============================================= */

/* Form Control Styling */
.form-control {
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: #fafcfe;
    color: #1a1e2b;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.form-control:focus {
    border-color: #5BC0DE;
    box-shadow: 0 0 0 4px rgba(91, 192, 222, 0.15);
    background-color: #ffffff;
    outline: none;
}

/* Label Styling */
.form-label-custom, label {
    font-weight: 600;
    color: #2A3A7A;
    margin-bottom: 8px;
    display: inline-block;
    font-size: 13.5px;
}

/* Form Groups */
.form-group {
    margin-bottom: 20px;
}

/* Radio Buttons and Checkboxes */
.form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 0.15em;
    cursor: pointer;
    border: 2px solid #bfcbd9;
}

.form-check-input:checked {
    background-color: #2A3A7A;
    border-color: #2A3A7A;
}

/* Submit Button Override */
.btn-asd-submit {
    background: linear-gradient(135deg, #1D2051 0%, #2A3A7A 100%);
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(29, 32, 81, 0.2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-asd-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(29, 32, 81, 0.3);
    background: linear-gradient(135deg, #0A1628 0%, #1D2051 100%);
    color: #fff;
}

/* Improve select dropdown */
select.form-control {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231D2051%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 16px top 50%;
    background-size: 12px auto;
    padding-right: 40px;
}

/* =============================================
   CERTIFICATE TABLES GRID
   Side-by-side on desktop, stacked on mobile
============================================= */

.cert-tables-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}

@media (max-width: 767px) {
    .cert-tables-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cert-tables-grid .cert-table-wrapper {
        width: 100%;
    }
}