@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;
}


h1, h2, h3, h4 {
    margin: 0;
}

/* INTRO SECTION */
.intro {
    background: #ffb606;
    color: #fff;
    padding: 50px 20px;
    text-align: center;
}

.intro p {
    max-width: 800px;
    margin: 10px auto;
    font-size: 18px;
    color: #fff;
}

/* GENERAL VISION & MISSION ROW */
.vision-mission-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 15px; /* Minimal padding */
}

.vision-mission-row.reverse {
    flex-direction: row-reverse;
}

.vm-image img {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.vm-text {
    flex: 1;
}

.vm-text h2 {
    color: #ffb606;
    margin-bottom: 5px;
    font-size: 28px;
}

.vm-text p {
    color: #444;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}
/* ----------- DESKTOP / LAPTOP (Default) ----------- */
.vision-mission-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 40px;          /* reduced left + right space */
    max-width: 1200px;           /* keeps layout centered */
    margin: 0 auto;
}

.vision-mission-row.reverse {
    flex-direction: row-reverse;
}

.vm-image img {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.2);
}

.vm-text {
    flex: 1;
}

.vm-text h2 {
    color: #ffb606;
    margin-bottom: 10px;
    font-size: 28px;
}

.vm-text p {
    color: #444;
    font-size: 16px;
    line-height: 1.6;
}


/* ----------- TABLET (768px – 991px) ----------- */
@media (max-width: 992px) {
    .vision-mission-row,
    .vision-mission-row.reverse {
        flex-direction: column;      /* stack items */
        text-align: center;
        padding: 15px 20px;          /* reduced side space */
        gap: 20px;
    }

    .vm-image img {
        max-width: 90%;              /* prevent overflow */
    }

    .vm-text h2 {
        font-size: 26px;
    }
}


/* ----------- MOBILE (0 – 480px) ----------- */
@media (max-width: 480px) {
    .vision-mission-row,
    .vision-mission-row.reverse {
        padding: 10px 10px;          /* minimum space */
        gap: 12px;
    }

    .vm-image img {
        max-width: 100%;
    }

    .vm-text h2 {
        font-size: 22px;
    }

    .vm-text p {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* VALUE SECTION */
.value-section {
    padding: 40px 20px;
    text-align: center;
}

.value-section h2 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #333;
	margin-top: -20px !important;
}

.value-section h3 {
    font-size: 20px;
    margin-bottom: 30px;
    color: #555;
}

/* BENEFIT GRID */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 10px;
}

.benefit-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    text-align: left;
    position: relative;
    border-left: 5px solid #ffb606;
}

.benefit-card .icon {
    width: 45px;
    height: 45px;
    margin-bottom: 10px;
}

.benefit-card h4 {
    color: #ffb606;
    margin-bottom: 8px;
}
/* BENEFIT GRID */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 10px;

    max-width: 1100px;    /* REDUCE width on desktop */
    margin: 0 auto;       /* CENTER the grid */
}

/* LAPTOP: 1024px — 3 columns × 2 rows */
@media (min-width: 992px) and (max-width: 1024px) {
    .benefit-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
        grid-template-rows: repeat(2, auto); /* 2 rows */
        gap: 20px; /* spacing between cards */
    }
}
/* LARGE SCREENS (1440px and above) */
@media (min-width: 1440px) {
    .benefit-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
        grid-template-rows: repeat(2, auto);   /* 2 rows for 6 cards */
        gap: 25px;                             /* spacing between cards */
        max-width: 1200px;                     /* limit max width */
        margin: 0 auto;                        /* center the grid */
        padding: 0 20px;
    }

    .benefit-card {
        width: 100%;   /* each card takes full column width */
    }
}

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

.benefit-card p{
	color: #444;
}

.philosophy-grid-section {
    padding: 30px 15px; /* Reduced top/bottom padding */
    text-align: center;
}

