:root {
  /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
  --primary: #86A025;
  --primaryLight: #aecc42;
  --secondary: #aecc42;
  --secondaryLight: #aecc42;
  --headerColor: #1a1a1a;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
  scroll-behavior: smooth;
}

*, *:before, *:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}
.rocket-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}

.rocket-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.rocket-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}
                          



/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.rocket-open {
    overflow: hidden;
  }
  #rocket-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #rocket-navigation:before {
    content: "";
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: -1100;
    transition: height 0.5s, opacity 0.5s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #rocket-navigation.rocket-active:before {
    height: 150vh;
    opacity: 1;
  }
  #rocket-navigation.rocket-active .rocket-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #rocket-navigation.rocket-active .rocket-li {
    opacity: 1;
    transform: translateY(0);
  }
  #rocket-navigation .rocket-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #rocket-navigation .rocket-logo {
    width: 40%;
    max-width: 9.125rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  #rocket-navigation .rocket-logo img {
    width: 60%;
    height: 60%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #rocket-navigation .rocket-toggle {
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
    height: clamp(2.75rem, 6vw, 3rem);
    margin: 0 0 0 auto;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #rocket-navigation .rocket-active .rocket-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #rocket-navigation .rocket-active .rocket-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #rocket-navigation .rocket-active .rocket-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #rocket-navigation .rocket-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
  }
  #rocket-navigation .rocket-line {
    width: 100%;
    height: 2px;
    background-color: #1a1a1a;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #rocket-navigation .rocket-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #rocket-navigation .rocket-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #rocket-navigation .rocket-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #rocket-navigation .rocket-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: #fff;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s, opacity 0.3s;
    transform-origin: top;
  }
  #rocket-navigation .rocket-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 3rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: scroll;
  }
  #rocket-navigation .rocket-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #rocket-navigation .rocket-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #rocket-navigation .rocket-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #rocket-navigation .rocket-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #rocket-navigation .rocket-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #rocket-navigation .rocket-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #rocket-navigation .rocket-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #rocket-navigation .rocket-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #rocket-navigation .rocket-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #rocket-navigation .rocket-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #rocket-navigation .rocket-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #rocket-navigation .rocket-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #rocket-navigation .rocket-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #rocket-navigation .rocket-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #rocket-navigation .rocket-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #rocket-navigation .rocket-li-link:before {
    /* active state underline */
    content: "";
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: none;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
  }
  #rocket-navigation .rocket-li-link.rocket-active:before {
    display: block;
  }
  #rocket-navigation .rocket-button-solid {
    display: none;
  }

  
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #rocket-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #rocket-navigation .rocket-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #rocket-navigation .rocket-toggle {
    display: none;
  }
  #rocket-navigation .rocket-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 4.0625rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  #rocket-navigation .rocket-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #rocket-navigation .rocket-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #rocket-navigation .rocket-li {
    list-style: none;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #rocket-navigation .rocket-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
  }
  #rocket-navigation .rocket-li-link:hover:before {
    width: 100%;
  }
  #rocket-navigation .rocket-li-link.rocket-active:before {
    width: 100%;
  }
  #rocket-navigation .rocket-li-link:before {
    /* active state underline */
    content: "";
    width: 0%;
    height: 2px;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0rem;
    left: 0;
    transition: width 0.3s;
  }
  #rocket-navigation .rocket-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    color: #fff;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #rocket-navigation .rocket-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #rocket-navigation .rocket-button-solid:hover:before {
    width: 100%;
  }
}
                                
.rocket-button-solid.rocket-facebook-button {
  background-color: #1877F2 !important; /* Facebook blue */
  color: #fff !important; /* White text */
  border: none !important; /* Remove borders */
}

.rocket-button-solid.rocket-facebook-button:hover {
  background-color: #145db2 !important; /* Darker Facebook blue for hover */
}




























