/* General Styles */
:root {
	--font-size: 1.3rem; /*Bootstrap fs-5 = 1.25rem*/
	/* --bg-color-2: #f4f4f4; */
	--bg-color: #37b7c3;
	/* --bg-color: #6eacda; */
	--text-color: #333;
	--footer-color: #088395;
	/* --footer-color: #03346e; */
	--font-color: #071952;
	/* --font-color: #021526; */
	--gray-color: #ebf4f6;
	/* --gray-color: #e3e2b6; */
	/* --bs--header-font-color: #071952; */
	/* --bs--header-font-color: #021526; */
	--font--nav-link-fontW: 400;
	--cream-yellow: #f4f5ec;
	/* flag gradient */
	--azure-blue: rgba(0, 123, 255, 0.98); /*Blue (End):(Azure Blue)*/
	--medium-blue: rgba(51, 153, 255, 0.97); /*Medium Blue*/
	--sky-blue: rgba(153, 207, 255, 0.96); /*Sky Blue*/
	--soft-yellow-green: rgba(204, 229, 255, 0.95); /*Soft Yellow-Green*/
	--pale-yellow: rgba(255, 230, 153, 0.65); /*Pale Yellow*/
	--light-yellow: rgba(255, 224, 102, 0.55); /*Light Yellow */
	--gold-yellow: rgba(255, 217, 0, 0.45); /*Yellow (Start): (Gold)*/
}
/* #ebf4f6(dropdowns background and in gradient of body background)  #071952(headings texts) 
#088395, #37b7c3(backgrounds, hover and in gradient of body background, ) 
bg-light bg-white(main and header backgrounds???),
 #333(for paragraphs texts???)
 red(decoration svg for headings::before*/

html {
	box-sizing: border-box;
}

*,
::after,
::before {
	box-sizing: inherit;
}

body {
	font-family: 'Merriweather Sans', sans-serif;
	font-weight: 300;
	font-optical-sizing: auto;
	font-size: var(--font-size);
	background-image: linear-gradient(
		180deg,
		var(--gray-color),
		var(--bg-color),
		var(--footer-color)
	);
	background-repeat: no-repeat;
	color: var(--text-color);
}

.color-custom {
	color: var(--font-color) !important;
}
.dark-bg-custom {
	background-color: var(--footer-color);
}
.pangolin-regular {
	font-family: 'Pangolin', cursive;
	font-weight: 400;
	font-style: normal;
}

.shadow {
	box-shadow: 0 6px 6px hsl(0deg 0% 0% / 0.3) !important;
}

.header-bg {
	background-color: var(--cream-yellow);
}
.logo {
	width: 3.5em;
	height: 3.55em;
	flex-shrink: 0;
	min-width: 3.5em;
}
.header-nav {
	font-weight: var(--font--nav-link-fontW);
	white-space: nowrap;
}

/* Custom styles for dropdown menu */
/* My styles for navbar */
/* slider collapse */
.collapse.show {
	display: block;
	padding: 25px;
	z-index: 200;
	background-color: var(--gray-color);
	position: absolute !important;
	right: 0px;
	top: 100%;
}

.navbar-collapse.collapsing {
	-webkit-transition: none;
	transition: none;
	display: none;
}

/* lang menu */
.nav-item .dropdown-menu {
	top: 100%;
	right: 0 !important;
	transform: translateY(0); /* Ensure there's no additional offset */
	will-change: transform; /* Optimize performance */
}

/* end of my styles */

/* toggler  icon start*/
.navbar-toggler {
	width: 16px;
	height: 16px;
	position: relative;
	transition: 0.5s ease-in-out;
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
	outline: none;
	box-shadow: none;
	border: 0;
}
.navbar-toggler span {
	margin: 0;
	padding: 0;
}
.toggler-icon {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	background-color: var(--footer-color);
	border-radius: 1px;
	opacity: 1;
	left: 0;
	transform: rotate(0deg);
	transition: 0.25s ease-in-out;
}
.middle-bar {
	margin-top: 0px;
}
/* when navigation is clicked */
.navbar-toggler .top-bar {
	margin-top: 0px;
	transform: rotate(135deg);
}
.navbar-toggler .middle-bar {
	opacity: 0;
	filter: alpha(opacity=0);
}
.navbar-toggler .bottom-bar {
	margin-top: 0px;
	transform: rotate(-135deg);
}
/* state when the nav-bar is collapsed ----> in html */
.navbar-toggler.collapsed .top-bar {
	margin-top: -20px;
	transform: rotate(0deg);
}
.navbar-toggler.collapsed .middle-bar {
	opacity: 1;
	filter: alpha(opacity=100);
}
.navbar-toggler.collapsed .bottom-bar {
	margin-top: 20px;
	transform: rotate(0deg);
}
/* toggler icon end */

