*{



margin:0;



padding:0;



box-sizing:border-box;



}



body{



background:#090909;



color:white;



font-family:'Poppins',sans-serif;



line-height:1.8;



}



h1,h2{



font-family:'Cinzel',serif;



}



header{



padding:20px;



text-align:center;



}



.logo{



width:120px;



}



.hero{



position:center;



height:650px;



overflow:hidden;



display:flex;



justify-content:center;



align-items:center;



text-align:center;



}



.hero-image{



position:center top;



width:100%;



height:100%;



object-fit:cover;



object-position:center;



}



.overlay{



position:absolute;



width:100%;



height:100%;



background:rgba(0,0,0,.55);



}



.hero-content{



position:relative;



z-index:2;



padding:20px;



}



.hero h1{



font-size:55px;



}



.hero p{



font-size:22px;



margin:20px 0;



}



.button{



background:#D4AF37;



padding:15px 30px;



border-radius:30px;



color:black;



text-decoration:none;



font-weight:bold;



}



.about{



max-width:1000px;



margin:auto;



padding:90px 25px;



text-align:center;



}



.about h2{



margin-bottom:30px;



font-size:42px;



}



.services{



padding:50px 25px;



}



.services h2{



text-align:center;



margin-bottom:50px;



}



.cards{



display:grid;



grid-template-columns:repeat(4,1fr);



gap:25px;



}



.card{



background:#141414;



padding:30px;



border-radius:20px;



text-align:center;



}



.card h3{



font-size:45px;



}



.contact{



padding:80px 25px;



text-align:center;



max-width:800px;



margin:auto;



}



.contact h2{



margin-bottom:40px;



}



form{



display:flex;



flex-direction:column;



gap:15px;



margin-top:40px;



}



input,



select,



textarea{



padding:18px;



border:none;



border-radius:12px;



font-size:16px;



}



button{



padding:18px;



border:none;



border-radius:12px;



background:#D4AF37;



font-weight:bold;



cursor:pointer;



}



footer{



padding:50px;



text-align:center;



background:black;



}



.footer-logo{



width:90px;



margin-bottom:20px;



}



/* MOBIL */



@media(max-width:768px){



.logo{



width:90px;



}



.hero{



height:500px;



}



.hero h1{



font-size:30px;



}



.hero p{



font-size:16px;



}



.cards{



grid-template-columns:1fr;



}



.about h2,



.services h2,



.contact h2{



font-size:30px;



}



}

@media (max-width: 600px) {



    /* první obrazovka */



    .hero {



        height: 100vh;



        min-height: 600px;



    }



    /* fotka */



    .hero-image {



        width: 100%;



        height: 100%;



        object-fit: cover;



        object-position: center center;



    }



    /* ztmavení fotky */



    .overlay {



        background: rgba(0,0,0,0.65);



    }



    /* obsah doprostřed */



    .hero-content {



        width: 90%;



        margin: auto;



    }



    /* logo v hero */



    .hero-logo {



        width: 120px;



        max-width: 40%;



        margin-bottom: 20px;



    }



    /* hlavní nadpis */



    .hero h1 {



        font-size: 32px;



        line-height: 1.15;



        letter-spacing: 1px;



    }



    /* podtitulek */



    .hero p {



        font-size: 18px;



        margin: 20px 0;



    }



    /* tlačítko */



    .button {



        font-size: 15px;



        padding: 15px 25px;



    }



    /* horní logo */



    header .logo {



        width: 90px;



    }



}

@media only screen and (max-width: 600px) {



.hero {



    height: 450px !important;



}



.hero-image {



    height: 450px !important;



    width: 100% !important;



    object-fit: cover !important;



}



.hero-content {



    transform: scale(0.75) !important;

@media (max-width: 600px) {



.hero-content {



    width: 90%;



    max-width: 350px;



    margin: auto;



}



.hero h1 {



    font-size: 26px !important;



    line-height: 1.2;



    margin-bottom: 10px;



}



.hero p {



    font-size: 15px !important;



    margin: 10px 0 25px;



}



.button {



    font-size: 13px !important;



    padding: 12px 22px !important;



    white-space: nowrap;



}



}

@media (max-width: 600px) {



.hero {



    position: relative;



    display: flex;



    align-items: center;



    justify-content: center;



    overflow: hidden;



}



.hero-image {



    position: absolute;



    left: 0;



    top: 0;



    z-index: 1;



}



.overlay {



    position: absolute;



    left: 0;



    top: 0;



    z-index: 2;



}



.hero-content {



    position: relative;



    z-index: 3;



    width: 90%;



    max-width: 350px;



    text-align: center;



    margin: 0 auto;



}



}