/*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-section {
    padding: var(--sectionPadding);
    /* 160px - 200px */
    padding-top: clamp(10rem, 20vw, 12.5rem);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-section .rocket-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-section .rocket-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    /* 40px - 52px */
    margin-bottom: clamp(2.5rem, 5vw, 3.25rem);
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-section .rocket-flex {
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #hero-section .rocket-title {
    /* 39px - 61px */
    font-size: clamp(2.438rem, 5vw, 3.813rem);
  }
  #hero-section .rocket-text {
    margin-bottom: 1.25rem;
  }
  #hero-section .rocket-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    /* 32px - 48px */
    padding: 0 clamp(2rem, 4vw, 3rem);
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
    transition: background-color 0.3s;
  }
  #hero-section .rocket-button-solid:hover {
    background-color: #000;
    color: #fff;
  }
  #hero-section .rocket-picture {
    width: 100%;
    /* 280px - 510px */
    height: clamp(17.5rem, 58.6vw, 31.875rem);
    /* 16px - 20px */
    margin-bottom: clamp(1rem, 2vw, 1.25rem);
    display: block;
    position: relative;
  }
  #hero-section .rocket-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2.5rem;
    position: absolute;
  }
  #hero-section .rocket-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #hero-section .rocket-item {
    text-align: center;
    list-style: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #F7F7F7;
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: span 12;
    position: relative;
    z-index: 1;
    transition: border-color 0.3s;
  }
  #hero-section .rocket-item:hover {
    border-color: var(--primary);
  }
  #hero-section .rocket-item:hover .rocket-h3 {
    color: var(--primary);
  }
  #hero-section .rocket-item:hover .rocket-icon {
    transform: rotateY(360deg);
  }
  #hero-section .rocket-icon-picture {
    margin-bottom: 1.25rem;
    perspective: 700px;
    transform-style: preserve-3d;
  }
  #hero-section .rocket-icon {
    width: 24px;
    height: auto;
    display: block;
    transition: transform 0.5s;
  }
  #hero-section .rocket-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    margin-bottom: 0.75rem;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #hero-section .rocket-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-section .rocket-text {
    font-size: 1.25rem;
  }
  #hero-section .rocket-item {
    text-align: left;
    margin: 0;
    align-items: flex-start;
    grid-column: span 6;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-section .rocket-content {
    display: flex;
    flex-direction: column;
  }
  #hero-section .rocket-title {
    max-width: 46.875rem;
  }
  #hero-section .rocket-item {
    grid-column: span 3;
  }
}
/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-section .rocket-title {
    margin: 0;
  }
  #hero-section .rocket-container {
    flex-direction: column;
  }
  #hero-section .rocket-content {
    text-align: left;
    max-width: 80rem;
    gap: 1.25rem;
    flex-direction: row;
    align-items: flex-start;
  }
  #hero-section .rocket-flex {
    width: 50%;
    max-width: 39.375rem;
  }
}
                                

















