/*-------------------------
  Fontkészlet beállításai
-------------------------*/
:root {
	--default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--heading-font: "Raleway",  sans-serif;
	--nav-font: "Poppins",  sans-serif;
}

/*-----------------
  Globális színek
-----------------*/
:root { 
	--background-color: #ffffff; /* Háttérszín a teljes webhelyhez, beleértve az egyes részeket is. */
	--default-color: #5C5C5C; /*#212529;*/ /* A teljes webhelyen található szöveges tartalom többségénél használt alapértelmezett szín. */
	--heading-color: #2e4455; /* A címsorok, alcímek és címek színe az egész webhelyen. */
	--accent-color: #428bca; /* Kiemelő szín, amely az Ön márkáját képviseli a webhelyen. Gombokhoz, hivatkozásokhoz és egyéb olyan elemekhez használják, amelyeknek ki kell tűnniük. */
	--topbar-color: #f6f6f6; /* Háttérszín a topbar csíkhoz. */
	--grey-color: #737373;
	--green-color: #7ED957;
/*	--surface-color: #ffffff; /* A felület színe a szakaszokon belüli bekeretezett elemek háttereként használatos, például kártyák, ikondobozok vagy más olyan elemek, amelyek vizuálisan el kell különíteni a globális háttértől. */
/*	--contrast-color: #ffffff; /* A szöveg kontrasztszíne, amely biztosítja az olvashatóságot az ékezetes, címsor vagy alapértelmezett színek hátterében. */
}

/* Navigációs menü színei – A következő színváltozók kifejezetten a navigációs menühöz használatosak. Elkülönülnek a globális színektől, hogy több testreszabási lehetőséget biztosítsanak. */
/*:root {
/*	--nav-color: #212529;  /* A fő navigációs menü hivatkozásainak alapértelmezett színe. */
/*	--nav-hover-color: #428bca; /* A fő navigációs menü hivatkozásaira vonatkozik, amikor az egérmutatót rájuk mutatják vagy aktívak. */
/*	--nav-mobile-background-color: #ffffff; /* A mobil navigációs menü háttérszíneként. */
/*	--nav-dropdown-background-color: #ffffff; /* Háttérszínként használják a legördülő menüelemekhez, amelyek akkor jelennek meg, amikor az egérmutatót az elsődleges navigációs elemek fölé viszi. */
/*	--nav-dropdown-color: #212529; /* A navigációs menü legördülő elemeinek navigációs hivatkozásaihoz használatos. */
/*	--nav-dropdown-hover-color: #428bca; /* A --nav-hover-color-hoz hasonlóan ez a szín a legördülő navigációs hivatkozásokra vonatkozik, amikor az egérmutatót föléjük viszi. */
/*}

/* f5f9fc Szín-előbeállítások – Ezek az osztályok felülírják a globális színeket, ha bármely szakaszra vagy elemre alkalmazzák, így biztosítva az azonos színséma újrafelhasználását. */

/*.light-background {
	--background-color: #1b18c6;
	--surface-color: #ffffff;
}

/*.dark-background {
	--background-color: #263746;
	--default-color: #ffffff;
	--heading-color: #ffffff;
	--surface-color: #385167;
	--contrast-color: #ffffff;
}*/

/*---------------
  Sima görgetés
---------------*/
:root {
  scroll-behavior: smooth;
}

/*-------------------------------------
  Általános stílus és közös osztályok
-------------------------------------*/
body {
	font-family: var(--default-font);
/*	color: var(--default-color);*/
	background-color: var(--background-color);
	font: 16px/1.7em 'Roboto';
}

a {
/*	color: var(--accent-color);*/
	text-decoration: none;
	transition: 0.3s;
}

a:hover {
	color: color-mix(in srgb, var(--accent-color), transparent 25%);
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--heading-color);
	font-family: var(--heading-font);
}

/*------
  Menü
------*/
.navbar-toggler  { border: none; } /* Toggle gomb kerte eltüntetése */

.nav-item  { font-size: 16px; }

.dropdown-item.active { /* Toggle gomb kerte eltüntetése */
	color: var(--accent-color);
	background-color: var(--topbar-color);
}

.navbar-nav .nav-item.active .nav-link { /* Toggle gomb kerte eltüntetése */
	color: var(--accent-color);
}

/*--------------------------
  Hírlevélfeliratkozó form
--------------------------
.newsletter-title {
	font-family: var(--default-font);
	font-size: calc(1rem + 2.8vw);
}
*/
/* XS méret */

	.newsletter-title {
		font-family: var(--default-font);
		font-size: 35.4px;
	}

	.newsletter-text {
		font-family: var(--default-font);
		font-size: 13.4px;
	}

	.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
		height: 44px;
		min-height: 44px;
	}

	.form-floating > label {
		padding: 10px 10px;
	}

	.form-control {
		font-size: 14px;
	}

	label {
		font-size: 12px;                 
	}

	.btn {
		font-size: 12px;
	}

/* SM méret */
@media (min-width: 576px) {
	.newsletter-title {
		font-family: var(--default-font);
		font-size: 35.4px;
	}

	.newsletter-text {
		font-family: var(--default-font);
		font-size: 13.4px;
	}

	.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
		height: 44px;
		min-height: 44px;
	}

	.form-floating > label {
		padding: 10px 10px;
	}

	.form-control {
		font-size: 14px;
	}

	label {
		font-size: 12px;                 
	}

	.btn {
		font-size: 12px;
	}
}
/* MD méret */
@media (min-width: 768px) {
	.newsletter-title {
		font-family: var(--default-font);
		font-size: 35.4px;
	}

	.newsletter-text {
		font-family: var(--default-font);
		font-size: 13.4px;
	}

	.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
		height: 44px;
		min-height: 44px;
	}

	.form-floating > label {
		padding: 10px 10px;
	}

	.form-control {
		font-size: 14px;
	}

	label {
		font-size: 12px;                 
	}

	.btn {
		font-size: 12px;
	}
}
/* LG méret */
@media (min-width: 992px) {
	.newsletter-title {
		font-family: var(--default-font);
		font-size: 45.3px;
	}

	.newsletter-text {
		font-family: var(--default-font);
		font-size: 17.3px;
	}

	.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
		height: 58px;
		min-height: 58px;
	}

	.form-floating > label {
		padding: 15px 10px;
	}

	.form-control {
		font-size: 18px;
	}

	label {
		font-size: 16px;
	}

	.btn {
		font-size: 16px;
	}
}
/* XL méret */
@media (min-width: 1200px) {
	.newsletter-title {
		font-family: var(--default-font);
		font-size: 54.8px;
	}

	.newsletter-text {
		font-family: var(--default-font);
		font-size: 21px;
	}

	.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
		height: 58px;
		min-height: 58px;
	}

	.form-floating > label {
		padding: 15px 10px;
	}

	.form-control {
		font-size: 18px;
	}

	label {
		font-size: 16px;
	}

	.btn {
		font-size: 16px;
	}
}
/* XXL méret */
@media (min-width: 1400px) {
	.newsletter-title {
		font-family: var(--default-font);
		font-size: 64px;
	}

	.newsletter-text {
		font-family: var(--default-font);
		font-size: 24.5px;
	}

	.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
		height: 58px;
		min-height: 58px;
	}

	.form-floating > label {
		padding: 15px 10px;
	}

	.form-control {
		font-size: 18px;
	}

	label {
		font-size: 16px;
	}

	.btn {
		font-size: 16px;
	}
}


.el-input__inner {
	background-color: #428bca;
}