*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins;
}

body{
background:#f6f6f6;
}

.header{

display:flex;
justify-content:space-between;
align-items:center;
padding:20px 80px;
background:white;
position:sticky;
top:0;
z-index:1000;

}

.logo{
font-size:28px;
font-weight:700;
color:#1f4d3a;
}

nav a{
margin:0 15px;
text-decoration:none;
color:#333;
}

.visit-btn{
background:#d4af37;
border:none;
padding:10px 20px;
border-radius:20px;
cursor:pointer;
}

.hero{

height:90vh;
background:url("https://images.unsplash.com/photo-1600607686527-6fb886090705") center/cover no-repeat;
position:relative;
display:flex;
align-items:center;

}

.hero-overlay{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);

}

.hero-content{

position:relative;
display:flex;
gap:60px;
padding:60px;

}

.left-card{

background:white;
padding:30px;
border-radius:15px;
width:380px;

}

.left-card ul{
margin:15px 0;
}

.left-card li{
margin-bottom:8px;
}

.enquire{
background:#d4af37;
border:none;
padding:12px 30px;
border-radius:30px;
cursor:pointer;
}

.form-card{

background:white;
padding:30px;
border-radius:15px;
width:320px;

}

.form-card input{
width:100%;
margin:10px 0;
padding:12px;
}

.register{
background:#1f4d3a;
color:white;
border:none;
padding:12px;
width:100%;
border-radius:30px;
}

.about{

display:flex;
gap:50px;
padding:100px;

}

.about img{
width:400px;
border-radius:15px;
}

.pricing{

padding:80px;
text-align:center;

}

.price-table{

margin-top:40px;

}

.row{

display:flex;
justify-content:space-between;
background:white;
padding:20px;
margin-bottom:10px;
border-radius:10px;

}

.appointment{

background:#0d3b5c;
color:white;
padding:100px;
text-align:center;

}

.appointment input,
.appointment textarea{

width:60%;
padding:12px;
margin:10px 0;

}

.appointment button{

background:white;
padding:12px 30px;
border:none;

}

.whatsapp{

position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
font-size:28px;
padding:12px;
border-radius:50%;

}





.......


.about-section{

background:#f4f4f4;
padding:100px 80px;
font-family:Poppins, sans-serif;

}

.about-container{

display:flex;
align-items:center;
justify-content:space-between;
gap:80px;

}

.about-left{

width:50%;

}

.about-left h2{

font-size:48px;
color:#234a37;
font-weight:600;

}

.underline{

width:80px;
height:4px;
background:#d4a62a;
margin:15px 0 30px;

}

.about-left p{

color:#5c6770;
font-size:16px;
line-height:1.8;
margin-bottom:20px;

}

.brochure-btn{

background:#d4a62a;
border:none;
padding:14px 28px;
border-radius:40px;
font-size:16px;
color:white;
cursor:pointer;
box-shadow:0 6px 15px rgba(0,0,0,0.15);

}

.brochure-btn:hover{

transform:translateY(-3px);

}



.about-right{

position:relative;
width:40%;

}

.about-right img{

width:100%;
border-radius:20px;
display:block;

}



.rera-badge{

position:absolute;
bottom:-20px;
left:20px;
background:#d4a62a;
padding:20px 25px;
border-radius:15px;
color:white;
box-shadow:0 10px 25px rgba(0,0,0,0.2);

}

.rera-badge span{

font-size:14px;

}

.rera-badge h3{

font-size:22px;
margin-top:5px;

}


........

.highlights{

background:#f4f4f4;
padding:100px 80px;
font-family:Poppins;

}

.container{

max-width:1200px;
margin:auto;
text-align:center;

}

.highlights h2{

font-size:48px;
color:#234a37;

}

.underline{

width:80px;
height:4px;
background:#d4a62a;
margin:15px auto 20px;

}

.subtitle{

color:#6b747b;
font-size:18px;
margin-bottom:50px;

}

.highlight-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;

}

.card{

background:white;
padding:25px 30px;
border-radius:14px;
display:flex;
align-items:center;
gap:20px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:0.3s;

}

