/* 1. Imports: Clean Industrial & Terminal Fonts */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Michroma&family=Plus+Jakarta+Sans:wght@300;400;600&display=swap');

:root {
    --font-ui: 'Michroma', sans-serif;      /* Headers / Navigation */
    --font-data: 'JetBrains Mono', monospace; /* Labels / Technical text */
    --font-body: 'Plus Jakarta Sans', sans-serif; /* Paragraphs */
}

/* Apply to Body - Keeping it clean and white */
body, p, li, .about-text, .department-desc {
    font-family: var(--font-body) !important;
    color: #e5e5e5;
    letter-spacing: 0.01em;
}

/* Headings - Using the wide "Industrial" font */
h1, h2, h3, h4, .logo span, .project-card h3, .view-text h2 {
    font-family: var(--font-ui) !important;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 3px; /* Emphasizes the tech look */
}

/* Data & Navigation - Using the "Terminal" font */
nav a, .year, .contact-item, .step, .rov-info p, .label {
    font-family: var(--font-data) !important;
    color: #cccccc;
    font-size: 0.85rem;
    text-transform: none;
}

/* Logo & Buttons - Force the tech look */
.logo span, .btn-primary {
    font-family: var(--font-ui) !important;
    font-weight: normal; /* Michroma is naturally bold */
    letter-spacing: 2px;
}

/* Mobile Compatibility Fixes */
@media (max-width: 768px) {
    h1 { font-size: 1.8rem !important; letter-spacing: 1.5px; }
    h2 { font-size: 1.4rem !important; }
    nav a { font-size: 0.75rem; margin-left: 15px; }
} 

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#0b0b0f;
    color:#e5e5e5;
    line-height:1.6;
}




/* HEADER */

header{
    position:fixed;
    width:100%;
    padding:20px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#0b0b0f;
    border-bottom:1px solid #1a1a1f;
    z-index:1000;
}

.logo{
    font-weight:700;
    letter-spacing:1px;
}

nav a{
    margin-left:30px;
    text-decoration:none;
    color:#ccc;
    font-weight:500;
}

nav a:hover{
    color:#fff;
}

/* HERO */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:120px 8% 80px;
}

.hero h1{
    font-size:3rem;
    max-width:800px;
    margin:auto;
}

.hero-sub{
    margin:25px auto;
    max-width:700px;
    color:#aaa;
}

.btn-primary{
    display:inline-block;
    padding:12px 28px;
    background:#ffffff;
    color:#000;
    text-decoration:none;
    font-weight:600;
    border-radius:5px;
}

/* SECTIONS */

.section{
    padding:100px 8%;
}

.section.alt{
    background:#111117;
}

.container{
    max-width:1100px;
    margin:auto;
}

h2{
    font-size:2rem;
    margin-bottom:40px;
}

.about-text{
    margin-bottom:50px;
    color:#bbb;
}

.values-grid,
.projects-grid,
.board-grid{
    display:grid;
    gap:30px;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}

.value-card,
.project-card,
.board-card{
    background:#16161d;
    padding:30px;
    border-radius:8px;
    border:1px solid #222;
}

.value-card h3,
.project-card h3{
    margin-bottom:15px;
}

.board-card h4{
    margin-bottom:10px;
}

/* FOOTER */

footer{
    padding:40px;
    text-align:center;
    background:#0b0b0f;
    border-top:1px solid #1a1a1f;
}

/* RESPONSIVE */

@media(max-width:768px){
.hero h1{
    font-size:2.2rem;
}
}
/* ============================= */
/* SCROLL REVEAL */
/* ============================= */
.reveal{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal.active{
    opacity: 1;
    transform: translateY(0);
}

/* ============================= */
/* HERO FADE IN */
/* ============================= */

.hero{
    opacity:0;
    transform:translateY(40px);
    transition:all 1s ease;
}

.hero.hero-visible{
    opacity:1;
    transform:translateY(0);
}


/* ============================= */
/* ACTIVE NAV LINK */
/* ============================= */

nav a.active{
    color:#ffffff;
    font-weight:600;
    border-bottom:2px solid white;
    padding-bottom:4px;
}
h1, h2, h3, .logo{
    font-family:'Space Grotesk',sans-serif;
    letter-spacing:0.5px;
}
/* PROJECT CARD */

.project-card{
    cursor:pointer;
    transition:0.4s ease;
}

.project-card:hover{
    transform:translateY(-8px);
}
.projects-grid .project-card{
    transition-delay: calc(var(--i) * 0.1s);
}
/* OVERLAY */

.project-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.95);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    pointer-events:none;
    transition:0.5s ease;
    z-index:2000;
}

