.naat-section {
   padding: 60px 130px;
   background: #EAF8FE;
}

.naat-name-section {
   padding: 60px 160px;
   background: #EAF8FE;
}

.naat-name-wrapper {
   padding: 40px 60px 60px 40px;
   background: #fefefe;
   border-radius: 8px;
   box-shadow: 0 3px 36px rgba(0, 0, 0, 0.1);
}

.naat-name-wrapper-title {
   font-size: 36px;
   font-family: gilroySemibold;
   color: #242F6C;
   margin-bottom: 50px;
   text-transform: capitalize;
}

.sub-naat-collection-page-title {
   font-size: 27px;
}

.naat-starting-letter {
   font-size: 32px;
   font-family: berkshire;
   margin-bottom: 10px;
   margin-top: 40px;
   color: #ffaa0b;
}

.naat-starting-letter:first-child {
   margin-top: 0;
}

.naat-name {
   font-size: 17px;
   font-family: openSansSemibold;
   color: rgb(0, 153, 161);
   text-decoration: none;
   display: block;
   margin-bottom: 8px;
   width: fit-content;
   text-transform: capitalize;
   padding-left: 18px;
}

.naat-name::before {
   position: absolute;
   left: 3px;
   top: 10px;
   height: 6px;
   width: 6px;
   border-radius: 50%;
   background: #0c163e;
   content: '';
}

.naat-name:hover {
   color: rgb(126, 0, 252);
   text-decoration: underline;
}

.naat-lan-title {
   font-size: 24px;
   color: #242F6C;
   font-family: openSansSemibold;
   margin-bottom: 20px;
   margin-top: 15px;
   text-transform: capitalize;
}

.naat-description-wraper {
   padding: 30px 40px;
   background: #fefefe;
   border-radius: 24px;
   box-shadow: 0 3px 36px rgba(0, 0, 0, 0.1);
   font-family: openSansSemibold;
   font-size: 18px;
   margin-bottom: 40px;
}













/* single-naat-page */
.masail-wrapper {
   background: #FFF;
   transition: all 0.3s;
   border-radius: 8px;
   box-shadow: 3px 3px 36px rgba(227, 227, 227, 0.4);
}

.masail-wrapper-dark-bg {
   background: #1f2833;
   transition: all 0.3s;
}

.masail-title-container {
   padding: 15px 20px;
   background: #f1be5d;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 25px;
   border-radius: 8px 8px 0 0;
}

.masail-title {
   font-size: 25px;
   font-weight: bold;
   font-family: gilroySemibold;
   color: #FFF;
   margin-bottom: 0;
   text-transform: capitalize;
   transition: all 0.3s;
}

.masail-dark-theme-title {
   color: #FFF;
   transition: all 0.3s;
}

.content-wrapper {
   padding: 0 40px 40px 40px;
   font-size: 16px;
   font-family: openSansSemibold;
   color: rgb(20, 16, 30);
   transition: all 0.3s;
}

.content-wrapper-dark-theme {
   color: #eeeeee;
   transition: all 0.3s;
}

.masail-title-container-dark-theme {
   background: #283142;
}

.naat-name-container {
   position: relative;
   width: fit-content;
}

.popular-tag {
   position: absolute;
   right: -50px;
   top: -2px;
   font-size: 13px;
   color: #ffaa0b;
   font-family: berkshire;
}



/* toogle switch */
.switch-wrapper {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   margin-top: 2px;
   margin-left: 40px;
   cursor: pointer;
   transition: all 0.25s;
}

.switch-wrapper svg {
   height: 25px;
   width: 25px;
}

.switch-wrapper-active {
   transform: rotate(180deg);
}

.switch-wrapper-active svg path {
   fill: #BFC2C7 !important;
}

.switch {
   display: inline-block;
   height: 30px;
   position: relative;
   width: 56px;
}

.switch input {
   display: none;
}

.naat-top-ad-wrapper {
   height: 220px;
   width: 100%;
   display: none;
}

.fb-comment-section {
   padding: 40px 30px;
   margin-top: 50px;
   background: #FFF;
   border-radius: 24px;
   box-shadow: 3px 3px 36px rgba(227, 227, 227, 0.4);
   max-height: 500px;
   overflow-y: auto;
}

.fb-comment-section::-webkit-scrollbar {
   width: 6px;
   height: 400px;
}

/* Track */
::-webkit-scrollbar-track {
   background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
   background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: #555;
}

.namaz-ka-tarika-img {
   width: 100%;
   height: auto;
   margin-bottom: 60px;
   margin-top: 60px;
   border-radius: 24px;
   display: flex;
   justify-content: center;
   padding: 0 40px;
}

.top-img{
   padding: 0 80px;
}

.namaz-ka-tarika-img img {
   width: 100%;
   height: auto;
   object-fit: cover;
   border-radius: 24px;
   box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}

.naat-brief-descrition {
   padding: 30px;
   background: #FFF;
   border-radius: 24px;
   margin: 50px 0;
   box-shadow: 3px 3px 36px rgb(227 227 227 / 40%);
}

.naat-brief-descrition-title {
   font-size: 24px;
   color: #f1be5d;
   font-family: gilroySemibold;
}

.naat-brief-descrition p {
   font-family: openSansSemibold;
   font-size: 17px;
   margin-top: 5px;
   margin-bottom: 0;
   color: rgb(20, 16, 30);
   /* text-transform: capitalize; */
}


