/*
Template: tpl_abdelrahman_pro_j5_v4
Joomla: 5.x
All template CSS is kept in this single file.
*/
@import "https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap"; :root {
    --primary: #a9552f;
    --accent: #f1a51d;
    --max: 1180px;
    --bg: #f8f2ea;
    --card: #fffdf8;
    --text: #271f19;
    --muted: #78665b;
    --line: #ead8c9;
    --soft: #fff7ec;
    --shadow: 0 14px 34px rgba(87,45,24,.10)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: linear-gradient(180deg,#fbf6ef 0,#fff 310px);
    color: var(--text);
    font-family: arial;
    font-size: 15px;
    line-height: 1.8
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: .2s
}

a:hover {
    color: #78381d
}

.wrap {
    max-width: var(--max);
    margin-inline:auto;padding-inline:18px}

img {
    max-width: 100%;
    height: auto
}

.clearfix:after {
    content: "";
    display: block;
    clear: both
}

.site-topbar {
    background: #fff7e9;
    border-top: 4px solid var(--accent);
    font-size: 14px;
    color: var(--muted)
}

.site-topbar .wrap {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px
}

.site-header {
    position: relative;
    background: #fdf9f7;
    border-bottom: 1px solid var(--line);
    overflow: hidden
}

.site-header:before {
    content: "";
    position: absolute;
    inset: 0;
    /* background:radial-gradient(circle at 50% -20%,rgba(241,165,29,.20),transparent 44%),linear-gradient(90deg,rgba(169,85,47,.08),transparent 36%,rgba(169,85,47,.07)); */
    pointer-events: none
}

.header-inner {
    position: relative;
    min-height: 142px;
    display: grid;
    /* grid-template-columns:1fr minmax(320px,auto) 1fr; */
    align-items: center;
    gap: 0;
}

.brand {
    /* display:flex; */
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
    color: inherit
}

.brand-logo {
    max-height: 166px;
    max-width: min(688px,100%);
    object-fit: contain;
    float: right;
}

.brand-text h1 {
    margin: 0;
    color: var(--primary);
    font-size: 28px;
    line-height: 1.25;
    font-weight: 850;
    letter-spacing: -.5px
}

.brand-text p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 15px
}

.header-art {
    max-height: 100px;
    max-width: 320px;
    object-fit: contain
}

.logo-position {
    display: flex;
    align-items: center;
    justify-content: center
}

.logo-position img {
    max-height: 112px;
    object-fit: contain
}

.nav-shell {
    background: linear-gradient(180deg,#be6840,#9e4d2a);
    box-shadow: 0 5px 14px rgba(86,45,25,.18);
    z-index: 20;
    font-family: alexandria, Arial, sans-serif;
}

.has-sticky-menu .nav-shell {
    position: sticky;
    top: 0
}

.nav-inner {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center
}

.nav-shell ul,.nav-shell .mod-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.nav-shell li {
    position: relative;
    list-style: none
}

.nav-shell a,.nav-shell span.separator {
    display: block;
    padding: 13px 22px;
    color: #fff;
    /* font-weight: 600; */
    border-inline-start:1px solid rgba(255,255,255,.12);border-inline-end:1px solid rgba(0,0,0,.08);/* float: right; */
}

.nav-shell a:hover,.nav-shell .active>a {
    background: rgba(255,255,255,.14);
    color: #fff
}

.menu-toggle {
    display: none;
    background: #fff;
    color: var(--primary);
    border: 0;
    border-radius: 9px;
    padding: 8px 14px;
    font-weight: 800;
    cursor: pointer
}

.hero {
    padding: 24px 0 0
}

.position-box,.hero .moduletable,.hero .card-module {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 22px;
    box-shadow: var(--shadow)
}

.breadcrumb-area {
    margin: 18px auto
}

.breadcrumb,.breadcrumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--muted)
}

.page-grid {
    display: grid;
    gap: 24px;
    margin: 26px auto 42px;
    align-items: start
}

