@charset "utf-8";
/* 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
7. Page Section
8. Buttons
9. Popular
10. Footer
	10.1 Newsletter
	10.2 Footer Content
	10.3 Footer Copyright


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

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

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800|Roboto:400,500,700');

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

*
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 400;
	background: #030F2C;
	color: #a5a5a5;
}
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-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 2.29;
	font-weight: 400;
	color: #a5a5a5;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
	display: inline;
	position: relative;
	color: inherit;
	border-bottom: solid 1px #ffa07f;
	-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: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
	position: relative;
	color: #FF6347;
}
p a:hover
{
	color: #FFFFFF;
	background: #ffa07f;
}
p a:hover::after
{
	opacity: 0.2;
}
::selection
{
	background: #FFD266;
	color: #C88E00;
}
p::selection
{
	background: #FFD266;
	color: #C88E00;
}
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
{
	font-family: 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.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: #a5a5a5 !important;
}
:-moz-placeholder /* older Firefox*/
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #a5a5a5 !important;
}
::-moz-placeholder /* Firefox 19+ */ 
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #a5a5a5 !important;
} 
:-ms-input-placeholder
{ 
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #a5a5a5 !important;
}
::input-placeholder
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #a5a5a5 !important;
}
.form-control
{
	color: #db5246;
}
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 & Navigation Unified
*********************************/
.header {
    background: #FFFFFF !important; /* White theme */
    height: 90px;
    padding: 0 40px;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 1000;
}

