/*==================================================
            GOOGLE FONTS & RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    text-decoration:none;
    list-style:none;
    scroll-behavior:smooth;
}

:root{

    --gold:#d4af37;
    --gold-light:#f7d774;
    --black:#070707;
    --dark:#111111;
    --white:#ffffff;
    --gray:#bdbdbd;

    --shadow:0 15px 35px rgba(0,0,0,.35);

    --transition:.4s ease;

}

html{
    font-size:62.5%;
    overflow-x:hidden;
}

body{

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

    color:var(--white);

    overflow-x:hidden;

    background:
    radial-gradient(circle at top left,
    rgba(212,175,55,.10),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(212,175,55,.08),
    transparent 30%),

    linear-gradient(
    135deg,
    #040404,
    #0b0b0b,
    #111111,
    #090909,
    #040404);

    background-attachment:fixed;

}

/*==================================================
                SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);
    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#b8860b;

}

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

section{

    padding:11rem 9%;

}

img{

    width:100%;
    display:block;

}

.title{

    text-align:center;

    font-size:4.2rem;

    font-family:"Playfair Display",serif;

    color:var(--gold);

    margin-bottom:6rem;

    letter-spacing:1px;

}

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

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:2rem 9%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(10,10,10,.75);

    backdrop-filter:blur(18px);

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

    z-index:1000;

    transition:.4s;

}

/*==================================================
                LOGO
==================================================*/

.logo{

    font-size:3rem;

    font-family:"Playfair Display",serif;

    font-weight:700;

    color:#fff;

}

.logo span{

    color:var(--gold);

}

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

.navbar{

    display:flex;

    gap:4rem;

}

.navbar a{

    color:#f2f2f2;

    font-size:1.7rem;

    font-weight:500;

    position:relative;

    transition:.4s;

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.4s;

}

.navbar a:hover{

    color:var(--gold);

}

.navbar a:hover::after{

    width:100%;

}

.navbar a.active{

    color:var(--gold);

}

.navbar a.active::after{

    width:100%;

}

/*==================================================
                ICONS
==================================================*/

.icons{

    display:flex;

    align-items:center;

    gap:2rem;

}

.icons i{

    color:#fff;

    font-size:2rem;

    cursor:pointer;

    transition:.3s;

}

.icons i:hover{

    color:var(--gold);

    transform:translateY(-3px);

}

#menu-btn{

    display:none;

}

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

.btn{

    display:inline-block;

    margin-top:2rem;

    padding:1.5rem 4rem;

    background:linear-gradient(
    45deg,
    #b8860b,
    #d4af37,
    #ffd700);

    color:#111;

    border-radius:50px;

    font-size:1.6rem;

    font-weight:700;

    transition:.4s;

}

.btn:hover{

    transform:translateY(-6px);

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

}

.btn-outline{

    background:transparent;

    color:var(--gold);

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

    margin-left:1.5rem;

}

.btn-outline:hover{

    background:var(--gold);

    color:#111;

}

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

.home{

    min-height:100vh;

    display:grid;

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

    align-items:center;

    gap:8rem;

    padding-top:14rem;

}

.subtitle{

    color:var(--gold);

    font-size:1.8rem;

    letter-spacing:2px;

    text-transform:uppercase;

}

.home h1{

    font-size:6rem;

    line-height:1.2;

    margin:2rem 0;

    font-family:"Playfair Display",serif;

}

.home h1 span{

    color:var(--gold);

}

.home p{

    color:#d0d0d0;

    font-size:1.8rem;

    line-height:1.9;

    max-width:60rem;

}

.hero-buttons{

    margin-top:3rem;

}

.home .image img{

    border-radius:25px;

    animation:float 5s ease-in-out infinite;

    box-shadow:0 20px 50px rgba(0,0,0,.5);

}

/*==================================================
                FLOAT
==================================================*/

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

}
/*==================================================
                CATEGORIES
==================================================*/

.categories{
    position:relative;
}

.box-container{

    display:grid;

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

    gap:3rem;

}

.box{

    background:rgba(20,20,20,.75);

    backdrop-filter:blur(18px);

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

    border-radius:25px;

    padding:4rem 3rem;

    text-align:center;

    transition:.4s;

    cursor:pointer;

    overflow:hidden;

    position:relative;

}

.box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--gold);

    transform:scaleX(0);

    transition:.4s;

}

.box:hover::before{

    transform:scaleX(1);

}

.box:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

    box-shadow:
    0 15px 40px rgba(212,175,55,.18);

}

.box i{

    font-size:5rem;

    color:var(--gold);

    margin-bottom:2rem;

    transition:.4s;

}

.box:hover i{

    transform:scale(1.15) rotate(6deg);

}

.box h3{

    font-size:2.4rem;

    margin-bottom:1.5rem;

    color:#fff;

}

