/* ------------------- */
/* Import & Reset */
/* ------------------- */
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap');

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Arimo', sans-serif;
}

/* ------------------- */
/* Global Section Setup */
/* ------------------- */
.section {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

/* ------------------- */
/* SECTION 1: Hero Intro */
/* ------------------- */
#section1 {
  background-image: url('image/hero-bag.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay for Section 1 */
#section1 .overlay {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  padding: 0 8%;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertically center */
  align-items: center;       /* horizontally center */
  color: white;
  text-align: left;
}

/* Overlay for other sections */
.section:not(#section1) .overlay {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  padding: 0 8%;
  box-sizing: border-box;
  color: white;
  text-align: left;
}

/* Subtle dark overlay */
.overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.25);
  z-index: -4;
}


/* Logo */
.logo-top-left {
  position: absolute;
  top: 20px;
  left: 40px; /* adjust if needed */
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -3px;
  opacity: 1;

  /* Subtle glow / shadow */
  text-shadow: 1px 1px 3px rgba(200,200,200,0.4),
             0 0 10px rgba(220,220,220,0.5);
transition: all 0.3s ease-in-out;
}

/* "baba" in grey */
.logo-top-left .light {
  color: #9e9e9e;
  font-weight: 700;
}

/* "blac" in black */
.logo-top-left .dark {
  color: #111111;
  font-weight: 800;
}

/* ® symbol */
.logo-top-left sup {
  font-size: 10px;
  margin-left: 4px;
  color: #111111;
  vertical-align: super;
}

/* Hover glow effect */
.logo-top-left:hover {
  text-shadow: 2px 2px 6px rgba(220,20,60,0.7), 
             0 0 14px rgba(220,20,60,0.8);
  transform: scale(1.02);
}



