/* ==========================================
   KOMODO PROPERTY SERVICES
   MAIN.CSS - PART 1
========================================== */

:root{

    --primary:#4F7A58;
    --primary-dark:#3E6246;

    --white:#FFFFFF;
    --offwhite:#F7F5F1;

    --text:#4B4B4B;

    --black:#202624;

    --gray:#F1EFEA;
    --gray2:#E7E3DC;
    --gray3:#D6D1C8;

    --glass:rgba(255,255,255,.85);

    --border:#E1DDD5;

    --shadow:0 20px 60px rgba(0,0,0,.08);

    --radius:16px;

    --transition:.35s cubic-bezier(.2,.8,.2,1);

    --max:1450px;

}

/* RESET */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

    background:#F7F5F1;

    color:#222;

    font-family:"Inter",sans-serif;

    overflow-x:hidden;

}

/* SCROLLBAR */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0b0b0b;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:50px;

}

/* LINKS */

a{

text-decoration:none;

color:inherit;

}

/* IMAGES */

img{

display:block;

max-width:100%;

}

/* ===================================
BACKGROUND
=================================== */





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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

display:flex;

justify-content:center;

padding:20px;

transition:.4s;

}

.navbar{

width:min(var(--max),94%);

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

background:white;

padding:18px 34px;

border-radius:18px;

border:1px solid #ece8df;

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

}

/* LOGO */

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo img{

height:58px;

}

.logoText{

display:flex;

flex-direction:column;

}

.logoText h3{

font-size:22px;

font-weight:800;

letter-spacing:.08em;

}

.logoText span{

font-size:12px;

text-transform:uppercase;

color:#8f8f8f;

letter-spacing:2px;

}

/* NAV */

.navbar ul{

display:flex;

gap:42px;

list-style:none;

}

.navbar li{

position:relative;

}

.navbar li::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:var(--transition);

}

.navbar li:hover::after{

width:100%;

}

.navbar a{

font-size:15px;

font-weight:600;

transition:.3s;

}

.navbar a:hover{

color:var(--primary);

}

/* BUTTON */

.quoteButton{

padding:15px 28px;

background:var(--primary);

border-radius:100px;

color:black;

font-weight:700;

transition:.3s;

box-shadow:

0 15px 35px rgba(115,255,84,.25);

}

.quoteButton:hover{

transform:translateY(-4px);

background:var(--primary-dark);

}

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

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.heroImage{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

filter:brightness(.58);

transform:scale(1.08);

animation:heroZoom 18s ease-in-out infinite alternate;

}

@keyframes heroZoom{

from{

transform:scale(1.08);

}

to{

transform:scale(1.16);

}

}

.overlay{

background:

linear-gradient(

90deg,

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

rgba(0,0,0,.25)

);

}

/* CONTENT */

.heroContent{

position:relative;

z-index:5;

width:min(1450px,92%);

text-align:left;

padding-top:100px;

}

.smallTitle{

display:inline-block;

padding:12px 22px;

border-radius:100px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(12px);

color:var(--primary);

font-weight:700;

letter-spacing:.15em;

text-transform:uppercase;

margin-bottom:30px;

}

.hero h1{

font-size:clamp(72px,8vw,110px);

font-weight:900;

line-height:.9;

max-width:850px;

letter-spacing:-4px;

}

.hero p{

margin:35px 0;

max-width:700px;

font-size:22px;

color:#ececec;

}

/* BUTTONS */

.heroButtons{

display:flex;

justify-content:flex-start;

gap:22px;

flex-wrap:wrap;

}

.primary{

padding:20px 42px;

background:var(--primary);

color:black;

border-radius:100px;

font-weight:800;

transition:.3s;

box-shadow:0 18px 40px rgba(115,255,84,.28);

}

.primary:hover{

transform:translateY(-6px);

}

.secondary{

padding:20px 42px;

border-radius:100px;

border:1px solid rgba(255,255,255,.15);

background:rgba(255,255,255,.05);

backdrop-filter:blur(15px);

transition:.3s;

}

.secondary:hover{

background:white;

color:black;

}

/* TRUST */

.trust{

margin-top:65px;

display:flex;

justify-content:flex-start;

gap:22px;

flex-wrap:wrap;

}

.trust div{

padding:16px 28px;

border-radius:100px;

background:rgba(255,255,255,.05);

backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.08);

font-weight:600;

color:#d6d6d6;

}

/* ===================================
SECTION
=================================== */

section{

padding:130px 0;

}

.sectionHeader{

width:min(900px,90%);

margin:auto;

text-align:center;

margin-bottom:80px;

}

.sectionHeader span{

display:inline-block;

color:var(--primary);

text-transform:uppercase;

letter-spacing:.15em;

font-size:14px;

font-weight:800;

margin-bottom:20px;

}

.sectionHeader h2{

font-size:clamp(48px,5vw,72px);

font-weight:900;

line-height:1.05;

margin-bottom:25px;

}

