@import url('https://fonts.googleapis.com/css?family=Fjalla+One:400,700|Oswald:400,700|Caveat:400,700|Caveat+Brush:400,700|Poppins:400,700|Hammersmith+One:400,700|Roboto:400,700|Kalam:400,700|Allura:400,700|Acme:400,700|Cabin:400,700|Anton:400,700|Abhaya+Libre:400,700|Courier+Prime:400,700|Cutive+Mono:400,700|Nunito:400,700|Ranchers:400,700|Permanent+Marker:400,700|Audiowide:400,700|Lexend+Deca:400,700');
  @import url('https://fonts.googleapis.com/css2?family=Freeman&display=swap');

  :root {
      --body-font-family: Poppins, Helvetica, "sans-serif";
      --body-bg-color: linear-gradient(to right, #2957c7, #0082c8, #0082c8, #2957c7);
      ;
      --body-bg-color-dark: #1E252B;
      --body-color: #111;
      --body-color-dark: #c1d4e3;
      --link-color: #5e72e4;
      --header-bg-color: #fff;
      --header-bg-color-dark: #262D34;
      --card-dark-color: #262D34;
      --card-dark-divider: #2e3f4d;
      --card-dark-hover: #2b3843;
      --maxWidth: 850px;
  }

  *,
  *::before,
  *::after {
      box-sizing: border-box;
  }

  body,
  html {
      margin: 0;
      padding: 0;
      height: 100%;
      box-sizing: border-box;
  }


  body {
      font-family: var(--body-font-family);
      color: var(--body-color);
      background: var(--body-bg-color);
      position: relative;

  }

  body.night-mode {
      color: var(--body-color-dark);
      background-color: var(--body-bg-color-dark)
  }

  body.n_activated,
  body.n_live {
      padding-top: 120px
  }

  .bg-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2;
      /* opacity: 0.3; */
  }

  video {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* background: linear-gradient(to right,rgb(3, 36, 118), #0082c8a1, #0082c8a1,rgb(2, 29, 95)); */
      z-index: 1;
  }

  .hero-heading {
      font-size: 48px;
      font-weight: bold;
      margin-bottom: 10px;
      margin: 0px;
      line-height: 50px;
  }

  .hero-heading,
  .hero-subtitle {
      text-align: center;
  }

  img {
      max-width: 100%;
  }

  .hero-subtitle {
      font-size: x-large;
      padding: 0px;
      margin: 0px;
  }

  .content-inner {
      padding: 10px;

  }

  .content {
      position: relative;
      max-width: 1250px;
      background-color: #fff;
      z-index: 2;
      border-top-right-radius: 25px;
      border-top-left-radius: 25px;
      border: 1px solid #333;
      width: 100%;
  }

  @media (min-width: 500px) {
      .content {
          margin: -120px auto 0 auto;
      }

  }

  .inner {
      padding: 10px;
      z-index: 10;
      position: relative;
  }

  .footer {
      background: linear-gradient(to right, #2957c7, #0082c8, #0082c8, #2957c7);
      /* min-height: 100px; */
      color: #ffffff;
      text-align: center;
  }

  .freeman-regular {
      font-family: "Freeman", sans-serif;
  }

  #salespage_heading {
      position: relative;
      overflow: hidden;
      color: #fff;
      padding: 15px;
      border-top-right-radius: 25px;
      border-top-left-radius: 25px;
    background: linear-gradient(45deg, #052c8c59, rgba(1, 71, 109, 0.63), #052c8c80);

  }

  .included_stuff {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: x-large;
      word-wrap: break-word;
  }

  .home-container {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
  }

  .hyphen:before {
      content: ' - ';
  }

  .button-group {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
  }

  .cta-button {
      padding: 10px 20px;
      color: white;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
      text-align: center;
      display: inline-block;
  }

  .btn-fbgroup {
      background-color: #007BFF;
  }

  .btn-fbpage {
      background-color: #28A745;
  }

  .btn-deals {
      background-color: #FFC107;
      color: black;
  }

  .btn-events {
      background-color: #17A2B8;
  }

  .btn-directory {
      background-color: #6F42C1;
  }

  .btn-clients {
      background-color: #343A40;
  }

  .logo {
      width: fit-content;
      margin: 0 auto;
  }

  header.hero {
      background: #2a4d69;
      color: white;
      padding: 20px;
      text-align: center;
  }

  header.hero p {
      display: block;
      margin-block-start: 0px;
      margin-block-end: 0px;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
  }

  header.hero h1 {
      display: block;
      font-size: 2em;
      margin-block-start: 0px;
      margin-block-end: 00px;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
      unicode-bidi: isolate;
  }

  nav.top-menu {
      padding: 2px;
      font-size: 20px;
      color: #f5f5f5;
  }


  .top-menu-line {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      align-items: anchor-center;
      justify-content: center;
      align-content: center;
      margin-top: 10px;
      line-height: 4vh;
      flex-direction: column;
  }

  .top-menu-line h1 {
      margin: 0px;
  }

  .top-menu-line ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      margin: 0px;
      margin-block-start: 0;
      margin-block-end: 0;
      padding-inline-start: 0px;
      unicode-bidi: isolate;
      justify-content: center;
  }

  .top-menu ul li {
      justify-content: center;
  }

  .top-menu, .top {
      background: var(--body-bg-color);
      padding: 2px 0 105px;

      position: relative;
      overflow: hidden;
      z-index: 1;
      display: flex;
      flex-direction: column;
  }

  @media (min-width: 500px) {
      .top-menu, .top {
          min-height: 200px;
      }

  }

  .top::after {
      content: "";
      display: table;
      clear: both;
  }

  .top h1 {
      font-family: "Lexend Deca", sans-serif;
      font-size: 28px;
      letter-spacing: -1.5px;
      text-transform: capitalize;
      text-decoration: none;
      text-align: center;
      padding: 10px;
      margin: 0px;
      color: #ffffff;
      position: relative;
      display: block;
      width: 100%;
      word-break: break-word;
  }

  @media (min-width: 860px) {
      .top h1 {
          font-size: 50px;
      }
  }

  nav.top-menu a {
      color: white;
      padding: 5px;
      text-decoration: none;
  }

  .main {
      display: flex;
      flex-wrap: wrap;
  }



  section.content {
      /* flex: 3 1 500px; */
      background: white;
      padding: 3px;
  }

  footer {

      background: linear-gradient(to right, #2957c7, #0082c8, #0082c8, #2957c7);
      color: white;
      padding: 20px;
      padding-bottom: 100px;
  }

  footer .inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 0 auto;
      max-width: 850px;
  }

  footer .inner .column {
      flex: 1 1 150px;
      margin: 10px;
  }

  footer h4 {
      border-bottom: 1px solid white;
      padding-bottom: 5px;
  }

  footer a {
      display: block;
      color: #ccc;
      text-decoration: none;
      margin-top: 5px;
  }

  @media (max-width: 860px) {
      .main {
          flex-direction: column;
      }

      footer {
          flex-direction: column;
      }
  }

  #backToTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 10999;
      display: none;
      background-color: #2a4d69;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 30px;
      font-size: 16px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      transition: opacity 0.3s ease;
  }

  #backToTop.show {
      display: block;
  }



  .hero.style1 {
      display: flex;

      align-items: center;
      flex-direction: row-reverse;
      background: #1e2d3b;
      color: white;
      flex-wrap: wrap;
      padding: 20px;
  }

  .hero.style1 img {
      margin: 0 auto;
      width: 250px;
  }

  .hero.style1 .hero-text {

      margin: 0 auto;
      width: fit-content;

  }

  button#back_button {
      width: auto;
      margin: 15px auto;
      display: grid;
  }

  .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #ffffff;
      border-top: 1px solid #ccc;
      box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      font-family: Arial, sans-serif;
  }

  .cta_footer {
      background-color: #027c70;
      color: #fff;
      padding: 8px 10px;
      text-align: center;
  }

  .cta_footer a {
      color: #fff !important;
      margin: 0 8px;
      font-weight: bold;
      text-decoration: none;
  }

  .cta_footer a:hover {
      text-decoration: underline;
  }

  .cta_footer div {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin: 0 auto;
      max-width: 98%;
  }

  .bottom-nav .nav-section {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding: 10px 0;
      gap: 10px;
  }

  .bottom-nav h3 {
      font-size: 14px;
      margin: 0 0 5px 0;
      color: #333;
      width: 100%;
      text-align: center;
  }

  .bottom-nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
  }

  .bottom-nav ul li {
      display: inline-block;
  }

  .bottom-nav a {
      text-decoration: none;
      color: #1877f2;
      font-size: 14px;
      font-weight: 500;
  }

  .bottom-nav a:hover {
      text-decoration: underline;
  }
  span.hyphen {
    font-size: large;
}