@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  color:#333333;
}

/*=========================================================*/
/* Global */
/*=========================================================*/

section {
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content: center;
}
.wrapper {
    display:flex;
    flex-direction:row;
    width:100%;
    max-width: 1200px;
    justify-content: space-between;
    position: relative;
}
.contentLeft,
.contentRight {
  width:50%
}

.card{
  padding:2rem;
  background-color:#ffffff;
  box-shadow: 0 0 20px rgba(0,0,0,.1);
  border-radius: 14px;
}

/*=========================================================*/
/* Images */
/*=========================================================*/

img{
    width:100%;
    height:auto;
}

/*=========================================================*/
/* Colours */
/*=========================================================*/

.pink-bg{
    background-color:#fe336e;
    color:#ffffff;
}

.bg-pattern{
  position:absolute;
  opacity: .2;
  width: 200%;
  height: 600%;
  top: -200%;
  left: -50%;
  background: url(/img/seamless-bg.png) 0 0 repeat;
  transform: rotate(-30deg);
}

/*=========================================================*/
/* Fonts */
/*=========================================================*/

h1 {
  font-size:5rem;
  font-weight: 800;
  margin-bottom:1.2rem;
  color:#fe336e;
}

h2 {
  font-size:3rem;
  font-weight: 800;
  margin-bottom:1.2rem;
  color:#fe336e;
}

h2.light{
  color:#ffffff;
}

h3 {
  font-size:2rem;
  font-weight: 800;
  margin-bottom:1.2rem;
  color:#fe336e;

}

h4 {
  font-size:1.3rem;
  font-weight: 800;
  margin-bottom:1.2rem;
  color:#fe336e;
}

h5 {
  font-size:1.1rem;
  font-weight: 800;
  margin-bottom:1.2rem;
  color:#fe336e;
}

h6 {
  font-size:1rem;
  font-weight: 800;
  margin-bottom:4px;
  color:#fe336e;
}

p {
  font-size:1.4rem;
  margin-bottom:1rem;
  line-height: 2rem;
}

.card p {
  font-size:1.1rem;
  margin-bottom:1rem;
  line-height: 2rem;
}

a {
  font-size:.9rem;
  font-weight: 800;
  margin-bottom:1.2rem;
  color:#fe336e;
}

/*=========================================================*/
/* Form */
/*=========================================================*/

form{
  display: flex;
}

.inputGroup{
  width:24%;
  position: relative;
}

#contactForm .inputGroup{
  width:100%;
}

.formError {
  position: absolute;
  right: 4px;
  top: -18px;
  font-size: 14px;
}

label {
  font-size: 1.2rem;
  color: #999999;
  margin-bottom: 0.4rem;
}

input,
textarea {
  border-radius: 8px;
  border:2px solid #fe336e;
  height:60px;
  padding: 12px;
  margin-bottom:1rem;
  font-size: 1rem;
  color: #999999;
  width:100%;
}

.formErrorIcon {
  position: absolute;
    right: 14px;
    top: 20px;
    color: #28a745;
}

*:focus {
  outline: none;
}

textarea {
  height:100px;
}

button {
  border-radius: 8px;
  border:0;
  height:60px;
  color:#ffffff;
  background-color:#353535;
  font-size: 1.2rem;
  width:100%;
}

.errorMessages{
  width:100%;
  text-align: center;
}

#consultResult{
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  position: absolute;
  left: 0;
  bottom: -2rem;
}

/*=========================================================*/
/* Header & Nav */
/*=========================================================*/

header {
    width:100%;
    display:flex;
    justify-content: space-around;
    position: fixed;
    z-index: 999;
    background-color: rgba(255,255,255,.7);
    backdrop-filter: blur(5px);
    top: 0;
    height: 70px;
}

header .wrapper {
  position: fixed;
  top: 0;
}

