:root{
--red:#c49a3a;
--dark:#111;
--bg:#f5f6f8;
--text:#1b1b1b;
--muted:#6b7280;
--card:#fff;
--border:#e5e7eb;
--radius:16px;
}
html, body {
overflow-x: hidden;
position: relative;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin:0 auto}
.muted{color:var(--muted)}
.small{font-size:13px}
.btn{
border:1px solid var(--border);
background:#fff;
padding:10px 14px;
border-radius:12px;
cursor:pointer;
font-weight:800;
font-size:14px;
display:inline-flex;align-items:center;justify-content:center;
}
.btn:hover{border-color:#d1d5db}
.btn--primary{background:var(--red);border-color:var(--red);color:#fff}
.btn--primary:hover{filter:brightness(.95)}
.iconBtn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:900}
.linkDanger{background:none;border:none;color:var(--red);font-weight:900;cursor:pointer}
.section{padding:26px 0}
.sectionTitle{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}
.sectionTitle h2{margin:0;font-size:22px}
.toast{
position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
background:#111;color:#fff;padding:10px 14px;border-radius:999px;
opacity:0;pointer-events:none;transition:.25s;z-index:9999
}
.toast.show{opacity:1;bottom:26px}
.emptyBox{
background:#fff;border:1px solid var(--border);border-radius:16px;
padding:16px
}
.breadcrumbs{
font-size:13px;color:var(--muted);padding:12px 0
}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs span{margin:0 6px}
.hidden{display:none}
.btnAnim{
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btnAnim:hover{
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(0,0,0,.08);
}
.btnAnim:active{
transform: translateY(0);
filter: brightness(.95);
}
.pImgAnim{
transition: transform .35s ease, filter .35s ease;
will-change: transform;
}
.productCard:hover .pImgAnim{
transform: scale(1.04);
filter: saturate(1.05);
}
.toast{
position: fixed;
left: 50%;
bottom: 18px;
transform: translateX(-50%) translateY(10px);
background: rgba(0,0,0,.85);
color: #fff;
padding: 10px 14px;
border-radius: 10px;
opacity: 0;
z-index: 9999;
transition: opacity .2s ease, transform .2s ease;
font-weight: 700;
}
.toast.show{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
body.rtl{
direction: rtl;
}
body.rtl .breadcrumbs{
direction: rtl;
}
.meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.meta-row .categories:empty {
display: none;
}
.meta-row .categories {
font-size: 15px;
font-weight: 600;
color: #000;
}
.meta-row .categories b {
color: #000;
margin-right: 6px;
}
.meta-row .categories a {
color: #c49a3a;
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease, text-decoration 0.2s ease;
}
.meta-row .categories a:hover {
color: #a8822f;
text-decoration: underline;
}
.goog-te-banner-frame,
.goog-te-gadget,
.goog-logo-link,
.goog-te-balloon-frame {
display: none !important;
}
body {
top: 0 !important;
}
.faq-section {
padding: 80px 0;
background: linear-gradient(180deg, #fbfbfb 0%, #ffffff 100%);
}
.faq-head {
text-align: center;
margin-bottom: 34px;
}
.faq-title {
font-size: 34px;
font-weight: 900;
margin: 0 0 8px;
letter-spacing: -0.5px;
color: #111;
}
.faq-subtitle {
font-size: 15px;
color: rgba(0,0,0,.65);
max-width: 620px;
margin: 0 auto;
line-height: 1.6;
}
.faq-grid {
display: grid;
grid-template-columns: 0.9fr 1.3fr;
gap: 26px;
align-items: start;
}
.faq-info-card {
border-radius: 18px;
background: #111;
color: rgba(255,255,255,.9);
padding: 22px;
box-shadow: 0 18px 60px rgba(0,0,0,.18);
position: sticky;
top: 100px;
}
.faq-info-card h3 {
font-size: 20px;
margin: 0 0 10px;
color: #fff;
font-weight: 900;
}
.faq-info-card p {
margin: 0 0 14px;
line-height: 1.7;
color: rgba(255,255,255,.75);
}
.faq-info-card ul {
margin: 0 0 18px;
padding-left: 16px;
}
.faq-info-card li {
margin-bottom: 8px;
font-weight: 700;
color: rgba(255,255,255,.88);
}
.faq-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 16px;
border-radius: 12px;
font-weight: 900;
font-size: 14px;
text-decoration: none;
color: #111;
background: linear-gradient(90deg, rgba(196,154,58,1), rgba(255,225,120,1));
transition: transform 0.25s ease, box-shadow 0.25s ease;
width: 100%;
}
.faq-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(196,154,58,.25);
}
.faq-cta-icon {
transition: transform 0.25s ease;
}
.faq-cta-btn:hover .faq-cta-icon {
transform: translateX(5px);
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 14px;
}
.faq-item {
background: #fff;
border-radius: 16px;
border: 1px solid rgba(0,0,0,.08);
box-shadow: 0 14px 40px rgba(0,0,0,.06);
overflow: hidden;
transition: 0.25s ease;
}
.faq-item:hover {
transform: translateY(-3px);
box-shadow: 0 18px 55px rgba(0,0,0,.10);
}
.faq-question {
width: 100%;
padding: 18px 18px;
background: transparent;
border: none;
cursor: pointer;
outline: none;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
font-weight: 900;
color: #111;
}
.faq-icon {
width: 18px;
height: 18px;
border-radius: 999px;
position: relative;
flex: 0 0 18px;
}
.faq-icon::before,
.faq-icon::after {
content: "";
position: absolute;
background: rgba(0,0,0,.75);
border-radius: 3px;
transition: 0.25s ease;
}
.faq-icon::before {
width: 12px;
height: 2px;
top: 8px;
left: 3px;
}
.faq-icon::after {
width: 2px;
height: 12px;
top: 3px;
left: 8px;
}
.faq-item.active .faq-icon::after {
transform: scaleY(0);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.faq-answer p {
margin: 0;
padding: 0 18px 18px;
color: rgba(0,0,0,.7);
line-height: 1.7;
font-size: 14px;
}
@media (max-width: 992px) {
.faq-grid {
grid-template-columns: 1fr;
}
.faq-info-card {
position: relative;
top: unset;
}
}
@media (max-width: 520px) {
.faq-title {
font-size: 28px;
}
}
.trustSection {
padding: 80px 0;
background: #fff;
}
.trust2col {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
align-items: center;
}
.trustCarousel {
position: relative;
border-radius: 22px;
overflow: hidden;
background: #f4f4f4;
box-shadow: 0 20px 70px rgba(0, 0, 0, 0.12);
min-height: 420px;
}
.trustSlider {
position: relative;
width: 100%;
height: 420px;
}
.trustSlide {
position: absolute;
inset: 0;
opacity: 0;
transform: scale(1.03);
transition: opacity 0.5s ease, transform 0.5s ease;
display: flex;
align-items: center;
justify-content: center;
}
.trustSlide.active {
opacity: 1;
transform: scale(1);
z-index: 2;
}
.trustSlide img {
display: block !important;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0;
}
.trustNav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 12px;
border: none;
cursor: pointer;
font-size: 28px;
font-weight: 900;
color: #111;
background: rgba(255, 255, 255, 0.85);
transition: 0.25s ease;
z-index: 3;
}
.trustNav:hover {
background: rgba(196, 154, 58, 1);
transform: translateY(-50%) scale(1.07);
}
.trustPrev { left: 14px; }
.trustNext { right: 14px; }
.trustDots {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 4;
}
.trustDot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: 0.25s ease;
}
.trustDot.active {
background: rgba(196, 154, 58, 1);
transform: scale(1.3);
}
.trustContent h2 {
font-size: 34px;
font-weight: 900;
line-height: 1.2;
margin: 0 0 18px;
color: #111;
}
.trustContent h2 span {
color: #c49a3a;
}
.trustIntro { display: none; }
.trustCards {
display: flex;
flex-direction: column;
gap: 14px;
}
.trustCard {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.07);
background: #fafafa;
transition: 0.25s ease;
opacity: 0;
transform: translateY(20px);
animation: slideUp 0.6s ease forwards;
}
.trustCard:nth-child(1) { animation-delay: .1s; }
.trustCard:nth-child(2) { animation-delay: .2s; }
.trustCard:nth-child(3) { animation-delay: .3s; }
.trustCard:nth-child(4) { animation-delay: .4s; }
.trustCard:nth-child(5) { animation-delay: .5s; }
.trustCard:hover {
transform: translateY(-4px);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.10);
border-color: rgba(196, 154, 58, 0.35);
background: #fff;
}
.trustCard .trustIcon {
width: 42px;
height: 42px;
min-width: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(196, 154, 58, 1), rgba(255, 225, 120, 1));
color: #111;
font-size: 16px;
box-shadow: 0 10px 22px rgba(196, 154, 58, 0.20);
transition: 0.25s ease;
}
.trustCard:hover .trustIcon {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 14px 30px rgba(196, 154, 58, 0.30);
}
.trustCard h4 {
margin: 0;
font-size: 15px;
font-weight: 900;
color: #111;
line-height: 1.35;
}
.trustCard p { display: none; }
@media (max-width: 992px) {
.trust2col {
grid-template-columns: 1fr;
gap: 26px;
}
.trustCarousel {
min-height: 340px;
}
.trustSlider {
height: 340px;
}
.trustContent h2 {
font-size: 28px;
}
}
@keyframes slideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.gx-msg{
display:none;
position:relative;
padding:12px 14px;
border-radius:14px;
border:1px solid rgba(0,0,0,.10);
background:#fff;
box-shadow:0 10px 26px rgba(0,0,0,.10);
overflow:hidden;
transform:translateY(10px) scale(.98);
opacity:0;
}
.gx-msg.is-show{
display:block;
animation:gxMsgIn .26s ease-out forwards;
}
.gx-msg.is-hide{
animation:gxMsgOut .18s ease-in forwards;
}
.gx-msg__title{
font-weight:900;
margin:0;
line-height:1.2;
}
.gx-msg__text{
margin:4px 0 0 0;
font-size:13px;
line-height:1.35;
opacity:.9;
}
.gx-msg--success{
border-color: rgba(10,122,47,.25);
}
.gx-msg--success .gx-msg__title{
color:#0a7a2f;
}
.gx-msg--error{
border-color: rgba(176,0,32,.25);
}
.gx-msg--error .gx-msg__title{
color:#b00020;
}
.gx-msg--info{
border-color: rgba(0,0,0,.12);
}
.gx-msg__bar{
position:absolute;
left:0;
bottom:0;
height:4px;
width:100%;
background:rgba(0,0,0,.06);
}
.gx-msg__bar > span{
display:block;
height:100%;
width:100%;
transform-origin:left;
transform:scaleX(1);
}
.gx-msg--success .gx-msg__bar > span{
background:rgba(10,122,47,.35);
}
.gx-msg--error .gx-msg__bar > span{
background:rgba(176,0,32,.35);
}
.gx-msg--info .gx-msg__bar > span{
background:rgba(0,0,0,.25);
}
@keyframes gxMsgIn{
from { opacity:0; transform:translateY(10px) scale(.98); }
to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes gxMsgOut{
from { opacity:1; transform:translateY(0) scale(1); }
to   { opacity:0; transform:translateY(10px) scale(.98); }
}
.gx-pass{ display:grid; gap:6px; margin-top:4px; }
.gx-pass__row{ display:flex; justify-content:space-between; gap:10px; }
.gx-pass__label{ font-weight:800; }
.gx-pass__meter{
height:10px;
background:#eee;
border-radius:999px;
overflow:hidden;
border:1px solid var(--border);
}
.gx-pass__fill{
height:100%;
width:0%;
background:#bbb;
border-radius:999px;
}
.gx-check{
display:flex;
align-items:flex-start;
gap:8px;
margin-top:4px;
}
:root {
--about-radius: 14px;
--about-shadow: 0 10px 22px rgba(0, 0, 0, .06);
--about-shadow-hover: 0 16px 35px rgba(0, 0, 0, .12);
--about-border: 1px solid rgba(0, 0, 0, .06);
--about-ease: cubic-bezier(.2, .8, .2, 1);
}
@keyframes aboutFadeUp {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes aboutFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.aboutHeroContent,
.aboutHeroMedia,
.aboutMiniCard,
.aboutCard,
.aboutTrustItem,
.aboutChecklist,
.aboutStep,
.aboutFaqCard,
.aboutStrip {
animation: aboutFadeUp .55s var(--about-ease) both;
}
.aboutHeroMedia {
animation-delay: .05s;
}
.aboutMiniCard:nth-child(1) {
animation-delay: .03s;
}
.aboutMiniCard:nth-child(2) {
animation-delay: .06s;
}
.aboutCard:nth-child(1) {
animation-delay: .03s;
}
.aboutCard:nth-child(2) {
animation-delay: .06s;
}
.aboutCard:nth-child(3) {
animation-delay: .09s;
}
.aboutCard:nth-child(4) {
animation-delay: .12s;
}
@media (prefers-reduced-motion: reduce) {
.aboutHeroContent,
.aboutHeroMedia,
.aboutMiniCard,
.aboutCard,
.aboutTrustItem,
.aboutChecklist,
.aboutStep,
.aboutFaqCard,
.aboutStrip {
animation: none !important;
transition: none !important;
}
}
.aboutHeroGrid {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 18px;
align-items: stretch;
}
.aboutHeroContent {
background: #fff;
border-radius: var(--about-radius);
padding: 22px;
border: var(--about-border);
box-shadow: var(--about-shadow);
transition: transform .25s var(--about-ease), box-shadow .25s var(--about-ease);
}
.aboutHeroContent:hover {
transform: translateY(-3px);
box-shadow: var(--about-shadow-hover);
}
.aboutTitle {
margin: 0 0 10px;
font-size: 34px;
line-height: 1.15;
}
.aboutLead {
margin: 0 0 14px;
font-size: 16px;
line-height: 1.9;
}
.aboutCtas {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
.aboutCtas .btn {
transition: transform .18s var(--about-ease), box-shadow .18s var(--about-ease), filter .18s var(--about-ease);
will-change: transform;
}
.aboutCtas .btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 18px rgba(0, 0, 0, .14);
}
.aboutCtas .btn:active {
transform: translateY(0);
box-shadow: none;
}
.aboutCtas .btn:focus-visible {
outline: 2px solid rgba(212, 175, 55, .9);
outline-offset: 3px;
}
.aboutBadges {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
.aboutBadge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 999px;
background: #111;
color: #fff;
font-weight: 800;
font-size: 13px;
transition: transform .2s var(--about-ease), filter .2s var(--about-ease);
}
.aboutBadge:hover {
transform: translateY(-2px);
filter: brightness(1.08);
}
.aboutHeroMedia {
border-radius: var(--about-radius);
overflow: hidden;
background: #fff;
border: var(--about-border);
box-shadow: var(--about-shadow);
transition: transform .25s var(--about-ease), box-shadow .25s var(--about-ease);
min-height: 220px;
}
.aboutHeroMedia:hover {
transform: translateY(-3px);
box-shadow: var(--about-shadow-hover);
}
.aboutHeroMedia img {
width: 100%;
height: 100%;
min-height: 220px;
object-fit: cover;
display: block;
}
.aboutCards2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
}
.aboutMiniCard {
background: #f7f7f7;
border-radius: var(--about-radius);
padding: 14px;
border: 1px solid rgba(0, 0, 0, .05);
transition: transform .22s var(--about-ease), box-shadow .22s var(--about-ease), background .22s var(--about-ease);
}
.aboutMiniCard:hover {
transform: translateY(-3px);
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}
.aboutMiniCard b {
display: block;
margin-bottom: 6px
}
.aboutOffer.section {
background: #f7f7f7;
}
.aboutGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.aboutCard {
background: #fff;
border-radius: var(--about-radius);
padding: 16px;
border: var(--about-border);
box-shadow: 0 10px 22px rgba(0, 0, 0, .04);
transition: transform .22s var(--about-ease), box-shadow .22s var(--about-ease);
}
.aboutCard:hover {
transform: translateY(-4px);
box-shadow: var(--about-shadow-hover);
}
.aboutCard h3 {
margin: 0 0 8px
}
.aboutTrustList {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 14px;
}
.aboutTrustItem {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px;
border-radius: var(--about-radius);
background: #f7f7f7;
border: 1px solid rgba(0, 0, 0, .05);
transition: transform .22s var(--about-ease), box-shadow .22s var(--about-ease), background .22s var(--about-ease);
}
.aboutTrustItem:hover {
transform: translateY(-3px);
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}
.aboutTrustIcon {
width: 38px;
height: 38px;
border-radius: 12px;
background: #111;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
flex: 0 0 38px;
transition: transform .22s var(--about-ease), filter .22s var(--about-ease);
}
.aboutTrustItem:hover .aboutTrustIcon {
transform: scale(1.06);
filter: brightness(1.1);
}
.aboutTrustItem h4 {
margin: 0 0 6px
}
.aboutChecklist {
margin-top: 12px;
background: #f7f7f7;
border-radius: var(--about-radius);
padding: 14px;
border: 1px solid rgba(0, 0, 0, .05);
transition: transform .22s var(--about-ease), box-shadow .22s var(--about-ease), background .22s var(--about-ease);
}
.aboutChecklist:hover {
transform: translateY(-3px);
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}
.aboutChecklist b {
display: block;
margin-bottom: 6px
}
.aboutProcess {
background: #111;
color: #fff;
}
.aboutProcessTitle h2 {
color: #fff
}
.aboutProcessTitle .muted {
color: #fff;
opacity: .85
}
.aboutProcessGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.aboutStep {
background: #1a1a1a;
border-radius: var(--about-radius);
padding: 16px;
border: 1px solid rgba(255, 255, 255, .06);
transition: transform .22s var(--about-ease), box-shadow .22s var(--about-ease), background .22s var(--about-ease);
}
.aboutStep:hover {
transform: translateY(-4px);
background: #202020;
box-shadow: 0 14px 26px rgba(0, 0, 0, .35);
}
.aboutStep b {
display: block;
margin-bottom: 8px
}
.aboutStep div {
opacity: .92;
line-height: 1.8
}
.aboutFaqGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
.aboutFaqCard {
background: #fff;
border-radius: var(--about-radius);
padding: 16px;
border: var(--about-border);
box-shadow: 0 10px 22px rgba(0, 0, 0, .04);
transition: transform .22s var(--about-ease), box-shadow .22s var(--about-ease);
}
.aboutFaqCard:hover {
transform: translateY(-4px);
box-shadow: var(--about-shadow-hover);
}
.aboutFaqCard h3 {
margin: 0 0 8px
}
.aboutCenterCta {
margin-top: 16px;
text-align: center;
}
.aboutStrip {
background: #f7f7f7;
border-radius: var(--about-radius);
padding: 18px;
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
flex-wrap: wrap;
border: 1px solid rgba(0, 0, 0, .05);
transition: transform .22s var(--about-ease), box-shadow .22s var(--about-ease), background .22s var(--about-ease);
}
.aboutStrip:hover {
transform: translateY(-3px);
background: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}
.aboutStrip h2 {
margin: 0 0 6px
}
.aboutStripBtns {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
@media (max-width: 980px) {
.aboutHeroGrid {
grid-template-columns: 1fr
}
.aboutTitle {
font-size: 30px
}
.aboutHeroMedia img {
min-height: 200px;
}
}
@media (max-width: 640px) {
.aboutCards2 {
grid-template-columns: 1fr
}
.aboutTitle {
font-size: 26px
}
.aboutHeroContent {
padding: 18px;
}
}
.aboutCard,
.aboutFaqCard,
.aboutMiniCard,
.aboutTrustItem,
.aboutStrip{
transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), background .22s cubic-bezier(.2,.8,.2,1);
}
.aboutCard:hover,
.aboutFaqCard:hover,
.aboutMiniCard:hover,
.aboutTrustItem:hover,
.aboutStrip:hover{
transform: translateY(-4px);
box-shadow: 0 16px 35px rgba(0,0,0,.12);
background:#fff;
}
.aboutCtas .btn{
transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1);
}
.aboutCtas .btn:hover{
transform: translateY(-2px);
box-shadow: 0 10px 18px rgba(0,0,0,.14);
}
.aboutCtas .btn:active{
transform: translateY(0);
box-shadow:none;
}
:root {
--contact-bg: #f6f7fb;
--contact-card: #ffffff;
--contact-text: #111827;
--contact-muted: #6b7280;
--contact-border: #e5e7eb;
--contact-shadow: 0 10px 25px rgba(17, 24, 39, 0.08);
--contact-shadow-sm: 0 6px 18px rgba(17, 24, 39, 0.06);
--contact-radius-lg: 18px;
--contact-radius-md: 14px;
--contact-gold: #caa13d;
--contact-gold-soft: rgba(202, 161, 61, 0.12);
--contact-green: #16a34a;
--contact-green-soft: rgba(22, 163, 74, 0.10);
}
.contact-page {
background: var(--contact-bg);
color: var(--contact-text);
padding: 28px 0 70px;
}
.contact-container {
max-width: 1200px;
margin: auto;
padding: 0 18px;
}
.contact-hero {
border: 1px solid var(--contact-border);
background: linear-gradient(135deg, #ffffff, #fbfbfd);
border-radius: var(--contact-radius-lg);
padding: 34px;
margin-bottom: 22px;
box-shadow: var(--contact-shadow);
position: relative;
overflow: hidden;
}
.contact-hero::before {
content: "";
position: absolute;
width: 520px;
height: 260px;
left: -160px;
top: -120px;
background: radial-gradient(circle, var(--contact-gold-soft), transparent 65%);
pointer-events: none;
}
.contact-hero::after {
content: "";
position: absolute;
width: 520px;
height: 260px;
right: -180px;
bottom: -140px;
background: radial-gradient(circle, rgba(0, 0, 0, 0.03), transparent 70%);
pointer-events: none;
}
.contact-hero h1 {
position: relative;
font-size: 36px;
margin: 0 0 10px;
letter-spacing: -0.02em;
}
.contact-hero p {
position: relative;
color: var(--contact-muted);
font-size: 15.5px;
line-height: 1.6;
max-width: 720px;
margin: 0;
}
.contact-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 11px 16px;
border-radius: 999px;
border: 1px solid var(--contact-border);
background: #fff;
margin-right: 10px;
font-weight: 700;
font-size: 13.5px;
color: var(--contact-text);
transition: 0.18s ease;
box-shadow: 0 6px 14px rgba(17, 24, 39, 0.06);
}
.contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 18px rgba(17, 24, 39, 0.10);
}
.contact-btn-gold {
border-color: rgba(202, 161, 61, 0.35);
background: linear-gradient(135deg, #fff, rgba(202, 161, 61, 0.10));
}
.contact-btn-green {
border-color: rgba(22, 163, 74, 0.35);
background: linear-gradient(135deg, #fff, rgba(22, 163, 74, 0.09));
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.contact-card {
border: 1px solid var(--contact-border);
border-radius: var(--contact-radius-lg);
background: var(--contact-card);
box-shadow: var(--contact-shadow-sm);
padding: 22px;
}
.contact-card h2 {
margin: 0 0 6px;
font-size: 18px;
letter-spacing: -0.01em;
}
.contact-card p {
color: var(--contact-muted);
}
.contact-info-item {
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(229, 231, 235, 0.7);
}
.contact-info-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.contact-info-item h3 {
margin: 0 0 6px;
font-size: 14.5px;
font-weight: 800;
}
.contact-info-item p {
margin: 0;
color: var(--contact-muted);
font-size: 14px;
line-height: 1.55;
}
.contact-form label {
font-size: 12.5px;
color: var(--contact-muted);
display: block;
margin: 10px 0 6px;
font-weight: 700;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
width: 100%;
padding: 12px 12px;
border-radius: 12px;
border: 1px solid var(--contact-border);
background: #fff;
color: var(--contact-text);
margin-bottom: 6px;
transition: 0.18s ease;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
border-color: rgba(202, 161, 61, 0.65);
outline: none;
box-shadow: 0 0 0 3px rgba(202, 161, 61, 0.15);
}
.contact-form textarea {
min-height: 130px;
resize: vertical;
}
.contact-submit {
width: 100%;
background: linear-gradient(135deg, var(--contact-gold), #b8902f);
border: none;
padding: 13px 18px;
border-radius: 12px;
font-weight: 900;
cursor: pointer;
transition: 0.18s ease;
color: #111;
margin-top: 10px;
box-shadow: 0 12px 22px rgba(202, 161, 61, 0.25);
}
.contact-submit:hover {
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(202, 161, 61, 0.30);
}
.contact-map iframe {
width: 100%;
height: 320px;
border-radius: var(--contact-radius-md);
border: 1px solid var(--contact-border);
background: #fff;
}
.contact-faq details {
background: #fff;
border: 1px solid var(--contact-border);
border-radius: 12px;
padding: 12px 12px;
margin-bottom: 10px;
box-shadow: 0 6px 14px rgba(17, 24, 39, 0.05);
}
.contact-faq summary {
cursor: pointer;
font-weight: 900;
font-size: 13.5px;
color: var(--contact-text);
}
.contact-faq p {
margin-top: 10px;
font-size: 14px;
color: var(--contact-muted);
line-height: 1.6;
}
.breadcrumbs {
margin-bottom: 14px;
}
@media (max-width: 992px) {
.contact-grid {
grid-template-columns: 1fr;
}
.contact-hero {
padding: 26px;
}
.contact-hero h1 {
font-size: 28px;
}
}
@media (max-width: 600px) {
.contact-hero {
padding: 22px;
}
.contact-btn {
margin-bottom: 10px;
}
}
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.topbar{background:var(--red);color:#fff;font-size:13px}
.topbar .container{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:7px 0}
.topbar .left, .topbar .right{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.topbar a{color:#fff;opacity:.95}
.topbar a:hover{opacity:1}
.currencySelect, .langSelect{
border:1px solid rgba(255,255,255,.35);
background:rgba(255,255,255,.08);
color:#fff;border-radius:12px;padding:6px 10px;font-weight:800;cursor:pointer
}
.currencySelect option, .langSelect option{color:#111}
.header{background:#fff;border-bottom:1px solid var(--border)}
.header .container{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.logoBox{
width:90px;height:54px;border-radius:16px;background:var(--dark);
display:grid;place-items:center;color:#fff;font-weight:900
}
.logo-img {
height: 55px;
width: auto;
max-width: 100%;
display: block;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
box-shadow: 0 10px 25px rgba(0,0,0,.35);
animation: slideDown .3s ease;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
body.sticky-active {
padding-top: 75px;
}
.brand {
display: flex;
align-items: center;
text-decoration: none;
}
.logo-img {
height: 90px;
width: auto;
display: block;
}
.category-wrap {
position: relative;
}
.catBtn {
background: #c4151c;
color: #fff;
font-weight: 800;
padding: 14px 18px;
border-radius: 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
user-select: none;
}
.category-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 320px;
background: #fff;
border-radius: 0 0 14px 14px;
box-shadow: 0 20px 40px rgba(0,0,0,.25);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all .25s ease;
z-index: 9999;
}
.category-wrap:hover .category-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.category-list {
list-style: none;
margin: 0;
padding: 10px 0;
}
.category-list li a {
display: block;
padding: 12px 18px;
font-size: 15px;
font-weight: 600;
color: #222;
border-bottom: 1px solid #eee;
}
.category-list li:last-child a {
border-bottom: none;
}
.category-list li a:hover {
background: #f5f5f5;
color: #c4151c;
}
.submenu {
display: none;
background: #1a1a1a;
border-radius: 10px;
margin-left: 10px;
}
.category-dropdown li:hover .submenu {
display: block;
}
.submenu a {
padding: 8px 14px;
display: block;
font-size: 14px;
color: #ccc;
}
.submenu a:hover {
background: rgba(255,255,255,.08);
}
.top-social {
display: flex;
gap: 12px;
}
.top-social a {
width: 32px;
height: 32px;
background: rgba(255,255,255,.15);
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-size: 14px;
transition: .25s;
}
.top-social a:hover {
background: #fff;
color: #c4151c;
}
.brandText{line-height:1}
.brandText .name{font-weight:1000;font-size:16px}
.brandText .sub{font-size:12px;color:var(--muted);font-weight:800}
.searchWrap{flex:1;max-width:640px;position:relative}
.searchBar{display:flex;background:#fff;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.searchBar input{flex:1;border:none;outline:none;padding:12px 14px;font-size:14px}
.searchBar button{border:none;background:var(--red);color:#fff;padding:0 18px;cursor:pointer;font-weight:900}
.searchSuggestions{
position:absolute;left:0;right:0;top:56px;
background:#fff;border:1px solid var(--border);border-radius:16px;
overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.12);
z-index:50;
}
.suggItem{
width:100%;display:flex;justify-content:space-between;gap:10px;
padding:10px 12px;border:none;background:#fff;cursor:pointer;
font-weight:900
}
.suggItem:hover{background:#f3f4f6}
.suggItem small{color:var(--muted);font-weight:900}
.actions{
display:flex;
gap:10px;
align-items:center;
flex-wrap:nowrap;
white-space:nowrap;
justify-content:flex-end;
}
.actionPill{
background:#f3f4f6;border-radius:999px;padding:9px 12px;font-weight:900;display:inline-flex;gap:8px;align-items:center
}
.countBubble{
background:var(--red);color:#fff;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:1000
}
.cartTotal{font-weight:1000}
.navbar{background:#111;color:#fff}
.navbar .container{display:flex;gap:14px;align-items:center;padding:10px 0}
.catBtn{
background:var(--red);border:none;color:#fff;font-weight:1000;
padding:10px 14px;border-radius:14px;cursor:pointer;display:flex;gap:10px;align-items:center
}
.navLinks{display:flex;gap:14px;align-items:center;flex:1;flex-wrap:wrap}
.navLinks a{color:#fff;opacity:.95;font-weight:900;font-size:14px;padding:8px 6px}
.navLinks a:hover{opacity:1}
.chooseBtn{
border:1px solid var(--red);padding:10px 14px;border-radius:14px;font-weight:1000;color:#fff
}
.chooseBtn:hover{background:rgba(196,21,28,.15)}
@media (max-width: 900px){
.searchWrap{display:none}
.navLinks{display:none}
}
.mobile-header,
.mobile-menu,
.m-cat-dropdown {
display: none;
}
@media (max-width: 768px) {
.topbar,
.header,
.navbar {
display: none !important;
}
body {
padding-top: 176px;
}
.mobile-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #0f0f0f;
z-index: 100000;
border-bottom: 1px solid rgba(255,255,255,0.08);
display: block;
}
.mobile-header .m-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
}
.m-row1 {
justify-content: space-between;
}
.m-icon-btn {
width: 44px;
height: 44px;
border-radius: 12px;
background: #c9a23f;
border: none;
color: #111;
display: grid;
place-items: center;
font-size: 20px;
cursor: pointer;
}
.m-logo img {
height: 70px;
display: block;
}
.m-actions {
display: flex;
gap: 10px;
}
.m-action-btn {
width: 42px;
height: 42px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
text-decoration: none;
font-size: 18px;
}
.m-wa { background: #25D366; }
.m-call { background: #c9a23f; }
.m-row2 {
padding-top: 0;
}
.m-search {
flex: 1;
display: flex;
background: #fff;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.15);
}
.m-search input {
flex: 1;
border: 0;
padding: 12px 14px;
font-size: 14px;
outline: none;
}
.m-search button {
width: 54px;
border: 0;
background: #c9a23f;
color: #111;
font-size: 18px;
cursor: pointer;
}
.m-row3 {
padding-top: 0;
justify-content: space-between;
}
.m-cat-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-radius: 16px;
background: #c9a23f;
color: #111;
font-weight: 900;
border: none;
cursor: pointer;
}
.m-lang {
width: 70px;
height: 44px;
border-radius: 12px;
background: #1a1a1a;
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
padding: 0 8px;
}
.m-choose {
height: 44px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid #c9a23f;
background: #111;
color: #fff;
font-weight: 800;
text-decoration: none;
display: grid;
place-items: center;
white-space: nowrap;
}
.m-cat-dropdown {
display: none;
background: #111;
border-top: 1px solid rgba(255,255,255,0.08);
}
.m-cat-dropdown a {
display: block;
padding: 14px;
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.m-cat-dropdown.show {
display: block;
}
.mobile-menu {
position: fixed;
top: 176px;
left: 0;
right: 0;
background: #111;
z-index: 99999;
display: none;
border-top: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu.show {
display: block;
}
.mobile-menu a {
display: block;
padding: 14px;
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
}
@media (max-width: 768px) {
.mobile-header .m-row {
padding: 8px 10px;
}
.m-icon-btn {
width: 38px;
height: 38px;
font-size: 16px;
border-radius: 10px;
}
.m-logo img {
height: 50px;
}
.m-action-btn,
.mobile-icon {
width: 36px;
height: 36px;
font-size: 16px;
}
.m-search input {
padding: 10px 12px;
font-size: 14px;
}
.m-search button {
width: 44px;
font-size: 16px;
}
.m-cat-btn {
padding: 10px 12px;
font-size: 14px;
border-radius: 12px;
}
.m-lang {
height: 38px;
font-size: 14px;
}
.lang-dropdown {
position: relative;
}
.lang-btn {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #c49a3a, #b58b2e);
color: #fff;
border: none;
border-radius: 14px;
padding: 7px 14px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
}
.lang-btn img {
width: 20px;
height: 14px;
border-radius: 2px;
}
.lang-arrow {
margin-left: 4px;
transition: transform 0.2s ease;
}
.lang-dropdown:hover .lang-arrow {
transform: rotate(180deg);
}
.lang-menu {
position: absolute;
top: 115%;
right: 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 35px rgba(0,0,0,0.18);
min-width: 150px;
padding: 6px 0;
display: none;
z-index: 999;
}
.lang-menu li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
font-size: 14px;
white-space: nowrap;
}
.lang-menu li:hover {
background: #f3f3f3;
}
.lang-menu img {
width: 22px;
height: 15px;
border-radius: 2px;
}
.lang-dropdown:hover .lang-menu {
display: block;
}
.m-choose {
height: 38px;
font-size: 14px;
padding: 0 10px;
}
}
@media (max-width: 768px) {
.breadcrumbs {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
padding: 8px 12px;
background: #f6f6f6;
border-bottom: 1px solid #e0e0e0;
white-space: nowrap;
overflow-x: auto;
}
.breadcrumbs a {
color: #c9a23f;
text-decoration: none;
font-weight: 600;
}
.breadcrumbs span {
color: #666;
}
}
@media (max-width: 768px) {
.m-row3 {
gap: 8px;
flex-wrap: nowrap;
}
.m-cat-btn {
padding: 10px 12px;
font-size: 14px;
border-radius: 10px;
min-width: auto;
flex: 1;
}
.m-cat-btn i {
font-size: 14px;
}
.m-lang {
width: 60px;
height: 40px;
font-size: 13px;
border-radius: 10px;
}
.m-choose {
height: 40px;
padding: 0 10px;
font-size: 13px;
border-radius: 10px;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media (max-width: 768px) {
.navbar .catBtn,
.catBtn {
padding: 10px 14px !important;
font-size: 14px !important;
border-radius: 10px !important;
height: 42px !important;
line-height: 1.2 !important;
min-width: auto !important;
max-width: 220px !important;
white-space: nowrap !important;
}
.navbar .catBtn::before {
font-size: 14px !important;
margin-right: 6px;
}
}
@media (max-width: 360px) {
.navbar .catBtn,
.catBtn {
font-size: 13px !important;
padding: 8px 12px !important;
max-width: 200px !important;
}
}
@media (max-width: 768px) {
.chooseBtn {
display: none !important;
}
.m-choose {
display: none !important;
}
}
body.menu-open {
overflow: hidden;
}
.mobile-menu {
position: fixed;
top: 170px;
left: 0;
right: 0;
bottom: 0;
background: #111;
z-index: 99999;
display: none;
overflow-y: auto;
}
.mobile-menu.show {
display: block;
}
.fab-container,
.floating-buttons {
z-index: 5000;
}
.m-cat-dropdown.show {
display: block !important;
}
.m-cat-btn .fa-chevron-down {
transition: transform 0.3s ease;
}
body.menu-open {
overflow: hidden;
position: fixed;
width: 100%;
}
.mobile-menu.show {
display: block !important;
z-index: 100001;
}
.lang-dropdown {
position: relative;
display: inline-block;
font-family: inherit;
}
.lang-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.35);
background: linear-gradient(135deg, #c9a23f, #b58b2e);
color: #111;
font-size: 13px;
font-weight: 900;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.lang-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.lang-btn img {
width: 20px;
height: 14px;
border-radius: 2px;
object-fit: cover;
}
.lang-btn svg {
margin-left: 4px;
transition: transform 0.25s ease;
}
.lang-dropdown.open .lang-btn svg {
transform: rotate(180deg);
}
.lang-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 160px;
background: #fff;
border-radius: 14px;
box-shadow: 0 18px 45px rgba(0,0,0,0.25);
padding: 6px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.98);
transition: all 0.25s ease;
z-index: 100000;
}
.lang-dropdown.open .lang-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.lang-menu li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: 14px;
font-weight: 700;
color: #111;
cursor: pointer;
transition: background 0.2s ease;
}
.lang-menu li:hover {
background: #f4f4f4;
}
.lang-menu img {
width: 22px;
height: 15px;
border-radius: 2px;
}
body[dir="rtl"] .lang-menu {
right: auto;
left: 0;
text-align: right;
}
body[dir="rtl"] .lang-menu li {
flex-direction: row-reverse;
}
@media (max-width: 768px) {
.lang-btn {
padding: 6px 12px;
font-size: 12px;
border-radius: 12px;
}
.lang-menu {
min-width: 140px;
}
}
.hero-slider {
width: 100vw;
height: 600px;
position: relative;
overflow: hidden;
margin: 0;
}
.hero-track {
width: 100%;
height: 100%;
position: relative;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.6s ease-in-out;
}
.hero-slide.active {
opacity: 1;
z-index: 1;
}
.hero-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,.5);
border: none;
color: #fff;
font-size: 22px;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
}
.hero-arrow.prev {
left: 20px;
}
.hero-arrow.next {
right: 20px;
}
.hero-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.hero-dots .dot {
width: 10px;
height: 10px;
background: rgba(255,255,255,.5);
border-radius: 50%;
cursor: pointer;
}
.hero-dots .dot.active {
background: #fff;
}
@media (max-width: 768px) {
.hero-slider {
height: 280px;
}
}
.hero{background:#fff;border-bottom:1px solid var(--border)}
.heroBox{border-radius:22px;overflow:hidden;background:linear-gradient(120deg,#111,#222);position:relative;min-height:340px}
.heroSlide{display:none;position:absolute;inset:0}
.heroSlide.isActive{display:block}
.heroInner{
height:100%;
display:grid;
grid-template-columns: 1.2fr .8fr;
gap:18px;
padding:24px;
color:#fff;align-items:center
}
.heroBadge{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 10px;border-radius:999px;font-weight:1000;margin-bottom:10px}
.heroInner h1{margin:0 0 8px;font-size:34px;line-height:1.1}
.heroInner p{margin:0 0 14px;opacity:.9;max-width:56ch}
.heroMedia{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:14px}
.heroMedia img{border-radius:12px}
.heroNav{
position:absolute;inset:auto 12px 12px 12px;
display:flex;align-items:center;justify-content:space-between;gap:10px
}
.heroDots{display:flex;gap:8px;align-items:center}
.heroDots button{
width:10px;height:10px;border-radius:999px;border:none;cursor:pointer;
background:rgba(255,255,255,.35)
}
.heroDots button.isActive{background:#fff}
.heroPrev,.heroNext{
border:1px solid rgba(255,255,255,.25);
background:rgba(255,255,255,.08);
color:#fff;border-radius:12px;padding:8px 10px;cursor:pointer;font-weight:1000
}
@media (max-width: 900px){
.heroInner{grid-template-columns:1fr}
}
.info2col{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media (max-width: 900px){.info2col{grid-template-columns:1fr}}
.infoBox{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px}
.infoBox img{border-radius:14px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width: 900px){.tiles{grid-template-columns:1fr}}
.tile{
border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#111;position:relative;min-height:190px
}
.tile img{width:100%;height:100%;object-fit:cover;opacity:.75}
.tileOverlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.65))}
.tileOverlay h3{margin:0 0 8px}
.trustSection {
background: #fff;
}
.trustGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: center;
}
@media (max-width: 900px) {
.trustGrid {
grid-template-columns: 1fr;
}
}
.trustMedia {
position: relative;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border);
background: #000;
}
.trustCarousel img {
width: 100%;
height: 420px;
object-fit: cover;
display: none;
animation: fadeIn 0.6s ease;
}
.trustCarousel img.active {
display: block;
}
.trustCarouselNav {
position: absolute;
inset: auto 12px 12px 12px;
display: flex;
justify-content: space-between;
}
.trustCarouselNav button {
background: rgba(0,0,0,.6);
color: #fff;
border: none;
border-radius: 12px;
padding: 8px 14px;
font-size: 20px;
cursor: pointer;
}
.trustContent h2 {
font-size: 28px;
margin-bottom: 10px;
}
.trustContent h2 span {
color: var(--red);
}
.trustIntro {
color: var(--muted);
max-width: 60ch;
margin-bottom: 20px;
}
.trustCards {
display: grid;
gap: 14px;
}
.trustCard {
display: flex;
gap: 14px;
background: #f9fafb;
border: 1px solid var(--border);
border-radius: 16px;
padding: 14px;
opacity: 0;
transform: translateY(20px);
animation: slideUp 0.6s ease forwards;
}
.trustCard:nth-child(1) { animation-delay: .1s }
.trustCard:nth-child(2) { animation-delay: .2s }
.trustCard:nth-child(3) { animation-delay: .3s }
.trustCard:nth-child(4) { animation-delay: .4s }
.trustCard:nth-child(5) { animation-delay: .5s }
.trustCard .icon {
font-size: 28px;
}
.trustCard h4 {
margin: 0 0 4px;
font-size: 16px;
}
.trustCard p {
margin: 0;
font-size: 14px;
color: var(--muted);
}
@keyframes slideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0 }
to { opacity: 1 }
}
.proofSection {
background: #fff;
}
.proofTabs {
display: flex;
gap: 10px;
margin: 20px 0;
flex-wrap: wrap;
}
.proofTab {
padding: 10px 16px;
border-radius: 999px;
border: 1px solid var(--border);
background: #f3f4f6;
font-weight: 900;
cursor: pointer;
}
.proofTab.active {
background: var(--red);
color: #fff;
border-color: var(--red);
}
.proofContent {
display: none;
animation: fadeIn .4s ease;
}
.proofContent.active {
display: block;
}
.proofGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 900px) {
.proofGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.proofGrid { grid-template-columns: 1fr; }
}
.proofGrid img {
width: 100%;
border-radius: 14px;
border: 1px solid var(--border);
object-fit: cover;
}
.videoBox {
position: relative;
padding-top: 56.25%;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
}
.videoBox iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.depthWrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 900px) {
.depthWrap { grid-template-columns: 1fr; }
}
.depthTable {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: #f9fafb;
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
}
.depthTable div {
padding: 12px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
font-size: 14px;
}
.depthTable div:nth-child(3n) {
border-right: none;
}
@keyframes fadeIn {
from { opacity: 0 }
to { opacity: 1 }
}
:root {
--primary: #C49A3A;
--primary-dark: #b08a2e;
--navy: #002d6b;
--white: #ffffff;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 900px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
}
.productCard{
background:var(--card);
border:1px solid var(--border);
border-radius:18px;
overflow:hidden;
transition:.25s;
position:relative;
}
.productCard:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.12)}
.badge{
position:absolute;top:12px;left:12px;
background:var(--red);color:#fff;
padding:6px 10px;border-radius:999px;
font-size:12px;font-weight:1000;
z-index:2;
}
.pImg{background:#fff}
.pImg img{width:100%;height:240px;object-fit:contain;padding:14px}
.pBody{padding:12px;text-align:center}
.pTitle{font-size:18px;font-weight:1000;color:var(--red);margin:8px 0 6px}
.priceBar{
background:#000;color:#fff;font-weight:1000;
padding:8px;border-radius:10px;margin:10px 0
}
.pSystems{color:var(--red);font-weight:900;font-size:13px;margin:8px 0 10px}
.specRow{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
font-size:13px;color:#111;margin:8px 0 12px
}
.specBox{border-left:1px solid var(--border)}
.specBox:first-child{border-left:none}
.specBox b{display:block;margin-top:2px}
.pActions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.iconAction{
border:1px solid var(--border);
background:#fff;border-radius:12px;
padding:8px 10px;cursor:pointer;font-weight:1000
}
.iconAction:hover{border-color:#d1d5db}
.product-main {
display: grid;
grid-template-columns: 45% 55%;
gap: 30px;
}
.product-gallery {
display: flex;
gap: 12px;
}
.thumbs {
display: flex;
flex-direction: column;
gap: 10px;
}
.thumbs img {
width: 70px;
height: 70px;
object-fit: cover;
border: 2px solid #ddd;
cursor: pointer;
}
.main-image {
position: relative;
border: 1px solid #eee;
padding: 10px;
}
.main-image img {
width: 100%;
height: 420px;
object-fit: contain;
}
.zoom-btn {
position: absolute;
bottom: 10px;
right: 10px;
}
.product-info h1 {
font-size: 32px;
}
.factory-badge {
background: #002d6b;
color: #fff;
padding: 8px 12px;
border-radius: 10px;
display: inline-block;
margin: 10px 0;
}
.feature-icons {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 10px;
margin: 20px 0;
}
.feature-icons div {
background: #002d6b;
color: #fff;
padding: 12px;
border-radius: 12px;
text-align: center;
}
.trust-icons {
display: flex;
gap: 15px;
margin: 15px 0;
}
.purchase-box {
display: flex;
flex-direction: column;
gap: 12px;
}
.price {
font-size: 28px;
font-weight: bold;
}
.qty {
display: flex;
gap: 5px;
margin: 10px 0;
}
.btn-cart {
background: var(--primary);
color: #fff;
}
.btn-checkout {
background: linear-gradient(135deg, #000, #222);
color: #fff;
}
.btn-whatsapp {
background: green;
color: #fff;
padding: 14px;
width: 100%;
}
.product-info h1 {
background: var(--primary);
color: #fff;
padding: 14px 22px;
border-radius: 14px;
font-size: 28px;
margin-bottom: 14px;
}
.product-info h1 {
background: #C49A3A;
color: #fff;
padding: 14px 22px;
font-size: 22px;
border-radius: 14px;
margin-bottom: 14px;
letter-spacing: 0.5px;
}
.factory-badge {
border: 2px solid var(--primary);
color: var(--primary);
padding: 10px 16px;
border-radius: 14px;
font-weight: 700;
display: inline-block;
margin-bottom: 14px;
background: #fff;
}
.feature-icons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 22px 0;
}
.feature-icons div {
background: #002d6b;
color: #fff;
padding: 16px 10px;
border-radius: 16px;
text-align: center;
font-weight: 600;
}
.feature-icons div b {
display: block;
color: var(--primary);
font-size: 14px;
margin-bottom: 6px;
}
.feature-icons div span {
font-size: 16px;
}
.feature-icons {
gap: 12px;
}
.feature-icons > div {
padding: 8px 10px;
min-width: 80px;
border-radius: 14px;
}
.feature-icons b {
font-size: 13px;
}
.feature-icons span {
font-size: 15px;
margin-top: 4px;
}.trust-icons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 20px 0;
}
.trust-icons div {
background: #fff;
border: 2px solid var(--primary);
border-radius: 18px;
padding: 18px;
text-align: center;
font-weight: 700;
color: #002d6b;
box-shadow: 0 10px 25px rgba(0,0,0,.06);
}
.price-box {
border: 2px solid var(--primary);
border-radius: 22px;
padding: 20px;
text-align: center;
margin: 20px 0;
background: #fff;
}
.currency-tabs {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 14px;
}
.currency-tabs button {
all: unset;
cursor: pointer;
padding: 8px 18px;
border-radius: 999px;
border: 2px solid var(--primary);
font-weight: 700;
color: #002d6b;
display: flex;
align-items: center;
gap: 6px;
transition: all .25s ease;
}
.currency-tabs button img {
width: 22px;
height: auto;
border-radius: 2px;
}
.currency-tabs button.active {
background: #C49A3A;
color: #fff;
}
.currency-tabs button.active img {
filter: brightness(1.2);
}
.currency-tabs button:hover {
background: var(--primary);
color: #fff;
}
.currency-tabs button.active {
background: var(--primary);
color: #fff;
transform: scale(1.08);
}
.currency-tabs span {
border: 2px solid var(--primary);
padding: 6px 14px;
border-radius: 20px;
font-weight: 700;
color: #002d6b;
background: #fff;
}
.price {
font-size: 32px;
font-weight: 800;
}
.price span {
color: red;
}
.btn-cart {
background: var(--primary);
color: #fff;
padding: 16px;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
border: none;
}
.btn-cart:hover {
background: var(--primary-dark);
}
.btn-whatsapp {
background: #0a8f08;
color: #fff;
padding: 16px;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
}
.feature-icons div,
.trust-icons div,
.price-box {
transition: transform .35s ease, box-shadow .35s ease;
}
.feature-icons div:hover,
.trust-icons div:hover,
.price-box:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,.15);
}
.product-gallery img {
transition: transform .4s ease, box-shadow .4s ease;
}
.product-gallery img:hover {
transform: scale(1.08);
box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.thumbs img {
cursor: pointer;
border-radius: 10px;
border: 2px solid transparent;
}
.thumbs img:hover {
border-color: var(--primary);
}
.qty {
display: flex;
align-items: center;
gap: 8px;
margin: 16px 0;
}
.qty button {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-size: 20px;
border: none;
cursor: pointer;
transition: transform .2s ease, background .3s;
}
.qty button:hover {
transform: scale(1.15);
background: var(--primary-dark);
}
.qty input {
width: 70px;
text-align: center;
font-size: 16px;
border-radius: 10px;
border: 2px solid var(--primary);
padding: 6px;
}
.btn-checkout {
background: #111;
color: #fff;
padding: 16px;
border-radius: 14px;
font-size: 16px;
font-weight: 800;
border: none;
margin-top: 10px;
transition: transform .25s ease, box-shadow .25s ease;
}
.btn-checkout:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0,0,0,.25);
}
.btn-cart,
.btn-whatsapp {
transition: transform .25s ease, box-shadow .25s ease;
}
.btn-cart:hover,
.btn-whatsapp:hover {
transform: translateY(-4px);
box-shadow: 0 18px 35px rgba(0,0,0,.25);
}
.currency-tabs span {
cursor: pointer;
transition: all .3s ease;
}
.currency-tabs span:hover {
background: var(--primary);
color: #fff;
}
.currency-tabs span.active {
background: var(--primary);
color: #fff;
transform: scale(1.1);
}
.cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: stretch;
}
.cta-grid button {
transition: transform .25s ease, box-shadow .25s ease;
}
.cta-grid button:hover {
transform: translateY(-3px);
box-shadow: 0 18px 35px rgba(0,0,0,.25);
}
@media (max-width: 640px) {
.cta-grid {
grid-template-columns: 1fr;
}
}
.cta-grid button {
height: 58px;
padding: 0;
line-height: 58px;
border-radius: 18px;
font-size: 16px;
font-weight: 800;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
@media (max-width: 640px) {
.cta-grid {
grid-template-columns: 1fr;
}
}
.cta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
width: 100%;
}
.cta-grid button {
all: unset;
height: 60px;
width: 100%;
border-radius: 20px;
font-size: 16px;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
transition: transform .25s ease, box-shadow .25s ease;
}
.cta-grid .btn-cart {
background: var(--primary);
color: #fff;
}
.cta-grid .btn-checkout {
background: linear-gradient(135deg, #000, #222);
color: #fff;
}
.cta-grid button:hover {
transform: translateY(-3px);
box-shadow: 0 18px 35px rgba(0,0,0,.28);
}
@media (max-width: 640px) {
.cta-grid {
grid-template-columns: 1fr;
}
}
.product-trust-share{
margin-top:40px;
padding:24px;
border:1px solid #2a5bd7;
border-radius:18px;
background:#fff;
}
.trust-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
}
.trust-box h3{
color:#C49A3A;
font-weight:700;
margin-bottom:12px;
display:flex;
align-items:center;
gap:8px;
}
.logo-row{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.logo-row img{
height:34px;
padding:6px 10px;
border:1px solid #ddd;
border-radius:10px;
background:#fff;
transition:.3s;
}
.logo-row img:hover{
transform:translateY(-4px) scale(1.05);
box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.ssl-badge{
display:flex;
align-items:center;
gap:10px;
margin-top:14px;
font-weight:600;
}
.meta-row{
margin-top:20px;
padding:14px;
border:1px solid #2a5bd7;
border-radius:14px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:12px;
}
.meta-row a{
color:#2a5bd7;
font-weight:600;
}
.meta-actions button{
background:none;
border:none;
font-weight:600;
cursor:pointer;
}
.share-row{
margin-top:16px;
display:flex;
justify-content:center;
gap:10px;
align-items:center;
}
.share-row a{
width:36px;
height:36px;
border-radius:50%;
background:#eee;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:.3s;
}
.share-row a:hover{
background:#C49A3A;
color:#fff;
}
.lazy-section{
opacity:0;
transform:translateY(40px);
transition:1s;
}
.lazy-section.visible{
opacity:1;
transform:none;
}
@media(max-width:768px){
.trust-row{
grid-template-columns:1fr;
}
}
.lazy-section{
opacity:0;
transform:translateY(40px);
transition:1s;
}
.lazy-section.visible{
opacity:1;
transform:none;
}
@media(max-width:768px){
.trust-row{
grid-template-columns:1fr;
}
}
.lazy-section {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s ease;
}
.lazy-section.visible {
opacity: 1;
transform: translateY(0);
}
.product-trust-share .logo-row img {
height: 36px;
width: auto;
object-fit: contain;
}
.product-trust-share .logo-row.payment img {
height: 34px;
}
.product-trust-share .secure-illustration img {
max-height: 240px;
width: auto;
object-fit: contain;
}
.product-trust-share .ssl-badge img {
height: 56px;
width: auto;
object-fit: contain;
}
.product-trust-share .ssl-badge {
margin-top: 12px;
}
.product-trust-share .trust-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.ssl-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.ssl-header img {
height: 48px;
width: auto;
flex-shrink: 0;
}
.ssl-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.ssl-title {
font-size: 18px;
font-weight: 700;
color: #C49A3A;
}
.ssl-sub {
font-size: 14px;
font-weight: 600;
color: #555;
}
@media (max-width: 768px) {
.cta-grid {
grid-template-columns: 1fr;
}
.btn-cart,
.btn-checkout,
.btn-whatsapp {
width: 100%;
height: 46px;
font-size: 14px;
}
.qty {
justify-content: center;
}
.qty button {
width: 34px;
height: 34px;
}
.qty input {
width: 56px;
height: 34px;
}
}
@media (max-width: 768px) {
.product-trust-share .logo-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
justify-items: center;
}
.product-trust-share .logo-row img {
height: 28px;
padding: 6px;
max-width: 100%;
}
.product-trust-share .logo-row.payment {
grid-template-columns: repeat(3, 1fr);
}
.product-trust-share {
padding: 16px;
}
.trust-row {
gap: 20px;
}
}
@media (max-width: 768px) {
.product-main {
grid-template-columns: 1fr;
gap: 20px;
}
.product-gallery {
flex-direction: row;
justify-content: center;
}
.thumbs {
flex-direction: row;
justify-content: center;
}
.thumbs img {
width: 56px;
height: 56px;
}
.main-image img {
height: 260px;
}
}
@media (max-width: 768px) {
.currency-tabs {
flex-wrap: wrap;
gap: 8px;
}
.currency-tabs button {
padding: 6px 12px;
font-size: 13px;
}
.currency-tabs button img {
width: 18px;
}
.price {
font-size: 24px;
}
}
@media (max-width: 768px) {
.cta-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.cta-grid button {
height: 44px;
font-size: 14px;
border-radius: 14px;
}
.btn-whatsapp {
height: 44px;
font-size: 14px;
padding: 0;
}
.qty {
justify-content: center;
}
}
@media (max-width: 768px) {
.product-trust-share {
padding: 16px;
}
.logo-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
justify-items: center;
}
.logo-row img {
height: 26px;
}
.share-row {
gap: 8px;
}
.share-row a {
width: 32px;
height: 32px;
}
}
@media (max-width: 768px) {
.product-main {
grid-template-columns: 1fr;
gap: 18px;
}
.product-gallery {
flex-direction: column;
align-items: center;
}
.thumbs {
flex-direction: row;
justify-content: center;
gap: 8px;
order: 2;
}
.thumbs img {
width: 54px;
height: 54px;
}
.main-image img {
height: 260px;
}
.product-info h1 {
font-size: 18px;
padding: 10px 14px;
border-radius: 12px;
text-align: center;
}
.factory-badge {
font-size: 13px;
padding: 6px 12px;
}
.short-desc {
font-size: 14px;
line-height: 1.5;
}
.feature-icons {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 16px 0;
}
.feature-icons > div {
padding: 8px;
border-radius: 12px;
}
.feature-icons b {
font-size: 12px;
}
.feature-icons span {
font-size: 14px;
}
.info-block {
font-size: 14px;
line-height: 1.4;
}
.trust-icons {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.trust-icons div {
padding: 12px;
font-size: 13px;
border-radius: 14px;
}
.price-box {
padding: 14px;
border-radius: 18px;
}
.currency-tabs {
flex-wrap: wrap;
gap: 8px;
}
.currency-tabs button {
padding: 6px 12px;
font-size: 13px;
}
.currency-tabs button img {
width: 18px;
}
.price {
font-size: 22px;
}
.qty {
justify-content: center;
gap: 6px;
}
.qty button {
width: 30px;
height: 30px;
font-size: 16px;
}
.qty input {
width: 48px;
height: 30px;
font-size: 14px;
}
.cta-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.cta-grid button {
height: 44px;
font-size: 14px;
border-radius: 14px;
}
.btn-whatsapp {
height: 44px;
font-size: 14px;
padding: 0;
}
.product-trust-share {
padding: 16px;
margin-top: 28px;
}
.trust-row {
grid-template-columns: 1fr;
gap: 20px;
}
.logo-row img {
height: 28px;
}
.ssl-header img {
height: 36px;
}
.ssl-title {
font-size: 16px;
}
.ssl-sub {
font-size: 13px;
}
}
@media (max-width: 768px) {
.product-trust-share {
padding: 16px 12px;
border-radius: 16px;
overflow: hidden;
}
.product-trust-share .trust-row {
grid-template-columns: 1fr;
gap: 24px;
}
.trust-box h3 {
justify-content: center;
text-align: center;
font-size: 16px;
}
.logo-row {
justify-content: center;
gap: 10px;
}
.logo-row img {
height: 26px;
padding: 6px;
}
.logo-row.payment {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
justify-items: center;
}
.logo-row.payment img {
height: 28px;
}
.ssl-header {
justify-content: center;
text-align: center;
}
.ssl-text {
align-items: center;
}
.ssl-title {
font-size: 15px;
}
.ssl-sub {
font-size: 13px;
}
.product-trust-share * {
max-width: 100%;
box-sizing: border-box;
}
}
.share-row a {
font-size: 16px;
color: #555;
}
.share-row a:hover {
color: #fff;
}
.share-row a:nth-child(2):hover { background:#1877f2; }
.share-row a:nth-child(3):hover { background:#000; }
.share-row a:nth-child(4):hover { background:#e60023; }
.share-row a:nth-child(5):hover { background:#0a66c2; }
.share-row a:nth-child(6):hover { background:#25d366; }
.cta-grid button,
.btn-whatsapp {
height: 44px;
font-size: 14px;
font-weight: 700;
border-radius: 14px;
}
.cta-grid button {
padding: 0 14px;
}
.btn-whatsapp {
margin-top: 6px;
}
.qty {
margin: 10px 0 6px;
}
@media (max-width: 768px) {
.cta-grid {
gap: 10px;
}
.cta-grid button,
.btn-whatsapp {
height: 40px;
font-size: 13px;
border-radius: 12px;
}
.qty button {
width: 30px;
height: 30px;
font-size: 16px;
}
.qty input {
width: 48px;
height: 30px;
font-size: 14px;
}
}
@media (max-width: 420px) {
.cta-grid button,
.btn-whatsapp {
height: 38px;
font-size: 12.5px;
}
}
.product-trust-share {
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
.product-image-box {
position: relative;
width: 100%;
display: flex;
justify-content: center;
padding-top: 50px;
}
.product-image-box img {
width: 100%;
max-width: 280px;
height: auto;
display: block;
}
.product-badge {
position: absolute;
top: 10px;
left: 15px;
background: #c49a3a;
color: #fff;
font-weight: 700;
font-size: 13px;
padding: 6px 14px;
border-radius: 20px;
z-index: 10;
}
.footer {
background: #0f0f10;
color: #fff;
margin-top: 26px;
width: 100%;
}
.footer .container {
padding: 24px 16px;
}
.footerGrid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 16px;
}
@media (max-width: 1000px) {
.footerGrid {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
}
@media (max-width: 600px) {
.footerGrid {
grid-template-columns: 1fr;
gap: 18px;
text-align: center;
}
}
.footer h4 {
margin: 0 0 10px;
font-size: 15px;
}
.footer a {
color: #fff;
opacity: 0.9;
text-decoration: none;
}
.footer a:hover {
opacity: 1;
}
.footerList {
display: grid;
gap: 8px;
color: #cbd5e1;
font-size: 14px;
}
@media (max-width: 600px) {
.footerList {
justify-items: center;
}
}
.footerBottom {
border-top: 1px solid rgba(255,255,255,.12);
margin-top: 18px;
padding-top: 16px;
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
font-size: 13px;
}
@media (max-width: 768px) {
.footerBottom {
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
}
.newsletter {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.newsletter input {
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
color: #fff;
outline: none;
min-width: 200px;
}
@media (max-width: 600px) {
.newsletter {
justify-content: center;
}
.newsletter input {
width: 100%;
max-width: 260px;
}
}
.payments {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.pay {
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
border-radius: 12px;
padding: 8px 10px;
font-weight: 700;
font-size: 12px;
white-space: nowrap;
}
.floatBtns {
position: fixed;
right: 14px;
bottom: 14px;
display: grid;
gap: 10px;
z-index: 999;
}
.floatBtn {
background: #25D366;
color: #fff;
border: none;
border-radius: 999px;
padding: 12px 14px;
font-weight: 700;
cursor: pointer;
}
.floatBtn.call {
background: var(--red);
}
.toTop {
background: #111;
border: 1px solid rgba(255,255,255,.15);
color: #fff;
border-radius: 999px;
padding: 10px 12px;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 600px) {
.floatBtn,
.toTop {
padding: 10px 12px;
font-size: 13px;
}
}
.currency-dropdown {
position: relative;
display: inline-block;
z-index: 100000;
font-family: inherit;
}
.currency-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: linear-gradient(135deg, #c49a3a, #b68a2e);
border: none;
border-radius: 20px;
cursor: pointer;
font-weight: 600;
color: #ffffff;
transition: all 0.25s ease;
}
.currency-btn:hover {
background: linear-gradient(135deg, #d4aa4a, #c49a3a);
transform: translateY(-1px);
}
.currency-menu {
position: absolute;
top: 130%;
left: 0;
min-width: 180px;
background: #ffffff;
border-radius: 12px;
padding: 8px 0;
list-style: none;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.97);
transition: all 0.25s ease;
}
.currency-menu[style*="block"] {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.currency-menu li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
font-size: 14px;
font-weight: 500;
color: #333;
cursor: pointer;
transition: all 0.2s ease;
}
.currency-menu li:hover {
background: linear-gradient(90deg, #f6f2e8, #ffffff);
color: #c49a3a;
padding-left: 22px;
}
.currency-menu li.active {
background: #f6f2e8;
color: #c49a3a;
font-weight: 600;
}
.flag {
width: 22px;
height: 16px;
display: inline-block;
background-size: cover;
background-position: center;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.flag-us { background-image: url("https://flagcdn.com/w20/us.png"); }
.flag-eu { background-image: url("https://flagcdn.com/w20/eu.png"); }
.flag-sa { background-image: url("https://flagcdn.com/w20/sa.png"); }
.flag-ae { background-image: url("https://flagcdn.com/w20/ae.png"); }
.flag-zm { background-image: url("https://flagcdn.com/w20/zm.png"); }
.flag-gb { background-image: url("https://flagcdn.com/w20/gb.png"); }
.currency-menu li:not(:last-child) {
border-bottom: 1px solid #f0f0f0;
}
.top-header,
.header,
.navbar {
overflow: visible !important;
}
.fab-container {
position: fixed;
inset: 0;
z-index: 999999;
pointer-events: none;
}
.fab-top {
position: fixed;
left: 12px;
bottom: 96px;
width: 48px;
height: 48px;
border-radius: 50%;
background: #d4af37;
color: #000;
border: none;
font-size: 18px;
cursor: pointer;
pointer-events: auto;
opacity: 0;
transform: translateY(16px);
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.fab-top.show {
opacity: 1;
transform: translateY(0);
}
.fab-right {
position: fixed;
right: 12px;
bottom: 96px;
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: auto;
}
.fab-btn {
width: 56px;
height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
box-shadow: 0 8px 20px rgba(0,0,0,0.35);
transition: transform 0.25s ease;
}
.fab-whatsapp {
background: #25D366;
}
.fab-whatsapp img {
width: 32px;
height: 32px;
}
.fab-call {
background: #d4af37;
color: #000;
font-size: 20px;
}
@media (max-width: 360px) {
.fab-right {
right: 8px;
bottom: 88px;
gap: 10px;
}
.fab-btn {
width: 50px;
height: 50px;
}
.fab-whatsapp img {
width: 28px;
height: 28px;
}
.fab-top {
left: 8px;
bottom: 88px;
width: 44px;
height: 44px;
font-size: 16px;
}
}
.fab-btn,
.fab-top {
animation: floatIdle 3.5s ease-in-out infinite;
}
.fab-btn:hover,
.fab-top:hover {
animation-play-state: paused;
}
.fab-whatsapp {
animation:
floatIdle 3.5s ease-in-out infinite,
whatsappPulse 2.2s infinite;
}
.fab-call {
animation:
floatIdle 3.5s ease-in-out infinite,
callWiggle 4s ease-in-out infinite;
}
.fab-top.show {
animation:
scrollBounce 0.6s ease-out,
floatIdle 3.5s ease-in-out infinite;
}
@keyframes floatIdle {
0%   { transform: translateY(0); }
50%  { transform: translateY(-6px); }
100% { transform: translateY(0); }
}
@keyframes whatsappPulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
}
70% {
box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
@keyframes callWiggle {
0%, 90%, 100% {
transform: rotate(0deg);
}
92% {
transform: rotate(6deg);
}
94% {
transform: rotate(-6deg);
}
96% {
transform: rotate(4deg);
}
98% {
transform: rotate(-4deg);
}
}
@keyframes scrollBounce {
0%   { transform: translateY(20px); opacity: 0; }
60%  { transform: translateY(-6px); opacity: 1; }
100% { transform: translateY(0); }
}
@media (max-width: 768px) {
.fab-right {
right: 10px !important;
bottom: 90px !important;
}
.fab-top {
left: 10px !important;
bottom: 90px !important;
background: #c9a23f !important;
}
}
.proofGrid img{
display:block;
width:100%;
aspect-ratio:1/1;
height:auto;
object-fit:cover;
background:#f1f5f9;
}
.proofGrid{align-items:start}
.info2col{align-items:stretch}
.infoBox{display:flex;flex-direction:column;justify-content:center}
.infoBox img{
display:block;
width:100%;
height:100%;
min-height:260px;
max-height:420px;
object-fit:cover;
border-radius:14px;
}
.infoBox iframe{display:block;width:100%;border:0;border-radius:14px;min-height:320px}
@media (max-width:900px){
.infoBox img{min-height:200px;max-height:280px}
.infoBox iframe{min-height:260px}
}