/* =========================================================
   IGBD - POČETNI HERO / SLIDER
   ========================================================= */


/* =========================================
   UKLANJANJE WORDPRESS NASLOVA
   Samo na stranici koja sadrži hero
   ========================================= */

body:has(.igbd-hero) .entry-title,
body:has(.igbd-hero) .page-title {
    display: none !important;
}


/* =========================================
   IGBD HERO
   ========================================= */

.igbd-hero {
    position: relative;

    width: 100%;
    max-height: none !important;

    overflow: hidden;
    isolation: isolate;

    display: flex;
    align-items: center;

    background: #101714;
    color: #ffffff;

    font-family: inherit;

    width: calc(100% + 60px) !important;
    max-width: none !important;

    margin-left: -30px !important;
    margin-right: -30px !important;
    margin-top: -50px !important;

    box-sizing: border-box;
}


/* =========================================
   POZADINSKA SLIKA
   ========================================= */

.igbd-hero-bg {
    position: absolute;

    inset: 0;

    z-index: -3;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1.02);
}


/* =========================================
   TAMNI PRELAZ PREKO SLIKE
   ========================================= */

.igbd-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(8, 18, 15, 0.95) 0%,
            rgba(8, 18, 15, 0.80) 32%,
            rgba(8, 18, 15, 0.52) 63%,
            rgba(8, 18, 15, 0.30) 100%
        );
}


/* =========================================
   SUPTILNI ZLATNI ODRAZ
   ========================================= */

.igbd-hero::after {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -250px;
    top: -200px;

    background:
        radial-gradient(
            circle,
            rgba(197, 164, 91, 0.16) 0%,
            rgba(197, 164, 91, 0.05) 35%,
            transparent 70%
        );

    z-index: -1;

    pointer-events: none;
}


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

.igbd-hero-content {

    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding: 90px 70px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 70px;
}


/* =========================================
   LIJEVA STRANA
   ========================================= */

.igbd-hero-main {
    max-width: 720px;
}


/* =========================================
   IGBD · WIESBADEN
   ========================================= */

.igbd-hero-eyebrow {

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: rgba(255,255,255,0.72);

    margin-bottom: 18px;
}


/* =========================================
   ZLATNA LINIJA
   ========================================= */

.igbd-hero-line {

    width: 54px;
    height: 2px;

    background: #c5a45b;

    margin-bottom: 26px;
}


/* =========================================
   NASLOV
   ========================================= */

.igbd-hero h1 {

    margin: 0;

    font-size: clamp(58px, 7vw, 90px);

    line-height: 0.91;

    letter-spacing: -3px;

    font-weight: 600;

    color: #ffffff;
}


.igbd-hero h1 span {

    color: #d0b36d;
}


/* =========================================
   GLAVNI PODNASLOV
   ========================================= */

.igbd-hero-subtitle {

    margin: 34px 0 12px;

    font-size: clamp(23px, 2.4vw, 34px);

    line-height: 1.25;

    font-weight: 400;

    color: #ffffff;
}


/* =========================================
   OPIS
   ========================================= */

.igbd-hero-description {

    max-width: 570px;

    margin: 0;

    font-size: 16px;

    line-height: 1.75;

    color: rgba(255,255,255,0.72);
}


/* =========================================
   DESNI BLOK
   ========================================= */

.igbd-hero-side {

    flex: 0 0 230px;

    padding: 28px;

    box-sizing: border-box;

    border-left:
        1px solid
        rgba(255,255,255,0.20);

    background:
        rgba(255,255,255,0.035);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


.igbd-hero-side-top {

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2.5px;

    color:
        rgba(255,255,255,0.62);

    margin-bottom: 20px;
}


.igbd-hero-side-number {

    font-size: 58px;

    line-height: 1;

    font-weight: 500;

    color: #d0b36d;

    letter-spacing: -2px;
}


.igbd-hero-side-text {

    margin-top: 18px;

    font-size: 13px;

    line-height: 1.7;

    color:
        rgba(255,255,255,0.68);
}


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

@media (max-width: 900px) {

    .igbd-hero {
        min-height: 600px;
    }

    .igbd-hero-content {

        padding:
            80px 45px;

        gap: 35px;
    }

    .igbd-hero-side {

        flex: 0 0 190px;
    }

    .igbd-hero h1 {

        font-size:
            clamp(52px, 9vw, 76px);
    }
}


/* =========================================
   MOBITEL
   ========================================= */

@media (max-width: 680px) {

    .igbd-hero {

        min-height: 600px;

        align-items: flex-end;
    }


    .igbd-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(8,18,15,0.35) 0%,
                rgba(8,18,15,0.72) 42%,
                rgba(8,18,15,0.97) 100%
            );
    }


    /*
     * SLIDER MORA ISPUNITI CIJELU VISINU HEROJA.
     */

    .igbd-hero-slides {

        width: 100%;

        min-height: 600px;

    }


    .igbd-hero-slide {

        min-height: 600px;

        box-sizing: border-box;

    }


    .igbd-hero-content {

        display: block;

        width: 100%;

        padding:
            55px 25px 65px;
    }


    .igbd-hero-eyebrow {

        font-size: 10px;

        letter-spacing: 3px;

        margin-bottom: 14px;
    }


    .igbd-hero-line {

        margin-bottom: 22px;
    }


    .igbd-hero h1 {

        font-size:
            clamp(48px, 16vw, 68px);

        line-height: 0.94;

        letter-spacing: -2px;
    }


    .igbd-hero-subtitle {

        margin-top: 25px;

        font-size: 23px;
    }


    .igbd-hero-description {

        font-size: 14px;

        line-height: 1.65;

        max-width: 100%;
    }


    /* DESNI BLOK SE NA MOBITELU SKRIVA */

    .igbd-hero-side {

        display: none;
    }
}


/* =========================================
   MALI TELEFONI
   ========================================= */

@media (max-width: 400px) {

    .igbd-hero {

        min-height: 370px;
    }


    .igbd-hero-slides,
    .igbd-hero-slide {

        min-height: 370px;

    }


    .igbd-hero-content {

        padding-left: 20px;
        padding-right: 20px;
    }
}


/* =========================================
   SLIDER
   ========================================= */

.igbd-hero-slides {

    position: relative;

    width: 100%;
}


.igbd-hero-slide {

    position: relative;

    width: 100%;

    display: none;
}


.igbd-hero-slide.is-active {

    display: block;

    animation:
        igbdHeroFade
        0.9s
        ease
        both;
}


@keyframes igbdHeroFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}