@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}   

:root{
--bg-1: #1c1b1b;
--accent: #e64a7a;
--card-bg: #fff;
--muted: #7b7b7b;
}
h1,h2,h3,h4,h5,h6{
font-family: "Exo 2", sans-serif;
}
p, a, span{
font-family: "Exo 2", sans-serif;
}
.bannersection {
padding-top:5px;
padding-bottom: 1px;
background:
radial-gradient(circle at 50% 5%, rgba(105, 60, 238, 0.12) 0%, rgba(143, 111, 240, 0.04) 30%),
linear-gradient(155deg,   #ffffff 20%, 
#b6fadfff 50%, 
#ffffff 80%);

-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color: #111;
}

.container-section {
max-width: 1180px;
margin: 5px auto;
padding: 0 20px;
}
/* faq */
.faqsection{
margin:0;
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
background: radial-gradient(1000px 600px at 15% 20%, rgba(230,74,122,0.08), transparent 10%),
linear-gradient(120deg,#3b2b2b 0%, #2b2b2b 30%, #121212 100%);
min-height:100vh;
color:#111;
padding:40px 24px;
display:flex;
align-items:center;
justify-content:center;
}
.faqx-section{
background:#121212;
min-height:100vh;
padding: 60px 20px;
display:flex;
justify-content:center;
align-items:center;
font-family:Poppins, sans-serif;
}

.faqx-wrap{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
max-width: 1100px;
width: 100%;
margin: 0 auto;  
margin-top: -50px;
}


.faqx-hero-image img{
width:100%;
border-radius:20px;
height: 31rem;
}

.faqx-card{
background:#fff;
/* padding:20px; */
padding: 10px 20px;
border-radius:16px;
position:relative;
margin-bottom:16px;
transition:.3s;

}

.faqx-lead{
color:#666;
font-size:12px;
}

.faqx-extra{
max-height:0;
overflow:hidden;
transition:.3s;
color:#333;
}

.faqx-card.faqx-open .faqx-extra{
max-height:200px;
margin-top:10px;
}

.faqx-toggle-btn{
position:absolute;
right:20px;
bottom:50px;
width:48px;
height:48px;
border:none;
border-radius:50%;
background:#000;
color:#fff;
font-size:20px;
cursor:pointer;
}
.faqx-content{
margin-left: 60px;
margin-top: -35px;
/* margin-bottom: 10px; */
}
/* TOP CATEGORY SLIDER */
.top-cats {
position: relative;
margin-bottom: 22px;
}

/* external nav buttons */
.cat-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
display: flex;
gap: 12px;
pointer-events: none;
}
.cat-nav .btn {
pointer-events: auto;
width: 40px;
height: 40px;
border-radius: 50%;
border: 0;
box-shadow: 0 6px 18px rgba(23,35,48,0.12);
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.9));
backdrop-filter: blur(6px);
color: #222;

}

/* left/right placement */
.cat-nav-left { left: -18px; }
.cat-nav-right { right: -18px; }

.owl-carousel .owl-stage-outer { padding-left: 8px; padding-right: 8px; }

.cat-card {
margin: 0px 15px 0px 0px;
display: flex;
align-items: center;
gap: 12px;
min-width: 170px;
padding: 5px 14px;
border-radius: 4px;
background: linear-gradient(180deg,#ffffff,#fbfdff);
border: 1px solid #D5D5D6;
box-shadow: 0 6px 18px rgba(11,20,30,0.04);
transition: transform .25s ease, box-shadow .25s ease;
}
.cat-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 26px rgba(11,20,30,0.08);
}
.cat-thumb {
width: 48px;
height: 48px;
border-radius: 8px;
overflow: hidden;
display:flex;
align-items:center;
justify-content:center;
flex: 0 0 48px;
}
.cat-thumb img { width: 46px; height: 60px; object-fit:contain; }

.cat-title {
font-size: 14.5px;
color:#111;
font-weight:600;
}

/* responsive adjustments */
@media (max-width: 575px) {
.cat-nav-left { left: -6px; }
.cat-nav-right { right: -6px; }
.cat-card { min-width: 140px; padding: 10px; }
}

/* -------------------------
BANNER SLIDER
------------------------- */
.banner-wrap {
position: relative;
margin-bottom: 28px;
}
 .imgnew{
  max-width: 100%;
    height: 400px;
 }
.banner-item {
margin: 0px 15px 0px 0px;
border-radius: 12px;
overflow: visible;
position: relative;
padding: 0;
}

