html{
overflow-x: hidden;
}
body{
margin: 0px;
font-family: 'Inter' !important;
overflow-x:hidden ;
}
/*shrinks*/
body.modal-open {
padding-right: 0 !important;
}
a:hover{
cursor: pointer;
text-decoration: none;
}
button{
cursor: pointer;
border: none;
}
/* width */
::-webkit-scrollbar {
width:3px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 0px #ececec;
border-radius:0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #ececec;
border-radius:0px;
}
/* Load Settings */
.loader {
height: 3px;
width: 250px;
display: block;
top: 43%;
--c:no-repeat linear-gradient(#000 0 0);
background: var(--c),var(--c),#ececec;
background-size: 60% 100%;
animation: l16 3s infinite;
position: relative;
z-index: 1001;
margin-left: auto;
margin-right: auto;
}
@keyframes l16 {
0% {background-position:-150% 0,-150% 0}
66% {background-position: 250% 0,-150% 0}
100% {background-position: 250% 0, 250% 0}
}
.loaded .loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#content {
margin: 0 auto;
padding-bottom: 50px;
width: 80%;
max-width: 978px;
}
.entry-header {
display:block;
color: white;
text-align: center;
margin:0 auto 50px auto;
width:978px;
position: relative;
z-index: 10001;
}
#demo-content {
padding-top: 100px;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1000000;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f2f2f2;
-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
z-index:1001;
}
#loader:before {
content:"";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f2f2f2;
-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#loader:after {
content:"";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f2f2f2;
-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
#loader-wrapper .loader-section {
position:fixed;
top: 0;
width: 51%;
height: 100vh;
background: #fff;
z-index: 1000;
}
#loader-wrapper .loader-section.section-left {
left:0;
}
#loader-wrapper .loader-section.section-right {
right:0;
}
/* Loaded Styles */
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(-100%); /* IE 9 */
transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045,0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045,0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(100%); /* IE 9 */
transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045,0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045,0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateY(-100%); /* IE 9 */
transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.3s 1s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
transition: all 0.3s 1s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
/* Copy-right by ARiyou2000 in May2020*/
/* Header */
:hover{
transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.search-bar:hover .search-btn {
background: #a7cd38;
transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.wishlist:hover{
color: #a7cd38;
}
.cart:hover{
color: #a7cd38;
}
.header {
padding: 15px 0px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #f0f0f0;
float: left;
width: 100%;
}
.flex-head{
display: flex;
align-items: center;
justify-content: center;
}
.part1{
float: left;
width: 23%;
}
/* Logo */
.logo img {
width: 178px;
}
/* Search Section */
.part2 {
float: left;
width: 43%;
padding-left: 4px;
display: flex;
align-items: center;
}
/* Search Bar */
.search-bar {
background: #f8f8f8;
border: 1px solid #efefef;
height: 50px;
max-width: 511px;
float: left;
width: 100%;
display: flex;
align-items: center;
}
/* Left Circle Icon */
.search-bar .circle-icon {
width: 40px;
height: 40px;
/* background: #fff; */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 8px;
}
.search-bar .circle-icon img {
width: 24px;
height: auto;
}
/* Input */
.search-bar input {
flex: 1;
border: none;
outline: none;
padding: 0 12px;
font-size: 15px;
background: transparent;
color: #333;
float: left;
}
/* Search Button (Right Icon) */
.search-bar .search-btn {
width: 52px;
height: 100%;
border: none;
background: #000000;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
float: right;
}
.search-bar .search-btn img {
width: 22px;
height: auto;
}
/* Right Icons */
.part3{
float: left;
width: 34%;
/* padding-left: 7px; */
display: flex;
align-items: center;
justify-content: end;
}
.header-right {
display: flex;
align-items: center;
gap: 44px;
float: right;
font-size: 15px;
color: #000000;
cursor: pointer;
font-weight: 500;
}
.header-right img {
width: 25px;
height: auto;
}
.wishlist {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.cart {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.wishlist span{
font-size: 14px;
color: #6e686c;
}
.cart span{
font-size: 14px;
color: #6e686c;
}
.account-btn {
background: #ed1c24;
color: #fff;
padding: 10px 20px;
border-radius: 6px;
font-weight: bold;
border: none;
font-size: 15px;
cursor: pointer;
font-weight: 600;
width: 133px;
height: 48px;
position: relative;
overflow: hidden;
z-index: 1;
transition: background 0.3s ease;
}
/* Shine effect */
.account-btn::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.4);
transform: skewX(-25deg);
transition: left 0.5s ease;
}
/* Hover effect */
.account-btn:hover::after {
left: 130%;
}
/* Add to Cart */
.account-btn:hover {
background: #a7cd38;
}
.header_area {
/* padding-top: 16px; */
float: left;
width: 100%;
}
.slide{
width: 100%;
float: left;
position: relative;
}
.slide img{
width: 100%;
float: left;
height: 483px;
}
.slide .splide__pagination {
display: flex;
justify-content: center;
position: absolute !important;
right: 53px !important;
bottom: 9%;
gap: 6px;
z-index: 10;
width: auto;
left: auto !important;
transform: none;
padding: 0;
}
.slide .splide__pagination button {
border-radius: 1px;
background: #fff;
border: none;
padding: 0;
margin: 0;
opacity: 1;
line-height: 0;
width: 17px;
height: 3px;
transform: unset;
}
.slide .splide__pagination button span {
width: 17px;
height: 3px;
border-radius: 2px;
position: relative;
z-index: 999;
display: inline-block
}
.slide .splide__pagination__page.is-active {
background: #a7ce38;
transform: unset;
z-index: 1;
width: 27px;
}
.section1{
padding-top: 48px;
width: 100%;
float: left;
}
.section1 h2{
float: left;
width: 100%;
font-size: 24px;
font-weight: 600;
margin-bottom: 30px;
color: #000;
}
.brand-product {
width: 100%;
float: left;
height: 215px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
overflow: hidden;
transition: background-color 0.5s ease;
}
.brand-product img {
width: 100%;
max-width: 92%;
object-fit: cover;
transition: transform 0.5s ease, filter 0.5s ease;
}
.brand-product:hover img {
transform: scale(1.1);
filter: brightness(1.1);
}
.brand-product:hover {
background-color: #a7cd38bf !important;
}
.splide__slide {
padding: 0;
}
.banner-3{
float: left;
width: 100%;
padding: 57px 0px 0px 0px;
}
.banner-3 h2
{
float: left;
width: 100%;
color: #000;
font-weight: 600;
font-size: 24px;
}
.panel2{width: 100%;padding-top: 28px;padding-bottom: 76px;float: left;}
.trending-box{
width: 100%;
float: left;
background: white;
display: flex;
flex-direction: column;
gap: 12px;
border-radius: 10px;
}
.trending-box h5
{
padding-right: 9%;
display: -webkit-box; /* needed for WebKit browsers */
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* number of lines to show */
overflow: hidden; /* hide the rest */
text-overflow: ellipsis;
color: #000;
font-size: 15px;
font-weight: 600;
float: left;
width: 100%;
line-height: 18px;
margin: 0;
}
.trending-box h6{
padding-bottom: 2px;
padding-top: 2px;
color: #000;
font-size: 19px;
font-weight: 700;
float: left;
width: 100%;
margin: 0;
}
.trending-box h6 span{
font-size: 12px;
color: #515153;
text-decoration: line-through;
padding-left: 10px;
font-weight: 600;
}
.trending-box h3{
font-size: 13px;
color: #79797b;
font-weight: 700;
float: left;
width: 100%;
margin: 0;
padding-bottom: 1px;
}
.trending-box:hover .trending-box2 h5{
color: #7f1431;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.t-img
{
/* background-color: #c4a78a; */
border: 1px solid #f2f2f2;
height: 283px;
object-fit: cover;
float: left;
width: 100%;
border-radius: 10px;
position: relative;
object-position: top;
}
.fav-button{
border: none;
position: absolute;
background: none;
right: 7px;
top: 13px;
cursor: pointer;
}
.trend-fav{
width: 20px !important;
}
.red-bac{
/*background: #e21f1f !important; */
}
.new-arrival{
float: left;
z-index: 9;
background: #be0874;
padding: 4px 11px;
font-size: 11px;
color: #fff;
font-weight: 400;
bottom: 0px;
border-radius: 8px 8px 0px 0px;
position: absolute;
left: 8px;
}
.ofs{
float: left;
z-index: 9;
background: #ff0000;
padding: 4px 11px;
font-size: 11px;
color: #fff;
font-weight: 400;
bottom: 1px;
border-radius: 8px 8px 0px 0px;
position: absolute;
left: 8px;
}
.offer{
float: left;
z-index: 9;
background: #00a14b;
padding: 11px 0px;
font-size: 11px;
color: #fff;
font-weight: 400;
top: 1px;
line-height: 13px;
border-radius: 0px 0px 7px 7px;
position: absolute;
left: 21px;
text-align: center;
}
.offer span{
float: left;
width: 100%;
text-align: center;
}
@media (min-width: 1200px) {
.container {
max-width: 1324px !important;
}
}
.butn-group {
display: flex;
gap: 8px;
width: 100%;
}
/* Default button */
.butn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 5px;
padding: 12px 8px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: #fff;
position: relative;
overflow: hidden;
z-index: 1;
transition: background 0.3s ease;
white-space: nowrap;
}
.butn img {
filter: invert(1);
width: 19px !important;
transition: transform 0.3s ease;
}
/* Shine effect */
.butn::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.4);
transform: skewX(-25deg);
transition: left 0.5s ease;
}
/* Hover effect */
.butn:hover::after {
left: 130%;
}
.butn:hover img {
transform: translateX(3px);
}
/* Add to Cart */
.add-cart {
background: #00a14b;
}
.add-cart:hover {
background: #ed1c24;
}
/* Buy Now */
.buy-now {
background: #555;
}
.buy-now:hover {
background: #ed1c24;
}
.category-box{
width: 100%;
float: left;
background: white;
display: flex;
flex-direction: column;
gap: 12px;
}
.category-box h5
{
color: #000;
font-size: 15px;
font-weight: 400;
float: left;
width: 100%;
line-height: 20px;
margin: 0;
}
.category-box h6{
color: #000;
font-size: 19px;
font-weight: 600;
float: left;
width: 100%;
margin: 0;
}
.category-box h3{
font-size: 16px;
color: #091151;
font-weight: 500;
float: left;
width: 100%;
margin: 0;
}
.category-box:hover h3{
color: #000;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.c-img
{
background-color: white;
border: 1px solid #f0f2f5;
height: 283px;
object-fit: cover;
float: left;
width: 100%;
border-radius: 10px;
position: relative;
}
.category-box:hover .c-img{
filter: brightness(0.9);
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.b3-effect {
position: relative;
overflow: hidden;
border-radius: 10px;
}
/* Lightening effect */
.b3-effect::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
background: rgb(255 255 255 / 9%);
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -200%, 0);
transition: transform 1.8s ease;
z-index: 2;
pointer-events: none;
}
.b3-effect:hover::before {
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0);
}
.baby-slider{
padding-top: 40px;
}
/* Background image */
.grid-1 {
width: 100%;
height: 620px;
background-image: url(../images/t1.webp);
background-size: cover;
background-position: center;
border-radius: 10px;
transition: transform 1.5s ease;
position: relative;
z-index: 1; /* behind the overlay */
}
/* Only scale background on hover */
.b3-effect:hover .grid-all {
transform: scale(1.08);
}
/* Overlay content stays fixed */
.overlay-content {
position: absolute;
left: 37px;
bottom: 35px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
z-index: 3; /* above the lightening effect */
}
.overlay-content-h5{
font-size: 27px;
font-weight: 400;
margin: 0;
color: #fff;
letter-spacing: .5px;
}
.trending{display: inline-block;background-color: #0b52a1;font-size: 14px;font-weight: 400;padding: 4px 15px;color: #fff;border-radius: 5px;}
.arrow {
display: inline-block;
/* margin-bottom: 10px; */
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.arrow img {
width: 32px !important;
height: auto;
display: block;
filter: invert(1);
}
.grid-2{
gap: 17px;
display: flex;
justify-content: center;
flex-direction: column;
border-radius: 9px;
color: #fff;
text-align: left;
position: relative;
height: 262px;
background-color: #ed1c24;
margin-bottom: 7px;
padding: 0px 49px 0px 30px;
}
.grid-2 h5{font-size: 23px;font-weight: 600;margin: 0;line-height: 30px;}
.grid-2 p{
font-size: 17px;
font-weight: 400;
margin: 0;
line-height: 23px;
}
@media(min-width:990px)
{
.g-pr1{
padding-right: 7px;
}.g-pr2{
padding-right: 12px;
padding-left: 3px;
}
.g-pr3{
padding-left: 0px;
}
}
.desk-banners{
padding-bottom: 66px;
}
.grid-3 {
width: 100%;
height: 350px;
background-image: url(../images/t2.webp);
background-size: cover;
background-position: center;
border-radius: 7px;
transition: transform 1.5s ease;
position: relative;
z-index: 1;
}
.tag-new{display: inline-block;background-color: #0f6106;font-size: 14px;font-weight: 400;padding: 4px 15px;color: #fff;border-radius: 5px;}
.sp-left{
left: 21px;
}
/* Only scale background on hover */
.b3-effect:hover .grid-3 {
transform: scale(1.08);
}
.overlay-content-h5{
font-size: 27px;
font-weight: 400;
margin: 0;
color: #fff;
letter-spacing: .5px;
}
.best-seller{display: inline-block;background-color: #8f0676;font-size: 14px;font-weight: 400;padding: 4px 7px;color: #fff;border-radius: 5px;}
.grid-4 {
width: 100%;
height: 347px;
background-image: url(../images/t3.webp);
background-size: cover;
background-position: center;
border-radius: 7px;
transition: transform 1.5s ease;
position: relative;
z-index: 1;
}
.spl-content{
text-align: right;
right: 13px;
bottom: unset;
gap: 10px;
align-items: flex-end;
top: 17px;
}
.grid-5 {
width: 100%;
height: 262px;
background-image: url(../images/d50.webp);
background-size: cover;
background-position: center;
border-radius: 4px;
transition: transform 1.5s ease;
position: relative;
z-index: 1; /* behind the overlay */
}
.overlay-content5 {
position: absolute;
display: flex;
flex-direction: column;
z-index: 3; /* above the lightening effect */
text-align: right;
right: 13px;
bottom: unset;
align-items: flex-end;
top: 17px;
gap: 10px;
}
.new{display: inline-block;background-color: #000;font-size: 14px;font-weight: 400;padding: 4px 13px;color: #fff;border-radius: 5px;position: absolute;bottom: -107px;}
}
.trend-pad{
padding-top: 70px;
}
.com-table {
float: left;
width: 100%;
padding: 54px 0 90px 0px;
background: #cfb99a;
background-repeat: no-repeat;
background-size: cover;
padding-left: 600px;
}
.trends-section {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 91px;
width: 100%;
max-width: 877px;
/* margin: 0 auto; */
}
.section-title {
color: #fff;
font-size: 30px;
font-weight: 600;
margin: 0;
}
.gender-tabs {
display: flex;
background:transparent;
border-radius: 60px;
padding: 12px 12px;
border: 1px solid #8b7961;
gap: 9px;
transition: background 0.3s ease;
}
.gender-tab {
color: #000;
font-weight: 400;
font-size: 19px;
padding: 9px 58px;
border: none;
background: transparent;
border-radius: 9999px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
white-space: nowrap;
}
.gender-tab.active {
background: linear-gradient(90deg,rgba(70, 69, 70, 1) 0%, rgba(42, 39, 40, 1) 100%) !important;
color: #ffffff;
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
}
.gender-tab:not(.active):hover {
/* background: rgba(0, 0, 0, 0.05); */
}
.gender-panel.hidden {
display: none;
}
.trending-text{
float: left;
width: 100%;
/* padding: 0px 10px; */
gap: 10px;
display: flex;
flex-direction: column;
/* padding-bottom: 25px; */
}
.head-com{
float: left;
width: 93.5%;
display: flex;
justify-content: space-between;
padding-bottom: 90px;
align-items: center;
}
.head-com h2{
float: left;
font-size: 30px;
color: #fff;
font-weight: 600;
}
.nav-pills{
background-color: #cfb99a;
padding: 14px 15px;
border: 1px solid #8b7961;
border-radius: 61px;
}
.clamp-3 {
display: -webkit-box; /* needed for WebKit browsers */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* number of lines to show */
overflow: hidden; /* hide the rest */
text-overflow: ellipsis; /* adds ... at the end */
}
.banner-5{
float: left;
width: 100%;
padding: 52px 0px 0 0;
}
.banner-5 h2{
font-size: 24px;
font-weight: 600;
color: #000;
margin-bottom: 5px;
}
.adv1 {
float: left;
width: 100%;
padding: 13px 0 20px 0;
position: relative;
overflow: hidden;
border-radius: 10px;
cursor: pointer;
}
.adv1 img {
width: 100%;
border-radius: 10px;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
/* Very light gradient overlay for hover effect */
.adv1::before {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.1) 50%, /* much lighter */
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-20deg);
transition: all 0.6s ease;
}
.adv1:hover::before {
left: 125%; /* sweep across the image */
}
.advimg-1{
height:295px ;
}
.advimg-2{
height:405px ;
}
.advimg-3{
height: 410px;
}
.advimg-4{
height:410px ;
}
.kids-trends {
float: left;
width: 100%;
padding: 40px 0px;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card-kids {
border-radius: 12px;
overflow: hidden;
}
.img-box {
position: relative;
height: 345px; /* fixed height */
overflow: hidden;
border-radius: 12px;
object-fit: cover;
background-color: #f0f0f0;
}
.img-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease, opacity 0.3s ease;
border-radius: 12px;
}
.img-box:hover img {
transform: scale(1.05);
}
.overlay-card {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 12px;
}
.img-box:hover .overlay-card {
opacity: 1;
}
.overlay-card .btn-card {
padding: 14px 24px;
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 15px;
border-radius: 6px;
border: 1px solid #fff;
transition: background 0.3s ease;
}
.overlay-card .btn-card:hover {
border: 1px solid #fff;
}
.card-kids h3 {
margin-top: 23px;
font-size: 18px;
font-weight: 600;
margin-bottom: 4px;
}
.card-kids p {
font-size: 15px;
font-weight: 400;
color: #000;
}
.budget-store {
float: left;
width: 100%;
padding: 35px 0px 79px 0px;
}
.budget-store h2 {
margin-bottom: 33px;
/* font-size: 22px; */
}
.budget-cards {
overflow: hidden; /* prevents scaled cards from spilling out */
}
.budget-card h3 {
font-size: 30px;
font-weight: 700;
color: #000;
line-height: 39px;
margin-bottom: 0;
}
.budget-card h3 span{
float: left;
width: 100%;
letter-spacing: 1px;
}
.budget-card p {
font-size: 16px;
color: #000;
font-weight: 400;
margin-bottom: 0;
}
/* Budget Card Base */
.budget-card {
position: relative;
padding: 50px 40px;
border-radius: 12px;
text-align: left;
transition: all 0.35s ease;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden; /* keep everything inside */
}
/* Overlay effect on hover */
.budget-card::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.15); /* subtle white overlay */
transition: all 0.35s ease;
pointer-events: none;
}
.budget-card:hover::after {
left: 0; /* slide overlay in from left */
}
/* Button hover effect */
.budget-card .btn-budget {
margin-top: 7px;
width: fit-content;
display: inline-block;
padding: 16px 34px;
background: #fff;
color: #000;
font-size: 15px;
font-weight: 500;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
}
.budget-card:hover .btn-budget{
background: #a7cd38;
transform: translateY(-3px); /* subtle lift of button only */
color: #fff;
}
/* Maintain card colors */
.pink { background: #ffe0ea; }
.peach { background: #ffd9d6; }
.blue { background: #e2e6ff; }
.purple { background: #e7d8e8; }
.s3box{
float: left;
width: 100%;
height: auto;
border: solid 10px #fff;
border-radius: 20px;
margin-top: 118px;
}
.s3box img{
float: left;
width: 100%;
border-radius: 20px;
margin-top: -1px;
}
/* Default slide */
.slick-h2{
margin-bottom: 9px !important;
/* position: absolute; */
top: 41px;
float: left;
width: 100%;
padding-top: 34px;
}
.center-slider .slick-slide{
height:500px;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0.8);
transition: all 0.4s ease-in-out;
}
.center-slider .slick-slide,
.center-slider .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] {
transform: scale(1.1, 1.1);
transition: all 0.4s ease-in-out;
}
/* Active center slide (You can change anything here for cenetr slide)*/
.center-slider .slick-center,
.center-slider .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] {
transform: scale(0.9);
background-color: #ffffff;
}
.center-slider .slick-current.slick-active{
transform: scale(1.2);
background-color: #ffffff;
position: relative;
z-index: 999;
}
.center-slider .slick-current.slick-active .s3box img {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
border-radius: 20px; /* Keep rounded corners */
}
.slick-next, .slick-prev{
z-index: 5;
}
.slick-next{
right: 0px;
}
.slick-prev{
left: 0px;
}
.slick-next:before, .slick-prev:before{
color: #000;
font-size: 26px;
}
/* Footer Base */
.footer {
background-color: #434345;
color: #cccccc;
width: 100%;
float: left;
}
/* ---------- Top Section (Logo + Trust) ---------- */
.top-footer {
display: flex;
justify-content: space-between;
align-items: center;
/* padding: 60px 0px; */
border-bottom: 1px solid #575759; /* bottom border */
flex-wrap: wrap;
/* gap: 37px; */
}
.f-1 {
flex: 0 0 40%;
text-align: center;
/* padding-top: 94px; */
/* padding-bottom: 86px; */
display: flex;
align-items: center;
justify-content: center;
}
.fifty-year {
width: 380px;
max-width: 100%;
}
.trust-section {
flex: 0 0 55%;
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 cols */
grid-template-rows: auto auto; /* 2 rows */
gap: 30px 40px;
padding-left: 65px;
border-left: 1px solid #575759; /* left border */
padding: 57px 0px 50px 60px;
}
.trust-badge img {
width: 66px;
margin-bottom: 13px;
}
.trust-badge h3 {
font-size: 21px;
font-weight: 600;
color: #ffffff;
margin-bottom: 12px;
}
.trust-badge p {
font-size: 15px;
line-height: 1.5;
font-weight: 400;
}
/* ---------- Middle Navigation Section ---------- */
.main-section {
padding: 60px 0px 24px 0px;
border-bottom: 1px solid #575759;
}
.navigation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 56px;
}
.nav-column h4 {
font-size: 19px;
font-weight: 600;
color: #ffffff;
margin-bottom: 15px;
}
.nav-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav-column li {
margin-bottom: 8px;
}
.nav-column a {
font-size: 14px;
color: #cccccc;
text-decoration: none;
transition: color 0.3s;
font-weight: 400;
}
.nav-column a:hover {
color: #ffffff;
}
/* ---------- Footer Links Section ---------- */
.footer-links {
padding: 55px 0px 0px 0px;
/* border-bottom: 1px solid #575759; */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 26px;
}
.footer-column h4 {
font-size: 19px;
font-weight: 600;
color: #ffffff;
margin-bottom: 15px;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column li {
margin-bottom: 8px;
}
.footer-column a {
font-size: 14px;
color: #cccccc;
font-weight: 400;
text-decoration: none;
}
.footer-column a:hover {
color: #ffffff;
}
.contact-info p {
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
line-height: 25px;
}
/* Contact Buttons */
.contact-buttons {
display: flex;
flex-direction: column;
gap: 12px;
padding-left: 75px;
}
.contact-btn {
display: flex;
align-items: center;
gap: 19px;
font-size: 14px;
color: #ffffff;
font-weight: 400;
cursor: pointer;
margin-bottom: 20px;
}
.contact-btn img {
width: 36px;
/* height: 28px; */
padding: 8px;
border-radius: 5px;
background-color: #666; /* background only for icon */
transition: background 0.3s;
}
.contact-btn img:hover {
background-color: #777;
}
/* ---------- Bottom Section (Language + Policies) ---------- */
.bottom-section {
padding: 0px 0px;
/* border-bottom: 1px solid #575759; */
padding-bottom: 53px;
}
.language-selector {
margin-bottom: 44px;
}
.lang-btn {
display: inline-flex;
align-items: center;
gap: 10px;
border: 2px solid #fff;
padding: 8px 21px;
border-radius: 30px;
background: none;
color: #ffffff;
font-size: 14px;
cursor: pointer;
font-weight: 500;
}
.globe {
width: 20px;
}
.policy-section {
display: grid;
gap: 50px;
}
.policy-item {
color: #cccccc;
display: flex;
gap: 14px;
width: 100%;
}
.policy-header {
flex: 0 0 216px; /* fixed width header */
font-weight: 500;
font-size: 17px;
color: #ffffff;
}
.policy-content {
flex: 1;
font-size: 15px;
line-height: 1.6;
display: flex;
flex-direction: column;
gap: 0px;
color: #cacaca;
padding-right: 8%;
}
.bullet {
color: #fff;
margin-right: 8px;
font-size: 21px;
}
.policy-content p{
margin-bottom: 0px;
}
.view-more {
display: inline-block;
margin-top: 3px;
font-size: 15px;
font-weight: 400;
color: #cacaca;
text-decoration: underline;
}
/* ---------- Payment + Social ---------- */
.payment-social-section {
padding: 30px 0px 44px 0px;
/* removed border-top */
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 25px;
}
.payment-options {
display: flex;
align-items: center;
gap: 42px;
font-size: 18px;
font-weight: 600;
color: #fff;
justify-content: center;
}
.payment-icons {
display: flex;
gap: 28px;
justify-content: center;
align-items: center;
}
.payment-icon {
height: 32px;
width: auto;
}
.rupay-wd{
height: 25px;
}
.upi-wd{
height: 25px;
}
.social-section {
display: flex;
align-items: center;
gap: 26px;
}
.social-section span{
font-size: 19px;
font-weight: 600;
color: #fff;
}
.social-links {
display: flex;
align-items: center;
gap: 17px;
}
.social-links a {
font-size: 14px;
color: #cccccc;
text-decoration: none;
font-weight: 400;
}
.social-links a:hover {
color: #ffffff;
}
/* ---------- Copyright ---------- */
.copyright {
text-align: center;
font-size: 14px;
color: #cccccc;
padding: 30px 0px;
border-top: 1px solid #5f5f61;
}
.copyright p{
margin: 0;
}
/*login*/
.log_set .option {
width: 100%;
float: left;
/* padding: 0 18px; */
font-size: 13px;
line-height: 30px;
color: #454545;
font-weight: 500;
text-align: left;
margin: 0px 0px;
position: relative;
}
.log_set .option > input {
position:absolute;
height:100%;
width:100%;
opacity:0;
left:0;
top: 0;
z-index: 10;
cursor: pointer;
}
.log_set .checkbox {
position:relative;
margin-right:5px;
background:#fff;
display:inline-block;
border: 2px solid #B5C1C7;
margin-bottom:0;
margin-top:0;
height:16px;
width:16px;
top:4px;
}
.log_set .checkbox:before {
content:'';
display:none;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
-o-box-sizing:content-box;
box-sizing:content-box;
padding:0;
margin:0
}
.log_set input:checked + .checkbox:before {
display:block
}
.log_set .checkbox:before{
position:absolute;
top:3px;
left:2px;
width:6px;
height:3px;
border: solid #118405;
border-width:0 0 2px 2px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg)
}
.log_set input:checked + .checkbox {
border: 2px solid #118405;
}
.log_set input:hover + .checkbox {
border-color: #7f1431;
}
.log_set input:focus + .checkbox {
border-color: #7f1431;
}
.log_set input:focus + .checkbox:before{
border-color:#ee3425;
}
.reset-psw{
position: absolute;
top: 19px;
bottom: 33px;
font-size: 11px;
font-weight: 500;
z-index: 11;
color: #b3190e;
right: 20px;
}
.otp-req {
position: relative;
width: 100%;
background: #fff;
border: 1px solid #000;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-radius: 8px;
color: #000;
transition: background 0.3s ease, color 0.3s ease;
margin-bottom: 3px;
overflow: hidden; /* required for shine effect */
z-index: 1;
}
/* Shine effect */
.otp-req::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.4);
transition: left 0.5s ease;
}
/* Hover effect */
.otp-req:hover::after {
left: 130%;
}
.otp-req:hover {
background: #ed1c24; /* red hover */
color: #fff; /* switch text to white */
border-color: #ed1c24;
}
.login_panel .log_area .log_box p {
color: rgba(105, 105, 105, 0.95);
font-size: 13px;
line-height: 24px;
font-weight: 400;
/* margin: 0 0 10px !important; */
}
.login_panel .log_area .log_box p > a {
color: #3f880e;
text-decoration: none !important;
}
.close_form {
display: block !important;
position: absolute;
width: 40px;
height: 40px;
right: -50px;
top: 0px;
background: transparent url(../images/close.svg) no-repeat center center;
background-size: 20px 20px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
border: none;
cursor: pointer;
}
/* Shine effect */
.submit_frm::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.4);
transform: skewX(-25deg);
transition: left 0.5s ease;
}
/* Hover effect */
.submit_frm:hover::after {
left: 130%;
}
.submit_frm {
position: relative;
width: 100%;
background: #00a14b;
border: 0;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-radius: 8px;
color: #fff;
transition: background 0.3s ease;
overflow: hidden; /* required for shine effect */
z-index: 1;
}
.submit_frm:hover {
background: #ed1c24; /* red hover color */
}
.login_panel {
float: left;
width: 100%;
padding:20px 25px 20px 25px;
}
.login_panel .log_area .log_box .or {
font-size: 17px;
font-weight: 500;
color: #30382e;
text-align: center;
padding: 21px 0;
width: 100%;
float: left;
position: relative;
background: #fff;
margin-bottom: 5px;
}
.log_set {
width: 100%;
float: left;
position: relative;
padding: 0 0 17px;
}
.log_set label {
width: 100%;
float: left;
position: relative;
font-size: 14px;
font-weight: 600;
color: #000;
line-height: 25px;
margin: 0 0 0;
text-align: left;
}
.log_form .log_set input[type="text"], .log_form .log_set input[type="password"], .log_form .log_set input[type="mail"], .log_form .log_set input[type="email"], .log_form .log_set input[type="tel"], .log_form .log_form
.log_set select, .log_form .log_set textarea {
width: 100%;
float: left;
position: relative;
height: 55px !important;
border: solid 1px rgba(0,0,0,0.15) !important;
padding: 10px 0px 22px;
font-size: 13px;
line-height: 25px;
color: #000;
font-weight: 400;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
outline: none;
border-top: 0;
border-left: 0;
border-right: 0;
border-radius: 15px;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 15px;
padding-right: 15px;
}
.log_set textarea {
height: 100px !important;
}
.log_set input[type="text"]:focus,
.log_set input[type="password"]:focus,
.log_set input[type="mail"]:focus,
.log_set textarea:focus {
border-color: #118405 !important;
}
.log_box{
float: left;
width: 100%;
}
.login-continue {
width: 100%;
float: left;
background: #D09C51;
border: 0;
height: 43px;
display: flex;
float: left;
align-items: center;
font-size: 16px;
font-weight: 500;
cursor: pointer;
border-radius: 13px;
justify-content: center;
color: #fff;
transition: ease-out 0.4s;
/* transform: translateY(-2px); */
box-shadow: 0 4px 0px #fff;
margin-bottom: 3px;
}
/* Hover Effect */
.login-continue:hover {
/* box-shadow: inset 0 0 0 50px #4A171E; */
/* color: white; */
transform: translateY(-2px);
box-shadow: 0 4px 0px #052e70;
}
.pr-modal {
position: relative !important;
width: auto !important;
margin: 1.75rem auto !important;
}
.wl-login h2 {
float: left;
width: 100%;
font-size: 27px;
color: #000;
font-weight: 600;
}
.wl-login h2 span {
/* color: #7f1431; */
/* padding-left: 0px; */
}
.wl-login p {
float: left;
width: 100%;
font-size: 14px !important;
font-weight: 400px !important;
text-align: left !important;
line-height: 20px !important;
}
.login_panel .log_area .log_box p > a {
color: #00a14b;
text-decoration: none !important;
}
@media (min-width: 576px)
{
.modal-dialog {
max-width: 500px !important;
/* margin: 1.75rem auto !important; */
}
}
.modal-etc{
position: unset !important;
max-height: unset !important;
width: unset !important;
height: unset !important;
}
.footer_link .link_left {
text-align: left;
list-style: none;
}
.footer_link > li {
/* width: 50%; */
/* float: left; */
}
.footer_link .link_right {
text-align: right;
list-style: none;
}
.footer_link > li > a {
width: 100%;
float: left;
position: relative;
font-size: 15px;
line-height: 24px;
color: red;
font-weight: 400;
margin: 30px 0 5px;
text-decoration: none !important;
text-align: center;
}
.footer_link > li > a:hover {
color: #30382e;
}
.footer_link{
float: left;
width: 100%;
padding-left: 0px;
}
@media (min-width:767px)
{
.ftr-mbf{
display: none;
}
}
@media (max-width:767px)
{
.ftr-mbf{
display: block;
}
}
.ftr-mbf{
padding-top: 1px;
float: left;
width: 100%;
left: 0px;
position: fixed;
bottom: 0px;
padding-bottom: env(safe-area-inset-bottom);
height: 67px;
z-index: 999;
background-color: #434345;
/* padding-top: 9px; */
}
.tab-mb{
width: 33.333%;
float:left;
font-size: 12px;
/* color:#000; */
text-align:center;
border-right: solid 1px rgb(200 200 200 / 21%);
height: 59px;
position: relative;
padding-top: 11px;
}
.tab-mb img{width: 26px;height: 26px;/* background-color: white; */position: relative;}
.tab-mb strong{
color: white;
float:left;
width:100%;
font-weight: 500;
font-size: 12px;
padding-top: 5px;
margin-bottom:10px;
/* padding-right: 12px; */
}
.b4-box:hover img{
transform: rotateY(360deg);
transform-style: preserve-3d;
transition: transform 0.8s;
}
.badge-fav2{
background-color: #ed1c24;
color: white;
display: flex;
font-size: 9px;
line-height: 22px;
border-radius: 50%;
top: 5px;
width: 18px;
height: 18px;
right: 41%;
position: absolute;
justify-content: center;
align-items: center;
}
.badge-fav3{
background-color: #ed1c24;
color: white;
display: flex;
font-size: 11px;
line-height: 22px;
border-radius: 50%;
align-items: center;
justify-content: center;
top: 7px;
width: 18px;
height: 18px;
right: 42%;
position: absolute;
}
#whole-flex {
position: absolute;
flex-direction: column;
text-align: center;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: -10;
}
/*mobile*/
.logo-mob{
float: left;
width: 100%;
}
.logo-mob img{
width: 100%;
display: block;
margin: auto;
float: none;}
.mob-wishlist{
position: relative;
}
.mob-wishlist img{
width: 25px;
position: relative;
}
.mob-cart img{
width: 25px;
}
.mob-user img{
width: 23px;
}
.mob-cart{
position: relative;
}
.mobile-menus{
display: flex;
justify-content: center;
gap: 21px;
align-items: center;
}
.badge-mob1{
background-color: #ed1c24;
border-radius: 10px;
color: white;
display: flex;
font-size: 9px;
line-height: 22px;
align-items: center;
justify-content: center;
vertical-align: middle;
white-space: nowrap;
border-radius: 50%;
top: -9px;
width: 19px;
height: 19px;
right: -35%;
position: absolute;
}
.badge-mob2{
background-color: #ed1c24;
border-radius: 10px;
color: white;
display: flex;
font-size: 9px;
line-height: 22px;
align-items: center;
justify-content: center;
vertical-align: middle;
white-space: nowrap;
border-radius: 50%;
top: -7px;
width: 19px;
height: 19px;
right: -35%;
position: absolute;
}
.grid-carousel .splide__pagination {
position: static;
text-align: center;
margin-top: 15px;
}
.grid-carousel .splide__pagination .splide__pagination__page {
background: none;
opacity: 1;
margin: 0 5px;
cursor: pointer;
}
.grid-carousel .splide__pagination .splide__pagination__page::before {
content: '';
display: block;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
transition: background 0.3s ease;
}
.grid-carousel .splide__pagination .splide__pagination__page.is-active
{
transform: unset;
}
.grid-carousel .splide__pagination .splide__pagination__page.is-active::before {
background: #a7ce38;
}
.grid-carousel .splide__pagination .splide__pagination__page:hover::before {
background: #a7ce38;
}
/* Center dots only for .grid-carousel */
.budget-carousel .owl-dots {
text-align: center;
margin-top: 15px; /* adjust spacing if needed */
}
/* Inactive dots */
.budget-carousel .owl-dots .owl-dot span {
width: 10px;
height: 10px;
margin: 5px;
background: black; /* inactive color */
border-radius: 50%;
display: block;
transition: background 0.3s ease;
}
/* Active dot */
.budget-carousel .owl-dots .owl-dot.active span {
background: #a7ce38; /* active color */
}
.bnr2-crsl {
width: 100%;
float: left;
}
.bnr2-crsl .carousel {
position: relative;
}
/*product-listing*/
/*MEN*/
.filter-list h1{
float: left;
width: auto;
font-size: 18px;
font-weight: 600;
color: #000;
margin-bottom: 17px;
}
.head1{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f7fce8;
padding: 27px 0px;
float: left;
width: 100%;
}
.headtitle h6{
font-size: 24px;
margin: 0;
font-weight: 600;
}
.headcontent {
display: flex;
justify-content: space-between; /* pushes left and right */
align-items: center;
width: 100%;
}
.breadcrumbs {
font-size: 13px;
color: #70765f;
display: flex;
gap: 8px;
}
.breadcrumbs-active{
color: #2384a6 !important;
}
@media(max-width:991px)
{
.sort-by{
position: inherit;
display: none !important;
}
}
.sort-by {
font-size: 14px;
color: #5e4e6a;
display: flex;
align-items: center;
}
.sort-by label {
font-weight: 500; /* Bold text for "Sort By" label */
margin-bottom: 0px;
color: #000;
font-size: 14px;
}
#sort-options {
font-size: 13px;
padding: 11px 12px;
border: none; /* Light gray border */
border-radius: 0px;
background-color: #fbf0f0; /* White background */
color: #000; /* Text color */
outline: none;
appearance: none; /* Hides default dropdown styling */
position: relative;
background-image: url("../images/innerpage/chevron.png");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 14px;
font-weight: 500;
width: 177px;
cursor: pointer;
border-radius: 8px;
}
#sort-options option {
background-color: #fbf0f0;
color: #000;
padding: 20px 5px;
font-size: 13px;
font-weight: 400;
border: 0px !important;
outline: none;
}
.sort-by {
gap: 5px;
}
.p-l{
padding-left: 0px !important;
padding-right: 0px !important;
}
.content {
background:white;
height:100%;
padding:0px;
float: left;
width: 100%;
}
.product-fixed{
float:left;
width: 13%;
background-color:#59a446;
height:60px;
padding-left:15px;
color:white;
font-size:15px;
font-weight:500;
line-height: 59px;
}
.filter1-list {
list-style: none;
padding: 0;
margin: 0;
}
.filter-item {
margin-bottom: 8px;
}
.filter-header {
gap: 3px;
cursor: pointer;
font-weight: 500;
display: flex;
align-items: center;
/* justify-content: space-between; */
padding: 6px 0;
color: #474948;
font-size: 16px;
}
.filter-next {
transition: transform 0.3s ease;
width: 18px;
}
.sub-filter{
list-style: none;
padding-left: 23px;
/* margin: 5px 0; */
display: none;
position: relative;
}
.sub-filter li {
padding: 4px 0 4px 5px;
font-weight: 400;
position: relative; /* creates space for the hyphen */
font-size: 15px;
color: #7a7e79;
}
.sub-filter li::before {
content: "-";
position: absolute;
left: 0;
/* color: #555; */
/* font-size: 14px; */
/* margin-right: 8px; */ /* space between hyphen and text */
}
.sub-filter li a:hover {
color: #51a677;
}
.sub-filter li a
{
font-size: 15px;
font-weight: 400;
color: #7a7e79;
}
.sub-filter li::before {
position: absolute;
content: "";
left: -10px;
background: #c4c4c4;
height: 1px;
width:8px;
top: 15px;
}
.open > .sub-filter {
display: block;
}
.open > .filter-header img {
transform: rotate(90deg);
}
.category-product{
float:left;
width:87%;
padding-left:20px;
padding-right:20px;
}
.fx-category{
float:left;
width:100%;
padding-top:0px;
}
.category-active{
color:#cac4c4;
}
.filter-list{
float: left;
width: 100%;
height: 100%;
padding-top: 32px;
border-right: 1px solid #e7e7e7;
}
.sub-category{
float:left;
width:100%;
border-bottom: solid 1px #e5e5e5;
/* padding-left:15px; */
padding-right:15px;
padding-bottom: 10px;
margin-bottom:25px;
}
.pl-none{
padding-left:0px !important;
padding-right:0px !important;
}
.sub-category h2{
float:left;
width: auto;
/* text-transform:uppercase; */
color: #050505;
font-size: 18px;
font-weight: 600;
padding-bottom: 20px;
margin-bottom:0px;
}
.sub-nav{
float:left;
width:100%;
font-size: 14px;
padding-bottom: 16px;
/* line-height: 0px; */
color: #262626;
font-weight: 400;
}
.sub-nav span{
float:right;
color: #1707e9;
}
.sub-nav:hover{
text-decoration:none !important;
color: #7f1431;
}
.form-group{
float:left;
width:100%;
padding-bottom: 9px;
margin-bottom: 0px !important;
}
.form-group input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
margin-top: 20px;
}
.sub-category .form-group label {
position: relative;
cursor: pointer;
font-size: 15px;
color: #050505;
font-weight: 400;
width: 100%;
display: flex;
align-items: center;
gap: 15px;
}
.form-group label:before {
content: '';
-webkit-appearance: none;
background-color: white;
border: 1px solid #dcdcdc;
width: 24px;
height: 24px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
/* margin-right: 15px; */
border-radius: 8px;
}
.form-group input:checked + label:after {
content: '';
display: block;
position: absolute;
top: 1px;
width: 24px;
height: 24px;
background: url("../images/check.png") no-repeat center center;
left: 0px;
background-color: #04833f;
border-radius: 8px;
background-size: 18px;
}
.sub-category .form-group label span{float:right;}
.sub-category .form-group label:hover{color: #00a14b !important;}
.price-list{float:left; width:100%;}
.product-display{float:left; width:100%; padding-top:35px;}
.prl-right{padding-right:0px !important; float:left !important; border-left:solid 1px #e5e5e5;}
.result-list{float:left;width:100%;padding-bottom: 35px;}
.result-list h3{color:#000000;font-weight:normal;font-size:15px;float:left;width:50%;padding-top: 12px;}
.result-list h3 span{color:#59a446; font-weight:500;}
.sort-option{float:right; width:50%;}
.sort-option span{float: right;text-transform:uppercase;font-size:16px;color:#418a2f;font-weight:500;margin-right: 25px;padding-top: 12px;}
.pb50{margin-bottom:50px;}
.price-border{border-bottom:none !important;}
.fx-category button.owl-prev img {width:32px;}
.fx-category button.owl-next img {width:32px; margin-left:6px;}
.fx-category .owl-nav{float:right; top: 26px; float: right; position: absolute; right: -32px;}
.sub-nav:hover{
text-decoration:none !important;
color: #ff0000;
}
.price-border {
border-bottom: none !important;
}
.price-list {
float: left;
width: 100%;
margin-top: 10px;
}
.price-inputs {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 15px;
justify-content: flex-start;
margin-bottom: 24px;
cursor: pointer;
}
.input-container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.price-label {
font-size: 15px;
font-weight: 600;
color: black;
margin-bottom: 5px;
}
.price-input {
cursor: pointer;
width: 96px;
height: 40px;
/* padding: 10px; */
border-radius: 9px;
background-color: #f3f3f3;
color: black;
text-align: center;
font-weight: 500;
font-size: 15px;
border: none;
outline: none !important;
appearance: none;
}
.price-list span {
font-size: 14px;
color: black;
font-weight: bold;
margin-top: 25px;
align-self: center;
}
.go-button {
/* margin-top: 4px; */
padding: 6px 13px;
border-radius: 8px;
background-color: #595555;
color: white;
font-size: 15px;
font-weight: 500;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.go-button:hover {
background-color: #333;
}
.sort-by {
float: right;
width: 100%;
/* position: relative; */
/* z-index: 99999; */
/* padding: 25px 0px; */
display: flex;
align-items: center;
justify-content: end;
/* margin-left: auto; */
margin-bottom: 40px;
}
.select-sort {
float: right;
margin-bottom: 0px;
}
.select-sort #all:checked ~ label[for="all"], .select-sort #pop:checked ~ label[for="pop"], .select-sort #high_low:checked ~ label[for="high_low"], .select-sort #low_high:checked ~ label[for="low_high"], .select-sort #discount:checked ~ label[for="discount"] {
background: #7f1431;
color: #ede8e8 !important;
text-align: center;
padding: 10px 0px !important;
font-size: 14px;
width: 146px;
border-radius: 30px;
}
.select-sort label {
display: inline-block;
/* width: 50px; */
/* height: 50px; */
text-align: center;
border: 1px solid #7f1431;
/* line-height: 50px; */
cursor: pointer;
text-align: center;
padding: 10px 0px !important;
font-size: 14px;
width: 146px;
font-weight: 400;
border-radius: 30px;
color: #000 !important;
margin-left: 5px;
}
.sort-text {
float: right;
color: #000000;
margin-top: 11px;
font-size: 15px;
text-align: right;
padding-right: 8px;
font-weight: 600;
}
.select-sort input {
display: none;
}
.f-l{
float: left;
width: 100%;
}
.main-products{
float: left;
width: 100%;
padding: 30px 0px;
}
.product-list{
float: left;
margin-bottom: 40px;
}
/* responsive */
@media (min-width:992px) and (max-width:9500px) {
.mobile-sr{display:none;}
.mb-filters{display:none !important;}
}
.product-listing1{
float: left;
width: 19.5%;
padding-left: 17px;
height: 100%;
}
.product-listing2{
float: left;
width: 80.5%;
}/* Base hidden state for lazy items */
.size-options {
display: flex;
flex-wrap: wrap;
gap: 7px 10px;
float: left;
margin-bottom: 16px;
}
.size-input {
display: none; /* hide default checkbox */
}
.size-label {
display: inline-block;
padding: 6px 12px;
border-radius: 6px;
background: #f3f3f3;
color: #474948;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-size: 13px;
}
/* On hover */
.size-label:hover {
background: #04833f;
color: #fff;
}
/* When checked */
.size-input:checked + .size-label {
background: #04833f; /* green */
color: #fff;
}
.clear-btn{
padding-right: 18px;
float: right;
color: #ed1d26;
font-size: 15px;
font-weight: 500;
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
}
.product-wrap {
display: flex;
gap: 40px;
align-items: flex-start;
width: 100%;
margin: 0 auto;
float: left;
padding: 65px 0px;
}
/* Thumbnail scroller */
.thumbs {
float: left;
width: 100%;
display: flex;
gap: 14px;
margin-top: 11px;
align-items: center;
}
.thumbs .thumb {
width: 76px;
height: 87px;
/* border: none; */
/* border: 4px solid #fff; */
overflow: hidden;
flex: 0 0 auto;
object-fit: cover;
cursor: pointer;
/* background: #fff; */
}
.thumb img {
border-radius: 11px;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.thumb img.selected {
border: 4px solid #33bdf2;
}
.main-image {
position: relative;
overflow: hidden;
border-radius: 10px;
}
#mainImg {
width: 100%;
height: auto;
display: block;
transition: transform 0.2s ease;
transform-origin: center center;
}
#mainImg.zoomed {
transform: scale(1.5); /* Adjust this value for desired zoom */
}
/* This layer simply captures the mouse movement */
#zoomOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
cursor: zoom-in; /* Change cursor to indicate zoomability */
display: none; /* Hide by default */
}
/* Remove or ignore the old #zoomLens styles */
/* Right column */
.meta {
color: var(--muted);
margin-bottom: 12px;
}
.tag {
display: inline-block;
background: #ffd7ee;
color: #a51d5a;
padding: 6px 12px;
border-radius: 999px;
margin-left: 12px;
font-weight: 600;
}
/* Price section */
.price-row {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
padding: 11px 0px 11px 8px;
margin: 21px 0;
float: left;
width: 100%;
}
.price-large {
font-size: 30px;
font-weight: bold;
}
.old-price {
text-decoration: line-through;
color: #6b6767;
margin-left: 17px;
font-size: 15px;
font-weight: 500;
}
.off {
color: #348607;
margin-left: 21px;
font-weight: bold;
font-size: 19px;
}
.ratings {
color: #888787;
font-size: 14px;
font-weight: 500;
}
/* Field & sizes */
.field {
display: flex;
align-items: center;
gap: 6px;
margin: 19px 0;
float: left;
width: 100%;
}
.field label {
min-width: 63px;
color: #000;
margin: 0;
font-size: 17px;
font-weight: 600;
}
.sizes {
display: flex;
gap: 13px;
}
.size-btn {
color: black;
padding: 8px 14px;
border-radius: 8px;
border: 1px solid #c4c4c4;
cursor: pointer;
background: #fff;
font-size: 15px;
font-weight: 400;
}
.size-btn.active {
background: var(--green);
color: #fff;
border-color: transparent;
}
/* Colors (weight-panel) */
.weight-panel {
width: 100%;
/* padding: 24px 0px; */
display: flex;
flex-direction: row;
gap: 2px;
align-items: center;
padding-top: 17px;
}
.weight-panel span {
display: block;
color: #000;
font-weight: 600;
font-size: 17px;
margin-bottom: 10px;
min-width: 63px;
}
.selector-item-rad-pd {
width: 70px;
height: 78px;
position: relative;
cursor: pointer;
}
.selector-item_radio-pd {
display: none;
}
.selector-item_label-pd {
display: block;
width: 100%;
height: 100%;
position: relative;
margin: 0;
}
.selector-item_label-pd img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
display: block;
}
.selector-item_radio-pd:checked + .selector-item_label-pd::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border: 3px solid #33bdf2;
border-radius: 8px;
pointer-events: none;
height: 100%;
width: 100%;
}
.hidden-row {
display: none;
}
.hidden-row.show {
display: block;
}
.selector-item-pd:nth-child(n+3) {
display: none;
}
@media (min-width: 768px) {
.selector-item-pd:nth-child(n+4) {
display: none;
}
.selector-item-pd:nth-child(3) {
display: block;
}
}
@media (min-width: 990px) {
.selector-item-pd:nth-child(n+5) {
display: none;
}
.selector-item-pd:nth-child(4) {
display: block;
}
}
@media (min-width: 1200px) {
/* Hide from the 7th item onwards to show 6 thumbs */
.selector-item-pd:nth-child(n+7) {
display: none;
}
/* Ensure items 5 and 6 are visible (unhidden by previous rules) */
.selector-item-pd:nth-child(5),
.selector-item-pd:nth-child(6) {
display: block;
}
}
.color-grid.expanded .selector-item-pd {
display: block !important;
}
.color-grid {
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: center;
}
.show-toggle {
justify-self: end;
cursor: pointer;
color: #000;
font-weight: 600;
font-size: 15px;
display: block;
order: 1;
}
.color-grid.expanded .show-toggle {
order: 999;
text-align: right;
}
.toggle-container {
position: relative;
}
/* Actions */
.buy {
background: #555;
color: #fff;
}
/* Delivery info */
.delivery {
display: flex;
align-items: center;
gap: 10px;
color: #266517;
/* margin-top: 12px; */
float: left;
font-size: 15px;
width: 100%;
font-weight: 600;
/* justify-content: center; */
}
/* Extra thumbnails */
.extra-thumbs {
display: none;
margin-top: 10px;
gap: 10px;
}
.extra-thumbs.show {
display: flex;
}
.main-image{
float: left;
width: 100%;
}
/* responsive */
@media (max-width:980px){
.product-wrap{flex-direction:column;
padding-bottom: 30px;
}
.right{min-width:unset}}
#mainImg{
float: left;
width: 100%;
max-width: 529px;
height: 602px;
object-fit: cover;
border-radius: 10px;
display: block;
}.thumbs-scroll {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 6px;
float: left;
width: 100%;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* Hide scrollbar */
.thumbs-scroll::-webkit-scrollbar {
display: none;
}
.thumbs-scroll {
-ms-overflow-style: none; /* IE/Edge */
scrollbar-width: none; /* Firefox */
}
.extra-thumbs {
display: none;
margin-top: 10px;
gap: 10px;
flex-wrap: wrap;
}
.extra-thumbs.show {
display: flex;
}
.thumb {
border: 2px solid transparent;
border-radius: 15px;
/* padding: 2px; */
cursor: pointer;
transition: border-color 0.3s ease;
}
.thumb.selected {
border: 3px solid #33bdf2; /* highlight color */
}
.more-link {
color: #2a6b9f;
cursor: pointer;
font-weight: 600;
margin-top: 8px;
}
.selection-thumbs{
display: flex;
gap: 10px;
align-items: center;
}
.right-pd{
float: left;
width: 100%;
padding-left: 19px;
}
.right-pd h1{
font-size: 31px;
font-weight: 600;
line-height: 39px;
color: #000;
}
.category-pd{display: flex;align-items: center;padding: 10px 0px;gap: 27px;}
.category-pd h2{
font-size: 15px;
font-weight: 600;
color: #5a5a5c;
margin: 0;
}
.specification
{
background-color: #fbc7e6;
padding: 3px 21px;
color: #000;
font-size: 14px;
font-weight: 500;
border-radius: 7px;
}
.p-r{
padding-right: 11px;
}
.price-large span{
font-size: 27px;
font-weight: 500;
}
/* Quantity */
.quantity-selector {
display: flex;
align-items: center;
gap: 10px;
}
.qty-btn {
color: black;
width: 42px;
height: 45px;
border: none;
background: #e5e5e5;
font-size: 19px;
font-weight: 600;
border-radius: 9px;
cursor: pointer;
}
.quantity-value {
min-width: 30px;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #ed1c24;
}
/* Pincode */
.pincode-check {
display: flex;
/* flex-direction: column; */
gap: 16px;
align-items: center;
}
.pincode-input-wrapper {
display: flex;
align-items: center;
border: 1px solid #a6a6a6;
border-radius: 10px;
overflow: hidden;
/* display: flex; */
/* gap: 20px; */
padding-left: 16px;
padding-right: 10px;
}
.pincode-input-wrapper input {
border: none;
padding: 14px 6px 14px 0px;
flex: 1;
outline: none;
width: 192px;
font-size: 14px;
font-weight: 400;
}
.check-btn-pd {
background: linear-gradient(90deg, #2e7d32, #1b5e20);
color: #fff;
border: none;
padding: 6px 27px;
font-weight: 400;
cursor: pointer;
border-radius: 20px;
font-size: 16px;
}
.pincode-check label{
font-size: 15px !important;
font-weight: 500 !important;
text-align: right;
margin: 0;
}
.field-qty {
justify-content: space-between;
padding-right: 37px;
padding-top: 16px;
display: flex;
align-items: center;
gap: 6px;
margin: 19px 0;
float: left;
width: 100%;
}
.pd-btngroup {
width: 41%;
}
.delivery img{
width: 35px;
}
.delivery span{
font-weight:500;
color: #333;
}
.truck{
justify-content: center;
display: flex
;
align-items: center;
gap: 10px;
}
.p-info-head{
width: 20%;
float: left;
}
.p-info-details{
width: 80%;
float: left;
}
.product-information {
width: 100%;
padding: 40px 0;
}
.product-information h2 {
font-size: 28px;
font-weight: 600;
}
.details-table {
padding-top: 8px;
display: grid;
grid-template-columns: 150px 20px auto;
row-gap: 23px;
font-size: 16px;
font-weight: 500;
margin-bottom: 15px;
}
.sp-text{
padding: 6px 10px 17px 10px!important;
}
.view-more-pro {
color: #126504;
font-weight: 600;
font-size: 14px;
text-decoration: underline;
cursor: pointer;
margin-bottom: 23px;
}
.description {
font-size: 16px;
color: #000;
font-weight: 400;
width: 85%;
line-height: 24px;
}
.review-box {float: left;width: 100%;padding: 58px 0px 6px 0px;display: flex;gap: 30px;}
.review-header {display:flex;align-items: flex-start;/* gap: 30px; */}
.rating-badge {background: #008000;color:#fff;padding: 10px 18px;border-radius:4px;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 15px;font-weight: 500;gap: 4px;}
.stars {color: #ffb721;/* margin-left:auto; *//* width: 27px; *//* float: left; */font-size: 25px;line-height: 0px;}
.review-text {margin: 7px 0;color: #353434;font-size: 16px;font-weight: 400;width: 87%;line-height: 28px;}
.review-images {display:flex;gap: 16px;flex-wrap:wrap;margin: 18px 0;}
.review-images img {width: 109px;height: 110px;object-fit:cover;border-radius:6px;}
.view-more-reviews {background:none;border:none;color: #000;cursor:pointer;font-weight:600;font-size: 15px;}
.review-footer {font-size:14px;color:#555;padding-top: 11px;}
.certified {color: #1d6800;padding-top: 5px;float: left;font-size: 14px;font-weight: 500;display: flex;align-items: center;gap: 5px;}
.extra-images { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.review-btn {
background: #ac090f;
border: none !important;
font-size: 15px !important;
font-weight: 500;
width: 140px;
height: 44px;
justify-content: center;
flex: unset;
}
.review-btn:hover {
background: #00a14b;
}
.review-1 {
float: left;
width: 100%;
display: flex
;
align-items: center;
gap: 92px;
}
.overall-rating {
float: left;
width: 100%;
display: flex
;
gap: 15px;
padding-top: 13px;
align-items: center;
}
.rating-value {
display: flex
;
float: left;
background-color: green;
padding: 4px 19px;
border-radius: 50px;
color: #fff;
font-size: 17px;
font-weight: 500;
justify-content: center;
align-items: center;
gap: 8px;
}
.review-count{
color: #356700;
font-size: 15px;
font-weight: 500;
}
.rating-star {
width: 17px;
}
.rating-count {
font-size: 15px;
font-weight: 500;
color: #356700;
}
.ratings-reviews{
float: left;
width: 100%;
padding: 60px 0px;
}
.review-title h3{font-size: 19px;font-weight: bold;color: #000;margin: 0;}
.rating-badge-img{
width: 14px;
}
.rating-badge{
/* display: inline-flex; */
}
.review-title{
display: flex
;
align-items: center;
gap: 69px;
}
.reviewer-name{
color: #033c76;
font-size: 16px;
font-weight: 600;
}
.review-date{
font-size: 15px;
font-weight: 500;
color: #959595;
}
.check-review{
width: 20px;
/* margin-right: 2px; */
}
.view-all-reviews{
font-size: 15px;
text-decoration: underline;
font-weight: 600;
color: #00289b;
border: none;
background-color: #fff;
cursor: pointer;
float: left;
padding-left: 7%;
padding-top: 29px;
text-transform: uppercase;
}
/* --- Tab Navigation Styling (Updated to match the image) --- */
.product-selection-section {
width: 100%;
/* margin: 20px 0; */
float: left;
padding-bottom: 48px;
}
.tabs-container {
display: flex;
gap: 10px;
padding: 10px 0;
margin-bottom: 20px;
overflow-x: auto;
}
.tabs-container-pd {
display: flex;
gap: 10px;
padding: 10px 0;
margin-bottom: 20px;
overflow-x: auto;
white-space: nowrap;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Scrollbar hiding for Chrome, Safari, Opera */
.tabs-container-pd::-webkit-scrollbar {
display: none;
}
.tab-button-pd {
padding: 8px 34px;
border: 1px solid transparent;
background-color: transparent;
color: #1c2617;
font-weight: 600;
font-size: 17px;
cursor: pointer;
border-radius: 50px;
transition: background-color 0.3s, border-color 0.3s;
white-space: nowrap;
flex-shrink: 0;
}
.tab-button-pd.active {
background: linear-gradient(90deg,rgba(70, 69, 70, 1) 0%, rgba(42, 39, 40, 1) 100%) !important;
/* border-color: #e6f3d8; */
color: #fff;
font-weight: 600;
}/* Base visibility logic */
.tab-content-pd {
display: none;
}
.tab-content-pd.active {
display: block;
}
.slick-slider img{
float: left;
width: 100%;
border: 2px solid #fff;
border-radius: 20px;
}
.slick-slider img:hover{
border: 2px solid #ccc;
}
.tabs-container-pd{
background-color: #f7fce8;
padding: 24px 19px;
border-radius: 16px;
margin-bottom: 35px;
}
.cart-page-wrapper {
display: flex;
float: left;
width: 100%;
gap: 20px;
padding: 35px 0px;
}
.cart-list-section {
flex: 2; /* Takes up about 66% of the space (Left Cart) */
/* background-color: #fff; */
/* padding: 15px; */
border-radius: 4px;
float: left;
width: 100%;
}
.cart-summary-section {
flex: 1; /* Takes up about 33% of the space (Right Cart) */
}
/* --- Cart Item Styling --- */
.cart-item {
display: flex;
background-color: #f8f8f8;
padding: 25px 21px 37px 21px;
border-radius: 9px 9px 0px 0px;
/* border-bottom: 1px solid #ccc; */
gap: 26px;
}
.cart-item__media {
display: flex;
/* gap: 20px; */
}
.cart-item__image {
width: 121px; /* Placeholder image size */
height: 125px;
object-fit: cover;
border-radius: 10px;
}
.cart-item__details {
flex-grow: 1;
}
.cart-item__title {
font-size: 19px;
font-weight: 600;
margin: 0 0 11px 0;
line-height: 25px;
}
.cart-item__metadata {
font-size: 14px;
color: #5a5a5c;
margin: 0 0 10px 0;
font-weight: 600;
}
/* --- Price and Discount --- */
.cart-item__price-info {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 12px;
}
.price__current {
font-size: 21px;
font-weight: bold;
color: #333;
/* margin-right: 10px; */
}
.price__original {
text-decoration: line-through;
color: #6b6767;
font-size: 16px;
/* margin-right: 10px; */
font-weight: 500;
}
.price__discount {
color: #28a745; /* Green color for discount */
font-weight: bold;
font-size: 17px;
}
/* --- Delivery Info --- */
.cart-item__delivery {
display: inline-flex;
align-items: center;
margin-top: 10px;
background: linear-gradient(90deg,rgba(255, 239, 240, 1) 0%, rgba(250, 244, 245, 1) 100%);
padding: 11px 11px;
/* width: 100%; */
border-radius: 4px;
gap: 16px;
}
.delivery__date {
font-size: 15px;
font-weight: 500;
color: #000;
/* margin-right: 10px; */
}
.delivery__free-badge {
background-color: #348607;
color: #fff;
padding: 4px 13px;
font-size: 14px;
font-weight: 400;
border-radius: 50px;
}
/* --- Item Actions --- */
.cart-item__actions-bar {
display: flex;
/* padding: 20px 23px; */
border-top: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
align-items: center;
}
.action-btn {
text-align: left;
background: none;
border: none;
color: #000;
font-size: 15px;
font-weight: 500;
padding: 20px 22px;
cursor: pointer;
text-transform: uppercase;
transition: color 0.2s;
border-right: 1px solid #e9e9e9;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.action-btn:hover {
color: #000;
}
.action-btn--primary {
color: #28a745;
}
.action-btn--saved {
color: #888;
}
.full-cart{
padding-bottom: 40px;
}
.cart-item__actions-bar img{
width: 19px;
/* margin-right: 3px; */
}
/* --- Separator --- */
.cart-separator {
border: 0;
height: 1px;
background-color: #eee;
margin: 10px 0;
}
/* --- Summary Card General Styling --- */
.summary-card {
background-color: #fff;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* --- Coupon Box Styling --- */
.coupon-box__header {
font-size: 16px;
font-weight: bold;
margin-top: 0;
margin-bottom: 15px;
}
.coupon-box__input-group {
display: flex;
margin-bottom: 10px;
}
.coupon-box__input {
flex-grow: 1;
padding: 10px;
border: 1px solid #ddd;
font-size: 14px;
border-radius: 4px 0 0 4px;
}
.coupon-box__apply-btn {
background-color: #333;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
border-radius: 0 4px 4px 0;
}
.coupon-box__view-all {
text-align: right;
font-size: 12px;
color: #3f51b5; /* Example link color */
cursor: pointer;
margin-bottom: 5px;
}
.cart-item__selector {
background: none;
border: none;
color: #000;
font-size: 15px;
font-weight: 500;
padding: 20px 22px;
cursor: pointer;
text-transform: uppercase;
transition: color 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0;
}
.cart-item__selector input[type="checkbox"] {
width: 23px;
height: 22px;
border-radius: 20px;
cursor: pointer;
accent-color: #348607;
}
/*checkout-part2*/
.apply-discount {
float: left;
width: 100%;
border-radius: 20px;
padding-bottom: 15px;
background-color: white;
}
.apply-discount h3{
float: left;
text-align: center;
font-size: 20px;
width: 100%;
background: #064c67;
margin-bottom: 0px;
padding: 12px 0px;
border-radius: 10px 10px 0px 0px;
color: #fff;
font-weight: 500;
}
.apply-discount form {
float: left;
width: 100%;
padding: 15px 20px;
background: #f3fcff;
border-radius: 10px;
}
.discount-label{
float: left;
width: 100%;
font-size: 15px;
color: #000000;
font-weight: 500;
padding-top: 11px;
margin-bottom: 9px;
}
.field-etc{
height: 47px;
border-radius: 10px;
border: none;
padding: 10px 14px;
font-size: 14px;
margin-bottom: 12px;
width: 100%;
}
.apply-code {
float: left;
border-radius: 8px;
text-align: center;
background-color: #48524c;
color: #fff;
font-weight: 600;
font-size: 14px;
margin-top: 0px;
width: 100%;
padding: 13px 36px;
margin-bottom: 4px;
border: none;
/* padding-left: 25px; */
text-transform: uppercase;
/* padding-right: 25px; */
cursor: pointer;
}
.view-coupons {
padding-bottom: 7px;
float: left;
width: 100%;
color: #000;
font-weight: 600;
font-size: 16px;
padding-top: 14px;
/* letter-spacing: 1px; */
/* text-decoration: underline; */
gap: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row-reverse;
}
.coupon-img{
float: right;
width: 37px;
/* margin-right: 15px; */
object-fit: cover;
position: relative;
/* top: -6px; */
}
.view-coupons:hover{
color: #000;
text-decoration: underline;
}
.clp-card {
float: left;
width: 100%;
padding: 0px !important;
}
.coupon-apply img {
float: right;
width: 25px;
margin-top: 10px;
}
.coupon-apply {
float: left;
width: 100%;
padding: 15px;
border-bottom: solid 1px rgb(0 0 0 / 26%);
padding-top: 20px;
padding-bottom: 20px;
}
.coupon-apply h2 {
float: left;
width: 100%;
font-weight: 600;
font-size: 16px;
color: black;
}
.coupon-apply p {
float: left;
width: 100%;
font-weight: 500;
font-size: 13px;
}
.apply-btn {
float: left;
cursor: pointer;
border-radius: 10px;
background-color: #48524c;
text-align: center;
color: white;
font-size: 14px;
width: 100%;
height: 42px;
border: none;
transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
}
.price-box {
width: 100%;
background: #fff;
border-radius: 8px;
margin-top: 20px;
overflow: hidden;
float: left;
margin-bottom: 17px;
}
.price-header {
background: #064c67;
color: #fff;
font-weight: 500;
padding: 9px 0px;
text-align: center;
font-size: 20px;
}
.price-body {
padding: 26px 22px;
font-size: 14px;
float: left;
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
background-color: #f3fcff;
}
.price-1{
float: left;
width: 100%;
font-size: 15px;
font-weight: 500;
color: #000;
line-height: 20px;
display: flex;
justify-content: space-between;
/* gap: 20px; */
}
.row-price {
display: flex;
justify-content: space-between;
margin: 8px 0;
}
.price-discount {
color: #0073e6;
font-weight: bold;
}
.free-delivery {
color: #0c338e;
text-align: right;
}
.total-box {
font-weight: 700;
background: #fff;
padding: 12px;
border-radius: 6px;
margin-top: 10px;
font-size: 20px;
line-height: 23px;
}
.total-box b {
font-size: 20px;
display: block;
margin-top: 4px;
}
.save-text {
color: green;
text-align: center;
margin: 8px 0;
font-weight: bold;
}
.secure-box {
background: #f1fbe7;
border-radius: 6px;
padding: 10px;
font-size: 13px;
margin: 10px 0;
display: flex;
align-items: center;
gap: 8px;
}
.secure-box::before {
content: "✔";
color: green;
font-weight: bold;
}
/*checkout*/
/*checkoutpag*/
.check-main {
float: left;
width: 100%;
padding: 32px 0px;
/* background-color: #f7f7f7; */
}
.billing-bg {
float: left;
width: 100%;
/* background-color: white; */
}
.billing-bg .panel-default {
float: left;
width: 100%;
background-color: white;
margin-bottom: 60px;
}
.panel-default>.panel-heading {
color: #333;
background-color: #fff;
border-color: #fff;
padding: 0;
float: left;
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.billing-bg .panel-title {
margin-bottom: 0px !important;
}
.panel-default>.panel-heading a[aria-expanded="true"] {
}
.panel-default>.panel-heading a {
display: block;
padding: 20px 23px;
text-align: left;
font-size: 20px !important;
font-weight: 500;
float: left;
border-radius: 7px;
background-color: #f8f8f8;
width: 100%;
color: #000;
/* position: relative; */
top: -24px;
}
.collapse.in {
display: block !important;
}
.billing-bg .panel-body {
float: left;
width: 100%;
background-color: white;
border-top: none;
padding-top: 38px;
}
.saved-bg {
float: left;
width: 100%;
/* background-color: #a665e22b; */
padding-right: 28px;
padding-left: 28px;
padding-top: 34px;
padding-bottom: 13px;
border-radius: 10px 10px 0px 0px;
/* margin-bottom: 25px; */
position: relative;
border: 1px solid #e5e5e5;
}
.saved-bg h2 {
float: left;
width: 100%;
font-size: 21px;
color: #000000;
font-weight: bold;
}
.saved-bg .container1 {
position: absolute;
right: 61px;
top: 26px;
}
.saved-bg input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
right: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
height: 35px;
width: 35px;
border-radius: 50px;
background: #feecec;
}
.saved-bg p {
float: left;
width: 100%;
font-size: 16px;
font-weight: 400;
color: #000000;
line-height: 28px;
padding-top: 6px;
margin-bottom: 5px;
}
.saved-bg .checkmark:after {
left: 13px;
top: 5px;
width: 11px;
height: 20px;
border: solid #ffffff;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.saved-bg input:checked ~ .checkmark:after {
display: block;
}
.saved-bg input:checked ~ .checkmark {
background: #59a446; /* green */
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.mail-save {
float: left;
width: 100%;
font-size: 15px;
font-weight: 400;
color: #000000;
padding-bottom: 8px;
}
.mail-save span {
color: #1f6f0b;
font-weight: 500;
padding-right: 3px;
}
.del-ed {
float: right;
width: 100%;
bottom: 24px;
/* margin-bottom: 8px; */
float: left;
width: 100%;
border-top: none !important;
border: 1px solid #e5e5e5;
border-radius: 0px 0px 10px 10px;
display: flex;
}
.del-img{
width: 30px;
float: none;
object-fit: cover;
}
.del-a,.edit-a span{
font-size: 16px;
font-weight: 600;
color: #000;
}
.del-a{
border-right: 1px solid #e5e5e5;
float: left;
text-align: center;
padding: 15px 38px 15px 29px;
/* background-color: #2762cd2b; */
border-radius: 0px;
display: flex;
align-items: center;
gap: 10px;
}
.edit-a{
float: left;
text-align: center;
padding: 15px 38px 15px 42px;
/* background-color: #2762cd2b; */
border-radius: 0px;
display: flex;
align-items: center;
gap: 10px;
}
.edit-img{
width: 32px;
float: none;
object-fit: cover;
}
.new-address {
display: block;
padding: 16px 23px;
text-align: left;
font-size: 20px !important;
font-weight: 500;
float: left;
border-radius: 7px;
background-color: #f8f8f8;
width: 100%;
color: #000;
margin-top: 48px;
}
.card-clp {
float: left !important;
width: 100% !important;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.card-shipping {
float: left !important;
width: 100% !important;
border: none !important;
padding: 0px !important;
}
.shipping-form {
float: left;
width: 100%;
/* border-top: solid 5px #ecfbe8; */
/* padding-top: 20px; */
/* margin-top: 10px; */
padding-bottom: 30px;
}
.enter-shipping {
float: left;
font-weight: 600;
font-size: 18px;
text-align: center;
font-size: 19px !important;
font-weight: 600;
border-radius: 30px;
color: #212121;
}
.radio-h1{
/* margin-right: 41px; */
color: #000;
font-size: 15px;
font-weight: 600;
float: left;
}
.radio-p{
float: left;
}
.space{
float: left;
margin-top: 30px;
padding-bottom: 12px;
display: flex;
gap: 24px;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 25px;
}
.space [type="radio"]:checked,
.space [type="radio"]:not(:checked) {
position: absolute;
display: none;
}
.space [type="radio"]:checked + label,
.space [type="radio"]:not(:checked) + label
{
position: relative;
padding-left: 37px;
margin-right: 20px;
cursor: pointer;
line-height: 20px;
font-weight: 500;
top: 0px;
font-size: 15px;
display: inline-block;
color: #000;
margin-bottom: 0px;
}
.space [type="radio"]:checked + label:before,
.space [type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: -4px;
width: 30px;
height: 30px;
border: 1px solid #c0c0c0;
border-radius: 100%;
background: #fff;
}
.space [type="radio"]:checked + label:after,
.space [type="radio"]:not(:checked) + label:after {
content: '';
width: 14px;
height: 14px;
background: #59a446;
position: absolute;
top: 4px;
left: 8px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.space [type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.space [type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.shipping-form form {
float: left;
width: 100%;
/* margin-top: 15px; */
}
.titel-address {
float: left;
width: 100%;
font-size: 15px;
color: #000000;
font-weight: 500;
/* padding-top: 7px; */
}
.field-type {
float: left;
width: 100%;
height: 54px;
border-radius: 10px;
border: solid 1px #dcdcdc;
color: black;
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
outline: none;
margin-top: 12px;
margin-bottom: 39px;
font-weight: 400;
}
.field-type-cart {
float: left;
width: 100%;
height: 48px;
border-radius: 10px;
border: none;
color: black;
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
outline: none;
margin-top: 0px;
margin-bottom: 15px;
font-weight: 400;
}
.field-type-address {
float: left;
width: 100%;
height: 50px;
border-radius: 8px;
border: solid 1px #cccccc;
color: black;
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
outline: none;
margin-top: 12px;
margin-bottom: 33px;
height: 157px;
padding: 15px;
}
.check-btn {
text-transform: uppercase;
flex: 1;
display: inline-flex;
align-items: center;
justify-content: space-between;
margin-right: 15px;
padding: 13px 63px;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
color: #fff;
position: relative;
overflow: hidden;
z-index: 1;
transition: background 0.3s ease;
white-space: nowrap;
}
/* Shine effect */
.check-btn::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.4);
transform: skewX(-25deg);
transition: left 0.5s ease;
}
/* Hover effect */
.check-btn:hover::after {
left: 130%;
}
/* Add to Cart */
.frm-save {
background: linear-gradient(90deg,rgba(0, 161, 75, 1) 0%, rgba(7, 131, 64, 1) 100%);
}
.frm-cancel {
background: linear-gradient(90deg,rgba(70, 69, 70, 1) 0%, rgba(42, 39, 40, 1) 100%);
}
.two-saved{
display: flex;
gap: 9px;
}
.check-1{
float: left;
width: 70%;
padding-right: 18px;
}
.check-2{
float: right;
width: 28%;
}
/*checkout-part2*/
.order-box {float: left;margin: auto;width: 100%;}
/* ORDER SUMMARY */
.order-summary {
background: #f4fbff;
border-radius: 12px;
overflow: hidden;
margin-bottom: 30px;
/* border: 1px solid #e5e5e5; */
}
.order-header {
background: #064c67;
color: #fff;
font-size: 20px;
font-weight: 700;
padding: 8px 15px;
text-align: center;
border-radius: 7px 7px 0 0;
MARGIN-BOTTOM: 8PX;
}
.order-item {
display: flex;
align-items: flex-start;
padding: 16px 17px;
/* border-bottom: 1px solid #e5e5e5; */
}
.order-item img {
width: 58px;
height: 60px;
border-radius: 6px;
margin-right: 12px;
object-fit: cover;
}
.order-text {
flex: 1;
}
.order-text p {
font-size: 14px;
margin: 0;
font-weight: 500;
color: #000;
line-height: 18px;
}
.price {
display: block;
color: #072f8c;
font-weight: bold;
margin-top: 4px;
font-size: 14px;
}
/* TOTAL SECTION */
.order-total {
padding: 12px 15px;
background: #fff;
display: flex;
justify-content: space-between;
border-radius: 10px 10px 0px 0px;
align-items: center;
}
.order-total p {
margin: 0px 0;
font-size: 17px;
font-weight: 600;
}
.order-total .total {
font-size: 20px;
font-weight: bold;
}
.order-total .save {
color: #065c06;
font-size: 13px;
font-weight: 600;
text-align: right;
}
.order-total .save span {
font-weight: bold;
}
/* LOYALTY BOX */
.loyalty-box {
background: #fff;
/* border: 1px solid #e5e5e5; */
border-radius: 12px;
overflow: hidden;
}
.loyalty-header {
background: #443d3d;
color: #fff;
font-size: 20px;
font-weight: 600;
padding: 9px 15px;
border-radius: 12px 12px 0 0;
display: flex;
align-items: center;
gap: 12px;
justify-content: center;
}
.loyalty-content {
padding: 18px 19px;
background-color: #f4fbff;
}
.available {
font-size: 17px;
margin: 0;
color: #000;
font-weight: 500;
}
.points {
font-size: 18px;
color: #0f08a0;
font-weight: 700;
margin: 4px 0 10px;
}
/* Custom Radio */
.loyalty-option {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 13px;
font-weight: 400;
color: #000;
position: relative;
cursor: pointer;
}
.loyalty-option input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.ex-tot{
padding: 0px 20px;
MARGIN-TOP: 3px;
}
.coin{
width: 30px;
}
.custom-radio {
padding-bottom: 13px;
margin-top: 15px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: #000;
cursor: pointer;
position: relative;
user-select: none;
}
/* hide default input */
.custom-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* outer circle */
.radio-mark {
height: 22px;
width: 22px;
border: 1px solid #ccc;
border-radius: 50%;
position: relative;
margin-top: 2px;
transition: all 0.3s ease;
}
/* inner circle */
.radio-mark:after {
content: "";
position: absolute;
top: 5.5px;
left: 5.5px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #1f6f0b;
display: none;
}
/* checked state */
.custom-radio input:checked ~ .radio-mark {
border-color: #1f6f0b;
}
.custom-radio input:checked ~ .radio-mark:after {
display: block;
}
/* text wrapper */
.radio-text {
display: flex;
flex-direction: column;
line-height: 18px;
}
.use-text {
font-size: 14px;
color: #000;
font-weight: 400;
}
.green {
color: #057339;
font-weight: 500;
font-size: 15px;
margin-top: 3px;
}
.pay-option {
background: #fff;
border-radius: 12px;
overflow: hidden;
/* border: 1px solid #eee; */
/* font-family: Arial, sans-serif; */
margin-top: 30px;
float: left;
width: 100%;
/* display: flex; */
/* flex-direction: column; */
/* gap: 30px; */
}
/* Header */
.pay-header {
background: #8f0859;
color: #fff;
font-size: 20px;
font-weight: 600;
padding: 9px 15px;
text-align: center;
}
/* Content */
.pay-content {
padding: 30px 18px;
background: #f4fbff;
display: flex;
border-radius: 0 0 10px 10px;
flex-direction: column;
gap: 24px;
}
/* Custom radio */
.pay-radio {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: 500;
cursor: pointer;
position: relative;
user-select: none;
}
.pay-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.pay-mark {
height: 30px;
width: 30px;
border: 1px solid #ccc;
border-radius: 50%;
position: relative;
transition: all 0.3s ease;
}
.pay-mark:after {
content: "";
position: absolute;
top: 7.5px;
left: 7.5px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #59a446;
display: none;
}
.pay-radio input:checked ~ .pay-mark {
border-color: #59a446;
}
.pay-radio input:checked ~ .pay-mark:after {
display: block;
}
.pay-text {
color: #000;
font-size: 15px;
font-weight: 500;
}
/* Logos */
.pay-logos {
display: flex;
align-items: center;
gap: 14px;
/* margin-top: 10px; */
/* float: left; */
/* width: 100%; */
}
.pay-logos img {
width: 68px;
object-fit: contain;
}
/* Safe note */
.pay-safe {
display: flex;
align-items: center;
gap: 8px;
background: #f7fce8;
border-radius: 10px;
padding: 12px;
/* margin: 15px; */
font-size: 13px;
color: #333;
font-weight: 500;
margin: 21px 0px;
}
.pay-safe-icon {
width: 30px;
color: #1f6f0b;
margin-top: 2px;
}
.pay-safe-text {
line-height: 18px;
font-size: 13px;
}
/* Button */
.pay-butn {
width: 100%;
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 0px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
color: #fff;
position: relative;
overflow: hidden;
border: none;
z-index: 1;
transition: background 0.3s ease;
white-space: nowrap;
}
/* Shine effect */
.pay-butn::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.4);
transform: skewX(-25deg);
transition: left 0.5s ease;
}
/* Hover effect */
.pay-butn:hover::after {
left: 130%;
}
.pay-btn {
background: linear-gradient(90deg,rgba(0, 161, 75, 1) 0%, rgba(7, 131, 64, 1) 100%);
}
.ptice-tot{
font-weight: 600;
}
.discount{
color: #0c338e;
}
/*success*/
.success{
float: left;
width: 100%;
background-color: #f7fcea;
padding: 60px 0px;
display: flex;
align-items: center;
flex-direction: column;
gap: 30px;
justify-content: center;
}
.success-check{
width: 95px;
}
.success h1{
font-size: 35px;
font-weight: 600;
margin: 0;
color: #000;
text-transform: uppercase;
}
.success-qty{
color: #ed1c24;
font-size: 18px;
font-weight: 500;
}
.success-1{
display: flex;
flex-direction: column;
justify-content: center;
float: left;
width: 100%;
align-items: center;
gap: 30px;
}
.success-a{
font-size: 20px;
font-weight: 500;
color: #45700e;
text-transform: uppercase;
}
.success-h3{
width: 80%;
}
.success-cart {
display: none; /* hidden by default */
}
.success-a {
cursor: pointer;
}
.success-a .toggle-icon {
width: 26px;
margin-left: 19px;
margin-top: -2px; transition: transform 0.3s ease;
}
/* Rotate arrow when active */
.success-a.active .toggle-icon {
transform: rotate(180deg);
}
.wishlist-page{
float: left;
width: 100%;
padding: 60px 0px;
}
.wish-box{
width: 84%;
margin-bottom: 30px;
}
.phone-prefix-add{
height: 49px !important;
top: 16%;
}
.phone-prefix-addnew{
height: 49px !important;
top: 21%;
}
.phone-prefix {
position: absolute;
/* top: 31%; */
left: 13px;
/* transform: translateY(-50%); */
display: flex;
align-items: center;
font-size: 13px;
color: #757587;
z-index: 1;
pointer-events: none;
border-right: solid 1px rgb(0 0 0 / 15%);
padding-right: 13px;
height: 55px;
}
.phone-prefix span.flag {
margin-right: 5px;
}
.phone-prefix img {
height: 16px;
width: auto;
margin-right: 5px;
}
.flg90 {
padding-left: 100px !important;
}
/*contactus*/
.contact-full{
width: 100%;
float: left;
padding: 40px 0;
}
.quick_enq {
font-size: 20px;
color: #000000;
font-weight: 600;
text-transform: capitalize;
padding-bottom: 30px;
}
.location_bg {
float: left;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 20px;
margin-bottom: 25px;
}
.contact_icons {
color: #1b1a1a;
padding-right: 6px;
}
.location_bg h4 {
width: 50%;
float: left;
position: relative;
font-size: 15px;
line-height: 35px;
font-weight: 500;
margin: 0px 0px 5px;
padding: 0;
text-align: left;
color: #00a14b;
text-transform: uppercase;
}
.contact2{
float: left;
width: 100%;
height: auto;
}
.contact2 h1 {
font-size: 20px;
color: #000000;
font-weight: 600;
text-transform: capitalize;
}
.contactform{
margin-top: 35px;
width: 100%;
float: left;
}
.contact-label {
float: left;
width: 100%;
text-align: left;
font-size: 15px;
color: #343a40;
font-weight: 500;
}
.mct_form {
border-bottom: 1px solid #b0aaaa;
color: #000000;
display: block;
font-weight: 400;
font-size: 15px;
/* text-transform: uppercase; */
height: 43px;
margin-bottom: 15px !important;
padding: 0 20px;
outline: none;
background: #ffffff;
width: 100%;
padding-left: 0px;
border: none;
transition: all 500ms ease;
border: solid 1px rgba(46, 67, 110, 0.22);
margin-top: 3px;
width: 100%;
float: left;
padding: 8px 10px;
margin-top: 10px;
border-radius: 5px;
}
.info-tag {
float: left;
font-size: 14px;
color: rgba(0, 0, 0, 0.93);
text-align: left;
/* margin-top: 15px; */
line-height: 28px;
margin-top: 15px;
}
.submit_cont::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.4);
transform: skewX(-25deg);
transition: left 0.5s ease;
}
/* Hover effect */
.submit_cont:hover::after {
left: 130%;
}
.submit_cont {
position: relative;
width: 200px;
background: #00a14b;
border: 0;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-radius: 8px;
color: #fff;
transition: background 0.3s ease;
overflow: hidden; /* required for shine effect */
z-index: 1;
}
.submit_cont:hover {
background: #ed1c24; /* red hover color */
}
.contact-full p{text-align: justify;font-size: 15px;color: #343a40;font-weight: 500;line-height: 28px;margin-bottom: 10px;}
@media(max-width:767px)
{
.contact-full p {
text-align: right;
}
.contactform {
margin-top: 15px;
}
}
@media(min-width:767px) and (max-width:991px)
{
.location_bg h4 {
width: 56%;
float: left;
position: relative;
font-size: 13px;
}
}
.check-prefix {
top: 28% !important;
left: 35px !important;
height: 52px !important;
}
/* modal-review - Retained original modal header classes as they seem shared */
.attach-label {
font-size: 18px;
font-weight: 600;
}
.attach-label span {
/* color: #7f1431; */
}
.attach-close {
padding: 0px !important;
border-top-left-radius: 20px;
height: 59px;
width: 40px;
right: 19px;
color: #000;
}
/* Unique Review Modal Content Classes */
.myreview-name-md {
float: left;
width: 100%;
font-size: 16px;
font-weight: 700;
color: black;
}
.myreview-desc {
float: left;
width: 100%;
color: black;
font-size: 14px;
font-weight: 400;
padding-top: 5px;
padding-bottom: 20px;
}
.myreview-frm {
float: left;
width: 100%;
}
.myreview-log-set {
width: 100%;
float: left;
position: relative;
padding: 0 0 17px;
}
.myreview-tt-b2b {
float: left;
width: 100%;
font-size: 14px;
color: black;
font-weight: 600;
padding-bottom: 16px;
}
/* Input Fields Styling */
.myreview-log-form .myreview-log-set input[type="text"],
.myreview-log-form .myreview-log-set input[type="password"],
.myreview-log-form .myreview-log-set input[type="mail"],
.myreview-log-form .myreview-log-set input[type="email"],
.myreview-log-form .myreview-log-set input[type="tel"],
.myreview-log-form .myreview-log-set select,
.myreview-log-form .myreview-log-set textarea,
.myreview-log-form .myreview-log-set .myreview-file-input {
width: 100%;
float: left;
position: relative;
height: 55px !important;
border: solid 1px rgba(0, 0, 0, 0.15) !important;
padding: 10px 0px 22px;
font-size: 13px;
line-height: 25px;
color: #000;
font-weight: 400;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
outline: none;
border-top: 0;
border-left: 0;
border-right: 0;
border-radius: 15px;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 15px;
padding-right: 15px;
}
/* Specific styling for the new file input */
.myreview-log-form .myreview-log-set .myreview-file-input {
height: auto !important;
line-height: normal;
padding-top: 10px;
padding-bottom: 10px;
border: solid 1px rgba(0, 0, 0, 0.15) !important;
border-radius: 15px;
background-color: #f9f9f9;
/* Reset borders removed by the generic style above */
border-top: solid 1px rgba(0, 0, 0, 0.15) !important;
border-left: solid 1px rgba(0, 0, 0, 0.15) !important;
border-right: solid 1px rgba(0, 0, 0, 0.15) !important;
}
/* Rating and Submit Button Styling */
.myreview-frm-str {
float: left;
width: 50%;
}
.myreview-str-none {
padding-bottom: 5px !important;
}
.myreview-rating-one {
float: left;
}
.myreview-submit-star {
float: right;
border-radius: 12px;
text-align: center;
color: white;
font-size: 16px;
font-weight: 500;
background-color: #00a14b;
border: none;
padding: 11px;
padding-left: 40px;
padding-right: 40px;
cursor: pointer;
transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
margin-right: 0px;
}
.myreview-rating-one .fa {
color: black;
cursor: pointer;
font-size: 20px;
margin-right: 2px;
}
.myreview-rating-one .selected {
color: gold !important;
}
.action-btn--save-toggle.is-saved .save-icon {
/* Assuming you have a different image for the "saved" state */
content: url('images/innerpage/saved.png');
}
/* Optional: Change the text color when saved */
.action-btn--save-toggle.is-saved span {
color: #888;
}
.com-table .t-img{
border: none !important;
}
.custom-select {
font-size: 13px !important;
}
@media (max-width: 575px) {
/* 1. CONTAINER: This is the element that gets the scrollbar. */
.table-container {
overflow-x: auto; /* CRITICAL: Enables horizontal scrolling */
-webkit-overflow-scrolling: touch !important;
width: 100%;
position: relative !important;
}
/* 2. TABLE: This element must be wider than 300px to force the scroll. */
.table-container .scroll-table {
min-width: 575px; /* CRITICAL: A width larger than the screen (300px) */
width: 100%; /* Ensures min-width is respected by overriding the inline width */
}
}
@media(max-width:575px)
{
.mobile-main{
display: block !important;
}
.desktop-main{
display: none !important;
}
}
@media(min-width:575px)
{
.mobile-main{
display: none !important;
}
.desktop-main{
display: block !important;
}
}
@media (max-width: 990px) {
#mainImg.zoomed {
transform: scale(1) !important;
cursor: default;
}
#zoomOverlay {
display: none !important;
}
}
.brand-product:hover{
cursor: pointer;
}
@media(min-width:1300px) and (max-width:1400px)
{
.com-table {
padding-left: 450px;
}
}
@media(min-width:1200px) and (max-width:1300px)
{
.com-table {
padding-left: 350px;
}
}
@media(min-width:1025px) and (max-width:1200px)
{
.com-table {
padding-left: 250px !important;
}
}
@media(min-width:990px) and (max-width:1024px)
{
.com-table {
padding-left: 200px !important;
}
}
@media(min-width:332px) and (max-width:379px){
.gender-tab{padding: 9px 45px;}
}
@media(min-width:230px) and (max-width:331px){
.gender-tab{padding: 9px 30px;}
}
/*aboutus*/
.aboutus{
float: left;
width: 100%;
/* padding: 22px 0px; */
padding: 51px 0px;
}
.ab-img {
margin-bottom: 20px;
float: right;
object-fit: cover;
max-width: 100%;
margin-left: 36px;
margin-top: 44px;
margin-right: 50px;
width: 323px;
}
.aboutus h3{
line-height: 40px;
font-size: 40px;
color: #000;
font-weight: 600;
margin-bottom: 30px;
text-align: left;
}
.aboutus h3 span{
/* color:#7f1431 ; */
}
.aboutus p{
font-size: 16px;
font-weight: 400;
line-height: 28px;
color: #000;
text-align: justify;
}
.vision-box{
width: 100%;
float: left;
margin-bottom: 30px;
margin-top: 30px;
border: 1px solid #ededed;
border-radius: 20px;
padding: 33px 32px;
}
.vision-box h2{color: #000;font-size: 30px;font-weight: 600;}
.vision-box p{
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #000;
text-align: justify;
}
.abt-3{
width: 100%;
float: left;
padding: 64px 0px;
background-color: #f5f5f5;
margin-bottom: 73px;
}
.abt-3 h6{display: none;margin-bottom: 15px;text-align: center;float: left;width: 100%;font-size: 20px;color: #000;font-weight: 400;}
.abt-3 h2{text-align: center;font-size: 34px;color: green;font-weight: 600;float: left;margin-bottom: 25px;width: 100%;text-transform: capitalize;}
.abt-3 h2 span{
/* font-weight: 600; */
float: left;
width: 100%;
}
.abt3-box{width: 100%;float: left;/* text-align: center; */margin-top: 30px;background-color: #fff;border-radius: 16px;padding: 35px 35px;}
.abt3-box h5{width: 100%;font-size: 25px;color: #000;font-weight: 600;margin-top: 20px;float: left;}
.abt3-box p{
width: 100%;
font-size: 16px;
color: #000;
font-weight: 400;
float: left;
line-height: 28px;
/* text-align: center; */
margin-bottom: 0px;
}
.abt-3 img{
width: 56px;
object-fit: cover;
float: left;
display: block;
margin: auto;
}
@media(min-width:767px) and (max-width:990px)
{
.abt3-box {
padding: 35px 23px;
}
}
@media(max-width:767px)
{
.ab-img {
float: left;
margin-left: auto;
margin-top: 0px; margin-right: auto;
width: 323px;
}
.aboutus h3 {
width: 100%;
float: left;
padding-top: 20px;
}
.aboutus p {
width: 100%;
float: left;
}
.abt-3 h2 span {
/* font-weight: 600; */
float: none;
width: unset;
}
.vision-box {
padding: 35px 23px;
}
.abt3-box {
padding: 35px 23px;
}
.vision-box p{
margin-bottom: 0;
}
.p-r {
padding: 0px 10px;
}
}
@media(max-width:400px)
{
.gender-tab {
color: #000;
font-weight: 400;
font-size: 19px;
padding: 5px 39px;
}
}