.elementor-248 .elementor-element.elementor-element-5048a5e8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:1;--padding-top:7em;--padding-bottom:7em;--padding-left:0em;--padding-right:0em;}.elementor-248 .elementor-element.elementor-element-5048a5e8:not(.elementor-motion-effects-element-type-background), .elementor-248 .elementor-element.elementor-element-5048a5e8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://muzickaskolatrebinje.com/wp-content/uploads/2026/09/maturanti.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-248 .elementor-element.elementor-element-5048a5e8::before, .elementor-248 .elementor-element.elementor-element-5048a5e8 > .elementor-background-video-container::before, .elementor-248 .elementor-element.elementor-element-5048a5e8 > .e-con-inner > .elementor-background-video-container::before, .elementor-248 .elementor-element.elementor-element-5048a5e8 > .elementor-background-slideshow::before, .elementor-248 .elementor-element.elementor-element-5048a5e8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-248 .elementor-element.elementor-element-5048a5e8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#01295199;--background-overlay:'';}.elementor-248 .elementor-element.elementor-element-2cc29db4{--display:flex;--padding-top:2em;--padding-bottom:2em;--padding-left:2em;--padding-right:2em;}.elementor-248 .elementor-element.elementor-element-70d4fbfd{text-align:center;}.elementor-248 .elementor-element.elementor-element-70d4fbfd .elementor-heading-title{color:var( --e-global-color-text );}.elementor-248 .elementor-element.elementor-element-f907f8c{--display:flex;}@media(min-width:768px){.elementor-248 .elementor-element.elementor-element-5048a5e8{--content-width:640px;}}@media(max-width:1024px){.elementor-248 .elementor-element.elementor-element-5048a5e8{--padding-top:5em;--padding-bottom:5em;--padding-left:0em;--padding-right:0em;}.elementor-248 .elementor-element.elementor-element-2cc29db4{--gap:14px 14px;--row-gap:14px;--column-gap:14px;}}@media(max-width:767px){.elementor-248 .elementor-element.elementor-element-5048a5e8{--padding-top:3em;--padding-bottom:3em;--padding-left:0em;--padding-right:0em;}.elementor-248 .elementor-element.elementor-element-2cc29db4{--padding-top:2em;--padding-bottom:2em;--padding-left:1em;--padding-right:1em;}}/* Start custom CSS for html, class: .elementor-element-7afe393 *//* =========================================================
   MATURANTI - GLOBALNI CSS
   ЈУ Музичка школа „Требиње“
   FINALNA VERZIJA
   ========================================================= */


/* =========================================================
   UVOD STRANICE
   ========================================================= */

.ms-graduates-page-intro {
    margin-bottom: 44px;
}


/* =========================================================
   GLAVNA KARTICA GENERACIJE
   ========================================================= */

.ms-graduates-card {
    overflow: hidden;
    margin-bottom: 46px;
    background: #ffffff;
    border: 1px solid rgba(1, 41, 80, 0.10);
    border-radius: 22px;
    box-shadow: 0 16px 42px rgba(1, 41, 80, 0.08);
}


/* =========================================================
   HEADER GENERACIJE
   ========================================================= */

.ms-graduates-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    background: #012950;
}

.ms-graduates-head-left {
    min-width: 0;
}

.ms-graduates-generation {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(234, 102, 69, 0.14);
    color: #ea6645;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.03em;
}

.ms-graduates-head h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Lora", serif;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.2;
}

.ms-graduates-year {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.76);
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: right;
}


/* =========================================================
   FOTOGRAFIJA GENERACIJE
   VAŽNO: SLIKA SE NE SIJEČE
   ========================================================= */

.ms-graduates-image {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #eef2f5;
    overflow: hidden;
}

.ms-graduates-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
}


/* =========================================================
   SADRŽAJ KARTICE
   ========================================================= */

.ms-graduates-body {
    padding: 30px;
}

