@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

body {
font-family: "Lexend", sans-serif;
overflow-x: hidden;
background: #fff;
line-height: 1.7;
color: #2e2e2e; 
}

/*---------------------- 1.1. Typography ------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: #111;
margin: 0 0 24px 0; 
font-weight: 600;
}

h1 {
font-size: 42px;
}

h2 {
font-size: 36px;
}

h2 span {
color: #ff6600;
}

h3 {
font-size: 36px;
}

h4 {
font-size: 30px;
}

h5 {
font-size: 24px;
}

h6 {
font-size: 18px;
}

p {
font-size: 15px;
}

.lead {
margin: 0 0 20px 0;
font-weight: 500;
color: #747474;
font-size: 18px;
}

a {
text-decoration: none;
color: #111;
transition: all 500ms ease;
}

a:hover,
a:focus {
text-decoration: none;
outline: none;
color: #0044c4;
transition: all 500ms ease;
}

ul,
ol {
margin: 0;
padding: 0;
}

ul li {
list-style: none;
font-size: 15px;
}

ol li {
font-size: 15px;
}

ul.list-with-icon li {
margin-bottom: 10px;
padding: 0;
position: relative;
list-style: none;
}

.form-control {
padding: 12px 20px;
border-radius: 10px;
border: 1px solid #dbe5f5;
font-size: 14px;
}

.inheading {
background: url("images/border.png") repeat-x left 12px;
color: #111;
padding-bottom: 20px;
text-transform: capitalize;
margin-bottom: 0;
line-height: 30px;
}

.inheading span {
display: inline-block;
background: #fff;
padding: 0 15px 0 0;
}

input,
input:focus,
textarea,
textarea:focus {
outline: none;
}

.map {
width: 100%;
height: 400px;
border: 1px solid #efefef;
filter: grayscale(100%);
}

blockquote {
border-color: #0044c4;
margin: 15px 0;
}

blockquote span {
font: 600 14px;
color: #333;
display: block;
width: 100%;
padding-top: 10px;
}

blockquote span span {
padding-top: 0;
color: #666;
}

label {
font: 600 13px/30px;
color: #666;
margin-bottom: 0;
}

.btn-primary {
margin: 30px 0 0 0;
background-color: #0044c4;
border-radius: 5px;
color: #ffffff;
display: inline-flex;
align-items: center;
font-size: 16px;
padding: 0 18px;
min-height: 48px;
text-decoration: none;
border: none;
}

.btn-primary:hover {
background-color: #ff6600;
color: #ffffff;
}

.btn-custom {
margin: 0;
background-color: #0044c4;
border-radius: 5px;
color: #ffffff;
display: inline-block;
flex: 0 auto;
-webkit-box-flex: 0;
font-size: 18px;
padding: 0;
min-height: 45px;
min-width: 45px;
width: 45px;
position: relative;
text-align: left;
text-decoration: none;
position: relative;
z-index: 2;
}

.btn-custom:hover {
color: #ffffff;
background-color: #ff6600;
padding-left: 0;
padding-right: 0;
}


.btn-custom::before {
content: "\f285";
font-family: bootstrap-icons !important;
display: block;
position: absolute;
top: 50%;
left: 13px;
transform: translate(0%, -50%);
transition: all 0.5s cubic-bezier(0.25, 0.25, 0.08, 1.08);
color: #ffffff;
border-radius: 5px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border: none;
font-size: 21px;
}

.btn-custom::after {
content: "\f285";
font-family: bootstrap-icons !important;
display: block;
position: absolute;
top: 50%;
right: 10px;
transform: translate(0%, -50%);
transition: all 0.5s cubic-bezier(0.25, 0.25, 0.08, 1.08);
color: #ffffff;
border-radius: 5px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border: none;
font-size: 21px;
}

.btn-custom::before {
opacity: 0;
transform: translate(-100%, -50%);
}

.btn-custom:hover::before {
opacity: 1;
transform: translate(0, -50%);
}

.btn-custom:hover::after {
opacity: 0;
transform: translate(100%, -50%);
}

/*----------------------
	1.3. Heading
------------------------------*/

.heading {
border: medium none;
color: #222;
display: inline-block;
letter-spacing: 0.5px;
margin: 0 auto 30px;
min-width: 272px;
padding: 0 10px 20px;
position: relative;
text-align: center;
width: auto;
font-size: 34px;
font-weight: 400;
}


.heading::before,
.heading::after {
display: inline-block;
content: "";
border-top: .3rem solid #505050;
width: 4rem;
margin: 0 1rem;
transform: translateY(-1rem);
}

/*----------------------
	1.4. Breadcrumb
------------------------------*/

.breadcrumb {
padding: 15px 0;
background: #0044c4;
margin-bottom: 0;
margin-top: 0;
}

.breadcrumb h2 {
color: #ffffff;
font-size: 36px;
text-align: center;
margin: 0;
padding: 0;
}

@media(max-width: 767px) {
.breadcrumb {
margin-top: 0 !important;
}
}

.breadcrumb ul li:first-child {
padding-left: 0;
}

.breadcrumb ul li {
display: inline-block;
position: relative;
padding: 0 10px;
color: #0044c4;
font-weight: 500;
font-size: 14px;
}

.breadcrumb ul li:first-child:after {
font-family: 'FontAwesome';
content: '\f105';
font-size: 13px;
top: 2px;
right: -5px;
position: absolute;
color: #111;
}

/*----------------------
	1.5. Fixbutton
------------------------------*/

.fixbutton {
position: fixed;
right: 0;
bottom: 0;
margin-top: 0;
z-index: 99;
display: none;
}

.fixbutton li {
display: block;
text-align: right;
margin-bottom: 1px;
}

.fixbutton li a {
display: inline-block;
color: #1f223e;
cursor: pointer;
}

.fixbutton li a span {
width: 0;
background: #0044c4;
padding: 10px;
width: 0;
opacity: 0;
visibility: hidden;
position: absolute;
right: 100%;
white-space: nowrap;
width: auto;
transition: all 500ms ease;
font-weight: 600;
}

.fixbutton li a i {
width: 40px;
height: 40px;
font-size: 15px;
text-align: center;
background: #0044c4;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}

.fixbutton li a:hover {
color: #000;
transition: all 500ms ease;
}

.fixbutton li a:hover span {
opacity: 1;
visibility: visible;
transition: all 500ms ease;
background-color: #0044c4;
color: #fff;
}

.fixbutton li a i:hover,
.fixbutton li a span:hover ~ i {
background-color: #0044c4;
color: #fff;
}

/*---------------------
	1.6. Switch Color
------------------------------*/

.switch-color {
left: -120px;
position: fixed;
top: 150px;
z-index: 1001;
transition: all 500ms ease;
}

.switch-color .icon {
background: #0044c4;
border-color: #ddd;
border-style: solid solid solid none;
border-width: 1px 1px 1px 0;
cursor: pointer;
float: right;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}

.switch-color .icon i {
color: #fff;
font-size: 21px;
}

.switch-color .box {
background: #ffffff;
border: 1px solid #ddd;
border-radius: 0;
cursor: pointer;
float: right;
font-size: 12px;
padding: 6px;
width: 120px;
}

.switch-color .box ul {
display: inline-block;
}

.switch-color .box h4 {
color: #212121;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin: 0;
padding: 5px 0;
text-align: center;
text-transform: uppercase;
}

.switch-color li {
display: block;
}

.switch-color li a {
border: 4px solid #ddd;
display: inline-block;
width: 28px;
height: 28px;
margin: 4px 10px;
}

/*----------------------
	1.7. Circle
------------------------------*/

.circle {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
color: #111;
background: #0044c4;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
}

/*----------------------
	1.8. Pagenation
------------------------------*/

.page {
text-align: center;
display: table;
width: 100%;
margin: 30px 0;
}

.page li {
display: inline-block;
padding: 0 5px;
}

.page li a {
display: block;
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
background: #f6f6f6;
color: #000;
border-radius: 50%;
}

.page li a:hover,
.page li .active {
background: #0044c4;
transition: all 500ms ease;
}

.page li:first-child {
float: left;
}

.page li:last-child {
float: right;
}

.page li:first-child a,
.page li:last-child a {
display: inline-block;
width: auto;
height: auto;
padding: 3px 20px;
border-radius: 30px;
}

/*----------------------
	1.9. Collapse
------------------------------*/

.panel-group .panel {
border: none;
padding: 0;
margin: 0 0 15px;
}

.panel-group.panel:last-child {
margin-bottom: 60px;
}

.panel-group .panel-heading {
padding: 0;
border: none;
}

.panel-group .panel-heading .collapsed {
background: #f2f2f2;
color: #111;
}

.panel-group .panel-heading a:hover,
.panel-group .panel-heading a {
color: #000;
color: #111;
font-size: 14px;
font-weight: 600;
background: #0044c4;
transition: all 500ms ease;
}

.panel-group a {
display: inline-block;
font-size: 17px;
padding: 10px;
position: relative;
width: 100%
}

.panel-group a:before {
content: "";
position: absolute;
top: 40px;
left: 20px;
border: 8px solid #0044c4;
border-color: #0044c4 transparent transparent transparent;
}

.panel-group a.collapsed:before {
display: none;
}

.panel-group .panel-body {
background: #f2f2f2;
padding: 20px;
text-align: justify;
color: #333;
}

/*----------------------
	1.10. Legend
------------------------------*/

.legend {
padding: 35px 15px 10px;
border: 1px solid #e9e9e9;
position: relative;
margin: 60px 0 0;
width: 100%;
}

.legend h6 {
font-size: 22px;
position: absolute;
padding: 15px;
background: #fff;
top: -25px;
left: 5px;
color: #111;
text-transform: capitalize;
}

/*========================
	2. Header
==========================*/

/*------------------------
	2.1. Tophead
--------------------------*/

.tophead {
background: #f2f2f2;
padding: 6px 0;
}

.tophead ul li {
display: inline-block;
padding-left: 30px;
}

.tophead .col-lg-5 ul li:first-child {
padding-left: 0;
}

.tophead ul li,
.tophead ul li a {
font-size: 12px;
font-weight: 600;
line-height: 16px;
color: #333;
text-transform: capitalize;
position: relative;
}

.tophead ul li a {
line-height: 15px;
display: inline-block;
}

.tophead ul li a i {
padding-right: 6px;
color: #0044c4;
}

.tophead ul li a:hover {
color: #0044c4;
}

.tophead ul li a:after {
content: "";
position: absolute;
left: -15px;
top: 0;
width: 1px;
height: 100%;
background: #333;
}

.tophead ul li:first-child a:after {
display: none;
}

/*------------------------
	2.2. Midhead
--------------------------*/

.midhead {
padding: 25px 0 20px;
background: #e5c3b5;
}

@media(max-width: 767px) {
.midhead {
padding: 25px 0 1px;
background: #e5c3b5;
}
}

.midhead .col-lg-3 {
padding: 0 15px;
}

.midhead .col-lg-3 img {
max-width: inherit;
}

.midhead button {
background: transparent;
border: none;
position: absolute;
right: 5px;
top: 0;
height: 100%;
transition: all 500ms ease;
}

.midhead button:hover i,
.midhead .cartbox:hover i {
color: #0044c4;
transition: all 500ms ease;
}

.midhead .cartbox {
display: inline-block;
padding-right: 45px;
transition: all 500ms ease;
position: relative;
}

.midhead .cartbox:last-child {
padding-right: 0;
}

.midhead .cartbox i {
position: relative;
left: 0;
top: 4px;
color: #111;
transition: all 500ms ease;
cursor: pointer;
}

.midhead .cartbox i.fa-angle-down {
position: inherit;
left: inherit;
top: inherit;
}

.midhead .cartbox .shopdata i {
color: #1f223e;
}

.midhead .cartbox .shopdata i:hover {
color: #0044c4;
transition: all 500ms ease;
}

.midhead .cartbox span b {
text-transform: uppercase;
font-size: 16px;
font-weight: 600;
}

.midhead .cartbox span {
position: absolute;
width: 24px;
height: 24px;
background: #0044c4;
text-align: center;
line-height: 24px;
border-radius: 50%;
top: -6px;
left: 21px;
color: #FFF;
font-size: 13px;
}

.midhead .shopdata {
position: absolute;
left: -150px;
top: 100px;
opacity: 0;
visibility: hidden;
width: 300px;
background-color: #fff;
box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.2);
cursor: auto;
transition: all 200ms ease-out 0s;
z-index: 9999;
}

