/* font */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

*{
  font-family: "Tajawal", sans-serif;
}



/* global */
.md\:mb-\[112px\] {
    margin-bottom: 25px;
}

/* top slider */
i.sicon-lightning {
    color: #fff
}

.slider-top * {
    color: #fff!important
}

.top-navbar {
    display: none
}

header.store-header {
    gap: 0
}

.navbar-brand img {
    max-height: 5rem;
    width:100%;
    max-width:100%
}

.main-menu li>a {
    font-size: 1rem;
}

.main-nav-container.fixed-pinned .navbar-brand img {
    max-height: 65px;
}

/* main banner */
.landing-page-fixed-bannar-0 {
    background-size: cover
}

.landing-page-fixed-bannar-5 h1, .landing-page-fixed-bannar-0 h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 45px;
    width: fit-content;
    margin: 7rem auto 0;
    padding: 1rem;
    border-radius: 1rem;
    background-color: rgba(227,242, 241,0.5);
}

.landing-page-fixed-bannar-5 p,.landing-page-fixed-bannar-0 p{
margin-top:1rem;
font-size:24px;
line-height:32px
}

.landing-page-fixed-bannar-5 .w-\[100\%\],.landing-page-fixed-bannar-0 .w-\[100\%\] {
    width: 80%;
    margin-right: 5%
}

.index button.header-btn {
    color: white;
    background-color: var(--s-color);
}

/* categories */
.g_cat .mb-\[55px\] {
    margin: 2rem auto!important
}

.g_cat {
    margin-bottom: 1rem
}

.ads p {
    color: black
}

.g_cat  .\!max-w-\[150px\] {
    max-width: 200px!important;
}

.g_cat .grid-cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

@media(min-width:768px){
.ads .imgs{
    grid-template-columns: repeat(2,minmax(0,1fr));
}
.slider-bannars-moving .text-center.font-Cairo {
    margin-left: -40rem;
}
.slider-bannars-moving p {
    width: 55%;
    margin: 1rem auto;
}
}

.ads .imgs .img:last-child{
  display:none
}

/* offers */
.product_deadline {
    box-shadow: none;
}

.product_deadline {
    background-color: white;
    border-radius: 0.5rem;
}

.dead_line {
    margin-top: 2rem;
    margin-bottom: 2rem
}

.product_deadline salla-add-product-button div {
    height: 100%
}

.product_deadline .data .s-button-primary {
    color: #fff
}

.s-block--best-offers {
    margin: 2rem auto
}

.s-product-card-image-cover {
    -o-object-fit: contain;
    object-fit: contain;
    max-height: 300px
}

.s-block--photos-slider:not(:first-of-type) {
    margin: 2rem 0
}

.slider-bannars {
    padding: 0;
    margin: 2rem auto
}

.slider-bannars-moving .bg-\[var\(--f-color\)\] {
    background-color: white;
}

.slider-bannars img{
display:none
}

.slider-bannars h2 {
    width:fit-content;
}

.slider-bannars-moving {
    height: 500px;
}

.slider-bannars-moving p,
.slider-bannars-moving h2 {
color:black;
    padding: 1rem;
    border-radius: 1rem;
    margin-left:auto;
    margin-right:auto;
    background-color: rgba(227,242, 241,0.5);

}


.slider-bannars-moving .mt-\[32px\] {
    margin-top: 1rem;
}

.landing-page-fixed-bannar-5 {
    max-height: 555px
}

.slider-bannars-moving .text-center.font-Cairo {
    background: url(https://i.ibb.co/1zWkpxW/ZFVWVw-U52-SQJs5o-Z6s-PAcvjg987-Gk-SKj5-So-Lg-RMj-1-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.g_features {
    margin: 2rem 0!important
}

.section_c_r,
.section_c_r .justify-center {
    gap: 0;
}

.section_c_r{
margin:2rem auto
}

#video-banner .video-parent .bg-image {
    object-fit: cover;
    max-width: 100%
}

