@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Almarai:wght@300;400;700;800&family=Gulzar&family=Noto+Nastaliq+Urdu:wght@400..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
:root {
  --primary-color: #4CC9FE;
  --background-light: #f3f3f3;
  --text-light: #CAF0F8;
  --accent-color: #ffa07f;
  --link-active: #FF6347;
  --white: #FFFFFF;
  --highlight-bg: #FFD266;
  --highlight-text: #C88E00;
  --form-error: #db5246;
  --text-dark: #3a3a3a;
  --card-bg: #f8f9fb;
  --box-bg: #eaebec;
  --black: #1a1a1a;
  --link-hover-muted: #818181;
  --search-bg: #ececec;
  --event-bg: #a0aab8;
  --base-bg: #F6F5F2;
  --testimonial-highlight: #f6af03;
  --footer-border: #4d4e4e;
  --contact-text-muted: #a5a5a5;
  --black-true: #000000;
  --text-heavy-dark: #121212;
  --color-01: rgba(0,0,0,.01);
  --color-02: rgba(0,0,0,0.17);
  --color-03: rgba(0,0,0,0.67);
  --color-04: rgba(0,0,0,0.2);
  --color-05: rgba(0, 0, 0, 0.2);
  --color-06: rgba(0, 0, 0, 0.3);
  --color-07: #6b6b6b;
  --color-08: #f7f9fb;
}

/* CSS Document */

/******************************

COLOR PALETTE




[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Logo
	3.2 Main Nav
	3.3 Header Side
	3.4 Hamburger
4. Menu
	4.1 Menu Social
	4.2 Menu copyright
5. Home
	5.1 Hero Slider
	5.2 Hero Slider Navigation
6. Hero Boxes
7. Page Section
8. Buttons
9. Popular
10. Register
11. Search
	11.1 Search Form
12. Services
13. Testimonials
14. Events
15. Footer
	15.1 Newsletter
	15.2 Footer Content
	15.3 Footer Copyright


******************************/

/***********
1. Fonts
***********/

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800|Roboto:400,500,700");
@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Almarai:wght@300;400;700;800&family=Gulzar&family=Noto+Nastaliq+Urdu:wght@400..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

/********************************/

/*********************************
2. Body and some general stuff
*********************************/

*
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: var(--color-01) 0 0 1px;
	text-shadow: var(--color-01) 0 0 1px;
	font-family: "Alexandria", serif;
	--main_color : var(--primary-color)
}
html {
    scroll-behavior: smooth;
  }
body
{
	font-size: 14px;
	font-weight: 400;
	background: var(--background-light) !important;
	color: var(--text-light);
	height: auto;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
}
p
{
	font-size: 14px;
	line-height: 2.29;
	font-weight: 700;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: var(--color-01) 0 0 1px;
	text-shadow: var(--color-01) 0 0 1px;
}
p a
{
	display: inline;
	position: relative;
	color: inherit;
	border-bottom: solid 1px var(--accent-color);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: var(--color-01) 0 0 1px;
	text-shadow: var(--color-01) 0 0 1px;
}
p a:active
{
	position: relative;
	color: var(--link-active);
}
p a:hover
{
	color: var(--white);
	background: var(--accent-color);
}
p a:hover::after
{
	opacity: 0.2;
}
::selection
{
	background: var(--highlight-bg);
	color: var(--highlight-text);
}
p::selection
{
	background: var(--highlight-bg);
	color: var(--highlight-text);
}
h1{font-size: 36px;}
h2{font-size: 22px;}
h3{font-size: 18px;}
h4{font-size: 14px;}
h5{font-size: 11px;}
h1, h2, h3, h4, h5, h6
{
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: var(--color-01) 0 0 1px;
	text-shadow: var(--color-01) 0 0 1px;
}