.midhead .basketopen .shopdata {
opacity: 1;
visibility: visible;
top: 67px;
transition: all 200ms ease-out 0s;
}

.midhead .shopdata li {
display: block;
background-color: #f2f2f2;
}

.midhead .shopdata li table {
width: 100%;
}

.midhead .shopdata li table tr {
border-bottom: 1px solid #e1e1e1;
}

.midhead .shopdata li table td {
padding: 8px;
font-size: 12px;
text-align: left;
}

.midhead .shopdata li table td img {
border: 1px solid #ddd;
padding: 5px;
border-radius: 4px;
}

.midhead .shopdata li table td i {
position: inherit;
left: inherit;
top: inherit;
}

.midhead .shopdata .cartbutton {
background-color: #fff;
width: 100%;
padding: 10px;
border-bottom: 0;
padding: 10px;
border-bottom: 0;
display: flex;
justify-content: space-between;
}


.midhead .shopdata .cartbutton a:first-child {
float: left;
background: #000;
color: #fff;
}


.midhead .shopdata .cartbutton a {
background: #0044c4;
color: #fff;
padding: 5px 10px;
transition: all 500ms ease;
}

.midhead .shopdata .cartbutton a:hover {
background: #0044c4;
color: #fff;
transition: all 500ms ease;
}

.midhead .cartbox .cartempty {
/* display: none; */
}


.midhead .cartbox .cartfull {
display: none;
}

.mobile {
display: none;
font: 600 16px;
color: #0044c4 !important;
text-align: right;
cursor: pointer;
}

.mobile:hover i {
color: #0044c4 !important;
}

/*========================
	3. Slider
==========================*/

.slider img {
width: 100%;
}

.slider .carousel-caption {
bottom: inherit;
left: 8%;
padding-bottom: 30px;
right: inherit;
text-align: left;
top: 20%;
width: 100%;
text-shadow: none;
}

.slider .carousel-caption h2 {
color: #111;
text-transform: capitalize;
opacity: 0;
}

.slider .carousel-caption h3 {
color: #222;
text-transform: capitalize;
letter-spacing: 4px;
opacity: 0;
}

.slider .carousel-control {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
background: transparent;
color: #000;
text-shadow: none;
top: 50%;
margin-top: -20px;
opacity: 1;
transition: all 500ms ease;
}

.slider .carousel-control:hover {
color: #0044c4;
transition: all 500ms ease;
}

.slider .carousel-control.left {
left: 0;
opacity: 0;
transition: all 500ms ease;
}

.slider .carousel-control.right {
right: 0;
opacity: 0;
transition: all 500ms ease;
}

.slider:hover .carousel-control.left {
left: 30px;
opacity: 1;
transition: all 500ms ease;
}

.slider:hover .carousel-control.right {
right: 30px;
opacity: 1;
transition: all 500ms ease;
}

.slider .carousel-indicators li {
border: 1px solid #1f223e;
}

.slider .carousel-indicators .active {
background-color: #0044c4;
border: 1px solid #0044c4;
}

.slider .item.active .carousel-caption h2,
.home4 .slider .owl-item.active .carousel-caption h2 {
animation-name: bounceInDown;
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInDown;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
opacity: 1;
}

.slider .item.active .carousel-caption h3,
.home4 .slider .owl-item.active .carousel-caption h3 {
animation-name: bounceInUp;
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
opacity: 1;
animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
}

.slider .carousel-indicators li,
.slider .carousel-indicators li.active {
width: 30px;
height: 5px;
border-radius: 2px;
border: none;
margin: 0;
}

.slider .carousel-indicators li {
background: rgba(0, 0, 0, 0.6);
}

.carousel-caption {
position: absolute;
top: 0;
left: 0;
padding-top: 0;
padding-bottom: 0;
text-align: left;
width: 100%;
z-index: 9;
right: 0;
display: flex;
align-items: center;
}

.carousel-caption h1 {
color: #ffffff;
font-size: 60px;
margin: 0 0 15px 0;
text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.68);
}

.carousel-caption .btn-primary {
background-color: #ffffff;
height: 50px;
color: #000000;
}
.carousel-caption .btn-primary:hover {
background-color: #ff6600;
color: #ffffff;
}
/*======================== 4. HomeBanner ==========================*/
.homebanner {
margin: 80px 0 0 0;
background: #ffffff;
}

.homebanner h2 {
margin: 0 0 10px 0;
}

.homebanner .product-card {
margin: 0;
border: 1px solid #dbe5f5;
border-radius: 5px;
overflow: hidden;
}

.homebanner .product-card .product-img {
height: 240px;
width: 100%;
}

.homebanner .product-card .product-img img {
border-radius: 5px 5px 0 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}

.homebanner .product-card .product-detail {
padding: 15px;
margin: 0;
text-align: center;
background-color: #f5f5f5;
}

.homebanner .product-card .product-detail h4 {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: #333333;
min-height: 50px;
transition: ease-in-out all 0.2s;
}

.homebanner .product-card .product-detail:hover h4 {
color: #0044c4;
}

.homebanner .product-card .product-detail h6 {
margin: 0;
font-size: 15px;
text-transform: uppercase;
color: #ff6600;
transition: ease-in-out all 0.2s;
}

.homebanner .product-card .product-detail:hover h6 {
color: #000000;
}

.homebanner .box {
position: relative;
overflow: hidden;
display: block;
width: 100%;
}

.homebanner .box img {
border-radius: 10px;
}

.homebanner .box .overlay:after {
left: 0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}

.homebanner .box .overlay:before {
right: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}

.homebanner .box .overlay:after,
.homebanner .box .overlay:before {
content: "";
position: absolute;
top: 0;
width: 0;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.12);
transition: all 500ms ease;
}

.homebanner .box:hover .overlay:after,
.homebanner .box:hover .overlay:before {
width: 50%;
transition: all 500ms ease;
}

.homebanner .box .overlay {
display: flex;
/* background: rgba(0, 0, 0, 0.2); */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all 500ms ease;
text-align: center;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 15px;
overflow: hidden;
}

.homebanner .box .box-content {
position: relative;
margin: -50px auto 0 auto;
width: 90%;
height: 50px;
/* background: #ffffffc2; */
display: flex;
justify-content: center;
align-items: center;
padding: 0;
transition: ease-out 0.3s;
z-index: 2;
backdrop-filter: blur(6px);
border-radius: 10px;
bottom: 15px;
text-align: center;
}

.homebanner .box:hover .overlay {
background: rgba(0, 0, 0, 0.12);
transition: all 500ms ease;
/* z-index: 1; */
/* content: ''; */
/* position: absolute; */
/* top: 0; */
/* right: 0; */
/* bottom: 0; */
/* left: 0; */
/* background: -moz-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%); */
/* background: -webkit-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%); */
/* background: -webkit-gradient(linear, left top, left top, from(transparent), color-stop(18%, transparent), color-stop(99%, rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0.8))); */
/* background: -o-linear-gradient(top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%); */
/* background: linear-gradient(to top, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.8) 99%, rgba(0, 0, 0, 0.8) 100%); */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ); */
}

.homebanner .box .overlay .btn-custom {
opacity: 0;
-o-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.homebanner .box:hover .overlay .btn-custom {
opacity: 1;
}

.homebanner .box .box-content h4 {
color: #000000;
position: relative;
z-index: 2;
font-size: 21px;
margin: 0;
}

/*========================
	5. Product
==========================*/


.product:hover .owl-nav .owl-prev {
left: -30px;
opacity: 1;
transition: all 500ms ease;
}

.product:hover .owl-nav .owl-next {
right: -30px;
opacity: 1;
transition: all 500ms ease;
}

.product .owl-nav .owl-prev,
.product .owl-nav .owl-next {
position: absolute;
left: -50px;
bottom: 46%;
color: #fff;
width: 40px;
height: 40px;
opacity: 0;
line-height: 40px;
border-radius: 50%;
text-align: center;
background: #0044c4;
transition: all 500ms ease;
}

.product .owl-nav .owl-next {
left: inherit;
right: -50px;
}

.product .owl-nav .owl-prev:hover,
.product .owl-nav .owl-next:hover {
background-color: #6d8f16;
transition: all 500ms ease;
}

.col-lg-9 .product {
padding: 0;
display: table;
width: 100%;
}

/*========================
	6. Support
==========================*/

.support {
padding: 80px 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: 50% 87.9739%;
position: relative;
}

/* 
.support:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
} */

.support i {
display: inline-block;
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
background: #0044c4;
color: #fff;
position: relative;
z-index: 1;
transition: all 500ms ease;
}

.support .box:hover i {
background-color: #6d8f16;
transition: all 500ms ease;
}

.support h6 {
font-size: 18px;
position: relative;
z-index: 1;
margin: 20px 0;
}

.support p {
text-align: center;
position: relative;
z-index: 1;
}

.support .box {
display: block;
transition: all 500ms ease;
}

.support .box:hover i,
.support:hover .box p {
color: #fff;
}

.icci-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}

.icci-stats-detail {
padding: 24px;
border-radius: 0;
margin: 0;
text-align: center;
background-color: transparent;
border-right: 1px solid #dbe5f5;
display: flex;
align-items: center;
flex-direction: column;
height: 100%;
width: 100%;
justify-content: center;
}

.icci-stats-detail:last-child {
border-right: none;
}

.icci-stats-detail img {
width: 80px;
margin: 0 0 20px 0;
}

.icci-stats-detail h6 {
margin: 0 0 15px 0;
}

.icci-stats-detail p {
margin: 0;
}


/*========================
	8. Blog
==========================*/

.blog {
background: #efefef;
padding: 40px 0;
}

.blog .box {
background: #fff;
box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.06);
}

.blog .blogsidebar {
position: relative;
}

.blog .bloginner {
position: relative;
}

.blog .overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 15px;
background: rgba(0, 0, 0, 0.6);
}

.blog .overlay ul li {
display: inline-block;
padding-right: 15px;
border-right: 1px solid #fff;
}

.blog .overlay ul li:last-child {
border-right: none;
padding-left: 15px;
}

.blog .overlay ul li a {
color: #fff;
}

.blog .overlay ul li a:hover,
.blog .read:hover {
color: #0044c4;
}

.blog .overlay ul li a i {
color: #0044c4;
padding-right: 5px;
}

.blog .head {
display: block;
padding: 15px 15px 0 15px;
color: #333;
text-transform: uppercase;
}

.blog p {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #444;
padding: 15px;
}

.blog .read {
font: 600 13px/20px;
color: #333;
text-transform: capitalize;
display: inline-block;
padding: 0 0 15px 15px;
}

/**********Blog Inner **********/

.blog.in {
background: #fff;
padding-bottom: 20px;
}

.blog.in.col-lg-9 {
padding: 0;
}

.blog.in .box {
margin-bottom: 30px;
}

/*========================
	9. Client
==========================*/

.client {
padding: 30px 0;
background: #fff;
text-align: center;
}

/* .client .item:hover img { */
/* filter: grayscale(0); */
/* transition: all 500ms ease; */
/* } */

.client img {
width: auto !important;
display: inline-block !important;
}

.client .owl-prev,
.client .owl-next {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
background: #0044c4;
color: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
margin-top: -15px;
}

.client .owl-prev {
left: 0;
}

.client .owl-next {
right: 0;
}

/*========================
	10. Newsletter
==========================*/

.newsletter {
padding: 30px 0;
background: #000000;
}

.newsletter h5 {
color: #fff;
padding-left: 90px;
position: relative;
text-align: left;
margin-bottom: 0;
}

.newsletter h5 i {
position: absolute;
left: 0;
top: -2px;
}

.newsletter span {
color: #fff;
font: 500 13px;
text-transform: capitalize;
display: block;
}

.newsletter input[type="text"] {
width: 100%;
padding: 13px 120px 13px 15px;
font: 600 13px;
color: #333;
border: none;
background: #efefef;
}

.newsletter input[type="text"]::-moz-placeholder {
opacity: 1;
color: #333;
}

.newsletter input[type="text"]::-webkit-input-placeholder {
opacity: 1;
color: #333;
}

