*{box-sizing:border-box;margin:0;padding:0}
:root{--green:#246b45;--green-dark:#164a31;--cream:#f7f5ee;--text:#20352b;--muted:#6b766f}
html{scroll-behavior:smooth}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#fff}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,92%);margin:auto}

/* Navigation */
.site-header{position:absolute;top:0;left:0;width:100%;z-index:20;background:rgba(10,35,24,.36);backdrop-filter:blur(8px)}
.navbar{height:76px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1rem;font-weight:400;color:#ffffff;display:flex;align-items:left;gap:8px}

.logo img {height:65px;width:auto;display:block;flex:0 0 auto}

.logo span{font-size:1.5rem}
.nav-links{display:flex;align-items:center;gap:30px;color:#fff;font-weight:600}
.nav-links a{transition:.2s}
.nav-links a:hover{opacity:.75}
.signin{padding:11px 21px;border:1px solid rgba(255,255,255,.75);border-radius:24px}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.8rem;cursor:pointer}

/* Hero */
.hero{height:50vh;min-height:430px;position:relative;overflow:hidden;color:#fff}
.hero-slides,.slide,.hero-overlay{position:absolute;inset:0}
.slide{background-size:cover;background-position:center;opacity:0;transform:scale(1.03);transition:opacity .8s,transform 5s}
.slide.active{opacity:1;transform:scale(1)}
.hero-overlay{background:linear-gradient(90deg,rgba(7,32,20,.78),rgba(7,32,20,.25) 65%,rgba(7,32,20,.15))}
.hero-content{position:relative;z-index:2;height:100%;display:flex;justify-content:center;flex-direction:column;align-items:flex-start}
.eyebrow,.section-kicker{letter-spacing:.12em;text-transform:uppercase;font-size:.76rem;font-weight:800}
.eyebrow{color:#d7f0df;margin-bottom:0px}.hero-eyebrow{display:inline-block;min-height:2.4em;padding:9px 13px;line-height:1.4;border:1px solid rgba(255,255,255,.5);border-radius:5px;background:rgba(7,32,20,.62);box-shadow:0 2px 12px rgba(0,0,0,.2);text-shadow:0 1px 2px rgba(0,0,0,.45)}
.hero h1{font-size:clamp(2.2rem,5vw,4.6rem);line-height:1.03;max-width:700px}
.hero p{font-size:1.05rem;line-height:1.6;max-width:580px;margin:18px 0 25px;color:#edf7f0}
.hero-btn{background:#fff;color:var(--green-dark);padding:13px 22px;border-radius:28px;font-weight:800}
.slider-controls{position:absolute;z-index:5;bottom:24px;right:4%;display:flex;align-items:center;gap:12px}
.slider-controls button{border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.2);color:#fff;border-radius:50%;width:35px;height:35px;font-size:1.3rem;cursor:pointer}
.dots{display:flex;gap:6px}.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}.dot.active{background:#fff;width:22px;border-radius:8px}

/* Farm cards 
.farms-section{padding:68px 0 82px}*/
.farms-section{padding:20px 0 10px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}
.section-kicker{color:var(--green)}
h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-top:7px}
.search-box{width:min(350px,100%);display:flex;align-items:center;gap:9px;border:1px solid #dce3de;border-radius:30px;padding:11px 16px;background:#fff;box-shadow:0 4px 16px rgba(20,50,35,.05)}
.search-box input{border:0;outline:0;width:100%;font:inherit}
.farm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.farm-card{border:1px solid #e5e9e5;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 8px 28px rgba(22,57,39,.08);transition:.25s;display:flex;flex-direction:column}
.farm-card:hover{transform:translateY(-5px);box-shadow:0 14px 35px rgba(22,57,39,.13)}
.farm-image{height:205px;position:relative;background-size:cover;background-position:center}
.rating{position:absolute;top:13px;right:13px;background:#fff;padding:6px 10px;border-radius:18px;font-weight:800;font-size:.85rem}
.veg-nonveg{position:absolute;top:13px;left:13px;background:#fff;padding:6px 10px;border-radius:18px;font-weight:800;font-size:.85rem}
.farm-body{padding:19px;display:flex;flex-direction:column;flex:1}
.farm-body h3{font-size:1.25rem;margin-bottom:8px}
.location{color:var(--muted);font-size:.91rem;margin-bottom:13px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.tag{font-size:.76rem;background:#eef6f0;color:#326448;padding:5px 8px;border-radius:12px}
.info-row{display:flex;justify-content:space-between;border-top:1px solid #edf0ed;padding-top:14px;margin-top:auto;gap:10px}
.price{font-weight:800;color:var(--green-dark)}.price small{font-weight:500;color:var(--muted)}
.book-btn{margin-top:15px;width:100%;border:0;background:var(--green);color:#fff;padding:12px;border-radius:10px;font:inherit;font-weight:800;cursor:pointer;transition:.2s}
.book-btn:hover{background:var(--green-dark)}
.no-results{text-align:center;display:none;padding:40px;color:var(--muted)}

/* About + footer */
.about-section{background:var(--cream);padding:58px 0}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-inner p{font-size:1.03rem;line-height:1.8;color:#56645c}
.footer{background:#173a29;color:#dce9e0;padding-top:48px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:50px;padding-bottom:38px}
.footer-logo{margin-bottom:15px}.footer p{color:#a9c0b1;line-height:1.65}
.footer h3{color:#fff;margin-bottom:14px}.footer-grid>div>a:not(.logo){display:block;color:#a9c0b1;margin:9px 0}
.copyright{text-align:center;border-top:1px solid rgba(255,255,255,.1);padding:18px;font-size:.82rem;color:#91aa9c}

/* Responsive 
@media(max-width:850px){
 .nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:#173a29;padding:18px 5%;flex-direction:column;align-items:flex-start;gap:18px}
 .nav-links.open{display:flex}.menu-toggle{display:block}
 .hero{min-height:460px}.farm-grid{grid-template-columns:repeat(2,1fr)}
 .section-heading{align-items:stretch;flex-direction:column}.search-box{width:100%}
 .about-inner{grid-template-columns:1fr;gap:20px}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 .container{width:90%}.navbar{height:68px}.nav-links{top:68px}
 .hero{height:50vh;min-height:440px}.hero h1{font-size:2.45rem}.hero p{font-size:.94rem}
 .slider-controls{bottom:16px}.farm-grid{grid-template-columns:1fr}.farm-image{height:220px}
 .farms-section{padding:48px 0 58px}.footer-grid{grid-template-columns:1fr;gap:28px}
}

* { box-sizing: border-box; font-family: Arial, sans-serif; margin: 0; padding: 0; }
body { background-color: #f4f6f8; color: #333; }

.farm-header { padding: 20px; background: #fff; border-bottom: 1px solid #ddd; }
.badge-verified { background: #28a745; color: white; padding: 3px 8px; font-size: 12px; border-radius: 4px; }
.banner img { width: 100%; height: 350px; object-fit: cover; }

.main-container { display: flex; padding: 20px; gap: 20px; max-width: 1200px; margin: 0 auto; }
.content-left { flex: 2; }
.booking-sidebar { flex: 1; position: sticky; top: 20px; height: fit-content; }

.section { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; }

.card { border: 1px solid #eee; border-radius: 6px; padding: 10px; background: #fafafa; }
.card img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; }
.tag { display: inline-block; padding: 2px 6px; font-size: 10px; border-radius: 3px; background: #ddd; }
.tag-paid { background: #e74c3c; color: #fff; }
.tag-free { background: #2ecc71; color: #fff; }

.category-block { border: 1px solid #ccc; padding: 15px; border-radius: 6px; margin-bottom: 15px; }
.room-subcard { display: flex; gap: 15px; margin-top: 10px; background: #fff; padding: 10px; border: 1px solid #eee; }
.main-thumb { width: 100px; height: 80px; object-fit: cover; }
.thumbnails img { width: 30px; height: 30px; cursor: pointer; border: 1px solid #ccc; }

.horizontal-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.place-card img { width: 150px; height: 100px; object-fit: cover; border-radius: 6px; }

.review-slider { display: flex; gap: 15px; overflow-x: auto; padding: 10px 0; }
.review-card { min-width: 250px; border: 1px solid #ddd; padding: 15px; border-radius: 6px; background: #fff; }

.booking-box { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.form-row { display: flex; justify-content: space-between; margin-bottom: 10px; align-items: center; }
.btn-confirm { width: 100%; padding: 10px; background: #27ae60; color: white; border: none; font-size: 16px; cursor: pointer; border-radius: 4px; }

 Modal Styling 
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; }
.modal-content { background: white; padding: 25px; border-radius: 8px; width: 350px; position: relative; }
.modal-content input { width: 100%; margin-bottom: 10px; padding: 8px; }
.close-btn { position: absolute; right: 15px; top: 10px; font-size: 20px; cursor: pointer; }

.banner {
      width: 100%;
      height: 400px; 
      overflow: hidden;
    }

    .banner img {
      width: 100%;
      height: 100%;
      object-fit: cover; 
      object-position: center;
    }

   */


   
[source: 2]



 /*Booking & Layout Custom Additions */
.farm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

.header-meta {
    display: flex;
    gap: 12px;
    align-items: center;
}

.banner {
    width: 100%;
    height: 380px;
    overflow: hidden;
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-container {
    display: flex;
    gap: 24px;
    padding: 30px 5%;
    max-width: 1300px;
    margin: 0 auto;
}

.content-left { flex: 2; }
.booking-sidebar { flex: 1; position: sticky; top: 20px; height: fit-content; }

.section {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.card {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 12px;
    background: #fafafa;
}

.card img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}

.category-block {
    border: 1px solid #e0e0e0;
    padding: 18px;
    border-radius: 8px;
    margin-bottom: 15px;
    background: #fdfdfd;
}

.cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cat-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.room-subcard {
    display: flex;
    gap: 15px;
    margin-top: 12px;
    background: #fff;
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 6px;
}

.main-thumb { width: 110px; height: 85px; object-fit: cover; border-radius: 4px; }

.thumbnails { display: flex; gap: 5px; margin-top: 5px; }
.thumbnails img { width: 32px; height: 32px; cursor: pointer; border: 1px solid #ccc; border-radius: 2px; }

.horizontal-scroll, .review-slider {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.place-card img { width: 180px; height: 120px; object-fit: cover; border-radius: 6px; }

.review-card {
    min-width: 260px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 6px;
    background: #fff;
}

.instructions-list { padding-left: 20px; line-height: 1.8; }

.faq-item { margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 8px; }

.booking-box {
    background: #fff;
    padding: 22px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.form-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    align-items: center;
    font-size: 0.95rem;
}

.form-row input, .form-row select {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.btn-confirm {
    width: 100%;
    padding: 12px;
    background: #246b45;
    color: white;
    border: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
}

.btn-confirm:hover { background: #164a31; }

.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 25px;
    border-radius: 8px;
    width: 360px;
    position: relative;
}

.modal-content input {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.close-btn {
    position: absolute; right: 15px; top: 10px;
    font-size: 22px; cursor: pointer; color: #888;
}