/********** Template CSS **********/
:root {
    --primary: #4294E3;
    --secondary: #8F12FD;
    --light: #F0F6FF;
    --dark: #262B47;
}

.hero-header1 {
    margin-bottom: 9rem;
    padding: 6rem 0 0 0;
    background:
      
        linear-gradient(to bottom right, var(--primary), var(--secondary));
    background-position:
        left 0px top 0px,
        right 0px top 50%,
        center bottom;
    background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
    .hero-header1 {
        /* background: none; */
        padding: 6rem 0 1rem 0;
        
    }
}


/*** Screenshot ***/
.screenshot-carousel1 {
    position: relative;
    width: 253px;
    height: 500px;
    padding: 15px;
    margin-right: 30px;
}



.screenshot-carousel1 .owl-item img {
    position: relative;
    width: 223px;
    height: 470px;
}

.screenshot-carousel1 .owl-dots {
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.screenshot-carousel1 .owl-dot {
    position: relative;
    display: inline-block;
    margin: 5px 0;
    width: 15px;
    height: 15px;
    background: linear-gradient(to bottom right, var(--primary), var(--secondary));
    border-radius: 15px;
    transition: .5s;
}

.screenshot-carousel1 .owl-dot::after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    top: 5px;
    left: 5px;
    background: #FFFFFF;
    border-radius: 5px;
}

.screenshot-carousel1 .owl-dot.active {
    box-shadow: 0 0 10px var(--dark);
}


/* my single post section start here  */
.featimg{
    width: 550px;
    height: 300px;
    margin-bottom: 20px;
}

@media (max-width: 991.98px) {
    .featimg {
        /* margin: auto; */
        width: 450px;
        height: 300px;
    }
    .card_mobview {
        width: 20rem;
    }
    
}

/* my single post section finish here  */