body {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    margin: 0;
    background: #0D4029;
    color: #1a1a1a;
    min-width: 320px;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(40px, 5vw, 160px);
    box-sizing: border-box;
    position: relative;
}

.header {
    background: #0D4029;
}

.header .container{
    background: #0D4029;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px clamp(40px, 5vw, 160px);
    margin-left: auto;
    margin-right: auto;
    max-width: 1920px;
    width: 100%;
    box-sizing: border-box;
}


.header nav a {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    margin: 0 20px;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

/* Dropdown menu for Služby */
.header nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-item {
    position: relative; /* establish the positioning context for dropdown */
}

.nav-link {
    color: #fff;
    text-decoration: none;
    padding: 6px 8px;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%; /* place directly below the link to avoid hover gap */
    left: 0;
    background: #fff;
    color: #0D4029;
    min-width: 360px; /* widened per request */
    width: max-content;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    padding: 8px 0;
    display: none;
    z-index: 50;
    transform: translateY(8px); /* subtle visual offset while keeping actual hover area adjacent */
}

.header nav .dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: #0D4029; /* ensure dark text on white background (higher specificity) */
    text-decoration: none;
    font-weight: 600;
    background: transparent;
}

/* gold separators between menu items: bottom border for all but last item (no line under last) */
.header nav .dropdown-menu a:not(:last-child) {
    border-bottom: 2px solid #C7993A;
}

/* hover bg for menu items */
.header nav .dropdown-menu a:hover,
.header nav .dropdown-menu a:focus {
    background: #fff6e6; /* light warm background to match gold theme */
    color: #0D4029;
}

/* remove the animated underline (::after) from dropdown links (only top-level nav keeps it) */
.header nav .dropdown-menu a::after {
    display: none !important;
    content: none !important;
}

/* create a small invisible hover-bridge so pointer can move from the top link into the menu without closing it */
.nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* immediately under the nav-item */
    height: 10px; /* bridge height; adjust if you see flicker */
    pointer-events: auto; /* ensure it captures the pointer so the nav stays hovered */
    z-index: 40; /* behind the menu (menu has z-index 50)
                 but above page so it intercepts pointer */
}

/* show on hover or keyboard focus */
.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu {
    display: block;
}

/* small tweak: ensure hover color for top-level link when menu open */
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link {
    color: #d4a017;
}

.header nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: #C7993A;
    transition: width 0.3s ease;
}

.header nav a:hover {
    color: #d4a017;
}

.header nav a:hover::after {
    width: 100%;
}

.btn-yellow {
    background: #C7993A;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 10px 4px 20px 4px;
    display: inline-block; /* ensures padding & radius apply properly */
}

.hero {
    background: #fff url('images/hero-bg.png') no-repeat center center;
    background-size: fill;
    border-radius: 44px 0 44px 44px;
    min-height: 100vh;
}

.hero .container{
    display: flex;
    padding: 30px clamp(40px, 5vw, 160px);
    border-radius: 44px 0 44px 44px;
    min-height: 110vh;
    position: relative;
    overflow: hidden;
    max-width: 1920px;
    margin: 0 auto;
    box-sizing: border-box;
}

.hero-text {
    flex: 1;
    padding-right: 0;
    margin: 0;
    position: relative;
}

.hero-text p {
    font-family: 'Roboto', serif;
    font-weight: 300;
    font-size: 20px;
    margin-bottom: 60px;
}

.hero-img {
    position: absolute;
    left: 55px;
    top: 10vh; /* relative to viewport height */
    opacity: 0.9;
    user-select: none;
    pointer-events: none;
    z-index: 1;
}

.hero-img img {
    max-width: 100%;
    height: auto;
    -webkit-user-drag: none;
}

.hero h1 {
    color: #0D4029;
    font-size: 9vh; /* larger for hero section */
    line-height: 1;
    margin-bottom: 10px;
}

.hero .btn-yellow-hero {
    background: #C7993A;
    color: #fff;
    padding: 15px 40px;
    font-weight: 900;
    text-decoration: none;
    border-radius: 10px;
}

.italic {
    font-family: 'Playfair-display', serif;
    font-style: italic;
    font-weight: 300;
}

@media (min-width: 1921px) {
    .hero h1 {
        font-size: 80px; /* smaller than 9vh */
    }

    .hero .container {
        min-height: 900px; /* adjust for larger screens */
    }

    .hero {
        min-height: 900px;
    }

    .hero-text p {
        font-size: 18px; /* slightly smaller body text */
    }

    .hero-img {
        top: 0; /* adjust image position if needed */
        left: 70px;
    }
}

.services {
    background: #0D4029 url('images/servicebg.png') no-repeat center center;
    background-size: fill;
    position: relative;
    min-height: 900px;
}

.services .container {
    padding: 50px clamp(20px, 2vw, 100px);
    max-width: 1920px;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
}

.services h2 {
    color: #fff;
    font-size: 48px;
    margin-bottom: 40px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 300px));
    gap: 30px;
    justify-content: center;
}

/* wrapper creates the grey plate behind the card */
.card-wrap {
  position: relative;
}

