/* RESET */



/* ==========================

   RESET

========================== */



*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    background:#0f0f0f;

    color:#fff;

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

}



main{

    margin-top:90px;

}



.container{

    width:min(1300px,92%);

    margin:auto;

}



/* ==========================

   HERO

========================== */



.hero{



    position:relative;



    min-height:100vh;



    display:flex;

    justify-content:center;

    align-items:center;



    text-align:center;



    background-image:url("../images/hero.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;



    overflow:hidden;



}



.hero-overlay{



    position:absolute;

    inset:0;



    background:linear-gradient(

        rgba(0,0,0,.65),

        rgba(0,0,0,.45)

    );



}



.hero::after{



    content:"";



    position:absolute;



    width:700px;

    height:700px;



    right:-180px;

    top:50%;



    transform:translateY(-50%);



    background:radial-gradient(

        circle,

        rgba(50,140,255,.25),

        transparent 70%

    );



    pointer-events:none;



}



.hero-content{



    position:relative;

    z-index:2;



    max-width:900px;



    padding:20px;



}



.hero h1{



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



    font-size:clamp(46px,6vw,74px);



    font-weight:700;



    line-height:1.08;



    letter-spacing:-1px;



    text-transform:none;



    margin-bottom:20px;





}



.hero-text{



    font-size:clamp(24px,3vw,42px);



    margin-bottom:18px;



}



.subtitle{



    max-width:800px;



    margin:25px auto 60px;



    color:#d0d0d0;



    font-size:clamp(20px,2vw,28px);



    line-height:1.5;





}



.hero-buttons{



    display:flex;



    justify-content:center;



    gap:20px;



    flex-wrap:wrap;



}



/* ==========================

   BUTTONS

========================== */



.btn-gold{



    display:inline-block;



    padding:18px 36px;



    border-radius:50px;



    text-decoration:none;



    font-weight:bold;



    background:#d4af37;



    color:#111;



    transition:.35s;



}



.btn-gold:hover{



    transform:translateY(-5px);



    box-shadow:0 15px 35px rgba(212,175,55,.35);



}



.btn-transparent{



    display:inline-block;



    padding:18px 36px;



    border-radius:50px;



    border:2px solid white;



    text-decoration:none;



    color:white;



    transition:.35s;



}



.btn-transparent:hover{



    background:white;



    color:#111;



}



/* ==========================

   FEATURES

========================== */



.features{



    padding:110px 0;



    background:#111;



}



.features h2{



    text-align:center;



    font-size:46px;



    color:#FFC62B;



    margin-bottom:70px;



}



.features-grid{



    display:grid;



    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));



    gap:35px;



}



.feature-card{



    background:linear-gradient(180deg,#1a1a1a,#101010);



    border:1px solid rgba(255,255,255,.08);



    border-radius:20px;



    padding:35px 30px;



    text-align:center;



    transition:.35s;

    

    min-height:220px;



}



.feature-card:hover{



    transform:translateY(-10px);



    border-color:#FFC62B;



    box-shadow:

        0 20px 40px rgba(0,0,0,.45),

        0 0 25px rgba(212,175,55,.18);

    

    background:#1d1d1d;



}

      



.feature-card i{



    width:90px;



    height:90px;



    margin:0 auto 30px;



    display:flex;



    align-items:center;



    justify-content:center;



    border-radius:50%;



    font-size:34px;



    color:#FFC62B;



    border:1px solid rgba(255,198,43,.35);



    background:#1b1b1b;

    box-shadow:0 0 25px rgba(255,198,43,.12);



}



.feature-card h3{



    font-size:24px;



    margin-bottom:18px;



    color:white;



}



.feature-card p{



    color:#bfbfbf;



    line-height:1.8;



    font-size:16px;



}

/* ==========================

   VOZOVÝ PARK

========================== */



.fleet{



    padding:120px 0;



    background:#0b0b0b;



}



.fleet h2{



    text-align:center;



    color:#FFC62B;



    font-size:46px;



    margin-bottom:25px;



}



.fleet-intro{



    text-align:center;



    color:#bfbfbf;



    max-width:850px;



    margin:0 auto 70px;



    line-height:1.8;



    font-size:18px;



}



.fleet-grid{



    display:grid;



    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));



    gap:40px;



}



.fleet-card{



    overflow:hidden;



    border-radius:22px;



    background:#171717;



    border:1px solid rgba(255,255,255,.08);



    transition:.35s;



}