.banner-inner {
display: flex;
align-items: center;
gap: 20px;
min-height: 360px;
border-radius: 12px;
padding: 28px;
position: relative;
overflow: hidden;
background: linear-gradient(90deg,#03220f 0%, #0b4b2b 55%, #0b4b2b 100%);
color: #fff;
}

.banner-text {
max-width: 52%;
z-index: 2;
}
.banner-text h1 {
margin: 0;
font-size: 42px;
line-height: 1.05;
letter-spacing: -0.6px;
color: #c78a66; /* copper-ish */
font-weight: 800;
text-transform: uppercase;
}
.banner-text p.lead {
margin-top: 12px;
margin-bottom: 18px;
color: rgba(255,255,255,0.95);
font-size: 16px;
}
.banner-text .price {
font-weight: 700;
margin-top: 8px;
color: rgba(255,255,255,0.95);
}
.banner-cta {
margin-top: 16px;
}
.banner-cta .btn {
border-radius: 32px;
padding: 10px 24px;
font-weight:700;
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* right side product art */
.banner-art {
position: absolute;
right: 28px;
bottom: 10px;
width: 46%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
pointer-events: none;
}
.art-stack {
position: relative;
width: 380px;
max-width: 48%;
}
.art-stack .big {
width: 220px;
transform: translateX(30px) rotate(-6deg);
filter: drop-shadow(0 14px 30px rgba(0,0,0,0.45));
border-radius: 8px;
background: #111;
height: 220px;
}
.art-stack .small {
width: 120px;
height: 120px;
position: absolute;
top: 18%;
right: -10%;
transform: rotate(-6deg);
border-radius: 12px;
background: #222;
filter: drop-shadow(0 12px 20px rgba(0,0,0,0.35));
}

/* banner nav (right side) */
.banner-nav #bannerNext {
position: absolute;
right: -1%;
top: 45%;
z-index: 30;
display: flex;
flex-direction: column;
gap: 14px;
}
.banner-nav #bannerPrev {
position: absolute;
left: -1%;
top: 45%;
z-index: 30;
display: flex;
flex-direction: column;
gap: 14px;
}
.banner-nav button {
width: 40px;
height: 40px;
border-radius: 50%;
border: 0;
background: rgba(255,255,255,0.92);
box-shadow: 0 10px 30px rgba(7,15,30,0.12);
display:flex;
align-items:center;
justify-content:center;
color: #222;
}

