/* --------------------------------------------------------
   Alap beállítások
-------------------------------------------------------- */
body, html, h1, h2, h3, h4, h5, h6 {
    font-family: "Lexend", sans-serif;
}

body, html {
    height: 100%;
    margin: 0;
    line-height: 1.4;
    font-size: 17px;
    font-weight: 300;
    text-align: justify;
    scroll-behavior: smooth;
}

@media (min-width: 993px) { html { font-size: 16px; } }
@media (min-width: 601px) and (max-width: 992px) { html { font-size: 14px; } }
@media (max-width: 600px) { html { font-size: 13px; } }

a { text-decoration: none; color: inherit; }
ul { padding-left: 0; }

b, strong, .bold { font-weight: 600; }

/* --------------------------------------------------------
   Tipográfia
-------------------------------------------------------- */
h1 {
    font-size: 3.2rem;
    text-transform: uppercase;
    font-weight: 700;
}

#hero_h1 {
    font-size: 2rem;
}

h2 {
    font-weight: 500;
    line-height: 1.2;
    font-size: 2em;
    margin: 1.3em 0;
    word-break: break-word;
}

h4 { font-size: 1.2em; }
p { font-size: 1.1em; }
.smallprint { font-size: 0.7em; }

/* --------------------------------------------------------
   Navigáció – átlátszó → sötét háttér
-------------------------------------------------------- */
#myNavbar {
    transition: background-color 0.4s ease;
    background-color: transparent;
}

#myNavbar.scrolled {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

/* --------------------------------------------------------
   Animációk
-------------------------------------------------------- */
.y-move {
    transition: all .2s;
}

.y-move:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 10px 20px rgba(189,189,189,.19),
        0 6px 6px rgba(189,189,189,.23);
}

.move-down-bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

/* vendor prefix változatok (megtartva) */
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); }
    40% { -webkit-transform: translateY(-30px); }
    60% { -webkit-transform: translateY(-15px); }
}
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); }
    40% { -moz-transform: translateY(-30px); }
    60% { -moz-transform: translateY(-15px); }
}
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); }
    40% { -o-transform: translateY(-30px); }
    60% { -o-transform: translateY(-15px); }
}

/* --------------------------------------------------------
   Háttérképek, hátterek
-------------------------------------------------------- */
.bgimg-1 {
    background-position: center;
    background-size: cover;
    background-image: url("/image/storm_over.jpg");
    min-height: 100%;
}

.dark-bg {
    background-color: #222;
    padding: .1em .3em;
    line-height: 1.6em;
}

.ocex { background-color: #3275f5; }

/* --------------------------------------------------------
   Layout elemek
-------------------------------------------------------- */
.w3-container { padding: 2.5em .5em; }
.w3-bar { border-bottom: 0.1em #333 solid; }
.w3-bar .w3-button { padding: .5em; }
.w3-select { padding: 8px; }
.w3-justfiy { text-align: justify !important; }
.w3-button { white-space: normal !important; }
.w3-btn, .w3-button { white-space: collapse; }

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.padding-large { padding: .5em 3.5em !important; }
.padding-small { padding: .5em 1.5em !important; }

.w3-margin { margin: 0 1em !important; }

.home_typed { min-height: 3em; }
.home-padding { padding: 4em 2em; }

/* --------------------------------------------------------
   Mobil nézetek
-------------------------------------------------------- */
@media (max-width: 600px) {
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.8em; }
    .home_typed { min-height: 5em; }
}

@media (max-height: 520px) {
    .hide-landscape { visibility: hidden; }
}

/* --------------------------------------------------------
   Mobil tartalom szélesítése (#home fix)
-------------------------------------------------------- */
@media (max-width: 900px) {
    #hero_h1 { font-size: 1.4rem; }
    .padding-large { padding: .5em 1.5em !important; }

    .w3-display-middle {
        width: 100% !important;
        left: 0 !important;
        transform: translate(0%,-50%);
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------
   Domain névjegyek szekció (other-domains)
-------------------------------------------------------- */
.other-domains-section {
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.other-domains-sub {
    color: #666;
    font-size: 1em;
    margin-bottom: 1.5em;
}

.domain-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6em;
    padding: .5em 0;
}

.domain-pill {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    background: #fff;
    border: 1.5px solid #ccd6e0;
    border-radius: 100px;
    padding: .45em 1.1em;
    font-size: .92em;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s, transform .15s;
    white-space: nowrap;
}

.domain-pill:hover {
    border-color: #3275f5;
    color: #3275f5;
    background: #f0f5ff;
    transform: translateY(-2px);
}

.pill-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3275f5;
    flex-shrink: 0;
}

.pill-price {
    font-size: .8em;
    color: #888;
    margin-left: .15em;
}

.domain-pill--all {
    background: #3275f5;
    border-color: #3275f5;
    color: #fff !important;
    font-weight: 600;
}

.domain-pill--all:hover {
    background: #1a5edb;
    border-color: #1a5edb;
    color: #fff !important;
}

@media (max-width: 600px) {
    .domain-pill { font-size: .85em; padding: .4em .9em; }
    .domain-pills { gap: .45em; }
}