/* Changes to bootstrap css*/
.row>* {
 padding: 0%;
}

.navbar-toggler {
 margin-right: 24px;
}

.nav-link {
 margin-left: 24px;
 margin-right: 24px;
 max-width: fit-content;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
 color: var(--links);
}

.bg-light {
 background-color: white !important;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.display-2 {
 font-size: 3rem;
}

.display-3 {
 font-size: 2rem;
 font-weight: 400;
}

.fs-3 {
 font-size: 1.25rem !important;
 font-weight: 400;
 letter-spacing: 0.05rem;
}

nav a.fs-3 {
 font-weight: 400;
}


/* create default variables*/
:root {
 --primary: #FFFFFF;
 --background-secondary: #D5E1DF;
 --background-tertiary: #C2B3A3;
 --text: #383838;
 --decoration: #8D4450;
 --links: #8D4450;
 --default-font: 'League Spartan', sans-serif;
 --light-font: 'League Spartan', sans-serif;
 --rich-font: 'League Spartan', sans-serif;
 font-family: 'League Spartan', sans-serif;
}

/* css that can be used for every page */
*:focus {
 outline: 2px solid var(--text);
 outline-offset: 2px;
}

body {
 margin: 0;
 padding: 0;
 background-color: var(--primary);
 font-style: var(--default-font);
 color: var(--text);
}

main {
 margin-top: 50px;
}

img {
 object-fit: cover;
}

.rich-text {
 text-decoration: none;
 list-style-type: none;
 padding: 0;
 font-style: var(--rich-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
 margin-block-start: 0.1em;
 margin-block-end: 0.1em;
 scroll-margin-top: 50px;
}

/**
For now I don't need this
h2::after,
h4::after,
h5::after,
h6::after,

*/
.heading-bar::after,
h3::after,
.list::after {
 content: "";
 display: block;
 width: 60px;
 height: 3px;
 background-color: var(--decoration);
 margin-top: 10px;
 margin-bottom: 4%;
}

.list::after {
 margin-top: 2%;
}

.coaching-header::after {
 height: 0px;
}

.fee-header {
 padding-top: 2%;
}

.nav-link,
a {
 color: var(--links);
}

.list {
 padding: 0;
}

/* Hide the link by default */
#skip {
 position: absolute;
 top: 0;
 left: 0;
 padding: 10px;
 background-color: var(--background-secondary);
 z-index: 1000;
 transform: translateY(-100%);
 transition: transform 0.3s ease;
}

/* Show the link when focused */
#skip:focus {
 transform: translateY(0);
}

/* Ensure the link is above the navbar */
.navbar {
 z-index: 999;
}

header {
 display: flex;
 align-items: center;
}

header img {
 width: 150px;
 max-width: 100%;
 height: auto;
}

#header-hl {
 font-style: var(--default-font);
 font-size: 60px;
}

#header-hl:after {
 content: "";
 display: block;
 width: 200px;
 height: 0px;
 background-color: var(--decoration);
 margin-top: 10px;
}

nav ul {
 list-style-type: none;
 padding: 0%;
 margin: 0px;
}

.nav-link:hover,
.nav-link:focus,
a:hover,
a:focus {
 text-decoration: underline;
 color: var(--decoration);
}

.section-description {
 padding: 5%;
}

.colored {
 background-color: var(--background-secondary);
}

.colored-alt {
 background-color: var(--background-tertiary);
}


#address {
 display: flex;
 flex-wrap: wrap;
}


#address p {
 margin: 0px 8px 16px 8px;
 max-width: 45%;
}

#no-insurance {
 font-size: 1.6rem;
 font-weight: 500;
 text-align: center;
}

.policy {
 font-size: 1rem;
 margin-bottom: 8px;
 ;
}

/* changes navbar to static on smaller screens */
@media (max-width: 767.98px) {
 .navbar {
  position: static !important;
 }

 main {
  margin-top: 0;
 }
}