/* --- Base Styles & Speech Bubbles (Universal) --- */

#bubi1 {
    transform: rotate(10deg);
    margin-right: 20px;
}

#bubi2 {
    transform: rotate(-10deg);
    margin-left: 20px;
}

#bubi1 p, #bubi2 p {
    font-size: 1.2rem !important;
    line-height: 1.8rem !important;
    color: #949590 !important;
}

.bubbleleft, .bubbleright {
    border-radius: 15px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    background: #fff;
    border: none !important;
    position: relative;
    z-index: 1;
    margin-bottom: 20px; /* Space for the tail */
}

/* Common Tail Styles (Always at the bottom) */
.bubbleleft::after, .bubbleright::before {
    content: '';
    position: absolute;
    top: 100%;             /* Anchors to bottom edge */
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fff; /* Points down */
}

/* Specific horizontal positioning for the tails */
.bubbleleft::after {
    right: 20%;
}

.bubbleright::before {
    left: 20%;
}

.kollegakpic img {
    border-bottom-left-radius: 125px;
    border-bottom-right-radius: 125px;
}

#kollegak h6 {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
}

#koll {
    width: 370px !important;
    justify-self: center;
}

/* --- Media Queries (Layout & Sizing Only) --- */

@media (max-width: 1700px) {
    #bal2, #jobb2 {
        display: none;
    }
    #bubi1, #bubi2 {
        width: 25%; /* Adjusted for better fit on large screens */
    }
}

@media (max-width: 1413px) {
    #bubi1, #bubi2 {
        width: 30%;
    }
    #kollegak {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 1200px) {
    /* Reverse rotation for mobile style */
    #bubi1 {
        transform: rotate(-5deg);
    }
    #bubi2 {
        transform: rotate(5deg);
    }
    
    #bubi1, #bubi2 {
        width: 80%;
        margin: 0 auto 40px auto !important; /* Center on small screens */
    }

    #kollegak {
        display: grid !important;
    }

    /* Adjust tail position slightly for smaller screens if needed */
    .bubbleleft::after { right: 25%; }
    .bubbleright::before { left: 25%; }

    .order1 { order: 1; }
    .order2 { order: 2; }
}