/* Custom Font */
 @import url(https://fonts.googleapis.com/css?family=Montserrat);

/* Root Variables */
:root {
    --primary-bg: #000000;
    --text: #cdcdcd;
    --box-shadow: rgba(0, 0, 0, 0.15);
    --shiny-cta-bg: black;
    --shiny-cta-bg-subtle: #FF5E00; /* A warm yellow */
    --shiny-cta-fg: #ffffff; /* White for text */
    --shiny-cta-highlight: black; /* A bright blue */
    --shiny-cta-highlight-subtle: #6FA3EF; /* A vibrant green */
  }
  
  /* Global Styles */
  body {
    background-color:#ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    margin: 0; /* Remove default margin */
    overflow-x: hidden;
    padding: 0; /* Horizontal padding */
    height: 100vh; /* Ensure body takes full height */
    position: relative;
  }
  .fixed-top{
    position: static !important;
  }

  .error-message {
    font-size: 0.875em;
    color: #dc3545; /* Bootstrap danger color */
}

  .navbar {
    background-color: #000000;
    transition: background-color ease-in-out;
    border-bottom: 0.2px solid rgba(255, 255, 255, 0.2);
    padding-top: 1%;
    padding-bottom: 1%;
  }
  
  @media only screen and (max-width: 750px) {
    .navbar {
      background-color: #000000 !important;
      color: white !important;
    }
    #brandName {
      color: white !important;
    }
    .navbar-nav .nav-link {
      color: white !important;
    }
  }
  
  #brandName {
    color: white; /* Default color for desktop */
    font-family: 'Poppins', sans-serif;
    font-size: 185%;
    line-height: 24px;
  }
  
  .nav-link {
    color: white; /* Default link color for desktop */
    font-family: 'Poppins', sans-serif;
    transition: font-size 1s, color 1s;
  }
  
  .nav-link:hover {
    color: #7C7C7C; /* Hover effect */
    font-size: 102%;
  }
  .d-none.d-lg-flex .nav-link {
    margin-right: 20px; /* Adjust the value as needed for spacing */
    color: white;
  }
  
  .d-none.d-lg-flex .nav-link:last-child {
    margin-right: 0; /* Remove margin from the last link */
  }
  
  /* Hide direct links on mobile */
  @media (max-width: 750px) {
    .d-lg-flex {
      display: none; /* Hide on mobile */
    }
  }
  
 /* Form Styles */
 #msform {
     text-align: center;
     position: relative;
     margin-top: 30px;
 }

 #msform fieldset {
     background: white;
     border: 0 none;
     border-radius: 0px;
     box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
     padding: 20px 30px;
     box-sizing: border-box;
     width: 80%;
     margin: 0 10%;
     position: relative;
 }

 /* Hide all except first fieldset */
 #msform fieldset:not(:first-of-type) {
     display: none;
 }

 /* Inputs */
 #msform input, #msform textarea, #msform select {
     padding: 15px;
     border: 1px solid #ccc;
     border-radius: 0px;
     margin-bottom: 10px;
     width: 100%;
     box-sizing: border-box;
     font-family: 'Montserrat', sans-serif;
     color: #2C3E50;
     font-size: 13px;
 }

 #msform input:focus, #msform textarea:focus, #msform select:focus {
     box-shadow: 0 0 5px #725bdc;
     border: 1px solid #725bdc;
     outline-width: 0;
     transition: All 0.5s ease-in;
 }

 /* Buttons */
 #msform .action-button {
     width: 100px;
     height: 40px;
     background: #725bdc;
     font-weight: bold;
     color: white;
     border: 0 none;
     border-radius: 25px;
     cursor: pointer;
     padding: 10px 5px;
     margin: 10px 5px;
 }

 #msform .action-button:hover, #msform .action-button:focus {
     box-shadow: 0 0 0 2px white, 0 0 0 3px #725bdc;
     transform: scale(1.05);
     transition: transform 0.3s ease;
 }

 #msform .action-button-previous {
     width: 100px;
     background: #C5C5F1;
     font-weight: bold;
     color: white;
     border: 0 none;
     border-radius: 25px;
     cursor: pointer;
     padding: 10px 5px;
     margin: 10px 5px;
 }

 #msform .action-button-previous:hover, #msform .action-button-previous:focus {
     box-shadow: 0 0 0 2px white, 0 0 0 3px #C5C5F1;
     transform: scale(1.05);
     transition: transform 0.3s ease;
 }

 /* Headings */
 .fs-title {
     font-size: 18px;
     text-transform: uppercase;
     color: #2C3E50;
     margin-bottom: 10px;
     letter-spacing: 2px;
     font-weight: bold;
 }

 .fs-subtitle {
     font-weight: normal;
     font-size: 13px;
     color: #666;
     margin-bottom: 20px;
 }

 /* Progressbar */
 #progressbar {
     margin-bottom: 30px;
     overflow: hidden;
     counter-reset: step;
 }

 #progressbar li {
     list-style-type: none;
     color: #725bdc;
     text-transform: uppercase;
     font-size: 9px;
     width: 33.33%;
     float: left;
     position: relative;
     letter-spacing: 1px;
     transition: all 0.3s ease-in-out;
 }

 #progressbar li:before {
     content: counter(step);
     counter-increment: step;
     width: 24px;
     height: 24px;
     line-height: 26px;
     display: block;
     font-size: 12px;
     color: #333;
     background: white;
     border-radius: 25px;
     margin: 0 auto 10px auto;
 }

 #progressbar li:after {
     content: '';
     width: 100%;
     height: 2px;
     background: white;
     position: absolute;
     left: -50%;
     top: 9px;
     z-index: -1;
 }

 #progressbar li:first-child:after {
     content: none;
 }

 #progressbar li.active:before, #progressbar li.active:after {
     background: #725bdc;
     color: white;
 }

 /* Not relevant to this form */
 .dme_link {
     margin-top: 30px;
     text-align: center;
 }

 .dme_link a {
     background: #FFF;
     font-weight: bold;
     color: #725bdc;
     border: 0 none;
     border-radius: 25px;
     cursor: pointer;
     padding: 5px 25px;
     font-size: 12px;
 }

 .dme_link a:hover, .dme_link a:focus {
     background: #C5C5F1;
     text-decoration: none;
 }

 /* Media Queries for Responsive Design */
 @media screen and (max-width: 768px) {
     #msform fieldset {
         width: 90%;
         margin: 0 5%;
     }

     #msform .action-button, #msform .action-button-previous {
         width: 100%;
     }
 }