body{

margin:0;
font-family:Arial;
background:#f8fdf9;

}

/* HEADER */

header{

display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:white;
box-shadow:0 3px 10px rgba(0,0,0,0.1);

}

.logo{

color:#1f7a5a;
font-size:24px;

}

nav a{

margin-left:20px;
text-decoration:none;
color:#333;
font-weight:bold;

}

/* HERO */

.hero{

height:450px;

background:url("https://images.unsplash.com/photo-1582407947304-fd86f028f716")
center/cover no-repeat;

display:flex;
align-items:center;
justify-content:center;

}

.hero-content{

background:rgba(0,0,0,0.5);
color:white;
padding:30px;
border-radius:10px;
text-align:center;

}

.hero h2{

font-size:36px;

}

.btn{

background:#2ecc71;
color:white;
padding:12px 25px;
border-radius:6px;
text-decoration:none;
font-weight:bold;

}

/* PROPERTY SECTION */

.properties{

padding:60px 40px;
text-align:center;

}

.properties h2{

color:#1f7a5a;
margin-bottom:40px;

}

.property-grid{

display:grid;

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

gap:30px;

}

/* CARD DESIGN */

.card{

background:white;
border-radius:12px;
overflow:hidden;

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

transition:0.3s;

}

.card:hover{

transform:translateY(-8px);

}

.card img{

width:100%;
height:200px;
object-fit:cover;

}

.card-body{

padding:20px;

}

.card-body h3{

color:#1f7a5a;

}

.card-body a{

display:inline-block;
margin-top:10px;
padding:10px 18px;

background:#2ecc71;

color:white;

text-decoration:none;

border-radius:5px;

}

/* FOOTER */

footer{

background:#1f7a5a;
color:white;
text-align:center;
padding:20px;

}

/* WHATSAPP BUTTON */

.whatsapp-float{

position:fixed;
width:60px;
height:60px;
bottom:25px;
right:25px;

background:#25D366;

color:white;

border-radius:50%;

text-align:center;

font-size:30px;

line-height:60px;

text-decoration:none;

box-shadow:0 5px 15px rgba(0,0,0,0.3);

}

/* MOBILE */

@media(max-width:768px){

header{

flex-direction:column;

}

nav{

margin-top:10px;

}

.hero{

height:350px;

}

.hero h2{

font-size:26px;

}

}

.property-detail{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

padding:60px;

}

.estate-image{

width:100%;
border-radius:10px;

}

.estate-info{

background:white;

padding:30px;

border-radius:10px;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

}

.estate-info h2{

color:#1f7a5a;

}

.estate-info ul{

padding-left:20px;

}

@media(max-width:768px){

.property-detail{

grid-template-columns:1fr;

}

}

        /* Simple carousel styles */
        .carousel-section {
            padding: 2rem;
            background: #f9f9f9;
        }
        .carousel-container {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            overflow: hidden;
        }
        .carousel-track {
            display: flex;
            transition: transform 0.5s ease;
        }
        .carousel-slide {
            min-width: 100%;
            box-sizing: border-box;
            padding: 1rem;
        }
        .carousel-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .carousel-card img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
        .carousel-card .card-body {
            padding: 1.5rem;
            text-align: center;
        }
        .carousel-card h3 {
            margin: 0 0 0.5rem;
            color: #333;
        }
        .carousel-card p {
            color: #666;
            margin-bottom: 1rem;
        }
        .carousel-card a {
            display: inline-block;
            background: #007bff;
            color: white;
            padding: 0.5rem 1.5rem;
            text-decoration: none;
            border-radius: 5px;
            transition: background 0.3s;
        }
        .carousel-card a:hover {
            background: #0056b3;
        }
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.5);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            z-index: 10;
        }
        .carousel-btn.prev {
            left: 10px;
        }
        .carousel-btn.next {
            right: 10px;
        }
        .carousel-btn:hover {
            background: rgba(0,0,0,0.8);
        }
        /* Property grid adjustments */
        .property-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
            padding: 2rem;
        }
    

        .map-container{

position:relative;

width:100%;

padding-bottom:56.25%;

height:0;

overflow:hidden;

border-radius:10px;

margin-top:25px;

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

}

.map-container iframe{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:0;

}
/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#f7f9f7;
color:#222;
line-height:1.6;
}


.logo{
font-size:20px;
font-weight:bold;
}

