html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1rem;
font-family: 'Raleway', sans-serif;
font-size: 16px;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/***************************/
html{
font-size: 14px;
overflow-x: hidden;
scroll-behavior: smooth;
}
body{
color: #212121;
/* overflow-x: hidden;*/
}
p{
line-height: 30px;
color: #202020;
}
button:focus,
.btn:focus{
outline: none;
box-shadow: none;
}
a:hover{
text-decoration: none;
}
.scroll-adjust{
height: 0;
opacity: 0;
position: absolute;
top: -150px;
}
.pageloader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../images/page-loader.gif) 50% 50% no-repeat rgb(249, 249, 249);
opacity: .8;
display: none;
}
/* width */
::-webkit-scrollbar{
width: 5px !important;
height: 5px !important;
}
/* Track */
::-webkit-scrollbar-track{
background: #eaeaea;
border: 1px solid #eaeaea;
}
/* Handle */
::-webkit-scrollbar-thumb{
background: #8dd7e7;
border: 1px solid #8dd7e7;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
background: #73cee2;
border: 1px solid #73cee2;
}
/*****/
/*****************/
/*.navbar-light .navbar-toggler{
margin-right: 15px;
border-color: rgb(0 0 0 / 0.25);
}*/
header{
position: absolute;
top: 0px;
left: 0;
right: 0;
width: 100%;
padding-right: 0px !important;
z-index: 2;
background-color: #fff;
transition-duration: 1s;
-webkit-transition-duration: 1s;
box-shadow: 0px 0px 7px #e5e5e5;
}
header.fixed-top{
position: fixed;
background-color: #fff;
}
header .navbar .navbar-brand{
max-width: 120px;
margin-right: 7%;
}
header .navbar .navbar-brand img{
float: left;
width: 100%;
}
header .navbar{
padding: 20px 0px 20px 0px;
}
header .navbar li{
display: inline-block;
float: left;
padding: 0px 18px;
}
header .navbar li .nav-link{
font-size: 16px;
color: #443f36;
font-weight: 600;
text-transform: uppercase;
padding: 15px 0px !important;
}
/**/
header .nav-rgt{
float: right;
}
header .nav-rgt ul li{
display: inline-block;
float: left;
background-color: transparent;
}
header .nav-rgt ul li:hover,
header .nav-rgt ul li.active{
background-color: transparent;
}
header .nav-rgt ul li a{
position: relative;
float: left;
width: 24px;
height: 24px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url(../images/cart.png);
padding: 15px;
padding-right: 0px;
}
header .nav-rgt ul li a span.count {
position: absolute;
padding: 5px;
background-color: #443f36;
color: #fff;
font-size: 11px;
border-radius: 50%;
top: 15px;
left: 10px;
width: 24px;
height: 24px;
text-align: center;
}
.navbar-toggler{
padding-right: 0px;
}
.navbar-toggler-icon{
background-image: url(../images/menu-icon.png);
width: 25px;
height: 18px;
}
/**/
section.banner{
position: relative;
float: left;
width: calc(100% - 275px);
z-index: 1;
overflow: hidden;
margin-top: 112px;
height: calc(100vh - 112px);
}
section.banner .banner-inn{
position: relative;
float: left;
width: 100%;
height: calc(100vh - 112px);
}
section.banner .banner-inn .center{
position: absolute;
top: 36%;
left: 0;
transform: translateY(-50%);
}
section.banner .banner-inn .center h2{
float: left;
width: 100%;
font-size: 70px;
font-weight: 500;
line-height: 65px;
color: #202020;
margin-bottom: 15px;
}
section.banner .banner-inn .center h2 em{
font-weight: 700;
}
section.banner .banner-inn .center p{
float: left;
width: 100%;
max-width: 50%;
}
section.banner .banner-inn .center .btn{
float: left;
width: 100%;
max-width: 380px;
color: #fff;
background-color: #7ED2E4;
text-transform: uppercase;
clear: both;
font-size: 16px;
line-height: 16px;
padding: 12px;
margin-top: 20px;
}
/*section.banner:before{
content: "";
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
background-color: rgb(126 210 228 / 0.25);
}
*/
section.banner:before{
content: "";
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
background-image: url(../images/homeback-bg.png);
background-size: cover;
background-position: left bottom;
background-repeat: no-repeat;
}
section.banner:after{
content: "";
position: absolute;
right: 5%;
top: 0;
width: 40%;
/*width: 50%;*/
height: 100%;
background-image: url(../images/homefront-bg.png);
background-size: contain;
background-position: 50% 60%;
background-repeat: no-repeat;
}
/**/
section.banner .brand-scroll{
position: absolute;
left: 0;
bottom: 0;
width: 50%;
background-color: #fff;
}
section.banner .brand-scroll .heading {
position: relative;
float: left;
width: 100%;
padding: 0px 30px 15px 0px;
}
section.banner .brand-scroll .heading h3 {
font-size: 20px;
font-weight: 600;
color: #707070;
text-transform: uppercase;
}
section.banner .brand-scroll .exp-btn{
position: absolute;
right: 30px;
bottom: 15px;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
line-height: 16px;
padding: 0px;
padding-left: 5px;
padding-right: 40px;
background-image: url(../images/exp-arrow.png);
background-size: 25px 16px;
background-position: right;
background-repeat: no-repeat;
}
section.banner .brand-scroll .cntnt{
position: relative;
float: left;
width: 100%;
padding-right: 30px;
}
section.banner .brand-scroll .home-brand-carousel{
position: relative;
float: left;
width: 100%;
}
section.banner .brand-scroll .home-brand-carousel .owl-stage{
display: flex;
}
section.banner .brand-scroll .home-brand-carousel .owl-nav,
section.banner .brand-scroll .home-brand-carousel .owl-dots{
display: none;
}
section.banner .brand-scroll .item{
position: relative;
float: left;
width: 100%;
}
section.banner .brand-scroll .item .item-inn{
position: relative;
float: left;
width: 100%;
background-color: #fff;
box-shadow: 0px 3px 5px rgb(0 0 0 / 10%);
border-radius: 10px;
padding: 10px;
text-align: center;
margin: 5px 0px;
}
section.banner .brand-scroll .item .item-inn a{
position: relative;
float: left;
width: 100%;
/*padding-top: 60%;*/
}
/*section.banner .brand-scroll .item .item-inn figure{
position: relative;
float: left;
width: 100%;
padding-top: 60%;
}
section.banner .brand-scroll .item .item-inn h4{
width: 100%;
text-align: center;
font-size: 14px;
line-height: 20px;
float: left;
color: #202020;
margin-top: 10px;
}
section.banner .brand-scroll .item .item-inn img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
width: auto;
max-height: 100%;
max-width: 100%;
}*/
section.banner .brand-scroll .item .item-inn figure{
position: relative;
float: left;
width: 100%;
padding-top: 70%;
}
section.banner .brand-scroll .item .item-inn h4{
width: 100%;
text-align: center;
font-size: 14px;
line-height: 20px;
float: left;
color: #202020;
margin-top: 10px;
}
section.banner .brand-scroll .item .item-inn img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
width: auto;
max-width: 100%;
max-height: 100%;
}
/**/
section.home-pro{
position: relative;
float: left;
width: calc(275px);
z-index: 1;
overflow: hidden;
margin-top: 112px;
height: calc(100vh - 112px);
}
section.home-pro .heading{
position: relative;
float: left;
width: calc(275px);
padding: 30px 60px 15px 30px;
}
section.home-pro h3{
font-size: 20px;
font-weight: 600;
color: #707070;
text-transform: uppercase;
}
section.home-pro .cntnt{
position: relative;
float: left;
width: calc(100vh - 86px - 59px); /*vh - header - heading*/
height: 275px;
transform: rotate(90deg); /*to right*/
transform-origin: 0% 0%; /*left top*/
/* background-color: #f5b4b4;*/
margin-left: 275px;
padding: 60px 150px 30px 0px; /*r b l t*/
}
section.home-pro .cntnt .inside{
position: relative;
float: left;
width: 100%;
height: 100%;
}
section.home-pro .cntnt .home-pro-carousel,
section.home-pro .cntnt .home-pro-carousel .owl-stage-outer,
section.home-pro .cntnt .home-pro-carousel .owl-stage-outer .owl-stage,
section.home-pro .cntnt .home-pro-carousel .owl-stage-outer .owl-stage .owl-item{
height: 100%;
}
section.home-pro .cntnt .item{
position: relative;
float: left;
width: 100%;
height: 100%;
padding: 5px;
}
section.home-pro .cntnt .item-inn{
position: absolute;
left: calc(-275px + 30px + 60px + 10px + 5px); /*cntnt + padding-left + padding-right + decreased 10px + padding top*/
width: calc(275px - 30px - 60px - 10px); /*cntnt - padding-left - padding-right - cntnt_padding*/
height: calc(calc(100vh - 86px - 59px - 150px - 20px) / 2); /*cntnt - cntnt_padding of both divided by 2*/
transform: rotate(-90deg); /*to left*/
transform-origin: 100% 0%; /*right top*/
/* background-color: #000;*/
box-shadow: 0px 3px 5px rgb(0 0 0 / 0.10);
border-radius: 10px;
padding: 15px;
text-align: center;
}
section.home-pro .owl-theme .owl-nav,
section.home-pro .owl-theme .owl-dots{
display: none;
}
/*section.home-pro .cntnt .item-inn img{
width: auto;
max-height: calc(100% - 50px);
max-width: 100%;
margin: 0 auto;
margin-bottom: 9px;
}
section.home-pro .cntnt .item-inn h4{
position: absolute;
left: 0;
bottom: 15px;
width: 100%;
color: #707070;
font-size: 16px;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}*/
section.home-pro .cntnt .item-inn figure{
position: relative;
float: left;
width: 100%;
padding-top: 70%;
}
section.home-pro .cntnt .item-inn h4{
width: 100%;
text-align: center;
font-size: 14px;
line-height: 20px;
float: left;
color: #202020;
margin-top: 10px;
}
section.home-pro .cntnt .item-inn img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
width: auto;
max-width: 100%;
max-height: 100%;
}
section.home-pro .exp-btn{
position: absolute;
left: 30px;
bottom: 50px;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
line-height: 16px;
padding: 0px;
padding-left: 5px;
padding-right: 40px;
background-image: url(../images/exp-arrow.png);
background-size: 25px 16px;
background-position: right;
background-repeat: no-repeat;
}
/**/
section.about-pge{
position: relative;
float: left;
width: 100%;
z-index: 1;
overflow: hidden;
margin-top: 112px;
min-height: calc(100vh - 112px);
}
section.about-pge .about-inn{
position: relative;
float: left;
width: 61%;
min-height: calc(100vh - 112px);
}
/*section.about-pge .about-inn .center{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
max-height: calc(100vh - 86px);
overflow: auto;
padding-top: 40px;
}*/
section.about-pge .about-inn .center{
position: relative;
float: left;
width: 100%;
padding: 50px 0px;
}
section.about-pge .about-inn .center h3{
font-size: 24px;
line-height: 24px;
color: #7ed2e4;
margin-bottom: 20px;
}
section.about-pge .about-inn .center h2{
font-size: 42px;
font-weight: 500;
line-height: 45px;
color: #202020;
margin-bottom: 20px;
}
section.about-pge .about-inn .center h6{
font-size: 18px;
font-weight: 500;
line-height: 18px;
color: #86C879;
margin-bottom: 20px;
}
section.about-pge .about-inn .center p{
float: left;
width: 85%;
text-align: justify;
}
section.about-pge:before{
content: "";
position: absolute;
right: 0;
top: 0;
width: 40%;
height: 100%;
background-image: url(../images/homeback-bg.png);
background-size: cover;
background-position: left bottom;
background-repeat: no-repeat;
}
section.about-pge:after{
content: "";
position: absolute;
right: 0;
top: 0;
width: 40%;
height: 100%;
background-image: url(../images/about-img-side.png);
background-size: 85%;
background-position: center;
background-repeat: no-repeat;
}
section.about-pge .misvis{
position: relative;
float: left;
width: 85%;
text-align: center;
margin-top: 20px;
}
section.about-pge .misvis .col-sm-6,
section.about-pge .misvis .col-sm-12{
margin-bottom: 15px;
}
section.about-pge .misvis .mission,
section.about-pge .misvis .vision{
position: relative;
float: left;
width: 100%;
height: 100%;
padding: 15px;
box-shadow: 0px 3px 5px rgb(0 0 0 / 0.10);
}
section.about-pge .misvis figure{
position: relative;
float: left;
width: 100%;
margin-bottom: 20px;
}
section.about-pge .misvis figure img{
width: 40px;
}
section.about-pge .misvis h4{
font-size: 16px;
color: #7ED2E4;
margin-bottom: 15px;
}
section.about-pge .misvis .mission p,
section.about-pge .misvis .vision p{
width: 100%;
}
/**/
section.norm-pge{
position: relative;
float: left;
width: 100%;
margin-top: 112px;
height: calc(100vh - 112px);
overflow: hidden;
}
section.norm-pge .inner-head{
position: relative;
float: left;
width: 100%;
padding: 30px 0px;
}
section.norm-pge .inner-head .head{
position: relative;
float: left;
width: 100%;
}
section.norm-pge .inner-head h3{
font-size: 24px;
line-height: 24px;
color: #7ed2e4;
line-height: 50px;
}
section.norm-pge .inner-head .srch{
position: relative;
float: right;
width: 100%;
max-width: 500px;
}
section.norm-pge .inner-head .srch input{
width: 100%;
height: 50px;
outline: none !important;
border: none;
box-shadow: 0px 2px 5px rgb(0 0 0 / 0.10);
border-radius: 15px;
padding: 10px 20px;
padding-right: 50px;
}
section.norm-pge .inner-head .srch .srch-btn{
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
background-image: url(../images/search.png);
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
opacity: 0.25;
}
section.prdct-dtls-pge .inner-head h3{
margin-bottom: 0px !important;
}
section.norm-pge .prdct-sec{
position: relative;
float: left;
width: 100%;
height: calc(100% - 110px);
background-color: #fafafa;
padding: 20px 0px;
}
section.norm-pge .prdct-sec .wrapper,
section.norm-pge .prdct-sec .container-fluid,
section.norm-pge .prdct-sec .row,
section.norm-pge .prdct-sec .row .col-md-12{
height: 100%;
}
section.norm-pge .prdct-sec aside{
position: relative;
float: left;
width: 350px;
height: 100%;
background-color: #fff;
}
section.norm-pge .prdct-sec aside .head{
position: relative;
float: left;
width: 100%;
padding: 20px 30px;
border-bottom: 3px solid #E3F5F9;
}
section.norm-pge .prdct-sec aside .head h3{
font-size: 24px;
line-height: 24px;
color: #85C877;
}
section.norm-pge .prdct-sec aside form{
position: relative;
float: left;
width: 100%;
height: calc(100% - 70px);
}
section.norm-pge .prdct-sec aside .categ-list{
position: relative;
float: left;
width: 100%;
height: 100%;
padding: 20px 30px;
overflow: hidden;
overflow-y: auto;
}
section.norm-pge .prdct-sec aside .categ-list ul{
float: left;
width: 100%;
}
section.norm-pge .prdct-sec aside .categ-list ul li{
position: relative;
float: left;
width: 100%;
margin-bottom: 0px;
}
section.norm-pge .prdct-sec aside .categ-list ul li a{
font-size: 16px;
line-height: 40px;
color: #707070;
}
section.norm-pge .prdct-sec .scroll-box{
position: relative;
float: left;
width: calc(100% - 350px);
height: 100%;
overflow: hidden;
overflow-y: auto;
padding-left: 30px;
padding-right: 10px;
}
section.norm-pge .prdct-sec .scroll-box .row{
height: unset;
}
section.norm-pge .prdct-sec li{
margin-bottom: 30px;
}
section.norm-pge .prdct-sec .item{
position: relative;
float: left;
width: 100%;
height: 100%;
}
section.norm-pge .prdct-sec .item-inn{
position: relative;
float: left;
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: 0px 3px 5px rgb(0 0 0 / 0.10);
border-radius: 10px;
padding: 15px;
text-align: center;
}
section.norm-pge .prdct-sec .item-inn figure{
position: relative;
float: left;
width: 100%;
padding-top: 70%;
}
section.norm-pge .prdct-sec .item-inn h4{
width: 100%;
text-align: center;
font-size: 14px;
line-height: 20px;
float: left;
color: #202020;
margin-top: 10px;
}
section.norm-pge .prdct-sec .item-inn img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
width: auto;
max-width: 100%;
max-height: 100%;
}
/*section.norm-pge .prdct-sec .item-inn img{
width: auto;
max-height: calc(100% - 50px);
max-width: 100%;
margin: 0 auto;
margin-bottom: 9px;
}
section.norm-pge .prdct-sec .item-inn h4{
position: absolute;
left: 15px;
right: 15px;
bottom: 15px;
color: #707070;
font-size: 16px;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}*/
/**/
section.norm-pge .dtls-sec{
position: relative;
float: left;
width: 100%;
height: calc(100% - 100px);
background-color: #fafafa;
padding: 20px 0px;
}
section.norm-pge .dtls-sec .wrapper,
section.norm-pge .dtls-sec .container-fluid,
section.norm-pge .dtls-sec .row,
section.norm-pge .dtls-sec .col-md-12{
height: 100%;
}
section.norm-pge .dtls-sec .pro-img{
position: relative;
float: left;
width: 100%;
width: 450px;
box-shadow: 0px 3px 5px rgb(0 0 0 / 10%);
}
section.norm-pge .dtls-sec figure{
position: relative;
float: left;
width: 100%;
padding-top: 80%;
background-color: #fff;
border-radius: 10px;
text-align: center;
}
section.norm-pge .dtls-sec figure img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
max-width: 88%;
max-height: 88%;
}
section.norm-pge .dtls-sec .cntnt{
position: relative;
float: left;
width: calc(100% - 450px);
height: 100%;
overflow-y: auto;
padding: 10px 10px 10px 5%;
}
section.norm-pge .dtls-sec .cntnt h2{
font-size: 30px;
font-weight: 600;
line-height: 36px;
color: #202020;
margin-bottom: 20px;
text-transform: uppercase;
}
section.norm-pge .dtls-sec .cntnt h5{
font-size: 18px;
font-weight: 500;
line-height: 18px;
margin-bottom: 20px;
}
section.norm-pge .dtls-sec .cntnt ul{
position: relative;
float: left;
width: 100%;
margin-top: 20px;
}
section.norm-pge .dtls-sec .cntnt ul li{
display: inline-block;
float: left;
}
section.norm-pge .dtls-sec .cntnt ul li.price p{
float: left;
width: 100%;
background-color: #fff;
text-transform: uppercase;
font-size: 16px;
line-height: 16px;
color: #7ED2E4;
font-weight: 600;
padding: 15px 20px;
box-shadow: 0px 3px 5px rgb(0 0 0 / 10%);
}
section.norm-pge .dtls-sec .cntnt ul li.link .btn{
float: left;
width: 100%;
color: #fff;
background-color: #7ED2E4;
text-transform: uppercase;
font-size: 16px;
line-height: 16px;
padding: 15px 20px;
border: none;
}
section.norm-pge .dtls-sec .cntnt .similar{
position: relative;
float: left;
width: 100%;
margin-top: 30px;
}
section.norm-pge .dtls-sec .cntnt .similar .owl-stage{
display: flex;
}
section.norm-pge .dtls-sec .cntnt .similar .more-btn{
position: absolute;
right: 0;
top: 0px;
font-size: 14px;
font-weight: 500;
color: #7ed2e4;
line-height: 14px;
padding: 0;
padding-right: 15px;
}
section.norm-pge .dtls-sec .cntnt .similar .item{
position: relative;
float: left;
width: 100%;
height: 100%;
padding: 5px 0px;
}
section.norm-pge .dtls-sec .cntnt .similar .item-inn{
position: relative;
float: left;
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: 0px 3px 5px rgb(0 0 0 / 0.10);
border-radius: 10px;
padding: 15px;
text-align: center;
}
section.norm-pge .dtls-sec .cntnt .similar .item-inn img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
width: auto;
max-width: 100%;
max-height: 100%;
}
section.norm-pge .dtls-sec .cntnt .similar .item-inn h4{
width: 100%;
text-align: center;
font-size: 14px;
line-height: 20px;
float: left;
color: #202020;
margin-top: 10px;
}
section.norm-pge .dtls-sec .cntnt .similar .owl-nav,
section.norm-pge .dtls-sec .cntnt .similar .owl-dots{
display: none;
}
/**/
section.norm-pge .news-sec{
position: relative;
float: left;
width: 100%;
height: calc(100% - 110px);
background-color: #fafafa;
padding: 20px 0px;
}
section.news-pge .news-sec .wrapper,
section.news-pge .news-sec .container-fluid{
height: 100%;
}
section.news-pge .news-sec .news-inn{
position: relative;
float: left;
width: 100%;
height: 100%;
}
section.news-pge .news-center{
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
/*max-height: 540px;*/
max-height: 100%;
overflow: hidden;
overflow-y: auto;
padding-right: 15px;
}
section.news-pge .news-sec .item{
position: relative;
float: left;
width: 100%;
margin-bottom: 30px;
}
section.news-pge .news-sec .item figure{
position: relative;
float: left;
width: 100%;
height: 225px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
section.news-pge .news-sec .item figcaption{
position: relative;
float: left;
width: 100%;
border: 1px solid #f0f1f5;
padding: 15px 15px;
box-shadow: 0px 3px 5px rgb(0 0 0 / 0.10);
}
section.news-pge .news-sec .item figcaption .cap-inn{
position: relative;
float: left;
width: 100%;
max-height: 225px;
overflow: hidden;
margin-bottom: 15px;
}
section.news-pge .news-sec .item figcaption .cap-inn h2{
color: #212121;
font-size: 18px;
line-height: 30px;
font-weight: 600;
margin-bottom: 10px;
}
section.news-pge .news-sec .item figcaption h3{
float: left;
width: 100%;
color: #212121;
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-bottom: 10px;
padding-left: 18px;
background-image: url(../images/clock.png);
background-size: 12px;
background-position: left;
background-repeat: no-repeat;
}
section.news-pge .news-dtls{
position: relative;
float: left;
width: 100%;
height: calc(100% - 110px);
background-color: #fafafa;
padding: 20px 0px;
}
section.news-pge .news-dtls .wrapper,
section.news-pge .news-dtls .container-fluid,
section.news-pge .news-dtls .container-fluid .row,
section.news-pge .news-dtls .container-fluid .row div{
height: 100%;
}
section.news-pge .news-dtls figure{
position: relative;
float: left;
width: 100%;
}
section.news-pge .news-dtls figure img{
width: 100%;
}
section.news-pge .news-dtls .cntnt{
position: relative;
float: left;
width: 100%;
max-height: 100%;
overflow: hidden;
overflow-y: auto;
padding-right: 15px;
}
section.news-pge .news-dtls .cntnt h2 {
color: #212121;
font-size: 22px;
line-height: 30px;
font-weight: 600;
margin-bottom: 10px;
}
section.news-pge .news-dtls .cntnt h3 {
float: left;
width: 100%;
color: #212121;
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-bottom: 10px;
padding-left: 18px;
background-image: url(../images/clock.png);
background-size: 12px;
background-position: left;
background-repeat: no-repeat;
}
/**/
/**/
section.cntct-pge{
position: relative;
float: left;
width: 100%;
z-index: 1;
overflow: hidden;
margin-top: 112px;
min-height: calc(100vh - 112px);
}
section.cntct-pge .cntct-inn{
position: relative;
float: right;
width: 50%;
min-height: calc(100vh - 112px);
}
section.cntct-pge .cntct-inn .center{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
padding-left: 10%;
}
section.cntct-pge .cntct-inn .center h3{
font-size: 24px;
line-height: 24px;
color: #7ed2e4;
margin-bottom: 20px;
}
section.cntct-pge .cntct-inn .center h2{
font-size: 42px;
font-weight: 500;
line-height: 45px;
color: #202020;
margin-bottom: 20px;
}
section.cntct-pge .cntct-inn .center p{
float: left;
}
section.cntct-pge:before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background-image: url(../images/homeback-bg.png);
background-size: cover;
background-position: left bottom;
background-repeat: no-repeat;
}
section.cntct-pge:after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background-image: url(../images/cntct-img.png);
background-size: 82%;
background-position: center;
background-repeat: no-repeat;
}
section.cntct-pge ul{
position: relative;
float: left;
width: 100%;
margin-top: 20px;
}
section.cntct-pge ul li{
position: relative;
float: left;
width: 100%;
padding-left: 30px;
background-size: 13px;
background-repeat: no-repeat;
background-position: 5px 5px;
margin-bottom: 5px;
}
section.cntct-pge ul li.mail{
background-image: url(../images/email.png);
}
section.cntct-pge ul li.phone{
background-image: url(../images/phone.png);
}
section.cntct-pge ul li.addrs{
background-image: url(../images/location.png);
}
section.cntct-pge ul li a{
color: #202020;
}
/**/
section.brands-pge .inner-head h2{
font-size: 42px;
font-weight: 500;
line-height: 45px;
color: #202020;
max-width: 550px;
}
section.brands-pge .inner-head .srch{
margin-top: 35px;
}
section.norm-pge .brand-sec{
position: relative;
float: left;
width: 100%;
height: calc(100% - 180px);
background-color: #fafafa;
padding: 20px 0px;
}
section.norm-pge .brand-sec .wrapper,
section.norm-pge .brand-sec .container-fluid,
section.norm-pge .brand-sec .row{
height: 100%;
}
section.norm-pge .brand-sec .scroll-box{
position: relative;
float: left;
width: 100%;
height: 100%;
overflow: hidden;
overflow-y: auto;
padding-right: 10px;
}
section.norm-pge .brand-sec .scroll-box .row{
height: unset;
margin-left: -10px;
margin-right: -10px;
}
section.norm-pge .brand-sec li{
margin-bottom: 20px;
padding: 0px 10px;
}
section.norm-pge .brand-sec .item{
position: relative;
float: left;
width: 100%;
height: 100%;
}
section.norm-pge .brand-sec .item .item-inn{
position: relative;
float: left;
width: 100%;
background-color: #fff;
box-shadow: 0px 3px 5px rgb(0 0 0 / 10%);
border-radius: 10px;
padding: 15px;
text-align: center;
}
section.norm-pge .brand-sec .item .item-inn a{
position: relative;
float: left;
width: 100%;
/*padding-top: 60%;*/
overflow:hidden;
}
section.norm-pge .brand-sec .item .item-inn img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
width: auto;
max-width: 100%;
max-height: 100%;
}
/**/
section.brand-dtls{
overflow: hidden;
}
section.brand-dtls .inner-head .srch{
margin-top: 0px;
}
section.brand-dtls .brands-tab{
position: relative;
float: left;
width: 100%;
max-width: 365px;
background-color: #E3F5F9;
padding: 10px 10px;
border-radius: 5px;
}
section.brand-dtls .brands-tab .nav-link{
font-size: 14px;
color: #333333;
padding: 10px 15px;
background-color: transparent;
box-shadow: none;
min-width: 115px;
text-align: center;
font-weight: 500;
}
section.brand-dtls .brands-tab .nav-link.active{
color: #85C877;
background-color: #ffffff;
box-shadow: 0px 3px 5px rgb(0 0 0 / 10%);
}
section.brand-dtls .brand-inn{
position: relative;
float: left;
width: 100%;
height: calc(100% - 154px);
background-color: #fafafa;
}
section.brand-dtls .brand-inn .tab-pane{
position: relative;
float: left;
width: 100%;
height: 100%;
}
section.brand-dtls .brand-inn .tab-pane .prdct-sec,
section.brand-dtls .brand-inn .tab-pane .dtls-sec{
height: 100%;
}
section.brand-dtls .brand-inn .tab-pane .about-brand{
position: relative;
float: left;
width: 100%;
height: 100%;
background-color: #fafafa;
padding: 20px 0px;
}
section.brand-dtls .brand-inn .tab-pane .about-brand .wrapper,
section.brand-dtls .brand-inn .tab-pane .about-brand .container-fluid,
section.brand-dtls .brand-inn .tab-pane .about-brand .row,
section.brand-dtls .brand-inn .tab-pane .about-brand .col-md-12{
height: 100%;
}
section.brand-dtls .brand-inn .tab-pane .about-brand .brand-img{
position: relative;
float: left;
width: 100%;
width: 400px;
}
section.brand-dtls .brand-inn .tab-pane .about-brand figure{
position: relative;
float: left;
width: 100%;
padding-top: 80%;
background-color: #fff;
box-shadow: 0px 3px 5px rgb(0 0 0 / 10%);
border-radius: 10px;
text-align: center;
}
section.brand-dtls .brand-inn .tab-pane .about-brand figure img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
max-width: 90%;
max-height: 75%;
}
section.brand-dtls .brand-inn .tab-pane .about-brand .cntnt{
position: relative;
float: left;
width: calc(100% - 400px);
height: 100%;
overflow-y: auto;
padding:5% 10px 10px 5%;
}
section.brand-dtls .brand-inn .tab-pane .about-brand .cntnt h2{
font-size: 32px;
font-weight: 600;
line-height: 32px;
color: #202020;
margin-bottom: 20px;
text-transform: uppercase;
}
section.brand-dtls .brand-inn .tab-pane .about-brand .cntnt h6{
font-size: 18px;
font-weight: 500;
line-height: 18px;
color: #86C879;
margin-bottom: 20px;
}
section.brand-dtls .brand-inn .tab-pane .recipe{
position: relative;
float: left;
width: calc(100% - 350px);
height: 100%;
padding-left: 5%;
}
section.brand-dtls .brand-inn .tab-pane .recipe figure{
position: relative;
float: left;
width: 40%;
padding-top: 40%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
section.brand-dtls .brand-inn .tab-pane .recipe .cntnt{
position: relative;
float: left;
width: 60%;
padding: 20px 10px 0px 20px;
height: calc(100%);
overflow: auto;
}
section.brand-dtls .brand-inn .tab-pane .recipe .cntnt h2{
font-size: 30px;
line-height: 30px;
font-weight: 600;
margin-bottom: 25px;
}
section.brand-dtls .brand-inn .tab-pane .recipe .cntnt .steps{
position: relative;
float: left;
width: 100%;
margin: 10px 0px;
}
section.brand-dtls .brand-inn .tab-pane .recipe .cntnt h5{
font-size: 18px;
line-height: 18px;
font-weight: 600;
margin-bottom: 10px;
margin-top: 25px;
}
section.brand-dtls .brand-inn .tab-pane .recipe .cntnt h6{
font-size: 15px;
line-height: 15px;
font-weight: 600;
margin-bottom: 10px;
}
span.message{
color: #d05600;
padding-left: 40%;
background-color: #ffffff;
padding: 15px;
position: relative;
float: left;
width: 100%;
margin-bottom: 15px;
font-weight: 600;
box-shadow: 0px 3px 5px rgb(0 0 0 / 10%);
}
/*------------Nov08------------*/
section.about-pge .about-inn .center{
width: 100%;
overflow-x: hidden;
}
section.about-pge .about-inn .center .abtaccord{
float: left;
width: 95%;
}
section.about-pge .about-inn .center .card{
border: 0px;
}
section.about-pge .about-inn .center .card .card-header{
border: 1px solid rgb(115 206 226 / 50%);
background-color: #f8feff;
padding: 3px 0px;
}
section.about-pge .about-inn .center .card:last-child .card-header{
margin-bottom: 0px;
}
section.about-pge .about-inn .center .card .card-header button{
text-decoration: none;
}
section.about-pge .about-inn .center .card figure{
float: left;
margin-right: 15px;
}
section.about-pge .about-inn .center .card figure img{
float: left;
width: 35px;
}
section.about-pge .about-inn .center .card h3{
margin-bottom: 0px;
line-height: 35px;
}
@media (min-width: 0px) and (max-width: 575px) {
section.about-pge .about-inn .center .card figure img{
width: 28px;
}
section.about-pge .about-inn .center .card h3{
line-height: 28px;
}
}
section.about-pge .about-inn .center .card P{
float: none;
width: 100%;
}
section.about-pge .about-inn .center .card .card-body{
padding: 20px 10px;
}
/**/
section.norm-pge .brand-sec .item .item-inn figure{
position: relative;
float: left;
width: 100%;
padding-top: 70%;
}
section.norm-pge .brand-sec .item .item-inn h4{
width: 100%;
text-align: center;
font-size: 14px;
line-height: 20px;
float: left;
color: #202020;
margin-top: 10px;
}
.brands-carousel .owl-dots{
display: none;
}
.brands-carousel .owl-nav{
position: absolute;
bottom: -115px;
right: 0px;
}
.brands-carousel .owl-nav button{
float: left;
width: 50px;
height: 50px;
background-color: #8ad6e7 !important;
margin: 0px !important;
border-radius: 0px !important;
}
.brands-carousel .owl-nav button span{
float: left;
color: transparent;
width: 100%;
height: 100%;
background-size: 15px !important;
background-position: center !important;
background-repeat: no-repeat !important;
opacity: 0.75;
}
.brands-carousel .owl-nav button.owl-prev span{
background-image: url(../images/prev.png) !important;
}
.brands-carousel .owl-nav button.owl-next span{
background-image: url(../images/next.png) !important;
}
.brands-carousel .owl-nav button:hover span{
opacity: 1;
}
@media (min-width: 0px) and (max-width: 767px) {
.brands-carousel .owl-nav button{
width: 40px;
height: 40px;
}
}
/**/
section.cntct-pge:before,
section.cntct-pge:after{
width: 33.333%;
}
section.cntct-pge .cntct-inn{
float: left;
margin-left: 33.333%;
width: 33.333%;
}
section.cntct-pge .map-bx {
position: relative;
float: left;
width: 33.333%;
height: 100vh;
}
section.cntct-pge .map-bx .map {
position: relative;
float: left;
width: 100%;
height: 100%;
}
section.cntct-pge .map-bx .map div{
border: none !important;
}
/**/
.prdct-sec .filter{
position: relative;
float: left;
width: 100%;
padding: 15px 0px;
}
.prdct-sec .filter ul{
float: right;
text-align: right;
}
.prdct-sec .filter li{
display: inline-block;
margin-left: 15px !important;
margin-bottom: 10px !important;
}
.prdct-sec .filter li label{
color: #707070;
letter-spacing: 1px;
padding-left: 40px;
background-image: url(../images/filter.png);
background-size: contain;
background-position: 0px;
background-repeat: no-repeat;
line-height: 20px;
}
/*normal select dropdown*/
.prdct-sec .filter li.type .dropdown{
min-width: 130px;
}
.prdct-sec .filter li.country .dropdown{
min-width: 200px;
}
.prdct-sec .filter li.cut .dropdown{
min-width: 150px;
}
.prdct-sec .filter li .dropdown .btn{
width: 100%;
border: 1px solid #86c879;
padding: 5px 15px;
text-align: left;
margin: 0px !important;
text-transform: capitalize;
color: #707070;
font-size: 14px;
letter-spacing: 1px;
padding-right: 30px;
background-image: url(../images/btn-down.png);
background-position: 95%;
background-size: 10px;
background-repeat: no-repeat;
-moz-appearance: none;
-webkit-appearance: none;
}
.prdct-sec .filter li .btn.dropdown-toggle::after{
display: none;
}
.prdct-sec .filter li .dropdown-menu{
background-color: #cdeef4;
}
.prdct-sec .filter li .dropdown-menu .dropdown-item{
padding: 7px 15px;
color: #000;
}
/*end of normal select dropdown*/
/*custom select*/
.prdct-sec .filter li.type .custom-select{
min-width: 130px;
}
.prdct-sec .filter li.country .custom-select{
min-width: 200px;
}
.prdct-sec .filter li.cut .custom-select{
min-width: 150px;
}
.prdct-sec .filter .custom-select {
position: relative;
padding: 0px;
border: none;
background-color: transparent;
letter-spacing: 1px;
border: 1px solid #707070;
color: #707070;
}
.prdct-sec .filter .custom-select select {
display: none;
}
.prdct-sec .filter .select-selected {
padding: 5px 15px;
line-height: 22px;
color: #707070
}
.prdct-sec .filter .select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 8px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #707070 transparent transparent transparent;
}
.prdct-sec .filter .select-selected.select-arrow-active:after {
border-color: transparent transparent #707070 transparent;
top: 7px;
}
.prdct-sec .filter .select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
cursor: pointer;
}
.prdct-sec .filter .select-items {
position: absolute;
background-color: #707070;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
.prdct-sec .filter .select-hide {
display: none;
}
.prdct-sec .filter .select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
/**/
.about-pge .nav-tabs{
margin-bottom: 20px;
}
.about-pge .nav-tabs .nav-link{
float: left;
min-width: 130px;
border: none;
}
.about-pge .nav-tabs .nav-link:hover{
background-color: #ecf6eb;
}
.about-pge .nav-tabs .nav-link.active{
background-color: #e9f8fb;
}
.about-pge .nav-tabs .nav-link figure{
float: left;
width: 28px;
height: 28px;
margin-right: 10px;
}
.about-pge .nav-tabs .nav-link figure img{
max-width: 100%;
max-height: 100%;
}
.about-pge .nav-tabs .nav-link h4{
float: left;
color: #73cee2;
line-height: 28px;
}
.about-pge .tab-content .tab-pane{
float: right;
width: 100%;
padding-right: 10px;
}