/*------------------BASIC CUSTOM STYLES------------------*/
 .container-80 {
     max-width: 80%;
     margin: 0 auto;
 }
 .main-container {
     max-width: 1170px;
     margin: 0 auto;
}
.image-field {
    margin: 0;
}
.main-wrapper {
    padding-bottom: 6rem;
}
.header-top-container {
    position: relative;
    display: flex;
    padding: 6px 0;
    justify-content: flex-end;
    align-items: center;
}
.header-top {
    background-color: white;
}
/*------------------Színek------------------*/
.feher {
 color: #fff;
}
.narancs {
 color: #ff6600;
}
.turkisz {
 color: #69d1cc;
}
.szurke {
 color: #c3c3c3;
}
span.grey {
    color: #59748b;
}
section#termekeink {
    background: #f8fafc;
}
section#elonyeink {
    background: #f8fafc;
}
.kek-1 {
    background: linear-gradient(45deg, #5d90eb, #357cc9)!important;
}
.kek-2 {
    background: linear-gradient(45deg, #3d5f9b, #83afdf) !important;
}
.kek-3 {
    background: linear-gradient(45deg, #3e62a0, #183d64)!important;
}
.narancs-1 {
    background: linear-gradient(45deg, #945d15, #c2985a)!important;
}
.narancs-2 {
    background: linear-gradient(45deg, #c07109, #eebf78)!important;
}
.narancs-3 {
    background: linear-gradient(45deg, #db7e03, #c2985a)!important;
}
.zold-1 {
    background: linear-gradient(45deg, #17a753, #308a76)!important;
}
.zold-2 {
    background: linear-gradient(45deg, #2d6645, #308a76)!important;
}
.zold-3 {
    background: linear-gradient(45deg, #0e6130, #308a76)!important;
}
a.reszletek {
    color: #0074f9;
}
.bg-blue {
    background: #cee3ff;
    color: #3c6bdd;
}
.bg-narancs {
    background: #fef3c7;
    color: #c2410c;
}
.region-primary-menu .menu-item-level-1:hover {
        background-color: #a7cdd8;
        color: #525252;
        border-radius: 1rem;
        transition: all 0.3s ease, color 0.3s ease;
   }
.region-primary-menu .menu-item-level-1 a:hover, .region-primary-menu .menu-item-level-1 > span:hover, .region-primary-menu .menu-item-level-1:hover > span {
        background-color: #a7cdd8;
        color: #ffffff;
        border-radius: 1rem;
                transition: all 0.3s ease, color 0.3s ease;
   }
p.footer-white-text.center {
    color: #cbd2dd;
    font-size: 0.8rem;
    line-height: 1.3rem;
    text-align: justify;
        margin-top: 1rem;
}
/*--------------------Méretek--------------------*/
.normal {
 font-weight: normal;
}
.szelesseg-50 {
 width: 50%;
}
#rolunk h2 {
    font-weight: bold;
    line-height: 2rem;
}
/*--------------------Elrenddezések------------*/
.cflex.flex-start {
    align-items: flex-start;
}
.margin-0 {
    margin: 0!important;
}
/*------------------Gombok------------------*/
.keret-1 {
    background: #2e777c;
    padding: 0.2rem 1rem;
    display: inline-block;
    border-radius: 1rem;
    color: white;
}
input[type=submit], input[type=button], input[type=reset], button, .button {
    display: inline-block;
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 8px 1rem;
    /* border: 3px solid #ffffff; */
    border-radius: 1rem;
    transition: all 0.4s ease-in-out;
    /* line-height: 1.6; */
    border: none;
}
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, button:hover, .button:hover, input[type=submit]:focus, input[type=button]:focus, input[type=reset]:focus, button:focus, .button:focus {
     color: white;
     background-color: rgba(43, 109, 119, 0.5); ;
     border:none
}
.button-2{
    display: inline-block;
    background-color: transparent;
    color: #ffffff;
    padding: 6px 1rem;
    border-radius: 1rem;
    transition: all 0.4s ease-in-out;
    border: 1px solid #ffffff;
}
.button-2:hover, .button-2:focus {
     color: rgb(153, 153, 153);
     background-color: rgba(66, 66, 66, 0.5); 
     border: 1px solid #ffffff;
}

.button-ikon {
    margin-left: 0.5rem;
}
.reszletek{
  font-size: 0.8rem;
}
.button-container {
    text-align: right;
    margin-top: 2rem;
}
/*------------------ikonok-------------*/
.taxonomi-ikon {
    background: #80cfdb;
    display: inline-block;
    border-radius: 0.5rem;
    /* width: 50px; */
    /* height: auto; */
    padding: 13px;
}

.taxonomi-ikon img {
    width: 30px;
    height: auto;
    filter: invert(100%);
}

.ikon-2 {
    background: #dbeafe;
    padding: 0.5rem;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    color: #2563eb;
}
/*--------------------Blok title--------------------*/
.block_title {
display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5rem;
    text-align: center;
    max-width: 850px;
    margin: 3rem auto;
}

.block_kategoria {
    border-radius: 1rem;
    padding: 0 1rem;
    font-weight: bold;
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.block_kategoria-2 {
    border-radius: 1rem;
    background: #d1e8e0;
    color: #529d84;
    padding: 0 1rem;
    font-weight: bold;
}

.block_alcim {
    color: grey;
    font-size: 1rem;
}
h2.block_cim {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    margin-bottom: 1rem;
}

/*-----------------Slider-----------------*/
.slider {
    height: 70vh;
    background-image: url(../images/hero-bg.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: fixed;
}
.slider h1 {
    font-size: 4rem;
}

/*----------------------------------------Termékek nézetének formázása----------------------------------------*/
/* 1. A fő konténer Grid elrendezéssel */
.termek-lista .view-content {
  display: grid;
  /* 3 egyforma széles oszlop (asztali nézetben), 20px közzel */
  grid-template-columns: repeat(3, 1fr); 
  gap: 20px;
  align-items: stretch; /* Egyforma magasság */
}

/* 2. Reszponzivitás: Mobilon 1 oszlop, tableten 2 */
@media (max-width: 1024px) {
  .termek-lista .view-content { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .termek-lista .view-content { grid-template-columns: 1fr; }
}

/* 3. A Drupal rétegek magasságának kényszerítése */
.termek-lista .view-content .views-row,
.termek-lista .view-content .views-row .views-field,
.termek-lista .view-content .views-row .field-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
}

/* 4. A kártya (termék-box) formázása */
.termek-lista .termek-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #e0e0e0;
  background: #fff;
  overflow: hidden; /* Ez kell, hogy a kép ne lógjon ki zoomoláskor */
  transition: box-shadow 0.3s ease;
      border-radius: 1rem;
}

.termek-lista .termek-box:hover {
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* 5. A KÉP: Teljes szélesség és ZOOM effekt */
.termek-lista .termek-box .kep {
  width: 100%;
  overflow: hidden; /* Levágja a kilógó részt zoomnál */
  aspect-ratio: 1 / 1; /* Opcionális: fix négyzetes képterület */
}

.termek-lista .termek-box .kep img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Kitölti a helyet torzulás nélkül */
  display: block;
  transition: transform 0.5s ease; /* Sima zoom animáció */
}

/* Zoom effekt az egér rávitelekor */
.termek-lista .termek-box:hover .kep img {
  transform: scale(1.1); /* 10%-os nagyítás */
}

/* 6. Szöveges tartalom igazítása */
.termek-lista .termek-box .cim, 
.termek-lista .termek-box .ismerteto, 
.termek-lista .termek-box .tovabb {
  padding: 0 15px; /* Oldalsó margó a szövegnek */
}

.termek-lista .termek-box .cim {
  margin-top: 15px;
  font-weight: bold;
}

.termek-lista .termek-box .ismerteto {
  flex-grow: 1; /* Kitölti a magasságot, gombot alulra tolja */
  margin: 15px 0;
}

.termek-lista .termek-box .tovabb {
  margin-bottom: 15px;
}

.termek-lista .termek-box .tovabb a.button {
display: block;
    text-align: center;
    padding: 10px;
    background-color: #4ca89d;
    color: #fff;
    text-decoration: none;
    border-radius: 1rem;
}
.termek-lista .termek-box .tovabb a.button:hover {
    background: #c1ebe6 !important;
    color: #051e12 !important;
}

/*--------------------Taxonomia lista--------------------*/
/* Konténer, ami összefogja a kártyákat */
.taxonomi-lista .view-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Az egyes kártyák (views-row) stílusa */
.taxonomi-lista .views-row {
  background-color: #ffffff;
  border-radius: 12px; /* Lekerekített sarkok */
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Finom árnyék */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
}

.taxonomi-lista .views-row:hover {
  transform: translateY(-5px); /* Lebegő hatás */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Belső doboz elrendezése */
.taxonomi-lista .taxonomi-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: flex-start;
}

/* Ikon formázása */
.taxonomi-lista .taxonomi-ikon {
  margin-bottom: 20px;
}



/* Cím stílusa */
.taxonomi-lista .taxonomi-nev {
  margin-bottom: 15px;
}

.taxonomi-lista .taxonomi-nev a {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a202c;
  text-decoration: none;
  line-height: 1.3;
  display: block;
}

.taxonomi-lista .taxonomi-nev a:hover {
  color: #007bff;
}

/* Magyarázó szöveg */
.taxonomi-lista .taxonomi-magyarazat {
  font-size: 0.7rem;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1; /* Kitölti a helyet, hogy a 'részletek' gomb egy vonalban legyen */
}

/* 2. Reszponzivitás: Mobilon 1 oszlop, tableten 2 */
@media (max-width: 1024px) {
.taxonomi-lista .view-content { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.taxonomi-lista .view-content { grid-template-columns: 1fr; }
}




/*-------------------Rólunk nézet-------------------*/
/* Konténer, ami összefogja a két oldalt */
.cflex {
    display: flex;
    flex-wrap: wrap; /* Engedélyezi az egymás alá ugrást mobilom */
    align-items: center; /* Függőlegesen középre igazítja a szöveget és a képet */
    gap: 40px; /* Távolság a kép és a szöveg között */
    margin: 40px 0;
}

/* A két oldal alapbeállítása (50-50% mínusz a gap fele) */
.cflex .bal-oldal, 
.cflex .jobb-oldal {
    flex: 1;
    min-width: 300px; /* Megakadályozza, hogy túl keskenyek legyenek */
}

/* Kép formázása, hogy ne lógjon ki és esztétikus legyen */
.cflex .bal-oldal img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px; /* Lekerekített sarkok, hogy illeszkedjen a kártyákhoz */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Finom mélység */
}

/* Szöveg formázása */
.cflex .jobb-oldal p {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 15px;
}

ul.sajat-lista li {
  list-style: none;
  background: url('../images/la_check-circle.png') no-repeat left center;
  background-size: 18px; /* Itt méretezheted a képet */
  padding-left: 25px;
  line-height: 1.6;
}


/*--------------------Miért válassz minket nézet--------------------*/
/* Konténer, ami összefogja a kártyákat */
.miert-mi .view-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Az egyes kártyák (views-row) stílusa */
.miert-mi .views-row {
  background-color: #ffffff;
  border-radius: 12px; /* Lekerekített sarkok */
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Finom árnyék */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
}

/* 2. Reszponzivitás: Mobilon 1 oszlop, tableten 2 */
@media (max-width: 1024px) {
.miert-mi .view-content { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.miert-mi  .view-content { grid-template-columns: 1fr; }
}


.miert-mi .views-row:hover {
  transform: translateY(-5px); /* Lebegő hatás */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Belső doboz elrendezése */
.miert-mi .mmiert-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: flex-start;
}

/* Ikon formázása */
.miert-mi .miert-ikon {
    margin-bottom: 20px;
    background: #a4c7c5;
    padding: 0.5rem;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
}
.miert-mi .miert-szam {
    font-size: 3rem;
    /* opacity: 0.1; */
    font-weight: bolder;
    color: #f8fafc;
}
.miert-mi .miert-ok {
    font-size: 0.8rem;
}



/* Cím stílusa */
.miert-mi  .miert-cim {
    margin-bottom: 15px;
    color: black;
    font-weight: bold;
}

.miert-mi  .taxonomi-nev a {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a202c;
  text-decoration: none;
  line-height: 1.3;
  display: block;
}

.miert-mi  .miert a:hover {
  color: #007bff;
}
.miert-mi .cflex{
justify-content: space-between;
    gap: 0;
    margin: 0;
}

/*---------------GYIK------------------*/
#GYIK{
    background: #f1f7ff;
}
.toggle-item {
    background: #d8ebe9;
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.toggle-title {
    background: transparent!important;
    border: none!important;
}

.toggle-content {
    background: transparent;
    padding: 0 1rem 1rem;
}
.accordion-title::before, .toggle-title::before {
    content: none;
    }
/* A külső tároló, ami a függöny mozgást végzi */
.toggle-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  
}

/* Ez az állapot, amikor nyitva van */
.toggle-item.active .toggle-content {
    grid-template-rows: 1fr;
    border-bottom: none;
}

/* A belső div, ami a tényleges szöveget és a paddinget tartja */
.toggle-inner {
    min-height: 0;
    
    color: #444;
    line-height: 1.6;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Ha nyitva van, a szöveg is látszódjon */
.toggle-item.active .toggle-inner {
    opacity: 1;
}

/* Cím és nyíl stílus (Font Awesome) */
.toggle-title {
    position: relative;
    cursor: pointer;
    padding: 18px 50px 18px 20px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toggle-title::after {
    content: "\f054"; /* Font Awesome kacsacsőr */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    transition: transform 0.4s ease;
}

.toggle-item.active .toggle-title::after {
    transform: rotate(90deg);
}

/*--------------------Kapcsolat nézet--------------------*/
section#kapcsolat {
    background: #f3f9f9;
}
.cflex-item {
    flex: 1;
}

.cflex.coulomn {
    flex-direction: column;
    align-items: flex-start;
}

.cflex .item {
    display: flex;
    gap: 1rem;
    background: white;
    padding: 1rem 2rem;
    width: 100%;
    border-radius: 1rem;
    align-items: center;
        font-size: 0.8rem;
}
.bg-form {
    padding: 1rem;
    border-radius: 1rem;
}
form label {
    display: table;
    font-weight: normal;
    font-size: 0.8rem;
}
input[type=text], input[type=email], input[type=url], input[type=password], input[type=search] {
    background-color: #ffffff;
    max-width: 100%;
    padding: 0.5rem;
    border: 0;
    box-shadow: 0 0 0 1px var(--border);
    border-radius: 4px;
    transition: all 0.3s linear;
    font-size: 0.7rem;
}
textarea {
    font-size: 0.7rem;
}

/*-----------Footer---------*/  
footer#footer {
    background: #0f172a;
}
footer#footer a {
    color: #b9c2cd;
    font-size: 0.8rem;
}
.footer .block-title {
     color: white;
}
.footer li {
    padding: 0;
    border-bottom: none;
    transition: padding 0.3s ease;
}
.footer li:hover {
    padding: 0 4px;
}
/*-----------------------Termék nézete-----------------------*/
.dl-padding {
    padding: 0.5rem;
}

.dl-kep img {
    border-radius: 1rem;
    overflow: hidden;
}
.dl-parameterek {
    margin-top: 2rem;
}
.termek-info h1.cim {border-bottom: 3px solid #276272;}

.termek-info .kategoria {
    text-align: end;
    margin-bottom: 1rem;
}
.termek-info .rovid-leiras {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    text-align: justify;
}
.dl-parameterek .tab-content {
    border: none;
}
.dl-parameterek .tabs li {
    background-color: var(--border);
    color: var(--bold-color);
    padding: 0;
    border-right: none;
    border-radius: 1rem;
    margin: 0 0.5rem;
    text-transform: uppercase;
}
.dl-parameterek .tabs {
    justify-content: center;
}

.dl-parameterek .tabs .active-tab {
    background-color: var(--color-primary)!important;
    color: #ffffff;
    border-color: unset;
}
.dl-parameterek .tabs li:first-child {
    border-left: unset;
}
.dl-parameterek .flex-kepek {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    flex-wrap: wrap;
}
.dl-parameterek .kepek img {
    border: 1px solid lightgrey;
    border-radius: 1rem;
         transition: all 0.3s ease;
}
.dl-parameterek .kepek img:hover {
    border: 1px solid lightgrey;
    border-radius: 1rem;
    scale: 1.05;
     transition: all 0.3s ease;
     box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/*-----------------Ajánlatkérés-----------------*/

.ajanlatkeres-form input[type=text], 
.ajanlatkeres-form input[type=email], 
.ajanlatkeres-form input[type=password], 
.ajanlatkeres-form input[type=search], 
.ajanlatkeres-form input[type=number], 
.ajanlatkeres-form input[type=url], 
.ajanlatkeres-form input[type=tel] {
    padding: 9px 6px;
    outline: 0;
    max-width: 100%;
    border-radius: 1rem;
}





.ajanlatkeres-form input[type=checkbox], .ajanlatkeres-form input[type=radio] {
    padding: 0;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
}
.ajanlatkeres-form .form-type-checkbox {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.ajanlatkeres-form .webform-element-description {
    flex: 100%;
}

.ajanlatkeres-form .description {
    flex: 100%;
    font-size: 0.7rem!important;
    font-style: italic;
}
.ajanlatkeres-form fieldset {
    margin: 0 0 10px 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    
}
.ajanlatkeres-form legend {
    background: #f5f5f5;
    padding: 0 1rem;
    border-radius: 1rem;
}
.ajanlatkeres-form hr {
    background: #2988a7;
    width: 100%;
    height: 2px;
    margin: 3rem 0;
    border: 0;
    clear: both;
    box-sizing: content-box;
}



/* Reszponzivitás: 992px alatt (tablet/mobil) */
@media (max-width: 991px) {
    .cflex {
        /*flex-direction: column; /* Egymás alá rakja őket */
        gap: 20px;
    }

    .cflex .bal-oldal, 
    .cflex .jobb-oldal {
        width: 100%; /* Teljes szélesség mobilom */
    }
    
    /* Opcionális: mobilon a kép legyen felül */
    .cflex .bal-oldal {
        order: 1;
    }
    .cflex .jobb-oldal {
        order: 2;
        text-align: justify; /* Mobilon szebben mutathat a sorkizárás */
    }
}




/* --- Reszponzivitás (Mobilbarát beállítások) --- */

/* Tablet nézet (2 oszlop) */
@media (max-width: 1024px) {
  .view-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Mobil nézet (1 oszlop) */
@media (max-width: 650px) {
  .view-content {
    grid-template-columns: 1fr; /* Minden kártya teljes szélességű */
    padding: 10px;
  }
  
  .views-row {
    padding: 0px;
  }
}