@font-face {
    font-family: 'Cairo-Regular';
    src: url('/fonts/Cairo-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'ReemKufiInk-Regular';
    src: url('/fonts/ReemKufiInk-Regular.ttf') format('truetype');
}


@font-face {
    font-family: 'ReemKufiFun-Regular';
    src: url('../fonts/ReemKufiFun-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'ALmusam_free';
    src: url('/fonts/ALmusam_free.ttf') format('truetype');
}

* {
    box-sizing: border-box;
    font-family: 'Cairo-Regular', serif;
    margin: 0;
    padding: 0;
}

body {
    background: #fff;
    color: #2b1608;
    overflow-x: hidden;
    font-size: clamp(0.8rem, 1.2vw, 2.5rem);
}

.page {
    min-height: 100vh;
    background: radial-gradient(circle at 15% 75%, rgba(210, 150, 40, .16), transparent 28%), radial-gradient(circle at 85% 25%, rgba(75, 35, 10, .12), transparent 26%), #fff;
}

.navbar {
    width: 100%;
    height: 5.375em;
    padding: 0 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(1.125em);
    border-bottom: .0625em solid rgba(120, 70, 25, .12);
}

.logo {
    display: flex;
    align-items: center;
    height: 4.375em;
}

.logo-img {
    height: 4em;
    width: auto;
    display: block;
    object-fit: contain;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.125em;
}
.nav-Mobile {
    position:fixed;
    display:none;
}
.nav-Mobile i {
    font-size:3em;
    cursor:pointer;
}
    .nav-Mobile:hover .nav-Mobilelinks {
        display:block;
    }

    .nav-links a, .nav-Mobilelinks a {
        text-decoration: none;
        color: #3b2314;
        font-weight: 700;
        font-size: 1.4em;
        transition: .25s;
    }

    .nav-links a:hover, .nav-Mobilelinks a:hover{
        color: #aa7a3c;
        background:#fff4df;
    }

.nav-Mobilelinks {
    top: 2.6em;
    right:0;
    position: absolute;
    display: none;
    gap: unset;
    background: white;
    border-radius: .6em;
    padding: .5em 0 .6em;
    box-shadow: 0 .25em .6em .2em rgba(0,0,0,.2);
}

    .nav-Mobilelinks a {
        display: block;
        padding : .25em 1em .25em 5em;
    }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: .75em;
        }

.btn {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    border-radius: 62.4375em;
    transition: .25s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5625em;
}

    .btn i {
        font-size: 1.2em;
    }

.btn-login {
    background: #fff8ed;
    color: #4b2208;
    padding: .5em 1.375em;
    border: .0625em solid rgba(184, 117, 32, .25);
}

.user-section {
    position: relative;
    display: none;
}

.user-name {
    padding: .6em 0 .6em 1em;
    cursor: pointer;

}

    .user-name i {
        margin-left: .4em;
    }

.user-menu {
    top: 2.8em;
    position: absolute;
    width: 10em;
    border-radius: 1em;
    background: white;
    border: 1px solid #fff;
    box-shadow: 1px 1px 4px 1px #8a430d;
    display: none;
}

.user-section:hover .user-menu {
    display: block;
}

.user-menu-item {
    display: block;
    color: #3a1705;
    cursor: pointer;
    border-radius: unset;
    padding: .4em 1em;
}

    .user-menu-item i {
        margin-left: .25em;
    }

    .user-menu-item:first-child {
        border-radius: 1em 1em 0 0;
    }

    .user-menu-item:last-child {
        border-radius: 0 0 1em 1em;
    }

    .user-menu-item:hover {
        background: #3a1705;
        color: #fff4df;
    }

.btn-cart {
    width: 2.8em;
    height: 2.8em;
    background: #3a1705;
    color: #fff;
    font-size:.8em;
    box-shadow: 0 .75em 1.5em rgba(58, 23, 5, .22);
    position: relative;
}

.cart-count {
    position: absolute;
    top: -.4em;
    right: -.4em;
    min-width: 1.4em;
    height: 1.4em;
    background: #e53935;
    color: #fff;
    border-radius: 50%;
    font-size: .8em;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    padding: .2em;
    display:none;
}
.hero {
    min-height: 100vh;
    padding: 5.125em 7% 4.375em;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: 3.125em;
}

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

.badge {
    width: fit-content;
    padding: .625em 1.25em;
    border-radius: 62.4375em;
    background: #fff7e8;
    color: #8a4a12;
    font-weight: 800;
    margin-bottom: 1.375em;
    border: .0625em solid rgba(190, 127, 42, .25);
    box-shadow: 0 .625em 1.875em rgba(184, 117, 32, .10);
}

.hero-title {
    font-size: clamp(1rem, 7vw, 4.0rem);
    line-height: .95em;
    font-weight: bold;
    height: 1.4em;
    background: linear-gradient(135deg, #1f0a02, #5a2608, #b87520);
    -webkit-background-clip: text;
    color: transparent;
}

.hero-subtitle {
    position: relative;
    font-size: 1.18em;
    line-height: 2.1;
    color: #6c4123;
    max-width: 34em;
    margin-bottom: 1.25em;
    font-weight: 700;
    padding: 1.15em 1.35em;
    background: rgba(255, 248, 237, .78);
    border-right: .28em solid #b87520;
    border-radius: 1.4em;
    box-shadow: 0 1.1em 2.8em rgba(70, 35, 10, .08);
}

    .hero-subtitle::before {
        content: "";
        position: absolute;
        top: 1.2em;
        right: -.5em;
        width: .8em;
        height: .8em;
        background: #b87520;
        border-radius: 50%;
        animation: 10s alternate infinite linear cyrclemove;
    }

@keyframes cyrclemove {
    0% {
        background: #b87520;
        top: 1.2em;
    }

    100% {
        top: 6.5em;
        background: #fff4df;
    }
}

.btn-primary {
    background: linear-gradient(135deg, #3a1705, #8a430d);
    color: #fff;
    padding: 1.0625em 2.125em;
    font-size: 1.05em;
    box-shadow: 0 1.125em 2.5em rgba(63, 28, 8, .28);
}

    .btn-primary:hover {
        transform: translateY(-.25em);
        box-shadow: 0 1.5em 3.125em rgba(63, 28, 8, .36);
    }

.btn-secondary {
    background: #fff;
    color: #3a1705;
    padding: 1em 1.875em;
    border: .0625em solid rgba(58, 23, 5, .16);
    box-shadow: 0 .875em 2.125em rgba(70, 35, 10, .10);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 1.125em;
    margin-top: 1em;
}

.stat-card {
    background: rgba(255, 255, 255, .78);
    border: .0625em solid rgba(117, 65, 24, .12);
    box-shadow: 0 1.125em 2.8125em rgba(70, 35, 10, .09);
    border-radius: 1.5em;
    padding: 1em 1.25em;
    min-width: 8.4375em;
}

    .stat-card strong {
        display: block;
        font-size: 1.55em;
        color: #3a1705;
        font-weight: 900;
    }

    .stat-card small {
        color: #805b3d;
        font-weight: 700;
    }

.hero-visual {
    position: relative;
    min-height: 38.125em;
}

.circle-bg {
    position: absolute;
    width: 35em;
    height: 35em;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 245, 224, .95), rgba(245, 208, 128, .58));
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 5em rgba(255, 255, 255, .75), 0 1.875em 5em rgba(120, 70, 20, .15);
}

.product-card {
    position: absolute;
    width: 26.25em;
    min-height: 31.875em;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, .74);
    border: .0625em solid rgba(120, 70, 25, .13);
    border-radius: 2.625em;
    box-shadow: 0 2.5em 5.625em rgba(60, 28, 10, .20);
    backdrop-filter: blur(1.125em);
    padding: 2.125em;
    text-align: center;
}

