@media (min-width: 320px) and (max-width:768px) {

    .section-padding{
       padding:40px 0!important;
   }

   html,body{
    overflow-x: hidden;
}

.darkmode--activated .section-padding{
    background: #000!important;
}

hr{
    display: none;
}

   .darkmode--activated .menu-bar{
            margin-top: -7px!important;
        }


.my-chart h3{
    font-size: 23px!important;
}

.banner, header{
  background: #000!important;
}

.ban-content {
    text-align: center;
    margin-bottom: 40px;
}


.w-60{
  width: 100%!important;
}


.my-account{
    background:transparent!important;
}


header .logo img{
	width: 120px;
}

.my-mob {
    width: 100px;
    position: absolute;
    top: -30px;
    right: 50px;
}

.darkmode-toggle, .darkmode-layer--button {
    z-index: 1033;
    top: 38px!important;
    right: 40%!important;
    background: #000!important;
    height: 20px!important;
    width: 20px!important;
}

.first-content h3, .first-content p{
	text-align: center;
}

.first-content .media p{
	text-align: left;
}

.chart .first, .chart .second, .chart .thirld, .chart .fourth, .chart .fifth {
    position: absolute;
    width: 300px;
    left: -60%!important;
}

.chart .thirld {
    bottom: 24%!important;
    right: 65%;
}

.chart .first {
    left: 67%;
    top: 15%!important;
}

.chart .fifth {
    top: 27%!important;
    left: 50%;
}

.chart .fourth {
    bottom: 40%!important;
    right: 60%;
}
.counter-section {
    padding: 25px!important;
    width: 100%!important;
}

.my-blog .content {
    text-align: center;
}

footer{
	text-align: center;
}
.ps-timeline-sec .container ol.ps-timeline li span {
    width: 20px!important;
    height: 20px!important;
    border: 4px solid #858382!important;
    top: -10px!important;
}

.pie-chart{
    margin-left: 40%!important;
}


.ps-timeline-sec .container ol.ps-timeline{
    height: auto!important;
    background: #000!important;
}

.ps-timeline-sec .container ol.ps-timeline li{
    height: 145px!important;
}

.ps-timeline-sec .container ol.ps-timeline li{
    width: 100%!important;
}

.ps-timeline-sec .container ol.ps-timeline::after{
    display: none;
}

.ps-timeline-sec{
    background: transparent!important;
}

.ps-timeline-sec .container ol.ps-timeline li span{
    margin-left: -10px!important;
}

.our-team .team-content .name{
    font-size: 14px;
}

.icon {
    padding: 7px!important;
}

/*-----------------login details----------------------------*/

.ban-content h3{
    font-size: 30px!important;
}

.progress-circle{
    margin: 30px!important;
}

.animateddrawer{
    top: 35px!important;
}

}

@media (min-width: 575px) and (max-width:992px) {

    li.d-inline-block.my-search {
        margin-top: 30px;
        margin-right: -75px;
    }

}


@media (min-width: 575px) and (max-width:1024px) {

    .ddsmoothmenu ul li a{
        padding: 8px;
    }

    .banner{
        padding:50px 0!important;
        margin-top: 50px;
    }

    .my-chart h3{
        left: 27%;
    }

    .copyright a {
        font-size: 12px;
        margin: 0 5px;
    }

    .blog-bg .content h5{
        font-size: 16px;
    }

    footer .section-heading{
        font-size: 20px!important;
    }

    .our-team .team-content .name{
        font-size: 14px;
    }

    .icon {
        padding: 7px!important;
    }


/*.banner {
    margin-top: 72px!important;
    padding-top: 20px;
    }*/

    .progress-circle{
        margin:-8px!important;
    }

    .ban-content h3,.ban-content-right h3 {
        font-size: 30px!important;
    }

    .ban-content-right p{
        font-size: 14px!important;
        margin:30px 0!important;
    }

    .darkmode-toggle{
        right: 15%!important;
    }
}