body {
	margin:0;
	padding:0;
    background-color:#063456;
	font-family: "Inter", sans-serif;
	word-wrap:break-word !important;
	font-size:16px;
	color: #ffffff;
}

p {
	color: #f4f4f4;
}

.inter-font {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.nav-wrapper {
	max-width: 1500px;
	margin: auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.login {
	padding-top: 3px;
	padding-left: 10px;
}

.video-wrapper {
	margin: auto;
}

.main-wrapper {
	max-width: 1500px;
	
	padding-top: 10px;
	padding-bottom: 10px;
}

.navbar {
	background-color:#063456;
}

.navbar-collapse {
	flex-grow: 0 !important;
}

.navbar-toggler {
	border-color: rgba(250, 250, 250, 0.1);
}

.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(250, 250, 250, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    }

h2 {
	font-weight: bolder;
}

.gray-font {
	color: #828282;
}

.aqua-font {
	color: #2CD0C8;
}

li.nav-item {
	padding-bottom: 10px;
	padding-top: 10px;
}

a.nav-new {
	color: #ffffff;
	text-decoration: none;
	padding: 20px 10px;
	font-size: 18px;
}

a.nav-new:hover {
	color: #2CD0C8;
	text-decoration: none;
}

a.blue-new {
	color: #2CD0C8;
	text-decoration: underline;
	font-size: 18px;
}

a.blue-new:hover {
	color: #828282;
	text-decoration: underline;
}

a.main-links {
	color: #2CD0C8;
	text-decoration: underline;
	padding: 20px 10px;
	font-size: 16px;
}

a.main-links:hover {
	color: #828282;
}

a.box-links {
	background-color: #2CD0C8;
	padding: 10px 15px;
	color: #f4f4f4;
	font-size: 16px;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bolder;
}

a.box-links:hover {
	background-color: #828282;
	color: #ffffff;
}

a.individual {
	background-color: #a5a9b5;
	padding: 10px 15px;
	color: #f4f4f4;
	font-size: 16px;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bolder;
}

a.individual:hover {
	background-color: #828282;
	color: #ffffff;
}

a.spouse {
	background-color: #2CD0C8;
	padding: 10px 15px;
	color: #f4f4f4;
	font-size: 16px;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bolder;
}

a.spouse:hover {
	background-color: #828282;
	color: #ffffff;
}

a.family {
	background-color: #3db137;
	padding: 10px 15px;
	color: #f4f4f4;
	font-size: 16px;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bolder;
}

a.family:hover {
	background-color: #828282;
	color: #ffffff;
}

a.junior {
	background-color: #5a5cf1;
	padding: 10px 15px;
	color: #f4f4f4;
	font-size: 16px;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bolder;
}

a.junior:hover {
	background-color: #828282;
	color: #ffffff;
}

.map-responsive {
        overflow: hidden;
        padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width * 100) */
        position: relative;
        height: 0;
    }

.map-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }

.my-icon {
        /* Initial state */
        color: #ffffff; /* Default color */
        transition: all 0.3s ease-in-out; /* Smooth transition for all properties */
        transform: rotate(0deg) scale(1); /* Initial rotation and scale */
    }

.my-icon:hover {
        /* State on hover */
        color: #2CD0C8; /* Change color on hover */
        transform: rotate(360deg) scale(1.2); /* Rotate and slightly enlarge on hover */
    }

input[type="submit"] {
  background-color: #2CD0C8;
	padding: 10px 15px;
	color: #f4f4f4;
	font-size: 16px;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bolder;
}

input[type="submit"]:hover {
  background-color: #828282;
	color: #ffffff;
}

.logo-top {
	max-width: 90px;
	border-right: 2px solid #ffffff;
	padding-right: 15px;
}

.logo-trackman {
	max-width: 114px;
	padding-left: 15px;
}

.custom-hr {
	border: none;
	background-color: #828282;
	height: 2px;
	width: 100%;
}

.video-contain {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
}

.video-contain video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}

.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}

.embed-responsive-16by9{padding-bottom:56.25%}

.embed-responsive-4by3{padding-bottom:75%}

 .footer-box {
 	background-color: #828282;
 	width: 100%;
 }

 .bg-footer {
	background-color: #828282;
}

.footer-container {
	max-width: 1500px;
	margin: auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.blue-link {
	color: #ffffff;
}

a.blue-link {
	color: #ffffff;
	text-decoration: none;
	padding: 20px 10px;
	font-size: 18px;
}

a.blue-link:hover {
	color: #2CD0C8;
}

 .footer-font {
 	color: #000000;
 }

 .h3 {
 	font-size: 18px;
 	color: #fff;
 	text-decoration: underline;
 }




@media screen and (max-width:576px) {
    .main-wrapper {
	max-width: 1500px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
}