/* .baskervville-regular {
  font-family: "Baskervville", serif;
  font-weight: 400;
  font-style: normal;
}

.baskervville-regular-italic {
  font-family: "Baskervville", serif;
  font-weight: 400;
  font-style: italic;
}

   */

html, body {
    overflow-x: hidden;
    margin:0;
    background-color: #F8F9FF;
}
  
html {
    scroll-behavior:smooth;
}


h1 {
    font-family: "Baskervville", serif;
    font-size: 55px;
    line-height: 1.4;
}

h2 {
    font-family: "Baskervville", serif;
    font-size: 36px;
    line-height: 1.2;
}

h3 {
    font-family: "Baskervville", serif;
    font-size: 30px;  
    line-height: 1.2;
}

h4 {
    font-family: "Baskervville", serif;
    font-size: 25px;
    line-height: 1.2;
  
}

h5 {
    font-family: "Baskervville", serif;
    font-size: 20px;
    line-height: 1.2;
    margin: 0px;
}

p {
    font-family: "Baskervville", serif;
    font-size: 22px;
    line-height: 1.4;
}

.revealUp1{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.25s;
}

.revealUp1.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp1Load{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.25s;
}

.revealUp1Load.active{
    transform: translateY(0);
    opacity: 1;
}

.revealUp2Load{
    position: relative;
    transform: translateY(15px);
    opacity: 0;
    transition: 0.75s all ease-in-out;
    transition-delay: 0.50s;

}

.revealUp2Load.active{
    transform: translateY(0);
    opacity: 1;
}

button {
    padding: 20px 60px;
    background-color: transparent;
    border: 1px solid #FFFFFF;
    text-align: center;
    color: #FFFFFF;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
    cursor: pointer;
    font-size: 30px;
    font-family: "Baskervville", serif;
}

button:hover {
    background-color: #fff;
    color: #194792;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.button2 {
    padding: 5px 60px;
    background-color: transparent;
    border: 1px solid #194792;
    text-align: center;
    color: #194792;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
    cursor: pointer;
    font-family: "Baskervville", serif;
}


.button2:hover {
    background-color: #194792;
    color: #F7F8FA;
    moz-transition: all .9s ease-in-out;
    -o-transition: all .9s ease-in-out;
    -webkit-transition: all .9s ease-in-out;
    transition: all .9s ease-in-out;
}

.noDecoration {
    text-decoration: none;
    color: #ffffff;
    font-size: 20px;
    font-family: "Baskervville", serif;
    font-weight: 400;
    line-height: 1.4;
}

/* Form CSS start */

.formButton {
  padding: 20px 60px;
  background-color: #194792;
  text-align: center;
  color: #FFFFFF;
  moz-transition: all .9s ease-in-out;
  -o-transition: all .9s ease-in-out;
  -webkit-transition: all .9s ease-in-out;
  transition: all .9s ease-in-out;
  cursor: pointer;
  font-size: 30px;
  font-family: "Baskervville", serif;
}

.formButton:hover {
  background-color: transparent;
  color: #194792;
  border: 1px solid #194792;
  moz-transition: all .9s ease-in-out;
  -o-transition: all .9s ease-in-out;
  -webkit-transition: all .9s ease-in-out;
  transition: all .9s ease-in-out;
}

.form {
  width: 100%;
  color: #F5F5F5;
  text-align: left;
  padding: 45px;
  margin-top: -190px;
}

input {
  border: 1px solid #194792;
  filter: drop-shadow(0px 0px 3px rgba(48, 70, 90, 0.4));
}

input {
  font-size: 22px;
}

#name, 
#email,
#address,
#mortgage,
#age {
  width: 100%;
  padding: 17px 15px 10px 15px;
}

::placeholder {
  font-family: "Baskervville", serif;
  font-size: 22px;
}

/* Form CSS end */

/* Start Nav */

