/* ===== Tokens ===== */
 :root {
     --blue: #005BAA;
     --blue-d: #004F98;
     --hero: #005EAA;
     --red: #F51B2A;
     --yellow: #FFC928;
     --text: #17233C;
     --muted: #667A9A;
     --light: #EEF5FC;
     --border: #D9E5F2;
     --white: #fff;
     --green: #1E9E5A
 }

 /* ===== Base ===== */
 html {
     scroll-behavior: smooth
 }

 body {
     font-family: 'Poppins', system-ui, sans-serif;
     color: var(--text);
     overflow-x: hidden;
     font-size: 15px
 }

 .home-page-section {
     padding: 64px 0 !important;
 }

 h2 {
     font-weight: 700;
     font-size: clamp(1.6rem, 3vw, 2.2rem);
     line-height: 1.2
 }

 p {
     color: var(--muted)
 }

 .tag {
     display: inline-block;
     font-size: .72rem;
     font-weight: 600;
     letter-spacing: .06em;
     color: var(--red);
     background: #FEECEE;
     border-radius: 4px;
     padding: 4px 10px;
     margin-bottom: 12px
 }

 .tag.y {
     background: var(--yellow);
     color: var(--text)
 }

 .btn-red,
 .btn-blue {
     border: 0;
     color: #fff;
     font-weight: 600;
     border-radius: 8px;
     padding: 12px 22px;
     transition: background .2s, transform .2s
 }

 .btn-red {
     background: var(--red)
 }

 .btn-red:hover {
     background: #d8111f;
     color: #fff
 }

 .btn-blue {
     background: var(--blue)
 }

 .btn-blue:hover {
     background: var(--blue-d);
     color: #fff
 }

 .btn-red:active,
 .btn-blue:active {
     transform: translateY(1px)
 }

 .btn-red:disabled {
     opacity: .55;
     cursor: not-allowed
 }

 /* ===== Header ===== */
 .site-header {
     position: sticky;
     top: 0;
     z-index: 50;
     background: #fff;
     border-bottom: 1px solid var(--border);
     box-shadow: 0 1px 6px rgba(0, 50, 100, .06)
 }

 .site-header .in {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0px 15px;
 }

 .site-header .btn-blue {
     padding: 8px 16px;
     font-size: .85rem
 }

 /* ===== Hero ===== */
 .hero {
     background: var(--hero);
     color: #fff;
     padding: 56px 0 150px;
     position: relative;
     border-radius: 0 0 50% 50%/0 0 36px 36px
 }

 .hero p {
     color: #9ca3ab;
 }

 .hero h1 {
     font-weight: 700;
     font-size: clamp(2.2rem, 5vw, 3.4rem);
     line-height: 1.1;
     margin: 14px 0
 }

 .hero h1 span {
     color: var(--yellow)
 }

 .pill {
     background: var(--yellow);
     color: var(--text);
     font-weight: 600;
     font-size: .8rem;
     border-radius: 20px;
     padding: 4px 14px
 }

 .feat {
     display: flex;
     gap: 10px;
     align-items: center;
     font-size: .85rem
 }

 .feat i {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .15);
     display: grid;
     place-items: center;
     color: var(--yellow)
 }

 .feat b {
     display: block
 }

 .feat span {
     color: #CFE3F7;
     font-size: .78rem
 }

 /* ===== Predictor ===== */
 #predictor {
     background: #fff;
     color: var(--text);
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 40, 90, .2);
     overflow: hidden
 }

 .p-head {
     background: var(--blue-d);
     color: #fff;
     padding: 14px 20px
 }

 .p-head b {
     display: block
 }

 .p-head small {
     color: #BBD6F0
 }

 .p-body {
     padding: 20px
 }

 .steps {
     display: flex;
     align-items: center;
     margin-bottom: 20px
 }

 .st {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: .78rem;
     color: var(--muted)
 }

 .st i {
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: var(--light);
     border: 1px solid var(--border);
     display: grid;
     place-items: center;
     font-style: normal;
     font-weight: 600;
     font-size: .75rem
 }

 .st.on {
     color: var(--blue);
     font-weight: 600
 }

 .st.on i {
     background: var(--blue);
     color: #fff;
     border-color: var(--blue)
 }

 .st.done i {
     background: var(--green);
     color: #fff;
     border-color: var(--green)
 }

 .line {
     flex: 1;
     height: 2px;
     background: var(--border);
     margin: 0 8px
 }

 .line.done {
     background: var(--green)
 }

 .pane {
     display: none;
     animation: fade .3s
 }

 .pane.show {
     display: block
 }

 @keyframes fade {
     from {
         opacity: 0;
         transform: translateY(6px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .score {
     font-size: 2.6rem;
     font-weight: 700;
     color: var(--blue);
     line-height: 1
 }

 .score small {
     font-size: 1rem;
     color: var(--muted);
     font-weight: 500
 }

 input[type=range] {
     width: 100%;
     accent-color: var(--blue);
     margin: 14px 0 2px;
     height: 28px
 }

 .ticks {
     display: flex;
     justify-content: space-between;
     font-size: .72rem;
     color: var(--muted)
 }

 .status {
     background: var(--light);
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 10px 14px;
     margin: 16px 0;
     font-weight: 600;
     color: var(--blue);
     display: flex;
     justify-content: space-between
 }

 .status span {
     color: var(--muted);
     font-weight: 400;
     font-size: .8rem
 }

 .disc {
     border-top: 1px solid var(--border);
     margin-top: 16px;
     padding-top: 12px;
     font-size: .72rem;
     color: var(--muted)
 }

 .form-control {
     background: var(--light);
     border: 1px solid var(--border);
     padding: 10px 12px;
     font-size: .9rem
 }

 .form-control:focus {
     border-color: var(--blue);
     box-shadow: 0 0 0 3px rgba(0, 91, 170, .15);
     background: #fff
 }

 .form-label {
     font-size: .8rem;
     font-weight: 500;
     margin-bottom: 3px
 }

 .input-group-text {
     background: var(--light);
     border: 1px solid var(--border);
     font-size: .9rem
 }

 .sum {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: var(--light);
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 10px 14px;
     margin-bottom: 14px
 }

 .sum small {
     color: var(--muted);
     display: block;
     font-size: .72rem
 }

 .sum b {
     font-size: 1.2rem;
     color: var(--blue)
 }

 .link {
     background: none;
     border: 0;
     color: var(--blue);
     font-weight: 600;
     font-size: .85rem;
     padding: 0
 }

 .res-rank {
     font-size: 1.85rem;
     font-weight: 700;
     color: var(--red);
     line-height: 1.2
 }

 .res-box {
     background: var(--light);
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 10px;
     text-align: center;
     font-size: .8rem
 }

 .res-box b {
     display: block;
     font-size: 1.05rem;
     color: var(--blue)
 }

 /* ===== Cards ===== */
 .card-x {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 22px;
     height: 100%;
     box-shadow: 0 2px 8px rgba(0, 50, 100, .05);
     transition: transform .2s, box-shadow .2s
 }

 .card-x:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 18px rgba(0, 50, 100, .1)
 }

 .card-x h3 {
     font-size: 1.05rem;
     font-weight: 600;
     margin: 10px 0 6px
 }

 .card-x p {
     font-size: .88rem
 }

 .num {
     width: 34px;
     height: 34px;
     border-radius: 6px;
     background: var(--blue);
     color: #fff;
     display: grid;
     place-items: center;
     font-weight: 600
 }

 .badge-x {
     font-size: .72rem;
     font-weight: 600;
     border-radius: 4px;
     padding: 3px 9px;
     display: inline-block
 }

 .b1 {
     background: var(--light);
     color: var(--blue)
 }

 .b2 {
     background: #E3F6EC;
     color: var(--green)
 }

 .b3 {
     background: #FFF4D1;
     color: #8A6500
 }

 .btn-line {
     border: 1.5px solid var(--blue);
     color: var(--blue);
     font-weight: 600;
     border-radius: 8px;
     padding: 10px 20px;
     background: #fff
 }

 .btn-line:hover {
     background: var(--blue);
     color: #fff
 }


 /* ===== Why ===== */
 .why {
     background: var(--blue);
     color: #fff;
     text-align: center;
     padding: 64px 0px;
 }

 .why .card-x {
     background: rgba(255, 255, 255, .1);
     border-color: rgba(255, 255, 255, .2);
     box-shadow: none;
     text-align: left;
     color: #fff
 }

 .why .card-x p {
     color: #D3E5F8
 }

 /* ===== Guide ===== */
 .gstep {
     display: flex;
     gap: 14px;
     padding: 14px 0;
     border-bottom: 1px solid var(--border)
 }

 .gstep:last-child {
     border: 0
 }

 .gstep i {
     flex: none;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: var(--yellow);
     font-style: normal;
     font-weight: 700;
     display: grid;
     place-items: center
 }

 .gstep b {
     display: block
 }

 .gstep p {
     margin: 2px 0 0;
     font-size: .86rem
 }

 /* ===== FAQ ===== */
 .accordion-item {
     border: 1px solid var(--border);
     margin-bottom: 8px;
     border-radius: 8px !important;
     overflow: hidden
 }

 .accordion-button {
     font-weight: 500;
     font-size: .92rem;
     color: var(--text)
 }

 .accordion-button:not(.collapsed) {
     background: var(--light);
     color: var(--blue);
     box-shadow: none
 }

 .accordion-button:focus {
     box-shadow: 0 0 0 3px rgba(0, 91, 170, .15)
 }

 /* ===== CTA / chat ===== */
 .cta {
     background: var(--red);
     color: #fff;
     text-align: center;
     padding: 64px 0px;
 }

 .cta p {
     color: #FFE3E5
 }

 .cta .btn {
     background: #fff;
     color: var(--red);
     font-weight: 600;
     border-radius: 8px;
     padding: 12px 26px
 }


 .chat {
     position: fixed;
     right: 18px;
     bottom: 18px;
     z-index: 60;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 8px
 }

 .chat .tip {
     background: #fff;
     border: 1px solid var(--border);
     box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
     border-radius: 10px;
     padding: 8px 12px;
     font-size: .78rem;
     max-width: 210px
 }

 .chat button {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     border: 0;
     background: var(--blue);
     color: #fff;
     font-size: 1.3rem;
     box-shadow: 0 4px 12px rgba(0, 50, 100, .3)
 }

 /* ===== Responsive ===== */
 @media(min-width:992px) {
     #predictor {
         margin-bottom: -110px
     }
 }

 @media(max-width:991px) {
     .hero {
         padding-bottom: 50px;
         border-radius: 0 0 24px 24px
     }

     #predictor {
         margin-top: 10px
     }
 }

 @media(max-width:767px) {
     section {
         padding: 44px 0
     }

     .video,
     .banner {
         padding: 22px
     }

     .btn-red,
     .btn-blue {
         min-height: 46px
     }

     .steps .st span {
         display: none
     }

     .stack-m .btn {
         width: 100%
     }
 }

 @media(prefers-reduced-motion:reduce) {
     * {
         animation: none !important;
         transition: none !important;
         scroll-behavior: auto !important
     }
 }

 .seo-content {
     background: #f6f7f9;
     padding: 40px 0;
 }

 .seo-content .seo-card {
     background: #fff;
     border: 1px solid #e8eaee;
     border-radius: 14px;
     padding: 44px 46px;
     max-width: 1100px;
     margin: 0 auto;
 }

 .seo-content h2 {
     font-size: 2rem;
     font-weight: 700;
     color: #1a1a1a;
     margin: 0 0 12px;
     line-height: 1.25;
 }

 .seo-content h3 {
     font-size: 1.35rem;
     font-weight: 700;
     color: #1a1a1a;
     margin: 32px 0 8px;
     line-height: 1.3;
 }

 .seo-content p {
     font-size: 1rem;
     color: #444;
     line-height: 1.75;
     margin: 0;
 }

 .seo-content .seo-intro {
     font-size: 1.05rem;
 }

 @media (max-width: 576px) {
     .seo-content {
         padding: 24px 0;
     }

     .seo-content .seo-card {
         padding: 26px 20px;
     }

     .seo-content h2 {
         font-size: 1.5rem;
     }

     .seo-content h3 {
         font-size: 1.15rem;
         margin-top: 24px;
     }
 }


 /* ===== Privacy Policy page CSS (Tailwind ki zarurat nahi) ===== */

 body:has(article.policy) {
     background: #f8fafc;
 }

 /* ---- Layout utilities used in the HTML ---- */
 .max-w-3xl {
     max-width: 48rem;
 }

 .mx-auto {
     margin-left: auto;
     margin-right: auto;
 }

 .px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
 }

 .py-8 {
     padding-top: 2rem;
     padding-bottom: 2rem;
 }

 .bg-white {
     background: #fff;
 }

 .rounded-2xl {
     border-radius: 1rem;
 }

 .rounded-xl {
     border-radius: .75rem;
 }

 .shadow-sm {
     box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
 }

 .border {
     border: 1px solid #e2e8f0;
 }

 .border-slate-200 {
     border-color: #e2e8f0;
 }

 .border-indigo-100 {
     border-color: #e0e7ff;
 }

 .p-5 {
     padding: 1.25rem;
 }

 .p-4 {
     padding: 1rem;
 }

 .border-b {
     border-bottom: 1px solid #e2e8f0;
 }

 .pb-6 {
     padding-bottom: 1.5rem;
 }

 .mb-6 {
     margin-bottom: 1.5rem;
 }

 .my-6 {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
 }

 .mt-2 {
     margin-top: .5rem;
 }

 .mt-10 {
     margin-top: 2.5rem;
 }

 .bg-indigo-50 {
     background: #eef2ff;
 }

 .grid {
     display: grid;
 }

 .gap-y-1 {
     row-gap: .25rem;
 }

 .gap-x-6 {
     column-gap: 1.5rem;
 }

 .text-sm {
     font-size: .875rem;
     line-height: 1.25rem;
 }

 .text-lg {
     font-size: 1.125rem;
     line-height: 1.75rem;
 }

 .text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
 }

 .font-extrabold {
     font-weight: 800;
 }

 .font-semibold {
     font-weight: 600;
 }

 .tracking-tight {
     letter-spacing: -.025em;
 }

 .text-slate-900 {
     color: #0f172a;
 }

 .text-slate-500 {
     color: #64748b;
 }

 .list-none {
     list-style: none;
 }

 /* "!" wali classes */
 .\!mb-0 {
     margin-bottom: 0 !important;
 }

 .\!mb-2 {
     margin-bottom: .5rem !important;
 }

 .\!mt-0 {
     margin-top: 0 !important;
 }

 .\!mt-3 {
     margin-top: .75rem !important;
 }

 .\!pl-0 {
     padding-left: 0 !important;
 }

 .\!list-none {
     list-style: none !important;
 }

 .\!space-y-0>*+* {
     margin-top: 0 !important;
 }

 /* ---- Policy typography ---- */
 .policy h1,
 .policy h2,
 .policy h3 {
     line-height: 1.3;
 }

 .policy h2 {
     font-size: 1.25rem;
     font-weight: 700;
     color: #0f172a;
     margin: 2.5rem 0 .75rem;
     scroll-margin-top: 5rem;
 }

 .policy h3 {
     font-size: 1rem;
     font-weight: 600;
     color: #1e293b;
     margin: 1.5rem 0 .5rem;
 }

 .policy p {
     color: #334155;
     line-height: 1.7;
     margin: 0 0 1rem;
 }

 .policy ul {
     list-style: disc;
     padding-left: 1.5rem;
     margin: 0 0 1rem;
     color: #334155;
 }

 .policy ul li {
     margin-bottom: .25rem;
     line-height: 1.6;
 }

 .policy ul li::marker {
     color: #6366f1;
 }

 .policy ol {
     margin: 0;
     padding: 0;
 }

 .policy a {
     color: #4f46e5;
     text-decoration: underline;
     word-break: break-word;
 }

 .policy a:hover {
     color: #3730a3;
 }

 .policy nav a {
     text-decoration: none;
 }

 .policy nav a:hover {
     text-decoration: underline;
 }

 .policy nav ol {
     display: grid;
     row-gap: .25rem;
     column-gap: 1.5rem;
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .policy nav li {
     margin: 0;
 }

 .policy aside {
     margin-top: 2.5rem;
     background: #eef2ff;
     border: 1px solid #e0e7ff;
     border-radius: .75rem;
     padding: 1.25rem;
 }

 .policy aside h2 {
     margin-top: 0;
     margin-bottom: .5rem;
     font-size: 1.125rem;
 }

 /* ---- Tablet / Desktop (sm: 640px+) ---- */
 @media (min-width: 640px) {
     .sm\:px-6 {
         padding-left: 1.5rem;
         padding-right: 1.5rem;
     }

     .sm\:py-14 {
         padding-top: 3.5rem;
         padding-bottom: 3.5rem;
     }

     .sm\:p-10 {
         padding: 2.5rem;
     }

     .sm\:p-5 {
         padding: 1.25rem;
     }

     .sm\:p-6 {
         padding: 1.5rem;
     }

     .sm\:text-4xl {
         font-size: 2.25rem;
         line-height: 2.5rem;
     }

     .sm\:text-xl {
         font-size: 1.25rem;
         line-height: 1.75rem;
     }

     .sm\:grid-cols-2 {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .policy h2 {
         font-size: 1.5rem;
     }

     .policy h3 {
         font-size: 1.125rem;
     }

     .policy aside h2 {
         font-size: 1.25rem;
     }
 }

 /* =========================================================
   CONTACT US PAGE
========================================================= */

 .contact-page {
     background: #f5f8fc;
     min-height: 100vh;
 }

 .contact-card {
     max-width: 1100px;
     margin: 0 auto;
     background: #ffffff;
     border: 1px solid #e4e9f0;
     border-radius: 22px;
     padding: 28px;
     box-shadow: 0 15px 45px rgba(23, 35, 60, 0.07);
 }


 /* Breadcrumb */

 .contact-page .page-breadcrumb {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 28px;
     font-size: 13px;
 }

 .contact-page .page-name {
     color: #17233C;
     font-weight: 600;
 }

 .contact-page .separator {
     color: #a0a7b4;
 }

 .contact-page .home-link {
     color: #005BAA;
     font-weight: 500;
     text-decoration: none;
     transition: all 0.2s ease;
 }

 .contact-page .home-link:hover {
     color: #F51B2A;
     text-decoration: underline;
 }


 /* Header */

 .contact-header {
     display: flex;
     align-items: center;
     gap: 18px;
 }

 .contact-icon {
     width: 62px;
     height: 62px;
     flex-shrink: 0;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #eaf3ff;
     color: #005BAA;
     font-size: 28px;
 }

 .contact-header h1 {
     margin: 0 0 7px;
     color: #17233C;
     font-size: 36px;
     font-weight: 700;
     line-height: 1.2;
 }

 .contact-header p {
     margin: 0;
     color: #667085;
     font-size: 15px;
     line-height: 1.7;
     max-width: 750px;
 }


 /* Divider */

 .contact-divider {
     height: 1px;
     background: #e7ebf0;
     margin: 30px 0;
 }


 /* Left Content */

 .contact-info {
     padding: 12px 8px 12px 0;
 }

 .contact-info h2 {
     color: #17233C;
     font-size: 25px;
     font-weight: 700;
     margin-bottom: 12px;
 }

 .contact-intro {
     color: #667085;
     font-size: 15px;
     line-height: 1.8;
     margin-bottom: 28px;
 }


 /* Contact Boxes */

 .contact-box {
     display: flex;
     align-items: flex-start;
     gap: 15px;
     padding: 18px;
     background: #f8fafc;
     border: 1px solid #e8edf3;
     border-radius: 14px;
     margin-bottom: 14px;
     transition: all 0.25s ease;
 }

 .contact-box:hover {
     transform: translateY(-3px);
     border-color: #cddff2;
     box-shadow: 0 8px 25px rgba(23, 35, 60, 0.07);
 }

 .contact-box-icon {
     width: 44px;
     height: 44px;
     flex-shrink: 0;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #eaf3ff;
     color: #005BAA;
     font-size: 20px;
 }

 .contact-box span {
     display: block;
     color: #667085;
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .5px;
     margin-bottom: 4px;
 }

 .contact-box a {
     color: #005BAA;
     font-size: 16px;
     font-weight: 600;
     text-decoration: none;
     word-break: break-word;
 }

 .contact-box a:hover {
     text-decoration: underline;
 }

 .contact-box p {
     color: #667085;
     font-size: 14px;
     line-height: 1.6;
     margin: 0;
 }


 /* Form Card */

 .contact-form-card {
     background: #fbfcfe;
     border: 1px solid #e5eaf0;
     border-radius: 18px;
     padding: 26px;
 }

 .form-heading {
     margin-bottom: 22px;
 }

 .form-heading h2 {
     color: #17233C;
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 6px;
 }

 .form-heading p {
     color: #667085;
     font-size: 14px;
     margin: 0;
 }


 /* Labels */

 .contact-form-card label {
     display: block;
     color: #17233C;
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 7px;
 }


 /* Input */

 .input-wrapper {
     position: relative;
 }

 .input-wrapper>i {
     position: absolute;
     left: 15px;
     top: 50%;
     transform: translateY(-50%);
     color: #8a94a6;
     font-size: 17px;
     pointer-events: none;
     z-index: 2;
 }

 .input-wrapper input,
 .input-wrapper textarea {
     width: 100%;
     border: 1px solid #dce2e9;
     background: #ffffff;
     border-radius: 11px;
     padding: 13px 15px 13px 44px;
     color: #17233C;
     font-size: 14px;
     outline: none;
     transition: all 0.2s ease;
 }

 .input-wrapper input {
     height: 50px;
 }

 .input-wrapper textarea {
     resize: vertical;
     min-height: 125px;
     line-height: 1.6;
 }

 .input-wrapper textarea+i,
 .textarea-wrapper>i {
     top: 20px;
     transform: none;
 }

 .input-wrapper input::placeholder,
 .input-wrapper textarea::placeholder {
     color: #a1a9b6;
 }

 .input-wrapper input:focus,
 .input-wrapper textarea:focus {
     border-color: #005BAA;
     box-shadow: 0 0 0 3px rgba(0, 91, 170, 0.09);
 }


 /* Submit Button */

 .contact-submit {
     width: 100%;
     height: 52px;
     border: 0;
     border-radius: 11px;
     background: #005BAA;
     color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.25s ease;
 }

 .contact-submit:hover {
     background: #004987;
     transform: translateY(-2px);
     box-shadow: 0 9px 22px rgba(0, 91, 170, 0.22);
 }

 .contact-submit i {
     transition: transform 0.25s ease;
 }

 .contact-submit:hover i {
     transform: translateX(4px);
 }


 /* =========================================================
   MOBILE
========================================================= */

 @media (max-width: 767px) {

     .contact-card {
         padding: 20px 16px;
         border-radius: 16px;
     }

     .contact-header {
         align-items: flex-start;
     }

     .contact-icon {
         width: 50px;
         height: 50px;
         border-radius: 13px;
         font-size: 22px;
     }

     .contact-header h1 {
         font-size: 28px;
     }

     .contact-header p {
         font-size: 14px;
     }

     .contact-divider {
         margin: 24px 0;
     }

     .contact-info {
         padding-right: 0;
     }

     .contact-info h2 {
         font-size: 22px;
     }

     .contact-form-card {
         padding: 20px 16px;
     }

     .form-heading h2 {
         font-size: 21px;
     }

 }


 /* ===== SITE FOOTER (append to styles.css) ===== */
 .site-footer {
     --sf-primary: #005BAA;
     --sf-dark: #003F7D;
     --sf-red: #F51B2A;
     --sf-red-dark: #D01220;
     --sf-white: #FFFFFF;
     --sf-link: rgba(255, 255, 255, 0.92);
     --sf-line: rgba(255, 255, 255, 0.18);

     position: relative;
     overflow: hidden;
     color: var(--sf-link);
     font-size: 1rem;
     line-height: 1.6;
     background: linear-gradient(135deg, #0a56a6 0%, #004a96 45%, #003F7D 100%);
 }

 /* Soft decorative waves */
 .site-footer::before,
 .site-footer::after {
     content: "";
     position: absolute;
     z-index: 0;
     pointer-events: none;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.05);
 }

 .site-footer::before {
     left: -12%;
     bottom: 8%;
     width: 32%;
     height: 220px;
     transform: rotate(18deg);
 }

 .site-footer::after {
     right: -8%;
     bottom: 6%;
     width: 30%;
     height: 240px;
     transform: rotate(-22deg);
 }

 /* Top gradient line */
 .site-footer .site-footer__topline {
     display: block;
     height: 6px;
     margin: 20px 12px 0;
     border-radius: 999px;
     background: linear-gradient(90deg, #0b63d6 0%, #3a64b8 40%, var(--sf-red) 75%, var(--sf-red) 100%);
     position: relative;
     z-index: 1;
 }

 /* ---------- Alignment reset (overrides site-wide centered text) ---------- */
 .site-footer {
     text-align: left;
 }

 .site-footer :is(div, nav, h2, p, ul, li, a, span) {
     text-align: inherit;
 }

 .site-footer .site-footer__col {
     display: block;
 }

 .site-footer .site-footer__list {
     display: block;
 }

 .site-footer .site-footer__list li {
     display: block;
 }

 .site-footer .site-footer__list a {
     justify-content: flex-start;
 }

 .site-footer .site-footer__heading {
     white-space: nowrap;
 }

 /* ---------- Top ---------- */
 .site-footer .site-footer__top {
     position: relative;
     z-index: 1;
     padding: 4rem 0 3rem;
 }

 /* Dot patterns */
 .site-footer .site-footer__top::before,
 .site-footer .site-footer__top::after {
     content: "";
     position: absolute;
     pointer-events: none;
     background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1.5px, transparent 1.6px);
     background-size: 18px 18px;
 }

 .site-footer .site-footer__top::before {
     left: 12px;
     top: 5.5rem;
     width: 90px;
     height: 190px;
 }

 .site-footer .site-footer__top::after {
     right: 16px;
     top: 4.5rem;
     width: 100px;
     height: 126px;
 }

 .site-footer .site-footer__container {
     position: relative;
     z-index: 1;
 }

 /* ---------- Brand ---------- */
 .site-footer .site-footer__brand {
     padding-right: 2.5rem;
 }

 .site-footer .site-footer__logo {
     display: inline-block;
     margin-bottom: 1.5rem;
     padding: 0.35rem 0.6rem;
     background: var(--sf-white);
     border-radius: 14px;
     line-height: 0;
     box-shadow: 0 8px 22px rgba(0, 20, 60, 0.25);
     transition: transform 0.2s ease;
 }

 .site-footer .site-footer__logo img {
     display: block;
     height: 54px;
     width: auto;
     max-width: 100%;
 }

 .site-footer .site-footer__logo:hover {
     transform: translateY(-2px);
 }

 .site-footer .site-footer__about {
     max-width: 440px;
     margin: 0 0 1.75rem;
     font-size: 1.05rem;
     line-height: 1.7;
     color: var(--sf-link);
 }

 /* ---------- CTA ---------- */
 .site-footer .site-footer__cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
     padding: 0.85rem 1.4rem;
     background: var(--sf-red);
     color: var(--sf-white);
     font-weight: 700;
     font-size: 1.05rem;
     text-decoration: none;
     border-radius: 10px;
     box-shadow: 0 8px 20px rgba(245, 27, 42, 0.3);
     transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
 }

 .site-footer .site-footer__cta .bi {
     font-size: 1.25rem;
     line-height: 1;
 }

 .site-footer .site-footer__cta .bi-arrow-right {
     transition: transform 0.2s ease;
 }

 .site-footer .site-footer__cta:hover,
 .site-footer .site-footer__cta:focus-visible {
     background: var(--sf-red-dark);
     color: var(--sf-white);
     transform: translateY(-2px);
     box-shadow: 0 12px 26px rgba(245, 27, 42, 0.4);
 }

 .site-footer .site-footer__cta:hover .bi-arrow-right {
     transform: translateX(3px);
 }

 /* ---------- Link columns ---------- */
 .site-footer .site-footer__col {
     padding-left: 3.25rem;
     padding-right: 1rem;
     border-left: 1px solid var(--sf-line);
 }

 .site-footer .site-footer__heading {
     position: relative;
     margin: 0 0 1.75rem;
     padding-bottom: 0.9rem;
     color: var(--sf-white);
     font-size: 1.6rem;
     font-weight: 700;
     line-height: 1.2;
 }

 .site-footer .site-footer__heading::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 40px;
     height: 4px;
     border-radius: 999px;
     background: var(--sf-red);
 }

 .site-footer .site-footer__list,
 .site-footer .site-footer__legal {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .site-footer .site-footer__list li+li {
     margin-top: 0.95rem;
 }

 .site-footer .site-footer__list a {
     display: inline-flex;
     align-items: center;
     gap: 1rem;
     color: var(--sf-link);
     text-decoration: none;
     transition: color 0.2s ease, transform 0.2s ease;
 }

 .site-footer .site-footer__list a .bi {
     font-size: 1.35rem;
     line-height: 1;
     flex: 0 0 auto;
 }

 .site-footer .site-footer__list a:hover,
 .site-footer .site-footer__list a:focus-visible,
 .site-footer .site-footer__legal a:hover,
 .site-footer .site-footer__legal a:focus-visible {
     color: var(--sf-red);
     transform: translateX(3px);
 }

 /* ---------- Email pill ---------- */
 .site-footer .site-footer__email {
     display: inline-flex;
     align-items: center;
     gap: 0.85rem;
     margin-top: 2rem;
     padding: 0.8rem 1.1rem;
     max-width: 100%;
     color: var(--sf-white);
     font-size: 1rem;
     text-decoration: none;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.45);
     border-radius: 10px;
     transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
 }

 .site-footer .site-footer__email .bi {
     font-size: 1.25rem;
     line-height: 1;
     flex: 0 0 auto;
 }

 .site-footer .site-footer__email span {
     min-width: 0;
     white-space: nowrap;
     overflow-wrap: normal;
 }

 .site-footer .site-footer__email:hover,
 .site-footer .site-footer__email:focus-visible {
     color: var(--sf-red);
     border-color: var(--sf-red);
     transform: translateX(3px);
 }

 /* ---------- Bottom bar ---------- */
 .site-footer .site-footer__bottom {
     position: relative;
     z-index: 1;
     border-top: 1px solid var(--sf-line);
     padding: 1.5rem 0;
 }

 .site-footer .site-footer__bottom-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem 1.5rem;
 }

 .site-footer .site-footer__copy {
     margin: 0;
     color: var(--sf-link);
 }

 .site-footer .site-footer__legal {
     display: flex;
     align-items: center;
 }

 .site-footer .site-footer__legal li {
     padding: 0.35rem 0 0.35rem 1.9rem;
     margin-left: 1.9rem;
     border-left: 1px solid var(--sf-line);
 }

 .site-footer .site-footer__legal li:first-child {
     margin-left: 0;
 }

 .site-footer .site-footer__legal a {
     display: inline-block;
     color: var(--sf-link);
     text-decoration: none;
     transition: color 0.2s ease, transform 0.2s ease;
 }

 /* ---------- Keyboard focus ---------- */
 .site-footer a:focus-visible {
     outline: 2px solid var(--sf-white);
     outline-offset: 4px;
     border-radius: 6px;
 }

 /* ---------- Laptop: tighten ---------- */
 @media (max-width: 1199.98px) {
     .site-footer .site-footer__col {
         padding-left: 2rem;
     }

     .site-footer .site-footer__heading {
         font-size: 1.4rem;
     }

     .site-footer .site-footer__email {
         font-size: 0.9rem;
         gap: 0.6rem;
         padding: 0.7rem 0.85rem;
     }
 }

 /* ---------- Email fix: single line on desktop ---------- */
 @media (min-width: 992px) {
     .site-footer .site-footer__brand {
         width: 27%;
     }

     .site-footer .site-footer__col:nth-of-type(1) {
         width: 18%;
     }

     .site-footer .site-footer__col:nth-of-type(2) {
         width: 23%;
     }

     .site-footer .site-footer__col:nth-of-type(3) {
         width: 32%;
         padding-right: 0;
     }
 }

 @media (min-width: 992px) and (max-width: 1199.98px) {
     .site-footer .site-footer__email {
         font-size: 0.8rem;
         gap: 0.5rem;
         padding: 0.65rem 0.75rem;
     }

     .site-footer .site-footer__email .bi-arrow-right {
         display: none;
     }
 }

 /* ---------- Tablet: 2 columns ---------- */
 @media (max-width: 991.98px) {
     .site-footer .site-footer__top {
         padding: 3rem 0 2rem;
     }

     .site-footer .site-footer__brand {
         padding-right: 0;
         margin-bottom: 2.5rem;
     }

     .site-footer .site-footer__col {
         padding-left: 0;
         padding-right: 1rem;
         border-left: 0;
         margin-bottom: 2.25rem;
     }

     .site-footer .site-footer__top::before,
     .site-footer .site-footer__top::after {
         opacity: 0.5;
     }
 }

 /* ---------- Mobile: 1 column ---------- */
 @media (max-width: 767.98px) {
     .site-footer .site-footer__brand {
         text-align: center;
     }

     .site-footer .site-footer__about {
         margin-left: auto;
         margin-right: auto;
         font-size: 1rem;
     }

     .site-footer .site-footer__cta {
         display: flex;
         width: 100%;
     }

     .site-footer .site-footer__col {
         padding-right: 0;
     }

     .site-footer .site-footer__top::before,
     .site-footer .site-footer__top::after {
         display: none;
     }

     .site-footer .site-footer__bottom-inner {
         flex-direction: column;
         text-align: center;
     }

     .site-footer .site-footer__legal {
         flex-direction: column;
         gap: 0.5rem;
     }

     .site-footer .site-footer__legal li {
         padding: 0;
         margin: 0;
         border-left: 0;
     }
 }

 /* ---------- Reduced motion ---------- */
 @media (prefers-reduced-motion: reduce) {

     .site-footer *,
     .site-footer *::before,
     .site-footer *::after {
         transition: none !important;
     }

     .site-footer a:hover,
     .site-footer a:focus-visible {
         transform: none !important;
     }
 }

 /* ===== END SITE FOOTER ===== */

 /* ===== Predictor Step 1 – new design ===== */
 #predictor {
     border-radius: 16px;
     box-shadow: 0 18px 45px rgba(0, 40, 90, .25);
 }

 .p-head {
     background: linear-gradient(135deg, #0A4FA8, #0B5CC4);
     padding: 22px 26px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .p-head-left {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .p-head-icon {
     width: 52px;
     height: 52px;
     border-radius: 12px;
     background: #1768E8;
     color: #fff;
     display: grid;
     place-items: center;
     font-size: 1.6rem;
 }

 .p-head b {
     font-size: 1.6rem;
     font-weight: 700;
     line-height: 1.2;
 }

 .p-head small {
     color: #D6E6FA;
     font-size: .95rem;
 }

 .p-head-art {
     font-size: 2.6rem;
 }

 .p-body {
     padding: 22px 26px 20px;
 }

 /* Stepper */
 .steps {
     margin-bottom: 26px;
 }

 .st {
     font-size: .95rem;
     gap: 10px;
 }

 .st i {
     width: 40px;
     height: 40px;
     font-size: .95rem;
 }

 .st.on {
     color: #0B5CC4;
 }

 .st.on i {
     background: #0A4FA8;
     border-color: #0A4FA8;
 }

 .line {
     height: 2px;
     background: #D5E2F3;
     margin: 0 14px;
 }

 /* Title */
 .p1-title {
     font-size: 1.35rem;
     font-weight: 700;
     color: #0F1E3D;
     margin: 0 0 6px;
 }

 .p1-sub {
     font-size: .92rem;
     color: #7184A3;
     margin: 0 0 18px;
 }

 /* Score input box */
 .score-box {
     display: flex;
     align-items: center;
     gap: 14px;
     background: #F4F8FE;
     border: 1.5px solid #9CC0F2;
     border-radius: 14px;
     padding: 12px 18px 12px 14px;
     transition: border-color .2s, box-shadow .2s;
 }

 .score-box:focus-within {
     border-color: var(--blue);
     box-shadow: 0 0 0 4px rgba(0, 91, 170, .12);
 }

 .score-ico {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: #E6EFFB;
     color: #1768E8;
     display: grid;
     place-items: center;
     flex: none;
 }

 .score-box input {
     flex: 1;
     min-width: 0;
     border: 0;
     outline: 0;
     background: transparent;
     font-size: 14px;
     font-weight: 500;
     color: #0F1E3D;
     padding: 0;
     -moz-appearance: textfield;
 }

 .score-box input::-webkit-outer-spin-button,
 .score-box input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 .score-max {
     font-size: 1.5rem;
     color: #667A9A;
     border-left: 1px solid #D5E2F3;
     padding-left: 20px;
 }

 /* Status */
 .status {
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #EEF5FC;
     border: 1px solid #D9E5F2;
     border-radius: 12px;
     padding: 14px 18px;
     margin: 16px 0;
 }

 .status-l {
     display: flex;
     align-items: center;
     gap: 12px;
     color: var(--blue);
     font-weight: 700;
     font-size: 1.1rem;
 }

 .status-l i {
     font-size: 1.5rem;
 }

 .status-r {
     color: #667A9A;
     font-size: .85rem;
     font-weight: 400;
     border-left: 1px solid #C9D9EC;
     padding-left: 18px;
 }

 /* Continue button */
 #goNext {
     padding: 15px;
     font-size: 1.15rem;
     font-weight: 700;
     border-radius: 10px;
 }

 /* Disclaimer */
 .disc {
     display: flex;
     gap: 12px;
     align-items: flex-start;
     font-size: .88rem;
     color: #667A9A;
     margin-top: 18px;
     padding-top: 16px;
 }

 .disc i {
     font-size: 1.4rem;
     line-height: 1;
 }

 @media (max-width: 767px) {
     .p-head-art {
         display: none;
     }

     .p-head b {
         font-size: 1.3rem;
     }

     .steps .st span {
         display: inline;
     }

     /* mobile par bhi label dikhe */
     .st {
         font-size: .8rem;
         gap: 6px;
     }

     .st i {
         width: 32px;
         height: 32px;
     }

     .line {
         margin: 0 6px;
     }

     .score-box input {
         font-size: 1.7rem;
     }

     .status {
         flex-direction: column;
         align-items: flex-start;
         gap: 8px;
     }

     .status-r {
         border: 0;
         padding: 0;
     }
 }