h1::selection, 
h2::selection, 
h3::selection, 
h4::selection, 
h5::selection, 
h6::selection
{
	
}
::-webkit-input-placeholder
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--text-light) !important;
}
:-moz-placeholder /* older Firefox*/
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--text-light) !important;
}
::-moz-placeholder /* Firefox 19+ */ 
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--text-light) !important;
} 
:-ms-input-placeholder
{ 
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--text-light) !important;
}
::input-placeholder
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--text-light) !important;
}
.form-control
{
	color: var(--form-error);
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}
.prlx_parent
{
	overflow: hidden;
}
.prlx
{
	height: 130% !important;
}
.nopadding
{
	padding: 0px !important;
}

/*********************************
3. Header
*********************************/

.header
{
	position: fixed;
	top: 45px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	transform: translateY(-1000px); /* hide initially */
	width: 1318px;
	height: 104px;
	background: #f3f3f3;
	z-index: 10;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.header.scrolled
{	
	top: 15px;
}
.header.scrolled .header_content::before
{
	box-shadow: 0px 20px 49px var(--color-02);
}
.header_content
{
	width: calc(100% - 279px);
	height: 100%;
}
.header_content::before
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	box-shadow: 0px 20px 49px var(--color-03);
	z-index: -1;
}

/*********************************
3.1 Logo
*********************************/

.logo_container
{
	display: inline-block;
	padding-left: 76px;
}
.logo span
{
	font-size: 30px;
	font-weight: 900;
	color: var(--text-dark);
	vertical-align: middle;
	text-transform: uppercase;
	margin-left: 3px;
}

/*********************************
3.2 Main Nav
*********************************/

.main_nav_container
{
	display: inline-block;
	margin-left: auto;
	padding-right: 93px;
}
.main_nav
{
	margin-top: 7px;
}
.main_nav_item
{
	display: inline-block;
	margin-right: 40px;
}
.main_nav_item:last-child
{
	margin-right: 0px;
}
.main_nav_item a
{
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--text-dark);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.main_nav_item a:hover
{
	color: var(--primary-color);
}

/*********************************
3.3 Header Side
*********************************/

.header_side
{
	width: 279px;
	height: 100%;
	background: var(--primary-color);
}
.header_side img
{
	width: 29px;
	height: 29px;
}
.header_side span
{
	display: block;
	position: relative;
	font-size: 18px;
	font-weight: 500;
	color: var(--white);
	padding-left: 12px;
}

/*********************************
3.4 Hamburger
*********************************/

.hamburger_container
{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 20px;
	display: none;
	cursor: pointer;
}
.hamburger_container i
{
	font-size: 24px;
	padding: 10px;
	color: var(--text-dark);
}
.hamburger_container:hover i
{
	color: var(--primary-color);
}

/*********************************
4. Menu
*********************************/