/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #topthree-award-section {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #topthree-award-section .rocket-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #topthree-award-section .rocket-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #topthree-award-section .rocket-text {
    margin-bottom: 1rem;
  }
  #topthree-award-section .rocket-text:last-of-type {
    margin-bottom: 2rem;
  }
  #topthree-award-section .rocket-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1.5rem;
  }
  #topthree-award-section .rocket-li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #topthree-award-section .rocket-li-picture {
    width: 5rem;
    height: 5rem;
    margin: 0;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
  }
  #topthree-award-section .rocket-li-picture:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: .1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #topthree-award-section .rocket-li-icon {
    width: 24px;
    height: auto;
    display: block;
  }
  #topthree-award-section .rocket-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #topthree-award-section .rocket-li-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #topthree-award-section .rocket-image-group {
    /* scale down the whole section */
    font-size: min(1.6vw, .6em);
    /* aligns the .rocket-image-group to the right */
    text-align: right;
    /* using ems so we can scale this container with a font size */
    width: auto;
    min-width: 37.5em;
    max-width: 43.875rem;
    /* changes auto at desktop */
    height: 38.625em;
    /* sends it to the right in the 2nd position */
    order: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
  }
  #topthree-award-section .rocket-person {
    height: 100%;
    width: auto;
    /* allows text align to move it left or right */
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
  }
  #topthree-award-section .rocket-person img {
    width: auto;
    height: 90%;
    margin: 0;
    display: block;
    object-fit: contain;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #topthree-award-section .rocket-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
  }
  #topthree-award-section .rocket-content {
    width: 50%;
  }
  #topthree-award-section .rocket-image-group {
    font-size: min(1.3vw, 1em);
    flex: none;
    /* sends it to the left in the 1st position */
    order: -1;
    /* pushes person image to the right of the container */
    justify-content: flex-end;
    position: absolute;
    /* changes to 0 at large desktop */
    left: -6.25rem;
    bottom: -6.3125rem;
  }
}
/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
  #topthree-award-section .rocket-image-group {
    font-size: min(1.2vw, 1em);
    height: auto;
    margin-right: 1.875rem;
    /* pushes person image to the right of the container */
    justify-content: flex-end;
    /* pushed person image to the bottom of the container */
    align-items: flex-end;
    position: absolute;
    right: 50%;
    top: 0;
    /* same amount as the padding bottom on the #sbs*/
    bottom: -6.25rem;
  }
  #topthree-award-section .rocket-content {
    /* pushes it to the right side of the container */
    margin-left: auto;
  }
}
                                
.rocket-text a {
  color: #1877F2; /* A shade of blue (like Facebook blue) */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Make it stand out */
  transition: color 0.3s ease; /* Smooth color transition on hover */
}

.rocket-text a:hover {
  color: #145db2; /* Slightly darker blue on hover */
  text-decoration: underline; /* Add underline on hover */
}









/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-section {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
  }
  #services-section .rocket-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-section .rocket-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #services-section .rocket-title {
    max-width: 20ch;
  }
  #services-section .rocket-text {
    max-width: 40rem;
    position: relative;
    z-index: 1;
  }
  #services-section .rocket-text:after {
    /* divider line */
    content: "";
    width: 100%;
    height: 1px;
    margin-top: 1.5rem;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: relative;
  }
  #services-section .rocket-chevron {
    --chevronColor: var(--primary);
    width: 3rem;
    height: auto;
  }
  #services-section .rocket-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 1.25rem);
    /* 28px - 40px */
    row-gap: clamp(1.75rem, 2.5vw, 2.5rem);
  }
  #services-section .rocket-item {
    list-style: none;
    width: 100%;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-section .rocket-item:hover .rocket-picture img {
    opacity: .5;
    transform: scale(1.2);
  }
  #services-section .rocket-link {
    text-decoration: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-section .rocket-picture {
    width: 100%;
    height: 15rem;
    margin-bottom: 1.5rem;
    background-color: #000;
    overflow: hidden;
    display: block;
    position: relative;
  }
  #services-section .rocket-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .6s, opacity .3s;
  }
  #services-section .rocket-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #services-section .rocket-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0 0 1.5rem 0;
    color: var(--bodyTextColor);
  }
  #services-section .rocket-fake-link {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    margin-top: auto;
    color: var(--primary);
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #services-section .rocket-fake-link:hover .rocket-icon {
    transform: translateX(0.5rem);
  }
  #services-section .rocket-icon {
    width: 1.25rem;
    height: auto;
    display: block;
    transition: transform .3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-section .rocket-container {
    max-width: 80rem;
  }
  #services-section .rocket-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #services-section .rocket-flex {
    text-align: left;
    width: 40vw;
    max-width: 40rem;
    flex: none;
  }
  #services-section .rocket-title {
    margin: 0;
  }
  #services-section .rocket-text {
    padding: 0.75rem 0 0.75rem 1.5rem;
  }
  #services-section .rocket-text:after {
    width: 1px;
    height: 100%;
    margin: 0 1.5rem 0 0;
    order: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  #services-section .rocket-item {
    grid-column: span 6;
  }
  #services-section .rocket-picture {
    /* 240px - 420px */
    height: clamp(15rem, 33vw, 26.25rem);
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-section .rocket-item {
    grid-column: span 3;
  }
}
                                



















