@font-face {
  font-family: 'Calibri';
  src: url("{{ url_for('static', filename='Calibri.ttf') }}") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Calibri';
  src: url("{{ url_for('static', filename='calibrib.ttf') }}") format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Calibri';
  src: url("{{ url_for('static', filename='calibril.ttf') }}") format('truetype');
  font-weight: normal;
  font-style: italic;
}

a {
  -webkit-touch-callout: none;
}

.logo-container{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 10px;
}
body{
  background-color: #f5f4ef!important;
  font-size: 16px;
}
.main-logo{
  margin-top: 20px;
  width: min(100%, 100px);
}

.menu-icon{
  width:40px;
}

.card{
  position: relative;
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  overflow: hidden; /* Hide any content outside the h1 element */
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  left: -15px; /* Offset to cover the left and right borders */
  right: -15px;
  height: 10px;
  background-image: url("../images/tewhid/tewhid-creme-bg.png");
  background-repeat: repeat-x;
  background-size: auto 100%; 
}

.card-bordeau::before,
.card-bordeau::after {
  content: "";
  position: absolute;
  left: -15px; /* Offset to cover the left and right borders */
  right: -15px;
  height: 10px;
  background-image: url("../images/tewhid/tewhid-bordeau-bg.png");
  background-repeat: repeat-x;
  background-size: auto 100%; 
}

.card::before {
  top: 0;
}

.card::after {
  bottom: 0;
}

#page{
    background-color: #f5f4ef!important;
    margin-top: 50px;
}
.img-mini{
  height: 25px;
}
.img-mini50px{
  height: 50px;
}
.audio-container {
  display: flex;
  justify-content: center;
}
audio{
  
}
.clickable{
  cursor: pointer!important;
}

.active-nav{
  color: #85292d!important;
}


.color-highlight {
  color: #85292d!important;
}

.header{
  border-bottom: 3px solid;
  border-image: url("../images/tewhid/bg-bar.png") 100 round;
}

.bg-gradient {
  background: linear-gradient(to bottom, #97484c 0%, #97484c 20%, #97484c 30%, #85292d 70%, #85292d 100%) !important;
}

.datetimepicker{
  text-align: center;
  color: #85292d;
  font-weight: 600;
  width: 100px;
}
#datepicker{
  border: 2px solid #97484c!important;
  border-radius: 0px;
  background-color: #f5f4ef;
}
.arrow-icon{
  z-index: 100000;
  height: 40px;
  margin-left: 5px;
  margin-right: 5px;
  transition: transform 0.2s ease; /* Smooth transition for all transformations */
  background: none; /* No background */
}

.arrow-icon:active{
  transform: scale(0.95); /* Slightly shrink the arrow when clicked */
}
.arrow-icon:hover{
  transform: scale(1.05); /* Scale the arrow */
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3)); 
  cursor: pointer;
}
.datetimepicker:hover {
  transform: scale(0.95); /* Scale the arrow */
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3)); 
  cursor: pointer;
}

.ui-datepicker-header{
  color: white;
  background-image: url("../images/tewhid/bg-bar.png");
  background-size: cover;
}
.ui-state-highlight{
  background: #97484c!important;
  border-color: #85292d!important;
  color: white!important;
}
.ui-datepicker-calendar td a{
  text-align: center!important;
}

.bg-highlight{
  background-color: #97484c!important;
  border-radius: 10px;
  border: 1px solid #85292d!important;
}
.list-group .badge{
  margin-right: 20px;
}

.bg-fajr {
  background-color: #937552 !important;
  color: #FFF !important;
}
.bg-shurooq {
  background-color: #a87c49 !important;
  color: #FFF !important;
}
.bg-dhuhr {
  background-color: #dfba45 !important;
  color: #FFF !important;
}
.bg-asr {
  background-color: #6582a4 !important;
  color: #FFF !important;
}
.bg-maghrib {
  background-color: #a3433a !important;
  color: #FFF !important;
}
.bg-isha {
  background-color: #55474b !important;
  color: #FFF !important;
}
.bg-midnight {
  background-color: #000000 !important;
  color: #FFF !important;
}
.badge{
}

.bg-beige-light {
  background-color: #f5f4ef !important;
  color: black!important;
}

.bg-bordeaux-light {
  background-color: #97484c !important;
  color: white!important;
}
.bg-bordeaux-dark {
  background-color: #85292d !important;
  color: white!important;
}