.project-overlay.active{
    opacity:1;
    pointer-events:all;
}

.overlay-content{
    position:relative;
    max-width:1000px;
    width:90%;
    display:flex;
    align-items:center;
    gap:60px;
    transform:scale(0.8);
    transition:0.5s ease;
}

.project-overlay.active .overlay-content{
    transform:scale(1);
}

.overlay-content img{
    width:450px;
    border-radius:12px;
}

.overlay-text{
    max-width:450px;
}

.close-overlay{
    position:absolute;
    top:-40px;
    right:-20px;
    font-size:2rem;
    cursor:pointer;
}
.projects-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:40px;
    margin-top:60px;
}

.project-card{
    background:rgba(255,255,255,0.05);
    border-radius:20px;
    overflow:hidden;
    transition:0.4s ease;
    cursor:pointer;
}

.project-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,0.4);
}

.project-image img{
    width:100%;
    height:250px;
    object-fit:cover;
    transition:0.5s ease;
}

.project-card:hover .project-image img{
    transform:scale(1.1);
}

.project-info{
    padding:20px;
}

/* Timeline */
.timeline{
  display:flex;
  flex-direction:column;
  gap:30px;
  margin-top:40px;
}

.timeline-item{
  position:relative;
  padding-left:60px;
  border-left:2px solid var(--red-main);
}

.timeline-item .year{
  position:absolute;
  left:-10px;
  top:0;
  font-weight:700;
  color:var(--red-main);
  background:#120000;
  padding:2px 8px;
  border-radius:6px;
}

/* Workflow */
.workflow-steps{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:40px;
}

.step{
  padding:20px 30px;
  border-radius:30px;
  background:rgba(255,0,0,0.1);
  transition:0.3s;
}

.step:hover{
  background:var(--red-main);
  color:black;
  transform:translateY(-5px);
}

/* Sponsors */
.sponsors-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:40px;
  align-items:center;
  margin-top:40px;
}

.sponsor-card img{
  width:100%;
  filter:grayscale(100%);
  transition:0.4s;
}

.sponsor-card img:hover{
  filter:grayscale(0%);
  transform:scale(1.05);
}

/* Contact Form */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:600px;
  margin:auto;
}

.contact-form input,
.contact-form textarea{
  padding:15px;
  border-radius:10px;
  border:1px solid rgba(8, 8, 8, 0.3);
  background:rgba(20,0,0,0.5);
  color:white;
}