.header_content {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

/* 1. Logo Section - Fixed area to prevent menu shifting */
.logo_container {
    flex: 0 0 auto;
    min-width: 250px;
}

/* 2. Navigation Section - Perfectly Centered with Equal Gaps */
.main_nav_container {
    flex: 1;
    display: flex;
    justify-content: center;
}

.main_nav_list {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main_nav_item {
    /* Set exactly the same gap for Home, Courses, Registration, Contact */
    margin: 0 25px; 
    position: relative;
}

.main_nav_item a {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    color: #030F2C !important; /* Dark Blue contrast */
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    transition: all 0.3s ease;
    display: block;
}

/* Sliding Underline Effect */
.main_nav_item a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #1a2a5a; /* Updated to match new professional blue */
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.main_nav_item a:hover {
    color: #1a2a5a !important;
}

.main_nav_item a:hover::after {
    visibility: visible;
    width: 100%;
}

/* 3. Login Section - Royal Blue Gradient (No Yellow) */
.header_side {
    flex: 0 0 auto;
    min-width: 150px;
    display: flex;
    justify-content: flex-end;
}

.login_btn {
    background: linear-gradient(45deg, #030f2c, #1a2a5a) !important; 
    padding: 12px 30px !important;
    border-radius: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    border: none;
    text-decoration: none !important;
}

.login_btn span {
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.login_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 8px 20px rgba(3, 15, 44, 0.3);
    filter: brightness(1.2);
}

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

.logo_container {
    display: flex !important;
    align-items: center; 
    flex-shrink: 0;
}

/* Fix the image to be auto-sizing */
.main_header_logo {
    height: 50px;       /* Set your preferred height */
    width: auto;        /* Let the width adjust automatically */
    display: block;
    object-fit: contain; /* Ensures it never distorts */
}

/* Remove old logo group margins if necessary */
.logo_group_final {
    margin-left: 0 !important; 
}

/*********************************
    Language Selector
*********************************/

/* Language Switcher - Proper Gapping and Underline */
.language_selector {
    display: flex;
    align-items: center;
    gap: 15px; 
    margin-right: 25px;
}

.language_selector a {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #000000 !important;
    display: inline-block;
    padding-bottom: 2px; /* Space between text and underline */
    border-bottom: 2px solid transparent; /* Hidden by default */
}

/* This is the part that shows the underline for whichever is active */
.language_selector a.active {
    border-bottom: 2px solid #000000 !important;
}

.language_selector span {
    color: #000000;
    opacity: 0.3;
}

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

.main_nav_container {
    display: flex;
    align-items: center;
    justify-content: center; /* Centers the menu between logo and login */
    flex: 1;
}

.main_nav_list {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main_nav_item {
    display: inline-block;
    /* This creates a total 50px gap (25px on each side of every item) */
    margin: 0 25px; 
    position: relative;
}

/* Remove the extra margin from the last item to keep it perfectly centered */
.main_nav_item:last-child {
    margin-right: 0px;
}

.main_nav_item a {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    color: #030F2C !important; /* Professional Dark Blue */
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    transition: all 0.3s ease;
    display: block;
}

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

.header_side {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.login_btn {
    /* Professional Blue Gradient */
    background: linear-gradient(45deg, #030f2c, #1a2a5a) !important; 
    padding: 12px 30px !important;
    border-radius: 50px !important; /* Pill shape */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    text-decoration: none !important;
    box-shadow: 0px 4px 15px rgba(3, 15, 44, 0.2);
}

.login_btn span {
    color: #FFFFFF !important; /* White Text */
    font-family: 'Open Sans', sans-serif;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

/* Hover Effect: Glow & Slight Lift */
.login_btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0px 8px 20px rgba(26, 42, 90, 0.4);
    background: linear-gradient(45deg, #1a2a5a, #030f2c) !important;
}

.login_btn:hover span {
    color: #FFFFFF !important;
}

/*********************************
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: #3a3a3a;
}
.hamburger_container:hover i
{
	color: #030f2c;
}

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

.menu_container
{
	position: fixed;
	top: 0;
	right: -50vw;
	width: 50vw;
	height: 100vh;
	background: #FFFFFF;
	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-family: 'Open Sans', sans-serif;
	font-size: 36px;
	font-weight: 700;
	color: #3a3a3a;
	-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: #030f2c;
}
.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: #3a3a3a;
	-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: #3a3a3a;
	-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: #ffb606;
}

/*********************************
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: #3a3a3a;
}
.menu_social_item a i:hover
{
	color: #ffb606;
}
.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: 500px; /* <--- Increase or decrease this height as you like */
    background: #030F2C; /* Matches your requested background */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.home_background_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.home_background {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;      /* Forces image to fill area without stretching */
    background-position: center; /* Keeps the middle of the image visible */
    background-attachment: scroll; 
}

.home_content {
    position: relative;
    z-index: 2;
    padding-top: 90px; /* Pushes content below your 90px fixed white header */
}

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

.page_section
{
	padding-top: 117px;
	padding-bottom: 117px;
}
.section_title
{

}
.section_title h1
{
	display: block;
	color: #1a1a1a;
	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: #ffb606;
}

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

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

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

.popular
{

}
.course_boxes
{
	margin-top: 68px;
}
.course_box
{
	margin-bottom: 108px;
}
.course_box:nth-last-child(-n+3)
{
	margin-bottom: 0px;
}
.card
{
	display: block;
	background: #f8f9fb;
	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: #1a1a1a;
	line-height: 1.2;
}
.card-title a:hover
{
	color: #a5a5a5;
}
.card-text
{
	font-size: 14px;
	font-weight: 500;
	color: #a5a5a5;
	margin-top: -12px;
}
.price_box
{
	width: 100%;
	height: 67px;
	background: #eaebec;
	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: #1a1a1a;
	padding-left: 20px;
	margin-top: 7px;
}
.course_author_name span
{
	color: #a5a5a5;
}
.course_price
{
	width: 67px;
	height: 67px;
	background: #ffb606;
	margin-left: auto;
}
.course_price span
{
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 500;
	margin-top: 7px;
}

/*********************************
11. Footer
*********************************/

.footer {
    width: 100%;
    padding-top: 60px;
    background: #FFFFFF; /* Clean White Background */
    border-top: 1px solid #f0f0f0;
}

/*********************************
11.2 Footer Content
*********************************/

.footer_content {
    padding-bottom: 60px;
    width: 100%;
}

.footer_logo_single {
    height: 50px;       /* Slightly larger for the footer */
    width: auto;        /* Adjusts automatically */
    display: block;
    object-fit: contain;
    margin-bottom: 20px;
}

/* Cleanup: Remove old logo group margins */
.logo_group_final {
    margin-left: 0 !important;
}

/* Ensure footer logos don't try to flex-row anymore */
.footer_logo_row {
    display: block !important;
}

.footer_column_title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer_list_item {
    margin-bottom: 12px;
}

.footer_list_item a {
    color: #555555;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer_list_item a:hover {
    color: #ffb606;
    padding-left: 5px;
}

/* Contact Section Alignment */
.footer_contact_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer_contact_item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
}


/* Contact Icon Styling */
.footer_contact_icon {
    flex-shrink: 0;
    width: 20px; /* Controlled width */
    margin-right: 15px;
    margin-top: 4px;
    display: flex;
    justify-content: center;
}

.footer_contact_icon i {
    font-size: 16px; /* Professional small size */
    color: #1a1a1a; /* Sharp Black */
    transition: color 0.3s ease;
}

/* Optional: Icon turns yellow when you hover over the contact item */
.footer_contact_item:hover i {
    color: #ffb606;
}

.footer_contact_text {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    text-align: left;
}


/*********************************
11.3 Copyright Bar
*********************************/

.footer_bar {
    width: 100%;
    background: #1a1a1a !important; /* Pure Black */
    padding-top: 30px !important;    /* Gap from the top of the bar */
    padding-bottom: 35px !important; /* Gap from the bottom of the screen */
    margin-top: 50px; 
    display: block;
    clear: both;
}

/* This fixes the gap on the right and center-aligns content */
.footer_bar .container {
    max-width: 1140px; 
    margin: 0 auto;
    padding: 0 15px;
}

.footer_bar .row {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
}

.footer_copyright {
    color: #ffffff !important;
    font-size: 13px;
    margin: 0;
}

/* Social Media Icons Container */
.footer_social_icons {
    text-align: right;
}

.footer_social_icons a {
    display: inline-block;
    color: #ffffff !important;
    margin-left: 20px;
    font-size: 18px; /* Slightly larger for easier clicking */
    transition: all 0.3s ease;
}

.footer_social_icons a:hover {
    color: #ffb606 !important;
}