/* Custom CSS for Tejaroo - Frontend */
/* Font: IRANYekan (FaNum version for Persian Numerals) */
@font-face {
    font-family: 'IRANYekan';
    src: url('../fonts/IRANYekanWebRegularFaNum.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'IRANYekan';
    src: url('../fonts/IRANYekanWebBold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'IRANYekan';
    src: url('../fonts/IRANYekanWebLight.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

:root {
    --primary-color: #ff9800;
    /* Building gold */
    --secondary-color: #333333;
    /* Dark Grey */
    --hover-color: #e68900;
}

body {
    font-family: 'IRANYekan', sans-serif !important;
    font-size: calc(13px + 0.2vw);
    background-color: #f8f9fa;
    color: var(--secondary-color);
    overflow-x: hidden;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a,
button,
input {
    font-family: 'IRANYekan', sans-serif !important;
}

h1,
.h1 {
    font-size: calc(1.4rem + 1vw) !important;
}

h2,
.h2 {
    font-size: calc(1.3rem + 0.8vw) !important;
}

h3,
.h3 {
    font-size: calc(1.2rem + 0.6vw) !important;
}

h4,
.h4 {
    font-size: calc(1.1rem + 0.4vw) !important;
}

h5,
.h5 {
    font-size: calc(1rem + 0.2vw) !important;
}

h6,
.h6 {
    font-size: 1rem !important;
}

.display-1 {
    font-size: calc(2.4rem + 2.4vw) !important;
}

.display-2 {
    font-size: calc(2.2rem + 2vw) !important;
}

.display-3 {
    font-size: calc(2rem + 1.8vw) !important;
}

.display-4 {
    font-size: calc(1.8rem + 1.5vw) !important;
}

.main-content {
    min-height: calc(100vh - 200px);
}

.brand-scroll-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

.brand-scroll-content {
    display: inline-flex;
    animation: scrollBrands 20s linear infinite;
    gap: 2rem;
}

@keyframes scrollBrands {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

.card-product {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 12px;
}

.card-product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn-primary-custom {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.btn-primary-custom:hover {
    background-color: var(--hover-color);
    border-color: var(--hover-color);
    color: #fff;
}