@import './IndexStyle.css';

.company-info-container{
    margin: 0 auto;
    width: 100%;
    max-width: 2600px;
    overflow: hidden;
    position: relative;
}

.company-info-header-wrapper{
    position: relative;
    width: min(1680px, 80%);
    margin: 3% auto;
    margin-bottom: 1%;
    height: auto;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4%;
}

.company-info-header{
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 0.8% 2%;
    background-color: var(--secondary-color);
    box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.4);
    
    border-radius: 8px;

    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.8s ease, transform 0.5s ease;
}

.company-info-header.in-view {
    opacity: 1;
    transform: translateX(0);
}

.company-info-header h2{
    font-family: var(--main-font);
    /*font-size: clamp(1.05rem, 1.15vw, 1.55rem);*/
    font-size: 1.6rem;
    color: whitesmoke;
    font-weight: 600;
}

#company-info-header-image{
    width: 11%;
    aspect-ratio: 1/1;
    transform: translateX(200%);
    transition: transform 0.3s ease-in-out;
}

#company-info-header-image.in-view{
    transform: translateX(0);
}

.company-info-header:nth-of-type(2),
.company-info-header:nth-of-type(3){
    visibility: hidden;
}

.company-info-items{
    position: relative;
    width: min(1680px, 80%);
    margin: 0 auto;
    height: 100%;

    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 4%;
    padding: 2% 0;
}

.company-info-item {
    overflow: hidden;
    opacity: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    overflow: hidden;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.company-info-item:nth-of-type(1) {
    transform: translateX(-120%);
    transition-delay: 1.5s;
}
.company-info-item:nth-of-type(2) {
    transform: translateX(-245%);
    transition-delay: 0.75s;
}
.company-info-item:nth-of-type(3) {
    transform: translateX(-360%);
    transition-delay: 0s;
}

.company-info-item.in-view {
    transform: translateX(0);
    opacity: 1;
}

.company-info-item img {
    transform: translateX(200%);
    transition: transform 0.5s ease-in-out; 
}
.company-info-item:nth-of-type(1) img{
    transition-delay: 1.25s;
}
.company-info-item:nth-of-type(2) img{
    transition-delay: 0.75s;
}
.company-info-item:nth-of-type(3) img{
    transition-delay: 0.25s;
}
.company-info-item img.in-view {
    transform: translateX(0%);
}


.company-info-spacer-image{
    height: 100%;
    object-fit: cover;
    object-position: 100% 50%;
}

.company-info-item-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 3.5% 6%;
    background-color: var(--secondary-color);
    border-bottom: solid 0.4cqi #333333;
}

.company-info-item-header h2{
    font-family: var(--main-font);
    font-size: clamp(1.05rem, 1.15vw, 1.55rem);
    font-weight: 600;
    color: whitesmoke;
    letter-spacing: 0.02cqi;
}

.company-info-item-header img{
    width: 10%;
    aspect-ratio: 1/1;
}

.company-info-item-text{
    background-color: #444;
    padding: 3% 6%;
    height: 100%;
    overflow: hidden;
    transition: padding 0.5s ease-out, max-height 1.2s ease-out; /* Transition on max-height */
}

.company-info-item-text p{
    font-family: var(--main-font);
    font-size: clamp(1.05rem, 0.95vw, 1.45rem);
    font-weight: 400;
    color: whitesmoke;
    line-height: 1.8;
}


@media screen and (max-width: 1680px){
    .company-info-header h2{
        font-size: clamp(1rem, 1.3vw, 1.3rem);
    }

    .company-info-item-header h2{
        font-size: clamp(1rem, 1.25vw, 1.25rem);
    }
}

@media screen and (max-width: 1280px){
    
.company-info-container{
    margin: 0 auto;
    width: 100%;
    max-width: 2600px;
    overflow: hidden;
    position: relative;
}

.company-info-header-wrapper{
    position: relative;
    width: min(1680px, 80%);
    margin: 3% auto;
    margin-bottom: 1%;
    height: auto;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4%;
}

.company-info-header{
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 1% 2%;
    background-color: var(--secondary-color);
    box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.4);
    
    border-radius: 8px;

    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1s ease, transform 1s ease;
}