/* -------------------------
PRODUCT CARDS (bottom)
------------------------- */
.cards-row .card {
border-radius: 4px;
border: 1px solid #D5D5D6;
box-shadow: 0 10px 26px rgba(11,18,28,0.03);
overflow: hidden;
min-height: 170px;
}
.cards-row .card-body { display:flex; align-items:center; justify-content:space-between; gap: 14px; }
.product-meta small { color:#1b6df0; font-weight:600; display:block; margin-bottom:6px; }
.product-meta h5 { margin:0; font-size: 19px; font-weight:700; color:#0b1720; }
.product-thumb { width:130px; height:150px; border-radius:10px; display:flex; align-items:center; justify-content:center; }

@media (max-width: 991px) {
.banner-text { max-width: 60%; }
.art-stack { width: 300px; }
.banner-inner { min-height: 300px; padding: 22px; }
}
@media (max-width: 768px) {
.banner-text { max-width: 100%; }
.banner-cta { margin-bottom: 8px; }
.banner-art { position: relative; width: 100%; height: 150px; right: auto; bottom: auto; justify-content: center; margin-top: 12px; }
.art-stack { width: 260px; }
.cat-card { min-width: 140px; }
.cat-nav-left, .cat-nav-right { display: none; } /* small screens: let swipe handle */
}
.best-section {
padding: 50px 0;
}
.best-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.best-header h2 {
font-size: 26px;
font-weight: 500;
}
.best-nav{
margin-bottom: 15px;
}
.best-header .line {
flex: 1;
height: 1px;
background: #ccc;
margin: 0 70px;
}
.best-nav button {
border: none;
background: #fff;
font-size: 44px;
cursor: pointer;
}

.best-card {
border-right: 1px solid #ddd;
text-align: center;
padding: 15px;
background: #fff;
height: 100%;
}
.best-card img {
width: 100%;
max-height: 125px;
object-fit: contain;
}
.best-discount {
position: absolute;
top: 10px;
left: 10px;
background: #009688;
color: #fff;
padding: 3px 8px;
border-radius: 5px;
font-size: 12px;
font-weight: bold;
}
.best-type {
font-size: 12px;
color: #666;
margin-top: 10px;
}
.best-name {
font-size: 14px;
font-weight: 500;
margin: 5px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.best-price {
font-size: 14px;
}
.best-price del {
color: #999;
margin-right: 5px;
}
.best-price span {
font-weight: bold;
color: #111;
}

/* Responsive */
@media (max-width: 768px) {
.best-card img {
max-height: 100px;
}
.best-header h2 {
font-size: 20px;
}
}

.wrap{
width:100%;
max-width:1180px;
display:grid;
grid-template-columns: 1fr 620px;
gap:28px;
align-items:start;
}

/* Left image card */
.image-card{
background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15));
border-radius:10px;
padding:28px;
position:relative;
min-height:560px;
display:flex;
align-items:flex-start;
justify-content:flex-start;
}

.image-card .decor{
position:absolute;
top:-10px;
left:-10px;
width:140px;
height:140px;
pointer-events:none;
}
.image-card .decor::before{
content:"";
position:absolute;
width:62px;height:62px;border-radius:50%;background:var(--accent);transform:translate(18px,12px);
}
.image-card .decor::after{
content:"";
position:absolute;left:22px;top:22px;width:120px;height:120px;border-radius:50%;
box-shadow: 0 0 0 22px rgba(0,0,0,0.18) inset, 0 0 0 6px rgba(0,0,0,0.12) inset;
border-left:18px solid rgba(0,0,0,0.12);
}

.hero-image{
width:100%;
height:100%;
border-radius:8px;
overflow:hidden;
box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}
.hero-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* Right cards */
.cards{
display:flex;
flex-direction:column;
gap:18px;
align-self:stretch;
}

.card{
background:var(--card-bg);
border-radius:10px;
padding: 0px 20px;
display:grid;
grid-template-columns:56px 1fr 56px;
gap:18px;
align-items:start;
box-shadow: 0 8px 0 rgba(0,0,0,0.06);
border-left:6px solid rgba(0,0,0,0.03);
}

.card .icon-wrap {
width: 40px;
height: 50px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}

.card h3{
margin:0 0 6px 0;font-size:18px;font-weight:600;
}
.card p.lead{margin:0;color:var(--muted);font-size:13px}

.circle-btn{
width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;border:none;cursor:pointer;flex-shrink:0;
box-shadow:0 6px 14px rgba(0,0,0,0.25);
transition:transform .18s ease;
}
.circle-btn:active{transform:scale(.96)}

/* Expanded content */
.extra{display:none;margin-top:12px;color:#666;font-size:13px;line-height:1.6}
.card.open .extra{display:block}

/* smaller styles */
.card .icon svg{width:28px;height:28px}

/* Deals */
.deals{
margin:0;
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
background: radial-gradient(1000px 600px at 15% 20%, rgba(230,74,122,0.08), transparent 10%), linear-gradient(120deg,#AF4CA4 0%,#1E3544, #2777B9 100%);
min-height: 50vh;
color:#111;
padding:40px 24px;
}    
/* Secondary deals section */
.deals-secondary {
padding: 30px 0;
}

/* Carousel spacing */
.category-carousel-secondary .owl-item {
padding: 0 4px;
}

/* Image style */
.category-carousel-secondary img {

object-fit: contain;
border-radius: 14px;
background: #fff;

}

/* Navigation buttons */
.btn-secondary-nav {
background: rgba(255,255,255,0.2);
border: none;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
}

.btn-secondary-nav:hover {
background: rgba(255,255,255,0.35);
}

/* Nav positioning */
.cat-nav-secondary-left {
left: 10px;
}

.cat-nav-secondary-right {
right: 10px;
}
/* ONLY second carousel buttons */
.cat-nav-secondary {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
}

.cat-nav-secondary-left { left: 10px; }
.cat-nav-secondary-right { right: 10px; }

.btn-secondary-nav {
background: #64646F59;
border: none;
color: black;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-left: -13px;
margin-right: -26px;
}

.btn-secondary-nav:hover {
background: rgba(255,255,255,0.35);
}


@media (max-width:980px){
.wrap{grid-template-columns:1fr;}
.image-card{min-height:320px;padding:18px}
.cards{margin-top:6px}
.card{grid-template-columns:48px 1fr 48px;padding:16px}
.circle-btn{width:44px;height:44px}
}

@media (max-width:520px){
body{padding:20px}
.image-card{min-height:240px}
.card h3{font-size:16px}
}
/* <!-- Stay Powered Up --> */
.power-carousel .owl-stage-outer {
overflow: visible;
}
.power-carousel .item {
padding-right: 5px;
}

.power-section {
padding: 50px 0;
}

.power-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.power-header h2 {
font-size: 26px;
font-weight: 500;
}

.power-nav {
margin-bottom: 15px;
}

.power-header .power-line {
flex: 1;
height: 1px;
background: #ccc;
margin: 0 70px;
}

.power-nav button {
border: none;
background: #fff;
font-size: 44px;
cursor: pointer;
}

/* Card */
.power-card {
border-right: 1px solid #ddd;
text-align: center;
padding: 15px;
background: #fff;
height: 100%;
position: relative;
}

.power-card img {
width: 100%;
max-height: 125px;
object-fit: contain;
}

/* Discount badge */
.power-discount {
position: absolute;
top: 10px;
left: 10px;
background: #009688;
color: #fff;
padding: 3px 8px;
border-radius: 5px;
font-size: 12px;
font-weight: bold;
}

/* Meta text */
.power-type {
font-size: 12px;
color: #666;
margin-top: 10px;
}

.power-name {
font-size: 14px;
font-weight: 500;
margin: 5px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.power-price {
font-size: 14px;
}

.power-price del {
color: #999;
margin-right: 5px;
}

.power-price span {
font-weight: bold;
color: #111;
}

/* Owl spacing (only for power carousel) */
.power-carousel .owl-stage-outer {
padding-left: 8px;
padding-right: 8px;
}

/* Responsive */
@media (max-width: 768px) {
.power-card img {
max-height: 100px;
}

.power-header h2 {
font-size: 20px;
}

.power-header .power-line {
margin: 0 30px;
}
}
/*  
FEATURED DEALS SECTION
*/
.featured-carousel .item {
padding-right: 5px;
}
.featured-section {
padding: 50px 0;
}

.featured-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.featured-header h2 {
font-size: 26px;
font-weight: 500;
}

.featured-nav {
margin-bottom: 15px;
}

.featured-line {
flex: 1;
height: 1px;
background: #ccc;
margin: 0 70px;
}

.featured-nav button {
border: none;
background: #fff;
font-size: 44px;
cursor: pointer;
}

.featured-card {
border-right: 1px solid #ddd;
text-align: center;
padding: 15px;
background: #fff;
height: 100%;
position: relative;
}

.featured-card img {
width: 100%;
max-height: 125px;
object-fit: contain;
}

.featured-discount {
position: absolute;
top: 10px;
left: 10px;
background: #009688;
color: #fff;
padding: 3px 8px;
border-radius: 5px;
font-size: 12px;
font-weight: bold;
}

.featured-type {
font-size: 12px;
color: #666;
margin-top: 10px;
}

.featured-name {
font-size: 14px;
font-weight: 500;
margin: 5px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.featured-price {
font-size: 14px;
}

.featured-price del {
color: #999;
margin-right: 5px;
}

.featured-price span {
font-weight: bold;
color: #111;
}

.featured-carousel .owl-stage-outer {
padding-left: 8px;
padding-right: 8px;
}


@media (max-width: 768px) {
.featured-card img {
max-height: 100px;
}

.featured-header h2 {
font-size: 20px;
}

.featured-line {
margin: 0 30px;
}
}

/* <!-- Top Speaker --> */

.speaker-section {
padding: 50px 0;
}

.speaker-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.speaker-header h2 {
font-size: 26px;
font-weight: 500;
}

.speaker-nav {
margin-bottom: 15px;
}

.speaker-line {
flex: 1;
height: 1px;
background: #ccc;
margin: 0 70px;
}

.speaker-nav button {
border: none;
background: #fff;
font-size: 44px;
cursor: pointer;
}

.speaker-card {
border-right: 1px solid #ddd;
text-align: center;
padding: 15px;
background: #fff;
height: 100%;
position: relative;
}

.speaker-card img {
width: 100%;
max-height: 125px;
object-fit: contain;
}

.speaker-discount {
position: absolute;
top: 10px;
left: 10px;
background: #009688;
color: #fff;
padding: 3px 8px;
border-radius: 5px;
font-size: 12px;
font-weight: bold;
}

.speaker-type {
font-size: 12px;
color: #666;
margin-top: 10px;
}

.speaker-name {
font-size: 14px;
font-weight: 500;
margin: 5px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.speaker-price {
font-size: 14px;
}

.speaker-price del {
color: #999;
margin-right: 5px;
}

.speaker-price span {
font-weight: bold;
color: #111;
}

.speaker-carousel .owl-stage-outer {
padding-left: 8px;
padding-right: 8px;
}

@media (max-width: 768px) {
.speaker-card img {
max-height: 100px;
}

.speaker-header h2 {
font-size: 20px;
}

.speaker-line {
margin: 0 30px;
}
}
.speaker-carousel .owl-stage-outer {
overflow: visible;
}
.speaker-carousel .item {
padding-right: 5px;
}

/* <!-- Best Gadgets --> */
.gadget-section {
padding: 50px 0;
}

.gadget-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.gadget-header h2 {
font-size: 26px;
font-weight: 500;
}

.gadget-line {
flex: 1;
height: 1px;
background: #ccc;
margin: 0 70px;
}

.gadget-nav button {
border: none;
background: #fff;
font-size: 44px;
cursor: pointer;
}

.gadget-card {
border-right: 1px solid #ddd;
text-align: center;
padding: 15px;
background: #fff;
height: 100%;
position: relative;
}

.gadget-card img {
width: 100%;
max-height: 125px;
object-fit: contain;
}

.gadget-discount {
position: absolute;
top: 10px;
left: 10px;
background: #009688;
color: #fff;
padding: 3px 8px;
border-radius: 5px;
font-size: 12px;
font-weight: bold;
}

.gadget-type {
font-size: 12px;
color: #666;
margin-top: 10px;
}

.gadget-name {
font-size: 14px;
font-weight: 500;
margin: 5px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.gadget-price {
font-size: 14px;
}

.gadget-price del {
color: #999;
margin-right: 5px;
}

.gadget-price span {
font-weight: bold;
color: #111;
}

.gadget-carousel .owl-stage-outer {
padding-left: 8px;
padding-right: 8px;
}

@media (max-width: 768px) {
.gadget-card img {
max-height: 100px;
}

.gadget-header h2 {
font-size: 20px;
}

.gadget-line {
margin: 0 30px;
}
}
.gadget-carousel .owl-stage-outer {
overflow: visible;
}
.gadget-carousel .item {
padding-right: 5px;
}

/* <!-- Top Products --> */
.topprod-carousel .owl-stage-outer {
overflow: visible;
}
.topprod-carousel .item {
padding-right: 5px;
}

.topprod-section {
padding: 50px 0;
}

.topprod-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}

.topprod-header h2 {
font-size: 26px;
font-weight: 500;
}

.topprod-line {
flex: 1;
height: 1px;
background: #ccc;
margin: 0 70px;
}

.topprod-nav button {
border: none;
background: #fff;
font-size: 44px;
cursor: pointer;
}

.topprod-card {
border-right: 1px solid #ddd;
padding: 15px;
text-align: center;
background: #fff;
position: relative;
}

.topprod-card img {
width: 100%;
max-height: 125px;
object-fit: contain;
}

.topprod-discount {
position: absolute;
top: 10px;
left: 10px;
background: #009688;
color: #fff;
padding: 3px 8px;
font-size: 12px;
border-radius: 5px;
font-weight: bold;
}

.topprod-type {
font-size: 12px;
color: #666;
margin-top: 10px;
}

.topprod-name {
font-size: 14px;
font-weight: 500;
margin: 5px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.topprod-price del {
color: #999;
margin-right: 5px;
}

.topprod-price span {
font-weight: bold;
color: #111;
}

@media (max-width: 768px) {
.topprod-header h2 {
font-size: 20px;
}

.topprod-line {
margin: 0 30px;
}

.topprod-card img {
max-height: 100px;
}
}
/*whats new*/
.whats{
margin:0;
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
background: radial-gradient(1000px 600px at 15% 20%, rgba(230,74,122,0.08), transparent 10%), linear-gradient(120deg,#AF4CA4 0%,#1E3544, #2777B9 100%);
min-height: 50vh;
color:#111;
padding:40px 24px;
}
.deals-whatsnew { padding: 30px 0; }

.whatsnew-heading {
font-size: 32px;
font-weight: 400;
margin-left: 20px;
margin-bottom: 40px;
color: #fff;
}

.whatsnew-wrap { position: relative; }

.whatsnew-carousel .owl-item { padding: 0 4px; }

.whatsnew-carousel img {
width: 100%;
border-radius: 14px;
background: #fff;
}

.whatsnew-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
}

.whatsnew-left { left: 10px; }
.whatsnew-right { right: 10px; }

.whats-btn {
background: #64646F59;
border: none;
color: #000;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.whats-btn:hover {
background: rgba(255,255,255,0.35);
}

/*Blog*/
.blogs-section {
padding: 40px 0;
}

.blogs-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}

.blogs-header h2 {
font-size: 26px;
font-weight: 600;
}

.show-more {
font-size: 16px;
color:#01677D;
text-decoration: none;
font-weight: 600;
}

.blogs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}

.blog-card h4 {
font-size: 16px;
margin: 12px 0 6px;
}

.blog-card p {
font-size: 14px;
color: #777;
line-height: 1.5;
}

.blog-img {
position: relative;
border-radius: 12px;
overflow: hidden;
}

.blog-img img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}

.date-badge {
position: absolute;
top: 12px;
left: 12px;
background: rgba(0,0,0,0.75);
color: #fff;
padding: 6px 20px;
/* border-radius: 6px; */
text-align: center;
font-size: 12px;
}

.date-badge strong {
display: block;
font-size: 16px;
}

.date-badge small {
font-size: 10px;
}

/* Responsive */
@media (max-width: 991px) {
.blogs-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 576px) {
.blogs-grid {
grid-template-columns: 1fr;
}
}

/*NewsLetter*/
:root{
--bg-start: #eef6f7;
--bg-end:   #f6fbfc;
--muted:    #6b6f73;
--input-border: #dedede;
--yellow-1: #ffe29f;
--yellow-2: #fecd66;
--yellow-border: #f5c94b;
}

body { 
font-family: Arial, sans-serif;  
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Section background */
.newsletter-section{
background: linear-gradient(90deg, var(--bg-start) 0%, var(--bg-end) 100%);
padding: 80px 0;
}

.newsletter-title{
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
}

.newsletter-sub{
color: var(--muted);
margin-bottom: 20px;
font-size: 15px;
}

.newsletter-form .form-control {
height: 56px;
border-radius: 6px 0 0 6px;
border: 1px solid var(--input-border);
border-right: none;
font-size: 15px;
padding: 14px 18px;
}

.newsletter-form .btn-sub {
height: 56px;
border-radius: 0 6px 6px 0;
border: 1px solid var(--yellow-border);
background: linear-gradient(180deg, var(--yellow-1), var(--yellow-2));
font-weight: 600;
color: #231f12;
padding: 0 26px;
}

.newsletter-form .btn-sub:hover{
transform: translateY(-1px);
}

/* Image styling */
.newsletter-image img{
max-width: 100%;
height: auto;
display: block;
margin-top: -180px;
}

/* Mobile responsive */
@media(max-width: 767.98px){
.newsletter-section { text-align: center; }
.newsletter-form .form-control {
border-radius: 6px;
border-right: 1px solid var(--input-border);
margin-bottom: 10px;
}
.newsletter-form .btn-sub{
border-radius: 6px;
width: 100%;
}
}

/* <<// DETAIL PAGE STYLING \\>> */
.product-page {
display: flex;
gap: 40px;
max-width: 1200px;
margin: 50px auto;
padding: 40px 30px;
}

/* Right Content */
.product-details {
flex: 1;
position: relative;
overflow-y: auto;
padding-right: 20px;
max-height: 80vh;
}

/* Breadcrumb */
.breadcrumb {
margin-bottom: 10px;
font-size: 14px;
color: #666;
}

/* Product Header */
.product-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}

.product-header h1 {
font-size: 27px;
margin: 0;
flex: 1;
}

.favorite {
cursor: pointer;
font-size: 24px;
color: #666666;
transition: 0.3s;
}

.favorite.active {
color: #ff4d4f;
}

/* Price Section */
.price-section {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 15px;
}

.price {
font-size: 32px;
font-weight: 600;
color: #0B0B0B;
margin: 0;
}

.discount {
color: #01677D;
font-weight: bold;
margin-top: -5px;
}

.original {
color: #666666;
text-decoration: line-through;
font-weight: 500;
}

/* Share Button */
.share-btn {
margin-top: 10px;
padding: 5px 10px;
background: #1c6ef2;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}

/* Options */
.product-options {
margin-bottom: 20px;
}

.product-options label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}

.colors {
display: flex;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}

.colors img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 5px;
cursor: pointer;
border: 2px solid transparent;
transition: 0.3s;
background: #EAEFF1;
}

.colors img.active {
border-color: #01677D;
background: #e6f0ff;
}

.memory {
display: flex;
gap: 15px;
margin-bottom: 10px;
}

.memory button {
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 6px;
cursor: pointer;
background: #EAEFF1;
transition: 0.3s;
}

.memory button.active {
border-color: #01677D;
background: #e6f0ff;
}

/* Delivery & Offers */
.delivery {
margin-bottom: 20px;
margin-top: -8px;
}

.delivery .input-group {
position: relative;
width: 100%;
}

.delivery input {
width: 100%;
padding: 10px 80px 10px 12px;  
border: 1px solid #CACACA;
border-radius: 4px;
font-size: 14px;
color: #666666;
}

.delivery button {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
padding: 6px 14px;
background: transparent;
color: #01677D;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}

.delivery .note {
font-size: 12px;
color: #BA1A1A;
margin-top: 5px;
}


.offers {
margin-bottom: 20px;
}

.offers ul {
list-style: none;
padding: 0;
margin: 0;
}

.offers li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}

/* % ICON */
.offers .percent-icon {
width: 20px;
height: 20px;
background: #E5C36C;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: bold;
flex-shrink: 0;
}

/* OFFER TEXT – SINGLE LINE */
.offers .offer-text {
flex: 1;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* RIGHT ARROW */
.offers .arrow {
font-size: 18px;
color: #BFC8CC;
font-weight: bold;
flex-shrink: 0;
}

/* Tabs */
.tabs {
display: flex;
gap: 10px;
margin-bottom: 10px;
}

.tabs button {
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 6px;
cursor: pointer;
background: #EAEFF1;

}

.tabs button.active {
border-color: #01677D;
background: #01677D;
color: #FFFFFF;
}

/* .tab-content {
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
background: #fff;
margin-bottom: 20px;
} */

/* Sticky Bottom */
.sticky-bottom {
transition: transform 0.3s ease;
}

.sticky-bottom.hide {
transform: translateY(100%);
}
.sticky-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid #ccc;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
z-index: 1000;
}

.sticky-left {
display: flex;
align-items: center;
gap: 10px;
margin-left: 90px
}

.sticky-left img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 8px;
}

.sticky-left .info {
display: flex;
flex-direction: column;
}

.sticky-left .info h2 {
font-size: 16px;
margin: 0;
}

.sticky-left .info .price {
font-size: 14px;
color: #0B0B0B;
margin: 0;
}

.sticky-right {
display: flex;
gap: 10px;
margin-right: 90px;
}

.sticky-right button {
padding: 10px 20px;
border: 1px solid #BFC8CC;
border-radius: 6px;
cursor: pointer;
font-size: 18px;
}

.sticky-right .add-to-cart {
background: #EFF4F7;
color: #fff;
}

.sticky-right .addtocart {
background: #FFDF93;
color: #594400;
}

/* Scrollbar Styling */
.product-details::-webkit-scrollbar {
width: 6px;
}

.product-details::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}

.product-details::-webkit-scrollbar-track {
background: transparent;
}

.thumbnail-container::-webkit-scrollbar {
width: 6px;
}

.thumbnail-container::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}