.ms-graduates-intro {
    margin: 0 0 28px;
    color: #70727e;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   ODSJECI
   ========================================================= */

.ms-graduates-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.ms-graduates-dept {
    padding: 24px;
    background: rgba(1, 41, 80, 0.035);
    border: 1px solid rgba(1, 41, 80, 0.06);
    border-radius: 16px;
}

.ms-graduates-dept h3 {
    margin: 0 0 18px;
    color: #012950;
    font-family: "Lora", serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}


/* =========================================================
   LISTA UČENIKA
   ========================================================= */

.ms-graduates-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms-graduates-list li {
    position: relative;
    margin-bottom: 13px;
    padding-left: 20px;
    color: #70727e;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.58;
}

.ms-graduates-list li:last-child {
    margin-bottom: 0;
}

.ms-graduates-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ea6645;
}

.ms-graduates-list strong {
    display: block;
    margin-bottom: 2px;
    color: #012950;
    font-weight: 700;
}


/* =========================================================
   DONJE INFORMACIJE
   ========================================================= */

.ms-graduates-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.ms-graduates-meta {
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid rgba(1, 41, 80, 0.10);
    border-radius: 14px;
}

.ms-graduates-meta span {
    display: block;
    margin-bottom: 6px;
    color: #70727e;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ms-graduates-meta strong {
    color: #012950;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}


/* UČENIK GENERACIJE */

.ms-graduates-meta-highlight {
    border-color: rgba(234, 102, 69, 0.30);
    background: rgba(234, 102, 69, 0.07);
}

.ms-graduates-meta-highlight strong {
    color: #ea6645;
}


/* =========================================================
   HOVER - SAMO DESKTOP
   ========================================================= */

@media (hover: hover) {

    .ms-graduates-card {
        transition:
            transform 0.28s ease,
            box-shadow 0.28s ease,
            border-color 0.28s ease;
    }

    .ms-graduates-card:hover {
        transform: translateY(-4px);
        border-color: rgba(234, 102, 69, 0.20);
        box-shadow: 0 22px 52px rgba(1, 41, 80, 0.12);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .ms-graduates-card {
        margin-bottom: 40px;
    }

    .ms-graduates-head {
        padding: 23px 24px;
    }

    .ms-graduates-head h2 {
        font-size: 27px;
    }

    .ms-graduates-year {
        font-size: 13px;
    }

    .ms-graduates-body {
        padding: 26px;
    }

    .ms-graduates-grid {
        gap: 20px;
    }

    .ms-graduates-dept {
        padding: 22px;
    }
}


/* =========================================================
   MOBILNI
   ========================================================= */

@media (max-width: 767px) {

    .ms-graduates-page-intro {
        margin-bottom: 32px;
    }

    .ms-graduates-card {
        margin-bottom: 34px;
        border-radius: 17px;
    }

    .ms-graduates-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 21px 19px;
    }

    .ms-graduates-generation {
        margin-bottom: 6px;
        font-size: 11px;
    }

    .ms-graduates-head h2 {
        font-size: 24px;
        line-height: 1.22;
    }

    .ms-graduates-year {
        text-align: left;
        font-size: 13px;
    }

    .ms-graduates-image {
        width: 100%;
    }

    .ms-graduates-image img {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .ms-graduates-body {
        padding: 22px 18px 24px;
    }

    .ms-graduates-intro {
        margin-bottom: 22px;
        font-size: 14px;
        line-height: 1.65;
    }

    .ms-graduates-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ms-graduates-dept {
        padding: 20px 18px;
        border-radius: 14px;
    }

    .ms-graduates-dept h3 {
        margin-bottom: 16px;
        font-size: 20px;
    }

    .ms-graduates-list li {
        margin-bottom: 12px;
        font-size: 14px;
    }

    .ms-graduates-footer {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 18px;
    }

    .ms-graduates-meta {
        padding: 16px 17px;
    }

    .ms-graduates-meta span {
        font-size: 11px;
    }

    .ms-graduates-meta strong {
        font-size: 14px;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f907f8c *//* =========================================================
   MATURANTI - GLOBALNI CSS
   ЈУ Музичка школа „Требиње“
   ========================================================= */

.ms-graduates-page-intro {
    margin-bottom: 44px;
}

.ms-graduates-card {
    overflow: hidden;
    margin-bottom: 46px;
    background: #ffffff;
    border: 1px solid rgba(1, 41, 80, 0.10);
    border-radius: 22px;
    box-shadow: 0 16px 42px rgba(1, 41, 80, 0.08);
}


/* HEADER GENERACIJE */

.ms-graduates-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    background: #012950;
}

.ms-graduates-head-left {
    min-width: 0;
}

.ms-graduates-generation {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(234, 102, 69, 0.14);
    color: #ea6645;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.03em;
}

.ms-graduates-head h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Lora", serif;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.2;
}

.ms-graduates-year {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.76);
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}


/* FOTOGRAFIJA */

.ms-graduates-image {
    width: 100%;
    margin: 0;
    background: #eef2f5;
}

.ms-graduates-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: cover;
    object-position: center;
}