.company-info-header.in-view {
    opacity: 1;
    transform: translateX(0);
}

.company-info-header h2{
    /*font-size: clamp(0.5rem, 1vw, 1.6rem);*/

    font-family: var(--main-font);
    font-size: 1.05rem;
    color: whitesmoke;
}

#company-info-header-image{
    width: 11%;
    aspect-ratio: 1/1;
    transform: translateX(200%);
    transition: transform 0.5s ease-in-out;
}

#company-info-header-image.in-view{
    transform: translateX(0);
}

.company-info-header:nth-of-type(2),
.company-info-header:nth-of-type(3){
    visibility: hidden;
}


.company-info-item {
    overflow: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out; 
}

.company-info-item:nth-of-type(1) {
    transform: translateX(-120%);
    transition-delay: 1.5s;
}
.company-info-item:nth-of-type(2) {
    transform: translateX(-245%);
    transition-delay: 0.75s;
}
.company-info-item:nth-of-type(3) {
    transform: translateX(-360%);
    transition-delay: 0s;
}

.company-info-item.in-view {
    transform: translateX(0);
    opacity: 1;
}

.company-info-item img {
    transform: translateX(200%);
    transition: transform 0.5s ease-in-out; 
}
.company-info-item:nth-of-type(1) img{
    transition-delay: 1.25s;
}
.company-info-item:nth-of-type(2) img{
    transition-delay: 0.75s;
}
.company-info-item:nth-of-type(3) img{
    transition-delay: 0.25s;
}
.company-info-item img.in-view {
    transform: translateX(0%);
}


.company-info-spacer-image{
    height: 100%;
    object-fit: cover;
    object-position: 100% 50%;
}

.company-info-item-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 3.5% 6%;
    background-color: var(--secondary-color);
    border-bottom: solid 0.4cqi #333333;
}

.company-info-item-header h2{
    font-family: var(--main-font);
    font-size: 1.05rem;
    color: whitesmoke;
    letter-spacing: 0.02cqi;
}

.company-info-item-header img{
    width: 10%;
    aspect-ratio: 1/1;
}

.company-info-item-text.in-view{
    max-height: 700px;
}

.company-info-item-text p{
    font-family: var(--main-font);
    font-size: 0.9rem;
    font-weight: 400;
    color: whitesmoke;
    line-height: 1.8;
}
}


