.bubble-text{
    color: white;
}


.headerImg{
    height: 1080px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../assets/img_background_desktop.jpg');
}

.bubble{
    border-radius: 50%;
    width: 120px;
}

.nav-link:hover img{
      width: 150px;
  }

.left-bubble1{
    padding-top: 5%;
    padding-left: 17%
}
.right-bubble2{
    padding-right: 23%;
    padding-top: 8%;
}

.bubble3{
    padding-top: 5%;
}

.bubblerow1{

}

.bubblerow2{

}
.bubblerow3{
}

.bubble4{
    padding-top: 8%;
    padding-left: 22%;
}

.bubble5{
    padding-right: 22%;
    padding-top: 9%;
}


.nav-link{
    transition: color 0.3s ease;
}

.bubbleRow{
    position: absolute;
    margin-top: 100px;
    top: 0;
    left: 0;
}

.bubbleRow2{
    position: absolute;
    margin-top: 200px;
    top: 0;
}

.bubbleRow3{
    position: absolute;
    margin-top: 300px;
    top: 0;
}



/* Mobile styling */

@media (max-width: 1382px){
    .headerImg{
        height: 1080px;
    }
    .bubble{
        border-radius: 50%;
        width: 100px;
    }

    .nav-link:hover img{
        width: 150px;
    }

    .left-bubble1{
        padding-top: 7.5% !important;
        padding-left: 6% !important;
    }
    .right-bubble2{
        padding-right: 15%;
        padding-top: 12%;
    }

    .bubble3{
        padding-top: 8%;
    }

    .bubblerow1{

    }

    .bubblerow2{

    }
    .bubblerow3{
    }

    .bubble4{
        padding-top: 17%;
        padding-left: 13%;
    }

    .bubble5{
        padding-right: 5%;
        padding-top: 19%;
    }

}

@media (max-width:768px){
    .right-pawprint img{
        /* right: 22px; */
}
    .left-pawprint img{
        margin-left: -15px;
    }
}

@media (max-width: 600px) {
    .nav-link:hover img{
      width: 75px;
  }
        .bubble{
        border-radius: 50%;
        width: 60px;
    }

    .left-bubble1{
        padding: 0;
        margin-left: -10%;
        margin-top: 5%;
    }
    .right-bubble2{
        padding: 0;
        margin-top: 20%;
        margin-left: 13%
    }

    .bubble3{
    padding: 0;
        /* margin-top: 11%; */
        margin-left: -2%;
    }

    .bubblerow1{
        padding: 0;
    }

    .bubblerow2{
        padding: 0;
        margin-top: 11%;
    }
    .bubblerow3{
        padding: 0;
        margin-top: 11%;
    }

    .bubble4{
        padding: 0;
        margin-right: 5%;
        margin-top: -1%;
    }

    .bubble5{
        margin-top: -12%;
    }

    .headerImg{
        width: 100vw;
        min-height: 525px;
        height: 60vh;
        /* position: relative; */
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url('../assets/img_background.jpeg');
    }
}