* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
@font-face {
  font-family: "Montserrat";
  src: url('../fonts/Montserrat/static/Montserrat-Medium.ttf') format("truetype");
}
@font-face {
  font-family: "Montserrat";
  src: url('../fonts/Montserrat/static/Montserrat-SemiBold.ttf') format("truetype");
}
body{
  font-family:"Montserrat", sans-serif;
}

.banner{
    background-image: url(../images/bg-1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
  
}
.banner-image img{
    width: 65%;
    margin-left:2px;
}
.banner-text{
    font-family: montserrat, sans-serif;
    background-color:#2437631c;
    padding: 25px;
    margin-top: 15px;
    width: 100%;
}
.banner-text h2{
  color: #243763;
  font-size: 26px;
  font-weight: bold;
  margin-left:20px;
}
.banner-text p{
  color: #243763;
  font-size: 22px;
  margin-left:20px;
}
 .banner-icon{
  background-color:#2437631c;
  padding: 5px;
  margin-top: 30px;
  border-top-right-radius:50px;
  width:90%;
}
.banner-icon .list-home{
  margin-left: -25px;
}
.list-home p{
   margin-top:30px;
   font-size:20px;
}
/*.banner-icon .banner-home{*/
/*  position: absolute;*/
/*  height: 53px;*/
/*  width: 53px;*/
/*  border-radius: 50%;*/
/*  border: 8px solid #ececec;*/
/*  background-color: #2437631c;*/
/*  margin-top:-25px;*/
/*}*/
.navbar_logo{
  position:absolute;
}
.navbar-brand img{
    width: 11%;
    margin-top: 10px;
    margin-left: -22px;
}
 .auto-icon{
  position: absolute;
  cursor: pointer;
  height: 53px;
  width: 53px;
  border-radius: 50%;
  border: 8px solid #ececec;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -45px;
  background-color: #2437631c;
}
.auto-icon img {
  width:70%;
}
.auto-icon img::after {
  transition: .5s;
  font-family: monospace;
  content: '';
  color: #f19038;
  font-size: 25px;
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid #f19038;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}
/*.cube-image{*/
/*  margin-top: 28px;*/
/*}*/
.cube-image img{
  width: 75%;
  margin-left: 88px;
}

.navigation{
  position: relative;
  top: 86% !important;
  z-index: 9999;
  position: fixed;
}
.banner-icon {
  background-color: #dee2e6;
  padding: 0px;
  margin-top: 40px;
  border-top-right-radius: 50px;
  width: 100%;
  border: 1px solid #adb5bd;
}
.banner-icon .list-home{
  margin-left: -60px;
}
.list-home p{
   margin-top:30px;
   font-size:20px;
   color:#243763;
}
.banner-icon .banner-home {
  position: absolute;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  border: 3px solid #adb5bd;
  background-color: #dee2e6;
  margin-top: -45px;
  padding: 5px;
}
.banner-icon ul{
  list-style-type: none;
  right: 10px;
  position: relative;
  }
  .banner-icon ul li{
    display: inline-block;
    margin: 0 13px;
  }
  .banner-icon ul li img{
    width: 35px;
    margin-top: 15px;
  }




.services {
  position: relative;
  right: 2rem;
  top: 90% !important;
  z-index: 9999;
  position: fixed;
}
.button {
  color: #E3DFE9;
  font-size: 18px;
  background: #2437638c;
  border-radius: 50%;
  padding: 10px 3px;
  width: 70px;
  height: 70px;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  margin-bottom: 15px;
  border: 2px solid #e5dede;
  margin-left: 160px;
}

.button:hover {
  color: #DBD7E0;
  transform: translateY(3px);
}
.button img {
  width: 79%;
  margin-left: 6px;
}
.dropdown {
  position: relative;
  color: #E3DFE9;
  font-size: 18px;
  background: white;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 15px;
  display: block;
  cursor: pointer;
  width: 235px;
  transform: scale(0.01);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
  transform-origin: center top;
  overflow: hidden;
  margin-top: -290px;
}

.dropdown.open {
  transform: scale(1);
  opacity: 1;
  box-shadow: 3px 3px 30px rgba(118, 96, 168, 0.15);
}

.dropdown a {
  position: relative;
  color: #6C6185;
  text-decoration: none;
  display: block;
  padding: 12.5px 30px;
  transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
  overflow: hidden;
}

.dropdown a.clicked {
  padding-left: 35px;
  color: #987CD9;
}

.dropdown a:hover {
  color: #987CD9;
  padding-left: 35px;
}

span {
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0px;
  position: absolute;
  background: #987CD9;
  transition: width 0.4s ease;
  border-radius: 1px;
}

span.clicked {
  width: 5px;
} 


@media (max-width: 390px){
  .banner{
    background-image: url(../images/mobile-view.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    display: flex;
}
.banner-text {
  padding: 14px;
}
.banner-text h2 {
  font-size: 15px;
}
.banner-text p {
  font-size: 12px;
}
  .banner-icon{
    padding:0px;
    margin-top: 10px;
    height: 45px;
    border-radius:25px;
  }
  .cube-image img {
    width: 69%;
    margin-left: 60px;
}
  .banner-image img {
    margin-left: unset;
    width:50%;
}
#wrapper{
  margin-left:10% !important;
  margin-top:50px !important;
 }
 .cube > div{
  zoom:75% !important;
 }
 .cube-img {
  background-image: unset!important;
}
.cube-image {
  margin-top: 28px;
}
.banner-icon .banner-home {
  padding: 2px;
}
.banner-icon .banner-home {
    height: 32px;
    width: 32px;
    margin-top: -35px;
    margin-left: 20px;
}
.list-home p {
  margin-top: 22px;
  font-size: 12px;
}
  .banner-icon .list-home {
    margin-left: -70px;
}
.banner-icon ul li img {
  width: 28px;
  margin-top:8px;
}
.banner-icon ul li {
  margin: 0 13px;
}
.navigation {
  top: 90% !important;
}
.navbar-brand img {
    width: 25%;
    margin-left: 4px;
}
.dg{
  width:50%;
}
.service-menu{
  padding:0px !important;
}
.service-menu h4 {
  font-size: 12px !important;
  margin-top: 3px;
}
.service-split i {
  margin-left: -94px !important;
  font-size:10px !important;
}
.service-mobile{
  margin-left: 188px;
  margin-top: -81px !important;

}
}


  @media (min-width: 391px) and (max-width: 900px) {
    .banner{
      background-image: url(../images/mobile-view.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 100vh;
      display: flex;
  }
.cube-image {
  margin-top: 32px;
}
.cube-image img {
  width: 60%;
  margin-left: 80px;
}
.banner-head{
    margin-top:100px;
}
.banner-image img {
 margin-left: 0px;
width: 45%;
margin-top: -20px;
}
.banner-text {
  padding: 10px;
}
.banner-text h2 {
  font-size: 18px;
}
.banner-text p {
  font-size: 12px;
}
.dg{
  width:50%;
}
.service-menu{
  padding:0px !important;
}
.service-menu h4 {
  font-size: 12px !important;
  margin-top: 3px;
}
.service-split i {
  margin-left: -94px !important;
  font-size:10px !important;
}
.service-mobile{
  margin-left: 200px;
  margin-top: -72px !important;
}
#wrapper{
  margin-left:10% !important;
 }
 .cube > div{
  zoom:70% !important;
 }
 .banner-icon{
  padding:0px;
  margin-top: 10px;
  height: 45px;
  border-radius:25px;
}
 .banner-icon .banner-home {
  padding: 2px;
}
.banner-icon .banner-home {
    height: 32px;
    width: 32px;
    margin-top: -35px;
    margin-left: 20px;
}
.list-home p {
  margin-top: 22px;
  font-size: 12px;
}
/*  .banner-icon .list-home {*/
/*    margin-left: unset;*/
/*}*/
.banner-icon ul li img {
  width: 28px;
  margin-top:8px;
}
.banner-icon ul li {
  margin: 0 13px;
}
.navigation {
  top: 89% !important;
}
.navbar-brand img{
  width: 22%;
  margin-top: 10px;
  margin-left: -51px;
}
.navbar_logo{
    position:absolute;
}
.cube-img {
  background-image: unset!important;
}
}



 @media (min-width: 901px) and (max-width: 991px) {
    .banner{
      background-image: url(../images/mobile-view.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      min-height: 100vh;
      display: flex;
  }
 /*  #wrapper{*/
 /*        margin-top: 64px !important;*/
 /*       margin-left:25% !important;*/
 /*}*/
  .cube-image {
  margin-top: 32px;
}
.cube-image img {
  width: 60%;
  margin-left: 80px;
}
.banner-head{
    margin-top:100px;
}
.banner-image img {
 margin-left: 0px;
width: 45%;
margin-top: -20px;
}
.banner-text {
  padding: 10px;
}
.banner-text h2 {
  font-size: 18px;
}
.banner-text p {
  font-size: 12px;
}
.cube-img {
  background-image: unset!important;
}
 }
 
/* @media (min-width: 992px) and (max-width: 1010px){*/
/*     .banner{*/
/*      background-image: url(../images/mobile-view.jpg);*/
/*      background-position: center;*/
/*      background-repeat: no-repeat;*/
/*      background-size: cover;*/
/*      min-height: 100vh;*/
/*      display: flex;*/
/*  }*/
    
/*     #wrapper{*/
/*         margin-top: 64px !important;*/
/*        margin-left:25% !important;*/
/* }*/
/* .cube > div{*/
/*  zoom:85% !important;*/
/* }*/
/* .banner-text p {*/
/*    font-size: 16px;*/
/*}*/
/* }*/
 
 

@media only screen and (max-width: 1024px){
  #wrapper {
    margin-top: 80px!important;
    margin-left: 23px!important;
}
.cube > div {
  zoom: 80%!important;
}
.cube-img {
  height: 137%!important;
}
  .navbar-brand img {
    width: 20%;
  }
}
  
 
 


.service-split{
  margin-top:10px;
}
.service-split a{
  text-decoration:none;
}
.service-split i{
  position: absolute;
  margin-left: -108px;
  margin-top: -5px;
  color: #ffc107;
  font-size: 14px;
  /* border: 1px solid #000; */
  border-radius: 25px;
  padding: 6px;
  background-color: #fff;
  box-shadow: 5px 10px 8px #888888;
  }
.service-menu{
    background-color: #dee2e6;
    border-radius: 25px;
    padding: 6px;
    border: 1px solid #ffff;
    text-align: center;
}
.service-menu h4{
  font-size:18px;
  color:#243763;
}

.cube i{
  font-size: 45px;
  color:#fff;  
 }
 .cube p{
  font-size:20px;
  color:#fff;
  }
 .cube-image{
  transform: rotate(90.2122deg);
  text-align: center;
   margin-top: 60px;
 }
 
 #wrapper {
 margin-top: 80px;
 margin-left: 15px;
}
.cube-img {
  background-image: url(../images/circle.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 150%;
  margin-top: -100px;
  padding-top: 150px;
}


.viewport {
 -webkit-perspective: 800px;
 -moz-perspective: 800px;
 -ms-perspective: 800px;
 -o-perspective: 800px;
 perspective: 800px;
 -webkit-perspective-origin: 50% 200px;
 -moz-perspective-origin: 50% 200px;
 -ms-perspective-origin: 50% 200px;
 -o-perspective-origin: 50% 200px;
 perspective-origin: 50% 200px;
 -webkit-transform: scale(0.8, 0.8);
 -moz-transform: scale(0.8, 0.8);
 -ms-transform: scale(0.8, 0.8);
 -o-transform: scale(0.8, 0.8);
 transform: scale(0.8, 0.8);
 -webkit-box-reflect: below 170px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, 0.1))); }

