.circle-bg {
    background: #eee;
    border-radius: 73px;
    padding: 10px;
    width: 100px;
    height: 100px;
    margin: 0 auto 42px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
.circle-bg img {
    width: 93%;
    padding: 10px;
}
.form_border  {
    box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.btn  {
    padding: 15px 15px
}
.forgot-password {
    color: #0d8296;
    font-weight: 500;
}
.forgot-password:hover {
    color: #a3c030;
}
.txt_generate {
    color: #e2982f;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
}
.txt_generate:hover {
    color: #a3c030;
}
.sign-in-page  {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: #f2f2f2;
}
.sign_up_pad  {
    padding: 64px 0;
}
.iti__country-list  {
    width: 348px;
}

/**** OTP Start ****/
.otp-field {
    flex-direction: row;
    column-gap: 10px;
    display: flex;
    align-items: center;
    justify-content: left;
  }
  
  .otp-field input {
    height: 45px;
    width: 42px;
    border-radius: 6px;
    outline: none;
    font-size: 1.125rem;
    text-align: center;
    border: 1px solid #ddd;
  }
  .otp-field input:focus {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  }
  .otp-field input::-webkit-inner-spin-button,
  .otp-field input::-webkit-outer-spin-button {
    display: none;
  }

  

.circle-bg-otp::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #58B8CC;
    border-radius: 50%;
}

.circle-bg-otp::after {
    content: '';
    position: absolute;
    width: 85%;
    height: 85%;
    background-color: #1D7B8F;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circle-bg-otp img {
    position: relative;
    width: 60%;
    height: 60%;
    object-fit: contain;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.detail_bck  {
    background: #eee;
    padding: 12px;
    font-size: 1rem;
    border-radius: 8px;
    line-height: 15px;
}
.detail_dec  {
    color: #0d8296;
    font-weight: 600;
}
.success_msg  {
    color: #0d8296;
    font-weight: 500;
    line-height: 30px;
    font-size: 22px;
}
.txt_color  {
    color: #0d8296;
}
.login_mobile  {
    margin: 10px auto 0px !important;
    display: block;
    width: 50%;
}
.navbar-collapse  {
   justify-content: end;
}
/* .logo_width  {
   width: 65%;
} */
.profile_head  {
    border-radius: 25px;
}
.profile_head h6, .profile_head span  {
    color: #111;
}
.card_bck  {
    background: #fff;
}
.icon_bck  {
    color: #0d8296;
    font-size: 40px;
    background: transparent !important;
}
.card_bck2  {
    background: #00cfde1f;
}
.card_bck3  {
    background: #00cfde1f;
}
.icon_txt  {
    font-size: 22px;
}
.card_bck3 {
    background: #94d07552;
}
.card_bck4 {
    background: #de94cd2e;
}
.my_icf  {
    background: #0d8296;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 30px;
    /* border: none; */
    -webkit-box-shadow: 0px 2px 8px var(--iq-card-shadow-1), 0px 8px 16px var(--iq-card-shadow-2);
    box-shadow: 0px 2px 8px var(--iq-card-shadow-1), 0px 8px 16px var(--iq-card-shadow-2);
    width: 100%;
    display: block;
    padding: 13px 20px;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
}
.my_icf:hover  {
    background: #a3c030;
    color: #fff;
}
.prayer_time, .prayer_time td  {
    border: 1px solid #dee2e6;
}
.table_bck  {
    background: #eee;
}
.prayer_upcoming  {
    font-size: 8px;
    margin-bottom: 0;
    
}
.table_bck_last  {
    background: #0d8296;
}
.table_bck_last p, .table_bck_last b  {
    color: #fff;
}
.contact_section  {
    padding: 29px;
    color: #fff;
}

.contact_section h4  {
    color: #111;
    margin-bottom: 5px;
}
.contact_section i  {
    font-size: 38px;
    text-align: center;
    display: block;
    background: #0d8296;
    color: #fff !important;
    border-radius: 69px;
    width: fit-content;
    margin: 0 auto;
    line-height: normal;
    padding: 19px;
}
.contact_section i, .contact_section p  {
    color: #111;
}
.grid-item {
    position: relative;
    height: 325px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    margin: 10px;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgb(17 17 17 / 85%), rgb(17 17 17 / 71%));
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.grid-item:hover .overlay {
    opacity: .8;
}
.grid1  {
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.dawa_txt  {
    width: 50%;
    float: left;
    font-size: 26px;
    color: #a3c030;
    position: absolute;
    left: 28px;
    bottom: 27px;
}
.dawa_subtxt  {
    font-size: 10px;
    line-height: 19px;
    color: #fff;
}
.navbar-list li a:hover  {
    color: #0d8296;
}
.navbar-list li a:hover i {
    background: #111;
    color: #fff;

}
.navbar-list li a:hover .menu__txt {
    color: #0d8296;
}
.navbar-list li a:hover {
    background-color: transparent;
}
.navbar-list li .profile_head:hover {
    background: #eee;
}
.profile_border  {
    border-radius: 65px;

}
a  {
    color: #0d8296;
}
.edit_btn  {
    /*background: #0d8296;*/
    color: #0d8296;
    padding: 4px 10px;
    border-radius: 5px;
}
.edit_btn:hover  {
    background: #a3c030;
    color: #fff;
}
#navbarSupportedContent  {
    justify-content: space-between;
}
.navbar-list li>a {
    font-size: 22px;
    font-weight: 300 !important;
}
.main_menu li {
    padding: 7px 16px 18px;
}
.main_menu li a {
    padding: 0px 5px;
    text-align: center;
}
.main_menu li i {
    background: #ccc;
    border-radius: 50px;
    padding: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.navbar-list li a:hover .notification {
    background: transparent;
    color: #e2982f;
}
.flex_menu  {
    justify-content: space-between;
    display: flex;
    flex-basis: auto;
    flex-grow: 1;
}
.banner-carousel  {
    margin-top: 12px;
}
.edit_profile_btn  {
    margin: 0 auto;
    display: block;
    text-align: center;
}
.profile_btn  {
    padding: 12px 50px;
}
.btn___bck  {
    background: #eee !important;
}
.selected_member  {
    position: relative;
}
.span_check  {
    position: absolute;
    right: 10px;
    top: 45px;
}
.span_check i  {
    background: green;
    border-radius: 10px;
    padding: 1px;
    color: #fff;
}
.dawa_grid  {
    padding: 24px;
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}
.dawa_grid_one_bck  {
    background: unset;
    padding: 0;
}
.dawa_grid_two_bck  {
    background: #858324;
}
.dawa_grid_one_bck img {
    border-radius: 0px !important;
}
.roula_two_grid  {
    background: #0d8296;
    padding: 5px 15px;
}
.dawa_grid img  {
    width: 100%;
    height: -webkit-fill-available;
    object-fit: cover;
    border-radius: 10px;
    height: 300px;
}
.dawa_grid h3  {
    color: #fff;
    margin-top: 10px;
}
.dawa_grid p  {
    color: #ccc;
}
.icon_align  {
    display: flex;
    justify-content: flex-end;
}
.icon_align i {
    color: #a3c030;
    padding: 5px;
    text-align: start;
    font-size: 38px;
    font-weight: 500;
    border-radius: 17px;
    line-height: normal;
}
.dawa_grid_icon  {
    background: #ffff;
    font-size: 44px;
    padding: 9px;
    border-radius: 40px;
    display: block;
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: normal;
    color: #1d7b8f;
    line-height: 57px;
    margin: auto;
}
.dawa_cat_bck  {
    background: #eee;
    margin: 10px;

}
.text_clr  {
    color: #000 !important;
}
.dawa_corner {
    position: relative;
    overflow: hidden;
}

.dawa_corner img {
    transition: opacity 5s ease-out;
    width: 100%;
    display: block;
}

/* .dawa_corner:hover img {
    opacity: 0.8;
} */

/* Background Overlay */
.dawa_corner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0); /* Initially transparent */
    transition: background 0.5s ease-in-out;
}

.dawa_corner:hover .overlay {
    background: rgb(0 91 128 / 30%);
}
.dawa_corner .hover-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 28px;
    font-weight: 300;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 2;
}

