:root{
  --orange:#f15a29;
  --hero-orange:#e87543;
  --dark:#171717;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Poppins",Arial,sans-serif;
  color:#171717;
  background:#fff;
}
a{text-decoration:none}

/* HEADER */
.site-header{
  height:74px;
  background:var(--orange);
  position:relative;
  z-index:9999;
}
.site-header.sticky{
  position:fixed;
  top:0;left:0;right:0;
  height:58px;
  box-shadow:0 3px 14px rgba(0,0,0,.18);
}
body.has-sticky{padding-top:74px}

.header-inner{
  width:calc(100% - 74px);
  max-width:1545px;
  height:100%;
  margin:auto;
  display:grid;
  grid-template-columns:270px 1fr 82px;
  align-items:center;
}
.site-logo img{
  width:215px;
  height:auto;
  display:block;
}
.site-header.sticky .site-logo img{width:190px}

.main-nav{justify-self:center}
.main-nav>ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:25px;
  margin:0;
  padding:0;
}
.main-nav>ul>li{position:relative}
.main-nav>ul>li>a{
  color:#fff;
  font-size:14px;
  font-weight:600;
  line-height:74px;
  white-space:nowrap;
}
.site-header.sticky .main-nav>ul>li>a{line-height:58px}

.header-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:22px;
}
.search-icon{
  width:16px;height:16px;
  border:2px solid #fff;border-radius:50%;
  position:relative;
}
.search-icon:after{
  content:"";position:absolute;
  width:7px;height:2px;background:#fff;
  right:-5px;bottom:-2px;transform:rotate(45deg);
}
.cart-icon{
  width:19px;height:18px;
  border:2px solid #fff;border-radius:3px;
  position:relative;
}
.cart-icon:before{
  content:"";position:absolute;
  left:4px;top:-7px;width:7px;height:6px;
  border:2px solid #fff;border-bottom:0;border-radius:7px 7px 0 0;
}
.cart-icon span{
  position:absolute;
  right:-10px;top:-10px;
  width:17px;height:17px;border-radius:50%;
  background:#6b6b6b;color:#fff;
  text-align:center;line-height:17px;font-size:10px;
}

