html  {
    font-family:  'Open Sans',  sans-serif;
}
p,  a  {
    font-weight:  400;
}
.h2  {
    font-size:  40px;
}
.h3  {
    font-size:  28px;
}
.light-300  {
    font-family:  'Open Sans',  sans-serif !important;
    font-weight:  300;
}
.regular-400  {
    font-family:  'Open Sans',  sans-serif !important;
    font-weight:  400;
}
.semi-bold-600  {
    font-family:  'Open Sans',  sans-serif !important;
    font-weight:  600;
}
.typo-space-line::after,  .typo-space-line-center::after  {
    content:  "";
    width:  150px;
    display: block;
    position:  absolute;
    border-bottom:  5px solid #c25832;
    padding-top:  .5em;
}
.typo-space-line-center::after  {
    left:  50%;
    margin-left:  -75px;
}
#main_nav .nav-item .nav-link:hover  {
    color:  #fff;
}
#index_banner  {
    background-image:  url('./../img/banner-bg-02.jpg');
    background-position:  center center;
    background-size:  cover;
    height:  100%;
    min-height:  60vh;
    width:  100%;
}
#index_banner .carousel-item  {
    min-height:  60vh;
}
#index_banner .carousel-control-prev i,  #index_banner .carousel-control-next i  {
    color:  #c25832 !important;
    text-decoration:  none;
    font-size:  4em;
}
#index_banner .carousel-inner  {
    height:  80vh;
}
#index_banner .carousel-indicators li,  #index_banner .carousel-indicators.active  {
    background-color:  #c25832 !important;
}
.service-wrapper .service-footer  {
    max-width:  720px;
}
.service-work.card  {
    border-radius:  10px !important;
    cursor:  pointer;
}
.service-work .service-work-vertical  {
    background:  rgb(0, 0, 0);
    background:  linear-gradient(0deg,  rgba(0, 0, 0, 1) 0%,  rgba(0, 0, 0, 0) 33.33%,  rgba(255, 255, 255, 1) 66.66%,  rgba(255, 255, 255, 0) 99.99%);
    background-size:  300% 300%;
    background-position:  0% 100%;
    transition:  .5s;
}
.service-work .service-work-vertical:hover  {
    background-position:  0% 0%;
    transition:  .5s;
}
.service-work .service-work-vertical:hover *  {
    color:  #000;
    border-color:  #000;
    transition:  .5s;
}
.recent-work.card {
    border-radius:  10px !important;
}
.recent-work .recent-work-vertical  {
    background:  rgb(255, 255, 255);
    background:  linear-gradient(0deg,  rgba(255, 255, 255, 1) 0%,  rgba(255, 255, 255, 0) 33.333%,  rgba(97, 84, 199, 1) 66.666%,  rgba(255, 255, 255, 0) 99.999%);
    background-size:  300% 300%;
    background-position:  0% 100%;
    transition:  .5s;
    cursor:  pointer;
}
.recent-work .recent-work-vertical:hover  {
    background-position:  0% 0%;
    transition:  .5s;
}
.recent-work .recent-work-vertical:hover div.recent-work-content  {
    top:  50%;
    margin-top:  -2.5em;
    position:  absolute;
}
.recent-work .recent-work-vertical:hover *  {
    color:  white;
    transition:  .5s;
}
#work_banner  {
    background-image:  url('./../img/banner-bg-02.jpg');
    background-position:  center center;
    background-size:  cover;
    height:  100%;
    width:  100%;
}
.progress  {
    height:  8px;
}
.objective-icon  {
    border-radius:  13px;
    width:  8rem;
}
.team-member-img  {
    transition-duration:  0.15s;
}
.team-member:hover .team-member-img  {
    padding:  10px !important;
}

/* Work */
/* Singel Work */
#work_single_banner {
  background-image: url('./../img/banner-bg-02.jpg');
  background-position: center center;
  background-size: cover;
  height: 100%;
  width: 100%;
}
.related-content {
  border-radius: 20px;
  cursor: pointer;
}


//---------------------------------------



.digital-counter {
  display: flex;
  gap: 3px;
  background: #000;
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: inset 0 0 5px #444;
}

.digital-counter span {
  display: inline-block;
  width: 18px;
  height: 28px;
  background-color: #222;
  color: #0f0;
  font-family: 'Courier New', monospace;
  font-size: 24px;
  line-height: 28px;
  text-align: center;
  border-radius: 2px;
  box-shadow: 0 0 5px #0f0;
}

//----------------- marquee clients --------------------------------------------------


body {
  background: #110000;
}

/* Marquee logos */
/* Move logos on hero */
@keyframes marquee--move__logos {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
.marquee-logos {
  width: 100%;
  align-items: center;
  margin-top: 1.875rem;
  display: flex;
  position: relative;
  overflow: hidden;
}
.marquee-logos__container {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  
}

.rtl{
  animation: marquee--move__logos 30s linear infinite;
}


.ltr{
  animation: marquee--move__logosLtR 30s linear infinite;
}

.marquee-logos__container img {
  width: 10.625rem;
  height: 100px;
  min-height: 100px;
  min-width: 10.6253rem;
  object-fit: contain;
}
.marquee-logos__fade {
  z-index: 1;
  width: 2rem;
  background-image: linear-gradient(90deg, rgba(0, 0, 18, 0), #000000);
  position: absolute;
}


@keyframes marquee--move__logosLtR {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}




//----------------------------------------- links


.link-blue {
  color: blue !important;
  transition: all 0.2s ease;
}
.link-blue:hover {
  color: #0a58ca;
  padding-left: 5px;
}