.dawa_corner:hover .hover-text {
    opacity: 1; /* Show text on hover */
}


.section_pad_top {
    padding-top: 50px;
}
.section_pad_bottom  {
    padding-bottom: 50px;
}
#popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 9998;
}

#popup-box {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #eee;
    padding: 50px 30px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    border-radius: 10px;
    width: 500px;
}

.popup-close {
    cursor: pointer;
    color: red;
    font-weight: bold;
    float: right;
    background: #fff;
    padding: 0px 9px;
}
.roula_section {
    padding: 20px 10px;
    margin-bottom: 20px;
}
.roula_notes  {
    text-align: center;
    display: block;
    background: #1d7b8f;
    color: #fff;
    font-size: 40px;
    border-radius: 10px;
    width: 60px;
    padding: 10px;
    height: 60px;
    line-height: 37px;
    margin: 0 auto;
}
.roula_viewmore  {
    background: #0d8296;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
    display: block;
    width: fit-content;
    transition: all 0.5s ease-out 0s;
}
.roula_viewmore:hover  {
    background: #a3c030;
    color:  #fff;
}
.roula_para  {
    line-height: normal;
    margin-bottom: 0;
}
.pt-30  {
    padding-top: 30px;
}
.pb-30  {
    padding-bottom: 30px;
}
.pt-40  {
    padding-top: 40px;
}
.pb-40  {
    padding-bottom: 40px;
}
.pt-50  {
    padding-top: 50px;
}
.pb-50  {
    padding-bottom: 50px;
}
.pt-60  {
    padding-top: 60px;
}
.pb-60  {
    padding-bottom: 60px;
}
.pt-70  {
    padding-top: 70px;
}
.pb-70  {
    padding-bottom: 70px;
}
.pt-80  {
    padding-top: 80px;
}
.pb-80  {
    padding-bottom: 80px;
}
.banner {
    position: relative;
    background-size: cover;
    min-height: 400px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 42px;
    color: white;
    flex-direction: column;
}