nav .navItems{
  margin-top:-50px
}

  nav {
    width: 100%;
    min-height: 50px;
    display:flex;
    justify-content: space-between;
  }
  
  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
  }

  nav li {
    padding-bottom: 4px;
  }
  
  nav li a {
    display: block;
    text-decoration: none;
    color:#353535;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom:.5rem;
  }

  nav li a.active,
  nav li.telNo a{
    color:#fe336e;
    font-weight: 900;
  }
  
  nav li a:hover,
  nav .menu-btn:hover {
    color: #fe336e;
  }
  
  nav .logo {
    padding: 10px 0;
    width: 25%;
    order: 0;
    height: 200px;
  }
  
  /* menu */

  #logo{
    transition: .2s ease-out;
    width:250px;
  }
  
  nav .menu {
    max-height: 0;
    transition: max-height .2s ease-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    width:100%;
    margin-top: -50px;
  }
  
  /* menu icon */
  
  nav .menu-icon {
    cursor: pointer;
    display: inline-block;
    padding: 28px 20px;
    position: absolute;
    top:0;
    right:0;
    user-select: none;
  }
  
  nav .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: .2s ease-out;
    width: 18px;
  }
  
  nav .menu-icon .navicon:before,
  nav .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }
  
  nav .menu-icon .navicon:before {
    top: 5px;
  }
  
  nav .menu-icon .navicon:after {
    top: -5px;
  }
  
  /* menu btn */
  
  nav .menu-btn {
    display: none;
  }
  
  nav .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  
  nav .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  
  nav .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  
  nav .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  
  nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
  
  /* 48em = 768px */
  
  @media (min-width: 48em) {
    nav {
        display:flex;
        align-items: center;
        justify-content: space-between;
    }

    nav li {
        padding: 0 0.4rem;
    }

    nav .menu {
      display:flex;
      flex-direction: row;
      max-height: none;
      position: relative;
      top: 0;
      right: 0;
      justify-content: right;
    }

    nav .menu-icon {
      display: none;
    }

    nav .telNo{
      margin-left: 1rem;
    }
  }

/*=========================================================*/
/* Hero */
/*=========================================================*/

.semiCircle1 {
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0,0,0,.05);
  border-radius: 3000px;
  z-index: -1;
  right: -1320px;
  top: 0;
}
.semiCircle2 {
  position: absolute;
  width: 6000px;
  height: 6000px;
  background-color: rgba(0,0,0,.05);
  border-radius: 3000px;
  z-index: -1;
  right: -2700px;
  top: 55%;
}
.semiCircle3 {
  position: absolute;
  width: 4500px;
  height: 4500px;
  background-color: rgba(0,0,0,.05);
  border-radius: 3000px;
  z-index: -1;
  right: -1800px;
  top: 25%;
}
#hero {
  width:100%;
  overflow: hidden;
  display:flex;
  flex-direction:row;
  justify-content: center;
  position: relative;
  margin-top: 130px;
}
.heroLeft{
  display:flex;
}
.heroImg {
  display:flex;
}
.heroLeft,
.heroRight {
    width:50%;
}
.heroLeft,
.heroRight {
    width:50%;
}

/*=========================================================*/
/* Speech */
/*=========================================================*/

.speech{
  padding:2rem;
  background-color: #fe336e;
  color: #ffffff;
  border-radius: 2rem;
  font-size: 1.5rem;
  margin: auto;
  position:relative;
  line-height: 1.2;
}
.speech span{
  font-weight:700;
  font-size: 3rem;
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
.speech:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(254, 51, 110, 0);
	border-left-color: #fe336e;
	border-width: 20px;
  margin-top: 10px;
}

/*=========================================================*/
/* Consultation */
/*=========================================================*/

#consultation {
  background-color:#fe336e;
  color:#ffffff;
  padding:4rem 0;
}

#consultation .wrapper {
  flex-direction: column;
  justify-content: center;
}

#consultation .wrapper h2 {
  text-align: center;
}

#consultation .wrapper form#consultForm {
  flex-direction: row;
  justify-content: space-between;
}


