/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 374px) {
    .screen-slider-content .features-container {
        height: 300px;
    }
}
@media (min-width: 375px) and (max-width: 576px){ 
    .screen-slider-content .features-container {
        height: 220px;
    }
}
@media (min-width: 320px) and (max-width: 576px){
    html{
        font-size: 14px;
    }

    h1{
        font-size: 2.25rem !important;
    }
    h2{
        font-size: 1.7441em;
    }
    .hero-content-left h1{
        font-size: 2.25rem;
        line-height: initial;
    }
    .mt--120 {
        margin-top: -450px !important;
    }
    .pb-100 {
        padding-bottom: 200px;
    }
    .pt-150{
      padding-top: 50px;
    }
    .action-btns.download-btn {
        margin-top: 4rem !important;
    }

    /*navbar*/
    .main-menu ul li{
        padding: 15px 0 0;
    }

    /*promo*/
    div[class*='col-']:not(:last-of-type){
        margin-bottom: 20px !important;
    }
    .row> div[class*='col-']:last-of-type{
        margin-bottom: 0;
    }
    .about-content-right{
        margin-top: 20px;
    }
    .ptm-5 {
        padding-top: 3rem !important;
    }
    #screenshots .screen-slider-content .features-container {
        padding: 1px 40px 20px !important;
    }
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 577px) and (max-width: 767px) {

    .mt--120{
        margin-top: -50px;
    }
    .pt-150{
        padding-top: 60px;
    }

    /*promo*/
    div[class*='col-']:not(:last-of-type){
        margin-bottom: 20px !important;
    }
    .row> div[class*='col-']:last-of-type{
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .gradient-overlay p.lead {
        font-size: 1em;
        padding: 0 25px;
    }
    .action-btns.download-btn.hide-xs {
        display: none !important;
    }
    .hide-sm {
        display: flex;
    }
    .owl-carousel .owl-nav .owl-next, 
    .owl-carousel .owl-nav .owl-prev {
        box-shadow: -1px 1px 10px #74747461;
    }
    .hero-section-cont {
        margin-top: -200px;
    }
    .screen-slider-content .features-container {
        margin: 0 20px;
        min-height: auto;
        padding: 1px 40px 35px !important;
        background-image: linear-gradient(to bottom, rgba(124, 75, 187), rgba(99, 59, 151));
    }
    .slider-title {
        color: #fff;
        font-weight: 600;
    }
    .screen-carousel p {
        color: #fff;
        font-weight: 500;
    }
    .copyright-text {
        font-size: 12px;
    }
    .scroll-top.open {
        bottom: 80px;
        right: 15px;
    }
}

/* All Small devices*/
@media (max-width: 768px) {
    .owl-theme .owl-dots {
        top: 30px;
        position: relative;
    }
    .triangle-left, .triangle-right {
        bottom: -1px;
    }
    .action-btns.download-btn a img {
        max-height: 50px;
    }
    .promo-new .promo-mobile {
        max-width: 90%;
    }
    .promo-new .promo-mobile.mobile-4 {
        max-width: 100%;
    }
    .owl-carousel .owl-nav .owl-prev {
        margin-left: 0px;
    }
    .owl-carousel .owl-nav .owl-next {
        margin-right: 0px;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 960px) and (max-width: 1199px) {
    .promo-new .promo-mobile {
        max-width: 240px;
    }
    .owl-carousel .owl-nav .owl-prev {
        margin-left: 0px;
    }
    .owl-carousel .owl-nav .owl-next {
        margin-right: 0px;
    }
    #screenshots .owl-carousel .owl-dots .owl-dot:nth-child(3) {
        display: none;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) and (max-width: 1600px){
    .promo-new .promo-mobile {
        max-width: 350px;
    }
    #screenshots .owl-carousel .owl-dots .owl-dot:nth-child(3) {
        display: none;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1450px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 80%;
    }
    #screenshots .owl-carousel .owl-dots .owl-dot:nth-child(3) {
        display: none;
    }
}