/* variables */
 /*mixins*/
 /* mixin media query */
 /* mixin media query */
 /* mixin media query */
 /* mixin media query */
 /* scss */
 .loader-inner {
   background: #09304f;
 }

 a:hover {
   color: #09304f;
   text-decoration: none;
 }

 body {
   font-family: "Comfortaa";
   font-weight: 300;
 }

 header {
   color: #fff;
   z-index: 1000;
 }

 header a {
   color: #fff;
 }

 header::after {
   content: "";
   width: 100%;
   height: 2px;
   position: absolute;
   left: 0;
   bottom: -20px;
 }

 .nav-link {
   font-family: "Comfortaa";
   text-transform: uppercase;
 }

 .contact {
   font-size: 12px;
 }

 .tel {
   margin-right: 30px;
 }

 .contact i {
   color: #ee1515;
   margin-right: 10px;
 }

 .login {
   padding: 10px 20px;
   font-size: 14px;
   margin-right: 25px;
   text-transform: uppercase;
 }

 .contact a:hover,
 .login:hover {
   color: rgba(255, 255, 255, 0.5);
   text-decoration: none;
 }

 .login i {
   color: #ee1515;
   margin-right: 8px;
 }

 .navbar-brand h1 {
   margin: 0;
 }

 @media (max-width: 767px) {
   .navbar-brand {
     margin-top: 10px;
   }
 }

 .social {
   padding-left: 0;
   margin: 0;
   list-style: none;
 }

 .social li:not(:last-child) {
   margin-right: 20px;
 }

 .social a {
   font-size: 14px;
   display: inline-block;
   width: 40px;
   height: 40px;
   border: 1px solid #ee1515;
   border-radius: 4px;
   line-height: 40px;
   text-align: center;
   background-color: transparent;
   -webkit-transition: all 0.25s ease-in-out;
   transition: all 0.25s ease-in-out;
 }

 .social a:hover {
   color: #fff;
   background-color: #ee1515;
 }

 .navbar-collapse .search-form input[type="text"] {
   border: 1px solid #ced4da;
   color: #333;
   padding: 1.5625rem 0.625rem;
 }

 .navbar-collapse .search-form .btn {
   margin-top: 0;
   border-radius: 0;
   margin-left: -1px;
 }

 .navbar-collapse .nav-link {
   font-size: 1.125rem;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }

 .top-section {
   background-size: cover;
   overflow: hidden;
   position: relative;
   z-index: 0;
 }

 .top-section .container {
   position: relative;
   z-index: 5;
 }

 .top-section .slide-content {
   min-height: 600px;
   color: #fff;
 }

 .top-section .slide-content span {
   color: #ee1515;
 }

 .top-section .slide-content h1 {
   color: #fff;
   text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.56);
   text-transform: uppercase;
   -webkit-transform: matrix(0.93128, 0, 0, 0.93128, 0, 0);
   transform: matrix(0.93128, 0, 0, 0.93128, 0, 0);
   font-weight: bold;
 }

 .top-section .slide-content p {
   color: #170936;
   -webkit-transform: matrix(0.93128, 0, 0, 0.93128, 0, 0);
   transform: matrix(0.93128, 0, 0, 0.93128, 0, 0);
   padding: 35px 0 35px 30px;
   background-color: rgba(255, 255, 255, 0.51);
   border-top-right-radius: 100px;
   border-bottom-left-radius: 10px;
   margin-bottom: 0;
 }

 .top-section .slide-content .btn {
   margin-top: 50px;
 }

 .top-section .slide-content .btn:last-child {
   margin-left: 30px;
 }

 .top-section .arr-left,
 .top-section .arr-right {
   font-size: 3rem;
   display: block;
   color: #fff;
   text-align: center;
   position: absolute;
   top: 85%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   z-index: 9;
 }

 .top-section .arr-left:hover,
 .top-section .arr-right:hover {
   cursor: pointer;
 }

 .top-section .arr-right {
   right: 15px;
 }

 .top-section .diag-bg {
   width: 100%;
   height: 100%;
   -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);
   clip-path: polygon(0 0, 100% 100%, 100% 0);
   background-color: rgba(240, 0, 255, 0.1);
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
 }

 .top-section .texture {
   width: 100%;
   height: 100%;
   background: url("../images/kn-code.png");
   background-repeat: repeat-x;
   opacity: 1;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   bottom: 20px;
   background-position: center bottom 20px;
 }

 .top-section::after {
   content: "";
   width: 100%;
   height: 2px;
   background-color: rgba(255, 255, 255, 0.02);
   position: absolute;
   left: 0;
   bottom: 29%;
   display: none;
 }

 .top-section::before {
   content: "";
   width: 100%;
   height: 2px;
   background-color: rgba(255, 255, 255, 0.02);
   position: absolute;
   left: 0;
   bottom: 58%;
   display: none;
 }

 .title {
   font-weight: 700;
   text-transform: uppercase;
 }

 .title h6 {
   letter-spacing: 4px;
   margin-bottom: 20px;
 }

 .title h1 {
   font-size: 35px;
 }

 .title .title-blue {
   color: #26264b;
 }

 .title .title-primary {
   color: #ee1515;
 }

 .services {
   padding: 80px 0 50px;
 }

 .services .title {
   margin-bottom: 20px;
 }

 .services .media {
   margin: 40px 0;
 }

 .services h5 {
   color: #26264b;
   border-bottom: 2px solid #e7e7e7;
   padding-bottom: 5px;
   margin-bottom: 10px;
 }

 .featured {
   padding: 80px 0;
   background-color: #fafafa;
 }

 .featured p {
   margin: 35px 0 53px;
 }

 .featured .media i {
   font-size: 24px;
   color: #ee1515;
 }

 .featured .media h5 {
   text-transform: uppercase;
   color: #26264b;
 }

 .featured .btn {
   margin-top: 80px;
 }

 .featured-img {
   position: relative;
   height: 530px;
   margin-top: 60px;
 }

 .featured-big {
   position: absolute;
   bottom: 0;
   right: 0;
 }

 .featured-small {
   position: absolute;
   bottom: 0;
   left: 0;
   padding: 25px 25px 0 0;
   background-color: #fff;
 }

 .portfolio {
   padding: 20px 0 0;
   color: #ddd;
   position: relative;
 }

 .portfolio .title {
   margin-bottom: 20px;
 }

 .portfolio h1 {
   color: #fff;
 }

 .portfolio h5 {
   font-size: 42px;
   color: #FFF;
   margin: 0;
   font-family: "Comfortaa";
   font-weight: 700;
 }

 @media (max-width: 767px) {
   .portfolio h5 {
     font-size: 24px;
     line-height: 28px;
   }
 }

 .portfolio ul {
   color: #fff;
   -webkit-column-count: 2;
   column-count: 2;
 }

 .portfolio li {
   margin-bottom: 15px;
 }

 /*.portfolio .gallery img {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
  }
  
  .portfolio .gal-img {
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  
  .portfolio .gal-img i {
    font-size: 72px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 2;
  }
  
  .portfolio .gal-img::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.2s ease-in-out;
  }
  
  .portfolio .gal-img:hover {
    cursor: pointer;
  }
  
  .portfolio .gal-img:hover i {
    opacity: 1;
  }
  
  .portfolio .gal-img:hover::after {
    opacity: 1;
  }
  
  .portfolio .gal-img3 {
    top: -50%;
    left: 50%;
  }*/
 .clients {
   background: #FFF;
   padding-top: 20px;
   background-image: url(../images/clients-bg.jpg);
   background-repeat: no-repeat;
   background-position: center;
 }

 .portfolio .swiper-slide {
   padding-top: 95px;
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 100% auto;
 }

 @media (min-width: 767px) and (max-width: 1150px) {
   .portfolio .swiper-slide {
     background-size: cover;
     padding-top: 35px;
     height: auto;
   }
 }

 @media (max-width: 767px) {
   .portfolio .swiper-slide {
     padding: 20px;
     height: auto;
   }
 }

 .portfolio .swiper-slide img {
   width: 100%;
 }

 @media (max-width: 767px) {
   .portfolio .swiper-slide img {
     width: 100% !important;
     height: inherit !important;
   }
 }

 .portfolio .swiper-slide.eksesuar {
   background-image: url(../images/recent-work.jpg);
 }

 @media (max-width: 767px) {
   .portfolio .swiper-slide.eksesuar {
     background-color: #94C7E2;
   }
 }

 .portfolio .swiper-slide.zain {
   background-image: url(../images/zainbg.jpg);
 }

 @media (max-width: 767px) {
   .portfolio .swiper-slide.zain {
     background-color: #ec6678;
   }
 }

 .portfolio .swiper-slide.capt {
   background-image: url(../images/captbg.png);
 }

 @media (max-width: 767px) {
   .portfolio .swiper-slide.capt {
     background-color: #8daf3e;
   }
 }

 .portfolio .swiper-slide.capt p {
   color: #FFF;
 }

 .portfolio .swiper-slide.zain p {
   color: #FFF;
 }

 .portfolio .test-img {
   width: 90px;
   height: 90px;
   border-radius: 50%;
   margin: 0 auto;
   overflow: hidden;
 }

 .portfolio span,
 .clients span {
   color: #c4c4c4;
   display: inline-block;
   margin: 0 0 17px;
 }

 .portfolio .test-img img,
 .clients .test-img img {
   -o-object-fit: cover;
   object-fit: cover;
   width: 100%;
   height: 90px;
 }

 .portfolio p,
 .clients p {
   font-size: 28px;
   line-height: 30px;
   color: #09304f;
   font-weight: 700;
   margin-bottom: 20px;
 }

 @media (max-width: 767px) {

   .portfolio p,
   .clients p {
     font-size: 18px;
     line-height: 20px;
   }
 }

 .test-pagination {
   text-align: center;
   margin-top: 8px;
 }

 .test-pagination span {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background-color: #ced6dc;
   margin-bottom: 0;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }

 .test-pagination span:hover {
   cursor: pointer;
 }

 .test-pagination span:not(:last-child) {
   margin-right: 10px;
 }

 .test-pagination span.swiper-pagination-bullet-active {
   width: 12px;
   height: 12px;
   background-color: #09304f;
 }

 .clients .client-img {
   min-height: 120px;
   width: 100%;
   text-align: center;
   display: block;
   min-width: 270px;
 }

 footer {
   background: #09304f;
 }

 .footer-section {
   padding: 50px 0;
 }

 @media (max-width: 767px) {
   .footer-section {
     text-align: center;
   }
 }

 .footer-section .col-md-6 .footer-box:not(:first-child) .footer-title {
   margin: 40px 0 30px;
 }

 @media (max-width: 767px) {
   .footer-box {
     text-align: center !important;
   }
 }

 .footer-box .logo-footer {
   padding-top: 25px;
   padding-right: 25px;
 }

 @media (max-width: 767px) {
   .footer-box .logo-footer {
     padding: 0;
   }
 }

 .footer-box .footer-title {
   font-size: 22px;
   color: #fff;
   margin-bottom: 30px;
 }

 .footer-box .footer-title a {
   text-decoration: none;
   color: #FFF;
 }

 .footer-box .footer-title a:hover {
   color: #FFF;
   text-decoration: underline;
 }

 @media (max-width: 767px) {
   .footer-box .footer-title {
     margin-bottom: 20px;
   }
 }

 .footer-box i {
   color: #ee1515;
 }

 .footer-box h6 {
   color: #fff;
 }

 .footer-box .media {
   margin-bottom: 20px;
 }

 .footer-menu {
   font-size: 18px;
   font-weight: 100;
   list-style: none;
   margin: 0;
   padding: 0;
 }

 @media (max-width: 767px) {
   .footer-menu {
     padding-bottom: 20px;
   }
 }

 .footer-menu li a {
   color: #afb0b3;
   padding-bottom: 20px;
   display: inline-block;
 }

 .footer-menu li a:hover {
   text-decoration: underline;
 }

 @media (max-width: 767px) {
   .footer-menu li a {
     padding-bottom: 10px;
   }
 }

 .contact-widget a {
   color: #aaa;
 }

 .contact-widget i {
   font-size: 22px;
 }

 .twitter-widget i,
 .twitter-widget h6 {
   color: #777;
 }

 span {
   color: #fff;
 }

 .foot-note {
   padding: 30px 0;
   background-color: #09304f;
   color: #FFF;
   border-top: 1px solid #c2ccd4;
 }

 .foot-note a {
   color: #FFF;
 }

 .foot-note .social-nav a {
   border: 1px solid #FFF;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   display: inline-block;
   text-align: center;
   padding-top: 2px;
 }

 @media (max-width: 767px) {
   .foot-note .social-nav a {
     padding-left: 0px;
   }
 }

 .foot-note .social-nav a:hover {
   color: #9bcee8;
 }

 .foot-note .social-nav a.fb {
   /*padding-left: 5px;*/
 }

 @media (max-width: 767px) {
   .social-nav {
     text-align: center;
     display: inherit;
     margin-top: 20px;
   }

   .social-nav li {
     display: inline-block;
   }
 }

 .foot-note a:last-child {
   margin-left: 30px;
 }

 @media (max-width: 767px) {
   .foot-note a:last-child {
     margin-left: 5px;
     margin-right: 5px;
   }
 }

 .foot-note a.link {
   margin-left: 0;
 }

 #site-wrapper {
   position: relative;
   overflow: hidden;
   width: 100%;
 }

 /* top section */
 #site-canvas {
   width: 100%;
   height: 100%;
   position: relative;
   -webkit-transform: translateX(0);
   transform: translateX(0);
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: 300ms ease all;
   transition: 300ms ease all;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   min-height: 600px;
 }

 .show-nav #site-canvas {
   -webkit-transform: translateX(-400px);
   transform: translateX(-400px);
   -webkit-transform: translate3d(-400px, 0, 0);
   transform: translate3d(-400px, 0, 0);
 }

 @media (max-width: 380px) {
   .show-nav #site-canvas {
     -webkit-transform: translateX(-300px);
     transform: translateX(-300px);
     -webkit-transform: translate3d(-300px, 0, 0);
     transform: translate3d(-300px, 0, 0);
   }
 }

 #site-canvas .closemenu {
   background-color: rgba(0, 0, 0, 0.7);
   content: "";
   position: absolute;
   width: 100%;
   height: 100vh;
   z-index: 1;
   opacity: 0;
   visibility: hidden;
 }

 .show-nav #site-canvas .closemenu {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   visibility: visible;
 }

 #site-menu {
   width: 400px;
   height: 100%;
   position: absolute;
   top: 0;
   right: -400px;
   background: #677980;
   padding: 15px;
   color: #FFF;
   background-image: url("../images/menubg.jpg");
   background-repeat: no-repeat;
   background-position: center top 400px;
   display: -ms-grid;
   display: grid;
 }

 @media (max-width: 767px) {
   #site-menu {
     padding-top: 0px;
   }
 }

 @media (max-width: 380px) {
   #site-menu {
     width: 300px;
     right: -300px;
     background-position: center top 300px;
   }
 }

 .top-section {
   position: relative;
   background-color: black;
   height: 100vh;
   min-height: 25rem;
   width: 100%;
   overflow: hidden;
 }

 @media (min-width: 767px) and (max-width: 1150px) {
   .top-section {
     height: auto;
   }
 }

 @media (max-width: 767px) {
   .top-section {
     height: auto;
   }
 }

 .top-section video {
   position: absolute;
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   z-index: 0;
   -webkit-transform: translateX(-50%) translateY(-50%);
   transform: translateX(-50%) translateY(-50%);
 }

 @media (max-width: 767px) {
   .top-section video {
     width: 200%;
   }
 }

 @media (max-width: 500px) {
   .top-section video {
     width: 300%;
   }
 }

 .top-section .container {
   position: relative;
   z-index: 2;
 }

 .top-section .overlay {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background-color: black;
   opacity: 0.5;
   z-index: 1;
 }

 .intro-section {
   height: 80vh;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   justify-content: flex-end;
 }

 @media (min-width: 767px) and (max-width: 1150px) {
   .intro-section {
     height: auto;
     padding-top: 200px;
     padding-bottom: 50px;
   }
 }

 @media (max-width: 767px) {
   .intro-section {
     height: auto;
     padding-top: 200px;
     padding-bottom: 50px;
   }
 }

 @media (max-width: 767px) {
   .intro-section .buttons-intro {
     /*text-align: center;
      display: flex;
      flex-direction: column;*/
   }
 }

 .text-intro {
   margin-bottom: 40px;
 }

 @media (max-width: 767px) {
   .text-intro {
     margin-bottom: 20px;
   }
 }

 .text-intro .tag1 {
   font-family: "Comfortaa";
   color: #FFF;
   font-size: 48px;
   font-weight: 100;
   letter-spacing: 15px;
   display: block;
   line-height: 48px;
 }

 @media (max-width: 767px) {
   .text-intro .tag1 {
     font-size: 30px;
     line-height: 32px;
     letter-spacing: 5px;
   }
 }

 .text-intro .tag2 {
   font-family: "Comfortaa";
   color: #8ab7d4;
   font-size: 30px;
   font-weight: 100;
   display: block;
   line-height: 30px;
 }

 @media (max-width: 767px) {
   .text-intro .tag2 {
     font-size: 20px;
     line-height: 25px;
   }
 }

 @media (max-width: 767px) {
   .text-intro {
     text-align: left;
   }
 }

 .service-btn {
   background-color: #FFF;
   font-size: 23px;
   padding: 15px 35px;
   color: #09304f;
   border-radius: 15px;
   line-height: 23px;
   font-weight: 700;
   float: left;
 }

 @media (max-width: 767px) {
   .service-btn {
     float: none;
     width: 200px;
     display: block;
     padding: 6px 15px;
     font-size: 16px;
   }
 }

 .service-btn:hover {
   background-color: #09304f;
   color: #FFF;
 }

 .latest-news {
   color: #FFF;
   border-left: 1px solid #FFF;
   padding-left: 25px;
   margin-left: 20px;
   font-size: 20px;
   display: inline-block;
   margin-top: 10px;
   float: left;
 }

 @media (max-width: 767px) {
   .latest-news {
     padding-left: 0px;
     margin-left: 0px;
     border-left: 0px;
     display: block;
     text-align: center;
     width: 100%;
   }
 }

 .latest-news i {
   font-size: 35px;
   padding-right: 20px;
   float: left;
 }

 @media (max-width: 767px) {
   .latest-news i {
     padding-right: 10px;
   }
 }

 #video-gallery {
   display: inline-block;
 }

 @media (max-width: 767px) {
   #video-gallery {
     text-align: center;
     margin-top: 20px;
   }
 }

 .toggle-nav {
   color: #FFF;
   font-size: 25px;
   font-weight: 100;
   text-align: right;
   padding-right: 0px;
 }

 .toggle-nav img {
   width: 45px;
 }

 @media (max-width: 767px) {
   .toggle-nav img {
     width: 30px;
   }
 }

 @media (max-width: 767px) {
   .toggle-nav {
     margin-top: 30px;
   }
 }

 .white-btn {
   background-color: #FFF;
   font-size: 23px;
   padding: 15px 35px;
   color: #09304f;
   border-radius: 15px;
   line-height: 23px;
   font-weight: 700;
 }

 .white-btn-sml {
   background: #FFF;
   font-size: 13px;
   padding: 10px 15px;
   color: #09304f;
   border-radius: 15px;
   line-height: 14px;
   font-weight: 700;
   text-transform: uppercase;
   margin-right: 20px;
   display: inline-block;
   margin-bottom: 20px;
 }

 @media (max-width: 767px) {
   .white-btn-sml {
     margin-bottom: 20px;
   }
 }

 .white-btn-sml:hover {
   background: #09304f;
   color: #FFF;
 }

 .vid-txt {
   margin-top: 5px;
   display: inline-block;
 }

 @media (pointer: coarse) and (hover: none) {
   /*  header {
      background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
    }
    header video {
      display: none;
    }*/
 }

 /* menu */
 .menu-info {
   margin-left: 20px;
   -ms-flex-item-align: end;
   -ms-grid-row-align: end;
   align-self: end;
 }

 @media (min-width: 767px) and (max-width: 1150px) {
   .menu-info {
     padding-bottom: 70px;
   }
 }

 @media (max-width: 500px) {
   .menu-info {
     -ms-flex-item-align: auto;
     -ms-grid-row-align: auto;
     align-self: auto;
   }
 }

 .menu-info a {
   color: #FFF;
 }

 .menu-info p {
   margin: 0;
   padding: 0;
 }

 .menu-info i {
   font-size: 25px;
 }

 .menu-info .media {
   margin-bottom: 20px;
 }

 .ca-menu {
   padding: 0;
   margin: 5px auto;
   width: 100%;
   font-family: "Comfortaa";
 }

 .ca-menu li {
   width: 100%;
   height: 45px;
   overflow: hidden;
   position: relative;
   display: block;
   margin-bottom: 4px;
   -webkit-transition: all 300ms linear;
   transition: all 300ms linear;
 }

 @media (max-width: 380px) {
   .ca-menu li {
     height: 30px;
   }
 }

 .ca-menu li:last-child {
   margin-bottom: 0px;
 }

 .ca-menu li a {
   text-align: left;
   width: 100%;
   color: #FFF;
   position: relative;
   text-transform: uppercase;
   display: block;
 }

 .ca-icon {
   position: absolute;
   left: 20px;
   -webkit-transition: all 300ms linear;
   transition: all 300ms linear;
   width: 0px;
   display: inline-block;
   width: 20px;
   height: 5px;
   border-radius: 10px;
   background: #FFF;
   margin-top: 10px;
   display: none;
 }

 .ca-content {
   position: absolute;
   left: 60px;
   width: 370px;
 }

 .ca-main {
   font-size: 25px;
   display: inline-block;
   position: relative;
 }

 @media (max-width: 380px) {
   .ca-main {
     font-size: 20px;
   }
 }

 .ca-menu li:hover .ca-icon {
   /*font-size: 40px;
    color:  $white-color;
    opacity: 0.8;
    text-shadow: 0px 0px 13px #fff;
    display: block;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;*/
 }

 .ca-menu li a.active-menu .ca-icon {
   display: block;
 }

 /*effect-underline*/
 .ca-content h2:after {
   content: '';
   position: absolute;
   left: 0;
   display: inline-block;
   height: 1em;
   width: 100%;
   border-bottom: 2px solid;
   margin-top: 10px;
   opacity: 0;
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s;
   transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
   -webkit-transform: scale(0, 1);
   transform: scale(0, 1);
 }

 .ca-content h2:hover:after {
   opacity: 1;
   -webkit-transform: scale(1);
   transform: scale(1);
 }

 .media-boxes-no-more-entries {
   display: none;
 }

 /* media boxes */
 .thumbnail-overlay-content.service1 {
   background-image: url(../images/code/green.png);
   padding-bottom: 100px;
   padding-left: 50px;
   background-position: bottom center;
   background-repeat: no-repeat;
   display: block;
   text-align: left;
 }

 @media (max-width: 767px) {
   .thumbnail-overlay-content.service1 {
     padding-bottom: 80px;
     padding-left: 40px;
   }
 }

 .thumbnail-overlay-content.service1 .service-title {
   font-size: 40px;
   line-height: 40px;
   font-family: "Comfortaa";
   display: block;
   font-weight: 100;
   text-transform: uppercase;
   letter-spacing: 5px;
   color: #9bcee8;
 }

 @media (max-width: 767px) {
   .thumbnail-overlay-content.service1 .service-title {
     font-size: 28px;
     line-height: 28px;
   }
 }

 .thumbnail-overlay-content.service1 .thumbnail-overlay-button {
   padding: 0;
   background: none;
   color: #FFF;
   font-size: 18px;
   font-size: 22px;
 }

 .thumbnail-overlay-content.service1 .thumbnail-overlay-button:hover {
   text-decoration: underline;
 }

 .thumbnail-overlay-content.service2 {
   background-image: url(../images/code/service2.png);
   padding-bottom: 100px;
   padding-left: 40px;
   background-position: bottom center;
   background-repeat: no-repeat;
   display: block;
   text-align: left;
 }

 .thumbnail-overlay-content.service2 .service-title {
   font-size: 28px;
   font-family: "Comfortaa";
   display: block;
   font-weight: 100;
   text-transform: uppercase;
   letter-spacing: 5px;
   line-height: 28px;
   color: #a6c339;
 }

 @media (max-width: 767px) {
   .thumbnail-overlay-content.service2 .service-title {
     font-size: 28px;
     line-height: 28px;
   }
 }

 .thumbnail-overlay-content.service2 .thumbnail-overlay-button {
   padding: 0;
   background: none;
   color: #FFF;
   font-size: 18px;
   font-size: 18px;
 }

 .thumbnail-overlay-content.service3 {
   background-image: url(../images/code/service3.png);
   padding-bottom: 100px;
   padding-left: 40px;
   background-position: bottom center;
   background-repeat: no-repeat;
   display: block;
   text-align: left;
 }

 .thumbnail-overlay-content.service3 .service-title {
   font-size: 28px;
   font-family: "Comfortaa";
   display: block;
   font-weight: 100;
   text-transform: uppercase;
   letter-spacing: 5px;
   line-height: 28px;
   color: #f06779;
 }

 @media (max-width: 767px) {
   .thumbnail-overlay-content.service3 .service-title {
     font-size: 28px;
     line-height: 28px;
   }
 }

 .thumbnail-overlay-content.service3 .thumbnail-overlay-button {
   padding: 0;
   background: none;
   color: #FFF;
   font-size: 18px;
 }

 .thumbnail-overlay-content.service4 {
   background-image: url(../images/code/service4.png);
   padding-bottom: 100px;
   padding-left: 40px;
   background-position: bottom center;
   background-repeat: no-repeat;
   display: block;
   text-align: left;
 }

 .thumbnail-overlay-content.service4 .service-title {
   font-size: 28px;
   font-family: "Comfortaa";
   display: block;
   font-weight: 100;
   text-transform: uppercase;
   letter-spacing: 5px;
   line-height: 28px;
   color: #8dacb5;
 }

 @media (max-width: 767px) {
   .thumbnail-overlay-content.service4 .service-title {
     font-size: 28px;
     line-height: 28px;
   }
 }

 .thumbnail-overlay-content.service4 .thumbnail-overlay-button {
   padding: 0;
   background: none;
   color: #FFF;
   font-size: 18px;
 }

 .thumbnail-overlay-content.service5 {
   background-image: url(../images/code/service5.png);
   padding-bottom: 100px;
   padding-left: 40px;
   background-position: bottom center;
   background-repeat: no-repeat;
   display: block;
   text-align: left;
 }

 .thumbnail-overlay-content.service5 .service-title {
   font-size: 28px;
   font-family: "Comfortaa";
   display: block;
   font-weight: 100;
   text-transform: uppercase;
   letter-spacing: 5px;
   line-height: 28px;
   color: #2886c6;
 }

 @media (max-width: 767px) {
   .thumbnail-overlay-content.service5 .service-title {
     font-size: 28px;
     line-height: 28px;
   }
 }

 .thumbnail-overlay-content.service5 .thumbnail-overlay-button {
   padding: 0;
   background: none;
   color: #FFF;
   font-size: 18px;
 }

 .thumbnail-overlay-content.service6 {
   background-image: url(../images/code/service6.png);
   padding-bottom: 100px;
   padding-left: 40px;
   background-position: bottom center;
   background-repeat: no-repeat;
   display: block;
   text-align: left;
 }

 .thumbnail-overlay-content.service6 .service-title {
   font-size: 40px;
   font-family: "Comfortaa";
   display: block;
   font-weight: 100;
   text-transform: uppercase;
   letter-spacing: 5px;
   line-height: 40px;
   color: #9fadb3;
 }

 @media (min-width: 767px) and (max-width: 1150px) {
   .thumbnail-overlay-content.service6 .service-title {
     font-size: 40px;
     line-height: 40px;
   }
 }

 @media (max-width: 767px) {
   .thumbnail-overlay-content.service6 .service-title {
     font-size: 28px;
     line-height: 28px;
   }
 }

 .thumbnail-overlay-content.service6 .thumbnail-overlay-button {
   padding: 0;
   background: none;
   color: #FFF;
   font-size: 18px;
   font-size: 22px;
 }

 @media (max-width: 767px) {
   .thumbnail-overlay-button {
     font-size: 14px !important;
   }
 }

 @media (min-width: 767px) and (max-width: 1150px) {
   .thumbnail-overlay-content {
     padding-left: 20px !important;
     padding-bottom: 40px !important;
   }
 }

 .thumbnail-overlay-button:hover {
   text-decoration: underline;
 }

 .nav-active {
   overflow: hidden;
   position: relative;
   height: 100%;
 }

 .nav-active body {
   position: relative;
   height: 100%;
   overflow: hidden;
 }

 .nav-active ::-webkit-scrollbar {
   width: 10px;
 }

 .nav-active ::-webkit-scrollbar-track {
   background: #f1f1f1;
 }

 .nav-active ::-webkit-scrollbar-thumb {
   background: #888;
 }

 .nav-active ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }

 .nav-active #site-menu {
   overflow-y: scroll;
   height: 100vh;
   overflow-x: hidden;
 }

 @media (max-width: 500px) {
   .nav-active #site-menu {
     height: auto;
     overflow-y: hidden;
   }
 }

 @media (max-width: 500px) {
   .nav-active .accactive #site-menu {
     overflow-y: scroll;
   }
 }

 .nav-active .top-header .toggle-nav {
   display: none;
 }

 @media (max-width: 767px) {
   .thumbnail-overlay {
     display: block !important;
     opacity: 1 !important;
   }

   .thumbnail-overlay .thumbnail-overlay-content {
     -webkit-transform: translate(0px, 0px) !important;
     transform: translate(0px, 0px) !important;
   }
 }

 .vision-content {
   background-position: bottom center;
   background-repeat: no-repeat;
   display: block;
   text-align: left;
   text-align: center;
 }

 .mission-content {
   background-position: bottom center;
   background-repeat: no-repeat;
   display: block;
   text-align: left;
   text-align: center;
 }

 .mission-content h2 {
   color: #a6c339 !important;
 }

 @media (max-width: 767px) {
   #site-menu .toggle-nav {
     margin-top: 5px;
   }

   .navbar-brand img {
     width: 75px;
   }

   .thumbnail-overlay>div.aligment>div.aligment {
     border-top: 10px solid #FFF;
   }
 }

 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) {
     #site-menu {
       height: auto;
       min-height: -webkit-fill-available;
     }
   }
 }

 @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {

   .selector:not(*:root),
   #site-menu {
     height: 100vh !important;
   }
 }

 .accordion {
   background: transparent;
   color: #FFF;
   cursor: pointer;
   padding: 0px;
   width: 100%;
   text-align: left;
   border: none;
   outline: none;
   -webkit-transition: 0.4s;
   transition: 0.4s;
   text-transform: uppercase;
   outline: none;
   height: 45px;
   display: block;
 }

 .accordion:focus {
   outline: 0;
 }

 .accordion h2 {
   font-size: 25px;
 }

 @media (max-width: 380px) {
   .accordion h2 {
     font-size: 20px;
   }
 }

 .accordion .ca-content {
   float: left;
   width: auto;
 }

 @media (max-width: 380px) {
   .accordion {
     height: 30px;
     overflow: hidden;
   }
 }

 /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 /* Style the accordion panel. Note: hidden by default */
 .panel {
   padding: 0 0px;
   max-height: 0;
   overflow: hidden;
   -webkit-transition: max-height 0.2s ease-out;
   transition: max-height 0.2s ease-out;
   margin-left: 60px;
   font-size: 18px;
 }

 .panel a {
   margin-bottom: 5px;
 }

 .ca-menu li {
   -webkit-transform: translateX(40px);
   transform: translateX(40px);
   opacity: 0;
   -webkit-transition: all 0.4s 0.2s;
   transition: all 0.4s 0.2s;
 }

 .ca-menu li:nth-of-type(1) {
   -webkit-transition: all 0.4s 0.2s;
   transition: all 0.4s 0.2s;
 }

 .ca-menu li:nth-of-type(2) {
   -webkit-transition: all 0.4s 0.3s;
   transition: all 0.4s 0.3s;
 }

 .ca-menu li:nth-of-type(3) {
   -webkit-transition: all 0.4s 0.4s;
   transition: all 0.4s 0.4s;
 }

 .ca-menu li:nth-of-type(4) {
   -webkit-transition: all 0.4s 0.5s;
   transition: all 0.4s 0.5s;
 }

 .ca-menu li:nth-of-type(5) {
   -webkit-transition: all 0.4s 0.6s;
   transition: all 0.4s 0.6s;
 }

 .ca-menu li:nth-of-type(6) {
   -webkit-transition: all 0.4s 0.7s;
   transition: all 0.4s 0.7s;
 }

 .ca-menu li:nth-of-type(7) {
   -webkit-transition: all 0.4s 0.8s;
   transition: all 0.4s 0.8s;
 }

 .ca-menu li a {
   -webkit-transition: color 0.4s;
   transition: color 0.4s;
   color: #677980;
 }

 .show-nav .ca-menu li {
   -webkit-transform: translateX(0);
   transform: translateX(0);
   opacity: 1;
 }

 .show-nav .ca-menu li a {
   color: #FFF;
 }

 /*# sourceMappingURL=style.css.map */

 .errorlist li {
   font-size: 15px;
 }


 .header {
   background-color: #06314e;
   padding: 0 0px;
 }

 .header .header-logo img {
   width: 130px;
 }

 .header-links a {
   color: #FFF;
   text-decoration: underline;
   font-size: 18px;

 }

 .header-links a:hover {
   text-decoration: none;
 }

 .header-items {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .footer-career {
   background-color: #06314e;
   padding: 20px 0px;
   font-size: 14px;
   color: #FFF;
   font-family: "Comfortaa", sans-serif;
 }

 .footer-career p {
   margin-bottom: 0px;
 }

 header,
 .footer,
 .footer__content>div h3 {
   font-family: "Comfortaa", sans-serif;
 }

 .navbar-subnav {
   list-style: none;
 }

 header {
   background: #06314e;
 }

 .navbar-brand img {
   width: 100px !IMPORTANT;
   margin: 10px 0;
 }

 header .navbar {
   max-width: none;
   padding: 0;
 }

 .navbar .navbar-collapse.show {
   z-index: 9999;
 }

 @media (min-width: 768px) {
   .vacancies h2 {
     line-height: 50px;
   }

   .global-btn:hover {
     transform: translateY(-5px) !important;
   }
 }

 .navbar .dropdown-toggle:hover {
   color: #a6c53b;
 }

 .fixed-header {
   position: fixed;
   width: 100%;
 }

 .footer p {
   margin: 0;
 }

 .careers-top .career-benefits {
   display: none;
 }

 .careers-top p {
   font-weight: 500;
   font-size: 1.125rem;
 }

 .fixed-header .navbar .navbar-brand img {
   width: 75px !important;
 }

 .pattern-one,
 .pattern-two {
   height: 85px;
   padding-top: 1.25rem;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }

 .vacancies h2 {
   font-size: 20px !important;
   letter-spacing: 0 !important;
 }


 .careers-top .service-top-left {
   padding-top: 0 !important;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .youth {
   text-align: center;
   padding-block: 40px;

   .title {
     font-size: clamp(24px, 3.4vw, 40px);
     font-weight: 700;
     margin-bottom: 48px;
     color: #052A43;
     position: relative;

     &:before {
       content: "";
       position: absolute;
       bottom: -24px;
       left: 50%;
       translate: -50% 0;
       height: 3px;
       width: 72px;
       border-radius: 3px;
       background: #A6C53B;
     }

   }

   .text {
     font-size: clamp(16px, 1.8vw, 19px);
     font-weight: 400;
     color: #06314E;
     margin-bottom: 24px;
   }

   a {
     color: #879F3E;
     border: 1px solid #879F3E;
     display: flex;
     justify-content: center;
     gap: 8px;
     padding-block: 12px;
     border-radius: 50px;
     max-width: 233px;
     margin-inline: auto;

     &:hover {
       background: #879F3E;
       color: #FFF;
     }
   }
 }

 .upload-box .btn-file,
 .btnContact {
   border-radius: 25px !important;
   transition: .5s all ease;
 }

 .btnContact:hover,
 .upload-box .btn-file:hover {
   background: #051929 !important;
 }
 .contact .form-group:has(.nice-select){
  display: flex;
 }
 .contact form .form-control.customselect1 {
  overflow: visible !important;
  display:flex;
}
.contact form .form-control.customselect1 span{
 color: #09304f !important;
 display:flex;
 align-items:center;
}
 .contact form .form-control.customselect1 .nice-select-dropdown{
  width: 100% !important;
  border-radius:24px; 
}
.nice-select .nice-select-search{
   border-radius: 24px !important;
   
}