#hero{
	background: var(--Main-Grey);
	height: 60vh;
	text-align: center;
	align-content: center;
}

#hero .contentHolder .bodyText{
	width: 60%;
	padding: 30px 0px;
	margin: auto;
}
#hero .pageCol{
	width: 25%;
}

#hero .pageCol:has(.contentHolder){
	width: 50%;
	align-content: center;
	z-index:10;
}
#hero .pageCol .rightImage{
	height: 95vh;
	position: absolute;
    top: -25vh;
    right: 0;
	opacity: 0.3;
}

#hero .pageCol .leftImage{
	height: 95vh;
	position: absolute;
    top: 14vh;
    left: 0;
	opacity: 0.3;
}

@media only screen and (max-width: 1240px) {
	#hero .pageCol:has(.contentHolder){
		width: 90%;
		align-content: center;
	}
	
	#hero .pageCol .rightImage{
		height: 50vh;
		top: -2vh;
		right: 0;
		opacity: 0.1;
	}
	
		
	#hero .pageCol .leftImage{
		height: 50vh;
		top: 40vh;
		left: 0;
		opacity: 0.1;
	}
}

@media only screen and (max-width: 600px) {
	#hero .pageCol .leftImage{
		top: 50vh;
	}
	#hero {
		height: 70vh;
	}
}

@media only screen and (max-width: 400px) {
	#hero .pageCol .leftImage{
		top: 70vh;
	}
	#hero {
		height: 90vh;
	}
}
	
#intro{
	height: 90vh;
	text-align: center;
	padding: 30px 0px;
}

#intro .pageCol{
	width: 55%;
	align-content: center;
	overflow: hidden;
	padding: 30px 0px;
}

#intro .pageCol:has(img){
	width: 45%;
	z-index: 10;
}

#intro .contentHolder{
	width: 75%;
    margin-left: auto;
	text-align: left;
	padding-right: 20px;
}

#intro img{
	margin-left: 2vw;
    height: 100%;
    border-radius: 15px;
	z-index: 5;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}


#intro .points{
    padding: 20px 0px;
    width: 85%;
    font-weight: 500;
    font-size: 1.2em;
    color: var(--Main-Dark);

}

#intro .point{
    padding: 5px 0px;
    font-weight: 500;
    font-size: 1.1em;
    color: var(--Main-Dark);
    align-content: center;
    display: flex;
    align-items: center;
}

#intro .point i{
    margin-right: 15px;
    color: var(--Main-Orange);
    font-size: 1.2em;
}

#intro .point span{
    display: block;
}

@media only screen and (max-width: 1240px) {
	#intro .points{
		width:100%;
	}
	
}

@media only screen and (max-width: 900px) {
	#intro .pageRow{
		flex-direction: column-reverse !important;	
	}
	#intro .pageCol:has(img){
		width: 100%;
		display: flex;
		justify-content: center;
	}
	#intro .pageCol:has(:not(img)){
		height:80vh
	}
	#intro img{
		margin-left: 0;
		height: unset;
		max-height: 100%;
		border-radius: 15px;
		z-index: 5;
		box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	}

	#intro .pageCol{
		width: 90%;
		align-content: start;
	}

	#intro .contentHolder {
		width: 90%;
		margin: auto;
		text-align: left;
		padding-right: 0px;
	}
	
	#intro{
		height: 115vh;
		padding: 0px 0px 30px 0px;
	}
}
@media only screen and (max-width: 800px) {
	#intro{
		height: 125vh;
	}
}

@media only screen and (max-width: 500px) {
	#intro{
		height: 135vh;
	}
	#intro .pageCol:has(:not(img)){
		height:80vh;
		overflow: visible;
	}
}

@media only screen and (max-width: 350px) {
	#intro{
		height: 150vh;
	}
	#intro .pageCol:has(:not(img)){
		height:180vh;
	}
}

#sectorsSection{
	background-color: #fff;
    height: 50vh;
}

