.bg-orange { background-color:#cb4900; }
    .text-orange { color:#cb4900; }
    .social-card .avatar { width:56px; height:56px; object-fit:cover; }
    .icon-box { width:56px; height:56px; background:#fff; border-radius:0.375rem; }
  /* Collage section (single image) */
  /* brighten collage: add subtle white layer under the image and tone down overlay */
  /* COLLAGE: lightweight parallax (CSS variable driven) */
  .collage-section {
    position:relative;
    height:700px;
    max-height:700px;
    overflow:hidden;
    /* Use a CSS variable so JS can update the vertical offset for parallax */
    --parallax: 0px;
    background-image: linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0.10)), url('https://www.utrgv.edu/10/_files/images/collage.webp');
    /* center vertically with optional offset injected by --parallax */
    background-position: center calc(50% + var(--parallax));
    background-size: cover;
    background-repeat: no-repeat;
    border-top:6px solid #cb4900;
    box-sizing:border-box;
    /* performance hints */
    will-change: background-position;
    /* Fallback for older/mobile browsers: background-attachment fixed gives a simple parallax effect */
    background-attachment: scroll;
  }
  /* Slight overlay to darken lower area; keep pointer-events none so it doesn't block scroll */
  .collage-section .collage-overlay { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.25)); pointer-events:none; }
  /* Hex separator bar (flipped vertically) */
  .hex-separator { height:70px; background:url('https://www.utrgv.edu/_files/images-2022/hex-orange-2.png') repeat-x center/auto 70px; transform:scaleY(-1); transform-origin:center; }
    /* Social section bottom-half pattern using the 10-icon SVG */
    .social-pattern { position:relative; overflow:visible; }
    .social-pattern::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%; /* start pattern from halfway down */
      bottom: 0;
      background-image: url('https://www.utrgv.edu/10/_files/images/10-icon.svg');
      background-repeat: repeat;
      background-position: center bottom;
      background-size: 30px auto; /* adjust icon size */
      opacity: 0.08; /* subtle pattern */
      pointer-events: none;
      z-index: 0;
    }
    .social-pattern::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 70px;
      /* use a fluid height but cap it with max-height so the decorative SVG doesn't grow too large */
      height: 600px;
      max-height: 500px; /* cap the pseudo-element's height */
      background-image: url('https://www.utrgv.edu/10/_files/images/10-icon.svg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain; /* cover whole pseudo-element */
      opacity: 0.15; /* subtle, adjust as needed */
      pointer-events: none;
      z-index: 0;
    }
  /* Ensure inner content sits above the decorative pattern */
  .social-pattern > .container { position:relative; z-index:1; }

  /* Card body typography: use Patua One and set text color for card content */
  .social-card .card-body { font-family: 'Patua One', cursive; color: #cb4900 !important; }
  .social-card .card-body .text-body { font-family: 'Patua One', cursive; color: #cb4900 !important; }

  /* Position carousel arrows outside the slide items on wide screens */
  #socialCarousel { position: relative; }
  #socialCarousel .carousel-control-prev,
  #socialCarousel .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center; 
    color: #fff;
    border-radius: 0.5rem;
    z-index: 3;
    border: 0;
    padding: 0;
  }
  /* Offset controls outside the carousel viewport */
  @media (min-width: 769px) {
    #socialCarousel .carousel-control-prev { left: -64px; }
    #socialCarousel .carousel-control-next { right: -64px; } 
  }
  /* Keep controls inside on smaller viewports to avoid overflow */
  @media (max-width: 768px) {
    #socialCarousel .carousel-control-prev { left: 8px; }
    #socialCarousel .carousel-control-next { right: 8px; }
    #socialCarousel .carousel-control-prev,
    #socialCarousel .carousel-control-next { width: 40px; height: 40px; } 
  }

  /* Dot indicators styling */
  #carouselDots button.dot {
    width: 25px;
    height: 25px;
    background: rgba(255,255,255,0.25);
    border: 0;
    border-radius: 50%;
    padding: 0;
    transition: transform .15s ease, background .15s ease, opacity .15s ease;
    opacity: 0.9;
    cursor: pointer;
  }
  #carouselDots button.dot.active {
    background: #fff;
    transform: scale(1.25);
    opacity: 1;
  }
  
    .pre-footer-btn a:hover {
        color: #212529 !important;
    } 
    .carousel{
        min-height: 230px;
    }