@font-face {
  font-family: 'Avenir Roman';
  src: url('/fonts/avenir-roman.woff2') format('woff2'),
       url('/fonts/avenir-roman.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Hero Section */
.announcement-bar{
  background: #e6503e;
  color: white;
  font-size: larger;
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  text-align: center;
  font-size: medium;
  font-family: 'Avenir Roman';
}

/* .hero {
  display: flex;
  padding: 0px 20px 0px 20px;  gap: 2rem;
  background-color: #f8f9fa;
  margin-top: 2rem;
  border-bottom-color: black;
  border-bottom-style: solid;
} */

.hero {
  display: flex;
  padding: 0px 0px 0px 0px;
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background-color: rgb(255, 255, 255);
}

.hero-content {
  flex: 1;
  padding: 3rem;
  text-align: justify;
}

.title-image{
  padding: 2rem 0 1.5rem;  /* ← More responsive */
  max-width: 100%;
  height: auto;
}

.hero-content h1 {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

.hero-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image img {
  width: 100%;
  height: auto;  /* ← Change from 100% */
  max-height: 750px;  /* ← Add constraint */
  object-fit: contain;
}

.virtual-tour {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  margin-top: 2rem;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.virtual-tour:hover {
  background: #2c4a6b;
}

/* Centers Section */
.centers {
  display: flex;
  justify-content: space-between;
  padding: 4rem 2rem 5rem 2rem;
  gap: 2rem;
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.center-card {
  flex: 1;
  text-align: center;
  transition: transform 0.3s ease, filter 0.3s ease;
}

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

.center-card:hover img {
  filter: grayscale(100%);
}

.center-card img {
  width: 370px;
  height: 100%;
  object-fit: cover;
  margin-bottom: 0rem;
  border-radius: 8px;
  padding-bottom: 1rem;
}

/* Events Section */
.events {
  display: flex;
  gap: 0rem;
  background-color: #f8f9fa;
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.event-column1 {
  padding: 3rem 2rem;
  flex: 1;
}
.event-column2 {
  padding: 3rem 2rem;
  flex: 1;
}

.event-card {
  margin-top: 2rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

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

.event-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  margin-top: 1rem;
  border-radius: 4px;
}

.event-card2 {
  margin-top: 0rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0);
  border-radius: 8px;
  transition: transform 0.3s ease;
  max-width: 75%;
  text-align: justify;
}

.event-card2:hover {
  transform: translateY(-5px);
}

.event-card2 img {
  width: 100%;
  max-height: 634px;
  object-fit: cover;
  margin-top: 2rem;
  border-radius: 0px;
}

.title-event2{
  padding: 0rem 2rem;
  font-size: xx-large;
}

.event-card3 {
  margin-top: 0rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0);
  border-radius: 8px;
  transition: transform 0.3s ease;
  text-align-last: right;  
  text-align: justify;       /* Justify all lines */

  padding-left: 25%;
}

.event-card3:hover {
  transform: translateY(-5px);
}

.event-card3 img {
  width: 100%;
  max-height: 634px;
  object-fit: cover;
  margin-top: 2rem;
  border-radius: 0px;
}

/* Social Feed Section */
.social-feed {
  padding: 2rem 2rem;
  text-align: center;
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.instagram-feed {
  display: flex;
  justify-content: left;
  gap: 1rem;
  margin-top: 2rem;
  padding: 0rem 1rem;
}

.insta-post {
  overflow: hidden;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.insta-post:hover {
  transform: scale(1.05);
}

.insta-post img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.insta-post {
  width: fit-content;
  margin: 20px;
  font-family: sans-serif;
}

.insta-post2 {
  overflow: hidden;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.insta-post2:hover {
  transform: scale(1.05);
}

.insta-post2 img {
  width: 230px;
  height: 380px;
  object-fit: cover;
}

.insta-post2 {
  width: fit-content;
  font-family: sans-serif;
}

.image-frame {
  border: 3px solid black;
  padding: 10px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  max-width: 280px;
  overflow: hidden;
}

.image-frame2 {
  border: 3px solid black;          /* Bigger frame */
  padding: 8px;                    /* More space inside frame */
  background-color: rgb(0, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* Left align */
  position: relative;
  color: rgb(255, 255, 255);
}

.image-title {
  display: flex;
  align-items: center;
  gap: 0px;
}

.avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}

.insta-post .avatar {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}

.insta-post2 .avatar {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}

.title-text {
  font-size: 12px;                  /* Smaller text */
  color: #000;
}

.title-text2 {
  font-size: 14px;                  /* Smaller text */
  color: #ffffff;
}

.post-image {
  width: 100%;
  height: auto;          /* ✅ Maintain aspect ratio */
  object-fit: contain;
  display: block;
}
.social-feed-wrapper {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.feed-main {
  flex: 3;
  min-width: 0;
}

.feed-side {
  flex: 1;
  min-width: 0;
  background-color: #ffffff;
  text-align: left;
  font-family: sans-serif;
}

.feed-side h3 {
  margin-bottom: 1rem;
  color: #e7503f;
}

.feed-side p {
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}

/* PLAY NOW */
.play-now {
  position: relative;
  width: 300px;
  height: 300px;  /* ← Make square for better scaling */
  margin-top: 1.5rem;
  margin-left: 0;
  left: auto;
  bottom: auto;
  z-index: 4;
  overflow: visible;  /* ← Prevent SVG clip */
}
.play-now .play-btn {
  position: absolute;
  left: 50%;   /* ← Center properly */
  top: 50%;
  transform: translate(-50%, -50%);  /* ← Add this */
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 40px;
  border-color: transparent transparent transparent #080808;
  transform: translateX(-50%) translateY(-50%);
}
.play-now text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  fill: #080808;
}
.play-now svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 340px;
  -webkit-animation-name: rotate;
  -moz-animation-name: rotate;
  -ms-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -ms-animation-duration: 10s;
  -o-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}

/* Responsive Design */
@media (max-width: 768px) {

  .hero, .centers, .events {
      flex-direction: column;
  }
  
  .hero-image img {
      height: 300px;
  }

  .instagram-feed {
      flex-direction: column;
      align-items: center;
  }

  .insta-post img {
      width: 100%;
      max-width: 300px;
  }

  .insta-post2 img {
    width: 100%;
    max-width: 300px;
  }

  .social-feed-wrapper {
    flex-direction: column;
  }

  .feed-main,
  .feed-side {
    width: 100%;
  }

  .feed-side {
    margin-top: 2rem;
  }
}

.follow-us-button-wrapper {
  position: relative;
  display: inline-block;
  height: auto;
}

.follow-us-button {
  position: absolute;
  top: 0;
  left: 0;
  height: 2.5rem;
  width: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.follow-us-button.default {
  opacity: 1;
  z-index: 1;
}

.follow-us-button.hover {
  opacity: 0;
  z-index: 2;
}

.follow-us-button-wrapper:hover .hover {
  opacity: 1;
}

.follow-us-button-wrapper:hover .default {
  opacity: 0;
}

h2 {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
}

.title-follow{
  display: flex;
  align-items: self-start;
  gap: 0.5em;
  padding: 0rem 2rem;
  font-size: 20px;
}

.title-event3 {
  padding: 0rem 2rem;
  font-size: xx-large;
  text-align: right;
}


@media (max-width: 500px) {
  h2 {
    flex-direction: column;
    text-align: center;
  }

  .follow-us-button {
    height: 2em;
    margin-top: 0.5em;
  }
}


/* ANIMATIONS */
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0);
  }
}
@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(360deg);
  }
  to {
    -moz-transform: rotate(0);
  }
}
@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0);
  }
}
@-o-keyframes rotate {
  from {
    -o-transform: rotate(360deg);
  }
  to {
    -o-transform: rotate(0);
  }
}
@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0);
  }
}
@-webkit-keyframes svg-morph {
  0% {
    d: path("m244.333332,38.437499c26.666664,-1.666666 125.666662,0.999995 195.333325,50.33333c69.666663,49.333335 -39.666664,141.666664 -70.666664,174.229164c-31,32.5625 -176.999993,107.437507 -234.999993,76.437507c-58,-31 73.666665,-107.000001 49,-190.4375c-24.666665,-83.437499 34.666668,-108.895835 61.333332,-110.562501z");
  }
  100% {
    d: path("m244.333332,38.437499c58.666669,50.333342 24.666647,101.000011 94.33331,150.333346c69.666663,49.333335 71.333353,156.666666 14.333349,175.229163c-57.000004,18.562498 -160.999991,6.437492 -218.999991,-24.562508c-58,-31 -109.333363,-174.000012 -70.000018,-236.437507c39.333345,-62.437496 121.666681,-114.895836 180.33335,-64.562494z");
  }
}
@-webkit-keyframes preloader-svg {
  0% {
    d: path("M0,0 C305.333333,0 625.333333,0 960,0 C1294.66667,0 1614.66667,0 1920,0 L1920,1080 C1614.66667,1080 1294.66667,1080 960,1080 C625.333333,1080 305.333333,1080 0,1080 L0,0 Z");
  }
  50% {
    d: path("M0,230 C305.333333,100 625.333333,0 960,0 C1294.66667,0 1614.66667,100 1920,300 L1920,1080 C1614.66667,1080 1294.66667,1080 960,1080 C625.333333,960 305.333333,1080 0,1080 L0,230 Z");
  }
  100% {
    d: path("M0,0 C305.333333,0 625.333333,0 960,0 C1294.66667,0 1614.66667,0 1920,0 L1920,1080 C1614.66667,1080 1294.66667,1080 960,1080 C625.333333,1080 305.333333,1080 0,1080 L0,0 Z");
  }
}
@-webkit-keyframes preloader-inner {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes page-transition {
  0% {
    d: path("M0,0 C305.333333,0 625.333333,0 960,0 C1294.66667,0 1614.66667,0 1920,0 L1920,1080 C1614.66667,980 1294.66667,930 960,930 C625.333333,930 305.333333,980 0,1080 L0,0 Z");
  }
  100% {
    d: path("M0,0 C305.333333,0 625.333333,0 960,0 C1294.66667,0 1614.66667,0 1920,0 L1920,1080 C1614.66667,1080 1294.66667,1080 960,1080 C625.333333,1080 305.333333,1080 0,1080 L0,0 Z");
  }
}
@-webkit-keyframes side-widget-in {
  0% {
    d: path("M540,1080H0V0h540c-40.28,124.78-85.13,311.48-85,541C455.13,769.53,499.81,955.48,540,1080z");
  }
  50% {
    d: path("M540,1080H0V0h540c31.96,142.05,60.09,325.94,60,541C599.91,755.16,571.87,938.34,540,1080z");
  }
  100% {
    d: path("M540,1080H0V0h540c0,179.85,0,359.7,0,539.54C540,719.7,540,899.85,540,1080z");
  }
}
@-webkit-keyframes side-widget-out {
  0% {
    d: path("M540,1080H0V0h540c0,179.85,0,359.7,0,539.54C540,719.7,540,899.85,540,1080z");
  }
  50% {
    d: path("M540,1080H0V0h540c-40.28,124.78-85.13,311.48-85,541C455.13,769.53,499.81,955.48,540,1080z");
  }
  100% {
    d: path("M540,1080H0V0h540c31.96,142.05,60.09,325.94,60,541C599.91,755.16,571.87,938.34,540,1080z");
  }
}


@media (max-width: 1200px) {
  .social-feed-wrapper {
    flex-direction: column;
  }

  .feed-main,
  .feed-side {
    width: 100%;
  }

  .feed-side {
    margin-top: 2rem;
  }

  .insta-post img,
  .insta-post2 img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}


@media (max-width: 768px) {
  .event-card2 img,
  .event-card3 img {
    max-height: 200px;
    margin-top: 1rem;
  }

  .event-column1,
  .event-column2 {
    background-size: cover;
    background-position: center;
    padding: 2rem 1rem;
  }

  .event-card2,
  .event-card3 {
    padding: 1rem;
  }
}

@media (max-width: 700px) {
  .image-frame {
    max-width: 100%;
    padding: 10px;
  }

  .title-text {
    font-size: 12px;
  }

  .avatar {
    width: 18px;
    height: 18px;
  }
  .post-image {
    width: 100%;
    height: 100%;
  }
}

.image-inner {
  display: flex;
  flex-direction: column;
  gap: 8px; /* ✅ Space between title and image */
  width: 100%;
}

.centers {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.center-card {
  flex: 1;
  text-align: center;
  text-decoration: none;   /* remove underline */
  color: inherit;          /* inherit text color */
  transition: transform .2s ease;
}

.center-card img {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  display: block;
}

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


/* === Social Row (4 equal columns, last is taller) === */
.social-row {
  --short-h: 320px;   /* height of the first 3 boxes */
  --tall-h: 520px;    /* height of the 4th (taller) box */
  --frame: 3px;
  --gap: 24px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: end; /* <-- align all items to the same bottom */
  margin: 2rem 0;
}

.social-cell {
  height: var(--short-h);
  border: var(--frame) solid #000;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The 4th box is taller */
.social-cell--tall { height: var(--tall-h); }

/* Tiny IG-like header strip (optional) */
.social-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 4px;
}
.social-head .avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.social-head .name {
  font-size: 12px;
  color: #000;
}

/* Image area: center + contain (no deformation) */
.media-wrap {
  flex: 1; /* take remaining height */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;     /* keeps “letterbox” clean */
  overflow: hidden;
}
.media-wrap img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;          /* keep aspect ratio */
  height: auto;         /* keep aspect ratio */
  object-fit: contain;  /* NEVER deform; show full image */
}

/* (Optional) responsive collapse */
@media (max-width: 1024px) {
  .social-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .social-row { grid-template-columns: 1fr; }
}

/* Social Row v3 — 4 equal columns; last is taller; bottoms aligned */
.social-row.v3 {
  --short-h: 320px;   /* height of first 3 frames */
  --tall-h: 420px;    /* height of 4th frame */
  --gap: 24px;
  --frame: 3px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: end;             /* same bottom line for all cells */
}

/* Frame */
.social-row.v3 .social-cell {
  box-sizing: border-box;       /* border/padding included in height */
  height: var(--short-h);
  border: 1px solid #000;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.8rem;
}
.social-row.v3 .social-cell--tall { 
  height: var(--tall-h); 
  background-color: #000;
}

/* Small header strip (fixed height => consistent interiors) */
.social-row.v3 .social-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 6px 10px 4px;
}
.social-row.v3 .avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.social-row.v3 .name   { font-size: 12px; color: #000; }

/* Image area — full image, never deformed */
.social-row.v3 .media-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
}
.social-row.v3 .media-wrap img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;          /* show entire image without stretching */
}