.layout-main {
    grid-template-columns: minmax(0,1fr)
}

.layout-right {
    grid-template-columns: minmax(0,1fr) 300px
}

.layout-left {
    grid-template-columns: 300px minmax(0,1fr)
}

.layout-three {
    grid-template-columns: 260px minmax(0,1fr) 292px
}

.main-card,.component-box {
    min-width: 0
}

.content-top {
    margin-bottom: 22px
}

.content-bottom {
    margin-top: 24px;
    font-family: alexandria, Arial, sans-serif;
}

.blog,.item-page,.com-content-article {
    min-width: 0
}

.blog-items,.items-leading,.items-row {
    display: grid;
    gap: 22px
}

.blog-item,.item-page,.com-content-article,.newsflash-item,.com-content-category-blog__item {
    background: var(--card);
    border: 1px solid var(--line);
    border-inline-start:3px solid color-mix(in srgb,var(--primary) 72%,#fff);border-radius: 14px;
    padding: 20px;
    box-shadow: 0 10px 26px rgba(87,45,24,.08);
    overflow: hidden;
    font-weight: bold;
    font-size: 19px;
    line-height: 35px;
}

.blog-item + .blog-item {
    margin-top: 0
}

.blog-item h2,.item-title,.page-header h1,.page-header h2,.com-content-article__title,.newsflash-title {
    margin: 0 0 10px;
    /* color:#8a3f20; */
    font-size: 16px;
    line-height: 30px;
    font-weight: 800
}

.page-header h1 {
    font-size: 22px;
    text-align: inherit
}

.item-image,.blog-item figure,.newsflash-image {
    margin: 0 0 14px
}

.blog-item .item-image {
    max-width: 320px
}

.blog-item img,.item-page img,.com-content-article img,.newsflash-image img {
    border-radius: 10px;
    object-fit: cover
}

.readmore {
    margin: 12px 0 0
}

.readmore .btn,.btn-primary,.btn-secondary,.pager a,.pagination a,.pagination span,.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--primary);
    padding: 7px 13px;
    line-height: 1.2;
    box-shadow: none
}

.readmore .btn:hover,.btn-primary:hover,.btn-secondary:hover,.pagination .active .page-link,.pagination a:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary)
}

.pagination,.pagination__wrapper ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    list-style: none!important;
    margin: 24px 0!important;
    padding: 0!important
}

.pagination li,.pagination .page-item {
    list-style: none!important;
    margin: 0!important;
    padding: 0!important
}

.pagination li:before {
    display: none!important
}

.counter {
    text-align: center;
    color: var(--muted);
    margin: 10px 0
}

.float-md-end {
    float: none!important
}

.w-100 {
    width: 100%
}

.sidebar {
    min-width: 0;
    font-family: alexandria, Arial, sans-serif;
}

.sidebar-sticky {
    position: sticky;
    top: 24px
}

.has-sticky-menu .sidebar-sticky {
    top: 76px
}

