/* ----------------------------------------
	Manish Pal
	Version 1.0
	Last Updated: 31st July 2025, 09:00 IST
	----------------------------------------
*/


/* Table of Contents
	-----------------
	1. Global
	2. Navbar
	3. Home Page
	4. About Us
	5. FAQ
	6. Elements
	7. Contact
	8. Footer
	9. Media Queries
	-----------------
*/



/*	-------------
	  1. Global
	-------------
*/

body {
	margin: 0; 
	background-color: var(--color-blue-black); 
	color: #5a5a5a;
	font-family: "Poppins", Optima, Segoe, "Segoe UI", Candara, Calibri, Helvetica, Arial, Halvett, sans-serif;
	font-size: 14px; font-weight: 500;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; /* Firefox equivalent */
	text-rendering: optimizeLegibility;
}

img {
	font-size: 1pt; font-weight: normal; 
	text-decoration: none; border: none; outline: none; 
	vertical-align: middle;
}

a { 
	transition: 0.5s ease; 
	text-decoration: none; 
}

hr {
	border: solid #eff0f4; border-width: 1px 0 0; 
	clear: both; height: 0; margin: 21px 0; 
}


/* Reset default margins and padding for HTML elements with these selectors */
p, h1, h2, h3, h4, h5, h6 { 
	padding: 0px; margin: 0px;
}

/* Common styles for all heading selectors */
h1, h2, h3, h4, h5, h6 { 
	line-height: 1; 
}

/* Styles for individual heading selectors */
h1 { font-size: 44px; }
h2 { font-size: 34px; }
h3 { font-size: 27px; }
h4 { font-size: 23px; }
h5 { font-size: 17px; }
h6 { font-size: 14px; }


/* Define the variable for CSS customer properties via :root */
:root {
	--main-font: "Poppins", Optima, Segoe, "Segoe UI", Candara, Calibri, Helvetica, Arial, Halvett, sans-serif;

    --color-blue-purplelight: #859AC6;
    --color-blue-light: #e8f3ff;
    --color-blue-cyan: #3e98c8;
    --color-blue-royal: #0d3293;
    --color-blue-dark: #1E325A;
    --color-blue-black: #0c101a;
	--color-bg-light-blue: #E2F2FF;

	--color-green-light: #1AD360;
	--color-green-dark: #109543;
	--color-green-black: #0B602C;
	--color-green-heading: #0C7134;
	--color-white: #ffffff;
	--color-151515: #151515;
	--color-353535: #353535;
	--color-454545: #454545;
	--color-656565: #656565;
	--color-858585: #858585;
	--color-959595: #959595;
	--color-a5a5a5: #a5a5a5;
	--accordion-border-radius: 4px;
	--color-link-blue: #377ce4;
	--color-bg-light-green: #E2FFE6;
}


/* Define styles for form inputs, button, textarea, etc */
input, button, select, textarea, option, optgroup {
	font-family: "Poppins", Optima, Segoe, 'Segoe UI', Candara, Calibri, Helvetica, Arial, Halvett, sans-serif; 
	font-weight: 400; 
}

optgroup { font-weight: 400; }

label { cursor: pointer; }


/* Define styles for placeholder */
::-webkit-input-placeholder { color: var(--color-a5a5a5); font-weight: 400; }
:-moz-placeholder { color: var(--color-a5a5a5); font-weight: 400; }
::-moz-placeholder { color: var(--color-a5a5a5); font-weight: 400; }
::-ms-placeholder { color: var(--color-a5a5a5); font-weight: 400; }
::-ms-input-placeholder { color: var(--color-a5a5a5); font-weight: 400; }
::placeholder { color: var(--color-a5a5a5); font-weight: 400; }

/* On-click focus text remove placeholder for form field */
input:focus::-webkit-input-placeholder { color:transparent; opacity: 0; }  /* Chrome <=56, Safari < 10 */
input:focus:-moz-placeholder { color:transparent; opacity: 0; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; opacity: 0; } /* FF 19-51 */
input:focus:-ms-input-placeholder { color:transparent; opacity: 0; } /* IE 10+ */
input:focus::placeholder { color:transparent; opacity: 0; } /* Modern Browsers */

/* On-click focus text remove placeholder for textarea */
textarea:focus::-webkit-input-placeholder { color:transparent; opacity: 0; }  /* Chrome <=56, Safari < 10 */
textarea:focus:-moz-placeholder { color:transparent; opacity: 0; } /* FF 4-18 */
textarea:focus::-moz-placeholder { color:transparent; opacity: 0; } /* FF 19-51 */
textarea:focus:-ms-input-placeholder { color:transparent; opacity: 0; } /* IE 10+ */
textarea:focus::placeholder { color:transparent; opacity: 0; } /* Modern Browsers */

/* End of inputs, buttons css styles */



/* Start of Spacing */
.spacing-5 { padding-top: 5px; }
.spacing-10 { padding-top: 10px; }
.spacing-15 { padding-top: 15px; }
.spacing-20 { padding-top: 20px; }
.spacing-25 { padding-top: 25px; }
.spacing-30 { padding-top: 30px; }
.spacing-40 { padding-top: 40px; }
.spacing-50 { padding-top: 50px; }
.spacing-60 { padding-top: 60px; }
.spacing-70 { padding-top: 70px; }
.spacing-75 { padding-top: 75px; }
.spacing-80 { padding-top: 80px; }
.spacing-90 { padding-top: 90px; }
.spacing-100 { padding-top: 100px; }
.spacing-110 { padding-top: 110px; }
.spacing-120 { padding-top: 120px; }
.spacing-150 { padding-top: 150px; }
.spacing-200 { padding-top: 200px; }
.spacing-250 { padding-top: 250px; }
/* End of Spacing */


/* Start of 'noscript' */
noscript #body { display: none; }

noscript #noscript_warning { 
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%; line-height: 30px; z-index: 9999;
	color: #ffffff; font-weight: normal; font-size: 15px; font-weight: 400; 
	background-color: #454545; padding: 60px 25px; text-align: center;
}

noscript #noscript_warning b { font-weight: 700; font-size: 28px; line-height: 65px; }
/* End of 'noscript' */



/* Start of text selection colour */
::-moz-selection {
	background-color: var(--color-blue-dark); color: #ffffff; text-shadow: none;
}

::selection {
	background-color: var(--color-blue-dark); color: #ffffff; text-shadow: none;
}
/* End of text selection colour */



/* Start of Google Material Icons */
.material-symbols-rounded {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}
/* End of Google Material Icons */




/* Start of Bootstrap 5.3 CSS declarations or CSS properties */
.form-control, .form-select {
	font-size: 14px; 
	font-weight: 500; 
	color: #454545;
	padding: 10px 20px;
	/*text-indent: 10px;*/
	vertical-align: middle;
	border-radius: 3px;
	border: 1px solid #d5d5d5;
	outline: none;

	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;

	box-shadow: inset 0 3px 4px rgba(0,0,0,.075);
}



/* Ensure padding works and text-indent works as expected */
.form-floating input {
    padding: 10px 15px;  /* Set your desired padding */
    text-indent: 10px;
    box-sizing: border-box;  /* Ensure padding is included in the element's total size */
    width: 100%;  /* Make sure it takes up the full width */
	height: 60px !important;
}

.form-floating textarea {
    padding: 35px 20px !important;
    box-sizing: border-box;
    width: 100%;
	height: 200px !important;
}

.form-floating select {
    padding: 10px 15px;  /* Set your desired padding */
    text-indent: 10px;    /* Text indentation */
    box-sizing: border-box;  /* Ensure padding is included in the element's total size */
    width: 100%;  /* Make sure it takes up the full width */
	height: 60px !important;
}

.form-floating label {
	font-family: "Poppins", Optima, Segoe, 'Segoe UI', Candara, Calibri, Helvetica, Arial, Halvett, sans-serif; 
	font-weight: 500;
    padding: 18px 6px;
	padding-left: 20px; /* Optional: Space out the label slightly */
	
}

/* Optional: Add focus styles for better UX */
.form-floating input:focus, .form-floating textarea:focus, .form-floating select:focus {
    outline: none;  /* Remove the default focus outline */
    box-shadow: none;  /* Remove any box-shadow effect */
	border: 1px solid #74B9EF; /* Change border color on focus */
	box-shadow: 0 0 6px #74B9EF;
}



.mb-4-5 {
	margin-bottom: 2rem!important;
}

.anchor-target {
	scroll-margin-top: 120px;
}

/* End of Bootstrap 5.3 CSS declarations or CSS properties */



/* ####################### */
/* ## Start of Custom Animation */

/*  Left to Right */
@keyframes slideLeftToRight {
	from {
	  opacity: 0;
	  transform: translateX(-50px);
	}
	to {
	  opacity: 1;
	  transform: translateX(0);
	}
}

.slideLeftToRight {
	animation-name: slideLeftToRight;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}
  




/*  Right to Left */
@keyframes slideRightToLeft {
	from {
	  opacity: 0;
	  transform: translateX(50px);
	}
	to {
	  opacity: 1;
	  transform: translateX(0);
	}
}
  
.slideRightToLeft {
	animation-name: slideRightToLeft;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}

/* ## End of Custom Animation */
/* ####################### */






/* ####################### */
/* ## Start of Navbar */
nav.navbar {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100px;
	background: transparent;
	z-index: 1030;
	transition: background-color 0.5s ease;
}

nav.navbar .nav-link {
	color: #151515;
	font-size: 14px;
	font-weight: 500;
	margin-left: 25px;

	padding-right: 1px !important;
	padding-left: 1px !important;
}

/* for white text in light background */
.navbar-nav.text-white .nav-link { color: #ffffff !important; }
.navbar-nav.text-white .nav-link.show { color: #ffffff !important; }
.navbar-nav.text-white .nav-link.active {
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
	padding-bottom: 1px;
	transition: all 0.5s ease;
}

/* for black text in dark background */
.navbar-nav.text-black .nav-link { color: #151515; }
.navbar-nav.text-black .nav-link.show { color: #151515; }
.navbar-nav.text-black .nav-link.active {
	color: var(--color-blue-royal);
	border-bottom: 1px solid var(--color-blue-royal);
	padding-bottom: 1px;
	transition: all 0.5s ease;
}




/* on click dropdown menu 
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show { 
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
	padding-bottom: 1px;
	transition: all 0.5s ease;
}
*/

.navbar-brand img {
	height: 75px; /* height of logo */
	width: auto;
	border: none; outline: none;
	transition: transform 0.75s;
	-webkit-transition: -webkit-transform 1.4s;
}



/* scrolled values */
nav.navbar.scrolled {
	background-color: rgba(255, 255, 255, 0.94); /* white with 94% opacity */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: background-color 0.75s ease;
	background-image: none;
}

nav.navbar.scrolled .nav-link {
  color: #151515;
}

nav.navbar.scrolled .nav-link.active {
	color: var(--color-blue-royal);
	border-bottom: 1px solid var(--color-blue-royal);
	padding-bottom: 1px;
	transition: all 0.5s ease;
}

nav.navbar.scrolled .nav-link.getintouch {
	color: #ffffff;
}





nav.navbar .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 20px 15px;
    min-width: 200px;
}

.offcanvas-body .dropdown-item {
	font-size: 14px;
	font-weight: 500;
	padding: 10px 10px;
	color: #252525;
}


.offcanvas-body .dropdown-item:active, 
.offcanvas-body .dropdown-item:focus {
    text-decoration: none;
    background-color: transparent !important;
}

.offcanvas-body .dropdown-item.actives,
.offcanvas-body .dropdown-item.actives .material-symbols-rounded {
	color: var(--color-blue-royal);
}





/* to vertically center material symbol */ 
nav.navbar li a {
    display: flex;
    align-items: center;
}

/* material symbol in dropdown-item */
.offcanvas-body .dropdown-item .material-symbols-rounded {
    font-size: 28px;
    margin-right: 5px;
    margin-top: -2px;
    color: #757575;
    width: 35px;
    height: auto;

	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}


/* Get in Touch link 
.navbar-nav .nav-link.getintouch {
	padding: 10px 18px 10px 18px !important;
	border-radius: 4px;
	background-color: var(--color-blue-royal);
	color: #ffffff;
	margin-left: 25px;
	margin-top: -2px;
	border-bottom: 1px solid transparent;
}

.navbar-nav .nav-link.getintouch:hover {
	background-color: #3E64A2;
}

.navbar-nav .nav-link.getintouch:focus {
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #3E64A2; outline: none; 
	top: 1px; position: relative;
}
*/
.navbar-nav .nav-link.getintouch {
	display: inline-flex;
	position: relative;  /* For positioning the shine effect */
	overflow: hidden;  /* Ensure the shine effect doesn't go outside the boundaries */
	align-items: center;
	justify-content: center;

	padding: 10px 18px 10px 18px !important;
	border-radius: 4px;
	background-color: var(--color-blue-royal);
	color: var(--color-white);
	margin-left: 25px;
	margin-top: -2px;
	border-bottom: 1px solid transparent;
}
.navbar-nav .nav-link.getintouch:hover {
	background-color: var(--color-blue-royal);
}
.navbar-nav .nav-link.getintouch:focus {
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #252525; outline: none; 
	top: 1px; position: relative;
}
.navbar-nav .nav-link.getintouch:active { 
	background-color: #252525; outline: none; 
}


/* Sheen effect */
.navbar-nav .nav-link.getintouch::after {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255, 255, 255, 0.5) 50%, rgba(229, 172, 142, 0));
	transform: rotateZ(125deg) translate(-5em, 10em);
	transition: none; /* Prevent transition initially */
}

/* Activate the sheen once the button has been hovered */
.navbar-nav .nav-link.getintouch:hover::after,
.navbar-nav .nav-link.getintouch:focus::after {
  animation: sheen 1s forwards; /* Trigger the shine animation */
}







/* Custom hamburger icon */
.navbar-toggler {
	width: 50px;
	height: 50px;
	border: none;
	padding: 0;
}
.navbar-toggler:focus {
	outline: none;
	box-shadow: none;
}
.navbar-toggler-icon-new {
	position: relative;
	width: 30px;
	height: 22px;
	display: inline-block;
	cursor: pointer;
}
.navbar-toggler-icon-new span {
	position: absolute;
	height: 4px;
	width: 100%;
	border-radius: 2px;
	left: 0;
	transition: all 0.3s ease;
}

#icon-white.navbar-toggler-icon-new span {
	background-color: #ffffff;
}
.navbar.scrolled #icon-white.navbar-toggler-icon-new span {
	background-color: #151515;
}

#icon-black.navbar-toggler-icon-new span {
	background-color: #151515;
}


/*
.navbar-toggler-icon-new span {
	background-color: #ffffff;
}

.navbar.scrolled .navbar-toggler-icon-new span {
	background-color: #151515;
}*/

.navbar-toggler-icon-new span:nth-child(1) { top: 0; }
.navbar-toggler-icon-new span:nth-child(2) { top: 9px; }
.navbar-toggler-icon-new span:nth-child(3) { top: 18px; }

/* Hamburger animation */
.navbar-toggler.collapsed .navbar-toggler-icon-new span:nth-child(1) { top: 0; transform: rotate(0); }
.navbar-toggler.collapsed .navbar-toggler-icon-new span:nth-child(2) { opacity: 1; }
.navbar-toggler.collapsed .navbar-toggler-icon-new span:nth-child(3) { top: 18px; transform: rotate(0); }

.navbar-toggler:not(.collapsed) .navbar-toggler-icon-new span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.navbar-toggler:not(.collapsed) .navbar-toggler-icon-new span:nth-child(2) { opacity: 0; }
.navbar-toggler:not(.collapsed) .navbar-toggler-icon-new span:nth-child(3) { top: 9px; transform: rotate(-45deg); }







/* Dropdown chevron */
.dropdown-chevron {
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
	transition: transform 0.3s ease;

	user-select: none;
	display: inline-block;
	margin-left: 0px;
	margin-right: -5px !important;
	margin-top: 2px;

	font-size: 24px;
	line-height: 15px;

	display: flex; /* vertically align material icon */
    align-items: center;
}

/* Hide default bootstrap arrow */
.nav-link.dropdown-toggle::after {
	display: none;
}