.thumbnail-container::-webkit-scrollbar-track {
background: transparent;
}

#currentImage {
background-color: #EAEFF1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.product-page {
flex-direction: column;
gap: 20px;
/* margin: 20px; */
}

.thumbnail-container {
height: auto;
max-height: 200px;
}

.main-image img {
height: 300px;
object-fit: contain;
}

.sticky-bottom {
padding: 8px 10px;
flex-direction: column;
gap: 10px;
}

.sticky-left {
margin-left: 0px;
}

.sticky-left .info h2 {
font-size: 17px;
margin: -2px;
}
.sticky-left .info .price 
{
font-size: 14px;
color: #0B0B0B;
padding: 0;
padding-top: 7px;
}
.sticky-left img
{
width: 65px;
height: 101px;
object-fit: cover;
border-radius: 8px;
}
.sticky-right {
/* width: 100%; */
justify-content: space-between;
margin-right: 0;
margin-left: 55%;
margin-top: -60px;

}
.sticky-right button {
padding: 5px 10px;
border: 1px solid #BFC8CC;
border-radius: 6px;
cursor: pointer;
font-size: 15px;
}
}
/* RAM Selection */
.ram {
display: flex;
gap: 15px;
margin-bottom: 10px;
}

.ram button {
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 6px;
cursor: pointer;
background: #EAEFF1;
transition: 0.3s;
}

