@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:50vh;}
.home-hero h1{font-size: var(--HeadingOne); text-transform: uppercase;}
.home-hero h1 span{color:var(--PrimaryClr);}

.content--perspective {perspective-origin: 50% 0%; perspective: 1000px;}
.content--sticky {position: sticky; top: 0; --offset: 0px; top: var(--offset); height: calc(100vh - var(--offset));}

.portfolio-listing_content{padding: var(--gap-margins) var(--gap-margins) calc(var(--gap-margins) + 50px) var(--gap-margins); max-width: 40vw;}
.portfolio-listing_content h2{font-size: var(--BodyText); font-family: var(--HeadingFont); font-weight: 500; margin-bottom: 15px;}
.service-content .portfolio-listing_content h2{font-size: calc( var(--HeadingOne) - 1.4rem); margin-bottom: 15px; font-weight: 700;}
.portfolio-listing_content h3{font-size: calc( var(--HeadingOne) - 1.4rem); margin-bottom: 15px;}
.portfolio-listing_content p{font-size:1rem;}
.portfolio-listing_content span{font-size:1rem; color: var(--WhiteClr);}
.portfolio-listing_content span img{filter: invert(95%) sepia(95%) saturate(0%) hue-rotate(103deg) brightness(105%) contrast(255%); width: 15px; margin-left: 0.5rem;}


.kdah-bg{
	background: url('../images/portfolio/kdah-bg.jpg') no-repeat right top;background-size: cover;
}
.tpch-bg{
	background: url('../images/portfolio/tpch-bg.jpg') no-repeat left top; background-size: cover;
}
.adnh-bg{
	background: url('../images/portfolio/adnh-bg.jpg') no-repeat right top; background-size: cover;
}
.onx-bg{
	background: url('../images/portfolio/onx-bg.jpg') no-repeat center top; background-size: cover;
}
.alfardan-bg{
	background: url('../images/portfolio/alfardan-bg.jpg') no-repeat right top; background-size: cover;
}
.renu-bg{
	background: url('../images/portfolio/renu-bg.jpg') no-repeat right top; background-size: cover;
}
.aiir-bg{
	background: url('../images/portfolio/aiir-bg.jpg') no-repeat right top; background-size: cover;
}
.sdcap-bg{
	background: url('../images/portfolio/sdcap-bg.jpg') no-repeat right top; background-size: cover;
}
.jaguar-bg{
	background: url('../images/portfolio/jaguar-bg.jpg') no-repeat right top; background-size: cover;
}


/* Service page */
.home-hero.service h1{font-size: var(--HeadingOne); text-transform:unset; font-weight: 500;}
.home-hero.service h1 span{color:var(--PrimaryClr); font-weight: 700;}


.digital-design-bg{
	background: url('../images/services/digital-design-and-development.jpg') no-repeat right top; background-size: cover;
}
.campaigns-bg{
	background: url('../images/services/campaigns-and-communications.jpg') no-repeat right top; background-size: cover;
}
.performance-marketing-bg{
	background: url('../images/services/performance-marketing.jpg') no-repeat right top; background-size: cover;
}
.content-media-bg{
	background: url('../images/services/content-and-media-production.jpg') no-repeat right top; background-size: cover;
}
.brand-strategy-bg{
	background: url('../images/services/brand-and-strategy.jpg') no-repeat right top; background-size: cover;
}



}

@media (max-width:1600px) {
	.portfolio-listing_content{max-width: 45vw;}
}

@media (max-width:767px) {
	.content--sticky{height: calc(60vh - var(--offset)); }
	.portfolio-listing_content{max-width: 100%; padding: var(--gap-margins) calc(var(--gap-margins) + 1rem) var(--gap-margins) var(--gap-margins); position: relative; z-index: 1;}
	.portfolio-listing_content h3{font-size: var(--HeadingThree);}
	.portfolio-listing .content:before{content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, .0) 0%, transparent, rgba(0, 0, 0, 0.8) 90%);}
}

/* Portfolio Detail Page */
.portfolio-hero{min-height:50vh;}
.portfolio-hero-caption{padding: var(--gap-margins);}
.portfolio-hero h1{font-size: calc(var(--HeadingOne) - 1.1rem); max-width: 80%;}
.portfolio-hero h1 span{font-weight: 500;}

.portfolio-content-gap{row-gap:4rem;}
.portfolio-content{padding: var(--gap-margins);}
.portfolio-m-icon img{max-width:40px;}

