@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
html {
  scroll-behavior: smooth; overflow-y: auto;
  overflow-x: hidden;
}

/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px rgb(194, 194, 194); 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background:#49aadf; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #297aa6; 
}


body {
  margin: 0;
  padding: 12px;
  font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
  background-color: #000;
  color: #fff;
}


.clearfix {
 
  clear: both;
}

.topnav {
  flex: 100%;
  border: #ddd solid 0px;

  margin-top: -1px;
  margin-right: 36px;
  display: flexbox; z-index: 1000;
}
.topnav > * {
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
}

.topnav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px; margin: 0px 5px;
}

.topnav a:hover {
  background-color: rgba(33, 150, 243, 1);
  color: #fff;border-radius: 10px; margin: 0px 5px;
}

.topnav a.active {
  background-color: rgba(184, 99, 243, 0.8);
  color: #FFF;
  border-radius: 10px; margin: 0px 5px;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .logoicon img {
    width: 12vw;
  }
  .logotext {
    display: none;
  }
  
}

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

.topheader {
  display: flex;
  padding: 10px;
  padding-bottom: 0px;
  background: rgba(0, 0, 0, 0.8) url("../images/toplight.svg") center right
    no-repeat;
  background-size: 60%;
  position: fixed;
  top: 0px;
  width: 100%; z-index: 10000;

  margin: 0px auto 0px auto;
  -webkit-box-reflect: below -10px -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(transparent),
      color-stop(3%, transparent),
      to(rgba(250, 250, 250, 0.4))
    );
}
.logobox {
  border: #37a8db 0px solid;
  display: flex;
  align-items: center;
  justify-content: center; margin-top: -5px; padding-bottom: 5px;
}
.logobox > * {
  flex: 100%;
  padding: 4px;
}

.bottomfooter {
}

.hrpink {
  background-color: #6826a0;
  background-image: linear-gradient(90deg, #3d0965, #6826a0, #3d0965);

  height: 4px;
}

.hrblue {
  background-color: #0041b4;
  background-image: linear-gradient(90deg, #002e9f, #0041b4, #002e9f);

  height: 5px;
}

.hranim {
  border: 0;
  border-bottom: $separator-size $separator-border-style $separator-border-color;

  width: 0;
  animation: separator-width 2s ease-out forwards;
}
@keyframes separator-width {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.maincontent {
  width: 94%;
  display:contents; align-items: center; justify-content: center;
   padding: 0px; margin: 0;
}
.maincontent p{line-height: 1.6em; letter-spacing: 0.1em; font-size: 14px; }

#tabintro{ width: 100%; height: 60vh !important;}
#tabintro ul{margin: 0px; padding: 0px;}

.accslide p{ word-break: break-all; white-space: normal; }


.pencilline{ width: 100%; text-align: center; display: block;}




.slider {
  height: 80vh;
  width: 100%;
  background: url("../images/sliderbg.svg") center no-repeat; background-size: 100%;
  background-color: #002e9f;
   display:grid; text-align: center; 

  
}


/* Text slider */
.container-fluid {
  padding-right: 0px !important;
  padding-left: 0px !important;
}
#myPageContent, section { 
height:100% !important; 
width:100% !important;
}


/* Slider */
#textSlider.row {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75% !important; 
}
#textSlider div {
color: #FFF;

text-transform: uppercase; z-index: -1000;
}

.iamCol {
  
font-weight: 300;
font-size:24pt;
line-height: 1.8em;
}
.iamCol p:nth-child(2) { margin-top: -20pt !important; }
.slideCol {
text-align:center;
  overflow: hidden;
font-weight: 750;
font-size:52pt; letter-spacing: 0.1em;
display: block;
white-space: nowrap;
}
.slideCol p { margin: 0 0 !important; }

.scroller {
 height: 70pt;
 line-height: 70pt;
 overflow: hidden;
}

.inner:before {
content: '|';
left: 0px;
}
.inner:after {
content: '|';
position: absolute;
right: 0;
}
.inner:after, .inner:before {
position: absolute;
color: #fff;
top: 0; 
-webkit-animation-name: opacity;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-name: opacity;
animation-duration: 2s;
animation-iteration-count: infinite;
}

@keyframes opacity {
0%, 100% {
  opacity: 0;
}
50% {
  opacity: 1;
}
}

