/* =========================
MAIN CONTAINER
========================= */

.container{

max-width:1100px;
margin:70px auto;
padding:45px;

background:white;
border-radius:10px;

box-shadow:0 12px 30px rgba(0,0,0,0.08);

}



/* =========================
PROFILE HERO
========================= */

.hero-title{

text-align:center;
font-size:34px;
color:#0b3b6e;
margin-bottom:14px;

}

.hero-desc{

text-align:center;
max-width:850px;
margin:0 auto 40px auto;

font-size:16px;
line-height:1.7;

color:#444;

}



/* =========================
DOWNLOAD BUTTON
========================= */

.download-profile{

text-align:center;
margin-bottom:40px;

}

.download-btn{

display:inline-block;

background:#0b3b6e;
color:#fff;

padding:14px 30px;

border-radius:6px;
font-weight:600;
text-decoration:none;

transition:all 0.3s ease;

}

.download-btn i{

margin-right:8px;

}

.download-btn:hover{

background:#15549b;

transform:translateY(-2px);

box-shadow:0 6px 18px rgba(0,0,0,0.2);

}



/* =========================
SECTION BOX
========================= */

.portal-box{

background:#f9fbfd;

padding:35px;
border-radius:8px;

border:1px solid #e4e7eb;

margin-bottom:30px;

transition:all 0.3s ease;

}

.portal-box:hover{

box-shadow:0 10px 25px rgba(0,0,0,0.08);

}



/* =========================
SECTION TITLE
========================= */

.section-title{

text-align:center;
margin-bottom:25px;
color:#0b3b6e;
font-size:22px;

}



/* =========================
SERVICES GRID
========================= */

.services-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;

}

.service-card{

background:white;

padding:26px;

border-radius:8px;
border:1px solid #e3e6ea;

text-align:center;

transition:0.3s;

}

.service-card:hover{

transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,0.08);

}



/* SERVICE ICON */

.service-icon{

font-size:34px;
color:#0b3b6e;
margin-bottom:14px;

}

.service-card h4{

color:#0b3b6e;
margin-bottom:10px;

}

.service-card p{

font-size:14px;

color:#555;

}



/* =========================
NETWORK GRID
========================= */

.network-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;

}

.network-item{

background:white;

padding:24px;

border-radius:8px;
border:1px solid #e3e6ea;

text-align:center;

transition:0.3s;

}

.network-item:hover{

transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);

}



/* BADGE ICON */

.badge-icon{

font-size:30px;
color:#0b3b6e;
margin-bottom:12px;

}



/* =========================
PARTNER GRID
========================= */

.interconnect-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;

}

.interconnect-item{

background:white;

padding:24px;

border-radius:8px;
border:1px solid #e3e6ea;

text-align:center;

transition:0.3s;

}

.interconnect-item:hover{

transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);

}



/* =========================
CARRIER LOGOS
========================= */

.carrier-logos{

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:30px;

margin-top:20px;

}

.carrier-logos img{

height:42px;
opacity:0.85;

transition:0.3s;

}

.carrier-logos img:hover{

opacity:1;
transform:scale(1.1);

}



/* =========================
RESPONSIVE
========================= */

@media(max-width:900px){

.services-grid{

grid-template-columns:repeat(2,1fr);

}

.network-grid{

grid-template-columns:repeat(2,1fr);

}

.interconnect-grid{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:600px){

.container{

padding:30px;

}

.services-grid{

grid-template-columns:1fr;

}

.network-grid{

grid-template-columns:1fr;

}

.interconnect-grid{

grid-template-columns:1fr;

}

}

.download-note{

margin-top:10px;
font-size:13px;
color:#666;
text-align:center;

}