@font-face {
  font-family: SofiaPro-Bold;
  src: url('../fonts/Sofia-Pro-Bold.otf');
}
@font-face {
    font-family: SofiaPro-Medium;
    src: url('../fonts/Sofia-Pro-Medium.otf');
  }
@font-face {
    font-family: SFPro-Regular;
    src: url('../fonts/SF-Pro-Text-Regular.otf');
}
@font-face {
    font-family: SFPro-Medium;
    src: url('../fonts/SF-Pro-Text-Medium.otf');
}
.container { 
    max-width: 1400px; 
} 
body {
    font-family: SFPro-Regular;
    background-color: #27262d;
    color: #a6a6ad;
}
.nav-link {
    color: #FFF;
    transition: .5s all;   
}
.nav-link:hover {
    color: #ff5172;
    transition: .5s all;   
}
.navbar-nav > li{
    padding-left:20px;
    padding-right:20px;
}
.nav-link.active {
    color: #ff5172;
}

section.welcome {
    height: 750px;
    background-image: url('../images/primary-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
}

section.welcome h1 {
    margin-top: 250px;
    font-size: 68px;
    font-family: SofiaPro-Bold;
    color: #fff;
}
.get-app-section {
    display: block;
    margin-top: 40px;
}
.top-stats-row {
    margin-top: 200px;
}
.top-stats {
    margin: 0 auto;
    width: 75%;
    display: flex;
    flex-direction: row;
    height: 112px;
    padding: 35px;
    border-radius: 10px;
    background: rgb(46,45,53);
    background: linear-gradient(173deg, rgba(46,45,53,1) 0%, rgba(35,34,41,1) 100%);
    -webkit-box-shadow: 0px 10px 42px 18px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 10px 42px 18px rgba(0,0,0,0.1);
    box-shadow: 0px 10px 42px 18px rgba(0,0,0,0.1);
}
.top-stats-icon {
    width: 30%;
}
.top-stats-text {
    align-self: center;
    display: flex;
    flex-direction: column;
}
.top-stats strong {
    color: #FFF;
    font-family: SofiaPro-Bold;
    font-size: 30px;
    display: block;
}
.top-stats-text span {
    margin-top: -5px;
    color: rgba(255,255,255,0.6);
}
section.features {
    padding-top: 140px;
    padding-bottom: 100px;
}
section.features .intro-section {
    padding-top: 110px;
    padding-bottom: 50px;
}
section.features h2 {
    font-family: SofiaPro-Bold;
    font-size: 48px;
    color: #ff5172;
}
section.features p {
    font-family: SFPro-Regular;
    font-size: 16px;
    color: #a6a6ad;
}

/* Phone Screenshots */
.phone1 {
    margin: 0 auto;
    width: 326px;
    height: 520px;
    background-image: url('../images/section1.png');
    background-repeat: no-repeat;
    background-size: initial;
}
.phone2 {
    margin: 0 auto;
    width: 322px;
    height: 472px;
    background-image: url('../images/section2.png');
    background-repeat: no-repeat;
    background-size: initial;
}
.phone3 {
    margin: 0 auto;
    width: 331px;
    height: 498px;
    background-image: url('../images/section3.png');
    background-repeat: no-repeat;
    background-size: initial;
}


section.how-it-works {
    padding-top: 10px;
    padding-bottom: 50px;
}
section.how-it-works h1 {
    font-family: SofiaPro-Bold;
    font-size: 62px;
    color: #FFF;
    margin-bottom: 60px;
}
section.how-it-works b {
    padding-top: 40px;
    display: block;
    text-align: center;
    color: #FFF;
    font-family: SofiaPro-Bold;
    font-size: 26px;
}
section.how-it-works p {
    padding-top: 10px;
    width: 90%;
    margin:0 auto;
    text-align: center;
    color: #a6a6ad;
    font-size: 16px;
    font-family: SFPro-Regular;
}
section.how-it-works .step1 {
    margin: 0 auto;
    width: 149px;
    height: 149px;
    background-image: url('../images/step1.png');
    background-repeat: no-repeat;
    background-size: initial;
}
section.how-it-works .step2 {
    margin: 0 auto;
    width: 149px;
    height: 149px;
    background-image: url('../images/step2.png');
    background-repeat: no-repeat;
    background-size: initial;
}
section.how-it-works .step3 {
    margin: 0 auto;
    width: 149px;
    height: 149px;
    background-image: url('../images/step3.png');
    background-repeat: no-repeat;
    background-size: initial;
}
section.download-app {
    height: 661px;
    width: 100%;
    background-image: url('../images/bottom-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}
section.download-app h1 {
    font-family: SofiaPro-Bold;
    font-size: 48px;
    color: #FFF;
    margin-top: 80px;
}
#about-app {
    padding-top: 40px;
    padding-bottom: 90px;
}
#about-app h1 {
    padding-top: 50px;
    text-align: center;
    font-family: SofiaPro-Bold;
    font-size: 48px;
    color: #FFF;
    margin-bottom: 60px;
}
#about-app p {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-family: SFPro-Regular;
    font-size: 16px;
    color: #a6a6ad;
    margin-bottom: 30px;
}
section.testimonials {
    padding-top: 20px;
    padding-bottom: 120px;
}
section.testimonials h1 {
    font-family: SofiaPro-Bold;
    font-size: 48px;
    color: #FFF;
    margin-bottom: 60px;
}
section.testimonials .testimonial-top {
    position: absolute;
    top: -15px;
}
section.testimonials .testimonial-block {
    width: 80%;
    margin: 0 auto;
    font-family: SFPro-Regular;
    font-size: 16px;
    color: #a6a6ad;
    border-radius: 10px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 30px;
    padding-bottom: 40px;
    background: rgb(53,52,60);
    background: linear-gradient(170deg, rgba(53,52,60,1) 0%, rgba(39,38,45,1) 100%);
    -webkit-box-shadow: 0px 10px 42px 18px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 10px 42px 18px rgba(0,0,0,0.1);
    box-shadow: 0px 10px 42px 18px rgba(0,0,0,0.1);
}
section.testimonials .testimonial-block .user-info {
    justify-content: flex-end;
    margin-top: 40px;
    align-items: center;
    font-family: SofiaPro-Medium;
    font-size: 18px;
    color: #d7d7da;
}
section.testimonials .testimonial-block p {
    height: 180px;
    display: flex;
}
section.testimonials .testimonial-block .user-info span {
    margin-left: 15px;
}
footer {
    padding-top: 40px;
    padding-bottom: 60px;
    background: rgb(42,40,48);
    background: linear-gradient(170deg, rgba(42,40,48,1) 0%, rgba(39,38,45,1) 100%);
}
.footer-center {
    align-self: center;
}
/* footer .left-element {
    margin-top: -39px;
    position: absolute;
    width: 100%;
    height: 500px;
    background-image: url('../images/footer-abstract.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
} */
footer h2 {
    font-family: SofiaPro-Bold;
    font-size: 48px;
    color: #FFF;
    margin-bottom: 40px;
}
footer p {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-family: SFPro-Regular;
    font-size: 16px;
    color: #a6a6ad;
    margin-bottom: 30px;
}
footer hr.footer-line { 
    margin-top: 60px;
    margin-bottom: 40px;
    border-top: 1px solid rgb(255 255 255 / 10%);
}
footer .social-media {
    display: inline-block;
}
footer .social-media a {
    text-decoration: none!important;
}
footer .social-media a:hover, footer .social-media a:focus {
    text-decoration: none!important;
}
.social-icon > svg {
    padding-right: 25px;
    width: auto;
    height: 20px;
}
.social-icon > svg > path {
    fill: #acacb8;
    transition: .5s all;   
}

