:root {
  --darkbg: #078293;
  --jofogas_orange: #f07330;
  --jofogas_peach:#FEF1EB;
  --jofogas_blue:#336699;
  --jofogas_green:#18c662;
  --october_green:#77AE45;
  --jofogas_extra_dark:#213144;
  --light_bg:#F1F4F7;
  --greenlight:#E9F4C5;
  --gutter: 60px;
  --corner: 15px;
  --text_dark: #333333;
  --text_light: #fff;
  --text_footer:#6c8fb1;
  --text_shadow: 1px 1px #00000030;
  --small-text:12px;
}

/* base */
html {
  scroll-behavior: smooth;
}
img {
max-width:100%;
}
.radius-pic {
border-radius:var(--corner);
}
dl, ol, p, ul {
    margin-top: 0;
    margin-bottom: 0;
}
a {
	color:var(--jofogas_blue);
	text-decoration:underline;

}
a:hover {
	color:var(--text_dark);
}
h1 {
font: size 1.5rem;
font-weight: 800;
text-align:center;

}

h2 {
	font-size: clamp(18px, 5vw, 30px);
    padding-bottom: 0px;
    margin-bottom: calc(var(--gutter) / 2);
    margin-top: 0px;
    font-weight: 800;
    text-align:center;
}
@media (max-width: 765px) {
    h2 {
        margin-bottom: calc(var(--gutter) / 4);
    }
}
h3 {
	font-size: clamp(16px, 3vw, 20px);
    padding-bottom: 0px;
    margin-bottom: calc(var(--gutter) / 8);
    margin-top: 0px;
    font-weight: 600;
    
}
h4 {
	font-size: clamp(16px, 5vw, 18px);
    padding-bottom: 0px;
    margin-bottom: calc(var(--gutter) / 8);
    margin-top: 0px;
    font-weight: 600;
    
}


h1.center, h2.center, h3.center, p.center {
text-align:center;
}
body {
	background-color:#fff !important;
	color:var(--text_dark);
    background-size: 100%;
    background-repeat: no-repeat;
	line-height:auto;
	font-size:1rem;
 	font-family: "Montserrat", serif;
	font-optical-sizing: auto;
	font-weight:500;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
.pad_top_extra_small {
    padding-top:calc(var(--gutter) / 4);
}
.pad_top_small {
    padding-top:calc(var(--gutter) / 2);
}
.pad_top_large {
    padding-top:calc(var(--gutter) / 1);
}
.text_small {
    font-size:var(--small-text);
}
.pic.mobile_pic {
display:none;
}
.justmobile {
display:none;
}
@media (max-width:775.98px) {
.justmobile {
display:block;
}
.pic.desktop_pic {
display:none;
}
.pic.mobile_pic {
display:block;
margin-bottom:20px;
}
.mobil_padding_top {
   margin-top:20px; 
}
}
.custombutton {

font-weight: 600 !important;
    background: var(--jofogas_orange);
    color: #fff;
    padding: 14px 25px;
    border-radius: 5px;
    -webkit-box-shadow: 4px 4px 12px -6px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 4px 4px 12px -6px rgba(0, 0, 0, 0.15);
    box-shadow: 4px 4px 12px -6px rgba(0, 0, 0, 0.15);
    width: auto;
    display: inline-block;
    line-height: 20px;
    text-align: center;
    font-size: clamp(12px, 1.2vw, 14px);
    position: relative;
    transition: background-color 0.5s ease;
    display: inline-block;
    width: auto;
    max-width: 100%;
    text-decoration: none;
    
}
.custombutton.secondary {
    background: var(--jofogas_blue);
    color: #fff;
    
}
.custombutton.outline {
    background: transparent;
    color: var(--jofogas_orange);
    border:solid 2px var(--jofogas_orange);
}
.custombutton.outline:hover {
    color: var(--jofogas_orange);
    border:solid 2px var(--jofogas_orange);
    background:#fff;
    opacity: 0.7;
}
.custombutton span::before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  width: 17px;
  height: 17px;
  background-image: url("./images/plus.svg");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  position: relative;
  top: 0px; 
}
.custombutton.cart span::before {
  background-image: url("./images/cart.svg");
}
.custombutton.plus span::before {
  background-image: url("./images/plus.svg");
}
.custombutton.fb span::before {
  background-image: url("images/fb_button.svg");
}
.custombutton.base span::before {
  display:none;
}


