/* -----------------------------------
   Sidebar & Mobile Menu
----------------------------------- */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  z-index: 998;
}

.sidebar-backdrop.active { 
  display: block; 
}

.navbar-nav {
  gap: 42px;
}

.mobile-sidebar {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  padding: 48px 35px 48px 48px;
  overflow-y: auto;
  transition: 0.3s ease;
  z-index: 999;
  background-image: url(../images/vectors/logowatermark.svg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
}

#mobile-menu{
  gap: 42px;
}

.mobile-sidebar.active { 
  right: 0; 
}

.dropdown-menu.industries-dropdown{
  width: 666px;
  max-width: 666px;
  left: -155px;
}
.dropdown-menu.industries-dropdown .cta{
  border-radius: 14px;
  padding: 14px 28px;
  background-color: #173B98;
  background-image: url(../images/vectors/vector-m5.svg);
  background-position: -25px bottom;
  background-size: contain;
  background-repeat: no-repeat;
}
.industries-dropdown .cta p{
  font-size: 20px;
}

.industries-dropdown .cta .btn{
  --bs-btn-padding-y: 0.63rem;
  --bs-btn-padding-x: 1.320rem;
  transition: 0.2s ease;
  margin-top: 12px;
}

.industries-dropdown .cta .btn:hover {
  --bs-btn-padding-x: 1.630rem;
}

/* -----------------------------------
   Video / Hero Section
----------------------------------- */
.video-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18) 59.63%,
    rgba(0, 0, 0, 0.67) 100%
  );
}

.video-title {
  padding-top: 50px;
  position: relative;
  vertical-align: bottom;
  max-width: 50%;
}

.title-rotator {
  position: relative;
  vertical-align: bottom;
}

.rotating-title {
  position: absolute;
  font-weight: 600;
  left: 20px;
  top: 0;
  white-space: nowrap;
}

.bg-intro {
  max-width: 1352px;
  width: 90%;
  column-gap: 145px;
  row-gap: 20px;
  right: 0;
  left: 0;
  padding: 0 0 75px;
}

.bg-intro .intro-content {
       
}

/* -----------------------------------
   Who We Are
----------------------------------- */
.who-we-are {
  padding: 116px 0 120px;
}

.who-we-are .image {
  border-radius: 20px;
  overflow: hidden;
}

.who-we-are img {
  border-radius: 20px;
  height: 403px;
  object-fit: cover;
  transform-origin: center right;
  transform: scale(1.5);
  object-position: right;
}

/* -----------------------------------
   Our Mission
----------------------------------- */
.our-mission {
  overflow: hidden;
}

.our-mission .badge {
  --bs-badge-font-size: 16px;
  --bs-badge-font-weight: 500;
  background-color: rgba(146, 163, 255, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.19);
  padding: 2px 14px;
  line-height: 26px;
}

.our-mission .vector-area {
  background-color: #253E80;
  margin-left: 80px;
  margin-right: -80px;
  position: relative;
  z-index: 0;
  height: 495px;
}
.our-mission .vector-area:after{
  content: '';
  position: absolute;
  right: 100%;
  left: 100%;
  bottom: 0;
  background-color: #253E80;
  height: 100%;
  width: 100vw;
  z-index: -1;
}

/* -----------------------------------
   Other Sections
----------------------------------- */
.buildings {
  column-gap: 83px;
  width: 282px;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  right: 0;
  left: -2px;
}

.vector-m1{
  margin-bottom: -40px;
}

.vector-m3 {
  max-width: 92%;
  position: absolute;
  top: 58px;
}

/* -----------------------------------
   Our Team
----------------------------------- */
.our-team { 
  padding: 100px 0; 
  overflow-x: hidden;
}

.our-team h2{
  margin-bottom: -40px;
}

.orbit-container {
  position: relative;
  height: 554px;
  margin-left: -80px;
}

.orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;
}

.orbit::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid #dde3f0;
  top: 50%;
  bottom: 0;
  right: 0;
  left: 50%;
  width: 414px;
  height: 414px;
  transform: translate(-50%, -50%);
}

