@import "./variables.css";

.gpb-logo{ height: 100px; width: auto !important;}

h1{ font-size: 2.4rem;}

/* .top-header{ background:#fff; padding: 10px 0;}
.top-header h5{ font-size: 20px; color: #000;}
.top-header h6{ font-size: 15px; color: #000;}
header{ position: fixed; width: 100%; left: 0; right: 0; z-index: 99; top: 0; box-shadow: 0px 2px 9px #00000014;
 background:rgba(0, 69, 186, 1);}
  */

  .gpb-logo{ height: 100px; width: auto !important;}

.top-header{ background:#0045ba;}
header{ position: fixed; width: 100%; left: 0; right: 0; z-index: 9999;      top: 0; box-shadow: 0px 2px 9px #00000014;
 background: #fff;}

 header#masthead {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  transition: .3s;
}
header#masthead img{
  transition: .3s; /*here i added transition to give the image a smooth animation*/
}
/* these are the styles when the user scrolls */
header#masthead.resize img{
  height: 50px; /* <=== here i gived the image a smaller size */
}

.resize .gpb-logo{height: 80px;  transition: .3s;}
.resize .iso-logo{ width: 50px !important;}
.resize .top-header h5{ font-size: 18px; color: #000;}
.resize .top-header h6{ font-size: 13px; color: #000;}
.resize .nav__container{padding: 10px 0;}

.resize .nav__container .iso-logo2{ width: 40px !important;}
.resize  .nav__menu li{ padding: 2px 15px;}

#hero{ margin-top: 170px;}
.info-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
}
.info-right ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 50px;
}
.info-right ul li {
    margin-right: 19px;
}

