@media (max-width:1870px) {
    .footer-gradient {
        width: 100%
    }

    .footer-columns {
        gap: 220px
    }
}

@media (max-width:1618px) {
    .footer-gradient {
        width: 100%
    }

    .footer-columns {
        gap: 114px
    }
}

@media (max-width:1400px) {
    .gradient-border-box {
        max-width: 1000px
    }

    .gradient-border-box-inner {
        padding: 100px 86px;
        border-radius: 48px
    }

    .gradient-border-box-inner h1 {
        font-size: 86px;
        line-height: 100px
    }

    .gradient-border-box-inner a {
        font-size: 17px
    }

    .streamBottom {
        padding: 0 50px 16px
    }

    .footer-section {
        margin: 16px
    }

    .stream-video {
        width: 40%
    }
}

@media (max-width:1024px) {
    .gradient-border-box {
        margin: 24px;
        border-radius: 24px
    }

    .gradient-border-box-inner {
        padding: 50px;
        border-radius: 24px
    }

    .gradient-border-box-inner p {
        font-size: 24px;
        line-height: 40px
    }

    .gradient-border-box-inner button {
        padding: 10px 16px;
        border-radius: 12px;
        font-size: 17px;
        line-height: 19px
    }

    .bottomContent {
        display: none
    }

    .stream-video {
        width: 40%
    }

    .footer-section {
        padding: 196px 20px
    }

    .footer-gradient {
        padding: 30px
    }

    .footer-columns {
        gap: 60px
    }
}

@media (max-width:992px) {
    .gradient-border-box {
        margin: 24px;
        border-radius: 24px
    }

    .gradient-border-box-inner {
        padding: 50px 20px;
        border-radius: 24px
    }

    .gradient-border-box-inner h1 {
        font-size: 48px;
        line-height: 56px
    }

    .gradient-border-box-inner p {
        font-size: 24px;
        line-height: 32px
    }

    .gradient-border-box-inner button {
        font-size: 22px;
        padding: 12px 28px
    }

    .footer-section {
        padding: 80px 0
    }

    .footer-gradient {
        padding: 40px 24px;
        border-radius: 24px
    }

    .footer-gradient::before {
        border-radius: 24px
    }

    .stream-video {
        width: 40%
    }
}

@media (max-width:768px) {
    .section-1 {
        min-height: 780px
    }
.logoMenu img{
padding-left: 2px;
    padding-top: 14px;
    padding-bottom: 14px;
}
               

    .getInTouchWrapper {
        display: flex;
        gap: 16px
    }

    .getInTouch a {
        padding: 6px 16px
    }

    .navbar {
        display: none
    }

    .menu-icon {
        display: flex;
        align-items: center;
        color: var(--primary)
    }

    .menu-icon {
        display: flex;
        flex-direction: column;
        gap: 5px
    }

    .menuConetnt .getintouch {
        margin: 15px 0
    }

    .follow {
        margin-bottom: 28px
    }

    .install {
        padding-bottom: 0
    }

    .section-2,
    .section-3,
    .section-4 {
        margin: 144px 24px;
        border-radius: 24px
    }

    .section-2,
    .bgImg {
        position: relative;
        height: 100%
    }

    .bottomShadowImage {
        height: 393px
    }

    .streamBottom {
        align-items: center
    }

    .streamBottom {
        padding: 0 40px
    }

    .stream-video {
        width: 50%;
        top: 35%
    }

    .btnPrimary,
    .btnSecondary {
        font-size: 16px;
        padding: 10px 16px
    }

    .section-2 {
        border-radius: 40px
    }

    .StreamBottom1 {
        bottom: auto;
        top: 75%;
        transform: translateY(-50%);
        width: 100%;
        padding: 24px 16px
    }

    .streaming-heading,
    .streaming-heading span {
        font-size: 32px;
        line-height: 40px
    }

    .streaming-description {
        font-size: 16px;
        line-height: 24px;
        max-width: 350px;
        width: 100%
    }

    .discover-button {
        padding: 10px 16px
    }

    .discover-button a {
        font-size: 17px
    }

    .StreamTop2 video {
        object-position: 52% 90%;
        object-fit: none;
        width: 100%;
        height: 100%
    }

    .streaming-heading2 {
        font-size: 32px;
        line-height: 40px
    }

    .streaming-intro-wrapper {
        width: 100%;
        margin-top: 0
    }

    .streaming-intro {
        width: 100%
    }

    .footer-section {
        display: block;
        padding: 64px 0
    }

    .footer-columns {
        flex-direction: column;
        gap: 40px;
        margin-top: 32px
    }

    .footer-bottom {
        flex-direction: column;
        gap: 24px;
        margin-top: 32px
    }

    .footer-links-bottom {
        flex-direction: column;
        gap: 8px
    }

    .artVideo {
        width: 100%
    }

    .artOfSlowGradientWrapper {
        width: 100%;
        left: 0;
        bottom: 0
    }

    .artOfSlow p {
        font-size: 32px;
        line-height: 40px
    }

    .StreamBottom2 {
        padding: 0 0 24px
    }

    .videoBackground {
        z-index: unset
    }

    .shadowUpper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 2;
        height: 200px
    }

    .header {
        position: fixed;
        top: 0;
        padding: 24px 6px 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 9
    }

    .app-buttons {
        flex-direction: row
    }

    .StreamTop2 .container {
        padding: 0 16px
    }
}

@media (max-width:500px) {
    .footer-columns {
        padding: 0
    }

    .footerBottom {
        gap: 12px;
        flex-direction: column
    }

    .stream-video {
        width: 75%;
        top: 35%
    }
}

@media (max-width:480px) {
    .bgImageOnly video {
        max-width: 313px
    }

    .footer-gradient {
        padding: 24px 15px 30px
    }

    .streamBottom {
        padding: 0 16px
    }

    .stream-video {
        width: 85%
    }

    .stream-bg-mobile {
        display: block;
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .section-2,
    .section-3,
    .section-4 {
        margin: 144px 14px;
        border-radius: 24px
    }
}

@media (max-width:420px) {
    .StreamTop2 video {
        object-position: 53% 103%
    }
}

@media (max-width:400px) {
    .StreamTop2 video {
        object-position: 53% 102%
    }

    .stream-video {
        top: 25%
    }

    .StreamBottom1 {
        top: 70%
    }
}

@media (max-width:320px) {
    .bgImageOnly video {
        max-width: 280px
    }
}