* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

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

    color:#3b2115;

    background:white;

}







/* =====================
   MENU
===================== */


header {

    position:fixed;

    width:100%;

    top:0;

    z-index:1000;

}



nav {


    height:80px;

    background:#28140b;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 70px;


}



.logo-text {


    font-family:'Playfair Display', serif;

    color:white;

    font-size:27px;

    letter-spacing:3px;

    font-weight:700;


}



.menu a {


    color:white;

    text-decoration:none;

    margin-left:40px;

    font-size:16px;

    position:relative;

    transition:.3s;


}



.menu a:hover {


    color:#d3a06a;


}




.menu a::after {


    content:"";

    position:absolute;

    width:0;

    height:2px;

    background:#d3a06a;

    bottom:-8px;

    left:0;

    transition:.3s;


}



.menu a:hover::after {


    width:100%;


}








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


.hero {


    height:100vh;


    background-image:


    linear-gradient(

        rgba(20,10,5,.65),

        rgba(20,10,5,.65)

    ),


    url("images/beans.jpg");



    background-size:cover;

    background-position:center;

    background-attachment:fixed;


    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;


    animation:backgroundMove 20s infinite alternate ease-in-out;


}

   .hero {
    position:relative;
    overflow:hidden;
}



.hero-content {


    animation:heroAppear 1.5s ease;


}



.company-logo {


    width:280px;

    margin-bottom:40px;


}




.hero h1 {


    font-family:'Playfair Display', serif;

    color:white;

    font-size:70px;

    letter-spacing:2px;

    margin-bottom:20px;


}




.hero p {


    color:white;

    font-size:21px;

    font-weight:300;


}




.hero-button {


    display:inline-block;

    margin-top:35px;

    padding:16px 45px;

    border-radius:50px;


    background:#c18b52;

    color:white;


    text-decoration:none;

    font-weight:600;

    letter-spacing:1px;


    transition:.4s;


}



.hero-button:hover {


    background:#e0b47a;

    transform:translateY(-5px);


}








