html { scroll-behavior: smooth; }
html, body {padding: 0;margin: 0;font-family: "outfit", sans-serif;font-weight: 300; color: #000; /*cursor: url(images/cursor1.svg), auto;*/  /*custom-cursor*/ }
body { background-color: #F2F2F2; }
* { margin: 0px; padding: 0px; }
img { border: none; }
a { text-decoration: none; }
a:focus { outline: none; }
input:focus { outline: none; }
select:focus { outline: none; }
textarea:focus { outline: none; }
Div { box-sizing: border-box; }
/*H1 { width: 100%; display: block; text-align: center; font-family: "DM Sans", sans-serif; font-weight: 400;}
H2 { width: 100%; display: block; text-align: center; font-family: "DM Sans", sans-serif; font-weight: 400;}
*/


::placeholder {
 color: black;
 opacity: 1;
 /* Firefox */
}

::-ms-input-placeholder {
 /* Edge 12 -18 */
 color: black;
}

.image1 { width:100%; height:auto;}
.banner-text Span, .bannertext-inner Span  { color:#CCFB55;}


@media only screen and (min-width: 1024px) and (max-width: 8000px) {

.banner { background-color:#000; background-image:url(images/banner-bg.png); background-repeat:no-repeat; background-position: top right; background-size: cover; height:100vh; position:relative; }
.banner-inner { background-color:#000; background-image:url(images/bg-inner.png); background-repeat:no-repeat; background-position: top right; background-size: cover; height:50vh; position:relative; }
.bannertext-inner  { width:100%; padding:0 10%; left:0%; bottom: 25%; position:absolute; text-align:center;  color:#fff; font-size:5vw; line-height:6vw; font-family: outfit; font-weight:500;}
.team-inner { width:50%; text-align:center;  font-family: outfit; font-size:2.5vw; font-weight:500; margin: 8vh 0 4vh 25%; display:block; float:left;}
.team-para { width:100%; text-align:center;  font-family: outfit; font-size:1.3vw; font-weight:500; padding:0 30%; margin: 0vh 0 5vh 0; display:block; float:left;}


	
.tnb { width:96%; margin-left: 2%; display:flex; flex-direction: row; justify-content:space-between; align-items: center; padding-top:4vh;}
.logo { height:4.5vh;}
.links a { display:block; float:right; background:#fff; padding: 2.5vh 3.5vh; border-radius: 50px; color:#000; font-family: outfit; font-weight:500;}
.links a:hover { background:#CCFB55; color:#000;}
.banner-text  { width:100%; padding:0 10%; left:0%; bottom: 28%; position:absolute; text-align:center;  color:#fff; font-size:5vw; line-height:6vw; font-family: outfit; font-weight:500;}
.banner-text Div { width:100%; padding: 0 7%;}
.banner-text img { margin-top:12vh; width:100%;}
.banner-text br { display:none;}



.intro-text { font-family: outfit; font-size:2vw; line-height:2.5vw; font-weight:500; color:#000; padding:5vw 20vw 5vw 20vw; text-align:center;}


.heading1 { width:100%; text-align:center;  font-family: outfit; font-size:4vw; font-weight:500; margin-bottom:5vh; }

/*.section-whatwedo { width:100%; padding:0 25%;  display:flex; flex-direction: row; flex-wrap: wrap;  }
.whatwedo-box {  width:45%; margin:2.5%;    height:50vh;  background:#000; border-radius: 50px; display:flex; flex-wrap: wrap;  align-content: flex-end;}
.whatwedo-box-content { width:100%; text-align:left; }
.whatwedo-box-content  H1 {font-family: outfit; font-size:1.9vw; line-height:2.4vw; font-weight:400; display:block; width:80%; margin-bottom:2vh; }
.whatwedo-box-content  P {font-family: outfit; font-size:0.9vw; line-height:1.3; font-weight:300;}*/

.section-whatwedo { width:100%; padding:0 25%; display:block; float:left; margin-bottom:6vw;  }
.whatwedo-box {  width:45%; margin:2.5%; display:block; float:left; position:relative; height:24vw;  background:#000; border-radius: 40px; }
.whatwedo-box-content { width:86%; position:absolute; bottom:2.5vw; left:7%; }
.whatwedo-box-content  H1 {font-family: outfit; font-size:2.0vw; line-height:2.2vw; font-weight:500; display:block; width:80%; margin-bottom:2vh; }
.whatwedo-box-content  P {font-family: outfit; font-size:1.1vw; line-height:1.4; font-weight:300;} 

.box1, .box3, .box4 { color:#fff;  background-size:100% auto; background-position: left top; background-repeat:no-repeat; background-color: #000; 
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);}
.box1 { background-image:url(images/bg1.png);}
.box3 { background-image:url(images/bg3.png);}
.box4 { background-image:url(images/bg4.png);}

.box2 { /*background-image:url(images/bg2.png);*/ background-color:#CCFB55; background-size:25% auto; background-position: 90% 5%; background-repeat:no-repeat;  
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);}

.para-text { font-family: outfit; font-size:1.5vw; line-height:2.3vw; font-weight:450; color:#000; padding:5vw 20vw 5vw 20vw; text-align:center;}

.partners-section { width:100%; padding:0 10%;  margin:0 0 7vw 0; display:flex; flex-direction: row; gap: 0px; align-items:center; justify-content: center}
.partners-section img { width:100%; height:auto; border-radius: 15px;
	/*box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.10);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.10);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.10);*/}

.gate6 { width:100%; display:flex; flex-direction: column; align-items:center; text-align:center; padding:0; margin:0;}
.gate6-heading { width:100%; text-align:center;  font-family: outfit; font-size:3vw; font-weight:500; margin-bottom:7vh; display:block; float:left;}
.gate6 img { width:9vw;}
.gate6 P {  padding:0; margin:0; font-family: outfit; font-size:1.5vw; line-height:2.3vw; font-weight:450; color:#000; padding:2vw 20vw 6vw 20vw; text-align:center;}
/*.gate6 a {  display:block; float:left; width:auto; box-sizing: border-box; padding: 1vw 2vw; margin:3vw 0vw 6vw 0vw; border-radius: 50px; color:#000; font-family: outfit; font-size:1.3vw; font-weight:500; background:#000; color:#fff;
 	 box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.40);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);}*/




.section-industries { width:100%; display:block; float:left; padding: 11vh 0 15vh 0; margin:0 0 10vh 0; background-color:#000; background-image:url(images/bg-industries.png); background-position:left top; background-repeat:no-repeat; background-size: 103% auto;  position:relative;}

.heading2 { width:100%; display:block; float:left; text-align:center;  font-family: outfit; font-size:4vw; font-weight:500; margin:3vh 0 1vw 0; display:block; float:left; color:#fff;}
.small-text { width:100%; padding:0 35%; text-align:center;  font-family: outfit; font-size:1.2vw; line-height:1.5vw; font-weight:400; margin-bottom:3vw; color:#fff; }

.section-industries-wrap { width:70%; display:block; float:left; margin: 0 0 0vh 15%; padding-top:6vh;     }
.section-industries-wrap-content { width:30%; height:25vw; display:block; float:left; margin:0 1.66666% 0vh; border-radius: 40px; position: relative; 
	}
.card1 {background: #474747;
	background: linear-gradient(150deg, rgba(0, 0, 0, 1) 0.5%, rgba(20, 20, 20, 0.9) 40%, rgba(10, 10, 10, 1) 100%);
	color:#fff;}
.card2 {background: #CCFB55;}		

.section-industries-wrap-content Div { position:absolute; left: 7%; bottom: 11%; width:85%;}
.section-industries-wrap-content img{ width:7vh; height:auto; position:absolute; right: 9%; top: 8%;}
.section-industries-wrap-content Div H2 { font-family: outfit; font-size:2vw; font-weight:500; margin:0vh 0 2vh 0;}
.section-industries-wrap-content Div P { font-size:1.1vw; line-height:1.4vw;}


.heading3 { width:100%; text-align:center;  font-family: outfit; font-size:4vw; font-weight:500; margin-bottom:4vh; display:block; float:left;}
.small-text2 { width:100%; padding:0 20%; text-align:center;  font-family: outfit; font-size:1.5vw; line-height:2vw; font-weight:400; margin-bottom:7vh;   }
.small-text2 P { margin-bottom: 2vh;}


.section-team { width:60%; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 3vw;   margin: 15vh 0 16vh 20%; padding: 3vh 0vh 0vh 0vh; }

.team-box { width:30%; padding:0vw 0vw 8vw 0vw; display:flex;  align-items: flex-end;  background:#000; border-radius:2.5vw; color:#fff;  position:relative;
	background: linear-gradient(150deg, rgba(50, 50, 50, 1) 0%, rgba(20, 20, 20, 1) 40%, rgba(10, 10, 10, 1) 100%);
	box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25)}

.gradient-overlay { position:absolute;  width:100%; z-index:1; bottom:0; left:0;  border-radius: 0 0 2.5vw 2.5vw; } 	
.team-box img { width:100%; height:auto;  border-radius: 2.5vw; }
.bw {filter: grayscale(100%);}

.team-box .name { position:absolute; width:50%; z-index:1; bottom:3vw; left:1.2vw; font-size:2.3vw; font-weight:500; line-height:2.3vw;}
.name Span { color:#CCFB55;}
.position {display:block; margin-top:10px; width:100%; color:#ccc; font-size:0.8vw; font-weight:300;   line-height:1vw;  color:#fff;}
.team-box a { position:absolute; z-index:3;  width:13%; bottom:1.2vw; right:1.2vw; filter: }

.home-team-section { display:block; float:left;  width:100%; text-align:center;  margin:2vw 0 7vw 0;}
.home-team-section a { width:auto;  border:2px #000 solid; border-radius: 5vw;  font-size:1.5vw; color:#000; padding:2vw 3vw;}

.section-contact {width:50%; display: flex; align-items: center;  margin: 15vh 0 16vh 25%; border-radius:50px; padding: 5vh 6vh 8vh 6vh; color:#fff;
	background: #474747;
	background: linear-gradient(150deg, rgba(50, 50, 50, 1) 0%, rgba(20, 20, 20, 1) 40%, rgba(10, 10, 10, 1) 100%);
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	} 
.contact-left { width:30%; text-align:center; }
.contact-left img { width:70%;}
.contact-right { width:70%; padding-left:5vh }
.contact-right H2 {font-family: outfit; font-size:2vw; font-weight:500; margin-bottom:1.5vh;}
.contact-right P {width: 100%; font-size:1.1vw; line-height:1.4vw; }
.contact-right span {width: 100%; display:block; margin:5vh 0 2vh 0; font-size:1.3vw; line-height:1.3vw; font-weight:600; }
.contact-right a {background:#fff; display:block; float:left; width:auto; box-sizing: border-box; padding: 1vw 2vw; border-radius: 50px; color:#000; font-family: outfit; font-size:1.3vw; font-weight:500;}
.contact-right a:hover { background:#CCFB55; color:#000;}


.footer-left { width:60%; display:block; float:left; background:#000; color:#fff; padding:2vh 0 2vh 3vw;  font-size:0.9vw; }
.footer-right { width:40%; display:block; float:left; background:#000; color:#fff; padding:2vh 3vw 2vh 0; text-align:right;  font-size:0.9vw;}
}

@media only screen and (orientation: portrait) {}



@media only screen and (min-width: 1px) and (max-width: 480px) {

.banner { background-color:#000; background-image:url(images/banner-bg-mobile.png); background-repeat:no-repeat; background-position: top right; background-size: cover; height:100vh; position:relative; }	

.banner-inner { background-color:#000; background-image:url(images/banner-bg-mobile-inner.png); background-repeat:no-repeat; background-position: top right; background-size: cover; height:30vh; position:relative; }
.bannertext-inner  { width:100%; padding:0 10%; left:0%; bottom: 20%; position:absolute; text-align:center;  color:#fff; font-size:10vw; line-height:12vw; font-family: outfit; font-weight:500;}
.team-inner { width:94%; text-align:center;  font-family: outfit; font-size:6vw; font-weight:500; padding:0 10%; margin: 8vh 0 2vh 3%; display:block; float:left;}
.team-para { width:100%; text-align:center;  font-family: outfit; font-size:4vw; font-weight:500; padding:0 10%; margin: 0vh 0 6vh 0; display:block; float:left;}



.tnb { width:90%; margin-left: 5%; padding-top:4vh; display:flex; flex-direction: row; justify-content:space-between; align-items: center; }
.logo { height:7vw;}
.links a { display:block; float:right; background:#fff; padding: 0.9vh 1.5vh; border-radius: 50px; color:#000; font-family: outfit; font-size:12px; font-weight:400;}
.links a:hover { background:#CCFB55; color:#000;}
.banner-text  { width:90%; position:absolute; left:5%; bottom: 35vh; color:#fff; font-size:10vw; line-height:11vw; font-family: outfit; font-weight:500; text-align:center;}
.banner-text img { margin-top:4vh; width:80%;}


.intro-text { font-family: outfit; font-size:5vw; line-height:7vw; font-weight:500; color:#000; padding:7vh 10vw 10vh 10vw; text-align:center;}


.heading1 { width:100%; text-align:center;  font-family: outfit; font-size:9vw; font-weight:500; margin-bottom:6vh; }


.section-whatwedo { width:100%; padding:0 10%; display:block; float:left; margin-bottom:6vw;  }
.whatwedo-box {  width:100%; margin:0 0 5vh 0; display:block; float:left; position:relative; height:50vh;  background:#000; border-radius: 30px; }
.whatwedo-box-content { width:86%; position:absolute; bottom:10vw; left:7%; }
.whatwedo-box-content  H1 {font-family: outfit; font-size:8.0vw; line-height:10vw; font-weight:500; display:block; width:80%; margin-bottom:2vh; }
.whatwedo-box-content  P {font-family: outfit; font-size:4vw; line-height:1.3; font-weight:300;} 

.box1, .box3, .box4 { color:#fff;  background-size:100% auto; background-position: left top; background-repeat:no-repeat; background-color: #000; 
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);}
.box1 { background-image:url(images/bg1.png);}
.box3 { background-image:url(images/bg3.png);}
.box4 { background-image:url(images/bg4.png);}

.box2 { /*background-image:url(images/bg2.png);*/ background-color:#CCFB55; background-size:25% auto; background-position: 90% 5%; background-repeat:no-repeat;  
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);}

.para-text { font-family: outfit; font-size:5vw; line-height:7vw; font-weight:500; color:#000; padding:7vh 10vw 7vh 10vw; text-align:center;}

.heading2 { width:100%; text-align:center;  font-family: outfit; font-size:9vw; font-weight:500; margin-bottom:1vh; display:block; color:#fff;}
.small-text { width:100%; padding:0 10%; text-align:center;  font-family: outfit; font-size:4.5vw; line-height:6vw; font-weight:400; margin-bottom:5vh;   color:#fff;}

.partners-section { width:100%; padding:0 5%;  margin:0 0 18vw 0; display:flex; flex-direction: row; flex-flow: wrap; gap: 10px; align-items:center; justify-content: center;}
.partners-section a { width:45%;}
.partners-section img { width:100%; height:auto; border-radius: 15px;
	/*box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.10);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.10);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.10);*/}


.gate6-heading { width:100%; text-align:center;  font-family: outfit; font-size:9vw; font-weight:500; margin-bottom:6vw; display:block; float:left;}

.gate6 { width:100%; display:flex; flex-direction: column; align-items:center; text-align:center; padding:4vw 10vw 5vh 10vw; margin:0;}
.gate6 img { width:27vw;}
.gate6 P {  padding:0; margin:0; font-family: outfit; font-size:5vw; line-height:7vw; font-weight:450; color:#000; padding:8vw 0vw 10vw 0vw; text-align:center;}
/*.gate6 a {  display:block; float:left; width:auto; box-sizing: border-box; padding: 4vw 8vw; margin:10vw 0vw 10vw 0vw; border-radius: 50px; color:#000; font-family: outfit; font-size:6vw; font-weight:500; background:#000; color:#fff; 
	 box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.50);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);}*/


.section-industries { width:100%; display:block; float:left; padding: 20vh 0 8vh 0; margin:0 0 10vh 0; background-color:#000; background-image:url(images/bg-industries-m.png); background-position:center top; background-repeat:no-repeat; background-size: 100% auto; position:relative;}
.section-industries-wrap { width:100%; display:block; float:left; padding: 0 10% 0vh; padding-top:10vw;     }
.section-industries-wrap-content { width:100%; height:40vh; display:block; float:left; margin:0 1.66666% 3vh; border-radius: 30px; position: relative; }
.card1 {background: #474747;
	background: linear-gradient(150deg, rgba(50, 50, 50, 1) 0%, rgba(20, 20, 20, 1) 40%, rgba(10, 10, 10, 1) 100%);
	color:#fff;}
.card2 {background: #CCFB55;}		

.section-industries-wrap-content Div { position:absolute; left: 7%; bottom: 11%; width:85%;}
.section-industries-wrap-content img{ width:6vh; height:auto; position:absolute; right: 9%; top: 8%;}
.section-industries-wrap-content Div H2 { font-family: outfit; font-size:8vw; font-weight:500; margin:0vh 0 2vh 0;}
.section-industries-wrap-content Div P { font-size:4vw; line-height:5vw;}



.heading3 { width:100%; text-align:center;  font-family: outfit; font-size:9vw; font-weight:500; margin-bottom:4vh; display:block; float:left;}
.small-text2 { width:100%; padding:0 10%; text-align:center;  font-family: outfit; font-size:1vw; line-height:1.5vw; font-weight:400; margin-bottom:7vh;   }
.small-text2 P { margin-bottom: 2vh; font-size:4.5vw; line-height:6vw; width:100%;}


.section-team { width:94%; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 3vw;   margin: 0vh 0 16vh 3%; padding: 0vh 0vh 0vh 0vh; }

/*.team-box { width:45%; padding:0vw 0vw 5vw 0vw; background:#111; border-radius:7vw; color:#fff; font-size:4vw; font-weight:500;
	background: linear-gradient(150deg, rgba(50, 50, 50, 1) 0%, rgba(20, 20, 20, 1) 40%, rgba(10, 10, 10, 1) 100%);
	box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25)}
.team-box img { width:100%; height:auto;  border-radius: 5vw; margin-bottom:15px; filter: grayscale(100%);}
.team-box a { color:#fff; text-decoration:none; display:block; width:100%; background-image:url(images/linkedin.png); background-size: auto 40%; background-repeat:no-repeat; background-position: bottom center; text-align:center; padding-bottom:14vw;}
.team-box Span {display:block; width:100%; color:#ccc; font-size:3vw; font-weight:300; margin-top:1.0vw;}
*/

.team-box { width:45%; padding:0vw 0vw 13vw 0vw; display:flex;  align-items: flex-end;  background:#000; border-radius:7vw; position:relative;
	background: linear-gradient(150deg, rgba(50, 50, 50, 1) 0%, rgba(20, 20, 20, 1) 40%, rgba(10, 10, 10, 1) 100%);
	box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25)}

.gradient-overlay { position:absolute;  width:100%; z-index:1; bottom:0; left:0;  border-radius: 0 0 7vw 7vw; } 	
.team-box img { width:100%; height:auto;  border-radius: 7vw; }
.bw {filter: grayscale(100%);}

.team-box .name { position:absolute; bottom:8vw; left:2.5vw;  width:64%; z-index:1;  font-size:4.8vw; font-weight:550; line-height:5.5vw; color:#fff;}
.name Span { color:#CCFB55; display:block; width:100%;}
.position {display:block; margin-top:5px; width:100%; color:#aaa; font-size:3vw; font-weight:300;   line-height:3.5vw;  color:#ccc;}
.team-box a { position:absolute; z-index:3;  width:18%; bottom:2.5vw; right:2.5vw; filter: }



.home-team-section { display:block; float:left;  width:100%; text-align:center;  margin:0vw 0 20vw 0;}
.home-team-section a { width:auto;  border:2px #000 solid; border-radius: 15vw;  font-size:5vw; font-weight:500; color:#000; padding:2vw 6vw;}

.section-contact {width:80%; display: flex; flex-direction: column; align-items: center;  margin: 10vh 0 16vh 10%; border-radius:30px; padding: 10vw 7% 10vw 7%; color:#fff;
	background: #474747;
	background: linear-gradient(150deg, rgba(50, 50, 50, 1) 0%, rgba(20, 20, 20, 1) 40%, rgba(10, 10, 10, 1) 100%);
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	} 
.contact-left { width:100%;  }
.contact-left img { width:30%; margin-bottom:10vw}
.contact-right { width:100%;}
.contact-right H2 {font-family: outfit; font-size:6vw; font-weight:500; margin-bottom:1.5vh;}
.contact-right P {width: 100%; font-size:4vw;  }
.contact-right span {width: 100%; display:block; margin:3vh 0 2vh 0; font-size:4vw; font-weight:600; }
.contact-right a {background:#fff; display:block; float:left; width:auto; box-sizing: border-box; padding: 3vw 5vw; border-radius: 50px; color:#000; font-family: outfit; font-size:4vw; font-weight:500;}
.contact-right a:hover { background:#000; color:#fff;}


.footer-left { width:100%; display:block; float:left; background:#000; color:#fff; padding:3vh 0 1vh 3vw;  font-size:4vw; text-align:center; }
.footer-right { width:100%; display:block; float:left; background:#000; color:#fff; padding:1vh 3vw 5vh 0; text-align:right;  font-size:4vw; text-align:center;}
}

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

.banner { background-color:#000; background-image:url(images/banner-bg.png); background-repeat:no-repeat; background-position: top right; background-size: cover; height:100vh; position:relative; }

.banner-inner { background-color:#000; background-image:url(images/bg-inner.png); background-repeat:no-repeat; background-position: top right; background-size: cover; height:50vh; position:relative; }
.bannertext-inner  { width:100%; padding:0 10%; left:0%; bottom: 30%; position:absolute; text-align:center;  color:#fff; font-size:6.5vw; line-height:7vw; font-family: outfit; font-weight:500;}
.team-inner { width:70%; text-align:center;  font-family: outfit; font-size:4vw; font-weight:500; margin: 8vh 0 4vh 15%; display:block; float:left;}
.team-para { width:100%; text-align:center;  font-family: outfit; font-size:2.5vw; font-weight:500; padding:0 10%; margin: 0vh 0 6vh 0; display:block; float:left;}


	
.tnb { width:96%; margin-left: 2%; padding-top:4vh; display:flex; flex-direction: row; justify-content:space-between; align-items: center;}
.logo { height:4.5vh;}
.links a { display:block; float:right; background:#fff; padding: 1.5vh 2.5vh; border-radius: 50px; color:#000; font-family: outfit; font-weight:500;}
.links a:hover { background:#CCFB55; color:#000;}
.banner-text  { width:100%; padding:0 10%; left:0%; bottom: 22%; position:absolute; text-align:center;  color:#fff; font-size:6.5vw; line-height:7vw; font-family: outfit; font-weight:500;}
.banner-text Div { width:100%; padding: 0 0%;}
.banner-text img { margin-top:12vh; width:100%;}
.banner-text br { display:none;}


.intro-text { font-family: outfit; font-size:3vw; line-height:3.5vw; font-weight:500; color:#000; padding:7vw 10vw 7vw 10vw; text-align:center;}



.heading1 { width:100%; text-align:center;  font-family: outfit; font-size:6vw; font-weight:500; margin-bottom:5vh; }

/*.section-whatwedo { width:100%; padding:0 25%;  display:flex; flex-direction: row; flex-wrap: wrap;  }
.whatwedo-box {  width:45%; margin:2.5%;    height:50vh;  background:#000; border-radius: 50px; display:flex; flex-wrap: wrap;  align-content: flex-end;}
.whatwedo-box-content { width:100%; text-align:left; }
.whatwedo-box-content  H1 {font-family: outfit; font-size:1.9vw; line-height:2.4vw; font-weight:400; display:block; width:80%; margin-bottom:2vh; }
.whatwedo-box-content  P {font-family: outfit; font-size:0.9vw; line-height:1.3; font-weight:300;}*/

.section-whatwedo { width:100%; padding:0 5%; display:block; float:left; margin-bottom:6vw;  }
.whatwedo-box {  width:45%; height:50vw; margin:2.5%; display:block; float:left; position:relative;   background:#000; border-radius: 40px; }
.whatwedo-box-content { width:86%; position:absolute; bottom:5vw; left:7%; }
.whatwedo-box-content  H1 {font-family: outfit; font-size:4vw; line-height:4vw; font-weight:500; display:block; width:80%; margin-bottom:2vh; }
.whatwedo-box-content  P {font-family: outfit; font-size:2vw; line-height:2.8vw; font-weight:300;} 

.box1, .box3, .box4 { color:#fff;  background-size:100% auto; background-position: left top; background-repeat:no-repeat; background-color: #000; 
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);}
.box1 { background-image:url(images/bg1.png);}
.box3 { background-image:url(images/bg3.png);}
.box4 { background-image:url(images/bg4.png);}

.box2 { /*background-image:url(images/bg2.png);*/ background-color:#CCFB55; background-size:25% auto; background-position: 90% 5%; background-repeat:no-repeat;  
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);}

.para-text { font-family: outfit; font-size:3vw; font-weight:450; color:#000; padding:10vw 10vw 10vw 10vw; text-align:center;}

.partners-section { width:100%; padding:0 5%;  margin:0 0 18vw 0; display:flex; flex-direction: row; flex-flow: wrap; gap: 20px; align-items:center; justify-content: center;}
.partners-section a { width:40%;}
.partners-section img { width:100%; height:auto; border-radius: 15px;
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.10);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.10);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.10);}

.gate6-heading { width:100%; text-align:center;  font-family: outfit; font-size:5vw; font-weight:500; margin-bottom:4vw; display:block; float:left;}

.gate6 { width:100%; display:flex; flex-direction: column; align-items:center; text-align:center; padding:4vw 10vw 5vh 10vw; margin:0;}
.gate6 img { width:30vw;}
.gate6 P {  padding:0; margin:0; font-family: outfit; font-size:3vw; line-height:4vw; font-weight:450; color:#000; padding:8vw 0vw 10vw 0vw; text-align:center;}
/*.gate6 a {  display:block; float:left; width:auto; box-sizing: border-box; padding: 3vw 6vw; margin:10vw 0vw 10vw 0vw; border-radius: 50px; color:#000; font-family: outfit; font-size:3vw; font-weight:500; background:#000; color:#fff; 
	 box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.50);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);}*/



.section-industries { width:100%; display:block; float:left; padding: 7vh 0 10vh 0; margin:0 0 10vh 0; background-color:#000; background-image:url(images/bg-industries.png); background-position:left top; background-repeat:no-repeat; background-size: cover;  position:relative;}

.heading2 { width:100%; display:block; float:left; text-align:center;  font-family: outfit; font-size:6vw; font-weight:500; margin:3vh 0 1vw 0; display:block; float:left; color:#fff;}
.small-text { width:100%; padding:0 20%; text-align:center;  font-family: outfit; font-size:2vw; line-height:2.5vw; font-weight:400; margin-bottom:3vw; color:#fff; }

.section-industries-wrap { width:94%; display:block; float:left; margin: 0 0 0vh 3%;  padding-top:5vw;    }
.section-industries-wrap-content { width:31%;  margin:0 1.166666% 0; height:40vw; display:block; float:left; border-radius: 25px; position: relative; 
	}
.card1 {background: #474747;
	background: linear-gradient(150deg, rgba(0, 0, 0, 1) 0.5%, rgba(20, 20, 20, 0.9) 40%, rgba(10, 10, 10, 1) 100%);
	color:#fff;}
.card2 {background: #CCFB55;}		

.section-industries-wrap-content Div { position:absolute; left: 7%; bottom: 11%; width:85%;}
.section-industries-wrap-content img{ width:4vh; height:auto; position:absolute; right: 9%; top: 8%;}
.section-industries-wrap-content Div H2 { font-family: outfit; font-size:2.7vw; font-weight:500; margin:0 0 2vw 0;}
.section-industries-wrap-content Div P { font-size:1.8vw; line-height:2.5vw;}



.heading3 { width:100%; text-align:center;  font-family: outfit; font-size:6vw; font-weight:500; margin-bottom:4vh; display:block; float:left;}
.small-text2 { width:100%; padding:0 10%; text-align:center;  font-family: outfit; font-size:2.5vw; line-height:3.5vw; font-weight:400; margin-bottom:3vw;   }
.small-text2 P { margin-bottom: 2vh;}


.section-team { width:90%; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 3vw;   margin: 15vh 0 16vh 5%; padding: 3vh 0vh 0vh 0vh; }

/*.team-box { width:30%; padding:0vw 0vw 3vw 0vw; background:#111; border-radius:3.5vw; color:#fff; font-size:2.2vw; font-weight:500;
	background: linear-gradient(150deg, rgba(50, 50, 50, 1) 0%, rgba(20, 20, 20, 1) 40%, rgba(10, 10, 10, 1) 100%);
	box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25)}
.team-box img { width:100%; height:auto;  border-radius: 2.5vw; margin-bottom:10px; filter: grayscale(100%);}
.team-box a { width:90%; margin-left: 5%; box-sizing: border-box; color:#fff; text-decoration:none; display:block;  background-image:url(images/linkedin.png); background-size: auto 80%; background-repeat:no-repeat; background-position: center right;}
.team-box Span {display:block; width:100%; color:#ccc; font-size:1.5vw; font-weight:300; margin-top:0.2vw;}*/


.team-box { width:45%; padding:0vw 0vw 20vw 0vw; display:flex;  align-items: flex-end;  background:#000; border-radius:7vw; position:relative;
	background: linear-gradient(150deg, rgba(50, 50, 50, 1) 0%, rgba(20, 20, 20, 1) 40%, rgba(10, 10, 10, 1) 100%);
	box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25)}

.gradient-overlay { position:absolute;  width:100%; z-index:1; bottom:0; left:0;  border-radius: 0 0 7vw 7vw; } 	
.team-box img { width:100%; height:auto;  border-radius: 7vw; }
.bw {filter: grayscale(100%);}

.team-box .name { position:absolute; bottom:8vw; left:2.5vw;  width:65%; z-index:1;  font-size:5.5vw; font-weight:500; line-height:6vw; color:#fff;}
.name Span { color:#CCFB55;}
.position {display:block; margin-top:5px; width:100%; color:#aaa; font-size:3vw; font-weight:300;   line-height:3.5vw;  color:#ccc;}
.team-box a { position:absolute; z-index:3;  width:18%; bottom:2.5vw; right:2.5vw; filter: }


.home-team-section { display:block; float:left;  width:100%; text-align:center;  margin:10vw 0 20vw 0;}
.home-team-section a { width:auto;  border:2px #000 solid; border-radius: 15vw;  font-size:5vw; font-weight:500; color:#000; padding:2vw 6vw;}

.section-contact {width:80%; display: flex; align-items: center;  margin: 10vw 0 10vw 10%; border-radius:30px; padding: 5vh 6vh 8vh 6vh; color:#fff;
	background: #474747;
	background: linear-gradient(150deg, rgba(50, 50, 50, 1) 0%, rgba(20, 20, 20, 1) 40%, rgba(10, 10, 10, 1) 100%);
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	} 
.contact-left { width:30%; text-align:center; }
.contact-left img { width:70%;}
.contact-right { width:70%; padding-left:5vh }
.contact-right H2 {font-family: outfit; font-size:3vw; font-weight:500; margin-bottom:1.5vh;}
.contact-right P {width: 100%; font-size:2vw; line-height:2.5vw; }
.contact-right span {width: 100%; display:block; margin:5vh 0 2vh 0; font-size:2vw; line-height:2.5vw; font-weight:600; }
.contact-right a {background:#fff; display:block; float:left; width:auto; box-sizing: border-box; padding: 1vw 2vw; border-radius: 50px; color:#000; font-family: outfit; font-size:2.5vw; font-weight:500;}
.contact-right a:hover { background:#CCFB55; color:#000;}


.footer-left { width:60%; display:block; float:left; background:#000; color:#fff; padding:2vh 0 2vh 3vw;  font-size:1.8vw; }
.footer-right { width:40%; display:block; float:left; background:#000; color:#fff; padding:2vh 3vw 2vh 0; text-align:right;  font-size:1.8vw;}
}

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

.banner { background-color:#000; background-image:url(images/banner-bg.png); background-repeat:no-repeat; background-position: top right; background-size: cover; height:100vh; position:relative; }

.banner-inner { background-color:#000; background-image:url(images/bg-inner.png); background-repeat:no-repeat; background-position: top right; background-size: cover; height:50vh; position:relative; }
.bannertext-inner  { width:100%; padding:0 10%; left:0%; bottom: 30%; position:absolute; text-align:center;  color:#fff; font-size:5.5vw; line-height:6.5vw; font-family: outfit; font-weight:500;}
.team-inner { width:70%; text-align:center;  font-family: outfit; font-size:4vw; font-weight:500; margin: 8vh 0 4vh 15%; display:block; float:left;}
.team-para { width:100%; text-align:center;  font-family: outfit; font-size:2.0vw; font-weight:500; padding:0 10%; margin: 0vh 0 6vh 0; display:block; float:left;}



	
.tnb { width:96%; margin-left: 2%; padding-top:4vh; display:flex; flex-direction: row; justify-content:space-between; align-items: center;}
.logo { height:4.5vh;}
.links a { display:block; float:right; background:#fff; padding: 1.5vh 2vh;  border-radius: 50px; color:#000; font-family: outfit; font-weight:500;}
.links a:hover { background:#CCFB55; color:#000;}
.banner-text  { width:100%; padding:0 5%; left:0%; bottom: 16%; position:absolute; text-align:center;  color:#fff; font-size:5.5vw; line-height:6.5vw; font-family: outfit; font-weight:500;}
.banner-text Div { width:100%; padding: 0 7%;}
.banner-text img { margin-top:12vh; width:100%;}
.banner-text br { display:none;}


.intro-text { font-family: outfit; font-size:2vw; line-height:2.5vw; font-weight:500; color:#000; padding:5vw 20vw 5vw 20vw; text-align:center;}



.heading1 { width:100%; text-align:center;  font-family: outfit; font-size:5vw; font-weight:500; margin-bottom:5vh; }

/*.section-whatwedo { width:100%; padding:0 25%;  display:flex; flex-direction: row; flex-wrap: wrap;  }
.whatwedo-box {  width:45%; margin:2.5%;    height:50vh;  background:#000; border-radius: 50px; display:flex; flex-wrap: wrap;  align-content: flex-end;}
.whatwedo-box-content { width:100%; text-align:left; }
.whatwedo-box-content  H1 {font-family: outfit; font-size:1.9vw; line-height:2.4vw; font-weight:400; display:block; width:80%; margin-bottom:2vh; }
.whatwedo-box-content  P {font-family: outfit; font-size:0.9vw; line-height:1.3; font-weight:300;}*/

.section-whatwedo { width:100%; padding:0 10%; display:block; float:left; margin-bottom:6vw;  }
.whatwedo-box {  width:45%; margin:2.5%;  height:40vw; display:block; float:left; position:relative;  background:#000; border-radius: 40px; }
.whatwedo-box-content { width:86%; position:absolute; bottom:4.5vw; left:7%; }
.whatwedo-box-content  H1 {font-family: outfit; font-size:3.5vw; line-height:3.5vw; font-weight:500; display:block; width:80%; margin-bottom:2vh; }
.whatwedo-box-content  P {font-family: outfit; font-size:1.8vw; line-height:2vw; font-weight:300;} 

.box1, .box3, .box4 { color:#fff;  background-size:100% auto; background-position: left top; background-repeat:no-repeat; background-color: #000; 
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);}
.box1 { background-image:url(images/bg1.png);}
.box3 { background-image:url(images/bg3.png);}
.box4 { background-image:url(images/bg4.png);}

.box2 { /*background-image:url(images/bg2.png);*/ background-color:#CCFB55; background-size:25% auto; background-position: 90% 5%; background-repeat:no-repeat;  
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);}

.para-text { font-family: outfit; font-size:2vw; line-height:2.5vw; font-weight:450; color:#000; padding:10vw 15vw 10vw 15vw; text-align:center;}

.partners-section { width:100%; padding:0 5%;  margin:0 0 10vw 0; display:flex; flex-direction: row; flex-flow: wrap; gap: 20px; align-items:center; justify-content: center;}
.partners-section a { width:30%;}
.partners-section img { width:100%; height:auto; border-radius: 15px;
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.10);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.10);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.10);}
	

.gate6-heading { width:100%; text-align:center;  font-family: outfit; font-size:4vw; font-weight:500; margin-bottom:2vw; margin-top:6vw; display:block; float:left;}

.gate6 { width:100%; display:flex; flex-direction: column; align-items:center; text-align:center; padding:4vw 10vw 5vh 10vw; margin:0;}
.gate6 img { width:20vw;}
.gate6 P {  padding:0; margin:0; font-family: outfit; font-size:2vw; line-height:3vw; font-weight:450; color:#000; padding:4vw 0vw 5vw 0vw; text-align:center;}
/*.gate6 a {  display:block; float:left; width:auto; box-sizing: border-box; padding: 2vw 4vw; margin:4vw 0vw 10vw 0vw; border-radius: 50px; color:#000; font-family: outfit; font-size:2vw; font-weight:500; background:#000; color:#fff; 
	 box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.40);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.20);}*/
	

.section-industries { width:100%; display:block; float:left; padding: 11vh 0 15vh 0; margin:0 0 10vh 0; background-color:#000; background-image:url(images/bg-industries.png); background-position:left top; background-repeat:no-repeat; background-size: 103% auto;  position:relative;}

.heading2 { width:100%; display:block; float:left; text-align:center;  font-family: outfit; font-size:5vw; font-weight:500; margin:3vh 0 1vw 0; display:block; float:left; color:#fff;}
.small-text { width:100%; padding:0 35%; text-align:center;  font-family: outfit; font-size:1.2vw; line-height:1.5vw; font-weight:400; margin-bottom:3vw; color:#fff; }

.section-industries-wrap { width:70%; display:block; float:left; margin: 0 0 0vh 15%;     }
.section-industries-wrap-content { width:30%; height:25vw; display:block; float:left; margin:0 1.66666% 0vh; border-radius: 40px; position: relative; 
	}
.card1 {background: #474747;
	background: linear-gradient(150deg, rgba(0, 0, 0, 1) 0.5%, rgba(20, 20, 20, 0.9) 40%, rgba(10, 10, 10, 1) 100%);
	color:#fff;}
.card2 {background: #CCFB55;}		

.section-industries-wrap-content Div { position:absolute; left: 7%; bottom: 11%; width:85%;}
.section-industries-wrap-content img{ width:7vh; height:auto; position:absolute; right: 9%; top: 8%;}
.section-industries-wrap-content Div H2 { font-family: outfit; font-size:2vw; font-weight:500; margin:0vh 0 2vh 0;}
.section-industries-wrap-content Div P { font-size:1.1vw; line-height:1.4vw;}



.heading3 { width:100%; text-align:center;  font-family: outfit; font-size:5vw; font-weight:500; margin-bottom:4vh; display:block; float:left;}
.small-text2 { width:100%; padding:0 20%; text-align:center;  font-family: outfit; font-size:1.5vw; line-height:2vw; font-weight:400; margin-bottom:7vh;   }
.small-text2 P { margin-bottom: 2vh;}

.section-team { width:70%; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 3vw;   margin: 15vh 0 16vh 15%; padding: 3vh 0vh 0vh 0vh; }

/*.team-box { width:30%; padding:0vw 0vw 2.5vw 0vw; background:#111; border-radius:2.5vw; color:#fff; font-size:1.6vw; font-weight:500;
	background: linear-gradient(150deg, rgba(50, 50, 50, 1) 0%, rgba(20, 20, 20, 1) 40%, rgba(10, 10, 10, 1) 100%);
	box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.25)}
.team-box img { width:100%; height:auto;  border-radius: 1.5vw; padding-bottom:15px; filter: grayscale(100%);}
.team-box a { width:90%; margin-left: 5%; color:#fff; text-decoration:none; display:block; background-image:url(images/linkedin.png); background-size: auto 80%; background-repeat:no-repeat; background-position: center right;}
.team-box Span {display:block; width:100%; color:#ccc; font-size:1.1vw; font-weight:300; margin-top:0.2vw;}
*/

.gradient-overlay { position:absolute;  width:100%; z-index:1; bottom:0; left:0;  border-radius: 0 0 2.5vw 2.5vw; } 	
.team-box img { width:100%; height:auto;  border-radius: 2.5vw; }
.bw {filter: grayscale(100%);}

.team-box .name { position:absolute; width:60%; z-index:1; bottom:3vw; left:1.2vw; font-size:2.8vw; font-weight:500; line-height:2.8vw;}
.name Span { color:#CCFB55;}
.position {display:block; margin-top:10px; width:100%; color:#ccc; font-size:1.3vw; font-weight:300;   line-height:1.3vw;  color:#fff;}
.team-box a { position:absolute; z-index:3;  width:13%; bottom:1.2vw; right:1.2vw; filter: }

.home-team-section { display:block; float:left;  width:100%; text-align:center;  margin:5vw 0 12vw 0;}
.home-team-section a { width:auto;  border:2px #000 solid; border-radius: 15vw;  font-size:3vw; font-weight:500; color:#000; padding:2vw 6vw;}


.section-contact {width:70%; display: flex; align-items: center;  margin: 7vw 0 10vw 15%; border-radius:30px; padding: 5vh 6vh 6vh 6vh; color:#fff;
	background: #474747;
	background: linear-gradient(150deg, rgba(50, 50, 50, 1) 0%, rgba(20, 20, 20, 1) 40%, rgba(10, 10, 10, 1) 100%);
	box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.45);
	} 
.contact-left { width:30%; text-align:center; }
.contact-left img { width:70%;}
.contact-right { width:70%; padding-left:5vh }
.contact-right H2 {font-family: outfit; font-size:2vw; font-weight:500; margin-bottom:1.5vh;}
.contact-right P {width: 100%; font-size:1.3vw; line-height:1.8vw; }
.contact-right span {width: 100%; display:block; margin:5vh 0 2vh 0; font-size:1.3vw; line-height:1.3vw; font-weight:600; }
.contact-right a {background:#fff; display:block; float:left; width:auto; box-sizing: border-box; padding: 1vw 2vw; border-radius: 50px; color:#000; font-family: outfit; font-size:1.8vw; font-weight:500;}
.contact-right a:hover { background:#CCFB55; color:#000;}


.footer-left { width:60%; display:block; float:left; background:#000; color:#fff; padding:2vh 0 2vh 3vw;  font-size:1.5vw; }
.footer-right { width:40%; display:block; float:left; background:#000; color:#fff; padding:2vh 3vw 2vh 0; text-align:right;  font-size:1.5vw;}
}





/* ── Contact Modal ── */
.modal-overlay {
  display: none;
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.78);
  z-index: 2000;
  align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal-box {
  background: linear-gradient(150deg, rgba(50,50,50,1) 0%, rgba(25,25,25,1) 40%, rgba(10,10,10,1) 100%);
  border-radius: 30px;
  padding: 4vh 3vw 4vh 3vw;
  width: 90%; max-width: 540px;
  position: relative; color: #fff;
  box-shadow: 0 0 96px rgba(0,0,0,0.7);
  box-sizing: border-box;
}

.modal-close {
  position: absolute; top: 2vh; right: 1.5vw;
  background: none; border: none; color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer; padding: 0;
}
.modal-close:hover { color: #CCFB55; }

.modal-box h2 { font-family: outfit; font-size: 1.8vw; font-weight: 500; margin-bottom: 0.8vh; }
.modal-box > #modalFormContent > p { font-family: outfit; font-size: 1vw; color: #bbb; margin-bottom: 2.5vh; }

.form-row { display: flex; gap: 4%; }
.form-row .form-group { width: 48%; }

.form-group { margin-bottom: 1.6vh; }
.form-group input,
.form-group textarea {
  width: 100%; box-sizing: border-box;
  background: #fff; border: none; border-radius: 12px;
  padding: 1.1vh 1.2vw;
  font-family: outfit; font-size: 1vw; color: #000;
}
.form-group textarea { resize: vertical; min-height: 90px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #666; opacity: 1; }

.validation-msg { color: #ff7070; font-size: 0.9vw; min-height: 1.4em; margin-bottom: 1vh; }

.send-btn {
  background: #CCFB55; border: none; border-radius: 50px;
  padding: 1.1vh 2.5vw;
  font-family: outfit; font-size: 1.1vw; font-weight: 600; color: #000;
  cursor: pointer; margin-top: 0.5vh;
}
.send-btn:hover { background: #b8e040; }

#modalSuccess { display: none; text-align: center; padding: 4vh 0 2vh; }
.success-icon {
  font-size: 3.5vw; color: #CCFB55;
  background: rgba(204,251,85,0.15); border-radius: 50%;
  width: 5vw; height: 5vw; line-height: 5vw;
  margin: 0 auto 2.5vh; display: flex; align-items: center; justify-content: center;
  font-size: 2.5vw;
}
#modalSuccess h3 { font-family: outfit; font-size: 2vw; font-weight: 500; margin-bottom: 1.5vh; }
#modalSuccess p  { font-family: outfit; font-size: 1.1vw; color: #bbb; margin-bottom: 3vh; }

@media only screen and (max-width: 768px) {
  .modal-box { padding: 6vw 6vw; border-radius: 20px; }
  .modal-box h2 { font-size: 5.5vw; }
  .modal-box > #modalFormContent > p { font-size: 3.8vw; }
  .form-row { flex-direction: column; gap: 0; }
  .form-row .form-group { width: 100%; }
  .form-group input, .form-group textarea { font-size: 3.8vw; padding: 1.5vh 4vw; border-radius: 10px; }
  .send-btn { font-size: 4vw; padding: 1.5vh 8vw; }
  .validation-msg { font-size: 3.5vw; }
  .success-icon { width: 14vw; height: 14vw; line-height: 14vw; font-size: 7vw; }
  #modalSuccess h3 { font-size: 5.5vw; }
  #modalSuccess p  { font-size: 3.8vw; }
  .modal-close { font-size: 1.8rem; right: 4vw; }
}

/* ── Entrance animation ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.banner-text  { animation: fadeSlideUp 0.9s ease forwards; }
.intro-text   { animation: fadeSlideUp 0.9s ease 0.15s both; }
.heading1     { animation: fadeSlideUp 0.7s ease 0.1s both; }

/* ── What We Do cards: lift + shadow on hover ── */
.whatwedo-box {
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.28s cubic-bezier(0.25,0.46,0.45,0.94);
}
.box1:hover, .box3:hover, .box4:hover {
  transform: translateY(-12px);
  box-shadow: 0 32px 72px rgba(0,0,0,0.65) !important;
}
.box2:hover {
  transform: translateY(-12px);
  box-shadow: 0 32px 72px rgba(0,0,0,0.22) !important;
}

/* ── Industries cards: lift + shadow on hover ── */
.section-industries-wrap-content {
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.28s cubic-bezier(0.25,0.46,0.45,0.94);
}
.section-industries-wrap-content:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 56px rgba(0,0,0,0.55);
}

/* ── Partner logos: scale + brighten ── */
.partners-section a {
  transition: transform 0.25s ease, filter 0.25s ease;
  display: inline-block;
}
.partners-section a:hover {
  transform: scale(1.08);
  filter: brightness(1.1);
}

/* ── Gate6 logo: scale ── */
.gate6 > a { transition: transform 0.25s ease; display: inline-block; }
.gate6 > a:hover { transform: scale(1.06); }

/* ── "Meet Our Team" button: lift ── */
.home-team-section a {
  transition: background 0.22s ease, color 0.22s ease,
              transform 0.22s ease, box-shadow 0.22s ease;
}
.home-team-section a:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
}

/* ── Contact email button: lift ── */
.contact-right a {
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.contact-right a:hover { transform: translateY(-3px); }

/* ── Banner height overrides ── */
.banner       { height: 62vh; min-height: 360px; }

/* Keep banner text visible at all viewport sizes */
.banner-text {
  bottom: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding-top: 68px !important;
  font-size: clamp(22px, 4vw, 62px) !important;
  line-height: 1.25 !important;
}
.banner-inner { height: 22vh; margin-top: 68px; }

@media only screen and (max-width: 768px) {
  .banner       { height: 65vh; }
  .banner-inner { height: 18vh; }
}

/* ── Fixed Navigation (overrides all breakpoint .tnb rules) ── */
.tnb {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 68px;
  padding: 0 2.5%;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1500;
}

.nav-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.nav-item { position: relative; }

.nav-link-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  color: #fff; font-family: outfit; font-size: 15px; font-weight: 400;
  padding: 9px 17px; border-radius: 50px;
  white-space: nowrap; text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.nav-link-btn:hover { background: rgba(255,255,255,0.1); color: #CCFB55; }

.nav-arrow { font-size: 0.65em; opacity: 0.7; }

.dropdown-panel {
  display: none;
  position: absolute; top: calc(100% + 10px); left: 0;
  background: #111; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 8px 0;
  min-width: 255px; z-index: 2000;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
}
.dropdown-panel.open { display: block; }

.dropdown-panel a {
  display: block; padding: 12px 20px;
  color: #ccc; font-family: outfit; font-size: 14px; font-weight: 300;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.dropdown-panel a:hover { background: rgba(204,251,85,0.1); color: #CCFB55; }

.contact-btn { background: #fff; color: #000; font-weight: 500; margin-left: 8px; }
.contact-btn:hover { background: #CCFB55; color: #000; }

/* Hamburger always hidden — all nav tabs always visible */
.hamburger { display: none; }

@media only screen and (max-width: 900px) {
  .nav-link-btn { font-size: 13px; padding: 7px 10px; }
  .dropdown-panel a { font-size: 13px; }
  .contact-btn { margin-left: 4px; }
}

@media only screen and (max-width: 600px) {
  .nav-link-btn { font-size: 11px; padding: 5px 7px; }
  .contact-btn { margin-left: 2px; }
}

/* Inner page header */
.inner-header {
  height: 40vh; min-height: 260px;
  margin-top: 68px;
  background: #000 url(images/bg-inner.png) no-repeat top right / cover;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.inner-header-text {
  color: #fff; font-family: outfit; font-size: 4vw; font-weight: 500;
  text-align: center; padding: 0 10%;
}
@media only screen and (max-width: 768px) {
  .inner-header-text { font-size: 8vw; }
}

/* Placeholder body for stub pages */
.page-placeholder {
  min-height: 35vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: outfit; text-align: center; padding: 6vw 10%;
}
.page-placeholder h2 { font-size: 2vw; font-weight: 500; margin-bottom: 1.5vh; }
.page-placeholder p  { font-size: 1.2vw; color: #666; }
@media only screen and (max-width: 768px) {
  .page-placeholder h2 { font-size: 6vw; }
  .page-placeholder p  { font-size: 4vw; }
}

/* ── Inner page content ── */
.page-content {
  max-width: 1120px; margin: 0 auto;
  padding: 7vh 6% 4vh; font-family: outfit;
  animation: fadeSlideUp 0.7s ease both;
}
.content-lead {
  font-size: clamp(17px, 1.55vw, 25px); line-height: 1.6;
  text-align: center; color: #2a2a2a; font-weight: 400;
  max-width: 880px; margin: 0 auto 2vh;
}
.content-section {
  max-width: 1120px; margin: 0 auto;
  padding: 4vh 6% 5vh; font-family: outfit;
}
.content-section-title {
  font-size: clamp(23px, 2.3vw, 38px); font-weight: 500;
  text-align: center; margin-bottom: 1vh; color: #000;
}
.content-section-sub {
  font-size: clamp(15px, 1.2vw, 19px); color: #666; font-weight: 300;
  text-align: center; max-width: 760px; margin: 0 auto 5vh; line-height: 1.55;
}

.content-cards { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; }
.content-card {
  flex: 1 1 320px; max-width: 500px; box-sizing: border-box;
  border-radius: 26px; padding: 34px 32px; color: #fff;
  background: linear-gradient(150deg, rgba(50,50,50,1) 0%, rgba(20,20,20,1) 45%, rgba(10,10,10,1) 100%);
  box-shadow: 0 0 60px rgba(0,0,0,0.18);
  transition: transform 0.28s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.28s cubic-bezier(0.25,0.46,0.45,0.94);
}
.content-card:hover { transform: translateY(-10px); box-shadow: 0 28px 64px rgba(0,0,0,0.4); }
.content-card.accent { background: #CCFB55; color: #000; }
.content-card h3 { font-size: clamp(19px, 1.5vw, 24px); font-weight: 600; margin-bottom: 14px; }
.content-card.dark h3 span, .content-card h3 span { color: #CCFB55; }
.content-card.accent h3 span { color: #000; }
.content-card p { font-size: clamp(14px, 1.05vw, 17px); line-height: 1.55; font-weight: 300; }
.content-card ul { list-style: none; margin: 8px 0 0; padding: 0; }
.content-card li {
  font-size: clamp(14px, 1.05vw, 17px); line-height: 1.5; font-weight: 300;
  padding: 7px 0 7px 26px; position: relative;
}
.content-card li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: #CCFB55;
}
.content-card.accent li::before { background: #000; }

/* Tag pills (e.g. care settings) */
.tag-section { background: #000; padding: 7vh 6% 8vh; margin-top: 4vh; }
.tag-section .content-section-title,
.tag-section .content-section-sub { color: #fff; }
.tag-section .content-section-sub { color: #aaa; }
.tag-list { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 940px; margin: 0 auto; }
.tag-pill {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  color: #eee; font-family: outfit; font-size: clamp(13px, 1vw, 16px); font-weight: 300;
  padding: 11px 22px; border-radius: 50px;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.tag-pill:hover { background: #CCFB55; color: #000; border-color: #CCFB55; transform: translateY(-3px); }

/* ── Visual: end-to-end agent journey flow ── */
.flow-intro {
  text-align: center; font-family: outfit; max-width: 820px;
  margin: 0 auto; padding: 7vh 6% 2vh;
}
.flow-intro h2 { font-size: clamp(24px, 2.6vw, 44px); font-weight: 600; margin-bottom: 1.6vh; line-height: 1.2; }
.flow-intro h2 span { color: #6f8f1f; }
.flow-intro p { font-size: clamp(15px, 1.25vw, 20px); color: #555; font-weight: 300; line-height: 1.55; }

.flow {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 8px 0; max-width: 1180px; margin: 4vh auto 2vh; padding: 0 4%;
}
.flow-step {
  position: relative; flex: 0 0 25%; max-width: 25%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18px 10px;
  animation: fadeSlideUp 0.6s ease both;
}
.flow-step:nth-child(2){animation-delay:.05s}.flow-step:nth-child(3){animation-delay:.1s}
.flow-step:nth-child(4){animation-delay:.15s}.flow-step:nth-child(5){animation-delay:.2s}
.flow-step:nth-child(6){animation-delay:.25s}.flow-step:nth-child(7){animation-delay:.3s}
.flow-step:nth-child(8){animation-delay:.35s}
.flow-icon {
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(150deg, #2c2c2c 0%, #141414 60%, #0a0a0a 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  transition: transform 0.28s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.28s ease;
}
.flow-step:hover .flow-icon { transform: translateY(-7px) scale(1.04); box-shadow: 0 18px 40px rgba(0,0,0,0.32); }
.flow-icon svg { width: 38px; height: 38px; stroke: #CCFB55; }
.flow-num {
  position: absolute; top: -6px; right: -6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #CCFB55; color: #000;
  font-family: outfit; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.flow-step h4 { font-family: outfit; font-size: clamp(14px, 1.05vw, 17px); font-weight: 600; margin-bottom: 5px; }
.flow-step p  { font-family: outfit; font-size: clamp(12px, 0.85vw, 14px); font-weight: 300; color: #777; line-height: 1.4; max-width: 200px; }
/* connector arrow between steps in a row */
.flow-step:not(:nth-child(4n))::after {
  content: ""; position: absolute; top: 48px; right: -8px;
  width: 16px; height: 16px;
  border-top: 2px solid #cfcfcf; border-right: 2px solid #cfcfcf;
  transform: rotate(45deg);
}
.flow-step:last-child::after { display: none; }

/* ── Visual: agent card grid (Talkdesk-style) ── */
.agent-grid {
  display: flex; flex-wrap: wrap; gap: 22px; justify-content: center;
  max-width: 1180px; margin: 0 auto; padding: 2vh 4% 2vh;
}
.agent-card2 {
  flex: 1 1 250px; max-width: 290px; box-sizing: border-box;
  background: #fff; border: 1px solid #e7e7e7; border-radius: 22px;
  padding: 30px 26px; text-align: left;
  box-shadow: 0 6px 24px rgba(0,0,0,0.05);
  transition: transform 0.28s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.28s ease, border-color 0.28s ease;
  cursor: default;
}
.agent-card2:hover { transform: translateY(-10px); box-shadow: 0 26px 56px rgba(0,0,0,0.16); border-color: #CCFB55; }
.agent-card2 .ac-icon {
  width: 60px; height: 60px; border-radius: 16px;
  background: #0c0c0c; display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; transition: background 0.28s ease;
}
.agent-card2:hover .ac-icon { background: #CCFB55; }
.agent-card2 .ac-icon svg { width: 30px; height: 30px; stroke: #CCFB55; transition: stroke 0.28s ease; }
.agent-card2:hover .ac-icon svg { stroke: #000; }
.agent-card2 h3 { font-family: outfit; font-size: clamp(16px, 1.2vw, 20px); font-weight: 600; margin-bottom: 8px; color: #000; }
.agent-card2 p  { font-family: outfit; font-size: clamp(13px, 0.95vw, 15px); font-weight: 300; color: #666; line-height: 1.45; }

/* ── Visual: industry selector cards ── */
.industry-pick {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: center;
  max-width: 1100px; margin: 0 auto; padding: 2vh 4% 2vh;
}
.industry-tile {
  flex: 1 1 280px; max-width: 340px; box-sizing: border-box;
  border-radius: 26px; padding: 42px 32px; text-decoration: none;
  background: linear-gradient(150deg, #2c2c2c 0%, #141414 55%, #0a0a0a 100%);
  color: #fff; text-align: center; position: relative; overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.28s ease;
}
.industry-tile:hover { transform: translateY(-12px); box-shadow: 0 30px 64px rgba(0,0,0,0.4); }
.industry-tile .it-icon {
  width: 72px; height: 72px; border-radius: 50%; background: rgba(204,251,85,0.12);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.industry-tile .it-icon svg { width: 36px; height: 36px; stroke: #CCFB55; }
.industry-tile h3 { font-family: outfit; font-size: clamp(19px, 1.5vw, 25px); font-weight: 600; margin-bottom: 10px; }
.industry-tile p  { font-family: outfit; font-size: clamp(13px, 1vw, 16px); font-weight: 300; color: #bbb; line-height: 1.5; }
.industry-tile .it-go { display: inline-block; margin-top: 18px; color: #CCFB55; font-family: outfit; font-weight: 600; font-size: 14px; }

@media only screen and (max-width: 768px) {
  .flow-step { flex: 0 0 50%; max-width: 50%; }
  .flow-step:not(:nth-child(4n))::after { display: none; }
  .flow-step:not(:nth-child(2n))::after {
    content: ""; display: block; position: absolute; top: 48px; right: -8px;
    width: 14px; height: 14px; border-top: 2px solid #cfcfcf; border-right: 2px solid #cfcfcf; transform: rotate(45deg);
  }
  .flow-step:last-child::after { display: none; }
  .flow-icon { width: 70px; height: 70px; }
  .flow-icon svg { width: 32px; height: 32px; }
}

/* Closing CTA strip */
.content-cta {
  text-align: center; font-family: outfit;
  padding: 8vh 6%; background: #F2F2F2;
}
.content-cta h2 { font-size: clamp(22px, 2vw, 34px); font-weight: 500; margin-bottom: 2.5vh; }
.content-cta button {
  background: #000; color: #fff; border: none; cursor: pointer;
  font-family: outfit; font-size: clamp(15px, 1.2vw, 19px); font-weight: 500;
  padding: 15px 38px; border-radius: 50px;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.content-cta button:hover { background: #CCFB55; color: #000; transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.18); }

/* ═══════════════ ANIMATION & EYE-CANDY LAYER ═══════════════ */

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal.zoom { transform: scale(.92); }
.reveal.zoom.in { transform: none; }
.reveal.s1 { transition-delay: .08s; } .reveal.s2 { transition-delay: .16s; }
.reveal.s3 { transition-delay: .24s; } .reveal.s4 { transition-delay: .32s; }
.reveal.s5 { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Hero glow + lime headline pulse */
.banner { overflow: hidden; }
.banner::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 32% 62%, rgba(204,251,85,0.18), transparent 46%);
  animation: glowDrift 9s ease-in-out infinite alternate;
}
@keyframes glowDrift { from { transform: translate(0,0); opacity: .65; } to { transform: translate(7%,-6%); opacity: 1; } }
.banner-text { z-index: 2; }
.banner-text span { animation: limePulse 2.8s ease-in-out infinite; }
@keyframes limePulse { 0%,100% { text-shadow: 0 0 0 rgba(204,251,85,0); } 50% { text-shadow: 0 0 26px rgba(204,251,85,0.55); } }

/* Floating glow orbs in dark sections */
.section-industries, .tag-section, .section-contact { overflow: hidden; }
.section-industries::after, .tag-section::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 420px; height: 420px; border-radius: 50%;
  right: -90px; top: 12%;
  background: radial-gradient(circle, rgba(204,251,85,0.12), transparent 70%);
  animation: orbFloat 10s ease-in-out infinite alternate;
}
.tag-section::after { left: -90px; right: auto; top: auto; bottom: -10%; animation-duration: 13s; }
@keyframes orbFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(-6%,8%) scale(1.12); } }
.section-industries > *, .tag-section > * { position: relative; z-index: 1; }

/* Section title animated underline */
.flow-intro h2 { position: relative; display: inline-block; }
.flow-intro h2::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; height: 4px; width: 0;
  background: #CCFB55; border-radius: 3px; transform: translateX(-50%);
  transition: width .8s cubic-bezier(.16,.8,.3,1) .25s;
}
.flow-intro.in h2::after, .reveal.in .flow-intro h2::after { width: 64px; }

/* ── Animated agent FLOW LANES ── */
.lanes { max-width: 1180px; margin: 0 auto; padding: 1vh 5% 3vh; display: flex; flex-direction: column; gap: 26px; }
.flow-lane {
  display: flex; align-items: flex-start; gap: 32px;
  background: linear-gradient(135deg, #1e1e1e 0%, #131313 58%, #0a0a0a 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 28px; padding: 30px 34px; color: #fff;
  position: relative; overflow: hidden;
}
.flow-lane::before {
  content: ""; position: absolute; top: -45%; left: -8%;
  width: 300px; height: 300px; pointer-events: none;
  background: radial-gradient(circle, rgba(204,251,85,0.10), transparent 70%);
}
/* hover rule AFTER reveal so it wins on transform */
.flow-lane { transition: transform .32s cubic-bezier(.16,.8,.3,1), box-shadow .32s ease, border-color .32s ease; }
.flow-lane:hover { transform: translateY(-7px); box-shadow: 0 30px 64px rgba(0,0,0,0.5); border-color: rgba(204,251,85,0.4); }

.lane-head { flex: 0 0 210px; padding-top: 4px; }
.lane-badge {
  width: 52px; height: 52px; border-radius: 15px;
  background: rgba(204,251,85,0.12); display: flex; align-items: center; justify-content: center;
  margin-bottom: 15px; position: relative;
}
.lane-badge::after {
  content: ""; position: absolute; inset: 0; border-radius: 15px;
  border: 2px solid rgba(204,251,85,0.5); animation: badgePulse 2.4s ease-out infinite;
}
@keyframes badgePulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.lane-badge svg { width: 26px; height: 26px; color: #CCFB55; fill: none; }
.lane-head h3 { font-family: outfit; font-size: clamp(16px,1.25vw,21px); font-weight: 600; margin-bottom: 6px; }
.lane-head p { font-family: outfit; font-size: clamp(12px,.9vw,14px); font-weight: 300; color: #9a9a9a; line-height: 1.45; }

.pipe { flex: 1; display: flex; align-items: flex-start; min-width: 0; }
.pipe-step { flex: 1 1 0; min-width: 64px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pipe-ic {
  width: 56px; height: 56px; border-radius: 50%;
  background: #0c0c0c; border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s cubic-bezier(.16,.8,.3,1), background .3s ease, box-shadow .3s ease;
}
.pipe-ic svg { width: 24px; height: 24px; color: #CCFB55; fill: none; transition: color .3s ease; }
.pipe-step:hover .pipe-ic { background: #CCFB55; transform: translateY(-6px) scale(1.1); box-shadow: 0 12px 26px rgba(204,251,85,0.35); }
.pipe-step:hover .pipe-ic svg { color: #000; }
.pipe-step span { margin-top: 10px; font-family: outfit; font-size: 11.5px; font-weight: 400; color: #cdcdcd; line-height: 1.25; max-width: 92px; }
.pipe-conn {
  flex: 0 1 60px; height: 3px; min-width: 16px; margin-top: 26px;
  background: rgba(255,255,255,0.1); border-radius: 2px; position: relative; overflow: hidden;
}
.pipe-conn::after {
  content: ""; position: absolute; top: 0; left: -45%; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, #CCFB55, transparent);
  animation: pipeFlow 2.1s linear infinite;
}
@keyframes pipeFlow { to { left: 115%; } }

@media only screen and (max-width: 860px) {
  .flow-lane { flex-direction: column; align-items: stretch; gap: 22px; padding: 26px 24px; }
  .lane-head { flex: auto; }
  .pipe { flex-direction: column; align-items: flex-start; }
  .pipe-step { flex-direction: row; width: 100%; align-items: center; text-align: left; gap: 16px; }
  .pipe-step span { margin-top: 0; max-width: none; font-size: 14px; }
  .pipe-conn {
    flex: none; width: 3px; height: 24px; min-width: 0; margin: 0 0 0 27px;
  }
  .pipe-conn::after {
    left: 0; top: -45%; width: 100%; height: 45%;
    background: linear-gradient(180deg, transparent, #CCFB55, transparent);
    animation: pipeFlowV 2.1s linear infinite;
  }
  @keyframes pipeFlowV { to { top: 115%; } }
}

/* Industry-tailored flow icons gently pulse */
.flow-icon { animation: nodeFloat 3.5s ease-in-out infinite; }
.flow-step:nth-child(odd) .flow-icon { animation-delay: .4s; }
@keyframes nodeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.flow-step:hover .flow-icon { animation-play-state: paused; }

/* ═══════════════ HOMEPAGE HERO — SWAG LAYER ═══════════════ */

.banner { display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .9; }

.hero-content { position: relative; z-index: 2; width: 100%; max-width: 1180px; padding: 80px 4% 0; }
.hero-content .banner-text {
  position: static !important; top: auto !important; bottom: auto !important;
  transform: none !important; padding: 0 !important; width: 100%; margin: 0 auto;
}
.hero-sub {
  margin: 24px auto 0; max-width: 760px; color: #e0e0e0;
  font-family: outfit; font-weight: 300; font-size: clamp(15px, 1.5vw, 21px); line-height: 1.55;
  opacity: 0; animation: heroUp .9s ease .35s forwards;
}
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Hero pillar chips — the instant "what we do" hook */
.hero-pills { display: flex; flex-wrap: nowrap; gap: 10px; justify-content: center; margin-top: 32px; max-width: 100%; opacity: 0; animation: heroUp .9s ease .55s forwards; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 11px 17px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06);
  color: #fff; font-family: outfit; font-weight: 500; font-size: clamp(12px, .92vw, 13.5px);
  text-decoration: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: transform .25s, box-shadow .25s, background .25s, color .25s, border-color .25s;
  animation: chipSpot 8s ease-in-out infinite;
}
.hero-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #CCFB55; box-shadow: 0 0 9px #CCFB55; transition: background .25s, box-shadow .25s; }
.hero-pill:hover { animation: none; transform: translateY(-4px) scale(1.05); background: #CCFB55; color: #000; border-color: #CCFB55; box-shadow: 0 14px 32px rgba(204,251,85,0.42); }
.hero-pill:hover .dot { background: #000; box-shadow: none; }
.hero-pill:nth-child(1){animation-delay:0s} .hero-pill:nth-child(2){animation-delay:2s}
.hero-pill:nth-child(3){animation-delay:4s} .hero-pill:nth-child(4){animation-delay:6s}
@keyframes chipSpot {
  0%, 20% { background: #CCFB55; color: #000; border-color: #CCFB55; box-shadow: 0 0 28px rgba(204,251,85,0.45); }
  28%, 100% { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.22); box-shadow: none; }
}

/* Scroll cue */
.scroll-cue {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,0.45); border-radius: 14px;
  display: flex; justify-content: center; opacity: 0; animation: heroUp .9s ease 1s forwards;
}
.scroll-cue span { width: 4px; height: 8px; background: #CCFB55; border-radius: 2px; margin-top: 7px; animation: cueDot 1.6s ease-in-out infinite; }
@keyframes cueDot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ── What We Do: heading flourish + flashy staggered cards ── */
#whatwedo { scroll-margin-top: 84px; position: relative; }
.heading1 { position: relative; }
.heading1::after {
  content: ""; display: block; width: 0; height: 5px; margin: 16px auto 0;
  background: linear-gradient(90deg, #CCFB55, #8fbf2f); border-radius: 3px;
  transition: width .8s cubic-bezier(.16,.8,.3,1) .2s;
}
.heading1.in::after { width: 96px; }

/* container acts only as a trigger (no slide of its own) */
.section-whatwedo.reveal { opacity: 1; transform: none; }
.whatwedo-box { overflow: hidden; }
.whatwedo-box::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 65%; height: 100%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-18deg); transition: left .75s ease; pointer-events: none;
}
.whatwedo-box:hover::after { left: 150%; }
.whatwedo-box-content { z-index: 2; opacity: 0; }
.section-whatwedo.in .whatwedo-box-content { animation: cardUp .75s cubic-bezier(.16,.8,.3,1) forwards; }
.section-whatwedo.in .box1 .whatwedo-box-content { animation-delay: .06s; }
.section-whatwedo.in .box2 .whatwedo-box-content { animation-delay: .16s; }
.section-whatwedo.in .box3 .whatwedo-box-content { animation-delay: .26s; }
.section-whatwedo.in .box4 .whatwedo-box-content { animation-delay: .36s; }
@keyframes cardUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.ww-badge {
  position: absolute; top: 1.6vw; right: 1.8vw; z-index: 2;
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(204,251,85,0.14); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: transform .3s ease, background .3s ease;
}
.box2 .ww-badge { background: rgba(0,0,0,0.12); }
.section-whatwedo.in .ww-badge { animation: cardUp .75s cubic-bezier(.16,.8,.3,1) forwards; }
.section-whatwedo.in .box1 .ww-badge { animation-delay: .12s; }
.section-whatwedo.in .box2 .ww-badge { animation-delay: .22s; }
.section-whatwedo.in .box3 .ww-badge { animation-delay: .32s; }
.section-whatwedo.in .box4 .ww-badge { animation-delay: .42s; }
.ww-badge svg { width: 27px; height: 27px; color: #CCFB55; fill: none; }
.box2 .ww-badge svg { color: #1a1a1a; }
.whatwedo-box:hover .ww-badge { transform: scale(1.12) rotate(-6deg); }

.ww-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-family: outfit; font-weight: 600; font-size: clamp(12px, .95vw, 15px);
  color: #CCFB55; opacity: 0; transform: translateX(-8px);
  transition: opacity .3s ease, transform .3s ease;
}
.box2 .ww-go { color: #1a1a1a; }
.whatwedo-box:hover .ww-go { opacity: 1; transform: translateX(0); }

/* stronger, glowier hover lift (augments earlier rules) */
.box1:hover, .box3:hover, .box4:hover { transform: translateY(-14px) scale(1.015); box-shadow: 0 38px 84px rgba(0,0,0,0.66), 0 0 0 2px rgba(204,251,85,0.55) !important; }
.box2:hover { transform: translateY(-14px) scale(1.015); box-shadow: 0 38px 84px rgba(204,251,85,0.4), 0 0 0 2px rgba(204,251,85,0.9) !important; }
.whatwedo-box { transition: transform .34s cubic-bezier(.16,.8,.3,1), box-shadow .34s ease; }

/* ── Partner logo marquee ── */
.marquee {
  width: 100%; overflow: hidden; padding: 1.5vh 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: 70px; width: max-content; animation: marquee 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track a { flex: 0 0 auto; transition: transform .25s ease, filter .25s ease; filter: grayscale(35%); }
.marquee-track a:hover { transform: scale(1.13); filter: grayscale(0%); }
.marquee-track img { height: 46px; width: auto; display: block; border-radius: 10px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media only screen and (max-width: 1024px) {
  .hero-pills { flex-wrap: wrap; }
}
@media only screen and (max-width: 768px) {
  .hero-content { padding-top: 84px; }
  .hero-pills { flex-wrap: wrap; gap: 9px; }
  .hero-pill { padding: 9px 15px; font-size: 12px; }
  .ww-badge { width: 44px; height: 44px; top: 5vw; right: 6vw; }
  .ww-badge svg { width: 22px; height: 22px; }
  .marquee-track { gap: 42px; }
  .marquee-track img { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sub, .hero-pills, .scroll-cue, .banner-text { animation: none !important; opacity: 1 !important; }
  .hero-pill, .marquee-track, .scroll-cue span, .banner::before, .flow-icon, .lane-badge::after, .pipe-conn::after { animation: none !important; }
  .whatwedo-box-content, .ww-badge { opacity: 1 !important; animation: none !important; }
}

/* ═══════════════ VOICE AGENT DEMO ═══════════════ */
.voice-section { background: #F2F2F2; padding: 8vh 6% 9vh; text-align: center; }

.voice-card {
  max-width: 760px; margin: 4vh auto 0; box-sizing: border-box;
  background: linear-gradient(160deg, #1f1f1f 0%, #121212 55%, #090909 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 32px; padding: 30px 34px 32px; color: #fff;
  box-shadow: 0 44px 100px rgba(0,0,0,0.4); position: relative; overflow: hidden;
}
.voice-card::before {
  content: ""; position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 460px; height: 460px; pointer-events: none;
  background: radial-gradient(circle, rgba(204,251,85,0.14), transparent 65%);
  transition: opacity .5s; opacity: .6;
}
.voice-card.live::before { opacity: 1; }
.voice-card > * { position: relative; z-index: 1; }

.vc-top { display: flex; justify-content: space-between; align-items: center; font-family: outfit; }
.vc-status { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #aaa; }
.vc-dot { width: 9px; height: 9px; border-radius: 50%; background: #777; transition: background .3s; }
.voice-card.live .vc-dot { background: #CCFB55; box-shadow: 0 0 10px #CCFB55; animation: vcBlink 1.2s infinite; }
@keyframes vcBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.vc-timer { font-family: outfit; font-size: 13px; color: #aaa; font-variant-numeric: tabular-nums; }

.vc-stage { display: flex; flex-direction: column; align-items: center; padding: 16px 0 6px; }
.vc-orb { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.vc-rings { position: absolute; inset: 24px; }
.vc-rings::before, .vc-rings::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(204,251,85,0.5); opacity: 0; }
.voice-card.speaking .vc-rings::before { animation: vcRing 1.7s ease-out infinite; }
.voice-card.speaking .vc-rings::after { animation: vcRing 1.7s ease-out infinite .85s; }
@keyframes vcRing { 0% { transform: scale(.65); opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } }
.vc-core {
  width: 84px; height: 84px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #e2ff7d, #aadf45 55%, #7caf28);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 34px rgba(204,251,85,0.55);
}
.vc-core svg { width: 36px; height: 36px; color: #0a0a0a; }
.voice-card.live:not(.speaking) .vc-core { animation: vcIdle 2.6s ease-in-out infinite; }
@keyframes vcIdle { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.voice-card.speaking .vc-core { animation: vcCore .8s ease-in-out infinite; }
@keyframes vcCore { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.vc-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; }
.vc-wave span { display: block; width: 3px; height: 5px; background: #CCFB55; border-radius: 2px; opacity: .4; }
.voice-card.speaking .vc-wave span { animation-name: vcWave; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
@keyframes vcWave { 0%,100% { height: 5px; opacity: .4; } 50% { height: 30px; opacity: 1; } }
.vc-agent-name { margin-top: 12px; font-family: outfit; font-size: 13px; color: #bbb; letter-spacing: .02em; }
.vc-voice-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.vc-voice-label { font-family: outfit; font-size: 12px; color: #888; }
.vc-voice {
  background: rgba(255,255,255,0.06); color: #ddd; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50px; padding: 6px 14px; font-family: outfit; font-size: 12px; cursor: pointer;
  max-width: 240px; transition: border-color .2s;
}
.vc-voice:hover { border-color: rgba(204,251,85,0.5); }
.vc-voice:focus { outline: none; border-color: #CCFB55; }
.vc-voice option { background: #1a1a1a; color: #eee; }

.vc-transcript {
  text-align: left; max-height: 250px; overflow-y: auto;
  margin: 16px 0 4px; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px;
}
.vc-transcript::-webkit-scrollbar { width: 5px; }
.vc-transcript::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.vc-hint { color: #888; font-family: outfit; font-size: 14px; text-align: center; padding: 22px 0; }
.vc-msg {
  max-width: 82%; padding: 11px 15px; border-radius: 16px;
  font-family: outfit; font-size: 14px; line-height: 1.45; animation: vcMsgIn .35s ease;
}
.vc-msg.agent { align-self: flex-start; background: rgba(255,255,255,0.08); color: #f2f2f2; border-bottom-left-radius: 4px; }
.vc-msg.user { align-self: flex-end; background: #CCFB55; color: #0a0a0a; font-weight: 500; border-bottom-right-radius: 4px; }
@keyframes vcMsgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vc-msg.typing { display: inline-flex; gap: 5px; align-items: center; }
.vc-msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: vcDot 1s infinite; }
.vc-msg.typing span:nth-child(2) { animation-delay: .15s; }
.vc-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes vcDot { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }

.vc-choices { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 6px; min-height: 4px; }
.vc-choice {
  background: transparent; border: 1px solid rgba(204,251,85,0.55); color: #CCFB55;
  border-radius: 50px; padding: 9px 16px; font-family: outfit; font-size: 13px; cursor: pointer;
  transition: background .2s, color .2s, transform .2s; animation: vcMsgIn .3s ease;
}
.vc-choice:hover { background: #CCFB55; color: #0a0a0a; transform: translateY(-2px); }
.vc-choice .vc-ico { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; }
.vc-mic-choice.listening { background: #CCFB55; color: #0a0a0a; animation: vcMicPulse 1s infinite; }
@keyframes vcMicPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(204,251,85,.5); } 50% { box-shadow: 0 0 0 8px rgba(204,251,85,0); } }

.vc-scenarios { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 22px 0 18px; }
.vc-scn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #ddd;
  border-radius: 50px; padding: 9px 17px; font-family: outfit; font-size: 13px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.vc-scn:hover { border-color: rgba(204,251,85,0.6); color: #fff; }
.vc-scn.active { background: #CCFB55; color: #0a0a0a; border-color: #CCFB55; font-weight: 600; }

.vc-actions { display: flex; align-items: center; justify-content: center; gap: 12px; }
.vc-play[hidden], .vc-end[hidden] { display: none !important; }
.vc-play, .vc-end {
  border: none; border-radius: 50px; font-family: outfit; font-weight: 600; font-size: 15px;
  padding: 14px 30px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.vc-play { background: #CCFB55; color: #0a0a0a; }
.vc-play:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(204,251,85,0.42); }
.vc-end { background: #ff5252; color: #fff; }
.vc-end:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(255,82,82,0.4); }
.vc-play .vc-ico { width: 18px; height: 18px; }
.vc-end .vc-ico { width: 16px; height: 16px; }
.vc-mute {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); color: #ddd;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s;
}
.vc-mute:hover { background: rgba(255,255,255,0.14); }
.vc-mute.muted { color: #ff7070; border-color: rgba(255,112,112,0.5); }
.vc-mute .vc-ico { width: 20px; height: 20px; }

.vc-summary {
  align-self: center; background: rgba(204,251,85,0.14); border: 1px solid rgba(204,251,85,0.5);
  color: #CCFB55; font-family: outfit; font-weight: 600; font-size: 14px;
  padding: 10px 20px; border-radius: 50px; margin-top: 4px; animation: vcMsgIn .4s ease;
}

.vc-settings-toggle {
  margin-top: 16px; background: none; border: none; color: #888;
  font-family: outfit; font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: color .2s;
}
.vc-settings-toggle:hover { color: #CCFB55; }
.vc-settings-toggle.on { color: #CCFB55; }
.vc-settings-toggle svg { width: 15px; height: 15px; }
.vc-settings {
  margin-top: 14px; text-align: left;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 16px;
}
.vc-cfg-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vc-cfg-row[hidden] { display: none !important; }
.vc-cfg-row label { flex: 0 0 90px; font-family: outfit; font-size: 12.5px; color: #aaa; }
.vc-cfg-row input, .vc-cfg-row select {
  flex: 1; min-width: 0; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.15);
  color: #eee; border-radius: 10px; padding: 8px 12px; font-family: outfit; font-size: 13px;
}
.vc-cfg-row input:focus, .vc-cfg-row select:focus { outline: none; border-color: #CCFB55; }
.vc-cfg-row select option { background: #1a1a1a; color: #eee; }
.vc-cfg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vc-cfg-save { background: #CCFB55; color: #0a0a0a; border: none; border-radius: 50px; padding: 9px 18px; font-family: outfit; font-weight: 600; font-size: 13px; cursor: pointer; }
.vc-cfg-test, .vc-cfg-clear { background: rgba(255,255,255,0.07); color: #ddd; border: 1px solid rgba(255,255,255,0.16); border-radius: 50px; padding: 9px 16px; font-family: outfit; font-size: 13px; cursor: pointer; transition: border-color .2s; }
.vc-cfg-test:hover, .vc-cfg-clear:hover { border-color: rgba(204,251,85,0.5); }
.vc-cfg-note { margin-top: 11px; font-family: outfit; font-size: 11.5px; line-height: 1.5; color: #777; }
.vc-cfg-note b { color: #aaa; font-weight: 600; }

@media only screen and (max-width: 768px) {
  .voice-card { padding: 24px 18px 26px; border-radius: 24px; }
  .vc-orb { width: 116px; height: 116px; }
  .vc-core { width: 74px; height: 74px; }
  .vc-transcript { max-height: 220px; }
  .vc-msg { max-width: 88%; }
  .vc-play, .vc-end { padding: 13px 22px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-rings::before, .vc-rings::after, .vc-core, .vc-wave span, .vc-dot { animation: none !important; }
}

/* Neon constellation on every inner-page banner */
.inner-header, .banner-inner { overflow: hidden; }
.inner-header-text { position: relative; z-index: 2; }
.bannertext-inner { z-index: 2; }

/*
*  STYLE 6
*/

#style-6::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0);
 background-color: none;
}

#style-6::-webkit-scrollbar {
 width: 0px;
 background-color: #000;
 /*width: 10px;
  background-color: #000;*/
}

#style-6::-webkit-scrollbar-thumb {
 background-color: #222;
}

/* Append to stylesheet.css */

#formError .error-msg { color: #ffffff; font-weight: 700; background: #b44c4cb8; display: block; padding: 5px; border-radius: 30px 30px 0 0; }
#formError .success-msg { color: #ffffff; font-weight: 700; background: #46dd8db8; display: block; padding: 5px; border-radius: 30px 30px 0 0; }

#submitBtn.loading { opacity:0.8; }

/* global message */

#globalMessage {
background: #fff; width:100%; text-align:center;
color: #333;
padding: 0px 25px 50px 0px;
display:inline-block;
font-size: 20px;
font-weight:bold;
border-radius:6px; 
}


#globalMessage .success-wrap {
background: #fff; width:100%; text-align:center;
color: #333;
padding: 0px 25px 50px 0px;
display:inline-block;
font-size: 20px;
font-weight:bold;
border-radius:6px; 
}