*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Poppins',sans-serif;

}



body{

background:#f8fafc;

overflow-x:hidden;

}



.container{

width:90%;

max-width:1200px;

margin:auto;

}



header{

position:fixed;

top:0;

left:0;

width:100%;

padding:18px 0;

z-index:999;

transition:.3s;

}



header.sticky{

background:#0f172a;

box-shadow:

0 5px 20px

rgba(0,0,0,.2);

}



nav{

display:flex;

justify-content:space-between;

align-items:center;

}



.logo{

font-size:32px;

font-weight:700;

color:white;

}



.logo span{

color:#f97316;

}



.nav-menu{

display:flex;

list-style:none;

gap:35px;

}



.nav-menu a{

text-decoration:none;

color:white;

font-weight:500;

transition:.3s;

}



.nav-menu a:hover{

color:#f97316;

}



#menu-btn{

display:none;

font-size:30px;

color:white;

cursor:pointer;

}



#mobile-menu{

position:fixed;

top:80px;

right:-100%;

width:280px;

height:100vh;

background:#0f172a;

padding-top:40px;

transition:.4s;

}



#mobile-menu.active{

right:0;

}



#mobile-menu a{

display:block;

padding:18px 30px;

text-decoration:none;

color:white;

border-bottom:

1px solid

rgba(255,255,255,.1);

}



#mobile-menu a:hover{

background:#1e293b;

}



.hero{

height:100vh;

display:flex;

align-items:center;

background:

linear-gradient(

rgba(0,0,0,.55),

rgba(0,0,0,.55)

),

url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1500&q=80');

background-size:cover;

background-position:center;

}



.hero h1{

font-size:65px;

color:white;

margin-bottom:20px;

}



.hero p{

font-size:22px;

color:white;

}



.hero{

position:relative;

height:100vh;

overflow:hidden;

}




.slide{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

opacity:0;

transition:

opacity

1s ease;

}




.slide.active{

opacity:1;

z-index:1;

}




.slide img{

width:100%;

height:100%;

object-fit:cover;

}




.overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:

rgba(0,0,0,.55);

}




.content{

position:absolute;

top:50%;

left:10%;

transform:

translateY(-50%);

color:white;

z-index:2;

max-width:700px;

}




.content h1{

font-size:70px;

margin-bottom:20px;

line-height:1.2;

animation:

slideUp

1s ease;

}




.content p{

font-size:24px;

margin-bottom:40px;

animation:

slideUp

1.3s ease;

}




.buttons{

display:flex;

gap:20px;

}




.btn{

background:#f97316;

padding:

14px 35px;

border-radius:30px;

color:white;

text-decoration:none;

font-weight:600;

}




.btn2{

border:

2px solid white;

padding:

14px 35px;

border-radius:30px;

color:white;

text-decoration:none;

font-weight:600;

}




.slider-controls{

position:absolute;

bottom:40px;

right:40px;

z-index:5;

}




.slider-controls button{

width:50px;

height:50px;

border:none;

border-radius:50%;

font-size:22px;

cursor:pointer;

margin-left:10px;

}




@keyframes slideUp{


from{

opacity:0;

transform:

translateY(50px);

}



to{

opacity:1;

transform:

translateY(0);

}

}





.search-section{

margin-top:-70px;

position:relative;

z-index:10;

}




.search-box{


background:white;

padding:35px;

border-radius:20px;


display:flex;

justify-content:space-between;

align-items:center;


gap:20px;


box-shadow:

0 10px 40px

rgba(0,0,0,.1);

}




.search-box select{


flex:1;

padding:18px;

font-size:16px;


border:

1px solid #ddd;


border-radius:12px;


outline:none;

}




.search-box button{


padding:

18px 40px;


background:#f97316;


color:white;


border:none;


border-radius:12px;


font-size:16px;


font-weight:600;


cursor:pointer;


transition:.3s;

}




.search-box button:hover{


background:#ea580c;

}






.services{


padding:

100px 0;


background:#f8fafc;

}




.section-title{


text-align:center;


margin-bottom:60px;

}




.section-title h2{


font-size:45px;


color:#0f172a;


margin-bottom:15px;

}




.section-title p{


color:#64748b;

}




.services-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:30px;

}




.service-card{


background:white;


padding:40px 30px;


border-radius:25px;


text-align:center;


transition:.4s;


box-shadow:

0 10px 30px

rgba(0,0,0,.08);

}




.service-card:hover{


transform:

translateY(-15px);

}




.icon{


font-size:50px;


margin-bottom:25px;

}




.service-card h3{


font-size:24px;


margin-bottom:20px;


color:#0f172a;

}




.service-card p{


color:#64748b;


line-height:1.8;

}



.properties{

padding:100px 0;

background:white;

}



.property-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:30px;

}




.property-card{


background:white;


border-radius:25px;


overflow:hidden;


box-shadow:

0 10px 30px

rgba(0,0,0,.08);


transition:.4s;

}




.property-card:hover{


transform:

translateY(-15px);


box-shadow:

0 20px 40px

rgba(0,0,0,.12);

}




.property-image{


position:relative;


height:260px;


overflow:hidden;

}




.property-image img{


width:100%;


height:100%;


object-fit:cover;


transition:.5s;

}




.property-card:hover img{


transform:

scale(1.1);

}




.price{


position:absolute;


top:20px;


left:20px;


background:#f97316;


color:white;


padding:

10px 18px;


border-radius:30px;


font-weight:600;

}




.property-info{


padding:30px;

}




.property-info h3{


font-size:28px;


margin-bottom:15px;


color:#0f172a;

}




.location{


color:#64748b;


margin-bottom:25px;

}




