@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

body {

    direction: rtl;
    font-family: "El Messiri", sans-serif;

}

:root {

    /* ===========================
       TOP BAR
    =========================== */

    --ebtb3-theme1-top-bar-background:
        linear-gradient(90deg, #fff 0%, #2A9658 20%, #06266B 100%);

    /* ===========================
       SOCIAL ICONS
    =========================== */

    --ebtb3-theme1-social-background-color: transparent;
    --ebtb3-theme1-social-border-color: #06266B;
    --ebtb3-theme1-social-icon-color: #ffffff;

    --ebtb3-theme1-social-hover-background-color: #06266B;
    --ebtb3-theme1-social-hover-border-color: #06266B;
    --ebtb3-theme1-social-hover-icon-color: #ffffff;

    /* ===========================
       CALL BUTTON
    =========================== */

    --ebtb3-theme1-call-background-color: #ffffff;
    --ebtb3-theme1-call-border-color: #ffffff;
    --ebtb3-theme1-call-icon-color: #111827;

    --ebtb3-theme1-call-hover-background-color: #06266B;
    --ebtb3-theme1-call-hover-border-color: #06266B;
    --ebtb3-theme1-call-hover-icon-color: #ffffff;

    /* ===========================
       WHATSAPP BUTTON
    =========================== */

    --ebtb3-theme1-whatsapp-background-color: #06266B;
    --ebtb3-theme1-whatsapp-border-color: #06266B;
    --ebtb3-theme1-whatsapp-icon-color: #ffffff;

    --ebtb3-theme1-whatsapp-hover-background-color: #ffffff;
    --ebtb3-theme1-whatsapp-hover-border-color: #ffffff;
    --ebtb3-theme1-whatsapp-hover-icon-color: #FFFAF3;

    /* ===========================
       EFFECTS
    =========================== */

    --ebtb3-theme1-shadow:
        0 10px 20px rgb(37, 99, 235, .25);
}

.ebtb3-top-bar {

    background: var(--ebtb3-theme1-top-bar-background);
    padding-block: .65rem;

}

.ebtb3-top-bar-container {

    max-width: 1440px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.ebtb3-social-icons-top-bar {

    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: .7rem;

}

.ebtb3-social-icons-top-bar a {

    text-decoration: none;

}

.ebtb3-social-icon-top-bar {

    width: 46px;
    height: 46px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;

    transition: .35s ease;

}

/* =====================================
   SOCIAL MEDIA
===================================== */

.ebtb3-social-icons-top-bar:first-child .ebtb3-social-icon-top-bar {

    background: var(--ebtb3-theme1-social-background-color);

    color: var(--ebtb3-theme1-social-icon-color);

    border: 2px solid var(--ebtb3-theme1-social-border-color);

    font-size: 1.1rem;

}

.ebtb3-social-icons-top-bar:first-child .ebtb3-social-icon-top-bar:hover {

    background: var(--ebtb3-theme1-social-hover-background-color);

    border-color: var(--ebtb3-theme1-social-hover-border-color);

    color: var(--ebtb3-theme1-social-hover-icon-color);

    transform: translateY(-4px);

    box-shadow: var(--ebtb3-theme1-shadow);

}

/* =====================================
   CALL
===================================== */

.ebtb3-social-icons-top-bar:last-child a:first-child {

    background: var(--ebtb3-theme1-call-background-color);

    color: var(--ebtb3-theme1-call-icon-color);

    border: 2px solid var(--ebtb3-theme1-call-border-color);

    font-size: 1.1rem;

}

.ebtb3-social-icons-top-bar:last-child a:first-child:hover {

    background: var(--ebtb3-theme1-call-hover-background-color);

    color: var(--ebtb3-theme1-call-hover-icon-color);

    border-color: var(--ebtb3-theme1-call-hover-border-color);

    transform: translateY(-4px);

    box-shadow: var(--ebtb3-theme1-shadow);

}

/* =====================================
   WHATSAPP
===================================== */

.ebtb3-social-icons-top-bar:last-child a:last-child {

    background: var(--ebtb3-theme1-whatsapp-background-color);

    color: var(--ebtb3-theme1-whatsapp-icon-color);

    border: 2px solid var(--ebtb3-theme1-whatsapp-border-color);

    font-size: 1.15rem;

}

.ebtb3-social-icons-top-bar:last-child a:last-child:hover {

    background: var(--ebtb3-theme1-whatsapp-hover-background-color);

    color: var(--ebtb3-theme1-whatsapp-hover-icon-color);

    border-color: var(--ebtb3-theme1-whatsapp-hover-border-color);

    transform: translateY(-4px);

    box-shadow: var(--ebtb3-theme1-shadow);

}

.ebtb3-social-icons-top-bar:last-child .fa-whatsapp {

    font-size: 1.2rem;
    font-weight: 600;

}

/* =====================================
   RESPONSIVE
===================================== */

@media (max-width:1440px) {

    .ebtb3-top-bar-container {

        padding-inline: .8rem;

    }

}

@media (max-width:760px) {

    .ebtb3-top-bar {

        padding-block: .6rem;

    }

    .ebtb3-social-icons-top-bar {

        gap: .5rem;

    }

    .ebtb3-social-icon-top-bar {

        width: 42px;
        height: 42px;

    }

    .ebtb3-social-icons-top-bar:first-child .ebtb3-social-icon-top-bar,
    .ebtb3-social-icons-top-bar:last-child a:first-child,
    .ebtb3-social-icons-top-bar:last-child a:last-child {

        font-size: 1rem;

    }

}