@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. News
	9.1 News Page Nav
10. Sidebar
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: #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
*********************************/

.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%);
	width: 1318px;
	height: 104px;
	background: #FFFFFF;
	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 rgba(0,0,0,0.17);
}
.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 rgba(0,0,0,0.67);
	z-index: -1;
}

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

.logo_container {
    display: inline-block;
    padding-left: 20px; /* Adjust as needed */
}

.logo {
    display: flex;
    align-items: center; /* vertically center logo and text */
}

.logo img {
    width: 60px; /* adjust size as needed */
    height: auto;
}

.logo-text {
    display: flex;
    flex-direction: column; /* stack Thangam and Career Academy */
    margin-left: 10px; /* space between logo and text */
}

.logo-text .main-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
    font-weight: 900;
    color: #ef2c2c;
    text-transform: uppercase;
}

.logo-text .sub-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ef2c2c;
    text-transform: uppercase;
    margin-top: -5px; /* optional: reduce gap between lines */
}

/*********************************
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-family: 'Open Sans', sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	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;
}
.main_nav_item a:hover
{
	color: #ffb606;
}
.main_nav_item.active a {
    color: #ffb606; /* same color as hover or any color you want */
}

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

.header_side
{
	width: 279px;
	height: 100%;
	background: #ffb606;
}
.header_side img
{
	width: 29px;
	height: 29px;
}
.header_side span
{
	display: block;
	position: relative;
	font-size: 18px;
	font-weight: 500;
	color: #FFFFFF;
	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: #3a3a3a;
}
.hamburger_container:hover i
{
	color: #ffb606;
}

/*********************************
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: #ffb606;
}
.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: 27px;
}
.menu_social_item:last-child
{
	margin-right: 0px;
}
.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: 447px;
}
.home_background_container
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.home_background
{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.home_content
{
	position: absolute;
	left: 50%;
	bottom: 109px;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	background: #ffb606;
	padding-top: 24px;
	padding-bottom: 18px;
	padding-left: 39px;
	padding-right: 42px;
}
.home_content h1
{
	font-size: 72px;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 0.5;
	white-space: nowrap;
}

/*********************************
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. News
*********************************/

.news
{
	width: 100%;
	padding-top: 103px;
	padding-bottom: 118px;
}
.news_post
{
	margin-bottom: 85px;
}
.news_post:last-child
{
	/*margin-bottom: 0px;*/
}
.news_post_image
{
	width: 100%;
}
.news_post_image img
{
	width: 100%;
	height: auto;
}
.news_post_top
{
	margin-top: 38px;
}
.news_post_date
{
	width: 68px;
	height: 68px;
	background: #ffb606;
}
.news_post_date div:first-child
{
	font-size: 24px;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1;
}
.news_post_date div:last-child
{
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	color: #FFFFFF;
	line-height: 1;
	margin-top: 3px;
}
.news_post_title_container
{
	padding-left: 31px;
	margin-top: -7px;
}
.news_post_title a
{
	font-size: 36px;
	font-weight: 500;
	line-height: 1.2;
	color: #1a1a1a;
}
.news_post_title a:hover,
.news_post_author a:hover,
.news_post_comments a:hover
{
	color: #a5a5a5;
}
.news_post_meta
{
	color: #1a1a1a;
	margin-top: 5px;
	padding-left: 2px;
}
.news_post_author a
{
	font-size: 12px;
	font-weight: 500;
	color: #1a1a1a;
	line-height: 1;
}
.news_post_comments a
{
	font-size: 12px;
	font-weight: 500;
	color: #1a1a1a;
	line-height: 1;
}
.news_post_meta span:nth-child(2)
{
	font-size: 12px;
	font-weight: 500;
	color: #1a1a1a;
	margin-left: 5px;
	margin-right: 5px;
}
.news_post_text
{
	margin-top: 27px;
}
.news_post_button
{
	width: 188px;
	height: 53px;
	background: #ffb606;
	margin-top: 18px;
}
.news_post_button a
{
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 53px;
}
.news_post_button:hover
{
	box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}

/*********************************
9.1 News Page Nav
*********************************/