.fleet-card:hover{



    transform:translateY(-10px);



    box-shadow:0 20px 45px rgba(0,0,0,.45);



}



.fleet-card img{



    width:100%;



    height:220px;



    object-fit:cover;



    display:block;



    border-radius:20px 20px 0 0;





}



.fleet-content{



    padding:35px;



}



.fleet-content h3{



    color:#FFC62B;



    font-size:30px;



    margin-bottom:18px;



}



.fleet-content p{



    color:#c9c9c9;



    line-height:1.8;



}

/* ===================== CENNÍK ===================== */



.pricing{

    padding:120px 0;

    background:#111;

}



.pricing h2{

    text-align:center;

    font-size:52px;

    color:#ffc52f;

    margin-bottom:20px;

}



.pricing-intro{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

    color:#bdbdbd;

    font-size:20px;

}



.pricing-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    margin-bottom:70px;

}



.price-card{

    background:#1b1b1b;

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:45px;

    text-align:center;

    transition:.35s;

}



.price-card:hover{

    transform:translateY(-8px);

    border-color:#ffc52f;

    box-shadow:0 20px 40px rgba(0,0,0,.45);

}



.price-card i{

    font-size:46px;

    color:#ffc52f;

    margin-bottom:25px;

}



.price-card h3{

    font-size:30px;

    margin-bottom:20px;

}



.price{

    font-size:54px;

    font-weight:700;

    color:#ffc52f;

    margin-bottom:20px;

}



.price span{

    font-size:22px;

    color:#ddd;

}



.price-card p{

    color:#cfcfcf;

    line-height:1.8;

}



.pricing-info{

    background:#1b1b1b;

    border-radius:22px;

    padding:60px;

    text-align:center;

}



.pricing-info h3{

    font-size:34px;

    margin-bottom:20px;

}



.pricing-info p{

    max-width:800px;

    margin:0 auto 35px;

    color:#c8c8c8;

    line-height:1.8;

}



.phone-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-bottom:40px;

}



.phone-grid a{

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:15px;

    padding:18px;

    color:#fff;

    text-decoration:none;

    font-size:20px;

    transition:.3s;

}



.phone-grid a:hover{

    border-color:#ffc52f;

    color:#ffc52f;

}

/* ===================== RECENZIE ===================== */



.reviews{

    padding:120px 0;

    background:#0d0d0d;

}



.reviews h2{

    text-align:center;

    font-size:52px;

    color:#ffc52f;

    margin-bottom:20px;

}



.reviews-intro{

    text-align:center;

    color:#c8c8c8;

    max-width:700px;

    margin:0 auto 70px;

    font-size:20px;

}



.reviews-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}



.review-card{

    background:#1b1b1b;

    padding:40px;

    border-radius:22px;

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}



.review-card:hover{

    transform:translateY(-8px);

    border-color:#ffc52f;

}



.stars{

    color:#ffc52f;

    font-size:26px;

    margin-bottom:20px;

    letter-spacing:4px;

}



.review-card p{

    color:#d0d0d0;

    line-height:1.8;

    margin-bottom:30px;

}



.review-card h4{

    color:#fff;

    font-size:20px;

}

/* ==========================

   CTA

========================== */



.cta{



    padding:70px 0 50px;



    text-align:center;



    background:#101010;



    border-top:1px solid rgba(255,255,255,.08);



}

.cta h2{

    margin-bottom:15px;

}

.cta p{

    margin-bottom:30px;

}

.footer-phones{



    display:grid;



    grid-template-columns:repeat(2,max-content);



    justify-content:center;



    gap:15px 70px;



    margin:35px 0;





}

footer{



    text-align:center;



}

footer hr{



    width:100%;

    max-width:900px;



    height:1px;



    border:none;



    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,196,0,.65),

        rgba(70,140,255,.75),

        rgba(255,196,0,.65),

        transparent

    );



    margin:45px auto 20px;



}

footer h3{



    font-size:2rem;



    font-weight:700;



    letter-spacing:2px;



    margin-bottom:10px;



}

footer h3 span{



    color:#4b8dff;



}

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



.page-header{



    position:relative;



    min-height:520px;



    display:flex;

    align-items:center;

    justify-content:center;



    text-align:center;



    padding:140px 20px 80px;



    background:

        linear-gradient(to right,

            rgba(0,0,0,.85) 0%,

            rgba(0,0,0,.70) 35%,

            rgba(0,0,0,.45) 65%,

            rgba(0,0,0,.15) 100%),

        url("../images/contact-bg.png");



    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;



    overflow:hidden;



}



