body {
  position: relative;
  height: 100%;
  font-family: "Tektur", serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  min-height: 100vh;
  overflow: auto;
  color: #0c0f15;
}

/* HEADER / TITLE STYLES */

.site-header {
  position: fixed;
  width: 100%;
  height: 80px;
  background-color: #1E2530;
  top: 0px;
  left: 0px;
  right: 0px;
  border-bottom: 2px solid #FF0037;
  box-shadow: 0 0 10px #FF0037;
  z-index: 9998;
}

.header-icon {
  position: absolute;
  top: 0px; /* Adjust this value to move the logo down */
  left: 10px; /* Change 'left' to 'right' to move the logo to the right */
  width: 100px; /* Adjust the size of the logo */
  height: auto; /* Keeps aspect ratio */
}

h1#title-welcome {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF; /* Ensure the text color is visible */
  text-align: center; /* Center the text */
  position: relative;
  margin-top: 150px;
}

h5#description-welcome {
  font-family: "Tektur", serif;
  font-size: 20px;
  line-height: 1.2;
  color: #FFFFFF; /* Ensure the text color is visible */
  text-align: center; /* Center the text */
  margin-bottom: 1px;
}





/* RAIN BACKGROUND STYLE */

.background-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0c0f15;
  z-index: -1;
  box-shadow: 0 0 10px #FF0037;
  --c: #FF0037;

  background-image: 
  radial-gradient(2px 60px at 10px 50px, var(--c), transparent),
  radial-gradient(2px 50px at 80px 200px, var(--c), transparent),
  radial-gradient(2px 70px at 150px 100px, var(--c), transparent),
  radial-gradient(2px 40px at 230px 300px, var(--c), transparent),
  radial-gradient(2px 90px at 300px 150px, var(--c), transparent),
  radial-gradient(2px 55px at 370px 500px, var(--c), transparent),
  radial-gradient(2px 85px at 450px 50px, var(--c), transparent),
  radial-gradient(2px 45px at 520px 250px, var(--c), transparent),
  radial-gradient(2px 70px at 600px 400px, var(--c), transparent),
  radial-gradient(2px 65px at 670px 100px, var(--c), transparent),
  radial-gradient(2px 60px at 750px 300px, var(--c), transparent),
  radial-gradient(2px 75px at 820px 350px, var(--c), transparent),
  radial-gradient(2px 50px at 900px 100px, var(--c), transparent),
  radial-gradient(2px 80px at 980px 400px, var(--c), transparent),
  radial-gradient(2px 60px at 1050px 200px, var(--c), transparent),
  radial-gradient(2px 45px at 1120px 450px, var(--c), transparent),
  radial-gradient(2px 85px at 1200px 300px, var(--c), transparent),
  radial-gradient(2px 70px at 1270px 150px, var(--c), transparent),
  radial-gradient(2px 50px at 1330px 500px, var(--c), transparent),
  radial-gradient(2px 55px at 1400px 250px, var(--c), transparent),
  radial-gradient(2px 65px at 1480px 100px, var(--c), transparent),
  radial-gradient(2px 75px at 1550px 400px, var(--c), transparent),
  radial-gradient(2px 60px at 1620px 300px, var(--c), transparent),
  radial-gradient(2px 90px at 1700px 150px, var(--c), transparent),
  radial-gradient(2px 70px at 1780px 350px, var(--c), transparent),
  radial-gradient(2px 40px at 1850px 50px, var(--c), transparent);

background-size: 100vw 100vh;
animation: rain-fall 10s linear infinite, rain-fall-slow 15s linear infinite;

}

@keyframes rain-fall {
  from {
      background-position: 0px -100px, 80px -200px, 150px -300px, 230px -400px,
                        300px -500px, 370px -600px, 450px -700px, 520px -800px,
                        600px -900px, 670px -1000px, 750px -1100px;
  }
  to {
      background-position: 0px 800px, 80px 900px, 150px 1000px, 230px 1100px,
                        300px 1200px, 370px 1300px, 450px 1400px, 520px 1500px,
                        600px 1600px, 670px 1700px, 750px 1800px;
  }
}