.newsletter input[type="submit"] {
border: none;
position: absolute;
right: 15px;
top: 0;
margin-top: 0;
font-size: 12px;
font-weight: 600;
padding: 12px 20px;
background-color: #6d8F16;
color: #fff;
}

.newsletter input[type="submit"]:hover {
background: #000;
}

.newsletter ul {
margin-top: 15px;
}

.newsletter ul li {
display: inline-block;
}

.newsletter ul li:first-child a {
border-left: none;
}

.newsletter ul li a {
font-size: 14px;
color: #fff;
line-height: 14px;
display: block;
border-left: 1px solid #fff;
padding: 0 15px;
}

.newsletter ul li a:hover {
color: #0044c4;
}

/*========================
	11. Footer
==========================*/

.footheading {
font-size: 16px;
padding-bottom: 0;
position: relative;
margin: 0 0 15px 0; 
}

/* 
.footheading:after {
    bottom: -4px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 60px;
    background-color: #0044c4;
} */

.footer {
padding: 60px 0 30px 0;
background-color: #effefd;
}

.f-logo {
width: 220px;
}

.f-logo a img {
border-radius: 10px;
}

.footer ul li {
font-size: 15px;
display: flex;
gap: 10px;
align-items: center; 
}

.footer .other {
margin: 30px 0;
border-top: 1px solid #ccc;
padding: 30px 0 0 0;
clear: both;
}

.footer .other li {
display: inline-block;
padding: 0 15px;
margin-bottom: 7px;
position: relative;
}

.footer .other li:after {
background: #1f223e;
content: "";
height: 10px;
position: absolute;
right: 0;
top: 7px;
width: 1px;
}

.footer .other li:last-child:after {
display: none;
}

.footer .list-with-icon li i {
font-size: 15px;
height: 40px;
width: 40px;
min-height: 40px;
min-width: 40px;
background-color: #0044c4;
text-align: center;
color: #ffffff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.footer .list-with-icon li a {
transition: ease-in-out all 0.2s;
}

.footer .list-with-icon li:hover a {
color: #ff6600;
}

.copyright {
background: #d3e9e7;
height: 50px;
display: flex;
align-items: center;
}

.copyright p {
margin: 0;
}

.copyright a { 
transition: all 500ms ease;
}

.copyright a:hover {
text-decoration: none;
transition: all 500ms ease;
color: #ff6600;
}

/*========================
	12. Inner Page CSS
==========================*/

/*-------------------------
	12.1. About US
--------------------------*/

.about {
background: #fff;
padding: 60px 0;
}

.about p {
padding: 0 0 30px 0;
}

.about .left li {
position: relative;
padding-left: 15px;
list-style-type: none;
}

.about .left li a {
display: block;
padding: 5px 0 15px;
font-size: 14px;
cursor: pointer;
}

.about .left li:before {
content: "\f105";
font-family: "FontAwesome";
font-size: 20px;
display: inline-block;
position: absolute;
left: 0;
top: 2px;
color: #0044c4;
}

.about .legend p {
padding-bottom: 15px;
}

.about .legend .name {
font-size: 13px;
font-weight: 600;
color: #0044c4;
}

.about .legend .name span {
font-weight: 500;
font-size: 18px;
color: #111;
}

.about .legend .owl-prev,
.about .legend .owl-next {
width: 30px;
height: 30px;
line-height: 25px;
background: #fff;
position: absolute;
top: -50px;
border: 2px solid #e9e9e9;
border-radius: 50%;
color: #efefef;
text-align: center;
transition: all 500ms ease;
}

.about .legend .owl-prev:hover,
.about .legend .owl-next:hover {
background: #0044c4;
border-color: #0044c4;
color: #000;
transition: all 500ms ease;
}

.about .legend .owl-prev i,
.about .legend .owl-next i {
font-size: 12px;
}

.about .legend .owl-prev {
right: 45px;
}

.about .legend .owl-next {
right: 10px;
}

/*------------------------
	12.2. Warranty
---------------------------*/

.warranty {
padding: 60px 0;
}

.warranty .inheading i {
padding-right: 10px;
color: #0044c4;
}

/*-------------------------
	12.3. Help Support
---------------------------*/

.help,
.affiliate {
background: #fff;
padding: 60px 0;
}

.help .box {
margin: 60px 0 0;
position: relative;
padding-left: 60px;
}

.help .box i {
color: #0044c4;
position: absolute;
left: 0;
top: 5px;
}

.help .box b {
color: #444;
text-transform: capitalize;
font-size: 20px;
display: block;
padding-bottom: 15px;
font-weight: 600;
}

/*-------------------------
	12.4. sitemap
--------------------------*/

.sitemap {
padding: 0 0 60px;
}

.sitemap .list {
margin: 15px 0;
}

.sitemap ul li {
display: block;
padding: 7px 0;
}

.sitemap ul li a::before {
margin-right: 10px;
font-size: 14px;
font-family: 'FontAwesome';
display: inline-block;
top: 5px;
content: '\f105';
}

/*------------------------
	12.5. Blog Sidebar
--------------------------*/

.blogsidebox {
background: #f6f6f6;
padding: 15px;
margin-bottom: 30px;
}

.blogsidebox input[type="text"] {
width: 100%;
position: relative;
padding: 10px 15px;
border: 1px solid #d9dcde;
}

.blogsidebox input[type="text"]:focus {
border-color: #0044c4;
transition: all 500ms ease;
}

.blogsidebox button {
position: absolute;
top: 16px;
right: 31px;
padding: 10px 15px;
border: none;
}

.blogsidebox h4 {
text-transform: uppercase;
color: #333;
border-left: 3px solid #0044c4;
padding-left: 10px;
}

.blogsidebox .cat li,
.blogsidebox .post li {
display: block;
margin-bottom: 7px;
}

.blogsidebox .cat li:last-child,
.blogsidebox .post li:last-child {
margin-bottom: 0;
}

.blogsidebox .cat li a {
font: 14px/20px;
color: #333;
padding-left: 15px;
position: relative;
display: block;
padding-top: 0;
}

.blogsidebox .cat li a:hover {
color: #0044c4;
transition: all 500ms ease;
}

.blogsidebox .cat li a i {
position: absolute;
left: 0;
top: 4px;
color:;
}

.blogsidebox a span {
padding-left: 85px;
display: block;
font-size: 14px;
font-weight: 600;
padding-bottom: 5px;
}

.blogsidebox .tag ul li {
display: inline-block;
margin-right: 10px;
margin-top: 10px;
}

.blogsidebox .tag ul li a {
padding: 7px 12px;
background: #1f223e;
color: #fff;
display: block;
}

.blogsidebox .tag ul li a:hover {
background: #0044c4;
transition: all 500ms ease;
color: #000;
}

.blogsidebox .post li {
display: table;
width: 100%;
}

.blogsidebox .post .date {
color: #0044c4;
font-size: 12px;
font-weight: 600;
}

.blogsidebox .follow li {
display: inline-block;
margin-right: 10px;
}

.blogsidebox .follow li a i {
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
color: #fff;
}

.blogsidebox .follow li a {
display: block;
position: relative;
}

.blogsidebox .follow .fa-facebook {
background: #3b5998;
}

.blogsidebox .follow .fa-twitter {
background: #1da1f3;
}

.blogsidebox .follow .fa-linkedin {
background: #0077b5;
}

.blogsidebox .follow .fa-google-plus {
background: #dd4b39;
}

.blogsidebox .follow .fa-pinterest-p {
background: #bd081c;
}

.blogsidebox .follow .fa-vimeo {
background: #1ab7ea;
}

/*------------------------
	12.6. Blog Details
--------------------------*/

.blogdetail .blogimg {
width: 100%;
}

.blogin {
padding: 50px 0;
}

.blogin h4 {
padding-top: 20px;
}

.blogin .blogsidebox h4 {
padding-top: 0;
}

.blogin span a {
cursor: pointer;
columns: #0044c4;
display: inline-block;
margin-bottom: 15px;
}

.blogin span a:hover {
text-decoration: underline;
}

.social {
display: table;
width: 100%;
}

.social .fa-tags {
margin-right: 10px;
}

.social ul li {
display: inline-block;
float: right;
position: relative;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}

.social ul li:first-child {
float: left;
padding-left: 0;
}

.social ul.share li,
.social ul.share li:first-child {
float: inherit;
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
}

.social .share a {
display: block;
}

.social .share i {
display: block;
color: #fff;
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
}

.social .share .fa-facebook {
background: #3b5998;
}

.social .share .fa-twitter {
background: #44ccf6;
}

.social .share .fa-google-plus {
background: #f00;
}

.social .share {
position: absolute;
right: -15px;
top: -50px;
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
}

.social .share li {
margin-right: 0;
display: table-cell;
}

.social li:hover .share {
opacity: 1;
visibility: visible;
top: -20px;
transition: all 500ms ease;
}

.social li:hover .share:after {
content: "";
top: 30px;
left: 37px;
position: absolute;
border: 8px solid #44ccf6;
border-color: #44ccf6 transparent transparent transparent;
}

.social .fa-heart {
color: #f00;
}

.social .fa-share-alt {
color: #44ccf6;
}

.comments {
padding: 20px 0;
}

.comments img {
border-radius: 50%;
}

.comments h6 {
font-size: 15px;
margin-bottom: 10px;
}

.comments .commentbox {
padding: 20px;
background: #f6f6f6;
}

.comments .commentbox span {
font-size: 14px;
font-weight: 400;
}

.comments .commentbox a {
float: right;
}

/*-------------------------
	12.7. Features Listing Page
---------------------------*/

.incategory {
padding: 50px 0;
}

.incategory h6 {
margin-bottom: 0;
}

.lcate {
margin-bottom: 30px;
background-color: #f5f5f7;
border-radius: 10px;
padding: 24px 15px;
border: 1px solid #dbe5f5;
}

.lcate ul {
padding: 0;
}

.lcate ul .cdown {
cursor: pointer;
}

.lcate h6 {
margin: 0 0 5px 0;
}

.lcate ul li {
display: block;
position: relative;
border-bottom: 1px solid #dbe5f5;
padding: 10px 0;
}

.lcate ul li:last-child {
padding-bottom: 0;
border-bottom: none;
}

.lcate ul li a {
display: block;
cursor: pointer;
position: relative;
display: flex;
cursor: pointer;
align-items: center;
justify-content: space-between;
}

.lcate ul li a::after {
content: "\f285";
font-family: bootstrap-icons !important;
font-size: 14px;
}

.lcate ul li span {
position: absolute;
right: 0;
top: 0;
}

.lcate ul li.open a.active {
color: #0044c4;
}

.lcate ul li ul {
margin-left: 15px;
padding-top: 10px;
display: none;
}

.lcate ul li input[type="radio"] {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 14px;
height: 14px;
}

.lcate ul.color li label:after {
content: '';
position: absolute;
left: 0;
top: 3px;
width: 14px;
height: 14px;
background: #ddd;
}

.lcate ul.color li input[type="radio"]:checked + label:after,
.lcate ul li label:hover:after {
background: #0044c4;
}

.lcate ul.color li input[type="radio"]:checked + label {
color: #0044c4;
}

.lcate ul.color li label {
padding-left: 20px;
font-weight: normal;
display: block;
color: #111;
line-height: 20px;
}

.lcatesize ul li {
display: inline-block;
position: relative;
}

.lcatesize ul li label {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #000;
font-weight: 600;
background: #ddd;
padding-left: 0;
display: block;
transition: all 500ms ease;
}

.lcatesize ul li input[type="radio"] {
width: 30px;
height: 30px;
margin-top: 0;
}

.lcatesize ul li input[type="radio"]:checked + label,
.lcatesize ul li:hover label {
background: #0044c4;
}

.lcatesize ul li input[type="radio"]:checked + label {
color: #000;
}

.lcateimg {
position: relative;
overflow: hidden;
}

.lcateimg:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
transform: scale(1);
transition: all 500ms ease;
}

.lcateimg:hover:after {
transform: scale(0);
transition: all 500ms ease;
}

.lcateimg .inover {
position: absolute;
left: 50%;
top: 50%;
margin-top: -40px;
margin-left: -20px;
opacity: 0;
text-align: center;
}

.lcateimg:hover .inover {
opacity: 1;
transition: all 500ms ease;
}

.lcateimg .inover h3 {
font-size: 24px;
color: #fff;
text-transform: uppercase;
}