.orbit-avatar {
  position: absolute;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #E7EAF1;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease;
  border: none;
}

.orbit-avatar:hover {
  background-color: #E7EAF1;
}

.orbit-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transform-origin: top center;
  transform: scale(1.6);
}

.orbit-avatar:nth-child(2) img {
  transform: scale(1.7);
  object-position: unset;
}

.orbit-avatar:nth-child(4) img {
  transform-origin: top right;
  transform: scale(1.2);
}

.orbit-avatar.is-active {
  z-index: 2;
  background-color: #FFD500;
}

.details {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(.25,.46,.45,.94);
}

.details.is-changing {
  opacity: 0;
  transform: translateX(40px);
}

.details h2 {
  margin-bottom: 50px;
}

.details h3 {
  margin-bottom: 14px;
}

.next-btn {
  width: 64px;
  height: 42px;
  border: none;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;        
}

/* -----------------------------------
   Our Expertise
----------------------------------- */
.our-expertise {
  padding: 150px 0 102px;
}

.advisory-section {
  padding: 90px 0 148px;
}

.advisory-card {
  background: transparent;
  border-radius: var(--radius-xl);
}
#ServiceModal .modal-content{
  --bs-modal-border-radius:40px;
}
#ServiceModal .btn-close{
  height: 32px;
  width: 32px;
  font-size: 12px;
  margin: -6px;
}
#ServiceModal .modal-title{
  margin-top: -40px;
  padding-left: 38px;
}
#ServiceModal .modal-title h4{
  background-color: #ffffff;
  display: inline-flex;
  line-height: 69px;
  padding: 3px 40px;
  border-radius: 60px;
  color: #172B4D;
}
#ServiceModal .modal-content img{
  max-height: 172px;
  object-fit: cover;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}
#ServiceModal .modal-text{
  padding: 22px 38px 38px 38px;
  background-image: url(../images/topology.png);
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: bottom right;
}
#ServiceModal .modal-text h5{
  line-height: 26px;
  padding-left: 12px;
}
#ServiceModal ul{
  padding-left: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px 0;
}
#ServiceModal ul li{
  list-style: none;
}
#ServiceModal ul li i{
  font-size: 30px;
}
#ServiceModal .modal-cta{
  padding: 34px;
  border-radius: 22px;
  background-color: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-top: 60px;
}
#ServiceModal .modal-cta h4{
  font-size: 22px;
  max-width: 447px;
}
#ServiceModal .btn {
  width: 132px;
  position: relative;
  overflow: hidden;
}
#ServiceModal .btn i {
  font-size: 15px;
  opacity: 0;
  transform: translateY(14px);
  width:0;
  transition:
    opacity 600ms cubic-bezier(0.53, 0.5, 0, 1),
    transform 600ms cubic-bezier(0.53, 0.5, 0, 1);
}
#ServiceModal .btn .btn-text {
  display: inline-block;
  transform: translateX(0);
  transition:
    transform 600ms cubic-bezier(0.53, 0.5, 0, 1);
}
#ServiceModal .btn:hover .btn-text {
  transform: translateX(-13px);
}
#ServiceModal .btn:hover i {
  opacity: 1;
  transform: translateY(0);
}
.advisory-image-stack {
  position: relative;
  width: 100%;
  max-width: 552px;
  aspect-ratio: 4 / 3.5;
  margin-left: auto;
}
.advisory-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-20px) scale(0.96);
  transition:
    opacity 480ms cubic-bezier(0.48, 0.4, 0.02, 1),
    transform 620ms cubic-bezier(0.48, 0.4, 0.02, 1),
    filter 620ms cubic-bezier(0.48, 0.4, 0.02, 1),
    z-index 0ms linear;
}
.advisory-image.pos-front {
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
  transform: translateX(0) scale(1);
}

.advisory-image.pos-mid {
  opacity: 1;
  z-index: 2;
  transform: translateX(-103px) scale(0.87);
}

