/*****************************/
/***********INIT1*************/
/*****************************/

/*
font-family: 'Lora', serif;

Handwitten:
font-family: 'Amatic SC', cursive;

Testimonials:
font-family: 'Caveat', cursive;


Main colors: 

Text: #1B262C

Title-background: #0F4C75

Highlight: #3282B8

Background-color: #BBE1FA



*/

/********************/
/****ANIMATIONS******/
/********************/

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes rotate {
  0% {
    transform: rotate (0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dark-background-shadow {
  0% {
    box-shadow: rgba(255, 255, 255, 0.35) 0px 5px 15px;
  }
  50% {
    box-shadow: rgba(255, 255, 255, 0.35) 0px 5px 55px;
  }
  100% {
    box-shadow: rgba(255, 255, 255, 0.35) 0px 5px 15px;
  }
}

@keyframes dark-background-shadow-inset {
  0% {
    box-shadow: inset rgba(255, 255, 255, 0.35) 0px 5px 15px;
  }
  50% {
    box-shadow: inset rgba(255, 255, 255, 0.35) 0px 5px 55px;
  }
  100% {
    box-shadow: inset rgba(255, 255, 255, 0.35) 0px 5px 15px;
  }
}

/********************/
/****LOADER**********/
/********************/

#loading {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #bbe1fa;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-wrapper {
  border: 10px solid #f3f3f3;
  border-top: 10px solid #3282b8;
  border-left: 10px solid #0f4c75;
  border-right: 10px solid #fff;
  border-bottom: 10px solid #e22919;
  width: 400px;
  height: 400px;
  border-radius: 100%;
  animation: rotate 2s linear infinite;
}
.loading-logo {
  width: 200px;
  height: 200px;
  position: absolute;
}
/********************/
/****REUSABLE********/
/********************/

.section {
  padding: 50px 0;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

h1 {
  font-size: 4rem;
}
h2 {
  font-size: 3rem;
}
h3 {
  font-size: 2.5rem;
}
h4 {
  font-size: 2rem;
}
/********************/
/******BUTTONS*******/
/********************/
.cta {
  padding: 5px 15px;
  border: 2px solid #1b262c, 2px solid #1b262c, 0px solid #1b262c, 0px solid #1b262c;

  font-size: 1.4rem;
  font-weight: 500;
}

.cta:link,
.cta:visited {
  color: #1b262c;
  background-color: #ffed3f;
  transition: all 0.7s;
}

.cta:hover,
.cta:active {
  background-color: #3282b8;
  color: #fff;
  transition: all 0.4s;
}

.cta-hero {
  padding: 10px 50px;
  font-size: 1rem;
  border-radius: 5px;
}
.cta-hero:link,
.cta-hero:visited {
  background: #0f4c75;
  border: 2px solid #fff;
  color: #fff;
  transition: all 0.8s;
}

.cta-hero:hover,
.cta-hero:active {
  background: #fff;
  border: 2px solid #0f4c75;
  color: #0f4c75;
  transition: all 0.5s;
}
/********************/
/****MAIN ELEMENTS***/
/********************/

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

body {
  font-size: 16px;
  font-family: "Lora", serif;
  min-height: 200vh;
  background-image: linear-gradient(rgba(50, 130, 184, 0.425), rgba(50, 130, 184, 0.425)), url("/vendors/img/circle-blues.png");
  background-attachment: fixed;
  scroll-behavior: smooth;
}

/********************/
/******MAIN NAV******/
/********************/
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  height: 70px;
  border-bottom: 2px solid #000;
}

.logo-container {
  width: 200px;
  height: auto;
  padding: 1rem;
  background-color: #0f4c75;
  border-right: 5px solid #fff;
  border-bottom: 5px solid #fff;
  border-left: 5px solid #fff;
  overflow: hidden;
  align-self: flex-start;
  z-index: 9998;
}

.logo-container img {
  width: 100%;
  height: auto;
}

.main-nav {
  margin: 0 0;
  width: 100%;
}

.menuline {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: space-evenly;
  gap: 2rem;
  font-size: 1.5rem;
  font-weight: 300;
}

.menu-item a {
  height: 100%;
  padding: 1rem 0.5rem;
}

.menu-item a:link,
.menu-item a:visited {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.5s;
}

.menu-item a:hover,
.menu-item a:active {
  border-top: 1px solid #0f4c75;
  border-bottom: 1px solid #0f4c75;
  transition: all 0.5s;
}

.contact-bar {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.tel-mail {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  font-size: 0.8rem;
  gap: 1rem;
  border-right: 3px solid #1b262c;
  border-left: 3px solid #1b262c;
  padding: 1rem;
  background-color: #0f4c75;
}
.tel-mail a {
  color: #fff;
  font-weight: 600;
}

.tel-mail a:link,
.tel-mail a:visited {
}

.tel-mail a:hover,
.tel-mail a:active {
  color: #ffed3f;
}

.telnumber a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.emailaddressnavbar a {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.contact-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
}

.contact-nav a {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/********************/
/****LANGLIST*****/
/********************/

.langlist {
  font-size: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 0.5rem;
}
.langlist a {
  height: 100%;
  padding: 0;
}

/********************/
/*******FOOTER*******/
/********************/
footer {
  background-image: linear-gradient(to top, rgba(24, 40, 72, 0.6), rgba(75, 107, 183, 0.5));
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: start;
  align-items: start;
  padding: 0 0 1.4rem 0;
}

.footer-logo {
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 20px 0 0 20px;
}
.footer-logo img {
  width: 95%;
}

.footer-nav {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-menuline {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.footer-menu-item a {
  color: #fff;
  font-size: 1.2rem;
  padding: 1rem 0;
}

.footer-menu-item a:link,
.footer-menu-item a:visited {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.5s;
}

.footer-menu-item a:hover,
.footer-menu-item a:active {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transition: all 0.5s;
}

.footer-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  gap: 4rem;
}
/*COMPANY INFO LIST*/

.company-info-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}

.company-name {
  color: #fff;
}

.company-info-list-item,
.company-info-list-item a {
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}

.company-info-list-item a:link,
.company-info-list-item a:visited {
  color: #fff;
  transition: color 0.3s;
}

.company-info-list-item a:hover,
.company-info-list-item a:active {
  color: #ffed3f;
  transition: color 0.3s;
}

.partners-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.partners {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.partners img,
.toner-text img {
  height: 100px;
}

.toner-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2rem;
}

.toner-text h4 {
  font-size: 1.4rem;
}

.enigma {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  gap: 0.5rem;
}
.enigma p {
  color: #fff;
}

.enigma-link {
  color: #17fe7a;
}

/********************/
/****HERO SLIDER*****/
/********************/

#hero-slider {
  animation: dark-background-shadow 3s linear infinite;
}

[class^="number-slide"],
[class*=" number-slide"] {
  background: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #fff;
  font-weight: 500;
  height: 800px;
  max-height: 100vh;
}
/*SLIDE1*/
.number-slide-1 {
  background-image: url("/resources/img/slider/air_condition_living_room.webp");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
}

.number-slide-1 h2 {
  font-weight: 500;
}
.number-slide-1 h3 {
  color: #0f4c75;
  font-weight: 300;
}
/*SLIDE2*/
.number-slide-2 {
  background-image: url("/resources/img/slider/heat_pump.webp");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.slider-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.number-slide-2 h2 {
  font-weight: 500;
}
.number-slide-2 h3 {
  color: #fff;
  font-weight: 300;
  margin-bottom: 50px;
}
/*SLIDE3*/
.number-slide-3 {
  background-image: url("/resources/img/slider/water_heating.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.slider-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.number-slide-3 h2 {
  font-weight: 500;
  color: #0f4c75;
}
.number-slide-3 h3 {
  color: #0f4c75;
  font-weight: 100;
  margin-bottom: 50px;
}

/********************/
/****MAIN POINTS*****/
/********************/
.points-main-title {
  text-align: center;
  color: #fff;
  padding: 0 0 50px 0;
  font-family: "Amatic SC", cursive;
  font-weight: 500;
  font-size: 4rem;
  letter-spacing: 5px;
  text-decoration: underline;
}

.main-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

.points-box {
  min-height: 700px;
  display: flex;
  flex-direction: column;
  width: 20%;
  gap: 5%;
  justify-content: center;
  align-items: center;

  padding: 2rem 0.5rem;
  border: 3px solid #fff;
  animation: dark-background-shadow 3s linear infinite;
}
.box-1 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.808)),
    url("/resources/img/web-elements/Gyors_precíz_munkavégzés_LRUFF_HUNGARY_KFT.webp");
  background-position: center center;
}

.box-2 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.808)),
    url("/resources/img/web-elements/Engedély_ügyintezes_tervezés_dokumentáció.webp");
  background-position: center center;
}