.custombutton:hover {
	 box-shadow:none;
     color:#fff;
     background:#ffa45e;
     text-decoration:none;
}
.custombutton.secondary:hover {
	 box-shadow:none;
     color:#fff;
     background: #4A7DAF;
     text-decoration:none;

}
.navbar-expand-lg {
	background:#fff !important;
}
@media (max-width:992px) {
.navbar-expand-lg {
    background: #29242473;
}
}
.navbar-expand-lg .container {
	position: relative;
	z-index:100000;
	padding:5px;
}
.title {
	padding-top:0;
	padding-bottom:calc(var(--gutter) / 2);
	margin: 0px;
	font-weight:600;
	text-align:center;
}
ul {
	padding-left:15px;	
}





.text {
padding-top: calc(var(--gutter) * 1.3);
padding-bottom: 0;

}
.text img {
border-radius: var(--corner);

}
@media (max-width: 765px) {
.text {
    padding-top: calc(var(--gutter) / 2);
    padding-bottom: 0;
}
}
.text.plane .container {
padding:0;

}
.social a path {
  fill: var(--darkbg);
}

/* /base */
/* hero */
.sc_block {
	position:relative;
	padding:0;
}
.logo {
	height:30px;
	width:auto;
}
@media (max-width:992px) {
.logo {
	height:20px;
}
}
.header .social a {
    color:var(--darkbg);
    margin-left: 20px;
    font-size: 12px;
}
.header .social a:hover {
	color:#ccc;
}
.sc {

    padding: 0px;
    color:var(--text_dark);
    height: auto;
    background-color: var(--jofogas_peach);
    font-size: 18px;
	margin-top: 0px;
    padding-top: 0px;
	text-shadow:none;
	background-image:url(images/hero_bg.png);
        background-size: 100% auto;
    background-position: bottom center;
    background-repeat:no-repeat;
    text-align:center;
    background-color:#ebfcff;
}
@media (max-width:1200px) {
	.sc {

		background-size: 120% auto;
	
	}

}
@media (max-width:992px) {
	.sc {

		padding: 2rem;
 background-size: 190% auto;

	
	}

}


@media (max-width:570px) {
	.sc {

		padding: 2rem;
        background-image: url(images/mobil_bg.png);
         background-size: 100% auto;
	
	}

}
@media (max-width:450px) {
	.sc {
 
        padding: 1.5rem;

	
	}

}

.sc_block.vertical-middle {
display:flex;
flex-direction:column;
justify-content: center;
}



.monitor {
display:none;
}

.sc h1 {

	font-weight:800;
	font-size:  clamp(1.5rem, 2.3vw, 3rem);

}
.sc p {
   
    font-weight: 500;
    font-size:  clamp(1.2rem, 2vw, 1.3rem);

}
.sc .box p {
   
    font-weight: 500;
    font-size:  16px;
    line-height:110%;

}
.sc .box {
  background: rgba(255, 255, 255, 0.8); /* fehér, 80% átlátszó */
  backdrop-filter: blur(10px);          /* blur a háttérképre */
  -webkit-backdrop-filter: blur(10px);  /* Safari támogatás */
  border-radius: 12px;                  /* opcionális lekerekítés */
  padding: calc(var(--gutter) / 2);                        /* tartalomhoz belső margó */
  border-radius: var(--corner);
  margin-top:calc(var(--gutter) / 2);
  display: flex;
  flex-direction: column;
  gap:10px;
   position: relative;
  z-index: 1; 
      border: solid 1px #d9e6e969;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06),
              0 2px 6px rgba(0, 0, 0, 0.03);

}

.first-col {
  position: relative; /* referenciapont az abszolút elemnek */
  z-index: 0;
}

.first-col::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -200px;
  width: 265px;
  height: 408px;
  background-image: url("images/zsozso.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;

  transform: translateX(-500px);    /* kiindulás balról */
  opacity: 0;                       /* átlátszó kezdetben */
  transition: transform 2s ease-out, opacity 2s ease-out;
}
@media (max-width:992px) {
.first-col::after {

  display:none;

}
.last-col::after {

         content: "";
        position: absolute;
        bottom: -60px;
        left: -150px;
        width: 265px;
        height: 408px;
        background-image: url(images/zsozso.png);
        background-size: cover;
        background-repeat: no-repeat;
 


}
}
.first-col.loaded::after {
  transform: translateX(0);         /* helyére csúszik */
  opacity: 1;                       /* látható */
}

