:root {
    --bs-primary: #0D9488;
    --bs-secondary: #34D399;
    --bs-dark: #1E293B;
    --bs-light: #F8FAFC;
    --bs-gray: #EEEEEE;
    --bs-error: #C33C54;
}

body { width: 100%; margin: 0; padding: calc(80px + 3rem) 0 0 0; background-color: var(--bs-light); color: var(--bs-dark); font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
* { box-sizing: border-box; }
.inner-box { max-width: 1920px; }
.container-narrow { max-width: 920px; margin: 0 auto; }

h1 { color: var(--bs-primary); font-size: clamp(1.75rem, calc(1.114rem + 3.182vw), 3.50rem); font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; }
h2 { color: var(--bs-dark); font-size: clamp(1.50rem, calc(1.318rem + 0.909vw), 2.00rem); font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; }
h3 { color: var(--bs-dark); font-size: clamp(1.25rem, calc(1.159rem + 0.455vw), 1.50rem); font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; }
p { font-size: 1.125rem; line-height: 150%; }

/* NAVBAR */
.navbar { height: 80px; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; background: #F8FAFC; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.10); }
.navbar-brand, .navbar-brand img { max-width: none; }
.navbar-toggler { border: none; }
.telefon { line-height: 120%; }
.telefon a { font-weight: 800; font-size: 1.375rem; color: var(--bs-primary); text-decoration: none; opacity: 1; transition: .5s; }
.telefon a:hover { opacity: .7; transition: .5s; }
.nav-link { padding: 0 !important; font-size: 1rem; margin-left: 1.5rem; font-weight: 500; color: var(--bs-dark) !important; opacity: 1; transition: .5s; }
.nav-link:hover { color: var(--bs-dark) !important; opacity: .7; transition: .5s; }
.facebook-icon { width: 2.5rem; height: 2.5rem; overflow: hidden; display: flex; background: none; padding: 0; opacity: 1; transition: .5s; }
.facebook-icon img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0px; }
#kozmu-navbar { position: relative; top: auto; right: auto; width: auto; }

/* HERO */
.hero-content h3 { color: var(--bs-secondary); }
.hero-content p { font-weight: 800; font-size: clamp(1.25rem, calc(1.159rem + 0.455vw), 1.50rem); }
.hero-image-container { max-width: 100%; overflow: hidden; }
.hero-image-container img { width: 100%; height: auto; }

/* IKONOK */
.ikonok { background-color: var(--bs-secondary); position: relative; }
.ikonok-top { width: 100%; height: 96px; position: absolute; top: -96px; left: 0; background-color: var(--bs-secondary); clip-path: polygon(0% 0%, 100% 100%, 0% 100%); }
.ikon-content h3, .ikon-content p { color: var(--bs-white); }

/* HOW IT WORKS */
.how-it-works { background: var(--bs-gray); }
.how-it-works-steps { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 1.5rem; }
.step-content p { font-size: .875rem; }
.step-content p span { display: block; font-weight: 700; }

/* BUTTONS */
.btn-primary { background-color: var(--bs-primary); border: 2px solid var(--bs-primary) !important; color: var(--bs-white); transition: .5s; font-weight: 600; }
.btn-primary:hover { background-color: var(--bs-light); border: 2px solid var(--bs-primary) !important; color: var(--bs-primary); transition: .5s; }
.btn-secondary { background-color: var(--bs-secondary); border: 2px solid var(--bs-secondary) !important; color: var(--bs-white); transition: .5s; font-weight: 600; }
.btn-secondary:hover { background-color: var(--bs-light); border: 2px solid var(--bs-secondary) !important; color: var(--bs-secondary); transition: .5s; }

/* PRICES */
.price-boxes { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; }
.price-box { background: var(--bs-light); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); }
.price-box h3 { color: var(--bs-primary); font-size: 1.375rem; }
.price { color: var(--bs-primary); font-size: 1.5rem; font-weight: 700; }
.price-box-active { background-color: var(--bs-secondary); transform: scale(110%); }
.price-box-active h3, .price-box-active p, .price-box-active .price { color: var(--bs-white); }

/* ABOUT */
.about-right img { width: 400px; height: auto; max-width: 100%; }

/* MEGRENDELES */
.megrendeles { background-color: var(--bs-primary); }
.megrendeles h2, .megrendeles p, .megrendeles label, .megrendeles legend, .megrendeles select { color: var(--bs-white); }
.megrendeles label { font-size: 1rem; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.5rem; }
.form-row-full { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 1.5rem; }
.form-row p label, .form-row-full p label { display: block; }
.form-row input, .form-row select, .form-row-full input, .form-row-full select { background-color: #50B2A9; border: none; padding: .5rem; width: 100%; min-height: 45px; }
.megrendeles a { color: var(--bs-white); transition: .5s; opacity: 1; }
.megrendeles a { color: var(--bs-white); transition: .5s; opacity: .7; }
.megrendeles-status-item-num { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: #50B2A9; font-weight: 700; color: var(--bs-primary); }
.megrendeles-status-item-name { color: #50B2A9; }
.separator { flex: 1; height: 2px; background-color: #50B2A9; }
.active-status .megrendeles-status-item-num, .active-status .separator { background-color: var(--bs-white); }
.active-status .megrendeles-status-item-name { color: var(--bs-white); }
#hiba { background-color: var(--bs-error); }
#hiba p { color: var(--bs-white); }

/* FOOTER */
footer { background-color: var(--bs-dark); }
footer p, footer p a { color: var(--bs-white); font-size: 1rem; }
footer p a { text-decoration: underline; transition: .5s; opacity: 1; }
footer p a:hover { color: var(--bs-white); transition: .5s; opacity: .7; }
.footer-row, .desktop-only { display: inline-block; }


/**** MOBILE ****/
@media (max-width: 1200px) {
    #kozmu-navbar { position: fixed; top: 80px; right: -150%; }
    #kozmu-navbar.show { right: 0; width: 100%; }
    #kozmu-navbar.show ul { padding: 1rem; background-color: var(--bs-white); }
    #kozmu-navbar.show ul li { padding: 0 0 1rem 0; }
    #kozmu-navbar.show ul li a { font-size: 1.5rem; }
    .facebook-icon { position: fixed; bottom: 2rem; right: 0; z-index: 9998; background-color: var(--bs-secondary); padding: .4rem; border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
    .how-it-works-steps { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 920px) {
    .container-narrow { max-width: 100%; }
    .footer-row { display: block; }
    .desktop-only { display: none; }
}

@media (max-width: 768px) {
    .how-it-works-steps { grid-template-columns: repeat(2, 1fr); }
    .price-boxes { grid-template-columns: repeat(1, 1fr); }
    .price-box-active { transform: scale(100%); }
}

@media (max-width: 576px) {
    .navbar-brand { max-width: 75%; }
    .navbar-brand img { max-width: 100%; height: auto; }
    .form-row { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width: 480px) {
    .how-it-works-steps { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width: 420px) {
    .navbar-brand { max-width: 65%; }
    .navbar-toggler-icon { width: 1.25rem; height: 1.25rem; }
}