.topNav {
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-color: transparent;
    position: fixed;
    width: 100vw;
    height: 130px;
    z-index: 99;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
      "logo logo logo reverse reverse personalization personalization faq faq button button .";
    margin: 0;
    padding: 30px 80px;
    transition: background-color 200ms linear;
    }

  .topNav.scrolled {
    background-color: rgba(25, 71, 146, 0.9) !important;
    transition: background-color 200ms linear;
  }

  #navItem {
    font-size: 20px;
    moz-transition: all .25s;
    -o-transition: all .25s;
    -webkit-transition: all .25s;
    transition: all .25s;
  }

  #navItem:hover {
    color: #CB9D9D;
  }

  
  .navLogo {
    grid-area: logo;
    height: 100%;
    margin: 0;
    padding: 0;
  }

    .logo {
        max-height: 100%;
    }

    .mobile-logo {
        display: none;
    }

  .navReverse {
    grid-area: reverse;
    color: #FFFFFF !important;
    text-align: center;
  }

  .navPersonalization {
    grid-area: personalization;
    text-align: center;
  }

  .navFaq {
    grid-area: faq;
    text-align: center;
  }

  .navButton {
    grid-area: button;
    text-align: center;
    background-color: transparent;
    color: #FFFFFF;
  }

  .topNav .icon {
    display: none;
  }

  .noDecortaion:hover {
    color: #CB9D9D;
  }

  .mobileNav {
    display: none;
  }

/* End Nav */

#headshotLogo {
    margin-top: -90px;
}

/* Start Home CSS */