.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 91 128 / 80%);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.banner_large  {
    padding: 86px !important;
}
.banner h1 {
    position: relative;
    z-index: 1;
    font-size: 3rem;
    color: #fff;
    font-weight: 600;
}
.pagination_float  {
    text-align: center;
    margin: 0 auto;
    display: block;
    width: 250px;
}
.page-item.disabled .page-link {
    color: #111;
    border-color: #0d8296;
}
.page-item.active .page-link {
    background-color: #0d8296;
    border-color: #0d8296;
    color: #fff;
}
.page-link {
    color: #0d8296;
    border: 1px solid #0d8296;
}
.page-link {
    color: #111;
}
.page-link:hover {
    color: #fff;
    background-color: #0d8296;
    border-color: #0d8296;
}
.quote_icon  {
    font-size: 32px;
    color: #55555578;
}
.daawa_bite_list_pad  {
    padding: 25px 29px;
}
.daawa_bite_para  {
    margin-bottom: 5px;
}
.daawa_author  {
    text-align: right;
    color: #0d8296;
}
.arabic_txt  {
    font-family: "Cairo", serif;
    direction: rtl;
    text-align: right;
    font-size: 16px;
    margin-top: 0px;
    line-height: normal;
}
.roula_section h4  {
   font-size: 20px;
}
.audio_style_adkar {
    width: 100% !important;
    margin: 0px auto 71px !important;
}
.banner_mini {
    min-height: 200px !important;
    background-color: #0d8296;
}
.banner_mini::before {
    background-color: unset;
}
.breadcrumb {
    background-color: transparent;
    list-style: none;
    text-align: center;
    display: block;
    padding: 0;
    margin: 0;

}

.breadcrumb li {
    display: inline;
    font-size: 16px;
}

.breadcrumb li:not(:last-child)::after {
    content: " / ";
    margin: 0 5px;
    color: #e2982f;
}

.breadcrumb a {
    text-decoration: none;
    color: #e2982f;
    opacity: 1;
    z-index: 1;
    position: relative;
}

.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb li:last-child  {
    color: #fff;
    z-index: 1;
    position: relative;
}
#popup-box h3 {
    text-align: center;
    color: #1d7b8f;
    margin-bottom: 14px;

}
h5 {
    font-size: 1.6rem;
}
.text_clr  {
    text-align: center;
}
.dawa_cat_bck h5  {
    text-align: center;
}
.notification  {
    position: relative;
    font-size: 25px;
    color: #a3c030;
}
.notification_count  {
    box-shadow: 0px 2px 8px var(--iq-card-shadow-1), 0px 8px 16px var(--iq-card-shadow-2);
    position: absolute;
    background: #fff;
    line-height: normal;
    height: 18px;
    width: 18px;
    border-radius: 20px;
    font-size: 9px;
    top: 17px;
    right: 11px;
    padding: 3px 3px;
    text-align: center;
    line-height: 14px;
    font-weight: 600;
    font-family: 'Poppins';
    color: #a3c030;
}
.seperator {
    font-size: 20px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 8px;
    padding-bottom: 8px;
}
.icon_over i  {
    transition: all 0.5sease-out 0s;
}

.over_txt:hover  {
    color: #0d8296;
}
.job-slider {
    width: 100%;
    margin: auto;
    display: flex;
}

.swiper-slide {
    display: flex;
    align-items: stretch; /* Ensures all slides have equal height */
}