.box p{

    font-size:1.6rem;

    color:#cfcfcf;

    line-height:1.8;

}

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

.products{

    position:relative;

}

.product-container{

    display:grid;

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

    gap:3.5rem;

}

.product-card{

    background:rgba(18,18,18,.82);

    border-radius:28px;

    overflow:hidden;

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

    transition:.45s;

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

}

.product-card:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

    box-shadow:
    0 0 25px rgba(212,175,55,.20),
    0 0 50px rgba(212,175,55,.10);

}

.product-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.6s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-content{

    padding:3rem;

}

.product-content h3{

    font-size:2.5rem;

    color:#fff;

    margin-bottom:1rem;

    font-family:"Playfair Display",serif;

}

.product-content p{

    color:#cfcfcf;

    font-size:1.6rem;

    line-height:1.8;

    margin-bottom:2rem;

}

/* Badge */

.product-card{

    position:relative;

}

.product-card::after{

    content:"Nouveau";

    position:absolute;

    top:20px;

    right:20px;

    background:linear-gradient(
    45deg,
    #b8860b,
    #ffd700);

    color:#111;

    padding:.8rem 1.8rem;

    border-radius:50px;

    font-size:1.2rem;

    font-weight:700;

    letter-spacing:1px;

}

/* Hover Button */

.product-card .btn{

    width:100%;

    text-align:center;

}

/* Image Overlay */

.product-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    transparent,
    rgba(0,0,0,.25));

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.product-card:hover::before{

    opacity:1;

}
/*==================================================
                WHY CHOOSE
==================================================*/

.why-choose{

    position:relative;

}

.heading{

    text-align:center;

    margin-bottom:6rem;

}

.heading span{

    color:var(--gold);

    font-size:1.8rem;

    text-transform:uppercase;

    letter-spacing:2px;

}

.heading h2{

    margin-top:1.5rem;

    font-size:4.5rem;

    font-family:"Playfair Display",serif;

    color:#fff;

}

.choose-container{

    display:grid;

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

    gap:3rem;

}

.choose-box{

    background:rgba(18,18,18,.80);

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

    border-radius:25px;

    padding:4rem 3rem;

    text-align:center;

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.choose-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--gold);

    transform:scaleX(0);

    transition:.4s;

}

.choose-box:hover::before{

    transform:scaleX(1);

}

.choose-box:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

    box-shadow:0 20px 40px rgba(212,175,55,.18);

}

.choose-box i{

    font-size:5rem;

    color:var(--gold);

    margin-bottom:2rem;

}

.choose-box h3{

    font-size:2.4rem;

    color:#fff;

    margin-bottom:1.5rem;

}

.choose-box p{

    color:#cfcfcf;

    font-size:1.6rem;

    line-height:1.8;

}

/*==================================================
                CONTACT
==================================================*/

.contact{

    text-align:center;

}

.contact-info{

    max-width:800px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:2rem;

}

.contact-info p{

    display:flex;

    align-items:center;

    gap:1.5rem;

    padding:2rem 2.5rem;

    border-radius:18px;

    background:rgba(20,20,20,.75);

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

    color:#fff;

    font-size:1.8rem;

    transition:.4s;

}

.contact-info p:hover{

    transform:translateX(10px);

    border-color:var(--gold);

}

.contact-info i{

    color:var(--gold);

    font-size:2.3rem;

}

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

.footer{

    background:#080808;

    border-top:1px solid rgba(212,175,55,.15);

    padding:6rem 9%;

    text-align:center;

}

.footer-content h2{

    font-size:3.5rem;

    color:var(--gold);

    font-family:"Playfair Display",serif;

}

.footer-content p{

    color:#cfcfcf;

    font-size:1.6rem;

    margin:1.5rem 0;

}

.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:2rem;

    margin:3rem 0;

}

.footer-links a{

    color:#fff;

    font-size:1.6rem;

    transition:.3s;

}

.footer-links a:hover{

    color:var(--gold);

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:2rem;

    margin-bottom:3rem;

}

.footer-social a{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

    color:#fff;

    font-size:2rem;

    transition:.4s;

}

.footer-social a:hover{

    background:var(--gold);

    color:#111;

    transform:translateY(-6px);

}

.copyright{

    margin-top:2rem;

    color:#888;

    font-size:1.4rem;

}

.developer{

    margin-top:1.5rem;

    font-size:1.6rem;

}

.developer span{

    color:var(--gold);

    font-weight:700;

    letter-spacing:2px;

}

/*==================================================
        BACK TO TOP
==================================================*/

#backToTop{

    position:fixed;

    bottom:25px;

    right:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--gold);

    color:#111;

    font-size:2rem;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

}

#backToTop:hover{

    transform:translateY(-6px);

}

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

#whatsapp{

    position:fixed;

    bottom:95px;

    right:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:2.8rem;

    cursor:pointer;

    transition:.4s;

    z-index:999;

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

}