#sectorsSection .sectionTitle{
	width: 100%;
    padding: 10px 0px 30px 0px;
}

#sectorsSection .sectionTitle .subTitle{
	text-align: center;
}

#sectorsSection .pointBoxHolder{
    height: 50vh;
    overflow: hidden;
    display: flex;
    padding: 0px 30px;
    gap: 1%;
}

#sectorsSection .pointBox{
    background: var(--Main-Dark);
    height: 280px;
    z-index: 2;
    border-radius: 20px;
    padding: 5px;
    color: #fff;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	width: 400px;
}

#sectorsSection .pointBox .icon{
    font-size: 5em;
    height: 50%;
    align-content: center;
}

#sectorsSection .pointBox .title{
    font-size: 1.7em;
    height: 15%;
    text-align: center;
}

#sectorsSection .pointBox .text{
    font-size: 1.1em;
    height: 20%;
    text-align: center;
	
}

#sectorsSection .pointBox .text span{
	font-weight: 600;
	margin-top: 10px;
	display: block;
}

#sectorsSection .marquee{
	display: none;
}

@media only screen and (max-width: 1900px) {

	#sectorsSection .pointBoxHolder{
		display: none;
	}
	
	:root{
	  --marquee-width: 100vw;
	  --marquee-height: 45vh;
	  --marquee-elements-displayed: 5;
	  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
	  --marquee-animation-duration: calc(var(--marquee-elements) * 6s);
	}

	@media only screen and (max-width: 1240px) {
		:root{
		  --marquee-elements-displayed: 4;
		  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
		  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
		}
		@media only screen and (max-width: 800px) {
			:root{
			  --marquee-elements-displayed: 3;
			  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
			  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
			}
		}
		@media only screen and (max-width: 400px) {
			:root{
			  --marquee-elements-displayed: 1;
			  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
			  --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
			}
		}

	}
	#sectorsSection .pointBox{
		height: 34vh;
		width: 95%;
	}

	#sectorsSection .pointBox .title{
		height: 30%;
		/*margin-bottom: 10px; */
		align-content: center;
	}

	#sectorsSection{
		margin-bottom: 80px;
		height: fit-content;
	}
	#sectorsSection .pointBox .text{
		/*margin-top: 10px; */
		width: 80%;
	}
	#sectorsSection .marquee {
	  width: var(--marquee-width);
	  height: var(--marquee-height);
	  background-color: transparent;
	  color: #eee;
	  overflow: hidden;
	  position: relative;
  	  display: block;
	}

	#sectorsSection .marquee:before, #sectorsSection .marquee:after {
	  position: absolute;
	  top: 0;
	  width: 10rem;
	  height: 100%;
	  content: "";
	  z-index: 1;
	}

	#sectorsSection .marquee:before {
	  left: 0;
	  background: linear-gradient(to right, #ffffff38 0%, transparent 100%);
	}
	#sectorsSection .marquee:after {
	  right: 0;
	  background: linear-gradient(to left, #ffffff38 0%, transparent 100%);
	}

	#sectorsSection .marquee-content {
	  list-style: none;
	  height: 100%;
	  display: flex;
	  animation: scrolling var(--marquee-animation-duration) linear infinite;
	}

	@keyframes scrolling {
	  0% { transform: translateX(0); }
	  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
	}
	
	#sectorsSection .marquee-content li {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-shrink: 0;
	  max-height: 100%;
	  white-space: wrap;
		width: 70%;
        max-width: 400px;
        min-width: 300px;
	}

}

.squareStart{
    --size: 45px;
    --line: #34323d17;
    background: linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
    height: 115vh;
    overflow: hidden;
    mask: linear-gradient(180deg, transparent 200px, white);
    position: absolute;
    width: 100%;
    top: 100vh;
}

.squareEnd{
    --size: 45px;
    --line: #34323d17;
    background: linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size);
    height: 210vh;
    overflow: hidden;
    mask: linear-gradient(0deg, transparent 200px, white);
    position: absolute;
    width: 100%;
    top: 215vh;
}

