/* =========================================================
   OISMUN’26 Website CSS
   Colors: Beige #F1EDEA | Maroon #490008 | Gold #B76F27
   Responsive + Dropdown Menu
   ========================================================= */

/* ===== Base Reset & Defaults ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background-color: #FAF9F6;
  color: #490008;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

/* ===== Header (Front Page) ===== */
.front-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #F1EDEA;
  border-top: 8px solid #B76F27;
  padding: 60px 20px 40px;
}

.main-logo {
  width: 160px;
  height: auto;
  margin-bottom: 20px;
}

.front-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #490008;
  margin-bottom: 5px;
}

.front-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #490008;
  margin-bottom: 5px;
}

.front-header h3 {
  font-size: 20px;
  font-style: italic;
  color: #B76F27;
  margin-top: 5px;
}


/* General styles applied to all elements with this class */
.tables{
  font-weight: bold;
}

/* Specific styles for H1 elements with this class */
h2.colored-text {
  color: white;
  background-color:#490008;
  	font-size: 20px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
  margin-top: 5px;

}

/* Specific styles for P elements with this class */
p.colored-text {
  color: white;
  	font-size: 20px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
  margin-top: 5px;
}
/* ===== Navbar ===== */
.home-nav {
  background-color: #490008;
  padding: 15px 0;
  position: relative;
  z-index: 1000;
}

.home-nav ul {
  list-style: none;
  text-align: center;
}

.home-nav li {
  display: inline-block;
  margin: 0 15px;
  position: relative;
}

.home-nav a {
  color: #F1EDEA;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.home-nav a:hover,
.home-nav a.active {
  color: #B76F27;
}

/* ===== DROPDOWN MENU ===== */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #F1EDEA;
  min-width: 150px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 0;
  z-index: 2000;
}

.dropdown-content li {
  display: block;
}

.dropdown-content a {
  color: #490008;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: #490008;
}

.dropdown:hover .dropdown-content,
.dropdown-content:hover {
  display: block;
}

/* ===== Footer ===== */
.front-footer {
  text-align: center;
  padding: 30px 0;
  color: #490008;
  background-color: #F1EDEA;
  border-top: 2px solid #B76F27;
  font-size: 0.9rem;
  font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

/* ===== General Page Layout ===== */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  
}

.page {
  padding: 40px 20px;
}

