/* Start custom CSS for html, class: .elementor-element-29084f2 *//* =========================================================
DISHIVA PRODUCT PAGE
AUTOMATIC SHOE COVER DISPENSER REFILL
SAME DISHIVA DESIGN SYSTEM
========================================================= */
.dishiva-product-page {
--dishiva-navy: #464B71;
--dishiva-blue: #118AB2;
--dishiva-mint: #7CD5C7;
--dishiva-light: #F2F2ED;
--dishiva-white: #ffffff;
--dishiva-dark: #20243a;
--dishiva-border: rgba(70, 75, 113, 0.13);
font-family:
"Inter",
"Segoe UI",
Arial,
sans-serif;
color: var(--dishiva-dark);
background: var(--dishiva-white);
line-height: 1.7;
width: 100%;
box-sizing: border-box;
}
.dishiva-product-page *,
.dishiva-product-page *::before,
.dishiva-product-page *::after {
box-sizing: border-box;
}
/* =========================================================
PRODUCT HERO
========================================================= */
.dishiva-product-hero {
max-width: 1240px;
margin: 0 auto;
padding: 70px 25px 60px;
display: grid;
grid-template-columns: 1.02fr 1fr;
gap: 70px;
align-items: center;
}
/* =========================================================
GALLERY
========================================================= */
.dishiva-gallery {
width: 100%;
}
.dishiva-main-image {
position: relative;
width: 100%;
height: 570px;
background: var(--dishiva-light);
border-radius: 28px;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--dishiva-border);
}
.dishiva-main-image::after {
content: "CLICK TO VIEW";
position: absolute;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
background: rgba(70, 75, 113, 0.92);
color: #ffffff;
padding: 8px 18px;
border-radius: 30px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
opacity: 0;
transition: 0.3s ease;
pointer-events: none;
}
.dishiva-main-image:hover::after {
opacity: 1;
}
.dishiva-main-image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform 0.5s ease;
}
.dishiva-main-image:hover img {
transform: scale(1.025);
}
/* =========================================================
THUMBNAILS
========================================================= */
.dishiva-thumbnails {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 14px;
margin-top: 16px;
}
.dishiva-thumb {
padding: 0;
height: 100px;
border-radius: 16px;
overflow: hidden;
background: var(--dishiva-light);
border: 2px solid transparent;
cursor: pointer;
transition: 0.25s ease;
}
.dishiva-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dishiva-thumb:hover {
border-color: var(--dishiva-blue);
transform: translateY(-2px);
}
.dishiva-thumb.active {
border-color: var(--dishiva-blue);
}
/* =========================================================
PRODUCT INFORMATION
========================================================= */
.dishiva-product-info {
width: 100%;
}
.dishiva-product-label {
display: inline-block;
color: var(--dishiva-blue);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 15px;
}
.dishiva-product-info h1 {
margin: 0;
color: var(--dishiva-navy);
font-size: clamp(32px, 4vw, 51px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -1.5px;
}
.dishiva-short-desc {
margin: 22px 0;
color: #62677c;
font-size: 18px;
line-height: 1.6;
}
/* =========================================================
HIGHLIGHTS
========================================================= */
.dishiva-highlight-line {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 25px 0;
}
.dishiva-highlight-line span {
display: inline-flex;
align-items: center;
padding: 9px 15px;
border-radius: 30px;
background: rgba(124, 213, 199, 0.24);
color: var(--dishiva-navy);
font-size: 13px;
font-weight: 700;
}
/* =========================================================
ENQUIRY BOX
========================================================= */
.dishiva-enquiry-box {
position: relative;
background: var(--dishiva-navy);
color: #ffffff;
padding: 30px;
border-radius: 24px;
overflow: hidden;
margin-top: 28px;
}
.dishiva-enquiry-box::before {
content: "";
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: var(--dishiva-mint);
opacity: 0.12;
top: -70px;
right: -50px;
}
.dishiva-enquiry-box h3 {
margin: 0 0 9px;
font-size: 22px;
color: #ffffff;
position: relative;
}
.dishiva-enquiry-box p {
margin: 0 0 22px;
color: rgba(255, 255, 255, 0.78);
font-size: 14px;
position: relative;
}
.dishiva-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
position: relative;
}
.dishiva-cta-buttons a {
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 20px;
border-radius: 12px;
font-size: 14px;
font-weight: 800;
transition: 0.25s ease;
}
.dishiva-call-btn {
background: var(--dishiva-mint);
color: var(--dishiva-navy);
}
.dishiva-whatsapp-btn {
background: #ffffff;
color: var(--dishiva-navy);
}
.dishiva-cta-buttons a:hover {
transform: translateY(-2px);
}
/* =========================================================
DETAILS SECTION
========================================================= */
.dishiva-details-section {
background: var(--dishiva-light);
padding: 80px 25px;
}
/* =========================================================
SECTION HEADING
========================================================= */
.dishiva-section-heading {
max-width: 1240px;
margin: 0 auto 45px;
text-align: center;
}
.dishiva-section-heading > span {
display: inline-block;
color: var(--dishiva-blue);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 10px;
}
.dishiva-section-heading h2 {
margin: 0;
color: var(--dishiva-navy);
font-size: clamp(30px, 4vw, 43px);
line-height: 1.15;
font-weight: 800;
}
.dishiva-section-heading p {
max-width: 760px;
margin: 15px auto 0;
color: #62677c;
font-size: 16px;
}
/* =========================================================
SPECIFICATION + APPLICATION
========================================================= */
.dishiva-spec-layout {
max-width: 1240px;
margin: 0 auto 75px;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 30px;
}
/* =========================================================
SPEC CARD
========================================================= */
.dishiva-spec-card {
background: #ffffff;
border: 1px solid var(--dishiva-border);
border-radius: 24px;
padding: 32px;
box-shadow:
0 15px 45px rgba(70, 75, 113, 0.07);
}
.dishiva-spec-card h3 {
margin: 0 0 20px;
color: var(--dishiva-navy);
font-size: 24px;
}
.dishiva-spec-row {
display: grid;
grid-template-columns: 190px 1fr;
gap: 20px;
padding: 14px 0;
border-bottom: 1px solid var(--dishiva-border);
font-size: 14px;
}
.dishiva-spec-row:last-child {
border-bottom: 0;
}
.dishiva-spec-row strong {
color: var(--dishiva-navy);
}
.dishiva-spec-row span {
color: #62677c;
}
/* =========================================================
APPLICATION CARD
========================================================= */
.dishiva-application-card {
background: var(--dishiva-navy);
color: #ffffff;
border-radius: 24px;
padding: 34px;
}
.dishiva-card-tag {
display: inline-block;
background: var(--dishiva-mint);
color: var(--dishiva-navy);
padding: 7px 13px;
border-radius: 30px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
}
.dishiva-application-card h3 {
color: #ffffff;
font-size: 27px;
line-height: 1.2;
margin: 20px 0 15px;
}
.dishiva-application-card p {
color: rgba(255, 255, 255, 0.76);
font-size: 14px;
margin-bottom: 20px;
}
.dishiva-application-card ul {
margin: 0;
padding-left: 19px;
}
.dishiva-application-card li {
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
}
/* =========================================================
ABOUT PRODUCT
========================================================= */
.dishiva-about-product {
max-width: 1240px;
margin: 0 auto 80px;
}
.dishiva-about-heading {
margin-bottom: 30px;
}
.dishiva-about-heading span {
display: inline-block;
color: var(--dishiva-blue);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.dishiva-about-heading h2 {
margin: 7px 0 0;
color: var(--dishiva-navy);
font-size: 38px;
line-height: 1.15;
}
/* =========================================================
FEATURE GRID
========================================================= */
.dishiva-feature-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 20px;
}
.dishiva-feature-card {
position: relative;
background: #ffffff;
border: 1px solid var(--dishiva-border);
border-radius: 20px;
padding: 30px;
overflow: hidden;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.dishiva-feature-card:hover {
transform: translateY(-5px);
box-shadow:
0 18px 40px rgba(70, 75, 113, 0.09);
}
.dishiva-feature-number {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(124, 213, 199, 0.28);
color: var(--dishiva-navy);
font-size: 12px;
font-weight: 900;
margin-bottom: 20px;
}
.dishiva-feature-card h3 {
margin: 0 0 12px;
color: var(--dishiva-navy);
font-size: 19px;
line-height: 1.3;
}
.dishiva-feature-card p {
margin: 0;
color: #62677c;
font-size: 14px;
line-height: 1.75;
}
/* =========================================================
APPLICATIONS
========================================================= */
.dishiva-use-section {
max-width: 1240px;
margin: 0 auto 80px;
}
.dishiva-use-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 18px;
}
.dishiva-use-item {
background: #ffffff;
border: 1px solid var(--dishiva-border);
border-radius: 18px;
padding: 25px;
transition: 0.25s ease;
}
.dishiva-use-item:hover {
transform: translateY(-4px);
border-color: rgba(17, 138, 178, 0.3);
}
.dishiva-use-item strong {
display: block;
color: var(--dishiva-navy);
font-size: 17px;
margin-bottom: 7px;
}
.dishiva-use-item p {
margin: 0;
color: #62677c;
font-size: 13px;
line-height: 1.65;
}
/* =========================================================
FINAL CTA
========================================================= */
.dishiva-final-cta {
max-width: 1240px;
margin: 0 auto;
background: var(--dishiva-navy);
color: #ffffff;
border-radius: 28px;
padding: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 35px;
overflow: hidden;
position: relative;
}
.dishiva-final-cta::after {
content: "";
position: absolute;
width: 220px;
height: 220px;
border-radius: 50%;
background: var(--dishiva-mint);
opacity: 0.09;
right: -80px;
top: -80px;
}
.dishiva-final-cta > div:first-child {
position: relative;
z-index: 2;
}
.dishiva-final-cta span {
color: var(--dishiva-mint);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.8px;
}
.dishiva-final-cta h2 {
color: #ffffff;
margin: 10px 0 10px;
font-size: 32px;
line-height: 1.2;
}
.dishiva-final-cta p {
max-width: 680px;
color: rgba(255, 255, 255, 0.75);
margin: 0;
font-size: 14px;
}
.dishiva-final-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
position: relative;
z-index: 2;
}
.dishiva-final-buttons a {
min-height: 48px;
padding: 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--dishiva-mint);
color: var(--dishiva-navy);
text-decoration: none;
font-size: 13px;
font-weight: 800;
white-space: nowrap;
transition: 0.25s ease;
}
.dishiva-final-buttons a + a {
background: #ffffff;
}
.dishiva-final-buttons a:hover {
transform: translateY(-2px);
}
/* =========================================================
LIGHTBOX
========================================================= */
.dishiva-lightbox {
position: fixed;
inset: 0;
background: rgba(20, 23, 40, 0.94);
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
z-index: 99999;
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
}
.dishiva-lightbox.show {
opacity: 1;
visibility: visible;
}
.dishiva-lightbox img {
max-width: 90vw;
max-height: 88vh;
object-fit: contain;
border-radius: 15px;
}
.dishiva-lightbox-close {
position: absolute;
top: 25px;
right: 30px;
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
background: #ffffff;
color: var(--dishiva-navy);
font-size: 30px;
line-height: 1;
cursor: pointer;
z-index: 2;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.dishiva-product-hero {
grid-template-columns: 1fr;
gap: 45px;
}
.dishiva-main-image {
height: 520px;
}
.dishiva-spec-layout {
grid-template-columns: 1fr;
}
.dishiva-feature-grid {
grid-template-columns:
repeat(2, 1fr);
}
.dishiva-use-grid {
grid-template-columns:
repeat(2, 1fr);
}
.dishiva-final-cta {
flex-direction: column;
align-items: flex-start;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.dishiva-product-hero {
padding: 40px 16px 45px;
gap: 35px;
}
.dishiva-main-image {
height: 390px;
border-radius: 20px;
}
.dishiva-thumbnails {
gap: 8px;
}
.dishiva-thumb {
height: 75px;
border-radius: 11px;
}
.dishiva-product-info h1 {
font-size: 32px;
letter-spacing: -0.8px;
}
.dishiva-short-desc {
font-size: 16px;
}
.dishiva-highlight-line {
gap: 7px;
}
.dishiva-highlight-line span {
font-size: 11px;
padding: 8px 11px;
}
.dishiva-enquiry-box {
padding: 24px;
border-radius: 20px;
}
.dishiva-cta-buttons {
flex-direction: column;
}
.dishiva-cta-buttons a {
width: 100%;
}
.dishiva-details-section {
padding: 55px 16px;
}
.dishiva-section-heading {
margin-bottom: 30px;
}
.dishiva-section-heading h2 {
font-size: 30px;
}
.dishiva-spec-card,
.dishiva-application-card {
padding: 24px;
border-radius: 20px;
}
.dishiva-spec-row {
grid-template-columns: 1fr;
gap: 4px;
}
.dishiva-about-heading h2 {
font-size: 31px;
}
.dishiva-feature-grid {
grid-template-columns: 1fr;
}
.dishiva-use-grid {
grid-template-columns: 1fr;
}
.dishiva-final-cta {
padding: 30px 24px;
border-radius: 22px;
}
.dishiva-final-cta h2 {
font-size: 27px;
}
.dishiva-final-buttons {
width: 100%;
flex-direction: column;
}
.dishiva-final-buttons a {
width: 100%;
}
.dishiva-lightbox {
padding: 15px;
}
.dishiva-lightbox img {
max-width: 96vw;
max-height: 80vh;
}
}/* End custom CSS */