/* =========================================
   FET REALTY CORP
   FIX & FLIP BRANDING
   900PX RESPONSIVE LAYOUT
========================================= */


:root{

--navy:#071B2F;
--gold:#C9A227;
--stone:#F5F3EF;
--white:#ffffff;
--black:#111111;
--gray:#667085;

}


/* RESET */

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


html{
scroll-behavior:smooth;
}


body{

font-family:'Inter',sans-serif;
background:#fff;
color:var(--black);
line-height:1.6;

}



h1,
h2,
h3,
h4{

font-family:'Playfair Display',serif;

}



/* =========================================
CONTAINER
========================================= */


.container{

width:100%;
max-width:900px;
margin:auto;
padding:0 20px;

}



/* =========================================
HEADER
========================================= */


.header{

position:absolute;
top:0;
left:0;
width:100%;
z-index:1000;

}



.nav{

height:85px;
display:flex;
align-items:center;
justify-content:space-between;

}



.logo img{

width:145px;
height:auto;

}



.menu{

display:flex;
align-items:center;
gap:25px;

}



.menu a{

color:white;
text-decoration:none;
font-size:14px;
font-weight:600;

}



.menu a:hover,
.menu .active{

color:var(--gold);

}



.menu select{

background:transparent;
color:white;
border:1px solid rgba(255,255,255,.4);
padding:7px;
border-radius:5px;

}



.mobile-btn{

display:none;
color:white;
font-size:28px;
cursor:pointer;

}



.mobile-menu{

display:none;
background:var(--navy);
padding:20px;

}


.mobile-menu a{

display:block;
padding:10px;
color:white;
text-decoration:none;

}


.mobile-menu.active{

display:block;

}





/* =========================================
HERO
========================================= */


.hero{

min-height:620px;
display:flex;
align-items:center;

background:

linear-gradient(
rgba(7,27,47,.75),
rgba(7,27,47,.85)
),

url("../images/hero-property.jpg");


background-size:cover;
background-position:center;

color:white;

}



.hero-content{

max-width:700px;

}



.hero-logo{

width:180px;
margin-bottom:25px;

}



.hero h1{

font-size:58px;
line-height:1.05;
margin-bottom:20px;

}



.hero p{

font-size:18px;
max-width:620px;
margin-bottom:35px;
color:#eee;

}



.hero-buttons{

display:flex;
gap:15px;

}




.btn{

display:inline-block;
padding:14px 30px;
border-radius:50px;
font-weight:700;
text-decoration:none;
transition:.3s;

}



.gold{

background:var(--gold);
color:white;

}



.gold:hover{

opacity:.85;

}



.outline{

border:1px solid white;
color:white;

}



.outline:hover{

background:white;
color:var(--navy);

}





/* =========================================
SECTIONS
========================================= */


.section{

padding:75px 0;

}



.section.light{

background:var(--stone);

}



.center{

text-align:center;
font-size:38px;
margin-bottom:40px;

}



/* INTRO */


.intro{

text-align:center;

}



.intro h2{

font-size:42px;
margin-bottom:20px;

}



.intro p{

max-width:700px;
margin:auto;
color:var(--gray);
font-size:18px;

}





/* =========================================
PROCESS
========================================= */


.process-grid,
.service-grid,
.market-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;

}



.process-card,
.service-card,
.market-card{

background:white;
border:1px solid #e5e7eb;
border-radius:14px;
padding:30px;

}



.number{

font-size:42px;
font-weight:800;
color:var(--gold);

}



.process-card h3,
.service-card h3,
.market-card h3{

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

}



.process-card p,
.service-card p,
.market-card p{

color:var(--gray);

}





/* =========================================
MARKETS
========================================= */


.market-card{

text-align:center;

}





/* =========================================
INVESTOR CTA
========================================= */


.investor-cta{

background:var(--navy);
color:white;
padding:80px 0;
text-align:center;

}



.investor-cta h2{

font-size:42px;
margin-bottom:20px;

}



.investor-cta p{

max-width:650px;
margin:0 auto 30px;

}





/* =========================================
FOOTER
========================================= */


footer{

background:#050F1A;
color:white;
padding-top:60px;

}



.footer{

display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;

}



.footer-logo{

width:150px;
margin-bottom:15px;

}



.footer h4{

color:var(--gold);
margin-bottom:15px;

}



.footer a{

display:block;
text-decoration:none;
color:#ccc;
margin-bottom:8px;

}



.footer p{

color:#ccc;

}



.copyright{

margin-top:40px;
padding:20px;
text-align:center;
border-top:1px solid rgba(255,255,255,.1);
color:#aaa;

}





/* =========================================
RESPONSIVE
========================================= */


@media(max-width:800px){


.menu{

display:none;

}


.mobile-btn{

display:block;

}



.hero{

min-height:560px;

}



.hero h1{

font-size:42px;

}



.hero p{

font-size:16px;

}



.hero-buttons{

flex-direction:column;

}



.btn{

text-align:center;
width:100%;

}



.process-grid,
.service-grid,
.market-grid,
.footer{

grid-template-columns:1fr;

}



.center{

font-size:32px;

}



.intro h2{

font-size:34px;

}



.investor-cta h2{

font-size:32px;

}


}