.incategory .iconbar {
padding: 10px 20px;
background: #f6f6f6;
margin-top: 30px;
}

.incategory .iconbar li {
display: inline-block;
padding-right: 10px;
}

.incategory .iconbar li:last-child {
float: right;
line-height: 30px;
}

.incategory .iconbar li a {
font-size: 20px;
cursor: pointer;
}

.incategory .iconbar li a.active {
color: #0044c4;
}

.incategory .product .proimg.col-lg-3 {
padding: 0;
}

.incategory .product .rating.col-lg-9,
.incategory .product p.col-lg-9,
.incategory .product .price.col-lg-9 {
text-align: left;
}

.incategory .product p.col-lg-9 {
line-height: 20px;
text-align: justify;
}

.incategory .catedetail {
display: none;
padding: 0 15px;
}

/*========================
	12.8. Features Detail 
==========================*/

.detail {
padding: 50px 0;
}

.detail h4 {
color: #111;
font-size: 26px;
font-weight: 400;
padding-bottom: 10px;
}

.detail .price {
color: #1f223e;
font-size: 26px;
font-weight: 600;
}

.detail .brand li {
display: block;
line-height: 24px;
}

.detail .brand li a {
color: #1f223e;
}

.detail #clockdiv,
.detail .colors,
.detail .dicon {
margin-top: 20px;
}

.detail #clockdiv li {
display: inline-block;
text-align: center;
background: #ddd;
color: #111;
padding: 5px 10px;
border-radius: 5px;
margin-right: 10px;
}

.detail .lcate h6 {
padding-top: 0;
margin-bottom: 0;
}

.detail #clockdiv li label {
color: #111;
}

.detail #clockdiv li span {
display: block;
font-size: 10px;
}

.detail h6 {
padding-top: 24px;
margin-bottom: 5px;
text-transform: uppercase;
font-size: 16px;
color: #111;
}

.detail .colors li {
display: inline-block;
position: relative;
}

.detail .colors li input[type="radio"] {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}

.detail .colors li input[type="radio"]:checked + label:after {
display: block;
}

.detail .colors li label {
width: 20px;
height: 20px;
background: #ffdd00;
position: relative;
}

.detail .colors li label:after {
content: '\f00c';
position: absolute;
left: 4px;
top: -4px;
font-family: 'FontAwesome';
font-size: 12px;
font-weight: 400;
color: #000;
display: none;
}

.detail .colors li.blue label {
background: #0db6e0;
}

.detail .colors li.lime label {
background: #96ff9a;
}

.detail .colors li.silver label {
background: #e0e0e0;
}

.detail .colors li.pink label {
background: #e67cbf;
}

.detail .incrtevalue li,
.detail .dicon li {
display: inline-block;
}

.detail .incrtevalue li:first-child {
margin-right: 20px;
}

.detail .incrtevalue li {
margin-right: 5px;
}

.detail .incrtevalue li input[type="text"] {
width: 40px;
text-align: center;
padding: 11px 5px;
float: left;
margin-top: 15px;
background: transparent;
border: 1px solid #ddd;
}

.detail .dicon li:first-child {
color: #000;
font-weight: 600;
padding-right: 10px;
}

.detail .dicon li a {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
display: block;
background: rgb(59, 89, 152);
transform: translateY(0);
}

.detail .dicon li a:hover {
transform: translateY(-4px);
}

.detail .dicon li:nth-child(3) a {
background: rgb(29, 161, 242);
}

.detail .dicon li:nth-child(4) a {
background: rgb(203, 32, 39);
}

.detail .dicon li:nth-child(5) a {
background: rgb(220, 78, 65);
}

.detail .dicon li:nth-child(6) a {
background: rgb(255, 101, 80);
}

.detail .detailtab {
margin-top: 40px;
}

.detail .detailtab table {
width: 100%;
}

.detail .detailtab .panel-body tr td {
padding: 10px;
color: #999;
}

.detail .detailtab .panel-body tr td:first-child {
color: #000;
}

.detail .product {
display: inline-block;
width: 100%;
padding: 20px 0 50px;
}

.detail .detailtab input[type="text"],
.detail .detailtab textarea {
background-color: #fff;
margin-bottom: 10px;
}

.detail .detailtab .rating li {
display: inline-block;
cursor: pointer;
}

.detail .detailtab .rating li.active {
color: #0044c4;
}

.detail .detailtab .rating li:first-child {
padding-right: 10px;
cursor: auto;
}

.quickView,
.thumbView {
width: 100%;
position: relative;
overflow: hidden;
}

.quickView .imgLarge {
position: absolute;
display: none;
cursor: crosshair;
max-width: inherit;
}

.quickView .imgSmall {
width: 100%;
background: #fff;
padding: 4px;
border: 1px solid #ddd;
}

.thumbView {
left: 0;
display: block;
}

.thumbView a {
padding: 10px 5px;
}

.thumbView a img,
.cloud-zoom img {
border: 1px solid #ddd;
}

.cloud-zoom img {
width: 100%;
margin-bottom: 15px;
}

.thumb {
width: 90%;
border: 1px solid #ddd;
padding: 1px;
margin: 10px 5%;
cursor: pointer;
}

#controler {
width: 100%;
display: block;
overflow: hidden;
position: relative;
}

#controler .pagerPrev,
#controler .pagerNext {
position: absolute;
top: 0;
z-index: 111;
width: 40px;
height: 100%;
font-size: 3em;
color: #000;
cursor: pointer;
}

#controler .pagerPrev {
left: 0;
}

#controler .pagerNext {
right: 0;
}

#controler .pagerPrev:hover {
background: rgba(255, 255, 255, .8);
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .5) 100%);
}

#controler .pagerNext:hover {
background: rgba(255, 255, 255, .8);
background: linear-gradient(to right, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 1) 100%);
}

#controler .pagerPrev i,
#controler .pagerNext i {
position: absolute;
bottom: 50%;
width: 40px;
height: 16px;
line-height: 32px;
text-align: center;
}

/*------------------------
	12.9. Cart
--------------------------*/

.cart table {
width: 100%;
border: 1px solid #eee;
}

.cart table tr:first-child {
background: #eee;
border-bottom: none;
}

.cart table tr {
border-bottom: 1px solid #ddd;
}

.cart table tr th,
.cart table td {
border-right: 1px solid #ddd;
padding: 10px;
}

.cart table tr th:last-child {
border-right: none;
}

.cart table tr td img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}

.cart table td ul li {
display: table-cell;
}

.cart table td ul li:first-child {
width: 60px;
max-width: 100%;
}

.cart table td ul li:first-child input[type="text"] {
width: 100%;
background: #dddddd;
border: 1px solid transparent;
padding: 5px 10px;
}

.cart table td ul li button {
background: #999;
border: 1px solid transparent;
padding: 5px 18px;
color: #fff;
}

.cart table td ul li:last-child button {
background: #0044c4;
color: #000;
}

.cart #accordionone .commentext {
width: 100%;
padding: 12px;
background: #dddddd;
border: 1px solid transparent;
}

.cart #accordionone label {
padding-top: 10px;
}

.cart #accordionone #collapseTwo p {
padding-bottom: 20px;
}

.cart #accordionone #collapseTwo .commentext {
margin-bottom: 10px;
}

.cart #accordionone #collapseTwo label {
text-align: right;
line-height: 20px;
font-weight: 400;
}

.cart .totaldata {
padding: 40px 0;
}

.cart .totaldata table tr:first-child {
background: transparent;
}

.cart .endbutton {
margin-bottom: 40px;
}

.cart .endbutton a:first-child {
background-color: #ddd;
color: #000;
}

.cart .endbutton a:last-child {
float: right;
}

/*-------------------------
	12.10. checkout
---------------------------*/

.checkout {
padding: 0 0 60px 0;
}

.checkout ul {
padding: 0 15px;
}

.checkout ul li {
display: inline-block;
}

.checkout ul li a {
font: 600 14px/14px;
display: block;
position: relative;
padding: 0 15px 0 0;
}

.checkout ul li a:after {
content: "";
position: absolute;
right: 5px;
width: 1px;
height: 100%;
background: #ccc;
}

.checkout ul li:last-child a:after {
display: none;
}

.checkout ul li.active a {
color: #0044c4;
}

.checkout input[type="submit"] {
border: none;
padding: 10px 15px;
margin-bottom: 15px;
}

.checkout p {
margin-top: 30px;
position: relative;
}

.checkout .para {
padding-left: 15px;
margin-bottom: 15px;
}

.checkout a.para {
display: block;
padding: 15px 0 0 0;
cursor: pointer;
}

.checkout .invoice {
padding-top: 5px;
}

.checkout p b {
display: block;
}

.checkout .col-lg-8 p {
margin: 0;
}

.checkout p label {
font: 600 12px/20px;
padding-bottom: 25px;
}

.checkout .example {
margin: 15px 0 !important;
}

.checkout form .form-control.last {
margin-top: 0;
}

.checkout table {
width: 100%;
}

.checkout .cartbox table {
display: none;
transition: all 500ms ease;
}

.checkout table.open {
display: table;
transition: all 500ms ease;
}

.checkout table tr td {
padding: 15px 0 0 0;
}

.checkout table tr td b {
display: block;
text-align: right;
color: #333;
font: 600 14px;
}

.checkout table.ltable {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #efefef;
}

.checkout .secure {
margin: 25px 0 0;
padding: 0;
}

.checkout .secure li {
padding: 0 0 25px 45px;
position: relative;
font: 600 14px/20px;
display: block;
}

.checkout .secure li i {
position: absolute;
left: 0;
top: 0;
color: #0044c4;
}

.checkout .disable.opacity {
opacity: 0.6;
transition: all 500ms ease;
}

/*------------------------ 12.12. Team CSS --------------------------*/

.team {
padding: 30px 0;
}

.team .fig {
position: relative;
overflow: hidden;
margin-top: 30px;
}

.team .figcaption {
position: absolute;
left: 0;
bottom: 0;
height: 0;
width: 100%;
background: rgba(149, 196, 31, 0.8);
transition: all 500ms ease;
}

.team figure:hover .figcaption {
height: 100%;
transition: all 500ms ease;
}

.team .figcaption .social {
opacity: 0;
visibility: hidden;
}

.team figure:hover .figcaption .social {
opacity: 1;
visibility: visible;
}

.team .social {
position: absolute;
bottom: 20%;
width: 100%;
text-align: center;
}

.team .social a {
display: inline-block;
color: #fff;
margin: 0 5px;
font-size: 24px;
}

.team .social a:hover {
color: #000;
transition: all 500ms ease;
}

.team .name {
background: #eee;
padding: 10px;
text-align: center;
border: 1px solid #ccc;
border-top: none;
}

.team .fig:before,
.team .fig:after {
border-top: 1px solid #fff;
content: "";
position: absolute;
left: 15px;
right: 100%;
top: 15px;
z-index: 1;
}

.team figure:hover .fig:before,
.team figure:hover .fig:after {
right: 15px;
transition: all 500ms ease;
transition-delay: 0.5s;
}

.team .fig:after {
right: 15px;
left: 100%;
bottom: 15px;
top: inherit;
z-index: 1;
}

.team figure:hover .fig:after {
left: 15px;
}

.team .figcaption:before,
.team .figcaption:after {
border-left: 1px solid #fff;
content: "";
position: absolute;
right: 15px;
bottom: 100%;
top: 15px;
z-index: 1;
}

.team figure:hover .figcaption:before,
.team figure:hover .figcaption:after {
bottom: 15px;
transition: all 500ms ease;
transition-delay: 0.5s;
}

.team .figcaption:after {
left: 15px;
top: 100%;
bottom: 15px;
right: inherit;
z-index: 1;
}

.team figure:hover .figcaption:after {
top: 15px;
}

/*--------------------------
	12.13. Contact
---------------------------*/

.contact {
padding: 30px 0;
}

.contact input[type="text"],
.contact textarea {
width: 100%;
padding: 10px;
display: block;
margin: 30px 0 0 0;
color: #666;
border: 1px solid #efefef;
background: #efefef;
font-size: 13px;
}

.contact input[type="text"]::-moz-placeholder {
color: #666;
opacity: 1;
}

.contact input[type="text"]::-webkit-input-placeholder {
color: #666;
opacity: 1;
}

.contact textarea::-moz-placeholder {
color: #666;
opacity: 1;
}