#video-banner .video-parent::after{
display:none
}

footer .s-apps-icons h3,footer p.text-sm.text-\[\#636363\],footer h2.mb-4.text-sm.font-medium,footer h2.text-xl.font-semibold {
    color: #fff
}

footer input#mc-embedded-subscribe {
    color: var(--color-primary);
    background-color: #fff;
}

.copyright-text p,.copyright-text p a:hover {
    color: #fff!important
}

.store-footer a:hover {
    color: #ae445a
}

footer .relative.bg-\[var\(--s-color\)\].py-8 {
    padding-bottom: 0
}

footer .m-auto.flex.justify-start.max-w-\[1300px\].items-center.flex-wrap.max-lg\:justify-start.gap-9.md\:gap-6.px-5 {
    padding: 1rem
}

.store-footer__inner {
    background-color: white;
}

@media(min-width: 992px) {
    .rtl\:lg\:pl-20:where([dir=rtl],[dir=rtl] *) {
        padding-left:1rem
    }
}

@media(max-width: 767px) {
    .s-block--best-offers {
        margin:1rem auto
    }

    .landing-page-fixed-bannar-5,.landing-page-fixed-bannar-0 {
        max-height: 425px
    }

    .landing-page-fixed-bannar-5 .w-\[100\%\],.landing-page-fixed-bannar-0 .w-\[100\%\] {
        width: 100%;
        margin-right: auto;
        text-align: center!important
    }

    .landing-page-fixed-bannar-5 h1,.landing-page-fixed-bannar-0 h1 {
    width: fit-content;
        margin-top: 7rem;
        font-size: 1.5rem;
        line-height: 1.5;
        text-align: center
    }

    .landing-page-fixed-bannar-5 h1 {
    margin-top: 5rem;
    border-radius: 0.5rem;

    background-color: rgba(255,255,255,0.5);
}

.ads .img .over .text {
    text-align: center;
    justify-content: center;
    align-items: center !important;
}

    .g_cat h3 {
        font-size: 1rem
    }
    
    .g_cat .grid-cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.slider-bannars-moving *{
padding:0.5rem!important;
line-height:1.5
}

    .s-products-slider-card {
        max-width: 215px!important
    }

#slider_bannars_5.slider-bannars .slider-bannars-moving {
    height: 300px;
}


.slider-bannars h2 {
    font-size: 1.25rem;
}

    #video-banner.h-\[400px\] {
        height: 200px;
        margin-bottom: 2rem
    }

    .mb-\[56px\] {
        margin-bottom: 25px
    }

    .footer-is-light .store-footer {
        padding: 0
    }

    .mb-\[120px\] {
        margin-bottom: 70px
    }
    salla-menu.flex.gap-2.hydrated {
    justify-content: center;
}
}




/* Edits */
.landing-page-fixed-bannar-0 h1,
.image-title .title-heade {
    background: unset;
}
.image-title .title-heade {color: #fff;}


/* Full Width */
/* First Banner Start */
section.s-block.s-block--photos-slider salla-slider.photos-slider .swiper-slide{
width:100%;
}
section.s-block.s-block--photos-slider .carousel-slider .swiper-wrapper>div{
padding:0 !important;
}
section:first-of-type.s-block.s-block--photos-slider{
margin-top:0;
}
[dir=rtl] salla-slider.photos-slider .swiper {
    padding: 0;
}
/* Hide right-left arrows */
section.s-block.s-block--photos-slider .s-slider-block__title-nav {
  display: none !important;
}
/* First Banner End */
.content.content--single-page h1.font-bold.text-2xl.mb-6 {
    width: 100%;
}



/* =========================================================
   ESA / Salla - Professional Single Blog Article
   ضع هذا القسم في نهاية ملف CSS الحالي
   ========================================================= */

:root {
  --esa-blog-primary: #b48f59;
  --esa-blog-primary-dark: #96733f;
  --esa-blog-navy: #092143;
  --esa-blog-text: #283341;
  --esa-blog-muted: #6f7885;
  --esa-blog-soft: #f6f8fb;
  --esa-blog-soft-gold: #fbf8f2;
  --esa-blog-border: #e4e9ef;
  --esa-blog-white: #fff;
}

/* ---------- Breadcrumbs ---------- */
#main-content > salla-hook[name="blog.single:start"] + .container {
  max-width: 1240px;
  padding-inline: 24px;
}

