@charset "utf-8";
/* CSS Document */

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

[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. Elements
	8.1 Buttons
	8.2 Progress Bars
	8.3 Accordions
	8.4 Loaders
	8.5 Milestones
	8.6 Icon Boxes
9. Footer
	9.1 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: #FFFFFF;
	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);
}

body {
    background-color: #030f2c !important; /* Page background below the header image */
}

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

/* =======================================================
    CSS FIXES FOR LOGIN SPACING AND BUTTON
    (Keep your existing rules below this)
    ======================================================= */

/* --- CORE LAYOUT STYLES (REQUIRED FOR ALIGNMENT) --- */

/* Main wrapper to contain illustration and form side-by-side */
.registration-page-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically centers content */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Contains the border-radius */
    max-width: 1000px; /* Adjust as needed for width */
    margin: 0 auto; /* Centers the whole wrapper */
}

/* Illustration section (Image + Text) */
.registration-illustration {
    flex: 1; /* Takes 50% width on large screens */
    padding: 30px;
    background-color: #e6f7ff; /* Light background for the illustration side */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%; /* Ensure it matches the form card height */
}

.registration-illustration img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Form section */
.registration-form-card {
    flex: 1; /* Takes 50% width on large screens */
    padding: 40px;
}

/* Specific styling for the login form card (optional, adjust if needed) */
.login-card {
    padding: 50px 40px; /* Slightly more padding for login for a cleaner look */
}