.sc h1 span {

color:var(--october_green);


}
.sc.v_02 h1 {
	color:var(--jofogas_green);
}
.sc.v_02 h1 span {
	color:var(--jofogas_blue);
}

@media (max-width:992px) {
.sc p {

  padding-right:0;



}
}

@media (min-width:992px) {
    .sc .container {
        height: 100%;
        padding-top: calc(var(--gutter) / 1.5);
		padding-bottom: calc(var(--gutter) / 1.5);
        align-content: center;
		min-height:374px;
    }
}





.textblock {
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gutter) / 4);
}


.textblock h1 {
    font-size: 2rem;
    margin-bottom: 0px;
    font-weight: 800;
    display: block;
	color:#fff;
}


.textblock h1 span {
display: block;
    font-size: 20px;
    padding-top: 0px;
    line-height: 35px;
    font-weight: 600;

}
@media (max-width: 992px) {
.navbar-expand-lg .container {
    border-bottom: none;
    position: relative;
    z-index: 100000;
	
}


.textblock {
    margin-top: 0px;
}


.sc .container {
	background-image: none;
	
}


}


/* /hero */

/* nano */
.nanobar {

    background-color: var(--greenlight);
    padding:calc(var(--gutter) / 2) 0;

}
.nanobar .nano {


    display:flex;
    align-items: center;
    justify-content: center;
    gap:10px;
}
/* /nano */

/* elonyok */

.block span {
font-size:30px;
}
.block p {
font-weight:bold;
}
.block i {
font-size:14px;
}
@media (min-width: 992px) {
.elonyok .col {
    border-left:solid 1px #ccc;

}
.elonyok .col:first-child {
    border-left:none;

}
}
/* /elonyok */

/* thumbnails */
.thumbnails {
    margin-top:calc(var(--gutter) / 2);

}
.thumbnails img {
    margin-bottom:10px;

}
.thumbnails a {
    padding-bottom:10px;
    color:var(--jofogas_extra_dark);
    font-weight:bold;
    text-decoration: none;
    display: block;

}
.thumbnails i {
font-style: normal;
color:var(--october_green);
font-weight: 600;

}
@media (max-width: 992px) {
.thumbnails a {
    padding-bottom:0px;


}
.thumbnails .block {
    padding-bottom:15px;


}
}
/* /thumbnails */

/* linkek */
.bigblock {
    background: var(--october_green);
    border-radius: var(--corner);
    padding: calc(var(--gutter) / 2);
    text-align:center;
    color:#fff;
}
.bigblock.padding-xl {

    padding: calc(var(--gutter));

}
@media (max-width: 992px) {
.bigblock.padding-xl {

    padding: calc(var(--gutter) / 2);

}
}
.catlinks {
  display: flex;
  flex-wrap: wrap;   
  gap: 20px;
  justify-content: center;
  padding-top:calc(var(--gutter) / 2);        
}
.catlink button {
    background-color: #ffffff;
    border-radius:5px;
    padding:4px 10px;
    text-decoration: none;
    display:inline-block;
    border:solid 1px #ffffff;
      box-shadow:
    0 1px 1px rgba(0,0,0,.06),
    0 4px 10px rgba(0,0,0,.08);
font-weight:500;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
  font-size:14px;


}
.catlink button:hover{
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(0,0,0,.08),
    0 8px 18px rgba(0,0,0,.12);
}

/* active: finom “benyomódás” */
.catlink button:active{
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(0,0,0,.10),
    inset 0 1px 2px rgba(0,0,0,.08);
}

/* fókuszgyűrű a hozzáférhetőségért */
.catlink button:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.85),
    0 0 0 6px rgba(0,0,0,.18);
}

/* linkek */

/* banners */
.banner {
    background-color: var(--jofogas_blue);
    border-radius: var(--corner);
    padding:20px;
    padding-left:50%;
        height: 100%;
        display:flex;
        flex-direction:column;
        justify-content: center;
        background-image: url(./images/banner1.png);
        background-repeat: no-repeat;
      background-position-x: -30px;
    background-size: auto 100%;
   
}
.bannercontainer .banner.left {
    color:#fff;

}
@media (max-width: 991.98px) {
.banner {
margin-bottom:20px;

}
.bannercontainer > [class^="col"],
.bannercontainer > [class*=" col-"] {
margin-bottom:calc(var(--gutter) / 2);
}
}
@media (max-width: 1200px) {
.banner {
background-position-x: -100px;

}
}
@media (max-width: 992px) {
.banner {
background-position-x: 0px;
padding-left:35%;
background-size: auto 230px;

}
}

