.pos-relative {
    position: relative;
}

.box1 {
    position: absolute;
    padding: 30px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 90%;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}

.box1 h3 {
    font-family: 'poppins-bold';
    margin-bottom: 20px;
}

.box1 h3::after {
    content: "";
    width: 5px;
    height: 35px;
    position: absolute;
    top: 25px;
    left: 20px;
    background-color: #0069FE;
}

.line {
    position: relative;
}

.line::after {
    content: "";
    width: 130px;
    height: 5px;
    position: absolute;
    bottom: 10px;
    background-color: #0069FE;
}

.line2::after {
    margin-top: 50px;
}

.mt-150 {
    margin-top: 150px;
}

.chatbox {
    position: relative;
    height: 550px;
    width: 90%;
    margin: auto;
}

.center-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.center-img img {
    width: 350px;
    border-radius: 50%;
}


.chat {
    position: absolute;
    max-width: 260px;
}

.bubble {
    background: #F1F7FF;
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 12px;
}

.bubble.blue {
    border: 1px solid #0069FE;
    z-index: 2;
}

.bubble.dark {
    background: #000;
    color: #fff;
}

.chat.left {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.chat.left img {
    width: 30px;
}

.left.top {
    top: 10%;
    left: 5%;
}

.w-app::before {
    content: '';
    background: url(https://www.streebo.com/wp-content/themes/streebo/images/atc/Case_Study_NGO_ILM_Foundation/w-app.png);
    background-size: cover;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0%;
    right: -40%;
    z-index: 10;
    transform: translate(-50%, -50%);
}

.messanger::before {
    content: '';
    background: url(https://www.streebo.com/wp-content/themes/streebo/images/atc/Case_Study_NGO_ILM_Foundation/messenger.png);
    background-size: cover;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0%;
    right: -40%;
    z-index: 10;
    transform: translate(-50%, -50%);
}

.heart-smile::before {
    content: '';
    background: url(https://www.streebo.com/wp-content/themes/streebo/images/atc/Case_Study_NGO_ILM_Foundation/heart-eyes.png);
    background-size: cover;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0%;
    right: -55%;
    z-index: 10;
    transform: translate(-50%, -50%);
}

.insta::before {
    content: '';
    background: url(https://www.streebo.com/wp-content/themes/streebo/images/atc/Case_Study_NGO_ILM_Foundation/insta.png);
    background-size: cover;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100%;
    right: -30%;
    z-index: 10;
    transform: translate(-50%, -50%);
}

.checked-1::before {
    content: '';
    background: url(https://www.streebo.com/wp-content/themes/streebo/images/atc/Case_Study_NGO_ILM_Foundation/check.png);
    background-size: cover;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100%;
    right: -40%;
    z-index: 10;
    transform: translate(-50%, -50%);
}

.left.middle {
    top: 35%;
    left: 2%;
}

.left.bottom {
    top: 65%;
    left: 6%;
}

.left .tail {
    position: absolute;
    left: 253px;
    top: 74px;
    width: 0;
    z-index: 1;
    height: 0;
    rotate: 90deg;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 15px solid #0069FE;
}

.left .tail-2 {
    left: 180px;
    top: 30px;
}

.right-2.top {
    top: 15%;
    right: 0%;
}

.right-2.middle {
    top: 45%;
    right: 0%;
}

.right-2.bottom {
    top: 68%;
    right: 4%;
}

.right-2 {
    z-index: 2;
}

.right-2 .tail {
    position: absolute;
    left: -7px;
    top: 73px;
    width: 0;
    z-index: -1;
    height: 0;
    rotate: 90deg;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 15px solid #0069FE;
}

.right-2 .tail-3 {
    top: 51px;
}

.right-2 .tail-4 {
    top: 117px;
}

.boxhover {
    display: flex;
    align-items: flex-start;
    column-gap: 20px;
}

.content h5 {
    font-family: 'poppins-bold';
    color: var(--col-black);
    margin-bottom: 10px;
}

.social-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    max-width: 900px;
    margin: auto;
}

.row {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.row .item {
    text-align: center;
}

.row2 {
    gap: 0;
}

.row .item img {
    display: block;
    margin: auto;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}

.row2 .item img {
    width: 65%;
}

.hand-img {
    z-index: 1;
    position: relative;
    padding-right: 0;
}

.bg {
    background: url(https://www.streebo.com/wp-content/themes/streebo/images/atc/Case_Study_NGO_ILM_Foundation/img4.png);
    background-size: cover;
    height: 380px;
    padding: 130px 130px;
    position: absolute;
    top: -190px;
}

.bg h3 {
    color: #fff;
    font-family: 'poppins-bold';
    line-height: 40px;
    width: 90%;
}

.mb-200 {
    margin-bottom: 200px;
}

.pt-20 {
    padding-top: 20px;
}

@media (max-width: 768px) {
    .row {
        flex-direction: column;
        align-items: center;
    }

    .row2 .item img {
        width: 100%;
    }
}

@media (min-width: 0px) and (max-width: 768px) {
    .chatbox {
        position: relative;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 20px 0;
    }

    .row2 {
        gap: 20px;
    }

    .center-img {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-bottom: 20px;
    }

    .chat {
        position: relative !important;
        max-width: 90%;
    }

    .chat.left {
        align-self: flex-start;
        display: flex;
        justify-content: flex-start;
        gap: 10px;
    }

    .chat.right-2 {
        align-self: flex-end;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .mb-200 {
        margin-bottom: 0;
    }

    .chat .tail {
        display: none;
    }

    .w-app::before,
    .messanger::before,
    .heart-smile::before,
    .insta::before,
    .checked-1::before {
        display: none;
    }

    .w-app {
        order: 1;
    }

    .insta {
        order: 2;
    }

    .messanger {
        order: 3;
    }

    .right-2.middle {
        order: 4;
    }

    .heart-smile {
        order: 5;
    }

    .checked-1 {
        order: 6;
    }

    .bg {
        background: url(https://www.streebo.com/wp-content/themes/streebo/images/atc/Case_Study_NGO_ILM_Foundation/img4.png);
        background-size: cover;
        height: 300px;
        padding: 20px;
        position: relative;
        top: 0;
    }

    .box1 {
        position: relative;
        padding: 30px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        width: 100%;
        top: 220px;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: auto;
    }

    .mt-150 {
        margin-top: 0px;
    }
}