.grid_container
{
    z-index:             20;
    display:             flex;
    overflow-x:          visible;
    overflow-y:          scroll;
    overscroll-behavior: auto;
    scroll-snap-type:    y proximity;
    scrollbar-width:     none;
    flex-direction:      row;
    align-items:         flex-start;
    justify-content:     flex-end;
    grid-row-start:      1;
    grid-row-end:        8;
    grid-column-start:   1;
    grid-column-end:     5;
    gap:                 var(--padding_2);
    width:               100%;
    padding-bottom:      1px; /* Fixes stuck scroll*/
    background-color:    transparent;

}

.grid_container-reversed
{
    z-index:             20;
    display:             flex;
    overflow-x:          visible;
    overflow-y:          scroll;
    overscroll-behavior: auto;
    scroll-snap-type:    y proximity;
    scrollbar-width:     none;
    flex-direction:      row;
    align-items:         flex-start;
    justify-content:     flex-end;
    grid-row-start:      1;
    grid-row-end:        8;
    grid-column-start:   4;
    grid-column-end:     8;
    gap:                 var(--padding_2);
    width:               100%;
    padding-bottom:      1px; /* Fixes stuck scroll*/
    background-color:    transparent;

}

.services_about
{
    position:         relative;
    top:              0;
    left:             0;
    z-index:          1;
    width:            100%;
    background-color: transparent;
    font-size:        5rem;
    letter-spacing:   1rem;
}

.services_name
{
    position:         relative;
    top:              0;
    left:             0;
    z-index:          1;
    width:            100%;
    background-color: transparent;
    font-size:        5rem;
    letter-spacing:   1rem;
    transform:        translateY(50%);
}

.grid_item
{
    position:        relative;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    overflow:        clip;
    /*scroll-snap-align: center;*/
    min-width:       0;
    height:          600px;
    border-radius:   16px;

}

.grid_item_backdrop
{
    position:            absolute;
    top:                 0;
    left:                0;
    z-index:             2;
    width:               100%;
    height:              100%;
    background-color:    black;
    opacity:             0;
    transition-property: opacity;
    transition-duration: 0.3s;
}

.grid_item_title
{
    display:             flex;
    flex-direction:      column;
    padding:             8px;
    width:               fit-content;
    border-radius:       16px;
    background-color:    rgba(0, 0, 0, 0.2);

    backdrop-filter:     blur(5px);
    color:               var(--color-palette-white-smoke);
    letter-spacing:      0.3rem;

    transition-property: opacity, letter-spacing;
    transition-duration: 0.3s;

}

.grid_item_description
{
    padding:             8px;
    z-index:             2;
    display:             flex;
    flex-direction:      column;
    justify-content:     left;
    align-items:         flex-start;
    border-radius:       16px;
    font-weight:         400;
    font-size:           1.4rem;
    letter-spacing:      0;
    background-color:    rgba(0, 0, 0, 0.2);

    backdrop-filter:     blur(5px);
    color:               var(--color-palette-white-smoke);
    text-wrap:           balance;
    transition-property: opacity, letter-spacing;
    transition-duration: 0.3s;

}

.grid_item-top-section
{
    padding:        8px;
    z-index:        2;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.grid_item-technologies
{
    overflow:        scroll;
    display:         flex;
    flex-direction:  row;
    gap:             2rem;
    justify-content: flex-start;
    align-items:     center;

    width:           100%;
}

.grid_item-technology
{
    padding:          8px;
    background-color: rgba(0, 0, 0, 0.2);

    backdrop-filter:  blur(7px);
    color:            var(--color-palette-white-smoke);
    border-radius:    40px;

    border-color:     rgba(255, 255, 255, 0.3);
    border-width:     1px;
    border-style:     solid;
}

.grid_wrapper
{
    display:         flex;
    overflow:        visible;
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: flex-start;
    gap:             10px;
    width:           100%;
}

.service_grid
{

    display:                    grid;
    overflow:                   clip;
    grid-template-rows: repeat(9, 1fr);
    grid-template-columns: repeat(1, 1fr);
    width:                      100%;
    /*height:                     200vh;*/
    transition-property:        all;
    transition-duration:        0.3s;
    transition-timing-function: linear;
    grid-gap:                   20px;
}

.service-title
{
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    justify-content: center;
    width:           100%;
}

.service-container
{
    padding:               var(--padding_1);
    gap:                   var(--padding_3);
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);

    flex-direction:        row;
    width:                 100%;
    /*height:                100%;*/
    overflow:              visible;
}

