/*

---------------------------------------------
Table of contents
------------------------------------------------
1
--------------------------------------------- */

html {font-family: 'Open Sans', sans-serif;}
/* Typography */
p, a {font-weight: 400;}
.h2 {font-size: 40px;}
.h3 {font-size: 28px;}
.light-300 {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 300;
}
.regular-400 {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 400;
}
.semi-bold-600 {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600;
}
.typo-space-line::after,
.typo-space-line-center::after {
  content: "";
  width: 150px;
  display:block;
  position: absolute;
  border-bottom:  5px solid #8bc3f8;
  padding-top: .5em;
}
.typo-space-line-center::after {
  left: 50%;
  margin-left: -75px;
}
/* Main Nav */
#main_nav .nav-item .nav-link:hover {
  color: #fff;
  
}


#main_nav {
  /* background-image: url("../img/navbanner1.JPG"); */
  background-color: #050541;

  /* background-position: center; */
  /*
  background-size: cover;
  background-repeat: no-repeat; */
}
/* Home */
#index_banner {
  /* background-image: url("../img/banner-bg-01.jpg"); */
  background-position: center center;
  background-size: cover;
  height: 100%;
  min-height: 60vh;
  width: 100%;
}

#index_banner .carousel-item {
  min-height: 75vh; 
  margin-top: -30px;  
   /* margin-left: -125px; */
}

#index_banner .carousel-items {
  min-height: 60vh;
  /* margin-top: -35px;  */
}
#index_banner .carousel-control-prev i,
#index_banner .carousel-control-next i {
  color: #060668 !important;
  text-decoration: none;
  font-size: 4em;
}
#index_banner .carousel-inner {
  height: 75vh;
  width: 100%;
}

#index_banner .carousel-indicators li,
#index_banner .carousel-indicators.active {
  background-color: #060668 !important;
  
}
.service-wrapper .service-footer {
  max-width: 720px;
}
.service-work.card {
  border-radius: 10px !important;
  cursor: pointer;
}
.service-work .service-work-vertical {
	background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 33.33%, rgba(255,255,255,1) 66.66%, rgba(255,255,255,0) 99.99%);
  background-size: 300% 300%;
  background-position: 0% 100%;
  transition: .5s;
}
.service-work .service-work-vertical:hover {
  background-position: 0% 0%;
  transition: .5s;
}
.service-work .service-work-vertical:hover * {
  color: #000;
  border-color: #000;
  transition: .5s;
}
.recent-work.card{
  border-radius: 10px !important;
}
.recent-work .recent-work-vertical {
	background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33.333%, rgba(97,84,199,1) 66.666%, rgba(255,255,255,0) 99.999%);
  background-size: 300% 300%;
  background-position: 0% 100%;
  transition: .5s;
  cursor: pointer;
}
.recent-work .recent-work-vertical:hover {
  background-position: 0% 0%;
  transition: .5s;
}
.recent-work .recent-work-vertical:hover div.recent-work-content {
  top: 50%;
  margin-top: -2.5em;
  position: absolute;
}
.recent-work .recent-work-vertical:hover * {
  color: white;
  transition: .5s;
}
/* About */
#work_banner {
  background-image: url('./../img/banner-bg-02.jpg');
  background-position: center center; background-size: cover;
  height: 100%;
  width: 100%;
}
.progress {
  height: 8px;
}
.objective-icon {
  border-radius: 13px;
  width: 8rem;
}
.partner-wap {
  background-color: #6ca4f7;
  transition: 1s;
  cursor: pointer;
}
.partner-wap:hover {
  background-color: #b1b3f5;
}
.why-us {
  background: rgb(239,239,253);
  background: -moz-linear-gradient(0deg, rgba(239,239,253,1) 50%, rgba(255,255,255,1) 50%);
  background: -webkit-linear-gradient(0deg, rgba(239,239,253,1) 50%, rgba(255,255,255,1) 50%);
  background: linear-gradient(0deg, rgba(239,239,253,1) 50%, rgba(255,255,255,1) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#efeffd",endColorstr="#ffffff",GradientType=1);
}
.team-member-img {
  transition-duration: 0.15s;
}
.team-member:hover .team-member-img {
  padding: 10px !important;
}

/* Work */
/* Singel Work */
#work_single_banner {
  background-image: url('./../img/banner-bg-02.jpg');
  background-position: center center;
  background-size: cover;
  height: 100%;
  width: 100%;
}
.related-content {
  border-radius: 20px;
  cursor: pointer;
}
/* Pricing */
.pricing-list {
  margin-bottom: 1px;
}
.pricing-table {
  max-width: 350px;
  margin: auto;
}
.pricing-table,
.pricing-horizontal {
  border-radius: 15px !important;
}
/* Contact */
#floatingtextarea {
  height: 150px
}
/* Footer */
footer a.text-light:hover {
  color: #bfbfbf !important;
  transition-duration: 0.15s;
}


