:root{
  --berkeley-blue:#003262;
  --bangladesh-green:#006A4E;
  --bangladesh-red:#F42A41;
  --bg:#f8fafc;
}

body{
margin:0;
font-family: 'Inter', system-ui, Segoe UI, Roboto, Helvetica, sans-serif;
background:var(--bg);
color:#222;
}

.main-header {
  background: var(--berkeley-blue);
  border-bottom: 4px solid #FDB515;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 40px;
}

.logo-container img {
  height: 80px;
}

/* We slightly reduced the gap because the buttons will take up more space now */
.nav-links {
  display: flex;
  gap: 15px; 
  margin-left: auto;
  margin-right: 30px;
}

/* The updated button styling */
.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  
  /* 1. Makes the bubble region bigger (8px top/bottom, 18px left/right) */
  padding: 8px 18px; 
  
  /* 2. Adds the visible boundary (a faint white line so they look like buttons) */
  border: 1px solid rgba(255, 255, 255, 0.4); 
  
  /* 3. Rounds the corners to create a pill/bubble shape */
  border-radius: 20px; 
  transition: all 0.3s ease; 
}

/* The hover effect */
.nav-links a:hover {
  color: #FDB515; /* Berkeley Gold text */
  border-color: #FDB515; /* The boundary turns Gold */
  background-color: rgba(253, 181, 21, 0.1); /* Adds a very faint Gold tint inside the bubble */
  transform: translateY(-2px); /* Keeps that nice jump effect */
}

.header-socials {
  display: flex;
  gap: 15px;
  align-items: center;
}

.header-icon {
  color: white;
  display: flex;
  align-items: center;
  transition: color 0.3s ease, transform 0.3s ease;
}

.header-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.header-icon:hover {
  color: #FDB515;
  transform: translateY(-2px);
}

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

/* The new Hero Container Card */
.hero {
  display: flex;
  flex-direction: column; /* Stacks the items vertically */
  align-items: center;
  text-align: center;
  background-color: white; /* Gives it a solid background */
  padding: 50px 30px; /* Adds breathing room inside the box */
  border-radius: 20px; /* Smooth rounded corners */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  margin-bottom: 60px;
  /*border-top: 8px solid var(--berkeley-blue);*/ /* A nice Berkeley Blue accent line at the top */
}

/* Adjusted Logo for the centered layout */
.hero img {
  width: 140px;
  margin-bottom: 20px;
}

/* Adjusted Text for readability */
.hero h1 {
  color: var(--berkeley-blue);
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 2.2rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.hero p {
  font-size: 1.1rem;
  color: #555;
  max-width: 600px; /* Keeps the text from stretching too wide */
  margin: 0 auto 10px auto;
  line-height: 1.5;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:22px;
}

.card{
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 2px 10px rgba(0,0,0,.05);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover{
transform: translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,0.12);
}

.card img{width:100%}

.card-content{padding:18px}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:12px;
}

.gallery img{
width:100%;
border-radius:8px;
cursor:pointer;
transition: transform 0.25s ease;
}

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

/* --- 3D Flip Card Container --- */
.profile-container {
  background: transparent;
  perspective: 1000px; /* Gives the 3D depth effect */
  width: 230px; 
  display: flex;
  transition: transform 0.25s ease;
  cursor: pointer; /* Turns the mouse into a hand so people know to click! */
}

/* The hover jump effect now goes on the container */
.profile-container:hover {
  transform: translateY(-6px);
}

/* The inner wrapper that actually rotates */
.profile-inner {
  position: relative;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  display: flex; 
}

/* The class that triggers the flip when clicked */
.profile-container.flipped .profile-inner {
  transform: rotateY(180deg);
}

/* The Front and Back faces */
.profile-front, .profile-back {
  width: 100%;
  -webkit-backface-visibility: hidden; /* Safari support */
  backface-visibility: hidden;
  
  /* Your transparent styling */
  background: transparent !important;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 32, 98, 0.15); /* Berkeley Blue outline */
  text-align: center;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

/* The back face is rotated away by default */
.profile-back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: rotateY(180deg);
  /* Adding a subtle Gold border to the back so it looks distinctly different! */
  border: 1px solid rgba(253, 181, 21, 0.6); 
}

/* Hover shadow effects */
.profile-container:hover .profile-front {
  border: 1px solid rgba(0, 32, 98, 0.4); 
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

.profile-container:hover .profile-back {
  border: 1px solid #FDB515; /* Keeps the gold pop on hover for the back */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Layout for the row of buttons */
.hero-socials {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 25px;
}

/* The circular button design */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: white;
  color: var(--bangladesh-green); /* Defaults to Bangladesh Green */
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.08);
}