.sectionHeader p{

font-size:20px;

line-height:1.8;

color:#bcbcbc;

max-width:760px;

margin:auto;

}
/* ===================================
STATS
=================================== */

.stats{

width:min(var(--max),92%);
margin:auto;

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

gap:30px;

}

.stat{

background:white;

border:1px solid var(--border);

border-radius:var(--radius);

padding:45px;

text-align:center;

transition:var(--transition);

box-shadow:var(--shadow);

}

.stat:hover{

transform:translateY(-10px);

border-color:rgba(115,255,84,.25);

}

.stat h2{

font-size:58px;

font-weight:900;

color:var(--primary);

margin-bottom:10px;

}

.stat p{

color:#bdbdbd;

font-size:18px;

}

/* ===================================
SERVICES
=================================== */

.serviceGrid{

width:min(var(--max),92%);

margin:auto;

display:grid;

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

gap:40px;

}

.serviceCard{

background:white;

border:1px solid var(--border);

border-radius:28px;

overflow:hidden;

transition:var(--transition);

box-shadow:var(--shadow);

}

.serviceCard:hover{

transform:translateY(-14px);

border-color:rgba(115,255,84,.3);

}

.serviceCard img{

height:300px;

width:100%;

object-fit:cover;

transition:.6s;

}

.serviceCard:hover img{

transform:scale(1.08);

}

.serviceCard h3{

font-size:34px;

padding:35px 35px 15px;

font-weight:800;

}

.serviceCard p{

padding:0 35px;

line-height:1.8;

color:#c8c8c8;

margin-bottom:35px;

}

.serviceCard a{

display:inline-flex;

margin:0 35px 35px;

padding:14px 24px;

border-radius:100px;

background:var(--primary);

color:#000;

font-weight:700;

}

/* ===================================
PROJECTS
=================================== */

.projectGrid{

width:min(var(--max),92%);

margin:auto;

display:grid;

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

gap:35px;

}

.project{

position:relative;

overflow:hidden;

border-radius:28px;

height:520px;

box-shadow:var(--shadow);

cursor:pointer;

}

.project img{

width:100%;

height:100%;

object-fit:cover;

transition:.7s;

}

.project:hover img{

transform:scale(1.1);

}

.project::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

transparent,

rgba(0,0,0,.75)

);

}

.projectInfo{

position:absolute;

bottom:40px;

left:35px;

z-index:5;

}

.projectInfo h3{

font-size:34px;

font-weight:800;

margin-bottom:8px;

}

.projectInfo p{

color:#d7d7d7;

}

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

.cta{

width:min(var(--max),92%);

margin:120px auto;

background:#2B352E;
color:white;


border-radius:34px;

padding:110px 70px;

text-align:center;

color:black;

box-shadow:

0 40px 90px rgba(0,0,0,.45);

}

.cta h2{

font-size:72px;

font-weight:900;

margin-bottom:25px;

line-height:1;

}

.cta p{

font-size:22px;

margin-bottom:40px;

}

.cta a{

display:inline-block;

padding:20px 42px;

border-radius:100px;

background:#000;

color:white;

font-weight:800;

transition:.3s;

}

.cta a:hover{

transform:translateY(-5px);

}

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

footer{

margin-top:120px;

background:#202624;

border-top:1px solid var(--border);

}

.footerTop{

width:min(var(--max),92%);

margin:auto;

padding:90px 0;

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:60px;

}

.footerTop img{

width:180px;

margin-bottom:20px;

}

.footerTop h4{

margin-bottom:20px;

font-size:20px;

}

.footerTop a{

display:block;

margin-bottom:12px;

color:#bfbfbf;

transition:.3s;

}

.footerTop a:hover{

color:var(--primary);

padding-left:8px;

}

.footerTop p{

color:#bfbfbf;

line-height:1.8;

}

.footerBottom{

border-top:1px solid var(--border);

padding:25px;

text-align:center;

color:#999;

}

/* ===================================
ANIMATIONS
=================================== */

.fade{

opacity:0;

transform:translateY(40px);

transition:1s;

}

.fade.show{

opacity:1;

transform:none;

}

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

@media(max-width:1200px){

.projectGrid{

grid-template-columns:1fr 1fr;

}

.stats{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:950px){

.navbar ul{

display:none;

}

.serviceGrid{

grid-template-columns:1fr;

}

.projectGrid{

grid-template-columns:1fr;

}

.footerTop{

grid-template-columns:1fr;

text-align:center;

}

.footerTop img{

margin:auto auto 20px;

}

.hero h1{

font-size:68px;

letter-spacing:-2px;

}

.cta h2{

font-size:54px;

}

}

@media(max-width:650px){

.heroButtons{

flex-direction:column;

}

.primary,
.secondary{

width:100%;

text-align:center;

}

.stats{

grid-template-columns:1fr;

}

.hero h1{

font-size:52px;

}

.sectionHeader h2{

font-size:42px;

}

.cta{

padding:70px 35px;

}

.cta h2{

font-size:42px;

}

.trust{

flex-direction:column;

align-items:center;

}

}