```css
/* =========================================================
ARK URJA MACHINERY - FINAL COMPLETE CSS
========================================================= */

:root{

--primary:#0f172a;
--primary-light:#1e293b;

--secondary:#f59e0b;
--secondary-dark:#d97706;

--accent:#38bdf8;

--bg:#f4f8fc;

--white:#ffffff;

--text:#0f172a;

--light:#64748b;

--border:#dbe4ee;

--card:#ffffff;

--hover:#eff6ff;

--shadow:
0 10px 30px rgba(15,23,42,.08);

}

/* =========================================================
RESET
========================================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:
linear-gradient(
180deg,
#f8fbff 0%,
#eef5fb 100%
);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

/* =========================================================
GLOBAL
========================================================= */

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
transition:.3s ease;
}

.page-container,
.container{

width:94%;
max-width:1280px;

margin:auto;

}

/* =========================================================
HEADER
========================================================= */

.site-header{

position:sticky;
top:0;

z-index:9999;

background:
rgba(255,255,255,.94);

backdrop-filter:blur(16px);

border-bottom:
1px solid rgba(219,228,238,.8);

box-shadow:
0 4px 18px rgba(15,23,42,.04);

}

.header-flex{

display:flex;

align-items:center;

justify-content:space-between;

gap:14px;

padding:12px 0;

}

/* LOGO */

.brand{

display:flex;

flex-direction:column;

justify-content:center;

flex-shrink:0;

width:280px;

min-width:280px;

text-decoration:none;

}

.brand h1{

font-size:26px;

font-weight:800;

line-height:1.05;

letter-spacing:-1px;

color:#0f172a;

white-space:nowrap;

}

.brand p{

margin-top:4px;

font-size:11px;

line-height:1.4;

color:#64748b;

}

/* NAV */

.desktop-nav{

display:flex;

align-items:center;

justify-content:flex-end;

gap:4px;

flex:1;

min-width:0;

}

.desktop-nav a{

display:flex;

align-items:center;
justify-content:center;

padding:10px 12px;

height:42px;

border-radius:10px;

font-size:13px;

font-weight:700;

white-space:nowrap;

color:#334155;

line-height:1;

transition:.25s ease;

flex-shrink:0;

}

.desktop-nav a:hover,
.desktop-nav a.active{

background:#0f172a;

color:#fff;

}

/* MOBILE BTN */

.menu-btn{
display:none;
}

/* =========================================================
HERO
========================================================= */

.hero{

margin:35px 0 65px;

padding:85px 60px;

border-radius:30px;

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

position:relative;

overflow:hidden;

box-shadow:
0 25px 60px rgba(15,23,42,.15);

}

.hero::before{

content:"";

position:absolute;

right:-120px;
top:-120px;

width:430px;
height:430px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(245,158,11,.22),
transparent 70%
);

}

.hero::after{

content:"";

position:absolute;

left:-100px;
bottom:-100px;

width:320px;
height:320px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(56,189,248,.14),
transparent 70%
);

}

.hero-inner{
position:relative;
z-index:2;
}

.hero h1{

font-size:64px;

line-height:1.05;

font-weight:800;

letter-spacing:-2px;

color:#fff;

max-width:850px;

margin-bottom:22px;

}

.hero span{
color:#fbbf24;
}

.hero p{

font-size:18px;

line-height:2;

color:#dbe4ee;

max-width:760px;

}

/* BUTTONS */

.hero-buttons{

display:flex;

gap:15px;

margin-top:32px;

flex-wrap:wrap;

}

.btn-primary{

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

color:#000;

padding:15px 28px;

border-radius:12px;

font-weight:800;

display:inline-block;

box-shadow:
0 10px 30px rgba(245,158,11,.25);

}

.btn-primary:hover{

transform:translateY(-3px);

background:
linear-gradient(
135deg,
#d97706,
#f59e0b
);

}

.btn-secondary{

border:
1px solid rgba(255,255,255,.15);

background:
rgba(255,255,255,.06);

color:#fff;

padding:15px 28px;

border-radius:12px;

font-weight:700;

display:inline-block;

}

.btn-secondary:hover{

background:#fff;

color:#0f172a;

}

/* =========================================================
SECTION TITLE
========================================================= */

.section-title{

font-size:40px;

font-weight:800;

margin-bottom:32px;

color:var(--primary);

letter-spacing:-1px;

}

/* =========================================================
GRID
========================================================= */

.category-grid,
.product-grid,
.blog-grid,
.related-grid,
.trust-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:26px;

}

/* =========================================================
CARDS
========================================================= */

.category-card,
.product-card,
.blog-card,
.related-card,
.section,
.trust-box,
.product-tags,
.product-image,
.seo-footer-content{

background:#fff;

border:
1px solid var(--border);

border-radius:22px;

overflow:hidden;

transition:.35s ease;

box-shadow:
0 8px 24px rgba(15,23,42,.04);

}

.category-card:hover,
.product-card:hover,
.blog-card:hover,
.related-card:hover{

transform:translateY(-5px);

box-shadow:
0 20px 45px rgba(15,23,42,.10);

border-color:#cbd5e1;

}

/* =========================================================
PRODUCTS
========================================================= */

.product-card img,
.related-card img{

width:100%;
height:240px;

object-fit:contain;

padding:20px;

background:#fff;

transition:.3s ease;

}

.product-card:hover img,
.related-card:hover img{

transform:scale(1.03);

}

.product-content,
.blog-card-content,
.category-card{

padding:24px;

}

.product-content h3,
.blog-card-content h3,
.related-card h3{

font-size:19px;

line-height:1.6;

font-weight:700;

margin-bottom:14px;

color:var(--primary);

}

.product-price,
.rel-price{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:#fff7ed;

color:#d97706;

font-size:20px;

font-weight:800;

border:
1px solid #fed7aa;

}

/* =========================================================
PRODUCT PAGE
========================================================= */

.product-wrapper{

display:grid;

grid-template-columns:
1fr 1fr;

gap:45px;

align-items:start;

margin-bottom:50px;

}

.product-image{

padding:30px;

position:sticky;

top:100px;

}

.product-image img{

height:500px;

object-fit:contain;

}

.product-title{

font-size:42px;

line-height:1.2;

font-weight:800;

color:#0f172a;

margin-bottom:20px;

}

/* PRODUCT ACTIONS */

.product-actions{

display:flex;

gap:14px;

flex-wrap:wrap;

margin-top:28px;

}

.btn{

display:inline-flex;

align-items:center;
justify-content:center;

gap:8px;

padding:15px 24px;

border:none;

border-radius:14px;

font-size:15px;

font-weight:700;

cursor:pointer;

transition:.3s ease;

text-decoration:none;

min-width:170px;

box-shadow:
0 10px 25px rgba(0,0,0,.08);

}

.btn:hover{

transform:translateY(-3px);

}

.btn.call{

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

color:#fff;

}

.btn.whatsapp{

background:
linear-gradient(
135deg,
#16a34a,
#22c55e
);

color:#fff;

}

.btn.buy-now{

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

color:#000;

font-weight:800;

}

/* =========================================================
BLOG
========================================================= */

.blog-card img{

width:100%;
height:230px;

object-fit:cover;

}

/* =========================================================
FOOTER
========================================================= */

.footer{

margin-top:80px;

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

padding:70px 0 25px;

color:#cbd5e1;

}

.footer-container{

width:94%;
max-width:1280px;

margin:auto;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:35px;

}

.footer h3{

font-size:22px;

margin-bottom:18px;

color:#fff;

}

.footer p,
.footer a{

font-size:15px;

line-height:2;

color:#cbd5e1;

}

.footer a:hover{
color:#fbbf24;
}

.footer-bottom{

margin-top:35px;

padding-top:18px;

border-top:
1px solid rgba(255,255,255,.08);

text-align:center;

}

/* =========================================================
SIDEBAR
========================================================= */

.menu-btn,
.sidebar,
.overlay{
display:none;
}

/* =========================================================
LAPTOP
========================================================= */

@media(max-width:1280px){

.brand{

width:240px;
min-width:240px;

}

.brand h1{

font-size:23px;

}

.desktop-nav a{

padding:9px 9px;

font-size:12px;

}

}

/* =========================================================
TABLET
========================================================= */

@media(max-width:992px){

.desktop-nav{
display:none;
}

.menu-btn{

display:flex;

align-items:center;
justify-content:center;

width:44px;
height:44px;

border:none;

border-radius:10px;

background:#0f172a;

color:#fff;

font-size:20px;

cursor:pointer;

flex-shrink:0;

}

.brand{

flex:1;

width:auto;
min-width:0;

}

.brand h1{

font-size:22px;

overflow:hidden;

text-overflow:ellipsis;

}

.hero h1{
font-size:50px;
}

.product-wrapper{
grid-template-columns:1fr;
}

.product-image{
position:relative;
top:0;
}

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:768px){

.header-flex{

padding:10px 0;

gap:10px;

}

.brand h1{

font-size:21px;

}

.brand p{

font-size:9px;

}

.menu-btn{

width:40px;
height:40px;

font-size:18px;

border-radius:9px;

}

.hero{

padding:50px 24px;

border-radius:22px;

}

.hero h1{

font-size:36px;

line-height:1.15;

letter-spacing:-1px;

}

.hero p{

font-size:15px;

line-height:1.9;

}

.hero-buttons,
.product-actions{

flex-direction:column;

}

.btn-primary,
.btn-secondary,
.btn{

width:100%;

text-align:center;

}

.product-title{

font-size:28px;

}

.product-card img,
.related-card img{

height:220px;

}

.product-image img{

height:320px;

}

/* SIDEBAR */

.sidebar{

display:block;

position:fixed;

top:0;
left:-100%;

width:280px;
height:100vh;

background:#fff;

padding:25px;

z-index:999999;

transition:.35s ease;

overflow-y:auto;

}

.sidebar.active{
left:0;
}

.sidebar nav{

display:flex;
flex-direction:column;

gap:12px;

margin-top:20px;

}

.sidebar nav a{

padding:14px;

border-radius:10px;

background:#f8fafc;

border:
1px solid #e2e8f0;

font-weight:700;

color:#334155;

}

.sidebar nav a:hover{

background:var(--primary);

color:#fff;

}

.overlay{

display:block;

position:fixed;

inset:0;

background:
rgba(0,0,0,.5);

opacity:0;
visibility:hidden;

transition:.3s;

z-index:99990;

}

.overlay.active{

opacity:1;
visibility:visible;

}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:480px){

.hero h1{
font-size:31px;
}

.section-title{
font-size:24px;
}

.product-title{
font-size:24px;
}

.product-grid,
.blog-grid,
.category-grid,
.related-grid{

grid-template-columns:1fr;

}

.product-image img{

height:250px;

}

}
```
/* =========================================================
CATEGORY SECTION PERFECT FIX
========================================================= */

