/* ========================================
   GEOTEHNIKA PAGE
======================================== */

.geotehnika-page {
    background: #fff;
}

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

.geo-hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: #111;
}


/* hero image */

.geo-hero__image {
    position: absolute;

    inset: 0;

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

    transform: scale(1.02);
}


/* hero overlay */

.geo-hero__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.12) 30%,
            rgba(0, 0, 0, 0.58) 100%),
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.15) 65%,
            rgba(0, 0, 0, 0.05) 100%);
}


/* hero content */

.geo-hero__content {
    position: relative;

    z-index: 2;

    padding-bottom: 90px;

    color: #fff;
}


/* small hero label */

.geo-hero__eyebrow {
    margin-bottom: 18px;

    font-size: 13px;
    font-weight: 500;

    letter-spacing: 4px;

    text-transform: uppercase;
}


/* main title */

.geo-hero__title {
    margin: 0;

    font-family: "Teko", sans-serif;

    font-size: clamp(72px, 10vw, 150px);

    line-height: 0.8;

    font-weight: 400;

    letter-spacing: 1px;

    color: #fff;
}


/* subtitle */

.geo-hero__lead {
    max-width: 620px;

    margin-top: 35px;
    margin-bottom: 0;

    font-size: 24px;

    line-height: 1.45;

    font-weight: 300;
}


/* ========================================
   INTRO
======================================== */

.geo-intro {
    padding: 110px 0;
}


/* red section label */

.geo-section-label {
    margin-bottom: 16px;

    color: #e02d28;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* white label */

.geo-section-label--light {
    color: #fff;

    opacity: 0.7;
}


/* headings */

.geo-heading {
    margin: 0 0 35px;

    font-family: "Teko", sans-serif;

    font-size: 58px;

    line-height: 0.98;

    font-weight: 400;

    text-transform: uppercase;
}


/* intro lead */

.geo-intro__lead {
    font-size: 28px;

    line-height: 1.45;

    font-weight: 300;
}


/* intro paragraph */

.geo-intro p:not(.geo-intro__lead) {
    font-size: 17px;

    line-height: 1.8;
}


/* ========================================
   PHOTO SHOWCASE
======================================== */

.geo-showcase {
    overflow: hidden;
}


.geo-showcase .row {
    margin: 0;
}


.geo-showcase [class*="col-"] {
    padding: 0;
}


/* card */

.geo-card {
    position: relative;

    display: block;

    overflow: hidden;

    color: #fff;

    background: #111;
}


.geo-card--large {
    height: 620px;
}


.geo-card--wide {
    height: 540px;
}


/* card image */

.geo-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.8s ease;
}


.geo-card:hover img {
    transform: scale(1.035);
}


/* dark lower gradient */

.geo-card__shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(0deg,
            rgba(0, 0, 0, 0.74) 0%,
            rgba(0, 0, 0, 0.08) 62%,
            rgba(0, 0, 0, 0.02) 100%);
}


/* card text */

.geo-card__content {
    position: absolute;

    left: 50px;
    right: 50px;
    bottom: 45px;

    z-index: 2;
}


.geo-card__content span {
    display: block;

    margin-bottom: 8px;

    font-size: 12px;

    letter-spacing: 3px;

    opacity: 0.7;
}


.geo-card__content h3 {
    margin: 0;

    color: #fff;

    font-family: "Teko", sans-serif;

    font-size: 46px;

    line-height: 1;

    font-weight: 400;

    text-transform: uppercase;
}


.geo-card__content p {
    margin: 8px 0 0;

    font-size: 16px;

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


/* ========================================
   SERVICES
======================================== */

.geo-services {
    padding: 120px 0;
}


.geo-services__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 55px;
}


/* individual service */

.geo-service {
    display: grid;

    grid-template-columns: 42px 1fr;

    gap: 15px;

    align-items: start;

    padding: 22px 0;

    border-top:
        1px solid rgba(0, 0, 0, 0.15);
}


.geo-service span {
    color: #e02d28;

    font-family: "Teko", sans-serif;

    font-size: 20px;
}


.geo-service p {
    margin: 0;

    font-size: 16px;

    line-height: 1.55;
}


/* ========================================
   LARGE STATEMENT IMAGE
======================================== */

.geo-statement {
    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    background-size: cover;

    background-position: center center;

    background-attachment: fixed;
}


