@font-face {
        font-family: "noor_bold";
        src: url(../../fonts/noor-Bold.ttf);
    }
    @font-face {
        font-family: "noor_light";
        src: url(../../fonts/noor-Light.ttf);
    }
    @font-face {
        font-family: "noor_regular";
        src: url(../../fonts/noor-Regular.ttf);
    }
	.border_r_s{
	    border-top-right-radius: 0px !important;
        border-right: 0px !important;
        border-bottom-right-radius: 0px !important;
        text-align:center !important;
	}
	.border_r_i{
	        border-top-left-radius: 0px !important;
            border-bottom-left-radius: 0px !important;
	}
	
	.banner_img{
	    max-width:75%;
	}
	
	.zaka_conatiner{

		padding: 36px;
		border:1px solid #D7D7D7D7;
		border-radius: 15px;
		background-color:#fff;
		
	}
	.zaka_div_container{
		justify-content: space-evenly;
	}
	.zaka_div{
		height: 165px;
		padding: 16px;
		border-radius: 8px;
		border: 1px solid #FFCD50;
		background-color:#fffbf4;
		
		text-align:center;
	}
	.zaka_div .sub_title{
		 font-family: "noor_bold";
		font-size: 16px;
		font-weight: 700;
		text-align: center;
		color:#1E1E1E;

	}
	.zaka_div a{
		text-decoration:none;
		width:100%;
		height:100%;
		display:block;
		text-align:center;
		
	}
	.zaka_div:hover{
		border:0px;
		border-bottom: 5px solid #C08A1A;
		background-color:#FFCD50;
	}
	.zaka_img{
		height:90px;
		width:auto !important;
		display: inline-block !important;
	}
	
	
	.login_btn, .donate{
		padding: 17px 0px !important;
	}
	.fixed > .row {
	  width: 95% !important;
	}
	.fixed .top_cart{
		top:2px !important;
	}
	.donate_now{
		background-color: #e00570;
		color: #FFF !important;
		height: 42px;
		display: inline-block;
		padding: 0 20%;
		margin-bottom: 0;
		font-size: 13px;
		font-weight: 400;
		line-height: 42px !important;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-image: none;
		border: none;
		border-radius: 8px !important;
		position: absolute;
		bottom: -18px;
		left: 20%;
	}
	
	.quran{
		    margin: 7em auto 4em auto;
	}
	.img_container{
		width:100%;
		min-height:171px;
		background-size:cover;
		background-position:center;
	}
	.ramadan_project{
		position: relative;
		top: 60px;
		/* min-height: calc(100vh - 350px); */
		background-color: #f1efe9;
		border-radius: 20px;
		width:90%;
		margin-left:auto;
		margin-right:auto;
		padding:10px 20px;
		font-family: noor_bold;
	}
	.blue_khair{
		color:#203f81;
	}
	.yellow_khair{
		color:#d1b159;
	}
	.text-bold{
		font-weight:bold;
	}
	.big_title{
		font-size:26px;
	}
	.second_title{
		font-size:14px;
		margin-top:10px;
		margin-bottom: 10px;
	}
	.lamp{
		top:60px;
		right:20px;
		position:absolute;
		z-index:1000;
	}
	.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
		background: #203f81 !important;
	}
	.donate_box select,.donate_box input{
		
		margin:5px 0px;
		border-radius:20px;
		border-color:#203f81;
		color:#203f81;
		font-weight:bold;
		text-align:Center;
		font-size:1em;
		
	}
	.donate_box .donate_btn{
		border-radius:20px;
		background-color:#db0000;
		font-weight:bolder;
		color:#fff;
		font-size:1em;
		margin-top: 5px;
    width: 50%;
	}
	
	.donate_box select:focus{
		background-color:#203f81;
		color:#d1b159;
	}
	
	.donate_box select:focus option{
		background-color:#fff;
		color:#203f81;
	}
	.donate_box  select option:hover{
		background-color:#d1b159;
		color:#203f81;
	}
	.add_to_card{
		font-size:2em;
		    position: relative;
		top: 9px;
	}
	
	.ramadan_project .form-check-label {
		position: relative;
		top: -0.3em;
		right: 0.3em;
	}
	.form-check-input {
		margin-right: -1.25rem;
	}
	.currency_symbol{
		position:relative;
		top:12px;
		font-weight:bold;
	}
	.donation-now-label.active .dontation-main-box{
		
		text-align:right;
	}
	.alert-msg{
		color: #333;
		background-color: #F5DE1C;
		border-color: #F5DE1C;
		font-weight:bold;
	}
	
	
	 /*
        donation-now-label
    */
	  .dontation-main-box{
        max-width: 722px;
        width: 100%;
        min-height: 185px;
        background: #DDE5F6;
        padding: 27px 33px;
        border-radius: 13px;
    }
    .donation-now-label{
        position: fixed;
        top: 60%;
        right: 0;
        display: flex;
        align-items: flex-end;
        z-index: 5;
    }
    [dir="ltr"] .donation-now-label{
        right: auto;
        left: 0;
    }
    
    .donation-now-label .content{
        width: 43px;
        height: 228px;
        position: relative;
        display: block;
        z-index: 2;
        cursor: pointer;
        background: #001D35;
        box-shadow: 0px 8px 14px #4872CA38; 
        border-start-end-radius: 45px;
        border-end-end-radius: 45px;
        transition: all .3s ease;
    }
    .donation-now-label .content .title{
        writing-mode: vertical-rl;
        transform: rotate(-180deg);
        margin-top: 50px;
        margin-bottom: 30px;
        margin-block-start: 10px;
        color: #EBD305;
        font-size: 20px;
        font-family: "noor_bold";
    }
    [dir="ltr"] .donation-now-label .content .title { 
        margin-block-end: 3px;
    }
    .donation-now-label .content .shap{ 
        display: inline-block;
        background-color: #fff;
        padding: 10px;
        border-end-end-radius: 50px;
        border-start-end-radius: 50px;
        padding-inline-start: 20px; 
        transition: all .3s ease;
    }
    .donation-now-label .content .shap .icon{
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #EBD305;
        transition: all .3s ease;
    }
    .donation-now-label .content .hand-holding-heart{
        font-size: 50px;
        display: none;
        color: #EBD305;
    }
    .donation-now-label .dontation-main-box{
        position: fixed;
        right: -100%;
        transition: all .3s ease;
        margin-top: 0;
        background-color: #203f81;
        color: #fff;
        padding: 1rem 2rem;
        padding-inline-start: 100px;
    }
    .donation-now-label .dontation-main-box .form-check-label { 
        color: #fff; 
        font-size: 14px;
    }
    .donation-now-label .dontation-main-box .count-hint { 
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 0;
    }
    [dir="ltr"] .donation-now-label .dontation-main-box{
        right: auto;
        left: -100%;
    }

     
    .donation-now-label.active .content{
        width: 169px;
    }
    .donation-now-label.active .content .title{
        writing-mode: inherit;
        text-align: center;
        margin-top: 2rem;
        transform: none;
        margin-bottom: 0;
    }
    .donation-now-label.active .content .pic{
        display: block;
        margin: auto;
    }
    .donation-now-label.active .content .shap{
        padding-inline-start: 100px;
    }
    .donation-now-label.active .content .hand-holding-heart{
        display: block;
        margin: 1rem 0;
        text-align: center;
    }
    .donation-now-label.active .dontation-main-box{ 
        right: 100px;
    }
    [dir="ltr"] .donation-now-label.active .dontation-main-box{
        right: auto;
        left: 1%;
    }
	
	.form-check-input{
        width: 20px;
        height: 20px; 
    }
    .form-check-input:checked {
        background-color: #01D48E;
        border-color: #01D48E;
    }
	
	.count-card{
        display: flex;
        align-items: center;
        margin: auto;
        max-width: 162px;
        background-color: #fff;
        border-radius: 15px;
        justify-content: space-between;
        padding: 8px 6px;
        margin-top: 20px;
        margin-bottom: 10px;
    } 
    .count-card .counter-value {
        min-width: 45px;
        border-radius: 0px !important;
        text-align: center;
        border: none;
        pointer-events: none;
        font-family: "noor_bold";
        font-size: 16px;
        color: #001D35;
    }
    .count-card .btn-count {
        min-width: 30px;
        width: 30px;
        height: 30px;
        background: #F5DE1D;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: all .3s ease;
    }
    .count-card .btn-count:hover,
    .count-card .btn-count:focus{ 
        background: #12203F; 
        color: #fff;
    }
    .count-hint{
        font-size: 12px;
        color: #12203F;
        font-family: 'noor_bold';
    }

    .dontation-main-box{
        margin-top: 50px;
    }
    .dontation-main-box .form-label{
        font-family: "noor_bold";
        margin-bottom: 16px;
    }
    .dontation-main-box .form-check-label{
        font-family: "noor_light";
        margin-inline-start: .5rem
    }
	.form-check-label {
    font-weight: bold;
	}

	.input-group>.form-control:not(:last-child) {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: .25rem;
		border-bottom-right-radius: .25rem;
	}
	.inline_currency_id{
		border-top-right-radius: 0rem;
		border-bottom-right-radius: 0rem;
	}
	.dontation-main-box{
		border:1px solid;
	}

    .dontation-main-box .dontation-cost{
        background-color: #fff;
        min-width: 120px;
        width: 120px;
        height: 45px;
        border-radius: 10px;
        font-size: 20px;
        color: #1A356E;
        font-family: "noor_bold";
        margin-bottom: 14px;
        text-align: center;
    }
    .dontation-main-box .btn-dounation{
        min-width: 111px;
        height: 52px;
		vertical-align: bottom;
        background: #F5DE1D;
        border-radius: 10px;
        transition: all .3s ease;
		color:rgb(26, 53, 110);
    }
    .dontation-main-box .btn-dounation:hover{
        color: #fff;
        background-color: #1A356E;
    }
	
	.dontation-main-box .add_to_Cart {
		position: relative;
		top: 0%;
		background: #F5DE1D;
		height: 52px;
		padding: 16px 12px;
		border-radius: 8px;
		line-height: 10px;
		border: 1px solid #001D3542;
	}
	
	/*************** end **********/ 
	
	
	/********* slider ************/
	
		.Classification{
			padding:0px 12px;
			Height:18px;
			border-radius:12px;
			background-color:#FFDAD9;
			position:absolute;
			top:16px;
			right:16px;
			font-size:13px;
			font-weight:500;
			border:0.5px solid #981F41;
			line-height:12px;
			text-align:center;
		}
		
		[dir="ltr"] .Classification{
			left:16px;
			right:auto;
		}
		.slide_card .inner_content{
			padding:16px;
		}
		
		
		.slide_card .title{
				text-align:right;
				font-Weight:700;
				font-Size:18px;
			
		}
		.slide_card .title a{
			color:#1C1C1C;
		}
		[dir="ltr"] .slide_card .title{
				text-align:left;
		}
		.donation_box_container{
			border:1px solid #D0D5DD;
			border-radius:8px;
		
			
		}
		.do_btn{
			background-color:#2F64D3;
			border:1px solid #3E82EE;
			border-radius:8px;
			padding:0px;
			color:#fff;
			text-align:center;
			font-Weight:600;
			font-Size:14px;
			line-height: 40px;
		}
		.donation_amount{
			background:none;
			border:none;
			outline:none;
		}
		.donation_amount:focus{
			background:none;
			border:none;
		}
		.progress{
			width: 100%;
			margin: 20px auto;
			display: block;
			height: 8px;
			border-radius: 4px;
			background: #EAECF0;
		}
		.progress .progress-bar_general_box{
			background: transparent linear-gradient(90deg, #4766B5 0%, #87A5FB 100%) 0% 0%;
		}
		.total{
			font-Weight:700;
			font-Size:16px;
			float:right;
			color:#1E1E1E;
		}
		.remain{
			font-Weight:400;
			font-Size:14px;
			float:left;
			color:#1E1E1E;
		}
		
		.slide_card .main_img{
			border-radius:8px;
		}
		.slide_card {
			position:relative;
		  border:1px solid #D7D7D7;
		  border-radius:8px;
		

		}
		.slide_card  .add_to_card{
			color:#272727;
		}
		.add_to_cart_container{
			padding: 9px ;
			border: 1px solid #D0D5DD;
			border-radius: 8px;
			text-align: center;
			margin-right: 4px;
		}
		[dir="ltr"] .add_to_cart_container{
			margin-left: 4px;
			margin-right: 0px;
		}
		.title{
			font-size:20px;
			    font-family: noor_bold;
		}
		
		#contact_us{
				margin-top:0px;
		}
		
		.donation_box_container .currency_id {
			text-align: center;
			background: transparent linear-gradient(180deg, #4766B5 100%, #87A5FB 0%) 0% 0%;
			color: #fff;
			height: 100% !important;
			padding: 0px;
			border: none;
			font-weight: bold;
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
		}
		[dir="ltr"] .donation_box_container .currency_id {
			border-top-right-radius: 0.25rem;
			border-bottom-right-radius: 0.25rem;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
		}
		
		.donation_box_container .currency_id option{
			background: #2F64D3;
			color: #fff;
		}
		
		.add_to_cart_container {
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
		}
		.add_to_Cart{
			cursor:pointer;
		}
		[dir="ltr"] .add_to_cart_container{
			border-top-right-radius: 0rem;
			border-bottom-right-radius: 0rem;
			border-top-left-radius: 0.25rem;
			border-bottom-left-radius: 0.25rem;
		}
		.do_btn{
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
		}
		[dir="ltr"] .do_btn{
			border-top-right-radius: 0.25rem;
			border-bottom-right-radius: 0.25rem;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
		}
		.add_to_cart_container:hover path{
			fill: #2F64D3;
		}
		.add_to_Cart_icon{
			top:5px; 
			height:51px;
		}
		.close{
			position:absolute;
			top: -13px;
			background: #F5DE1C;
			color: #fff;
			border-radius: 50%;
			padding: 5px;
			width: 31px;
			text-align: center;
			line-height: 6px;
			cursor: pointer !important;
			opacity: 1;
			z-index: 111;
			font-size: 20px;
		}
		.inline_currency_id{
			padding:0px;
		}
		.close:hover{
			background: #db0000;
			color: #fff;
			opacity: .9;
		}
		[dir="rtl"] .close{
			left:-5px;
		}
		[dir="ltr"] .close{
			right:-5px;
		}
		.container_project>.title{
			text-align:right;
			padding:20px;
		}
		.sp{
			background: #EBD305;
			width: 80px;
			height: 3px;
			margin-top: 5px;
		}
		[dir="ltr"] .container_project>.title{
			text-align:left;
		}
		.container_project>.title a{
			color:#EBD305;
		}
		@media (min-width: 1200px) {
		  .swiper-wrapper {
			width: auto;
			row-gap: 30px;
		  }
		}
		@media (max-width: 1199.98px) {
		  .swiper-wrapper.row {
			--bs-gutter-x: 0;
		  }
		}

	/*******************************/
	@media screen and ( min-width:1200px){
		.swiper-wrapper{
			transform:translate3d(0px, 0px, 0px) !important;
		}
		
	}
	@media screen and ( max-width:991px) and (min-width:768px){
		
		.ramadan_project{
			width:70% !important;
		}
		.donation-now-label.active .dontation-main-box {
			right: 73px;
		}
	}
	@media screen and ( min-width:991px){
	    
		.ramadan{
				background:url('../../img/ramadan/2024/rm_bg1.jpg') no-repeat; 
				background-size: cover;
				height:100vh;
				width:100%;
				
		}
		
		.dontation-main-box .add_to_Cart_icon {
		    border-top-right-radius: 0px !important;
			border-bottom-right-radius: 0px !important;
		}
		.don_btn {
			border-top-left-radius: 0px !important;
			border-bottom-left-radius: 0px !important;
		}
		
	}
	@media screen and ( min-width:768px){
		.slide_card .title a {
			display:block;
			min-height: 81px;
		}
		
		
	}
	@media screen and ( max-width:767px){
	    	.banner_img{
        	    max-width:100% !important;
        	}
        	
        	
		.donation-now-label{
		    top:100%;
		}
		.container_project{
			    position: relative;
				padding-bottom: 15px;
		}
		.swiper-horizontal{
				padding-bottom: 20px !important;
		}
		.swiper-pagination{
			top:92% !important;
			bottom:0px !important;
		}
		.owl-nav,.owl-dots{
			margin:auto;
		}
		.zaka_conatiner{
			padding:8px;
		}
		.donation-now-label {
			    bottom: 0px;
		}
		.donation-now-label.active .dontation-main-box {
				right: 1%;
				width: 96%;
				
				margin: auto;
				top: 11%;
				max-height: 100vh;
		}
		.donation-now-label .dontation-main-box{
			padding:10px;
			
		}
		.donation-now-label.active .content .title{
			margin-top:0px;
		}
		.donation-now-label .content{
			    width: 80px !important;
				height: 80px !important;
				border-radius: 50%;
				padding: 12px;
				font-weight: bold;
				right: 10px;
                bottom: 10px;
		}
		[dir="ltr"] .donation-now-label .content .title{
		    font-size:17px;
		    text-align:Center;
		}
		.donation-now-label .content .title{
			    transform: none;
				writing-mode: horizontal-tb;
				    text-align: center;
		}
		.donation-now-label .content .shap{
			display:none;
		}
	}
	
	@media screen and ( max-width:991px){

		
	
		.fixed {
		  bottom: inherit !important;
		  top: 0px !important;
		}
		.fixed .navbar .logo_banner {
		  display: block !important;
		}
		.fixed .top_login {
		  display: none !important;
		}

		.fixed .header_logo {
			width: 87px;
			
		}
		.fixed{
			padding: 10px 5px !important;
		}
		.navbar-toggler{
			    border-color: #fff !important;
		}
		.ramadan{
				background:url('../../img/ramadan/2024/rm_m_bg1.jpg')  no-repeat; 
				background-size: cover;
				height:100vh;
				width:100%;
				
		}
		.ramadan_project{
			top:0px;
			
			padding:10px;
		}
		.quran {
			margin: 5em auto 0em auto;
		}
		.second_title {
			font-size: 1em;
			margin-top: 8px;
			margin-bottom: 8px;
		}
	}

	
	@media screen and ( max-width:650px){
		.dontation-main-box .add_to_Cart{
			margin-right: 7px;
		}
		.add_to_Cart_icon{
			top:0px;
		}
		.don_btn{
			padding:0px !important;
			font-weight:bold;
		}
		.dontation-main-box .add_to_Cart svg{
			
		}
		
		.donation-now-label.active .dontation-main-box{
			top:21%;
		}
		.donation-now-label .dontation-main-box .form-check-label{
			font-size:13px !important;
		}
		.center_div{
			margin-top:-30px;
		}
		
		.fixed .divider-vertical {
				display: none !important;
		}
		
		.navbar-toggler-icon {
			width:1em;
			height:1em;
		}
		.navbar-toggler {
			padding: 0.15rem 0.45rem;
		}
		.fixed .top_cart {
			top: 0px !important;
		}
		.fixed .top_cart {
			font-size: 28px;
		}

	}
	
	@media screen and ( max-width:360px){
		.quran{
			width:200px;
		}
		.donation-now-label.active .dontation-main-box{
			top:13%;
		}
	}
	@media screen and ( max-width:650px) and  (orientation: landscape){
		.ramadan_project{
			width:55%;
			margin-top: 7%;
			
		}
		.donation-now-label .content{
			width:136px !important;
		}
		.ramadan{
			height: calc(100vh + 8%);
		}
		.quran{
			width:200px;
		}
	}