/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  --c: white;  
  --d: transparent;  
  --y: none;  
  --l: hidden;
  --p: 0%;
}

/* width */
::-webkit-scrollbar {
  width: 13px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #042a7b; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #021234; 
}

/*--------------------------------------------------------------
# FONTS
--------------------------------------------------------------*/
@font-face {
    font-family: 'BankGothic Md BT';
    src: url('../gotham-font/BankGothicBT-Medium.eot');
    src: url('../gotham-font/BankGothicBT-Medium.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/BankGothicBT-Medium.woff2') format('woff2'),
        url('../gotham-font/BankGothicBT-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-Bold.eot');
    src: url('../gotham-font/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-Bold.woff2') format('woff2'),
        url('../gotham-font/Gotham-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-LightItalic.eot');
    src: url('../gotham-font/Gotham-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-LightItalic.woff2') format('woff2'),
        url('../gotham-font/Gotham-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-Light.eot');
    src: url('../gotham-font/Gotham-Light.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-Light.woff2') format('woff2'),
        url('../gotham-font/Gotham-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-BoldItalic.eot');
    src: url('../gotham-font/Gotham-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-BoldItalic.woff2') format('woff2'),
        url('../gotham-font/Gotham-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-BookItalic.eot');
    src: url('../gotham-font/Gotham-BookItalic.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-BookItalic.woff2') format('woff2'),
        url('../gotham-font/Gotham-BookItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-Book.eot');
    src: url('../gotham-font/Gotham-Book.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-Book.woff2') format('woff2'),
        url('../gotham-font/Gotham-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-Medium.eot');
    src: url('../gotham-font/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-Medium.woff2') format('woff2'),
        url('../gotham-font/Gotham-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-Medium.eot');
    src: url('../gotham-font/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-Medium.woff2') format('woff2'),
        url('../gotham-font/Gotham-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-MediumItalic.eot');
    src: url('../gotham-font/Gotham-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-MediumItalic.woff2') format('woff2'),
        url('../gotham-font/Gotham-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-ThinItalic.eot');
    src: url('../gotham-font/Gotham-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-ThinItalic.woff2') format('woff2'),
        url('../gotham-font/Gotham-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-BookItalic.eot');
    src: url('../gotham-font/Gotham-BookItalic.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-BookItalic.woff2') format('woff2'),
        url('../gotham-font/Gotham-BookItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-XLight.eot');
    src: url('../gotham-font/Gotham-XLight.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-XLight.woff2') format('woff2'),
        url('../gotham-font/Gotham-XLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-Bold.eot');
    src: url('../gotham-font/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-Bold.woff2') format('woff2'),
        url('../gotham-font/Gotham-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-Black.eot');
    src: url('../gotham-font/Gotham-Black.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-Black.woff2') format('woff2'),
        url('../gotham-font/Gotham-Black.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-Light.eot');
    src: url('../gotham-font/Gotham-Light.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-Light.woff2') format('woff2'),
        url('../gotham-font/Gotham-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-XLightItalic.eot');
    src: url('../gotham-font/Gotham-XLightItalic.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-XLightItalic.woff2') format('woff2'),
        url('../gotham-font/Gotham-XLightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-UltraItalic.eot');
    src: url('../gotham-font/Gotham-UltraItalic.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-UltraItalic.woff2') format('woff2'),
        url('../gotham-font/Gotham-UltraItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../gotham-font/Gotham-Thin.eot');
    src: url('../gotham-font/Gotham-Thin.eot?#iefix') format('embedded-opentype'),
        url('../gotham-font/Gotham-Thin.woff2') format('woff2'),
        url('../gotham-font/Gotham-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}



body, html {
	font-family: 'Gotham';
    font-weight: 400;
    font-style: normal;
  background: #021234;
  color: #444444;
  scroll-behavior: smooth;
                  -webkit-font-smoothing: antialiased;
        overflow: -moz-scrollbars-none;
        -ms-overflow-style: none;
}

a {
  color: #fff;
}

a:hover {
  color: #fff;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Gotham';
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  display: none;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
}

.back-to-top i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: rgba(255, 0, 0, 0.6);
  color: #fff;
  transition: all 0.4s;
}

.back-to-top i:hover {
  background: rgba(255, 0, 0, 1);
  color: #fff;
}


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid red;
  border-top-color: #fff;
  border-bottom-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.container{
 min-width:100%;
 padding:0;
 margin:0;
 }
 
 @media (min-width:576px){
	 .container{max-width:540px}
	 }
 @media (min-width:768px){
	 .container{max-width:720px}
	 }
 @media (min-width:992px){
	 .container{max-width:960px}
	 }
 @media (min-width:1200px){
	 .container{max-width:1250px}
	}

#header {
  transition: all 0.5s;
  z-index: 997;
  transition: all 0.5s;
  top: 20px;
}

#header .header-container {
  background: transparent;
  
}

/*#header .header-container:hover {
  background: #fff;
  box-shadow: 0px 0px 10px 2px #0d0d0d;
  color:black;
  --c:black;
  --d:black;
}*/

#header.header-scrolled {
  
  
  
}

#header .logo {
  overflow: hidden;
  padding: 0px 30px 0px 0px;
  background: transparent;
}

#header .cb{
    right:10px;
}

#header .logo h1 a{
 font-size: 12px;
  padding: 0;
  line-height: 1;
  letter-spacing: 1px;
	
    font-weight: 500;
    font-style: normal;
  margin-right: 130px;
}

/*
#header .yip{
  display:none;
  margin-left:-10%;  
  font-size: 30px;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
	
}

*/
#header .logo h1 a, #header .logo h1 a:hover {
  color: white;
  text-decoration: none;
}

