* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
      font-family: 'Segoe UI', sans-serif;
      background-color: #ffffff !important;
    }

    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      padding: 20px;
      overflow: hidden;
    }

    .content {
      width: 100%;
      max-width: 400px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .logo svg {
      width: 60px;
      height: 60px;
      margin-bottom: 20px;
    }

    h1 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }

    h1 span {
      font-weight: bold;
    }


  .hero-img {
  width: 100%;
  max-height: 60vh; /* Limit height relative to screen */
  height: auto;
  object-fit: contain; /* Ensures it scales nicely */
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease-in-out;
    }


    .dots {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
    }

    .dot {
      width: 8px;
      height: 8px;
      background-color: #ddd;
      border-radius: 50%;
      margin: 0 5px;
      transition: background 0.3s;
      cursor: pointer;
    }

    .dot.active {
    background-color: #4A90E2;
    }

    .get-started {
      background-color: #4A90E2;
      color: white;
      padding: 12px 0;
      border: none;
      border-radius: 25px;
      width: 80%;
      font-size: 16px;
      margin-bottom: 10px;
      cursor: pointer;
    }
	  
	  #next-btn {
		  background-color: #4A90E2 !important;
      color: white;
	  }

    .signin {
      font-size: 14px;
      color: #555;
    }

    .signin a {
      color: #4A90E2;
      text-decoration: none;
      font-weight: 500;
    }
    
    
    
    /* Site A Specifics */
    
    
    
    /* Site B Specifics */
    
    
    /* Site C Specifics */
    
    
    /*//////////////////////////////////////
    // Site D Specifics 
    /////////////////////////////////////*/

    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      padding: 20px;
      overflow: hidden;
    }

    .content {
      width: 100%;
      max-width: 400px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .logo svg {
      width: 60px;
      height: 60px;
      margin-bottom: 20px;
    }

    h1 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }

    h1 span {
      font-weight: bold;
    }


  .hero-img {
  width: 100%;
  max-height: 60vh; /* Limit height relative to screen */
  height: auto;
  object-fit: contain; /* Ensures it scales nicely */
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease-in-out;
    }


    .dots-d {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
    }

    .dot-d {
      width: 8px;
      height: 8px;
      background-color: #ddd;
      border-radius: 50%;
      margin: 0 5px;
      transition: background 0.3s;
      cursor: pointer;
    }

    .dot-d.active {
    background-color: #79a471;
    }

    .get-started-d {
      background-color: #79a471;
      color: white;
      padding: 12px 0;
      border: none;
      border-radius: 25px;
      width: 80%;
      font-size: 16px;
      margin-bottom: 10px;
      cursor: pointer;
    }
	  
	  #next-btn-d {
		  background-color: #79a471 !important;
      color: white;
	  }

    .signin-d {
      font-size: 14px;
      color: #555;
    }

    .signin-d a {
      color: #79a471;
      text-decoration: none;
      font-weight: 500;
    }
    
    
    
    
    
    
    
    
    
    
    
    .sticky-header .site-content {
        padding-top: 0px !important;
}