/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 18px;
  line-height: 30px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Montserrat', sans-serif;
}

div {
  max-width: 100%;
  box-sizing: border-box;
  /* Biztosítja, hogy a padding és border ne növelje meg a szélességet */
}

.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  color: #fff;
}

.language-switcher {
  float: right;
  /* Jobbra igazítás */
  display: flex;
  gap: 10px;
  /* Térköz a zászlók között */
}

.language-switcher img {
  width: 34px;
  /* Zászlók mérete */
  height: auto;
  cursor: pointer;
}

/* Hover effektus eltávolítása csak a zászlók linkjeiről */
.language-switcher a:hover {
  border: none !important;
  padding: 0;
  /* Esetleges extra térköz eltávolítása */
}

/* Zászlók stílusa (opcionális) */
.language-switcher img {
  width: 34px;
  /* Zászlók mérete */
  height: auto;
}

@media (max-width: 767px) {
  .language-switcher {
    justify-content: center;
    background-color: #E4EFE7 !important;
  }

  .language-switcher img {
    width: 40px;
    /* Kisebb méret mobilon */
  }
}

@media (max-width: 991px) {

  html,
  body {
    overflow-x: hidden;
  }

  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .mobile-bottom-fix {
    margin-bottom: 30px;
  }

  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 60px;
}

.section-heading h6 {
  font-size: 15px;
  font-weight: 700;
  color: #33ccc5;
  text-transform: uppercase;
  margin-bottom: 15px;

}

.section-heading h2 {
  font-size: 30px;
  color: #2a2a2a;
  font-weight: 800;
  position: relative;
  z-index: 2;
  line-height: 45px;
}

.section-heading h2 em {
  font-style: normal;
  color: #33ccc5;
}

.section-heading h2 span {
  color: #088ec3;
}

.main-blue-button a {
  display: inline-block;
  background-color: #257eb4;
  font-size: 15px;
  font-weight: 400;
  color: #fff !important;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #fff !important;
  transition: all .3s;
}

.main-blue-button a:hover {
  background-color: #fff !important;
  color: #4771cb !important;
  border: 1px solid #257eb4 !important;
}

.main-green-button a {
  display: inline-block;
  background: rgb(116, 116, 116);
  background: linear-gradient(90deg, rgba(116, 116, 116, 1) 3%, rgba(37, 126, 180, 1) 42%, rgba(44, 43, 43, 1) 87%);
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #4771cb !important;
  transition: all .3s;
  margin-top: 30px;
}

.main-green-button a:hover {
  background: rgb(116, 116, 116);
  background: radial-gradient(circle, rgba(116, 116, 116, 1) 7%, rgba(44, 43, 43, 1) 69%, rgba(37, 126, 180, 1) 100%);
  color: #fff !important;
  padding: 12px 65px;
}

/* HR animation */
.divider-container {
  position: relative;
  height: 10px;
  overflow: hidden;
  margin: 5px 0;
}

.divider-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 2px;
  background: #747474;
  transform: translate(-50%, -50%);
  transition: width 0.8s ease-out;
}

.divider-line.animate {
  width: 99%;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/
.header-area {
  background-color: #AFDDFF;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 100px;
 }

.header-area::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 4px; /* Vastagabb vonal */
  background: #0056b3; /* Erősebb kék */
  animation: lineGrow 1s ease-out forwards;
  box-shadow: 0 0 15px rgba(0, 86, 179, 0.7); /* Intenzívebb árnyék */
}

@keyframes lineGrow {
  0% {
    width: 0;
    left: 50%;
  }
  100% {
    width: 100%;
    left: 0;
  }
}

