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

:root{
  --navy:#03102b;
  --blue:#0d3fa6;
  --red:#c8102e;
  --gold:#f5a623;
  --green:#16a34a;
  --light:#f4f7fc;
  --border:#dde6f5;
}

/* TOP BAR */
.vi-topbar{
  background:linear-gradient(90deg,#03102b,#0d3fa6);
  color:#fff;
  padding:8px 35px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  flex-wrap:wrap;
}

/* HEADER */
.vi-header{
  background:#fff;
  position:sticky;
  top:0;
  z-index:9999;
  box-shadow:0 5px 25px rgba(0,0,0,.08);
}

.vi-header-main{
  max-width:1400px;
  margin:auto;
  padding:14px 35px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.vi-logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.vi-logo-icon{
  width:54px;
  height:54px;
  border-radius:15px;
  background:linear-gradient(145deg,var(--blue),var(--navy));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:23px;
  font-weight:900;
  box-shadow:0 8px 22px rgba(13,63,166,.35);
}

.vi-logo h2{
  color:var(--navy);
  font-size:27px;
  line-height:1;
}

.vi-logo h2 span{color:var(--blue)}

.vi-logo p{
  color:#667085;
  font-size:11px;
  margin-top:4px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.vi-search{
  flex:1;
  max-width:430px;
  display:flex;
  border:2px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--light);
}

.vi-search input{
  flex:1;
  border:0;
  outline:0;
  padding:12px 15px;
  background:transparent;
}

.vi-search button{
  border:0;
  background:var(--blue);
  color:#fff;
  padding:0 18px;
  cursor:pointer;
}

.vi-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.vi-action{
  border:1px solid var(--border);
  padding:9px 12px;
  border-radius:10px;
  font-size:13px;
}

.vi-quote{
  background:linear-gradient(135deg,var(--red),#e8192f);
  color:#fff;
  padding:13px 22px;
  border-radius:10px;
  font-weight:800;
}

/* NAV */
.vi-nav-wrap{
  background:linear-gradient(90deg,var(--navy),var(--blue));
}

.vi-nav{
  max-width:1400px;
  margin:auto;
  display:flex;
  align-items:center;
}

.vi-nav-item{
  position:relative;
}

.vi-nav-link{
  color:#fff;
  padding:16px 19px;
  display:flex;
  gap:6px;
  align-items:center;
  font-size:14px;
  font-weight:700;
  transition:.25s;
}

.vi-nav-link:hover{
  background:rgba(255,255,255,.12);
}

/* DESKTOP DROPDOWN */
.vi-mega,
.vi-dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  z-index:99999;
  box-shadow:0 25px 70px rgba(3,16,43,.22);
  border:1px solid var(--border);
  animation:drop .25s ease;
}

.vi-mega{
  min-width:650px;
  padding:24px;
  border-radius:0 0 20px 20px;
  gap:25px;
}

.vi-dropdown{
  width:260px;
  padding:12px;
  border-radius:0 0 16px 16px;
}

.vi-nav-item:hover .vi-mega{display:flex}
.vi-nav-item:hover .vi-dropdown{display:block}

@keyframes drop{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

.vi-mega-col{
  flex:1;
}

.vi-mega-col h4{
  color:var(--blue);
  font-size:12px;
  text-transform:uppercase;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:2px solid #e8f0fd;
}

.vi-mega a,
.vi-dropdown a{
  display:block;
  color:#475467;
  font-size:14px;
  padding:10px 12px;
  border-radius:8px;
  transition:.25s;
}

.vi-mega a:hover,
.vi-dropdown a:hover{
  background:#e8f0fd;
  color:var(--blue);
  padding-left:18px;
}

.vi-menu-btn{
  display:none;
  background:var(--navy);
  color:#fff;
  border:0;
  font-size:24px;
  padding:9px 13px;
  border-radius:9px;
  cursor:pointer;
}

/* FOOTER */
.vi-footer{
  background:var(--navy);
  color:#fff;
}

.vi-footer-top{
  background:linear-gradient(135deg,var(--red),#9b001b);
  padding:38px 35px;
}

.vi-footer-cta{
  max-width:1400px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.vi-footer-cta h2{
  font-size:32px;
}

.vi-footer-cta p{
  margin-top:6px;
  opacity:.85;
}

.vi-footer-cta a{
  background:#fff;
  color:var(--red);
  padding:14px 26px;
  border-radius:10px;
  font-weight:800;
}

.vi-footer-main{
  max-width:1400px;
  margin:auto;
  padding:55px 35px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.4fr;
  gap:38px;
}

.vi-footer h3{
  margin-bottom:18px;
  font-size:19px;
}

.vi-footer p{
  color:rgba(255,255,255,.65);
  line-height:1.7;
  font-size:14px;
}

.vi-footer-col a{
  display:block;
  color:rgba(255,255,255,.65);
  margin-bottom:10px;
  font-size:14px;
}

.vi-footer-col a:hover{
  color:#fff;
  padding-left:5px;
}

.vi-contact-box{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
}

.vi-whatsapp-btn{
  display:inline-block!important;
  background:var(--green);
  color:#fff!important;
  padding:12px 18px;
  border-radius:9px;
  font-weight:800;
}

.vi-footer-bottom{
  text-align:center;
  background:rgba(0,0,0,.25);
  border-top:1px solid rgba(255,255,255,.1);
  padding:16px;
}

/* MOBILE */
@media(max-width:950px){
  .vi-topbar,
  .vi-search,
  .vi-actions{
    display:none;
  }

  .vi-menu-btn{
    display:block;
  }

  .vi-header-main{
    padding:12px 16px;
  }

  .vi-logo-icon{
    width:45px;
    height:45px;
    font-size:19px;
  }

  .vi-logo h2{
    font-size:22px;
  }

  .vi-logo p{
    font-size:9px;
  }

  .vi-nav-wrap{
    display:none;
  }

  .vi-nav-wrap.active{
    display:block;
  }

  .vi-nav{
    flex-direction:column;
    align-items:stretch;
  }

  .vi-nav-link{
    padding:15px 20px;
    border-bottom:1px solid rgba(255,255,255,.12);
    justify-content:space-between;
    cursor:pointer;
  }

  .vi-nav-item:hover .vi-mega,
  .vi-nav-item:hover .vi-dropdown{
    display:none;
  }

  .vi-mega,
  .vi-dropdown{
    display:none;
    position:static;
    width:100%;
    min-width:100%;
    box-shadow:none;
    border:0;
    border-radius:0;
    padding:10px 20px;
    background:#f4f7fc;
    animation:none;
  }

  .vi-mega{
    flex-direction:column;
    gap:5px;
  }

  .vi-nav-item.mobile-open .vi-mega{
    display:flex!important;
  }

  .vi-nav-item.mobile-open .vi-dropdown{
    display:block!important;
  }

  .vi-footer-cta{
    justify-content:center;
    text-align:center;
  }

  .vi-footer-cta h2{
    font-size:26px;
  }

  .vi-footer-main{
    grid-template-columns:1fr;
    padding:40px 22px;
  }
}

.custom-slider{
  width:100%;
  position:relative;
  overflow:hidden;
}

.slide{
  display:none;
  width:100%;
}

.slide.active{
  display:block;
}

.slide img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

.prev,.next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.45);
  color:#fff;
  border:none;
  font-size:28px;
  padding:10px 15px;
  cursor:pointer;
  z-index:10;
}

.prev{left:15px;}
.next{right:15px;}

@media(max-width:768px){
  .prev,.next{
    font-size:20px;
    padding:7px 11px;
  }
}
</style>

<script>
let currentSlide = 0;
const slides = document.querySelectorAll(".custom-slider .slide");

function showSlide(index){
  slides.forEach(slide => slide.classList.remove("active"));
  currentSlide = (index + slides.length) % slides.length;
  slides[currentSlide].classList.add("active");
}

function changeSlide(step){
  showSlide(currentSlide + step);
}

setInterval(() => {
  changeSlide(1);
}, 3000);