/*=========================================================*/
/* About */
/*=========================================================*/

#about{
  padding:4rem 0;
  position: relative;
  overflow: hidden;
}

.aboutImg{
  aspect-ratio : 1 / 1;
  width:70%;
  overflow: hidden;
  border-radius:50px;
  background-image: url('../img/essential_help_aboutus.png');
  background-size: cover;
  background-position: calc(30%);
  margin-left: auto;
}

/*=========================================================*/
/* Services */
/*=========================================================*/

#services{
  background-color:#eaeaea;
  padding:4rem 0;
}

#services .wrapper {
  flex-direction: column;
  justify-content: center;
}

.servicesWrapper{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top:2rem
}

.servicesWrapper .card{
  flex-basis: 31%;
}

/*=========================================================*/
/* Stats */
/*=========================================================*/

#stats {
  background-color:#fe336e;
  color:#ffffff;
  padding:4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
}

#stats h2{
  color:#ffffff;
  z-index: 10;
}

#stats h4{
  color:#ffffff;
  font-size: 2rem;
  margin-bottom:0;
}

#stats p{
  margin-bottom:0;
}

#stats i{
  font-size: 3rem;
  opacity: .6;
  margin-bottom: 1rem;
}

.text-block {
  width: 22%;
  margin: 0.5rem;
  aspect-ratio: 1/1;
  background-color: #fe336e7d;
  box-shadow: 0 0 10px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 20px;
}
/*=========================================================*/
/* Contact */
/*=========================================================*/

#contact {
  padding:4rem 0;
}

#contact .wrapper {
  flex-direction: column;
  justify-content: center;
}

#contact .wrapper .contactWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 2rem;
}

#contact .wrapper form#contactForm {
  flex-direction: column;
  justify-content: space-between;
}

#map {
  height: 100%;
  width: 90%;
  border-radius: 14px;
  margin: auto;
}

.contentLeft{
  position:relative;
}

#contactResult{
  text-align: center;
  margin-top: 10px;
  position: absolute;
  width: 100%;
} 

/*=========================================================*/
/* Footer */
/*=========================================================*/

footer {
  display:flex;
  justify-content: center;
  background-color:#353535;
  color:#ffffff;
  padding:4rem 0;
  text-align: center;
}

footer .wrapper {
  flex-direction: column;
  justify-content: center;
}

footer p {
  font-size: 1rem;
  line-height: 1.1rem;
}

footer a {
  margin: 0 12px;
  text-decoration: none;
}

/*=========================================================*/
/*=========================================================*/
/*=========================================================*/
/* Media Queries */
/*=========================================================*/
/*=========================================================*/
/*=========================================================*/

@media (max-width: 1300px) {
  #logo {
    width:220px;
  }
  nav .navItems {
    margin-top: -20px;
  } 
  .wrapper {
    max-width: 900px;
  }
  .speech span{
    font-size: 2rem;
  }
  .aboutImg {
    width: 90%
  }
  #stats p {
    font-size: 1rem;
  }
}

@media (max-width: 1020px) {
  h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  p {
      font-size: 1rem;
      line-height: 1.3rem;
  }
  #logo {
    width:190px;
  }
  nav .logo {
    height: 170px;
  }
  nav .navItems {
    margin-top: 30px;
  } 
  nav li a {
    font-size: 1rem;
  }
  .wrapper {
    max-width: 700px;
  }
  .speech {
    font-size: 1rem;
    padding: 1.5rem;
  }
  .speech span {
    font-size: 1.6rem;
  }
  .aboutImg {
    width: 90%;
  }
  .servicesWrapper {
    flex-direction: column;
    justify-content: center;
  }
  .servicesWrapper .card {
    flex-basis: 100%;
    margin-bottom: 2rem;
  }
  #contact .wrapper .contactWrapper {
    flex-direction: column;
    justify-content: center;
  }
  .contactWrapper .contentLeft,
  .contactWrapper .contentRight{
    width:100%
  }
  .contactWrapper .contentRight{
    height: 300px;
    padding-top: 2rem;
  }
  #contactResult,
  #consultResult {
    position: relative;
  }
  #consultResult {
    bottom: 0;
  }
  #map {
    width: 100%;
  }
} 