.service-description
{
    position:          sticky;
    top:               0;
    overflow:          visible;
    display:           flex;
    flex-direction:    column;
    align-items:       center;
    justify-content:   space-between;
    grid-row-start:    1;
    grid-row-end:      7;
    grid-column-start: 5;
    grid-column-end:   8;
    max-height:        100vh;
}

.service-description-reversed
{
    position:          sticky;
    top:               0;
    overflow:          visible;
    display:           flex;
    flex-direction:    column;
    align-items:       center;
    justify-content:   space-between;
    grid-row-start:    1;
    grid-row-end:      7;
    grid-column-start: 1;
    grid-column-end:   4;
    max-height:        100vh;
    padding: var(--padding_2);

}

.service-description-text
{
    width:      100%;
    text-align: left;
    text-wrap:  balance;
    transition: text-shadow 0.3s linear;
}

/*.service-description-text:hover*/
/*{*/
/*    text-shadow: 0px 0px 4px white;*/
/*}*/

.explore-options-container
{
    z-index:           21;
    display:           flex;
    flex-direction:    row;
    align-items:       center;
    justify-content:   center;
    grid-row-start:    7;
    grid-row-end:      8;
    grid-column-start: 5;
    grid-column-end:   8;
    width:             100%;
    padding: var(--padding_3);
}

.explore-options-container-floating
{
    display:           none;
    z-index:           21;
    flex-direction:    row;
    align-items:       center;
    justify-content:   center;
    grid-row-start:    7;
    grid-row-end:      8;
    grid-column-start: 5;
    grid-column-end:   8;
    width:             100%;
    /*height:            10rem;*/
}

.explore-options-wrapper
{
    position:        relative;
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
    height:          fit-content;
}

.explore-options-wrapper:hover .selector
{
    opacity:   100%;
    transform: translate3D(-100%, -50%, 0);
}

.explore-options
{
    border-radius:    16px;
    padding:          1rem;
    text-align:       center;

    transition:       box-shadow 300ms linear;
    background-color: var(--color-palette-white-smoke);
    color:            var(--color-palette-licorice);
    box-shadow:       0 0px 40px 1px rgba(33, 8, 12, 0.7);
}

.explore-options-wrapper a
{
    color:           var(--color-palette-licorice);
    text-decoration: none;

}

.explore-options-wrapper a:visited
{
    color:           var(--color-palette-licorice);
    text-decoration: none;
}

.explore-options:hover
{
    box-shadow: inset 0 0px 40px 4px rgba(33, 8, 12, 0.1), 0 0px 40px 1px rgba(33, 8, 12, 0.7);

}

.services-border
{
    z-index:           1;
    grid-row-start:    1;
    grid-row-end:      7;

    grid-column-start: 1;

    grid-column-end:   4;
    width:             100%;
    height:            100%;
    border-radius:     16px;
    box-shadow:        0 0px 40px 1px rgba(33, 8, 12, 0.5);
    backdrop-filter:   blur(10px);

}

.service-feature
{
    border-style:  solid;
    border-color:  rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    border-width:  1px;
    min-height:    75px;
    transition:    border-color 300ms linear, background-color 300ms linear;
}

.service-feature:hover
{
    background-color: rgba(255, 255, 255, 0.1);
    border-color:     rgba(255, 255, 255, 0.9);
}

