/* Basic styles */
body {
  --transition-duration: 0.25s;
  --transition-timing-function: ease-out;
}

a {
  transition: all var(--transition-duration) var(--transition-timing-function);
}

img {
  max-width: 100%;
}

button,
.wp-element-button,
input[type="submit"] {
  transition: all var(--transition-duration) var(--transition-timing-function);
}

@media (max-width: 767px) {
  h1 br,
  h2 br,
  h3 br,
  h4 br,
  h5 br,
  h6 br,
  p br,
  .on-mobile-hide {
    display: none !important;
  }

  .justify-content-center-mobile {
    justify-content: center !important;
  }

  .order-1-mobile {
    order: 1 !important;
  }

  .columns-gap-56-mobile {
    gap: 56px !important;
  }

  .mt-40-mobile {
    margin-top: 32px !important;
  }
}

.d-flex-img img {
  display: flex;
}

/* Form */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea,
.fluentform .ff-el-form-control {
  border: 1px solid #d2d5da;
  border-radius: 5px;
  background: #ffffff;
  padding: 1.25rem 1rem;
  color: var(--wp--preset--color--medium-gray);
  width: 100%;
  transition: all 0.25s;

  &:focus {
    outline: 0;
    border-color: var(--wp--preset--color--deep-blue);
  }
}

select,
.fluentform select.ff-el-form-control {
  padding: 0.625rem 1rem;
}

input[type="submit"],
button[type="submit"],
.fluentform .ff-btn-submit[class] {
  background-color: var(--wp--preset--color--deep-blue);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 2.5rem;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing-function);
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.fluentform .ff-btn-submit[class]:hover {
  background-color: #153d56;
}

label,
.fluentform .ff-el-input--label label {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--wp--preset--color--slate-gray);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
}

.fluentform .ff-el-group:not(.ff_submit_btn_wrapper) {
  margin-bottom: 2.8rem;
}

.fluentform .ff_submit_btn_wrapper {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .fluentform .ff-el-group {
    margin-bottom: 1.8rem;
  }
}

select.ff-el-form-control:not([size]):not([multiple]) {
  height: 54px;
}

/* Style buttons that contain inline images  */
.wp-element-button:has(img) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

footer.wp-block-template-part {
  margin-top: 0 !important;
}

/* Hover effects */
.shadow-hover {
  transition: all var(--transition-duration) var(--transition-timing-function);
}

.shadow-hover:hover {
  box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.1);
}

/* blog grid posts */

@media (min-width: 1025px) {
  .sticky-post-title:not(.wp-block) {
    margin-right: -450px !important;
  }
}

.blog-recent-posts .wp-block-post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em;
  line-height: 1.5em;
  white-space: normal;
}

.blog-recent-posts .wp-block-post:last-child .wp-block-columns {
  border-bottom: none;
}

.blog-grid-query-post img {
  display: block;
}

.blog-grid-query-post .taxonomy-category,
.single-blog-categories {
  border-radius: 5px;
}

.blog-grid-query-post .taxonomy-category a:hover {
  text-decoration: none;
}

/* course-query-post */
.course-query-thumbnail-wrap {
  position: relative;
}

.course-query-enroll-btn:not(.wp-block) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 23px 23px 0 0;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-duration) var(--transition-timing-function);
}

.course-query-post:hover .course-query-enroll-btn {
  opacity: 1;
  visibility: visible;
}

.course-query-post .taxonomy-ilm_ul_quran_course_cats a:not(:first-child),
.course-query-post
  .taxonomy-ilm_ul_quran_course_cats
  .wp-block-post-terms__separator,
.blog-grid-query-post .taxonomy-category a:not(:first-child),
.blog-grid-query-post .taxonomy-category .wp-block-post-terms__separator {
  display: none;
}

.course-query-post .taxonomy-ilm_ul_quran_course_cats a {
  pointer-events: none;
}

/* instructor card */
.instructor-card-details,
.instructor-infos-query-post {
  transition: all var(--transition-duration) var(--transition-timing-function);
}

.instructor-card:hover .instructor-card-details,
.instructor-query-post:hover .instructor-infos-query-post {
  background-color: var(--wp--preset--color--deep-blue) !important;
  border-color: var(--wp--preset--color--deep-blue) !important;
}

.instructor-card:hover .instructor-card-details h5 a {
  color: var(--wp--preset--color--white) !important;
}

.instructor-card:hover .instructor-card-details h5 a:hover {
  color: var(--wp--preset--color--vibrant-orange) !important;
}

.instructor-card:hover .instructor-card-details p,
.instructor-query-post:hover .instructor-infos-query-post p {
  color: var(--wp--preset--color--silver) !important;
}

/* Instructor query block */
.instructor-query-post:hover .instructor-infos-query-post h2 a {
  color: var(--wp--preset--color--white) !important;
}

.instructor-query-post:hover .instructor-infos-query-post h2 a:hover {
  color: var(--wp--preset--color--vibrant-orange) !important;
  text-decoration: none;
}

/* about us page */
.ilm-ul-quran-about-us-img-linking {
  position: relative;
}

@media (min-width: 992px) {
  .ilm-ul-quran-about-us-img-linking::after {
    position: absolute;
    left: -74px;
    top: -54px;
    content: "";
    width: 123px;
    height: 116px;
    background-image: url("data:image/svg+xml,%3Csvg width='123' height='116' viewBox='0 0 123 116' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M59.17 24.4998L59.1699 0.802246L50.9139 14.2483C42.3409 22.771 6.72541 43.3215 0.632324 57.2517C43.902 56.5464 74.8533 105.52 76.4281 115.611L79.7311 86.6206L90.468 67.7919C98.7731 67.1964 116.707 63.9555 122.213 54.39C74.3099 57.5785 60.2422 35.6779 59.17 24.4998Z' fill='%231F4D6B'/%3E%3C/svg%3E%0A");
  }
}

@media (max-width: 600px) {
  .instructor-lists-query-posts
    .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
    grid-template-columns: 1fr 1fr;
  }
}