.news_page_nav ul li
{
	display: inline-block;
	width: 43px;
	height: 43px;
	background: #d2d2d2;
	margin-right: 3px;
}
.news_page_nav ul li.active
{
	background: #ffb606;
}
.news_page_nav ul li:hover
{
	background: #ffb606;
}
.news_page_nav ul li a
{
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 43px;
}

/*********************************
10. Sidebar
*********************************/

.sidebar
{
	width: 100%;
}
.sidebar_section
{
	margin-top: 48px;
}
.sidebar_section:first-child
{
	margin-top: 0px;
}
.sidebar_section_title
{
	margin-top: -1px;
}
.sidebar_section_title h3
{
	color: #1a1a1a;
	line-height: 1;
	font-weight: 700;
}
.sidebar_list
{
	margin-top: 28px;
}
.sidebar_list_item
{
	padding-top: 13px;
	padding-bottom: 13px;
	border-bottom: solid 2px #d2d2d2;
}
.sidebar_list_item a
{
	font-size: 14px;
	font-weight: 500;
	color: #a5a5a5;
}
.sidebar_list_item a:hover
{
	color: #ffb606;
}
.latest_posts
{
	margin-top: 50px;
}
.latest_post
{
	margin-bottom: 27px;
}
.latest_post:last-child
{
	margin-bottom: 0px;
}
.latest_post_image
{
	width: 100%;
}
.latest_post_image img
{
	width: 100%;
	height: auto;
}
.latest_post_title
{
	margin-top: 24px;
}
.latest_post_title a
{
	font-size: 18px;
	font-weight: 500;
	color: #1a1a1a;
}
.latest_post_title a:hover,
.latest_post_author a:hover,
.latest_post_comments a:hover
{
	color: #a5a5a5;
}
.latest_post_meta
{
	color: #1a1a1a;
	margin-top: 6px;
}
.latest_post_author a
{
	font-size: 12px;
	font-weight: 500;
	color: #a5a5a5;
	line-height: 1;
}
.latest_post_comments a
{
	font-size: 12px;
	font-weight: 500;
	color: #a5a5a5;
	line-height: 1;
}
.latest_post_meta span:nth-child(2)
{
	font-size: 12px;
	font-weight: 500;
	color: #1a1a1a;
	margin-left: 5px;
	margin-right: 5px;
}
.tags
{
	margin-top: 50px;
}
.tag
{
	height: 40px;
	background: #ffb606;
	margin-right: 12px;
	margin-bottom: 10px;
}
.tag a
{
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 40px;
	padding-left: 30px;
	padding-right: 30px;
}

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

.footer
{
	width: 100%;
	padding-top: 86px;
	background: #1a1a1a;
}
.footer .section_title h1
{
	color: #FFFFFF;
}

/*********************************
11.1 Newsletter
*********************************/

