html {
scroll-behavior: smooth;
}
:root{
scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
scrollbar-width: thin !important;
}
::-webkit-scrollbar {
height: 12px;
width: 8px;
background: #000;
}
::-webkit-scrollbar-thumb {
background: gray;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: #000;
}










body{
margin:0;
overflow-x:hidden !important;
font-family: 'Ubuntu', sans-serif;
}





/*DEFAULT*/
a{
text-decoration:none;
}

ul{
position:relative;
left:-20px;
}

li{
list-style:none;
}

p{
letter-spacing:0.08em;
line-height:1.4em;
font-family: 'Ubuntu Condensed', sans-serif;
}

a,li,button{
transition:0.5s;
outline:none !important;
}

.title{
font-weight:900;
}

.sub-title{
font-weight:400;
}

.shape{
position:absolute;
bottom:-1%;
z-index:99;
}

.title_header{
margin:4vh auto;
width:60%;
text-align:center;
}

.title_header h1{
font-weight:200;
}

.line{
width:150px;
height:2px;
background-color:#ffc400;
display:block;
margin:2vh auto;
}

.sections{
margin:10vh auto;
width:90%;
position:relative;
}










/*ANIMATION*/
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)} 
to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
from {transform: scale(0)} 
to {transform: scale(1)}
}
.inline-photo {
opacity: 0;
transform: translateY(4em) rotateZ(-0deg);
transition: transform 4s .25s cubic-bezier(0,1,.3,1),opacity .3s .25s ease-out;
will-change: transform, opacity;
}
.inline-photo.is-visible {
opacity: 1;
transform: rotateZ(-0deg);
}
.inline-photo2 {
opacity: 0;
transform: translateX(-15em) rotateZ(-0deg);
transition: transform 4s .25s cubic-bezier(0,1,.3,1),opacity .3s .25s ease-out;
will-change: transform, opacity;
}
.inline-photo2.is-visible2 {
opacity: 1;
transform: rotateZ(-0deg);
}
.inline-photo3 {
opacity: 0;
transform: translateX(15em) rotateZ(-0deg);
transition: transform 4s .25s cubic-bezier(0,1,.3,1),opacity .3s .25s ease-out;
will-change: transform, opacity;
}
.inline-photo3.is-visible3 {
opacity: 1;
transform: rotateZ(-0deg);
}
@-webkit-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}

@-moz-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}

@-o-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}

@keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}

1% {
display: block;
opacity: 0;
}

100% {
display: block;
opacity: 1;
}
}

@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 } 
to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
from{ bottom:-100px; opacity:0 } 
to{ bottom:0; opacity:1 }
}













/*BANNER*/
header{
width:100%;
background-color:#fff;
}

.banner{
width:100%;
display:flex;
position:relative;
}

.banner section{
position:relative;
margin:0.5rem 40px;
display:flex;
}

.banner section:nth-child(1):after{
content:"";
background-color:rgba(1,1,1,0.1);
position:absolute;
top:20%;
right:-40px;
width:1px;
height:60%;
}

.banner section:not(:last-child) span:nth-child(1){
display:flex;
align-items:center;
justify-content:center;
}

.banner section span i{
display:flex;
align-items:center;
justify-content:center;
color:#1e1e1e;
padding:5px;
border-radius:5px;
background-color:#ffc400;
margin:0 15px;
font-size:24px;
}

.banner section span p{
font-weight:100;
}

.banner section span b{
position:relative;
top:-15px;
}

.banner section:nth-child(3){
position:absolute;
right:0;
}

.banner section:nth-child(3) ul li{
display:inline-block;
margin:0 10px;
}

.banner section:nth-child(3) ul li a{
display:flex;
align-items:center;
justify-content:center;
border: 1px solid #000;
color: #000;
background: none;
padding:8px;
width:15px;
border-radius:50%;
}

.banner section:nth-child(3) ul li a:hover{
color:#000;
background-color:#fdc200;
border:1px solid #fdc200;
}














/*TOP NAV*/
.topnav {
overflow:hidden;
background-color: #040021;
font-family: 'Ubuntu Condensed', sans-serif;
z-index:111;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px 28px;
text-decoration: none;
font-size: 17px;
}

.topnav .active {
background-color: #ffc400;
color: #000;
margin-left:250px;
}

.logo{
position:absolute;
top:85px;
width:180px;
height:100px;
background:#fff;
z-index:999;
border-radius:0 0 20px 0;
}

.topnav .icon {
display: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 17px;    
border: none;
outline: none;
color: white;
padding: 16px 28px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 999;
}

.dropdown-content{
border-top:2px solid #ffb100;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}

.dropdown-content a:hover {
background-color: #ddd;
color: black;
}

.dropdown:hover .dropdown-content {
display: block;
}

@media screen and (max-width: 900px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}


#navbar {
background-color: #fff;
position: fixed;
top: -150px;
width: 100%;
display: block;
transition: top 0.3s;
z-index:999;
box-shadow:0px 6px 16px -6px rgba(1,1,1,0.5);
}

