@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');

*{
	padding: 0px;
	margin: 0px;
}





html{
	scroll-behavior: smooth;
}

.container{
	max-width: 1300px!important;
}



p, h3, h4, h5, a, label{
	font-family: 'Inter', sans-serif;
}

ul{
	list-style: none;
	margin-bottom: 0px;
}
 
a:hover{
	color: #000;
	text-decoration: none;
}
/*@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
*/

:root{
	--first-color:#DD3A27;
	--white-color:#fff;
	--black-color:#000;
	--text-color:#7C7C7C;
	--border-color:#CFCFCF;
	--light-gray:#F5F5F5;
	--light-sky:#6ec4c4;
	--orange-color:#f6aa26;
}


p{
	font-size: 15px;
}


.common-section{
	padding: 60px 0px;
	position: relative;
}


/*----------------Start-header-here-------------*/
.top-header{
	background-color: #F8F4EF;
	padding: 10px 0px;
}
.first-color{
	color: var(--first-color)!important;
}

.list-top li a{
	color: var(--black-color);
	font-size: 13px;
}
.list-top li a i{
	font-size: 17px;
}
.list-top{
	display: flex;
	align-items: center;
	gap: 30px;
}
.main-header{
	background-color: var(--light-sky);
	padding: 10px 0px;
}

.main-menu-list li .link{
	color: var(--white-color);
	font-size: 15px;
}
.logo-header img{
	width: 60px;
}


.fixed-header{
	position: fixed;
	left: 0px;
	z-index: 9999;
	top: 0px;
	width: 100%;
	transition: 0.3s ease;
    animation: header 1s 1 alternate;
}
@keyframes header{
	0% {
    transform: translateY(-100%);
	}
	100% {
	    transform: translateY(0%);
	}
}


.main-menu-list li{
	position: relative;
	transition: 0.4s ease;
}
.main-menu-list li:before{
	content: '';
	position: absolute;
	left: 0px;
	bottom: -3px;
	width: 100%;
	opacity: 0;
	height: 1.3px;
	transition: 0.4s ease;
	transform: scale(0);
	background-color: var(--white-color);
}

.main-menu-list .active:before,
.main-menu-list li:hover::before{
	opacity: 1;
	transform: scale(1.0);
	transition: 0.4s ease;
}
.bc-img-banner{
	background-image: url(../img/banner/banner-1.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 550px;
}



.bar-button i{
	font-size: 20px;
}

.phone-menu-box{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	left: -100%;
	top: 0px;
	transition: 0.3s ease;
}

.phone-menu-box-active{
	left: 0px;
}


.phone-menu-box .overlay-box{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	background-color: #00000070;
}

.inner-box{
	padding: 5px 18px;
	width: 80%;
	position: relative;
	height: 100%;
	z-index: 999;
	background-color: var(--white-color);
}
.phone-menu-box .menu-header{
	padding-bottom: 8px;
	border-bottom: 1px solid var(--light-gray);
}
.phone-menu-box .menu-header img{
	width: 50px;
}

.phone-menu-box .main-menu-list{
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
.phone-menu-box .main-menu-list li a{
	color: var(--black-color);
	display: flex;
	align-items: center;
}

.phone-menu-box .main-menu-list li .active,
.phone-menu-box .main-menu-list li a:hover{
	color: var(--first-color);
}










/*-----------------End-header-here--------------*/



/*----------Start-banner-content-here-----*/
.banner-content h4{
	text-transform: uppercase;
}

.banner-content h1{
	color: var(--white-color);
	font-weight: 800;
	font-size: 55px;
}

.common-btn .btn{
	background-color: var(--first-color);
	color: var(--white-color);
	padding: 10px 30px;
	border-radius: 6px;
	border-bottom: 3px solid var(--white-color);
}
.common-btn .btn:hover{
	background-color: var(--black-color);
	color: var(--white-color);
}

.bottom-shape-img{
	position: absolute;
	z-index: 999;
	bottom: -1px;
	left: 0px;
	width: 100%;
}
.top-shape-img{
	position: absolute;
	z-index: 99;
	top: -1px;
	width: 100%;
	left: 0px;
}





#banner-carousel .owl-nav{
	opacity: 0;
	transition: 0.3s ease;
}

.banner-carousel-section:hover #banner-carousel .owl-nav{
	opacity: 1;
	transition: 0.3s ease;
}




