*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    line-height: 1.6;

    color: #461220;

    background-color: #f7f9fc;

}



.container {

    width: min(1100px, 90%);

    margin: 0 auto;

}



header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background-color: #B23A48;

    color: #fcf7f7;

}



.site-title {

    font-size: 1.5rem;

    font-weight: 700;

}



header .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 1rem 0;

}



.menu {

    list-style: none;

    display: flex;

    gap: 1.5rem;

}



.menu a {

    text-decoration: none;

    color: #fcf7f7;

    font-weight: 500;

    transition: color 0.2s ease;

}



.menu a:hover {

    color: #461220;

}



section {

    padding: 4rem 0;

    background: #ffffff;

    scroll-margin-top: 90px;

}



section:nth-of-type(even) {

    background: #f1f5f9;

}



section header {

    margin-bottom: 1.5rem;

}



h2 {

    border-bottom: 2px solid #8C2F39;

    color: #B23A48;

    font-size: 2rem;

    margin-bottom: 2rem;

    padding-bottom: 0.5rem;

    text-align: center;

    width: 100%;

}



.subtitle {

    color: #461220;

    font-size: 1.2rem;

    text-align: center;

    max-width: none;

}



p {

    margin: 0 auto 1.2rem auto;

    max-width: 65ch;

    text-align: center;

}



p:last-child {

    margin-bottom: 0;

}



.hero {

    text-align: center;

}



.hero-title {

    font-size: 3rem;

    font-weight: 800;

    color: #B23A48;

    margin-bottom: 0.5rem;

    border-bottom: 2px solid #8C2F39;

    text-align: center;

    margin-right: 20%;

    margin-left: 20%;

}



.hero-slider {

    position: relative;

    width: 100%;

    max-width: 800px;

    height: 450px;

    margin: 2.5rem auto 0 auto;

    border-radius: 16px;

    overflow: hidden;

    cursor: pointer;

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

}



.hero-slider img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity 0.6s ease-in-out;

}



.hero-slider img.active {

    opacity: 1;

}



.focus-grid {

    display: grid;

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

    gap: 1.5rem;

    justify-items: center;

    text-align: center;

    margin-top: 2rem;

}



.focus-box {

    background: #ffffff;

    border-radius: 16px;

    padding: 2rem 1rem;

    width: 100%;

    max-width: 220px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

    display: flex;

    flex-direction: column;

    justify-items: center;

    text-align: center;

}



.focus-box:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

}



.focus-box p {

    margin-bottom: 0;

}



.focus-box .icon i {

    font-size: 2rem;

    display: block;

    color: #8C2F39;

}



.gallery, .focus-box-container {

    display: grid;

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

    gap: 1rem;

}



.gallery a {

    background: #ffffff;

    border-radius: 12px;

    overflow: hidden;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

    width: 100%;

    height: auto;

}



.gallery a:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);

}



.gallery img {

    width: 100%;

    height: auto;

    object-fit: cover;

    display: block;

}



table {

    width: 100%;

    border-collapse: collapse;

    margin: 1.5rem auto;

    background: #ffffff;

    border-radius: 12px;

    overflow: hidden;

    max-width: 600px;

}



thead {

    background: #B23A48;

    color: white;

}



th,

td {

    padding: 0.75rem 1rem;

    text-align: left;

}



tbody tr:nth-child(even) {

    background: #f1f5f9;

}



table th:first-child,

table td:first-child {

    width: 75%;

}



table th:last-child,

table td:last-child {

    width: 25%;

    text-align: right;

}



strong {

    font-size: 1.2rem;

    color: #8C2F39;

}



.contact-grid {

    display: flex;

    gap: 2rem;

    justify-content: center;

    flex-wrap: wrap;

}



.contact-left,

.contact-right {

    flex: 1;

    min-width: 250px;

    max-width: 320px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}



.contact-name {

    font-size: 1.5rem;

    font-weight: 700;

    color: #8C2F39;

    margin-bottom: 0.5rem;

}



.contact-right p {

    margin-bottom: 0.4rem;

}



.contact-right a {

    color: #B23A48;

    text-decoration: none;

    font-weight: 500;

}



.contact-right a:hover {

    text-decoration: underline;

}



footer {

    color: #e2e8f0;

}



.footer-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    background: #B23A48;

    text-align: center;

    width: 100%;

}



