@import url("/css/templates/secondary-header.css");
.site-print_header{
    background: url('/resources/images/site-print/bg-1.jpg');
    background-position: center;
    background-size: cover;
}
.site-print_about{
    padding: 7rem 5vw;
    border-top: 1px solid hsl(0, 0%, 90%);
    background-color: hsl(0, 0%, 98%);
    .wrapper{
        max-width: 1200px;
        margin: 0 auto;
        line-height: 1;
        display: flex;
        width: 100%;
        gap: 3rem;
        align-items: center;
        .img{
            flex: 0 0 50%;
            box-shadow: 0 3px 5px hsl(0, 0%, 0%, 0.4);
            img{
                display: block;
                width: 100%;
                aspect-ratio: 2/1;
                object-fit: cover;
            }
        }
        .text{
            .section-title{
                font-size: 2.5rem;
                margin-bottom: 2rem;
            }
            .section-desc{
                line-height: 1.6;
            }
        }
    }
    @media screen and (max-width: 1200px){
        .wrapper{
            max-width: 700px;
            flex-direction: column;
        }
    }
    @media screen and (max-width: 700px){
        .wrapper{
            .text{
                .section-title{
                    font-size: 2rem;
                }
            }
        }
    }
}
.site-print_offer{
    box-shadow: 0 0 10px hsl(0, 0%, 0%, 0.3);
    padding: 7rem 5vw;
    background-color: hsl(0, 0%, 25%);
    color: white;
    .wrapper{
        max-width: 800px;
        margin: 0 auto;
        line-height: 1;
        .section-title{
            font-size: 2.5rem;
            margin-bottom: 2rem;
        }
        .section-desc{
            line-height: 1.6;
            margin-bottom: 4rem;
        }
        .columns{
            display: flex;
            align-items: center;
            gap: 3rem;
            .pricing{
                font-weight: 600;
                line-height: 1.6;
            }
            .cta{
                background-color: hsl(200, 100%, 50%);
                font-size: 1.1rem;
                font-weight: 600;
                color: black;
                flex: 1 1;
                padding: 2rem 4rem;
                white-space: nowrap;
                border-radius: 5px;
                transition: 0.1s;
                box-shadow: 0 2px 5px hsl(0, 0%, 0%, 0.4);
                text-decoration: none;
                &:hover{
                    background-color: hsl(200, 100%, 45%);
                }
            }
        }
    }
    @media screen and (max-width: 700px){
        .wrapper{
            .section-title{
                font-size: 2rem;
            }
            .columns{
                flex-direction: column-reverse;
            }
        }
    }
}
.site-print_benefits{
    padding: 7rem 5vw;
    .wrapper{
        max-width: 1200px;
        margin: 0 auto;
        line-height: 1;
        display: flex;
        align-items: center;
        gap: 3rem;
        .img{
            flex: 0 0 50%;
            box-shadow: 0 3px 5px hsl(0, 0%, 0%, 0.4);
            img{
                display: block;
                width: 100%;
                object-fit: cover;
            }
        }
        .text{
            .section-title{
                font-size: 2.5rem;
                margin-bottom: 3rem;
            }
            .list{
                display: flex;
                flex-direction: column;
                gap: 2.5rem;
                .benefit{
                    display: flex;
                    gap: 1rem;
                    align-items: center;
                    svg{
                        flex: 0 0 3rem;
                        width: 3rem;
                        height: 3rem;
                        display: block;
                    }
                    .text{
                        font-size: 1rem;
                        font-weight: 500;
                        line-height: 1.4;
                    }
                }
            }
        }
    }
    @media screen and (max-width: 1200px){
        .wrapper{
            max-width: 700px;
            flex-direction: column-reverse;
            .text{
                .section-title{
                    font-size: 2rem;
                }
            }
        }
    }
}
.site-print_more-about{
    background-color: hsl(50, 100%, 70%);
    box-shadow: 0 0 5px hsl(0, 0%, 0%, 0.25) inset;
    padding: 2rem 5vw;
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        h2{
            font-size: 1.8rem;
            line-height: 1.3;
            text-align: center;
            font-weight: 400;
        }
        a{
            line-height: 1;
            border: 1px solid black;
            border-radius: 100px;
            padding: 0.7rem 2.1rem;
            font-size: 1.2rem;
            color: black;
            text-decoration: none;
            transition: 0.2s;
            box-shadow: 0 2px 3px hsl(0, 0%, 0%, 0.25);
            &:hover{
                background-color: black;
                color: hsl(50, 100%, 50%);
            }
        }
        @media screen and (max-width: 1400px){
            h2{
                font-size: 1.6rem;
            }
            flex-direction: column;  
        }
        @media screen and (max-width: 700px){
            h2{
                font-size: 1.4rem;
            }
        }
    }
}