/* Desktop: down arrow */
.dropdown-chevron::before {
	content: "expand_more"; /* down arrow icon */
	font-family: 'Material Symbols Rounded';
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
/* No rotation on desktop */
.dropdown-chevron.rotate {
	transform: rotate(1);
}


/* Mobile: right arrow */
@media (max-width: 990px) {

	.dropdown-chevron::before {
		content: "chevron_right"; /* right arrow icon */
		font-family: 'Material Symbols Rounded';
		font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	}
	/* Rotate right arrow to down (90deg) when .rotate class added */
	.dropdown-chevron.rotate {
		transform: rotate(90deg);
	}

}


.offcanvas-footer { display: none; }


/* white space below navbar and above breadcrumbs */
.navbar-bottom-white { 
	height: 95px; 
}


/* white space below navbar with shadow */
.navbar-bottom-white-shadow { 
	height: 90px; 
	background-color: white;

	position: relative;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* ## End of Navbar */
/* ####################### */












/* ####################### */
/* ## Start of Carousel Hero */

#carouselHero {
	margin-top: -90px; /* same as navbar height */
	padding-top: 90px;  /* offset internal content */
	position: relative;
	z-index: 0;
	border: 0px solid red;
}

#carouselHero .carousel-item {
	position: relative;
	height: 490px;
	border: 0px solid blue;
}


.carousel-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover; /* or your preferred dimensions */
	z-index: 1;

	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
	box-shadow: inset 0 95px 95px rgba(0, 0, 0, 0.4);
}

.carousel-image.lazyload {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 2000px 1200px;
    margin: 0 auto;
}

.carousel-image.hero1_low {
	background-image: url('../images/hero-banner/slider-1_low.webp');
}
.carousel-image.hero1 {
	background-image: url('../images/hero-banner/slider-1.webp');
}

.carousel-image.hero2_low {
	background-image: url('../images/hero-banner/slider-2_low.webp');
}
.carousel-image.hero2 {
	background-image: url('../images/hero-banner/slider-2.webp');
}

.carousel-image.hero3_low {
	background-image: url('../images/hero-banner/slider-3_low.webp');
}
.carousel-image.hero3 {
	background-image: url('../images/hero-banner/slider-3.webp');
}

.carousel-image.hero4_low {
	background-image: url('../images/hero-banner/slider-4_low.webp');
}
.carousel-image.hero4 {
	background-image: url('../images/hero-banner/slider-4.webp');
}





#carouselHero .carousel-item .fplogo {
	width: 474px;
	height: auto;
}


@media screen and (max-width: 992px), only screen and (max-device-width: 992px) {
	#carouselHero .carousel-item .fplogo {
		width: 460px;
		height: auto;
	}
}


@media screen and (max-width: 768px), only screen and (max-device-width: 768px) {
	#carouselHero .carousel-item .fplogo {
		width: 320px !important;
		height: auto;
	}
}


@media screen and (max-width: 576px), only screen and (max-device-width: 576px) {
	#carouselHero .carousel-item .fplogo {
		width: 260px !important;
		height: auto;
	}

}





/* Ensure content is layered on top */
#carouselHero .carousel-item .carousel-caption {
	padding-top: 210px;      /* Add top padding if needed */
    padding-bottom: 0;       /* Remove bottom padding */
    top: 0;                  /* Align to top */
    bottom: auto;            /* Reset bottom */
    text-align: left;

	position: relative;
	z-index: 2;
}




#carouselHero .carousel-item .carousel-caption h4 {
	font-family: "Anton", sans-serif;
	color: #ffffff;
	font-size: 70px;
	font-weight: 400;
	line-height: 65px;
	margin-bottom: 15px;
	z-index: 2;
	width: 45%;
	letter-spacing: -1px;
	text-shadow: 1px 1px 10px #4d4d4f;
}

#carouselHero .carousel-item .carousel-caption h5 {
	font-family: var(--main-font);
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
	line-height: 30px;
	margin-bottom: 5px;
	z-index: 2;
	width: 40%;
	text-shadow: 1px 1px 10px #2d2d2f;
}




#carouselHero .carousel-item .carousel-caption.two {
	padding-top: 175px;
}
#carouselHero .carousel-item .carousel-caption.two h4 {
	font-size: 60px;
	text-align: center;
	line-height: 55px;
	width: 69%;
}
#carouselHero .carousel-item .carousel-caption.two h5 {
	text-align: center;
	width: 69%;
}




#carouselHero .carousel-item .carousel-caption p {
	font-family: var(--main-font);
	color: var(--color-blue-black);
	font-size: 15px;
	font-weight: 400;
	line-height: 25px;
	margin-bottom: 30px;
	letter-spacing: 0.25px;
	z-index: 2;
	width: 55%;
}


#carouselHero .carousel-item .read-more {
	display: inline-flex;
	position: relative;  /* For positioning the shine effect */
	overflow: hidden;  /* Ensure the shine effect doesn't go outside the boundaries */
	align-items: center;
	justify-content: center;

	font-family: var(--main-font);
	color: var(--color-white);
	background-color: var(--color-blue-black);
	font-size: 13px;
	font-weight: 400;
	margin-top: 15px;
	padding: 10px 22px;
	border-radius: 3px;
}
#carouselHero .carousel-item .read-more:hover {
	background-color: var(--color-blue-royal);
}
#carouselHero .carousel-item .read-more:focus {
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #252525; outline: none; 
	top: 0px; position: relative;
}
#carouselHero .carousel-item .read-more:active { 
	background-color: #252525; outline: none; 
}


/* Sheen effect */
#carouselHero .carousel-item .read-more::after {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255, 255, 255, 0.5) 50%, rgba(229, 172, 142, 0));
	transform: rotateZ(125deg) translate(-5em, 7.5em);
	transition: none; /* Prevent transition initially */
}

/* Activate the sheen once the button has been hovered */
#carouselHero .carousel-item .read-more:hover::after,
#carouselHero .carousel-item .read-more:focus::after {
  animation: sheen 1s forwards; /* Trigger the shine animation */
}

/* Keyframes for the sheen animation */
@keyframes sheen {
	100% {
	  transform: rotateZ(125deg) translate(1em, -15em); /* Shine effect moves across */
	}
}











.carousel-indicators [data-bs-target] {
    background-color: #a5a5a5;
}

#carouselHero .carousel-indicators {
    bottom: 0;
    transform: translateY(5px); /* Push down visually without changing layout flow */
}







/* Ensure the carousel controls (arrows) stay in their original position */
#carouselHero .carousel-control-prev, .carousel-control-next {
	position: absolute;
	top: 50%; 
	transform: translateY(-50%); /* Vertically center the arrows */
	z-index: 5; /* Make sure they are on top of the boxes */
}

/* Transparent box on the left side of the previous arrow */
#carouselHero .carousel-control-prev::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -2px; /* Position it before the left arrow */
	width: 0px; /* Width of the transparent box */
	background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent background */
}
  
/* Transparent box on the right side of the next arrow */
#carouselHero .carousel-control-next::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -2px; /* Position it after the right arrow */
	width: 0px; /* Width of the transparent box */
	background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent background */
}
  
/* Optional: Adjust the appearance of the arrows */
#carouselHero .carousel-control-prev-icon, #carouselHero .carousel-control-next-icon {
	filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(7500%) hue-rotate(0deg) brightness(100%) contrast(100%);
	width: 30px; /* Width of the icon */
	height: 30px; /* Height of the icon */
	border-radius: 50%; /* Circular icons */
}




/* Carousel text sliding effect */
		/* Common base styles */
	#carouselHero .slide-heading,
	#carouselHero .slide-sub-heading {
		position: relative;
		opacity: 0;
		transition: all ease;
	}

		/* Durations */
	#carouselHero .slide-heading {
		transition-duration: 1s;
	}
	#carouselHero .slide-sub-heading {
		transition-duration: 2s;
	}

	/* Slide directions */
	/* Top to Bottom */
	#carouselHero .slide-top {
		top: -50px;
	}
	#carouselHero .slide-top.animate {
		top: 0;
		opacity: 1;
	}

		/* Left to Right */
	#carouselHero .slide-left {
		left: -100px;
	}
	#carouselHero .slide-left.animate {
		left: 0;
		opacity: 1;
	}

	/* Bottom to Top */
	#carouselHero .slide-bottom {
		top: 50px;
	}
	#carouselHero .slide-bottom.animate {
		top: 0;
		opacity: 1;
	}

	/* Right to Left */
	#carouselHero .slide-right {
		left: 100px;
	}
	#carouselHero .slide-right.animate {
		left: 0;
		opacity: 1;
	}


/* ## End of Carousel */
/* ####################### */







/* ####################### */
/* ## Start of Hero image */
.hero-div {
	height: 420px;
	font-family: var(--main-font);
	background-color: #959595;
	color: white;

	position: relative;
	overflow: hidden;

	/* black linear
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
	box-shadow: inset 0 120px 120px rgba(0, 0, 0, 0.7);

	/* dark blue linear
	background: linear-gradient(to bottom, rgba(16, 29, 63, 0.7) 0%, rgba(16, 29, 63, 0) 100%);
	box-shadow: inset 0 120px 120px rgba(16, 29, 63, 0.7);
	*/
}

.hero-div.linear-black {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
	box-shadow: inset 0 120px 120px rgba(0, 0, 0, 0.7);
}

.hero-div.linear-cyan {
	background: linear-gradient(to bottom, rgba(25, 60, 90, 0.7) 0%, rgba(25, 60, 90, 0) 100%);
	box-shadow: inset 0 120px 120px rgba(25, 60, 90, 0.7);
}

.hero-div.light { 
	background: none;
	box-shadow: none;
}


/* Fill parent with 100% height */
.hero-div .hero-container,
.hero-div .hero-row {
	height: 100%; 
}

/* positon the text above farmer image */
.hero-div .hero-text { z-index: 2; }




.hero-div .content h1 {
    font-family: var(--main-font);
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: -1px 1px 2px #2d2d2f;
    line-height: 45px;
	margin-bottom: 10px;
}


.hero-div .content p {
	font-family: var(--main-font);
	font-size: 15px;
	font-weight: 500;
	color: #ffffff;
	text-shadow: -1px 1px 2px #2d2d2f;
	line-height: 30px;
	margin-top: 0px;
	margin-bottom: 15px;
}


.hero-div.light .content h1 { 
	color: var(--color-blue-dark);
	text-shadow: -1px 1px 4px #ffffff;
}

.hero-div.light .content p { 
	color: var(--color-blue-black); 
	text-shadow: -1px 1px 4px #ffffff;
}




.hero-div.sourcing {
	background-color: #f2f2f2;
	background-image: url(../images/hero-banner/hero-sourcing-bg.webp);
	/* background-position: center calc(100% + 300px);  Moves the background 50px down */
	background-position: center bottom;
	background-repeat: repeat-x;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}

.hero-div.sourcing .lady-image {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 370px; /* Adjust size as needed */
	height: auto;
	z-index: 1;
	margin-bottom: -40px;
	margin-right: 20px;
}


.hero-div.sourcing .grass-image-1 {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 200px; /* Adjust size as needed */
	height: auto;
	z-index: 1;
	margin-bottom: -15px;
	margin-right: 120px;

	transform-origin: bottom center; /* pivot at the bottom */
    animation: sway1 6s ease-in-out infinite;
}

.hero-div.sourcing .grass-image-2 {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 270px; /* Adjust size as needed */
	height: auto;
	z-index: 1;
	margin-bottom: -20px;
	margin-right: -125px;

	transform-origin: bottom center; /* pivot at the bottom */
    animation: sway2 9s ease-in-out infinite;
}

.hero-div.sourcing .grass-image-3 {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 150px; /* Adjust size as needed */
	height: auto;
	z-index: 1;
	margin-bottom: -5px;
	margin-right: 350px;

	transform-origin: bottom center; /* pivot at the bottom */
    animation: sway2 6s ease-in-out infinite;
}

.hero-div.sourcing .grass-image-4 {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 150px; /* Adjust size as needed */
	height: auto;
	z-index: 1;
	margin-bottom: -5px;
	margin-right: 495px;

	transform-origin: bottom center; /* pivot at the bottom */
    animation: sway2 3s ease-in-out infinite;
}


.hero-div.sourcing .grass-image-1.wave-1 { animation-delay: 0s; }
.hero-div.sourcing .grass-image-2.wave-2 { animation-delay: 2s; }

@keyframes sway1 {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(1deg); }
	75% { transform: rotate(-10deg); }
	100% { transform: rotate(0deg); }
}

@keyframes sway2 {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}




.hero-div.processing {
	background-color: #313439;
	background-image: url(../images/hero-banner/hero-processing.webp);
	background-position: center bottom;
	background-repeat: repeat-x;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}


.hero-div.distribution {
	background-color: #313439;
	background-image: url(../images/hero-banner/hero-distribution.webp);
	background-position: center calc(100% + 550px); /* Moves the background 50px down */
	background-repeat: repeat-x;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}


.hero-div.who-we-are {
	background-color: #E4F3FF;
	background-image: url(../images/hero-banner/hero-who-we-are.webp);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 1800px 900px;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}

.hero-div.who-we-are .hero-image {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 550px; /* Adjust size as needed */
	height: auto;
	z-index: 1;
	margin-bottom: -35px;
	margin-right: 25px;
}

.hero-div.who-we-are .hero-image.bounce_1 { animation: bounce1 5s ease infinite; }
.hero-div.who-we-are .hero-image.bounce_2 { animation: bounce2 5s ease infinite; }

@keyframes bounce1 {
	0% { transform:translateY(0) }
	50% { transform:translateY(-15px) } to { transform:translateY(0) }
}

@keyframes bounce2 {
	0% { transform: translateY(0); }
	50% { transform: translateY(10px); }
	100% { transform: translateY(0); }
}



.hero-div.driving-impact {
	background-color: #E4F3FF;
	background-image: url(../images/hero-banner/hero-driving-impact.webp);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 1800px 800px;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}

.hero-div.driving-impact .two-farmer-image {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 480px; /* Adjust size as needed */
	height: auto;
	z-index: 1;
	margin-bottom: -40px;
	margin-right: 35px;
}
.hero-div.driving-impact .sun {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 250px; /* Adjust size as needed */
	height: auto;
	z-index: 0;
	margin-bottom: 120px;
	margin-right: -15px;
	opacity: 0.75;
}



.hero-div.career_low {
	background-color: #151515;
	background-image: url(../images/ayekart-goa-convention-2024_low.webp);
	background-position: center calc(100% + 145px); /* Moves the background 50px down */
	background-repeat: no-repeat;
    background-size: 1800px 1080px;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}

.hero-div.career {
	background-color: #151515;
	background-image: url(../images/ayekart-goa-convention-2024.webp);
	background-position: center calc(100% + 145px); /* Moves the background 50px down */
	background-repeat: no-repeat;
    background-size: 1800px 1080px;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}


.hero-div.gallery {
	background-color: #151515;
	background-image: url(../images/hero-banner/hero-gallery.webp);
	background-position: center top;
	background-repeat: repeat-x;
    background-size: 1850px 500px;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}


.hero-div.investor-relation {
	background-color: #003060;
	background-image: url(../images/hero-banner/hero-investor-relations.webp);
	background-position: center bottom;
	background-repeat: repeat-x;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}

.hero-div.investor-relation .graph-image {
	position: absolute;
    bottom: 0;
    right: 0;
    max-width: 360px;
    height: auto;
    z-index: 1;
    margin-bottom: -45px;
    margin-right: 40px;
	opacity: 0.65;
	/*filter: opacity(65%);*/
	filter: grayscale(100%) sepia(100%) hue-rotate(175deg) saturate(110%);
}



.hero-div.technology_low {
	background-color: #002141;
	background-image: url(../images/hero-banner/hero-technology_low.webp);
	background-position: center calc(100% + 210px); /* Moves the background 50px down */
	background-repeat: no-repeat;
	background-size: 2000px 750px;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}


.hero-div.technology {
	background-color: #002141;
	background-image: url(../images/hero-banner/hero-technology.webp);
	background-position: center calc(100% + 210px); /* Moves the background 50px down */
	background-repeat: no-repeat;
	background-size: 2000px 750px;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}

.hero-div.technology_low .fade-image, 
.hero-div.technology .fade-image {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 500px; /* Adjust size as needed */
	height: auto;
	z-index: 1;
	margin-bottom: -25px;
	margin-right: -15px;

	opacity: 0;
	animation-duration: 9s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}


.hero-div.technology .fade-image.img1 { animation-name: fade1; }
.hero-div.technology .fade-image.img2 { animation-name: fade2; }
.hero-div.technology .fade-image.img3 { animation-name: fade3; }
.hero-div.technology .fade-image.img4 { animation-name: fade4; }

/* 3-phase keyframes */
@keyframes fade1 {
	0%     { opacity: 1; }
	25%    { opacity: 1; }
	30%    { opacity: 0; }
	80%    { opacity: 0; }
	100%   { opacity: 0; }
}

