* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
.hero-carousel {
      position: relative;
      width: 100vw;
      height: 86vh;
      min-height: 682px;
      overflow: hidden;
      background: #16181F;
 }
    .slidess {
      display: flex;
      width: 400vw; /* 100vw per slide * 4 slides */
      height: 100%;
      transition: transform 0.6s ease;
    }
    .slide {
      width: 100vw;
      height: 100%;
      position: relative;
      flex-shrink: 0;
    }
    #slide1 video, #slide3 video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .text-overlay {
      position: absolute;
      bottom: 4%;
      left: 50%;
      transform: translate(-50%, -10%);
      max-width: 1200px;
      width: 88%;
      color: white;
      z-index: 2;
      text-align: left;
      border: 0px solid #f00;
    }
    .text-overlay h2 {
    margin: 0;
    width: 80%;
		color: #fff;
		font-family: "Josefin Sans", Arial, Helvetica, sans-serif;
		font-size: 44px;
		font-style: normal;
		font-weight: 700;
		line-height: 1.1em;
		padding: 12px 0px 12px 0px;
		letter-spacing: .5px;
		text-transform: uppercase;
    }
    .text-overlay h4 {
    	padding: 0 0 24px 0;
		margin: 0 0 -20px 0;
		line-height: 1.4em;
		color: #F9BE1E;
		font-family: "Barlow", Arial, Helvetica, sans-serif;
		font-size: 12px;
		font-style: normal;
		letter-spacing: 2.5px;
		-webkit-font-smoothing: antialiased	
		border-bottom: 0px solid #500;
		text-transform: uppercase;
    }
    
    .text-overlay p {
		color: #efefef;
		font-family: "Barlow", Arial, Helvetica, sans-serif;
		font-size: 20px;
		font-style: normal;
		font-weight: 400;
		line-height: 1.4em;
		max-width: 526px;
		padding-bottom: 24px;
		border-bottom: 0px solid #f00;
    margin-top: -4px;
}
    /* Individual slide styling */
    #slide1 {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    #slide2 {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    #slide4 {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    /* Dots */
    .dots {
      position: absolute;
      bottom: 20px;
      left: 24px;
      display: flex;
      gap: 12px;
      z-index: 3;
    }
    .dot {
      width: 14px;
      height: 14px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    
    .dot:hover{
      background-color: rgba(100, 200, 255, 0.8);
    }
    .dot.active {
      background-color: #fff;
    }
    
     .dot.active:hover {
       background-color: rgba(255, 255, 255, .8);
    }
    /* Controls */
    .controls {
      position: absolute;
      bottom: 20px;
      right: 24px;
      display: flex;
      gap: 12px;
      z-index: 3;
    }
    .controls-menu-closed {
      position: absolute;
      bottom: 110px;
      right: 0px;
      display: flex;
      gap: 16px;
      z-index: 53;
      display: none;
    }
    .controls-menu-open {
      position: absolute;
      bottom: 110px;
      right: 0px;
      display: flex;
      gap: 16px;
      z-index: 53;
      display: inline;
    }
    
    
    
    .control-btn-right {
    	background: none;
    	border: 0;
      	border-radius: 0px;
      	cursor: pointer;
      	width: 36px;
		height: 36px;
		background-image: url(https://22621191.fs1.hubspotusercontent-na1.net/hubfs/22621191/logos_icons/right-arrow.svg);
		background-repeat: no-repeat;
		background-size: 36px 36px;
    }
    .control-btn-right:hover {
      	background-image: url(https://22621191.fs1.hubspotusercontent-na1.net/hubfs/22621191/logos_icons/right-arrow-hover.svg);
    }
    
    .control-btn-left {
    	background: none;
    	border: 0;
      	border-radius: 0px;
      	cursor: pointer;
      	width: 36px;
		height: 36px;
		background-image: url(https://22621191.fs1.hubspotusercontent-na1.net/hubfs/22621191/logos_icons/left-arrow.svg);
		background-repeat: no-repeat;
		background-size: 36px 36px;
    }
    .control-btn-left:hover {
      	background-image: url(https://22621191.fs1.hubspotusercontent-na1.net/hubfs/22621191/logos_icons/left-arrow-hover.svg);
    }
    
    #gear {
		font-family: "Barlow", Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-style: normal;
		font-weight: 400;
		line-height: 1.3em;
		width: 34px;
		height: 34px;
		margin: 2px 0 0 0px;
		border: 1px solid #fff;
		border-radius: 18px;
		background-color: rgba(1,1,1, 0);
		background-image: url(https://22621191.fs1.hubspotusercontent-na1.net/hubfs/22621191/gear.svg); 
		background-size: 18px;
		background-position: 7px 7px;
		background-repeat: no-repeat;
		position: absolute;
		right: 98px;
		border: 1px solid #ccc;
		color: #eee;
		/*background: rgba(11, 4, 4, .12); */
	}
	
	 #gear:hover {
		background: none;
		background-color: rgba(1,1,1, .5);
		background-image: url(https://22621191.fs1.hubspotusercontent-na1.net/hubfs/22621191/gear-hover.svg); 
		background-size: 18px;
		background-position: 7px 7px;
		background-repeat: no-repeat;
		position: absolute;
		right: 98px;
		border: 1px solid #222;
		cursor: pointer;
	}
	
		#gear-at {
		font-family: "Barlow", Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-style: normal;
		font-weight: 400;
		line-height: 1.3em;
		width: 34px;
		height: 34px;
		margin: 2px 0 0 0px;
		border: 0px solid #000;
		border-color: rgba (33,33,66, .5);
		border-radius: 18px;
		background-color: rgba(1,1,1, .3);
		background-image: url(https://22621191.fs1.hubspotusercontent-na1.net/hubfs/22621191/gear-hover.svg); 
		background-size: 18px;
		background-position: 7px 7px;
		background-repeat: no-repeat;
		position: absolute;
		right: 98px;

		color: #eee;
		/*background: rgba(11, 4, 4, .12); */
	}
	
	#gear-at:hover {
		font-family: "Barlow", Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-style: normal;
		font-weight: 400;
		line-height: 1.3em;
		width: 34px;
		height: 34px;
		margin: 2px 0 0 0px;
		border: 0px solid #fff;
		border-radius: 18px;
		background-color: rgba(22,22,33, .5);
		background-image: url(https://22621191.fs1.hubspotusercontent-na1.net/hubfs/22621191/gear.svg); 
		background-size: 18px;
		background-position: 7px 7px;
		background-repeat: no-repeat;
		position: absolute;
		right: 98px;
		border: 1px solid #ccc;
		color: #eee;
		cursor: pointer;
	}

    #pause-play {
		font-family: "Barlow", Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-style: normal;
		font-weight: 400;
		line-height: 1.3em;
		width: 106px;
		height: 36px;
		margin: 0 0 0 0px;
		background: none;
		border-radius: 18px;
		/*background-image: url("pause-norm.svg"); */
		position: absolute;
		right: 24px;
		border: 1px solid #ccc;
		color: #eee;
		background: rgba(11, 4, 4, ..5);
    display: inline;
	}
	
	#pause-play:hover {
		width: 106px;
		height: 36px;
		margin: 0 0 0 0px;
		background: none;
		border-radius: 18px;
		/*background-image: url("pause-hover.svg"); */
		position: absolute;
		color: #fff;
		border: 0px solid #fff;
		background: rgba(11, 11,11, .8);
	}
	
	#pause-video{
		font-family: "Barlow", Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-style: normal;
		font-weight: 400;
		line-height: 1.3em;
		width: 106px;
		height: 36px;
		margin: -44px 0 0 0px;
		background: none;
		border-radius: 18px;
		color: #ccc;
		position: absolute;
		right: 24px;
		border: 1px solid #ccc;
		background: rgba(11, 4, 4, ..5);
	}
	
	#pause-video:hover{
		width: 106px;
		height: 36px;
		background: rgba(11, 4, 4, .78);
		border-radius: 18px;
		color: #fff;
		position: absolute;
		border: 0px solid #fff;
		cursor: pointer;
	}
    
    .control-btn {
      border: none;
      border-radius: 0px;
      cursor: pointer;
      font-size: 1rem;
    }
    .control-btn:hover {
    	border: none;
      	border-radius: 0px;
      	background: rgba(255, 255, 255, 1);
    }
    
    
    .hero-cta button {
		padding: 14px 36px 14px 36px;
		border: 0px solid #136ED9;
		margin: 0 0 16px 0;
		border-radius: 28px;
		background: #1D5DA9;
		color: #fff;
		transition: background-color 0.3s ease, color 0.3s ease; 

	}

.hero-cta button a{
	color: #fff;
	padding: 4px 0 0 0;
	/*border-bottom: 2px solid #223; */
	text-decoration: none;
	font-family: "Barlow", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	letter-spacing: 1.2px;
	font-weight: 300;
	line-height: 1.3em;
	transition: color 0.5s ease; 
}
.hero-cta button a:hover{
	color: #223; /* */
	border: 0;
}

.hero-cta button:hover {
	background-color: #136ED9;
	cursor: pointer;
	border: 0px solid #136ED9;
}

.hero-cta button:hover a {
	color: white; /* Text color on hover */
}
/* control the width of headlines */
#slide1 h2 {
 	width: 45%;
 	border-bottom: 0px solid #f00;
 }
 #slide2 h2 {
 	width: 45%;
 	border-bottom: 0px solid #f00;
 }
 #slide3 h2 {
 	width: 45%;
 }
  #slide4 h2 {
 	width: 70%;
 }