.category-section{

margin-top:10px;
margin-bottom:70px;

}

/* GRID */

.category-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:26px;

}

/* CARD */

.category-card{

background:
linear-gradient(
135deg,
#ffffff,
#f8fbff
);

border:
1px solid #dbe4ee;

border-radius:24px;

padding:28px;

box-shadow:
0 10px 25px rgba(15,23,42,.05);

transition:.35s ease;

overflow:hidden;

position:relative;

}

/* TOP GLOW */

.category-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:
linear-gradient(
90deg,
#f59e0b,
#38bdf8
);

}

/* HOVER */

.category-card:hover{

transform:translateY(-6px);

box-shadow:
0 20px 45px rgba(15,23,42,.10);

}

/* TITLE */

.category-card h3{

font-size:28px;

font-weight:800;

line-height:1.3;

margin-bottom:20px;

color:#0f172a;

}

/* SUB GRID */

.sub-grid{

display:flex;

flex-direction:column;

gap:12px;

}

/* SUB CARD */

.sub-card{

display:flex;

align-items:center;

padding:13px 15px;

border-radius:12px;

background:#ffffff;

border:
1px solid #e2e8f0;

font-size:14px;

font-weight:600;

line-height:1.5;

color:#334155;

transition:.3s ease;

}

.sub-card:hover{

background:#0f172a;

border-color:#0f172a;

color:#fff;

transform:translateX(4px);

}

/* BUTTON */

.category-btn{

display:inline-flex;

align-items:center;
justify-content:center;

margin-top:22px;

padding:13px 18px;

border-radius:12px;

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

color:#fff;

font-size:14px;

font-weight:700;

transition:.3s ease;

}

.category-btn:hover{

transform:translateY(-3px);

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

color:#000;

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:768px){

.category-grid{

grid-template-columns:1fr;

gap:20px;

}

.category-card{

padding:22px;

border-radius:20px;

}

.category-card h3{

font-size:24px;

}

.sub-card{

font-size:13px;

padding:12px 14px;

}

.category-btn{

width:100%;

}

}
/* =========================================================
MOBILE MENU ICON FIX
========================================================= */