.social-icon > svg:hover > path {
    fill: #ff5172;
    transition: .5s all;   
}
footer .footer-copy {
    font-size: 18px;
    font-family: SofiaPro-Bold;
    color: rgba(255,255,255,0.8);
    padding-top: 80px;
}
.footer-menu {
    text-align: right;
}
.footer-link {
    margin-left: 50px;
    color: #acacb8;
    transition: .5s all;
}
.footer-link:hover {
    text-decoration: none;
    color: #ff5172;
    transition: .5s all;
}



/* Landing icons */
.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}
.apple-icon {
    width: 26px;
    height: 30px;
    background-image: url('../images/apple-icon.png');
}
.play-icon {
    width: 46px;
    height: 31px;
    background-image: url('../images/play.png');
}
.chat-icon {
    width:41px;
    height:41px;
    background-image: url('../images/chat.png');
}
.users-icon {
    width:51px;
    height:36px;
    background-image: url('../images/users.png');
}
.testimonial-icon {
    width: 39px;
    height: 28px;
    background-image: url('../images/testimonial.png');
}

/* Illustrations */
.show-setup {
    width: 100%;
    height: 186px;
    background-image: url('../images/setup.png');
    background-repeat:no-repeat;
    background-size: contain;
}
.show-meet {
    width: 100%;
    height: 139px;
    background-image: url('../images/meet.png');
    background-repeat:no-repeat;
    background-size: contain;
}
.show-secure {
    width: 100%;
    height: 171px;
    background-image: url('../images/secure.png');
    background-repeat:no-repeat;
    background-size: contain;
}