/* end control the width of headlines */

 /* Media query for screen widths 800px or narrower */
@media (max-width: 800px) {
    #slide1 h2, #slide2 h2, #slide3 h2, #slide4 h2{
		width: 65%;
		border-bottom: 0px solid #090;
	}
    .text-overlay h2 {
		font-size: 36px;
		line-height: 1.1em;
    }
    .hero-carousel {
		position: relative;
    }
	.desktop-video {
        display: none;
    }
    .mobile-video {
        display: block;
    }
    #slide2 video{
        padding: 20px 0 0 0;
    }
    #slide2 {
      	background-position: -534px top;
      	border-bottom: 0px solid #f00;
    }
    /*.text-overlay 
		bottom: 0;
	}*/
}
@media (max-width: 768px) {
    #slide2 {
      	background-position: -470px top;
      	border-bottom: 0px solid #FF0000;
    }	
}

@media (max-width: 740px) {
    #slide2 {
      	background-position: -490px top;
      	border-bottom: 0px solid #FF0000;
    }	
}
   
    
@media (max-width: 670px) {
    #slide2 {
      	background-position: -585px top;
      	border-bottom: 0px solid #960;
    }	
}
    

@media (max-width: 520px) {
    #slide2 {
     	background-image: url('rob-seated-profile_A7_6880-1.webp');
      	background-size: cover;
      	background-position: -580px top;
      	background-repeat: no-repeat;
    }
}
    
