@charset "utf-8";
/* CSS Document */
@media all{
.home-hero{padding: 0px var(--gap-margins); background: url('../images/home/home-hero.jpg') no-repeat center; min-height:80vh;}
.home-hero h1{font-size: var(--HeadingOne); text-transform: uppercase;}
.home-hero h1 span{color:var(--PrimaryClr);}

.spark-section{
    padding: 100px var(--gap-margins) 100px var(--gap-margins);
    background: #000000 url(../images/spark.png) no-repeat 5% bottom;
    background-size: 50%;
}
.spark-card{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
}
.spark-right h2{font-weight: 500;}
.spark-right h2 span{color: var(--PrimaryClr);}
.spark-right p{font-family: var(--HeadingFont ); text-align: justify; margin-bottom: 1.2rem;}

#heroVideo {object-fit: cover; width: 100%; height: 100%; background: transparent; outline: none;}
#heroVideo:focus { outline: none; }

.home-intro{padding: 5rem var(--gap-margins);}
.home-inro_card{grid-template-columns: 1fr 30%;}
.home-inro_card p{font-family: var(--HeadingFont); font-weight: 900; font-size:2.4rem; max-width:960px;}
.intro-m-icon img{max-width:60px;}

.group-hd h2{font-size:6rem; font-weight: 500; color: var(--PrimaryClr);}
.group-hd h2 span{color:#3b3b3b;font-size: 20px;font-family: var(--BodyFont );position: absolute;background: #ffffff;padding-top: 7px;padding-right: 7px;}
.group-hd h2 span:before{content:'';width: 150px;background: #3b3b3b;height: 1px;position: absolute;left: 0px;top: 21px;z-index: -1;}
.group-hd  p{font-size:20px; color: #3b3b3b;font-family: var(--HeadingFont);}

.service{padding:5rem var(--gap-margins) 0px var(--gap-margins) }
.our-services{grid-template-columns: 1fr 1fr; column-gap:6rem; margin-top: var(--gap-margins);}
.our-services_card{grid-template-columns: 60px 1fr 60px; padding: 2rem 0px; border-top: solid 1px #000000; border-bottom: solid #000000;}
.our-services_card span{color:var(--GrayClr); font-weight: 600;}
.our-services_card h3 a{color: var(--GrayClr); font-weight: 500; transition:all 0.5s ease;}
.our-services_card:hover h3 a, .our-services_card h3 a:hover{color: var(--WhiteClr); background: var(--PrimaryClr);}
.our-services_card p{font-size: 1rem; max-width: 80%;}
.service-detail-arrow img{max-width: 24px; float: right; padding-top: 6px; filter: grayscale(100%);}
.our-services_card:hover img{filter: none;}

.client-logos{display: grid; row-gap: 1rem;padding: 5rem 0px 5rem 0px;}
.client-item{overflow: hidden;}
.client-logos a{overflow: hidden;}
.client-logos a:hover img{transform: scale(1.1);}

.client-logos img{max-height:250px;width: 100%; height: 100%; object-fit: cover;  transition:all 0.5s ease;}
.client-logo-four-col{grid-template-columns: 1fr 1fr 1fr 1fr;gap: 1rem;}
.client-logo-three-col{grid-template-columns: 1fr 1fr 1fr; gap: 1rem;}
.client-logo-two-col{grid-template-columns:1fr 180px; gap: 1rem;}
.client-logo-two-col-rev{grid-template-columns:180px 1fr; gap: 1rem;}

.process-section{padding:6rem var(--gap-margins) 3rem var(--gap-margins);}
.process-grid{grid-template-columns:300px 1fr; column-gap:2rem;}

.process-left img{max-width: 50px;}
.process-left h3{font-weight: 500;}
.process-left p{font-size: 1rem; font-family: var(--HeadingFont); color: var(--GrayClr);}

.tab-pane {opacity: 0; transform: translateY(15px); transition: all 0.3s ease;}
.tab-pane.active.show {opacity: 1; transform: translateY(0);}

.process-tabs{grid-template-columns:250px 1fr; column-gap:4rem;}
.process-tabs .nav-pills{padding-top:-4rem;}
.process-tabs .nav-link{padding: 0px; color: var(--GrayClr); text-align:right; position: relative;}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {color:var(--PrimaryClr); background-color: transparent;}
.nav-pills .nav-link:after{content: ''; width: 0; height: 1px; background: var(--GrayClr); position: absolute; top: 18px; right: -50px; transition: all 0.3s ease;}
.nav-pills .nav-link.active:after{width: 25px;}

.process-tab-info{display:grid; grid-template-columns: 1fr 100px; column-gap:3rem; align-items: center; margin-top:1.4rem;}
.process-tab-info p{font-size: 1.1rem; font-family: var(--HeadingFont); color: var(--GrayClr); margin-bottom: 0px;}

.show-reel{position: absolute; top: -5rem; right: 5%; z-index: 4; width: 10rem; height: 10rem; animation: spin 10s linear infinite;}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}



}

@media (min-width:1600px) {
    .spark-right{max-width: 80%;}
}

@media (max-width:1600px) {
    .home-inro_card p{font-size:2rem; max-width:800px;}
    .client-logo-two-col{grid-template-columns:1fr 120px; gap: 1rem;}
    .client-logo-two-col-rev{grid-template-columns:120px 1fr; gap: 1rem;}
}

@media (max-width:767px) {
    .our-services{grid-template-columns: 1fr;}
    .group-hd h2{font-size: 4rem;}
    .group-hd h2 span{font-size: 16px;padding-top: 6px;}
    .group-hd h2 span:before{width: 107px;top: 16px;}

    .spark-card{grid-template-columns: 1fr;}
    .spark-section {padding: 50px var(--gap-margins) 250px var(--gap-margins); background-size: 100%; background-position: center bottom;}
    .our-services_card {grid-template-columns: 40px 1fr 40px;padding: 2rem 0px;        border-bottom: 0;}
    .home-hero {min-height: 40vh;}

    .home-intro {padding: 3rem var(--gap-margins);}
    .home-inro_card{grid-template-columns: 1fr;}
    .home-inro_card p {font-size: 1.2rem;}
    .intro-m-icon img {max-width: 30px;}
    .our-services_card p{max-width: 100%;}



    .client-logo-four-col{grid-template-columns: 1fr 1fr;}
    .client-logo-three-col{grid-template-columns: 1fr 1fr;}
    .client-logo-two-col{grid-template-columns:1fr;}
    .client-logo-two-col-rev{grid-template-columns:1fr;}

    .mobile-expand{grid-column: 1 / -1;}

    .process-section {padding: 3rem var(--gap-margins) 3rem var(--gap-margins);}
    .service {padding:0rem var(--gap-margins) 0px var(--gap-margins);}
    .process-left h3 br{display: none;}

    .process-grid {grid-template-columns: 1fr; row-gap: 2rem;}
    .process-tabs {grid-template-columns: 1fr; row-gap: 1rem;}
    .process-tabs .nav-pills{justify-content: space-between;}
    .process-tabs .nav-link{font-size: 1rem; padding: 0.5rem 0px;}
    .nav-pills .nav-link.active:after{display: none;}

    .process-tab-info {grid-template-columns: 1fr 50px; column-gap: 1rem; margin-top: 1rem;}
    .show-reel{left: 5%; top: -3rem; width:6rem; height:6rem;}
    
}