#banner-carousel .owl-next,
#banner-carousel .owl-prev{
	width: 40px;
	height: 40px;
	color: var(--white-color);
	background-color: var(--first-color);
	transform: translate(-50% , -50%);
	position: absolute;
	top: 50%;
	left: 4%;
}

#banner-carousel .owl-next:hover,
#banner-carousel .owl-prev:hover{
	background-color: var(--black-color);
}


#banner-carousel .owl-next:focus,
#banner-carousel .owl-prev:focus{
	outline: none;
}
#banner-carousel .owl-next{
	right: 2%;
	left: inherit;
}
.text-color{
	color: var(--text-color);
}

/*----------End-banner-content-here---------*/

/*----------Start-about-content-section--------*/
.about-content h1{
	font-weight: 800;
}

/*--------End-about-content-here--------------*/

/*----------Start-Featured-Products-section-here-----*/
.Featured-Products-section{
	background-color: var(--light-gray);
	padding: 130px 0px 150px 0px;
	min-height: 600px;
}
.site-heading h1{
	position: relative;
	font-weight: 800;
}
.site-heading h1 img{
	right: 196px;
    width: 34%;
    position: absolute;
    bottom: -5px;
}
.Products-main-box{
	position: relative;
	padding: 40px 0px;
	margin-top: 50px;
}
.Products-main-inner{
	background-color: var(--white-color);
	box-shadow: 0px 0px 10px rgb(0 0 0 /  15%);
	height: 200px;
	border-radius: 8px;
	padding: 30px 10px 30px 310px;
}
.Products-main-inner img{
	position: absolute;
	transform: translate(-50%,-50%);
	left: 144px;
	top: 50%;
}
.Products-main-inner h3{
	font-size: 17px;
}
.Products-main-inner p{
	font-size: 13px;
}
.Products-main-inner .common-btn .btn{
	padding: 7px 22px;
	font-size: 12px;
}


/*--------------End-Featured-Products-section-here-----------*/


/*--------------Start-Why-Choose-Us-section-here------------*/
.Why-Choose-Us-section .Why-Choose-Us-box{
	background-color: #394A55;
	padding: 30px;
	text-align: center;
	border-radius: 8px;
	margin-top: 30px;
}
.Why-Choose-Us-section .Why-Choose-Us-box .brush-img{
	position: absolute;
	left: 30px;
}

/*-------------End-Why-Choose-Us-section-here-------------*/

/*---------------Start-Applications-section-here---------*/
.Applications-section{
	background-color: var(--light-gray);
	padding: 130px 0px 150px 0px;
}

.Applications-section .Applications-box{
	width: 300px;
	height: 300px;
	border-radius: 100%;
	text-align: center;
	margin-top: 30px;
	background-color: var(--white-color);
	padding: 20px;
	border: 10px solid var(--first-color);
	box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
}
.Applications-section .Applications-box img{
	width: 70%;
}
.Applications-box h4 a{
	color: var(--black-color);
}
.Applications-box h4 a:hover{
	color: var(--first-color);
}

/*----------------End-Applications-section-here------------*/


/*-------------Start-stats-section-here-----------*/
/*.stats-section .stats-box{
	text-align: center;
	border-right: 1px dashed var(--text-color);
}
*/

/*------------End-stats-section-here------------*/


/*-----------start-footer-section-here---------*/
.footer-section{
	background-color: var(--orange-color);
	padding: 130px 0px 60px 0px;
}

.footer-section .footer-img{
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
}
.footer-link-list li .link{
	color: var(--white-color);
	font-size: 14px;
}
.footer-link-list li{
	margin-top: 5px;
}