#header .logo img {
  margin-left:0px;
  padding-left: 20px;
  margin-right: -30px;
  max-height: 90px;
  
}

@media (max-width: 992px) {
  #header {
    top: 20px;
  }
  #header.header-scrolled, #header .header-container {
    
  }
  
  #header .logo img {
	  margin:0;
	  max-height: 60px;
  }
  #header .logo h1 {
    font-size: 0px;
	
  }
  #header .logo h1 a{
 font-size: 0px;
}
  /*
  #header .yip{
	  display:inline-block;
  }
  */
}
 



/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.nav-menu, .nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
  left:-8%;
}

.nav-menu > ul > li {
  position: relative;
  white-space: nowrap;
  float: left;
    
}

.nav-menu a {
	margin:10px;
  display: block;
  position: relative;
  color: #fff;
  padding: 10px 15px;
  
  transition: 0.3s;
  font-size: 18px;
  
  text-transform: uppercase;
  font-family: 'Gotham';
    font-weight: 400;
    font-style: normal;
	
	background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50px;
  line-height:20px;
}

.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
  color: #fff;
  opacity:1;
  background: rgba(255, 80, 80, 0.8);
  border-radius: 50px;
  text-decoration: none;
}

.nav-menu .drop-down ul {
  display: block;
  position: absolute;
  left: -32%;
  top: calc(100% + 30px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: none;
  
  transition: ease all 0.3s;
}

.nav-menu .drop-down:hover > ul {
  opacity: 1;
  top: 80%;
  visibility: visible;
}

.nav-menu .drop-down li {
  min-width: 180px;
  position: relative;
  padding: 5px;	
}

.nav-menu .drop-down ul a {
  padding: 6px 15px;
  font-family: 'Gotham';
    font-weight: 400;
    font-style: normal;
  text-transform: uppercase;
  
  
  padding: 15px 25px;
  
  text-transform: uppercase;
  margin:0;
  color: #fff;
  left: 0;
  line-height:10px;
  text-align:center;
  
  
}

.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
  color: #fff;
}

.nav-menu .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
  
}

.nav-menu .drop-down .drop-down ul {
  top: 0;
  left: calc(100% - 30px);
}

.nav-menu .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
}

.nav-menu .drop-down .drop-down > a {
  padding-right: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
  content: "\eaa0";
  font-family: IcoFont;
  position: absolute;
  right: 15px;
}

@media (max-width: 1366px) {
  .nav-menu .drop-down .drop-down ul {
    left: -90%;
  }
  .nav-menu .drop-down .drop-down:hover > ul {
    left: -100%;
  }
  .nav-menu .drop-down .drop-down > a:after {
    content: "\ea9d";
  }
}

/* Mobile Navigation */
.mobile-nav-toggle {
  position: fixed;
  right: 30px;
  top: 30px;
  z-index: 9998;
  border: 0;
  background: none;
  font-size: 24px;
  
  transition: all 0.4s;
  outline: none !important;
  line-height: 1;
  cursor: pointer;
  text-align: right;
  
}

.mobile-nav-toggle i {
  color: #fff;
}

.mobile-nav {
  position: fixed;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  z-index: 9999;
  overflow-y: auto;
  background: #fff;
  transition: ease-in-out 0.2s;
  opacity: 0;
  visibility: hidden;
  border-radius: 10px;
  padding: 10px 0;
}

.mobile-nav * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav a {
  display: block;
  position: relative;
  color: Black;
  padding: 10px 20px;
  font-weight: 500;
  outline: none;
  text-transform:uppercase;
  text-align:left;
}

.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
  box-shadow: inset 0 -8px 0 0 red; 
  text-decoration: none;
}

.mobile-nav .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 10px;
  position: absolute;
  right: 15px;
}

.mobile-nav .active.drop-down > a:after {
  content: "\eaa1";
}

.mobile-nav .drop-down > a {
  padding-right: 35px;
}

.mobile-nav .drop-down ul {
  display: none;
  overflow: hidden;
}

.mobile-nav .drop-down li {
  padding-left: 20px;
}

.mobile-nav-overly {
  width: 100%;
  height: 100%;
  z-index: 9997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(29, 28, 31, 0.6);
  overflow: hidden;
  display: none;
  transition: ease-in-out 0.2s;
}

.mobile-nav-active {
  overflow: hidden;
}

.mobile-nav-active .mobile-nav {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-active .mobile-nav-toggle i {
  color: #fff;
}

/*--------------------------------------------------------------
# INDEX Section
--------------------------------------------------------------*/
.indx{
	margin:0;
	padding:0;	
}

.indx .bg1 {
  background: url("../img-1/bg1.webp") center center; 
  position: relative;
  background-size: cover;
  width:100%;
  min-height: 100vh;
  z-index: 21;
}

.indx .coba{
  color: transparent;
  -webkit-text-stroke: 1.00px rgba(255, 245, 0, 0.3);
  font-size:55px;
  font-weight: 400;
  font-style: normal;
  font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
  line-height:30%;
}

.indx .coba2{
  font-size:55px;
  font-weight: 400;
  font-style: normal;
font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
  line-height:100%;
  
}

.indx .coba3{
  color: transparent;
  -webkit-text-stroke: 1.00px rgba(255, 245, 0, 0.2);
  line-height:35%; font-size: 20px;
  
  font-weight: 400;
  font-style: normal;
  font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
  display:var(--y);
}

.indx .centered {
  position: absolute;
  top: 40%;
  left: 3%;
  z-index:9999;
  color: #fff;
  font-size:55px;
  font-weight: 400;
  font-style: normal;
font-family: 'Gotham';
    margin-right:390px;
	
    font-style: normal;
  
}

.indx p,a{
	
	font-size:20px;
	line-height:120%;
	font-family: 'Gotham';
}


.indx .some-page-wrapper {
  margin: 0px;
  padding: 0px;
  
  background-color: transparent;
  width: 100%;  
  height: 100vh;
  
}
.indx .ni{
	top:10%;
	left:18%;
	padding:120px;
}

.indx .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin: 0px;
  padding: 0px;
  height: 100%;

  font-family: 'Gotham';

    font-style: normal;
  font-size: 20px;

  
}