.page-header h1{

    font-size:72px;

    font-weight:800;

    color:#fff;

    margin-bottom:20px;

}



.page-header p{

    max-width:650px;

    margin:0 auto;

    text-align:center;

    color:#ddd;

    font-size:24px;

    line-height:1.6;

}

.page-header .container{

    position:relative;

    z-index:2;

    width:100%;

    text-align:center;

}

.section-tag{

    display:inline-block;

    margin-bottom:20px;



    color:#ffc107;

    font-size:18px;

    font-weight:700;

    letter-spacing:3px;

}



/* ===== KONTAKT ===== */



.contact-section{

    padding:80px 20px;

}



.contact-grid{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:50px;

    align-items:start;

}



.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}



.contact-card{

    background:#171717;

    border:1px solid rgba(255,193,7,.2);

    border-radius:18px;

    padding:30px;

    transition:.3s;

}



.contact-card:hover{

    transform:translateY(-8px);

    border-color:#ffc107;

}



.contact-card i{

    color:#ffc107;

    font-size:38px;

    margin-bottom:20px;

}



.contact-card h3{

    color:#fff;

    margin-bottom:15px;

}



.contact-card p,

.contact-card a{

    color:#d5d5d5;

    text-decoration:none;

    line-height:1.8;

}



.contact-form{

    background:#171717;

    padding:45px;

    border-radius:20px;

}



.contact-form h2{

    color:#fff;

    margin-bottom:10px;

}



.contact-form p{

    color:#bbb;

    margin-bottom:30px;

}



.contact-form input,

.contact-form textarea{

    width:100%;

    background:#252525;

    color:#fff;

    border:none;

    border-radius:12px;

    padding:18px;

    margin-bottom:18px;

    font-size:16px;

}



.contact-form textarea{

    min-height:220px;

    resize:vertical;

}



.contact-form input:focus,

.contact-form textarea:focus{

    outline:2px solid #ffc107;

}



.contact-form button{

    width:100%;

}

/* ==========================

   ĎAKUJEME

========================== */



.thank-you{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(rgba(10,10,15,.88),rgba(10,10,15,.88)),

    url("../image/contact-bg.png");



    background-size:cover;

    background-position:center;

    padding:40px;

}



.thank-you-box{



    max-width:650px;

    width:100%;



    background:#171717;



    border:1px solid rgba(255,193,7,.35);



    border-radius:20px;



    text-align:center;



    padding:70px 50px;



    box-shadow:0 25px 60px rgba(0,0,0,.45);



}



.thank-you-box i{



    font-size:70px;



    color:#ffc107;



    margin-bottom:25px;



}



.thank-you-box h1{



    font-size:48px;



    color:white;



    margin-bottom:20px;



}



.thank-you-box p{



    color:#cfcfcf;



    font-size:20px;



    line-height:1.8;



    margin-bottom:10px;



}



.thank-you-box .btn-primary{



    margin-top:35px;



    display:inline-block;



}

