/*=============================
        GOOGLE FONT
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

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

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

body{

    font-family:'Cairo',sans-serif;
    background:#faf8f5;
    color:#222;
    overflow-x:hidden;

}

a{

    text-decoration:none;
    color:inherit;

}

img{

    width:100%;
    display:block;

}

ul{

    list-style:none;

}

section{

    padding:90px 8%;

}

.container{

    max-width:1400px;
    margin:auto;

}

/*=============================
        TOP BAR
==============================*/

.top-bar{

    background:#6B4226;
    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;

    padding:12px;

    font-size:15px;

    font-weight:600;

}

.top-item{

    display:flex;

    align-items:center;

    gap:8px;

}

.top-item i{

    color:#F7C873;

}

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

header{

    width:100%;

    background:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 8%;

    position:sticky;

    top:0;

    z-index:999;

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

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:70px;

}

.logo h2{

    font-size:28px;

    color:#6B4226;

}

.logo p{

    color:#888;

    font-size:14px;

}

nav ul{

    display:flex;

    gap:35px;

}

nav ul li a{

    font-size:17px;

    font-weight:700;

    transition:.3s;

    position:relative;

}

nav ul li a:hover{

    color:#B07B4F;

}

nav ul li a::after{

    content:"";

    position:absolute;

    width:0;

    height:3px;

    background:#B07B4F;

    right:0;

    bottom:-8px;

    transition:.3s;

}

nav ul li a:hover::after{

    width:100%;

}

.icons{

    display:flex;

    gap:18px;

    align-items:center;

}

.icons a{

    width:48px;

    height:48px;

    background:#f5f5f5;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

    font-size:20px;

}

.icons a:hover{

    background:#6B4226;

    color:#fff;

}

.cart{

    position:relative;

}

.cart span{

    position:absolute;

    top:-6px;

    left:-5px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#ff4d4d;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:12px;

}

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

.hero{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    min-height:90vh;

}

.hero-content span.small-title{

    display:inline-block;

    background:#EADCCF;

    color:#6B4226;

    padding:8px 20px;

    border-radius:30px;

    margin-bottom:25px;

    font-weight:700;

}

.hero h1{

    font-size:65px;

    line-height:1.2;

    color:#3D2516;

}

.hero h1 span{

    color:#B07B4F;

}

.hero p{

    margin:30px 0;

    font-size:18px;

    color:#666;

    line-height:2;

}

.hero-features{

    display:flex;

    gap:35px;

    margin-bottom:35px;

}

.hero-features div{

    text-align:center;

}