@keyframes rain-fall-slow {
  from {
      background-position: 0px -50px, 80px -150px, 150px -250px, 230px -350px,
                        300px -450px, 370px -550px, 450px -650px, 520px -750px,
                        600px -850px, 670px -950px, 750px -1050px;
  }
  to {
      background-position: 0px 500px, 80px 600px, 150px 700px, 230px 800px,
                        300px 900px, 370px 1000px, 450px 1100px, 520px 1200px,
                        600px 1300px, 670px 1400px, 750px 1500px;
  }
}








/* SELECTION / HIGHLIGHT STYLE */

::-moz-selection {
  background-color: #FF0037;
  color: #fff;
  box-shadow: 0 0 10px #FF0037;}

::selection {
  background-color: #FF0037;
  color: #fff;
  box-shadow: 0 0 10px #FF0037;}



  


/* RANDOM STYLES */

.mt20 { 
  margin-top: 20px;}
.page-close {
  font-size: 30px;
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: 100;
 }

.page-title {
  margin-bottom: 75px; 
}

  .page-title img {
    margin-bottom: 20px;
   }

  .page-title h2 {
    font-size: 68px;
    margin-bottom: 25px;
    position: relative;
    z-index: 0;
    font-weight: 900;
    text-transform: uppercase; 
  }

  .page-title p {
    font-size: 14px;
font-family: "Tektur", serif;
    line-height: 21px;
   }

  .page-title .title-bg {
    color: rgba(30, 37, 48, 0.07);
    font-size: 158px;
    left: 0;
    letter-spacing: 10px;
    line-height: 0.7;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: -1;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); 
  }

.section-title {
  margin-bottom: 20px; }

  .section-title h3 {
    display: inline-block;
    position: relative; 
  }

    .section-title h3::before, .section-title h3::after {
      content: "";
      height: 2px;
      position: absolute;
      bottom: 8px;
      left: -webkit-calc(100% + 14px);
      left: -moz-calc(100% + 14px);
      left: calc(100% + 14px); 
    }
      
    .section-title h3::before {
      background-color: #1e2530;
      width: 96px;
      bottom: 14px;
     }

    .section-title h3::after {
      background-color: #FF0037;
      box-shadow: 0 0 10px #FF0037;
      width: 73px; 
    }

  .section-title.light h3 {
    color: #fff; 
  }

    .section-title.light h3::before {
      background-color: #fff;
     }

.page-nav {
  bottom: 40px;
  left: 0;
  position: absolute;
  right: 0; 
}

  .page-nav span {
    font-family: "Tektur", serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 0.9;
    text-transform: uppercase; }








/* HEXAGON STYLES */

.hexagon-menu {
  display: flex; /* This makes sure the hexagon items stay in a horizontal line */
  justify-content: center; /* Centers hexagon items inside the container */
  align-items: center; /* Ensures the hexagon items are centered vertically within the menu */
  flex-wrap: nowrap; /* Prevents wrapping of hexagon items */
}

.hexagon-item:first-child {
    margin-left: 0;
}

.hexagon-item {
  cursor: pointer;
  width: 200px;
  height: 173.20508px;
  margin-left: -29px;
  margin-right: 10px; /* Adds space between each hexagon item */
  z-index: 0;
  position: relative;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
  margin-top: 10px;
  align-items: center;
}

  .hexagon-item:first-child {
    margin-left: 0; }

  .hexagon-item:hover {
    z-index: 1; }

    .hexagon-item:hover .hex-item:last-child {
      opacity: 1;
      -webkit-transform: scale(1.3);
      -moz-transform: scale(1.3);
      -ms-transform: scale(1.3);
      -o-transform: scale(1.3);
      transform: scale(1.3); }

    .hexagon-item:hover .hex-item:first-child {
      opacity: 1;
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2); }

      .hexagon-item:hover .hex-item:first-child div:before,
      .hexagon-item:hover .hex-item:first-child div:after {
        height: 5px; }

    .hexagon-item:hover .hex-item div::before,
    .hexagon-item:hover .hex-item div::after {
      background-color: #FF0037;
      box-shadow: 0 0 10px #FF0037;}

    .hexagon-item:hover .hex-content svg {
      -webkit-transform: scale(0.97);
      -moz-transform: scale(0.97);
      -ms-transform: scale(0.97);
      -o-transform: scale(0.97);
      transform: scale(0.97); }

.page-home .hexagon-item:nth-last-child(1),
.page-home .hexagon-item:nth-last-child(2),
.page-home .hexagon-item:nth-last-child(3) {
  -webkit-transform: rotate(30deg) translate(87px, -80px);
  -moz-transform: rotate(30deg) translate(87px, -80px);
  -ms-transform: rotate(30deg) translate(87px, -80px);
  -o-transform: rotate(30deg) translate(87px, -80px);
  transform: rotate(30deg) translate(87px, -80px); }

.hex-item {
  position: absolute;
  top: 0;
  left: 50px;
  width: 100px;
  height: 173.20508px; }

  .hex-item:first-child {
    z-index: 0;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }

  .hex-item:last-child {
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1; }

  .hex-item div {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    width: 100px;
    height: 173.20508px;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center; }

    .hex-item div::before, .hex-item div::after {
      background-color: #1e2530;
      content: "";
      position: absolute;
      width: 100%;
      height: 3px;
      -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
      -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
      -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
      transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; }

    .hex-item div:before {
      top: 0; }

    .hex-item div:after {
      bottom: 0; }

    .hex-item div:nth-child(1) {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg); }
      
    .hex-item div:nth-child(2) {
      -webkit-transform: rotate(60deg);
      -moz-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
      -o-transform: rotate(60deg);
      transform: rotate(60deg); }
    .hex-item div:nth-child(3) {
      -webkit-transform: rotate(120deg);
      -moz-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
      -o-transform: rotate(120deg);
      transform: rotate(120deg); }

