/* ==========================================================
   REALTY+
   Responsive Stylesheet
========================================================== */

/* ==========================
   1200px
========================== */

@media (max-width:1200px){

.hero-grid{

grid-template-columns:1fr;
gap:70px;

}

.hero-left{

text-align:center;

}

.hero-left p{

margin-left:auto;
margin-right:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.hero-right{

order:-1;

}

.timeline{

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

}

.timeline::before{

display:none;

}

.feature-row{

grid-template-columns:1fr;

}

.company-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

}

/* ==========================
   992px
========================== */

@media (max-width:992px){

h1{

font-size:52px;

}

h2{

font-size:38px;

}

section{

padding:90px 0;

}

.feature-grid{

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

}

.trust-grid{

grid-template-columns:1fr;

}

.footer-grid{

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

gap:40px;

}

.nav-actions{

display:none;

}

.nav-menu{

position:fixed;

top:84px;

right:-100%;

width:300px;

height:calc(100vh - 84px);

background:#ffffff;

display:flex;

flex-direction:column;

justify-content:flex-start;

align-items:flex-start;

padding:40px;

gap:28px;

box-shadow:-10px 0 30px rgba(15,23,42,.08);

transition:.35s ease;

}

.nav-menu.active{

right:0;

}

.hamburger{

display:flex;

}

}

/* ==========================
   768px
========================== */

@media (max-width:768px){

h1{

font-size:42px;
letter-spacing:-1px;

}

h2{

font-size:34px;

}

p{

font-size:17px;

}

.hero{

padding-top:150px;

}

.hero-grid{

gap:50px;

}

.chat-card{

max-width:100%;

}

.feature-grid{

grid-template-columns:1fr;

}

.timeline{

grid-template-columns:1fr;

}

.benefit-grid{

grid-template-columns:1fr;

}

.hero-stats{

flex-direction:column;

align-items:center;

}

.stat-card{

width:100%;
max-width:320px;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

}

.page-hero{

padding-top:150px;

}

.legal-container{

padding:40px 28px;

}

.cta-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn,
.cta-buttons .btn{

width:100%;
max-width:320px;

}

}

/* ==========================
   576px
========================== */

@media (max-width:576px){

.container{

width:92%;

}

section{

padding:75px 0;

}

h1{

font-size:36px;

}

h2{

font-size:30px;

}

.navbar{

height:76px;

}

.logo{

font-size:22px;

}

.logo-box{

width:42px;
height:42px;
font-size:18px;

}

.badge{

font-size:13px;
padding:8px 14px;

}

.hero-stats{

margin-top:40px;

}

.stat-card{

padding:20px;

}

.feature-card,
.trust-card,
.timeline-card,
.benefit-card,
.company-card,
.contact-card{

padding:28px;

}

.chat-header{

padding:18px;

}

.chat-body{

padding:18px;

}

.workflow{

padding:18px;

}

.message{

font-size:14px;

}

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

padding:16px;

}

.btn{

padding:15px 24px;

}

.section-title{

margin-bottom:50px;

}

}

/* ==========================
   420px
========================== */

@media (max-width:420px){

h1{

font-size:32px;

}

h2{

font-size:27px;

}

.hero{

padding-top:135px;

}

.logo span{

display:none;

}

.nav-menu{

width:100%;

}

.chat-card{

border-radius:20px;

}

.footer{

padding-top:70px;

}

.footer-logo{

font-size:22px;

}

}