/* Ensure dropdown doesn't affect page layout when shown */
.nav-item .dropdown-menu.show {
	position: absolute !important;
	z-index: 300;
	top: 100%;
	left: 0;
	right: 0;
	display: block;
	float: none; /* Disable float */
	min-width: max-content; /* Ensure it doesn’t push other content by auto-sizing */
}

.dropdown-menu {
	max-width: fit-content;
	background-color: var(--gray-color);
	color: var(--font-color);
}
.dropdown-item:hover {
	background-color: var(--bg-color);
	color: var(--gray-color);
}
.dropdown-item.active {
	background-color: var(--footer-color);
	color: var(--gray-color);
}
.dropdown-item.active:hover {
	background-color: var(--footer-color);
}
.dropdown-menu a {
	white-space: nowrap;
}

.main {
	background-color: var(--cream-yellow);
}
#backToTop {
	background-color: rgba(204, 229, 255, 0.41);
	border-color: var(--gray-color);
	color: var(--gray-color);
	width: 50px;
	height: 50px;
}

#backToTop:hover {
	background-color: var(--font-color);
	opacity: 1;
}
.motto {
	background-image: linear-gradient(
			var(--azure-blue),
			var(--medium-blue),
			var(--sky-blue),
			var(--soft-yellow-green),
			var(--pale-yellow),
			var(--light-yellow),
			var(--gold-yellow)
		),
		url(images/people_on_square_monochrome.jpeg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 600px;
	color: aliceblue;
	overflow: hidden;
}

.anouncement a:hover,
.card:hover a,
.header-nav:hover {
	color: var(--bg-color) !important;
}

h2::before {
	content: 'm';
	font-family: 'Yarndings 12', system-ui;
	font-weight: 400;
	font-style: normal;
	margin-right: 5px;
	color: red;
}

.carouselOuter {
	max-width: 100%;
}

.carousel-inner {
	max-height: 700px; /* Adjust based on your preference */
}

.carousel-item img {
	width: 100%;
	height: 700px;
	object-fit: cover; /* Ensures the image covers the container */
	object-position: center center;
}

.card {
	background-color: var(--gray-color);
}

/* Responsive Design */
@media (max-width: 599px) {
	/* Mobile */
	.navbar-nav {
		flex-direction: column;
		text-align: center;
	}
}
@media (max-width: 990px) {
	.collapse.show {
		animation-duration: 0.5s;
		animation-name: slidein;
	}
	.collapse:not(.show) {
		animation-duration: 0.5s;
		animation-name: slideout;
		animation-timing-function: linear;
	}

	@keyframes slidein {
		from {
			transform: translateX(100%);
		}
		to {
			transform: translateX(0);
		}
	}

	@keyframes slideout {
		from {
			transform: translateX(0);
		}

		to {
			transform: translateX(100%);
		}
	}
}

@media (min-width: 600px) {
	/*Tablet */
	.main {
		max-width: 95%;
	}
	.slideLine {
		animation: slidingText 6s linear 1 running;
		white-space: nowrap;
	}
	.anouncement {
		text-align: left;
		width: 100%;
		animation: slidingEnds 6s linear 6s 1;
		color: var(--font-color);
	}

	@keyframes slidingText {
		0% {
			transform: translateX(100%);
			word-spacing: 4em;
		}
		25% {
			word-spacing: 3em;
		}

		50% {
			transform: translateX(0);
			word-spacing: 2em;
		}
		75% {
			word-spacing: 1em;
		}
		100% {
			transform: translateX(-100%);
			word-spacing: 0.4em;
		}
	}
	@keyframes slidingEnds {
		from {
			transform: translateX(100%);
			word-spacing: 2em;
		}

		to {
			transform: translateX(0);
			word-spacing: 0.4em;
		}
	}
}

@media (min-width: 960px) {
	/* Laptop */
	.main {
		max-width: 90%;
	}
}

@media (min-width: 1280px) {
	/*Desktop */
	.main {
		max-width: 80%;
	}
}
@media (min-width: 1700px) {
	.main {
		max-width: 60%;
	}
}
@media (prefers-reduced-motion) {
	.anouncement,
	.slideLine {
		animation: none;
	}
}