.sticky-header {
  background-color: #fff;
  box-shadow: 0px 4px 15px rgba(247, 55, 79, 0.5); /* Pirosas árnyék */
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo img {
  max-width: 130px;
  margin-top: -20px;
  margin-left: 5px;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase !important;
  color: #000;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #261FB3 !important;
  border: 1px solid #261FB3;
  border-radius: 5px;
  padding: 0px 15px 5px 15px;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none; /* !important NÉLKÜL! */
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #257eb4;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #257eb4;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #F7374F;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #F7374F;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #257eb4;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }

  .header-area .main-nav:before {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 992px) {

  .header-area .main-nav {
    display: flex !important;          /* Flex konténer */
    justify-content: space-between;    /* Logó és menü szétválasztása */
    align-items: center;               /* Középre igazítás függőlegesen */
  }

  .header-area .main-nav .logo {
    float: none !important;            /* Float eltávolítása */
  }

  .header-area .main-nav .nav {
    flex: 1;                           /* Maradék helyet foglal el */
    margin-left: 15px;                 /* Távolság a logótól */
    padding: 0 !important;
    gap: 0 !important;
  }

  .header-area .main-nav .nav li {
    padding: 0 3px !important;         /* Minimális térköz */
  }

  .header-area .main-nav .nav li a {
    font-size: 10px;                   /* Olvasható betűméret */
    padding: 0 5px !important;
    white-space: nowrap;               /* Szöveg sortörés tiltása */
  }

  .header-area .main-nav .logo img {
    max-width: 100px;
    margin-top: -10px;
  }

  .header-area .main-nav .nav li:nth-child(6){
    padding-right: 0px;
  }

  .language-switcher {
    float: none !important;            /* Float eltávolítása */
    display: flex;
    gap: 1px !important;                          /* Kisebb térköz a zászlók között */
    margin-left: auto;                 /* Jobbra tolja a nyelvváltót */
    padding: 0 1px !important;
    align-items: center;               /* Függőleges középre igazítás */
  }

  .language-switcher img {
    width: 22px !important;            /* Kisebb zászlók */
    height: 18px !important;
    margin-top: -3px;                  /* Finom függőleges igazítás */
  }

  .language-switcher a {
    display: flex !important;
    height: 100% !important;
    align-items: center;               /* Logók középre igazítása */
  }
}

@media (max-width: 767px) {

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #747474 !important;
    opacity: 1;
  }

  .header-area {
    background-color: #fff;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .main-nav .logo img {
    max-width: 120px;
    margin-top: -5px;
    margin-left: -10px;
  }

  .header-area .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }

  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 3px solid #257eb4;
  }

  .header-area .main-nav .nav li:last-child {
    border-bottom: 3px solid #257eb4;
  }

  .header-area.header-sticky .nav {
    margin-top: 100px;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-left: 3px solid #257eb4;
    border-right: 3px solid #257eb4;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #E4EFE7 !important;
    color: #257eb4 !important;
  }

  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #33ccc5 !important;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}
/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: #fff;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #257eb4;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #33ccc5;
  border-radius: 50%;
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 226px 0px 120px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:before {
  content: '';
  background-image: url(../images/banner-dec-right.png);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 100px;
  width: 1159px;
  height: 797px;
  z-index: -1;
  opacity: 0;
  /* Kezdetben láthatatlan */
  transition: opacity 3s ease-in !important;
  /* Lassú előtűnés */
}

.main-banner.fade-in:before {
  opacity: 1;
  /* Teljesen láthatóvá válik */
}

.main-banner p {
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
}

.main-banner span {
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 700;
  color: #F7374F;
}

.main-banner .left-content {
  margin-right: 45px;
}

.main-banner .left-content h6 {
  font-size: 15px;
  font-weight: 400;
  color: #2a2a2a;
  margin-bottom: 8px;
}

.main-banner .left-content h4 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 20px;
  color: #2a2a2a;
}

