/* --- Full-bleed header (safe) --- */
html, body { margin:0; padding:0; overflow-x:hidden; }

.site-header {
  position: relative;            /* allow full-bleed background layer */
  z-index: 10;
  font-family: 'Roboto', sans-serif;
}

/* Full-width purple background behind the header */
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);   /* center the 100vw background */
  width: 100vw;                  /* always full viewport width */
  height: 100%;
  background: #33053D;
  z-index: -1;                   /* sit behind header content */
}

/* Header inner layout: title left, menu right */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;                   /* fill available line */
  padding: 16px 40px;            /* left/right breathing room */
  box-sizing: border-box;
  margin: 0;
}

/* Make sure no outer .container constrains the header */
.site-header .container,
.header-inner.container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 40px !important;
}

/* Site title — force visibility */
.brand a {
  display: inline-block;         /* prevent accidental collapse */
  color: #4BDF42 !important;
  font-size: 25px !important;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

/* Menu */
.nav {
  display: flex;
  gap: 30px;
}
.nav a {
  display: inline-block;
  color: #4BDF42 !important;
  font-size: 20px !important;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.2;
  transition: opacity .3s ease;
}
.nav a:hover { opacity: .8; text-decoration: underline; }

/* Full-bleed divider below header */
.header-divider {
  position: relative;
  height: 2px;
}
.header-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.25),
    rgba(255,255,255,.08)
  );
}

/* --- Body section styling --- */
/* --- Main body H1 section --- */
.main-body {
  background: #33053D;                 /* same purple as header */
  padding: 10px 10px;                  /* top/bottom spacing */
  text-align: center;                  /* center the heading */
}

.main-body h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  color: #4BDF42;                      /* same green as site title */
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
/* --- Text section below H1 --- */
.text-section {
  background: #33053D;         /* same purple as header */
  color: #ffffff;              /* white text */
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 1.7;
  padding: 15px 15px;
  box-sizing: border-box;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
}

/* Container keeps paragraphs centered for large screens */
.text-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Link styling (compliment purple) */
.text-section a {
  color: #4EF5E1;              /* aqua-green contrast */
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.text-section a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ---------- H3 styling inside content sections ---------- */
.text-section h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #E6B800;          /* soft golden-yellow tone, distinguishable on purple */
  margin: 15px 0 15px;     /* space above and below */
  line-height: 1.3;
  text-align: left;
}

/* ---------- Highlighted bold text styling ---------- */
.text-section b,
.text-section strong {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #4FD1FF;           /* bright cyan-blue tone, stands out on purple */
  font-size: 23px;
}

/* --- Responsive mobile menu (clean) --- */

/* Hamburger icon (hidden on desktop) */
.menu-toggle {
  display: none;
  font-size: 30px;
  color: #4BDF42;
  cursor: pointer;
  user-select: none;
}

/* Mobile rules */
@media (max-width: 768px) {
  .menu-toggle {
    display: block; /* show hamburger on mobile */
  }

  /* Hide nav by default on mobile */
  .nav {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #33053D;
    position: absolute;
    top: 70px;        /* sits just below header */
    left: 0;
    text-align: center;
    padding: 20px 0;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
    z-index: 999;
  }

  .nav a {
    font-size: 22px;
  }

  /* Show menu when active */
  .nav.active {
    display: flex;
    animation: slideDown 0.3s ease;
  }

  /* Change hamburger to X when open */
  .menu-toggle.open::before {
    content: "✕";
  }
} /* <-- closes @media */

/* Slide-down animation (must be outside @media in some validators) */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- H2 section (same styling as H1) --- */
.secondary-heading {
  background: #33053D;          /* same purple as header */
  padding: 10px 10px;           /* vertical spacing */
  text-align: center;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
}

.secondary-heading h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 40px;              /* same size as H1 */
  color: #4BDF42;               /* same green as H1 */
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

/* --- Profiles grid (24 cards) --- */
.profiles-section{
  background:#33053D;
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw; max-width:100vw;
  box-sizing:border-box;
  padding:20px 20px;
  font-family:'Roboto', sans-serif;
}

/* Flexbox layout */
.profiles-grid{
  /* 3 cards per row: each card total ~397px (365 + 14 + 14 + 2 + 2), plus 2 gaps of 24px = 1239px */
  max-width:1245px;             /* give a little breathing room */
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
}

