@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}


.tiggernavandbooking{
	display: none;
}



/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		6;
	dw-num-cols-tablet:		10;
	dw-num-cols-desktop:	14;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

body{
	overflow-x: hidden;
	width: 100vw;
}


	.grid-Container{
		width: 100vw;
		height: auto;
	}
	
    
.hero{
	width: 100%;
	height: auto;
	background-color: black;
	border-radius: 0 0 3em 3em;
	display: block;
	float: left;
	clear: both;
	margin: 0 auto 15vh auto;
}



.hero .swiper-container {
      width: 100%;
      height: 100vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 3em 3em;
    }


.hero.topslide {
      text-align: center;
      background: #fff;

}



.slide{
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slidetext{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
	background: #000000;
	background: linear-gradient(-20deg,rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 1) 70%);
}

.slidetext-inner{
	width: 80%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 25vh 7.5vw auto 7.5vw;
	color: #fff;
}

.slidetext-inner h2{
	line-height: 1em;
	margin: auto auto 10px auto;
}

.slidetext-inner p{
	margin: 10px auto 2em;
	width: 90%;
	float: left;
	clear: both;
}




.hero-down{
	width: 85%;
	height: auto;
	display: block;
	float: left;
	margin: 5em 7.5% 0 7.5%;
	position: relative;
	z-index: 100;

}



.hd-left{
	width: 80%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 2em 0 0em;
	color: #fff;
	font-family: "Aptos-Light";

}

.hd-left h3{
	font-family: "Aptos-Light";
}


.hd-right{
	width: calc(50% - 4em);
	height: 100vh;
	display: block;
	float: right;
	clear: none;
	margin: 2em 0;
	  position: relative;
	  top: -70vh;
	  right: -20vw;
	  bottom: 0;
	  margin-bottom: -100vh;
}


