@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');



@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap');





:root {

  --primary-color: #ff4081;

  --secondary-color: #00bcd4;

  --background-color: #121212;

  --text-color: #ffffff;

  --base-font-size: 22px;
  /* Increased from 16px (2x bigger) */

}



body {

  #font-family: 'Orbitron', sans-serif;

  background-color: var(--background-color);

  color: var(--text-color);

  margin: 0;

  padding: 0;

  overflow-x: hidden;

  font-size: var(--base-font-size);
  /* Apply base font size */

  line-height: 1.5;



}







p {

  font-family: "Oxanium", sans-serif;

  font-optical-sizing: auto;

}



footer {

  font-family: "Oxanium", sans-serif;

}

/* Responsive typography */

@media (max-width: 768px) {

  :root {

    --base-font-size: 24px;
    /* Slightly smaller on mobile */

    --title-font-size: 8rem;

  }

}



header {

  background-color: rgba(0, 0, 0, 0.8);

  padding: 1rem;

  position: fixed;

  width: 100%;

  z-index: 1000;

}



nav ul {

  list-style-type: none;

  padding: 0;

  display: flex;

  justify-content: center;

}



nav ul li {

  margin: 0 1rem;

}



nav ul li a {

  color: var(--text-color);

  text-decoration: none;

  font-weight: bold;

  transition: color 0.3s ease;

}



nav ul li a:hover {

  color: var(--primary-color);

}



.hero {

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  overflow: hidden;
  /* Ensure video does not overflow */

}



.hero-video {

  position: absolute;

  top: 50%;

  left: 50%;

  min-width: 100%;

  min-height: 100%;

  width: auto;

  height: auto;

  transform: translate(-50%, -50%);

  z-index: -1;

  filter: brightness(1);

}



.hero-content {

  text-align: center;

  position: relative;

  z-index: 1;

  color: white;
  /* Adjust text color for visibility */

}



.hero::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(0, 0, 0, 0.5);
  /* Overlay background color */

}









.section {

  padding: 4rem 2rem;

}



.section h2 {

  font-size: 2.5rem;

  margin-bottom: 2rem;

  text-align: center;

}





.btn {

  display: inline-block;

  background-color: var(--primary-color);

  color: var(--text-color);

  padding: 0.8rem 1.5rem;

  border-radius: 5px;

  text-decoration: none;

  font-weight: bold;

  transition: background-color 0.3s ease;

}



.btn:hover {

  background-color: var(--secondary-color);

}



/* about  */



.about_text {

  /* font-family: "Albert Sans", sans-serif; */

  font-optical-sizing: auto;

  background-color: var(--background-color);

  color: var(--text-color);

  margin: 0;

  padding-left: 2rem;

  padding-right: 1.2rem;

  overflow-x: hidden;

  font-size: var(--base-font-size);

  line-height: 1.5;

}



/* Glitch  */



.glitch-text {

  position: relative;

}

.glitch-text::before,

