html, body {
  scroll-behavior: smooth;
}

.g-overview{display: grid;grid-template-columns: 30% 40% auto;gap:20px;justify-content: space-between;}
.o-para{color: #031652;font-weight: 600;font-size: 34px;line-height: 40px;width: 84%;}

.w-80 {width: 85%;}
/* .g-prod {display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;}.bg-none{background-color: none;} */
.bg-grey{background-color: #edece8;padding-top: 50px;}.product-title{padding: 40px 30px 10px 0px;}
.vlink{position: relative;}
.button.is-play {
    position: absolute;
}
.arrow-icon{text-align: end;}
.button-icon {
    border-radius: 8px;
    width: 75px;
    height: 50px;
    display: flex;
    background: #fff;
    align-items: center;
    justify-content: center;
    background: #FF0000;
    transition: all 0.5s ease-out;
}

.video-section {
    position: relative;
    width: 100%;
    height: 680px;
    overflow: hidden;
  }

  .video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .overlay {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .product-overlay1{
       position: relative;
    width: 100%;
    height: 100%;

  }
  .product-overlay1::after{
        position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
    background-color: rgba(0, 0, 0, .2);
 

  }
  .stretched-link::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 4;
        content: "";
        background-color: rgba(0, 0, 0, 0);
    }

  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 4px solid white;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9;
  }

  .triangle {
    width: 0;
    height: 0;
    border-left: 30px solid #d62432;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    position: relative;
    right: -5px;
  }
  .video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    box-sizing: border-box;object-position: top;
}
.video-title {
    margin-top: 16px;
    font-size: 1.5rem;
    font-weight: bold;
  }

  .overlay:hover .triangle{
    transform: scale(1.1);

   }

  .sub-prod{background: #fff;padding: 20px;height:500px;}

.products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
}
  .product-card {
   text-align: center;
   background-color: #fff;
   padding: 70px 30px 30px 30px;
   box-shadow :0.4s ease;
   transition: .3s linear;;
   -webkit-transition: transform 0.3s ease, box-shadow 0.3s ease;
   -moz-transition: transform 0.3s ease, box-shadow 0.3s ease;
   -ms-transition: transform 0.3s ease, box-shadow 0.3s ease;
   -o-transition: transform 0.3s ease, box-shadow 0.3s ease;
}

  .product-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 20px;
  }

  .product-card .prod-h3 {
    font-size: 24px;
    font-weight: 400;
    color: #1f2e56;
    letter-spacing: 0px;
    text-align: left;
    line-height: 30px;
}
  .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
  .arrow-img{
    position: absolute;
    bottom: 15px;
    right: 30px;
  }



  .ecatalogue-wrapper {display: grid;grid-template-columns: 30% 66%;justify-content: space-between;}

  /* .left-section {

    padding-right: 30px;
  } */

  .left-section h1 {
    font-size: 40px;
    line-height: 1.2;
  }
  .catalogue-card .ch2 span {
    font-weight: 500;
}
.mb40{margin-bottom: 40px;}


  .left-section p {

        color: #57607f;
        width: 80%;
        font-weight: 400;
        font-size: 18px;
        line-height: 24px;
    }


  .right-section {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}
.mb50{margin-bottom: 50px;}

.ch2-r {
    font-size: 26px;
    line-height: 34px;
}


  .catalogue-card {
    background: #e6e6e6;
    padding: 30px 30px 100px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background 0.3s;
    cursor: pointer;
  }

  .catalogue-card:hover {
    background: #e0f0ff;
  }

  .text p {
    margin: 0;
    font-weight: bold;
    color: #00468b;
  }

  .highlight {
    color: #a6a647;
  }

  .arrow {
    font-size: 40px;
    color: #00468b;
    align-self: flex-end;
  }
  .down-block{display: none;}

  .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 10px; /* bring it into view */
  left: 0;
  width: 100%;
  z-index: 9999; /* enough, no need for excessive 9s */
  position: absolute;
}




