/*

TemplateMo 570 Chain App Dev

https://templatemo.com/tm-570-chain-app-dev

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-size: 14px;
  font-weight: 200;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 30px;
  font-weight: 300;
  color: #afafaf;
}

/*img {
  width: 100%;
  overflow: hidden;
}*/

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

::selection {
  background: #4b8ef1;
  color: #fff !important;
}

::-moz-selection {
  background: #4b8ef1;
  color: #fff !important;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.section-heading {
  position: relative;
  margin: 20px;
/*  z-index: 2;*/
}

.section-heading h4 {
  color: #2a2a2a;
  font-size: 30px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 10px;
}

.section-heading h4 em {
  font-style: normal;
  color: #4b8ef1;
}

.section-heading img {
  width: 45px;
  height: 2px;
}

.section-heading p {
  margin-top: 10px;
}

.show-up {
  position: relative;
  z-index: 2;
}

.white-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #4b8ef1 !important;
  text-transform: capitalize;
  font-size: 15px;
  background-color: #fff;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.white-button a i {
  margin-left: 5px;
  font-size: 18px;
}

.white-button a:hover {
  background-color: #4b8ef1;
  color: #fff !important;
}

.text-button a {
  font-size: 15px;
}

.text-button a i {
  margin-left: 5px;
  font-size: 14px;
  transition: all .3s;
}

.text-button a:hover i {
  margin-left: 8px;
}

.gradient-button a {
  display: inline-block !important;
  padding: 30px 80px !important;
  color: #fff !important;
  text-transform: capitalize;
  font-size: 15px;
  background: rgb(19,175,240);
  background: linear-gradient(105deg, rgba(91,104,235,1) 0%, rgba(40,225,253,1) 100%);
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
  text-align: center;
}

.gradient-button a:hover {
  color: #fff !important;
  background: rgb(19,175,240);
  background: linear-gradient(105deg, rgba(91,104,235,1) 0%, rgba(40,225,253,1) 100%);
}

.border-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #4b8ef1 !important;
  border: 1px solid #4b8ef1;
/*  text-transform: capitalize;*/
font-size: 15px;
display: inline-block;
background-color: #fff;
border-radius: 23px;
font-weight: 500 !important;
letter-spacing: 0.3px !important;
transition: all .5s;
}

.border-button a:hover {
  background-color: #4b8ef1;
  color: #fff !important;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #fff !important;
  height: 80px!important;
  border-bottom: none !important;
/*  position: fixed!important;*/
top: 0px;
left: 0px;
right: 0px;
box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff;
}

.background-header .main-nav .nav li:hover a {
  color: #4b8ef1;
}

.background-header .nav li a.active {
  position: relative;
  color: #fff;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #4b8ef1;
  content: '';
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}

.background-header .nav li:last-child a.active:after {
  background-color: transparent;
}

