/* =====================================
   HAMRON PREMIUM WEBSITE CSS
===================================== */
 
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
 
html{
    scroll-behavior:smooth;
}
 
body{
    font-family:'Poppins',sans-serif;
    background:#0b0b0b;
    color:#ffffff;
}
 
img{
    max-width:100%;
    height:auto;
    display:block;
    opacity:1;
    visibility:visible;
}
 
a{
    text-decoration:none;
    color:inherit;
}
 
.container{
    width:90%;
    max-width:1300px;
    margin:auto;
}
 
 
/* ===============================
 TOP BAR
================================ */
 
.topbar{
    background:#050505;
    border-bottom:1px solid rgba(212,175,55,.2);
    padding:10px 0;
    font-size:14px;
}
 
.top-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
 
.top-content i{
    color:#d4af37;
    margin-right:8px;
}
 
 
 
/* ===============================
 NAVBAR
================================ */
 
.navbar{
 
    position:sticky;
    top:0;
    z-index:1000;
 
    background:rgba(10,10,10,.95);
 
    backdrop-filter:blur(15px);
 
    border-bottom:1px solid rgba(212,175,55,.2);
 
}
 
 
.nav-container{
 
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
 
}
 
 
.logo-img{
 
    width:125px;
    height:auto;
    display:block;
    opacity:1;
    visibility:visible;
 
}
 
 
.nav-menu{
 
    display:flex;
    list-style:none;
    gap:35px;
 
}
 
 
.nav-menu a{
 
    color:white;
    font-size:15px;
    transition:.3s;
 
}
 
 
.nav-menu a:hover,
.nav-menu .active{
 
    color:#d4af37;
 
}
 
 
 
/* ===============================
 HERO
================================ */
 
 
.hero{
 
    padding:0px 0;
 
    background:
 
    radial-gradient(circle at top right,
    rgba(212,175,55,.15),
    transparent 40%),
 
    #0b0b0b;
 
}
 
 
 
.hero-grid{
 
    display:grid;
 
    grid-template-columns:1fr 1fr;
 
    gap:60px;
 
    align-items:center;
 
}
 
 
 
.premium-tag{
 
    display:inline-block;
 
    padding:10px 22px;
 
    background:#d4af37;
 
    color:#000;
 
    border-radius:50px;
 
    font-weight:600;
 
    font-size:14px;
 
}
 
 
 
.hero-content h1{
 
    font-size:78px;
 
    line-height:1;
 
    margin:25px 0;
 
    font-weight:800;
 
}
 
 
.hero-content h1 span{
 
    display:block;
 
    color:#d4af37;
 
}
 
 
.hero-content p{
 
    color:#cfcfcf;
 
    font-size:18px;
 
    line-height:32px;
 
    max-width:520px;
 
}
 
 
 
.hero-buttons{
 
    display:flex;
 
    gap:20px;
 
    margin-top:35px;
 
}
 
 
 
.btn{
 
    padding:15px 35px;
 
    border-radius:50px;
 
    font-weight:600;
 
    transition:.3s;
 
}
 
 
 