@keyframes fade2 {
	0%     { opacity: 0; }
	20%    { opacity: 0; }
	30%    { opacity: 1; }
	60%    { opacity: 1; }
	70%    { opacity: 0; }
	100%   { opacity: 0; }
}

@keyframes fade3 {
	0%     { opacity: 0; }
	55%    { opacity: 0; }
	65%    { opacity: 1; }
	90%    { opacity: 1; }
	100%   { opacity: 0; }
}

@keyframes fade4 {
	0%     { opacity: 0; }
	40%    { opacity: 0; }
	90%    { opacity: 0; }
	95%    { opacity: 1; }
	100%   { opacity: 1; }
}

/*
@keyframes fade1 {
	0%     { opacity: 1; }
	30%    { opacity: 1; }
	40%    { opacity: 0; }
	100%   { opacity: 0; }
}

@keyframes fade2 {
	0%     { opacity: 0; }
	30%    { opacity: 0; }
	40%    { opacity: 1; }
	70%    { opacity: 1; }
	80%    { opacity: 0; }
	100%   { opacity: 0; }
}

@keyframes fade3 {
	0%     { opacity: 0; }
	70%    { opacity: 0; }
	80%    { opacity: 1; }
	100%   { opacity: 1; }
}
*/


.hero-div.contactus {
	background-color: #749AAD;
	background-image: url(../images/hero-banner/hero-contact-us.webp);
	background-position: center bottom;
	background-repeat: repeat-x;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}

.hero-div.contactus .farmer-image {
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 420px; /* Adjust size as needed */
	height: auto;
	z-index: 1;
	margin-bottom: -120px;
	margin-right: 40px;
}

.hero-div.contactus .farmer-image.hello-image {
	opacity: 0.5;
}



.hero-div.media-room {
	background-color: #003060;
	background-image: url(../images/hero-banner/hero-mediaroom.webp);
	background-position: center bottom;
	background-repeat: repeat-x;

	padding-top: 170px;
    margin: 0 auto;
	overflow: hidden;
	width: 100%;
}



/* ## End of Hero image */
/* ####################### */







/* ####################### */
/* ## Start of Marquee Scrolling */
.marquee-scrolling-section { 
	padding: 15px 15px 15px 15px;
	background-color: var(--color-blue-dark);
}


.marquee-scrolling-section .content { 
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;
}

.marquee-scrolling-section .marquee-container {
	width: 100%;
	height: auto;
	overflow: hidden;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	/*background-color: #f8f8f8;*/
}

.marquee-scrolling-section .marquee-track {
	display: flex;
	width: max-content;
	animation: scroll-left 10s linear infinite;
}

.marquee-scrolling-section .marquee-content {
	display: flex;
	align-items: center;
	padding: 0 30px;
	border-left: 1px solid #111;
	/*border-right: 1px dotted #111;*/

	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	white-space: nowrap;
}

@keyframes scroll-left {
	0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-50%);
	}
}


/* ## End of Marquee Scrolling */
/* ####################### */






/* ####################### */
/* ## Start of Ayekart Reach Tab */
.ayekart-reach { 
	padding: 70px 15px 70px 15px;
	background-color: transparent;
}

.ayekart-reach h2 {
    font-family: var(--main-font);
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    padding: 0px;
    margin-bottom: 45px;
    line-height: 45px;
    text-align: center;
}



.ayekart-reach .content {
	border: 0px solid #f0f0f0;
	padding: 5px 5px;
	margin-bottom: 30px;
	text-align: left;
	width: 100%;
}

.ayekart-reach h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-black);
	padding: 0px;
	margin-bottom: 10px;
	line-height: 45px;
	text-align: left;
}

.ayekart-reach h3 span {
	color: var(--color-blue-cyan);
}

.ayekart-reach p {
	font-family: var(--main-font);
	color: #656565;
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	margin-bottom: 15px;
	text-align: justify;
}

.ayekart-reach h3 span {
	color: var(--color-blue-cyan);
}


.ayekart-reach .content img {
	width: 85%; height: auto;
	float: right; text-align: right;
	margin-top: -30px;
}



.ayekart-reach .content span a {
	font-family: var(--main-font);
	color: var(--color-white);
	background-color: var(--color-blue-black);
	font-size: 14px;
	font-weight: 400;
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 12px 22px;
	border-radius: 3px;
}
.ayekart-reach .content span a:hover {
	background-color: var(--color-blue-royal);
}
.ayekart-reach .content span a:focus {
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #252525; outline: none; 
	top: 0px; position: relative;
}
.ayekart-reach .content span a:active { 
	background-color: #252525; outline: none; 
}



/* outline colour */
.ayekart-reach .nav-tabs {
	border-bottom: 1px solid #757575;
}
.ayekart-reach .nav-tabs .nav-link:focus, .ayekart-reach .nav-tabs .nav-link:hover {
    border-color: #757575;;
}




.ayekart-reach .nav-tabs .nav-link {
	color: #959595;
	font-size: 15px;
	font-weight: 600;
	padding: 15px 20px;
}

.ayekart-reach .nav-tabs .nav-link.active {
	color: var(--color-blue-cyan);
}

.ayekart-reach .tab-pane h2 {
	text-align: left;
	margin-top: 20px;
	padding-top: 10px;
	font-size: 22px;
	font-weight: 700;
}

.ayekart-reach .tab-pane p {
	text-align: left;
	font-family: var(--main-font);
	color: #656565;
	font-size: 14px;
	font-weight: 400;
	margin-top: 10px;
}

.ayekart-reach .tab-pane img {
	text-align: right;
	float: right;
}


.ayekart-reach .tab-pane span a {
	font-family: var(--main-font);
	color: var(--color-blue-black);
	background-color: #ffffff;
	font-size: 13px;
	font-weight: 400;
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 10px 22px;
	border-radius: 3px;
	border: 2px solid var(--color-blue-black);
}
.ayekart-reach .tab-pane span a:hover {
	background-color: var(--color-blue-black);
	color: #ffffff;
}
.ayekart-reach .tab-pane span a:focus {
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #252525; outline: none; 
	top: 0px; position: relative;
	color: #ffffff;
}
.ayekart-reach .tab-pane span a:active { 
	background-color: #252525; outline: none; 
	color: #ffffff;
}



.ayekart-reach .tab-pane .icon-number {
	padding-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 10px; /* spacing between image and text */
}

.ayekart-reach .tab-pane .icon-number img {
	width: auto !important; 
	height: 55px !important;
}
.ayekart-reach .tab-pane .icon-number .number {
	font-family: var(--main-font);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-blue-black);
	line-height: 20px;
	margin-top: 10px;
	margin-bottom: 0px;
	text-align: left;
}
.ayekart-reach .tab-pane .icon-number .text {
	font-family: var(--main-font);
	font-size: 13px;
	font-weight: 400;
	color: #656565;
	line-height: 15px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: left;
}
/* ## End of Ayekart Reach Tab */
/* ####################### */







/* ####################### */
/* ## Start of We work with */
.we-work-with { 
	padding: 75px 15px 0px 15px;
    background-image: url(../images/bg_half_circle.png);
    background-position: top center;
	background-repeat: no-repeat;
}

.we-work-with h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: #ffffff;
	padding: 0px;
	margin-bottom: 5px;
	line-height: 45px;
	text-align: center;
}

.we-work-with p {
	font-family: var(--main-font);
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 25px;
}


.we-work-with .content {
	border: 0px solid #f0f0f0;
	padding: 0px 0px;
	border-radius: 3px;
	margin-bottom: 5px;
	text-align: left;
	width: 100%;
}

.we-work-with .content-flex {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between icon and text */
}


.we-work-with .content .material-symbols-rounded { 
	font-size: 50px;
	/* color: #677EAA; */
	color: var(--color-blue-black);
	text-align: center;
	padding: 9px 6px;
	line-height: 40px;
	transition: all 0.4s ease; 
	-webkit-transition: all 0.4s ease; 

	font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;

	border: 1px solid #ffffff;
	background-color: #fff;
    width: 60px;
    height: 60px;
	border-radius: 75px;
	margin-top: 5px;
	margin-bottom: 10px;
}

.we-work-with .content h3 {
	font-family: var(--main-font);
	font-size: 18px;
	font-weight: 600;
	color: #ffffff;
	line-height: 25px;
	text-align: left;
    margin: 0;
	margin-top: -5px;
}

.we-work-with .content p {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #454545;
	line-height: 20px;
	margin-top: 10px;
	margin-bottom: 0px;
	text-align: center;
}



/* tab click */
.we-work-with .click-block {
	cursor: pointer;
	padding: 10px 20px 2px 20px;
	border: 1px solid #21335F;
	margin-bottom: 10px;
	transition: background 0.5s;
	border-radius: 3px;
	width: 90%;
}

.we-work-with .click-block:hover {
	background-color: #21335F;
}

.we-work-with .click-block.active {
	background-color: #21335F;
	border-color: #21335F;
}

.we-work-with #click-image {
	width: 100%;
	max-width: 250px;
	height: auto;
	transition: all 0.3s ease-in-out;
	float: right;
	text-align: right;
}

/* ## End of We work with */
/* ####################### */







/* ####################### */
/* ## Start of Impact Stories video section */
.impact-stories { 
	padding: 75px 15px 75px 15px;
}

.impact-stories.cyan { 
	background-color: #dff2ff;
}

.impact-stories h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	padding: 0px;
	margin-bottom: 5px;
	line-height: 45px;
	text-align: center;
}

.impact-stories h3 span {
	color: var(--color-blue-cyan);
}

.impact-stories p {
	font-family: var(--main-font);
	color: #454545;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 20px;
}


/* video slider css */
.impact-stories .video-slider {
	display: flex;
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	justify-content: center;
	margin-bottom: 55px;
}

.impact-stories .video-card {
	position: relative;
	width: 225px;
	height: 190px;
	margin-left: -60px; /* overlap */
	transition: transform 0.3s ease;
	/* cursor: pointer; */
	overflow: hidden;
	border-radius: 20px;
	background: transparent;
	box-shadow: 1px 2px 6px #454545;
}

.impact-stories .video-card:first-child {
	margin-left: 0;
}

.impact-stories .video-card img {
	width: auto;
	height: 100%;
	transition: transform 0.3s ease;
	display: block;
}


.impact-stories .play-icon {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 65px;
	color: #ffffff;
	text-shadow: 0px 0px 5px #454545;
	cursor: pointer;
	z-index: 6;
	opacity: 0.5;
}

/* video slider css */


/* ## End of Impact Stories video section */
/* ####################### */






/* ####################### */
/* ## Start of Driving Efficiency new section */
.driving-efficiency-new { 
	padding: 75px 15px 70px 15px; 
	background-color: #ffffff;
}


.driving-efficiency-new h2 {
	font-family: var(--main-font);
    font-size: 30px;
    font-weight: 700;
    color: var(--color-blue-black);
	line-height: 45px;
	text-align: center;
    padding: 0px;
	margin-top: 0px;
    margin-bottom: 25px;
}

.driving-efficiency-new h3 {
	font-family: var(--main-font);
    font-size: 20px;
    font-weight: 600;
    color: #454545;
	line-height: 35px;
	text-align: center;
    padding: 0px;
    margin-bottom: 0px;
}

/* ## End of Driving Efficiency new section */
/* ####################### */







/* ####################### */
/* ## Start of Elevated Feature Card section */
.elevated-feature-card {
    padding: 75px 15px 85px 15px;
    background-color: #ffffff;
}

.elevated-feature-card .content {
	padding: 0px 0px;
	margin-bottom: 50px;
}


.elevated-feature-card .content h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	line-height: 35px;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 10px;
}
.elevated-feature-card .content h3 span {
	color: var(--color-blue-cyan);
}


.elevated-feature-card .feature-box {
	position: relative;
	background: #fff;
	border-radius: 12px;
	padding: 95px 50px 35px 40px;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
	text-align: center;
	height: 100%;
}

.elevated-feature-card .feature-icon {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #ffffff;
	box-shadow: 0px 0px 20px 2px #e5e5e5;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 55px;
}

.elevated-feature-card .feature-box h4 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--color-blue-dark);
	text-align: center;
	line-height: 30px;
}

.elevated-feature-card .feature-box h5 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--color-blue-dark);
	text-align: left;
	line-height: 30px;
}

.elevated-feature-card .feature-box p {
	font-size: 14px;
	font-weight: 400;
	color: #6c757d;
	text-align: justify;
	line-height: 25px;
}

.elevated-feature-card .feature-box ul { 
	list-style-type: square;
	margin: 0; 
	padding: 5px 0px 0px 0px;
}


.elevated-feature-card .feature-box li {
	list-style-type: square;
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #454545;
	margin-left: 17px;
	padding: 5px 0px;
	line-height: 25px;
	letter-spacing: 0px;
	text-align: justify;
}




/* ## End of Left Text Grid */
/* ####################### */




/* ####################### */
/* ## Start of Left Text Grid */
.left-text-grid { 
	padding: 75px 15px 75px 15px; 
	background-color: #ffffff;
}

.left-text-grid.grey { 
	background-color: #ececec;
}


.left-text-grid .content {
	border: 0px solid #f0f0f0;
	padding: 5px 5px;
	margin-bottom: 30px;
	text-align: left;
	width: 100%;
}

.left-text-grid .content h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-black);
	line-height: 40px;
	margin-top: 5px;
	margin-bottom: 15px;
	text-align: left;
	word-spacing: 3px;
}

.left-text-grid .content p {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #656565;
	line-height: 25px;
	margin-top: 5px;
	margin-bottom: 15px;
	text-align: justify;
	letter-spacing: 0.5px;
}


.left-text-grid .content span a {
	font-family: var(--main-font);
	color: var(--color-white);
	background-color: var(--color-blue-black);
	font-size: 13px;
	font-weight: 400;
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 12px 22px;
	border-radius: 3px;
}
.left-text-grid .content span a:hover {
	background-color: var(--color-blue-royal);
}
.left-text-grid .content span a:focus {
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #252525; outline: none; 
	top: 0px; position: relative;
}
.left-text-grid .content span a:active { 
	background-color: #252525; outline: none; 
}



.left-text-grid .content img { 
	width: 99%; height: auto;
	float: right; text-align: right;
	margin-top: -5px;
	border-radius: 10px;
}

/* ## End of Left Text Grid */
/* ####################### */





/* ####################### */
/* ## Start of Common Text Grid */
/* ## used in index page */
.common-grid { 
	padding: 25px 15px 25px 15px; 
	background-color: transparent;
}

.common-grid.grey {
	padding: 75px 15px 65px 15px; 
	background-color: #f2f2f2;
}


.common-grid .anchor-target {
	scroll-margin-top: 115px;
}





.common-grid .greyoutline { 
	border: 2px solid #f2f2f2;
	border-radius: 10px;
	padding: 40px 30px 35px 30px;
}


.common-grid .content {
	border: 0px solid #f0f0f0;
	padding: 4px 4px;
	margin-bottom: 10px;
	text-align: left;
	width: 100%;
}


.common-grid .content h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	line-height: 40px;
	margin-top: 0px;
	margin-bottom: 12px;
	text-align: left;
	word-spacing: 3px;
}
.common-grid .content h2 span {
	color: var(--color-blue-cyan);
}



.common-grid .content h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-bg-light-blue);
	line-height: 35px;
	margin-top: 0px;
	margin-bottom: 15px;
	text-align: justify;
}

.common-grid .content h5 {/* used in technology sub-headings */
	font-family: var(--main-font);
	font-size: 16px;
	font-weight: 600;
	color: #454545;
	line-height: 25px;
	margin-bottom: 0px;
	text-align: left;
}

.common-grid .content p {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	line-height: 25px;
	margin-top: 5px;
	margin-bottom: 15px;
	text-align: justify;
}


/* Reset all list styles and ensure no margin/padding */
.common-grid .content ul {
	list-style-type: square;
	margin: 0;
	padding-left: 18px;      /* Control the indentation of bullets (adjust as needed) */
	box-sizing: border-box;  /* Ensures padding doesn't affect width */
	padding-top: 0px;
	margin-top: 0px;
}


.common-grid .content li {
	margin: 0;
	padding: 1px 0px;

	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #454545;
	line-height: 25px;
	margin-bottom: 4px;

	text-align: justify;
}
.common-grid .content li b {
	font-weight: 600;
}




