@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

* {
    font-family: 'DM Sans', sans-serif;
}


.golden-headers {
    font-size: 18px;
    font-weight: 700;
    color: #DDC07B;
}
.label-apartment{
    font-size: 30px;
    font-weight: 700;
    color: #DDC07B;
}

.bg-dark-green {
    background-color: #2A5550;
}

.text-yellow {
    color: #DDC07B;
}

header {
    padding: 10px 20px;
}

.menu-icon {
    display: none;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 20px;
    /* Adds space to the left and right of the navbar */
}

.navbar .logo img {
    width: 150px;
    margin-left: 20px;
    /* Gap from the left corner */
    margin-right: 20px;
    /* Gap after the logo */
}

.navbar .nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-grow: 1;
    gap: 30px;
    /* Gap between the items */
}

.navbar .nav-links li {
    margin: 0;
}

.navbar .nav-links li a {
    color: #2A5550;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}



.nav-links li a {
    text-decoration: none;
    position: relative;
    color: black;
    /* Default text color */
}


.nav-links li a.selected::after {
    content: "";
    position: absolute;
    margin-top: 1;
    left: 50%;
    border-radius: 35px;
    top: 25px;
    width: 18px;
    /* Fixed width for the underline */
    height: 4px;
    /* Thickness of the underline */
    background-color: #DDC07B;
    /* Underline color */
    transform: translateX(-50%);
    /* Centers the underline under the text */
}

@media (max-width: 768px) {
    .nav-links li a.selected::after {
        top: 30px;
    }
}


.navbar .sign-in {
    background-color: #2A5550;
    border: 2px solid #2A5550;
    padding: 8px 16px;
    font-size: 16px;
    color: white;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    margin-right: 20px;
    /* Adds space after the sign-in button */
}

.navbar .sign-in:hover {
    background-color: #2A5550;
    /* color: white; */
}




/* Overview Section Styles */
.overview-section {
    background-color: #f8f9fa;
    padding: 50px 0;
}

@media (min-width: 1024px) {  
    .overview-container {  
        padding-top: 40px;  
    }  
}

.overview-heading {
    font-size: 36px;
    font-weight: bold;
    color: #2A5550;
    margin-bottom: 30px;
}

.overview-text {
    font-size: 16px;
    color: #2A5550;
    margin-bottom: 15px;
}

.overview-description {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 30px;
}

.image-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.overview-image {
    width: 100%;
    border-radius: 10px;
}

.details-section {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.info-column {
    text-align: left;
}

.info-column p {
    margin: 5px 0;
    font-size: 16px;
    color: #2A5550;
}

.approvals p {
    margin: 5px 0;
}

.divider-line {
    border: none;
    border-top: 2px solid #DDC07B;
    margin: 20px 0;
}

.apartment-row {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.apartment-type {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-left: 1px solid #DDC07B;
    border-right: 1px solid #DDC07B;
}

.apartment-type:first-child {
    border-left: none;
}

.apartment-type:last-child {
    border-right: none;
}

.apartment-type h3 {
    margin: 0;
    font-size: 24px;
    color: #2A5550;
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;

}



.apartment-label {
    font-size: 14px;
    color: #DDC07B;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}


.location-section {
    padding: 50px 0;
}

.location-heading {
    font-size: 36px;
    font-weight: 700;
    color: #2A5550;
    margin-bottom: 30px;
}

.location-text {
    font-size: 16px;
    margin-top: 10px;
    color: #2A5550;
    margin-bottom: 15px;
}

.overview-description {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 30px;
}

.location-image-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.location-image {
    max-width: 100%;
    border-radius: 10px;
}

.view-map-button {
    display: inline-block;
    text-decoration: none;
    color: #2A5550;
    background-color: transparent;
    padding: 15px 20px;
    border-radius: 5px;
    border: 1px solid #DDC07B;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}


.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}


.content-left {
    flex: 0 0 40%;
}

.content-right {
    flex: 0 0 55%;
    /* Take 55% of the width */
}

.amenity-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid #D2AC47;
    border-radius: 50%;
    margin-bottom: 10px;
    background-color: transparent;
}

.btn-outline-light {
    border-color: #D2AC47;
    color: #D2AC47;
}

.btn-outline-light:hover {
    background-color: #D2AC47;
    color: #ffffff;
}

/* Section Styling */
.bg-white {
    background-color: #ffffff;
}

.text-yellow {
    color: #D2AC47;
}

.text-dark {
    color: #264D47;
}

.text-muted {
    color: #6C757D;
}

/* Input and Button Styling */
.border-yellow {
    border: 1px solid #D2AC47;
    border-radius: 5px;
}

input::placeholder,
select {
    color: #8A8A8A;
    /* Placeholder text color */
}

.btn-dark-green {
    background-color: #264D47;
    border: none;
}

.btn-dark-green:hover {
    background-color: #1E3A39;
}

h6 {
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 0;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .row.g-3 .col-md-3 {
        flex: 0 0 100%;
    }
}

.connect-section h1 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #2A5550;
}

.connect-section h5 {
    color: #DDC07B;
}

.connect-section-p {
    margin-bottom: 30px;
    color: #2A5550;
}

.connect-section input::placeholder,
.connect-section select::placeholder {
    color: #2A5550;
    opacity: 1;
    font-weight: bold;
}

.connect-section select {
    color: #2A5550;
}

.form-control {
    border: 2px solid #DDC07B;
    border-radius: 5px;
    padding: 10px;
    color: #2A5550;
    font-weight: 700;
}

/* Remove blue outline on focus */
.form-control:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 2px solid #004d40
}


.submit-button {
    background-color: #004d40;
    color: #DDC07B;
    font-size: 16px;
    font-weight: bold;
    border: none;
    padding: 15px 50px;
    border-radius: 5px;
    transition: box-shadow 0.3s ease-in-out;
}

.submit-button:hover {
    color: #DDC07B;
    background-color: #004d40;
    box-shadow: 0 0 20px rgba(0, 56, 47, 0.8); /* Green glow */
}


.col-12 {
    text-align: center;
}

.footer-text {
    margin-top: 20px;
    font-size: 14px;
    color: #6c757d;
}

.footer-text a {
    color: #004d40;
    text-decoration: none;
    font-weight: bold;
}

/* Slider Section Styles */
.slider-section {
    background-color: #2A5550;
    padding: 40px 0;
}

.slider-sectionn {
    padding: 40px 0;
}

.plans-main-container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}