footer ul {

    list-style: none;

    display: flex;

    flex-direction: column;

    flex-wrap: wrap;

    justify-content: center;

}



footer a {

    color: #e2e8f0;

    text-decoration: none;

    font-size: 0.95rem;

}



footer a:hover {

    text-decoration: underline;

}



#showMoreBtn {

    display: none;

    cursor: pointer;

    width: 100%;

    text-decoration: none;

    color: white;

    background-color: #8C2F39;

    border: none;

    padding: 1rem;

    border-radius: 12px;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    font-size: 1rem;

    font-weight: 500;

}



.menu-toggle {

  display: none;

  font-size: 2rem;

  color: white;

  background: none;

  border: none;

  cursor: pointer;

}



.footer-nav {

    list-style: none;

    display: flex;

    gap: 1.5rem;

    flex-wrap: wrap;

    justify-content: center;

    padding: 0;

    margin: 0;

}



.footer-sections {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    margin-top: 0.5rem;

    margin-bottom: 0.5rem;

}



.footer-main-nav, .footer-info {

    flex: 1;

    min-width: 200px;

    padding: 0.5rem;

}



.footer-main-nav h3, .footer-info h3 {

    font-size: 1.1rem;

    margin-bottom: 0.5rem;

}



.footer-main-nav ul, .footer-info ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-main-nav li, .footer-info li {

    margin-bottom: 0.4rem;

}



.footer-main-nav a, .footer-info a {

    text-decoration: none;

    color: #e2e8f0;

    font-size: 0.95rem;

}



.footer-main-nav a:hover, .footer-info a:hover {

    text-decoration: underline;

}



/* Copyright */

.footer-copy {

    padding: 1.5rem;

    font-size: 1rem;

    color: #e2e8f0;

    background-color: #8C2F39;

    width: 100%;

}



#cookieBanner {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: #B23A48;

    color: #fcf7f7;

    padding: 1rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

    z-index: 2000;

}



#cookieBanner button {

    background-color: #fcf7f7;

    color: #8C2F39;

    border: none;

    padding: 0.5rem 1rem;

    border-radius: 8px;

    cursor: pointer;

    margin: 0.5rem 0.25rem;

}



#cookieBanner a {

    color: #fcf7f7;

    text-decoration: underline;

}



#cookieBanner {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: #8C2F39;

    color: #fcf7f7;

    padding: 1rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

    z-index: 2000;

    text-align: center;

}



#cookieBanner p {

    margin-bottom: 0;

    font-size: 1rem;

}



@media (max-width: 1086px) {

    p {

        font-size: 1.2rem;

    }



    .footer-copy p {

        font-size: 1rem;

    }

    

    .focus-box-container {

        display: flex;

        flex-direction: column;

        width: 100%;

    }



    .focus-box {

        display: flex;

        flex-direction: row;

        min-width: 100%;

        align-items: center;

        gap: 1rem;

    }



    .focus-box p {

        text-align: left;

        margin: 0;

    }



    .icon {

        margin-left: 1rem;

    }

}



@media (max-width: 768px) {



    .menu {

        flex-wrap: wrap;

        justify-content: center;

    }



    h2 {

        font-size: 1.6rem;

    }



    section {

        padding: 3rem 0;

    }



    .hero-title {

        font-size: 2.2rem;

    }



    .hero-slider {

        height: 55vw;

    }



    .contact-grid {

        flex-direction: column;

        align-items: center;

    }



    header .container {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 1rem 0;

    }



    .menu-toggle {

        display: block;

    }



    .nav-menu {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background-color: #B23A48;

        display: none;

        flex-direction: column;

    }



    .nav-menu ul {

        flex-direction: column;

        gap: 0;

    }



    .nav-menu li {

        border-bottom: 1px solid #e2e8f0;

    }



    .nav-menu li a {

        display: block;

        padding: 0.75rem 1rem;

    }



    .nav-menu.active {

        display: flex;

    }



    .hero-title {

        margin-right: 1rem;

        margin-left: 1rem;

    }



}



@media (max-width: 480px) {

    .hero-slider {

        height: 55vw;

    }



    .gallery {

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    .gallery a:nth-child(n+4) {

        display: none;

    }



    .gallery.show-all a {

        display: block;

    }



    #showMoreBtn {

        display: block;

    }



    .footer-nav {

        flex-direction: column;

        gap: 0.5rem;

    }

}