.sidebar .moduletable,.sidebar .card-module,.bottom .moduletable,.bottom .card-module,.footer .moduletable {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 15px;
    margin-bottom: 22px;
    padding: 18px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.sidebar h3,.bottom h3,.footer h3,.moduletable>h3,.card-module>h3 {
    position: relative;
    margin: -18px -18px 16px;
    padding: 11px 18px;
    background: linear-gradient(180deg,#bd6840,#9f4e2b);
    color: #fff;
    font-size: 17px;
    line-height: 1.4;
    border-radius: 15px 15px 0 0
}

.sidebar ul,.bottom ul {
    list-style: none!important;
    margin: 0!important;
    padding: 0!important
}

.sidebar li,.bottom li {
    list-style: none!important;
    border-bottom: 1px solid #f0e1d6;
    padding: 10px 0
}

.sidebar li:last-child,.bottom li:last-child {
    border-bottom: 0
}

.sidebar img {
    border-radius: 8px
}

.mod-login .form-group {
    margin-bottom: 10px
}

.form-control,input[type="text"],input[type="password"],input[type="email"] {
    width: 100%;
    max-width: 100%;
    border: 1px solid #d9c7b9;
    border-radius: 8px;
    padding: 8px;
    background: #fff
}

.input-group {
    display: flex;
    gap: 6px;
    align-items: center
}

.input-group .form-control {
    flex: 1
}

.form-check {
    display: flex;
    gap: 8px;
    align-items: center
}

.mod-login__options {
    margin-top: 12px!important
}

.mod-login__options li {
    border-bottom: 0;
    padding: 5px 0
}

.bottom {
    background: #fff9f2;
    border-top: 1px solid var(--line);
    padding: 34px 0
}

.bottom-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px
}

.footer {
    background: var(--primary);
    color: #fff;
    padding: 24px 0;
    text-align: center
}

.footer a {
    color: #fff
}

.system-message-container,#system-message-container {
    max-width: var(--max);
    margin: 16px auto;
    padding-inline:18px}

/* Sidebar modules: match the reference layout, dotted separator, brown label, yellow side marker, image left and title right */
.sidebar .moduletable,.sidebar .card-module {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 30px;
    padding: 46px 0 0;
    overflow: visible
}