.header-area {
  background-color: transparent;
  border-bottom: 1px solid rgba(42,42,42,0.2);
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo {
  line-height: 100px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 80px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:nth-child(6) {
  padding-right: 0px;
  padding-left: 40px;
}

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a,
.header-area .main-nav .nav li:nth-child(6) a ,
.background-header .main-nav .nav li:nth-child(6) a {
  padding: 0px 20px !important;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover,
.header-area .main-nav .nav li:nth-child(6) a:hover ,
.background-header .main-nav .nav li:nth-child(6) a:hover {
  color: #fff !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #4b8ef1!important;
}

.header-area .main-nav .nav li:last-child a.active {
  color: #fff !important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #4b8ef1!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #4b8ef1!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #2a2a2a;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #4b8ef1;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    color: #069;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
  .background-header .nav li a.active:after {
    display: none;
  }
}

@media (max-width: 767px) {
  .pre-header ul.info li:last-child,
  .pre-header ul.info li:nth-child(6) {
    display: none!important;
  }
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #4b8ef1!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #fff;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
    box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #4b8ef1!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: #fff;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #4b8ef1;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #4b8ef1;
  border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/
#top{
  background: #ffffff;
}

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
}

.main-banner:after {
  content: '';
/*  background-image: url(../../../image/itsolution/itService/slider-left-dec.png);*/
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
}

.main-banner .left-content {
  margin-right: 15px;
}

.main-banner .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  line-height: 70px;
  font-size: 50px;
  margin-bottom: 20px;
}

.main-banner .left-content p {
  margin-bottom: 45px;
  color: #2a2a2a;
  font-weight: 400;
}

.main-banner .left-content .first-button {
  margin-right: 15px;
}

.main-banner .left-content .white-button {
  display: inline-block;
}

.main-banner .right-image {
  text-align: center;
  position: relative;
/*  z-index: 20;*/
}

/*.main-banner .right-image img {
 max-width: 710px;
  height: auto;
}*/

.main-banner .left-content .white-button a {
  background-color: #4b8ef1;
  color: #fff !important;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/
#Successful{
  background-color: #fff;
}

.services {
/*  padding-top: 80px;*/
position: relative;
margin: 10px;
}

.services  .section-heading p {
  margin-top: 10px;
  margin-left: 18%;
  margin-right: 18%;
}

.services .container-fluid {
  padding-left: 65px;
  padding-right: 65px;
}

.services:after {
  content: '';
/*  background-image: url(../../../image/itsolution/itService/services-left-dec.png);*/
background-repeat: no-repeat;
position: absolute;
left: 0;
bottom: -300px;
width: 261px;
height: 368px;
z-index: 0;
}

.services:before {
  content: '';
/*  background-image: url(../../../image/itsolution/itService/services-right-dec.png);*/
background-repeat: no-repeat;
position: absolute;
right: 0;
top: 0;
width: 1136px;
height: 244px;
z-index: 0;
}

.services .section-heading {
  text-align: center;
  margin-bottom: 40px;
}

.services .section-heading .line-dec {
  margin: 0 auto;
}

.service-item {
  position: relative;
  z-index: 1;
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  background-color: #fff;
  border-radius: 10px;
  border-top-right-radius: 50px;
  transition: all .3s;
  height: 330px;
}

.service-item .icon {
  margin-left: 0px;
  margin-bottom: 30px;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  transition: all .3s;
}

.service-item h4 {
  transition: all .3s;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.service-item p {
  transition: all .3s;
  font-size: 15px;
  margin-bottom: 20px;
}

.service-item:hover h4,
.service-item:hover p,
.service-item:hover .text-button a {
  color: #fff;
}


.solution-item {
  position: relative;
  z-index: 1;
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  background-color: #fff;
  border-radius: 10px;
  border-top-right-radius: 50px;
  transition: all .3s;
  height: 380px;
  margin-bottom: 30px;
}

.solution-item .icon {
  margin-left: 0px;
  margin-bottom: 30px;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  transition: all .3s;
}

.solution-item h4 {
  transition: all .3s;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}
.solution-item p {
  transition: all .3s;
  font-size: 12px;
  margin-bottom: 20px;
}

.solution-item:hover h4,
.solution-item:hover p,
.solution-item:hover .text-button a {
  color: #fff;
}

.solution-item:hover {
  background-image: url(../../../image/itsolution/itService/service-bg.jpg);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
}


.first-service .icon {
  background-image: url(../../../image/itsolution/itService/service-icon-01-New.png);
}

.first-service:hover .icon {
  background-image: url(../../../image/itsolution/itService/service-icon-hover-01-New.png);
}

.second-service .icon {
  background-image: url(../../../image/itsolution/itService/service-icon-02-New.png);
}

.second-service:hover .icon {
  background-image: url(../../../image/itsolution/itService/service-icon-hover-02-New.png);
}


.third-service .icon {
  background-image: url(../../../image/itsolution/itService/service-icon-03-New.png);
}

.third-service:hover .icon {
  background-image: url(../../../image/itsolution/itService/service-icon-hover-03-New.png);
}

.fourth-service .icon {
  background-image: url(../../../image/itsolution/itService/service-icon-04-New.png);
}

.fourth-service:hover .icon {
  background-image: url(../../../image/itsolution/itService/service-icon-hover-04-New.png);
}

.five-service .icon {
  background-image: url(../../../image/itsolution/itService/service-icon-05-New.png);
}

.five-service:hover .icon {
  background-image: url(../../../image/itsolution/itService/service-icon-hover-05-New.png);
}

.six-service .icon {
  background-image: url(../../../image/itsolution/itService/service-icon-06-New.png);
}

.six-service:hover .icon {
  background-image: url(../../../image/itsolution/itService/service-icon-hover-06-New.png);
}

.service-item:hover {
  background-image: url(../../../image/itsolution/itService/service-bg.jpg);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
}

.team {
  background: #fafafa;
  border-top: 1px solid #e4e4e4;
}

/*
---------------------------------------------
About Us
---------------------------------------------
*/

.about-us {
  padding-top: 40px;
  position: relative;
  background: #ffffff;
  margin: 20px;
}

.about-us .section-heading {
  margin-bottom: 25px;
}

.about-us .section-heading,
.about-us .box-item,
.about-us p,
.about-us .box-item .gradient-button,
.about-us .box-item span {
  position: relative;
  z-index: 1;
}

.about-us .box-item {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.07);
  padding: 10px 30px;
  background-color: #fff;
  border-radius: 40px;
  margin-bottom: 30px;
}

.about-us .box-item h4 a {
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px;
  color: #2a2a2a;
  transition: all .3s;
}

.about-us .box-item p {
  margin-bottom: 0px;
}

.about-us .box-item:hover h4 a {
  color: #4b8ef1;
}

.about-us .gradient-button {
  margin-top: 30px;
  margin-bottom: 10px;
}

.about-us span {
  font-size: 14px;
  color: #7a7a7a;
}

.about-us .right-image {
  position: relative;
  z-index: 1;
}

.about-us:after {
/*  background-image: url(../../../image/itsolution/itService/about-bg.jpg);*/
width: 777px;
height: 1132px;
content: '';
position: absolute;
background-repeat: no-repeat;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 0;
}

/*
---------------------------------------------
Why Choose Our Software
---------------------------------------------
*/

.software-us {
  padding-top: 40px;
  position: relative;
  margin: 10px;
}

.software-us .section-heading {
  margin-bottom: 25px;
}

.software-us .section-heading,
.software-us .box-item,
.software-us p,
.software-us .box-item .gradient-button,
.software-us .box-item span {
  position: relative;
  z-index: 1;
}

.software-us .box-item {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.07);
  padding: 10px 30px;
  background-color: #fff;
  border-radius: 40px;
  margin-bottom: 30px;
}

