/* Default logo size for all screens */
.desktop-logo {
  width: 6.5em; /* Default size for mobile */
}

/* Larger logo size for desktop only */
@media (min-width: 992px) {
  .desktop-logo {
      width: 8em; /* Adjust this value as needed */
  }
}

/* Ensure logo doesn't affect other layout elements */
.logo-link {
  display: inline-block;
}
.bg-muizz {
  background-color: #6AE0E0;
  color: #000;
  font-weight: bold;
}

.bg-ibu {
  background-color: #FBBC53;
  color: #000;
  font-weight: bold;

}


.flex-stack-mobile {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the items horizontally */
}

/* Default styles */
.candidate-photo {
  width: 150px;
  height: 200px;
}

.candidate-votes {
  font-size: 24px;
}

.candidate-percentage {
  font-size: 50px;
}

.candidate-name {
  font-size: 18px;
}

.party-tag {
  font-size: 10px;
  padding:5px;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
  .candidate-photo {
      width: 80px;
      height: 80px;
  }

  .candidate-votes {
      font-size: 14px;
  }

  .candidate-percentage {
      font-size: 20px;
  }

  .candidate-name {
      font-size: 11px;
  }

  .party-tag {
      font-size: 9px;
  }
}

.d-flex.align-items-center > .candidate-photo {
  margin: 0;
  padding: 0;
}

@media (max-width: 576px) {
  .candidate-photo {
      width: 80px;
      height: 80px;
      margin: 0 auto;  /* Center the photo horizontally */
      display: block;  /* Make the image a block element */
  } 


  .candidate-section {
    max-height: 80px; /* Set max height */
    overflow: hidden; /* Hide overflowing content */
}



  .candidate-votes {
      font-size: 10px;
  }

  .candidate-percentage {
      font-size: 16px;
  }

  .candidate-name {
      font-size: 9px;
  }

  .party-tag {
      font-size: 7px;
      padding: 1px 3px;  /* Adjust padding for smaller font-size */
  }
}



a {
  color: red !important;
  transition: color 0.3s ease;  /* Smooth transition for color changes */
}

a:hover {
  color: darkred !important;
}

.social-vertical-bar{
  top: 4.8rem;
}


.hr-red {
  border: 0;  /* Removes default border */
  height: 2px;  /* Adjust thickness as needed */
  background-color: red;  /* Red color */
  margin: 20px 0;  /* Adds spacing above and below the line */
}

.nav-font-size{
  font-size:1.2rem;
}

/* Styles for screens smaller than 1200px */
@media (max-width: 1199.98px) {
  .nav-font-size {
      font-size: 0.9rem;  /* Adjust the size as desired */
  }
}



.live-post-text{
  font-size: 1.2rem;
  line-height: 2.5rem;
  letter-spacing: -.02rem;
}
@media (max-width: 575.98px) {
  .live-post-text {
      font-size: 1.1rem;
      line-height: 2.35rem;
      letter-spacing: -.06rem;
  }

  .social-vertical-bar{
    top: 3.0rem;
  }

}

.live-post-date{
  font-size:1.1rem;
}


.timeline {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: #ddd;
  z-index: 1;
}

.timeline-item {
  position: relative;
  z-index: 2;
  padding: 10px 0;
}

.timeline-icon {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 10px; /* Align with h5 */
  right: -10px; /* Positioning it on the right */
  border-radius: 50%;
}

.timeline-content {
  width: calc(100% - 40px); /* 40px for icon and spacing */
  padding-right: 30px; /* Spacing to avoid overlapping with icon */
}

.timeline-content h5 {
  margin-top: 0;
}






.live-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: red;
  border-radius: 50%;
  margin-left: 10px;  /* This is to space it away from the text in RTL */
  animation: flash 1s infinite alternate;
}

@keyframes subtleGradientAnimation {
  0% {
      background-position: 100% 0%;
  }
  100% {
      background-position: -100% 0%;
  }
}

div.live-bar.border {
  border-color: #ffc4c4 !important;  /* Light red border */
}