.menu_container
{
	position: fixed;
	top: 0;
	right: -50vw;
	width: 50vw;
	height: 100vh;
	background: var(--white);
	z-index: 12;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	visibility: hidden;
	opacity: 0;
}
.menu_container.active
{
	visibility: visible;
	opacity: 1;
	right: 0;
}
.menu
{
	position: absolute;
	top:150px;
	left: 0;
	padding-left: 15%;
}
.menu_list
{
	-webkit-transform: translateY(3.5rem);
	-moz-transform: translateY(3.5rem);
	-ms-transform: translateY(3.5rem);
	-o-transform: translateY(3.5rem);
	transform: translateY(3.5rem);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 1000ms 600ms ease;
	opacity: 0;
}
.menu_container.active .menu_list
{
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
}
.menu_item
{
	margin-bottom: 9px;
}
.menu_item a
{
	font-size: 36px;
	font-weight: 700;
	color: var(--text-dark);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_item a:hover
{
	color: var(--primary-color);
}
.menu_close_container
{
	position: absolute;
	top: 86px;
	right: 79px;
	width: 21px;
	height: 21px;
	cursor: pointer;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.menu_close
{
	top: 9px;
	width: 21px;
	height: 3px;
	background: var(--text-dark);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close::after
{
	display: block;
	position: absolute;
	top: -9px;
	left: 9px;
	content: '';
	width: 3px;
	height: 21px;
	background: var(--text-dark);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close_container:hover .menu_close,
.menu_close_container:hover .menu_close::after
{
	background: var(--primary-color);
}

/*********************************
4.1 Menu Social
*********************************/

.menu_social_container
{
	margin-top: 100px;
	-webkit-transform: translateY(3.5rem);
	-moz-transform: translateY(3.5rem);
	-ms-transform: translateY(3.5rem);
	-o-transform: translateY(3.5rem);
	transform: translateY(3.5rem);
	-webkit-transition: all 1000ms 1000ms ease;
	-moz-transition: all 1000ms 1000ms ease;
	-ms-transition: all 1000ms 1000ms ease;
	-o-transition: all 1000ms 1000ms ease;
	transition: all 1000ms 1000ms ease;
	opacity: 0;
	padding-left: 4px;
}
.menu_social_item
{
	display: inline-block;
	margin-right: 30px;
}
.menu_social_item a i
{
	color: var(--text-dark);
}
.menu_social_item a i:hover
{
	color: var(--primary-color);
}
.menu_container.active .menu_social_container
{
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
}

/*********************************
4.2 Menu copyright
*********************************/

.menu_copyright
{
	margin-top: 60px;
	-webkit-transform: translateY(3.5rem);
	-moz-transform: translateY(3.5rem);
	-ms-transform: translateY(3.5rem);
	-o-transform: translateY(3.5rem);
	transform: translateY(3.5rem);
	-webkit-transition: all 1000ms 1200ms ease;
	-moz-transition: all 1000ms 1200ms ease;
	-ms-transition: all 1000ms 1200ms ease;
	-o-transition: all 1000ms 1200ms ease;
	transition: all 1000ms 1200ms ease;
	opacity: 0;
	padding-left: 3px;
}
.menu_container.active .menu_copyright
{
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
}

/*********************************
5. Home
*********************************/

.home
{
	width: 100%;
	height: 100vh;
}

/*********************************
5.1 Hero Slider
*********************************/

.hero_slider_container
{
	width: 100%;
	height: 100%;
}
.hero_slide
{
	width: 100%;
	height: 100%;
}
.hero_slide_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.hero_slide_container
{
	width: 100%;
	height: 100vh;
}
.hero_slide_content
{
	max-width: 80%;
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	-ms-transform: translateY(30px);
	-o-transform: translateY(30px);
	transform: translateY(30px);
}
.hero_slide_content h1
{
	font-size: 72px;
	font-weight: 400;
	color: var(--white);
}
.hero_slide_content h1 span
{
	background: var(--primary-color);
	padding-left: 13px;
	padding-right: 13px;
	margin-left: -12px;
	margin-right: -12px;
}
.animated
{
	-webkit-animation-duration : 1s !important;
	animation-duration : 1s !important;
	-webkit-animation-delay : 500ms;
	animation-delay : 500ms;
}
.animate-out
{
	-webkit-animation-delay : 0ms;
	animation-delay : 0ms;
}

/*********************************
5.2 Hero Slider Navigation
*********************************/

.hero_slider_nav
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(calc(-50% + 30px));
	width: 58px;
	height: 58px;
	background: var(--white);
	z-index: 9;
	cursor: pointer;
}
.hero_slider_nav:hover
{
	background: var(--primary-color);
}
.hero_slider_nav:hover span
{
	color: var(--white);
}
.hero_slider_nav span
{
	display: block;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-heavy-dark);
	line-height: 1;
}
.hero_slider_left
{
	left: 4.32%;
}
.hero_slider_right
{
	right: 4.32%;
}

/*********************************
6. Hero Boxes
*********************************/

.hero_boxes
{
	width: 100%;
	height: 0px;
	z-index: 9;
	padding-top: 0px;
}
.hero_boxes_inner
{
	position: absolute;
	top: -212px;
	left: 0;
	width: 100%;
}
.hero_box
{
	width: 100%;
	height: 161px;
	background: var(--black);
	padding-left: 50px;
	cursor: pointer;
}
.hero_box:hover
{
	background: var(--primary-color);
}
.hero_box img
{
	width: 62px;
	height: auto;
	margin-top: -6px;
}
.svg path
{
	fill: var(--primary-color);
}
.hero_box svg
{
	width: 62px;
	height: auto;
}
.hero_box:hover svg path
{
	fill: var(--white);
}
.hero_box_content
{
	padding-left: 13px;
	padding-top: 11px;
	margin-top: -6px;
}
.hero_box_title
{
	font-size: 24px;
	font-weight: 500;
	color: var(--white);
	margin-bottom: 7px;
}
.hero_box_link
{
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--white);
	padding-left: 3px;
}
.hero_box_link:hover
{
	color: var(--black);
}

/*********************************
7. Page Section
*********************************/

.page_section
{
	padding-top: 117px;
	padding-bottom: 117px;
}
.section_title h1
{
	display: block;
	color: var(--black);
	font-weight: 500;
	padding-top: 24px;
}
.section_title h1::before
{
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 55px;
	height: 4px;
	content: '';
	background: var(--primary-color);
}

/*********************************
8. Buttons
*********************************/

.button
{
	cursor: pointer;
}
.button:hover
{
	box-shadow: 0px 10px 20px var(--color-04);
}
.button a
{
	font-size: 14px;
	line-height: 48px;
	font-weight: 700;
	text-transform: uppercase;
}
.button_1
{
	width: 202px;
	height: 48px;
}

/*********************************
9. Popular
*********************************/

.course_boxes
{
	margin-top: 68px;
}
.card
{
	display: block;
	background: var(--card-bg);
	border: none;
}
.card-img-top
{
	border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.card-body
{
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	padding-right: 15px;
}
.card-title
{
	margin-top: 55px;
}
.card-title a
{
	font-size: 22px;
	font-weight: 500;
	color: var(--black);
	line-height: 1.2;
}
.card-title a:hover
{
	color: var(--link-hover-muted);
}
.card-text
{
	font-size: 14px;
	font-weight: 500;
	color: var(--text-light);
	margin-top: -12px;
}
.price_box
{
	width: 100%;
	height: 67px;
	background: var(--box-bg);
	margin-top: 41px;
	padding-left: 35px;
}
.course_author_image
{
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
}
.course_author_name
{
	font-size: 14px;
	font-weight: 500;
	color: var(--black);
	padding-left: 20px;
	margin-top: 7px;
}
.course_author_name span
{
	color: var(--text-light);
}
.course_price
{
	width: 67px;
	height: 67px;
	background: var(--primary-color);
	margin-left: auto;
}
.course_price span
{
	color: var(--white);
	font-size: 18px;
	font-weight: 500;
	margin-top: 7px;
}

/*********************************
10. Register
*********************************/

.register
{
	width: 100%;
}
.register_section
{
	width: 100%;
	background: var(--primary-color);
	padding-top: 156px;
	padding-bottom: 161px;
}
.register_content
{
	width: 522px;
}
.register_title
{
	color: var(--white);
	margin-bottom: 16px;
	line-height: 1.63;
}
.register_title:last-child
{
	margin-bottom: 0px;
}
.register_title	span
{
	color: var(--black);
}
.register_text
{
	color: var(--white);
	font-weight: 500;
	margin-top: 32px;
	padding-left: 25px;
	padding-right: 25px;
	margin-bottom: 0px;
}
.register_button
{
	background: var(--black);
	margin-top: 65px;
}
.register_button a
{
	color: var(--white);
}

/*********************************
11. Search
*********************************/

.search_section
{
	width: 100%;
	height: 100%;
	background: var(--search-bg);
}
.search_content
{
	width: 522px;
}
.search_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: 0.23;
}
.search_title
{
	color: var(--black);
}

/*********************************
11.1 Search Form
*********************************/

.search_form
{
	margin-top: 57px;
}
.input_field
{
	width: 100%;
	height: 42px;
	background: var(--white);
	box-sizing: border-box;
	border: solid 2px var(--white);
	padding-left: 25px;
	margin-bottom: 24px;
}
input:last-of-type
{
	margin-bottom: 0px;
}
.input_field:focus
{
	outline: none !important;
	border: solid 2px var(--primary-color);
}
.search_submit_button
{
	width: 100%;
	height: 48px;
	background: var(--primary-color);
	color: var(--white);
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	margin-top: 28px;
	border: none;
	cursor: pointer;
}
.search_submit_button:hover
{
	box-shadow: 0px 10px 20px var(--color-04);
}
.search_submit_button:focus
{
	outline: solid 2px var(--white);
}

/*********************************
12. Services
*********************************/

.services
{
	padding-bottom: 76px;
}
.services_row
{
	margin-top: 65px;
}
.service_item
{
	margin-bottom: 41px;
}
.service_item h3
{
	font-size: 22px;
	font-weight: 500;
	color: var(--black);
	margin-bottom: 13px;
}
.service_item p
{
	font-size: 14px;
	font-weight: 500;
	color: var(--text-light);
	max-width: 100%;
	margin-bottom: 0px;
}
.icon_container
{
	height: 41px;
	width: auto;
	margin-bottom: 30px;
}
.icon_container img
{
	height: 100%;
}

/*********************************
13. Testimonials
*********************************/

.testimonials
{
	width: 100%;
	background: var(--black);
}
.testimonials_background_container
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.testimonials_background
{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	opacity: 0.27;
}
.testimonials .section_title h1
{
	color: var(--white);
}
.testimonials_slider_container
{
	padding-left: 30px;
	padding-right: 30px;
	margin-top: 56px;
}
.testimonials_item
{
	width: 100%;
	padding-bottom: 75px;
}
.quote
{
	font-size: 36px;
	color: var(--primary-color);
}
.testimonials_text
{
	color: var(--white);
	margin-bottom: 0px;
}
.testimonial_user
{
	margin-top: 43px;
}
.testimonial_image
{
	width: 98px;
	height: 98px;
	border-radius: 50%;
	overflow: hidden;
}
.testimonial_image img
{
	width: 100%;
	height: auto;
}
.testimonial_name
{
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--testimonial-highlight);
	margin-top: 21px;
}
.testimonial_title
{
	font-size: 14px;
	font-weight: 500;
	color: var(--white);
	margin-top: 6px;
}
.testimonials_slider .owl-dots
{
	display: -webkit-box !important;
	display: -moz-box !important;
	display: -ms-flexbox !important;
	display: -webkit-flex !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: center;
	align-items: center;
}
.testimonials_slider .owl-dot span
{
	width: 8px !important;
	height: 8px !important;
	border: solid 2px var(--white);
	background: transparent !important;
}
.testimonials_slider .owl-dot.active span
{
	width: 16px !important;
	height: 16px !important;
	border: none;
	background: var(--primary-color) !important;
}