.philosophy-title {
    font-size: 30px; /* Slightly smaller for compact look */
    font-weight: 700;
    margin-bottom: 25px; /* Reduced space below title */
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    gap: 15px; /* Reduced gap */
    max-width: 1000px;
    margin: 0 auto;
}

.philosophy-box {
    padding: 15px; /* Reduced padding */
    border-radius: 12px;
    transition: 0.3s ease;
}

.philosophy-box:hover {
    transform: translateY(-5px); /* Slight hover lift */
}

.philosophy-box i {
    font-size: 40px; /* Slightly smaller icon */
    color: #ff9900;
    margin-bottom: 10px;
}

.philosophy-box h3 {
    font-size: 18px;
    color: #222;
    margin-bottom: 8px;
}

.philosophy-box p {
    font-size: 15px;
    color: #555;
    line-height: 1.5;
}

.philosophy-final {
    margin-top: 20px; /* Reduced margin */
    font-size: 18px;
    color: #444;
    font-weight: 600;
}

/* Tablet: 2 columns */
@media (max-width: 992px) {
    .philosophy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .philosophy-title {
        font-size: 26px;
        margin-bottom: 20px;
    }
    .philosophy-box i {
        font-size: 36px;
    }
    .philosophy-box h3 {
        font-size: 17px;
    }
    .philosophy-box p {
        font-size: 14px;
    }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .philosophy-grid-section {
        padding: 20px 10px; /* Reduced padding for mobile */
    }
    .philosophy-title {
        font-size: 22px;
        margin-bottom: 15px;
    }
    .philosophy-box i {
        font-size: 32px;
    }
    .philosophy-box h3 {
        font-size: 16px;
    }
    .philosophy-box p {
        font-size: 13px;
    }
    .philosophy-final {
        font-size: 16px;
        margin-top: 15px;
    }
}

.method-section {
    padding: 30px 15px;
    text-align: center;
}

.method-title {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.method-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.method-box {
    padding: 15px;
    border-radius: 12px;
    transition: 0.3s ease;
}

.method-box:hover {
    transform: translateY(-4px);
}

.method-box i {
    font-size: 40px;
    color: #ff9900;
    margin-bottom: 10px;
}

.method-box h3 {
    font-size: 18px;
    color: #222;
    margin-bottom: 8px;
}

.method-box p {
    font-size: 15px;
    color: #555;
    line-height: 1.5;
}

/* Tablet: 2 columns */
@media (max-width: 992px) {
    .method-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .method-title {
        font-size: 26px;
    }
    .method-box i {
        font-size: 36px;
    }
    .method-box h3 {
        font-size: 17px;
    }
    .method-box p {
        font-size: 14px;
    }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
    .method-grid {
        grid-template-columns: 1fr;
    }
    .method-section {
        padding: 10px 10px;
    }
    .method-title {
        font-size: 22px;
        margin-bottom: 15px;
    }
    .method-box i {
        font-size: 32px;
    }
    .method-box h3 {
        font-size: 16px;
    }
    .method-box p {
        font-size: 13px;
    }
}


.why-choose-section {
    padding: 10px 15px; /* Reduced top-bottom padding */
    background: #f9f9f9;
    font-family: 'Poppins', sans-serif;
    text-align: center;
	margin-top: -30px !important;
	
	
}

.section-title {
    font-size: 28px;  /* Slightly smaller title */
    font-weight: 700;
    color: #333;
    margin-bottom: 30px; /* Reduced space below title */
    text-transform: uppercase;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px; /* Reduced gap between cards */
    max-width: 1000px;
    margin: 0 auto;
}

.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 8px; /* Reduced gap between icon and text */
    padding: 10px; /* Reduced padding inside each card */
    transition: 0.3s;
	
}

.feature-card:hover {
    transform: translateY(-3px); /* Smaller hover effect */
}

.feature-card i {
    font-size: 20px; /* Slightly smaller icon */
    color: #ff9900;
    margin-top: 2px;
}

