/**************************/
/* Reusable */
/**************************/

.grid {
  display: grid;
  gap: 9.6rem;
}

.grid2 {
  display: grid;
  gap: 2.4rem;
}

.cols2 {
  grid-template-columns: repeat(2, 1fr);
}
.col2 {
  grid-template-columns: repeat(2, 1fr);
}

.cols3 {
  grid-template-columns: repeat(3, 1fr);
}

.container {
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

/**************************/
/* NAVIGATION */
/**************************/

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eaf0ed;
  /* Because we want header to be sticky later */
  height: 8rem;
  padding: 2.4rem;
  position: relative;
}

.navLogo {
  height: 6rem;
}

.active {
  display: none;
}
.langFlag {
  pointer-events: all;
}
.lang:hover {
  transform: translateY(-0.3rem);
}
.lang:active {
  transform: translateY(0rem);
}
.mainNavList {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  position: relative;
}

.mainNavListAbout,
.mainNavListServ,
.mainNavListCont,
.mainNavListInq {
  padding: 1.2rem;
  border-radius: 11px;
  font-weight: 800;
}

.mainNavListInq {
  background-color: #2d6a4f;
  border-radius: 11px;
  color: #fff;
}
.mainNavListInq:visited,
.mainNavListInq:link {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  transition: all 0.3s;
}

.mainNavListAbout:link,
.mainNavListServ:link,
.mainNavListCont:link,
.mainNavListAbout:visited,
.mainNavListServ:visited,
.mainNavListCont:visited {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: 700;
  font-size: 2rem;
  transition: all 0.3s;
}
.mainNavListAbout:hover,
.mainNavListServ:hover,
.mainNavListCont:hover,
.mainNavListInq:hover,
.mainNavListAbout:active,
.mainNavListInq:active,
.mainNavListServ:active,
.mainNavListCont:active {
  color: #fff;
  font-weight: 700;
  background-color: #087f5b;
  border-radius: 11px;
  opacity: 90%;
  transition: all 0.5s;
}

/* MOBILE */
.btnNav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}

.iconMenu {
  height: 4.8rem;
  width: 4.8rem;
  color: #333;
}

.iconMenu[name="close"] {
  display: none;
}

/* STICKY NAVIGATION */
.sticky .header {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 150;
  background-color: rgba(255, 255, 255, 0.9);
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.07);
}
.sticky .sectionHero {
  margin-top: 8rem;
}
/**************************/
/* HERO SECTION */
/**************************/

.sectionHero {
  background-color: #eaf0ed;
  padding: 8rem 0 8rem 0;
}

.hero {
  max-width: 100%;
  margin: 0 auto;
}
.heroBackground {
  position: relative;
  left: 0;
  width: 100%;
  z-index: 1;
  opacity: 50%;
  text-align: center;
}
.heroTitle {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  color: #2d6a4f;
  -webkit-animation-name: blink;
  -moz-animation-name: blink;
  animation-name: blink;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/**************************/
/* About Us */
/**************************/
.sectionAboutUs {
  padding: 9.6rem 0;
  text-align: center;
  position: relative;
}
.sectionAboutUs::before {
  content: "";
  background-image: url(/img/vacuum.webp);
  background-size: cover;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 25%;
}

.boxAboutUs {
  max-width: 130rem;
  margin: 0 auto;
  position: relative;
}
.aboutUsDesc {
  font-weight: 600;
  font-size: 2.4rem;
}
.welcome {
  font-size: 3.6rem;
  font-weight: 600;
  color: #2d6a4f;
  padding: 4.8rem 0 4.8rem 0;
  line-height: 1.5;
}

.aboutImgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6.4rem;
  padding: 9.6rem 0 9.6rem 0;
}
.aboutUsImgs {
  width: 100%;
  box-shadow: 1.8rem 2.4rem rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 10px 10px 12px 0px rgba(45, 106, 79, 0.3);
  border-radius: 11px;
}

/**************************/
/* Mission */
/**************************/
.sectionMission {
  /* display: flex; */
  justify-content: center;
}
.missionBox {
  margin: 0 auto;
  width: 115rem;
  background-color: #1c6d55;
  padding: 3.6rem;
  border-radius: 11px;
  opacity: 90%;
}

.mission {
  font-size: 2.8rem;
  font-weight: 800;
  padding-bottom: 1.6rem;
  color: #1f4a37;
  line-height: 1.5;
  letter-spacing: 1px;
  text-shadow: 3px 3px 20px #abc3b9, -2px 1px 30px #abc3b9;
}

.missionDesc {
  color: #eaf0ed;
  line-height: 1.3;
  font-size: 2.4rem;
  font-weight: 600;
  /* letter-spacing: 0.5px; */
}
/**************************/
/* Services */
/**************************/

.sectionServices {
  padding: 9.6rem 0;
  background-color: #eaf0ed;
  align-items: center;
  position: relative;
}
.sectionServices::before {
  content: "";
  background-image: url(/img/Logo/darkgrey.webp);
  background-size: contain;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 15%;
  z-index: 0;
}
.boxServices {
  position: relative;
  max-width: 130rem;
  z-index: 1;
}

