/* ------------------------------------------------------------------------------
 *  Designed by Dreamscape Media Pvt. Ltd.
 *  ------------------------------------------------------------------------------
 *  Email: support@dreamscape.co.in
 *  Work: UI Designer and Front-end Developer @ Dreamscape Media - http://dreamscape.co.in
 *  Latest update: Dec 11, 2023
 * ---------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;800&display=swap');
html {font-family: 'Raleway', sans-serif;color: #090909;}
body {font-family: 'Raleway', sans-serif;color: #090909; font-weight: 400; font-size: 16px;line-height: 1.7;color: #c4c3ca;background-color: #fff;overflow-x: hidden;-webkit-transition: all 300ms linear;transition: all 300ms linear;}
a {cursor: pointer;}
a:hover {text-decoration: none;} 

h1,h2,h3,h4,h5,h6{font-family: 'Raleway', sans-serif; font-weight: 800;}

p{font-size: 14px; line-height: 27px;color: #000;letter-spacing: .03em; margin-bottom: 15px;}
p.lead{font-size: 20px; line-height: 30px; font-weight: 400;}
h2 span{font-weight: 400; display: block; font-size: 30px;}
h2 span span{color: #0448A2; display: inline-block; font-weight: 400;}
.leading{font-size: 22px; line-height: 32px; font-weight: 600; color: #fff;}
p:last-child{margin-bottom: 0;}
h1{font-size: 96px; color: #495254; line-height: 96px; margin-bottom: 20px;}
h2{font-size: 40px; color: #495254; line-height: 50px; margin-bottom: 15px;}
h3{font-size: 30px; color: #495254; line-height: 40px; margin-bottom: 15px;}
h4{font-size: 20px; color: #495254; line-height: 30px; margin-bottom: 10px; font-weight: 600;}
ul.styled{margin: 25px 0 25px 0; padding: 0;font-size: 14px; line-height: 27px; color: #585858;}
ul.styled li{margin: 0 0 6px 0; padding: 0 0 0 35px; background: url(../images/check-1.png) top 5px left no-repeat; list-style-type: none; background-size: 18px;}
ul.styled li:last-child{margin: 0 0 0 0;}
section{padding: 100px 0;}
.bg-light-blue{background: #ebf4fa;}
.section-title {margin-bottom: 20px;}

/* ---------------------------- NAVBAR ----------------------------- */
.navbar {z-index: 1049;transition: all 0.6s ease 0s; padding: 10px 0;box-shadow: 0px 3px 15px 3px rgb(0 0 0 / 4%);}
.navbar-brand{padding: 0;}
.navbar-brand img{height: 60px;transition: all 1s ease 0s;}
.scrolled .navbar-brand img{height: 60px;}
.navbar .nav-link{font-size: 16px; padding-left: 15px!important; padding-right: 15px!important;border-bottom: 3px transparent solid; font-weight: 400;}
.scrolled {background: #fff!important; box-shadow: 0px 3px 15px 3px rgb(0 0 0 / 15%);transition: all 0.6s ease 0s;}
.img-block{overflow: hidden;}
.img-block:hover img{transform: scale(1.05);}
.square-blocks:hover .img-block img{transform: scale(1.05);}
.btn-primary{border: 1px #207CA8 solid; border-radius: 30px; background: #207CA8; color: #fff; padding: 10px 20px; min-width: 180px; display: inline-block; font-size: 16px; margin-top: 15px; text-decoration: none;font-family: 'Rubik', sans-serif;}
.btn-primary:hover{transition: all 0.2s ease-in-out;border: 1px #33BDF1 solid; border-radius: 30px; background: #33BDF1; color: #fff; padding: 10px 20px; min-width: 180px; display: inline-block; font-size: 16px; margin-top: 15px; text-decoration: none;font-family: 'Rubik', sans-serif;}
.btn-secondary{border: 1px #fff solid; border-radius: 30px; background: #fff; color: #0448A2; padding: 10px 20px; min-width: 180px; display: inline-block; font-size: 16px; margin-top: 15px; text-decoration: none;font-family: 'Rubik', sans-serif;}
.btn-secondary:hover{transition: all 0.2s ease-in-out;border: 1px #33BDF1 solid; border-radius: 30px; background: #33BDF1; color: #fff; padding: 10px 20px; min-width: 180px; display: inline-block; font-size: 16px; margin-top: 15px; text-decoration: none;font-family: 'Rubik', sans-serif;}
.btn-outline{border: 2px #207CA8 solid; border-radius: 30px; background: #fff; color: #207CA8; padding: 10px 20px; min-width: 180px; display: inline-block; font-size: 16px; margin-top: 15px; text-decoration: none;font-family: 'Rubik', sans-serif;}
.btn-outline:hover{transition: all 0.2s ease-in-out;border: 2px #207CA8 solid; border-radius: 30px; background: #207CA8; color: #fff; padding: 10px 20px; min-width: 180px; display: inline-block; font-size: 16px; margin-top: 15px; text-decoration: none;font-family: 'Rubik', sans-serif;}
.pdf-link{font-weight: 600; text-decoration:none; color: #207CA8; margin-bottom: 25px; display: inline-block;}
.btn-header{border: 1px #000 solid; border-radius: 30px; background: #000; width: 195px; color: #fff; padding: 10px 20px; display: inline-block; font-size: 16px; margin-left: 20px; text-decoration: none;font-family: 'Rubik', sans-serif;}
.btn-header:hover{transition: all 0.2s ease-in-out;border: 1px #207CA8 solid; background: #207CA8; color: #fff;}
.btn-header i{margin-left: 10px;}
.dropdown:hover  .dropdown-menu {display: block;margin-top: 0;box-shadow: 0px 3px 15px 3px rgb(0 0 0 / 11%);animation: 0.5s slideup;}
.dropdown-menu{padding: 8px 0;}
.dropdown-item{padding: 8px 20px;}
@keyframes slideup {from {transform: translateY(10%);}to {transform: translateY(0);}}
.dropdown-item:hover{background: #F0F7FF;}
.dropdown-menu{border-radius: 15px !important; overflow: hidden;box-shadow:rgba(131, 156, 184, 0.25) 0px 21px 18px 0;}
.head-logo{height: 80px; margin-bottom: 10px;}

.overlay-menu{display: none;}
.overlay-menu nav {
  background-color: rgba(4, 72, 162, 1);
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  z-index: 999;
}
.overlay-menu nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 50%;
  width: 100%;
  top: 170px;
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);
}
.overlay-menu nav ul li {
  transform: translateY(50px);
  opacity: 0;
}
.overlay-menu nav ul li a {
  display: block;
  font-size: 24px;
  line-height: 24px;
  text-decoration: none;
  padding: 15px 0;
  text-align: center;
  color: #fff;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
ul.sub-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative !important;
    left: 50%;
    width: 100%;
    top: 0!important;
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}
ul.sub-menu li a {
  display: block;
  font-size: 16px!important;
  line-height: 16px!important;
  text-decoration: none;
  padding: 10px 0!important;
  text-align: center;
  color: #fff;
  font-weight: normal!important;
  transition: all 0.2s ease-in-out;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.overlay-menu nav ul li a:hover {
  color: #FFF;
}

.toggle-btn {
  display: block;
  position: fixed;
  z-index: 9999;
  right: 25px;
  top: 23px;
  cursor: pointer;
}
.toggle-btn .bar {
  width: 30px;
  height: 2px;
  margin: 7px auto;
  background-color: #000;
  transition: all 0.3s ease-in-out;
  display: block;
}
.toggle-btn .bar:nth-child(2) {
  width: 20px;
}

#toggle:checked ~ nav {
  opacity: 1;
  visibility: visible;
}
#toggle:checked ~ nav ul {
  top: 20px;
}
#toggle:checked ~ nav ul li {
  transform: translateY(0px);
  opacity: 1;
}
#toggle:checked ~ nav ul li:nth-child(1) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.1s;
}
#toggle:checked ~ nav ul li:nth-child(2) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.2s;
}
#toggle:checked ~ nav ul li:nth-child(3) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.3s;
}
#toggle:checked ~ nav ul li:nth-child(4) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.4s;
}
#toggle:checked ~ nav ul li:nth-child(5) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.5s;
}
#toggle:checked ~ nav ul.sub-menu li {
  transition: none;
}
#toggle:checked + label.toggle-btn .bar {
  background-color: #0448A2;
}
#toggle:checked + label.toggle-btn .bar:nth-child(2) {
  transform: translateX(50px);
  opacity: 0;
}
#toggle:checked + label.toggle-btn .bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
#toggle:checked + label.toggle-btn .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --------------------------- HERO --------------------------- */
.hero{margin-top: 80px; text-align: center; padding: 0;}
.hero .img-block img, .img-block img{width:100%;transition: all 1s ease 0s;}
.hero h1 {text-align: center; display: inline-flex;}
.hero h1 span:last-child{font-size: 165px; color: #207CA8; line-height: 100px; font-weight: 500;font-family: 'Oswald', sans-serif; padding-left: 10px;}
.highlight-txt{display: inline-block; font-size: 26px; width: 780px; color: #000;}
.krubber-man{background:url(../images/krubber-mascot.svg) top 8% right 17% no-repeat; background-size: 100px;}

/* -------------------------- HEADER ------------------------- */
header{padding: 150px 0 60px 0;background: #ebf4fa;}
header h1{font-size: 36px; color: #1B1A1A; line-height: 46px; margin-bottom: 10px;}
header img{border-radius: 10px; overflow: hidden;}

/* ------------------------- CLIENTS ------------------------- */
.clients{background: #F4F4F4; padding: 20px 0;}
.clients img{filter: grayscale(1);transition: all 0.2s ease-in-out; height: 54px;}
.clients img:hover{filter: grayscale(0);}

/**********  clients  **********/
.clients-block {}
.clients-block ul {list-style-type: none; margin: 0; padding: 0;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-right: -15px;margin-left: -15px;}
.clients-block ul li{margin: 0 15px 30px 15px; padding: 20px 20px; display: inline-block; box-shadow: 0px 2px 43px 5px rgba(0,0,0,0.1); width: calc(20% - 30px); text-align: center; background: #fff;}
.clients-block ul li img{width: 100%;filter: none;}

/* ---------------------------- MAP ---------------------------*/
.map iframe{-webkit-filter: grayscale(100%);filter: grayscale(100%);}

/* ---------------------------- SERVICES ---------------------------*/
.services{background:url(../images/service-bg.png) top 15% right 20% no-repeat #F0F7FF;}
.services .col-md-9{padding-left: 3%;}
.services-block{border-left: 3px #B9D4F2 solid; margin-bottom: 40px; padding: 0 40px 0 30px;}
.services h3{margin-bottom: 30px;}

/* -------------------------- CAREER --------------------------*/
.drives-block{background: #F0F7FF; border-radius: 15px; padding: 25px; height: 100%; position: relative; overflow: hidden;}
.drives-block img{width: 100%;}
.drives-block h3{font-size: 22px; font-weight: 600; line-height: 26px; margin-bottom: 15px;}
.drives .col-md-4{margin-bottom: 20px;}
.openings{display: flex; border-radius: 15px;padding: 30px 30px; margin-bottom: 30px; box-shadow:rgba(131, 156, 184, 0.16) 0px 21px 18px 0;}
.openings:last-child{margin-bottom:0;}
.openings div:last-child {padding: 25px 0px 20px 30px;}
.openings h3{font-size: 22px; font-weight: 600; line-height: 26px; margin-bottom: 10px;}
.openings p{font-size: 18px; line-height: 26px; /*overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;*/}
.fun-box{height: 380px; overflow: hidden;  display: flex;align-items: center;justify-content: center;border-radius: 15px; text-align: center;}
.fun-box img{height: 100%;}
.fun-blocks .col-lg-8,.fun-blocks .col-lg-4{margin-bottom: 24px;}
.bg-blue{background: #6CDCFF;}
.bg-peach{background: #F5A091;}
.bg-yellow{background: #F2B140;}
.fun-box h3{margin-bottom: 0;}

/* ------------------------ CASE STUDY ------------------------*/
.development{background:url(../images/cta-bg.png) left 40% bottom 10% no-repeat;}
.image-holder{background: #E4EBEE; border-radius: 15px; padding: 15px; overflow: hidden;}
.image-holder img{width: 100%; border-radius: 10px;}
.owl-uiux{margin-top: 40px;}
.challenge-left-area{padding-top: 20px;}
.challenge{padding: 30px 30px;border-radius: 15px; box-shadow:rgba(131, 156, 184, 0.16) 0px 21px 18px 0;}
.cs-header{margin-bottom: 115px; padding-top: 125px;}
.header-img{margin-top: 30px; position: relative;}
.header-img .head-txt{position: absolute; top: 0px; bottom: 0; left: 0px;width: 100%;padding:100px 60% 40px 50px; background-image: linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,0));}
.header-img .head-txt img{margin-bottom: 20px;}
.cs-swiper {position: relative; overflow: hidden; margin-top: 20px;}
.swiper-slide img{width: 100%;}
.swiper-pagination{position: inherit;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 0px;}
.work-holder .work-card{margin-bottom: 100px; padding-top: 0;}
.work-holder .work-card:first-child{margin-bottom: 100px; padding-top: 125px;}

/* ------------------------ CONTACT US ------------------------*/
.contact-us{}
.contact-block{background: #ebf4fa; border-radius: 15px; padding: 8%; height: 100%;}
.contact-block p{position: relative; padding-left: 25px; margin-bottom: 5px;}
.contact-block p i{position: absolute; left: 0; top: 7px;}
.contact-block a{color: #090909; text-decoration: none; display: inline-block; margin-bottom: 8px;}
.contact-block a:hover{color: #0B8F21;}
.contact-block a:last-child{margin-bottom: 0px;}
.contact-us .col-md-6{margin-bottom: 20px;}
.form-control{border: 1px #B9D7FA solid;padding: 0.5rem 0.75rem;}
.form-label{font-size: 15px; color: #3A3A3A; margin-bottom: 0;}
.form-control::placeholder{color: #8F9AB8;}
iframe { vertical-align:bottom; }

/* ------------------------- ABOUT US -------------------------*/
.team{}
.team a{text-decoration: none;}
.team img{width: 100%;}
.team-block h3{font-size: 20px; font-weight: 600; line-height: 26px; margin-bottom: 10px;}
.team-block h3 span{font-size: 14px; display: block; font-weight: 400; color: #0F121B;}
.team-block p{font-size: 16px; display: block; font-weight: 400; color: #0F121B;}
.team-img{border-radius: 6px; overflow: hidden;}
.team-txt{padding: 20px 0 10px 0;}
.team-block{background: #F0F7FF; border-radius: 15px; padding: 15px; height: 100%;}
.team .col-md-6{margin-bottom: 20px;}
.history-block{text-align: left;}
.history-block .history-img{margin-bottom: 20px;}
.history-block h3{font-size: 28px; line-height: 38px;color: #0448A2; margin-bottom: 5px;}
.history-block p{font-size: 16px; line-height: 24px;color: #000000;}
.history-year{color: #30BBF1; font-size: 46px; font-weight: 700;}
.history-swiper{overflow: hidden!important;position: relative;}
.swiper-pagination-bullet {background: #AFAFAF;opacity: var(--swiper-pagination-bullet-inactive-opacity, .5);width: 16px;border-radius: 6px;}
.swiper-pagination-bullet.swiper-pagination-bullet-active {background: #999999;opacity: var(--swiper-pagination-bullet-inactive-opacity, 1);width: 70px;border-radius: 6px;}
.modal-body{position: relative;}
.modal-header h5.modal-title{font-size: 20px; font-weight: 600; line-height: 26px; margin-bottom: 0px; color: #1B1A1A;}
.modal-body button{position: absolute; top: 15px; right: 15px; z-index: 999;}
.modal-body .team-block{background: transparent; padding: 10px;}

/* --------------------------- Applications ---------------------------*/
.applications{ text-align:center; padding-bottom:60px; }
.applications .col-md-6{margin-bottom: 40px;}
.applications .application-block h3{font-size: 22px; line-height: 30px;color: #000000; margin-bottom: 5px; font-weight: 600;}
.applications .application-block p{font-size: 16px; line-height: 24px;color: #090909;}
.applications .nav{margin-bottom: 10px;}
.applications .application-img{padding: 12px; border-radius: 15px; overflow: hidden; margin-bottom: 18px;transition: all 0.2s ease-in-out;background:#fff;}
.applications .application-img img{width: 100%; border-radius: 12px;}
.applications .application-block:hover .application-img{background:#207CA8; padding: 12px; border-radius: 15px; height: 100%; border: none;}
.nav-pills .nav-link {border-radius: 25px; color: #1B1A1A;}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {background: #207CA8; color: #fff;}
.applications  a{height: -webkit-fill-available; color: #fff; text-decoration: none;}
.tab-content{background: #ebf4fa;margin-top: 40px; text-align: left; padding: 40px; border-radius:12px; }
.img-holder img{width: 100%;}
.nav-link.active{font-weight: 600;}
.product-drawing{border: 4px #207CA8 solid; padding: 20px; border-radius: 15px; overflow: hidden; margin: 10px 0;}
.product-drawing img{border-radius: 15px; overflow: hidden;}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline {white-space: nowrap;overflow-x: hidden;text-align: left; padding: 10px 0;}
.timeline ol {font-size: 0;width: 100vw;padding: 250px 0;transition: all 1s; margin: 10px 0;}
.timeline ol li {position: relative;display: inline-block;list-style-type: none;width: 160px;height: 3px;background: #fff;}
.timeline ol li:last-child {width: 280px;}
.timeline ol li:not(:first-child) {margin-left: 14px;}
.timeline ol li:not(:last-child)::after {content: "";position: absolute;top: 50%;left: calc(100% + 1px);bottom: 0;width: 12px;height: 12px;transform: translateY(-50%);border-radius: 50%;background: #207ca8;}
.timeline ol li div {position: absolute;left: calc(100% + 7px);width: 280px; padding: 15px;font-size: 1rem;white-space: normal;color: black;background: white;box-shadow: 0px 3px 15px 3px rgb(0 0 0 / 10%);}
.timeline ol li div::before {content: "";position: absolute;top: 100%;left: 0;width: 0;height: 0;border-style: solid;}
.timeline ol li:nth-child(odd) div {top: -26px;transform: translateY(-100%);}
.timeline ol li:nth-child(odd) div::before {top: 100%;border-width: 8px 8px 0 0;border-color: white transparent transparent transparent;}
.timeline ol li:nth-child(even) div {top: calc(100% + 26px);}
.timeline ol li:nth-child(even) div::before {top: -8px;border-width: 8px 0 0 8px;border-color: transparent transparent transparent white;}
.timeline time {display: block;font-size: 20px;font-weight: bold;margin-bottom: 8px;}
.arrows button{border: 0;}

/* TIMELINE ARROWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline .arrows {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.timeline .arrows .arrow__prev {
  margin-right: 10px;
}

.timeline .disabled {
  opacity: 0.5;
}

.timeline .arrows img {
  width: 45px;
  height: 45px;
}

/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 599px) {
  .timeline ol,
  .timeline ol li {
    width: auto;
  }

  .timeline ol {
    padding: 0;
    transform: none !important;
  }

  .timeline ol li {
    display: block;
    height: auto;
    background: transparent;
  }

  .timeline ol li:first-child {
    margin-top: 25px;
  }

  .timeline ol li:not(:first-child) {
    margin-left: auto;
  }

  .timeline ol li div {
    position: static;
    width: 94%;
    height: auto !important;
    margin: 0 auto 25px;
  }

  .timeline ol li:nth-child(odd) div {
    transform: none;
  }

  .timeline ol li:nth-child(odd) div::before,
  .timeline ol li:nth-child(even) div::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: none;
    border-left: 1px solid white;
    height: 25px;
  }

  .timeline ol li:last-child,
  .timeline ol li:nth-last-child(2) div::before,
  .timeline ol li:not(:last-child)::after,
  .timeline .arrows {
    display: none;
  }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
/* Firefox */input[type=number] {-moz-appearance: textfield;}

/* -------------------------- FOOTER -------------------------- */
footer{padding: 0; background: #b9d4db; color: #000;}
footer .container-custom{max-width: 1627px; padding: 0 138px;border-top: 1px #000 solid;}
footer h3{font-size: 20px;color: #9D9D9D; margin: 30px 0 10px 0; font-weight: 600;}
footer ul{margin: 0; padding: 0; list-style-type: none;font-size: 15px;}
footer ul li{padding: 3px 0; font-size: 20px; font-size: 16px; font-weight: 400;}
.footer-bottom-row{ padding: 10px 0; background: #b9d4db;}
.footer-bottom-row p{color: #000;font-size: 16px;}
footer p{font-size: 16px; color: #fff;}
.social-media{margin: 10px 0 0 0; padding: 0; list-style-type: none;font-size: 14px; line-height: 24px;}
.footer-links{margin: 0 0 0 0; padding: 0; list-style-type: none;font-size: 14px; line-height: 24px;}
.footer-links li{margin-bottom: 10px;}
.social-media li{display: inline-block; margin-right: 5px;}
.social-media li:last-child{margin-right: 0;}
.social-media a{border: 1px #000 solid; background: #000; color: #fff; border-radius: 50%; width: 34px; height: 34px;display: block; text-align: center;padding: 4px; margin: 0; font-size: 14px;}
.social-media a:hover{border: 1px #0B8F21 solid; background: #0B8F21; color: #fff;}
footer a{text-decoration: none; color: #fff;transition: all 0.2s ease-in-out; }
footer a:hover{text-decoration: none; color: #0B8F21;}