div,span,picture{
      box-sizing:border-box;
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      -ms-box-sizing:border-box;
      word-wrap:break-word;
      overflow-wrap:break-word
  }
  h1,h2,h3,h4{
      order:1;
      font-family:'JazeeraBold',sans-serif,Arial,Helvetica;
  }
  a{
      text-decoration:none;
  }
  
  h1{
      order:1;
      font-size: clamp(1.5rem, 2.1vw, 2.2rem);line-height:2.5rem;
      color:#000000;
      font-weight:600;
      margin:1rem auto;
  }
  .menuBurger line,.menuBurgerClose line{
      -webkit-transition:all .3s cubic-bezier(1, 0.03, 0, 0.97);
      -moz-transition:all .3s cubic-bezier(1, 0.03, 0, 0.97);
      -ms-transition:all .3s cubic-bezier(1, 0.03, 0, 0.97);
      -o-transition:all .3s cubic-bezier(1, 0.03, 0, 0.97);
      transition:all .3s cubic-bezier(1, 0.03, 0, 0.97);
      stroke:rgb(0,0,0);
      stroke-width:1.8;
      position:absolute;
      margin:.15em auto
  }
  .menuBurger svg line :nth-child(1) {
      transform-origin:26px 6px;
      -webkit-transform-origin:28px 3px;
  }
  .menuBurger svg line:nth-child(2) {
      top:20px;
      bottom:1%
  }
  .menuBurger svg line:nth-child(3) {
      transform-origin:23px 23px;
      -webkit-transform-origin:23px 23px
  }
  .menuBurgerClose svg line:nth-child(3) {
      transform: rotate(-45deg);
      transform-origin: 8px 15px;
  }
  .menuBurgerClose svg line:nth-child(1){
      transform: rotate(45deg); 
      transform-origin: 6px 10px;  
  }
  .menuBurgerClose svg line:nth-child(2){
      display: none;  
  }
  span{color:#333}
  /* cookies */
          /* Styles for consent dialog */
        
/* Remove default list styles */
ul,
ol {
    list-style: none;
}

/* Remove underlines from links */
a {
    text-decoration: none;
}

/* Responsive images */
img {
    height: auto;
}
div.swit .convertme {
    order:-1;
    }
/* Flex container styles */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Normalize box-sizing */



/* Responsive layout adjustments */
@media only screen and (max-width: 700px) {
    div.swit .convertme {
        order:0;
        }
    .container {
        flex-direction: column;
    }
}

/* Example styles for specific elements */
h1 {
    font-weight: 500;
    color: #111;
    margin: 1rem auto;
}

/* main page and randon style */


.grid-container {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1rem 1.3rem;
}

.grid-container2 {
    display: grid;
    padding: 0.3rem;
    direction: ltr;
    grid-template-columns: 40% auto;
    grid-gap: 1.3rem 2rem;

}

.grid-item {
    padding: 0.5rem 0;
    border: none;
}
.grid-item p{width:94%;margin:.8rem auto;line-height:3rem;font-size:1.15rem;color:#222}

h2,
h3,h4 {
    margin: 0.5rem auto;
    color: #222;
    padding-top: 0.4rem;
    line-height: 2.5rem;
}

h2 {
    font-size: clamp(1.2rem, 1.3vw, 1.4rem);
    font-weight: 100;line-height:1.6rem;
}

h3 {
    font-size: clamp(1.1rem, 1.2vw, 1.4rem);
    font-weight: normal;
}
h4 {
    font-size: clamp(1rem, 1.1vw, 1.3rem);
    font-weight: normal;
}

.grid-item p {
    font-family: "sudanindependent";
    color: #666;
    line-height: 1.3rem;
}

.grid-item img,
.grid-container2 .grid-item img {
    width: 100%;
    aspect-ratio:  320 / 176;
    object-fit: cover;
    margin: 0.8rem 0;
    display: block;
}

.adsBanner{position:relative;background:#eaeaea;
    margin:.5em auto; width:96%;max-width:1400px;overflow:hidden;overflow: -moz-hidden-unscrollable;}
    .adsBanner img{max-width:99%;margin:.5rem;display:block;}

.topgrid {
    border-bottom: 1px solid #ddd;
}

.topgrid img {
    width: 100%;
    aspect-ratio:  320 / 176;
}

.leftscreen {
    border: 1px solid rgba(200, 200, 200, 0.5);
    width: 96%;
    margin: 0.5rem auto;
    border-radius: 4px;
}

@media only screen and (min-width: 700px) {
    div.stickyAds{position: sticky;top: 90px;}

    .topgrid {
        border-bottom: none;
    }

    .grid-container {
        grid-template-columns: 60% auto;
    }

    .topgrid img {
        margin-top: 0.6rem;
        width: 100%;
        aspect-ratio:  320 / 176;
    }
}

@media only screen and (min-width: 1050px) {
    .topgrid {
        border-bottom: none;
    }

    .grid-item h2,
    .grid-item h3 {
        font-size: clamp(1.17rem, 1.2vw, 1.4rem);
    }

    .grid-container {
        grid-template-columns: 50% auto;
    }
}

.topgrid picture {
    position: relative;
    display: block;
    padding: 0 0.2rem;
}

.topgrid picture::before {
    content: " ";
    z-index: 99;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-bottom: 9px solid #ffc000;
    border-left: 9px solid #ffc000;
}
span.mainHead {display:block;font-size:1.4rem;font-weight:200;height:40px;padding:.8rem;text-align:center}

/* Ensure Ad is Responsive */
.adsBanner ins.adsbygoogle {
    display: flex !important;
}

/* Prevent Overflow */
.adsBanner iframe {
    max-width: 98%;margin:.1rem auto;
}
div.stickyAds{width:94%;margin:.8rem auto;position: relative;padding:.8rem 0;order:0;box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);}
/*end of styling cat pages*/
.screeninside {
    width: 96%;
    margin:  .6rem auto;
    border:1px solid rgba(200, 200, 200,.8);
    border-radius:4px;
    -webkit-border-radius:4px;
    padding: .5rem ;
}

 .grid-right{
    display: grid;
    grid-template-columns: auto;
    grid-gap: 2rem 1rem;
margin:.1rem 0;
}

.grid-art {
    width: 98%;
    margin: 1rem .1rem;
    display: grid;
    grid-template-columns: 64px auto;gap:1.5rem;
    grid-gap: 2rem 1rem;

}


.grid-art img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    margin: .2rem;
    border-radius: 4px;
    margin: .5rem;
}