.hdr-circles{
	width: 35vh;
	height: 35vh;
	display: block;
	float: left;
	clear: both;
	margin: 0em calc(50% - 30vh);
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	position: sticky;
	top: 1em;
	background-image:none;
	background-size: 5em 5em;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

.rotate-center {
	-webkit-animation: rotate-center 10s linear infinite both;
	        animation: rotate-center 10s linear infinite both;
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.hdr-circles svg{
	position: absolute;
	-webkit-animation: rotate-center 10s linear infinite both;
	        animation: rotate-center 10s linear infinite both;
}

.hdr-circles svg:nth-of-type(1){
	
}

.hd-marquee{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0em auto 2em;
	overflow: visible;
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}

.hd-marquee marquee{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	overflow: visible;
	height: 5em;
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}

.hd-marquee marquee span{
	background-color: #606060;
	border-radius: 5em;
	padding: 1em 2em;
	margin: auto 1em;
	font-family: "Aptos";
	color: #fff;
	height: auto;
	font-size: .9em;
	font-weight: 600;
	letter-spacing: .5px;
}










.about-home{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0vh auto ;
}

.ah-top{
	width: 90%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: auto 5% 3em;
}


.aht-left{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0em 0;
	
}

.aht-left h6, .sh-top h6{
	margin: 1em 0;
	display: block;
	clear: both;
	float: left;
	width: 100%;
	color: #727272;
	text-align: left;
}

.aht-left h3{
	background-color: #e21010;
	padding: 0em .5em;
	color: #fff;
	display: inline;
	line-height: 1.2em;
	margin: 1em 0;
	float: none;
	clear: none;
	border-radius: 1em;
	text-wrap: wrap;
}


.aht-right{
	width: 100%;
	height: auto;
	display: block;
	float: right;
	clear: none;
	margin: 1em 0 auto;
}


.aht-right p{

}




.ah-bottom{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0em 0% 0;
	position: relative;

}


.ah-bottom .swiper-container {
      width: 100%;
      height: 20vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 2em 2em;
	margin: 5vh 0;
    }




.ahs-img{
	border-radius: 5em;
	overflow: hidden;
	height: 20vh;
	display: block;
	float: left;
	background-size: cover;
	background-position: center;
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  background-color: #606060;

}




.services-home{
	width: 90%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0vh 5% 3em;
	
}


.sh-top{
	display: block;
	float: left;
	clear: both;
	width: 100%;
	height: auto;
	text-align: center;
	margin: 5vh 0 5vh;
}

.services-home h1{
	color: #e21010;
	letter-spacing: -2px;
	
}

.services-home h1 span{
  	color: #606060;
 	font-family: "Aptos-SemiBold-Italic";
}


.sh-bottom{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 10vh 0% 10vh;
	position: relative;
	
}


.shb-left{
	width: calc(100% - 2em);
	height: auto;
	float: left;
	clear: none;
	display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr ; 
  gap: 1em 1em; 
  grid-template-areas: 
    "."
    "."
    "."
	"."
	; 
	margin: 0em 0;
	
}


.shb-left.capabilities{
	width: 100%;
}



.service-post{
	width: calc(100% - 4em);
	height: calc(35vh - 2em);
	display: block;
	float: left;
	clear: both;
	background-color: #ededed;
	border-radius: 3em;
	padding: 3em;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}


.service-post-inner{
	width: calc(100% - 5em);
	height: calc(auto - 5em);
	position: absolute;
	z-index: 10;
	float: left;
	clear: none;
	top: 2.5em;
	left: 2.5em;
	color: #000000;
	z-index: 100;
	transition: all .2s ease-in-out;
}


.service-post h4{
	margin: .5em auto;
}


.service-post i{
	font-size: 1.6em;
	color: #fff;
	position: absolute;
	bottom: 1em;
	right: 1em;
	border-radius: 4em;
	padding: 1em;
	background-color: #e21010;
	z-index: 10;
	transition: all .2s ease-in-out;
}


.service-post:hover i{
	font-size: 2em;
	color: #fff;
	position: absolute;
	bottom: calc(-3em - 22.5vh);
	right: calc(-3em - 22.5vh);
	border-radius: 4em;
	padding: 45vh;
	background-color: #e21010;
	z-index: 10;
	transform-origin: center;

}

.service-post:hover .service-post-inner{
	
	color: #fff;
}








.shb-right{
	width:100%;
	height: 80vh;
	max-height: 160vh;
	display: block;
	float: right;
	margin: 0;
	clear: none;
	border-radius: 3em;
	background-color: #000000;
	top: 5vh;
	position:relative; 
	overflow: hidden;
}


.shb-right .hdr-circles{
	width: 55vh;
	height: 55vh;
	display: block;
	float: left;
	clear: both;
	margin: 0em calc(50% - 30vh);
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	position: sticky;
	top: 1em;
	background-image:none;
	position: absolute;
	z-index: 0;
	top: -30%;
	left: -30%;
	opacity: .5;
}

.main-header{}


.shbr-inner{
	width: calc(100% - 4em);
	height: calc(100% - 4em) ;
	display: block;
	float: left;
	clear: none;
	margin: 2em;
	
	position:absolute;
	z-index: 100;
	  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 1.5fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    "."
    "."; 
}


.shbri-top{
	width: 90%;
	height: 100%;
	margin: auto 5%;
	display: block;
	float: left;
	clear: none;
	color: #fff;
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  font-weight: 100;
	  font-family: "Aptos-Light";
}


.shbri-top h4{
	font-family: "Aptos-Light";
}


.shbri-bottom{
	width: 100%;
	height: 100%;
	margin: auto 0%;
	display: block;
	float: left;
	clear: both;
	color: #fff;
	background-image: url("../img/Burst_Port_System_Toe_Initiation_Sub_Closeup.webp");
	border-radius: 2em;
	background-size: cover;
	background-position: center;
}












.cases{
	width: 100%;
	height: 100vh;
	display: block;
	float: left;
	clear: both;
	position: relative;
}


.cases .swiper-container {
      width: 100%;
      height: 100vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;

    }


.cases.caseslide {
      text-align: center;
      background: #fff;

}


.cases-h6-title{
	position: absolute;
	z-index: 100;
	top: 5vh;
	bottom: auto;
	right: auto;
	left: 5%;
	color: #fff;
}


.case{
	height: 100vh;
	width: 100%;
	display: block;
	float: left;
	clear: both;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	
}


.case-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
	background: #000000;
	background: linear-gradient(-180deg,rgba(0, 0, 0, .0) 0%, rgba(0, 0, 0, .5) 80%);
}

.case-details{
	display: block;	
	float: left;
	clear: both;	
	position: absolute;
	z-index: 10;
	bottom: 5vh;
	left: auto;
	right: 5vw;
	width: calc(90% - 4em);
	height: calc(45vh - 2em);
	background-color: #e21010;
	color: #fff;
	border-radius: 3em;
	padding: 2em;
	overflow: hidden;
	cursor: pointer;
}



.case-details-inner{
	width: calc(100% - 4em);
	height: calc(auto - 3em);
	position: absolute;
	z-index: 10;
	float: left;
	clear: none;
	top: 1.5em;
	left: 2em;
	color: #fff;
	z-index: 100;
	transition: all .2s ease-in-out;
}


.case-details-inner h4{
	margin: .5em auto 0;
}



.case-details i{
	font-size: 1.5em;
	color: #e21010;
	position: absolute;
	bottom: 1em;
	right: 1em;
	border-radius: 4em;
	padding: .7em;
	background-color: #fff;
	z-index: 10;
	transition: all .2s ease-in-out;
	transform-origin: center;
}


.case-details:hover i{
	font-size: 2em;
	color: #e21010;
	position: absolute;
	bottom: .8em;
	right: .8em;
	border-radius: 4em;
	padding: .8em;
	background-color: #ffffff;
	z-index: 10;
	transform-origin: center;
	-webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);

}


