@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');


:root {
  --maincolor: #193283;
  --primarycolor: #EFEFEF;
  --secondarycolor: #EBF0FF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Jost", sans-serif;
}
ul li {
  list-style: none  ;
}

.bg-main-color {
  background-color: var(--maincolor);
}
.bg-primary-color{
  background-color: var(--primarycolor);
}
.bg-secondary-color{
  background-color: var(--secondarycolor);
}
.main-color{
  color: var(--maincolor);
}

.w-active {
  color: var(--maincolor);
  background-color: #fff;
  width: fit-content;
  padding: 12px 15px;
  border-radius: 50px;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s ease;
}

.w-active:hover {
  color: #fff;
  background-color: var(--maincolor);
  transition: 0.5s ease;
}
.g-active{
  color: #fff;
  background-color: var(--maincolor);
  width: fit-content;
  padding: 12px 15px;
  border-radius: 50px;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s ease;  
}
.g-active:hover{
  color: var(--maincolor);
  background-color: var(--primarycolor);
  transition: 0.5s ease;  
}

p{
  font-family: "Urbanist", sans-serif;
  color: #4F4F4F;
}


/* header css starts*/
.navlink:hover {
  opacity: 1;
}

.navlink::before {
  transition: 300ms;
  height: 1px;
  content: "";
  position: absolute;
  background-color: #fff;
  color: #fff !important;
}

.nav-link-ltr::before {
  width: 0%;
  bottom: 10px;
}

.nav-link-ltr:hover::before {
  width: 100%;
}

.navbar-nav li a {
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 10px 0px;
  margin: 0px 13px;
  display: inline-block;
  position: relative;
}

@media (min-width:992px) {
  .navbar-nav {
    justify-content: end;
    width: -webkit-fill-available;
  }

}

@media (max-width:991px) {
  .navbar-collapse {
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
  }
  .navbar-nav{
    padding-top: 85px;
  }

  .navbar-nav li a{
    margin: 0;
    color: #fff !important;
  }
  .navbar-nav li {
    margin: 15px 0;
  }

}
.logo{
  width: 130px;
}
header {
  position: absolute;
  z-index: 111;
  width: 100%;
}

.navbar-nav .navlink.nav-active::before {
  height: 1px;
  content: "";
  position: absolute;
  width: 100%;
  bottom: 10px;
}

.navbar-nav .dropdown-menu a {
  margin: 0;
}

.navbar-nav .dropdown-menu a:hover {
  border-radius: 0;
}

/* header css ends*/

/* home page css starts */
.flex-slider {
  width: 100%;
  position: relative
}

.flex-slider .slides {
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0
}

.flex-slider .slides>li {
  float: left;
  margin-right: -100%;
  width: 100%;
  overflow: hidden;
  height: 100vh;
}

.flex-slider .flex-direction-nav {
  list-style: none;
  margin: 0;
  padding: 0
}

.flex-slider .flex-direction-nav .flex-prev,
.flex-slider .flex-direction-nav .flex-next {
    text-decoration: none;
    position: absolute;
    bottom: 35px;
    margin: 0 auto;
    z-index: 8;
    text-align: center;
    color: #fff;
    border: 1px solid white;
    border-radius: 50px;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width:992px) {
  .flex-slider .flex-direction-nav .flex-prev {
    right: 110px !important;
  }
  
  .flex-slider .flex-direction-nav .flex-next {
    right: 69px !important;
  }
  
}
.flex-slider .flex-direction-nav .flex-prev {
  right: 50px;
}

.flex-slider .flex-direction-nav .flex-next {
  right: 10px;
}

.slide-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

/* Add smooth fade transition to the slide overlay */
.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Adjust the opacity as needed */
  opacity: 0.7;
  /* Initially hidden */
  transition: opacity 0.1 ease;
  /* Smooth fade transition */
  background: linear-gradient(86.6deg, rgba(0, 0, 0, 0.5) 2.35%, rgba(0, 0, 0, 0.1) 65.75%);

}

/* Show the overlay when the slide is active */
.flex-active-slide .slide-overlay {
  opacity: 1;
}

