.ced-header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-color: transparent
}

.minicart-active .ced-header {
    position: absolute;
    z-index: 99;
}

/* Banner start  */
.banner-section {
    z-index: 1;
    overflow: hidden;
    background-image: url(/wp-content/uploads/2024/03/shopify-bannner.png);
    background-repeat: no-repeat;
    background-position: top center;
}

.banner-section::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(10, 10, 10, 1) 50%, rgba(10, 10, 10, 1) 50%);
}

.banner-section .img-sec video {
    width: 100%;
    height: 100%;
}

.left-bottom-gradient {
    position: absolute;
    height: 40%;
    background-image: url(/wp-content/uploads/2024/02/bgg-homees.png);
    background-repeat: no-repeat;
    background-size: 45% 120%;
    animation: gradient1 10s ease-in-out infinite;
    animation-direction: alternate;
}

.banner-section::after {
    content: '';
    position: absolute;
    background-image: linear-gradient(180deg, rgba(102, 237, 120, 1) 0%, var(--ced-blue-60) 84%);
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: -1;
    border-radius: 50%;
}

/* Banner Responsisve start  */

@media screen and (min-width: 1400px) {
    .banner-section h1 {
        font-size: 65px;
        line-height: 80px;
    }

    .gradient-video-shopify {
        top: -140px;
    }

    .animation-banner-shopify::before {
        left: -50%;
        background-size: contain;
    }

    .banner-section::after {
        width: 1300px;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .banner-section h1 {
        font-size: 54px;
        line-height: 68px;
    }

    .banner-section::after {
        width: 1000px;
    }

    .banner-section .img-sec {
        max-width: 95%;
        margin: auto;
    }

    .animation-banner-shopify::before {
        left: -35%;
        background-size: 330px;
    }
}

@media screen and (min-width: 1200px) {
    .banner-section p {
        font-size: 18px;
        line-height: 34px;
    }

    .animation-banner-shopify::after {
        right: -70%;
        background-size: 380px;
    }

    .animation-banner-shopify::before {
        top: -240px;
    }

    .banner-section::after {
        filter: blur(100px);
        height: 600px;
    }
}

@media screen and (min-width: 576px) and (max-width: 1199px) {
    .banner-section p {
        line-height: 30px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .banner-section h1 {
        font-size: 45px;
        line-height: 60px;
    }

    .animation-banner-shopify::before {
        left: -30%;
        background-size: 290px;
        top: -210px;
    }

    .banner-section::after {
        filter: blur(70px);
        height: 480px;
        width: 800px;
    }

    .animation-banner-shopify::after {
        right: -55%;
        background-size: 300px;
    }
}

@media screen and (min-width: 992px) {

    .banner-content {
        max-width: 85%;
    }

    .banner-section #gradient-canvas {
        height: 60%;
    }

    .banner-section {
        padding: 240px 0px 100px;
    }

    .banner-section .img-sec video {
        margin-top: 90px;
    }

    .banner-section .img-sec video {
        border-radius: 22px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .banner-section h1 {
        font-size: 40px;
        line-height: 55px;
    }

    .banner-section {
        padding: 240px 0px 80px;
    }

    .banner-section #gradient-canvas {
        height: 60%;
        width: 60%;
    }

    .banner-section .img-sec video {
        margin-top: 70px;
    }

    .banner-section .img-sec video {
        border-radius: 18px;
    }

    .banner-section #gradient-canvas {
        height: 100vh;
        width: 150%;
        left: -50%;
    }

    .animation-banner-shopify::before {
        left: -10%;
        top: -160px;
        background-size: 240px;
    }

    .animation-banner-shopify::after {
        right: -50%;
        background-size: 270px;
    }

    .banner-section::after {
        height: 360px;
        filter: blur(60px);
        width: 650px;
    }

}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .banner-section h1 {
        font-size: 32px;
        line-height: 42px;
    }

    .banner-section #gradient-canvas {
        height: 100vh;
        width: 100%;
        left: 0%;
    }

    .left-bottom-gradient {
        width: 550px;
    }

    .animation-banner-shopify::before {
        left: 2%;
        top: -100px;
        background-size: 170px;
    }

    .animation-banner-shopify::after {
        right: -43%;
        background-size: 210px;
    }

    .banner-section::after {
        height: 280px;
        width: 450px;
    }
}

@media screen and (min-width: 768px) {
    .banner-section h1 span {
        padding: 0px 15px;
    }

    .left-bottom-gradient {
        width: 570px;
    }

    .banner-section::after {
        top: 380px;
    }
}

@media screen and (max-width: 767px) {
    .banner-section h1 span {
        padding: 0px 10px;
    }

    .banner-section {
        padding: 140px 0px 110px;
    }

    .banner-section .img-sec video {
        margin-top: 50px;
    }

    .banner-section .img-sec video {
        border-radius: 15px;
    }

    .banner-section::after {
        top: 340px;
        filter: blur(70px);
    }
}

@media screen and (min-width:576px) {
    .animation-banner-shopify {
        position: absolute;
        width: 830px;
        height: 685px;
        left: 50%;
        top: 380px;
        transform: translate(-50%, 0%);
        z-index: -1;
    }

    .animation-banner-shopify::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url(/wp-content/uploads/2024/03/left.png);
        background-repeat: no-repeat;
    }

    .animation-banner-shopify::after {
        content: '';
        position: absolute;
        top: -380px;
        width: 570px;
        height: 100%;
        background-image: url(/wp-content/uploads/2024/03/right.png);
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 575px) {
    .banner-section {
        background-size: 650px;
    }

    .banner-section h1 {
        font-size: 28px;
        line-height: 36px;
    }

    .banner-section p {
        line-height: 26px;
        font-size: 15px;
    }

    .animation-banner-shopify::before {
        left: 110px;
        top: -160px;
        background-size: 140px;
    }

    .animation-banner-shopify::after {
        right: -300px;
        background-size: 180px;
    }

    .banner-section::after {
        height: 250px;
        width: 300px;
    }
}