.grid-art p {
    font-weight: 200;
    font-size: 1.1rem;
    color: #333;
    min-height: 20px;
    margin:.5rem;transform:translateX(-12px);
}

.grid-item1 {
    width:100%;
    padding: 0;
    border: none;
    
}
.grid-item1 h2,.grid-item1 h3{font-size:clamp(1.5rem, 1.5vw, 2.1rem);line-height:2.4rem;min-height:50px;
    margin:.8rem auto;color:#444;font-weight:300;width:95%;}

.grid-item1 img{width:100%!important;margin:0;padding:0;aspect-ratio: 12 / 7;-webkit-aspect-ratio: 12 / 7;}

@media only screen and (min-width: 800px) {
    
    .grid-right {
        grid-template-columns: auto 35%;
       
    }
    .grid-right .grid-item1:nth-child(2) {
        order: -1;
    }

    .grid-right .grid-item1 img {
        width: 100%;
        aspect-ratio: 12 / 7;
        -webkit-aspect-ratio: 12 / 7;
    }
}
time{margin:.3rem .8rem; color:#333;font-size:.9rem;}
span.Tcaption{font-size:1rem;padding:.5rem;width:fit-content;-webkit-width:fit-content;display:inline-block;color:#666;font-weight:bold}

/* Footer styles */
.footer {
    background-color: #f8f8f8;
    padding: 20px;
    text-align: center;
}

.footer p {
    font-size: 14px;
    color: #666;
}
a.tw ,a.fb,a.wt{width:80px;height:35px;order:1;background-image:url('img/x-logo.svg');background-position:center;background-repeat:no-repeat;}
a.fb{background-image:url('img/facebook.svg');}
a.wt{background-image:url('img/whatsapp.svg');}



@font-face{
    font-family:'sudanindependent';
    src:local("sudanindependent"),url('/fonts/DroidSansArabic.woff2') format('woff2');
    font-display: swap;
}
@font-face{
    font-family:'JazeeraBold';
    src:local("Jazeera"),url('/fonts/Al-Jazeera-ArabicBold.woff2') format('woff2');
    font-display: swap;}
/* Body styling */
body {
    background: #fff;
    text-align: right;
    font-weight: 200;
    font-size: 100%;
    color: #222;
    font-family: 'sudanindependent', sans-serif, Arial, Helvetica;
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    padding:  0;
    margin: 0;
}


/* Headings and specific elements font-family */
h1, h2, h3, h4, .consent-dialog span.bannerTitle {
    font-family: 'JazeeraBold', sans-serif, Arial, Helvetica;
}

/* Link styles */
a {
    text-decoration: none;
}

/* Logo image styling */
img.logo {
    display: block;
    width: 145px;
    height: 22px;
    margin: 0.4rem auto;
}

/* H1 heading styling */
h1 {
    font-size: clamp(1.5rem, 2.1vw, 2.2rem);
    line-height: 2.5rem;
    color: #000;
    font-weight:600;
    margin:.8rem auto;
    width:96%;margin:.5rem auto;

}

/* Details bar styling */
.DetailsBar {
    position: relative;
    background: #fff;
    margin-bottom: 2rem;
    width:100%;
    top: 0;
    left: 0;
    right: 0;
    height: 71px;
    min-height:71px;
    box-shadow: 0px 15px 10px -15px #111;
    z-index: 9999;
}

/* Menu top styling */
.menuTop {
    width: 98%;
    display: grid;
    grid-template-columns: 50px 180px auto 80px;
    margin: 0.6rem auto;
    grid-gap: 6px;

}
.menuTop2 {
    width: 98%;
    display: flex;
    margin: 0.6rem auto;
}

/* Company link styling */
.company {
    font-family: 'JazeeraBold';
    text-decoration: none;
    padding: 0.2rem;
    display: block;
    text-align: center;
    height: 28px;
    font-size: 0.8rem;
}

/* Sidebar link styling */
.sideLink {
    background: #fff;
    padding: 2rem 0.3rem;
    width: 100%;
    min-width: 100%;
    position: fixed;
    top: 75px;
    right: 0;
    bottom: 0;
    transform: translate(-100%, 0);
    z-index: 999999;
    display: flex;
    transition: transform 200ms ease-in;
    overflow: auto;
}

/* Inner sidebar link styling */
div.sideLinkin {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 98%;
    border: none;
}
.menuTop2{display:none}
/* Sub-menu styling */
div.menuTop div.subMenu, div.sideLink div.subMenu {
    display: flex;
    flex-direction: column;
}

/* Sidebar link anchor styling */
div.sideLink div.subMenu a, div.sideLink a {
    text-indent: 2rem;
    width: 90%;
    font-size: 0.9rem;
    color: #999;
}

div.sideLink a {
    margin: 0.6rem 0;
    padding: 0.5rem 0;
    color: #333;
    font-size: 1.06rem;
    text-indent: 2rem;
}

div.sideLink a:hover {
    color: #444;
}

div.sideLink a.active {
    border-bottom: 2px solid rgba(241, 214, 147, 1);
}

/* Menu burger icon styling */
#menuBurger {
    display: inline-block;
    order: 4;
    transform: translate(0, -10px);
}

/* Hide element class */
.menuhide {
    display: none;
}

div.sideLink div.advanceO {
    display: none;
}

/* Navigation long links styling */
nav.longLinks {
    display: none;
}
nav.subLinks a {
    min-width: fit-content;
    padding:0 .3rem;
    color: #c1c1c1;
    text-align: center;
    margin: 0 .6rem;
    font-size: .9rem;
}
.loading{flex-direction: column-reverse;}
@media only screen and (min-width: 900px) {
    body{
        padding-top:0px;
    }
    .DetailsBar {
        position: relative;
        min-height:150px;
    }
    .menuTop {
        grid-template-columns: 20px 160px auto 80px;
    }
    .menuTop2 {
        display:block;
        grid-template-columns:   auto ;
        border-top:1px solid #e7e7e7;
        border-bottom:1px solid #e7e7e7;
    }


    nav.longLinks,nav.subLinks {
        margin: 0.95rem auto;
        position: relative;
        display: flex;
        flex-direction: row;
        width: 96%;
        gap: 1.5rem;
        justify-content: center;
        flex-wrap:wrap;
        -webkit-flex-wrap:wrap;
    }
    nav.subLinks {justify-content: end;}
    nav.longLinks a {
        min-width: fit-content;
        padding:0 .2rem;
        color: #777;
        text-align: center;
        margin: 0 1rem;
        font-size: 1.06rem;
    }
    nav.subLinks a {
        min-width: fit-content;
        padding:0 .3rem;
        color: #c1c1c1;
        text-align: center;
        margin: 0 .6rem;
        font-size: .9rem;
    }
    .loading{flex-direction: row;}

    nav.longLinks a.active {
        border-bottom: 2px solid rgba(241, 214, 147, 1);
    }

    #menuBurger {
        display: none;
    }
}

/* Anchor font-family override */
a {
    font-family: "JazeeraBold";
}

/* Menu burger and close icon styling */
.menuBurger line, .menuBurgerClose line {
    transition: all 0.3s cubic-bezier(1, 0.03, 0, 0.97);
    stroke: rgb(0, 0, 0);
    stroke-width: 1.8;
    position: absolute;
    margin: 0.15em auto;
}

.menuBurger svg line:nth-child(1) {
    transform-origin: 26px 6px;
}

.menuBurger svg line:nth-child(2) {
    top: 20px;
    bottom: 1%;
}

.menuBurger svg line:nth-child(3) {
    transform-origin: 23px 23px;
}

.menuBurgerClose svg line:nth-child(3) {
    transform: rotate(-45deg);
    transform-origin: 8px 15px;
}

.menuBurgerClose svg line:nth-child(1) {
    transform: rotate(45deg);
    transform-origin: 6px 10px;
}

.menuBurgerClose svg line:nth-child(2) {
    display: none;
}

/* Span element styling */
span {
    color: #333;
}

/* Night mode styles */

body.night-mode, div.night-mode, .night-mode {
    background: #000;
}

.night-mode h1, body.night-mode h1 {
    color: #fefefe;
}

body.night-mode h2, body.night-mode h3,body.night-mode h4, body.night-mode p {
    color: #d2d2d2;
    font-weight: normal;

}

body.night-mode a, body.night-mode span, body.night-mode time {
    color: #ddd;
}

.night-mode line {
    stroke: #eee;
}

body.night-mode .DetailsBar, body.night-mode #sideL {
    background: #222;
}