.form-control:focus{
	box-shadow: none!important;
	border-color: var(--first-color);
}


.Newsletter-input .form-control{
	border-radius: 0px;
	height: 37px;
	border: none;
}

/*------------End-footer-section-here--------*/
/*---------start-about-page-here------*/
.banner-section-about{
	background-image: url(../img/banner/banner-img-top.png);
	background-size: cover;
	min-height: 270px;
	background-repeat: no-repeat;
	background-position: center;
}


.mission-vission-section .main-row{
	background-color: var(--light-gray);
	padding: 30px;
	border-radius: 80px 0px 80px 0px;
}

 .Products-section-list .Products-main-box .Products-main-inner{
 	padding: 30px 10px 30px 287px;
 }
 .Products-section-list .Products-main-box .Products-main-inner img{
 	left: 127px;
 	border: 9px solid var(--first-color);
 }



.Products-section-list .Application-box{
	border: 1px solid var(--first-color);
	transition: 0.3s ease;
}
.Products-section-list .Application-box:hover{
	margin-top: -10px;
}


.Products-section-list .Application-box .image-box img{
	height: 100%;
}


.Products-main-inner .quantity-box{
	width: 250px;
}

.Generate-Order .common-input input{
	margin-top: 0px;
	margin-bottom: 30px;
}
/*----------End-about-page-here------*/


/*-------start-Contact-link-box-here-------*/
.Contact-link-box{
	background-color: #F8F4EF;
	border-radius: 10px;
	padding: 30px;
	transition: 0.3s ease;
	margin-top: 30px;
	border: 1px solid #FFC1BA;
}