.hero-features i{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#fff;

    color:#B07B4F;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

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

    margin:auto;

    margin-bottom:12px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.btn{

    padding:15px 35px;

    border-radius:40px;

    font-weight:700;

    transition:.3s;

}

.btn-main{

    background:#6B4226;

    color:#fff;

}

.btn-main:hover{

    transform:translateY(-5px);

    background:#B07B4F;

}

.btn-outline{

    border:2px solid #6B4226;

    color:#6B4226;

}

.btn-outline:hover{

    background:#6B4226;

    color:#fff;

}

.hero-image{

    position:relative;

}

.hero-image img{

    border-radius:35px;

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

}

.badge{

    position:absolute;

    left:-30px;

    bottom:40px;

    width:150px;

    height:150px;

    background:#fff;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

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

}

.badge h2{

    color:#6B4226;

    font-size:40px;

}

.badge span{

    font-size:14px;

    color:#666;

    text-align:center;

}
/*==============================
        FEATURES
==============================*/

.services{

    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;

}

.service{

    background:#fff;
    border-radius:25px;
    padding:35px 25px;
    text-align:center;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.service:hover{

    transform:translateY(-12px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.service i{

    width:75px;
    height:75px;
    background:#F8EFE8;
    color:#8B5E3C;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    margin-bottom:20px;
    font-size:28px;

}

.service h3{

    margin-bottom:10px;
    font-size:20px;
    color:#5B3A29;

}

.service p{

    color:#777;
    line-height:1.8;

}

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

.section-title{

    text-align:center;
    margin-bottom:60px;

}

.section-title h2{

    font-size:42px;
    color:#5B3A29;
    margin-bottom:15px;

}

.section-title p{

    color:#777;
    font-size:18px;

}

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

.category-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.category-card{

    background:#fff;
    border-radius:30px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.category-card:hover{

    transform:translateY(-10px);

}

.category-card img{

    height:260px;
    object-fit:cover;
    transition:.5s;

}

.category-card:hover img{

    transform:scale(1.08);

}

.category-card h3{

    padding:20px 25px 10px;
    font-size:24px;
    color:#5B3A29;

}

.category-card p{

    padding:0 25px;
    color:#777;
    margin-bottom:25px;

}

.category-card a{

    display:inline-block;
    margin:0 25px 25px;
    background:#6B4226;
    color:#fff;
    padding:12px 28px;
    border-radius:30px;
    transition:.3s;

}

.category-card a:hover{

    background:#B07B4F;

}

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

.product-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;

}

.product-card{

    background:#fff;
    border-radius:30px;
    overflow:hidden;
    position:relative;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.4s;

}

.product-card:hover{

    transform:translateY(-10px);

}

.product-card img{

    height:300px;
    object-fit:cover;

}

.product-card h3{

    padding:25px 25px 10px;
    font-size:24px;
    color:#4D3021;

}

.price{

    color:#A06A43;
    font-size:26px;
    font-weight:bold;
    padding:0 25px;

}

.stars{

    padding:15px 25px;
    color:#FFC107;

}

.product-card button{

    width:calc(100% - 50px);
    margin:20px 25px 30px;
    height:55px;
    border:none;
    border-radius:35px;
    background:#6B4226;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    transition:.3s;

}

.product-card button:hover{

    background:#B07B4F;

}

.fav{

    position:absolute;
    top:18px;
    left:18px;

    width:48px;
    height:48px;

    background:#fff;

    border-radius:50%;

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

    font-size:22px;

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

    cursor:pointer;

    transition:.3s;

}

.fav:hover{

    background:#ff4d6d;
    color:#fff;

}
/*==============================
        FEATURES
==============================*/

.services{

    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;

}

.service{

    background:#fff;
    border-radius:25px;
    padding:35px 25px;
    text-align:center;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.service:hover{

    transform:translateY(-12px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.service i{

    width:75px;
    height:75px;
    background:#F8EFE8;
    color:#8B5E3C;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    margin-bottom:20px;
    font-size:28px;

}

.service h3{

    margin-bottom:10px;
    font-size:20px;
    color:#5B3A29;

}

.service p{

    color:#777;
    line-height:1.8;

}

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

.section-title{

    text-align:center;
    margin-bottom:60px;

}

.section-title h2{

    font-size:42px;
    color:#5B3A29;
    margin-bottom:15px;

}

.section-title p{

    color:#777;
    font-size:18px;

}

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

.category-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.category-card{

    background:#fff;
    border-radius:30px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.category-card:hover{

    transform:translateY(-10px);

}

.category-card img{

    height:260px;
    object-fit:cover;
    transition:.5s;

}

.category-card:hover img{

    transform:scale(1.08);

}

.category-card h3{

    padding:20px 25px 10px;
    font-size:24px;
    color:#5B3A29;

}

.category-card p{

    padding:0 25px;
    color:#777;
    margin-bottom:25px;

}

.category-card a{

    display:inline-block;
    margin:0 25px 25px;
    background:#6B4226;
    color:#fff;
    padding:12px 28px;
    border-radius:30px;
    transition:.3s;

}

.category-card a:hover{

    background:#B07B4F;

}

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

.product-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;

}

.product-card{

    background:#fff;
    border-radius:30px;
    overflow:hidden;
    position:relative;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.4s;

}

.product-card:hover{

    transform:translateY(-10px);

}

.product-card img{

    height:300px;
    object-fit:cover;

}

.product-card h3{

    padding:25px 25px 10px;
    font-size:24px;
    color:#4D3021;

}

.price{

    color:#A06A43;
    font-size:26px;
    font-weight:bold;
    padding:0 25px;

}

.stars{

    padding:15px 25px;
    color:#FFC107;

}

.product-card button{

    width:calc(100% - 50px);
    margin:20px 25px 30px;
    height:55px;
    border:none;
    border-radius:35px;
    background:#6B4226;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    transition:.3s;

}

.product-card button:hover{

    background:#B07B4F;

}

.fav{

    position:absolute;
    top:18px;
    left:18px;

    width:48px;
    height:48px;

    background:#fff;

    border-radius:50%;

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

    font-size:22px;

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

    cursor:pointer;

    transition:.3s;

}

.fav:hover{

    background:#ff4d6d;
    color:#fff;

}
/*================ HERO FULL BACKGROUND ================*/

.hero{

    position: relative;
    min-height: 92vh;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    padding:80px 8%;

    border-radius:40px;
    overflow:hidden;

    background:url("images/hero.webp") left center/cover no-repeat;

}

/* طبقة بيضاء على اليمين علشان الكلام يبان */

.hero::before{

    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.15) 0%,
        rgba(255,255,255,.45) 35%,
        rgba(255,255,255,.92) 60%,
        rgba(255,255,255,1) 100%
    );

}

.hero-content{

    position:relative;
    z-index:5;

    width:48%;
    margin-right:0;

}

.hero-content h1{

    font-size:82px;
    line-height:1.15;

}

.hero-content p{

    font-size:22px;
    line-height:2;
    margin:30px 0;

}

.hero-image{

    display:none;

}
/*================ HERO NEW =================*/

.hero{

    position:relative;

    min-height:92vh;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding:0 8%;

    background:url("hero.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    overflow:hidden;

}

/* طبقة شفافة */

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.10) 0%,
        rgba(255,255,255,.30) 40%,
        rgba(255,255,255,.85) 65%,
        rgba(255,255,255,1) 100%
    );

}

.hero-content{

    position:relative;

    z-index:2;

    width:45%;

}

.hero-content h1{

    font-size:85px;

    line-height:1.1;

}

.hero-content p{

    font-size:22px;

    margin:30px 0;

    line-height:2;

}

.hero-features{

    margin:40px 0;

}

.hero-buttons{

    margin-top:40px;

}

@media(max-width:991px){

.hero{

justify-content:center;

padding:80px 30px;

background-position:left;

}

.hero-content{

width:100%;

text-align:center;

}

.hero-content h1{

font-size:55px;

}

}
/* ===== Hero Layout ===== */

.hero{

    display:flex !important;
    justify-content:flex-end;
    align-items:center;

    min-height:90vh;

    padding:0 8%;

    direction:rtl;

}

/* صندوق الكلام */

.hero-content{

    width:42%;

    margin-right:0;

    margin-left:auto;

    text-align:right;

    position:relative;

    z-index:5;

}

/* العنوان */

.hero-content h1{

    font-size:78px;

    line-height:1.15;

}

/* الوصف */

.hero-content p{

    margin:30px 0;

    font-size:22px;

    line-height:2;

}

/* الأيقونات */

.hero-features{

    display:flex;

    justify-content:flex-start;

    gap:35px;

    margin:45px 0;

}

/* الأزرار */

.hero-buttons{

    display:flex;

    justify-content:flex-start;

    gap:20px;

    margin-top:50px;

}

/* الصورة */

.hero{

    background-position:left center !important;
    background-size:cover;

}

/* نخلي النص بعيد عن الصورة */

.hero-content{

    padding-right:30px;

}
/* ================= HERO FIX ================= */

.hero{
    position: relative !important;

    display: flex !important;
    align-items: center;
    justify-content: flex-end;

    min-height: 850px;

    padding: 0 8%;

    overflow: hidden;

    background: url("hero.png") left center no-repeat !important;
    background-size: cover !important;
}

/* التدرج الأبيض */

.hero::before{
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.08) 38%,
        rgba(255,255,255,.45) 50%,
        rgba(255,255,255,.88) 63%,
        rgba(255,255,255,1) 74%
    );

    z-index: 1;
}

/* إخفاء أي صورة داخلية */

.hero-image{
    display: none !important;
}

/* النص */

.hero-content{

    position: relative;
    z-index: 5;

    width: 42%;

    margin-right: 0;
    margin-left: auto;

    text-align: right;

    padding-right: 20px;
}

.hero-content h1{

    font-size: 92px;
    line-height: 1.08;

    margin-bottom: 25px;

}

.hero-content p{

    font-size: 23px;

    line-height: 2;

    margin-bottom: 45px;

}

/* المميزات */

.hero-features{

    display: flex;

    justify-content: flex-start;

    gap: 45px;

    margin: 45px 0;

}

/* الأزرار */

.hero-buttons{

    display: flex;

    gap: 20px;

    margin-top: 40px;

}

.btn{

    min-width: 190px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50px;

    font-size: 18px;

}
/* ===== Hero Text ===== */

.hero-content{

    width:46%;
    padding-right:40px;

}

.hero-content h1{

    font-size:72px;
    line-height:1.15;
    font-weight:800;
    margin-bottom:25px;
    color:#3d2516;

}

.hero-content h1 span{

    display:block;
    font-size:68px;
    color:#b07b4f;
    margin-top:8px;

}

.hero-content p{

    font-size:20px;
    line-height:2;
    color:#666;
    max-width:560px;
    margin:25px 0 40px;

}

.hero-features{

    gap:30px;
    margin:35px 0;

}

.hero-features h4{

    font-size:18px;
    margin-top:10px;

}

.hero-buttons{

    margin-top:35px;
    gap:18px;

}

.btn{

    min-width:170px;
    height:55px;
    font-size:17px;
}
/*==============================
    HERO FEATURES PRO
==============================*/

.hero-features{

    display:flex;
    justify-content:center;
    gap:28px;
    margin:45px 0;

}

.hero-features div{

    width:140px;
    height:140px;

    background:rgba(255,255,255,.75);
    backdrop-filter:blur(12px);

    border-radius:28px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    cursor:pointer;

    transition:.45s;

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

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

    position:relative;

    overflow:hidden;

}

/* تأثير الإضاءة */

.hero-features div::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

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

    transform:rotate(35deg);

    top:-220px;
    left:-180px;

    transition:.7s;

}

