/* Start custom CSS for html, class: .elementor-element-59df43c *//* =========================================================
DISHIVA PRODUCT PAGE
BOUFFANT CAP BLACK
========================================================= */
.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);
width: 100%;
overflow: hidden;
}
/* =========================================================
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-wrap {
position: relative;
width: 100%;
height: 570px;
background:
var(--dishiva-light);
border-radius: 28px;
overflow: hidden;
cursor: pointer;
}
.dishiva-main-image {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition:
transform 0.5s ease,
opacity 0.3s ease;
}
.dishiva-main-image-wrap:hover
.dishiva-main-image {
transform: scale(1.035);
}
.dishiva-image-overlay {
position: absolute;
left: 50%;
bottom: 20px;
transform:
translateX(-50%)
translateY(10px);
background:
var(--dishiva-navy);
color:
var(--dishiva-white);
padding: 10px 18px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
}
.dishiva-main-image-wrap:hover
.dishiva-image-overlay {
opacity: 1;
transform:
translateX(-50%)
translateY(0);
}
/* =========================================================
THUMBNAILS
========================================================= */
.dishiva-thumbnails {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 12px;
margin-top: 15px;
}
.dishiva-thumb {
padding: 0;
height: 100px;
border:
2px solid transparent;
border-radius: 14px;
overflow: hidden;
background:
var(--dishiva-light);
cursor: pointer;
transition:
border-color 0.25s ease,
transform 0.25s ease;
}
.dishiva-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dishiva-thumb:hover {
transform:
translateY(-2px);
border-color:
rgba(17, 138, 178, 0.5);
}
.dishiva-thumb.active {
border-color:
var(--dishiva-blue);
}
/* =========================================================
PRODUCT INFORMATION
========================================================= */
.dishiva-product-info {
width: 100%;
}
.dishiva-eyebrow {
display: inline-block;
margin-bottom: 16px;
color:
var(--dishiva-blue);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.dishiva-product-info h1 {
margin: 0 0 20px;
color:
var(--dishiva-navy);
font-size:
clamp(32px, 4vw, 51px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -1.5px;
}
.dishiva-product-subtitle {
margin: 0;
color: #666b7d;
font-size: 17px;
line-height: 1.75;
max-width: 650px;
}
/* =========================================================
HIGHLIGHTS
========================================================= */
.dishiva-highlights {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 28px;
}
.dishiva-highlights span {
display: inline-flex;
align-items: center;
padding: 9px 14px;
background:
rgba(124, 213, 199, 0.18);
color:
var(--dishiva-navy);
border:
1px solid rgba(124, 213, 199, 0.45);
border-radius: 50px;
font-size: 12px;
font-weight: 700;
}
/* =========================================================
ENQUIRY BOX
========================================================= */
.dishiva-enquiry-box {
position: relative;
margin-top: 35px;
background:
var(--dishiva-navy);
border-radius: 25px;
overflow: hidden;
color:
var(--dishiva-white);
}
.dishiva-enquiry-decoration {
position: absolute;
width: 180px;
height: 180px;
right: -70px;
top: -80px;
border-radius: 50%;
background:
var(--dishiva-mint);
opacity: 0.18;
}
.dishiva-enquiry-content {
position: relative;
z-index: 2;
padding: 30px;
}
.dishiva-enquiry-label {
display: block;
margin-bottom: 8px;
color:
var(--dishiva-mint);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.8px;
}
.dishiva-enquiry-content h3 {
margin: 0 0 8px;
font-size: 25px;
line-height: 1.2;
}
.dishiva-enquiry-content p {
margin: 0 0 20px;
max-width: 550px;
color:
rgba(255,255,255,0.78);
font-size: 14px;
line-height: 1.65;
}
/* =========================================================
BUTTONS
========================================================= */
.dishiva-enquiry-buttons,
.dishiva-final-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dishiva-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 19px;
border-radius: 50px;
text-decoration: none;
font-size: 13px;
font-weight: 800;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.dishiva-btn:hover {
transform:
translateY(-2px);
box-shadow:
0 10px 25px
rgba(0,0,0,0.14);
}
.dishiva-btn-light {
background:
var(--dishiva-white);
color:
var(--dishiva-navy);
}
.dishiva-btn-mint {
background:
var(--dishiva-mint);
color:
var(--dishiva-navy);
}
/* =========================================================
DETAILS SECTION
========================================================= */
.dishiva-details-section {
background:
var(--dishiva-light);
padding: 90px 25px;
}
.dishiva-section-heading {
max-width: 820px;
margin: 0 auto 45px;
text-align: center;
}
.dishiva-section-heading > span {
display: block;
margin-bottom: 12px;
color:
var(--dishiva-blue);
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}
.dishiva-section-heading h2 {
margin: 0 0 15px;
color:
var(--dishiva-navy);
font-size:
clamp(30px, 4vw, 43px);
line-height: 1.15;
letter-spacing: -0.8px;
}
.dishiva-section-heading p {
margin: 0 auto;
max-width: 720px;
color: #6a6d79;
font-size: 15px;
line-height: 1.75;
}
/* =========================================================
DETAILS GRID
========================================================= */
.dishiva-details-grid {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns:
1.15fr 0.85fr;
gap: 25px;
}
.dishiva-detail-card {
background:
var(--dishiva-white);
border:
1px solid var(--dishiva-border);
border-radius: 24px;
padding: 32px;
box-shadow:
0 15px 45px
rgba(70,75,113,0.06);
}
.dishiva-card-top {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.dishiva-card-number {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 13px;
background:
var(--dishiva-navy);
color:
var(--dishiva-mint);
font-size: 12px;
font-weight: 800;
}
.dishiva-card-top h3 {
margin: 0;
color:
var(--dishiva-navy);
font-size: 22px;
}
/* =========================================================
SPECIFICATIONS
========================================================= */
.dishiva-spec-list {
display: flex;
flex-direction: column;
}
.dishiva-spec-row {
display: grid;
grid-template-columns:
0.85fr 1.15fr;
gap: 20px;
padding: 15px 0;
border-bottom:
1px solid var(--dishiva-border);
font-size: 14px;
line-height: 1.5;
}
.dishiva-spec-row:last-child {
border-bottom: 0;
}
.dishiva-spec-row span {
color: #737789;
font-weight: 600;
}
.dishiva-spec-row strong {
color:
var(--dishiva-dark);
font-weight: 700;
}
/* =========================================================
APPLICATION CARD
========================================================= */
.dishiva-application-card > p {
margin: 0 0 25px;
color: #707486;
font-size: 14px;
line-height: 1.7;
}
.dishiva-application-list {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 11px;
}
.dishiva-application-list div {
display: flex;
align-items: flex-start;
gap: 9px;
color:
var(--dishiva-dark);
font-size: 13px;
font-weight: 650;
line-height: 1.5;
}
.dishiva-application-list span {
color:
var(--dishiva-blue);
font-weight: 900;
}
/* =========================================================
FEATURES
========================================================= */
.dishiva-features-section {
max-width: 1240px;
margin: 0 auto;
padding: 90px 25px;
}
.dishiva-feature-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 18px;
}
.dishiva-feature-card {
padding: 30px;
background:
var(--dishiva-white);
border:
1px solid var(--dishiva-border);
border-radius: 22px;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.dishiva-feature-card:hover {
transform:
translateY(-5px);
box-shadow:
0 18px 45px
rgba(70,75,113,0.09);
}
.dishiva-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
margin-bottom: 22px;
border-radius: 13px;
background:
var(--dishiva-mint);
color:
var(--dishiva-navy);
font-size: 11px;
font-weight: 900;
}
.dishiva-feature-card h3 {
margin: 0 0 10px;
color:
var(--dishiva-navy);
font-size: 19px;
}
.dishiva-feature-card p {
margin: 0;
color: #707486;
font-size: 14px;
line-height: 1.7;
}
/* =========================================================
APPLICATIONS
========================================================= */
.dishiva-applications-section {
background:
var(--dishiva-light);
padding: 90px 25px;
}
.dishiva-applications-grid {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 18px;
}
.dishiva-application-box {
position: relative;
min-height: 190px;
padding: 28px;
background:
var(--dishiva-white);
border-radius: 22px;
border:
1px solid var(--dishiva-border);
overflow: hidden;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.dishiva-application-box:hover {
transform:
translateY(-4px);
box-shadow:
0 15px 35px
rgba(70,75,113,0.08);
}
.dishiva-application-box > span {
display: block;
margin-bottom: 20px;
color:
var(--dishiva-blue);
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
}
.dishiva-application-box h3 {
margin: 0 0 9px;
color:
var(--dishiva-navy);
font-size: 19px;
}
.dishiva-application-box p {
margin: 0;
color: #717587;
font-size: 13px;
line-height: 1.65;
}
/* =========================================================
FINAL CTA
========================================================= */
.dishiva-final-cta {
max-width: 1190px;
margin: 80px auto;
padding: 70px 40px;
border-radius: 30px;
background:
var(--dishiva-navy);
position: relative;
overflow: hidden;
text-align: center;
}
.dishiva-final-cta::after {
content: "";
position: absolute;
width: 300px;
height: 300px;
right: -130px;
bottom: -170px;
border-radius: 50%;
background:
var(--dishiva-mint);
opacity: 0.15;
}
.dishiva-final-cta-content {
position: relative;
z-index: 2;
}
.dishiva-final-cta-content > span {
display: block;
margin-bottom: 13px;
color:
var(--dishiva-mint);
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
}
.dishiva-final-cta h2 {
max-width: 800px;
margin: 0 auto 15px;
color:
var(--dishiva-white);
font-size:
clamp(30px, 4vw, 45px);
line-height: 1.15;
}
.dishiva-final-cta p {
max-width: 700px;
margin: 0 auto 28px;
color:
rgba(255,255,255,0.75);
font-size: 15px;
line-height: 1.7;
}
.dishiva-final-buttons {
justify-content: center;
}
/* =========================================================
LIGHTBOX
========================================================= */
.dishiva-lightbox {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
background:
rgba(15,18,32,0.92);
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
.dishiva-lightbox.active {
opacity: 1;
visibility: visible;
}
.dishiva-lightbox img {
max-width: 90vw;
max-height: 88vh;
object-fit: contain;
border-radius: 15px;
box-shadow:
0 25px 80px
rgba(0,0,0,0.35);
}
.dishiva-lightbox-close {
position: absolute;
top: 25px;
right: 30px;
width: 45px;
height: 45px;
border: 0;
border-radius: 50%;
background:
var(--dishiva-white);
color:
var(--dishiva-navy);
font-size: 30px;
line-height: 1;
cursor: pointer;
z-index: 5;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.dishiva-product-hero {
grid-template-columns: 1fr;
gap: 45px;
max-width: 760px;
}
.dishiva-main-image-wrap {
height: 520px;
}
.dishiva-details-grid {
grid-template-columns: 1fr;
max-width: 760px;
}
.dishiva-feature-grid {
grid-template-columns:
repeat(2, 1fr);
}
.dishiva-applications-grid {
grid-template-columns:
repeat(2, 1fr);
}
.dishiva-features-section {
max-width: 760px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.dishiva-product-hero {
padding:
40px 16px 45px;
gap: 35px;
}
.dishiva-main-image-wrap {
height: 390px;
border-radius: 20px;
}
.dishiva-thumbnails {
gap: 8px;
}
.dishiva-thumb {
height: 75px;
border-radius: 10px;
}
.dishiva-product-info h1 {
font-size: 34px;
letter-spacing: -1px;
}
.dishiva-product-subtitle {
font-size: 15px;
line-height: 1.65;
}
.dishiva-highlights {
gap: 7px;
}
.dishiva-highlights span {
padding: 8px 11px;
font-size: 11px;
}
.dishiva-enquiry-content {
padding: 24px;
}
.dishiva-enquiry-content h3 {
font-size: 22px;
}
.dishiva-enquiry-buttons,
.dishiva-final-buttons {
flex-direction: column;
}
.dishiva-btn {
width: 100%;
}
.dishiva-details-section,
.dishiva-applications-section {
padding:
65px 16px;
}
.dishiva-features-section {
padding:
65px 16px;
}
.dishiva-section-heading {
margin-bottom: 32px;
}
.dishiva-section-heading h2 {
font-size: 30px;
}
.dishiva-detail-card {
padding: 23px;
border-radius: 19px;
}
.dishiva-spec-row {
grid-template-columns: 1fr;
gap: 4px;
padding: 13px 0;
}
.dishiva-application-list {
grid-template-columns: 1fr;
}
.dishiva-feature-grid,
.dishiva-applications-grid {
grid-template-columns: 1fr;
}
.dishiva-feature-card {
padding: 25px;
}
.dishiva-application-box {
min-height: auto;
padding: 25px;
}
.dishiva-final-cta {
margin:
50px 16px;
padding:
50px 23px;
border-radius: 23px;
}
.dishiva-final-cta h2 {
font-size: 30px;
}
.dishiva-lightbox {
padding: 15px;
}
.dishiva-lightbox-close {
top: 15px;
right: 15px;
}
}/* End custom CSS */