/* Headline */
.headline {
  font-weight: 500;
  font-size: 11vw;
  line-height: 0.5;
  margin: 0;
  white-space: pre-line;
  text-transform: uppercase;
  text-shadow: 2px 8px 8px rgba(0,0,0,0.6);
  letter-spacing: 1px;

  /* Animation on load */
  opacity: 0;
  animation: whooshIn 2.3s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.headline span {
  display: block;   /* instead of inline-block */
  opacity: 0;
}


/* Subtext */
.subtext-left {
  position: relative;
  margin-top: 1.6rem;
  left: -15%;
  font-size: 28px;
  font-weight: 500;
  max-width: 400px;
  text-align: left;
  text-shadow: 2px 8px 8px rgba(0,0,0,0.8);

  /* Animation on load */
  opacity: 0;
  animation: whooshIn 4.0s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Circular Explore Here button */
.explore-link {
  position: absolute;
  bottom: 30px; right: 30px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: transparent;   /* Inside is pink */
  color: #FDF5E6;     /* Warm white text */
  font-size: 12px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  text-decoration: none;
  border: 4px solid white;  /* greenish blue border */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  font-weight: 500;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 3px rgba(200,200,200,0.4),
             0 0 10px rgba(220,220,220,0.5);
  /* Animation on load */
  opacity: 0;
  animation: whooshIn 3.0s cubic-bezier(0.77, 0, 0.175, 1.5) forwards;
}

.explore-link:hover {
  background: rgba(255,255,255,0.4);     
  color: black;          
  border-color: white;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7),
             0 0 14px rgba(0, 0, 0, 0.8);  
}

/* Whoosh animation */
@keyframes whooshIn {
  0% { transform: translateX(-120%); opacity: 0; }
  70% { transform: translateX(6%); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}


/* New keyframes for right-side animation */
@keyframes whooshInRight {
  0% { transform: translateX(120%); opacity: 0; }
  70% { transform: translateX(-6%); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}


/* Circular Wanna Talk button */
.talk-link {
  position: absolute;
  bottom: 30px; 
  left: 30px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: transparent;   /* Inside is pink */
  color: #FDF5E6;     /* Warm white text */
  font-size: 12px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  text-decoration: none;
  border: 4px solid white;  /* greenish blue border */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  font-weight: 500;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 3px rgba(200,200,200,0.4),
             0 0 10px rgba(220,220,220,0.5);



  /* Animation on load */
  opacity: 0;
  animation: whooshIn 3.0s cubic-bezier(0.77, 0, 0.175, 1.5) forwards;
}

.talk-link:hover {
  background: rgba(255,255,255,0.4);     
  color: black;          
  border-color: white;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7),
             0 0 14px rgba(0, 0, 0, 0.8);
}


/* For Section 1 headline spans */
.headline span {
  display: inline-block;
  opacity: 0;
}
.headline .slide-left {
  animation: whooshIn 1.9s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.headline .slide-right {
  animation: whooshInRight 1.9s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  animation-delay: 0.2s; /* tiny delay for stagger */
}

/* Scroll reveal variations */
.hidden.slide-left {
  transform: translateX(-120%);
}
.hidden.slide-right {
  transform: translateX(120%);
}
.show.slide-left, .show.slide-right {
  transform: translateX(0);
  opacity: 1;
}



/* Responsive (Section 1) */
@media (max-width: 1024px) {
  .headline { font-size: 11vw; }
  .subtext-left { left: 0; font-size: 18px; }
}
@media (max-width: 768px) {
  .headline { font-size: 14vw; }
  .logo-top-left { font-size: 14px; }
  .explore-link {
    width: 60px; height: 60px;
    font-size: 11px;
  }
}

/* Gentle pulse effect */
.explore-link {
  animation: whooshIn 3.0s cubic-bezier(0.77, 0, 0.175, 1.5) forwards, 
             pulse 2.5s infinite ease-in-out;
}

/* Gentle pulse effect */
.talk-link {
  animation: whooshIn 3.0s cubic-bezier(0.77, 0, 0.175, 1.5) forwards, 
             pulse 2.5s infinite ease-in-out;
}


@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(200, 206, 209, 0.8); 
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 15px 5px rgba(200, 206, 209, 0);
  }
}

/* ===== Responsive Edge-to-Edge Optimization (Section 1 only) ===== */
@media (max-width: 768px) {
  #section1 {
    background-position: center;
    background-size: cover;
    min-height: 100vh;
    width: 100vw;          /* full width edge-to-edge */
    margin: 0;
    padding: 0;
  }

  #section1 .overlay {
    padding: 0 5%;         /* balanced spacing on small screens */
    justify-content: center;
  }

  .headline {
    font-size: clamp(40px, 14vw, 120px); /* scales smoothly across devices */
    line-height: 0.9;
  }

  .subtext-left {
    font-size: clamp(14px, 3vw, 22px);
    left: 0;
    margin-top: 1rem;
  }

  .logo-top-left {
    top: 15px;
    left: 20px;
  }

  .explore-link, .talk-link {
    width: 55px;
    height: 55px;
    font-size: 10px;
  }
}

@media (min-width: 1600px) {
  #section1 .overlay {
    padding: 0 10%; /* keeps proportion on very large screens */
  }
}





/* ------------------- */
/* SECTION 2: Origin Story */
/* ------------------- */
#section2 {
  position: relative;
  overflow: hidden;
  background-image: url('image/fallback-section-2.jpg'); /* ✅ Static image background */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#section2::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: -1;
}
#section2 .overlay {
  position: relative;
  z-index: 2;
}
 

/* Story container layout */
.story-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 8%;
  z-index: 2;
  position: relative;
  color: white;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
  box-sizing: border-box;
  padding-top: 80px;
}

/* Heading */
.story-heading {
  font-size: 6vw;
  font-weight: 500;
  text-transform: uppercase;
  max-width: 30%;
  margin: 5;
  text-shadow: 2px 8px 8px rgba(0,0,0,0.6);
}

/* Paragraph */
.story-text {
  font-size: 16px;
  font-weight: 500;
  max-width: 50%;
  line-height: 1.6;
  opacity: 0.9;
  text-align: justify;
}


.slide-left.hidden {
  transform: translateX(-120%);
}
.slide-right.hidden {
  transform: translateX(120%);
}


/* Responsive Section 2 */
@media (max-width: 1024px) {
  .story-container { flex-direction: column; text-align: center; }
  .story-heading, .story-text {
    max-width: 100%;
    margin-bottom: 20px;
  }
  .story-heading { font-size: 8vw; }
}