/* ===== Buttons (Gold Boxes) ===== */
.apply-btn {
  display: block;
  width: 80%;
  max-width: 500px;
  margin: 15px auto;
  background-color: #B76F27;
  color: #F1EDEA;
  text-align: center;
  font-weight: 700;
  padding: 15px;
  border-radius: 40px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.apply-btn:hover {
  background-color: #8A4F1B;
  transform: scale(1.03);
}

/* ===== Team Section (example for other pages) ===== */
.team-section {
  padding: 40px 20px;
}

.team-section h2 {
  color: #490008;
  margin-bottom: 10px;
  text-align: center;
}

.team-section p {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 20px;
}

/* Member Layout */
.member {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  flex-wrap: wrap;
}

.member-info {
  width: 60%;
  color: #490008;
}

.photo-box {
  border: 2px solid #490008;
  border-radius: 8px;
  background-color: #F1EDEA;
  width: 35%;
  text-align: center;
  padding: 30px 0;
  color: #490008;
}

.photo-box.wide {
  width: 100%;
  margin-bottom: 20px;
  padding: 50px 0;
}

/* ===== Responsive Design ===== */
@media (max-width: 900px) {
  .member {
    flex-direction: column;
    align-items: flex-start;
  }

  .member-info,
  .photo-box {
    width: 100%;
  }

  .photo-box {
    margin-top: 10px;
  }

  .home-nav li {
    display: block;
    margin: 8px 0;
  }

  .home-nav ul {
    padding: 0;
  }
}

@media (max-width: 600px) {
  .front-header {
    padding: 40px 15px;
  }

  .main-logo {
    width: 120px;
  }

  .front-header h1 {
    font-size: 22px;
  }

  .front-header h2 {
    font-size: 20px;
  }

  .front-header h3 {
    font-size: 18px;
  }

  .apply-btn {
    width: 95%;
  }
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
/* ===== HERO SECTION (team background) ===== */
.hero-team {
    position: relative;
    background: url('leaders.png') center  / cover no-repeat;
    height: 70vh;
    color: #F1EDEA;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    z-index: 2;
}

.hero-team::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(73, 0, 8, 0.45);
    z-index: 1;
}

.hero-team * {
    position: relative;
    z-index: 2;
}
@media (max-width: 768px) {
    .hero-team {
        height: 85vh;
    }
}

/* ===== HERO SECTION (Logo background) ===== */

.hero-section {
  position: relative;
  background: url('logo.png')  center/cover no-repeat;
  height:70vh;                /* fills most of the screen */
  color: #F1EDEA;              /* beige text */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(73,0,8,0.45); /* maroon overlay */
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-content h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.hero-content h2 {
  font-size: 1.9rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.hero-content h3 {
font-size: 1.3rem; 
font-style: italic; 
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
 color: #FFFFFF;  /* gold */
}

/* ===== SECTION 2: Stay Tuned ===== */
.stay-tuned {
  background-color: #FAF9F6;
  color: #000;
  text-align: center;
  padding: 80px 20px;
}

.stay-tuned h2 {
  font-size: 2rem;
  margin-bottom: 8px;
  font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif
}

.stay-tuned p {
  font-size: 1.3rem;
  font-weight: 600;
  font-style:italic;
}

/* ===== SECTION 3: Maroon paragraph ===== */
.maroon-section {
  background-color: #490008;
  color: #F1EDEA;
  text-align: center;
  padding: 80px 30px;
}

.maroon-section p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.6;
  font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .hero-section {height: 70vh;}
  .hero-team {height: 70vh;}
  .hero-content h1 {font-size: 1.6rem;}
  .hero-content h2 {font-size: 1.4rem;}
  .hero-content h3 {font-size: 1.1rem;}
  .stay-tuned {padding: 60px 15px;}
  .maroon-section {padding: 60px 20px;}
}
/* ===== CIRCLE PAGE (page 7 style) ===== */

.circle-page {
  padding: 60px 20px;
  background-color: #FAF9F6; /* beige */
  text-align: center;
}

.circle-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 40px;
  color: #490008; /* maroon */
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.circle-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.circle-box {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 5px solid #490008; /* maroon border */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* ===== MOBILE VERSION ===== */
@media (max-width: 700px) {
  .circle-box {
    width: 150px;
    height: 150px;
  }

  .circle-row {
    gap: 20px;
  }

  .circle-title {
    font-size: 26px;
  }
}
.circle-description {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 20px auto 40px;
  color: #490008;
}
.circle-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.circle-text {
  margin-top: 10px;
  font-size: 1.1rem;
  color: #490008;
  font-weight: 600;
}
/* ===== 2 COLUMNS, EACH WITH 3 CIRCLES ===== */

.circle-grid {
  display: flex;
  justify-content: center;
  gap: 80px;
  padding: 40px 0;
}

.circle-column {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Wrappers stay centered */
.circle-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Circle styling */
.circle-box {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 5px solid #490008;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* Text under each circle */
.circle-text {
  margin-top: 10px;
  font-size: 1.1rem;
  color: #490008;
  font-weight: 600;
  text-align:center;
}

/* ===== MOBILE VERSION ===== */
@media (max-width: 800px) {
  .circle-grid {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }
}
/* ===== TEAM GRID (8 columns total, 4 per row) ===== */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.team-grid .team-card {
  text-align: center;
}

.team-grid img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
  border: 3px solid #490008;
}

.team-grid p {
  color: #490008;
  margin-top: 10px;
  font-weight: 600;
}

/* Phones: 2 per row */
@media (max-width: 700px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small phones: 1 per row */
@media (max-width: 450px) {
  .team-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* ================================
   TEAM PAGE (Style C Layout)
   ================================ */

.team-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 50px 20px;
}

.team-page h1 {
  text-align: center;
  margin-bottom: 15px;
  font-size: 2.2rem;
  color: #490008;
  font-family: Cambria, serif;
}

.team-page p {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
  color: #490008;
  font-size: 1.1rem;
}

/* Big centered team image */
.team-main-photo {
  display: block;
  margin: 0 auto 50px;
  width: 70%;
  max-width: 600px;
  border-radius: 10px;
  border: 3px solid #490008;
}

/* Member section: Style C */
.member-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-bottom: 45px;
}

.member-box img {
  width: 55%;
  max-width: 350px;
  border-radius: 10px;
  border: 3px solid #490008;
}

.member-info {
  width: 60%;
  color: #490008;
  font-size: 1.1rem;
  line-height: 1.3;
}

/* Responsive for phones */
@media (max-width: 768px) {
  .member-box {
    flex-direction: column;
    text-align: center;
  }

  .member-info {
    width: 100%;
  }

  .member-box img {
    width: 70%;
  }
}

/* ================================
   ABOUT PAGE — TABLE LAYOUT (4 rows)
   ================================ */

.about-table {
  width: 100%;
  border-collapse: collapse;
  margin: 40px 0;
}

.about-row-title {
  background-color: #490008;
  color: #F1EDEA;
  text-align: center;
  padding: 25px 10px;
  font-size: 1.6rem;
  font-family: Cambria, serif;
  font-weight: bold;
}

.about-row-image img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  border-radius: 0;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .about-row-title {
    font-size: 1.3rem;
    padding: 18px 10px;
  }
}