/* overlay */

.geo-statement__overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.57);
}


/* text */

.geo-statement__content {
    position: relative;

    z-index: 2;

    max-width: 760px;

    color: #fff;
}


.geo-statement__content h2 {
    margin: 0;

    color: #fff;

    font-family: "Teko", sans-serif;

    font-size: clamp(60px, 7vw, 100px);

    line-height: 0.95;

    font-weight: 400;

    text-transform: uppercase;
}


.geo-statement__content p {
    max-width: 660px;

    margin-top: 35px;

    font-size: 20px;

    line-height: 1.65;

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


/* ========================================
   FINAL SECTION
======================================== */

.geo-final {
    padding: 120px 0;
}


.geo-final img {
    width: 100%;

    height: 620px;

    display: block;

    object-fit: cover;
}


.geo-final__content {
    padding: 50px 0 50px 70px;
}


.geo-final__content p {
    margin-bottom: 35px;

    font-size: 17px;

    line-height: 1.8;
}


/* button */

.geo-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 17px 30px;

    background: #e02d28;

    color: #fff;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.geo-button:hover {
    background: #be2420;

    color: #fff;

    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

    /* hero */

    .geo-hero {
        min-height: 620px;
    }


    .geo-hero__content {
        padding-bottom: 60px;
    }


    .geo-hero__lead {
        font-size: 19px;
    }


    /* blur samo preko hero fotografije,
       header ostaje potpuno originalan */

    .page-geotehnika .geo-hero::before {
        height: 120px;

        background:
            linear-gradient(to bottom,
                rgba(255, 255, 255, 0.42) 0%,
                rgba(255, 255, 255, 0.30) 45%,
                rgba(255, 255, 255, 0.10) 78%,
                rgba(255, 255, 255, 0) 100%);

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

        -webkit-mask-image:
            linear-gradient(to bottom,
                #000 0%,
                #000 45%,
                rgba(0, 0, 0, 0.65) 72%,
                transparent 100%);

        mask-image:
            linear-gradient(to bottom,
                #000 0%,
                #000 45%,
                rgba(0, 0, 0, 0.65) 72%,
                transparent 100%);
    }


    /* sections */

    .geo-intro,
    .geo-services,
    .geo-final {
        padding: 75px 0;
    }


    /* images */

    .geo-card--large,
    .geo-card--wide {
        height: 520px;
    }


    /* services */

    .geo-services__grid {
        grid-template-columns: 1fr;
    }


    /* statement */

    .geo-statement {
        min-height: 600px;
        background-attachment: scroll;
    }


    /* final */

    .geo-final__content {
        padding: 55px 0 0;
    }


    .geo-final img {
        height: 520px;
    }

}

/* ========================================
   GEOTEHNIKA - SVETLI BLUR IZA HEADERA
   SA POSTEPENIM PRELAZOM
======================================== */

.page-geotehnika .geo-hero::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 180px;

    z-index: 1;

    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.32) 45%,
            rgba(255, 255, 255, 0.14) 75%,
            rgba(255, 255, 255, 0) 100%);

    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    -webkit-mask-image:
        linear-gradient(to bottom,
            #000 0%,
            #000 45%,
            rgba(0, 0, 0, 0.7) 70%,
            transparent 100%);

    mask-image:
        linear-gradient(to bottom,
            #000 0%,
            #000 45%,
            rgba(0, 0, 0, 0.7) 70%,
            transparent 100%);

    pointer-events: none;
}

/* ========================================
   MOBILE - BLUR IZA ORIGINALNOG HEADERA
======================================== */

@media (max-width: 991px) {

    .page-geotehnika .geo-hero::before {
        height: 120px;

        background:
            linear-gradient(to bottom,
                rgba(255, 255, 255, 0.42) 0%,
                rgba(255, 255, 255, 0.30) 45%,
                rgba(255, 255, 255, 0.10) 78%,
                rgba(255, 255, 255, 0) 100%);

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

        -webkit-mask-image:
            linear-gradient(to bottom,
                #000 0%,
                #000 45%,
                rgba(0, 0, 0, 0.65) 72%,
                transparent 100%);

        mask-image:
            linear-gradient(to bottom,
                #000 0%,
                #000 45%,
                rgba(0, 0, 0, 0.65) 72%,
                transparent 100%);
    }

}