section.hero {
    position: -webkit-sticky;
    position: sticky;
    top: var(--navbar-height);
}

section.hero .hero-content .position-absolute {
    background: linear-gradient(to right, #33333333, #00000033);

}

.main {
    position: relative;
    z-index: 1;
    background: linear-gradient(to right, var(--wc-dark), black);
}

/* start of content */
.main .content {
    flex-grow: 1;
    flex-basis: calc(100% - var(--fb));
    max-width: var(--vw);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    flex-direction: column;
}

.main .content section {
    /* position: -webikt-sticky;
    position: sticky;
    top: 0; */
    /* top: var(--navbar-height); */
}

/* start of about section */
section.about {
    gap: 1rem;
}

section.about div.about {
    align-items: flex-start;
}

section.about div.about>div {
    display: flex;
    flex: 0 0 100%;
}

section.about img {
    object-fit: contain;
}

section.warranty h2 {
    padding-top: 3rem;
}

@media screen and (min-width: 768px) {
    section.about div.about>div {
        flex-basis: calc(50% - 0.5rem);
        position: sticky;
        top: calc(var(--navbar-height) + 2rem);
    }

    img {
        border-radius: 0.5rem;
    }
}

/* end of about section */

#staff .row>div:has(img) {
    margin: 3rem 0 1rem;
}

#staff .row:nth-of-type(n)>div:first-child {
    order: 1;
}

/* start of quality section */
section.quality {
    --mt: -6%;
    --mb: 0;
    --o: 10%;
    --mo: 10%;
    --br: 0.5rem;
}

section.quality .banner>div {
    flex: 1 0 calc(100% - var(--mo));
    border-radius: var(--br);
    /* overflow: hidden; */
}

section.quality .banner>div:nth-child(1) {
    margin-bottom: var(--mb);
    margin-right: var(--mo);
}

section.quality .banner>div:nth-child(2) {
    margin-left: 0;
    margin-top: var(--mt);
    margin-left: var(--mo);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* background: linear-gradient(to right, var(--wc-green), var(--wc-green-2)); */
    color: white;
    /* box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4); */
}

section.quality .banner>div:nth-child(2) .subheading {
    background: linear-gradient(to right, var(--wc-green), var(--wc-green-2));
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

section.quality .banner img {
    display: block;
    width: 100%;
    object-fit: contain;
    object-position: bottom;
    background: var(--wc-light-dark);
}

section.quality ul:has(li:not(.splide__slide)) {
    --fb: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 2rem;
    list-style: none;
}

section.quality ul li:not(.splide__slide) {
    flex: 1 0 var(--fb);
    position: relative;
    --y1: -50%;
    --y2: -50%;
}

section.quality ul li:not(.splide__slide)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1rem;
    height: 0.7rem;
    aspect-ratio: 1;
    background-image: var(--url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: rotate360 linear 2s infinite;
}

div:has(>#tests-splide) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#tests-splide ul {
    gap: 1rem;
}

#tests-splide li {
    padding: 1rem;
    background: white;
    color: var(--wc-dark);
    border-radius: 1rem;
    max-width: 250px;
}

#tests-splide li span {
    display: flex;
    height: 100%;
    text-align: center;
    align-items: center;
}

@media screen and (min-width: 576px) {
    section.quality ul:has(li:not(.splide__slide)) {
        --fb: calc(50% - 2rem);
    }
}

@media screen and (min-width: 768px) {

    #staff .row {
        align-items: flex-start;
    }

    #staff .row>div {
        margin-top: 3rem;
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--navbar-height) + 2rem);
        padding: 0;
    }

    #staff .row:nth-of-type(odd)>div:first-child {
        order: 0;
        padding: 0 3rem 0 0;
    }

    #staff .row:nth-of-type(even)>div:first-child {
        padding: 0 0 0 3rem;
    }

    #staff .row:nth-of-type(even)>div:first-child {
        /* order: 1; */
    }
}

@media screen and (min-width: 992px) {
    section.quality {
        --mt: 6%;
        --mb: 6%;
        --o: 3%;
        --mo: 0;
        --br: 1rem;
    }

    section.quality .banner>div {
        flex: 1 0 calc(50% + var(--o));
    }

    section.quality .banner>div:nth-child(1) {
        margin-bottom: var(--mb);
    }

    section.quality .banner>div:nth-child(2) {
        margin-left: calc(-2 * var(--o));
        margin-top: var(--mt);
    }

    section.quality .banner img {
        aspect-ratio: 16/9;
        object-position: center;
    }
}

/* end of quality section */

.our-companies a {
    color: var(--bs-body);
    text-decoration: none;
}

.our-companies .details {
    margin-top: 3rem;
}

.our-companies .details:nth-of-type(1) {
    margin-top: 1rem;
}

.our-companies .details .logo img {
    margin-bottom: 1rem;
}

@media screen and (min-width:768px) {
    .our-companies .details .logo {
        padding: 0;
        text-align: center;
    }
    
    .our-companies .details:nth-child(odd) .logo {
        order: 1;
    }

    .our-companies .details:nth-of-type(odd)>div:nth-child(2) {
        padding: 0 0 0 3rem;
    }

    .our-companies .details:nth-of-type(even)>div:nth-child(2) {
        padding: 0 3rem 0 0;
    }
    .our-companies .details {
        align-items: start;
    }
    .our-companies .details>div {
        position: sticky;
        top: calc(var(--navbar-height) + 2rem);
    }
}

/* end of content */