@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Montserrat:500,600");
/* The following line is used to measure usage of this code. You can remove it if you want. */
@import url("https://px.animaapp.com/6813b4d11dd0dcdf6d17cb34.6813b4d21dd0dcdf6d17cb37.xzP8oRP.hcp.png");



.screen a {
  display: contents;
  text-decoration: none;
}

.container-center-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}

.container-center-horizontal > * {
  flex-shrink: 0;
  pointer-events: auto;
}

.valign-text-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.valign-text-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hidden,
.hidden * {
  pointer-events: none;
  visibility: hidden;
}

* {
  box-sizing: border-box;
}

.klds {
  letter-spacing: 0;
  line-height: 50px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.btn-outline-dark:hover{

    background-color: #B1CCEB !important;

}

.card-desc{
  line-height:20px;
  font-size:16px;
  font-weight:400;
}


.dropdown-item {
  padding: 10px 20px !important;
}

.btn-figma {
    margin-top:8px;
}

.btn-figma:hover {
    background-color: #B1CCEB !important;
    color:#2E3138;
  
}

     .send-button:hover {
            background: #2E3138;
            color: #fff;
            transform: translateY(-1px);
        }


           /* ===== PRICING / TIERS – teljes CSS ===== */
        :root {
            --delta-red: #D1181B;
            --muted: #878686;
            --ink: #2E3138;
            --line: #E6E6E6;
            --card-radius: 5px;
            --shadow: 0 10px 26px rgba(0, 0, 0, .08);
        }

        /* Szekció cím */
        .section-title {
            color: var(--muted);
            font-weight: 500;
            font-size: 28px;
            line-height: 40px;
            padding: 0px 0 15px 0;
        }

        /* ===== Kártya variánsok (színtónus + teljes kártya háttér) ===== */
        .tier-basic {
            --tone: #D9D9D9;
            --bg1: #dedbdb;
            --bg2: #f3f3f3;
        }

        .tier-comfort {
            --tone: #BFD4F6;
            --bg1: #ADD3FF;
            --bg2: #ffffff;
        }

        .tier-premium {
            --tone: #F1B6B8;
            --bg1: #CB0B1A66;
            --bg2: #f8e2e2;
        }

        /* ===== Kártya alap ===== */
        .tier-card {
            border: 2px solid var(--tone);
            /* szemmel látható border */
            border-radius: var(--card-radius);
            overflow: hidden;
            background: linear-gradient(122deg, var(--bg1) 0%, var(--bg2) 70%);
            /* teljes kártya háttér */
            box-shadow: var(--shadow);
            transition: box-shadow .25s ease, transform .25s ease;
        }

        .tier-card:hover,
        .tier-card:focus-within {
            transform: translateY(-2px);
            box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
        }

        /* ===== Fejrész ===== */
        .tier-head {
            padding: 28px 28px 20px;
            text-align: center;
            /* csillagok + badge középen */
            background: transparent;
            /* háttér a teljes kártyán van */
            position: relative;
        }

        .tier-head::after {
            content: none;
        }

        /* esetleges korábbi fény-effekt kilövése */

        /* Csillagok (fehér, finom árnyékkal) */
        .tier-stars {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-bottom: 15px;
        }

        .star {
            width: 48px;
            height: 48px;
            display: inline-block;
            /* SVG maszkolás a forma miatt */
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.88L18.18 22 12 18.77 5.82 22 7 14.15 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
            -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.88L18.18 22 12 18.77 5.82 22 7 14.15 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
            background: #FFFFFF;
            /* fehér csillag */
            filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .12));
        }

        /* Badge / kártyacím (középen a csillagok alatt) */
        .tier-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 12px auto 14px;
            /* auto = vízszintesen középen */
            padding: 20px 65px;
            min-width: 160px;
            border-radius: 5px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: #878686;
            background: #C8C8C8;
            /* BASIC alap */
            width: 80%;
        }

        .tier-badge-blue {
            background: #7BB1F1;
            color: #fff;
        }

        .tier-badge-red {
            background: var(--delta-red);
            color: #fff;
        }

        /* Fej alatti rövid leírás */
        .tier-lead {
            color: #2E3138;
            margin: 40px 0 40px 0;
            line-height: 24px;
            font-size: 16px;
            font-weight: 600;
            text-align: center;
        }

        .tier-divider {
            height: 1px;
            background: #FFFFFF;
        }

        /* ===== Tartalom / listák ===== */
        .tier-body {
            padding: 20px 28px;
        }

        .tier-extras {
            padding: 18px 28px 26px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, #fff 100%);
        }

        .tier-list {
            list-style: none;
            padding: 20px 10px 25px 30px;
            margin: 0;
            display: grid;
            gap: 15px;
        }

        .tier-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #2E3138;
            line-height: 20px;
            font-size: 16px;
            font-weight: 500;
        }

        .tier-list .ico {
            width: 30px;
            height: 30px;
            object-fit: contain;
            flex: 0 0 24px;
            margin-right: 5px;
        }

        .extras-title {
            font-weight: 600;
            color: #2E3138;
            padding: 30px 0 15px 0;
            font-size: 20px;
            text-align: center;

        }

        /* ===== Ár sávok ===== */
        .price-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 16px 20px;
            text-align: center;
            font-weight: 700;
            color: #fff;
        }

        .price {
            color: #FFFFFF;
            font-size: 32px;
            font-weight: 500;
            line-height: 20px;
            padding: 10px 0 10px 0;
        }

        .vat {
            color: #FFFFFF;
            font-size: 16px;
            font-weight: 500;
            line-height: 20px;
        }

        .price-basic {
            background: #D9D9D9;
            color: #686868;
        }

        .price-basic .price {
            color: #878686;
            font-size: 32px;
            font-weight: 500;
            line-height: 20px;
            padding: 10px 0 10px 0;
        }

        .price-basic .vat {
            color: #878686;
            font-size: 16px;
            font-weight: 500;
            line-height: 20px;
        }

        .price-comfort {
            background: #ADD3FF;
        }

        .price-premium {
            background: #CB0B1A66;
        }

        /* ===== Ajánlott jelzés (Prémium alján) ===== */
        .recommend {
            text-align: center;
            padding: 40px 20px;
            color: #CB0B1A;
            font-weight: 600;
            font-size: 20px;
            letter-spacing: .02rem;
        }

        /* ===== Reszponzív finomhangolások ===== */
        @media (max-width: 991.98px) {
            .price {
                font-size: 1.45rem;
            }
        }

        @media (max-width: 575.98px) {
            .tier-head {
                padding: 22px 18px 16px;
            }

            .tier-body,
            .tier-extras {
                padding: 16px 18px;
            }
        }


        /* --- Alsó szekció pipák--- */
        .benefits-title {
            font-size: 32px;
            font-weight: 500;
            color: #878686;
            line-height: 36px;
        }

        .benefit-item {
            padding: 22px 0;
            border-bottom: 3px solid #87868647;
            font-size: 20px;
            color: #2E3138;
            line-height: 32px;
            font-weight: 400;
        }

        /* első elemnek legyen felül is vonal */
        .benefit-item:first-child {
            border-top: 3px solid #87868647;
        }

        /* pipa képek */
        .benefit-icon {
            width: 60px;
            height: 60px;
            object-fit: contain;
            /* ne torzuljon */
        }

        /* --- Felső szekció / hero --- */

        .szolg-kep {
            width: 100%;
            height: auto;
            border-radius: 5px;
            object-fit: cover;
            object-position: center;
            max-width: 540px;
            /* hogy ne legyen nagyobb, mint az eredeti */
        }


        .content-wrap {
            padding-top: 100px;
            padding-right: 40px;
        }

        /* Finom tipó/olvasóélmény */
        .hero-replace p {
            color: #2E3138;
            line-height: 32px;
            font-size: 16px;
            font-weight: 400;
        }

        .hero-subtitle {
            font-size: 20px;
            /* kb. Bootstrap h4 */
            font-weight: 600;
            color: #646464;
            /* text-muted */
            margin-bottom: 25px;
            /* mb-3 */
            line-height: 32px;
        }

        /* Alapértelmezetten (mobil/tablet): nincs sortörés */
        .hero-subtitle .br-xl {
            display: none;
        }

        /* 1200px felett (desktop nagy kijelzőn): legyen sortörés */
        @media (min-width: 1200px) {
            .hero-subtitle .br-xl {
                display: inline;
            }

            .content-wrap {
                padding-top: 160px;
                padding-right: 40px;
            }
        }

        /* Közepes nézet finomhangolás */
        @media (max-width: 991.98px) {
            .hero-replace .content-wrap {
                padding-right: 0;
            }

            .content-wrap {
                padding-top: 0px;
                padding-right: 10px;
            }

            .benefits-title {
                font-size: 28px;

            }

            .benefit-item {
                padding: 22px 0;
                font-size: 18px;

            }

            /* első elemnek legyen felül is vonal */
            .benefit-item:first-child {
                border-top: 3px solid #87868647;
            }

            /* pipa képek */
            .benefit-icon {
                width: 45px;
                height: 45px;
                margin-left: 10px;

            }

            .breadcrumb-container {
                margin-bottom: 30px;
                margin-top: 20px;
            }
        }


        @media (max-width: 768px) {

            .benefits-title {
                font-size: 24px;

            }

            .benefit-item {
                padding: 18px 0;
                font-size: 16px;

            }

            /* pipa képek */
            .benefit-icon {
                width: 40px;
                height: 40px;
                margin-left: 10px;

            }

        }

        /* Mobil: térközök és vizuális ritmus */
        @media (max-width: 575.98px) {
            .hero-replace {
                padding-top: 2.25rem;
                padding-bottom: 2.25rem;
            }

        }