.card:hover{

transform:translateY(-5px);
box-shadow:0 15px 30px rgba(0,0,0,0.15);

}

.icon{

width:45px;
height:45px;
background:#234a37;
color:#d4a62a;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-weight:bold;

}

.card p{

font-size:16px;
color:#333;

}

......

.pricing-section{

padding:100px 80px;
background:linear-gradient(135deg,#1f4d3a,#2f6d50);
color:white;
font-family:Poppins;

}

.pricing-container{

max-width:1200px;
margin:auto;
text-align:center;

}

.pricing-container h2{

font-size:42px;

}

.underline{

width:80px;
height:4px;
background:#d4a62a;
margin:15px auto;

}

.subtitle{

color:#d9e5df;
margin-bottom:60px;

}

.pricing-grid{

display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;

}

.pricing-card{

background:#f7f7f7;
color:#333;
padding:35px;
width:320px;
border-radius:15px;
text-align:center;
position:relative;
box-shadow:0 10px 25px rgba(0,0,0,0.2);

}

.pricing-card .icon{

width:60px;
height:60px;
background:#e9ecef;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
font-size:24px;
margin-bottom:15px;

}

.pricing-card h3{

color:#234a37;
margin-bottom:5px;

}

.area{

color:#666;
margin-bottom:20px;

}

.price{

font-size:22px;
color:#234a37;
font-weight:600;
margin-bottom:20px;

}

.pricing-card ul{

text-align:left;
margin-bottom:25px;

}

.pricing-card li{

margin-bottom:8px;

}

.details-btn{

background:#234a37;
color:white;
border:none;
padding:12px 30px;
border-radius:30px;
cursor:pointer;

}

.pricing-card.popular{

border:3px solid #d4a62a;

}

.badge{

position:absolute;
top:-12px;
right:20px;
background:#d4a62a;
color:white;
padding:5px 15px;
border-radius:10px;
font-size:12px;

}

.costing-btn{

margin-top:50px;
background:#d4a62a;
border:none;
padding:14px 30px;
border-radius:30px;
color:white;
font-size:16px;
cursor:pointer;

}

.pricing-note{

margin-top:10px;
color:#d9e5df;

}

....

.floor-section{

padding:100px 80px;
background:#f4f4f4;
font-family:Poppins;

}

.floor-container{

max-width:1200px;
margin:auto;
text-align:center;

}

.floor-container h2{

font-size:42px;
color:#234a37;

}

.underline{

width:80px;
height:4px;
background:#d4a62a;
margin:15px auto;

}

.subtitle{

color:#6b747b;
margin-bottom:40px;

}



.floor-tabs{

display:flex;
justify-content:center;
gap:10px;
margin-bottom:50px;

}

.tab{

border:none;
padding:10px 20px;
border-radius:30px;
background:#eee;
cursor:pointer;

}

.tab.active{

background:#234a37;
color:white;

}



.floor-content{

display:flex;
align-items:center;
justify-content:space-between;
gap:60px;

}



.floor-left{

text-align:left;
width:45%;

}

.floor-left h3{

color:#234a37;
font-size:24px;

}

.area{

color:#d4a62a;
font-weight:600;
margin-bottom:20px;

}



.floor-left ul{

list-style:none;

}

.floor-left li{

margin-bottom:12px;
position:relative;
padding-left:25px;

}

.floor-left li:before{

content:"✔";
position:absolute;
left:0;
color:#d4a62a;

}



.download-btn{

margin-top:20px;
background:#d4a62a;
border:none;
padding:12px 25px;
border-radius:30px;
color:white;
cursor:pointer;

}



.floor-right{

position:relative;
width:45%;

}

.floor-right img{

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

}



.image-label{

position:absolute;
bottom:20px;
left:20px;
background:white;
padding:15px 20px;
border-radius:10px;
box-shadow:0 10px 20px rgba(0,0,0,0.2);

}

.image-label h4{

color:#234a37;

}

.....

.amenities{

background:#f4f4f4;
padding:100px 80px;
font-family:Poppins;

}

.amenities-container{

max-width:1200px;
margin:auto;
text-align:center;

}

.amenities h2{

font-size:42px;
color:#234a37;
margin-bottom:10px;

}

.subtitle{

color:#6b747b;
margin-bottom:60px;

}



.amenities-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-bottom:60px;

}