.contact-form input[type="submit"]{

    width:100%;

    height:70px;

    margin-top:30px;



    border:none;

    border-radius:18px;



    background:linear-gradient(180deg,#ffcb33,#f2b300);

    color:#111;



    font-size:28px;

    font-weight:700;

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



    cursor:pointer;

    transition:.3s;

    box-shadow:0 8px 25px rgba(255,190,0,.25);

}



.contact-form input[type="submit"]:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(255,190,0,.45);

}.contact-btn{

    width:100%;

    height:72px;



    margin-top:30px;



    border:none;

    border-radius:18px;



    background:linear-gradient(180deg,#ffd34d,#f2b300);



    color:#111;



    font-size:24px;

    font-weight:700;

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



    cursor:pointer;



    transition:.3s;



    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;



    box-shadow:0 10px 30px rgba(255,193,7,.30);

}



.contact-btn:hover{



    transform:translateY(-3px);



    box-shadow:0 18px 40px rgba(255,193,7,.45);



}



.contact-btn:active{



    transform:scale(.98);



}

.page-header{



    position:relative;



    min-height:620px;



    display:flex;

    align-items:center;



    background:

        linear-gradient(

            to right,

            rgba(0,0,0,.88) 0%,

            rgba(0,0,0,.70) 45%,

            rgba(0,0,0,.35) 100%

        ),

        url("images/obe.jpg");



    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;



}

/* ===================================================

   O NÁS

=================================================== */



.about{



    padding:120px 0;

    background:#111;



}



.about-content{



    display:grid;

    grid-template-columns:1fr;

    gap:60px;



}



.about-text h2{



    font-size:48px;

    color:#FFC62B;

    margin-bottom:30px;



}



.about-text p{



    color:#d2d2d2;

    line-height:1.9;

    font-size:18px;

    margin-bottom:25px;



}



.about-list{



    list-style:none;

    margin-top:40px;



}



.about-list li{



    display:flex;

    align-items:center;

    gap:15px;



    margin-bottom:20px;



    color:#fff;



    font-size:20px;



}



.about-list i{



    color:#FFC62B;

    font-size:22px;



}







/* ===================================================

   PREČO MY

=================================================== */



.why-us{



    padding:120px 0;

    background:#0c0c0c;



}



.why-us h2{



    text-align:center;

    color:#FFC62B;

    font-size:48px;

    margin-bottom:25px;



}







/* ===================================================

   CTA

=================================================== */



.cta{



    padding:100px 0;

    text-align:center;

    background:#111;



}



.cta h2{



    font-size:52px;

    color:#fff;

    margin-bottom:20px;



}



.cta p{



    color:#cfcfcf;

    max-width:700px;

    margin:0 auto 50px;

    line-height:1.8;

    font-size:20px;



}







/* ===================================================

   MODAL TELEFÓN

=================================================== */



.phone-modal{



    display:none;



    position:fixed;



    inset:0;



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



    backdrop-filter:blur(8px);



    justify-content:center;



    align-items:center;



    z-index:99999;



}



.phone-box{



    position:relative;



    width:min(430px,92%);



    background:#181818;



    border:1px solid rgba(255,198,43,.35);



    border-radius:22px;



    padding:45px;



    text-align:center;



    box-shadow:0 25px 60px rgba(0,0,0,.55);





}



.phone-box h2{



    color:#FFC62B;



    font-size:34px;



    margin-bottom:15px;



}



.phone-box p{



    color:#bdbdbd;



    margin-bottom:30px;



}



.phone-box a{



    display:block;



    text-decoration:none;



    color:white;



    background:#252525;



    padding:18px;



    margin:15px 0;



    border-radius:15px;



    transition:.35s;



    font-size:22px;



    font-weight:600;



}



.phone-box a:hover{



    background:#FFC62B;



    color:#111;



    transform:translateY(-3px);



}



.close-phone{



    position:absolute;



    margin-top:-20px;



    right:25px;



    cursor:pointer;



    font-size:36px;



    color:white;



}







/* ===================================================

   HERO O NÁS

=================================================== */



.page-header{



    position:relative;



    min-height:650px;



    display:flex;



    align-items:center;



    background:

    linear-gradient(

        to right,

        rgba(0,0,0,.88),

        rgba(0,0,0,.55)

    ),

    url("../images/obe.jpg");



    background-size:cover;



    background-position:center;



    background-repeat:no-repeat;



}



.page-header h1{



    font-size:78px;



    color:white;



    margin-bottom:20px;



}



.page-header p{



    font-size:28px;



    color:#ddd;



    max-width:650px;



    line-height:1.6;



}



.section-tag{



    display:inline-block;



    color:#FFC62B;



    letter-spacing:4px;



    margin-bottom:20px;



    font-weight:700;



}

/* ===================================================

   SLUŽBY - HERO

=================================================== */



.services-hero{



    position:relative;



    min-height:650px;



    display:flex;

    align-items:center;



    background:

    linear-gradient(

        to right,

        rgba(0,0,0,.92) 0%,

        rgba(0,0,0,.75) 40%,

        rgba(0,0,0,.35) 100%

    ),

    url("../images/obec.jpg");



    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;



}



.services-hero h1{



    font-size:78px;

    color:#fff;

    margin-bottom:25px;



}



.services-hero p{



    max-width:650px;



    font-size:26px;



    color:#d8d8d8;



    line-height:1.7;



    margin-bottom:45px;



}





/* ===================================================

   HLAVNÉ SLUŽBY

=================================================== */



.services{



    padding:120px 0;



    background:#111;



}



.services h2{



    text-align:center;



    font-size:52px;



    color:#FFC62B;



    margin-bottom:20px;



}



.services-grid{



    display:grid;



    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));



    gap:35px;



    margin-top:70px;



}



