@media (max-width: 1199px) {

    .hero h1 {
        font-size: 40px;
    }

    .info-card h2,
    .materials-card h3 {
        font-size: 30px;
    }

    .idealno-card,
    .materials-card {
        width: 88%;
    }
}


/* ─── TABLETI (≤ 991px) ───────────────────────────── */
@media (max-width: 991px) {

    .section {
        padding: 60px 0;
    }

    /* HERO */
    .hero {
        height: auto;
        min-height: 88vh;
        padding: 90px 0;
        background:
        linear-gradient(
                rgba(0,0,0,0.78),
                rgba(0,0,0,0.55)
        ),
        url('images/vrata.jpg') center / cover no-repeat;
    }

    .hero-box {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero p {
        font-size: 15px;
    }

    /* FEATURES BAR – ravnomeran raspored ikonica */
    .features-bar .container.d-flex {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px 10px;
    }

    /* INFO SEKCIJA */
    .hero1 {
        min-height: auto;
        padding: 70px 0;
    }

    .info-card {
        padding: 38px 34px;
    }

    .info-card h2 {
        font-size: 28px;
    }
}


/* ─── TELEFONI (≤ 767px) ──────────────────────────── */
@media (max-width: 767px) {

    .section {
        padding: 50px 0;
    }

    /* HERO */
    .hero {
        min-height: 80vh;
        padding: 70px 0;
    }

    .hero h1 {
        font-size: 30px;
        line-height: 1.25;
    }

    .hero p {
        font-size: 14px;
    }

    .hero .btn-gold {
        display: inline-block;
        width: 100%;
        max-width: 280px;
        padding: 13px 22px;
        font-size: 15px;
    }

    /* FEATURES BAR – 3 ikonice po redu */
    .features-bar .container.d-flex {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px 6px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .features-bar .container.d-flex img {
        width: 60px !important;
    }

    .features-bar div p {
        font-size: 13px;
    }

    /* KARTICE – malo manje paddinga */
    .info-card {
        padding: 30px 22px;
    }

    .info-card h2 {
        font-size: 25px;
    }

    .info-card h4 {
        font-size: 16px;
    }

    .info-list li {
        font-size: 15px;
    }

    .materials-card h3,
    .info-card h2 {
        letter-spacing: -0.2px;
    }

    /* GALERIJA – uži razmaci i niže slike */
    .vrata-prikaz {
        height: 260px;
    }

    /* manje agresivno klizanje na telefonu */
    .reveal-left  { transform: translateX(-45px); }
    .reveal-right { transform: translateX(45px); }
}


/* ─── MALI TELEFONI (≤ 480px) ─────────────────────── */
@media (max-width: 480px) {

    .hero h1 {
        font-size: 26px;
    }

    /* FEATURES BAR – 2 ikonice po redu */
    .features-bar .container.d-flex {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 8px;
    }

    .features-bar .container.d-flex img {
        width: 56px !important;
    }

    .info-card,
    .materials-card,
    .idealno-card {
        width: 100%;
    }

    .materials-card {
        padding: 28px 20px 28px 26px;
    }

    .materials-card h3 {
        font-size: 21px;
    }

    .materials-card p,
    .idealno-card h4 {
        font-size: 15px;
        line-height: 1.7;
    }

    .vrata-prikaz {
        height: 220px;
    }

    /* FOOTER */
    .site-footer {
        padding-top: 46px;
    }

    .footer-bottom p {
        font-size: 12px;
        line-height: 1.6;
    }
}


/* =====================================================
   UNUTRAŠNJE STRANICE
   (karakteristike, hotelski sistemi, faq, kontakt)
   ===================================================== */

/* ─── TABLETI (≤ 991px) ───────────────────────────── */
@media (max-width: 991px) {

    /* HERO podstranica – pun overlay + visina po sadržaju */
    .hero-karakteristike {
        height: auto;
        min-height: auto;
        padding: 80px 0 70px;
        background:
        linear-gradient(
                rgba(0,0,0,0.82),
                rgba(0,0,0,0.62)
        ),
        url('images/karakteristike.jpg') center / cover no-repeat;
    }

    .hero-karakteristike h1 {
        font-size: 34px;
    }

    .hero-karakteristike p,
    .hero-karakteristike li {
        font-size: 15px;
        line-height: 1.7;
    }

    /* KONTAKT */
    .kontakt-section {
        padding: 70px 0 80px;
    }

    .kontakt-section h1 {
        font-size: 30px;
    }
}


/* ─── TELEFONI (≤ 767px) ──────────────────────────── */
@media (max-width: 767px) {

    .hero-karakteristike {
        padding: 60px 0 50px;
    }

    .hero-karakteristike h1 {
        font-size: 27px;
        line-height: 1.3;
    }

    .hero-karakteristike p,
    .hero-karakteristike li {
        font-size: 14px;
    }

    .hero-karakteristike .btn-gold {
        display: inline-block;
        width: 100%;
        max-width: 280px;
        padding: 13px 22px;
        font-size: 15px;
    }

    /* FAQ */
    .faq-section {
        padding: 0;
    }

    .faq-wrap {
        padding: 0 4px;
    }

    .faq-header h1 {
        font-size: 26px;
    }

    .faq-q {
        padding: 16px 18px;
    }

    .faq-q-text {
        font-size: 14px;
    }

    .faq-a-inner {
        padding: 14px 18px 18px;
        font-size: 13px;
    }

    /* KONTAKT */
    .kontakt-section {
        padding: 55px 0 65px;
    }

    .kontakt-section h1 {
        font-size: 25px;
    }

    .kontakt-header h2 {
        font-size: 26px;
    }

    .kontakt-header {
        margin-bottom: 40px;
    }

    .kontakt-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .kontakt-forma-wrap {
        padding: 26px 20px;
    }
}


/* ─── MALI TELEFONI (≤ 480px) ─────────────────────── */
@media (max-width: 480px) {

    .hero-karakteristike h1 {
        font-size: 24px;
    }

    .faq-header h1 {
        font-size: 23px;
    }

    .kontakt-section h1 {
        font-size: 22px;
    }

    .kontakt-header h2 {
        font-size: 23px;
    }

    .kontakt-info-val {
        font-size: 15px;
    }
}