* { margin: 0; padding: 0; box-sizing: border-box; }
/* === VARIABLES === */
:root{
  --red-main: #c00;
  --red-secondary: #900;
  --red-main-hover: #f33;
  --red-primary: #f33;
  --red-secondary: #f66;
  --white-absolute: white;
  --white-primary: #ddd;
  --white-pink: #fdd;
  --white-pink-text: #f88;
  --box-shadow-red: 0 0 30px rgba(255,0,0,0.6);
  --bg-dark: rgba(0, 0, 0, 0.6);
  --bg-light: transparent;
  --header-scrolled-height: 5em;
}

/* === BODY === */
body { 
  font-family: 'IranSansX', sans-serif; 
  color: #fff; 
  overflow-x: hidden; 
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('assets/hero-desktop.jpg') center/cover no-repeat;
  background-attachment: fixed; 
}

@media (max-width: 640px) {
  body{
    font-size: 8px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.7)), url('assets/hero-mobile.jpg') top/auto no-repeat;
    background-attachment: fixed; 
  }
}

input, select, textarea, button{
  font-family: 'IranSansX', sans-serif;
}

/* ==== HEADER ==== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 9em;
  z-index: 1000;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 2em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none; 
}

.header.scrolled {
  height: var(--header-scrolled-height);
  background: linear-gradient(135deg, var(--red-main), #900);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0.5em 2em rgba(0,0,0,0.4);
  padding: 1em;
}

.header-content {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
  pointer-events: auto;
  position: relative;
  display: flex;
}

.header .logos {
  display: flex;
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0
}

.header .logos.large {  gap: 2em;  opacity: 1;}
.header .logos.small {  gap: 1em;  opacity: 0;}
.header .logos img{ height: 100%;}
.header .logos.large img {  filter: drop-shadow(0 0 1em rgba(255,255,255,0.9));}
.header img:last-child{  margin-right: auto; }
.header.scrolled .logos.large {  opacity: 0;}

.header .title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2em;
  font-weight: 900;
  color: white;
  opacity: 0;
  transition: opacity 0.6s ease 0.2s;
  text-shadow: 0 0 2.2em rgba(0,0,0,0.8);
  white-space: nowrap;
}
.header.scrolled .title, .header.scrolled .logos.small {  opacity: 1;}

@media (max-width: 640px) {
  :root{
    --header-scrolled-height:6em
  }
  .header.scrolled { height: var(--header-scrolled-height); padding: 1em; }
  .header .logos.small img:nth-child(3){margin-right: auto;}
  .header .logos.small img:last-child{margin-right: 0;}
  .header .title {max-width: 50%;}
  .header .title span:last-child{display: none;}
}

/* ==== SECTIONS COMMON ==== */
section { padding: 8em 0;display: flex; min-height: calc(100vh - var(--header-scrolled-height));}
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5em; }
h2{ font-size: 3em; margin-bottom: 2em; text-align: center;}

#message {text-align: center;}
.challenge, .hooshaz, .prizes{ background: var(--bg-dark) }
.challenge h2, .hooshaz h2, .prizes h2{ color: var(--white-absolute); }
.just-mobile {display: none;}
@media (max-width: 640px) {.just-mobile {display: block;} .just-desktop{display: none;}}