.common-grid .content span a {
	font-family: var(--main-font);
	color: var(--color-white);
	background-color: var(--color-blue-black);
	font-size: 13px;
	font-weight: 400;
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 12px 22px;
	border-radius: 3px;
}
.common-grid .content span a:hover {
	background-color: var(--color-blue-royal);
}
.common-grid .content span a:focus {
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #252525; outline: none; 
	top: 0px; position: relative;
}
.common-grid .content span a:active { 
	background-color: #252525; outline: none; 
}

.common-grid .content img { 
    margin-top: 5px;
    float: none; /* Remove the float */
    display: block; /* Turn the image into a block-level element */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    text-align: center; /* Centers text within the container, but not the image */
	border-radius: 10px;
}


/* ######### */
/* Container to hold both animated images */
.common-grid .image-container {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;  /* Keep it a square */
	border-radius: 50%;
	overflow: hidden;     /* Clip anything outside the circle */
}

/* Shared image styles */
.common-grid .image-container img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Top image (static) */
.common-grid .image-container .top-image {
	z-index: 2;
}

/* Bottom image (rotating) */
.common-grid .image-container .bottom-image {
	z-index: 1;
	animation: rotate 45s linear infinite;
}

/* Rotation animation */
@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}






.content-background {
	position: relative;
	background-color: var(--color-blue-black);
	border-radius: 10px;
	padding: 20px;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 0;
}

.content-background::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('../images/di-farmer-tractor.webp');
	background-size: cover;
	background-position: center;
	opacity: 0.3; /* adjust opacity as needed */
	border-radius: 10px;
	z-index: -1;
}

.content-background .video-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	z-index: 1;
}

.content-background .video-wrapper iframe {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 4px;
}


.common-grid .youtube-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	z-index: 1;
}

.common-grid .youtube-wrapper iframe {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 5px;
}



.common-grid .card {
    border-radius: 6px;
	border: none;
	background-color: transparent;
}

.common-grid .card-img {
    height: 200px;
	width: auto;
    object-fit: cover;
	border-radius: 6px;
}


.common-grid .card h3 {
	font-family: var(--main-font);
	font-size: 20px;
	font-weight: 700;
	color: var(--color-blue-black);
	line-height: 25px;
	margin-top: 20px;
	margin-bottom: 0px;
	text-align: left;
	padding: 0px 5px;
}

.common-grid .card p {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #454545;
	line-height: 25px;
	margin: 10px 0px;
	text-align: justify;
	padding: 0px 5px;
}











/* ## End of Common Text Grid */
/* ####################### */







/* ####################### */
/* ## Start of Milestone Counter section */
.milestone-counter {
    position: relative;
    padding: 75px 15px 50px 15px;
    background-color: var(--color-blue-black);
    z-index: 1;
    overflow: hidden;
}

.milestone-counter.img1::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../images/bg-milestone-counter-1.webp);
    background-position: center center;
    background-size: cover;
    opacity: 0.1; /* 90% transparency */
    z-index: -1;
	background-attachment: fixed;
}

.milestone-counter.img2::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../images/bg-milestone-counter-2.webp);
    background-position: center center;
    background-size: cover;
    opacity: 0.1; /* 90% transparency */
    z-index: -1;
	background-attachment: fixed;
}

.milestone-counter.img3-career::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../images/ayekart-goa-convention-2024.webp);
    background-position: center center;
    background-size: cover;
    opacity: 0.1; /* 90% transparency */
    z-index: -1;
	background-attachment: fixed;
}

.milestone-counter h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: #ffffff;
	padding: 0px;
	margin-bottom: 5px;
	line-height: 45px;
	text-align: center;
}

.milestone-counter h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: #ffffff;
	padding: 0px;
	margin-bottom: 5px;
	line-height: 45px;
	text-align: center;
}


.milestone-counter p {
	font-family: var(--main-font);
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 40px;
}


.milestone-counter .content {
	border: 0px solid #f0f0f0;
	padding: 10px 10px;
	border-radius: 3px;
	margin-bottom: 25px;
	text-align: center;
	width: 100%;
	/* background-color: #ffffff; */
}

.milestone-counter .content .material-symbols-rounded { 
	font-size: 75px;
	color: var(--color-blue-cyan);
	text-align: center;
	padding: 14px 5px;
	line-height: 60px;
	transition: all 0.4s ease; 
	-webkit-transition: all 0.4s ease; 

	font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;

	border: 2px solid var(--color-blue-cyan);
    width: 95px;
    height: 95px;
	border-radius: 50px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.milestone-counter .content h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: #ffffff;
	line-height: 35px;
	margin-top: 5px;
	margin-bottom: 10px;
	text-align: center;
	letter-spacing: -1px;
}

.milestone-counter .content p {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	line-height: 20px;
	margin-top: 10px;
	margin-bottom: 0px;
	text-align: center;
}

/* ## End of Counter section */
/* ####################### */






/* ####################### */
/* ## Start of Why Choose section */
.why-choose {
    padding: 75px 15px 60px 15px;
    position: relative; /* Ensure content is positioned normally */
    z-index: 1; /* Keeps the content above the particles */
    /*min-height: 100vh;*/

	background: 
    linear-gradient(to top, var(--color-blue-black) 0%, #050505 80%), 
    linear-gradient(to bottom, var(--color-blue-black) 0%, #050505 80%);
  background-repeat: no-repeat;
  background-size: 100% 20%, 100% 20%; /* Apply the gradients only to the top and bottom */
  background-position: top, bottom; /* Position the gradients at the top and bottom */
}



.why-choose h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: #ffffff;
	padding: 0px;
	margin-bottom: 10px;
	line-height: 45px;
	text-align: center;
}


.why-choose p {
	font-family: var(--main-font);
	color: #151515;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 40px;
}


.why-choose .content {
	border: 0px solid #f0f0f0;
	padding: 10px 10px;
	border-radius: 3px;
	margin-top: 10px;
	margin-bottom: 0px;
	text-align: center;
	width: 100%;
	/* background-color: #ffffff; */
}


.why-choose .content img {
	width: 80px;
	height: auto;
	margin: auto 0;
}




.why-choose .content .material-symbols-rounded { 
	font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
	font-size: 60px;
	color: #ffffff;
	text-align: center;
	line-height: 60px;
	transition: all 0.4s ease; 
	-webkit-transition: all 0.4s ease; 
	margin-top: 5px;
	margin-bottom: 5px;
}

.why-choose .content .material-symbols-rounded.blue {
	padding: 15px 15px;
	background-color: var(--color-blue-cyan);
	border: 2px solid var(--color-blue-cyan);
    width: 95px;
    height: 95px;
	border-radius: 50px;
}

.why-choose .content .material-symbols-rounded.white {
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
	font-size: 35px;
	line-height: 40px;
	margin-top: 40px;
}


.why-choose .content h3 {
	font-family: var(--main-font);
	font-size: 18px;
	font-weight: 500;
	color: #ffffff;
	line-height: 35px;
	margin-top: 5px;
	margin-bottom: 10px;
	text-align: center;
}

.why-choose .content h3 span {
	font-size: 24px;
	font-weight: 700;
	margin-right: 1px;
}

.why-choose .content p {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #151515;
	line-height: 25px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
}



.why-choose .anchor-target {
	scroll-margin-top: 115px;
}


/* ## End of Why Choose section */
/* ####################### */





/* ####################### */
/* ## Start of Ecosystem Icons section */
.ecosystem-icons {
    padding: 75px 15px 60px 15px;
    background-color: transparent;
}



.ecosystem-icons h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: #ffffff;
	padding: 0px;
	margin-bottom: 5px;
	line-height: 45px;
	text-align: center;
}


.ecosystem-icons .heading {
	width: 100%;
}


.ecosystem-icons .heading h3 {
	font-family: var(--main-font);
	font-size: 25px;
	font-weight: 600;
	color: #ffffff;
	padding: 4px 20px;
	margin-top: 50px;
	margin-bottom: 0px;
	line-height: 35px;
	text-align: center;
	border: 1px solid #ffffff;
	border-radius: 4px;

	position: relative;  /* Position relative to apply the outline properly */
    display: inline-block; /* Prevents stretching of the outline */
}


.ecosystem-icons .content {
	padding: 10px 10px;
	border-radius: 9px;
	margin-top: 10px;
	margin-bottom: 0px;
	text-align: center;
	width: 100%;
	border: 0px solid var(--color-blue-cyan);
}

.ecosystem-icons .content .material-symbols-rounded { 
	font-size: 50px;
	color: var(--color-blue-cyan);
	background-color: transparent;
	text-align: center;
	padding: 0px 0px;
	line-height: 50px;
	transition: all 0.4s ease; 
	-webkit-transition: all 0.4s ease; 

	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;

	/*width: 30px; height: 30px;*/

	border: 0px solid var(--color-blue-cyan);
	border-radius: 50px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.ecosystem-icons .content h3 {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #ffffff;
	line-height: 25px;
	margin-top: 5px;
	margin-bottom: 10px;
	text-align: center;
}

/* ## End of Why Choose section */
/* ####################### */





/* ####################### */
/* ## Start of Event Schedule section */
.event-schedule {
    padding: 20px 15px 50px 15px;
	background-color: #000000;
	
	/*background: linear-gradient(to bottom, var(--color-blue-black), black);*/
}

.event-schedule h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: #ffffff;
	padding: 0px;
	margin-bottom: 10px;
	line-height: 45px;
	text-align: center;
}
/* ## End of Event Schedule section */
/* ####################### */






/* ####################### */
/* ## Start of Event Schedule section */
.built-bottom {
    padding: 100px 15px 40px 15px;
	background-color: #000000;
	
	/*background: linear-gradient(to bottom, var(--color-blue-black), black);*/
}

.built-bottom h2 {
	font-family: var(--main-font);
	font-size: 40px;
	font-weight: 400;
	padding: 0px;
	margin-bottom: 10px;
	line-height: 45px;
	text-align: center;

	 /* Applying a linear gradient to the text */
    background: linear-gradient(to bottom, #333333, #ffffff); /* Dark grey to white */
    -webkit-background-clip: text; /* Ensures the gradient applies to the text */
    background-clip: text; /* For non-webkit browsers */

    color: transparent; /* Make the text color transparent to reveal the background gradient */

	/* Adding the glowing shadow */
    text-shadow: 0 0 10px #ffffff, 0 0 30px #00bfff, 0 0 50px #1e3a8a, 0 0 80px #1e3a8a;
    animation: glow 1.5s infinite alternate;
}


/* Animation for the glowing shadow */
@keyframes glow {
    0% {
        text-shadow: 0 0 10px #ffffff, 0 0 30px #00bfff, 0 0 50px #1e3a8a, 0 0 80px #1e3a8a;
    }
    50% {
        text-shadow: 0 0 20px #ffffff, 0 0 60px #00bfff, 0 0 100px #1e3a8a, 0 0 150px #1e3a8a;
    }
    100% {
        text-shadow: 0 0 10px #ffffff, 0 0 30px #00bfff, 0 0 50px #1e3a8a, 0 0 80px #1e3a8a;
    }
}
/* ## End of Event Schedule section */
/* ####################### */








/* ####################### */
/* ## Start of Our Journey section */
.our-journey { 
	padding: 70px 15px 10px 15px;
	background-color: #ffffff;
}

.our-journey h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	padding: 0px;
	margin-bottom: 5px;
	line-height: 45px;
	text-align: center;
}
.our-journey h3 span {
	color: var(--color-blue-cyan);
}


.our-journey p {
	font-family: var(--main-font);
	color: #454545;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 25px;
	text-align: center;
}

/* ## End of Our Journey section */
/* ####################### */





/* ####################### */
/* ## Start of Sustainable Future section */
.sustainable-future {
	padding: 75px 15px 40px 15px;
}

.sustainable-future.cyan {
	background-color: #dff2ff;
}

.sustainable-future.light-blue {
	background-color: #F3F8FB;
}


.sustainable-future .content {
	padding: 0px 5px;
	margin-bottom: 30px;
}

.sustainable-future .content h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-black);
	padding: 0px;
	margin-bottom: 5px;
	line-height: 40px;
	text-align: center;
}

.sustainable-future h3 span {
	color: var(--color-blue-cyan);
}



.sustainable-future .content-grid {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 160px;
}


.sustainable-future .content-grid .green-box {
	background-color: transparent;
	border: 2px solid var(--color-blue-cyan);
	border-radius: 5px;
	padding: 20px;
	flex: 1 1 auto;
	min-height: 160px;
}

.sustainable-future .content-grid .green-box h2 {
	font-size: 24px;
	font-weight: 700;
	color: #252525;
	margin: 0px;
	margin-bottom: 10px;
	text-align: left;
}

.sustainable-future .content-grid .green-box p {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
	width: 80%;
}

.sustainable-future .content-grid .circle-img {
	flex-shrink: 0;
	margin-left: -80px; /* slightly overlap the green box */
	margin-top: 0px;
	width: 182px;
	height: 182px;
	z-index: 1;
}

.sustainable-future .content-grid .circle-img img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* ## End of Sustainable Future section */
/* ####################### */









/* ####################### */
/* ## Start of Impact Box */
.impact-box {
	padding: 75px 15px 75px 15px;
}

.impact-box.light-blue {
	background-color: #F3F8FB;
}

.impact-box .blue-outline {
	border: 2px solid var(--color-blue-cyan);
	border-radius: 5px;
	padding: 20px;
	height: 100%;
}

/* Desktop-first: fixed square image for desktop */
.impact-box .blue-outline .image-wrapper {
	width: 150px !important;       /* changeable */
	height: 150px !important;      /* changeable */
	border-radius: 5px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	margin-bottom: 0;
	margin-right: 20px;
}

.impact-box .blue-outline .content {
	padding: 0px 4px 0px 0px;
}

/* Override for mobile: responsive full-width square */
@media (max-width: 768px) {
	.impact-box .blue-outline .image-wrapper {
		width: 100% !important;
		height: 175px !important;
		/*padding-top: 100%;  /* maintains 1:1 aspect ratio */
		margin-bottom: 20px;
		margin-right: 0px;
	}

	.impact-box .blue-outline .content {
		padding: 0px 5px;
	}

}



.impact-box .blue-outline .impact-title, 
.impact-box .blue-outline h3 {
	color: #454545;
	font-size: 24px;
	font-weight: 700;
	margin-top: 5px;
}

.impact-box .blue-outline .impact-text,
.impact-box .blue-outline p {
	font-size: 14px;
	font-weight: 400;
	color: #656565;
	margin-top: 10px;
	text-align: justify;
}

.impact-box .blue-outline .align-top {
	align-self: flex-start;
}

/* ## End of Impact Box */
/* ####################### */






/* ####################### */
/* ## Start of Financial Partners Scroll */
.financial-partners { 
	padding: 75px 15px 60px 15px;
	background-color: #ffffff;
}

.financial-partners.lightblue { 
	background-color: #F3F8FB;
}


.financial-partners .content {
	border: 0px solid #f0f0f0;
	padding: 0px 0px;
	margin-bottom: 5px;
	width: 100%;
}

.financial-partners .col-lg-4 img {
	height: 100px;
	width: auto;
	margin: 0px 10px;
	flex-shrink: 0;

	/*display color image as grayscale*/
	/* filter: grayscale(100%);
	-webkit-filter: grayscale(100%);*/
}

.financial-partners h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	line-height: 35px;

	margin-bottom: 15px;
	text-align: center;
	word-spacing: 1px;
}
.financial-partners h2 span {
	color: var(--color-blue-cyan);
}

.financial-partners p {
	font-family: var(--main-font);
	color: #454545;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	line-height: 20px;
	margin-bottom: 5px;

}




/* start slider css */
.financial-partners .slider-container {
	overflow: hidden;
	background: #ffffff;
	padding: 20px 0;

	/* Create fading effect on sides */
	-webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
	mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.financial-partners .slider-track {
	display: flex;
	width: max-content;
	animation: scroll 40s linear infinite;
}

.financial-partners .logo-group {
	display: flex;
}

.financial-partners .logo-group img {
	height: 100px;
	margin: 0px 10px;
	flex-shrink: 0;

	/* display color image as grayscale */
	/* filter: grayscale(100%);
	-webkit-filter: grayscale(100%);*/
}

@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* end slider css */


/* ## End of Financial Partners Scroll */
/* ####################### */





/* ####################### */
/* ## Start of Brand Logo Scroll */
.brand-logo-scroll { 
	padding: 75px 15px 65px 15px;
	background-color: #ffffff;
}

.brand-logo-scroll h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	padding: 0px;
	margin-bottom: 5px;
	line-height: 45px;
	text-align: center;
}
.brand-logo-scroll h3 span {
	color: var(--color-blue-cyan);
}

.brand-logo-scroll p {
	font-family: var(--main-font);
	color: #656565;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 25px;
}



