/* Banner container */
.main-banner-video,
.main-banner-video .item,
.banner-video {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.banner-video {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.banner-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

    object-position: center top;
  z-index: 1;
}

.slider-content {
  position: relative;
  z-index: 2;
  color: #fff;

  top: 50%;
  transform: translateY(-50%);
}

/* Video */
.banner-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* fills screen without distortion */

    object-position: center top;
}

/* Progress bar */
.video-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.3);
    z-index: 3;
}

.video-progress span {
    width: 0;
    height: 100%;
    display: block;
    background: #ff5e14;
}

/* 🔴 MOBILE FIX */
@media (max-width: 768px) {

    .main-banner-video,
    .main-banner-video .item,
    .banner-video {
        height: 45vh; /* tablets / large phones (up to 768px) */
    }

    .banner-video video {
        object-fit: contain; /* prevents cropping on mobile */
    }

    .banner-video-el {
        object-fit: cover !important;
    }

    .slider-content{ padding:40px 20px 20px !important}

    /* Root cause of the header overlapping the hero: shortcode.css always
       makes header-style-2's JS-inserted .site-header-menu-wrapper
       position:absolute (by design, so it can float transparently over
       the hero on desktop). Absolute positioning removes it from flow
       regardless of the sticky-header class or the inner element's own
       position value, so the hero was rendering underneath it with no
       reserved space. On mobile we want the header to always take up
       real space above the hero instead, so put the wrapper back into
       normal flow; the header itself still looks "sticky" (solid bg,
       dark logo) because js/scripts.js keeps the sticky-header class on
       at all times below 768px. */
    .header-style-2 .site-header-menu-wrapper{
        position: relative !important;
        height: 84px;
    }

    /* position:sticky does NOT work here: the closing </header> tag for
       header-style-2 sits AFTER the entire hero video block (the theme
       nests the hero inside <header> so it can visually float under the
       header on desktop), so .site-header-menu's sticky containing block
       is only .site-header-menu-wrapper, which is just ~84px tall (the
       nav row itself) — sticky has no extra parent height to hold its
       position against once you scroll past that. position:fixed pins
       to the viewport instead, ignoring parent height entirely; the
       hero video that follows it in flow then needs top margin equal to
       the header's own height so it doesn't render underneath it. */
    .header-style-2 .sticky-header{
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 2px 5px rgb(0 0 0 / 8%);
    }

}

/* Hero video height scales down further on narrower phones so it stays
   proportionate instead of using the same 33vh as a 768px tablet. */
@media (max-width: 575px) {
    .main-banner-video,
    .main-banner-video .item,
    .banner-video {
        height: 42vh; /* medium phones */
    }
}

@media (max-width: 375px) {
    .main-banner-video,
    .main-banner-video .item,
    .banner-video {
        height: 35vh; /* small phones */
    }
}

/* Fade Effect */
.owl-carousel .owl-item {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.owl-carousel .owl-item.active {
    opacity: 1;
}

.slider-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: left;
    color: #fff;
    width: 100%;
    padding: 150px 20px 20px;
    pointer-events: none;
    text-align:center
}

/* Optional dark overlay for contrast */
.banner-video::after {
    content: "";
    position: absolute;
    inset: 0;
    /*background: rgb(8 16 37 / 10%);*/
    background:linear-gradient(1deg, rgba(0, 0, 0, 0.00) 25%, #000 99.49%), linear-gradient(179deg, rgb(14 194 238 / 10%) 21%, #414141 119.12%);
    z-index: 1;
}

.slider-content h1 {
    font-size: 68px;
    font-weight: 700; line-height:84px;font-family: var(--pbmit-heading-typography-font-family);
    color:#fff;
}

.slider-content p {
    font-size: 22px;
    margin-top: 10px;
    opacity: 0.9;
    color:#fff;
}


.banner-btn {
    display: inline-block;
    margin-top: 20px; margin-right:10px;
    padding: 18px 25px;
    background:  #02469d;
    color:#ffffff;
    text-decoration: none;
    font-weight: 600;
    pointer-events: auto;
    transition: background 0.3s ease;
   /*border-radius:50px;*/
   font-family: var(--pbmit-btn-typography-font-family);
    font-size: var(--pbmit-btn-typography-font-size);
    font-weight: var(--pbmit-btn-typography-variant);
    line-height: var(--pbmit-btn-typography-line-height);transform: skew(-20deg);  margin-right:20px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .3);
}

