:root {
	--shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
$main_color : #00A651;
$low_opacity :  #75daa6;
$color_white : #fff;
$color_black : rgb(0, 0, 0)212;
$button-bg: #00A651;
$reviews-star-icon-color:#ffae4f;
$text-color-gray:rgb(70, 67, 67);
$button-text-color:white;
$radius-size:5px;
$background-color-crimson: #00A651;
$background-color-white:white;
$background-gradient-color:linear-gradient( #00A651, #0e3667);
$text-color-crimson: #00A651;
$text-hover-color-crimson: #00A651;
$border-color-crimson: #00A651;
$border-color-low: #00A651;
$bar-line-bg: #00A651;
$border-color-white: #00A651;
$text-hover-color-white:white;
$background-color-white:white;
$background-color-deep-crimson: #1f4775;
$background-color-light-crimson: #00A651;
$background-color-one-opacity:rgba(220,20,60,0.05);
$background-color-black:black;
$logo-text-color:#019DEC;
$box-shadow-color: #8098b5;
$text-color-black:#1f1e1e;
$text-color-white:white;
$text-color-light-crimson: #00A651;
$menu-items-plus-bg-color:white;
$menu-item-text-color:white;
$mobile-menu-bg-color:black;
$closed-icon-bg-color:white;
$icon-color: #00A651;
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style: none;
	list-style-type: none;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}


html {
	font-size: 100%;
	box-sizing: inherit;
	scroll-behavior: smooth;

}
@media print {
    html, body {
       display: none;  /* hide whole page */
    }
}
html,body {
	font-family: 'Tiro Bangla', serif;
	
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: $text-color-black;
	background:$background-color-white;
	-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}


.error_contact{
	border:1px solid #00A651 !important;
}
.active-page{
	color:$text-color-crimson !important;
}

.active-plus-color::before,.active-plus-color::after{
	background-color: $background-color-light-crimson !important;
}
a,
button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	cursor: pointer;
	border: none;
	outline: none;
	background: none;
}