/* Neutralize old layout classes within this section (if present) */
.social-row.v3 .insta-post,
.social-row.v3 .image-frame,
.social-row.v3 .image-inner,
.social-row.v3 .post-image { margin: 0; padding: 0; border: 0; }

/* Responsive (optional) */
@media (max-width: 1024px) { .social-row.v3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .social-row.v3 { grid-template-columns: 1fr; } }

.media-wrap-reel{
  background-color: #000 !important;
}

.reel-name{
  color: #fff !important;
}

/* Layout */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Cards */
.ig-card { display: flex; flex-direction: column; }
.ig-card--tall { grid-row: span 2; } /* makes the reel tall in a 2-row grid */

.ig-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.ig-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ig-name { font-weight: 600; font-size: 0.95rem; }

/* Media Frame: keeps aspect ratio and contains the media */
.ig-media-frame {
  position: relative;
  width: 100%;
  background: #000; /* helpful when using contain */
  border-radius: 12px;
  overflow: hidden;
}

/* Aspect ratios */
.ig-media--square { aspect-ratio: 1 / 1; }
.ig-media--reel   { aspect-ratio: 9 / 16; } /* tall reel look */

/* Media element */
.ig-media {
  width: 100%; height: 100%;
  object-fit: cover;       /* Default: fill nicely */
  object-position: center;
  display: block;
}