/* ------------------- */
/* Scroll Animations (used from Section 2 onward) */
/* ------------------- */
.hidden {
  opacity: 0;
  transform: translateX(-120%);
  transition: all 0.8s ease-out;
}
.show {
  opacity: 1;
  transform: translateX(0);
}



/* ===== Responsive Edge-to-Edge Optimization (Section 2 only) ===== */
@media (max-width: 768px) {
  #section2 {
    background-position: center;
    background-size: cover;
    width: 100vw;        /* full screen width */
    min-height: 100vh;   /* full screen height */
    margin: 0;
    padding: 0;
  }

  #section2 .overlay {
    padding: 0 6%;       /* consistent side spacing on smaller screens */
  }

  .story-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 40px;   /* less top space for mobile */
    padding: 0 5%;
  }

  .story-heading {
    font-size: clamp(32px, 9vw, 72px);
    max-width: 100%;
    margin-bottom: 1.2rem;
  }

  .story-text {
    font-size: clamp(15px, 3.6vw, 20px);
    max-width: 90%;
    text-align: justify;
    line-height: 1.7;
  }
}

/* Large screen fine-tune for consistency */
@media (min-width: 1600px) {
  #section2 .story-container {
    padding: 0 10%;
  }
}









/* Section 3 background */
#section3 {
  position: relative;
  background: url('image/your-bg-image.jpg') no-repeat center center/cover;
  min-height: 100vh;
  height: auto;
  color: white;
}

/* Logo top right */
.logo-top-right {
  position: absolute;
  top: 20px;
  right: 30px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -3px;
  opacity: 1;

  /* Subtle glow / shadow */
  text-shadow: 1px 1px 3px rgba(100,100,100,0.2),
             0 0 10px rgba(150,150,150,0.5);
transition: all 0.3s ease-in-out;

}
.logo-grey { color: grey; }
.logo-black { color: black; }
.trademark {
  font-size: 10px;
  vertical-align: super;
  margin-left: 2px;
  color: black; /* adds pop */
}

/* Hover glow effect */
.logo-top-right:hover {
  text-shadow: 2px 2px 6px rgba(220,20,60,0.7), 
             0 0 14px rgba(220,20,60,0.8);
  transform: scale(1.02);
}



/* Paragraph (top left) */
.section3-text {
  position: absolute;
  top: 80px;
  left: 40px;
  max-width: 400px;
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
  
}

/* Availability block bottom right */
.availability {
  position: absolute;
  bottom: 40px;
  right: 40px;
  text-align: right;
}

.platform-icons {
  margin-bottom: 10px;
}

.platform-icons img {
  width: 30px;
  height: 30px;
  border-radius: 50%;   /* makes them circle */
  margin-left: 10px;
  object-fit: cover;    /* keeps logos inside circle neat */
  box-shadow: 0 0 8px black; /* subtle luxury glow */
}


.availability-text {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: 0.9;
}

.text-box {
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
  color: #fff;                          /* white text for contrast */
  padding: 10px 10px;                   /* space inside the box */
  border-radius: 10px;                  /* rounded corners for elegance */
  display: inline-block;                /* box hugs content neatly */
  max-width: 600px;                     /* optional: keeps text box from being too wide */
}

/* ===== Small-screen safe adjustments for Section 3 (add only, non-destructive) ===== */
/* Purpose: keep desktop unchanged; make mobile/tablet safe without breaking layout */

