/*======================================================== General ======================================================*/
.site-logo{
  width: 150px;
}
#index-wrapper{
  margin-top:100px;
}
.bg-white{
  background-color: #ffffff;
}
.bg-home{
  background-color: #005691;
}
.bg-banner{
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  min-height: 500px;
}
.bg-banner-new{
  background-repeat: no-repeat !important;
  background-position: top !important;
  background-size: cover !important;
  min-height: 800px;
}
.bg-banner-text{
  background-color: rgb(255, 255, 255,0.65);
}
.bg-orange{
  background-color: #F0664E;
}
.bg-orange-light {
  background-color: rgb(240, 102, 78, 30%);
}
.bg-yellow{
  background-color: rgb(253, 182, 52,0.5);
}
.yellow-text{
  color: #FDB634;;
}
.yellow-line{
  border-color: #FDB634;;
  border-width: 2px;
}
.green-text{
  color: #7BC044;;
}
.bg-red{
  background-color: #CE1D58;
}
.bg-grey{
  background-color: #808285;
}
.bg-grey-light{
  background-color: rgb(128, 130, 133, 30%);
}
.bg-light-grey{
  background-color: rgb(128, 130, 133, 10%);
}
.btn-master:hover {
  background: transparent;
  border: 1px solid #000;
  color: #000 !important;
}
.btn-master-light:hover {
  background: transparent;
  border: 1px solid #fff;
  color: #fff !important;
}
body,
#why_talent{
  font-family: 'Montserrat', sans-serif !important;
}
.page-template-page-team-building-new h1,
.page-template-page-team-building-new h2.sec_title,
.page-template-page-team-building-new #team_banner h4 {
  font-family: 'Arial' !important;
}
h1,
.page-template-page-team-building-new h2{
  font-weight: 900;
}
h2{
  font-weight: 700;
}
#why_talent h4{
  font-weight: 800;
}
.position-absolute.center {
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
}
.mx-12{
  margin-left:calc(var(--bs-gutter-x) * .5);
  margin-right: calc(var(--bs-gutter-x) * .5);
}
.text-align-auto{
  text-align: left;
}
.w-fit-content{
  width: fit-content;
}
.f-15{
  font-size: 15px;
}
.py-6{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.pt-6{
  padding-top: 4rem;
}
.bg-btn-green{
  background-color: #359E88;
}
.ft-12{
  font-size: 12px;
}
.object-cover{
  object-fit: cover;
}
.px-6{
  padding-left: 4rem;
  padding-right: 4rem;
}
/*======================================================= Navigation ========================================================*/

svg.humburger {
  font-size: 28px;
  fill: #000 !important;
}
#main-menu a.nav-link{
  color:#000;
  font-weight: 700;
} 
#main-menu a.nav-link:hover,
#main-menu .active > a{
  color:#005691;
} 
.offcanvas-body,
.offcanvas-header{
  background-color: #fff;
}
.navbar-scroll{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030!important;
}
.scrolled-up {
  /* transform: translateY(0); */
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.scrolled-down {
  transform: translateY(-100%);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/*======================================================= Footer =======================================================*/

.footer-title {
  font-size:18px;
  font-weight: 700;
}
.footer-subtitle {
  font-size:17px;
  font-weight: bold;
}
.footer-content {
  font-size:15px;
  font-weight: 400;
}
.copyright-title{
  font-size: 13px;
}

/*====================== Google Map ======================*/
.mapouter {
  position: relative;
  text-align: right;
  width: 100%; /* This will make the map container match the column width */
  height: 0; /* Initial height set to 0 to maintain aspect ratio */
  padding-bottom: 75%; /* This will maintain a 4:3 aspect ratio (adjust as needed) */
}

.gmap_canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.gmap_canvas iframe {
  width: 100%;
  height: 100%;
}

/*======================================================= Homepage ========================================================*/
.sec_height{
  height: 550px;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.special-bullet li {
  list-style: none;
}
.special-bullet li::before {
  content: '';
  display: inline-block;
  background-image: url(/wp-content/themes/understrap-child/images/right-solid-arrow.png);
  background-position:center;
  background-size:contain;
  width: 18px;
  height:18px;
  background-repeat: no-repeat;
  margin-right: 15px;
}
.training-bg{
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}
.caro_size{
  width: 100%;
  min-height: 700px;
}
.team_caro_size{
  width: 100%;
  min-height: 500px;
}
.banner-min .col-4 img{
  min-height: 280px;
}
.banner-min p{
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}
.microsoft-content{
  font-size: 25px;
}
.micro-content{
  font-size: 20px;
}
/*================================= Carousel ===========================*/
.carousel-control-prev-icon{
  background-image: url(/wp-content/uploads/2023/08/Icon-left.png);
}
.carousel-control-next-icon{
  background-image: url(/wp-content/uploads/2023/08/Icon-right.png);
}
.carousel-control-next-icon, .carousel-control-prev-icon{
  width: 45px;
  height: 45px;
}

/*========================= Banner Carousel ===========================*/
.banner_size{
  width: 100%;
  height: 600px;
}
.caro_scroll{
  background-attachment: fixed !important;
}
/* #homeCarousel .carousel-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 44.27%, rgba(0, 0, 0, 0.2) 100%);
  z-index: 1; /* Adjust the z-index to control the overlay's stacking order 
} */
.carousel5-bg{
  background-color: #004138;
}
.carousel-height{
  height:700px;
  max-height:700px;
}

#homeCarousel2 .carousel-item.d-none a::before,
#homeCarousel .carousel-item.d-none a::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 44.27%, rgba(0, 0, 0, 0.2) 100%);
  z-index: 1; /* Adjust the z-index to control the overlay's stacking order */
}
.carousel4-bg{
  background: url('../images/carousel4-bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/*============================= Flip Card =============================*/
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.event-card {
  background-color: transparent;
  /* border: 1px solid #f1f1f1; */
  border: 1px solid #000;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);
}

/* This container is needed to position the front and back side */
.event-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.event-card:hover .event-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.event-card-front, .event-card-back {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.event-card-front {
  background-color: transparent;
  color: #fff;
}

/* Style the back side */
.event-card-back {
  background-color: #005691;
  color: white;
  transform: rotateY(180deg);
  position: absolute;
  bottom: 0;
}
/*========================================= Slick ===================================*/
/* Use a more specific selector to override the default styles */
.slick-arrow.slick-prev,
.slick-arrow.slick-next {
  /* Reset the content property to prevent text arrow */
  content: none;
  width: 40px;
  height: 40px;
}
.slick-prev{
  left: -50px !important;
}
.slick-next{
  right: -50px !important;
}

/* Position the next arrow on the right side */
.slick-arrow.slick-prev:before {
  /* Add your SVG code or background-image here */
  content: ''; /* Clear the content */
  background-image: url("/wp-content/uploads/2023/08/Icon-left.png"); /* Replace with your SVG arrow path */
  background-size: contain; /* Adjust this as needed */
  width: 40px; /* Adjust this as needed */
  height: 40px; /* Adjust this as needed */
  display: flex;
  background-repeat: no-repeat;
  /* Additional styling properties if needed */
}
.slick-arrow.slick-next:before {
  /* Add your SVG code or background-image here */
  content: ''; /* Clear the content */
  background-image: url("/wp-content/uploads/2023/08/Icon-right.png"); /* Replace with your SVG arrow path */
  background-size: contain; /* Adjust this as needed */
  width: 40px; /* Adjust this as needed */
  height: 40px; /* Adjust this as needed */
  /* Additional styling properties if needed */
  display: flex;
  background-repeat: no-repeat;
}
/*======================================================= About Us ========================================================*/
.sec_title{
  color: #005691;
}
.about_col{
  border: 1px solid #7BC044;
  border-right-width: 3px;
  border-bottom-width: 3px;
  margin: 0px 15px;
  padding: 25px 15px;
}
.icon_size{
  width: 55px !important;
  height: 55px !important;
}
.service_icon{
  width: 200px;
  height: 200px;
}
.page-template-page-about .event-card{
  border: none;
}

/*======================================================= Our Program =======================================================*/
.bd-between>[class*=col-]:before {
  background: #CE1D58;
  content: " ";
  left: 0;
  position: absolute;
  top: 50%;
  width: 1px;
  height: 50%;
  transform: translateY(-50%);
}
.bd-between>[class*=col-]:first-child:before {
  display: none;
}
.page-template-page-consultancy .about_col{
  box-shadow: 0 5px 15px rgb(0,0,0,0.3);
}
.program_icon{
  width: 50%;
  height: 50%;
}
.fly-down{
  padding-top: 80px;
}

/*======================================================= Team Building New =======================================================*/
.round-img{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  z-index: 1;
  border: 2px solid #fff;
}
.mr-feature{
  margin-right: -70px;
}
.feature-radius{
  border-radius: 70px 0px 0px 70px;
}
#team_banner h4{
  letter-spacing: -1px;
  font-weight: 800;
}
.accordion-button:not(.collapsed) {
  background: transparent;
  color: #000;
  box-shadow: none;
}
.accordion-header {
  border-bottom: 1px solid #dee2e6;
}
.accordion-button:not(.collapsed)::after{
  filter: brightness(0);
}
.accordion-button:focus{
  box-shadow: none;
}
.carousel-item.active{
  transform: none;
  transition: none;
}
#last-sec .bg-banner{
  min-height: 500px;
  height: auto;
}
/*======================================================= Team Building =======================================================*/
.reason_block{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.reason_block_new{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.reason_icon{
  width: 60%;
  height: 60%;
}
.reason_block:hover {
  background: #005691;
}
.team_col,
.activity_col{
  box-shadow: 0 5px 15px rgb(0,0,0,0.3);
}
.activity_col{
  width: 250px;
}
.activity_icon{
  width: 60%;
  max-height: 100%;
}
/*======================================================= Contact Us =======================================================*/

input#submit {
  background-color: #005691;
  color: #fff;
  border: 1px solid #005691;
}
input#submit:hover {
  background: transparent;
  border: 1px solid #000;
  color: #000 !important;
}
#wpcf7-f209-o1{
  width: 100%;
  max-width: 100%;
}
/*============================================= Media Query (Responsiveness) ===================================================*/
@media screen and (max-width: 500px) {
  .mob-title{
    font-size: 20px;
  }
  .microsoft-content,
  .micro-content{
    font-size: 16px;
  }
  .micro-btn{
    font-size: 12px;
    line-height: normal;
  }
  .microsoft-content{
    padding: 0;
  }
  .microsoft{
    position:absolute;
    bottom: 60% !important;
    right: 0;
    transform: translateY(50%);
  }
}
@media screen and (max-width: 767px) {
  .hamburger {
      display: flex;
  }
  .slick-prev{
    left: -35px !important;
  }
  .slick-next{
    right: -35px !important;
  }
  .navbar {
      background-color: transparent;
  }
  #main-menu a.nav-link{
    font-size: 30px;
    color: #fff;
  } 
  #main-menu a.nav-link:hover{
    color: #fff;
  } 
  .offcanvas-body,
  .offcanvas-header{
    background-color: #005691;
  }
  .bd-between>[class*=col-]:before {
    display: none;
  }
  .fly-down{
    padding-top: 0px;
  }
  .banner-min p{
    font-size: 14px;
  }
  .banner-min .col-4 img{
    min-height: 100%;
  }
  .carousel-item-next,
  .active.carousel-item-right {
    transform: translateX(0); /* No translation on mobile */
  }
  .carousel-item-prev,
  .active.carousel-item-left {
    transform: translateX(0); /* No translation on mobile */
  }
  .carousel5-row1{
    height: 40%;
  }
  .carousel5-row2{
    height: 60%;
  }
  .carousel6-row1{
    height: 30%;
  }
  .carousel6-row2{
    height: 70%;
  }
  .microsoft{
    position:absolute;
    bottom: 70%;
    right: 0;
    transform: translateY(50%);
  }
  .carousel-height{
    height:750px;
    max-height:750px;
  }
  .min-h{
    min-height:320px;
  }
}

@media screen and (max-width: 600px) {
  .text-align-auto{
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .min-h{
    min-height:300px;
  }
}
@media screen and (min-width: 1200px) {
  .mt-gap{
    margin-top:-10%;
  }
  .min-h{
    min-height:350px;
  }
}
@media screen and (max-width: 1024px) {
  .medium_center{
    justify-content: center;
  }
  .activity_col{
    width: 100%;
  }
  .banner_size{
    height: 100%;
  }
  .activity_icon{
    padding:10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .banner-min .col-4 img {
    min-height: 250px;
  }
  .banner-min p{
    font-size: 18px;
  }
}