@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira-Regular.woff2') format('woff2'), url('fonts/Saira-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Audiowide';
    src: url('fonts/Audiowide-Regular.woff2') format('woff2'), url('fonts/Audiowide-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body {
  font-family: 'Saira', Arial, sans-serif; /* Use the custom font as fallback */
}

body {
    margin: 0;
    font-family: 'Saira', Arial, sans-serif;
    background-color: #faf598;
}
h1, h2, h3, h4, h5, h6, h7 {
    font-family: 'Audiowide';
}

.navbar {
    display: block;
    align-items: center;
    position: sticky;
    top: 0.1%;
    z-index: 11;
    pointer-events: none;
    margin-left: 4%;
    margin-top: 4%;
}

.logo {
    width: 11%;
    height: auto;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;  
}

.navigation {
    border: 2px #25aae2; /* Adjust thickness and color as needed */
    padding-left: 10px; /* Adjust padding as needed */
    padding-top: 1.4%;
    padding-bottom: 1.4%;
    /*display: inline-block;  Ensures that the box only takes up the width of its content */
    background-color: #25aae2;
    border-top-right-radius: 5px;
    border-top-left-radius:5px;
    border-bottom-right-radius: 5px;
    text-align: center;
    margin-top: -10%;
    margin-right: 4%;
    pointer-events: auto;
}
  

nav a {
    color: white;
    text-decoration: none;
    font-size: 25px;
    padding: 10px 100px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0.5, 1, 1.5); /* Horizontal offset, vertical offset, blur radius, and shadow color */
    font-family: 'Audiowide';

}



.container {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.box {
  width: 420px;
  height: fit-content;
  font-family: 'Saira', Arial, sans-serif;
  background-color: #5cbcd7;
  border: 1px solid #ccc;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 9px 9px 14px rgba(0, 0, 0, 0.538), -8px -8px 12px rgba(0, 0, 0, 0), 0 8px 12px rgba(0, 0, 0, 0.559);
  position: relative;
  margin-top: 2%;
  z-index: 10;
}

.torus {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 1000px;
}

.circle {
  width: 90px;
  height: 90px;
  background-color: #eff2f4;
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform-origin: center;
  margin-left: -10%;
  margin-top: 13%;
  box-shadow: 0 5px 15px rgba(42, 41, 41, 0.5);
  z-index: 1;
  transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition for scaling and opacity */
  pointer-events: auto; /* Enable interaction for non-hidden circles */
}

.circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1s ease;
}

.circle.clicked {
  width: 160px;
  height: 160px;
  position: absolute;
  top: calc(100% - 5px); /* Adjust vertical position, higher if value is smaller */
  left: 30%; /* Adjust horizontal position, move right if value is positive */
  transform: translateX(-50%, 30%);
  border: 6px solid rgb(74, 65, 65);
  z-index: 2; /* Bring to front */
  transition: top 0.5s ease, left 0.5s ease, width 0.5s ease, height 0.5s ease, transform 0.5s ease; /* Smooth transitions for all properties */
  box-shadow: 0 55px 55px rgba(42, 41, 41, 0.5);
}