/* Add "Corporate Video" text above the play icon */
.play-button::after {
  content: 'Corporate Video';
  position: absolute;
  top: -54px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
.catalogue-card{position: relative;}
/* .catalogue-text{} */



/* .right-section .swiper {padding-bottom:60px;} */
.g-overview .event-ch2 {margin-bottom: 0px;}.over-para p{font-size: 18px;line-height: 26px;}
.card img:hover{background-color:#e0f0ff;}


.ecatalogue-wrapper {

  align-items: flex-start;
  gap: 40px; /* space between left and right */
}

.left-section {
  position: sticky;
  top: 100px; /* distance from top when scrolling */
  flex: 0 0 35%; /* fixed width if needed */
  z-index: 1;
  background: #fff; /* optional, to avoid overlap */
}


/* banner css */
.pos{position:relative;}
.banner-container {
  display: flex;

  color: #fff;
  position: relative;background-image: url(../images/subbanner.jpg);
}

.banner-left {
  background: #03509e;
  color: #fff;
  padding: 40px;
  width: 550px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%);
  position: absolute;
  height: 280px;
  bottom: -7%;
  right: 66%;z-index: +1111;
}

.banner-left .bnr-h1 {
  color: #fff;
  margin-bottom: 30px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 300;
}

.banner-left .bnr-h2 {
  font-size: 30px;
  line-height: 34px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 70px;
}

.breadcrumb {
  margin-top: 20px;
  font-size: 0.9rem;
  color: #fff;
}

.breadcrumb a {
  color: #fff;
  text-decoration: none;
  margin-right: 5px;font-weight: 300;
}

.banner-right {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 700px;
}

.palbit-logo {
  position: absolute;
  top: 20px;
  right: 40px;
  width: 100px;
}



.banner-tabs {
  background: #f5f5f5;
  }

.banner-tabs button {
  padding: 12px 24px;
  border: none;
  background: transparent;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.1s ease;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
}

.banner-tabs button:hover,
.banner-tabs button.active {

  border-bottom: 4px solid #fdb913;

}

.bnr-div{display:grid;grid-template-columns: 30% 70%;}

.banner-tabs a {
  display: inline-block;
  padding: 10px 20px;
  margin: 4px;
  border: none;


  font-size: 16px;

  cursor: pointer;
  transition: background-color 0.3s ease;
}

.banner-tabs a:hover {
  background-color: #d9d9d9;
  border-bottom: 4px solid #f4c432;
}

.banner-tabs a.active {
  background-color: #ffba00;
  color: #000;
}
.qlhead-div {
  display: none!important;
}
.ascroll {
  display: flex
;
  gap: 0px 30px;
  flex-wrap: wrap;
}

.gbg.sticky-scroll {z-index: 999;}
.sticky-scroll {
  position: sticky;
  top: 89px;
  z-index: 99;
}



.mob-tabs{display: none;}

/* ul css mob */
.dropdown-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  width: 200px;
}

.dropdown-nav li {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  background: white;
}

.dropdown-nav li:hover {
  background-color: #f0f0f0;
}
.sticky {z-index: 999999;}
/* ul css mob */
.tool-para {font-size: 22px !important;
    line-height: 28px !important;}

    .prod-bnr{background-image: url(../images/subbanner.jpg);}

/* new scroll css starts */
a[role="button"], a[role="button"]::after { transition: all 0.3s ease;}
.qlhead {display: none;}
.ascroll li a{color:#000;font-weight:400;font-size: 16px;
  line-height: 24px;}
.sticklist {display: flex;gap: 20px;}
.sticky-div{position: sticky;top: 110px;z-index: 99;
  padding: 0px;
  max-height: 60px;}
.stickflex{padding: 0 0px 0px;}


