.inner-banner {height: 500px; padding-top: 160px; position: relative; background-image: url("../images/technical-support-banner.jpg"); background-position: top center; background-size: 100%; background-repeat: no-repeat; }
.inner-banner h1 {font-size: 50px; font-family: 'Montserrat-Bold', sans-serif; z-index: 9; position: relative; color: #000; width: 100%; padding: 0% 52% 0% 0%; text-align: left; line-height: 60px; }
.ts {padding: 70px 0px; position: relative; text-align: center; }
.ts h2 {font-size: 36px; padding: 0px 30px 20px 30px; font-family: 'Poppins-Regular'; position: relative; margin: 0 auto; line-height: 48px; width: 55%; color: #0961ba; }
.ts p {font-size: 16px; font-family: 'Rubik-Regular'; width: 100%;line-height: 28px;}

.demand {padding: 70px 0px 80px 0px; position: relative; background: #f7f7f7; background: -moz-linear-gradient(top, #f7f7f7 0%, #ffffff 100%); background: -webkit-linear-gradient(top, #f7f7f7 0%, #ffffff 100%); background: linear-gradient(to bottom, #f7f7f7 0%, #ffffff 100%); filter: progid: DXImageTransform.Microsoft.gradient startColorstr='#f7f7f7', endColorstr='#ffffff', GradientType=0;}
.demand h4 {font-family: 'Poppins-Regular'; font-size: 36px; line-height: 45px; margin-top: 40px; text-align: left;  }
.demand p {font-family: 'Rubik-Regular'; font-size: 18px; width: 100%; margin: 30px 0px; padding: 0% 10% 0% 0%; line-height: 28px; text-align: justify; }
.demand ul {padding: 0px;}
.demand ul li {list-style: none; line-height: 35px; font-family: 'Rubik-Regular'; font-size: 18px; text-align: left; } .demand ul li::before {content: "\f101"; font-family: 'FontAwesome'; color: #fa611d;margin-right: 8px;font-size: 20px;}
.datacenter {padding: 50px 0px; position: relative; text-align: center; background: #fa611d; color: #fff; }
.datacenter::before {background-image: url(../images/bg.png); background-repeat: repeat; content: ""; position: absolute; width: 100%; bottom: 0; background-position: center; top: 0; left: 0; opacity: 0.4; }
.datacenter p {font-family: 'Poppins-SemiBold'; font-size: 44px; margin: 0px; width: 100%; text-align: left; line-height: 50px; }
.why {padding: 90px 0px; position: relative; }
.why h4 {font-family: 'Poppins-Regular'; font-size: 36px; line-height: 45px; margin-top: 40px; text-align: left; color: #0961ba;}
#main {margin: 0px 0;}
#main #wc .card {margin-bottom: 0px;border: 0;}
#main #wc .card .card-header {border: 0; padding: 0; background: none; border-bottom: 1px solid #ededed; }
#main #wc .card .card-header .btn-header-link {display: block; text-align: left; color: #0e5eb6; padding: 20px 20px 20px 0px;font-size: 24px;font-family: 'Poppins-SemiBold'; }
#main #wc .card .card-header .btn-header-link:after {content: "\f04b"; font-family: 'FontAwesome'; font-weight: 900; float: left; margin-right: 10px; font-size: 11px;background-color: #fff;border: 2px solid #0e5eb6;height: 25px;
border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;width: 25px;padding: 2px 8px 0px 8px;margin-top: 6px;  transform: rotate(90deg);}
#main #wc .card .card-header .btn-header-link.collapsed {color: #ababab;}
#main #wc .card .card-header .btn-header-link.collapsed:after {content: "\f04b";font-size: 11px;background-color: #fff;border: 2px solid #ababab;height: 25px;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;
width: 25px;padding: 2px 8px 0px 8px;margin-top: 6px;transform: rotate(0deg);}
#main #wc .card .collapsing {line-height: 30px;}
#main #wc .card .collapse {border: 0;}
#main #wc .card .collapse.show {line-height: 30px;font-size: 16px;color: #222;font-family: 'Poppins-Regular'; }
.btn.focus,.btn:focus {box-shadow: none;}
.card-body{padding: 20px 26px;  font-size: 16px;font-family: 'Poppins-Regular';  line-height: 30px;}

.offer {padding: 70px 0px 80px 0px; position: relative; background: #f7f7f7; background: -moz-linear-gradient(top, #f7f7f7 0%, #ffffff 100%); background: -webkit-linear-gradient(top, #f7f7f7 0%, #ffffff 100%); background: linear-gradient(to bottom, #f7f7f7 0%, #ffffff 100%); filter: progid: DXImageTransform.Microsoft.gradient startColorstr='#f7f7f7', endColorstr='#ffffff', GradientType=0;}
.offer h4 {font-family: 'Poppins-Regular'; font-size: 36px; line-height: 45px; margin-bottom: 80px; text-align: center; width: 100%;}
.offer .icon-box{color: #fff;position: relative;z-index: 1;}

.offer .icon-box::after {
  border: 1px solid #ff9261;
  border-radius: 50%;
  content: "";
  height: 110px;
  left: 50%;
  margin-top: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 110px;
}
.offer .icon-box:hover{
  -webkit-animation: prittyphoto 1.05s infinite;
  -moz-animation: prittyphoto 1.05s infinite;
  -ms-animation: prittyphoto 1.05s infinite;
  -o-animation: prittyphoto 1.05s infinite;
  animation: prittyphoto 1.05s infinite;
}
.offer .icon-box p{font-family: 'Poppins-Regular'; font-size: 18px;color: #000;top: 80px;}
.offer .icon-box i{font-size: 28px;color: #fff;background: #fa611d; border-radius: 50%;box-shadow: 0 1px 14px 1px #fa611d;content: ""; height: 70px;left: 50%;position: absolute;top: 50%;-webkit-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);width: 70px;z-index: -1;padding-top: 15px;}
.offer .icon-box p a{color: #000;}
.offer .icon-box p a:hover{color:#fa611d;transition: all .4s ease-in-out;}


.tn {padding:70px 0px 90px 0px; position: relative; text-align: center;}
.tn h2 {font-size: 48px; padding: 0px 30px 40px 30px; font-family: 'Poppins-Regular'; position: relative; margin: 0 auto; line-height: 48px; color: #0961ba;}
.tn p {font-size: 20px; font-family: 'Rubik-Regular'; width: 100%;line-height: 28px;}


.mrgnbt {
  margin-bottom: 50px;
}

@media only screen and (min-width:320px)and (max-width:479px) {
    .inner-banner {padding-top: 50px; height: 220px; background-size: cover;}
    .inner-banner h1 {font-size: 24px;line-height: 30px;padding: 0% 42% 0% 0%;}
    .ts {
        padding: 20px 0px;
    }
    .ts h2 {
        font-size: 24px;
        line-height: 32px;
        width: auto;
        padding: 0px 0px 10px 0px;
    }
    .ts p {
        font-size: 14px;
        line-height: 20px;
        padding: 0px 10px;
        width: 95%;;
        margin: 0 auto;
    }
    .demand {padding: 20px 0px 40px 0px;}
    .demand h4 {font-size: 24px; line-height: 30px; margin-top: 0px; }
    .demand p {font-size: 16px; line-height: 24px; text-align: justify; padding: 0px; margin:15px 0px; }
    .demand ul {margin-bottom: 20px;}
    .demand ul li{font-size: 16px;line-height: 30px;}
    .datacenter {padding: 30px 0px;}
    .datacenter p {font-size: 28px;padding: 0% 5% 0% 5%;line-height: 32px;}
    .why {padding: 40px 0px;}
    .why h4{font-size: 24px;line-height: 25px;margin-top: 20px;}
    #main #wc .card .card-header .btn-header-link{padding: 10px 10px 10px 0px;font-size: 20px;}
    #main #wc .card .card-header .btn-header-link.collapsed::after {font-size: 9px;width: 20px;height: 20px;padding: 1px 8px 0px 5px;}
    #main #wc .card .card-header .btn-header-link::after {font-size: 9px;width: 20px;height: 20px;padding: 1px 8px 0px 5px;}
    .card-body {padding:10px 0px 10px 30px; font-size: 14px; line-height: 25px;}
    .offer {padding: 20px 0px 40px 0px;}
    .offer h4 {font-size: 28px; line-height: 32px; padding: 10px 0px 20px 0px;margin-bottom: 50px;}
    .mrgnbt {margin-bottom: 150px;}
    .mrgnlft {margin-left: 20px;}
    .tn {padding: 20px 0px 40px 0px;}
    .tn h2 {font-size: 28px; line-height: 32px; padding: 10px 0px 20px 0px;}
    .tn p{font-size: 16px; line-height: 24px; text-align: justify; padding: 0px 15px; }
}

@media only screen and (min-width:480px) and (max-width:767px) {
    .inner-banner {
        padding-top: 50px;
        height: 220px;
        background-size: cover;
    }
    .inner-banner h1 {
        font-size: 30px;
    }
    .ts {
        padding: 20px 0px;
    }
    .ts h2 {
        font-size: 24px;
        line-height: 32px;
        width: auto;
        padding: 0px 0px 10px 0px;
    }
    .ts p {
        font-size: 14px;
        line-height: 20px;
        padding: 0px 10px;
        width: 90%;
        margin: 0 auto;
    }
    .ts section h3 {
        margin: 18px 0px 0px 0px;
    }
    .demand {
        padding: 40px 0px 40px 0px;
    }
    .demand h4 {
        font-size: 24px;
        line-height: 30px;
        margin-top: 20px;
    }
    .demand p {
        font-size: 16px;
        line-height: 24px;
        text-align: justify;
        padding: 0px;
        margin: 10px 0px;
    }
    .datacenter {padding: 30px 0px;}
    .datacenter p {font-size: 28px;padding: 0% 5% 0% 5%;line-height: 32px;}
    .why {padding: 40px 0px;}
    .why h4{font-size: 24px;line-height: 25px;margin-top: 20px;}
    #main #wc .card .card-header .btn-header-link{padding: 10px 10px 10px 0px;font-size: 20px;}
    #main #wc .card .card-header .btn-header-link.collapsed::after {font-size: 9px;width: 20px;height: 20px;padding: 1px 8px 0px 5px;}
    #main #wc .card .card-header .btn-header-link::after {font-size: 9px;width: 20px;height: 20px;padding: 1px 8px 0px 5px;}
    .card-body {padding:10px 0px 10px 30px; font-size: 14px; line-height: 25px; }
    .offer {padding: 20px 0px 40px 0px;}
    .offer h4 {font-size: 28px; line-height: 32px; padding: 10px 0px 20px 0px;margin-bottom: 50px;}
    .mrgnbt {margin-bottom: 150px;}
    .mrgnlft {margin-left: 20px;}
    .tn {padding: 20px 0px 40px 0px;}
    .tn h2 {font-size: 28px; line-height: 32px; padding: 10px 0px 20px 0px;}
    .tn p{font-size: 16px; line-height: 24px; text-align: justify; padding: 0px 15px; }
}

@media only screen and (min-width:768px) and (max-width:1023px) {
    .inner-banner {
        padding-top: 60px;
        height: 220px;
        background-size: cover;
    }
    .inner-banner h1 {
        font-size: 30px;
        line-height: 40px;
    }
    .ts {padding: 20px 0px;}
    .ts h2 {
        font-size: 24px;
        line-height: 32px;
        width: auto;
        padding: 0px 0px 10px 0px;
    }
    .ts p {
        font-size: 15px;
        line-height: 20px;
        padding: 0px 10px;
        margin: 0 auto;
    }
    .ts section h3 {
        margin: 18px 0px 0px 0px;
    }
    .demand {padding: 40px 0px 40px 0px;}
    .demand h4 { font-size: 22px;line-height: 30px;margin-top: 0px;}
    .demand p {font-size: 14px; line-height: 16px; text-align: justify; padding: 0px; margin: 10px 0px; }
    .demand ul li{font-size: 14px;line-height: 25px;}
    .datacenter {padding: 30px 0px;}
    .datacenter p {font-size: 28px;padding: 0% 5% 0% 5%;line-height: 32px;}
    .why {padding: 40px 0px;}
    .why h4{font-size: 24px;line-height: 25px;margin-top: 20px;}
    #main #wc .card .card-header .btn-header-link{padding: 10px 10px 10px 0px;font-size: 20px;}
    #main #wc .card .card-header .btn-header-link.collapsed::after {font-size: 9px;width: 20px;height: 20px;padding: 1px 8px 0px 5px;}
    #main #wc .card .card-header .btn-header-link::after {font-size: 9px;width: 20px;height: 20px;padding: 1px 8px 0px 5px;}
    .card-body {padding:10px 0px 10px 30px; font-size: 14px; line-height: 25px; }
    .offer {padding: 20px 0px 40px 0px;}
    .offer h4 {font-size: 28px; line-height: 32px; padding: 10px 0px 20px 0px;margin-bottom: 50px;}
    .mrgnbt {margin-bottom: 150px;}
    .mrgnlft {margin-left: 20px;}
    .tn {padding: 20px 0px 40px 0px;}
    .tn h2 {font-size: 28px; line-height: 32px; padding: 10px 0px 20px 0px;}
    .tn p{font-size: 18px; line-height: 24px; padding: 0px 15px; }
}

@media only screen and (min-width:1024px) and (max-width:1200px) {
    .inner-banner {padding-top: 60px; height: 220px; background-size: cover; }
    .inner-banner h1 {font-size: 30px;line-height: 40px; }
    .wdd {padding: 20px 0px; }
    .ts {padding: 20px 0px;}
    .ts h2 {font-size: 24px; line-height: 32px; width: auto; padding: 0px 0px 10px 0px; }
    .ts p {font-size: 15px; line-height: 20px; padding: 0px 10px; margin: 0 auto; }
    .demand {padding: 40px 0px 40px 0px;}
    .demand h4 {font-size: 24px; line-height: 30px; margin-top: 20px; }
    .demand p {font-size: 16px; line-height: 24px; text-align: justify; padding: 0px; margin: 10px 0px; }
    .datacenter {padding: 30px 0px;}
    .datacenter p {font-size: 28px;padding: 0% 5% 0% 5%;line-height: 32px;}
    .why {padding: 40px 0px;}
    .why h4{font-size: 24px;line-height: 30px;margin-top: 10px;}
    #main #wc .card .card-header .btn-header-link{padding: 10px 10px 10px 0px;font-size: 20px;}
    #main #wc .card .card-header .btn-header-link.collapsed::after {font-size: 9px;width: 20px;height: 20px;padding: 1px 8px 0px 5px;}
    #main #wc .card .card-header .btn-header-link::after {font-size: 9px;width: 20px;height: 20px;padding: 1px 8px 0px 5px;}
    .card-body {padding:10px 0px 10px 30px; font-size: 14px; line-height: 25px; }
}
@media only screen and (min-width:1200px) and (max-width:1440px){
  .inner-banner {padding-top: 110px; height:300px; background-size: cover;}
  .inner-banner h1 {font-size: 40px;line-height: 50px;}
  .inner-banner p{font-size: 16px;line-height: 24px;padding: 0% 60% 0% 0%;}
  .ts{padding: 20px 0px; }
  .ts p{padding: 0px 20px;}
  .datacenter {padding: 45px 0px;}
  .datacenter p {font-size: 36px;padding: 0% 5% 0% 5%;line-height: 42px;}
  .demand{padding: 70px 20px 80px 20px;}
  .why {padding: 70px 20px;}
}