/* MENU BUTTON */

.menu-btn{

background:#0f172a !important;

color:#ffffff !important;

}

/* SIDEBAR TOP */

.sidebar-top{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:20px;

padding-bottom:15px;

border-bottom:
1px solid #e2e8f0;

}

/* SIDEBAR TITLE */

.sidebar-top h2{

font-size:24px;

font-weight:800;

color:#0f172a;

}

/* CLOSE BUTTON */

.close-btn{

display:flex;

align-items:center;
justify-content:center;

width:42px;
height:42px;

border:none;

border-radius:10px;

background:#0f172a;

color:#ffffff;

font-size:22px;

font-weight:700;

cursor:pointer;

transition:.3s ease;

}

.close-btn:hover{

background:#f59e0b;

color:#000;

transform:rotate(90deg);

}

/* MOBILE EXTRA FIX */

@media(max-width:768px){

.menu-btn{

display:flex;

align-items:center;
justify-content:center;

}

}
.hero-badge{

display:inline-flex;

align-items:center;
justify-content:center;

padding:10px 18px;

border-radius:999px;

background:
rgba(255,255,255,.08);

border:
1px solid rgba(255,255,255,.12);

backdrop-filter:blur(10px);

font-size:14px;

font-weight:700;

color:#fbbf24;

margin-bottom:22px;

}
/* =========================================================
SEO CONTENT
========================================================= */

.seo-footer-content{

margin-top:70px;

padding:45px;

background:#ffffff;

border:
1px solid #dbe4ee;

border-radius:24px;

box-shadow:
0 10px 30px rgba(15,23,42,.04);

}

.seo-footer-content h2{

font-size:34px;

line-height:1.3;

margin-bottom:22px;

color:#0f172a;

font-weight:800;

}

.seo-footer-content p{

font-size:16px;

line-height:2;

color:#475569;

}

/* KEYWORDS */

.seo-keywords{

margin-top:35px;

padding:20px;

text-align:center;

font-size:14px;

line-height:2;

color:#64748b;

}

/* MOBILE */

@media(max-width:768px){

.seo-footer-content{

padding:28px 22px;

border-radius:20px;

}

.seo-footer-content h2{

font-size:26px;

}

.seo-footer-content p{

font-size:15px;

line-height:1.9;

}

}

/* =========================================================
TRUST SECTION PREMIUM
========================================================= */

.trust-section{

margin-top:80px;

padding:70px 50px;

border-radius:32px;

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

position:relative;

overflow:hidden;

box-shadow:
0 25px 60px rgba(15,23,42,.12);

}

/* GLOW */

.trust-section::before{

content:"";

position:absolute;

top:-120px;
right:-120px;

width:320px;
height:320px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(245,158,11,.18),
transparent 70%
);

}

/* HEADER */

.trust-header{

position:relative;

z-index:2;

text-align:center;

max-width:760px;

margin:auto auto 45px;

}

/* TAG */

.trust-tag{

display:inline-flex;

align-items:center;
justify-content:center;

padding:10px 18px;

border-radius:999px;

background:
rgba(255,255,255,.08);

border:
1px solid rgba(255,255,255,.08);

font-size:13px;

font-weight:700;

color:#fbbf24;

margin-bottom:18px;

}

/* TITLE */

.trust-header h2{

font-size:42px;

line-height:1.2;

font-weight:800;

color:#fff;

margin-bottom:18px;

}

/* TEXT */

.trust-header p{

font-size:17px;

line-height:1.9;

color:#cbd5e1;

}

/* GRID */

.trust-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:24px;

position:relative;

z-index:2;

}

/* CARD */

.trust-card{

background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.08);

backdrop-filter:blur(10px);

border-radius:24px;

padding:30px 26px;

transition:.35s ease;

}

/* HOVER */

.trust-card:hover{

transform:translateY(-6px);

background:
rgba(255,255,255,.09);

}

/* ICON */

.trust-icon{

display:flex;

align-items:center;
justify-content:center;

width:68px;
height:68px;

border-radius:18px;

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

font-size:30px;

margin-bottom:22px;

box-shadow:
0 10px 25px rgba(245,158,11,.25);

}

/* CARD TITLE */

.trust-card h3{

font-size:22px;

line-height:1.4;

font-weight:800;

color:#fff;

margin-bottom:14px;

}

/* CARD TEXT */

.trust-card p{

font-size:15px;

line-height:1.9;

color:#cbd5e1;

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:768px){

.trust-section{

padding:50px 24px;

border-radius:24px;

}

.trust-header h2{

font-size:32px;

}

.trust-header p{

font-size:15px;

}

.trust-grid{

grid-template-columns:1fr;

gap:18px;

}

.trust-card{

padding:24px 20px;

border-radius:20px;

}

.trust-icon{

width:58px;
height:58px;

font-size:26px;

border-radius:16px;

}

.trust-card h3{

font-size:20px;

}

}

/* =========================================================
VIEW DETAILS BUTTON PERFECT
========================================================= */

.view-btn{

display:inline-flex;

align-items:center;
justify-content:center;

gap:6px;

margin-top:16px;

padding:10px 16px;

height:42px;

border-radius:12px;

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

color:#ffffff;

font-size:13px;

font-weight:700;

letter-spacing:.2px;

transition:.3s ease;

box-shadow:
0 8px 20px rgba(15,23,42,.10);

}

/* HOVER */

.view-btn:hover{

transform:translateY(-2px);

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

color:#000;

box-shadow:
0 12px 28px rgba(245,158,11,.22);

}

/* SMALL ICON */

.view-btn::after{

content:"→";

font-size:14px;

transition:.3s ease;

}

.view-btn:hover::after{

transform:translateX(3px);

}

/* MOBILE */

@media(max-width:768px){

.view-btn{

width:100%;

height:44px;

font-size:14px;

border-radius:10px;

}

}

/* =========================================================
BREADCRUMB / PATH PREMIUM DESIGN
========================================================= */

.breadcrumb{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:10px;

margin:28px 0 35px;

padding:16px 22px;

border-radius:18px;

background:
linear-gradient(
135deg,
#ffffff,
#f8fbff
);

border:
1px solid #dbe4ee;

box-shadow:
0 8px 24px rgba(15,23,42,.05);

font-size:14px;

font-weight:600;

line-height:1.7;

}