.contact-form button{
  padding:15px;
  border:none;
  border-radius:30px;
  background:var(--red-main);
  color:black;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.contact-form button:hover{
  background:#000000;
  transform:scale(1.05);
}

/* Parallax section */
.parallax{
  background: url('parallax-bg.jpg') no-repeat center center / cover fixed;
  color:#ffffff;
  text-align:center;
  padding:120px 8%;
}
/* Department card hover effect */
.department-card{
  position:relative;
  padding:40px;
  background: rgba(20, 20, 20, 0.9); /* Dark black */
  border-radius:15px;
  border:1px solid rgba(255, 255, 255, 0.1); /* subtle white border */
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s, background 0.4s;
  cursor:pointer;
  overflow:hidden;
}

.department-card h3{
  margin-bottom:15px;
  color: #ffffff; /* White text */
  font-weight:600;
}

.department-desc{
  opacity:0;
  transform: translateY(15px);
  transition: opacity 0.4s, transform 0.4s;
  font-size:0.95rem;
  line-height:1.6;
  color: #cccccc; /* Light gray description */
}

/* Hover: scale card and reveal description */
.department-card:hover{
  transform: scale(1.05);
  background: rgba(40, 40, 40, 0.95); /* Slightly lighter black */
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.department-card:hover .department-desc{
  opacity:1;
  transform: translateY(0);
}

/* About Section Styling */
.about-section{
  padding:100px 8%;
  background:#000; /* Black background */
  color:#fff; /* White text */
  max-width:1200px;
  margin:auto;
}

.about-section h2{
  font-size:2rem;
  margin-bottom:20px;
  font-weight:600;
  border-left: 5px solid #fff;
  padding-left:10px;
}

.about-text{
  font-size:1rem;
  line-height:1.8;
  margin-bottom:50px;
  opacity:0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Reveal visible */
.about-text.visible{
  opacity:1;
  transform: translateY(0);
}

.modal-content{
  flex-direction: column;
  width: 90%;
  height: auto;
}
.modal-content img{
  width: 90%;
  margin-bottom: 20px;
}

h2{
  font-size: clamp(1.5rem, 4vw, 2rem);
}
h3{
  font-size: clamp(1.2rem, 3vw, 1.5rem);
}

.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px;
}

/* Project Card */
.project-card{
  background: rgba(30,30,30,0.9);
  border-radius:15px;
  overflow:hidden;
  cursor:pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  border:1px solid rgba(255,255,255,0.1);
}

.project-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  transition: transform 0.3s;
}

.project-card h3{
  padding:15px;
  color:white;
  font-weight:600;
}

.project-card:hover{
  transform: scale(1.03);
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.project-card:hover img{
  transform: scale(1.05);
}

/* Modal */
.projects-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.project-card{
background:#000000;
border:1px solid #000000;
border-radius:10px;
overflow:hidden;
cursor:pointer;
transition:0.3s;
text-align:center;
}

.project-card img{
width:100%;
height:220px;
object-fit:cover;
}

.project-card h3{
padding:15px;
font-size:1.2rem;
}

.project-card:hover{
transform:translateY(-8px);
box-shadow:0 10px 30px rgba(0, 0, 0, 0.4);
}

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:80%;
background:rgba(0,0,0,0.85);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:0.3s;
z-index:2000;
}

.modal.active{
opacity:1;
pointer-events:auto;
}

.modal-content{
background:#050505;
width:75%;
max-width:1000px;
border-radius:10px;
display:flex;
gap:40px;
padding:40px;
position:relative;
animation:modalOpen 0.4s ease;
}

@keyframes modalOpen{
from{
transform:scale(0.8);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}

.modal-left{
flex:1;
}

.modal-left img{
width:100%;
border-radius:10px;
}

.modal-right{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
}

.modal-right h2{
font-size:2rem;
margin-bottom:20px;
}

.modal-right p{
line-height:1.7;
color:#ccc;
}

.close-btn{
position:absolute;
top:10px;
right:15px;
font-size:30px;
background:none;
border:none;
color:white;
cursor:pointer;
}
@media(max-width:768px){

.modal-content{
flex-direction:column;
width:90%;
}

.modal-left img{
height:250px;
object-fit:cover;
}

}
/* Mobile Responsive */
@media(max-width:768px){
  .modal-content{
    flex-direction:column;
    width:90%;
    height:auto;
  }
}



/* Mobile Responsive */
@media(max-width:768px){
  .modal-content{
    flex-direction: column; /* stack on mobile */
    width: 90%;
    height: auto;
  }
  
@media(max-width:768px){
  .logo span {
    font-size: 1.2rem;
  }
  .logo-img {
    width: 30px;
    height: 30px;
  }
}

.logo {
  display: flex;
  align-items: center;  /* vertically centers text with the image */
  gap: 10px;            /* spacing between logo and text */
}



.logo span {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: white;
  line-height: 1;      /* ensures vertical centering */
}

@media(max-width:768px){
  .logo-img {
    width: 30px;
    height: 30px;
  }

  .logo span {
    font-size: 1.2rem;
  }
}
}

/* pop up */
.projects-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
margin-top:50px;
}
.project-card{
background:#0a0a0a;
border-radius:14px;
overflow:hidden;
cursor:pointer;
transition:0.35s;
border:1px solid #222;
}

.project-card img{
width:100%;
height:220px;
object-fit:cover;
}

.project-card h3{
padding:15px;
}

.project-card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 20px 40px rgba(0,0,0,0.5);
}
.project-view{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.85);