/* Utils */
.mt-40 {
    margin-top: 40px;
}
.duration1 {
    animation-duration: 0.8s;
}
.duration2 {
    animation-duration: 1.2s;
}
.duration3 {
    animation-duration: 1.6s;
}
.slider-photos {
    margin-top: 30px;
}
.points-left {
    left: -90%;
    top: 40px;
    position: absolute;
    width: 317px;
    height: 36px;
    background-image: url('../images/points-left.png');
    background-repeat: no-repeat;
    background-size: contain;
}
.points-right {
    left: -90%;
    top: 60px;
    position: absolute;
    width: 317px;
    height: 36px;
    background-image: url('../images/points-right.png');
    background-repeat: no-repeat;
    background-size: contain;
}
#video-bg {
    display: none;
    width: 100%;
    position: absolute;
    top: 0;
    overflow: hidden;
}
@media screen and (max-width: 1200px) {
    .top-stats {
        width: 80%;
    }
}
@media screen and (max-width: 1100px) {
    .top-stats {
        width: 80%;
    }
    .top-stats-row { margin-top: 100px; }
}
@media screen and (max-width: 990px) {
    section.welcome h1 {
        font-size: 48px;
        margin-top: 180px;
    }
    section.welcome { height: 540px; background-image: none}
    #video-bg, #video-bg .overlay { display: block; }
    .features-block { width: 80%; margin: 0 auto; }
    section.how-it-works p { width: 70%;}
    .show-setup, .show-meet, .show-secure { margin-top: 30px }
    section.how-it-works .step2, section.how-it-works .step3 { margin:0 auto; margin-top: 80px!important;}
    .top-stats-row { margin-top: 320px; }
    .top-stats { margin-bottom: 40px; }
    section.features { margin-top: 530px;}
    section.download-app { background-size: cover!important }
    .testimonial-block { margin:0 auto; margin-top: 60px!important }
    .footer-menu { margin-top: 50px!important; text-align: left!important}
    .footer-link { margin-left:0px!important; margin-right: 20px;!important }
}
@media screen and (max-width: 700px) {
    section.welcome h1 {
        margin-top: 180px;
    }
    section.features .intro-section {
        padding-top: 60px;
        padding-bottom: 10px;
    }
    .footer-center { margin-top: 40px; text-align: left!important }
}
@media screen and (max-width: 530px) {
    .top-stats-row {
        margin-top: 280px;
    }
}
@media screen and (max-width: 400px) {
    section.welcome h1 {
        font-size: 42px;
    }
    .top-stats-row { margin-top: 200px; }
    .phone1 { 
        width: 100%;
        height: 427px;
        background-size: cover!important;
    }
    .phone3 {
        width: 100%;
        height: 390px;
        background-size: cover!important;
    }
}