/* start slider css */
.brand-logo-scroll .slider-container {
	overflow: hidden;
	background: #ffffff;
	padding: 20px 0;

	/* Create fading effect on sides */
	-webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
	mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.brand-logo-scroll .slider-track {
	display: flex;
	width: max-content;
	animation: scroll 40s linear infinite;
}

.brand-logo-scroll .logo-group {
	display: flex;
}

.brand-logo-scroll .logo-group img {
	height: 80px;
	margin: 0px 10px;
	flex-shrink: 0;

	/* display color image as grayscale */
	/* filter: grayscale(100%);
	-webkit-filter: grayscale(100%);*/
}

@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* end slider css */


/* ## End of Brand Logo Scroll */
/* ####################### */







/* ####################### */
/* ## Start of Testimonials 2 */
.testimonials-2 { 
	padding: 75px 15px 75px 15px;
	background-color: #ffffff;
}

.testimonials-2.grey { 
	background-color: #f1f4f7;
}


.testimonials-2 .content h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	padding: 0px;
	margin-bottom: 10px;
	line-height: 40px;
	text-align: center;
}
.testimonials-2 .content h3 span {
	color: var(--color-blue-cyan);
}


.testimonials-2 .content p {
	font-family: var(--main-font);
	color: #656565;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 40px;
	text-align: center;
}


.testimonials-2 .blog-card {
	border: 1px solid #d5d5d5;
	border-radius: 6px;
	transition:  0.3s ease;

	background-image: url('../images/icon-quote.png');
    background-position: right bottom;
    background-repeat: no-repeat;
}

.testimonials-2 .card-body {
	padding: 30px 30px 25px 30px;
}



.testimonials-2 .blog-card .card-text {
	font-family: var(--main-font);
	color: #656565;
	font-size: 14px;
	font-weight: 400;

	line-height: 25px;
	text-align: justify;
}


.testimonials-2 .person-name {
	margin-top: 15px;
}


.testimonials-2 .person-name .name {
	font-family: var(--main-font);
	font-size: 18px;
	font-weight: 700;
	color: var(--color-blue-royal);
	line-height: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: left;
	display: block;
}

.testimonials-2 .person-name .designation {
	font-family: var(--main-font);
	color: #656565;
	font-size: 13px;
	font-weight: 400;

	line-height: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: left;
}



/* ## End of Testimonials 2 */
/* ####################### */








/* ####################### */
/* ## Start of Media icons */

.media-icons {
    padding: 30px 15px 15px 15px;
	background-color: #E8F3FF;

	position: sticky;
	top: 90px; /* stick just below navbar */
	z-index: 100;
	
	transition: padding 0.3s ease, transform 0.3s ease; /* 💡 smooth transform */
	margin: 0 auto;
}


.media-icons .content {
	padding: 5px 5px;
	margin-bottom: 25px;
	text-align: center;
	width: 100%;
	color: #454545;

	outline: 1px solid transparent;
	border-radius: 6px;
	transition: all 0.5s ease;
}

.media-icons .content:hover {
	border-radius: 6px;
	outline: 1px solid var(--color-link-blue);
	color: var(--color-link-blue);
}

.media-icons .content .material-symbols-rounded { 
	font-size: 50px;
	/* color: #454545; */
	text-align: center;
	padding: 0px 0px;
	line-height: 60px;

	font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;

    width: 50px;
    height: 50px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.media-icons .content p {
	font-family: var(--main-font);
	/* color: #454545; */
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	margin-bottom: 10px;
}



/* when media-icons in in sticky state */
.media-icons.sticky-active {
	padding: 10px 15px 10px 15px !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.media-icons.sticky-active .content {
	padding: 2px 2px;
	margin-bottom: 2px !important;
}
.media-icons.sticky-active .content .material-symbols-rounded { 
	font-size: 45px;
	line-height: 50px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.media-icons.sticky-active .content p {
	margin-bottom: 5px;
}

/* ## End of Media icons */
/* ####################### */







/* ####################### */
/* ## Start of Media Blog Card section */
.media-card-section { 
	padding: 75px 15px 70px 15px;
	background-color: #ffffff;
}

.media-card-section.grey { 
	background-color: #ececec;
}


.media-card-section.bg-dryfruits { 
	background-color: #ffffff;
	background-image: url(../images/bg-dryfruits-2.png);
	background-repeat: repeat;
}


.media-card-section .media-kit { 
	display: flex;
	flex-direction: column;
	justify-content: center; /* vertical centering */
	align-items: center;     /* horizontal centering */
	height: 100%;            /* ensure it fills the parent height */
	text-align: center;      /* center text inside */
}

.media-card-section .media-kit img { 
	width: 100%;
	height: auto;
	padding: 5px 25px;
}

.media-card-section .media-kit h4 { 
    font-family: var(--main-font);
    font-size: 30px;
    font-weight: 700;
    color: var(--color-blue-dark);
    padding: 0px;
    margin-bottom: 5px;
    line-height: 45px;
    text-align: center;
    scroll-margin-top: 200px;
}

.media-card-section .media-kit p a { 
	font-size: 14px;
	font-weight: 600;
	color: var(--color-link-blue);
	text-decoration: none;
}
.media-card-section .media-kit p a:hover {
	color: #151515;
}



.media-card-section h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-green-heading);
	padding: 0px;
	margin-bottom: 5px;
	line-height: 45px;
	text-align: left;
	scroll-margin-top: 200px; /* Adjust to match your sticky navbar height */
}


.media-card-section .card-img-top {
	height: 200px;
	object-fit: cover;
}

.media-card-section .view-more-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-link-blue);
	text-decoration: none;
}
.media-card-section .view-more-link:hover {
	color: #151515;
}


.media-card-section .blog-card {
	border: 1px solid #ececec;
	border-radius: 6px;
	box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.15);
	transition:  0.3s ease;
}
.media-card-section .blog-card:hover {
	box-shadow: 0px 1px 30px rgba(0, 0, 0, 0.3);
}

.media-card-section .card-body {
	padding: 20px 35px 25px 35px;
}


.media-card-section iframe {
	border-radius: 6px 6px 0px 0px;
}



.media-card-section .blog-card h5 {
	font-size: 18px;
	font-weight: 700;
	color: #151515;
	line-height: 30px;
	padding-bottom: 10px;
	text-decoration: none;
	text-align: left;
}

.media-card-section .blog-card .card-text {
	font-size: 13px;
	font-weight: 400;
	color: #151515;
	line-height: 25px;
	text-align: justify;
}

.media-card-section .blog-card .read-more-link {
	color: #151515;
	font-weight: 500;
	text-decoration: none;
}
.media-card-section .blog-card .blog-link:hover .read-more-link {
	text-decoration: underline;
}

.media-card-section .blog-card .blog-date {
	font-size: 14px;
	font-weight: 400;
	color: var(--color-blue-cyan);
}

.media-card-section .blog-card .blog-date .emoji {
	margin-right: 8px;
	display: inline-block;
	vertical-align: middle;
	margin-top: -3px;
}



.media-card-section .anchor-target {
	scroll-margin-top: 110px;
}



/* ## End of Blog Card section */
/* ####################### */










/* ####################### */
/* ## Start of Contact us section */
.contact-us { 
	padding: 75px 15px 105px 15px;
	background-color: #ffffff;
}


.contact-us.grey { 
	background-color: #ececec;
}


.contact-us.lightgreen { 
	background-color: #EAF7EC;
}

.contact-us p {
	font-family: var(--main-font);
	color: #151515;
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	text-align: justify;
}
.contact-us p b {
	font-weight: 600;
}


.contact-us h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-green-heading);
	padding: 0px;
	margin-bottom: 5px;
	line-height: 45px;
	text-align: left;
}


.contact-us p .h4 {
	font-family: var(--main-font);
	color: #454545;
	font-size: 16px;
	font-weight: 700;
	line-height: 25px;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 5px;
}

.contact-us .bgwhite {
	background-color: #ffffff;
	padding: 30px;
	border-radius: 5px;
	margin-bottom: 25px;
}


.contact-us .cyanbg {
	background-color: var(--color-bg-light-green);
	padding: 30px;
	border-radius: 5px;
	margin-bottom: 25px;
}


.contact-us .text-danger {
	font-family: var(--main-font);
	font-size: 13px;
	font-weight: 500;
	padding-left: 2px;
}

.contact-us .material-symbols-rounded {
	font-size: 22px;
	line-height: 15px;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	color: #454545;
	padding-right: 8px;
	margin-bottom: 4px;
}

.contact-us label {
	font-family: var(--main-font);
	color: #454545;
	font-size: 14px;
	font-weight: 500;
}


.contact-us .submit-disabled { 
	font-size: 14px; font-weight: 700; 
	color: #e5e5e5 !important;
	background-color: #b5b5b5;
	vertical-align: middle;
	cursor: no-drop !important;

	width: 100%; height: 50px; 
	border: 0; outline: none; cursor: pointer; 
	border-radius: 3px; 

	padding: 8px 6px;
}

.contact-us .submit-disabled i {
	display: none;
}


.contact-us .submit-enabled { 
	font-size: 14px; font-weight: 700; 
	color: #ffffff !important;
	background-color: #4B77BE; 
	vertical-align: middle;

	width: 100%; height: 50px; 
	border: 0; outline: none; cursor: pointer; 
	border-radius: 3px; 

	padding: 8px 6px;
	text-shadow: 0 -1px 0 rgba(0,0,0,.25);
	box-shadow: inset 0px 5px 0px 0px #5A81BF;
}


.contact-us .submit-enabled:hover { 
	background-color: #3E64A2; 
	box-shadow: inset 0px 5px 0px 0px #5576A6; 
}
.contact-us .submit-enabled:focus { 
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #3E64A2; outline: none; 
	top: 1px; position: relative;
}
.contact-us .submit-enabled:active {
	background-color: #3E64A2; outline: none; 
}


.contact-us .submit-enabled i {
	display: inline;
	font-size: 14px;
	padding-left: 4px;
	transition: 0.25s all;

}
.contact-us .submit-enabled:hover i {
	padding-left: 10px;
}



.contact-us .custom-select {
	width: 100%;
	padding: 10px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: white url('data:image/svg+xml;utf8,<svg fill="%23666" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>') no-repeat right 15px center;
	background-size: 24px; /* Increase this value to make the icon larger */
	/*border: 1px solid #ccc;
	border-radius: 4px;*/
}



.contact-email-group {
    display: flex;
    gap: 1rem; /* Space between the inputs */
}

.contact-email-group .form-floating {
    flex: 1; /* Ensures each input takes up equal width */
}




/* text styling after submission which appears in green box */
.contact-us #formMessage {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
}
.contact-us #formMessage b {
	font-weight: 700;
}

.contact-us #formMessage i {
	padding-right: 6px;
}


/* show red color error message in select drop down field */
.is-invalid {
	border: 1px solid #dc3545 !important; /* Red border */
	background-color: #ffffff !important;
}
.is-invalid:focus {
	box-shadow: none !important;
}


/* ## End of Contact us section */
/* ####################### */





/* ####################### */
/* ## Start of Our Offices 2 section */
.our-offices-2 { 
	padding: 75px 15px 85px 15px;
	background-color: #f2f2f2;
}


.our-offices-2 h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 10px;
	line-height: 35px;
	text-align: center;
}
.our-offices-2 h3 span {
	color: var(--color-blue-cyan);
}

.our-offices-2 p {
	font-family: var(--main-font);
	color: #656565;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	line-height: 20px;
	margin-bottom: 35px;
}


.our-offices-2 .card-img-top {
	height: 150px;
	object-fit: cover;
}



.our-offices-2 .blog-card {
	border: 1px solid #ececec;
	border-radius: 6px;
	box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
	transition:  0.3s ease;
}
.our-offices-2 .blog-card:hover {
	box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.3);
}

.our-offices-2 .card-body {
	padding: 20px 25px 25px 25px;
}

.our-offices-2 .card-body h5 {
	font-size: 20px;
	font-weight: 700;
	color: #252525;
	line-height: 30px;
	padding: 0px 4px 10px 4px;
	text-decoration: none;
	text-align: left;
}

.our-offices-2 .card-body p {
	/*margin-bottom: 10px;*/
	margin-bottom: 0px;
	padding: 0px 4px 0px 4px;
}

.our-offices-2 .blog-card .card-text {
	font-size: 14px;
	font-weight: 400;
	color: #757575;
	line-height: 25px;
	text-align: left;
}



.outlined-link {
	display: inline-flex;
	position: relative;  /* For positioning the shine effect */
	overflow: hidden;  /* Ensure the shine effect doesn’t go outside the boundaries */
	align-items: center;
	justify-content: center;

	font-size: 14px;
	font-weight: 400;
	color: #4B77BE;
	text-decoration: none;
	background-color: #ffffff;

	border: 1px solid #4B77BE;
	padding: 10px 20px; /* Padding inside the rectangle */
	border-radius: 3px;
	width: 100%;
}

.outlined-link:hover {
	background-color:#4B77BE;
	color: #ffffff;
	box-shadow: inset 0px 3px 0px 0px #5A81BF;
}


/* Focus state */
.outlined-link:focus {
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #3E64A2; outline: none; 
	top: 1px; position: relative;
	color: #ffffff; 
}

.outlined-link:active {
	color: #ffffff; 
	background-color: #3E64A2;
	outline: none; 
}

/* Sheen effect */
.outlined-link::after {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255, 255, 255, 0.5) 50%, rgba(229, 172, 142, 0));
	transform: rotateZ(125deg) translate(-5em, 7.5em);
	transition: none; /* Prevent transition initially */
}

/* Activate the sheen once the button has been hovered */
.outlined-link:hover::after,
.outlined-link:focus::after {
  animation: sheen 1s forwards; /* Trigger the shine animation */
}

/* Keyframes for the sheen animation */
@keyframes sheen {
	100% {
	  transform: rotateZ(125deg) translate(1em, -15em); /* Shine effect moves across */
	}
}




.our-offices-2 .card-body .outlined-link .material-symbols-rounded {
	font-size: 17px;
	color: #4B77BE;
	transition: 0.3s ease;
}

.our-offices-2 .card-body .outlined-link:hover .material-symbols-rounded,
.our-offices-2 .card-body .outlined-link:active .material-symbols-rounded,
.our-offices-2 .card-body .outlined-link:focus .material-symbols-rounded {
	color: #ffffff;
}



  
.our-offices-2 .card-body .outlined-link .link-text {
	display: inline-block;
	margin-right: 10px; /* Optional: Add spacing between the text and icon */
}




.our-offices-2 .card-body .view-directions { 
	display: flex; 
	align-items: center;
	text-align: center;
}

.our-offices-2 .card-body .view-directions a { 
	font-family: var(--main-font);
	font-size: 14px; font-weight: 500;
	color: #454545;
	text-decoration: none;

	background-color: #ffffff;
	border: 1px solid #4B77BE;
	border-radius: 3px;
	padding: 12px 15px;

	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;

	width: 100%;
	text-align: center;
}

.our-offices .content .view-directions .button:hover { 
	background-color: #3E64A2; 
	border-radius: 3px;
}

.our-offices .content .view-directions .button:focus {
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #3E64A2; outline: none; 
	top: 1px; position: relative;
	color: #ffffff; 
}

.our-offices .content .view-directions .button:active {  
	color: #ffffff; 
	background-color: #3E64A2; outline: none; 
}


.our-offices .content .view-directions .button i {
	font-size: 14px;
	padding-left: 4px;
	transition: 0.15s all;
}
.our-offices .content .view-directions .button:hover i {
	padding-left: 10px;
}


/* ## End of Our Offices 2 section */
/* ####################### */





/* ####################### */
/* ## Start of Grow with Ayekart */
.grow-with-ayekart { 
	padding: 50px 15px 55px 15px;
	background-color: #ffffff;
}

.grow-with-ayekart .border { 
	background-color: var(--color-blue-cyan);
	border-radius: 10px;
	padding: 40px 30px 45px 30px;

	background-image: url(../images/bg_connect-with-us.webp);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 1200px 400px;
}

.grow-with-ayekart h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: #ffffff;
	padding: 0px;
	margin-bottom: 5px;
	line-height: 45px;
	text-align: center;
}

.grow-with-ayekart h3 span {
	color: var(--color-blue-cyan);
}

.grow-with-ayekart p {
	font-family: var(--main-font);
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 25px;
}

.grow-with-ayekart h3 span {
	color: var(--color-blue-cyan);
}


