:root{
--primary:#2F3E46;
--accent:#0073e6;
--light:#f3f4f6;
--text-dark:#333;
}

.logo img{
height:50px;
width:auto;
display:block;
}

.logo{
display:flex;
align-items:center;
text-decoration:none;
}

.logo span{
margin-left:10px;
font-weight:600;
font-size:18px;
color:#000;
}

/* social link */
.social-links{
display:flex;
justify-content:center;
gap:20px;
margin-top:20px;
}

.social-links a{
display:inline-flex;
align-items:center;
justify-content:center;
width:45px;
height:45px;
background:white;
border-radius:50%;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
transition:0.2s;
}

.social-links a:hover{
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

/* BASE */

body{
font-family:Arial,sans-serif;
margin:0;
background:var(--light);
color:var(--text-dark);
line-height:1.6;
position:relative;
}

/* BACKGROUND */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:
linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)),
url("/assets/images/bg-hvac.jpg");

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

filter:blur(0.3px);
z-index:-1;
}

/* HEADER */

.site-header{
background:#2F3E46;
color:white;
position:sticky;
top:0;
z-index:1000;
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 20px;
max-width:1200px;
margin:auto;
}

.logo img{
height:60px;
}



header img{
max-width:140px;
height:auto;
margin-bottom:10px;
}

.company-name{
font-size:20px;
font-weight:bold;
}

/* NAVBAR */

.navbar{
background:#354f52;
padding:12px;
text-align:center;
}

.navbar a{
color:white;
margin:0 15px;
text-decoration:none;
font-weight:bold;
}

.navbar a:hover{
text-decoration:underline;
}

/* MOBILE MENU */

.menu-toggle{
display:none;
font-size:30px;
color:white;
cursor:pointer;
position:absolute;
right:20px;
top:20px;
}

@media (max-width:768px){

.menu-toggle{
display:block;
}

.navbar{
display:none;
flex-direction:column;
text-align:left;
padding:20px;
}

.navbar.active{
display:flex;
flex-direction:column;
}

.navbar a,
.dropbtn{
display:block;
padding:12px 0;
}

.dropdown-content{
position:relative;
box-shadow:none;
margin-left:10px;
}

}


/* MAIN */

main{
max-width:1100px;
margin:0 auto;
padding:30px 20px;
text-align:center;
}

main section{
padding:40px 20px;
}

/* HERO */

.hero-info{
margin-top:20px;
font-size:15px;
opacity:.9;
}

