@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap');
  
:root{
  --impakt-gray: #ececec;
  --impakt-blue: hsl(201,68%,50%);
  --impakt-secondary: hsl(201,68%,30%);
  --impakt-steel-blue: #F8F8FF;
  --impakt-radius: 5px;
}
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}
html, body{
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6{
	margin: 0;
}
img,
svg{
	max-width: 100%;
    
}
.uppercase{
	text-transform: uppercase;
}
a.link{
	text-decoration: none;
    border-bottom: 2px solid var(--impakt-blue);
    color: var(--impakt-blue);
}
a.link:hover{
	color: var(--impakt-secondary);
	border-bottom: 2px solid var(--impakt-secondary);

}
.grid{
	display: grid;
	gap: 20px;
}
.grid-eight{
	grid-template-columns: repeat(8, 1fr);
}
.grid-four{
	grid-template-columns: repeat(4, 1fr);
}
.grid-five{
	grid-template-columns: repeat(5, 1fr);
}
.grid-three{
	grid-template-columns: 1fr 1fr 1fr;
}
.grid-two{
	grid-template-columns: 1fr 1fr;
}
.flex{
	display: flex;
    gap: 20px;
    align-items: center;
}
.flex-row{
	flex-direction: row;
    flex-wrap: wrap;
}
.flex-col{
	flex-direction: column;
}
.center{
	justify-content: center;
    align-items: center;
    text-align: center;
}
.center img{
	margin: auto;
}
.large-gap{
	gap: 40px;
}
.inner-section{
	background-color: var(--impakt-steel-blue);
}
.wide-width{
	max-width: 80%;
	margin: auto;
}
.mini-width{
	max-width: 60%;
	margin: auto;
}
.extra-mini-width{
	max-width: 40%;
	margin: auto;
}
.gradient-bg{
	background: linear-gradient(0deg, var(--impakt-secondary), var(--impakt-blue));
}
.main-bg{
	background-color: var(--impakt-blue);
}
.main-bg.section-heading{
	color: white;
    padding: 20px;
    text-align: center;
    display:block;
}
.btn-basic-reverse,
.btn-basic-secondary,
.btn-basic{
	font-family: 'Montserrat', sans-serif;
	display: inline-block;
	background-color: var(--impakt-secondary);
    color: white;
    border-radius:var(--impakt-radius);
    transition: all 0.2s;
    padding: 10px;
    text-decoration:none;
    font-weight: 600;
    cursor: pointer;
}
.btn-basic-reverse{
	border:2px solid white;
	background-color: white;
    color: var(--impakt-secondary);
}
.btn-basic:hover{
	background-color: white;
    color: var(--impakt-blue);
    
}
.btn-basic-reverse:hover{
	border:2px solid white;
	background-color: var(--impakt-blue);
    color: white;
}
.btn-basic-secondary:hover{
	background-color: var(--impakt-blue);
    color: white;
}
.page-wrapper{
	margin: auto;
	max-width: 100%;
}
.section-heading{
	text-align:center;
    font-size: 26px;
    color: var(--impakt-secondary);
}
/*Home Page Styles*/
.intro-video{max-width:100%;}

.background-button{
	background: linear-gradient(0deg, var(--impakt-secondary), var(--impakt-blue));
    transition: all 0.2s;
    padding:15px;
    color:white;
    text-decoration: none;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
.nav-link.background-button{
	color: white;
}
.background-button:hover{
	background: white;
    box-shadow:0px 0px 0 2px var(--impakt-blue);
    color: var(--impakt-blue);
}
.blue-divider{
	height: 3px;
    width: 60px;
    background-color: var(--impakt-blue);
}

#video-section{
    grid-template-columns: 1fr 1fr;
    color: white;
    padding: 20px 220px;
    background: black;
    gap:20px;
    align-items: center;
}
#video-section .section-heading{color:white;}
#conversion-machine{
	color: white;
	background-image: URL('/images/conversion-machine.png');
    background-position: center;
}