.servicesDesc,
.servicesFooter {
  font-size: 2.8rem;
  font-weight: 600;
  color: #111;
  padding: 4.8rem 0 4.8rem 0;
  line-height: 1.5;
}
.listServices {
  font-weight: 500;
  font-size: 2.2rem;
  text-align: center;
  align-items: center;
}
.list {
  display: grid;
  border-radius: 11px;
  background-color: #fff;
  box-shadow: 0 2.4rem 2.4rem rgba(0, 0, 0, 0.2);
  grid-row: span 3;
  grid-template-rows: subgrid;
  transition: all 0.3s;
  overflow: hidden;
  font-size: 1.6rem;
}
.step-number {
  font-size: 7rem;
  font-weight: 900;
  padding-top: 2.4rem;
  opacity: 40%;
  color: #2d6a4f;
}
#servicesText {
  padding: 2.4rem;
  text-align: center;
}
.listImgs {
  display: flex;
  width: 100%;
}
.list:hover {
  transform: translateY(-1.2rem);
}

.additionalServices {
  display: flex;
  background-color: #fff;
  border-radius: 11px;
  text-align: center;
  align-items: center;
  overflow: hidden;
  margin: auto;
  box-shadow: 0 2.4rem 2.4rem rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
  overflow: hidden;
  margin-top: 4.8rem;
  margin-bottom: 3.6rem;
}
.additionalServices:hover {
  transform: translateY(-1.2rem);
}
.additionalServicesBox {
  padding: 3.2rem;
  margin: 0 auto;
}

.listText4 {
  font-size: 4.8rem;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

#additionalServicesNumber {
  font-size: 8.4rem;
  padding-top: 4.8rem;
}
.additionalServicesImgs {
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}
.additionalServicesListImg {
  width: 100%;
  border-radius: 11px;
}

.additionalServicesText {
  display: flex;
  flex-direction: column;
  gap: 7rem;
  list-style: none;
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  margin: auto;
}
.listItem {
  display: flex;
  font-size: 2.2rem;
  font-weight: 500;
  align-items: center;
}
#listIcon {
  height: 3.6rem;
  width: 3.6rem;
  color: #087f5b;
  padding-right: 1rem;
}
/**************************/
/* Form */
/**************************/
.sectionForm {
  padding: 9.6rem 0 9.6rem;
}
.formContainer {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}

.form {
  display: grid;
  grid-template-columns: 2fr 1fr;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15);
  border-radius: 11px;
  background-image: linear-gradient(to right bottom, #2cac85, #98fddc);
  overflow: hidden;
}

.formTextbox {
  color: #0c2c21;
  padding: 4.8rem 3.6rem 6.4rem 6.4rem;
}
.formTitle {
  color: #0c2c21;
  margin-bottom: 3.2rem;
  font-size: 3.6rem;
  text-align: center;
  padding-bottom: 0.8rem;
  font-size: 4.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  background-image: linear-gradient(#081c15, #2cac85);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.formMsg {
  grid-column: 1/3;
}
#formMessage {
  border-radius: 9px;
  width: 100%;
  resize: none;
}
.formImg {
  background-image: url(../img/Logo/Beo\ Clean\ 011.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 4.8rem;
}

.formLabels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 2fr 0.5fr;
  column-gap: 3.2rem;
  row-gap: 2.4rem;
}
.formFirstName {
  grid-column: span 2;
}
.formEmail {
  grid-column: 3 / span 2;
}
.formMsg {
  grid-column: 1 / span 4;
}
.formService {
  grid-column: 3 / span 2;
}
.formCity {
  grid-column: span 2;
}

.formLabels label {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}
.formLabels input,
.formLabels select,
.formLabels textarea {
  width: 100%;
  padding: 1.2rem;
  font-size: 1.8rem;
  font-family: inherit;
  border: none;
  color: inherit;
  background-color: #d2faed;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.formLabels input::placeholder {
  color: #808080;
}

.formLabels *:focus {
  outline: none;
  box-shadow: 0 0 0 0.8rem #d2faed81;
}
.btnForm {
  background-color: #2d6a4f;
  color: #fff;
  padding: 1.2rem;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 600;
  padding: 1.6rem 3.2rem;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s;
  grid-column: span 2;
  width: 30rem;
  grid-column: 2 / span 2;
}
.btnForm:hover {
  background-color: #fff;
  color: #2d6a4f;
}
/**************************/
/* Contact */
/**************************/
.sectionContact {
  padding: 9.6rem 4.8rem;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #eaf0ed;
  color: #eaf0ed;
}

.contactBox {
  display: flex;
  position: relative;
  gap: 4.8rem;
  padding: 4.8rem;
  font-size: 2.4rem;
  color: #054c37;
  font-weight: 600;
}

.gridBox {
  text-align: center;
  position: relative;
  width: 33%;
  justify-content: center;
  padding: 2.4rem;
  background-color: rgba(8, 127, 91, 0.5);
  border: solid 0.5rem;
  border-radius: 11px;
  border-color: rgb(8, 127, 91);
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 10px 10px 12px 0px rgba(45, 106, 79, 0.1);
}