.info-right ul li a {
    color: #fff;
    font-size: 15px;
    font-style: normal; transition: all .4s ease;
    font-weight: 400;
    line-height: 109.9%;
}
.big-font{ font-size: 18px;}
.info-right ul li a img{ width: 20px; margin-right: 5px;}
.iso-logo{ width: 50px !important;}
.iso-logo2{ width: 55px !important;}
.nav__logo{ display: flex; align-items: center;  transition: .3s;}
.gpb-logor{ padding-left: 10px;}
.gpb-logor h5, .gpb-logor h6{color: #000;}
.gpb-logor h5{ font-size: 25px;}
 h1 .gpb-logor{ font-size: 25px; color: #000;}
.gpb-logor h6{color: #000;font-size: 17px;}


.contact-col p{ width: 100%;}

#carouselExampleIndicators {position: relative;overflow: hidden;width: 100%; background: #e8edf2; height: 450px; border-radius: 0 0 5px 5px;}
.bg-video-wrap {position: relative;overflow: hidden;width: 100%; height: 100%;}
#carouselExampleIndicators video {width: 100%;height: 100%;z-index: 1;object-fit: cover; position: absolute; top: 0;  left: 0; transform: scaleX(-1);}
#carouselExampleIndicators .carousel-item img {width: 100%;height: 100%;z-index: 1;object-fit: cover; position: absolute; top: 0;  left: 0;}
.overlay {width: 100%;height: 100%;align-items: center;position: absolute;top: 0;left: 0;display: flex;z-index: 2;}
.slider-content { margin-top: 0; position: absolute;top: 45%; left: 0; z-index: 99; transform: translateY(-50%); width: 36%; }
.hero .container { position: relative; height: 450px; width: 100%; }
.slider-title {
  line-height: 1;
  font-size: 32px;
  color: #000;
 line-height: 42px;
  letter-spacing: 2px;
}
.logo-inn{ width: 300px !important; height: auto !important;     margin-top: 60px; top: -180px !important;}
.logo-inn2{ width: 150px !important; height: auto !important;     margin-top: 60px;  top: -200px !important;}
.slider-title-big {
  font-size: 50px;
  letter-spacing: 1px;
}
#carouselExampleIndicators .carousel-control-prev {
	left: auto;
	right: 75px;
	top: auto;
	bottom: 0;
	position: absolute;
	background: #fff url('../images/left-arrow.svg') no-repeat scroll center;
	width: 75px;
	height: 45px;
	margin-left: 0;
	z-index: 9;
	transition: 0.5s;
	opacity: 1;
	border-radius: 10px 0 0;
}
#carouselExampleIndicators .carousel-control-next {
	left: auto;
	right: 0px;
	top: auto;
	bottom: 0;
	position: absolute;
	background: #fff url('../images/right-arrow.svg') no-repeat scroll center;
	width: 75px;
	height: 45px;
	margin-left: 0;
	z-index: 9;
	transition: 0.5s;
	opacity: 1;
	border-radius: 0 0;
}
#carouselExampleIndicators .carousel-control-prev .carousel-control-prev-icon, #carouselExampleIndicators .carousel-control-next .carousel-control-next-icon {	opacity: 0; }
#carouselExampleIndicators .carousel-indicators { display: none; }
.carousel-item img {
	object-fit: cover;
	/* height: 700px; */
}
.carousel {
  position:relative
}
.carousel.pointer-event {
  -ms-touch-action:pan-y;
  touch-action:pan-y
}
.carousel-inner {
  position:relative;
  width:100%;
  overflow:hidden
}
.carousel-inner::after {
  display:block;
  clear:both;
  content:""
}
.carousel-item {
  position:relative;
  display:none;
  float:left;
  width:100%;
  margin-right:-100%;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transition:-webkit-transform .6s ease-in-out;
  transition:transform .6s ease-in-out;
  transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out
}

.hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

/* .banner{ background:#0043b0url(../images/inside-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;} */
.thankyou{ background:#d6e8fe   url(../images/conatctus-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}
.aboutus{ background:#d6e8fe   url(../images/aboutus-header-new.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}
.career{ background:#d6e8fe   url(../images/career-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}
.conatctus{ background:#d6e8fe   url(../images/conatctus-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}
.sitemap-header{ background:#d6e8fe   url(../images/sitemap-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}

.products-header{ background:#d6e8fe   url(../images/products-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}
.product-header{ background:#d6e8fe   url(../images/product-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}
.techpack-header{ background:#d6e8fe   url(../images/techpack-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}
.jeery-can-header{ background:#d6e8fe   url(../images/jeery-can-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}
.gnx-bulk-bulk-container-sp-header{ background:#d6e8fe   url(../images/gnx-bulk-bulk-container-sp-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}
.gnx-bulk-bulk-container-cp-header{ background:#d6e8fe   url(../images/gnx-bulk-bulk-container-cp-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}

.xl-ring-drums-header{ background:#d6e8fe   url(../images/xl-ring-drums-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}

.open-top-drums-header{ background:#d6e8fe   url(../images/open-top-drums-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}

.gnx-header{ background:#d6e8fe   url(../images/gnx-header.png) center center no-repeat; padding: 120px 0; background-size: cover; margin-top: 170px;}
.button2{ border-radius: 10px;}
.button2:hover{ background-color: #0043b0; color: #fff;}
.modal-header{
  flex-shrink: 0;
  padding: 0;
  border-bottom: 0px solid #dee2e6;
  border-top-left-radius: 0;
  border-top-right-radius: 0}
  .modal-dialog{ max-width: 800px;}




.breadcrumb li a{ color: #000; font-size: 18px;}
.breadcrumb li{ position: relative; padding-right: 20px;}
.breadcrumb li::after{ position:absolute; right:10px; background: #00000070; content: ''; top:0px; width: 1px; height: 100%;}
.breadcrumb li:last-child::after{ display: none;}
.banner h1{ color: #000; margin-bottom: 20px;}

.product-section h2{ font-size: 1.75rem; color: rgba(26, 99, 174, 1); text-transform: uppercase;}
.product-section{background:#deeafb url(../images/bg-pattern.png) top left repeat-x; 

  ;}

/* .product-section{background:url(../images/product-section-bg.png) no-repeat; background-size: cover;}  */

/* .product-section-inn2{position: relative;}

.product-section-inn2::before{position:absolute; right:-15px; background:#94b9e3; content: ''; top:0px; width: 1px; height: 92%; content: '';}
.about-inn-text p a{ color: #fff;} */

.about-inn-text h2.h2-text{font-size: 16px;
  font-weight: bold;}

.product-disc {
  width: 100%;
  color: #fff;
  padding: 20px 30px !important;
  margin: 0px 0px 20px 0px;
  background: #034c80;
  line-height: 23px;}
  .product-disc p{ color: #fff;}

  .product-disc .logo-img {
    margin: 0px 25px 20px 0px;
}
.logo-img {
    max-width: 150px;
    margin: 0px 20px 10px 0px;
    clear: right;
    float: left;
    height: auto;
}
.product-content {
  margin: 0 0 20px 0;
  position: relative;
  float: left;
  width: 100%;
}
.prod-img-disc-box {
  width: 49% !important;
  margin: 0px 0px 20px 0px; text-align: center;
}
.FL {
  float: left !important;
}
.prod-img-disc-box {
  width: 49% !important;
  margin: 0px 0px 20px 0px;
}
.FR {
  float: right !important;
}
.four-img-wrap {
  float: left;
  width: 100%;
}
.four-img-wrap ul li {
  width: 22%; float: left;
  margin: 0 4% 0 0; padding-left: 0px !important;
}
.four-img-wrap ul li:last-child{ margin-right: 0px;}


.img-box-four-img img {
  width: 100%;
}
.disc-box-half {
  width: 48%;
}
.prod-img-disc-box {
  width: 49% !important;
  margin: 0px 0px 20px 0px;
}
.prod-img-disc-box {
  width: 49% !important;
  margin: 0px 0px 20px 0px;
}
.colors-p img{ width: auto; height: auto; display: block; margin: 0 auto;}
.four-img-wrap ul li::after, .product-bifurcation-content ul li:after{display: none; }

.product-name{ top: -40px; width: 100%; text-align: center; padding: 12px 0; color: #000; font-size: 20px; text-transform: uppercase; position: relative; z-index: 1;}
.product-bg{ position: relative;}
.product-bg img{ margin-top: -100px;}
.product-name a{color: #000;}

.part-number {
  float: left;
  text-align: center;
  margin: 0 0 10px 0;
}
.part-number span {
  font-size: 30px;
  font-weight: 600;
  background: #0261a4;
  color: #fff;
  line-height: 1;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  width: 62px;
  height: 62px;
  padding: 16px 0 0 0;}
  .product-bifurcation-content ul li {
    width: 33.33%; float: left;
   
}
.product-content .product-bifurcation-content ul li:first-child{ padding-left: 0px;}
.product-bifurcation-content ul li img{ margin-bottom: 20px; height:197px; width: 90%;}
.product-bifurcation-content ul {
  margin: 0 0 40px 0 !important; display: flex;
  padding: 0 0 40px 0;
  border-bottom: 1px solid #e0e0e0;
}
.part-name {
  margin: 0 0 10px 0;
  /* text-align: center; */
  font-size: 16px; line-height: 22px;
  color: #0261a4;
  font-weight: 600;
}

.product-name::after{position:absolute; left:0px; right: 0px; background:#94b9e3; content: ''; top:0px; width:80%; height: 1px; margin: 0 auto;}

.strong-solid{ font-size: 40px; color: rgba(26, 99, 174, 1); text-transform: uppercase; position: absolute; left: 0; right:0px; top: 0%; z-index: 1; font-weight: 400;}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}


.whatsapp-img { position: fixed; bottom: 40px; z-index: 9999; right: 45px; width: 53px;animation-name: pulse;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;border-radius: 50%; }

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
	}
	80% {
		box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
	}
}


@media (prefers-reduced-motion:reduce) {
    .carousel-item {
      transition:none
    }
  }
  .carousel-item-next,
  .carousel-item-prev,
  .carousel-item.active {
    display:block
  }
  .active.carousel-item-right,
  .carousel-item-next:not(.carousel-item-left) {
    -webkit-transform:translateX(100%);
    transform:translateX(100%)
  }
  .active.carousel-item-left,
  .carousel-item-prev:not(.carousel-item-right) {
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%)
  }
  .carousel-fade .carousel-item {
    opacity:0;
    transition-property:opacity;
    -webkit-transform:none;
    transform:none
  }
  .carousel-fade .carousel-item-next.carousel-item-left,
  .carousel-fade .carousel-item-prev.carousel-item-right,
  .carousel-fade .carousel-item.active {
    z-index:1;
    opacity:1
  }
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    z-index:0;
    opacity:0;
    transition:opacity 0s .6s
  }

  /* Products */
  .Products{ display: flex;     border-top: 1px solid #c2c2c2; align-items: center;
   }
  .Products-left{ width: 20%;}
  .Products-right{ width: 80%; border-left: 1px solid #c2c2c2;}

  .owl-nav span {
    opacity: 1; padding: 5px 15px;
    color: var(--secondary);
    font-size: 30px;
}
/* about */

.about01{ background: url(../images/drop01.png) left center no-repeat; background-size: auto !important; display: flex; justify-content: end;}

.about3{ background: url(../images/drop.png) left center no-repeat; background-size: auto !important; display: flex; justify-content: end;}

.about{ background: url(../images/drop01-new.png) left top no-repeat;  display: flex; justify-content: end; background-size: auto 100% !important;}
.about-text{ width: 50%; background:rgba(246, 246, 246, 1);}
.about-text-inn{ width: 640px; max-width: 640px; padding:40px 0px 40px 50px;}


.about2{ background: url(../images/drop2.png) right center no-repeat; justify-content: flex-start;
  display: flex; }


  .about02{
    background: url(../images/drop02-new.png) left center no-repeat;
    background-size: cover !important;
    display: flex;
    justify-content: end;
	position:relative;
}
.about02:before {
    content: "";
    width: 50%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
	 background: url(../images/drop02-new.png) center no-repeat;
	 background-size: auto 100% !important;
}
  .about3{ background: url(../images/about-product1.png) left center no-repeat; background-size: 60% !important; display: flex; justify-content: end;}

.about4{ background: url(../images/about-product2.png) right center no-repeat; justify-content: flex-start;
      display: flex; }

.about-text2{ width: 50%; background:rgba(246, 246, 246, 1); float: left;}
.about-text-inn2{ width: 640px; max-width: 640px; padding:40px 50px 40px 0px; float: right;}
.about-text-inn2 h2, .about-text-inn h2{font-size: 1.75rem;}
.about-time{ background: url(../images/about-bg-img.png) no-repeat;     background-size: cover;}
.about-time h3{ color: #fff;}
.about-time p, .about-time p a{ color: #fff;}
 /* h2.product-h2{font-size: 1.5rem !important; color: #000;} */
.product-content h2.product-h22{ font-size: 16px; color: #000 !important; font-weight: bold;}

h2.product-h23{font-size: 1.5rem !important; color: #000 !important;}
.about-content h2.product-h23{  color: var(--secondary) !important; margin-bottom: 20px;}

.contactus h2.product-h23{  color: var(--secondary) !important; margin-bottom: 20px;}


.about-text-inn p{ color: #000; font-size: 16px; text-align: justify;}
.about-text-inn h3{ color: rgba(26, 99, 174, 1);padding-bottom: 10px; text-transform: uppercase; border-bottom: 1px solid rgba(0, 0, 0, 0.19);}
.about-text-inn h2{ color: rgba(26, 99, 174, 1);padding-bottom: 10px; text-transform: uppercase; border-bottom: 1px solid rgba(0, 0, 0, 0.19);}
.readmore{ color: #fff; text-align: right; font-size: 18px; transition: all .4s ease;  text-transform: capitalize; background: url(../images/arrow.svg) center right no-repeat; }
.about-inn-products{ display: flex; justify-content: center; align-items: center; padding: 30px 0 0 0;}
.about-inn-products h4{color: rgba(26, 99, 174, 1); margin-bottom: 15px; font-weight: 400;}
.about-inn-products h2{color: rgba(26, 99, 174, 1); margin-bottom: 15px; font-weight: 400; font-size: 1.5rem;}
.about-inn-products span{color: #000;}
.about-inn-products li{ width: 30%; position: relative;}
.about-inn-products li::after{position:absolute; left:0px; background:#d8d8d8; content: '';
  content: '';
  top: 0px; right:0px;
  width: 1px;
  height: 100%;}

  .about-inn-products li:first-child::after{ display: none;}

.headings{ color: rgba(26, 99, 174, 1);padding-bottom: 10px; text-transform: uppercase; }

.readmore img{ width: 30px; }

.readmore{ position: relative;

  z-index: 1; color: #000;
  text-align: center;
  -webkit-background-clip: text;
  background-image: linear-gradient(to right, var(--primary),  var(--primary) 50%, #fff 50%);
  background-size: 200% 100%;
  background-position: -100%;
  transition: all 0.3s ease-in-out;}

  .about-content p a{ position: relative;
    z-index: 1; color: #fff;
    text-align: center;
    -webkit-background-clip: text;
    background-image: linear-gradient(to right, var(--primary),  var(--primary) 50%, #fff 50%);
    background-size: 200% 100%;
    background-position: -100%;
    transition: all 0.3s ease-in-out;}

    footer p a{ position: relative;
      z-index: 1; color: #fff;
      text-align: center;
      -webkit-background-clip: text;
      background-image: linear-gradient(to right, var(--primary),  var(--primary) 50%, #fff 50%);
      background-size: 200% 100%;
      background-position: -100%;
      transition: all 0.3s ease-in-out;}
.about-content p a::before {
  display: block;
  content: "";
  width: 0;
  height: 3px;
  bottom: 5px;
  left: 0;
  bottom: -3px;
  z-index: 0;
  position: absolute;
  background:var(--primary);
  transition: all 0.3s ease-in-out;
}

.readmore:before {
  display: block;
  content: "";
  width: 0;
  height: 3px;
  bottom: 5px;
  left: 0;
  bottom: -3px;
  z-index: 0;
  position: absolute;
  background:#fff;
  transition: all 0.3s ease-in-out;
}
.req-fields{ color: #0047b6;}
footer h4{ margin-bottom: 30px;}
footer p a::before {
  display: block;
  content: "";
  width: 0;
  height: 2px;
  bottom: 5px;
  left: 0;
  bottom: -2px;
  z-index: 0;
  position: absolute;
  background:var(--light);
  transition: all 0.3s ease-in-out;
}

.copyrights p a::before {
  display: block;
  content: "";
  width: 0;
  height: 2px;
  bottom: 5px;
  left: 0;
  bottom: -2px;
  z-index: 0;
  position: absolute;
  background:var(--light);
  transition: all 0.3s ease-in-out;
}
.readmore:hover{
  background-position: 0%; color: #fff;
}
.about-content p a:hover{
  background-position: 0%; color: var(--primary);
}

footer p a:hover {
  background-position: 0%; color: var(--light);
}

.readmore:hover:before, .about-content p a:hover:before, footer p a:hover:before {
  width: 100%;
}

.oneeee img {
  margin-right: 7px;
  width: 20px;
  float: left;
  margin-top: 2px;
}
.oneeee p {
    line-height: 24px;
    float: left;
    width: 90%;
    margin-bottom: 15px;
}

.product-content  .products{ padding:20px 0 0  0px; margin: 0px; list-style: none;}
.product-content  .products li{ display: inline-block; width:20%;}
.product-content  .products li{ text-align: center;}
.product-content  .products li img{ width: auto;}
.product-content  .products li::after{ display: none;}


footer h6, footer h6 a{ font-size: 20px; margin-bottom: 20px; color: var(--primary);}
.products-inn{ display:flex;}
.width-50{ width: 45%;}
.product-inn {  display:flex;  justify-content: space-between;}
.product-inn .width-50{ padding: 30px; background:#eaf7ff ; width: 49%;}
.product-inn .width-50 img{ width: 50%; height: auto;
  object-fit: cover;}
.product-inn .width-50 .product-list li a{ color: #000;}
.product-inn .width-50 li{display: flex;}
.product-inn .width-50 li ul{ padding-left: 32px;}
.whatsapp-icon{ width: 37px !important;}

.main-product{ font-size: 20px; color: #000; margin-bottom: 30px; display: block; font-weight: 500;}

.width-50 li a{ font-size: 18px; color: #000; line-height: 18px; font-weight: 500; margin-bottom: 15px; display:block;}
.width-50 .product-list li a{ font-size: 16px; line-height: 16px; position: relative; padding-left: 20px; color: #5a5a5a;}
.width-50 .product-list li{ margin-bottom: 20px;}
.width-50 .product-list li a::before{content: "";
  width: 2px;
  height: 16px; 
  background: var(--secondary);
  background-size: 18px;
  position: absolute;
  left: 0; color:#5a5a5a;
  top: 0px;}
  footer h5{color: var(--secondary); font-size: 22px; margin-bottom: 10px;}
  footer p { color: var(--secondary);}
.locationss{ display: flex;}
.contact-col1{ width: 40%; ;}

.contact-col2, .contact-col3, .contact-col4{ width: 33%;}


footer .locationss p a::after{ display: none;}
footer .locationss p a{ color: #fff; margin-left: 0px;}

  
  .location p a, .location p { color:#fff; font-size: 16px; margin-bottom: 0px; margin-left: 0px; line-height: 26px;}
  .location p a::after{ display: none;}
.copyrights{ background:rgba(0, 71, 182, 1); padding: 15px 0;}
footer p, footer p a{color:#fff;}
footer p a:hover{ color: var(--light);}
.copyrights p a:hover{ color: var(--light);}
footer p a{ margin-left: 20px; position: relative;}
footer p a::after{position:absolute; left:-8px; background:var(--light); content: ''; top: 1px;
  width: 2px;
  height: 18px;}
.about-img{ height: 500px; object-fit: cover;}
.about-img2{ height:250px; object-fit: cover;}
.gray-bg{background:rgba(40, 102, 249, 1); padding: 25px 0;}
.gray-bg h4{ color:#fff; font-weight: 600; font-size: 22px;}
.gray-bg .location h2{ color:#fff; font-weight: 600; font-size: 22px;}

.blue-bg{ background: var(--secondary);}
/* .vision{ padding: 30px;  background: var(--light); min-height: 468px;} */
.vision h3, .product-content h3, .product-right h2{ color: var(--secondary); 
  /* border-bottom: 1px solid #e1e1e1; */
   padding-bottom: 10px;}


.product-right h2{ color: var(--primary); }
.product-content h3, .product-right h2{ margin-bottom: 20px;}
.product-content h2{ font-size: 1.75rem; margin-bottom: 20px; color: var(--secondary);}




/* .vision img{ width: 80px;} */
.vision-mision{ padding-bottom: 10px;}
.vision-mision-inn{ padding: 40px 0; position: relative;}
.vision-mision-inn::after{position:absolute; left:0px; background:rgba(0, 71, 182, 1); content: '';   
  content: '';
  top: 0px;
  width: 50%;
  height: 100%;}

  .vision-mision-inn::before{position:absolute; right:0px; background:rgba(0, 60, 153, 1); content: '';    
    content: '';
    top: 0px;
    width: 50%;
    height: 100%;}

.vision-mision-inn .vision{    position: relative;padding-right: 30px;
  z-index: 1;} 
 
  .vision-mision-inn .mission{    position: relative; padding-left: 30px;
    z-index: 1;} 
    .vision-mision-inn .vision p,  .vision-mision-inn .mission p, .vision-mision-inn .mission ul li{ color: #fff;}
.our-vision{ position:absolute;top:30px; right: 30px; color: #fff; text-transform: uppercase; background: rgba(0, 45, 115, 1); padding: 20px 20px; font-size: 18px;}

.our-vision2{ position:absolute;top:30px; right: 0px; color: #fff; text-transform: uppercase; background: rgba(0, 45, 115, 1); padding: 20px 20px; font-size: 18px;}



.vision-mision li{ position: relative; font-size: 16px;     margin-bottom: 5px; line-height: 26px;
  padding-left: 20px;}
.product-right ul li::after{position:absolute; left:0px; background:var(--secondary) !important; content: '';     background: #ffffff;
  content: '';
  top: 15px;
  width: 2px;
  height: 16px;
}

.vision-mision li::after{position:absolute; left:0px; background:var(--secondary); content: '';     background: var(--primary);
  content: '';
  top: 4px;
  width: 2px;
  height: 16px;
}


.product-content ul li::after{position:absolute; left:0px; background:var(--primary) !important; content: '';     background: #ffffff;
  content: '';
  top: 5px;
  width: 2px;
  height: 15px;
}


.product-content ul li{ position: relative; font-size: 16px; margin-bottom: 10px; line-height:26px}
.product-right{  padding: 30px 20px; background: #eaf7ff; border-radius: 10px;}
.product-right ul li{ padding:12px 20px; border-bottom: 1px solid #d1dee6;}
.product-right ul li:last-child{ border-bottom: 0px;}
.product-right ul li, .product-content ul li{ padding-left: 20px; position: relative; line-height: 26px;}
.product-right ul li a{ color:#000; font-size: 18px;  }
.product-right ul li a:hover{ color: var(--secondary);}
.product-content h4{ margin-bottom: 20px;}
.product-content ul{ margin-bottom: 30px;}
.product-contentin{ display: flex;}
.product-contentin ul, .product-text{ width:60%; padding-right: 30px;}
.product-img{ width:40%;}
.product-img img{ padding:0 40px 0 0px; }
.table th{ line-height: 22px;}
.table th, .table td{ color: #000000; padding: 10px; font-size: 16px; line-height:26px}
.table__head{ background: var(--secondary); }
.table__head th{color: var(--light) !important;}
.pro-img{ width: auto;}

.about-content h3{ color: var(--secondary); margin-bottom: 20px;}
.about-content p a{ color: var(--secondary);}


.product-content .logos-list{ margin-bottom: 0px;}
.logos-list{ list-style: none; padding: 0px; margin: 0px;;}
.product-content .logos-list li{ display: inline-block; padding: 0px; margin-right: 20px;}
.logos-list li::after{ display: none;}

.contact-col {
  display: flex;
  margin-bottom: 25px;
}
.contact-icon {
  flex: 0 0 50px;
}

footer .contact-col2{ width: 33.33%; margin-bottom: 0px;}
footer .contact-col2 img{ width: 36px;}
footer .contact-text{ width: 85%;}
.contact-text .headingss{font-size: 1.25rem; color: #000;}
.contact-text .headingsss{font-size: 16px;color: #000;}
.headss{color: #0047b6 !important;  margin-bottom: 20px; font-size: 1.5rem;}
.heads{color: #000 !important; font-size: 16px;     margin-bottom: 15px;
  line-height: 26px;}

footer .contact-col2 a::after{ display: none;}

/* footer .contact-icon{flex: 0 0 50px; width: 60px; line-height: 60px; height: 60px; text-align: center; background: rgba(0, 71, 182, 1); border-radius: 100%; margin-right: 10px;} */
footer .contact-col{ justify-content: center; align-items: center; margin-bottom: 0px;}
footer .contact-col p{ margin-bottom: 0px;}
footer .contact-icon{ margin-right: 10px;}
.contact-col p a{ color: #000;}
.contact-icon img{ width: auto;}

footer .contact-icon img{ width: 60px;}

.contactus h2{ color: var(--secondary);}
.contactus h4{ color: var(--secondary); margin-bottom: 20px;} 

.contact-form {
  border: 1px solid #e9e9e9;
  text-align: center;
  padding: 20px;

  border-radius: 9px;
}
.contact-form ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
.contact-form ul {
  width: 100%;
}
.contact-form .txbx, .contact-form ul li {
  position: relative;
}
.contact-form ul li {
  width: 50%;
  max-width: calc(50% - 15px);
  margin: 0;
}

.contact-form h5 {
  text-align: left;
}
.contact-form h5 {
  font-size: 18px; color: #5a5a5a;
  line-height: 24px;
  margin-bottom: 5px;
}

.contact-form .txbx {
  width: 100%;
  line-height: 28px;
  border-width: 1px;
  border-radius: 4px;
  float: none;
  margin: 0px 0px;
  padding-left: 14px;
  font-size: 16px;
}
.contact-form .txbx, .contact-form ul li {
  position: relative;
}

.contact-form select.txbx {
  height: 44px !important;
}
.contact-form .txbx, .contact-form ul li {
  position: relative;
}
.msg-box2{ width: 100% !important; max-width: 100% !important;}
.contact-form ul li select {
  width: 100% !important;
}
input[type="text"], input[type="password"], input[type="email"], textarea, select {
  border: 1px solid #e5e5e5;
  padding: 6px 4px;
  outline: none;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  color: #888;
  margin: 0;
  width: 210px;
  max-width: 100%;
  min-height: 21px;
  display: block;
  margin-bottom: 20px;
  background: #fdfdfd;
}
.four-col {
  flex-wrap: wrap;
}

.formp-row {
  display: flex;
  justify-content: space-between;
}
.four-col label {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.02em;
  margin: 0 0 20px 0;
}
.four-col .formp-col {
  /* width: 48%; */
  margin-right: 0;
  margin-bottom: 0;
}
.four-col label.prod-chk {
  font-size: 16px;
  font-weight: 400;
  line-height: 21.6px;
  letter-spacing: 0.02em;
}
.formp-row.four-col input {
  width: 17px;
  height: 17px;
}
.prod-chk input:checked ~ .checkmark {
  background-color: #086AD8;
  border: 1px solid #086AD8;
}
.checkmark {
  position: absolute;
  top: 4px;
  left: 0;
  height: 17px;
  width: 17px;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.prod-chk input:checked ~ .checkmark:after {
  display: block;
}
.prod-chk .checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.prod-chk input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.prod-chk input:checked ~ .checkmark:after {
  display: block;
}
.prod-chk .checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.prod-chk {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.four-col label.prod-chk {
  font-size: 16px;
  font-weight: 400; text-align: left;
  line-height: 21.6px;
  letter-spacing: 0.02em;
}
.four-col label {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.02em;
  margin: 0 0 20px 0;
}
.sitemap h6{ margin-bottom: 15px;}
.sitemap h6, .sitemap h6 a{ color: var(--secondary); font-size: 20px;}


.mob-display{ display: none;}
.mob-display-topheader{ background:#0047b6;}
.btn-close{     background: #fff url(../images/close.svg) center center no-repeat;
  right: 8px;
  position: absolute;
  top: -30px;
  opacity: 1;
  background-size: 25px;
  padding: 10px !important;
  width: 20px; border-radius: 4px 4px 0px 4px;
  height: 20px;}

  

  .product-content .products li img{ margin-bottom: 10px;}
  .about-section{position: relative;}
  .about-section::after{ width: 50%; height: 100%; content: ""; left: 0px; top:0px;  background: rgba(0, 70, 178, 1); position: absolute;;}
  .about-section::before{ width: 50%; height: 100%; content: ""; right: 0px; top:0px; background: rgba(0, 76, 195, 1); position: absolute; ;}
  .about-section-left{ position: relative; z-index: 2; padding:0 20px;}
  .about-section-left p,   .about-section-left h3,  .about-section-left a{ color: #fff;}




.dropdown-click{ display: none;}
.nav__menu .dropdown:after{ display: none;}

.modal {
    z-index: 9999;
}
 
  @media (prefers-reduced-motion:reduce) {
    .carousel-fade .active.carousel-item-left,
    .carousel-fade .active.carousel-item-right {
      transition:none
    }
  }
  .carousel-control-next,
  .carousel-control-prev {
    position:absolute;
    top:0;
    bottom:0;
    z-index:1;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:center;
    justify-content:center;
    width:15%;
    padding:0;
    color:#fff;
    text-align:center;
    background:0 0;
    border:0;
    opacity:.5;
    transition:opacity .15s ease
  }
  @media (prefers-reduced-motion:reduce) {
    .carousel-control-next,
    .carousel-control-prev {
      transition:none
    }
  }
  .carousel-control-next:focus,
  .carousel-control-next:hover,
  .carousel-control-prev:focus,
  .carousel-control-prev:hover {
    color:#fff;
    text-decoration:none;
    outline:0;
    opacity:.9
  }
  .carousel-control-prev {
    left:0
  }
  .carousel-control-next {
    right:0
  }
  .carousel-control-next-icon,
  .carousel-control-prev-icon {
    display:inline-block;
    width:20px;
    height:20px;
    background:50%/100% 100% no-repeat
  }
  .carousel-control-prev-icon {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")
  }
  .carousel-control-next-icon {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")
  }
  .carousel-indicators {
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    z-index:15;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    padding-left:0;
    margin-right:15%;
    margin-left:15%;
    list-style:none
  }
  .carousel-indicators li {
    box-sizing:content-box;
    -ms-flex:0 1 auto;
    flex:0 1 auto;
    width:30px;
    height:3px;
    margin-right:3px;
    margin-left:3px;
    text-indent:-999px;
    cursor:pointer;
    background-color:#fff;
    background-clip:padding-box;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    opacity:.5;
    transition:opacity .6s ease
  }
  @media (prefers-reduced-motion:reduce) {
    .carousel-indicators li {
      transition:none
    }
  }
  .carousel-indicators .active { opacity:1 }
  .carousel-caption { position:absolute; right:15%; bottom:20px; left:15%; z-index:10; padding-top:20px; padding-bottom:20px; color:#fff; text-align:center }




@media screen and (max-width: 767px) {
  h1 .gpb-logor{ font-size: 20px;}
.whatsapp-img { bottom: 60px; right: 25px; width: 49px; }	
  .product-bifurcation-content ul li img{ height: auto;}
  .product-bifurcation-content ul li{ padding-left: 0px;}
  .product-bifurcation-content ul{ border-bottom: 0px;}
  .product-bifurcation-content ul{ display: block;}
  .prod-img-disc-box, .product-bifurcation-content ul li, .product-bifurcation-content ul li img{ width:100% !important}
  .disc-box-half img{ height: auto;}
  .four-img-wrap ul li{ width: 47%; margin-right: 5%;}
  .four-img-wrap ul li:nth-child(2),  .four-img-wrap ul li:last-child{ margin-right: 0px;}
  .product-inn .width-50{ margin-bottom: 20px;}
  .product-inn .width-50 li ul{ padding: 0px;}
  .about-inn-products li{ border-bottom: 1px solid #cccccc87; padding-bottom: 10px;}
  .about-inn-products li:last-child{ border-bottom: 0px; margin-bottom: 0p; padding-bottom: 0px;}
  .product-bg img{ margin-top: 0px;}
  .product-inn{ display: block;}
  .about-inn-products, .product-inn .width-50 li { display: block;}
  .product-inn .width-50, .product-inn .width-50 img{ width: 100%;}
  .product-inn .width-50 img{ width: 100%; margin-bottom: 20px;}
  .about-inn-products li{ width: 100%; margin-bottom: 15px;}
  .product-section-inn2::before, .about-inn-products li::after{display: none;
  }
  .vision-mision-inn .mission{ padding-left: 0px;;}
  .vision-mision-inn .vision{ padding-right: 0px;}
  .vision-mision-inn::before, .vision-mision-inn::after{ width: 100%;;}
  .gpb-logor h5{ font-size: 18px;}
  .product-section h2{ font-size: 25px; top:8%}
  .product-name::after{ width: 96%;}
  .product-section-inn2{position:inherit;}
  /* section.pb-0{ padding-top: 0px;} */
  .Products-left img{ width: 230px;}
  .iso-logo{ width: 50px !important;}
 .top-header h5{ font-size: 18px; color: #000;}
.top-header h6{ font-size: 13px; color: #000;}
  header{ box-shadow: none;}
  .logo-inn{ width: 200px !important; height: auto !important;     margin-top: 40px; top: -30px !important; left: 15px !important;}
  .logo-inn2{ width: 100px !important; height: auto !important; margin-top: 40px;  top: -30px !important; left: 15px !important;}
  .resize .nav__menu li {
    padding: 10px 0px;
}
  header{ background: none;}
  .nav__container .info-right{ display: none;}
  .product-content .logos-list li:last-child img{ width: 60%;}
  .product-content .products li{ width: 32%; padding-left: 0px;}
  .product-content .products li img{ width: 100%; margin-bottom: 10px;}
  .product-content .products li br{ display: none;}
  .product-content .products li{ font-size: 15px; line-height: 22px;}
  .locationss{ display: block;}
  /* .gray-bg{ padding-bottom: 0px;} */
  .contact-col1, .contact-col2, .contact-col3, .contact-col4{ width: 100%; margin-bottom: 15px;}
  .product-content .logos-list li{ width: 42%;}


  
  /* .about-content{ margin-bottom: 30px;} */
.about-img2{ margin-bottom: 30px;}

#carouselExampleIndicators {height: 400px;}
#carouselExampleIndicators .carousel-item img, #carouselExampleIndicators video {object-position: top center; height: 350px;}
.products-inn{ margin: 30px 0 0 0;}
.about, .Products, .product-contentin, .products-inn, .formp-row, .about2{ display: block;}
.about02:before {display:none;}
.about-text, .about-text-inn, .about-text2, .about-text-inn2 .Products-left, .Products-right, .product-contentin ul, .product-text, .product-img, .width-50, .contact-form ul li, .four-col .formp-col{ width: 100%; max-width: 100%;}
.product-img{ margin-bottom: 30px;}
.product-img img{ padding: 0px;}
.about-text-inn{ padding:50px 20px;}

.mob-display{ display: block;}
.mob-off{display: none;}
/* .info-right{ justify-content: center;} */
.gpb-logo { height: 70px;}
.nav__menu li{ padding: 10px 5px; border-bottom: 1px solid #ffffff42;}
.nav__menu li:last-child{ border-bottom: 0px;}
/* .pb-00{ padding-left: 0px; padding-right: 0px;} */
.nav__mobile{ padding-left: 15px; padding-right: 15px;}
.nav__menu{ background: var(--secondary); padding:0 20px 15px 20px;}
.nav__menu li a, .nav__menu li a:hover{ color: #fff;}
.nav__menu li a.button{ background: #006cef; color: var(--light); width: 100%;;}
.nav__menu .dropdown .dropdown:after, .nav__menu .dropdown:after, .nav__menu .dropdown li a{color: #fff; }
.nav__menu .second-level li a::after{position:absolute; left:0px; background: #fff; content: ''; top:10px; width: 1px; height: 15px;}
.nav__menu .second-level2 li a::after{position:absolute; left:0px; background: #fff; content: ''; top:10px; width: 1px; height: 15px;}
.nav__container{padding: 0px 0px;  position: relative;
  /* top: -50px; */
}
.resize .nav__container{     padding-right: var(--bs-gutter-x, .75rem);
  padding-left: var(--bs-gutter-x, .75rem); padding-top: 0px; padding-bottom: 0px;}

.resize  .container.pb-00{ padding: 0px; background: #fff;}
.resize .gpb-logo{ height: 70px !important;}
/* .resize .nav__container{ padding: 0px 15px;} */
.nav__mobile{ padding: 10px 0px; background: #fff;}
.nav__menu .dropdown .dropdown:after{ right: 0px; position:absolute;}
.nav__menu .dropdown ul.show{background:#0069f4;         padding: 10px 10px;
  margin-top: 10px;}
  .owl-carousel.owl-drag .owl-item, .Products, .Products-right{border: 0px !important; }
  .mob-mb-50{ padding-bottom: 50px;}
  #hero{margin-top: 140px;}
  #carouselExampleIndicators .carousel-item img, #carouselExampleIndicators video{ height: 200px; 
    object-position: 70% 0%;
  }
  .dropdown-click{ position: absolute; right: 0px; top:20px; z-index: 99; background: red; width: 20px; font-size: 0px; display: block;}

  .dropdown-click::after{content: "\f107"; 
    font-family: Font Awesome\ 5 Free; right: 0px; top:0px;
    font-weight: 900; position: absolute; color: #fff;
    font-size: .875rem;
    padding-left: 5px;}
  .nav__menu li a{ font-size: 18px; width: 80%;}
  .slider-content{ width: 100%; left: 0; top: 68%; background: #e8edf2;}
  .slider-title{ padding: 70px 20px 70px 20px;   font-size: 16px;
    line-height: 26px;}
    .nav__menu .second-level li,  .nav__menu .second-level2 li{ padding: 5px 0;}
    .nav__menu .dropdown:after{right:0px; position: absolute; z-index: 9;         top: 12px;
      color: #fff; font-size: 0px;}
  .hero .animated{animation: none;}
  #carouselExampleIndicators .carousel-control-next, #carouselExampleIndicators .carousel-control-prev{ bottom:0px}
  /* .Products-left{ position: relative;}
  .Products-left::after{position:absolute; right:0px; left: 0; background: var(--secondary); content: ''; bottom:0px; width: 150px; height: 2px;} */
  .about-img{ height: 300px; margin-bottom: 30px;}
  .col-lg-3.text-center{ text-align: left !important; margin-bottom: 30px;}
  .banner{ margin-top: 140px; 
    padding-top: 140px;
    background-position: -300px 0px;
    background-size: 188%;
    height: auto;
    background-repeat: no-repeat;
    padding-bottom: 0px;
    text-align: center;}
    .aboutus, .career, .conatctus, .sitemap-header, .techpack-header, .gnx-header{  padding-top: 140px;}


  .breadcrumb{    text-align: center;
      padding-top: 0px; justify-content: center;}
  .mob-mb-30{ margin-bottom: 30px;}
  .product-right{display: none;}

  .table-responsive{ margin-bottom: 30px;}
  .banner h1{ font-size: 25px;}
  .table th, .table td{ line-height: 23px;}
  .pro-img{ width: 100%;}
  .vision{ min-height: auto;}
  .info-right ul li{ position: relative;}
  .info-right ul li::before{  display: block;
    content: "";
    width: 1px;
    height: 25px;
    top: -2px;
    bottom: 0px;
    left: -12px;
    z-index: 0;
    position: absolute;
    background:var(--light);
    transition: all 0.3s ease-in-out;}
    .info-right ul li:first-child:before{ display: none;}

 }