/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-section {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
  }
  #gallery-section .rocket-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #gallery-section .rocket-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #gallery-section .rocket-title {
    max-width: 20ch;
  }
  #gallery-section .rocket-button-group {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 2rem;
  }
  #gallery-section .rocket-button {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    background-color: transparent;
    border: none;
    transition: color 0.3s;
  }
  #gallery-section .rocket-button:hover {
    color: var(--primary);
    cursor: pointer;
  }
  #gallery-section .rocket-button.rocket-active {
    color: var(--primary);
  }
  #gallery-section .rocket-gallery-wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  #gallery-section .rocket-gallery {
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
    transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s, left 0.3s;
    /* makes the transform scaling origin the top left corner, dictates the direction by which the scale transforms animate towards */
    transform-origin: left top;
  }
  #gallery-section .rocket-gallery.rocket-hidden {
    /* by using visibility:hidden instead of display:none, we can see the animations from the opacity and transforms, display:none won't render animations. */
    visibility: hidden;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    /* hidden galleries have a 0 opacity, and we animate the opacity to 1 when they become active */
    opacity: 0;
    /* this top and left value help control the animation, by setting it to position absolute and left 0, the gallery won't fly off screen to the left, it will stop its position to be at the left edge of the .rocket-container (left: 0). Same for the top:0 value, the gallery won't go past that position when it animates */
    top: 0;
    left: 0;
    position: absolute;
    /* prevents the hidden galleries from overflowing the section, and makes a nice animations to transition to and from */
    transform: scaleY(0) scaleX(0);
  }
  #gallery-section .rocket-gallery.rocket-hidden .rocket-image {
    /* when gallery is hidden, add these styles to the rocket-image to animate from when rocket-hidden is removed from the .rocket-gallery */
    transform: translateY(2.1875rem);
    opacity: 0;
  }
  #gallery-section .rocket-image {
    border-radius: 1.25rem;
    width: 47%;
    aspect-ratio: 1;
    /* clips the image corners */
    overflow: hidden;
    display: block;
    position: relative;
    /* when .rocket-hidden is removed from the .rocket-gallery, reset these values and animate between their hidden styles */
    transform: translateY(0rem);
    opacity: 1;
    transition: opacity 0.6s, transform 0.6s;
  }
  #gallery-section .rocket-image:nth-of-type(1) {
    /* changes transition delays at desktop */
    /* these delays stagger the reveal of each image so they all go one after the other and not all at once */
    transition-delay: 0.15s;
  }
  #gallery-section .rocket-image:nth-of-type(2) {
    transition-delay: 0.3s;
  }
  #gallery-section .rocket-image:nth-of-type(3) {
    transition-delay: 0.45s;
  }
  #gallery-section .rocket-image:nth-of-type(4) {
    transition-delay: 0.6s;
  }
  #gallery-section .rocket-image:nth-of-type(5) {
    transition-delay: 0.75s;
  }
  #gallery-section .rocket-image:nth-of-type(6) {
    transition-delay: 0.9s;
  }
  #gallery-section .rocket-image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-section .rocket-container {
    max-width: 80rem;
  }
  #gallery-section .rocket-content {
    text-align: left;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  #gallery-section .rocket-title {
    margin: 0;
  }
  #gallery-section .rocket-image {
    width: 31.8%;
    aspect-ratio: 1;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #gallery-section .rocket-flex {
    max-width: 34.375rem;
  }
  #gallery-section .rocket-gallery {
    align-items: stretch;
    justify-content: center;
  }
  #gallery-section .rocket-image {
    width: 39.375rem;
    max-width: 100%;
    height: 25rem;
  }
  #gallery-section .rocket-image:nth-of-type(2),
  #gallery-section .rocket-image:nth-of-type(3),
  #gallery-section .rocket-image:nth-of-type(4),
  #gallery-section .rocket-image:nth-of-type(5) {
    width: 19.0625rem;
  }
  #gallery-section .rocket-image:nth-of-type(1) {
    /* these delays stagger the reveal of each image so they all go one after the other and not all at once */
    transition-delay: 0.15s;
  }
  #gallery-section .rocket-image:nth-of-type(2) {
    transition-delay: 0.3s;
  }
  #gallery-section .rocket-image:nth-of-type(3) {
    transition-delay: 0.45s;
  }
  #gallery-section .rocket-image:nth-of-type(4) {
    transition-delay: 0.15s;
  }
  #gallery-section .rocket-image:nth-of-type(5) {
    transition-delay: 0.3s;
  }
  #gallery-section .rocket-image:nth-of-type(6) {
    transition-delay: 0.45s;
  }
}
                                







