.ebtb2 {
    --ebtb2-helper: #204A7B;     
    --ebtb2-primary: #ffffff;    
    --ebtb2-secondary: #204A7B;   

    padding: clamp(0.3rem, 0.5vw, 0.1rem) 0;
    background-color: var(--ebtb2-helper);
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "El Messiri", sans-serif;
}

a {
  text-decoration: none;
}


.ebtb2__container {
    width: clamp(85%, 90vw, 92%);
    margin: 0 auto;
}

.ebtb2__social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.4rem, 2.5vw, 0.8rem);
}

.ebtb2__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(1.5rem, 6vw, 2rem);
    height: clamp(1.5rem, 6vw, 2rem);
    border-radius: 50%;
    background-color: var(--ebtb2-secondary);
    color: var(--ebtb2-primary);
    font-size: clamp(0.9rem, 3.5vw, 1.2rem);
    transition: 
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}


.ebtb2__item:hover {
    transform: translateY(clamp(-0.2rem, -0.6vw, -0.15rem));
    background-color: var(--ebtb2-primary);
    color: var(--ebtb2-secondary);
    box-shadow: 
        0 clamp(0.3em, 1vw, 0.6em)
        clamp(0.6em, 2vw, 1.2em)
        rgba(0,0,0,0.25);
}


@media (min-width: 481px) {
    .ebtb2__social {
        gap: clamp(0.5rem, 2vw, 1rem);
    }
}


@media (min-width: 601px) {
    .ebtb2__container {
        width: clamp(80%, 85vw, 88%);
    }
}



@media (min-width: 1025px) {
    .ebtb2__social {
        justify-content: flex-end;
    }

    .ebtb2__item {
        width: clamp(1.2rem, 2vw, 2rem);
        height: clamp(1.2rem, 2vw, 2rem);
        font-size: clamp(1rem, 1.5vw, 1.3rem);
    }
}


@media (min-width: 1441px) {
    .ebtb2__container {
        width: clamp(70%, 75vw, 78%);
    }
}