img,
video {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

img {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}










// header top section start 
//header topbar start
.top_bar{
	background-color: $main_color;
}
.topHeader{
	width:100%;
	height:40px;
	background:$main_color;
	position:relative;
	line-height:40px;
	
}
.topHeader marquee a{
	color: $color_white!important;
}
.topHeader marquee a:hover{
	text-decoration:underline;
}
.topHeader::after{
	content:"নোটিশ";
	position:absolute;
	width:100px;
	background: $main_color !important;
	top:0;
	left:0;
	border-right:4px solid $color_white;
	/* border-bottom:4px solid #00A651; */
	text-align:center;
	box-shadow:2px 1px 11px 0px  $color_black ;
	color:$color_white
}
.top_bar .top_bar_row{
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
line-height:40px;
}
.top_bar .top_bar_row .p_e{
    display: flex;
    gap: 15px;
    padding-right: 5px;
	padding-top: 2px;
	background-color: #00A651;
}
.p_e .email::after{
	content: "";
	position: absolute;
	height: 28px;
	width: 2px;
	background-color:  transparent !important;
	margin-left: -9px;
	margin-top: 5px;
}
.p_e .common{
    display: flex;
    gap: 8px;
}
.p_e .common .icon_box{
    height: 38px;
    width: 38px;
    background-color: $color_white !important;
    border-radius: 5px;
    position: relative;
}
.p_e .common .icon_box i{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
color: $main_color;
font-size: 20px;
}
// header topbar end
// header mainbar start
.headerMainbar{
	position: relative;
    /* padding: 10px 20px; */
    height: 75px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 30px;
	color:$color_white;
	max-width: 1100px;
	margin: 0 auto;
}
.headImg img{
	width:400px;
	height:80px;
	object-fit:contain;
	transition:1s;
}
.headerMainbar .col a{
	color:$color_white;
}

.headerMainbar .socialIcon a{
	border-radius:4px;
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	background:$main_color;
	color: $color_white !important;
	display:inline-block;
	font-size:22px;
	transition:0.5s;
    text-decoration: none;
}
.headerMainbar .socialIcon a i{
	transition:.5s;
}
.headerMainbar .socialIcon a:hover i{
	transform:rotate(-360deg);

}
.headerMainbar .socialIcon .donate_btn{
	border-radius:4px;
	width:100px;
	height:36px;
	text-align:center;
	line-height:40px;
	background:$main_color;
	color: $color_white !important;
	display:inline-block;
	font-size:22px;
	transition:0.5s;
    text-decoration: none;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
}
// header mainbar end
// header top section end 
//navbar start 

.header {
	z-index: 1436 !important;
		.container-menu-top {
			max-width: 1300px;
			padding-right: 15px;
			padding-left: 15px;
			margin-right: auto;
			margin-left: auto;
		}
	
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 100;
	margin: 0 auto;
	padding: 10px 0px;
	background: $background-color-white;
	box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.3);
	&.sticky{
		position: fixed;
		margin-top: -10px;
		background: $background-color-white;
		box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
		transition:.5s;
		padding: 15px 0px;
		z-index: 1436 !important;
	}

	.wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 2rem;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 5px 0;
		.logo-part .logo-img{
			display: none;
		}
	}

	.menu {
		> .menu-item {
			position: relative;
			display: inline-block;
			margin: 0 0.75rem;

			> a {
				display: block;
				font-family: inherit;
				font-size: 1rem;
				font-weight: 500;
				line-height: inherit;
				padding: 1rem 0;
				border: none;
				outline: none;
				color: $text-color-black;
				text-transform: capitalize;
				transition: all 0.35s ease;

				.expand {
					position: relative;
					display: inline-block;
					width: 0.75rem;
					height: 0.75rem;
					margin-left: 0.35rem;
					pointer-events: none;
					border: none;
					outline: none;

					&:before,
					&:after {
						position: absolute;
						box-sizing: inherit;
						content: '';
						top: 50%;
						left: 50%;
						width: 100%;
						height: 2px;
						background:$background-color-black;
						transform: translate(-50%, -50%);
						transition: all 0.35s ease;
					}
				}
			}

			&:hover {
				> a {
					color: $text-hover-color-crimson;
					.expand {
						&::before,
						&::after {
							background: $text-hover-color-crimson;
						}
					}
				}
			}

			> {
				a .expand {
					&::after {
						transform: translate(-50%, -50%) rotate(-90deg);
					}
				}

				.sub-menu {
					> .menu-item {
						> a:hover {
							color: $text-hover-color-crimson;
						}
					}
				}
			}

			> .sub-menu {
				position: absolute;
				top: 100%;
				left: -1rem;
				width: 13rem;
				height: auto;
				padding: 0.75rem 0;
				border: none;
				outline: none;
				opacity: 0;
				visibility: hidden;
				border-top: 3px solid $border-color-crimson;
				background: $background-color-white;
				box-shadow: var(--shadow-medium);
				transform: translateY(1rem);
				transition: all 0.35s ease;

				> .menu-item {
					display: block;
					> a {
						display: block;
						font-family: inherit;
						font-size: 1rem;
						font-weight: 500;
						line-height: inherit;
						padding: 0.5rem 1.25rem;
						color: $text-color-black;
						text-transform: capitalize;
						transition: all 0.35s ease;
					}
				}
			}
		}
	}

	.burger {
		position: relative;
		cursor: pointer;
		display: none;
		width: 1.75rem;
		height: 1rem;
		margin-top: -0.25rem;
		outline: none;
		opacity: 0;
		visibility: hidden;
		background: none;
		transform: rotate(0deg);
		transition: all 0.35s ease;
		left:-15px !important;

		&-line {
			position: absolute;
			display: block;
			width: 100%;
			height: 2px;
			left: 0;
			border: none;
			outline: none;
			opacity: 1;
			border-radius: 0.25rem;
			background: $bar-line-bg;
			transform: rotate(0deg);
			transition: all 0.25s ease;

			&:nth-child(1) {
				top: 0;
			}

			&:nth-child(2),
			&:nth-child(3) {
				top: 0.5rem;
			}

			&:nth-child(4) {
				top: 1rem;
			}
		}
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 100;
		opacity: 0;
		visibility: hidden;
		background: rgba(0, 0, 0, 0.65);
		transition: all 0.35s ease;
	}
}
// navbar end
// body container start
.body_container{
	background-image: url('../images/website\ bg-madrasha.png');
	background-repeat: no-repeat;
	background-size: cover;
}
// body container end 
//notice section start
.notice_container{
	max-width:1100px;
		margin:0 auto;
	padding:20px;
	height:600px;
	
	.title{
		width:100%;
		margin:0 20px;
		color:#fff;
		position: relative;
		overflow: hidden;
		border-radius:3px;
		margin: 0px 0px 15px 0;
		padding: 8px;
		box-shadow: inset 0px 0px 5px #a2b6c7;
		font-size: 18px;
		font-weight: bold;
		z-index: 1;
}
.title::after{
position: absolute;
content: "";
top: 0;
left:-23px;
background-color: $main-color;
width:120%;
height: 100%;
transform: skewX(-30deg);
transition: all 1.5s;
z-index: -1;

}
	.notice_table{
		

		table{
			width: 100% !important;
			border-color:#9797971c;
			margin-bottom: 20px;
			tr{
				td{
					padding:6px;
					.btn{
						display: inline-block;
						background:$main-color;
						
						padding:10px;
						color:#fff;
						border-radius:4px;
					}
				}
			}
		  }
	}
}
// notice end
// main body start 
@import url('https://cdn.rawgit.com/sh4hids/bangla-web-fonts/bensen-handwriting/stylesheet.css');/* font-family: 'BenSenHandwriting';*/
@import url('https://fonts.googleapis.com/css?family=Hind+Siliguri');/* font-family: 'Hind Siliguri', sans-serif;*/
@import url('https://cdn.rawgit.com/sh4hids/bangla-web-fonts/lal-sabuj-normal/stylesheet.css');/*font-family: 'LalSabujNormal';  */
.main_body_container{
	width: 80%;
	margin: 0 auto;
	background-color: $color_white;
	box-shadow:  1px 15px 59px 6px rgba(0, 0, 0, 0.2);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	padding-bottom: 20px;
	.head-title{
		font-family: 'BenSenHandwriting';
		font-size: 45px;
		font-weight: 500;
		text-align: center;
		padding: 8px 0px;
		background-color: $main_color;
		color: $color_white;
	}
	.main_body_row{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px;
		// left side start 
    .left_side{
		//  institute introduction start 
		.institute_introduction{
			margin-top: 10px;
			.title{
				width: 240px;
				padding: 10px 0px;
				background-color: $main_color;
				text-align: center;
				margin: 0 auto;
				font-size: 24px;
				color: $color_white;
				font-family: 'Hind Siliguri', sans-serif;
			}
			.details{
				margin: 10px auto;
				width: 430px;
				ul{
					list-style: decimal;
					li{
						margin-bottom: 8px;
						font-family: 'LalSabujNormal';  
						font-size: 22px;
						font-weight: lighter;
					}
				}
			}
		}
		// institute introduction end 
		// goal_objectives start
        .goal_objectives{
			.title{
				width: 100%;
				padding: 10px 0px;
				background-color: $main_color;
				text-align: center;
				font-size: 24px;
				color: $color_white;
				font-family: 'Hind Siliguri', sans-serif;
			}
			.details{
				padding: 20px;
				width: 100%;
				font-family: 'LalSabujNormal';  
				font-size: 22px;
				font-weight: lighter;
				text-align: justify;
			}
		}
		//goal_objectives end
		//Educational activities ‍start
         .educational_activites{
			.title{
				width: 100%;
				padding: 10px 0px;
				background-color: $main_color;
				text-align: center;
				font-size: 24px;
				color: $color_white;
				font-family: 'Hind Siliguri', sans-serif;
			}
			.details{
				padding: 20px;
				width: 100%;
				font-family: 'LalSabujNormal';  
				font-size: 22px;
				font-weight: lighter;
				text-align: center;
			}
		 }
		//Educational activities ‍start
		// contact start 
		.common_section {
			margin-top: 10px;
			.title{
				width: 100%;
				padding: 10px 0px;
				background-color: $main_color;
				text-align: center;
				font-size: 24px;
				color: $color_white;
				font-family: 'Hind Siliguri', sans-serif;
			}
			ul{
				padding: 0px 5px;
				li{
					width: 100%;
					height: 40px;
					border-bottom: 1px solid #cbcdcf;
					margin: 4px 0;
					padding: 8px;
					a{
						display: block;
						color: $main_color !important;
						.contact{
							margin-right: 10px;
							font-size: 20px;
							color: red;
						}
					}
				}
			}
			iframe{
				padding: 0px 5px;
			}
		}
		//contact end
	}
	// left side end 
	// rigth side start 
     .right_side{
		
		// notice board and important link start 
		.common_section {
			margin-top: 10px;
			.title{
				width: 100%;
				padding: 10px 0px;
				background-color: $main_color;
				text-align: center;
				font-size: 24px;
				color: $color_white;
				font-family: 'Hind Siliguri', sans-serif;
			}
			ul{
				padding: 0px 5px;
				li{
					width: 100%;
					height: auto;
					border-bottom: 1px solid #cbcdcf;
					margin: 4px 0;
					padding: 8px;
					a{
						display: block;
						color: $main_color !important;
						.fa-solid{
							margin-right: 10px;
							font-size: 20px;
							color: red;
						}
						.fa-regular{
							margin-right: 10px;
							font-size: 20px;
							color: red;
						}
					}
				}
			}
			iframe{
				padding: 0px 5px;
			}
		}
		// notice board and important link end 
		// extra part start 
        //   .extra_part_start{
		// 	.extra_part_row{
        //       .extra_part_col{
		// 		display: flex;
		// 		align-items: center;
		// 		.icon{
		// 			width: 200px;
		// 			height: 200px;
		// 			padding: 30px;
		// 		}
		// 	  }
		// 	}
		//   }
		// extra part end 
		// contact info after 991px start 
         .contact_info_problem{
			display: none;
		 }
		// contact info after 991px end

	 }
    // right side end
	}
}
// main body end 
// main body 2 start 
.main_body_2{
	width: 80%;
	margin: 20px auto;
	background-color: $color_white;
	box-shadow:  1px 15px 59px 6px rgba(0, 0, 0, 0.2);
	.title{
		font-family: 'BenSenHandwriting';
		font-size: 45px;
		font-weight: 500;
		text-align: center;
		padding: 8px 0px;
		background-color:$color_white;
		color: $main_color;
	}
	.main_body_2_row{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px;
		background-color: $low_opacity;
		.main_body_2_col{
			.important-content{

				.main-card{
						position: relative;
						display: inline-block;
						margin: 1.875rem 0;
						.content{
							position: relative;
							display: block;
							width: 100%;
							padding: 1rem 1.25rem;
							// after and before bullet style
							ol li{
								padding: 0 0 0 4.375rem;
								margin: .5rem 0;
								font-size: 18px;
								h3{
									color:$text-color-light-crimson;
								}
								p{
									color:$text-color-black;
									text-align: justify;
								}
							}
							ol li:nth-of-type(1) {
								display: inline-block;
								
								
								z-index: 3;
								position: relative;
								&::before{
									position: absolute;
									content: "\261B";
									font-family: "Font Awesome 5 Pro";
									font-size: 2rem;
									width: 3.125rem;
									height: 3.125rem;
									background: $background-color-light-crimson;
									color: #fff;
									display: flex;
									align-items: center;
									justify-content: center;
									left: 0;
									border-radius: 50%;
									z-index: 2;
									box-shadow: 0 0 0.0625rem 0.375rem #dfe7ff;
								}
								&::after{
										position: absolute;
										content: "";
										width: 0.1875rem;
										height: 100%;
										top: 2.5rem;
										left: 1.5625rem;
										background: #dfe7ff;
										z-index: 1;
									 
								}
							  }
							  ol li:nth-of-type(2) {
								display: inline-block;
								
								z-index: 3;
								position: relative;
								&::before{
									position: absolute;
									content: "\261B";
									font-family: "Font Awesome 5 Pro";
									font-size: 2rem;
									width: 3.125rem;
									height: 3.125rem;
									background: $background-color-light-crimson;
									color: #fff;
									display: flex;
									align-items: center;
									justify-content: center;
									left: 0;
									border-radius: 50%;
									z-index: 2;
									box-shadow: 0 0 0.0625rem 0.375rem #dfe7ff;
								}
								&::after{
										position: absolute;
										content: "";
										width: 0.1875rem;
										height: 100%;
										top: 2.5rem;
										left: 1.5625rem;
										background: #dfe7ff;
										z-index: 1;
									 
								}
							  }
							  ol li:nth-of-type(3) {
								display: inline-block;
								
								z-index: 3;
								position: relative;
								&::before{
									position: absolute;
									content: "\261B";
									font-family: "Font Awesome 5 Pro";
									font-size: 2rem;
									width: 3.125rem;
									height: 3.125rem;
									background: $background-color-light-crimson;
									color: #fff;
									display: flex;
									align-items: center;
									justify-content: center;
									left: 0;
									border-radius: 50%;
									z-index: 2;
									box-shadow: 0 0 0.0625rem 0.375rem #dfe7ff;
								}
							  }
						}
				}
			}
		}
	}
}
// main body 2 end
// main body 3 start 
.madrasha_bg_img{
	background-image: url('../images/website\ bg-madrasha.png');
	background-repeat: no-repeat;
	background-size: cover;


.main_body_3{
	width: 80%;
	margin: 20px auto;
	background-color: $color_white;
	box-shadow:  1px 15px 59px 6px rgba(0, 0, 0, 0.2);

	.title{
		font-family: 'BenSenHandwriting';
		font-size: 45px;
		font-weight: 500;
		text-align: center;
		padding: 8px 0px;
		background-color:$main_color;
		color:  $color_white;
	}
	.main_body_3_row{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		margin: 20px 0px;
		padding: 10px 20px;
		.main_body_3_col{
			.img_body{
				width: 300px;
				height: 240px;
				box-shadow:  -1px 1px 59px 6px rgba(0, 0, 0, 0.1);

				.img{
					width: 100%;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.img_title{
					width: 100%;
					height: 40px;
					background-color: $main_color;
					justify-content: center;
					font-family: 'LalSabujNormal'; 
					align-items: center;
					color: $color_white;
					display: flex;
				}
			}
		}
	}
}

}
// main body 3 end 
// main body 3 galary section start 
.main_body_3{
	width: 80%;
	margin: 20px auto;
	background-color: $color_white;
	box-shadow:  1px 15px 59px 6px rgba(0, 0, 0, 0.2);

	.title{
		font-family: 'BenSenHandwriting';
		font-size: 45px;
		font-weight: 500;
		text-align: center;
		padding: 8px 0px;
		background-color:$main_color;
		color:  $color_white;
	}
	.main_body_3_row{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		margin: 20px 0px;
		padding: 10px 20px;
		.main_body_3_col{
			.img_body{
				width: 300px;
				height: 240px;
				box-shadow:  -1px 1px 59px 6px rgba(0, 0, 0, 0.1);

				.img{
					width: 100%;
					height: 200px;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.img_title{
					width: 100%;
					height: 40px;
					background-color: $main_color;
					justify-content: center;
					font-family: 'LalSabujNormal'; 
					align-items: center;
					color: $color_white;
					display: flex;
				}
			}
		}
	}
}
// main body 3 galary section end 
// nurani division start 

.nurani_division_body{
	background-image: url('../images/website\ bg-madrasha.png');
	background-repeat: no-repeat;
	background-size: cover;
	.nurani_division_container{
		width: 80%;
		margin: 20px auto;
		background-color: $color_white;
		box-shadow:  1px 15px 59px 6px rgba(0, 0, 0, 0.2);
		.title{
			font-family: 'BenSenHandwriting';
			font-size: 45px;
			font-weight: 500;
			text-align: center;
			padding: 8px 0px;
			background-color:$main_color;
			color:  $color_white;
		}
		.nurani_division_row{
			display: flex;
			justify-content: space-between;
			gap: 20px;
			padding: 20px 30px;
			align-items: center;
			.nurani_division_col{
				h2{
					color: $background-color-crimson;
					font-size: 35px;
					font-family: 'LalSabujNormal'; 
				}
				p{
					font-size:20px;
					font-family: 'Hind Siliguri', sans-serif;
				}
				.btn-part{
					display: flex;
					margin:30px 0px;
					a{
						text-decoration: none;
						width:100px ;
						padding: 5px 12px;
						background: $background-gradient-color;
						color:$background-color-white;
						margin: 0 20px;
						text-align: center;
						font-size: 18px;
						font-weight: 500;
						
						position: relative;
						
						
					}
					::before{
					
						content: "";
						position: absolute;
						width: 20px;
						height: 20px;
						border-bottom: 2px solid $border-color-crimson;
						border-right: 2px solid $border-color-crimson;
						bottom: -6px;
						right: -6px;
						transition: all .4s;
						opacity: 1;
						}
						::after{
							content: "";
							position: absolute;
							width: 20px;
							height: 20px;
							border-top: 2px solid $border-color-crimson;
							border-left: 2px solid $border-color-crimson;
							top: -6px;
							left: -6px;
							transition: all .4s;
							opacity: 1;
							
						}
						:hover::after{
						width: 110px;
						height: 49px;
						}
						:hover::before{
							width: 110px;
							height: 49px;
							}
				}
			}

			.img{
				width: 1000px;
				height: auto;
				border: 2px solid $background-color-crimson;
				border-radius: 20px;
				img{
					width: 100%;
					border-radius: 20px;
				}
			}
		}
	}
}

// nurani division end
// footer section start 
.footer-main{
	.footer-top{
		display:grid;
		justify-content: space-evenly;
		grid-template-columns: auto auto auto auto;
		column-gap: 30px;
		background-color:$background-color-crimson;
		padding: 20px 50px;
		.address-logo{
			color:$text-color-white;
			h1{
				color:$text-color-white;
				span{
					color:$text-color-black;
					font-weight: 900;
				}
			}
			a{
				color:$text-color-white;
				text-decoration: none;
				cursor: pointer;	
			}
		}
		.useful-links{
	
			ul li{
				list-style: none;
				color:$text-color-white;
				list-style: none;
				a{
					text-decoration: none;
					color:$text-color-white;
					padding-left: 5px;
				}
			}
			h3{
				color:$text-color-white;
			}
		}
		.our-menu{
			ul li{
				list-style: none;
				color:$text-color-white;
				a{
					text-decoration: none;
					color:$text-color-white;
					padding-left: 5px;
				}
			}
			h3{
				color:$text-color-white;
			}
		}
		.our-social{
			h3{
				color:$text-color-white;
			}
			p{
				color:$text-color-white;
				padding-bottom: 10px;
			}
			a{
				display: inline-block;
				background-color: $background-color-white;
				width: 40px;
				height:40px;
				border-radius: 6px;
				text-align: center;
				line-height: 40px;
				cursor: pointer;
				transition: all .3s;
				.fa-brands{
					color:$text-color-crimson;
					font-size: 18px;
				}
			}
			a:hover,a:focus{
				background-color: $background-color-black;
			}
			a:hover .fa-brands{
				color:$background-color-white;
			}
		}
	}
	.footer-bottom{
		background: $background-color-black;
		padding: 30px 0px;
		text-align: center;
		.copyright{
			p{
				color:$text-color-white;
				a{
					color:$text-color-crimson;
					cursor: pointer;
					text-decoration: none;
				}
			}
		}
	}
}
// footer section end
// scrool top btn start 
#scrollTopBtn{
    display: none;
    position: fixed;
    left: 20px;
    bottom: 20px;
    outline: none;
    border:none;
	z-index: 9999;
    background-color:$button-bg;
    width:50px;
    height:50px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease-in;
     box-shadow:  0 0 5px #ffff,
               0 0 10px #ffffff;
			.fa{
				color:white;
				font-size: 22px;
				text-align: center;
			}
}

#scrollTopBtn:hover,#scrollTopBtn:active{
    background-color: $button-bg;
}
// scrool top btn end
// contact form start 
// contact content form part start
.main_contact_form_body{

	background: url('../images/website\ bg-madrasha.png') !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
    z-index: 2;
}
.contact-content-form{
	width: 80%;
	background-color: #c8f9e0;
	box-shadow:  1px 15px 59px 6px rgba(0, 0, 0, 0.2);
	margin: 0 auto;


	.title-row{
		.col{

		
			h2{
				font-family: 'BenSenHandwriting';
				font-size: 45px;
				font-weight: 500;
				text-align: center;
				padding: 8px 0px;
				background-color:$main_color;
				color:  $color_white;
				width: 100%;
			}
			p{
				
   		
				padding-top: 15px;
				max-width: 586px;
				margin: 0 auto;
				text-align: center;
				padding-bottom: 58px;

				color: #605f62;
   			 font-size: 22px;
			line-height: 28px;
			letter-spacing: .20000000298023224px;
			font-family: 'LalSabujNormal'; 
			font-weight: 400;
				
			}
		}

		}
	


	.contact-content-form-container{
		width: 100%;
		padding-right: 25px;
		padding-left: 25px;
		margin-right: auto;
		margin-left: auto;
		max-width: 1200px;
		.contact-content-form-row{
			display: flex;
			flex-wrap: wrap;
			margin-right: -15px;
			margin-left: -15px;
			.main-card-contact-part {
				justify-content: center;
				display: grid;
				grid-template-columns: repeat(2,1fr);
				column-gap: 10px;
				row-gap: 10px;
				width: 100%;
				margin: 20px 0px;
				padding: 10px 15px;
				position: relative;
				z-index: 9;
				.sub-card-content{
				width: 70%;
				max-width: 70%;
				flex: 1 1 70%;
				.sub-content{
					.sub-content-head{
						position: relative;
						display: block;
						h2{
							font-size: 22px;
							margin: 0 0 10px 0;
							color: $text-color-crimson;
							padding-bottom: 5px;
							position: relative;
							display: inline-block;
							font-family: 'Hind Siliguri', sans-serif;
							font-weight: bold;
							&::before{
								position: absolute;
								content: "";
								background: $background-color-crimson;
								width: 100%;
								height: 3px;
								bottom: 0;
							}
						}
						p{
							font-size: 18px;
							line-height: 27px;
							display: block;
							padding: 20px 0px;
							margin: 0px;
							color:$text-color-black;
						}
					}
					.sub-contact-details{
							position: relative;
							h2{
								font-size: 21px;
								margin: 0 0 10px 0;
								color: $text-color-crimson;
								padding-bottom: 5px;
								position: relative;
								display: inline-block;
								font-family: 'Hind Siliguri', sans-serif;
								font-weight: bold;
								&::before{
									position: absolute;
									content: "";
									background: $background-color-light-crimson;
									width: 100%;
									height: 3px;
									bottom: 0;
								}
							}
							ol li{
								display: block;
								padding: 10px 0px;
								font-size: 17px;
								font-weight: 600;
								a{
									color:$background-color-black;
									.fa{
										color:$text-color-light-crimson;
										padding-right: 15px;
										font-weight: 400;

									}
								}
							}
					}
				}
				}
				.sub-card-form{
						

						
					.contact-form-box{
						form{
							.form-in-main{
								display: grid;
								grid-template-columns: repeat(2,1fr);
								
								width: 100%;
								.input-form-group{
								
									.input-in-form{
									    margin: -14px 10px;
   										 position: relative;
											.input-field-01{
												position: relative;
												input{
													padding: 10px 15px;
													margin: 30px 0px;
													height: 45px;
													position: relative;

													display: block;
													width: 100%;
													padding: 0.375rem 0.75rem;
													font-size: 1rem;
													line-height: 1.5;
													color: #495057;
													background-color: #fff;
													background-clip: padding-box;
													border: 1px solid #ced4da;
													border-radius: 0.25rem;
													transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
												}
												i{
													position: absolute;
													right: 0px;
													top: 0px;
													height: 45px;
													width: 45px;
													background: $background-color-light-crimson;
													text-align: center;
													line-height: 45px;
													color: #fff;
													border-top-right-radius: 0.25rem;
													border-bottom-right-radius: 0.25rem;
													
												}
											}
									}
								}
							
								.input-textarea-part{
									grid-column-start: 1;
									grid-column-end: 3;
									padding: 0px 10px;
									.textarea-field{
											display: block;
											width: 100%;
											padding: 0.375rem 0.75rem;
											font-size: 1rem;
											line-height: 1.5;
											color: #495057;
											background-color: #fff;
											background-clip: padding-box;
											border: 1px solid #ced4da;
											border-radius: 0.25rem;
											transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
									
									}
								}
								.send-message-btn{
									grid-column-start: 1;
									grid-column-end: 3;
									margin-top: 20px;
									padding: 0px 10px;
									text-align: right;
									.submit-btn{
										padding: 10px 15px;
										background: $background-color-light-crimson;
										color:white;
										border: none;
										border-radius: 5px;
										cursor: pointer;
										&:hover{
											background: $background-color-deep-crimson;
											transition: .3s ease-in-out;
										}
										
									}
								}
							}
						}
					}

				}
			}
		}
	}

}
// contact content form part End

