.libre-baskerville-regular {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: normal;
}

.libre-baskerville-bold {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-style: normal;
}

.libre-baskerville-regular-italic {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: italic;
}

.nunito-sans-normal {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
}

.modal-backdrop{
  --bs-backdrop-opacity: .8;
}

.navbar{
  background-color: #0e304c;
}

.navbar-brand{
  font-size: 1.4rem;
  letter-spacing: 1.3px;
}

.nav-link{
  color: #ffffff;
  font-size: 1.1rem;
}

#home{
  height: 80vh;
  min-height: 600px;
}

#overlay{
  height: 100%;
  width: 100%;
  background: radial-gradient(circle at 24.1% 68.8%, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 99.4%);
  z-index: 13;
  opacity: .8;
}

#home img{
  object-fit: cover;
  object-position: 50% 50%;
  height: 100%;
  width: 100%;
}

#home .row{
  z-index: 15;
}

.header{
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
}

.header > div > p{
  font-size: 1.2rem;
}

.header h1{
  font-size: 2.8rem;
}

.header a{
  background-color: #00b4d8;
  text-decoration: none;
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
}

.header a:hover{
  background-color: #0077b6;
}

h2{
  font-size: 1.7rem;
  color: #03045e;
}

#about p{
  font-size: 1.1rem;
  line-height: 1.7;
}

#about h3{
  color: #03045e;
  font-size: 1.3rem;
}

#about img, .modal img, #services img{
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

#about a{
  color: #555555;
}

#sandler{
  background-color: #f6f6f6;
  background-image: url('../assets/about-bg.png');
  background-repeat: no-repeat;
  background-position: cover;
}

.aside{
  background-color: #caf0f8;
}

.aside h3{
  color: #03045e;
  font-size: 1.3rem;
}

.aside p{
  font-size: .9rem;
}

#description{
  background-color: #072f5f;
  color: #ffffff;
}

#description svg{
  width: 100px;
}

#services{
  background-image: linear-gradient(to right, #efefefcc, #efefefff), url('../assets/happy-multi-generation-asian-family-holding-hands-walking-beach-together-summer-sunset-smiling-big-family-parents-with-child-boy-girl-enjoy-outdoors-lifestyle-travel-vacation.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#services .accordion-item, .accordion-button{
  background-color: transparent;
}

#services button{
  font-size: .8rem;
}

.accordion-button:not(.collapsed){
  background-color: #dddddd;
}

.accordion-button:focus{
  box-shadow: none;
}

#services .card{
  border: 0;
}

#services h4{
  color: #03045e;
  font-size: 1.2rem;
}

#services h5{
  font-size: 1.1rem;
}

#services ul, #services p{
  font-size: .8rem;
}

#carousel {
    transition: opacity 0.5s ease-in-out; 
    opacity: 1; 
}

#contact, #contact a, footer, footer a{
  background-color: #0e304c;
  color: #aaaaaa;
}

#contact li, footer{
  font-size: .8rem;
}

#contact iframe{
  width: 100%;
  height: 250px;
}

@media (min-width: 576px){
  .header{
    width: 560px;
  }

  .header > div > p{
    font-size: 1.4rem;
  }

  .header a{
    font-size: 1.4rem;
  }
}

@media (min-width: 768px){
  .header{
    width: 730px;
  }

  .header > div > p{
    font-size: 1.8rem;
  }

  .header h1{
    font-size: 3rem;
  }

  .header a{
    font-size: 1.8rem;
  }

  #services .card .row img{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  #contact li{
    padding-bottom: .6rem;
  }

  #about p{
    font-size: 1.3rem;
  }

  #services .accordion-button{
    font-size: 1.2rem;
  }

  #services .accordion-body > *{
    font-size: 1.2rem;
  }
}

@media (min-width: 992px){
  #home{
    height: 95vh;
    min-height: 600px;
  }

  .header{
    width: 840px;
  }

  .header > div > p{
    font-size: 2rem;
  }

  .header h1{
    font-size: 3.2rem;
  }

  .header a{
    font-size: 1.8rem;
  }
}

@media (min-width: 1200px){
  #home{
    height: 60vh;
  }

  .header > div > p{
    font-size: 2.2rem;
  }

  .header h1{
    font-size: 3.4rem;
  }

  .header a{
    font-size: 1.8rem;
  }

  #about #description p{
    font-size: 1rem;
  }

  #about #description svg{
    width: 60px;
  }

  #about #description h4{
    font-size: 1.1rem;
  }

  #about #description p{
    font-size: .9rem;
  }

  #contact iframe{
    height: 400px;
  }
}