:root {
    --primaryColor: #0B2D72;
    --secondaryColor: #E02310;
    --light-secondary-color: #e2ceab;
    --helper: #E6BD15;

    --r: 63;
    --g: 255;
    --b: 255;
    --c1: var(rgba(var(--r), var(--g), var(--b), 1));
    --c2: var(rgba(var(--r), var(--g), var(--b), 0.5));

    --black: #000000;
    --white: #ffffff;

    --bg-1: #f7f7f7;
    --bg-2: #111;
    --transparent-dark-bg: rgba(0, 0, 0, .35);
    --color-bg-primary: #f9fafb;
    --color-hover-secondary: #e2e2fb;
    --color-bg-secondary: #A9B5DF;

    --border: rgba(255, 255, 255, .1);
    --borde-1: rgba(58, 77, 105, 1);

    --white-hover: #f9fafb;
    --color-shadow: rgba(0, 0, 0, 0.05);

    --text: #242424;
    --text-1: #706f6f;
    --text-3: #2f363a;
    --text-4: #BBBBBB;

    --facebook: #3b5998;
    --whatsappColor: #25D366;
}

body.dark-theme {
    --color-bg-primary: #111827;
    --color-hover-secondary: #48566a;
    --color-bg-secondary: #3D4859;
    /* ==================== */
    --text: #ffff;
    --text-1: #ccc;
    --text-3: var(--color-bg-secondary);
    --text-4: #ffff;
    /* ====================== */
    --bg-1: var(--color-bg-secondary);
    --white: var(--color-bg-primary);
    --black: #fff;
    --color-shadow: rgba(0, 0, 0, 0.3);
}

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


body {

    background: var(--color-bg-primary);
    line-height: 1;

    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--black);
    width: 100vw;
    /* font-family: "Cairo", system-ui, Arial, sans-serif; */
    /* padding-bottom: 60px; */
}

main {
    display: none;
    flex-direction: column;
    gap: 50px;
    overflow: hidden;
}

nav {
    display: none;
}

footer {
    display: none;
}

.top-bar {
    display: none;
}

.container {
    width: 100%;
    max-width: 1550px;
    margin-inline: auto;
}

a {
    text-decoration: none;
    color: var(--text-3);
    display: inline-block;
}

/* 
body.dark-theme a {

    color: var(--white);
} */

button {
    border: none;
    background-color: transparent;
}



.hero,
.popular-slider,
.discount-products-slider,
.quick-view-image {
    touch-action: pan-y;
    user-select: none;
}

.active-icon-container {
    padding: 2px 4px;
    font-size: small;
    font-weight: 200;
    border-radius: 50%;
    color: var(--white);
    background-color: var(--secondaryColor);
}



@media (max-width:1024px) {
    main {
        gap: 30px;
    }
}