.job-card {
    background: #eee;
    padding: 30px;
    border-radius: 10px;
    transition: transform 0.5s ease-in-out;;
    display: flex;
    flex-direction: column; /* Aligns content properly */
    justify-content: space-between; /* Ensures consistent spacing */
    flex-grow: 1; 
    margin: 10px;
}
.job-card-icon  {
    color: #0d8296;
    font-size: 48px;
    text-align: left;
    margin-bottom: 10px;
}
.job-card a {
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}
.job-card h3  {
    color: #0d8296;
    font-size: 24px;
    margin-bottom: 8px;
}
.job-card:hover {
    background-color: #eeeeeeb3;
}
.swiper {
    padding: 20px 0;
}
.swiper-button-next, .swiper-button-prev {
    color: #333;
}
.skill_block  {
    padding: 29px;
    background: #858324;
    color: #fff;
}
.skill_block:hover  {
    background: #1d7b8f;
}
.grid-item-job {
    height: 350px;
}
.job__icon  {
    float: right;
    font-size: 26px;
    color: #0d8296;
    position: absolute;
    right: 30px;
    bottom: 22px;
    border-radius: 25px;
    line-height: normal;
    padding: 6px;
    text-align: center;
}
.application  {
    background: #0d8296;
    border: 1px solid #0d8296;
    color: #fff;
}
.application:hover  {
    background: #0d8296;
    border: 1px solid #0d8296;
    color: #fff;
}
.application i {
    font-size: 30px !important;
}
.select2-container .select2-selection--single { 
    height: 45px; 
    line-height: 45px; 
    background: transparent; 
    border: 1px solid var(--iq-dark-border); 
    font-size: 14px; 
    color: var(--iq-body-text); 
    border-radius: 8px; 
    padding: 8px 10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 45px;
}
/*** File Upload ***/
.upload-files-container {
	width: 100%;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.drag-file-area {
	border: 2px dashed #d7dbda;
    border-radius: 10px;
    margin: 10px 0 15px;
    padding: 30px 50px;
    width: 100%;
    text-align: center;
}
.drag-file-area .upload-icon {
	font-size: 50px;
}
.drag-file-area h3 {
	font-size: 26px;
	margin: 15px 0;
}
.drag-file-area label {
	font-size: 19px;
}
.drag-file-area label .browse-files-text {
	color: #0d8296;
	font-weight: bolder;
	cursor: pointer;
}
.browse-files span {
	position: relative;
	/* top: -25px; */
}
.default-file-input {
	opacity: 0;
    display: none;
}
.cannot-upload-message {
	background-color: #ffc6c4;
	font-size: 17px;
	display: flex;
	align-items: center;
	margin: 5px 0;
	padding: 5px 10px 5px 30px;
	border-radius: 5px;
	color: #BB0000;
	display: none;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.cannot-upload-message span, .upload-button-icon {
	padding-right: 10px;
}
.cannot-upload-message span:last-child {
	padding-left: 20px;
	cursor: pointer;
}
.file-block {
	color: #f7fff7;
	background-color: #0d8296;
  	transition: all 1s;
	width: 390px;
	position: relative;
	display: none;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 10px 0 15px;
	padding: 10px 20px;
	border-radius: 25px;
	cursor: pointer;
}
.file-info {
	display: flex;
	align-items: center;
	font-size: 15px;
}
.file-icon {
	margin-right: 10px;
}
.file-name, .file-size {
	padding: 0 3px;
}
.remove-file-icon {
	cursor: pointer;
}
.progress-bar {
	display: flex;
	position: absolute;
	bottom: 0;
	left: 4.5%;
	width: 0;
	height: 5px;
	border-radius: 25px;
	background-color: #4BB543;
}
.upload-button {
	background-color: #0d8296;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 18px;
    border: none;
    border-radius: 20px;
    /* margin: 10px; */
    padding: 0.5px 7px;
    cursor: pointer;
}
 /* Popup Overlay (Hidden by Default) */
 .popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    justify-content: center;
    align-items: center;
    z-index: 99;
}

/* Popup Content */
.popup-content {
    background: white;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    width: 360px;
    position: relative;
}

/* Close Button */
.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
}

#skills-container {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 5px;
    min-height: 40px;
}

.skill {
    display: inline-block;
    background: #eee;
    color: #000;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 5px;
    position: relative;
}

.skill .remove-skill {
    cursor: pointer;
    margin-left: 8px;
    font-weight: bold;
    color: #ff0000;
}

#skill-input-container {
    display: flex;
    gap: 10px;
}

.skill__btn  {
    width: 162px !important;
    padding: 6px;
    text-transform: capitalize;

}
.job_exp  {
    margin-top: 10px;
    color: #7b7b7b;
}
.job_label  {
    border: 1px solid #0d8296;
    background: #0d8296;
    color: #fff;
    font-size: 14px;
    padding: 0 10px;
    border-radius: 5px;
    margin-right: 10px;
}
.cv_block  {
    display: flex;
    justify-content: space-between;
}
#cv-section {
    display: none;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
}

.cv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 20px;
    background: #eee;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    
}

.cv-item i {
    font-size: 20px;
    color: #0d8296;
}

#upload-new-cv {
    display: none;
    margin-top: 10px;
}
.upload-btn {
    background: #B877EC;
    color: #fff;
    padding: 10px 17px;
    height: 46px;
    line-height: normal;
    border: navajowhite;
    border-radius: 6px;
    margin-top: 10px;
}

.upload-btn:hover {
    background: #0d8296;
}