/* .banner-c-div-sban {z-index: 99999;} */
.ascroll li:hover{ border-bottom:4px solid #f4c432; background-color: #fff !important; ; transition:.2s linear;}
.ascroll li.active{ border-bottom:4px solid #f4c432; background-color: #fff !important; ; transition:.2s linear;}



.sticklist {
  position: relative;
  padding-top: 0;
  margin-top: 0px;
  grid-template-columns: 100%;
  display: none;
  width: 60% !important;
  gap: 15px;
  padding-left: 0;
  margin-bottom: 0;
}
.sticklist.true {display: flex;}.qlhead{display:none;}
.sticklist {

  padding-right: 30px;
  display: flex;
  justify-content: flex-end;
width: 100% !important;
  gap: 20px;
  padding-left: 0;
  margin-bottom: 0;
}


.sticklist li {
  border-bottom: 4px solid transparent;

  font-size: 20px;
}
.sticklist li a{display: block;width: 100%; padding: 10px 15px;}
.sticky-div .qlheadtrue{display: none!important;} .qlhead{display:none!important;}.blue-hide{z-index: 2222;}
/* new scroll css ends */

.catalogue-text p{
  font-size: 26px;
  line-height: 32px;
}
.subbanner .product-breadcrumb{
  gap: 5px !important;
  margin-top: 30px;
}
.subbanner .product-breadcrumb li a{
  color: #fff;
}
.subbanner .product-breadcrumb li , .subbanner .product-breadcrumb li .b-active{
  color: #f7f7f7d9;
}
.banner-breadcrumb{
  padding-bottom: 30px;
  z-index: 100;
}
.hon120{
  padding: 60px 0px;
}.catalogue-card svg {width: 30px;}

.product-subbanner p {
  color: #fff;
  font-size: 30px;
  line-height: 36px;
  margin-bottom: 20px;
  font-weight: 500;
}
.product-subbanner .wh2-sban {
  color: rgb(255 255 255 / 80%);
  font-size: 28px;
  line-height: 34px;
  font-weight: 400;
  text-transform: uppercase;
}

.catalogue-card{
  position: relative;
  height: 250px;
}
.tab-buttons{
width: 100%;
display: flex;
justify-content: space-around;
margin-bottom: 35px;
border-bottom: 2px solid #dcdcdc;
}
.tab-button {
  padding: 10px 15px;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 26px;
  color: var(--aclr);
  position: relative;

  cursor: pointer;
}

.tab-button::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 4px;
  left: 50%;
  bottom: -1px;
  background-color: #f4c432;
  transform: translateX(-50%);
  transform-origin: center;
  transition: width 0.3s ease;

}
.tab-button:hover::after {
  width: 100%;
}
.tab-button.active::after {
  width: 100%;
}
.read-more-wrp{display: none;position: absolute;z-index: 24;}
.card-wrp{ transition: 'height 0.3s ease'}

.pagination-controls button{
  padding: 8px;
}
.pagination-controls button{padding: 8px;}
.catalogue-category-buttons{display: flex;gap:20px;}
.catalogue-category-buttons .download-button{
      padding: 8px 20px;
    border: none;
    cursor: pointer;
    font-size: 20px;
    border-radius: 0px;
    line-height: 28px;
  color: var(--lblue);

}
.catalogue-category-buttons .download-button:hover ,.catalogue-category-buttons .download-button.active{background: var(--lblue) ; color: #f5f5f5;;font-family:"Golos Text",sans-serif;}
.pagination-controls{display: flex;justify-content: center;margin: auto;}
.pagination-controls button{border:none;background: transparent;cursor: pointer;border-radius: 50%;width:30px;height: 30px;display: flex;justify-content: center;}
.pagination-controls button:hover{background-color: #f6f6f6;color:var(--lblue)}
.pagination-controls .active{border:none;background: transparent;cursor: pointer;border-radius: 50%;background-color: #f6f6f6;width:30px;height: 30px;display: flex;justify-content: center;color:var(--lblue)}
.pagination-controls .prev-next{border:none;background: transparent;cursor: pointer;border-radius: 50%;background-color: transparent;width:auto;height: auto;display: flex;justify-content: center;margin: 0px 8px;}
.pagination-controls .prev-next:hover{color:var(--lblue);background-color: transparent;}


.product-subbanner{
  position: relative;
}
.product-logo{
      width: 200px;
    position: absolute;
    top: 0px;
    right: 7.5%;
}

.lmt-subbanner{  background-image:
     linear-gradient(to bottom, rgba(255, 255, 255, 0.1)50%, rgba(0, 0, 0, 0.8)100%),
    url(../images/lmt-banner.jpg);}
.nmc-subbanner{ background-image: url(../images/nmc-banner.jpg);}
.palbit-subbanner{ background-image: url(../images/palbit-banner.jpg);}
.finetech-subbanner{ background-image: linear-gradient(to bottom, rgba(255, 255, 255, .1) 50%, rgba(0, 0, 0, 0.8)100%), url(../images/finetech-banner.jpg);}
.bilz-subbanner{ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1)50%, rgba(0, 0, 0, 0.8)100%), url(../images/bilz-banner.jpg);}
.quaker-subbanner{ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1)50%, rgba(0, 0, 0, 0.8)100%), url(../images/quaker-banner.jpg);}
.blum-subbanner{ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1)50%, rgba(0, 0, 0, 0.8)100%), url(../images/blum-banner.jpg);}
.amt-subbanner{ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1)50%, rgba(0, 0, 0, 0.8)100%), url(../images/sub-amt.webp);}
/* responsive */


