/*
Theme Name:     OnRoute
Description:    A custom theme for OnRoute based on the parent theme Enfold. Do not delete the parent theme from your site.
Version:		1.0
Author:         ACS Creative
Author URI:		http://www.acscreative.com/
Template:		enfold
*/

/* ---- @import url('includes/elements.css'); ---- */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Oswald:wght@200..700&display=swap');

/* ------------------------------------------------------------
    ROOT VARIABLES
------------------------------------------------------------ */
:root {
	/* COLORS */
	--green: #65D94D;
	--blue: #1C2C4C;
	--grey-light: #ECECEC;
	--grey-dark: #595959;
	--white: #ffffff;

	/* TYPEFACES */
	--oswald: "Oswald", sans-serif;
	--dmsans: "DM Sans", sans-serif;

	/* UTILITIES */
	--transition: all .5s ease-in-out;
	--transition-long: all .7s ease-in-out;

	/* FONT SIZES */
	--text-xs: clamp(0.8125rem, 0.8125rem + 0vw, 0.8125rem);
	--text-sm: clamp(0.9375rem, 0.9375rem + 0vw, 0.9375rem);
	--text-base: clamp(1rem, 0.9931rem + 0.037vw, 1.0625rem);
	--text-md: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);
	--text-lg: clamp(1.5rem, 1.4722rem + 0.1481vw, 1.75rem);
	--text-xl: clamp(1.875rem, 1.8333rem + 0.2222vw, 2.25rem);
	--text-2xl: clamp(2.375rem, 2.2569rem + 0.6296vw, 3.4375rem);
	--text-3xl: clamp(2.75rem, 2.5rem + 1.3333vw, 5rem);



	/* BORDER RADIUS */
	--radius-xs: 0.875rem;
	--radius-sm: 1rem;
	--radius-base: 1.125rem;
	--radius-md: 24px;
	--radius-lg: 2.25rem;
	--radius-full: 99px;


	--shadow-base: 0 0 29px rgba(0, 1, 1, 0.17);
	--shadow-lg: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	--shadow-xl: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;


}

/* ------------------------------------------------------------
    UTILITIES & HELPERS
------------------------------------------------------------ */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}



/* ------------------------------------------------------------
    TYPOGRAPHY
------------------------------------------------------------ */

.uppercase {
	text-transform: uppercase !important;
}

/* Reset & Base */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	padding-bottom: 0;
	margin-bottom: 0.5em;
}

h1,
h2 {
	overflow: hidden !important;
	text-transform: none !important;
	font-weight: 400 !important;
	font-family: var(--oswald);
	color: var(--blue);
}

/* Sizes & Specifics */
h1 {
	font-size: var(--text-3xl);
	line-height: 1.2;
	letter-spacing: 0px !important;
}

h2 {
	font-size: var(--text-2xl);
	line-height: 1.25;
	letter-spacing: 0px !important;
}

h3 {
	font-size: var(--text-xl);
	line-height: 1.3;
	letter-spacing: 0px !important;
	font-family: var(--oswald);
	color: var(--blue) !important;
	font-weight: 400 !important;
}

h4 {
	font-size: var(--text-lg);
	line-height: 1.35;
	font-family: var(--dmsans);
	color: var(--blue);
}

h5 {
	font-size: var(--text-md);
	line-height: 1.4;
	font-family: var(--dmsans);
}

h6 {
	font-size: var(--text-base);
	line-height: 1.5;
	font-weight: 700 !important;
	font-family: var(--dmsans);
}


h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child) {
	margin-top: 1.5em;
}

p {
	line-height: 1.6;
	margin-bottom: 1.15rem;
	padding-bottom: 0.35rem;
	font-family: var(--dmsans);
	color: var(--grey-dark);
}

/* Text Utilities */
.special_amp {
	font-family: inherit !important;
	color: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	font-size: inherit !important;
}

b,
strong {
	color: inherit !important;
	font-weight: 800;
}

td {
	font-size: var(--text-base);
}


.av-special-heading-tag {
	text-transform: uppercase !important;
}

.av-special-heading .av-subheading_below p {
	font-size: var(--text-lg) !important;
}

ul,
li {
	font-family: var(--dmsans);
	color: var(--grey-dark);
}

.text-white,
.text-white h3 {
	color: var(--white) !important;
}




/* ------------------------------------------------------------
	Global
------------------------------------------------------------ */


/* ------------------------------------------------------------
    IMAGES
------------------------------------------------------------ */
.avia-image-container {
	border-radius: var(--radius-base) !important;
	overflow: hidden !important;
}


/* ------------------------------------------------------------
    BUTTONS
------------------------------------------------------------ */

/* PULSE ANIMATION */
@keyframes pulse-outline {
	0% {
		outline-width: 4px;
		outline-color: rgba(101, 217, 77, 0.6);
	}

	70% {
		outline-width: 8px;
		outline-color: rgba(101, 217, 77, 0.2);
	}

	100% {
		outline-width: 12px;
		outline-color: rgba(101, 217, 77, 0);
	}
}