.amenity-card{

background:white;
padding:35px 20px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transition:0.3s;

}

.amenity-card:hover{

transform:translateY(-6px);
box-shadow:0 10px 30px rgba(0,0,0,0.15);

}

.icon{

width:60px;
height:60px;
background:#234a37;
color:#d4a62a;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:26px;
margin:auto;
margin-bottom:15px;

}

.amenity-card h4{

color:#234a37;
margin-bottom:5px;

}

.amenity-card p{

color:#6b747b;
font-size:14px;

}



.amenities-more{

background:#2f6d50;
color:white;
padding:40px;
border-radius:15px;
max-width:800px;
margin:auto;

}

.amenities-more h3{

font-size:26px;
margin-bottom:10px;

}

.amenities-more p{

color:#dfe8e3;

}

.location{

padding:100px 80px;
background:#f4f4f4;
font-family:Poppins;

}

.location-container{

max-width:1200px;
margin:auto;
text-align:center;

}

.location h2{

font-size:42px;
color:#234a37;

}

.underline{

width:80px;
height:4px;
background:#d4a62a;
margin:15px auto;

}

.subtitle{

color:#6b747b;
margin-bottom:50px;

}



.location-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-bottom:50px;

}

.location-card{

background:white;
padding:25px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
text-align:left;

}

.location-card h4{

color:#234a37;
margin-top:10px;

}

.location-card p{

color:#d4a62a;
font-size:14px;

}



.icon{

width:45px;
height:45px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:20px;

}

