@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&display=swap');

:root {
  --nr-head: #693158;
  --nr-item: #B25A96;
  --nr-item-hover: #A9518D;
  --nr-item-active: #9E4A85;

  --nr-page-pad: 60px;
  --nr-left-w: 380px;
  /* slightly reduced */
  --nr-gap: 30px;

  --nr-card-radius: 20px;
  --nr-card-go: #B25A96;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

/* ================= SECTION ================= */

.nr-section {
  position: relative;
  padding: 0 0 90px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.nr-wrap {
  max-width: 1600px;
  /* important */
  margin: 0 auto;
  padding-left: var(--nr-page-pad);
  padding-right: var(--nr-page-pad);
}

/* ================= LAYOUT ================= */

.nr-layout {
  display: flex;
  gap: var(--nr-gap);
  padding-top: 60px;
}

/* LEFT PANEL */

.nr-left {
  width: var(--nr-left-w);
  flex: 0 0 var(--nr-left-w);
}

.nr-leftpanel {
  overflow: hidden;
}

.nr-acc-item {
  background: var(--nr-item);
}

/* ✅ Hides the list of items that appears inside the accordion after clicking */
.nr-sub-btn {
  display: none !important;
}

.nr-acc-btn {
  width: 100%;
  border: 0;
  background: var(--nr-head);
  padding: 0 28px;
  min-height: 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.nr-acc-title {
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 23px;
}

.nr-sub-btn {
  width: 100%;
  border: 0;
  background: var(--nr-item);
  padding: 18px 28px;
  color: #fff;
  font-size: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
  text-align: left;
}

.nr-sub-btn:hover {
  background: var(--nr-item-hover);
}

.nr-sub-btn.active {
  background: var(--nr-item-active);
}

/* ================= RIGHT GRID ================= */

/* 🔥 KEY FIX: RESPONSIVE GRID */
#nrGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* ALWAYS 3 on desktop */
  gap: 30px;
  width: 100%;
}

.nr-item {
  width: 100%;
}

/* CARD */

.nr-card-img {
  position: relative;
  width: 103%;
  height: 288px;
  border-radius: var(--nr-card-radius);
  overflow: hidden;
}

.nr-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px);
}

.nr-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}

.nr-card-title {
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

.nr-card-go {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nr-card-go);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nr-card-go img {
  width: 18px;
  height: 15px;
  filter: brightness(0) invert(1);
}

/* ================= RESPONSIVE ================= */

/* Only collapse when actual screen is small */
@media (max-width:1200px) {
  #nrGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:768px) {
  .nr-layout {
    flex-direction: column;
  }

  .nr-left {
    width: 100%;
    flex: auto;
  }

  #nrGrid {
    grid-template-columns: 1fr;
  }

}

/* .banner {
  background: url("/assets/img/home12/maskkkk.png") center 0 / cover no-repeat !important;
  height: 100vh;
} */

/* ================= ACCORDION ARROW ROTATION ================= */

/* smooth rotate */
.nr-acc-arrow svg {
  transition: transform 0.25s ease;
  transform-origin: center;
}

/* OPEN (active/selected) => arrow RIGHT per user "show this arrow to right end, not down" */
.nr-acc-btn:not(.collapsed) .nr-acc-arrow svg {
  transform: rotate(-90deg);
}

/* CLOSED (inactive) => arrow DOWN per user "remaining should [point down]" */
.nr-acc-btn.collapsed .nr-acc-arrow svg {
  transform: rotate(0deg);
}

/* Header Colors - Active vs Inactive */
.nr-acc-btn.collapsed {
  background: var(--nr-head);
}

/* Lighter: #693158 */
.nr-acc-btn:not(.collapsed) {
  background: #5B2E48;
}

/* Darker purple for active */

/* Card Go Button Gradient */
.nr-card-go {
  background: linear-gradient(180deg, #B25A96 0%, #8E4476 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 
.page_header h1 {
  text-align: left;
  margin: 0px;
  max-width: 550px;
  font-family: "Oswald-Light", sans-serif;
  font-size: 60px;
  font-weight: 300;
  position: relative;
  font-weight: bold;
  color: white;
  line-height: 100%;
  position: relative;
  display: none;
} */
/* .page_header p {
  font-size: 30px;
  line-height: 1.3;
  color: white;
  max-width: 550px;
  font-weight: 400;
  position: relative;
  position: absolute;
  text-shadow: 1px 1px 2px #000000;
  font-family: "AvenirLtStd-35Light", sans-serif;
  display: none;
}
#section03 a {
  padding-top: 60px;
  display: none;
} */
/* =========================
   MOBILE FIX (ONLY)
   Makes layout full width, not narrow
========================= */

@media (max-width: 768px) {

  /* ✅ remove desktop side padding so content uses full phone width */
  .nr-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ✅ stack left + right properly */
  .nr-layout {
    flex-direction: column !important;
    gap: 18px !important;
    padding-top: 20px !important;
  }

  /* ✅ left panel should become full width */
  .nr-left {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* ✅ right section full width */
  .nr-right {
    width: 100% !important;
  }

  /* ✅ cards should not be narrow: 1 column full width */
  #nrGrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .nr-item {
    width: 100% !important;
  }

  .nr-card-img {
    width: 100% !important;
    height: 340px !important;
    /* tune if needed */
  }

  /* ✅ font sizes better on mobile */
  .nr-acc-title {
    font-size: 36px !important;
  }

  .nr-sub-btn {
    font-size: 18px !important;
    padding: 18px 18px !important;
    height: auto !important;
  }

  .nr-card-title {
    font-size: 20px !important;
    width: 90% !important;
  }
}

/* extra small phones */
@media (max-width: 420px) {
  .nr-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .nr-card-img {
    height: 310px !important;
  }

  .nr-acc-title {
    font-size: 32px !important;
  }
}

.page_header h1 {
  text-align: left;
  margin: 0px;
  max-width: 550px;
  font-family: "Oswald-Light", sans-serif;
  font-size: 48px;
  position: relative;
  font-weight: bold;
  color: white;
  /* margin-top: 77px; */
}
.page_header p {
  font-size: 30px;
  /* line-height: 1; */
  color: white;
  max-width: 553px;
  font-weight: 400;
  position: relative;
  position: absolute;
  text-shadow: 1px 1px 2px #000000;
  font-family: "AvenirLtStd-35Light", sans-serif;
  /* margin-top: 101px; */
  /* padding-top: 47px; */
}
@media screen and (max-width: 767px) {
  .page_header h1 {
    text-align: left;
    margin: 30px 0 0 20px;
    max-width: 550px;
    font-size: 24px;
    font-weight: bold;
    color: white;
    /* line-height: 130%;
    position: relative; */
  }
  .page_header p {
    font-size: 18px;
    /* line-height: 140% !important; */
    color: white;
    max-width: 550px;
    text-shadow: 1px 1px 2px #000000;
    margin-left: 30px;
    margin-top: 0;
    /* padding-top: 0;
    position: relative; */
  }
}