nav a{
color:#0f3d2e;
text-decoration:none;
margin-left:15px;
font-size:14px;
}

nav a:hover{
color:#9be3a5;
}

/* PROPERTY SECTION */

.property-detail{
padding:20px;
max-width:1100px;
margin:auto;
}

/* ESTATE IMAGE */

.estate-image{
width:100%;
height:250px;
object-fit:cover;
border-radius:10px;
margin-bottom:20px;
}

/* ESTATE INFO */

.estate-info{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
margin-bottom:20px;
}

.estate-info h2{
color:#0f3d2e;
margin-bottom:10px;
}

.estate-info p{
margin-bottom:8px;
}

.estate-info ul{
margin:10px 0 15px 20px;
}

/* BUTTON */

.btn{
display:inline-block;
background:#1faa59;
color:white;
padding:12px 20px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
}

.btn:hover{
background:#168f49;
}

/* MAP */

.map-container{
position:relative;
width:100%;
padding-bottom:56.25%;
height:0;
overflow:hidden;
border-radius:10px;
margin-top:20px;
}

.map-container iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}

/* FLOATING WHATSAPP BUTTON */

.whatsapp-float{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
font-size:26px;
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
box-shadow:0 6px 12px rgba(0,0,0,0.2);
text-decoration:none;
z-index:999;
}

.whatsapp-float:hover{
background:#1ebe5d;
}

/* DESKTOP STYLES */

@media (min-width:768px){

.property-detail{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
align-items:start;
}

.estate-image{
grid-column:1/3;
height:400px;
}

.map-container{
grid-column:1/3;
}

nav a{
font-size:16px;
}

.logo{
font-size:24px;
}

}

/* GLOBAL */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#f6f8f7;
color:#222;
line-height:1.5;
}

/* HEADER */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 18px;
background:white;
color:#0e3b2c;
flex-wrap:wrap;
}
header h3{
color: orange;
}

.logo{
font-size:20px;
font-weight:700;
}

nav a{
color: #0e3b2c ;
text-decoration:none;
margin-left:12px;
font-size:14px;
}

nav a:hover{
color:#7de39a;
}

/* PAGE SECTION */

.properties{
padding:20px;
max-width:1200px;
margin:auto;
}

.properties h2{
margin-bottom:20px;
color:#0e3b2c;
}

/* MOBILE FIRST GRID */

.property-grid{
display:grid;
grid-template-columns:1fr;
gap:18px;
}

/* CARD */

.card{
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
}

/* IMAGE */

.card img{
width:100%;
height:200px;
object-fit:cover;
}

/* CARD BODY */

.card-body{
padding:15px;
}

.card-body h3{
font-size:18px;
margin-bottom:6px;
color:#0e3b2c;
}

.card-body p{
font-size:14px;
margin-bottom:12px;
color:#555;
}

/* BUTTON */

.card-body a{
display:inline-block;
background:#1faa59;
color:white;
padding:8px 14px;
border-radius:5px;
text-decoration:none;
font-size:14px;
font-weight:600;
}

.card-body a:hover{
background:#168f49;
}

/* WHATSAPP FLOAT */

.whatsapp-float{
position:fixed;
bottom:18px;
right:18px;
background:#25D366;
color:white;
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
box-shadow:0 5px 12px rgba(0,0,0,0.25);
z-index:999;
}

.whatsapp-float:hover{
background:#1ebe5d;
}

/* TABLET */

@media (min-width:600px){

.property-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* DESKTOP */

@media (min-width:992px){

.property-grid{
grid-template-columns:repeat(3,1fr);
}

.card img{
height:220px;
}

.logo{
font-size:24px;
}

nav a{
font-size:16px;
}

}

/* LARGE DESKTOP */

@media (min-width:1200px){

.property-grid{
grid-template-columns:repeat(4,1fr);
}

}

.table-wrapper{
width:100%;
overflow-x:auto;
margin-top:20px;
}

.plot-table{
width:100%;
border-collapse:collapse;
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

.plot-table th{
background:#0f5132;
color:white;
padding:14px;
text-align:left;
font-size:15px;
}

.plot-table td{
padding:14px;
border-bottom:1px solid #eee;
font-size:14px;
}

.plot-table tr:hover{
background:#f5f9f7;
}

/* mobile optimisation */
@media(max-width:768px){

.plot-table th,
.plot-table td{
font-size:13px;
padding:10px;
}

}