/*==================================
LAPTOP (1200px)
==================================*/

@media (max-width:1200px){

.container{

width:92%;

}

.hero h1,
.page-hero h1{

font-size:58px;

}

.section-title h2{

font-size:42px;

}

.about-grid,
.plot-grid,
.office-grid{

gap:45px;

}

}


/*==================================
TABLET (992px)
==================================*/

@media (max-width:992px){

.hero h1,
.page-hero h1{

font-size:48px;

}

.hero p,
.page-hero p{

font-size:18px;

}

.about-grid,
.plot-grid,
.office-grid{

grid-template-columns:1fr;

}

.counter-grid{

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

}

.footer-grid{

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

}

.slider img,
.plot-slider img{

height:420px;

}

}


/*==================================
MOBILE (768px)
==================================*/

@media (max-width:768px){

html{

overflow-x:hidden;

}

body{

overflow-x:hidden;

}

/* Header */

.header{

padding:0;

}

.nav-container{

height:75px;

}

/* Logo */

.logo{

font-size:24px;

}

/* Hamburger */

.menu-btn{

display:block;

z-index:1001;

}

/* Mobile Menu */

.navbar{

position:absolute;

top:75px;

left:0;

width:100%;

display:none;

background:#ffffff;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.navbar.active{

display:block;

animation:menuFade .35s ease;

}

.nav-links{

flex-direction:column;

padding:25px;

gap:20px;

}

.nav-links li{

width:100%;

}

.nav-links a{

display:block;

padding:14px;

border-radius:12px;

text-align:center;

}

.nav-links a:hover{

background:#f6f6f6;

}

/* Hero */

.hero,
.page-hero{

min-height:80vh;

background-attachment:scroll;

padding:120px 0 70px;

}

.hero h1,
.page-hero h1{

font-size:36px;

line-height:1.3;

}

.hero p,
.page-hero p{

font-size:16px;

}

/* Buttons */

.hero-buttons,
.about-buttons,
.map-buttons{

flex-direction:column;

}

.btn{

width:100%;

}

/* Cards */

.benefits-grid,
.features-grid,
.contact-grid,
.mission-grid{

grid-template-columns:1fr;

}

.counter-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer ul{

padding:0;

}

.slider img,
.plot-slider img{

height:280px;

}

.offer-card{

padding:45px 25px;

}

.offer-card h2{

font-size:34px;

}

.section-title h2{

font-size:32px;

}

.about-content h2{

font-size:34px;

}

.enquiry-box{

padding:30px 20px;

}

.whatsapp,
.call-btn{

width:58px;

height:58px;

font-size:24px;

right:18px;

}

.whatsapp{

bottom:18px;

}

.call-btn{

bottom:90px;

}

}


/*==================================
SMALL MOBILE (480px)
==================================*/

@media (max-width:480px){

.container{

width:94%;

}

.hero h1,
.page-hero h1{

font-size:30px;

}

.hero p,
.page-hero p{

font-size:15px;

}

.section-title h2{

font-size:28px;

}

.logo{

font-size:22px;

}

.price{

font-size:34px;

}

.counter-card h2{

font-size:40px;

}

.slider img,
.plot-slider img{

height:230px;

}

.cta-box{

padding:45px 20px;

}

.cta-box h2{

font-size:30px;

}

.footer{

padding-top:70px;

}

}


/*==================================
MENU ANIMATION
==================================*/

@keyframes menuFade{

from{

opacity:0;

transform:translateY(-15px);

}

to{

opacity:1;

transform:translateY(0);

}

}








































/*==================================
VERY SMALL DEVICES (360px)
==================================*/

@media (max-width:360px){

.container{

width:95%;

}

.logo{

font-size:20px;

}

.hero,
.page-hero{

padding-top:110px;

min-height:75vh;

}

.hero h1,
.page-hero h1{

font-size:26px;

line-height:1.35;

}

.hero p,
.page-hero p{

font-size:14px;

}

.section-title h2{

font-size:24px;

}

.about-content h2{

font-size:28px;

}

.offer-card h2{

font-size:28px;

}

.price{

font-size:28px;

}

.btn{

padding:14px 20px;

font-size:15px;

}

.whatsapp,
.call-btn{

width:52px;

height:52px;

font-size:22px;

right:15px;

}

.whatsapp{

bottom:15px;

}

.call-btn{

bottom:80px;

}

.slider img,
.plot-slider img{

height:200px;

}

}


/*==================================
LANDSCAPE MOBILE
==================================*/

@media (max-height:500px) and (orientation:landscape){

.hero,
.page-hero{

min-height:120vh;

padding:120px 0;

}

}


/*==================================
TABLET LANDSCAPE
==================================*/

@media (min-width:768px) and (max-width:1024px){

.hero h1,
.page-hero h1{

font-size:52px;

}

.section-title h2{

font-size:40px;

}

}


/*==================================
ANTI ZOOM FIX
==================================*/

html{

-webkit-text-size-adjust:100%;

text-size-adjust:100%;

}


/*==================================
IOS FIX
==================================*/

input,
select,
textarea{

font-size:16px;

}


/*==================================
IMAGE FIX
==================================*/

img{

max-width:100%;

height:auto;

display:block;

}


/*==================================
MAP FIX
==================================*/

iframe{

width:100%;

border:0;

display:block;

}


/*==================================
PERFORMANCE
==================================*/

*{

-webkit-tap-highlight-color:transparent;

}

img,
.card,
.plot-slider,
.hero,
.page-hero{

transform:translateZ(0);

backface-visibility:hidden;

}


/*==================================
SMOOTH SCROLL
==================================*/

html{

scroll-behavior:smooth;

}


/*==================================
NO HORIZONTAL SCROLL
==================================*/

html,
body{

max-width:100%;

overflow-x:hidden;

}


/*==================================
BUTTON FIX
==================================*/

.btn{

white-space:nowrap;

}


/*==================================
FORM FIX
==================================*/

input,
textarea,
select{

width:100%;

}


/*==================================
END
==================================*/