.main-banner .left-content h2 {
  margin-top: 30px;
  padding-top: 20px;
  margin-bottom: 45px;
  font-size: 60px;
  font-weight: 800;
  color: #2a2a2a;
  line-height: 72px;
  background: rgb(116, 116, 116);
  background: linear-gradient(90deg, rgba(116, 116, 116, 1) 3%, rgba(37, 126, 180, 1) 42%, rgba(44, 43, 43, 1) 87%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-banner .right-image {
  text-align: right;
  position: relative;
  z-index: 2;
}

.main-banner .right-image img {
  max-width: 593px;
}

@media (max-width: 767px) {

  .main-banner {
    margin-bottom: -40px !important;
  }

  .main-banner .left-content h2 {
    margin-top: -80px;
    padding-top: 0px;
    margin-bottom: 45px;
    font-size: 36px;
    font-weight: 800;
    line-height: 42px;
  }

  .main-banner p {
    font-size: 16px;
    margin-top: -30px;
  }

  .main-banner .main-green-button a {
    display: none;
  }

  .main-banner .right-image {
    margin-top: -40px !important;
    padding: 0 !important;
  }
}

/* 
---------------------------------------------
About Us Style
--------------------------------------------- 
*/

#about {
  padding-top: 130px;
  padding-bottom: 130px;
  background-color: #AFDDFF;
}

#about_en {
  padding-top: 130px;
  padding-bottom: 130px;
  background-color: #AFDDFF;
}

.about-us .aboutimg {
  margin-top: 60px;
}

.about-us .section-heading {
  margin-bottom: 40px;
}

.about-us .section-heading h2 {
  font-size: 22px;
  line-height: 1.5;
  text-align: justify;
  hyphens: auto;
  /* Automatikus szóelválasztás */
  word-break: break-word;
  /* Törés hosszú szavaknál */
  overflow-wrap: break-word;
  /* Biztonsági törés hosszú szövegek esetén */
}

.about-us .section-heading h2 em {
  font-size: 28px;
  color: #F7374F;
  text-shadow:
    -1px -1px 0 #FFFFFF,
    /* Bal felső */
    1px -1px 0 #FFFFFF,
    /* Jobb felső */
    -1px 1px 0 #FFFFFF,
    /* Bal alsó */
    1px 1px 0 #FFFFFF;
  /* Jobb alsó */
}

.about-us .left-image {
  margin-right: 45px;
}

.about-us .section-heading h6 {
  color: #F7374F;
  text-shadow:
    -1px -1px 0 #FFFFFF,
    /* Bal felső */
    1px -1px 0 #FFFFFF,
    /* Jobb felső */
    -1px 1px 0 #FFFFFF,
    /* Bal alsó */
    1px 1px 0 #FFFFFF;
  /* Jobb alsó */
}

.about-us p {
  margin: 10px 0px;
  font-weight: 500;
  text-align: justify;
  hyphens: auto;
  /* Automatikus szóelválasztás */
  word-break: break-word;
  /* Törés hosszú szavaknál */
  overflow-wrap: break-word;
  /* Biztonsági törés hosszú szövegek esetén */
}

@media (max-width: 767px) {
  #about {
    padding-top: -50px !important;
    margin-top: -30px !important;
    padding-bottom: 50px;
    display: block;
  }

  #about_en {
    padding-top: -50px !important;
    margin-top: -30px !important;
    padding-bottom: 50px;
    display: block;
  }

  .about-us .aboutimg {
    margin-top: -30px;
  }

  .about-us .section-heading {
    margin-bottom: 40px;
  }

  .about-us .section-heading h2 {
    font-size: 16px;
    line-height: 1.5;
  }

  .about-us .section-heading h2 em {
    font-size: 16px;
  }

  .about-us p {
    margin: 10px 0px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
  }

}

/* 
---------------------------------------------
Features Style
--------------------------------------------- 
*/

#features {
  padding-top: 130px;
  padding-bottom: 130px;
  text-align: center;
}

#features_en {
  padding-top: 130px;
  padding-bottom: 130px;
  text-align: center;
}

