/* Hide both sconce GIFs on About page */
.page-about .sconce,
.page-about .sconce2 {
  display: none;
}


.page-about #c1-item-1,
.page-about #c3-item-1{
  background-image:
    none,
url("/files/section1/section1-cover.png"),
url("/files/section1/section1bkg-v2.png");
    background-repeat: no-repeat, no-repeat, no-repeat ; 
    background-position: center, center, center;
    background-size:
    contain,
    contain,
    calc(75%);
}


.page-about #c1-item-1::after,
.page-about #c3-item-1::after {
  content: none;     /* ⬅️ removes the pseudo-element entirely */
  animation: none;
  background: none;
}

.page-about #c1-item-1 .scrollbox {
  position: absolute;      /* lets you place it over the PNG */
  top: 17px;
  right: 43px;
  bottom: 20px;
  left: 43px;              /* inset padding inside the panel */

  overflow-y: auto;        /* ✅ scroll happens here */
  overflow-x: hidden;

  
  box-sizing: border-box;
  text-align: left;
  background: transparent; /* or rgba(...) if you want readability */
  color: #010907;

  pointer-events: auto;    /* important if a parent layer disables clicks */
}

.page-about #c3-item-1 .scrollbox {
  position: absolute;      /* lets you place it over the PNG */
  top: 17px;
  right: 43px;
  bottom: 20px;
  left: 43px;              /* inset padding inside the panel */

  overflow-y: auto;        /* ✅ scroll happens here */
  overflow-x: hidden;

  
  box-sizing: border-box;
  text-align: left;
  background: transparent; /* or rgba(...) if you want readability */
  color: #010907;

  pointer-events: auto;    /* important if a parent layer disables clicks */
  
    font-size: 14px;
}

.scrollbox-img {
  display: block;
  margin: 0 auto;   
  width: 100%;        /* optional: makes it fill the scrollbox width */
  height: auto;
}

 

/* the scrollable area */
.page-about #c2-item-1 .scrollbox {
  position: absolute;      /* lets you place it over the PNG */
  top: 30px;
  right: 60px;
  bottom: 30px;
  left: 60px;              /* inset padding inside the panel */

  overflow-y: auto;        /* ✅ scroll happens here */
  overflow-x: hidden;

  
  box-sizing: border-box;
  text-align: left;
  background: transparent; /* or rgba(...) if you want readability */
  color: #010907;

  pointer-events: auto;    /* important if a parent layer disables clicks */
}