#main-content > salla-hook[name="blog.single:start"] + .container .breadcrumbs {
  padding-block: 16px !important;
}

#main-content > salla-hook[name="blog.single:start"] + .container .s-breadcrumb-wrapper {
  gap: 7px;
  color: var(--esa-blog-muted);
  font-size: 14px;
}

#main-content > salla-hook[name="blog.single:start"] + .container .s-breadcrumb-item a {
  color: var(--esa-blog-navy);
  transition: color .2s ease;
}

#main-content > salla-hook[name="blog.single:start"] + .container .s-breadcrumb-item a:hover {
  color: var(--esa-blog-primary);
}

#main-content > salla-hook[name="blog.single:start"] + .container .s-breadcrumb-arrow svg {
  width: 18px;
  height: 18px;
  opacity: .45;
}

/* ---------- Main article cover ---------- */
#main-content > salla-hook[name="blog.single:start"] + .container + .landing {
  width: min(calc(100% - 40px), 1320px);
  min-height: 500px;
  height: 500px !important;
  margin: 0 auto 26px;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background-position: center 38% !important;
  box-shadow: 0 22px 55px rgba(9, 33, 67, .16);
}

#main-content > salla-hook[name="blog.single:start"] + .container + .landing > .overflow {
    background: linear-gradient(90deg, rgb(5 20 38 / 83%) 0%, rgb(5 20 38) 92%, rgb(5 20 38 / 90%) 100%) !important;
}

#main-content > salla-hook[name="blog.single:start"] + .container + .landing .desc-article {
  width: 100%;
  max-width: 1120px;
  margin: 0 !important;
  padding: 60px clamp(28px, 6vw, 90px) 68px !important;
  align-items: flex-start;
  justify-content: center;
}

#main-content > salla-hook[name="blog.single:start"] + .container + .landing .desc-article .cat {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: #fff !important;
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 16px !important;
  line-height: 1.4;
}

#main-content > salla-hook[name="blog.single:start"] + .container + .landing .desc-article h1 {
  width: min(100%, 900px) !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(34px, 4.4vw, 58px) !important;
  font-weight: 800 !important;
  line-height: 1.38 !important;
  letter-spacing: -.3px;
  text-wrap: balance;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .28);
}

#main-content > salla-hook[name="blog.single:start"] + .container + .landing .desc-article .date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: rgba(255, 255, 255, .88) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  transform: none !important;
}

#main-content > salla-hook[name="blog.single:start"] + .container + .landing .desc-article .date::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--esa-blog-primary);
  box-shadow: 0 0 0 4px rgba(180, 143, 89, .20);
}

/* إخفاء الشريط المتحرك المكرر أسفل صورة المقال */
#main-content > salla-hook[name="blog.single:start"] + .container + .landing .slide-article {
  display: none !important;
}

/* ---------- Like button ---------- */
#main-content > salla-hook[name="blog.single:start"] + .container + .landing + .container {
  max-width: 980px;
  margin: 0 auto !important;
  padding: 0 8px;
  justify-content: flex-end;
}

#main-content #blog-like {
  min-width: 58px;
  min-height: 40px;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--esa-blog-border);
  border-radius: 999px;
  color: var(--esa-blog-muted);
  background: #fff;
  box-shadow: 0 6px 18px rgba(9, 33, 67, .06);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}