.indx .column {
  
  
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;

}


.indx .blue-column { 
  padding-top: 0vh;
  text-align: center;
  height: 100%;
  z-index: 1;
  
  
 }


.indx .green-column {
  padding-top: 0vh;
  height: 100%;
  z-index: 2;
  
  
  
}

.indx .carousel-caption{
	top:95%;
	visibility:var(--l);
	font-size:15px;
  transition: ease all 0.3s;
  font-family: 'Gotham';
  color:#fff;
}

.indx .carousel:hover {

  --l:visible;
    
  
 
 }
  

@media (max-width: 992px) {
	.indx .row, .indx .coba3{
		font-size: 10px;
		
	}

.indx .carousel-caption{
	top:90%;
				font-size:10px;
  
}

.indx .centered{
	margin-right:10px;
	top: 50%;
}

.indx .ni{
	top:20%;
	left:1%;
	padding:20%;
}
	
.indx .column {  
  float: left;
  width: 100%;
  padding: 0px;

}




.indx .row {
	
  margin-left: 0%;
  
  padding: 0px;
  height: 100%;
  box-sizing: border-box;
  font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
  font-size: 20px;
  color:#fff;
  
}
	
	
	.indx p,a{
	font-weight: 400;
	font-size:12px;
	line-height:150%;
	}
	
	.indx .coba, .indx .coba2, .indx .centered{
		font-size: 21px;
		line-height:140%;
	}
	
	.indx .blue-column p, .indx .green-column p, .indx .orange-column p{
	
	font-size: 10px;
	}	
}



/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
  background-color: #f6f6f7;
}

.section-title {
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 10px;
  /* position: relative; */
}

.section-title h2::after {

}

.section-title p {
  margin-bottom: 0;
}


/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: #f6f6f7;
  margin-top: 100px;
}

.breadcrumbs h2 {
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumbs ol li + li {
  padding-left: 10px;
}

.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #4f4c55;
  content: "/";
}

@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }
  .breadcrumbs ol {
    display: block;
  }
  .breadcrumbs ol li {
    display: inline-block;
  }
}


/*--------------------------------------------------------------
# INFO
--------------------------------------------------------------*/
.info{
	margin:0;
	padding:0;
}

.info .bgimg-1,.info .bgimg-2,.info .bgimg-3 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.info .bgimg-1 {
  margin-top: 0%;
  background-image: url("../img-1/bg-biru-info.webp");
  min-height: 100%;
  border: 1px;
  box-shadow: 0px 0px 20px 5px #0d0d0d;
}

.info .bgimg-2 {
	
  background-image: url("../img-1/prlx.webp");
  min-height: 100%;
}

.info .bgimg-3 {
  background-image: url("../img-1/bg-biru-info.webp");
  min-height: 100%;
}

.info .caption {
  position: absolute;
  left: 0;
  top: 75%;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 72.00px;
  font-weight: 800;
  font-style: normal;
 font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
}

.info p{
	word-break: keep-all;
	text-align: justify;
	text-justify: inter-word;
}

.info .part1{
	
	background-color:white;
	min-height: 100%;
	padding:50px 260px;
	padding-bottom:40px;
	font-size:17px;
	color: #777;
	line-height: normal;
}

.info .part2{		
	padding:250px 260px;
	font-size:17px;
	color: white;
	font-weight: 100px;
	line-height: normal;
}

.info .part3{		
	font-size:17px;
	color: white;
	background-color:transparent;
	padding:0px 160px 150px;
	
	
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .info .bgimg-1,  .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
  
}

@media (max-width: 992px) {
	.info .part1{
	  padding:35px 10px;
  }
	.info .part2{
		padding:125px 10px;
  }
	.info .part3{
		padding:0px 10px 75px;
	}
}

/*--------------------------------------------------------------
# VISION MISSION TO BOARD
--------------------------------------------------------------*/
.vm{
	margin:0;
	padding:0;

}

.vm .bgimg-1 {
  margin-top:0;
  background: url("../img-1/vmbg.webp") center center;
  background-size: cover;
  height: 100vh;
  width:100%;
  

}



/*
.vm .bgimg-1 {
  width: 100%;
  height: 100vh;
  background-image: url("../img-1/layer1.webp");
}*/