/* Form elements spacing and full-width inputs */
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box; /* Important for full-width sizing */
    transition: border-color 0.3s;
}
.form-group input:focus {
    border-color: #17a2b8;
    outline: none;
}
.form-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
}
.login-prompt {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

/* Media Query for smaller screens (mobile/tablet) */
@media (max-width: 991px) {
    .registration-page-wrapper {
        flex-direction: column;
        max-width: 600px; /* Smaller max-width on mobile */
    }
    .registration-illustration {
        display: none; /* Hide illustration on small screens for better focus */
    }
    .registration-form-card {
        padding: 30px;
        width: 100%; /* Form takes full width */
    }
}
/* --- END CORE LAYOUT STYLES --- */


/* =======================================================
    CSS FIXES FOR LOGIN SPACING AND BUTTON
    (Your existing rules)
    ======================================================= */

.login_area {
    /* Increased vertical padding to give generous space above and below the card */
    padding-top: 100px; 
    padding-bottom: 120px;
    background-color: #030F2C; 
}

/* Specific Login Wrapper adjustments (to swap form/illustration order) */
.login-wrapper {
    flex-direction: row-reverse; /* Illustration on Left, Form on Right */
}
/* This media query is now redundant but kept for safety */
@media (max-width: 991px) {
    .login-wrapper {
        flex-direction: column; 
    }
}

/* Login Button Styling (Teal/Green Button, same visual style as Register) */
.btn-login {
    width: 100%;
    padding: 14px 20px;
    background-color: #20c997; /* Teal/Green color */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    /* Margin for vertical space below the Forgot Password link and above the button */
    margin-top: 25px;
}

.btn-login:hover {
    background-color: #17a2b8;
    transform: translateY(-1px);
}

/* Forgot Password Link - Ensure it has enough space below it */
.forgot-password-link {
    text-align: right;
    margin-bottom: 15px; /* Adds space between link and the button group */
}

/*********************************
8. Elements
*********************************/

.elements
{
	width: 100%;
	padding-top: 109px;
	padding-bottom: 106px;
}
.elements_title
{
	font-size: 24px;
	font-weight: 500;
	color: #1a1a1a;
}

/*********************************
8.1 Buttons
*********************************/

.buttons_container
{
	margin-top: 107px;
}
.button
{
	display: inline-block;
	width: 188px;
	height: 53px;
	vertical-align: middle;
	margin-right: 9px;
	margin-bottom: 15px;
}
.button:hover
{
	box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.button a
{
	line-height: 53px;
	display: block;
	font-size: 16px;
	font-weight: 700;
}
.button_color_1
{
	background: #ffb606;
}
.button_color_1 a
{
	color: #FFFFFF;
}
.button_color_2
{
	background: #1a1a1a;
}
.button_color_2 a
{
	color: #FFFFFF;
}
.button_line_1
{
	background: transparent;
	border: solid 2px #ffb606;
}
.button_line_1 a
{
	color: #ffb606;
}
.button_line_2
{
	background: transparent;
	border: solid 2px #1a1a1a;
}
.button_line_2 a
{
	color: #1a1a1a;
}

/*********************************
8.2 Progress Bars
*********************************/

.pbars_accordions
{
	margin-top: 94px;
}
.pbars_accordions_container
{
	padding-top: 104px;
}
.pbar_container
{
	background: #f8f4f4;
	padding-left: 99px;
	padding-right: 97px;
	padding-top: 46px;
	padding-bottom: 45px;
}
.pb_item
{
	margin-bottom: 18px;
}
.pb_item h4
{
	color: #1a1a1a;
	font-weight: 400 !important;
	padding-left: 2px;
	margin-bottom: 13px;
}
.skill_bars
{
	height: 5px;
}

/*********************************
8.3 Accordions
*********************************/

.elements_accordions
{
	
}
.accordion_container
{
	margin-bottom: 15px;
}
.accordion
{
	height: 60px;
	width: 100%;
	background: #f8f4f4;
	padding-left: 30px;
	cursor: pointer;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.accordion.active
{
	background: #ffb606;
	color: #FFFFFF;
}
.accordion:active
{
	background: #ffb606 !important;
	color: #FFFFFF;
}
.accordion::after
{
	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: 0;
	right: 0;
	width: 62px;
	height: 100%;
	content: '+';
	background: #ffb606;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: 500;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.accordion.active::after
{
	content: '-';
}
.accordion:hover
{
	background: #e4e4e4;
}
.accordion_panel
{
	padding-left: 30px;
	padding-right: 30px;
	max-height: 0;
	overflow: hidden;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.accordion_panel p
{
	padding-top: 15px;
}

/*********************************
8.4 Loaders
*********************************/

.loaders
{
	margin-top: 119px;
}
.elements_loaders_container
{
	margin-top: 60px;
}
.loader
{
	width: 195px;
	height: 195px;
	margin: 0 auto;
}
.loader_text
{
	font-size: 16px;
	font-weight: 500;
	color: #1a1a1a;
	margin-top: 26px;
}
.loader .progressbar-text
{
	top: 50% !important;
}
.loader_sub
{
	font-size: 15px;
	font-weight: 400;
	color: #a5a5a5;
	margin-top: 5px;
}

/*********************************
8.5 Milestones
*********************************/

.milestones
{
	width: 100%;
	margin-top: 102px;
}
.milestones_container
{
	width: 100%;
	padding-top: 118px;
	padding-bottom: 107px;
	margin-top: 108px;
}
.milestones_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
.milestone
{
	width: 100%;
}
.milestone_icon
{
	display: inline-block;
	width: 70px;
	height: 70px;
}
.milestone_icon img
{
	width: 100%;
}
.milestone_counter
{
	font-size: 36px;
	font-weight: 500;
	color: #ffb606;
	line-height: 1;
	margin-top: 41px;
}
.milestone_text
{
	font-size: 22px;
	font-weight: 500;
	color: #FFFFFF;
	margin-top: 3px;
}

/*********************************
8.6 Icon Boxes
*********************************/

.icon_boxes
{
	margin-top: 112px;
}
.icon_boxes_container
{
	margin-top: 109px;
}
.icon_box
{
	
}
.icon_box h3
{
	font-family: 'Roboto', sans-serif;
	font-size: 22px;
	font-weight: 500;
	color: #1a1a1a;
	margin-bottom: 13px;
}
.icon_box p
{
	font-size: 14px;
	font-weight: 500;
	color: #a5a5a5;
	max-width: 100%;
	margin-bottom: 0px;
}
.icon_container
{
	height: 41px;
	width: auto;
	margin-bottom: 30px;
}
.icon_container img
{
	height: 100%;
}

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