/********** Template CSS **********/
:root {
    --primary: #091E3E;
    --secondary:  rgba(194, 164, 29, 0.678);
    --light: #EEF9FF;
    --dark: #091E3E;
}

h1,
h2,
.font-weight-bold {
    font-weight: 700 !important;
}

h3,
h4,
.font-weight-semi-bold {
    font-weight: 600 !important;
}

h5,
h6,
.font-weight-medium {
    font-weight: 500 !important;
}

.btn {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    transition: .5s;
}

.btn-primary,
.btn-secondary {
    color: #FFFFFF;
}
.slider {
  position: relative;
  background: #f6f7f9;
  margin-bottom: 50px;
}
.slider .slides {
  list-style: none;
  margin: 0;
  padding: 0;
  *zoom: 1;
}
.slider .slides:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}
.slider .slides li {
  float: left;
  width: 100%;
  margin-right: -100%;
  padding: 30px 0;
}
.slider .slides li img {
  float: right;
}
.slider .slide-caption {
  padding: 70px 50px 30px 0;
}
.slider .slide-title, .slider .slide-subtitle, .slider .slide-summary, .slider .button {
  -webkit-transition: .3s ease-in;
          transition: .3s ease-in;
  opacity: 0;
}
.slider .slide-title {
  color: #152559;
  margin: 0 0 10px;
  font-size: 55px;
  font-size: 3.4375em;
  -webkit-transform: scale(1.5);
      -ms-transform: scale(1.5);
          transform: scale(1.5);
  line-height: 55px;
}
.slider .slide-subtitle {
  color: #01a6d4;
  display: block;
  margin: 0 0 50px;
  font-weight: 300;
  font-size: 36px;
  font-size: 2.25em;
  -webkit-transform: scale(1.5);
      -ms-transform: scale(1.5);
          transform: scale(1.5);
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}
.slider .slide-summary {
  -webkit-transform: translateX(200px);
      -ms-transform: translateX(200px);
          transform: translateX(200px);
  -webkit-transition-delay: .6s;
          transition-delay: .6s;
  margin-bottom: 50px;
}
.slider .button {
  -webkit-transform: scale(0.3);
      -ms-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-transition-delay: .9s;
          transition-delay: .9s;
}
.slider .flex-active-slide .slide-title, .slider .flex-active-slide .slide-subtitle {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.slider .flex-active-slide .slide-summary {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
}
.slider .flex-active-slide .button {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.slider .flex-control-nav {
  list-style: none;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
.slider .flex-control-nav li {
  display: inline-block;
  margin: 0 2px;
}
.slider .flex-control-nav li a {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbccce;
  display: block;
  text-indent: -9999px;
  cursor: pointer;
}
.slider .flex-control-nav li a.flex-active {
  background: #01a6d4;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
 .box_main{
    width: 100%;
    float: left;
    background-color: #f4f1c3;
    height: auto;
    padding: 0px 20px 20px 20px;
    margin: 0px 20px 20px 20px;
}
.box_main:hover{
    background-color: #091E3E;
}
.box_main:hover .service_head{
    color: #ffffff;
}
.box_main:hover .readable_text{
    color: #ffffff;
}
.service_head{
    width: 100%;
    float: right;
    color: #0c0b0e;
    font-size: 22px;
    font-weight: 600;
    padding-left: 30%;
    padding-top: 8%;
}
.readable_text{
    width: 100%;
    float: left;
    color: #0c0b0e;
    font-size: 16px;
    margin: 0px;
    padding-top: 8%;
}
.image_3 {
    width: 100%;
    float: left;
    background-image: url(img/img-3.png);
    height: 94px;
    background-repeat: no-repeat;
    top: -40px;
    position: relative;
}
.box_main .image_3:hover{
    background-image: url(img/img-6.png);
}
.image_4 {
    width: 100%;
    float: left;
    background-image: url(img/img-3.png);
    height: 94px;
    background-repeat: no-repeat;
    top: -40px;
    position: relative;
}
.box_main .image_4:hover{
    background-image: url(img/img-6.png);
}
.image_4.active{
    background-image: url(img/img-6.png);
}
.image_5 {
    width: 100%;
    float: left;
    background-image: url(img/img-5.png);
    height: 94px;
    background-repeat: no-repeat;
    top: -40px;
    position: relative;
}
.box_main .image_5:hover{
    background-image: url(img/img-7.png);
}
.box_main.active{
    background-color: #091E3E;
    color: #ffffff;
}
.service_head{
    text-transform: uppercase;
}
.service_head.active{
    color: #ffffff;
    text-transform: uppercase;
}
.readable_text.active{
        color: #ffffff;

}
.button_serv.active{
    color: #ffffff;
    border-radius: 5%;
    border-color:  rgba(194, 164, 29, 0.678);
}

.btn-primary:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

.btn-secondary:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-square {
    width: 36px;
    height: 36px;
}

.btn-sm-square {
    width: 28px;
    height: 28px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

.top-shape::before {
    position: absolute;
    content: "";
    width: 35px;
    height: 100%;
    top: 0;
    left: -17px;
    background: var(--primary);
    transform: skew(40deg);
}

.navbar-light .navbar-nav .nav-link {
    font-family: Arial, Helvetica, sans-serif;
    padding: 35px 15px;
    font-size: 18px;
    color: var(--dark);
    outline: none;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 20px 15px;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link,
    .sticky-top.navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 19, 17, 0.884);
    z-index: 1;
}

@media (max-width: 576px) {
    .carousel-caption h5 {
        font-size: 14px;
        font-weight: 500 !important;
    }

    .carousel-caption h1 {
        font-size: 30px;
        font-weight: 600 !important;
    }
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}
@media (max-width: 380px) {
    .carousel-item {
        height: 280px;
    }
    .w-100{
        height: 280px;
    }

}
@media (max-width: 385px) {
    .carousel-item {
        height: 280px;
    }
    .w-100{
        height: 280px;
    }

}
@media (min-width: 991.98px) {
    .banner {
        position: relative;
        margin-top: -90px;
        z-index: 1;
    }
}

.section-title h5::before {
    position: absolute;
    content: "";
    width: 45px;
    height: 3px;
    right: -55px;
    bottom: 11px;
    background: var(--primary);
}

.section-title h5::after {
    position: absolute;
    content: "";
    width: 15px;
    height: 3px;
    right: -75px;
    bottom: 11px;
    background: var(--secondary);
}



/** second slide show css**/
.mains{
    width: min(1200px, 90vw);
    margin: auto;
    margin-top: 170px;
    margin-bottom: 70px;
}
.slider_part{
    width: 100%;
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 10% 90%,
        transparent
    );
    display: inline-block;
  white-space: nowrap;
}
.slider_part .list{
    display: flex;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
}
.slider_part .list .item{
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 20s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc( (20s / var(--quantity)) * (var(--position) - 1) - 20s)!important;
}
.slider_part .list .item img{
    height:50%;
     width:50%;
}
@keyframes autoRun{
    from{
        left: 100%;
    }to{
        left: calc(var(--width) * -1);
    }
}
.slider_part:hover .item{
    animation-play-state: paused!important;
    filter: grayscale(1);
}
.slider_part .item:hover{
    filter: grayscale(0);
}
.slider_part[reverse="true"] .item{
    animation: reversePlay 20s linear infinite;
}
@keyframes reversePlay{
    from{
        left: calc(var(--width) * -1);
    }to{
        left: 100%;
    }
}