@media (max-width: 575.98px) {
    .hero-bg {
        height: auto;
    }

    .tilt-element {
        width: 95vw;
        height: 100vh;
    }

    .overly-img {
        width: 95%;
        height: 100%;
    }

    .hero-h1 {
        font-weight: 700;
        font-size: 3rem;
    }

    .blu-bg {
        width: 230px;
    }

    .blu-div {
        bottom: 10%;
        right: -15px;
    }

    .about-h1 {
        color: black;
        font-weight: 700;
        font-size: 2.5rem;
    }

    .contact-h2 {
        color: white;
        font-weight: 700;
        font-size: 2.1rem;
    }

    .footer-bottom {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 14px;
    }
    .mob-bg{
        background:#19539f;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-bg {
        height: auto;
    }

    .tilt-element {
        width: 95vw;
        height: 100vh;
    }

    .overly-img {
        width: 95%;
        height: 100%;
    }

    .hero-h1 {
        font-weight: 700;
        font-size: 3rem;
    }

    .footer-bottom {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 14px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-bg {
        height: 35vh;
    }

    .tilt-element {
        width: 90vw;
        height: 35vh;
    }

    .overly-img {
        width: 90%;
        height: 90%;
    }

    .hero-h1 {
        font-weight: 700;
        font-size: 3rem;
    }

    .footer-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translate(-50%, 0);
        font-size: 14px;
    }

    .blu-bg {
        width: 65%;
    }

    .about-h1 {
        color: black;
        font-weight: 700;
        font-size: 3rem;
    }

    .contact-h2 {
        color: white;
        font-weight: 700;
        font-size: 2.5rem;
    }

    .blu-div {
        bottom: 10%;
        right: -10px;
    }

}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-bg {
        height: 100vh;
    }

    .tilt-element {
        width: 90vw;
        height: 80vh;
    }

    .overly-img {
        width: 80%;
        height: 100%;
    }

    .hero-h1 {
        font-weight: 700;
        font-size: 3rem;
    }

    .footer-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translate(-50%, 0);
        font-size: 14px;
    }

    .blu-bg {
        width: 360px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .hero-bg {
        height: 100vh;
    }

    .tilt-element {
        width: 90vw;
        height: 80vh;
    }

    .overly-img {
        width: 80%;
        height: 100%;
    }

    .hero-h1 {
        font-weight: 700;
        font-size: 3rem;
    }

    .blu-bg {
        width: 360px;
    }

    .about-h1 {
        color: black;
        font-weight: 700;
        font-size: 3rem;
    }

    .blu-div {
        bottom: 20%;
        right: -70px;
    }

    .contact-h2 {
        color: white;
        font-weight: 700;
        font-size: 2.5rem;
    }

    .footer-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translate(-50%, 0);
        font-size: 14px;
    }

    .content-box,
    .content-box-3 {
        transform: translateX(-70px);
    }

    .content-box-2 {
        transform: translateX(70px);
    }

    .brand-img {
        width: 800px;
    }
}

@media (min-width: 1400px) {
    .hero-bg {
        height: 100vh;
    }

    .tilt-element {
        width: 90vw;
        height: 80vh;
    }

    .overly-img {
        width: 80%;
        height: 100%;
    }

    .hero-h1 {
        font-weight: 700;
        font-size: 5rem;
    }

    .blu-bg {
        width: 380px;
    }

    .blu-div {
        bottom: 20%;
        right: -70px;
    }

    .about-h1 {
        color: black;
        font-weight: 700;
        font-size: 3rem;
    }

    .contact-h2 {
        color: white;
        font-weight: 700;
        font-size: 2.5rem;
    }

    .footer-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translate(-50%, 0);
        font-size: 14px;
    }

    .content-box,
    .content-box-3 {
        transform: translateX(-70px);
    }

    .content-box-2 {
        transform: translateX(70px);
    }
}