.plans-headings {
    font-weight: 700;
    color: #FFFFFF;
    font-size: 30px;
    text-align: left;
}

.content-box {
    display: flex;
    gap: 20px;
    text-align: center;
    display: flex;
    /* flex-wrap: wrap; */
    gap: 20px;
    justify-content: center;
}

.box {
    padding: 20px;
    border-radius: 8px;
    width: 300px;
}

.box img {
    width: 100%;
    height: auto;
    border-radius: 5px;

}

.box h1 {
    font-size: 20px;
    margin-bottom: 10px;
}

.box span {
    display: block;
    margin-top: 10px;
    background-color: #DDC07B;
    color: #2A5550;
    padding: 8px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    transition: box-shadow 0.3s ease-in-out;
    cursor: pointer;
    
}

.box span:hover {
    color: #264D47;
    box-shadow: 0 0 15px rgba(177, 152, 96, 0.8); /* Golden glow effect */
}


@media screen and (max-width: 768px) {
    .content-box {
        flex-direction: column;
        align-items: center;
    }

    .box {
        width: 100%;
        max-width: 350px;
    }
}

.catalog-heading {
    color: #2A5550;
    font-weight: 700;
    font-size: 40px;
    font-family: 'DM Sans';
}


.slider-section h5 {
    margin-left: 15px;
    text-transform: uppercase;
    font-size: 15px;
    margin-bottom: 10px;
    color: #DDC07B;
}

.slider-sectionn h5 {
    margin-left: 15px;
    text-transform: uppercase;
    font-size: 15px;
    margin-bottom: 10px;
    color: #DDC07B;
}

.slider-section h1 {
    margin-left: 15px;
    color: white;
}

.slider-sectionn h1 {
    margin-left: 15px;
    color: black;
}

.carousel {
    max-width: 1000px;
    margin: 0 auto;
}

.carousel-inner {
    border-radius: 10px;
    overflow: hidden;
}

.slider-image {
    max-width: 100%;
    border-radius: 10px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
}

/* Three Side View Section */
.three-side-view {
    background-color: #fff;
    padding: 50px 0;
}

.three-side-view .project {
    color: #DDC07B;
    font-size: 15px;
}

.three-side-view h1 {
    font-size: 36px;
    font-weight: bold;
    color: #2A5550;
    margin-bottom: 20px;
}

/* Adjust container width */
.container {
    max-width: 1000px;
    /* Increased width */
    margin: 0 auto;
}

