/* Theme tokens */

:root {

    --brand: #f37321;

  --brand-600: #e86812;

  --brand-700: #cf5d0f;

  --ink: #151515;

  --muted: #6c757d;

  --bg-subtle: #fff7f1;

  --bs-primary: #32a2ef;

  --bs-primary-rgb: rgb(50, 162, 239);

  --bs-secondary-rgb: rgb(254, 195, 0);

  --bs-secondary: #fec300;

  --bs-warning: #d9bb81;

  --bs-gray-dark: #dddddd;

  --bs-gray-darker: #93909d;

  --bs-gray: #f5f6f8;

  --bs-gray-light: #d3dce6;

  --bs-light: #cfd8dc;

  --bs-danger: rgb(197, 22, 29);

  --bs-blue: #002773;

  --bs-white: #fff;

  --bs-nav-link-hover-color: #d9bb81;

  --bs-link-hover-color-rgb: #d9bb81;

  /* --bs-borderColor: #e2e3e7;

    --bs-lineColor: #78909c;

    --bs-rutitrColor: #8b8e8e;

    --bs-border-radius: 3px;

    --bs-bodyColor: #666;*/

  --bs-blackColor: #333;

  --original-color: #011f75;

  --primary-color: #32a2ef;

  --primary-dark-color: #118add;

  --primary-light-color: #9fc9e6;

  --secondary-color: #fec300;

  --hyperlink-color: #145587;

    --bs-border-color: #f0f0f0;

}



@font-face {

  font-family: 'arabic';

  font-display: block;

  font-weight: 400;

  src: url("arabic-regular.woff2") format("woff2"); }

@font-face {

  font-family: 'arabic';

  font-display: block;

  font-weight: 900;

  src: url("arabic-bold.woff2") format("woff2"); }

  

html,

body {

  font-family: "arabic" , "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Naskh Arabic", "Noto Sans Arabic", sans-serif;

  color: var(--ink);

}



.text-primary,

.btn-primary,

.badge.text-bg-primary,

.link-primary,

.page-link.active {

  --bs-primary: var(--brand);

  --bs-link-color: var(--brand);

}



.btn-primary {

  background-color: var(--brand);

  border-color: var(--brand);

}



.btn-primary:hover,

.btn-primary:focus {

  background-color: var(--brand-600);

  border-color: var(--brand-600);

}



.btn-outline-primary {

  color: var(--brand);

  border-color: var(--brand);

}



.btn-outline-primary:hover,

.btn-outline-primary:focus {

  background-color: var(--brand);

  border-color: var(--brand);

}



/* Theme toggle button */

.theme-toggle-btn {

  border-color: rgba(0, 0, 0, .2);

  color: #555;

}



.theme-dark .theme-toggle-btn {

  border-color: rgba(255, 255, 255, .35);

  color: #eee;

}



/* Navbar */

.navbar-brand {

  letter-spacing: -0.3px;

}



.nav-link {

  position: relative;

}



.nav-link::after {

  transition: all .2s ease;

  border:0 !important;

}





/* Hero */

.hero-feature {

  min-height: 320px;

  background: #000;

}



.hero-feature .hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .55) 65%, rgba(0, 0, 0, .75) 100%);

  display: flex;

  flex-direction: column;

  justify-content: end;

}



.object-fit-cover {

  object-fit: cover;

}



/* Carousel indicators themed */

#heroCarousel .carousel-indicators [data-bs-target] {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background-color: rgba(255, 255, 255, .6);

}



#heroCarousel .carousel-indicators .active {

  background-color: var(--brand);

}



/* Section title */

.section-title h2 {

  color: var(--ink);

}



.section-title .subtitle {

  color: var(--muted);

}



/* Cards */

.card.news-card .card-img-top {

  aspect-ratio: 16 / 9;

  object-fit: cover;

}



.card.news-card {

  transition: transform .15s ease, box-shadow .15s ease;

}



.card.news-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .08) !important;

}



/* Most Read (center) counters */

.most-read-center .list-group-numbered>li::marker {

  content: none;

}