.contact-page-map{
	text-align:center !important;
	margin:0 auto !important;
	padding: 10px;
	iframe{
		width: 100% ;
		height:550px ;
		border:4px solid $main_color;
		 border-radius:20px;
	}
}

// contact form end 
// galery section start
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
::selection {
	color: #fff;
	background: $main_color;
  }
.galary_main_body{
	background: url('../images/website\ bg-madrasha.png') !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
    z-index: 2;
}
  .container-gallery{
	padding: 20px;
	width: 80%;
	box-shadow:  1px 15px 59px 6px rgba(0, 0, 0, 0.2);
	margin: 0 auto;
	background-color: $color_white;
  }
  .container-gallery h1 {
	font-family: 'BenSenHandwriting';
	font-size: 45px;
	font-weight: 500;
	text-align: center;
	padding: 8px 0px;
	background-color:$main_color;
	color:  $color_white;
  }
  
  .gallery-main {
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
  }
  
  .wrapper-gallery {
	max-width: 1300px;
  }
  
  .gallery {
	display: flex;
	flex-wrap: wrap;
  
	.image {
	  padding: 7px;
	  width: calc(100% / 3);
  
	  span {
		display: flex;
		width: 100%;
		overflow: hidden;
	  }
  
	  img {
		width: 100%;
		vertical-align: middle;
		transition: all 0.3s ease;
		border-radius: 8px;
		border: 4px solid $main_color;
	  }
  
	  &:hover img {
		transform: scale(1.1);
		border-radius: 8px;
		border: 4px solid $main_color;
	  }
	}
  }
  
  .preview-box {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9);
	background: #fff;
	max-width: 700px;
	width: 100%;
	z-index: 5;
	opacity: 0;
	pointer-events: none;
	border-radius: 3px;
	padding: 0 5px 5px 5px;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  
	&.show {
	  opacity: 1;
	  pointer-events: auto;
	  transform: translate(-50%, -50%) scale(1);
	  transition: all 0.3s ease;
	}
  
	.details {
	  display: flex;
	  align-items: center;
	  padding: 12px 15px 12px 10px;
	  justify-content: space-between;
  
	  .title {
		display: flex;
		font-size: 18px;
		font-weight: 400;
	  }
	}
  }
  
  .details {
	.title p {
	  margin: 0 5px;
  
	  &.current-img {
		font-weight: 500;
	  }
	}
  
	.icon {
	  color: $main_color;
	  font-size: 20px;
	  cursor: pointer;
	}
  }
  
  .preview-box .image-box {
	display: flex;
	width: 100%;
	position: relative;
  }
  
  .image-box .slide {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	font-size: 30px;
	cursor: pointer;
	height: 50px;
	width: 60px;
	line-height: 50px;
	text-align: center;
	border-radius: 3px;
  }
  
  .slide {
	&.prev {
	  left: 0px;
	}
  
	&.next {
	  right: 0px;
	}
  }
  
  .image-box img {
	width: 100%;
	border-radius: 0 0 3px 3px;
  }
  
  .shadow {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
	display: none;
	background: rgba(0, 0, 0, 0.45);
  }
  
  @media (max-width: 1000px) {
	.gallery .image {
	  width: calc(100% / 2);
	}
  }
  
  @media (max-width: 600px) {
	.gallery .image {
	  width: 100%;
	  padding: 4px;
	}
	.container-gallery{
		width: 94%;
	  }
  }
  
// galery section end 
// institute introduction start
.institute_introduction_body{
	background: url('../images/website\ bg-madrasha.png') !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
    z-index: 2;
	.institute_introduction{
		width: 80%;
		box-shadow:  1px 15px 59px 6px rgba(0, 0, 0, 0.2);
		margin: 0 auto;
		background-color: $color_white;
		.title{
			font-family: 'BenSenHandwriting';
			font-size: 45px;
			font-weight: 500;
			text-align: center;
			padding: 8px 0px;
			background-color:$main_color;
			color:  $color_white;
		}
		.institute_introduction_row{
			display: grid;
			grid-template-columns: auto auto;
			gap: 15px;
			padding: 20px;
			.institute_introduction_col{
				.director_img{
					max-width: 450px;
					height: auto;
					margin: 0 auto;
					border: 1px solid black;
					img{
						width: 100%;
					}
					.director_name{
						text-align: center;
						background-color: $background-color-crimson;
						line-height: 40px;
						font-family: 'LalSabujNormal';
						color: $text-color-white;
                        font-size: 22px;
					}
				}
				.details{
					text-align: justify;
					font-family: 'LalSabujNormal';
					font-size: 22px;
				}
			}
		}
	}
	.institute_mission_and_vission{
		width: 80%;
		margin: 20px auto;
		background-color: $color_white;
		box-shadow:  1px 15px 59px 6px rgba(0, 0, 0, 0.2);
		.i_m_a_v_row{
                padding: 20px;
			.i_m_a_v_col{
				.title{
					font-family: 'BenSenHandwriting';
					font-size: 45px;
					font-weight: 500;
					text-align: center;
					padding: 8px 0px;
					background-color:$main_color;
					color:  $color_white;
				}
				.details{
					text-align: justify;
					font-family: 'LalSabujNormal';
					font-size: 22px;
				}
			}
		}

	}
}
// institutte introduction end 
// nurani livary section start 
 .common_libary_main{
	background: url('../images/website\ bg-madrasha.png') !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
    z-index: 2;
	.common_libary_body{
		width: 80%;
		box-shadow:  1px 15px 59px 6px rgba(0, 0, 0, 0.2);
		margin: 0 auto;
		background-color: $color_white;
		.title{
			font-family: 'BenSenHandwriting';
			font-size: 35px;
			font-weight: 500;
			text-align: center;
			padding: 8px 0px;
			background-color:$main_color;
			color:  $color_white;
		}
		// select class start 
		.select_class{
			.select_class_row{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				text-align: center;
				padding: 0px 10px;
				.select_class_col{
					text-decoration: none;
					padding: 15px 0px;
					color: black;
					font-size: 25px;
					font-family: 'Hind Siliguri', sans-serif;
					border-left: 1px solid black;
					border-right: 1px solid black;
					border-bottom: 1px solid black;
					transition: all .5s ease-in-out;
					&:hover{
						background-color: $main_color;
						color: $color_white;
					}
				}
				.active_class{
					background-color: $main_color;
					color: $color_white;
				}
			}
		}
		// select calss end 
		// selected calss value start
		.common_value{
			.common_value_row{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 20px;
				padding: 20px 20px;
				.common_value_col{
					width: 300px;
					height: 440px;
					border: 1px solid black;
					box-shadow:  1px 15px 59px 6px rgba(0, 0, 0, 0.1);
					.book_img{
						height: 320px;
						width: 100%;
						img{
							height: 320px;
							width: 100%;

						}
					}
					.book_details{
                      background-color: $main_color;
                      height: 120px;
					.book_title{
						width: 100%;
						padding: 5px 0px;
						background-color: $main_color;
						color: $color_white;
						font-family: 'BenSenHandwriting';
						text-align: center;
						font-size: 25px;
					}
					.book_price{
						color: $color_white;
						font-size: 18px;
						font-family: 'Hind Siliguri', sans-serif;
						padding: 0px 5px;
						display: flex;
						justify-content: space-between;
					}
					.book_now{
                        padding: 9px 30px;
						text-align: center;
						margin: 0 auto;
						background-color: $color_white;
						text-decoration: none;
						display: flex;
						justify-content: center;
						font-size: 18px;
						font-family: 'Hind Siliguri', sans-serif;
						transition: all .5s ease-in-out;
						letter-spacing: 2px;
						background-color: #096937;
						color: $color_white;
						&:hover{
							letter-spacing: 3px;
							background-color: $color_white;
							color: black;
						}
					}
				}
				}


			}
		}
		.none{
			display: none;
		}
		// selected calss value end 
	}
 }
// nuranin livary section end 
// Responsive Media Query Breakpoint

@media(min-width: 992px) {
	.header {
		top: 0;
		.navbar .closed-menu{
		position: absolute;
   		display: none;
    	right: 0.5rem;
		justify-content: center;
		cursor: pointer;
		width: 4rem;
		height: 4rem;
		border: none;
		outline: none;
		background: none;
	
		}
		.menu {
			> .menu-item-child:hover > {
				.sub-menu {
					display: block;
					opacity: 1;
					visibility: visible;
					transform: translateY(0);
					width: 290px;
				}

				a .expand::after {
					transform: translate(-50%, -50%) rotate(0deg);
				}
			}
		}
	}
	
}
// Responsive Media Query Breakpoint
@media(max-width: 991px) {
	// Menu header section Start
	.header {
		.overlay {
			&.active {
				display: block;
				opacity: 1;
				visibility: visible;
			}
		}

		.navbar {
			position: fixed;
			top: 0;
			left: -100%;
			width: 75%;
			height: 100%;
			z-index: 999;
			opacity: 0;
			overflow-y: auto;
			visibility: hidden;
			background: $mobile-menu-bg-color;
			box-shadow: var(--shadow-medium);
			transition: all 0.5s ease;

			&.active {
				left: 0rem;
				opacity: 1;
				visibility: visible;
				
			}
			.closed-menu{
				
				position: absolute;
				display: flex;
				top: 1rem;
				right: 1rem;
				width: 2.5rem;
				height: auto;
				justify-content: center;
				align-items: center;
				.fa{
					color:$text-color-crimson;
					font-size: 30px;
					text-align: center;
					
					
				}
			}
		}

		.menu {
				width: 100%;
				height: auto;
				margin-top: 4rem;
			> {
				.menu-item {
					display: block;
					margin: 0;
				}

				.menu-item-child > a {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.menu-item {
					> a {
						padding: 0.625rem 1.25rem;
						color: $menu-item-text-color;
					}

					> a .expand {
						&::before,
						&::after {
							background: $menu-items-plus-bg-color;
						}
					}
				}

				.menu-item-child.active {
					> a .expand:after {
						transform: translate(-50%, -50%) rotate(0deg);
					}
				}

				.menu-item > .sub-menu {
					position: relative;
					top: auto;
					left: auto;
					width: 100%;
					max-height: 0;
					padding: 0px;
					border: none;
					outline: none;
					opacity: 1;
					overflow: hidden;
					visibility: visible;
					background: transparent;
					box-shadow: none;
					transform: translateY(0px);

					> .menu-item > a {
						padding: 0.625rem 2rem;
						color: $menu-item-text-color;
					}
				}
			}
		}

		.burger {
			display: block;
			opacity: 1;
			visibility: visible;
		}
	}
	// logo-part style design start
	#main-logo{
		display: block;	
	}
	// logo-part style design end
#headIMG{
	display: none;
	
}
// menu alignment start
.header .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;	
}

