body {
  background-color: #f0f0f0;
}

h1 {
  font-family: nafeesnastaleeq;
  line-height: 70px;
  font-weight: 400;
  font-style: normal;
  color: #000000;
  font-size: 38px;
}

h2 {
  font-family: nafeesnastaleeq;
  line-height: 68px;
  font-weight: 400;
  font-style: normal;
  color: #000000;
  font-size: 34px;
}

h3 {
  font-family: nafeesnastaleeq;
  line-height: 60px;
  font-weight: 400;
  font-style: normal;
  color: #000000;
  font-size: 30px;
}

h4 {
  font-family: nafeesnastaleeq;
  line-height: 48px;
  font-weight: 400;
  font-style: normal;
  color: #000000;
  font-size: 26px;
}

h5 {
  font-family: nafeesnastaleeq;
  line-height: 36px;
  font-weight: 400;
  font-style: normal;
  color: #000000;
  font-size: 18px;
}

h6 {
  font-family: nafeesnastaleeq;
  line-height: 36px;
  font-weight: 400;
  font-style: normal;
  color: #000000;
  font-size: 18px;
}

.footer-widget {
  font-family: nafeesnastaleeq;
  line-height: 32px;
  font-weight: 400;
  font-style: normal;
  color: #f0f0f0;
  font-size: 16px;
}

.entry-content p {
  font-family: nafeesnastaleeq;
  line-height: 44px;
  font-weight: 400;
  font-style: normal;
  color: #555;
  font-size: 22px;
}

.main-menu {
  font-family: "Alkatib Regular";
  line-height: 30px;
  font-weight: 400;
  font-style: normal;
  color: #f0f0f0;
  font-size: 20px;
}

.breaking_head {
  font-family: "AlQalam Telenor";
  text-align: center;
  line-height: 30px;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  font-size: 28px;
}

.breaking_body {
  font-family: nafeesnastaleeq;
  line-height: 36px;
  font-weight: 400;
  font-style: normal;
  color: #222;
  font-size: 18px;
}
.main-menu {
  border-top: 0px !important;
}

.main-menu li a:hover,
.main-menu li .sub-menu,
.main-menu li.current-menu-item a {
  background: #40534C !important;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background: #000000;
}

#news-star-sign,
.ticker-container,
.carousel-row {
  border: 1px solid #000000;
}

.breaking_head #left-triangle {
  border-right: 10px solid #000000;
}

.widget .widget-title,
.home-blocks .block-head {
  border-bottom: 5px solid #000000;
}

.widget .widget-title::after {
  border-color: #000000 transparent transparent transparent;
}

.related-posts-header h2 {
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}

.carousel-left {
  border-color: #000000 transparent transparent transparent;
}

.carousel-right {
  border-color: transparent transparent #000000 transparent;
}

.footer-copyrights a,
.small-nav ul .current-menu-item a {
  color: #000000 !important;
}
body {
  overflow: visible;
}
.header-content {
  display: flex;
  /* Align logos and banner in a row */
  align-items: center;
  /* Vertically center items */
  justify-content: space-between;
  /* Add space between elements */
  padding: 10px 0;
  /* Adjust padding as needed */
}

.header-content .logo-left img,
.header-content .logo-right img,
.header-content .center-logo img {
  max-height: 80px;
  /* Uniform height for all logos */
  width: auto;
  /* Maintain aspect ratio */
}

.header-content .logo-left {
  text-align: left;
  /* Align logo-left to the left */
  flex: 1;
  /* Adjust space for the left logo */
}

.header-content .center-logo {
  text-align: center;
  /* Center the middle logo */
  flex: 2;
  /* Adjust space for the middle logo */
}