/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-section {
      padding: var(--sectionPadding);
  }
  #reviews-section .rocket-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-section .rocket-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
  }

  #reviews-section .rocket-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 1.25rem;
  }
  #reviews-section .rocket-item {
      list-style: none;
      width: 100%;
      max-width: 25.8125rem;
      margin: 0;
      padding: 0;
  }
  #reviews-section .rocket-img {
      width: 4.25rem;
      height: 4.25rem;
      margin: 0 auto 1rem;
      border-radius: 50%;
      display: block;
  }
  #reviews-section .rocket-name {
      font-size: 1.25rem;
      line-height: 1.2em;
      text-align: center;
      font-weight: 700;
      margin: 0;
      color: var(--headerColor);
      display: block;
  }
  #reviews-section .rocket-desc {
      font-size: 1rem;
      line-height: 1.5em;
      text-align: center;
      margin: 0 0 1rem;
      color: #7d799c;
      display: block;
  }
  #reviews-section .rocket-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 2vw, 1rem);
      text-align: center;
      line-height: 1.5em;
      margin: auto;
      color: var(--bodyTextColor);
  }
  #reviews-section .rocket-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #fff;
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: var(--primary);
      border-radius: 0.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
  }
  #reviews-section .rocket-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
  }
  #reviews-section .rocket-button-solid:hover:before {
      width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-section .rocket-card-group {
      flex-direction: row;
      justify-content: center;
      align-items: stretch;
      flex-wrap: wrap;
      row-gap: 2.5rem;
  }
  #reviews-section .rocket-item {
      /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 23% to get the desired sizes fit 4 in a row and then stack when you add more*/
      width: clamp(31.5%, 30vw, 32.3%);
  }
}

                              
.rocket-highlight {
  font-size: larger;
  font-weight: bold;
  color: #86A025; /* Replace with your brand color */
}

.rocket-name-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; /* Centers the name and icon */
  gap: 8px; /* Space between the icon and the name */
  margin-top: 8px;
  text-align: center; /* Ensures the text is centered */
}

.rocket-name-wrapper i {
  color: #1877F2; /* Facebook blue */
  font-size: 18px; /* Adjust icon size */
}

.rocket-item {
  text-align: center; /* Center-aligns the entire review content */
}






.cta-banner {
  background-color: #f7f7f7; /* Matches your theme's primary color */
  color: var(--headerColor); /* White text for contrast */
  text-align: center;
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
}

.cta-container {
  max-width: 1200px;
  margin: 0 auto;
}

.cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.cta-title {
  font-size: var(--headerFontSize);
  font-weight: bold;
  margin: 0 0 10px;
}