.most-read-center .list-group-numbered>li {

  counter-increment: section;

  position: relative;

  padding-inline-start: 3rem;

}



.most-read-center .list-group-numbered>li::before {

  content: counter(section);

  position: absolute;

  inset-inline-start: .75rem;

  inset-block-start: 50%;

  transform: translateY(-50%);

  width: 1.8rem;

  height: 1.8rem;

  display: inline-grid;

  place-items: center;

  background: var(--brand);

  color: #fff;

  border-radius: .5rem;

  font-weight: 700;

  font-size: .9rem;

}



.bg-brand-subtle {

  background: var(--bg-subtle);

}



/* Featured Blogs */

.blog-card .avatar {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  object-fit: cover;

  flex: 0 0 48px;

}



.blog-card {

  transition: box-shadow .15s ease, transform .15s ease;

}



.blog-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, .08) !important;

}



/* Video Section (Al Jazeera-like) */

.video-card .ratio {

  background: #000;

}



.video-card .video-overlay {

  position: absolute;

  inset-inline: 0;

  inset-block-end: 0;

  /*background: linear-gradient(180deg, transparent, rgba(0,0,0,.6) 48%, rgba(0,0,0,.4));*/

  color: #fff;

}



.play-btn {

  position: absolute;

  inset: 0;

  margin: auto;

  width: 64px;

  height: 64px;

  border: 0;

  border-radius: 50%;

  background: rgba(243, 115, 33, .9);

  box-shadow: 0 6px 20px rgba(243, 115, 33, .35);

}



.play-btn::before {

  content: "";

  display: block;

  width: 0;

  height: 0;

  margin: auto;

  border-inline-start: 16px solid #fff;

  border-block: 10px solid transparent;

  transform: translateX(2px);

}



.play-btn:hover,

.play-btn:focus {

  background: var(--brand-600);

  outline: none;

}



.badge-duration {

  position: absolute;

  /*inset-inline-start: .75rem; inset-block-start: .75rem;*/

  background: rgba(0, 0, 0, .55);

  color: #fff;

  border-radius: .5rem;

  padding: .25rem .5rem;

  font-weight: 700;

}



.badge-duration-sm {

  /*inset-inline-start: .5rem; inset-block-start: .5rem;*/

  padding: .2rem .45rem;

  font-size: .7rem;

}



.video-list .list-group-item {

  padding: .75rem 1rem;

}



.video-list .thumb {

  width: 140px;

}



.video-list .title {

  line-height: 1.3;

}



/* Focus styles */

:focus-visible {

  outline: 3px solid rgba(243, 115, 33, .45);

  outline-offset: 2px;

}



/* Utilities */

.shadow-sm-sm {

  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .04) !important;

}



/* Translations (ترجمات) */

.translations-section .translation-card {

  transition: transform .15s ease, box-shadow .15s ease;

}



.translations-section .translation-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 .6rem 1.2rem rgba(0, 0, 0, .08) !important;

}



.translations-section .ratio {

  background: #000;

}



.translations-section .chip.chip-source {

  position: absolute;

  inset-inline-start: .75rem;

  inset-block-start: .75rem;

  background: #fff;

  color: var(--ink);

  border: 1px solid rgba(243, 115, 33, .35);

  padding: .15rem .5rem;

  border-radius: 999px;

  font-size: .75rem;

  font-weight: 600;

  width: auto !important;

  height: auto !important;

}



.translations-section .card-title a {

  text-decoration: none;

}



.translations-section .card-title a:hover {

  color: var(--brand);

}



/* Video section theming */

.theme-dark .video-section {

  background-color: #111;

}



.theme-dark .video-section .section-title h2 {

  color: #fff;

}



.video-section .section-title .btn {

  color: var(--brand);

  border-color: var(--brand);

}



.video-section .section-title .btn:hover,

.video-section .section-title .btn:focus {

  background-color: var(--brand);

  color: #fff;

}



.theme-dark .video-section .video-card {

  background-color: #000;

}



.theme-dark .video-section .video-list {

  background: transparent;

}