.contact textarea::-webkit-input-placeholder {
color: #666;
opacity: 1;
}

.contact input[type="text"]:focus,
textarea:focus {
outline: none;
}

/*--------------------------
	12.14. Error
----------------------------*/

.error {
font-weight: normal;
color: red;
}

.error h2 {
font-size: 160px;
}

.error p {
color: #000;
text-align: center;
font-size: 25px;
margin-bottom: 50px;
}

/* ---------------------------
     12.15. Comming Soon
----------------------------- */

.soonbox .cd-headline.clip span {
display: inline-block;
padding: .2em 0;
}

.soonbox .cd-headline.clip .cd-words-wrapper {
overflow: hidden;
vertical-align: top;
}

.soonbox .cd-headline.clip .cd-words-wrapper::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background-color: #aebcb9;
}

.soonbox .cd-headline.clip b {
opacity: 0;
}

.soonbox .cd-headline.clip b.is-visible {
opacity: 1;
}

.soonbox .icon ul li {
display: inline-block;
padding: 0 15px 0 0;
}

.soonbox .icon ul li a {
display: block;
}

.soonbox .icon ul li i {
color: #fff;
font-size: 20px;
}

.soonbox .icon ul li a:hover i {
color: rgb(149, 196, 31);
}

.soonbox .foot {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
padding: 0 15px;
}

.soonbox .foot p {
font: 500 14px/30px;
padding: 0;
color: rgba(255, 255, 255, 0.8);
text-align: right;
}

/*------------------------ 13.1. Categorie -------------------------*/

#categorie .modal-header {
background: #0044c4;
color: #fff;
}

#categorie .modal-header h5.modal-title {
color: #fff;
font-weight: 400;
font-size: 20px;
}

#categorie .modal-header h5.modal-title i {
padding-right: 10px;
font-size: 16px;
}

#categorie .modal-header .close {
text-shadow: none;
opacity: 1;
color: #fff;
margin-top: -25px;
}

#categorie .modal-body {
padding: 20px;
}

#categorie .modal-body ul li {
border-bottom: 1px solid #ddd;
display: block;
padding-bottom: 10px;
margin-bottom: 10px;
position: relative;
}

#categorie .modal-body ul li:last-child {
margin-bottom: 0;
border-bottom: none;
}

#categorie .modal-body ul li a {
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
display: block;
}

#categorie .modal-body ul li a:hover i {
color: #0044c4;
transition: all 500ms ease;
}

#categorie .modal-body ul li i {
position: absolute;
right: 0;
top: 4px;
color: #ddd;
}

/*------------------------- 13.2. View ---------------------------*/
#views .modal-content {
border-radius: 0;
}

#views .detail {
padding: 30px 15px;
}

#views .modal-dialog {
width: 700px;
}

#views .close {
position: absolute;
right: 0px;
z-index: 99;
width: 25px;
height: 25px;
background: #0044c4;
opacity: 1;
text-shadow: none;
top: -25px;
transition: all 500ms ease;
}

#views .close:hover {
background: #0044c4;
color: #fff;
transition: all 500ms ease;
}

#views img {
margin-top: 15px;
}

/*------------------------ 13.3. Newsletter --------------------------*/

#newsletter .modal-header {
border-bottom: none;
position: relative;
z-index: 1;
}

#newsletter .modal-header .modal-title {
text-align: center;
text-transform: uppercase;
color: #1f223e;
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}

#newsletter .modal-header p {
text-align: center;
font-weight: 600;
line-height: 20px;
margin-bottom: 15px;
}

#newsletter .close {
position: absolute;
right: 0px;
z-index: 99;
width: 25px;
height: 25px;
background: #0044c4;
opacity: 1;
text-shadow: none;
top: -25px;
transition: all 500ms ease;
color: #fff;
}

#newsletter .close:hover {
background: #0044c4;
color: #fff;
transition: all 500ms ease;
}

#newsletter .modal-content {
background-image: url('images/newsbg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 30px 50px 30px;
}

#newsletter .modal-content:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.7);
}

#newsletter .modal-body {
z-index: 1;
text-align: center;
padding: 0;
}

#newsletter .modal-body input[type="email"] {
width: 100%;
margin-bottom: 20px;
border: 1px solid #7f7f7f;
border-radius: 4px;
background: rgba(255, 255, 255, 0.4);
padding: 10px 145px 10px 15px;
color: #333;
}

#newsletter .modal-body input[type="email"]::-moz-placeholder {
opacity: 1;
color: #333;
}

#newsletter .modal-body input[type="email"]::-webkit-input-placeholder {
opacity: 1;
color: #333;
}

#newsletter .modal-body input[type="submit"] {
position: absolute;
right: 0;
top: 0;
border: 1px solid transparent;
padding: 10px 15px !important;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
transition: all 500ms ease;
border-radius: 0 4px 4px 0;
margin-top: 0;
}

/*------------------------- 14.1 Home2 index page ---------------------------*/
.home2 {
background: #f0f2f5;
}

.home2 .tophead,
.home2 .copyright {
background: #ddd;
}

.home2 .support {
display: table;
}

.home2 .homebanner,
.home2 .blog,
.home2 .client {
background: #fff;
}

.home2 .affix {
width: 100%;
z-index: 999;
top: 0;
transition: all 500ms ease;
}

.home2 .midhead .basketopen .shopdata {
left: inherit;
right: -15px;
}

/*-------------------------- 14.2. Home2 Deal Section ----------------------------*/
.deals {
background: #ddd;
position: relative;
}

.deals .dealbox {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
text-align: center;
}

.deals p {
text-align: center;
font-size: 20px;
padding: 10px 0;
}

.deals #clockdiv {
margin-top: 20px;
margin-bottom: 20px;
}

.deals #clockdiv li {
display: inline-block;
text-align: center;
color: #111;
padding: 5px 10px;
border-radius: 5px;
margin-right: 10px;
border: 1px solid #111;
width: 70px;
height: 70px;
}

.deals #clockdiv li label {
display: block;
font-size: 18px;
color: #000;
}

.deals #clockdiv li span {
text-transform: uppercase;
}

.hslider {
padding: 30px 0;
}

/*------------------------- 15.2 Slider Section ---------------------------*/
.boxslide .owl-dots {
position: absolute;
left: 0;
bottom: 15px;
text-align: center;
width: 100%;
}

.boxslide .owl-dot {
width: 25px;
height: 5px;
border-radius: 2px;
border: none;
margin: 30px 4px 0 4px;
display: inline-block;
background: rgba(254, 254, 254, 0.6);
}

.boxslide .owl-dot.active {
background-color: #0044c4;
}

/*------------------------- 15.3 Delivery Section  ---------------------------*/
.delivery {
background: #ddd;
padding: 20px 0 20px;
}

.delivery .dbox {
position: relative;
border-right: 1px solid #ddd;
padding: 10px 0 10px 50px;
}

.delivery .dbox.last {
border-right: none;
}

.delivery .dbox h6 {
margin-bottom: 0;
text-transform: uppercase;
}

.delivery .dbox i {
position: absolute;
left: 10px;
top: 18px;
color: #0044c4;
}

/*------------------------- 16.1 Slider Section---------------------------*/
.home4 .slider {
padding: 30px 0;
}

.home4 .slider .right_slide {
position: relative;
overflow: hidden;
text-align: center;
}

.home4 .slider .right_slide img {
transition: all 1500ms ease;
}

.home4 .slider .right_slide:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}

.home4 .slider .slide-sale {
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 2;
}

.home4 .slider .slide-sale h2 {
color: #fff;
text-transform: uppercase;
}

.home4 .slider .right_slide:hover img {
transform: scale(1.1);
transition: all 1500ms ease;
}

.home4 .slider .left_slide .item {
position: relative;
overflow: hidden;
}

.home4 .slider .left_slide .item:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}

.home4 .slider .left_slide .carousel-caption {
z-index: 22;
}

.home4 .slider .left_slide .carousel-caption h2,
.home4 .slider .left_slide .carousel-caption h3 {
color: #fff;
}

.home4 .slider .owl-nav .owl-prev,
.home4 .slider .owl-nav .owl-next {
position: absolute;
left: 50%;
bottom: 20px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #fff;
color: #fff;
border-radius: 50%;
margin-left: -40px;
}

.home4 .slider .owl-nav .owl-next {
left: inherit;
right: 50%;
margin-right: -40px;
margin-left: 0;
}

/*------------------------- 16.2 New Arrival Section  ---------------------------*/
.new_arrival {
background-color: #efefef;
padding: 40px 0 0;
}

.new_arrival .woman_arrival {
margin-top: 100px;
}

.new_arrival .woman_arrival h2 {
color: #0044c4;
margin: 20px 0 40px;
}

.new_arrival img {
margin: 0 auto;
}

/*------------------------- 16.3 Testimonial Section ---------------------------*/
.home4 .testimonial {
background: transparent;
}

.home4 .testimonial .home4_car {
background-color: #0044c4;
padding: 60px 30px;
}

.home4 .testimonial .testicarousel p {
line-height: 22px;
}

.home4 .testimonial .home4_car h4 {
text-transform: uppercase;
color: #fff;
position: relative;
}

.home4 .testimonial .home4_car h4:after {
content: '';
position: absolute;
left: 50%;
bottom: -15px;
transform: translateX(-50%);
width: 40%;
height: 3px;
background-color: #fff;
}

.home4 .testimonial .owl-dots .owl-dot.active {
background-color: #000;
}

.home4 .testimonial .name,
.home4 .testimonial .new_collection {
position: relative;
}

.home4 .testimonial .name:after {
content: '';
position: absolute;
left: 50%;
top: -12px;
transform: translateX(-50%);
width: 40%;
height: 1px;
background-color: rgba(255, 255, 255, 0.4);
}

.home4 .testimonial .collection_content {
position: absolute;
left: 50px;
top: 50%;
transform: translateY(-50%);
text-align: left;
}

.home4 .testimonial .collection_content h2 {
color: #383838;
}

.home5 .switch-color {
top: 220px;
}

.home5 .midhead .shopdata {
left: -130px;
}

/*------------------------- 17.1 Slider Section  ---------------------------*/

.home5 .slide .item {
position: relative;
}

.home5 .slide .item:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}

.home5 .slider .video {
width: 100%;
height: 70vh;
}

.home5 .slider video {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
}

.home5 .slider h2,
.home5 .slider h3 {
color: #fff;
}

/*------------------------- 17.2 Home Banner Section ---------------------------*/
.home5 .homebanner h4 {
position: absolute;
left: 50%;
top: 50%;
padding: 8px 15px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
transform: translate(-50%, -50%);
border-radius: 5px;
transition: all 1500ms ease;
}

.home5 .homebanner .box {
overflow: hidden;
margin-bottom: 18px;
}

.home5 .homebanner .box img {
transition: all 1500ms ease;
}

.home5 .homebanner .box:hover img {
transform: scale(1.1);
transition: all 1500ms ease;
}

.home5 .homebanner .box:hover h4 {
background: rgba(0, 0, 0, 0.5);
transition: all 1500ms ease;
}

/*------------------------- 17.3 Summer Banner Section ---------------------------*/

.home5 .summer {
padding: 30px 0;
}

.home5 .summer .box {
position: relative;
}

.home5 .summer .box .overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.5);
padding: 30px 30px;
border-radius: 5px;
text-align: center;
transition: all 500ms ease;
}

.home5 .summer .box h5 {
margin: 0;
font-weight: 400;
color: #fff;
text-transform: uppercase;
font-size: 16px;
}

.home5 .summer .box h5 span {
font-size: 24px;
font-weight: 500;
display: block;
color: #0044c4;
padding: 10px 0 0 0;
}

.home5 .summer .box:hover .overlay {
padding: 40px;
transition: all 500ms ease;
}

/* -------------------------------------------------------------------| Extra large devices (large desktops, 1200px) ---------------------------------|*/

@media screen and (min-width:992px) and (max-width:1199px) {
.cart #accordionone #collapseTwo label {
text-align: left;
}

.midhead img {
width: 100%;
}

.home3 .slider .item.active .carousel-caption h2 {
font-size: 30px;
line-height: 30px;
}

.slider .item.active .carousel-caption h3 {
font-size: 24px;
}

.midhead .shopdata {
left: inherit;
right: 0;
}
}