.newsletter
{
	padding-bottom: 85px;
	border-bottom: solid 2px #4d4e4e;
}
.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: #1a1a1a;
}
.newsletter_email:focus
{
	outline: solid 2px #ffb606;
}
.newsletter_submit_btn
{
	width: 164px;
	height: 42px;
	border: none;
	background: #ffb606;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}
.newsletter_submit_btn:focus
{
	border: solid 2px #FFFFFF;
}

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

.footer_content 
{
	padding-top: 80px;
	padding-bottom: 83px;
	border-bottom: solid 2px #4d4e4e;
}
.footer_content .logo_container
{
	padding-left: 0px;
}
.footer_content .logo span
{
	color: #FFFFFF;
}
.footer_about_text
{
	margin-top: 24px;
	margin-bottom: 0px;
	padding-right: 20px;
}
.footer_column_title
{
	font-size: 18px;
	font-weight: 500;
	color: #FFFFFF;
	padding-top: 15px;
}
.footer_column_content
{
	margin-top: 32px;
}
.footer_list_item
{
	margin-bottom: 11px;
}
.footer_list_item a
{
	font-size: 14px;
	color: #a5a5a5;
	-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: #ffb606;
}
.footer_contact_item
{
	font-size: 14px;
	font-weight: 400;
	color: #a5a5a5;
	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%;
}

/*********************************
11.3 Footer Copyright
*********************************/

.footer_bar
{
	padding-top: 19px;
	padding-bottom: 19px;
}
.footer_social .menu_social_item a i
{
	color: #FFFFFF;
}
.footer_social .menu_social_item a i:hover
{
	color: #ffb606;
}
.footer_social .menu_social_item:last-child
{
	margin-right: 0px;
}



/* ---------------- GLOBAL ---------------- */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
html, body {
    width: 100%;
    overflow-x: hidden;
}


body {
    margin: 0;
    font-family: "Poppins", Arial, sans-serif;
    /* background: #f5f8ff; */
    /* color: #38278f; */
	/* margin-top: -30px; */
}

h2 {
    text-align: center;
    font-size: 32px;
    color: #ffb606;
    
}




/* ---------------- HERO ---------------- */
.hero {
    background: linear-gradient(#ffb606), url('banner.jpg') center/cover no-repeat;
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 0 15px;
}

.hero-content h2 {
    font-size: 42px;
    font-weight: 700;
    color: white;
}

.hero-content p {
    font-size: 18px;
    margin-top: 10px;
    color: #ffffff;
}

.hero-content h3 {
    margin-top: 20px;
    font-weight: 600;
}


/* --------------------------------------------------------
   📱 MOBILE SMALL (320px – 425px)
-------------------------------------------------------- */
@media (max-width: 425px) {
    .hero {
        height: auto !important;     /* allow flexible height */
        padding-top: 50px !important;   /* TOP SPACE */
        padding-bottom: 30px !important; /* BOTTOM SPACE */
        padding-left: 15px;
        padding-right: 15px;
        background-size: cover;
        background-position: center;
    }

    .hero-content h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .hero-content p {
        font-size: 15px;
        margin-top: 12px;
    }

    .hero-content h3 {
        margin-top: 18px;
        font-size: 17px;
    }
}


/* --------------------------------------------------------
   📱 TABLET (426px – 768px)
-------------------------------------------------------- */
@media (min-width: 426px) and (max-width: 768px) {
    .hero {
        height: 50vh;
        padding-top: 20px;
    }

    .hero-content h2 {
        font-size: 34px;
    }

    .hero-content p {
        font-size: 16px;
    }
}


/* --------------------------------------------------------
   💻 SMALL LAPTOP (769px – 1024px)
-------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero {
        height: 40vh;
        padding-top: 30px;
    }

    .hero-content h2 {
        font-size: 38px;
    }
}


/* --------------------------------------------------------
   💻 LARGE LAPTOP (1025px – 1440px)
-------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1440px) {
    .hero {
        height: 55vh;
    }

    .hero-content h2 {
        font-size: 42px;
    }
}
/* ================= GALLERY SECTION ================= */

.gallery {
  text-align: center;
  max-width: 1400px;
  margin: auto;
  padding: clamp(20px, 5vw, 40px) 8%;
}

/* ================= HEADING ================= */

.gallery h2 {
  font-weight: 700;
  color: #ffb606;
  line-height: 1.2;

  font-size: clamp(22px, 4vw, 34px);
  margin-bottom: clamp(12px, 2vw, 20px);
}

/* ================= TEXT ================= */

.gallery-text {
  max-width: 900px;
  margin: 0 auto clamp(20px, 4vw, 40px);

  color: #444;
  line-height: 1.7;
  font-size: clamp(14px, 2.2vw, 18px);
}

/* ================= GRID ================= */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(clamp(220px, 30vw, 320px), 1fr)
  );
  gap: clamp(15px, 3vw, 25px);
}

/* ================= CARD ================= */

