/* Global Styles */
body {
    font-family: 'Arial', sans-serif;
    color: #b8b8b8;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
    background: #E8E5E0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2em;
    background-color: #DAA520;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: black;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-height: 60px;
}

nav a {
    text-decoration: none;
    color: rgb(31, 31, 31);
    margin-left: 20px;
    transition: color 0.3s ease-in-out;
    font-weight: bold;
}

nav a:hover {
    color: #b8b8b8;
}

#languages a {
    padding: 5px 10px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: black;
    margin: 0 5px;
    cursor: pointer;
}

#languages a.active {
    background-color: #f2f2f2;
}

#logo-name {
    display: flex;
    align-items: center;
}

#logo {
    margin-right: 0.2rem;
    height: 90px;
    width: auto;
}

#nav-links {
    display: flex;
    gap: 1rem;
}

#pageContent{
    width: 85%;
    margin: auto;
}

#heroDiv {
    position: relative;
    height: 400px;
    display: flex;
    color: #fff;
    width: 100%;
    margin: 2em auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    background: url('../images/hero_image.png');
    background-size: cover; /* Ensure the background image covers the entire div */
    background-position: center; /* Center the background image */
}

#products {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em 5%;
    flex-wrap: wrap;
}

.info{
    text-align: center;
    color: rgb(31, 31, 31);
}

.info p {
    border-bottom: 1px solid #c7c7c7; /* Light grey color */
    margin-bottom: 10px; /* Space below the paragraph */
    padding-bottom: 5px; /* Space between text and underline */
}

.specs{
    font-weight: 600;
}

.read-more {
    display: inline-block;
    background-color: #DAA520;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    margin-top: 5px;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.read-more:hover {
    background-color: #DAA520;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.description.collapsed {
    position: relative;
    overflow: hidden;
    max-height: 60px; /* Adjust as needed */
    text-overflow: ellipsis;
    padding-right: 30px; /* Space for the "Read More" link */
}

.description.collapsed:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px; /* Adjust the height as needed for the gradient effect */
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}


.product-card {
    background: url('../images/plaster_background.png');
    padding: 1em;
    margin: 1em; /* Increased margin */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    max-width: 300px;
}


.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
    background-color: #f1f1f1;
}

.call-to-action{
    display: flex;
    align-items: center;
    justify-content: center;
}

.book-now {
    background-color: #DAA520; /* Goldenrod button */
    color: #fff;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    transition: background-color .3s ease; /* Smooth color transition */
}

.book-now:hover {
    background-color: #b38600; /* Darker goldenrod on hover */
}

.carousel img {
    width: 200px; /* Make image fill the container width */
    height: 150px; /* Maintain aspect ratio */
    border-radius: 5px;
    overflow: hidden;
}

.carousel {
    position: relative;
    width: 80%;
    margin: auto;
}

.locationCarousel{
    position: relative;
    width: 50%;
    margin: auto;
}

.slick-prev, .slick-next {
    font-size: 24px;
    color: #ffffff; /* This will make the arrow color white */
    background-color: #DAA520; /* This will make the background color dark */
    border-radius: 50%; /* This will make the background circle round */
    width: 30px; /* Set width of the circle */
    height: 30px; /* Set height of the circle */
    display: flex; /* Use flexbox to center the arrow */
    align-items: center; /* Center the arrow vertically */
    justify-content: center; /* Center the arrow horizontally */
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.slick-prev {
    left: -35px;
}

.slick-next {
    right: -35px;
}

.slick-prev::before, .slick-next::before {
    font-weight: bold;
}

.prev-partners{
    left:-45px
}

.next-partners{
    right: -45px;
}

.partners-carousel img {
    /* width: 200px !important; */
    height: 90px;
    margin: 10px; /* optional, for some spacing */
    background-color: #DAA520;
    border-radius: 10px;
    overflow: hidden;
}

#partners {
    width: 95%;
    margin: auto;
    padding-top: 2em;
    padding-bottom: 2em;
}

#map {
    height: 400px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin: 0 auto;
    border: 1px solid #ddd;
}