.vm .bgimg-10 {
  background-image: url("../img-1/bg1.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100vh;
  
}

.vm p{
	word-break: keep-all;
	text-align: justify;
	text-justify: inter-word;
	font-family: 'Gotham';
}

.vm .part1{
	padding:10px 200px;
	font-size:20px;
	color: white;
	font-weight: 150px;
	line-height: normal;
	font-family: 'Gotham';
}

.vm .txt{

	position: absolute;
	font-size:18px;
	color:white;
	font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
	
	right: 4%;
	bottom: 4%;
	text-transform:uppercase;
	z-index: 28;
}

.vm .txt:hover {
	text-shadow: 1px 2px 1px rgba(0, 0, 0, 5);
}


.vm .row {
  
  justify-content: center;
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;  
  height: 100%;  
  
  padding: 10px 30px 100px;  
  
}


.vm .column {
  float: left;
  width: 20%;
  padding: 20px;
  	
}

.vm .coba{
	text-align:center; padding-top: 120px; font-size: 60px; color:#fff; font-family: 'Gotham';
    font-weight: bold;
}

.vm h1{
	max-width: 300px; font-size: 20px;text-align: center;
	line-height:200%;
	color:#fff;
}

@media screen and (max-width: 992px) {
	.vm .bgimg-10 {
		background-repeat: repeat-y;
		min-height: 600vh;
		position: relative;
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
}
.vm .coba{
	font-size: 35px; 
	padding-top: 110px;
}

	.vm .row {
		
		display: flex;
		flex-wrap: wrap;
		width: 100%;  
		padding: 0px;  
	}
	.vm .column {
		float: inherit;
		width: 100%;
		padding: 20px;
	}
	.vm h1{
			max-width: 100%; font-size: 2em;text-align: center; 
			line-height:100%;
	}
}

/* Clearfix (clear floats) */
.vm .row::after {
  content: "";
  clear: both;
  display: table;
}

@media (max-width: 992px) {
	.vm .part1{
	padding:5px 30px;
	font-size:13px;
	}
	
	.vm .txt{
		font-size:0px;
	}
	.vm .row {
    margin-left:5px;
	padding: 0px 60px 20px;  
  
}
	
}





/*--------------------------------------------------------------
# STEEL MAIN
--------------------------------------------------------------*/
.sm{
	margin:0;
	padding:0;

}
.sm .nih{
	position: absolute;
	bottom: 1%;
	left: 50%;
	font-size: 18.00px;
	font-weight: 400;
    font-style: normal;
	transform: translate(-50%, -50%);
	text-align: center;
      font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
      text-decoration: none;
	  color: white;
	  z-index: 22;
}

.sm .nih:hover{
	padding: 5px;
}
.sm .centered {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
    text-align: center;
	font-size: 50.00px;
      font-weight: 400;
    font-style: normal;
      font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
      text-decoration: none;
	  color: white;
}


.sm .bgimg-4 {
  background: url("../img-1/sky.webp") center center;
  background-size: cover;
  height: 100vh;
  width:100%;
  z-index: 20;
  border: 1px;
  background-clip: content-box;
  position:relative;
}

.sm .bgimg-5 {
  background: url("../img-1/background2.webp") center center; 
  position: relative;
  background-size: cover;
  width:100%;
  min-height: 120vh;
  z-index: 21;
}

.sm .row{
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin: 0px;
  padding: 0px;
  height: 100%;
  box-sizing: border-box;
  
}

.sm .column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  
}

.sm .row2 {  
 
  justify-content: center;
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;  
  height: 55%;  
  padding: 9%;  
  padding-top: 11%;
  
  
}

.sm .button{
	width:25%;
	
}

.sm .column2 {
  float: left;
  width: 45%;
  padding: 3% 2.4% 0%;
  
}

.sm p{
	word-break: keep-all;
	text-align: justify;
	text-justify: inter-word;
	font-size: 16px;
}


