.property-details { max-width: 1200px; margin: 0 auto; margin-top: 50px; padding: 20px; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .property-main-image img { width: 100%; height: auto; max-height: 500px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease-in-out; } .property-main-image img:hover { transform: scale(1.01); cursor: pointer; } .property-carousel { display: flex; gap: 12px; justify-content: center; margin-top: 20px; margin-bottom: 30px; } .property-carousel img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 3px solid #eee; cursor: pointer; transition: transform 0.3s ease, border-color 0.3s ease; } .property-carousel img:hover { transform: scale(1.1); border-color: #333; } .property-info { margin-top: 20px; text-align: left; padding: 0 20px; } .property-info h2 { font-size: 3rem; color: #333; margin-bottom: 15px; font-weight: 600; text-align: center; } .property-info p { margin: 8px 0; font-size: 18px; color: #777; line-height: 1.6; } .property-info p strong { color: #444; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 1000; } .modal img { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } .modal-close { position: absolute; top: 20px; right: 20px; background-color: rgba(0, 0, 0, 0.5); color: #fff; border: none; padding: 10px 15px; border-radius: 50%; cursor: pointer; font-size: 20px; transition: background-color 0.3s; } .modal-close:hover { background-color: rgba(0, 0, 0, 0.8); } .property-main-image { position: relative; } .vip-badge { background-color: #ffd700; color: #fff; font-size: 1.2rem; font-weight: bold; padding: 8px 16px; border-radius: 10px; text-transform: uppercase; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; align-items: center; justify-content: center; animation: shine 1.5s infinite alternate; } .property-info { position: relative; margin-top: 20px; text-align: left; padding: 0 20px; } .property-info h2 { font-size: 3rem; color: #333; margin-bottom: 15px; font-weight: 600; text-align: center; }