@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: 400;
    src: url("../_fonts/material-symbols-outlined.woff2") format("woff2");
}

.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
}

/* iran sans */
@font-face {
    font-family: 'iransansxv';
    src: url('../_fonts/IranSans-pro/Variable/webfont/IRANSansXV.woff2') format('woff-variations'),
        /* will be the standard and works in Safari now */
    url('../_fonts/IranSans-pro/Variable/webfont/IRANSansXV.woff') format('woff');
    /* for the other supporting browsers */
    font-weight: 100 900;
    font-display: fallback;

}
@font-face {
    font-family: iransansx;
    src: url('../_fonts/IranSans-pro/Variable/webfont/staticfonts/IRANSansX-Regular.woff') format('woff');
}
@font-face {
    font-family: iransansx;
    src: url('../_fonts/IranSans-pro/Variable/webfont/staticfonts/IRANSansX-Bold.woff') format('woff');
    font-weight: 700;
}

/* Noto Naskh Arabic */
@font-face {
    font-family: "Noto Naskh Arabic";
    font-display: swap;
    src: url("../_fonts/Noto-naskh-arabic/NotoNaskhArabic-VariableFont_wght.ttf")
    format("truetype");
}

:root {
    --primary-color: 22, 152, 0; /* #169800; green */
    --primary-color-2: 27, 182, 1; /* #1BB601 */
    --secondary-color: 255, 177, 61; /*#FFB13D; orange */
    --secondary-color-2: 242, 131, 0; /* #F28300; */
    /*--accent-color: ;*/
    /*--background-color: ;*/
    --background-box-color: 242, 242, 242; /* #F2F2F2 */
}

body {
    font-family: 'iransansxv', iransansx, "Noto Naskh Arabic", arial, sans-serif;
}

p {
    text-align: justify;
}

.my-container {
    max-width: 100rem;
    margin-inline: auto;
}

.btn {
    background-color: rgba(var(--primary-color-2), 0.9) !important;
    border: rgb(var(--primary-color)) 1px solid;
    border-radius: 5px;
}
.btn:active,
.btn:hover {
    filter: brightness(110%);
}

.scroll-behavior--horizontal {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.bg-primary-color {
    background-color: rgb(var(--primary-color));
}
.bg-secondary-color {
    background-color: rgb(var(--secondary-color)) !important;
}

.text-primary-color {
    color: rgb(var(--primary-color));
}
.text-primary-color-2 {
    color: rgb(var(--primary-color-2));
}

.header__nav-link:active,
.header__nav-link:hover {
    background-color: rgb(var(--secondary-color));
}

footer {
    border-top: 1px solid rgb(var(--secondary-color-2));
}

/* Tab content - closed */
.tab-content {
    max-height: 0;
    -webkit-transition: max-height 0.35s;
    -o-transition: max-height 0.35s;
    transition: max-height 0.35s;
}
/* :checked - resize to full height */
.tab input:checked ~ .tab-content {
    max-height: 100vh;
}
/* Label formatting when open */
.tab input:checked + label {
    border-left-width: 1px;
    border-color: white;
}
/* Icon */
.tab .label .icon {
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    transform-origin: center center;
}

/* Open Multiple Icon Formatting - Open */
.tab input[type="checkbox"]:checked + .label .icon {
    transform: rotate(270deg);
}

.border--green {
    border: 1px solid rgb(var(--primary-color-2));
}
.border--green:focus-visible {
    outline: 1px solid transparent;
    box-shadow: 0px 0px 4px rgb(var(--primary-color-2));
}

.subscribe-btn--hover:hover {
    background-color: rgb(var(--primary-color-2));
    color: white;
}

/* Swiper styles */
.swiper-container {
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 768px) {
    /* Custom scroll for desktop */
    .scroll--custom::-webkit-scrollbar {
        width: 0.25em;
        height: 0.25em;
    }
    .scroll--custom::-webkit-scrollbar-track {
        border-radius: 0.5rem;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }
    .scroll--custom::-webkit-scrollbar-thumb {
        border-radius: 0.5rem;
        background-color: #dcdcc8;
        outline: 2px solid #dcdcc8;
    }
}

@media screen and (max-width: 767px) {
    .padding-x {
        padding-left: 40px;
        padding-right: 40px;
    }
}