@media (max-width: 375px) {
    #slide2 {
      background-position: -580px top;
    }
}

@media (max-width: 390px) {
    #slide1 h2, #slide2 h2, #slide3 h2, #slide4 h2{
		width: 80%;
		border-bottom: 0px solid #00f;
	}
    .text-overlay h2 {
		font-size: 30px;
		line-height: 1.1em;
    }
}
    	
/* Fade-in animation */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    /* Apply fade-in animation to the first slide */
    #slides {
      animation: fadeIn 2s ease forwards;
    }
/* */
.gradient {
	background: rgba(22, 24, 31, 0.6);
	color: #ddd;
	width: 100vw;
	border: 0px solid #999;
    height: 100%;
    position: absolute;
    display: inline;
    padding: 24px;
    font-family: "Barlow", Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.3em;
	top: 0;
	left: 0;
	background: linear-gradient(85deg, #16181F 13.9%, rgba(22, 24, 31, 0.00) 60.82%);
	mix-blend-mode: hard-light;
}

.gradient-light {
	background: rgba(22, 24, 31, 0.6);
	color: #ddd;
	width: 100vw;
	border: 0px solid #999;
    height: 100%;
    position: absolute;
    display: inline;
    padding: 24px;
    font-family: "Barlow", Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.3em;
	top: 0;
	left: 0;
	background: linear-gradient(85deg, rgba(19, 24, 38, 0.84) 13.9%, rgba(22, 24, 31, 0.00) 60.82%);
	mix-blend-mode: hard-light;
}

.gradient-light-warm {
	background: rgba(22, 24, 31, 0.6);
	color: #ddd;
	width: 100vw;
	border: 0px solid #999;
    height: 100%;
    position: absolute;
    display: inline;
    padding: 24px;
    font-family: "Barlow", Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.3em;
	top: 0;
	left: 0;
	background: linear-gradient(92deg, rgba(37, 26, 13, 0.63) 15.15%, rgba(20, 15, 7, 0.00) 63.51%);
	mix-blend-mode: hard-light;
}