/* Extracted from keystoneapp/templates/projects/project_detail.html */
.gallery-thumb {

    cursor: pointer;

    opacity: 0.7;

    transition: all 0.3s ease;

    border: 3px solid transparent;

}

.gallery-thumb:hover,

.gallery-thumb.active {

    opacity: 1;

    border-color: #0d6efd;

    transform: scale(1.05);

}

.main-image-container {

    position: relative;

    overflow: hidden;

    border-radius: 12px 12px 0 0;

}

.main-image-wrapper {

    overflow: hidden;

    position: relative;

    max-height: 400px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f8f9fa;

}

.main-image {

    transition: transform 0.2s ease;

    transform-origin: center center;

    cursor: grab;

    object-fit: contain;

    object-position: center;

    max-height: 400px;

    width: auto;

    max-width: 100%;

}

.main-image:active {

    cursor: grabbing;

}



/* Animation states */

.main-image.fade-out {

    opacity: 0;

}

.main-image.fade-in {

    opacity: 1;

}



/* Zoom controls bar */

.zoom-controls {

    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

    padding: 12px 20px;

    border-radius: 0 0 12px 12px;

    display: flex;

    align-items: center;

    gap: 15px;

}

.zoom-controls i {

    color: #fff;

    font-size: 14px;

}

.zoom-slider {

    flex: 1;

    -webkit-appearance: none;

    appearance: none;

    height: 6px;

    background: rgba(255,255,255,0.2);

    border-radius: 3px;

    outline: none;

    cursor: pointer;

}

.zoom-slider::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 18px;

    height: 18px;

    background: #0d6efd;

    border-radius: 50%;

    cursor: pointer;

    box-shadow: 0 2px 6px rgba(0,0,0,0.3);

    transition: transform 0.2s;

}

.zoom-slider::-webkit-slider-thumb:hover {

    transform: scale(1.2);

}

.zoom-slider::-moz-range-thumb {

    width: 18px;

    height: 18px;

    background: #0d6efd;

    border-radius: 50%;

    cursor: pointer;

    border: none;

    box-shadow: 0 2px 6px rgba(0,0,0,0.3);

}

.zoom-percentage {

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    min-width: 50px;

    text-align: center;

}

.zoom-btn {

    background: rgba(255,255,255,0.1);

    border: none;

    color: #fff;

    width: 30px;

    height: 30px;

    border-radius: 6px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background 0.2s;

}

.zoom-btn:hover {

    background: rgba(255,255,255,0.2);

}



/* Related project cards hover effect */

.project-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;

}

.project-card:hover img {

    transform: scale(1.1);

}

/* Generated classes for former inline style attributes */
/* Inline styles extracted from keystoneapp/templates/projects/project_detail.html */
.ktl-inline-e63c36fb { z-index: 10; }
.ktl-inline-f3522f41 { height: 70px; width: 100%; object-fit: cover; }
.ktl-inline-c6ff6174 { transition: all 0.3s ease; }
.ktl-inline-e3faf32f { height: 220px; }
.ktl-inline-1c9f1385 { object-fit: cover; transition: transform 0.5s ease; }
.ktl-inline-9714ed66 { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%); }
.ktl-inline-75b6c60f { background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); }