/* Keep the rest of your code as it is */
.flex-active-slide .slide-image {
  animation: zoomIn 8s infinite;
}

@keyframes zoomIn {
  0% {
    transform: scale(1);
    background-size: cover;
  }

  100% {
    transform: scale(1.1);
  }
}

@media (max-width:768px) {
  .flex-slider .slides>li {
    height: 100vh;
    background-repeat: no-repeat;
    object-fit: cover;
  }
}

.home-top-heading {
  position: absolute;
  z-index: 9;
  color: white;
  /* width: 100%; */
  height: 100%;
}
.home-top-heading h1 {
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 700;
}
.home-top-sc-icon a{
    color: #272727;
    background-color: #fff;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    border-radius: 50px;
  transition: 0.5s ease;
  text-decoration: none;
}
.home-top-sc-icon a:hover{
  color: #fff;
  background-color: #272727;
  transition: 0.5s ease;
}
.head-card-one{
  background: url('/assets/images/wave-bg.png') no-repeat right, linear-gradient(180deg, #193283 0%, #141E52 100%);

}
.head-card-two{
  background: url('/assets/images/wave-bg.png') no-repeat right,
  linear-gradient(180deg, #99FFFF 0%, #141E52 100%);
}



.global-card-one {
  background: url(/assets/images/wave-1.png) no-repeat, #fff;
  padding: 35px 15px;
}

.global-card-one:hover {
  background: url(/assets/images/wave-1.png) no-repeat, var(--maincolor);  
}
.global-card-two {
  background: url(/assets/images/wave-2.png) no-repeat, #fff;
  padding: 35px 15px;
}

.global-card-two:hover {
  background: url(/assets/images/wave-2.png) no-repeat, var(--maincolor);  
}
.global-card-three {
  background: url(/assets/images/wave-3.png) no-repeat, #fff;
  padding: 35px 15px;
}

.global-card-three:hover {
  background: url(/assets/images/wave-3.png) no-repeat, var(--maincolor);  
}



.global-card-hover h2 {
  color: var(--maincolor);
}

.global-card-hover:hover img ,.global-card-hover:hover h2,.global-card-hover:hover p{
  filter: brightness(11.5);
  color: #fff;
}


.marquee-180 {
  position: absolute;
  width: 100%;
  height: fit-content;
  display: flex;
  gap: 60px;
  overflow: hidden;
}

.marquee_container-180 {
  height: 15vh;
  position: relative;
  overflow: hidden;

}

.marquee_group {
	display: flex;
	flex-shrink: 0;
	gap: 45px;
	min-width: 15%;
	align-items: center;
	justify-content: center;
	animation: scroll 15s linear infinite;
}

.marquee_group span {
	font-size: 70px;
	font-weight: 900;
	color: var(--maincolor);
  font-family: "Urbanist", sans-serif;  
}

.stroke-marque {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px var(--maincolor);
}

@keyframes scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - 60px));
	}
}

@media(min-width:768px){
  .whyus-banner{
    background-image: url(/assets/images/whyus-home-banner.jpg);
    background-position: center;
    background-size: cover;
  }
}