.tags{
	width: 110%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: auto -5% 0;
}


.case-tag{
	display: inline;
	float: left;
	clear: none;
	padding: .5em 1em;
	background-color: #f2916b;
	margin: .2em;
	border-radius: 1em;
	font-family: "Aptos";
}








.brandpromise{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0vh auto 0 0%;
	padding: 0;
	z-index: 0;
	position: relative;
}



.bp-top{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0vh auto 10vh 0%;
	padding: 0;
	text-align: center;
}


.bp-bottom{
	height: auto;
	width: 100%;
	display: block;
	float: left;	
	clear: both;
	margin: 10vh auto 0;
	position: relative;
}


.bp-bottom .swiper-container {
      width: 100%;
      height: 20vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 5em 5em;
	margin: 2vh 0;
	position: relative;
	z-index: 0;
    }


	.bp-bottom-inner-gradient{
	  width: 100%;
      height: 100%;
	  position: absolute;
	  z-index: 100;
      margin: 0;
	  display: block;
	  float: left;
		clear: none;
		background: #FFEBD7;
background: linear-gradient(176deg, rgba(255, 235, 215, 0) 0%, rgba(255, 235, 215, 1) 90%);
	}


















/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
	
	
	




	
	

}



/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {




	.grid-Container{
		width: 100vw;
		height: auto;
	}
	
    
.hero{
	width: 100%;
	height: auto;
	background-color: black;
	border-radius: 0 0 5em 5em;
	display: block;
	float: left;
	clear: both;
	margin: 0 auto 15vh auto;
}



.hero .swiper-container {
      width: 100%;
      height: 100vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 5em 5em;
    }


.hero.topslide {
      text-align: center;
      background: #fff;

}



.slide{
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slidetext{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
	background: #000000;
	background: linear-gradient(-20deg,rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 1) 70%);
}

.slidetext-inner{
	width: 90%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 25vh 7.5vw auto 7.5vw;
	color: #fff;
}

.slidetext-inner h2{
	line-height: 1em;
	margin: auto auto 10px auto;
}

.slidetext-inner p{
	margin: 10px auto 2em;
	width: 70%;
	float: left;
	clear: both;
}




.hero-down{
	width: 85%;
	height: auto;
	display: block;
	float: left;
	margin: 5em 7.5% 0 7.5%;
	position: relative;
	z-index: 100;

}



.hd-left{
	width: 45%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 2em 0 0em;
	color: #fff;
	font-family: "Aptos-Light";

}

.hd-left h3{
	font-family: "Aptos-Light";
}


.hd-right{
	width: calc(50% - 4em);
	height: 100vh;
	display: block;
	float: right;
	clear: none;
	margin: 2em 0;
	  position: relative;
	  top: -30vh;
	  right: 0;
	  bottom: 0;
	  margin-bottom: -60vh;
}


.hdr-circles{
	width: 55vh;
	height: 55vh;
	display: block;
	float: left;
	clear: both;
	margin: 0em calc(50% - 30vh);
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	position: sticky;
	top: 1em;
	background-image:url("../img/bull-icon.svg");
	background-size: 15em 15em;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

.rotate-center {
	-webkit-animation: rotate-center 10s linear infinite both;
	        animation: rotate-center 10s linear infinite both;
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.hdr-circles svg{
	position: absolute;
	-webkit-animation: rotate-center 10s linear infinite both;
	        animation: rotate-center 10s linear infinite both;
}

.hdr-circles svg:nth-of-type(1){
	
}

.hd-marquee{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0em auto 2em;
	overflow: visible;
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}

.hd-marquee marquee{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	overflow: visible;
	height: 5em;
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}

.hd-marquee marquee span{
	background-color: #606060;
	border-radius: 5em;
	padding: 1em 2em;
	margin: auto 1em;
	font-family: "Aptos";
	color: #fff;
	height: auto;
	font-size: 1.1em;
	font-weight: 600;
	letter-spacing: .5px;
}










.about-home{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 5vh auto ;
}

.ah-top{
	width: 85%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: auto 7.5% 3em;
}


.aht-left{
	width: 60%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0em 0;
	
}

.aht-left h6, .sh-top h6{
	margin: 1em 0;
	display: block;
	clear: both;
	float: left;
	width: 100%;
	color: #727272;
	text-align: left;
}

.aht-left h3{
	background-color: #e21010;
	padding: 0em .5em;
	color: #fff;
	display: inline;
	line-height: 1.2em;
	margin: 1em 0;
	float: none;
	clear: none;
	border-radius: 1em;
	text-wrap: wrap;
}


.aht-right{
	width: 35%;
	height: auto;
	display: block;
	float: right;
	clear: none;
	margin: 5em 0 auto;
}


.aht-right p{

}




.ah-bottom{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 2em 0% 0;
	position: relative;

}


.ah-bottom .swiper-container {
      width: 100%;
      height: 40vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 5em 5em;
	margin: 10vh 0;
    }




.ahs-img{
	border-radius: 5em;
	overflow: hidden;
	height: 40vh;
	display: block;
	float: left;
	background-size: cover;
	background-position: center;
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  background-color: #606060;

}




.services-home{
	width: 85%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 5vh 7.5% 3em;
	
}


.sh-top{
	display: block;
	float: left;
	clear: both;
	width: 85%;
	height: auto;
	text-align: center;
	margin: 5vh 7.5% 5vh;
}

.services-home h1{
	color: #e21010;
	letter-spacing: -2px;
	
}

.services-home h1 span{
  	color: #606060;
 	font-family: "Aptos-SemiBold-Italic";
}


.sh-bottom{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 20vh 0% 20vh;
	position: relative;
	
}


.shb-left{
	width: calc(100% - 0em);
	height: auto;
	float: left;
	clear: none;
	display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 2em 2em; 
  grid-template-areas: 
    ". ."
    ". ."; 
	margin: 0em 0;
	
}


.shb-left.capabilities{
	width: 75%;
}


.service-post{
	width: calc(100% - 4em);
	height: calc(45vh - 6em);
	display: block;
	float: left;
	clear: both;
	background-color: #ededed;
	border-radius: 3em;
	padding: 3em 2em;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}


.service-post-inner{
	width: calc(100% - 5em);
	height: calc(auto - 5em);
	position: absolute;
	z-index: 10;
	float: left;
	clear: none;
	top: 2.5em;
	left: 2.5em;
	color: #000000;
	z-index: 100;
	transition: all .2s ease-in-out;
}


.service-post h4{
	margin: .5em auto;
}


.service-post i{
	font-size: 1.2em;
	color: #fff;
	position: absolute;
	bottom: 1em;
	right: 1em;
	border-radius: 4em;
	padding: 1em;
	background-color: #e21010;
	z-index: 10;
	transition: all .2s ease-in-out;
}


.service-post:hover i{
	font-size: 1.5em;
	color: #fff;
	position: absolute;
	bottom: calc(-3.5em - 20vh);
	right: calc(-3.5em - 20vh);
	border-radius: 4em;
	padding: 40vh;
	background-color: #e21010;
	z-index: 10;
	transform-origin: center;

}

.service-post:hover .service-post-inner{
	
	color: #fff;
}








.shb-right{
	width:100%;
	height: 80vh;
	max-height: 80vh;
	display: block;
	float: right;
	margin: 0;
	clear: none;
	border-radius: 3em;
	background-color: #000000;
	top: 5vh;
	position:relative; ;
	overflow: hidden;
}


.shb-right .hdr-circles{
	width: 55vh;
	height: 55vh;
	display: block;
	float: right;
	clear: both;
	margin: 0em calc(50% - 30vh);
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	position: sticky;
	top: 1em;
	background-image:none;
	position: absolute;
	z-index: 0;
	top: -30%;
	left: -30%;
	opacity: .5;
}

.main-header{}


.shbr-inner{
	width: calc(100% - 4em);
	height: calc(100% - 4em) ;
	display: block;
	float: left;
	clear: none;
	margin: 2em;
	
	position:absolute;
	z-index: 100;
	  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 1.5fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    "."
    "."; 
}


.shbri-top{
	width: 90%;
	height: 100%;
	margin: 0 5% auto;
	display: block;
	float: left;
	clear: none;
	color: #fff;
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  font-weight: 100;
	  font-family: "Aptos-Light";
}


.shbri-top h4{
	font-family: "Aptos-Light";
}


.shbri-bottom{
	width: 100%;
	height: 100%;
	margin: auto 0%;
	display: block;
	float: left;
	clear: both;
	color: #fff;
	background-image: url("../img/Burst_Port_System_Toe_Initiation_Sub_Closeup.webp");
	border-radius: 3em;
	background-size: cover;
	background-position: center;
}












.cases{
	width: 100%;
	height: 100vh;
	display: block;
	float: left;
	clear: both;
	position: relative;
}


.cases .swiper-container {
      width: 100%;
      height: 100vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;

    }


.cases.caseslide {
      text-align: center;
      background: #fff;

}


.cases-h6-title{
	position: absolute;
	z-index: 100;
	top: auto;
	bottom: 25vh;
	right: auto;
	left: 7.5%;
	color: #fff;
}


.case{
	height: 100vh;
	width: 100%;
	display: block;
	float: left;
	clear: both;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	
}


.case-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
	background: #000000;
	background: linear-gradient(-180deg,rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .8) 80%);
}

.case-details{
	display: block;	
	float: left;
	clear: both;	
	position: absolute;
	z-index: 10;
	bottom: 4vw;
	left: auto;
	right: 7.5vw;
	width: calc(35% - 4em);
	height: calc(50vh - 2em);
	background-color: #e21010;
	color: #fff;
	border-radius: 3em;
	padding: 2em;
	overflow: hidden;
	cursor: pointer;
}



.case-details-inner{
	width: calc(100% - 5em);
	height: calc(auto - 5em);
	position: absolute;
	z-index: 10;
	float: left;
	clear: none;
	top: 2.5em;
	left: 2.5em;
	color: #fff;
	z-index: 100;
	transition: all .2s ease-in-out;
}


.case-details-inner h4{
	margin: .5em auto 0;
}



.case-details i{
	font-size: 1.3em;
	color: #e21010;
	position: absolute;
	bottom: 1em;
	right: 1em;
	border-radius: 4em;
	padding: 1em;
	background-color: #fff;
	z-index: 10;
	transition: all .2s ease-in-out;
}


.case-details:hover i{
	font-size: 1.2em;
	color: #e21010;
	position: absolute;
	bottom: .8em;
	right: .8em;
	border-radius: 4em;
	padding: 1.2em;
	background-color: #ffffff;
	z-index: 10;
	transform-origin: center;
	-webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);

}