.feature-card p {
    font-size: 14px; /* Slightly smaller text */
    color: #444;
    line-height: 1.4; /* Reduced line-height */
    text-align: left;
	
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .section-title {
        font-size: 24px;
        margin-bottom: 25px;
    }

    .feature-card i {
        font-size: 18px;
		
    }

    .feature-card p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 10px; /* Smaller gap on mobile */
    }

    .section-title {
        font-size: 22px;
    }
}




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

/* Mobile & Small Devices – reduce spacing */
@media (max-width: 576px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap: 10px;
    }

    .feature-card {
        padding: 10px;
        gap: 8px;
    }

    .feature-card p {
        font-size: 13px;
        margin: 0;

    }

    .feature-card i {
        font-size: 16px;
    }
}

/* Very Small Screens – 320px to 425px */
@media (max-width: 425px) {
    .feature-grid {
        grid-template-columns: 1fr; /* 1 card per row */
        gap: 8px;
		margin-bottom: 20px;
    }

    .feature-card {
        padding: 8px;
        gap: 6px;
    }
}
/* Base styling (your existing styles) */
.method-section {
    padding: 50px 0;
}

.method-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* Responsive – Reduce space for 320px to 425px */
@media (max-width: 425px) {
    .method-section {
        padding: 20px 0; /* reduce section padding */
    }

    .method-grid {
        grid-template-columns: 1fr; /* show one below another */
        gap: 1px; /* reduce gap */
    }

    .method-box {
        padding: 10px 12px;  /* reduce inside spacing */
    }

    .method-box h3 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .method-box p {
        font-size: 14px;
        line-height: 20px;
    }

    .method-box i {
        font-size: 24px;
        margin-bottom: 8px;
    }
}

/* Optional tighter for 320px */
@media (max-width: 360px) {
    .method-box {
        padding: 12px 10px;
    }

    .method-box p {
        font-size: 13px;
        line-height: 18px;
    }
}

/* 📱💻 Tablet – 426px to 768px (2×2 grid) */
@media (min-width: 426px) and (max-width: 768px) {
    .method-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap: 15px; /* medium spacing */
    }

    .method-box {
        padding: 18px 14px; /* comfortable padding for tablets */
    }
}

/* Mobile responsive – 320 to 425px */
@media (max-width: 425px) {

    .philosophy-grid-section {
        padding: 15px 0; /* reduce top-bottom space */
		margin-top: 10px;
    }

    .philosophy-title {
        font-size: 20px; /* reduce title size */
        margin-bottom: 10px;
    }

    .philosophy-grid {
        display: grid;
        grid-template-columns: 1fr; /* one-by-one boxes */
        gap: 1px; /* reduce space between boxes */
    }

    .philosophy-box {
        padding: 12px 10px; /* reduce inside spacing */
        margin: 0; /* remove default margin */
    }

    .philosophy-box i {
        font-size: 22px;
        margin-bottom: 5px;
    }

    .philosophy-box h3 {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .philosophy-box p {
        font-size: 13px;
        line-height: 18px;
    }

    .philosophy-final {
        font-size: 14px;
        margin-top: 12px; /* reduce space above final text */
        line-height: 20px;
        padding: 0 10px; /* small left-right padding */
    }
}

/* Move method-section upward */
.method-section {
    padding-top: 30px; /* reduce from 50px to 30px */
    padding-bottom: 50px; /* optional: adjust bottom space if needed */
}

/* Move section-title upward */
.section-title {
    margin-top: 0px !important; /* reduce top margin */
    margin-bottom: 25px; /* keep some space below */
}

/* Optional: adjust responsive for small screens */
@media (max-width: 768px) {
    .method-section {
        padding-top: 20px;
    }

    .section-title {
        margin-top: 0px !important;
        margin-bottom: 20px;
    }
}

@media (max-width: 425px) {
    .method-section {
        padding-top: 15px;
    }

    .section-title {
        margin-top: 20px !important;
        margin-bottom: 15px;
    }
}

.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;
}