.live-bar {

  background: linear-gradient(90deg, #fff, #fef5f5, #ffe0e0, #fef5f5, #fff); /* More subtle gradient colors */
  background-size: 200% 100%; /* Making the background wider than the container */
  animation: subtleGradientAnimation 8s infinite; /* Slower animation */
  /* ... (rest of your .live-bar properties) ... */
}

.topic-title {
  color: red;  /* A shade of red that should match with your theme */
}

.live-bar a.dv {
  color: #333;  /* dark gray */
}

.live-bar a.dv:hover {
  color: #555;  /* slightly lighter gray on hover */
  text-decoration: underline;
}
.live-bar-link {
  font-size: 1rem;  /* Default font size for regular screens */
}

/* Adjustments for tablets */
@media (max-width: 992px) {
  .live-bar-link {
      font-size: 0.9rem;  /* Slightly smaller font for tablets */
  }
}

/* Adjustments for mobiles */
@media (max-width: 576px) {
  .live-bar-link {
      font-size: 0.8rem;  /* Even smaller font for mobiles */
      line-height: 1.2rem;
  }
}



@keyframes flash {
  from {
      opacity: 0.3;
  }
  to {
      opacity: 1;
  }
}

.ad{
    margin-left: auto;
    margin-right: auto;
    /* width: 900; */
    /* height:115; */
    display: block;
}
.nav-style{
  /* border-bottom: red 2px solid; */
  /* padding-left: 5px;
      padding-right: 5px; */
      /* background-color: cornsilk; */
      box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);

}

.header-style{
  /* border-bottom: red 1px solid; */


}
.text-primary{
    color:#ce3839!important;
}
.bg-corona-bold{
  background-color: gold;
}
.bg-corona{
  background-color: whitesmoke;
}
.covidbox-size{
  font-size:1rem;
}
.covidbox-updated{
  font-size:0.8rem;
}
.covidbox-hack{
  padding-top:7px !important;
}
.logo-white{
  display:none;
}
.logo-color{
  display:inline-block;
}
.font-en{
    font-family: Arial, Helvetica, sans-serif;
    direction: ltr !important;
}

.hours-ago{
    font-size:0.8em;
}

.post-image{
  height: 9em;
  border-radius: 10px;

}

.home-post-image{
  height: 7em;
  border-radius: 10px;
}

.category-featured-image{
    border-radius: 10px;
}

.border-radius-10 {
  border-radius: 10px;
}
.featured-image{
  height: 440px;
  border-radius: 10px;
}
.featured-headline{
  font-size: 2em;
}
.comment-form{
  background-color: whitesmoke;  border-top: 3px solid red;
}

.nav-active{
  color: red !important;
}

.text-dark-only{
  color: #343a40!important
}
.the-line{
  width: 100%;
  border-bottom: 2px solid #333;
  line-height: 0.1em;
  margin: 10px 0 20px;
}


.category-heading {
   width: 100%;
   text-align: right;
   border-bottom: 2px solid #333;
   line-height: 0.1em;
   margin: 20px 0 30px;
}


.category-heading span {
    background:#fff;
    padding:0 20px;
}

.post-category-heading {
  width: 100%;
  text-align: right;
  /* border-bottom: 2px solid #dedddd; */
  line-height: 0.1em;
  margin: 20px 0 30px;
}

.post-category-heading span {
  background:#fff;
  padding:0 0 0 20px;
}



.page-item.active .page-link {
  background-color: #ce3839;
  border-color: #ce3839;
}
.page-link{
  color:#ce3839;
}

.special-event{
  background-size:fill;   
  background-position: center;
  background-image:url('/assets/temp/ramadan3.png');
}

@media (max-width:990px){
    .post-image{
        height:6em;
    }

    .home-post-image{
      height: 4em;
    }

    .featured-image{
      height: 260px;
    }

    .featured-headline{
      font-size:2.1em;
    }

    .special-event{
      background-image:url('/assets/temp/ramadan-bg3.png');
    }


}

.custom-carousel{
  float:left; 
  max-width:300px; 
  margin:10px 5px 5px 0;
}

@media (max-width: 768px) {
  .custom-carousel {
      float: none;  /* Remove float */
      display: block;  /* Set to block to enable margin auto */
      margin: 10px auto;  /* Auto margins for horizontal centering */
      max-width: 100%;  /* Ensure it doesn't overflow the screen width */
  }
}

@media (max-width:767px){
    .post-image{
        height:7.5em;
    }
    .home-post-image{
      height: 7.5em;
    }

    
    .covidbox-size{
      font-size:0.8rem;
    }
    .covidbox-updated{
      font-size:0.6rem;
    }


}
@media (max-width:360px){
    .post-image{
        height:5em;
    }




}

/* Old small phones */
@media ( max-width:400px){

  .covid-icon{
      display:none !important;
  }


}

/* Old Ollld small phones */
@media ( max-width:320px){
  .covidbox-size {
    font-size: 0.6rem;
}

}

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {


  }

  /*
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

  @media (min-width: 1025px) and (max-width: 1280px) {

    .featured-image{
      height: 360px;
    }

  
  }

  /*
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

  @media (min-width: 768px) and (max-width: 1024px) {


  }

  /*
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {


  }

  /*
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

  @media (min-width: 481px) and (max-width: 767px) {


  }

  /*
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

  @media (min-width: 320px) and (max-width: 480px) {


  }