.grow-with-ayekart p span a {
	font-family: var(--main-font);
	color: var(--color-blue-black);
	background-color: #ffffff;
	font-size: 13px;
	font-weight: 400;
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 10px 22px;
	border-radius: 3px;
	border: 2px solid var(--color-blue-black);
	outline: none;
}

.grow-with-ayekart p span a:hover {
	background-color: var(--color-blue-black);
	color: #ffffff;
}
.grow-with-ayekart p span a:focus {
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #252525; outline: none; 
	top: 0px; position: relative;
	color: #ffffff;
}
.grow-with-ayekart p span a:active { 
	background-color: #252525; outline: none; 
	color: #ffffff;
}


/* ## End of Grow with Ayekart */
/* ####################### */




/* ####################### */
/* ## Start of Connect with us */
.connect-with-us { 
	padding: 35px 15px 70px 15px;
	background-color: #ffffff;

	background-image: url(../images/bg_connect-with-us-white.webp);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 1500px 500px;
}

.connect-with-us .content {
	padding: 40px 30px 20px 30px;
}


.connect-with-us .content h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	padding: 0px;
	margin-bottom: 10px;
	line-height: 40px;
	text-align: center;
}
.connect-with-us .content h3 span {
	color: var(--color-blue-cyan);
}

.connect-with-us .content p {
	font-family: var(--main-font);
	color: #454545;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	margin-bottom: 25px;
}

.connect-with-us .content .br { display: none; }


/*
.connect-with-us p span a {
	font-family: var(--main-font);
	color: var(--color-blue-black);
	background-color: #ffffff;
	font-size: 13px;
	font-weight: 400;
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 10px 22px;
	border-radius: 3px;
	border: 2px solid var(--color-blue-black);
	outline: none;
}

.connect-with-us p span a:hover {
	background-color: var(--color-blue-black);
	color: #ffffff;
}
.connect-with-us p span a:focus {
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #252525; outline: none; 
	top: 0px; position: relative;
	color: #ffffff;
}
.connect-with-us p span a:active { 
	background-color: #252525; outline: none; 
	color: #ffffff;
}
*/










.connect-with-us .content .read-more {
	display: inline-flex;
	position: relative;  /* For positioning the shine effect */
	overflow: hidden;  /* Ensure the shine effect doesn’t go outside the boundaries */
	align-items: center;
	justify-content: center;

	font-family: var(--main-font);
	color: var(--color-white);
	background-color: var(--color-blue-black);
	font-size: 13px;
	font-weight: 400;
	margin-top: 5px;
	padding: 10px 22px;
	border-radius: 3px;
}
.connect-with-us .content .read-more:hover {
	background-color: var(--color-blue-royal);
}
.connect-with-us .content .read-more:focus {
	-webkit-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 2px rgba(0, 0, 0, 0.05);
	background-color: #252525; outline: none; 
	top: 0px; position: relative;
}
.connect-with-us .content .read-more:active { 
	background-color: #252525; outline: none; 
}


/* Sheen effect */
.connect-with-us .content .read-more::after {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255, 255, 255, 0.5) 50%, rgba(229, 172, 142, 0));
	transform: rotateZ(125deg) translate(-5em, 10em);
	transition: none; /* Prevent transition initially */
}

/* Activate the sheen once the button has been hovered */
.connect-with-us .content .read-more:hover::after,
.connect-with-us .content .read-more:focus::after {
  animation: sheen 1s forwards; /* Trigger the shine animation */
}

/* Keyframes for the sheen animation */
@keyframes sheen {
	100% {
	  transform: rotateZ(125deg) translate(1em, -15em); /* Shine effect moves across */
	}
}

/* ## End of Connect with us */
/* ####################### */











/* ####################### */
/* ## Start of Investor Relations grid */
.investor-relations { 
	padding: 75px 15px 45px 15px; 
	background-color: #ffffff;
}


.investor-relations.cyan {
	background-color: #dff2ff;
}

.investor-relations.grey {
	background-color: #f5f7f9;
}



.investor-relations .content {
	border: 0px solid #f0f0f0;
	padding: 5px 5px;
	margin-bottom: 30px;
	text-align: left;
	width: 100%;
}




.investor-relations .content h3 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-black);
	line-height: 40px;
	margin-top: 0px;
	margin-bottom: 15px;
	text-align: left;

	display: flex;
	align-items: center; /* Vertically centers content */
	gap: 15px; /* Optional: spacing between text and image */
}


.investor-relations .content h3 span {
	display: flex; /* Ensures the image is also centered inside the span */
	align-items: center;
}

.investor-relations .content h3 img {
	border-radius: 0px;
	vertical-align: middle; /* Helps with alignment in non-Flexbox fallback */
	margin-top: 0px;
}



.investor-relations .content p {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #656565;
	line-height: 25px;
	margin-top: 5px;
	margin-bottom: 15px;
	text-align: justify;
}


/* Reset all list styles and ensure no margin/padding */
.investor-relations .content ul {
	list-style-type: circle;
	margin: 0;
	padding-left: 18px;      /* Control the indentation of bullets (adjust as needed) */
	box-sizing: border-box;  /* Ensures padding doesn't affect width */
	color: #656565;
}
  
.investor-relations .content li {
	margin: 0;
	padding: 0;
}

.investor-relations .content li a {
	margin: 0;
	padding: 0;

	font-family: var(--main-font);
	font-size: 16px;
	font-weight: 400;
	color: var(--color-link-blue);
	line-height: 35px;
	text-align: justify;
	text-decoration: none;
	transition: 0.5s ease;
}

.investor-relations .content li a:hover {
	text-decoration: underline;
}
  
  



.investor-relations .content img { 
    width: 100%; height: auto;
    margin-top: 0px;
    float: none; /* Remove the float */
    display: block; /* Turn the image into a block-level element */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    text-align: center; /* Centers text within the container, but not the image */
	border-radius: 10px;
}



.accordion {
	--bs-accordion-bg: transparent;
	--bs-accordion-border-color: #d5d5d5;
	--bs-accordion-border-width: 1px;
	--bs-accordion-border-radius: 5px;
	--bs-accordion-inner-border-radius: 5px;
}

.accordion .accordion-button {
	color: #757575;
	font-size: 16px;
	font-weight: 700;
	outline: none;
}

.accordion .accordion-item h2 {
	margin-bottom: 0px;
}

.accordion-button:focus,
.accordion-button:active,
.accordion-button:focus-visible {
    outline: none;
    box-shadow: none;
}

.accordion .accordion-button.collapsed {
    padding-top: 20px;
	padding-bottom: 18px;
}


.accordion .accordion-button:not(.collapsed) {
    box-shadow: none;
	color: #252525;
	padding-top: 20px;
	padding-bottom: 18px;
	background-color: #f2f2f2;
}

.accordion .accordion-body {
	font-family: var(--main-font);
	font-size: 15px;
	font-weight: 600;
	color: #656565;
	line-height: 30px;
	text-align: justify;
	padding: 25px;
	padding-top: 0px;
    padding-bottom: 40px;
	background-color: #f2f2f2;
}

.accordion .accordion-body a {
	font-size: 16px;
	font-weight: 400;
	color: var(--color-link-blue);
	text-decoration: none;
	transition: 0.5s ease;
}

.accordion-body a:hover {
	text-decoration: underline;
}


/* ## End of Investor Relations grid */
/* ####################### */






/* ####################### */
/* ## Start of Leadership Team section */
.leadership-team { 
	padding: 65px 15px 60px 15px;
	background-color: #ffffff;
}

.leadership-team.light-blue { 
	background-color: var(--color-bg-light-blue);
}

.leadership-team.grey { 
	background-color: #f1f4f7;
	/*background-color: #ececec;*/
}





.leadership-team h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	padding: 0px;
	margin-bottom: 5px;
	line-height: 45px;
	text-align: center;
}


.leadership-team .profile-card {
	perspective: 1000px;
	width: 100%;
}

.leadership-team .profile-inner {
	position: relative;
	width: 100%;
	min-height: 420px;
	transition: transform 0.8s ease;
	transform-style: preserve-3d;
}

.leadership-team .profile-card.flipped .profile-inner {
	transform: rotateY(180deg);
}

.leadership-team .profile-front,
.leadership-team .profile-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 420px;
	backface-visibility: hidden;
	background: transparent;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 30px 35px;
	transition: all 0.25s ease;
}


.leadership-team .profile-front:hover,
.leadership-team .profile-back,
.leadership-team .profile-back:hover {
	box-shadow: 1px 2px 10px rgba(0,0,0,0.2);
}


.leadership-team .profile-back {
	transform: rotateY(180deg);
	text-align: left;
	background-color: #ffffff !important;

	background: linear-gradient(
		to top,
		rgba(173, 216, 230, 0.6) 0%,     /* Bottom tint */
		rgba(173, 216, 230, 0) 70%,      /* Start fading to transparent */
		rgba(173, 216, 230, 0) 100%    /* Top tint */
	);

	box-shadow: 1px 2px 10px rgba(0,0,0,0.2);

		
	/* 2 steps vignette
	background: linear-gradient(
	to top, 
	rgba(173, 216, 230, 0.3), 
	rgba(173, 216, 230, 0)
	);*/

}



.leadership-team .profile-img-link {
	display: block;
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}

.leadership-team .profile-img {
	width: 275px;
	height: 275px;
	object-fit: cover;
	border-radius: 50%;
	transition: transform 0.3s ease;
}

.leadership-team .profile-img-link:hover .profile-img {
	transform: scale(1.1);
}

.leadership-team .profile-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.leadership-team .profile-name {
	font-size: 20px;
	font-weight: 700;
	color: #151515;
	line-height: 28px;
	margin-top: 0px;
	margin-bottom: 10px;
}

.leadership-team .profile-title {
	font-size: 14px;
	font-weight: 400;
	color: #656565;
}

.leadership-team .linkedin-icon {
	font-size: 38px;
	color: #858585;
	transition: color 0.9s;
	line-height: 1.1;

	align-self: flex-start; /* Align to top of container */
    margin-top: 1px; /* Optional: fine-tune vertical position */
}
.leadership-team .linkedin-icon:hover {
	color: #0e76a8;
}
.leadership-team .linkedin-icon:focus {
	color: #252525;
}


.leadership-team .profile-description h3 {
	font-size: 20px;
	font-weight: 700;
	color: #151515;
	margin-top: 10px;
	margin-bottom: 20px;
}


.leadership-team .profile-description p {
	max-height: 320px;
    overflow-y: auto; /* Enables scrolling if content exceeds this height */
    padding-right: 20px; /* Optional: Adds space to the right for scrollbar */
}


/* Scrollbar styling for Webkit-based browsers (Chrome, Safari, Edge) */
.leadership-team .profile-description p::-webkit-scrollbar {
    width: 7px; /* Defines the width of the scrollbar */
}

.leadership-team .profile-description p::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.45); /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
}

.leadership-team .profile-description p::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1); /* Background color for the track */
}

/* Optional: Add a style for the scrollbar for better visibility on mobile */
@media (max-width: 768px) {
    .leadership-team .profile-description p {
        overflow-y: scroll !important; /* Force scroll on smaller screens */
    }
    .leadership-team .profile-description p::-webkit-scrollbar {
        width: 8px; /* Increase width for better visibility on mobile */
    }
    .leadership-team .profile-description p::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.5); /* More visible thumb color on mobile */
    }
    .leadership-team .profile-description p::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.2); /* Track color for mobile */
    }
}


.leadership-team .profile-description p {
	font-size: 13px;
	font-weight: 400;
	color: #656565;
	text-align: justify;
	line-height: 22px;
}



.leadership-team .profile-description ul {
	list-style-type: square;
	margin: 0;
	padding-left: 17px;      /* Control the indentation of bullets (adjust as needed) */
	box-sizing: border-box;  /* Ensures padding doesn't affect width */
}

.leadership-team .profile-description li {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
	list-style-type: square;
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #656565;
	line-height: 25px;
	text-align: justify;
	transition: 0.5s ease;
}


.leadership-team .close-button {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 10;
}

.leadership-team .close-button .material-symbols-rounded {
	font-size: 40px;
	color: #d5d5d5;
	transition: color 0.5s ease;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.leadership-team .close-button .material-symbols-rounded:hover {
	color: #858585;
}



/* Next Gen Leaders */

.nextgen-leaders { 
	padding: 65px 15px 60px 15px;
	background-color: #ffffff;
}

.nextgen-leaders h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	padding: 0px;
	margin-bottom: 5px;
	line-height: 45px;
	text-align: center;
}

.nextgen-leaders .profile-card {
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	transition: box-shadow 0.3s ease;
	height: 100%;
}

.nextgen-leaders .profile-card:hover {
	box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
}

.nextgen-leaders .profile-img {
	width: 175px;
	height: 175px;
	object-fit: cover;
	border-radius: 50%;
	margin-bottom: 20px;
}

.nextgen-leaders .profile-footer {
	justify-content: space-between;
	text-align: center;
}

.nextgen-leaders .profile-name {
	font-size: 18px;
	font-weight: 700;
	color: #151515;
	margin-bottom: 5px;
	text-align: center;
}

.nextgen-leaders .profile-title {
	font-size: 14px;
	font-weight: 400;
	color: #656565;
	text-align: center;
}

/* Next Gen Leaders */



/* ## End of Leadership Team section */
/* ####################### */











/* ####################### */
/* ## Start of Life at Ayekart */
.life-at-ayekart { 
	padding: 75px 15px 75px 15px; 
	background-color: #ffffff;
}

.life-at-ayekart .content {
	border: 0px solid #f0f0f0;
	padding: 0px 0px;
	margin-bottom: 30px;
	width: 100%;
}



.life-at-ayekart .content h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	line-height: 40px;
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: center;
	word-spacing: 1px;
}
.life-at-ayekart .content h2 span {
	color: var(--color-blue-cyan);
}


.life-at-ayekart .content p {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #454545;
	line-height: 25px;
	margin-top: 5px;
	margin-bottom: 15px;
	text-align: center;
}


.life-at-ayekart .card {
    border-radius: 6px;
	border: none;
}


.life-at-ayekart .card-img-1 {
    height: 200px;
	width: auto;
    object-fit: cover;
	border-radius: 6px;
}

.life-at-ayekart .card-img-2 {
    height: 350px;
	width: auto;
    object-fit: cover;
	border-radius: 5px;
}


/* ## End of Life at Ayekart */
/* ####################### */







/* ####################### */
/* ## Start of Image Gallery Section */
.image-gallery {
	padding: 25px 15px 25px 15px;
}

.image-gallery .content {
	padding: 5px;
	padding-bottom: 15px;
	text-align: center;
}

.image-gallery .content h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	line-height: 35px;
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: center;
	word-spacing: 1px;
}
.image-gallery .content h2 span {
	color: var(--color-blue-cyan);
}

.image-gallery .content p {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 500;
	color: #454545;
	line-height: 25px;
	margin-bottom: 5px;
	text-align: center;
}

.image-gallery .gallery-item {
	overflow: hidden;
	margin-bottom: 20px;
	height: 170px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-radius: 5px;
}

.image-gallery .gallery-item img {
	max-height: 100%;
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: filter 0.3s ease, transform 0.3s ease;
}

.image-gallery .gallery-item:hover img {
	filter: blur(3px);
	transform: scale(1.05);
}

.image-gallery .icon-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.5);
	border: none;
	border-radius: 20%;
	padding: 10px;
	cursor: pointer;
	z-index: 2;
	display: none;
	line-height: 1;
}

.image-gallery .material-symbols-rounded {
	font-size: 30px;
	color: #151515;
}

.image-gallery .gallery-item:hover .icon-button {
	display: block;
}

/* Modal Styles */
.image-gallery .modal-custom {
	display: none;
	position: fixed;
	z-index: 1050;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.95);
	overflow: hidden;
}

.image-gallery .modal-custom .modal-img {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 5px;
}

.image-gallery .modal-custom .modal-controls {
	position: absolute;
	top: 20px;
	right: 60px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 20px;
}

.image-gallery .modal-custom .icon-close {
	color: white;
	font-size: 35px;
	cursor: pointer;
}

.image-gallery .modal-custom .modal-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 50px;
	color: white;
	cursor: pointer;
	user-select: none;
	z-index: 2;
	text-shadow: 0px 1px 6px #151515;
}

.image-gallery .modal-custom .modal-nav.icon-prev {
	left: 20px;
}

.image-gallery .modal-custom .modal-nav.icon-next {
	right: 20px;
}

.image-gallery .modal-custom .counter {
	position: absolute;
	bottom: 20px;
	right: 75px;
	color: white;
	font-size: 14px;
	font-weight: normal;
	z-index: 2;
}