#main-content #blog-like:hover {
  color: var(--esa-blog-primary-dark);
  border-color: rgba(180, 143, 89, .55);
  transform: translateY(-2px);
}

/* ---------- Article card ---------- */
#main-content .blog-category {
  max-width: 1040px;
  margin: 14px auto 48px !important;
  overflow: hidden;
  border: 1px solid var(--esa-blog-border);
  border-radius: 26px !important;
  background: var(--esa-blog-white) !important;
  box-shadow: 0 20px 55px rgba(9, 33, 67, .09);
}

#main-content .blog-category .article-body {
  max-width: 900px;
  margin: 0 auto !important;
  padding: clamp(34px, 6vw, 70px) clamp(26px, 6vw, 74px) 54px;
  color: var(--esa-blog-text);
  font-size: 18px !important;
  font-weight: 400;
  line-height: 2.05 !important;
  text-align: right;
  overflow-wrap: anywhere;
}

#main-content .blog-category .article-body > *:first-child {
  margin-top: 0 !important;
}

#main-content .blog-category .article-body p {
  margin: 0 0 1.35em;
  color: var(--esa-blog-text);
  font-size: inherit;
  line-height: inherit;
}

/* إلغاء الفقرات الفارغة الناتجة عن المحرر */
#main-content .blog-category .article-body p:empty,
#main-content .blog-category .article-body p:has(> br:only-child) {
  display: none;
}

/* مقدمة المقال */
#main-content .blog-category .article-body > p:first-child {
  margin-bottom: 32px;
  padding: 24px 26px;
  border: 1px solid rgba(180, 143, 89, .22);
  border-right: 5px solid var(--esa-blog-primary);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff 0%, var(--esa-blog-soft-gold) 100%);
  color: #253449;
  font-size: 19px;
  line-height: 2;
}

#main-content .blog-category .article-body > p:first-child strong {
  font-weight: 500;
}

/* ---------- Headings ---------- */
#main-content .blog-category .article-body h2,
#main-content .blog-category .article-body h3,
#main-content .blog-category .article-body h4 {
  color: var(--esa-blog-navy) !important;
  text-align: right;
  scroll-margin-top: 110px;
}

#main-content .blog-category .article-body h2 {
  position: relative;
  margin: 2.2em 0 .85em;
  padding: 3px 18px 3px 0;
  border-right: 5px solid var(--esa-blog-primary);
  font-size: clamp(25px, 3vw, 32px) !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
}

#main-content .blog-category .article-body h3 {
  margin: 1.8em 0 .7em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--esa-blog-border);
  font-size: clamp(21px, 2.4vw, 25px) !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
}

#main-content .blog-category .article-body h4 {
  margin: 1.5em 0 .65em;
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* معالجة بصرية احتياطية للعناوين التي تحتوي نص جدول غير منسق */
#main-content .blog-category .article-body h2:has(> strong) {
  padding: 24px !important;
  border: 1px solid var(--esa-blog-border);
  border-right: 5px solid var(--esa-blog-primary);
  border-radius: 16px;
  background: var(--esa-blog-soft);
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 2 !important;
}

#main-content .blog-category .article-body h2:has(> strong) strong {
  display: block;
  margin: 18px 0 6px;
  color: var(--esa-blog-navy);
  font-size: 20px;
  font-weight: 800;
}

/* عنوان الدعوة الأخيرة */
#main-content .blog-category .article-body h2.text-center,
#main-content .blog-category .article-body h2.ql-align-center {
  margin-top: 54px;
  padding: 24px 28px !important;
  border: 0;
  border-radius: 20px 20px 0 0;
  color: #fff !important;
  background: linear-gradient(135deg, var(--esa-blog-navy), #163b68);
  text-align: center !important;
}

