/* main content */
.contact-page {
    padding: 50px 50px 100px;
    color: var(--black1);
    transition: all 0.4s ease;
}
.contact-page-title {
    padding-bottom: 50px;
    transition: padding-bottom 0.4s ease;
}
/* upper part */
.contacts-upper {
    /* display: flex; */
    display: grid;
    grid-template-columns: minmax(420px, 590px) 1fr;
    width: 100%;
    gap: 50px;
    padding-bottom: 80px;
    transition: all 0.4s ease;
}
/* left side */
.contacts-upper-l {
    background: var(--blue1);
    color: var(--white1);
    border-radius: 8px;
    padding: 32px;
    /* flex: 1; */
    height: fit-content;
    transition: padding 0.4s ease;

    a {
        color: var(--white1);
        border-bottom: 1px solid transparent;
        padding-bottom: 12px;
        transition: all 0.4s ease;
    }
    a:hover {
        border-bottom: 1px solid var(--hoverYellow1);
    }
}
.contacts-contacts {
    .h3 {
        padding-bottom: 24px;
    }
    .body1 {
        display: flex;
        flex-direction: column;
        gap: 16px;
        border-bottom: 1px solid var(--hoverBlue1);
        padding-bottom: 32px;
        transition: all 0.4s ease;
    }
}
.service-contacts {
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    transition: all 0.4s ease;
}
.service-contacts-title {
    display: flex;
    align-items: center;
    gap: 12px;

    img {
        width: 30px;
        height: 30px;
        transition: all 0.4s ease;
    }
}
.service-contacts-con {
    display: flex;
    gap: 24px;
    /* flex-wrap: wrap; */
    transition: all 0.4s ease;

    img {
        height: 45px;
        width: 45px;
        
    }

    .button1 {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 20px;
        width: max-content;

        a {
            margin-top: 12px;
        }
    }
}
/* right side */
.contacts-upper-r {
    border: 1px solid var(--greyBorder1);
    border-radius: 8px;
    padding: 32px;
    /* flex: 1; */
    transition: padding 0.4s ease height 0.4s ease;

    .h3 {
        padding-bottom: 32px;
    }
    .caption2 {
        color: var(--greyText1);
    }
    form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    input {
        padding: 13px 16px;
        outline: none;
        border: 1px solid var(--greyBorder1);
        border-radius: 8px;
        width: 100%;
        /* min-width: 230px; */
        transition: all 0.4s ease;
    }
    input::placeholder {
        color: var(--greyText1);
    }
    input:hover {
        border-color: var(--greyText1);
    }
    input:focus {
        border-color: var(--blue1);
        color: var(--black1);
    }
    textarea {
        padding: 13px 16px;
        outline: none;
        border: 1px solid var(--greyBorder1);
        height: 150px;
        width: 100%;
        border-radius: 8px;
        resize: none;
        transition: all 0.4s ease;
    }
    textarea::placeholder {
        color: var(--greyText1);
    }
    textarea:hover {
        border-color: var(--greyText1);
    }
    textarea:focus {
        border-color: var(--blue1);
        color: var(--black1);
    }
}
.contacts-r-form-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    transition: all 0.4s ease;

    div {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
}
.contacts-r-form-textarea {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* lower part */
.offices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}
.office {
    display: flex;
    flex-direction: column;

    .h3 {
        padding-bottom: 24px;
    }
    .address {
        display: flex;
        align-items: center;
        gap: 20px;
        padding-bottom: 24px;
        transition: all 0.4s ease;

        img {
            height: 45px;
            width: 45px;
            transition: all 0.4s ease;
        }
    }
    .map {
        height: 200px;
        margin-bottom: 30px;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.4s ease;

        iframe {
            border-radius: 8px;
            height: 100%;
            width: 100%;
        }
    }
}
.branch-employees {
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    /* grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); */
    gap: 24px;
    transition: all 0.4s ease;
}
.employee {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;

    .button1 {
        padding-top: 16px;
        padding-bottom: 4px;
    }
    .body4 {
        color: var(--greyText1);
        padding-bottom: 24px;
    }
    .employee-phone {
        padding-bottom: 4px;
    }
    .employee-phone a {
        display: flex;
        align-items: center;
        padding-bottom: 12px;
        gap: 8px;
        width: fit-content;
        border-bottom: 1px solid transparent;
        transition: all 0.4s ease;
    }
    .employee-phone a:hover {
        border-color: var(--hoverYellow1);
    }
    .employee-phone a::before {
        content: "";
        background-image: url(../../icons/phone.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 20px;
        width: 20px;
        display: block;
    }
    .employee-mail {
        padding-bottom: 4px;
        word-break: break-all;
        white-space: normal;
    }
    .employee-mail a {
        display: flex;
        align-items: center;
        padding-bottom: 12px;
        gap: 8px;
        width: fit-content;
        border-bottom: 1px solid transparent;
        transition: all 0.4s ease;
    }
    .employee-mail a:hover {
        border-color: var(--hoverYellow1);
    }
    .employee-mail a::before {
        content: "";
        background-image: url(../../icons/envelope.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 20px;
        width: 20px;
        display: block;
    }
}
.employee-photo {
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
}
.employee-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* responsive */
@media (max-width: 1250px) {
    .contacts-upper {
        display: flex;
    }
    .contacts-upper-l {
        flex: 1;
    }
    .contacts-upper-r {
        flex: 1;
    }
    .branch-employees {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 1100px) {
    .contacts-upper {
        gap: 24px;
    }
    .service-contacts-con {
        flex-direction: column;
    }
    .contacts-r-form-main {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 950px) {

}
@media (max-width: 767px) {
    /* whole page */
    .contact-page {
        padding: 30px 20px 50px;
    }
    .contact-page-title {
        padding-bottom: 30px;
    }
    /* upper-part */
    .contacts-upper {
        flex-direction: column;
        gap: 24px;
        padding-bottom: 50px;
    }
    .contacts-upper-l {
        padding: 24px 16px;
    }
    /* left side */
    .contacts-contacts {
        .body1 {
            padding-bottom: 24px;
        }
    }
    .service-contacts {
        padding-top: 24px;
        gap: 20px;
    }
    .service-contacts-title {
        img {
            width: 24px;
            height: 24px;
        }
    }
    .service-contacts-con {
        flex-direction: column;
        gap: 4px;

        img {
            height: 30px;
            width: 30px;
        }
        .button1 {
            gap: 12px;
        }
    }
    /* right side */
    .contacts-upper-r {
        padding: 24px 16px;

        .h3 {
            padding-bottom: 24px;
        }
    }
    /* lower part */
    .offices {
        grid-template-columns: 1fr;
    }
    .office {
        .address {
            padding-bottom: 16px;
            gap: 12px;
            transition: all 0.4s ease;

            img {
                height: 30px;
                width: 30px;
                transition: all 0.4s ease;
            }
        }
    }
}
@media (max-width: 450px) {
    /* lower part */
    .office {
        .map {
            height: 150px;
        }
    }
    .branch-employees {
        grid-template-columns: 1fr;
    }    
}