@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');



input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}



@font-face {
    font-family: 'denton_testextrabold';
    src: url('denton_test_extrabold_800-webfont.woff2') format('woff2'),
         url('denton_test_extrabold_800-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gilroy-light';
    src: url('gilroy-light-webfont.woff2') format('woff2'),
         url('gilroy-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'gilroy-regular';
    src: url('gilroy-regular-webfont.woff2') format('woff2'),
         url('gilroy-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'gilroy-semibold';
    src: url('gilroy-semibold-webfont.woff2') format('woff2'),
         url('gilroy-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


button::-moz-focus-inner {  border: 0;}
a:focus {     outline: none; }
button:focus {     outline: none; }
::-moz-focus-inner {border:0;}
:focus, :active {    outline: 0;    border: 0;}



select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(../images/small-down-arrow.png);
   background-repeat: no-repeat;
   background-position: 85% center;
}




body {color: #fff; margin: 0px; font-family: poppins; font-size: 15px; font-weight: 300; line-height: 26px; margin: 0px 0px 0px 0px; background-color:#000; }

html {  scroll-behavior: smooth;}




a{transition: all 0.5s ease-in 0s; text-decoration:none!important; outline:none; color: #fff;}

a:focus, a:active,  a, focus, select {border:0px; outline:none;}

.clear{clear:both;}

p{margin-top:0px; text-align: left;  font-family: 'gilroy-semibold'; font-size:22px; line-height:160%; margin-bottom:30px;}

img {border:0px;}

form{margin:0px;}

input {outline:none;}

* {box-sizing:border-box; }

h2 {font-size:80px; line-height:120%; font-family: 'denton_testextrabold'; margin:0px 0px 30px 0px; font-weight:normal;}




.fullsize-video-holder {width:100%; height:100%; max-height:960px; overflow:hidden; display:block; }

.banner-text {min-height:960px; }








header {position:fixed; left:0px; top:0px; z-index:4; width:100%; padding:30px 0px; transition: all 0.5s ease-in 0s;}

.logo {display:block; width:200px; float:left; transition: all 0.5s ease-in 0s;}

.logo a, .logo a img {display:block; width:100%; transition: all 0.5s ease-in 0s;}



.get-in-touch {display:inline-block; color:#fff;  float:right; margin-top:12px;  transition: all 0.5s ease-in 0s; height: 46px;}

.get-in-touch a {color:#fff; font-family: 'gilroy-semibold'; letter-spacing:3px; padding:14px 20px 13px 20px; border:1px solid #fff; height:46px; font-size:14px; line-height:120%; border-right:0px; display:inline-block;}

.get-in-touch a:hover {background-color:rgb(0,0,0,0.6); color:#fff; }


header.darker {background-color:#000; padding:10px 0px;}

header.darker .get-in-touch { margin-top:2px; }

header.darker .responsive-menu-icon {margin-top:2px;}




.banner-text {display:table; width:100%; height:100%; background-color:rgb(0,0,0,0.6); position:absolute; z-index:1;}

.banner-text h1 { text-align:center; color:#fff; font-size:150px; line-height:95%;  font-family: 'denton_testextrabold'; font-weight:normal; margin:80px 0px 0px 0px;}

.banner-text p { text-align:center; color:#fff; font-size:24px; margin:30px 0px; line-height:150%; font-family: 'gilroy-semibold';}




.focus { width:100%; padding:100px 0px; display:table; width:100%;   }

.reverse-logo {display:block; margin:auto; margin-bottom:50px;}







.aboutus { width:100%; padding:100px 0px;  display:table; width:100%;   }

.small-heading {display:block; font-family: 'gilroy-semibold'; font-size:14px; line-height:250%; color:#00b4e1; letter-spacing:5px; text-align:center;  max-width:800px; margin:auto;  margin-bottom:30px; text-transform:uppercase; } 

.animate {  color: #fff;  font-size: 36px;  font-weight: 400;  line-height: 150%; font-family: 'gilroy-light'; width:800px; text-align:center; margin:auto;}

.animate2 {  color: #fff;  font-size: 36px;  font-weight: 400;  line-height: 150%; font-family: 'gilroy-light'; width:800px; text-align:center; margin:auto;}




.team { width:100%; padding:0px; display:table; width:100%; margin-bottom:1px;   }

#team-box1, #team-box2 {border:1px solid #333; display:table; width:100%; padding:20px;}

#team-box1 img, #team-box2 img  {float:left; margin-right:20px; width:40%;}

.team h4 {font-weight:200; font-size:30px; line-height:150%;}

.team h6 {font-weight:700; font-size:14px; margin-bottom:20px;}

.team p {font-weight:400; font-size:18px; font-family: 'gilroy-light';}

.team p strong {font-weight:500;}





.simple  {display:table; width:100%; padding:80px 0px 80px 0px; background-image:url(../images/bg1.jpg); background-position:center center; background-size:cover;  }

.simple h2 {font-size:150px;}

.simple h2, .simple p {text-align:center;}

.building-animation {display:block; margin:auto;}





.our-projects {display:table; width:100%;  max-width:1660px; margin:auto; padding:0px; border-top:1px solid #333; border-bottom:1px solid #333; }

.our-projects h2 {margin-top:70px;}

.our-projects h2, .our-projects p {width:45%;}

.small-video2 { width:1066px; float:right;  display:block;   }

.small-video { width:800px; float:right; margin-right:-15px; }

.small-video  .xl\:h-screen {    height: 600px;  }

#project-text {position:absolute; z-index:2; background-image:url(../images/overlay.png); height:600px;  }

#project-video {padding-right:0px;}

#project-video .fullsize-video-holder { max-height:600px; height:600px;  }




.services { width:100%; padding:100px 0px; display:table; width:100%;   }

.service-box-1 {display:table; width:100%; background-image:url(../images/gradient1.png); background-size:auto 100%; padding:50px; height:800px;}

.service-box-2 {display:table; width:100%; background-image:url(../images/gradient2.png);  background-size:auto 100%; padding:50px; height:800px;}

.service-box-3 {display:table; width:100%; background-image:url(../images/gradient3.png);  background-size:auto 100%; padding:50px; height:800px;}

.service-box-1 img, .service-box-2 img, .service-box-3 img { display:block; width: 160px;}

.service-box-1 h3, .service-box-2 h3, .service-box-3 h3 { font-size:36px; line-height:130%; height:170px; margin-top:20px;}

.service-box-1 p, .service-box-2 p, .service-box-3 p { height:240px;}

.service-box-1 a, .service-box-2 a, .service-box-3 a {color:#fff; font-family: 'gilroy-semibold'; display:block; width:210px; letter-spacing:3px; padding:15px 20px; border:2px solid #fff; font-size:14px; line-height:120%; text-transform:uppercase; font-size:15px; background-image:url(../images/button-arrow.png); background-repeat:no-repeat; background-position:90% center;  }

.service-box-1 a:hover, .service-box-2 a:hover, .service-box-3 a:hover { background-color:#000; border:2px solid #000;}




#menu .service-box-1, #menu .service-box-2, #menu .service-box-3 { height:400px; margin-top:300px; padding:40px; }

#menu .service-box-1 img, #menu .service-box-2 img, #menu .service-box-3 img { display:block; width:100px; margin-top:50px;}

#menu .service-box-1 h3, #menu .service-box-2 h3, #menu .service-box-3 h3 { font-size:25px; line-height:130%; height:auto; margin-top:20px; margin-bottom:40px;}






.video-2-content {position:absolute; width:100%; height:100%; min-height:960px; text-align:center; z-index:2; background-color:rgb(0,0,0,0.4);  }

.video-2-content div {height:100%; display:block;}

.video-2-content h2 {text-align:center; font-size:150px; }

.video-2-content p {text-align:center;}





.our-clients {display:table; width:100%;  max-width:1660px; margin:auto; padding:80px 0px; border-top:1px solid #333; border-bottom:1px solid #333; }

#clients-logo {  margin-top: 4%}





.lets-grab {display:table; width:100%;  max-width:1660px; margin:auto; padding:80px 0px;}

.lets-grab h2 {font-size:60px;}

.big-email {display:block; font-size:36px; font-family: 'gilroy-light'; width:240px; line-height:120%; padding-bottom:5px; border-bottom:1px solid #fff;}

.big-email:hover {color:#fff; border-bottom:1px solid #fff; }

.contact-form-row {border:1px solid #333; display:table; width:80%; float:right; border-bottom:0px;  }

.contact-form-row:last-child {border-bottom:1px solid #333;}

.contact-form-row img {float:left; border-right:1px solid #333; padding:15px;}







.textbox1, .textbox2 {border:0px; background-color:transparent; padding:17px; font-family: 'gilroy-semibold'; width:normal; font-size:16px; color:#999; width:calc(100% - 65px);}

.message-icon {padding-bottom:115px!important;}

.submit-button {display:block; padding:18px; text-transform:uppercase; font-family: 'gilroy-semibold'; width:normal; font-size:16px; letter-spacing:4px; width:calc(100% - 65px); text-align:left; transition: all 0.9s ease-in 0s;}

.submit-button:hover { background-color:#fff; color:#000;}







footer {display:table; width:100%;  max-width:1660px; margin:auto;}

footer  .col-1-of-2 {  padding:40px 0px; border-top:1px solid #333;}

.copyright {font-size:12px; text-transform:uppercase; letter-spacing:2px; color:#aaa;  display:block;}

.copyright-links {text-align:right; font-size:12px; text-transform:uppercase; letter-spacing:2px; display:block;  } 

.copyright-links a {border-bottom:1px solid #aaa; color:#aaa;}




.anchor-point {display:block; margin-top:-50px; position:absolute;}






.key-features {padding:60px 0px; width:100%; display:table;}

.key-features h2 {text-align:center;}

.mb-5 { margin-bottom: 50px;}

.key-features p {text-align:center;}

.key-feature-box {
  display: flex;
  width: 100%;
  border: 1px solid #333;
  padding: 10px;
  height: auto;
  justify-content: space-between;
  gap: 150px;
}

.key-feature-box img {
  max-width: 40vw;
  height: auto;
  
  /* Apply a fading gradient from left to right */
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0));
}

.key-feature-box1 img {
  max-width: 40vw;
  height: auto;
  
  /* Apply a fading gradient from left to right */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0));
}


/* Tablet View */
@media (max-width: 1024px) {
  .key-feature-box {
    flex-direction: column; /* Stack items vertically */
    gap:20px;
    
  }

  .key-feature-box img {
    max-width: 100%; /* Ensures images scale properly */
  }
  
  .key-feature-box1 {
    flex-direction:column-reverse; /* Ensures images scale properly */
  }
}

/* Mobile View */
@media (max-width: 770px) {
  .key-feature-box {
    justify-content: center;
    gap:20px;
  }
  .key-feature-box1 {
    flex-direction:column-reverse ; /* Ensures images scale properly */
  }
}

.key-feature-box h3 {font-size:24px; font-weight:500; border-bottom:1px solid #333; padding-bottom:20px; margin:20px 0px; padding-left:20px; line-height:36px; }

.key-feature-box ul {margin:0px 20px 40px 20px; padding:0px;}

.key-feature-box ul li { margin-bottom:20px; color:#ccc; list-style-image:url(../images/bullet.png); padding-left:10px; margin-left:20px;}





.benefits {padding:0px 0px 0px 0px; width:100%; display:table;  } 
 
.benefits strong {font-weight:600; color:#fff;}

.benefits h2 {text-align:center;}

.benefits h3 {font-size:24px; font-weight:600; padding-bottom:20px; margin:30px 0px 10px 40px;  }

.benefits ul {margin:0px 30px 40px 40px; padding:0px;}

.benefits ul li { margin-bottom:20px; color:#ccc; list-style-image:url(../images/bullet.png); padding-left:10px; margin-left:12px;}

.benefit-box {display:table; width:100%; border:1px solid #333; height:830px;}

.benefit-box img {display:block; width:100%;}

.benefits .hline {border-bottom:1px solid #333; padding-top:60px;}




.pink .key-feature-box h3 { border-bottom:3px solid #ff00b1;}

.green .key-feature-box h3 { border-bottom:3px solid #7bd544;}

.purple .key-feature-box h3 { border-bottom:3px solid #b800ff;}

.purple .key-feature-box {margin-bottom:30px; height:auto;}

.purple .benefit-box {height:640px;}



/* Grid */


.grid-1280 {display:table; width:1660px; margin:auto;  }

.row {width: 100%; display: table; }

.col-1-of-12 {width: 8.33%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-11 {width: 9.09%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-10 {width: 10%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-9 {width: 11.11%; float: left; padding-left: 15px; padding-right: 15px; }

.col-8-of-9 {width: 88.89%; float: left; padding-left: 15px; padding-right: 15px; }

.col-7-of-9 {width: 77.78%; float: left; padding-left: 15px; padding-right: 15px; }

.col-6-of-9 {width: 66.67%; float: left; padding-left: 15px; padding-right: 15px; }

.col-5-of-9 {width: 55.56%; float: left; padding-left: 15px; padding-right: 15px; }

.col-4-of-9 {width: 44.45%; float: left; padding-left: 15px; padding-right: 15px; }

.col-3-of-9 {width: 33.34%; float: left; padding-left: 15px; padding-right: 15px; }

.col-2-of-9 {width: 22.23%; float: left; padding-left: 15px; padding-right: 15px; }


.col-1-of-8 {width: 12.50%; float: left; padding-left: 15px; padding-right: 15px; }

.col-7-of-8 {width: 87.50%; float: left; padding-left: 15px; padding-right: 15px; }

.col-6-of-8 {width: 75%; float: left; padding-left: 15px; padding-right: 15px; }

.col-5-of-8 {width: 62.50%; float: left; padding-left: 15px; padding-right: 15px; }

.col-4-of-8 {width: 50%; float: left; padding-left: 15px; padding-right: 15px; }

.col-3-of-8 {width: 37.50%; float: left; padding-left: 15px; padding-right: 15px; }

.col-2-of-8 {width: 25%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-7 {width: 14.28%; float: left; padding-left: 15px; padding-right: 15px; }

.col-6-of-7 {width: 85.68%; float: left; padding-left: 15px; padding-right: 15px; }

.col-5-of-7 {width: 71.4%; float: left; padding-left: 15px; padding-right: 15px; }

.col-4-of-7 {width: 57.12%; float: left; padding-left: 15px; padding-right: 15px; }

.col-3-of-7 {width: 42.84%; float: left; padding-left: 15px; padding-right: 15px; }

.col-2-of-7 {width: 28.56%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-6 {width: 16.66%; float: left; padding-left: 15px; padding-right: 15px; }

.col-5-of-6 {width: 83.33%; float: left; padding-left: 15px; padding-right: 15px; }

.col-4-of-6 {width: 66.64%; float: left; padding-left: 15px; padding-right: 15px; }

.col-3-of-6 {width: 49.98%; float: left; padding-left: 15px; padding-right: 15px; }

.col-2-of-6 {width: 33.32%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-5 {width: 20%; float: left; padding-left: 15px; padding-right: 15px; }

.col-4-of-5 {width: 80%; float: left; padding-left: 15px; padding-right: 15px; }

.col-3-of-5 {width: 60%; float: left; padding-left: 15px; padding-right: 15px; }

.col-2-of-5 {width: 40%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-4 {width: 25%; float: left; padding-left: 15px; padding-right: 15px; }

.col-3-of-4 {width: 75%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-3 {width: 33.33%; float: left; padding-left: 15px; padding-right: 15px; }

.col-2-of-3 {width: 66.66%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-2 {width: 50%; float: left; padding-left: 15px; padding-right: 15px; }

.col-1-of-1 {width: 100%;  padding-left: 15px; padding-right: 15px; }


.content {display: block; padding: 10px 0px; background-color: #eee; text-align: center; font-size: 10px; color: #000; border: 1px solid #ccc;}


/* Grid */




















/* Scroll Top */

.scrolltop {
	display:none;
	width:100%;
	margin:0 auto;
	position:fixed;
	bottom:0px;
	right:0px;	
	z-index:99;
}
.scroll {
	position:absolute;
	right:20px;
	bottom:20px;
	padding:0;
	text-align: center;
	margin: 0 0 0 0;
	cursor:pointer;
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s; 
	background-color: #fff;
}

.scroll a {padding:25px 0px 0px 0px; display:block; color:#fff; height:50px; width:50px;}

.scroll a span {
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #000;
  display: block;
  margin:auto;
  animation: buttonarrow 0.6s infinite alternate ease-in-out;
}


@keyframes buttonarrow {
	0% {
		transform: translateY(0);
		opacity: 1.0
	}
	100% {
		transform: translateY(-0.5em);
		opacity: 1.0
	}
}

/* Scroll Top */









/* responsive menu */

.responsive-menu-icon { display:none;}


.responsive-menu-icon {
    display: block;
    cursor: pointer;
    width: 46px;
    height: 46px;
	float:right;
    padding: 11px;
    box-sizing: border-box;
    z-index: 10000;
    z-index: 1000;
	border:1px solid #fff;
	margin-top:12px;
	transition: all 0.5s ease-in 0s;
}

.bar1, .bar2, .bar3 {
    width: 23px;
    height: 2px;
    background-color: #fff;
    margin: 4px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-4px, 4px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-4px, -5px);
}


/* responsive menu */






/* menu slider */

#menu {z-index:3; width:100%!important; transition: left 300ms;}

.panel {
    position: fixed;
    left: -120%; /*or width of your navigation panel*/
    width: 100%; /*should match the above value*/
}


.panel ul {
	margin-top:300px;
	border-top:1px solid #333;
	width:90%;
	}

.panel ul li a {
	display:block;
	font-size:24px;
	line-height:80px;
	border-bottom:1px solid #333;
	background-image:url(../images/button-arrow.png); 
	background-repeat:no-repeat; 
	background-position:-10% center;
	}

.panel ul li a:hover { background-color:#222; padding:0px 20px;background-position:90% center; }

.wrap {
    position: relative;
    max-width: 0%;
    margin: 0 auto;
    padding: 20px;
}

.panel {
    background: #000;
}

.panel a {
    color: #fff;
}

/* menu slider */



.show-hit-counter {display:block; width:200px; height:50px;}

#hit-counter {display:none;}