@media screen and (max-width: 800px){
    .company-info-container{
        margin: 0rem auto;
        width: 100%;
        max-width: 2600px;
        overflow: hidden;
        position: relative;
    }
    
    
    .company-info-header-wrapper{
        position: relative;
        width: 90%;
        margin: 2% auto;
        height: auto;

        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 4%;
    }

    .company-info-header{
        overflow: hidden;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        padding: 2% 3%;
        background-color: var(--secondary-color);
        box-shadow: 0 0 16px 5px rgba(0, 0, 0, 0.4);
        
        border-radius: 8px;

        opacity: 0;
        transform: translateX(-100%);
        transition: transform 0.5s ease-in-out, opacity 0.75s ease-in-out; 
    }

    .company-info-header:nth-of-type(2),
    .company-info-header:nth-of-type(3){
        display: none;
    }

    .company-info-header.in-view {
        opacity: 1;
        transform: translateX(0);
    }

    .company-info-header h2{
        /*font-size: clamp(0.5rem, 1vw, 1.55rem);*/

        font-family: var(--main-font);
        font-size: calc(var(--margin-xl));
        color: whitesmoke;
    }

    
    #company-info-header-image{
        width: 50px;
        height: 50px;
        transform: translateX(200%);
        transition: transform 0.5s ease-in-out;
    }
    
    #company-info-header-image.in-view{
        transform: translateX(0);
    }

    
    .company-info-items{
        position: relative;
        width: 90%;
        margin: 0 auto;
    
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-evenly;
        padding: 2rem 0;
        gap: 4rem;
    }
    
    .company-info-item {
        margin: 0 auto;
        overflow: hidden;
        opacity: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.4);
        border-radius: 4px;
        overflow: hidden;
        transition: transform 0.5s ease-in-out, opacity 0.75s ease-in-out; 
    }
    
    .company-info-item:nth-of-type(1) {
        transform: translateX(-100%);
        transition-delay: 0s;
    }
    .company-info-item:nth-of-type(2) {
        transform: translateX(-100%);
        transition-delay: 0s;
    }
    .company-info-item:nth-of-type(3) {
        transform: translateX(-100%);
        transition-delay: 0s;
    }
    
    .company-info-item.in-view {
        transform: translateX(0);
        opacity: 1;
    }
    
    .company-info-item img {
        transform: translateX(200%);
        transition: transform 0.5s ease-in-out; 
    }
    .company-info-item:nth-of-type(1) img{
        transition-delay: 0s;
    }
    .company-info-item:nth-of-type(2) img{
        transition-delay: 0s;
    }
    .company-info-item:nth-of-type(3) img{
        transition-delay: 0s;
    }
    .company-info-item img.in-view {
        transform: translateX(0%);
    }
    
    
    .company-info-spacer-image{
        height: 100%;
        object-fit: cover;
        object-position: 100% 50%;
    }
    
    .company-info-item-header{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    
        padding: 2% 3%;
        background-color: var(--secondary-color);
        border-bottom: solid 7px #333333;
    }
    
    .company-info-item-header h2{
        font-family: var(--main-font);
        font-size: calc(var(--margin-xl));
        color: whitesmoke;
        letter-spacing: 0.5px;
    }
    
    .company-info-item-header img{
        width: 50px;
        height: 50px;
    }
    
    .company-info-item-text p{
        font-family: var(--main-font);
        font-size: calc(var(--margin-l) + 0.1rem);
        font-weight: 400;
        color: whitesmoke;
        line-height: 1.8;
    }

    .company-info-item-text{
        background-color: #444;
        padding: 20px 3%;
        overflow: auto;
        height: 100%;
        max-height: 100%; /* Use max-height instead of height */
    }
    
    .company-info-item-text.in-view{
        padding: 20px 3%;
        height: 100%;
        max-height: 100%;
    }
}

@media screen and (max-width: 500px){
    .company-info-header-wrapper{
        margin: 3% auto;
    }
    .company-info-header{
        overflow: hidden;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        padding: 3% 5%;
        background-color: var(--secondary-color);
        box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.4);
        
        border-radius: 6px;

        opacity: 0;
        transform: translateX(-100%);
        transition: opacity 1s ease, transform 1s ease;
    }

    .company-info-header:nth-of-type(2),
    .company-info-header:nth-of-type(3){
        display: none;
    }

    .company-info-header.in-view {
        opacity: 1;
        transform: translateX(0);
    }

    .company-info-header h2{
        /*font-size: clamp(0.5rem, 1vw, 1.55rem);*/

        font-family: var(--main-font);
        font-size: 1.2rem;
        color: whitesmoke;
    }

    
    #company-info-header-image{
        width: 32px;
        height: 32px;
        transform: translateX(200%);
        transition: transform 0.5s ease-in-out;
    }
    
    #company-info-header-image.in-view{
        transform: translateX(0);
    }

    
    .company-info-items{
        position: relative;
        width: 90%;
        margin: 0 auto;
    
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-evenly;
        padding: 2rem 0;
        gap: 2.5em;
    }
    
    .company-info-item {
        margin: 0 auto;
        overflow: hidden;
        opacity: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.4);
        border-radius: 4px;
        overflow: hidden;
        transition: transform 1s ease-in-out, opacity 1s ease-in-out; 
    }
    
    .company-info-item:nth-of-type(1) {
        transform: translateX(-100%);
        transition-delay: 0s;
    }
    .company-info-item:nth-of-type(2) {
        transform: translateX(-100%);
        transition-delay: 0s;
    }
    .company-info-item:nth-of-type(3) {
        transform: translateX(-100%);
        transition-delay: 0s;
    }
    
    .company-info-item.in-view {
        transform: translateX(0);
        opacity: 1;
    }
    
    .company-info-item img {
        transform: translateX(200%);
        transition: transform 0.5s ease-in-out; 
    }
    .company-info-item:nth-of-type(1) img{
        transition-delay: 0s;
    }
    .company-info-item:nth-of-type(2) img{
        transition-delay: 0s;
    }
    .company-info-item:nth-of-type(3) img{
        transition-delay: 0s;
    }
    .company-info-item img.in-view {
        transform: translateX(0%);
    }
    
    
    .company-info-spacer-image{
        height: 100%;
        object-fit: cover;
        object-position: 100% 50%;
    }
    
    .company-info-item-header{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    
        padding: 3% 5%;
        background-color: var(--secondary-color);
        border-bottom: solid 7px #333333;
    }
    
    .company-info-item-header h2{
        font-family: var(--main-font);
        font-size: 1.2rem;
        letter-spacing: 0.5px;
    }
    
    .company-info-item-header img{
        width: 30px;
        height: 30px;
    }
    
    .company-info-item-text p{
        font-family: var(--main-font);
        font-size: calc(var(--margin-l) - 0.1rem);
        font-weight: 400;
        color: whitesmoke;
        line-height: 1.8;
    }
    
    .company-info-item-text.in-view{
        padding: 10px 5%;
    }
}