footer {
    text-align: center;
    padding: 1em 0;
    background: #333;
    color: #fff;
    font-size: 0.8em;
}

.hamburger {
    cursor: pointer;
    display: none; /* hide by default */
    border: 1px solid #000; /* giving it a border */
    border-radius: 5px;
    padding: 5px 10px; /* adding some padding */
    background-color:#E8E5E0; /* giving a background color */
    margin-left: auto; /* align to the right */
}

.hidden {
    display: none;
}

.shown {
    display: block !important; /*or any other value that suits your design*/
}

.promo-ribbon {
    background-color: #051D40; /* Adjust color to match your theme */
    color: #fff;
    text-align: center;
    padding: 8px 0;
    font-weight: bold;
    padding: 15px;
}

.countdown {
    color: #ffd700;  /* gold color, for example */
    font-weight: bold;
    margin-left: 4px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    padding: 16px;
    background-color: #333333;
    color: #DAA520;
    font-size: 20px;
}

.footer-content p{
    margin: auto;
    flex: 1;
}

.footer-copyright {
    text-align: center;
    padding: 8px;
    background-color: #333333;
    color: #fff;
}

/* Base styles for the filter */
#filter {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* Hide default radio inputs */
#filter input[type="radio"] {
    display: none;
}

/* Style for the labels */
#filter label {
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    background-color: #f2f2f2;
    color: #1F1F1F;
    font-weight: bold;
    border-radius: 20px;
    transition: background-color 0.2s;
}

/* When radio is checked, change the background color of the label */
#filter input[type="radio"]:checked + label {
    background-color: #051D40;
    color: #F2F2F2;
}

/* Pseudo-elements for a more custom look */
#filter label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #555;
    margin-right: 10px;
    vertical-align: middle;
}

#filter input[type="radio"]:checked + label:before {
    background-color: #DAA520;
    border-color: #F2F2F2;
}

/* ABOUT US CSS STYLES */

#about-content {
    margin: 3% 10%;
    padding: 2% 3%;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

#about-content h2 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 20px;
    border-bottom: 2px solid #f5f5f5;
    padding-bottom: 10px;
}

#about-content h3 {
    font-size: 2em;
    color: #444;
    margin-top: 30px;
    margin-bottom: 20px;
}

#about-content p {
    font-size: 1.1em;
    line-height: 1.7em;
    color: #555;
    margin-bottom: 20px;
}

#about-content ul {
    list-style-type: disc;  /* this is the default style for unordered lists, but it's good to define it for clarity */
    margin-left: 20px;  /* Indent the bullet points slightly for a cleaner look */
}

#about-content ul li {
    margin-bottom: 15px;  /* Add some space between bullet points for better readability */
    color: #555;
}

#about-content ul li strong {
    font-weight: bold;
    color: #444;
}

#pageContent {
    padding-bottom: 50px;
}

.highlight {
    color: #DAA520; /*Goldenrod*/
}

.EN{
    display: none;
}

/* Modal Container */
/* Modal Container */
#imageModal {
    display: none;  /* Hidden by default */
    position: fixed; 
    z-index: 1000;  /* Appears on top of everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);  /* Black with a bit of transparency */
    align-items: center;  /* Vertically center the modal content */
    justify-content: center; /* Horizontally center the modal content */
    overflow: auto; /* Allows for scrolling if the modal content becomes too large */
}

#imageModal #modal-content, #apartmentCarousel{
    position: relative;
    max-width: 80%;  /* Maximum width of the modal */
    max-height: 100%; /* Maximum height of the modal */
    display: flex;  /* Flexbox to center the image */
    align-items: center;  /* Vertically center the image */
    justify-content: center; /* Horizontally center the image */
    background: url('../images/plaster_background.png');
    border: 5px solid #DAA520;
    border-radius: 10px;
}

#imageModal img{
    max-width: 100%;
    max-height: 100%;
    display: block;  /* Removes any additional spacing */
    margin: 0 auto;  /* Center the image if it's smaller than the modal */
}

#apartmentCarousel img{
    width: 100%;
    max-height: 500px;
}

