/* Az első színes sáv stílusa */
.sajat-szines-sav {
    background-color: #c9c1b6; /* Világosbarna háttérszín */
    padding: 20px;            /* Belső térköz a tartalom körül */
    margin-bottom: 30px;      /* Alsó külső térköz, hogy elváljon a következő elemtől */
    text-align: center;       /* Középre igazítja a szöveget és a képet */
    color: white;             /* Fehér szövegszín */
    /* Ha mobil nézetben is a széléig kell érnie: */
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
}

.sajat-szines-sav h2,
.sajat-szines-sav p {
    /* Szövegek stílusa ezen a sávon belül */
    font-family: 'Times New Roman', Times, serif; /* Betűtípus */
    margin-left: 15px; /* Szöveg behúzása a szélről, ha a divnek 0 paddingje van */
    margin-right: 15px;
}

.sajat-szines-sav img {
    max-width: 100%; /* A kép nem lehet nagyobb, mint a szülője */
    height: auto;    /* Megőrzi az arányokat */
    display: block;  /* Blokkszintű elemként kezeli a képet, új sorba kerül */
    margin: 0 auto 20px auto; /* Középre igazítja és ad neki alsó margót */
}

/* A második színes sáv stílusa */
.masik-szines-sav {
    background-color: #dda092; /* Másik háttérszín */
    padding: 25px;
    margin-bottom: 30px;
    color: #333; /* Sötétszürke szövegszín */
    /* Ugyanazok a mobilra vonatkozó szélesség beállítások: */
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
}

.masik-szines-sav h3,
.masik-szines-sav p {
    text-align: left; /* Balra igazítás ezen a sávon */
    margin-left: 15px;
    margin-right: 15px;
}

/* Média lekérdezések a reszponzivitáshoz (ha a fenti 0 padding/margin nem elég) */
@media (max-width: 768px) {
    .sajat-szines-sav,
    .masik-szines-sav {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        /* Ha a ShopRenter alap konténere is beljebb húzza: */
        /* A sablonod fő konténerének osztálynevét kell ide írni! Pl. .container, .main-wrapper, #content */
        /* Ideiglenesen próbálhatod a * (csillag szelektorral is, de az mindenre hat): */
        /* * { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } */
    }
}.szines-sav {
    background-color: #515257; /* Ez adja meg a háttérszínt */
    color: white;             /* Opcionális: Szöveg színe legyen fehér, hogy látszódjon a sötét háttéren */
    padding: 20px;            /* Belső térköz a tartalom körül (ezt majd reszponzívan módosítjuk) */
    margin-bottom: 30px;      /* Alsó külső térköz, hogy elváljon a következő szekciótól */
    box-sizing: border-box;   /* Fontos! A paddingot beleszámolja a szélességbe */
}

/* Képek a .szines-sav-ban legyenek reszponzívak */
.szines-sav img {
    max-width: 100%; /* A kép legfeljebb 100%-os szélességű lehet a szülőjéhez képest */
    height: auto;    /* Az arányok megőrzése */
    display: block;  /* Blokkszintű elemként kezeli a képet */
    margin: 0 auto;  /* Középre igazítja a képet (ha a float: left; eltűnt) */
    /* A korábbi HTML kódban lévő inline 'float: left;' és fix 'width' / 'height' beállításokat töröld a képeknél! */
}

/* Reszponzív beállítások: Teljesen fusson ki az oldal szélére mobil nézetben */
@media (max-width: 768px) { /* Ez a szabály 768px széles képernyőn vagy kisebben érvényesül (telefon) */
    .szines-sav {
        padding-left: 0 !important;   /* Eltávolítja a bal oldali belső térközt */
        padding-right: 0 !important;  /* Eltávolítja a jobb oldali belső térközt */
        margin-left: 0 !important;    /* Eltávolítja a bal oldali külső térközt */
        margin-right: 0 !important;   /* Eltávolítja a jobb oldali külső térközt */
        width: 100% !important;       /* Biztosítja, hogy a teljes szélességet kitöltse */
    }

    /* Extra tipp: Ha a ShopRenter sablonja egy fő konténerbe zárja a tartalmat,
       akkor azt is ki kell terjeszteni. A következő osztálynevek csak példák,
       de általában ilyesmiket használnak a sablonok. */
    .page-wrapper, .site-content, .container {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ha a .szines-sav belüli szöveg is túl közel van a szélhez, adhatsz neki behúzást */
    .szines-sav h1,
    .szines-sav h2,
    .szines-sav h3,
    .szines-sav p {
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
}