/* Reset styles for consistent layout */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
		
		a {
			color: black;
		}
        /* Header and logo styles */
		header {
			background-color: #00A4B2;
			color: white;
			padding: 15px 20px; /* A bal és jobb oldali padding is lehet hasznos */
			text-align: center; /* Ezt eltávolíthatod vagy megtarthatod a szöveg alapértelmezett igazításához, de a flexbox felülírhatja */
			display: flex; /* Flexbox bekapcsolása */
			align-items: center; /* Elemek függőlegesen középre igazítása */
			justify-content: center; /* Elemek balra igazítása (vagy használhatsz más értéket a térközhöz) */
		}

		header img {
			height: 150px;
			margin-right: 50px; /* Távolság a logó és a cím között */
		}

		header h1 {
			font-size: 40px;
			font-weight: bold;
		}
        /* Paragraph styling */
        p {
            text-align: center;
            font-size: 19px;
            background-color: white;
            padding: 10px;
            margin-top: 20px;
            font-weight: bold;
            color: #00A4B2;
        }

		.* {
			box-sizing: border-box;
		}
		
        /* Body styles */
        body {
            font-family: Inter;
            background-color: #f4f4f4;
            color: #333;
            line-height: 1.6;
        }
		
        .menu {
            background-color: #00A4B2;
			font-weight: bold;
            color: white;
            padding: 10px;
            text-align: center;
        }
		
        .menu a {
            color: white;
			font-family: sans-serif;
			font-size: 18px;
            text-decoration: none;
            margin: 0 10px;
            display: inline-block;
        }
		
        .menu a:hover {
			text-decoration: underline;
			text-decoration-thickness: 3px;
			text-decoration-color: white;
			text-underline-offset: 5px;
        }
		
		.login-button {
            background-color: white;
			font-family: sans-serif;
			font-size: 16px;
			font-weight: bold;
            padding: 10px 20px;
			border: none;
			border-radius: 50px;
            cursor: pointer;
        }
		
        .login-button:hover {
            background-color: #dff6f7;
        }
		
		/* Float four columns side by side */
		.column {
			float: left;
			width: 25%;
			padding: 0 5px;
		}

		.row {
			margin: 0 -5px;
			display: flex;
			justify-content: center; /* Középre igazítja vízszintesen */
			align-items: center; /* Középre igazítja függőlegesen */
		}

		/* Clear floats after the columns */
		.row:after {
			content: "";
			display: table;
			clear: both;
		}

		/* Responsive columns */
		@media screen and (max-width: 600px) {
		.column {
			width: 100%;
			display: block;
			margin-bottom: 10px;
			}
		}

		/* Style the counter cards */
		.card {
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
			padding: 16px;
			text-align: center;
			background-color: #444;
			color: white;
		}

		.fa {
			font-size: 50px !important;
		}

        /* A figyelmeztető sáv stílusa */
        .alert {
            background-color: #ffd84e;
            color: #00000099;
            padding: 15px;
            text-align: left;
            top: 0;
            left: 50%;
			width: 100%;
            display: flex;
            justify-content: center;
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }
		
		.alert span {
			font-size: 14px;
			font-family: sans-serif;
			max-width: 1200px; /* A szöveg maximális szélessége */
			align-items: flex-start; /* Balra igazítjuk a szöveget és a gombot */
            text-align: left; /* Balra igazítjuk a szöveget */
		}

		.alert::before {
            content: "⚠️"; /* Felkiáltójeles háromszög */
            font-size: 24px;
            margin-right: 10px; /* Kis távolság a szöveg előtt */
        }
		
		/* Mobil nézethez alkalmazott stílusok */
        @media screen and (max-width: 600px) {
            .alert {
                width: 95%; /* Szélesség csökkentése mobilra */
                font-size: 16px; /* Kisebb betűméret mobilon */
                padding: 10px; /* Kevesebb padding mobilon */
                flex-direction: column; /* A szöveget és a gombot egymás alá rendezzük */
                align-items: flex-start; /* Balra igazítjuk a szöveget és a gombot */
            }
			.alert span {
				font-size: 14px;
				max-width: 90%; /* A szöveg maximális szélessége */
				align-items: flex-start; /* Balra igazítjuk a szöveget és a gombot */
				text-align: justify; /* Balra igazítjuk a szöveget */
		}

            .alert::before {
                font-size: 20px; /* Kisebb ikon mobilon */
                margin-right: 5px; /* Kevesebb távolság a szöveg előtt mobilon */
            }

            .close-btn {
                align-self: flex-end; /* A bezáró gomb jobbra igazítása */
            }
        }
		
        /* Button styles */
		.signup {
			background-color: #00a4b2; /* Valószínű kék szín */
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 25px; /* Lekerekített sarkok */
			cursor: pointer;
			font-size: 16px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			transition: background-color 0.3s ease; /* Lassú színváltás hoverre */
		}

		.signup:hover {
			background-color: #008a96; /* Sötétebb kék hoverre */
		}

		.signup:focus {
			outline: none; /* Ne legyen fókusz keret */
			box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); /* Halvány kék fókusz effekt */
		}
		
		/* Gombok (toggle-button) */
		.toggle-button {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			border: 2px solid #00A4B2;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: transparent;
			transition: background-color 0.3s, border-color 0.3s;
			cursor: pointer;
		}

		.toggle-button.active {
			background-color: #00A4B2; /* Aktív gomb háttérszíne */
		}

		.toggle-button:hover {
			background-color: #00A4B2;
		}

		.toggle-container {
			display: flex;
			flex-direction: row; /* Gombok sorba rendezése */
			text-align: center; /* Gombok középre igazítása */
			align-items: center;
			gap: 10px; /* Gombok közötti térköz */
		}

		.toggle-text {
			font-weight: bold;
			display: block; /* A szöveget blokk szinten jelenítjük meg */
			margin-top: 8px; /* A gomb és a szöveg közötti térköz */
			font-size: 19px; /* Szöveg méretének beállítása */
			color: #333; /* Szöveg színe */
		}

		.container-wrapper {
			padding-top: 15px;
			display: flex;
			justify-content: center; /* Vízszintes középre igazítás */
			align-items: center; /* Függőleges középre igazítás */
		}

		.signup {
			display: flex;
			justify-content: center; /* Vízszintesen középre igazítja */
			align-items: center; /* Függőlegesen középre igazítja */
		}

        /* Pricing table styles */
        .pricing-table {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            padding: 20px;
        }

        .tariff {
            background-color: white;
            width: 100%;
            max-width: 320px;
            padding: 20px;
            border-radius: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            display: none;
        }

        .tariff.active {
            display: block;
        }

		.tariff-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.tariff-details {
			flex: 2;
		}

		.tariff-details h3 {
			font-size: 24px;
		}

		.tariff-details .price {
			font-size: 19px;
			margin-left: 15px;
		}
		
		.tariff h3 {
			font-size: 24px;
			font-family: 'Inter';
			margin-left: 15px;
			grid-template-columns: auto 1fr; /* 2 oszlop: az első a kép, a második a szöveg */
			gap: 10px; /* Kép és szöveg közötti távolság */
		}

		.tariff-image {
			height: 60px; /* Az SVG kép méretének beállítása */
		}

		.tariff h3 .price {
			display: flex;
			flex-direction: column; /* Az árakat vertikálisan rendezem */
			align-items: flex-start; /* Balra igazítva */
			font-size: 19px;
		}

		.tariff h3 .price span {
			font-weight: normal;
			color: #333; /* Az aktuális ár színe */
		}

		.tariff h3 .price s {
			font-size: 16px; /* Az áthúzott ár kisebb lesz */
			color: #777;
		}
        .tariff b {
            color: #333;
            font-weight: bold;
        }

        .tariff ul {
            list-style: none;
            margin-top: 15px;
        }

        .tariff ul li {
            font-size: 14px;
            margin: 5px 0;
			text-indent: -30px;
			padding-left: 25px;
        }

        .tariff ul li b {
            color: #333;
        }
		
		.svg-icon {
			width: 24px;
			height: 24px;
		}
		
		/* Popup container */
		.popup {
			position: fixed;
			display: none;
			top: 50%; /* Középre helyezés, de szükséges a finomhangolás */
			left: 50%;
			transform: translate(-50%, -50%); /* A popup középre igazítása */
			background-color: white;
			border-radius: 8px;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			z-index: 1000;
			width: 100%; /* Használj százalékos szélességet, hogy rugalmasan alkalmazkodjon */
			max-width: 800px; /* Maximális szélesség, hogy ne legyen túl nagy */
			overflow: hidden; /* Az egész popup nem görgethető */
		}

		/* Popup header (cím és bezáró gomb) */
		.popup-header {
			display: flex;
			justify-content: space-between; /* A gomb és a cím széthúzása */
			padding: 10px 20px;
			background-color: #f5f5f5;
			border-bottom: 1px solid #ccc;
			position: sticky; /* A fejléc mindig a popup tetején marad */
			top: 0;
			z-index: 1001; /* Magasabb, mint a tartalom */
		}

        /* Close button with an image */
        .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 20px;
            height: 20px;
            background: url('images/close.svg') no-repeat center center;
            background-size: cover;
            border: none;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

		/* Hover effect for the close button */
		.close-btn:hover {
			transform: scale(1.2); /* Nagyítja a gombot a hover során */
		}

		/* Popup content area (tartalom, görgethető) */
		.popup-content {
			padding: 20px;
			overflow-y: auto; /* Görgethetőség engedélyezése */
			height: calc(80vh - 50px); /* Levonjuk a fejléc magasságát */
		}

		.section {
			background-color: white;
			border-radius: 8px;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			padding: 20px;
			margin-top: 20px;
		}
		
		/* Media query a kisebb képernyők számára */
		@media (max-width: 768px) {
		.popup {
			width: 90%; /* Mobilon a popup szélessége 90%-ra csökken */
			top: 10%; /* Mobilon lentebb kezdődik */
			transform: translate(-50%, 0); /* Kisebb eltérés mobilon */
		}

		.popup-header {
			padding: 10px 15px; /* A fejléc térközének csökkentése mobilon */
		}

		.popup-content {
			padding: 15px;
			height: calc(80vh - 40px); /* Mobilon is görgethetővé válik */
		}
		}
	
		/* Aláhúzott szöveg */
		.popup-link {
			color: #666;
			font-weight: normal;
			font-size: 16px;
			text-decoration: underline; /* Aláhúzás */
			cursor: pointer; /* Kéz kurzor a hover-nél */
			padding: 0; /* Eltávolítjuk a paddingot, hogy ne legyen háttér */
			transition: background-color 0.3s ease, color 0.3s ease; /* Simább animáció */
		}

		/* Hover állapot */
		.popup-link:hover {
			background-color: #dff6f7;
			padding: 4px 8px; /* Kis belső margó a háttérnek */
			border-radius: 8px; /* Lekerekített sarkok */
		}

        .highlight {
            background-color: #DFF6F7;
            border-radius: 4px;
            color: #333;
			max-width: 150px;
			font-size: 14px;
			font-weight: normal;
			line-height: 0.5;

        }
		.separator {
			margin: 20px 0;
			border: none;
			border-top: 1px solid #ccc;
		}
		
		/* Footer styles */
        footer {
            background-color: #00A4B2;
            color: white;
            text-align: center;
            padding: 15px;
        }

        footer a {
            color: white;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }