/*
@font-face {
	font-family: "Regular";
	src: url("../fonts/Poppins/Poppins-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Medium";
	src: url("../fonts/Poppins/Poppins-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "SemiBold";
	src: url("../fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "Bold";
	src: url("../fonts/Poppins/Poppins-Bold.ttf") format("truetype");
}
*/

:root{
	/*
	--brand-font-1: "Regular", "sans-serif";
  --brand-font-2: "Medium", "sans-serif";
  --brand-font-3: "SemiBold", "sans-serif";
  --brand-font-4: "Bold", "sans-serif";
	*/

	
	--brand-color: #0d2f09; --brand-color-rgb: 13,47,9;
	--brand-brown: #571c00; --brand-brown-rgb: 87,28,0;	
	--brand-golden: #e1964b; --brand-golden-rgb: 225,150,75;
	--brand-font-color: #0d2f09; 	--brand-font-color-rgb: 13,47,9;
	--brand-link: #0034FF;	--brand-link-rgb: 0, 52, 255;
	--brand-border: #e3d5cd;	--brand-border-rgb: 227,213,205;

	--thm-color: var(--brand-color); --thm-color-rgb: var(--brand-color-rgb);
	--thm-font-color: var(--brand-font-color); --thm-font-color-rgb: var(--brand-font-color-rgb);
	--thm-link: var(--brand-link); --thm-link-rgb: var(--brand-link-rgb);
	--thm-border: var(--brand-border); --thm-border-rgb: var(--brand-border-rgb);
	
	/*
	--thm-font-1: var(--brand-font-1);
  --thm-font-2: var(--brand-font-2);
  --thm-font-3: var(--brand-font-3);
  --thm-font-4: var(--brand-font-4);
	*/
}

/*---------- Brand Brown --------*/
.brown{color:var(--brand-brown);}

input.brown, select.brown, textarea.brown{color:var(--brand-brown);border: 1px solid var(--brand-brown);}

a.btn.brown,
button.brown,
input[type="reset"].brown,
input[type="submit"].brown,
input[type="button"].brown
{
	color: var(--thm-white);
	background-color: var(--brand-brown);
	border: 1px solid var(--brand-brown);
}

a.btn.brown:hover,
button.brown:hover,
input[type="reset"].brown:hover,
input[type="submit"].brown:hover,
input[type="button"].brown:hover

{
	color: var(--brand-brown);
	background-color: transparent;
	border-color:var(--brand-brown);
}

a.btn-alt.brown,
button.btn.brown,
input[type="reset"].btn.brown,
input[type="submit"].btn.brown,
input[type="button"].btn.brown
{
	color: var(--brand-brown);
	background-color: transparent;
	border: 1px solid var(--brand-brown);
}

a.btn-alt.brown:hover,
button.btn.brown:hover,
input[type="reset"].btn.brown:hover,
input[type="submit"].btn.brown:hover,
input[type="button"].btn.brown:hover
{
	color: var(--thm-white);
	background-color: var(--brand-brown);
	border: 1px solid var(--brand-brown);
}

/*---------- Brand Brown --------*/

/*html,body{ background-color: rgba(var(--thm-black-rgb),.1);}*/
.page-header{border-bottom: 2px solid rgba(var(--thm-color-rgb),.6)}

.top-nav__foil{
	position: absolute;
	top:0; 
	right:0; 
	z-index: 11;
	font-size: 14px;
}

/*------------ Top Navigation (contact) ------------*/

.top-nav__foil .contact{
	background-color: rgba(var(--thm-white-rgb),.9);
	border-left: 1px solid rgba(var(--thm-color-rgb),.2);
	border-right: 1px solid rgba(var(--thm-color-rgb),.2);
	border-bottom: 1px solid rgba(var(--thm-color-rgb),.2);
	border-bottom-right-radius: 4px; 
	border-bottom-left-radius: 4px;
	overflow: hidden !important;
}

.top-nav__foil .contact a{
	padding: 8px 10px;
	display: flex;
	column-gap: 10px;
	align-items: center;
	background-color: rgba(var(--thm-color-rgb),.04);
	line-height: 1em;
}
.top-nav__foil .contact a:first-of-type{border-right: 1px solid rgba(var(--thm-color-rgb),.25);}
.top-nav__foil .contact a:last-of-type{border-left: 1px solid rgba(var(--thm-white-rgb),.85);}

/*------------ Top Navigation (account) ------------*/
.account__foil{
	background-color: rgba(var(--thm-white-rgb),.9);
	border-left: 1px solid rgba(var(--thm-color-rgb),.2);
	border-right: 1px solid rgba(var(--thm-color-rgb),.2);
	border-bottom: 1px solid rgba(var(--thm-color-rgb),.2);
	border-bottom-right-radius: 4px; 
	border-bottom-left-radius: 4px;
}

.account__foil .account .sub{
	padding: 8px 10px;
	display: flex;
	background-color: rgba(var(--thm-color-rgb),.04);
	line-height: 1em;	
}

.top-nav__foil .account{
	position: relative;
	display:flex;
	flex-direction: column;
}

/*top-nav__foil .account .sub::before{
	content:'\f2bd';
	font:var(--fa-font-solid);
	margin-right:10px;
}
*/
/*.top-nav__foil .account__foil:hover {}*/
.top-nav__foil .account__foil:hover ul{
	visibility:visible;
	opacity: 1
}

.top-nav__foil .account ul{
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	row-gap: 20px;
	padding: 20px;
	background:rgba(var(--thm-white-rgb),.95);
	position: absolute;
	top:32px;
	right: 0px;
	z-index: 1111;
	min-width: 220px;
	width: auto;
	border-radius: 4px;
	box-shadow: 2px 2px 12px 2px rgba(var(--thm-grey-rgb),.3);
	transition: .25s ease-in-out;
	font-weight: normal;
	visibility: hidden;
	opacity: 0;
}

.top-nav__foil .account ul li{display: flex;}
.top-nav__foil .account ul li a{border-radius: 30px; padding-left: 30px; padding-right: 30px}

/*.top-nav__foil .account > a{padding:0 10px;}*/
/*.top-nav__foil .account > a > i{font-size:22px;}*/

/*top-nav__foil .account .account-nav li {transition: all .25s ease-in-out; padding: 0}
top-nav__foil .account .account-nav li a{color:var(--thm-color);transition: all .25s ease-in-out;padding: 8px 16px;}
top-nav__foil .account .account-nav li:hover{background-color:rgba(var(--thm-yellow-rgb),.15)}
top-nav__foil .account .account-nav li:hover a{color:var(--thm-blue)}
top-nav__foil .account .account-nav li:not(:last-of-type){border-bottom: 1px solid rgba(var(--thm-yellow-rgb),.3);}*/

/*------------ Top Navigation (cart) ------------*/
/*
.top-nav__foil .cart {
	position: relative;
	display:flex;
	flex-direction: column;
}
.top-nav__foil .cart .sub{border-color:rgba(var(--thm-yellow-rgb),.7)}

/*.top-nav__foil .cart .sub::before{
	content:'\f07a';
	font:var(--fa-font-solid);
	margin-right:10px;
}*//*

.top-nav__foil .cart .sub::before{margin-right: 3px}
.top-nav__foil .cart .sub::after{content:'';display: none;}

.top-nav__foil .cart > a{display: flex; align-items: center}
.top-nav__foil .cart ul{
	width:400px;
	display:flex;
	flex-flow: column nowrap; 
	background: #fff; 
	font-size: 14px;
	line-height: 1.4em;
	position: absolute; 
	top:41px;
	right:0;
	z-index: 666;
	border-radius: 2px;
	box-shadow: 2px 2px 6px #666666;
	max-height: 600px;
	overflow-y: auto;
	transition: .3s ease;
	opacity: 0;
	visibility: hidden;
}
.top-nav__foil .cart:hover ul{opacity: 1; visibility: visible}

.top-nav__foil .cart ul li{display:flex; justify-content: space-between; padding: 10px; column-gap: 10px; align-items: flex-start;}
.top-nav__foil .cart ul li:not(:last-of-type){border-bottom:1px solid #e9e9e9}
.top-nav__foil .cart ul li:last-of-type{padding: 0; }
.top-nav__foil .cart ul li:last-of-type a{
	display: block;
	width: 100%;
	padding: 12px;
	text-align: center;
	background-color:dodgerblue;
	color:#f9f9f9;
	font-family: var(--thm-font-2);
	font-size:14px;
	letter-spacing: 1px;
}

.top-nav__foil .cart ul li figure{
	border:1px solid #e9e9e9;
	border-radius: 2px;
	padding: 2px;
}
.top-nav__foil .cart ul li figure img{width:60px;}
.top-nav__foil .cart ul li strong{font-size:14px}*/

/*------------ Main Navigation ------------*/
.main-nav__foil input#mainNav,
.main-nav__foil label[for="mainNav"]{display:none}

.main-nav__foil input#mainNav+ label[for="mainNav"]::after {
	content: "\f0c9";
	font:var(--fa-font-solid);
	vertical-align: middle;
	color: rgba(var(--thm-color-rgb),.7);
	font-size: 28px;
	line-height: 1em;
	width: 28px;
	text-align: center
}

.main-nav__foil input#mainNav:checked + label[for="mainNav"]::after {
  content: "\00d7";
	vertical-align: middle;
}

.main-nav{font-size: 18px; font-family: var(--thm-font-3)}
.main-nav a{
	color: var(--thm-color);
	padding-left: 15px;
	padding-right: 15px;
	transition: all .3s ease-in-out;
}
.main-nav a::after{
	content:'';
	border-bottom: 2px solid var(--thm-green);
	display:block;
	align-self: center;
	margin-left: auto;
	margin-right: auto;
	width: 0;
	transition: all .3s ease-in-out;
}

.main-nav a.active,
.main-nav a:hover{color:var(--thm-green)}

.main-nav a.active::after,
.main-nav a:hover::after{width:100%}


.page-footer{
	background: linear-gradient(to top, rgba(var(--thm-color-rgb),.95), rgba(var(--thm-color-rgb),.65)), url("../images/backgrounds/bg-03.png") ;
	background-size:100% auto;
	background-position: 50%;
	color:rgba(var(--thm-white-rgb),.9);
	border-top:2px solid rgba(var(--thm-color-rgb), .70);
}

.page-footer h1,
.page-footer h2,
.page-footer h3,
.page-footer h4,
.page-footer h3,
.page-footer h5,
.page-footer h6{font-family:var(--thm-font-2);}
.page-footer h3{font-size:22px;}

.page-footer .bd-filter{
	backdrop-filter:blur(5px) brightness(80%);
}

.footer-top__foil h3{display: flex; flex-direction: column;}
.footer-top__foil h3::after{
	content: '';
	height: 1px;
	border-bottom: 1px solid var(--thm-orange);
	width: 60px;
}

.footer-top-widget__middle a{color:rgba(var(--thm-lime-rgb),.6)}
.footer-top-widget__middle a::before{
	content: '\f0da';
	font: var(--fa-font-solid);
	color:rgba(var(--thm-white-rgb),.9);
	margin-right: 10px;
}

.footer-bottom{border-top:1px solid rgba(var(--thm-white-rgb),.4)}


/*---------- Home Page/Features ------------*/
.home-intro__foil{
	background-image: url('../images/backgrounds/bg-04.png');
	background-size:100% auto; 
	background-attachment: fixed; 
	background-position:50%;
}

.home-intro__foil .card {flex:1 1 360px; position: relative}
.home-intro__foil .card .title{
	position: absolute; 
	left:0;
	right:0; 
	line-height: 2.2em;
	text-align: center;
	text-shadow: 1px 1px 3px var(--thm-black);
	color:var(--thm-white);
	z-index: 10; 
}
.home-intro__foil .card .title::before{
	content: '';
	position: absolute;
	left:0; right:0;
	margin-left: 20px;
	margin-right: 20px;
	border-top: 40px solid transparent;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	z-index: -1;
}

.home-intro__foil .card.orange .title::before{border-top-color:rgba(var(--thm-orange-rgb),.7)}
.home-intro__foil .card.green .title::before{border-top-color:rgba(var(--thm-green-rgb),.7)}
.home-intro__foil .card.blue .title::before{border-top-color:rgba(var(--thm-blue-rgb),.7)}

.home-intro__foil .card .content{position:absolute; left:20px; right:20px; bottom:90px;z-index: 10; color:var(--thm-white)}
.home-intro__foil .card .content::after{
	content: '';
	position: absolute;
	top:-10px; left:10px; right:10px; bottom:-10px;
	border-radius: 6px;
	background-color: rgba(var(--thm-black-rgb),.4);
	z-index: -1;
}

.home-intro__foil .card button{text-shadow: 1px 1px 3px var(--thm-black);}
.home-intro__foil .card button:hover{text-shadow: 1px 1px 1px var(--thm-black);}
.home-intro__foil .card a:hover{text-decoration: underline;}
/*---------- Home Features ------------*/

/*.feature{flex:1 1 360px; position: relative}

.feature .title{
	position: absolute; 
	left:0;
	right:0; 
	line-height: 2.2em;
	text-align: center;
	text-shadow: 1px 1px 3px var(--thm-black);
	color:var(--thm-white);
	z-index: 11; 
}
.feature .title::before{
	content: '';
	position: absolute;
	left:0; right:0;
	margin-left: 20px;
	margin-right: 20px;
	border-top: 40px solid rgba(var(--thm-orange-rgb),.7);
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	z-index: -1;
}

.feature.karaoke .title::before{border-top-color:rgba(var(--thm-green-rgb),.7)}
.feature.pool .title::before{border-top-color:rgba(var(--thm-blue-rgb),.7)}

.feature .image{}

.feature .content{position:absolute; left:20px; right:20px; bottom:90px;z-index: 11; color:var(--thm-white)}
.feature .content::after{
	content: '';
	position: absolute;
	top:-10px; left:10px; right:10px; bottom:-10px;
	border-radius: 6px;
	background-color: rgba(var(--thm-black-rgb),.4);
	z-index: -1;
}*/



/*--------- Home Intro -----------*/
.section__foil{
	border-top:2px solid rgba(var(--thm-white-rgb),.9);
	/*background-color:rgba(var(--brand-brown-rgb),.6); #0d2f09;*/
	background-color:rgba(var(--thm-color-rgb),1); /*#0d2f09;*/
	color: var(--thm-white);
}

.section__foil .images__foil{
	position: relative;
	border: 2px solid rgba(var(--thm-white-rgb),.8); 
	border-top-right-radius: 24px;
	border-bottom-left-radius: 24px;
}

.section__foil .images__foil .image.top{
	position: relative;
	top:10px; left:10px; 
	max-width: 300px; 
	border:2px solid var(--thm-orange); 
	border-top-right-radius: 24px; 
	overflow: hidden;
}
.section__foil .images__foil .image.middle{
	position: absolute; 
	top: 50%; 
	border:2px solid var(--thm-green); 
	border-top-left-radius: 24px;
	border-bottom-right-radius: 24px; 
	overflow: hidden;
	z-index: 11;
	transform: translateY(-50%);
}
.section__foil .images__foil .image.bottom{
	position: relative; 
	right:10px; bottom:10px; 
	max-width: 300px;
	border:2px solid var(--thm-blue);
	border-bottom-left-radius: 24px;
	overflow: hidden; 
}

/*--------- Home Recite -----------*/
.section__foil.recite{
	border-color:rgba(var(--thm-orange-rgb),.9);
	background-color: rgba(var(--thm-white-rgb),.95);
	color:var(--brand-brown);
}

.section__foil.recite .images__foil{
	border-color: rgba(var(--thm-orange-rgb),.8);
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	border-top-left-radius: 24px;
	border-bottom-right-radius: 24px;	
}

.section__foil.recite .images__foil .image.top{
	left: unset;
	right:10px; 
	border-color: var(--thm-aqua); 
	border-top-right-radius: 0;
	border-top-left-radius: 24px;
}
.section__foil.recite .images__foil .image.middle{
	border-color:var(--thm-orange); 
	border-top-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top-right-radius: 24px;
	border-bottom-left-radius: 24px; 
}
.section__foil.recite .images__foil .image.bottom{
	left:10px; right: unset;
	border-color:var(--thm-lime);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 24px;
}

/*--------- Home Tajweed -----------*/
.section__foil.tajweed{
	border-color:rgba(var(--thm-green-rgb),.9);
	background-color: rgba(var(--thm-silver-rgb),.30);
	color:var(--thm-color);
}

.section__foil.tajweed .images__foil{
	border-color: rgba(var(--thm-green-rgb),.8);
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	border-top-left-radius: 24px;
	border-bottom-right-radius: 24px;	
}
/*position: relative; top:10px; right:10px; border:2px solid var(--thm-aqua); border-top-left-radius: 24px; overflow: hidden*/
.section__foil.tajweed .images__foil .image.top{
	left: unset;
	right:10px; 
	border-color: var(--thm-fuchsia); 
	border-top-right-radius: 0;
	border-top-left-radius: 24px;
}
/*position: absolute; top:20%; z-index: 11; border:2px solid var(--thm-yellow); border-top-right-radius: 24px;border-bottom-left-radius: 24px; overflow: hidden*/
.section__foil.tajweed .images__foil .image.middle{
	border-color:var(--thm-green); 
	border-top-left-radius: 0;
	border-bottom-right-radius: 0;
	border-top-right-radius: 24px;
	border-bottom-left-radius: 24px; 
}
/*  style="position: relative;left:10px; bottom:10px; border:2px solid var(--thm-lime); border-bottom-right-radius: 24px; overflow: hidden"*/
.section__foil.tajweed .images__foil .image.bottom{
	left:10px; right: unset;
	border-color:var(--thm-purple);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 24px;
}

/*---------- List ------------*/
.list {display: flex; flex-wrap: wrap; grid-column-gap: 30px; grid-row-gap: 10px; justify-content: space-between}
.list .item{flex: 1 1 42%; display: flex;}
.list .item::before{
	content: '\f00c';
	font: var(--fa-font-solid);
	font-size: 18px;
	color: var(--thm-orange);
	margin-top: 5px;
	margin-right: 10px;
}

.list.tajweed .item::before{color: var(--thm-green);}

/* ------- Reviews Page -------- */
.review-card {
	position: relative;
	border:2px solid rgba(var(--thm-red-rgb),.7);
	border-radius: 2px;
	box-shadow: 0 0 18px 0 rgba(var(--thm-red-rgb),.2);
	flex: 1 0 400px;
}
.review-card .image__foil{
	background: linear-gradient(to bottom, rgba(var(--thm-white-rgb),.3) 48%, rgba(var(--thm-red-rgb),1) 48%), url("../images/pattern/thm-pattern-1.png");
}

.review-card .image__foil .image{border:3px solid var(--thm-border);border-radius: 50%; overflow: hidden}
.review-card .image__foil .image img{
	border:1px solid rgba(var(--thm-red-rgb),.2);
	border-radius: 50%
}

.review-card .content .title::before{
	content: '\f10e';
	content: '\f559';
	font: var(--fa-font-solid);
	font-size: 80px;
	color:rgba(var(--thm-grey-rgb),.2);
	margin-right: 20px;
}

.review-card .google-tag{
	position:absolute; top:15px; right:5px; display: flex; align-items: center;
	background-color:#00B9D8;  
	padding:0 10px;
	color:var(--thm-white);
	text-shadow: 0 0 1px var(--thm-black);
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
.review-card .google-tag::before{
	position: absolute;
	left: -30px;
	content: '\f5a2';
	font: var(--fa-font-solid);
	font-size: 40px;
	text-shadow: 1px 0 1px var(--thm-white);
	color:rgba(var(--thm-blue-rgb),.6);
}

/*---------- Home Page/Features ------------*/
.home-book__foil{
	border-top:2px solid rgba(var(--brand-brown-rgb),.9); 
	background-color: rgba(var(--thm-black-rgb),.7); 
	color:var(--brand-brown); 
	background-image: url('../images/backgrounds/bg-05.png'); 
	background-size: 100% auto; 
	background-repeat: no-repeat; 
	background-position: 50%
}