.product-img {
    width: 100%;
    height: 16.25em;
    border-radius: .3em;
    background: radial-gradient(circle at 50% 40%, #fff 0 18%, #f9f0dc 19% 38%, transparent 39%), radial-gradient(circle at 32% 62%, #fff 0 15%, #f7ead4 16% 32%, transparent 33%), radial-gradient(circle at 68% 62%, #fff 0 15%, #f7ead4 16% 32%, transparent 33%), linear-gradient(180deg, #d9a04b, #9e5f1d);
    position: relative;
    overflow: hidden;
}


.product-card h3 {
    font-size: 2em;
    color: #351404;
    margin-bottom: .5em;
    font-weight: 900;
}

.product-card p {
    color: #7b5739;
    font-weight: 700;
    margin-bottom: 1.375em;
}

.price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75em;
    margin: .5em auto 1em;
    width: fit-content;
}

.price {
    font-size: 2em;
    font-weight: 900;
    color: #8a430d;
}

.rating {
    display: flex;
    align-items: center;
    gap: .25em;
    color: #d69b22;
    font-size: .95em;
}

.floating-box {
    position: absolute;
    background: #fff;
    border-radius: 1.5em;
    box-shadow: 0 1.375em 3.4375em rgba(75, 35, 10, .18);
    padding: 1em 1.25em;
    display: flex;
    align-items: center;
    gap: .75em;
    font-weight: 900;
    color: #3a1705;
    border: .0625em solid rgba(120, 70, 25, .12);
}

    .floating-box i {
        width: 2em;
        height: 2em;
        font-size: 1.15em;
        border-radius: .9375em;
        display: grid;
        place-items: center;
        background: #fff4df;
        color: #b87520;
    }