display:flex;
align-items:center;
justify-content:center;

opacity:0;
pointer-events:none;

transition:0.4s;

z-index:3000;

}

.project-view.active{
opacity:1;
pointer-events:auto;
}

.view-content{

background:#050505;

width:75%;
max-width:1100px;

border-radius:20px;

display:flex;

gap:50px;

padding:50px;

transform:scale(0.8);

transition:0.4s;

}

.project-view.active .view-content{
transform:scale(1);
}

.view-image{
flex:1;
}

.view-image img{
width:100%;
border-radius:14px;
}

.view-text{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
}

.view-text h2{
font-size:2rem;
margin-bottom:20px;
}

.view-text p{
line-height:1.7;
color:#ccc;
}

.close-view{

position:absolute;

top:30px;
right:40px;

font-size:35px;

background:none;
border:none;

color:white;

cursor:pointer;

}
@media(max-width:768px){

.view-content{
flex-direction:column;
width:90%;
padding:30px;
}

.view-image img{
height:250px;
object-fit:cover;
}

}
.modal{
backdrop-filter: blur(10px);
}




.view-layout{
display:flex;
gap:40px;
align-items:center;
}

.rov-image-container{
position:relative;
flex:1;
}

.rov-image{
width:100%;
border-radius:12px;
}

.rov-info{
flex:1;
text-align:left;
}

.rov-info h3{
font-size:28px;
margin-bottom:10px;
}

.rov-info p{
font-size:16px;
opacity:0.8;
}

/* HOTSPOTS */
/* HOTSPOTS WITH LINES */

.hotspot{
position:absolute;
display:flex;
align-items:center;
cursor:pointer;
}

.dot{
width:14px;
height:14px;
background:white;
border-radius:50%;
box-shadow:0 0 10px rgba(255,255,255,0.9);
z-index:2;
transition:0.2s;
}

.line{
width:80px;
height:2px;
background:white;
margin-left:8px;
opacity:0.8;
transition:0.3s;
}

.hotspot:hover .dot{
transform:scale(1.4);
}

.hotspot:hover .line{
width:120px;
}








.hotspot {
  position: absolute;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dot {
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,255,255,0.9);
  z-index: 2;
  transition: 0.2s;
}

.line {
  width: 80px;
  height: 2px;
  background: white;
  margin-left: 8px;
  opacity: 0.8;
  transition: 0.3s;
}

.label {
  margin-left: 10px;        /* space after the line */
  color: white;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;       /* prevents wrapping */
  opacity: 0;                /* hide initially */
  transition: opacity 0.3s;
}

/* Hover effect */
.hotspot:hover .dot {
  transform: scale(1.4);
}

.hotspot:hover .line {
  width: 120px;  /* extend the line */
}

.hotspot:hover .label {
  opacity: 1;    /* show the label */
}


@media (max-width:768px){
  .label {
    opacity: 1;  /* always visible on mobile */
    font-size: 12px;
  }
  .line {
    width: 80px;  /* fixed line length */
  }
}




/* Headings */
h1, h2, h3, h4, .logo span {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.5px;
}

/* Body text */
body, p, li, nav a, .about-text, .department-desc {
    font-family: 'Inter', sans-serif;
}

/* Accent / Logo or buttons */
.logo span, .btn-primary {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

.logo-svg {
  width: 80px;
  height: 80px;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px; /* space between SVG and text */
}

.logo-svg {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 0 5px #4cb7ff) drop-shadow(0 0 10px #4cb7ff);
}






.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-svg {
  width: 80px;
  height: 80px;
  cursor: pointer;
  /* Floating animation */
  animation: float 2s ease-in-out infinite;
}

/* Float up and down */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); } /* moves up */
  100% { transform: translateY(0); }   /* back to start */
}

/* Optional: make text glow a bit like water reflection */
.logo span {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: #ffffff;
  text-shadow: 0 0 8px #ffffff;
}