/*
|---------------------------------------- Large devices (desktops, 992px)  ---------------------------------------*/

@media screen and (min-width:768px) and (max-width:991px) {
.img-responsive {
width: 100%;
}

.slider .carousel-caption h2 {
font-size: 40px;
line-height: 40px;
}

.slider .carousel-caption h3 {
font-size: 30px;
line-height: 20px;
}

.midhead .col-xs-12.col-sm-12 {
text-align: center;
}

.delivery .dbox {
border-right: none;
}

.newsletter h5 {
padding-bottom: 30px;
}
}

/*|------------------------------------------ Medium devices (tablets, 768px) ----------------------------------------|*/
@media screen and (min-width:0) and (max-width:991px) {
.mobile {
display: inline-block;
width: 100%;
text-align: center;
}

.mobile i {
font-size: 24px;
}

.mobile:hover,
.mobile:hover i {
color: #fff;
}

.midhead .col-xs-12.col-sm-12,
.new_arrival .woman_arrival {
text-align: center;
}

.delivery .dbox,
.about img {
border-right: none;
display: table;
margin: 0 auto;
}

.slider .carousel-caption h2,
.new_arrival .woman_arrival h2 {
font-size: 30px;
line-height: 30px;
}

.slider .carousel-caption h3 {
font-size: 20px;
line-height: 10px;
}

.cart #accordionone #collapseTwo label {
text-align: left;
}

.deals #clockdiv li {
width: 50px;
height: 50px;
padding: 0 5px 5px;
}

.searchpage .Lpadded {
padding-left: 15px;
}

.product:hover .owl-nav .owl-next {
right: 0;
}

.product:hover .owl-nav .owl-prev {
left: 0;
}

.about,
.help,
.warranty,
.home4 .testimonial {
padding: 20px 0;
}

.help .box,
.home4 .slider .right_slide,
.new_arrival .woman_arrival {
margin-top: 30px;
}

.home4 .container-fluid {
padding-left: 15px;
padding-right: 15px;
}

.new_arrival {
padding-top: 0;
}
}

/*|---------------------------------- Medium devices (tablets, 768px) ------------------------------------|*/
@media screen and (min-width:0) and (max-width:767px) {
.midhead .shopdata {
left: inherit;
right: 0;
}

.cartbox {
margin-top: 15px;
}

.blog .page li:first-child,
.blog .page li:last-child,
.page li:first-child a,
.page li:last-child a {
display: none;
}

p {
font-size: 14px;
line-height: 20px;
}

.slider:hover .carousel-control.left {
left: 0;
}

.slider:hover .carousel-control.right {
right: 0;
}

.img-responsive {
width: 100%;
}

.text-right,
.tophead,
.about .owl-nav,
.newsletter ul,
.copyright p {
text-align: center;
}

.support .box,
.newsletter h5 {
padding-bottom: 30px;
}

.newsletter h5.copyright img {
padding-top: 15px;
}

#newsletter .modal-body input[type="email"] {
padding: 8px 15px;
}

.footer .col-sm-12.text-center {
clear: both;
}

.deals {
background: transparent;
}

.deals h2 {
font-size: 20px;
}

.deals p {
padding: 0;
}

.deals .dealbox {
position: inherit;
left: inherit;
top: inherit;
transform: inherit;
margin-bottom: 20px;
}

.deals #clockdiv {
display: table;
margin: 10px auto 0;
}

.searchpage input[type="text"],
.deals #clockdiv li {
margin-bottom: 10px;
}

.searchpage .Lpadded {
padding-left: 15px;
}

.cart table td ul li button {
padding: 5px;
}

.home4 .testimonial .collection_content {
left: 15px;
}

.home4 .testimonial .collection_content h2 {
font-size: 18px;
}

.home5 .summer .box {
margin-bottom: 15px;
display: block;
}
}

/* |----------------------------------- Small devices (landscape phones, 576px) --------------------------------------|*/
@media (max-width: 476px) {

.tophead ul li a:after,
.slider .carousel-caption {
display: none;
}

.tophead ul.hlogin {
text-align: left;
}

.tophead ul {
text-align: right;
}

.tophead ul li {
padding: 5px 0;
}

.midhead .cartbox {
margin: 0 auto;
display: table;
}

.midhead .cartbox,
.circle,
.tophead ul li {
display: block;
}

.legend h6 {
font-size: 16px;
}

.cart .endbutton a:last-child {
float: inherit;
}

.circle {
margin-bottom: 15px;
}

.product .tabdata .ldata li {
margin: 0 10px;
}

#newsletter .modal-body input[type="submit"] {
position: inherit;
width: 100%;
border-radius: 4px;
}

.about .legend .owl-prev,
.about .legend .owl-next {
position: inherit;
display: inline-block;
margin: 0 5px;
}

.incategory .iconbar li:last-child {
float: inherit;
}

.cart table td ul li,
.midhead .cartbox:last-child {
display: block;
margin-top: 15px;
}

.cart table td ul li button {
padding: 5px 24px;
}

.warranty .circle {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 12px;
}

.blogin .social ul li:first-child {
float: inherit;
}

.blogin .social ul li {
padding-left: 5px;
}
}

.box-item {
position: relative;
max-width: 100%;
}

.flip-box {
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
perspective: 1000px;
-webkit-perspective: 1000px;
}

.flip-box-front,
.flip-box-back {
background-size: contain;
background-position: center;
border-radius: 0px;
-ms-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
-webkit-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip-box-front {
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.flip-box-front::before {
content: '';
background: #000;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.4;
}

.flip-box:hover .flip-box-front {
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.flip-box-back::before {
content: '';
background: #000;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.4;
}

.flip-box-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
-ms-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.flip-box:hover .flip-box-back {
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.flip-box .inner {
position: absolute;
left: 0;
width: 100%;
padding: 40px;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
transform: translateY(-50%) translateZ(60px) scale(.94);
-webkit-transform: translateY(-50%) translateZ(60px) scale(.94);
-ms-transform: translateY(-50%) translateZ(60px) scale(.94);
top: 50%;
}

.flip-box-header {
font-size: 24px;
color: #fff;
}

.flip-box p {
font-size: 16px;
line-height: 1.5em;
color: #fff;
}

.flip-box-img {
margin-top: 25px;
}

.flip-box-button {
background-color: transparent;
border: 2px solid #fff;
border-radius: 2px;
color: #fff;
cursor: pointer;
font-size: 20px;
font-weight: bold;
margin-top: 25px;
padding: 15px 20px;
text-transform: uppercase;
}

@media(max-width: 767px) {
.category-area .col-lg-3 {
max-width: 100%;
}

.txt-center {
text-align: center !important;
}

.flip-box-header {
font-size: 16px;
color: #fff;
}

.inner img {
width: 20px;
height: auto;
}

.flip-box-img {
margin-top: 0px;
}
}

.mobile- {
color: #0044c4 !important;
cursor: pointer;
}

.mobile-:hover {
color: #0044c4 !important;
cursor: pointer;
}

.cartbox- sup {
position: absolute;
width: 24px;
height: 24px;
background: #0044c4;
text-align: center;
line-height: 24px;
border-radius: 50%;
top: -13px;
left: 58%;
color: #FFF;
font-size: 13px;
}


@media(max-width: 767px) {
.newsletter img {
height: 30px !important;
width: auto;
}

.newsletter span {
font-size: 16px !important;
}
}

.carousel-indicators {
bottom: 20px !important;
}

.box-h4 h4 {
text-align: center;
padding-top: 15px;
font-weight: 400;
font-size: 18px;
}

.homebanner .box-h4 h4 .overlay {
position: absolute;
left: 0;
top: 0;
padding: 30px 15px;
width: 100%;
height: 100%;
transition: all 500ms ease;
}

.homebanner .box-h4 h4:hover .overlay {
background: rgba(7, 137, 90, 0.07);
transition: all 500ms ease;
}

.box-5 ul li {
list-style: none;
float: left;
width: 20%;
padding: 15px;
}

.box-5 ul li p {
text-align: center;
padding-top: 15px;
font-weight: 400;
font-size: 18px;
color: #111;
}

.box-5 ul li img {
width: 250px;
height: auto;
}

.newsletter a {
display: flex;
align-items: center;
}

.newsletter span {
font-size: 18px;
padding-left: 10px;
position: relative;
top: 4px
}

.midhead ul {
float: right;
}

@media(max-width: 767px) {
.newsletter a {
display: flex;
margin: 15px 0 15px;
}
}

.product {
padding: 80px 0;
}

/* .product h2 {
    margin: 0 0 15px 0;
} */

.product .lead {
margin: 0 0 30px 0;
}

.product-box {
display: block;
width: 100%;
position: relative;
-o-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin: 0;
}

.product-box:hover {
-o-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}

.product-box .img-prod {
position: relative;
display: block;
overflow: hidden;
border-radius: 10px;
background-color: #ffffff;
border: 1px solid #dbe5f5;
text-align: center; 
}

.product-box .img-prod img {
border: none;
height: 320px;
object-fit: cover;
object-position: center;
width: 100%;
}

.grid .product-box .img-prod {
position: relative;
display: block;
overflow: hidden;
border-radius: 10px;
background-color: #ffffff;
border: 1px solid #dbe5f5;
min-height: 250px;
text-align: center;
}

.grid .product-box .img-prod img {
border: none;
height: 250px;
object-fit: cover;
object-position: center;
width: 100%;
}

.product-box .img-prod span.status {
position: absolute;
top: 10px;
left: -1px;
padding: 2px 15px;
color: #000000;
font-weight: 300;
background: #ffa45c;
}

.product-box .img {
display: block;
height: 500px;
}

.product-box .icon {
width: 60px;
height: 60px;
background: #fff;
opacity: 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.product-box .icon span {
color: #000000;
}

.product-box:hover .icon {
opacity: 1;
}

.product-box .text {
background-color: transparent;
background-image: linear-gradient(360deg, #00000008 0%, #00000008 100%);
width: 100%;
text-align: center;
padding: 18px 15px;
border-radius: 0;
/*height: 50px;
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-between;*/
}

.p-button {  
display: flex;
align-items: center;
padding: 15px;
justify-content: center;
width: 100%;
}

.product-box .p-button a {
font-size: 15px;
color: #ffffff;
padding: 0 15px;
border-radius: 5px;
display: inline-flex;
line-height: 1;
background-color: #0044c4;
height: 42px;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0;
}

.product-box .text a i {
position: relative;
top: 1px;
}

.product-box .text:hover a {
color: #ffffff;
}

.grid .item {
margin: 0;
}

.product-box .text h3 {
font-size: 18px;
margin: 0;
color: #000;
transition: all 0.3s ease;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}

.grid .product-box .text h3 {
font-size: 16px;
margin: 0;
color: #ffffff;
transition: all 0.3s ease;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

/*
.product-box:hover .text h3 {
text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.55);
}*/
.product-box .text p.price {
margin-bottom: 0;
color: #000000;
font-weight: 400;
}

.product-box .text p.price span.price-dc {
text-decoration: line-through;
color: #b3b3b3;
}

.product-box .text p.price span.price-sale {
color: #000000;
}

.product-box .text .pricing,
.product-box .text .rating {
width: 50%;
}

.product-box:hover {
-webkit-box-shadow: 0px 7px 15px -5px rgba(0, 0, 0, 0.07);
-moz-box-shadow: 0px 7px 15px -5px rgba(0, 0, 0, 0.07);
box-shadow: 0px 7px 15px -5px rgba(0, 0, 0, 0.07);
}

.product-box:hover .text .bottom-area {
opacity: 1;
}

.product-details h3 {
font-size: 30px;
font-weight: 400;
}

.product-details .price span {
font-size: 30px;
color: #000000;
}

.product-details button i {
color: #000000;
}

.product-details .quantity-left-minus {
background: transparent;
padding: 0 15px;
}

.product-details .quantity-right-plus {
background: transparent;
padding: 0 15px;
}

.product-details button,
.product-details .form-control {
height: 40px !important;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
color: #ffa45c;
padding: 10px 20px;
background: transparent !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
font-size: 14px;
}

.product-details button:hover,
.product-details button:focus,
.product-details .form-control:hover,
.product-details .form-control:focus {
text-decoration: none;
outline: none;
}

.bg-white {
background-color: #fff !important;
}

.sec-pd {
padding: 45px 0 20px;
}

.m_icons img {
width: 30px;
height: auto;
margin-right: 10px;
position: relative;
}

.newsletter img {
height: 40px;
width: auto;
}

.qnty {
width: 20%;
position: relative;
top: 4px;
font-weight: 500;
font-size: 18px;
}

.t-inp {
display: flex;
margin-bottom: 10px;
}

.input-number {
position: relative;
z-index: 2;
float: left;
width: 100px !important;
margin-bottom: 0;
border: 1xp solid grey;
}

.input-number input {
border: 1xp solid grey;
}

.p-details {
padding: 0px !important;
padding-top: 65px !important;
}

/*------------ Product Thumb Zoom ------------------*/
.sp-loading {
text-align: center;
max-width: 270px;
padding: 15px;
border: 5px solid #eee;
border-radius: 3px;
font-size: 12px;
color: #888;
}

/* Element wrapper */

.sp-wrap {
display: none;
line-height: 0;
font-size: 0;
position: relative;
width: 100%;
}

/* Thumbnails */
.sp-thumbs {
text-align: left;
display: flex;
align-items: center;
justify-content: center;
}

.sp-thumbs img {
min-height: 50px;
min-width: 50px;
max-width: 50px;
}

.sp-thumbs a:link,
.sp-thumbs a:visited {
width: 90px;
height: 90px;
overflow: hidden;
opacity: .3;
display: inline-flex;
background-size: cover;
background-position: center;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
align-items: center;
justify-content: center;
padding: 4px;
border: 1px solid #80808033;
margin: 2px;
border-radius: 4px;
}

.sp-thumbs a:hover {
opacity: 1;
}

/* Styles for the currently selected thumbnail */

.sp-thumbs a:active,
.sp-current {
opacity: 1 !important;
position: relative;
}

/* Image currently being viewed */

.sp-large {
position: relative;
overflow: hidden;
top: 0;
left: 0;
border: 1px solid #dbe5f5;
margin-bottom: 25px;
border-radius: 10px;
overflow: hidden;
}

.sp-large a img {
max-width: 100%;
height: 540px;
object-fit: cover;
object-position: center;
}

.sp-large a {
display: block;
min-height: 520px;
}

/* Panning Zoomed Image */

.sp-zoom {
position: absolute;
left: -50%;
top: -50%;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
display: none;
}

/* Lightbox */

.sp-lightbox {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, .9);
z-index: 999999;
display: none;
cursor: pointer;
}

.sp-lightbox img {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 90%;
max-height: 90%;
border: none;
border-radius: 10px;
}

#sp-prev,
#sp-next {
position: absolute;
top: 50%;
margin-top: -25px;
z-index: 501;
color: #fff;
padding: 14px;
text-decoration: none;
background: #000;
border-radius: 25px;
border: 2px solid #fff;
width: 50px;
height: 50px;
box-sizing: border-box;
transition: .2s;
display: flex;
align-items: center;
justify-content: center;
}

#sp-prev {
left: 10px;
}

#sp-prev:before {
content: "\f284";
font-family: bootstrap-icons !important;
font-size: 15px;
}

#sp-next {
right: 10px;
}

#sp-next:before {
content: "\f285";
font-family: bootstrap-icons !important;
font-size: 15px;
}

#sp-prev:hover,
#sp-next:hover {
background: #444;
}

