#main-container{
    width:calc(100vw - 240px);
    height:512px;
    margin: 0 48px 48px;
    padding:64px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    position:relative;
}

#main-container > div:first-of-type{
    width:384px;
    height:320px;
    padding:32px;
    background:rgba(255, 255, 255, 0.9);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    box-shadow:0 0 24px 0 #444;
    position:absolute;
    z-index:1;
    gap:18px;
}

#main-container > div:first-of-type > h1{
    margin:0;
    font-size:36px;
    line-height:39px;
}

#main-container > div:first-of-type > p{
    margin:0;
    font-size:14px;
    line-height:18px;

}

#request-quote-btn{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    padding:18px;
    gap:24px;
    background:var(--accent-color);
    text-decoration:none;
    cursor:pointer;
}

#request-quote-btn > p{
    margin:0;
    color:white;
    font-weight:700;
}

#request-quote-btn > img{
    height:18px;
    filter:invert(1);
}

#companies{
    background:white;
    width:calc(100vw - 256px);
    padding:32px 128px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:24px;
}

#companies > h1{
    margin:0;
    color:gray;
    font-size:28px;
    font-weight:500;
    text-align:center;
}

#companies-list{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
    flex-wrap:wrap;
    gap:48px;
}

#companies-list > img {
    height:32px;
    filter:contrast(0);
    transition-duration:250ms;
}

#companies-list > img:hover{
    filter:contrast(1)
}

#main-container > div:last-of-type{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.main-container-bg{
    width:100%;
    height:100%;
    position:absolute;
    transition-duration:1000ms;
}

.main-container-bg.active-container-bg{
    visibility:visible;
    opacity:1;
}

.main-container-bg:not(.active-container-bg){
    visibility:hidden;
    opacity:0;
}

#products{
    background:var(--light-accent);
    padding:64px 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:24px;
}

#products > h1{
    margin:0;
    font-size:32px;
    text-align:center;
}

#products-categories{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:24px;
    width:calc(100vw - 240px);
    flex-wrap:wrap;
}

.product{
    height:256px;
    width:384px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    background:white;
    overflow:hidden;
    position:relative;
}

.product > div:first-of-type{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    height:256px;
    width:100%;
}

.product *{
    transition-duration:250ms;
}

.product > div:first-of-type > img{
    height:192px;
}

.product:hover > div:first-of-type > img{
    height:128px;
}

.product > div:nth-of-type(2){
    width:0;
    opacity:0;
    visibility:hidden;
    text-align:left;
    padding:12px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}

.product > div:nth-of-type(2) > h1{
    font-size:14px;
    text-align:left;
    margin:0;
}

.product > div:nth-of-type(2) > p{
    font-size:11px;
    margin:0;
}

.product > div:nth-of-type(2) > a{
    font-size:12px;
    margin:0;
    width:100%;
    background:var(--accent-color);
    padding:8px 0;
    color:white;
    font-weight:600;
    text-decoration:none;
}

.product > p{
    position:absolute;
    bottom:24px;
    right:24px;
    text-transform:uppercase;
    font-weight:700;
    color:black;
    border:1px solid black;
    padding:6px 24px;
    font-size:10px;
    text-overflow:clip;
    white-space: nowrap;
    transition-duration:500ms;
    margin:0;
}

.product:hover > p{
    right:512px;
}

/*.product > h3{
    position:absolute;
    top:24px;
    left:24px;
    font-size:10px;
    margin:0;
    color:white;
    font-weight:600;
    background:var(--accent-color);
    padding:3px 6px;

}

.product:hover > h3{

}*/

.product > h3{
    display:none;
}

.product:hover > div:first-of-type{
    width:50%;
}

.product:hover > div:nth-of-type(2){
    width:calc(50% - 24px);
    visibility:visible;
    opacity:1;
}