.features .features-content {
  z-index: 2;
  position: relative;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.features-item {
  flex: 1 1 calc(25% - 20px);
  /* Asztali nézetben négy oszlop */
  max-width: calc(25% - 20px);
  /* Maximális szélesség */
  text-align: center;
  padding: 30px;
  border-radius: 50px;
  background: rgb(255, 255, 255);
  background: linear-gradient(105deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
  transition: background-color .5s;
  -webkit-transition: background-color .5s;
  -o-transition: background-color .5s;
  -moz-transition: background-color .5s;
}

.features-item:hover {
  background: rgb(37, 126, 180);
  background: linear-gradient(0deg, rgba(37, 126, 180, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(37, 126, 180, 1) 98%);
  border: 3px solid #257eb4 !important;
}

.features h6 {
  color: #257eb4;
  text-transform: uppercase;
  font-weight: 700 !important;
  margin-bottom: 20px;
}

.features h2 {
  font-weight: 800;
  margin-bottom: 50px;
}

.features h2 em {
  color: #257eb4;
  text-decoration: none;
  font-style: normal;
  font-weight: 800;
}

.features-item:hover h4 {
  color: #fff;
}

.features-item:hover p {
  color: #fff;
}

.first-feature:hover .icon {
  background-image: url(../images/products/gazvezer.png);
}

.second-feature:hover .icon {
  background-image: url(../images/products/huzat.png);
}

.third-feature:hover .icon {
  background-image: url(../images/products/radiator.png);
}

.fourth-feature:hover .icon {
  background-image: url(../images/products/expansion.png);
}

.fifth-feature:hover .icon {
  background-image: url(../images/products/icons8-ventilator-100.png);
}

.sixth-feature:hover .icon {
  background-image: url(../images/products/icons8-pump-100.png);
}

.seventh-feature:hover .icon {
  background-image: url(../images/products/icons8-thermostat-100.png);
}

.first-feature .icon {
  background-image: url(../images/products/gazvezer.png);
}

.second-feature .icon {
  background-image: url(../images/products/huzat.png);
}

.third-feature .icon {
  background-image: url(../images/products/radiator.png);
}

.fourth-feature .icon {
  background-image: url(../images/products/expansion.png);
}

.fifth-feature .icon {
  background-image: url(../images/products/icons8-ventilator-100.png);
}

.sixth-feature .icon {
  background-image: url(../images/products/icons8-pump-100.png);
}

.seventh-feature .icon {
  background-image: url(../images/products/icons8-thermostat-100.png);
}

.features-item .icon {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  transition: all 0.5s;
}

.features-item h4 {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 30px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: #2a2a2a;
  position: relative;
  transition: all 0.5s;
}

.features-item p {
  position: relative;
  margin-top: 0px;
  transition: all 0.5s;
}

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}

.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #ddd;
  position: absolute;
  top: 0;
  left: 0;
}

.progress>span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}

.progress .progress-left {
  left: 0;
}

.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

.progress .progress-right {
  right: 0;
}

.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}

.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 32px;
  text-align: center;
  line-height: 20px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}

.progress .progress-value div {
  margin-top: 10px;
}

.progress .progress-value span {
  font-size: 12px;
  text-transform: uppercase;
}

/* This for loop creates the  necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}

.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}

.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}

.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}

.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}

.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}

@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}

@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}

@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}

@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}

.progress {
  margin-bottom: 1em;
}

@media (max-width: 992px) {
  .features-item {
    flex: 1 1 calc(50% - 20px);
    /* Tablet nézetben két oszlop */
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 767px) {
  #features {
    padding-top: 70px;
    padding-bottom: 70px !important;
  }

  #features_en {
    padding-top: 70px;
    padding-bottom: 70px !important;
  }

  .features-item {
    flex: 1 1 calc(100% - 20px);
    /* Mobil nézetben egy oszlop */
    max-width: calc(100% - 20px);
    border: 3px solid #000;
  }
}

.features-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Középre igazítás */
  gap: 20px;
  /* Távolság a kártyák között */
}

/* 
---------------------------------------------
Partners
--------------------------------------------- 
*/

#partners h2 {
  font-weight: 800;
  margin-bottom: 50px;
  color: #000;
}

#partners h6 {
  color: #257eb4;
  text-transform: uppercase;
  font-weight: 700 !important;
  margin-bottom: 20px;
}

#partners h2 em {
  color: #257eb4;
  text-decoration: none;
  font-style: normal;
  font-weight: 800;
}

#partners_en h2 {
  font-weight: 800;
  margin-bottom: 50px;
  color: #000;
}

#partners_en h6 {
  color: #257eb4;
  text-transform: uppercase;
  font-weight: 700 !important;
  margin-bottom: 20px;
}

#partners_en h2 em {
  color: #257eb4;
  text-decoration: none;
  font-style: normal;
  font-weight: 800;
}

