body {
  margin: auto;
  font-family: Epilogue, sans-serif;
  width: 100%;
  /* border: 2px solid red;  */
  max-width: 1440px;   /
  /* overflow: scroll;   */
} 

/* div{
  border: 1px solid chartreuse;
}  */

.invalid-feedback{
  overflow: hidden;
}

.video{
  margin: auto;
}

select, option, label, input{
  overflow: hidden;
}

.hero-section {
  background-color: transparent;
  margin-top: 50px;
}
.hero-container {
  display: flex;
  /* max-width: 732px; */
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}

.features-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centers items when wrapping */
  align-items: center;
  align-items: flex-start;
  align-self: center;
  background: #4640de;
  gap: 20px;
  /* margin-top: 50px; */
}

.feature-box {
  width: 100%;
  
  height: 18rem;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  align-items: center;   
  gap: 32px;
  border-radius: 24px;
  border: 1px solid var(--Neutrals-20, #d6ddeb);
  background: var(--Neutrals-0, #fff);
  margin-bottom: 20px;
}

.feature-text {
  color: #333;
  text-align: center;
  font-family: Epilogue;
  font-size:  0.875rem; 
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 19.6px */
}

.feature-img {
  height: 48px;
  width: auto;
  display: block; /* Ensures the image is treated as a block element */
  margin-left: auto; /* Centers the image horizontally */
  margin-right: auto; /* Centers the image horizontally */
  
}

.mt-32 {
  margin-top: 32px;
}

h5 {
  color: #333;
  text-align: center;
  font-family: Epilogue;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 24px */
  text-transform: uppercase;
  padding: 0;
  margin-bottom: -20px;
}

.footer {
  display: flex;
  padding: 30px;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--Color-Black, #202430);
  color: white;
}

.top-container {
  background-image: url("/img/title-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
}

.title {
  color: #333;
  background-color: transparent;
  font-family: Epilogue;
  font-size: 3.375rem;
  font-style: normal;
  font-weight: 800;
  line-height: 120%; /* 64.8px */
  max-width: 45.75rem;
  /* min-width: 20.9375rem; */
}

.title-blue {
  color: #4640de;
  background-color: transparent;
  font-family: Epilogue;
  font-size: 3.375rem;
  font-style: normal;
  font-weight: 800;
  line-height: 120%;
}
.subtitle {
  color: #333;
  background-color: transparent;
  font-family: Epilogue;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 3rem */
  max-width: 45.75rem;
}

.logo-section {
  height: 90px;
  background-color: transparent;
}

.logo {
  padding-left: 20px;
  margin-bottom: 10px;
  height: 90px;
  width: auto;
}

.chico-photo {
  height: 500px;
  width: auto;
  object-fit: contain;
}

.btn-primary {
  --bs-btn-color: #333333;
  --bs-btn-bg: #ffd375;
  --bs-btn-border-color: #ffd375;
  --bs-btn-hover-color: #333333;
  --bs-btn-hover-bg: #ffbc2b;
  --bs-btn-hover-border-color: #ffbc2b;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ffbc2b;
  --bs-btn-active-border-color: #ffbc2b;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #ffd375;
  --bs-btn-disabled-border-color: #ffd375;

  border-radius: 25px;
  font-weight: 700;
}

.btn-start-now {
  width: 160px;
  color: #333;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 24px */
}

.btn-submit {
  width: 180px;
  color: #333;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 24px */
}


.why-chico-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: 10px;
  background: #fff;
  margin-top: 60px;
}

.how-works-section {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  margin-top: 120px;
}

.how-works-box {
  display: flex;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  border: 1px solid #d6ddeb;
  margin-top: 20px;
}

.success-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  margin-top: 120px;
}

.success-box {
  display: flex;
  padding: 10px 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  border: 1px solid #d6ddeb;
  background: #4640de;
  color: white;
  height: 16rem;
  overflow: visible;
}

.app-form-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 60px;
  background: #fff;
  /* margin-top: 120px; */
}

.app-subtitle {
  align-self: stretch;
  color: #333;
  font-family: Epilogue;
  font-size:1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 36px */
}

label {
  color: var(--Gray-700, #414651);
  font-family: Epilogue;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

.job-opportunities-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-top: 120px;
}

h3 {
  color: #4640de;
  font-family: Epilogue;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}
.job-box {
  display: flex;
  height: 168px;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex: 1 0 0;
  border-radius: 24px;
  border: 1px solid var(--Neutrals-20, #d6ddeb);
}

.stick-with-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  margin-top: 120px;
}

.yellow-box {
  display: flex;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: #ffdd6f;
}
.blue-box {
  display: flex;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: #4640de;
  color: white;
}

.follow-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
  margin-top: 80px;
}


.dropzone{
  border: 1px dashed #D5D7DA;
  max-width: 100%;
  box-sizing: border-box;
}
.dropzone .dz-clickable{
  border: 1px dashed #D5D7DA;
}

.dropzone .dz-error-message {
  word-wrap: break-word; /* In case an error message is super long */
}

.cookie-consent-banner {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  z-index: 1000;
}

.cookie-consent-banner a {
  color: #f1c40f;
}

.cookie-consent-banner button {
  margin-left: 10px;
}


.top-video-section{
  margin-top: 3rem;
}


/* Default (for larger screens) */
.features-section,
.steps-section,
.why-chico-section,  
.stick-with-section,
.follow-section,
.app-form-section
.job-opportunities-section {
  padding: 80px; /* Large padding for desktops */
}

/* Medium screens (tablets) */
@media (max-width: 992px) {
  .features-section,
  .hero-section,
  .steps-section,
  .why-chico-section,
  .stick-with-section,
  .app-form-section
  .follow-section,
  .job-opportunities-section {
    padding: 40px; /* Reduce padding for tablets */
  }
  .cookie-consent-banner {
    max-width: 90%;
    box-sizing: border-box; 
    word-wrap: break-word;
  }
}

/* Small screens (mobile) */
@media (max-width: 768px) {
  .features-section
  .steps-section,
  .why-chico-section,
  .stick-with-section,
  .follow-section,
  .app-form-section
  .job-opportunities-section {
    padding: 20px; /* Even smaller padding for mobile */
  }
  h1{
    font-size: 1.5rem;
  }
  h3{
    font-size: 1rem;
  }
  .hero-section {
    margin-left: 0;
    text-align: center;
    width: 100%;
  }
  .title {
    font-size: 1.25rem; /* Adjust for mobile */
    text-align: center;
  }
  .subtitle{
    font-size: 1rem;
  }
  .app-subtitle{
    font-size: 1rem;
  }
  .title-blue {
    font-size: 1.25rem;
  }

  .container {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .chico-photo {
    max-width: 80%;
    height: auto;
  }
  .top-video-section{
    width: 100%;
    height: 300px;
  }

  #chico-image{
    margin-bottom: 2rem;
  }
  .flag-icon{
    height: 32px;
  }
  .cookie-consent-banner {
    max-width: 90%;
    box-sizing: border-box; 
    word-wrap: break-word;
  }
}

/* Only for bigger screens */
@media (min-width: 992px) {
  .hero-section {
    margin-left: 100px;
  }
}