.font-bordeaux-light {
  color: #97484c !important;
}
.font-bordeaux-dark {
  color: #85292d !important;
}

#spHijriDate{
  font-weight: bold;
}

.hidden{
  visibility: hidden;
}
.list-custom-large .badge{
  margin-top: 22px!important;
  border-radius: 0.25rem !important;
}

/* Ramadan Suhur / Iftar boxes – same style as time badge, flush against it */
.list-custom-large .badge.ramadan-badge {
  position: absolute !important;
  right: 75px !important;
  margin-top: 22px !important;
  font-size: 16px !important;
  padding: 6px 14px 6px 10px !important;
  font-weight: 700 !important;
  border-radius: 0.25rem 0 0 0.25rem !important;
  min-width: 72px !important;
  text-align: left !important;
}

/* Remove left rounding on time badge when Ramadan badge is shown */
.list-custom-large .badge.ramadan-time-adj {
  border-radius: 0 0.25rem 0.25rem 0 !important;
}

/* Fill gap between ramadan-badge and time badge with matching color */
.list-custom-large .badge.ramadan-badge::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 12px;
  background: inherit;
  z-index: -1;
}
.list-custom-large .badge.ramadan-time-adj::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 8px;
  background: inherit;
  z-index: -1;
}

.card{
  margin-bottom: 10px!important;
}
.card-style{
  margin: 10px 0 10px 0!important;
}
.mb-0 {
}

.page-content{
  /*height:100vh!important;*/
}

.spSpeaker{
  padding-left: 15px!important;
}

.btn-full{
  width: 100%!important;
}

#selLanguages{
  width: 30%;
}
.badge-container{
  display: flex;
  align-items: center;
}
.flagBadge {
  font-size:16px!important;
  width: auto!important;
  margin-top: 30px!important; 
  background: none!important; 
  border: 1px solid #f5f4ef!important;
  color: #97484c;
}

.list-custom-small a {
  color: #1f1f1f;
  font-weight: 600;
  font-size: 13px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
  padding: 20px 0; /* Adjust padding to increase the height */
  display: block; /* Ensure the element takes up the full width */
}

.list-custom-large a {
  color: #1f1f1f;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
  padding: 10px 0; /* Adjust padding to increase the height */
  display: block; /* Ensure the element takes up the full width */
}
.list-custom-large a:last-child {
  border-bottom: none;
}

.left-margin10{
  margin-left: 10px;
}

.mb-0{
  padding: 5px;
}

.card.card-style{
  padding: 10px 0 0 0; /* Remove padding */
}

.pt-3 p, .pb-3 p{
  padding-left: 10px;
}

.card90{
  width: 90%!important;
  margin-left: auto!important;
  margin-right: auto!important;
}
.card75{
  width: 75%!important;
  margin-left: auto!important;
  margin-right: auto!important;
}
.card50{
  width: 50%!important;
  margin-left: auto!important;
  margin-right: auto!important;
}

.cardMax700{
  width: min(100%, 700px)!important;
  margin-left: auto!important;
  margin-right: auto!important;
}

.bg-word-blue{
  background-color: #2c59b7;
}
.bg-excel-green{
  background-color: #4fa16b;
}

.fa-3x-image{
  width: 50px!important;
}

.pagination {
  flex-wrap: wrap; /* Ensure pagination wraps on smaller screens */
}

.page-link {
  min-width: 40px; /* Ensure page links have a minimum width */
  text-align: center;
}

.page-item.disabled .page-link {
  pointer-events: none;
  opacity: 0.6;
}

.page-item {
  margin: 0 2px; /* Add some margin between items */
}

@media (max-width: 768px) {
  .pagination {
      justify-content: center;
  }
  .page-link {
      padding: 0.25rem 0.5rem;
  }
}
.responsive-video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.responsive-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 90%;
  max-width: 90%; /* Ensures video does not exceed container width */
}

.thumbnail-container {
  position: relative;
  display: inline-block; /* Ensure the container only takes up as much space as the thumbnail */
}

.thumbnail-image {
  display: block; /* Ensure the image takes up the full width of its container */
  width: 100%;    /* Make sure the image is responsive */
  height: auto;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;  /* Adjust the size of the play icon */
  height: 100px; /* Adjust the size of the play icon */
  pointer-events: none; /* Allow clicks to pass through the icon to the link */
}

.color-lightgray{
  color: lightgray;
}

.card-no-borders.card::before {
  content: none;
}
.card-no-borders.card::after {
  content: none;
}
.underline{
  text-decoration: underline!important;
}
.list-custom-small-no-padding a{
  padding: 0!important;
}