.cta-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto;
  color: var(--bodyTextColor);
}

.fb-like {
  margin-top: 15px;
}














.contact {
  padding: var(--sectionPadding);
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.contact-details {
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-details:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.contact-title {
  font-size: var(--headerFontSize);
  font-weight: bold;
  color: var(--headerColor);
  margin-bottom: 20px;
}

.contact-text {
  font-size: var(--bodyFontSize);
  line-height: 1.6;
  color: var(--bodyTextColor);
  margin-bottom: 20px;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.6;
  color: var(--bodyTextColor);
}

.contact-info li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: var(--bodyFontSize);
  color: var(--bodyTextColor);
}



.contact-info li strong {
  color: var(--primary);
}

.contact-map {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive Styling */
@media (max-width: 768px) {
  .contact-container {
      grid-template-columns: 1fr;
      gap: 20px;
  }

  .contact-map {
      height: 300px;
  }
}
















/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #turf-advert-section {
      padding: var(--sectionPadding);
      position: relative;
  }
  #turf-advert-section .rocket-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #turf-advert-section .rocket-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
  }

  #turf-advert-section .rocket-title {
      color: var(--bodyTextColorWhite);
  }
  #turf-advert-section .rocket-text {
      margin-bottom: 1rem;
      color: var(--bodyTextColorWhite);
      opacity: 0.8;
  }
  #turf-advert-section .rocket-text:last-of-type {
      margin-bottom: 2rem;
  }
  #turf-advert-section .rocket-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #fff;
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: var(--primary);
      border-radius: 0.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
  }
  #turf-advert-section .rocket-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
  }
  #turf-advert-section .rocket-button-solid:hover:before {
      width: 100%;
  }
  #turf-advert-section .rocket-picture {
      height: 100%;
      width: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #turf-advert-section .rocket-picture:before {
      /* black color overlay */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background: #000;
      opacity: 0.8;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #turf-advert-section .rocket-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
}

                              
.rocket-title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px; /* Space between the icon and the title */
}

.new-icon {
  background-color: var(--primary); /* Matches your brand's primary color */
  color: #fff;
  font-size: 0.875rem; /* Slightly smaller for emphasis */
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px; /* Adds space between the icon and the topper */
}










/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #inner-content-section {
    padding: var(--sectionPadding);
  }
  #inner-content-section .rocket-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #inner-content-section .rocket-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 36.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #inner-content-section .rocket-text {
    margin-bottom: 1rem;
  }
  #inner-content-section .rocket-text:last-of-type {
    margin-bottom: 2rem;
  }
  #inner-content-section .rocket-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 3rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #inner-content-section .rocket-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #inner-content-section .rocket-button-solid:hover:before {
    width: 100%;
  }
  #inner-content-section .rocket-image-group {
    /* scales the whole group based on the view width size and stops when it equals .745em, resets at desktop */
    font-size: min(1.959vw, .745em);
    width: 39.375em;
    /* we set a minimum height so it never gets smaller than this value */
    min-height: 39.25em;
    display: block;
    position: relative;
    z-index: 1;
}

/* Add hover effect for each image in the group */
#inner-content-section .rocket-image-group .rocket-picture img {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}

/* On hover, apply a scale, shadow, and border effect */
#inner-content-section .rocket-image-group .rocket-picture:hover img {
    transform: scale(1.05); /* Slightly enlarges the image */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* Adds a shadow for depth */
    border: 4px solid var(--primary); /* Adds the green border */
}