/*********************************
14. Events
*********************************/
.event_item {
	margin-bottom: 6rem; /* 96px approx */
	margin-top: 2rem;
	background-color: var(--event-bg);
	border-radius: 1.5rem; /* Rounded corners for better appearance */
	box-shadow: 0 0.5rem 0.9375rem var(--color-05);
	transition: box-shadow 0.3s ease, opacity 0.5s ease, transform 0.3s ease, border-radius 0.3s ease;
	transform: translateX(-6.25rem);

  }
  
  /* Hover Effect on Event Item */
  .event_item:hover {
	box-shadow: 0 0.75rem 1.25rem var(--color-06);
	transform: translateY(-0.3125rem) !important; /* -5px approx */
	border-radius: 1.5rem; /* Maintain border-radius consistency on hover */
  }
  
.event_date {
	width: 80%;  /* Set width to 80% */
	height: auto;  /* Auto height to maintain proportions */
	border: solid 0.125rem var(--base-bg);  /* 2px approx */
	border-radius: 0.5rem;  /* Rounded corners for the rectangle */
	margin-bottom: 1.125rem;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: auto;  /* Center align horizontally */
	margin-right: auto;  /* Center align horizontally */
	padding: 1rem;  /* Add padding for content */
	text-align: center;  /* Center text inside the box */
  }
  
  
  /* Event Image Styling */
  .event_image {
	width: 100%;
	height: auto;  /* Maintains aspect ratio */
	border-radius: 1.5rem;  /* Rounded corners for the image */
	transition: border-radius 0.3s ease;
  }
  
  /* Hover effect for event images */
  .event_image img:hover {
	border-radius: 1.5rem; /* Maintain rounded corners on hover */
  }
  
  /* Event Content Styling */
  .event_content {
	padding: 1.5rem;
	background-color: var(--light-bg); /* Light background for readability */
	border-radius: 1.5rem; /* Rounded corners for event content */
  }
  
  /* Event Day and Month Styling */
  .event_day {
	font-size: 3rem;  /* 48px approx */
	font-weight: 700;
	color: var(--base-bg);
	margin-bottom: 0.0625rem; /* 1px approx */
	line-height: 1;
	transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .event_month {
	font-size: 1.25rem;  /* 20px approx */
	font-weight: 700;
	color: var(--base-bg);
  }
  
  /* Event Name Styling */
  .event_name a {
	font-size: 1.375rem;  /* 22px approx */
	font-weight: 500;
	color: var(--black);
	text-decoration: none;
  }
  
  .event_name a:hover {
	color: var(--primary-color);
  }
  
  /* Event Location Styling */
  .event_location {
	font-size: 0.875rem;  /* 14px approx */
	font-weight: 500;
	color: var(--color-07) !important;
	margin-top: 0.125rem; /* 2px approx */
  }
  
  /* Event Description Styling */
  .event_content p {
	font-weight: 500;
	color: var(--color-07);
	margin-top: 1.3125rem;
	margin-bottom: 0.8125rem;
	margin-left: 0;
  }
  

/* The following .col-lg-6 styling is adjusted for desktop.
   On smaller devices the absolute positioning is removed via media queries. */
   .col-lg-6 {
	position: absolute !important;
	left: 0.625rem !important; /* 10px approx */
	top: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
  }
  

.row {
top: 0;
}

.col_the_sec {
  margin-top: 9.375rem !important;  /* 150px approx */
  position: relative;
  top: -4.75rem; /* 76px approx */
}

.event_image img {
	width: 100%;  /* Image takes up full width */
	height: auto;  /* Maintains aspect ratio */
	border-radius: 10px;  /* Keeps border radius */
  }
/* ------------------------------ */
/* Tablet Responsive Adjustments  */
/* ------------------------------ */
@media (max-width: 992px) {
  .col-lg-6 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
  }
  .col_the_sec {
    margin-top: 2rem !important;
    top: 0;
  }
  .event_item {
    margin-bottom: 3rem;
    transform: translateX(0);
  }
  .event_date {
    width: 7rem;
    height: 7rem;
    margin-bottom: 1rem;
  }
  .event_day {
    font-size: 2.5rem;
  }
  .event_month {
    font-size: 1rem;
  }
  .event_name a {
    font-size: 1.25rem;
  }
}

