@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: hyperwave;
  src: url(../fonts/hyperwave_one-webfont.woff);
}

/*FONT by AROVEZ*/
/*@font-face {*/
/*  font-family: blacklightd; */
/*  src: url(../fonts/blacklight-webfont.woff);*/
/*}*/
@font-face {
  font-family: baskerville;
  src: url(../fonts/BASKE1.woff);
}

@font-face {
  font-family: zapfino;
  src: url(../fonts/JosefinSans-Regular.ttf);
}

@font-face {
  font-family: josefin-sans;
  src: url(../fonts/ZapfinoExtraLT-One.ttf);
}


/*FONT=TTF by AROVEZ*/
@font-face {
  font-family: arial-bold;
  src: url(../fonts/arial-bold.ttf);
}
@font-face {
  font-family: arial;
  src: url(../fonts/arial.ttf);
}


body{ margin:0px; padding::0px; font-size::100%}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

.carousel-control{ top:0;}

header{
height: 80px;       
// set animation
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index:800;
background-image:url(../images/header.png);
background-size:100%;
line-height:80px;
}
        
header.sticky {
position: fixed;
height: 80px;
width: 100%;
background-image:url(../images/header.png);
background-size:100%;
line-height:80px;
}

.intro{ color:#fff; font-size:1.5em; width:50%; font-weight:bold; display:block; float:left; margin-left:10px;}

.mc-padding30{ padding-top:15px; padding-bottom:15px;}
.mc-padding50{ padding-top:25px; padding-bottom:25px;}
.mc-padding80{ padding-top:40px; padding-bottom:40px;}
.mc-padding100{ padding-top:50px; padding-bottom:50px;}
.mc-padding150{ padding-top:75px; padding-bottom:75px;}

.title{ color:#007ae6; font-weight:bold; font-size:1.3em;}

.social{ text-align:center; display:block;}

.fa { font-size: 1.2em; height: 30px; width: 30px; line-height:30px; text-align: center;
  text-decoration: none; border-radius: 50%;}
.fa:hover { opacity: 0.7;text-decoration: none;}
.fa-facebook { background: #5ed2a9; color: white;}
.fa-linkedin { background: #5ed2a9; color: white;}
.fa-instagram { background: #5ed2a9; color: white;}

.logo{ margin-left:10%;}
.logo img{width:auto; height:auto;}
header p { font-size:1.5em; font-weight:bold; color:#fff; margin:0px; padding:0px; line-height:55px;}

.banner{ background-image:url(../images/slider-home-onepage-slide-01-image-02.png); background-size:100%; background-repeat:no-repeat; min-height:500px;}
.banner .circle{ width:45%; float:left;}
.banner .circle img{ width:100%; height:auto; text-align:center;}
.lt_box{width:30%; display:block; float:left;}
.lt_box h1{ font-family: hyperwave; font-size:9.5em; line-height:150px; font-weight:bold; margin:0px; padding:0px;}
.rt_box{width:25%; display:block; float:left;margin-top: 10%;}
/*.rt_box h2{ font-size:1.7em; color:#222223; letter-spacing:8px; font-weight:bold; margin:35px 0 35px 0; padding:0px; text-align:left;}*/
.rt_box h2{ font-size:2.0em;     font-family: hyperwave;
    font-weight: 500; color:#222223; letter-spacing:2px; font-weight:500; margin:85px 0 35px 0; padding:0px; text-align:left;}
.rt_box .txt1{ font-family: hyperwave; font-size:2em; color:#000; font-weight:bold; margin:35px 0 35px 0; padding:0px; text-align:right;}
.rt_box .txt2{ font-family: hyperwave; font-size:1.5em; color:#767676; margin:25px 0 25px 0; padding:0px; text-align:right;}
.rt_box .signture{ float:left;}

h3{font-family: hyperwave; font-size:10em; text-align:center; font-weight:bold; background: linear-gradient(to right, #aeebe9, #fac6d8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin:0px; padding:0px; margin-bottom: 50px;}

h4{font-family: hyperwave; font-size:3em; font-weight:bold; margin:0px; padding:0px; letter-spacing: 2px;}
h4 span{ color:#5ed2a9;}

h5{font-family: hyperwave; font-size:5em; color:#fff; font-weight:bold; margin:0px; padding:0px; letter-spacing: 2px;}
h5 span{ color:#99e5e8;}

h6{font-size:1.5em; color:#99e5e8; font-weight:bold;}

.txt_wht{ color:#fff;}

.line{ border-top:#007ae6 5px solid; display:block;}

#enq_form input[type=text]{ padding:10px; width:100%; border:#D7D7D7 1px solid; color:#908e91; margin-bottom:20px; border-radius:5px;}
#enq_form input[type=email]{ padding:10px; width:100%; border:#D7D7D7 1px solid; color:#908e91; margin-bottom:20px; border-radius:5px;}
#enq_form input[type=tel]{ padding:10px; width:100%; border:#D7D7D7 1px solid; color:#908e91; margin-bottom:20px; border-radius:5px;}
#enq_form textarea{ padding:10px; width:100%; border:#D7D7D7 1px solid; color:#908e91; height:100px; margin-bottom:20px; border-radius:5px;}
#enq_form input[type=submit]{ padding:15px; width:100%; color:#fff; background-color:#073fe3; margin-bottom:20px; border:0px; border-radius:5px;}

.bg_parx{ background-image:url(../images/bg-image-9.jpg); background-attachment:fixed;}
.bg_parx h4{ color:#fff;}
.bg_parx h4 span{ color:#5ed2a9;}

.subtitle{ color:#000; font-weight:bold; font-size:1.5em; line-height:50px;}
.count{font-size:3.5em; color:#5ed2a9; font-weight:bold;}

#blackbox{ background-color:#000; padding:100px 40px 100px 40px;}
#blackbox p{ color:#fff;}

.bg_RoseWhite{ background-color:#fcefef;}
.bg_black{ background-color:#000;}
.bg_purple{ background-color:#f4effe;}
.bg_green{ background-color:#5fd6b4;}
.bg_gray{ background-color:#f9f9f9;}
.bg_white{background-color:#fff; padding:20px;}
.bg_white p{ line-height:35px;}

.bg_contact{ background-image:url(../images/bg-image-34.jpg); background-size:100%;}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

/*
.test_box{ background-color:#fff; padding:35px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.test_box:hover{ background-color:#000; color:#fff;}
.test_box:hover h7{color:#fff;}
*/

.ser_box{ background-color:#fff; padding:10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius:10px; min-height:450px; transition: transform .2s;}
.ser_box:hover{ background-color:#b6d7ff; transform: scale(1.05);}

.green_bg{ background-color:#d3ebe3; padding:20px;}
.yellow_bg{ background-color:#fbe9ac; padding:20px;}

.gray{ background-color:#222222;}
.bluegray{ background-color:#343a40; padding:25px;}
.blue{ background-color:#0038e3; padding:25px;}
.bluegray p{ color:#fff; font-size:1.6em; line-height:40px}
.blue p{ color:#fff; font-size:1.6em; line-height:40px}

.client{ text-align:center;}

h7{font-size:1.5em; color:#0b3f7e; font-weight:bold;}
h8{font-size:1.8em; color:#000; font-weight:bold;}

.flip-card {
  width: 100%;
  height: 260px;
  perspective: 1000px;
}
.mrg_t_0 {
margin-top: 0;
}

.flip-card-inner {
  background: transparent;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  border-radius: 20px;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  color: black;
box-shadow: 1px 1px 7px 0px rgb(0 0 0 / 30%);
padding:30px 0;
}

.flip-card-back {
  background-color: #222;
  color: white;
  transform: rotateY(180deg);
padding: 30px 0;
display: grid;
}

.blog p{ margin-top:20px; margin-bottom:20px;}
.blog h7{ font-size:1.3em;}

.box{ text-align:center;}
.box .title{ font-size:1.2em; margin:10px 0 10px 0; font-weight:bold; color:#000;}
.box p{ width:70%; margin:auto;}

footer{ background-color:#000; color:#fff; padding:20px 0 20px 0;}
footer .txt{ line-height:25px;}
footer .subtitle{font-family: hyperwave; font-size:1.5em; font-weight:bold; margin:0px; padding:0px; letter-spacing: 2px; color:#fff;}
footer .bullet{ margin:0px; padding:0px; list-style:none;}
footer .bullet li{ margin-bottom:20px; color:#fff;}
footer .bullet li a{color:#fff; text-decoration:none}
footer .bullet li a:hover{color:#EBEBEB; text-decoration:none}
footer a{ color:#fff;}
footer a:hover{ color:#DBDBDB;}

.typed-out{
  overflow: hidden;
  border-right: .10em solid #000;
  white-space: nowrap;
  animation: 
  typing 1s steps(20, end) forwards;
  width: 0;
}
@keyframes typing {
  from { width: 0 }
  to { width: 50% }
}

/* waves */
.ocean {
  height: 80px; /* change the height of the waves here */
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
}

.wave {
  background:url(../images/wave.svg);
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
}

.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 18s linear reverse infinite;
  opacity: 0.5;
}

.wave:nth-of-type(3) {
  bottom: 0;
  animation: wave 20s -1s linear infinite;
  opacity: 0.5;
}

@keyframes wave {
    0% {transform: translateX(0);}
    50% {transform: translateX(-25%);}
    100% {transform: translateX(-50%);}
}


.element {
  display: inline-block;
  font-size: 1px;
  padding: 1px;
  color: white;
  margin-right: 5px;
  margin-left: 5px;
  animation: roll 60s infinite;
  transform: rotate(30deg);
  opacity: .9;
}


@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.nav{ display:block; margin-left:20px; top:0; color:#fff;}
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 995;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}


.dropbtn {
  color: #fff;
  padding: 1em;
  border: none;
  cursor: pointer;
}

.dropdown-content a {
  text-decoration: none;
}

.dropdown {
  position: relative;
  display: inline-block;  
}

.dropdown a{ font-size:1em;}

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

.dropdown-content a {
  color: #fff;
  padding: 10px 10px;
  font-size:1em;
  text-align:left;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #222222; color: #fff;}

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

.dropdown:hover .dropbtn {
  background-color: transparent;
}

.container{
    padding-top:55px;
}




#aboutus{ background-image:url(../images/bg-image-11.jpg); background-size:100%; min-height:500px; width:100%; background-repeat:no-repeat;}

#contact{ background-image:url(../images/bg-image-12.jpg); background-size:100%; min-height:500px; width:100%; background-repeat:no-repeat;}

#portfolio{ background-image:url(../images/bg-image-37.jpg); background-size:100%; min-height:500px; width:100%; background-repeat:no-repeat;}

#SEO{ background-image:url(../images/bg-image-56.jpg); background-size:100%; min-height:500px; width:100%; background-repeat:no-repeat;}

/* Media Queries (laptop, desktop view*/
@media screen and (max-width: 1024px){

}

/* Media Queries (ipad landscape view)*/
@media screen and (max-width: 800px) {

}

/* Media Queries (ipad portrait view)*/
@media screen and (max-width: 640px) {

}

/* Media Queries (iphone landscape view)*/
@media screen and (max-width: 480px) {
.social{ display:none;}
header{ background-color:#000; background-image:none;}
header.sticky{ background-color:#000; background-image:none;}
.banner .lt_box{ width:100%; margin:auto;}
.banner .rt_box{ width:100%; margin:auto;}
.banner .lt_box h1{ font-size:3em; float:left; text-align:center;}
.banner .circle{ width:100%; text-align:center;}

}

/* Media Queries (iphone portrait view)*/
@media only screen and (max-width : 360px) {


}

#basicSlider {
    direction: ltr;
}


@keyframes scroll {
    0% {transform: translateX(calc(-250px * 7))}
    100% { transform: translateX(0);}
}

.slider {
	height: 100px;
	margin: auto;
	overflow:hidden;
	position: relative;
	width: auto;

}
	
.slider .slide-track {
    animation: scroll 30s linear infinite;
    display: flex;
    width: calc(250px * 14);
    direction: rtl;
    margin: 0 2%;
}
.slider .slide {
    height: 100px;
    width: 250px;
}
.slider .slide img {
    filter: grayscale(100%);
}
.slider .slide img:hover {
    filter: none;
}

.ham {
    text-align: end;
}

.todiscuss {
    display: block;
    margin-left: auto;
    /*max-width: 450px;*/
    margin-right: auto;
}
.heading-center {
  text-align: center;
}

.contact-button{
    background-color:black;
    color:#35d4b2;
}

/*CASE STUDIES STYLE*/

/*END CASE STUDIES STYLE*/