#navbar a {
float: left;
display: block;
color: #000;
text-align: center;
padding: 15px;
margin:20px 0;
text-decoration: none;
font-size: 17px;
}

#navbar .active{
margin:2px 0;
}

#navbar .dropbtn{
color:#000;
margin:20px 0;
}

#navbar .dropbtn:hover{
background-color:transparent;
color:#ffb100;
}

#navbar .dropdown-content{
border-top:2px solid #ffb100;
}

#navbar .dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
margin:0;
text-decoration: none;
display: block;
text-align: left;
}

#navbar a:hover {
color: #ffb100;
}


@media (max-width:920px){
.title_header{
width:90%;
}
.banner section{
display:none;
}
.banner .logo{
top:0;
}
#navbar{
display:none;
}

.topnav a:nth-child(1){
display:none;
}

.topnav.responsive a:nth-child(1){
margin-top:100px;
display: block;
background:transparent;
color:#fff;
margin-left:0;
}
.topnav.responsive .dropdown-content a:nth-child(1){
color:#000;
margin-top:0;
}
}








/*SECTIONS*/
/*SECTION1*/
.section1{
display:flex;
}

.section1 .card{
width:30%;
margin:0 20px;
text-align:center;
}

.section1 .card img{
padding:10px;
background-color:#ffc400;
border-radius:5%;
font-size:2em;
}

.section1 .card p{
color:rgba(1,1,1,0.6);
}

@media (max-width:920px){
.section1{
display:block;
}
.section1 .card{
width:90%;
}
.section1 .card img{
width:50px;
height:50px;
}
}


/*SECTION2*/
.section2{
background-color:#040021;
background: linear-gradient(rgba(4, 0, 33, 0.8), rgba(4, 0, 33, 0.8)), url("https://i.ibb.co/9yyHVvV/blog.jpg");
background-size:cover;
background-attachment:fixed;
background-repeat:no-repeat;
background-position:bottom;
}

.section2 section{
padding:5rem;
color:#fff;
}

@media (max-width:920px){
.section2{
background-attachment:local;
}

.section2 section{
padding:1rem;
}
}








/*SECTION3*/
.section3 .row{
margin:10vh 0;
padding:2rem;
}

.section3 .row > .column {
padding: 0 8px;
}

.section3 .row:after {
content: "";
display: table;
clear: both;
}

.section3 .column {
float: left;
width: 18%;
height:30vh;
margin:10px 3px;
position:relative;
}

.section3 .column img{
width:100%;
height:100%;
object-fit:cover;
}

.section3 .column .icon{
position:absolute;
bottom:10px;
right:10px;
width:50px;
height:30px;
object-fit:contain;
filter: brightness(0) invert(1);
}

/* The Modal (background) */
.section3 .modal {
display: none;
position: fixed;
z-index: 999;
padding-top: 10px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}

/* Modal Content */
.section3 .modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
height:93%;
overflow:auto;
max-width: 1200px;
background-color:#000;
}

.section3 .modal-content .btn2{
position:absolute;
top:30vh;
}

/* The Close Button */
.section3 .close {
color: white;
position: absolute;
top: -10px;
right: 45px;
font-size: 35px;
font-weight: bold;
transition:0.5s;
}

.section3 .close:hover,
.section3 .close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}

.section3 .lightboxSlides {
display: none;
}

.section3 .lightboxSlides iframe {
width:100%;
height:95vh;
border:0;
overflow-y:auto;
}

.section3 .cursor {
cursor: pointer;
}

/* Next & previous buttons */
.section3 .prev,
.section3 .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}

/* Position the "next button" to the right */
.section3 .next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.section3 .prev:hover,
.section3 .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.section3 .numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

.section3 .lightboxSlides img {
margin-bottom: -4px;
}

.section3 .caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}

.section3 .demo {
opacity: 0.6;
}

.section3 .active,
.section3 .demo:hover {
opacity: 1;
}

.section3 img.hover-shadow {
transition: 0.3s;
}

.section3 .hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media (max-width:920px){
.section3 .column {
float: left;
width: 40%;
height:20vh;
margin:10px 3px;
position:relative;
}
.section3 .close {
color: white;
position: absolute;
right:0;
}
}









/*SLIDER*/
#ourclients {
display: block;
margin-left: auto;
margin-right: auto;
background:#f9f9f9;
padding-bottom:30px;
height:100px;
overflow-y:hidden;
}
#ourclients .clients-wrap {
display: block;
width: 95%;
margin: 0 auto;
overflow: hidden;
}
#ourclients .clients-wrap ul {
display: block;
list-style: none;
position: relative;
margin-left: auto;
margin-right: auto;
}
#ourclients .clients-wrap ul li {
display: block;
float: left;
position: relative;
width: 220px;
height: 100px;
line-height: 100px;
text-align: center;
}
#ourclients .clients-wrap ul li img {
vertical-align: middle;
max-width: 100%;
width:150px;
max-height: 100%;
-webkit-transition: 0 linear left;
-moz-transition: 0 linear left;
transition: 0 linear left;
}
#ourclients h3{
border-bottom:2px solid #3399ff;
width:150px;
padding:10px;
}