@media screen and (max-width: 375px){
    .company-info-header-wrapper{
        margin: 5% auto;
        margin-bottom: 3%;
    }
    .company-info-header{
        overflow: hidden;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        padding: 3% 10px;
        background-color: var(--secondary-color);
        box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.4);
        
        border-radius: 4px;

        opacity: 0;
        transform: translateX(-100%);
        transition: opacity 1s ease, transform 1s ease;
    }

    .company-info-header:nth-of-type(2),
    .company-info-header:nth-of-type(3){
        display: none;
    }

    .company-info-header.in-view {
        opacity: 1;
        transform: translateX(0);
    }

    .company-info-header h2{
        /*font-size: clamp(0.5rem, 1vw, 1.55rem);*/

        font-family: var(--main-font);
        font-size: 1.1rem;
        color: whitesmoke;
    }

    
    #company-info-header-image{
        width: 30px;
        height: 30px;
        transform: translateX(200%);
        transition: transform 0.5s ease-in-out;
    }
    
    #company-info-header-image.in-view{
        transform: translateX(0);
    }

    
    .company-info-items{
        position: relative;
        width: 90%;
        margin: 0 auto;
    
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-evenly;
        padding: 2rem 0;
    }
    
    .company-info-item {
        margin: 0 auto;
        overflow: hidden;
        opacity: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.4);
        border-radius: 4px;
        overflow: hidden;
        transition: transform 1s ease-in-out, opacity 1s ease-in-out; 
    }
    
    .company-info-item:nth-of-type(1) {
        transform: translateX(-100%);
        transition-delay: 0s;
    }
    .company-info-item:nth-of-type(2) {
        transform: translateX(-100%);
        transition-delay: 0s;
    }
    .company-info-item:nth-of-type(3) {
        transform: translateX(-100%);
        transition-delay: 0s;
    }
    
    .company-info-item.in-view {
        transform: translateX(0);
        opacity: 1;
    }
    
    .company-info-item img {
        transform: translateX(200%);
        transition: transform 0.5s ease-in-out; 
    }
    .company-info-item:nth-of-type(1) img{
        transition-delay: 0s;
    }
    .company-info-item:nth-of-type(2) img{
        transition-delay: 0s;
    }
    .company-info-item:nth-of-type(3) img{
        transition-delay: 0s;
    }
    .company-info-item img.in-view {
        transform: translateX(0%);
    }
    
    
    .company-info-spacer-image{
        height: 100%;
        object-fit: cover;
        object-position: 100% 50%;
    }
    
    .company-info-item-header{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    
        padding: 3% 10px;
        background-color: var(--secondary-color);
        border-bottom: solid 7px #333333;
    }
    
    .company-info-item-header h2{
        font-family: var(--main-font);
        font-size: 1.1rem;
        letter-spacing: 0.5px;
    }
    
    .company-info-item-header img{
        width: 30px;
        height: 30px;
    }
    
    .company-info-item-text p{
        font-family: var(--main-font);
        font-size: calc(var(--margin-l) - 0.2rem);
        font-weight: 400;
        color: whitesmoke;
        line-height: 1.8;
    }

    .company-info-item-text{
        padding: 3% 10px;
    }
    
    .company-info-item-text.in-view{
        padding: 3% 10px;
    }
}