.blue{background:#4a90e2;}
.purple{background:#8e44ad;}
.green{background:#27ae60;}
.red{background:#e74c3c;}
.orange{background:#f39c12;}
.teal{background:#16a085;}



.map iframe{

width:100%;
height:350px;
border-radius:15px;
margin-bottom:40px;

}



.visit-box{

background:#2f6d50;
color:white;
padding:40px;
border-radius:15px;

}

.visit-box h3{

font-size:24px;
margin-bottom:5px;

}

.visit-box span{

color:#dfe8e3;

}

.....

.appointment{

background:#f4f4f4;
padding:100px 80px;
font-family:Poppins;

}

.appointment-container{

max-width:1200px;
margin:auto;
display:flex;
gap:60px;

}

.appointment-left{

width:50%;

}

.appointment-left h2{

font-size:36px;
color:#234a37;

}

.underline{

width:80px;
height:4px;
background:#d4a62a;
margin:15px 0;

}

.subtitle{

color:#6b747b;
margin-bottom:30px;

}

form label{

display:block;
margin-bottom:6px;
font-weight:500;

}

form input,
form textarea{

width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:8px;
margin-bottom:18px;

}

form textarea{

height:100px;

}

form button{

width:100%;
padding:14px;
background:#234a37;
color:white;
border:none;
border-radius:30px;
font-size:16px;
cursor:pointer;

}



.appointment-right{

width:50%;

}

.visit-box{

background:#2f6d50;
color:white;
padding:25px;
border-radius:12px;
margin-bottom:25px;

}

.visit-box ul{

padding-left:18px;

}

.visit-box li{

margin-bottom:8px;

}



.feature-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:25px;

}

.feature-card{

background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.08);

}

.feature-card h4{

color:#234a37;

}



.location-box{

background:#fff7e5;
border:2px solid #d4a62a;
padding:20px;
border-radius:10px;

}

.location-box h4{

color:#234a37;
margin-bottom:5px;

}

.location-box span{

color:#555;

}

....

.appointment{
background:#0f3b57;   /* dark blue background */
color:white;
padding:100px 80px;
}

/* Heading */

.appointment-left h2{
color:#ffffff;
font-size:36px;
}

/* subtitle text */

.subtitle{
color:#d9e6ef;
}

/* labels */

form label{
color:#ffffff;
}

/* input fields */

form input,
form textarea{
background:#f1f1f1;
color:#333;
}

/* right green box */

.visit-box{
background:#2f6d50;
color:white;
}

/* feature cards */

.feature-card{
background:white;
color:#234a37;
}

/* location box */

.location-box{
background:#fdf6e8;
border:2px solid #d4a62a;
color:#234a37;
}

...
.footer{

background:linear-gradient(135deg,#0f3b2c,#1f5a3e);
color:white;
padding:80px 80px 30px;
font-family:Poppins;

}

.footer-container{

max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;

}

.footer-col h3{

color:#ffffff;
font-size:24px;

}

.project{

color:#d4a62a;
font-weight:600;

}

.desc{

font-size:14px;
margin:15px 0;
color:#d8e5dd;

}

.footer-col h4{

margin-bottom:15px;

}

.footer-col ul{

list-style:none;
padding:0;

}

.footer-col li{

margin-bottom:8px;
cursor:pointer;

}

.footer-col li:hover{

color:#d4a62a;

}



.social a{

display:inline-block;
width:35px;
height:35px;
background:rgba(255,255,255,0.1);
text-align:center;
line-height:35px;
border-radius:50%;
margin-right:8px;
color:white;
text-decoration:none;

}



.rera-box{

border:1px solid #d4a62a;
padding:10px;
border-radius:8px;
margin-top:10px;
font-size:14px;

}



.footer-bottom{

border-top:1px solid rgba(255,255,255,0.2);
margin-top:40px;
padding-top:20px;
display:flex;
justify-content:space-between;
align-items:center;
font-size:14px;

}

.footer-links span{

margin-left:20px;
cursor:pointer;

}

.footer-links span:hover{

color:#d4a62a;

}

....
.footer{
background:#f4f4f4;   /* light background */
color:#333;
padding:80px;
font-family:Poppins;
}

.footer h3,
.footer h4{
color:#234a37;   /* dark green headings */
}

.footer p{
color:#444;
}

.footer ul li{
color:#333;
}

.footer ul li:hover{
color:#d4a62a;
}

.project{
color:#d4a62a;  /* Echoes of Eden gold */
font-weight:600;
}

.desc{
color:#666;
}

.social a{
background:#e9e9e9;
color:#234a37;
}

.rera-box{
border:2px solid #d4a62a;
color:#234a37;
background:#fff7e5;
}

.footer-bottom{
border-top:1px solid #ddd;
color:#555;
}

.footer-links span{
color:#333;
}

.footer-links span:hover{
color:#d4a62a;
}

....
.highlights{
background:#f4f4f4;
padding:100px 80px;
}

.subtitle{
color:#555;   /* darker text for visibility */
font-size:18px;
margin-bottom:40px;
}

.highlight-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}

.highlight-card{

background:white;
padding:25px 30px;
border-radius:14px;
display:flex;
align-items:center;   /* icon + text same line */
gap:20px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.highlight-card p{
color:#333;
font-size:16px;
margin:0;
}

.icon{

width:40px;
height:40px;
background:#234a37;
color:white;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
font-size:18px;

}

.pricing-note{

color:#555;   /* darker color for visibility */
font-size:15px;
margin-top:10px;

}

.appointment h2{
color:#ffffff;   /* heading white */
font-size:42px;
font-weight:700;
}

.appointment .subtitle{
color:#e3edf5;   /* light color so it shows on dark background */
font-size:18px;
margin-top:15px;
line-height:1.6;
}

html{
scroll-behavior:smooth;
}

....

.gallery{

background:#f4f4f4;
padding:100px 80px;
font-family:Poppins;
text-align:center;

}

.gallery h2{

color:#234a37;
font-size:42px;

}

.underline{

width:80px;
height:4px;
background:#d4a62a;
margin:15px auto;

}

.subtitle{

color:#6b747b;
margin-bottom:50px;

}

.gallery-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows:200px;
gap:20px;

}

.gallery-item{

overflow:hidden;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.1);

}

.gallery-item img{

width:100%;
height:100%;
object-fit:cover;
transition:0.4s;

}

.gallery-item:hover img{

transform:scale(1.05);

}

.big{

grid-column:span 2;
grid-row:span 2;

}

.tall{

grid-row:span 2;

}

'''''

.floating-enquiry{

position:fixed;
right:0;
top:40%;
z-index:9999;
display:flex;
align-items:center;

}

/* toggle button */

.enquiry-toggle{

background:#234a37;
color:white;
padding:12px 18px;
cursor:pointer;
writing-mode:vertical-rl;
text-orientation:mixed;
border-radius:6px 0 0 6px;
font-weight:600;

}

/* enquiry form */

.enquiry-box{

width:260px;
background:white;
padding:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
transform:translateX(100%);
transition:0.4s;
border-radius:10px 0 0 10px;

}

.enquiry-box h3{

color:#234a37;
margin-bottom:15px;

}

.enquiry-box input{

width:100%;
padding:10px;
margin-bottom:10px;
border:1px solid #ddd;
border-radius:5px;

}

.enquiry-box button{

width:100%;
background:#d4a62a;
border:none;
padding:10px;
color:white;
border-radius:20px;
cursor:pointer;

}

/* open state */

.floating-enquiry.active .enquiry-box{

transform:translateX(0);

}


.floating-enquiry{
position:fixed;
right:0;
top:50%;
transform:translateY(-50%);
z-index:9999;
display:flex;
align-items:center;
}

.enquiry-tab{
background:#1c4f73;
color:white;
padding:12px;
writing-mode:vertical-rl;
cursor:pointer;
border-radius:6px 0 0 6px;
font-weight:600;
}

.enquiry-form{

position:absolute;
right:40px;
top:-120px;

width:300px;
background:white;
padding:20px;
box-shadow:0 10px 40px rgba(0,0,0,0.3);
transform:translateX(120%);
transition:0.4s;

border-radius:10px;

}

.enquiry-form.active{
transform:translateX(0);
}

.close-btn{
cursor:pointer;
font-size:20px;
float:right;
}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea{

width:100%;
padding:10px;
margin-bottom:10px;
border:1px solid #ddd;
border-radius:6px;

}

.enquiry-form button{
width:100%;
background:#1c4f73;
color:white;
padding:12px;
border:none;
border-radius:6px;
cursor:pointer;
}



.submit-btn{

display:block;
margin:25px auto 0 auto;

width:220px;          /* button chhota */
padding:14px 20px;

background:linear-gradient(135deg,#d4a72c,#c9971a);
color:white;

border:none;
border-radius:40px;

font-size:16px;
font-weight:600;

cursor:pointer;
transition:all 0.3s ease;

box-shadow:0 6px 18px rgba(0,0,0,0.25);

}

.submit-btn:hover{

transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.35);
background:linear-gradient(135deg,#c9971a,#b88912);

}

.submit-btn{
color:white !important;
background:#d4a72c !important;
}

/* floor plan section layout */

.floor-content{

display:flex;
align-items:center;
justify-content:space-between;
gap:60px;

}

/* left text area */

.floor-left{
flex:1;
}

/* right image area */

.floor-right{

flex:1;
max-width:500px;

}

/* rectangle image */

.floor-right img{

width:100%;
height:500px;     /* rectangle height */
object-fit:cover;

border-radius:0px;   /* important for rectangle */

display:block;

}

/* image label */

.image-label{

position:absolute;
bottom:20px;
left:20px;

background:white;
padding:12px 18px;

border-radius:8px;

box-shadow:0 5px 20px rgba(0,0,0,0.15);

}

/* download button */

.download-btn{

margin-top:25px;
padding:14px 24px;

background:#d4a72c;
color:white;

border:none;
border-radius:30px;

font-weight:600;
cursor:pointer;

transition:0.3s;

}

.download-btn:hover{

background:#c9971a;

}


.schedule-btn{

background:#d4a72c;
color:white;
padding:10px 18px;
border-radius:30px;
text-decoration:none;

}


.floor-section{
padding:80px 20px;
background:#f6f6f6;
text-align:center;
}

.floor-title{
font-size:32px;
margin-bottom:10px;
}

.floor-subtitle{
color:#777;
margin-bottom:40px;
}

.floor-tabs{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:50px;
}

.tab{
padding:10px 22px;
border:none;
border-radius:30px;
background:#eee;
cursor:pointer;
font-weight:600;
}

.tab.active{
background:#1f4f3c;
color:white;
}

.floor-wrapper{
max-width:1200px;
margin:auto;
}

.floor-box{
display:none;
align-items:center;
gap:60px;
}

.floor-box.active{
display:flex;
}

.floor-left{
flex:1;
text-align:left;
}

.floor-left h3{
font-size:26px;
color:#1f4f3c;
}

.area{
color:#d4a72c;
font-weight:600;
margin:10px 0 20px;
}

.floor-left ul{
list-style:none;
padding:0;
}

.floor-left li{
margin-bottom:12px;
position:relative;
padding-left:25px;
}

.floor-left li:before{
content:"✔";
color:#d4a72c;
position:absolute;
left:0;
}

.download-btn{
margin-top:20px;
padding:12px 24px;
background:#d4a72c;
color:white;
border:none;
border-radius:30px;
cursor:pointer;
}

.floor-right{
flex:1;
position:relative;
}

.floor-right img{
width:100%;
height:480px;
object-fit:cover;
border-radius:16px;
}

.image-label{
position:absolute;
bottom:20px;
left:20px;
background:white;
padding:16px 22px;
border-radius:10px;
box-shadow:0 10px 20px rgba(0,0,0,0.15);
}
/* Gallery section */

.gallery-container{
text-align:center;
margin-bottom:40px;
}

.gallery-container h2{
font-size:40px;
color:#1f4f3c;
margin-bottom:10px;
}

/* underline */

.gallery-container .underline{

width:70px;
height:4px;
background:#d4a72c;

margin:10px auto 20px auto;
border-radius:2px;

}

/* subtitle */

.gallery-container .subtitle{

max-width:700px;
margin:auto;

color:#666;
font-size:16px;
line-height:1.6;

}


/* navbar links */

.navbar a{

position:relative;
text-decoration:none;
color:#333;

margin:0 15px;
font-weight:500;

padding-bottom:5px;

}

/* underline */

.navbar a::after{

content:"";

position:absolute;

left:0;
bottom:0;

width:0%;
height:2px;

background:#d4a72c;

transition:0.3s ease;

}

/* hover animation */

.navbar a:hover::after{

width:100%;

}


.floor-title{
text-align:center;
font-size:42px;
font-weight:700;
color:#1f4f3c;
position:relative;
margin-bottom:15px;
}

/* underline */

.floor-title::after{

content:"";

display:block;

width:70px;
height:4px;

background:#d4a72c;

margin:12px auto 0;

border-radius:3px;

}


.amenities-container h2{

text-align:center;
font-size:40px;
font-weight:700;
color:#1f4f3c;

position:relative;
margin-bottom:15px;

}

.amenities-container h2::after{

content:"";

display:block;

width:80px;
height:4px;

background:#d4a72c;

margin:12px auto 0;

border-radius:3px;

}

.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
grid-auto-flow:dense;
}

/* Gallery Section */

.gallery{

padding:80px 0;
background:#f5f5f5;

}

.gallery-container{

width:90%;
max-width:1200px;

margin:auto;
text-align:center;

}

/* Title */

.gallery-title{

font-size:40px;
color:#1f4f3c;
margin-bottom:10px;
position:relative;

}

.gallery-title::after{

content:"";
width:70px;
height:4px;

background:#d4a72c;

display:block;
margin:10px auto;

border-radius:3px;

}

/* Subtitle */

.subtitle{

color:#666;
margin-bottom:40px;

}

/* Grid */

.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

grid-auto-flow:dense;

}

/* Gallery items */

.gallery-item{

overflow:hidden;

border-radius:12px;

}

.gallery-item img{

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

transition:0.4s;

}

/* Hover effect */

.gallery-item:hover img{

transform:scale(1.08);

}

/* Big Image */

.gallery-item.big{

grid-column:span 2;
grid-row:span 2;

}

/* Tall Image */

.gallery-item.tall{

grid-row:span 2;

}

/* Responsive */

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-item.big,
.gallery-item.tall{

grid-column:span 1;
grid-row:span 1;

}

}

.pricing-container h2{
margin-top:50px;
}

.about-left{
padding-left:60px;
}

/* Popup Overlay */

.popup-overlay{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.6);

display:none;

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

z-index:999;

}

/* Popup Box */

.popup-box{

background:#fff;

width:350px;

padding:30px;

border-radius:10px;

text-align:center;

animation:popupFade 0.3s ease;

}

/* Close Button */

.close-btn{

position:absolute;

right:20px;
top:15px;

font-size:25px;

cursor:pointer;

}

/* Form */

.popup-box input,
.popup-box textarea{

width:100%;

padding:10px;

margin:10px 0;

border:1px solid #ccc;

border-radius:6px;

}

.popup-box button{

background:#1f4f3c;

color:#fff;

padding:10px 20px;

border:none;

border-radius:6px;

cursor:pointer;

}

/* Animation */

@keyframes popupFade{

from{

transform:scale(0.8);
opacity:0;

}

to{

transform:scale(1);
opacity:1;

}

}

.popup-box{
position:relative;
}

.popup-close{

position:absolute;

top:12px;
right:18px;

font-size:26px;

cursor:pointer;

color:#333;

font-weight:bold;

}

.highlight-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

}

/* card layout */

.card{

display:flex;

align-items:center;

gap:20px;

background:#f5f5f5;

padding:25px;

border-radius:12px;

}

/* icon */

.icon{

width:40px;

height:40px;

background:#1f4f3c;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

border-radius:8px;

font-size:18px;

flex-shrink:0;

}

/* text */

.card p{

margin:0;

font-size:16px;

color:#444;

}

.icon{
width:40px;
height:40px;

background:#1f4f3c;

color:white;

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

border-radius:8px;

font-size:18px;
}

/* Highlights Section */

.highlights{

padding:80px 0;
background:#f5f5f5;

}

.container{

width:90%;
max-width:1200px;
margin:auto;
text-align:center;

}

/* Title */

.section-title{

font-size:40px;
color:#1f4f3c;

}

.underline{

width:70px;
height:4px;

background:#d4a72c;

margin:10px auto 20px;

border-radius:4px;

}

.subtitle{

color:#666;
max-width:600px;
margin:auto;
margin-bottom:40px;

}

/* Grid */

.highlight-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}

/* Card */

.card{

display:flex;

align-items:center;

gap:20px;

background:white;

padding:22px;

border-radius:12px;

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

transition:0.3s;

}

.card:hover{

transform:translateY(-5px);

box-shadow:0 10px 25px rgba(0,0,0,0.1);

}

/* Icon */

.icon{

width:45px;
height:45px;

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

font-size:20px;

background:#1f4f3c;

color:white;

border-radius:10px;

}

/* Text */

.card p{

margin:0;

font-size:16px;

color:#444;

}

/* Mobile */

@media(max-width:768px){

.highlight-grid{

grid-template-columns:1fr;

}

}


.form-card{

background:white;

padding:35px;

width:320px;

border-radius:16px;

box-shadow:0 20px 40px rgba(0,0,0,0.12);

text-align:center;

}

/* Title */

.form-card h3{

font-size:22px;

margin-bottom:5px;

color:#1f4f3c;

}

.form-sub{

font-size:14px;

color:#777;

margin-bottom:20px;

}

/* Inputs */

.form-card input{

width:100%;

padding:14px;

margin-bottom:15px;

border-radius:8px;

border:1px solid #ddd;

font-size:15px;

transition:0.3s;

}

.form-card input:focus{

border-color:#1f4f3c;

outline:none;

box-shadow:0 0 0 2px rgba(31,79,60,0.1);

}

/* Button */

.register{

width:100%;

padding:14px;

border:none;

border-radius:30px;

background:linear-gradient(135deg,#1f4f3c,#2e6a51);

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:0.3s;

}

.register:hover{

transform:translateY(-2px);

box-shadow:0 10px 20px rgba(0,0,0,0.15);

}

/* Icon section */

.form-icons{

margin-top:20px;

display:flex;

flex-direction:column;

gap:12px;

}

.icon-item{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

color:#444;

justify-content:center;

}

.icon-item span{

font-size:18px;

}