.service-card{



    background:linear-gradient(180deg,#1a1a1a,#111);



    border:1px solid rgba(255,255,255,.08);



    border-radius:22px;



    padding:45px;



    text-align:center;



    transition:.35s;



}



.service-card:hover{



    transform:translateY(-10px);



    border-color:#FFC62B;



    box-shadow:0 20px 45px rgba(0,0,0,.45);



}



.service-card i{



    width:90px;

    height:90px;



    margin:0 auto 30px;



    display:flex;

    justify-content:center;

    align-items:center;



    border-radius:50%;



    font-size:34px;



    color:#FFC62B;



    background:#1b1b1b;



    border:1px solid rgba(255,198,43,.35);



}



.service-card h3{



    font-size:28px;



    margin-bottom:20px;



}



.service-card p{



    color:#cfcfcf;



    line-height:1.8;



}





/* ===================================================

   PREČO MY

=================================================== */



.why-services{



    padding:120px 0;



    background:#0d0d0d;



}



.why-services h2{



    text-align:center;



    font-size:50px;



    color:#FFC62B;



    margin-bottom:20px;



}



.why-grid{



    display:grid;



    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));



    gap:30px;



    margin-top:70px;



}



.why-card{



    background:#181818;



    border-radius:20px;



    padding:40px;



    text-align:center;



    border:1px solid rgba(255,255,255,.08);



    transition:.35s;



}



.why-card:hover{



    transform:translateY(-8px);



    border-color:#FFC62B;



}



.why-card i{



    font-size:40px;



    color:#FFC62B;



    margin-bottom:25px;



}



.why-card h3{



    margin-bottom:18px;



}



.why-card p{



    color:#cfcfcf;



    line-height:1.8;



}





/* ===================================================

   3 KROKY

=================================================== */



.how-it-works{



    padding:120px 0;



    background:#111;



}



.how-it-works h2{



    text-align:center;



    font-size:52px;



    color:#FFC62B;



    margin-bottom:20px;



}



.steps-grid{



    display:grid;



    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));



    gap:35px;



    margin-top:70px;



}



.step-card{



    position:relative;



    background:#181818;



    border-radius:22px;



    padding:50px 40px;



    text-align:center;



    border:1px solid rgba(255,255,255,.08);



    transition:.35s;



}



.step-card:hover{



    transform:translateY(-10px);



    border-color:#FFC62B;



}



.step-number{



    position:absolute;



    top:-20px;



    left:50%;



    transform:translateX(-50%);



    width:45px;



    height:45px;



    border-radius:50%;



    background:#FFC62B;



    color:#111;



    display:flex;



    justify-content:center;



    align-items:center;



    font-weight:700;



    font-size:22px;



}



.step-card i{



    font-size:46px;



    color:#FFC62B;



    margin:25px 0;



}



.step-card h3{



    margin-bottom:18px;



    font-size:28px;



}



.step-card p{



    color:#d2d2d2;



    line-height:1.8;



}

/*==================================

VOZOVÝ PARK - HERO

==================================*/



.fleet-hero{



min-height:650px;



display:flex;



align-items:center;



background:

linear-gradient(

to right,

rgba(0,0,0,.90),

rgba(0,0,0,.65),

rgba(0,0,0,.35)

),

url("../images/obec.jpg");



background-size:cover;



background-position:center;



}



.fleet-hero h1{



font-size:76px;



color:#fff;



margin-bottom:20px;



}



.fleet-hero p{



max-width:650px;



font-size:24px;



line-height:1.7;



color:#ddd;



margin-bottom:45px;



}







/*==================================

VOZIDLÁ

==================================*/



.vehicle-section{



padding:120px 0;



background:#111;



}



.vehicle-card{



display:grid;



grid-template-columns:1.1fr 1fr;



gap:80px;



align-items:center;



}



.vehicle-image img{



width:100%;



border-radius:22px;



box-shadow:0 30px 60px rgba(0,0,0,.45);



filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));



}



.vehicle-type{



display:inline-block;



padding:8px 18px;



background:#FFC62B;



color:#111;



font-weight:700;



border-radius:50px;



margin-bottom:20px;



}



.vehicle-content h2{



font-size:52px;



margin-bottom:25px;



display:block;



color:#FFC62B;

}