.circle.hidden {
  opacity: 0;
  pointer-events: none; /* Prevent interaction with hidden circles */
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

.circle.resetting {
  transition: none; /* Disable transition during reset to avoid jittering */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center back in the torus */
  width: 90px;
  height: 90px;
  z-index: 1;
  opacity: 1; /* Ensure visibility */
  border: none; /* Remove border if any */
}

  

  .cloud1 {
    margin-top: 350px;
    margin-right: 80%;
    position: absolute;
  }
  
  .cloud2 {
    margin-top: 450px;
    margin-left: 1000px;
    position: absolute;
  }

  .cloud3 {
    margin-top: 650px;
    margin-right: 750px;
    position: absolute;
  }

  .cloud4 {
    margin-top: 1px;
    margin-left: 1000px;
    position: absolute;
  }

  .inside-container {
      width: 70%; /* Adjust width as needed */
      height: auto; /* Adjust height as needed */
      background-color: #5495b7;
      border: 1px solid #ccc;
      font-family: Saira;
      padding: 20px;
      border-top-left-radius: 10%;
      border-top-right-radius: 10%; 
      margin-left: 14.5%;
      margin-top: 20%;
      display: flex;
  }

  .sidebar {
    width: 35%;
    background-image: url('Images/Background1.jpg');
    padding-top: 20px;
    font-size: 20px;
    border-radius: 10%;
    padding: 4% ;
    text-align: left;
    margin-top: 5%;
    margin-left: 5%;
  
  }

  .centered-logo {
    display: block;
    margin: 0 auto; /* Horizontally center */
  }

.avatar1 {
   width: 25%;
   height: 25%;
   margin-left: 20%;
}

.avatar2 {
 width: 28%;
 height: 30%;
 margin-top: 24%;
 margin-left: -12%;
 position: relative;
}

.avatar3 {
  width: 28%;
  height: 28%;
  position: relative;
  margin-top: 35%;
  margin-left: -51.8%;
}

.container2 {
  width: 70%; /* Adjust width as needed */
  height: auto; /* Adjust height as needed */
  background-color: #8ccff3;
  border: 1px solid #ccc;
  text-align: center;
  padding: 20px;
  border-radius: 10px; 
  margin-left: 14.5%;     
  display: flex;
  font-weight: 800;
  z-index: 1;
  position: relative;
}

.inside-container2-1, .inside-container2-2, .inside-container2-3 {
  text-align: center;
  
}
@keyframes move-down {
    0% {
        transform: translateY(-40%);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes fade-down{
    0%{
        opacity:0;
        transform: translateY(-40%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fade-up {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-40%);
    }
}
.container3 {
  width: 70%; /* Adjust width as needed */
  height: auto; /* Adjust height as needed */
  background-color: #6e4c85;
  border: 1px solid #ccc;
  text-align: center;
  padding: 20px;
  border-radius: 10px; 
  margin-left: 14.5%;     
  display: grid;
  font-weight: 800;
  opacity:0;
  pointer-events:none;
}

.inside-container3-1, .inside-container3-2, .inside-container3-3 {
    width: 90%;
    height:0px;
    background-color: white;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 5%;
    display: flex;
    opacity:0;
    border-radius: 15px;
    /*animation: fade-down 0.5s;*/
}
.contact-container {
    width: 70%; /* Adjust width as needed */
    height: auto; /* Adjust height as needed */
    background-color: #8ccff3;
    border: 1px solid #ccc;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    margin-left: 14.5%;
    display: grid;
}
.headerJoin{
    display:flex;
    align-items:flex-end;
}
.joiningParas{
    text-align:left;
    padding-left:25%;
    padding-right:25%
}
.joinText {
    color: #104a59;
    border-bottom: 12px solid;
    width: 75%;
}
.contactIcon {
    width: 25%;
    margin-right: -5%;
}
.iconCell {
    width: 25%;
    text-align: right;
    border-bottom: 12px solid #104a59;
    border-image: linear-gradient(to right, transparent 50%, #104a59 50%) 100% 1;
}
.joinLine {
    border-bottom: 12px solid #104a59;
}
.jobIcon {
    width: 20%;
    border: 1px solid #ccc;
}
.job{
    width: 33.333332%
}
.title{
    font-weight: bold;
}
.openedInfo {
    width: 70%; /* Adjust width as needed */
    height: auto; /* Adjust height as needed */
    background-color: white;
    border: 1px solid #ccc;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    margin-left: 14.5%;
    display: flex;
    flex-wrap: wrap;
    align-items:flex-start;
}
.contactPrompt{
    text-align:left;
    margin-left:30%;
}
.main-content1, .main-content2, .main-content3{
  width: 60%; 
  padding: 4%;
  text-align: left;
  font-size: 18px;
}

.sidebar1 {
    width: 40%;
    background-color: #e0eaf3;
    padding: 20px;
    text-align: center;
    border: 1px solid rgb(89, 87, 87);
    border-radius: 20px;
    padding: 20px;
    background-color: #d9ecf0;
    overflow: hidden;
    background-image: url('Images/GalaxyGang_Gameplay-img.jpg');
    background-size: cover;
    background-position: center;
}

.sidebar2 {
    width: 40%;
    background-color: #e0eaf3;
    padding: 20px;
    text-align: center;
    border: 1px solid rgb(89, 87, 87);
    border-radius: 20px;
    padding: 20px;
    background-color: #d9ecf0;
    overflow: hidden;
    background-image: url('Images/GalaxyGang_Mechanics-img.jpg');
    background-size: cover;
    background-position: center;
}

.sidebar3 {
    width: 40%;
    background-color: #e0eaf3;
    padding: 20px;
    text-align: center;
    border: 1px solid rgb(89, 87, 87);
    border-radius: 20px;
    padding: 20px;
    background-color: #d9ecf0;
    overflow: hidden;
    background-image: url('Images/GalaxyGang_Demo-Coming-img.jpg');
    background-size: cover;
    background-position: center;
}

.sidebar img {
    width: 100%; /* Make the image fill the sidebar horizontally */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure the image behaves as a block element */
}