/* LINKS */

.breadcrumb a{

display:inline-flex;

align-items:center;

padding:8px 14px;

border-radius:999px;

background:#eff6ff;

color:#2563eb;

font-weight:700;

transition:.3s ease;

}

/* HOVER */

.breadcrumb a:hover{

background:#0f172a;

color:#ffffff;

transform:translateY(-2px);

}

/* CURRENT PAGE */

.breadcrumb span{

display:inline-flex;

align-items:center;

padding:8px 14px;

border-radius:999px;

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

color:#000;

font-weight:800;

max-width:100%;

}

/* MOBILE */

@media(max-width:768px){

.breadcrumb{

padding:14px 16px;

gap:8px;

font-size:13px;

border-radius:14px;

}

.breadcrumb a,
.breadcrumb span{

padding:7px 12px;

font-size:12px;

}

}

/* =========================================================
CONTACT PAGE PREMIUM
========================================================= */

/* HERO */

.contact-hero{

margin:35px 0 40px;

padding:70px 50px;

border-radius:30px;

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

position:relative;

overflow:hidden;

box-shadow:
0 25px 60px rgba(15,23,42,.12);

text-align:center;

}

.contact-hero::before{

content:"";

position:absolute;

top:-120px;
right:-120px;

width:320px;
height:320px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(245,158,11,.18),
transparent 70%
);

}

.contact-hero h1{

position:relative;

z-index:2;

font-size:52px;

line-height:1.1;

font-weight:800;

color:#fff;

margin-bottom:18px;

letter-spacing:-1px;

}

.contact-hero p{

position:relative;

z-index:2;

font-size:18px;

line-height:1.9;

color:#cbd5e1;

}

/* WRAPPER */

.contact-wrapper{

display:grid;

grid-template-columns:
1.2fr .8fr;

gap:30px;

margin-bottom:70px;

align-items:start;

}

/* BOX */

.contact-box{

background:#fff;

border:
1px solid #dbe4ee;

border-radius:28px;

padding:35px;

box-shadow:
0 10px 30px rgba(15,23,42,.05);

}

/* TITLES */

.contact-box h2{

font-size:34px;

line-height:1.2;

font-weight:800;

margin-bottom:25px;

color:#0f172a;

}

/* FORM */

.contact-box form{

display:flex;

flex-direction:column;

gap:18px;

}

/* INPUT */

.contact-box input,
.contact-box textarea{

width:100%;

padding:16px 18px;

border-radius:16px;

border:
1px solid #dbe4ee;

background:#f8fbff;

font-size:15px;

font-family:'Inter',sans-serif;

color:#0f172a;

outline:none;

transition:.3s ease;

}

/* FOCUS */

.contact-box input:focus,
.contact-box textarea:focus{

border-color:#38bdf8;

background:#fff;

box-shadow:
0 0 0 4px rgba(56,189,248,.12);

}

/* TEXTAREA */

.contact-box textarea{

min-height:150px;

resize:vertical;

}

/* BUTTON */

.contact-box button{

display:inline-flex;

align-items:center;
justify-content:center;

height:56px;

border:none;

border-radius:16px;

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

color:#000;

font-size:16px;

font-weight:800;

cursor:pointer;

transition:.3s ease;

box-shadow:
0 12px 30px rgba(245,158,11,.22);

}

/* BUTTON HOVER */

.contact-box button:hover{

transform:translateY(-3px);

background:
linear-gradient(
135deg,
#d97706,
#f59e0b
);

}

/* CONTACT INFO */

.contact-info{

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

color:#fff;

position:relative;

overflow:hidden;

}

.contact-info::before{

content:"";

position:absolute;

bottom:-100px;
right:-100px;

width:260px;
height:260px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(245,158,11,.18),
transparent 70%
);

}

/* INFO TEXT */

.contact-info h2,
.contact-info p,
.contact-info a{

position:relative;

z-index:2;

}

.contact-info h2{

color:#fff;

margin-bottom:28px;

}

.contact-info p{

display:flex;

align-items:center;

gap:10px;

font-size:16px;

line-height:1.9;

margin-bottom:18px;

color:#dbe4ee;

}

/* LINKS */

.contact-info a{

color:#fbbf24;

font-weight:700;

transition:.3s ease;

}

.contact-info a:hover{

color:#fff;

}

/* MAP */

.contact-map{

margin-top:50px;

border-radius:28px;

overflow:hidden;

box-shadow:
0 15px 40px rgba(15,23,42,.08);

border:
1px solid #dbe4ee;

}

.contact-map iframe{

width:100%;

height:420px;

border:none;

display:block;

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:992px){

.contact-wrapper{

grid-template-columns:1fr;

gap:24px;

}

.contact-hero{

padding:55px 35px;

}

.contact-hero h1{

font-size:42px;

}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media(max-width:768px){

.contact-hero{

padding:45px 24px;

border-radius:24px;

margin:25px 0 30px;

}

.contact-hero h1{

font-size:32px;

line-height:1.2;

}

.contact-hero p{

font-size:15px;

line-height:1.8;

}

.contact-box{

padding:24px 20px;

border-radius:22px;

}

.contact-box h2{

font-size:28px;

margin-bottom:20px;

}

.contact-box input,
.contact-box textarea{

padding:15px 16px;

font-size:14px;

border-radius:14px;

}

.contact-box button{

height:52px;

font-size:15px;

border-radius:14px;

}

.contact-info p{

font-size:15px;

line-height:1.8;

}

.contact-map iframe{

height:300px;

}

}

/* =========================================
BLOG CONTENT PERFECT SPACING
========================================= */

.blog-content h1{
font-size:40px;
line-height:1.3;
margin:0 0 22px;
font-weight:800;
color:#111827;
}

.blog-content h2{
font-size:30px;
line-height:1.4;
margin:42px 0 18px;
font-weight:800;
color:#111827;
}

.blog-content h3{
font-size:24px;
line-height:1.5;
margin:35px 0 16px;
font-weight:700;
color:#111827;
}

.blog-content p{
margin-bottom:18px;
line-height:1.9;
}

.blog-content ul,
.blog-content ol{
padding-left:24px;
margin:18px 0;
}

.blog-content li{
margin-bottom:12px;
line-height:1.8;
}

/* REMOVE EXTRA BR */

.blog-content br{
display:none;
}

/* MOBILE */

@media(max-width:768px){

.blog-content h1{
font-size:30px;
}

.blog-content h2{
font-size:24px;
}

.blog-content h3{
font-size:21px;
}

.blog-content p,
.blog-content li{
font-size:15px;
line-height:1.8;
}

}


/* =====================================================
HOME BLOG SECTION PREMIUM
===================================================== */

.home-blog-section{

margin-top:80px;
margin-bottom:80px;

}

/* SECTION HEADING */

.section-heading{

text-align:center;

max-width:760px;

margin:0 auto 50px;

}

/* BADGE */

.section-badge{

display:inline-flex;

align-items:center;
justify-content:center;

padding:10px 18px;

border-radius:999px;

background:
linear-gradient(
135deg,
#eff6ff,
#dbeafe
);

color:#2563eb;

font-size:13px;

font-weight:700;

margin-bottom:18px;

}

/* TITLE */

.section-heading h2{

font-size:42px;

line-height:1.2;

font-weight:800;

color:#0f172a;

margin-bottom:18px;

letter-spacing:-1px;

}

/* TEXT */

.section-heading p{

font-size:17px;

line-height:1.9;

color:#64748b;

}

/* GRID */

.home-blog-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:28px;

}