.partners-us {
  padding: 160px 0px;
}

:root {
  --marquee-width: 100%;
  --marquee-height: 20vh;
  /* --marquee-elements: 12; */
  /* defined with JavaScript */
  --marquee-elements-displayed: 5;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);
  background: none;
  color: #eee;
  overflow: hidden;
  position: relative;
}

.marquee:before,
.marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}

.marquee:before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}

.marquee:after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}

.marquee-content img {
  max-width: 130px;
  height: auto;
  -webkit-filter: drop-shadow(5px 5px 5px #666666);
  filter: drop-shadow(5px 5px 5px #666666);
}

.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}

.marquee-content:hover {
  animation-play-state: paused;
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
  }
}

.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  font-size: calc(var(--marquee-height)*3/4);
  /* 5rem; */
  white-space: nowrap;
}

@media (max-width: 600px) {
  :root {
    --marquee-width: 100%;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
  }

  .marquee:before,
  .marquee:after {
    width: 5rem;
  }

  .marquee-content img {
    padding: 10px;
  }
}

/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/
.our-portfolio {
  padding-top: 130px;
  overflow: hidden;
  padding-bottom: 130px;
  background-color: #AFDDFF;
}

.our-portfolio h6 {
  color: #F7374F;
  text-shadow:
    -1px -1px 0 #FFFFFF,
    /* Bal felső */
    1px -1px 0 #FFFFFF,
    /* Jobb felső */
    -1px 1px 0 #FFFFFF,
    /* Bal alsó */
    1px 1px 0 #FFFFFF;
  /* Jobb alsó */

}

.our-portfolio h2 em {
  color: #F7374F;
  text-shadow:
    -1px -1px 0 #FFFFFF,
    /* Bal felső */
    1px -1px 0 #FFFFFF,
    /* Jobb felső */
    -1px 1px 0 #FFFFFF,
    /* Bal alsó */
    1px 1px 0 #FFFFFF;
  /* Jobb alsó */
}

.our-portfolio .container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}

/* Alapstílusok */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  /* Térköz a képek között */
  max-width: 1400px;
  /* Maximális szélesség */
  margin: 0 auto;
  /* Középre igazítás */
  padding: 20px;
}

/* Képek stílusa */
.gallery a {
  flex: 1 1 calc(25% - 20px);
  /* 4 kép/sor asztalon (25% - gap) */
  max-width: calc(25% - 20px);
  /* Fixálja a maximális szélességet */
  transition: transform 0.3s ease;
}

.gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(247, 55, 79, 0.5);
  /* Alap árnyék */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Animáció az árnyékra és a méretre */
}

.gallery img:hover {
  transform: scale(1.05);
  /* Méret növelése hover esetén */
  box-shadow: 0 8px 16px rgba(247, 55, 79, 0.8);
  /* Erősebb árnyék hover esetén */
}

/* Reszponzív beállítások */
@media (max-width: 992px) {

  /* Tablet nézet */
  .gallery a {
    flex-basis: calc(50% - 20px);
    /* 2 kép/sor */
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 768px) {

  /* Mobil nézet */
  .gallery a {
    flex-basis: 100%;
    /* 1 kép/sor */
    max-width: 100%;
  }
}

/* VenoBox testreszabás */
.venobox img:hover {
  transform: scale(1.03);
  cursor: zoom-in;
}


@media (max-width: 767px) {
  #portfolio {
    padding-bottom: 50px;
  }

  #portfolio_en {
    padding-bottom: 50px;
  }
}