/* ---------- Lists ---------- */
#main-content .blog-category .article-body ul,
#main-content .blog-category .article-body ol {
  margin: 16px 0 32px;
  padding: 22px 52px 22px 24px;
  border: 1px solid var(--esa-blog-border);
  border-radius: 16px;
  background: var(--esa-blog-soft);
}

#main-content .blog-category .article-body li {
  margin: 7px 0;
  padding-right: 4px;
  color: var(--esa-blog-text);
  line-height: 1.95;
}

#main-content .blog-category .article-body li::marker {
  color: var(--esa-blog-primary);
  font-weight: 800;
}

#main-content .blog-category .article-body .p-previous-ul {
  margin-bottom: 12px !important;
}

/* ---------- Images, video and captions ---------- */
#main-content .blog-category .article-body p:has(> img:only-child),
#main-content .blog-category .article-body figure {
  margin: 34px 0;
}

#main-content .blog-category .article-body img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 660px;
  margin: 32px auto;
  border: 1px solid rgba(9, 33, 67, .08);
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 16px 42px rgba(9, 33, 67, .12);
}

#main-content .blog-category .article-body figure img,
#main-content .blog-category .article-body p > img {
  margin-block: 0;
}

#main-content .blog-category .article-body figcaption {
  margin-top: 10px;
  color: var(--esa-blog-muted);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

#main-content .blog-category .article-body iframe,
#main-content .blog-category .article-body video {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 32px auto;
  border: 0;
  border-radius: 18px;
  aspect-ratio: 16 / 9;
  box-shadow: 0 16px 42px rgba(9, 33, 67, .12);
}

/* ---------- Links ---------- */
#main-content .blog-category .article-body a:not([style*="background-color"]) {
  color: var(--esa-blog-navy) !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(180, 143, 89, .70);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

#main-content .blog-category .article-body a:not([style*="background-color"]):hover {
  color: var(--esa-blog-primary-dark) !important;
  text-decoration-color: var(--esa-blog-primary-dark);
}

/* ---------- Expert tip callout ---------- */
#main-content .blog-category .article-body p:has(> strong[style*="180, 143, 89"]) {
  margin: 34px 0 0;
  padding: 22px 24px 8px;
  border: 1px solid rgba(180, 143, 89, .26);
  border-bottom: 0;
  border-right: 5px solid var(--esa-blog-primary);
  border-radius: 16px 16px 0 0;
  background: var(--esa-blog-soft-gold);
}

#main-content .blog-category .article-body p:has(> strong[style*="180, 143, 89"]) + p {
  margin-top: 0;
  padding: 0 24px 22px;
  border: 1px solid rgba(180, 143, 89, .26);
  border-top: 0;
  border-right: 5px solid var(--esa-blog-primary);
  border-radius: 0 0 16px 16px;
  background: var(--esa-blog-soft-gold);
}

/* ---------- Quotes and tables ---------- */
#main-content .blog-category .article-body blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  border-right: 5px solid var(--esa-blog-primary);
  border-radius: 16px;
  color: #34445a;
  background: var(--esa-blog-soft);
  font-size: 19px;
  line-height: 2;
}

#main-content .blog-category .article-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 30px 0;
  overflow-x: auto;
  border: 1px solid var(--esa-blog-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  background: #fff;
}

#main-content .blog-category .article-body th,
#main-content .blog-category .article-body td {
  min-width: 160px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--esa-blog-border);
  text-align: right;
  vertical-align: top;
}

#main-content .blog-category .article-body th {
  color: #fff;
  background: var(--esa-blog-navy);
  font-weight: 700;
}

/* ---------- Final CTA ---------- */
#main-content .blog-category .article-body h2.text-center + p.text-center,
#main-content .blog-category .article-body h2.ql-align-center + p.ql-align-center {
  margin: 0;
  padding: 8px 34px 20px;
  color: rgba(255, 255, 255, .88);
  background: linear-gradient(135deg, var(--esa-blog-navy), #163b68);
}

