@import url(https://fonts.googleapis.com/css2?family=Saira:wght@100;200;300;400;500;600;700;800;900&display=swap);
:root {
--red: #c6261d;
--black: #363636;
--dark: #292929;
--dark-red: #b0140b;
--liner: linear-gradient(to right, #951317, #d71a20);
--light: #eef1f6;
--font: 'Saira', sans-serif;
--liner2: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
color: var(--black);
font-family: var(--font);
font-size: 14px;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font);
color: #0c0c0c;
margin: 0 0 20px
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: #0c0c0c
}
p a {
color: #363636;
width: auto;
display: inline-block
}
p a:hover {
text-decoration: underline;
outline: 0
}
p {
letter-spacing: normal;
margin-bottom: 15px;
line-height: 26px;
font-size: 15px;
color: #363636
}
a {
color: #7f7f7f;
text-decoration: none;
outline: 0;
display: block
}
a:active,
a:focus,
a:hover {
outline: 0;
text-decoration: none
}
img {
max-width: 100%;
width: auto;
height: auto
}
iframe {
border: 0;
width: 100%
}
blockquote {
padding: 0;
border: 0
}
label {
color: #f70606;
display: block;
font-weight: 400;
margin: 0
}
textarea {
height: 100px !important
}
input,
select,
textarea {
height: 40px;
line-height: 40px;
padding: 0 15px;
font-size: 14px !important
}
.form-group {
position: relative;
margin-bottom: 15px
}
.form-control::-moz-placeholder {
color: #555
}
.form-control:focus::-moz-placeholder {
color: var(--red)
}
.form-control:focus {
border-color: var(--red);
box-shadow: none
}
h2 {
font-size: 26px;
font-weight: 700
}
h3 {
font-size: 20px;
margin: 0 0 30px;
font-weight: 700
}
h3 span {
padding: 0 10px 0 0;
position: relative
}
h4 {
font-size: 16px;
font-weight: 700;
margin: 0;
text-transform: capitalize;
padding: 15px 0;
color: #fff
}
h5 {
text-transform: capitalize
}
.int_infosidebar {
width: 60px;
background: #f5f5f5;
position: fixed;
left: 0;
height: 950px;
z-index: 9;
top: -100px
}
.int_infosidebar .siderbar_social {
margin: 180px 0 15px 0;
text-align: center
}
.int_infosidebar .siderbar_social ul {
margin: 0;
padding: 0;
padding-top: 20px
}
.int_infosidebar .siderbar_social ul li {
margin-bottom: 5px
}
.int_infosidebar .siderbar_social ul li a {
padding-bottom: 5px
}
.int_infosidebar .siderbar_social ul li svg {
height: 13px;
width: 13px
}
.int_infosidebar .siderbar_social ul li>a {
-webkit-transition: all .1s;
-moz-transition: all .1s;
-ms-transition: all .1s;
-o-transition: all .1s;
transition: all .1s;
color: var(--black)
}
.int_infosidebar .siderbar_contact {
text-align: center;
padding: 30px 0 22px;
border-top: 1px solid #3333333b;
padding: 20px 0;
justify-content: center;
display: flex
}
.int_infosidebar .siderbar_contact a {
color: var(--black);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
font-size: 15px;
font-weight: 600
}
.int_infosidebar .siderbar_contact a svg {
transform: rotate(90deg);
margin-bottom: 5px;
width: 16px;
height: 15px;
vertical-align: baseline
}
.int_infosidebar .siderbar_contact a:hover {
color: var(--red)
}
.int_infosidebar .siderbar_social ul li a {
-webkit-transition: all .1s;
-moz-transition: all .1s;
-ms-transition: all .1s;
-o-transition: all .1s;
transition: all .1s
}
.int_infosidebar .siderbar_social ul li a:hover {
color: var(--red)
}
.header {
float: left;
width: 100%;
background: white;
position: relative;
z-index: 9;
}
.header .container-fluid {
position: relative
}
.header .int_logo {
padding: 5px 0
}
.header.stricky-fixed .int_logo {
padding: 6px 10px
}
.header .int_logo img {
max-width: 240px
}
.header.stricky-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
animation-name: fadeInDown;
animation-duration: 1s;
animation-fill-mode: both;
background: #fff;
padding: 0
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
transform: none
}
}
.navigation .nav-header {
display: none;
padding: 12px 20px
}
.navigation .navbar button {
float: right;
width: 40px;
height: 40px;
background: 0 0;
border: 0;
outline: 0;
color: #fff;
font-size: 25px;
border-radius: 0;
display: inline-block;
text-align: center;
line-height: 40px;
position: relative;
z-index: 99;
padding: 5px;
position: relative;
transform: rotate(0);
transition: .5s ease-in-out;
cursor: pointer
}
.navigation .navbar button span {
display: block;
position: absolute;
height: 3px;
width: 70%;
background: var(--red);
border-radius: 9px;
opacity: 1;
left: 15%;
transform: rotate(0);
transition: .25s ease-in-out
}
.navigation .navbar button span:first-child {
top: 8px
}
.navigation .navbar button span:nth-child(2),
.navigation .navbar button span:nth-child(3) {
top: 18px
}
.navigation .navbar button span:nth-child(4) {
top: 28px
}
.navigation .navbar button.open span:first-child {
top: 18px;
width: 0%;
left: 50%
}
.navigation .navbar button.open span:nth-child(2) {
transform: rotate(45deg)
}
.navigation .navbar button.open span:nth-child(3) {
transform: rotate(-45deg)
}
.navigation .navbar button.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%
}
.navigation .menu {
display: block
}
.navigation .menu ul {
float: left;
width: 100%;
margin: 0;
padding: 0;
text-align: right;
display: block
}
.navigation .menu ul li {
display: inline-block;
position: relative
}
.navigation .menu ul li a {
padding: 22px 9px 20px;
display: block;
color: var(--dark);
transition: all .3s ease;
font-size: 14px;
background: 0 0;
font-weight: 500;
vertical-align: middle
}
.navigation .menu ul li.active a,
.navigation .menu ul li:hover a {
color: var(--red);
background: 0 0
}
.navigation .menu ul li ul.cs-dropdown {
top: 100%;
left: 0;
text-align: left
}
.navigation .menu ul li ul.cs-dropdown li:last-child {
border: 0
}
.navigation .menu ul li ul.cs-dropdown li ul.cs-dropdown {
left: 100%;
margin-top: -36px
}
.navigation .menu ul li ul.cs-dropdown li ul.cs-dropdown li ul.cs-dropdown {
left: -100%;
margin-top: -31px
}
.navigation .menu ul li ul.cs-dropdown {
position: absolute;
width: 230px;
display: none;
z-index: 99999;
box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .4);
background: #f5f5f5;
margin: 0;
padding: 0;
transition: all .3s ease
}
.navigation .menu ul li ul.cs-dropdown.mg {
width: 550px
}
.navigation .menu ul li:hover ul.cs-dropdown {
display: block
}
.navigation .menu ul li:hover ul.cs-dropdown li ul.cs-dropdown {
display: none;
transition: all .3s ease;
width: 200px
}
.navigation .menu ul li ul.cs-dropdown li:hover ul.cs-dropdown {
display: block
}
.navigation .menu ul li ul.cs-dropdown li {
display: block;
padding: 0;
border-bottom: 1px solid #ddd;
width: 100%;
border-right: 1px solid #ddd
}
.navigation .menu ul li ul.cs-dropdown li:last-child a {
border-bottom: 0
}
.navigation .menu ul li ul.cs-dropdown li:last-child a:after {
display: none
}
.navigation .menu ul li ul.cs-dropdown li a:hover {
color: #fff;
background: var(--red)
}
.navigation .menu ul li ul.cs-dropdown li:hover a {
color: #fff;
background: var(--red)
}
.navigation .menu ul li ul.cs-dropdown li:hover ul.cs-dropdown li a {
background: #fff;
color: #333
}
.navigation .menu ul li ul.cs-dropdown li:hover ul.cs-dropdown li a:hover {
color: #fff;
background: var(--red)
}
.navigation .menu ul li ul.cs-dropdown li a {
color: #333;
font-size: 14px;
padding: 7px 15px;
position: relative;
display: block;
text-transform: capitalize;
font-weight: 500;
background: #f5f5f5;
transition: all .3s ease
}
.navigation ul li.cs-submenu a button {
border: 0;
background: 0 0;
outline: 0;
padding: 0;
margin: 0 0 0 3px;
color: var(--dark)
}
.navigation ul li.cs-submenu a button svg {
width: 12px;
height: 12px;
transition: .3s
}
.navigation ul li.cs-submenu:hover svg {
transform: rotateZ(180deg);
color: var(--red)
}
.navigation ul li.cs-submenu:hover ul.cs-dropdown li.cs-submenu svg {
color: #242424
}
.navigation ul li.cs-submenu ul.cs-dropdown li a button {
float: right;
color: #333
}
.navigation ul li.cs-submenu ul.cs-dropdown li a button svg {
transform: rotateZ(-90deg)
}
.navigation ul li.cs-submenu ul.cs-dropdown li.cs-submenu:hover svg {
color: #fff
}
.navigation .navbar {
display: none;
padding: 12px 0;
margin: 0
}
.home_slider {
float: left;
width: 100%;
margin: 0;
padding: 0;
position: relative;
display: block;
overflow: hidden
}
.homeSlider .sliderItem {
position: relative;
z-index: 1;
padding: 0;
position: relative;
overflow: hidden;
color: #fff;
width: calc(100% - 60px);
margin-left: auto
}
.sec-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .25);
z-index: 1
}
.homeSlider .sliderItem .caption {
position: absolute;
top: 52%;
transform: translateY(-50%);
left: 60px;
z-index: 2
}
.caption .subTitle_1 {
font-size: 17px;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--red);
margin: 0;
position: relative;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .5s, visibility .5s;
-o-transition: opacity .5s, visibility .5s;
transition: opacity .5s, visibility .5s;
font-weight: 800;
left: 4px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8)
}
.caption .subTitle_1 span {
font-size: 80px;
text-transform: uppercase;
font-weight: 900;
color: rgba(255, 255, 255, .2);
letter-spacing: 12px;
position: absolute;
left: 10px;
right: 0;
top: -57px;
z-index: -1;
text-shadow: none
}
.caption .sliderTitle_1 {
color: #fff;
font-weight: 700;
font-size: 60px;
line-height: normal;
margin: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .5s, visibility .5s;
-o-transition: opacity .5s, visibility .5s;
transition: opacity .5s, visibility .5s
}
.caption .sliderTitle_2 {
font-size: 55px;
color: #fff;
font-weight: 600;
line-height: 55px;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .5s, visibility .5s;
-o-transition: opacity .5s, visibility .5s;
transition: opacity .5s, visibility .5s;
margin-bottom: 20px
}
.caption .sliderTitle_2 .banner_span1 {
color: var(--red);
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8)
}
.caption p {
color: #fff;
margin-bottom: 22px;
font-weight: 300;
font-size: 18px;
margin-bottom: 15px;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .5s, visibility .5s;
-o-transition: opacity .5s, visibility .5s;
transition: opacity .5s, visibility .5s
}
.homeSlider .swiper-slide-active .caption .subTitle_1 {
-webkit-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
opacity: 1;
visibility: visible;
animation: fadeInDown 1s linear;
-webkit-animation: fadeInDown 1s linear;
-ms-animation: fadeInDown 1s linear;
-moz-animation: fadeInDown 1s linear;
-o-animation: fadeInDown 1s linear
}
.homeSlider .swiper-slide-active .caption .sliderTitle_1 {
-webkit-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
opacity: 1;
visibility: visible;
animation: fadeInRight 1s linear;
-webkit-animation: fadeInRight 1s linear;
-ms-animation: fadeInRight 1s linear;
-moz-animation: fadeInRight 1s linear;
-o-animation: fadeInRight 1s linear
}
.homeSlider .swiper-slide-active .caption .sliderTitle_2 {
-webkit-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
opacity: 1;
visibility: visible;
animation: fadeInLeft 1s linear;
-webkit-animation: fadeInLeft 1s linear;
-ms-animation: fadeInLeft 1s linear;
-moz-animation: fadeInLeft 1s linear;
-o-animation: fadeInLeft 1s linear
}
.homeSlider .swiper-slide-active .caption p {
opacity: 1;
visibility: visible;
animation: fadeInRight 1s linear;
-webkit-animation: fadeInRight 1s linear;
-ms-animation: fadeInRight 1s linear;
-moz-animation: fadeInRight 1s linear;
-o-animation: fadeInRight 1s linear
}
.readMore_1,
.readMore_1:focus {
min-width: 140px;
height: 50px;
line-height: 50px;
display: inline-block;
outline: 0;
border: none;
cursor: pointer;
text-align: center;
text-transform: uppercase;
font-size: 14px;
color: #fff;
background: var(--red);
position: relative;
z-index: 1;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .5s;
transition-duration: .5s;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .5s, visibility .5s;
-o-transition: opacity .5s, visibility .5s;
transition: opacity .5s, visibility .5s
}
.readMore_1:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #333;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0% 10% 0;
transform-origin: 0% 10% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out
}
.readMore_1:hover:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
}
.btn_caret {
height: 50px;
line-height: 51px;
background: #b0140b;
display: inline-block;
padding: 0 12px;
position: absolute;
top: 0;
margin-left: 18px
}
.readMore_1:hover {
color: #fff;
background: #555
}
.homeSlider .swiper-slide-active .caption .readMore_1 {
opacity: 1;
visibility: visible;
animation: fadeInUp 1s ease;
-webkit-animation: fadeInUp 1s linear;
-ms-animation: fadeInUp 1s linear;
-moz-animation: fadeInUp 1s linear;
-o-animation: fadeInUp 1s linear
}
.homeSlider .swiper-button-next,
.homeSlider .swiper-button-prev {
width: 45px;
height: 45px;
text-align: center;
line-height: 55px;
line-height: 0;
position: absolute;
top: auto;
bottom: 25px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
color: var(--dark);
border: 0;
outline: 0;
background: 0 0;
border-radius: 0;
z-index: 9;
background: #fff
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 12px;
font-weight: 600
}
.homeSlider .swiper-button-prev {
right: 85px;
left: auto
}
.homeSlider .swiper-button-next {
right: 30px;
left: auto
}
.homeSlider .swiper-button-next:hover,
.homeSlider .swiper-button-prev:hover {
background: var(--red);
border-color: var(--red);
color: #fff
}
.marqueeSection {
float: left;
width: 100%;
padding: 10px 0 10px;
margin: 0;
background: #fff;
}
.marqueeSection .container {
overflow: hidden;
}
.FeaturedTitle {
float: left;
width: 100%;
color: var(--red);
font-size: 24px;
font-weight: 700;
display: block;
text-align: left;
position: relative;
padding: 10px 0;
background: #fff;
position: relative;
z-index: 1;
}
.marqueeSection .swiper-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.marqueeSection .swiper-wrapper {
transition-timing-function: linear !important;
position: relative;
}
.panelSlider .swiper-wrapper {
justify-content: center;
}
.marqueeSection .swiper-slide {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
width: auto;
position: relative;
overflow: hidden;
height: 50px;
padding: 0;
}
.marqueeSection .swiper-slide img {
max-width: 145px;
max-height: 100%;
}
.welcomeSection {
float: left;
width: 100%;
margin: 0;
position: relative;
padding: 60px 0;
background: url(../images/bg/abt-bg.webp) no-repeat;
background-position: center;
background-size: cover;
z-index: 1
}
.welcomeSection::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: rgba(243, 243, 243, .9)
}
.welcomeSection .welcomeImg {
float: right;
max-width: 540px;
width: 100%;
margin: 0 0 20px 20px
}
.welcomeSection .welcomeImg .pattern {
height: 100%;
width: 100%
}
.bg-repeat {
background-size: auto;
background-repeat: repeat
}
.imago {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-webkit-transition: all .8s;
-o-transition: all .8s;
transition: all .8s;
-webkit-transition-delay: .3s;
-o-transition-delay: .3s;
transition-delay: .3s
}
.imago.animated {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
.welcomeSection .welcomeImg .pattern {
height: 100%;
width: 100%;
opacity: .7
}
.welcomeSection .welcomeImg .years-exp {
position: relative;
height: 100%;
width: 100%
}
.welcomeSection .welcomeImg .years-exp .exp-text {
position: absolute;
bottom: 5px;
left: -13px;
padding: 10px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
background: #fff
}
.welcomeSection .welcomeImg .years-exp .exp-text .yearNumber {
font-size: 60px;
line-height: 1;
display: inline-block;
position: relative;
z-index: 2;
color: var(--red);
margin: 0;
font-weight: 600
}
.welcomeSection .welcomeImg .years-exp .exp-text .yearNumber:after {
content: '';
width: 95px;
height: 95px;
background: url(../images/rot-img.png) no-repeat;
background-position: center;
background-size: contain;
position: absolute;
right: -120px;
top: -85px;
z-index: -1;
animation: spin 9s infinite linear;
-webkit-animation: spin 9s infinite linear
}
.welcomeSection .welcomeImg .years-exp .exp-text .yearNumber::before {
content: 'SKF';
width: 95px;
height: 95px;
position: absolute;
right: -120px;
top: -85px;
z-index: -1;
font-size: 16px;
letter-spacing: 1px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
margin-top: 1px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .5)
}
.welcomeSection .welcomeImg .years-exp .exp-text .yText {
font-size: 16px;
margin: 0 0 10px;
font-weight: 600
}
.mb-20 {
margin-bottom: 20px !important
}
.welcomeSection p {
margin-bottom: 10px;
font-size: 15px;
line-height: 28px;
color: var(--black);
text-align: justify
}
.welcomeSection h2,
.welcomeSection h3 {
margin: 0;
color: var(--red);
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: 1.25;
margin-bottom: 10px
}
.achievement .readMore_2,
.achievement .readMore_2:focus {
min-width: 170px !important;
}
.category-sec {
float: left;
width: 100%;
margin: 0;
position: relative;
padding: 50px 0 40px;
background: #fff
}
.c_bx {
border: 1px solid #eee;
text-align: center;
margin-bottom: 25px;
background: #f6f6f6
}
.c_bx .img_bx {
position: relative;
overflow: hidden
}
.c_bx .img_bx::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
z-index: 1;
opacity: 0;
transition: .4s
}
.c_bx:hover .img_bx::before {
opacity: 1
}
.c_bx .img_bx img {
width: 100%;
object-fit: cover;
object-position: center;
max-height: 200px;
transition: .4s linear
}
.c_bx:hover .img_bx img {
transform: scale(1.08)
}
.c_bx .des {
font-size: 13px;
color: var(--dark);
padding: 10px 0;
font-weight: 500;
transition: .4s;
margin: 0
}
.c_bx:hover .des {
color: var(--dark-red)
}
.sec_bx {
text-align: center;
position: relative;
max-width: 900px;
margin: 0 auto;
margin-bottom: 25px
}
.sec_bx .sec_h {
font-size: 25px;
font-weight: 600;
color: var(--dark)
}
.sec_bx .sec_h span {
color: var(--red)
}
.sec_bx p {
font-size: 15px;
font-weight: 400;
color: #5a5a5a;
margin-bottom: 0
}
.title_1 {
margin: 0;
color: var(--red);
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 1.25;
margin-bottom: 10px
}
.readMore_2,
.readMore_2:focus {
min-width: 140px;
height: 50px;
line-height: 50px;
display: inline-block;
outline: 0;
border: none;
cursor: pointer;
text-align: center;
text-transform: uppercase;
font-size: 14px;
color: #fff;
background: var(--red);
position: relative;
z-index: 1;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: .5s;
transition-duration: .5s
}
.readMore_2:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #333;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0% 10% 0;
transform-origin: 0% 10% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out
}
.readMore_2:hover:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66)
}
.readMore_2:hover {
color: #fff;
background: #555
}
.portfolio {
float: left;
width: 100%;
position: relative;
margin: 0;
padding: 0
}
.portfolio.full-bg {
position: relative;
padding-left: 60px
}
.portfolio.full-bg .cluom {
height: 90vh;
padding: 0;
position: relative;
z-index: 2;
border-right: 1px solid rgba(255, 255, 255, .3);
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s
}
.portfolio.full-bg .cluom.current {
background: rgba(0, 0, 0, .3)
}
.portfolio.full-bg .cluom:hover .info {
color: inherit
}
.portfolio.full-bg .cluom:hover .info:after {
height: 100%
}
.portfolio.full-bg .cluom.current .info:after {
height: 100%
}
.portfolio.full-bg .cluom:hover .more {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
.portfolio.full-bg .cluom .info {
padding: 30px 20px 20px;
color: #fff;
position: relative;
z-index: 2;
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
overflow: hidden
}
.portfolio.full-bg .cluom .info:after {
content: '';
position: absolute;
top: 0;
left: -2%;
width: 104%;
height: 0;
background: var(--dark);
z-index: -1;
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s
}
.portfolio.full-bg .cluom .info .portfolioName {
font-size: 11px;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 10px;
color: #fff;
font-family: var(--font)
}
.portfolio.full-bg .cluom .info .portfolioTitle {
font-size: 21px;
color: #fff;
text-transform: capitalize;
font-weight: 600
}
.portfolio.full-bg .cluom .info .portfolioTitle a {
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .5)
}
.portfolio.full-bg .cluom.current .info .portfolioName {
color: #fff
}
.portfolio.full-bg .cluom.current .info .portfolioTitle a {
color: var(--red)
}
.portfolio.full-bg .cluom .more {
position: absolute;
bottom: 50px;
right: 25px;
left: 0;
margin: 0 auto;
color: #fff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
-webkit-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
text-align: center
}
.portfolio.full-bg .bg-img,
.portfolio.full-bg .glry-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.portfolio.full-bg .glry-img {
overflow: hidden
}
.portfolio.full-bg .glry-img .bg-img {
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
opacity: 0;
-webkit-transition: all .7s;
-o-transition: all .7s;
transition: all .7s;
background-size: cover;
background-position: center center
}
.portfolio.full-bg .glry-img .bg-img.current {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1
}
.services_feature {
float: left;
width: 100%;
margin: 0;
padding: 50px 0 40px;
background: #f1f1f1
}
.services_feature .counter-bx img {
max-width: 70px;
margin-bottom: 15px
}
.services_feature .counter-bx .title {
font-size: 25px;
font-weight: 700
}
.h2_title_1 {
font-size: 30px;
font-weight: 700;
color: var(--red);
position: relative;
margin-bottom: 40px;
text-align: center
}
.h2_title_1:after {
background: var(--dark);
bottom: -10px;
content: "";
height: 3px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 50px
}
.achievement {
float: left;
width: 100%;
margin: 0;
padding: 50px 0;
background: #fff
}
.vd_Bx {
position: relative;
margin-bottom: 25px;
overflow: hidden;
border: 1px solid #eee;
border-radius: 12px;
}
.vd_Bx::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .0);
z-index: 1;
transition: .4s
}
.vd_Bx .video-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: var(--liner);
border-radius: 100%
}
.vd_Bx .video-btn svg {
height: 20px;
width: 20px
}
.vd_Bx img {
width: 100%;
object-fit: cover;
object-position: center;
transition: .4s linear
}
.vd_Bx:hover img {
transform: scale(1.05)
}
.vd_Bx:hover::before {
background: rgba(0, 0, 0, .3)
}
.gallery_page .vd_Bx {
margin-bottom: 0;
border: 0
}
.gallery_item_info2 {
color: #222;
font-size: 16px;
font-weight: 500;
margin-bottom: 25px;
padding: 12px;
text-align: center;
}
.electricVehicle {
float: left;
width: 100%;
margin: 0;
padding: 40px 0 20px;
background: #fff;
overflow: hidden
}
.electricVehicle.bg-light {
background: #f1f1f1 !important
}
.electricVehicle .c_bx .img_bx img {
width: 100%;
height: auto;
max-height: 300px
}
.electricVehicle .c_bx .des {
font-size: 16px
}
.title_2 {
padding: 0 0 0;
margin: 0;
float: left;
width: 100%;
text-align: center;
margin-bottom: 40px;
position: relative;
font-weight: 700;
color: #333;
font-size: 27px;
font-style: normal;
line-height: 1.25
}
.title_2:after {
bottom: -10px;
content: "";
height: 3px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 50px;
background: var(--dark)
}
.title_2 span {
color: var(--red)
}
.ourBest {
float: left;
width: 100%;
position: relative
}
.bestItem {
overflow: hidden;
text-align: center;
border: 1px solid #eee
}
.bestItem .image img {
width: 100%
}
.bestItem:hover .bestItem_info h3 a {
color: var(--red)
}
.bestItem .bestItem_info .readMore_2 {
margin-left: -30px;
height: 45px;
line-height: 45px
}
.bestItem .bestItem_info .btn_caret {
height: 45px;
line-height: 44px
}
.ourBest .swiper-button-next,
.ourBest .swiper-button-prev {
line-height: 0;
position: absolute;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 27px;
height: 45px;
padding: 0;
transform: translate(0, -50%);
cursor: pointer;
color: var(--red);
border: 0;
outline: 0;
background: #fff;
z-index: 9;
transition: .3s;
pointer-events: all
}
.ourBest .swiper-button-prev {
left: -1px;
border-radius: 0 2px 2px 0
}
.ourBest .swiper-button-next {
right: -1px;
border-radius: 2px 0 0 2px
}
.ourBest .swiper-button-next:hover,
.ourBest .swiper-button-prev:hover {
background: var(--red);
color: #fff;
border-color: var(--red)
}
#ourBest .owl-dots {
position: absolute;
bottom: -50px;
left: 0;
right: 0;
margin: 0 auto
}
#ourBest .owl-dots span {
background: #ddd;
width: 21px;
height: 21px;
border: 6px solid #050708;
border-radius: 0;
outline: 1px solid transparent
}
#ourBest .owl-dots .active span {
border-color: #c4261c
}
.btn-curve:hover {
background: #111;
border-color: #000;
color: #fff
}
.chooseVehicle {
float: left;
background: #f8f8f8;
display: block;
position: relative;
margin-bottom: 20px
}
.chooseVehicle:active,
.chooseVehicle:focus,
.chooseVehicle:hover {
background: #fff;
-webkit-box-shadow: 0 5px 32px rgb(0 0 0 / 10%);
box-shadow: 0 5px 32px rgb(0 0 0 / 10%)
}
.chooseVehicle .topInfo {
padding: 25px
}
.chooseVehicle .topInfo .title3 {
font-size: calc(14px + 8 * (100vw / 1920));
-webkit-transition: .3s;
-o-transition: .3s;
color: #222;
text-transform: uppercase;
transition: .3s;
margin: 0 0 5px
}
.chooseVehicle .topInfo .title3 .all_btns {
float: right;
color: #fff;
font-size: 16px
}
.chooseVehicle .topInfo span {
font: normal 300 12px/1.1 Oswald;
color: #666;
text-transform: uppercase
}
.chooseVehicle .image {
display: block;
position: relative;
padding: 0 10px
}
.chooseVehicle .image svg {
position: absolute;
top: 10px;
right: 20px;
z-index: 9
}
.chooseVehicle:hover .image:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .7);
color: #fff;
content: url("data:image/svg+xml;charset=utf-8,");
display: flex;
align-items: center;
justify-content: center;
font-size: 30px
}
.chooseVehicle .vehicleInfo {
float: left;
width: 100%;
margin: 0;
padding: 0
}
.chooseVehicle .vehicleInfo .listInfo {
list-style: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
position: relative;
padding: 25px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd
}
.chooseVehicle .vehicleInfo .listInfo li {
text-align: center
}
.chooseVehicle .vehicleInfo .listInfo li+li {
margin-left: 30px;
padding-left: 30px;
border-left: 1px solid #ddd
}
.chooseVehicle .vehicleInfo .listInfo li .title {
font: normal 600 16px/1.1 Oswald;
margin-bottom: 10px;
color: #222;
text-transform: uppercase;
display: block
}
.chooseVehicle:hover .topInfo .title3 {
color: var(--red)
}
.chooseVehicle .vehicleInfo .listInfo li .value {
font: normal 400 16px/1.1 Oxygen;
color: #777
}
.chooseVehicle .vehicleInfo .specifications {
display: block;
position: relative;
padding: 25px 25px 5px
}
.chooseVehicle .vehicleInfo .specifications ul {
list-style: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 0
}
.chooseVehicle .vehicleInfo .specifications ul li {
-webkit-box-pack: start;
-ms-flex-pack: start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: flex-start;
width: 100%;
max-width: 50%;
margin-bottom: 25px;
align-items: center
}
.chooseVehicle .vehicleInfo .specifications ul li .icon {
-webkit-box-flex: 0;
-ms-flex: 0 0 16px;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex: 0 0 16px;
align-items: center;
justify-content: center;
width: 16px;
height: 16px
}
.chooseVehicle .vehicleInfo .specifications ul li .specificationsDesc {
padding-left: 10px
}
.chooseVehicle .vehicleInfo .specifications ul li .specificationsDesc .title {
font: normal 300 14px/1.1 Oswald;
margin-bottom: 5px;
color: #222;
text-transform: uppercase;
display: block
}
.chooseVehicle .vehicleInfo .specifications ul li .specificationsDesc .value {
font: normal 400 13px/1.1 Oxygen;
-o-text-overflow: ellipsis;
overflow: hidden;
color: #777;
text-overflow: ellipsis;
white-space: nowrap
}
.friendlyNature {
float: left;
width: 100%;
display: block;
position: relative;
padding: 100px 0 100px
}
.friendlyNature_img {
display: block;
margin: 0 auto
}
.friendlyNature_info {
display: block;
position: relative
}
.friendlyNature_info::before {
background: url(../images/decor-logo.svg);
display: block;
position: absolute;
top: -130px;
top: -2.77vw;
left: 310px;
left: 16.1vw;
width: 468px;
width: 24.4vw;
height: 181px;
height: 9.43vw;
content: ''
}
.friendlyNature_title {
display: block;
position: relative;
margin-bottom: 25px
}
.friendlyNature_title span {
font: normal 700 18px/normal Oswald;
display: block;
margin-bottom: 10px;
color: var(--red);
text-transform: uppercase
}
.friendlyNature_title .title11 {
margin: 0;
color: #000;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 1.25;
text-transform: uppercase
}
.friendlyNature_content .marginTop {
margin-top: 40px !important
}
.friendlyNature_block {
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-box-align: start;
-ms-flex-align: start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: flex-start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
align-items: center;
justify-content: center
}
.friendlyNature_block .icon {
-webkit-box-flex: 0;
-ms-flex: 0 0 60px;
flex: 0 0 60px;
width: 60px;
height: 60px
}
.friendlyNature_block .icon img {
width: 60px;
height: 60px
}
.friendlyNature_blockTitle {
font: normal 700 16px/1.63 Oswald;
margin: 0;
color: #222;
text-align: left;
text-transform: uppercase;
font-size: calc(12px + 4 * (100vw / 1920));
padding-left: 12px
}
.testimonials-area {
float: left;
width: 100%;
margin: 0;
padding: 60px 0;
position: relative;
background: url(../images/bg/tes_bg.webp) no-repeat bottom;
background-size: cover;
background-attachment: fixed;
z-index: 1
}
.testimonials-area:before {
position: absolute;
right: 0;
display: block;
content: "";
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: -1
}
.testimonials-area .section-heading {
position: relative;
z-index: 1;
margin-top: 50px;
margin-bottom: 50px
}
.testimonials-area .section-heading span {
color: var(--red);
font-size: 20px;
margin-bottom: 10px;
font-weight: 600;
display: inline-block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3)
}
.testimonials-area .section-heading h3 {
font-size: 30px;
text-transform: capitalize;
margin-bottom: 15px;
color: #fff
}
.testimonials-area .section-heading p {
line-height: 24px;
font-size: 16px;
max-width: 600px;
margin: 0 auto;
color: #fff
}
.testimonials {
width: 100%;
margin: 0;
padding: 0;
overflow: hidden
}
.section-heading .heading {
color: #fff;
font-weight: 700;
font-size: 37px;
line-height: 47px
}
.testimonials_bx {
border: 1px solid var(--black);
padding: 30px;
position: relative;
z-index: 1
}
.testimonials_bx::before {
content: '“';
position: absolute;
z-index: -1;
top: 0;
left: 0;
font-size: 250px;
color: var(--dark-red);
opacity: .15;
line-height: 250px
}
.border-box {
background: #fff;
padding: 30px
}
.testimonials_bx .title {
font-size: 15px;
color: var(--red);
letter-spacing: 2px;
font-weight: 700;
font-style: italic
}
.testimonials_bx .test-bx .cmt {
color: #666;
margin-bottom: 10px
}
.testimonials_bx .test-bx .name {
color: var(--dark);
font-weight: 500
}
.testimonials_bx .test-bx .des {
color: var(--dark-red);
font-weight: 500
}
.testimonials_bx .sub-heading {
font-size: 28px;
margin-bottom: 10px;
font-weight: 700;
color: var(--dark)
}
.homeBlog {
float: left;
width: 100%;
padding: 50px 0;
margin: 0;
background: #eee
}
.homeBlog .title_2 {
color: var(--red)
}
.singleBlog {
float: left;
width: 100%;
margin: 0;
padding: 0;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-moz-transition: all .2s;
-o-transition: all .2s;
-webkit-transition: all .2s;
transition: all .2s;
margin-bottom: 15px
}
.singleBlog a {
display: block
}
.singleBlog .image {
background-position: center;
background-size: cover;
overflow: hidden;
aspect-ratio: 89/55;
}
.singleBlog .image img {
display: block;
width: 100%;
aspect-ratio: 89/55;
object-fit: cover;
object-position: center;
}
.singleBlog .entry {
display: table;
width: 100%;
height: 80px;
background: #fff;
padding: 10px 15px;
position: relative
}
.singleBlog .entry .date-wrapper {
width: 55px;
display: table-cell;
vertical-align: middle
}
.singleBlog .entry .date-wrapper .date {
width: 50px;
height: 60px;
z-index: 99;
z-index: 99;
padding: 7px 0;
text-align: center;
border-right: 1px solid #ccc;
color: var(--dark);
font-weight: 600
}
.singleBlog .entry .date-wrapper .date span {
display: block;
font-size: 11px;
line-height: 12px
}
.singleBlog strong {
font-weight: 600
}
.singleBlog .blogTitle a {
color: var(--black);
display: table-cell;
vertical-align: middle;
padding-left: 10px;
margin: 0;
text-transform: none;
font-size: 18px;
line-height: 25px;
font-weight: 600
}
.singleBlog:hover .blogTitle a {
color: var(--red)
}
.singleBlog .showMore {
background-color: #fff;
position: absolute;
padding: 0 15px 15px 15px;
left: 0;
top: 100%;
width: 100%;
-moz-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-moz-transition: all .2s;
-o-transition: all .2s;
-webkit-transition: all .2s;
transition: all .2s;
text-align: center
}
.singleBlog:hover .showMore {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1)
}
.singleBlog:hover {
position: relative;
color: initial;
-moz-transform: translate3d(0, -20px, 0);
-ms-transform: translate3d(0, -20px, 0);
-o-transform: translate3d(0, -20px, 0);
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0)
}
.singleBlog .read-more {
background: var(--red);
text-align: center;
padding: 10px;
font-weight: 600;
color: #fff;
border-radius: 2px;
transition: .4s all;
transform: scale(0)
}
.singleBlog:hover .read-more {
transform: scale(1)
}
.singleBlog .read-more:hover {
color: var(--red);
background: var(--dark)
}
.webpule_quote {
float: left;
width: 100%;
background: #282d32;
display: block;
overflow: hidden;
padding: 15px 0;
border-top: 1px solid #333
}
.banner-contact {
float: right;
display: flex;
align-items: center
}
.banner-contact span {
color: #fff;
font-weight: 700;
font-size: 20px;
margin-right: 20px;
display: inline-block
}
.banner-content h4 {
float: left;
margin-bottom: 0;
color: #fff;
font-size: 20px;
max-width: 600px;
line-height: 32px;
text-align: left;
padding: 7px 0
}
.call-us {
color: #fff;
font-weight: 700;
font-size: 20px;
margin-right: 20px;
display: inline-block
}
.call-us svg {
display: inline-block;
width: 22px;
height: 22px;
text-align: center;
line-height: 24px
}
.call-us:hover {
color: var(--red)
}
.banner-content .readMore_2 .btn_caret {
margin-left: 14px
}
.footer_area {
float: left;
width: 100%;
position: relative;
background: #212529;
padding-top: 50px;
overflow: hidden
}
.footer_area img.footer_shape {
position: absolute;
right: 0;
top: 65px
}
.footer_area .footer_widget .widget_title {
color: var(--red);
text-transform: capitalize;
text-align: left;
padding: 0 0;
font-size: 22px;
font-weight: 700;
margin-bottom: 20px
}
.footer_area .footer_widget p {
font-size: 15px;
color: #fff;
margin-bottom: 10px;
text-align: justify
}
.footer_area .footer_widget .flex_widget_links {
display: flex;
align-items: flex-start
}
.footer_area .footer_widget .flex_widget_links .link {
float: left;
width: 100%;
margin: 0;
padding: 0
}
.footer_area .footer_widget .flex_widget_links .link li {
display: block;
line-height: 22px;
margin-bottom: 10px
}
.footer_area .footer_widget .flex_widget_links .link li a {
display: block;
line-height: 22px;
color: #fff;
font-size: 15px
}
.footer_area .footer_widget .flex_widget_links .link li a:hover {
color: var(--red)
}
.footer_area .footer_widget.question {
padding-right: 0
}
.footer_area .footer_widget .address {
display: flex;
align-items: center
}
.footer_area .footer_widget .question_bx {
margin-bottom: 15px;
float: left;
width: 100%
}
.footer_area .footer_widget .question_bx svg {
color: var(--red);
margin-top: 5px;
width: 24px;
height: 24px;
margin-right: 10px;
float: left;
min-width: 24px
}
.footer_area .footer_widget .question_bx .address_place,
.footer_area .footer_widget .question_bx .email,
.footer_area .footer_widget .question_bx .number {
line-height: 15px
}
.footer_area .footer_widget .question_bx p,
.footer_area .footer_widget .question_bx p a {
color: #fff;
font-size: 16px;
display: inline-block;
line-height: 22px;
display: flex;
align-items: center;
margin-bottom: 0
}
.footer_area .footer_widget .question_bx .number a {
font-size: 16px;
line-height: 32px
}
.footer_area .footer_widget .question_bx p a:hover {
color: var(--red);
text-decoration: none
}
.footer_area .footer_widget .question_bx h4 {
font-size: 15px;
font-weight: 500;
color: #fff;
line-height: 30px;
padding: 0;
margin: 0;
text-align: left
}
.footer_area .footer_widget .question_bx span a {
color: #fff;
display: inline-block
}
.footer_area .footer_widget .question_bx span a:focus,
.footer_area .footer_widget .question_bx span a:hover {
color: var(--red)
}
.footer_area .footer_widget .question_bx:last-child {
margin-bottom: 0
}
ul.social {
float: left;
margin: 0;
padding: 0
}
ul.social li {
margin: 0 0 0 3px;
display: inline-block
}
ul.social li a {
transition: background .4s ease-in-out;
text-align: center;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 1px
}
ul.social li a svg {
color: #fff;
width: 15px;
height: 15px;
margin: 0;
padding: 0
}
ul.social li.facebook a {
background: #3c5b9b
}
ul.social li.twitter a {
background: #359bed
}
ul.social li.linkedin a {
background: #027ba5
}
ul.social li.youtube a {
background: #f70000
}
ul.social li.instagram a {
background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%)
}
.footer_area .copyright {
border-top: 1px solid rgba(255, 255, 255, .05);
padding: 15px 0 5px 0;
margin-top: 35px;
color: #fff;
text-align: center
}
.footer_area .copyright a {
color: var(--red);
display: inline-block
}
.footer_area .copyright p {
color: #fff;
font-size: 16px
}
.footer_area .copyright p a {
color: #fff
}
.text-right {
text-align: right;
font-size: 16px
}
.footer_area .copyright .footer_social {
display: flex;
align-items: center;
justify-content: flex-end
}
.footer_area .copyright .footer_social li {
margin-left: 57px
}
.footer_area .copyright .footer_social li:first-child {
margin-left: 0
}
.footer_area .copyright .footer_social li a {
color: #fff;
font-size: 12px;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
display: inline-block
}
.footer_area .footer_widget .question_bx .address_place,
.footer_area .footer_widget .question_bx .email,
.footer_area .footer_widget .question_bx .number {
line-height: 15px
}
.progress-wrap {
position: fixed;
bottom: 30px;
right: 30px;
height: 48px;
width: 48px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
z-index: 100;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .4s linear;
-o-transition: all .4s linear;
transition: all .4s linear
}
.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
.progress-wrap::after {
position: absolute;
content: url("data:image/svg+xml;charset=utf-8,");
text-align: center;
font-weight: 900;
color: var(--red);
left: 2px;
top: 2px;
text-decoration: none;
height: 45px;
background: #282d32;
border-radius: 100%;
width: 45px;
cursor: pointer;
line-height: 55px;
z-index: 1;
-webkit-transition: all .4s linear;
-o-transition: all .4s linear;
transition: all .4s linear
}
.progress-wrap svg path {
fill: none
}
.progress-wrap svg.progress-circle path {
stroke: var(--red);
stroke-width: 4;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .4s linear;
-o-transition: all .4s linear;
transition: all .4s linear
}
.whatapp_btn {
background: #01e675;
width: 50px;
height: 50px;
color: #fff;
position: fixed;
left: 5px;
bottom: 90px;
cursor: pointer;
z-index: 999;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease-in-out
}
.whatapp_btn svg {
width: 24px;
height: 24px
}
.whatapp_btn:focus,
.whatapp_btn:hover {
background: #01e675;
color: #fff
}
#whatsapp .modal-dialog {
margin-top: 15%
}
.send_enquiry {
background: #fff;
border-radius: 4px;
bottom: 30px;
color: #fff;
display: table;
height: 50px;
left: 5px;
min-width: 50px;
position: fixed;
text-align: center;
z-index: 9999;
transition: all .2s linear;
background: var(--red);
display: flex;
align-items: center;
justify-content: center
}
.send_enquiry svg {
width: 24px;
height: 24px;
line-height: 50px
}
.send_enquiry:hover {
color: #fff;
padding: 0 20px
}
.send_enquiry:focus {
color: #fff
}
.send_enquiry span {
display: table-cell;
vertical-align: middle;
font-size: 16px;
letter-spacing: -15px;
opacity: 0;
line-height: 50px;
transition: all .5s;
text-transform: uppercase
}
.send_enquiry:hover span {
opacity: 1;
letter-spacing: 1px;
padding-left: 10px
}
.modal-content {
border-radius: 0
}
.modal-header {
padding: 0 15px;
background: var(--red);
color: #fff;
border-radius: 0
}
.modal-header h5 {
text-align: left;
font-size: 18px;
line-height: 18px;
color: #fff
}
.modal-header h6 {
text-align: left;
font-size: 18px;
line-height: 18px;
color: #fff
}
.modal-header .modal-title {
text-align: left;
font-size: 18px;
line-height: 18px;
color: #fff;
padding: 15px 0;
text-transform: initial;
letter-spacing: .2px;
font-weight: 600;
font-family: var(--font)
}
.btn-close {
width: 1em;
height: 1em;
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
outline: 0
}
.send_p {
font-size: 13px;
line-height: 18px;
text-align: center
}
.g-recaptcha {
transform: scale(.8);
transform-origin: 0 0;
-webkit-transform-origin: 0 0
}
.heading_banner {
float: left;
width: 100%;
position: relative;
background-size: 100%;
background-position: top center;
padding: 90px 0 85px;
margin: 0;
z-index: 1;
}
.heading_banner:before {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
top: 0;
left: 0;
z-index: 0;
content: ''
}
.heading_banner .container {
position: relative;
z-index: 9
}
.heading_banner h1 {
margin: 0 0 10px;
text-transform: capitalize;
font-size: 36px;
font-weight: 600;
color: #fff;
text-align: center;
display: inline-block;
width: auto;
padding: 10px 20px
}
.heading_banner h2 {
margin: 0;
letter-spacing: 0;
text-transform: capitalize;
font-size: 18px;
font-weight: 400;
color: #eee;
text-align: center;
text-align: center;
display: inline-block;
width: auto;
padding: 10px 20px
}
.heading_banner .cat_title {
margin: 0 0 0;
text-transform: capitalize;
font-size: 28px;
font-weight: 600;
color: #fff;
text-align: center;
display: inline-block;
width: auto;
padding: 10px 20px;
border-radius: 2px;
background: var(--red)
}
.heading_banner .cat_title2 {
margin: 0;
letter-spacing: 0;
text-transform: capitalize;
font-size: 18px;
font-weight: 400;
color: #eee;
text-align: center;
text-align: center;
display: inline-block;
width: auto;
padding: 10px 20px
}
.inner_breadcrumb {
float: left;
width: 100%;
background: #fff;
position: relative;
margin: 0;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2)
}
.inner_breadcrumb .breadcrumb {
background: 0 0;
border-radius: 0;
border: none;
list-style: none;
padding: 0;
float: left;
display: inline-block;
text-transform: capitalize;
margin: 0
}
.inner_breadcrumb .breadcrumb li {
font-weight: 600;
text-transform: uppercase;
color: #666;
float: left;
display: inline-block;
line-height: 45px
}
.inner_breadcrumb .breadcrumb li a {
float: left;
padding: 0;
color: #666;
letter-spacing: .3px
}
.inner_breadcrumb .breadcrumb li:before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
padding: 0 14px;
color: #fff;
display: inline-block
}
.inner_breadcrumb .breadcrumb li.active {
color: var(--red)
}
.inner_breadcrumb .breadcrumb li+li:before {
content: "/";
color: #fff;
padding: 0 14px
}
.inner_breadcrumb .breadcrumb li+li:before {
float: left;
padding: 15px 10px;
color: #bfbfbf
}
.title_h2 {
float: left;
width: 100%;
padding: 8px 10px;
margin: 0;
line-height: 30px;
background: #050708;
font-size: 24px;
color: #fff;
font-weight: 600
}
.sitemap_page .title_h2 {
background: var(--red);
color: #fff;
margin-bottom: 20px
}
.right_side .title_h2 {
float: left;
width: 100%;
padding: 8px 10px;
margin: 0;
line-height: 30px;
background: #050708;
font-size: 24px;
color: #fff;
font-weight: 600
}
.faq_section {
float: left;
width: 100%;
margin: 0;
padding: 40px 0;
background: #eee
}
.faq_section .title_2 {
color: #050708
}
.accordion-item {
margin-bottom: 15px;
border-radius: 16px !important;
overflow: hidden
}
.accordion-header {
padding: 0 !important;
margin: 0 !important;
text-transform: initial
}
.accordion-item:not(:first-of-type) {
border: 1px solid rgba(0, 0, 0, .125)
}
.accordion-button {
padding: 12px 15px;
font-size: 18px;
font-weight: 400
}
.accordion-button:not(.collapsed) {
color: #fff;
background: var(--red);
font-weight: 400
}
.accordion-button:not(.collapsed):after {
background-image: url("data:image/svg+xml;charset=utf-8,");
transform: rotate(0)
}
.accordion-button:focus,
.accordion-button:hover {
color: #fff;
background: var(--red)
}
.accordion-button:hover:after {
background-image: url("data:image/svg+xml;charset=utf-8,");
transform: rotate(-180deg)
}
.accordion-body p {
font-size: 16px;
line-height: 24px
}
.about_page {
float: left;
width: 100%;
margin: 0;
padding: 50px 0;
background: #fff
}
.about_page .title_2 {
color: var(--red)
}
.about_page .title_2:after {
background: #282d32;
bottom: -10px;
content: "";
height: 2px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 50px
}
.about_page .abt-cont {
padding: 60px
}
.about2 {
background: #f1f1f1;
float: left;
width: 100%;
padding: 50px 0 35px
}
.about2 p {
text-align: justify
}
.about2 .img_bx {
float: right;
margin: 0 0 20px 20px;
max-width: 455px;
width: 100%
}
.about_page .abt-cont p {
text-align: justify;
margin-bottom: 15px;
line-height: 26px;
font-size: 15px
}
.about_page .abt-cont h1 {
color: var(--red);
font-weight: 700;
font-size: 30px;
margin-bottom: 15px
}
.about_page .abt-cont h2,
.about_page .abt-cont h3 {
font-size: 25px;
margin-bottom: 15px
}
.left_sidebar {
float: left;
width: 100%;
margin: 0 0 25px;
padding: 0
}
.left_sidebar .left_title {
float: left;
width: 100%;
padding: 8px 10px;
margin: 0;
line-height: 30px;
background: #050708;
font-size: 24px;
color: #fff;
font-weight: 600
}
.left_sidebar ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
background: var(--red)
}
.left_sidebar ul li {
float: left;
width: 100%;
padding: 0;
margin: 0;
border-bottom: 1px solid #444;
list-style: none
}
.left_sidebar ul li a {
color: #fff;
padding: 10px;
font-weight: 500;
line-height: 20px;
font-size: 14px
}
.left_sidebar ul li a.active,
.left_sidebar ul li a:focus,
.left_sidebar ul li a:hover {
background: #050708;
color: #fff
}
.left_sidebar ul li ul {
float: left;
width: 100%;
margin: 0;
padding: 0;
background: #fff
}
.left_sidebar ul li ul li {
border-bottom: 1px dashed #ccc;
list-style-type: none;
position: relative
}
.left_sidebar ul li ul li a {
display: block;
font-weight: 500;
color: #333;
text-align: left;
font-size: 14px;
padding: 4px 15px;
text-decoration: none;
line-height: 24px
}
.left_sidebar ul li ul li a.active,
.left_sidebar ul li ul li a:focus,
.left_sidebar ul li ul li a:hover {
background: #050708;
color: #fff
}
.left_sidebar ul li ul li a i {
float: right;
line-height: 24px
}
.left_sidebar ul li ul li ul {
display: none;
transition: all 2s;
position: absolute;
left: 98%;
top: 0;
z-index: 200;
background: #fff;
width: 200px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .75)
}
.left_sidebar ul li ul li:hover ul {
display: block;
transition: all 2s
}
.left_sidebar ul li ul li ul li a {
display: block;
font-weight: 400;
color: #333;
text-align: left;
font-size: 13px;
padding: 4px 15px;
text-decoration: none;
text-transform: initial;
line-height: 24px
}
.left_sidebar ul li ul li ul li a.active,
.left_sidebar ul li ul li ul li a:focus,
.left_sidebar ul li ul li ul li a:hover {
background: #050708;
color: #fff
}
.left_sidebar form {
float: left;
width: 100%;
background: #fff;
padding: 10px 10px 10px
}
.right_side h1 {
padding: 8px 10px;
margin: 0 0 10px;
line-height: 30px;
background: #050708;
font-size: 24px;
color: #fff;
font-weight: 600
}
.right_side h2 {
padding: 0;
margin: 20px 0 5px;
line-height: 30px;
font-size: 22px;
color: var(--red);
font-weight: 600
}
.right_side h3 {
padding: 0;
margin: 10px 0 5px;
line-height: 30px;
font-size: 20px;
color: var(--red);
font-weight: 600
}
.wps_right {
float: left;
width: 100%
}
.wps_right p {
line-height: 26px;
margin-bottom: 10px;
text-align: justify;
font-size: 15px;
font-weight: 400
}
.wps_right ul {
margin: 0 0 25px;
padding: 0
}
.wps_right ul li {
line-height: 28px;
font-size: 16px;
margin: 0;
vertical-align: middle;
text-align: left;
padding: 0;
display: flex;
align-items: center
}
.wps_right ul li:before {
width: 20px;
height: 20px;
color: #4e4e4e;
font-weight: 400;
margin-top: 0;
margin-right: 5px;
float: left;
content: url("data:image/svg+xml;charset=utf-8,");
}
.left_image {
float: left;
width: 340px;
margin: 0 15px 15px 0;
text-align: center
}
.left_image .left_centered {
width: 100%;
position: relative;
padding: 0;
min-height: 338px;
overflow: hidden;
border: 1px solid #eee
}
.left_image .left_centered .image {
width: 100%;
text-align: center;
overflow: hidden;
position: relative;
height: 338px;
transition: transform .5s ease
}
.left_image .left_centered .image img {
position: absolute;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
max-height: 100%
}
.right_image1 {
float: right;
width: 340px;
margin: 0 0 15px 15px;
text-align: center
}
.right_image1 .left_centered {
width: 100%;
position: relative;
padding: 0;
min-height: 338px;
overflow: hidden;
border: 1px solid #eee
}
.right_image1 .left_centered .image {
width: 100%;
text-align: center;
overflow: hidden;
position: relative;
height: 338px;
transition: transform .5s ease
}
.right_image1 .left_centered .image img {
position: absolute;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
max-height: 100%
}
.category_page {
float: left;
width: 100%;
margin: 0;
padding: 40px 0;
background: #f1f1f1
}
.category_page .title_2:after {
background: #282d32;
bottom: -10px;
content: "";
height: 2px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 50px
}
.category_page h1 {
padding: 8px 10px;
margin: 0;
line-height: 30px;
background: #050708;
font-size: 24px;
color: #fff;
font-weight: 600
}
.category_page .wps_right ul {
margin: 0 0 25px;
padding: 0
}
.category_page .wps_right ul li {
display: block;
list-style: none;
line-height: 24px;
color: #423f3f;
font-size: 16px;
font-weight: 400
}
.category_page .wps_right ul li:before {
margin-right: 5px;
content: url("data:image/svg+xml;charset=utf-8,")
}
.product_right_image {
float: right;
max-width: 450px;
width: 100%;
margin: 0 0 25px 25px;
text-align: center
}
.product_right_image .detail_image {
width: 100%;
text-align: center;
overflow: hidden;
position: relative;
height: 450px;
border: 1px solid #eee;
margin-bottom: 15px
}
.product_right_image .detail_image img {
position: absolute;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
max-height: 100%
}
.product_right_image .product_dimage {
width: 100%;
text-align: center;
overflow: hidden;
height: 400px;
border: 1px solid #eee;
margin-bottom: 15px
}
.product_right_image .readMore_2 {
margin-left: -40px
}
.more_images {
float: left;
position: relative;
width: 100%;
margin-bottom: 15px
}
#thumbs {
padding-top: 10px;
overflow: hidden;
text-align: center
}
#largeImage,
#thumbs img {
padding: 0;
cursor: pointer;
border: 1px solid #eee
}
#thumbs img {
display: inline-block;
margin-right: 6px;
width: 70px
}
#thumbs img.active {
border-color: var(--red)
}
.wps_right h2 {
font-size: 22px;
line-height: normal;
margin-bottom: 10px;
color: var(--red)
}
.wps_right h3 {
font-size: 18px;
line-height: normal;
margin-bottom: 10px;
color: var(--red)
}
.wps_right h4 {
font-size: 18px;
line-height: normal;
margin-bottom: 10px;
color: var(--red);
text-align: left;
padding: 0
}
.wps_right table {
margin: 0
}
.wps_right table tbody tr td {
vertical-align: middle;
padding: 6px 10px;
font-size: 16px;
line-height: normal;
text-align: left
}
.wps_right table tbody tr td {
border: 1px solid #eaeaea;
width: 60%
}
.wps_right table tbody tr td:first-child {
color: var(--red);
width: 40%
}
.imageAbout {
width: 100%;
clear: both;
margin-bottom: 15px;
text-align: center
}
.imageAbout img {
width: auto;
display: inline-block;
margin: 0 auto;
border: 1px solid var(--red)
}
.interested_section {
float: left;
width: 100%;
text-align: center;
margin: 20px 0
}
.interested_section .interested_btn {
font-size: 16px;
color: #fff;
background: var(--red);
border: 1px solid var(--red);
border-radius: 0;
padding: 12px 0;
width: 258px;
display: inline-block;
text-transform: uppercase;
cursor: pointer
}
.interested_section .interested_btn svg {
margin-right: 5px;
width: 20px;
height: 20px
}
.interested_section .interested_btn:hover {
background: #333;
color: #fff;
border: 1px solid #333
}
.product_listing {
float: left;
width: 100%;
margin-bottom: 25px;
box-shadow: 0 3px 5px 0 rgba(210, 210, 210, .75);
transition: all .35s ease-in-out;
border-style: solid;
border-width: 1px 1px 0 1px;
border-color: #eee;
background: #fff
}
.product_listing .more_info {
max-height: 200px;
overflow-y: auto;
padding-right: 15px;
margin-bottom: 15px
}
.product_listing .more_info::-webkit-scrollbar {
width: 7px;
border-radius: 2px
}
.product_listing .more_info::-webkit-scrollbar-thumb {
background: #c9c9c9
}
.product_listing .more_info::-webkit-scrollbar-track {
background: #eee
}
.product_listing .product {
width: 100%;
position: relative;
padding: 0;
text-align: center;
min-height: 200px;
overflow: hidden;
border-right: 1px solid #eee;
display: inline-block
}
.product_listing .product .image1 {
width: 100%;
text-align: center;
overflow: hidden;
position: relative;
height: 374px;
transition: all .4s ease-in-out;
margin-bottom: 0
}
.product_listing .product .image1 img {
position: absolute;
max-width: 100%;
top: 50%;
left: 50%;
margin: auto;
transform: translate(-50%, -50%);
width: auto;
max-height: 100%
}
.product_listing .product .small {
padding-top: 10px;
overflow: hidden;
text-align: center;
display: flex;
justify-content: center
}
.product_listing .product .largeImage img,
.product_listing .product .small img {
padding: 0;
cursor: pointer;
border: 1px solid #eee
}
.product_listing .product .small .item {
display: inline-block;
margin-right: 6px;
width: 60px;
cursor: pointer
}
.product_listing .product .small .item:last-child {
margin: 0
}
.product_listing .product .small .item.active {
border-color: var(--red)
}
.product_listing .product .small .item.youtube {
width: 60px;
height: 60px;
background: #f70000;
color: #fff;
display: flex;
align-items: center;
justify-content: center
}
.product_listing .product .small .item.youtube a {
color: #fff;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center
}
.pr_view {
margin-bottom: 25px
}
.pr-li {
background: #fff;
border: 1px solid #eee;
box-shadow: rgba(0, 0, 0, .1) 0 1px 2px;
transition: .2s
}
.pr-li:hover {
box-shadow: rgba(0, 0, 0, .2) 0 1px 3px
}
.pr-li .img_bx {
padding: 10px;
border-right: 1px solid #eee
}
.pr-li .img_bx img {
width: 100%
}
.pr-li .tx-bx {
padding: 20px;
border-right: 1px solid #eee
}
.grid.pr_view .pr-li .tx-bx {
padding-top: 0
}
.pr-li .tx-bx .title {
color: var(--red);
border-bottom: 1px solid #eee;
font-weight: 700;
padding-bottom: 10px;
margin-bottom: 10px;
font-size: 22px
}
.grid.pr_view .pr-li .tx-bx .title {
text-align: center;
border: none;
margin: 0
}
.grid.pr_view .pr-li .tx-bx .bt_bx {
text-align: center
}
.pr-li .tx-bx .title a {
font-size: 19px;
color: var(--dark);
transition: .4s
}
.pr-li:hover .tx-bx .title a {
color: var(--red)
}
.pr-li .tx-bx .info {
max-height: 250px;
overflow-y: auto;
padding-right: 10px;
margin-bottom: 10px
}
.grid.pr_view .pr-li .tx-bx .info {
display: none
}
.g_100 {
width: 100% !important
}
.youtube svg {
width: 40px;
height: 40px
}
.product_listing .product p {
font-size: 16px;
text-align: center;
margin: 0 0 10px
}
.product_listing .product .all_btns {
margin-top: 0
}
.product_listing .right-content .readMore_2 {
margin-top: 10px;
margin-right: 50px
}
.padding0 {
padding: 0
}
.right-content {
position: relative;
padding: 10px;
padding-right: 15px
}
.right-content h3 {
line-height: 24px;
padding: 10px 0;
text-align: left;
margin: 0;
font-size: 20px;
font-weight: 600
}
.right-content h3 a {
color: #333
}
.right-content h4 {
line-height: 24px;
padding: 10px 0;
text-align: left
}
.right-content .head {
line-height: 24px;
padding: 15px 0;
text-align: left;
font-size: 20px;
margin-bottom: 0;
color: #333
}
.right-content .head a {
color: #333
}
.right-content:hover .head a {
color: var(--red)
}
.right-content p {
font-size: 15px;
margin-bottom: 10px
}
.blue-line1 {
width: 100%;
display: block;
height: 1.1px;
background: #eee;
position: relative;
margin-bottom: 10px;
padding: 0 15px
}
.product_listing:hover .right-content h3 a {
color: var(--red)
}
.product_listing:hover .right-content h4 a {
color: var(--red)
}
.right-content .table-responsive {
float: left;
width: 100%;
overflow: hidden;
max-height: 230px;
overflow: auto;
padding-right: 5px;
margin-bottom: 15px
}
.detailsPage .right-content .table-responsive {
max-height: 300px
}
.right-content table {
margin-bottom: 15px
}
.right-content table tbody tr td {
vertical-align: middle;
padding: 6px 10px;
font-size: 15px;
line-height: normal;
text-align: left
}
.right-content table tbody tr td {
border: 1px solid #eee;
width: 60%
}
.right-content table tbody tr td:first-child {
color: var(--red);
width: 40%
}
.product_listing .right-content .specifications {
display: block;
position: relative;
padding: 0 0 5px
}
.product_listing .right-content .specifications ul {
list-style: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-flex-wrap: wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 0
}
.product_listing .right-content .specifications ul li {
-webkit-box-pack: start;
-ms-flex-pack: start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: flex-start;
width: 100%;
max-width: 25%;
margin-bottom: 0;
align-items: center;
border: 1px solid #eee;
padding: 10px
}
.product_listing .right-content .specifications ul li::before {
content: "";
width: 0;
height: 0
}
.product_listing .right-content .specifications ul li .icon {
-webkit-box-flex: 0;
-ms-flex: 0 0 16px;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex: 0 0 16px;
align-items: center;
justify-content: center;
width: 16px;
height: 16px
}
.product_listing .right-content .specifications ul li .specificationsDesc {
padding-left: 10px
}
.product_listing .right-content .specifications ul li .specificationsDesc .title {
font: normal 300 14px/1.1 Oswald;
margin-bottom: 5px;
color: #222;
text-transform: uppercase;
display: block
}
.product_listing .right-content .specifications ul li .specificationsDesc .value {
font: normal 400 13px/1.1 Oxygen;
-o-text-overflow: ellipsis;
overflow: hidden;
color: #777;
text-overflow: ellipsis;
white-space: nowrap
}
.you_may {
float: left;
width: 100%;
color: var(--red);
font-size: 22px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0 20px
}
.you_may button {
font-size: 13px;
outline: 0;
padding: 8px 12px;
border: none;
background: var(--dark);
border-radius: 1px;
color: #fff;
transition: .2s
}
.you_may button.active,
.you_may button:hover {
background: var(--red)
}
.team_member {
float: left;
width: 100%;
margin-bottom: 15px;
box-shadow: 0 3px 5px 0 rgba(210, 210, 210, .75);
transition: all .35s ease-in-out;
border-style: solid;
border-width: 1px 1px 0 1px;
border-color: #eee
}
.team_member .image {
width: 100%;
position: relative;
padding: 15px 15px 15px 0;
text-align: center;
min-height: 268px;
overflow: hidden;
border-right: 1px solid #eee;
display: inline-block
}
.team_member .image img {
position: absolute;
max-width: 100%;
top: 50%;
left: 50%;
margin: auto;
transform: translate(-50%, -50%);
width: auto;
max-height: 100%
}
.team_info {
position: relative;
padding-right: 15px
}
.team_info h3 {
line-height: 24px;
padding: 10px 0;
text-align: left;
margin: 0
}
.team_info h3 small {
display: block;
color: #333;
font-weight: 600;
font-size: 14px
}
.testimonial_block {
float: left;
width: 100%;
margin-bottom: 20px
}
.testimonial_text_box {
margin: 0 0 30px;
padding: 32px 20px 35px 0;
background: #eee;
box-shadow: 0 0 12px rgba(0, 0, 0, .05);
display: table;
position: relative;
border-radius: 4px
}
.testimonial_text_box .this-quote {
margin: 0 20px;
width: 30px
}
.testimonial_text_box .this-quote img {
width: auto
}
.testimonial_text_box:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -25px;
left: 69px;
border-top: 25px solid #eee;
border-right: 25px solid transparent
}
.testimonial_text_box .this-texts {
display: table-cell;
width: calc(100% - 70px);
vertical-align: top;
color: #333;
font-size: 16px;
line-height: 24px;
text-align: justify
}
.testimonial_author .media-left {
padding-right: 20px;
float: left
}
.testimonial_author .media-left img {
border: 1px solid var(--red);
border-radius: 4px
}
.testimonial_author .media-left a {
display: block;
width: 60px;
height: 60px;
border-radius: 100%
}
.testimonial_author .media-body {
vertical-align: middle
}
.testimonial_author .this-title {
font-size: 18px;
color: var(--red);
text-align: left;
line-height: 20px;
margin: 0 0 5px;
padding: 0
}
.testimonial_author .loc {
color: #050708;
line-height: 20px;
margin: 0
}
.gallery_page {
float: left;
width: 100%;
margin: 0;
padding: 40px 0;
background: #fff
}
.gallery_page .title_2 {
color: #050708
}
.gallery_page .gallery_item {
border-radius: 0;
background-color: #fff;
box-shadow: 0 1px .98px .02px rgba(0, 0, 0, .1);
margin-bottom: 25px;
border: 1px solid #eee
}
.gallery_page .gallery_item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center
}
.gallery_item_info {
text-align: center;
padding: 15px;
background: #eee
}
.gallery_item_info .title_h3 {
margin: 0;
font-size: 16px;
color: var(--red)
}
.gallery_item_info h4 {
font-size: 18px;
color: #333;
margin: 0;
padding: 0
}
.gallery_item_info p {
font-size: 13px;
margin: 0;
margin-top: 4px;
color: #333;
max-width: 100%
}
.hover_effect {
display: block;
position: relative;
background: 0 0;
overflow: hidden;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
height: 376px
}
.hover_effect:after {
color: #fff;
position: absolute;
font-size: 1.6em;
text-align: center;
line-height: 40px;
width: 40px;
height: 40px;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transform: scale(.1, .1);
transform: scale(.1, .1);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0
}
.hover_effect img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
transform: translate(-50%, -50%);
max-height: 100%;
width: auto;
height: auto
}
.hover_effect:hover:after {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1
}
.hover_effect:hover img {
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: .4
}
.hover_effect:hover {
background: var(--red)
}
.hover_effect:after {
content: url("data:image/svg+xml;charset=utf-8,")
}
.video_gallery {
float: left;
width: 100%;
margin: 0 0 20px;
padding: 10px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
border: 1px solid #eee;
transition: all .3s ease-in-out
}
.video_gallery:hover {
box-shadow: 1px 1px 10px rgba(0, 0, 0, .5)
}
.video_gallery i {
line-height: inherit;
color: #ff4f47;
font-size: 20px
}
.video_gallery iframe {
width: 100%;
height: 300px;
margin-bottom: 5px
}
.video_gallery h3 {
font-size: 16px;
color: #333;
padding: 0;
line-height: normal;
font-weight: 400;
margin-bottom: 0;
display: flex;
align-items: center
}
.video_gallery h3 svg {
width: 50px;
height: 50px;
padding: 10px;
background: #e02f2f;
border: 1px solid #ce2626;
text-align: center;
line-height: 45px;
float: left;
font-size: 30px;
color: #fff;
margin-right: 15px
}
.blog_page {
float: left;
width: 100%;
margin: 0;
padding: 50px 0;
background: #f5f5f5
}
.blog_page .title_2 {
color: var(--dark)
}
.sharethis-inline-share-buttons {
margin-bottom: 20px
}
.blog_page .blog_left h1 {
padding: 8px 10px;
margin: 0 0 10px;
line-height: 30px;
background: #050708;
font-size: 24px;
color: #fff;
font-weight: 600
}
.blog_page .singleBlog {
margin-bottom: 50px;
position: relative
}
.blog_page .homeSingle .image {
margin: 0
}
.blog_page .homeSingle .blogIntro {
padding: 15px
}
.blog_page .homeSingle .blogIntro ul {
margin-bottom: 10px
}
.blog-2 {
background: #fff;
margin-bottom: 25px;
box-shadow: rgba(0, 0, 0, .1) 0 3px 8px;
overflow: hidden
}
.blog-2 .blog-photo img {
height: 370px;
width: 100%;
object-fit: cover;
object-position: center
}
.blog-2 .detail {
padding: 30px
}
.blog-2 .detail .tt a {
font-size: 19px;
font-weight: 600;
color: #000;
margin-bottom: 5px
}
.blog-2:hover .detail .tt a {
color: var(--red)
}
.blog-2 .detail p {
margin-bottom: 15px
}
.mini-blogs ul {
padding: 0 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .08);
border-radius: 3px;
padding-bottom: 0
}
.mini-blogs ul li {
padding-top: 18px;
border-bottom: 1px solid #eee;
padding-bottom: 8px
}
.mini-blogs ul li:last-child {
border-bottom: 0
}
.mini-blogs ul .tt {
font-size: 20px;
color: #000;
font-weight: 600
}
.mini-blogs ul .tt span {
color: var(--red)
}
.mini-blogs .tx-bx .title {
font-size: 14px;
color: #000;
font-weight: 500;
margin-bottom: 3px
}
.mini-blogs ul li:hover .tx-bx .title {
color: var(--red)
}
.mini-blogs .tx-bx p {
line-height: normal;
font-size: 13px;
color: #555
}
.left_title1 {
float: left;
width: 100%;
padding: 8px 10px;
margin: 0 0 10px;
line-height: 30px;
background: #050708;
font-size: 24px;
color: #fff;
font-weight: 600
}
.single-post2 {
overflow: hidden;
margin-bottom: 15px
}
.blog-thumb2 {
overflow: hidden;
width: 100%
}
.blog-thumb2 img {
max-width: 100%;
transition: all .3s ease-out 0s
}
.blog-content2 {
background: #fff;
padding: 30px;
position: relative;
z-index: 1;
box-shadow: 2.5px 4.33px 15px 0 rgb(0 0 0 / 9%);
width: 90%;
margin: auto;
margin-top: -115px;
margin-bottom: 15px
}
.blog-content2 .b-meta {
margin-bottom: 10px;
font-size: 14px
}
.blog-content2 .b-meta ul {
margin: 0;
padding: 0;
padding-left: 0 !important
}
.b-meta ul li {
display: inline-block;
margin-right: 8px;
border-right: 2px solid #f5f5f5;
padding-right: 8px
}
.b-meta svg {
margin-right: 5px;
color: #554c86
}
.b-meta ul li:last-child {
margin-right: 0;
padding-right: 0;
border: none
}
.blog-content2 .title_h5 {
font-size: 18px;
margin-bottom: 10px;
line-height: normal;
padding: 0;
height: 90px;
position: relative;
font-weight: 400;
text-align: left;
display: flex;
align-items: center
}
.blog-content2 .title_h5 a {
text-decoration: none;
line-height: normal;
color: var(--red)
}
.blog-content2 .title_h5 a:hover {
color: var(--red)
}
.blog-content2 h5 span {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
transform: translate(-50%, -50%);
width: 100%;
max-height: 100%;
line-height: 25px
}
.blog_details {
float: left;
width: 100%
}
.blog_details ul {
display: inline-block;
margin: 0 0 20px;
padding: 0
}
.blog_details ul li {
display: inline-block;
margin-right: 15px;
list-style: none
}
.blog_details ul li:before {
content: none;
margin: 0
}
.blog_details ul li a {
color: #333;
transition: all .5s ease-out
}
.blog_details ul li i {
margin-right: 5px
}
.blog_details1 {
float: left;
width: 100%;
margin: 0;
padding: 0
}
.blog_details1 img {
margin-bottom: 15px
}
.blog_details_img img {
display: block;
max-height: 500px;
margin: 10px auto
}
.blog_details1 p {
text-align: justify;
line-height: 24px
}
.blog_details1 .block-quote {
padding: 30px;
margin-bottom: 20px;
background: #eee;
border-left: 3px solid var(--red)
}
.blog_details1 .block-quote p {
font-size: 15px;
line-height: 24px
}
.blog_details1 h3 {
margin: 0 0 5px;
padding: 0;
line-height: 30px
}
.blog_details1 ul {
float: left;
width: 100%;
margin: 0 0 25px;
padding: 0
}
.blog_details1 ul li {
line-height: 28px;
font-size: 15px;
margin: 0;
vertical-align: middle;
text-align: left;
padding: 0;
display: flex;
align-items: center
}
.blog_details1 ul li:before {
width: 20px;
height: 20px;
color: #4e4e4e;
font-weight: 400;
margin-top: 0;
margin-right: 5px;
float: left;
content: url("data:image/svg+xml;charset=utf-8,")
}
.fb-comments {
width: 100%
}
.blogdetails img {
width: 100%
}
.blog_news .content_details {
float: left;
width: 100%;
background: #eee;
padding: 20px 20px 20px
}
.blog_news .content_details h2 {
text-transform: capitalize;
line-height: 30px;
font-size: 20px;
margin: 0 0 10px
}
.blog_news .content_details h2 a {
color: #333;
transition: all .5s ease-out
}
.blog_news .content_details ul {
display: inline;
margin: 0
}
.blog_news .content_details ul li {
display: inline-block;
margin-right: 15px
}
.blog_news .content_details ul li:before {
content: none;
margin: 0
}
.blog_news .content_details ul li i {
margin-right: 5px
}
.blog_news .block-quote {
padding: 30px 40px;
margin-bottom: 20px;
background: #fdfdfd;
border-left: 3px solid var(--red)
}
.blog_news .block-quote p {
font-size: 15px;
line-height: 24px
}
.blog_news .content_details ol {
width: 100%;
margin: 0 0 25px;
padding: 0
}
.blog_news .content_details ol li {
list-style: none;
line-height: 24px;
color: #423f3f;
font-size: 15px;
font-weight: 400
}
.blog_news .content_details ol li::before {
content: "\f0da";
font-family: FontAwesome;
margin-right: 5px
}
.contact_page {
float: left;
width: 100%;
margin: 0;
padding: 40px 0;
background: #fff
}
#contact_form label.error,
.output {
color: #fb3a3a;
font-weight: 400;
margin-bottom: 15px
}
#quick_form label.error,
.output {
color: #fb3a3a;
font-weight: 400;
margin-bottom: 15px
}
#quick_enquiry label.error,
.output {
color: #fb3a3a;
font-weight: 400;
margin-bottom: 15px
}
.pac-container {
z-index: 100000
}
.contact_map {
float: left;
width: 100%;
height: 550px;
padding-left: 55px
}
.contact_form_grid1 {
float: left;
width: 100%;
margin-bottom: 0;
margin-top: 0;
border-radius: 4px;
overflow: hidden
}
.contact_form_grid1 .contactTitle {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
color: var(--red)
}
.contact_details .address_list li {
clear: both;
list-style: none;
color: #333;
margin-bottom: 15px;
font-size: 16px;
display: flex;
align-items: center
}
.contact_details .title_h2_2 {
color: var(--red);
font-size: 20px;
text-align: left;
padding: 0;
text-transform: uppercase;
margin-bottom: 20px
}
.contact_details p {
color: #333;
margin-bottom: 20px;
font-size: 16px
}
.contact_details .address_list {
clear: both;
margin: 0 0 20px;
padding: 0
}
.contact_details .address_list li {
clear: both;
list-style: none;
color: #333;
margin-bottom: 10px;
font-size: 16px
}
.contact_details .address_list li svg {
width: 20px;
height: 20px;
margin-right: 7px
}
.contact_details .address_list li a {
color: #333;
display: flex;
line-height: 24px;
font-size: 16px;
margin-bottom: 0;
display: inline-block
}
.contact_details .address_list li a span {
font-size: 30px;
margin-right: 13px
}
.contact_details .address_list li:first-child {
display: flex;
align-items: center
}
.contact_details .address_list li span {
font-size: 30px;
margin-right: 13px
}
.contact_details .address_list li a:focus,
.contact_details .address_list li a:hover {
color: #050708
}
.social_list {
float: left;
width: 100%;
margin: 0;
padding: 0
}
.social_list li {
list-style: none;
display: inline-block
}
.social_list li a {
color: #fff;
width: 35px;
height: 35px;
line-height: 35px;
border: 1px solid #fff;
text-align: center;
margin-right: 10px
}
.social_list li a:hover {
color: #050708;
border: 1px solid #050708
}
.contact_form_grid .form_grid {
background-color: #fff;
padding: 30px
}
.form_grid .title_h2_2 {
font-size: 20px;
text-transform: uppercase;
text-align: left;
margin: 0 0 20px;
padding: 0;
color: var(--red)
}
.sitemap_page {
float: left;
width: 100%;
margin: 0;
padding: 50px 0;
background: #eee;
position: relative
}
.sitemap_page .title_2 {
color: var(--red)
}
.sitemap_page .title_2:after {
background: #282d32;
bottom: -10px;
content: "";
height: 2px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 50px
}
.sitemap_right_side h1 {
padding: 8px 10px;
margin: 0 0 10px;
line-height: 30px;
background: #050708;
font-size: 24px;
color: #fff;
font-weight: 600
}
.sitemap {
border-left: 1px solid #666;
padding: 0
}
.sitemap li {
list-style: none !important;
background: transparent url(../images/sitemap_hr.png) no-repeat scroll 0 9px;
padding: 0 0 0 15px;
margin-bottom: 5px
}
.sitemap li ul {
border-left: 1px solid #666;
padding: 0
}
.sitemap li a {
color: #333;
font-size: 14px;
padding-bottom: 5px;
display: block
}
.sitemap li a:hover {
color: #050708
}
.market_area h3 {
float: left;
display: block;
margin: 15px 0 5px
}
.market_area h1 {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
color: var(--red)
}
.market-list {
float: left;
width: 100%;
margin: 0 !important;
padding: 0
}
.market-list li {
list-style: none;
padding-right: 10px;
line-height: 20px;
width: 25%;
float: left
}
.market-list li:before {
content: none !important;
margin-right: 0 !important
}
.market-list li a {
width: 96%;
height: auto;
padding: 10px 0 10px 12px;
margin: 0 0 9px;
display: block !important;
color: #333 !important;
font-size: 14px;
background-color: #ddd
}
.market-list li a:hover {
background: var(--red);
color: #fff !important
}
.product_popup {
float: left;
width: 100%;
margin: 0;
padding: 0
}
.product_popup_image {
width: 100%;
margin-bottom: 15px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
height: 430px
}
#callback .product_popup_image {
height: 176px
}
.product_popup_image img {
position: absolute;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 100%;
width: 100%;
margin: auto
}
.product_popup .popupTitle {
color: var(--red);
font-size: 17px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 8px;
text-align: left;
padding: 0;
font-family: var(--font)
}
.product_popup p {
font-size: 14px;
line-height: 24px;
color: #333;
text-align: left;
margin-bottom: 15px
}
#product_enquiry label.error {
color: #fb3a3a;
font-weight: 400
}
.product_right_image .read_more {
margin-top: 0
}
.logob {
border-radius: 14px;
padding: 5px 5px;
background-color: #fff
}
.video_section iframe {
width: 100%;
height: 415px
}
.latest {
font-size: 26px;
font-weight: 700;
font-family: var(--font);
color: #0c0c0c;
margin: 0 0 20px
}
.webpulse-home_blog h6 span {
color: #050708
}
.webpulse-home_blog h6 {
text-transform: uppercase
}
.feature_height {
display: block;
overflow: hidden;
padding: 15px;
text-align: center;
height: 140px
}
.thumb {
text-align: center;
width: 100%;
display: inline-block;
padding: 0
}
.fadeImg {
animation-name: fadeimg;
animation-duration: 2s
}
@keyframes fadeimg {
from {
opacity: 0
}
to {
opacity: 1
}
}
.privacy_policy {
float: left;
width: 100%;
margin: 0;
padding: 30px 0;
background: #fff
}
.privacy_policy h2 {
font-size: 22px;
margin: 0;
padding: 0 0 8px;
font-weight: 600;
text-transform: uppercase
}
.privacy_policy h3 {
font-size: 18px;
margin: 0;
padding: 0 0 8px;
font-weight: 600;
color: #8e5341
}
.privacy_policy p {
font-size: 14px;
line-height: 22px
}
.privacy_policy ul {
margin: 0;
padding: 0
}
@keyframes spin {
0% {
-webkit-transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg)
}
}
.moreBtn {
padding: 10px 20px;
color: #fff;
background: var(--red);
display: inline-block;
outline: 0;
border: 0
}
.moreBtn svg {
width: 18px;
height: 18px
}
.moreBtn:hover {
color: #fff;
background: var(--dark)
}
.form-control {
border-radius: 0
}
.testimonials .swiper-pagination {
position: unset;
text-align: left;
margin-top: 10px
}
.testimonials .swiper-pagination-bullet {
background: #000;
height: 5px;
width: 5px;
margin: 0 6px !important;
position: relative
}
.testimonials .swiper-pagination-bullet::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 13px;
width: 13px;
border-radius: 100%;
border: 1px solid transparent
}
.testimonials .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
border: 1px solid #000
}
.pagination {
margin-bottom: 0;
padding: 8px;
box-shadow: rgba(0, 0, 0, .18) 0 2px 4px;
width: max-content;
background: #fff
}
.pagination .page-item a {
border: 0;
color: var(--red);
margin: 0 4px !important;
line-height: 34px;
padding: 0 12px;
height: 34px;
border-radius: 3px !important
}
.page-item:nth-child(-n+2) a,
.page-item:nth-last-child(-n+2) a {
background: #eee
}
.page-item:nth-child(-n+2) a:hover,
.page-item:nth-last-child(-n+2) a:hover {
background: #ddd
}
.pagination .page-item.active .page-link {
background: var(--red);
color: #fff
}
.pagination .page-item.disabled a {
background: #eee;
color: #3c3c3c;
cursor: context-menu
}
.whatapp_btn_cat {
position: static;
display: inline-block;
padding: 8px;
margin: 0 0 0 13px;
background: #01e675;
color: #fff;
cursor: pointer;
border-radius: 4px;
transition: all .3s ease-in-out
}
.whatapp_btn_cat svg {
width: 24px;
height: 24px
}
.whatapp_btn_cat:hover svg {
color: #fff
}
.conditions ul {
float: left;
width: 100%;
margin: 0 0 25px;
padding: 0
}
.conditions ul li {
line-height: 28px;
font-size: 16px;
margin: 0;
vertical-align: middle;
text-align: left;
padding: 0;
display: flex;
align-items: center
}
.conditions ul li:before {
width: 20px;
height: 20px;
color: #4e4e4e;
font-weight: 400;
margin-top: 0;
margin-right: 5px;
float: left;
content: url("data:image/svg+xml;charset=utf-8,")
}
.navigation .menu ul li a.moreBtn {
position: relative;
z-index: 1;
background: var(--liner2);
background-color: var(--red);
display: inline-block;
color: #fff;
font-weight: 500;
padding: 10px 20px;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, .1) 0 1px 4px;
font-size: 16px;
text-transform: capitalize;
overflow: hidden;
transition: .4s;
border: 0;
outline: 0;
margin-left: 10px
}
.navigation .menu ul li a.moreBtn::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
height: 50px;
width: 50px;
background: rgba(255, 255, 255, .15);
border-radius: 100%;
transition: .4s
}
.navigation .menu ul li a.moreBtn:focus,
.navigation .menu ul li a.moreBtn:hover {
color: #fff;
box-shadow: rgba(0, 0, 0, .2) 0 2px 12px
}
.navigation .menu ul li a.moreBtn:hover:before {
height: 200%;
width: 200%;
border-radius: 0
}
.iti {
width: 100%
}
.iti--allow-dropdown .iti__flag-container,
.iti--separate-dial-code .iti__flag-container {
height: 40px
}
.iti--separate-dial-code .iti__selected-flag {
background: 0 0
}
/* our team */
h4.title1.fs-4 {
color: #c82c23;
margin: 0px;
font-size: 27px !important;
}
.product_listing .product .image1 img {
height: auto;
object-fit: contain;
min-width: 100%;
min-height: 100%;
}
.team-sections {
border-top: 1px solid #e5e5e5 !important;
padding-top: 40px !important;
}
.team-sections:first-child {
border-top: none !important;
padding-top: 0px !important;
}
.about_page.our-teams .more_info {
max-height: 160px;
overflow-y: auto;
text-align: justify;
padding-right: 15px;
}
.more_info:hover::-webkit-scrollbar {
display: block;
}
.more_info::-webkit-scrollbar {
width: 5px;
display: none;
}
.more_info::-webkit-scrollbar {
position: absolute;
z-index: 999;
right: 0px;
top: 0px;
display: block;
}
.more_info::-webkit-scrollbar-button {
background: #a5a5a5;
}
.more_info::-webkit-scrollbar-track-piece {
background: #a5a5a5;
}
.more_info::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 40px;
}
.right_side.py-5.w-100.float-start.partners img {
height: auto;
width: 100%;
border-radius: 10px;
aspect-ratio: 1.22 / 1;
min-width: 100%;
min-height: 100%;
object-fit: contain;
}
.about_page.our-teams .product.d-block.border-0 {
padding: 0px;
}
.about_page.our-teams .product_listing .product .image1 {
height: auto;
transition: all 0.4s ease-in-out;
aspect-ratio: 1.22 / 1;
}
.blue-line1 {
width: 100%;
display: block;
height: 1.1px;
background: #ccc;
position: relative;
margin-bottom: 10px;
padding: 0 15px;
}
.video-text {
text-align: center;
margin-top: 14px;
}
.video-text .tt {
font-size: 20px;
font-weight: 600;
color: #c82c23;
line-height: 1.2;
margin-bottom: 2px;
}
.search-toggle .search-toggle-btn {
padding: 0;
border: 0;
background-color: transparent;
color: var(--black);
width: 40px;
min-width: 40px;
height: 40px;
border-radius: 100%;
background: #eee;
outline: 0;
border: 0;
color: #222;
text-align: center;
align-content: center;
padding: 0;
}
.search-toggle .search-toggle-btn:hover {
color: var(--dark);
}
.search-toggle .search-toggle-btn svg {
width: 18px;
height: 18px;
}
.search-toggle .headerSearch {
display: flex;
width: 260px;
position: absolute;
top: 49px;
right: -13px;
border: 1px solid #e3e3e3;
padding: 8px;
z-index: 5;
background-color: #f8f8f8;
border-radius: 5px;
}
.search-toggle .headerSearch input {
height: 36px;
border-radius: 0;
border: 1px solid #eee;
border-right: 0;
}
.search-toggle .headerSearch button {
border: 0;
outline: 0;
background-color: var(--red);
color: #fff;
padding: 0 10px;
}
.search-toggle .headerSearch button:hover {
background-color: var(--dark);
}
.rangeProduct {
float: left;
width: 100%;
margin: 0 0 20px;
padding: 0 0 20px;
border: 1px solid #eee;
border-radius: 6px;
overflow: hidden;
text-align: center;
transition: all 0.35s ease-in-out;
background: #fff;
}
.rangeProduct:hover {
box-shadow: 0px 3px 5px 0px rgba(210, 210, 210, 0.75);
}
.rangeProduct .image {
position: relative;
height: 253px;
text-align: center;
border-bottom: 1px solid #eee;
}
.rangeProduct .image img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
}
.rangeProduct .rangeTitle {
padding: 10px 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
font-size: 16px;
min-height: 50px;
color: #333;
}
.rangeProduct:hover .rangeTitle {
color: var(--dark-red);
}
.rangeProduct .read_more_product {
padding: 8px 18px;
border-radius: 6px;
line-height: 24px;
}