.sidebar .moduletable:before,.sidebar .card-module:before {
    content: "";
    position: absolute;
    top: 23px;
    inset-inline: 0;
    height: 16px;
    background-image: radial-gradient(#d7d1ca 1px,transparent 1px);
    background-size: 4px 4px;
    opacity: .9
}

.sidebar h3,.sidebar .moduletable>h3,.sidebar .card-module>h3 {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 6px 22px 7px;
    background: linear-gradient(180deg,#bf6940,#a9552f);
    color: #fff;
    border-radius: 9px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 850;
    box-shadow: none;
    z-index: 2
}

.sidebar h3:after,.sidebar .moduletable>h3:after,.sidebar .card-module>h3:after {
    content: "";
    position: absolute;
    top: 8px;
    inset-inline-start: -8px;
    width: 13px;
    height: 28px;
    background: var(--accent);
    border-radius: 999px
}

.sidebar .mod-articlesnews,.sidebar .newsflash {
    display: block
}

.sidebar .mod-articlesnews__item,.sidebar .newsflash-item {
    display: grid;
    grid-template-columns: 112px minmax(0,1fr);
    grid-template-areas: "image title" "image more";
    gap: 10px 16px;
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #ddd6cf;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 18px 0;
    overflow: visible
}

.sidebar .mod-articlesnews__item:first-child,.sidebar .newsflash-item:first-child {
    padding-top: 16px
}

.sidebar .newsflash-image {
    grid-area: image;
    margin: 0
}

.sidebar .newsflash-image img,.sidebar .mod-articlesnews__item img {
    display: block;
    width: 112px;
    height: 78px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 3px 8px rgba(0,0,0,.14)
}

.sidebar .newsflash-title {
    grid-area: title;
    margin: 0;
    color: #202020;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 800;
    text-align: start
}

.sidebar .readmore {
    grid-area: more;
    margin: 0;
    display: none
}

.sidebar .moduletable:has(.mod-login) {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 18px;
    overflow: hidden
}

.sidebar .moduletable:has(.mod-login):before {
    display: none
}

.sidebar .moduletable:has(.mod-login)>h3 {
    position: relative;
    inset: auto;
    display: flex;
    margin: -18px -18px 16px;
    padding: 11px 18px;
    min-height: auto;
    border-radius: 15px 15px 0 0;
    font-size: 17px
}

.sidebar .moduletable:has(.mod-login)>h3:after {
    display: none
}

html[dir="rtl"] .sidebar .mod-articlesnews__item,html[dir="rtl"] .sidebar .newsflash-item {
    grid-template-columns: 128px minmax(0,1fr);
    grid-template-areas: "image title" "image more"
}

html[dir="rtl"] .sidebar .newsflash-title {
    text-align: right
}

html[dir="ltr"] .sidebar .newsflash-title {
    text-align: left
}

.article-image-right,.image-right,figure.right.item-image,.item-image.right {
    float: right;
    margin: 0 0 16px 22px;
    max-width: 320px
}

.article-image-left,.image-left,figure.left.item-image,.item-image.left {
    float: left;
    margin: 0 22px 16px 0;
    max-width: 320px
}

html[dir="rtl"] .article-image-right,html[dir="rtl"] .image-right,html[dir="rtl"] figure.right.item-image,html[dir="rtl"] .item-image.right {
    float: right;
    margin-left: 22px;
    margin-right: 0
}

html[dir="rtl"] .article-image-left,html[dir="rtl"] .image-left,html[dir="rtl"] figure.left.item-image,html[dir="rtl"] .item-image.left {
    float: left;
    margin-right: 22px;
    margin-left: 0
}

.blog-item:after,.item-page:after,.com-content-article:after {
    content: "";
    display: block;
    clear: both
}

.footer {
    background: linear-gradient(180deg,#ae5a33,#974723);
    color: #fff;
    padding: 0;
    text-align: center;
    border-top: 4px solid var(--accent)
}

.footer-main {
    padding: 28px 0
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px;
    text-align: start
}

.footer .moduletable {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    padding: 16px;
    margin: 0
}

.footer h3 {
    position: static;
    margin: 0 0 12px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: 16px;
    color: #fff
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.16);
    padding: 13px 0;
    font-size: 13px;
    color: rgba(255,255,255,.86)
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.footer li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.12)
}

html[dir="rtl"] .left.item-image {
    float: right;
    margin-left: 20px;
    margin-right: 0
}

html[dir="rtl"] .right.item-image {
    float: left;
    margin-right: 20px;
    margin-left: 0
}

html[dir="ltr"] .left.item-image {
    float: left;
    margin-right: 20px;
    margin-left: 0
}

html[dir="ltr"] .right.item-image {
    float: right;
    margin-left: 20px;
    margin-right: 0
}

html[dir="ltr"] body {
    font-family: alexandria,Arial,sans-serif
}

@media (max-width: 980px) {
    .header-inner {
        grid-template-columns:1fr;
        min-height: auto;
        /* padding: 24px 0; */
    }

    .header-left,.header-right {
        display: none
    }

    .brand {
        flex-direction: column
    }

    .brand-logo {
        max-width: 100%;
        max-height: 110px
    }

    .brand-text h1 {
        font-size: 26px
    }

    .layout-right,.layout-left,.layout-three {
        grid-template-columns: 1fr
    }

    .sidebar-sticky {
        position: static
    }

    .bottom-grid {
        grid-template-columns: 1fr
    }

    .menu-toggle {
        display: inline-flex;
        text-align: center;
        margin-right: 14px;
    }

    .nav-inner {
        justify-content: flex-start;
        align-items: flex-start;
        padding: 8px 0;
        flex-direction: column;
        text-align: center;
    }

    .nav-shell ul,.nav-shell .mod-menu {
        display: none;
        width: 100%;
        flex-direction: column
    }

    .nav-shell.is-open ul,.nav-shell.is-open .mod-menu {
        display: flex
    }

    .nav-shell a,.nav-shell span.separator {
        border: 0;
        border-top: 1px solid rgba(255,255,255,.12);
        width: 100%
    }

    .blog-item .item-image,html[dir] .left.item-image,html[dir] .right.item-image {
        float: none;
        margin: 0 0 14px;
        max-width: 100%
    }
}

/* Final sidebar alignment fixes: module title right, item title right, image left */
.sidebar .moduletable:not(:has(.mod-login)), .sidebar .card-module:not(:has(.mod-login)) {
    padding-top: 54px;
}

.sidebar .moduletable:not(:has(.mod-login)) > h3, .sidebar .card-module:not(:has(.mod-login)) > h3 {
    inset-inline-start: 0;
    inset-inline-end: auto;
    text-align: right;
    justify-content: flex-start;
    padding: 8px 24px 9px 30px;
    min-width: 150px;
    max-width: 92%;
    font-size: 19px;
    font-weight: 700;
}

html[dir="rtl"] .sidebar .moduletable:not(:has(.mod-login)) > h3, html[dir="rtl"] .sidebar .card-module:not(:has(.mod-login)) > h3 {
    right: 0;
    left: auto;
}

html[dir="ltr"] .sidebar .moduletable:not(:has(.mod-login)) > h3, html[dir="ltr"] .sidebar .card-module:not(:has(.mod-login)) > h3 {
    left: 0;
    right: auto;
}

.sidebar .moduletable:not(:has(.mod-login)) > h3:after, .sidebar .card-module:not(:has(.mod-login)) > h3:after {
    inset-inline-start: auto;
    inset-inline-end: -10px;
    width: 14px;
    height: 34px;
    top: 50%;
    transform: translateY(-50%);
}

html[dir="rtl"] .sidebar .moduletable:not(:has(.mod-login)) > h3:after, html[dir="rtl"] .sidebar .card-module:not(:has(.mod-login)) > h3:after {
    right: auto;
    left: -10px;
}

html[dir="ltr"] .sidebar .moduletable:not(:has(.mod-login)) > h3:after, html[dir="ltr"] .sidebar .card-module:not(:has(.mod-login)) > h3:after {
    left: auto;
    right: -10px;
}

.sidebar .moduletable:not(:has(.mod-login)):before, .sidebar .card-module:not(:has(.mod-login)):before {
    top: 27px;
}

.sidebar .mod-articlesnews__item, .sidebar .newsflash-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 112px;
    padding: 17px 0;
}