.gold-btn{
 
    background:linear-gradient(
    90deg,#ffd54f,#d4af37);
 
    color:#000;
 
    box-shadow:
    0 10px 30px rgba(212,175,55,.35);
 
}
 
 
 
.gold-btn:hover{
 
    transform:translateY(-5px);
 
}
 
 
 
.outline-btn{
 
    border:2px solid #d4af37;
 
    color:#fff;
 
}
 
 
 
.outline-btn:hover{
 
    background:#d4af37;
 
    color:#000;
 
}
 
 
 
.hero-image img{
 
    width:100%;
    max-width:720px;
    height:auto;
    display:block;
    opacity:1;
    visibility:visible;
 
}
 
 
 
.features{
 
    display:flex;
 
    gap:25px;
 
    margin-top:50px;
 
}
 
 
.features div{
 
    display:flex;
 
    gap:12px;
 
    align-items:center;
 
}
 
 
.features i{
 
    color:#d4af37;
 
    font-size:25px;
 
}
 
 
 
/* ===============================
 SECTION TITLE
================================ */
 
 
.section-heading{
 
    text-align:center;
 
    margin-bottom:60px;
 
}
 
 
.section-heading span{
 
    color:#d4af37;
 
    letter-spacing:2px;
 
}
 
 
.section-heading h2{
 
    font-size:42px;
 
    margin-top:15px;
 
}
 
 
 
/* ===============================
 CATEGORY
================================ */
 
 
.categories,
.products,
.why-section{
 
    padding:100px 0;
 
}
 
 
 
.category-grid,
.product-grid,
.why-grid{
 
    display:grid;
 
    grid-template-columns:repeat(4,1fr);
 
    gap:30px;
 
}
 
 
 
.category-card,
.product-card,
.why-card{
 
    background:#151515;
 
    border-radius:20px;
 
    overflow:hidden;
 
    border:1px solid rgba(212,175,55,.15);
 
    transition:.4s;
 
}
 
 
 
.category-card:hover,
.product-card:hover,
.why-card:hover{
 
    transform:translateY(-10px);
 
    box-shadow:
    0 20px 40px rgba(212,175,55,.15);
 
}
 
 
 
.category-card img{
 
    height:220px;
    width:100%;
    object-fit:cover;
    display:block;
 
}
 
 
.category-card h3{
 
    padding:25px;
 
    color:#d4af37;
 
}
 
 
 
/* ===============================
 PRODUCTS
================================ */
 
 
.product-card img{
 
    height:280px;
 
    width:100%;
 
    object-fit:cover;
 
}
 
 
.product-card h3{
 
    padding:20px;
 
}
 
 
.product-card p{
 
    padding:0 20px;
 
    color:#aaa;
 
}
 
 
.product-card a{
 
    display:inline-block;
 
    margin:20px;
 
    background:#d4af37;
 
    color:#000;
 
    padding:12px 25px;
 
    border-radius:40px;
 
}
 
 
 
 
/* ===============================
 WHY
================================ */
 
 
.why-card{
 
    padding:35px;
 
    text-align:center;
 
}
 
 
.why-card i{
 
    color:#d4af37;
 
    font-size:35px;
 
    margin-bottom:20px;
 
}
 
 
.why-card h3{
 
    margin-bottom:15px;
 
}
 
 
 
/* ===============================
 DEALER
================================ */
 
 
.dealer-banner{
 
    padding:90px 0;
 
    text-align:center;
 
    background:
 
    linear-gradient(
    135deg,#171717,#0b0b0b);
 
}
 
 
 
.dealer-banner h2{
 
    font-size:45px;
 
    color:#d4af37;
 
}
 
 
.dealer-banner p{
 
    margin:20px 0 35px;
 
    color:#ccc;
 
}
 
 
 
 
/* ===============================
 FOOTER
================================ */
 
 
footer{
 
    background:#050505;
 
    padding:70px 0 20px;
 
}
 
 
 
.footer-grid{
 
    display:grid;
 
    grid-template-columns:2fr 1fr 1fr;
 
    gap:40px;
 
}
 
 
.footer-logo{
 
    width:140px;
 
    margin-bottom:20px;
 
}
 
 
footer h3{
 
    color:#d4af37;
 
    margin-bottom:20px;
 
}
 
 
footer a{
 
    display:block;
 
    margin-bottom:10px;
 
    color:#aaa;
 
}
 
 
.copyright{
 
    text-align:center;
 
    margin-top:40px;
 
    color:#777;
 
}
 
 
 
/* ===============================
 MOBILE
================================ */
 
 
@media(max-width:900px){
 
 
.hero-grid,
.category-grid,
.product-grid,
.why-grid,
.footer-grid{
 
    grid-template-columns:1fr;
 
}
 
 
 
.nav-container{
 
    flex-direction:column;
 
    gap:20px;
 
}
 
 
 
.nav-menu{
 
    flex-wrap:wrap;
 
    justify-content:center;
 
}
 
 
 
.hero-content h1{
 
    font-size:45px;
 
}
 
 
 
.features{
 
    flex-direction:column;
 
}
 
 
}

/* =================================
   PRODUCT PAGE CSS
================================= */
 
 
.page-hero{
 
    padding:120px 0 80px;
 
    text-align:center;
 
    background:
    radial-gradient(circle at top,
    rgba(212,175,55,0.15),
    transparent 45%),
    #0b0b0b;
 
}
 
 
.page-hero h1{
 
    font-size:55px;
 
    color:#ffffff;
 
    margin-bottom:20px;
 
}
 
 
.page-hero p{
 
    max-width:700px;
 
    margin:auto;
 
    color:#cfcfcf;
 
    font-size:18px;
 
    line-height:1.8;
 
}
 
 
/* PRODUCT SECTION */
 
.featured-products{
 
    padding:90px 0;
 
    background:#111;
 
}
 
 
.products-grid{
 
    display:grid;
 
    grid-template-columns:repeat(4,1fr);
 
    gap:30px;
 
}
 
 
 
.product-card{
 
    background:#161616;
 
    border:1px solid rgba(212,175,55,0.15);
 
    border-radius:20px;
 
    padding:25px;
 
    text-align:center;
 
    transition:.4s;
 
}
 
 
 
.product-card:hover{
 
    transform:translateY(-10px);
 
    border-color:#d4af37;
 
    box-shadow:
    0 20px 40px rgba(212,175,55,.15);
 
}
 
 
 
.product-card img{
 
    width:100%;
 
    height:230px;
 
    object-fit:contain;
 
    margin-bottom:20px;
 
}
 
 
 
.product-card h3{
 
    color:#ffffff;
 
    font-size:22px;
 
    margin-bottom:15px;
 
}
 
 
 
.product-card p{
 
    color:#aaa;
 
    font-size:15px;
 
    line-height:1.7;
 
    margin-bottom:25px;
 
}
 
 
 
/* PRODUCT BUTTON */
 
.product-card .btn{
 
    display:inline-block;
 
    background:#d4af37;
 
    color:#000;
 
    padding:12px 28px;
 
    border-radius:50px;
 
    font-weight:600;
 
}
 
 
 
/* MOBILE RESPONSIVE */
 
@media(max-width:900px){
 
 
.products-grid{
 
    grid-template-columns:1fr;
 
}
 
 
.page-hero h1{
 
    font-size:40px;
 
}
 
 
}
 /* ==========================
   NAVBAR
========================== */
 
.navbar{
 
    width:100%;
 
    background:#0b0b0b;
 
    position:sticky;
 
    top:0;
 
    z-index:999;
 
}
 
 
.navbar .container{
 
    display:flex;
 
    align-items:center;
 
    justify-content:space-between;
 
    padding:15px 0;
 
}
 
 
/* LOGO */
 
.logo-img{
 
    width:130px;
 
    height:auto;
 
    display:block;
 
}
 
 
 
/* MENU */
 
.navbar nav ul{
 
    display:flex;
 
    align-items:center;
 
    justify-content:flex-end;
 
    gap:35px;
 
    list-style:none;
 
    margin:0;
 
    padding:0;
 
}
 
 
.navbar nav ul li a{
 
    color:#ffffff;
 
    text-decoration:none;
 
    font-size:16px;
 
    font-weight:500;
 
    transition:.3s;
 
}
 
 
.navbar nav ul li a:hover,
 
.navbar nav ul li a.active{
 
    color:#d4af37;
 
}
 
/* ==========================
ABOUT PAGE
========================== */
 
 
.about-hero{
 
padding:120px 0 80px;
 
text-align:center;
 
background:#0b0b0b;
 
}
 
 
.about-hero h1{
 
color:#fff;
 
font-size:55px;
 
margin-bottom:20px;
 
}
 
 
.about-hero p{
 
color:#ccc;
 
font-size:18px;
 
}
 
 
 
.about-story{
 
padding:90px 0;
 
background:#111;
 
}
 
 
.about-flex{
 
display:flex;
 
align-items:center;
 
gap:50px;
 
}
 
 
.about-content{
 
flex:1;
 
}
 
 
.about-content h2{
 
color:#d4af37;
 
font-size:38px;
 
margin-bottom:25px;
 
}
 
 
.about-content p{
 
color:#ccc;
 
line-height:1.8;
 
margin-bottom:15px;
 
}
 
 
.about-image{
 
flex:1;
 
}
 
 
.about-image img{
 
width:100%;
 
border-radius:20px;
 
}
 
 
 
 
.mission-section{
 
padding:80px 0;
 
background:#0b0b0b;
 
}
 
 
.mission-grid{
 
display:grid;
 
grid-template-columns:repeat(2,1fr);
 
gap:30px;
 
}
 
 
.mission-card,
.why-card{
 
background:#161616;
 
padding:35px;
 
border-radius:20px;
 
border:1px solid rgba(212,175,55,.15);
 
}
 
 
.mission-card h3,
.why-card h3{
 
color:#d4af37;
 
margin-bottom:15px;
 
}
 
 
.mission-card p,
.why-card p{
 
color:#ccc;
 
line-height:1.7;
 
}
 
 
 
.why-section{
 
padding:80px 0;
 
background:#111;
 
text-align:center;
 
}
 
 
.why-section h2{
 
color:#fff;
 
font-size:40px;
 
margin-bottom:40px;
 
}
 
 
.why-grid{
 
display:grid;
 
grid-template-columns:repeat(3,1fr);
 
gap:30px;
 
}
 
 
 
@media(max-width:900px){
 
.about-flex{
 
flex-direction:column;
 
}
 
 
.mission-grid,
.why-grid{
 
grid-template-columns:1fr;
 
}
 
}
 
/* ==========================
CONTACT PAGE
========================== */
 
 
.contact-hero{
 
padding:120px 0 80px;
 
text-align:center;
 
background:#0b0b0b;
 
}
 
 
.contact-hero h1{
 
color:#fff;
 
font-size:55px;
 
margin-bottom:20px;
 
}
 
 
.contact-hero p{
 
color:#ccc;
 
font-size:18px;
 
}
 
 
 
 
.contact-section{
 
padding:90px 0;
 
background:#111;
 
}
 
 
 
.contact-grid{
 
display:grid;
 
grid-template-columns:1fr 1fr;
 
gap:50px;
 
}
 
 
 
.contact-info h2,
.contact-form h2{
 
color:#d4af37;
 
font-size:35px;
 
margin-bottom:20px;
 
}
 
 
 
.contact-info p{
 
color:#ccc;
 
line-height:1.8;
 
}
 
 
 
.contact-item{
 
margin-top:25px;
 
}
 
 
.contact-item h3{
 
color:#fff;
 
margin-bottom:8px;
 
}
 
 
 
.contact-form{
 
background:#161616;
 
padding:35px;
 
border-radius:20px;
 
border:1px solid rgba(212,175,55,.15);
 
}
 
 
 
.contact-form input,
.contact-form textarea{
 
width:100%;
 
padding:15px;
 
margin-bottom:18px;
 
background:#0b0b0b;
 
border:1px solid #333;
 
border-radius:10px;
 
color:#fff;
 
font-family:inherit;
 
}
 
 
 
.contact-form button{
 
width:100%;
 
padding:15px;
 
background:#d4af37;
 
color:#000;
 
border:none;
 
border-radius:50px;
 
font-weight:600;
 
cursor:pointer;
 
}
 
 
 
@media(max-width:900px){
 
 
.contact-grid{
 
grid-template-columns:1fr;
 
}
 
 
.contact-hero h1{
 
font-size:40px;
 
}
 
 
}
 
/* ==========================
DEALER PAGE
========================== */
 
 
.dealer-hero{
 
padding:120px 0 80px;
 
text-align:center;
 
background:#0b0b0b;
 
}
 
 
.dealer-hero h1{
 
color:#fff;
 
font-size:55px;
 
margin-bottom:20px;
 
}
 
 
.dealer-hero p{
 
color:#ccc;
 
font-size:18px;
 
max-width:700px;
 
margin:auto;
 
line-height:1.8;
 
}
 
 
 
.dealer-section{
 
padding:90px 0;
 
background:#111;
 
text-align:center;
 
}
 
 
 
.dealer-section h2{
 
color:#d4af37;
 
font-size:40px;
 
margin-bottom:45px;
 
}
 
 
 
.dealer-grid{
 
display:grid;
 
grid-template-columns:repeat(3,1fr);
 
gap:30px;
 
}
 
 
 
.dealer-card{
 
background:#161616;
 
padding:35px;
 
border-radius:20px;
 
border:1px solid rgba(212,175,55,.15);
 
}
 
 
 
.dealer-card h3{
 
color:#fff;
 
margin-bottom:15px;
 
}
 
 
 
.dealer-card p{
 
color:#ccc;
 
line-height:1.7;
 
}
 
 
 
.dealer-form-section{
 
padding:80px 0;
 
background:#0b0b0b;
 
}
 
 
 
.dealer-form{
 
max-width:600px;
 
margin:auto;
 
background:#161616;
 
padding:35px;
 
border-radius:20px;
 
border:1px solid rgba(212,175,55,.15);
 
}
 
 
 
.dealer-form h2{
 
color:#d4af37;
 
text-align:center;
 
margin-bottom:30px;
 
}
 
 
 
.dealer-form input,
.dealer-form textarea{
 
width:100%;
 
padding:15px;
 
margin-bottom:18px;
 
background:#0b0b0b;
 
border:1px solid #333;
 
border-radius:10px;
 
color:#fff;
 
font-family:inherit;
 
}
 
 
 
.dealer-form button{
 
width:100%;
 
padding:15px;
 
border:none;
 
border-radius:50px;
 
background:#d4af37;
 
color:#000;
 
font-weight:600;
 
cursor:pointer;
 
}
 
 
 
@media(max-width:900px){
 
.dealer-grid{
 
grid-template-columns:1fr;
 
}
 
 
.dealer-hero h1{
 
font-size:40px;
 
}
 
}

/* ==========================
   WARRANTY PAGE
========================== */
 
 
.warranty-hero{
 
    padding:120px 0 80px;
 
    text-align:center;
 
    background:#0b0b0b;
 
}
 
 
.warranty-hero h1{
 
    color:#ffffff;
 
    font-size:55px;
 
    margin-bottom:20px;
 
}
 
 
.warranty-hero p{
 
    color:#cccccc;
 
    font-size:18px;
 
    max-width:700px;
 
    margin:auto;
 
    line-height:1.8;
 
}
 
 
 
/* WARRANTY CARDS */
 
.warranty-section{
 
    padding:90px 0;
 
    background:#111;
 
}
 
 
.warranty-grid{
 
    display:grid;
 
    grid-template-columns:repeat(3,1fr);
 
    gap:30px;
 
}
 
 
.warranty-card{
 
    background:#161616;
 
    padding:35px;
 
    border-radius:20px;
 
    border:1px solid rgba(212,175,55,.15);
 
    transition:.3s;
 
}
 
 
.warranty-card:hover{
 
    transform:translateY(-8px);
 
    border-color:#d4af37;
 
}
 
 
.warranty-card h2{
 
    color:#d4af37;
 
    font-size:24px;
 
    margin-bottom:15px;
 
}
 
 
.warranty-card p{
 
    color:#cccccc;
 
    line-height:1.8;
 
}
 
 
 
 
/* WARRANTY FORM */
 
.warranty-form-section{
 
    padding:80px 0;
 
    background:#0b0b0b;
 
}
 
 
 
.warranty-form{
 
    max-width:600px;
 
    margin:auto;
 
    background:#161616;
 
    padding:35px;
 
    border-radius:20px;
 
    border:1px solid rgba(212,175,55,.15);
 
}
 
 
 
.warranty-form h2{
 
    color:#d4af37;
 
    text-align:center;
 
    margin-bottom:30px;
 
}
 
 
 
.warranty-form input,
.warranty-form textarea{
 
    width:100%;
 
    padding:15px;
 
    margin-bottom:18px;
 
    background:#0b0b0b;
 
    border:1px solid #333;
 
    border-radius:10px;
 
    color:#ffffff;
 
    font-family:inherit;
 
}
 
 
 
.warranty-form button{
 
    width:100%;
 
    padding:15px;
 
    background:#d4af37;
 
    color:#000;
 
    border:none;
 
    border-radius:50px;
 
    font-weight:600;
 
    cursor:pointer;
 
}
 
 
 
.warranty-form button:hover{
 
    opacity:.85;
 
}
 
 
 
/* MOBILE */
 
@media(max-width:900px){
 
 
.warranty-grid{
 
    grid-template-columns:1fr;
 
}
 
 
.warranty-hero h1{
 
    font-size:40px;
 
}
 
}
 
/* ==========================
   FLOATING WHATSAPP ICON
========================== */
 
.whatsapp-btn{
 
    position:fixed;
 
    right:25px;
 
    bottom:25px;
 
    width:65px;
 
    height:65px;
 
    background:#25D366;
 
    color:white;
 
    border-radius:50%;
 
    display:flex;
 
    align-items:center;
 
    justify-content:center;
 
    text-decoration:none;
 
    font-size:34px;
 
    z-index:9999;
 
    box-shadow:
    0 8px 25px rgba(0,0,0,0.35);
 
    transition:0.3s ease;
 
}
 
 
.whatsapp-btn:hover{
 
    transform:scale(1.12);
 
    box-shadow:
    0 12px 35px rgba(37,211,102,0.5);
 
}
 
 
 
/* Mobile size */
 
@media(max-width:600px){
 
.whatsapp-btn{
 
    width:58px;
 
    height:58px;
 
    font-size:30px;
 
    right:18px;
 
    bottom:18px;
 
}
 
}

@media (max-width:768px){
 
.top-left,
.top-center{
 
    display:none;
 
}
 
}