.software-us .box-item h4 a {
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px;
  color: #2a2a2a;
  transition: all .3s;
}

.software-us .box-item p {
  margin-bottom: 0px;
}

.software-us .box-item:hover h4 a {
  color: #4b8ef1;
}

.software-us .gradient-button {
  margin-top: 30px;
  margin-bottom: 10px;
}

.software-us span {
  font-size: 14px;
  color: #7a7a7a;
}

.software-us .right-image {
  position: relative;
  z-index: 1;
}

.software-us:after {
/*  background-image: url(../../../image/itsolution/itService/about-bg.jpg);*/
width: 777px;
height: 1132px;
content: '';
position: absolute;
background-repeat: no-repeat;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 0;
}


/* 
---------------------------------------------
Why Choose Our Software
---------------------------------------------
*/
.card-body p {
  font-size: 14px;
}

#choose{
  background:#ffffff;
}

#choose .thumbnail_it .caption h6 {
  padding: 1rem!important;
  border: none;
  margin-bottom:2rem;
  -webkit-transition: .5s all ease;
  -moz-transition: .5s all ease;
  transition: .5s all ease;
  position: relative;
/*  font-family: 'poppins';*/
color: #000EB1 !important;
font-weight:100;
text-decoration:none;
}
#choose .thumbnail_it p{
  padding-top: 20px;
  font-size: 13px;
  
}
#choose .thumbnail_it .caption:hover {
  display:inline-block;
  font-weight:700;
  
}
#choose .thumbnail_it .caption h6:before{
  font-family: FontAwesome;
  position: absolute;
  font-size: 30px;
  color: #0066FF;
  left: 0;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition:transform .2s ease-in-out;
}
#choose .thumbnail_it .caption .block-1:before{
  content: "\f0e8";
}
#choose .thumbnail_it .caption .block-2:before{
  content: "\f006";
}
#choose .thumbnail_it .caption .block-3:before{
  content: "\f0a1";
}
#choose .thumbnail_it .caption .block-4:before{
  content: "\f209";
}
#choose .thumbnail_it .caption .block-5:before{
  content: "\f274";
}
#choose .thumbnail_it .caption .block-6:before{
  content: "\f091";
}
#choose .thumbnail_it .caption .block-7:before{
  content: "\f087";
}
#choose .thumbnail_it .caption .block-8:before{
  content: "\f0c0";
}
#choose .thumbnail_it .caption .block-9:before{
  content: "\f0ed";
}

/* 
---------------------------------------------
The Clients
---------------------------------------------
*/
#top_it{
 background: #ffffff;
}

#Software{
  background: #ffffff;
}

#onSoftware{
  background: #ffffff;
}

#CompanyProfile{
  background: #ffffff;
}

.the-clients {
  padding-top: s0px;
}

.the-clients  .section-heading {
  text-align: center;
/*  margin-bottom: 40px;*/
}

/*.the-clients  .section-heading p {
  margin-top: 10px;
  margin-left: 18%;
  margin-right: 18%;
}*/

.the-clients .naccs {
  position: relative;
}

.menu .thumb h4 {
  margin-bottom: 0px;
  font-size: 20px;
  color: #2a2a2a;
}

.menu .thumb span.date {
  display: inline-block;
  margin-top: 0px;
  color: #afafaf;
}

.menu .thumb span.category,
.menu .thumb span.rating {
  font-weight: 700;
  color: #afafaf;
}

.menu .thumb i {
  color: #afafaf;
}