html[dir="rtl"] .sidebar .mod-articlesnews__item, html[dir="rtl"] .sidebar .newsflash-item {
    direction: rtl;
}

.sidebar .newsflash-title, .sidebar .mod-articlesnews__item .newsflash-title, .sidebar .mod-articlesnews__item h4 {
    order: 1;
    flex: 1 1 auto;
    margin: 0;
    text-align: right;
    color: #202020;
    font-size: 16px;
    line-height: 31px;
    font-weight: 600;
}

.sidebar .newsflash-image, .sidebar .mod-articlesnews__item figure.newsflash-image {
    order: 2;
    flex: 0 0 118px;
    margin: 0;
}

.sidebar .newsflash-image img, .sidebar .mod-articlesnews__item img {
    width: 118px;
    height: 82px;
    object-fit: cover;
    border-radius: 3px;
}

html[dir="rtl"] .sidebar .newsflash-title, html[dir="rtl"] .sidebar .mod-articlesnews__item h4 {
    text-align: right;
}

html[dir="ltr"] .sidebar .newsflash-title, html[dir="ltr"] .sidebar .mod-articlesnews__item h4 {
    text-align: left;
}

.sidebar .mod-articlesnews__item .readmore, .sidebar .newsflash-item .readmore {
    display: none !important;
}

@media (max-width: 980px) {
    .sidebar .mod-articlesnews__item, .sidebar .newsflash-item {
        gap:14px;
    }

    .sidebar .newsflash-title, .sidebar .mod-articlesnews__item h4 {
        font-size: 16px;
    }

    .sidebar .newsflash-image, .sidebar .mod-articlesnews__item figure.newsflash-image {
        flex-basis: 112px;
    }

    .sidebar .newsflash-image img, .sidebar .mod-articlesnews__item img {
        width: 112px;
        height: 78px;
    }
}

.page-header a {
    font-size: 24px;
    font-weight: bold;
    color: #000;
}
span.icon-angle-right {
    display: none;
}

li.disabled.page-item {
    display: none;
}

span.icon-angle-double-left {
    display: none;
}

span.icon-angle-left {
    display: none;
}