/* Popup Styling */
#success-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 128, 0, 0.9);
    color: white;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    z-index: 1000;
}
.apply_btn  {
    width: 50%;
    margin: 20px auto 20px;
    display: block;
    text-align: center;
}
.event  {
    background: #fff;
    border-radius: 25px;
    padding: 28px;
    position: relative;
    margin: 10px;
    margin-bottom: 25px;
}
.event_img  {
    width: 100%;
    border-radius: 10px;
}
.top_grid_pad .iq-card-body {
    padding: 40px 20px;
}
.vcard  {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 100%;
    text-align: center;
    z-index: 3;
}
.time-details  {
    background: rgba(0, 0, 0, .75);
    padding: 10px 37px;
    width: fit-content;
    margin: 0 44px !important;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
    font-style: normal;
    color: #fff;
}
.tribe-events-venue-details {
    background: rgba(0, 0, 0, .75);
    padding: 10px 37px;
    width: 100%;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    width: fit-content;
    margin: 0 50px !important;
    text-transform: uppercase;
    font-style: normal;
    color: #fff;
    margin-top: 15px !important;
}
.tribe-events-venue-details a  {
    color: #fff;
}
.entry-date {
    background: #0d8296;
    left: 0px;
    display: block;
    text-align: center;
    top: 0px;
    font-size: 1.875em;
    line-height: 30px;
    color: #fff;
    font-weight: 300;
    padding: 6px 10px 4px;
    border-bottom: 3px solid #aba593;
    border-radius: 8px;
}
.entry-date span {
    display: block;
    border-top: 1px solid #fff;
    font-size: 14px;
    margin-top: 8px;
}
.tribe-events-schedule  {
    font-size: 16px;
}
.ticketrate {
    color: #aba593;
    margin-top: 15px;
}
.individual__book {
    display: flex;
}
.content-social {
    text-align: left;
    margin-top: 12px;
}
.content-social a {
    margin: 0 15px;
}
.content-social span {
    display: none;
}
.content-social a i {
    font-size: 1.125em;
    color: #B877EC;
    padding: 10px 0;
}
.content-social a i:hover {
    color: #1D7B8F;
}
.tribe-events-meta-group1  {
    width: 100%;
    float: none;
    padding: 20px 18px;
    margin: 0 0 30px;
    background: #efefef;
    border-radius: 8px;
}
.job_category {
    background: transparent;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #d7dbda;
    -webkit-box-shadow: 0px 2px 8px var(--iq-card-shadow-1), 0px 8px 16px var(--iq-card-shadow-2);
    box-shadow: 0px 2px 8px var(--iq-card-shadow-1), 0px 8px 16px var(--iq-card-shadow-2);
    width: 100%;
    display: block;
    padding: 13px 20px;
    font-size: 18px;
    font-weight: 400;
    color: #222;
}
.title-content small {
    font-weight: 500;
    font-size: 18px;
}
.title-content h3 {
    font-weight: 400;
    font-size: 16px;
}
.title-wrapper .icon {
    float: left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-right: 15px;
    text-align: center;
    color: #a3c030;
    border-radius: 100%;
    font-size: 18px;
    background-color: #fff;
}
.title-wrapper h5 {
    font-weight: 400;
    font-size: 16px;
}
.title-wrapper  {
    padding: 30px;
}
.title-wrapper .title-content h3 {
    font-weight: 600;
    font-size: 18px;
}
.placeorder__head {
    margin-bottom: 16px;
}
.d-block  {
    display: block !important;
    margin:  0 auto;
}
.menu__txt  {
    line-height: normal;
    font-size: 14px;
    margin-top: 2px;
    color: #000;
    font-weight: 400;
}
/** Banner **/
.banner-carousel .banner-slide {
    height: 600px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: #fff;
    border-radius: 25px;
    overflow: hidden;
}

/* Full-width Overlay */
.banner-carousel .banner-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Transparent background */
    border-radius: 20px;
}

/* Content Styling */
.banner-carousel .banner-content {
    max-width: 700px;
    padding: 30px;
    z-index: 1;
    animation: fadeIn 1s ease-in-out;
}

.banner-carousel .banner-content h1 {
    font-size: 70px;
    margin-bottom: 0px;
    text-transform: capitalize;
    color: #fff;
    font-weight: 600;
    line-height: 80px;
    margin-bottom: 15px;
}

.banner-carousel .banner-content p {
    font-size: 18px;
    margin-bottom: 20px;
}