/* If you prefer to always see the entire image (no crop), switch to contain: */
/* .ig-media { object-fit: contain; background: #000; } */

/* “Open on Instagram” button inside the media frame */
.ig-open-btn {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(0,0,0,.55);
  color: #fff; text-decoration: none;
  font-size: 12px; padding: 6px 10px;
  border-radius: 999px;
  transition: background .15s ease;
}
.ig-open-btn:hover { background: rgba(0,0,0,.8); }

/* Captions: consistent look & height */
.ig-caption {
  margin-top: 8px;
  font-size: 0.95rem; line-height: 1.35; color: #222;

  /* Normalize: same height for all cards (2 lines, ellipsis) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2); /* Reserve space even if empty */
}
.ig-caption--empty { visibility: hidden; } /* keep spacing consistent */

/* Responsive: 2 columns on tablets, 1 column on phones */
@media (max-width: 1024px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .ig-card--tall { grid-row: auto; } /* let it flow on smaller screens */
  .ig-media--reel { aspect-ratio: 3 / 4; } /* a bit shorter on tablets */
}
@media (max-width: 640px) {
  .ig-grid { grid-template-columns: 1fr; }
  .ig-media--reel { aspect-ratio: 1 / 1; } /* square on phones to save height */
}
/* Let the grid rows auto-fill but with equal height per row */
.ig-grid {
  align-items: end; /* aligns all cards' bottoms */
}