.dropdown-content a {
  text-decoration: none;
  display: block;
  color: #ffffff;
}

 .dropdown-content a:hover {
  color: #fff;
  background-color: #7e7e80;

} 

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

.dropdown-content {
  display: none;
  position: absolute; 
  background-color: rgb(68, 84, 106);
  min-width: 210px;
  box-shadow: 0px 8px 16px 0px rgb(56, 69, 91);
  z-index: 1;
  text-align: left;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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

 /* .nav-item {
  margin: 1px !important;
}  */

.address h6, 
.address p ,
.address a ,
.address h2{
  display: inline;
  color: #fff;
  text-decoration: none;
}
.scrolling-text-container {
  background-color: #050541;
  border-radius: 4px;
  overflow: hidden;
}

/* Inner container styles */
.scrolling-text-inner {
  display: flex;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 0;
}

/* Text styles */
.scrolling-text {
  display: flex;
  color: #ebe3e3ea;
}

.scrolling-text-item {
  padding: 0 30px;
}
.horizontal-center {
             background-color: #94949b;
             width: 100px; 
            justify-content: center; 
            align-items: center;
            text-align: center; 
             
}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
  animation: var(--direction) var(--marquee-speed) linear infinite;
}

/* Pause the animation when a user hovers over it */
.scrolling-text-container:hover .scrolling-text-inner>div {
  animation-play-state: paused;
}


/* Setting the Animation using Keyframes */
@keyframes scroll-left {
  0% {
      transform: translateX(90%);
  }

  100% {
      transform: translateX(-100%);
  }
}

@keyframes scroll-right {
  0% {
      transform: translateX(-100%);
  }

  100% {
      transform: translateX(0%);
  }
}
@media screen and (max-width: 1024px) and (max-height: 1024px) {
  #index_banner {
    max-height: 500px !important;
    position: relative;
    top: -30px !important;

  }
  

}
@media screen and (max-width: 376px) {
  .didyouknow .carousel-item {
    position:relative !important; 
    top: -190px !important;
     /* height: 100px; */
  }

  .didyouknow {
    max-height: 160px !important;
  }
  .carousel-item {
    /* margin-top: -110px; */
     /* margin-left: -125px; */
    max-height: 500px !important;
    width: 100%;
    position: absolute; 
    top: -200px !important; 
  } 
  
  .banner-wrapper {
    margin-top: -100px;
    height: 500px;
    max-height: 30vh;
    width: 100%;
 }
  #index_banner .carousel-indicators li {
    display: none;
  }

  #index_banner .carousel-control-prev i,
  #index_banner .carousel-control-next i {
    display: none; 
  }
}

@media screen and (min-width: 376px) and (max-width: 900px) and (max-height: 1000px) and (orientation:portrait) {

  .didyouknow {
    max-height: 200px !important;
  }

 
  .carousel-item {
    /* margin-top: -110px; */
     /* margin-left: -125px; */
    max-height: 500px !important;
    width: 100%;
    position: absolute; 
    top: -200px !important; 
  } 
  .banner-wrapper {
    margin-top: -100px;
    height: 500px;
    max-height: 30vh;
    width: 100%;
 }
  #index_banner .carousel-indicators li {
    display: none;
  }

  #index_banner .carousel-control-prev i,
  #index_banner .carousel-control-next i {
    display: none; 
  }

}

/* Media query for landscape*/
@media screen and (orientation:landscape)
{
  #index_banner .carousel-indicators li {
    display: none;
  }

  #index_banner .carousel-control-prev i,
  #index_banner .carousel-control-next i {
    display: none; 
  }
  
}