.banner-btn {
    padding: 12px 30px;
    background: #ff5722;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.banner-btn:hover {
    background: #e64a19;
}
.banner_user i  {
    color: #eee !important;
}
/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/** Banner End **/
.card-title {
    margin-bottom: .75rem;
    font-weight: 500;
    margin-bottom: 22px;
}
.semi_section  {
    color: #ccc;
    font-size: 16px;
    margin-bottom: 10px;
}
.semi__banner  {
    background: #fff;
    margin-top: 92px;
    padding: 25px;
    border-radius: 25px;
}
.roula_semibanner  {
    background-repeat: no-repeat !important;
    background-size: 100% 485px !important;
    border-radius: 20px;
}
.roula-semi-txt  {
    padding: 0 20px;
}
.my-icf-section   {
    width: 38%;
    border-radius: 10px;
    margin-bottom: 10px;
    margin: 0 auto;
    display: block;
}
.banner__date  {
    background: unset;
    margin: 0 auto !important;
    margin-bottom: 20px !important;
}
.banner__date i {
    color: #a3c030b3;
}
.event_location_margin  {
    margin-top: 0px !important;
}
.border-radius  {
    border-radius: 20px;
}
.roula__grid  {
    width: 50px !important;
    height: 50px !important;
    border-radius: 42px !important;
    padding: 7px !important;
    background: #0d8296;
    margin: 0 auto;
}
.roula__grid img {
    filter: invert(1);
    height: auto;
}
.banner-btn {
    border-color: #a3c030;
    background: #a3c030;
    color: #fff;
}
.banner-btn:hover {
    border-color: #0d8296;
    background: #0d8296;
    color: #fff;
}
.event-slider .time-details i  {
    color: #a3c030;
}
.iq-sub-card .iq-bg-primary {
    background: unset;
    color: var(--iq-primary) !important;
}
.iq-sub-card:hover .iq-card-icon i {
    background: unset !important;
    color: #111;
}
.iq-sub-card .iq-card-icon i:hover {
    background: unset !important;
    color: #111 !important;
}
.sign_out  {
    padding: 3px 6px;
}
.sign_out i {
    padding-right: 0px;
}
.sign_out:hover  {
    background: #a3c030 !important;
    color: #fff !important;
    border-color: #a3c030 !important;
}
.sign_out:hover i {
    background-color: transparent !important;
}
.my_icf i  {
    font-size: 50px;
    line-height: 33px;
    font-weight: 400;
}
.roula_list_icon  {
    border: 1px solid #ccc;
    height: 60px;
    width: 60px;
    display: block;
    border-radius: 30px;
    padding: 10px;
    margin: 0 auto;
}
.roula_list_icon_img  {
    filter: invert(47%) sepia(89%) saturate(450%) hue-rotate(5deg) brightness(102%) contrast(102%);
    height: 34px;
    width: 34px;
    text-align: center;
    margin: 0 auto;
    display: block;
}
.txt_grey  {
    color: #ccc;
}
.d-grid  {
    display: grid;
}
.f-20  {
    font-size: 20px;
}
.txt_bck  {
    color: #111;
}
.banner_user {
    color: #ccc;
    z-index: 1;
    position: relative;
    margin-bottom: 100px;
    font-size: 20px;
}
.banner_user i {
    color: #0d8296;
}
.total_view  {
    color: #0d8296;
    font-size: 22px;
    margin-right: 5px;
}
.dwnld__pdf  {
    margin: 0 auto;
    display: block;
    width: fit-content !important;
    padding: 15px 35px;
}
.btn_img  {
    display: unset;
    width: 21px;
    height: 21px;
    margin-left: 5px;
    filter: invert(1) brightness(2);
}
.list__audio  {
    width: 100%;
    margin-top: 17px;

}
.selected_adkar  {
    width: 60%;
    margin: 0 auto;
    display: block;
}
.selected_btn  {
    padding: 4px 10px;
    width: fit-content;
    margin: 10px 0 0 !important;
    text-align: left;
}
.position__relative  {
    position: relative;
}
.quranclass_image  {
    position: absolute;
    bottom: 94px;
    width: 75%;
}
.hadith_no  {
    font-size: 36px;
    line-height: 41px;
    border: 1px solid #ccc;
    border-radius: 33px;
    padding: 8px 17px;
    color: #0d8296;
    margin-right: 10px;
}
.hadith_nounselected {
    font-size: 17px;
    line-height: 34px;
    border: 1px solid #ccc;
    border-radius: 33px;
    padding: 0px 11px;
    color: #111;
    margin-right: 10px;
}
.event_list_time .time-details  {
    margin:  0 auto !important;
}
.event_list_time .time-details i {
    color: #a3c030;
}
.main_event  {
    background: #eee;
    padding-bottom: 36px;
}
.main_event .event_img {
    max-height: 250px;
}
.chat:hover .icon_bck  {
    color: #a3c030
}
.contact_section:hover i  {
    background-color: #a3c030;
}
.activities  {
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.activitiestxt  {
    font-size: 20px;
}  
.activities .ri-heart-line, .activities .ri-heart-fill, .favourite  {
    font-size: 28px;
}
.mt-30  {
    margin-top: 30px;
}
.jobs_aaplied  {
    display: block;
    font-size: 20px;
    line-height: 25px;
    color: #111;
}
.count  {
    color: #0d8296;
    margin-top: 10px;
}
.f-16  {
    font-size: 16px;
}
.form_btns  {
    text-align: center;
    margin-top: 18px;
}
.upload__one  {
    padding: 3px 12px;
    font-size: 14px;
}
.form_btns .btn___bck  {
    background: #a3c030 !important;
    color: #fff !important;
}
.form_btns .btn___bck:hover  {
    background: #0d8296 !important;
    color: #fff;
}
.dashboard__height  {
    height: auto;
}
.main_menu  {
    margin-left: 170px;
}
.main_menu li a {
    color: #0d8296 !important;
}
.menu__img {
    width: 45px;
    height: 45px;
    /*background: #0d8296;*/
    padding: 0px !important;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
}

.menu__img img {
    width: 67%;
    padding: 0px;
    height: 56%;
    text-align: center;
     /*filter: invert(12%) sepia(89%) saturate(2222%) hue-rotate(256deg) brightness(92%) contrast(94%); */
     filter: brightness(0) saturate(100%) invert(48%) sepia(24%) saturate(1321%) hue-rotate(153deg) brightness(94%) contrast(91%);
    /*filter: invert(1) brightness(2);*/
    margin-top: 10px;
}
.translate  {
    font-weight: 600;
    margin-top: 10px;
    display: block;
    width: fit-content;
}
#navbarSupportedContent li:hover .menu__img {
    /*background: #a3c030;*/
}
#navbarSupportedContent li:hover img {
    /*filter: invert(1) brightness(2);*/
    filter: brightness(0) saturate(100%) invert(71%) sepia(56%) saturate(1269%) hue-rotate(356deg) brightness(95%) contrast(95%);

}
@media (max-width: 991px) {
    .custom-nav {
        position: fixed;
        top: 0;
        left: -250px; /* Initially hidden */
        width: 250px;
        height: 100vh;
        background: #fff;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease-in-out;
        padding-top: 50px;
        display: flex;
        flex-direction: column;
    }

    .custom-nav.show {
        left: 0;
    }

    .navbar-toggler {
        z-index: 1001;
    }

    .navbar-toggler:focus {
        outline: none;
    }

    .navbar-nav {
        flex-direction: column;
        padding-left: 10px;
    }

    .navbar-nav .nav-item {
        padding: 10px 0;
    }

    .navbar-nav .nav-link {
        font-size: 18px;
    }
}