.social-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* Hover Effects using our specific color codes */
.social-icon.instagram:hover {
  background-color: #E1306C;
  color: white;
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(225, 48, 108, 0.3);
}

.social-icon.facebook:hover {
  background-color: #1877F2;
  color: white;
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(24, 119, 242, 0.3);
}

.social-icon.callink:hover {
  background-color: var(--berkeley-blue);
  color: #FDB515; /* Berkeley Gold text */
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 50, 98, 0.3);
}

.social-icon.email:hover {
  background-color: var(--bangladesh-red);
  color: white;
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(244, 42, 65, 0.3);
}

footer{
text-align:center;
margin-top:50px;
padding:30px;
font-size:14px;
color:#666;
}

.lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.85);
align-items:center;
justify-content:center;
animation: fadeIn 0.25s ease;
}

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

.lightbox img{
max-width:90%;
max-height:90%;
border-radius:8px;
animation: zoomIn 0.25s ease;
}

@keyframes zoomIn {
  from { transform:scale(0.95); }
  to { transform:scale(1); }
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
  font-weight: bold;
  z-index: 1001;
}

.lightbox-close:hover {
  opacity: 0.7;
}

.lightbox-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:40px;
color:white;
cursor:pointer;
padding:10px;
}

.lightbox-arrow.left{
left:20px;
}

.lightbox-arrow.right{
right:20px;
}

.section-divider {
  text-align: center;
  margin: 50px 0;
  position: relative;
}

.ocf-hosting {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
}

.ocf-hosting img {
  height: 70px;
}

.site-footer::before {
  content: "";
  display: block;
  height: 8px;
  width: 100%;
  margin-bottom: 25px;

  background: linear-gradient(
    to right,
    #006A4E 0%,
    #006A4E 30%,
    #2c7a63 40%,
    #F42A41 50%,
    #2c7a63 60%,
    #006A4E 70%,
    #006A4E 100%
  );
}

.site-footer {
  text-align: center;
  margin-top: 60px;
  padding: 40px 20px;
  font-size: 14px;
  color: #555;
  position: relative;
}

/* --- 3D Flip Mission Statement --- */
.mission-flip-container {
  perspective: 1000px;
  width: 100%;
  cursor: pointer;
  margin-bottom: 30px;
  transition: transform 0.25s ease;
}

.mission-flip-container:hover {
  transform: translateY(-4px); /* Slight lift on hover so they know it's clickable */
}

.mission-inner {
  position: relative;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.mission-flip-container.flipped .mission-inner {
  transform: rotateY(180deg);
}

.mission-front, .mission-back {
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-sizing: border-box;
  
  /* Shared styling for the white card */
  background-color: white;
  padding: 35px 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  font-size: 1.15rem;
  line-height: 1.7;
  color: #444;
}

.mission-front {
  border-left: 6px solid var(--bangladesh-green);
}

.mission-back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: rotateY(180deg);
  border-left: 6px solid var(--bangladesh-red); /* Swaps to red for the Bangla side! */
}

.mission-front p, .mission-back p {
  margin: 0;
}

/* --- New Committee Row Layout --- */
.committee {
  display: flex;
  flex-direction: column;
  gap: 30px; /* Space between each row */
}

.committee-tier {
  display: flex;
  flex-wrap: wrap; /* Allows cards to stack on mobile phones */
  justify-content: center; /* Perfectly centers the cards in the row */
  gap: 25px; /* Space between cards horizontally */
}

/* The new circular wrapper for the images */
.img-crop {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%; /* Makes the wrapper a perfect circle */
  overflow: hidden; /* Hides the corners of the zoomed-in image */
  margin-bottom: 15px;
  background-color: #f0f0f0; /* Soft placeholder color while image loads */
}

/* The actual image inside the crop */
.img-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15); /* THIS IS THE ZOOM! Change to 1.25 to zoom in even more */
  transition: transform 0.3s ease; /* Smooth animation for the hover effect */
}

/* --- Events Page Styling --- */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}

.event-card {
  background: white;
  border-radius: 12px;
  padding: 10px 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border-left: 6px solid var(--berkeley-blue);
  cursor: pointer;
  transition: all 0.3s ease;
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 32, 98, 0.1);
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Wrapper to group the thumbnail and the text together */
.event-info {
  display: flex;
  align-items: center;
  gap: 20px; 
}