.scroller .inner { animation: 10s normal infinite running scroll; }
@keyframes scroll {
 0%  	{margin-top: 0px;}
 15% 	{margin-top: 0px;}

 25%  {margin-top: -70pt;}
 40%  {margin-top: -70pt;}
 
 50%  {margin-top: -140pt;}
 65%  {margin-top: -140pt;}

 75%  {margin-top: -210pt;}
 90%  {margin-top: -210pt;}

 100% {margin-top: 0px;}
}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) and (max-width : 479px) {
#textSlider.row { margin-right: 0px !important; margin-left: 0px !important; }
  .iamCol { text-align: center; font-size:20pt; }
.iamCol p { display: inline !important; }
.slideCol { font-size: 15pt; text-align: center; margin-top: -20px; }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) and (max-width : 765px) {
#textSlider.row { margin-right: 0px !important; margin-left: 0px !important; }
  .iamCol { text-align: center; font-size:25pt; }
.iamCol p { display: inline !important; }
.slideCol { font-size: 30pt; text-align: center; margin-top: -20px; }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (max-width : 992px) {
#textSlider.row { margin-right: 0px !important; margin-left: 0px !important; }
.iamCol { text-align: center; font-size:25pt; }
.iamCol p { display: inline !important; }
.slideCol { font-size: 30pt; text-align: center; margin-top: 5px; }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) and (max-width : 1200px) {
#textSlider.row { margin-right: 0px !important; margin-left: 0px !important; }
.iamCol { text-align: right; font-size:25pt; }
.slideCol { font-size: 30pt; text-align: left; }
}
/* //Text slider */










/* Tab Intro LIST */
ul {
  list-style: none; margin-left: -40px; 
}

/* FORM */
input {
  position: absolute;
  top:auto;
  left:auto;  visibility:hidden;
}

label {
  display: block;
  float: left;
  height: 60vh;
  width: 40px;
  overflow: hidden;
  background: #30354a;
  text-align: center;
  font-size: 14px;
  line-height: 50px;
  transition: background 300ms ease;
}
label:hover {
  transition-duration: 0s;
}

li:nth-child(even) > input + label {
  background: #3a4059;
}

label:hover,
li:nth-child(even) > input + label:hover {
  background: #2196f3;
  color: #fff;
  cursor: pointer;
}

input[type=radio]:checked ~ label {
  background: #2196f3;
  color: #fff;
  cursor: default !important;
}

/* SLIDES */
.accslide {
  display: block;
  height: 60vh;
  width: 0px;
  padding: 10px 0;
  float: left;
  overflow-x: hidden; overflow-y: scroll;
  font-sizes: 12px;
  line-height: 1.5;
  white-space: nowrap;
  transition: all 700ms ease;
}
.accslide * {
  padding-left: 10px; padding-right: 10px;
}
.accslide img {
  margin-top: 10px;
}

input[type=radio]:not(:checked) ~ label > * {
  padding-left: 7px;
  font-size: 1.4em;
  white-space: nowrap;
  transform: rotate(90deg); font-weight: 600; letter-spacing: 0.1em;
}

input[type=radio]:checked ~ label > * {
  display: none;
}

li:nth-child(1):nth-last-child(2) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 80px);
}

li:nth-child(2):nth-last-child(1) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 80px);
}

li:nth-child(1):nth-last-child(3) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 120px);
}

li:nth-child(2):nth-last-child(2) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 120px);
}

li:nth-child(3):nth-last-child(1) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 120px);
}

li:nth-child(1):nth-last-child(4) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 160px);
}

li:nth-child(2):nth-last-child(3) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 160px);
}

li:nth-child(3):nth-last-child(2) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 160px);
}

li:nth-child(4):nth-last-child(1) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 160px);
}

li:nth-child(1):nth-last-child(5) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(2):nth-last-child(4) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(3):nth-last-child(3) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(4):nth-last-child(2) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(5):nth-last-child(1) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 200px);
}

li:nth-child(1):nth-last-child(6) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(2):nth-last-child(5) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(3):nth-last-child(4) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(4):nth-last-child(3) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(5):nth-last-child(2) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(6):nth-last-child(1) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 240px);
}

li:nth-child(1):nth-last-child(7) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(2):nth-last-child(6) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(3):nth-last-child(5) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(4):nth-last-child(4) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(5):nth-last-child(3) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(6):nth-last-child(2) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(7):nth-last-child(1) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 280px);
}

li:nth-child(1):nth-last-child(8) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(2):nth-last-child(7) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(3):nth-last-child(6) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(4):nth-last-child(5) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(5):nth-last-child(4) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(6):nth-last-child(3) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(7):nth-last-child(2) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 320px);
}

li:nth-child(8):nth-last-child(1) input[type=radio]:checked ~ .accslide {
  width: calc(100% - 320px);
}
/* //Tab Intro */

