/*
Author       : Dreamguys
Template Name: DreamsChat - HTML Mobile Template
Version      : 1.0
*/

/* Font */

@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-regular.woff2') format('woff2'),
         url('../fonts/lato-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-bold.woff2') format('woff2'),
         url('../fonts/lato-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Fredokaone';
    src: url('../fonts/fredokaone-regular.woff2') format('woff2'),
         url('../fonts/fredokaone-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* General Css*/

body {font-family: 'Lato', sans-serif;font-size: 0.875rem;font-weight: 300;color: #575757;overflow-x: hidden;background-color: #fff;}
html,body { height: 100% }
h1,h2,h3,h4,h5,h6 {color: #333;}
h1, .h1 {font-size: 2.25rem;}
h2, .h2 {font-size: 1.875rem;}
h3, .h3 {font-size: 1.5rem;}
h4, .h4 {font-size: 1.125rem;}
h5, .h5 {font-size: 0.875rem;}
h6, .h6 {font-size: 0.75rem;}
a{transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; -webkit-transition: all 300ms linear; color:#282628;outline : none;}
a:hover, a:focus{color:#650681;text-decoration:none;}
.btn-primary{background-color:#650681;border-color:#650681;}
.btn-primary:hover, .btn-primary:focus{background-color:#650681;border-color:#650681;}

/* Header */

.header {height: 60px;position: relative;z-index: 99;}
.header .top-navbar{position:fixed;width:100%;top:0;left:0;z-index:10;background-color:#fff;border-bottom:1px solid #e7e7e7;padding:.75em 0;}
.header .nav > li{text-align:center;float:left;}
.header .nav > li > a > i{padding-right:.2em;}
.header .top-navbar .top-nav > li > a,
.header .top-navbar .top-nav > li > a:hover,
.header .top-navbar .top-nav > li > a:focus{color:#fff;font-weight:600;}
.header .top-navbar .top-nav > li > a{color:#575757;padding:5px 15px;font-size:0.875rem;}
.header .top-navbar .top-nav > li > a.btn {border-radius: 500px;color: #fff;min-width: 130px;}
.header .top-navbar .top-nav > li > a:hover,
.header .top-navbar .top-nav > li > a:focus{color:#650681;background-color: transparent;border-color:#650681}
.m-b-0 {margin-bottom:0 !important;}
.logo-link {background-color: #650681;display: inline-block;padding: 5px;border-radius: 4px;}

/* Home Banner */

.home-banner {background-color: #fafaf8;position: relative;padding: 30px 0;}
.section-title h3 {font-family: fredokaone;margin:0 0 30px;}
.frame-tabs .nav-tabs {align-self: center;border: 0;flex-wrap: nowrap;margin: 0 auto 37px;width: 400px;}
.frame-tabs .nav-tabs .nav-item {margin-bottom: -1px;width: 100%;}
.frame-tabs .nav-tabs .nav-link {background-color: #fff;border-color: #dee2e6;height: 40px;text-transform: uppercase;}
.frame-tabs .nav-tabs .nav-item:first-child a {border-radius:40px 0 0 40px;}
.frame-tabs .nav-tabs .nav-item:last-child a {border-radius: 0 40px 40px 0;}
.frame-tabs .nav-tabs .nav-link.active {background-color: #650681;color: #fff;border-color:#650681;}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #650681 none repeat scroll 0 0;}
.mobile-cover .screen > iframe {height: 667px;width: 375px;}
.tablet-cover .screen > iframe {height: 576px;width: 768px;border:0;}
.marvel-device.ipad.silver:before{background:#fff}
.marvel-device.ipad.silver {background: #e7e7e7;}
.iphone-frame {background: #fff;border: 3px solid #e7e7e7;border-radius: 20px;height: auto;padding: 60px 27px;width: 300px;margin:0 auto;}
.screen-inner {background: #fff;border-radius: 1px;box-shadow: 0 0 0 3px #e7e7e7;display: block;height: 100%;overflow: hidden;position: relative;width: 100%;z-index: 3;}
.marvel-device .screen {box-shadow: 0 0 0 3px #e7e7e7;}
.preview-btn {display: none;font-weight: bold;padding: 0.775rem 0.75rem;text-transform: uppercase;}
.top-frame-tab > .nav-tabs {max-width: 700px;margin: 0 auto;padding-bottom: 28px;display: flex;display: -webkit-flex;justify-content:center;-webkit-justify-content:center;border-bottom: 0;}
.top-frame-tab > .nav-tabs > .nav-item {width: 33.33%;float: left;background-color: #fff;display: flex;display: -webkit-flex;padding: 10px;}
.top-frame-tab > .nav-tabs > .nav-item > .nav-link {border-radius: 5px;font-size: 16px;font-weight: 600;padding:20px;border-color: #e9ecef #e9ecef #dee2e6;width: 100%;}
.top-frame-tab > .nav-tabs > .nav-item > .nav-link > .item-img {max-width: 80px;margin: 0 auto;display: block;padding-bottom: 15px;width: 100%;}
.top-frame-tab > .nav-tabs > .nav-item > .nav-link > .item-img img {max-width: 100%;}
.top-frame-tab > .nav-tabs > .nav-item > .nav-link.active {background-color: #650681 ;color: #fff;border-color: #650681;}
/* Screen Section */

.screens-section {background-color: #fafaf8;border-top: 1px solid #e7e7e7;padding: 30px 0;}

/* Info Section */

.info-section {background-color: #650681;padding: 30px 0;}
.info-section .section-title h3 {color:#fff;}
.info-content p {color: #fff;font-size: 14px;margin-bottom: 40px;}

/* Our Products */

.other-products {padding: 50px 0;}
.pro-list > .pro-wrap {float:left;width: 25%;padding-left: 8px;padding-right: 8px;}
.pro-box {margin-top: 8px;margin-bottom: 8px;padding: 15px 8px 8px;text-align: center;transition:all 300ms linear;}
.pro-icon {margin-bottom: 8px;}
.pro-title h5 {color: #575757;font-size:13px; font-weight: 400;line-height: 22px;margin: 0; transition:all 300ms linear;padding:0 15px; min-height:50px;}
.pro-title h5 a {color: #575757;}
.pro-title h5 a:hover {color: #650681;}
.pros .section-title p {margin-bottom: 40px; padding:0 30px;}

/* Footer */

.footer {border-top: 1px solid #e7e7e7;padding: 10px 0;}
.footer p {margin-bottom:0;}
.copyright p {margin-top: 7px;position: relative;}
.powered-by {text-align: right;}
.powered-by img {margin-left: 10px;}

/* Responsive */

@media only screen and (max-width: 1199.98px) {
	.iphone-frame {width:285px;}
}

@media only screen and (max-width: 991.98px) {
	.marvel-device.ipad.landscape {height: 518px;width: 690px;box-sizing: border-box !important;}
	.tablet-cover .screen > iframe {height: 468px;width: 510px;}
	.pro-list > .pro-wrap {width:33.3333%;}
}

@media only screen and (max-width: 767.98px) {
	.header .navbar-header {float: left;margin-left:0;margin-right: 0;}
	.header .navbar-right {float: right;margin-left:0;margin-right: 0;}
	.footer .copyright p {margin-bottom: 20px;margin-top: 0;text-align: center;}
	.powered-by {text-align: center;}
	.marvel-device.ipad.landscape {display:none;}
	.owl-dots {display:none;}
	.frame-tabs .nav-tabs li:last-child {display:none;}
	.frame-tabs .nav-tabs .nav-item:first-child a {border-radius:40px;}
	.frame-tabs .nav-tabs {display:none;}
	.pro-list > .pro-wrap {width:50%;}
}

@media only screen and (max-width: 575.98px) {
	.pro-list > .pro-wrap {width:100%;}
}

@media only screen and (max-width: 479px) {
	.header .top-navbar .top-nav > li > a.btn {min-width: 100px;}
	.footer p {font-size: 15px;margin-bottom: 0;}
	.frame-tabs .nav-tabs {width:100%;}
	.marvel-device.iphone8 {width:285px;height:507px;box-sizing: border-box !important;}
	.mobile-cover .screen > iframe {height: 297px;width: 100%;}
	.frame-tabs, .top-frame-tab {display:none;}
	.preview-btn {display:block;}
	.view-mobile {display:none;}
	.footer p {font-size: 13px;}
}