.box-3 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.808)),
    url("/resources/img/web-elements/Széles_termékpaletta_nagy_választék_klíma_hőszivattyú_kazánok.webp");
  background-position: center center;
}

.box-4 {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.808)),
    url("/resources/img/web-elements/otthonfelujítási_tamogatas_allami_tamogatas.webp");
  background-position: center center;
}

.points-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1.2rem;
}

.points-list-item-img img {
  width: 150px;
  height: auto;
}

.points-list-item-title {
  font-size: 1.7rem;
  color: #3282b8;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.points-list-item-text {
  font-size: 1rem;
  color: #fff;
  font-weight: 500;
  padding: 0.5rem;
}
.points-list-item-text h5 {
  font-size: 1.8rem;
  font-weight: 800;
  font-family: "Amatic SC", cursive;
  text-align: center;
  text-decoration: underline;
  letter-spacing: 2px;
}

.points-list-inner-list {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  margin: 1rem auto;
  gap: 0.5rem;
  font-size: 1.2rem;
}

.points-list-inner-list-item {
  margin: 0 auto;
  font-weight: 1000;
  color: #f3f3f3;
  width: 80%;
  text-align: center;
}

/********************/
/******INSURANCE*****/
/********************/
.insurance {
  width: 90%;
  height: auto;
  margin: 0 auto;
  background-image: linear-gradient(to top, #83a4d4, #b6fbff);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 10px solid #0f4c75;

  text-align: center;
  animation: dark-background-shadow 3s linear infinite;
}

.insurance-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  font-size: 1.5rem;
  gap: 3rem;
  font-weight: 300;
}
.insurance-wrapper h4 {
  font-size: 1.5rem;
}

.insurance-img-box {
  display: flex;
  flex-direction: row;
  gap: 4rem;
}

/********************/
/****TESTIMONIALS****/
/********************/

.testimonials {
}
.testimonials-title {
  color: #fff;
  font-family: "Amatic SC", cursive;
  text-align: center;
  text-decoration: underline;
}

#testimonial-slider {
  /*background-color: #000;*/
  color: #fff;
  padding: 0;
  /*box-shadow: inset 0px 5px 10px #fff, inset 0px -5px 10px #fff;*/
}

.testimonial-slide {
  border-right: 3px solid #fff;
  height: 200px;
  width: 380px;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.testimonial-slide h4 {
  font-size: 1.2rem;
  font-weight: 300;

  text-align: center;
}

.testimonial-slide h5 {
  font-size: 1.2rem;
  margin-top: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  color: #3282b8;
}