:root{
      --primary:#0e5e6f;
      --secondary:#14b8a6;
      --accent:#f4b400;
      --dark:#1f2937;
      --text:#6b7280;
      --light:#f8fafc;
      --white:#ffffff;
      --border:#e5e7eb;
    }

    *{
      box-sizing:border-box;
      font-family:'Poppins', sans-serif;
    }

    body{
      color:var(--dark);
      background:#fff;
    }

    a{
      text-decoration:none;
    }

    .topbar{
      background:var(--primary);
      color:#fff;
      font-size:14px;
      padding:10px 0;
    }

    .topbar a{
      color:#fff;
      }


    .topbar .info-item{
      margin-right:20px;
    }

    .navbar{
      background:#fff;
      box-shadow:0 8px 30px rgba(0,0,0,.05);
      padding:10px 0;
    }

    .navbar-brand{
      font-weight:800;
      color:var(--primary);
      font-size:28px;
    }

    .navbar-brand span{
      color:var(--secondary);
    }

    .nav-link{
      color:var(--dark);
      font-weight:500;
      margin:0 8px;
    }

    .btn-main{
      background:var(--secondary);
      color:#fff;
      padding:12px 22px;
      border-radius:30px;
      font-weight:600;
      border:none;
      transition:.3s;
    }

    .btn-main:hover{
      background:var(--primary);
      color:#fff;
    }


    .btn-phone{
      background:var(--secondary);
      color:#fff;
      font-size: 35px;
      padding:12px 22px;
      border-radius:30px;
      font-weight:600;
      border:none;
      transition:.3s;
    }

    .btn-phone:hover{
      background:var(--primary);
      color:#fff;
    }

    .hero-img{
      position:relative;
      min-height:90vh;
      display:flex;
      align-items:center;
      background:
        linear-gradient(to right, rgba(11,39,53,.85), rgba(11,39,53,.55)),
        url('../img/hero-back.webp') center/cover no-repeat;
      color:#fff;
    }

     .res{
      position:relative;
      min-height:90vh;
      display:flex;
      align-items:center;
      background:
        linear-gradient(to right, rgba(11,39,53,.85), rgba(11,39,53,.55)),
        url('../img/hero-residential.webp') center/cover no-repeat;
      color:#fff;
    }

    .vent{
      position:relative;
      min-height:90vh;
      display:flex;
      align-items:center;
      background:
        linear-gradient(to right, rgba(11,39,53,.85), rgba(11,39,53,.55)),
        url('../img/hero-vent.webp') center/cover no-repeat;
      color:#fff;
    }

    .cont{
      position:relative;
      min-height:90vh;
      display:flex;
      align-items:center;
      background:
        linear-gradient(to right, rgba(11,39,53,.85), rgba(11,39,53,.55)),
        url('../img/hero-contact.webp') center/cover no-repeat;
      color:#fff;
    }

    .blo{
      position:relative;
      min-height:90vh;
      display:flex;
      align-items:center;
      background:
        linear-gradient(to right, rgba(11,39,53,.85), rgba(11,39,53,.55)),
        url('../img/hero-blo.webp') center/cover no-repeat;
      color:#fff;
    }

    .faq{
      position:relative;
      min-height:90vh;
      display:flex;
      align-items:center;
      background:
        linear-gradient(to right, rgba(11,39,53,.85), rgba(11,39,53,.55)),
        url('../img/hero-faq.webp') center/cover no-repeat;
      color:#fff;
    }

    .locat{
      position:relative;
      min-height:90vh;
      display:flex;
      align-items:center;
      background:
        linear-gradient(to right, rgba(11,39,53,.85), rgba(11,39,53,.55)),
        url('../img/hero-locat.webp') center/cover no-repeat;
      color:#fff;
    }

    .furnance{
      position:relative;
      min-height:90vh;
      display:flex;
      align-items:center;
      background:
        linear-gradient(to right, rgba(11,39,53,.85), rgba(11,39,53,.55)),
        url('../img/furnace.webp') center/cover no-repeat;
      color:#fff;
    }

    .filter{
      position:relative;
      min-height:90vh;
      display:flex;
      align-items:center;
      background:
        linear-gradient(to right, rgba(11,39,53,.85), rgba(11,39,53,.55)),
        url('../img/hero-filter.webp') center/cover no-repeat;
      color:#fff;
    }

    .ac{
      position:relative;
      min-height:90vh;
      display:flex;
      align-items:center;
      background:
        linear-gradient(to right, rgba(11,39,53,.85), rgba(11,39,53,.55)),
        url('../img/hero-ac.webp') center/cover no-repeat;
      color:#fff;
    }

    .duct{
      position:relative;
      min-height:90vh;
      display:flex;
      align-items:center;
      background:
        linear-gradient(to right, rgba(11,39,53,.85), rgba(11,39,53,.55)),
        url('../img/hero-duct.webp') center/cover no-repeat;
      color:#fff;
    }

    .hero h1{
      font-size:50px;
      font-weight:800;
      line-height:1.2;
      margin-bottom:20px;
    }

    .hero p{
      font-size:17px;
      line-height:1.8;
      color:rgba(255,255,255,.9);
      max-width:650px;
    }

    .hero-features{
      margin-top:30px;
    }

    .hero-features .feature{
      background:rgba(255,255,255,.1);
      backdrop-filter:blur(4px);
      border:1px solid rgba(255,255,255,.15);
      border-radius:14px;
      padding:14px 18px;
      color:#fff;
      margin-bottom:12px;
    }

    .floating-cards{
      margin-top:-70px;
      position:relative;
      z-index:3;
    }

    .info-card{
      background:#fff;
      border-radius:20px;
      padding:30px 24px;
      box-shadow:0 15px 40px rgba(0,0,0,.08);
      height:100%;
      border:1px solid #eef2f7;
    }

    .info-card .icon{
      width:58px;
      height:58px;
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(20,184,166,.12);
      color:var(--secondary);
      font-size:26px;
      margin-bottom:18px;
    }


    .info-card a{
      color:#0e5e6f;
    }


    .section{
      padding:90px 0;
    }

    .section-title{
      margin-bottom:18px;
      color:var(--secondary);
      font-weight:700;
      letter-spacing:.5px;
      text-transform:uppercase;
      font-size:14px;
    }

    .section-heading{
      font-size:40px;
      font-weight:800;
      line-height:1.3;
      margin-bottom:20px;
    }

    .section-text{
      color:var(--text);
      line-height:1.9;
      font-size:15px;
    }

    .service-card{
      background:#fff;
      border-radius:20px;
      padding:30px 24px;
      border:1px solid var(--border);
      transition:.3s;
      height:100%;
    }

    .service-card span{
      font-size: 18px;
      font-weight: bold;
    }

    .service-card a{
      color: var(--secondary) ;
    }

    .service-card:hover{
      transform:translateY(-8px);
      box-shadow:0 20px 40px rgba(0,0,0,.07);
      border-color:transparent;
    }

    .service-card .service-icon{
      width:62px;
      height:62px;
      border-radius:18px;
      background:#eefcf9;
      color:var(--secondary);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:28px;
      margin-bottom:18px;
    }

    .about-img{
      border-radius:24px;
      width:100%;
      
      object-fit:cover;
      box-shadow:0 20px 50px rgba(0,0,0,.08);
    }

    .check-list{
      list-style:none;
      padding:0;
      margin:25px 0 0;
    }

    .check-list li{
      margin-bottom:14px;
      color:var(--dark);
      font-weight:500;
    }

    .check-list i{
      color:var(--secondary);
      margin-right:10px;
    }

    .stats-box{
      background:linear-gradient(135deg, var(--primary), #12384d);
      color:#fff;
      border-radius:24px;
      padding:35px;
      margin-top:35px;
    }

    .doctor-card{
      background:#fff;
      border-radius:20px;
      overflow:hidden;
      border:1px solid var(--border);
      transition:.3s;
      height:100%;
    }

    .doctor-card:hover{
      transform:translateY(-8px);
      box-shadow:0 18px 40px rgba(0,0,0,.08);
    }

    .doctor-card img{
      width:100%;
      height:290px;
      object-fit:cover;
    }

    .doctor-card .content{
      padding:24px;
    }

    .doctor-card .speciality{
      color:var(--secondary);
      font-weight:600;
      font-size:14px;
    }

    .offers{
      background:
        linear-gradient(to right, rgba(14,94,111,.94), rgba(20,184,166,.90)),
        url('../img/back-offers.webp') center/cover no-repeat;
      color:#fff;
      border-radius:28px;
      padding:50px;
    }


    .offers a{
      color: #12384d;
    }


    .contact{
      background:
        linear-gradient(to right, rgba(14,94,111,.94), rgba(20,184,166,.90)),
        url('../img/back-offers.webp') center/cover no-repeat;
      color:#fff;
      border-radius:28px;
      padding:50px;
    }


    .contact a{
      color: #ffffff;
    }
    

    .testimonial-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:22px;
      padding:30px;
      height:100%;
      box-shadow:0 10px 25px rgba(0,0,0,.03);
    }

    .testimonial-card p{
      color:var(--text);
      line-height:1.9;
    }

    .footer{
      background:#0f172a;
      color:#cbd5e1;
      padding:70px 0 20px;
    }

    .footer h5{
      color:#fff;
      font-weight:700;
      margin-bottom:20px;
    }

    .footer a{
      color:#cbd5e1;
      display:block;
      margin-bottom:10px;
    }

    .footer a:hover{
      color:#fff;
    }

    .copyright{
      border-top:1px solid rgba(255,255,255,.08);
      margin-top:30px;
      padding-top:20px;
      font-size:14px;
      color:#94a3b8;
    }

    @media (max-width:991px){
      .hero h1{
        font-size:38px;
      }
      .section-heading{
        font-size:30px;
      }
      .offers{
        padding:30px 20px;
      }

       .offers img{
      width: 100%;
    }

    
    }


    .backimg {
      background:
        linear-gradient(to right, rgba(11,39,53,.85), rgba(11,39,53,.55)),
        url('../img/back-section.webp') center/cover no-repeat;
        color: #ffffff;
    }

    .section3 p {
      color: #ffffff;
      width: 80%;
    }


    /* form */