.banner-btn-text
{
    display:inline-block;
  transform: skew(20deg);
}

.banner-btn:hover {
    background:#fff ; color:#02469d
}


.banner-btn1 {
    display: inline-block;
    margin-top: 20px;
    padding: 18px 25px;
    background: #f66e26;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    /*border-radius:50px;*/
    pointer-events: auto;
    transition: background 0.3s ease;
   font-family: var(--pbmit-btn-typography-font-family);
    font-size: var(--pbmit-btn-typography-font-size);
    font-weight: var(--pbmit-btn-typography-variant);
    line-height: var(--pbmit-btn-typography-line-height);transform: skew(-20deg); margin-right:20px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .3);
}

.banner-btn1-text
{
    display:inline-block;
  transform: skew(20deg);
}

.banner-btn1:hover {
    background: #fff; color:#f66e26
}

@media (max-width: 768px) {

    .slider-content h1 {
    font-size: 24px;
    line-height: 1.4;
    margin-bottom: 0px;
    margin-top: 0px;
}

.slider-content p {
    font-size: 12px;
    line-height: normal;
    margin-bottom: 0px;
    margin-top: 0px;
 }

.banner-btn {
    padding: 8px 20px;
    font-size: 10px;
}
.banner-btn1 {    
    padding: 9px 22px;    
    font-size: 10px;
}


}


















/** banner-section **/

.banner-section{
  position: relative;
  overflow: hidden;
}

.banner-section::before{
  position: absolute;
  content: '';
  background-color: #ebe9ef;
  width: 1px;
  height: calc(100% - 200px);
  top: 0px;
  right: 100px;
  z-index: 2;
}

.banner-section .pattern-layer{
  position: absolute;
  top: 100px;
  right: 100px;
  width: 286px;
  height: 326px;
  background-repeat: no-repeat;
}

.banner-section .pattern-layer-2{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 445px;
  height: calc(100% - 200px);
  background-repeat: no-repeat;
  z-index: 2;
}

.banner-section .outer-container{
  position: relative;
}
  
.banner-carousel .slide-item{
  position: relative;
  overflow: hidden;
}

.banner-section .banner-carousel .slide-item{
  padding-bottom: 200px;
}

.banner-section .banner-carousel .content-box{
  position: relative;
  float: right;
  background-color: #fff;
  max-width: 750px;
  padding: 24px 30px 100px 100px;
  width: 100%;
}

.banner-section .banner-carousel .content-box .image-layer{
  position: absolute;
  left: -111px;
  bottom: 170px;
}

.banner-section .banner-carousel .content-box .inner-box{
  position: relative;
  z-index: 5;
}
  
.banner-carousel .slide-item .bg-layer{
  position: absolute;
  right:0;
  top:0;
  width: 100%;
  height:100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  -webkit-transition: all 8000ms linear;
  -moz-transition: all 8000ms linear;
  -ms-transition: all 8000ms linear;
  -o-transition: all 8000ms linear;
  transition: all 8000ms linear;
}
  
.banner-carousel .active .slide-item .bg-layer{
  -webkit-transform:scale(1.25);
  -ms-transform:scale(1.25);
  transform:scale(1.25);
}
  
.banner-carousel .content-box h2{
  display: block;
  font-size: 36px;
  line-height: 44px;
  margin-bottom: 42px;
  text-transform: capitalize;
  opacity: 0;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
}
  
.banner-carousel .active .content-box h2{
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: 700ms;
  -moz-transition-delay: 700ms;
  -ms-transition-delay: 700ms;
  -o-transition-delay: 700ms;
  transition-delay: 700ms;
}

.banner-section .banner-carousel .content-box h2{
  padding-bottom: 30px;
}

/*.banner-section .banner-carousel .content-box h2::before{
  position: absolute;
  content: '';
  background-color: #f66e26;
  width: 100px;
  height: 1px;
  left: 0px;
  bottom: 0px;
}*/

.banner-carousel .content-box h2 span{
  font-weight: 300;
}