#conversion-machine-left{padding:20px;}
#conversion-machine > div{
	padding: 60px 220px;
}
.ad-examples{
	text-align: right;
}
.ad-examples img{
	border-radius: 5px;
    max-width: 190px;
    object-fit: contain;
}
.ad-examples img:nth-of-type(1){
	transform: translate(20%, 45%);
    z-index: 2;
}
.ad-examples img:nth-of-type(2){
	transform: translate(0%, 0%);
    z-index: 1;
}
.ad-examples img:nth-of-type(3){
	transform: translate(-108%, 92%);
    z-index: 3;
}
#metrics-section{
	padding: 60px 220px;
	grid-template-columns: 1fr 1fr;
    background-color: var(--impakt-gray);
}
.call-to-action{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mini-cta{
	background: black;
    padding: 20px 220px;
    color: white;
    display: grid;
    grid-template-columns: 2fr 1fr;
    font-size: 32px;
}

#service-section,
#testimonial-section{
	padding: 20px 220px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    
}
#service-section{
	padding: 60px 220px;
}
#testimonial-section .section-heading{
	color: white;
}
.card{
	background-color: white;
    border: 1px solid var(--impakt-gray);
    border-radius: 5px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
	line-height: 1.6;
    padding: 20px;
}
.card:has(pre){	   
	display: block;
}
.card-basic{
    background-color: white;
    border: 1px solid var(--impakt-gray);
    border-radius: 5px;
    padding: 20px;
    line-height: 1.6;
}
.card-heading{
	font-size: 20px;
    text-align:center;
    font-weight: 500;
}
/*.card:not(:has(.card-body)),
.card-body{
    padding: 20px;
}*/
.star-ratings{
	display: flex;
	gap: 5px;
    justify-content: center;
    align-items: center;
}


#service-section .section-heading{text-align:center;}
.service-card{
display: grid;
	padding: 20px;
	background-color: var(--impakt-gray);
    border-radius:var(--impakt-radius);
    line-height: 1.6;
}
.service-card .card-heading{
	color: var(--impakt-secondary);
}

.metrics-images{
	display: grid;
    grid-template-columns: 70% 30%;
    align-items: center;
}
.metrics-images img{
	z-index: 1;
}
#metrics-graph{
	margin-left: -80px;
}
#brands-section{
	padding: 60px 220px;
}
#brands-section .section-heading{
	text-align: center;
}

.desktop-hide svg{
max-width: 60%;
}




@media(max-width: 1300px){
	#video-section{
    	padding: 20px 100px;
    }
    .grid-eight{
		grid-template-columns: repeat(4, 1fr);
    }
    .grid-five,
    .grid-four{
    	grid-template-columns: 1fr 1fr;
    }
    .mini-width{
    	max-width: 80%;
    }
    .extra-mini-width{
      max-width: 60%;
      margin: auto;
	}
}

@media(max-width: 768px){
  .mobile-enlarge{
	font-size: 32px;
    font-weight: bold;
    text-align: center;
  }
    .mobile-hide{
		display: none;
    }
    .grid-three,
    .grid-five,
	.mini-cta,
	#metrics-section,
	#service-section,
	#video-section,
    .grid-four,
    .grid-two{
    	grid-template-columns: 1fr;
    }
    .grid-eight{
		grid-template-columns: repeat(2, 1fr);
	}
    .mini-cta,
    #brands-section,
    #testimonial-section,
    #metrics-section,
    #conversion-machine > div,
    #service-section,
	#video-section{
	    padding: 20px;
    }
    .wide-width,
    .extra-mini-width,
    .mini-width{
    	max-width: 90%;
    }
	.ad-examples{
    	display: none;
    }
	.flex{
    	flex-direction: column;
    }
}


@media(min-width: 768px){
  .desktop-hide{display:none;}

  .mini-cta .background-button{
      width: 65%;
      max-height: 30%;
      margin: auto;
  }
}


@media(min-width: 768px) and (max-width: 900px){
 
  .ad-examples img:nth-of-type(1){
	transform: translate(0%, 0%);
    z-index: 2;
  }
  .ad-examples img:nth-of-type(2){
      transform: translate(0%, 0%);
      z-index: 1;
  }
  .ad-examples img:nth-of-type(3){
      transform: translate(0%, 0%);
      z-index: 3;
  }
}

@media(min-width: 900px) and (max-width: 1650px){
	 .ad-examples img:nth-of-type(3){
    	transform: translate(0%, -9%);
    }
    
}