.card-wrap::before {
  content: "";
  position: absolute;
  /* smaller than card and lower on Y-axis */
  top: 20px;          /* push down */
  left: 10px;
  right: 10px;
  bottom: -10px;      /* extend below */
  background: #D9D9D9;
  border-radius: 10px;
  z-index: 0;         /* behind the card */
}

/* your card */
.card {
  position: relative;
  background: #fff;
  padding: 40px 15px;
  border-radius: 10px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15); /* drop shadow */
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
    box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1; /* above the grey plate */
}

.card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    cursor: pointer;
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-link:hover .card {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}


.card-icon {
  width: 65px;
  height: 65px;
  margin-bottom: 20px;
}

.card h3 {
  font-size: 30px;
  margin: 0 0 20px 0;
  line-height: 1.2;
  font-weight: normal;
}

.service-title { font-weight: 700; }

.card p {
  width: 90%;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0;
}

/* Use a background image so the arrow scales reliably */
.card p::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: 30px auto 0;
  background: url("images/down-arrow.png") no-repeat center / contain;
  animation: bounce 1.2s infinite ease-in-out;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}

.more-services {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #C7993A; /* matches your theme */
    margin-top: 40px;  /* space above it */
    margin-bottom: 60px; /* space below it */
    cursor: pointer;
    transition: color 0.3s ease;
}

.more-services:hover {
    color: #dc9c1d; /* hover color */
}

.more-services a {
    position: relative;
    font-size: 18px;
    font-weight: 600;
    color: #C7993A;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* underline effect */
.more-services a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px; /* space below text */
    width: 0%;
    height: 2px;
    background-color: currentColor; /* uses text color */
    transition: width 0.3s ease;
}

.more-services a:hover {
    color: #dc9c1d;
}

.more-services a:hover::after {
    width: 100%;
}




.process-section {
    background: #fff;
    border-radius: 0 44px 44px 44px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 5vh;
    padding-bottom: 50px;
    position: relative;
    align-items: center;
    justify-content: space-between;
}



.process-section .container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(40px, 5vw, 160px);
    text-align: center;
}

.process-section h2 {
    color: #0D4029;
    font-size: 48px;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}

.process-container {
    display: flex;
    gap: 60px;
    width: 80%;
    max-width: 1920px;
    margin: 0 auto;
    margin-bottom: 90px;
    flex: 1;
    align-items: center; /* center vertically with the timeline */
    justify-content: center;
}

@media (min-width: 1921px) {
    .process-section {
        min-height: 900px; /* adjust for larger screens */
    }

    .process-container {
        max-height: 900px;
    }
}

.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step {
    position: relative;
    margin: 30px 0; /* condensed spacing */
    z-index: 1;
}

.step span {
    display: inline-block;
    background: #fff;
    border: 3px solid #c49a43;
    border-radius: 50%;
    padding: 20px 25px;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    z-index: 2;
}

/* Gold connecting line */
.timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10%;    /* leave 10% space at top for gradient fade */
    bottom: 10%; /* leave 10% space at bottom for gradient fade */
    width: 4px;
    background: linear-gradient(to bottom, rgba(196,154,67,0) 0%, #c49a43 15%, #c49a43 85%, rgba(196,154,67,0) 100%);
    border-radius: 2px;
    z-index: 0;
    animation: growLine 0.6s ease-out forwards;
}


/* Smooth line animation */
@keyframes growLine {
    0% {
        height: 0;
        top: 50%;
    }
    100% {
        height: 80%; /* fits within top/bottom padding */
        top: 10%;
    }
}

/* Animate each step circle when active */

.step.active span {
    background: #c49a43;
    color: #fff;
    transform: scale(1.1); /* subtle pop */
    transition: transform 0.3s ease, background 0.3s ease;
}

/* Steps content */
.steps-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* center active step vertically */
    position: relative;
    min-height: 400px;
}

.step-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    position: absolute;
    display: flex;
    align-items: center; /* vertical centering within the row */
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%); /* ensures perfect vertical centering */
}

.step-item.active {
    opacity: 1;
    transform: translateY(-50%); /* keep centered when active */
}

.step-item .text-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.step-item h2 {
    margin-bottom: 5px;
    font-size: 32px;
    color: #0D4029;
}

.step-item p {
    font-size: 18px;
    line-height: 1.5;
    color: #333;
}

.step-item img {
    max-width: 700px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Responsive tweaks */
@media (max-width: 900px) {
    .process-container { flex-direction: column; }
    .steps-content { min-height: 300px; }
}




.stats {
    margin-top: auto; /* pushes to bottom if using flex layout */
    padding: 40px 0 0;
    width: 100%;
}

.stats .container {
    display: flex;
    justify-content: center;
    gap: 150px;
    text-align: center;
    flex-wrap: wrap;
}

.stats strong {
    display: block;
    font-size: 60px;
    color: #0D4029;
    font-weight: bold;
}

.stats p {
    margin: 5px 0 0;
    font-size: 16px;
    color: #0D4029;
}


.testimonials {
  background: #0D4029 url("images/test-bg.png") no-repeat center center;
  background-size: fill; /* ensures it fills the section */
  color: white;
  padding: 60px 20px; /* remove extra 120px bottom padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  margin-bottom: 0; /* no gap before next section */
}

.testimonials-header h2 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
}