@media (max-width: 767px) {
	.image-gallery .modal-custom .modal-nav {
		position: absolute;
		top: auto;
		bottom: 19%;
		transform: none;
	}
	.image-gallery .modal-custom .modal-nav.icon-prev { left: 75px; }
	.image-gallery .modal-custom .modal-nav.icon-next { right: 75px; }
	.image-gallery .modal-custom .modal-img {
		max-height: 60vh;
	}
	.image-gallery .modal-custom .modal-controls {
		top: 50px;
		right: 40px;
	}
	.image-gallery .modal-custom .counter {
		position: absolute;
		bottom: 35px;
		right: auto; /* Unset the right alignment */
		left: 50%;
		transform: translateX(-50%);
		color: white;
		font-size: 14px;
		font-weight: normal;
		z-index: 2;
		text-align: center;
		margin: 0 auto;
	}
}




/* ## End of Image Gallery Section */
/* ####################### */














/* ####################### */
/* ## Start of Career Table */

.career-table { 
	padding: 75px 15px 75px 15px; 
	background-color: #ffffff;
}

.career-table .content {
	border: 0px solid #f0f0f0;
	padding: 0px 0px;
	margin-bottom: 30px;
	width: 100%;
}



.career-table .content h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	line-height: 40px;
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: left;
	word-spacing: 1px;
	text-align: center;
}
.career-table .content h2 span {
	color: var(--color-blue-cyan);
}


.career-table .content p {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #454545;
	line-height: 25px;
	margin-top: 5px;
	margin-bottom: 15px;
	text-align: center;
}


.table-outline {
	border: 1px solid #cccccc;
	border-radius: 4px;
	padding: 10px;
	margin: 0px auto;
}

.career-table table {
	/*border: 1px solid #ccc;*/
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
}


.career-table table tr {
	/*background-color: #f8f8f8;
	border: 1px solid #ddd;*/
	padding: 10px;

	font-size: 14px;
	font-weight: 400;
	color: #454545;
	border-bottom: 1px solid #ddd;
}

.career-table table tr:last-child {
	border-bottom: 1px solid transparent;
}

.career-table table td {
	padding: 14px 15px;
	text-align: left;

	/*border: 1px solid #ddd;*/
}


.career-table table th {
	padding: 14px 15px;
	text-align: left;

	font-size: 16px;
	font-weight: 700;
	color: #454545;
	text-transform: uppercase;

	border-bottom: 1px solid #ddd;
}