/**** Responsive  ****/
@media(max-width : 991px)  {
    .notificatio_menu  {
        margin-right: 54px;
    }
    .banner h1 {
        font-size: 30px;
    }
    .position__relative  {
        display: none;
    }
    .d-grid {
        display: flex;
        justify-content: center;
    }
    .logo_width {
        width: 37%;
    }
    .banner_large {
        padding: 26px 15px !important;
    }
    .banner {
        min-height: auto;
    }
    .audio-style2 {
        width: 100% !important;
    }
    .podcast-style2 {
        padding: 20px 8px !important;
        width: 100% !important;
    }
    .iq-top-navbar .navbar {
        display: flex !important;
    }
    .podcast-shape img {
        display: none;
    }
    .podcast-style2 .podcast-title {
        margin-bottom: 14px !important;
    }
    .navbar-list {
        float: left;
    }
    .navbar-list li > a > img {
        width: 34px;
        height: 34px;
        padding: 3px;
    }
    .navbar-list li:last-child>a {
        padding-right: 5px;
    }
    .navbar-collapse {
        top: 84px !important;
        padding: 5px 10px;
    }
    .navbar-list li>a {
        padding: 0 5px;
        min-height: 35px;
        height: auto;
        line-height: normal;
    }
    .iq-top-navbar, body.sidebar-main .iq-top-navbar {
        padding: 0 0px !important;
    }
    .iq-top-navbar .navbar-toggler {
        right: 8px !important;
    }
    .iq-top-navbar .navbar-toggler, .iq-top-navbar .iq-navbar-custom .iq-menu-bt {
        top: 30px !important;
    }
    .navbar-toggler-icon {
        width: 1em;
        height: 1em;
    }
    .grid1 {
        margin-bottom: 30px;
    }
    #navbarSupportedContent .navbar-list li>a {
        padding: 0 0px;
    }
    .nav-item span.dots, .nav-item span.count-mail  {
       display: none;
    }
    .iq-top-navbar .navbar  {
        padding: 16px 12px !important;
        justify-content: space-between;
    }
    .navbar-left  {
        width: 45%;
    }
    .navbar-left img  {
        width: 100%;
        padding-right: 10px;
    }
    #navbarSupportedContent {
        justify-content: space-between;
        width: 60%;
        align-items: center;
        background: #111;
    }
    .offcanvas-body  {
        width: 100%;
    }
    .main_menu {
        margin-left: 0;
        width: 100%;
    }
    .menu__img {
        width: 100%;
        height: 100%;
        background: unset;
        padding: 0px !important;
        justify-content: unset;
        display: flex;
    }
    .main_menu li {
        margin-top: 14px;
        margin-left: 9px;
        margin-right: 0px;
    }
    .main_menu li i {
        padding: 7px;
    }
    .navbar-list li>a {
        font-size: 15px;
    }
    .profile_head {
        background: transparent;
    }
    .notificatio_menu  {
        margin-top: 12px;
    }
    .notificatio_menu li  {
        padding: 3px;
    }
    .profile_btn {
        padding: 12px 40px;
    }
    .banner-carousel .banner-content {
        max-width:100%;
        padding: 18px 18px 30px;
    }
    .banner-carousel .banner-content h1 {
        font-size: 34px;
        line-height: 46px;
    }
    .banner-carousel .banner-slide {
        height: 480px;
    }
    .owl-carousel .owl-nav .owl-prev  {
        left: 2px;
    }
    .owl-carousel .owl-nav .owl-next {
        right: 2px;
    }
    .roula_semibanner {
        background-size: 100% 285px !important;
        height: auto;
    }
    .roula-semi-txt {
        width: 100%;
        padding: 28px 12px;
    }
    .daawa_bite_list_pad {
        padding: 20px 20px;
    }
    .time-details {
        margin: 0 29px !important;
        font-size: 16px;
    }
    .tribe-events-venue-details  {
        font-size: 16px;
    }
    .my-icf-para  {
        margin-bottom: 10px !important;
    }
    .menu__txt {
        margin-top: 13px;
        font-size: 14px;
        margin-left: 10px;
        /* color: #fff;*/
        color: #a3c030;
    }
    .menu__img img {
        width: 19%;
        padding: 0px;
        height: 56%;
        text-align: center;
        /* filter: invert(1);*/
        filter: invert(75%) sepia(64%) saturate(535%) hue-rotate(28deg) brightness(92%) contrast(86%);
        margin-top: 10px;
    }
    .notification {
        font-size: 18px;
        margin-top: 6px;
        display: block;
        margin-right: 6px;
    }
    .notification_count {
        height: 15px;
        width: 15px;
        font-size: 9px;
        top: 0px;
        right: 0px;
        padding: 2px 3px;
        text-align: center;
        line-height: 10px;
    }
    .dashboard__height {
        height: unset;
    }
}
@media(min-width : 992px)  {
    .notification_head_icon  {
        display: none;
    }
}