.the-clients .naccs .menu div {
  color: #fff;
  font-size: 15px;
  margin-bottom: 15px;
  margin-top: 15px;
  text-align: left;
  padding: 0px 15px;
  cursor: pointer;
  position: relative;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.the-clients .naccs .menu div.active h4,
.the-clients .naccs .menu div.active i,
.the-clients .naccs .menu div.active span.rating,
.the-clients .naccs .menu div.active .thumb {
  color: #4b8ef1;
}

.the-clients ul.nacc {
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.the-clients ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.the-clients ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

.the-clients ul.nacc li {
  width: 100%;
}

.the-clients .nacc .thumb .client-content img {
  width: 76px;
  height: 62px;
}

.the-clients .nacc .thumb .client-content {
  padding: 60px 30px;
  background-image: url(../../../image/itsolution/itService/client-bg.png);
  background-size: cover;
  border-radius: 50px;
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
}

.the-clients .nacc .thumb .client-content p {
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  font-style: italic;
  margin-top: 30px;
}

.the-clients .nacc .thumb .down-content {
  margin-top: 30px;
}

.the-clients .nacc .thumb .down-content img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  display: inline;
}

.the-clients .nacc .thumb .down-content .right-content {
  display: inline-block;
  margin-left: 20px;
}

.the-clients .nacc .thumb .down-content .right-content h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.the-clients .nacc .thumb .down-content .right-content span {
  color: #2a2a2a;
}


/* 
---------------------------------------------
The Clients
---------------------------------------------
*/

#service{
  background-color: #ffffff;
}

.pricing-tables {
  margin: 15px;
  background: #ffffff;
  /*  padding-top: 10px;*/
}

.pricing-tables  .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.pricing-tables  .section-heading p {
  margin: 15px;
/*  margin-top: 10px;*/
/*  margin-left: 18%;*/
/*  margin-right: 18%;*/
}

.pricing-item-regular {
  margin-top: 30px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.07);
  border-radius: 50px;
  padding: 90px 30px;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.pricing-item-regular:before {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../../image/itsolution/itService/regular-table-top.png);
  z-index: 0;
  content: '';
  width: 274px;
  height: 221px;
}

.pricing-item-regular:after {
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../../../image/itsolution/itService/regular-table-bottom.png);
  z-index: 0;
  content: '';
  width: 370px;
  height: 171px;
}

.pricing-item-regular span.price {
  font-size: 40px;
  color: #fff;
  position: absolute;
  font-weight: 700;
  z-index: 1;
  left: 30px;
  top: 30px;
}

.pricing-item-regular h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 30px;
}

.pricing-item-regular .icon img {
  width: 120px;
  height: 106px;
  margin-bottom: 30px;
}

.pricing-item-regular ul li {
  color: #4b8ef1;
  font-size: 15px;
  margin-bottom: 15px;
}

.pricing-item-regular ul li:last-child {
  margin-bottom: 0px;
}

.pricing-item-regular ul li.non-function {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item-regular .border-button {
  position: relative;
  z-index: 1;
  margin-top: 40px;
}

.pricing-item-pro {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.07);
  border-radius: 50px;
  padding: 120px 30px;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.pricing-item-pro:before {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../../image/itsolution/itService/pro-table-top.png);
  z-index: 0;
  content: '';
  width: 281px;
  height: 251px;
}

.pricing-item-pro:after {
  position: absolute;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../../../image/itsolution/itService/pro-table-bottom.png);
  z-index: 0;
  content: '';
  width: 100%;
  height: 201px;
}

.pricing-item-pro span.price {
  font-size: 40px;
  color: #fff;
  position: absolute;
  font-weight: 700;
  z-index: 1;
  left: 30px;
  top: 30px;
}

.pricing-item-pro h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 30px;
}

.pricing-item-pro .icon img {
  width: 120px;
  height: 106px;
  margin-bottom: 30px;
}

.pricing-item-pro ul li {
  color: #4b8ef1;
  font-size: 15px;
  margin-bottom: 15px;
}

.pricing-item-pro ul li:last-child {
  margin-bottom: 0px;
}

.pricing-item-pro ul li.non-function {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item-pro .border-button {
  position: relative;
  z-index: 1;
  margin-top: 40px;
}




/* 
---------------------------------------------
Free Quote
--------------------------------------------- 
*/

.free-quote {
  background-image: url(../../../image/itsolution/itService/quote-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 130px;
}

.free-quote .section-heading {
  margin-bottom: 60px;
}

.free-quote .section-heading h6,
.free-quote .section-heading h4 {
  color: #fff;
}

.free-quote .section-heading .line-dec {
  margin: 0 auto;
  background-color: #fff;
}

.free-quote form {
  background-color: #fff;
  display: inline-block;
  width: 100%;
  min-height: 80px;
  border-radius: 40px;
  position: relative;
  z-index: 1;
}

.free-quote form input {
  width: 100%;
  margin-top: 20px;
  margin-left: 30px;
  color: #afafaf;
  font-weight: 400;
  font-size: 15px;
  height: 40px;
  background-color: transparent;
  border-bottom: 1px solid #eee;
  border-top: none;
  border-left: none;
  border-right: none;
  position: relative;
  z-index: 2;
  outline: none;
}

.free-quote form button {
  width: 100%;
  height: 80px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  outline: none;
  border: none;
  margin-left: 30px;
  background-color: #726ae3;
  font-size: 15px;
  color: #fff;
}


/*
---------------------------------------------
PopUp
---------------------------------------------
*/

#lean_overlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  display: none;
}

.popupContainer {
  position: absolute;
  width: 330px;
  height: auto;
  left: 45%;
  top: 60px;
  background: #FFF;
}

.btn {
  padding: 10px 20px;
  background: #4b8ef1;
  color: #fff;
  transition: all .3s;
}

.btn_red {
  background: #4b8ef1;
  color: #FFF;
}

.btn:hover {
  background: #E4E4E2;
}

.btn_red:hover {
  color: #2a2a2a;
  background: #E4E4E2;
}

a.btn {
  color: #fff;
  text-align: center;
  text-decoration: none;
}

a.btn_red {
  color: #FFF;
}

.one_half {
  width: 50%;
  display: block;
  float: left;
}

.one_half.last {
  width: 45%;
  margin-left: 5%;
}
/* Popup Styles*/

.popupHeader {
  font-size: 16px;
  text-transform: uppercase;
}

.popupHeader {
  background: #F4F4F2;
  position: relative;
  padding: 10px 20px;
  border-bottom: 1px solid #DDD;
  font-weight: bold;
}

.popupHeader .modal_close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 15px;
  background: #4b8ef1;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
}

