* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-mobile {
    /* height: 570px; */
    display: flex;
    background: #f9fafc;
    margin-top: 50px;
    /* border: 1px solid black; */
}

.sub-mobile1 {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid red; */
}

.mobile-content {
    /* width: 500px; */
    /* border: 1px solid blue; */
}

.mobile-head {
    line-height: 75px;
    /* border: 1px solid lightblue; */
}

.mobile-head h1 {
    font-size: 72px;
    font-weight: 600;
    font-family: 'Rubik', sans-serif;
    color: #231E41;
    letter-spacing: -3px;
}

.para {
    margin-top: 30px;
    width: 330px;
    color: #6F6F87;
    font-size: 15px;
    letter-spacing: 0.04em;
    line-height: 22px;
    font-family: 'Rubik', sans-serif;
    /* border: 1px solid red; */
}

.sticker-main {
    margin-top: 27px;
    display: flex;
    gap: 20px;
    /* justify-content: space-between; */
    /* width: 350px; */
    /* border: 1px solid blue; */
}

.sticker {
    /* border: 1px solid red; */
}

.sticker img {
    height: 60px;
    width: 165px;
    /* border-radius: 5px; */
}

/* --------- */
.sub-mobile2 {
    width: 50%;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    position: relative;
    /* border: 1px solid blue; */
}

.img-mobile {
    width: 100%;
    height: 500px;
    /* border: 1px solid red; */
}

.sub-mobile2 .img-mobile img {
    width: 100%;
    object-fit: contain;
    height: 100%;
    animation: mobile 3s ease-in-out infinite;
    /* border: 1px solid red; */

}

.gol1 {
    height: 80px;
    width: 80px;
    position: absolute;
    bottom: 140px;
    left: 280px;
    border-radius: 50%;
    animation: gol1 3s ease-in-out infinite;
    animation-delay: 1s;
    border: 20px solid #FFFFFF;
}

.gol2 {
    height: 20px;
    width: 20px;
    position: absolute;
    top: 200px;
    left: 100px;
    border-radius: 50%;
    animation: gol2 3s ease-in-out infinite;
    animation-delay: 1s;
    background-color: #F5C332
        /* border: 20px solid #773030; */
}

@keyframes mobile {

    0%,
    100% {
        margin-top: 0px;
    }

    50% {
        margin-top: 20px;
    }
}

@keyframes gol1 {

    0%,
    100% {
        bottom: 140px;
    }

    50% {
        bottom: 150px;
    }
}

@keyframes gol2 {

    0%,
    100% {
        transform: scale(1);
        top: 200px;
    }

    50% {
        transform: scale(1.3);
        top: 195px;
    }
}

/* --------------media query--------- */
@media(max-width:1170px) {
    .mobile-head h1 {
        font-size: 68px;
    }

    .sticker img {
        height: 60px;
        width: 160px;
    }

    .gol1 {
        height: 70px;
        width: 70px;
        left: 254px;
        bottom: 170px;
    }
}

@media(max-width:1060px) {
    .mobile-head h1 {
        font-size: 62px;
    }

    .sticker img {
        height: 60px;
        width: 155px;
    }

    .img-mobile {
        height: 480px;
    }

    .gol1 {
        height: 65px;
        width: 65px;
        left: 197px;
        border: 18px solid #FFFFFF;
        bottom: 122px !important;
    }
}

@media(max-width:1000px) {
    .mobile-head h1 {
        font-size: 56px;
    }

    .sticker-main {
        margin-top: 19px;
    }

    .sticker img {
        width: 120px;
    }

    .img-mobile {
        height: 430px;
    }
}

@media(max-width:900px) {
    .mobile-head h1 {
        font-size: 50px;
    }

    .sticker img {
        height: 60px;
        width: 120px;
    }

    .img-mobile {
        height: 400px;
    }

    .gol1 {
        height: 50px;
        width: 50px;
        left: 178px;
        bottom: 129px !important;
        border: 15px solid #FFFFFF;
    }

    .gol2 {
        height: 15px;
        width: 15px;
        top: 100px !important;
        left: 80px;
    }
}

@media(max-width:800px) {
    .main-mobile {
        flex-direction: column;
    }

    .sub-mobile1 {
        margin-top: 20px;
        width: 100%;
    }

    .sub-mobile2 {
        width: 100%;
    }

    .mobile-head h1 {
        font-size: 70px;
    }

    .sticker-main {
        margin-top: 25px;
    }

    .sticker img {
        height: 60px;
        width: 135px;
    }

    .img-mobile {
        margin-top: 20px;
        height: 450px;
    }
    .gol1 {
        height: 60px;
        width: 60px;
        left: 341px;
        bottom: 131px !important;
        border: 18px solid #FFFFFF;
    }

    .gol2 {
        height: 20px;
        width: 20px;
        top: 100px !important;
        left: 198px;
    }
}

@media(max-width:550px) {
    .mobile-head h1 {
        font-size: 60px;
    }

    .img-mobile {
        margin-top: 0px;
        height: 400px;
    }
    .gol1 {
        height: 55px;
        width: 55px;
        left: 215px;
        bottom: 109px !important;
        border: 15px solid #FFFFFF;
    }

    .gol2 {
        left: 114px;
    }
}

@media(max-width:440px) {
    .mobile-head h1 {
        font-size: 48px;
    }

    .para {
        width: 230px;
        line-height: 19px;
        margin-top: 20px;
        font-size: 13px;
    }

    .sticker-main {
        margin-top: 0px;
    }

    .sticker img {
        height: 60px;
        width: 100px;
    }

    .img-mobile {
        height: 360px;
    }
    .gol2 {
        left: 83px;
    }
    .gol1 {
        height: 50px;
        width: 50px;
        left: 189px;
        bottom: 109px !important;
        border: 12px solid #FFFFFF;
    }
}

@media(max-width:366px) {
    .mobile-head h1 {
        font-size: 45px;
    }
    .img-mobile {
        height: 300px;
    }
    .gol2 {
         height: 15px;
    width: 15px;
        left: 71px;
    }
    .gol1 {
        height: 40px;
        width: 40px;
        left: 151px;
        bottom: 89px !important;
        border: 10px solid #FFFFFF;
    }
}