:root {
       --primary-color: #2c5aa0;
       --secondary-color: #34495e;
       --accent-color: #3498db;
       --success-color: #27ae60;
       --light-bg: #f8f9fa;
       --dark-text: #2c3e50;
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       /* overflow: hidden; */
       overflow-x: hidden;
   }

   body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background-color: var(--light-bg);
       color: var(--dark-text);
       position: relative;
   }

   /* Watermark */
   .watermark {
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) rotate(-45deg);
       font-size: 8rem;
       color: rgba(44, 90, 160, 0.05);
       font-weight: bold;
       z-index: 9999;
       pointer-events: none;
       user-select: none;
       white-space: nowrap;
   }

   /* Navbar */
   .navbar {
       background-color: white;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       padding: 1rem 0;
       position: relative;
       z-index: 10;
   }

   .navbar-brand {
       font-weight: bold;
       color: var(--primary-color) !important;
       font-size: 1.5rem;
   }

   .navbar-nav .nav-link {
       color: var(--secondary-color) !important;
       font-weight: 500;
       margin: 0 10px;
       transition: color 0.3s ease;
   }

   .navbar-nav .nav-link:hover {
       color: var(--primary-color) !important;
   }

   /* Domain Banner */
   .domain-banner {
       /* background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); */
       color: var(--primary-color) !important;
       text-align: center;
       padding: 1rem;
       margin-bottom: 2rem;
   }

   /* Progress Steps */
   .progress-container {
       background: white;
       padding: 2rem;
       border-radius: 10px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
       margin-bottom: 2rem;
       position: relative;
       z-index: 5;
   }

   .step-indicator {
       display: flex;
       justify-content: space-between;
       margin-bottom: 2rem;
       position: relative;
   }

   .step {
       flex: 1;
       text-align: center;
       position: relative;
   }

   .step-number {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: #e9ecef;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 10px;
       font-weight: bold;
       transition: all 0.3s ease;
   }

   .step.active .step-number {
       background: var(--primary-color);
       color: white;
   }

   .step.completed .step-number {
       background: var(--success-color);
       color: white;
   }

   .step-line {
       position: absolute;
       top: 20px;
       left: 50%;
       width: 100%;
       height: 2px;
       background: #e9ecef;
       z-index: -1;
   }

   .step:last-child .step-line {
       display: none;
   }

   /* Form Container */
   .form-container {
       background: white;
       padding: 2.5rem;
       border-radius: 15px;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
       position: relative;
       z-index: 5;
       overflow: hidden;
   }

   .form-section {
       display: none;
       animation: fadeIn 0.5s ease-in;
   }

   .form-section.active {
       display: block;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

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

   .form-label {
       font-weight: 600;
       color: var(--secondary-color);
       margin-bottom: 8px;
   }


   .form-control,
   .form-select {
       border: 2px solid #e9ecef;
       border-radius: 8px;
       padding: 12px 15px;
       transition: all 0.3s ease;
       font-size: 16px;
   }

   .form-control:focus,
   .form-select:focus {
       border-color: var(--primary-color);
       box-shadow: 0 0 0 0.2rem rgba(44, 90, 160, 0.25);
   }

   .required {
       color: #e74c3c;
   }

   /* Email Verification */
   .email-verify-btn {
       background: var(--accent-color);
       border: none;
       color: white;
       padding: 8px 15px;
       border-radius: 5px;
       font-size: 14px;
       transition: all 0.3s ease;
   }

   .email-verify-btn:hover {
       background: #2980b9;
   }

   .verified {
       color: var(--success-color);
   }

   /* OTP Input Styling */
   .otp-input-container {
       display: flex;
       gap: 15px;
   }

   .otp-input {
       width: 60px;
       height: 70px;
       border: 2px solid #dee2e6;
       border-radius: 10px;
       font-size: 24px;
       transition: all 0.3s ease;
   }

   .otp-input:focus {
       border-color: #0d6efd;
       box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
       transform: translateY(-2px);
   }

   .otp-input.filled {
       border-color: #198754;
       background-color: rgba(25, 135, 84, 0.05);
   }



   /* Timer Styling */
   .timer-container {
       background-color: #f8f9fa;
       padding: 8px 15px;
       border-radius: 20px;
       display: inline-flex;
       align-items: center;
       gap: 5px;
   }

   #timer {
       font-size: 1.1rem;
   }

   .timer-expired {
       color: #dc3545 !important;
   }

   /* Resend Link */
   #resendOtp {
       cursor: pointer;
       color: #0d6efd;
       text-decoration: none;
   }

   #resendOtp:hover {
       text-decoration: underline;
   }

   .verified {
       transition: all 0.3s ease-in-out;
       box-shadow: 0 0 10px rgba(40, 167, 69, 0.4);
       /* subtle green glow */
   }


   /* Add these styles to your existing CSS */
   .modal-header.bg-warning {
       background-color: #ffc107;
   }

   #verifyNowBtn {
       min-width: 120px;
   }

   /* Animation for the warning icon */
   .fa-exclamation-triangle {
       animation: pulse 1.5s infinite;
   }

   @keyframes pulse {
       0% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.1);
       }

       100% {
           transform: scale(1);
       }
   }

   /* Animations */
   @keyframes pulse {
       0% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.05);
       }

       100% {
           transform: scale(1);
       }
   }

   .pulse-animation {
       animation: pulse 2s infinite;
   }

   /* Password Toggle */
   .password-toggle {
       position: absolute;
       right: 15px;
       top: 50%;
       transform: translateY(-50%);
       cursor: pointer;
       color: #6c757d;
   }

   /* Buttons */
   .btn-primary-custom {
       background: var(--primary-color);
       border: none;
       padding: 12px 30px;
       border-radius: 8px;
       font-weight: 600;
       transition: all 0.3s ease;
   }

   .btn-primary-custom:hover {
       background: #1e3d72;
       transform: translateY(-2px);
   }

   .btn-secondary-custom {
       background: #6c757d;
       border: none;
       padding: 12px 30px;
       border-radius: 8px;
       font-weight: 600;
       color: white;
       transition: all 0.3s ease;
   }

   .btn-secondary-custom:hover {
       background: #5a6268;
       transform: translateY(-2px);
   }

   /* File Upload */
   .file-upload-area {
       border: 2px dashed #ccc;
       border-radius: 10px;
       padding: 3rem;
       text-align: center;
       transition: all 0.3s ease;
       cursor: pointer;
   }

   .file-upload-area:hover {
       border-color: var(--primary-color);
       background: rgba(44, 90, 160, 0.05);
   }

   .file-upload-area.dragover {
       border-color: var(--primary-color);
       background: rgba(44, 90, 160, 0.1);
   }

   /* Review Section */
   .review-card {
       background: #f8f9fa;
       border-radius: 10px;
       padding: 1.5rem;
       margin-bottom: 1rem;
       border-left: 4px solid var(--primary-color);
   }

   .loading-overlay {
       position: fixed;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       width: 100%;
       height: 100%;
       background: rgba(255, 255, 255, 0.95);
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 9999;
       display: none;
   }

   .loading-spinner {
       width: 60px;
       height: 60px;
       border: 5px solid #f3f3f3;
       border-top: 5px solid var(--primary-color);
       /* Or use #3498db */
       border-radius: 50%;
       animation: spin 1s linear infinite;
       position: relative;
       margin: auto;
   }

   .spinner-logo {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) rotate(90deg);
       /* This cancels out parent rotation visually */
       animation: counter-spin 1s linear infinite;
       pointer-events: none;
   }

   @keyframes spin {
       0% {
           transform: rotate(0deg);
       }

       100% {
           transform: rotate(360deg);
       }
   }

   @keyframes counter-spin {
       0% {
           transform: translate(-50%, -50%) rotate(0deg);
       }

       100% {
           transform: translate(-50%, -50%) rotate(-360deg);
       }
   }


   /* Responsive */
   @media (max-width: 768px) {
       .watermark {
           font-size: 5rem;
       }

       .step-indicator {
           flex-wrap: wrap;
       }

       .step {
           flex-basis: 20%;
           margin-bottom: 1rem;
       }

       .form-container {
           padding: 1.5rem;
       }

       .navbar-nav {
           text-align: center;
       }
   }

   @media (max-width: 576px) {
       .step {
           flex-basis: 50%;
       }

       .step-number {
           width: 35px;
           height: 35px;
           font-size: 14px;
       }
   }