@media (max-width: 768px) {
  /* make background behave but keep full-bleed */
  #section3 {
    background-position: center;
    background-size: cover;
    /* keep min-height to preserve vertical space but allow auto expand if content grows */
    min-height: 100vh;
    height: auto;
    padding: 6vh 4vw; /* small breathing space on mobile */
  }

  /* logo: still in corner but slightly smaller so it doesn't overwhelm */
  .logo-top-right {
    position: absolute;   /* keep it in the corner */
    top: 14px;            /* slightly smaller offset */
    right: 14px;
    font-size: clamp(14px, 4.4vw, 20px); /* responsive/rescaled */
    z-index: 6;
  }

  /* paragraph: convert to document flow and center it */
  .section3-text {
    position: relative;   /* remove absolute on small screens */
    top: auto;
    left: auto;
    margin: 6vh auto 0 auto;   /* push it down a little, centered */
    max-width: 92%;            /* keep it narrow but flexible */
    font-size: clamp(14px, 3.5vw, 18px);
    line-height: 1.6;
    text-align: center;        /* centered for better mobile reading */
  }

  /* availability block: switch to centred stacked flow */
  .availability {
    position: relative;
    bottom: auto;
    right: auto;
    margin: 4vh auto 6vh auto;
    text-align: center;
    width: 100%;
  }

  /* platform icons scale and space well on small screens */
  .platform-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
  }
  .platform-icons img {
    width: clamp(28px, 8vw, 40px);
    height: clamp(28px, 8vw, 40px);
    margin-left: 0; /* we use gap now */
  }

  .availability-text {
    font-size: clamp(12px, 3.2vw, 14px);
  }

  /* ensure the text-box keeps readable padding on mobile */
  .text-box {
    display: inline-block;
    padding: 8px 12px;
    max-width: 95%;
  }
}

/* tiny extra for ultra-small phones */
@media (max-width: 420px) {
  .section3-text { margin-top: 5vh; font-size: clamp(13px, 4.2vw, 16px); }
  .logo-top-right { font-size: 16px; top: 10px; right: 10px; }
}



/* Section 4 - New Arrivals (edge-to-edge with inner wrapper) */

.new-arrivals {
  background: black;
  color: white;
  width: 100vw;           /* full screen width */
  overflow: hidden;
}

.arrivals-wrapper {
  max-width: 1300px;      /* keeps layout elegant on ultra-wide screens */
  margin: 0 auto;
  padding: clamp(40px, 6vh, 80px) clamp(28px, 4vw, 40px);
  box-sizing: border-box;
}

/* Title */
.new-arrivals .section-title {
  font-family: 'Arimo', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 500;
  margin-bottom: 40px;
  text-align: left;
}



/* Product grid: allow wrap, but keep spacing and three-column feel on large screens */
.product-grid {
  display: flex;
  flex-wrap: wrap;                      /* allow wrapping on smaller widths */
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

/* Product box: keep card look, but become fluid when space is tight */
.product-box {
  background: black;
  border: 1px solid white;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;

  /* three columns on wide screens; adjusts responsively */
  flex: 1 1 calc(33.333% - 20px);
  max-width: calc(33.333% - 20px);
  min-width: 160px;         /* maintains legibility */
  height: auto;             /* allow height to adapt on small screens */
}

/* Product image and caption sizing */

.product-box img {
  max-width: 80%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-box:hover img {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}


.caption {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid white;
  padding-bottom: 5px;
}

/* subtext */
.subtext {
  text-align: center;
  font-size: 14px;
  font-style: italic;
  margin-top: 20px;
  color: #ccc;
}

/* Small / medium screens: change to 2 columns */
@media (max-width: 1000px) {
  .product-box {
    flex: 1 1 calc(50% - 16px);
    max-width: calc(50% - 16px);
    min-width: 140px;
  }
  }

/* Very small phones: single column stack */
@media (max-width: 520px) {
  .product-grid {
    gap: 14px;
  }
  .product-box {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: unset;
    border-radius: 16px;
    padding: 16px;
  }
  }



/* ------------------- */
/* SECTION 5: Why Baba Blac */
/* ------------------- */
#section5 {
  position: relative;
  background: url('image/section5-bg.jpg') no-repeat center center/cover;
  color: #fdf5e6;
  overflow: hidden;
}

/* Dark overlay */
#section5::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

/* Main container */
.why-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10vh 10vw;
  gap: 7vw;
  box-sizing: border-box;
  z-index: 1;
}

/* Left heading */
.why-left {
  flex: 1.4;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.why-heading {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.1;
  color: #fdf5e6;
  text-shadow: 2px 4px 8px rgba(0,0,0,0.6);
  max-width: 220px;
}

/* Right side - reasons */
.why-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 5vh, 40px);
}

/* Each reason */
.reason {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}

