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

button {
  cursor: pointer;
}

.login-modal-disply-btn,#save-btn-reselect,
#login-form-submit-btn,
#forgot-pass-submit {
  background-color: #ef6307;
  color: #441606;
}

.login-modal-disply-btn:hover,
#login-form-submit-btn:hover,#save-btn-reselect:hover,
#forgot-pass-submit:hover {
  background-color: #fe7e11;
  color: #441606;
}

.eye-toggle-btn {
  color: #ef6307;
  border-color: #ef6307;
  transition: all 0.2s ease-in-out;
}

#forgot-pass,
#showHelp {
  color: #ef6307;

}

.eye-toggle-btn:hover {
  background-color: #fe7e11;
  color: #fff;
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}

#password {
  border-right: none;
}

#forgot-popup-overlay {
  z-index: 1055;
  backdrop-filter: blur(2px);
}

#forgot-popup {
  animation: fadeInScale 0.3s ease-in-out;
}

.btn-close:hover {
  color: red !important;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.hero-div {
  height: 90vh;
  /* background-color: #7e3210; */
  /* background-color: #CC7400; */
  background-color: #0e2a47;
  overflow: hidden;
  position: relative;
}

.hero-div>canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.hero-div>.gear {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  opacity: 0.1;
  pointer-events: none;
}

.hero-div>.gear>i {
  font-size: 400px;
  color: white;
  animation: rotateGear 60s linear infinite;
}

.hero-div>.content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  max-width: 1000px;
  padding: 0 20px;
  margin: 0px auto;
}

.hero-div>.content>h1 {
  font-size: 2.8rem;
  font-weight: bold;
  color: #aab8a5;
}

.hero-div>.content>p {
  font-size: 1.5rem;
  margin-top: 20px;
  color: #aab8a5;
  line-height: 1.5;
}

@keyframes rotateGear {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.hero-div>.content>div {
  text-align: left;
}

.hero-div>.content>h2,
.hero-div>.content>div label {
  color: #aab8a5;
}

.hero-div>.content>div #save-btn {
  background-color: #ff962e;
  border: none;
  font-weight: bold;
  margin: 1.5rem auto 0px;
  display: block;
  padding: 0.4rem 2rem;
  border-radius: 25px;
  color: #0e2a47;
  border: 2px solid #ff962e;
}

.hero-div>.content>div #save-btn:hover {
  border: 2px solid #ff962e;
  background-color: #0e2a47;
  color: #fe7e11;
}

.hero-div>.content>div select {
  min-width: 300px;
  font: 1.2rem;
  padding: 0.5rem;
}

.page-container .hub-card {
  transition: transform 0.2s;
  cursor: pointer;
  text-align: center;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 10px 0;
}

.page-container .hub-card h4 {

  color: #441606;
}

.page-container .hub-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid #fe7e11;
}

.page-container .hub-card>.hub-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.page-container>.container>h3,
.page-container>.container>.row+h3 {
  margin-top: 30px;
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

#summary-statement h2,
#summary-statement p {
  color: #441606;
}

#summary-statement {
  background-color: #ffaa54;
}

@media (max-width: 480px) {
  .hero-div{
    height: unset;

  }
  .hero-div>.content>h1{
    margin-top: 1rem;
  }
  .hero-div>.content>div #save-btn{
    
  margin: 1.5rem auto 1rem auto;
  }
}