/* Mobile responsiveness */
@media(max-width:768px){
  .logo-svg {
    width: 40px;
    height: 40px;
    animation: float 2s ease-in-out infinite;
  }
  .logo span {
    font-size: 1.2rem;
  }
}




.logo-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Floating + sway animation only on desktop */
.logo-svg {
  width: 80px;
  height: 60px;
  animation: float 2s ease-in-out infinite, sway 4s ease-in-out infinite;
}

/* Floating up and down */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* Gentle sway tilt */
@keyframes sway {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

/* Bubbles container */
.bubbles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}

/* Bubble element */
.bubble {
  position: absolute;
  bottom: 0;
  width: var(--size);
  height: var(--size);
  background: rgba(0,255,255,0.6);
  border-radius: 50%;
  left: var(--left);
  animation: rise var(--duration) linear infinite;
}

@keyframes rise {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-40px) scale(1.2); opacity: 0; }
}

/* Team name styling */
.logo-container span {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: #00ffff;
  text-shadow: 0 0 8px #00ffff;
}

/* ==================== */
/* MOBILE STABILITY */
/* Disable animations and hide bubbles on mobile */
@media(max-width:768px){
  .logo-svg {
    animation: none;
  }
  .bubbles {
    display: none;
  }
  .logo-container span {
    font-size: 1.2rem;
  }
}


.logo {
  display: flex;
  align-items: center;
  gap: 10px; /* space between logo and text */
}

.logo-svg {
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.logo span {
  font-family: 'Space Grotesk', sans-serif; /* or your chosen font */
  font-weight: 800;
  font-size: 1.5rem;
  color: white;       /* ensure it’s visible */
  line-height: 1;     /* vertically centered with SVG */
}


/* Sponsors Section */

.sponsors{
padding:100px 10%;
text-align:center;
}

.sponsors h2{
font-size:36px;
margin-bottom:50px;
}

/* Grid */

.sponsors-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:30px;
}

/* Glass Card */

.sponsor-card{

height:120px;

display:flex;
align-items:center;
justify-content:center;

border-radius:15px;

background:rgba(255,255,255,0.08);

backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,0.2);

transition:0.35s;
}

/* Hover Effect */
.sponsor-card img{
    max-width:120px;
    max-height:60px;

    /* black/white logo by default */
    filter: brightness(0) invert(1);

    transition:0.3s;
}

/* When hovering the CARD */
.sponsor-card:hover img{
    filter:none;
}
/* Logo */

.sponsor-card img{

max-width:120px;
max-height:60px;

filter:brightness(0) invert(1);

}

.sponsor-card:hover{

transform:translateY(-8px);

box-shadow:
0 0 20px rgba(255,255,255,0.25);

}

/* Default (desktop) */
.sponsor-card img{
    max-width:120px;
    max-height:60px;

    filter: brightness(0) invert(1);
    transition:0.3s;
}

/* Hover on desktop */
.sponsor-card:hover img{
    filter: none;
}


/* Mobile phones */
@media (max-width:768px){

.sponsor-card img{
    filter:none; /* always colored */
}

}

@media (hover:none){
.sponsor-card img{
    filter:none;
}
}

.sponsor-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:30px;
    margin-top:40px;
}

.contact-section{
padding:120px 8%;
background:#000;
color:white;
}

.section-title{
text-align:center;
font-size:2.5rem;
margin-bottom:60px;
}

.contact-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
max-width:1200px;
margin:auto;
}

/* Contact info */

.contact-info h3{
font-size:1.8rem;
margin-bottom:20px;
}

.contact-info p{
opacity:0.8;
margin-bottom:30px;
line-height:1.6;
}

.contact-item{
margin-bottom:15px;
font-size:1rem;
}

/* Form */

.contact-form{
display:flex;
flex-direction:column;
gap:20px;
}

.contact-form input,
.contact-form textarea{
padding:15px;
background:#111;
border:1px solid #333;
border-radius:8px;
color:white;
font-size:1rem;
}

.contact-form input:focus,
.contact-form textarea:focus{
outline:none;
border-color:white;
}