@media(max-width:1880px){
  .bnr-div {display: grid;grid-template-columns: 35% 60%;background: #f5f5f5;}.banner-left {
    right: 61%;
    z-index: 99999;
}

}
@media (max-width:1600px) {
  .sticklist {
  display: flex;

  gap: 0 30px !important;
  }
  .stickflex .sticklist{
    justify-content: space-between;
  }
}
.sticky-div{
  max-height: max-content;
}

@media(max-width:1500px){.products-grid {gap: 30px; grid-template-columns: repeat(4,1fr);}.product-card .prod-h3 {font-size: 26px;line-height: 32px;}}
@media (max-width:1450px) {
  .sticky-div{padding: 6px 10px 6px 550px;}
}
@media(max-width:1440px){
  .banner-left {width: 500px;}
}


  @media(max-width:1440px){
   .products-grid{gap: 30px;}.product-card{padding: 50px 20px 20px 20px;}.product-title{padding: 30px 30px 30px 0px;}
    .left-section {display: flex;justify-content: space-between;align-items: flex-start;}
    .ecatalogue-wrapper {display: grid; grid-template-columns: 100%; gap: 20px;} .product-card .prod-h3 {font-size: 26px;line-height:30px;}
    .left-section {position: static;}

    .bnr-div {
      display: grid; grid-template-columns: 35% 60%;}



  }

  @media (max-width: 1370px) {
    .sticklist {display:flex;flex-wrap: wrap; gap:20px}

    .stickflex {
      padding: 0;
    }
  }

  @media (max-width: 1300px) {
    .dropdown-nav {
      display: none;
    }
    .sticklist.true {display: grid;}

    .sticklist li {

      font-size: 18px;
      line-height: 24px;
  }
  }

  @media(max-width:1299px){
    .products-grid{gap: 20px;}.product-card{padding: 40px 20px 20px 20px;}.product-title{padding: 30px 0px;}
    .product-card .prod-h3 {font-size: 26px;line-height:30px;}
    .qhead-div{display:none;}.mob-tabs{display: block}

    /* .nav-container{display: block;} */

    .dropdown-nav {display: block;}
    .dropdown-nav{padding:20px;}

      .bnr-tabs{display: none;}

  }



  @media(max-width:1200px){
    .products-grid { grid-template-columns: repeat(3, 1fr);gap: 25px;}
    .g-overview {grid-template-columns: 100%;}

    .banner-left {right: 52%;bottom: -9%;z-index: 99999;}
    .bnr-div {display: grid;grid-template-columns: 46% 40%; }
    .qlhead {display: block !important;}
    .sticky-div{
      top:80px;
    }
    .stickflex  .sticklist{flex-direction: column;}
    .sticklist.on{        height: auto;
      transition: max-height 0.5s linear !important;
      max-height: 500px;display: block;  padding: 0;
      margin-top: 15px;}
.sticklist.off{max-height: 0;
  overflow: hidden;
  display: block;  padding: 0;
}    .sticky-div {
  padding: 6px 70px 6px 550px;
}
.stickflex {
  padding: 6px 0px;
}


.qlhead {position: relative;}
.qlhead::after {
  content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 40 40"%3E%3Cg transform="rotate(-90 20 20)"%3E%3Cpath fill="white" d="M24.96 32.601L12.371 19.997l.088-.088l12.507-12.52a.661.661 0 0 0-.01-.921a.645.645 0 0 0-.458-.182a.653.653 0 0 0-.465.186l-13.004 13.02a.63.63 0 0 0-.176.49a.656.656 0 0 0 .18.523l13.014 13.031c.244.23.659.233.921-.02a.658.658 0 0 0-.008-.915z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  width: 25px;
  position: absolute;
  right: 0;
  filter: invert(1);
}.sticklist {gap: 0;margin-top:0;}
/* .sticklist li {padding: 8px 15px;} */

.product-logo{
      width: 150px;
}

  }
 @media(max-width:1100px){
  .right-section { grid-template-columns: repeat(2, 1fr);}
  .card-wrp {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;overflow: hidden;position: relative;}
  .read-more-wrp {
        display: flex;
        position: absolute;
        bottom: 0px;
        justify-content: end;
        width: 100%;
        padding: 10px 0px;
        background-color: #fff;
        z-index: 24;
    }
    .read-more-wrp button {
        background: none;
        border: none;
        font-size: 18px;
        font-weight: 500;
        border-bottom: 1px solid var(--aclr);
    }
 }
  @media(max-width:1000px){
    .down-block{display: block;}.down-none{display: none;}
    .products-grid { grid-template-columns: repeat(3, 1fr);gap: 20px;}
    .right-section{display:block;}.video-section {height:400px;}
    .o-para {width:100%}.w-80 {width: 100%;}
    .card-wrp{display: grid;grid-template-columns: repeat(2,1fr);gap:20px;}
    .left-section {align-items: flex-start;flex-direction: column;}.left-br br{display:none}
    /* scroll section starts */
.scroll-tabs-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.tab-buttons {
  display: flex;
  gap: 10px;
  overflow: auto;
  flex: 1;
  padding: 0px 10px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin-bottom: 0px;
}

.tab-buttons::-webkit-scrollbar {
  display: none;
}
.scroll-arrow {
  background: none;
  border: none;
  font-size: 18px;
  padding: 8px;
  cursor: pointer;
  color: #03509e;
}
.tab-button {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.3s ease;
}
/* scroll section ends */


  }

  @media(max-width:999px){.arrow-icon {position: absolute;bottom: 40px;right: 30px;} }

  @media (max-width: 992px) {
    .play-button::after {font-size: 30px;line-height: 34px;}.mb50{margin-bottom: 30px;}
    .sticky-div {
    padding:6px 0px;
  }
  .sticky-div nav{
    width: 85%;
    margin: auto;
  }
  .sticklist li {
    font-size: 16px;
    line-height: 22px;
}.product-card .prod-h3 {
  font-size: 20px;
  line-height: 26px;
}


  }



  @media (max-width: 768px) {
    .product-card .prod-h3 {font-size: 20px;line-height: 24px;}.products-grid {gap:25px;}
    .left-section {align-items: flex-start;flex-direction: column;}.video-section {height:300px;}
    .products-grid {grid-template-columns: repeat(2, 1fr);}.mb50 {margin-bottom: 30px;}.catalogue-card svg {width: 30px;}
  }

  @media (max-width: 600px) {
    .g-overview {
        grid-template-columns: 100%;
    }

    .card-wrp{display: grid;grid-template-columns: repeat(1,1fr);gap:20px;overflow: hidden;position: relative;}
    .read-more-wrp{display: flex;position: absolute;bottom:0px;justify-content: end;width: 100%;padding:10px 0px; background-color: #fff;}
    .read-more-wrp  button{background: none;border:none;font-size: 18px;font-weight:500;border-bottom:1px solid var(--aclr)}
    .w-80 {
        width: 100%;}.o-para {width:100%}.product-card {padding:20px;}
        .product-title {
            padding:6px;
        }

}
@media (max-width: 600px) {
    .products-grid { grid-template-columns: repeat(2, 1fr);}.video-section {height: 300px;}.o-para { font-size: 24px;line-height: 34px;}

    .sticklist{
      flex-direction: column;

    }
    .sticky-div {
      top: 90px;
  }
}
@media (max-width:580px) {
  .Gsticky-div {
    top: 90px;
}
.catalogue-card{
  padding: 30px 20px 100px;
}
.arrow-icon {
  right: 20px;
  bottom: 30px;
}
    .catalogue-card svg {
        width: 25px;

    }
}

@media(max-width:480px){
  .triangle {transform: scale(0.8);border-left: 23px solid #d62432;
    border-top: 13px solid transparent;
    border-bottom: 15px solid transparent;}.play-button {width: 60px;height: 60px;}
  .products-grid {grid-template-columns: repeat(2, 1fr);
        gap: 15px;}.mb50 {margin-bottom: 20px;}.mb-20{margin-top:15px}
  .product-subbanner p {
   display: none;
}
.scrolltop {height: 40px;width: 40px;}
.product-card img { margin-bottom: 10px;}
    .product-card {
        padding: 10px;
    }
        .video-section {
        height: 250px;
    }
        .product-card .prod-h3 {
        font-size: 18px;
        line-height: 26px;
    }
.product-logo{
      width: 100px;
     right: 5%;
}.catalogue-card {  height: 230px;}
    .card-wrp {
        display: grid
;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;}

}