.vehicle-content p{



font-size:19px;



line-height:1.9;



color:#d5d5d5;



margin-bottom:35px;



}



.vehicle-badges{



display:flex;



flex-wrap:wrap;



gap:15px;



margin-bottom:40px;



}



.vehicle-badges span{



padding:12px 18px;



border-radius:50px;



background:#1b1b1b;



border:1px solid rgba(255,198,43,.30);



color:#fff;



}



.vehicle-badges i{



color:#FFC62B;



margin-right:8px;



}



.vehicle-buttons{



display:flex;



gap:20px;



flex-wrap:wrap;



}

.vehicle-card.reverse{



    grid-template-columns:1fr 1.1fr;



}



.vehicle-card.reverse .vehicle-content{



    order:1;



}



.vehicle-card.reverse .vehicle-image{



    order:2;



}



.electric{



    background:#1fb7ff;



    color:#fff;



}

/* =====================================================

   HERO - CENNÍK

===================================================== */



.page-header{

    position:relative;

    height:430px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;



    background:

    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),

    url("../images/c3.png") center center/cover no-repeat;

}



.page-header .container{

    position:relative;

    z-index:2;

    max-width:900px;

    padding:0 20px;

}



.page-header h1{

    margin:0;

    font-size:72px;

    font-weight:800;

    letter-spacing:2px;

    color:#fff;

    text-transform:uppercase;

}



.page-header p{

    margin-top:18px;

    font-size:22px;

    color:#f2f2f2;

}







/* =====================================================

   CENNÍK

===================================================== */



.pricing{

    padding:45px 0 35px;

}



.pricing-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:24px;

}



.price-card{



    background:#1b1b1b;



    border:1px solid rgba(255,198,43,.15);



    border-radius:16px;



    padding:26px;



    text-align:center;



    transition:.35s ease;

}



.price-card:hover{



    transform:translateY(-6px);



    border-color:#ffc62b;



    box-shadow:0 18px 35px rgba(0,0,0,.30);



}



.price-card i{



    font-size:30px;



    color:#ffc62b;



    margin-bottom:18px;



}



.price-card h2{



    font-size:24px;



    font-weight:700;



    margin:0 0 18px;



    color:#fff;



}



.price{



    font-size:56px;



    font-weight:800;



    line-height:1;



    color:#ffc62b;



    margin-bottom:12px;



}



.price span{



    display:block;



    margin-top:8px;



    font-size:17px;



    color:#bdbdbd;



}



.price-card p{



    margin:16px 0 0;



    font-size:15px;



    line-height:1.6;



    color:#d8d8d8;



}







/* =====================================================

   SPÔSOBY PLATBY

===================================================== */



.payment-section{



    padding:45px 0;



    background:#111;



}



.payment-section h2{



    text-align:center;



    margin-bottom:35px;



}



.payment-grid{



    display:grid;



    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));



    gap:24px;



}



.payment-card{



    background:#1b1b1b;



    border:1px solid rgba(255,198,43,.15);



    border-radius:16px;



    padding:22px;



    text-align:center;



    transition:.35s ease;



}



.payment-card:hover{



    transform:translateY(-6px);



    border-color:#ffc62b;



    box-shadow:0 18px 35px rgba(0,0,0,.30);



}



.payment-card i{



    font-size:30px;



    color:#ffc62b;



    margin-bottom:15px;



}



.payment-card h3{



    margin:0 0 12px;



    font-size:22px;



    color:#fff;



}



.payment-card p{



    margin:0;



    font-size:15px;



    line-height:1.6;



    color:#d8d8d8;



}







/* =====================================================

   CTA

===================================================== */



.contact-strip{



    padding:55px 0;



    text-align:center;



}



.contact-strip h2{



    margin-bottom:15px;



}



.contact-strip p{



    max-width:650px;



    margin:0 auto 28px;



    color:#d8d8d8;



}

/* ==========================================

   REZERVÁCIA

========================================== */



.reservation-section{

    padding:70px 0;

    background:#111;

}



.reservation-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:35px;

    align-items:start;

}



/* ==========================================

   FORMULÁR

========================================== */



.reservation-form{



    background:#1a1a1a;



    border:1px solid rgba(255,198,43,.15);



    border-radius:18px;



    padding:35px;



    box-shadow:0 20px 45px rgba(0,0,0,.35);



}