/* Card box (3 columns desktop) */
.profile-card{
  /* IMPORTANT: content-box so 365px is the CONTENT area, padding/border added outside */
  box-sizing: content-box;
  flex: 0 0 365px;              /* content width = 365px */
  max-width:365px;
  text-align:center;
  background:#1b1720;
  border:2px solid rgba(255,255,255,0.15);
  border-radius:14px;
  padding:14px;                 /* sits outside the 365px content width */
  overflow:hidden;              /* prevent tiny overflow glitches */
  transition:transform .2s ease, border-color .3s ease;
}
.profile-card:hover{ transform:translateY(-4px); border-color:#FFD700; }

/* Image — exact desktop size */
.profile-card img{
  width:365px;
  height:467px;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
  display:block;
  margin:0 auto;
}

/* Tablet: 2 per row, images scale inside card */
@media (max-width:992px){
  .profile-card{
    /* switch to percentage widths for fluid layout */
    box-sizing: border-box;     /* more natural on small screens */
    flex: 0 0 calc((100% - 24px)/2);
    max-width: calc((100% - 24px)/2);
    padding:14px;
  }
  .profile-card img{
    width:100%;
    height:auto;                /* keep aspect ratio */
    max-width:100%;
  }
}

/* Phone: 1 per row */
@media (max-width:600px){
  .profile-card{ flex:0 0 100%; max-width:100%; }
  .profile-card img{ width:100%; height:auto; }
}

/* Name (gold) */
/* Model name now uses <p> tag but same styling as before */
.model-name {
  color: #FFD700;              /* golden */
  font-size: 1.15rem;          /* same as before */
  margin: 10px 0 6px;
  font-weight: 700;
  text-align: center;
  font-family: 'Roboto', sans-serif;
}


/* Meta + description (white) */
.profile-card .meta,
.profile-card .desc{
  color:#fff;
  opacity:.95;
  font-size:.98rem;
  line-height:1.5;
  margin:0 0 10px;
}

/* Actions */
.profile-card .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-family:'Roboto', sans-serif;
}
.btn-phone{ background:#D81B60; }
.btn-whatsapp{ background:#25D366; }
.btn:hover{ filter:brightness(.95); }

/* ------- Tables inside text sections ------- */
.text-section .table-wrap{
  overflow-x:auto;            /* safe on mobile */
  margin: 18px 0 28px;
}

.text-section table.info-table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  font-family:'Roboto', sans-serif;
  background:#2a2f3d;         /* dark (not purple) for rows */
  border:1px solid #3a4152;
  border-radius:12px;
  overflow:hidden;            /* rounds corners */
}

/* Header */
.text-section table.info-table thead th{
  background:#1e2230;         /* darker header band */
  color:#F3F6FF;              /* distinct light text */
  font-weight:700;
  font-size:23px;             /* as requested */
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid #3a4152;
}

/* Body rows */
.text-section table.info-table tbody td{
  color:#EAEAEA;              /* readable on dark rows */
  font-size:20px;             /* as requested */
  padding:14px 16px;
  border-bottom:1px solid #3a4152;
}

/* Zebra striping for readability */
.text-section table.info-table tbody tr:nth-child(odd){
  background:#32384a;
}
.text-section table.info-table tbody tr:nth-child(even){
  background:#2a2f3d;
}

/* Optional: highlight on hover */
.text-section table.info-table tbody tr:hover{
  background:#3a4152;
}

/* Make header cells bold even if <th> missed */
.text-section table.info-table th,
.text-section table.info-table .th-like{
  font-weight:700;
}

/* ---------- Responsive tweaks for mobile ---------- */
@media (max-width: 768px) {
  .text-section table.info-table thead th {
    font-size: 18px;      /* smaller than 23px */
    padding: 10px 12px;
  }

  .text-section table.info-table tbody td {
    font-size: 16px;      /* smaller than 20px */
    padding: 10px 12px;
  }

  .text-section .table-wrap {
    margin: 10px 0 20px;
  }
}

/* Even smaller phones */
@media (max-width: 480px) {
  .text-section table.info-table thead th {
    font-size: 16px;
    padding: 8px 10px;
  }

  .text-section table.info-table tbody td {
    font-size: 14px;
    padding: 8px 10px;
  }
}

}