.top-header-canvas {position:relative; height:500px; overflow:hidden; z-index:0;}
.top-header-canvas video {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; overflow: hidden;}
.top-header-canvas .d-flex {height: 500px;}
.top-header-canvas .banner-title{color: #fff; position: relative; width: 50%; z-index: 1;}
.bold{font-weight:600;}
.pb10{padding-bottom:10px;}
.pt10{padding-top:10px;}
.mt20{margin-top:2rem;}
.small-text{font-size:15px;}
.text-bold {font-weight: 500;}
.text-center{text-align:center !important;}
.text-blue{color:#00b2ff;}
.text-white{color:#fff !important;}
.text-show{display:block !important;}
[id*="custom-html"]{padding:0 !important;}
#top-hero, #top-hero h1{display: none;}
.mobile-banner {display: none; position: absolute; left: 0; top: 0;}
.mobile-banner img {height: 500px; object-fit: cover; z-index: 0;}

.splash {position: relative; height: 500px; z-index: 1;}
.splash-info {border-radius: 50%; width: 190px; height: 190px; color: #fff; background: #00b2ff; text-align: center; display: flex; align-items: center; position: absolute; justify-content: center;     right: 0; top: 25%;}

.solution-section h6{height: 50px;}
#xgs-section h2, #success-case h2, #training-section h2{display: none;}
#xgs-section .col-md-5, #training-section .col-md-5{width: 100%;}
#xgs-section ul {margin-left: 1rem;}
#xgs-section ul li {margin-bottom: 1rem; list-style: disc !important;}
.xgs-box {border-radius: 10px; font-size: 150px; color: #fff; border: 5px solid #fff; padding: 0; text-align: center; font-family: "Galano Grotesque",Helvetica,sans-serif !important;
    font-weight: 500; width: 300px; display: flex; flex-direction: column;}
h1.lable-10g {font-size: 150px;}
.text-10g {font-size: 40px; display: block;}

#success-case {padding: 0 !important;}
#success-case .row{position: relative; min-height: 550px;}
.ftth-bg {background: rgba(255, 255, 255, 0.7); padding: 1rem 2rem; position: absolute; bottom: 0; width: 60%;}
.success-ftth-icon {position: absolute; top: 0; right: 0;}

#contact-us h3{display: none;}

@media (max-width: 700px) {
    .desktop-banner {display: none;}
    .mobile-banner {display: block;}
    .ftth-bg {width: 100%; left: 0; top: 0;}
    .success-ftth-icon {display: none;}
    #training-section picture img {object-position: 35%;}
}

@media (max-width: 500px) {
    .splash-info {top: 15%; left: 0; margin: auto;}
    #xgs-section {background-position: 60%;}
}