.services-container
{
    display:                grid;
    flex-direction:         row;
    justify-items:          center;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns:  repeat(6, 1fr);

    width:                  100%;
    height:                 100%;
    min-height:             0;
    padding:                50px;
    grid-gap:               50px;

}

.grid_container
{
    z-index:             20;
    display:             flex;
    overflow-x:          visible;
    overflow-y:          scroll;
    overscroll-behavior: auto;
    scroll-snap-type:    y mandatory;
    scrollbar-width:     none;
    flex-direction:      row;
    align-items:         flex-start;
    justify-content:     flex-end;
    grid-row-start:      1;
    grid-row-end:        7;
    grid-column-start:   1;
    grid-column-end:     7;
    gap:                 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;
    overflow:                   clip;
    scroll-snap-align:          center;
    min-width:                  0;
    min-height:                 0;
    border-radius:              16px;
    transition-property:        box-shadow;
    transition-duration:        0.3s;
    transition-timing-function: linear;

}

.grid_item:hover
{
    box-shadow: 0 0px 100px 1px rgba(33, 8, 12, 0.2);
}

.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
{
    position:            absolute;
    top:                 50%;
    left:                50%;
    z-index:             13;
    display:             flex;
    flex-direction:      column;
    align-items:         center;
    justify-content:     center;
    width:               100%;
    height:              100%;
    border-radius:       16px;
    background-color:    rgba(255, 255, 255, 0.3);
    box-shadow:          inset 0 5px 180px -80px rgba(224, 224, 224, 100), 0 0px 40px 10px rgba(33, 8, 12, 1);;
    backdrop-filter:     blur(3px);
    opacity:             0;
    color:               black;
    font-weight:         400;
    font-size:           2rem;
    text-align:          center;
    transform:           translate3d(-50%, -50%, 0);
    transition-property: opacity, letter-spacing;
    transition-duration: 0.3s;

}

.grid_item_description
{
    display:             flex;
    flex-direction:      column;

    border-radius:       16px;
    padding-top:         3rem;
    /*opacity:             0;*/
    color:               black;
    font-weight:         400;
    font-size:           1rem;
    letter-spacing:      0;
    text-align:          center;
    text-wrap:           balance;
    transition-property: opacity, letter-spacing;
    transition-duration: 0.3s;

}

.grid_item:hover .grid_item_title
{
    opacity:        100;
    letter-spacing: 1rem;
}

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

.grid_desktop
{

    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;
    align-items:       center;
    justify-content:   center;
    grid-row-start:    1;
    grid-row-end:      1;
    grid-column-start: 1;
    grid-column-end:   4;
    width:             100%;
}

.service-description
{
    z-index: 2;
    display:           flex;
    flex-direction:    column;
    align-items:       center;
    justify-content:   space-around;
    grid-row-start:    2;
    grid-row-end:      6;
    grid-column-start: 1;
    grid-column-end:   4;
    width:             80%;
    font-size:         2rem;
    user-select:       none;
}

.service-description-text
{
    /*z-index:    22;*/
    text-align: center;
    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:    6;
    grid-row-end:      7;
    grid-column-start: 1;
    grid-column-end:   4;
    width:             100%;
    height:            10rem;
}

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

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

.explore-options
{
    border-radius:              16px;
    /*background-color: rgba(255, 255, 255, 0.5);*/
    padding:                    1rem;
    /*box-shadow:                 0 0px 40px 1px rgba(33, 8, 12, 0.5);*/
    color: var(--color-palette-white-smoke);
    font-size:                  3rem;
    transition-property:        box-shadow;
    transition-duration:        0.3s;
    transition-timing-function: linear;
}

.explore-options:hover
{
    box-shadow: 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);

}

#application
{
    display:           flex;
    align-items:       center;
    justify-content:   center;
    grid-row-start:    4;
    grid-row-end:      7;
    grid-column-start: 1;
    grid-column-end:   1;

}

.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
{
    display:           flex;
    flex-direction:    row;
    align-items:       flex-start;
    justify-content:   flex-start;
    grid-row-start:    1;
    grid-row-end:      4;
    grid-column-start: 1;
    grid-column-end:   1;
    width:             100%;
    height:            100%;
    backdrop-filter:   blur(10px);

}

#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
{
    justify-content:   center;
    grid-row-start:    1;
    grid-row-end:      4;
    grid-column-start: 1;
    grid-column-end:   1;
    backdrop-filter:   blur(10px);

    opacity:           100%;
}

.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;
}

#control img
{
    object-fit: fill;
}

.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%;
}

#modelling img
{
    object-fit: cover;
}

.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
{
    width:      100%;
    height:     100%;
    object-fit: cover;

}

.grid_item img
{
    width:      100%;
    height:     100%;
    object-fit: cover;

}