.ram button.active {
border-color: #01677D;
background: #e6f0ff;
}

/* What's in the Box */
.box-row {
display: flex;    
justify-content: center;  
flex-wrap: wrap;  
}

.box-item {
flex: 1 1 0;  
display: flex;
justify-content: center;
align-items: center;
max-width: 276px;  
max-height: 276px;  
}

.box-item img {
width: 100%;
height: 100%;
object-fit: contain;  
border: 1px solid #BFC8CC;
/* transition: transform 0.2s ease; */
}
/* STOP auto scroll on container */
.thumbnail-container {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
height: 300px;
min-width: 80px;
overflow: hidden;     
}

/* ONLY images scroll on button click */
.thumbnail-images {
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;    
padding: 30px 0;     
}
.price {
font-size: 26px;
font-weight: 600;
margin-bottom: 6px;
margin-top: 10px;
}

.price-row {
display: flex;
justify-content: space-between;
align-items: center;
}

.discount {
font-size: 14px;
font-weight: 600;
color: #01677D;
margin-top: -45px;
}

.discount .original {
color: #777;
font-weight: 400;
margin-left: 3px;
}

/* ICON COLUMN */
.icon-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}

/* HEART */
.favorite svg,
.share svg {
width: 20px;
height: 20px;
fill: #ccc;
cursor: pointer;
transition: 0.3s;
margin-top: -96px;
}

