/* =====================================
   SUVARNA JEWELLERS V5
   PREMIUM STYLE CSS
===================================== */


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

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


html{
    scroll-behavior:smooth;
}


body{

    font-family:
    "Georgia",
    "Times New Roman",
    serif;

    background:#2b0015;

    color:#ffffff;

    line-height:1.7;

}


a{

    text-decoration:none;

    color:inherit;

}


img{

    max-width:100%;

    display:block;

}



/* =========================
   COLOR VARIABLES
========================= */

:root{

    --gold:#d4af37;

    --light-gold:#f5e6b8;

    --dark:#1a000d;

    --maroon:#2b0015;

    --black:#0f0008;

}



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


.top-header{

    background:
    linear-gradient(
    135deg,
    #1a000d,
    #2b0015
    );

    padding:25px 20px;

    text-align:center;

    border-bottom:
    1px solid rgba(212,175,55,.5);

}



.logo-img{

    width:160px;

    height:auto;

    margin:auto;

}



.tagline{

    color:var(--light-gold);

    margin-top:12px;

    letter-spacing:2px;

    font-size:15px;

}



/* =========================
   NAVBAR
========================= */


.navbar{

    position:sticky;

    top:0;

    z-index:9999;


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:18px 8%;


    background:
    rgba(15,0,8,.90);


    backdrop-filter:blur(20px);


    border-bottom:
    1px solid rgba(212,175,55,.25);


    box-shadow:
    0 10px 30px rgba(0,0,0,.35);

}



.logo a{

    color:var(--gold);

    font-size:26px;

    font-weight:700;

    letter-spacing:2px;

}



/* NAV LINKS */


.nav-links{

    display:flex;

    list-style:none;

    gap:25px;

}



.nav-links a{

    color:#ffffff;

    font-size:15px;

    transition:.3s;

}



.nav-links a:hover{

    color:var(--gold);

}



/* MOBILE MENU ICON */


.menu-toggle{

    display:none;

    color:var(--gold);

    font-size:30px;

    cursor:pointer;

}



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


@media(max-width:768px){


.navbar{

    flex-direction:column;

    gap:15px;

}


.menu-toggle{

    display:block;

}


.nav-links{

    display:none;

    flex-direction:column;

    width:100%;

    text-align:center;


    background:#111;

    padding:20px 0;

}


.nav-links.active{

    display:flex;

}


.nav-links li{

    margin:8px 0;

}


.logo a{

    font-size:22px;

}


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


.hero{

    min-height:700px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:80px 8%;


    position:relative;


    background:

    linear-gradient(
        rgba(20,0,10,.75),
        rgba(20,0,10,.85)
    ),

    url("hero.jpg");


    background-size:cover;

    background-position:center;

    overflow:hidden;

}



.hero-content{

    max-width:1000px;

    position:relative;

    z-index:2;

}



/* Premium Badge */


.premium-badge{

    display:inline-block;

    background:var(--gold);

    color:var(--dark);

    padding:8px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:bold;

    letter-spacing:2px;

    margin-bottom:25px;

}




.hero h1{

    font-size:52px;

    line-height:1.25;

    color:#ffffff;

    margin-bottom:25px;

}



.hero h1 span{

    color:var(--gold);

}




.hero-description{

    color:var(--light-gold);

    font-size:19px;

    max-width:850px;

    margin:auto;

    margin-bottom:40px;

}



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


.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

}



.hero-btn,
.catalogue-btn,
.explore-btn{


    display:inline-block;

    padding:14px 30px;

    border-radius:40px;

    font-weight:700;

    transition:.3s;

}



.hero-btn{

    background:var(--gold);

    color:var(--dark);

}



.hero-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 12px 30px rgba(212,175,55,.4);

}




.catalogue-btn{

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

    color:var(--gold);

    background:transparent;

}



.catalogue-btn:hover{

    background:var(--gold);

    color:var(--dark);

}



.explore-btn{

    background:#ffffff;

    color:var(--dark);

}



.explore-btn:hover{

    transform:translateY(-4px);

}



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


.hero-social{

    margin-top:35px;

    color:var(--light-gold);

}



.hero-social a{

    color:var(--gold);

    margin:0 10px;

    transition:.3s;

}



.hero-social a:hover{

    color:#ffffff;

}



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


.hero-stats{

    margin-top:60px;

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

}



.stat-box{


    padding:25px 15px;


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


    border:
    1px solid rgba(212,175,55,.4);


    border-radius:18px;


    backdrop-filter:blur(10px);


}



.stat-box h2{

    color:var(--gold);

    font-size:32px;

}



.stat-box p{

    color:var(--light-gold);

    font-size:14px;

}



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


@media(max-width:900px){


.hero h1{

    font-size:38px;

}


.hero-stats{

    grid-template-columns:
    repeat(2,1fr);

}


}



@media(max-width:600px){


.hero{

    min-height:600px;

    padding:60px 5%;

}


.hero h1{

    font-size:30px;

}


.hero-description{

    font-size:16px;

}


.hero-buttons{

    flex-direction:column;

}


.hero-btn,
.catalogue-btn,
.explore-btn{

    width:100%;

}


.hero-stats{

    grid-template-columns:1fr;

}


   }
/* =========================
   COMMON SECTION STYLE
========================= */


section{

    padding:90px 8%;

}


.small-title{

    display:block;

    color:var(--gold);

    letter-spacing:3px;

    font-size:14px;

    font-weight:bold;

    text-align:center;

    margin-bottom:15px;

}



section h2{

    text-align:center;

    color:#ffffff;

    font-size:42px;

    margin-bottom:20px;

}



.section-subtitle{

    text-align:center;

    max-width:800px;

    margin:0 auto 50px;

    color:var(--light-gold);

}



/* =========================
   TRUST BAR
========================= */


