:root{
    --header-install-width: 18.4em;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
    background: #111;
    color: #F0EEDF;
    
}

.tagline {
    font-family: 'Sofascore Mono', monospace;
    font-weight: 400;
    text-transform: uppercase;
    color: #f0eedf;
    line-height: 110%;
}
.main-title {
    font-family: 'SofaSans', sans-serif;
    font-weight: 500;
    line-height: 110%;
}
.rating-number {
    font-family: 'SofaSans', sans-serif;
    color: #F0EEDF;
}
.feature-text {
    font-family: 'SofaSans', sans-serif;
    font-weight: 400;
}
 .app-badges li {
    font-family: 'Sofascore Mono', monospace;
    color: #F0EEDF;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
}
.badge-number {
    font-family: 'Sofascore Mono', monospace;
    background: #374DF5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    color: #ffffff;
}
.footer {
    font-family: 'Sofascore Mono', monospace;
    color: #F0EEDF;
} 

.footer a, .footer-text {
    font-family: 'Sofascore Mono', monospace;
    color: #F0EEDF;
    text-decoration: none;
}

@media all and (orientation: landscape){
    body{
        /*font-size: 0.625rem;*/
        font-size: 0.579vw;
    }
    .wrapper {
        position: relative;
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
    }

    /* Video zauzima 1/3 širine */
    .video-part {
        position: absolute;
        top: 0;
        left: 0;
        width: 33.3333%;
        height: 100%;
        min-height: 100vh;
        z-index: 0;
    }

    .video-part video {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        object-fit: cover;

        /* CSS maska */
        -webkit-mask-image: linear-gradient(
            to right,
            #121212 47%,          /* potpuno neprozirno */
            rgba(18,18,18,0) 100% /* fade out do prozirnog */
        );
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: cover;

        mask-image: linear-gradient(
            to right,
            #121212 47%,
            rgba(18,18,18,0) 100%
        );
        mask-repeat: no-repeat;
        mask-size: cover;
    }

    /* Overlay slika pokriva cijeli ekran */
    .image-overlay {
        /*position: absolute;*/
        /*inset: 0; /* top:0; right:0; bottom:0; left:0 */
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        height: calc(100% + 6.2em);
        min-height: calc(100vh + 6.2em);
    }

    .image-overlay img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Inner grid preko svega */
    .inner-grid {
        position: relative;
        display: flex;
        width: 100%;
        min-height: 100vh;
        /*display: grid;
        grid-template-columns: 1fr 1fr 2fr; /* 1/4 + 1/4 + 2/4 */
        z-index: 2;
    }

    .inner-grid .box1 {
        display: flex;
        width: 46em;
        max-width: 46em;
        width: 28.75em;
        max-width: 28.75em;
        align-items: center;
        justify-content: center;
    }

    .inner-grid .box2 {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inner-grid .box3 {
        min-width: 89em;
        display: flex;
        align-items: left;
        justify-content: center;
        padding-left: 6em;
        padding-right:6em;
        z-index: 11;
        box-sizing: border-box;
    }

    .box1 {
        color: #F0EEDF;
        font-family: "Sofascore Mono";
        font-size: 1.6em;
        font-style: normal;
        font-weight: 400;
        line-height: 100%; /* 16px */
        letter-spacing: -0.48px;
        text-transform: uppercase;
    }

    .box1intro {
        display: inline-block; /* da ne padne u novi red */
        width: 18em;          /* prilagodi širinu */
        height: 2em;          /* prilagodi visinu */
    }

    .box3 {

        padding: 8em 0em 6em 0em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        z-index: 5;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 1.2em;
    }

    .logo-icon {
        width: auto;
        height: 4.1em;
        margin-bottom: 5em;
    }


    .tagline {
        font-size: 1.6em;
        letter-spacing: -0.48px;
        margin-bottom: 0.3em;
    }

    .main-title {
        font-size: 6em;
        letter-spacing: -1.8px;
        padding-bottom: 0.25em;
    }

    .main-title .highlight {
        display: block;
    }

    .content-grid {
        display: flex;
        gap: 6em;
        padding-block: 2em;
        align-items: stretch;
        border-bottom: 1px solid #374DF5;
        border-top: 1px solid #374DF5;
    }

    .left-column {
        width: 30%;
        display: flex;
        flex-direction: column;
        gap: 1em;
        justify-content: center;
    }

    .ratings {
        display: flex;
        flex-direction: column;
        margin-top: -1em;
        margin-bottom: 1em;
        gap: 0.6em;
        justify-content: center;
        align-items: center;
    }

    .rating-line {
        display: flex;
        align-items: center;
        gap: 0.6em;
    }

    .rating-number {
        font-size: 1.6em;
    }

    .rating-icon {
        width: 1.537em;
        height: 1.537em;
        flex-shrink: 0;
    }

    .rating-stars {
        height: 1.23em;
        width: auto;
    }

    .qr-wrapper {
        text-align: center;
    }

    .qr-label {
        font-size: 0.9em;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        margin-bottom: 1.2em;
    }

    .qr-code {
        width: 15em;
        height: 16.5em;
        margin: 0 auto;
    }

    .qr-code img {
        width: 100%;
        height: 100%;
    }

    .features {
        width: 70%;
        height: 27.8em;
        display: flex;
        flex-direction: column;
        gap: 1em;
        justify-content: center;
    }

    .feature-item {
        display: flex;
        align-items: center;
        gap: 1.4em;
    }

    .feature-icon {
        width: 2.5em;
        height: 2.5em;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .feature-icon svg, .feature-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .feature-text {
        font-size: 2.4em;
        line-height: 140%;
        letter-spacing: -0.01em;
    }

    .app-badges {
        display: flex;
        gap: 3em;
        flex-wrap: wrap;
        padding-top: 2em;
    }

    .badge {
        padding: 5px 10px;
        background: rgba(93, 107, 255, 0.12);
        border-radius: 6px;
        border: 1px solid rgba(93, 107, 255, 0.25);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .badge-number {
        padding: 0.3125em 0.625em;
        letter-spacing: -0.48px;
        gap: 0.625em;
    }

    .badge-text {
        font-size: 1.6em;
        letter-spacing: -0.48px;
        gap: 0.625em;
    }

     .phone-mockup {
         position: absolute!important;
         top: 50%;
         left: 50%;
         width: 74.2em!important;
         max-height: 101.2em;
         height: 112.5%!important;
         margin-left: -0.8em;
         -ms-transform: translateX(-50%) translateY(-50%);
         -moz-transform: translateX(-50%) translateY(-50%);
         -webkit-transform: translateX(-50%) translateY(-50%);
         -o-transform: translateX(-50%) translateY(-50%);
         transform: translateX(-50%) translateY(-50%);
         z-index: -1!important;
    }

    .phone-mockup img {
        width: 100%;
        height: auto;
        display: block;
    }

    .footer {
        position: absolute;
        width: 100%;
        text-align: center;
        font-size: 1.6em;
        line-height: 1.4em;
        padding: 1.2375em;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: 0;
        margin-bottom: -3.875em;
        box-sizing: border-box;
    } 

    .footer a, .footer-text {
        margin: 0 1.25em;
    }
    .circle{
      width: 0.375em;
      height: 0.375em;
      background: rgb(240, 238, 223);
    }
    .mobile-download-box, .mobile-download{
        display: none;
    }
    .slick .item-clone{
        display: none;
    }
}
@media all and (orientation: portrait){
    body{
        font-size: 2.78vw;
    }
    .wrapper {
        position: relative;
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
    }
    .inner-grid{
        position: relative;
        padding: 2em;
        z-index: 2;
    }
    .logo{
        padding-top: 1.2em;
        margin-bottom: 6em;
    }
    .logo-icon{
        height: 2.5em;
    }
    .tagline{
        font-size: 1.3em;
        letter-spacing: -3%;
        margin-bottom: 1em;
    }
    .main-title{
        font-size: 4.2em;
        letter-spacing: -3%;
        margin-bottom: 0.62em;
    }
    .content-grid{
        border-top: solid 1px #374DF5;
    }
    .left-column{
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 21em;
        padding-top: 2em;
        margin-bottom: 59.2em;   
        box-sizing: border-box;
    }
    .content-grid .ratings{
        display: flex;
        width: 100%;
        margin-bottom: 6.5em;
    }
    .content-grid .ratings .rating-line{
        display: flex;
        align-items: center;
        margin: auto;
    }
    .content-grid .ratings .rating-line .rating-number{
        font-size: 1.8em;
        letter-spacing: -3%;
    }
    .content-grid .ratings .rating-line .rating-icon{
        height: 1.54em;
        margin-left: 0.6em;
    }
    .content-grid .ratings .rating-line .rating-stars{
        height: 1.23em;
        margin-left: 0.6em;
    }
    .mobile-download{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-family: 'Sofascore Mono', monospace;
        font-size: 1.3em;
        font-weight: 100;
        letter-spacing: -3%;
        text-transform: uppercase;
        text-decoration: none;
        padding: 0.923em 3.0769em;
        border-radius: 2.153846em;
        border: solid 1px #121212;
        background: #F0EEDF;
        color: #121212;
        box-sizing: border-box;
        cursor: pointer;
    }
    .mobile-download i{
        display: block;
        width: 1.3846em;
        height: 1.3846em;
        margin-left: 0.62em;
        background-image: url(images/ic_log_out.png);
        background-image: url(images/ic_log_out.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .qr-wrapper{
        display: none;
    }
    .features{
        margin-bottom: 7em;
    }
    .feature-item{
        display: flex;
        align-items: flex-start;
        margin-bottom: 1.6em;
    }
    .feature-icon{
        margin-right: 1.2em;
    }
    .feature-icon img{
        height: 2.4em;
    }
    .feature-text{
        font-size: 2.2em;
        line-height: 120%;
        letter-spacing: -3%;
    }
    
    .organisations{
        border-bottom: solid 1px #374DF5;
    }
    .slick{
        width: calc(100% + 4em);
        margin-left: -2em;
        margin-right: -2em;
        padding-bottom: 3.6em;
        overflow: hidden;
    }
     .app-badges {
        display: flex;
         
      }
     .app-badges li {
        font-size: 1.3em;
        letter-spacing: -0.3%;
         padding: 0 2em;
        gap: 0.5em;
         white-space: nowrap;
      }
    .badge-number {
        padding: 0.385em 0.77em;
        letter-spacing: -0.48px;
        gap: 0.77em;
    }
    .mobile-download-box{
        position: relative;
        display: flex;
        height: 23em;
        justify-content: center;
        align-items: center;
    }
    .footer{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 12.5em;
        position: relative;
        font-size: 1.3em;
        line-height: 110%;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: -3%;
        border-top: solid 1px #F0EEDF;
        z-index: 2;
    }
    .circle{
        width: 0.32em;
        height: 0.32em;
        margin: 1.38em 0;
        background: rgb(240, 238, 223);
    }
    
    .wrapper::after{
        display: block;
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(images/mobile-overlay.png);
        background-image: url(images/mobile-overlay.webp);
        background-size: 100% auto;
        background-position: top center;
        background-repeat: no-repeat;
    }
    .image-overlay{
        display: none;
    }
    .box1intro{
        display: none;
    }
    .video-part {
        position: absolute;
        top: 28.5em;
        left: 0;
        width: 36em;
        height: 45em;
        z-index: -1;
    }

    .video-part video {
        width: 100%;
        height: 100%;
        object-fit: cover;

        /* CSS maska */
        -webkit-mask-image: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, #121212 36.06%, #121212 79.33%, rgba(18, 18, 18, 0) 100%);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: cover;

        mask-image: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, #121212 36.06%, #121212 79.33%, rgba(18, 18, 18, 0) 100%);
        mask-repeat: no-repeat;
        mask-size: cover;
    }
    .phone-mockup{
        position: absolute!important;
        top: 44.5em!important;
        left: 50%!important;
        width: 48.5em!important;
        height: 66.2em!important;
        margin-left: -24.25em!important;
    }
    .phone-mockup img {
        width: 100%;
        height: auto;
        display: block;
    }
}