/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Nunito",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
  --cta-font:"Frank Ruhl Libre",sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #556270; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #75C2F6; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #556270;  /* The default color of the main navmenu links */
  --nav-hover-color: #75C2F6; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #556270; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #75C2F6; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f2f4f6;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #3b4654;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #444e5b;
  --contrast-color: #ffffff;
}
.footer-background{
	--background-color:#1D5D9B;
	--footer-links:#fff!important;
}

/*Header*/
.top-header{
	background-color: var(--accent-color);
	color: #fff;
	padding: 5px 20px;
	font-weight: 300;
}
.top-header a{color:#fff!important;}
.top-header .phone{text-transform: uppercase;}

body{overflow-x: auto;}

/*Navigation*/
.navmenu a, .navmenu .dropdown ul a {text-transform: uppercase;}

/*Homepage Slideshow*/
h2.slider{font-size: 72px; text-align: center;font-weight: 400;font-family: "Frank Ruhl Libre",sans-serif;}
h2.slider span{color: var(--accent-color);}
.carousel-container h3{font-family: "Nunito", sans-serif; text-transform: uppercase;font-weight: 200!important;}
.hero h2 {margin-bottom: 0;}

/*Footer*/
.footer {padding: 40px 20px;}
footer p {
  font-family: "Nunito",sans-serif !important;
}
.footer h4{text-transform: uppercase;font-family: "Nunito",sans-serif !important;letter-spacing: 1px;}
footer ul li{list-style: none;}
footer ul li a {
  margin-left: -30px;
  text-transform: uppercase;
  color: #fff;
  line-height: 25px;
}
.footer-bar{background-color: #75c2f6;padding: 5px 0;color: #1d5d9b;font-size: 11px;}
.footer-bar a {color: #1d5d9b;font-size: 11px;}

/*Blue CTA Bars*/
section.blue-bar{padding: 20px;}
.blue-bar{  background-color: var(--accent-color);}
.blue-bar h2{color: #fff;text-transform: uppercase;font-family: var(--cta-font);}

/*Buttons*/
.btn-outline {
  border: 2px solid #fff;
  border-radius: 50px;
  max-width: 200px;
  color: #fff;
  text-transform: uppercase;
  font-size: 16px;
  margin: 10px auto;
}
.btn-outline:hover,.btn-outline:active,.btn-outline:focus{border: 2px solid #fff;color: #fff;background-color: #1d5d9b;}

.btn-outline-blue {
  border: 2px solid var(--accent-color);
  border-radius: 50px;
  max-width: 200px;
  color: var(--accent-color);
  text-transform: uppercase;
  font-size: 16px;
  margin: 50px auto;
}
.btn-outline-blue:hover,.btn-outline-blue:active,.btn-outline-blue:focus{border: 2px solid var(--accent-color);color: #fff;background-color: #1d5d9b;}

/*Titles*/
.featuresTitle {
  text-transform: uppercase;
  font-weight: 300;
  margin: 10px 0 10px;
}

/*Sections*/
.section-title p {
  color: var(--heading-color);
  margin: 0;
  font-size: 28px;
  font-weight: 400;
  text-transform: uppercase;
  font-family: var(--heading-font);
}
.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
  font-family: "Frank Ruhl Libre",sans-serif;
}

/*List Icon*/
.services ul li{list-style: none;}
/*.services ul li:before{content: "\f3a5";margin-right: 10px;}*/

/*Map*/
.map{margin-bottom: -6px;}

/*To Top Scroll*/
.scroll-top {border: 1px solid #fff !important;bottom: 75px;}