:root {
    --color_blue: #252c6b;
    --color_green: #57ac4e;
    --font_body: 'Open Sans', sans-serif;
    --font_secondary: 'Oswald', sans-serif;
    --font_tertiary: 'Cormorant Garamond', serif;
    ;
  }

  body {
    font-family: var(--font_body);
    line-height: 1.25;
  }

  p {
    color: var(--foreground_blue, var(--color_blue));
    font-size: 18px;
  }

  .pre-wrap {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
  }

  .text-col-wrap {
    max-width: 30em;
  }

  .quote-wrap {
    max-width: 55ch;
  }

  .text-align-center {
    text-align: center !important;
  }

  .vertical-divider {
    border-left: solid 3px var(--color_green);
    height: 100%;
    min-height: 300px;

    @media (max-width: 768px) {
      border-left: none;
      border-top: solid 3px #57ac4e;
      height: auto;
      min-height: 0;
      margin: 30px 0;
    }
  }

  /* Template Fix -------------------------------
  ----------------------------------------------- */

  .slick-dots {
    display: none;
  }

  div.panel {
    padding: 10px 18px;
    display: none;
    background-color: #fff;
  }

  #container[data-masthead-location="logo-left"] #navigationContainer .header_masthead {
    padding-top: 1px;
  }

  #container[data-masthead-location="logo-left"] #navigation,
  #container[data-masthead-location="logo-right"] #navigation {
    max-width: 1200px;
  }

  #navigation ul.nav_ul li a {
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    font-family: var(--font_secondary);
  }

  #media {

    .item-wrapper {
      align-items: center;
    }

    p {
      font-size: 18px;
      line-height: 1.5;
      font-family: var(--font_secondary);
      align-items: center;
    }

    .item h2 {
      font-family: var(--font_secondary);
      align-items: center;
    }
  }

  #content .map-address h2 {
    padding: 0px;
  }

  /* Page Title ---------------------------------
  ----------------------------------------------- */

  #page-title-contact-strip .page-title,
  #page-title-contact-strip .page-title h1,
  #page-title-contact-strip .wrapper .page-title {
    display: none;
  }

  #CustomTitle,
  body.agents_list #CustomTitle,
  .contact_us #content h1,
  .lc_page,
  body.agents_list #content>h1,
  #content h1 {
    color: var(--color_blue);
    font-family: var(--font_secondary);
    font-size: 43.2px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    margin-block-end: 32px;
  }

  #page-title-contact-strip {
    background: url(/files/45479/bkgd_fresno.png) !important;
    border-top: 2px solid var(--color_blue);

    .wrapper {
      padding: 2px 0;
    }

    .contact .contact-toggle {
      background: none;
      color: #fff;
      padding: 12px 20px;

    }
  }

  #content .contactMessageHeading,
  #content .officeName,
  #cn_container h2 a {
    color: var(--color_blue);
    margin-bottom: 12px;
    font-family: var(--font_secondary);
  }

  #content h3 {
    margin-bottom: 10px;
    font-size: 20px;
    color: var(--color_blue);
    font-family: var(--color_blue);
  }

  /* Other Headers  -----------------------------
  ----------------------------------------------- */

  h2 {

    .green,
    .blue {
      font-family: var(--font_secondary);
      text-transform: uppercase;
      font-weight: 500;
      letter-spacing: 0;
    }

    .green {
      color: var(--color_green);
      font-size: 28px;
    }

    .blue {
      color: var(--color_blue);
      font-size: 2em;
    }
  }

  h3 {

    .green,
    .blue {
      font-family: var(--font_secondary);
      text-transform: uppercase;
    }

    .green {
      color: var(--color_green);
    }

    .blue {
      color: var(--color_blue);
      font-size: 22px;
      font-weight: 700;
      line-height: 1.5;
    }
  }

  /* Content Area Type  -------------------------
  ----------------------------------------------- */

  #cn_container {
    border-top: 1px dotted var(--color_blue);
    background: url(/files/45479/bkgd_fresno.png) !important;
  }

  #cn_container .feat_wrapper {
    background: none;
    background-color: inherit;
  }

  /*CHANGES THE PADDING AT THE BOTTOM OF THE MAIN CONTENT AREA SO IT DOESNT HAVE A GIANT SPACE BEFORE THE FOOTER ALSO increases content area to max at 1200 instead of 900*/
  #contentWrapper {
    background: none;
  }

  /*CHANGE COLOR OF MAIN CONTENT AREA*/
  #contentContainer {
    background: #fff;
  }

  #content {


    ul,
    ol,
    p,
    .content_list li {
      padding-bottom: 0;
      color: #666;
      line-height: 1.25;
      font-size: 20px;
    }

 p {
      font-size: 1.5em;
      font-family: var(--font_tertiary);
      font-weight: 600;
    }

    .three_column_group p,
    .two_column_group p {
      color: var(--color_blue) !important;
      font-size: 1em !important;
      font-family: var(--font_tertiary);
      font-weight: 600;
    }


    .three_column_group h2,
    .two_column_group h2 {
      font-family: var(--font_secondary);
      font-size: 26px;
      color: #000;
    }

    .three_column_group h3,
    .two_column_group h3 {
      font-family: var(--font_secondary);
      font-size: 20px !important;
      color: var(--color_blue);
      margin-bottom: 1.5em !important;
    }
  }

  #quote-text-green p {
    color: var(--color_green) !important;
    font-family: var(--font_tertiary);
    font-weight: 400 !important;
    font-size: 42px !important;
    line-height: 1.3 !important;
  }

  #content a,
  #cn_container a,
  #content .content_list li a {
    color: var(--color_green);
  }

  hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(70, 163, 71, 0.75), rgba(0, 0, 0, 0));
  }

  /* Buttons  -----------------------------------
  ----------------------------------------------- */

  .button {
    background-color: var(--color_blue);
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    border-radius: 12px;
    display: inline-block;
    font-size: 16px;
  }

  .contact-form-button {
    background-color: var(--color_blue);
    font-family: var(--font_secondary);
  }

  .agent_list .agent_list_item button {
    background-color: var(--color_blue);
    font-family: var(--font_secondary);
  }

  /*callout button*/
  #media .item .btn {
    font-family: var(--font_secondary);
  }

  .btn-pill-blue,
  .btn-pill-green {
    font-family: var(--font_body);
    border: none;
    padding: 12px 30px;
    text-transform: uppercase;
    border-radius: 50px;
    color: #fff !important;
  }

  .btn-pill-blue {
    background-color: var(--color_blue);

    &:hover,
    &:focus {
      color: var(--color_blue) !important;
      background-color: #fff !important;
      border: 2px solid var(--color_blue);
    }
  }

  .btn-pill-green {
    background-color: var(--color_green);

    &:hover,
    &:focus {
      color: var(--color_green) !important;
      background-color: #fff !important;
      border: 2px solid var(--color_green);
    }
  }

  /* Hero  --------------------------------------
  ----------------------------------------------- */

  .heroSlide .slideText {
    font-weight: bolder;
    font-size: 36px;
    text-shadow: 2px 2px 8px #000000, 2px 2px 8px #000000;
    max-width: 50%;
    font-family: var(--font_secondary);
    line-height: 1.25em;
  }

  .hero-video-section {
    position: relative;
    width: 100%;
    height: auto;
    max-height:80vh;
    min-height: 300px;
    overflow: hidden;
    background-color: #000;
aspect-ratio: 16 / 9;
    @media (prefers-reduced-motion: reduce) {
      background-image: url('/files/45479/yosemite-poster.jpg');
      background-size: cover;
      background-position: center;
    }
  }

  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    @media (prefers-reduced-motion: reduce) {
      display: none;
    }

    @media (max-width: 767px) {
      object-position: left;
    }
  }

  #thumbnailVideo {
    pointer-events: none;
  }

  .video-controls {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 3;
    display: flex;
    gap: 0.5rem;
  }

  .video-control-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    padding: 0;

    &:hover {
      background: rgba(0, 0, 0, 0.8);
      transform: scale(1.08);
    }
  }

  .video-control-bt .video-control-btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    background: rgba(0, 0, 0, 0.8);
  }

  .video-control-btn[hidden] {
    display: none;
  }

  /* Accordion  ---------------------------------
  ----------------------------------------------- */

  button.accordion {
    background-color: #FFF;
    color: var(--color_blue);
    cursor: pointer;
    padding: 5px;
    width: 60%;
    border-top: 1px dotted #D5DEF4;
    text-align: center;
    outline: none;
    font-size: 20px;
    transition: 0.4s;
    font-family: var(--font_secondary);
    text-transform: uppercase;
    font-weight: 900;

    &.active,
    :hover {
      background-color: #D5DEF4;
    }
  }

  .accordion-header {
    margin-bottom: 0;
  }

  .accordion-item {
    border: none;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 0;

    &:last-child {
      border-bottom: none;
    }
  }

  .accordion-button {
    background-color: transparent;
    color: var(--color_blue);
    font-family: var(--font_secondary);
    font-size: 20px;
    font-weight: 500;
    padding: 1.5rem 0;
    box-shadow: none;
    text-transform: none;

    @media (max-width: 991px) {
      font-size: 18px;
    }

    &::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23252c6b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      width: 1.5rem;
      height: 1.5rem;
    }

    &:not(.collapsed) {
      background-color: transparent;
      color: var(--color_green);
      box-shadow: none;

      &::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2357ac4e'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      }
    }

    &:focus {
      box-shadow: none;
      border-color: transparent;
    }
  }

  .accordion-body {
    padding: 1rem 0 1.5rem 0;
    font-family: var(--font_body);
    font-size: 16px;
    line-height: 1.6;
    color: #000;
  }

  /* Newsletter  --------------------------------
  ----------------------------------------------- */

  .newsletter-title {
    color: #fff !important;
    font-family: var(--font_secondary);
    font-size: 2.5em;
    font-weight: 500;
    line-height: 1.2 !important;
    text-transform: none;

    @media (max-width: 991px) {
      font-size: 2em;
    }

    @media (max-width: 767px) {
      font-size: 1.5em;
    }
  }

  .newsletter-link {
    text-decoration: none;
    display: block;

    &:hover {
      text-decoration: none;
    }
  }

  .newsletter-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);

      .newsletter-image {
        transform: scale(1.05);
      }

      .newsletter-overlay {
        opacity: 1;
      }
    }
  }

  .newsletter-image {
    display: block;
    transition: transform 0.3s ease;
  }

  .newsletter-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: color-mix(in srgb, var(--color_blue) 90%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .newsletter-view-text {
    color: #fff;
    font-family: var(--font_secondary);
    font-size: 1.5em;
    text-transform: uppercase;
    letter-spacing: 1px;

    @media (max-width: 767px) {
      font-size: 1.2em;
    }
  }

  /* Contact  -----------------------------------
  ----------------------------------------------- */

  .location-card {
    background-color: #f8f9fa;
    padding: 2.5rem;
    border-radius: 8px;
    height: 100%;
    transition: box-shadow 0.3s ease;

    @media (max-width: 991px) {
      padding: 2rem;
      margin-bottom: 2rem;
    }

    @media (max-width: 767px) {
      padding: 1.5rem;
    }

    &:hover {
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
  }

  .location-title {
    text-align: center;
    border-bottom: 3px solid var(--color_green);
    padding-bottom: 1rem;

    .green {
      font-size: 24px;

      @media (max-width: 767px) {
        font-size: 20px;
      }
    }
  }

  .location-details {
    text-align: center;

    p {
      margin-bottom: 1rem;
    }

    strong {
      color: var(--color_blue);
      font-family: var(--font_secondary);
      font-size: 18px;
      text-transform: uppercase;

      @media (max-width: 767px) {
        font-size: 16px;
      }
    }
  }

  .location-address,
  .location-phone,
  .location-email,
  .location-hours {
    font-size: 16px;
    line-height: 1.6;
  }

  .location-email a {
    color: var(--color_green);
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .location-phone a:hover,
  .location-email a:hover {
    color: var(--color_blue);
    text-decoration: underline;
  }

  #locations .location-phone {
    color: var(--color_blue) !important;
  }

  /* Team List  ---------------------------------
  ----------------------------------------------- */

  .newcontainer {
    margin-bottom: 10px;
  }

  ul.agent_list {
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  body.agents_list #content a {
    color: var(--color_green) !important;
  }

  .agent_list .agent_list_item {

    h2 {
      text-transform: none;
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 20px;
      color: var(--color_blue);
      font-family: var(--font_secondary);
      margin-top: 0.5em !important;
    }

    button {
      background-color: var(--color_blue) !important;
    }
  }

  #services {

    h1 {
      color: var(--color_blue);
      font-size: 3em;
      font-weight: 500;
      font-family: var(--font_secondary);
      letter-spacing: 0px;
    }

    h2 .blue {
      color: var(--color_blue);
      font-size: 1.5em;
      font-weight: 500;
      font-family: var(--font_secondary);
      letter-spacing: 0px;

      @media (max-width: 768px) {
        font-size: 1.5em;
      }
    }

    p span {
      color: var(--color_green);
    }

    img {
      width: 100px;
      height: 100px;
      margin-bottom: 20px;
    }
  }

  .lead {
    color: var(--color_blue);
    font-weight: 400;
  }

  /* Scroll Anime  ------------------------------
  ----------------------------------------------- */

#services {
  .container {
    opacity: 0;
    transform: translateY(60px);
    animation: service-reveal 0.8s ease-out forwards;

    &:nth-child(1) { animation-delay: 0s; }
    &:nth-child(2) { animation-delay: 0.1s; }
    &:nth-child(3) { animation-delay: 0.15s; }
    &:nth-child(4) { animation-delay: 0.2s; }
    &:nth-child(5) { animation-delay: 0.25s; }
    &:nth-child(6) { animation-delay: 0.3s; }
    &:nth-child(7) { animation-delay: 0.35s; }
  }
}

@keyframes service-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #services .container {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

  /* Video Container  ---------------------------
  ----------------------------------------------- */

  #videoContainer {
    font-size: 0;
    border-top: 1px dotted #1B2A5C;

    .section-wrapper {
      background: none !important;
    }

    .title-subtitle {

      h2,
      h3 {
        color: inherit;
        font-family: var(--font_secondary);
        font-weight: 400;
        margin-top: 6px;
      }

      h2 {
        font-size: 30px;
      }

      h3 {
        font-size: 24px;
      }
    }
  }

  /* Footer  ------------------------------------
  ----------------------------------------------- */
  #footerContainer {
    border-top: 1px solid var(--color_blue);
    background-color: #919dbf;
  }

  #footer {
    padding: 50px 0;

    * {
      color: #000 !important;
    }

    a {
      text-decoration: underline;
    }
  }

  .custompage_individuals #contentWrapper {
        max-width: 100%;

  }