.form-group{



    margin-bottom:24px;



}



.form-group label{



    display:block;



    color:#fff;



    font-size:15px;



    font-weight:600;



    margin-bottom:10px;



}



.form-group label i{



    color:#ffc62b;



    margin-right:8px;



}



.form-group input,

.form-group textarea{



    width:100%;



    background:#242424;



    border:1px solid #333;



    border-radius:12px;



    padding:15px 18px;



    color:#fff;



    font-size:16px;



    transition:.3s;



}



.form-group textarea{



    resize:vertical;



    min-height:130px;



}



.form-group input:focus,

.form-group textarea:focus{



    outline:none;



    border-color:#ffc62b;



    box-shadow:0 0 15px rgba(255,198,43,.15);



}



.form-group input::placeholder,

.form-group textarea::placeholder{



    color:#888;



}





/* ==========================================

   DVA STĹPCE

========================================== */



.double{



    display:grid;



    grid-template-columns:1fr 1fr;



    gap:20px;



}





/* ==========================================

   PLATBA

========================================== */



.payment-options{



    display:flex;



    flex-direction:column;



    gap:15px;



    margin-top:20px;



}



.payment-options label{



    display:flex;



    align-items:center;



    gap:12px;



    padding:18px;



    background:#242424;



    border:1px solid #333;



    border-radius:12px;



    cursor:pointer;



    transition:.3s;



    color:#fff;



}



.payment-options label:hover{



    border-color:#ffc62b;



    background:#2c2c2c;



}



.payment-options input{



    accent-color:#ffc62b;



}





/* ==========================================

   SÚHRN

========================================== */



.summary-card{



    position:sticky;



    top:30px;



    background:#1a1a1a;



    border:1px solid rgba(255,198,43,.18);



    border-radius:18px;



    padding:30px;



    box-shadow:0 20px 45px rgba(0,0,0,.35);



}



.summary-card h2{



    text-align:center;



    color:#fff;



    margin-bottom:30px;



}



.summary-card h2 i{



    color:#ffc62b;



    margin-right:10px;



}



.summary-row{



    display:flex;



    justify-content:space-between;



    align-items:center;



    padding:12px 0;



    color:#ddd;



    font-size:16px;



}



.summary-row strong{



    color:#fff;



}



.summary-card hr{



    border:none;



    border-top:1px solid #333;



    margin:20px 0;



}





/* ==========================================

   CENA

========================================== */



.summary-price{



    text-align:center;



    margin:25px 0;



}



.summary-price span{



    display:block;



    color:#bbb;



    margin-bottom:8px;



}



.summary-price h3{



    margin:0;



    font-size:52px;



    color:#ffc62b;



    font-weight:800;



}





/* ==========================================

   INFO

========================================== */



.info-box{



    margin:30px 0;



    background:#242424;



    border-left:4px solid #ffc62b;



    border-radius:12px;



    padding:18px;



    display:flex;



    gap:15px;



    align-items:flex-start;



}



.info-box i{



    color:#ffc62b;



    font-size:20px;



    margin-top:2px;



}



.info-box p{



    margin:0;



    color:#d8d8d8;



    font-size:14px;



    line-height:1.7;



}





/* ==========================================

   TLAČIDLO

========================================== */



.btn-main{



    width:100%;



    border:none;



    background:#ffc62b;



    color:#111;



    font-size:18px;



    font-weight:700;



    padding:18px;



    border-radius:12px;



    cursor:pointer;



    transition:.3s;



}



.btn-main:hover{



    background:#ffcf4d;



    transform:translateY(-2px);



    box-shadow:0 10px 25px rgba(255,198,43,.35);



}





/* ==========================================

   MOBIL

========================================== */



@media(max-width:992px){



    .reservation-grid{



        grid-template-columns:1fr;



    }



    .summary-card{



        position:relative;



        top:auto;



    }



}



@media(max-width:600px){



    .double{



        grid-template-columns:1fr;



    }



    .reservation-form{



        padding:25px;



    }



    .summary-card{



        padding:25px;



    }



    .summary-price h3{



        font-size:42px;



    }



}

@media (max-width:768px){



    .page-header{



        min-height:420px;

        padding:120px 20px 60px;



    }



    .page-header h1{



        font-size:42px;



    }



    .page-header p{



        font-size:19px;

        max-width:100%;



    }



    .section-tag{



        font-size:16px;

        letter-spacing:2px;



    }



}