/* Define the slide-in animation from the left */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
        /* Start 100px to the left */
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        /* End at original position */
    }
}

/* Define the slide-in animation from the right */
@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
        /* Start 100px to the right */
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        /* End at original position */
    }
}

/* Initial state for elements to be animated from left */
.animate-from-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* Smooth transition */
}

/* Initial state for elements to be animated from right */
.animate-from-right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* Smooth transition */
}

/* Class to apply when element is in view (triggers left animation) */
.animate-from-left.in-view {
    animation: slideInFromLeft 0.8s ease-out forwards;
}

/* Class to apply when element is in view (triggers right animation) */
.animate-from-right.in-view {
    animation: slideInFromRight 0.8s ease-out forwards;
}

/* Stagger animation for text elements within the left section */
.left-content .text-animated:nth-child(1).animate-from-left {
    animation-delay: 0s;
}

/* Heading */
.left-content .text-animated:nth-child(2).animate-from-left {
    animation-delay: 0.2s;
}

/* Sub-heading/short desc */
.left-content .text-animated:nth-child(3).animate-from-left {
    animation-delay: 0.4s;
}

/* Main paragraph */

/* Specific styling for the image in the right section */
.right-content img {
    filter: grayscale(100%);
    /* Example: make image black and white */
    transition: filter 0.3s ease-in-out;
}

.right-content:hover img {
    filter: grayscale(0%);
    /* Full color on hover */
}

/* Logo overlay on image */
.image-overlay-logo {
    position: absolute;
    top: 1rem;
    /* 16px */
    left: 1rem;
    /* 16px */
    z-index: 10;
}

/* Text overlay on image */
.image-overlay-text {
    position: absolute;
    bottom: 1rem;
    /* 16px */
    left: 1rem;
    /* 16px */
    right: 1rem;
    /* 16px */
    color: #ffffff;
    /* White text */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    /* Readable shadow */
    font-weight: 600;
    /* semibold */
    text-align: left;
    z-index: 10;
}

/* residential css start */
/* Base card styling common to both default and hover */
.property-card {
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    /* Smooth transitions for hover effects */
}

/* Default styling for the golden card (Adani Brahma Samsara) */
.property-card.golden {
    background: linear-gradient(to right, #fbbf24, #d97706);
    /* from-yellow-400 to-amber-600 */
    color: #ffffff;
    /* White text */
}

/* Default styling for the white card (Avana By Landmark) */
.property-card.white {
    background-color: #ffffff;
    /* White background */
    color: #374151;
    /* Default dark gray text */
}

/* Specific text color for elements inside white card */
.property-card.white .card-title,
.property-card.white .card-description,
.property-card.white .card-price,
.property-card.white .detail-text,
.property-card.white .view-details-button {
    color: #374151;
    /* Dark text for readability on white */
}

/* Icon color for white card */
.property-card.white .detail-icon {
    color: #fbbf24;
    /* Yellow icon on white card */
}

/* Button style for white card */
.property-card.white .view-details-button {
    background-color: #f0f2f5;
    /* Light gray button background */
    border: 1px solid #d1d5db;
    /* Gray-300 border */
}

/* Hover effect for the golden card (subtle lift/shadow) */
.property-card.golden:hover {
    transform: translateY(-5px);
    /* Slightly lift */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Hover effect for the white card (transforms to golden style) */
.property-card.white:hover {
    background-image: linear-gradient(125deg, #FEE948 10%, #AC7617 63%);
    /* from-yellow-400 to-amber-600 */
    color: #ffffff;
    /* White text on hover */
    transform: translateY(-5px);
    /* Slightly lift */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Text and icon color changes on hover for white card */
.property-card.white:hover .card-title,
.property-card.white:hover .card-description,
.property-card.white:hover .card-price,
.property-card.white:hover .detail-text,
.property-card.white:hover .detail-icon,
.property-card.white:hover .view-details-button {
    color: #ffffff;
    /* All text and icons turn white on hover */
}

/* Button style for white card on hover */
.property-card.white:hover .view-details-button {
    background-color: rgba(255, 255, 255, 0.2);
    /* Semi-transparent white button */
    border-color: #ffffff;
    /* White border */
}

/* Common button hover effects (for both types of buttons) */
.view-details-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
    /* More opaque white for button on hover */
}

/* Styles for the "View Details" button */
.view-details-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    /* rounded-lg */
    font-weight: 500;
    /* medium */
    font-size: 0.875rem;
    /* text-sm */
    transition: all 0.3s ease-in-out;
}

/* Specific icon color for golden card */
.property-card.golden .detail-icon {
    color: #ffffff;
    /* White icon on golden card */
}

/* residential css end */