/* footer section media start */
.footer-main .footer-top{
	display: grid;
	justify-content: space-between;
	grid-template-columns: auto auto;
	row-gap: 40px;
	column-gap: 50px;
	align-items: center;
}

/* footer section media end */
.headerMainbar{
	width: 100%;
	padding: 20px 20px;
}
.headerMainbar .socialIcon {
	margin: 0 auto;
}
// main body 1 start 
.main_body_container{
	width: 94%;
	.main_body_row{
		display: grid;
		grid-template-columns: auto;
		.left_side{
			.institute_introduction{
				.details{
					width: 435px !important;
				}
			}
			.contact_info{
				display: none;
			}
		}
		.right_side{
			.contact_info_problem{
				display: block;
			}
		}
	}
}
// main body 1 end 
// main body 2 start 
.main_body_2{
	width: 94%;
	.main_body_2_row{
		display: grid;
		grid-template-columns: auto;
	}
}
// main body 2 end
// main body 3 start 
.main_body_3{
	width: 94%;
}
// main body 3 end 
	
// content section style  important part start





//contact content and form style start
.contact-content-form{
	
	.contact-content-form-container{
		padding-right: 25px !important;
		padding-left: 25px !important;
		.contact-content-form-row{
			.main-card-contact-part{
				display: grid !important;
				grid-template-columns: repeat(1,1fr) !important;

			}
		}
	}
}



