html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  
}

/* Ensure main content area respects viewport */
main {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Prevent images from overflowing */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent embeds from causing horizontal scroll */
video, iframe, embed, object {
  max-width: 100%;
}

/* Ensure containers don't cause horizontal scroll */
.container, .container-fluid {
  max-width: 100%;
}

/* css for the navbar top and dropdown */
.ub-center .dropdown-toggle::after{
margin-top: 2%;
}


.nav-item.dropdown::after{
content:"";
position:absolute;
left:0;
right:0;
top:100%;
height:2px;
}


/* ================= MEGA DROPDOWN ================= */

.mega-dropdown{
overflow:visible;
background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%);
border:1px solid rgba(155,184,214,0.35);
border-top: none;
border-radius:0 0 14px 14px;
box-shadow:
0 12px 30px rgba(15,90,200,0.10),
0 2px 6px rgba(0,0,0,0.05),
inset 0 0 0 1px rgba(255,255,255,.65);
}

.dropdown-menu.mega-dropdown{
position:fixed;

top:72px;

left:50%;
transform:translateX(-50%) translateY(8px);

display:block;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .25s ease, transform .25s ease;
z-index:1200;
max-height:90vh;
overflow-y:auto;
}

.mega-wrapper{
display:flex;
width:900px;
align-items:stretch;

background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
box-shadow:
0 16px 40px rgba(11,94,215,.18),
0 6px 14px rgba(0,0,0,.06);

border-radius:0 0 14px 14px;
}


.mega-left{
width:260px;
display:flex;
flex-direction:column;
padding-top:12px; 
background:linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);

border-right:1px solid rgba(4,43,86,0.08);
}


.mega-category{
padding:13px 18px;

display:flex;
justify-content:space-between;
cursor:pointer;

font-size:16px;
font-weight:500;

color:#042b56;

transition:background .2s ease, transform .2s ease;

border-left:4px solid transparent;
border-bottom:1px solid rgba(4,43,86,0.10);

}

.mega-category:first-child{
border-top:1px solid rgba(4,43,86,0.10);
}

.mega-category:last-child{
  border-bottom:none;
}

.mega-category:hover{
background:#f4f8ff;
border-left:4px solid #0dc3f5;
color:#042b56;
}

.mega-category.active{
background:#eaf2ff;
border-left:4px solid #0dc3f5;
color:#042b56;
}


.mega-right{
flex:1;
padding:12px 22px 12px 22px;
background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
}


.mega-panel{
display:none;

grid-template-columns:1fr 1fr;
gap:12px;
}

.mega-panel.active{
display:grid;
}


.service-card{
display:flex;
align-items:center;
width:100%;

padding:14px 18px;

border-radius:10px;

font-size:15px;
font-weight:500;

color:#042b56;
text-decoration:none;

cursor:pointer;

transition:.25s;

background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%);

border:1px solid rgba(155,184,214,0.35);

box-shadow:
0 4px 10px rgba(11,94,215,.16),
inset 0 0 0 1px rgba(255,255,255,.9);
}


.service-card i{
display:flex;
align-items:center;
justify-content:center;

width:32px;
height:32px;

margin-right:12px;

border-radius:8px;

font-size:15px;
color:#042b56;

background:linear-gradient(180deg,#f3f8ff,#e9f1ff);

box-shadow:0 2px 6px rgba(4,43,86,.25);
}


.service-card:hover{
border-color:#0dc3f5;
transform:translateY(-1px);
box-shadow:
0 10px 24px rgba(11,94,215,.08),
0 4px 10px rgba(0,0,0,.03);
color:#042b56;
text-decoration:none;
}


.mega-footer{
margin-top:18px;



width:100%;            
display:flex;
justify-content:center;  
align-items:center;
}

.mega-btn{
display:inline-block;
padding:10px 18px;
font-size:14px;
font-weight:600;

color:#fff;  
text-decoration:none;

background: linear-gradient(90deg, #0B335A, #1f5e9d);

border-radius:8px;

transition:.2s ease;

}

.mega-btn:hover{
transform: translateY(-1px);
color: white;
}


.simple-dropdown{
position:absolute;
display:block !important;
top:100%;
left:0;
width:max-content;
min-width:0;
max-width:300px;
background:#fff;
border-radius:0 0 10px 10px;
border:1px solid rgba(0,0,0,.06);
border-top:none;
box-shadow:0 10px 28px rgba(0,0,0,.08);
padding:0;
overflow:hidden;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .2s ease, visibility .2s ease;
z-index:1100;
}


.nav-item.dropdown:hover .simple-dropdown{
opacity:1;
visibility:visible;
pointer-events:auto;
}



.ub-center .simple-dropdown .dropdown-item{

display:flex;
align-items:center;

padding:12px 28px;

font-size:16px;
font-weight:500;

color:#042b56;

text-decoration:none;

border-left:4px solid transparent;
border-bottom:1px solid rgba(4,43,86,0.10);
transition:all .2s ease;

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


.simple-dropdown .dropdown-item:hover{

background:rgba(3,150,255,0.12);

border-left:4px solid #0dc3f5;



color:#042b56;

}








@media (min-width:992px){

.nav-item.dropdown .mega-dropdown{
display:block;
opacity:0;
visibility:hidden;
pointer-events:none;

transition:all .25s ease;
}

.nav-item.dropdown:hover .mega-dropdown{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateX(-50%) translateY(0);
}

}



@media (max-width:1050px){
  .dropdown-menu.mega-dropdown{
    top:62px;
  }
}



/* ===== SMALL LAPTOP ===== */
@media (max-width:1200px){

.mega-category{
font-size:14px;
padding:11px 14px;
}

.service-card{
font-size:13.5px;
padding:11px 14px;
}

.service-card i{
width:30px;
height:30px;
font-size:14px;
}

}


/* ===== MID SCREENS ===== */
@media (max-width:1100px){

.mega-category{
font-size:13px;
padding:10px 12px;
}

.service-card{
font-size:12.8px;
padding:10px 12px;
}

.service-card i{
width:28px;
height:28px;
font-size:13px;
}

}


/* ===== TABLETS ===== */
@media (max-width:992px){

.mega-category{
font-size:12px;
padding:9px 10px;
}

.service-card{
font-size:12px;
padding:9px 10px;
}

.service-card i{
width:26px;
height:26px;
font-size:12px;
}

}