.contact-form button{
padding:15px;
border:none;
background:white;
color:black;
font-weight:600;
border-radius:8px;
cursor:pointer;
transition:0.3s;
}

.contact-form button:hover{
background:#ddd;
}

@media(max-width:768px){

.contact-container{
grid-template-columns:1fr;
}

}

body{
    background:black;
}

.contact-socials{
display:flex;
gap:20px;
margin-top:20px;
}

.contact-socials a{
width:45px;
height:45px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;
background:#111;

color:white;
font-size:20px;

transition:0.3s;
text-decoration:none;
}

/* Hover effect (desktop) */
.contact-socials a:hover{
background:white;
color:black;
transform:translateY(-3px);
}

/* Mobile friendly tap size */
@media(max-width:768px){

.contact-socials a{
width:50px;
height:50px;
font-size:22px;
}

}




/* This sits off-screen until the button is clicked */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    background: #0b0b0f; /* Match your body background */
    z-index: 9999;
    transform: translateY(100%); /* Start hidden below the screen */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

/* When the JS adds this class, it slides up to cover everything */
.page-transition-overlay.active {
    transform: translateY(0);
    pointer-events: all;
}







.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Keeps the hero section content snappy */
    perspective: 1000px;
}

.hero-content {
    text-align: center;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    will-change: transform, opacity;
}

/* Optional: Add a slight glow to the H1 to make it pop during the move */
.hero h1 {
    font-family: var(--font-ui) !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}


.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, transparent 70%);
    z-index: -1;
    animation: pulse 8s infinite alternate;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.3; }
    100% { transform: scale(1.2); opacity: 0.6; }
}


/* Desktop: Initial state for animation */
.reveal-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* When the "active" class is added via JS */
.reveal-card.active {
    opacity: 1;
    transform: translateY(0);
}

/* MOBILE: Make them static (Reset all animations) */
@media (max-width: 768px) {
    .reveal-card {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
}


/* Global fix for side-flying elements */
.reveal-card {
    opacity: 0;
    /* This transition applies when ADDING the .active class */
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.6s ease-out;
    will-change: transform, opacity;
}

/* When the card is leaving (resetting), we make it move back faster 
   so the user doesn't see it sliding slowly out of view. */
.reveal-card:not(.active) {
    transition: transform 0.4s ease-in, opacity 0.3s ease-in;
}

.reveal-card.from-left { transform: translateX(-150px); }
.reveal-card.from-right { transform: translateX(150px); }

.reveal-card.active {
    opacity: 1;
    transform: translateX(0);
}
/* Page fade in */
body{
opacity:0;
animation:fadeIn .6s forwards;
}

@keyframes fadeIn{
to{
opacity:1;
}
}

/* Page fade out */
body.fade-out{
opacity:0;
transition:opacity .6s ease;
}
/* MOBILE: Perfectly static as requested */
@media (max-width: 768px) {
    .reveal-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Page fade overlay */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.6s ease;
}

.page-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Body fade-out for old page (optional) */
body.fade-out {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Navbar layout */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 8%;
  background: #0b0b0f;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
  align-items: center;
}

nav a.nav-link {
  position: relative;
  text-decoration: none;
  color: #ccc;
  font-weight: 500;
  padding: 5px 0;
  transition: color 0.3s ease;
}

nav a.nav-link:hover {
  color: #fff;
}

/* Underline animation */
nav a.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: #00ffff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

nav a.nav-link:hover::after {
  transform: scaleX(1);
}

/* Detect hover direction (left/right) */
nav a.nav-link[data-hover-from="right"]::after {
  transform-origin: right;
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}
/* ============================ */
/* MOBILE RESPONSIVE */
@media(max-width:768px){
  .hamburger {
    display: block;
  }

  nav ul {
    position: absolute;
    top: 100%;
    right: 0;
    background: #0b0b0f;
    flex-direction: column;
    width: 200px;
    gap: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }

  nav ul.active {
    max-height: 500px; /* enough to show all links */
  }

  nav ul li {
    border-bottom: 1px solid #222;
  }

  nav a.nav-link {
    padding: 15px;
  }
}

/* Underline animation */
nav a.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: #00ffff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

nav a.nav-link:hover::after {
  transform: scaleX(1);
}

/* MOBILE: remove underline */
@media(max-width:768px){
  nav a.nav-link::after {
    display: none;
  }
}


body {
  opacity: 0;
  transition: opacity 0.6s ease;
}

body.fade-in {
  opacity: 1;
}

body.fade-out {
  opacity: 0;
}


/* gear icon */
.gear-icon{
animation:gearSpin 8s linear infinite;
}

@keyframes gearSpin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

.department-card p{
opacity:0;
transform:translateY(10px);
transition:0.3s;
}

/* show on hover for desktop */

.department-card:hover p{
opacity:1;
transform:translateY(0);
}

/* MOBILE FIX */

@media (max-width:768px){

.department-card p{
opacity:1;
transform:none;
}

}

.department-card svg{
color:#00c2ff;
margin-bottom:15px;
transition:0.3s;
}

.department-card:hover svg{
transform:scale(1.15);
color:#00e5ff;
}

.department-card svg{
width:60px;
height:60px;
}
.hero{
position:relative;
height:100svh;
overflow:hidden;
}

.hero-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-1;
}

