@media (min-width:1200px) {
.container { max-width: 1170px;}
}

@media (min-width: 1200px) and (max-width: 1399px) {

}

@media (min-width: 992px) and (max-width: 1199px) {
.hero-content h1 { font-size: 40px;}
.hero-content p { font-size: 20px; padding: 0 20%;}
.basic-head h2 { font-size: 25px;}
.hero-screenshots img { height: 60vh;}

}

@media (min-width: 768px) and (max-width: 991px) {
.navbar-toggler { border: 1px solid #fff; color: #fff;}
.navbar-toggler:focus { box-shadow: none;}
.navbar .nav-item { text-align: right; margin: 0;}
.hero-content h1 { font-size: 40px;}
.hero-content p { font-size: 20px; padding: 0 10%;}
.hero-screenshots { flex-wrap: wrap;}
.hero-screenshots img { height: 60vh; margin: 10px;}
.basic-head h2 { font-size: 22px;}
.online-users ul li { width: 48%;}
.service-flow .container { padding: 0; margin: 0;}
.service-flow ul li h4 { font-size: 15px;}
.service-flow ul li p { padding: 0 10px;}
.service-flow ul li::before { left: 100px;}
.reviews ul li { width: 48%; padding: 20px;}
.reviews ul li p { font-size: 15px; min-height: auto;}
.reviews ul li span img { width: 100px;}
}

@media (max-width: 767px) {
.navbar-brand { width: 150px;}
.navbar-toggler { border: 1px solid #fff; color: #fff;}
.navbar-toggler:focus { box-shadow: none;}
.navbar .nav-item { text-align: right; margin: 0;}
.hero-sec { padding: 0 0 30px 0;}
.hero-content { padding: 20px;}
.hero-content h1 { font-size: 35px; font-weight: 700;}
.hero-content p { font-size: 17px; padding: 0 10px;}
.hero-screenshots { flex-wrap: wrap;}
.hero-screenshots img { width: 100%; height: auto; margin: 10px;}
.basic-head h2 { font-size: 25px;}
.online-users .basic-head h2 { font-size: 25px;}
.online-users .basic-head p { font-size: 17px; padding: 0 20px;}
.online-users ul li { width: 48%; padding: 10px; margin: 0 0 15px 0; border-radius: 10px;}
.online-users ul li p { padding: 0;}
.service-flow { margin: 80px 0;}
.service-flow ul { flex-wrap: wrap;}
.service-flow ul li { width: 100%; justify-content: flex-start; margin: 0 0 70px 0;}
.service-flow ul li:last-child { margin: 0;}
.service-flow ul li aside { width: 70%; padding: 0 0 0 20px;}
.service-flow ul li h4 { text-align: left; margin: 0 0 10px 0;}
.service-flow ul li p { text-align: left; padding: 0;}
.service-flow ul li::before { width: 2px; height: 100%; left: 40px; top: 60px;}
.reviews ul li { width: 98%; padding: 20px;}
.accordion .item-head h3 { padding: 10px 20px 10px 0;}
.accordion .item-head::after { top: 18px;}
.footer-links { flex-wrap: wrap;}
.footer-links a { width: 100%; border:0; border-bottom: 1px solid #ccc; padding: 5px 0;}
.footer-links a:hover { text-decoration: none;}

}

@media (min-width: 360px) and (max-width: 480px) {

}

@media (max-width: 320px){

}