.popupBody {
  padding: 20px;
}

.social_login .social_box {
  display: block;
  clear: both;
  padding: 10px;
  margin-bottom: 10px;
  background: #F4F4F2;
  overflow: hidden;
}

.social_login .icon {
  display: inline-block;
  
  padding: 5px 10px;
  margin-right: 10px;
  float: left;
  color: #FFF;
  font-size: 16px;
  text-align: center;
}

.social_login .fb .icon {
  background: #3B5998;
}

.social_login .google .icon {
  background: #DD4B39;
}

.social_login .icon_title {
  display: block;
  padding: 5px 0;
  float: left;
  font-weight: bold;
  font-size: 16px;
  color: #777;
}

.social_login .social_box:hover {
  background: #E4E4E2;
}

.centeredText {
  color: #afafaf;
  text-align: center;
  margin: 20px 0;
  clear: both;
  overflow: hidden;
  text-transform: capitalize;
}

.user_login label {
  color: #afafaf;
}

.action_btns {
  clear: both;
  overflow: hidden;
}

.action_btns a {
  display: block;
}
/* User Login Form */

.user_login {
  display: none;
}

.user_login label {
  display: block;
  margin-bottom: 5px;
}

.user_login input[type="text"],
.user_login input[type="email"],
.user_login input[type="password"] {
  display: block;
  width: 90%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_login input[type="checkbox"] {
  float: left;
  margin-right: 10px;
  width: 22px;
  height: 22px;
}

.user_login input[type="checkbox"]+label {
  float: left;
}

.user_login .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}

.forgot_password {
  display: block;
  margin: 20px 0 10px;
  clear: both;
  overflow: hidden;
  text-decoration: none;
  color: #4b8ef1;
  transition: all .3s;
}
/* User Register Form */

.user_register {
  display: none;
}

.user_register label {
  color: #afafaf;
  display: block;
  margin-bottom: 5px;
}

.user_register input[type="text"],
.user_register input[type="email"],
.user_register input[type="password"] {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_register input[type="checkbox"] {
  width: 22px;
  height: 22px;
  float: left;
  margin-right: 8px;
}

.user_register input[type="checkbox"]+label {
  float: left;
  color: #afafaf;
}

.user_register .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}

/*company_profile*/
#image_company_profile{
  padding-bottom: 30px;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/



@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
  
  .main-banner .left-content h2 {
    z-index: 2;
    position: relative;
    font-weight: 700;
    line-height: 70px;
    font-size: 50px;
    margin-bottom: 20px;
  }

  .main-banner .left-content p {
    margin-bottom: 45px;
  }
}