.home-hero {
    background: linear-gradient(to top, #194792, #195ED2);
    /* background-image: url("/images/hero-background.png");
    background-size: cover;
    background-position: bottom; */
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 10% 35% 15% 40%;
    grid-template-areas: 
      "prehead prehead prehead prehead prehead prehead prehead prehead prehead prehead . ."
      "headline headline headline headline headline headline headline headline headline headline headline ."
      "subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead . ."
      "button button button button . . . . . . . image";
    row-gap: 20px;
    padding: 250px 80px 100px 80px;
}

.home-hero-prehead {
    grid-area: prehead;
    color: #FFFFFF; 
}

.home-hero-headline {
    grid-area: headline;
    color: #FFFFFF;
}

.home-hero-subhead {
    grid-area: subhead;
    color: #FFFFFF;
}

.home-hero-cta {
    grid-area: button;
}

.home-hero-image {
    grid-area: image;
}

.section1 {
  background-color: #F7F8FA;
  background-image: url("/images/s1-background.png");
  background-size: cover;
  background-position: bottom;
  overflow: hidden;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 10% 25% 10% 55%;
  grid-template-areas: 
    ". . text1 text1 text1 text1 text1 text1 text1 text1 . ."
    ". . text2 text2 text2 text2 text2 text2 text2 text2 . ."
    "text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 . ."
    "text4 text4 text4 text4 text4 text4 text4 text4 text4 text4 . .";
  row-gap: 20px;
  padding: 120px 80px;
}

.s1-text1 {
  grid-area: text1;
  color: #194792;
  text-align: center;
}

.s1-text2 {
  grid-area: text2;
  color: #194792;
  text-align: center;
}

.s1-text3 {
  grid-area: text3;
  color: #194792;
  text-align: left;
}

.s1-text4 {
  grid-area: text4;
  color: #194792;
  text-align: left;
}

.section2 {
  background: linear-gradient(to top, #194792, #195ED2);
  /* background-image: url("/images/s2-background.png");
  background-size: cover;
  background-position: bottom; */
  overflow: hidden;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 20% 80%;
  grid-template-areas: 
    "subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead"
    "card1 card1 card1 card1 card2 card2 card2 card2 card3 card3 card3 card3";
  row-gap: 20px;
  padding: 120px 80px 160px 80px;
}

.s2-subhead {
  grid-area: subhead;
  color: #F7F8FA;
  text-align: center;
}

.s2-c1 {
  grid-area: card1;
  text-align: center;
  color: #F7F8FA;
  padding: 45px 25px;
  border: 4px solid #F7F8FA;
  margin: 15px;
}

.s2-c2 {
  grid-area: card2;
  text-align: center;
  color: #F7F8FA;
  padding: 45px 30px;
  border: 4px solid #F7F8FA;
  margin: 15px;
}

.s2-c3 {
  grid-area: card3;
  text-align: center;
  color: #F7F8FA;
  padding: 45px 30px;
  border: 4px solid #F7F8FA;
  margin: 15px;
}

.section3 {
  background-color: #F7F8FA;
  background-image: url("/images/s3-background.png");
  background-size: cover;
  background-position: top;
  overflow: hidden;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40% 40% 20%;
  grid-template-areas: 
    ". . text1 text1 text1 text1 text1 text1 text1 text1 text1 text1"
    ". text2 text2 text2 text2 text2 text2 text2 text2 text2 text2 ."
    ". button button button button button button button button button button .";
  row-gap: 60px;
  padding: 120px 80px 190px 80px;
}

.s3-text1 {
  grid-area: text1;
  text-align: left;
}

.s3-text2 {
  grid-area: text2;
  text-align: center;
}

.s3-button {
  grid-area: button;
  text-align: center;
}

.section4 {
  background: linear-gradient(to top, #194792, #195ED2);
  /* background-image: url("/images/s4-background.png");
  background-size: cover;
  background-position: top; */
  overflow: hidden;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 10% 18% 14% 18% 22% 18%;
  grid-template-areas: 
    ". subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead ."
    "text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 . ."
    ". . . text2 text2 text2 text2 text2 text2 text2 text2 text2"
    "text3 text3 text3 text3 text3 text3 text3 text3 text3 text3 . ."
    ". . . text4 text4 text4 text4 text4 text4 text4 text4 text4"
    "text5 text5 text5 text5 text5 text5 text5 text5 text5 text5 . .";
  row-gap: 20px;
  padding: 120px 80px 290px 80px;
}

.s4-subhead {
  grid-area: subhead;
  text-align: center;
  color: #F7F8FA;
}

.s4-text1 {
  grid-area: text1;
  text-align: left;
  color: #F7F8FA;
}

.s4-text2 {
  grid-area: text2;
  text-align: right;
  color: #F7F8FA;
}

.s4-text3 {
  grid-area: text3;
  text-align: left;
  color: #F7F8FA;
}

.s4-text4 {
  grid-area: text4;
  text-align: right;
  color: #F7F8FA;
}

.s4-text5 {
  grid-area: text5;
  text-align: left;
  color: #F7F8FA;
}

.section5 {
  background-color: #F7F8FA;
  background-size: cover;
  background-position: top;
  overflow: hidden;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 35% 65%;
  grid-template-areas: 
    ". subhead subhead subhead subhead subhead subhead subhead subhead subhead subhead ."
    ". image image image image form form form form form form .";
  row-gap: 20px;
  padding: 120px 80px 250px 80px;
}

.s5-subhead {
  grid-area: subhead;
  color: #194792;
  text-align: center;
}

.s5-image {
  grid-area: image;
  text-align: center;
}

.s5-form {
  grid-area: form;
  color: #194792;
}

.label2 {
  color: #194792;

}

.footer {
  background: linear-gradient(to top, #195ED2, #194792);
  /* background-image: url("/images/footer-background.png");
  background-size: cover;
  background-position: top; */
  overflow: hidden;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 100%;
  grid-template-areas: 
    ". image image image image image image image image image image .";
  row-gap: 20px;
  padding: 120px 80px;
  padding: 120px 80px 120px 80px;
}

.footer-image {
  grid-area: image;
  text-align: center;
}

@media (max-width: 1024px) {

h1 {
    font-family: "Baskervville", serif;
    font-size: 35px;
    line-height: 1.2;
}

h2 {
    font-family: "Baskervville", serif;
    font-size: 32px;
    line-height: 1.2;
}

h3 {
    font-family: "Baskervville", serif;
    font-size: 22px;  
    line-height: 1.2;
}

h4 {
    font-family: "Baskervville", serif;
    font-size: 20px;
    line-height: 1.2;
  
}

h5 {
    font-family: "Baskervville", serif;
    font-size: 20px;
    line-height: 1.2;
    margin: 0px;
}

p {
    font-family: "Baskervville", serif;
    font-size: 18px;
    line-height: 1.4;
}
  

.form {
  width: 100%;
  color: #F5F5F5;
  text-align: left;
  padding: 45px 10px;
  margin-top: -190px;
}

#name, 
#email,
#address,
#mortgage,
#age {
  width: 85%;
  padding: 17px 15px 10px 15px;
}
  
  .topNav .navReverse, .topNav .navPersonalization, .topNav .navFaq, .topNav .navButton {
      display: none;
  }

  .navButton {
      display: none;
  }
  
  
  .topNav.scrolled {
      background-color: rgba(25, 71, 146, 0.9) !important;
      transition: background-color 200ms linear;
    }     

  .topNav {
      display: grid;
      justify-content: center;
      align-items: center;
      padding: 15px;
      background-color: rgba(33, 42, 51, 0.9) !important;
      position: fixed;
      width: 100vw;
      height: 70px;
      z-index: 99;
      grid-template-columns: 50% 45% 5%;
      grid-template-rows: 100%;
      grid-template-areas: 
        "logo hamburger .";
      margin: 0;
      padding: 0;
  }
      
  .logo {
      display: none;
  }
  
  .mobile-logo {
      display: block;
      position: absolute;
      max-height: 70px;
  }
  
  .mobileNav {
      display: block;
      
  }
  
  .menuItem {
      display: block;
      margin: 2rem 2rem;
      font-size: 1.8rem;
      font-family: 'Raleway', sans-serif;
      color: white;
      text-decoration: none;
  }
  
  .menuItem2 {
      display: block;
      margin: 0.5rem 2rem;
      font-size: 1rem;
      font-family: 'Raleway', sans-serif;
      color: white;
      text-decoration: none;
  }
  
  .material-icons {
      background-color: transparent;
      color: #ffffff;
  }
  
  .hamburger {
      position: fixed;
      z-index: 100;
      top: 1rem;
      right: 1rem;
      padding: 4px;
      cursor: pointer;
  }
  
  .closeIcon {
      display: none;
      font-family: 'Raleway', sans-serif;
      font-size: 22px;
      text-align: left;
      margin-right: 5px;
  }
  
  .menu {
      position: fixed;
      transform: translateY(-100%);
      transition: transform 0.2s;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      background-color: rgba(33, 42, 51, 0.9) !important;
      color: white;
      list-style: none;
      padding-top: 4rem;
  }
  
  .showMenu {
      transform: translateY(0);
      background-color: rgba(33, 42, 51, 0.9) !important;
      color: #ffffff;
      backdrop-filter: blur(50px);
  }
  
  .menuIcon {
      padding: 0;
      margin: 0;
      background-color: transparent;
      border: 0;
      font-size: 22px;
      text-align: center;
  }
  
  .noDecoration {
      text-decoration: none;
      color: #ffffff;
      font-size: 18px;
      font-family: 'Raleway', sans-serif;
      line-height: 1.4;
  }


.home-hero {
  background-color: #F7F8FA;
  background-image: url("/images/hero-background.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: grid;
  justify-content: center;
  grid-template-columns: 100%;
  grid-template-rows: 8% 26% 16% 22% 28%;
  grid-template-areas: 
    "prehead"
    "headline"
    "subhead"
    "button"
    "image";
  row-gap: 20px;
  padding: 120px 20px 100px 20px;
}

.section1 {
background-color: #F7F8FA;
background-image: url("/images/s1-background.png");
background-size: cover;
background-position: right;
overflow: hidden;
display: grid;
justify-content: center;
grid-template-columns: 100%;
grid-template-rows: 10% 25% 10% 55%;
grid-template-areas: 
  "text1"
  "text2"
  "text3"
  "text4";
row-gap: 20px;
padding: 120px 20px;
}

.section2 {
background-color: #F7F8FA;
background-image: url("/images/s2-background.png");
background-size: cover;
background-position: bottom;
overflow: hidden;
display: grid;
justify-content: center;
grid-template-columns: 100%;
grid-template-rows: 17% 28% 28% 28%;
grid-template-areas: 
  "subhead"
  "card1"
  "card2" 
  "card3";
row-gap: 20px;
padding: 120px 20px 160px 20px;
}

.section3 {
background-color: #F7F8FA;
background-image: url("/images/s3-background.png");
background-size: cover;
background-position: top;
overflow: hidden;
display: grid;
justify-content: center;
grid-template-columns: 100%;
grid-template-rows: 40% 40% 20%;
grid-template-areas: 
  "text1"
  "text2"
  "button";
row-gap: 60px;
padding: 120px 20px 190px 20px;
}

.section4 {
background-color: #F7F8FA;
background-image: url("/images/s4-background.png");
background-size: cover;
background-position: top;
overflow: hidden;
display: grid;
justify-content: center;
grid-template-columns: 100%;
grid-template-rows: 5% 19% 15% 19% 23% 19%;
grid-template-areas: 
  "subhead"
  "text1"
  "text2"
  "text3"
  "text4"
  "text5";
row-gap: 20px;
padding: 120px 20px 290px 20px;
}

.section5 {
background-color: #F7F8FA;
background-size: cover;
background-position: top;
overflow: hidden;
display: grid;
justify-content: center;
grid-template-columns: 100%;
grid-template-rows: 30% 60% 10%;
grid-template-areas: 
  "subhead"
  "form"
  "image";
row-gap: 40px;
padding: 120px 20px 250px 20px;
}

}