body {
    overflow-x: hidden;
}

/* For specific sections if needed */
.footer-main {
    overflow-x: hidden;
    width: 100%;
}

/* Optional: Set max-width to ensure the content doesn't exceed the viewport */
.footer-main {
    max-width: 100%;
    box-sizing: border-box;
}

/* Optional: Ensure containers don’t overflow on mobile */
@media only screen and (max-width: 768px) {
    .footer-main {
        overflow-x: hidden;
    }
}


@media only screen and (max-width: 750px){
.loopvideo.elementor-widget-video .elementor-wrapper video {
    height:1000px;
    width: 100%;
}
}
@media only screen and (max-width: 450px){
.loopvideo.elementor-widget-video .elementor-wrapper video {
    height:500px;
    width: 100%;
}
}
/*video srolling css*/
#scroll-video {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 20vw; /* Initial small size */
    height: auto;
    border-radius: 460px; /* Initial border-radius */
    transition: all 0.4s ease-in-out; /* Smooth transition */
    z-index: 30;
    opacity: 1;
    /*align-self: flex-end*/
}

@media (max-width: 768px) {
    #scroll-video {
        /*bottom:22%;*/
        width: 50vw; /* Mobile pe initial size ko 50vw tak rakhenge */
        height: auto;
        display: block !important; /* Mobile par hide nahi karenge */
    }
    #section-1.lock-scroll {
    width: 100%;
    height: auto;
    overflow: hidden;
    z-index: 20;
}
}

#section-1.lock-scroll {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    z-index: 20;
}

#section-1.unlock-scroll {
    position: relative;
    overflow: visible;
}

#section-2 {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    padding-top: 140px;
}
/*second section*/
#section-2 {
    position: relative;
    min-height: 100vh;
    padding-top: 100px;
}
.loopvideo.elementor-widget-video .elementor-wrapper video {
    background-color: #00000000;
    border: none;
    display: block;
    height: 600px;
    width: 70%;
    border-radius: 20px;
}
/*left-scrolling */
.left-scroll-animate,
.right-scroll-animate {
  transition: transform 0.4s ease-out, border-radius 0.4s ease-out;
  transform-origin: top left;
  border-radius: 0;
  will-change: transform, border-radius;
}
.left-scroll-animate.shrunk,
.right-scroll-animate.shrunk {
  border-radius: 32px;
}
/**/