.header-content .logo-right {
  text-align: right;
  /* Align logo-right to the right */
  flex: 1;
  /* Adjust space for the right logo */
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-date {
  text-align: left;
}

.header-bismillah {
  text-align: center;
  flex: 1; /* Ensures it stays centered */
}
@media (max-width: 768px) { /* For tablets and smaller screens */
  .header-bismillah {
    font-size: 20px; /* Reduce font size */
    padding: 10px 0; /* Add padding for spacing */
  }
}

@media (max-width: 480px) { /* For mobile devices */
  .header-bismillah {
    font-size: 18px; /* Further reduce font size */
    padding: 8px 0; /* Adjust spacing */
  }
}

@media (max-width: 320px) { /* For smaller mobile devices */
  .header-bismillah {
    font-size: 16px; /* Reduce font size for very small screens */
    padding: 5px 0; /* Adjust padding for a more compact layout */
  }
}
.header-languages {
  text-align: right;
}

.language-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex; /* Aligns links horizontally */
  gap: 15px; /* Adds space between the links */
}

.language-item a {
  text-decoration: none;
  font-size: 16px;
  color: white;
}
.row.small-header {
  display: flex;
  justify-content: space-between; /* Space out the three sections */
  align-items: center; /* Vertically center the content */
  padding: 4px 8px; /* Reduced padding for a more compact layout */
  background-color: #1A3636; /* Optional: Background color */
  border-radius: 5px;
}
/* Bismillah Center */
.header-bismillah {
  flex: 2;
  text-align: center;
  font-size: 18px;
  color: white;
}

/* Hide Bismillah on Mobile */
@media (max-width: 480px) { /* Mobile Devices */
  .row.small-header .header-bismillah {
    display: none !important; /* Force hiding */
  }
}



.language-item:first-child {
  padding-right: 10px; /* Adds space to the left of the first item */
}
.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 400px; /* Adjust height as needed */
}

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Dark overlay */
}

.content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
}

.btn {
  background: #007bff;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}
/* Container for the full width image */
.custom-image-container {
  width: 100%;
  height: 400px;  /* Adjust the height as needed */
  overflow: hidden;
  position: relative;
}

/* Image to take full width and height of the container */
.full-width-image {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Ensures the image covers the full container */
  object-position: center center;  /* Keeps the image centered */
  display: block;
}


.card-container {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping for smaller screens */
  gap: 20px; /* Space between cards */
  justify-content: center;
}

.card {
  display: flex;
  flex-direction: row; /* Ensure black section comes first */
  width: calc(33.33% - 20px); /* Three cards per row with spacing */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  background-color: #fff;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.card a {
  display: flex;
  text-decoration: none;
  color: inherit;
  width: 100%;
}
.card::before {
  content: ""; /* Empty content for the pseudo-element */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.1); /* Gray overlay */
  z-index: 0;
  transform: scaleX(0); /* Initially, no fill */
  transform-origin: left; /* Start filling from the left */
  transition: transform 0.3s ease-in-out; /* Smooth animation */
}
.card:hover::before {
  transform: scaleX(1); /* Fill the card on hover */
}
.card-left {
  background-color: #1A3636; /* Black background */
  width: 120px; /* Width of the black section */
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-logo {
  width: 60px; /* Logo size */
  height: auto;
}

.card-right {
  flex-grow: 1;
  padding: 20px;
  text-align: right; /* Align text to the right for Urdu */
  direction: rtl; /* Proper Urdu direction */
}

.card-right h3 {
  font-size: 18px;
  margin: 5px 0;
  color: #333;
}

.card-right p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .card {
    width: calc(50% - 20px); /* Two cards per row on medium screens */
  }
}

@media (max-width: 768px) {
  .card {
    width: 100%; /* Single card per row on small screens */
  }
}
.divider {
  height: 4px; /* Thickness of the line */
  background-color: #1A3636; /* Color of the line */
  width: 100%; /* Full-width by default */
  margin: 20px 0; /* Spacing above and below the line */
}
.home-grid-block-inner {
  border: 4px solid black; /* Adds a black border to all sides */
  border-radius: 8px; /* Optional: Rounds the corners slightly */
  overflow: hidden; /* Ensures content stays inside the border */
  background: #fff; /* Optional: White background inside the card */
  transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effect */
  display: flex;
  flex-direction: column; /* Ensures image and content stack vertically */
}