.career-table table tr .open { color: green; font-weight: 500; }
.career-table table tr .open:hover { color: #454545; }

.career-table table tr .closed { color: #c36; font-weight: 500; }
.career-table table tr .closed:hover { color: #454545; }




.career-table table th.title { width: 35%; }
.career-table table th.dept { width: 17%; }
.career-table table th.location { width: 20%; }
.career-table table th.experience { width: 17%; }
.career-table table th.status { width: 10%; }


@media screen and (max-width: 768px) {

	.career-table table {
		border: 0;
	}

	.table-outline {
		border: 1px solid transparent;
	}

	.career-table table thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.career-table table th, .career-table table td { border: none; }
	
	.career-table table tr {
		border: 1px solid #ddd;
		border-bottom: 3px solid #ddd;
		border-radius: 4px;
		display: block;
		margin-bottom: 15px;
		padding: 15px;
	}

	.career-table table tr:last-child {
		border-bottom: 1px solid #ddd;
	}
	
	.career-table table td {
		border-bottom: 1px solid #ddd;
		display: block;
		font-size: 14px;
		text-align: right;
		padding: 12px 5px;
	}
	
	.career-table table td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
	}
	
	.career-table table td:last-child {
		border-bottom: 0;
	}

}


.career-table .anchor-target {
	scroll-margin-top: 110px;
}


/* ## End of Career Table */
/* ####################### */




/* ####################### */
/* ## Start of Breadcrumbs */
.breadcrumbs { 
	padding: 26px 15px; /*adjust the height of breadcrumbs patch */
	background-color: var(--color-blue-black);
	z-index: 40;
}

.breadcrumbs.hero {
	padding: 60px 15px;
}

.breadcrumbs ul.breadcrumb {
	float: left; 
	margin: 0px;
	padding: 0px 0px;
	line-height: 25px;
}

.breadcrumbs ul.breadcrumb li {
	display: inline-block;
	position: relative;

	font-family: var(--main-font);
	font-size: 14px; 
	font-weight: 600;
	color: var(--color-white); 
	line-height: 25px;
}


.breadcrumbs ul.breadcrumb li a {
	color: var(--color-white);
	font-weight: 400;
	text-decoration: none;
}
.breadcrumbs ul.breadcrumb li a:hover {
	text-decoration: underline;
}


.breadcrumbs ul.breadcrumb li::after {
	content: "\f105"; /* right arrow */
	font-family: 'FontAwesome';
	font-size: 13px;
	font-weight: 500;
	color: var(--color-blue-cyan);

	margin-left: 10px; /* spacing before the arrow */
	margin-right: 10px; /* spacing after the arrow */
}
.breadcrumbs ul.breadcrumb li:last-child::after {
	content: none; /* no arrow after last item */
}

.breadcrumbs h1 {
    font-family: var(--main-font);
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: -1px 1px 2px #2d2d2f;
    line-height: 45px;
	margin-top: 10px;
    margin-bottom: 10px;
}

.breadcrumbs p {
    font-family: var(--main-font);
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    text-shadow: -1px 1px 2px #2d2d2f;
    line-height: 30px;
    margin: 0px;
}


/* ## End of Breadcrumbs */
/* ####################### */





/* ####################### */
/* ## Start of Breadcrumbs Section - old */

/* Breadcrumb Section 
.breadcrumb-section {
	padding: 35px 15px 34px 15px; 
	background-color: var(--color-blue-black);	
}

.breadcrumb-nav {
	font-family: var(--main-font);
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
}

.breadcrumb-nav .breadcrumb-item {
	font-family: var(--main-font);
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
}

.breadcrumb-nav .breadcrumb-item a {
	color: #ffffff;
	font-weight: 600;
}

.breadcrumb-nav .breadcrumb-item::before {
	color: var(--color-blue-cyan);
	font-weight: 300;
}

.breadcrumb-nav .breadcrumb-item.active {
	color: #ffffff;
	font-weight: 400;
}
*/

/* ## End of Breadcrumbs Section - old */
/* ####################### */







/* ####################### */
/* ## Start of Career Post page */

/* Career Post */
.career-section {
	padding: 1px 15px 100px 15px;
	background-color: #f2f2f2;
}

.career-section .content {
	background-color: #ffffff;
	padding: 35px 40px 35px 40px;
	border-radius: 10px;
	border: 1px solid #ececec;
	/*box-shadow: 0px 0px 10px rgba(0,0,0,0.1);*/
}


.career-section .career-status {
	background-color: var(--bs-success-bg-subtle);
	color: var(--bs-success-text-emphasis);

	border-radius: 4px;
	padding: 8px 15px 8px 14px;
	margin-bottom: 10px;

	width: fit-content; /* Set the width of div as per content */
	margin-left: auto; /* Align to right */

	font-size: 12px;
	line-height: 20px;
	font-weight: 500;
}

.career-section .career-status .material-symbols-rounded {
    font-size: 18px;
    line-height: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    padding-left: 5px;
    margin-bottom: 0px;
}


.career-section .career-status.open {
	background-color: var(--bs-success-bg-subtle);
	color: var(--bs-success-text-emphasis);
}

.career-section .career-status.closed {
	background-color: var(--bs-danger-bg-subtle);
	color: var(--bs-danger-text-emphasis);
}


.career-section .career-heading {
	margin-bottom: 45px;
}

.career-section .career-heading h1 {
	font-family: var(--main-font);
	font-size: 30px;
	color: var(--color-blue-dark);
	font-weight: 700;
	line-height: 40px;
	margin-bottom: 10px;
}

.career-section .career-heading h4 {
	font-family: var(--main-font);
	font-size: 16px;
	color: var(--color-blue-dark);
	font-weight: 700;
	margin-bottom: 10px;
}





.career-section .career-post {
	margin-bottom: 45px;
}

.career-section .career-post.send-resume {
	margin-bottom: 5px !important;
}

.career-section .career-post h2 {
	font-family: var(--main-font);
	font-size: 30px;
	color: var(--color-blue-dark);
	font-weight: 700;
	line-height: 40px;
	margin-bottom: 15px;
}

.career-section .career-post h4 {
	font-family: var(--main-font);
	font-size: 16px;
	color: var(--color-blue-dark);
	font-weight: 600;
	margin-bottom: 10px;
}

.career-section .career-post h5 {
	font-family: var(--main-font);
	font-size: 18px;
	color: #353535;
	font-weight: 700;
	margin-bottom: 10px;
	line-height: 30px;
}

.career-section .career-post p {
	font-family: var(--main-font);
	font-size: 14px;
	color: #454545;
	font-weight: 400;
	text-align: justify;
	line-height: 25px;
}
.career-section .career-post p b {
	font-weight: 600;
}

		
/* Reset all list styles and ensure no margin/padding */
		
.career-section .career-post ol {
	list-style-type: decimal;
	margin: 0;
	padding-left: 20px;      /* Control the indentation of bullets (adjust as needed) */
	box-sizing: border-box;  /* Ensures padding doesn't affect width */
	line-height: 25px;
	text-align: justify;

	font-family: var(--main-font);
	font-weight: 400;
	color: #454545;
}

.career-section .career-post ol li {
	margin: 0;
	padding: 1px 5px;
}

.career-section .career-post ul {
	list-style-type: square;
	margin: 0;
	padding-left: 20px;      /* Control the indentation of bullets (adjust as needed) */
	box-sizing: border-box;  /* Ensures padding doesn't affect width */
	line-height: 25px;
	text-align: justify;

	font-family: var(--main-font);
	font-weight: 400;
	font-size: 14px;
	color: #454545;
}

.career-section .career-post ul li {
	margin: 0;
	padding: 1px 0px;
}

.career-section .career-post li b {
	font-weight: 600;
}


.career-section .we-are-hiring {
	border-radius: 10px;
	margin-bottom: 25px;
	background-color: #ffffff;
	border: 1px solid #ececec;
	overflow: hidden;
}

.career-section .we-are-hiring img {
	width: 100%;
	height: auto;
}




/* Sticky Sidebar */
.career-section .sidebar {
	background-color: var(--color-bg-light-blue);
	padding: 35px 30px;
	border-radius: 10px;
	/*box-shadow: 0px 0px 10px rgba(0,0,0,0.1);*/
}

.career-section .sticky-sidebar {
	position: sticky;
	top: 120px;
}

.career-section .sticky-sidebar h4 {
	font-size: 18px;
	color: #353535;
	font-weight: 700;
	margin-bottom: 15px;
}

.career-section .sticky-sidebar .material-symbols-rounded {
	font-size: 28px;
	font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.career-section .sticky-sidebar ul {
	list-style-type: square;
	margin: 0;
	padding-left: 20px;      /* Control the indentation of bullets (adjust as needed) */
	box-sizing: border-box;  /* Ensures padding doesn't affect width */
	color: #757575;
	line-height: 25px;
	text-align: left;

	margin-bottom: 30px;
}

.career-section .sticky-sidebar li {
	padding: 6px 0px;
}

.career-section .sticky-sidebar li a {
	font-size: 14px;
	font-weight: 400;
	color: #454545;
	text-decoration: none;
	line-height: 25px;
}
.career-section .sticky-sidebar li a:hover {
	text-decoration: underline;
}


/* ## End of Career Post page */
/* ####################### */








/* ####################### */
/* ## Start of Articles section */

/* Articles */
.articles-section {
	padding: 1px 15px 100px 15px;
	background-color: #f2f2f2;
}

.articles-section .content {
	background-color: #ffffff;
	padding: 35px 40px 35px 40px;
	border-radius: 10px;
	border: 1px solid #ececec;
}


.articles-section .card {
    border-radius: 6px;
	border: none;
	background-color: transparent;
	margin-bottom: 40px;
}

.articles-section .card-img {
    height: 350px;
	width: auto;
    object-fit: cover;
	border-radius: 6px;
}


.articles-section .article-heading {
	margin-bottom: 25px;
}

.articles-section .article-heading h1 {
	font-family: var(--main-font);
	font-size: 30px;
	color: var(--color-blue-dark);
	font-weight: 700;
	line-height: 40px;
	margin-bottom: 10px;
}

.articles-section .article-heading p {
	font-family: var(--main-font);
	font-size: 14px;
	color: #454545;
	font-weight: 400;
	text-align: left;
	line-height: 25px;
}

.articles-section .article-post {
	margin-bottom: 45px;
}


.articles-section .article-post h5 {
	font-family: var(--main-font);
	font-size: 18px;
	color: #353535;
	font-weight: 700;
	margin-bottom: 10px;
	line-height: 30px;
}


.articles-section .article-post p {
	font-family: var(--main-font);
	font-size: 14px;
	color: #454545;
	font-weight: 400;
	text-align: justify;
	line-height: 25px;
}
.articles-section .article-post p b {
	font-weight: 600;
}




/* List Styling */
.articles-section .article-post ul {
	list-style-type: square;
	margin: 0;
	padding-left: 20px;      /* Control the indentation of bullets (adjust as needed) */
	box-sizing: border-box;  /* Ensures padding doesn't affect width */
	line-height: 25px;
	text-align: justify;

	font-family: var(--main-font);
	font-weight: 400;
	font-size: 14px;
	color: #454545;
}

.articles-section .article-post ul li {
	margin: 0;
	padding: 1px 0px;
}

.articles-section .article-post li b {
	font-weight: 600;
}


.articles-section .article-post ul li a {
	color: var(--color-link-blue);
	text-decoration: none;
}
.articles-section .article-post ul li a:hover {
	text-decoration: underline;
}


/* List Styling */






/* Sticky Sidebar */
.articles-section .sidebar {
	background-color: none;
	padding: 10px 5px 10px 10px;
	border-radius: 10px;
}

.articles-section .sticky-sidebar {
	position: sticky;
	top: 120px;
}

.articles-section .sticky-sidebar h4 {
	font-size: 18px;
	color: #353535;
	font-weight: 700;
	margin-bottom: 15px;
}

.articles-section .sticky-sidebar .material-symbols-rounded {
	font-size: 28px;
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}


/* List Styling */
.articles-section .sticky-sidebar ul {
	list-style-type: square;
	margin: 0;
	padding-left: 20px;      /* Control the indentation of bullets (adjust as needed) */
	box-sizing: border-box;  /* Ensures padding doesn't affect width */
	color: #656565;
	line-height: 25px;
	text-align: left;

	margin-bottom: 30px;
}

.articles-section .sticky-sidebar li {
	padding: 6px 0px;
}

.articles-section .sticky-sidebar li a {
	font-size: 14px;
	font-weight: 400;
	color: #454545;
	text-decoration: none;
	line-height: 25px;
}
.articles-section .sticky-sidebar li a:hover {
	text-decoration: underline;
}


.articles-section .sticky-sidebar .view-more-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-link-blue);
	text-decoration: none;
}
.articles-section .sticky-sidebar .view-more-link:hover {
	color: #151515;
}
/* Sticky Sidebar */



/* ## End of Articles section */
/* ####################### */






/* ####################### */
/* ## Start of 404 Error section */
.error-404 { 
	padding: 95px 15px 60px 15px;
	background-color: #ffffff;
}

.error-404 .content { 
	border: 0px solid #f0f0f0;
	padding: 0px 0px;
	margin-bottom: 30px;
	text-align: left;
	width: 100%;
}


.error-404 .content h2 {
	font-family: var(--main-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--color-blue-dark);
	padding: 0px;
	line-height: 45px;
	text-align: center;

	margin-top: 25px;
	margin-bottom: 20px;
	/*border-bottom: 1px solid #e5e5e5;*/
}
.error-404 .content h2 span {
	color: var(--color-blue-cyan);
}

.error-404 .content p {
	font-family: var(--main-font);
	color: #454545;
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	margin-bottom: 15px;
	text-align: center;
}

.error-404 .content p a {
	color: var(--color-link-blue);
	text-decoration: none;
}
.error-404 .content p a:hover {
	text-decoration: underline;
}
.error-404 .content p a:focus {
	color: #454545;
	text-decoration: underline;
}


.error-404 .content .error-image {
	height: 150px;
    object-fit: cover;
	width: 100%;
}

@media screen and (max-width: 768px), only screen and (max-device-width: 768px) {
	.error-404 .content .error-image {
		height: 100px;
		object-fit: cover;
	}
}

@media screen and (max-width: 576px), only screen and (max-device-width: 576px) {
	.error-404 .content .error-image {
		height: 90px;
		object-fit: cover;
	}
}

@media screen and (max-width: 400px), only screen and (max-device-width: 400px) {
	.error-404 .content .error-image {
		height: 70px;
		object-fit: cover;
	}
}




/* ## End of 404 Error section */
/* ####################### */










/* ####################### */
/* ## Start of Footer Area */
.footer {
	padding: 0px 0px; 
	margin: 0 auto; 
}

.footer .footer-main {
	padding: 25px 15px 10px 15px;
	/*padding: 75px 15px 30px 15px;
	background-color: #101010;*/
	background: linear-gradient(to right, #033115, #0C6A31);
    position: relative;
    z-index: 1;
    overflow: hidden;
}




.footer .footer-main .mascot {
	display: flex;
    justify-content: flex-end; /* Align content to the right */
    align-items: flex-end; /* Align the mascot image to the bottom */
    padding-top: 0px; /* Adjust if necessary for spacing */
	margin-bottom: -35px;

}

.footer .footer-main .mascot img {
    max-height: 320px; /* Ensure the image doesn't stretch too large */
    width: auto;
}



.footer .footer-main h4 { 
	font-family: var(--main-font);
	font-size: 18px; 
	font-weight: 600;
	color: #A7E1BD;
	letter-spacing: 0px; 
	margin: 0px; 
	margin-bottom: 10px; 
	padding: 0px 0px 4px 0px;
	text-align: left;
	display: flex; align-items: center;
}

.footer .footer-main p {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #e5e5e5;
	padding: 8px 0px 5px 0px;
	line-height: 25px;
	letter-spacing: 0px;
	text-align: justify;
}
.footer .footer-main p b {
	font-weight: 600;
}

.footer .footer-main .address .br { display: block; }




.footer .footer-main ul { 
	list-style: none; 
	margin: 0; 
	padding: 2px 0px 30px 0px;
}

.footer .footer-main ul li {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #e2e2e2;
	padding: 4px 0px;
	line-height: 28px;
	letter-spacing: 0px;
	text-align: left;
}
.footer .footer-main ul li a { color: #e2e2e2; }
.footer .footer-main ul li a:hover { color: #ffffff; }


.footer .footer-main .social_icons {
	padding: 15px 0px 10px 0px;
	text-align: left;
	float: left;
}

.footer .footer-main .social_icons ul {
	display: inline-block;
}

.footer .footer-main .social_icons ul li {
	font-size: 18px;
	padding: 0px 12px 0px 0px;
	float: left;
}

.footer .footer-main .social_icons ul li a {
	padding: 0px;
	width: 36px;
	height: 36px;
	line-height: 36px;
	color: #e2e2e2;
	text-align: center;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
}
.footer-main .social_icons ul li a:hover {
	color: #ffffff;
	background-color: var(--color-green-dark);
	text-decoration: none;
	border: 1px solid var(--color-green-dark);
}
.footer-main .social_icons ul li a:active {
	background-color: var(--color-blue-royal);
	border: 1px solid var(--color-blue-royal);
}



.footer-main .social_icons .nav {
    display: block;
	list-style: none;
}

.footer-main .social_icons .nav li a {
    position: relative;
    display: block;
    padding: 10px 15px;
}


.footer .footer-terms {
	padding: 25px 15px 40px 15px;
	background-color: #ffffff;
}


.footer .footer-terms .copyright { float: left; text-align: left; }
.footer .footer-terms .copyright p {
	font-family: var(--main-font);
	font-size: 14px;
	font-weight: 400;
	color: #151515;
	line-height: 40px;
	text-align: left;
	letter-spacing: 0px;
}

.footer .footer-terms .copyright .br { display: none; }
.footer .footer-terms .terms .br { display: none; }

.footer .footer-terms .terms p { float: right; text-align: right; padding-bottom: 10px; }/*padding for for bottom space in footer*/
.footer .footer-terms .terms p a {
	font-family: var(--main-font);
	color: #151515;
	font-size: 14px;
	font-weight: 400;
	line-height: 40px;
	padding-left: 20px;
	text-decoration: none;
	letter-spacing: 0px;
}
.footer .footer-terms .terms a:hover { color: #000000; text-decoration: underline; }
.footer .footer-terms .terms a:active { color: #151515; }


/* ## End of Footer Area */
/* ####################### */






/* ####################### */
/* ## Start of Back-To-Top */
#back-to-top { 
	text-align: center; height: 45px; width: 45px; 
	position:fixed; bottom:25px; right:25px;
	display:none; z-index: 500; padding: 5px; 
	border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; 
	background-color: rgba(0,0,0,0.5); 
	transition: background-color 0.2s linear; 
	-moz-transition: background-color 0.2s linear; 
	-webkit-transition: background-color 0.2s linear; 
	-o-transition: background-color 0.2s linear; 
}
#back-to-top:hover { background-color: var(--color-green-dark); }

#back-to-top i { color:#ffffff; font-size: 18px; padding-top: 8px; line-height: 20px; }
/* ## End of Back-To-Top */
/* ####################### */











/* ################### */
/* ## Start of BreakPoint 1 - 992px */
@media screen and (max-width: 992px), only screen and (max-device-width: 992px) {

	.navbar-brand, #navbarLogo {
		height: 60px; /* height of logo */
		width: auto;
		border: none; outline: none;
		margin-right: auto;
		margin-left: 10px;
	}

	.offcanvas-header .navbar-brand {
		margin-left: 0px;
	}

	.offcanvas-body { padding: 16px 30px; }


	/* Offcanvas dark background */
	.offcanvas.text-bg-dark { background-color: #212529; }

	.offcanvas-header h5,
	.offcanvas-body .text-white a.nav-link,
	.offcanvas-body a.nav-link {
		color: #a5a5a5 !important;
		padding: 14px 15px; /* give padding to nav-links */
	}

	.offcanvas-body a.nav-link.active {
		color: #ffffff !important;
		border-bottom: 1px solid transparent !important;
		padding: 14px 1px 13px 1px !important;
	}


	/* positon of text in mobile device */
	.offcanvas-body a.nav-link { 
		margin-left: 15px; 
	}

	
	.offcanvas-body .dropdown-menu {
		background-color: #2e3338 !important;
		border: 1px solid transparent !important;
	}

	.offcanvas-body .dropdown-item {
		color: #a5a5a5;
		font-size: 14px;
	}

	.dropdown-item:focus, .dropdown-item:hover {
		background-color: transparent !important;
	}

	.offcanvas-body .dropdown-item.actives,
	.offcanvas-body .dropdown-item.actives .material-symbols-rounded {
		color: #ffffff !important;
	}





	.offcanvas-body .nav-link.getintouch.actives,
	.navbar-nav .nav-link.getintouch {
		margin-left: 12px;
		margin-top: 12px;
	}

	.offcanvas-body .nav-link.getintouch.actives {
		color: #ffffff !important;
	}





	
	/* Close button */
	.btn-close-new {
		background: none;
		border: none;
		color: #ffffff;
		font-size: 28px;
		cursor: pointer;
		padding: 0;
		line-height: 1;
		margin-right: 20px;
	}

	/* Close button */
	.btn-close-new .material-symbols-rounded {
		color: #c5c5c5;
		font-size: 35px;
	}


	.offcanvas-body .offcanvas-footer { 
		display: inline-block; 
		font-size: 11px; 
		color: #656565; 
		margin: 0px;
		padding-top: 15px;
		padding-bottom: 35px;
		width: 100%;
	}

	.offcanvas-body .offcanvas-footer hr {
		border-top: 1px solid #525C67; 
		padding-bottom: 10px;
	}

	.offcanvas-body .offcanvas-social-icons {
		margin-top: 10px;
		padding-left: 18px;
		padding-bottom: 25px;
	}

	.offcanvas-body .offcanvas-social-icons a {
		color: #656565; 
		font-size: 20px; 
		line-height: 25px;
		letter-spacing: 30px; 
	}

	.offcanvas-body .offcanvas-social-icons a .zoom-1  { font-size: 17px; }

	.offcanvas-body .offcanvas-copyright {
		font-size: 15px; 
		font-weight: 500;
		color: #656565; 
		padding-left: 15px;
		line-height: 30px;
	}


	.navbar-brand img {
		margin-top: -10px;
	}



	.hero-image-logo {
		margin-top: 25px;
	}


	/* Carousel */
	.carousel-item .carousel-caption h5 { font-size: 40px; }
	.carousel-item .carousel-caption p {  font-size: 15px; }
	.carousel-item .carousel-caption span a { font-size: 14px; }



	/* Footer */
	.footer .footer-main { padding: 45px 15px 10px 15px; }


	.footer .footer-main ul { padding: 4px 0px 45px 0px; }

	.footer .footer-terms .copyright { padding-bottom: 20px; }
	.footer .footer-terms .copyright p { line-height: 30px; text-align: center; }

	.footer .footer-terms .copyright .br { display: unset; }
	.footer .footer-terms .terms .br { display: unset; }

	.footer .footer-terms .terms p { padding-bottom: 30px; width: 100%; text-align: center; }
	.footer .footer-terms p a { padding-left: 0px !important; }



}
/* ## End of BreakPoint 1 - 992px */
/* ################### */






/* ################### */
/* ## Start of BreakPoint 2 - 768px */
@media screen and (max-width: 768px), only screen and (max-device-width: 768px) {


	.why-choose .content .material-symbols-rounded.white {
		font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
		transform: rotate(90deg);
		line-height: 40px;
		margin-top: 0px;
	}







	/* Carousel */
	.carousel-item .carousel-caption h5 { font-size: 35px; width: 95%; }
	.carousel-item .carousel-caption p {  font-size: 15px; width: 95%; }
	.carousel-item .carousel-caption span a { font-size: 14px; }

	.carousel-item img {
		width: auto !important; 
		height: 100% !important;
		background-size: cover;
		background-position: center;
	}




	

	
	/* We work with - half cirlce tab */
	.we-work-with .click-block {
		padding: 8px 20px 0px 20px;
	}

	.we-work-with .content .material-symbols-rounded {
		font-size: 35px;
		padding: 7px 6px;
		line-height: 40px;
		width: 50px;
		height: 50px;
		margin-top: 5px;
		margin-bottom: 10px;
	}
	
	.we-work-with .content h3 { font-size: 14px; }

	.we-work-with #click-image {
		float: unset;
		text-align: center;
		max-width: 200px;
	}



	.hero-div.who-we-are {
		height: 490px;
		padding-top: 140px;
	}
	.hero-div.who-we-are .hero-image {
		margin-bottom: -75px;
		margin-right: 0px;
	}

	

	.hero-div.sourcing {
		height: 610px;
		padding-top: 125px;
	}
	.hero-div.sourcing h1 {
		color: var(--color-blue-black);
		text-shadow: -1px 1px 4px #ffffff;
	}
	.hero-div.sourcing .content p { 
		color: var(--color-blue-black); 
		text-shadow: -1px 1px 4px #ffffff;
	}



	.hero-div.processing {
		height: 430px;
		padding-top: 140px;
	}
	.hero-div.processing .content p { 
		line-height: 25px;
	}


	.hero-div.distribution {
		height: 420px;
		padding-top: 140px;
	}







	.hero-div.driving-impact {
		height: 595px;
		padding-top: 130px;
	}
	.hero-div.driving-impact .two-farmer-image {
		margin-bottom: -80px;
		margin-right: 40px;
	}
	.hero-div.driving-impact .sun {
		margin-bottom: 70px;
		margin-right: 0px;
	}




	.hero-div.investor-relation {
		height: 510px;
		padding-top: 125px;
	}
	.hero-div.investor-relation .graph-image {
		margin-bottom: -65px;
		margin-right: 70px;
	}



	.hero-div.technology {
		height: 490px;
		padding-top: 125px;
	}
	.hero-div.technology .fade-image {
		margin-bottom: -80px;
		margin-right: 0px;
	}


	.hero-div.contactus {
		height: 490px;
		padding-top: 125px;
	}
	.hero-div.contactus .farmer-image {
		max-width: 380px; /* Adjust size as needed */
		margin-bottom: -135px;
		margin-right: 50px;
	}






	/* video slider */
	.impact-stories .video-slider {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		align-items: center; /* this line centers the cards vertically */
		gap: 20px;
		scroll-snap-type: x mandatory;
		padding: 5px 45px;
		height: 475px;
	}

	.impact-stories .video-card {
		width: 315px;
		height: 266px;
        flex: 0 0 auto;
        margin-left: 0;
        scroll-snap-align: center;
	}

	.impact-stories .video-card img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.media-icons {
		position: static !important;
	}


	.footer .footer-main .address .br { display: none; }




}
/* ## End of BreakPoint 2 - 768px */
/* ################### */




/* ################### */
/* ## Start of BreakPoint 3 - 576px */
@media screen and (max-width: 576px), only screen and (max-device-width: 576px) {

	/* Carousel */
	#carouselHero .carousel-item {
		height: 375px;
	}

	/* Ensure content is layered on top */
	#carouselHero .carousel-item .carousel-caption {
		padding-top: 140px;
	}

	.carousel-image.lazyload {
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 180% auto;
		width: 100%;
		margin: 0 auto;
	}

	.carousel-image.hero1 {
		background-position: calc(50% - 125px) bottom;
	}

	#carouselHero .carousel-item .carousel-caption h4 {
		font-size: 40px;
		line-height: 25px;
		width: 65%;
		text-align: center;
	}

	#carouselHero .carousel-item .carousel-caption h5 {
		font-size: 12px;
		line-height: 20px;
		width: 65%;
		text-align: center;
	}



	#carouselHero .carousel-item .carousel-caption.two {
		padding-top: 120px;
	}
	#carouselHero .carousel-item .carousel-caption.two h4 {
		font-size: 40px;
		text-align: center;
		line-height: 40px;
		width: 69%;
	}
	#carouselHero .carousel-item .carousel-caption.two h5 {
		text-align: center;
		width: 69%;
	}








	#carouselHero .carousel-item .carousel-caption span a {
		font-size: 12px;
		margin-top: 20px;
		padding: 10px 20px;
	}

	#carouselHero .carousel-indicators { bottom: -10px; }
	

	






	/* Hero banner */
	.hero-div.driving-impact .two-farmer-image {
		margin-bottom: -45px;
		margin-right: 20px;
	}
	.hero-div.driving-impact .sun {
		margin-bottom: 50px;
		margin-right: -10px;
	}



	.hero-div.investor-relation .graph-image {
		margin-bottom: -65px;
		margin-right: 35px;
	}



	/* Leadership Team */
	.leadership-team .profile-inner {
		min-height: 350px !important;
	}

	.leadership-team .profile-front {
		min-height: 350px !important;
	}

	.leadership-team .profile-back {
		min-height: 350px !important;
	}

	.leadership-team .profile-description p {
		max-height: 240px;
	}

	.leadership-team .profile-img {
		width: 210px;
		height: 210px;
	}

	

	/* give the bottom space for 2nd li in breadcrumbs */
	.breadcrumbs ul.breadcrumb li:nth-child(2) {
		margin-bottom: 10px;
	}




	/* tabs for india map */
	.ayekart-reach .nav-tabs .nav-link { padding: 8px 15px; }


	.grow-with-ayekart h3 { font-size: 24px; }


	.connect-with-us .content .br { display: inline; }


	.common-grid .greyoutline { padding: 30px 15px 15px 15px; }
	



}
/* ## End of BreakPoint 3 - 576px */
/* ################### */








/* ################### */
/* ## Start of BreakPoint 4 - below 400px */
@media screen and (max-width: 400px), only screen and (max-device-width: 400px) {


	.ayekart-reach .nav-tabs .nav-link {
		font-size: 12px;
		padding: 8px 10px;
	}

	.ayekart-reach .tab-pane img {
		padding-top: 25px;
		text-align: center;
		float: unset;
		width: 95%;
	}




	.hero-div.who-we-are .hero-image {
		margin-bottom: -60px;
		margin-right: 0px;
	}


	.hero-div.investor-relation .graph-image {
		margin-bottom: -65px;
		margin-right: 0px;
	}


	.hero-div.technology {
		padding-top: 120px;
	}
	.hero-div.technology .fade-image {
		margin-bottom: -15px;
	}


	.hero-div.contactus .farmer-image {
		max-width: 360px; /* Adjust size as needed */
		margin-bottom: -135px;
		margin-right: 10px;
	}









}
/* ## End of BreakPoint 4 - below 400px */
/* ################### */