@keyframes heroAppear {


    from {

        opacity:0;

        transform:translateY(50px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }


}





@keyframes backgroundMove {


    from {

        background-size:100%;

    }


    to {

        background-size:110%;

    }


}









/* =====================
   SPOLEČNÉ SEKCE
===================== */


.about,
.services,
.contact {


    background:white;

    color:#3b2115;

    padding:120px 10%;


}



h2 {


    font-family:'Playfair Display', serif;

    text-align:center;

    color:#3b2115;

    font-size:52px;

    margin-bottom:60px;

    letter-spacing:2px;


}








/* =====================
   O NÁS
===================== */


.about-content {


    display:flex;

    align-items:center;

    gap:60px;


}



.text {


    flex:1;

    font-size:18px;

    line-height:1.9;


}



.text p {


    margin-bottom:25px;


}




.gallery {


    flex:1;

    display:flex;

    justify-content:center;

}



.gallery img {


    width:45%;

    margin:10px;

    border-radius:20px;


    box-shadow:

    0 20px 40px rgba(0,0,0,.15);


    transition:.5s;


}



.gallery img:hover {


    transform:translateY(-12px) scale(1.04);


}










/* =====================
   SLUŽBY
===================== */


.services {


    background:white;


}



.service-container {


    display:flex;

    gap:35px;

    justify-content:center;


}



.service-card {


    background:#28140b;

    color:white;


    padding:40px 30px;

    border-radius:20px;


    flex:1;

    text-align:center;


    box-shadow:

    0 20px 40px rgba(0,0,0,.25);


    transition:.5s;


}



.service-card:hover {


    transform:translateY(-15px);


}



.service-card h3 {


    font-family:'Playfair Display', serif;

    color:white;

    font-size:28px;

    margin-bottom:20px;


}



.service-card p {


    line-height:1.7;

}









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


.contact {


    text-align:center;


}



.contact-box {


    font-size:20px;

    line-height:1.9;


}










/* =====================
   ANIMACE PŘI SCROLLU
===================== */


.hidden {


    opacity:0;

    transform:translateY(60px);


    transition:

    opacity .8s ease,

    transform .8s ease;


}



.show {


    opacity:1;

    transform:translateY(0);


}










/* =====================
   FOOTER
===================== */


footer {


    background:#1b0c06;

    color:white;


    padding:35px;

    text-align:center;

    font-size:14px;


}



footer p:first-child {


    margin-bottom:10px;


}







/* =====================
   MOBIL
===================== */


@media(max-width:900px){


nav {

    padding:0 25px;

}



.logo-text {

    font-size:18px;

}



.menu a {

    margin-left:15px;

    font-size:13px;

}



.hero h1 {

    font-size:45px;

}



.about-content {


    flex-direction:column;


}



.service-container {


    flex-direction:column;


}



.gallery img {


    width:90%;


}



}

.logo-container {

    text-align:left;

}



.logo-subtitle {

    color:#d3a06a;

    font-size:11px;

    letter-spacing:3px;

    margin-top:6px;

    font-weight:500;

}

/* =====================
   ZUBATÝ PŘECHOD HERO
===================== */


.hero::after {

    content:"";

    position:absolute;

    bottom:-1px;

    left:0;

    width:100%;

    height:90px;

    background:white;


    clip-path: polygon(
    0 63%,
    2% 68%,
    5% 81%,
    8% 73%,
    11% 57%,
    14% 77%,
    18% 69%,
    21% 84%,
    24% 61%,
    28% 79%,
    31% 55%,
    36% 74%,
    40% 66%,
    43% 82%,
    47% 59%,
    51% 77%,
    54% 70%,
    58% 56%,
    63% 81%,
    67% 65%,
    71% 86%,
    74% 60%,
    79% 73%,
    83% 58%,
    88% 80%,
    91% 69%,
    95% 83%,
    98% 61%,
    100% 66%,
    100% 100%,
    0 100%
);

}

/* =====================
   ZUBATÝ PŘECHOD DO FOOTERU
===================== */


footer {

    position:relative;

    overflow:hidden;

    padding-top:100px;

}



footer::before {

    content:"";

    position:absolute;

    top:-1px;

    left:0;

    width:100%;

    height:90px;

    background:white;


    clip-path: polygon(
    0 0,
    100% 0,

    100% 34%,
    98% 40%,
    95% 18%,
    91% 31%,
    88% 15%,
    84% 43%,
    80% 26%,
    77% 48%,
    73% 21%,
    69% 39%,
    65% 17%,
    61% 46%,
    57% 29%,
    53% 14%,
    49% 37%,
    45% 20%,
    41% 44%,
    36% 24%,
    32% 50%,
    28% 19%,
    24% 41%,
    20% 23%,
    16% 47%,
    12% 18%,
    8% 36%,
    5% 14%,
    2% 33%,
    0 40%
);

}

/* =====================
   LOADING SCREEN
===================== */


.loader {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    background:#000;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:opacity 1s ease, visibility 1s ease;

}



.loader.hide {

    opacity:0;

    visibility:hidden;

}




.loader-content {

    text-align:center;

    animation:loaderAppear 1.5s ease;

}



.loader-title {

    color:white;

    font-family:'Playfair Display', serif;

    font-size:35px;

    letter-spacing:5px;

}



.loader-subtitle {

    margin-top:12px;

    color:#c18b52;

    font-size:11px;

    letter-spacing:4px;

}





@keyframes loaderAppear {


from {

    opacity:0;

    transform:translateY(20px);

}


to {

    opacity:1;

    transform:translateY(0);

}


}


@media (max-width: 900px) {

  nav {
    padding: 0 18px;
    height: auto;
    min-height: 72px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .logo-text {
    font-size: 17px;
    letter-spacing: 1.5px;
    line-height: 1.1;
  }

  .logo-subtitle {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .menu {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .menu a {
    margin-left: 0;
    font-size: 13px;
  }

  .hero {
    background-attachment: scroll;
    min-height: 100vh;
    padding: 120px 18px 70px;
  }

  .company-logo {
    width: 180px;
    margin-bottom: 24px;
  }

  .hero h1 {
    font-size: 38px;
    line-height: 1.1;
  }

  .hero p {
    font-size: 16px;
    max-width: 100%;
  }

  .hero-button {
    padding: 14px 26px;
    font-size: 14px;
  }

  .about,
  .services,
  .contact {
    padding: 80px 18px;
  }

  h2 {
    font-size: 34px;
    margin-bottom: 30px;
  }

  .about-content {
    flex-direction: column;
    gap: 28px;
  }

  .text {
    font-size: 16px;
    line-height: 1.8;
  }

  .gallery {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .gallery img {
    width: 100%;
    max-width: 420px;
  }

  .service-container {
    flex-direction: column;
    gap: 18px;
  }

  .service-card {
    padding: 28px 22px;
  }

  .service-card h3 {
    font-size: 24px;
  }

  .contact-box {
    font-size: 16px;
    line-height: 1.8;
  }

  footer {
    padding: 28px 18px;
    font-size: 12px;
  }

  .hero::after,
  footer::before {
    height: 50px;
  }
}

.hero {
  background-attachment: fixed;
}

.contact-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 30px;

    width: 425px; /* společná šířka pro zarovnání textu */
    margin: 5px 0;
}

.contact-item img {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

.concept-notice {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 9999;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
    background-color: #1e1e1e;
    color: #d6d0c4;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    border-bottom: 1px solid rgba(198, 164, 94, 0.35);
}

.concept-label {
    color: #c6a45e;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .concept-notice {
        gap: 6px;
        padding: 12px 16px;
        font-size: 12px;
    }
}