.glitch-text::after {

  content: attr(data-text);

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.glitch-text::before {

  left: 2px;

  text-shadow: -2px 0 #ff00c1;

  clip: rect(24px, 550px, 90px, 0);

  animation: glitch-anim-1 3s infinite linear alternate-reverse;

}

.glitch-text::after {

  left: -2px;

  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;

  animation: glitch-anim-2 2.5s infinite linear alternate-reverse;

}

.glitch-hover:hover::before {

  animation: glitch-anim-3 0.3s infinite;

}

.glitch-hover:hover::after {

  animation: glitch-anim-4 0.3s infinite;

}

@keyframes glitch-anim-1 {

  0% {
    clip: rect(5px, 9999px, 28px, 0);
  }

  25% {
    clip: rect(79px, 9999px, 98px, 0);
  }

  50% {
    clip: rect(32px, 9999px, 36px, 0);
  }

  75% {
    clip: rect(25px, 9999px, 61px, 0);
  }

  100% {
    clip: rect(53px, 9999px, 4px, 0);
  }

}

@keyframes glitch-anim-2 {

  0% {
    clip: rect(69px, 9999px, 90px, 0);
  }

  25% {
    clip: rect(14px, 9999px, 31px, 0);
  }

  50% {
    clip: rect(73px, 9999px, 86px, 0);
  }

  75% {
    clip: rect(67px, 9999px, 16px, 0);
  }

  100% {
    clip: rect(30px, 9999px, 82px, 0);
  }

}

@keyframes glitch-anim-3 {

  0% {
    clip: rect(1px, 9999px, 10px, 0);
  }

  25% {
    clip: rect(20px, 9999px, 40px, 0);
  }

  50% {
    clip: rect(5px, 9999px, 15px, 0);
  }

  75% {
    clip: rect(30px, 9999px, 50px, 0);
  }

  100% {
    clip: rect(10px, 9999px, 20px, 0);
  }

}

@keyframes glitch-anim-4 {

  0% {
    clip: rect(15px, 9999px, 25px, 0);
  }

  25% {
    clip: rect(5px, 9999px, 35px, 0);
  }

  50% {
    clip: rect(25px, 9999px, 45px, 0);
  }

  75% {
    clip: rect(10px, 9999px, 20px, 0);
  }

  100% {
    clip: rect(30px, 9999px, 40px, 0);
  }

}



.glitch-title {

  font-size: 6rem;

  font-weight: bold;

  text-transform: uppercase;

  position: relative;

  color: #fff;

  letter-spacing: 0.1em;

  animation: glitch-skew 1s infinite linear alternate-reverse;

}

.glitch-title::before,

.glitch-title::after {

  content: attr(data-text);

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.glitch-title::before {

  /* Animation for the red glitch */

  left: 2px;

  text-shadow: -2px 0 #ff00c1;

  clip: rect(44px, 450px, 56px, 0);

  animation: glitch-anim 5s infinite linear alternate-reverse;

}

.glitch-title::after {

  /* Animation for the blue glitch */

  left: -2px;

  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;

  animation: glitch-anim2 1s infinite linear alternate-reverse;

}



@keyframes glitch-anim {

  0% {

    clip: rect(10px, 9999px, 28px, 0);

    transform: skew(0.72deg);

  }

  5% {

    clip: rect(89px, 9999px, 98px, 0);

    transform: skew(0.1deg);

  }

  10% {

    clip: rect(32px, 9999px, 36px, 0);

    transform: skew(0.49deg);

  }

  15% {

    clip: rect(25px, 9999px, 61px, 0);

    transform: skew(0.37deg);

  }

  20% {

    clip: rect(53px, 9999px, 4px, 0);

    transform: skew(0.08deg);

  }

  25% {

    clip: rect(5px, 9999px, 28px, 0);

    transform: skew(0.65deg);

  }

  30% {

    clip: rect(79px, 9999px, 98px, 0);

    transform: skew(0.42deg);

  }

  35% {

    clip: rect(32px, 9999px, 36px, 0);

    transform: skew(0.16deg);

  }

  40% {

    clip: rect(25px, 9999px, 61px, 0);

    transform: skew(0.59deg);

  }

  45% {

    clip: rect(53px, 9999px, 4px, 0);

    transform: skew(0.27deg);

  }

  50% {

    clip: rect(15px, 9999px, 35px, 0);

    transform: skew(0.69deg);

  }

  55% {

    clip: rect(25px, 9999px, 45px, 0);

    transform: skew(0.31deg);

  }

  60% {

    clip: rect(10px, 9999px, 20px, 0);

    transform: skew(0.53deg);

  }

  65% {

    clip: rect(30px, 9999px, 40px, 0);

    transform: skew(0.12deg);

  }

  70% {

    clip: rect(45px, 9999px, 55px, 0);

    transform: skew(0.78deg);

  }

  75% {

    clip: rect(20px, 9999px, 30px, 0);

    transform: skew(0.21deg);

  }

  80% {

    clip: rect(35px, 9999px, 45px, 0);

    transform: skew(0.46deg);

  }

  85% {

    clip: rect(50px, 9999px, 60px, 0);

    transform: skew(0.34deg);

  }

  90% {

    clip: rect(15px, 9999px, 25px, 0);

    transform: skew(0.62deg);

  }

  95% {

    clip: rect(40px, 9999px, 50px, 0);

    transform: skew(0.39deg);

  }

  100% {

    clip: rect(5px, 9999px, 15px, 0);

    transform: skew(0.71deg);

  }

}



@keyframes glitch-anim2 {

  0% {

    clip: rect(69px, 9999px, 90px, 0);

    transform: skew(0.53deg);

  }

  20% {

    clip: rect(14px, 9999px, 31px, 0);

    transform: skew(0.25deg);

  }

  40% {

    clip: rect(73px, 9999px, 86px, 0);

    transform: skew(0.67deg);

  }

  60% {

    clip: rect(67px, 9999px, 16px, 0);

    transform: skew(0.39deg);

  }

  80% {

    clip: rect(30px, 9999px, 82px, 0);

    transform: skew(0.12deg);

  }

  100% {

    clip: rect(54px, 9999px, 43px, 0);

    transform: skew(0.81deg);

  }

}



@keyframes glitch-skew {

  0% {

    transform: skew(-1deg);

  }

  20% {

    transform: skew(0.5deg);

  }

  40% {

    transform: skew(-0.8deg);

  }

  60% {

    transform: skew(0.3deg);

  }

  80% {

    transform: skew(1deg);

  }

  100% {

    transform: skew(-0.6deg);

  }

}







/* Additional responsive tweaks */

@media (max-width: 768px) {

  .hero {

    height: 60vh;

    padding: 1rem;

  }



  .hero-content h1 {

    font-size: 3rem;

  }



  .hero-content p {

    font-size: 1rem;

  }



  .btn {

    padding: 0.5rem 1rem;

    font-size: 0.9rem;

  }



  .section {

    padding: 2rem 1rem;

  }



  .section h2 {

    font-size: 2rem;

  }



  .section p {

    font-size: 0.9rem;

  }

}



.hamburger {

  display: none;

  font-size: 2rem;

  cursor: pointer;

  color: var(--text-color);

}



/* Navigation links */

#nav-links {

  display: flex;

}



/* Responsive styles */

@media (max-width: 768px) {

  .hamburger {

    display: block;

  }



  #nav-links {

    display: none;

    flex-direction: column;

    background-color: rgba(0, 0, 0, 0.8);

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    z-index: 999;

  }



  #nav-links.active {

    display: flex;

  }



  nav ul li {

    margin: 1rem 0;

    text-align: center;

  }

}



