body{
  background:#c7c7c7;
  font-family:Roboto, Arial, sans-serif;
}

.section{
  padding:1px 20px;
  text-align:center;
}

.section-text{
  max-width:750px;
  margin:0 auto 18px auto;
  line-height:1.6;
  color:white;
}

.divider{
  margin:30px auto;
  font-size:22px;
  opacity:.6;
}

.site-header{
  background: white;
  border: 2px solid #ff3333;
  padding: 20px;
  text-align: center;
}

.header-inner{
  max-width: 950px;
  margin: 0 auto;
  position: relative;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-title {
  font-family: Georgia, serif;
  font-size: 42px;
  margin: 0;
  color: black;
}

.logo{
  width: 95px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}


/* NAVBAR */
.nav {
  max-width: 950px;
  margin: 20px auto 0;
  background: #333;
  border-bottom: 3px solid #c5a253;
  display: flex;
  justify-content: center;
}

.nav a {
  color: white;
  text-decoration: none;
  padding: 14px 22px;
  font-weight: 600;
  transition: 0.2s ease;
}

.nav a:hover {
  background: red;
}

/* HAMBURGER (hidden on desktop) */
.hamburger {
  display: none;
}

.bigbox{
  background-color:#333;
  color:white;
  width:57%;
  margin:40px auto;
  padding:60px 30px;
  text-align:center;
}

.slideshow-container{
  width:100%;
  max-width:750px;
  height:420px;
  margin:40px auto;
  position:relative;
  overflow:hidden;
  border:2px solid white;
}

.mySlides{
  position:absolute;
  width:100%;
  height:100%;
}

.mySlides img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.slideshow-container::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
}

.hero{
  text-align:center;
  margin-bottom:30px;
}

.hero-title{
  color:white;
  font-size:46px;
  margin-bottom:10px;
}

.hero-subtitle{
  color:white;
  font-size:20px;
  opacity:.9;
}

.nav a:hover{
  background-color:#cc0000;
  color:#c5a253;
}

.card{
  border:2px solid white;
  padding:28px 22px;
  background:rgba(255,255,255,.03);
  text-align: center;
  transition: transform 0.15s ease;
  border-radius:6px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:30px;
}

.card:hover{
  transform:translateY(-4px);
}

.card-link{
  color:white;
  text-decoration:none;
}

.card-link:hover{
  color:white;
}

/* CARDS SECTION */
.about-cards {
    margin-top: 40px;
}

.card h3 {
    margin-bottom: 10px;
}

.section-text{
  color:white;
  max-width:750px;
  margin:0 auto 20px auto;
  line-height:1.6;
}

.divider{
  margin:50px auto;
  font-size:22px;
  opacity:.6;
}

.btn{
  display:inline-block;
  padding:12px 20px;
  border:2px solid white;
  background:white;
  color:black;
  text-decoration:none;
  font-weight:600;
  margin:8px;
}

.btn-outline{
  background:transparent;
  color:white;
}

/* ABOUT TEXT */
.about-text {
    max-width: 750px;
    margin: 0 auto 70px;
    text-align: center;
    color: white;
    line-height: 1.8;
    font-size: 16px;
}

.about-text p {
    margin-bottom: 20px;
}

.about-image {
    display: flex;
    justify-content: center;
    margin: 40px 0 50px;
}

.about-image img {
    width: 100%;
    max-width: 750px;
    height: 420px;
    object-fit: cover;
    border-radius: 4px;
}

.about-image img {
    border: 2px solid rgba(255,255,255,0.4);
}

.highlight {
    margin-top: 30px;
    font-weight: bold;
    font-size: 18px;
}

/* INTRO */
.projects-intro {
    max-width: 750px;
    margin: 0 auto 60px;
    text-align: center;
    color: white;
    line-height: 1.7;
}

/* GRID */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

/* CARD */
.project-card {
    border: 1px solid rgba(255,255,255,0.4);
    padding: 28px 22px;
    background: rgba(255,255,255,0.03);
    text-align: center;
    color: white;
    transition: transform 0.15s ease;
}

.project-card:hover {
    transform: translateY(-4px);
}

.project-card h3 {
    margin-bottom: 10px;
}

.project-card a {
    display: inline-block;
    margin-top: 12px;
    font-weight: bold;
    text-decoration: none;
    color: white;
}

/* CTA */
.projects-cta {
    text-align: center;
    padding-top: 40px;
}

.projects-cta h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.projects-cta p {
    margin-bottom: 20px;
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 20px;
}

/* Images */
.gallery-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid white;
  transition: transform 0.2s ease;
}

.gallery-img:hover {
  transform: scale(1.02);
}

/* INTRO */
.sponsor-intro {
    max-width: 750px;
    margin: 0 auto 60px;
    text-align: center;
    color: white;
    line-height: 1.7;
}

/* SECTION SPACING */
.sponsor-section {
    margin-bottom: 60px;
}

/* CENTER TEXT */
.center-text {
    text-align: center;
    margin-bottom: 20px;
    color: white;
}

/* PARTNERS */
.partner-group {
  margin-top: 24px;
}

.tag-label {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 15px;
  color: white;
  opacity: 0.85;
  text-align: center;
}

.partner-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.partner-list span {
    border: 1px solid rgba(255,255,255,0.5);
    padding: 8px 14px;
    color: white;
    font-size: 14px;
    background: rgba(255,255,255,0.04);
}

