/* aboutus box*/

  #about-us {
    display: flex;
    flex-wrap: wrap;
    margin: 20px;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .about-us-left {
    flex: 2;
    padding: 10px 20px;
    background-color: #43988c;
    box-sizing: border-box;
  }

  .about-us-right {
    flex: 1;
    padding: 20px 20px;
    background-color: #353647;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
  }

  .section-title {
    text-align: center;
  }

  .section-text {
    font-size: 1.15em;
  }

  .smaller-text {
    font-size: 1em;
  }

  .medium-text {
    font-size: 1.1em;
  }

  .section-subtitle {
    text-align: center;
  }

  .icon-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
  }

  .icon-circle {
    width: 50px;
    height: 50px;
    background-color: #4eb8a9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }

  .icon-medium {
    font-size: 22px;
  }

  .icon-text-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }

  .icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text-box {
    flex: 1;
  }

.contact-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #4eb8a9;
    color: #fff;
    text-decoration: none; /* Aláhúzás eltávolítása */
    border-radius: 3px;
    font-weight: bold;
}

.contact-button:hover {
    background-color: #3a9885;
    text-decoration: none; /* Aláhúzás eltávolítása hover állapotban is */
}

.contact-button:active {
    color: #fff; /* Szöveg marad fehér kattintás után */
    background-color: #3a9885; /* (Ha más háttérszínt is szeretnél kattintásra, hozzáadhatod) */
}

  @media (max-width: 768px) {
    .about-us-left,
    .about-us-right {
      flex: 1 1 100%;
    }

    .icon-text-wrapper {
      flex-direction: column;
      align-items: center;
    }
  }

#advantages {
    margin-top: 50px; /* Növeld az értéket, hogy több hely legyen a szekció felett */
}

#advantages .container .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20px;
}

.advantage-box {
    background-color: #313244; /* Sötétszürke háttérszín */
    border-radius: 15px; /* Lekerekített sarkok */
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: none; /* Árnyék eltávolítása */
    transition: transform 0.3s ease;
    flex: 1 1 22%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px; /* Minimális magasság beállítása */
}

.advantage-box:hover {
    transform: translateY(-5px); /* Egy kis emelés, amikor a felhasználó fölé viszi az egeret */
}

.advantage-box h3 {
    font-size: 1.6em;
    color: #47a89a;
    margin-bottom: 15px;
    flex-shrink: 0; /* Megakadályozza, hogy a címsor összenyomódjon */
}

.advantage-box p {
    font-size: 1.1em;
    color: #fff;
    flex-grow: 1;
    margin-bottom: 10px;
    text-align: center; /* Középre igazítás */
}


#pricing {
    padding: 20px 20px;
}

#pricing h2 {
    margin-bottom: 40px;
    font-size: 2.5em;
    color: #ffffff; /* Fehér szín a címhez */
}

.pricing-box {
    position: relative; /* A szalag pozicionálásához szükséges */
    background-color: #313244;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center; /* Alapértelmezett középre igazítás */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.popular-badge {
    position: absolute;
    top: 8px;
    left: -15px;
    width: 80px;
    border-radius: 4px;
    background-color: #ff9800; /* Szalag színe */
    color: #fff;
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
    transform: rotate(-45deg); /* Átlós elhelyezés */
    z-index: 1;
    padding: 5px 0;
}

.pricing-box:hover {
    transform: translateY(-5px); /* Felugrás effekt */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); /* Erősebb árnyék hover esetén */
}

.pricing-box h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #47a89a; /* Kiemelő szín a címhez */
}

.pricing-box .price {
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: 1.2em;
    font-weight: bold;
    color: #ffffff; /* Fehér szín */
}

.pricing-box .btn {
    margin-top: 15px;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1em;
    text-transform: uppercase;
    color: #fff;
    background-color: #62d4e3; /* Gomb háttérszíne */
    border: none;
}

.pricing-box .btn:hover {
    background-color: #4baec3; /* Gomb hover színe */
    color: #fff;
}

.pricing-box .btn i {
    margin-right: 5px;
}

.tags {
    margin-bottom: 15px;
    text-align: center;
}

.tag {
    display: inline-block;
    color: #fff; /* Szöveg színe */
    font-size: 0.75em;
    padding: 2px 4px;
    border-radius: 4px;
    margin: 5px;
    text-transform: uppercase;
    font-weight: bold;
}

/* Egyedi színek a különböző címkékhez */
.tag-cpanel {
    background-color: #007bff; /* Kék */
}

.tag-appinstaller {
    background-color: #60a4b8;
}

.tag-honlapepito {
    background-color: #855232;
}

.tag-redis {
    background-color: #dc3545; /* Piros */
}

.tag-nodejs {
    background-color: #28a745; /* Zöld */
}

.tag:hover {
    opacity: 0.8; /* Enyhén halványodik hover esetén */
}

.feature {
    text-align: left; /* Balra zárás */
    margin: 10px 0;
    font-size: 1em;
    color: #e0e0e0; /* Világos szürke szöveg */
    border-top: 1px solid #444; /* Felső elválasztó vonal */
    padding-top: 10px; /* Távolság a vonaltól */
}