/* Padding Presets */
#top .main_color .avia-button {
	text-decoration: none !important;
	border-radius: var(--radius-full);
}

#top .main_color .avia-button.avia-size-small {
	padding: 13px 24px !important;
	font-size: var(--text-base);
	transition: var(--transition);
	text-transform: uppercase;
}

#top .main_color .avia-button.avia-size-medium {
	padding: 16px 36px !important;
	font-size: var(--text-md);
	transition: var(--transition);
	text-transform: uppercase;
}

#top .main_color .avia-button.avia-size-large {
	padding: 21px 42px !important;
	font-size: var(--text-lg);
	transition: var(--transition);
}


/* --------- BUTTON THEME COLOR --------- */
#top .main_color .avia-color-theme-color {
	background-color: var(--green) !important;
	border: 1px solid var(--green) !important;
	outline: 4px solid rgba(101, 217, 77, 0.3);
	transition: var(--transition);
}


#top .main_color .avia-color-theme-color .avia_iconbox_title {
	color: var(--blue);
	transition: var(--transition);
}

#top .main_color .avia-color-theme-color svg {
	fill: var(--blue) !important;
	transition: var(--transition);
}

/* HOVER */
#top .main_color .avia-color-theme-color:hover {
	background-color: var(--blue) !important;
	border: 1px solid var(--green) !important;
	outline: 4px solid rgba(28, 44, 76, 0.6);
	animation: pulse-outline 2s ease infinite;
	transition: var(--transition);
}


#top .main_color .avia-color-theme-color:hover .avia_iconbox_title {
	color: var(--green);
	transition: var(--transition);
}

#top .main_color .avia-color-theme-color:hover svg {
	fill: var(--green) !important;
	transition: var(--transition);
}




/* --------- BUTTON THEME COLOR SUBTLE--------- */
#top .main_color .avia-color-theme-color-subtle {
	background-color: var(--white) !important;
	border: 1px solid var(--blue) !important;
	outline: 4px solid rgba(255, 255, 255, 0.3);
	transition: var(--transition);
}

#top .main_color .avia-color-theme-color-subtle .avia_iconbox_title {
	color: var(--blue);
	transition: var(--transition);
}

#top .main_color .avia-color-theme-color-subtle svg {
	fill: var(--blue) !important;
	transition: var(--transition);
}


/* HOVER */
#top .main_color .avia-color-theme-color-subtle:hover {
	background-color: var(--green) !important;
	border: 1px solid var(--blue) !important;
	outline: 4px solid rgba(101, 217, 77, 0.6);
	animation: pulse-outline 2s ease infinite;
	transition: var(--transition);
}

#top .main_color .avia-color-theme-color-subtle:hover .avia_iconbox_title {
	color: var(--blue);
	transition: var(--transition);
}

#top .main_color .avia-color-theme-color-subtle:hover svg {
	fill: var(--blue) !important;
	transition: var(--transition);
}



/* --------- BUTTON THEME COLOR HIGHLIGHT --------- */
#top .main_color .avia-color-theme-color-highlight {
	background-color: var(--blue) !important;
	border: 1px solid var(--blue) !important;
	outline: 4px solid rgba(28, 44, 76, 0.3);
	transition: var(--transition);
}

#top .main_color .avia-color-theme-color-highlight .avia_iconbox_title {
	color: var(--green);
	transition: var(--transition);
}

#top .main_color .avia-color-theme-color-highlight svg {
	fill: var(--green) !important;
	transition: var(--transition);
}


/* HOVER */
#top .main_color .avia-color-theme-color-highlight:hover {
	background-color: var(--green) !important;
	border: 1px solid var(--blue) !important;
	outline: 4px solid rgba(101, 217, 77, 0.6);
	animation: pulse-outline 2s ease infinite;
	transition: var(--transition);
}

#top .main_color .avia-color-theme-color-highlight:hover .avia_iconbox_title {
	color: var(--blue);
	transition: var(--transition);
}

#top .main_color .avia-color-theme-color-highlight:hover svg {
	fill: var(--green) !important;
	transition: var(--transition);
}





/* ------------------------------------------------------------
	HEADER
------------------------------------------------------------ */
#top #header .logo {
	padding: 12px 0px;
	transition: var(--transition);
}


#top #header .logo img {
	max-height: 50px !important;
	transition: var(--transition);
}


#top #header .container {
	height: 90px !important;
	line-height: 90px !important;
	transition: var(--transition);
}

#top #header .avia-menu-text {
	font-weight: 500;
	padding: 0 15px;
	font-size: 16px !important;
	text-transform: uppercase;
	font-family: var(--oswald);
	transition: var(--transition);
}

#top #header .avia-menu-fx {
	background-color: var(--green) !important;
}

#top #header.av_header_transparency .av-main-nav>li>a {
	color: var(--white);
	transition: var(--transition);
	padding: 0px !important;
}

#top #header:not(.av_header_transparency) .av-main-nav>li>a {
	color: var(--blue);
	transition: var(--transition);
	padding: 0px !important;
}