#application
{
    grid-row-start:    1;
    grid-row-end:      4;
    grid-column-start: 1;
    grid-column-end:   1;

}

#application video
{
    object-fit: cover;
}

.grid_container:has(#application:hover)
{

    #simulation .grid_item_backdrop,
    #robotics .grid_item_backdrop,
    #electrical .grid_item_backdrop,
    #mechanical .grid_item_backdrop,
    #control .grid_item_backdrop,
    #modelling .grid_item_backdrop,
    #uiux .grid_item_backdrop,
    #branding .grid_item_backdrop
    {
        opacity: var(--backdrop-opacity)
    }
}

#simulation
{
    grid-row-start:    7;
    grid-row-end:      10;
    grid-column-start: 1;
    grid-column-end:   1;
}

.grid_container:has(#simulation:hover)
{
    #application .grid_item_backdrop,
    #robotics .grid_item_backdrop,
    #electrical .grid_item_backdrop,
    #mechanical .grid_item_backdrop,
    #control .grid_item_backdrop,
    #modelling .grid_item_backdrop,
    #uiux .grid_item_backdrop,
    #branding .grid_item_backdrop
    {
        opacity: var(--backdrop-opacity)
    }
}

#robotics
{
    grid-row-start:    4;
    grid-row-end:      7;
    grid-column-start: 1;
    grid-column-end:   1;
}

#robotics img
{
    object-fit: contain;
}

.grid_container:has(#robotics:hover)
{

    #application .grid_item_backdrop,
    #simulation .grid_item_backdrop,
    #electrical .grid_item_backdrop,
    #mechanical .grid_item_backdrop,
    #control .grid_item_backdrop,
    #modelling .grid_item_backdrop,
    #uiux .grid_item_backdrop,
    #branding .grid_item_backdrop
    {
        opacity: var(--backdrop-opacity)
    }
}

#electrical
{
    grid-row-start:    4;
    grid-row-end:      7;
    grid-column-start: 1;
    grid-column-end:   1;

}

.grid_container:has(#electrical:hover)
{
    #application .grid_item_backdrop,
    #simulation .grid_item_backdrop,
    #robotics .grid_item_backdrop,
    #mechanical .grid_item_backdrop,
    #control .grid_item_backdrop,
    #modelling .grid_item_backdrop,
    #uiux .grid_item_backdrop,
    #branding .grid_item_backdrop
    {
        opacity: var(--backdrop-opacity)
    }
}

#mechanical
{
    grid-row-start:    1;
    grid-row-end:      4;
    grid-column-start: 1;
    grid-column-end:   1;

}

.grid_container:has(#mechanical:hover)
{
    #application .grid_item_backdrop,
    #simulation .grid_item_backdrop,
    #robotics .grid_item_backdrop,
    #electrical .grid_item_backdrop,
    #control .grid_item_backdrop,
    #modelling .grid_item_backdrop,
    #uiux .grid_item_backdrop,
    #branding .grid_item_backdrop
    {
        opacity: var(--backdrop-opacity)
    }
}

#control
{
    grid-row-start:    7;
    grid-row-end:      11;
    grid-column-start: 1;
    grid-column-end:   1;
}

.grid_container:has(#control:hover)
{

    #application .grid_item_backdrop,
    #simulation .grid_item_backdrop,
    #robotics .grid_item_backdrop,
    #electrical .grid_item_backdrop,
    #mechanical .grid_item_backdrop,
    #modelling .grid_item_backdrop,
    #uiux .grid_item_backdrop,
    #branding .grid_item_backdrop
    {
        opacity: var(--backdrop-opacity)
    }
}

#modelling
{
    grid-row-start:    1;
    grid-row-end:      4;
    grid-column-start: 1;
    grid-column-end:   1;
    width:             100%;
    height:            100%;
}

.grid_container:has(#modelling:hover)
{

    #application .grid_item_backdrop,
    #simulation .grid_item_backdrop,
    #robotics .grid_item_backdrop,
    #electrical .grid_item_backdrop,
    #mechanical .grid_item_backdrop,
    #control .grid_item_backdrop,
    #uiux .grid_item_backdrop,
    #branding .grid_item_backdrop
    {
        opacity: var(--backdrop-opacity)
    }

}

#uiux
{
    grid-row-start:    4;
    grid-row-end:      7;
    grid-column-start: 1;
    grid-column-end:   1;
    backdrop-filter:   blur(10px);
}

.grid_container:has(#uiux:hover)
{
    #application .grid_item_backdrop,
    #simulation .grid_item_backdrop,
    #robotics .grid_item_backdrop,
    #electrical .grid_item_backdrop,
    #mechanical .grid_item_backdrop,
    #control .grid_item_backdrop,
    #modelling .grid_item_backdrop,
    #branding .grid_item_backdrop
    {
        opacity: var(--backdrop-opacity)
    }
}

#branding
{
    grid-row-start:    7;
    grid-row-end:      10;
    grid-column-start: 1;
    grid-column-end:   1;
}

.grid_container:has(#branding:hover)
{
    #application .grid_item_backdrop,
    #simulation .grid_item_backdrop,
    #robotics .grid_item_backdrop,
    #electrical .grid_item_backdrop,
    #mechanical .grid_item_backdrop,
    #control .grid_item_backdrop,
    #modelling .grid_item_backdrop,
    #uiux .grid_item_backdrop
    {
        opacity: var(--backdrop-opacity)
    }
}

.grid_item video
{
    position:                   absolute;
    top:                        50%;
    left:                       50%;
    transform:                  translate3d(-50%, -50%, 0) scale(1);
    transition-property:        transform;
    transition-duration:        0.3s;
    transition-timing-function: linear;
    width:                      100%;
    height:                     100%;
    object-fit:                 cover;

}

.grid_item img
{
    position:                   absolute;
    top:                        50%;
    left:                       50%;
    transform:                  translate3d(-50%, -50%, 0) scale(1);
    transition-property:        transform;
    transition-duration:        0.3s;
    transition-timing-function: linear;
    backdrop-filter:            blur(5px);
    width:                      100%;
    height:                     100%;
    object-fit:                 cover;
    z-index:                    1;
}

.grid_item:hover img
{
    transform: translate3d(-50%, -50%, 0) scale(1.1);
}

.grid_item:hover video
{
    transform: translate3d(-50%, -50%, 0) scale(1.1);
}

@media screen and (width < 1280px)
{
    .grid_container
    {
        grid-row-start:    2;
        grid-row-end:      3;
        grid-column-start: 1;
        grid-column-end:   1;
    }

    .grid_container-reversed
    {
        grid-row-start:    2;
        grid-row-end:      3;
        grid-column-start: 1;
        grid-column-end:   1;
    }

    .grid_wrapper
    {
        width: 100%;
    }

    .service-container
    {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 0.3fr 1fr 0.1fr;
        grid-auto-flow:        row; /* lay items out in columns */

    }

    .service-description
    {
        position:          relative;
        grid-row-start:    1;
        grid-row-end:      2;
        grid-column-start: 1;
        grid-column-end:   1;
    }

    .service-description-reversed
    {
        position:          relative;
        grid-row-start:    1;
        grid-row-end:      2;
        grid-column-start: 1;
        grid-column-end:   1;
    }

    .explore-options-container
    {
        display:    none;
        width:      100%;
        box-shadow: 0 0px 40px 1px rgba(33, 8, 12, 0.7);
    }

    .explore-options-container-floating
    {
        display:           flex;
        grid-row-start:    3;
        grid-row-end:      4;
        grid-column-start: 1;
        grid-column-end:   1;
    }

    #enterprise-option img
    {
        object-fit: contain;
    }

    .window
    {
        width:  500vw;
        height: 500vh;

    }
}