.mega-menu{
  position:fixed;
  top:74px;
  left:50%;
  width:min(980px,92vw);
  transform:translate(-50%,10px);
  background:#050505;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:52px;
  padding:24px 14px 28px;
  opacity:0;
  visibility:hidden;
  transition:.18s ease;
  box-shadow:0 14px 30px rgba(0,0,0,.23);
}
.site-header.sticky .mega-menu{top:58px}
.has-mega:hover .mega-menu{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.mega-menu h3{
  color:#fff;
  font-size:14px;
  margin:0 0 15px;
}
.mega-menu a{
  display:block;
  color:#d8d8d8;
  font-size:14px;
  font-weight:500;
  margin-bottom:10px;
}
.mega-menu a:hover{color:var(--orange)}

.dropdown-menu{
  position:absolute;
  top:62px;
  left:0;
  min-width:220px;
  padding:10px;
  background:#050505;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.18s ease;
}
.site-header.sticky .dropdown-menu{top:50px}
.has-dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dropdown-menu a{
  display:block;
  color:#ddd;
  padding:9px 11px;
  font-size:13px;
}
.dropdown-menu a:hover{color:var(--orange)}
.mobile-toggle{display:none}

/* HERO */
.hero-section{
  height:348px;
  background:var(--hero-orange);
  color:#fff;
  position:relative;
  overflow:hidden;
  text-align:center;
}
.hero-content{position:relative;z-index:4;padding-top:50px}
.hero-content h1{
  margin:0 0 8px;
  font-size:50px;
  line-height:1.2;
}
.hero-content p{margin:0;font-size:13px}
.wave{
  position:absolute;
  left:-5%;
  width:110%;
  border-radius:50%;
}
.wave-a{
  height:145px;
  bottom:-45px;
  background:#ed926c;
  transform:rotate(1deg);
}
.wave-b{
  height:130px;
  bottom:-77px;
  background:#f4b69f;
  transform:rotate(-1deg);
}
.hero-section:after{
  content:"";
  position:absolute;
  left:-7%;bottom:-96px;
  width:114%;height:110px;
  background:#fff;border-radius:50%;
}

/* HUB */
.hub-section{
  width:min(1180px,92%);
  margin:auto;
  padding:64px 0 90px;
}
.hub-intro{
  max-width:780px;
  margin:0 auto 48px;
  text-align:center;
}
.hub-kicker{
  margin:0 0 25px;
  font-size:38px;
  font-weight:700;
}
.hub-intro h2{
  margin:0 0 10px;
  font-size:23px;
  font-weight:600;
}
.hub-intro>p:last-child{
  margin:0;
  font-size:14px;
  line-height:1.65;
}
.hub-grid{
  max-width:1010px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
}
.hub-card{
  min-height:212px;
  padding:28px;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  box-shadow:0 4px 11px rgba(0,0,0,.16);
  border:1px solid rgba(0,0,0,.03);
}
.hub-card h3{
  margin:0 0 14px;
  font-size:21px;
}
.hub-card p{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.62;
}
.hub-card a{
  margin-top:auto;
  align-self:flex-end;
  font-size:16px;
  font-weight:600;
}
.blue-card{background:#dfeefa;color:#07539f}
.blue-card a{color:#07539f}
.red-card{background:#fae4e6;color:#b20b0b}
.red-card a{color:#b20b0b}
.green-card{background:#f0fdf4;color:#065f46}
.green-card a{color:#065f46}
.yellow-card{background:#fff7ed;color:#c2410c}
.yellow-card a{color:#c2410c}

/* FOOTER */
.site-footer{background:var(--dark);color:#fff}
.footer-inner{
  width:min(980px,92%);
  margin:auto;
  padding:68px 0 60px;
  display:grid;
  grid-template-columns:1fr .78fr 1.35fr;
  gap:65px;
}
.footer-column h2{font-size:19px;margin:0 0 18px}
.footer-column p{font-size:13px;line-height:1.3;margin:0 0 26px}
.footer-nav a{
  display:block;color:#fff;font-size:13px;margin-bottom:11px;
}
.footer-nav a:hover{color:var(--orange)}
.whatsapp-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff;
  border:1px solid #fff;
  padding:11px 15px;
  border-radius:7px;
  font-size:14px;
}
.location-column h2{color:var(--orange)}
.map-art{
  height:245px;
  margin-top:22px;
  position:relative;
  opacity:.66;
  background-image:radial-gradient(circle,#777 1.55px,transparent 1.8px);
  background-size:12px 12px;
  mask-image:radial-gradient(ellipse at center,#000 40%,transparent 74%);
}
.dot{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:#f36a16;
  box-shadow:0 0 0 7px rgba(243,106,22,.15);
}
.dot-1{left:18%;top:34%}
.dot-2{left:20%;top:57%}
.dot-3{left:55%;top:47%}
.dot-4{left:77%;top:63%}
.social-row{
  display:flex;
  justify-content:center;
  gap:11px;
  margin-top:-4px;
}
.social-row a{
  width:33px;height:33px;
  border-radius:50%;
  background:#303946;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:600;
}
.footer-bottom{
  border-top:1px solid #333;
  color:#747474;
  text-align:center;
  padding:23px 15px;
  font-size:12px;
}
.footer-bottom span{color:var(--orange)}

@media(max-width:1050px){
  .header-inner{grid-template-columns:235px 1fr 70px}
  .main-nav>ul{gap:15px}
  .main-nav>ul>li>a{font-size:12px}
  .site-logo img{width:195px}
}
@media(max-width:900px){
  .site-header,.site-header.sticky{height:68px}
  body.has-sticky{padding-top:68px}
  .header-inner{grid-template-columns:1fr auto}
  .mobile-toggle{display:block;background:none;border:0;padding:8px}
  .mobile-toggle span{display:block;width:26px;height:2px;background:#fff;margin:5px}
  .header-actions{display:none}
  .main-nav{
    display:none;
    position:absolute;
    top:68px;left:0;right:0;
    background:#080808;
    padding:12px 5%;
  }
  .main-nav.open{display:block}
  .main-nav>ul{display:block}
  .main-nav>ul>li>a{line-height:43px;font-size:14px}
  .mega-menu,.dropdown-menu{
    position:static;
    width:100%;
    display:none;
    opacity:1;visibility:visible;transform:none;
    box-shadow:none;padding:15px;
  }
  .has-mega:hover .mega-menu{display:grid;transform:none}
  .has-dropdown:hover .dropdown-menu{display:block;transform:none}
  .mega-menu{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  .location-column{grid-column:1/-1}
}
@media(max-width:700px){
  .site-logo img{width:180px}
  .hero-section{height:290px}
  .hero-content h1{font-size:36px}
  .hub-grid{grid-template-columns:1fr}
  .hub-kicker{font-size:31px}
  .hub-card{min-height:190px}
  .footer-inner{grid-template-columns:1fr}
  .location-column{grid-column:auto}
  .mega-menu{grid-template-columns:1fr}
}