@import url("/css/templates/secondary-header.css");
.contact_header{
    background: url("/resources/images/contact/office.jpg");
    background-size: cover;
    background-position: center;
}
.contact_contact-cards{
    background-color: hsl(0, 0%, 97%);
    padding: 4rem 5vw;
    .wrapper{
        max-width: 1000px;
        margin: 0 auto;
        line-height: 1;
        .section-title{
            margin-bottom: 1rem;
            font-size: 2.5rem;
        }
        .time{
            color: hsl(0, 0%, 30%);
            font-weight: 500;
            margin: 0 auto;
            margin-bottom: 2rem;
            font-size: 1.4rem;
            span{
                color: hsl(0, 0%, 10%);
                font-weight: 600;
                white-space: nowrap;
            }
        }
    }
    div.grid{
        max-width: 1000px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        .card{
            background-color: white;
            overflow: hidden;
            display: grid;
            grid-template-rows: repeat(3, auto);
            box-shadow: 0 5px 5px hsl(0, 0%, 0%, 0.25);
            padding: 3rem 2rem;
            border-left: 10px solid hsl(180, 90%, 30%);
            a.personel-button{
                border: 2px solid hsl(200, 100%, 40%);
                display: flex;
                justify-content: center;
                align-items: center;
                color: hsl(0, 0%, 20%);
                width: fit-content;
                margin: 0 auto;
                padding: 10px 20px;
                border-radius: 5px;
                margin-bottom: 20px;
                transition: 0.2s;
                text-decoration: none;
                svg{
                    fill: hsl(0, 0%, 40%);
                    margin-right: 5px;
                }
                &:hover{
                    background-color: hsl(200, 100%, 40%);
                    color: white;
                    svg{
                        fill: white;
                    }
                }
            }
            h3{
                font-weight: 600;
                font-size: 1.5rem;
                text-align: center;
                align-content: center;
                height: auto;
                margin-bottom: 20px;
            }
            div.contact-info{
                color: hsl(0, 0%, 20%);
                display: grid;
                grid-template-columns: auto auto;
                gap: 5px;
                font-size: 1rem;
                white-space: nowrap;
                font-size: 1.1rem;
                margin-bottom: 20px;
                p.left{
                    text-align: right;
                }
                a.right{
                    font-weight: 600;
                    color: hsl(200, 100%, 35%);
                    text-decoration: none;
                    transition: 0.1s;
                    &:hover{
                        color: hsl(200, 100%, 10%);  
                    }
                }
            }
            p.desc{
                color: hsl(0, 0%, 40%);
                font-size: 1rem;
                text-align: center;
            }
        }
    }
    @media screen and (max-width: 800px){
        .wrapper{
            .section-title{
                font-size: 2rem;
            }
        }
        div.grid{
            grid-template-columns: repeat(1, 1fr);  
        }
    }
}
.contact_office{
    background-color: hsl(0, 0%, 20%);
    padding: 7rem 5vw;
    box-shadow: 0 0 10px hsl(0, 0%, 0%, 0.5);
    color: white;
    line-height: 1;
    .wrapper{
        max-width: 1200px;
        margin: 0 auto;
        .office{
            display: flex;
            gap: 2rem;
            .img{
                flex: 1 1 50%;
                height: fit-content;
                img{
                    box-shadow: 0 3px 10px hsl(0, 0%, 0%, 0.5);
                    object-fit: contain;
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
            .text{
                flex: 1 1 50%;
                display: flex;
                flex-direction: column;
                .title{
                    font-size: 2.5rem;
                    margin-bottom: 2rem;
                }
                .desc{
                    line-height: 1.6;
                    margin-bottom: 2rem;
                }
                h3{
                    font-size: 1.5rem;
                    margin-bottom: 1rem;
                }
                .address{
                    list-style-type: none;
                    margin-bottom: 2rem;
                    li{
                        margin-bottom: 1rem;
                        color: hsl(0, 0%, 90%);
                        .value{
                            font-size: 1.2rem;
                            color: hsl(180, 100%, 40%);
                        }
                    }
                }
                .map-link{
                    color: white;
                    background-color: hsl(200, 100%, 40%);
                    max-width: fit-content;
                    font-size: 1rem;
                    padding: 1.5rem 2rem;
                    border-radius: 0.5rem;
                    box-shadow: 0 2px 5px hsl(0, 0%, 0%, 0.5);
                    transition: 0.1s;
                    text-decoration: none;
                    margin-top: auto;
                    &:hover{
                        transform: translateY(-2px);
                        background-color: hsl(200, 100%, 35%);
                    }
                }
            }
        }
    }
    @media screen and (max-width: 1200px){
        .wrapper{
            max-width: calc(70ch + 2rem);
            .office{
                flex-direction: column;
                .text{
                    border-left: 1px solid hsl(0, 0%, 100%);
                    padding-left: 2rem;
                }
            }
        }
    }
    @media screen and (max-width: 600px){
        .wrapper{
            .office{
                .text{
                    .title{
                        font-size: 2rem;
                    }
                }
            }
        }
    }
}
.contact_branches{
    padding: 6rem 5vw;
    line-height: 1;
    background: hsl(0, 0%, 97%);
    .wrapper{
        max-width: 1300px;
        margin: 0 auto;
        .title{
            font-size: 2.5rem;
            margin-bottom: 3rem;
        }
        .companies{
            display: grid;
            gap: 2rem;
            grid-template-columns: repeat(2, 1fr);
            .company{
                display: flex;
                flex-direction: column;
                padding: 2rem 3rem;
                background-color: white;
                box-shadow: 0 0 10px hsl(0, 0%, 0%, 0.2);
                align-items: start;
                justify-content: space-between;
                img{
                    height: 4rem;
                    display: block;
                    margin-bottom: 3rem;
                }
                .company-name{
                    font-size: 1.2rem;
                    margin-bottom: 1.2rem;
                    color: hsl(200, 100%, 40%);
                    line-height: 1.2;
                }
                .address{
                    margin-bottom: 1.5rem;
                    margin-left: 1rem;
                    list-style: none;
                    li{
                        margin-bottom: 0.6rem;
                        color: hsl(0, 0%, 0%);
                        font-weight: 700;
                        line-height: 1.4;
                        &::before{
                            content: "-";
                            margin-right: 0.5rem;
                        }
                    }
                }
                .contact{
                    display: flex;
                    flex-direction: column;
                    gap: 0.6rem;
                    a{
                        color: hsl(0, 0%, 0%);
                        font-weight: 700;
                        letter-spacing: 1px;
                    }
                }
                h4{
                    font-size: 1.1rem;
                    font-weight: 400;
                    margin-bottom: 1rem;
                }
            }
        }
    }
    @media screen and (max-width: 1300px){
        .wrapper{
            max-width: 700px;
            .companies{
                grid-template-columns: 1fr;
            }
        }
    }
    @media screen and (max-width: 600px){
        .wrapper{
            .title{
                font-size: 2rem;
            }
            .companies{
                .company{
                    .company-name{
                        font-size: 1.2rem;
                    }
                    padding: 4rem 2rem;
                }
            }
        }
    }
}