/* =========================================
   GO CYBERNETICS SPLIT SLIDER
   ========================================= */


/* =========================================
   MAIN SLIDER
   ========================================= */

.gc-main-body {
    flex: 1 1 auto;

    position: relative;

    /* background-image: url("../img/cybernetics.jpg"); */      /* cropped */
	/*background-image: url("../images/cybernetics.jpg"); */        /* full */

    background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("../images/cybernetics.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


.gc-slider {
    width: 100%;

    aspect-ratio: 1920 / 600;

    display: flex;

    position: relative;

    overflow: hidden;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    margin-top: 10px;
}


/* =========================================
   LEFT STATIC PART
   ========================================= */

.gc-slider-static {
    width: 50%;
    height: 100%;

    flex: 0 0 50%;

    background-image: url("../img/slider-static.png");

    /* background-size: 100% 100%; */
    background-size: contain;

    background-position: center center;

    background-repeat: no-repeat;
}


/* =========================================
   RIGHT DYNAMIC PART
   ========================================= */

.gc-slider-dynamic {
    width: 50%;
    height: 100%;

    flex: 0 0 50%;

    position: relative;

    overflow: hidden;
}


/* =========================================
   SLIDES
   ========================================= */

.gc-slide {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}


/* Active slide */

.gc-slide.active {
    opacity: 1;

    visibility: visible;
}


/* Slide image */

.gc-slide img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: fill;

    object-position: center center;
}


/* =========================================
   PREVIOUS / NEXT BUTTONS
   ========================================= */

.gc-slider-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 40px;         /* slider button size controller */
    height: 40px;        /* slider button size controller */

    border-radius: 50%;

    border: none;

    background: rgba(80, 110, 145, 0.45);

    color: #fff;

    font-size: 18px;

    line-height: 26px;

    cursor: pointer;

    z-index: 20;

    transition: all 0.3s ease;
}


.gc-slider-arrow:hover {
    background: rgba(80, 110, 145, 1);
}


/* Previous button */

.gc-slider-prev {
    left: 2px;
}


/* Next button */

.gc-slider-next {
    right: 2px;
}


/* =========================================
   VIEW ALL
   ========================================= */

   

.gc-view-all {
    position: absolute;

    bottom: 40px;

    left: 700px;
    right: 0;

    text-align: center;

    z-index: 20;
}


.gc-view-all a {
    display: inline-block;

    padding: 6px 22px;

    color: #fff;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-decoration: none;

    text-transform: uppercase;

    border: 1px solid #fff;
    border-radius: 999px;

    transition: background-color 0.25s ease, color 0.25s ease;
}


.gc-view-all a:hover {
    background-color: #fff;
    color: #111;

    text-decoration: none;
}

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

@media (max-width: 767px) {

    .gc-slider {
        display: block;
        aspect-ratio: auto;
    }

    .gc-slider-static {
        width: 100%;
        height: auto;
        aspect-ratio: 960 / 600;
    }

    .gc-slider-dynamic {
        width: 100%;
        height: auto;
        aspect-ratio: 960 / 600;
    }

    .gc-view-all {
        left: 0;
        top: 450px;
    }

}

@media (max-width: 991px) {

    .gc-view-all {
        left: 0;
    }

}