.trust-bar{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

    padding:50px 8%;

    background:#18000b;

}



.trust-box{

    text-align:center;

    padding:30px 20px;


    border:

    1px solid rgba(212,175,55,.35);


    border-radius:20px;


    background:

    rgba(255,255,255,.04);


    transition:.3s;

}



.trust-box:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

}



.trust-box h3{

    color:var(--gold);

    margin-bottom:12px;

}



.trust-box p{

    color:var(--light-gold);

    font-size:15px;

}



/* =========================
   COLLECTION SECTION
========================= */


.collections{

    background:

    linear-gradient(
    180deg,
    #2b0015,
    #160009
    );

}



.collection-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

}



.collection-link{

    display:block;

}



.card{

    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(212,175,55,.25);


    border-radius:22px;


    overflow:hidden;


    padding-bottom:25px;


    transition:.4s;


    height:100%;

}



.card:hover{

    transform:translateY(-10px);


    border-color:var(--gold);


    box-shadow:

    0 20px 40px rgba(0,0,0,.4);

}



.card img{

    width:100%;

    height:280px;

    object-fit:cover;

}



.card h3{

    color:var(--gold);

    font-size:24px;

    margin:20px;

}



.card p{

    color:var(--light-gold);

    padding:0 20px;

}



/* =========================
   ABOUT SECTION
========================= */


.about{

    background:#1a000d;

}



.about-content{

    max-width:1000px;

    margin:auto;

    text-align:center;

}



.about h2{

    color:var(--gold);

}



.about p{

    color:var(--light-gold);

    font-size:18px;

    margin:20px auto;

}



.about-points{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

    margin-top:35px;

}



.about-points span{

    padding:12px 22px;

    border-radius:30px;

    border:

    1px solid rgba(212,175,55,.5);


    color:#ffffff;

}



/* =========================
   MANUFACTURING
========================= */


.manufacturing{

    background:#2b0015;

}



.manufacturing-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

}



.manufacturing-card{

    padding:35px 25px;


    border-radius:20px;


    background:#160009;


    border:

    1px solid rgba(212,175,55,.3);


    text-align:center;


}



.manufacturing-card h3{

    color:var(--gold);

    font-size:25px;

    margin-bottom:15px;

}



.manufacturing-card p{

    color:var(--light-gold);

}



/* =========================
   RESPONSIVE
========================= */


@media(max-width:1000px){


.trust-bar{

    grid-template-columns:
    repeat(2,1fr);

}


.collection-grid{

    grid-template-columns:
    repeat(2,1fr);

}


.manufacturing-grid{

    grid-template-columns:
    1fr;

}


}



@media(max-width:600px){


section{

    padding:60px 5%;

}


section h2{

    font-size:30px;

}


.trust-bar{

    grid-template-columns:1fr;

}


.collection-grid{

    grid-template-columns:1fr;

}


.card img{

    height:230px;

}


         }
/* =========================
   CONTACT SECTION
========================= */


.contact{

    background:#160009;

}



.contact-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

}



.contact-box{

    padding:35px 25px;

    text-align:center;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(212,175,55,.3);


    border-radius:20px;


    transition:.3s;

}



.contact-box:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

}



.contact-box h3{

    color:var(--gold);

    margin-bottom:15px;

}



.contact-box p{

    color:var(--light-gold);

    margin-bottom:20px;

}



.contact-box a{

    display:inline-block;

    padding:10px 25px;

    border-radius:30px;


    background:var(--gold);

    color:var(--dark);


    font-weight:bold;

}



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


.footer{

    background:#0f0008;

    text-align:center;

    padding:60px 8% 30px;


    border-top:

    1px solid rgba(212,175,55,.3);

}



.footer .logo-img{

    width:120px;

    margin:auto;

}



.footer h2{

    color:var(--gold);

    margin:20px 0;

}



.footer p{

    color:var(--light-gold);

}



.footer-links,
.footer-social{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin:25px 0;

}



.footer-links a,
.footer-social a{

    color:#ffffff;

    transition:.3s;

}



.footer-links a:hover,
.footer-social a:hover{

    color:var(--gold);

}



.footer-copy{

    font-size:14px;

    margin-top:25px;

}



/* =========================
   FLOATING WHATSAPP
========================= */


.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:90px;


    width:60px;

    height:60px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#25D366;


    color:#ffffff;


    font-size:30px;


    z-index:999;


    box-shadow:

    0 10px 30px rgba(0,0,0,.4);

}



/* =========================
   MOBILE BOTTOM BAR
========================= */


.mobile-bottom-bar{

    display:none;

}



@media(max-width:768px){


.contact-grid{

    grid-template-columns:1fr;

}


.mobile-bottom-bar{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;


    display:flex;


    z-index:9999;


}


.mobile-bottom-bar a{

    flex:1;

    text-align:center;

    padding:15px;


    font-weight:bold;

}



.call-btn{

    background:#ffffff;

    color:#111;

}



.wa-btn{

    background:#25D366;

    color:#ffffff;

}



.floating-whatsapp{

    bottom:80px;

    right:15px;

}


}



/* =========================
   SCROLL BUTTON
========================= */


#scrollTopBtn{

    position:fixed;

    right:25px;

    bottom:25px;


    width:45px;

    height:45px;


    border-radius:50%;


    border:none;


    background:var(--gold);


    color:var(--dark);


    font-size:22px;


    cursor:pointer;


    display:none;


    z-index:999;

}



/* =========================
   FINAL MOBILE FIX
========================= */


@media(max-width:480px){


.logo-img{

    width:130px;

}



.hero h1{

    font-size:26px;

}



.hero-description{

    font-size:15px;

}



.card h3{

    font-size:21px;

}



.contact-box{

    padding:25px 15px;

}


}