.card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
}

.card-img-top {
    border-radius: 10px 10px 0 0;
}

.card-title {
    font-size: 18px;
    font-weight: bold;
    color: #004d40;
}

.card-text {
    color: #6c757d;
    font-size: 14px;
}

.card-body {
    text-align: left;
}

/* Adjust card layout for larger width */
@media (min-width: 992px) {
    .col-md-4 {
        flex: 0 0 33.3333%;
        /* Ensure the cards are 1/3 of the width */
        max-width: 33.3333%;
    }
}

/* Centered "See More" Button */
.see-more-btn {
    background-color: transparent;
    color: #004d40;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    border: 2px solid #e4c98f;
    /* Light gold border color */
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.see-more-btn:hover {
    background-color: #e4c98f;
    color: white;
    border-color: #e4c98f;
}

/* Footer Styles */
footer {
    background-color: #F0FFFD;
    color: #2A5550;
    padding: 40px 20px;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-section {
    flex: 1;
    min-width: 250px;
}

.footer-logo {
    width: 120px;
    margin-bottom: 20px;
}

.footer-section h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.footer-section p {
    font-size: 14px;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 5px;
}

.footer-section ul li a {
    text-decoration: none;
    color: #2A5550;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #004d40;
}

.links {
    margin-left: 80px;
}

/* Social Media Icon Styles */
.social-icons {
    margin-top: 15px;
    margin-left: -140px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.social-icons a {
    text-decoration: none;
}

.social-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease-in-out;

}


.social-icon:hover {
    transform: scale(1.2); /* Makes the icon 20% bigger */
}

.footer-bottom {
    background-color: #2A5550;
    color: #F0FFFD;
    /* Contrasting text color for readability */
    text-align: center;
    border-top: 1px solid #E0F2F1;
    margin-top: 20px;
    padding: 10px 0;
    font-size: 14px;
}

/* General Media Query for Responsiveness */

@media (max-width: 768px) {
    .navbar {
        flex-direction: row-reverse;
        /* Logo on the right */
        justify-content: space-between;
    }

    .navbar .logo img {
        height: 100%;
        width: 100%;
    }

    .navbar .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        background-color: white;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        padding: 10px 20px;
        gap: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .navbar .nav-links.active {
        display: flex;
    }

    .navbar .nav-links li {
        margin: 10px 0;
    }

    .navbar .sign-in {
        display: none;
        /* Hide sign-in button on mobile */
    }

    .menu-icon {
        display: block;
        position: absolute;
        left: 20px;
        /* Move menu icon to the left */
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        /* Stack items vertically */

        /* Align to the start of the container */
    }

    .content-left,
    .content-right {
        flex: 0 0 100%;
        /* Take full width */
        margin-bottom: 20px;
        /* Add spacing */
    }

    .row.row-cols-2.row-cols-md-4.g-4.text-center {
        row-gap: 20px;
        /* Space between rows */
    }

    .amenity-icon {
        width: 40px;
        height: 40px;
        /* Adjust size for smaller screens */
    }

    .form-control {
        margin-bottom: 15px;
        /* Add spacing between input fields */
    }

    .btn-submit {
        width: 100%;
        /* Full-width button */
    }

    .carousel {
        max-width: 100%;
        /* Make carousel fit smaller screens */
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 10%;
    }

    .slider-image {
        height: auto;
    }

    .connect-section h1 {
        font-size: 28px;
    }



    .three-side-view h1 {
        font-size: 28px;
    }

    .card {
        margin-bottom: 20px;
    }

    .footer-container {
        flex-direction: column;
        gap: 30px;
    }

    .footer-section {
        text-align: center;
    }

    .social-icons a {
        margin: 0 5px;
    }
}

@media (max-width: 576px) {
    .content-left h2 {
        font-size: 24px;
    }

    .content-left p {
        font-size: 14px;
    }

    .content-right .col {
        flex: 0 0 50%;
    }

    .card-img-top {
        height: auto;
        width: 100%;
    }

    .btn-outline-light {
        font-size: 14px;
        padding: 8px 20px;
    }

    .see-more-btn {
        font-size: 14px;
        padding: 8px 15px;
    }

    .footer-logo {
        width: 80px;
    }
}

/* Responsive styles for smaller screens */
/* Mobile Styles */
@media (max-width: 768px) {
    .navbar {
        padding: 14px 20px;
        /* Less padding for smaller screens */
        justify-content: space-between;
    }

    .logo img {
       height: 100%;
       width: 100%;
        /* Slightly smaller logo for mobile */
        margin-right: 20px;
        /* Adjust margin */
    }

    .nav-links {
        display: none;
        /* Hide the links initially */
        flex-direction: column;
        gap: 10px;
        position: absolute;
        top: 70px;
        /* Place it below the navbar */
        right: 0;
        background-color: #fff;
        padding: 20px;
        width: 200px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        z-index: 100;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        width: 100%;
        /* Ensure full width for links */
        text-align: center;
    }

    .nav-links a {
        font-size: 16px;
        /* Larger text for easier reading on mobile */
        padding: 10px 0;
        /* More padding for easier clicking */
    }

    .sign-in {
        font-size: 16px;
        /* Make the sign-in button larger for mobile */
        padding: 12px 40px;
        /* Adjust padding */
    }

    /* Hamburger menu */
    .hamburger {
        display: block;
        cursor: pointer;
        background: none;
        border: none;
        padding: 10px;
    }

    .hamburger span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #3b5c54;
        margin: 5px 0;
    }

    .overview-text {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .logo img {
        height: 25px;
    }
}

@media (max-width: 768px) {


    .info-row {
        /* flex-direction: column; */
        /* Stack columns vertically on smaller screens */
        align-items: flex-start;
        text-align: left;
    }

    .info-column {
        width: 100%;
        /* Full width for each info column */
        margin-bottom: 15px;
    }

    .apartment-row {
        /* flex-direction: column; */
        /* Stack apartment types vertically */
        margin: 20px 0;
    }

    .apartment-type {
        padding: 15px 0;
        /* Adjust padding for mobile */
        border-left: none;
        border-right: none;
        width: 100%;
        /* Full width for each apartment type */
        margin-bottom: 10px;
        border-left: 1px solid #DDC07B;
        border-right: 1px solid #DDC07B;
    }

    .apartment-type h3 {
        font-size: 20px;
        /* Slightly smaller font for mobile */
    }

    .apartment-label {
        font-size: 12px;
        /* Smaller font size for mobile */
        letter-spacing: 0.5px;
        /* Reduce letter-spacing for mobile */
    }
}

@media (max-width: 480px) {
    .info-column p {
        font-size: 14px;
        /* Adjust font size for very small screens */
    }

    .apartment-type h3 {
        font-size: 18px;
        /* Smaller font size for very small screens */
    }
}

/* Responsive styles */
@media (max-width: 768px) {
    /* .location-section {
        width: 80%;
        padding: 20px 10%;
    } */

    .image-container {
        flex: 1 1 100%;
        /* Make the image container take full width */
        padding: 0;
        width: 100%;
        /* Limit the width for better mobile scaling */
    }

    .image-container img {
        height: 30vh;
        /* width: */
        border-radius: 8px;
    }

    .content-container {
        padding: 10px 20px;
        width: 40%;
        /* Limit width for better readability */
        margin: 0 auto;
        /* Center the content */
    }

    .project-title {
        font-size: 12px;
        /* Smaller font size for mobile */
        margin-bottom: 5px;
    }

    .location-title {
        font-size: 24px;
        /* Slightly smaller title on mobile */
        margin-bottom: 10px;
    }

    .location-description {
        font-size: 14px;
        /* Smaller font size for mobile */
        margin-bottom: 15px;
        text-align: justify;

        width: 100%;
        /* Ensure the paragraph is responsive */

    }

    .view-map-button {
        width: auto;
        /* Make button width larger on mobile */
        margin: 0 auto;
        font-size: 14px;
        /* Adjust font size for mobile */
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .location-title {
        font-size: 20px;
        /* Further reduce font size for very small screens */
    }

    .location-description {
        font-size: 13px;
        /* Reduce description text size */
    }

    .view-map-button {
        padding: 10px 15px;
        /* Adjust padding for smaller screens */
        font-size: 12px;
        /* Reduce font size on very small screens */
    }
}

/* Responsive styles */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        /* Stack footer sections vertically on smaller screens */
        align-items: center;
        /* Center content */
        gap: 30px;
        padding: 0 10px;
    }

    .footer-section {
        flex: 1 1 100%;
        /* Make sections take full width */
        text-align: center;
        margin: 0 auto;
    }

    .footer-logo {
        width: 50%;
        height: 100%;
    }

    .footer-section h4 {
        font-size: 16px;
        /* Smaller heading font for mobile */
    }

    .footer-section p {
        font-size: 14px;
        /* Adjust paragraph font size */
    }

    .footer-section ul li {
        font-size: 14px;
        /* Adjust link font size */
    }

    .footer-bottom {
        font-size: 12px;
        /* Smaller text size for footer bottom on mobile */
        padding: 10px;
    }

    /* Adjust social icons */
    .social-icons {
        justify-content: center;
        /* Center icons */
        margin: 0;
    }

    .social-icon {
        width: 20px;
        /* Smaller icons for mobile */
        height: 20px;
    }
    .overview-content {
        display: flex;
        flex-direction: column-reverse;
    }
    .overview-heading, .project-location, .project-catalog{
        text-align: center;
    }
}

/* Further adjustments for very small screens (max-width: 480px) */
@media (max-width: 480px) {
    .footer-section h4 {
        font-size: 14px;
        /* Further reduce heading font size */
    }

    .footer-section p {
        font-size: 12px;
        /* Smaller paragraph font */
    }

    .footer-section ul li {
        font-size: 12px;
        /* Smaller link font */
    }

    .footer-bottom {
        font-size: 12px;
        /* Further reduce footer text size */
    }
}

.sticky-header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}