/* CARD */

.home-blog-card{

background:#fff;

border:
1px solid #dbe4ee;

border-radius:28px;

overflow:hidden;

transition:.35s ease;

box-shadow:
0 10px 25px rgba(15,23,42,.05);

position:relative;

}

/* HOVER */

.home-blog-card:hover{

transform:translateY(-8px);

box-shadow:
0 25px 50px rgba(15,23,42,.10);

}

/* IMAGE */

.blog-image-box{

overflow:hidden;

height:240px;

}

.blog-image-box img{

width:100%;
height:100%;

object-fit:cover;

transition:.5s ease;

}

.home-blog-card:hover img{

transform:scale(1.06);

}

/* CONTENT */

.home-blog-content{

padding:26px;

}

/* META */

.blog-meta-row{

display:flex;

align-items:center;

margin-bottom:16px;

}

.blog-date{

display:inline-flex;

align-items:center;

padding:8px 14px;

border-radius:999px;

background:#eff6ff;

color:#2563eb;

font-size:12px;

font-weight:700;

}

/* TITLE */

.home-blog-content h3{

font-size:24px;

line-height:1.5;

font-weight:800;

margin-bottom:16px;

color:#0f172a;

transition:.3s ease;

}

.home-blog-card:hover h3{

color:#2563eb;

}

/* TEXT */

.home-blog-content p{

font-size:15px;

line-height:1.9;

color:#64748b;

margin-bottom:24px;

}

/* BUTTON */

.read-blog-btn{

display:inline-flex;

align-items:center;
justify-content:center;

padding:12px 18px;

border-radius:12px;

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

color:#fff;

font-size:14px;

font-weight:700;

transition:.3s ease;

}

.home-blog-card:hover .read-blog-btn{

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

color:#000;

}

/* VIEW ALL BUTTON */

.blog-section-btn{

margin-top:45px;

text-align:center;

}

.blog-section-btn a{

display:inline-flex;

align-items:center;
justify-content:center;

padding:15px 24px;

border-radius:14px;

background:
linear-gradient(
135deg,
#2563eb,
#3b82f6
);

color:#fff;

font-size:15px;

font-weight:700;

transition:.3s ease;

box-shadow:
0 12px 30px rgba(37,99,235,.18);

}

.blog-section-btn a:hover{

transform:translateY(-3px);

}

/* =====================================================
MOBILE
===================================================== */

@media(max-width:768px){

.home-blog-section{

margin-top:60px;
margin-bottom:60px;

}

.section-heading{

margin-bottom:35px;

}

.section-heading h2{

font-size:32px;

}

.section-heading p{

font-size:15px;

line-height:1.8;

}

.home-blog-grid{

grid-template-columns:1fr;

gap:22px;

}

.home-blog-card{

border-radius:22px;

}

.blog-image-box{

height:220px;

}

.home-blog-content{

padding:22px;

}

.home-blog-content h3{

font-size:22px;

}

.home-blog-content p{

font-size:14px;

}

.read-blog-btn{

width:100%;

height:48px;

border-radius:12px;

}

.blog-section-btn a{

width:100%;

height:52px;

border-radius:14px;

}

}



/* =====================================================
PREMIUM HERO SECTION
===================================================== */

.hero{

position:relative;

margin:35px 0 70px;

border-radius:34px;

overflow:hidden;

background:
linear-gradient(
135deg,
#081226 0%,
#0f172a 50%,
#172554 100%
);

box-shadow:
0 25px 60px rgba(15,23,42,.15);

}

/* OVERLAY */

.hero-overlay{

position:absolute;

inset:0;

background:
radial-gradient(
circle at top right,
rgba(245,158,11,.18),
transparent 30%
),

radial-gradient(
circle at bottom left,
rgba(59,130,246,.16),
transparent 30%
);

}

/* INNER */

.hero-inner{

position:relative;

z-index:2;

display:grid;

grid-template-columns:
1.2fr .8fr;

gap:50px;

align-items:center;

padding:80px 65px;

}

/* BADGE */

.hero-badge{

display:inline-flex;

align-items:center;
justify-content:center;

padding:11px 18px;

border-radius:999px;

background:
rgba(255,255,255,.08);

border:
1px solid rgba(255,255,255,.08);

backdrop-filter:blur(12px);

font-size:13px;

font-weight:700;

color:#fbbf24;

margin-bottom:24px;

}

/* TITLE */

.hero h1{

font-size:64px;

line-height:1.08;

font-weight:900;

letter-spacing:-2px;

color:#ffffff;

margin-bottom:24px;

max-width:780px;

}

/* HIGHLIGHT */

.hero h1 span{

display:block;

margin-top:8px;

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/* TEXT */

.hero p{

font-size:18px;

line-height:2;

color:#dbe4ee;

max-width:760px;

margin-bottom:32px;

}

/* BUTTONS */

.hero-buttons{

display:flex;

gap:16px;

flex-wrap:wrap;

margin-bottom:30px;

}

/* PRIMARY BTN */

.btn-primary{

display:inline-flex;

align-items:center;
justify-content:center;

height:58px;

padding:0 28px;

border-radius:16px;

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

color:#000;

font-size:15px;

font-weight:800;

box-shadow:
0 14px 35px rgba(245,158,11,.22);

transition:.35s ease;

}

.btn-primary:hover{

transform:translateY(-3px);

}

/* SECONDARY */

.btn-secondary{

display:inline-flex;

align-items:center;
justify-content:center;

height:58px;

padding:0 28px;

border-radius:16px;

background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.10);

backdrop-filter:blur(10px);

color:#fff;

font-size:15px;

font-weight:700;

transition:.35s ease;

}