.hero-content{
position:relative;
z-index:2;
text-align:center;
color:white;
}

.sponsor-card{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    border-radius:12px;
    background:transparent;
    transition:background 0.3s ease;
}

.sponsor-card:hover{
    background:white;
}

.sponsor-card img{
    max-width:120px;
    transition:transform 0.3s ease;
}

.sponsor-card:hover img{
    transform:scale(1.1);
}

.hero-content h1{
    font-size:4rem;
    font-weight:700;
    font-family:'Inter', sans-serif;
    margin-bottom:20px;
}

.hero-content p{
    font-size:1.3rem;
    font-weight:400;
    font-family:'Inter', sans-serif;
    max-width:700px;
    margin:0 auto;
    line-height:1.6;
}

@media (max-width:768px){

.hero-content h1{
    font-size:2.5rem;
}

.hero-content p{
    font-size:1.1rem;
    padding:0 20px;
}

}
.hero-content h1{
text-transform:uppercase;
letter-spacing:3px;
}

/* Main Header Container */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background: #0b0b0f;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Logo Section */
.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative; /* Keep bubbles/loader relative to this area */
}

.logo-img {
    height: 45px; /* Adjust based on your image size */
    width: auto;
}

.logo span {
    font-family: 'Michroma', sans-serif !important;
    color: #ffffff;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px; /* The "Upgrade" factor */
    white-space: nowrap;
}

/* Navigation Links */
.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
}

.nav-link {
    text-decoration: none;
    color: #cccccc;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #ffffff;
}

/* Responsive: Mobile */
@media (max-width: 992px) {
    .hamburger {
        display: block;
    }

    .nav-links {
        display: none; /* Hide links by default on mobile, toggle with JS */
        position: absolute;
        top: 100%;
        right: 0;
        background: #0b0b0f;
        flex-direction: column;
        width: 100%;
        text-align: center;
        padding: 20px 0;
        border-top: 1px solid #222;
    }
    
    /* If you have a class for "active" menu via JS */
    .nav-links.active {
        display: flex;
    }

    .logo span {
        font-size: 1rem;
        letter-spacing: 1px;
    }
}
.sponsor-card {
  display: block;
  padding: 15px;
  border-radius: 10px;
  background: transparent;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.sponsor-card:hover {
  background-color: white;
  transform: translateY(-5px); /* slight lift effect */
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
  .sponsor-card {
    background-color: white;
  }
}


.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* Full screen height */
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Black at 50% opacity */
  z-index: 1; /* Makes sure it stays above the video */
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures video fills the space */
}
@media (max-width: 768px) {
  /* Hide all nav items by default on mobile */
  .nav-links li {
    display: none;
  }

  /* Show only the 2nd and 3rd list items (Projects and Components) */
  .nav-links li:nth-child(2),
  .nav-links li:nth-child(3) {
    display: block;
  }

  /* Ensure the navigation container is visible when the hamburger is active */
  .nav-links.active {
    display: flex;
    flex-direction: column;
    /* Add your positioning styles here */
  }
}