.advisory-image.pos-back {
  opacity: 1;
  z-index: 1;
  transform: translateX(-190px) scale(0.765);
}
.advisory-eyebrow {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.advisory-title {
  font-size: 28px;
  margin: 0 0 22px;
}

.advisory-content{
  padding-left: 28px;
}
.advisory-list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}

.advisory-item .advisory-pill {
  width: 100%;
  padding: 25px 44px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28px;
  color: var(--bs-body-color);
}

.advisory-item .advisory-pill span{
  font-size: 18px;
  display: flex;
  align-items: center;
  display: none;
}

.advisory-item.is-active .advisory-pill span {
  display: flex;
}
#slider-indicator {
  position: absolute;
  width: 100%;
  height: 76px;
  background: var(--bs-secondary);
  border-radius: 40px;
  transition: transform 200ms cubic-bezier(0.48, 0.4, 0.02, 1);
  z-index: -1;
}
.advisory-item button {
  position: relative;
  z-index: 2;
}

.approach-section{
  padding: 50px 0 64px;
}

.approach-section .section-title{
  margin-bottom: 42px;
  display: flex;
  flex-direction: column;
}

.approach-section .approach-item{
  max-width: 335px;
  margin: 0 auto;
}

.approach-section .approach-item i{
  font-size: 67px;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 33px;
  position: relative;
}

.approach-section .row > div:nth-child(3) i {
  font-size: 64px;
}

.approach-section .row > div:nth-child(4) i {
  font-size: 57px;
}

.approach-section .approach-item .icon-circle-svg{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  bottom: 0;
}

.approach-section .approach-item.active circle{
  stroke: var(--bs-secondary);  
}

.approach-section .approach-item .approach-icon-wrap{
  transition: 0.5s;
  width: 80%;
  margin: 0 auto;
}

.approach-section .approach-item.active .approach-icon-wrap{
  transform: scale(1.19);
}

.approach-section .approach-item h4{
  line-height: 50px;
}

.approach-section .approach-item.active h4{
  color: var(--bs-secondary) !important;
}

.approach-section .approach-item p{
  color: #C1C7D0;
}

.why-bng{
  padding: 132px 0px;
}

.why-bng .section-title{
  margin-bottom: 44px;
}
.why-bng .card .card-body{
  padding: 38px 50px 27px 36px;
}

.why-bng .card .card-body i{
  font-size: 52px;
  margin-bottom: 66px;
  color: #0D2972;
}

.why-bng .card .card-body h4{
  margin-bottom: 14px;
   transition: 0.90s;
}

.why-bng .card .card-body p{
  transition: 0.90s;
}

.why-bng .card .hover-shape{
  width: 26px;
  height: 26px;
  background-color: var(--bs-secondary);
  position: absolute;
  top: 10%;
  left: 18%;
  transition: 0.90s;
  transform: translate(-50%);
}
.why-bng .card:hover .hover-shape {
  width: 100vh;
  height: 100vh;
  top: -50%;
  left: 50%;
}

.why-bng .card.bg-primary:hover h4, .why-bng .card.bg-primary:hover p {
  color: var(--bs-body-color) !important;
}

.why-bng .col-md-4:last-child .card{
  background-image: url('../images/vectors/vector-m4.svg');
  background-repeat: no-repeat;
  border-color: #5E6C84 !important;
  background-position-y: 100%;
  background-position-x: -10%;
}

.why-bng .col-md-4:last-child .card .btn{
  --bs-btn-padding-y: 0.63rem;
  --bs-btn-padding-x: 1.320rem;
  transition: 0.2s ease;
}

.why-bng .col-md-4:last-child .card .btn:hover{
  --bs-btn-padding-x: 1.630rem;
}

/* -----------------------------------
   Industries
----------------------------------- */
.pin-spacer{
  width: 100% !important;
}
.industries-section {
  position: relative;
  z-index: 2;          /* above hero when pinned */
  background: #ffffff; /* hides hero behind it */
  min-height: 100vh;   /* tall enough for first viewport */
  overflow: hidden;
}