.btn-secondary:hover{

background:#fff;

color:#0f172a;

}

/* TRUST */

.hero-trust{

display:flex;

flex-wrap:wrap;

gap:12px;

}

/* TRUST ITEM */

.trust-item{

display:inline-flex;

align-items:center;
justify-content:center;

padding:10px 16px;

border-radius:999px;

background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.08);

font-size:13px;

font-weight:600;

color:#dbe4ee;

}

/* RIGHT CARD */

.hero-right{

display:flex;

justify-content:center;

}

/* GLASS CARD */

.hero-glass-card{

width:100%;

max-width:360px;

padding:34px;

border-radius:28px;

background:
rgba(255,255,255,.08);

border:
1px solid rgba(255,255,255,.10);

backdrop-filter:blur(18px);

box-shadow:
0 15px 40px rgba(0,0,0,.12);

}

/* MINI BADGE */

.hero-mini-badge{

display:inline-flex;

align-items:center;
justify-content:center;

padding:8px 14px;

border-radius:999px;

background:
rgba(245,158,11,.16);

color:#fbbf24;

font-size:12px;

font-weight:700;

margin-bottom:18px;

}

/* CARD TITLE */

.hero-glass-card h3{

font-size:28px;

line-height:1.4;

font-weight:800;

color:#fff;

margin-bottom:18px;

}

/* CARD TEXT */

.hero-glass-card p{

font-size:15px;

line-height:1.9;

color:#dbe4ee;

margin-bottom:28px;

}

/* STATS */

.hero-stats{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}

/* STAT */

.hero-stat{

padding:18px;

border-radius:18px;

background:
rgba(255,255,255,.06);

text-align:center;

}

.hero-stat strong{

display:block;

font-size:28px;

font-weight:900;

color:#fbbf24;

margin-bottom:8px;

}

.hero-stat span{

font-size:13px;

line-height:1.6;

color:#dbe4ee;

}

/* =====================================================
TABLET
===================================================== */

@media(max-width:992px){

.hero-inner{

grid-template-columns:1fr;

padding:65px 40px;

gap:40px;

}

.hero-right{

justify-content:flex-start;

}

.hero h1{

font-size:52px;

}

}

/* =====================================================
MOBILE
===================================================== */

@media(max-width:768px){

.hero{

margin:25px 0 55px;

border-radius:24px;

}

.hero-inner{

padding:45px 24px;

gap:35px;

}

.hero-badge{

font-size:11px;

padding:9px 14px;

margin-bottom:18px;

}

.hero h1{

font-size:34px;

line-height:1.2;

letter-spacing:-1px;

margin-bottom:18px;

}

.hero p{

font-size:15px;

line-height:1.9;

margin-bottom:26px;

}

.hero-buttons{

flex-direction:column;

gap:14px;

}

.btn-primary,
.btn-secondary{

width:100%;

height:54px;

font-size:14px;

border-radius:14px;

}

.hero-trust{

gap:10px;

}

.trust-item{

font-size:11px;

padding:8px 12px;

}

.hero-glass-card{

padding:24px;

border-radius:22px;

max-width:100%;

}

.hero-glass-card h3{

font-size:24px;

}

.hero-glass-card p{

font-size:14px;

line-height:1.8;

}

.hero-stats{

gap:12px;

}

.hero-stat{

padding:14px;

border-radius:14px;

}

.hero-stat strong{

font-size:22px;

}

.hero-stat span{

font-size:11px;

}

}


/* =====================================================
HERO FIRST SCREEN FIT
===================================================== */

/* HERO */