/* Tweak styles for small viewports */

@media screen and (max-width: 400px) {
.sp-wrap {
margin: 0 0 15px 0;
}

#sp-prev,
#sp-next {
top: auto;
margin-top: 0;
bottom: 25px;
}
}

h6.c-name {
font-weight: 600 !important;
font-size: 21px !important;
color: #ff6600;
margin: 0 0 15px 0;
}

.ftpp i {
margin-left: 10px;
position: relative;
font-size: 16px;
top: 2px;
color: #0044c4;
}

.product-box .text .bottom-area a {
color: #fff;
width: 100%;
}

.product-box .text .bottom-area a {
font-size: 15px;
color: #fff;
padding: 10px 30px;
}

.product-box .text .bottom-area i {
font-size: 16px;
}

.product-box .text .bottom-area {
background: #000000;
color: #fff;
}

.product-box .text .bottom-area:hover {
background: #0044c4;
color: #fff;
}

@media(max-width: 767px) {

.heading::before,
.heading::after {
display: none;
}

.heading::before,
.heading::after {
display: none;
}
}





.list-style-two li {
position: relative;
color: #222 !important;
font-size: 16px;
line-height: 1.6em;
padding-left: 38px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
list-style: none !important;
}

.list-style-two li a {
color: #222 !important;
font-size: 16px;
list-style: none !important;
text-decoration: none !important;
}

.list-style-two li a:hover {
color: #00477d !important;
list-style: none !important;
}

.list-style-two li:last-child {
border: 0px;
margin: 0px;
padding-bottom: 0px;
}



.btn-a {
background-color: #000;
color: #ffffff;
text-transform: uppercase;
border: 1px solid #000;
transition: all 0.3s;
width: 100%;
}

.btn-a:hover {
background-color: transparent;
color: #000;
text-transform: uppercase;
border: 1px solid #000;
transition: all 0.3s;
}

@media(max-width: 767px) {
.enqform {
margin-top: 25px;
}
}


.achievements-card {
padding: 23px;
text-align: center;
margin-bottom: 30px;
}

.achievements-area .section-title p {
max-width: 570px;
margin-left: auto;
margin-right: auto
}

.achievements-card {
padding: 23px;
text-align: center;
margin-bottom: 30px
}

.achievements-card i {
font-size: 60px;
margin-bottom: 10px;
line-height: 1.2
}

.achievements-card h3 {
color: #10142d;
margin-top: 15px;
font-size: 26px;
line-height: 1
}

.achievements-card span {
font-size: 18px;
color: #342e36
}

.achievements-bg-1 {
background-color: #dcf9ee
}

.achievements-bg-1 i {
color: #46b58b
}

.achievements-bg-2 {
background-color: #fef5e2
}

.achievements-bg-2 i {
color: #a88845
}

.achievements-bg-3 {
background-color: #ffe7ea
}

.achievements-bg-3 i {
color: #d66e7b
}

.achievements-bg-4 {
background-color: #e0dfee
}

.achievements-bg-4 i {
color: #5751b4
}

.single-counter {
margin-bottom: 30px;
text-align: center
}

.single-counter i {
font-size: 50px;
margin-bottom: 10px;
line-height: 1.2;
background-color: #f7f8fb;
width: 90px;
height: 90px;
line-height: 90px;
display: inline-block;
border-radius: 5px
}

.single-counter h3 {
color: #10142d;
margin-top: 15px;
font-size: 30px;
line-height: 1
}

.single-counter span {
font-size: 18px;
color: #342e36
}

.icon-color-1 {
color: #46b58b
}

.icon-color-2 {
color: #a88845
}

.icon-color-3 {
color: #d66e7b
}

.icon-color-4 {
color: #5751b4
}

@media(max-width: 767px) {
.achievements-card {
padding: 25px;
border-radius: 0;
}

.home_sec {
background-image: none;
background-color: rgba(20, 70, 123, 0.9);
}

.why-us img {
margin-bottom: 25px;
}
}

.counter-block {
text-align: center;
box-shadow: 0 8px 20px 0 rgba(16, 66, 97, .07);
padding: 35px;
border-radius: 10px;
border: 1px solid #ddd;
background-color: #fff;
}

.counter-block h6 {
color: #222;
font-size: 18px;
}

.bg_sec_features h2 {
color: #282828;
font-size: 32px;
font-weight: 400;
margin: 0 !important;
}

.bg_sec_features li {
list-style-type: none;
}

.bg_sec_features ul {
margin-top: 25px;
margin: 0;
margin-left: 0px;
padding: 0;
margin-left: 29px;
line-height: 25pt;
color: #111;
margin-top: 25px;
}

.bg-color-2 {
background-color: rgb(245 244 245) !important;
}

.counter-block span {
font-size: 36px;
color: #0044c4;
font-weight: 500;
display: inline-block;
margin-bottom: 10px;
}

.bg_sec_features li i {
margin-right: 10px;
}

@media(max-width: 767px) {
.counter-block {
margin-bottom: 25px;
}

.bg_sec_features ul {
margin-bottom: 25px;
}

.why-us p {
padding-bottom: 25px;
}
}

.why-us p {
padding-bottom: 25px;
}

#Section1 p {
padding-top: 15px;
padding-bottom: 15px;
}

.buy-button {
background: #0044c4;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
padding: 12px 20px;
border-radius: 30px;
transition: all 0.3s ease 0s;
border: 0px;
display: inline-block;
margin-top: 25px;
}

.buy-button:hover {
background: #222;
transition: all 0.3s ease 0s;
}

.buy-button i {
margin-right: 6px;
}

.eform h1 {
font-size: 20px !important;
font-weight: normal;
color: #0044c4;
}

.eform h2 {
font-size: 17px !important;
font-weight: normal;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
color: #0044c4;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: rgb(221, 221, 221);
border-bottom-color: transparent;
font-weight: 600;
font-size: 16px;
margin-top: 25px;
}


#lstcodes ul {
margin-left: 15px;
}

.tab-pane ul li {
list-style: disc;
}

.gal-sec img {
margin-bottom: 25px;
}

.header-top-left ul li {
display: inline-block;
font-size: 14px;
font-weight: 500;
padding-right: 20px;
margin: 3px 20px 3px 0;
position: relative;
list-style: none;
}

.about-section {
padding: 80px 0 0 0;
}

.about-section .img-left img {
border-radius: 10px;
height: 510px;
object-fit: cover;
object-position: center;
box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;
}

.about-section h3 span {
text-transform: none;
font-size: 24px;
font-weight: 400;
color: #2e2e2e;
}

.category-section {
margin: 80px 0 0 0;
}

.category-section .category-card {
overflow: hidden;
border-radius: 15px;
position: relative;
}

.category-section .category-card .category-content {
position: absolute;
z-index: 9;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 0 0 45px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
}

.category-section .category-card .category-content h5 {
margin: 0 0 10px 0;
color: #454545;
text-transform: none;
font-weight: 400;
font-size: 24px;
}

.category-section .category-card .category-content h2 {
font-size: 36px;
}

.cta-section {
height: 640px;
display: flex;
align-items: center;
justify-content: center;
background-image: url("../image/home/bg-1.jpg");
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}

.cta-section h1 {
color: #ffffff;
margin: 0 0 15px 0;
text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.55);
font-size: 72px
}

.cta-section h1 span {
color: #0044c4;
font-weight: 700;
}

.cta-section h4 {
color: #ffffff;
text-transform: capitalize;
margin: 0 0 15px 0;
font-weight: 400;
font-size: 24px;
}

.cta-section h6 {
color: #ffffff;
text-transform: none;
text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.55)
}

.cta-section-2 {
margin: 40px 0 70px 0;
position: relative;
}

.cta-section-2 img {
position: relative;
}

.cta-section-2 .cta-section-2-content {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 50%;
padding: 150px 0 30px 60px;
display: flex;
align-items: center;
}

.cta-section-2 .cta-section-2-content .cta-section-2-content-detail h6 {
margin: 0 0 10px 0;
color: #454545;
}

.cta-section-2 .cta-section-2-content .cta-section-2-content-detail h1 {
margin: 0 0 15px 0;
}

.cta-section-2 .cta-section-2-content .cta-section-2-content-detail h1 span {
-webkit-text-stroke: 2px #111111;
transition: all .3s ease;
font-size: 72px;
color: rgba(0, 0, 0, 0);
}

.cta-section-2 .cta-section-2-content .cta-section-2-content-detail p {
font-size: 18px;
}

.f-social-media {
display: flex;
gap: 5px;
justify-content: start;
}

.f-social-media li a {
width: 35px;
height: 35px;
min-width: 35px;
min-height: 35px;
border-radius: 5px;
background-color: #0044c4;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
margin-left: 5px;
transition: ease-in-out all 0.2s;
}

.f-social-media li a i {
line-height: 0;
}

.f-social-media li a:hover {
background-color: #ff6600;
color: #ffffff;
}

.section-cougar {
padding: 80px 0;
}

.f-logo {
width: 200px;
margin: 0 0 24px 0;
}


.lookcare-product-single {
padding: 70px 0;
}