#main-content .blog-category .article-body p.text-center:has(a[style*="background-color"]),
#main-content .blog-category .article-body p.ql-align-center:has(a[style*="background-color"]) {
  margin: 0 0 34px;
  padding: 0 24px 28px;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(135deg, var(--esa-blog-navy), #163b68);
}

#main-content .blog-category .article-body p.text-center a[style*="background-color"],
#main-content .blog-category .article-body p.ql-align-center a[style*="background-color"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 28px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 12px;
  color: #fff !important;
  background: var(--esa-blog-primary) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
  text-decoration: none !important;
  transition: transform .2s ease, background-color .2s ease;
}

#main-content .blog-category .article-body p.text-center a[style*="background-color"]:hover,
#main-content .blog-category .article-body p.ql-align-center a[style*="background-color"]:hover {
  background: var(--esa-blog-primary-dark) !important;
  transform: translateY(-2px);
}

/* إخفاء سطر الكلمات المفتاحية إذا جاء مباشرة بعد زر الدعوة */
#main-content .blog-category .article-body > p.text-center + p:not(.text-center),
#main-content .blog-category .article-body > p.ql-align-center + p:not(.ql-align-center) {
  display: none;
}

/* ---------- Tags ---------- */
#main-content .blog-category > .border-t {
  gap: 10px;
  padding: 24px clamp(22px, 5vw, 60px) !important;
  border-color: var(--esa-blog-border) !important;
  background: #fafbfd;
}

#main-content .blog-category > .border-t > a {
  min-height: 40px;
  padding: 8px 14px !important;
  border: 1px solid var(--esa-blog-border);
  border-radius: 999px !important;
  color: var(--esa-blog-muted) !important;
  background: #fff;
  box-shadow: 0 4px 12px rgba(9, 33, 67, .04);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

#main-content .blog-category > .border-t > a:hover {
  color: var(--esa-blog-primary-dark) !important;
  border-color: rgba(180, 143, 89, .55);
  transform: translateY(-2px);
}

#main-content .blog-category > .border-t .sicon-tag {
  color: var(--esa-blog-primary);
}

/* ---------- Comments ---------- */
#main-content .blog-category salla-comments {
  display: block;
  padding: 12px clamp(22px, 5vw, 60px) 42px;
}

#main-content .blog-category .s-comments-container {
  padding: 22px;
  border: 1px solid var(--esa-blog-border);
  border-radius: 18px;
  background: var(--esa-blog-soft);
}

/* ---------- Related articles ---------- */
#main-content .blog-category + .articles {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 64px;
}

#main-content .blog-category + .articles .image-title {
  display: flex;
  align-items: center;
  min-height: auto;
  margin-bottom: 18px !important;
  padding: 0;
  background: none !important;
}

#main-content .blog-category + .articles .image-title .title-heade {
  margin: 0;
  padding: 2px 16px 2px 0;
  border-right: 5px solid var(--esa-blog-primary);
  color: var(--esa-blog-navy) !important;
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.5;
}

#main-content .blog-category + .articles > div:has(> a[href$="/blog"]) {
  display: flex;
  margin-bottom: 22px !important;
}

#main-content .blog-category + .articles > div > a[href$="/blog"] {
  width: fit-content;
  margin-right: auto;
  padding: 9px 15px;
  border: 1px solid var(--esa-blog-border);
  border-radius: 999px;
  color: var(--esa-blog-navy);
  background: #fff;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