.theme-dark .video-section .video-list .list-group-item {

  background: transparent;

  color: #ddd;

  border-color: rgba(255, 255, 255, .12);

}



.theme-dark .video-section .video-list .title {

  color: #fff;

}



.theme-dark .video-section .video-list .meta {

  color: #bbb;

}



/* Footer theming */

.theme-dark footer {

  background-color: #111 !important;

  color: #ddd;

  border-top: 1px solid rgba(255, 255, 255, .12) !important;

}



.theme-dark footer h6,

.theme-dark footer .navbar-brand {

  color: #fff !important;

}



.theme-dark footer .text-muted {

  color: #bbb !important;

}



.theme-dark footer a,

.theme-dark footer .link-body-emphasis {

  color: #ddd;

}



.theme-dark footer a:hover {

  color: var(--brand);

}



.theme-dark footer .border-top {

  border-top-color: rgba(255, 255, 255, .12) !important;

}



/* Global dark theme overrides */

.theme-dark body {

  background-color: #0f0f0f;

  color: #e6e6e6;

}



.theme-dark .topbar {

  background-color: #0f0f0f;

  border-bottom-color: rgba(255, 255, 255, .12) !important;

}



.theme-dark .navbar {

  background-color: #111 !important;

  border-bottom: 1px solid rgba(255, 255, 255, .12);

}



.theme-dark .navbar .navbar-brand {

  color: #fff !important;

}



.theme-dark .navbar .nav-link {

  color: #ddd;

}



.theme-dark .navbar .nav-link:hover,

.theme-dark .navbar .nav-link.active {

  color: #fff;

}



.theme-dark .form-control {

  background-color: #1c1c1c;

  border-color: #333;

  color: #eee;

}



.theme-dark .form-control::placeholder {

  color: #aaa;

}



.theme-dark .card {

  background-color: #161616;

  color: #ddd;

}



.theme-dark .list-group-item {

  background-color: #161616;

  color: #ddd;

}



.theme-dark .bg-white {

  background-color: #111 !important;

}



.theme-dark .border-top {

  border-top-color: rgba(255, 255, 255, .12) !important;

}



.theme-dark .border-bottom {

  border-bottom-color: rgba(255, 255, 255, .12) !important;

}



.theme-dark .section-title h2 {

  color: #fff;

}



.theme-dark .text-muted {

  color: #bbb !important;

}



.theme-dark .link-body-emphasis {

  color: #eee;

}



.theme-dark .bg-brand-subtle {

  background-color: #1b1510 !important;

}







/* rajab add these styles in 04/11/18 */

a{

  text-decoration: none;

  color: var(--bs-blackColor);

}

.hero-overlay-time {

  position: absolute;

  top: -10px;

  right: 2%;

  background-color: var(--bs-primary);

}



@media (min-width: 1400px) {



  .container,

  .container-lg,

  .container-md,

  .container-sm,

  .container-xl,

  .container-xxl {

    max-width: 1200px;

  }

}



.collection-title {

  position: relative;

  padding-right: 14px;

  font-size: 1.125rem;

  text-transform: uppercase;

    line-height: var(--leading-headline);

    font-weight: 300;

    color: #595959;

    z-index: 2;

    transition: -webkit-text-decoration .15s linear;

    transition: text-decoration .15s linear;

    transition: text-decoration .15s linear, -webkit-text-decoration .15s linear;

}



.collection-title:before {

  content: "";

  display: inline-block;

  width: 4px;

  height: 100%;

  position: absolute;

  top: 0;

  right: 0;

  border-radius: 4px;

  background: var(--primary-color);

}

.collection .list-group-item:last-child{

  border-bottom: 0 !important;

}



.navbar-nav .dropdown-menu {

border-color: var(--bs-primary-rgb);

border-radius: 0;    

}

.dropdown-toggle::after {

  -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;

    display: var(--fa-display, inline-block);

    font-style: normal;

    font-variant: normal;

    line-height: 1;

    text-rendering: auto;

  font-size: small;

  font-family: var(--fa-style-family, "Font Awesome 6 Free");

  font-weight: var(--fa-style, 900);

  content: "\f078";}