.home-grid-block-inner img {
  width: 100%; /* Makes the image stretch to fill the container */
  height: auto; /* Maintains aspect ratio */
  object-fit: cover; /* Ensures the image covers the area without distortion */
  border-radius: 5px !important;
}

.home-grid-block-inner:hover {
  transform: scale(1); /* Slightly enlarges the card on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds a shadow effect on hover */
}

.block-post-row {
  padding: 10px; /* Adds space for text around the image */
}
/* Styling for the News & Event Card */
.news-event-card {
border: 4px solid #1A3636;
border-radius: 8px;
background-color: #fff;
margin: 20px 0;
display: flex;
flex-direction: column;
height: 100%;
}

.news-event-card-header {
background-color: #1A3636;
padding: 15px;
color: white;
text-align: center;
display: flex;
justify-content: center;  /* Horizontally center */
align-items: center;      /* Vertically center */
height: 100%;             /* Ensure the height is sufficient for vertical centering */
}


.news-event-card-title {
margin: 0;
font-size: 28px;
font-weight: bold;
color: #f0f0f0;
}

.news-event-card-body {
padding: 20px;
flex-grow: 1;
text-align: center;
}

.news-event-card-img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 8px;
margin-bottom: 20px;
}

.news-event-card-content {
font-size: 16px;
margin-bottom: 20px;
}

.news-event-btn-read-more {
background-color: #FFDD57;
color: white;
padding: 10px 20px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.news-event-btn-read-more:hover {
background-color: #40534C ;
}
.swiper-container {
  width: 100%;
  padding: 20px 0;
}
.swiper-slide {
  display: flex;
  justify-content: center;
}
.news-event-container {
  border: 2px solid #1A3636; /* Adjust color to match the Donate section */
  border-radius: 8px;       /* Rounded corners */
  background-color: #1A3636; /* Background color */
  color: #ffffff !important;           /* Text color */
  padding: 3px;            /* Space inside the border */
  margin-bottom: 20px;      /* Space below the section */
}

.news-header {
  background-color: #1A3636;
  color: #ffffff;
  text-align: center !important;
  padding: 10px 0;
  border-bottom: 2px solid #ffffff; /* Optional: separate title with a line */
}

.news-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: white;
}


/* Styling for the Donation Card */
.donation-card {
border: 4px solid #1A3636;
border-radius: 8px;
background-color: #fff;
margin: 20px 0;
display: flex;
flex-direction: column;
height: 100%;
}
.donation-container {
  border: 2px solid #1A3636; /* Same border color as the background */
  border-radius: 8px;        /* Rounded corners */
  background-color: #1A3636; /* Background color */
  color: #ffffff !important; /* Text color */
  padding: 3px;              /* Space inside the border */
  margin-bottom: 20px;       /* Space below the section */
}

.donation-header {
  background-color: #1A3636;
  color: #ffffff;
  text-align: center !important;
  padding: 10px 0;
  border-bottom: 2px solid #ffffff; /* Optional: separate title with a line */
}

.donation-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: white;
}



.donation-card-header {
background-color: #1A3636;
padding: 15px;
text-align: center;
display: flex;
justify-content: center;  /* Horizontally center */
align-items: center;      /* Vertically center */
height: 100%;             /* Ensure the height is sufficient for vertical centering */
}


.donation-card-title {
margin: 0;
font-size: 28px;
font-weight: bold;
color: #f0f0f0;
}

.donation-card-body {
padding: 20px;
flex-grow: 1;
text-align: center;
}

.donation-card-img {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 8px;
margin-bottom: 20px;
}

.donation-card-content {
font-size: 16px;
margin-bottom: 20px;
}