#main-content .blog-category + .articles > div > a[href$="/blog"]:hover {
  color: var(--esa-blog-primary-dark);
  border-color: rgba(180, 143, 89, .55);
  transform: translateY(-2px);
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  #main-content > salla-hook[name="blog.single:start"] + .container + .landing {
    width: calc(100% - 28px);
    height: 460px !important;
    min-height: 460px;
    border-radius: 22px;
  }

  #main-content > salla-hook[name="blog.single:start"] + .container + .landing .desc-article {
    padding: 46px 38px 52px !important;
  }

  #main-content .blog-category {
    border-radius: 22px !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  #main-content > salla-hook[name="blog.single:start"] + .container {
    padding-inline: 14px;
  }

  #main-content > salla-hook[name="blog.single:start"] + .container .breadcrumbs {
    padding-block: 12px !important;
  }

  #main-content > salla-hook[name="blog.single:start"] + .container + .landing {
    width: calc(100% - 24px);
    height: 410px !important;
    min-height: 410px;
    margin-bottom: 18px;
    border-radius: 18px;
    background-position: center center !important;
    box-shadow: 0 14px 34px rgba(9, 33, 67, .14);
  }

  #main-content > salla-hook[name="blog.single:start"] + .container + .landing > .overflow {
    background: linear-gradient(
      180deg,
      rgba(5, 20, 38, .34) 0%,
      rgba(5, 20, 38, .74) 58%,
      rgba(5, 20, 38, .92) 100%
    ) !important;
  }

  #main-content > salla-hook[name="blog.single:start"] + .container + .landing .desc-article {
    justify-content: flex-end;
    padding: 26px 20px 34px !important;
  }

  #main-content > salla-hook[name="blog.single:start"] + .container + .landing .desc-article .cat {
    margin-bottom: 13px;
    padding: 6px 12px;
    font-size: 13px !important;
  }

  #main-content > salla-hook[name="blog.single:start"] + .container + .landing .desc-article h1 {
    width: 100% !important;
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.43 !important;
    letter-spacing: 0;
  }

  #main-content > salla-hook[name="blog.single:start"] + .container + .landing .desc-article .date {
    margin-top: 14px;
    font-size: 13px !important;
  }

  #main-content > salla-hook[name="blog.single:start"] + .container + .landing + .container {
    padding-inline: 14px;
  }

  #main-content .blog-category {
    margin-top: 8px !important;
    margin-bottom: 34px !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(9, 33, 67, .07);
  }

  #main-content .blog-category .article-body {
    padding: 28px 18px 38px;
    font-size: 17px !important;
    line-height: 1.95 !important;
  }

  #main-content .blog-category .article-body > p:first-child {
    margin-bottom: 26px;
    padding: 19px 18px;
    border-right-width: 4px;
    border-radius: 13px;
    font-size: 17px;
    line-height: 1.95;
  }

  #main-content .blog-category .article-body h2 {
    margin-top: 1.9em;
    padding-right: 13px;
    border-right-width: 4px;
    font-size: 24px !important;
    line-height: 1.55 !important;
  }

  #main-content .blog-category .article-body h3 {
    font-size: 20px !important;
  }

  #main-content .blog-category .article-body h2:has(> strong) {
    padding: 18px !important;
    font-size: 16px !important;
  }

  #main-content .blog-category .article-body ul,
  #main-content .blog-category .article-body ol {
    padding: 18px 38px 18px 16px;
    border-radius: 13px;
  }

  #main-content .blog-category .article-body img {
    margin: 25px auto;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(9, 33, 67, .10);
  }

  #main-content .blog-category .article-body h2.text-center,
  #main-content .blog-category .article-body h2.ql-align-center {
    margin-top: 42px;
    padding: 21px 18px !important;
    border-radius: 16px 16px 0 0;
    font-size: 23px !important;
  }

  #main-content .blog-category .article-body h2.text-center + p.text-center,
  #main-content .blog-category .article-body h2.ql-align-center + p.ql-align-center {
    padding: 4px 18px 18px;
  }

  #main-content .blog-category .article-body p.text-center:has(a[style*="background-color"]),
  #main-content .blog-category .article-body p.ql-align-center:has(a[style*="background-color"]) {
    padding: 0 16px 22px;
    border-radius: 0 0 16px 16px;
  }

  #main-content .blog-category .article-body p.text-center a[style*="background-color"],
  #main-content .blog-category .article-body p.ql-align-center a[style*="background-color"] {
    width: 100%;
    padding-inline: 16px;
  }

  #main-content .blog-category > .border-t {
    gap: 8px;
    padding: 20px 16px !important;
  }

  #main-content .blog-category > .border-t > a {
    max-width: 100%;
    font-size: 12px !important;
  }

  #main-content .blog-category salla-comments {
    padding: 8px 16px 30px;
  }

  #main-content .blog-category .s-comments-container {
    padding: 16px;
    border-radius: 14px;
  }

  #main-content .blog-category + .articles {
    margin-bottom: 38px;
    padding-inline: 4px;
  }

  #main-content .blog-category + .articles .image-title .title-heade {
    font-size: 24px;
  }
}