.float-1 {
    bottom: 4.5em;
    right: 0em;
}

.float-2 {
    bottom: 4.5em;
    left: 0;
}

.section {
    padding: 5.625em 7%;
}

.section-head {
    text-align: center;
    max-width: 47.5em;
    margin: 0 auto 1.25em;
}

    .section-head span {
        color: #b87520;
        font-weight: 900;
        font-size: 2em;
    }

    .section-head h2 {
        font-size: clamp(2rem, 4vw, 2rem);
        color: #311304;
        font-weight: 900;
        margin: 0;
    }

    .section-head p {
        color: #795337;
        line-height: 2;
        font-weight: 600;
    }

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75em;
}

.shop-card {
    background: #fff;
    border-radius: 2em;
    overflow: hidden;
    box-shadow: 0 1.5em 4.0625em rgba(70, 35, 10, .10);
    border: .0625em solid rgba(130, 80, 30, .12);
    transition: .3s;
}

    .shop-card:hover {
        transform: translateY(-.5em);
        box-shadow: 0 2.125em 5em rgba(70, 35, 10, .16);
    }

.shop-img {
    height: 16.25em;
    position: relative;
}

    .shop-img img {
        height: 100%;
        width: 100%;
        object-fit: contain;
    }

.shop-body {
    padding: 1.625em;
}

    .shop-body h3 {
        line-height: .98;
        font-size: 1.45em;
        color: #351404;
        margin-bottom: .5em;
        font-weight: 900;
    }

    .shop-body p {
        color: #77543a;
        line-height: 1.8;
        margin-bottom: 1.125em;
        font-weight: 600;
    }

.shop-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shop-price {
    font-size: 1.5em;
    color: #8a430d;
    font-weight: 900;
}

.btn-small {
    width: 2.875em;
    height: 2.875em;
    border-radius: 1em;
    background: #351404;
    color: #fff;
}

    .btn-small i {
        font-size: 1.5em;
    }