#imageModal #close {
    top: 10px;
    right: 10px;
    position: absolute;
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    color: #ffffff; /* This will make the arrow color white */
    background-color: #DAA520; /* This will make the background color dark */
    border-radius: 50%; /* This will make the background circle round */
    width: 30px; /* Set width of the circle */
    height: 30px; /* Set height of the circle */
    display: flex; /* Use flexbox to center the arrow */
    align-items: center; /* Center the arrow vertically */
    justify-content: center; /* Center the arrow horizontally */
    border: none;

}

.navigation {
    position: absolute;
    transform: translateY(-50%);  /* Centered vertically */
    font-size: 2em;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 25px;
    color: #ffffff; /* This will make the arrow color white */
    background-color: #DAA520; /* This will make the background color dark */
    border-radius: 50%; /* This will make the background circle round */
    width: 30px; /* Set width of the circle */
    height: 30px; /* Set height of the circle */
    display: flex; /* Use flexbox to center the arrow */
    align-items: center; /* Center the arrow vertically */
    justify-content: center; /* Center the arrow horizontally */
    border: none;
}

.portrait {
    width: 45% !important;
    height: 100% !important;
}

.locImgPortrait {
    width: 40% !important;
    height: 100% !important;
}

.bigLandscape {
    width: 70% !important;
    height: 100% !important; 
}

.navigation, #imageModal #close {
    transition: top 0.2s, left 0.2s, right 0.2s;
}

#location-info{
    width:80%;
    margin: auto;
    overflow: hidden;
    /* border-radius: 10px; */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    background: url(../images/plaster_background.png);
    background-size: cover;
    background-position: center;
}

#apartmentDescriptionRO, #apartmentDescriptionEN{
    padding-left: 10%;
    padding-right: 10%;
}

@media (max-width: 768px) {

    #filter {
        flex-direction: column;
        gap: 10px;
        padding: 0;
    }

    nav {
        position: relative;
    }

    #logo-name {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .hamburger {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 15px; /* Or your preferred value */
    }

    #nav-links {
        position: absolute;
        width: 100%;
        top: 100%; /* position right below the nav container */
        left: 0; /* align to the left of the nav container */
        background: url('../images/plaster_background.png');
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: for a better look and feel */
        text-align: center; /* Center the text within #nav-links */
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        margin-bottom: 1em;
        z-index: 1;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    
    #nav-links.shown {
        display: block; /* Show the links when the class 'shown' is added */
    }
    
    nav a {
        display: block; /* Stack the links vertically */
        margin-bottom: 0.5em; /* Add some space between the links */
        margin-left: 0; /* Reset the left margin */
    }

    #logo{
        height: 80px;
        width: auto;
    }

    nav a {
        margin-left: 0;
        margin-bottom: 10px; /* Space between links */
    }

    .hamburger {
        display: block; /* show hamburger on mobile view */
    }
    
    #nav-links {
        display: none; /* hide nav links by default on mobile view */
    }

    #heroDiv {
        height: 200px; /* Adjusted hero height */
    }

    #products {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }

    .product-card {
        max-width: 90%;
        margin-bottom: 20px; /* Increased bottom margin */
        margin: 0px;
        margin-bottom: 10px;
    }

    .book-now {
        padding: 12px 0; /* Increased padding */
    }

    #map {
        width: 100%;
        box-shadow: none;
    }

    #pageContent {
        width: 95%; /* Increased width */
    }
    
    /* Apply max-width and height auto to images for responsiveness */
    img {
        max-width: 100%;
        height: auto;
    }

    .prev-partners{
        left:-25px
    }
    
    .next-partners{
        right: -25px;
    }
    
    #partners{
        width: 85%;
    }

    #heroDiv{
        background: url('../images/small_hero.png');
    }

    .footer-content p {
        flex-basis: 100%; /* On mobile, each item will take up the full width */
        margin: 0.5em 0;
    }

    /* #languages{
        display: none;
    } */

    #about-content {
        margin: 2% 5%;
        padding: 2%;
    }
    
    #about-content h2 {
        font-size: 2em;
    }
    
    #about-content h3 {
        font-size: 1.5em;
    }

    #about-content p, #about-content ol li {
        font-size: 1em;
    }
}