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

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

COLOR PALETTE




[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Logo
	3.2 Main Nav
	3.3 Header Side
	3.4 Hamburger
4. Menu
	4.1 Menu Social
	4.2 Menu copyright
5. Home
7. Page Section
8. Buttons
9. Popular
10. Footer
	10.1 Newsletter
	10.2 Footer Content
	10.3 Footer Copyright


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

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

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

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

*
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 400;
	background: #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: 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: 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;
}

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



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

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

}
.section_title h1
{
	display: block;
	color: #1a1a1a;
	font-weight: 500;
	padding-top: 24px;
}
.section_title h1::before
{
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 55px;
	height: 4px;
	content: '';
	background: #ffb606;
}

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

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

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

.popular
{

}
.course_boxes
{
	margin-top: 68px;
}
.course_box
{
	margin-bottom: 108px;
}
.course_box:nth-last-child(-n+3)
{
	margin-bottom: 0px;
}
.card
{
	display: block;
	background: #f8f9fb;
	border: none;
}
.card-img-top
{
	border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.card-body
{
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	padding-right: 15px;
}
.card-title
{
	margin-top: 55px;
}
.card-title a
{
	font-size: 22px;
	font-weight: 500;
	color: #1a1a1a;
	line-height: 1.2;
}
.card-title a:hover
{
	color: #a5a5a5;
}
.card-text
{
	font-size: 14px;
	font-weight: 500;
	color: #a5a5a5;
	margin-top: -12px;
}
.price_box
{
	width: 100%;
	height: 67px;
	background: #eaebec;
	margin-top: 41px;
	padding-left: 35px;
}
.course_author_image
{
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
}
.course_author_name
{
	font-size: 14px;
	font-weight: 500;
	color: #1a1a1a;
	padding-left: 20px;
	margin-top: 7px;
}
.course_author_name span
{
	color: #a5a5a5;
}
.course_price
{
	width: 67px;
	height: 67px;
	background: #ffb606;
	margin-left: auto;
}
.course_price span
{
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 500;
	margin-top: 7px;
}

/*********************************
10. Footer
*********************************/

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

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

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

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


body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f1f1f1;
}

.exam-grid-section {
    padding: 50px 20px;
}

.exam-grid-section h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 30px;
    color: #38278f;
}

.exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 28px;
    max-width: 1200px;
    margin: auto;
}

.exam-box {
    background: #ffffff;
    border-radius: 14px;
    text-align: center;
    padding: 22px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.12);
    transition: 0.3s;
}

.exam-box:hover {
    transform: translateY(-7px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.exam-box img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 18px;
}

.exam-box h3 {
    font-size: 20px;
    margin-bottom: 12px;
    color: #38278f;
}

.exam-btn {
    padding: 10px 16px;
    background: #ffb606;
    color: #000;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    display: inline-block;
    transition: 0.3s;
}

.exam-btn:hover {
    background: #e09f03;
}



/* Section Title */
.card-style-section {
    padding: 30px 20px;
    text-align: center;
}

.card-style-section h2 {
    font-size: 32px;
    font-weight: 700;
    color:  #ffb606;
    margin-bottom: 40px;
	margin-top: -20px;
}

/* Card Grid */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: auto;
}

/* Cards */
.card {
    background: #fff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transition: 0.3s ease;
    border-top: 6px solid #ffb606;
    opacity: 0;
    transform: translateY(40px);
}

/* Hover Animation */
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

/* Card Text */
.card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color:  #ffb606;
}

.card p {
    font-size: 15px;
    color: #444;
}

/* Fade Up Animation */
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
    transition: 0.6s ease;
}

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

.menu_item.active a { color: orange; }

/* 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 adjustments: 320px to 420px */
@media (max-width: 420px) and (min-width: 320px) {
    .card-style-section {
        padding: 20px 10px; /* reduce padding */
        margin-top: -30px;  /* move section up */
    }

    .card-container {
        gap: 15px; /* reduce gap for small screens */
    }

    .card {
        padding: 20px;
        transform: translateY(20px); /* initial offset less than default 40px */
    }

    /* Optional: adjust h2 size */
    .card-style-section h2 {
        font-size: 24px;
        margin-bottom: 30px;
    }
}
/* For screens between 375px and 425px */
@media (min-width: 375px) and (max-width: 425px) {
    .card-style-section {
        padding: 20px 10px; /* smaller padding */
        margin-top: -30px;  /* move section up */
    }

    .card-container {
        gap: 15px; /* smaller gap */
    }

    .card {
        padding: 20px;
        transform: translateY(20px); /* adjust initial offset */
    }

    .card-style-section h2 {
        font-size: 24px;
        margin-bottom: 30px;
    }
}

/* Tablet: up to 768px */
@media (min-width: 426px) and (max-width: 768px) {
    .card-style-section {
        padding: 25px 15px;
        margin-top: -20px;
    }

    .card-container {
        gap: 20px;
    }

    .card {
        padding: 22px;
        transform: translateY(25px);
    }

    .card-style-section h2 {
        font-size: 28px;
        margin-bottom: 35px;
    }
}

/* Laptop: up to 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .card-style-section {
        padding: 30px 20px;
        margin-top: -10px; /* back to normal */
    }

    .card-container {
        gap: 22px;
    }

    .card {
        padding: 25px;
        transform: translateY(30px);
    }

    .card-style-section h2 {
        font-size: 30px;
        margin-bottom: 38px;
    }
}

/* ===== ABOUT SECTION BASE STYLE ===== */
.about {
    max-width: 1100px;
    margin: 30px auto;
    padding: 40px 20px;
    text-align: center;
    line-height: 1.7;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	margin-bottom: 60px;
}

/* Title */
.about h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffb606;
}

/* Paragraph */
.about p {
    font-size: 18px;
    color: #555;
    margin: 0 auto;
    max-width: 900px;

}

/* ===== ANIMATION ===== */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}



/* ======== RESPONSIVE BREAKPOINTS ======== */

/* -------- Mobile 320px - 425px -------- */
@media (max-width: 425px) {
    .about {
        margin: 20px 10px;
        padding: 25px 15px;
		
    }

    .about h2 {
        font-size: 24px;
    }

    .about p {
         font-size: clamp(14px, 4vw, 16px);
        line-height: 1.6;
    }
}

/* -------- Tablet 768px -------- */
@media (max-width: 768px) {
    .about {
        margin: 50px 20px;
        padding: 30px 20px;
    }

    .about h2 {
        font-size: 28px;
    }

    .about p {
        font-size: 17px;
    }
}

/* -------- Laptop 1024px - 1440px -------- */
@media (min-width: 1024px) and (max-width: 1440px) {
    .about {
       
        padding: 45px 40px;
    }

    .about h2 {
        font-size: 30px;
    }

    .about p {
        font-size: 18px;
    }
}

/* -------- Very Large Screens (1440px+) -------- */
@media (min-width: 1440px) {
    .about {
        max-width: 1200px;
    }
}
.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;
}