.features {
    background: linear-gradient(135deg, #2a1004, #552407);
    border-radius: 3em;
    padding: 3.625em;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.625em;
    color: #fff;
    box-shadow: 0 2.125em 5.625em rgba(42, 16, 4, .28);
}

.feature {
    text-align: center;
}

    .feature i {
        width: 2em;
        height: 2em;
        border-radius: 1.375em;
        background: rgba(255,255,255,.10);
        display: grid;
        place-items: center;
        margin: 0 auto 1.125em;
        color: #f3c05d;
        font-size: 3em;
    }

    .feature h3 {
        font-size: 1.2em;
        margin-bottom: .5em;
    }

    .feature p {
        color: rgba(255,255,255,.72);
        font-size: .95em;
        line-height: 1.8;
    }

.login-section {
    margin-top: 3em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.625em;
    align-items: center;
    background: #fff9ef;
    border-radius: 3em;
    padding: 3.75em;
    border: .0625em solid rgba(184, 117, 32, .14);
}

.login-info h2 {
    font-size: 2.8em;
    color: #351404;
    font-weight: 900;
    margin-bottom: 1.125em;
}

.login-info p {
    color: #735031;
    line-height: 2;
    font-weight: 600;
    font-size: 1.1em;
}

.login-card {
    background: #fff;
    border-radius: 2.25em;
    padding: 2.125em;
    box-shadow: 0 1.5em 4.375em rgba(70, 35, 10, .12);
}

.form-group {
    margin-bottom: 1.125em;
}

    .form-group label {
        display: block;
        font-weight: 900;
        color: #351404;
        margin-bottom: .5625em;
    }

        .form-group label span {
            margin-right: 1em;
            font-size: .85em;
            text-align: right;
            color: red;
            font-family: 'Times New Roman', Times, serif;
            font-weight: normal;
        }

    .form-group input {
        width: 100%;
        height: 3.625em;
        border-radius: 1.125em;
        border: .0625em solid rgba(120, 70, 25, .18);
        padding: 0 1.125em;
        font-family: inherit;
        font-size: 1em;
        outline: none;
        background: #fffaf3;
    }

        .form-group input:focus {
            border-color: #b87520;
            box-shadow: 0 0 0 .25em rgba(184, 117, 32, .12);
        }

.btn-full {
    width: 100%;
    height: 3.75em;
    margin-top: .5em;
}

.orders-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
}

.order-card {
    background: #fff;
    border-radius: 1.875em;
    padding: 1.625em;
    box-shadow: 0 1.375em 3.75em rgba(70, 35, 10, .09);
    border: .0625em solid rgba(130, 80, 30, .12);
}

.order-status {
    width: fit-content;
    padding: .5em 1em;
    border-radius: 62.4375em;
    background: #fff4df;
    color: #8a430d;
    font-weight: 900;
    margin-bottom: 1em;
}

.order-card h3 {
    color: #351404;
    margin-bottom: .625em;
    font-weight: 900;
}

.order-card p {
    color: #735031;
    line-height: 1.8;
    font-weight: 600;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
}

.review-card {
    background: #fff;
    border-radius: 1.875em;
    padding: 1.75em;
    box-shadow: 0 1.375em 3.75em rgba(70, 35, 10, .09);
    border: .0625em solid rgba(130, 80, 30, .12);
}

.stars {
    color: #d69b22;
    margin-bottom: .9375em;
}

.review-card p {
    color: #5d3922;
    line-height: 2;
    font-weight: 700;
    margin-bottom: 1.125em;
}

.review-user {
    display: flex;
    align-items: center;
    gap: .75em;
    font-weight: 900;
    color: #351404;
}

.avatar {
    width: 2.75em;
    height: 2.75em;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a1705, #b87520);
    color: #fff;
    display: grid;
    place-items: center;
}

.footer {
    padding: 1.625em 7%;
    background: #2a1004;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.125em;
}

    .footer strong {
        color: #f3c05d;
    }

.social {
    display: flex;
    gap: .75em;
}

    .social a {
        width: 2.75em;
        height: 2.75em;
        border-radius: .9375em;
        background: rgba(255,255,255,.10);
        color: #fff;
        display: grid;
        place-items: center;
        text-decoration: none;
    }

        .social a i {
            font-size: 1.5em;
        }