/* *************************************************************************************************************** */



/* Section styles */

.section {

  padding: 2rem 1rem;

}



.section h2 {

  font-size: clamp(1.8rem, 5vw, 2.5rem);

  margin-bottom: 2rem;

  text-align: center;

}



.section h3 {

  color: rgb(38, 237, 230);

  font-size: clamp(1.2rem, 4vw, 1.5rem);

  margin-bottom: 0.5rem;

}



/* Card container styles */

.card-container {

  display: grid;

  grid-template-columns: repeat(3, minmax(200px, 1fr));

  gap: 2rem;

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

}



/* Card styles */

.card {

  background-color: rgb(31, 30, 30);

  border-radius: 10px;

  padding: 20px;

  padding: clamp(15px, 3vw, 20px);

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  display: flex;

  flex-direction: column;

  align-items: center;

  width: fit-content;

  margin: 0 auto;

}



.card-link {

  text-decoration: none;
  /* Removes underline from link */

  color: inherit;
  /* Inherits the text color from parent */

}



.card p {

  text-align: center;

  font-size: clamp(1.3rem, 2vw, 0.8rem);

  margin: 5px 0;

  line-height: 1.4;

}



.card:hover {

  transform: translateY(-5px);

  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);

}



/* Image container styles */

.card .image-container {

  width: 100%;

  margin-bottom: 15px;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  border-radius: 8px;

}



.card img {

  max-width: 100%;

  height: auto;

  object-fit: contain;

  transition: transform 0.3s ease;

}



.card:hover img {

  transform: scale(1.05);

}



.card h3 {

  text-align: center;

  margin-top: 10px;

  font-size: 1.1rem;

}







/* Media Queries */