.feature:last-child {
    border-bottom: 1px solid #444; /* Alsó vonal az utolsó elemnél */
    padding-bottom: 10px;
}

.pricing-group h3 {
    margin: 30px 0 20px;
    font-size: 2em;
    color: #50beae;
    font-weight: bold;
}

/* Accordion részletek */
.details-box {
    background-color: #313244;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    overflow: hidden; /* Biztosítja, hogy a tartalom ne lógjon ki */
    transition: height 0.3s ease; /* Animált magasság */
}

/* Gomb alapstílusok */
.toggle-details {
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background-color: #3879d9; /* Kék háttér */
    color: #fff; /* Fehér szöveg */
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    user-select: none; /* Szöveg kijelölésének tiltása */
    outline: none !important; /* Teljes outline eltávolítása */
    box-shadow: none !important; /* Árnyék eltávolítása */
    appearance: none; /* Böngésző-specifikus stílusok kikapcsolása */
}

/* Hover állapot */
.toggle-details:hover {
    background-color: #3d81e1; /* Világosabb kék */
    color: #fff; /* Fehér szöveg */
    outline: none;
}

/* Focus állapot */
.toggle-details:focus,
.toggle-details:focus-visible {
    outline: none !important; /* Teljes outline eltávolítása */
    box-shadow: none !important; /* Árnyék eltávolítása */
    color: #fff; /* Fehér szöveg */
}

/* Active állapot (kattintás közben) */
.toggle-details:active {
    background-color: #3168b0; /* Sötétebb kék */
    color: #fff; /* Fehér szöveg */
    outline: none !important; /* Keret eltávolítása */
    box-shadow: none !important; /* Árnyék eltávolítása */
    transform: scale(0.98); /* Enyhe vizuális visszacsatolás kattintáskor */
}

/* Firefox-specifikus fókusz eltávolítása */
.toggle-details::-moz-focus-inner {
    border: 0; /* Firefox-specifikus keret eltávolítása */
}

/* Safari és Firefox reset */
button.toggle-details {
    -webkit-appearance: none; /* Safari alapértelmezett gomb stílus kikapcsolása */
    -moz-appearance: none; /* Firefox alapértelmezett gomb stílus kikapcsolása */
    appearance: none; /* Egyéb böngészőspecifikus stílusok kikapcsolása */
}

/* Az ikon (chevron) stílusa és animációja */
.toggle-details .fas {
    transition: max-height 0.3s ease, padding 0.3s ease, margin-top 0.3s ease;
    overflow: hidden; /* Szükséges a sima magasságváltozáshoz */
    margin-left: 10px;
}


.details-content {
    max-height: 0; /* Kezdeti állapot: rejtett */
    overflow: hidden; /* Kilógó tartalom elrejtése */
    background-color: #2b2c3d;
    border-radius: 8px;
}


/* Accordion stílusok */
.accordion {
    padding: 4px;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #3a3b4d;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: #4a4b5d;
}

.accordion-title {
    font-size: 1em;
    font-weight: bold;
    color: #fff;
}

.accordion-icon {
    transition: transform 0.3s ease; /* Animáció az ikon forgatására */
}

.accordion.open .accordion-icon {
    transform: rotate(90deg); /* Nyitott állapotban forgatás */
}

.accordion-body {
    max-height: 0; /* Kezdeti állapot: rejtett */
    padding: 0px; /* Kezdeti padding */
    overflow: hidden; /* Kilógó tartalom elrejtése */
}

.accordion.open .accordion-body {
    max-height: none; /* Dinamikus magasság kezelése JavaScript által */
    padding: 15px;
}

/* Lista elemek stílusai */
.details-list {
    list-style-type: none; /* Lista jelölő eltávolítása */
    padding: 0; /* Nulla belső margó */
    margin: 0; /* Nulla külső margó */
}

.details-list li {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Címke 2 egység, érték 1 egység */
    align-items: center; /* Középre igazítja a tartalmat */
    padding: 5px;
    border-bottom: 1px solid #4a4b5d;
}

.details-list li:hover {
    background-color: #36374c; /* Hover effekt */
}

.details-list li:last-child {
    border-bottom: none; /* Az utolsó elemnél nincs vonal */
}

.detail-label {
    font-weight: bold;
    color: #e0e0e0;
    flex: 1; /* Automatikusan tölti ki a helyet */
    text-align: left;
}

.detail-value {
    text-align: right;
    color: #fff;
    flex: 1; /* Automatikusan tölti ki a helyet */
}




/* Pipa */
.detail-value[data-status="success"]::after {
    content: "✔";
    color: #50beae;
}

/* X */
.detail-value[data-status="error"]::after {
    content: "✖";
    color: #cc1f1f;
}

.contact-message {
    background-color: #343649; /* Átlátszó doboz szín (#50beae) */
    color: #fff; /* Fehér szöveg */
    font-size: 1.5rem; /* Alap betűméret */
    font-weight: 400; /* Normál betűvastagság */
    padding: 15px 20px; /* Belépő térköz */
    border-radius: 8px; /* Kerekített sarkok */
    margin-top: 20px; /* Térköz a fenti tartalom után */
    text-align: center;
    display: flex; /* Ikon és szöveg egy sorban */
    align-items: center; /* Ikon és szöveg vertikális igazítása */
    justify-content: center; /* Vízszintes középre igazítás */
}