//contact content and form style End
// content section style  important part end

	.contact-page-map{
		
	   padding:0 25px !important;
	   text-align:center !important;
	   margin:0 auto !important;
	   iframe{
		   width: 100% !important;
		   height:550px !important;
		  
			
	   }
   }
   // institute introduction start
.institute_introduction_body{
	.institute_introduction{
		width: 94%;
		.institute_introduction_row{
			display: flex;
			flex-wrap: wrap-reverse !important;
			justify-content: center;
		}
	}
	.institute_mission_and_vission{
		width: 94%;
	}
}
// institutte introduction end 
   // nurani livary start 
 .common_libary_main{
	.common_libary_body{
		width: 94%;
	}
 }
   // nurani livary end 
}
			


@media(max-width:600px){
	// logo display part
	#main-logo{
		display: block;
	}
	// logo-part style design end

#head-icon{
	display: none;
}
// menu alignment start
.header .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;	
}
// menu alignment end
// home section style start
.footer-main .footer-top{
	display: grid;
	justify-content: start;
	grid-template-columns: auto;
	
}
.footer-bottom{
	display: flex;
	justify-content: center;
	.copyright{
		padding: 0px 12px;
		width: 80%;
		
	}
}
.main_body_container{
	width: 94%;
	.head-title{
		font-size: 30px !important;
	}
	.main_body_row{
		.left_side{
			.institute_introduction{
				.details{
					width: 100% !important;
					padding: 0px 10px;
				}
			}
		}
	}
}	
//contact form and content style start