.related-masail-wrapper {
   padding: 25px;
   background: #FFF;
   border-radius: 20px;
   width: 100%;
   box-shadow: 3px 3px 36px rgb(227 227 227 / 40%);
}

.related-masail-title {
   margin-bottom: 18px;
   color: #1f2833;
   font-family: gilroySemibold;
}

.related-naat-name {
   font-size: 16px;
   line-height: 20px;
   font-family: openSansSemibold;
   color: rgb(0, 153, 161);
   text-decoration: none;
   display: block;
   margin-bottom: 15px;
   width: fit-content;
   text-transform: capitalize;
}

.related-naat-name:hover {
   color: rgb(126, 0, 252);
   text-decoration: underline;
}

.masail-in-content-ad {
   margin: 20px auto;
}

.masail-content-ad {
   max-height: 160px !important;
   height: 160px !important;
}

@media(max-width: 1400px) {
   .naat-name-wrapper {
      padding: 40px;
   }

   .naat-name-wrapper-title {
      font-size: 34px;
      margin-bottom: 40px;
   }

   .naat-starting-letter {
      font-size: 30px;
   }

   .naat-name {
      font-size: 16px;
      margin-bottom: 10px;
   }

   .naat-section {
      padding: 50px 100px;
   }

   .masail-title-container {
      margin-bottom: 20px;
   }
}




@media(max-width: 1200px) {
   .naat-name-wrapper {
      padding: 36px;
   }

   .naat-name-wrapper-title {
      font-size: 32px;
      margin-bottom: 36px;
   }

   .naat-starting-letter {
      font-size: 28px;
   }

   .naat-name {
      font-size: 15px;
      /* margin-bottom: 8px; */
   }

   .naat-section {
      padding: 50px 60px;
   }

   .content-wrapper {
      font-size: 15px;
   }

   .switch-wrapper {
      margin-left: 30px;
   }
}


@media (max-width: 1024px) {
   .naat-name-section {
      background: #FFF;
   }

   .naat-name-wrapper {
      padding: 36px 30px;
      box-shadow: none;
   }

   .popular-tag {
      font-size: 11px;
      right: -44px;
      top: 0;
   }
}




@media(max-width: 992px) {
   .naat-section {
      padding: 40px 10px;
   }

   .naat-name-section {
      padding: 40px 25px;
   }

   .naat-name-wrapper {
      padding: 0;
      background: transparent;
      border-radius: 14px;
      box-shadow: none;
   }

   .naat-name-wrapper-title {
      font-size: 30px;
      margin-bottom: 30px;
      line-height: 1.1;
   }

   .naat-name {
      font-size: 16px;
      margin-bottom: 12px;
      line-height: 21px;
   }

   /* single-naat-page */
   .masail-wrapper {
      padding: 0;
      border-radius: 8px;
   }

   .masail-title-container {
      padding: 10px 18px;
      border-radius: 8px 8px 0 0;
   }

   .content-wrapper {
      padding: 0 18px 30px 18px;
   }

   .switch-wrapper {
      margin-left: 20px;
   }

   .fb-comment-section {
      border-radius: 16px;
   }

   .naat-brief-descrition {
      border-radius: 16px;
   }

   .detail-page-right-ad-container {
      position: relative;
      width: 90%;
      height: 100%;
      border-radius: 12px;
   }
}


@media(max-width: 768px) {

   .fb-comment-section {
      padding: 20px 12px;
      width: 100%;
      margin-top: 30px;
      max-height: 400px;
   }

   .popular-tag {
      position: relative;
      top: unset;
      right: unset;
      font-size: 12px;
      top: -4px;
      color: #ffaa0b;
      font-family: berkshire;
   }

   .naat-name {
      margin-bottom: 14px;
      font-size: 15px;
   }

   .naat-name::before {
      left: 2px;
      top: 8px;
   }

   .namaz-ka-tarika-img {
      margin: 40px 0;
      padding: 0;
      border-radius: 14px;
   }
   .top-img{
      padding: 0 15px;
   }
   .namaz-ka-tarika-img img{
      border-radius: 14px;
   }

   .naat-brief-descrition {
      padding: 20px;
      margin-bottom: 30px;
   }

   .naat-brief-descrition-title {
      font-size: 20px 18px;
   }

   .naat-brief-descrition p {
      font-size: 15px;
      line-height: 130%;
   }

   .related-masail-wrapper {
      padding: 24px;
      margin-top: 30px;
   }

   .related-masail-title {
      font-size: 15px;
      margin-bottom: 15px;
   }

   .naat-description-wraper {
      padding: 25px 15px;
      font-size: 15px;
      line-height: 19px;
   }
}


@media(max-width: 540px) {
   .naat-name-section {
      padding: 40px 16px;
   }

   .naat-top-ad-wrapper {
      height: 160px;
   }

   .content-wrapper {
      font-size: 16px;
      line-height: 20px;
      padding: 0 15px 30px 15px;
   }

   .masail-in-content-ad {
      box-sizing: border-box;
   }
}


@media(max-width: 340px) {
   .naat-name-section {
      padding: 40px 15px;
   }

   .content-wrapper {
      font-size: 16px;
      line-height: 22px;
   }

   .content-wrapper .number-list li {
      font-size: 13px;
   }
}