.sidenav {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background:#fff;
  z-index: 99999;
  overflow-y:auto;
  transition:0.4s ease;
  box-shadow:-3px 0 15px rgba(0,0,0,0.12);
}

.nav-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
}

.nav-logo { width:150px; }
.closebtn { font-size:30px; cursor:pointer; color:#12387b; }

.menu { list-style:none; padding:10px 0; margin:0; }
.menu li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 13px 21px;
    font-size: 15px;
    font-weight: 600;
    color: #0d2a52;
    text-decoration: none;
}
.menu li a i { font-size:18px; 
}
.menu li a:hover { background:#f3f6ff; }

.arrow { margin-left:auto; font-size:15px; }

.submenu { display:none; background:#fafafa; }
.submenu li a { padding-left:60px; font-size:15px; }

.cta-row {
  display:flex;
  padding:18px;
  gap:10px;
}

.call, .whatsapp {
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  height:55px;
  border-radius:6px;
  font-size:25px;
  color:#fff;
}
.call { background:#0b79c9; }
.whatsapp { background:#00b247; }

.address-row {
  display:flex;
  gap:12px;
  padding:15px;
}

.address {
  /* flex:1; */
  background:#0d2a52;
  color:#fff;
  padding: 15px 20px 25px;
  border-radius:6px;
  font-size:13px;
  line-height:1.4;
}

.address p { 
  color:#fff;
  font-size: 12px;
 }

.address h4 { font-size:15px; margin-bottom:5px; }

.social-row {
  margin-top:10px;
  display:flex;
  height:50px;
}

.social-row a {
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:22px;
  color:#fff;
}

.insta { background:linear-gradient(45deg,#ff2a5e,#ff8d24); }
.fb { background:#0460df; }
.x { background:#000; }
.ln { background:#0460df; }


@media (max-width: 765px) {
    .sidenav a {
        i {
            font-size: 26px;
            transform: translateY(-1px);
            color: white;

        }
    }
}

.menu li a i {
    font-size: 18px;
    color: black;
}

@media (max-width: 765px) {
    .sidenav a {
        span {
            color: var(--red);
            display: none;
        }
    }
}


@media (max-width: 765px) {
    .sidenav {
        ul {
            height: 40vh;
            overflow: scroll;
        }
    }