.dropdown-toggle.show::after {

    /* display: inline-block;

    margin-right: .255em; */

    /* vertical-align: 1.255em; */

    content: "\f053";

    /* border-top: .3em solid transparent;

    border-bottom: .3em solid transparent;

    border-left: 0;

    border-right: .3em solid; */

}

.carousel-indicators {

   bottom: unset;

    top: 0;}

	/*

@media (min-width: 992px){

header{

  height: 60px;

}

}

*/

.section-title{

  margin-bottom: 25px;

        font-size: 2rem;

        position: relative;

        text-indent: 20px;

}

.section-title::before{

    content: "";

    background-color: var(--primary-color);

    border-radius: 10px;

    width: 10px;

    right: 0px;

    display:block;

    position: absolute;

    top:0;

    height: 100%;

}

.border-right-primary {

    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-primary) !important;

}

.bullet-title{

   margin-bottom: 25px;

        font-size: 2rem;

        font-weight: 100;position: relative;

}

.bullet-title::after{

    content: "";

    background-color: var(--primary-color);

    border-radius: 50%;

    width: 1rem;

    height: 1rem;

   right:38%;

    display:block;

    position: absolute;

    top:15px

}

.newsletterBox::before{

    height: 8px;

    background-color: var(--primary-color);

    border-radius: 5px;

    width: 25%;

    top:-4px;



    content: "";

    position: absolute;

   

    left: 0;

    right: 0;

    

    margin: auto;

    border-top: 11px solid var(--primary-color);

    border-left: none;

  

}

.newsletterBox{

      background-color: #f0f0f0;

    border-radius: 20px;

    padding: 20px 16px;

    text-align: center;

    position: relative;

}

.newsletterBox button{

  height: 44px;

    max-width: 150px;

    width: 25%;

    background-color: #000;

    color: #fff;

    font-size: small;

    letter-spacing: 0;

    line-height: 1;

    text-align: center;

    border: none;

    cursor: pointer;

     border-radius: 20px;

     margin:10px auto 20px;

}

.newsletterBox input {

   border-radius: 22px;

   border: 1px solid #bebebe;

   color: #bebebe;

   height: 44px;

   padding: 0 15px;

       border: 1px solid #bebebe;

    background-color: #fff;

    letter-spacing: 0;

    font-size: 18px;

    line-height: 20px;

    box-sizing: border-box;

    text-align: right;

}

.boder-primary-bottom{

  position: relative;

}

.boder-primary-bottom::after{

  position: absolute;

  height: 8px;

    background-color: var(--primary-color);

    border-radius: 5px;

    width: 15%;

    bottom: -4px;

   content: "";

  

    right: 5%;

    

    margin: auto;

    border-top: 11px solid var(--primary-color);

    border-left: none;

}







/*faz add */

.news-card{

    position:relative;

    height:280px;

    border-radius:16px;

    overflow:hidden;

    color:#fff;

}



.news-card img{

    width:100%;

    height:100%;

    object-fit:cover;

}



.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.1));

}



.news-content{

    position:absolute;

    bottom:20px;

    right:15px;

    left:15px;

    z-index:2;

}



.news-title{

    font-size:15px;

    font-weight:600;

    line-height:1.8;

}



.category-badge{

    font-size:12px;

    margin-bottom:8px;

}



.swiper{

    padding:10px 0 40px 0;

}



/* فلش‌ها */

.swiper-button-next,

.swiper-button-prev{

    width:42px;

    height:42px;

    background:#fff;

    border-radius:50%;

    box-shadow:0 4px 10px rgba(0,0,0,.15);

}



.swiper-button-next:after,

.swiper-button-prev:after{

    font-size:16px;

    color:#000;

}



/* موقعیت بهتر فلش‌ها */

.swiper-button-prev{

    right:0;

}



.swiper-button-next{

    left:0;

}



.card-body{

	line-height: 32px;

}

/*faz add */