.CUS{
  
  padding: 0;
  border-radius: 30px;
}

.CUS p{
  padding: 0;
 }

form.CUS input.subject {
    display: none;
}

.CUS .form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.CUS .form-row p {
    flex: 1;
    margin: 0;
}

.CUS textarea {
    width: 100%;
    font-size: 15px;
    border: 1px solid #020202;
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
    background-color: #f0f0f0;
}

.CUS .submit {
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
    background-color: #f0f0f0;
    color: #161515;
}

.CUS input,
.CUS select {
    width: 100%;
    font-size: 15px;
     border: 1px solid #d4d4d4;
    box-sizing: border-box;
    font-weight: normal;
    padding: 10px;
    margin: 5px 0;
    background-color: #f0f0f0;

}

.CUS label {
    font-size: 15px;
    display: block;
    margin-top: 10px;
    font-weight: bold;
    text-align: left;
    color: #3b3b3b;
}

.CUS legend {
    font-size: 20px;
    text-align: left;
    color: #ffffff;
}

form.CUS,
.CUS fieldset {
    border: none;
}


@media only screen and (max-width:500px){
    .CUS .form-row {
        flex-direction: column;  
        align-items: stretch;    
    }

    .CUS .form-row p {
        flex: 1 0 100%;
        width: 100%;
    }
 } 


 .sc4 img{
  border-radius: 30px;
 }

 /* locations */
 .locations-wrapper {
  width: 70%;
  margin: 0 auto;
  padding: 50px 0;
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.location-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  padding: 12px 15px;
  text-align: center;
  text-decoration: none;
  color: #222;
  background: #f8f8f8;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.location-item:hover {
  background: #0e5e6f;
  color: #ffffff;
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.location-item:active {
  transform: scale(0.98);
}


/* faq */
.faq-container {
      max-width: 70%;
      margin: auto;
      background: #fff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .faq-container h2 {
      text-align: center;
      margin-bottom: 25px;
      color: #333;
    }

    .faq-item {
      border-bottom: 1px solid #ddd;
      padding: 15px 0;
    }

    .faq-item:last-child {
      border-bottom: none;
    }

    .faq-question {
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      color: #222;
      display: block;
      position: relative;
      padding-right: 25px;
    }

    .faq-question::after {
      content: "+";
      position: absolute;
      right: 0;
      top: 0;
      font-size: 22px;
      color: #0e5e6f;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      color: #555;
      line-height: 1.6;
      margin-top: 0;
    }

    .faq-toggle {
      display: none;
    }

    .faq-toggle:checked + .faq-question::after {
      content: "−";
    }

    .faq-toggle:checked + .faq-question + .faq-answer {
      max-height: 200px;
      margin-top: 10px;
    }

    /* site map */
    .sitemap {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 20px 0;
    gap: 5px;
    flex-wrap: wrap;
}

/* Each Column */


.group a {
   color: #5a5a5a;
}


/* List Styling */
.group ul {
    list-style: none;
}

.group li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.group li:last-child {
    border-bottom: none;
}

/* Optional hover */
.group li:hover {
    color: #3498db;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    .sitemap {
        flex-direction: column;
        align-items: center;
    }
}