.cube {
 position: relative;
 margin: 0 auto;
 height: 200px;
 width: 200px;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform: rotateX(136deg) rotateY(1122deg);
 -moz-transform: rotateX(136deg) rotateY(1122deg);
 -ms-transform: rotateX(136deg) rotateY(1122deg);
 -o-transform: rotateX(136deg) rotateY(1122deg);
 transform: rotateX(136deg) rotateY(1122deg); }

 .cube a{
  text-decoration: none;
  color: #ffffff;
}
.cube > div {
 overflow: hidden;
 position: absolute;
 /* opacity: 0.9; */
 height: 200px;
 width: 200px;
 -webkit-touch-callout: none;
 -moz-touch-callout: none;
 -ms-touch-callout: none;
 -o-touch-callout: none;
 touch-callout: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none; 
 zoom: 90%!important;
 /* background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgb(9 9 121 / 62%) 35%, rgba(0,212,255,1) 100%); */
 /* background: linear-gradient(90deg, rgb(1, 0, 14) 0%, hsla(240, 88%, 3%, 0.733) 35%, rgba(18, 23, 24, 0.774) 100%); */
 /* background: linear-gradient(90deg, #cccccc 35%, #ffffff 100%); */
 /* background-image: url('../images/roman.jpg'); */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid #394867;
}