.contact-content-form{
	width: 94% !important;
	.contact-content-form-container{
		.contact-content-form-row{
			.main-card-contact-part{
				.sub-card-form{
					.contact-form-box{
						form{
							.form-in-main{
								display: grid !important;
								grid-template-columns: repeat(1,1fr) !important;
								.input-textarea-part{
									grid-column-start: 1 !important;
									grid-column-end: 2 !important;
								}
								.send-message-btn{
									grid-column-start: 1 !important;
									grid-column-end: 2 !important;
								}
							}
						}
					}
				}
				.sub-card-content{
					width: 100% !important;
					max-width: 100% !important;
					flex: 1 1 100% !important;
				}

			}
		}
	}
}

 .contact-page-map{
	padding:0 25px !important;
	text-align:center !important;
	margin:0 auto !important;
	iframe{
		width: 100% !important;
		 height:550px !important;
		
	}
}

//contact content and form style End
// nurani livary section start 
.common_libary_main{

	.common_libary_body{


		// select class start 
		.select_class{
			.select_class_row{

				grid-template-columns: 1fr 1fr !important;

			}
		}
		// select calss end 
	}
 }
// nuranin livary section end 
}
@media(max-width: 678px){
	.p_e .email{
		display: none;
	}
	.top_bar .top_bar_row .p_e{
		gap: 0px;
		padding-right: 5px;
		padding-top: 2px;
	}
	.p_e .email::after{
		content: "";
		position: absolute;
		height: 0px;
		width: 0px;
		background-color:  $main_color !important;
		margin-left: 0px;
		margin-top: 0px;
	}
	#main-logo{
		width: 280px !important;
		height: auto !important;
	}
}
@media(max-width:350px){
	#main-logo{
		width: 240px !important;
		height: auto !important;
	}
}