.feature{
	height:80vh;
}

.feature .pageRow{
	padding: 0px 60px;
}

.feature .pageCol{
	z-index: 5;
	width: 50%;
	align-content: center;
}

.feature .pageCol img{
	width: 80%;
	border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.feature .pageCol .contentHolder{
	height: 100%;
	align-content: center;
}


.feature .pageCol .contentHolder .content{
	min-height: 250px;
    align-content: center;
    width: 100%;
    background: #fff;
    padding: 50px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    border: 1px solid var(--Main-Grey);
}

.feature .pageCol .contentHolder .content .subTitle{
	margin-bottom: 40px;
}

.feature.leftContent .pageCol:has(img){
	text-align: end;
}



#feature3 .rightImage{
	position: absolute;
    right: 0;
    height: 78%;
    opacity: 0.1;
}

#feature3 .background, #feature4 .background{
	background: var(--Main-Grey);
	height: calc(100% - 24px);
}

#feature3 .preBackground{
    background: var(--Main-Grey);
    width: 100%;
    overflow: hidden;
}

#feature3 .preBackground .slant{
    height: 34px;
    background: #fff;
    transform: skew(89deg);
    transform-origin: top;
    overflow: hidden;
}



#feature4{
	height: 78vh;
}

#feature4 .leftImage{
	position: absolute;
    left: 0;
    height: 75%;
    opacity: 0.1;
}

#feature4 .postBackground{
    background: #fff;
    width: 100%;
    overflow: hidden;
}

#feature4 .postBackground .slant{
    height: 50px;
    background: var(--Main-Grey);
    transform: skew(89deg);
    transform-origin: top;
    overflow: hidden;
}

#feature5{
	margin-top: 30px;	
}


.feature .Mobile{
	width: 90%;
    margin: auto;
    overflow: hidden;
    z-index: 5;
    position: relative;
    background: white;
    height: 100%;
    border-radius: 15px;
    margin-bottom: 25px;
    padding: 10px 20px;
	text-align: center;
	align-content: center;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	max-width:400px;
}

.feature .Mobile img{
	margin-bottom: 25px;
	border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	max-height: 45%;
}

.feature .Mobile .contentHolder{
	height: 45%;
    align-content: center;
}

.feature .Mobile .subTitle{
	text-align: left;
	margin-bottom: 10px;
}

.feature .Mobile .bodyText{
	text-align: left;
	margin-bottom: 20px;
}


@media only screen and (max-width: 1240px) {
	.feature {
		height: 70vh;
		padding-bottom: 30px;
	}
	#feature3 .background, #feature4 .background {
		height: 100%;
		padding-bottom: 40px;
	}
	#feature1 .Mobile,#feature3 .Mobile,#feature5 .Mobile{
		margin-left:20%;
	}
	#feature2 .Mobile,#feature4 .Mobile{
		margin-right:20%;
	}
}

@media only screen and (max-width: 800px) {
	#feature1 .Mobile,#feature3 .Mobile,#feature5 .Mobile{
		margin-left:auto;
	}
	#feature2 .Mobile,#feature4 .Mobile{
		margin-right:auto;
	}
}

#finalCTA{
	height: 50vh;
	padding-top:40px;
}

#finalCTA .contentHolder{
	width: 50%;
	margin: auto;
	text-align: center;
}

#finalCTA .contentHolder .subTitle{
	margin-bottom: 30px;
}

#finalCTA .contentHolder .bodyText{
	margin-bottom: 20px;
}

#finalCTA .contentHolder .box{
	margin: auto;
}

@media only screen and (max-width: 1240px) {
	#finalCTA .contentHolder{
		width: 90%;
	}
	#finalCTA .contentHolder .subTitle{
		margin-bottom: 60px;
	}

	#finalCTA .contentHolder .bodyText{
		margin-bottom: 60px;
	}
}


@media only screen and (max-width: 600px) {
	#finalCTA{
		height: 60vh;
	}
}