/* ============================================================
   ebtb4 — Top Bar
   Namespace  : ebtb4
============================================================ */

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

/* 1. Variables & Colors */
.ebtb4 {

    --ebtb4-bg: hsl(186, 40%, 55%);
    --ebtb4-text: hsl(0, 0%, 100%);
    --ebtb4-border: transparent;

    --ebtb4-divider: hsl(0, 0%, 100%);

    --ebtb4-link-text: hsl(0, 0%, 100%);
    --ebtb4-icon-bg: transparent;
    --ebtb4-icon-text: hsl(0, 0%, 100%);

    --ebtb4-padding-top: 0.6rem;
    --ebtb4-padding-bottom: 0.6rem;

}

/* 2. Reset */
*,
.ebtb4 *,
.ebtb4 *::before,
.ebtb4 *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 3. Base Styles — Mobile */
.ebtb4 {
    direction: rtl;
    font-family: "El Messiri", sans-serif;
    background: var(--ebtb4-bg);
    color: var(--ebtb4-text);
    padding-top: var(--ebtb4-padding-top);
    padding-bottom: var(--ebtb4-padding-bottom);
}

.ebtb4 a {
    text-decoration: none;
}

.ebtb4__container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
}

.ebtb4__contact {
    font-size: clamp(0.8rem, 3vw, 1rem);
    color: var(--ebtb4-link-text);
}


.ebtb4__divider {
    width: 0.06rem;
    height: 1.2em;
    background: var(--ebtb4-divider);
    display: block;
}

/* icons */
.ebtb4__icons {
    display: flex;
    align-items: center;
    
}

.ebtb4__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    aspect-ratio: 1 / 1;
    color: var(--ebtb4-icon-text);
    background: var(--ebtb4-icon-bg);
    font-size: clamp(0.9rem, 3vw, 1.1rem);
}

/* 4. Breakpoints */

@media (min-width: 481px) {
    .ebtb4__container { gap: 0.7rem; }
}

@media (min-width: 601px) {
    .ebtb4__container { gap: 0.8rem; }
}

@media (min-width: 769px) {
    .ebtb4__container { gap: 0.9rem; }
}

@media (min-width: 1025px) {

    .ebtb4__container {
        justify-content: flex-start; 
        margin-inline-start: auto;   
        gap: 1rem;
        padding-inline: 2rem;
    }

}

@media (min-width: 1281px) {
    .ebtb4__container { padding-inline: 3rem; }
}

@media (min-width: 1441px) {
    .ebtb4__container { padding-inline: 4rem; }
}

@media (min-width: 1921px) {
    .ebtb4__container { padding-inline: 5rem; }
}