@media (max-width: 768px) {

  .card-container {

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

  }



  .card {

    padding: 15px;

  }

}



@media (max-width: 480px) {

  .card-container {

    grid-template-columns: repeat(1, minmax(130px, 1fr));

  }

}



/* *************************************************************************************************************** */

.footer-dark {

  background-color: rgba(0, 0, 0, 0.9);

  padding: 2rem 0;

  color: var(--text-color);

  font-size: 0.9rem;

}



.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 20px;

}



.footer-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 1.5rem;

  margin-bottom: 1.5rem;

}



.footer-item h3 {

  color: var(--primary-color);

  font-size: 1.2rem;

  margin-bottom: 0.5rem;

}



.footer-item ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.footer-item ul li {

  margin-bottom: 0.3rem;

}



.footer-item a {

  color: var(--text-color);

  text-decoration: none;

  transition: color 0.3s ease;

}



.footer-item a:hover {

  color: var(--primary-color);

}



.footer-left {

  text-align: left;

}



.footer-center {

  text-align: start;

}



.footer-right {

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: center;

  text-align: center;

}



.footer-logo {

  max-width: 70%;

  height: 70%;

  margin: 10px;

}





.footer-center .icon-container {

  display: flex;

  justify-content: flex-start;

  gap: 0.8rem;

}



.copyright {

  text-align: center;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding-top: 1rem;

  margin-top: 1rem;

  font-size: 0.8rem;

}



/* Responsive adjustments */

@media (max-width: 768px) {

  .footer-dark {

    padding: 1.5rem 0;

  }



  .container {

    padding: 0 15px;

  }



  .footer-grid {

    grid-template-columns: 1fr;

  }



  .footer-item,

  .footer-left,

  .footer-center,

  .footer-right {

    text-align: center;

  }



  .footer-center .icon-container {

    justify-content: center;

  }

}





/* ****************************************************************************************************************** */

.brochure-section {

  background-color: #000;

  color: #fff;

  padding: 4rem 2rem;

}



.brochure-section p {

  font-family: 'Orbitron', sans-serif;

}



.brochure-container {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: space-between;

  max-width: 1200px;

  margin: 0 auto;

  gap: 2rem;

}



.brochure-content {

  flex: 1;

  max-width: 50%;

}



.brochure-content h2 {

  font-size: 2.5rem;

  margin-bottom: 1rem;

  color: var(--primary-color);

}



.brochure-content p {

  margin-bottom: 1rem;

  font-size: 1rem;

  line-height: 1.6;

}



.video-container {

  flex: 0 0 500px;

  height: 281px;

  position: relative;

  overflow: hidden;

  border-radius: 10px;

  border: 2px solid #ff4081;

}



.video-container iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: 10px;

}



.button-group {

  display: flex;

  justify-content: center;

  gap: 1rem;

}



.btn1 {

  display: inline-block;

  padding: 0.5rem 1rem;

  background-color: var(--primary-color);

  color: #fff;

  border-radius: 5px;

  text-decoration: none;

  transition: background-color 0.3s ease;

  font-size: 0.875rem;

}



.btn1-outline {

  background-color: transparent;

  border: 2px solid var(--primary-color);

  color: var(--primary-color);

}



.btn1-outline:hover {

  background-color: var(--primary-color);

  color: #fff;

}



.btn1:hover {

  background-color: #ff4081;

}



@media (max-width: 768px) {

  .brochure-container {

    flex-direction: column;

    text-align: center;

  }



  .brochure-content {

    max-width: 100%;

    order: 2;

  }



  .video-container {

    order: 1;

    margin-top: 0;

    flex: 0 0 300px;

    /* Maintaining 16:9 aspect ratio */

    margin-bottom: 2rem;

    width: 100%;

    max-width: 500px;

    height: 260px;

    padding-bottom: 0;

  }



  .button-group {

    justify-content: center;

  }

}



/* Additional media query for very small screens */

@media (max-width: 480px) {

  .video-container {

    height: 160px;

  }

}



/* Default cursor */

body {

  cursor: auto;

}



/* Show GIF cursor on hover for links and buttons */

a:hover,
button:hover {

  cursor: url('pointer.png'), auto;

}