@import url("/css/templates/secondary-header.css");
.company-story_header{
    background-image: url("/resources/images/company-story/background.jpg");
    margin-bottom: 5rem;
    border-bottom: 1rem solid hsl(0, 0%, 10%);
}
.company-story_about{
    background: linear-gradient(to bottom, hsl(20, 10%, 100%) 0%, hsl(20, 10%, 90%) 100%);
    .wrapper{
        max-width: 1920px;
        line-height: 1;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        position: relative;
        .flex{
            display: flex;
            align-items: center;
            margin-bottom: 2rem;
            .text{
                padding: 4rem;
                max-width: 75ch;
                .subtitle{
                    font-size: 2.3rem;
                    margin-bottom: 1.5rem;
                    line-height: 1;
                    font-weight: 700;
                    border-bottom: 1px solid hsl(0, 0%, 30%);
                    padding-bottom: 1rem;
                }
                p{
                    line-height: 1.7;
                    font-size: 1rem;
                } 
            }
            .img-wrapper{
                flex: 0 0 50%;
                width: 100%;
                filter: drop-shadow(0 0 10px hsl(0, 0%, 0%, 0.2));
                .img{
                    width: 100%;
                    aspect-ratio: 2/1;
                    flex: 0 0 50%;
                    clip-path: polygon(0% 0, 90% 0, 100% 100%, 0% 100%);
                    background-position: center;
                    background-size: cover;
                    border-bottom: 1rem solid hsl(200, 100%, 40%);
                }
            }
            &.flex-reversed{
                flex-direction: row-reverse;
                .text{
                    text-align: right;
                }
                .img{
                    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
                }
            }
        }
    }
    @media screen and (max-width: 1200px){
        .wrapper{
            .flex{
                align-items: start;
                flex-direction: column;
                .text{
                    max-width: 100%;
                }
                .img-wrapper{
                    .img{
                        aspect-ratio: 2/1;
                        clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
                    }
                }
                &.flex-reversed{
                    flex-direction: column;
                    .text{
                        text-align: left;
                    }
                    .img-wrapper{
                        .img{
                            aspect-ratio: 2/1;
                            clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 100%);
                        }
                    }
                }
            }
        }
    }
    @media screen and (max-width: 786px){
        .wrapper{
            .section-title{
                font-size: 2rem;
            }
            .flex{
                .text{
                    padding: 3rem 5vw;
                    .subtitle{
                        font-size: 1.7rem;
                    }
                }
            }
        }
    }
}
.company-story_advantage{
    position: relative;
    padding: 8rem 5vw;
    box-shadow: 0 0 10px hsl(0, 0%, 0%, 0.4);
    background: url("/resources/images/company-story/bitmapa.jpg");
    background-position: center;
    background-size: cover;
    .wrapper{
        position: relative;
        z-index: 1;
        max-width: 1100px;
        line-height: 1;
        margin: 0 auto;
        color: white;
        .section-title{
            font-size: 2.5rem;
            margin-bottom: 2.5rem;
        }
        .text{
            line-height: 1.6;
            font-size: 1.1rem;
            margin-bottom: 3rem;
        }
        .advantages{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            .advantage{
                display: flex;
                align-items: center;
                gap: 2rem;
                line-height: 1.5;
                font-weight: 700;
                .icon{
                    width: 4rem;
                    height: 4rem;
                }
            }
        }
    }
    &::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: hsl(200, 100%, 10%, 0.8);
        z-index: 0;
    }
    @media screen and (max-width: 786px){
        .wrapper{
            .section-title{
                font-size: 2rem;
            }
            .advantages{
                grid-template-columns: 1fr;
            }
        }
    }
}
.company-story_milestones{
    padding: 5rem 5vw;
    background-color: hsl(0, 0%, 10%);
    box-shadow: 0 0 10px hsl(0, 0%, 0%, 0.5);
    .wrapper{
        color: white;
        max-width: 1300px;
        line-height: 1;
        margin: 0 auto;
        .section-title{
            font-size: 2.5rem;
            margin-bottom: 3rem;
            text-align: center;
        }
        .grid{
            display: flex;
            gap: 4rem;
            flex-wrap: wrap;
            justify-content: center;
            .card{
                display: flex;
                flex-direction: column;
                gap: 1rem;
                border-left: 0.25rem solid hsl(200, 100%, 50%);
                padding: 0 1rem;
                margin: 1rem 0;
                .card-title{
                    font-size: 2.5rem;
                    font-weight: 400;
                }
                .card-desc{
                    line-height: 1.6;
                    max-width: 30ch;
                }
            }
        }
    }
    @media screen and (max-width: 600px){
        .wrapper{
            .section-title{
                font-size: 2rem;
            }
            .grid{
                gap: 2rem;
            }
        }
    }
}
.company-story_in-future{
    background-position: center;
    background-size: cover;
    background-color: hsl(0, 0%, 10%);
    .overlay{
        padding: 20rem 5vw 5rem 5vw;
        background: linear-gradient(to top, hsl(200, 100%, 20%, 1) 0%, hsl(0, 0%, 0%, 0.3) 100%);
        .wrapper{
            color: white;
            max-width: 1000px;
            line-height: 1;
            margin: 0 auto;
            .main{
                .section-title{
                    font-size: 3rem;
                    margin-bottom: 2rem;
                    color: white;
                }
                .text{
                    line-height: 1.7;
                }
            } 
        }
    }
    @media screen and (max-width: 786px){
        .overlay{
            .wrapper{
                .main{
                    .section-title{
                        font-size: 2.5rem;
                    }
                }
            }
        }
    }
}