html {
  background-color: #008a00;
}

:root {
  --linear-gradient-green: linear-gradient(
    to bottom,
    #008a00 13%,
    #005700 100%
  );

  --linear-gradient-red: linear-gradient(to bottom, #e31940 0%, #500016 100%);
  --radial-gradient-red: radial-gradient(
    ellipse at 23% 40%,
    #e31940 0%,
    #500016 100%
  );
  --radial-gradient-green: radial-gradient(
    ellipse at 23% 40%,
    #008a00 0%,
    #005700 100%
  );
  --snowpile-size: 35%;
  --snowpile-top: 9%;
  --snowpile-left: -37px;
}

@font-face {
  font-family: "LastChristmas"; /* Custom name for your font */
  src: url("/fonts/LastChristmas.ttf"); /* Path to the font file */
}

.cursive {
  font-family: "LastChristmas";
  font-size: 56px;
  text-shadow: 0 0 10px;
}

.light-blue-text {
  color: #4cff42 /* default color #89c2e5*/;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: #02873e /* default color #01619b*/;
}

.top-nav {
  background: url(../../img/christmas_template/black-lozenge.png) repeat,
    var(--linear-gradient-green);
}

nav i {
  color: #02873e /* default color #01619b*/;
}

.hero {
  background-image: url(../../img/christmas_template/Roger-Eaton.webp),
    url(../../img/christmas_template/hero_bg5.webp);
  /* background: #01619b; */
}

.corner-flowers {
  position: absolute;
  margin-top: -60px;
  width: auto;
}

#socialMediaAccordion {
  display: none;
}

.message {
  background: url(../../img/christmas_template/batthern1.png) repeat,
    radial-gradient(ellipse at 23% 40%, #e31940 0%, #b00033 40%, #500016 100%);
}

.message-text p {
  opacity: 0;
  font-size: 70px;
}

@media (max-width: 1280px) {
  .message-text p {
    font-size: 65px;
  }
  .message-text {
    margin-bottom: 20px;
  }
}

@media (max-width: 1245px) {
  .message-text p {
    font-size: 60px;
  }
}

@media (max-width: 1090px) {
  .message-text p {
    font-size: 50px;
  }
}

@media (max-width: 991px) {
  .message-text p {
    font-size: 40px;
  }

  .corner-flowers {
    width: 250px;
    position: absolute;
    margin-top: -60px;
  }
}

@media (max-width: 767px) {
  .message-text p {
    font-size: 35px;
    line-height: 2.5rem;
  }
  .message-text {
    margin-bottom: 50px;
  }
}

@media (max-width: 576px) {
  .message-text {
    margin-bottom: 25px;
  }
}

.services {
  background: url(../../img/charlotte-county-map.webp),
    url(../../img/charlotte-county-map.webp);
  background-blend-mode: multiply;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: solid 20px #c72f3b;
}

/* starts on nth 2 */
.services .col-4:nth-child(2) .icon-container:after {
  background: url(../../img/christmas_template/snowpile.png);
  background-repeat: no-repeat;
  background-size: var(--snowpile-size);
}

.services .col-4:nth-child(3) .icon-container:after {
  background: url(../../img/christmas_template/snowpile3.png);
  background-repeat: no-repeat;
  background-size: var(--snowpile-size);
}

.services .col-4:nth-child(4) .icon-container:after {
  background: url(../../img/christmas_template/snowpile2.png);
  background-repeat: no-repeat;
  background-size: var(--snowpile-size);
}

.services .col-4:nth-child(5) .icon-container:after {
  background: url(../../img/christmas_template/snowpile4.png);
  background-repeat: no-repeat;
  background-size: var(--snowpile-size);
}

.services .col-4:nth-child(6) .icon-container:after {
  background: url(../../img/christmas_template/snowpile.png);
  background-repeat: no-repeat;
  background-size: var(--snowpile-size);
}

.services .col-4:nth-child(7) .icon-container:after {
  background: url(../../img/christmas_template/snowpile2.png);
  background-repeat: no-repeat;
  background-size: var(--snowpile-size);
}

.services .col-4 .icon-container:after {
  content: "";
  position: absolute;
  width: 416px;
  height: 287px;
  left: 9%;
  top: -31px;
  pointer-events: none;
}

@media (max-width: 1175px) {
  :root {
    --snowpile-size: 29.05%;
  }
  .services .col-4 .icon-container:after {
    left: 8%;
    top: -26px;
  }
}

@media (max-width: 991px) {
  :root {
    --snowpile-size: 15.75%;
  }
  .services .icon-container {
    border-width: 2px !important;
  }
  .services .col-4 .icon-container:after {
    left: 15%;
    top: -12px;
  }
}

.services .icon-container {
  border: solid 5px white;
  box-shadow: 0 0 10px gold;
  background: radial-gradient(
    circle at 65% 15%,
    white 1px,
    #ff4d4d 3%,
    #8b0000 60%,
    #ff4d4d 100%
  );
}

.services .icon-container:hover,
.services .icon-container:focus {
  border: solid 5px white;
  background: radial-gradient(
    circle at 65% 15%,
    white 1px,
    #00bf00 3%,
    #006400 60%,
    #00bf00 100%
  );
}

.services .icon-container p {
  text-shadow: 0 0 5px #000;
  font-weight: 600 !important;
}

.message .container-fluid {
  border-top: 5px dotted rgb(255 203 61);
  border-bottom: 5px dotted rgb(255 203 61);
}

.services {
  //border: none;
  position: relative; /* Ensure the pseudo-element is positioned correctly */
}

.article-title {
  color: #02873e /* default color #01619b*/;
}

.mission-stars {
  background-color: transparent;
}

.our-mission-section {
  background: url(../../img/christmas_template/black-lozenge.png) repeat,
    var(--linear-gradient-green);
}

.clerk-news-section {
  background: url(../../img/christmas_template/snowman.png) no-repeat;
  background-position: 100% 100%;
  background-size: 50%;
}

.yt-videos-section {
  background: url(../../img/christmas_template/batthern1.png) repeat,
    radial-gradient(ellipse at 23% 40%, #e31940 0%, #b00033 40%, #500016 100%);
}

footer {
  background: #008a00;
}

footer .container {
  background-color: #008a00;
  color: white;
  background: linear-gradient(
      45deg,
      rgba(0, 138, 0, 0.9) 0%,
      rgba(0, 138, 0, 0.9) 100%
    ),
    url(../../img/logo-seal.webp);
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: center;
  background-size: auto, 350px;
}

#snow {
  display: block;
  z-index: 4;
}

#top-container-other {
  background-color: #02873e !important /* default color #01619b*/;
}
/* CHRISTMAS LIGHTS HERE*/
.lightrope {
  display: block;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -15px 0 0 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}