.sm .level1 {
  
  background-image: url("../img-1/level3.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  
  bottom: -60%;
  position: absolute;
  
  width: 33%;
  height: 100%;
  z-index: 1;  
  
 }

.sm .level2 {
  
  background-image: url("../img-1/level2.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  
  bottom: -47%;
  margin-left: -0.9%;
  position: absolute;
  width: 45%;
  
  height: 100%;
  z-index: 2;
 }
 
 .sm .level3 {
  
  background-image: url("../img-1/level1.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: AUTO 100%;
  position: absolute;
  margin-left: 3.2%;
  
  width: 35%;
  bottom: -33%;
  height: 100%;
  z-index: 3;
 }


.sm .animate-bottom1{
	position:absolute;
	animation:animatebottom1 5s;
	}
@keyframes animatebottom1{
	from{bottom:-250%;opacity:0} 
	to{bottom:-60%;opacity:1}
	}

.sm .animate-bottom2{
	position:absolute;
	animation:animatebottom2 5s;
	}
@keyframes animatebottom2{
	from{bottom:-180%;opacity:0} 
	to{bottom:-47%;opacity:1}
	}

.sm .animate-bottom3{
	position:absolute;
	animation:animatebottom3 5s;
	}
@keyframes animatebottom3{
	from{bottom:-130%;opacity:0} 
	to{bottom:-33%;opacity:1}
	}
	
.sm .animatg{
	position:absolute;
	animation:animatebottog 3s;
	}
@keyframes animatebottog{
	from{top:45%;opacity:0} 
	to{top:45%;opacity:1}
	}	
	
.sm .annih{
	position:absolute;
	animation:animatebottoz 10s;
	}
@keyframes animatebottoz{
	from{bottom:1%;opacity:0} 
	to{bottom:1%;opacity:1}
	}	
	
@media (max-width: 992px) {
.sm .bgimg-5{
		background-repeat: repeat-y;
		min-height: 150vh;
		position: relative;
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
}

	.sm .centered {
		font-size: 30px;
	}
	.sm .nih{
		font-size: 10px;
	}
		.sm p{
			font-size: 15px;
		}
		.sm .row2 {  
		padding-top: 16%;
		}
	.sm .button{
		width:15%;
	}
	.sm .column2 {
	float: left;
	width: 80%;
	padding: 3% 2.4% 0%;
  
}

.sm .level1 {
	bottom: -50%;
	}

.sm .animate-bottom1{
	position:absolute;
	animation:animatebottom1 5s;
	}
@keyframes animatebottom1{
	from{bottom:-250%;opacity:0} 
	to{bottom:-50%;opacity:1}
	}

.sm .level2 {
  bottom: -40%;
 }
.sm .animate-bottom2{
	position:absolute;
	animation:animatebottom2 5s;
	}
@keyframes animatebottom2{
	from{bottom:-180%;opacity:0} 
	to{bottom:-40%;opacity:1}
	}

.sm .level3 {  
  
  background-size: 50%;
  margin-left: -20%;
  width:100%;
  bottom: -35%;
 }
.sm .animate-bottom3{
	position:absolute;
	animation:animatebottom3 5s;
	}
@keyframes animatebottom3{
	from{bottom:-130%;opacity:0} 
	to{bottom:-35%;opacity:1}
	}
 


}

@media (max-width: 768px){
.sm {
    height: 220vh;
}
}


/*--------------------------------------------------------------
# CONTACT US
--------------------------------------------------------------*/
.cu{
	margin:0;
	padding:0;
}
.cu .bgimg-y{
  background: url("../img-1/CU.webp") center center;
  background-size: cover;
  height: 100vh;
  margin-left:-1%;
  width:103%;
  
  
}
.cu .overlay {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0%;
  left: 0;
  background-color: #fff;
  overflow-x: hidden;
  transition: 0.5s;
  z-index: 99999;
  height: 100vh;
}


.cu .texty {
  
    width:140px;
    height:140px;
    border-radius:50%;
	text-decoration: none;
	display: inline-block;
	position:relative;
    line-height:140px;
	
	background-color: yellow;
	text-align:center;
	text-transform:uppercase;
	font-weight: 900;
	color: #021234;
	font-size: 20px;
	
	left: 25%;
	transform: translate(-55%, -50%);
	
}
.cu .overlay .closebtn {
  position: absolute;
  top: 100px;
  right: 45px;
  font-size: 70px;
    
    width:50px;
    height:50px;
    border-radius:50px;
	text-decoration: none;
	display: inline-block;
	
    line-height:45px;
	background-color: rgba(255, 80, 80, 0.8);
	text-align:center;
	text-transform:uppercase;
	font-weight: 900;
	color: #fff;
	
	transform: translate(-50%, -50%);
  
}

.cu .overlay-content {
  position: relative;
  
  
  
  text-align: center;
  margin: 15%;
  margin-top:10%;
}


.cu .middle {
  
  opacity: 1;
  position: relative;
  z-index: 9995;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  
  
}



.cu .image2 {
	height: 800px;
	width: 800px;	
    background: url("../img-1/layer1.webp") center center;
	background-size: 100% auto;
	
}


.cu .image1{
	padding-top:30vh;
	background: url("../img-1/ourMostClients.webp") center center;
	transition: 1s Ease-in-out;
  transition-delay: 0.1s;
	background-size:contain;
	background-repeat:no-repeat;
	height: 60vh;
	
}

.cu .image1:hover{
  text-align: center;
  background-image: url("../img-1/ourMostClients2.webp");
  transition: 1s Ease-in-out;
  transition-delay: 0.1s;
  background-repeat: no-repeat;
  background-position: center;
  background-size:contain;
  
  --y:block;
}


.cu .image {
    display: block;
    margin: 0px auto;
	
	width:40%;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .cu .bgimg-y{
    background-attachment: scroll;
  }
} 

@media (max-width: 992px) {
.cu .bgimg-y{
 
  background-size: 90% 100%;
  height: 100vh;
  
  margin-left:-12%;
  width:210%;
  
  
}
.cu .middle {
  top: 40%;
  left: 30%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  
}

.cu .image2 {
	height: 350px;
	width: 350px;
	margin-top:50%;
    margin-left:-20%;
	
}

.cu .image {	
	width:30%;
}

.cu .overlay .closebtn {
  
  top: 50px;
  right: 5px;
  font-size: 50px;
    
   
}

	
}


/*--------------------------------------------------------------
# BLASTING MEDIA MAIN
--------------------------------------------------------------*/
.bmm{
	margin:0;
	padding:0;
	
}

.bmm .nih{
	position: absolute;
	bottom: 1%;
	left: 50%;
	font-size: 18.00px;
	font-weight: 400;
    font-style: normal;
	transform: translate(-50%, -50%);
	text-align: center;
      font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
      text-decoration: none;
	  color: white;
	  z-index: 22;
}

.bmm .button{
	width:25%;
	
}

.bmm .nih:hover{
	padding: 5px;
}

.bmm .image {
  top:-50px;
  position:relative;
  opacity: 1;
  display: block;
  width: 132%;
  height: auto;
  margin: -10%;
  
}

.bmm .middle {
  
  opacity: 0;
  position: relative;
  z-index: 9999;
  top: -20%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  
  
}

.bmm .column2:hover .image {
		
		filter: blur(20px);
        -webkit-filter: blur(20px);
        -moz-filter: blur(20px);
        -o-filter: blur(20px);
        -ms-filter: blur(20px);
}


.bmm .column2:hover .middle {
  opacity: 1;
}

.bmm .texty {
  
    width:140px;
    height:140px;
    border-radius:50%;
	text-decoration: none;
	display: inline-block;
	position:relative;
    line-height:140px;
	
	background-color: yellow;
	text-align:center;
	text-transform:uppercase;
	font-weight: 900;
	color: #021234;
	font-size: 20px;
	
	left: 25%;
	transform: translate(-55%, -50%);
	
}

.bmm .centered {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
    text-align: center;
	font-size: 50.00px;
      font-weight: 400;
    font-style: normal;
      font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
      text-decoration: none;
	  color: white;
}



.bmm .text2c {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
  text-align: center;
  font-size: 18.00px;
  font-weight: 400;
  font-style: normal;
  padding:5% 1%;
  font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
  text-decoration: none;
  color: yellow;
}

.bmm .text4c {
	position: relative;
	left: 50%;
	transform: translate(-50%, 0%);
    text-align: center;
	font-size: 18.00px;
      font-weight: 400;
    font-style: normal;
      font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
      text-decoration: none;
	  color: yellow;
	  background-color: #021234;
	  padding:2% 1%;
	  height:13%;
	  z-index:999;
}


.bmm .bgimg-8 {
	
	background: url("../img-1/maskGroup12.webp") center center;
  
  
  height: 100vh;
  background-size: 101%;
  z-index: 21;
  
  
  position:relative;

}

.bmm .bgimg-5 {
  
  background: url("../img-1/background2.webp") center center; 
  position: relative;
  
  min-height: 190vh;
  width: 100%;
  background-size: 100%;
  z-index: 21;
}

.bmm .row2 {
  
  justify-content: center;
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;  
  height: 100%;  
  padding:150px 100px;
 
}


.bmm .column2 {
  float: left;
  width: 33%;
  padding:20px;
  margin-bottom:-150px;
  
}
/*
.bmm .row2 {
  position: absolute;
  justify-content: center;
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;  
  height: 55%;  
  padding: 9%;  
  padding-top: 12%;
  
}


.bmm .column2 {
  float: left;
  width: 33%;
  padding: 1% 2.4% 0.2% 2.4%;
  position: relative;
  z-index: 22;
  overflow:hidden;
  
}
*/

/* Clearfix (clear floats) */
.bmm .row2::after {
  content: "";
  clear: both;
  display: table;
}

.bmm .animatg{
	position:absolute;
	animation:animatebottog 3s;
	}
@keyframes animatebottog{
	from{top:45%;opacity:0} 
	to{top:45%;opacity:1}
	}	
	
.bmm .annih{
	position:absolute;
	animation:animatebottoz 1s;
	}
@keyframes animatebottoz{
	from{bottom:1%;opacity:0} 
	to{bottom:1%;opacity:1}
	}	
	
.bmm .overlay {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0%;
  left: 0;
  background-color: #021234;;
  overflow-x: hidden;
  transition: 0.5s;
  z-index: 99999;
}

.bmm .deskrip{
	text-align: left; padding:2%; 
	margin-left:2%;
	padding-top:22%; font-size:25px; 
	font-weight: 800px; color: yellow;
	font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
}

.bmm .overlay .closebtn {
  position: absolute;
  top: 100px;
  right: 45px;
  font-size: 70px;
  
  
    width:50px;
    height:50px;
    border-radius:50px;
	text-decoration: none;
	display: inline-block;
	
    line-height:45px;
	background-color: yellow;
	text-align:center;
	text-transform:uppercase;
	font-weight: 900;
	color: #021234;
	
	transform: translate(-50%, -50%);
  
}

.bmm .overlay-content {
  position: relative;
  
  
  width: 100%;
  text-align: center;
  margin-top: 30px;
}


.bmm .flex-body {
    display: flex;
	width:60%;
	
	margin-left:20%;
	margin-top:10%;
	
}

.bmm .flex-row {
    flex-direction: row;
    display: flex;
	
}

.bmm .flex-column {
    flex-direction: column;
    display: flex;
	
}



.bmm .flex-body div:not([class*="flex"]) {
    border: 1px;
    flex: 1 1 200px;
    width: 400px;
}

.bmm .image2 {
	height: 400px;
	width: 400px;	
    background: url("../img-1/x01BrightblastGlassBeads1.webp") no-repeat bottom;
	background-size: 160% auto;
}

.bmm .image3 {
	height: 400px;
	width: 400px;	
    background: url("../img-1/x02EnvirogritGarnet1.webp") no-repeat bottom;
	background-size: 160% auto;
}

.bmm .image4 {
	height: 400px;
	width: 400px;	
    background: url("../img-1/x03Panagrit1.webp") no-repeat bottom;
	background-size: 160% auto;
}


.bmm .image5 {
	height: 400px;
	width: 400px;	
    background: url("../img-1/x04QuickcutAluminumOxide1.webp") no-repeat bottom;
	background-size: 160% auto;
}

.bmm .image6 {
	height: 400px;
	width: 400px;	
    background: url("../img-1/x04QuickcutAluminumOxide3.webp") no-repeat bottom;
	background-size: 160% auto;
}

.bmm .image7 {
	height: 400px;
	width: 400px;	
    background: url("../img-1/x04QuickcutAluminumOxide5.webp") no-repeat bottom;
	background-size: 160% auto;
}

.bmm .image8 {
	height: 400px;
	width: 400px;	
    background: url("../img-1/x03Panashot2.webp") no-repeat bottom;
	background-size: 160% auto;
}

.bmm .image9 {
	height: 400px;
	width: 400px;	
    background: url("../img-1/x05ProfinishOlivine1.webp") no-repeat bottom;
	background-size: 160% auto;
}


.bmm p{
	word-break: keep-all;
	text-align: justify;
	text-justify: inter-word;
	font-size: 16px;
	font-family: 'Gotham';
    font-weight: 400;
    font-style: normal;
    
}

@media (max-width: 992px) {
.bmm .deskrip{
	margin-left:0%;
	padding-top:5%;
    font-size: 18px;
}
	.bmm .centered {
		font-size: 30px;
	}
.bmm .button{
		width:15%;
	}

.bmm .overlay .closebtn {
  position: absolute;
  top: 40px;
  right: 5px;
}

.bmm .overlay-content {
  position: relative;  
  left:0%;
  margin-top: 0px;
}

.bmm .flex-body {
    display: flex;
	width:100%;
	flex-direction: column;
	margin-left:0%;
	margin-top:30%;
	
}

.bmm .bgimg-8, .bmm .bgimg-5{
  background-size: cover;	
	
}
.bmm .bgimg-5{
		background-repeat: repeat-y;
		min-height: 100%;
		position: relative;
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
}

.bmm .row2 {
		flex-direction: column;
		display: flex;
		flex-wrap: wrap;
		width: 100%;  
		padding: 0px;  
	}
.bmm .column2 {
		float: inherit;
		width: 70%;
		padding: 10px;
		margin-bottom:-5px;
}

.bmm .row2 {
    padding: 10px 30px 20px;  
  
}
.bmm .image {
  top:-18px;
  position:relative;
  opacity: 1;
  display: block;
  width: 132%;
  height: auto;
  margin: -10%;
  
}
.bmm .middle {  
		transform: translate(-50%, -120%);
  -ms-transform: translate(-50%, -120%);
}

.bmm .texty {
  
    width:100px;
    height:100px;
    border-radius:100px;
	
    line-height:100px;
	font-size: 15px;
	
}
}


/*--------------------------------------------------------------
# BLASTING EQUIPMENT MAIN
--------------------------------------------------------------*/
.bem{
	margin:0;
	padding:0;
	
}

.bem .nih{
	position: absolute;
	bottom: 1%;
	left: 50%;
	font-size: 18.00px;
	font-weight: 400;
    font-style: normal;
	transform: translate(-50%, -50%);
	text-align: center;
      font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
      text-decoration: none;
	  color: white;
	  z-index: 22;
}

.bem .button{
	width:25%;
	
}

.bem .nih:hover{
	padding: 5px;
}

.bem .image {
  top:-15px;
  position:relative;
  opacity: 1;
  display: block;
  width: auto;
  height: 85%;
  margin: 10px;
  padding-left:5%;
}

.bem .eq1{
	height: 100%; margin-top:-27px; padding:10px; padding-left:5%;
}

.bem .eq2{
	height: 90%; margin-top:-10px; padding-left:20%;
}

.bem .eq3{
	"height: 100%;margin-top:-30px;
}

.bem .eq4{
	height: 110%; margin-top:-50px;
}

.bem .eq5{
	height: 120%; margin-top:-100px;
}

.bem .eq6{
	height: 120%;margin-top:-50px;padding-left:0%;	
}

.bem .wadah{
	text-align:center; position:relative;
	overflow:hidden;width:100%; height:70%;
	background-color:#021234;
}

.bem .texty {
  
    width:140px;
    height:140px;
    border-radius:140px;
	text-decoration: none;
	display: inline-block;
	position:relative;
    line-height:140px;
	background-color: yellow;
	text-align:center;
	text-transform:uppercase;
	font-weight: 900;
	color: #021234;
	font-size: 20px;
	
	left: 25%;
	transform: translate(-50%, -50%);
	
}

.bem .centered {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
    text-align: center;
	font-size: 50.00px;
      font-weight: 400;
    font-style: normal;
      font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
      text-decoration: none;
	  color: white;
}



.bem .text2c {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
  text-align: center;
  font-size: 18.00px;
  font-weight: 400;
  font-style: normal;
  padding:5% 1%;
  font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
  text-decoration: none;
  color: yellow;
}

.bem .text4c {
	position: relative;
	left: 50%;
	transform: translate(-50%, 0%);
    text-align: center;
	font-size: 18.00px;
      font-weight: 400;
    font-style: normal;
      font-family: 'Gotham';
    font-weight: bold;
    font-style: normal;
      text-decoration: none;
	  color: yellow;
	  background-color: #021234;
	  padding:2% 1%;
	  height:13%;
	  z-index:999;
}


.bem .bgimg-8 {
	
	background: url("../img-1/maskGroup13.webp") center center;
  
  
  height: 100vh;
  background-size: 101%;
  z-index: 21;
  
  
  position:relative;

}

.bem .bgimg-5 {
  
  background: url("../img-1/background2.webp") center center; 
  position: relative;
  
  min-height: 200vh;
  width: 100%;
  background-size: 100%;
  z-index: 21;
}

.bem .coba{
	text-align:center; padding-top: 160px;
	font-size: 50px; color:#021234;
	font-weight: bold;
    font-style: normal;
    font-display: swap;
	font-family: 'Gotham';
	
}

.bem .part1{
	padding:10px 135px;
	font-size:18px;
	color: #021234;
	font-weight: normal;
	line-height: normal;
    font-style: normal;
    
}

.bem .row2 {
  
  justify-content: center;
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;  
  height: 100%;  
  padding:0px 100px;
  
}


.bem .column2 {
  float: left;
  width: 33%;
  padding:30px 30px 30px 30px;
  
  margin-bottom:-150px;
  
}

.bem .textmore{
	font-size:30px;
	color: #021234;
}
/*
.bem .row2 {
  position: absolute;
  justify-content: center;
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;  
  height: 55%;  
  padding: 9%;  
  padding-top: 12%;
  
}


.bem .column2 {
  float: left;
  width: 33%;
  padding: 1% 2.4% 0.2% 2.4%;
  position: relative;
  z-index: 22;
  overflow:hidden;
  
}
*/

/* Clearfix (clear floats) */
.bem .row2::after {
  content: "";
  clear: both;
  display: table;
}

.bem .animatg{
	position:absolute;
	animation:animatebottog 3s;
	}
@keyframes animatebottog{
	from{top:45%;opacity:0} 
	to{top:45%;opacity:1}
	}	
	
.bem .annih{
	position:absolute;
	animation:animatebottoz 4s;
	}
@keyframes animatebottoz{
	from{bottom:1%;opacity:0} 
	to{bottom:1%;opacity:1}
	}	
	
.bem .overlay {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0%;
  left: 0;
  background-color: #021234;;
  overflow-x: hidden;
  transition: 0.5s;
  z-index: 99999;
}

.bem .deskrip{
	text-align: left; padding:2%; 
	margin-left:2%;
	padding-top:22%; font-size:25px; 
	font-weight: 800px; color: yellow;
}

.bem .flex-body {
    display: flex;
	width:60%;
	
	margin-left:20%;
	margin-top:10%;
	
}

.bem .flex-row {
    flex-direction: row;
    display: flex;
	
}

.bem .flex-column {
    flex-direction: column;
    display: flex;
	
}



.bem .flex-body div:not([class*="flex"]) {
    border: 1px;
    flex: 1 1 200px;
    width: 400px;
}



.bem p{
	word-break: keep-all;
	text-align: justify;
	text-justify: inter-word;
	font-size: 16px;
}

@media (max-width: 992px) {
.bem .textmore{
	font-size:20px;
	
}


.bem .eq1{
	height: 100%; margin-top:-27px; padding:10px; padding-left:0%;
}


.bem .part1{
	padding:5px 15px;
	font-size:14px;
	    
}

.bem .image {
  top:-18px;
  position:relative;
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  margin: 0%;
  
}

.bem .eq2{
	left:-20px;
}


.bem .coba{
	font-size:30px;
	padding:10px;
}

.bem .deskrip{
	margin-left:0%;
	padding-top:5%;
    font-size: 18px;
}
	.bem .centered {
		font-size: 30px;
	}
.bem .button{
		width:15%;
	}


.bem .flex-body {
    display: flex;
	width:100%;
	flex-direction: column;
	margin-left:0%;
	margin-top:30%;
	
}

.bem .bgimg-8, .bem .bgimg-5{
  background-size: cover;	
	
}
.bem .bgimg-5{
		background-repeat: repeat-y;
		min-height: 100%;
		
		position: relative;
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
}

.bem .row2 {
		flex-direction: column;
		display: flex;
		flex-wrap: wrap;
		width: 100%;  
		padding: 0px;  
	}
.bem .column2 {
		float: inherit;
		width: 70%;
		padding: 10px;
		margin-bottom:-5px;
}

.bem .row2 {
    padding: 10px 30px 20px;  
  
}


.bem .texty {
  
    width:100px;
    height:100px;
    border-radius:100px;
	
    line-height:100px;
	font-size: 15px;
	
}
}


/*--------------------------------------------------------------
# INFO
--------------------------------------------------------------*/
.cer{
	margin:0;
	padding:0;
	
}

.cer .bgimg-1 {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.cer .judul{
	text-align:center; margin:-30px; padding-top:200px; font-family: 'Gotham';
				font-weight: bold;
				font-style: normal; font-size: 60px; color: #021234;
}

.cer .section-title {
  padding-bottom: 10px;
}

.cer .bgimg-1 {
  margin-top: 0%;
  background-image: url("../img-1/CERTIFICATIONbg.webp");
  
  min-height: 210vh;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  

}

.cer .image {
    display: block;
    margin: 50px auto;
	width:60%;
}

.cer .nih{
	position: relative;
	
	top:70%;
	left: 15%;
	font-size: 18.00px;
	font-weight: 400;
    font-style: normal;
	
      font-family: 'Gotham';
    font-weight: bold;
	   
    font-style: normal;
      text-decoration: none;
	  color: white;
	  z-index: 22;
}

.cer { counter-reset: item }
.cer li { display: block; padding-left: 30px; position: relative; }
.cer li:before { 
  content: counter(item) ". ";
  counter-increment: item;
  width: 2em;
  position:absolute;
  left: 0;
}



/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .cer .bgimg-1 {
    background-attachment: scroll;
  }
  
}

@media (max-width: 992px) {
	.cer .judul{
	text-align:center; margin:-20px; padding-top:200px; 
	font-size: 35px;
	}
	
		.cer .nih{
			left: 0%;
			padding:10px;
			font-size: 14.00px;
		}
		
		.cer ol{
			padding-inline-start: 0px;
		}
		.cer .image {
			
			margin: 10px auto;
			width:100%;
}
		
}


/*--------------------------------------------------------------
# PRODUCT
--------------------------------------------------------------*/
.prod{
	margin:0;
	padding:0;
}


.prod .bgimg-1{
  
  background: url("../img-1/bgprod.webp") center center;
  background-size: cover;
  height: 100vh;
  
  margin-top:0%;
  
  background-size: 100% 100%;  
  
}

.prod .carousel-inner img{
	height:90vh; margin-left:50%; margin-top:55vh;
	transform: translate(-50%, -50%);
}

.prod .carousel-control span{
	top:55vh;
}

@media (max-width: 992px) {

.prod .carousel-inner img{
	height:45vh; margin-left:0vh; margin-top:25vh;width:100%;
	transform: translate(0%, 0%);
}

.prod .carousel-control span{
	top:70%;
	
}
	
}


/*--------------------------------------------------------------
# FACILITIES
--------------------------------------------------------------*/
.fcl{
	margin:0;
	padding:0;
}


.fcl .bgimg-1{
  
  background: url("../img-1/background.webp") center center;
  background-size: cover;
  height: 100vh;
  
  margin-top:0%;
  
  background-size: 100% 100%;  
  
}

.fcl .carousel-inner img{
	height:90vh; margin-left:15vh; margin-top:10vh;
}

.fcl .carousel-control span{
	top:50%;
}

@media (max-width: 992px) {

.fcl .carousel-inner img{
	height:35vh; margin-left:0vh; margin-top:35vh;
}

.fcl .carousel-control span{
	top:70%;
}
	
}