@media (max-width: 991px) {
    .navbar-collapse {
        background: white;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 1000;
        padding: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-nav {
        flex-direction: column;
        text-align: center;
    }

    .navbar-toggler {
        border: none;
        outline: none;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }
    .activities a{
        color: #a3c030 !important;
    }
    
}
.main-menu .nav-item{
        width: 78px;
    height: 78px;
    background: #fff;
    border-radius: 39px;
    }
    .main_menu .nav-item {
    margin: 0 5px; /* add space left & right */
}
.profile-initials {
    width: 36px;
    height: 36px;
    background-color: #a3c030;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-weight: bold; */
     font-size: 14px !important; 
    color: #fff;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .main-menu .nav-item {
     width: unset !important; 
     height: unset !important; 
     background: unset !important; 
    border-radius: 39px;
}

/* wrapper is inline-block so it centers itself inside the text-center container */
.password-wrapper {
    /*display: inline-block;*/
    position: relative;     /* required for absolute eye */
    margin-top: 7px;
    font-size: 26px;
    line-height: 1;         /* prevent extra vertical gap */
    padding-right: 0px;    /* reserve space on the right so absolute icon doesn't overlap page flow */
    vertical-align: middle;
    padding-left: 10px;
}
 
/* inner block holds the password text and keeps it inline-block for stable vertical alignment */
.pw-inner { 
    display: inline-block;
    vertical-align: middle;
}
 
/* each text item */
.pw-text {
    display: inline-block;
    letter-spacing: 3px;
    vertical-align: middle;
}
 
/* eye icon positioned absolutely to the right of the wrapper */
.pw-eye {
    position: absolute;
    right: 8px;              /* adjust this to move icon further right/left */
    top: 47%;
    transform: translateY(-50%);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
 
/* ensure the SVG aligns perfectly */
.pw-eye svg {
    display: block;
    vertical-align: middle;
}
.reset-btn {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #333;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: 0.3s;
}

.reset-btn i {
    font-size: 18px;
    margin-right: 6px;
    vertical-align: middle;
}

.reset-btn:hover {
    background: #f5f5f5;
    border-color: #000;
    color: #000;
}