@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Change font to Open Sans */
.open-sans-remington {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* Align logo and menu in the same row */
.container-header {
    background: none;
	background: rgb(0,0,0, .25);
    background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    width: 100%;
    height: 200px;
    background-size: cover;
    color: white;
}

.container-topbar {
	width: 100%;
	padding-top: 10px;
}

/* Style the nav logo */
#mod-custom112 {
	width: 30%;
    float: left;
	padding: 0 2.5%;
}

/* Style the main menu */
#mod-menu111 {
	width: 65%;
    float: right;
	position: absolute;
	bottom: 40px;
	color: #003871;
	left: 35%;
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
}

.container-header .mod-menu .parent>ul {
	display: block;
}

/* Main menu layout */
#mod-menu111 {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level items */
#mod-menu111 > li {
  position: relative;
}

/* Links */
#mod-menu111 a {
  display: block;
  padding: 14px 18px;
  text-decoration: none;
  color: #fff;
  transition: background 0.3s ease;
  background: none;
  color: #003871;
}

#mod-menu111 a:hover {
  color: #ffffff;
  background: rgba(0,22,44,.75);
}

/* Hide submenu by default */
#mod-menu111 .mod-menu__sub {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  min-width: 220px;
  list-style: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 1000;
  background: rgba(0,22,44,.5);
}

/* Submenu links */
#mod-menu111 .mod-menu__sub a {
  color: #ffffff;
  padding: 12px 16px;
  font-size: 14px;
}

/* Divider between submenu items */
#mod-menu111 .mod-menu__sub li:not(:last-child) a {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* 🔥 Show dropdown on hover */
#mod-menu111 li.parent:hover > .mod-menu__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Optional: hide the toggle button on desktop */
#mod-menu111 .mod-menu__toggle-sub {
  display: none;
}

/* Change primary, hover, and link colors globally */
:root {
    --cassiopeia-color-primary: #2F9C95;
    --cassiopeia-color-hover: #174F4B;
    --cassiopeia-color-link: #1C5E5A;
}

.container-header .mod-menu>li {
    width: 22%;
    text-align: center;
}

#random-home-image {
  margin-top: -200px;
}