.banner.right {
    background-color: var(--greenlight);
        background-image: url(./images/banner2.png);
        

}
@media (max-width: 775.98px) {
.banner {
background-image: none;
        padding-left: 20px;
        justify-content: flex-start;
        height: auto;

}
.banner.right {
background-image:none;
padding-left:20px;

}
}
.bannercontainer {
       margin-right: -30px;
    margin-left: -30px;
}
.banner p {
 padding-bottom:10px;
}

/* banners */


/* footer */

.separated {
    margin-top: calc(var(--gutter) / 1);
    margin-bottom: 0;
    padding-bottom: calc(var(--gutter) * 1.3);
    background-color: #EBF0F5;

  background-image: url('./images/bolygo.svg'), url('./images/bolygo2.svg');
  background-position: top 20px left 10%, bottom 20px right 10%;
  background-repeat: no-repeat, no-repeat;
  background-size: auto;
}
@media (max-width: 991.98px) {
  .separated {
    background-position: top -20px left -20px, bottom -20px right -20px;
  }
}
@media (max-width: 775.98px) {
  .separated {
    background-image: none, url('./images/bolygo2.svg');
    background-position: bottom -20px right -20px;
    background-repeat: no-repeat;
    
  }
}
.separated h2 {
    color: var(--jofogas_orange);
}
.buttons {
    width:100%;
    display:flex;
    justify-content: center;
    align-items:center;
    gap:calc(var(--gutter) / 2);


}
.buttons .custombutton {
    width:250px;



}
@media (max-width: 765px) {
    .buttons {
flex-direction: column;


}
    .buttons .custombutton {
    width:250px;



}
}



.separated.secondary {
    background-color: #e9e9e9;
    margin-top:0;
    background-image:none;
}
.separated.secondary .banner {
    background-color: var(--jofogas_peach);
    margin-top:0;
    background-image:none;
    padding:0;
    border-radius: var(--corner);
    
}
.apps {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
justify-content: center;
padding:calc(var(--gutter) / 2);
gap:calc(var(--gutter) / 4);
text-align:center;
}
.apps a {
display: inline-block;
    -webkit-box-shadow: 4px 4px 12px -6px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 4px 4px 12px -6px rgba(0, 0, 0, 0.15);
    box-shadow: 4px 4px 12px -6px rgba(0, 0, 0, 0.15);
    border:solid 1px #000000;
    border-radius:7px;

}
.apps a:hover {

    box-shadow: none;
    border:solid 1px #fff;

}
.separated.secondary .banner .phone {
height:100%;
max-width: none;
padding-left:calc(var(--gutter) / 2);
}
@media (max-width: 765px) {
    .apps a {
    margin:0.3rem;

    }
    .banner .picture {
    display:none;   
    }
    .separated.secondary .banner { 
    background-image:url(./images/telo.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    }
    .apps {
    background-color: #fef1ebcf;

    }
}
.apps h1, .apps h2, .apps h3 {
color:var(--text_dark);
}



.footer {
    font-size:var(--small-text);
    background-color: var(--jofogas_extra_dark);
    color:var(--text_footer);
    padding:var(--gutter) 0;
}
.footer a {
    color:var(--text_footer);
    text-decoration:none;
}
.footer a:hover {
    color:#fff;
}
.footer h4 {
    color:var(--text_footer);
}
.footer ul {
  list-style: none;
  padding-left:0px;

}

.footer .vertical ul li {
padding-top:0.5rem;

}
.footersocial {
    background-color: #ffffff;
    display:flex;
    justify-content: center;
    padding:2rem 0;
    align-items: center;
    gap:1rem;

}
.footersocial a {

    display:inline-block;


}
@media (max-width: 765px) {
    .footersocial {
    flex-direction:column;

    }
}

.footerlinks ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.footerlinks ul li {
  display: flex;
  align-items: center;
}

.footerlinks ul li a {
  text-decoration: none;
  color: inherit;
  padding: 0 8px;
  position: relative;
  padding-left: 0;
}


.footerlinks ul li:not(:last-child) a::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  background-color: var(--text_footer);
  margin-left: 8px;
  vertical-align: middle;
}