.banner {
    width: 100%;
    height: 600px;
    position: relative;
    overflow: hidden;
}
.banner .carousel-inner,
.banner .carousel-item,
.sec-banner .carousel-inner{
    height: 100%;
}
.ad-img {
    display: block;
    position: absolute;
    /*object-fit: contain;*/
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.banner .carousel-inner .container-md{
    position: relative;
    height: 100%;
}
.banner .carousel-caption{
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    right: auto;
    left: auto;
    bottom: auto;
    text-align: left;
    font-size: 18px;
}
.banner .home-nvidia-h100 ul{
    color: var(--text-regular);
}
.banner .home-nvidia-h100,.banner .home-nvidia-h200{
    top: 44%;
}
.banner .home-nvidia-h200 ul{
    color: #fff;
}
.banner .carousel-caption ul{
    padding-left: 20px;
    /* opacity: .8; */
}
.banner .column{
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    text-align: center;
    width: 100%;
}
.banner .column h1{
    color: #fff;
    font-size: 50px;
}
.banner .carousel-caption h1{
    color: #fff;
}
.carousel-caption h1{
    font-size: 48px;
    font-weight: 600;
    color: var(--primary-color);
}
.carousel-caption .highlight {
    /* color: var(--primary-color); */
    background-image: linear-gradient(90deg,var(--primary-color) 35%,#FFBB65 50%,var(--primary-color) 55%);
    -webkit-text-fill-color: #0000;
    animation-duration: 3.6s,.8s;
    animation-iteration-count: infinite,1;
    animation-name: shimmer;
    animation-timing-function: ease-out,cubic-bezier(.19,1,.22,1);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 200% 100%;
}
@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}
.carousel-caption > p {
    font-size: 20px;
    color: var(--text-regular);
    margin: 20px 0 0;
}

.banner .home-nvidia-h100 h1,.banner .home-nvidia-h100 h3{
    color: var(--text-primary);
}
.banner .carousel-indicators{
    bottom: 80px;
    justify-content: flex-start;
    margin: auto;
    right: auto;
    left: auto;
    align-items: center;
}
.banner .carousel-indicators li{
    border: none;
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.6);
    border-radius: 10px;
    margin: 0 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    opacity: 1;
}
.banner .carousel-indicators .active {
    background: var(--primary-color);
    width: 24px;
    height: 6px;
}
.banner-img {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    height: 460px;
}
.banner-img li {
    height: 460px;
    position: absolute;
    width: 100%;
}
/* .banner .container-md {
    position: relative;
    height: 100%;
} */
.mobile-banner .mobile-img{
    display: none;
}
@-webkit-keyframes slideInLeft{
    0%{
        opacity:0;
        -webkit-transform:translateX(-100px);
        transform:translateX(-100px)
    }
    50%{
        opacity:0;
        -webkit-transform:translateX(0px);
        transform:translateX(0px)
    }
    100%{
        -webkit-transform:translateX(-100px);
        transform:translateX(-100px)
    }
}
@keyframes slideInLeft{
    0%{
        -webkit-transform:translateX(0px);
        transform: translate3d(50px, 30px, 0);
    }
    50%{
        transform: translate3d(0px, 0px, 0);
    }
    100%{
        -webkit-transform:translateX(0px);
        transform: translate3d(50px, 30px, 0);
    }
}
.slideInLeft{
    animation: slideInLeft 2s linear infinite;
    -webkit-animation:slideInLeft 2s linear infinite;
    -moz-animation: slideInLeft 2s linear infinite;
}

.banner-text {
    list-style: none;
    position: absolute;
    width: 50%;
    color: #fff;
    margin: 0;
    padding: 0;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
}

/*.banner-text {
    list-style: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    width: 50%;
    z-index: 2;
}*/