.hero-features div:hover::before{

    top:160px;
    left:160px;

}

/* Hover */

.hero-features div:hover{

    transform:translateY(-12px);

    background:#fff;

    box-shadow:0 25px 45px rgba(176,123,79,.25);

}

/* الأيقونات */

.hero-features i{

    width:68px;
    height:68px;

    border-radius:50%;

    background:#f8f1ea;

    color:#9d6d45;

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

    font-size:28px;

    margin-bottom:18px;

    transition:.4s;

}

.hero-features div:hover i{

    background:#8b5a37;

    color:#fff;

    transform:rotate(10deg) scale(1.1);

}

/* النص */

.hero-features h4{

    font-size:18px;

    color:#4a2d1c;

    font-weight:700;

}

/* حركة عند تحميل الصفحة */

.hero-features div{

    animation:heroUp .8s ease forwards;

    opacity:0;

}

.hero-features div:nth-child(1){

    animation-delay:.2s;

}

.hero-features div:nth-child(2){

    animation-delay:.4s;

}

.hero-features div:nth-child(3){

    animation-delay:.6s;

}

@keyframes heroUp{

    from{

        transform:translateY(50px);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}
.why-us{

display:grid;

grid-template-columns:1fr 1fr 420px 1fr 1fr;

align-items:center;

gap:30px;

padding:80px 7%;

background:#fbf8f4;

border-radius:40px;

}

.why-card{

background:#fff;

padding:35px;

border-radius:25px;

text-align:center;

transition:.4s;

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

}

.why-card:hover{

transform:translateY(-12px);

}

.why-card i{

width:75px;

height:75px;

border-radius:50%;

background:#f6efe7;

display:flex;

justify-content:center;

align-items:center;

margin:auto;

font-size:28px;

color:#9d6d45;

margin-bottom:20px;

transition:.4s;

}

.why-card:hover i{

background:#8b5a37;

color:#fff;

transform:rotate(10deg);

}

.why-card h3{

margin-bottom:15px;

font-size:24px;

}

.why-card p{

line-height:1.9;

color:#666;

}

.why-image{

display:flex;

justify-content:center;

align-items:center;

}

.why-image img{

width:420px;

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

filter:drop-shadow(0 25px 40px rgba(0,0,0,.15));

}

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-15px);}
100%{transform:translateY(0);}

}
/*==============================
      PRODUCT CARD NEW
==============================*/