/* ------------------------------ */
/* Mobile Responsive Adjustments  */
/* ------------------------------ */
@media (max-width: 600px) {
  .event_item {
    margin-bottom: 2rem;
    border-radius: 1.5rem;
    transform: none; /* Remove off-screen positioning if needed */
  }
  .event_date {
    width: 5rem;
    height: 5rem;
    margin-bottom: 0.5rem;
  }
  .event_day {
    font-size: 1.5rem;
  }
  .event_month {
    font-size: 0.875rem;
  }
  .event_name a {
    font-size: 1rem;
  }
  .event_content p {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
}


/*********************************
15. Footer
*********************************/

.footer
{
	width: 100%;
	padding-top: 86px;
	background: var(--black);
}
.footer .section_title h1
{
	color: var(--white);
}

/*********************************
15.1 Newsletter
*********************************/

.newsletter
{
	padding-bottom: 85px;
	border-bottom: solid 2px var(--footer-border);
}
.newsletter_form_container
{
	width: 60%;
	margin-top: 48px;
}
.newsletter_email
{
	width: calc(100% - 164px);
	height: 42px;
	border: none;
	padding-left: 27px;
	font-weight: 500;
	color: var(--black);
}
.newsletter_email:focus
{
	outline: solid 2px var(--primary-color);
}
.newsletter_submit_btn
{
	width: 164px;
	height: 42px;
	border: none;
	background: var(--primary-color);
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}
.newsletter_submit_btn:focus
{
	border: solid 2px var(--white);
}

/*********************************
15.2 Footer Content
*********************************/

.footer_content 
{
	padding-top: 80px;
	padding-bottom: 83px;
	border-bottom: solid 2px var(--footer-border);
}
.footer_content .logo_container
{
	padding-left: 0px;
}
.footer_content .logo span
{
	color: var(--white);
}
.footer_about_text
{
	margin-top: 24px;
	margin-bottom: 0px;
}
.footer_column_title
{
	font-size: 18px;
	font-weight: 500;
	color: var(--white);
	padding-top: 15px;
}
.footer_column_content
{
	margin-top: 32px;
}
.footer_list_item
{
	margin-bottom: 11px;
}
.footer_list_item a
{
	font-size: 14px;
	color: var(--text-light);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.footer_list_item a:hover
{
	color: var(--primary-color);
}
.footer_contact_item
{
	font-size: 14px;
	font-weight: 400;
	color: var(--text-light);
	margin-bottom: 22px;
}
.footer_contact_item:last-child
{
	margin-bottom: 0px;
}
.footer_contact_icon
{
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	margin-right: 10px;
}
.footer_contact_icon img
{
	width: 100%;
}

/*********************************
15.3 Footer Copyright
*********************************/

.footer_bar
{
	padding-top: 19px;
	padding-bottom: 19px;
}
.footer_social .menu_social_item a i
{
	color: var(--white);
}
.footer_social .menu_social_item a i:hover
{
	color: var(--black-true);
}
.footer_social .menu_social_item:last-child
{
	margin-right: 0px;
}
.kkk{
	font-family: "Gulzar", serif !important;
	position: relative;
	right: 10px;
	bottom: 25px;
}
.ooo{
	position: relative !important;
	left: 10px;
}
.hero_slide_background{
	filter:blur(3px)brightness(0.7);
}
.emi{
	color: var(--text-heavy-dark);
}
.slide_lider{
	font-size: xx-large;
}
.mySwiper:focus .mySwiper:active .mySwiper:hover{
	cursor:grab;
}
.slide_lider:hover{
	cursor: grab;
}
.slide_lider:focus .slide_liders:active{
	cursor: grabbing;
}
body{
	font-family: "Alexandria", serif;
	background-color: var(--base-bg);
	height: auto;
}
.main_nav_item{
	font-size: x-small;
}
.gh_img{
	height: 850px;
	position: absolute;
	left: 50%;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);	
	top: 100px;
	border-radius: 10px;
	max-width: 90%;
	height: auto;
}
.ghabooli{
	display: grid;
  	grid-template-columns: repeat(7, 100px);
}
.gallink{
	color:darkgrey !important;
}
.nnn{
	font-family: "Gulzar", serif !important;
}
.emkan_sec{
	color: var(--black);
	background-color: var(--event-bg);
	width: 100% !important;
	height: 600px !important;
	margin-top: 20px !important;
	margin-bottom: 0px !important;
	border-radius: 10px;
	
}
.emkan_mtn{
	margin: 0;
	position: absolute;
	left: 50%;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	top: 70px;
}
.emkan_ico{
	width: 60px;
	margin: 0;
	position: absolute;
	left: 50%;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);	
}
.emkan_img{
	width: 80%;
	margin: 0;
	height: 470px;
	position: absolute;
	left: 50%;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);	
	bottom: 10%;
}
a{
	color: var(--text-light);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a:hover
{
	color: var(--primary-color);
}
.ghr_img{
	position: relative;
	width: 90%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 10px;
}
.contactD{
	height: 1000px;
}
.loader {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--main_color);
	position: fixed;
  }
  .loader:before,
  .loader:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	inset: 0;
	background: var(--event-bg);
	transform: rotate(0deg) translate(30px);
	animation: rotate 1s ease infinite;
  }
  .loader:after {
	animation-delay: 0.5s
  }
  @keyframes rotate {
	100% {transform: rotate(360deg) translate(30px)
  }
  }