.media-kit-box {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.section-text {
  max-width: 700px;
  margin: 0 auto 10px auto;
  line-height: 1.6;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.social-links a {
  font-size: 22px;
  color: white;
  border: 1px solid white;
  padding: 10px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.2s ease;
}

.social-links a:hover {
  background: white;
  color: black;
}

.social-links a:hover .fa-instagram { color: #E1306C; }
.social-links a:hover .fa-tiktok { color: #69C9D0; }
.social-links a:hover .fa-facebook-f { color: #1877F2; }

.inline-link {
  color: white;
  text-decoration: underline;
  transition: 0.2s ease;
}

/* Remove purple visited state */
.inline-link:visited {
  color: white;
}

/* Hover state (match your nav hover) */
.inline-link:hover {
  color: red;
}

/* CONTACT GRID */
.contact-section {
  margin-bottom: 60px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}

.contact-item {
  text-align: center;
  color: white;
}

.contact-icon {
  font-size: 24px;
  margin-bottom: 10px;
  color: white;
  opacity: 0.85;
}

.contact-item h3 {
  margin: 8px 0;
}

.contact-item p {
  margin: 0;
  line-height: 1.5;
}

/* SOCIAL ICONS */
.social-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}

.social-links a {
  font-size: 20px;
  color: white;
  border: 1px solid white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.2s ease;
}

.social-links a:visited {
  color: white;
}

.social-links a:hover {
  background: white;
  color: black;
}



/* MAP */
.map-section {
    margin: 60px 0;
}

.map-section iframe {
    width: 100%;
    height: 400px;
    border: none;
}

/* FORM */
.form-section {
    max-width: 700px;
    margin: 0 auto;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    margin-bottom: 18px;
    border-radius: 4px;
    border: none;
}

.contact-form textarea {
    height: 150px;
}

.form-submit {
    text-align: right;
}

.site-footer{
background:#1f1f1f;
color:white;
margin-top:80px;
border-top:3px solid #c5a253;
}
.footer-inner {
  width: 65%;
  max-width: 1100px;
  margin: 0 auto;
}
.footer-container{
max-width:1100px;
margin:auto;
padding:50px 20px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
}

.footer-col h3,
.footer-col h4{
margin-bottom:15px;
}

.footer-col p{
line-height:1.6;
opacity:.8;
}

.footer-col ul{
list-style:none;
padding:0;
}

.footer-col li{
margin-bottom:10px;
}

.footer-col a{
color:white;
text-decoration:none;
opacity:.8;
}

.footer-col a:hover{
color:#c5a253;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.footer-social a {
  font-size: 18px;
  color: white;
  border: 1px solid rgba(255,255,255,0.6);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.2s ease;
}

.footer-social a:hover {
  background: white;
  color: black;
}

.footer-col p,
.footer-col li {
  line-height: 1.6;
}

.footer-note {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.8;
}

.footer-bottom{
text-align:center;
padding:20px;
border-top:1px solid rgba(255,255,255,.1);
font-size:14px;
opacity:.7;
}

@media (max-width:900px){

  .bigbox{
    width: 92% !important;
    max-width: 92% !important;
    padding: 35px 16px !important;
    overflow: hidden;
  }

  .cards{
        display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 22px !important;
  }

  .section {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  
  .projects-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 22px !important;
  }

    .project-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .project-card p {
    max-width: 100%;
    word-wrap: break-word;
  }

  
  .gallery-grid,
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 22px;
  }

    .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 26px 18px !important;
  }


  .project-card {
    width: 100%;
    max-width: 100%;
  }

    .site-header {
      width: 90%;
      margin: 20px auto 0 auto;
      padding: 16px;
  }

  .header-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: auto;
  }

  /* Title smaller */
  .site-title {
    font-size: 30px;
    margin-bottom: 8px;
  }

  /* Logo moves UNDER title */
  .logo {
    position: static;
    width: 80px;
    margin-bottom: 12px;
    transform: none;
  }

  /* Hamburger appears */
  .hamburger {
    display: block;
    background: #333;
    color: white;
    border: none;
    padding: 10px 14px;
    font-size: 22px;
    cursor: pointer;
    border-bottom: 3px solid #c5a253;
    margin: 0 auto;
  }

  /* Hide nav by default */
  .nav {
    display: none;
    flex-direction: column;
    width: 100%;
    margin: 14px auto 0 auto;
        align-items: center;
    text-align: center;
  }

  /* Show when toggled */
  .nav.show {
    display: flex;
  }

  .nav a {
    display: block;
    padding: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    text-align: center;
  }

  .slideshow-container{
  height:260px;
}

.hero-title{
  font-size:32px;
  margin-bottom: 12px;
}

.hero-subtitle{
  font-size:16px;
  opacity: 0.8;
  margin-bottom: 20px;
}

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-img {
    height: auto;
  }

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

  .form-section {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .contact-form {
    width: 100%;
    max-width: 100%;
  }

  .form-group {
    width: 100%;
    padding: 0;
    margin-bottom: 18px;
  }

  .contact-form label {
    display: block;
    text-align: center;
    margin-bottom: 8px;
  }

  .contact-form input,
  .contact-form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
  }

  .contact-form textarea {
    min-height: 175px;
  }

.form-submit {
  text-align: center;
  margin-top: 20px;
}

.contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }


.footer-container{
grid-template-columns:1fr;
align-items: center;
text-align:center;
}

.footer-col {
    width: 100%;
    margin-bottom: 30px;
  }

  .footer-col ul {
    padding: 0;
  }

  .footer-col ul li {
    list-style: none;
    margin: 6px 0;
  }

  /* SOCIAL ICONS CENTER FIX */
  .footer-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
  }

  .footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Bottom text centered */
  .footer-bottom {
    text-align: center;
  }

    .footer-inner {
    width: 90%;
  }

}