html{
    scroll-padding-top: 50px;
  }
  
  body{
      background-image: url('images/textured_background.jpg');
      background-repeat: repeat;
      background-size: 500px 500px;
  }
  
  /* ::selection {
  color: black;
  background: rgb(178, 233, 233);
  } */
  
  
  
  
  /* --------------------------------- FIXED CONTACT BUTTONS --------------------------------- */
  .fixed-contact-buttons{
    bottom: 0;
    z-index: 1;
    border: 0;
    border-radius: 50%;
    border: 2px solid #ffffff00;
    transition: .3s;
  }

  .fixed-contact-buttons:hover{
    border-color: #f59e3b;
    padding: 10px;
  }

  .fixed-contact-buttons:first-of-type{
    left:0;
  }

  .fixed-contact-buttons:last-of-type{
    right:0;
  }

  .fixed-contact-buttons a{
    background-color: #d18f44b3;
    border-radius: 50%;
    transition: .5s;
  }
  
  .fixed-contact-buttons:hover a{
    background-color: #f59e3b;
  }

  .fixed-contact-buttons:first-of-type img{
    animation: phone-ringing-animation .5s infinite;
  }

  .fixed-contact-buttons img{
    width: 25px;
  }

@keyframes phone-ringing-animation{
    0% {transform:rotate(-10deg);}
    50% {transform:rotate(10deg);}
    100% {transform:rotate(-10deg);}
}
  
  
  
  
  /* --------------------------------- NAVBAR --------------------------------- */
  #navbar{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.336);
    font-size: 16px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    white-space: nowrap;
  }
  
  #navbar img{
    width: 120px;
  }
  
  
  
  
  
  /* --------------------------------- MAIN --------------------------------- */
  #main{
      background-image: url('images/brown_cat.jpg');
      background-position: bottom;
      background-repeat: no-repeat;
      background-size: cover;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
      z-index: 2;
  }
  
  #main > img{
      width: 75%;
      margin-bottom: 48px;
  }
  
  #main > p{
      font-size: 35px;
      font-weight: 500;
      color: #A1A0A1;
      width: 20%;
      line-height: 45px;
      margin-top: 90px;
      font-family: 'Rochester', cursive;
  }
  
  #main > div > p{
      font-size: 22px;
      font-family: 'Work Sans', sans-serif;
      font-weight: 300;
      color: white;
  }
  
  #main > div{
      bottom: 30px; 
      right: 50%;
      transform: translateX(50%);
  }
  
  #main > div > img{
      width: 16%;
  }
  
  #main > div > p,
  #main > div > img{
      animation-name: fade_text;
      animation-duration: 4s;
      animation-iteration-count: infinite;
  }
    
  @keyframes fade_text {
      0% {opacity: 0.3;}
      50% {opacity: 0.8;}
      100% {opacity: 0.3;}
  }
  
  
  
  
  
  /* --------------------------------- ABOUT --------------------------------- */
  #about{
      font-size: 16px;
      font-family: 'Work Sans', sans-serif;
      font-weight: 400;
  }
  
  #about h2{
      font-size: 38px;
      font-family: 'Bebas Neue';
  }
  
  
  
  
  
  /* --------------------------------- SERVICES --------------------------------- */
  #services{
      background-color: #fdf2ed;
      background-position: right bottom;
      background-image: url('images/paw_trail.png');
      background-repeat: no-repeat;
      background-attachment: fixed; 
      background-size: 450px 450px;
      font-weight: 400;
      font-size: 16px;
      font-family: 'Work Sans', sans-serif;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  
  #services h2{
      font-size: 38px;
      font-family: 'Bebas Neue';
  }
  
  #services th{
      font-size: 18px;
  }
  
  #services tbody tr{
      border-bottom: 1px solid #c4c4c4;
  }
  
  #services .free{
      font-weight: 600;
      color:rgb(8, 177, 59);
  }
  
  #services form input:last-of-type{
      background-color: #ffc439;
      width: 90%;
      font-family: 'Futura';
      font-size: 22px;
      font-weight: bold;
      font-style: italic;
      font-display: swap;
      border: 0;
      color: #2C2E2F;
  }
  
  #services form input:last-of-type:hover{
      background-color: #f5bd3b;
  }
  
  #services form label{
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: initial;
      user-select: none;
      cursor: default;
  }
  
  @font-face {
      font-family: 'Futura';
      src:url('local_fonts/Futura-BoldItalic.woff') format('woff'),
       url('local_fonts/Futura-BoldItalic.ttf') format('truetype');
      font-weight: bold;
      font-style: italic;
      font-display: swap;
  }
  
  
  
  
  
  /* --------------------------------- SERVICE AREA --------------------------------- */
  #service_area{
      font-weight: 400;
      font-size: 16px;
      font-family: 'Work Sans', sans-serif;
  }
  
  #service_area h2{
      font-size: 38px;
      font-family: 'Bebas Neue';
  }
  
  #service_area ul{
      list-style-type: none;
  }
      
  #service_area li{
      cursor: pointer;
  }
  
  #service_area [data-state] img{
      width: 10px;
  }
  
  #service_area [data-state="active"] img{
      width: 14px;
  }
  
  #service_area [data-state="active"]{
      font-weight: 600;
      margin-top: 5px; 
      margin-bottom: 5px; 
  }
  
  #embed_map{
      width: 100%;
  }
  
  #embed_map iframe{
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      height: 450px;
      border: 0;
  }
  
  
  
  
  
  /* --------------------------------- CLIENT TESTIMONIALS --------------------------------- */
  #testimonials{
      background-color: #fdf2ed;
      background-position: right bottom;
      background-image: url('images/paw_trail.png');
      background-repeat: no-repeat;
      background-attachment: fixed; 
      background-size: 450px 450px;
      font-weight: 500;
      font-size: 16px;
      font-family: 'Work Sans', sans-serif;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  
  #testimonials h2{
      font-size: 38px;
      font-family: 'Bebas Neue';
  }
  
  #testimonials small{
      font-weight: 400;
  }
  
  
  
  
  
  /* --------------------------------- MEMBERSHIPS & ASSOCIATIONS --------------------------------- */
  #memb_and_assoc h2{
      font-size: 38px;
      font-family: 'Bebas Neue';
      font-weight: 400;
  }
  
  #memb_and_assoc img{
      width: 100%;
  }
  
  
  
  
  
  /* --------------------------------- CONTACT --------------------------------- */
  #contact{
      font-weight: 500;
      font-size: 16px;
      font-family: 'Work Sans', sans-serif;
  }
  
  #contact h2{
      font-size: 38px;
      font-family: 'Bebas Neue';
  }
  
  #contact ul{
      list-style-type: none;
  }
  
  #contact a{
      text-decoration: none;
      color: black;
  }
  
  #contact img{
      width: 18px;
  }
  
  
  
  
  
  /* --------------------------------- FOOTER --------------------------------- */
  footer{
      font-size: 12px;
  }
  
  footer a{
      color: #2C2E2F;
  }
    
    
    
    
    
  /* --------------------------------- RESPONSIVE WIDTH --------------------------------- */
  
  @media (min-width: 768px){
      
      /* ------------- MAIN ------------- */
      #main{
          background-image: url('images/sitted_cat.jpg');
          height: 100vh;
          background-position: bottom left;
      }
  
      #main > img{
          width: 50%;
      }
  
      #main > div > img{
          width: 10%;
      }
  
  
  
      /* ------------- ABOUT ------------- */
      #about{
          font-size: 18px;
      }
  
      #about h2{
          font-size: 60px;
      }
  
      #about p{
          width: 50%;
      }
  
  
  
      /* ------------- SERVICES ------------- */
      #services{
          background-size: 40%;
          font-size: 18px;
      }
  
      #services h2{
          font-size: 60px;
      }
  
      #services table{
          width: 75%;
      }
  
      #services th{
          font-size: 20px;
      }
  
  
  
      /* ------------- SERVICE AREA ------------- */
      #service_area{
          font-size: 18px;
      }
  
      #service_area h2{
          font-size: 60px;
      }
  
      #embed_map{
          width: 75%;
      }
  
      #embed_map iframe{
          height: 60vh;
      }
      
      #services form input:last-of-type{
          width: 50%;
      }
  
  
  
      /* ------------- CLIENT TESTIMONIALS ------------- */
      #testimonials{
          background-size: 40%;
          font-size: 18px;
      }
  
      #testimonials h2{
          font-size: 60px;
      }
  
      #testimonials p{
          width: 50%;
      }
  
  
  
      /* ------------- MEMBERSHIPS & ASSOCIATIONS ------------- */
      #memb_and_assoc h2{
          font-size: 60px;
      }
  
      #memb_and_assoc img{
          width: 25%;
      }
  
  
  
  
      /* ------------- CONTACT ------------- */
      #contact{
          font-size: 18px;
      }
  
      #contact h2{
          font-size: 60px;
      }
  
      #contact img{
          width: 24px;
      }
  
  
  
      /* ------------- FOOTER ------------- */
      footer{
          font-size: 14px;
      }
  }
  
  
  
  /* --------------------------------- RESPONSIVE HEIGHT --------------------------------- */
  
  @media (max-height: 900px){
  
      #main > img{
          margin-bottom: 50px;
      }
  
      #main > p{
          margin-top: 0;
      }
  }
  
  @media (max-height: 670px){
  
      #main > p{
          font-size: 26px;
          line-height: 30px;
      }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  -ms-border-radius: 100%; */