/* ==================================================
   إصلاح خروج محتوى المقالة خارج شاشة الجوال
================================================== */
@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    #main-content {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /* الحاوية الخارجية للمقال */
    #main-content .container.mb-8.sm\:mb-24 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 12px !important;
        padding-left: 12px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* بطاقة المقال */
    #main-content .blog-category {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* جسم المقال */
    #main-content .blog-category .article-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 26px 16px 38px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        direction: rtl !important;
        text-align: right !important;
    }

    /* منع أي عنصر داخلي من توسيع المقال */
    #main-content .blog-category .article-body * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* إصلاح التفاف النص */
    #main-content .blog-category .article-body p,
    #main-content .blog-category .article-body h2,
    #main-content .blog-category .article-body h3,
    #main-content .blog-category .article-body h4,
    #main-content .blog-category .article-body li,
    #main-content .blog-category .article-body blockquote,
    #main-content .blog-category .article-body a {
        width: auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* المقدمة */
    #main-content .blog-category .article-body > p:first-child {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 18px 16px !important;
        box-sizing: border-box !important;
    }

    /* العناوين */
    #main-content .blog-category .article-body h2 {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 12px !important;
        padding-left: 0 !important;
        font-size: 23px !important;
        line-height: 1.6 !important;
    }

    #main-content .blog-category .article-body h3 {
        width: 100% !important;
        font-size: 20px !important;
        line-height: 1.65 !important;
    }

    /* الصور داخل المقال */
    #main-content .blog-category .article-body img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-right: auto !important;
        margin-left: auto !important;
        object-fit: contain !important;
    }

    /* الروابط التي تحتوي صور الدورات */
    #main-content .blog-category .article-body p > a {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* القوائم */
    #main-content .blog-category .article-body ul,
    #main-content .blog-category .article-body ol {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 18px 36px 18px 14px !important;
        box-sizing: border-box !important;
    }

    /* الجداول */
    #main-content .blog-category .article-body table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* الفيديو والعناصر المضمنة */
    #main-content .blog-category .article-body iframe,
    #main-content .blog-category .article-body video {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
    }

    /* الأكواد أو الكلمات الإنجليزية الطويلة */
    #main-content .blog-category .article-body pre,
    #main-content .blog-category .article-body code {
        max-width: 100% !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
    }
}

/* ==================================================
   إظهار الصورة الرئيسية كاملة على الجوال
================================================== */
@media (max-width: 767px) {

    #main-content > salla-hook[name="blog.single:start"]
    + .container
    + .landing {

        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;

        height: auto !important;
        min-height: 330px !important;

        margin-right: auto !important;
        margin-left: auto !important;

        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-color: #092143 !important;

        border-radius: 18px !important;
        overflow: hidden !important;
    }

    #main-content > salla-hook[name="blog.single:start"]
    + .container
    + .landing .desc-article {

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 24px 18px 28px !important;

        box-sizing: border-box !important;
    }

    #main-content > salla-hook[name="blog.single:start"]
    + .container
    + .landing .desc-article h1 {

        width: 100% !important;
        max-width: 100% !important;

        font-size: 25px !important;
        line-height: 1.5 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}