#body {
  background-color: var(--easynext-blue);
}


/******
  Titles and texts
*******/

.heading-container {
  margin-bottom: 2rem;
}

.heading-container h1 {
  color: var(--white);
}

.send-btn,
.form-check-label,
#contact_email_help,
.contact-input,
.contact-input::placeholder,
option
{
  color: var(--white);
}

/*****
  HERO
*****/

.contact {
  margin: 120px 0;
}

.contact,
.cham-ctr {
  position: relative;
}


.bg-circle {
  position: absolute;
  z-index: -10;
  left: -10%;
  height: auto;
}

.cham-1 {
  position: relative;
  width: 100%;
  height: auto;
}

.form-ctr {
  padding: 32px 50px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  
}

.heading_container {
  margin-bottom: 3rem;
}

.contact-input {
  background-color: rgba(255,255,255, 0.3);
}

.email-input > div {
  flex-direction: column;
}

#contact_email_help {
  opacity: 0.7;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.send-btn {
  height: 64px;
  background-color: var(--proactive-blue);
  width: 100%;
  font-weight: bold;
}

.send-btn:hover {
  border: 2px solid var(--white);
  color: var(--white);
}

/* Mobile */
@media screen and (max-width: 429px) {
  /* hero */
  .bg-circle {
    top: 5%;
    width: 90%;
  }
  
  .cham-1 {
    width: 100%;
    top: 10%;
  }

  .form-ctr {
    margin-top: 5rem;
  }
}

/* Tablett */
@media screen and (min-width: 430px) and (max-width: 768px) {
  
  .heading-container h1 {
    font-size: 40px;
  }
  
  /* hero */
  .bg-circle {
    top: 20%;
    width: 150%;
  }

  .cham-1 {
    width: 130%;
    top: 30%;
  }
}


/* LapTop 14 inches */
@media screen and (min-width: 769px) and (max-width: 1519px) {

}


/* LapTop 17 inches */
@media screen and (min-width: 1520px) and (max-width: 1899px) {


}


@media screen and (max-width: 768px ) {
  
  /* Navigation */
  .mobile-nav {
    background-color: var(--easynext-blue);
    background-image: linear-gradient(160deg, var(--easynext-blue) 0%, #4089e8 150%);
  }
  
  /* Titles and texts */

  .heading-container h1 {
    font-size: 25px;
  }
  
  /* contact */
  
   .contact {
    margin-top: var(--mobile-header-height);
  }
}


@media screen and (min-width: 769px ) {

  
  /* Titles and texts */

  .heading-container h1 {
    font-size: 40px;
  }

  /* hero */
  .bg-circle {
    top: 7%;
    width: 90%;
  }

  .cham-1 {
    width: 100%;
    top: 10%;
  }

  /* contact */
  
  .contact {
    margin-top: var(--laptop-header-height);
    height: 83vh;
  }
}