.hero{

position:relative;

min-height:calc(100vh - 90px);

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

/* INNER */

.hero-inner{

width:100%;

}

/* PC */

@media(min-width:992px){

.hero{

min-height:calc(100vh - 85px);

padding:0;

}

.hero-inner{

padding-top:40px;

padding-bottom:40px;

}

}

/* MOBILE */

@media(max-width:768px){

.hero{

min-height:calc(100vh - 70px);

border-radius:0 0 24px 24px;

margin-top:0;

margin-bottom:40px;

}

.hero-inner{

padding-top:30px;

padding-bottom:30px;

}

}

/* SMALL MOBILE */

@media(max-width:480px){

.hero{

min-height:auto;

}

.hero-inner{

padding-top:25px;

padding-bottom:25px;

}

}

/* =====================================================
COMPACT HERO SECTION
===================================================== */

.hero{

position:relative;

overflow:hidden;

border-radius:28px;

background:
linear-gradient(
135deg,
#0f172a,
#172554
);

margin:25px 0 55px;

box-shadow:
0 20px 50px rgba(15,23,42,.12);

}

.hero-overlay{

position:absolute;

inset:0;

background:
radial-gradient(
circle at top right,
rgba(245,158,11,.15),
transparent 30%
);

}

.hero-inner{

position:relative;

z-index:2;

display:grid;

grid-template-columns:
1.1fr .7fr;

gap:35px;

align-items:center;

padding:55px;

}

/* LEFT */

.hero-badge{

display:inline-flex;

padding:9px 16px;

border-radius:999px;

background:
rgba(255,255,255,.08);

border:
1px solid rgba(255,255,255,.08);

font-size:12px;

font-weight:700;

color:#fbbf24;

margin-bottom:18px;

}

.hero h1{

font-size:52px;

line-height:1.15;

font-weight:900;

color:#fff;

margin-bottom:18px;

letter-spacing:-1px;

}

.hero h1 span{

display:block;

margin-top:6px;

color:#fbbf24;

}

.hero p{

font-size:16px;

line-height:1.9;

color:#dbe4ee;

margin-bottom:26px;

max-width:680px;

}

/* BUTTONS */

.hero-buttons{

display:flex;

gap:14px;

flex-wrap:wrap;

margin-bottom:22px;

}

.btn-primary,
.btn-secondary{

display:inline-flex;

align-items:center;
justify-content:center;

height:52px;

padding:0 24px;

border-radius:14px;

font-size:14px;

font-weight:700;

transition:.3s ease;

}

.btn-primary{

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

color:#000;

}

.btn-secondary{

background:
rgba(255,255,255,.08);

border:
1px solid rgba(255,255,255,.08);

color:#fff;

}

.btn-primary:hover,
.btn-secondary:hover{

transform:translateY(-2px);

}

/* TRUST */

.hero-trust{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.hero-trust span{

padding:8px 14px;

border-radius:999px;

background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.08);

font-size:12px;

font-weight:600;

color:#dbe4ee;

}

/* RIGHT CARD */

.hero-card{

padding:30px;

border-radius:24px;

background:
rgba(255,255,255,.08);

border:
1px solid rgba(255,255,255,.08);

backdrop-filter:blur(14px);

}

.hero-card h3{

font-size:28px;

line-height:1.4;

font-weight:800;

color:#fff;

margin-bottom:14px;

}

.hero-card p{

font-size:14px;

line-height:1.8;

color:#dbe4ee;

margin-bottom:22px;

}

/* STATS */

.hero-stats{

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

}

.hero-stats div{

padding:16px;

border-radius:16px;

background:
rgba(255,255,255,.06);

text-align:center;

}

.hero-stats strong{

display:block;

font-size:24px;

font-weight:900;

color:#fbbf24;

margin-bottom:6px;

}

.hero-stats span{

font-size:12px;

color:#dbe4ee;

}

/* =====================================================
TABLET
===================================================== */

@media(max-width:992px){

.hero-inner{

grid-template-columns:1fr;

padding:42px 32px;

gap:28px;

}

.hero h1{

font-size:42px;

}

}

/* =====================================================
MOBILE
===================================================== */

@media(max-width:768px){

.hero{

border-radius:22px;

margin:18px 0 40px;

}

.hero-inner{

padding:32px 20px;

gap:24px;

}

.hero h1{

font-size:32px;

line-height:1.2;

}

.hero p{

font-size:14px;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;

height:50px;

font-size:14px;

}

.hero-trust{

gap:8px;

}

.hero-trust span{

font-size:11px;

padding:7px 12px;

}

.hero-card{

padding:22px;

border-radius:20px;

}

.hero-card h3{

font-size:22px;

}

.hero-card p{

font-size:13px;

}

.hero-stats div{

padding:14px;

}

.hero-stats strong{

font-size:20px;

}

}


/* =====================================================
MOBILE HERO PERFECT FIX
===================================================== */

@media(max-width:768px){

.hero{

margin:12px 0 35px;

border-radius:0 0 22px 22px;

min-height:auto;

overflow:hidden;

}

.hero-inner{

display:flex;

flex-direction:column;

padding:26px 18px 28px;

gap:22px;

}

/* LEFT */

.hero-left{

width:100%;

text-align:left;

}

/* BADGE */

.hero-badge{

font-size:10px;

padding:7px 12px;

margin-bottom:14px;

border-radius:999px;

}

/* TITLE */

.hero h1{

font-size:28px;

line-height:1.18;

letter-spacing:-.5px;

margin-bottom:14px;

}

.hero h1 span{

margin-top:4px;

font-size:26px;

line-height:1.2;

}

/* TEXT */

.hero p{

font-size:14px;

line-height:1.75;

margin-bottom:20px;

color:#dbe4ee;

}

/* BUTTONS */

.hero-buttons{

display:grid;

grid-template-columns:1fr;

gap:12px;

margin-bottom:18px;

}

.btn-primary,
.btn-secondary{

width:100%;

height:48px;

padding:0 16px;

font-size:13px;

border-radius:12px;

}

/* TRUST */

.hero-trust{

display:grid;

grid-template-columns:1fr 1fr;

gap:8px;

}

.hero-trust span{

display:flex;

align-items:center;
justify-content:center;

text-align:center;

padding:8px 10px;

font-size:10px;

line-height:1.4;

border-radius:999px;

}

/* RIGHT CARD */

.hero-right{

width:100%;

}

.hero-card{

padding:18px;

border-radius:18px;

}

.hero-card h3{

font-size:20px;

line-height:1.4;

margin-bottom:10px;

}

.hero-card p{

font-size:13px;

line-height:1.7;

margin-bottom:16px;

}

/* STATS */

.hero-stats{

gap:10px;

}

.hero-stats div{

padding:12px;

border-radius:14px;

}

.hero-stats strong{

font-size:18px;

margin-bottom:4px;

}

.hero-stats span{

font-size:10px;

line-height:1.4;

}

}


/* BUY NOW BUTTON */

.buy-btn{

background:linear-gradient(
135deg,
#ff6b00,
#ff9900
)!important;

color:#fff;

font-weight:800;

box-shadow:
0 10px 25px rgba(255,102,0,.28);

animation:buyPulse 2s infinite;

}

.buy-btn:hover{

transform:translateY(-2px);

box-shadow:
0 14px 30px rgba(255,102,0,.38);

}

/* ANIMATION */

@keyframes buyPulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.04);
}

100%{
transform:scale(1);
}

}


<script>

function openForm(){

document
.getElementById("buyModal")
.style.display = "block";

document.body.style.overflow = "hidden";

}

function closeForm(){

document
.getElementById("buyModal")
.style.display = "none";

document.body.style.overflow = "auto";

}

/* CLOSE ON OUTSIDE CLICK */

window.onclick = function(e){

let modal =
document.getElementById("buyModal");

if(e.target == modal){

closeForm();

}

}

</script>

/* =========================================
BUY NOW MODAL FIX
========================================= */

.modal{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.65);

z-index:999999;

padding:20px;

overflow:auto;

}

.modal-box{

background:#ffffff;

max-width:520px;

margin:60px auto;

padding:30px;

border-radius:24px;

box-shadow:
0 25px 60px rgba(0,0,0,.25);

animation:popup .25s ease;

}

@keyframes popup{

from{
transform:scale(.9);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}

.modal-box h3{

font-size:28px;

margin-bottom:25px;

font-weight:800;

color:#0f172a;

text-align:center;

}

.modal-box form{

display:flex;

flex-direction:column;

gap:16px;

}

.modal-box input{

height:54px;

padding:0 16px;

border-radius:14px;

border:1px solid #dbe4ee;

font-size:15px;

outline:none;

}

.modal-box input:focus{

border-color:#f59e0b;

box-shadow:
0 0 0 4px rgba(245,158,11,.15);

}

.submit-btn{

height:56px;

border:none;

border-radius:14px;

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

font-size:16px;

font-weight:800;

cursor:pointer;

}

.cancel-btn{

height:52px;

border:none;

border-radius:14px;

background:#e2e8f0;

font-size:15px;

font-weight:700;

cursor:pointer;

}

.btn.buy-now{

background:
linear-gradient(
135deg,
#f59e0b,
#fbbf24
);

color:#000;

font-weight:800;

animation:pulse 1.5s infinite;

}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.04);
}

