main {
    padding: 3% 8%;

    .contact-us {
        display: flex;
        padding-bottom: 8%;
    }

    .sendmessage {
        font-size: 14px;
        padding-top: 1%;
    }

    .contact-info {
        width: 46%;
        padding-right: 4%;
    }

    .contact-info-list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 4% 0;

        .info-list-block {
            display: flex;
            flex-direction: column;
            font-size: 14px;
            padding-right: 18px;

            .info-title {
                display: flex;
                align-items: center;
                color: black;
                gap: 4px;

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

            a {
                color: black;
                text-decoration: none;
                text-wrap: nowrap;

                .mail {
                    text-wrap: wrap;
                    padding-right: 0;
                }

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    .wpa-secretariat {
        display: flex;
        flex-direction: column;

        p {
            font-size: 14px;
            color: black;
            font-family: 'Poppins-SemiBold';
        }

        .wpa-sec-list {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .secretariat-list {
                padding: 2% 4%;
                border: 1px solid #D2D2D2;
                border-radius: 10px;
                font-size: 14px;

                .focused-text {
                    font-size: 12px;
                    color: black;
                    font-family: 'Poppins-ExtraBold';
                }
            }
        }
    }

    .send-message {
        width: 50%;
        /* background-color: aquamarine; */
        display: flex;
        flex-direction: column;
        gap: 6%;

        .message-fields {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px;

            .two-fields {
                display: flex;
                gap: 10px;
            }

            .message-field {
                width: 100%;
                border: none;
                background-color: transparent;
                border: 1px solid #D2D2D2;
                padding: 2.78%;
                border-radius: 10px;
                font-family: "Poppins-SemiBold";
                font-size: 14px;
            }

            .big-field {
                height: 180px;
            }
        }

        .send-message-button {
            border-radius: 8px;
            border: none;
            background-color: #BB1A21;
            font-family: "Poppins-EXtraBold";
            color: white;
            padding: 2.1% 0;
        transition: all 0.1s ease-in-out;

        &:hover {
            scale: 1.02;
            cursor: pointer;
            background-color: black;
        }
        }
    }

    .big-contact-image {
        width: 100%;
        object-fit: cover;
        height: 80vh;
        border-radius: 24px;
        margin-bottom: 8%;
    }

    .interactif-map {
        width: 100%;
        object-fit: cover;
        height: 80vh;
        border-radius: 24px;
        margin-bottom: 8%;
        display: grid;
        place-items: center;
        border: 1px solid #55555569;
        overflow: hidden;
    }

    .questions {
        display: flex;

        .right-questions,
        .left-questions {
            width: 50%;
        }

        .right-questions {
            display: flex;
            flex-direction: column;

            .question-container {
                padding: 0 0 8% 0;
            }

            .question-top {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .question-asked {
                    font-family: 'Poppins-Bold';
                    color: black;
                }

                .show-answer,
                .hide-answer {
                    border: none;
                    background-color: transparent;
                    width: fit-content;
                    height: fit-content;
                    cursor: pointer;
                    transition: all 0.1s ease-in-out;

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

                .show-answer:hover,
                .hide-answer:hover {
                    scale: 1.1;
                }
            }

            .answers {
                font-size: 13px;
                padding: 2% 6% 0 6%;
                transition: all 0.1s ease-in-out;
            }

            .more-questions {
                display: flex;
                gap: 6px;
                color: #BB1A21;
                font-family: "Poppins-ExtraBold";
                cursor: pointer;
                transition: all 0.1s ease-in-out;
            }

            .more-questions:hover {
                gap: 10px;
            }

        }
    }
}

@media (max-width: 991px) {
    main {
        .contact-info-list {
            flex-direction: column;
            width: 100%;
        }

        .send-message {
            .message-fields {
                .message-field {
                    font-size: var(--fs-md);
                }
            }
        }
    }
}

@media (max-width: 767px) {
    main {
        .contact-us {
            flex-direction: column;

            .contact-info {
                width: 100%;
            }

            .contact-info-list {
                width: 100%;
                flex-direction: column;

                .info-list-block {
                    width: fit-content;
                    max-width: 34%;
                }
            }

            .send-message {
                padding-top: 8%;
                width: 100%;
            }
        }

        .questions {
            flex-direction: column;

            .left-questions {
                padding-bottom: 8%;
            }

            .right-questions {
                width: 100%;
            }
        }
    }
}

@media (max-width: 480px) {
    main {
        .contact-us {
            flex-direction: column;

            .contact-info {
                width: 100%;
            }

            .contact-info-list {
                width: 100%;
                flex-direction: column;

                .info-list-block {
                    width: fit-content;
                    min-width: 100%;
                }
            }

            .send-message {
                padding-top: 8%;
                width: 100%;
            }
        }
    }
}