.lightrope li {
  position: relative;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px; /* $globe-width */
  height: 28px; /* $globe-height */
  border-radius: 50%;
  margin: 20px; /* $globe-spacing/2 */
  display: inline-block;
  background: rgba(0, 247, 165, 1);
  box-shadow: 0px 4.67px 24px 3px rgba(0, 247, 165, 1); /* $globe-height/6 and $globe-width*2 and $globe-spread */
  animation-name: flash-1;
  animation-duration: 2s;
}

.lightrope li:nth-child(2n + 1) {
  background: rgba(0, 255, 255, 1);
  box-shadow: 0px 4.67px 24px 3px rgba(0, 255, 255, 0.5); /* $globe-height/6 and $globe-width*2 and $globe-spread */
  animation-name: flash-2;
  animation-duration: 0.4s;
}

.lightrope li:nth-child(4n + 2) {
  background: rgba(247, 0, 148, 1);
  box-shadow: 0px 4.67px 24px 3px rgba(247, 0, 148, 1); /* $globe-height/6 and $globe-width*2 and $globe-spread */
  animation-name: flash-3;
  animation-duration: 1.1s;
}

.lightrope li:nth-child(odd) {
  animation-duration: 1.8s;
}

.lightrope li:nth-child(3n + 1) {
  animation-duration: 1.4s;
}

.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px; /* $globe-width - 2 */
  height: 9.33px; /* $globe-height/3 */
  border-radius: 3px;
  top: -4.67px; /* 0 - ($globe-height/6) */
  left: 1px;
}

.lightrope li:after {
  content: "";
  top: -14px; /* 0 - $globe-height/2 */
  left: 9px; /* $globe-width - 3 */
  position: absolute;
  width: 52px; /* $globe-spacing + 12 */
  height: 18.67px; /* ($globe-height/3 * 2) */
  border-bottom: solid #222 2px;
  border-radius: 50%;
}

.lightrope li:last-child:after {
  content: none;
}

.lightrope li:first-child {
  margin-left: -40px; /* -$globe-spacing */
}

@keyframes flash-1 {
  0%,
  100% {
    background: rgba(0, 247, 165, 1);
    box-shadow: 0px 4.67px 24px 3px rgba(0, 247, 165, 1);
  }

  50% {
    background: rgba(0, 247, 165, 0.4); /* $light-off-opacity */
    box-shadow: 0px 4.67px 24px 3px rgba(0, 247, 165, 0.2);
  }
}

@keyframes flash-2 {
  0%,
  100% {
    background: rgba(0, 255, 255, 1);
    box-shadow: 0px 4.67px 24px 3px rgba(0, 255, 255, 1);
  }

  50% {
    background: rgba(0, 255, 255, 0.4); /* $light-off-opacity */
    box-shadow: 0px 4.67px 24px 3px rgba(0, 255, 255, 0.2);
  }
}

@keyframes flash-3 {
  0%,
  100% {
    background: rgba(247, 0, 148, 1);
    box-shadow: 0px 4.67px 24px 3px rgba(247, 0, 148, 1);
  }

  50% {
    background: rgba(247, 0, 148, 0.4); /* $light-off-opacity */
    box-shadow: 0px 4.67px 24px 3px rgba(247, 0, 148, 0.2);
  }
}