/* Skill Bars */


.skillbar {
  position: relative;
  display: block;
  width: 96%;
  margin-bottom: 15px; 
}

.skillbar-bar:before {
  background: #eee;
  content: "";
  height: 5px;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.skillbar-bar {
  height: 5px;
  width: 0px;
  background: #8d41c6;
  transition-property: width, background-color;  
}

.skillbar-title {
 
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block; color:#fff !important;
}

.skill-bar-percent {
  float: right;
  display: inline-block;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
/* //Skill Bars */

/* Experience */
.experience-area{ border:solid 1px #e0a6d9; border-radius: 4px;  padding: 20px 15px; float: right; margin: 10px;  }
.experience-area h3{
    font-weight: 600;
}

.experience-area h3, h5 {
    margin: 0 0 10px;
}

.experience-area h5{
    font-style: italic;
    text-transform: uppercase;
}

.content{ margin-right: 20px;}
/* //Experience */





/* Education */
.education-area{ border:solid 1px #2dc6ef; border-radius: 4px;   padding: 20px 15px; float: right; margin: 10px; }

.education-area h3{
    font-weight: 600;
}

.education-area h3, h5 {
    margin: 0 0 10px;
}

.education-area h5{
    font-style: italic;
    text-transform: uppercase;
}

/* //Education */




.logotext img{width: 10rem;}



.socials a i {
 
  text-align: center;
  display: inline-block;
  padding: 9px;
  font-size: 18px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #333333;
  color: #ffffff;
}

.socials a i:hover {
  border-color: #9245c7;
  color: #fff;
  background: #9245c7;
  -webkit-transition: ease .5s;
  -moz-transition: ease .5s;
  -ms-transition: ease .5s;
  -o-transition: ease .5s;
  transition: ease .5s;
}









/*---------------7. Services area Starts--------------*/

.services-area {
  background-color:transparent;
}

.services-icon i {
  font-size: 35px;
  color: #ffffff;
}

.services-content h3 {
  line-height: 1.9;
  text-transform: uppercase;
}

.services-icon {
  border: 1px solid #2196f3;
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 20px;
  background-color: #2196f3;
}

.single-services {
  padding: 40px 20px;
  box-shadow: rgba(58,78,95,0.2) 0 10px 16px, rgba(58,78,95,0.05) 0 -5px 16px;
  margin-bottom: 15px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px; border: 1px #fff solid;
height:360px ;
}

.single-services:hover {
  box-shadow: 1px 3px 4px 5px rgba(63, 63, 63, 0.8);
  transition: ease .09s;
}

.single-services:hover .services-icon{
  background-color: #ffffff;
  transition: ease .3s;
  border-color: #2196f3;
}

.single-services:hover .services-icon i{
  color: #2196f3;
}

.single-services:hover{
  background-color: rgba(33, 150, 243, 0.2);
  -webkit-transition: .9s;
  -moz-transition: .9s ;
  -ms-transition: .9s ;
  -o-transition: .9s ;
  transition: .9s ;    
}
.single-services:hover .services-content{
  color: #ffffff;
}
.single-services:hover .services-content h3{
  color: #ffffff;
}

.services-content a{ color: #FFF; text-decoration: none;}

/*--------------- Services area ends --------------*/




.bluebars li{ height: 60vh; display: inline;}


.webiframe{width: 90%; height: 100%;}











.footertext{ margin: 0 auto; 
  text-align: center; width: 100%; 
  color:#ffffff; 
  z-index: 10000; position: absolute;  margin-top: 7vw;
 
}








/* testimonials */

.owl-carousel .owl-item {
  transition: all 0.3s ease-in-out; height:650px !important;
}

.owl-carousel .owl-item .card {
  padding: 30px;
  position: relative;
}

.owl-carousel .owl-stage-outer {
  overflow-y:hidden !important;
 
}

.owl-carousel .owl-item img {
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.owl-carousel .owl-item .card .name {
  
  bottom: -30px;
  left: 33%;
  color: #ffffff;
  font-size: 1.1rem; 
  font-weight: 600;
  background-color: #0970d5;
  padding: 1rem 1rem;
  border-radius: 4px;
  box-shadow: 1px 1px 2px #434343;
}

.owl-carousel .owl-item .card {
  opacity: 0.2;
  transform: scale3d(0.8, 0.8, 0.8);
  transition: all 0.3s ease-in-out;
}

.owl-carousel .owl-item.active.center .card {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}

.owl-carousel .owl-dots {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.owl-theme .owl-dots .owl-dot span {
  height: 20px;
  background: #ffffff !important;
  border-radius: 2px !important;
  opacity: 0.8;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  height: 15px;
  width: 15px;
  opacity: 1;
  transform: translateY(2px);
  background: #b662d2 !important;
}

@media(min-width: 480.6px) and (max-width: 575.5px) {
  .owl-carousel .owl-item .card .name {
      left: 24%;
  }
}

@media(max-width: 360px) {
  .owl-carousel .owl-item .card .name {
      left: 30%;
  }

}


.card a{ color: #b662d2; margin-top: 10px;}
.card a:hover{ color: #0970d5; }


















:root {
  /* Font Color */
  --light-theme: #f8f9fa;
  
  /* Circle Width */
  --circle-diameter: 400px;

  /* Font Family */
  --fonts-style-x: 'neuzeit-grotesk', sans-serif;
  --fonts-style-y: 'neuzeit-grotesk', sans-serif;

  /* Font Weight */
  --light: 300;
  --regular: 400;
  --bold: 700;
  --black: 900;

}


/* ------------- */
/* Basic Setting */
/* ------------- */


main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50vh;
 
  background-color: var(--black);
}

::selection {
  color: #fff;
  background-color: var(--light-theme);
}


/* ------------- */
/* Content Style */
/* ------------- */

.google-map {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  overflow: hidden;
  border-radius: var(--circle-diameter);
  background-color: #eee;
  transition: 5000ms;
  cursor: grab;
}

/*
.google-map::after {
  content: "";
  position: absolute;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  border-radius: var(--circle-diameter);
  background: radial-gradient(circle, #ffffff00 0%, #f8f9fa 50%);
  pointer-events: none;
}
*/

.google-map .map-frame {
  width: 100vw;
  height: 100vh;
  background-color: var(--light-theme);
}

.google-map iframe {
  position: relative;
  width: 100vw;
  height: 100vh;
  pointer-events: visibleStroke;
}


/* ------------------ */
/* Interactive Effect */
/* ------------------ */

.google-map:hover {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}











/* ------------------ */
/* FORM */
/* ------------------ */

form {
  max-width: 600px;
  text-align: center;
  margin: 20px auto;


 
 input, textarea {
    border:0; outline:0;
    padding: 1em;
    @include border-radius(8px);
    display: block;
    width: 100%;
    margin-top: 1em;
    font-family: 'Merriweather', sans-serif;
    @include box-shadow(0 1px 1px rgba(black, 0.1));
    resize: none;
  
 }

 #name{padding: 2em;}
 #email{padding: 2em;}
 #phone{padding: 2em;}
 
 #input-submit {
    color: #FFF; 
  
    cursor: pointer; font-weight: 600;
    background:#0970d5;
   
   
 }

 #input-reset {
  color: #FFF; 

  cursor: pointer; font-weight: 600;
  background:#49a3fc;
 
 
}

 textarea {
     height: 280px; border-radius: 20px;
 }
 textarea:hover {
  border-radius: 15px;
}
}


.half {
 float: left;
 width: 48%;
 margin-bottom: 1em;
}

.right { width: 50%; }

.left {
    margin-right: 2%; 
}


@media (max-width: 480px) {
 .half {
    width: 100%; 
    float: none;
    margin-bottom: 0; 
 }
}


/* Clearfix */
.cf:before,
.cf:after {
   content: " "; /* 1 */
  /* display: table;  2 */
}

.cf:after {
   clear: both;
}
.cf input {
  position:static;
  top:auto;
  left:auto;  visibility:visible; border-radius: 20px;
}

.cf input:hover {
  border-radius: 15px;
}








/* ------------------ */
/* BACK TO TOP */
/* ------------------ */



#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgba(184, 99, 243, 0.8);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}











.call{ letter-spacing: 4px;font-weight: 400;color: #8dc7ef; text-align: center; 
  margin: 0 auto; margin-left: 8rem; }
.call a{transition:  200ms ease-out;float: left; color: #8dc7ef; text-decoration: none; width: 14vw;}
.number{color: #fff;float: left;}










@media (min-width: 1900px) and (max-width: 1960px){


.content p { font-size: 2em;}
.content h3 {font-size: 2em;}
.content h5 { font-size: 2em;}
.services-content p{font-size: 1.3em;}
}


@media (min-width: 350px) and (max-width: 480px){

.slider{height: 35vh;}

#textSlider.row{top: 20%;}

.accslide h1{ font-size:1em;}

.accslide h3{ font-size:1em;}

.accslide h5{ font-size:1em;}
}