/* New wrapper to stack the English and Bangla text perfectly */
.event-text {
  display: flex;
  flex-direction: column;
}

.event-info h3 {
  margin: 0 0 4px 0; /* A tiny gap between the English and Bangla */
  color: var(--berkeley-blue);
  font-size: 1.5rem;
}

/* Styling for the Bangla subtitle */
.event-subtitle {
  margin: 0;
  color: var(--bangladesh-green);
  font-size: 1.1rem;
  font-weight: 500;
}

.event-thumbnail {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* The Plus Icon that turns into an X */
.expand-icon {
  font-size: 28px;
  font-weight: 300;
  color: var(--bangladesh-red);
  transition: transform 0.3s ease;
  line-height: 1;
}

.event-card.expanded .expand-icon {
  transform: rotate(45deg); /* Rotates the + into an X */
  color: #777;
}

/* The magic trick for animating height smoothly */
.event-gallery-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease-out, margin-top 0.4s ease-out;
}

.event-card.expanded .event-gallery-wrapper {
  grid-template-rows: 1fr;
  margin-top: 25px;
}

.event-gallery {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 15px;
}

.event-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3; /* Keeps all photos uniformly sized */
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.25s ease;
}

.event-gallery img:hover {
  transform: scale(1.05); /* Slight zoom when hovering over individual photos */
}

nav a.active {
  border-bottom: 3px solid #FDB515; /* Berkeley gold */
  padding-bottom: 4px;
}

/* --- Accessibility: Keyboard Focus State --- */
:focus-visible {
  outline: 3px solid var(--berkeley-blue);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --- New Homepage Button --- */
.btn-primary {
  display: inline-block;
  background-color: var(--berkeley-blue);
  color: white;
  padding: 12px 32px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 50, 98, 0.2);
}

.btn-primary:hover {
  background-color: #FDB515;
  color: var(--berkeley-blue);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(253, 181, 21, 0.3);
}

/* --- Big Give Section --- */
.big-give-section {
  text-align: center;
  margin-bottom: 60px;
  padding: 40px 30px;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-top: 6px solid #FDB515; /* Berkeley Gold Accent */
}

.big-give-image {
  max-width: 100%;
  width: 750px; /* Constrains the flyer so it doesn't get too massive on large screens */
  height: auto;
  border-radius: 8px;
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.big-give-image:hover {
  transform: scale(1.02); /* Slight pop when hovering over the flyer */
}

.big-give-link-text {
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: #222;
}

.big-give-link-text a {
  color: var(--berkeley-blue);
  font-weight: 600;
  text-decoration: underline;
  word-break: break-all; /* Ensures the long URL doesn't break mobile layouts */
}

.big-give-link-text a:hover {
  color: var(--bangladesh-red);
}

.big-give-thanks {
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
  margin-top: 25px;
}

/* --- Upcoming Event Banner --- */
.upcoming-event-card {
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}

.upcoming-event-image {
  width: 100%;
  border-radius: 12px;
  display: block;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
  border-radius: 16px;
}

.upcoming-event-details {
  text-align: left;
  font-size: 15px;
  margin-bottom: 16px;
}

.upcoming-event-details p {
  margin: 6px 0;
}

.upcoming-event-image-wrapper {
  position: relative;
  display: inline-block;
}

.event-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #e63946;
  color: white;
  font-weight: 700;
  font-size: 20px;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  letter-spacing: 0.5px;
}

.event-badge {
  box-shadow:
    0 0 0 3px rgba(25,25,25,0.7),  /* glow ring */
    0 6px 16px rgba(250,250,250,0.25);     /* depth shadow */
}

.upcoming-event-image:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}

/* --- Official Announcement Banner --- */
.official-announcement-card {
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}

.official-announcement-image {
  width: 100%;
  border-radius: 12px;
  display: block;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
  border-radius: 16px;
}

/* Kept this here just in case you ever want to add text details back later */
.official-announcement-details {
  text-align: left;
  font-size: 15px;
  margin-bottom: 16px;
}

.official-announcement-details p {
  margin: 6px 0;
}

.official-announcement-image-wrapper {
  position: relative;
  display: inline-block;
}

/* You removed the NEW badge from the HTML, but leaving the CSS here won't hurt anything */
.event-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #e63946;
  color: white;
  font-weight: 700;
  font-size: 20px;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  letter-spacing: 0.5px;
}

.event-badge {
  box-shadow:
    0 0 0 3px rgba(25,25,25,0.7),  /* glow ring */
    0 6px 16px rgba(250,250,250,0.25);     /* depth shadow */
}

.official-announcement-image:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}