.ContactIcons {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  padding-top: 1.2rem;
}
#city,
#mail,
#phone {
  padding: 1.2rem 0;
}
.contactBox img {
  filter: invert(97%) sepia(96%) saturate(598%) hue-rotate(81deg)
    brightness(90%) contrast(98%);
  width: 100%;
}
.mailButton,
.phoneButton {
  all: unset;
}
.mailButton:hover,
.phoneButton:hover,
.mailButton:active,
.phoneButton:active {
  color: #c3fae8;
  text-shadow: 3px 3px 20px #087f5b, -2px 1px 30px #04402e;
}
.joinOurTeam {
  padding-top: 2.4rem;
  text-align: center;
  font-weight: 800;
  font-size: 3.6rem;
  font-style: italic;
  color: #2d6a4f;
}
.copyright {
  background-color: #eaf0ed;
  font-size: 1.2rem;
  color: #767676;
  padding: 0 0 1.2rem 1.6rem;
}

/**************************/
/* Referals */
/**************************/
.sectionReferals {
  padding: 9.6rem 4.8rem;
  max-width: 150rem;
  justify-items: center;
  margin: auto;
}
.refTitle {
  font-size: 3.6rem;
  font-weight: 700;
}
.refImgsMain {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2.4rem;
  padding: 4.8rem;
  align-items: center;
  justify-items: center;
}
.refImgsOther {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 2.4rem;
  padding: 4.8rem;
  align-items: center;
  justify-items: center;
}
.refImgsMain img {
  width: 30rem;
}
.refImgsOther img {
  width: 20rem;
}
/* .refImg-3,
.refImg-2,
.refImg-8 {
  filter: invert(58%) sepia(13%) saturate(1944%) hue-rotate(111deg)
    brightness(95%) contrast(91%);
} */
.refImg-3 img {
  width: 25rem;
}
.refImg-4 img {
  width: 20rem;
}
.refImg-5 img {
  width: 30rem;
}
.refImg-6 img {
  width: 15rem;
}

/**************************/
/* Snackbar */
/**************************/

#snackbar {
  visibility: hidden;
  min-width: 25rem;
  margin-left: -12.5rem;
  background-color: #087f5b;
  color: #fff;
  text-align: center;
  border-radius: 11px;
  padding: 1.6rem;
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 10rem;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  opacity: 75%;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2s;
  animation: fadein 0.5s, fadeout 0.5s 2s;
}

@-webkit-keyframes fadein {
  from {
    top: 0;
    opacity: 50%;
  }
  to {
    top: 10rem;
    opacity: 50%;
  }
}

@keyframes fadein {
  from {
    top: 0;
    opacity: 50%;
  }
  to {
    top: 10rem;
    opacity: 75%;
  }
}

@-webkit-keyframes fadeout {
  from {
    top: 10rem;
    opacity: 50%;
  }
  to {
    top: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    top: 10rem;
    opacity: 75%;
  }
  to {
    top: 0;
    opacity: 0;
  }
}

/*.flicker {
  animation: flicker 3s linear infinite;
}
@keyframes flicker {
  0%,
  19.9%,
  22%,
  62.9%,
  64%,
  70%,
  100% {
    opacity: 0.99;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.4),
      1px -1px 0 rgba(255, 255, 255, 0.4), -1px 1px 0 rgba(255, 255, 255, 0.4),
      1px 1px 0 rgba(255, 255, 255, 0.4), 0 -2px 8px, /*default color*/ /* 0 0 2px,
      /*default color*/ /*0 0 5px #17500071, 0 0 15px #01b87bc0, 0 0 2px #17500071,
      0 2px 3px #000;
  }
  20%,
  21.9%,
  63%,
  65%,
  69.9% {
    opacity: 0.4;
    text-shadow: none;
  }
}*/

.flicker {
  text-align: center;
  color: rgba(0, 255, 140, 0.404);
  background: gradient(
    linear,
    left top,
    right top,
    from(#2d6a4f),
    to(#2d6a4f),
    color-stop(0.5, #c3fae8)
  );
  background: -moz-gradient(
    linear,
    left top,
    right top,
    from(#2d6a4f),
    to(#2d6a4f),
    color-stop(0.5, #c3fae8)
  );
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#2d6a4f),
    to(#2d6a4f),
    color-stop(0.5, #c3fae8)
  );
  -webkit-background-size: 125px 150%;
  -moz-background-size: 125px 150%;
  background-size: 125px 150%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation-name: shimmer;
  -moz-animation-name: shimmer;
  animation-name: shimmer;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #2d6a4f;
}
@-moz-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-webkit-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-o-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* IE */
@-ms-keyframes blink {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* Opera and prob css3 final iteration */
@keyframes blink {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.blink-image {
  -moz-animation: blink 1s infinite ease-in-out; /* Firefox */
  -webkit-animation: blink 1s infinite ease-in-out; /* Webkit */
  -ms-animation: blink 1s infinite ease-in-out; /* IE */
  animation: blink 1s infinite ease-in-out; /* Opera and prob css3 final iteration */
}