body.night-mode .screeninside {
    border: 1px solid rgba(241, 214, 147, 0.5);
}

body.night-mode .related, body.night-mode .leftscreen {
    border: 1px solid rgba(241, 214, 147, 0.5);
}

/* Switch and toggle button styling */
.switch, .switchL {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 20px;
}



body.night-mood span.Tcaption {
    color: #000;
}

/* Day and night toggle button styling */
.daynightmood {
    margin: 0.4rem auto;
    border: 1px solid #d1d1d1;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    gap: .3rem;
    width: fit-content;
    padding: 0;
    position: relative;
}

.daynightmood span {
    display: flex;
    width: 2.5rem;
    height: 16px;
    background-size: 16px 16px;
    margin: 0.2rem 0.3rem;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 10px;
    padding: 0.2rem;
    transition: transform 0.3s ease-in-out;
}

.daynightmood span:hover {
    transform: scale(0.9);
}

.daynightmood > span.moon {
    background-image: url('/images/night-mode.svg');
    margin-left: 0.1rem;
    border: none;
}

.daynightmood .switch {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #666;
    left: 0;
    top: -3px;
    transition: 300ms transform ease-in-out;
    transform: translateX(0);
}
body.night-mode div.footer div p{
    color:#ededed;
}
.daynightmood > span.sun {
    background-image: none;
}