.favorite.active svg {
fill: #ff4d4f;
}

/* hover effect */
.favorite svg:hover,
.share svg:hover {
fill: #1c6ef2;
}
.offering{
margin-bottom: 10px;
}
#about_Product{
margin-bottom: 100px;
}

/* <!-- Banner Style-> */
@media(max-width:769px){
.account-banner{    
width: 100%;
height: 160px;      
object-fit: cover;
}
}


#profile{
padding: 70px 0;
}
.account-content {
  flex: 1;
  padding: 30px;
  position: relative;  
}

.section-border {
  height: 1px;
  background: 1px var(--Schemes-Outline, #70787C);
  width: 80%;   
  margin: 0 auto 20px auto;  
}
.account-container {
max-width: 1200px;
margin: auto;
display: flex;
background: #fff;
min-height: 80vh;
}

/* ===== SIDEBAR ===== */
.account-sidebar {
width: 270px;
border-right: 1px solid var(--Schemes-Outline, #70787C);
padding: 20px;
margin-top: -19px;
}

.sidebar-title {
color: #01677D;
font-size: 15px;
margin-bottom: 15px;
}

.menu-group {
margin-bottom: 10px;
}

.menu-label {
font-size: 14px;
color: #717276;
margin-bottom: 6px;
display: block;
font-weight: 500;
line-height: 100%;
letter-spacing: 0%;

}

.menu-item {
width: 100%;
font-weight: 400;
padding: 5px 0;
border: none;
background: transparent;
text-align: left;
cursor: pointer;
border-radius: 6px;
font-size: 20px;
color: #171C1F;
}
/* ===== CONTENT ===== */
.account-content {
flex: 1;
padding: 30px;
}

/* HEADER */
.profile-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}

.profile-user {
display: flex;
gap: 15px;
align-items: center;
}

.profile-user img {
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px solid #ddd;
}

.welcome {
font-size: 24px;
color: #000000;
margin: 0;
font-weight: 400;
line-height: 100%;
}
.welcome-sub{
font-size: 36px;
color: #000000;
margin: 0;
font-weight: 400;
line-height: 100%;
}
.logout-btn {
background: none; 
font-weight: 600;
font-size: 12px;
color: #01677D;
border: none;
padding: 6px 14px;
cursor: pointer;
border-radius: 6px;
}

/* INFO GRID */
.info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}

