/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 12 2026 | 01:29:31 */
* {
    box-sizing: border-box;
}

body {
    overscroll-behavior: none;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ==================================== */
/* HERO SECTION                         */
/* ==================================== */
.hero-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-text-overlay {
    position: absolute;
    top: 20%;
    left: 5%;
    z-index: 10;
    color: white;
    text-align: left;
    text-shadow: 0 2px 15px rgba(0,0,0,0.7);
    width: 95%;
    max-width: 600px;
    line-height: 1.3;
/* 	font-family:"Konkhmer Sleokchher", Sans-serif; */
	
	
}
.hero-text-overlay h1{
	font-size:3em;
	margin-bottom: 5%;
	font-family:"Konkhmer Sleokchher", Sans-serif;
}

.hero-text-overlay p{
	font-size: 1.1em;
width: 116%;
/* 	font-style:italic; */
}
.split-image-background {
    height: 100%;
    display: flex;
    z-index: 1;
}

.image-strip {
    flex: 1;
    height: 100%;
    background-image: url('https://reachupmag.org/wp-content/uploads/2021/11/homepagebanner-tweak.jpg?id=3336');
    background-size: 600% 100%; /* Scale image height to 100% */
    background-repeat: no-repeat;
}

/* Dynamically position each strip's background image */
.image-strip:nth-child(1) { background-position: calc(100% / 5 * 0) center; }
.image-strip:nth-child(2) { background-position: calc(100% / 5 * 1) center; }
.image-strip:nth-child(3) { background-position: calc(100% / 5 * 2) center; }
.image-strip:nth-child(4) { background-position: calc(100% / 5 * 3) center; }
.image-strip:nth-child(5) { background-position: calc(100% / 5 * 4) center; }
.image-strip:nth-child(6) { background-position: calc(100% / 5 * 5) center; }

.button-container {
    margin-top: 5rem;
    display: flex;
    justify-content: flex-start;
    gap: 15px;
}


/* 1. Base Button Styles */
.liquid-button {
  position: relative;
  padding: 10px 20px;
  border: none;
 background-color: #ff5722 !important;
  cursor: pointer;
  text-transform: uppercase;
	    font-weight: bold;
  font-size: 15px;
  color: #ffffff;
  box-shadow: hsla(210, 40%, 52%, .4) 2px 2px 22px;
  border-radius: 4px;
  z-index: 0;
  overflow: hidden; /* CRITICAL: Clips the slant to the individual button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 10px;
}

.first{
	background-color: #ffd255;
}

 .second{
	background-color:  #8c87c1 !important;
}

 .third{
	background-color: #88c543 !important;
}

/* 2. Text visibility */
.button-text {
  position: relative;
  z-index: 5;
  pointer-events: none;
}

/* 3. The Hitboxes (Sized 100% to overlap per original sample) */
.hitbox-left, .hitbox-right {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.hitbox-right {
  left: 66%; /* Only triggers on the right side of the specific button */
}

.hitbox-left {
  right: 66%; /* Only triggers on the left side of the specific button */
}

/* 4. The Independent Liquid Overlay */
.liquid-overlay {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: #ffd255;
  z-index: 1;
  pointer-events: none;
  
  /* Initial State: Hidden above */
  transform: translateY(-100%) rotate(0deg);
  transition: transform 0.4s ease-out;
  transform-origin: center center;
}



/* --- HOVER LOGIC (Flipped & Independent) --- */

/* Slide down to halfway when ANY part of the button is hovered */
.liquid-button:hover .liquid-overlay {
  transform: translateY(-75%) rotate(0deg);
	  background-color: #10b1ce;
}

/* Flip Slant LEFT: When mouse hits the left hitbox */
.hitbox-left:hover ~ .liquid-overlay {
  transform: translateY(-85%) rotate(-20deg) scale(1.0) !important;
	  background-color: #10b1ce;
/* 	 #141218;*/
}

/* Flip Slant RIGHT: When mouse hits the right hitbox */
.hitbox-right:hover ~ .liquid-overlay {
  transform: translateY(-85%) rotate(20deg) scale(1.0) !important;
	  background-color: #10b1ce;
}


/* ==================================== */
/* MEDIA QUERIES                        */
/* ==================================== */

/* For screens up to 768px (e.g., tablets) */
@media (max-width: 768px) {
    .hero-text-overlay {
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        max-width: 90%;
        padding: 1rem;
    }

    .hero-text-overlay h1 {
        font-size: 2.5rem;
    }

    .hero-text-overlay p {
        font-size: 1rem;
    }
    
    .button-container {
        justify-content: center;
        flex-wrap: wrap;
    }

    .button {
        padding: 10px 20px;
    }
}

/* For screens up to 480px (e.g., mobile devices) */
@media (max-width: 480px) {
    .hero-text-overlay {
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        max-width: 95%;
    }

    .hero-text-overlay h1 {
        font-size: 2rem;
    }

    .hero-text-overlay p {
        font-size: 0.9rem;
    }

    /* Change to 4 panels on mobile */
    .image-strip {
        /* This will be handled by JavaScript */
        background-size: 400% 100%; 
    }

    /* Adjust positioning for 4 panels */
    .image-strip:nth-child(4) { background-position: calc(100% / 3 * 0) center; }
    .image-strip:nth-child(5) { background-position: calc(100% / 3 * 1) center; }
    .image-strip:nth-child(6) { background-position: calc(100% / 3 * 2) center; }
    .image-strip:nth-child(1), 
    .image-strip:nth-child(2),
    .image-strip:nth-child(3) {
        display: none; /* Hide the extra panels */
    }

    .button-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .button {
        width: 100%;
        max-width: 250px;
        box-sizing: border-box;
    }
}