/* Make each card take full height of its grid cell */
.ig-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* ensures caption stays at bottom */
  height: 100%;
}

/* Media should expand to fill available vertical space above caption */
.ig-media-frame {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make the grid itself a flex container instead of a strict grid */
.ig-grid {
  display: flex;
  align-items: flex-end; /* aligns all bottoms horizontally */
  gap: 18px;
  flex-wrap: wrap; /* keeps it responsive on smaller screens */
}

/* Each card keeps its own width */
.ig-card {
  flex: 1 1 22%; /* roughly 4 columns */
  display: flex;
  flex-direction: column;
}

/* Keep the reel taller but still bottom-aligned */
.ig-card--tall {
  flex: 1 1 22%; /* same width */
  align-self: flex-end; /* anchor to bottom */
}

/* Ensure media section expands, caption sits at bottom */
.ig-media-frame {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* One grid, explicit areas */
.ig-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-items:end; /* bottoms align horizontally */
  grid-template-areas:
    "title title title reel"
    "p1    p2    p3    reel";
}

/* area mapping */
.area-title{ grid-area:title; align-self:end; }
.area-reel { grid-area:reel;  align-self:end; }
.area-p1   { grid-area:p1; }
.area-p2   { grid-area:p2; }
.area-p3   { grid-area:p3; }

/* cards & media */
.ig-card{ display:flex; flex-direction:column; }
.ig-card--tall{ /* reel spans 2 rows already via grid-area */ }
.ig-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ig-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.ig-name{ font-weight:600; font-size:.95rem; }

.ig-media-frame{ position:relative; border-radius:12px; overflow:hidden; background:#000; flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
.ig-media--square{ aspect-ratio:1/1; }
.ig-media--reel  { aspect-ratio:9/16; }
.ig-media{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

.ig-open-btn{ position:absolute; top:10px; right:10px; background:rgba(0,0,0,.55); color:#fff; text-decoration:none; font-size:12px; padding:6px 10px; border-radius:999px; }
.ig-open-btn:hover{ background:rgba(0,0,0,.8); }

.ig-caption{
  margin-top:8px; color:#222; font-size:.95rem; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(1.35em * 2); /* consistent height even if short */
}
.ig-caption--empty{ visibility:hidden; }

/* Responsive */
@media (max-width:1024px){
  .ig-grid{
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "title title"
      "reel  reel"
      "p1    p2"
      "p3    p3";
    align-items:stretch;
  }
}
@media (max-width:640px){
  .ig-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "reel"
      "p1"
      "p2"
      "p3";
  }
}

/* When screen is slightly smaller but still wide — before full tablet mode */
@media (max-width: 1350px) {
  .ig-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "title title title title"
      "p1    p2    p3    reel"; /* reel stays to the right, title gets full width above */
    align-items: end;
  }

  .area-title {
    align-self: start;
    margin-bottom: 20px; /* small space before photos/reel row */
  }
}


/* Show entire photos inside the same frames */
.ig-media-img {
  object-fit: contain;          /* <-- no crop */
  background: #111;             /* subtle letterbox bars (change to transparent if you prefer) */
}

/* Keep reels/videos filling the frame cleanly */
.ig-media-video {
  object-fit: cover;            /* fill, slight crop is okay for video */
  background: #000;
}

/* Optional: if you want photos centered vertically when very tall/short */
.ig-media-img { object-position: center center; }

/* Optional: “peek more” on hover without changing layout */
@media (hover:hover) {
  .ig-media-img:hover {
    transform: scale(1.02);
    transition: transform .18s ease;
  }
}


/* === HERO CONTAINER: Enables 50/50 split === */
.hero-container {
  display: flex;
  flex-direction: row; /* Desktop: side-by-side */
  width: 100%;
  margin: 0 auto;
  align-items: center; /* Vertically center both sides */
}

/* === IMAGE SIDE: Style the <img> inside .hero-image === */
.hero-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px; /* Prevent collapse on small content */
}

.hero-image img {
  width: 100%;
  height: auto;
  max-height: 750px;
  object-fit: contain;
  display: block;
}

/* === MOBILE: Stack content then image (your existing query, enhanced) === */
@media (max-width: 768px) {
  .hero-container {
    flex-direction: column; /* Stack vertically */
    align-items: stretch;
  }
  
  .hero-content {
    order: 1; /* Content appears first */
    max-width: 100%;
    padding: 2rem 1.5rem;
  }
  
  .hero-image {
    order: 2; /* Image appears second */
    padding: 0 1.5rem 2rem;
    min-height: auto;
  }
  
  .hero-image img {
    max-height: 400px;
  }
  
  /* Optional: reduce play-now size on mobile */
  .play-now {
    width: 240px;
    height: 240px;
    margin-left: 0 !important;
    left: auto !important;
  }
}

/* === CENTER THE .play-now CONTAINER === */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;      /* ← Center children horizontally */
  text-align: center;       /* ← Center text content */
  padding: 3rem 2rem;
}