.hero{
background:linear-gradient(135deg,#3A4F66,#5f7c8a);
color:white;
text-align:center;

padding:90px 20px;
margin-bottom:40px;
margin-top:30px;

border-radius:12px;

box-shadow:
0 20px 40px rgba(0,0,0,0.15),
0 8px 20px rgba(0,0,0,0.1);
}

.hero h1{
font-size:38px;
font-weight:700;
letter-spacing:0.5px;
text-shadow:0 2px 4px rgba(0,0,0,0.3);
}

.hero p{
font-size:18px;
margin-bottom:25px;
font-weight:500;
}

.hero-buttons{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
}

/* DROPDOWN MENU */

.dropdown{
position:relative;
display:inline-block;
}

.dropbtn{
background:none;
border:none;
color:white;
font-weight:bold;
cursor:pointer;
font-size:16px;
}

.dropdown-content{
display:none;
position:absolute;
background:#2F3E46;
min-width:220px;
box-shadow:0 8px 20px rgba(0,0,0,0.2);
border-radius:6px;
z-index:1000;
transition:0.2s;
}

.dropdown-content a{
display:block;
padding:12px 16px;
color:white;
text-decoration:none;
}

.dropdown-content a:hover{
background:#3b4f57;
}

.show{
display:block;
}



/* TRUST BADGES */

.trust-badges{
display:flex;
justify-content:center;
gap:25px;
margin-top:25px;
flex-wrap:wrap;
font-size:14px;
opacity:.9;
}

.badge{
background:rgba(255,255,255,.2);
padding:8px 14px;
border-radius:6px;
}

/* BUTTONS */

.cta-button{
background:linear-gradient(135deg,#0073e6,#0059b3);
color:white;
padding:16px 32px;
border-radius:8px;
text-decoration:none;
font-weight:bold;

transition:all .25s ease;

box-shadow:0 6px 16px rgba(0,0,0,0.2);
}

.cta-button:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

.cta-button.secondary{
background:white;
color:#2F3E46;
}

/* SERVICES */

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:20px;

max-width:900px;
margin-left:auto;
margin-right:auto;
}

.service-card{
background:white;
padding:25px;
border-radius:12px;
text-decoration:none;
color:#333;
font-weight:bold;

transition:all .25s ease;

box-shadow:
0 8px 20px rgba(0,0,0,0.06),
0 2px 6px rgba(0,0,0,0.04);
}

.service-card:hover{
transform:translateY(-6px) scale(1.02);

box-shadow:
0 18px 40px rgba(0,0,0,0.15),
0 6px 12px rgba(0,0,0,0.1);
}

/* CONTENT CARDS */

.info,
.why,
.reviews{
background:rgba(255,255,255,0.92);
backdrop-filter:blur(3px);

border-radius:12px;
padding:40px;
margin-top:40px;

box-shadow:
0 10px 25px rgba(0,0,0,0.06),
0 4px 10px rgba(0,0,0,0.04);
}

/* REVIEWS */

.reviews-container{
display:flex;
flex-direction:column;
gap:25px;
margin-top:20px;
}

.review-card{
background:white;
padding:22px;
border-radius:12px;

transition:all .25s ease;

box-shadow:
0 4px 12px rgba(0,0,0,0.05),
0 2px 4px rgba(0,0,0,0.04);
}

.review-card:hover{
transform:translateY(-4px);
box-shadow:
0 12px 25px rgba(0,0,0,0.08),
0 4px 8px rgba(0,0,0,0.05);
}

.reviews-buttons{
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
margin-top:20px;
}

.hcp-button{
background:#0e6fbe;
padding:14px 32px;
border-radius:30px;
border:none;
color:white;
cursor:pointer;
}

/* STARS */

.stars{
color:#f5b301;
font-size:20px;
margin-bottom:10px;
}

/* WHY LIST */

.why ul{
list-style:none;
padding:0;
}

.why li{
margin:10px 0;
}

.why li::before{
content:"✔";
color:#0073e6;
margin-right:8px;
}

/* CONTACT */

.contact{
background:#2F3E46;
color:white;
padding:30px 20px;
text-align:center;
margin-top:50px;
border-radius:8px 8px 0 0;
}

.contact a{
color:white;
text-decoration:none;
font-weight:bold;
}

/* FOOTER */

footer{
width:100%;
font-size:14px;
color:white;
text-align:center;
padding:20px;
background:#2F3E46;
}

/* STICKY CALL */

.sticky-call{
  bottom:90px;
  z-index:9999;
}


/* HCP REVIEWS WIDGET */

.hcp-reviews{
max-width:1000px;
margin:40px auto;
}

.hcp-reviews iframe{
width:100%;
height:1200px;
border:none;
border-radius:12px;

box-shadow:
0 10px 25px rgba(0,0,0,0.08),
0 4px 10px rgba(0,0,0,0.05);
}

/* MOBILE */


@media (max-width:768px){

.dropdown{
width:100%;
}

.dropdown-content{
position:relative;
width:100%;
box-shadow:none;
}

.menu-toggle{
display:block;
}

.navbar{
display:none;
}



.hero{
padding:60px 20px;
}

h1{
font-size:1.8em;
}

.cta-button{
width:100%;
}

.sticky-call{
    bottom:110px;
  }

}

@media (max-width:480px){

h1{
font-size:1.6em;
}

p,li{
font-size:15px;
}

footer{
font-size:12px;
}

.navbar.active{
display:flex;
flex-direction:column;
gap:10px;
padding:15px;
}

.hero-info{
margin-top:20px;
font-size:15px;
opacity:.95;
}

.installations{
margin-top:40px;
}

.install-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:20px;
}

.install-card{
background:white;
padding:15px;
border-radius:10px;

box-shadow:
0 6px 16px rgba(0,0,0,0.08),
0 2px 6px rgba(0,0,0,0.05);
}

.install-card img{
width:100%;
border-radius:8px;
}

.install-card p{
margin-top:10px;
font-size:14px;
}

}
/* MAP */
.map-container{
max-width:1000px;
margin:40px auto;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.map-container iframe{
width:100%;
height:450px;
border:0;
}

/* SOCIAL */

.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:20px;
}

.contact-card{
background:white;
padding:20px;
border-radius:12px;

box-shadow:
0 8px 20px rgba(0,0,0,0.08),
0 2px 6px rgba(0,0,0,0.05);
}

.social-links{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
margin-top:20px;
}

.social-links a{
background:white;
padding:12px 20px;
border-radius:8px;
text-decoration:none;
font-weight:bold;

box-shadow:
0 4px 10px rgba(0,0,0,0.08);
}