/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body { font-family: "Open Sans", sans-serif; color: #444444;}
a { color: #ef7c00; transition: all 200ms linear; }
a:hover { color: #fc8129; text-decoration: none;}
h1, h2, h3, h4, h5, h6 { font-family: "Raleway", sans-serif;}
ul { list-style-type:none; margin:0; padding:0;}
p { line-height:28px; margin-bottom: 15px;}

.mb-20 { margin-bottom:20px;}
.font-b { font-weight:600;}
#main { padding:25px 0}
.inner-page { margin-top:90px;}
.shortpage { min-height:calc(100vh - 75px)}

[data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] {
    transition-duration: 0.7s; }

/*--------------------------------------------------------------
# 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: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: #ef7c00;
  color: #fff;
  transition: all 0.4s;
}

.back-to-top i:hover { background: #fc7c1f; color: #fff;}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.navigation-wrap.start-header {
	opacity: 1;
	transform: translateY(0);
	padding: 5px 0;
	box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.15);
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navigation-wrap.start-header.scroll-on {
	box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
	padding: 5px 0;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navigation-wrap.start-header.scroll-on .navbar-brand img{
	height: 50px;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navigation-wrap{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
	background: #fff;
}
.navigation-wrap .navbar{ padding: 0;}

.navigation-wrap .navbar-brand img{
	height: 70px;
	width: auto;
	display: block;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navigation-wrap .navbar-toggler {
	float: right;
	border: none;
	padding-right: 0;
	font-size:0;
}
.navigation-wrap .navbar-toggler:active,
.navigation-wrap .navbar-toggler:focus { outline: none;}

.navigation-wrap .navbar-light .navbar-toggler-icon {
	width: 24px;
	height: 19px;
	background-image: none;
	position: relative;
	border-bottom: 3px solid #000;
    transition: all 300ms linear;
}
.navigation-wrap .navbar-light .navbar-toggler-icon:after, 
.navigation-wrap .navbar-light .navbar-toggler-icon:before{
	width: 24px;
	position: absolute;
	height: 3px;
	background-color: #000;
	top: 0;
	left: 0;
	content: '';
	z-index: 2;
    transition: all 300ms linear;
}
.navigation-wrap .navbar-light .navbar-toggler-icon:after{ top: 8px;}

.navigation-wrap .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { transform: rotate(45deg);}
.navigation-wrap .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {	transform: translateY(8px) rotate(-45deg);}
.navigation-wrap .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { border-color: transparent; }

.navigation-wrap .nav-link{
	color: #2a2c39 !important;
	font-size:16px;
    transition: all 200ms linear;
	position: relative;	
	padding: 5px 0 !important; 
	display: inline-block;
	width: 100%;
	font-family:'Fira Sans', sans-serif;
}
.navigation-wrap .nav-item:hover .nav-link, .navigation-wrap .nav-item.active .nav-link { color: #ef7c00 !important; }
.navigation-wrap .nav-item:hover .dropdown-toggle::after, .navigation-wrap .nav-item.active .dropdown-toggle::after { color: #ef7c00 !important; }

.navigation-wrap .nav-item:after{
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background-color: #ef7c00;
	opacity: 0;
    transition: all 200ms linear;
}
.navigation-wrap .nav-item:hover:after{ bottom: 0; opacity: 1;}
.navigation-wrap .nav-item.active:hover:after{ opacity: 0;}
.navigation-wrap .nav-item{ position: relative; transition: all 200ms linear; margin:0 0 0 30px;}

/* #Primary style
================================================== */
.navigation-wrap .nav-item .dropdown-menu {
    transform: translate3d(0, 10px, 0);
    visibility: hidden;
    opacity: 0;
	max-height: 0;
    display: block;
	padding: 0;
	margin: 0;
    transition: all 200ms linear;
}
.navigation-wrap .nav-item.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
	max-height: 999px;
    transform: translate3d(0, 0px, 0);
	width:100%;
}
.navigation-wrap .dropdown-menu {
	padding: 10px!important;
	margin: 0;
	font-size: 13px;
	color: #2a2c39;
	background-color: #fcfaff;
	border: none;
	border-radius: 3px;
	box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15);
    transition: all 200ms linear;
}

.navigation-wrap .dropdown-item {
	padding: 7px 10px;
	color: #2a2c39;
	border-radius: 2px;
    transition: all 200ms linear;
}
.navigation-wrap .dropdown-item:hover, 
.navigation-wrap .dropdown-item:focus { color: #ef7c00; background:none; }

.navigation-wrap .nav-item .dropdown-toggle { padding-right: 20px !important; }
.navigation-wrap .dropdown-toggle::after {
		position: absolute;
		display: block;
		top: 7px;
		right: 0;
		content: "\e902";
		vertical-align: 0;
		transition: all 200ms linear;
		font-family: 'mehta';
		color: #2a2c39;
		border: 0;
	}

/*--------------------------------------------------------------
# Carousel Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: linear-gradient(0deg, #2a2c39 0%, #33364a 100%);
  padding: 0;
  margin-top:90px;
}

#hero .carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  height: 70vh;
  padding-top: 60px;
}

#hero h2 { color: #fff; margin-bottom: 30px; font-size: 48px; font-weight: 700; }

#hero p {
  width: 80%;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  margin: 0 auto 30px auto;
  color: #fff;
}

#hero .carousel-control-prev, #hero .carousel-control-next { width: 10%;}

#hero .carousel-control-next-icon, #hero .carousel-control-prev-icon {
  background: none; font-size: 26px; width: auto; height: auto; }

#hero .btn-get-started {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 50px;
  transition: 0.5s;
  line-height: 1;
  margin: 10px;
  color: #fff;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  border: 2px solid #ef7c00;
}

#hero .btn-get-started:hover { background: #ef7c00; color: #fff; text-decoration: none;}

.hero-waves { display: block; width: 100%; height: 60px; position: relative;}

.wave1 use {
  -webkit-animation: move-forever1 10s linear infinite;
  animation: move-forever1 10s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave2 use {
  -webkit-animation: move-forever2 8s linear infinite;
  animation: move-forever2 8s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

.wave3 use {
  -webkit-animation: move-forever3 6s linear infinite;
  animation: move-forever3 6s linear infinite;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

@-webkit-keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }
  100% {
    transform: translate(-90px, 0%);
  }
}

@-webkit-keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

@-webkit-keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

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

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

.section-title h3 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0 0 10px 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #aaaaaa;
  font-family: "Poppins", sans-serif;
}

.section-title h3::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: #ef7c00;
  margin: 4px 10px;
}

.section-title h2 {
  font-size: 36px;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  color: #2a2c39;
  line-height:46px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: #14151c;
  color: #fff;
  font-size: 14px;
  padding: 25px 0;
  margin-top:-1px;
}
#footer .copyright { margin: 0 0 5px 0; }
#footer .copyright span { font-weight: 600;}
#footer .credits { font-size: 13px; float: right;}
#footer .credits a span{ font-size:18px; margin-left:5px;}
#footer .credits a:hover { color: #fff;}

/*--------------------------------------------------------------
# Ethyl Alcohol Page
--------------------------------------------------------------*/
.eproduct-title { padding-bottom:0px;}
.eproduct-title .section-title { padding-bottom: 0px;}
.eproduct-title p { margin-bottom:0;}
.eproduct-title p span { font-weight: 600;}
.eproduct .ep-img { border-radius:10px; overflow:hidden; display: inline-block; position:relative; max-width: 320px; cursor: zoom-in;}
.eproduct .ep-img img { width:100%; height:auto; transition: transform 1.2s; }
.eproduct .ep-img:before { position: absolute; top:0; right:0; bottom:0; left:0; background:#ef7c00; content:""; opacity:0; transition: 0.5s; z-index:1}
.eproduct .ep-img:hover:before { opacity:0.85}
.eproduct .ep-img:hover img { transform: scale(1.2); }

.eproduct .ep-img:after { 
	position: absolute;
	left: 50%; top:50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	content:"\e90f"; opacity:0; transition: 0.5s; z-index:2;
	font-size: 26px; font-family: 'mehta'; color:#fff;
}
	
.eproduct .ep-img:hover:after { opacity:1}
.eproduct h3 { font-size: 28px; font-weight: 700; position:relative; margin-bottom:30px;}
.eproduct h3:after { position: absolute; left:0; bottom:-10px; content:""; background:#ef7c00; width: 70px; height:2px;}
.eproduct p { margin-bottom:7px;}
.eproduct p span { font-weight: 600;}
.eproduct .aws-product { margin-top: 20px; display:inline-block}
.eproduct .aws-product img { width:auto; height: 30px;}

.eproduct .b_list { margin-bottom:5px;}

/*--------------------------------------------------------------
# Polypropylene Constuction Fibers
--------------------------------------------------------------*/
.table1_list {
	border-spacing: 0;
	width: 100%;
	border: 1px solid #d4d6df;
}
.table1_list td {
	border: 1px solid #d4d6df;
	padding: 10px 15px;
	vertical-align:top;
}
.table1_list td span{font-weight:600; }

.table2_list {
	border-spacing: 0;
	width: 100%;
	border: 1px solid #d4d6df;
}
.table2_list td {
	border-bottom: 1px solid #d4d6df;
	padding: 10px 15px;
	vertical-align:top;
}
.table2_list td:nth-child(1){ width:47%; font-weight:600; }
.table2_list td:nth-child(2){ width:3%; font-weight:600; padding:10px 0 }
.table2_list td:nth-child(3){ width:50% }

.table2_list td span{ font-weight:600; }

.b_list li { position:relative; padding: 5px 0 5px 20px; line-height:28px;}
.b_list li:before { position: absolute; top:16px; left:0; content:""; width:6px; height:6px; border-radius:3px; background:#ef7c00; }

.n_list li {padding: 5px 0; line-height:28px;}
.n_list li:nth-child(odd) { width:30px; color:#ef7c00; float:left}
.n_list li:nth-child(even) { width:100%; padding-left: 30px}

.FibersMortar_img {
	background: linear-gradient(to bottom, #213861 50%, #455185 100%);
	text-align: center;
	padding:15px;
	border-radius:10px;
	margin:30px 0;
	max-width:420px;
}
.FibersMortar_img p {font-style:italic; margin:10px 0 0; color:#fff;}



.fibers-types-wrap .fibers-box {
  padding: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 29px 0 rgba(68, 88, 144, 0.12);
  transition: all 0.4s ease-in-out;
  width: 100%;
  height: 100%;
}

.fibers-types-wrap .fibers-box:hover { box-shadow: 0 2px 35px 0 rgba(68, 88, 144, 0.2);}

.fibers-types-wrap h4 { font-weight: 700; margin-bottom: 15px; font-size: 18px; }
.fibers-types-wrap p { font-size: 14px; line-height: 24px; margin-bottom: 0; }

.fiber-types1, 
.fiber-types2, 
.fiber-types3 {	position:relative; }

.fiber-types1:before, 
.fiber-types2:before, 
.fiber-types3:before { position:absolute; content:""; top:0; right:0; bottom:0; left:0; opacity:0; transition: 0.5s; }

.fiber-types1:hover:before,
.fiber-types2:hover:before,
.fiber-types3:hover:before { opacity:1; }

.fiber-types1:before { background:url(../img/RPP06.jpg); background-size: cover; }
.fiber-types2:before { background:url(../img/RPP12.jpg); background-size: cover; }
.fiber-types3:before { background:url(../img/RPP20.jpg); background-size: cover; }

.cta { background: #2a2c39; padding: 40px 0; margin:30px 0}
.cta p { color: #fff; font-size: 22px; margin: 7px 0 0;}

.cta-btn {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 30px;
  border:2px solid #ef7c00;
  border-radius: 50px;
  transition: 0.5s;
  color: #fff;
  background: #ef7c00;
}
.cta-btn:hover { background: #fff; color: #ef7c00;}
.cta-btn-container { text-align:right;}


/*--------------------------------------------------------------
# Contact Page
--------------------------------------------------------------*/
.contact_info li { position: relative;  padding: 0 0 20px 30px; }
.contact_info li i { position: absolute; top: 4px; left: 0;  color: #ef7c00; font-size: 18px;}
.contact_info li a { color:#2a2c39; }
.contact_info li a:hover { color:#ef7c00; }
.contact_info li.address span { font-size:14px; font-style:italic;}
.contact_info li.mobile span{ display:inline-block; width:1px; height:100%; background:#d4d6df; margin:0 10px}
.contact_info li .email { margin-bottom: 5px; display: inline-block; }
.contact_info li.phone { padding-bottom: 7px;}
.contact_info li.phone i { font-size: 16px;}

.mapouter { position:relative; text-align:right; width:100%; height:400px; border-radius:10px;}
.gmap_canvas {overflow:hidden; background:none !important; width:100%; height:400px;}
.gmap_iframe { height:400px !important;}


/*--------------------------------------------------------------
# Media - max-width 1024px
--------------------------------------------------------------*/
@media (min-width: 1024px) {
  #hero p { width: 60%;}
  #hero .carousel-control-prev, #hero .carousel-control-next { width: 5%;}
}

/*--------------------------------------------------------------
# Media - max-width 767px
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	section { padding: 30px 0;}
	.container { max-width: 100%;}
	.section-title { padding-bottom: 10px;}
	.section-title h2 { font-size: 30px; line-height:40px;}
	#footer { padding: 20px 0}
	
	/* ----- Header ----- */
	.navigation-wrap .nav-item { margin:0; border-top: 1px solid #d4d6df}
	.navigation-wrap .nav-item:after{ display: none;}	
	.navigation-wrap .dropdown-toggle::after { transform: rotate(-90deg)	}
	.navigation-wrap .dropdown-toggle[aria-expanded="true"]::after{ transform: rotate(0deg);}
	.navigation-wrap .dropdown-menu {
		padding: 0 !important;
		background-color: transparent;
		box-shadow: none;
		transition: all 200ms linear; }
		
	.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
		padding: 5px 0 !important; background: rgba(212, 214, 223, 0.25); border-radius: 0; }
	
	.navigation-wrap .navbar-nav { padding:15px 0;}
	.navigation-wrap .nav-link { padding: 10px 0 !important; }
	.navigation-wrap .dropdown-toggle::after { top: 10px; }
	.navigation-wrap .dropdown-item { padding: 10px 15px;}
	
	/* ----- Home ----- */
	#hero .carousel-container { height: 60vh;}
	#hero h2 { font-size: 38px; }
	
	/* ----- Ethyl Alcohol ----- */	
	.eproduct h3 { font-size: 26px;}
	
	/* ----- Polypropylene Constuction Fibers ----- */
	.fibers-types-wrap .fibers-box { padding: 20px; }
	.cta { text-align:center; padding:30px 0}
	.cta p { font-size: 18px; margin:0 0 15px 0;}
	.cta-btn-container { text-align: center;}
	
}

/*--------------------------------------------------------------
# Media - max-width 575px
--------------------------------------------------------------*/
@media only screen and (max-width: 575px) { 
	#footer { padding: 15px 0;}
	#footer .credits { float: left; }
	p { line-height: 24px; margin-bottom: 10px; font-size:14px;}
	.mb-20 { margin-bottom:10px;}
	
	.inner-page { margin-top: 65px;}
	.section-title h3 { font-size: 12px; margin: 0 0 5px 0}
	.section-title h2 { font-size: 26px; line-height: 36px;}
	.section-title { padding-bottom: 5px;}
	
	#hero h2 { font-size:34px; margin-bottom: 20px;}
	#hero .carousel-container { height: 70vh; }
	#hero .btn-get-started { margin-top:0; }
	
	.eproduct h3 { font-size: 22px; margin-bottom:25px;}
	.eproduct .aws-product { margin-top: 15px; }
	.eproduct .aws-product img { height: 25px; }
	.eproduct .ep-img { margin-bottom:20px;}

	.table1_list td, .table2_list td { padding: 7px 10px; font-size:14px;}
	.b_list li { padding: 5px 0 5px 16px; line-height: 24px; font-size: 14px;}	
	.b_list li:before {top: 14px; }
	
	.n_list li { line-height:24px; font-size:14px}
	
	.contact_info li { font-size:14px; padding: 0 0 15px 28px}
	.contact_info li i { top:2px; }
	.add2 { padding-top:50px;}
	.contact_info li.address span { font-size: 13px; }

}

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