/* global definitions */
:root {
    --contact-bg-color: #fcbf00;
    --contact-card-bg-color: #1D1D1B;
    --contact-card-text-color: #c5c6c7;
    --contact-card-text-hover-color: #FFE676;
}

.sec_contact {
    background-color: var(--contact-bg-color);

    .contact-map {
        display: block;
    }

    .contact-card {
        display: flex;
        background-color: var(--contact-card-bg-color);
        color: var(--contact-card-text-color);

        & .contact-card-logo {
            display: block;

            & img {
                width: 100%;
                height: auto;
            }
        }

        & .contact-card-blk {
            display: flex;
            flex-direction: column;

            & h2 {
                display: block;
            }

            & .info-row {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-start;

                & .info-icon {
                    display: block;
                    color: var(--contact-card-text-color);
                }

                & .info-data {
                    display: block;
                    color: var(--contact-card-text-color);

                    & a {
                        text-decoration: none;
                        color: var(--contact-card-text-color);
                    }

                    & a:hover {
                        color: var(--contact-card-text-hover-color);
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1200px) {
    .sec_contact {
        height: 620px;
        position: relative;

        & .contact-map {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            & iframe {
                height: 100%;
                width: 100%;
            }
        }

        & .contact-card {
            position: absolute;
            top: 0;
            right: calc(50% - 545px);
            height: 100%;
            opacity: 0.85;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 4rem;

            & .contact-card-logo {
                width: 300px;
            }

            & .contact-card-blk {
                padding: 0 2rem;
                gap: 2rem;

                & h2 {
                    font-size: 2.5rem;
                }

                & .info-row {
                    gap: 2rem;

                    & .info-icon {
                        padding: 0.3rem 0;
                        font-size: 2rem;
                    }

                    & .info-data {
                        font-size: 1.4rem;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .sec_contact {
        height: 620px;
        position: relative;

        & .contact-map {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            & iframe {
                height: 100%;
                width: 100%;
            }
        }

        & .contact-card {
            position: absolute;
            top: 0;
            right: 57px;
            height: 100%;
            width: 300px;
            opacity: 0.85;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1.5rem;

            & .contact-card-logo {
                width: 280px;
            }

            & .contact-card-blk {
                width: 100%;
                padding: 0 2rem;
                gap: 2rem;

                & h2 {
                    font-size: 2.6rem;
                }

                & .info-row {
                    gap: 2rem;

                    & .info-icon {
                        padding: 0.3rem 0;
                        font-size: 2rem;
                    }

                    & .info-data {
                        font-size: 1.6rem;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .sec_contact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;

        & .contact-map {
            grid-column: 2;
            grid-row: 1;
            width: 100%;
            height: 100%;

            & iframe {
                height: 100%;
                width: 100%;
            }
        }

        & .contact-card {
            grid-column: 1;
            grid-row: 1;
            width: 100%;
            height: 100%;
            flex-direction: column;
            padding: 3rem 2rem;
            gap: 1.5rem;

            & .contact-card-logo {
                width: 100%;
            }

            & .contact-card-blk {
                padding: 0 4rem;
                gap: 2rem;

                & h2 {
                    font-size: 2.5rem;
                }

                & .info-row {
                    gap: 2rem;

                    & .info-icon {
                        padding: 0.3rem 0;
                        font-size: 1.8rem;
                    }

                    & .info-data {
                        font-size: 1.4rem;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .sec_contact {
        display: flex;
        flex-direction: column;
        width: 100%;

        & .contact-map {
            width: 100%;
            height: 40svh;

            & iframe {
                height: 100%;
                width: 100%;
            }
        }

        & .contact-card {
            width: 100%;
            height: 100%;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
            gap: 1rem;

            & .contact-card-logo {
                padding: 1.5rem;
                width: 100%;
            }

            & .contact-card-blk {
                width: 47%;
                padding: 2rem;
                justify-content: flex-start;
                gap: 1rem;

                & h2 {
                    font-size: 2rem;
                }

                & .info-row {
                    gap: 2rem;

                    & .info-icon {
                        padding: 0.3rem 0;
                        font-size: 1.4rem;
                    }

                    & .info-data {
                        font-size: 1.2rem;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 480px) {
    .sec_contact {
        display: flex;
        flex-direction: column;
        width: 100%;

        & .contact-map {
            width: 100%;
            height: 40svh;

            & iframe {
                height: 100%;
                width: 100%;
            }
        }

        & .contact-card {
            width: 100%;
            height: 100%;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
            padding: 2rem 0;;

            & .contact-card-logo {
                padding: 1.5rem;
                width: 100%;
            }

            & .contact-card-blk {
                width: 100%;
                padding: 1.5rem 3rem;
                justify-content: flex-start;
                gap: 1rem;

                & h2 {
                    font-size: 2rem;
                }

                & .info-row {
                    padding: 0rem 2rem;
                    gap: 2rem;

                    & .info-icon {
                        padding: 0.3rem 0;
                        font-size: 2rem;
                    }

                    & .info-data {
                        font-size: 1.8rem;
                    }
                }
            }
        }
    }
}