/*FOOTER*/
.footer{
background:#000;
padding:30px 0px;
font-family: 'Play', sans-serif;
text-align:center;
}

.footer .row{
width:100%;
margin:1% 0%;
padding:0.6% 0%;
color:gray;
font-size:0.8em;
}

.footer .row a{
text-decoration:none;
color:gray;
transition:0.5s;
}

.footer .row a:hover{
color:#fff;
}

.footer .row ul{
width:100%;
}

.footer .row ul li{
display:inline-block;
margin:0px 30px;
}

.footer .row a i{
font-size:2em;
margin:0% 1%;
}

@media (max-width:820px){
.footer{
text-align:left;
padding:5%;
}
.footer .row ul li{
display:block;
margin:10px 0px;
text-align:left;
}
.footer .row a i{
margin:0% 3%;
}
}



.container{
width:100%;
position:relative;
max-height:90vh;
height:90vh;
z-index:1;
}

.container img {
max-width: 100%;
}

.container .caption {
position: absolute;
top: 30%;
left: 8rem;
z-index: 9;
transform: translateY(-50%);
opacity: 0;
transition: 500ms ease opacity, 500ms ease transform;
transform: translateY(60px);
}

.caption.current-caption {
transition-delay: 1000ms;
opacity: 1;
transform: translateY(0);
}
.caption.previous-caption {
transform: translateY(-60px);
}
.caption .caption-heading {
transition: 500ms ease-in all;
}
.caption .caption-heading h1 {
font-size: 4rem;
margin-bottom: 1.5rem;
text-transform: uppercase;
text-indent: -0.2rem;
letter-spacing: 0.2rem;
font-weight: 300;
color:#fff;
}

.caption .caption-subhead {
font-size: 1rem;
font-weight: 300;
text-transform: uppercase;
color: white;
letter-spacing: 4px;
word-spacing: 0.1rem;
margin-bottom: 2.5rem;
display: block;
}
.caption a.btn {
color: #333;
font-size: 0.8rem;
text-decoration: none;
background-color: white;
padding: 0.5rem 1rem;
text-transform: uppercase;
letter-spacing: 0.2rem;
position: relative;
z-index: 9;
transition: 250ms ease-in background-color, 500ms ease-in color;
}
.caption a.btn:hover {
background-color: black;
color: white;
}

.container {
width: 100%;
background-color: #2C302E;
display: flex;
position: relative;
}

.left-col, .right-col {
width: 100%;
box-sizing: border-box;
overflow: hidden;
}

.left-col {
background-size: cover;
background-postion: center top;
overflow: hidden;
position: relative;
}
.left-col .slide {
position: absolute;
width: 100%;
height: 100%;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat;
opacity: 0;
transition: 1000ms cubic-bezier(1, 0.04, 0.355, 1) transform, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) clip-path;
transform: translateY(-100%);
scale: 1;
z-index: -1;
}
.left-col .slide.previous {
z-index: 1;
opacity: 1;
transform: translateY(0);
animation-delay: 1s;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
transition: 3s ease transform;
will-change: transform;
}
.left-col .slide.previous.change {
transform: translateY(50%);
}
.left-col .slide.next {
transform: translateY(-100%);
z-index: 3;
opacity: 1;
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
.left-col .slide.current {
opacity: 1;
transform: translateY(0) scale(1.25);
z-index: 2;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.right-col {
display: flex;
align-items: center;
justify-content: center;
}

.right-col .preview {
max-width: 400px;
}

.nav {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 6;
overflow: hidden;
}
.nav a {
color: #fafafa;
font-size: 3rem;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}
.nav:hover .slide-up, .nav:hover .slide-down {
opacity: 0.5;
transform: translateX(0);
}
.nav .slide-up, .nav .slide-down {
display: block;
position: absolute;
text-align: center;
padding: 1rem;
opacity: 0;
transition: 0.25s ease opacity, 0.25s ease transform;
z-index: 99;
}
.nav .slide-up:hover, .nav .slide-down:hover {
opacity: 1;
}
.nav .slide-up a, .nav .slide-down a {
text-decoration: none;
font-weight: 300 !important;
}
.nav .slide-up {
top: 50%;
left: 0;
transform: translateX(-100%);
}
.nav .slide-down {
top: 50%;
right: 3%;
transform: translateX(100%);
}
@media (max-width:820px){
.container{
height:70vh;
}
.container .caption {
left:1rem;
}
.caption .caption-heading h1 {
font-size:2rem;
}
.nav {
z-index:99;
}
.nav .slide-down {
right:7%;
}
}







.credits{
 position:fixed;
  bottom:2rem;
  right:0;
  z-index:9999;
  background:#1e1e1e;
  padding:10px 20px;
  font-size:12px;
  color:#fff;
}

.credits a{
  color:gray;
}

.credits a:not(:last-child):after{
 content:",";
}