@media only screen and (min-width: 300px) and (max-width: 992px) {
	.navigation{
		position: unset;
	}

	.navigation .navbar{
		padding: 0px !important;
	}

	.about-banner,
	.acid,
	.basic,
	.direct,
	.reactive,
	.pigments,
	.intermediates,
	.contact-banner{
		display: none;
	}

	.mobile-about-banner h3{
	    font-weight: 700;
	    font-size: 25px;
	    margin: 15px 0px;
	}

	footer .useful ul li{
	    display: inline-block;
	}

	footer .useful ul li:after {
	    content: "|";
	}

	footer .useful ul li:last-child:after {
	    content: none;
	}
}

@media only screen and (min-width: 580px) and (max-width: 992px) {
	.services,
	.features,
	.why-choose{
		padding: 40px 0px !important;
	}

	.main-services{
		padding: 0px !important;
	}

	.slider .carousel-caption{
		width: 80% !important;
		top: 20% !important;
	}

	.slider .carousel-caption h3{
	    font-size: 29px !important;
	    line-height: 31px !important;
	    font-weight: 700 !important;
	}

	.slider .carousel-caption p{
		margin-top: 20px;	
	}

	.slider .carousel-caption button{
		bottom: 13%;
	    left: 16%
	}

	.slider .carousel-control-prev{
	    right: 10% !important;
	}

	.slider .carousel-control-next, 
	.carousel-control-prev{
	    right: 5% !important;
	    font-size: 35px !important;
	    bottom: 8% !important;
	    width: 20px !important;
	    height: 20px;
	}

	.services .heading h3{
		text-align: center;
	}

	.services .heading{
		margin-bottom: 0px;
	}

	.services .para p{
		padding: 0px;
		text-align: center;
	}

	.why-choose .content p{
		margin-top: 10px;
	}

	.why-choose .card{
		margin-top: 25px;
	}

	.exp{
		right: 33%;
	}

	.features .heading h2{
		margin-top: 25px;
	}

	.contact-form{
		padding: 30px 0px;
	}

	footer{
		padding: 70px 0px 10px;
	}

	footer .logo-part{
	    height: 220px;
	    padding: 20px;
	}

	footer .logo-part h3{
		margin-top: 20px;
	    margin-bottom: 20px;
	}

	footer .useful h3{
		margin: 15px 0px 10px;
	}

	.banner1 .caption{
	    width: 100%;
	    top: 22%;
	    left: 0%;
	}

	.banner1 .caption h3{
	    line-height: 42px;
        margin-bottom: 20px;
	}

	.about .bottom-part .img-container{
		width: 18%;
	    padding: 0;
	}

	.about .bottom-part .content{
		width: 80%;
		padding-left: 15px;
	}

	.about .bottom-part .content h5{
	    font-size: 22px;
        margin-top: 20px;
	}
	.about .bottom-part {
	    padding: 15px 0px;
	}

	.contact h3{
		font-size: 25px;
	}

	.contact .card{
		margin-top: 20px;
		height: 140px;
	}

	.main-services .sidebar{
		padding: 10px 8px;
	}

	.main-services .content{
		margin: 20px 0px;
	}

	.main-services .content h2{
		margin-bottom: 10px;
	}

	.main-services .content p{
		margin-bottom: 25px;
	}

	.main-services .sidebar{
		display: none;
	}
}

@media only screen and (min-width: 300px) and (max-width: 579px) {

	.col-sm-6{
		width: 50%;
	}

	header .item .cover .header-content{
		padding: 30px;
	}

	header .item .cover .header-content h1{
	    font-size: 25px;
	}

	header .item .cover .header-content .line{
	    -webkit-clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%);
	    clip-path: polygon(0 0, 90% 0, 50% 100%, 0 100%);
	}

	.caption{
	    width: 96%;
	    top: 30%;
	    left: 2%;
	}

	.caption h3{
	    font-size: 25px;
	    line-height: 30px;
	}

	.services,
	.features,
	.why-choose{
		padding: 30px 0px !important;
	}

	.main-services{
		padding: 10px 0px !important;
	}

	.main-services .sidebar{
		display: none;
	}

	.slider .carousel-caption{
		width: 80% !important;
		top: 10% !important;
	}

	.slider .carousel-caption h3{
		font-size: 15px !important;
	    line-height: 16px !important;
	    font-weight: 700 !important;
	    display: none;
	}

	.slider .carousel-caption p{
		display: none;
	}

	.slider .carousel-caption button{
		display: none !important;
	}

	.slider .carousel-control-prev{
	    right: 10% !important;
	}

	.slider .carousel-control-next, 
	.carousel-control-prev{
		right: 2% !important;
	    font-size: 25px !important;
        bottom: -10% !important;
        width: 20px !important;
	}

	.services .nav-tabs .nav-link{
		font-size: 15px !important;
	}

	.services .heading h3{
	    font-size: 16px !important;
	    line-height: 20px !important;
	    text-align: left !important;
	}

	.services .heading {
	    margin-bottom: 10px !important;
	}

	.services .para p{
	    padding-left: 35px !important;
	}

	.why-choose .heading h3{
	    font-size: 20px !important;
	    line-height: 25px !important;
	}

	.why-choose .content p {
	    font-size: 15px;
	    line-height: 20px;
	    margin-top: 15px;
	}

	.why-choose .content ul li{
		width: 85%;
	}

	.why-choose .card{
	    margin-top: 25px;
	}

	.features img{
		width: 70%;
	}

	.exp{
		width: 130px;
	    height: 110px;
	}

	.exp h4{
	    margin-top: 24px;
	    font-size: 16px;
	    line-height: 17px;
	}

	.exp h4 span {
	    font-size: 42px;
	    margin-bottom: 0px;
	}

	.features .heading h2{
	    margin-top: 25px;
	}

	.features .heading h3{
	    font-size: 22px;
	    margin: 10px 0px;
	}

	.features .content ul li img{
		width: auto;
	}

	.get-quote .col-sm-6{
		width: 50%;
	}

	.contact-form{
		padding: 0px;
	}

	.contact-form form{
		padding: 30px 0px !important;
	}

	.contact-form .form form h3{
	    font-size: 22px;
	    line-height: 25px;
	}

	.contact-form iframe{
		margin-bottom: -7px;
	}

	footer .seo-company{
		font-size: 22px;
	}

	footer .logo-part{
		height: 270px;
	    padding: 15px;
	}

	footer .logo-part h3{
	    margin-top: 20px;
	    margin-bottom: 15px;
	}

	.banner1 .caption{
	    width: 100%;
	    top: 22%;
	    left: 0%;
	}

	.banner1 .caption h3{
		font-size: 20px;
	    line-height: 25px;
        margin-bottom: 20px;
	}

	.breadcrumb{
		padding: 0.7rem 0.5rem;
	}

	.about .float-right{
		width: 70%;
	}

	.about .bottom-part .img-container{
		width: 18%;
	    padding: 0;
	}

	.about .bottom-part .content{
		width: 80%;
		padding-left: 15px;
	}

	.about .bottom-part .content h5{
	    font-size: 22px;
        margin-top: 20px;
	}
	.about .bottom-part {
	    padding: 15px 0px;
	}

	.contact h3{
		font-size: 25px;
	}

	.contact .card{
		margin-top: 20px;
		height: 140px;
	}

	.main-services .content{
		margin-top: 10px;
	}

	.main-services .content h2{
		margin-bottom: 10px;
	}

	.main-services .content p{
		margin-bottom: 25px;
	}
}