*:focus {
	outline: none
}
a {
	color: inherit;
	cursor: pointer;
	text-decoration: none
}
.nav-toggle {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor: pointer;
	height: 2rem;
	right: 2.5rem;
	position: fixed;
	top: 1rem;
	width: 2.2rem;
	z-index: 2
}

.nav-toggle:hover {
	opacity: .8
}

.nav-mobile-logo {
    position: absolute;
    top: 0px;
    width: 40px;
}

.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	background: #fff;
	content: '';
    height: 0.3rem;
    border-radius: 5px;
    width: 110%;
	/* height: .2rem;
	width: 100% */
}

.nav-toggle .nav-toggle-bar {
	margin-top: 0
}

.nav-toggle .nav-toggle-bar::after {
	margin-top: .8rem
}

.nav-toggle .nav-toggle-bar::before {
	margin-top: -.8rem
}

.nav-toggle.expanded .nav-toggle-bar {
	background: 0 0
}

.nav-toggle.expanded .nav-toggle-bar::after,
.nav-toggle.expanded .nav-toggle-bar::before {
	background: #fff;
	margin-top: 0
}

.nav-toggle.expanded .nav-toggle-bar::after {
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg)
}

.nav-toggle.expanded .nav-toggle-bar::before {
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.mobile-nav {
	-webkit-transition: right .5s ease;
	-moz-transition: right .5s ease;
	-ms-transition: right .5s ease;
	-o-transition: right .5s ease;
	transition: right .5s ease;
	background: #27262d;
    border-left: 1px solid #413f4b;
	color: #fff;
	cursor: pointer;
	font-size: 2rem;
	height: 100vh;
	right: -20rem;
	padding: 6rem 2rem 2rem;
	position: fixed;
	top: 0;
	width: 20rem;
	z-index: 1
}
.mobile-nav.expanded {
	right: 0
}
.mobile-nav ul {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	list-style: none;
	margin: 0;
	padding: 0
}
.mobile-nav li {
    font-family: SofiaPro-Bold;
    font-size: 24px;
    margin-bottom: 15px;
}
.mobile-nav a {
    transition: .5s all;
}
.mobile-nav a:hover, .mobile-nav a:focus {
    text-decoration: none;
    color: #ff5172;
}


/* Other pages */
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #ff5172!important;
}
#more-screenshots {
    padding-top: 60px;
    padding-bottom: 90px;
}
#more-screenshots h1 {
    padding-top: 50px;
    text-align: center;
    font-family: SofiaPro-Bold;
    font-size: 48px;
    color: #FFF;
    margin-bottom: 60px;
}
#more-screenshots .app-ss {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
}
.page-header h1 {
    margin-top: 180px;
    font-size: 68px;
    font-family: SofiaPro-Bold;
    color: #fff;
}
.support {
    background-image:
    linear-gradient(to bottom, rgba(39, 38, 45, 0.52), rgba(39, 38, 45, 1)),
    url('../images/support.jpg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    height: 480px;
}
.privacy {
    background-image:
    linear-gradient(to bottom, rgba(39, 38, 45, 0.52), rgba(39, 38, 45, 1)),
    url('../images/privacy.jpg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    height: 480px;
}
section.privacy-policy, section.faq-list {
    padding-top: 80px;
    padding-bottom: 100px;
}
section.privacy-policy h5 {
    padding-top: 40px;
    font-family: SofiaPro-Bold;
    font-size: 32px;
    color: #fff;
}
section.faq-list h2 {
    padding-top: 50px;
    font-family: SofiaPro-Bold;
    font-size: 32px;
    color: #ff5172;
}
section.privacy-policy p, section.faq-list p {
    font-family: SFPro-Regular;
    font-size: 16px;
    color: #a6a6ad;
}