.testimonials-header p {
  max-width: 700px;
  margin: 0 auto 40px;
  font-size: 1rem;
  color: #d4d4d4;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1200px;
  width: 100%;          /* ensures it scales */
  justify-items: center; /* center grid items */
  margin: 0 auto;
}

.testimonial-card {
  background: #fff;
  color: #000;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  text-align: left;
  position: relative;
  width: 100%;
  max-width: 550px;
}

.quote-icon {
  position: absolute; /* position it relative to the card */
  top: 20px;          /* distance from top */
  left: 20px;         /* distance from left */
  font-size: 100px;   /* keep big size */
  line-height: 0.7;   /* squish vertical spacing */
  color: #000000;     /* optional: same as bg or different color */
}

.testimonial-card p {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 45px;
  margin-bottom: 15px;
}

.author {
  font-size: 0.9rem;
  color: #000000;
}

@media (max-width: 700px) {
  .testimonial-grid {
    grid-template-columns: 1fr; /* stack on small screens */
  }

  .testimonial-card {
    max-width: 100%;
  }
}




.faq {
    background: #fff;
    border-radius: 44px 0 44px 44px; /* match hero's rounded corners */
    min-height: 900px; /* optional, match hero height if desired */
    padding: clamp(40px, 5vw, 160px); /* responsive padding like container/hero */
    margin: 0 auto 50px;
    box-sizing: border-box; /* consistent with container */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* keep subtle shadow */
    width: 100%;
    margin-bottom: 0;
}

.faq-container {
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px; /* inner content width */
    margin: 0 auto;
}

.faq-title h2 {
    font-size: 80px; /* match hero h1 scale */
    line-height: 1.1;
    color: #0D4029;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 40px;
    font-family: 'Poppins', sans-serif;
}

.faq-label {
    font-size: 20px;
    color: #0D4029;
    font-weight: 500;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 0px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-item {
    border-bottom: 1px solid #ddd;
}

.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    padding: 20px 0;
    text-align: left;
    font-size: 20px; /* slightly bigger to match hero text style */
    font-weight: 600;
    color: #0D4029;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
}

.faq-toggle {
    font-size: 24px;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    font-size: 18px; /* slightly bigger for readability like hero p */
    line-height: 1.6;
    color: #333;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

.faq-item.active .faq-answer {
    max-height: 500px; /* adjust for long content */
    padding-top: 15px;
    padding-bottom: 15px;
}




/* Contact Section */
.contact-section {
    
    background: #0D4029 url('images/contact-bg.png') no-repeat center center;
    background-size: cover;
    
    border-radius: 0 0 44px 44px;
    position: relative;
    overflow: hidden;
    text-align: center;
    max-width: 1920px;
    margin: 0 auto;

    /* Center the content perfectly */
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 180px; /* adjust as needed for your design */
    padding: 30px 20px;
}

/* Content */
.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px; /* equal space between items */
    position: relative;
    z-index: 1;
}

.contact-section h2 {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 0; /* no extra gap above */
}

.contact-section p {
    font-size: 18px;
    font-weight: 200;
    color: #fff;
    margin: 4px 0 20px; /* small space above text */
}

.btn-yellow-contact {
    background: #C7993A;
    color: #fff;
    padding: 10px 60px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 800;
    transition: background 0.3s ease;
}

.btn-yellow-contact:hover {
    background: #dc9c1d;
}



.footer {
  background: #fff;
  border-radius: 44px 44px 0 0;
  color: #000;
  padding-top: 70px;
  margin: 0 auto;
  width: 100%;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1920px;
}

.newsletter h3 {
  font-size: 40px;
  margin-bottom: 5px;
}

.newsletter .highlight {
  color: #C7993A;
  font-weight: bold;
}

.newsletter-form {
  display: flex;
  margin-top: 0;
  margin-bottom: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Drop shadow */
  border-radius: 12px; /* Smooth corners for shadow */
}

.newsletter-form input {
  padding: 18px 20px; /* More height */
  border-radius: 12px 0 0 12px;
  border: none;
  background: #f4f4f4;
  flex: 1;
  font-size: 14px; /* Optional: make text look proportional */
  font-weight: 600;
}

.newsletter-form button {
  background: #0D4029;
  color: #fff;
  border: none;
  padding: 14px 20px; /* More height */
  border-radius: 0 12px 12px 0;
  cursor: pointer;
  font-size: 14px; /* Optional: match input text */
  font-weight: 600;
}

.social-icons a {
  display: inline-block;
  margin-right: 10px;
  margin-top: 20px;
}

.footer-links {
  display: flex;
  gap: 140px;
}

.footer-links h4 {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 24px;
}

.footer-links a {
  display: block;
  color: inherit;
  margin-bottom: 5px;
  text-decoration: none;
}

.footer-bottom {
  text-align: center;
  font-size: 14px;
  padding: 20px 0;
  border-top: 1px solid #eee;
  margin-top: 50px;
}

.footer-bottom a {
  color: #C7993A;
  text-decoration: none;
}