/* ================================
   SF PRO TEXT
================================ */

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Ultralight.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Thin.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Heavy.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* ================================
   SF PRO TEXT - ITALIC
================================ */

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-UltralightItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-ThinItalic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-RegularItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-SemiboldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-HeavyItalic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./static/fonts/SF-Pro-Text-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}


/* ================================
   SF PRO DISPLAY
================================ */

@font-face {
    font-family: 'SF Pro Display';
    src: url('./static/fonts/SFPRODISPLAYREGULAR.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('./static/fonts/SFPRODISPLAYMEDIUM.OTF') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('./static/fonts/SFPRODISPLAYBOLD.OTF') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



:root {
    --font-text: 'SF Pro Text', Arial, sans-serif;
    --font-display: 'SF Pro Display', Arial, sans-serif;

    --weight-ultralight: 100;
    --weight-thin: 200;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-heavy: 800;
    --weight-black: 900;

    
    --gradient-1: linear-gradient(90deg, #C439FF 0%, #12DEFE 100%);
    --gradient-2: linear-gradient(90deg, #C439FF 50%, #12DFFF 100%);

}

body{
    margin: 0;
    padding: 0;
    background: black;
    overflow-x: hidden;
}


.des,.header-desktop{
    
    display:none;
}



.upper-header{
    background-color: #C933FF;
    width: 100vw;
    display: flex;
    box-sizing: border-box;
    padding-left: 6.47vw;
    padding-right: 6.47vw;
    height: 7.98vw;
    align-items: center;
    justify-content: space-between;
    


}

.upper-header a{
    font-family: var(--font-text);
    font-weight: var(--weight-bold);
    color: white;
    text-decoration: none;
    font-size:2.35vw;
}

.upper-header a.non-active{
    opacity: 0.63;

}

.lang{
    gap: 3.38vw;
    display: flex;
}

.header{
    height: 18.61vw;
    display: flex;
    justify-content: space-between;
    width: 100vw;

    box-sizing: border-box;
    padding-left: 6.47vw;
    padding-right: 6.47vw;
        align-items: center;
        
}

.logo{
    width: 18.56vw;

}

.header .icon{
    width: 6.30vw;
}

.header .header-icons{
    display: flex;
    gap:2.00vw ;
}

.main-kartice{
   justify-content: space-between;
    width: 100vw;

    box-sizing: border-box;
    padding-left:2.85vw;
    padding-right:2.85vw;
        align-items: center;
}

.main-kartica{
    position: relative;
    margin-bottom: 1.69vw;
}

.main-kartica img{
    width: 84.97vw;
}

.main-kartica a{
    position: absolute;

    width:23.85vw ;
    height: 15.17vw;
    background-color: black;
    z-index: 2;
    border-radius: 10.12vw;
  
    right: 0;
    top: 14.44vw;
    display: inline-block;
    color: white;
    text-align: center;
    align-content: center;
    font-family: var(--font-text);
    font-weight: var(--weight-bold);
    text-decoration: none;
    
}


.main-kartica.karting{
    font-size: 3.69vw;

}

.main-kartica.arkade{
     font-size: 2.74vw;
    
}

.main-kartica.soft{
     font-size: 1.94vw;
    
}

.main-kartica.voznje{
     font-size: 2.76vw;
    
}

.main-kartica.eventi{
     font-size: 2.31vw;
    
}

.main-kartica.restoran{
     font-size: 2.76vw;
    
}

.main-kartica.cjenovnik{
     font-size: 2.90vw;
    
}

.footer{
    width: 100vw;

    box-sizing: border-box;
    padding-left:3.16vw;
    padding-right:3.16vw;
    

}
.footer .container{
    background-image: url('./static/img/vybefooterbg.svg');
    background-size: cover;
    background-position: center;
    height: 57.96vw;
    display: flex;
}

.footer .container .info{
    padding-top: 9.98vw;
    padding-left: 5.88vw;
    width: 55.89vw;
}

.info h1{
    color: white;
font-family:var(--font-display) ;
font-weight: var(--weight-heavy);
font-size: 2.27vw;
margin: 0;
font-style: italic;

}

.info a{
    color: white;
    text-decoration: none;
font-family:var(--font-text) ;
font-weight: var(--weight-regular);
font-size: 2.90vw;
margin-top: 1.72vw;
margin-bottom: 1.72vw;
line-height: 100%;
display: block;


}

.socials{
    display: flex;
    flex-direction: column;
    margin-top: 14.62vw;
    gap: 2.28vw;
}

.socials img{
    width:8.07vw;
}








@media (min-width: 1000px) {
    .kontakt-header{
        display: none;
    }

    .upper-header{
            justify-content: flex-end;
            height: 4.02vw;
            margin-top: 2.19vw;
            padding-right: 5.52vw;
    }

    .upper-header a{
        font-size: 1.04vw;
    }
    .lang{
        gap: 1.72vw;
    }
    .header{
        display: none;
    }

    .header-desktop{
        display: flex;
        width: 100vw;
        box-sizing: border-box;
        padding-left: 5.52vw;
        padding-right: 5.52vw;
        align-items: center;
        height: 12.28vw;
        gap: 35.17vw;
    }

    .logo-header{
        width: 14.43vw;
    }

    .desktop-icons{
        display: flex;
        gap: 1.30vw;
    }

 .cjenovnikh {
    width: 13.49vw;
    height: 4.05vw;

    position: relative;
    background: transparent;

    display: block;
    border-radius: 2.12vw;

    align-content: center;
    text-align: center;

    font-family: var(--font-text);
    color: white;
    font-weight: var(--weight-bold);
    font-size: 1.46vw;
    text-decoration: none;
}

.cjenovnikh::before {
    content: "";
    position: absolute;
    inset: 0;

    padding: 2px;
    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #C439FF 0%,
        #12DEFE 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;
}

.rezervisi {
    width: 13.49vw;
    height: 4.05vw;

    display: inline-block;
    border-radius: 2.12vw;

    background: linear-gradient(
        90deg,
        #C439FF 50%,
        #12DFFF 100%
    );

    align-content: center;
    text-align: center;

    font-family: var(--font-text);
    color: white;
    font-weight: var(--weight-bold);
    font-size: 1.46vw;
    text-decoration: none;
}


.desktop-icons .icon{
    width: 4.26vw;
}


.des{
    display: block;
}

.mob{
    display: none;
}

.main-kartica img{
    width: 79.49vw;
}


.main-kartice {
  
  
    padding-left: 6.46vw;
    padding-right: 14.01vw;





}


.main-kartica a{

        position: absolute;
    width:19.74vw;
    height: 6.70vw;
    background-color: black;
    z-index: 2;
    border-radius: 9.03vw;
    right: -9.5vw;
    top:10.38vw;
    display: inline-block;
    color: white;
    text-align: center;
    align-content: center;
    font-family: var(--font-text);
    font-weight: var(--weight-bold);
    text-decoration: none;

}






.main-kartica.karting{
    font-size: 2.08vw;

}

.main-kartica.arkade{
     font-size: 1.82vw;
    
}

.main-kartica.soft{
     font-size: 1.25vw;
    
}

.main-kartica.voznje{
     font-size: 1.30vw;
    
}

.main-kartica.eventi{
     font-size: 1.30vw;
    
}

.main-kartica.restoran{
     font-size: 1.30vw;
    
}

.main-kartica.cjenovnik{
     font-size: 1.30vw;
    
}



.footer{
    width: 100vw;

    box-sizing: border-box;
    padding-left:0vw;
    padding-right:0vw;
    

}

.footer .container{
    background-image: url('./static/img/vybefooterbgdes.svg');
    background-size: cover;
    background-position: center;
    height: 29vw;
    display: flex;
    width: 99.3vw;
}


.footer .container .info {
    padding-top: 4.30vw;
    padding-left: 6.46vw;
    width: 69.25vw;
}

.info h1{
    font-size: 1.67vw;
}

.info a{

    font-size: 1.67vw;
    margin-top: 0.89vw;
    margin-bottom: 1.15vw;

}

.socials img{
    width: 4.55vw;
}

.socials{
    margin-top: 9.28vw;
    gap:1.30vw ;
}


}