/* Optional: constrain text width for readability */
.hero-content p {
  max-width: 500px;
  margin: 0 auto 2rem;
}

/* === PLAY-NOW CONTAINER: Centered, no fragile positioning === */
.play-now {
  position: relative;
  width: 300px;
  height: 300px;            /* ← Make square for consistent centering */
  margin: 0 auto;           /* ← Center horizontally */
  z-index: 4;
  overflow: visible;        /* ← Prevent SVG clip on rotation */
  /* REMOVE: left: 35%, margin-left: -100px, bottom: 0 */
}

/* === PLAY BUTTON TRIANGLE: Perfectly centered in SVG === */
.play-now .play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  /* ← True center */
  z-index: 2;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 40px;
  border-color: transparent transparent transparent #080808;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.play-now .play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

/* === SVG: Full size, rotating, centered === */
.play-now svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: rotate 10s linear infinite;
  display: block;
}

/* === SVG TEXT: Readable at all sizes === */
.play-now text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  fill: #080808;
  text-transform: uppercase;
}

/* === RESPONSIVE: Scale down on small screens === */
@media (max-width: 768px) {
  .play-now {
    width: 240px;
    height: 240px;
  }
  
  .play-now text {
    font-size: 9px;
    letter-spacing: 1px;
  }
  
  .play-now .play-btn {
    border-width: 20px 0 20px 32px; /* Smaller triangle */
  }
}