/* Optional: Add a hover effect to the container for extra polish */
#inner-content-section .rocket-image-group:hover {
    filter: brightness(1.05); /* Slightly brightens the group on hover */
}

  #inner-content-section .rocket-picture {
    position: absolute;
  }
  #inner-content-section .rocket-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #inner-content-section .rocket-picture1 {
    /* the percentage heights allow them to be responsive to the height of the parent rocket-image-group. On desktop, when the felxbox is set to aling-items: stretch, the rocket-image group will stretch to fill the height of the parent container. So when you add more content to the rocket-content group and make it taller, the rocket-image group will get taller with it and every image will stretch with the parent, making this entire group responsive to the changing amounts of content next to it */
    width: 25.8125em;
    height: 79.617834%;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #inner-content-section .rocket-picture2 {
    width: 25.8125em;
    height: 44.585987%;
    bottom: 0;
    right: 0;
    z-index: 10;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #inner-content-section .rocket-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #inner-content-section .rocket-content {
    /* this padding sets a minimum gap between the top and bottom of the content div and the top and bottom of the rocket-image-group */
    padding: 3.75rem 0;
    /* while the rocket-image-group will stretch to fill the height of the parent, this property will ensure that the rocket-content group aligns itse;f in the center of the parent div instead of stretching */
    align-self: center;
  }
  #inner-content-section .rocket-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
  }
}
                                

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .mobile-only {
      display: block;
  }
}










/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #footer-section {
      padding: var(--sectionPadding);
      position: relative;
      z-index: 1;
  }
  #footer-section .rocket-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  #footer-section .rocket-top {
      width: 100%;
      /* 32px - 40px */
      margin-bottom: clamp(2rem, 4vw, 2.5rem);
      padding-bottom: clamp(2rem, 4vw, 2.5rem);
      border-bottom: 1px solid #484848;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
  }
  #footer-section .rocket-ul {
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      row-gap: 0.5rem;
      /* 28px - 40px */
      column-gap: clamp(1.75rem, 4vw, 2.5rem);
  }
  #footer-section .rocket-li {
      list-style: none;
  }
  #footer-section .rocket-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: #bababa;
      display: block;
      transition: color 0.3s;
  }
  #footer-section .rocket-link:hover {
      color: var(--secondary);
  }
  #footer-section .rocket-logo {
      width: 10.5rem;
      height: auto;
      display: block;
  }
  #footer-section .rocket-logo-img {
      width: 100%;
      height: auto;
      display: block;
  }
  #footer-section .rocket-bottom {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
  }
  #footer-section .rocket-social {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
  }
  #footer-section .rocket-social-li {
      list-style: none;
  }
  #footer-section .rocket-social-link {
      width: 2rem;
      height: 2rem;
      background-color: #484848;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background-color 0.3s;
  }
  #footer-section .rocket-social-link:hover {
      background-color: var(--secondary);
  }
  #footer-section .rocket-social-link:hover .rocket-social-icon {
      filter: grayscale(1) brightness(0);
      opacity: 1;
  }
  #footer-section .rocket-social-icon {
      width: 0.75rem;
      height: auto;
      display: block;
      opacity: 0.5;
  }
  #footer-section .rocket-copyright {
      font-size: 1rem;
      line-height: 1.5em;
      margin: 0;
      color: #bababa;
      display: block;
  }
  #footer-section .rocket-copyright-link {
      font-size: inherit;
      text-decoration: none;
      color: inherit;
      transition: color 0.3s;
  }
  #footer-section .rocket-copyright-link:hover {
      color: var(--secondary);
  }
  #footer-section .rocket-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #footer-section .rocket-background:before {
      /* background color overlay */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background: #2c2c2c;
      opacity: 0.96;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #footer-section .rocket-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* Makes img tag act as a background image */
      object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #footer-section .rocket-top {
      flex-direction: row;
      justify-content: space-between;
  }
  #footer-section .rocket-bottom {
      flex-direction: row;
      justify-content: space-between;
  }
}
                              





.facebook-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fake-like-button {
  display: inline-flex;
  align-items: center;
  background-color: #1877F2;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 0 12px;
  height: 28px; 
  font-size: 14px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 6px;
}

.fake-like-button a {
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
}

.fake-like-button i {
  margin-right: 5px;
  font-size: 16px;
}