/* ------------------------------------------------------------
	FOOTER
------------------------------------------------------------ */

#footer ul {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 0px;
	padding-left: 0px;
	list-style-type: none !important;
	gap: 16px;
	flex-wrap: wrap;
}

#footer ul li {
	padding-left: 0px;
}


#footer ul li a {
	font-size: var(--text-md);
	color: var(--blue);
	font-weight: 500;
	font-family: var(--dmsans);
	transition: var(--transition);
}

#footer-utilities-menu a {
	font-size: var(--text-base) !important;
	color: var(--blue) !important;
	font-weight: 500;
	font-family: var(--dmsans);
	transition: var(--transition);

}

#footer ul li a:hover,
#footer-utilities-menu a:hover {
	color: var(--green);
	transition: var(--transition);
	text-decoration: underline;
}




/* --------- Insert your custom styles on next rows --------- */

/* ------------------------------------------------------------
	HOMEPAGE
------------------------------------------------------------ */

#home-hero h1 {
	text-transform: uppercase !important;
	color: var(--white) !important;
	font-size: var(--text-3xl) !important;
	margin-bottom: 4px !important;
}

#home-hero p {
	color: var(--grey-light) !important;
	font-size: var(--text-lg) !important;
	max-width: 50%;
}


#main-search {
	margin-top: -45px !important;
}

#main-search form {
	position: relative;
}

#main-search form input[type="text"] {
	height: 90px;
	border-radius: var(--radius-full) !important;
	box-shadow: var(--shadow-xl) !important;
	padding: 24px !important;
	color: var(--grey-dark) !important;
	font-size: var(--text-md);
	font-family: var(--dmsans) !important;
	font-weight: 400 !important;
	padding-left: 60px !important;
}

.search-icon {
	position: absolute;
	left: 24px;
	top: 34px;
	pointer-events: none;
}

.search-icon img {
	height: 20px !important;
	width: auto !important;
	opacity: 0.3;
}

#main-search form button {
	padding: 16px 36px !important;
	font-size: var(--text-md);
	transition: var(--transition);
	text-transform: uppercase;
	border-radius: var(--radius-full);
	background-color: var(--green) !important;
	border: 1px solid var(--green) !important;
	outline: 4px solid rgba(101, 217, 77, 0.3);
	position: absolute;
	right: 16px;
	top: 16px;
	transition: var(--transition);
}

#main-search form button:hover {
	color: var(--green);
	background-color: var(--blue) !important;
	border: 1px solid var(--green) !important;
	outline: 4px solid rgba(28, 44, 76, 0.6);
	animation: pulse-outline 2s ease infinite;
	transition: var(--transition);
}


.travels-cta .avia_image,
.travels-cta img {
	border-radius: var(--radius-base);
}

.travels-cta h3 {
	font-size: var(--text-lg);
	text-transform: uppercase;
	margin-top: 24px !important;
}

.travels-cta .image-overlay:hover,
.travels-cta .image-overlay {
	top: auto !important;
	left: auto !important;
	bottom: 16px !important;
	right: 16px !important;
}

.image-overlay {
	opacity: 1 !important;
	display: block !important;
	background-color: transparent !important;
	visibility: visible !important;
	width: 24px !important;
	height: 24px !important;
	transition: var(--transition);
}

.image-overlay-inside {
	width: 24px !important;
	height: 24px !important;
	background-color: var(--white) !important;
	-webkit-mask: url('/wp-content/uploads/2026/03/link-icon-white.svg') no-repeat center;
	mask: url('/wp-content/uploads/2026/03/link-icon-white.svg') no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
	content: '';
	transition: background-color 0.3s ease;
	cursor: pointer;
	opacity: 1 !important;
	display: block;
	animation: none !important;
	visibility: visible !important;
	transition: var(--transition);
}

a.avia_image:hover .image-overlay-inside {
	background-color: var(--green) !important;
	opacity: 1 !important;
}

a.avia_image:hover img {
	scale: 1.05;
}

.travels-cta a.avia_image {
	box-shadow: var(--shadow-base);
}

.image-overlay.overlay-type-extern .image-overlay-inside:before {
	display: none !important;
}


@media only screen and (min-width: 1100px) and (max-width: 1230px) {}

@media only screen and (max-width: 1200px) {}

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

	#home-hero p {
		color: var(--grey-light) !important;
		font-size: var(--text-lg) !important;
		max-width: 75%;
	}
}

@media only screen and (max-width: 900px) {}

@media only screen and (max-width: 767px) {
	#home-hero p {
		color: var(--grey-light) !important;
		font-size: var(--text-lg) !important;
		max-width: 100%;
	}

	#main-search form {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}


	#main-search form input[type="text"] {
		margin-bottom: 2px !important;
		border-radius: 24px 24px 0px 0px !important;
	}

	#main-search form button {
		position: relative !important;
		right: 0px !important;
		top: 0px !important;
		width: 100% !important;
		border-radius: 0px 0px 24px 24px !important;
	}
}

@media only screen and (max-width: 480px) {}