.tags{
	width: 110%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: auto -5% 0;
}


.case-tag{
	display: inline;
	float: left;
	clear: none;
	padding: .5em 1em;
	background-color: #f2916b;
	margin: .2em;
	border-radius: 1em;
	font-family: "Aptos";
}








.brandpromise{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0vh auto 0;
	padding: 0;
	z-index: 0;
	position: relative;
}



.bp-top{
	width: 85%;
	height: auto;
	margin: auto 7.5%;
	display: block;
	float: left;
	clear: both;
	margin: 0vh 7.5% 10vh;
}


.bp-bottom{
	height: auto;
	width: 100%;
	display: block;
	float: left;	
	clear: both;
	margin: 10vh auto 0;
	position: relative;
}


.bp-bottom .swiper-container {
      width: 100%;
      height: 40vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 5em 5em;
	margin: 2vh 0;
	position: relative;
	z-index: 0;
    }


	.bp-bottom-inner-gradient{
	  width: 100%;
      height: 100%;
	  position: absolute;
	  z-index: 100;
      margin: 0;
	  display: block;
	  float: left;
		clear: none;
		background: #FFEBD7;
background: linear-gradient(176deg, rgba(255, 235, 215, 0) 0%, rgba(255, 235, 215, 1) 90%);
	}










	
	
	
}
    /* Desktop Layout: 769px to a max of 1080px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1080px) {


	.grid-Container{
		width: 100vw;
		height: auto;
	}
	
    
.hero{
	width: 100%;
	height: auto;
	background-color: black;
	border-radius: 0 0 5em 5em;
	display: block;
	float: left;
	clear: both;
	margin: 0 auto 15vh auto;
}



.hero .swiper-container {
      width: 100%;
      height: 80vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 5em 5em;
    }


.hero.topslide {
      text-align: center;
      background: #fff;

}



.slide{
	width: 100%;
	height: 80vh;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slidetext{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
	background: #000000;
	background: linear-gradient(-20deg,rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 1) 70%);
}

.slidetext-inner{
	width: 50%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 25vh 7.5vw auto 7.5vw;
	color: #fff;
}

.slidetext-inner h2{
	line-height: 1em;
	margin: auto auto 10px auto;
}

.slidetext-inner p{
	margin: 10px auto 2em;
	width: 70%;
	float: left;
	clear: both;
}




.hero-down{
	width: 85%;
	height: auto;
	display: block;
	float: left;
	margin: 5em 7.5% 0 7.5%;
	position: relative;
	z-index: 100;

}



.hd-left{
	width: 45%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 2em 0 0em;
	color: #fff;
	font-family: "Aptos-Light";

}

.hd-left h3{
	font-family: "Aptos-Light";
}


.hd-right{
	width: calc(50% - 4em);
	height: 100vh;
	display: block;
	float: right;
	clear: none;
	margin: 2em 0;
	  position: relative;
	  top: -30vh;
	  right: 0;
	  bottom: 0;
	  margin-bottom: -60vh;
}


.hdr-circles{
	width: 70vh;
	height: 70vh;
	display: block;
	float: left;
	clear: both;
	margin: 0em calc(50% - 30vh);
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	position: sticky;
	top: 1em;
	background-image:url("../img/bull-icon.svg");
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;

}

.rotate-center {
	-webkit-animation: rotate-center 10s linear infinite both;
	        animation: rotate-center 10s linear infinite both;
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.hdr-circles svg{
	position: absolute;
	-webkit-animation: rotate-center 10s linear infinite both;
	        animation: rotate-center 10s linear infinite both;
}

.hdr-circles svg:nth-of-type(1){
	
}

.hd-marquee{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0em auto 2em;
	overflow: visible;
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}

.hd-marquee marquee{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	overflow: visible;
	height: 5em;
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}

.hd-marquee marquee span{
	background-color: #606060;
	border-radius: 5em;
	padding: 1em 2em;
	margin: auto 1em;
	font-family: "Aptos";
	color: #fff;
	height: auto;
	font-size: 1.1em;
	font-weight: 600;
	letter-spacing: .5px;
}










.about-home{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 5vh auto ;
}

.ah-top{
	width: 85%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: auto 7.5% 3em;
}


.aht-left{
	width: 60%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0em 0;
	
}

.aht-left h6, .sh-top h6{
	margin: 1em 0;
	display: block;
	clear: both;
	float: left;
	width: 100%;
	color: #727272;
	text-align: left;
}

.aht-left h3{
	background-color: #e21010;
	padding: 0em .5em;
	color: #fff;
	display: inline;
	line-height: 1.2em;
	margin: 1em 0;
	float: none;
	clear: none;
	border-radius: 1em;
	text-wrap: wrap;
}


.aht-right{
	width: 35%;
	height: auto;
	display: block;
	float: right;
	clear: none;
	margin: 5em 0 auto;
}


.aht-right p{

}




.ah-bottom{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 2em 0% 0;
	position: relative;

}


.ah-bottom .swiper-container {
      width: 100%;
      height: 40vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 5em 5em;
	margin: 10vh 0;
    }




.ahs-img{
	border-radius: 5em;
	overflow: hidden;
	height: 40vh;
	display: block;
	float: left;
	background-size: cover;
	background-position: center;
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  background-color: #606060;

}




.services-home{
	width: 85%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 5vh 7.5% 3em;
	
}


.sh-top{
	display: block;
	float: left;
	clear: both;
	width: 85%;
	height: auto;
	text-align: center;
	margin: 5vh 7.5% 5vh;
}

.services-home h1{
	color: #e21010;
	letter-spacing: -2px;
	
}

.services-home h1 span{
  	color: #606060;
 	font-family: "Aptos-SemiBold-Italic";
}


.sh-bottom{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: none;
	margin: 20vh 0% 20vh;
	position: relative;
	
}


.shb-left{
	width: calc(60% - 2em);
	height: auto;
	float: left;
	clear: none;
	display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr ; 
  gap: 2em 2em; 
  grid-template-areas: 
    ". ."
    ". ."
 ; 
	margin: 0em 0;
	
}


.shb-left.capabilities{
	width: 60%;
}



.service-post{
	width: calc(100% - 4em);
	height: calc(38vh - 6em);
	display: block;
	float: left;
	clear: both;
	background-color: #ededed;
	border-radius: 5em;
	padding: 3em 2em;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}


.service-post-inner{
	width: calc(100% - 5em);
	height: calc(auto - 5em);
	position: absolute;
	z-index: 10;
	float: left;
	clear: none;
	top: 3.5em;
	left: 2.5em;
	color: #000000;
	z-index: 100;
	transition: all .2s ease-in-out;
}


.service-post h4{
	margin: .5em auto;
}


.service-post i{
	font-size: 1.8em;
	color: #fff;
	position: absolute;
	bottom: 1em;
	right: 1em;
	border-radius: 4em;
	padding: 1em;
	background-color: #e21010;
	z-index: 10;
	transition: all .2s ease-in-out;
}


.service-post:hover i{
	font-size: 2em;
	color: #fff;
	position: absolute;
	bottom: calc(-3.5em - 20vh);
	right: calc(-3.5em - 20vh);
	border-radius: 4em;
	padding: 40vh;
	background-color: #e21010;
	z-index: 10;
	transform-origin: center;

}

.service-post:hover .service-post-inner{
	
	color: #fff;
}








.shb-right{
	width:40%;
	height: 80vh;
	max-height: 160vh;
	display: block;
	float: right;
	margin: 0;
	clear: none;
	border-radius: 5em;
	background-color: #000000;
	top: 15vh;
	position:-webkit-sticky; 
	position:sticky; 
	top:15vh;
	overflow: hidden;
}


.shb-right .hdr-circles{
	width: 55vh;
	height: 55vh;
	display: block;
	float: left;
	clear: both;
	margin: 0em calc(50% - 30vh);
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	position: sticky;
	top: 1em;
	background-image:none;
	position: absolute;
	z-index: 0;
	top: -30%;
	left: -30%;
	opacity: .5;
}

.main-header{}


.shbr-inner{
	width: calc(100% - 4em);
	height: calc(100% - 4em) ;
	display: block;
	float: left;
	clear: none;
	margin: 2em;
	
	position:absolute;
	z-index: 100;
	  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 1.5fr; 
  gap: 0em 0em; 
  grid-template-areas: 
    "."
    "."; 
}


.shbri-top{
	width: 90%;
	height: 100%;
	margin: auto 5%;
	display: block;
	float: left;
	clear: none;
	color: #fff;
	display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  font-weight: 100;
	  font-family: "Aptos-Light";
}


.shbri-top h4{
	font-family: "Aptos-Light";
}


.shbri-bottom{
	width: 100%;
	height: 100%;
	margin: auto 0%;
	display: block;
	float: left;
	clear: both;
	color: #fff;
	background-image: url("../img/Burst_Port_System_Toe_Initiation_Sub_Closeup.webp");
	border-radius: 3em;
	background-size: cover;
	background-position: center;
}












.cases{
	width: 100%;
	height: 100vh;
	display: block;
	float: left;
	clear: both;
	position: relative;
}


.cases .swiper-container {
      width: 100%;
      height: 100vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;

    }


.cases.caseslide {
      text-align: center;
      background: #fff;

}


.cases-h6-title{
	position: absolute;
	z-index: 100;
	top: auto;
	bottom: 25vh;
	right: auto;
	left: 7.5%;
	color: #fff;
}


.case{
	height: 100vh;
	width: 100%;
	display: block;
	float: left;
	clear: both;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	
}


.case-inner{
	width: 100%;
	height: 100%;
	display: block;
	float: left;
	clear: both;
	background: #000000;
	background: linear-gradient(-180deg,rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .8) 80%);
}

.case-details{
	display: block;	
	float: left;
	clear: both;	
	position: absolute;
	z-index: 10;
	bottom: 4vw;
	left: auto;
	right: 7.5vw;
	width: calc(25% - 6em);
	height: calc(50vh - 2em);
	background-color: #e21010;
	color: #fff;
	border-radius: 5em;
	padding: 3em;
	overflow: hidden;
	cursor: pointer;
}



.case-details-inner{
	width: calc(100% - 5em);
	height: calc(auto - 5em);
	position: absolute;
	z-index: 10;
	float: left;
	clear: none;
	top: 2.5em;
	left: 2.5em;
	color: #fff;
	z-index: 100;
	transition: all .2s ease-in-out;
}


.case-details-inner h4{
	margin: .5em auto 0;
}



.case-details i{
	font-size: 2em;
	color: #e21010;
	position: absolute;
	bottom: 1em;
	right: 1em;
	border-radius: 4em;
	padding: 1em;
	background-color: #fff;
	z-index: 10;
	transition: all .2s ease-in-out;
}


.case-details:hover i{
	font-size: 2em;
	color: #e21010;
	position: absolute;
	bottom: .8em;
	right: .8em;
	border-radius: 4em;
	padding: 1.2em;
	background-color: #ffffff;
	z-index: 10;
	transform-origin: center;
	-webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);

}


.tags{
	width: 110%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: auto -5% 0;
}


.case-tag{
	display: inline;
	float: left;
	clear: none;
	padding: .5em 1em;
	background-color: #f2916b;
	margin: .2em;
	border-radius: 1em;
	font-family: "Aptos";
}








.brandpromise{
	width: 100%;
	height: auto;
	display: block;
	float: left;
	clear: both;
	margin: 0vh auto 0;
	padding: 0;
	z-index: 0;
	position: relative;
}



.bp-top{
	width: 85%;
	height: auto;
	margin: auto 7.5%;
	display: block;
	float: left;
	clear: both;
	margin: 0vh 7.5% 10vh;
}


.bp-bottom{
	height: auto;
	width: 100%;
	display: block;
	float: left;	
	clear: both;
	margin: 10vh auto 0;
	position: relative;
}


.bp-bottom .swiper-container {
      width: 100%;
      height: 40vh;
      margin: 0;
	  display: block;
	  float: left;
	clear: none;
	overflow: hidden;
	border-radius: 0 0 5em 5em;
	margin: 2vh 0;
	position: relative;
	z-index: 0;
    }


	.bp-bottom-inner-gradient{
	  width: 100%;
      height: 100%;
	  position: absolute;
	  z-index: 100;
      margin: 0;
	  display: block;
	  float: left;
		clear: none;
		background: #FFEBD7;
background: linear-gradient(176deg, rgba(255, 235, 215, 0) 0%, rgba(255, 235, 215, 1) 90%);
	}



}
    /* Desktop Layout:1080px to a max of 1440px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1440px) {
	
	
	
	
	
	
	
	
	
	
	
}
    
        /* Desktop Layout: 1440px to a max of 1920px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1920px) {
	
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
    
    
    
}
            /* Desktop Layout: 1920px to a max of 2400px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 2400px) {
	

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
		
}