@media (max-width: 480px) {
  .play-now {
    width: 200px;
    height: 200px;
  }
  
  .play-now text {
    font-size: 8px;
  }
}

/* === HERO CONTENT: Keep text left-aligned/justified === */
.hero-content {
  flex: 1;
  padding: 3rem;
  max-width: 600px;
  text-align: justify; /* ← Your original: keeps text justified */
  display: flex;
  flex-direction: column;
  /* REMOVE align-items: center — we'll center ONLY the button */
}

/* Title image: keep your original padding/alignment */
.title-image {
  padding: 5rem 0rem 4rem 0rem;
  /* Optional: if you want title centered but text left, uncomment: */
  /* display: block; margin: 0 auto 1rem; */
}

/* Paragraph: keep justified, full width */
.hero-content p {
  margin-bottom: 2rem;
  /* No max-width constraint unless you want one */
}

/* === PLAY-NOW: Center ONLY this element === */
.play-now {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;        /* ← Centers the button horizontally */
  z-index: 4;
  overflow: visible;
  /* REMOVE: left: 35%, margin-left: -100px, bottom: 0 */
}

/* Play button triangle: centered inside SVG */
.play-now .play-btn {
  position: absolute;
  left: 50%;
  top:  50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 40px;
  border-color: transparent transparent transparent #080808;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.play-now .play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

/* SVG rotation */
.play-now svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: rotate 10s linear infinite;
  display: block;
}

