:root {
    --background: #ffffff;
    --foreground: hsl(222.2, 84%, 4.9%);
    --card: #ffffff;
    --card-foreground: hsl(222.2, 84%, 4.9%);
    --popover: #ffffff;
    --popover-foreground: hsl(222.2, 84%, 4.9%);
    --primary: hsl(222.2, 47.4%, 11.2%);
    --primary-foreground: hsl(210, 40%, 98%);
    --secondary: hsl(210, 40%, 96.1%);
    --secondary-foreground: hsl(222.2, 47.4%, 11.2%);
    --muted: hsl(210, 40%, 96.1%);
    --muted-foreground: hsl(215.4, 16.3%, 46.9%);
    --accent: hsl(210, 40%, 96.1%);
    --accent-foreground: hsl(222.2, 47.4%, 11.2%);
    --destructive: hsl(0, 84.2%, 60.2%);
    --destructive-foreground: hsl(210, 40%, 98%);
    --border: hsl(214.3, 31.8%, 91.4%);
    --input: hsl(214.3, 31.8%, 91.4%);
    --ring: hsl(222.2, 84%, 4.9%);
    --radius: 0.5rem;
 
    --sidebar-background: hsl(0, 0%, 98%);
    --sidebar-foreground: hsl(240, 5.3%, 26.1%);
    --sidebar-primary: hsl(240, 5.9%, 10%);
    --sidebar-primary-foreground: hsl(0, 0%, 98%);
    --sidebar-accent: hsl(240, 4.8%, 95.9%);
    --sidebar-accent-foreground: hsl(240, 5.9%, 10%);
    --sidebar-border: hsl(220, 13%, 91%);
    --sidebar-ring: hsl(217.2, 91.2%, 59.8%);
  }
 
  body {
    background-color: var(--background);
    color: var(--foreground);
    border-color: var(--border);
  }
 body { font-family: 'Segoe UI', sans-serif;}
    .bg-blue-900 { background-color: #1e3a8a !important; }
    .text-blue-900 { color: #1e3a8a !important; }
    .text-blue-200 { color: #bfdbfe; }
    .text-blue-100 { color: rgb(220 234 254) !important; }
    .bg-blue-50 { background-color: #eff6ff !important;; }
    .bg-blue-100 { background-color: #dbeafe; }
    .border-blue-100 { border-color: #dbeafe !important; border: 1px solid }
    .border-blue-900 { border-color: #1e3a8a !important; border: 1px solid;}
    .border-blue-200 { border-color: #bfdbfe !important; border: 1px solid;}
    .btn-blue { background-color: #1e3a8a; color: white; }
    .btn-blue:hover { background-color: #1c357a; }
 
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    border-color: var(--border);
  }
 
  /* App-specific styles */
 #root {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
 }
 /* 
 .logo {
   height: 6em;
   padding: 1.5em;
   will-change: filter;
   transition: filter 300ms;
 }
 
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 } */
 
 /* .logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
 } */
 
 /* @keyframes logo-spin {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
 } */
 
 @media (prefers-reduced-motion: no-preference) {
   a:nth-of-type(2) .logo {
     animation: logo-spin infinite 20s linear;
   }
 }
 
 .card {
   padding: 2em;
   background-color: var(--card);
   color: var(--card-foreground);
   border-radius: var(--radius);
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }
 
 .read-the-docs {
   color: #888;
 }
 .etaSubmitform {
   background-color: #ffffff; 
   border: 1px solid #dbeafe;
   border-radius: 0.5rem; 
   box-shadow:
     0 0 #0000,
     0 0 #0000, 
     0 10px 15px -3px rgba(0, 0, 0, 0.1),  
     0 4px 6px -4px rgba(0, 0, 0, 0.1);   
 }
 .subtextContent {
     color: hsl(215.4 16.3% 46.9%);
     font-size: 0.875rem;
     line-height: 1.25rem;
 }
 .topicons {
     background: rgb(219 234 254);
     width: 64px;
     height: 64px;
     border-radius: 50%;
     margin: auto;
     font-size: 37px;
     margin-bottom: 20px;
 }
 
 .topicons svg {
     width: 30px;
     height: 30px;
 }
 .numsteps {
     background: rgb(30 58 138);
     width: 48px;
     height: 48px;
     border-radius: 50%;
     margin: auto;
     font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 20px;
     color: #fff;
     padding-top: 10px;
 }
 .text-muted {
     font-size: 0.875rem;
     line-height: 1.25rem;
 }
 .listItems{
     text-align: initial;
     line-height: 1.5rem;
 }
 .etaImpCard {
     height: 100% !important;
 }
 .etaImpCard > .etaImpCardHeader {
     display: inline-flex;
     margin: auto;
     border-top-left-radius: 24px;
     border-bottom-left-radius: 24px;
     border-top-right-radius: 24px;
     border-bottom-right-radius: 24px;
     padding-right: 16px;
     margin-top: 0px;
 }
 .etaImpCardHeader > span {
     margin-top: auto;
     margin-bottom: auto;
 }
 .etaImpCard .numsteps {
     margin-right: 15px !important;
     margin-bottom: 0px;
 }
 ul.numericlist {
     list-style: auto;
 }
 ul {
     line-height: 2rem;
 }
 table#featuresTable th,table#featuresTable td {
     border: 1px solid #dbeafe;
     padding: 12px 10px;
 }
 
 table#featuresTable th {
     background: #1e3a8a;
     color: #fff;
 }
 .help-section {
     padding: 20px;
     text-align: center;
 }
 .key_benifits {
     line-height: 2;
 }
 .highlight {
     height: 100% !important;
 }
 .hightlightheader {
     background: #eff6ff;
     padding: 24px;
     border-bottom: 1px solid #dbeafe;
 }
 
 .highlight div, .highlight p {
     padding: 24px;
 }
 form.contactform {
   background-color: #ffffff; 
   color: #1e3a8a; 
   border: 1px solid #dbeafe;
   border-radius: 0.5rem; 
   box-shadow:
     0 0 #0000,
     0 0 #0000, 
     0 10px 15px -3px rgba(0, 0, 0, 0.1),  
     0 4px 6px -4px rgba(0, 0, 0, 0.1);   
 }
 .modifySection {
     height: 100%;
     background: #eff6ff;
     padding: 30px;
 }
 /* muktai changes */
 table#FAQtable th,table#FAQtable td {
     border: 1px solid #dbeafe;
     padding: 10px 10px;
 }
 table#FAQtable th {
     background: #1e3a8a;
     color: #fff;
     text-align: center;
 }
 .link-item {
   display: inline-flex;
   align-items: center;
   text-decoration: line;
   font-size: 15px;
   padding: 5px 12px; 
   
 }
 .link-item:hover {
   background-color: #f0f8ff;
   color: #005fa3;
 }
 
 .col-2.ml {
     text-align: center;
     margin: auto;
 }
 
 .traveler-box{
     border-radius:15px;
 }
 
 
 .side-content fieldset {
     border: 1px solid;
     padding: 20px;
     border-radius: 15px;
 }
 
 .side-content fieldset legend {
     float: none;
     padding: 0 0px;
     margin-bottom: 0;
     width: auto;
     border-radius: 5px;
     padding: 0.3rem 1rem;
     line-height: 1.3;
     font-size: 1rem;
 }
 #checkoutForm fieldset, #paymentcardDetails fieldset {
     border: 1px solid #dee2e6;
     padding: 20px;
     border-radius: 15px;
 }
 
 #checkoutForm fieldset legend, #paymentcardDetails fieldset legend {
     float: none;
     padding: 0 0px;
     margin-bottom: 0;
     width: auto;
     border-radius: 5px;
     padding: 0.3rem 1rem;
     line-height: 1.3;
     font-size: 1rem;
     color: #000;
     font-weight: 400;
 }
 .bg-grey{
     background: #e2e2e257;
     border: 1px solid #dee2e6;
 }
 .addtrav{
     border: none;
    display: block;
     background-color: lightblue;
     border-radius: 10px;
     padding: 9px;  
 }
 .stpicons > i {
     font-size: 1.5rem;
 }
 
 .stpicons {
     margin-top: auto;
     margin-bottom: auto;
     background: #eff6ff;
     padding: 8px 10px;
     border: 1px solid #dbeafe;
     border-radius: 50%;
     text-align: center;
 }
 button#adddtravelerbtn {
     background: #119e11;
     color: #fff;
 }
 
 div#removetraveler {
     border-top: 1px solid #dee2e6;
     text-align: center;
     padding: 10px;
 }
 .traveler-box-header {
     padding: 14px;
     background: #e2e2e257;
     border-top-left-radius: 0.375rem;
     border-top-right-radius: 0.375rem;
 }
 #step2Form .side-content {
     border-radius: 6px;
     margin-top: 18px;
 }
 /* .card-option {
     display: block;
     border: 1px solid #dee2e6;
     border-radius: 0.5rem;
     background-color: #fff;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     position: relative;
   } 
 
   .card-option:hover {
     border-color: #dee2e6;
     background-color: #f1f9ff;
   }
 
   .card-option input[type="radio"] {
     position: absolute;
     opacity: 0;
     pointer-events: none;
   }
   .card-option > div{
        padding: 16px;
   }
   .card-option input[type="radio"]:checked {
     background-color: #eaf6ff;
     border: 2px solid #bfdbfe;
     border-radius: 0.5rem;
     padding: 1rem;
   }
   .card-option input[type="radio"]:checked ~ div {
     background-color: #eaf6ff;
      border: 1px solid #bfdbfe;
     padding: 16px !important;
     border-radius: 0.5rem;
   }*/
   
   .card-option {
   display: block;
   border: 1px solid #dce5ea;
   border-radius: 10px;
   background-color: #fff;
   cursor: pointer;
   transition: all 0.15s ease-in-out;
   position: relative;
 }
 
 .card-option:hover {
   background-color: #f6fbff;
 }
 
 .card-option input[type="radio"] {
   position: absolute;
   left: 14px;
   top: 50%;
   transform: translateY(-50%);
   opacity: 1;
   pointer-events: auto;
   accent-color: #1e40ff;
   clip: auto;
 }
 
 .card-option > div {
   padding: 12px 14px 12px 44px; /* left space for radio */
 }
 
 .card-option .fs-6 {
   font-size: 14px !important;
   font-weight: 600;
   margin-bottom: 2px;
 }
 
 .card-option .text-muted {
   font-size: 13px;
 }
 
 .card-option input[type="radio"]:checked ~ div {
   background-color: #f2f7ff;
   border: 1px solid #1e40ff;
   border-radius: 10px;
 }
 
 #step3details .d-grid {
   gap: 8px !important;
 }
   a:hover {
       color: #fff;
   }
   #btnPreviousSidebar:hover{
       background: #fff;
   }
 @media (max-width: 768px) {
     button#adddtravelerbtn {
         margin: auto;
     }
     .imageContainer span:first-child > img{
         width: 80px !important;
     }
     .imageContainer img:last-child{
         width: 60px !important;
     }
     #btnPreviousSidebar, #stepBtn, #paymentBtn, #startAppBtn{
         /* width: 100%; */
     }
     #startAppBtn{
         width: 100% !important;
     }
     #step2Form .side-content {
         margin-top: 30px;
     }
     #checkoutForm .side-content {
         margin-top: 30px;
     }
     .card-image > img {
         height: 41px !important;
         margin-bottom: 15px;
     }
     .card-image {
         display: flex;
         justify-content: center;
     }
     #trustpilot{
         width: 200px;
     }
     .functinalityTable {
         overflow: scroll;
     }
     .cookiesCheckobes{
         text-align: left !important;
     }
       button.Hero-Section-application-btn {
         margin: 10px 0;
         font-size: 14px;
         padding: 10px 20px;
     }
     
     .etaSubmitform {
       
       border-radius: 0; 
       box-shadow: none;   
     }
     
 /* 	#checkoutForm fieldset, #paymentcardDetails fieldset {
     border: 0px solid;
     padding: 5px;
     border-radius: 0px;
 } */
 }
 .rating-start-box {
     margin-right: 3px;
     gap: 4px;
     margin: auto;
    
 }
 #spanId{
     color:red;
 } 
 button#profileBtn {
     font-size: 18px !important;
     padding: 0px;
 }
 .dropdown-item:hover {
     color: #1e3a8a !important;
     background: #edf2ff !important;
 }
 
  #cookie-banner {
   position: fixed;
   bottom: 0;
   width: 100%;
   background-color: #1e1e1e;
   color: white;
   padding: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 9999 !important; /* force it to stay on top */
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
 }
 
   .cookie-buttons button {
     margin-left: 10px;
     padding: 10px 15px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
   }
 
   .accept-btn {
     background-color: #6fcf97;
     color: #000;
   }
 
   .decline-btn {
     background-color: transparent;
     border: 1px solid #fff;
     color: #fff;
   }
 
   .settings-btn {
     background: none;
     border: none;
     color: #999;
     text-decoration: underline;
     cursor: pointer;
   }
 
   #cookie-modal {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: #fff;
     color: #000;
     padding: 30px;
     border-radius: 8px;
     z-index: 2000;
     display: none;
     width: 90%;
     max-width: 500px;
   }
 
   #cookie-modal h3 {
     margin-top: 0;
   }
 
   #cookie-overlay {
     position: fixed;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background: rgba(0, 0, 0, 0.7);
     z-index: 1500;
     display: none;
   }
 
   #close-modal {
     float: right;
     cursor: pointer;
     color: #888;
     font-size: 18px;
   }
   #cookie-banner p{
       font-size: 0.875rem;
   }
   button.btn.acceptCookies {
     background: #5fbc5f;
     color: white;
     font-weight: 600;
 }
 div#cookie-banner .form-check-label {
     font-size: 14px;
     font-weight: 500;
 }
 div#cookieModal a:hover{
     color : #0d6efd !important;
 }
 div#cookieModalLabel {
     font-size: 22px;
     font-weight: 500;
 }
 #cookieModal p{
     font-size: 1rem !important;
 }
 button#declaration-tab.active ,button#about-tab.active {
     background: #f3f7ff !important;
     border: none;
 }
 .nav-item:has(> #declaration-tab.nav-link.active), .nav-item:has(> #about-tab.nav-link.active) {
   background-color: #f3f7ff;
 }
 #cookieTabContent{
     background: #f3f7ff;
     padding: 24px;
 }
 div#cookieTabContent h5 {
     font-size: 16px;
     color: #3fb6ee;
 }
 div#cookieModal a{
     color : #3fb6ee !important;
 }
 button#about-tab, #declaration-tab {
     color: #000;
 }
 .cookiesBox {
     border-bottom: 1px solid #cae8f4;
     margin-bottom: 22px !important;
 }
 .cookiesTable {
     height: 300px;
     overflow-y: scroll;
     margin-bottom: 12px;
 }
 .cookiesTable th, .cookiesTable td {
     background: #fff;
     font-size: 14px;
     padding: 8px 11px;
 }
 .functinalityTable th, .functinalityTable td{
     background: #fff;
     font-size: 14px;
     padding: 8px 11px;
     
 }
 .cookiesTable tr > td:first-child ,.functinalityTable tr > td:first-child {
     color: #157915;
 }
 .functinalityTable th, .cookiesTable th {
     text-wrap: nowrap;
 }
 #cookieTab .nav-link:hover {
   border-color: transparent;
   background-color: transparent;
   box-shadow: none;
 }
 
 #cookieTab .nav-link:focus {
   outline: none;
   box-shadow: none;
   border-color: transparent;
 }
 div#cookieTabContent p {
     margin-bottom: 6px;
 }
 button.Hero-Section-application-btn {
     background: hsl(222 85% 23%) !important;
     color: white;
     font-size: 14px;
        padding: 10px 28px;
     border-radius: 0.5rem;
     margin-right: 10px;
     border: solid 1px #000000;
 }
 button.Hero-Section-application-btn:hover {
     background: #011f7f;
     background: black;
     color: white;
     border: solid 1px #000000;
     
 }
 button.Hero-Section-application-btn {
     margin-top: 30px;
 }