/* ==========================================
   BEFORE & AFTER IMAGE COMPARISON SLIDER
========================================== */

.compare-section{
    width:100%;
    padding:80px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.compare-section h2{
    font-size:42px;
    font-weight:700;
    color:#1e3a8a;
    margin-bottom:40px;
}

.compare-container{

    position:relative;

    width:100%;
    max-width:900px;
    height:500px;

    overflow:hidden;

    border-radius:20px;

    box-shadow:
    0 20px 40px rgba(0,0,0,.15);

    cursor:ew-resize;

    user-select:none;

    background:#ddd;
}

/* ===========================
   IMAGES
=========================== */

.compare-container img{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    pointer-events:none;

}

.before-wrapper{

    position:absolute;

    top:0;
    left:0;

    width:50%;
    height:100%;

    overflow:hidden;

    z-index:2;
}

/* ===========================
   DRAG LINE
=========================== */

.slider-line{

    position:absolute;

    top:0;
    left:50%;

    width:4px;
    height:100%;

    background:#ffffff;

    transform:translateX(-50%);

    z-index:10;
}

/* ===========================
   DRAG BUTTON
=========================== */

.slider-button{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:60px;
    height:60px;

    border-radius:50%;

    background:#ffffff;

    border:4px solid #2563eb;

    display:flex;

    justify-content:center;
    align-items:center;

    box-shadow:
    0 10px 25px rgba(0,0,0,.2);

}

.slider-button i{

    color:#2563eb;

    font-size:24px;

}

/* ===========================
   LABELS
=========================== */

.label{

    position:absolute;

    top:20px;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(0,0,0,.55);

    color:#fff;

    font-size:14px;

    font-weight:600;

    z-index:20;

}

.before-label{

    left:20px;

}

.after-label{

    right:20px;

}

/* ===========================
   HOVER EFFECT
=========================== */

.compare-container:hover{

    box-shadow:
    0 30px 60px rgba(37,99,235,.20);

}

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

@media(max-width:768px){

.compare-container{

    height:320px;

}

.compare-section h2{

    font-size:28px;

}

.slider-button{

    width:48px;
    height:48px;

}

.slider-button i{

    font-size:18px;

}

.label{

    font-size:12px;

    padding:6px 14px;

}

}
.campus-title{
    position:relative;
    display:inline-block;
    font-size:42px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;

    background:linear-gradient(
        90deg,
        #1e3a8a,
        #2563eb,
        #60a5fa,
        #2563eb,
        #1e3a8a
    );

    background-size:300% 100%;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;

    animation:textShine 4s linear infinite, floatText 3s ease-in-out infinite;
}

.campus-title::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-12px;
    transform:translateX(-50%);
    width:120px;
    height:4px;
    border-radius:20px;
    background:linear-gradient(90deg, transparent, #2563eb, #60a5fa, #2563eb, transparent);
    background-size:250% 100%;
    animation:underlineMove 2s linear infinite;
    box-shadow:0 0 10px rgba(37,99,235,.35);
}

@keyframes textShine{
    0%{ background-position:0% 50%; }
    100%{ background-position:300% 50%; }
}

@keyframes underlineMove{
    0%{ background-position:-200% 50%; }
    100%{ background-position:200% 50%; }
}

@keyframes floatText{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-4px); }
}