.donation-btn-donate {
background-color: #FFDD57;
color: white;
padding: 10px 20px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.donation-btn-donate:hover {
background-color: #40534C ;
color: white;
}

#main-nav{
  border-radius: 5px;
  background-color: #1A3636;
}
/* Navbar styling */
.main-menu {
  background-color: #1A3636;  /* Deep blue or another suitable color for a mosque theme */
  border-radius: 0;
  padding: 10px 15px;
  border-radius: 5px !important;
}

.navbar-brand {
  font-size: 1.8rem;
  color: #fff;
  font-family: 'Jameel Noori Nastaleeq', serif; /* Islamic font for Urdu text */
}

.navbar-logo {
  width: 40px;
  height: auto;
  margin-right: 10px;
}

.navbar-toggle .icon-bar {
  background-color: #fff; /* White color for the toggle icon */
}

/* Menu styling */
.menu {
  list-style: none;
  padding-left: 0;
  
}

.menu > li {
  display: inline-block;
  margin-right: 20px;
  border-radius: 5px;
  
}

.menu > li > a {
  color: #fff;
  font-size: 14px;
  font-family: 'Jameel Noori Nastaleeq', serif;
  text-decoration: none;
  
}

.menu > li > a:hover {
  color: #FFDD57; /* Golden color for hover effect */
  border-radius: 5px;
}

/* Search bar */
.navbar-form {
  margin-top: 8px;
}

.navbar-form .form-control {
  border-radius: 50px;
  padding-left: 20px;
  height: 34px;
  width: 250px;
}

.navbar-form .btn {
  border-radius: 50px;
  background-color: #FFDD57;  /* Golden button */
  color: #fff;
  border: none;
}

.navbar-form .btn:hover {
  background-color: #FFC107;
}

@media (max-width: 768px) {
  .navbar-form {
    margin-top: 15px;
  }
}

@media (max-width: 480px) {
  .menu > li {
    display: block; /* Stacks the menu items vertically */
    margin-right: 0;
    text-align: center;
  }

  .navbar-form .form-control {
    width: 200px; /* Adjust for smaller screens */
  }

  /* Adjust menu icon for mobile */
  .navbar-toggle {
    margin-top: 10px;
  }
}

/* Apply Urdu font specifically to the footer */
#footer {
font-family: 'Noto Nastaliq Urdu', sans-serif; /* Apply Urdu font */
direction: rtl; /* Set text direction to right-to-left for Urdu */
}

/* Styling for widget title */
.footer-widget .widget-title {
font-size: 20px;
font-weight: bold;
}

/* Menu items */
#menu-donation-menu a {
font-family: 'Noto Nastaliq Urdu', sans-serif;
font-size: 16px;
color: #333; /* Optional: adjust the text color */
text-decoration: none;
}

#menu-donation-menu li {
list-style: none;
margin-bottom: 10px;
}

/* Apply to all footer elements */
.footer-copyrights p {
font-family: 'Noto Nastaliq Urdu', sans-serif;
font-size: 14px;
color: #555; /* Adjust the copyright color */
text-align: center;
margin: 0;
}

/* Other general footer styles */
.footer-widget-col {
padding: 10px;
}
.modal-content {
background-color: #fff;
margin: 5% auto;
padding: 20px;
border-radius: 10px;
width: 70%; /* Adjust width */
max-width: 900px; /* Limit maximum width */
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
display: block; /* Single column layout */
max-height: 80vh; /* Set a max height to trigger scrolling */
overflow-y: auto; /* Add vertical scrollbar when content overflows */
}

.form-row {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}

.form-row label {
font-weight: bold;
text-align: right; /* Align label text for Urdu */
margin-bottom: 5px;
}

.form-row input{
padding: 10px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%; /* Make inputs take full width of column */
}


button:hover {
background-color: #FFDD57;
}

.close {
float: right;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
}

@media (max-width: 768px) {
.modal-content {
  width: 90%; /* Adjust width for smaller screens */
}
}
