:root {
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Ubuntu", sans-serif;
    --nav-font: "Poppins", sans-serif;
    --arabic-font: "Tajawal", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #ffffff;
    /* Background color for the entire website, including individual sections */
    --default-color: #363f40;
    /* Default color used for the majority of the text content across the entire website */
    --heading-color: #1f2f31;
    /* Color for headings, subheadings and title throughout the website */
    --accent-color: #983e3e;
    --second-color: #ed1c24;
    /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff;
    /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff;
    /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}


/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: #363f40;
    /* The default color of the main navmenu links */
    --nav-hover-color: #983e3e;
    --main-color: #983e3e;
    /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff;
    /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff;
    /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #363f40;
    /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #099aa7;
    /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}


:root {
    --main-transition: transform 0.3s ease;
    ;
}






/* 🔥 Banner */
.product-banner {
    position: relative;
    padding: 120px 0;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.product-banner .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.product-banner .banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.product-banner h1 {
    font-size: 40px;
    font-weight: 700;
    color: var(--second-color);
}

.product-banner p {
    font-size: 18px;
    opacity: 0.9;
}



/* 📦 Product */

.product-details{
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, color-mix(in srgb, var(--surface-color), transparent 0%) 100%);
}

.product-image img {
    border-radius: 15px;
}

.product-info h2 {
    font-size: 28px;
    margin-bottom: 15px;
}

.product-info .category {
    font-weight: 600;
    margin-bottom: 10px;
}
.product-info .brand {
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--accent-color);
}

.product-info .price {
    font-size: 22px;
    color: var(--accent-color);
    font-weight: bold;
    margin-bottom: 15px;
}

.product-info .description {
    color: #666;
    line-height: 1.7;
}



.contact_btn {
    background: linear-gradient(to right, var(--accent-color), var(--second-color));
    border: none;
    transition: var(--main-transition-2);
    -webkit-transition: var(--main-transition-2);
    -moz-transition: var(--main-transition-2);
    -ms-transition: var(--main-transition-2);
    -o-transition: var(--main-transition-2);
}

.contact_btn:hover {
    background: linear-gradient(to right, var(--second-color), var(--accent-color));
}

/* ✅ Features */



.product_features_software {
    padding-top: 40px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.product-features h3 {
    margin-bottom: 20px;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.feature-item i {
    color: var(--accent-color);
    font-size: 18px;
}