.bold-font{
  font-weight: bold!important;
}
.light-font{
  font-weight: normal!important;
}
.quiz-list a{
  padding-left: 10px;
  padding-right: 10px;
}
.bg-lime{
  background-color: lightgreen;
}
.bg-orange{
  background-color: orange;
}
.bg-red{
  background-color: red;
}

.pt-3, .pb-3{
  padding: 10px;
}
.radio-selected .form-check-label {
  color: #85292d; /* Same color as the radio button's circle */
}

.hidden{
  display:none;
}

.bg-gold {
  background: repeating-linear-gradient(to top, #a2682a 0%, #be8c3c 8%, #be8c3c 18%, #d3b15f 27%, #faf0a0 35%, #ffffc2 40%, #faf0a0 50%, #d3b15f 58%, #be8c3c 67%, #d4a245 88%, #e1b453 93%);
}

.color-white{
  color:white;
}

.locked-quiz {
  position: relative;
  padding-left: 2rem; /* Adjust padding to make space for the lock icon */
}

.locked-quiz::before {
  content: "\f023"; /* Unicode for FontAwesome lock icon */
  font-family: 'Font Awesome 5 Free'; /* Use FontAwesome's free font */
  font-weight: 900; /* Make sure it uses the solid version */
  position: absolute;
  left: 50%; /* Position the left at 50% of the container's width */
  color: gray; /* Lock icon color */
  font-size: 1.75rem; /* Adjust the size as needed */
  z-index: 0; /* Make sure it's behind the text */
  opacity: 0.5; /* Slightly transparent */
}

.modal-dialog {
  overflow: hidden; /* Ensures content respects border-radius */
}

.modal-content{
  border-top-left-radius: 20px!important;
  border-top-right-radius: 20px!important;
  border-bottom-left-radius: 0!important;
  border-bottom-right-radius: 0!important;
}
.modal-header{
  border-top-left-radius: 15px!important;
  border-top-right-radius: 15px!important;
  border-bottom-left-radius: 0!important;
  border-bottom-right-radius: 0!important;
}

.nav-link{
  color: #85292d;
}

.mygap5{
  margin: 5px;
}

.padding-left20{
  padding-left: 20px;
}

label{
  font-weight: bold;
  font-size: 14px;
}

input{
  font-size: 14px!important;
}

.card a:hover, .card h1:hover{
  cursor: pointer;
}

#cp{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.cp:hover{
  cursor: pointer;
}

.width90{
  width: 90%;
}
.width50 {
  width: 50%;
}
.width33 {
  width: 33%;
}

.select-full {
  width: 100%;
}


.note-editor .note-dropzone { /* summernote drag-n-drop */
  display: none;
}

.color-excel{
  color: #1d6f42;
}

