*{box-sizing:border-box}
body{
  margin:0;
  background:#050505;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
}
a{text-decoration:none;color:inherit}

.header{
  height:82px;
  background:#020202;
  border-bottom:1px solid #111;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 7%;
}
.logo{display:flex;align-items:center;gap:12px;font-weight:900}
.logo img{width:78px;height:58px;object-fit:contain}
.logo-main{font-size:36px}
.logo-main{font-size:36px}.logo-main span{color:#c1121f}
.logo-sub{font-size:14px;text-align:center}
.nav{display:flex;gap:34px;font-size:15px;font-weight:800}
.nav a{color:#ddd}
.nav a:hover{color:#c1121f}
.icons{display:flex;gap:25px;font-size:24px}

@media(max-width:1000px){
  .nav,.icons{display:none}
}

@media(max-width:760px){
  body{overflow-x:hidden}

  .header{
    height:auto;
    min-height:72px;
    padding:10px 16px;
  }

  .logo img{width:58px;height:44px}
  .logo-main{font-size:26px}
  .logo-sub{font-size:11px}

  .hero{
    height:auto!important;
    min-height:520px;
    padding:32px 20px!important;
    background-size:cover!important;
    background-position:center right!important;
  }

  .hero h1,.hero-logo{
    font-size:48px!important;
    letter-spacing:-1px!important;
  }

  .claim{font-size:18px!important}
  .bullets{gap:8px!important}
  .bullets div{font-size:13px!important}

  .buttons{
    flex-direction:column;
    align-items:flex-start;
  }

  .btn{width:180px!important}

  .benefits{
    width:94%!important;
    grid-template-columns:1fr!important;
    margin:14px auto!important;
  }

  .home-info,
  .why,
  .main,
  .service-split{
    width:94%!important;
  }

  .grid,
  .products{
    grid-template-columns:1fr!important;
  }

  .card{
    min-height:auto!important;
  }

  .photo{
    height:190px!important;
  }

  .service-split{
    grid-template-columns:1fr!important;
  }

  .product{
    grid-template-columns:1fr!important;
  }
}