@import url('https://fonts.googleapis.com/css2?family=Teko:wght@600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /*user-select: none;*/
}

:root{
    --main-color: #e9671c;
    --secondary-color: #e9671c;
    --poppins: 'Poppins', sans-serif;
    --vietnam: 'Be Vietnam Pro', sans-serif;
}

.koupit {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    font-family: 'Teko', sans-serif;
}

.koupit1 {
    background-color: white; 
    color: black; 
    border: 2px solid #e9671c;
    border-radius: 10px;
}
  
.koupit1:hover {
    background-color: #e9671c;
    color: white;
}

h3{
    font-family: 'Teko', sans-serif;
    font-size: 3em;
    text-align: center;
 }

/*------------------*/
h1 {
    font-family: var(--poppins);
    font-size: 8em;
    text-align: center;
    color: whitesmoke;
}

.nadpisnav{
    margin-top: 5%;
}

.logomma{
    width: 100px;
    margin-top: 1%;
    margin-right: 0.8rem;
}

p {
    margin-top: 2%;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    text-align: center;
    font-size: 18px;
    color: #676767;
}

.heading h2{
    font-family: 'Teko', sans-serif;
    font-size: 5em;
    text-align: center;
 }

.heading h2:after{
    content: "";
    width: 250px;
    display: block;
    border-bottom: 3px solid #e9671c;
    background-color: #e9671c;
    text-align: center;
    margin: 0px auto;
}

a{
    color: #e9671c; 
    text-decoration: none;
}

a:hover{
    color: #676767;
    text-decoration: none;
}


/*--------*/

.prodejkurzu {
    margin-top: 2%;
    text-align: center;
    font-family: 'Teko', sans-serif;
}

.cena{
    margin-top: 10%;
}

header{
    height: 100vh;
    background: linear-gradient(to right,#000000b7 0%,#a1854fa6 80%,#00000098 100%),url("https://cdnmedia.webthethao.vn/uploads/2022-05-08/oliveira-vs-gaethje%20(2).jpg");     
    background-size: cover;        
    overflow-y: hidden;
}

header nav{
    display: flex;
    min-height: 8vh;
    justify-content: space-around;
    align-items: center;
}

header nav .nav-links{
    display: flex;
    justify-content: space-around;
    width: 45%;
}
.nav-links li::after{
    content: "";
    display: block;
    height: 3px;
    width: 0;
    background: rgb(233, 120, 28);
    transition: width 1s;
}
.nav-links li:hover::after{
    width: 100%;
    transition: width 0.5s;
}
header nav .nav-links li{
    list-style-type: none;
}

header nav .nav-links li a{
    color: white;
    text-decoration: none;
    font-family: 'Teko', sans-serif;
    font-size: 25px;
}

header .wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-y: hidden;
}
header .wrap .item:first-child{
    text-align: left;
    grid-column: span 2;
    overflow-y: hidden;
}

header .wrap .item:first-child h1{
    font-size: 8em;
    margin: 5%;
    font-family: var(--poppins);
    color: white;
    margin-left: 100px;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    top: 15%;
    left: 10%;
    text-align: left;
    overflow-y: hidden;
}

.burger div{
    width: 25px;
    height: 3px;
    background-color: #ffffffde;
    margin: 5px;
    border-radius: 4px;
}

.burger{
    display: none;
    cursor: pointer;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
}
  
main {
    padding: 20px;
}

.footer{
    background-color: rgb(0, 0, 0);
    margin-top: 5em;
}

.footer .wrapper{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.footer .wrapper .item{
    margin-top: 2em;
}

.footer .wrapper .item p{
    color: var(--main-color);
    font-family: 'Teko', sans-serif;
    padding: 10px;
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

.socky {
    letter-spacing: 1em;
}


/*------------*/

@keyframes navLinkFade{
    from{
        opacity: 1;
        
    }
    to{
        opacity: 1;
        
    }
}

@media screen and (max-width: 960px){
 
    nav{
        position: static;
        z-index: 200;
        background-color: #000000;
        width: 100%;
    }
    .nav-links{
        position: absolute;
        right: 0px;
        height: 40vh;
        top: 7.3vh;  
        background-color: var(--secondary-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        transform: translateX(100%);
        transition: transform 0.3s ease-in;
        
    }
    .nav-links li {
        opacity: 0;
    }
    .nav-links a{
        color: white;
    }
    .burger{
        display: block;
        z-index: 50;
        position: relative;
        left: 40px;
    }
 
  
   ul.nav-links{
    z-index: 50;
    position: fixed;
}
    nav{
        position: fixed;
    }
}

@media only screen and (max-width: 920px){
    .nadpisnav h1{
        font-size: 4em;
        margin-top: 13%;
    }   
}

@media only screen and (max-width: 920px){
    .heading h2{
        font-size: 2em;
    }

    h3{
    font-size: 1.5em;
    }
}

@media only screen and (max-width: 920px){
    .socky {
        letter-spacing: 0.5em;
    }
}

@media only screen and (max-width: 1520px){
    header nav .nav-links {
     width: 100%;
    }
}

@media only screen and (max-width: 1520px){
    h1 {
     font-size: 7rem;
    }
}



@import url('https://fonts.googleapis.com/css2?family=Teko:wght@600&display=swap');



.kontakty .mobilkont{
    display: grid ;
    grid-template-columns: repeat(3, 1fr);
    gap: 3em;
   margin-top: 8em;
}

h4{
    font-family: 'Teko', sans-serif;
    font-size: 3em;
    text-align: center;
}


h4:after{
    content: "";
    width: 150px;
    display: block;
    border-bottom: 3px solid #e9671c;
    background-color: #e9671c;
    text-align: center;
    margin: 0px auto;
}

.trenerinfo .trena{
    display: grid ;
    grid-template-columns: repeat(2, 1fr);
    gap: 3em;
    margin-top: 10em;
}

.trenerimg{
    max-height: 350px;
}

@media only screen and (max-width: 890px){
    .kontakty .mobilkont {
        display: block !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 3em;
        margin-top: 5em;
    }
}
.trena h4{
    font-family: 'Teko', sans-serif;
    font-size: 4.5em;
    text-align: center;
}

.uvod{
    margin-top: 5rem;
}

.nav-active{
    transform: translateX(0%);
}

@media only screen and (max-width: 890px)
{
.logomma {
    width: 50px;
    margin-top: 1%;
}
}

.cas{
    color: var(--main-color);
    font-family: 'Teko', sans-serif;
    padding: 10px;
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
    margin-top: 10px;
}