.product-overview {
padding: 30px 0 30px 30px;
}

.product-overview h3 {
margin: 0 0 15px 0;
}

.product-overview h5 {
margin: 0 0 15px 0;
}

.product-overview .nav-pills .nav-link {
border-radius: 0;
border: none;
margin-right: 15px;
color: #222;
font-size: 16px;
padding: 0;
font-size: 18px;
font-weight: 450;
}

.tab-content > .tab-pane {
padding: 10px 0 0 0;
}

.tab-pane ul {
margin-left: 15px;
}

.tab-pane ol {
margin-left: 15px;
}

.tab-pane p {
margin: 0 0 5px 0;
}


.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #0044c4;
background-color: #ffffff;
border-color: #0044c4;
}

.inner-slider {
background-image: url("../image/home/inner-slider.jpg");
background-size: cover;
background-position: center center;
height: 360px;
display: flex;
align-items: end;
justify-content: center;
position: relative;
padding: 0 0 60px 0;

}

.contact-bg {
background-image: url("../image/home/contact-bg.jpg");
}

.certificate-bg {
background-image: url("../image/home/certificate-bg.jpg");
}

.inner-slider::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #000000ad;
}

.inner-slider h2 {
position: relative;
color: #ffffff;
margin: 0;
}

.Infrastructure-section {
background-color: #ffffff;
background-image: url("../image/home/why-bg.jpg");
background-size: cover;
background-position: center center;
padding: 70px 0;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 70px 0 0 0;
}

.Infrastructure-section .Infrastructure-img img {
border-radius: 10px;
height: 510px;
object-fit: cover;
object-position: center;
box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;
}

.Infrastructure-section h3 {
color: #ffffff;
}

.Infrastructure-section p {
color: #ffffff;
}

.mission-vision-section {
padding: 70px 0;
}

.mission-card {
text-align: center;
padding: 30px 24px;
background-color: rgba(255, 255, 255);
border: 1px solid #dbe5f5;
border-radius: 10px;
}

.mission-card h5 {
margin: 0 0 15px 0;
}

.mission-card img {
width: 60px;
height: auto;
margin-bottom: 25px;
}

.directors-message {
margin: 70px 0 0 0;
padding: 70px 0;
background: #f5f4f5 url('../image/home/shape-11.png') no-repeat right bottom;
}

.directors-message h3 {
margin: 0 0 15px 0;
}

.directors-message .directors-message-content-para {
position: relative;
padding-left: 27px;
margin: 30px 0 0 0;
}

.directors-message .directors-message-content-para::before {
content: "\f10d";
font-family: "FontAwesome";
position: absolute;
top: -15px;
left: 0;
font-size: 24px;
color: #0044c4;
}

.directors-message .directors-message-pic img {
border-radius: 10px;
}

.directors-message-content {
padding-left: 0;
}

.directors-message-content p {
margin: 0 0 5px 0;
}

.directors-message-content span {
color: #0044c4;
}

.contact-section {
padding: 70px 0;
background: #fff;
}

.contact-section h3 {
margin: 0 0 20px 0;
}

.contact-section h4 {
margin: 0 0 15px 0;
}

.contact-section .contact-info {
display: flex;
align-items: self-start;
gap: 30px;
margin: 0;
padding: 24px 10px;
border-bottom: 2px solid #e1e3ec;
}

.contact-section .contact-info:last-child {
border-bottom: none;
}

.contact-section .contact-info .contact-info-icon .contact-info-bg {
position: relative;
z-index: 9;
background-color: #0044c4;
min-width: 60px;
min-height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
}

.contact-section .contact-info .contact-info-icon .contact-info-bg i {
color: #ffffff;
font-size: 21px;
}

.contact-section .contact-info .contact-info-detail h6 {
font-size: 18px;
margin: 0 0 5px 0;
}

.contact-section .contact-info .contact-info-detail p {
margin: 0;
}

.contact-section .contact-info .contact-info-detail p:last-child {
margin: 0;
}

.contact-section .contact-info .contact-info-detail p a {
font-size: 15px;
font-weight: normal;
color: #474C55;
}

.enqform {
display: inline-block;
margin: 15px 0 0 0;
padding: 30px 24px;
background-color: #f5f5f7;
border: 1px solid #dbe5f5;
border-radius: 10px;
}

.map iframe {
width: 100%;
height: 400px;
}

.certificate-section {
padding: 80px 0;
}

.certificate .card {
border-radius: 10px;
overflow: hidden;
border: 1px solid #dbe5f5;
}

.certificate .card img {
width: 100%;
}

.fancybox-image,
.fancybox-spaceball {
border-radius: 10px;
}

.modal-dialog .modal-content {
box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 10px;
border-radius: 10px;
border: none !important;
}

.modal-body {
padding: 30px 24px;
}

.modal-backdrop {
background-color: #000000;
opacity: 0.8 !important;
}

.btn-close {
position: absolute;
top: 15px;
right: 15px;
}

.about-section-2 {
background-image: url("../image/home/about-us-bg.jpg");
background-size: cover;
background-position: center center;
background-attachment: fixed;
height: 640px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 80px 0 0 0;
}



.about-section-2::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.63);
}

about-section-2 .about-section-detail {
position: relative;
z-index: 2;
}

.about-section-2 .about-section-detail h2 {
color: #ffffff;
position: relative;
}

.about-section-2 .about-section-detail p {
color: #ffffff;
position: relative;
}

/* -----------------------------------------
    About CSS
----------------------------------------- */
.about-area {
position: relative;
overflow: hidden;
z-index: 1;
background-size: cover;
background-position: center top;
padding: 80px 0;
background-color: #effefd;
}

.about-area .card {
background-color: transparent;
}

.about-area .card .card-text {
flex: auto;
}

.about-area .card-icon {
--size: 60px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: var(--size);
height: var(--size);
font-size: 32px;
color: var(--text-white);
background-color: var(--color-primary);
}

.about-area .image {
position: relative;
}

.about-area .image .absolute-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: 6.25%;
width: 180px;
height: 240px;
padding: 15px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
outline: 2px dashed var(--color-white);
outline-offset: -12px;
background-color: #0044c4;
}

.about-area .info-list .card {
max-width: 400px;
overflow: hidden;
z-index: 1;
flex-direction: row;
gap: 16px;
}

.about-area .content-text p {
margin: 0;
}

.about-area.about-1 .info-list .card-icon i {
color: var(--color-black);
}

.about-area.about-1 .info-list .item:nth-child(odd) {
border-inline-end: 3px solid var(--border-color);
}

.about-area .btn-primary {
margin: 30px 0 0 0;
background-color: #ff6600;
border-color: #ff6600;
}

.about-area .btn-primary::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%;
content: "";
background: #0044c4;
border-radius: 50%;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
z-index: -1;
}

.about-area .btn-primary:hover {
color: var(--btn-hover-color);
background-color: #0044c4;
border-color: #0044c4;
}

.mission-img img {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
}

.vision-img img {
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}



.testimonial-section {
margin: 80px 0;
}

.testimonial-section h2 {
margin: 0 0 15px 0;
}

.testimonial-section .lead {
margin: 0 0 30px 0;
}

.testimonial {
margin: 0;
border: 1px solid #e8e8e8;
border-radius: 15px;
padding: 30px;
}

.testimonial .pic {
display: inline-block;
width: 75px;
height: 75px;
border-radius: 100%;
margin: 0 24px 0 0;
}

.testimonial .pic img {
width: 100%;
height: 100%;
border-radius: 100%;
}

.testimonial .testimonial-profile {
display: inline-block;
position: relative;
top: 15px;
}

.testimonial h3 {
display: block;
font-size: 20px;
font-weight: 600;
color: #2f2f2f;
text-transform: capitalize;
margin: 0 0 7px 0;
}

.testimonial span {
display: block;
font-size: 14px;
color: #ff6600;
}

.testimonial p {
padding: 10px 10px 10px 20px;
position: relative;
border-left: 3px solid #0044c4;
margin: 30px 0 0 0;
}

.owl-theme .owl-controls {
margin: 24px 0 0 0;
}

.owl-theme .owl-controls .owl-buttons div {
opacity: 1;
background: #00102e;
padding: 0;
height: 35px;
width: 35px;
border-radius: 5px;
margin: 0 5px;
line-height: 35px;
transition: ease-in-out all 0.2s;
}

.owl-theme .owl-controls .owl-buttons div:hover {
background: #ff6600;
}

.owl-prev:before,
.owl-next:before {
font-family: bootstrap-icons !important;
content: "\F284";
font-weight: 900;
font-size: 16px;
color: #ffffff;
}

.owl-next:before {
content: "\F285";
}

.new-section-2 {
padding: 80px 0 0 0;
}

.new-section-right-image {
position: relative;
}

.new-section-right-image .absolute-text {
position: absolute;
top: auto;
left: 30px;
right: auto;
margin-left: auto;
margin-right: 0;
width: 180px;
height: 240px;
padding: 15px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
outline: 2px dashed #0044c4;
outline-offset: -10px;
background-color: #0044c4ad;
bottom: -30px;
backdrop-filter: blur(6px);
}

.about-area .content-text p {
margin: 0;
}



.new-section-2 .product-list {
max-width: 600px;
}

.new-section-2 .product-list h4 {
font-size: 15px;
font-weight: bold;
margin-bottom: 12px;
}

.new-section-2 .list-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 40px;
}

.new-section-2 .list-item {
display: flex;
align-items: flex-start;
font-size: 15px;
color: #333;
line-height: 1.4;
}

.new-section-2 .list-item .check-icon {
background: #ff6600; /* green circle */
color: white;
font-size: 12px;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
flex-shrink: 0;
}

.new-section-2 img {
border-radius: 5px;
}

.new-section-2-img {
position: relative;
width: 100%;
margin: 70px 0 0 0;
overflow: hidden;
border-radius: 5px;
}

.new-section-2-img img {
width: 100%;
display: block;
transition: transform 0.5s ease; /* smooth zoom effect */
}

/* Zoom on hover */
.new-section-2-img:hover img {
transform: scale(1.05);
}

/*.new-section-2-img::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4); 
}*/

.new-section-2-img .content {
position: absolute;
top: 0;
left: 0;
transform: translateY(0%);
color: white;
z-index: 1;
max-width: 100%;
bottom: 0;
right: 0;
display: flex;
align-items: start;
flex-direction: column;
justify-content: center;
padding: 45px;
}

.new-section-2-img .content h4 {
font-size: 16px;
color: #ffffff;
margin: 0 0 30px 0;
font-weight: normal;
}

.new-section-2-img .content h3 {
margin: 0 0 15px 0;
font-size: 30px;
color: #ffffff;
}
.powering-section {
padding: 80px 0;
}

.energy-text p {
color: #555;
line-height: 1.6;
margin-bottom: 18px;
}

.energy-btn {
background: #ffeb00;
color: #000;
padding: 12px 20px;
text-decoration: none;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.3s ease;
}

.energy-btn:hover {
background: #e5d600;
}

.feature-card {
position: relative;
overflow: hidden;
/*box-shadow: 0px 4px 12px rgba(0,0,0,0.1);*/
border-radius: 5px;
overflow: hidden;
}

.feature-card img {
width: 100%;
display: block;
transition: transform 0.4s ease;
min-height: 320px;
}

.feature-card:hover img {
transform: scale(1.05);
}

.feature-card .feature-icon img {
height: auto;
min-height: auto;
}

.feature-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 1);
padding: 15px 100px 15px 12px;
}

.feature-info h6 {
font-size: 16px;
margin: 0;
}

.feature-icon {
width: 80px;
position: absolute;
bottom: 15px;
right: 15px;
background: #fff;
padding: 10px;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
z-index: 9;
border-radius: 5px;
}

.catalogue-section {
padding: 80px 0;
/*background-color: #effefd;*/
background: #0044C4;
background: linear-gradient(45deg, rgba(0, 68, 196, 0.88) 38%, rgba(239, 254, 253, 1) 38%);
}

.product-image img {
width: 100%;
border-radius: 10px;
}


.inner-banner {
height: 220px;
width: 100%;
display: flex;
align-items: end;
background-color: #222222;
padding: 0 0 30px 0;
text-align: center;
}

.inner-banner h2 {
margin: 0;
color: #ffffff;
}

.inner-banner h5 {
margin: 0;
color: #ffffff;
}