.cube > div > div.cube-image {
 width: 200px;
 height: 200px;
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);
 line-height: 200px;
 font-size: 24px;
 text-align: center;
 color: #1b9bd8;
 -webkit-transition: color 600ms;
 -moz-transition: color 600ms;
 -ms-transition: color 600ms;
 -o-transition: color 600ms;
 transition: color 600ms; }
 .cube > div > div.cube-image.active {
   color: red; }

.cube > div:hover {
 cursor: pointer; }

.cube > div:active {
 cursor: pointer; }

.cube > div:first-child {
 -webkit-transform: rotateX(90deg) translateZ(100px);
 -moz-transform: rotateX(90deg) translateZ(100px);
 -ms-transform: rotateX(90deg) translateZ(100px);
 -o-transform: rotateX(90deg) translateZ(100px);
 transform: rotateX(90deg) translateZ(100px);

}
.cube > div:nth-child(2) {
 -webkit-transform: translateZ(100px);
 -moz-transform: translateZ(100px);
 -ms-transform: translateZ(100px);
 -o-transform: translateZ(100px);
 transform: translateZ(100px);
 /* outline: 1px solid #cac6c6;  */
}

.cube > div:nth-child(3) {
 -webkit-transform: rotateY(90deg) translateZ(100px);
 -moz-transform: rotateY(90deg) translateZ(100px);
 -ms-transform: rotateY(90deg) translateZ(100px);
 -o-transform: rotateY(90deg) translateZ(100px);
 transform: rotateY(90deg) translateZ(100px);
 /* outline: 1px solid #cac6c6; */
}

