/* iconbox style 1 start*/

.cargoton-icon-box.cargoton-icon-box-style-1  .icon-box-title
{
  color: var(--color-theme-white);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-three);
  margin-top: 32px;
}
/* iconbox style 2 start*/
.cargoton-icon-box.cargoton-icon-box-style-2 {
  padding:32px;
  border:1px solid var(--border-color-light);
  z-index: 1;
  width: 100%;
  overflow:hidden;
  display: flex;
  align-items: center;
  -webkit-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  position: relative;
  background-color: var(--color-theme-white);
}
.cargoton-icon-box.cargoton-icon-box-style-2:before{
  content: '';
  position: absolute;
  top: 0;
  right: 0; 
  width: 4px; 
  height: 0;
  background: var(--color-theme-secondary);
  transition: all .5s ease-in;
}
.cargoton-icon-box.cargoton-icon-box-style-2:hover:before,
.cargoton-icon-box.cargoton-icon-box-style-2.active:before{
  height: 100%;
}
.cargoton-icon-box.cargoton-icon-box-style-2:hover,
.cargoton-icon-box.cargoton-icon-box-style-2.active{
  background-color: var(--color-theme-primary);
}
.cargoton-icon-box.cargoton-icon-box-style-2 .cargoton-digit
{
  color:var(--color-theme-primary);
}
.cargoton-icon-box-style-2.hover-digit .cargoton-digit{
  opacity:0
}

.cargoton-icon-box.cargoton-icon-box-style-2.hover-digit:hover .cargoton-digit,
.cargoton-icon-box.cargoton-icon-box-style-2.hover-digit.active .cargoton-digit
{
    opacity: 1;    
}
.cargoton-icon-box.cargoton-icon-box-style-2 .icon-box-content {
  position: relative;
  margin-left:32px;
  width:60%;
}
.cargoton-icon-box.cargoton-icon-box-style-2  .content-wrapper {
    width: 100%;
    z-index: 99;
    -webkit-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}
.cargoton-icon-box.cargoton-icon-box-style-2 .icon-title-wrap{

  -webkit-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
.cargoton-icon-box.cargoton-icon-box-style-2 .icon-box-img svg {
  text-align: center;
}
.cargoton-icon-box.cargoton-icon-box-style-2 .icon-box-img{
  position: relative;
  background: var(--global-body-lightcolor);
  padding: 32px;
  text-align: center;
  width: 40%;
  -webkit-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
.cargoton-icon-box.cargoton-icon-box-style-2 .icon-box-content .icon-box-desc{
  color:var(--global-font-title);
}
.cargoton-icon-box.cargoton-icon-box-style-2.hover-desc  .icon-box-content .icon-box-title
{
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0,25px,0);
  transform: translate3d(0,25px,0);
}
.cargoton-icon-box.cargoton-icon-box-style-2.hover-desc:hover  .icon-box-content .icon-box-title,
.cargoton-icon-box.cargoton-icon-box-style-2.hover-desc.active .icon-box-content .icon-box-title
{
  -webkit-transform: translate3d(0,-5px,0);
  transform: translate3d(0,-5px,0);
}
.cargoton-icon-box.cargoton-icon-box-style-2.hover-desc .icon-box-content .icon-box-desc {
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform: translate3d(0,130px,0);
  transform: translate3d(0,130px,0);  
  opacity: 1;
  margin: 0;
}
.cargoton-icon-box.cargoton-icon-box-style-2.hover-desc:hover .icon-box-content .icon-box-desc,
.cargoton-icon-box.cargoton-icon-box-style-2.hover-desc.active .icon-box-content .icon-box-desc
{
  -webkit-transform: translate3d(0,5px,0);
  transform: translate3d(0,5px,0);
  opacity: 1;
}
.cargoton-icon-box.cargoton-icon-box-style-2 .icon-box-title {
  -webkit-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
@media(max-width:480px)
{
  .cargoton-icon-box.cargoton-icon-box-style-2
  {
    flex-direction: column;
    align-items: start;
  }
  .cargoton-icon-box.cargoton-icon-box-style-2 .icon-box-img
  {
    width: 100%;
  }
  .cargoton-icon-box.cargoton-icon-box-style-2 .icon-box-content
  {
    width: 100%;
    margin-left: 0;
    margin-top: 32px;
  }
}