.product-card{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.4s;

    display:flex;

    flex-direction:column;

}

.product-card:hover{

    transform:translateY(-10px);

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

}

.product-card img{

    width:100%;

    height:250px;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.product-card:hover img{

    transform:scale(1.05);

}

/* المحتوى */

.product-info{

    padding:22px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:10px;

}

.product-info h3{

    font-size:30px;

    color:#5b3825;

    margin:0;

}

.product-info p{

    color:#777;

    font-size:16px;

    margin:0;

    line-height:1.7;

}

/* الزر */

.product-btn{

    margin-top:12px;

    width:170px;

    height:50px;

    border-radius:30px;

    background:#8B5A37;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:17px;

    font-weight:700;

    transition:.3s;

}

.product-btn:hover{

    background:#654126;

    transform:translateY(-3px);

}   
/*=========================
      CATEGORY CARD
=========================*/

.category-card{

    background:#fff;
    border-radius:28px;
    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.4s;

    text-align:center;

    display:flex;
    flex-direction:column;

}

.category-card:hover{

    transform:translateY(-10px);

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

}

.category-card img{

    width:100%;
    height:240px;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.category-card:hover img{

    transform:scale(1.06);

}

.category-card h3{

    margin:22px 0 8px;

    font-size:30px;

    color:#5b3825;

    font-weight:700;

}

.category-card p{

    color:#777;

    font-size:17px;

    margin-bottom:22px;

}

.category-card a{

    width:170px;

    height:52px;

    margin:0 auto 25px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:#8B5A37;

    color:#fff;

    border-radius:40px;

    font-size:17px;

    font-weight:700;

    transition:.3s;

}

.category-card a:hover{

    background:#5e3b23;

    transform:translateY(-3px);

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

.footer{

background:#4b2f1d;

color:#fff;

padding:70px 8% 0;

margin-top:100px;

}

.footer-container{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

}

.footer h2{

font-size:38px;

margin-bottom:20px;

}

.footer h3{

margin-bottom:20px;

font-size:24px;

}

.footer p{

line-height:2;

color:#ddd;

}

.footer ul{

list-style:none;

padding:0;

}

.footer ul li{

margin-bottom:15px;

color:#ddd;

}

.footer ul a{

color:#ddd;

text-decoration:none;

transition:.3s;

}

.footer ul a:hover{

color:#d6a777;

padding-right:8px;

}

.social{

display:flex;

gap:15px;

margin-top:25px;

}

.social a{

width:45px;

height:45px;

border-radius:50%;

background:#6d4830;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

transition:.3s;

}

.social a:hover{

background:#d6a777;

transform:translateY(-5px);

}

.copyright{

margin-top:50px;

padding:25px 0;

text-align:center;

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

color:#ddd;

}
.whatsapp-btn{

    position:fixed;

    left:25px;

    bottom:25px;

    width:65px;

    height:65px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:34px;

    text-decoration:none;

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

    z-index:99999;

    transition:.35s;

}

.whatsapp-btn:hover{

    transform:scale(1.12);

    background:#1EBE5D;

}
/*=========================
      PRODUCT CARD FIX
=========================*/

.category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.category-card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:560px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.category-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.category-card img{
    width:100%;
    height:270px;
    object-fit:contain;
    background:#fff;
    padding:20px;
}

.category-card h3{
    font-size:34px;
    line-height:1.5;
    color:#5B3825;
    margin:20px;
    min-height:110px;
}

.category-card p{
    font-size:20px;
    color:#777;
    margin-bottom:25px;
}

.category-card .buttons{
    display:flex;
    gap:12px;
    justify-content:center;
    padding:20px;
    margin-top:auto;
}

.category-card a,
.category-card button{

    width:170px;
    height:52px;

    border:none;
    border-radius:35px;

    background:#8b5a37;
    color:#fff;

    font-size:18px;
    font-weight:bold;

    cursor:pointer;

    transition:.3s;
}

.category-card a:hover,
.category-card button:hover{

    background:#6d4325;
    transform:translateY(-4px);

}

/* السعر */

.price{

    font-size:28px;
    font-weight:bold;
    color:#8B5A37;
    text-align:center;
    margin-bottom:15px;

}

/* الموبايل */

@media(max-width:768px){

.category-grid{

grid-template-columns:1fr;

}

.category-card{

min-height:auto;

}

.category-card img{

height:220px;

}

.category-card h3{

font-size:26px;

min-height:auto;

}

.category-card .buttons{

flex-direction:column;

align-items:center;

}

.category-card a,
.category-card button{

width:90%;

}

}
/*==========================
      PRICE STYLE
==========================*/

.price-box{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin:20px 0;
}

.old-price{
    color:#999;
    font-size:20px;
    text-decoration:line-through;
}

.price{
    color:#8B5A37;
    font-size:30px;
    font-weight:800;
}

.add-to-cart{
    width:220px;
    height:55px;
    margin:20px auto 30px;
    display:block;
    border:none;
    border-radius:35px;
    background:#8B5A37;
    color:#fff;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.add-to-cart:hover{
    background:#6c4428;
    transform:translateY(-4px);
}
/*=============================
      MOBILE RESPONSIVE
=============================*/

@media (max-width:768px){

/* منع السكرول الأفقي */

html,
body{
    overflow-x:hidden;
}

/* Top Bar */

.top-bar{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    padding:10px;
    text-align:center;
    font-size:12px;
}

/* Header */

header{
    padding:12px 15px;
    flex-wrap:wrap;
    gap:15px;
}

/* Logo */

.logo{
    width:100%;
    justify-content:center;
}

.logo img{
    width:55px;
}

.logo h2{
    font-size:24px;
}

.logo p{
    font-size:12px;
}

/* Navbar */

nav{
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
}

nav::-webkit-scrollbar{
    display:none;
}

nav ul{
    display:flex;
    width:max-content;
    gap:18px;
    padding:8px 0;
}

nav ul li a{
    font-size:15px;
    white-space:nowrap;
}

/* Icons */

.icons{
    width:100%;
    justify-content:center;
    gap:12px;
}

.icons a{
    width:42px;
    height:42px;
}

/* Hero */

.hero{

    min-height:auto;

    padding:70px 20px;

    justify-content:center;

    text-align:center;

    background-position:center;

}

.hero-content{

    width:100%;

    padding:0;

}

.hero-content h1{

    font-size:42px;

    line-height:1.3;

}

.hero-content h1 span{

    font-size:38px;

}

.hero-content p{

    font-size:17px;

    line-height:1.9;

}

.hero-features{

    display:grid;

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

    gap:12px;

}

.hero-features div{

    width:100%;

    height:105px;

}

.hero-features i{

    width:50px;

    height:50px;

    font-size:20px;

}

.hero-features h4{

    font-size:13px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.btn{

    width:100%;

    max-width:280px;

}

/* Services */

.services{

    grid-template-columns:1fr;

}

/* Categories */

.category-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.category-card{

    min-height:auto;

}

.category-card img{

    height:220px;

    object-fit:contain;

    padding:15px;

}

.category-card h3{

    font-size:26px;

}

.category-card p{

    font-size:16px;

}

.price{

    font-size:28px;

}

.old-price{

    font-size:18px;

}

.add-to-cart{

    width:90%;

}

/* Why us */

.why-us{

    grid-template-columns:1fr;

}

.why-image img{

    width:240px;

}

/* Footer */

.footer-container{

    grid-template-columns:1fr;

    text-align:center;

    gap:40px;

}

.social{

    justify-content:center;

}

/* WhatsApp */

.whatsapp-btn{

    width:58px;

    height:58px;

    left:15px;

    bottom:15px;

}

}
/* Toast */

.toast-cart{

position:fixed;

bottom:30px;

right:30px;

background:#8B5A37;

color:#fff;

padding:16px 22px;

border-radius:12px;

font-size:16px;

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

opacity:0;

transform:translateY(40px);

transition:.35s;

z-index:99999;

}

.toast-cart.show{

opacity:1;

transform:translateY(0);

}
/*======================
      CART DRAWER
======================*/

.cart-box{

position:fixed;

top:0;

right:-420px;

width:400px;

height:100vh;

background:#fff;

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

transition:.4s;

z-index:999999;

display:flex;

flex-direction:column;

}

.cart-box.active{

right:0;

}

.cart-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

border-bottom:1px solid #eee;

}

.close-cart{

font-size:35px;

cursor:pointer;

}

.cart-items{

flex:1;

overflow:auto;

padding:20px;

}

.cart-item{

display:flex;

gap:15px;

align-items:center;

margin-bottom:20px;

}

.cart-item img{

width:70px;

height:70px;

object-fit:cover;

border-radius:10px;

}

.cart-info{

flex:1;

}

.qty{

display:flex;

gap:10px;

align-items:center;

margin-top:10px;

}

.qty button{

width:30px;

height:30px;

border:none;

border-radius:50%;

background:#8B5A37;

color:#fff;

cursor:pointer;

}

.delete-btn{

background:none;

border:none;

font-size:22px;

cursor:pointer;

}

.cart-footer{

padding:20px;

border-top:1px solid #eee;

}

.checkout-btn{

width:100%;

height:55px;

border:none;

background:#8B5A37;

color:#fff;

border-radius:10px;

font-size:18px;

cursor:pointer;

}

.empty{

text-align:center;

padding:60px 0;

font-size:20px;

color:#777;

}

@media(max-width:768px){

.cart-box{

width:100%;

}

}
/* =========================
   MOBILE FIX
========================= */

@media (max-width:768px){

html,
body{
    overflow-x:hidden;
}

/* Header */

header{

display:flex;

flex-direction:column;

align-items:center;

padding:15px;

gap:15px;

}

/* Logo */

.logo{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

}

.logo img{

width:55px;

}

.logo h2{

font-size:28px;

}

.logo p{

font-size:12px;

}

/* Menu */

nav{

width:100%;

overflow-x:auto;

}

nav::-webkit-scrollbar{

display:none;

}

nav ul{

display:flex;

justify-content:flex-start;

gap:18px;

padding:10px 5px;

width:max-content;

}

nav a{

font-size:15px;

white-space:nowrap;

}

/* Icons */

.icons{

display:flex;

justify-content:center;

gap:12px;

margin-top:10px;

width:100%;

}

.icons a{

width:45px;

height:45px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

}

/* Hero */

.hero{

padding:40px 20px;

text-align:center;

min-height:auto;

}

.hero-content{

width:100%;

}

.hero-content h1{

font-size:42px;

line-height:1.3;

}

.hero-content p{

font-size:17px;

}

.hero-features{

display:grid;

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

gap:10px;

margin-top:25px;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

align-items:center;

}

.hero-buttons .btn{

width:90%;

}

/* Services */

.services{

grid-template-columns:1fr;

gap:15px;

}

/* Products */

.category-grid{

display:grid;

grid-template-columns:1fr;

gap:20px;

}

.category-card{

width:100%;

}

.category-card img{

height:230px;

object-fit:contain;

}

.category-card h3{

font-size:26px;

}

.category-card p{

font-size:16px;

}

.price{

font-size:28px;

}

.add-to-cart{

width:90%;

margin:20px auto;

}

/* Why Us */

.why-us{

grid-template-columns:1fr;

}

.why-image img{

width:230px;

}

/* Footer */

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.social{

justify-content:center;

}

/* Cart */

.cart-box{

width:100%;

right:-100%;

}

.cart-box.active{

right:0;

}

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

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#fffdf9;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:opacity .6s ease,visibility .6s ease;

}

#loader.hide{

opacity:0;

visibility:hidden;

}

.loader-box{

text-align:center;

}

.loader-box img{

width:120px;

animation:logoFloat 2s ease-in-out infinite;

margin-bottom:20px;

}

.loader-circle{

width:90px;

height:90px;

margin:20px auto;

border:5px solid #eee;

border-top:5px solid #8B5A37;

border-radius:50%;

animation:spin 1s linear infinite;

}

.loader-box h2{

font-size:34px;

color:#5B3825;

margin:15px 0 8px;

}

.loader-box p{

color:#777;

letter-spacing:2px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

@keyframes logoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

@media(max-width:768px){

.loader-box img{

width:90px;

}

.loader-box h2{

font-size:26px;

}

.loader-circle{

width:70px;

height:70px;

}

}
.loader-box{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

}

.loader-box img{

    display:block;
    width:130px;
    height:auto;

    margin:0 auto 25px;

    object-fit:contain;

    animation:logoFloat 2s ease-in-out infinite;

}