.info-box
{
background: #EAEFF1;
padding: 14px;  
font-size: 16px;
color: #40484B;
font-weight: 400; 
opacity: 1;
border-radius: 4px;
gap: 8px;
padding-top: 17px;
padding-right: 12px;
padding-bottom: 17px;
padding-left: 12px;

}
.info-box, svg{
margin-right: 10px;
}
.save-wrap {
text-align: right;
margin: 20px 0;
}

.save-btn {
background: #FFDF93;
color: #594400;
border: 1px solid var(--Schemes-Secondary-Fixed-Dim, #E5C36C);
padding: 8px 20px;
border-radius: 6px;
cursor: pointer;
opacity: 1;
border-radius: 2px;
gap: 10px;
border-width: 1px;
padding-top: 18px;
padding-right: 24px;
padding-bottom: 18px;
padding-left: 24px;

}

/* FAQ */
.faq {  
padding-top: 20px;
}

.faq h4 {
margin-bottom: 15px;
color: #171C1F;
padding-bottom: 10px;
}

.faq-item {
margin-bottom: 15px;
}
.faq-item .faq-sub{
color: #171C1F;
font-size: 16px;
font-weight: 500;
}
.faq-item .faq-sub .faq-sub-title{
color: #40484B;
font-size: 16px;
font-weight: 400;
}
.faq-item p {
font-size: 13px;
color: #555;
}

/* ACTIONS */
.account-actions {
margin-top: 20px;
}

.link-btn {
background: none;
border: none;
font-weight: 600;
font-size: 14px;
color: #171C1F;
cursor: pointer;
padding: 0;
display: block;
margin-bottom: 5px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.account-container {
flex-direction: column;
}

.account-sidebar {
width: 100%;
border-right: none;
border-bottom: 1px solid #eee;
}

.info-grid {
grid-template-columns: 1fr;
}

.profile-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
.sidebar-divider {
border: none;
border: 1px solid var(--Schemes-Outline, #70787C);
margin: 12px 0 16px;
}

.content-section {
display: none;
}

.content-section.active {
display: block;
}


.menu-item.active {
color: #01677D;
font-weight: 600;
}
.account-sidebar {
width: 270px;
position: sticky;
top: 80px;    
height: fit-content;
background: #fff;
}
.content-section {
display: none;
}

.content-section.active {
display: block;
}

.section-title {
font-size: 32px;
color: #171C1F;
margin-bottom: 20px;
font-weight: 600;
}

/* ===== ORDER ITEM ===== */
.order-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: #F5FAFD;
border-radius: 4px;
margin-bottom: 12px;
transition: background 0.1s ease;
width: 747px;
 cursor: pointer;
height: 100px;
}

.order-item:hover {
background: #e9f2fe;
}

.order-item-img img {
width: 100px;
height: 100px;
object-fit: contain;
border-radius: 4px;

}

.order-item-details h4 {
margin: 0 0 4px;
font-size: 16px;
color: #0B0B0B;
font-weight: 400;
line-height: 140%;
}

.order-item-details p {
margin: 0;
font-size: 14px;
color: #666666;
line-height: 1.4;
}

.order-status {
color: #01677D;
font-weight: 500;
}

.order-status.cancelled {
color: #FF383C;
font-weight: 500;
}

.status-arrow svg {
margin-left: 4px;
margin-top: -2px;
}
.content-section {
display: none;
opacity: 0;
transform: translateY(-20px);
}

.content-section.active {
display: block;
}

.content-section.slide-in {
animation: slideDown 0.35s ease forwards;
}

@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.content-section { display: none; }
.content-section.active { display: block; }