.industries-intro-layer {
  position: absolute;
  inset: 0;
  display: flex;
  padding-top: 150px;
  align-items: start;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.industries-intro-inner {
  position: relative;
  width: 100%;
  text-align: center;
}

.industries-intro-globe-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.industries-intro-pill {
  position: absolute;
  left: 50%;               /* center horizontally */
  top: 50%;                /* optional: if you want vertical centering */
  transform: translate(-185px, -50%) scaleX(0.2) scaleY(1);
  transform-origin: center center; /* expand equally on both sides */
  
  width: 103px;
  height: 51px;
  background-image: url(../images/vectors/globe.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  z-index: 1;
}
.industries-intro-globe-text {
  position: relative;
  padding-left: 110px;
}

.industries-intro-oval {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  max-width: 960px;
  height: 260px;
  background: #003a86;
  transform: translate(-50%, -50%) scaleY(0);
  transform-origin: center center;
  z-index: -1;
}
.industries-wrapper {
  display: flex;
  height: 100%;
  opacity: 0; 
  z-index: 10;
  position: relative;
}

.industries-left {
  width: 50%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.industries-image-wrap{
  max-height: 562px;
}

.industries-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.industries-text-panel {
  flex: 1 0 40%;
  padding: 46px 54px 46px 54px;
  background-color: #ffffff;
}

.industries-body {
  max-width: 625px;
  margin-left: auto;
}

.industries-right {
  width: 50%;
  background-color: #003a86;
  position: relative;
  color: #ffffff;
  overflow: hidden;
}

.industries-tabs {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 100%;
pointer-events: none;
}

.tabs-wheel {
position: absolute;
right: -50%;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}

.industries-tab {
position: absolute;
top: 0;
right: 0;
border: none;
font-size: 40px;
background: transparent;
opacity: 0.30;
white-space: nowrap;
cursor: pointer;
pointer-events: auto;
text-align: right;
color: #ffffff;
font-weight: 400;
}

.industries-tab--active {
opacity: 1;
font-weight: 500;
}

/* -----------------------------------
   Our Services
----------------------------------- */

.services{
  padding: 85px 0 65px;
  overflow: hidden;
  height: 100vh;
}

.heading-services{
  padding-top: 150px;
}

.services .animation-panel-services img{
  transform: scale(1.39);
}

.services .animation-panel-services{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.services-panel ul{
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 160px;
  position: absolute;
  top:20%;
  left: 100px;
}
.services-panel ul li{
  list-style: none;
  position: relative;
  padding-left: 30px;
}
.services-panel ul li:nth-child(2){
  margin-left: -100px;
}
.services-panel ul li:before{
  content: '';
  position: absolute;
  width: 65px;
  height: 65px;
  background-color: var(--bs-secondary);
  border-radius: 50%;
  z-index: -1;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
}
.services-panel .services-right{
  right: 0;
  left: unset;
}
.services-panel .services-right li:nth-child(2){
  margin-left: 50px;
}
/* detail overlay (final state layout) */
.services-detail{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: var(--bs-primary); 
  max-width: 1352px;
  margin: 0 auto;
  max-height: 100vh;
}

.services-detail ul{
  display: flex;
  flex-direction: column;
  gap:12px;
  margin: 0;
}

.services-detail-left{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 35px 0 0;
  position: relative;
}

.services-detail-left:after{
  content: '';
  position: absolute;
  right: 100%;
  bottom: 0;
  background-color: var(--bs-primary);
  height: 100%;
  width: 100vw;
  z-index: -1;
}

.services-detail-left .watermark{
  max-width: 483px;
  position: absolute;
  z-index: 1;
  top: 35px;
}

.services-detail-right{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  background-image: url(../images/eventproduction-bg.jpg);
  background-size: contain;
  padding: 0 0 35px 35px;
}
.services-detail-right:before{
  content: '';
  position: absolute;
  left: 100%;
  bottom: 0;
  background-image: url(../images/eventproduction-bg.jpg);
  background-size: contain;
  height: 100%;
  width: 100vw;
  z-index: -1;
}
.services-detail-right img{
  max-width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.service-image{
  width: 525px;
  height: 305px;
  border: solid 10px #000000;
  border-radius: 5px;
  box-shadow: 1.85px 1.85px 3.7px 0px rgba(0, 0, 0, 0.25) inset;
}

.servicmobile{
  margin-top: 50px;
}

.servicmobile:nth-child(1){
  margin-top: 40px;
}

.servicmobile img{
  max-height: 200px;
  object-fit: cover;
}

.servicmobile h4{
  position: relative;
  padding-left: 30px;
  margin-bottom: 30px;
}

.servicmobile h4::before{
  content: '';
  position: absolute;
  width: 65px;
  height: 65px;
  background-color: var(--bs-secondary);
  border-radius: 50%;
  z-index: -1;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
}

.gallery {
  padding: 65px 0 150px;
}

.gallery .image-gallery{
  height: 293px;
}
/* -----------------------------------
   Blogb / Insights
----------------------------------- */
.insights{
  padding: 150px 0;
}

.insights .section-title{
  margin-bottom: 46px; 
}

.insights h2{
  line-height: 48px;
  margin-bottom: 34px;
}
.insight-item{
  margin-bottom: 46px;
}
.insight-item .card{
  max-width: 761px;
  position: absolute;
  bottom: 22px;
  left: 20px;
}

.insight-item .card .card-body{
  padding: 58px 34px 48px 34px;
}

.insight-item:hover .card .card-body h4 a{
  text-decoration: underline !important;
}

.insight-item .btn{
  transition: 800ms cubic-bezier(0.48, 0.4, 0.02, 1);
}

.insight-item:hover .btn{
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.insight-item .card .card-body i{
  font-size: 15px;
  transform: rotate(45deg);
  transition: 800ms cubic-bezier(0.48, 0.4, 0.02, 1);
}

.insight-item:hover .card .card-body i{
  transform: rotate(0deg);
}

.insight-item img{
  transition: 800ms cubic-bezier(0.48, 0.4, 0.02, 1);
}

.insight-item:hover img{
  transform: scale(1.040);
}

.insight-grid .insight-img{
  height: 293px;  
}

.insight-grid .insight-img img{
  transition: 800ms cubic-bezier(0.48, 0.4, 0.02, 1);
}

.insight-grid:hover .insight-img img{
  transform: scale(1.040);
}

.insight-grid:hover h4 a{
  text-decoration: underline !important;
}

.insight-grid .btn{
   position: absolute;
  right: 16px;
  bottom: -42px;
  transition: 800ms cubic-bezier(0.48, 0.4, 0.02, 1);
}

.insight-grid:hover .btn{
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  bottom: 16px;
}

.insight-grid i{
  font-size: 15px;
  transform: rotate(45deg);
  transition: 800ms cubic-bezier(0.48, 0.4, 0.02, 1);
}

.insight-grid:hover i{
  transform: rotate(0deg);
}

/* -----------------------------------
   Contact us
----------------------------------- */
.contact-us{
  padding: 150px 0 0;
}

.contact-us h2{
  line-height: 48px;
}

.contact-us .contact-details{
  gap: 42px;
  padding-top: 6px;
}

.contact-us .detail-panel{
  gap: 54px;
}
.contact-us .detail-panel i{
  font-size: 53px;
}

.contact-us  .card{
  max-width: 552px;
  margin-left: auto;
}

.contact-us  .card .card-body{
  padding: 66px 40px 44px;
}

.contact-us .card .card-body .mb-3{
  margin-bottom: 18px !important;
}

.contact-us  .card .card-body .btn{
  --bs-btn-padding-x: 44px;
  --bs-btn-padding-y: 11px;
  --bs-btn-font-size: 18px;
}

.contact-us  .card .card-body textarea.form-control-lg{
  min-height: 167px;
}

.contact-us .map-area{
  margin-top: -48px;
}



/* -----------------------------------
   Responsive
----------------------------------- */

/* @media (max-width:1600px){
  .industries-image-wrap{
    max-height: 300px;
  }
} */

@media(max-width:1400px){
  .our-mission .vector-area{
    margin: 0;
  }
  .services-detail-left, .services-detail-right{
    padding: 35px;
  }
  .services-detail-left .watermark{
    max-width: 50%;
  }
  
  .orbit-container{
    margin-left: 0;
  }
  .orbit-avatar{
    width: 120px;
    height: 120px;
  }
  .industries-tab{
    font-size: 25px;
  }
}

@media(max-width:1199px){
  
  .our-team h2{
    margin-bottom: 82px;
  }
  .team-wrapper {
    flex-direction: column;
    row-gap: 58px;
  }

  .orbit-container{
    height: 125px;
    margin-left: 0;
    overflow: hidden;
  }

  .orbit::before{ display:none; }

  .orbit::after{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    top: 62px;
    height: 2px;
    background:#dde3f0;
    z-index: -1;
  }

  .orbit-avatar{
    width: 90px;
    height: 90px;
  }
  .services{
    height: auto;
  }

  .who-we-are {
    padding: 60px 0px;
  }

  .our-mission .mission-content {
    padding: 60px 0px;
  }

  .our-team {
    padding: 60px 0;
  }
  .our-expertise {
    padding: 60px 0 34px;
  }
  .advisory-section {
    padding: 0 0 50px;
  }
  .approach-section {
    padding: 60px 0 0;
  }
  .why-bng {
    padding: 60px 0px 90px;
  }

  .industries-tab{
    font-size: 25px;
  }

  .services .animation-panel-services img{
    transform: scale(2);
  }

  .insights {
    padding: 60px 0;
  }
  .insight-item img{
    min-height: 400px;
  }
  .insight-item .card{
    right: 20px;
  }
  .insight-item .card .card-body {
    padding: 38px 34px 28px 34px;
  }

  .industries-wrapper{
    display:block !important;
    opacity: 1 !important;   /* IMPORTANT: your base opacity is 0 */
    height:auto !important;
  }

  .industries-section{
    min-height: auto;
  }

  .industries-left{
    width:100% !important;
    overflow:hidden;
    position:relative;
    touch-action: pan-y;
    margin-bottom: 90px;
    background-color: #0D2972;
    flex-direction: row;
  }

  .industries-right{
    display:none !important;
  }

  .industries-text-panel{
    padding: 22px 18px !important;    
    background-color: transparent;
    flex: 1 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .industries-text-panel .industries-title{
    color:#fff
  }

  .industries-body{
    max-width: 100% !important;
    margin-left: 0 !important;
    color:#fff;
  }

  .industries-image-wrap{
    height: 470px;
    max-height: 470px !important;
  }

  .industries-image-wrap,
  .industries-text-panel{
    will-change: transform, opacity;
  }

  .industries-intro-layer{
    opacity: 1 !important;
    visibility: visible !important;
    position: inherit !important;
    padding: 40px 14px 30px 14px;
  }

  .industries-intro-pill{
    display: none;
  }

  .industries-intro-globe-text{
    padding: 0;
  }
}

@media (max-width: 991px) {
  .our-mission .vector-area::after{
    width: auto;
    right: -100%;
    left: -100%;
  }
  .our-mission .mission-content{
    padding: 52px 0px;
  }
  .our-mission .vector-area{
    margin: 0 auto;
    height: auto;
    padding: 215px 0px;
  }
  .vector-m3{
    top: 0;
            padding-top: 15px;
  }
  .buildings{
    column-gap: 56px;
    width: 200px;
  }
  .buildings img{
    width: 100%;
  }
  .vector-m1 {
    margin-bottom: -10px;
  }

  


}

@media(max-width:767px){
    .bg-intro{
      padding-bottom: 30px;
    }
    .who-we-are{
      padding: 40px 0px;
    }
    .video-title{
      max-width: 100%;
    }
    .who-we-are img{
      height:auto
    } 
    
    .our-expertise{
      padding: 40px 0 14px;
    }

    .advisory-content{
      padding: 0;
    }

    .advisory-section {
      padding: 0 0 50px;
    }
    #slider-indicator{
      height: 60px;
    }
    .advisory-item .advisory-pill{
      font-size: 20px;
      padding: 17px 25px;
    }
    .approach-section {
      padding: 35px 0 0;
    }
    .approach-section .approach-item h4 {
      line-height: 28px;
    }
    .approach-section .approach-item .icon-circle-svg{
      width: 103px;
      height: 103px;
    }
    .approach-section .approach-item i{
      width: 103px;
      height: 103px;
      font-size: 45px !important;
      margin: 0 auto 18px;
    }
    .why-bng {
      padding: 40px 0px 90px;
    }
    .why-bng .card{
      height: auto;
      min-height: 305px;
    }
    .why-bng .col-md-4:last-child .card{
      background-position-x: right;
    }
    .why-bng .section-title {
      margin-bottom: 30px;
    }

    .insights {
      padding: 40px 0px 90px;
    }
    .insights h2{
      line-height: 34px;
      margin-bottom: 14px;
    }
    .insights .section-title {
      margin-bottom: 10px;
    }
    .insight-item {
      margin-bottom: 10px;
      margin-right: -12px;
      margin-left: -12px;
      border-radius: 0 !important;
    }
    .insight-item img{
      border-radius: 0 !important;
      min-height: auto;
    }
    .insight-item .card{
      position: relative;
      left: 0;
      margin-left: 12px;
      margin-right: 12px;
      bottom: 0;
      margin-top: -30px;
    }
    .insight-item .card .card-body {
      padding: 52px 20px 33px 20px;
    }
    .contact-us{
      padding-top: 48px;
    }
    .contact-us h2 {
      line-height: 34px;
      margin-bottom: 14px;
    }

    .contact-us .contact-details{
      gap: 30px;
      margin-bottom: 20px;
    }
    .contact-us .detail-panel i{
      font-size: 40px;
    }
    .contact-us .detail-panel{
      gap: 32px;
    }
    .contact-us .card .card-body {
      padding: 43px 30px;
    }
    .contact-us .map-area iframe{
      min-height: 310px;
    }

    #ServiceModal .modal-content{
      --bs-modal-border-radius: 20px;
    }

    #ServiceModal .modal-content img{
      max-height: 89px;
    }

    #ServiceModal .modal-title h4{
      line-height: 42px;
      padding: 3px 24px;
    }
    #ServiceModal .modal-title {
      margin-top: -25px;
      padding-left: 14px;
    }
    #ServiceModal .modal-text h5{
      padding: 0;
    }
    #ServiceModal .modal-text{
      padding: 22px 14px 38px 14px;
    }
    #ServiceModal ul{
      grid-template-columns: repeat(1, 1fr);
      padding: 0;
    }
    #ServiceModal .modal-cta{
      padding: 0;
      background-color: transparent;
    }
    #ServiceModal .modal-cta h4{
      display: none;
    }

    .heading-services{
      padding-top: 40px;
    }

    .services{
      padding: 16px 0 40px;
    }
    .services .animation-panel-services{
      width: 72%;
    }
    .gallery {
      padding: 0 0 90px;
    }

    .gallery .image-gallery {
      height: 234px;
    }

    .services .animation-panel-services img{
      transform: scale(1.39);
    }

    .industries-left{
      flex-direction: column;
      flex-direction: column-reverse;
    }

    .industries-image-wrap{
      height: auto;
    }
}

@media(max-width:576px){
    .title-rotator{
      display: block;
    }

    .rotating-title{
      left: 0;
    }
    .meta-line{
      flex-direction: column;
    }
    .team-wrapper .col-xl-5{
      padding: 0 ;
    }
    .details{
      padding: 0 16px;
    }
    .orbit {
      padding: 0 28px;
    }
    
}

@media(max-width:480px){
  .homecta{
    display: grid !important;
  }
  .bg-intro {
      padding-bottom: 20px;
  }
  .video-title {
        padding-top: 20px;
  }
  .bg-intro p {
      font-size: 16px;
  }
}

/*** END CSS ***/