/* General Container Styles */
    .student-life {
        display: flex;
        flex-direction: row; /* Split horizontally */
        width: 90%; /* Reduced width */
        height: 80vh; /* Increased height */
        margin: 0 auto; /* Center the container */
    }

    /* Left Side: Image Placement */
    .left-half {
        flex: 1; /* Takes up half the width */
        background-color: #10355c; /* Placeholder background */
        padding: 0px;
        display: flex;
        justify-content: center;
        align-items: left;
    }

    .student-life-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover; /* Ensure the image covers the area */
        transition: transform 0.3s ease; /* Smooth zoom effect */
    }
      

    .student-life-image:hover {
    transform: scale(1.05); /* Slightly zoom in on hover */
}

    /* Right Side: Text and Buttons */
    .right-half {
        flex: 1; /* Takes up the other half of the width */
        background-color: #10355c;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .right-half h4 {
        font-size: 1.5em; /* Adjusted for h4 */
        color: #57b5eb;
        margin-bottom: 20px;
    }

    .right-half h2 {
        font-size: 2em;
        color: white;
        margin-bottom: 20px;
    }

    .right-half p {
        font-size: 1.2em;
        color: white;
        margin-bottom: 20px;
    }

    /* "See More" Button */
    .see-btn {
        padding: 5px 10px; /* Smaller padding */
        border-radius: 15px; /* Smaller pill shape */
        background-color: transparent;
        color: white;
        border: none;
        font-size: 0.9em; /* Smaller font size */
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 10px; /* Space after paragraph */
        animation: pulse 2s infinite;
    }

    .see-btn:hover {
        background-color: #4698c7; /* Darker shade on hover */
    }

    /* Modal Styles */
    .modal {
        display: none; /* Hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
        justify-content: center;
        align-items: center;
        z-index: 1000; /* Ensure it's on top */
    }

    .modal-content {
        background-color: #ffbe82;
background-image: url("https://www.transparenttextures.com/patterns/brushed-alum-dark.png"); /* Subtle texture */
        border-radius: 10px;
        max-width: 600px;
        width: 90%;
        overflow: hidden; /* Ensure rounded corners for child elements */
    }

    .modal-header {
        background-color: #10355c;
        padding: 15px;
        text-align: center;
    }

    .modal-header h3 {
        color: white;
        font-size: 1.5em;
        margin: 0;
    }

    .modal-body {
        padding: 20px;
        text-align: center;
    }

    .modal-image {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        margin-bottom: 15px;
    }

    .modal-body p {
        font-size: 1.1em;
        color: #333;
        line-height: 1.6;
    }

    .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 1.5em;
        cursor: pointer;
        color: white;
    }

    .close-btn:hover {
        color: #57b5eb;
    }

    /* Faux Line Styles */
    .faux-line {
        width: 50px; /* Width of the line */
        height: 2px; /* Thickness of the line */
        background-color: #57b5eb; /* Color of the line */
        margin: 15px 0; /* Spacing above and below the line */
    }
   
    /* Media Query for Mobile Devices */
    @media (max-width: 768px) {
        .student-life {
            flex-direction: column; /* Stack vertically on mobile */
            height: auto; /* Allow height to adjust based on content */
            width: 98%; /* Full width on mobile */
        }

        .left-half,
        .right-half {
            flex: 1; /* Equal height for both sections */
            width: 100%; /* Full width for both halves */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .left-half {
            height: auto; /* Allow height to adjust based on image */
            padding: 0px; /* Add padding for spacing */
        }

        .student-life-image {
            max-width: 100%;
            height: auto; /* Ensure image scales properly */
            border-radius: 0px; /* Optional: Add rounded corners */
        }

        .right-half {
            padding: 15px; /* Reduce padding for mobile */
        }

        .right-half h4 {
            font-size: 1.2em; /* Smaller font size for mobile */
            text-align: center; /* Center-align text */
        }

        .right-half h2 {
            font-size: 1.5em; /* Smaller font size for mobile */
            text-align: center; /* Center-align text */
        }

        .right-half p {
            font-size: 1em; /* Smaller font size for mobile */
            text-align: center; /* Center-align text */
        }

        .see-btn {
            padding: 5px 10px; /* Smaller buttons for mobile */
            font-size: 0.8em; /* Smaller font size for mobile */
            margin-top: 10px; /* Space after paragraph */
        }

        .link-options {
            gap: 10px; /* Reduce gap between buttons for mobile */
        }

        .btn.v16 {
            display:block;
            padding: 8px 16px; /* Slightly smaller buttons for mobile */
            font-size: 0.9em; /* Smaller font size for mobile */
            width: 100%; /* Smaller minimum width for mobile */
        }

        .faux-line {
            margin: 10px auto; /* Center the faux-line on mobile */
        }
    }

    /*-------------------------------
    New Container: .student-life-2 
    -------------------------------*/
    .student-life-2 {
        display: flex;
        flex-direction: row; /* Split horizontally */
        width: 90%; /* Reduced width */
        height: 80vh; /* Increased height */
        margin: 20px auto; /* Add margin to separate from other containers */
    }

    /* Left Side: Text and Buttons */
    .student-life-2 .left-half {
        flex: 1; /* Takes up half the width */
        background-image: url('https://www.transparenttextures.com/patterns/always-grey.png');
        background-color: #10355c;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start; /* Left-aligned text */
    }

    .student-life-2 .left-half h4 {
        font-size: 1.5em; /* Adjusted for h4 */
        color: #57b5eb;
        margin-bottom: 20px;
    }

    .student-life-2 .left-half h2 {
        font-size: 2em;
        color: white;
        margin-bottom: 20px;
    }

    .student-life-2 .left-half p {
        font-size: 1.2em;
        color: white;
        margin-bottom: 20px;
        text-align: left; /* Left-aligned paragraph */
    }

    .student-life-2 .faux-line {
        width: 50px; /* Width of the line */
        height: 2px; /* Thickness of the line */
        background-color: #57b5eb; /* Color of the line */
        margin: 15px 0; /* Spacing above and below the line */
    }

    .student-life-2 .see-btn {
        padding: 5px 10px; /* Smaller padding */
        border-radius: 15px; /* Smaller pill shape */
        background-color: transparent;
        color: white;
        border: none;
        font-size: 0.9em; /* Smaller font size */
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 10px; /* Space after paragraph */
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

    .student-life-2 .see-btn {
    animation: pulse 2s infinite; /* Continuous pulse animation */
    }
        
    .student-life-2 .see-btn:hover { 
        background-color: #4698c7; /* Darker shade on hover */
    }

    .student-life-2 .link-options {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%; /* Ensure buttons fill the container width */
    }

   /* .student-life-2 .btn.v17 {
        display: block; /* Make buttons block-level to fill width */
        /*width: 100%; /* Fill the entire width of the container */
        /*padding: 10px 20px; /* Maintain padding */
        /*border-radius: 25px; /* Pill shape */
        /*background-color: white;
        color: #10355c;
        text-align: center;
        text-decoration: none;
        font-size: 1em;
        transition: background-color 0.3s ease;
    }

    .student-life-2 .btn.v17:hover {
        background-color: #f0f0f0;
    }*/

    /* Right Side: Image Placement */
    .student-life-2 .right-half {
        flex: 1; /* Takes up half the width */
        background-color: #f0f0f0; /* Placeholder background */
        padding:0px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden; /* Ensure image fills the container */
    }

    .student-life-2 .student-life-image {
        width: 100%; /* Fill the container width */
        height: 100%; /* Fill the container height */
        object-fit: cover; /* Ensure the image covers the area */
        transition: transform 0.3s ease; /* Smooth zoom effect */
}

.student-life-2 .student-life-image:hover {
    transform: scale(1.05); /* Slightly zoom in on hover */
}

    /* Media Query for Mobile Devices */
    @media (max-width: 768px) {
        .student-life-2 {
            flex-direction: column; /* Stack vertically on mobile */
            height: auto; /* Allow height to adjust based on content */
            width: 100%; /* Full width on mobile */
        }

        .student-life-2 .left-half,
        .student-life-2 .right-half {
            flex: 1; /* Equal height for both sections */
            width: 100%; /* Full width for both halves */
        }

        .student-life-2 .right-half {
            height: 300px; /* Fixed height for image on mobile */
        }

        .student-life-2 .left-half {
            padding: 15px; /* Reduce padding for mobile */
        }

        .student-life-2 .left-half h4 {
            font-size: 1.2em; /* Smaller font size for mobile */
        }

        .student-life-2 .left-half h2 {
            font-size: 1.5em; /* Smaller font size for mobile */
        }

        .student-life-2 .left-half p {
            font-size: 1em; /* Smaller font size for mobile */
        }

        .student-life-2 .see-btn {
            padding: 5px 10px; /* Smaller buttons for mobile */
            font-size: 0.8em; /* Smaller font size for mobile */
        }

        .student-life-2 .btn.v17 {
            padding: 8px 16px; /* Slightly smaller buttons for mobile */
            font-size: 0.9em; /* Smaller font size for mobile */
        }
    }

        /*------------------------
        Large image Block Card url('assets/img/breadcrumb-6.jpg');
        --------------------------*/

/* Large image block */


/* Large image block */
.image-block {
  height: 90vh;
  width: 71.4%;
  background-image: url('../img/studentlife/athletics.jpg'); /* Replace with your image */
  /*background-attachment: fixed;  Parallax effect */  
  background-size: cover;
  background-position: center;
  position: relative;
}

 .image-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Black with 30% opacity */
  pointer-events: none; /* Ensures clicks pass through to the image */
}

/* Card block */
.card-block {
  height: 70vh; /* Updated height */
  width: 40%; /* Updated width */
  /*border-radius: 15px;  Rounded corners */
  background-color: red;
  color: white;
  position: absolute;
  top: 50%;
  left: 113%; /* Updated left position */
  transform: translate(-50%, -50%);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center vertically */
  align-items: center; /* Center horizontally */
  text-align: center; /* Center text */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Soft shadow */
}
 .card-block {
  background-image: url('https://www.transparenttextures.com/patterns/always-grey.png'); /* Subtle texture */
  background-color: red; /* Fallback color */
}

/* Card block content */
.card-block h5 {
  margin: 0;
  font-size: 1.5em;
}

.card-block h3 {
  margin: 10px 0;
  font-size: 2.5em;
}

.card-block p {
  margin: 10px 0;
  font-size: 1.2em;
}

/* Button styling */
.btn-v18 {
  background-color: transparent;
  border: 2.5px solid white;
  color: white;
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 25px; /* Added border-radius */
  animation: pulse 2s infinite;  
}

.btn-v18:hover {
  background-color: white;
  color: red;
  transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
  .image-block {
    width: 100%; /* Full width on mobile */
    height: 70vh; /* Adjusted height for mobile */
    margin-bottom: 60%; /* Prevent overlap with content below */ 
  }

  .card-block {
    width: 80%; /* Adjusted width for mobile */
    left: 50%; /* Centered horizontally */
    top: auto; /* Reset top positioning */
    bottom: -50%; /* Overlap the image block */
    transform: translateX(-50%); /* Center horizontally */
  }
    .card-block h5 {
  font-size: clamp(1em, 3vw, 1.3em); /* Responsive font size */
  }
  .card-block h3 {
  font-size: clamp(1.7em, 5vw, 2.2em); /* Responsive font size */
  }
  .card-block p {
  font-size: clamp(1em, 2.5vw, 1.2em); /* Responsive font size */
}
    
}