.hex-content {
  color: #fff;
  display: block;
  height: 180px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  transform: rotate(-30deg);
  width: 156px; }

  .hex-content .hex-content-inner {
    left: 50%;
    margin: -3px 0 0 2px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }

  .hex-content .icon {
    display: block;
    font-size: 36px;
    line-height: 30px;
    margin-bottom: 11px; }
    
  .hex-content .title {
    display: block;
    font-family: "Tektur", serif;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 24px;
    text-transform: uppercase; }

  .hex-content svg {
    left: -7px;
    position: absolute;
    top: -13px;
    transform: scale(0.87);
    z-index: -1;
    -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    -moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; }

  .hex-content:hover {
    color: #fff; }

.page-home .hexagon-item:nth-last-child(1), .page-home .hexagon-item:nth-last-child(2), .page-home .hexagon-item:nth-last-child(3) {
    -webkit-transform: rotate(30deg) translate(87px, -80px);
    -moz-transform: rotate(30deg) translate(87px, -80px);
    -ms-transform: rotate(30deg) translate(87px, -80px);
    -o-transform: rotate(30deg) translate(87px, -80px);
    transform: rotate(30deg) translate(87px, -80px);
}

@media (min-width: 1200px)
{
.col-lg-offset-2 {
    margin-left: 16.66666667%;
}
}

@media (min-width: 1200px)
{
.col-lg-8 {
    width: 66.66666667%;
}
}

.hexagon-item:first-child {
    margin-left: 0;
}

.pt-table.desktop-768 .pt-tablecell {
    padding-bottom: 110px;
    padding-top: 60px;
}



.hexagon-item:hover .icon i
{
  color:#FF0037;
  transition:0.6s;
  box-shadow: 0 0 10px #FF0037;
  
}


.hexagon-item:hover .title
{
  -webkit-animation: focus-in-contract 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: focus-in-contract 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/***************************/

@-webkit-keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

@media only screen and (max-width: 767px)
{
.hexagon-item {
    float: none;
    margin: 0 auto 50px;
}
  .hexagon-item:first-child {
    margin-left: auto;
}
  
  .page-home .hexagon-item:nth-last-child(1), .page-home .hexagon-item:nth-last-child(2), .page-home .hexagon-item:nth-last-child(3) {
    -webkit-transform: rotate(30deg) translate(0px, 0px);
    -moz-transform: rotate(30deg) translate(0px, 0px);
    -ms-transform: rotate(30deg) translate(0px, 0px);
    -o-transform: rotate(30deg) translate(0px, 0px);
    transform: rotate(30deg) translate(0px, 0px);
}
}








/* Mob City Styles */

/* Container for the info boxes - Flexbox for side-by-side display */
.info-box-container {
  display: flex;
  justify-content: center; /* Center the boxes horizontally */
  gap: 20px;  /* Space between the boxes */
  margin-top: 20px;  /* Space between hexagons and info boxes */
  margin-bottom: 40px; /* Space between info boxes and footer */
  flex-wrap: wrap;  /* Allow wrapping on smaller screens */
  padding-bottom: 100px; /* Push everything down */
}

/* Mob City Info Box */
.infoBox-MobCity {
  background-image: url("../img/modcity-banner.jpg");
  background-size: cover;
  background-position: center;
  display: none; /* Initially hidden */
  width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  background-color: rgba(30, 37, 48, 0.8);
  color: #FFFFFF;
  border-radius: 10px;
  text-align: center;
  opacity: 0; /* Start hidden */
  transition: opacity 0.5s ease, transform 0.5s ease;
  border-width: 2px;
  border-style: solid;
  border-color: #FF0037; /* Border color for Mob City */
  z-index: 500;
  transform: translateY(-50px); /* Initial position off-screen */
  margin-bottom: 50px;
}

/* Active state to show the box */
.infoBox-MobCity.active {
  display: block; /* Show the box */
  opacity: 1;
  transform: translateY(50px); /* Move into view */
}

/* Mobile Responsiveness - Stack them vertically on smaller screens */
@media (max-width: 768px) {
  .info-box-container {
    flex-direction: column; /* Stack the boxes vertically on smaller screens */
    align-items: center;  /* Center the boxes */
  }

  .infoBox-MobCity {
    width: 90%; /* Make the boxes take up more width on small screens */
    margin-bottom: 20px; /* Add space between the stacked boxes */
  }
}

/* Style for the whole invite box */
.discord-invite {
  background-color: #2f3136;
  border-radius: 8px;
  padding: 16px;
  max-width: 400px;
  margin: 10px auto;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Banner style, usually a thin colored bar */
.invite-banner {
  height: 5px;
  background: linear-gradient(to right, #5865F2, #7881e6);
  border-radius: 2px;
  margin-bottom: 10px;
}

/* Heading style for the invitation */
.discord-invite h4 {
  font-size: 16px;
  margin-bottom: 12px;
  text-align: left;
  color: #b9bbbe;
  text-decoration: none;
}

/* Server name and icon container */
.server-name {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

/* Server name text */
#server-name {
  font-size: 14px;
  font-weight: 600;
}

/* Server icon */
#server-icon {
  border-radius: 15%;
  margin-right: 10px;
}

#invite-banner {
  height: 150px; /* Adjust the height to your preference */
  background-size: cover; /* Ensures the image covers the container */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  border-radius: 10px;
  margin-bottom: 15px; /* Adjust spacing as needed */
}

/* Member count and join button wrapper */
.member-count-button-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Member count */
.member-count {
  font-size: 12px;
  color: #b9bbbe;
}

/* Join button style */
.MobCity-JoinButton {
  padding: 10px 18px;
  background-color: #5865F2;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

/* Hover effect for the join button */
.MobCity-JoinButton:hover {
  background-color: #7881e6;
}

/* CityBot Info Box */
.infoBox-CityBot {
  background-image: url("../img/city_banner_ping.gif");
  background-size: cover;
  background-position: center;
  display: none; /* Initially hidden */
  width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px;
  background-color: rgba(30, 37, 48, 0.8);
  color: #FFFFFF;
  border-radius: 10px;
  text-align: center;
  opacity: 0; /* Start hidden */
  transition: opacity 0.5s ease, transform 0.5s ease;
  border-width: 2px;
  border-style: solid;
  border-color: #0b7dff; /* Border color for CityBot */
  z-index: 500;
  transform: translateY(-50px); /* Initial position off-screen */
  margin-bottom: 50px;
}

/* Active state to show the box */
.infoBox-CityBot.active {
  display: block; /* Show the box */
  opacity: 1;
  transform: translateY(50px); /* Move into view */
}

/* Mobile Responsiveness - Stack them vertically on smaller screens */
@media (max-width: 768px) {
  .info-box-container {
    flex-direction: column; /* Stack the boxes vertically on smaller screens */
    align-items: center;  /* Center the boxes */
  }

  .infoBox-CityBot {
    width: 90%; /* Make the boxes take up more width on small screens */
    margin-bottom: 20px; /* Add space between the stacked boxes */
  }
}

/* InfoBox for both MobCity and CityBot */
.infoBox-MobCity,
.infoBox-CityBot {
  max-height: 90vh; /* Increase the height limit */
  overflow-y: auto; /* Allow scrolling if content overflows */
  margin-bottom: 100px; /* Increase bottom margin for extra space */
  padding-bottom: 20px; /* Add padding inside the box to prevent cutoff */
}

/* Bot Invite Box */
.bot-invite {
  background-color: #2f3136;
  border-radius: 8px;
  padding: 16px;
  max-width: 400px;
  margin: 10px auto;
  color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Banner style for CityBot invite */
.invite-banner {
  height: 5px;
  background: linear-gradient(to right, #0b7dff, #3c9df4);  /* Adjust color for CityBot theme */
  border-radius: 2px;
  margin-bottom: 10px;
}

/* Heading style for the invitation */
.bot-invite h4 {
  font-size: 16px;
  margin-bottom: 12px;
  text-align: left;
  color: #b9bbbe;
  text-decoration: none;
}

/* Bot name and icon container */
.bot-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

/* Bot name text */
#bot-name {
  font-size: 14px;
  font-weight: 600;
  margin-left: 10px;
}

/* Bot icon */
#bot-icon {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

/* Invite banner for the bot */
#invite-banner {
  height: 150px;  /* Adjust the height to your preference */
  background-size: cover;  /* Ensures the image covers the container */
  background-position: center;  /* Centers the image */
  background-repeat: no-repeat;  /* Prevents the image from repeating */
  border-radius: 10px;
  margin-bottom: 15px;  /* Adjust spacing as needed */
}

/* Member count and invite button wrapper */
.member-count-button-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Member count text */
.member-count {
  font-size: 12px;
  color: #b9bbbe;
}

/* Invite button style for CityBot */
.CityBot-InviteButton {
  padding: 10px 18px;
  background-color: #0b7dff;  /* Adjust the button color to match CityBot theme */
  color: white;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

/* Hover effect for the invite button */
.CityBot-InviteButton:hover {
  background-color: #3c9df4;  /* Lighter blue for hover effect */
}



/* FOOTER STYLE */
.site-footer, .site-footer * {
  font-family: "Tektur", serif;
}



.site-footer {
  margin-top: 100%;
  position: absolute;
  width: 100%;
  height: 80px;
  background-color: #1E2530;
  bottom: 1px;
  left: 0px;
  right: 0px;
  border-top: 2px solid #FF0037;
  box-shadow: 0 0 10px #FF0037;
  color: #fff;
  text-align: center;
  z-index: 9998;
}