@media (max-width: 992px) {
  .header-area {
    background-color: #fff;
  }
  .main-banner:after {
    display: none;
  } 
  .main-banner .left-content h2 {
    color: #2a2a2a;
    margin-right: 0;
  }
  .main-banner .left-content p {
    color: #afafaf;
    margin: 20px;
  }
  .main-banner .left-content .white-button a {
    background-color: #4b8ef1;
    color: #fff !important;
  }
  form#contact {
    overflow: hidden;
  }
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }
  .main-banner .left-content {
    margin-right: 0px;
  }
  .main-banner {
    text-align: center;
    padding: 26px 0px 30px 0px;
  }
  .main-banner:before {
    display: none;
  }
  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }
  .features-item {
    margin-bottom: 45px;
  }
  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }
  .skill-item {
    margin-bottom: 30px;
  }
  .about-left-image img {
    margin-right: 0px;
    margin-bottom: 45px;;
  }
  .services .naccs .menu div {
    font-size: 15px;
    font-weight: 500;
  }
  .service-item {
    text-align: center;
    margin-bottom: 30px;
  }
  .about-us .box-item {
    text-align: center;
  }
  .about-us:after {
    display: none;
  }
  .about-us .gradient-button,
  .about-us span {
    text-align: center;
    display: block;
  }
  .about-us .right-image {
    margin-top: 30px;
  }
  .service-item .icon {
    margin: 0 auto 30px auto;
  }
  .about-us .section-heading {
    text-align: center;
  }
  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }

  .software-us .box-item {
    text-align: center;
  }
  .software-us:after {
    display: none;
  }
  .software-us .gradient-button,
  .software-us span {
    text-align: center;
    display: block;
  }
  .software-us .right-image {
    margin-top: 30px;
  }
  .service-item .icon {
    margin: 0 auto 30px auto;
  }
  .software-us .section-heading {
    text-align: center;
  }
  .software-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }
  
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 70px;
  }
  .pricing-item-regular {
    margin-bottom: 30px;
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .contact-info {
    margin-top: 60px;
  }
  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .the-clients .naccs .menu div {
    text-align: center;
  }
  footer .section-heading h4 {
    color: #2a2a2a;
  }
  footer #search {
    margin-bottom: 45px;
  }
  footer {
    padding-top: 0px;
    text-align: center;
  }
  .footer-widget ul {
    display: block;
    width: 100%;
    float: none;
    text-align: center;
    margin: 0 auto;
  }
  .footer-widget h4 {
    margin-top: 45px;
    margin-bottom: 20px;
  }
  footer #search input {
    border: 1px solid #eee;
    color: #afafaf;
    background-color: #fff;
    border-radius: 23px;
    margin-bottom: 15px;
    padding: 0px 30px;
  }
  footer #search button {
    background-color: #fff;
    color: #4b8ef1;
  }
  footer #search input::placeholder { 
    color: #2a2a2a;
  }
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }
  .main-banner .info-stat {
    margin-bottom: 15px;
  }
  .menu .thumb span.date {
    margin-bottom: -20px;
    display: block;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .menu .thumb span.category {
    display: none;
  }
  .about-us .right-image {
    margin-top: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .services .naccs .menu div .thumb {
    padding: 5px;
  }
  .services .icon img {
    margin: 0px;
  }
  .the-clients .nacc .thumb .down-content .right-content {
    margin-left: 0px;
    margin-top: 15px;
  }
  .services ul.nacc li.active {
    padding: 45px;
  }
  .services .naccs .menu div  {
    font-size: 0px;
  }
  .the-clients .nacc .thumb .down-content {
    text-align: center;
  }
  .services ul.nacc li .right-image img {
    float: none;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }
  .our-portfolio .section-heading .line-dec {
    margin: 0 auto;
  }
  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }
  .free-quote form input {
    margin-left: 0px;
    padding: 0px 30px;
  }
  .free-quote form button {
    margin-left: 0px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 30px;
  }
  .post-item .thumb img {
    max-width: 140px;
  }
  .post-item .right-content p {
    display: none;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }
}


/*
-----------------------------------------------
itSolution2
Our Customer (LOGO)
-----------------------------------------------
*/

.frame {
  height: 230px;      /* equals max image height */
  width: 236px;
  border-radius: 10px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  white-space: nowrap;
  text-align: center; 
  margin: 1em 1em;
}