.Contact-link-box .icon-box{
	width: 90px;
	height: 90px;
	border-radius: 100px;
	padding: 10px;
	border: 6px solid #DCDCDC;
	background-color: var(--first-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.Contact-link-box .icon-box i{
	font-size: 26px;
	color: var(--white-color);
}
.Contact-link-box{
	display: flex;
	align-items: center;
	gap: 40px;
}
.media .content h4{
	font-size: 20px;
}



.inputs-box{
	background-color: #F8F4EF;
	border-radius: 10px;
	padding: 30px;
	transition: 0.3s ease;
	margin-top: 30px;
	border: 1px solid #FFC1BA;
	background-image: url(../img/shape/lines-shape.png);
	height: 526px;
}

.inputs-box h4{
	font-weight: 800;
}
.common-input .form-control{
	margin-top: 30px;
	height: 50px;
}

.common-input textarea{
	height: 177px!important;
}
.btn:focus{
	box-shadow: none!important;
}

.radio-btn .form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form label {
    display: flex;
    align-items: center;
    margin: 10px 0px 0px;
}

.input-radio:checked {
    box-shadow: 0px 0px 0px 4px var(--first-color);
    background-color: var(--first-color);
}

.form .input-radio {
    box-shadow: 0px 0px 0px 1px #6d6d6d;
    font-size: 3em;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    border: 4px solid #fff;
    background-clip: border-box;
    border-radius: 50%;
    appearance: none;
    transition: background-color 0.3s, box-shadow 0.3s;
}
/*-------------End-Contact-link-box-here------*/

.side-bar-menu-box{
	background-color: #F8F4EF;
    border-radius: 10px;
    padding: 20px;
    transition: 0.3s ease;
    border: 1px solid #FFC1BA;
}

.list-sidebar-menu li .link{
	background-color: #EAEAEA;
	padding: 14px 30px;
	border-radius: 10px;
	display: block;
	margin-bottom: 20px;
	color: var(--black-color);
	transition: 0.3s ease;
}
.list-sidebar-menu li .active,
.list-sidebar-menu li .link:hover{
	background-color: var(--first-color);
	color: var(--white-color);
}

.For-Business-Enquiry{
	background-color: var(--first-color);
	border-radius: 10px;
	padding: 20px;
	margin-top: 20px;
}

.For-Business-Enquiry h2{
	font-weight: 800;
	font-size: 36px;
}

.white-btn .btn{
	background-color: var(--white-color);
	color: var(--first-color);
	border-radius: 0px;
}

.Application-box{
	background-color: var(--white-color);
	border-radius: 8px;
	padding: 10px;
	height: 100%;
	box-shadow: 0px 0px 10px rgb(0 0 0 / 15%);
}
.Application-main-box{
	margin-bottom: 30px;
}

.Application-box h4{
	font-size: 17px;
	font-weight: 700;
	margin-top: 10px;
}


.color-shade-box{
	background-color: var(--light-gray);
	border-radius: 15px;
	padding: 20px 10px;
	margin-top: 40px;
}
.color-shade-box .main-box {
	margin-bottom: 30px;
} 


/*----------Start-login-page-section-here----------*/
.login-page-section{
	background-image: linear-gradient(to top, #fcc185, #96d5e7);
	height: 100vh;
	width: 100%;
	position: relative;
	padding: 70px 0px;
	display: flex;
    align-items: center;
}
.login-color-shape{
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
}
.login-color-shape img{
	width: 100%;
	height: 100%;
}
.Distributer-login-box{
	background-color: var(--white-color);
	padding: 0px 30px 30px 30px;
	border-radius: 10px;
	box-shadow: 0px 0px rgb(0 0 0 / 15%);
}
.Distributer-login-box h1{
	font-weight: 700;
}

.Distributer-login-box .common-input input{
	background-color: #cccccc1a;
}

.login-page-section .brush-png-download{
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 350px;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fff!important;
}
.table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, .02) !important;
}
.table tr td p{
	margin-bottom: 0px;
}
.table-custom{
	display: inline-table;
}

/*---------------End-login-page-section-here--------------*/

.logout-box{
	display: flex;
    align-items: center;
    justify-content: end;
}

.icons-right .icon-list li {
    display: inline-block;
    position: relative;
}
.icon-list li {
    margin-left: 7px;
    width: 92%;
}
.Message-red-icon {
    padding: 4px 4px;
    border-radius: 100px;
    background-color: #06bea0;
    position: absolute;
    bottom: 0px;
    left: 25px;
}
.Messages-dropdown-box {
    box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.1);
    height: auto;
    background-color: #fff;
    display: none;
    padding: 10px 0px;
    left: -50px!important;
    top: 15px !important;
}
.icons-right .icon-list li a {
    text-decoration: none;
    cursor: pointer;
    display: flex;
}
.icons-right .icon-list li .top-img-head {
    width: 30px;
    border-radius: 50px;
    box-shadow: 0px 3px 15px rgb(0, 0, 0, 0.2);
}
.icons-right .icon-list li span p {
    color: #4e5968;
    font-size: 16px;
    font-weight: 400;
}
.icons-right .icon-list li {
    display: inline-block;
    position: relative;
}

.user-chat-box {
    display: flex;
    flex-direction: row;
}
.icons-right .icon-list li a {
    text-decoration: none;
    cursor: pointer;
}
.icons-right .icon-list li i {
    font-size: 20px;
    color: #555556;
    position: relative;
    margin: 0px 10px;
}
.user-chat-box .user-chat-content p {
    font-weight: 600 !important;
    font-size: 13px !important;
}

.Messages-dropdown-box ul .logout-list {
    margin-top: 7px;
    padding-top: 10px;
    border-top: 1px solid #f1f2f3;
}
.Messages-dropdown-box .user-chat-list ul li:hover{
	background-color: #f1f2f3;
}

.user-chat-box a:hover span p,
.user-chat-box a:hover span i{
	color: red;
}

.dropdown-toggle::after{
	display: none;
}
.table{
	box-shadow: 0px 0px 10px rgb(0 0 0 / 15%);
	border: 1px solid #dee2e6;
}
.table .thead-light th{
	color: #ffffff!important;
    background-color: #6ec4c4!important;
}

.table thead th{
	border-bottom-width: 1px!important;
}