.reason i {
  font-size: clamp(20px, 3vw, 28px);
  color: #fdf5e6;
  transition: all 0.3s ease;
}

.reason i:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}

.reason p {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.4;
  margin: 0;
  color: #fdf5e6;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.7);
}

/* Responsive refinements */
@media (max-width: 1024px) {
  .why-container {
    flex-direction: column;
    text-align: center;
    padding: 10vh 6vw;
  }
  .why-left,
  .why-right {
    justify-content: center;
    align-items: center;
  }
  .reason {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .why-heading {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .reason {
    flex-direction: column;
    gap: 10px;
  }
  .reason p {
    max-width: 90%;
    text-align: center;
  }
}

/* tiny phones */
@media (max-width: 420px) {
  .why-container {
    padding: 8vh 5vw;
    gap: 6vh;
  }
  .reason i {
    font-size: 22px;
  }
  .reason p {
    font-size: 14px;
  }
}

/* Scroll Animations (unchanged, uses existing JS) */
.hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}
.show {
  opacity: 1;
  transform: translateY(0);
}
.hidden.slide-left { transform: translateX(-120%); }
.hidden.slide-right { transform: translateX(120%); }
.show.slide-left,
.show.slide-right {
  transform: translateX(0);
  opacity: 1;
}





/* ===== Section 6: Contact & Partnerships (Final Polished) ===== */
#section6 {
  background-color: #ffffff;
  color: #000000;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(50px, 8vh, 80px) 6vw; /* fluid vertical + horizontal */
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

#section6 .contact-container {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto; /* avoid forced stretching on small screens */
  gap: clamp(40px, 6vh, 80px);
}

/* Headings */
#section6 .contact-heading,
#section6 .partnership-heading {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
}
#section6 .contact-heading { text-align: left; }
#section6 .partnership-heading { text-align: right; }

/* Middle contact area */
#section6 .contact-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 40px);
}

/* Each contact box: balanced wrapping & minimum width for tablets */
#section6 .contact-box {
  text-align: left;
  flex: 1 1 250px; /* helps balance wrapping */
  min-width: 220px;
  box-sizing: border-box;
}

/* Contact labels & values */
#section6 .contact-box h4 {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

#section6 .contact-box p {
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  font-weight: 400;
  margin: 0;
  line-height: 1.6;
}

/* Social icons */
#section6 .social-icons {
  display: flex;
  gap: 15px;
}

#section6 .social-icons a {
  color: #000000;
  font-size: 1.2rem;
  border: 1px solid #000000;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#section6 .social-icons a:hover {
  background-color: #000000;
  color: #ffffff;
  transform: scale(1.05);
}

/* ------------------ */
/* Tablet polish (769px — 1024px)
/* ensures equal visual rhythm and nicer centering on tablets */
/* ------------------ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* slightly reduce vertical padding on some tablets */
  #section6 {
    padding: clamp(36px, 6vh, 64px) 5.5vw;
  }

  /* center headings visually on tablets so the block feels balanced */
  #section6 .contact-heading,
  #section6 .partnership-heading {
    text-align: center;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
  }

  /* keep the three boxes in a single row when possible and equalize their width */
  #section6 .contact-info {
    justify-content: space-around;
    align-items: center;        /* vertically center label/value pairs */
    gap: clamp(20px, 4vw, 36px);
  }

  /* make each box a consistent percent so they line up perfectly */
  #section6 .contact-box {
    flex: 0 1 30%;
    min-width: 200px;
    text-align: center;        /* center content on tablets for visual balance */
    padding: 8px 12px;         /* small breathing space */
  }
}

/* Tablets & below (mobile fallback) */
@media (max-width: 768px) {
  #section6 {
    padding: clamp(40px, 6vh, 60px) 5vw;
  }

  /* On small screens keep headings centered */
  #section6 .contact-heading,
  #section6 .partnership-heading {
    text-align: center;
  }

  /* stack boxes vertically on narrow screens */
  #section6 .contact-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #section6 .contact-box {
    flex: unset;
    width: 100%;
    min-width: unset;
    padding: 8px 0;
  }

  #section6 .social-icons {
    justify-content: center;
  }
}