.preloader{
	width: 100vw;
	height: 100vh;
	background: var(--color-08);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	transform:opacity 2s ease, visibility 2s ease;
	z-index: 100;
}
.loader_b-hidden{
	opacity: 0;
	visibility: hidden;
}
.swiper {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
  }

  .swiper-slide {
	background-position: center;
	background-size: cover;
	width: 500px;
	height: 400px;
  }

  .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
  }
.blank_img{
	background-color: var(--box-bg);
}
/*********************************
10. About
*********************************/

.about_title
{
	font-size: 36px;
	font-weight: 500;
	color: var(--black);
}
.about_text
{
	margin-top: 20px;
}
.contact_info
{
	margin-top: 64px;
	padding-left: 46px;
}
.contact_info_item
{
	font-size: 14px;
	font-weight: 400;
	color: var(--contact-text-muted);
	margin-bottom: 22px;
}
.contact_info_item:last-child
{
	margin-bottom: 0px;
}
.contact_info_icon
{
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	margin-right: 10px;
}
.contact_info_icon img
{
	width: 100%;
}
  
.animate {
	animation: slide-in 1s both cubic-bezier(.52,.52,0,.98);
  }
  
  @keyframes slide-in {
	0% {
	  transform: translateY(-1000px) translateX(-50%);
	  left: 50%;
	}
	100% {
	  transform: translateY(0) translateX(-50%);
	  left: 50%;
	}
  }
/* General Footer Styles */
.footer {
	text-align: center; /* Move text-align: center here instead of inline style */
 }
 
 /* Footer Column Styles */
 .footer_col {
	padding: 20px;
 }
 
 /* Footer Column Title */
 .footer_column_title {
	font-weight: bold;
	margin-bottom: 15px;
 }
 
 /* Footer Content Links */
 .footer_column_content ul {
	list-style-type: none;
	padding: 0;
 }
 
 .footer_column_content .footer_list_item a {
	text-decoration: none;
	color: inherit; /* Prevents text color issues */
	transition: color 0.3s ease;
 }
 
 .footer_column_content .footer_list_item a:hover {
	color:var(--primary-color); /* Adds hover effect */
 }
 
 /* Footer Contact Icons */
 .footer_contact_icon img {
	width: 20px;
	height: 20px;
	margin-right: 10px;
 }
 
 @keyframes slideIn {
	from {
	  transform: translateX(-100px);
	  opacity: 0;
	}
	to {
	  transform: translateX(0);
	  opacity: 1;
	}
  }