100%{
transform:scale(1);
}

}

/* MOBILE */

@media(max-width:768px){

.modal-box{

padding:24px 20px;

margin:40px auto;

border-radius:20px;

}

.modal-box h3{

font-size:24px;

}

}

/* =========================================
PRODUCT PAGE PREMIUM DESIGN
========================================= */

.product-wrapper{

display:grid;

grid-template-columns:
1fr 1fr;

gap:50px;

align-items:start;

margin:35px 0 50px;

background:#fff;

padding:30px;

border-radius:30px;

box-shadow:
0 10px 40px rgba(15,23,42,.06);

}

/* IMAGE */

.product-image{

background:#f8fafc;

padding:25px;

border-radius:26px;

position:sticky;

top:110px;

}

.product-image img{

width:100%;

border-radius:20px;

object-fit:contain;

transition:.35s ease;

}

.product-image img:hover{

transform:scale(1.03);

}

/* TITLE */

.product-title{

font-size:38px;

line-height:1.25;

font-weight:800;

color:#0f172a;

margin-bottom:20px;

letter-spacing:-1px;

}

/* PRICE */

.product-price{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:14px;

margin-bottom:25px;

}

.new-price,
.offer-price{

font-size:38px;

font-weight:900;

color:#f97316;

}

.old-price{

font-size:22px;

text-decoration:line-through;

color:#94a3b8;

}

.discount-badge{

background:#dc2626;

color:#fff;

padding:8px 14px;

border-radius:999px;

font-size:13px;

font-weight:800;

}

/* BUTTONS */

.product-actions{

display:flex;

flex-wrap:wrap;

gap:14px;

margin:30px 0;

}

.product-actions .btn{

flex:1;

min-width:180px;

height:56px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

font-size:16px;

font-weight:800;

text-decoration:none;

transition:.25s ease;

cursor:pointer;

border:none;

}

.btn.call{

background:#0f172a;

color:#fff;

}

.btn.whatsapp{

background:#16a34a;

color:#fff;

}

.btn.buy-now{

background:
linear-gradient(
135deg,
#f59e0b,
#fb923c
);

color:#000;

animation:buyPulse 1.8s infinite;

box-shadow:
0 12px 25px rgba(245,158,11,.28);

}

.product-actions .btn:hover{

transform:translateY(-3px);

}

/* DESCRIPTION */

.product-description{

background:#f8fafc;

padding:28px;

border-radius:24px;

font-size:16px;

line-height:1.9;

color:#334155;

margin-top:10px;

border:1px solid #e2e8f0;

}

.product-description strong{

color:#0f172a;

font-weight:700;

}

/* SPECIFICATIONS */

.section{

margin-top:45px;

background:#fff;

padding:30px;

border-radius:26px;

box-shadow:
0 8px 30px rgba(15,23,42,.05);

}

.section h2{

font-size:28px;

font-weight:800;

margin-bottom:25px;

color:#0f172a;

}

.spec-table{

overflow-x:auto;

}

.spec-table table{

width:100%;

border-collapse:collapse;

overflow:hidden;

border-radius:20px;

}

.spec-table tr:nth-child(even){

background:#f8fafc;

}

.spec-table td{

padding:18px;

font-size:15px;

border-bottom:1px solid #e2e8f0;

}

.spec-table td:first-child{

font-weight:700;

color:#0f172a;

width:35%;

}

/* TAGS */

.product-tags{

margin-top:45px;

background:#fff;

padding:30px;

border-radius:26px;

box-shadow:
0 8px 30px rgba(15,23,42,.05);

}

.product-tags strong{

display:block;

font-size:24px;

font-weight:800;

margin-bottom:20px;

color:#0f172a;

}

.tag-list{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.tag-list a{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 18px;

border-radius:999px;

background:#eff6ff;

color:#2563eb;

font-size:14px;

font-weight:700;

text-decoration:none;

transition:.25s ease;

border:1px solid #bfdbfe;

}

.tag-list a:hover{

background:#2563eb;

color:#fff;

transform:translateY(-2px);

}

/* RELATED */

.related-section{

margin-top:50px;

}

.related-section h2{

font-size:30px;

font-weight:800;

margin-bottom:25px;

color:#0f172a;

}

.related-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.related-card{

background:#fff;

border-radius:26px;

overflow:hidden;

box-shadow:
0 10px 30px rgba(15,23,42,.06);

transition:.3s ease;

}

.related-card:hover{

transform:translateY(-8px);

}

.related-card a{

display:block;

padding:20px;

text-decoration:none;

color:inherit;

}

.related-card img{

width:100%;

height:220px;

object-fit:contain;

background:#f8fafc;

border-radius:20px;

padding:15px;

margin-bottom:18px;

}

.related-card h3{

font-size:18px;

line-height:1.5;

font-weight:700;

color:#0f172a;

margin-bottom:14px;

min-height:58px;

}

.rel-price{

font-size:24px;

font-weight:900;

color:#f97316;

}

/* BREADCRUMB */

.breadcrumb{

display:flex;

flex-wrap:wrap;

gap:8px;

font-size:14px;

margin:20px 0;

color:#64748b;

}

.breadcrumb a{

color:#2563eb;

text-decoration:none;

font-weight:600;

}

/* ANIMATION */

@keyframes buyPulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.04);
}

100%{
transform:scale(1);
}

}

/* MOBILE */

@media(max-width:992px){

.product-wrapper{

grid-template-columns:1fr;

padding:20px;

gap:25px;

}

.product-image{

position:relative;

top:0;

}

.product-title{

font-size:28px;

}

.new-price,
.offer-price{

font-size:30px;

}

.section,
.product-tags{

padding:22px;

}

.related-card img{

height:180px;

}

}

@media(max-width:768px){

.product-actions{

flex-direction:column;

}

.product-actions .btn{

width:100%;

min-width:100%;

}

.product-title{

font-size:24px;

line-height:1.4;

}

.product-description{

font-size:15px;

padding:20px;

line-height:1.8;

}

.tag-list a{

font-size:13px;

padding:10px 14px;

}

.related-grid{

grid-template-columns:1fr;

}

}