/* Ikon stílusa */
.info-icon {
    color: #fff; /* Ikon színe */
    font-size: 1.5rem; /* Ikon mérete */
    margin-right: 10px; /* Távolság az ikon és szöveg között */
    flex-shrink: 0; /* Az ikon mérete fix marad */
}
.contact-message .contact-link {
    color: #50beae; /* Zöld szín */
    text-decoration: none; /* Alapértelmezett aláhúzás eltávolítása */
    font-weight: bold; /* Félkövér szöveg */
    transition: color 0.3s ease; /* Simább színváltozás hoverkor */
    display: inline-block; /* Szöveg törése */
    margin: 0 2px; /* Hozzáadott térköz a link előtt és után */
}
}

.contact-message .contact-link:hover {
    color: ##50beae; /* Sötétebb szín hover állapotban */
    text-decoration: underline; /* Aláhúzás hover állapotban */
}

/* foldal domain kereso */
  .custom-container * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .custom-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
  }

  .custom-title {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
    color: #fff;
  }

  .custom-form {
    width: 100%;
    max-width: 800px;
  }

  .custom-form-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .custom-input {
    flex: 1 1 auto;
    height: 50px;
    padding: 0 15px;
    font-size: 18px;
    border: 1px solid #d9dee4;
    outline: none;
    border-radius: 0;
    border-right: none;
  }

  .custom-input:focus {
    border-color: #4ab0a1;
  }

  .custom-button-wrapper {
    display: flex;
    gap: 0;
  }

  .custom-button {
    height: 50px;
    padding: 0 15px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 0;
  }

  .custom-search-button {
    background-color: #4ab0a1;
  }

  .custom-transfer-button {
    background-color: #3879d9;
  }

  @media (max-width: 768px) {
    .custom-form-wrapper {
      flex-direction: column;
    }

    .custom-input {
      width: 100%;
      margin-bottom: 5px;
    }

    .custom-button-wrapper {
      flex-direction: row;
      width: 100%;
      margin-top: 5px;
    }

    .custom-button {
      flex: 1;
      border-radius: 0;
    }
  }
  
 /* strategiai partner */
 
    #strategic-partners {
      padding: 20px;
      color: #fff; /* Fehér szöveg */
      text-align: center;
    }

    #strategic-partners .section-title {
      font-size: 1.5rem;
      margin-bottom: 20px;
    }

    .partners-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .partners-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .partners-logos {
      display: flex;
      flex-wrap: wrap; /* Automatikus törés mobilon */
      justify-content: center; /* Középre igazítás */
      gap: 20px; /* Távolság az ikonok között */
    }

    .partners-logos img {
      max-width: 210px; /* Ikon mérete (maximális szélesség) */
      height: 55px; /* Egységes magasság */
      object-fit: contain; /* Az ikonok arányos méretben tartása */
      transition: transform 0.3s ease;
    }

    .partners-logos img:hover {
      transform: scale(1.1); /* Kiemelés hover alatt */
    }

    @media (max-width: 768px) {
      .partners-logos img {
        max-width: 75px; /* Kicsinyítés mobil nézetben */
        height: 55px; /* Egységes magasság mobil nézetben is */
        object-fit: contain; /* Az ikonok arányos megjelenése mobil nézetben */
      }
    }

/* contact page */
  #contact-container {
    display: flex;
    flex-wrap: wrap;
    margin: 20px auto;
    width: 100%;
    max-width: 1200px;
  }

  .contact-form {
    flex: 2;
    padding: 20px;
    background-color: #292c3e; /* Új háttérszín */
    color: #fff;
    box-sizing: border-box;
  }

  .contact-form h2 {
    margin-bottom: 10px; /* Kisebb margó az Üzenjen Nekünk szöveg alatt */
    color: #fff;
  }

  .company-details {
    flex: 1;
    padding: 20px;
    background-color: #43988c; /* A háttérszín öröklődik a teljes dobozra */
    color: #fff;
    text-align: left;
    box-sizing: border-box;
  }

  .company-details h2 {
    margin-bottom: 20px;
    color: #fff;
  }

  .company-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .company-info-list li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .company-info-list li:last-child {
    border-bottom: none;
  }

  .form-group {
    margin-bottom: 15px;
  }

  .captcha-section {
    text-align: center;
    margin-bottom: 15px;
  }

  .contact-form button {
    background-color: #4eb8a9;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
  }

  .contact-form button:hover {
    background-color: #3a9885;
  }

  @media (max-width: 768px) {
    #contact-container {
      flex-direction: column; /* Kisebb képernyőn egymás alá tör */
    }

    .contact-form,
    .company-details {
      flex: 1 1 100%; /* Mindkét oszlop teljes szélességet foglal */
      padding: 10px;
    }
  }

/* Captcha */
.grecaptcha-badge {
    bottom: 40px !important; /* Az ikon alaphelyzetét 20px-el feljebb tolja */
}