@charset "utf-8";
/* CSS Document */
*, *::before, *::after
{
    box-sizing: inherit;
}


html,body
{
    box-sizing: border-box;
    margin: 0px;
    font-size: 1em;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #0D231F;
    background-color: #F4EFE6;
    }
h2, h3, h4, h5, h6  {
    font-family: roboto,san-serif;
    ;
    ;
    font-weight: normal;
    color: #194039;
}
h2 {
    font-family: roboto,san-serif;
    ;
    ;
    font-weight: 700;
    font-size: 1.5rem;
}

h1 {
    font-family: knewave;
    font-size: 2.5rem;
    color: #0D231F;
}

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

#container {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 70px;
    padding-top: 35px;
}
.inset70 {
    padding-left: 70px;
}


.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.knewave-regular {
  font-family: "Knewave", system-ui;
  font-weight: 400;
  font-style: normal;
}

.button {
    background-color: #F24738;
    border: none;
    color: white;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 10px;
}


a:link, a:visited {
    color: #F24738;
    text-decoration: none;
}

a:hover, a:active {
    color: #67CBAC;
    text-decoration: none
}
#topNav {
    position: sticky;
    top: 0;
    padding: 10px 16px;
    background-color: #194039;
    color: #f1f1f1;
    display: flex;
}

nav ul {
    display: inline-block;
    justify-content: space-between;
    float: right;
}


nav ul li {
    text-align: left;
    display: inline-block;
    margin-left: 28px;
}
.openerText {
    text-align: center;
    padding-top: 200px;
}


.parallax {
    
     background-image: url(Assets/hero-80.jpg);
   /* This image was sourced from: Photo by Ketut Subiyanto: https://www.pexels.com/photo/happy-waitresses-watching-tutorials-on-laptop-4350089/ */
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}
#welcome {
    margin-top: 50px;
    margin-bottom: 70px;
    margin-left: 70px;
    margin-right: 70px;

}
#about {
    margin-left: 70px;
    margin-right: 70px;
}

.about {
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;
    color: #0D231F;
}





.aboutDetails {
    padding-left: 30px;
    padding-right: 30px;

}

.aboutImage img {
    border-radius: 30px;
    -webkit-box-shadow: -8px 8px 0 0px #194039;
    box-shadow: -8px 8px 0 0px #194039;
    margin-right: 20px;
    margin-left: 20px;
}
#resources {
    margin-left: 70px;
    margin-right: 70px;
    background-color: #F24738;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
}
#resources h1, #resources h2 {
    color: #EAAB9D;
}



.tips {
    display: flex;
}
.tipDetails h3  , .tipDetails p, .tipDetails a{
    color: #F4EFE6;
}


#tipsBox {
    margin-left: 30px;
}


.tipDetails  {
    margin-left: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
}
#articles ul  {
    display: block;
    list-style-type: none;
}
#articles h3 {
    color: #F4EFE6;
}

#articles ul li a:link   , #articles ul li a:visited{
    color: #F4EFE6;
}

#articles ul li a:hover  , #articles ul li a:active{
    color: #67CBAC;
}


.approach {
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;
}


.approachDetails {
    padding-left: 30px;
    padding-right: 30px;

}

.approachImage img {
    border-radius: 30px;
    -webkit-box-shadow: -8px 8px 0 0px #194039;
    box-shadow: -8px 8px 0 0px #194039;
    margin-right: 20px;
    margin-left: 20px;
}


footer {
    margin-left: 70px;
    margin-right: 70px;
    
}

.footerEdgeBox ul {
    justify-content: space-between;
    border-top: 10px solid #F24738;
    background-color: #F24738;
}

.footerEdgeBox ul li {
    text-align: left;
    display: inline-block;
    margin-left: 30px;
    float: right;
    margin-top: 10px;
    
}
.heroImage img {
    display: inline-block;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    margin-left: 70px;
    margin-right: 70px;
}
.servicesHeader h1 {
    margin-left: 70px;
    margin-right: 70px;

}
.packagesOptions {
    background-color: #D9AA55;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
    border-radius: 20px;
}


#packagesBox {
    display: flex;
    margin-top: 50px;
    margin-left: 70px;
    margin-right: 70px;
    justify-content: space-between;
}
.inset30 {
    padding-left: 30px;
}
.retainerRed {
    background-color: #F24738;
}





#packagesBox {
    display: flex;
    margin-top: 50px;
    margin-left: 70px;
    margin-right: 70px;
    justify-content: space-between;
}

.packagesOptions{
    width: 28%;
}

.packagesOptions h3 {
    margin-bottom: 30px;
    text-align: center;
}

.packagesOptions h4 {
    margin-top: 40px;
    padding-top: 20px;
    color: #35a865b;
    text-align: center;
    border-top: 5px solid rgba(221,216,202,1.00);
    }
.whitefont {
    color: #F7DABA;
}
.margin_20 {
    margin-bottom: 20px;
}

.testimionial {
    border-top: 10px solid #D9AA55;
    margin-top: 70px;
    border-bottom: 5px solid #D9AA55;
    padding-top: 30px;
    padding-bottom: 30px;
    font-family: roboto,san-serif;
    ;
    ;
    display: flex;
}
.testimonialDetails {
    margin-top: 20px;
    margin-bottom: 20px;
}

.testimonialDetails h3 {
    color: #D9AA55;
    font-size: 1.5rem;
    font-weight: 700;
    list-style-type: none;
}
.testimionialDetails ul{
    color: #FFFFFF;
}

.testimionialPhoto img {
    border-radius: 286px;
    -webkit-box-shadow: -4px 0 10px #0D231F;
    box-shadow: -4px 0 10px #0D231F;
    margin-top: 20px;
    margin-right: 30px;
    margin-bottom: 20px;
}
.textWhite {
    color: #F4EFE6;
    display: inline-block;
}