@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
	5.1 Hero Slider
	5.2 Hero Slider Navigation
6. Hero Boxes
7. Page Section
8. Buttons
9. Popular
10. Register
11. Footer
	11.1 Newsletter
	11.2 Footer Content
	11.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 (FIXED SIZE)
*********************************/
.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: 60vh;
}

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

.hero_slider_container
{
	width: 100%;
	height: 60vh;
}
.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
{
	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
   	height: 60vh; /* Ensure this matches the parent height */
}
.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: 40px;
	font-weight: 300;
	color: #FFFFFF;
}
.hero_slide_content h1 span
{
	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: #FFFFFF;
	z-index: 9;
	cursor: pointer;
}
.hero_slider_nav:hover
{
	background: #ee9b31;
}
.hero_slider_nav:hover span
{
	color: #FFFFFF;
}
.hero_slider_nav span
{
	display: block;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	color: #121212;
	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: #1a1a1a;
	padding-left: 50px;
	cursor: pointer;
}
.hero_box:hover
{
	background: #091746;
}
.hero_box img
{
	width: 62px;
	height: auto;
	margin-top: -6px;
}
.svg path
{
	fill: #ee9b31;
}
.hero_box svg
{
	width: 62px;
	height: auto;
}
.hero_box:hover svg path
{
	fill: #FFFFFF;
}
.hero_box_content
{
	padding-left: 13px;
	padding-top: 11px;
	margin-top: -6px;
}
.hero_box_title
{
	font-size: 24px;
	font-weight: 500;
	color: #FFFFFF;
	margin-bottom: 7px;
}
.hero_box_link
{
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	color: #FFFFFF;
	padding-left: 3px;
}
.hero_box_link:hover
{
	color: #1a1a1a;
}

/*********************************
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: '';
	
}

/*********************************
9. Popular Courses Section Fix
*********************************/
.popular {
    background: #030f2c !important;
    padding: 100px 0; /* Increased padding for better breathing room */
}

/* Fix for the Section Heading */
.popular .section_title h1 {
    color: #FFFFFF !important; /* Forces text to be white */
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 50px; /* Space between title and the course cards */
    position: relative;
    display: inline-block;
}

/* Optional: Add the yellow accent line under the "Popular Courses" text */
.popular .section_title h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #007BFF;
}

/* Course Card Styling */
.popular .card {
    background: #091746 !important; 
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
    border: none;
    margin-bottom: 30px; /* Space for mobile stacking */
}

.popular .card:hover {
    transform: translateY(-10px); /* Subtle lift effect */
}

/* Image Wrapper */
.card_img_wrapper {
    position: relative;
    overflow: hidden;
    height: 220px; 
}

.card_img_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Colorful line under the image */
.card_img_wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #ffb606, #ff4e50, #8e44ad);
}

/* Course Title Link */
.popular .card-title {
    padding: 20px 10px;
}

.popular .card-title a {
    color: #007BFF !important;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.popular .card-title a:hover {
    color: #ffffff !important;
}

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

.register {
    width: 100%;
}

.register_section {
    width: 100%;
    background: #030f2c;
    padding-top: 156px;
    padding-bottom: 161px;
}

.register_content {
    width: 522px;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Ensures text inside is centered */
}

.register_title {
    color: #FFFFFF;
    margin-bottom: 16px;
    line-height: 1.63;
}

.register_title:last-child {
    margin-bottom: 0px;
}

/* Changed span from black to white/cyan to be visible on dark background */
.register_title span {
    color: #38bdf8; 
}

.register_text {
    color: #FFFFFF;
    font-weight: 500;
    margin-top: 32px;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 0px;
}

.register_button {
    background: #007bff; /* Changed from black to professional Blue */
    margin-top: 65px;
    display: inline-block; /* Required for transform effects */
    padding: 15px 40px;
    border-radius: 50px;
    transition: all 0.3s ease; /* Smooth transition for hover */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

.register_button a {
    color: #FFFFFF; /* Changed text to pure white */
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
}

/* ADDED HOVER EFFECT */
.register_button:hover {
    background: #0056b3; /* Darker blue on hover */
    transform: translateY(-5px); /* Lifts the button up */
    box-shadow: 0px 12px 20px rgba(0, 123, 255, 0.3); /* Adds glow */
}

.register_button:hover a {
    color: #FFFFFF; /* Ensures text stays white on hover */
}


/*********************************
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;
}