@media (max-width: 767px) {
  nav .navItems {
    position: relative;
  }
  nav .menu-icon {
    display: block;
    padding: 0;
  }
  nav .menu {
    margin-top: 20px;
  }
  #logo {
    width:160px;
  }
  nav .logo {
    height: auto;
  }
  header {
    height:auto;
    min-height: 60px;
  }
  header .wrapper {
    position: relative;
    padding: 0 3rem;
  }
  header .logo img {
    position: absolute;
  }
  .wrapper {
    max-width: 100%;
  }
  #hero {
    margin-top: 110px;
  }
  .heroLeft{
    padding-left: 2rem;
  }
  .speech {
    padding: 1.5rem;
  }
  .semiCircle1 {
    width: 2000px;
    height: 2000px;
    right: -1100px;
  }
  .semiCircle2 {
    width: 4000px;
    height: 4000px;
    right: -2030px;
  }
  .semiCircle3 {
    width: 3000px;
    height: 3000px;
    right: -1460px;
  }
  input, button {
    height: 50px;
  }
  #consultation,
  #about,
  #services,
  #stats,
  #contact,
  footer {
    padding: 2rem 3rem;
  }
  #contact .wrapper .contactWrapper,
  .servicesWrapper {
    margin-top: 1rem;
  }
  #stats i {
    font-size: 2rem;
  }
  #stats h4 {
    font-size: 1.3rem;
  }
  #stats p {
    font-size: .8rem;
  }
  .card p {
    font-size: .9rem;
    margin-bottom: 0;
    line-height: 1.2rem;  
  }
  footer p {
    font-size: .8rem;
  }

}

@media (max-width: 700px) {
  #consultation .wrapper form#consultForm {
    flex-wrap: wrap;
  }
  .inputGroup{
    width:49%
  }
  .formErrorIcon {
    position: absolute;
      right: 14px;
      top: 14px;
      color: #28a745;
  }
  #about .wrapper {
    flex-direction: column-reverse;
  }
  #about .wrapper .contentLeft,
  #about .wrapper .contentRight {
    width:100%;
  }
  .aboutImg {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    margin-bottom: 2rem;
  }
  #stats p {
    font-size: .7rem;
  }
}

@media (max-width: 600px) {
  #logo {
    width: 130px;
  }
  #hero .wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .heroLeft {
    padding-left: 0;
  }
  .heroLeft, .heroRight {
      width: 80%;
  }
  .speech:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(254, 51, 110, 0);
    border-top-color: #fe336e;
    border-width: 20px;
    margin-left: -60px;
    margin-top:0;
  }
  .heroImg {
      width: 60%;
      margin-left: 120px;
  }
  #consultation .wrapper form#consultForm {
    flex-wrap: wrap;
  }
  #stats i {
    font-size: 1.5rem;
}
}

@media (max-width: 540px) {
  header .wrapper {
    padding: 0 2rem;
  } 
  .speech {
    font-size: 1rem;
    border-radius: 1.5rem;
  }
  .speech span {
      font-size: 1.2rem;
  }
  #consultation .wrapper form .inputGroup {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  #consultation, #about, 
  #services, #contact, footer {
    padding: 2rem 2rem;
  }
  label {
    font-size: 1rem;
    margin-bottom: 0.2rem;
  }
  #stats .wrapper {
    flex-wrap: wrap;
  }
  .text-block{
    width: 44%;
    margin-bottom: .5rem;
  }
  #stats h4 {
    font-size: 2rem;
  }
  #stats i{
    margin-bottom: 0.5rem;
  }
  .servicesWrapper .card {
    margin-bottom: 1rem;
  }
}