/*=========================================
ALFA REALTY
Responsive CSS
==========================================*/

/* Large Desktop */
@media (max-width:1400px){

.container{
width:92%;
}

.hero-left h1{
font-size:58px;
}

.hero-left h2{
font-size:34px;
}

}

/* Laptop */
@media (max-width:1200px){

.hero-grid,
.about-grid,
.contact-grid{
grid-template-columns:1fr;
gap:50px;
}

.service-grid{
grid-template-columns:repeat(2,1fr);
}

.property-grid{
grid-template-columns:repeat(2,1fr);
}

.hero-right{
order:-1;
}

.hero-left{
text-align:center;
}

.hero-buttons{
justify-content:center;
}

.hero-right::before{
display:none;
}

}

/* Tablet */
@media (max-width:992px){

header{
padding:10px 0;
}

.navbar{

flex-direction:column;

height:auto;

padding:20px 0;

}

.logo{

margin-bottom:15px;

}

nav ul{

flex-wrap:wrap;

justify-content:center;

gap:20px;

margin-bottom:20px;

}

.hero{

padding-top:200px;

}

.hero-left h1{

font-size:50px;

}

.hero-left h2{

font-size:30px;

}

.hero-left p{

font-size:16px;

}

.section-title h2{

font-size:36px;

}

.about h3,
.contact h3{

font-size:30px;

}

.features{

grid-template-columns:1fr;

}

.service-grid{

grid-template-columns:repeat(2,1fr);

}

.property-grid{

grid-template-columns:repeat(2,1fr);

}

.contact iframe{

height:400px;

}

}

/* Mobile */
@media (max-width:768px){

.container{

width:92%;

}

.hero{

padding-top:180px;

padding-bottom:70px;

}

.hero-left h5{

font-size:14px;

letter-spacing:2px;

}

.hero-left h1{

font-size:42px;

}

.hero-left h2{

font-size:26px;

}

.hero-left p{

font-size:15px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn,
.btn-outline{

width:100%;

max-width:260px;

text-align:center;

}

.service-grid{

grid-template-columns:1fr;

}

.property-grid{

grid-template-columns:1fr;

}

.section-title{

margin-bottom:50px;

}

.section-title h2{

font-size:30px;

}

.about h3,
.contact h3{

font-size:26px;

}

.about-grid,
.contact-grid{

gap:40px;

}

.card{

padding:35px 25px;

}

.property img{

height:220px;

}

.contact iframe{

height:320px;

}

footer{

padding:25px 10px;

}

}

/* Small Mobile */
@media (max-width:480px){

.logo img{

height:55px;

}

nav ul{

gap:12px;

}

nav ul li a{

font-size:14px;

}

.hero{

padding-top:170px;

}

.hero-left h1{

font-size:34px;

}

.hero-left h2{

font-size:22px;

}

.section-title h2{

font-size:26px;

}

.about h3,
.contact h3{

font-size:24px;

}

.card{

padding:30px 20px;

}

.card i{

font-size:42px;

}

.property img{

height:200px;

}

.whatsapp{

width:55px;

height:55px;

font-size:24px;

right:18px;

bottom:18px;

}

.top{

width:48px;

height:48px;

right:18px;

bottom:88px;

}

}

/* Ultra Small Devices */
@media (max-width:360px){

.hero-left h1{

font-size:30px;

}

.hero-left h2{

font-size:20px;

}

.btn,
.btn-outline{

font-size:14px;

padding:13px 20px;

}

}