:root {
    --clr-primary-blue: #201C55;
    --clr-accent-yellow: #F1A81E;
    
    --clr-neutral-100: #F2F1F1;
    --clr-neutral-900: #2F2D2D;    
    
    --ff-primary: 'Montserrat', sans-serif;
    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);

    --fw-regular: 400;
    --fw-semibold: 700; 
    --fw-bold: 900;   
}

.fc-primary {
  color: var(--clr-primary-blue);
}

.bg-accent {
  background-color: var(--clr-accent-yellow);
}

*, *::before, *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
    padding: 0;
  }
  html, body {
    height: 100%;
    font-family: 'Montserrat', sans-serif;
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  input, button, textarea, select {
    font: inherit;
  }
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  #root, #__next {
    isolation: isolate;
  }

  a {
    list-style: unset;
    text-decoration: none; 
    color: var(--clr-primary-blue); 
  }

  a:link, a:visited, a:hover, a:active {
    color: var(--clr-primary-blue);
  }

  .bg-img {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(/images/bg-estate.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    z-index: -5;
    overflow-y: scroll;
  }

  .logo {
    display: flex;
    position: relative;
    width: 50%;
    align-self: flex-start;
    margin: 0 40px 40px 20px; 
  }

  .border-right {
    /* background: rgb(32,28,85); */
    border-image: 2px solid linear-gradient(0deg, rgba(32,28,85,0) 9%, rgba(32,28,85,1) 52%, rgba(32,28,85,0) 92%);
  }

  

  .nav-item {
    color: var(--clr-primary-blue);
  }


  .nav-hover {
    cursor: pointer;
    padding: 12px 25px;
  }

  .nav-hover:hover {
    background-color: var(--clr-accent-yellow);
  }

  .nav-hover:active {
    background-color: var(--clr-accent-yellow);
  }

  .display-img {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .title-yellow {
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-accent-yellow);
  }

  .sub-heading {
    font-size: 0.75rem;
    color: var(--clr-primary-blue);
    font-weight: 700;
  }

  .btn-primary {
    background-color: var(--clr-primary-blue);
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    border: unset;
    border-radius: 0;
    padding: 15px 30px;
    min-width: 140px;
  }

  .btn-primary:hover {
    background-color: var(--clr-accent-yellow);
    color: var(--clr-primary-blue);
  }

  .btn-simple {
    border: 2px solid;
    border-color: var(--clr-primary-blue);
    color: var(--clr-primary-blue);
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 0;
    padding: 15px 30px;
    min-width: 140px;
  }

  .btn-simple:hover {
    background-color: #FFF;
  }

  .social-icons {
    display: flex;
  }

  .spacer {
    height: 100px;
  }

  .service-icons {
    display: block;
    aspect-ratio: 1 / 1;
    width: 3rem;
  }

  .contact-icons {
    display: block;
    aspect-ratio: 1 / 1;
    width: 2rem;
    margin-right : 5px;
  }

  @media (max-width:576px) {
   .bg-img {
    padding-top: 30px;
   }
   .spacer {
    height: 30px;
   }
   .social-icons {
    visibility: hidden;
   }
   .social-icons-2 {
    /* visibility: hidden;      */
    display:block;
   }
   
  }

  @media (min-width:577px) {
    .bg-img {
      padding-top: 50px;
     }
     .spacer {
      height: 30px;
    }
    .social-icons {
      visibility: hidden;
    }
    .social-icons-2 {
      /* visibility: hidden;      */
      display: none;
     }
  }

  @media (min-width:768px) {
    .bg-img {
      padding-top: 50px;
     }
     .spacer {
      height: 50px;
    }
    .social-icons {
      visibility: hidden;
     }
     .social-icons-2 {
      /* visibility: hidden;      */
      display: none;
     }
  }
    
  @media (min-width:992px) {
    .bg-img {
      padding-top: 70px;
     }
     .spacer {
      height: 100px;
    }
     .display-img {
      width: 75%;      
    }
    .social-icons {
      visibility: visible;
     }
     .social-icons-2 {
      /* visibility: hidden;      */
      display: none;
     }
  }