@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i|Playfair+Display:400,400i,700,700i&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
html,
body {
	height: 100%;
	font-family: "Open Sans", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
.saira-stencil-one-regular {
  font-family: "Saira Stencil One", serif;
  font-weight: 400;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #333333;
	font-weight: 600;
}

h1 {
	font-size: 70px;
}

h2 {
	font-family: "Playfair Display", serif;
	font-weight: 400;
	font-size: 36px;
}

h3 {
	font-size: 30px;
	font-family: "Playfair Display", serif;
	font-weight: 400;
}

h4 {
	font-size: 25px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 15px;
	color: #666666;
	line-height: 1.8;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

@media (min-width: 1200px) {
	.container {
		max-width: 1200px;
	}
}



/*---------------------
   Helper CSS
 -----------------------*/

.section-title {
	text-align: center;
	margin-bottom: 55px;
}

.section-title img {
	margin-bottom: 15px;
}

.section-title h2 {
	font-weight: 400;
	font-size: 38px;
	font-family: "Playfair Display", serif;
	text-transform: uppercase;
}

.section-title p {
	padding-top: 15px;
	margin-bottom: 0;
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {

}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

.bg-g-1,
.site-pagination a.active,
.site-pagination a:hover,
.page-top-section:after,
.review-section:after,
.search-model:after,
.hero-section,
.back-to-top {
/*	background: -o-linear-gradient(305deg, #f65d5d 0%, #fdb07d 100%);
	background: linear-gradient(145deg, #28a745 0%, #002002 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f65d5d", endColorstr="#fdb07d", GradientType=1); */
}

.bg-g-2,
.infor-form button,
.site-btn.sb-line-gradient,
.mentes-btn.sb-gradient,
.site-btn.sb-gradient {
	/*background: -o-linear-gradient(305deg, #fdb07d 0%, #f65d5d 100%);*/
	    background: linear-gradient(145deg, #43613f 0%, #43613f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdb07d", endColorstr="#f65d5d", GradientType=1);
}



/*---------------------
  Commom elements
-----------------------*/

/*---------------------
  TeamAnonim
-----------------------*/
.team-title {
    font-weight: 700; /* Vastagabb font */
    font-size: 80px !important; /* Nagyobb betűméret */
    text-align: left; /* Balra igazítás */
    margin-left: 0; /* Bal margó eltávolítása */
    color: #ffffff; /* Fehér szöveg (ha szükséges) */
	Margin-top: 140px ;
	 margin-left: -300px; /* Hely a bal oldaltól */
	 font-family: 'Poppins', sans-serif;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sötét szövegárnyék */
display: flex; /* Flexbox aktiválása */
    flex-direction: column; /* Vertikális irány */
    align-items: flex-start; /* Balra igazítás */

.team {
    position: relative; /* Pozicionálás elindítása */
    top: 30px; /* Csak a kezdő pozíció */
	color: #43613f;
}

.anonim {
    position: relative;
    top: 10px; /* Eltolás a 'Team' szó alá */
	margin-left: 140px; /* Ez tolja el jobbra */
}
    
    
}

@media (max-width: 768px) {
    .team-title {
        font-size: 32px; /* Kisebb szöveg mobilon */
        margin-left: 10px;
    }
}


/* sajat gombok */
.mentes-btn {
	display: inline-block;
	border: none;
	font-size: 16px;
	font-weight: 600;
	min-width: 167px;
	padding: 14px 30px;
	border-radius: 50px;
	text-transform: uppercase;
	color: #fff;
	line-height: normal;
	cursor: pointer;
	text-align: center;
	letter-spacing: 1px;
	 margin-top: 20px; /* Távolság a beviteli mezők és a gomb között */
	
}


.mentes-btn:hover {
	color: #fff;
}

.mentes-btn.sb-white {
	background: #fff;
	color: #f65d5d;
}

.mentes-btn.sb-gradient {
	color: #fff;
	padding: 2px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
	margin-top: 10px;

	    background: #282727 !important;
    border: solid 1px #7bff7e;
}


.mentes-btn.sb-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.mentes-btn.sb-gradient:hover {
	color: #578e52;
}

.mentes-btn.sb-gradient:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
}

.mentes-btn.sb-line-gradient {
	color: #f65d5d;
	padding: 13px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
}

.mentes-btn.sb-line-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.mentes-btn.sb-line-gradient:hover {
	color: #fff;
}

.mentes-btn.sb-line-gradient:hover:after {
	opacity: 0;
	filter: alpha(opacity=0);
}

mentes-map {
	position: relative;
	height: 100%;
	background: #ddd;
	border-radius: 12px;
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.mentes-map {
		height: 400px;
		margin-bottom: 40px;
	}
}

.mentes-map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.mentes-text {
	padding-right: 50px;
	margin-bottom: 40px;
}

.mentes-text h3 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.mentes-form input, .mentes-form textarea {
    width: 80% !important;
    height: 40px !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: 1px solid #7bff7e ;
    background: #1a1a1a !;
    display: inline-block !important;
    margin-bottom: 20px !important;
}
	.mentes-btn {
    margin-top: 20px !important;
}

.diagramm-info {
    display: block !important; /* Blokk szintű elem, hogy a diagram új sorban jelenjen meg */
   /* margin-top: 30px !important; /* A diagram távolsága a form fölött */
    /*padding-top: 20px !important;*/
}
	


.mentes-form textarea {
	height: 140px;
	padding: 15px 28px 10px;
	border-radius: 20px;
	resize: none;
}

.weight-input {
    display: flow !important;
    align-items: center !important;
}

/* Az input mező formázása */
.weight-input input {
    width: 80% !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: 1px solid #7bff7e !important;
    background:#282727 !important;
}
.unit {
    color: #ffffff !important;
    margin-left: 10px !important; /* Kisebb távolság, hogy ne legyen túl szoros */
}


/* A "kg" egység formázása */
.weight-input .unit {
    font-size: 20px;
    color: white; /* Példa: narancssárga szín */
    font-weight: bold;
}



/* buttons */

.site-btn {
	display: inline-block;
	border: none;
	font-size: 16px;
	font-weight: 600;
	min-width: 167px;
	padding: 14px 30px;
	border-radius: 50px;
	text-transform: uppercase;
	color: #fff;
	line-height: normal;
	cursor: pointer;
	text-align: center;
	letter-spacing: 1px;
}

.site-btn:hover {
	color: #fff;
}

.site-btn.sb-white {
	background: #fff;
	color: #f65d5d;
}

.site-btn.sb-gradient {
	color: #fff;
	padding: 2px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
}

.site-btn.sb-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.site-btn.sb-gradient:hover {
	color: #578e52;
}

.site-btn.sb-gradient:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
}

.site-btn.sb-line-gradient {
	color: #f65d5d;
	padding: 13px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
}

.site-btn.sb-line-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.site-btn.sb-line-gradient:hover {
	color: #fff;
}

.site-btn.sb-line-gradient:hover:after {
	opacity: 0;
	filter: alpha(opacity=0);
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #000;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}



/*------------------
  Header section
---------------------*/

.header-section {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 99;
}

.header-top::before {
	content: '';
	display: block;
	height: 3px; /* A csík magassága */
	background: #43613f; /* Csík színe (pl. kék) */
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.header-top {
	position: relative;
	padding: 0 80px;
	background: #000000;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border-radius: 0px;
}
}

.header-top:hover {
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
	background: #f9f9f9;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.header-top {
		padding: 0 30px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.header-top {
		padding: 0 10px;
	}
}

.ht-left {
	float: left;
}

.ht-right {
	float: right;
}

.header-info {
	margin-right: 5px;
	padding: 14px 0;
    font-weight: 700;
    padding-top: 20px;
}

.diagramm-info {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	margin-left: 5px;
	margin-right: 5px;
	/*padding: 14px 0;*/
    font-weight: 700;
    display: block;  /* Alapértelmezésben blokkszintű elem, biztosítja, hogy új sorban jelenjen meg */
    /*margin-top: 30px; /* A diagram távolsága a form fölött */
   /* padding-top: 20px;*/
}


@media only screen and (min-width: 768px) and (max-width: 991px) {
	.header-info {
		margin-right: 0;
	}
}

.header-info:last-child {
	margin-right: 0;
}

.header-info i {
	font-size: 17px;
	color: #43613f;
	margin-right: 10px;
	position: relative;
	top: 4px;
}

.header-info p {
	color: #43613f;
	margin-bottom: 0;

}

.site-logo {
	float: left;
	position: relative;
	z-index: 9;
}

.header-bottom {
	padding: 1px 80px 0;
	background: white;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.header-bottom {
		padding: 15px 30px 0;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.header-bottom {
		padding: 15px 15px 0;
	}
}

.header-bottom .hb-right {
	float: right;
	padding-top: 15px;
}

.header-bottom .hb-switch {
	display: inline-block;
	margin-left: 20px;
	cursor: pointer;
}

.language-select {
	position: relative;
	padding-top: 2px;
	z-index: 99;
	border: none;
	line-height: normal;
	height: 22px;
	padding-left: 0;
	padding-right: 25px;
}

.language-select .current {
	font-size: 16px;
}

.language-select:after {
	margin-top: -1px;
}

.language-select .list {
	left: auto;
	right: 0;
	top: 30px;
}

.main-menu {
	list-style: none;
	text-align: center;
	padding-top: 1px; 
}

.header-content {
    display: flex; /* Flexbox használata a fejléc elrendezéséhez */
    align-items: center; /* Vertikális középre igazítás */
    justify-content: space-between; /* Szétosztja a szöveget és a menüt */
    padding: 10px 20px;
   
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.main-menu {
		display: none;
	}
}

.main-menu li {
	display: inline-block;
	margin-right: 50px;
	position: relative;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.main-menu li {
		margin-right: 15px;
	}
}

.main-menu li:last-child {
	margin-right: 0;
}

.main-menu li>a {
	display: block;
	padding-bottom: 5px;
	font-size: 16px;
	text-transform: initial;
	    color: black;
    font-weight: 700;
	margin-top:10px;
}
}

.main-menu li>a.active {
	border-bottom: 2px solid ##343a40;
}

.main-menu li:hover .sub-menu {
	visibility: visible;
	opacity: 1;
	margin-top: 20px;
}

.main-menu .sub-menu {
	position: absolute;
	list-style: none;
	width: 210px;
	left: 0;
	top: 100%;
	padding: 25px 10px 24px 30px;
	visibility: hidden;
	opacity: 0;
	margin-top: 50px;
	background: #343a40;
	z-index: 99;
	text-align: left;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}

.main-menu .sub-menu:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 20px;
	left: 0;
	top: -20px;
}

.main-menu .sub-menu li {
	display: block;
	margin-bottom: 10px;
}

.main-menu .sub-menu li:last-child {
	margin-bottom: 0;
}

.main-menu .sub-menu li a {
	font-size: 16px;
	color: #666666;
	text-transform: none;
	font-weight: 400;
	position: relative;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}

.main-menu .sub-menu li a::after {
	position: absolute;
	content: "";
	width: 5px;
	height: 5px;
	left: 0;
	top: 10px;
	border-radius: 50px;
	background: #f65d5d;
	opacity: 0;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}

.main-menu .sub-menu li a:hover {
	padding-left: 10px;
}

.main-menu .sub-menu li a:hover::after {
	opacity: 1;
}

.slicknav_menu {
	display: none;
	position: absolute;
	width: 100%;
	top: 13px;
	background: #fff;
	z-index: 99;
	height: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.slicknav_menu {
		display: block;
		top: 70px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.slicknav_menu {
		display: block;
	}
}

.slicknav_nav {


    background: #2b2b2bf0;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-top: none; /* Felül nincs keret */
    border-radius: 0 0 7px 7px; /* Csak az alsó sarkokra vonatkozik */
}


.slicknav_btn {
	position: relative;
	top: -15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.slicknav_btn {
		position: relative;
		top: 0;
		right: 102px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.slicknav_btn {
		/*background: -o-linear-gradient(305deg, #f65d5d 0%, #fdb07d 100%);*/
		background:#43613f;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f65d5d", endColorstr="#fdb07d", GradientType=1);
	}
}

.back-to-top {
	display: none;
	position: fixed;
	width: 49px;
	height: 49px;
	right: 55px;
	bottom: 190px;
	text-align: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	z-index: 999;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.back-to-top {
		right: 40px;
		bottom: 90px;
	}
}

/*------------------
    Infor Model
---------------------*/

.infor-model-warp {
	display: none;
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 9999;
	overflow: hidden;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.infor-model-warp.active {
	display: block;
}

.infor-model-warp.active .infor-model {
	-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
}

.infor-model {
	margin-left: auto;
	padding: 20px 73px;
	width: 525px;
	height: 100%;
	text-align: center;
	background: #fff;
	-webkit-box-shadow: 15px 0px 32px rgba(72, 105, 114, 0.4);
	box-shadow: 15px 0px 32px rgba(72, 105, 114, 0.4);
	-webkit-transform: translateX(110%);
	-ms-transform: translateX(110%);
	transform: translateX(110%);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.infor-model {
		width: 100%;
		overflow-y: auto;
		display: block !important;
		padding: 70px 70px 20px;
	}
}

@media (max-width: 576px) {
	.infor-model {
		padding: 70px 20px 20px;
	}
}

.infor-close {
	position: absolute;
	right: 70px;
	top: 55px;
	font-size: 23px;
	color: #9999;
	cursor: pointer;
	padding: 5px;
}

@media (max-width: 576px) {
	.infor-close {
		right: 30px;
		top: 25px;
	}
}

.infor-head {
	margin-bottom: 10px;
}

.infor-logo {
	display: block;
	margin-bottom: 50px;
}

.insta-imgs {
	display: block;
	margin: 0 -5px 80px;
	padding-top: 20px;
	overflow: hidden;
}

.insta-imgs .insta-item {
	width: 33.333333%;
	float: left;
	padding: 0 5px;
	margin-bottom: 10px;
}

.insta-imgs .insta-item img {
	min-width: 100%;
}

.insta-imgs .insta-item:hover .insta-hover {
	top: calc(50% - 25px);
	opacity: 1;
	filter: alpha(opacity=100);
}

.insta-imgs .insta-item:hover .insta-img:after {
	opacity: 0.9;
	filter: alpha(opacity=90);
}

.insta-imgs .insta-img {
	border-radius: 7px;
	overflow: hidden;
	position: relative;
}

.insta-imgs .insta-img:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #f65d5d;
	background: -o-linear-gradient(305deg, #f65d5d 0%, #fdb07d 100%);
	background: linear-gradient(145deg, #f65d5d 0%, #fdb07d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f65d5d", endColorstr="#fdb07d", GradientType=1);
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.insta-imgs .insta-hover {
	position: absolute;
	top: calc(50% - 50px);
	left: 0;
	width: 100%;
	text-align: center;
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: 99;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.insta-imgs .insta-hover i {
	font-size: 24px;
	color: #fff;
}

.insta-imgs .insta-hover p {
	color: #fff;
	margin-bottom: 0;
}

.infor-form {
	max-width: 300px;
	margin: 0 auto 40px;
	position: relative;
}

.infor-form input {
	width: 100%;
	height: 49px;
	font-size: 14px;
	padding-left: 29px;
	padding-right: 60px;
	border: 1px solid #e6e6e6;
	background: #fafafa;
	border-radius: 90px;
}

.infor-form button {
	position: absolute;
	width: 49px;
	height: 49px;
	right: 0;
	top: 0;
	border-radius: 50%;
	border: none;
}

.insta-social a {
	color: #666666;
	margin-right: 15px;
}

.insta-social a:last-child {
	margin-right: 0;
}

/*------------------
  Header section
---------------------*/

.hero-section {
	position: relative;
	min-height: 1080px;
	height: 100%;
	padding-top: 150px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.hero-section {
		min-height: 990px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.hero-section {
		min-height: auto;
		height: auto;
	}
}

.hero-social-warp {
	padding-top: 100px;
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-webkit-box-pack: center;
	justify-content: center;
	-ms-flex-pack: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 55;
}

@media (max-width: 420px) {
	.hero-social-warp {
		display: none;
	}
}

.hero-social {
	padding-left: 35px;
}

.hero-social a {
	display: block;
	color: #fff;
	width: 100%;
	font-size: 18px;
	margin-bottom: 20px;
	opacity: 0.5;
	filter: alpha(opacity=50);
}

.hero-social a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

.hero-social a:last-child {
	margin-bottom: 0;
}

.hero-social a i {
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

.arrow-buttom {
	position: absolute;
	left: 50%;
	bottom: 31px;
	z-index: 99;
}

.hero-slider {
	height: 100%;
}

.hero-slider .owl-stage-outer,
.hero-slider .owl-stage,
.hero-slider .owl-item {
	height: 100%;
}

.hero-slider.owl-carousel .owl-item img {
	width: auto;
}

.hero-slider .owl-dots {
	position: absolute;
	right: 33px;
	top: 40%;
	width: 13px;
}

@media (max-width: 420px) {
	.hero-slider .owl-dots {
		right: 15px;
	}
}

.hero-slider .owl-dots .owl-dot {
	position: relative;
	display: block;
	width: 13px;
	height: 13px;
	margin-bottom: 15px;
	border: 2px solid #fff;
	border-radius: 50%;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.hero-slider .owl-dots .owl-dot:before {
	position: absolute;
	content: "";
	left: 2px;
	top: 2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.hero-slider .owl-dots .owl-dot:after {
	position: absolute;
	content: "";
	width: 2px;
	height: 0;
	left: 0.23em;
	top: 28px;
	background: #fff;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.hero-slider .owl-dots .owl-dot.active {
	margin-bottom: 56px;
}

.hero-slider .owl-dots .owl-dot.active:before {
	opacity: 1;
	filter: alpha(opacity=100);
}

.hero-slider .owl-dots .owl-dot.active:after {
	height: 26px;
}

.hero-slider .owl-dots .owl-dot:last-child:after {
	display: none;
}

.hs-item {
	height: 100%;
	padding: 0 50px;
}

@media (max-width: 576px) {
	.hs-item {
		padding: 0 20px;
	}
}

.hs-text h2 {
	text-transform: uppercase;
	font-size: 50px;
	color: #fff;
	font-family: "Playfair Display", serif;
	line-height: 1.3;
	margin-bottom: 20px;
}

@media (max-width: 576px) {
	.hs-text h2 {
		font-size: 30px;
	}
}

.hs-text p {
	font-size: 16px;
	color: #fff;
	margin-bottom: 60px;
}

@media (max-width: 576px) {
	.hs-text p {
		margin-bottom: 30px;
	}
}

.hs-style-1 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-webkit-box-pack: center;
	justify-content: center;
	-ms-flex-pack: center;
	-moz-align-items: flex-end;
	-ms-align-items: flex-end;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	height: 100%;
	padding-bottom: 20px;
}

.hs-style-1 img {
	max-height: 100%;
	position: relative;
	top: 50px;
	opacity: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.hs-style-1 {
		padding: 90px 0 100px;
	}
}

.hs-style-2 {
	height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.hs-style-2 {
		padding-top: 0;
		padding: 90px 0 100px;
	}
}

.hs-style-2 .hs-img {
	position: relative;
	left: 150px;
	top: -15px;
	max-width: 850px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.hs-style-2 .hs-img {
		left: 0;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.hs-style-2 .hs-img {
		display: none;
	}
}

.hs-style-2 .hs-text {
	max-width: 610px;
}

.hs-style-2 .hs-text h2 {
	padding-right: 76px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.hs-style-2 .hs-text h2 {
		padding-right: 0;
	}
}

.hs-style-2 .hs-text-warp {
	padding-top: 50px;
	padding-left: 170px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.hs-style-2 .hs-text-warp {
		padding-left: 0;
		padding-top: 0;
		text-align: center;
		margin: 0 auto;
	}
}

.hs-style-2 img,
.hs-style-2 h2,
.hs-style-2 p,
.hs-style-2 .site-btn {
	opacity: 0;
	top: 50px;
	position: relative;
}

.hs-style-3 {
	padding-top: 160px;
	position: relative;
	height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.hs-style-3 {
		padding: 90px 0 100px;
	}
}

.hs-style-3 .hs-text {
	margin: 0 auto;
	max-width: 810px;
}

.hs-style-3 .hs-img {
	padding: 0 50px;
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 100%;
	text-align: center;
}

.hs-style-3 .hs-img img {
	margin: 0 auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.hs-style-3 .hs-img {
		display: none;
	}
}

.hs-style-3 img,
.hs-style-3 h2,
.hs-style-3 p,
.hs-style-3 .site-btn {
	opacity: 0;
	top: 50px;
	position: relative;
}

.owl-item.active .hs-style-1 img {
	opacity: 1;
	top: 0;
	-webkit-transition: all 0.5s ease 0.4s;
	-o-transition: all 0.5s ease 0.4s;
	transition: all 0.5s ease 0.4s;
}

.owl-item.active .hs-style-2 img,
.owl-item.active .hs-style-2 h2,
.owl-item.active .hs-style-2 p,
.owl-item.active .hs-style-2 .site-btn {
	opacity: 1;
	top: 0;
}

.owl-item.active .hs-style-2 h2 {
	-webkit-transition: all 0.5s ease 0.4s;
	-o-transition: all 0.5s ease 0.4s;
	transition: all 0.5s ease 0.4s;
}

.owl-item.active .hs-style-2 p,
.owl-item.active .hs-style-2 img {
	-webkit-transition: all 0.5s ease 0.6s;
	-o-transition: all 0.5s ease 0.6s;
	transition: all 0.5s ease 0.6s;
}

.owl-item.active .hs-style-2 .site-btn {
	-webkit-transition: all 0.5s ease 0.8s;
	-o-transition: all 0.5s ease 0.8s;
	transition: all 0.5s ease 0.8s;
}

.owl-item.active .hs-style-3 img,
.owl-item.active .hs-style-3 h2,
.owl-item.active .hs-style-3 p,
.owl-item.active .hs-style-3 .site-btn {
	opacity: 1;
	top: 0;
}

.owl-item.active .hs-style-3 h2 {
	-webkit-transition: all 0.5s ease 0.4s;
	-o-transition: all 0.5s ease 0.4s;
	transition: all 0.5s ease 0.4s;
}

.owl-item.active .hs-style-3 p {
	-webkit-transition: all 0.5s ease 0.6s;
	-o-transition: all 0.5s ease 0.6s;
	transition: all 0.5s ease 0.6s;
}

.owl-item.active .hs-style-3 .site-btn {
	-webkit-transition: all 0.5s ease 0.8s;
	-o-transition: all 0.5s ease 0.8s;
	transition: all 0.5s ease 0.8s;
}

.owl-item.active .hs-style-3 img {
	-webkit-transition: all 0.5s ease 1s;
	-o-transition: all 0.5s ease 1s;
	transition: all 0.5s ease 1s;
}

.search-model {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	padding: 0 20px;
	background: #000;
	z-index: 99999;
}

.search-model:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.9;
	filter: alpha(opacity=90);
}

.search-close-switch {
	position: absolute;
	right: 70px;
	top: 55px;
	padding: 5px;
	font-size: 23px;
	color: #fff;
	cursor: pointer;
	z-index: 999;
}

.search-moderl-form {
	position: relative;
	z-index: 999;
	width: 100%;
	max-width: 830px;
}

.search-moderl-form input {
	width: 100%;
	height: 40px;
	font-size: 20px;
	color: #fff;
	padding-bottom: 15px;
	border: none;
	border-bottom: 2px solid #fff;
	background: transparent;
}

.search-moderl-form button {
	position: absolute;
	right: 0;
	top: 0;
	border: none;
	background: transparent;
}

.search-moderl-form ::-webkit-input-placeholder {
	color: #fff;
}

.search-moderl-form ::-moz-placeholder {
	color: #fff;
}

.search-moderl-form :-ms-input-placeholder {
	color: #fff;
}

.search-moderl-form ::-ms-input-placeholder {
	color: #fff;
}

.search-moderl-form ::placeholder {
	color: #fff;
}

/*------------------
  About section
---------------------*/

.about-item {
	margin-bottom: 30px;
}

.about-item .ai-icon {
	float: left;
	width: 112px;
	height: 112px;
	border: 1px solid #f1f4f4;
	margin-right: 20px;
	border-radius: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-webkit-box-pack: center;
	justify-content: center;
	-ms-flex-pack: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

@media (max-width: 576px) {
	.about-item .ai-icon {
		float: none;
		margin-bottom: 20px;
	}
}

.about-item .ai-text {
	overflow: hidden;
	padding-top: 10px;
}

.about-item .ai-text h4 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.about-item .ai-text p {
	font-size: 16px;
	margin-bottom: 0;
}

.about-item.icon-box {
	text-align: center;
}

.about-item.icon-box .ai-icon {
	float: none;
	margin: 0 auto 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.about-img {
		text-align: center;
		margin-bottom: 50px;
	}
}

/*------------------
  Classes section
---------------------*/

.classes-section {
	background: #f9f2f0;
}

.classes-slider .owl-dots {
	text-align: center;
}

.classes-slider .owl-dots .owl-dot {
	width: 8px;
	height: 8px;
	background: #cccccc;
	border-radius: 20px;
	margin-right: 7px;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.classes-slider .owl-dots .owl-dot:last-child {
	margin-right: 0;
}

.classes-slider .owl-dots .owl-dot.active {
	width: 26px;
	background: #f65d5d;
}

.classes-item {
	text-align: center;
	background: #fff;
	padding-top: 40px;
	margin-top: 15px;
	margin-bottom: 50px;
	border-radius: 13px;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.classes-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.classes-item .ci-img img {
	width: 280px;
	height: 280px;
	border-radius: 50%;
	margin: 0 auto 25px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px),
only screen and (min-width: 768px) and (max-width: 991px) {
	.classes-item .ci-img img {
		width: 220px;
		height: 220px;
	}
}

@media (max-width: 420px) {
	.classes-item .ci-img img {
		width: 150px;
		height: 150px;
	}
}

.classes-item .ci-text {
	padding: 0 15px 10px;
}

.classes-item h4 {
	font-family: "Playfair Display", serif;
	font-weight: 400;
	margin-bottom: 15px;
}

.classes-item h4 a {
	color: #333333;
}

.classes-item h4 a:hover {
	color: #f65d5d;
}

.classes-item .ci-meta {
	display: inline-block;
	font-size: 14px;
	color: #666666;
	margin-right: 10px;
	margin-bottom: 15px;
}

.classes-item .ci-meta:last-child {
	margin-right: 0;
}

.classes-item .ci-meta i {
	color: #f65d5d;
	font-size: 15px;
	margin-right: 10px;
}

.classes-item .ci-bottom {
	border-top: 1px solid #e6e6e6;
	padding: 25px 30px;
	text-align: left;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 420px) {
	.classes-item .ci-bottom {
		padding: 25px 15px;
		text-align: center;
	}
}

.classes-item .ci-author {
	display: inline-block;
}

.classes-item .ci-author img {
	width: 40px;
	height: 40px;
	float: left;
	border-radius: 50%;
	margin-right: 11px;
}

.classes-item .ci-author .author-text {
	overflow: hidden;
}

.classes-item .ci-author h6 {
	font-family: "Playfair Display", serif;
	font-weight: 400;
}

.classes-item .ci-author p {
	color: #f65d5d;
	margin-bottom: 0;
}

.classes-item .site-btn {
	float: right;
	font-size: 14px;
	padding: 11px 0px;
	min-width: 124px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px),
(max-width: 420px) {
	.classes-item .site-btn {
		float: none;
		margin-top: 15px;
	}
}

.classes-item-warp {
	padding-right: 20px;
	margin-bottom: 55px;
}

.circle-select {
	height: 49px;
	line-height: 47px;
	min-width: 234px;
	padding-left: 29px;
	border-radius: 41px;
	border: 1px solid #e6e6e6;
	background: #fafafa;
}

.circle-select .current {
	font-size: 14px;
	color: #999999;
}

.circle-select .list {
	left: auto;
	right: 0;
}

.circle-select:after {
	border-bottom: 1px solid #9f9f9f;
	border-right: 1px solid #9f9f9f;
	right: 22px;
}

.classes-top {
	padding-right: 20px;
	margin-bottom: 40px;
}

.classes-top p {
	padding-top: 5px;
}

.classes-top .circle-select {
	float: right;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.classes-top .circle-select {
		float: none;
	}
}

.classes-filter .circle-select {
	float: none;
	width: 100%;
	margin-bottom: 20px;
}

.classes-filter h3 {
	font-size: 20px;
	margin-bottom: 20px;
	padding-top: 10px;
}

.classes-filter .cf-cal {
	display: inline-table;
	margin-right: 25px;
}

.classes-filter .cf-radio input[type=checkbox] {
	visibility: hidden;
	position: absolute;
}

.classes-filter .cf-radio input[type=checkbox]:checked+label:before {
	opacity: 1;
	filter: alpha(opacity=100);
}

.classes-filter .cf-radio label {
	font-size: 16px;
	color: #999999;
	padding-left: 27px;
	position: relative;
	cursor: pointer;
}

.classes-filter .cf-radio label:after {
	position: absolute;
	content: "";
	width: 18px;
	height: 18px;
	left: 0;
	top: 3px;
	border: 1px solid #e7e7e7;
	border-radius: 40px;
}

.classes-filter .cf-radio label:before {
	position: absolute;
	content: "";
	width: 18px;
	height: 18px;
	left: 0;
	top: 3px;
	border-radius: 40px;
	background: url("../img/icons/radio-check.png") no-repeat scroll 0 0;
	z-index: 1;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.classes-filter .site-btn {
	margin-top: 20px;
}

.popular-classes-widget {
	margin: 0 -7px;
}

.popular-classes-widget .owl-dots {
	text-align: center;
}

.popular-classes-widget .owl-dots .owl-dot {
	width: 8px;
	height: 8px;
	background: #cccccc;
	border-radius: 20px;
	margin-right: 7px;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.popular-classes-widget .owl-dots .owl-dot:last-child {
	margin-right: 0;
}

.popular-classes-widget .owl-dots .owl-dot.active {
	width: 26px;
	background: #f65d5d;
}

.popular-classes-widget .owl-item {
	padding: 0 8px;
}

.pc-item {
	margin: 3px 0 25px;
	overflow: hidden;
	border-radius: 13px;
	-webkit-box-shadow: 0px 5px 7px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 7px rgba(72, 105, 114, 0.15);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.pc-item .pc-thumb {
	height: 200px;
}

.pc-item .pc-text {
	overflow: hidden;
	padding: 30px 15px 15px;
	text-align: center;
}

@media (max-width: 420px) {
	.pc-item .pc-text {
		padding: 30px 15px;
	}
}

.pc-item .pc-text h4 {
	font-size: 20px;
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.pc-item .pc-text h4 a {
	color: #333333;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.pc-item .pc-text h4 a:hover {
	color: #f65d5d;
}

.pc-item .pc-text ul {
	list-style: none;
}

.pc-item .pc-text ul li {
	font-size: 14px;
	margin-bottom: 5px;
}

.pc-item .pc-text ul li i {
	color: #f65d5d;
	font-size: 16px;
	position: relative;
	top: 3px;
	margin-right: 10px;
}

/*------------------
  Trainer section
---------------------*/

.trainer-section {
	padding-bottom: 80px;
}

.trainer-slider {
	margin: 0 -30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.trainer-slider {
		margin: 0;
	}
}

.trainer-slider .ts-item {
	padding: 80px 25px 0;
	margin-bottom: 32px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px),
only screen and (min-width: 1200px) and (max-width: 1440px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.trainer-slider .owl-nav {
		text-align: center;
		padding-top: 50px;
	}
}

.trainer-slider .owl-nav .owl-prev,
.trainer-slider .owl-nav .owl-next {
	width: 48px;
	height: 34px;
	position: absolute;
	top: 55%;
	left: -100px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px),
only screen and (min-width: 1200px) and (max-width: 1440px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.trainer-slider .owl-nav .owl-prev,
	.trainer-slider .owl-nav .owl-next {
		position: relative;
		left: 0;
		top: 0;
		margin: 0 10px;
	}
}

.trainer-slider .owl-nav .owl-prev:after,
.trainer-slider .owl-nav .owl-next:after {
	position: absolute;
	content: url("../img/icons/arrow-circle.png");
	left: 0;
	top: 0;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.trainer-slider .owl-nav .owl-prev:hover:after,
.trainer-slider .owl-nav .owl-next:hover:after {
	content: url("../img/icons/arrow-circle-c.png");
}

.trainer-slider .owl-nav .owl-next {
	left: auto;
	right: -99px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px),
only screen and (min-width: 1200px) and (max-width: 1440px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.trainer-slider .owl-nav .owl-next {
		position: relative;
		left: 0;
		top: 0;
		right: 0;
	}
}

.trainer-slider .owl-nav .owl-next:after {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
	top: -0.39em;
}

.trainer-item {
	display: block;
	position: relative;
	padding: 70px 40px 40px;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	border-radius: 14px;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

@media only screen and (min-width: 992px) and (max-width: 1200px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.trainer-item {
		padding: 0 20px 40px;
	}
}

.trainer-item .ti-img {
	position: absolute;
	right: 0;
	bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1200px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.trainer-item .ti-img {
		position: relative;
		text-align: center;
		top: -30px;
	}
}

.trainer-item .ti-img img {
	width: auto;
	max-width: 290px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.trainer-item .ti-img img {
		margin: 0 auto;
	}
}

@media (max-width: 420px) {
	.trainer-item .ti-img img {
		max-width: 100%;
	}
}

.trainer-item h4 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 10px;
}

.trainer-item h6 {
	color: #f65d5d;
	margin-bottom: 20px;
}

.trainer-item .ti-text {
	max-width: 250px;
	position: relative;
	z-index: 99;
	background: #fff;
}

@media only screen and (min-width: 992px) and (max-width: 1200px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.trainer-item .ti-text {
		text-align: center;
		margin: 0 auto;
	}
}

.trainer-item .ti-social a {
	display: inline-block;
	width: 34px;
	height: 34px;
	padding-top: 6px;
	margin-right: 6px;
	margin-bottom: 14px;
	font-size: 15px;
	text-align: center;
	color: #333333;
	background: #f2f4f5;
	border-radius: 50%;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.trainer-item .ti-social a:hover {
	color: #fff;
	background: #f65d5d;
}

.trainer-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.trainers-page-section .trainer-item {
	margin-bottom: 90px;
}

/*------------------
  Review section
---------------------*/

.review-section {
	position: relative;
}

.review-section:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.92;
	filter: alpha(opacity=92);
}

.review-section .container {
	position: relative;
	z-index: 2;
}

.review-slider .owl-dots {
	padding-top: 40px;
	text-align: center;
}

.review-slider .owl-dots .owl-dot {
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 20px;
	margin-right: 7px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.review-slider .owl-dots .owl-dot:last-child {
	margin-right: 0;
}

.review-slider .owl-dots .owl-dot.active {
	width: 26px;
	opacity: 1;
	filter: alpha(opacity=100);
}

.review-item {
	text-align: center;
	padding-top: 3px;
}

.review-item .ri-img {
	width: 120px;
	height: 120px;
	margin: 0 auto 45px;
	padding: 3px;
	background: #fff;
	border-radius: 50%;
	position: relative;
}

.review-item .ri-img img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	z-index: 1;
}

.review-item .ri-img:after {
	position: absolute;
	content: url("../img/icons/quota.png");
	top: -3px;
	right: -50px;
	opacity: 0.2;
	filter: alpha(opacity=20);
}

.review-item p {
	font-size: 18px;
	margin-bottom: 50px;
}

.review-item h4 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	font-weight: 400;
	margin-bottom: 12px;
}

.review-item h6 {
	font-weight: 400;
}

/*------------------
  Event section
---------------------*/

.anonim-builder {
    margin-right: auto !important;
    font-size: 30px;
    font-weight: bold;
    color: #43613f;
    font-family: "Saira Stencil One", serif;
	 margin-left: -140px; /* Balra tolás */
	 text-shadow: 0 0 10px #9cc48a, 0 0 20px #9cc48a, 0 0 30px #9cc48a; /* Fényhatás */
}

.event-video {
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	margin-right: 8px;
}

@media only screen and (min-width: 992px) and (max-width: 1200px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.event-video {
		margin-right: 0;
		margin-bottom: 50px;
	}
}

.event-video img {
	width: 100%;
}

.event-video .video-popup {
	position: absolute;
	left: calc(50% - 43px);
	top: calc(50% - 42px);
}

.event-item {
	margin-bottom: 30px;
	border-radius: 14px;
	overflow: hidden;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.event-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.event-item:last-child {
	margin-bottom: 0;
}

.event-item .ei-img {
	width: 222px;
	float: left;
	margin-right: 30px;
}

@media (max-width: 420px) {
	.event-item .ei-img {
		width: 100%;
		float: none;
	}
}

.event-item .ei-text {
	overflow: hidden;
	padding-top: 30px;
	padding-right: 15px;
}

@media (max-width: 576px) {
	.event-item .ei-text {
		padding-top: 15px;
	}
}

@media (max-width: 420px) {
	.event-item .ei-text {
		padding: 30px 15px;
	}
}

.event-item .ei-text h4 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.event-item .ei-text h4 a {
	color: #333333;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.event-item .ei-text h4 a:hover {
	color: #f65d5d;
}

.event-item .ei-text ul {
	list-style: none;
}

.event-item .ei-text ul li {
	font-size: 14px;
	margin-bottom: 5px;
}

.event-item .ei-text ul li i {
	color: #f65d5d;
	font-size: 16px;
	position: relative;
	top: 3px;
	margin-right: 10px;
}

.events-page-section .event-item {
	margin-bottom: 50px;
}

.event-filter-warp {
	padding: 35px 45px;
	border-radius: 13px;
	margin-top: -60px;
	position: relative;
	z-index: 999;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

@media (max-width: 420px) {
	.event-filter-warp {
		padding: 35px 20px;
	}
}

.event-filter-warp p {
	padding-top: 10px;
	margin-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1200px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.event-filter-warp p {
		padding-top: 0;
		margin-bottom: 15px;
	}
}

.event-filter-form {
	margin-left: -30px;
	text-align: right;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.event-filter-form {
		text-align: left;
		margin-left: 0;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.event-filter-form {
		text-align: center;
		margin-left: 0;
	}
}

.event-filter-form .ef-item {
	width: 202px;
	position: relative;
	display: inline-block;
	margin-right: 9px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.event-filter-form .ef-item {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}
}

.event-filter-form .ef-item input {
	width: 100%;
	height: 49px;
	padding-left: 29px;
	padding-right: 40px;
	border-radius: 50px;
	border: 1px solid #e6e6e6;
	background: #fafafa;
	font-size: 14px;
}

.event-filter-form .ef-item i {
	position: absolute;
	right: 20px;
	top: 16px;
	font-size: 16px;
	color: #a6a6a6;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.event-filter-form .site-btn {
		margin-top: 10px;
	}
}

/*------------------
  Kicsi logo belepes
---------------------*/

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}


.logo {
    width: 100%;
    height: auto;
    margin-top: -40px; /* Emeli a képét*/
     animation: shake 3.2s ease-in-out;
}
/*------------------
  Pricing section
---------------------*/

.pricing-section {
	background: #43613f;
}

.pricing-item {
	text-align: center;
	background: #fff;
	padding-bottom: 40px;
	margin: 15px 0;
	border-radius: 1px;
	overflow: hidden;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.pricing-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.pricing-item .pi-top {
	height: 156px;
	padding-top: 26px;
	background: #f65d5d;
}

.pricing-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.pricing-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.pricing-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.pricing-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.pricing-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.pricing-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.pricing-item.begginer .pi-top {
	background: #fdb07d;
}

.pricing-item.entermediate .pi-top {
    background: linear-gradient(180deg, #413f3f 0%, #413f3f 100%);
}

.pricing-item.advanced .pi-top {
	background: #f2786f;
}

.pricing-item.professional .pi-top {
	background: #f65d5d;
}





/*------------------
  Súly
---------------------*/

.weight-title { 
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
	position: relative; /* Szükséges az ::after pseudo-elemhez */
	margin-bottom: 5%;
}



.weight-title i {
    font-size: 30px;
    color: #7bff7e;
    /*margin-left: 45px;*/
	
	
}


.weight-description {
     font-family: 'Poppins';
    font-size: 13px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
}


.weight-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 3px;
    background: linear-gradient(to right,rgba(255, 255, 255, 0) ,rgba(123 255 126/ 99%), rgba(255, 255, 255, 0));
    border-radius: 2px;
    margin-left: 15%;
}

.graph-item {
width:100%;
height: fit-content;
text-align: center !important;
    background: #413f3f !important;
    padding-bottom: 20px !important;
    margin: 5px 5px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15) !important;
    box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15) !important;
    -webkit-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    transition: all 0.4s !important;
    border: solid 2px #7bff7e !important;
    /*margin: 0 auto !important; /* Középre helyezés */
}

.meresek-section {
	background: #f9f2f0;
}

.meresek-item {

height: fit-content;
text-align: center !important;
    background: #413f3f !important;
    padding-bottom: 20px !important;
    margin: 15px 5px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15) !important;
    box-shadow:0px 0px 13px rgb(14 255 7) !important;
    -webkit-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    transition: all 0.4s !important;
    border: solid 2px #7bff7e !important;
    /*margin: 0 auto !important; /* Középre helyezés */

}


.meresek-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.meresek-item .pi-top {
    height: 120px; /* Magasság növelése, ha több helyre van szükség */
    padding-top: 30px; /* A padding növelése, hogy több hely legyen a tartalom körül */
    background: #f65d5d; /* Megmaradt a piros háttér */
    text-align: center; /* Szöveg és ikon középre igazítása */
}
}

.meresek-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.meresek-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.meresek-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.meresek-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.meresek-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.meresek-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.meresek-item.begginer .pi-top {
	background: #fdb07d;
}

.meresek-item.entermediate .pi-top {
       background: #00000000 !important;
}

.meresek-item.advanced .pi-top {
	background: #f2786f;
}

.meresek-item.professional .pi-top {
	background: #f65d5d;
}


#weightChart {
	

	
}

.chart_container {
    background: white;
	min-width: 350px;
	min-height:200px;
}
#bloodSugarChart {
    max-width: fit-content;
}
/*------------------
  Mérések
---------------------*/

/*------------------
  Sign up section
---------------------*/

.signup-map {
	position: relative;
	height: 100%;
	background: #ddd;
	border-radius: 12px;
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.signup-map {
		height: 400px;
		margin-bottom: 40px;
	}
}

.signup-map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.singup-text {
	padding-right: 50px;
	margin-bottom: 40px;
}

.singup-text h3 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.singup-form input, .singup-form textarea {
    width: 80%;
    height: 40px;
    padding: 1px 20px;
    font-size: 19px;
    color: #000000;
    border-radius: 0px;
    margin-bottom: 10px;
    border: 1px solid #43613f;
    background: #fafafa;
}

.singup-form textarea {
	height: 140px;
	padding: 15px 28px 10px;
	border-radius: 20px;
	resize: none;
}

/*------------------
  Gallery section
---------------------*/

.gs-item {
	display: block;
	overflow: hidden;
	position: relative;
}

.gs-item:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #f65d5d;
	background: -o-linear-gradient(305deg, #f65d5d 0%, #fdb07d 100%);
	background: linear-gradient(145deg, #f65d5d 0%, #fdb07d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f65d5d", endColorstr="#fdb07d", GradientType=1);
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.gs-item .gs-hover {
	position: absolute;
	top: calc(50% - 53px);
	left: 0;
	width: 100%;
	text-align: center;
	padding-top: 30px;
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: 99;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

@media (max-width: 576px) {
	.gs-item .gs-hover {
		top: calc(50% - 40px);
	}
}

.gs-item .gs-hover i {
	font-size: 26px;
	color: #fff;
	margin-bottom: 5px;
}

@media (max-width: 576px) {
	.gs-item .gs-hover i {
		font-size: 18px;
	}
}

.gs-item .gs-hover p {
	font-size: 25px;
	font-family: "Playfair Display", serif;
	color: #fff;
	margin-bottom: 0;
}

@media (max-width: 576px) {
	.gs-item .gs-hover p {
		font-size: 16px;
	}
}

.gs-item:hover .gs-hover {
	padding-top: 10px;
	opacity: 1;
	filter: alpha(opacity=100);
}

.gs-item:hover:after {
	opacity: 0.9;
	filter: alpha(opacity=90);
}

.footer-section {
	padding-top: 70px;
}

.footer-widget {
	margin-bottom: 30px;
}

.footer-widget .about-widget {
	max-width: 280px;
}

.footer-widget .about-widget img {
	margin-bottom: 30px;
}

.footer-widget .fw-title {
	font-size: 20px;
	margin-bottom: 30px;
	padding-top: 10px;
	text-transform: uppercase;
}

.footer-widget ul {
	list-style: none;
}

.footer-widget ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 10px;
}

.footer-widget ul li i {
	font-size: 18px;
	color: #f65d5d;
	position: relative;
	top: 3px;
	margin-right: 10px;
}

.footer-widget ul li a {
	color: #666666;
}

.footer-widget ul li a:hover {
	color: #f65d5d;
}

.footer-widget .infor-form {
	margin: 30px 0 0;
}

.footer-bottom {
	margin-top: 30px;
	border-top: 1px solid #e6e6e6;
	padding: 20px 0;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.footer-social {
		text-align: center;
		margin-bottom: 15px;
	}
}

.footer-social a {
	color: #666666;
	margin-right: 15px;
}

.footer-social a:last-child {
	margin-right: 0;
}

.copyright {
	font-size: 14px;
	color: #666666;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.copyright {
		text-align: center;
	}
}

.copyright p {
	margin-bottom: 0;
}

.copyright a {
	color: #666666;
	font-weight: 600;
}

.copyright a:hover {
	color: #f65d5d;
}

.copyright i {
	color: #f65d5d;
}

/*----------------
  Other Pages
------------------
==================*/

.page-top-section {
	height: 600px;
	position: relative;
	padding-top: 220px;
	text-align: center;
	background: black;
	background-position: center;
	background-repeat: repeat;
}

.page-top-section.page-sp {
	padding-top: 200px;
}

.page-top-section:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.92;
	 background-color: #ffffff
	filter: alpha(opacity=92);
}

.page-top-section .container {
	position: relative;
	z-index: 9;
}

.page-top-section h2 {
	font-size: 55px;
	text-transform: uppercase;
	margin-bottom: 20px;
	text-shadow: 5px 5px 15px #000;
}

.page-top-section p {
	font-size: 18px;
}

/*--------------
  About Page
-----------------*/

.service-section {
	padding-bottom: 80px;
}

.wwd-section {
	background-color: #f9f2f0;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.wwd-section {
		background-position: right center;
	}
}

.wwd-text {
	padding-left: 100px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.wwd-text {
		padding-left: 0;
	}
}

.wwd-text h3 {
	text-transform: uppercase;
	margin-bottom: 15px;
}

.wwd-text p {
	margin-bottom: 40px;
}

.single-progress-item {
	margin-bottom: 40px;
}

.single-progress-item:last-child {
	margin-bottom: 0;
}

.single-progress-item p {
	font-size: 16px;
	color: #333333;
	line-height: 1;
	margin-bottom: 15px;
}

.single-progress-item .progress-bar-style {
	height: 8px;
	width: 100%;
	background: #fdb07d;
	border-radius: 15px;
}

.single-progress-item .progress-bar-style .bar-inner {
	position: relative;
	height: 100%;
	border-radius: 15px;
}

.single-progress-item .progress-bar-style .bar-inner span {
	position: absolute;
	bottom: 100%;
	right: -18px;
	font-size: 14px;
	color: #fff;
	line-height: 1;
	margin-bottom: 15px;
	padding: 3px 7px;
	border-radius: 3px;
	background: #f65d5d;
}

.single-progress-item .progress-bar-style .bar-inner span:after {
	position: absolute;
	content: "";
	height: 8px;
	width: 8px;
	left: calc(50% - 4px);
	bottom: -4px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	background: #f65d5d;
}

.about-blog-section {
	padding-bottom: 80px;
}

/*----------------------
  Classes details page
-----------------------*/

.classes-details {
	padding-right: 20px;
	margin-bottom: 50px;
}

.classes-details .classes-preview img {
	border-radius: 12px;
	margin-bottom: 40px;
	min-width: 100%;
}

.classes-details h2 {
	font-size: 30px;
	margin-bottom: 10px;
}

.classes-details .cd-meta {
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.classes-details .cd-meta {
		margin-right: 0;
	}
}

.classes-details .cd-meta:last-child {
	margin-right: 0;
}

.classes-details .cd-meta i {
	font-size: 20px;
	color: #f65d5d;
	margin-right: 10px;
	position: relative;
	top: 3px;
}

.classes-details .cd-meta p {
	color: #333333;
	margin-bottom: 0;
}

.classes-details .cd-price {
	display: inline-block;
	padding: 0px 18px 5px;
	font-size: 30px;
	font-family: "Playfair Display", serif;
	color: #fff;
	background: #f65d5d;
	border-radius: 13px;
	margin-bottom: 60px;
}

.classes-details p {
	margin-bottom: 30px;
}

.classes-details blockquote {
	margin-top: 60px;
	font-style: italic;
	font-size: 16px;
	color: #666666;
	padding-right: 20px;
	line-height: 1.8;
	position: relative;
	margin-bottom: 45px;
}

.classes-details blockquote:after {
	position: absolute;
	content: "";
	width: 62px;
	height: 52px;
	left: -30px;
	top: -12px;
	background: url("../img/icons/quota-2.png") no-repeat scroll 0 0/cover;
}

.classes-details h3 {
	font-size: 20px;
	margin-bottom: 20px;
}

.classes-details ul {
	list-style: none;
}

.classes-details ul li {
	position: relative;
	padding-left: 29px;
	margin-bottom: 5px;
	font-size: 16px;
	color: #666666;
}

.classes-details ul li i {
	position: absolute;
	left: 0;
	top: 3px;
	color: #f65d5d;
	font-size: 16px;
}

.classes-details .cd-cata i {
	font-size: 20px;
	color: #f65d5d;
	margin-right: 10px;
	position: relative;
	top: 3px;
}

.classes-details .cd-cata p {
	color: #666666;
	margin-bottom: 0;
}

.classes-details .cd-social a {
	display: inline-block;
	width: 34px;
	height: 34px;
	padding-top: 6px;
	margin-right: 6px;
	margin-bottom: 14px;
	font-size: 15px;
	text-align: center;
	color: #333333;
	background: #f2f4f5;
	border-radius: 50%;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.classes-details .cd-social a:hover {
	color: #fff;
	background: #f65d5d;
}

.classes-other-slider {
	margin: 0 -50px 70px;
	left: 25px;
}

.classes-other-slider .owl-item {
	padding: 0 25px;
}

@media (max-width: 576px),
only screen and (min-width: 576px) and (max-width: 767px) {
	.classes-other-slider {
		margin: 0 -25px 70px;
	}
}

.classes-other-slider .owl-nav {
	position: absolute;
	right: 18px;
	top: -80px;
}

.classes-other-slider .owl-nav .owl-next,
.classes-other-slider .owl-nav .owl-prev {
	color: #999999;
}

.classes-other-slider .owl-nav .owl-next:hover,
.classes-other-slider .owl-nav .owl-prev:hover {
	color: #f65d5d;
}

@media (max-width: 576px) {
	.classes-other-slider .owl-nav {
		position: relative;
		right: 0;
		top: 0;
		text-align: center;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.classes-other-slider .ci-bottom {
		padding: 25px 15px;
		text-align: center;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.classes-other-slider .site-btn {
		float: none;
		margin-top: 15px;
	}
}

.comment-title {
	font-size: 25px;
	margin-bottom: 50px;
	text-transform: uppercase;
}

.comment-list {
	list-style: none;
	padding-right: 20px;
	margin-bottom: 80px;
}

.comment-list li {
	margin-bottom: 40px;
	border-bottom: 1px solid #e6e6e6;
}

.comment-list .comment-pic {
	float: left;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin-right: 25px;
}

@media (max-width: 576px) {
	.comment-list .comment-pic {
		width: 50px;
		height: 50px;
	}
}

@media (max-width: 420px) {
	.comment-list .comment-pic {
		float: none;
		margin-bottom: 10px;
	}
}

.comment-list .comment-text {
	overflow: hidden;
}

.comment-list .comment-text h3 {
	display: inline-block;
	font-size: 20px;
	margin-right: 20px;
	margin-bottom: 10px;
}

.comment-list .comment-text .comment-date {
	display: inline-block;
	font-size: 14px;
	color: #666666;
	margin-bottom: 10px;
}

.comment-list .comment-text .comment-date i {
	color: #f65d5d;
	position: relative;
	font-size: 16px;
	top: 3px;
	margin-right: 10px;
}

.comment-list .comment-text .reply {
	display: inline-block;
	color: #f65d5d;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 35px;
}

.comment-list .comment-text .reply i {
	position: relative;
	font-size: 16px;
	top: 3px;
	margin-right: 10px;
}

.comment-list .comment-sub-list {
	padding-left: 125px;
	list-style: none;
}

@media (max-width: 576px) {
	.comment-list .comment-sub-list {
		padding-left: 75px;
	}
}

@media (max-width: 420px) {
	.comment-list .comment-sub-list {
		padding-left: 25px;
	}
}

.comment-list .comment-sub-list li {
	padding-top: 40px;
	border-top: 1px solid #e6e6e6;
	border-bottom: none;
}

.comment-list .comment-sub-list li:last-child {
	margin-bottom: 0;
}

.classes-info {
	padding: 32px 27px 15px;
	border-radius: 13px;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.classes-info:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.classes-info ul {
	list-style: none;
}

.classes-info ul li {
	font-size: 16px;
	color: #666666;
	padding-left: 25px;
	position: relative;
	margin-bottom: 15px;
}

.classes-info ul li i {
	position: absolute;
	font-size: 16px;
	left: 0;
	top: 3px;
	color: #f65d5d;
}

.about-instructor-widget {
	text-align: center;
	position: relative;
	padding: 25px 20px 10px;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	border-radius: 14px;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.about-instructor-widget h4 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 10px;
}

.about-instructor-widget h6 {
	color: #f65d5d;
	margin-bottom: 20px;
}

.about-instructor-widget img {
	width: 142px;
	height: 142px;
	border-radius: 50%;
	margin: 0 auto 25px;
}

.about-instructor-widget .ai-social a {
	display: inline-block;
	width: 34px;
	height: 34px;
	padding-top: 6px;
	margin-right: 6px;
	margin-bottom: 14px;
	font-size: 15px;
	text-align: center;
	color: #666666;
	background: #f2f4f5;
	border-radius: 50%;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.about-instructor-widget .ai-social a:hover {
	color: #fff;
	background: #f65d5d;
}

.about-instructor-widget:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

/*---------------------
  Trainer details page
-----------------------*/

.trainer-details {
	padding: 40px 52px;
	border-radius: 13px;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

@media (max-width: 420px) {
	.trainer-details {
		padding: 30px 20px;
	}
}

.trainer-details .td-left {
	float: left;
	margin-right: 55px;
	text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.trainer-details .td-left {
		float: none;
		margin-right: 0;
	}
}

.trainer-details .td-right {
	overflow: hidden;
	margin-bottom: 30px;
	position: relative;
}

.trainer-details .td-social {
	margin-bottom: 30px;
}

.trainer-details .td-social a {
	display: inline-block;
	width: 34px;
	height: 34px;
	padding-top: 6px;
	margin-right: 6px;
	margin-bottom: 14px;
	font-size: 15px;
	text-align: center;
	color: #333333;
	background: #f2f4f5;
	border-radius: 50%;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.trainer-details .td-social a:last-child {
	margin-right: 0;
}

.trainer-details .td-social a:hover {
	color: #fff;
	background: #f65d5d;
}

.trainer-details .trainer-info {
	position: relative;
	overflow: hidden;
}

.trainer-details .trainer-info img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin-bottom: 28px;
}

.trainer-details .trainer-info h3 {
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.trainer-details .trainer-info h6 {
	color: #f65d5d;
	margin-bottom: 16px;
}

.trainer-details .trainer-info ul {
	list-style: none;
}

.trainer-details .trainer-info ul li {
	margin-bottom: 5px;
}

@media (max-width: 420px) {
	.trainer-details .trainer-info ul li {
		margin-bottom: 15px;
	}
}

.trainer-details .trainer-info ul strong {
	float: left;
	width: 112px;
	color: #666666;
	font-weight: 600;
}

@media (max-width: 420px) {
	.trainer-details .trainer-info ul strong {
		float: none;
		margin-bottom: 10px;
		display: block;
	}
}

.trainer-details .trainer-info ul p {
	font-size: 16px;
	overflow: hidden;
	margin-bottom: 0;
}

.trainer-details .trainer-info .site-btn {
	position: absolute;
	right: 0;
	top: 0;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.trainer-details .trainer-info .site-btn {
		position: relative;
		margin-top: 30px;
	}
}

.trainer-details-text h3 {
	font-size: 20px;
	margin-bottom: 16px;
}

.trainer-details-text p {
	margin-bottom: 22px;
	font-size: 16px;
}

.trainer-details-text ul {
	list-style: none;
	padding-left: 32px;
}

@media (max-width: 420px) {
	.trainer-details-text ul {
		padding-left: 15px;
	}
}

.trainer-details-text ul li {
	font-size: 16px;
	color: #666666;
	padding-left: 21px;
	margin-bottom: 5px;
	position: relative;
}

.trainer-details-text ul i {
	position: absolute;
	left: 0;
	top: 4px;
	font-size: 16px;
	color: #f65d5d;
}

/*---------------------
  Event details page
-----------------------*/

.event-preview img {
	border-radius: 12px;
	margin-bottom: 40px;
	min-width: 100%;
}

.event-details {
	padding-right: 20px;
	margin-bottom: 50px;
}

.event-details h2 {
	font-size: 30px;
	margin-bottom: 10px;
}

.event-details .ed-meta {
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.event-details .ed-meta {
		margin-right: 0;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.event-details .ed-meta {
		margin-right: 0;
		margin-bottom: 10px;
	}
}

.event-details .ed-meta:last-child {
	margin-right: 0;
}

.event-details .ed-meta i {
	font-size: 20px;
	color: #f65d5d;
	margin-right: 10px;
	position: relative;
	top: 3px;
}

.event-details .ed-meta p {
	color: #333333;
	margin-bottom: 0;
}

.event-details .ed-note {
	display: inline-block;
	padding: 10px 17px;
	font-size: 14px;
	color: #fff;
	text-transform: uppercase;
	border-radius: 7px;
	margin-bottom: 60px;
	background: #8abe56;
	font-weight: 600;
	line-height: 1.2;
	margin-top: 5px;
}

.event-details p {
	margin-bottom: 30px;
}

.event-details h3 {
	font-size: 20px;
	margin-bottom: 20px;
}

.event-details ul {
	list-style: none;
}

.event-details ul li {
	position: relative;
	padding-left: 29px;
	margin-bottom: 5px;
	font-size: 16px;
	color: #666666;
}

.event-details ul li i {
	position: absolute;
	left: 0;
	top: 3px;
	color: #f65d5d;
	font-size: 16px;
}

.event-details .ed-cata i {
	font-size: 20px;
	color: #f65d5d;
	margin-right: 10px;
	position: relative;
	top: 3px;
}

.event-details .ed-cata p {
	color: #666666;
	margin-bottom: 0;
}

.event-details .ed-social a {
	display: inline-block;
	width: 34px;
	height: 34px;
	padding-top: 6px;
	margin-right: 6px;
	margin-bottom: 14px;
	font-size: 15px;
	text-align: center;
	color: #666666;
	background: #f2f4f5;
	border-radius: 50%;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.event-details .ed-social a:hover {
	color: #fff;
	background: #f65d5d;
}

.event-other-slider {
	margin: 0 -32px 70px;
	left: 25px;
}

.event-other-slider .owl-item {
	padding: 15px 15px 0;
}

.event-other-slider .owl-nav {
	position: absolute;
	right: 18px;
	top: -80px;
}

.event-other-slider .owl-nav .owl-next,
.event-other-slider .owl-nav .owl-prev {
	color: #999999;
}

.event-other-slider .owl-nav .owl-next:hover,
.event-other-slider .owl-nav .owl-prev:hover {
	color: #f65d5d;
}

.event-other-slider .event-item {
	margin-bottom: 30px;
}

.event-other-slider .event-item .ei-img {
	width: 175px;
	margin-right: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 992px) and (max-width: 1200px),
(max-width: 420px) {
	.event-other-slider .event-item .ei-img {
		width: 100%;
		float: none;
	}
}

.event-other-slider .event-item .ei-text {
	padding-top: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 992px) and (max-width: 1200px),
(max-width: 420px) {
	.event-other-slider .event-item .ei-text {
		padding: 20px;
	}
}

.event-other-slider .event-item .ei-text h4 {
	font-size: 20px;
}

/*-------------
  Blog page
---------------*/

.blog-item {
	margin-bottom: 30px;
	border-radius: 14px;
	border-radius: 13px;
	overflow: hidden;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.blog-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.blog-item img {
	margin-bottom: 35px;
	min-width: 100%;
}

.blog-item .bi-text {
	text-align: center;
	padding: 0 35px 10px;
}

.blog-item .bi-text h2 {
	font-size: 25px;
	margin-bottom: 15px;
}

.blog-item .bi-text h2 a {
	color: #333333;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.blog-item .bi-text h2 a:hover {
	color: #f65d5d;
}

.blog-item .bi-footer {
	overflow: hidden;
	padding: 21px 30px 15px;
	border-top: 1px solid #e6e6e6;
}

@media (max-width: 420px) {
	.blog-item .bi-footer {
		text-align: center;
	}
}

.blog-item .bi-cata {
	float: left;
	font-size: 14px;
	color: #666666;
	position: relative;
	padding-left: 12px;
	margin-bottom: 10px;
}

@media (max-width: 420px) {
	.blog-item .bi-cata {
		float: none;
		display: inline-block;
	}
}

.blog-item .bi-cata:after {
	position: absolute;
	content: "";
	width: 5px;
	height: 5px;
	left: 0;
	top: calc( 50% - 2px);
	border-radius: 20px;
	background: #f65d5d;
}

.blog-item .bi-social {
	float: right;
}

@media (max-width: 420px) {
	.blog-item .bi-social {
		float: none;
	}
}

.blog-item .bi-social a {
	color: #666666;
	margin-left: 20px;
}

.blog-item .bi-social a:first-child {
	margin-left: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.sidebar {
		padding-top: 70px;
	}
}

.sb-widget {
	margin-bottom: 50px;
}

.sb-widget .sb-title {
	font-size: 20px;
	text-transform: uppercase;
	margin-bottom: 25px;
}

.sb-widget .sb-video {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
}

.sb-widget .sb-video .video-popup img {
	width: 58px;
}

.sb-widget .sb-video .video-popup {
	position: absolute;
	left: calc(50% - 29px);
	top: calc(50% - 29px);
}

.site-pagination {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.site-pagination a {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 34px;
	min-width: 34px;
	color: #666666;
	border: 1px solid #e8e8e8;
	border-radius: 50px;
	margin-right: 10px;
	font-size: 14px;
	margin-bottom: 5px;
}

.site-pagination a:hover {
	color: #fff;
}

.site-pagination a i {
	font-size: 18px;
}

.site-pagination a.active {
	border-color: transparent;
	color: #fff;
}

.site-pagination a:last-child {
	margin-right: 0;
}

/*---------------------
  Blog details page
-----------------------*/

.blog-preview img {
	border-radius: 12px;
	margin-bottom: 40px;
	min-width: 100%;
}

.blog-details {
	padding-right: 20px;
	margin-bottom: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.blog-details {
		padding-right: 0;
	}
}

.blog-details h2 {
	font-size: 30px;
	margin-bottom: 15px;
}

.blog-details .blog-meta {
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.blog-details .blog-meta {
		margin-right: 0;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.blog-details .blog-meta {
		margin-right: 0;
		margin-bottom: 10px;
	}
}

.blog-details .blog-meta:last-child {
	margin-right: 0;
}

.blog-details .blog-meta i {
	font-size: 20px;
	color: #f65d5d;
	margin-right: 10px;
	position: relative;
	top: 3px;
}

.blog-details .blog-meta p {
	color: #333333;
	margin-bottom: 0;
}

.blog-details p {
	margin-bottom: 30px;
}

.blog-details blockquote {
	margin-left: 75px;
	margin-top: 40px;
	font-style: italic;
	font-size: 16px;
	color: #666666;
	padding-right: 20px;
	line-height: 1.8;
	position: relative;
	margin-bottom: 25px;
}

@media (max-width: 576px) {
	.blog-details blockquote {
		margin-left: 30px;
	}
}

.blog-details blockquote:after {
	position: absolute;
	content: "";
	width: 62px;
	height: 52px;
	left: -30px;
	top: -12px;
	background: url("../img/icons/quota-2.png") no-repeat scroll 0 0/cover;
}

.blog-details h3 {
	font-size: 20px;
	margin-bottom: 15px;
}

.blog-details ul {
	list-style: none;
}

.blog-details ul li {
	position: relative;
	padding-left: 29px;
	margin-bottom: 5px;
	font-size: 16px;
	color: #666666;
}

.blog-details ul li i {
	position: absolute;
	left: 0;
	top: 3px;
	color: #f65d5d;
	font-size: 16px;
}

.blog-details .ed-cata i {
	font-size: 20px;
	color: #f65d5d;
	margin-right: 10px;
	position: relative;
	top: 3px;
}

.blog-details .ed-cata p {
	color: #666666;
	margin-bottom: 0;
}

.blog-details .ed-social a {
	display: inline-block;
	width: 34px;
	height: 34px;
	padding-top: 6px;
	margin-right: 6px;
	margin-bottom: 14px;
	font-size: 15px;
	text-align: center;
	color: #666666;
	background: #f2f4f5;
	border-radius: 50%;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.blog-details .ed-social a:hover {
	color: #fff;
	background: #f65d5d;
}

.blog-gallery {
	margin-bottom: 20px;
}

.blog-gallery .row {
	margin-right: -10px;
	margin-left: -10px;
}

.blog-gallery .col-md-4 {
	padding-right: 10px;
	padding-left: 10px;
}

.blog-gallery img {
	border-radius: 13px;
	margin-bottom: 20px;
	min-width: 100%;
}

.blog-author-card {
	padding-top: 45px;
	border-top: 1px solid #e6e6e6;
}

.blog-author {
	padding: 36px 40px;
	margin-bottom: 55px;
	overflow: hidden;
	border-radius: 13px;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

@media (max-width: 576px) {
	.blog-author {
		text-align: center;
		padding: 36px 20px;
	}
}

.blog-author img {
	float: left;
	width: 130px;
	height: 130px;
	margin-right: 30px;
	border-radius: 50%;
}

@media (max-width: 576px) {
	.blog-author img {
		float: none;
		margin-bottom: 25px;
		margin-right: 0;
	}
}

.blog-author .ba-text {
	overflow: hidden;
}

.blog-author .ba-text h3 {
	font-size: 20px;
	margin-bottom: 10px;
}

.blog-author .ba-text p {
	font-size: 16px;
	margin-bottom: 10px;
}

.blog-author .ba-social a {
	display: inline-block;
	color: #666666;
	margin-right: 10px;
}

.blog-author .ba-social a:hover {
	color: #f65d5d;
}

.blog-nav {
	display: inline-block;
	margin-bottom: 40px;
	position: relative;
}

.blog-nav h3 {
	font-size: 18px;
}

.blog-nav i {
	position: absolute;
	top: 5px;
	font-size: 35px;
	color: #f65d5d;
}

.blog-nav.bn-prev {
	padding-left: 40px;
}

.blog-nav.bn-prev i {
	left: 0;
}

.blog-nav.bn-next {
	padding-right: 40px;
}

.blog-nav.bn-next i {
	right: 0;
}

.sb-widget .search-form {
	position: relative;
}

.sb-widget .search-form input {
	width: 100%;
	height: 49px;
	padding-left: 29px;
	padding-right: 30px;
	border-radius: 41px;
	border: 1px solid #e6e6e6;
	background: #fafafa;
	font-size: 14px;
}

.sb-widget .search-form button {
	position: absolute;
	right: 15px;
	top: 0;
	height: 100%;
	background: transparent;
	border: none;
	color: #a6a6a6;
	padding-top: 5px;
}

.sb-widget .search-form button i {
	font-size: 18px;
}

.sb-widget ul.sb-list {
	list-style: none;
	padding-top: 5px;
}

.sb-widget ul.sb-list li a {
	display: inline-block;
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.sb-widget ul.sb-list li a span {
	margin-left: 10px;
}

.sb-widget .sb-tags a {
	display: inline-block;
	border-radius: 50px;
	padding: 5px 16px;
	margin-right: 6px;
	margin-bottom: 10px;
	color: #666666;
	font-size: 16px;
	border: 1px solid #e6e6e6;
	background: #fafafa;
}

.sb-widget .sb-tags a:hover {
	color: #f65d5d;
}

.latest-post-widget .lp-item {
	margin-bottom: 20px;
}

.latest-post-widget .lp-item:last-child {
	margin-bottom: 0;
}

.latest-post-widget .lp-item .lp-thumb {
	width: 86px;
	height: 68px;
	float: left;
	margin-right: 18px;
	border-radius: 5px;
}

.latest-post-widget .lp-text {
	overflow: hidden;
	padding-top: 10px;
}

.latest-post-widget .lp-text h3 {
	font-size: 17px;
	margin-bottom: 5px;
}

.latest-post-widget .lp-text p {
	margin-bottom: 0;
}

.latest-post-widget .lp-text i {
	position: relative;
	color: #f65d5d;
	font-size: 16px;
	top: 3px;
	margin-right: 10px;
}

.insta-widget {
	display: block;
	margin: 0 -5px 80px;
	overflow: hidden;
}

.insta-widget .insta-item {
	width: 33.333333%;
	float: left;
	padding: 0 5px;
	margin-bottom: 10px;
}

.insta-widget .insta-item img {
	min-width: 100%;
}

.insta-widget .insta-item:hover .insta-hover {
	top: calc(50% - 12px);
	opacity: 1;
	filter: alpha(opacity=100);
}

.insta-widget .insta-item:hover .insta-img:after {
	opacity: 0.9;
	filter: alpha(opacity=90);
}

.insta-widget .insta-img {
	border-radius: 7px;
	overflow: hidden;
	position: relative;
}

.insta-widget .insta-img:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #f65d5d;
	background: -o-linear-gradient(305deg, #f65d5d 0%, #fdb07d 100%);
	background: linear-gradient(145deg, #f65d5d 0%, #fdb07d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f65d5d", endColorstr="#fdb07d", GradientType=1);
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.insta-widget .insta-hover {
	position: absolute;
	top: calc(50% - 20px);
	left: 0;
	width: 100%;
	text-align: center;
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: 99;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.insta-widget .insta-hover i {
	font-size: 18px;
	color: #fff;
}

/*---------------------
  Contact page
-----------------------*/

.contact-map {
	position: relative;
	height: 550px;
	background: #ddd;
	border-radius: 13px;
	margin-bottom: 65px;
	overflow: hidden;
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.contact-map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.con-info {
	margin-bottom: 30px;
}

.con-info h3 {
	font-size: 18px;
	margin-bottom: 14px;
}

.con-info ul {
	list-style: none;
}

.con-info ul li {
	padding-left: 25px;
	position: relative;
	float: 16px;
	color: #666666;
	margin-bottom: 7px;
}

.con-info ul i {
	position: absolute;
	font-size: 16px;
	left: 0;
	top: 3px;
	color: #f65d5d;
}

.contact-social a {
	display: inline-block;
	width: 34px;
	height: 34px;
	padding-top: 6px;
	margin-right: 6px;
	margin-bottom: 14px;
	font-size: 15px;
	text-align: center;
	color: #666666;
	background: #f2f4f5;
	border-radius: 50%;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.contact-social a:hover {
	color: #fff;
	background: #f65d5d;
}

.contact-form {
	padding-top: 10px;
}
/* Lépésszám diagram stílusok */
.steps-pricing-item {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin: 10px;
}

.steps-pi-top {
    text-align: center;
    margin-bottom: 20px;
}

.steps-pi-top h3 {
    font-size: 24px;
    color: #28a745;
}

.steps-pi-top p {
    font-size: 16px;
    color: #6c757d;
}

.steps-header-info {
    text-align: center;
    margin-top: 20px;
}

input[type="number"] {
    width: 80%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
}

input[type="submit"] {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #218838;
}

.errorWrap, .succWrap {
    margin-top: 20px;
    padding: 15px;
    border-radius: 5px;
    color: white;
    text-align: center;
}

.errorWrap {
    background-color: #dc3545;
}

.succWrap {
 
    background-color: #43613f;
    width: 80%;
    margin-inline: auto;
}
/* Egyedi CSS stílusok */
.zt-arak-item {
  background-color: #f4f6f9;
  padding: 20px;
  border-radius: 10px;
}

.zt-pi-top h3 {
  font-size: 24px;
  color: #2c3e50;
  font-weight: bold;
}

.zt-errorWrap {
  background-color: #e74c3c;
  padding: 10px;
  border-radius: 5px;
  color: white;
}

.zt-succWrap {
  background-color: #2ecc71;
  padding: 10px;
  border-radius: 5px;
  color: white;
}

.zt-header-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.zt-singup-form input {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.zt-site-btn {
  background: linear-gradient(45deg, #3498db, #9b59b6);
  border: none;
  color: white;
  padding: 12px 30px;
  border-radius: 5px;
  cursor: pointer;
}

.zt-site-btn:hover {
  background: linear-gradient(45deg, #2980b9, #8e44ad);
}

.zt-row {
  margin-bottom: 15px;
}

.zt-col-md-12, .zt-col-md-6 {
  padding: 10px;
}

.zt-d-none {
  display: none;
}

.zt-d-md-inline-flex {
  display: flex;
}

.zt-site-btn.sb-gradient {
  font-size: 16px;
  font-weight: bold;
}

/*---------------------
  nyomás
-----------------------*/

.blood-section {
	background: #f9f2f0;
}

.blood-item {

height: fit-content;
text-align: center !important;
    background: #413f3f !important;
    padding-bottom: 20px !important;
    margin: 15px 5px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15) !important;
    box-shadow: 0px 1px 13px rgb(255 0 0) !important;
    -webkit-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    transition: all 0.4s !important;
    border: solid 2px #ff0000e6 !important;
    /*margin: 0 auto !important; /* Középre helyezés */
	
}


.bloodk-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.blood-item .pi-top {
    height: 120px; /* Magasság növelése, ha több helyre van szükség */
    padding-top: 30px; /* A padding növelése, hogy több hely legyen a tartalom körül */
    background: #f65d5d; /* Megmaradt a piros háttér */
    text-align: center; /* Szöveg és ikon középre igazítása */
}
}

.blood-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.blood-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.blood-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.blood-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.blood-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.blood-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.blood-item.begginer .pi-top {
	background: #fdb07d;
}

.blood-item.entermediate .pi-top {
    background: #00000000;
}

.blood-item.advanced .pi-top {
	background: #f2786f;
}

.blood-item.professional .pi-top {
	background: #f65d5d;
}
/*---------------------
  nyomás
-----------------------*/

.blood-title { 
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
	position: relative; /* Szükséges az ::after pseudo-elemhez */
	margin-bottom: 5%;
}




.blood-title i {
    font-size: 30px;
    color: #ff0000;
    /*margin-left: 45px;*/
	
	
}


.blood-description {
        font-family: 'Poppins';/* Betűtípus beállítása, ha nem az alapértelmezett */
    font-size: 13px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
	
}



.blood-section {
	background: #f9f2f0;
}

.blood-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 3px;
    background: linear-gradient(to right,rgba(255, 255, 255, 0) ,rgba(255 0 0 / 99%), rgba(255, 255, 255, 0));
    border-radius: 2px;
    margin-left: 15%;
}


.blood-input input {
    width: 80% !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: 1px solid  #ff0000e6 !important;
    background:#282727 !important
}
.unit {
    color: #ffffff !important;
    margin-left: 10px !important; /* Kisebb távolság, hogy ne legyen túl szoros */
}


/* A "kg" egység formázása */
.blood-input .unit {
    font-size: 20px;
    color: white; /* Példa: narancssárga szín */
    font-weight: bold;
}


/* sajat gombok */
.blood-btn {
	display: inline-block;
	border: none;
	font-size: 16px;
	font-weight: 600;
	min-width: 167px;
	padding: 14px 30px;
	border-radius: 50px;
	text-transform: uppercase;
	color: #fff;
	line-height: normal;
	cursor: pointer;
	text-align: center;
	letter-spacing: 1px;
	 margin-top: 20px; /* Távolság a beviteli mezők és a gomb között */
	
}


.blood-btn:hover {
	color: #fff;
}

.blood-btn.sb-white {
	background: #fff;
	color: #f65d5d;
}

.blood-btn.sb-gradient {
	color: #fff;
	padding: 2px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
	margin-top: 10px;
    margin-left: -15px;
	    background: #282727 !important;
    border: solid 1px  #ff0000e6;
}


.blood-btn.sb-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.blood-btn.sb-gradient:hover {
	color: #578e52;
}

.blood-btn.sb-gradient:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
}

.blood-btn.sb-line-gradient {
	color: #f65d5d;
	padding: 13px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
}

.blood-btn.sb-line-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.blood-btn.sb-line-gradient:hover {
	color: #fff;
}

.blood-btn.sb-line-gradient:hover:after {
	opacity: 0;
	filter: alpha(opacity=0);
}

blood-map {
	position: relative;
	height: 100%;
	background: #ddd;
	border-radius: 12px;
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.blood-map {
		height: 400px;
		margin-bottom: 40px;
	}
}

.blood-map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.blood-text {
	padding-right: 50px;
	margin-bottom: 40px;
}

.blood-text h3 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.blood-form input, .blood-form textarea {
    width: 80% !important;
    height: 40px !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: 1px solid #7bff7e ;
    background: #1a1a1a !;
    display: inline-block !important;
    margin-bottom: 20px !important;
}
	.blood-btn {
    margin-top: 20px !important;
}


/*---------------------
  Vercuki
-----------------------*/

.cukor-item {

height: fit-content;
text-align: center !important;
    background: #413f3f !important;
    padding-bottom: 20px !important;
    margin: 15px 5px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15) !important;
    box-shadow: 0px 1px 13px rgb(255 0 0) !important;
    -webkit-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    transition: all 0.4s !important;
    border:solid 2px #ff0000 !important;
    /*margin: 0 auto !important; /* Középre helyezés */

}


.cukor-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.cukor-item .pi-top {
    height: 120px; /* Magasság növelése, ha több helyre van szükség */
    padding-top: 30px; /* A padding növelése, hogy több hely legyen a tartalom körül */
    background: #f65d5d; /* Megmaradt a piros háttér */
    text-align: center; /* Szöveg és ikon középre igazítása */
}
}

.cukor-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.cukor-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.cukor-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.cukor-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.cukor-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.cukor-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.sleep-item.begginer .pi-top {
	background: #fdb07d;
}

.cukor-item.entermediate .pi-top {
       background: #00000000 !important;
}

.cukor-item.advanced .pi-top {
	background: #f2786f;
}

.cukor-item.professional .pi-top {
	background: #f65d5d;
}

.cukor-title { 
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
	position: relative; /* Szükséges az ::after pseudo-elemhez */
	margin-bottom: 5%;
}




.cukor-title i {
    font-size: 30px;
    color: #ff0000;
    /*margin-left: 45px;*/
	
	
}


.cukor-description {
        font-family: 'Poppins';/* Betűtípus beállítása, ha nem az alapértelmezett */
    font-size: 13px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
	
}



.cukor-section {
	background: #f9f2f0;
}

.cukor-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 3px;
    background: linear-gradient(to right,rgba(255, 255, 255, 0) , #ff0000, rgba(255, 255, 255, 0));
    border-radius: 2px;
    margin-left: 15%;
}


.cukor-input input {
    width: 80% !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: 1px solid #ff0000 !important;
    background:#282727 !important; !important;
}
.unit {
    color: #ffffff !important;
    margin-left: 10px !important; /* Kisebb távolság, hogy ne legyen túl szoros */
}


/* A "kg" egység formázása */
.cukor-input .unit {
    font-size: 20px;
    color: white; /* Példa: narancssárga szín */
    font-weight: bold;
}


/* sajat gombok */
.cukor-btn {
	display: inline-block;
	border: none;
	font-size: 16px;
	font-weight: 600;
	min-width: 167px;
	padding: 14px 30px;
	border-radius: 50px;
	text-transform: uppercase;
	color: #fff;
	line-height: normal;
	cursor: pointer;
	text-align: center;
	letter-spacing: 1px;
	 margin-top: 20px; /* Távolság a beviteli mezők és a gomb között */
	
}


.cukor-btn:hover {
	color: #fff;
}

.cukor-btn.sb-white {
	background: #fff;
	color: #f65d5d;
}

.cukor-btn.sb-gradient {
	color: #fff;
	padding: 2px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
	margin-top: 10px;
    margin-left: -15px;
	   background: #282727 !important;
    border: solid 1px #ff0000;
}


.cukor-btn.sb-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.cukor-btn.sb-gradient:hover {
	color: #578e52;
}

.cukor-btn.sb-gradient:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
}

.cukor-btn.sb-line-gradient {
	color: #f65d5d;
	padding: 13px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
}

.cukor-btn.sb-line-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.cukor-btn.sb-line-gradient:hover {
	color: #fff;
}

.cukor-btn.sb-line-gradient:hover:after {
	opacity: 0;
	filter: alpha(opacity=0);
}

cukor-map {
	position: relative;
	height: 100%;
	background: #ddd;
	border-radius: 12px;
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.cukor-map {
		height: 400px;
		margin-bottom: 40px;
	}
}

.cukor-map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.cukor-text {
	padding-right: 50px;
	margin-bottom: 40px;
}

.cukor-text h3 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.cukor-form input, .sleep-form textarea {
    width: 80% !important;
    height: 40px !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: 1px solid #7bff7e ;
    background: #1a1a1a !;
    display: inline-block !important;
    margin-bottom: 20px !important;
}
	.cukor-btn {
    margin-top: 20px !important;
}
/*---------------------
  Lépésszám
-----------------------*/

.step-title { 
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
	position: relative; /* Szükséges az ::after pseudo-elemhez */
	margin-bottom: 5%;
}




.step-title i {
    font-size: 30px;
    color: #06fcb5;
    /*margin-left: 45px;*/
	
	
}


.step-description {
        font-family: 'Poppins';/* Betűtípus beállítása, ha nem az alapértelmezett */
    font-size: 13px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
	
}



.step-section {
	background: #f9f2f0;
}

.step-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 3px;
    background: linear-gradient(to right,rgba(255, 255, 255, 0) ,#06fcb5, rgba(255, 255, 255, 0));
    border-radius: 2px;
    margin-left: 15%;
}


.step-input input {
    width: 80% !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: solid 1px #06fcb5;
    background: #282727 !important;

}
.unit {
    color: #ffffff !important;
    margin-left: 10px !important; /* Kisebb távolság, hogy ne legyen túl szoros */
}


/* A "kg" egység formázása */
.step-input .unit {
    font-size: 20px;
    color: white; /* Példa: narancssárga szín */
    font-weight: bold;
}


/* sajat gombok */
.step-btn {
	display: inline-block;
	border: none;
	font-size: 16px;
	font-weight: 600;
	min-width: 167px;
	padding: 14px 30px;
	border-radius: 50px;
	text-transform: uppercase;
	color: #fff;
	line-height: normal;
	cursor: pointer;
	text-align: center;
	letter-spacing: 1px;
	 margin-top: 20px; /* Távolság a beviteli mezők és a gomb között */
	
}


.step-btn:hover {
	color: #fff;
}

.step-btn.sb-white {
	background: #fff;
	color: #f65d5d;
}

.step-btn.sb-gradient {
	color: #fff;
	padding: 2px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
	margin-top: 10px;
    margin-left: -15px;
	    background: #282727 !important;
    border: solid 1px  #06fcb5;
}


.step-btn.sb-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.step-btn.sb-gradient:hover {
	color: #578e52;
}

.step-btn.sb-gradient:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
}

.step-btn.sb-line-gradient {
	color: #f65d5d;
	padding: 13px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
}

.step-btn.sb-line-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.step-btn.sb-line-gradient:hover {
	color: #fff;
}

.step-btn.sb-line-gradient:hover:after {
	opacity: 0;
	filter: alpha(opacity=0);
}

blood-map {
	position: relative;
	height: 100%;
	background: #ddd;
	border-radius: 12px;
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.step-map {
		height: 400px;
		margin-bottom: 40px;
	}
}

.step-map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.step-text {
	padding-right: 50px;
	margin-bottom: 40px;
}

.step-text h3 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.step-form input, .step-form textarea {
    width: 80% !important;
    height: 40px !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: solid 1px  #06fcb5;
    background:#282727 !important !;
    display: inline-block !important;
    margin-bottom: 20px !important;
}
	.step-btn {
    margin-top: 20px !important;
}

.step-section {
	background: #f9f2f0;
}

.step-item {

height: fit-content;
text-align: center !important;
    background: #413f3f !important;
    padding-bottom: 20px !important;
    margin: 15px 5px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15) !important;
    box-shadow: 0px 0px 13px rgb(0 242 255) !important;
    -webkit-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    transition: all 0.4s !important;
    border:solid 2px #06fcb5 !important;
    /*margin: 0 auto !important; /* Középre helyezés */

}


.step-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.step-item .pi-top {
    height: 120px; /* Magasság növelése, ha több helyre van szükség */
    padding-top: 30px; /* A padding növelése, hogy több hely legyen a tartalom körül */
    background: #f65d5d; /* Megmaradt a piros háttér */
    text-align: center; /* Szöveg és ikon középre igazítása */
}
}

.step-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.step-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.step-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.step-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.step-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.step-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.step-item.begginer .pi-top {
	background: #fdb07d;
}

.step-item.entermediate .pi-top {
       background: #00000000 !important;
}

.step-item.advanced .pi-top {
	background: #f2786f;
}

.step-item.professional .pi-top {
	background: #f65d5d;
}

/*---------------------
  Lépésszám
-----------------------*/
.sleep-item {

height: fit-content;
text-align: center !important;
    background: #413f3f !important;
    padding-bottom: 20px !important;
    margin: 15px 5px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15) !important;
    box-shadow: 0px 0px 13px rgb(0 200 255) !important;;
    -webkit-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    transition: all 0.4s !important;
    border:solid 2px #06c5fc !important;
    /*margin: 0 auto !important; /* Középre helyezés */

}


.sleep-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.sleep-item .pi-top {
    height: 120px; /* Magasság növelése, ha több helyre van szükség */
    padding-top: 30px; /* A padding növelése, hogy több hely legyen a tartalom körül */
    background: #f65d5d; /* Megmaradt a piros háttér */
    text-align: center; /* Szöveg és ikon középre igazítása */
}
}

.sleep-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.sleep-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.sleep-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.sleep-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.sleep-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.sleep-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.sleep-item.begginer .pi-top {
	background: #fdb07d;
}

.sleep-item.entermediate .pi-top {
       background: #00000000 !important;
}

.sleep-item.advanced .pi-top {
	background: #f2786f;
}

.sleep-item.professional .pi-top {
	background: #f65d5d;
}

.sleep-title { 
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
	position: relative; /* Szükséges az ::after pseudo-elemhez */
	margin-bottom: 5%;
}




.sleep-title i {
    font-size: 30px;
    color: #06c5fc;
    /*margin-left: 45px;*/
	
	
}


.sleep-description {
        font-family: 'Poppins';/* Betűtípus beállítása, ha nem az alapértelmezett */
    font-size: 13px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
	
}



.sleep-section {
	background: #f9f2f0;
}

.sleep-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 3px;
    background: linear-gradient(to right,rgba(255, 255, 255, 0) ,#06c5fc, rgba(255, 255, 255, 0));
    border-radius: 2px;
    margin-left: 15%;
}


.sleep-input input {
    width: 80% !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: 1px solid  #ff0000e6 !important;
    background: #3d3d3d !important; !important;
}
.unit {
    color: #ffffff !important;
    margin-left: 10px !important; /* Kisebb távolság, hogy ne legyen túl szoros */
}


/* A "kg" egység formázása */
.sleep-input .unit {
    font-size: 20px;
    color: white; /* Példa: narancssárga szín */
    font-weight: bold;
}


/* sajat gombok */
.sleep-btn {
	display: inline-block;
	border: none;
	font-size: 16px;
	font-weight: 600;
	min-width: 167px;
	padding: 14px 30px;
	border-radius: 50px;
	text-transform: uppercase;
	color: #fff;
	line-height: normal;
	cursor: pointer;
	text-align: center;
	letter-spacing: 1px;
	 margin-top: 20px; /* Távolság a beviteli mezők és a gomb között */
	
}


.sleep-btn:hover {
	color: #fff;
}

.sleep-btn.sb-white {
	background: #fff;
	color: #f65d5d;
}

.sleep-btn.sb-gradient {
	color: #fff;
	padding: 2px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
	margin-top: 10px;
    margin-left: -15px;
	   background: #282727 !important;
    border: solid 1px #06c5fc;
}


.sleep-btn.sb-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.sleep-btn.sb-gradient:hover {
	color: #578e52;
}

.sleep-btn.sb-gradient:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
}

.sleep-btn.sb-line-gradient {
	color: #f65d5d;
	padding: 13px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
}

.sleep-btn.sb-line-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.sleep-btn.sb-line-gradient:hover {
	color: #fff;
}

.sleep-btn.sb-line-gradient:hover:after {
	opacity: 0;
	filter: alpha(opacity=0);
}

blood-map {
	position: relative;
	height: 100%;
	background: #ddd;
	border-radius: 12px;
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.sleep-map {
		height: 400px;
		margin-bottom: 40px;
	}
}

.sleep-map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.sleep-text {
	padding-right: 50px;
	margin-bottom: 40px;
}

.sleep-text h3 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.sleep-form input, .sleep-form textarea {
    width: 80% !important;
    height: 40px !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: 1px solid #7bff7e ;
    background: #1a1a1a !;
    display: inline-block !important;
    margin-bottom: 20px !important;
}
	.sleep-btn {
    margin-top: 20px !important;
}


/*---------------------
  stress
-----------------------*/

.stres-title { 
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
	position: relative; /* Szükséges az ::after pseudo-elemhez */
	margin-bottom: 5%;
}




.stres-title i {
    font-size: 30px;
    color: #ff6e0d;
    /*margin-left: 45px;*/
	
	
}


.stres-description {
        font-family: 'Poppins';/* Betűtípus beállítása, ha nem az alapértelmezett */
    font-size: 13px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
	
}



.stres-section {
	background: #f9f2f0;
}

.stres-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 3px;
    background: linear-gradient(to right,rgba(255, 255, 255, 0) ,#ff6e0d, rgba(255, 255, 255, 0));
    border-radius: 2px;
    margin-left: 15%;
}


.stres-input input {
    width: 80% !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: solid 1px #06fcb5;
    background: #282727 !important;

}
.unit {
    color: #ffffff !important;
    margin-left: 10px !important; /* Kisebb távolság, hogy ne legyen túl szoros */
}


/* A "kg" egység formázása */
.stres-input .unit {
    font-size: 20px;
    color: white; /* Példa: narancssárga szín */
    font-weight: bold;
}


/* sajat gombok */
.stres-btn {
	display: inline-block;
	border: none;
	font-size: 16px;
	font-weight: 600;
	min-width: 167px;
	padding: 14px 30px;
	border-radius: 50px;
	text-transform: uppercase;
	color: #fff;
	line-height: normal;
	cursor: pointer;
	text-align: center;
	letter-spacing: 1px;
	 margin-top: 20px; /* Távolság a beviteli mezők és a gomb között */
	
}


.stres-btn:hover {
	color: #fff;
}

.stres-btn.sb-white {
	background: #fff;
	color: #f65d5d;
}

.stres-btn.sb-gradient {
	color: #fff;
	padding: 2px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
	margin-top: 10px;
    margin-left: -15px;
	    background: #282727 !important;
    border: solid 1px  #ff6e0d;
}


.stres-btn.sb-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.stres-btn.sb-gradient:hover {
	color: #578e52;
}

.stres-btn.sb-gradient:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
}

.stres-btn.sb-line-gradient {
	color: #f65d5d;
	padding: 13px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
}

.stres-btn.sb-line-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.stres-btn.sb-line-gradient:hover {
	color: #fff;
}

.stres-btn.sb-line-gradient:hover:after {
	opacity: 0;
	filter: alpha(opacity=0);
}

stres-map {
	position: relative;
	height: 100%;
	background: #ddd;
	border-radius: 12px;
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.stres-map {
		height: 400px;
		margin-bottom: 40px;
	}
}

.stres-map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.stres-text {
	padding-right: 50px;
	margin-bottom: 40px;
}

.stres-text h3 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.stres-form input, .stres-form textarea {
    width: 80% !important;
    height: 40px !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: solid 1px  #06fcb5;
    background:#282727 !important !;
    display: inline-block !important;
    margin-bottom: 20px !important;
}
	.stres-btn {
    margin-top: 20px !important;
}

.stres-section {
	background: #f9f2f0;
}

.stres-item {

height: fit-content;
text-align: center !important;
    background: #413f3f !important;
    padding-bottom: 20px !important;
    margin: 15px 5px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15) !important;
    box-shadow: 0px 0px 13px rgb(255 163 0) !important;;
    -webkit-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    transition: all 0.4s !important;
    border:solid 2px #ff6e0d !important;
    /*margin: 0 auto !important; /* Középre helyezés */

}


.stres-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.stres-item .pi-top {
    height: 120px; /* Magasság növelése, ha több helyre van szükség */
    padding-top: 30px; /* A padding növelése, hogy több hely legyen a tartalom körül */
    background: #f65d5d; /* Megmaradt a piros háttér */
    text-align: center; /* Szöveg és ikon középre igazítása */
}
}

.stres-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.stres-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.stres-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.stres-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.stres-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.stres-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.stres-item.begginer .pi-top {
	background: #fdb07d;
}

.stres-item.entermediate .pi-top {
       background: #00000000 !important;
}

.stres-item.advanced .pi-top {
	background: #f2786f;
}

.stres-item.professional .pi-top {
	background: #f65d5d;
}

/*---------------------
  Lépésszám
-----------------------*/
/* Hero szekció */
/* Animációk */
.fade-in {
    opacity: 0;
    animation: fadeIn 1.5s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.slide-up {
    transform: translateY(20px);
    opacity: 0;
    animation: slideUp 5s forwards;
}

@keyframes slideUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.zoom-in {
    transform: scale(0.8);
    opacity: 0;
    animation: zoomIn 1s forwards;
}

@keyframes zoomIn {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Hero szekció */
/* Hero szekció */
/* Hero szekció */
/* Hero szekció */
.about-section {
    background: linear-gradient(to right, #43613f, #4c7a63);
    color: #fff;
    height: 60% !important;  /* Kisebb magasság beállítása */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 20px;
}

.about-content {
    max-width: 800px;
}

.about-section h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.about-section p {
    font-size: 1.4rem;
    font-weight: 300;
	margin-bottom: 60px;
}

.cta-button {
    background-color: #fff;
    color: #43613f;
    padding: 12px 35px;
    font-size: 1.1rem;
    text-transform: uppercase;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
    margin-top: 20px;
	box-shadow: 0 0 8px 5px #FFEB3B;
}

.cta-button:hover {
    background-color: #4c7a63;
    color: #fff;
}

/* Szekciók */
.section {
    padding: 50px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.section h2 {
	font-size: 3.5rem;
    margin-bottom: 40px;
    text-align: center;
    color: #43613f;
    font-family: 'Saira Stencil One';
    text-shadow: 0 0 0px #ffffff, 0 0 20px #0404042e, 0 0 30px #626262;
}

.section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-image {
    max-width: 40%;
    margin: 20px auto;
    border-radius: 10px;
     box-shadow: 0 0 8px 4px rgb(255 255 255);
}


@media (max-width: 768px) {
    .about-image {
    max-width: 60%;
    margin: 1px auto;
    border-radius: 10px;
   box-shadow: 0 0 8px 4px rgb(255 255 255);
}
.stres-item{
	width: 96%;
}
.sleep-item{
width: 96%;
}
}


@media (max-width: 768px) {
    .feature-box {
        width: 80% !important; /* A képernyő szélességének 95%-a telefonon */
    }
}

/* Feature Box szekció */
.feature-grid {
    display: flex
;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    align-content: center;
    flex-direction: column;
    align-items: baseline;


}

.feature-box {
    background: #272727;
    border-radius: 10px;
    padding: 30px;
width: 85%; /* Még szélesebb box */
    max-width: 1000px; /* További szélesség limit */
    height: 920px;
    margin: 20px 0;
        box-shadow: 0 0px 9px 6px #43613f;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    text-align: center;
    overflow: hidden;
}

.feature-box:hover {
    transform: translateY(-8px);  /* Enyhe emelkedés */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);  /* Tágabb árnyék */
    background-color: #1f1f1f;  /* Finom háttérszín változás */
}

.feature-box h3 {
    color: #43613f;
    margin-bottom: 30px;
    font-size: 3rem;
    font-family: 'Poppins';
	    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
}

.feature-box p {
    font-size: 1rem;
    color: #fff;
	font-family: poppins;
}
/* Feature Box szekció */
.rolam-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.rolam-box {
    background: #272727;
    border-radius: 10px;
    padding: 30px;
    width: 30%;
    margin: 20px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    text-align: center;
}

.rolam-box:hover {
    transform: translateY(-8px);  /* Enyhe emelkedés */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);  /* Tágabb árnyék */
    background-color: #1f1f1f;  /* Finom háttérszín változás */
}

.rolam-box h3 {
    color: #43613f;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.rolam-box p {
    font-size: 1rem;
    color: #fff;
	font-family; Poppins;
}



/* Mobil optimalizálás */
@media (max-width: 768px) {
    .about-section {
        height: auto !important;  /* Mobilon automatikusan alkalmazkodik */
        padding: 100px 20px;
    }

    .about-section h1 {
        font-size: 2.5rem !important;
    }

    .about-section p {
        font-size: 1rem !important;
    }

    .cta-button {
        padding: 12px 25px;
        font-size: 1rem;
    }

    .section {
        padding: 40px 20px;
    }

    .section h2 {
        font-size: 2.5rem;
		
    }

    .feature-grid {
        flex-direction: column;
        gap: 10px;
        justify-content: center;
    }

    .feature-box {
        width: 50%;
        padding: 20px;
        margin: 10px 0;
    }
	
	

    footer {
        padding: 15px 0;
    }
}

	.about-description {
     font-family: 'Poppins';
    font-size: 20px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
	text-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000;
}
	.about-fent {
     font-family: 'Poppins';
    font-size: 65px !important;
    color: #3c3c3c !important;
    margin-top: 3% !important;
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
	
	
	
	
}



/* Mobil optimalizálás */
@media (max-width: 768px) {
    .feature-grid {
        flex-direction: column; /* Oszlopos elrendezés mobilon */
        gap: 20px; /* Tágabb távolság a dobozok között */
        justify-content: center;
        align-items: center; /* Középre igazítás */
    }


	
	.about-description {
     font-family: 'Poppins';
    font-size: 20px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
	text-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000;
}
	.about-fent {
     font-family: 'Poppins';
    font-size: 65px !important;
    color: #3c3c3c !important;
    margin-top: 3% !important;
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
	
	
	
	
}

}



.profil-item {
      text-align: center;
    background: #fff; /* Fehér doboz kontrasztban a zöld háttérrel */
    padding-bottom: 40px;
    margin: 15px 0;
    border-radius: 5px;
    overflow: hidden;
    -webkit-box-shadow: 0px 5px 6px rgba(30, 50, 35, 0.3); /* Árnyék: sötétebb zöld tónus */
    box-shadow: 0px 0px 20px 7px rgb(0 255 161 / 37%);
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;


}

.profil-item:hover {
      -webkit-box-shadow: 0px 10px 15px rgba(30, 50, 35, 0.4); /* Hover árnyék: erőteljesebb */
        box-shadow: 0px 0px 20px 7px rgb(255 255 255 / 67%);
    transform: translateY(-5px); /* Hover: finom mozgás */
}


.profil-section {
	background: #43613f;
}



.pricing-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	    box-shadow: 0px 0px 20px 7px rgb(0 255 161 / 37%);
}

.profil-item .pi-top {
	height: 156px;
	padding-top: 26px;
	background: #f65d5d;
}

.profil-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.profil-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.profil-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.profil-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.profil-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.profil-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.profil-item.begginer .pi-top {
	background: #fdb07d;
}

.profil-item.entermediate .pi-top {
    background: linear-gradient(180deg, #413f3f 0%, #413f3f 100%);
}

.profil-item.advanced .pi-top {
	background: #f2786f;
}

.profil-item.professional .pi-top {
	background: #f65d5d;
}




/* Fejléc */
thead th {
    background-color: #50b343;
    color: #ffffff;
    font-weight: bold;
    padding: 8px 10px; /* Kisebb padding */
    text-transform: uppercase;
    font-size: 14px;
}

/* Táblázat sorok */
tbody tr {
   border-bottom: 1px solid #dddddd;
    transition: background-color 0.3s ease;
    background: #ef8927;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:hover {
    background-color: #e8f5e9;
}

/* Cella stílus */
td, th {
    padding: 8px 10px; /* Kisebb cellák */
	FONT-WEIGHT:900;
	
}



/* Táblázat kerete */
table, td, th {
    border: 1px solid #dddddd;
}

/* Táblázat szélén extra térköz */
table {
    border-radius: 4px;
    overflow: hidden;
}

/* Reszponzív stílus mobilokra */
@media (max-width: 768px) {
    table {

    }
    thead th, td {
        padding: 6px; /* Még kisebb cellák */
    }
    input[type="text"] {
        padding: 4px;
 
    }
}


table {
        margin: 0 auto;
    width: 90%;
    max-width: 600px;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
    box-shadow: 0px 0px 12px rgb(255 255 255);
    background: #ffffff;
}

/* Fejléc */
thead th {
    background-color: #50b343;
    color: #ffffff;
    font-weight: bold;
    padding: 8px 10px;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center; /* Fejléc tartalma középre */
}

/* Cella stílus */
td, th {
    padding: 8px 10px;
    text-align: center; /* Adatok is középre */
    font-family: poppins;
	font-size: small;
}

/* Reszponzív stílus mobilokra */
@media (max-width: 768px) {
    table {
     
    }
    thead th, td {
        padding: 6px;
		font-size:xx-small;
    }
    input[type="text"] {
        padding: 4px;
       
    }
	td, th {

	font-size: small;
}
}




/* Grafikon elem keret */
.egyedi-grafikon-elem {
    border: 1px solid #ddd;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 9px rgb(0 0 0);
     margin-right: 20%;
    margin-left: 20%;
}

/* Felső rész */
.egyedi-felso-resz {
    margin-bottom: 20px;
}

.egyedi-cim {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
    text-align: center; /* Középre igazítás mobilra is */
}

.egyedi-leiras {
    font-size: 1em;
    color: #555;
    text-align: center;
}

/* Form tartalom */
.egyedi-diagram-tarolo {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
}

/* Form elemek */
.egyedi-cimke {
    display: block;
    font-size: 0.9em;
    margin-bottom: 8px;
    color: #444;
}

.egyedi-bemenet,
.egyedi-szovegmezo {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.egyedi-bemenet:focus,
.egyedi-szovegmezo:focus {
    border-color: #43613f;
    outline: none;
    box-shadow: 0 0 5px rgba(67, 97, 63, 0.5);
}

.egyedi-kuldes {
    background-color: #43613f;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.egyedi-kuldes:hover {
    background-color: #3b5638;
}

/* Értesítés */
.egyedi-ertesites {
    padding: 10px;
    margin-top: 10px;
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
    border-radius: 4px;
}

/* Mobil nézet - 768px alatt */
@media (max-width: 768px) {
    .egyedi-grafikon-elem {
        padding: 15px;
        margin-left: 5px;
        width: 90%;
    }

    .egyedi-cim {
        font-size: 1.2em;
    }

    .egyedi-diagram-tarolo {
        padding: 15px;
    }

    .egyedi-bemenet,
    .egyedi-szovegmezo {
        font-size: 0.9em;
        padding: 8px;
    }

    .egyedi-kuldes {
        font-size: 0.9em;
        padding: 8px 15px;
    }
}

/* Nagyon kis kijelzőkhöz - 480px alatt */
@media (max-width: 480px) {
    .egyedi-cim {
        font-size: 1em;
    }

    .egyedi-bemenet,
    .egyedi-szovegmezo {
        padding: 6px;
        font-size: 0.8em;
    }

    .egyedi-kuldes {
        font-size: 0.8em;
        padding: 6px 10px;
    }
}


/* Árazás szakasz */
.egyedi-arazas-resz {
    padding: 40px 0px;
    background-color: #43613f;
}

.egyedi-tarolo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Sor */
.egyedi-sor {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}

/* Oszlop */
.egyedi-oszlop {
    flex: 1 1 100%;
    padding: 15px;
    text-align: center; /* Középre igazított tartalom */
}

/* G-recaptcha */
.egyedi-oszlop .g-recaptcha {
    margin-top: 20px;
}

/* Reszponzív tervezés */
@media (max-width: 768px) {
    .egyedi-arazas-resz {
        padding: 30px 15px;
    }

    .egyedi-oszlop {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .egyedi-arazas-resz {
        padding: 20px 10px;
    }

    .egyedi-oszlop {
        padding: 8px;
    }
}


/* Grafikon szakasz */
.grafikon-section {
    padding: 40px 20px;
    background-color: #f9f9f9;
}

.grafikon-tarolo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Cím */
.grafikon-cim {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

/* Leírás */
.grafikon-leiras {
    margin-bottom: 20px;
    font-size: 16px;
    color: #666;
}

/* Űrlap stílusok */
.grafikon-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
}

.grafikon-form label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.grafikon-form input[type="date"],
.grafikon-form input[type="checkbox"],
.grafikon-form button {
    font-size: 14px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}

.grafikon-form input[type="date"]:focus,
.grafikon-form button:hover {
    border-color: #43613f;
    box-shadow: 0 0 5px rgba(67, 97, 63, 0.3);
}

.grafikon-form button {
    background-color: #43613f;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.grafikon-form button:hover {
    background-color: #3b5638;
}

.grafikon-form .checkbox-csoport {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.grafikon-form .checkbox-csoport input {
    margin-right: 5px;
}

/* Canvas stílus */
#myChart {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}

/* Reszponzív stílusok */
@media (max-width: 768px) {
    .grafikon-form {
        flex-direction: column;
        align-items: stretch;
    }
	#myChart {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}
	
	

    .grafikon-form button {
        width: 100%;
    }

    .grafikon-form .checkbox-csoport {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .grafikon-cim {
        font-size: 20px;
    }

    .grafikon-form input[type="date"],
    .grafikon-form button {
        font-size: 12px;
        padding: 8px;
    }

    .grafikon-form .checkbox-csoport input {
        margin-right: 3px;
    }
}



.unique-pricing-section {
    background-color: #f4f4f4;
    padding: 30px 0;
}

.unique-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.unique-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.unique-graph-item {
    background-color: #2c3e50;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 800px;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
}

.unique-pi-top {
    margin-bottom: 30px;
}

.unique-weight-title {
    font-size: 28px;
    color: #fff;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.unique-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    margin-bottom: 30px;
    justify-items: stretch;
}

.unique-form label {
    font-size: 16px;
    color: #fff;
    display: block;
}

.unique-form input[type="date"], .unique-form select {
    margin-bottom: 10px;
}

.unique-form select {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 14px;
    color: #333;
    border-radius: 5px;
    width: 100%;
}

.unique-form button {
    grid-column: span 2;
    padding: 12px 25px;
    background-color: #7bff7e;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.unique-form button:hover {
    background-color: #56e56d;
}

.unique-graph-item canvas {
    max-width: 100%;
    height: 400px;
    margin-top: 20px;
}

/* Modális ablak háttér */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);  /* Átlátszó fekete háttér */
    transition: opacity 0.3s ease;
}

/* Modális ablak háttér */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);  /* Átlátszó fekete háttér */
    transition: opacity 0.3s ease;
}

/* Modális tartalom */
.modal-content {
    background-color: #43613f;  /* Finom zöld háttérszín */
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.5s ease-in-out;
    background: rgba(67, 97, 63, 0.9);  /* Áttetsző zöld háttér */
}

/* Animáció */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bezáró gomb */
.close {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Kép betöltésnél az űrlap szebb megjelenítése */
select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ddd;
}

/* Gombok */
button {
    padding: 10px 20px;
    background-color: #4CAF50;
    border: none;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}

/* Dropdown lista a lenyitható menühöz */
.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

/* Mobil nézethez igazítás */
@media (max-width: 600px) {
    .modal-content {
        width: 90%; /* Mobil képernyőn szélesebben */
        margin: 20% auto; /* Középre igazítva, 20%-os margóval */
    }

    .dropdown-content {
        min-width: 100%; /* Az egész szélességet kitölti */
    }

    button {
        width: 60%; /* A gomb szélessége a teljes képernyőt kitölti */
    }

    .modal {
        display: block; /* Modális ablak megjelenítése mobilon is */
    }
}

/* Mobil nézethez igazítás */

.custom-page-top {
	
	
    display: flex;
    justify-content: center; /* Középre igazítás vízszintesen */
    align-items: center; /* Középre igazítás függőlegesen */
    background-size: contain; /* A háttérkép kitölti a teret */
    background-repeat: no-repeat; /* Nem ismétlődik */
    background-position: center; /* Középre igazítja a képet */
    height: calc(100vh - 100px); /* A teljes magasság mínusz 100px, amit margóként használsz */
    padding-top: 50px;  /* Példa margó a tetején */
    padding-bottom: 50px; /* Példa margó az alján */
	margin-top:-5%;
    box-sizing: border-box; /* Box-sizing biztosítja, hogy a padding ne növelje meg a méretet */
	background-color: #43613f;
}


/* Desktop háttér */
@media (min-width: 1024px) {
    .custom-page-top {
        background-image: url(https://anonimbuilder.hu/img/desktop-banner.png);
    }
}

/* Tabletes és kisebb eszközökhöz háttér */
@media (max-width: 1023px) and (min-width: 768px) {
    .custom-page-top {
        background-image: url(https://anonimbuilder.hu/img/tablet-banner.png); /* Külön háttérkép tabletekhez */
    }
}

/* Mobil háttér */
@media (max-width: 768px) {
    .custom-page-top {
        background-image: url(https://anonimbuilder.hu/img/mobile-banner.png);
		margin-top: -25%;
    }
}





@media (max-width: 768px) {
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
}

 .pass-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex
;
    white-space: unset;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
 
    align-content: center;
    justify-content: space-around;

 
}


@media (max-width: 768px) {
.pass-icons {
   
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: contents;
        /* white-space: nowrap; */
        /* word-wrap: normal; */
        /* direction: ltr; */
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        margin-left: -45%;
        align-content: space-around;
        /* flex-wrap: nowrap; */
        flex-direction: column-reverse;
    }
}



.belepes-section {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 99;
}

.belepes-top::before {
	content: '';
	display: block;
	height: 3px; /* A csík magassága */
	background: #43613f; /* Csík színe (pl. kék) */
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.belepes-top {
	position: relative;
	padding: 0 80px;
	background: #000000;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border-radius: 0px;
}
}

.belepes-top:hover {
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
	background: #f9f9f9;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.belepes-top {
		padding: 0 30px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.belepes-top {
		padding: 0 10px;
	}
}

.ht-left {
	float: left;
}

.ht-right {
	float: right;
}

.belepes-info {
	margin-right: 5px;
	padding: 14px 0;
    font-weight: 700;
    padding-top: 20px;
}

.belepes-bottom {
	padding: 1px 80px 0;
	background: white;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.belepes-top {
		padding: 0 30px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.belepes-top {
		padding: 0 10px;
	}
}

.ht-left {
	float: left;
}

.ht-right {
	float: right;
}

.belepes-info {
	margin-right: 5px;
	padding: 14px 0;
    font-weight: 700;
    padding-top: 20px;
	margin-top: -20px;
}




@media only screen and (min-width: 768px) and (max-width: 991px) {
	.belepes-info {
		margin-right: 0;
	}
}

.belepes-info:last-child {
	margin-right: 0;
}

.belepes-info i {
	font-size: 17px;
	color: #43613f;
	margin-right: 10px;
	position: relative;
	top: 4px;
}

.belepes-info p {
	color: #43613f;
	margin-bottom: 0;

}



.belepes-bottom {
	padding: 1px 80px 0;
	background: white;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.belepes-bottom {
		padding: 15px 30px 0;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.belepes-bottom {
		padding: 15px 15px 0;
	}
}

.belepes-bottom .hb-right {
	float: right;
	padding-top: 15px;
}

.belepes-bottom .hb-switch {
	display: inline-block;
	margin-left: 20px;
	cursor: pointer;
}



.belepes-content {
    display: flex; /* Flexbox használata a fejléc elrendezéséhez */
    align-items: center; /* Vertikális középre igazítás */
    justify-content: space-between; /* Szétosztja a szöveget és a menüt */
    padding: 10px 20px;
   
}

.eredmenyek-container {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.eredmenyek-container h2 {
    text-align: center;
    color: #333;
    font-size: 2em;
    margin-bottom: 20px;
}

.eredmenyek-container p {
    text-align: center;
    color: #666;
    font-size: 1.2em;
    margin-bottom: 30px;
}

.versenyzo {
    margin-bottom: 30px;
}

.versenyzo h3 {
    color: #444;
    font-size: 1.5em;
    margin-bottom: 15px;
}

.eredmeny-lista {
    list-style-type: none;
    padding: 0;
}

.eredmeny-lista li {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 1.1em;
    color: #555;
}

.helyezes {
    font-weight: bold;
    color: #e67e22;
}

@media (max-width: 768px) {
    .feature-box {
        width: 90% !important; /* A képernyő szélességének 95%-a telefonon */
    }
}

/* Feature Box szekció */
.siker-grid {
    display: flex
;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    align-content: center;
    flex-direction: column;
    align-items: baseline;


}

.siker-box {
    background: #272727;
    border-radius: 10px;
    padding: 30px;
width: 85%; /* Még szélesebb box */
    max-width: 1000px; /* További szélesség limit */
    height: 1000px;
    margin: 20px 0;
        box-shadow: 0 0px 9px 6px #43613f;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    text-align: center;
    overflow: hidden;
	

    overflow-y: auto; /* Görgetés, ha a tartalom túl hosszú */
    max-height: 600px; /* Korlátozzuk a magasságot */

}

.siker-box:hover {
    transform: translateY(-8px);  /* Enyhe emelkedés */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);  /* Tágabb árnyék */
    background-color: #1f1f1f;  /* Finom háttérszín változás */
}

.siker-box h3 {
    color: #43613f;
    margin-bottom: 30px;
    font-size: 2rem;
    font-family: 'Poppins';
	    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
}

.siker-box p {
    font-size: 1rem;
    color: #fff;
	font-family: poppins;
}


@media (max-width: 768px) {
    .siker-box {
        width: 85%; /* Mobilon teljes szélességű legyen */
        padding: 20px; /* Kisebb padding mobilon */
    }

    .siker-box h3 {
        font-size: 1.5rem; /* Kisebb cím mobilon */
    }

    .siker-box p {
        font-size: 0.9rem; /* Kisebb szöveg mobilon */
    }
}


.siker-box {
    scrollbar-width: thin; /* Vékony görgetősáv */
    scrollbar-color: #43613f #1f1f1f; /* Színes görgetősáv */
}

.siker-box::-webkit-scrollbar {
    width: 8px; /* Görgetősáv szélessége */
}

.siker-box::-webkit-scrollbar-thumb {
    background-color: #43613f; /* Görgetősáv színe */
    border-radius: 4px; /* Kerekített sarkok */
}

.siker-box::-webkit-scrollbar-track {
    background-color: #1f1f1f; /* Görgetősáv háttérszíne */
}


.siker-box:hover {
    transform: translateY(-8px);  /* Enyhe emelkedés */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);  /* Tágabb árnyék */
    background-color: #1f1f1f;  /* Finom háttérszín változás */
}

.siker-box h3 {
    color: #ffffff;
    margin-bottom: 30px;
    font-size: 1.7rem;
    font-family: 'Poppins', sans-serif; /* Biztosítsd, hogy a betűtípus betöltődik */
    text-shadow: 0 0 20px #43613f, 0 0 20px #43613f, 0 0 30px #43613f;
}

.siker-box p {
    font-size: 1rem;
    color: #fff;
    font-family: 'Poppins', sans-serif; /* Biztosítsd, hogy a betűtípus betöltődik */
    line-height: 1.6; /* Jobb olvashatóság érdekében */
}


.siker-box h4{
color: #43613f;
    margin-bottom: 30px;
    font-size: 3rem;
    font-family: 'Poppins', sans-serif; /* Biztosítsd, hogy a betűtípus betöltődik */
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
}



@media (max-width: 768px) {
    .verseny-image {
           max-width: 60%;
    margin: 10px auto!important;
    border-radius: 10px;
    box-shadow: 0 0 8px 4px rgb(255 255 255);
    margin-bottom: 20px!important; 
    }
}

.verseny-image {
        max-width: 40%;
        margin: 20px auto;
        border-radius: 10px;
        box-shadow: 0 0 8px 4px rgb(255 255 255);
		    margin-bottom: 100px;
    }
	
	
	@media (max-width: 768px) {
		.siker-box h4{
color: #43613f;
    margin-bottom: 30px;
    font-size: 2rem;
    font-family: 'Poppins', sans-serif; /* Biztosítsd, hogy a betűtípus betöltődik */
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
}
		.feature-box h3 {
    color: #43613f;
    margin-bottom: 30px;
    font-size: 2rem;
    font-family: 'Poppins';
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
}

.siker-box h3 {
    color: #ffffff;
    margin-bottom: 30px;
    font-size: 1.5rem;
    font-family: 'Poppins', sans-serif; /* Biztosítsd, hogy a betűtípus betöltődik */
    text-shadow: 0 0 20px #43613f, 0 0 20px #43613f, 0 0 30px #43613f;
}
		
		}
		
		
		
		
		.evidence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Két oszlop */
    gap: 20px; /* Térköz a szöveg és a képek között */
    align-items: center; /* Középre igazítás */
}

.evidence-text {
      background-color: #eaeaea;
    padding: 20px;
    font-family: 'Poppins';
    border-radius: 10px;
    box-shadow: 0 4px 8px rgb(0 0 0 / 32%);
}

/*.evidence-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  Két oszlop a képeknek 
    gap: 10px;  Térköz a képek között 
*/

.evidence-image-grid img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0px 0px 8px rgb(0 0 0);
	margin-left: 20px;
	
}
	
	.evidence-text {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
   box-shadow: 0 4px 8px rgb(0 0 0 / 32%);
}

.evidence-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #43613f;
    margin-bottom: 20px;
}

.evidence-text p {
    font-size: 1.2rem;
    font-weight: 500;
    color: #444;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .evidence-text p {
        font-size: 1rem;
    }

    .evidence-text h2 {
        font-size: 2rem;
    }
	
	
	.evidence-image-grid img {
   
        width: 100%;
        border-radius: 10px;
               box-shadow: 0px 0px 8px rgb(0 0 0);
        margin-top: 50px;
        margin-bottom: 70px;
		margin-inline: auto;
    }
	
	
	.evidence-grid {
   display: inline-table;
    grid-template-columns: 1fr 1fr; /* Két oszlop */
    gap: 20px; /* Térköz a szöveg és a képek között */
    align-items: center; /* Középre igazítás */
}

}


	
	
	.kapcs-button {
 background-color: #fff;
    color: #43613f;
    padding: 12px 35px;
    font-size: 1.1rem;
    text-transform: uppercase;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
    margin-top: 20px;
    box-shadow: 0 0 8px 5px #00d5ff;
    margin-left: 90px;
}

.kapcs-button:hover {
    background-color: #4c7a63;
    color: #fff;
}

@media (max-width: 768px) {
.kapcs-button {
        /* padding: 12px 25px; */
        font-size: 1rem !important;
        background-color: #fff;
        color: #43613f;
        padding: 12px 35px;
        font-size: 1.1rem;
        text-transform: uppercase;
        border-radius: 5px;
        font-weight: bold;
        transition: background-color 0.3s;
        box-shadow: 0 0 8px 5px #00d5ff;
        display: flow;
        margin-top: 40px;
        height: 50px;
		        margin-inline: auto;
    }
	}
	
	
	
	
	
	
	/* Feature Box szekció */
.siker-grid {
    display: flex
;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    align-content: center;
    flex-direction: column;
    align-items: baseline;


}

.tanulmany-box {
   background: #272727;
    border-radius: 10px;
    padding: 30px;
    width: 85%;
    max-width: 1000px;
    height: 700px;
    margin: 20px 0;
    box-shadow: 0 0px 9px 6px #43613f;
    /* transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; */
    text-align: center;
    /* overflow: hidden; */
    /* overflow-y: auto; */
    /* max-height: 600px; */
}



.tanulmany-box:hover {
    transform: translateY(-8px);  /* Enyhe emelkedés */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);  /* Tágabb árnyék */
    background-color: #1f1f1f;  /* Finom háttérszín változás */
}

.tanulmany-box h3 {
    color: #43613f;
    margin-bottom: 30px;
    font-size: 2rem;
    font-family: 'Poppins';
	    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
}

.tanulmany-box p {
    font-size: 1rem;
    color: #fff;
	font-family: poppins;
}


@media (max-width: 768px) {
    .tanulmany-box {
        width: 85%; /* Mobilon teljes szélességű legyen */
        padding: 20px; /* Kisebb padding mobilon */
		height:auto;
    }

    .tanulmany-box h3 {
        font-size: 1.5rem; /* Kisebb cím mobilon */
    }

    .tanulmany-box p {
        font-size: 0.9rem; /* Kisebb szöveg mobilon */
    }
}


.tanulmany-box {
    scrollbar-width: thin; /* Vékony görgetősáv */
    scrollbar-color: #43613f #1f1f1f; /* Színes görgetősáv */
}

.tanulmany-box::-webkit-scrollbar {
    width: 8px; /* Görgetősáv szélessége */
}

.tanulmany-box::-webkit-scrollbar-thumb {
    background-color: #43613f; /* Görgetősáv színe */
    border-radius: 4px; /* Kerekített sarkok */
}

.tanulmany-box::-webkit-scrollbar-track {
    background-color: #1f1f1f; /* Görgetősáv háttérszíne */
}


.tanulmany-box:hover {
    transform: translateY(-8px);  /* Enyhe emelkedés */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);  /* Tágabb árnyék */
    background-color: #1f1f1f;  /* Finom háttérszín változás */
}

.tanulmany-box h3 {
    color: #ffffff;
    margin-bottom: 30px;
    font-size: 1.7rem;
    font-family: 'Poppins', sans-serif; /* Biztosítsd, hogy a betűtípus betöltődik */
    text-shadow: 0 0 20px #43613f, 0 0 20px #43613f, 0 0 30px #43613f;
}

.tanulmany-box p {
    font-size: 1rem;
    color: #fff;
    font-family: 'Poppins', sans-serif; /* Biztosítsd, hogy a betűtípus betöltődik */
    line-height: 1.6; /* Jobb olvashatóság érdekében */
}


.tanulmany-box h4{
color: #43613f;
    margin-bottom: 30px;
    font-size: 3rem;
    font-family: 'Poppins', sans-serif; /* Biztosítsd, hogy a betűtípus betöltődik */
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff;
}

@media (max-width: 768px) {
.tanulmany-box h4{

    font-size: 2rem;
   
}
}



.hidden-content {
    display: none; /* Alapértelmezetten elrejtve */
   
}

  .toggle-btn {
	
width:100%;
    background-color: #1976D2;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-inline: auto;
	  margin-bottom:10px;
	  border-bottom: solid 3px white;
    font-family: poppins;
    font-weight: 900;
	 

        }

        .toggle-btn i {
            margin-right: 8px;
        }

        .toggle-btn:hover {
            background-color: #4f88c0;
        }
		

        .toggle-btn i {
            margin-right: 8px;
        }

        .toggle-btn:hover {
            background-color: #4f88c0;
        }



     
		
		.nyit-section {
	background: #43613f;
}



.mani {
    display: -ms-flexbox;
    display: flex
;
    -ms-flex-wrap: wrap;
    /* flex-wrap: wrap; */
    justify-content: space-evenly;
}


 .card-container {
            display: inline-flex; /* Kártyák egymás mellett */
            flex-wrap: wrap; /* Törik a sor, ha több kártya van */
            align-content: center; /* Középre igazítás függőlegesen */
            gap: 10px; /* Térköz a kártyák között */
        }

        .card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            background-color: #f9f9f9;
            text-align: center;
            width: 200px; /* Kártyák szélessége */
        }
		
	@media (max-width: 768px) {	
.toggle-btn{

    background-color: #1976D2;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-inline: auto;
	  margin-bottom:10px;
	 border-bottom: solid 3px white;
        }
		
		
		.chart_container {
    background: white;
	        min-width: 100%;
}
		}
	
	@media (max-width: 768px) {	
	
	.blood-item{
	width:100%;
	}
	.cukor-item{
	width:100%;
	}
	
	.meresek-item{
	width:100%;
	}
	.step-item{
	width:100%;
	}
	
	
	
	}
	
	
	
	
	.lab {
		    display: contents;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.bal {
    display: -ms-flexbox;
    display: flex
;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-around;
}


 .asd {
	
   width: 100%;
    background-color: #9C27B0;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-inline: auto;
	  margin-bottom:10px;
	  border-bottom: solid 3px white;
    font-family: poppins;
    font-weight: 900;
	         
	
        }

        .asd i {
            margin-right: 8px;
        }

        .asd:hover {
            background-color: #da00ff;
        }
		

        .asd i {
            margin-right: 8px;
        }

        .asd:hover {
            background-color:#da00ff;
        }


@media (max-width: 768px) {	
.asd{
	width:100%;
    background-color:#9C27B0;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-inline: auto;
	  margin-bottom:10px;
 border-bottom: solid 3px white;
        }
        }
		
		 .asd1{
	
   width: 100%;
    background-color:#F44336;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-inline: auto;
	  margin-bottom:10px;
	     border-bottom: solid 3px white;
    font-family: poppins;
    font-weight: 900;
        }

        .asd1 i {
            margin-right: 8px;
        }

        .asd1:hover {
            background-color: #ff1100;
        }
		

        .asd1 i {
            margin-right: 8px;
        }

        .asd1:hover {
            background-color: #ff1100;
        }


@media (max-width: 768px) {	
.asd1{
	width:100%;
    background-color: #F44336;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-inline: auto;
	  margin-bottom:10px;
border-bottom: solid 3px white;
        }
        }
		
		
			 .asd2 {
	
   width: 100%;
    background-color: #FF9800;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-inline: auto;
	  margin-bottom:10px;
	  border-bottom: solid 3px white;
    font-family: poppins;
    font-weight: 900;
	 

        }

        .asd2 i {
            margin-right: 8px;
        }

        .asd2:hover {
            background-color: #ff6900;
        }
		

        .asd2 i {
            margin-right: 8px;
        }

        .asd2:hover {
            background-color: #ff6900;
        }


@media (max-width: 768px) {	
.asd2{
	width:100%;
    background-color: #FF9800;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-inline: auto;
	  margin-bottom:10px;
	  border-bottom: solid 3px white;

        }
        }
		
		
		
		
		
		
					 .asd3{
	
   width: 100%;
    background-color: #2196F3;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-inline: auto;
	  margin-bottom:10px;
	  border-bottom: solid 3px white;
    font-family: poppins;
    font-weight: 900;

        }

        .asd3 i {
            margin-right: 8px;
        }

        .asd3:hover {
            background-color: #36a6ff;
        }
		

        .asd3 i {
            margin-right: 8px;
        }

        .asd3:hover {
            background-color: #36a6ff;
        }


@media (max-width: 768px) {	
.asd3{
	width:100%;
    background-color: #2196F3;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-inline: auto;
	  margin-bottom:10px;
	  border-bottom: solid 3px white;
   
        }
        }
		
		
		
					 .asd4 {
	
   width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-inline: auto;
	  margin-bottom:10px;
	  border-bottom: solid 3px white;
    font-family: poppins;
    font-weight: 900;
	 

        }

        .asd4 i {
            margin-right: 8px;
        }

        .asd4:hover {
            background-color: #45a049;
        }
		

        .asd4 i {
            margin-right: 8px;
        }

        .asd4:hover {
            background-color: #45a049;
        }


@media (max-width: 768px) {	
.asd4{
	width:100%;
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-inline: auto;
	  margin-bottom:10px;
	  border-bottom: solid 3px white;
         
        }
        }
		
		
		
	     .hidden-content {
            display: none; /* Alapértelmezett: elrejtve */
            flex-wrap: wrap;
            gap: 10px;
        }

        .hidden-content.show {
            display: flex; /* Láthatóvá téve */
        }

        .special-table {
            width: 90%;
            border-collapse: collapse;
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }



        .special-table th {
            background-color: #FFA500; /* Narancssárga szín a fejlécnek */
            color: #fff;
            font-weight: 600;
        }

      

       

   

  
/
/* Stílus a második táblázatra */
/* Konténer stílusok */
.table-container {
    width: 100%; /* Teljes szélesség */
    overflow-x: auto; /* Vízszintes görgetés, ha mégis szükséges */
}

/* Táblázat stílusok */
.chemical-table {
 
    border-collapse: collapse;
    background-color: #fff;
}

.chemical-table th,
.chemical-table td {
    padding: 8px; /* Kisebb padding */
    font-size: 12px; /* Kisebb betűméret */
    border: 1px solid #000;
    text-align: center;
	font-family: poppins;
	    font-weight: 700;
}

.chemical-table th {
    background-color:#515050;
    color: white;
    font-size: 14px; /* Kicsit nagyobb betűméret a fejléceknek */
}

.chemical-table tbody tr:hover {
    background-color: #d4edda; /* Háttérszín hover esetén */
}


.icon {
        margin-right: 5px;
    }
    .active-ingredient { background-color: #00ff7b; color: white; } /* Hatóanyag cella */
    .weekly-dose { background-color: #3498db; color: white; } /* Heti adag cella */
    .frequency { background-color: #e74c3c; color: white; } /* Gyakoriság cella */
    .per-dose { background-color: #9b59b6; color: white; } /* 1 adagban cella */
    .administration { background-color: #2ecc71; color: white; } /* Beadás cella */
	.notafiction { background-color: #2eb4e2; color: white; } /* Beadás cella */
	.totald { background-color:#ff0000; color: white; } /* Beadás cella */

/* Mobilos stílusok */
@media (max-width: 600px) {
    .chemical-table th,
    .chemical-table td {
        padding: 0.1px; /* Még kisebb padding mobilon */
        font-size: 10px; /* Még kisebb betűméret mobilon */
    }

    .chemical-table th {
        font-size: 10px; /* Fejléc betűmérete mobilon */
    }
}



.kemia-item {

height: fit-content;
text-align: center !important;
    background: #413f3f !important;
    padding-bottom: 20px !important;
    margin: 15px 5px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 5px 6px #36a6ff !important;
    box-shadow: 0px 0px 13px #36a6ff !important;;
    -webkit-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    transition: all 0.4s !important;
    border:solid 2px #36a6ff !important;
    /*margin: 0 auto !important; /* Középre helyezés */

}


.kemia-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.kemia-item .pi-top {
    height: 120px; /* Magasság növelése, ha több helyre van szükség */
    padding-top: 30px; /* A padding növelése, hogy több hely legyen a tartalom körül */
    background: #f65d5d; /* Megmaradt a piros háttér */
    text-align: center; /* Szöveg és ikon középre igazítása */
}
}

.kemia-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.kemia-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.kemia-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.kemia-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.kemia-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.kemia-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.kemia-item.begginer .pi-top {
	background: #fdb07d;
}

.kemia-item.entermediate .pi-top {
       background: #00000000 !important;
}

.kemia-item.advanced .pi-top {
	background: #f2786f;
}

.kemia-item.professional .pi-top {
	background: #f65d5d;
}





.kemia-title { 
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
	position: relative; /* Szükséges az ::after pseudo-elemhez */
	margin-bottom: 5%;
}




.kemia-title i {
    font-size: 30px;
    color: #36a6ff;
    /*margin-left: 45px;*/
	
	
}


.kemia-description {
        font-family: 'Poppins';/* Betűtípus beállítása, ha nem az alapértelmezett */
    font-size: 13px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
	
}



.kemia-section {
	background: #f9f2f0;
}

.kemia-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 3px;
     background: linear-gradient(to right, #36a6ff00, #36a6ff, #36a6ff00);
    border-radius: 2px;
    margin-left: 15%;
}


.chart-container {
    width: 100%;
    max-width: 800px; /* Maximális szélesség */
    margin: 20px auto; /* Középre igazítás és térköz */
	height: 300px;
    width: 480px;
	
}
@media (max-width: 768px) {	
.chart-container {
    width: 100%;
    max-width: 800px; /* Maximális szélesség */
    margin: 20px auto; /* Középre igazítás és térköz */
	height: 200px;
    width: 280px;
	
}
}


.bali {
    display: flex
;
    -ms-flex-wrap: wrap !important;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
	margin-top: 10px;
    /* flex-direction: row-reverse; */
}
     .section-content {
            display: none;
            margin-top: 10px;
            padding: 20px;
        
        }
        .section-content.open {
           display: flex;
    -ms-flex-wrap: wrap !important;
    justify-content: flex-start;
align-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    /* flex-direction: row-reverse; */
	background: #43613f;
    margin-top: -1%;

        }
		@media (max-width: 768px) {	
		.section-content {
            display: none;
            margin-top: 10px;
            padding: 20px;
        
        }
        .section-content.open {
           display: flex;
    -ms-flex-wrap: wrap !important;
    justify-content: flex-start;
    align-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    /* flex-direction: row-reverse; */
	background: #43613f;
    margin-top: -1%;

        }
		
		
		
		}
		
		
		
		.kardio-item {

height: fit-content;
text-align: center !important;
    background: #413f3f !important;
    padding-bottom: 20px !important;
    margin: 15px 5px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 5px 6px #36a6ff !important;
    box-shadow: 0px 0px 13px #FFF44F !important;;
    -webkit-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    transition: all 0.4s !important;
    border:solid 2px #FFF44F !important;
    /*margin: 0 auto !important; /* Középre helyezés */

}


.kardio-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.kardio-item .pi-top {
    height: 120px; /* Magasság növelése, ha több helyre van szükség */
    padding-top: 30px; /* A padding növelése, hogy több hely legyen a tartalom körül */
    background: #f65d5d; /* Megmaradt a piros háttér */
    text-align: center; /* Szöveg és ikon középre igazítása */
}
}

.kardio-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.kardio-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.kardio-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.kardio-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.kardio-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.kardio-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.kardio-item.begginer .pi-top {
	background: #fdb07d;
}

.kardio-item.entermediate .pi-top {
       background: #00000000 !important;
}

.kardio-item.advanced .pi-top {
	background: #f2786f;
}

.kardio-item.professional .pi-top {
	background: #f65d5d;
}


.kardio-title { 
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
	position: relative; /* Szükséges az ::after pseudo-elemhez */
	margin-bottom: 5%;
}




.kardio-title i {
    font-size: 30px;
    color: #FFF44F;
    /*margin-left: 45px;*/
	
	
}


.kardio-description {
        font-family: 'Poppins';/* Betűtípus beállítása, ha nem az alapértelmezett */
    font-size: 13px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
	
}



.kardio-section {
	background: #f9f2f0;
}

.kardio-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 3px;
     background: linear-gradient(to right, #36a6ff00, #FFF44F, #36a6ff00);
    border-radius: 2px;
    margin-left: 15%;
}


.kardio input {
    width: 80% !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: 1px solid #ff0000 !important;
    background:#282727 !important; !important;
}
.unit {
    color: #ffffff !important;
    margin-left: 10px !important; /* Kisebb távolság, hogy ne legyen túl szoros */
}


/* A "kg" egység formázása */
.kardio-input .unit {
    font-size: 20px;
    color: white; /* Példa: narancssárga szín */
    font-weight: bold;
}


/* sajat gombok */
.kardio-btn {
	display: inline-block;
	border: none;
	font-size: 16px;
	font-weight: 600;
	min-width: 167px;
	padding: 14px 30px;
	border-radius: 50px;
	text-transform: uppercase;
	color: #fff;
	line-height: normal;
	cursor: pointer;
	text-align: center;
	letter-spacing: 1px;
	 margin-top: 20px; /* Távolság a beviteli mezők és a gomb között */
	
}


.kardio-btn:hover {
	color: #fff;
}

.kardiobtn.sb-white {
	background: #fff;
	color: #f65d5d;
}

.kardio-btn.sb-gradient {
	color: #fff;
	padding: 2px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
	margin-top: 10px;
    margin-left: -15px;
	   background: #282727 !important;
    border: solid 1px #FFF44F;
}


.kardio-btn.sb-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.kardio-btn.sb-gradient:hover {
	color: #578e52;
}

.kardio-btn.sb-gradient:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
}

.kardio-btn.sb-line-gradient {
	color: #FFF44F;
	padding: 13px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
}

.kardio-btn.sb-line-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.kardio-btn.sb-line-gradient:hover {
	color: #fff;
}

.kardio-btn.sb-line-gradient:hover:after {
	opacity: 0;
	filter: alpha(opacity=0);
}

kardio-map {
	position: relative;
	height: 100%;
	background: #ddd;
	border-radius: 12px;
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.kardio-map {
		height: 400px;
		margin-bottom: 40px;
	}
}

.kardio-map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.kardio-text {
	padding-right: 50px;
	margin-bottom: 40px;
}

.kardio-text h3 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.kardio-form input, .kardio-form textarea {
    width: 80% !important;
    height: 40px !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: 1px solid #FFF44F ;
    background-color: #1a1a1a ;
    display: inline-block !important;
    margin-bottom: 20px !important;
}
	.kardio-btn {
    margin-top: 20px !important;
}


/*---------------------
  stress
-----------------------*/

.kaja-title { 
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
	position: relative; /* Szükséges az ::after pseudo-elemhez */
	margin-bottom: 5%;
}




.kaja-title i {
    font-size: 30px;
    color: #FFA500;
    /*margin-left: 45px;*/
	
	
}


.kaja-description {
        font-family: 'Poppins';/* Betűtípus beállítása, ha nem az alapértelmezett */
    font-size: 13px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
	
}



.kaja-section {
	background: #f9f2f0;
}

.kaja-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 3px;
    background: linear-gradient(to right,rgba(255, 255, 255, 0) ,#FFA500, rgba(255, 255, 255, 0));
    border-radius: 2px;
    margin-left: 15%;
}


.kaja-input input {
    width: 80% !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: solid 1px #06fcb5;
    background: #282727 !important;

}
.unit {
    color: #ffffff !important;
    margin-left: 10px !important; /* Kisebb távolság, hogy ne legyen túl szoros */
}


/* A "kg" egység formázása */
.kaja-input .unit {
    font-size: 20px;
    color: white; /* Példa: narancssárga szín */
    font-weight: bold;
}


/* sajat gombok */
.kaja-btn {
	display: inline-block;
	border: none;
	font-size: 16px;
	font-weight: 600;
	min-width: 167px;
	padding: 14px 30px;
	border-radius: 50px;
	text-transform: uppercase;
	color: #fff;
	line-height: normal;
	cursor: pointer;
	text-align: center;
	letter-spacing: 1px;
	 margin-top: 20px; /* Távolság a beviteli mezők és a gomb között */
	
}


.kaja-btn:hover {
	color: #fff;
}

.kaja-btn.sb-white {
	background: #fff;
	color: #f65d5d;
}

.kaja-btn.sb-gradient {
	color: #fff;
	padding: 2px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
	margin-top: 10px;
    margin-left: -15px;
	    background: #282727 !important;
    border: solid 1px  #ff6e0d;
}


.kaja-btn.sb-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.kaja-btn.sb-gradient:hover {
	color: #578e52;
}

.kajabtn.sb-gradient:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
}

.kaja-btn.sb-line-gradient {
	color: #f65d5d;
	padding: 13px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
}

.kaja-btn.sb-line-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.kaja-btn.sb-line-gradient:hover {
	color: #fff;
}

.kaja-btn.sb-line-gradient:hover:after {
	opacity: 0;
	filter: alpha(opacity=0);
}

kaja-map {
	position: relative;
	height: 100%;
	background: #ddd;
	border-radius: 12px;
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.kaja-map {
		height: 400px;
		margin-bottom: 40px;
	}
}

.kaja-map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.kajatext {
	padding-right: 50px;
	margin-bottom: 40px;
}

.kaja-text h3 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.kaja-form input, .kaja-form textarea {
    width: 80% !important;
    height: 40px !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: solid 1px  #06fcb5;
    background:#282727 !important !;
    display: inline-block !important;
    margin-bottom: 20px !important;
}
	.kaja-btn {
    margin-top: 20px !important;
}

.kaja-section {
	background: #f9f2f0;
}

.kaja-item {

height: fit-content;
text-align: center !important;
    background: #413f3f !important;
    padding-bottom: 20px !important;
    margin: 15px 5px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15) !important;
    box-shadow: 0px 0px 13px rgb(255 163 0) !important;;
    -webkit-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    transition: all 0.4s !important;
    border:solid 2px #FFA500 !important;
	margin-bottom:100px; 
    /*margin: 0 auto !important; /* Középre helyezés */
	
}


.kaja-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.kaja-item .pi-top {
    height: 120px; /* Magasság növelése, ha több helyre van szükség */
    padding-top: 30px; /* A padding növelése, hogy több hely legyen a tartalom körül */
    background: #f65d5d; /* Megmaradt a piros háttér */
    text-align: center; /* Szöveg és ikon középre igazítása */
}
}

.kaja-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.kaja-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.kaja-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.kaja-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.kaja-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.kaja-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.kaja-item.begginer .pi-top {
	background: #fdb07d;
}

.kaja-item.entermediate .pi-top {
       background: #00000000 !important;
}

.kaja-item.advanced .pi-top {
	background: #f2786f;
}

.kaja-item.professional .pi-top {
	background: #f65d5d;
}



.workout-day {
        background-color: #e0f7fa!important; /* Világos kék háttér edzésnaphoz */
        text-align: center!important;
        font-weight: bold!important;
    }
    .rest-day {
        background-color: #fce4ec !important; /* Világos rózsaszín háttér pihenőnaphoz */
        text-align: center!important;
        font-weight: bold!important;
    }
    .icon {
        margin-right: 5px;
		font-weight:900;
    }
    .fat { color: #f31212; } /* Narancssárga szín a zsírhoz */
    .carb { color: #3498db !important; } /* Kék szénhidráthoz */
    .protein { color: #e74c3c !important; } /* Piros fehérjéhez */
    .fiber { color: #2ecc71; } /* Zöld rosthoz */
    .calories { color: #9b59b6; } /* Lila kalóriához */
	.water { color: #10dbff; } /* kék a viz */
	.salt { color: #7FC8F8; } /* fehér a só */
	.morning { color: #ffff00; }
	.pre{ color: #ffa300; }
	.intra { color:#7FC8F8; } 
	.after { color:#c00bff ; }
	.bed { color: #8a5cad; }
	
	    .fat-cell { background-color: #f39c12; color: white; } /* Zsír cella */
    .carb-cell { background-color: #3498db; color: white; } /* Szénhidrát cella */
    .protein-cell { background-color: #e74c3c; color: white; } /* Fehérje cella */
    .fiber-cell { background-color: #2ecc71; color: white; } /* Rost cella */

    .calories-cell { background-color: #9b59b6; color: white; } /* Kalória cella */
	.salt-cell { background-color: #7FC8F8; color: black;  } /* só cella */
	.water-cell { background-color: #10dbff; color: white; } /* viz cella */
	
	
	
	   .flash { color: #00ff7b; } 
    .week { color: #3498db; } 
    .sync { color: #e74c3c; } 
    .capsules { color: #9b59b6; } 
    .syringe { color: #2ecc71; } 
	.notafict { color: #2eb4e2; } 
	





@media (max-width: 768px) {
.kaja-item{
		width:100%;

}}

@media (max-width: 768px) {
    .kardio-item {
        width: 100%;
    }
}

@media (max-width: 768px) {
.special-table{
		width:80%;

}}


@media (max-width: 768px) {
.special-table th {
        font-weight: 550;
		font-size: x-small;
}
}



@media (max-width: 768px) {
.special-table td, th {
       font-size: smaller;
}
}

.site-header {
    background-color: #43613f;
    color: white;
    text-align: center;
    padding: 20px;
}

.athlete-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.athlete-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 300px;
    margin: 15px;
    padding: 15px;
    text-align: center;
}

.athlete-card img {
    width: 100%;
    border-radius: 10px;
}

.athlete-name {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

.athlete-prep {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}


/* Stílus az "i" ikonhoz */
.info-icon {
    cursor: pointer;
    margin-left: 10px;
    font-size: 24px; /* Megnövelt méret */
    color: #43613f; /* Illeszkedik a fő színhez */
    font-weight: bold;
  background-color: #ffffffed; /* Fehér háttér */
    border-radius: 50%; /* Kör alakú háttér */
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Árnyék a kiemeléshez */
    transition: color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
	height: 31px;
}

.info-icon:hover {
    color: #2f442b; /* Sötétebb árnyalat hover esetén */
    transform: scale(1.2); /* Kiemelés hover esetén */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Erősebb árnyék hover esetén */
}

/* Felugró ablak stílusa */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2e2e2e; /* Sötétebb háttér, jobban illeszkedik a dizájnhoz */
    padding: 25px; /* Kényelmesebb térköz */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Erősebb árnyék */
    z-index: 1000;
    border-radius: 12px; /* Lekerekítettebb sarkok */
    max-width: 420px;
    width: 90%;
    animation: fadeIn 0.3s ease-out;
    color: white; /* Fehér szöveg a sötét háttéren */
    text-align: center;
	border: 1px solid white;
}



.popup p {
   margin: 0 0 15px;
    font-size: larger;
    line-height: 1.5;
    color: white;
    font-family: 'Poppins';
}

.popup button {
    padding: 12px 20px;
    background-color: #43613f;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s ease, transform 0.2s ease;
	border: 1px solid white;
}

.popup button:hover {
    background-color: #2f442b;
    transform: scale(1.05); /* Finom kiemelés hover esetén */
}


/* Popup animáció */
@keyframes fadeInPopup {
    from {
        opacity: 0;
        transform: translate(-50%, -55%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Használat a popup-hoz */
.popup {
    animation: fadeInPopup 0.3s ease-out;
}

@media (max-width: 768px) {
.popup{
		width:75%;

}}



.supp-title { 
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
	position: relative; /* Szükséges az ::after pseudo-elemhez */
	margin-bottom: 5%;
}




.supp-title i {
    font-size: 30px;
    color: #50b343;
    /*margin-left: 45px;*/
	
	
}


.supp-description {
        font-family: 'Poppins';/* Betűtípus beállítása, ha nem az alapértelmezett */
    font-size: 13px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
	
}



.supp-section {
	background: #f9f2f0;
}

.supp-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 3px;
    background: linear-gradient(to right,rgba(255, 255, 255, 0) ,#50b343, rgba(255, 255, 255, 0));
    border-radius: 2px;
    margin-left: 15%;
}


.supp-input input {
    width: 80% !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: solid 1px #06fcb5;
    background: #282727 !important;

}
.unit {
    color: #ffffff !important;
    margin-left: 10px !important; /* Kisebb távolság, hogy ne legyen túl szoros */
}


/* A "kg" egység formázása */
.supp-input .unit {
    font-size: 20px;
    color: white; /* Példa: narancssárga szín */
    font-weight: bold;
}


/* sajat gombok */
.supp-btn {
	display: inline-block;
	border: none;
	font-size: 16px;
	font-weight: 600;
	min-width: 167px;
	padding: 14px 30px;
	border-radius: 50px;
	text-transform: uppercase;
	color: #fff;
	line-height: normal;
	cursor: pointer;
	text-align: center;
	letter-spacing: 1px;
	 margin-top: 20px; /* Távolság a beviteli mezők és a gomb között */
	
}


.supp-btn:hover {
	color: #fff;
}

.supp-btn.supp-white {
	background: #fff;
	color: #f65d5d;
}

.supp-btn.supp-gradient {
	color: #fff;
	padding: 2px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
	margin-top: 10px;
    margin-left: -15px;
	    background: #282727 !important;
    border: solid 1px  #ff6e0d;
}


.supp-btn.supp-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.supp-btn.supp-gradient:hover {
	color: #578e52;
}

.suppbtn.supp-gradient:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
}

.supp-btn.sb-line-gradient {
	color: #f65d5d;
	padding: 13px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
}

.supp-btn.sb-line-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.supp-btn.sb-line-gradient:hover {
	color: #fff;
}

.supp-btn.sb-line-gradient:hover:after {
	opacity: 0;
	filter: alpha(opacity=0);
}

supp-map {
	position: relative;
	height: 100%;
	background: #ddd;
	border-radius: 12px;
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.supp-map {
		height: 400px;
		margin-bottom: 40px;
	}
}

.supp-map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.supp-text {
	padding-right: 50px;
	margin-bottom: 40px;
}

.supp-text h3 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.supp-form input, .supp-form textarea {
    width: 80% !important;
    height: 40px !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: solid 1px  #06fcb5;
    background:#282727 !important !;
    display: inline-block !important;
    margin-bottom: 20px !important;
}
	.supp-btn {
    margin-top: 20px !important;
}

.supp-section {
	background: #f9f2f0;
}

.supp-item {

height: fit-content;
    text-align: center !important;
    background: #413f3f !important;
    padding-bottom: 20px !important;
    margin: 15px 5px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15) !important;
    box-shadow: 0px 0px 13px #50b343 !important;
    -webkit-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    transition: all 0.4s !important;
    border: solid 2px #50b343 !important;
}

.supp-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.supp-item .pi-top {
    height: 120px; /* Magasság növelése, ha több helyre van szükség */
    padding-top: 30px; /* A padding növelése, hogy több hely legyen a tartalom körül */
    background: #f65d5d; /* Megmaradt a piros háttér */
    text-align: center; /* Szöveg és ikon középre igazítása */
}
}

.supp-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.supp-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.supp-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.supp-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.supp-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.supp-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.supp-item.begginer .pi-top {
	background: #fdb07d;
}

.supp-item.entermediate .pi-top {
       background: #00000000 !important;
}

.supp-item.advanced .pi-top {
	background: #f2786f;
}

.supp-item.professional .pi-top {
	background: #f65d5d;
}





 .special1-table {
            width: 90%;
            border-collapse: collapse;
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
           box-shadow: 0 0px 12px rgb(255 255 255);
			margin-bottom:40px;
			  
        }



       
		
/* Edzés előtti oszlop */
td.before-workout {
    background-color: #ffcc00; /* Pompás sárga */
    color: #fff;
}

/* Edzés közbeni oszlop */
td.during-workout {
    background-color: #00ccff; /* Éles kék */
    color: #fff;
}

/* Edzés utáni oszlop */
td.post-workout {
    background-color: #28a745; /* Friss zöld */
    color: #fff;
}

/* Reggeli oszlop */
td.breakfast {
    background-color: #f74d4d; /* Narancsos szín */
    color: #fff;
}

/* Esti oszlop */
td.evening {
    background-color: #4b0082; /* Sötétlila */
    color: #fff;
}

/* Alapértelmezett oszlopstílus */
td.center-text {
    text-align: center;
    padding: 10px;
	    
}


@media (max-width: 768px) {


 .special1-table {
        
			    font-size: xx-small;
        }
		
		td.center-text {
   
	    font-size: 7px;
}}

/* Táblázat formázása */
.special2-table {
  
  border-collapse: collapse;
}

/* Az oszlopok külön színezése */
.special2-table td:nth-child(1) {
  background-color: #6146d9; /* Kiegészítő oszlop */
}

.special2-table td:nth-child(2) {
  background-color: #6146d9; /* Mennyiség oszlop */
}

/* Fejlécek (eltérő szín az oszlopoktól) */
.special2-table th:nth-child(1) {
  background-color: #515151; /* Kiegészítő oszlop fejléce */
  color: white;
  font-size: medium;
}

.special2-table th:nth-child(2) {
  background-color: #515151; /* Mennyiség oszlop fejléce */
  color: white;
  font-size: medium;
}

/* Összegző sorok (pl. "Napi mennyiségek", "Edzés közbeni") */
.special2-table th[colspan="2"],
.special2-table td[colspan="2"] {
  background-color: #50b343;
  color: white;
  font-weight: bold;
  text-align: center;
 
}

/* Táblázat cellák középre igazítása */
.special1-table td, 
.special1-table th {
  padding: 8px;
  text-align: center;
  border: 1px solid #ccc;
}
.special2-table th[colspan="3"],
.special2-table td[colspan="3"] {
  background-color:  #50b343;
  color: white;
  font-weight: bold;
  text-align: center;
   font-size:medium;
}

.fa-calendar-day { font-size: x-large; margin:3px; color: #2196f3; } /* Napi mennyiségek (kék) */
.fa-pills { font-size: x-large;  margin:4px; background: linear-gradient(to right, #ff0000, rgb(255 255 255));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent; } /* Mennyiség (zöld) */ /* Kiegészítők (pink) */
.fa-balance-scale-right { font-size: x-large; margin:4px; background: #ffb611;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent; } /* Mennyiség (zöld) */



@media (max-width: 768px) {
.special2-table th[colspan="3"],
.special2-table td[colspan="3"] {
  
   font-size:smaller;
}
.special2-table th:nth-child(2) {
	font-size:smaller;
}
.special2-table th:nth-child(1) {

  font-size: smaller;
}
.fa-calendar-day,.fa-pills,.fa-balance-scale-right{
	font-size: medium;
}
}



.styled-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
    .styled-table th, .styled-table td {
       padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ffffff;
    background: #00ff3357;
    }
    .styled-table th {
        background-color:#2d2b2b;
        color: #ffffff;
        font-weight: bold;
    }
    .styled-table tbody tr:nth-child(even) {
        background-color: #f3f3f3;
    }
    .styled-table tbody tr:hover {
        background-color: #f1f1f1;
    }
    .table-title {
        color: #ffffff;
        font-size: 1.5em;
        margin-bottom: 10px;
		font-family: serif;
    }
    .tile {
    background: #2d2d2d;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0px 4px 2px rgb(255 255 255);
    margin-top: 10%;
    }
	
	.title::after
	
	.alapanyag-title { 
    font-family: 'Roboto', sans-serif !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
	position: relative; /* Szükséges az ::after pseudo-elemhez */
	margin-bottom: 5%;
}




.alapanyag-title i {
    font-size: 30px;
    color: #FFA500;
    /*margin-left: 45px;*/
	
	
}


.alapanyag-description {
        font-family: 'Poppins';/* Betűtípus beállítása, ha nem az alapértelmezett */
    font-size: 13px !important;
    color: #ffffff !important;
    margin-top: 3% !important;
	
}



.alapanyag-section {
	background: #f9f2f0;
}

.alapanyag-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 3px;
    background: linear-gradient(to right,rgba(255, 255, 255, 0) ,#FFA500, rgba(255, 255, 255, 0));
    border-radius: 2px;
    margin-left: 15%;
}


.alapanyag-input input {
    width: 80% !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: solid 1px #06fcb5;
    background: #282727 !important;

}
.unit {
    color: #ffffff !important;
    margin-left: 10px !important; /* Kisebb távolság, hogy ne legyen túl szoros */
}


/* A "kg" egység formázása */
.alapanyag-input .unit {
    font-size: 20px;
    color: white; /* Példa: narancssárga szín */
    font-weight: bold;
}


/* sajat gombok */
.alapanyag-btn {
	display: inline-block;
	border: none;
	font-size: 16px;
	font-weight: 600;
	min-width: 167px;
	padding: 14px 30px;
	border-radius: 50px;
	text-transform: uppercase;
	color: #fff;
	line-height: normal;
	cursor: pointer;
	text-align: center;
	letter-spacing: 1px;
	 margin-top: 20px; /* Távolság a beviteli mezők és a gomb között */
	
}


.alapanyag-btn:hover {
	color: #fff;
}

.alapanyag-btn.sb-white {
	background: #fff;
	color: #f65d5d;
}

.alapanyag-btn.sb-gradient {
	color: #fff;
	padding: 2px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
	margin-top: 10px;
    margin-left: -15px;
	    background: #282727 !important;
    border: solid 1px  #ff6e0d;
}


.alapanyag-btn.sb-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.alapanyag-btn.sb-gradient:hover {
	color: #578e52;
}

.alapanyag.sb-gradient:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
}

.alapanyag-btn.sb-line-gradient {
	color: #f65d5d;
	padding: 13px 29px;
	position: relative;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	z-index: 1;
}

.alapanyag-btn.sb-line-gradient::after {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	border-radius: 80px;
	background: #fff;
	z-index: -1;
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}

.alapanyag-btn.sb-line-gradient:hover {
	color: #fff;
}

.alapanyag-btn.sb-line-gradient:hover:after {
	opacity: 0;
	filter: alpha(opacity=0);
}

alapanyag-map {
	position: relative;
	height: 100%;
	background: #ddd;
	border-radius: 12px;
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {
	.alapanyag-map {
		height: 400px;
		margin-bottom: 40px;
	}
}

.alapanyag-map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.alapanyag-text {
	padding-right: 50px;
	margin-bottom: 40px;
}

.alapanyag-text h3 {
	font-weight: 400;
	font-family: "Playfair Display", serif;
	margin-bottom: 15px;
}

.alapanyag-form input, .alapanyag-form textarea {
    width: 80% !important;
    height: 40px !important;
    padding: 10px 20px !important;
    font-size: 19px !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: solid 1px  #06fcb5;
    background:#282727 !important !;
    display: inline-block !important;
    margin-bottom: 20px !important;
}
	.alapanyag-btn {
    margin-top: 20px !important;
}

.alapanyag-section {
	background: #f9f2f0;
}

.alapanyag-item {

height: fit-content;
text-align: center !important;
    background: #413f3f !important;
    padding-bottom: 20px !important;
    margin: 15px 5px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    -webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15) !important;
    box-shadow: 0px 0px 13px rgb(255 163 0) !important;;
    -webkit-transition: all 0.4s !important;
    -o-transition: all 0.4s !important;
    transition: all 0.4s !important;
    border:solid 2px #FFA500 !important;
    /*margin: 0 auto !important; /* Középre helyezés */
	
}


.alapanyag-item:hover {
	-webkit-box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 12px 32px rgba(72, 105, 114, 0.15);
}

.alapanyag-item .pi-top {
    height: 120px; /* Magasság növelése, ha több helyre van szükség */
    padding-top: 30px; /* A padding növelése, hogy több hely legyen a tartalom körül */
    background: #f65d5d; /* Megmaradt a piros háttér */
    text-align: center; /* Szöveg és ikon középre igazítása */
}
}

.alapanyag-item .pi-top h4 {
	font-family: "Playfair Display", serif;
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
}

.alapanyag-item .pi-price {
	width: 144px;
	height: 144px;
	margin: -71px auto 30px;
	padding-top: 35px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
	box-shadow: 0px 5px 6px rgba(72, 105, 114, 0.15);
}

.alapanyag-item .pi-price h3 {
	font-size: 40px;
	font-weight: 700;
	color: #666666;
}

.alapanyag-item .pi-price p {
	text-transform: uppercase;
	color: #999999;
}

.alapanyag-item ul {
	list-style: none;
	margin-bottom: 20px;
}

.alapanyag-item ul li {
	font-size: 16px;
	color: #666666;
	margin-bottom: 12px;
}

.alapanyag-item.begginer .pi-top {
	background: #fdb07d;
}

.alapanyag-item.entermediate .pi-top {
       background: #00000000 !important;
}

.alapanyag-item.advanced .pi-top {
	background: #f2786f;
}

.alapanyag-item.professional .pi-top {
	background: #f65d5d;
}
.fa-bacon {  color: #f32121; } /* Napi mennyiségek (kék) */
.fa-bread-slice { color: #f3c421; } 
.fa-drumstick-bite {  color: #FFA500; } 



    .styled-table {
        width: 100%;
        border-collapse: collapse;
    }
    .styled-table th, .styled-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    .info-btn {
        background: none;
        border: none;
        color: #007bff;
        font-size: 18px;
        cursor: pointer;
    }
    .info-btn:hover {
        color: #0056b3;
    }
    .modal-body p {
        font-size: 16px;
        margin-bottom: 10px;
    }


    .styled-table {
        width: 100%;
        border-collapse: collapse;
    }
    .styled-table th, .styled-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
/* Makrók doboz */
.macros-container {
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    font-size: 0.85rem; /* Kisebb betűméret */
    display: none; /* Alapértelmezés szerint elrejtve */
}

.macros-container p {
    margin: 5px 0;
    font-weight: 500;
	    
}

/* Betűszín és stílus */
.macros-container strong {
    color: #007bff; /* Kék szín */
}

.macros-container .macro-value {
    font-weight: bold;
    color: #333;
}


@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 576px) {

.macros-container p {
    margin: 5px 0;
    font-weight: 500;
	    font-size: xx-small;
}}

/* Étkezés tervező form stílusai */
.meal-planner {
    background-color: #69cb5d;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgb(255 255 255);
    margin-bottom: 20px;
    margin-top: 5%;
	    max-width: 80%;
    margin-left: 10%;
}

.meal-planner label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.meal-planner input[type="text"],
.meal-planner input[type="number"],
.meal-planner select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.meal-planner .ingredient-item {
    margin-bottom: 15px;
}

.meal-planner button {
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.meal-planner button[type="button"] {
    background-color: #007bff;
    margin-right: 10px;
}

.meal-planner button:hover {
    opacity: 0.9;
}

/* Táblázat stílusai */
.saved-meals table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.saved-meals th,
.saved-meals td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.saved-meals th {
    background-color: #f8f9fa;
    font-weight: bold;
}

.saved-meals tr:hover {
    background-color: #f1f1f1;
}

.saved-meals a {
    color: #007bff;
    text-decoration: none;
    margin-right: 10px;
}

.saved-meals a:hover {
    text-decoration: underline;
}

/* Mobil nézet (maximális szélesség: 768px) */
@media (max-width: 768px) {
    .saved-meals table {
        display: block;
        overflow-x: auto; /* Vízszintes görgetés engedélyezése */
        white-space: nowrap; /* Sortörések tiltása */
    }

    .saved-meals th,
    .saved-meals td {
        display: inline-block; /* Cellák egymás mellé */
        min-width: 120px; /* Minimális cellaszélesség */
        white-space: normal; /* Szöveg törése a cellán belül */
    }

    .saved-meals th {
        background-color: #f8f9fa;
        font-weight: bold;
    }

    .saved-meals tr {
        display: block;
        margin-bottom: 10px; /* Távolság a sorok között */
    }

    .saved-meals td {
        border-bottom: none; /* Alsó szegély eltávolítása */
    }

    .saved-meals td:last-child {
        border-bottom: 1px solid #ddd; /* Alsó szegély csak az utolsó cellánál */
    }
}
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .meal-planner,
   {
        padding: 15px;
    }

    .meal-planner input[type="text"],
    .meal-planner input[type="number"],
    .meal-planner select {
        font-size: 14px;
    }

    .meal-planner button {
        width: 100%;
        margin-bottom: 10px;
    }

/* Alternatív mobilnézet: Táblázat sorok egymás alatt */
@media (max-width: 768px) {
    .saved-meals table,
    .saved-meals thead,
    .saved-meals tbody,
    .saved-meals th,
    .saved-meals td,
    .saved-meals tr {
        display: block;
    }

    .saved-meals th {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .saved-meals tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }

    .saved-meals td {
        border: none;
        position: relative;
       
    }

    .saved-meals td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-label); /* Fejléc szövegének megjelenítése */
        font-weight: bold;
    }
} 



/* Dinamikusan hozzáadott alapanyagok stílusai */
.ingredient-item {
    margin-bottom: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.ingredient-item label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.ingredient-item select,
.ingredient-item input[type="number"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
}

.ingredient-item select:focus,
.ingredient-item input[type="number"]:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
 }
 .total-macros {
            text-align: center;
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 6px;
			margin: auto;
			max-width: 70%;
			margin-top:5%
        }
        .total-macros h4 {
            margin-bottom: 10px;
            color: #333;
        }
        .total-macros p {
            margin: 5px 0;
            font-size: 16px;
        }
		
		
		.total-macros {
            text-align: center;
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 6px;
			margin: auto;
			max-width: 70%;
			margin-top:5%
        }
        .total-macros h4 {
            margin-bottom: 10px;
            color: #333;
        }
        .total-macros p {
            margin: 5px 0;
            font-size: 16px;
        }
		
		 .plan-meal {
            text-align: center;
            margin-bottom: 20px;
            padding: 15px;
            background: #5b5b5b;
			box-shadow: 0 2px 10px rgb(255 255 255);
            border-radius: 6px;
			margin: auto;
		max-width: 90%;
			margin-top:5%
        }
        .plan-meal h4 {
            margin-bottom: 10px;
            color: #333;
        }
        .plan-meal p {
            margin: 5px 0;
            font-size: 16px;
        }
		
		
		
		
		        .meals-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }
        .meal-card {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: calc(50% - 10px);
            min-width: 300px;
        }
        .meal-card h4 {
            margin: 0 0 10px;
            color: #43613f;
        }
        .meal-card p {
            margin: 5px 0;
        }
        .action-links a {
            color: #43613f;
            text-decoration: none;
            font-weight: bold;
            margin-right: 10px;
        }
        .action-links a:hover {
            text-decoration: underline;
        }
		
		
		
		
@media (max-width: 768px) {
		
		.meal-card {
		        margin-left: -5px;
		 }}