.helper {
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.frame img {
  vertical-align: middle;
  max-height: auto;
  max-width: 200px;
}

/*
-----------------------------------------------
itSolution1
Our Customer (LOGO)
-----------------------------------------------
*/

/*Vertical align*/
.boxborder {
 width: 150px;
 height: 180px
 padding: 70px 0;
/*border: 3px solid green;*/
align-self: center;
margin: 0 auto;
}

.col img {
  width: 70%;
  height: auto;
  margin: auto;
  display: block;
  align-self: center;
}

/*
-----------------------------------------------
itSolution
Our Customer (LOGO Slide)
-----------------------------------------------
*/

.slide img {
  width: 350px;
  height: auto;
  animation: scroll 60s linear infinite;
  max-width: 100%;
  padding: 55px;
}

.slide-track {
  width: 100%;
  display: flex;
  gap: 3em;
  overflow: hidden;
}

.slider {
  margin-top: 10px;
  margin-bottom: 30px;
  background-color: white;
  /*padding: 8em 2em;*/
  border: 1px solid whitesmoke;
}

@keyframes scroll {
  0% {transform: translateX(0);}
  100% {transform: translatex(-1000%)}
}

/* ----------- Start iPhone SE 2020 ----------- */
/*For iPhone SE 2020 Media Query for min-width*/
@media only screen and (min-width: 375px)
{ 
  .slide img {
    width: 250px;
    height: auto;
    animation: scroll 60s linear infinite;
    max-width: 200%;
    padding: 35px;
  }
  .slide-track {
    width: 250%;
    display: flex;
    gap: 3em;
    overflow: hidden;
  }

  .cards {
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    margin: 1rem 1rem;
    position: relative;
    max-height: 230px;
    max-width: 330px;;
    text-align: center;
  }
}

/*For iPhone SE 2020 Media Query for min-height*/
@media only screen and (min-height: 667px)
{ 
/* Your Styles... */ 
}

/*iPhone SE 2020 Media Query for landscape orientation:*/
@media only screen and (min-width: 375px) and (orientation: landscape)
{ 
/* Your Styles... */ 
}

/*iPhone SE 2020 Media Query for portrait orientation:*/
@media only screen and (min-height: 667px) and (orientation: portrait)
{ 
/* Your Styles... */ 
}
/* ----------- End iPhone SE 2020 ----------- */

/* ----------- Start iPhone 8 --------------- */
/*iPhone 8*/
@media only screen 
and (device-width : 375px) 
and (device-height : 667px) 
and (-webkit-device-pixel-ratio : 2) { 
}
/* ----------- End iPhone 8 --------------------- */

/* ----------- Start iPhone 8 Plus --------------- */
/*iPhone 8 Plus*/
@media only screen 
and (device-width : 414px) 
and (device-height : 736px) 
and (-webkit-device-pixel-ratio : 3) { 
}
/* ----------- End iPhone 8 Plus --------------- */

/* ----------- Start iPhone X ------------------ */
/*iPhone X*/
@media only screen 
and (device-width : 375px) 
and (device-height : 812px) 
and (-webkit-device-pixel-ratio : 3) { 

}
/* ----------- End iPhone X --------------- */

/* ----------- Start iPhone XR --------------- */
/*iPhone XR*/
/* 1792x828px at 326ppi */
@media only screen 
and (device-width : 414px) 
and (device-height : 896px) 
and (-webkit-device-pixel-ratio : 2) { 
}

/* iPhone XS*/
/* 2436x1125px at 458ppi */
@media only screen 
and (device-width : 375px) 
and (device-height : 812px) 
and (-webkit-device-pixel-ratio : 3) { }

/*iPhone XS Max*/
/* 2688x1242px at 458ppi */
@media only screen 
and (device-width : 414px) 
and (device-height : 896px) 
and (-webkit-device-pixel-ratio : 3) { }

/* ----------- End iPhone XR --------------- */


/*iPhone 15 Series*/
/* ----------- Start iPhone 15 and iPhone 15 Pro --------------- */
/*iPhone 15 Media Query for min-width:*/
@media only screen and (min-width: 393px)
{ /* Your Styles... */ }

/*iPhone 15 Media Query for min-height:*/
@media only screen and (min-height: 852px)
{ /* Your Styles... */ }

/*iPhone 15 Media Query for landscape orientation:*/
@media only screen and (min-width: 393px) and (orientation: landscape)
{ /* Your Styles... */ }

/*iPhone 15 Media Query for portrait orientation:*/
@media only screen and (min-height: 852px) and (orientation: portrait)
{ /* Your Styles... */ }

/*iPhone 15 Media Query with device pixel ratio:*/
@media only screen and (-webkit-min-device-pixel-ratio: 3), 
only screen and (-min--moz-device-pixel-ratio: 3), 
only screen and (-o-min-device-pixel-ratio: 3/1), 
only screen and (min-device-pixel-ratio: 3)
{ /* Your Styles... */ }

/* ----------- End iPhone 15 and iPhone 15 Pro ------------------ */

/* ----------- Start iPhone 15 Plus and iPhone 15 Pro Max --------------- */
/*iPhone 15 Plus Media Query for min-width:*/
@media only screen and (min-width: 430px)
{ /* Your Styles... */ }

/*iPhone 15 Plus Media Query for min-height:*/
@media only screen and (min-height: 932px)
{ /* Your Styles... */}

/*iPhone 15 Plus Media Query for landscape orientation:*/
@media only screen and (min-width: 430px) and (orientation: landscape)
{ /* Your Styles... */ }

/*iPhone 15 Plus Media Query for portrait orientation:*/
@media only screen and (min-height: 932px) and (orientation: portrait)
{ /* Your Styles... */ }

/*iPhone 15 Plus Media Query with device pixel ratio:*/
@media only screen and (-webkit-min-device-pixel-ratio: 3), 
only screen and (-min--moz-device-pixel-ratio: 3), 
only screen and (-o-min-device-pixel-ratio: 3/1), 
only screen and (min-device-pixel-ratio: 3)
{ /* Your Styles... */ }
/* ----------- End iPhone 15 Plus and iPhone 15 Pro Max --------------- */



/* ----------- Start ipad Mini --------------- */
/* ipad Mini Portrait */
@media only screen and (width:768px) and (resolution: 163dpi) {
}

/* ipad Mini Landscape */
@media only screen and (width:1024px) and (resolution: 163dpi) {

}
/* ----------- End ipad Mini --------------- */

/* ----------- Start iPad ------------------ */
/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
and (orientation: portrait) {
  /* CSS styles specific to iPad portrait mode */
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
and (orientation: landscape) {
 /* CSS styles specific to iPad landscape mode */
}
/* ----------- Start End iPad ----------- */

/* ----------- Start iPad Air ----------- */
/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
 /* CSS styles specific to iPad Air portrait mode */
}
/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 
and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
 /* CSS styles specific to iPad Air landscape mode */
}
/* ----------- End iPad Air ----------- */


