@charset "utf-8";
/* CSS Document */


@media (max-width: 768px) {
	
				/*============================ Upper Header/ Manu css =========================*/	
	
	
	header {
		padding: 0px 20px;
	}
	.logo {
		padding: 5px 0px;
	}
	.logo img {
		max-width: 75%;
	}
	.menu-toggle {
		display: block;
		position: absolute;
		top: 20px;
		right: 35px;
		color: #000000;
		font-size: 18px;
	}
	.site-nav {
		position: absolute;
		width: 100%;
		height: auto;
		background: #000000cf;
		top: 55px;
		left: -376px;
		transition: .5s;
	}
	.site-nav.active {
		left: 0;
		top: 60px;
	}
	.site-nav ul {
		display: block;
		text-align: center;
	}
	.site-nav ul li a {
		color: #ffffff;
		font-size: 12px;
		padding: 10px 20px;
	}
	.site-nav ul li a:hover {
	}
	.site-nav ul li:hover ul {
		display: none;
	}
	.site-nav ul li.active ul {
		position: relative;
		display: block;
	}
	.site-nav ul li ul li {
		width: 100%;
	}
	
	.site-nav ul li ul li:hover ul {
		display: none;
	}
	.site-nav ul li ul li.sub-sub-menu ul {
		position: relative;
		display: block;
	}

				/*============================ Banner/Slider css =========================*/	

.carousel-caption {
	font-family: poppins;
    position: absolute;
    bottom: 0%;
    padding-top: 0px;
    padding-bottom: 30px;
}
.carousel-caption h1 {
	font-size: 10px;
    line-height: 20px;
    padding: 0px 0px;
}
.carousel-caption h1 span {
	font-size: 16px;
    display: block;
}
.carousel-caption h4 {
	font-size: 10px;
	padding: 0px 0px 10px;
}
.carousel-caption h2 {
    font-size: 12px;
    padding: 0px 0px;
}
.carousel-caption h3 {
    font-size: 18px;
	margin: 0;
}
.carousel-indicators {
	bottom: 0;
	margin-bottom: 0;
}
.carousel-indicators li {
    width: 8px;
    height: 8px;
}
.carousel-indicators .active {
    width: 8px;
    height: 8px;
}



.main-wrap {
    background-color: #ececec;
    padding: 10px 10px;
}

				/*============================ Intro Section css =========================*/
				
.intro-section {
    padding: 30px 0px 20px;
}
.intro-info {
    font-size: 18px;
    line-height: 30px;
}
				
				
				/*============================ Allience Section css =========================*/
				
.allience-section {
}
.allience-section .opacity {
    padding: 30px 0px 30px;
}
.allience-head {
    padding: 0px 0px 30px;
}
.allience-head h2 {
    font-size: 25px;
}
				
				
				/*============================ Strength Section css =========================*/
				
.strength-section {
    padding: 30px 0px 30px;
}
.strength-head {
    padding: 0px 0px 20px;
}
.strength-head h2 {
    font-size: 25px;
}
.strength-head h2 span:before, .strength-head h2 span:after {
    width: 15px;
    height: 15px;
}
.strength-head h2 span:before {
    top: -5px;
    left: -20px;
}
.strength-head h2 span:after {
    bottom: -5px;
    right: -15px;
}

.satisfaction {
    padding: 20px 0px 10px;
    height: 150px;
}
.satisfaction .data-block {
    padding: 0px 10px 0px 20px;
	float: right !important;
}
.satisfaction .data-block .head {
    font-size: 17.5px;
	text-align: center;
}
.satisfaction .data-block .info {
    font-size: 16px;
}
.satisfaction .icon {
	float: left !important;
}

.diversification {
    padding: 10px 0px 10px;
    height: 150px;
}
.diversification .data-block {
    padding: 0px 10px 0px 20px;
    float: right !important;
}
.diversification .data-block .head {
    font-size: 18px;
    text-align: center;
}
.diversification .data-block .info {
    font-size: 16px;
}
.diversification .icon {
	float: left !important;
}

.people {
    padding: 10px 0px 10px;
    height: 170px;
}
.people .data-block {
    padding: 0px 10px 0px 20px;
    float: right !important;
}
.people .data-block .head {
    font-size: 18px;
    text-align: center;
}
.people .data-block .info {
    font-size: 16px;
}
.people .icon {
	float: left !important;
}

.strength-img {
    overflow: initial;
	padding: 10px 0px 10px;
}
.strength-img:hover img {
    transform: scale(1.06);
}

.global {
    padding: 10px 0px 10px;
    height: 130px;
}
.global .data-block {
    padding: 0px 10px 0px 20px;
}
.global .data-block .head {
    font-size: 18px;
    text-align: center;
}
.global .data-block .info {
    font-size: 16px;
}

.principle {
    padding: 10px 0px 10px;
    height: 150px;
}
.principle .data-block {
    padding: 0px 10px 0px 20px;
}
.principle .data-block .head {
    font-size: 18px;
    text-align: center;
}
.principle .data-block .info {
    font-size: 16px;
}

.quality {
    padding: 10px 0px 10px;
    height: 270px;
}
.quality .data-block {
    padding: 0px 10px 0px 20px;
}
.quality .data-block .head {
    font-size: 18px;
    text-align: center;
}
.quality .data-block .info {
    font-size: 16px;
}
				
				
				/*============================ Industeies Section css =========================*/
				
.industry-section {
}
.industry-section .opacity {
    padding: 30px 0px 30px;
}
.industry-head {
    padding: 0px 0px 30px;
}
.industry-head h2 {
    font-size: 25px;
}

.grid-row {
    padding: 0px 0px 20px;
}
.grid-column {
}
.grid-img {
}
.grid-img:hover {
    transform: translateY(2px);
}
.grid-img .grid-head {
}
.grid-img .grid-head h4 {
    font-size: 7px;
    line-height: 10px;
    padding: 0px 0px 15px;
}

.cater {
}
.cater .cater-head {
    font-size: 18px;
    padding: 10px 0px 20px;
    text-align: center;
}
.cater .list {
    padding: 0px 3px;
}
.cater .list li {
    font-size: 16px;
    padding: 10px 0px;
}
.cater .list .list1:before {
    margin-right: 15px;
    font-size: 10px;
}
.cater .list .list2:before {
    margin-right: 15px;
    font-size: 10px;
}
				
				
				/*============================ Quote line Section css =========================*/

.quote-section {
    padding: 20px 0px 20px;
}
.quote-line {
    padding: 0px 0px 20px;
    float: none;
}
.quote-line h4 {
    font-size: 14px;
    line-height: 25px;
    text-align: center;
}
				
.quote-button {
    float: none;
    text-align: center;
}
.quote-button .quote-btn {
    padding: 5px 5px;
    font-size: 14px;
	margin: 0 auto;
	width: 60%;
}
.quote-button .btn-3:hover::before {
    height: 395%;
}

				
				
				/*============================ footer Section css =========================*/
				
.footer {
}
.footer .opacity {
    padding: 20px 0px 20px;
}
.foot-head {
    padding: 0px 0px 20px;
}
.foot-head h3 {
    font-size: 20px;
    text-align: center;
}
.footer .address {
    font-size: 16px;
    line-height: 25px;
    padding: 0px 0px 20px;
	text-align: center;
}
.footer .address h4 {
    font-size: 19px;
    padding: 0px 0px 10px;
    text-align: center;
}
.contact {
    padding: 0px 0px 30px;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
}
.contact span {
    left: 40px;
}
.footer .facebook {
    padding: 0px 0px 20px;
}
.footer .quick-link {
	padding: 0px 0px 20px;
}
.footer .quick-link ul {
    padding: 0px 20px;
}
.footer .quick-link ul li {
}
.footer .quick-link ul li:before {
    display: none;
}
.footer .quick-link ul li a {
    font-size: 16px;
    line-height: 30px;
	text-align: center;
}
				
				
				/*============================ About us page  css =========================*/
				
.inner-banner {
}
.inner-banner .opacity {
    padding: 30px 0px 30px;
}
.inner-banner .main-head h2 {
    font-size: 20px;
}
.abt-section {
    padding: 20px 0px 20px;
}
.abt-info {
    font-size: 18px;
    line-height: 30px;
    padding: 10px 10px 10px;
}

.vision-mission {
    padding: 20px 0px 20px;
}
.vision {
    padding: 0px 0px 10px;
}
.vision .image {
	height: 150px;
}
.vision .image .head {
    font-size: 25px;
}
.vision .info {
    font-size: 18px;
    line-height: 30px;
    padding: 20px 10px 10px;
}

.goal {
    padding: 0px 0px 10px;
}
.goal .image {
	height: 150px;
	top: -170px;
}
.goal .image .head {
    font-size: 25px;
}
.goal .info {
    font-size: 18px;
    line-height: 30px;
    padding: 10px 10px 10px;
	top: 160px;
}

.mission {
    padding: 10px 0px 0px;
}
.mission .image {
	height: 150px;
}
.mission .image .head {
    font-size: 25px;
}
.mission .info {
    font-size: 18px;
    line-height: 30px;
    padding: 20px 10px 0px;
}

.certification {
    padding: 20px 0px 20px;
}
.certificate-head {
    padding: 0px 0px 20px;
}
.certificate-head h2 {
    font-size: 25px;
}
.certificate {
}
.certificate img {
	max-width: 80%;
}

.team-section {
    padding: 20px 0px 20px;
}
.team-head {
    padding: 0px 0px 20px;
}
.team-head h2 {
    font-size: 25px;
}
.director {
    padding: 0px 0px;
    margin: 0px 0px 0px 0px;
    height: 510px;
}
.d-image {
}
.d-info {
    padding: 20px 0px;
}
.d-info .d-name {
    font-size: 20px;
    padding-bottom: 10px;
	text-align: center;
}
.d-info .d-post {
    font-size: 16px;
    padding-bottom: 10px;
	text-align: center;
}
.director-info {
    font-size: 18px;
    line-height: 30px;
    padding: 10px 15px 0px;
}
.team {
    margin: 20px 0px 20px 0px;
    height: 95px;
}
.team-image {
}
.team-info {
    padding: 10px 10px 0px;
}
.team-info .team-name {
    font-size: 20px;
    padding-bottom: 10px;
	text-align: center;
}
.team-info .team-post {
    font-size: 16px;
    padding-bottom: 0px;
	text-align: center;
}
				
				/*============================ Contact us page  css =========================*/
				
.form-section {
}
.form-section .opacity {
    padding: 30px 0px 30px;
}
.form-head {
}
.form-head h3 {
    font-size: 25px;
    padding-bottom: 20px;
}

.contact-form {
    padding: 10px 0px;
}
.form-group {
    margin-bottom: 15px;
}
.contact-form .form-horizontal .control-label {
    padding: 0px 0px 0px 20px;
	font-size: 16px;
    text-align: left;
	display: block;
}
.contact-form .form-column {
    padding: 10px 20px 5px;
}
.form-btn {
    display: initial;
    padding: 10px 30px;
    font-size: 18px;
	margin: 0;
}

.contact-details {
    margin-top: 20px;
    height: 230px;
}
.contact-add {
    font-size: 18px;
    padding: 30px 10px 0px;
}
.contact-add h4 {
    font-size: 20px;
    padding-bottom: 10px;
}

.contact-no {
    font-size: 18px;
}
.contact-no h4 {
    font-size: 20px;
}
.contact-mail {
    font-size: 18px;
}
.contact-mail h4 {
    font-size: 20px;
}
				
				
				/*============================ who we represent page  css =========================*/
				
.client-heading {
    padding: 20px 0px 20px;		
}
.client-head {
}
.client-heading h2 {
    font-size: 25px;
	padding: 0px 0px 0px;
}

.info-tab {
    padding: 20px 0px 20px;
}
.tabs-section {
    padding: 0px 0px 0px 0px;
}
.tabs-section .nav-center {
}
.tabs-section .nav-tabs {
}
.tabs-section .nav-tabs li {
}
.tabs-section .nav-tabs li a {
}
.tabs-section .nav-tabs li a img {
    max-width: 100%;
}

.tab-content {
    padding: 20px 5px 20px;
}
.tgv {
    padding: 0;
}
.tgv .logo-data {
    padding: 10px 0px 0px;
}
.client-logo {
    padding: 0px 0px 0px;
}
.client-name {
    font-size: 21px;
    line-height: 30px;
    padding: 0px 0px 10px;
}
.client-name span {
    font-size: 14px;
    display: block;
    line-height: 20px;
}
.list-title {
    font-size: 20px;
    line-height: 30px;
    padding: 30px 0px 10px;
	text-align: center;
}
.chem-list {
}
.chem-list li {
    padding: 10px 0px 10px;
    font-size: 18px;
}
.chem-list .list-icon {
    padding: 0px 0px 3px;
}
.chem-list .list-icon:before {
    margin-right: 20px;
    font-size: 16px;
}

.jubilant {
    padding: 0px 15px 0px;
}
.jubilant .logo-data {
    padding: 20px 0px 20px;
}

.rcf {
    padding: 0px 15px 0px;
}
.rcf .logo-data {
    padding: 20px 0px 20px;
}

.grasim {
    padding: 0px 15px 0px;
}
.grasim .logo-data {
    padding: 20px 0px 20px;
}

.gulshan {
    padding: 0px 15px 0px;
}
.gulshan .logo-data {
    padding: 20px 0px 20px;
}
				
				
				/*============================ who we serve page  css =========================*/	
				

.service-row-1 .img-column {
}
.service-row-1 .img-column.pull-right {
    float: right !important;
}
.service-row-1 .head-column {
    height: 146px;
}
.service-row-1 .head-column .service-heading {
    font-size: 12px;
	line-height: 20px;
}

.service-row-2 .img-column {
}
.service-row-2 .head-column {
    height: 146px;
}
.service-row-2 .head-column.pull-right {
    float: right !important;
}
.service-row-2 .head-column .service-heading {
    font-size: 12px;
	line-height: 20px;
}

.service-row-3 .img-column {
}
.service-row-3 .img-column.pull-right {
    float: right !important;
}
.service-row-3 .head-column {
    height: 146px;
}
.service-row-3 .head-column .service-heading {
    font-size: 12px;
	line-height: 20px;
}

.service-row-4 .img-column {
}
.service-row-4 .head-column {
    height: 146px;
}
.service-row-4 .head-column.pull-right {
    float: right !important;
}
.service-row-4 .head-column .service-heading {
    font-size: 12px;
	line-height: 20px;
}

.service-row-5 .img-column {
}
.service-row-5 .img-column.pull-right {
    float: right !important;
}
.service-row-5 .head-column {
    height: 146px;
}
.service-row-5 .head-column .service-heading {
    font-size: 12px;
	line-height: 20px;
}

	
}