.bg-mario {
  background: linear-gradient(0deg, #6ec0ff, #ff67a8);
}

.file-drop-area {
  position: relative;
  padding: 40px 20px;
  border: 2px dashed #d3d3d3; /* Light gray border */
  border-radius: 8px;
  background-color: #f9f9f9; /* Light gray background */
}

.file-drop-area i {
  font-size: 60px;
  color: #b0b0b0; /* Grayish color for the icon */
  display: block;
  margin: 0 auto;
}

.file-drop-area p {
  font-size: 18px;
  color: #6c757d; /* Grayish color for the text */
  margin-top: 10px;
}

.file-drop-area:hover{
  cursor: pointer;
}
.disabled-drop-area {
  position: relative;
  pointer-events: none; /* Prevent user interactions */
  opacity: 0.5; /* Grayish effect */
}

.disabled-drop-area::after {
  content: "\f023"; /* FontAwesome lock icon (you can replace it with any icon code) */
  font-family: "Font Awesome 5 Free"; /* Make sure FontAwesome is loaded */
  font-weight: 900; /* Ensure it gets the bold style for solid icons */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem; /* Adjust the size of the icon */
  color: rgba(0, 0, 0, 0.5); /* Grayish lock icon */
  z-index: 1;
}


.h20{
  height: 20px;
}

.menu{
  z-index: 2000;
}

legend{ float: none; padding: inherit; margin-bottom: 0;padding-top: 0;} 

.answers-fieldset{
  background-color: #f6f6f6 !important;
}

.answers-fieldset legend{
  background-color: #f6f6f6 !important;
}
select{
  border: 1px solid #e2e5ea!important;
}
.nav-tabs .nav-link.active {
  border-color: #dee2e6 #dee2e6 #fff;
  background-color: #fff;
}

.nav-tabs .nav-link.active:hover {
  border-color: #dee2e6 #dee2e6 #fff;
  background-color: #fff;
}
.extra-bottom-space {
  padding-bottom: 100px; /* Adjust this value as needed */
}

.disabled-input{
  background-color: #e9ecef;
}

.disabled-input:focus{
  background-color: #e9ecef;
}
.strikethrough{
  text-decoration: line-through;
}

.courierNew{
  font-family: 'Courier New', Courier, monospace;
}

input[type="radio"]:hover{
  cursor: pointer;
}

.color-telegram{
  color: #2AABEE;
}

.bg-color-telegram {
  background: linear-gradient(to bottom, #2AABEE, #229ED9);
}

.tooltip-text {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-text.show {
  visibility: visible;
  opacity: 1;
}
.link-style {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.jummah-info {
  border: 1px solid #85292d;
  border-radius: 5px; /* Optional: for rounded corners */
}

.img-mini75px {
  width: 75px;
  height: 75px;
}
.toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.switches {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.switch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 15px;
}
.ios-switch {
  margin-right: 0!important;
  margin-top: 10px;
  display: flex;
  justify-content: center; 
  align-items: center;
}


#modal-mosque-toggle-W:checked ~ .custom-control-label::before {
  background-color: magenta !important;
}
#modal-mosque-preview {
  height: 200px;
  width: 100%;
}

.contentPrayerTimes .list-custom-large a {
  padding: 0!important;
}

.test-font {
  font-family: 'Calibri';
}

.sortable-container:hover{
  cursor: grab;
}

.content h3{
  text-align: center;
}

#dawah-container .content{
  padding: 0;
}

#dawah-container .content p{
  margin-bottom: 0;
}


.swiper .content{
  margin-top: 0px;
  margin-bottom: 0px;
}

.datepicker-container .arrow-icon{
  z-index: 0;
}

.jummah-info{
  width: min(85%, 650px)!important;
  margin-left: auto;
  margin-right: auto;
}

.bg-notification{
  background-color: rgb(219, 59, 179);
}

.ios-switch {
  pointer-events: auto;  /* Allow pointer events on the switch */
}

a .ios-input {
  pointer-events: none;  /* Disable pointer events on the anchor for the switch */
}

#notification-div .list-custom-large a {
  line-height: 70px;
  color: #1f1f1f;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}
#notification-div .list-custom-large span span:not(.badge) {
  font-size: 14px;
  position: absolute;
  margin-top: -6px;
}
#notification-div .list-custom-large span strong {
  font-size: 7px;
  position: absolute;
  font-size: 11px;
  margin-top: 10px;
  color: #adb5bd;
  font-weight: 500;
}
#notification-div .list-custom-large span i:first-child {
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: 18px;
  text-align: center;
  float: left;
  margin-right: 15px;
}
#notification-div .list-custom-large span i:last-child {
  float: right;
  font-size: 10px;
}
/*Todo List*/
#notification-div .todo-list.list-custom-large span {
  min-height: 70px;
}

#notification-div .theme-dark .list-custom-large span,
#notification-div .theme-dark .list-custom-small span {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

#notification-div .list-custom-large a {
  line-height: 50px;
}


#footer-bar {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

#notification-div .fa, #notification-div .fas{
  margin-top: 8px;
  margin-right: 10px;
  margin-bottom: 10px;
}







#notification-div .list-group .d-flex {
    padding-right: 70px; /* Reduce padding to bring the text and switch closer */
    white-space: normal;  /* Ensure the text wraps */
    word-wrap: break-word; /* Break long words if necessary */
    align-items: flex-start; /* Align items at the start (top) */
}

#notification-div .list-group .d-flex strong {
    align-self: flex-end; /* Move the text (span) lower */
    margin-top: 20px; /* Add a bit of space to move it further down */
}

#notification-div .list-group .custom-control {
    flex-shrink: 0; /* Prevent shrinking of the switch */
    margin-top: 0px; /* Reset margin-top to avoid issues */
    display: flex;
    align-items: center; /* Vertically center the switch */
    justify-content: flex-end; /* Align the switch to the far right */
    margin-bottom: 20px;
}

#notification-div .custom-control-label {
    cursor: pointer; /* Add a pointer cursor for better UX */
}