/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  margin-top: 130px;
  margin-bottom: 130px !important;
  padding: 160px 0px;
  background-image: url(../images/conbackg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.contact-us .section-heading {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}

.contact-us h6 {
  color: #fff;
}

.contact-us h2 {
  color: #fff;
}

.contact-us span {
  color: #F7374F !important;
  /* Szöveg színe */
  text-shadow:
    -1px -1px 0 #FFFFFF,
    /* Bal felső */
    1px -1px 0 #FFFFFF,
    /* Jobb felső */
    -1px 1px 0 #FFFFFF,
    /* Bal alsó */
    1px 1px 0 #FFFFFF;
  /* Jobb alsó */
}


.contact-us .contact-info {
  padding: 40px 30px;
  border: 2px solid #eee;
}

.contact-us .contact-info ul li {
  text-align: center;
  display: block;
  margin-bottom: 30px;
}

.contact-us .contact-info ul li a {
  font-size: 15px;
  color: #000;
  font-weight: 500;
  transition: all .5s;
  letter-spacing: 1px;
}

.contact-us .contact-info ul li:hover a {
  color: #2a2a2a;
}

.contact-us .contact-info ul li:last-child {
  margin-bottom: 0px;
}

.contact-us .contact-info ul li .icon {
  margin-bottom: 10px;
}

.contact-us .contact-info ul li .icon img {
  max-width: 32px;
}

.contact-info {
  padding: 40px 30px;
  border: 2px solid #eee;
  background-color: #fff;
  /* Háttérszín hozzáadása */
}

.ratio {
  border: 2px solid #ddd;
  /* Térkép körüli keret */
  border-radius: 8px;
  /* Lekerekített sarkok */
}

@media (max-width: 767px) {
  #contact .container {
    width: 100% !important;
    /* A teljes konténer szélessége */
    padding: 0;
    /* Ha szükséges, távolítsd el a belső margókat */
    margin: 0 auto;
    text-align: center;
  }

  #contact_en .container {
    width: 100% !important;
    /* A teljes konténer szélessége */
    padding: 0;
    /* Ha szükséges, távolítsd el a belső margókat */
    margin: 0 auto;
    text-align: center;
  }

  .contact-us .contact-info ul li a {
    font-size: 12px;
    color: #000;
    font-weight: 600;
  }
}

/* 
---------------------------------------------
Impressum
--------------------------------------------- 
*/
.impressum {
  margin-top: 140px;
  margin-bottom: 100px;
  max-width: 99%;
}

.impressum h2 {
  font-size: 46px;
  text-transform: uppercase;
  color: #747474;
}

.impressum .text-muted {
  font-weight: 600;
  color: #000;
}

.impressum h4 {
  font-size: 16px;
  margin-bottom: 50px;
}

/* 
---------------------------------------------
Adatvédelem
--------------------------------------------- 
*/
.dataprotection {
  margin-top: 100px;
}

.dataprotection h2 {
  color: #747474;
}

.dataprotection h4{
  margin-bottom: 20px;
}

.list-styled {
  color: #000;
  text-align: justify;
  hyphens: auto;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: break-word;
}

.list-styled li {
  padding-left: 5px;
  margin: 10px 0px 10px 0px;
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/
footer {
  height: 80px !important;
}

footer p {
  text-align: center;
  line-height: 1.4;
  /* Állítsd be a kívánt értéket */
  margin-bottom: 5px;
  /* Opció: csökkentsd az alsó margót */
  font-size: 14px;
  font-weight: 600;
}

footer p a {
  color: #F7374F;
  transition: all .5s;
  font-weight: 500;
}

footer p a:hover {
  color: #4771cb;
}

@media (max-width: 767px) {
  footer {
    letter-spacing: 0.1px !important;
  }

  footer p {
    font-size: 12px;
  }
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }

  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }

  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }

  .main-banner .left-content {
    margin-right: 0px;
  }

  .main-banner {
    text-align: center;
  }

  .main-banner:before {
    display: none;
  }

  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }

  .features-item {
    margin-bottom: 45px;
  }

  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }

  .skill-item {
    margin-bottom: 30px;
  }

  .service-item {
    text-align: center;
  }

  .service-item .icon {
    margin-top: 0px;
    margin-bottom: 30px;
  }

  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }

  .our-portfolio .owl-nav {
    display: none !important;
  }

  .contact-info {
    margin-top: 60px;
  }

  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }

  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }

  .service-item {
    text-align: center;
    padding: 30px;
  }

  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .service-item .right-content {
    display: inline-block;
  }

  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }

  .about-us .about-item {
    margin-top: 15px;
  }

  form#contact {
    padding: 30px;
  }

}