/* ----------- Start iPad Pro --------------- */
/* Portrait and Landscape */
@media only screen 
and (min-width: 1024px) 
and (max-height: 1366px) 
and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Portrait */
@media only screen 
and (min-width: 1024px) 
and (max-height: 1366px) 
and (orientation: portrait) 
and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen 
and (min-width: 1024px) 
and (max-height: 1366px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* ----------- End iPad Pro --------------- */

/* ----------- Start Samsung Galaxy S8,S8+  --------------- */
/*Galaxy S8 Media Query for min-width*/
@media only screen and (min-width: 360px)
{ 
  .slide img {
    width: 250px;
    height: auto;
    animation: scroll 60s linear infinite;
    max-width: 200%;
    padding: 35px;
  }
  .slide-track {
    width: 250%;
    display: flex;
    gap: 3em;
    overflow: hidden;
  }
}

/*Galaxy S8 Media Query for min-height*/
@media only screen and (min-height: 740px)
{ /* Your Styles... */ }

/*Galaxy S8 Media Query for landscape orientation*/
@media only screen and (min-width: 360px) and (orientation: landscape)
{ /* Your Styles... */ }

/*Galaxy S8 Media Query for portrait orientation*/
@media only screen and (min-height: 740px) and (orientation: portrait)
{ /* Your Styles... */ }

/* ----------- End Samsung Galaxy S8,S8+ ------------------ */

/* ----------- Start Samsung Galaxy S9 360x658 (old) ------------------- */
/*Galaxy S9 Media Query for min-width:*/
@media only screen and (min-width: 320px)
{ 
  .slide img {
    width: 250px;
    height: auto;
    animation: scroll 60s linear infinite;
    max-width: 200%;
    padding: 35px;
  }
  .slide-track {
    width: 250%;
    display: flex;
    gap: 3em;
    overflow: hidden;
  }
}

/*Galaxy S9 Media Query for min-height:*/
@media only screen and (min-height: 658px)
{ /* Your Styles... */ }

/*Galaxy S9 Media Query for landscape orientation:*/
@media only screen and (min-width: 320px) and (orientation: landscape)
{ /* Your Styles... */ }

/*Galaxy S9 Media Query for portrait orientation:*/
@media only screen and (min-height: 658px) and (orientation: portrait)
{ /* Your Styles... */ }

/*Galaxy S9 Media Query with device pixel ratio:*/
@media only screen and (-webkit-min-device-pixel-ratio: 4), 
only screen and (-min--moz-device-pixel-ratio: 4), 
only screen and (-o-min-device-pixel-ratio: 4/1), 
only screen and (min-device-pixel-ratio: 4)
{ /* Your Styles... */ }
/* ----------- End Samsung Galaxy S9 360x658 (old) ---------------------- */

/* ----------- Start Samsung Galaxy S9 412x846 (New)  ------------------- */
/*Galaxy S9 Plus Media Query for min-width*/
@media only screen and (min-width: 412px)
{ 
}

/*Galaxy S9 Plus Media Query for min-height*/
@media only screen and (min-height: 846px)
{ /* Your Styles... */ 
}

/*Galaxy S9 Plus Media Query for landscape orientation*/
@media only screen and (min-width: 412px) and (orientation: landscape)
{ /* Your Styles... */ 
}

/*Galaxy S9 Plus Media Query for portrait orientation*/
@media only screen and (min-height: 846px) and (orientation: portrait)
{ /* Your Styles... */ 
}

/*Galaxy S9 Plus Media Query with device pixel ratio*/
@media only screen and (-webkit-min-device-pixel-ratio: 3.5), 
only screen and (-min--moz-device-pixel-ratio: 3.5), 
only screen and (-o-min-device-pixel-ratio: 3.5/1), 
only screen and (min-device-pixel-ratio: 3.5)
{ /* Your Styles... */ 
}
/* ----------- End Samsung Galaxy S9 412x846 (New) ---------------------- */

/* ----------- Start Samsung Galaxy Z Fold 5 344px*882px  --------------------------- */
@media only screen and (min-width: 344px)
{ 
  .slide img {
    width: 250px;
    height: auto;
    animation: scroll 60s linear infinite;
    max-width: 200%;
    padding: 35px;
  }
  .slide-track {
    width: 250%;
    display: flex;
    gap: 3em;
    overflow: hidden;
  }
}

/*Galaxy S8 Media Query for min-height*/
@media only screen and (min-height: 882px)
{ /* Your Styles... */ }

/* ----------- End Samsung Galaxy Z Fold 5 ---------------------- */