.sensor-name {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #176047;
}

.ocean-transition-strip {
    width: 100%;
    height: 10px;
    margin: 28px 0 10px;
    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #064b78 0%,      /* Deep ocean */
        #168aad 22%,     /* Ocean */
        #52a85a 42%,     /* Vegetation / land */
        #c7a66a 58%,     /* Land */
        #dceff7 75%,     /* Cryosphere */
        #ffffff 88%,     /* Ice / clouds */
        #a9d6e5 100%     /* Atmosphere */
    );

    box-shadow:
        0 2px 8px rgba(30, 90, 100, 0.18),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.ocean-image-grid {
    display: flex;
    justify-content: space-between;
    gap: 2%;
    width: 100%;
}

.ocean-image-card {
    width: 32%;
}

.ocean-image-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* Tablet */
@media (max-width: 991px) {
    .ocean-image-grid {
        flex-wrap: wrap;
    }

    .ocean-image-card {
        width: 48%;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .ocean-image-grid {
        display: block;
    }

    .ocean-image-card {
        width: 100%;
        margin-bottom: 18px;
    }
}

       .image-title {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #164b3a;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    text-align: center;
}

.image-subtitle {
    font-family: "Inter", sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #426b5a;
    line-height: 1.5;
    letter-spacing: 0.2px;
    text-align: center;
} 

        .comparison-container {
            width: 100%;
            max-width: 1200px;
            margin: auto;
	   

 	    
        }

        /* -----------------------------
           IMAGE COMPARISON
        ----------------------------- */

        .comparison-slider {
            position: relative;
            width: 100%;
            overflow: hidden;
            user-select: none;
        }

        .base-image {
            display: block;
            width: 100%;
            height: auto;
        }

        /* Top image */
        .image-after {
            position: absolute;
            inset: 0;

            clip-path: inset(0 50% 0 0);

            z-index: 2;
        }



        .image-after img {
            position: absolute;

            top: 0;
            left: 0;

            width: 100%;
            height: auto;

            display: block;
        }



        /* -----------------------------
           SLIDER LINE
        ----------------------------- */

        .slider-line {
            position: absolute;

            top: 0;
            bottom: 0;

            left: 50%;

            width: 3px;

            background: white;

            transform: translateX(-50%);

            z-index: 10;

            pointer-events: none;
        }

        /* -----------------------------
           SLIDER HANDLE
        ----------------------------- */

        .slider-handle {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 48px;
    height: 48px;

    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #323651;

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

    z-index: 20;

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

    cursor: ew-resize;

    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.slider-handle::before,
.slider-handle::after {
    content: "";
    position: absolute;

    width: 8px;
    height: 8px;

    border-top: 2px solid #323651;
    border-right: 2px solid #323651;
}

.slider-handle::before {
    transform: rotate(-135deg);
    left: 12px;
}

.slider-handle::after {
    transform: rotate(45deg);
    right: 12px;
}

        /* -----------------------------
           LABELS
        ----------------------------- */

        .label {
            position: absolute;

            top: 20px;

            padding: 8px 14px;

            background: rgba(0,0,0,0.65);

            color: white;

            font-size: 14px;
            font-weight: 600;

            border-radius: 4px;

            z-index: 15;
        }

        .label-before {
            left: 20px;
        }

        .label-after {
            right: 20px;
        }

        /* -----------------------------
           RANGE SLIDER
        ----------------------------- */

        .comparison-slider input[type="range"] {

            position: absolute;

            inset: 0;

            width: 100%;
            height: 100%;

            margin: 0;

            opacity: 0;

            cursor: ew-resize;

            z-index: 30;
        }


        /* -----------------------------
           IMAGE SELECTION CONTROLS
        ----------------------------- */

        .controls {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 25px;

            margin-bottom: 25px;

        }

        .control {

            background: white;

            padding: 18px;

            border-radius: 8px;

            box-shadow: 0 2px 8px rgba(0,0,0,0.08);

        }

        .control-title {

            font-size: 15px;

            font-weight: 800;

            margin-bottom: 12px;

            color: #2F5597;


        }

        .selectors {

            display: flex;

            gap: 10px;

        }

        select {

            flex: 1;

            padding: 10px;

            border: 1px solid #ccc;

            border-radius: 5px;

            font-size: 14px;

            background: white;

        }


        @media (max-width: 768px) {

            body {
                padding: 20px;
            }

            .controls {
                grid-template-columns: 1fr;
            }

            .slider-handle {
                width: 40px;
                height: 40px;
            }

        }