body.night-mode .daynightmood{
    border: 1px solid #888;
}

body.night-mode .daynightmood > span.moon {
    background-image: none;
}

body.night-mode .daynightmood > span.sun {
    background-image: url('/images/sunny-day-w.svg');
    border: none;
}

body.night-mode .daynightmood .switch {
    transform: translateX(32px);
    background: #ffd700;
}

/* Consent dialog styles */
div.addLeftMargin {
    display: none;
}


blockquote,video {width:auto;max-width:98%;display:flex;margin: .8rem auto;}
    body{width:100%}
    iframe {width:auto;max-width:96%;display:flex;margin:1rem auto;}
    ins{display:block;margin:.1rem auto;}
    h1{width:90%;}
   
    .mainContent {
    display:flex;-webkit-display:flex;flex-direction:column;-webkit-flex-direction:column;width:98%;margin: .8rem auto;
    justify-content: center;justify-items: center;max-width:99%;margin:.5rem auto;

}
.mainContent main, .mainContent aside{order:1;width:100%;}

.screen{width:96%;}


@media only screen and (min-width: 900px){
    .screen{width:96%;max-width:1400px;margin:1rem auto;}
    .mainContent{flex-direction:row;-webkit-flex-direction:row;gap:.5rem;max-width:1280px;}
    .mainContent aside{order:1;width: 35%;}
    .mainContent main{order:1;flex:1;}
}
    main img:not(.mainImage),.grid-container2 .grid-item picture {object-fit: contain;aspect-ratio: unset;width:auto;max-width:96%;display:block;position:relative;margin:1rem auto;}

    div.sbox{width:90%;margin:.5rem auto;display:flex;flex-direction:row;
        -webkit-flex-direction:row;justify-content:center;-webkit-justify-content:center;
        flex-wrap:wrap;padding:.8rem .1rem;}
    .grid-rightx{
        width:99%;
        grid-template-columns: 1fr; /* Create a single column */
        gap: 10px;margin:.5rem;
}
#lastContent > main {order:1;}
#lastContent > aside {order:0;}
.grid-rightx .grid-item1 a h2{color:#000;font-size: 1.3rem;}
    @media (min-width: 700px) {
    /* Styles applied when the screen width is 600px or less */
    .grid-rightx{
        width:46%;}
}
@media (min-width: 900px) {
    /* Styles applied when the screen width is 600px or less */
    .grid-rightx{
        width:23%;}
        #stickyAds{position: sticky;top:90px;}
        #lastContent > main {order:0;}
        #lastContent > aside {order:1;}
    

}
span.ptitle{font-size:1.8rem;font-weight:500;color:#000;text-align:right;padding:.5rem 1rem;}