/* Universal box-sizing for easier layout calculations */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding from common elements */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

/* Set base font inheritance for form elements */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove list styling */
ol,
ul {
  list-style: none;
}

/* Ensure images are responsive */
img {
  max-width: 100%;
  display: block;
}

/* Remove text decoration from anchors and make them inherit color */
a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s ease;
}

/* Reset button styles */
button {
  background: none  color: inherit;;

  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

/* Optional: Reset focus styles for accessibility, then re-apply custom ones */
:focus {
  outline: 2px solid blue; /* Example custom focus style */
}

.nav {
  display: inline-block;
}
.nav > span:hover {
  color: #0bf2fc;
  text-shadow: 0 0 8px rgba(255,255,255,0.8);
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
  transition: 0.3s ease;
}
.dropdown:hover {
  color: #0bf2fc;
  text-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.dropdown > button {
  background: none;
  border: none;
  color: #333;
  font: inherit;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  outline: none;
}
.dropdown > a {

  text-decoration: none;
  cursor: pointer;
  padding: 4px 0px;

}
.dropdown > button:hover {
  background: #e3e3e3;
  outline: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #009fad;
  border: none;
  border-radius: 0px;
  min-width: 180px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-top: 5px;
}

.dropdown-content a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

.dropdown-content a:hover {
  background: #e32525;
  outline: none;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
  outline: none;
}

.dropdown > button {
  outline: none;
}

.dropdown > button:focus {
  outline: none;
  box-shadow: none;
}
.dropdown > button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
  border-radius: 4px;
}
/* Kill default focus ring on the trigger */
.dropdown > button {
  outline: none;
}

/* Modern browsers */
.dropdown > button:focus,
.dropdown > button:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Firefox specifics */
.dropdown > button::-moz-focus-inner { border: 0; }
.dropdown > button:-moz-focusring { outline: none; }

/* If your trigger is an <a> instead of <button>, cover that too */
.dropdown > a:focus,
.dropdown > a:focus-visible {
  outline: none;
  box-shadow: none;
}
.dropdown-content a:focus,
.dropdown-content a:focus-visible {
  outline: none;
  box-shadow: none;
}
/* Remove on focus only if it's not keyboard navigation */
.dropdown > button:focus:not(:focus-visible),
.dropdown-content a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}



#wrapper {
	font-family: "Lato", sans-serif;
	color: #fff;
	background: #012641 url("../images/bg-body.jpg") no-repeat center top /cover;
	min-height: 100vh;
	padding: 7% 8% 8% 8%;
  position: relative;
}
.logo {
	margin: 0 0 6rem 0;
}
.selection {
	font-size: 23px;
	font-weight: 500;
  transition: 0.3s ease;
}
.canada {
	margin: 0 0 2rem 0;
}
.usa {
	margin: 2.5rem 0;
  transition: 0.3s ease;
}
.usa a:hover {
  color: #0bf2fc;
  text-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.uae {
	color: #4e687a;
	margin: 0 0 2rem 0;
}
.logoset {
  position: absolute;
  bottom: 5%;
  right: 20%;
}
.logoset .item {
  float: left;
  display: inline-block;
  margin: 0 1.5rem;
}

.logoset .item img {
  max-height: 100px;     /* control image size */
  width: auto;
}