.banner-carousel .content-box p{
  margin-bottom: 42px;
  opacity: 0;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.banner-section .banner-carousel .content-box p{
  max-width: 380px;
  /*padding-left: 100px;*/
}
  
.banner-carousel .active .content-box p{
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: 1000ms;
  -moz-transition-delay: 1000ms;
  -ms-transition-delay: 1000ms;
  -o-transition-delay: 1000ms;
  transition-delay: 1000ms;
}
  
.banner-carousel .content-box .btn-box{
  opacity: 0;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.banner-section .banner-carousel .content-box .btn-box{
  /*padding-left: 100px;*/
}
  
.banner-carousel .active .content-box .btn-box{
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: 1300ms;
  -moz-transition-delay: 1300ms;
  -ms-transition-delay: 1300ms;
  -o-transition-delay: 1300ms;
  transition-delay: 1300ms;
}

.banner-section .banner-right-content{
  position: absolute;
  top: -70px;
  right: 0px;
  width: 100px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  z-index: 2;
}

.banner-section .banner-right-content .mail-box{
  position: relative;
  display: block;
  padding-bottom: 40px;
  margin-bottom: 40px;
  text-align: center;
}

.banner-section .banner-right-content .mail-box::before{
  position: absolute;
  content: '';
  background-color: #ebe9ef;
  width: 70px;
  height: 1px;
  left: -22px;
  bottom: 0px;
}

.banner-section .banner-right-content .mail-box a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: #a5aaaf;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.banner-section .banner-right-content .mail-box a i{
  position: relative;
  display: inline-block;
  color: var(--theme-color);
  transform: rotate(180deg);
}

.banner-section .banner-right-content .social-links{
  position: relative;
  display: block;
  text-align: center;
}

.banner-section .banner-right-content .social-links li{
  position: relative;
  display: block;
  margin-bottom: 25px;
}

.banner-section .banner-right-content .social-links li:last-child{
  margin-bottom: 0px;
}

.banner-section .banner-right-content .social-links li a{
  position: relative;
  display: inline-block;
  font-size: 20px;
  color: #afb3b8;
}

.banner-section .banner-right-content .social-links li a:hover{
  color: var(--theme-color);
}

.banner-section .banner-right-content .social-links li h5{
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 26px;
  color: #a5aaaf;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.banner-section .banner-carousel .owl-nav{
  position: absolute;
  right: 750px;
  bottom: 238px; background:#f66e26
}

.banner-section .banner-carousel .owl-nav button{
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  background-color: #f66e26;
}

.banner-section .banner-carousel .owl-nav button.owl-prev{
  border-bottom: 1px solid #fe7a45;
}

.banner-section .banner-right-content .mail-box a:hover{
  color: #f66e26;
}

.banner-section .banner-carousel .owl-nav button span { color:#fff}


.rotate-me {
    animation-name: rotateme; 
    animation-duration: 24s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  
  -webkit-animation-name: rotateme; 
    -webkit-animation-duration: 24s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
  
  -moz-animation-name: rotateme; 
    -moz-animation-duration: 24s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
  
  -ms-animation-name: rotateme; 
    -ms-animation-duration: 24s; 
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
  
  -o-animation-name: rotateme; 
    -o-animation-duration: 24s; 
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}







.pbmit-heading-subheading.white-text .pbmit-title span.color1{color:#f66e26 !important}
.white-text{ color:#fff !important }

.pbmit-feature-card {
    background: #fff;
    border: 1px solid rgba(2, 70, 157, 0.12);
    border-radius: 20px;
    padding: 28px 24px;
    min-height: 260px;
    box-shadow: 0 18px 45px rgba(17, 68, 122, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pbmit-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px rgba(17, 68, 122, 0.12);
}

.pbmit-feature-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(2, 70, 157, 0.09);
    color: var(--pbmit-global-color);
    font-size: 22px;
    margin-bottom: 18px;
}

.pbmit-feature-card h3 {
    font-size: 20px;
    margin-bottom: 14px;
}

.rd-tooling-section .pbmit-card-highlight {
    background: linear-gradient(180deg, rgba(2, 70, 157, 0.08), rgba(246, 110, 38, 0.06));
    border-radius: 22px;
    padding: 28px 26px;
    min-height: 100%;
    border: 1px solid rgba(2, 70, 157, 0.08);
}

.pbmit-card-highlight .pbmit-badge {
    display: inline-block;
    background: rgba(2, 70, 157, 0.12);
    color: var(--pbmit-global-color);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
}

.pbmit-card-highlight h4 {
    font-size: 24px;
    margin-bottom: 16px;
}

.pbmit-card-highlight p {
    margin-bottom: 18px;
    color: #404040;
    line-height: 1.75;
}

.pbmit-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pbmit-summary-list li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    margin-bottom: 12px;
    color: #333333;
    line-height: 1.65;
}

.pbmit-summary-list li i {
    color: var(--pbmit-global-color);
    margin-top: 4px;
}

.pbmit-tool-card {
    background: rgba(2, 70, 157, 0.05);
    border-radius: 16px;
    padding: 18px 18px;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    min-height: 72px;
    border: 1px solid rgba(2, 70, 157, 0.08);
}

.pbmit-tool-card i {
    color: var(--pbmit-global-color);
    margin-top: 4px;
    min-width: 22px;
}

.rd-tooling-section .pbmit-heading-subheading {
    margin-bottom: 12px;
}

/* ===== PREMIUM MVQ SECTION ===== */
.mvq-premium {
  padding: 0;
  overflow: hidden;
}

.mvq-row {
  display: flex;
  min-height: 400px;
}

/* REVERSE LAYOUT */
.mvq-row.reverse {
  flex-direction: row-reverse;
}

/* TEXT BLOCK */
.mvq-text {
  width: 50%;
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  position: relative;
}

/* CHANGED: Swapped clip-path parameters to reverse the parallelogram slant */
.mvq-text::before {
  content: "";
  position: absolute;
  inset: 0;
  /*clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);*/
  z-index: 1;
}

/* CHANGED: Swapped reverse clip-path parameters for even consistency */
.mvq-row.reverse .mvq-text::before {
 /* clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);*/
}


/* CONTENT */
.mvq-text h2,
.mvq-text p {
  position: relative;
  z-index: 2;
}

.mvq-text h2 {
  font-size: 40px;
  margin-bottom: 20px;
  font-weight: 700;
}

.mvq-text p {
  font-size: 16px;
  line-height: 1.8;
  max-width: 500px;
}

/* COLORS */
.mvq-text.blue::before {
  background: linear-gradient(135deg, #02469d, #06346f);
}

.mvq-text.orange::before {
  background: linear-gradient(135deg, #ff6a00, #ff9800);
}

.mvq-text.black::before {
  background: linear-gradient(135deg, #000, #333);
}

/* IMAGE BLOCK */
.mvq-image {
  width: 40%;
  overflow: hidden;
  position: relative;
}

.mvq-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* HOVER EFFECT */
.mvq-row:hover .mvq-image img {
  transform: scale(1.08);
}

/* SUBTLE OVERLAY */
.mvq-image::after {
  content: "";
  position: absolute;
  inset: 0;
 /* background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);*/
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .mvq-row {
    flex-direction: column;
  }

  .mvq-row.reverse {
    flex-direction: column;
  }

  .mvq-text,
  .mvq-image {
    width: 100%;
  }

  .mvq-text {
    padding: 50px 30px;
  }

  .mvq-text::before, .mvq-row.reverse .mvq-text::before {
    clip-path: none;
  }
}





/* BACKDROP */
.team-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
}

/* BOX */
.team-modal-box {
  width: 80%;
  height: 80%;
  margin: auto;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  animation: scaleIn 0.3s ease;
}

/* INNER */
.team-modal-inner {
  display: flex;
  width: 100%;
  height: 100%;
}

/* LEFT */
.team-modal-left {
  width: 40%;
}

.team-modal-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* RIGHT */
.team-modal-right {
  width: 60%;
  padding: 60px;
}

.team-modal-right h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.team-modal-right h4 {
    color: #f66e26;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 500 !important;
}

/* CLOSE */
.team-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  cursor: pointer;
}

/* ANIMATION */
@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* MOBILE */
@media (max-width: 991px) {
  .team-modal-inner {
    flex-direction: column;
  }

  .team-modal-left,
  .team-modal-right {
    width: 100%;
  }

  .team-modal-right {
    padding: 30px;
  }
}







/* Client Logo Grid */
.client-logo-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    align-items: center;
}

.client-logo-grid .pbmit-client-style-1{
    width: 100%;box-shadow: 0px 1px 13px 6px #f7f7f7;
}

.client-logo-grid .pbmit-border-wrapper{
    min-height: 120px;
    padding: 20px;
    border: 1px solid #e5e5e5;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.client-logo-grid .pbmit-border-wrapper:hover{
    transform: translateY(-5px);
}

.client-logo-grid img{
    width: 100%;
    max-width: 160px;
    object-fit: contain;
}

/* Tablet */
@media (max-width: 991px){
    .client-logo-grid{
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px){
    .client-logo-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .client-logo-grid .pbmit-border-wrapper{
        min-height: 90px;
        padding: 15px;
    }
}

.site-header-menu
{
    border-top: 4px solid #f66e26;
}
.sticky-header.site-header-menu
{
    background: #fff;
    border-top: 4px solid #f66e26;  border-bottom:1px solid rgba(255,255,255,0.3)  
}

.sticky-header.site-header-menu .menu li a{ color:#000; padding-top:0px}

.sticky-header.site-header-menu .has-mega > a::after { top:0px}

@media (min-width: 1024px) and (max-width: 1300px) 
{
    
   .menu li a { font-size:14px} 
   .mega-menu {
    position: absolute;
    top: 120%;
    left: 70%;
    transform: translateX(-50%) translateY(20px);
    width: 660px;
    max-width: 80vw;
    background: #fff;
    padding: 15px 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-top: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
   
 .mega-column a {
    display: block;
    margin-bottom: 10px;
    color: #000000 !important;
    font-size: 11px !important;
    transition: 0.2s;
    padding-left:0px !important;
    padding-top: 0px !important;
}  
 .menu li h4 a {padding:0px 15px;color: #02469d !important;font-size: 13px !important;}  
 .menu {
    display: flex;
    align-items: center;
    gap: 35px;
    margin-left: 200px;
}


.container{
max-width: 1024px;
}
    
}



.header-style-3.new .menu li a { color:#333; padding-top:0px}

.header-style-3.new .menu li.has-mega > a::after { top:-3px}

.header-style-3.new .menu li a:hover{ color:#f66e26}

/* --- Innovation & Excellence Section Layout --- */
.innovation-content {
    margin-top: 25px;
    text-align: left;
}

/* Intro Paragraph */
.section-intro-text {
    font-size: 16px;
    line-height: 1.6;
    color: #4a5568;
    margin-bottom: 24px;
}

/* Feature Pillars List Container */
.pillar-features-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Individual List Item Adjustment */
.pillar-features-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
}

/* Sleek Geometric Bullet Point using Corporate Identity Hex */
.pillar-features-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: #182a58; /* Signature Deep Blue */
    border-radius: 50%;
}

/* Strong Header Accents */
.pillar-title {
    font-size: 16px;
    font-weight: 700;
    color: #182a58; /* Signature Deep Blue */
    display: inline-block;
    margin-right: 4px;
}

/* Explanatory Descriptions */
.pillar-desc {
    color: #4a5568;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .section-intro-text {
        font-size: 15px;
    }
    
    .pillar-features-list li {
        font-size: 14px;
    }
    
    .pillar-title {
        font-size: 15px;
        display: block; /* Stacks title above text on small mobile screens */
        margin-bottom: 2px;
    }
}




/* --- Optimized Grid Alignment Tuning --- */
.layout-optimized {
  /*margin-top: 80px !important;*/
  margin-bottom: 80px !important;
}

.layout-optimized .mvq-row {
  margin-bottom: 0 !important; /* Forces row wrappers to connect seamlessly */
}

/* --- Typography Layout Structures --- */
.mvq-body-content {
  position: relative;
  z-index: 2;
  margin-top: 15px;
}

.mvq-body-content p {
  margin-bottom: 0;
}

.mvq-body-content p.spacing-paragraph {
  margin-bottom: 16px; /* Substitutes manual breaking tags with uniform paragraph rhythm */
}

.mvq-body-content .lead-text {
  font-size: 18px;
  line-height: 1.7;
}

/* --- Clean Unordered List Typography --- */
.mvq-structured-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.mvq-structured-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #ffffff !important;
}

.mvq-structured-list li:last-child {
  margin-bottom: 0;
}

/* Elegant geometric customized bullets using pure layout mechanics */
.mvq-structured-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background-color: #ffffff;
  border-radius: 50%;
  opacity: 0.85;
}

/* --- Scaled Responsive Breakpoint Logic --- */
@media (max-width: 991px) {
  .layout-optimized {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  
  .mvq-structured-list li {
    font-size: 15px;
  }
  
  .mvq-body-content .lead-text {
    font-size: 16px;
  }
}


/* =====================================
PRODUCT GRID
===================================== */

.product-card{
    display:block;
    background:#fff;
    overflow:hidden;
    height:100%;
    text-decoration:none;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.product-card:hover{
    transform:translateY(-10px);
}

.product-card-image{
    overflow:hidden;
    height:260px;
}

.product-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.product-card:hover img{
    transform:scale(1.08);
}

.product-card-content{
    padding:35px;
}

.product-card-content span{
    font-size:55px;
    font-weight:700;
    color:#dcdcdc;
    display:block;
    line-height:1;
}

.product-card-content h3{
    font-size:28px;
    margin:15px 0;
}

.product-link{
    color:var(--pbmit-global-color);
    font-weight:600;
    margin-top:15px;
}

/* =====================================
SHOWCASE SECTION
===================================== */

.solution-row{
    display:flex;
    align-items:center;
    gap:80px;
    margin-bottom:120px;
}

.solution-row.reverse{
    flex-direction:row-reverse;
}

.solution-image{
    width:50%;
}

.solution-image img{
    width:100%;
    clip-path: polygon(15% 0%,100% 0%,85% 100%,0% 100%);
}

.solution-content{
    width:50%;
}

.solution-number{
    font-size:80px;
    font-weight:700;
    color:#ececec;
    line-height:1;
}

.solution-content h3{
    margin:20px 0;
}

.solution-content ul{
    margin:25px 0;
}

.solution-content ul li{
    margin-bottom:10px;
}

/* =====================================
STRENGTHS
===================================== */

.strength-box{
    background:#f7f7f7;
    padding:80px;
    text-align:center;
}

.strength-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:40px;
}

.strength-grid div{
    background:#fff;
    padding:25px;
    font-weight:600;
}

/* =====================================
INDUSTRIES
===================================== */

.industry-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.industry-card{
    background:#fff;
    padding:40px 20px;
    text-align:center;
    font-weight:600;
    box-shadow:0 10px 25px rgba(0,0,0,.08);

    clip-path: polygon(15% 0%,100% 0%,85% 100%,0% 100%);
}

/* =====================================
RESPONSIVE
===================================== */

@media(max-width:991px){

    .solution-row,
    .solution-row.reverse{
        flex-direction:column;
        gap:40px;
    }

    .solution-image,
    .solution-content{
        width:100%;
    }

    .industry-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .strength-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:767px){

    .industry-grid,
    .strength-grid{
        grid-template-columns:1fr;
    }

    .solution-number{
        font-size:50px;
    }

}




.application-card{
    background:#fff;
    padding:25px;
    font-weight:600;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.gallery-item{
    position:relative;
    display:block;
    overflow:hidden;
}

.gallery-item img{
    width:100%;
    height:320px;
    object-fit:cover;
    transition:.5s;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

.gallery-overlay{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:15px;
    color:#fff;
    background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.other-product-card{
    display:block;
    padding:25px;
    background:#fff;
    font-weight:600;
    transition:.3s;
    box-shadow:0 8px 20px rgba(0,0,0,0.06);
}

.other-product-card:hover{
    background:#111;
    color:#fff;
}




/* ===== PREMIUM UI ENHANCEMENTS ===== */

/* Enhanced Card Styling */
.application-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  padding: 2.5rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  color: #2c3e50;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  border: 1px solid rgba(246, 110, 38, 0.1);
  position: relative;
  overflow: hidden;
}

.application-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(246, 110, 38, 0.05) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.application-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(246, 110, 38, 0.2);
  border-color: rgba(246, 110, 38, 0.3);
  background: linear-gradient(135deg, #ffffff 0%, #fff5f0 100%);
}

.application-card:hover::before {
  opacity: 1;
}

/* Premium Gallery Styling */
.hinge-gallery {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  display: block;
  height: 280px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  padding: 1.5rem;
  font-weight: 600;
  font-size: 1.1rem;
  transform: translateY(10px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item:hover .gallery-overlay {
  transform: translateY(0);
  opacity: 1;
}

.gallery-item:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Enhanced Strength Grid */
.strength-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.strength-grid div {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  color: #2c3e50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(246, 110, 38, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.strength-grid div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, #f66e26, transparent);
  transform: translateX(-50%);
  transition: width 0.4s ease;
}

.strength-grid div:hover::before {
  width: 100%;
}

.strength-grid div:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(246, 110, 38, 0.15);
  background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%);
}

/* Other Product Cards Premium Styling */
.other-product-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  text-decoration: none;
  color: #2c3e50;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  min-height: 160px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(246, 110, 38, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.other-product-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(246, 110, 38, 0.1), transparent);
  transition: left 0.5s ease;
}

.other-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(246, 110, 38, 0.2);
  background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%);
  border-color: rgba(246, 110, 38, 0.3);
  color: #f66e26;
}

.other-product-card:hover::after {
  left: 100%;
}

/* Section Enhancements */
section h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.5rem;
  position: relative;
 /* display: inline-block;*/
}
section.section-center h2 
{
    display: inline-block
}
section.section-center h2::after 
{
    left:35%
}



section h2::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #f66e26, transparent);
  border-radius: 2px;
}

section > .container > .text-center > p {
  color: #666;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* CTA Button Premium Style */
.pbmit-btn-global {
  background: linear-gradient(135deg, #f66e26 0%, #e55a1a 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(246, 110, 38, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pbmit-btn-global:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(246, 110, 38, 0.4);
}

/* Enhanced Overview Section */
.col-lg-6 h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  color: #2c3e50;
  font-weight: 700;
}

.col-lg-6 p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 1rem;
}

/* Section Background Enhancements */
/*section:nth-child(4) {
  background: linear-gradient(to right, #f9f9f9, #ffffff, #f9f9f9);
}

section:nth-child(6) {
  background: linear-gradient(to right, #f7f7f7, #ffffff, #f7f7f7);
}*/

/* Premium Typography */
h1 {
  font-weight: 700 !important;
  letter-spacing: -0.5px;
}

/* Smooth Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.application-card,
.gallery-item,
.strength-grid div,
.other-product-card {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

.col-md-4:nth-child(1) { animation-delay: 0.1s; }
.col-md-4:nth-child(2) { animation-delay: 0.2s; }
.col-md-4:nth-child(3) { animation-delay: 0.3s; }
.col-md-4:nth-child(4) { animation-delay: 0.4s; }
.col-md-4:nth-child(5) { animation-delay: 0.5s; }
.col-md-4:nth-child(6) { animation-delay: 0.6s; }

.col-lg-4:nth-child(1) { animation-delay: 0.1s; }
.col-lg-4:nth-child(2) { animation-delay: 0.2s; }
.col-lg-4:nth-child(3) { animation-delay: 0.3s; }
.col-lg-4:nth-child(4) { animation-delay: 0.4s; }
.col-lg-4:nth-child(5) { animation-delay: 0.5s; }
.col-lg-4:nth-child(6) { animation-delay: 0.6s; }

.col-md-3:nth-child(1) { animation-delay: 0.1s; }
.col-md-3:nth-child(2) { animation-delay: 0.2s; }
.col-md-3:nth-child(3) { animation-delay: 0.3s; }
.col-md-3:nth-child(4) { animation-delay: 0.4s; }

/* Image Enhancement */
.col-lg-6 img {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease;
}

.col-lg-6:hover img {
  transform: scale(1.02);
}

/* Hero Section Enhancement */
.product-hero h1 {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 3rem !important;
  letter-spacing: -1px;
}

.product-hero p {
  font-size: 1.1rem;
  line-height: 1.8;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  section h2 {
    font-size: 1.75rem;
  }

  .product-hero h1 {
    font-size: 2rem !important;
  }

  .application-card,
  .strength-grid div,
  .other-product-card {
    padding: 1.5rem 1rem;
    min-height: 120px;
  }

  .gallery-item {
    height: 220px;
  }
}





section h2.pbmit-title::after {
    content: '';
    position: relative;
    /* bottom: -12px; */
    /* left: 0; */
    top:-11px;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #f66e26, transparent);
    border-radius: 2px;
    display: inline-block;
}







/* --- High-Priority Video Popup Structural Wrappers --- */
.custom-video-popup-modal .mfp-content {
    overflow: visible !important; /* Prevents container clipping */
}

.video-popup-wrapper {
    position: relative !important;
    max-width: 85%;
    margin: 0 auto;
    padding: 0 15px;
    z-index: 9999999 !important;
}

.video-popup-container {
    width: 100%;
    background: #000000;
    border: 3px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    line-height: 0; /* Fixes baseline alignment rendering spacing gaps */
}

.popup-html5-player {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Pin-Drop Top Right Close Button Identity Layout --- */
button.forced-video-close-btn {
    position: absolute !important;
    top: 5px !important; 
    right: 25px !important; /* Matches wrapper horizontal gutter padding lines */
    width: 35px !important;
    height: 35px !important;
    line-height: 30px !important;
    font-size: 34px !important;
    color: #ffffff !important;
    background: #f66e26 !important; /* Technico Corporate Orange */
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 99999999 !important; /* Forces it completely over the video player controls layer */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Interactive Hover Mechanics */
button.forced-video-close-btn:hover {
    background-color: #182a58 !important; /* Signature Deep Blue Transition */
    transform: scale(1.1) rotate(90deg);
}

/* --- Compact Screen Device Fluid Adaptation --- */
@media (max-width: 767px) {
    button.forced-video-close-btn {
        top: -48px !important;
        right: 15px !important;
        width: 36px !important;
        height: 36px !important;
        line-height: 32px !important;
        font-size: 28px !important;
    }
}













/* Banner container */
.product-banner-video,
.product-banner-video .item,
.product-video {
    width: 100%;
    height: 50vh;
    position: relative;
    overflow: hidden;
}

.product-video {
  position: relative;
  width: 100%;
  height: 50vh;
  overflow: hidden;
}

.product-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

    object-position: center top;
  z-index: 1;
}


/* Video */
.product-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* fills screen without distortion */

    object-position: center top;
}

/* ================================
   MOBILE HEADER / MENU FIX
   On inner pages (header-style-3) the whole nav (including the
   hamburger) lives inside .pbmit-right-box, but the theme's
   responsive.css hides .pbmit-right-box completely below 1200px —
   that's what was making the mobile menu icon disappear. This
   restores it and keeps the header row from overlapping the hero
   content below it.
================================ */
@media (max-width: 1200px) {
    .header-style-3 .pbmit-right-box {
        display: flex !important;
        align-items: center;
    }
}

@media (max-width: 991px) {
    .pbmit-header-content {
        flex-wrap: wrap;
    }

    /* .pbmit-menuarea shrink-wraps to its content by default, so while
       the menu is closed it's only as wide as the hamburger icon. That
       leaves the absolutely-positioned .menu (which sizes itself off
       this ancestor's width) with almost no width to open into. Give
       it the remaining row space instead. */
    .pbmit-menuarea {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }

    .site-navigation {
        width: 100%;
    }

    .site-navigation .navbar1 {
        flex: 1;
        width: 100%;
    }

    .header-style-3 .pbmit-right-box {
        margin-left: auto;
    }

    /* Redundant on mobile — the menu already has its own "Get In Touch"
       item (the .hidden-lg entry), so drop the second button to stop
       it crowding/overlapping the hamburger next to the logo. */
    .pbmit-right-box .pbmit-button-box-second {
        display: none;
    }

    .navbar1 .container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* The open mobile dropdown (.menu.active) has a white background, but
       .menu li a is white text (styled for the dark homepage hero nav) —
       invisible until overridden here. */
    .menu li a {
        color: #000 !important;
    }

    .menu li a:hover {
        color: #f66e26 !important;
    }

    /* .menu li a's generic nav-link padding (25px 11px 0, meant for a
       horizontal desktop bar) was clobbering this button's own balanced
       padding, squashing its text/icon toward the bottom. */
    .menu li.hidden-lg a.pbmit-btn {
        padding: 16px 20px;
        margin: 0 4px;
    }

    .menu-toggle {
        color: #fff;
        margin-left: 15px;
        line-height: 1;
    }

    .header-style-3 .menu-toggle {
        color: #000;
    }

    /* header-style-2 (homepage) is transparent with a white icon, but
       turns into a white sticky bar on scroll — the icon must go dark then. */
    .sticky-header .menu-toggle {
        color: #000;
    }
}