/* ==== HERO SECTION ==== */
.hero {
  height: 100vh;
  min-height: 650px;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.hero-content h1 { 
  font-size: 5em; 
  margin-bottom: 1em; 
  text-shadow: 0 0 30px rgba(255,0,0,0.8);
  animation: glow 2s ease-in-out infinite alternate;
}
.hero-date { font-size: 2.2em; margin: 1em 0; color: var(--white-pink); }
.hero-prize { font-size: 2em; margin: 2em 0; color: var(--red-secondary); font-weight: bold; }

.hero .btn-primary {
  background: var(--red-main);
  color: var(--white-absolute);
  padding: 20px 60px;
  font-size: 2em;
  font-weight: bolder;
  border-radius: 60px;
  text-decoration: none;
  box-shadow: var(--box-shadow-red);
  transition: 0.3s;
}
.hero .btn-primary:hover { transform: scale(1.1); background: var(--red-main-hover); }
@media (max-width: 640px) {
  .hero h1 {font-size: 3.5em;}
}

/* ==== CHALLENGE ==== */
.challenge-title {
  text-align: right;
  margin-bottom: 2em;
  font-weight: 900;
}

.challenge-title .line1 { font-size: 150%; color: var(--red-secondary);}
.challenge-title .line2 { font-size: 200%; color: var(--white-absolute);}
.challenge-title .line3 { font-size: 200%; color: var(--red-primary); color: var(--white-absolute);}

.challenge-grid {
  display: flex;
  align-items: center;
  gap: 2em;
  flex-wrap: wrap;
  justify-content: center;
}

.challenge-text {
  flex: 1;
  min-width: 320px;
  font-size: 1.2em;
  line-height: 1.5em;
  color: var(--white-primary);
  text-align: justify;
}

.challenge-text p { margin-bottom: 1em; }

.challenge-text .highlight {
  font-size: 1.4em; 
  line-height: 1.4em;
  font-weight: 700;
  color: var(--white-pink-text);
  background: rgba(255, 50, 50, 0.1);
  padding: 1.8em;
  border-radius: 1.2em;
  border-right: .4em solid #ff3333;
  margin: 3em 0;
}

.challenge-image img {
  width: 100%;
  max-width: 450px;
  border-radius: 25px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

@media (max-width: 640px) {
  .challenge-grid {  flex-direction: column-reverse; } 
  .challenge-title { font-size: 2em; }
  .challenge-text { font-size: 1.8em; }
  .challenge-text .highlight { font-size: 1.7em; padding: 25px; } 
}

/* ==== SLOGANS ==== */
.slogans {display: flex !important;flex-wrap: wrap}
.slogans p {
  flex: 0 0 100%;
  font-size: 4em;
  text-align: center;
  color: var(--white-absolute);
  /* text-shadow: 0 0 4em rgba(255,0,0,0.8); */
  font-weight: 900;
}

/* ==== Hooshaz ==== */
.hooshaz .grid {
  display: flex;
  align-items: center;
  gap: 120px;
  flex-wrap: wrap;
  justify-content: center;
}

.hooshaz .text {
  flex: 1;
  min-width: 320px;
  font-size: 1.2em;
  line-height: 2em;
  text-align: justify;
  max-width: 900px;
}
@media (max-width: 640px) {
  .hooshaz .text{
    font-size: 1.7em;
  }
}
.hooshaz p {
  margin-bottom: 1em;
}

.hooshaz .image {
  text-align: center;
}

.hooshaz img {
  width: 100%;
  max-width: 900px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.15);
}

/* ==== WHY TO JOIN ==== */
.why-join .cards {
  display: flex;
  justify-content: center;
  gap: 1.5em;
  flex-wrap: wrap;
  font-size: 1.2em;
}

.why-join h2 {  margin-bottom: 1em;}

.why-join .card {
  background: rgba(255, 255, 255, 0.08); 
  -webkit-backdrop-filter: blur(1em); 
  backdrop-filter: blur(1em);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 3em;
  border-radius: 1.5em;
  width: 19em;
  text-align: center;
  box-shadow: 0 1em 2.1em rgba(0, 0, 0, 0.4);
  transition: all 0.4s ease;
}

.why-join .card:hover {
  transform: translateY(-1em);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 1.5em 2.5em rgba(255, 0, 0, 0.6);
}

.why-join .card h3 {
  color: var(--red-secondary);
  margin-bottom: 1em;
  font-size: 150%;
}
.why-join .card img {
  height: 10em;
  object-fit: cover;
  margin-bottom: 1em;
}
.why-join .team-note { text-align: center; margin-top: 2em; font-weight: 900; font-size: 150%; color: var(--white-pink-text); }
@media (max-width: 640px) {
  .why-join {
    font-size: 120%;
  }
}

/* ==== PRIZES ==== */
.prizes {display: block;}
.prizes .container {
  align-items: center;
  gap: 100px;
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}
.prizes .left, .prizes .right{width: 300px;}
.prizes .right{
    flex: 1;
}
.prize-list {font-size: 150%}
.prize-list li:first-child { color: #ff0000; font-size: 150%; font-weight: 900; }
.prize-list li:nth-child(2) { color: #ff5500; font-size: 125%; font-weight:  700;}
.prize-list li:last-child { color: goldenrod; font-weight: 500;}
.prize-image {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.prizes p {
  font-size: 1.5em;
  margin-top: 2em;
}

/* ==== SIGNUP FORM ==== */
.register {display: block;}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
.register form { 
  max-width: 800px; 
  margin: 0 auto; 
  display: grid; 
  gap: 25px; 
}
.register input, .register select, .register textarea, .register button {
  padding: 18px;
  border-radius: 15px;
  border: none;
  font-size: 1.2em;
  background: #222;
  color: #fff;
}
.register button {
  background: #ff0000;
  font-size: 1.5em;
  cursor: pointer;
  transition: 0.3s;
}
.register button:hover { background: #ff3333; transform: scale(1.05); }

/* ==== FOOTER ==== */

footer { 
  background: #000; 
  padding: 3em 0; 
  text-align: center; 
  min-height: calc(100vh - var(--header-scrolled-height))
}
footer .logos { margin-bottom: 2em; }
footer .logos img { margin: 0 0.5em; height: 6em; transition: 0.3s; }
footer .logos img:hover { transform: scale(1.1); }

@keyframes glow {
  from { text-shadow: 0 0 20px #ff0000; }
  to { text-shadow: 0 0 40px #ff0000, 0 0 60px #ff0000; }
}

footer .info{
  text-align: justify;
  padding: 2em;
  font-size: 130%;
  color: #ff3333;
}

footer h2{color: white;}
footer strong{
  font-weight: 900;
  color: #ddd;
}

footer .info ul {margin: 2em}
footer li {  margin-bottom: 1em;}
footer p {font-size: 1.2em; color: var(--white-primary);}
footer a {color: var(--white-primary);}