.details{


display:flex;


flex-direction:column;


gap:12px;


color:#475569;


margin-bottom:30px;

}




.property-btn{


display:inline-block;


background:#0f172a;


color:white;


padding:

14px 30px;


border-radius:30px;


text-decoration:none;


transition:.3s;

}




.property-btn:hover{


background:#f97316;

}



.about{

padding:100px 0;

background:white;

}



.about-wrapper{


display:flex;


align-items:center;


gap:60px;

}




.about-image{


flex:1;

}




.about-image img{


width:100%;


border-radius:30px;

}




.about-content{


flex:1;

}




.about-content h2{


font-size:50px;


margin-bottom:25px;


color:#0f172a;

}




.about-content p{


line-height:1.9;


color:#64748b;


margin-bottom:30px;

}




.about-content ul{


list-style:none;


margin-bottom:40px;

}




.about-content li{


margin-bottom:18px;


font-size:18px;

}




.about-btn{


background:#f97316;


padding:

15px 35px;


border-radius:30px;


color:white;


text-decoration:none;

}






.stats{


padding:100px 0;


background:#0f172a;

}




.stats-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:30px;

}




.stat{


text-align:center;


color:white;

}




.stat h2{


font-size:65px;


color:#f97316;

}




.stat p{


font-size:18px;

}







.testimonials{


padding:100px 0;


background:#f8fafc;

}




.testimonial-slider{


max-width:800px;


margin:auto;


position:relative;

}




.testimonial{


display:none;


text-align:center;


padding:50px;


background:white;


border-radius:30px;


box-shadow:

0 10px 40px

rgba(0,0,0,.08);

}




.testimonial.active{


display:block;

}




.stars{


font-size:35px;


color:#f97316;


margin-bottom:25px;

}




.testimonial p{


font-size:22px;


line-height:1.8;


margin-bottom:30px;


color:#475569;

}




.testimonial h3{


font-size:24px;

}




.gallery{

padding:100px 0;

background:white;

}



.gallery-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:25px;

}




.gallery-item{


overflow:hidden;


border-radius:25px;


cursor:pointer;

}




.gallery-item img{


width:100%;


height:300px;


object-fit:cover;


transition:.5s;

}




.gallery-item:hover img{


transform:

scale(1.1);

}





#lightbox{


position:fixed;


top:0;

left:0;


width:100%;

height:100%;


background:

rgba(0,0,0,.9);


display:none;


justify-content:center;


align-items:center;


z-index:9999;

}




#lightbox img{


max-width:90%;


max-height:85%;


border-radius:20px;

}




#close{


position:absolute;


top:40px;


right:50px;


font-size:50px;


color:white;


cursor:pointer;

}






.contact{


padding:100px 0;


background:#f8fafc;

}




.contact-wrapper{


display:flex;


gap:60px;

}




.contact-info{


flex:1;

}




.contact-info h2{


font-size:45px;


margin-bottom:30px;

}




.contact-info p{


font-size:20px;


margin-bottom:25px;

}




.map iframe{


width:100%;


height:350px;


border:none;


border-radius:25px;

}





.contact-form{


flex:1;

}




.contact-form form{


background:white;


padding:50px;


border-radius:30px;


box-shadow:

0 10px 40px

rgba(0,0,0,.08);

}




.contact-form input,


.contact-form textarea{


width:100%;


padding:18px;


margin-bottom:25px;


border:

1px solid #ddd;


border-radius:12px;


outline:none;

}




.contact-form textarea{


height:160px;


resize:none;

}




.contact-form button{


background:#f97316;


color:white;


padding:

18px 40px;


border:none;


border-radius:30px;


cursor:pointer;


font-size:18px;

}



.whatsapp{

position:fixed;

bottom:25px;

right:25px;

width:70px;

height:70px;

background:#fff;

border-radius:50%;

padding:12px;

box-shadow:

0 10px 30px

rgba(0,0,0,.2);

z-index:999;

transition:.3s;

}



.whatsapp img{

width:100%;

height:100%;

}



.whatsapp:hover{

transform:

scale(1.1);

box-shadow:

0 15px 35px

rgba(0,0,0,.3);

}



footer{

background:#0f172a;

padding-top:80px;

color:white;

}




.footer-grid{


display:grid;


grid-template-columns:

2fr 1fr 1fr 1fr;


gap:50px;

}




.footer-col h2{


font-size:36px;


margin-bottom:25px;

}




.footer-col h2 span{


color:#f97316;

}




.footer-col h3{


font-size:24px;


margin-bottom:25px;


position:relative;

}




.footer-col h3::after{


content:'';


position:absolute;


left:0;


bottom:-10px;


width:40px;


height:3px;


background:#f97316;

}




.footer-col p{


color:#cbd5e1;


line-height:1.9;


margin-bottom:15px;

}




.footer-col ul{


list-style:none;

}




.footer-col ul li{


margin-bottom:18px;

}




.footer-col ul li a{


text-decoration:none;


color:#cbd5e1;


transition:.3s;

}




.footer-col ul li a:hover{


color:#f97316;


padding-left:8px;

}




.social-links{


display:flex;


gap:15px;


margin-top:25px;

}




.social-links a{


width:45px;


height:45px;


background:

rgba(255,255,255,.08);


border-radius:50%;


display:flex;


justify-content:center;


align-items:center;


text-decoration:none;


font-size:22px;


transition:.3s;

}




.social-links a:hover{


background:#f97316;


transform:

translateY(-6px);

}




.footer-bottom{


margin-top:70px;


border-top:

1px solid

rgba(255,255,255,.1);


padding:25px 0;


text-align:center;

}




.footer-bottom p{


color:#94a3b8;

}