.box a {
    text-decoration: none;
    color: #2a5550;
}

.whatsapp-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #25D366;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    position: fixed;
    bottom: 20px;
    right: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.whatsapp-btn img {
    width: 24px;
    height: 24px;
}

.whatsapp-btn:hover {
    background-color: #1EBE5D;
}

.white-card {
    height: 303px;
    width: 260px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ------------------------------------------------------------------
---------------------------------------------------------------------
Final Animations
---------------------------------------------------------------------
------------------------------------------------------------------ */


/* ----------------------------------------------------------------------
Navlinks Hover 
---------------------------------------------------------------------- */

.navbar .nav-links li a:hover {
    color: #004d40; /* Golden color */
    text-shadow: 
        0 0 5px #DDC07B, 
        0 0 10px #DDC07B, 
        0 0 15px #DDC07B, 
        0 0 20px rgba(221, 192, 123, 0.8); /* Strong golden glow */
    transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
}


/* ----------------------------------------------------------------------
Overview and Location Section 
---------------------------------------------------------------------- */

/* @keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-left {
    animation: slideInLeft 1s ease-out forwards;
}

.animate-right {
    animation: slideInRight 1s ease-out forwards;
}

.image-column img,
.overview-text {
    opacity: 0;
} */


/* ----------------------------------------------------------------------
Apartment Types Animation 
---------------------------------------------------------------------- */

/* .apartment-type h3:hover {
    color: #004d40;
    text-shadow: 
        0 0 5px #DDC07B, 
        0 0 10px #DDC07B, 
        0 0 15px #DDC07B, 
        0 0 20px rgba(221, 192, 123, 0.8); 
    transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
}



.apartment-type {
    opacity: 0;
    transform: translateX(-100vw);
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.apartment-type.right {
    transform: translateX(100vw);
}

.apartment-type.visible {
    opacity: 1;
    transform: translateX(0);
}

@keyframes slideInLeftApartment {
    from {
        opacity: 0;
        transform: translateX(-100vw);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRightApartment {
    from {
        opacity: 0;
        transform: translateX(100vw);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-left-apartment {
    animation: slideInLeftApartment 0.8s ease-out forwards;
}

.slide-right-apartment {
    animation: slideInRightApartment 0.8s ease-out forwards;
} */


/* ----------------------------------------------------------------------
Google Map button
---------------------------------------------------------------------- */

.view-map-button:hover {
    background-color: #DDC07B; 
    color: #ffffff;
    box-shadow: 0px 0px 15px rgba(221, 192, 123, 0.8); 
    border-color: #c9a857; 
}

/* ----------------------------------------------------------------------
Footer Links Animation
---------------------------------------------------------------------- */

.footer-links {
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;

}

.footer-links:hover {
    color: #004d40; /* Golden color */
    text-shadow: 0px 0px 10px rgba(42, 85, 80, 0.8); 
}


@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ameneties-icon {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 10px;
    opacity: 0; /* Initially hidden */
    transform: translateX(50px);
    animation: slideIn 0.5s ease-out forwards;
}



.ameneties-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.ameneties-icon > div {
    /* height: 80px; */
}
.ameneties-icon > img{
    height: 100px;
    width: 100px;
}