.banner .indicators {
    position: absolute;
    bottom: 80px;
    width: 100%;
    z-index: 10;
}
.banner .indicators ul{
    margin: 0;
    padding: 0;
}
.banner .indicators li {
    padding: 0 4px;
    display: inline-block;
    cursor: pointer;
}
.banner .indicators li i {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.4);
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
}
.banner .indicators li.active i {
    width: 20px;
    height: 4px;
    background: #fff;
    -webkit-transition: height 0.3s ease-out;
    -o-transition: height 0.3s ease-out;
    transition: height 0.3s ease-out;
}
.section-statistics{
    margin-top: 40px;
}
.section-statistics .group{
    background: rgba(255, 255, 255, 0.05);
    padding: 20px 20px 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    text-align: center;
}
.section-statistics .value{
    font-size: 32px;
    font-weight: bold;
    color: var(--primary-color);
}
.home-sec-title {
    font-size: 38px;
    margin-bottom: 20px;
    text-align: center;
    color: var(--text-primary);
}
.home-sub-title {
    font-size: 18px;
    text-align: center;
    line-height: 1.6;
}
.home-product-features {
    padding: 80px 0;
}
.home-product-features .group{
    display: flex;
}
.home-product-features .group + .group{
    margin-top: 60px;
}
.home-product-features .group img{
    height: 120px;
}
.home-product-features .group .bd{
    margin-left: 80px;
    flex: 1;
}
.home-product-features .group h4{
    color: var(--text-primary);
    margin-bottom: 10px;
}
.home-product-features .group p{
    font-size: 16px;
    line-height: 28px;
}
.home-sustainable{
    /* background-image: linear-gradient(to right, rgba(188, 58, 84, 1), rgba(124, 51, 178, 1)) ; */
    /* background-image: linear-gradient(45deg,var(--primary-color) 35%,#fd950d 50%,var(--primary-color) 55%);
    animation-duration: 3.6s,.8s;
    animation-iteration-count: infinite,1;
    animation-name: shimmer;
    animation-timing-function: ease-out,cubic-bezier(.19,1,.22,1);
    background-size: 200% 100%; */
    background-image: linear-gradient(125deg, #ff9900, #ff6000,#FFCC32,#FF6A48 );
    background-size: 200%;
    min-height: 60px;
    padding: 10px 0;
    color: #fff;
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: 600;
    font-size: 22px;
    animation: bgmove 6s linear infinite; 
}
@keyframes bgmove{
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}
.home-sustainable .row > [class*="col-"] {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.home-sustainable .row > [class*="col-"]:last-child{
    border-right: none;
}
.home-runsun{
    background-color: #222;
    padding: 80px 0 120px 0;
}
.home-runsun,.home-runsun h2 {
    color: #fff;
}
.home-ml{
    padding: 100px 0;
    background: url("../images/home-ml-bg.png") no-repeat center bottom;
    background-size: cover;
    min-height: 600px;
}
.home-ml .group{
    background: #FFFFFF;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.20);
    border-radius: 4px;
    height: 100%;
}
.home-ml .group .hd{
    background: url("../images/ml-bg.png") no-repeat center;
    background-size: cover;
    height: 100px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    line-height: 100px;
    border-radius: 4px 4px 0 0;
}
.home-ml .group .bd{
    padding: 40px 40px 70px;
    font-size: 16px;
}
.home-ml .group .bd .text{
    min-height: 48px;
}
.home-ml .group .bd .number{
    text-align: center;
    margin: 30px 0;
}
.home-ml .group .bd .total{
    font-size: 24px;
    color: var(--text-primary);
    font-weight: 500;
}
.home-computing{
    background: url("../images/home-computing-bg.png") no-repeat center/cover;
    padding: 80px 0;
}
.home-computing h2,.home-computing .home-sub-title{
    text-align: left;
}
.home-computing .home-sub-title{
    font-size: 16px;
}
.home-product{
    background-image: linear-gradient(180deg, #FFFFFF 0%, #F4F5F7 100%);
    padding: 100px 0;
}
.home-product .group{
    /* height: 180px; */
    background: #FFFFFF;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.08);
    border-radius: 4px;
    margin-top: 20px;
}
.home-product .home-sub-title ~ .group:first-of-type{
    margin-top: 3rem;
}
.home-product .group .left{
    background: url("../images/product-bg.png") no-repeat center/cover;
    font-size: 24px;
    color: var(--primary-color);
    height: 100%;
    padding: 20px;
}

/*.home-product .group .right{
    padding: 24px;
    display: flex;
}*/
@media (min-width: 768px) {
    .home-product .group .left i{
        display: none;
    }
    .home-product .group .right{
        padding: 32px 24px;
        display: flex;
    }
    .home-sec-signup-btn {
        width: 50%;
    }
}
.home-product .group .right .area{
    flex: 1;
}
.home-product .group .right .area .title{
    color: var(--text-primary);
    font-size: 20px;
    margin-bottom: 10px;
}
.home-product .group .right .area .text{
    font-size: 16px;
}
.home-product .group .right .advantage{
    width: 32%;
    margin-left: 40px;
}
.home-product .group .right .advantage i{
    color: var(--primary-color);
    font-size: 18px;
    vertical-align: middle;
}
.home-instance-types{
    padding: 100px 0;
    background-color: #fff;
}
.home-instance-types img{
    height: 50px;
}
.home-instance-types .name{
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin-top: 20px;
}
.home-instance-types .text{
    font-size: 16px;
    margin-top: 10px;
}
@media (min-width: 768px) {
    .home-instance-types .carousel-indicators {
        display: none;
    }
    .home-instance-types .carousel-item {
        display: block;
        margin-right: 0px;
    }
}

.home-cluster{
    background: url("../images/home-clusterBg.png") no-repeat center/cover;
    min-height: 360px;
    padding: 60px 0;
    color: #fff;
}
.home-cluster img{
    height: 226px;
}
.home-cluster .right{
    padding-left: 80px;
}
.home-cluster .home-sec-title{
    text-align: left;
    color: #fff;
    margin-bottom: 30px;
    font-size: 34px;
}
.home-cluster .text{
    margin-top: 12px;
    font-size: 16px;
}
.module{
    padding: 100px 0;
}
.sec-title {
    font-size: 24px;
    margin-bottom: 50px;
    text-align: center;
    color: var(--text-regular);
    position: relative;
    font-family: Plus Jakarta Sans,sans-serif;
    font-weight: normal;
    display: flex;
    align-items: center;
}
.sec-title::before{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #eee;
}
.sec-title::after{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #eee;
}
.sec-title > .name{
    padding: 0 20px;
    display: inline-flex;
    white-space: nowrap;
}
.sec-banner {
    height: 460px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.sec-banner .container-md {
    position: relative;
    height: 100%;
}
.sec-banner .main{
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    position: relative;
}
.sec-banner .main h1{
    font-size: 44px;
    font-weight: 600;
    color: var(--primary-color);
}
.sec-banner .main p {
    font-size: 20px;
    color: var(--text-regular);
    margin: 20px 0 0;
}
.sec-banner-image{
    position: absolute;
    right: 0;
    width: 46%;
    top: 50%;
    transform: translateY(-50%);
}
.cbm-banner{
    background: url("../images/cbm-banner.webp") no-repeat center / cover;
}
.product-benefits{
    padding: 0 100px;
}
.product-benefits .group{
    display: flex;
}
.product-benefits .group + .group{
    margin-top: 80px;
}
.product-benefits img{
    height: 70px;
}
.product-benefits .bd{
    flex: 1;
    margin-left: 60px;
}
.product-benefits .bd h4{
    font-size: 24px;
    color: var(--text-primary);
}
.product-benefits .bd .text{
    font-size: 16px;
}
.pd-scene{
    background-image: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
.pd-scene .group + .group{
    margin-top: 140px;
}
.pd-scene .group .image{
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background: #fff;
    display: inline-flex;
    padding: 30px 40px;
}
.pd-scene .group img{
    width: 340px;
}
.pd-scene .group .name{
    font-size: 32px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 15px;
}
.pd-scene .group .text{
    font-size: 16px;
    line-height: 26px;
    margin-top: 10px;
}
.pd-scene .group ul{
    margin: 20px 0 0 15px;
    line-height: 32px;
    padding: 0;
    font-size: 16px;
}
.nvidia-banner{
    background: url("../images/nvidia-banner-bg.webp") no-repeat center / cover;
}
.storage-banner{
    background: url("../images/storage-banner.webp") no-repeat center / cover;
}
.network-banner{
    background: url("../images/network-banner.webp") no-repeat center / cover;
}
.cs-introduction{
    background: url("../images/cs-introduction-bg.webp") no-repeat center / cover;
    font-size: 14px;
    /* box-shadow: inset 0px -1px 4px rgba(0,0,0,0.1); */
}
.cs-introduction ul{
    padding-left: 16px;
    margin: 10px 0 0 ;
    padding: 0;
    line-height: 32px;
    list-style: none;
    font-size: 16px;
}
.cs-introduction ul li::before{
    font-family: bootstrap-icons;
    content: '\f26a';
    display: inline-block;
    margin-right: 14px;
    color: var(--primary-color);
    vertical-align: middle;
}
.cs-introduction .title{
    font-size: 34px;
    margin-bottom: 15px;
    text-align: left;
    color: var(--text-primary);
    line-height: 1.3;
}
.cs-introduction .sub-title{
    font-size: 16px;
    line-height: 1.5;
}
.cs-specs{
    background-image: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}
.sec-btn {
    width: 50% !important;
}
.ai-banner{
    background: url("../images/ai-banner.png") no-repeat center / cover;
}

/* contact */
.ContactUs-banner{
    background: url("../images/contact-banner.png") no-repeat center / cover;
}
.contact-us .group{
    background-color: #F8FAFC;
    border-radius: 8px;
    padding: 80px 32px;
    text-align: center;
    min-height: 340px;
    display: block;
    color: var(--text-regular);
}
.contact-us .group:hover{
    color: var(--primary-color);
    transform: scale(1.055);
    /* translate: 0 -10px; */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.contact-us .group img{
    height: 60px;
    margin-bottom: 20px;
}
.contact-us .group .title{
    font-size: 24px;
    color: var(--text-primary);
    margin-bottom: 50px;
}
.contact-us .group .text{
    font-size: 16px;
}

/* about */
.about-banner{
    background: url("../images/aboutus-banner.jpg") no-repeat center / cover;
}
.about-banner .main{
    width: 72%;
}
.about-banner .main h1{
    text-shadow: 2px 4px 0px rgba(0, 0, 0, 0.7);
}
.about-banner .main h1,.about-banner .main p{
    color: #fff;
}
/* .about-container{
    background-image: linear-gradient(145deg, #FFFDFB 20%, #FCEBDA 100%);
} */
.locations-container{
    background: url("../images/locations.png") no-repeat center / cover;
    height: 650px;
    margin-bottom: 80px;
}
.locations-container h2{
    color: var(--text-primary);
    font-size: 38px;
}
.locations-container .container-md{
    height: 100%;
}
.locations-container .info{
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
}
.locations-container .text{
    margin-top: 20px;
}
.locations-container .text p span{
    width: 20px;
    height: 6px;
    border-radius: 10px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
.locations-container .text p:first-child span{
    background-color: var(--primary-color);
}
.locations-container .text p:last-child span{
    background-color: #FFCFB2;
}
.page-form{
    margin: 40px 0;
    background: #FFFFFF;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 0 40px 40px;
}
.page-form .form-title{
    font-weight: bold;
    padding: 40px 0 20px 0;
    display: flex;
    align-items: center;
    font-size: 1rem;
}
.page-form .form-title::after{
    content: '';
    display: inline-block;
    flex: 1;
    height: 1px;
    background-color: #eaeaea;
    margin-left: 10px;
}
.page-form .asterisk{
    color: red;
    margin-right: 4px;
}
.page-form .col-form-label{
    text-align: right;
}
.demand-list{
    background-color: #f7fafc;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
}
.demand-list .title{
    font-weight: bold;
    margin-bottom: 10px;
}
.demand-list .close{
    position: absolute;
    right: -10px;
    top: -10px;
    background: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    opacity: 1;
    box-shadow: 0px 1px 4px rgb(0 0 0 / 30%);
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}
.demand-list .close span{
    margin-top: -4px;
}
.icon-del{
    font-size: 22px;
    margin-left: 20px;
    color: #666;
    cursor: pointer;
}
.icon-del:hover{
    text-decoration: none;
}
.compute-content{
    display: none;
}
.compute-content.active{
    display: block;
}

.help-page {
    display: flex;
    flex-direction: column;
}
.help-page .head{
    background: #ecf0f9;
    border-bottom: 1px solid #ddd;
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 20px;
}
.help-page .head .text{
    font-size: 18px;
    display: flex;
    align-items: center;
    line-height: 1;
}
.help-page .head .text::before{
    content: '';
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: #ccc;
    margin: 0 16px;
}
.help-page .main {
    display: flex;
    flex: 1;
}

.help-page .main .right {
    flex: 1;
    overflow: hidden;
    height: calc(100vh - 60px);
}

.iframe {
    height: 100%;
    width: 100%;
}

.sidebar-menu {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 16px;
    width: 300px;
    overflow-y: auto;
    display: block;
    height: calc(100vh - 60px);
}

.sidebar-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu li {
    line-height: 34px;
    position: relative;
}
.sidebar-menu > li > ul{
    border-left: 1px solid #eaeaea;
}
.sidebar-menu li a.active::before{
    display: block;
    content: '';
    position: absolute;
    width: 2px;
    height: 24px;
    top: 4px;
    bottom: 0;
    left: -1px;
    background: #266BF4;
}
.sidebar-menu:first-child > li{
    margin-bottom: 15px;
}
.sidebar-menu .title{
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}
.sidebar-menu .sub-title{
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    color: #666;
    padding-left: 20px;
}
.sidebar-menu li a {
    color: #666;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    cursor: pointer;
}
.sidebar-menu li ul li ul li a{
    color: #999!important;
    padding-left: 40px;
}
.sidebar-menu .title i::before{
    content: '\f286';
}
.sidebar-menu .title.collapsed i::before{
    content: '\f282';
}
.sidebar-menu .sub-title i::before{
    content: '\f282';
}
.sidebar-menu .sub-title[aria-expanded="true"] i::before{
    content: '\f286';
}
.sidebar-menu .sub-title.collapsed i::before{
    content: '\f282';
}
.sidebar-menu li a.active {
    color: #266BF4!important;
}

/* video */
    /* .curtain {
  position: relative;
  width: 100%;
  height: 100vh;
}

.curtain-left,
.curtain-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-color: #000;
  transition: transform 2s ease-in-out;
  z-index: 99;
}

.curtain-left {
  left: 0;
  transform-origin: left center;
}

.curtain-right {
  right: 0;
  transform-origin: right center;
}

.open .curtain-left {
  transform: translateX(-100%);
}

.open .curtain-right {
  transform: translateX(100%);
} */
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
    /* animation: slideUp  0.2s ease-out forwards 4s; */
    animation: slideUp 0.5s cubic-bezier(0.3, 0, 0.3, 1) forwards 2s;
  }
  .spinner-logo img{
    width: 200px;
  }
  .spinner-logo{
      width: 200px;
      margin: 0 auto;
      text-align: center;
  }
  /* .preloader:before {
    content: '';
    position: absolute;
    left: -20vw;
    top: -20vh;
    width: 140vw;
    height: 120vh;
    background: #096cce;
  }
  .loader-wrapper.preloader:before{
      animation: preloader 0.75s cubic-bezier(0.3, 0, 0.3, 1) forwards;
      content: '';
      display: block;
  } */
  @keyframes preloader {
    0% {
      -webkit-transform: translate3d(0, 0, 0) skew(-10deg, -10deg);
      transform: translate3d(0, 0, 0) skew(-10deg, -10deg);
    }
  
    100% {
      -webkit-transform: translate3d(0, -100%, 0) skew(0);
      transform: translate3d(0, -100%, 0) skew(0);
    }
  }
  
  .loader {
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.2);
      position: relative;
      margin-top: 10px;
      /* animation: progressBar 4s ease-out forwards, slideDown 4s forwards; */
  }
  .loader-line{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: #ff6d00;
      animation: spinnerline 1s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
  }
  @keyframes spinnerline {
    0% {
      width: 0;
      left: 0;
      right: auto;
    }
  
    50% {
      width: 100%;
      left: 0;
      right: auto;
    }
  
    51% {
      width: 100%;
      left: auto;
      right: 0;
    }
  
    100% {
      width: 0;
      left: auto;
      right: 0;
    }
  }
  @keyframes progressBar {
      0% {
          width: 0;
      }
      100% {
          width: 10%;
      }
  }
  @keyframes slideUp {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-100%);
    }
  }
  .page-not-found{
    padding: 80px 0;
    height: calc(100% - 343px);
    background: url(../images/page-not-found.webp) no-repeat center / cover;
  }
  .page-not-found .container-md{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .page-not-found .container-md h1{
      color: var(--text-primary);
      font-size: 50px;
      margin-bottom: 20px;
  }
  .page-not-found .btn{
      margin-top: 40px;
      width: 25%;
  }
  .contact-form{
      padding: 120px 0 80px 0;
      position: relative;
  }
  .contact-form::before{
      background: url(../images/circle-left.webp) no-repeat center / cover;
      display: block;
      content: '';
      width: 500px;
      height: 560px;
      position: absolute;
      left: 0;
      top: 0;
}
  .contact-form::after{
      background: url(../images/circle-right.webp) no-repeat center / cover;
      display: block;
      content: '';
      width: 500px;
      height: 558px;
      position: absolute;
      right: 0;
      bottom: 0;
  }
  .contact-form .left{
    background-color: #f8f8f8;
    padding: 20px;
  }
  .timeline-wrapper{
      margin: 20px 0 20px 10px;
      padding: 0;
  }
  .timeline-wrapper .item{
    list-style: none;
    position: relative;
    padding-bottom: 40px;
  }
  .timeline-wrapper .item:last-child{
      padding-bottom: 0;
  }
  .timeline-wrapper .tail {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 100%;
    border-left: 1px solid #ddd;
}
.timeline-wrapper .item:last-child .tail{
    display: none;
}
.timeline-wrapper .node {
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.timeline-wrapper .body {
    margin-left: 34px;
}
.timeline-wrapper .body .title{
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 16px;
}
  .contact-form .content{
    background-color: rgba(255,255,255,0.8);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
      padding: 30px 50px;
  }
  .contact-form .content .title{
    text-align: center;
}
  .contact-form .content .title h1{
      font-size: 40px;
      color: var(--text-primary);
      font-weight: bold;
  }
  .contact-form .content .title .text{
    font-size: 16px;
  }
  .contact-form .asterisk{
      color: #e4192d;
      margin-left: 4px;
  }
  .contact-form .needs-validation{
      margin-top: 30px;
  }
  .success-tips{
    background: #f8f8f8;
    padding: 100px 0 80px 0;
    text-align: center;
  }
  .success-tips img{
    max-width: 100%;
    height: 390px;
  }
  .bg-shape{
    width: 100%;
    min-height: 500px;
    background: linear-gradient(20deg, #00000005 50%, #ffffff 50%);
    padding-bottom: 80px;
  }
  .company-map .mustache{
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .company-map p{
      margin-bottom: 6px;
  }
  .company-map .title{
    font-size: 30px;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 20px;
}
.company-map .name{
    font-weight: bold;
    color: var(--text-primary);
}
  .company-map .phone a{
      font-weight: bold;
  }
  .company-map .phone a:hover{
      text-decoration: underline;
  }
  .company-map img{
    max-width: 100%;
  }
.why-runsun{
    background-color: #333;
}
 .value-added-services{
    background-image: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
 }
 .value-added-services .group{
     background: #fff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     border: 1px solid #ddd;
 }
 .value-added-services .group .head{
     background-color: #f8f8f8;
     padding: 0;
 }
 .value-added-services .nav-pills .nav-link{
     border-radius: 0;
     min-height: 60px;
     font-size: 18px;
     flex: 1;
 }
 .value-added-services .nav-pills .nav-link + .nav-link{
     border-left: 1px solid #ddd;
 }
 .nav-pills .nav-link.active, .nav-pills .show > .nav-link{
     background-color: var(--primary-color);
 }
 .value-added-services .nav-pills{
    height: 100%;
 }
 .card-container{
     padding: 30px;
     display: flex;
 }
 .card-container img{
     max-width: 90%;
 }
 .card-container .card-title{
    color: var(--text-primary);
    font-size: 24px;
    margin-top: 20px;
 }
 .card-container .card-text{
     font-size: 16px;
 }
 .infrastructure-group > [class*="col-"]{
     text-align: center;
 }
 .infrastructure-group img{
    width: 80px;
 }
 .infrastructure-group h5{
     font-size: 18px;
     font-weight: 400;
     margin-top: 15px;
     color: var(--text-primary);
 }
 .value-added-banner{
    background: url("../images/value-added-banner.webp") no-repeat center / cover;
     background-color: #FFF0E7;
 }
 .infrastructure-resource{
    background-image: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
 }
 .infrastructure-resource .group{
     position: relative;
     overflow: hidden;
 }
 .infrastructure-resource .group:hover img{
    transform: scale(1.2);
    transition: .3s ease-in-out;
    
 }
 .infrastructure-resource .group h5{
     position: absolute;
     bottom: 0;
     background: rgba(255,96,0,0.80);
     height: 60px;
     color: #fff;
     text-align: center;
     width: 100%;
     margin: 0;
     line-height: 60px;
     font-size: 18px;
 }