/* SADRZAJ */

.ms-graduates-body {
    padding: 30px;
}

.ms-graduates-intro {
    margin: 0 0 28px;
    color: #70727e;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

.ms-graduates-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}


/* ODSJECI */

.ms-graduates-dept {
    padding: 24px;
    background: rgba(1, 41, 80, 0.035);
    border: 1px solid rgba(1, 41, 80, 0.06);
    border-radius: 16px;
}

.ms-graduates-dept h3 {
    margin: 0 0 18px;
    color: #012950;
    font-family: "Lora", serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.ms-graduates-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms-graduates-list li {
    position: relative;
    margin-bottom: 13px;
    padding-left: 20px;
    color: #70727e;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.58;
}

.ms-graduates-list li:last-child {
    margin-bottom: 0;
}

.ms-graduates-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ea6645;
}

.ms-graduates-list strong {
    display: block;
    margin-bottom: 2px;
    color: #012950;
    font-weight: 700;
}


/* DONJE INFORMACIJE */

.ms-graduates-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.ms-graduates-meta {
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid rgba(1, 41, 80, 0.10);
    border-radius: 14px;
}

.ms-graduates-meta span {
    display: block;
    margin-bottom: 6px;
    color: #70727e;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ms-graduates-meta strong {
    color: #012950;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.ms-graduates-meta-highlight {
    border-color: rgba(234, 102, 69, 0.30);
    background: rgba(234, 102, 69, 0.07);
}

.ms-graduates-meta-highlight strong {
    color: #ea6645;
}


/* BLAGI HOVER SAMO NA DESKTOPU */

@media (hover: hover) {

    .ms-graduates-card {
        transition:
            transform 0.28s ease,
            box-shadow 0.28s ease,
            border-color 0.28s ease;
    }

    .ms-graduates-card:hover {
        transform: translateY(-4px);
        border-color: rgba(234, 102, 69, 0.20);
        box-shadow: 0 22px 52px rgba(1, 41, 80, 0.12);
    }
}


/* TABLET */

@media (max-width: 1024px) {

    .ms-graduates-head {
        padding: 23px 24px;
    }

    .ms-graduates-head h2 {
        font-size: 27px;
    }

    .ms-graduates-body {
        padding: 26px;
    }

    .ms-graduates-grid {
        gap: 20px;
    }
}


/* MOBILE */

@media (max-width: 767px) {

    .ms-graduates-card {
        margin-bottom: 34px;
        border-radius: 17px;
    }

    .ms-graduates-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 21px 19px;
    }

    .ms-graduates-head h2 {
        font-size: 24px;
    }

    .ms-graduates-year {
        text-align: left;
        font-size: 13px;
    }

    .ms-graduates-image img {
        max-height: none;
    }

    .ms-graduates-body {
        padding: 22px 18px 24px;
    }

    .ms-graduates-intro {
        margin-bottom: 22px;
        font-size: 14px;
        line-height: 1.65;
    }

    .ms-graduates-grid,
    .ms-graduates-footer {
        grid-template-columns: 1fr;
    }

    .ms-graduates-grid {
        gap: 16px;
    }

    .ms-graduates-dept {
        padding: 20px 18px;
        border-radius: 14px;
    }

    .ms-graduates-dept h3 {
        font-size: 20px;
    }

    .ms-graduates-list li {
        font-size: 14px;
    }

    .ms-graduates-footer {
        gap: 12px;
        margin-top: 18px;
    }

    .ms-graduates-meta {
        padding: 16px 17px;
    }
}/* End custom CSS */