.cube > div:nth-child(4) {
 -webkit-transform: rotateY(180deg) translateZ(100px);
 -moz-transform: rotateY(180deg) translateZ(100px);
 -ms-transform: rotateY(180deg) translateZ(100px);
 -o-transform: rotateY(180deg) translateZ(100px);
 transform: rotateY(180deg) translateZ(100px);
 /* outline: 1px solid #cac6c6; */
}

.cube > div:nth-child(5) {
 -webkit-transform: rotateY(-90deg) translateZ(100px);
 -moz-transform: rotateY(-90deg) translateZ(100px);
 -ms-transform: rotateY(-90deg) translateZ(100px);
 -o-transform: rotateY(-90deg) translateZ(100px);
 transform: rotateY(-90deg) translateZ(100px);
 /* outline: 1px solid #cac6c6; */
}

.cube > div:nth-child(6) {
 -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
 -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
 -ms-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
 -o-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
 transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
 /* outline: 1px solid #cac6c6;  */
}

object {
 opacity: 0.5; }

object:hover {
 opacity: 1; }

@media (max-width: 640px) {
 .viewport {
   -webkit-transform: scale(0.6, 0.6);
   -moz-transform: scale(0.6, 0.6);
   -ms-transform: scale(0.6, 0.6);
   -o-transform: scale(0.6, 0.6);
   transform: scale(0.6, 0.6); 
 }
}

@media only screen and (max-width: 1199px){
  #wrapper {
    margin-top: 71px;
    margin-left: 25px;
}
.cube-img {
  height: 134%;
  margin-top: -60px;
  padding-top: 148px;
}
.cube > div {
  zoom: 80%!important;
}
}


 @media (min-width: 1200px) and (max-width:1399px) {
     #wrapper {
    margin-top: 95px!important;
     }
 }