.portfolio-content-inner-grid{grid-template-columns:45% 1fr; column-gap:2rem; row-gap: 2rem;}
.portfolio-content-inner-grid.onx-key-word{grid-template-columns:40% 1fr; column-gap:2rem; row-gap: 2rem;}
.portfolio-content-inner-grid.two-col-grid{grid-template-columns:1fr 45%; column-gap: 5rem;}

.portfolio-content-inner-grid h2{color: var(--PrimaryClr); font-size: calc(var(--HeadingTwo) - 1rem);}
.portfolio-content-inner-grid h3{color: var(--PrimaryClr); font-size: calc(var(--HeadingTwo) - 1rem); font-weight: 500;}

.portfolio-content-inner-grid p, 
.portfolio-content-inner-grid li{color: var(--GrayClr);font-family: var(--HeadingFont); font-size: 1.1rem; letter-spacing:0.2px;}

.portfolio-content-inner-grid ul{list-style: none; padding: 0px; margin: 0px;}
.portfolio-content-inner-grid li{position: relative; padding-left: 20px; padding-bottom:8px; color: #4e4e4e;}
.portfolio-content-inner-grid li:before{content: ''; position: absolute; left: 0px; top:10px;  width: 5px; height: 5px; background: var(--PrimaryClr);}

.portfolio-content-inner-grid_devider{height: 1px; background: var(--BorderClr); opacity: 0.15;}

.counter-grid{display: grid; grid-template-columns:1fr 1fr 1fr; column-gap: 3rem; row-gap: 4rem;}
.counter-grid h3{font-size: 5rem; color: var(--BodyText); font-weight: 900;}
.counter-grid h3.red{color: var(--PrimaryClr);}
.counter-grid p{font-size: 1rem; max-width: 80%;}

.solution-tabs{display: inline;}
.solution-tabs li{display: inline-block; margin-right: 1rem; font-size: 1rem; font-family: var(--BodyFont); padding-left:15px;}

.keyword-growth{grid-template-columns: 60% 1fr; column-gap:5rem;}
.keyword-growth p span{background: var(--PrimaryClr); color: var(--WhiteClr);}

.grow-with-us-outer{background:url('../images/portfolio/grow-us-bg.jpg') repeat left top; border-radius: 6px; padding:8rem 4rem 5rem 4rem; max-width: 90%; margin: 0 auto;}
.grow-with-us-outer h3{font-weight: 500; font-size: var(--HeadingTwo);}
.grow-with-us-outer p{font-family: var(--HeadingFont);}

.onx-key-word{background: #0E0887 url('../images/portfolio/onx-logo-icon.svg') no-repeat 43% 4%;padding: 2rem 3rem;background-size: 150%;background-blend-mode: color;}
.onx-key-word p{font-size: 2rem;}

.tpch-organic-bg{background:url('../images/portfolio/tpch-organic-bg.jpg') no-repeat 43% 4%;padding: 2rem 3rem; background-size: cover;}



@media (max-width:1200px) {
	.portfolio-hero{display: flex;}
	.portfolio-hero img{height: 100%; object-fit: cover;}
	.portfolio-hero h1{font-size: calc(var(--HeadingTwo) - 0.5rem); max-width: 100%;}

	.portfolio-content-inner-grid{grid-template-columns:35% 1fr;}
	.counter-grid h3{font-size: 4rem;}
	.counter-grid p{max-width: 100%;}
}

@media (max-width:960px) {
	.counter-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:767px) {
	.portfolio-content-gap{row-gap:2rem;}
	.counter-grid{grid-template-columns:1fr;}
	.portfolio-hero h1{font-size: calc(var(--HeadingTwo) - 1rem); max-width: 80%;}

	.portfolio-content-inner-grid h2{margin-bottom: 0px;}
	.portfolio-content-inner-grid{grid-template-columns:1fr; row-gap: 2rem;}
	.keyword-growth {grid-template-columns:1fr; row-gap: 2rem;}

	.grow-with-us-outer{padding:3rem 1rem 3rem 1rem; max-width: 100%;}
	
	.portfolio-content-inner-grid.onx-key-word {grid-template-columns:1fr; row-gap: 2rem;}
	.onx-key-word{padding: 1rem;}
	.portfolio-content-inner-grid.two-col-grid{grid-template-columns:1fr;}

	.service-content .portfolio-listing_content h2{font-size: var(--HeadingOne);}

}