/*--------------------------------------------------------------
# 5G IPTV - Service Overview page styles
# Scoped gi-* classes so existing site styles are unaffected
--------------------------------------------------------------*/
.gi-wrap { max-width: 920px; margin: 0 auto; }
.gi-wrap h1 { font-size: 30px; font-weight: 700; color: #222222; margin-bottom: 15px; }
.gi-wrap h2 { font-size: 24px; font-weight: 700; color: #106eea; margin: 40px 0 15px; padding-bottom: 8px; border-bottom: 2px solid #e7f1fd; }
.gi-wrap h3 { font-size: 18px; font-weight: 600; color: #222222; margin: 22px 0 8px; }
.gi-wrap p, .gi-wrap li { font-size: 15px; line-height: 1.8; color: #555555; }
.gi-wrap ul { padding-left: 20px; }
.gi-wrap .gi-lead { font-size: 16px; color: #444444; }

/* Content stat cards */
.gi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 20px 0; }
.gi-stat { background: #f8fbff; border: 1px solid #e7f1fd; border-radius: 8px; padding: 18px 14px; text-align: center; }
.gi-stat .gi-num { font-size: 24px; font-weight: 700; color: #106eea; display: block; }
.gi-stat .gi-lbl { font-size: 13px; color: #666666; margin-top: 4px; display: block; }

/* Feature / info cards */
.gi-card { background: #f8fbff; border: 1px solid #e7f1fd; border-left: 4px solid #106eea; border-radius: 6px; padding: 16px 18px; margin: 14px 0; }
.gi-card h3 { margin-top: 0; }

/* Device grid */
.gi-devices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 20px 0; }
.gi-device { background: #ffffff; border: 1px solid #e7f1fd; border-radius: 8px; padding: 16px 18px; }
.gi-device h3 { margin-top: 0; font-size: 16px; color: #106eea; }
.gi-device p { font-size: 14px; margin-bottom: 0; }

/* Note / CTA box */
.gi-note { background: #f1f6fe; border-radius: 6px; padding: 16px 18px; margin: 24px 0; font-size: 15px; }
.gi-note a { color: #106eea; font-weight: 600; }

/* Buttons */
.gi-btn { display: inline-block; background: #106eea; color: #ffffff !important; padding: 10px 22px; border-radius: 4px; font-weight: 600; font-size: 14px; text-decoration: none; margin: 4px 8px 4px 0; }
.gi-btn:hover { background: #0d5cc7; color: #ffffff !important; }
.gi-btn.gi-btn-outline { background: transparent; color: #106eea !important; border: 1px solid #106eea; }
.gi-btn.gi-btn-outline:hover { background: #106eea; color: #ffffff !important; }

@media (max-width: 768px) {
  .gi-wrap h1 { font-size: 24px; }
  .gi-wrap h2 { font-size: 20px; }
}