.gallery-item {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.gallery-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

/* ================= IMAGE ================= */

.gallery-item img {
  width: 100%;
  height: clamp(180px, 22vw, 260px);
  object-fit: cover;
  display: block;
}

/* ================= CAPTION ================= */

.caption {
  padding: clamp(10px, 2vw, 14px);
  font-weight: 500;
  color: #333;
  font-size: clamp(14px, 1.6vw, 16px);
}

/* ================= MOBILE OPTIMIZATION ================= */

@media (max-width: 425px) {
  .gallery {
    padding-bottom: 20px;
  }
}

/* ================= LEARNING ================= */

.learning {
  /* background: #f5f9ff; */
 padding: clamp(20px, 4vw, 32px) clamp(16px, 6vw, 80px);
  text-align: center;
}

/* HEADER */
.learning-header h2 {
  font-size: clamp(22px, 3.5vw, 36px);
  margin-bottom: clamp(8px, 1.5vw, 14px);
}

.learning-header p {
  font-size: clamp(14px, 2vw, 18px);
  max-width: 720px;
  margin: 0 auto;
  color: #444;
}

/* GRID – DIMENSIONAL */
.learning-grid {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
  margin-top: clamp(28px, 6vw, 60px);
}

/* CARD */
.learning-card {
  background: #fff;
  padding: clamp(18px, 3vw, 32px);
  border-radius: clamp(10px, 2vw, 16px);
  box-shadow: 0 clamp(6px, 1.5vw, 12px)
              clamp(18px, 4vw, 28px) rgba(0,0,0,0.08);

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ICON – ORANGE */
.learning-icon {
  width: clamp(42px, 6vw, 56px);
  margin-bottom: clamp(12px, 2vw, 16px);

  /* #ffb606 */
  filter: invert(77%) sepia(94%) saturate(1620%)
          hue-rotate(356deg) brightness(101%) contrast(103%);
}

/* TEXT */
.learning-card h3 {
  font-size: clamp(16px, 2.4vw, 20px);
  margin-bottom: clamp(6px, 1.5vw, 10px);
  color: #222;
}

.learning-card p {
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.6;
  color: #555;
}
/* MOBILE → 1 × 6 */
@media (max-width: 767px) {
  .learning-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= LEARNING GRID ================= */

.learning-grid {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
  margin: clamp(20px, 4vw, 40px) auto 0;
  max-width: 1200px;
}

/* 📱 MOBILE → 1 × 6 */
@media (max-width: 767px) {
  .learning-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

/* 📱 TABLET (768px – 1023px) → 3 ROW × 2 COLUMN */
@media (min-width: 768px) and (max-width: 1023px) {
  .learning-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 💻 LAPTOP & ABOVE (≥1024px) → 2 ROW × 3 COLUMN */
@media (min-width: 1024px) {
  .learning-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ================= HOVER EFFECT ================= */

.learning-card {
  transition: 
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.learning-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

/* icon animation */
.learning-card:hover .learning-icon {
  transform: scale(1.1);
}

.learning-icon {
  transition: transform 0.3s ease;
}




/* ================= SUPPORT SECTION ================= */
.support h2 {
  color: #ffb606;
  font-size: clamp(22px, 3vw, 32px);
  margin-top: clamp(10px, 2vw, 18px);
  margin-bottom: clamp(25px, 4vw, 40px);

}

/* GRID */
.support-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2×2 layout */
  gap: clamp(18px, 3vw, 26px);

  max-width: 1000px;     /* 🔥 reduced width */
  margin: 0 auto;
}

/* CARD */
.support-card {
  background: #ffffff;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 18px;

  text-align: left;
  font-weight: 600;

  border: 2px solid #d7e4ff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);

  transition: 0.3s ease;
}

.support-card:hover {
  transform: translateY(-4px);
}

/* ICON */
.support-card .icon {
  font-size: clamp(26px, 4vw, 34px);
  color: #ffb606;
  flex-shrink: 0;
}

/* TEXT */
.support-card h3 {
  font-size: clamp(15px, 2vw, 18px);
  margin-bottom: 4px;
  color: #222;
}

.support-card p {
  font-size: clamp(13px, 1.8vw, 15px);
  color: #555;
  line-height: 1.5;
}

/* ================= TABLET ================= */
@media (max-width: 768px) {
  .support-list {
    max-width: 90%;
    gap: 18px;
  }
}

/* ================= MOBILE ================= */
@media (max-width: 425px) {
  .support-list {
    grid-template-columns: 1fr;   /* 1 column */
  }

  .support-card {
    flex-direction: column;
    text-align: center;
  }
}

/* ================= 4K / LARGE SCREENS ================= */
@media (min-width: 1600px) {
  .support h2 {
    margin-top: 50px;   /* add space above h2 */
  }

  .support-list {
    max-width: 1100px;
  }
}



/* SUCCESS STORIES SECTION */
.success {
  text-align: center;
  padding: 40px 8%;
  margin-bottom: 30px;
}

.success h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
}

.success-text {
  font-size: 18px;
  max-width: 750px;
  margin: 0 auto 25px auto;
  line-height: 1.7;
  color: #444;
}

.success-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.success-card {
  background: #ffb606;
  padding: 18px;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  color: #ffffff;
  
}
/* Remove top padding for mobile (320px to 425px) */
@media (max-width: 425px) {
  .success {
    padding-top: 0; /* remove top padding */
    padding-bottom: 20px; /* keep bottom padding if needed */
	margin-top: 20px;
  }
}
.success-text {
  font-size: 18px; /* default for desktop/laptop */
  max-width: 750px;
  margin: 0 auto 25px auto;
  line-height: 1.7;
  color: #444;
}

/* Tablets (768px) */
@media (max-width: 1024px) {
  .success-text {
    font-size: 16px;
  }
}

/* Small tablets / large phones (768px and below) */
@media (max-width: 768px) {
  .success-text {
    font-size: 15px;
  }
}

/* Mobile devices (425px and below) */
@media (max-width: 425px) {
  .success-text {
    font-size: 14px;
  }
}

/* Extra small mobile (320px) */
@media (max-width: 320px) {
  .success-text {
    font-size: 13px;
  }
}
/* ================= GRID OVERRIDES ONLY ================= */

/* Mobile – 1 card */
@media (max-width: 767px) {
  .success-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet & Laptop – always 2×2 */
@media (min-width: 768px) {
  .success-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;   /* prevents 3–4 cards on laptop */
    margin-left: auto;
    margin-right: auto;
  }
}
.success h2 {
  font-weight: 700;
  margin-bottom: 15px;

  /* Dimensional responsive font size */
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1.2;
}



.footer_copyright span {
    color: #fff;   /* white color */
}

.footer_contact_item a {
    color: #beb5b5;               /* white */
    text-decoration: none;     /* remove underline */
}



/* Make logo image responsive */
.logo img {
    width: 100%;
    max-width: 60px;    /* control size – adjust as needed */
    height: auto;
}

/* Make logo text wrap properly */
.logo-text {
    display: flex;
    flex-direction: column;
    margin-left: 8px;
}

/* Mobile screens */
@media (max-width: 480px) {
    .logo img {
        max-width: 45px !important;   /* smaller logo on mobile */
    }

    .main-text {
        font-size: 18px !important;
    }

    .sub-text {
        font-size: 12px !important;
    }
}

/* Very small screens (320px) */
@media (max-width: 360px) {
    .logo img {
        max-width: 40px !important;
    }
}



.footer_social a {
  pointer-events: none;
  cursor: default;
}
.popup {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 18px;
    border-radius: 6px;
    color: #fff;
    opacity: 0;
    transform: translateY(-10px);
    transition: 0.3s;
    z-index: 99999;
}

.popup.show {
    opacity: 1;
    transform: translateY(0);
}

.popup.success {
    background: #28a745; /* GREEN */
}

.popup.error {
    background: #dc3545; /* RED */
}

/* Base */
.newsletter_form {
  display: flex;
  align-items: center;
  position: relative; /* anchor for error */
}

/* Input */
.newsletter_email {
  width: calc(100% - 164px);
}

/* Error message – positioned below input only */
#emailError {
  position: absolute;
  top: 100%;                  /* below form row */
  left: 0;
  margin-top: 4px;
  font-size: 13px;
  color: #dc3545;
  white-space: nowrap;
}

/* ≥768px only */
@media (max-width: 767px) {
  #emailError {
    position: static;         /* normal flow on mobile */
    margin-top: 6px;
  }
}
/* --- */
.footer_contact_item {
  display: flex;
  align-items: flex-start;   /* aligns text from top */
  

  font-size: 14px;
  font-weight: 400;
  color: #a5a5a5;
  margin-bottom: 22px;
}

.footer_contact_item a {
  color: #a5a5a5;
  text-decoration: none;
}
.footer_contact_icon img {
  width: 26px;
  height: 26px;
}
.footer_contact_item a + a {
  margin-left: 2px;
}