@media(max-width:767px){
  .whyus-banner{
    background-color: #193283 !important;
  }
}
/* whyus cards css */
.newsCard {
  position: relative;
  /* width: 100%; */
  height: 85vh;
  /* margin: 5rem auto; */
  /* background-color: #fff; */
  color:#fff;
  overflow: hidden;
  border-right: 1px solid #ffffff61;
}
@media(max-width:767px){
  .newsCard {
    height: fit-content;
    border: 1px solid #fff;
    padding: 15px;
  }
  .newscard-icon{
      rotate: 45deg;
      border: 1px solid white;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
}
@media(min-width:768px){
  .newsCaption {
    position: absolute;
    top: auto;
    bottom: 0;
    opacity: 1;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: #000; */
    padding: 15px;
    -webkit-transform: translateY(80%);
            transform: translateY(60%);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
    transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s, -webkit-transform 0.4s;
  }
  
  .newsCaption-title {
    margin-top: 0px;
  }
  
  .newsCaption-content {
    margin: 0;
    visibility: hidden;
  }
  
  .newsCaption-link {
    color: #fff;
    text-decoration: underline;
    opacity: 1;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.15s;
            transition-duration: 0.15s;
    -webkit-transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
            transition-timing-function: cubic-bezier(0.39, 0.58, 0.57, 1);
  }
  .newsCaption-link:hover {
    opacity: 1;
  }
  
  .news-Slide-up:hover .newsCaption {
    background-color: rgb(0 0 0 / 7%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(4px);
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transition: opacity 0.1s, -webkit-transform 0.4s;
    transition: opacity 0.1s, -webkit-transform 0.4s;
    transition: transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s, -webkit-transform 0.4s;
  }
  .news-Slide-up:hover .newsCaption-content{
    visibility: visible;
  }
  .newscard-icon{
    position: absolute;
      bottom: 15px;
      left: 15px;
      rotate: 45deg;
      border: 1px solid white;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
}

.owl-nav{
  display: none;
}
.customPreviousBtn{
  position: absolute;
  bottom: 20px;
font-size: 20px;
cursor: pointer;
z-index: 99;
right: 55px;
background: #dbdbdb;
padding: 5px 14px;
border-radius: 50px;
color:#fff;
transition: ease 0.3s;
}
.customNextBtn{
position: absolute;
bottom: 20px;
font-size: 20px;
cursor: pointer;
z-index: 99;
right: 10px;
background: #dbdbdb;
padding: 5px 14px;
border-radius: 50px;
color:#fff;
transition: ease 0.3s;
}
.customPreviousBtn:hover ,.customNextBtn:hover {
  background: var(--maincolor);
  transition: ease 0.3s;
}
.discover-carousel img{
  width: 60px !important;
}
.discover-carousel-main{
  height: 460px;
}
@media (min-width:580px) and (max-width: 799px) {
  .discover-carousel-main{
    height: 350px;
  }
}
/* .discover-carousel p{
  height: 65%;
  overflow: auto;
} */


.customPreviousBtn2{
  position: absolute;
  bottom: -15px;
  font-size: 15px;
  cursor: pointer;
  z-index: 99;
  left: 0;
  background: #dbdbdb;
  padding: 4px 10px;
  border-radius: 50px;
  color: #fff;
  transition: ease 0.3s;
}
.customNextBtn2{
position: absolute;
bottom: -15px;
font-size: 15px;
cursor: pointer;
z-index: 99;
right: 0;
background: #dbdbdb;
padding: 4px 10px;
border-radius: 50px;
color:#fff;
transition: ease 0.3s;
}
.customPreviousBtn2:hover ,.customNextBtn2:hover {
  background: var(--maincolor);
  transition: ease 0.3s;
}
/* -------------about us page css starts----------------- */
.about-us-banner{
  background-image: url(/assets/images/about-top-banner.jpg);
  height: 100vh;
  background-position: center;
  background-size: cover;
}
.mission-vision-banner{
  background: url(/assets/images/wave-mask.png) no-repeat, linear-gradient(176.64deg, #93E6F8 2.77%, #001557 97.28%);
  height: 100vh;
}
@media (max-width:767px){
  .mission-vision-banner{
    height: fit-content;
  }
  .customPreviousBtn, .customNextBtn{
    top: 0;
    bottom: auto;
  }
}
.boat-img{
  position: absolute;
  top: 25%;
  right: 0;
}
.mission-card img{
    /* background-color: #D1D6E6; */
    padding: 8px;
    width: 80px;
    /* border-radius: 18px; */
}
.global-logos img{
  filter: grayscale(1);
}
/* ------------------------product page css --------------------- */
.product-top-banner{
  background: url(/assets/images/products-top-banner.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

/* ------------------contact page css ------------------------- */
.contact-banner{
  background: url(/assets/images/home-banner-1.jpg);
  height: 60vh;
  background-size: cover;
  background-position: center;
}
.contact-form{
  background-color: var(--secondarycolor);
  padding: 15px;
  border-radius: 20px;
}
.contact-form input, .contact-form textarea{
  width: 100%;
  border-radius: 20px;
  border: none;
  background-color: #fff;
  padding: 9px;
  outline: none;
  margin: 12px 0;
}
/* ------------------------------- services page css -------------------------- */
.services-banner{
  background: url(/assets/images/serivce-banner.jpg);
  height: 100vh;
  background-position: center;
  background-size: cover;
}

/* ------------------------ career page css --------------------------- */
.career-banner{
  background: url(/assets/images/career-banner.jpg);
  height: 60vh;
  background-position: top;
  background-repeat: no-repeat;
  object-fit: cover;
  background-size: cover;

}
.career-top-heading{
  width: fit-content;
    /* text-align: center; */
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    flex-wrap: wrap;
    background-color: #fff;
}
@media(max-width:576px)
{
  .career-top-heading{
    width: fit-content;
      border-radius: 15px;
  }

}

.job-form input{
  padding: 5px ;
    border: none;
    outline: none;
    width: 85%;
}
.job-logo img {
  width: 55px;
  background-color: #fff;
  border-radius: 50px;
  padding: 20px 5px;
}
.job-apply label{
  font-size: 14px;
}
.apply-btn{
  background: #E4EAFD;
  color: var(--maincolor);

}

/* footer css */
.company-detail li{
  list-style: none;
}
.company-detail li a{
  color: #000;
  font-weight: 400;
  text-decoration: none;
}
.footer-sc-icons li a{
  text-decoration: none;
}
.footer-sc-icons i{
  color: var(--maincolor);
  background-color: #fff;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: 0 8px;

}

.text-bg{
  position: absolute;
    font-size: 12em;
    font-weight: 700;
    color: #1B1B1B0D;
    z-index: -1;
    right: 22px;
}
.cus-logo {
  width: 20%;
  padding: 15px 0;
}
@media (max-width:768px){
  .cus-logo {
    width: 30%;
}
.network-img{
  height: 200px !important;
}
}
@media (max-width:500px){
  .cus-logo {
    width: 45%;
}
.network-img{
  height: 160px !important;
}

}
.network-img{
  background-image: url(/assets/images/business-world.png);
  height: 70vh;
  background-position: center;
  background-size: cover;
}
.creative-process{
  background-image: url(/assets/images/world.jpg);
  height: 65vh;
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
.creative-process-carousel img {
  width: 75px !important;
  margin: auto;
}
.creative-process-carousel .owl-item{
  text-align: center;
}
.ptc-product-banner{
  background: linear-gradient(90deg, #193283 0%, #060B1D 100%);
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  /* Let the craziness begin!!! */
  grid-template-areas:
    "header header header"
    "title title footer"
    "main main main";
}

@media screen and (max-width: 500px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: 0.3fr 1fr auto 1fr;
    grid-template-areas:
      "header"
      "title"
      "main"
      "footer";
  }
}

.grid-item {
  padding: 3.5em 1em;
  font-size: 1em;
  font-weight: 700;
}


.main {
  grid-area: main;
  padding: 0;
  overflow-x: scroll;
  overflow-y: hidden;
}


.items {
  position: relative;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  transition: all 0.2s;
  transform: scale(0.98);
  will-change: transform;
  user-select: none;
  cursor: pointer;
}

.items.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1);
}

.item-logo {
  display: inline-block;
  /* min-height: 250px;
  min-width: 400px;
  margin: 2em 1em; */
}
.item-logo img{
  padding: 10px;
    width: 81px;
    background-color: #F3F3F3;
    border-radius: 15px;
    /* margin: 10px 0; */
}

@media screen and (max-width: 500px) {
  .item-logo {
    /* min-height: 200px;
    min-width: 200px; */
  }
}
*::-webkit-scrollbar { 
  width: 0 !important;
  display: none; 
}
.border-line{
  height: 1px;
    background-color: #fff;
    position: absolute;
    width: 100%;
    top: 230px;
    color: #fff;
    display: flex;
}