.play-now text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  fill: #080808;
  text-transform: uppercase;
}

/* === RESPONSIVE: Scale button on small screens === */
@media (max-width: 768px) {
  .play-now {
    width: 240px;
    height: 240px;
  }
  .play-now text {
    font-size: 9px;
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .play-now {
    width: 200px;
    height: 200px;
  }
  .play-now text {
    font-size: 8px;
  }
}

/* === PLAY-NOW: Guaranteed centering === */
.play-now {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;           /* Centers horizontally */
  z-index: 4;
  overflow: visible;
  display: block;           /* Ensures margin: auto works */
}

/* Play button triangle: centered inside SVG */
.play-now .play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 40px;
  border-color: transparent transparent transparent #080808;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.play-now .play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

/* SVG rotation */
.play-now svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: rotate 10s linear infinite;
  display: block;
}

.play-now text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  fill: #080808;
  text-transform: uppercase;
}

/* === RESPONSIVE: Keep button centered when stacked === */
@media (max-width: 992px) {
  .hero-content {
    padding: 2rem 1.5rem;   /* Reduce padding on smaller screens */
    max-width: 100%;        /* Allow full width for centering context */
  }
  
  .play-now {
    width: 260px;
    height: 260px;
    margin: 1.5rem auto 0;  /* Top margin + centered */
  }
}

@media (max-width: 768px) {
  .play-now {
    width: 240px;
    height: 240px;
    margin: 1rem auto 0;
  }
  
  .play-now text {
    font-size: 9px;
    letter-spacing: 1px;
  }
  
  .play-now .play-btn {
    border-width: 20px 0 20px 32px;
  }
}

@media (max-width: 480px) {
  .play-now {
    width: 200px;
    height: 200px;
    margin: 0.5rem auto 0;
  }
  
  .play-now text {
    font-size: 8px;
  }
}

/* === EXTRA SAFEGUARD: Force centering if flex parent interferes === */
@media (max-width: 768px) {
  .hero-content {
    align-items: stretch;   /* Prevent flex from affecting child centering */
    text-align: justify;    /* Keep text justified */
  }
  
  /* Wrap play-now in a full-width container for reliable centering */
  .play-now {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}