#whatsapp:hover{

    transform:scale(1.1);

}
/*==================================================
                ANIMATIONS
==================================================*/

.hidden{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

}

/*==================================================
                LOADER
==================================================*/

.loader{

    position:fixed;

    inset:0;

    background:#050505;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

    transition:.5s;

}

.loader-hidden{

    opacity:0;

    visibility:hidden;

}

.spinner{

    width:70px;

    height:70px;

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

    border-top:6px solid var(--gold);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    100%{

        transform:rotate(360deg);

    }

}

/*==================================================
            PREMIUM GLOW EFFECT
==================================================*/

body::before{

    content:"";

    position:fixed;

    width:700px;

    height:700px;

    top:-250px;

    left:-250px;

    background:

    radial-gradient(circle,

    rgba(212,175,55,.08),

    transparent 70%);

    pointer-events:none;

    animation:moveGlow1 15s infinite ease-in-out;

}

body::after{

    content:"";

    position:fixed;

    width:650px;

    height:650px;

    bottom:-250px;

    right:-250px;

    background:

    radial-gradient(circle,

    rgba(212,175,55,.06),

    transparent 70%);

    pointer-events:none;

    animation:moveGlow2 18s infinite ease-in-out;

}

@keyframes moveGlow1{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(100px,80px);

    }

}

@keyframes moveGlow2{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-120px,-80px);

    }

}

/*==================================================
                IMAGE EFFECT
==================================================*/

.product-card img,
.home .image img{

    transition:.6s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.home .image img:hover{

    transform:scale(1.03);

}

/*==================================================
                SELECTION
==================================================*/

::selection{

    background:var(--gold);

    color:#111;

}

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

@media(max-width:991px){

    html{

        font-size:56%;

    }

    section{

        padding:8rem 6%;

    }

    .header{

        padding:2rem 6%;

    }

    .home{

        grid-template-columns:1fr;

        text-align:center;

        gap:5rem;

    }

    .home .image{

        order:-1;

    }

    .hero-buttons{

        display:flex;

        justify-content:center;

        flex-wrap:wrap;

    }

}

@media(max-width:768px){

    #menu-btn{

        display:block;

        font-size:2.6rem;

        color:#fff;

    }

    .navbar{

        position:absolute;

        top:100%;

        left:-100%;

        width:100%;

        background:#111;

        flex-direction:column;

        align-items:center;

        padding:3rem 0;

        gap:2rem;

        border-top:1px solid rgba(212,175,55,.15);

        transition:.4s;

    }

    .navbar.active{

        left:0;

    }

    .navbar a{

        font-size:2rem;

    }

    .icons i:not(#menu-btn){

        display:none;

    }

    .home h1{

        font-size:4.5rem;

    }

    .title{

        font-size:3.5rem;

    }

}

@media(max-width:600px){

    html{

        font-size:52%;

    }

    .logo{

        font-size:2.5rem;

    }

    .btn{

        width:100%;

        text-align:center;

    }

    .btn-outline{

        margin-left:0;

        margin-top:1.5rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .footer-links{

        flex-direction:column;

        gap:1.5rem;

    }

    .footer-social{

        flex-wrap:wrap;

    }

}

@media(max-width:450px){

    .home h1{

        font-size:3.8rem;

    }

    .heading h2{

        font-size:3.3rem;

    }

    .product-content h3{

        font-size:2.2rem;

    }

    .choose-box h3{

        font-size:2.1rem;

    }

}
/*==============================
        INTRO SCREEN
==============================*/

.intro{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#050505;

    z-index:999999;

    animation:introHide .8s ease forwards;

    animation-delay:2.5s;

}

.intro-content{

    text-align:center;

    animation:introZoom 1.2s ease;

}

.intro img{

    width:180px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

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

}

.intro h1{

    font-size:5rem;

    color:#fff;

    font-family:"Playfair Display",serif;

}

.intro h1 span{

    color:#d4af37;

}

.intro p{

    margin-top:15px;

    font-size:1.8rem;

    color:#cfcfcf;

    letter-spacing:3px;

}

@keyframes introZoom{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes introHide{

    to{

        opacity:0;

        visibility:hidden;

    }

}
.contact-info a {
    color: #fff;
    text-decoration: none;
}

.contact-info a:visited {
    color: #fff;
}

.contact-info a:hover {
    color: #d4af37; /* ذهبي عند المرور بالفأرة */
}
.yh-container{
    position: sticky;
    bottom: 20px;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    z-index: 999;
}

.yh-btn{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg,#D4AF37,#FFD700);
    color: #000;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: bold;
    box-shadow: 0 8px 20px rgba(212,175,55,.5);
    transition: .3s;
}

.yh-btn:hover{
    transform: scale(1.1);
}
/*==================================================
                THE END
==================================================*/