.custom-audio-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #85292d;
  color: white;
  padding: 10px;
  border-radius: 15px;
  width: 100%;
  max-width: 400px;
}

.audio-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.controls button {
  background: none;
  border: none;
  color: #e0e0e0;
  font-size: 18px;
  cursor: pointer;
  margin: 0 15px;
}

.controls button:focus {
  outline: none;
}

.seek-bar::-webkit-slider-runnable-track {
  background: none;
  }

.seek-bar {
  background: linear-gradient(to right, #97484c calc(var(--value, 0%) + 5px), #e0e0e0 calc(var(--value, 0%)));
  width: 100%;
  height: 8px;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  appearance: none;
}

.seek-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #97484c;
  border-radius: 50%;
  cursor: pointer;
}

.seek-bar::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #97484c;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -6px;
}


.seek-bar::-moz-range-track {
background: none;
}

.seek-bar::-ms-fill-lower {
background: #97484c;
}

.seek-bar::-ms-fill-upper {
background: #e0e0e0;
}

.time-display {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.time-display span {
  font-size: 12px;
}

.slider-round {
  height: 10px;
  width: 100%!important;
}

.slider-round .noUi-connect {
  background: #c0392b;
}

.slider-round .noUi-handle {
  height: 18px;
  width: 18px;
  top: -5px;
  right: -9px; 
  border-radius: 50px;
  background-color: #f5f4ef;
}

.noUi-handle{
  display: none;
}

audio{
  display: none;
}









.my-green-audio-player {
  background-color: #f5f4ef !important;
  margin-left: auto;
  margin-right: auto;
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center all child elements */
  justify-content: space-between; /* Space elements evenly */
  max-width: 90%; /* Ensure the player doesn't exceed the viewport width */
  width: 90%; /* Default width, adjust as needed */
  padding: 10px 20px; /* Add some padding for aesthetics */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
  box-sizing: border-box; /* Include padding in the width calculation */
  overflow: hidden; /* Prevent overflow */
}

.my-green-audio-player .controls {
  display: flex;
  align-items: center; /* Vertically center controls */
  justify-content: space-between;
  flex-grow: 1; /* Allow slider to stretch */
  line-height: 25px !important;
  margin: 0 10px; /* Add spacing around controls */
  flex-wrap: wrap; /* Allow controls to wrap on smaller screens */
}

.my-green-audio-player .time {
  font-size: 16px;
  color: #555;
  margin: 0 12px; /* Spacing between time and slider */
  white-space: nowrap; /* Prevent time text from wrapping */
}

.my-green-audio-player .slider {
  flex-grow: 1;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  position: relative;
  display: flex;
  align-items: center; /* Center-align the pin */
  min-width: 100px; /* Ensure slider doesn't shrink too small */
}

.my-green-audio-player .slider .gap-progress {
  background-color: #a04e4e;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  pointer-events: none;
}

.my-green-audio-player .slider .gap-progress .pin {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background-color: #a04e4e;
  position: absolute;
  transform: translate(-50%, 0px); /* Center the pin */
  pointer-events: all;
}

.my-green-audio-player .play-pause-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  min-width: 40px; 
}

.my-green-audio-player .volume {
  display: flex;
  align-items: center; /* Align volume icon */
  justify-content: center;
  cursor: pointer;
  margin-left: 12px;
  min-width: 30px; 
}




.dl-banner-container {
  display: flex;
  justify-content: center; 
  align-items: center;    
  gap: 15px;        
}
.dl-banner {
  max-height: 50px;       
  object-fit: contain;   
}

#dawah-container img,
#khutba-container img,
#ders-container img{
  width: 100%!important;
  display: block; 
  margin-left: auto;
  margin-right: auto;
}

.note-popover .note-btn {
  cursor: pointer;
  padding: 10px;
  min-width: 44px; /* Ensure a large enough clickable area */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.note-popover .note-btn i {
  pointer-events: none; /* Prevent interaction directly with the icon */
}


#dawah-container a {
  position: relative;
  display: inline-block;
}

#dawah-container a img {
  display: block; /* Prevent extra spacing below images */
}

#dawah-container a::after {
  content: '';
  background: url("../images/tewhid/play-button.png") no-repeat center center;
  background-size: contain; /* Adjust the size of the play button */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px; /* Set play button dimensions */
  height: 100px;
  transform: translate(-50%, -50%);
  pointer-events: none; /* Ensure the button doesn't block the link */
  opacity: 0.75;
}