@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');

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

}

html[dir="rtl"] body {
    --direction: right;
    --antidirection: left;
}


:root {
    --primary-red: #691D1D;
    --secondary-red: #874A4A;
    --tertiary-red: #9F6E6E;
    --black: #000;
    --grey: #8C8C8C;
    --light-bg: #E2DDDD;
    --button-grey: #AAA;
    --white-bg: #FFFFFF;
    --breadcrumb-bg: rgb(187 187 187);
    --Border-radius: 40px;
    --small-border: 24px;
    --small-padding: 10px;
    --medium-padding: 20px;
    --large-padding: 30px;
    --title-font-size: 20px;
    --title-font-weight: bold;
    --medium-font-size: 18px;
    --medium-font-weight: Medium;
    --subtitle-font-size: 22px;
    --subtitle-font-weight: SemiBold;
    --details-font-size: 18px;
    --details-font-weight: Regular;
    --meta-font-size: 14px;
    --meta-font-weight: Regular;
    --section-title-font-size: 26px;
    --section-title-font-weight: Black;
    --post-title-font-size: 30pt;
    --post-title-font-weight: Black;
    --body-background: rgba(234, 234, 234, 1);
    --header-bg: rgba(201, 201, 201, 1);
    --box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.25);

    --font-size-xxs: 8pt;
    --font-size-xs: 9pt;
    --font-size-sm: 10pt;
    --font-size-md: 12pt;
    --font-size-lg: 14pt;
    --font-size-xl: 16pt;
    --font-size-xxl: 18pt;
    --font-size-xxxl: 20pt;
    --font-size-xxxxl: 22pt;
    --font-size-xxxxxl: 24pt;

    --padding-xxs: 2px;
    --padding-xs: 5px;
    --padding-sm: 10px;
    --padding-md: 15px;
    --padding-lg: 20px;
    --padding-xl: 25px;
    --padding-xxl: 30px;
    --padding-xxxl: 35px;
    --padding-xxxxl: 40px;
    --padding-xxxxxl: 45px;

    --margin-xs: 5px;
    --margin-sm: 10px;
    --margin-md: 15px;
    --margin-lg: 20px;
    --margin-xl: 25px;
    --margin-xxl: 30px;
    --margin-xxxl: 35px;
    --margin-xxxxl: 40px;
    --margin-xxxxxl: 45px;

    --border-radius-xs: 5px;
    --border-radius-sm: 10px;
    --border-radius-md: 15px;
    --border-radius-lg: 20px;
    --border-radius-xl: 25px;
    --border-radius-xxl: 30px;
    --border-radius-xxxl: 35px;
    --border-radius-xxxxl: 40px;
    --border-radius-xxxxxl: 45px;

    --font-weight-xs: 100;
    --font-weight-sm: 200;
    --font-weight-md: 300;
    --font-weight-lg: 400;
    --font-weight-xl: 500;
    --font-weight-xxl: 600;
    --font-weight-xxxl: 700;
    --font-weight-xxxxl: 800;

    --icon-background: #d9d9d9;

    --swiper-background-color: #2a0c0c;
    --swiper-button-background-color: rgba(105, 29, 29, 0.4);;
}


body {
    background-color: var(--body-background);
    color: var(--black);
}


.ow-container {
    margin: 40px 0;
}

.content-block {
    background-color: white;
    border-top-right-radius: 24px;
    padding-bottom: 10px;
}

.content-block .grad-overlay {
    position: relative;
    top: unset;
    left: unset;
    height: unset;
    width: unset;
}

.custom-card-shadow {
    box-shadow: var(--box-shadow);
    border-radius: 2px 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

a {
    text-decoration: none;
}

.description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.description img {
    width: 194px;
    height: 63px;
    margin-bottom: 10px;
}

.description p {
    font-size: var(--details-font-size);
    font-weight: var(--details-font-weight);
}

.section-title .more-link {
    color: var(--primary-red);
    font-size: var(--subtitle-font-size);
    font-weight: var(--subtitle-font-weight);
}

.section-title h2 {
    margin: 0;
}

.section-title h2 a {
    color: black;
    font-weight: bold;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.load-more {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    height: 50px;
}

.load-more-btn {
    background-color: var(--primary-red);
    color: white;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-xxxl);
    transition: background-color 0.3s;
    border: 0;
    padding: 10px;
    border-radius: 2px 24px;
    width: 100px;
}


.load-more-btn:hover {
    background-color: var(--tertiary-red) !important;
    border-bottom: 3px solid #000;
}

.content-media-item img {
    max-width: 100%;
}


h2 {
    color: var(--black);
}

.nav-link {
    color: var(--primary-red) !important;
    font-weight: bold;
}

.nav-tabs .nav-link {
    border: 2px solid var(--primary-red) !important;
    border-radius: 24px;
}

.nav-tabs {
    column-gap: 10px;
    margin-bottom: 25px;
    border-bottom: none;
}

.nav-link:not(.active):hover {
    background-color: var(--tertiary-red) !important;
}

button.nav-link.active {
    display: flex;
}

button.nav-link.active:before {
    font-family: "Font Awesome 6 Free";
    content: "\f00c"; /* Unicode for checkmark */
    font-weight: 900;
    margin-left: 8px;
    color: var(--primary-red);
    font-size: 15px;
}

/*issue details  in this issue section gap*/

.in-this-issue .ow-container {
    margin-top: 0;
}

.hide-message {
    display: none;
    position: absolute;
}

.warning-message {
    position: absolute;
    bottom: -40px;
    z-index: 30;
    right: 10px;
    color: var(--primary-red);
    font-weight: bold;
    background: white;
    border-radius: .4em;
    padding: 8px 14px 5px 14px;
    font-size: 14px;
    box-shadow: var(--box-shadow);
}

.warning-message:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: white;
    border-top: 0;
    border-left: 0;
    margin-left: -4.5px;
    margin-top: -9px;
}

.warning-message-result {
    position: absolute;
    bottom: -40px;
    z-index: 30;
    right: 10px;
    color: var(--primary-red);
    font-weight: bold;
    background: white;
    border-radius: .4em;
    padding: 8px 14px 5px 14px;
    font-size: 14px;
    box-shadow: var(--box-shadow);
}

.warning-message-result:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-bottom-color: white;
    border-top: 0;
    border-left: 0;
    margin-left: -4.5px;
    margin-top: -9px;
}

input#search-input::placeholder {
    text-align: right;
}