@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i");
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&display=swap');

:root
{
	--font-heading: 'Montserrat', sans-serif;
	--font-body: 'Roboto', sans-serif;

    --brand-green: #79CABB;

    --brand-green-tint1: #E6FAEE;
    --brand-green-fluro: #74E4A0;

    --brand-green-shade1: #50B6AF;
    --brand-green-shade2: #3B9799;
    --brand-green-shade3: #00656D;

    --grey-A: #162733;
    --grey-B: #3B4559;
    --grey-C: #718397;
    --grey-D: #8FA3B8;
    --grey-E: #B6C4D7;
    --grey-F: #D5E1F0;
    --grey-G: #F7FBFC;
    --grey-H: #F1F6FC;

    --link-blue: #03BAE2;
}


body
{
  background: #fff;
  margin: 0;
}

*
{
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
  box-sizing: border-box;
  color: #718397;
}

img
{
  max-width: 100%;
}

.row
{
	margin-right: 0px !important;
    margin-left: 0px !important;
}

html
{
	max-width: 1920px;
	margin: 0 auto;
}

.mob-off
{
	display: none;
}



h1, .h1, 
h2, .h2, 
h3, .h3, 
h4, .h4, 
h5, .h5, 
h6, .h6,
p, .p,
.page li
{
    margin-block-start: 0em !important;
    margin-block-end: 0em !important;
    margin-inline-start: 0px !important;
    margin-inline-end: 0px !important;
    margin-bottom: 12px !important;
}



h1, .h1, 
h2, .h2, 
h3, .h3, 
h4, .h4
{
	font-family: var(--font-heading) !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
}

h1, .h1, 
h3, .h3,
h5, .h5
{
	color: var(--brand-green) !important;
	line-height: 1.4 !important;
}

h2, .h2, 
h4, .h4, 
h6, .h6 
{
	color: var(--grey-C) !important;
}


h6, .h6, 
p,
li
{
	font-size: 15px !important;
	font-family: var(--font-body) !important;
	line-height: 1.6 !important;
	color: var(--grey-D) !important;
	font-weight: 400 !important;
}

.p-small
{
	font-size: 13px !important;
}

ul
{
	padding-left: 20px !important;
}

h1
{
	font-size: 48px !important;
}

h2
{
	font-size: 40px !important;
}

h3
{
	font-size: 34px !important;
}

h4
{
	font-size: 22px !important;
}

h5
{
	font-size: 18px !important;
}

h6
{
	font-size: 17px !important;
}


.logo img
{
	width: 125px;
	height: auto;
}



.content-container
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1250px;
  margin: 0 auto;
}

.feature-col
{
  width: 48%;
}

@media only screen and (max-width: 800px) {
  .content-container
  {
    flex-direction: column;
  }
  .feature-col
  {
    width: 100%;
    margin: 0px;
  }
}

.feature-col img
{
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06),
              0px 0px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  background: #fff;
}

.feature-content
{
  padding: 20px;
  max-width: 80%;
}

@media only screen and (max-width: 800px) {
  .feature-col img
  {
    padding: 10px;
  }
  .feature-content
  {
    padding: 0px 0px 20px 0px;
    max-width: 100%;
  }
}

.feature-col.feature-full-width
{
  min-width: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding-bottom: 40px;
}
.feature-col.feature-full-width.feature-full-width-switch
{
  flex-direction: row;
}


.feature-col.feature-full-width .feature-content
{
  max-width: 30%;
}

@media only screen and (max-width: 800px) {
  .feature-col.feature-full-width
  {
    flex-direction: column;
    padding-bottom: 0px;
  }
  .feature-col.feature-full-width.feature-full-width-switch
  {
    flex-direction: column;
    padding-bottom: 0px;
  }
  .feature-full-width.feature-full-width-switch-mobile
  {
    flex-direction: column-reverse;
  }  
  .feature-col.feature-full-width .feature-content
  {
    max-width: 100%;
  }
}

.feature-content .title
{
  font-size: 26px;
  font-weight: bold;
  color: #50b6af;
}



/* -- ACCORDION STYLES -------------------------------------*/


#accordion-1 .card
{
	border: 0px solid #000 !important;
}

.card-header
{
	background-color: #fff !important;
	border: 1px solid var(--grey-F) !important;
	border-radius: 8px !important;
	margin-bottom: 12px !important;
	transition: ease 0.2s;
}

.card-header:hover
{
	border: 1px solid var(--brand-green-fluro) !important;
	transition: ease 0.2s;
}

.card-header h5 a
{
	color: var(--brand-green) !important;
}

.card-header h5
{
	display: inline-block;
}

.accordion-arrow
{
	float: right;
	width: 20px;
	transform: rotate(90deg);
	display: inline-block;margin-top: 4px;
	opacity: 0.2;
}





/* -- FORM STYLES -------------------------------------*/

input.form-control
{
	height: 60px !important;
}

.form-control:focus
{
	border-color: var(--brand-green-fluro) !important;
	box-shadow: 0 0 0 0.2rem rgba(4, 219, 127, 0.25) !important;
}

.form-group .button-primary
{
	padding: 16px;
	border-radius: 6px;
	transition: ease 0.2s;
}




/* -- CONNECTORS STYLES -------------------------------------*/

.connector-hero
{
	margin: -120px 0 60px 0;
}

.connector-hero img
{
	border-radius: 6px;
	box-shadow: 0px 12px 22px rgba(0, 0, 0, 0.2);
	width: 38%;
	display: inline-block;
	z-index: 1;
	position: relative;
	transition: ease .4s;
	background: #fff;
}


.connector-hero img:hover
{
	transform: scale(1.2);
	z-index: 42;
}

.connector-line-hero
{
	width: 80%;
	margin: -60px auto 0 auto;
}

.connector-hero .xero
{
	margin-right: -12%;
}

.connector-hero .magnifi
{
	transform: scale(1.1);
	z-index: 2;	
}

.connector-hero .zoho
{
	margin-left: -12%;
}


	
@media only screen and (max-width: 900px){
	.connector-hero
	{
		margin: -100px 0 10px 0;
	}
	.connector-line-hero
	{
		margin: 0 auto 0 auto;
	}
	}


/* -- PRICING STYLES -------------------------------------*/

.price-sctn
{
	max-width: 825px !important;
	margin: 0 auto !important;
}

.pricing-box
{
	border: 1px solid var(--grey-F);
	border-radius: 8px;
	padding: 30px 15px;
}

.pricing-box h4,
.pricing-box p
{
	vertical-align: middle;
	margin-bottom: 0 !important
}

.pricing-box h3
{
	color: var(--brand-green-fluro) !important;
}

.price-icon img
{
	width: 50px;
	display: inline-block;
	padding-right: 12px;
}

.hero-price
{
	background: #fff;
	z-index: 999;
	position: relative;
}

.icon-check
{
	color: var(--brand-green-fluro);
	padding-right: 6px;
}

.addon-price
{
	border-top: 0px !important;
	border-radius: 0px 0px 8px 8px;
	margin-top: -8px !important;
	margin-left: 30px !important;
	position: relative;
}

.addon-plus
{
	position: absolute;
	left: 0;
	top: 50%;
	width: 40px;
	text-align: center;
	transform: translate(-50%,-50%);
	padding: 8px;
	border-radius: 50%;
	background: var(--brand-green-fluro);
}

.addon-plus .icon-plus
{
	color: #fff;
	font-size: 18px;
	padding: 0 !important;
	vertical-align: middle;
}


.price-item
{
	display: inline-block;
	border: 1px solid var(--grey-F);
	background: #fff;
	border-radius: 6px;
	padding: 3px 6px;
	margin: 0px 0px 6px 0px !important;
	white-space: nowrap;
	font-size: 13px;
	color: var(--grey-C);
	vertical-align: middle;
}


@media only screen and (max-width: 576px){
.pricing-box
{
	padding: 30px 0px;
}
.p-small
{
	padding-top: 0px !important;
}
.price-icon
{
	display: none;
}
.price-item
{
	width: 85%;
	white-space: normal;
	font-size: 12px;
	text-align: left !important;
}
.addon-price
{
	margin-left: 15px !important;
}
.addon-plus
{
	z-index: 9999;
}
.addon-plus
{
	left: 50%;
	top: 6px;
}
}




/* -- NAVIGATION STYLES -------------------------------------*/


.navbar
{
	transition: ease 0.4s;
	opacity: 1;
}

.navbar.scrolled 
{
  position: absolute;
}



@media only screen and (min-width: 990px) {
.navbar.scrolled 
{
  position: fixed;
  background: var(--brand-green-shade2) !important;
  padding: 0.6rem !important;
  margin-top: 0rem !important;
}
.navbar.scrolled .nav-link
{
	font-size: 13px !important;
}
.navbar.scrolled .logo img
{
	width: 100px;
	transition: ease 0.2s;
}
/* Drop down shrinks with scrolled class */
.navbar.scrolled .membership_drop_down_mega_div
{
	padding: 10px !important;
}
/* Drop down menu items hrinks with scrolled class */
.navbar.scrolled .dropdown_content_header
{
	font-size: 13px !important;
}
.navbar.scrolled .menu-bars:after
{
	font-size: 8px !important;
}
}


.navbar-nav .nav-link
{
	color: #fff !important;
	font-weight: normal !important;
	transition: ease 0.4s;
	font-size: 16px !important;
}

.nav-link.demo-btn
{
	border: 1px solid var(--brand-green-fluro);
	padding: 8px 12px !important;
	border-radius: 6px;
	font-size: 13px !important;
}

.nav-link.demo-btn:hover
{
	background-color: var(--brand-green-fluro);
}

.navbar .nav-item
{
	padding-right: 16px !important;
}

.navbar-nav .nav-link.active
{
	color: var(--brand-green-fluro) !important;
}


@media only screen and (max-width: 990px) {
.navbar-collapse
{
	padding: 40px;
	background: #fff;
	border-radius: 12px;
	margin-top: 12px;
}
.navbar-collapse li a
{
	text-align: center;
	padding: 12px 0 !important;
}
.navbar-nav .nav-link
{
	color: var(--grey-D) !important;
	font-size: 20px !important;
}
.navbar-nav .nav-link.active
{
	color: var(--brand-green) !important;
}
}

.navbar-toggler
{
	border: none !important;
	outline: none !important;
}

.navbar-toggler-icon
{
	background-image: url('../img/mob-nav.png') !important;
}




/* -- HOMEPAGE STYLES -------------------------------------*/

.home-banner
{
	padding: 100px 60px 20px 60px !important;
}

@media only screen and (max-width: 600px) {
.home-banner
{
	padding: 100px 0px 20px 0px;
}
}

.home-banner h1
{
	font-size: 56px !important;
}

.page-banner h1,
.page-banner h2,
.page-banner h3,
.page-banner h4,
.page-banner h5,
.page-banner h6,
.page-banner p
{
	color: #fff !important;
}


.page-banner h6,
.page-banner p
{
	opacity: 0.6 !important; 
}

.homepage .page-banner .text
{
	max-width: 520px;
	margin: 0 auto;
}

.home-banner .white-box
{
	padding: 30px;
    max-width: 700px;
    margin: 40px auto;
    margin-bottom: -60px;
    position: relative;
}



.home-banner .logo
{
	display: inline-block;
	text-align: center;
	padding: 20px;
	padding-bottom: 0px;
	vertical-align: middle;
}

.home-banner .logo p
{
	color: var(--grey-D) !important;
}

.home-banner .logo img
{
	width: 140px;
	margin-bottom: 12px;
}

.home-banner .arrow
{
	padding: 10px;
	border: 1px solid var(--grey-F);
	border-radius: 50%;
}

.home-banner .arrow img
{
	width: 18px;
	opacity: 0.4;
}

.home-product-hero
{
	background: #fff;
	max-width: 1100px;
	border-radius: 12px;
	overflow: hidden;
	margin: 0px !important;
}

.home-product-hero h3
{
	margin-bottom: 0 !important;
}

.home-product-hero .hero-mockup
{
	background-image: url('../img/mockup-hero.jpg?raw=1');
	background-size: cover;
	background-position: right center;
	background-color: var(--grey-E);
	min-height: 350px;
}


@media only screen and (max-width: 850px) {
.home-banner .white-box
{
	padding: 30px;
    max-width: 350px;
    margin: 60px auto;
    margin-bottom: -60px;
    position: relative;
}
.home-banner .logo
{
	display: block;
}
.home-banner .arrow img
{
	transform: rotate(90deg);
}
}








/* -- GENERAL STYLES -------------------------------------*/

section
{
	padding: 80px 0;
}

a
{
	text-decoration: none !important;
}

img
{
	width: 100%;
}

.button
{
	margin-bottom: 20px !important;
}

.hero-img
{
	border-radius: 6px;
	overflow: hidden;
}

.no-padding
{
	padding: 0 !important;
}

.spacer
{
	margin: 20px;
	height: 1px;
	width: 100%;
}

.padding-med
{
	padding: 40px !important;
}

.padding-sm
{
	padding: 20px !important;
}

.text-center
{
	text-align: center;
}

@media only screen and (max-width: 576px){
.mob-text-center
{
	text-align: center !important;
}
}

.page-banner
{
	background-color: var(--brand-green-shade2);
	//padding: 120px 0px 100px 0px;
	text-align: center;
	background: linear-gradient(
      rgba(0, 101, 109, 0.9), 
      rgba(0, 101, 109, 0.9)),
      url('../Magnifi-Banner-Homepage.jpg');
	background-size: 100% auto;
	background-position: center top;
	background-repeat: no-repeat;
	transition: ease 3s;
}
.page-banner-alt
{
	background: linear-gradient(
      rgba(0, 101, 109, 0.9), 
      rgba(0, 101, 109, 0.9)),
      url('../img/header-bg.jpg');
	padding: 120px 60px 80px 60px;
}

.page-banner:hover
{
	background-size: 107% auto;
	transition: ease 3s;
}

@media only screen and (max-width: 576px){
.page-banner
{
	background-size: cover !important;
}
}


.button
{
	font-size: 15px !important;
	border-right: 6px !important;
	padding: 9px 18px !important;
	border-radius: 6px;
	margin: 0 4px;
	transition: ease 0.4s;
}

.button-primary
{
	color: var(--brand-green-shade3) !important;
	background: var(--brand-green-fluro) !important;
	border: 1px solid var(--brand-green-fluro) !important;
}

.button-primary:hover
{
	color: #fff !important;
	background: var(--brand-green-shade3) !important;
	border: 1px solid var(--brand-green-shade3) !important;
}

.button-secondary
{
	color: var(--brand-green-shade3) !important;
	background: transparent !important;
	border: 1px solid var(--brand-green-fluro) !important;
}

.home-banner .button-secondary,
.footer-cta .button-secondary
{
	color: #fff !important;
}

.button-secondary:hover
{
	color: var(--brand-green-shade3) !important;
	background: var(--brand-green-fluro) !important;
	border: 1px solid var(--brand-green-fluro) !important;
}



.white-box
{
	border-radius: 12px;
	background: #fff;
	padding: 30px;
}

.light-bg
{
	background: var(--grey-H);
}

.shadow-med
{
	box-shadow: 0px 6px 22px rgba(0, 0, 0, 0.06),
				0px 6px 22px rgba(0, 0, 0, 0.06);
}


/* -- PRODUCT AREA STYLES -------------------------------------*/

.product-icon
{
	display: inline-block;
	border-radius: 22px;
	background: #fff;
	padding: 18px;
	margin-bottom: 20px;
}

.product-icon img
{
	width: 100%;
	max-width: 45px;
}

.our-products a
{
	display: block;
	margin-bottom: 30px !important;
}





/* -- TESTIMONAILS STYLES -------------------------------------*/


.testimonial-img
{
	border-radius: 50%;
	overflow: hidden;
	width: 150px;
	height: 150px;
	margin: 0 auto;
	margin-bottom: 20px;
}

.testimonial-img img
{
	width: 100%;
}




.carousel-inner
{
	padding: 60px;
	background: #fff;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.carousel-indicators li
{
	background-color: var(--grey-D) !important;
	height: 6px !important;
	opacity: 0.3 !important;
}

.carousel-indicators .active
{
	opacity: 1 !important;
}

.carousel-control-next, 
.carousel-control-prev
{
	width: 8% !important;
}

.carousel-control-next-icon, 
.carousel-control-prev-icon
{
	width: 60px !important;
	height: 60px !important;
}

.carousel-control-next-icon, 
.carousel-control-prev-icon
{
	background-image: url('../img/magnifi-arrow.png') !important;
	opacity: 0.4;
}

.carousel-control-prev-icon 
{
    transform: rotate(180deg);
}



/* -- FOOTER STYLES -------------------------------------*/

.page-footer,
.page-footer .footer-copyright
{
	background-color: var(--grey-G) !important;
	border: none !important;
	padding-top: 0 !important;
}

.page-footer .container
{
	padding: 50px 0 !important;
}


.footer-cta h1,
.footer-cta h2,
.footer-cta h3,
.footer-cta h4,
.footer-cta h5,
.footer-cta h6,
.footer-cta p
{
	color: #fff !important;
}

.footer-cta
{
	background-color: var(--brand-green-shade1);
}

.footer-cta .container
{
	padding-bottom: 0 !important;
}

.footer-cta .cta-screenshot
{
	width: 100%;
	border: 18px solid #000;
	border-width: 18px 18px 0px 18px;
	border-radius: 20px 20px 0px 0px;
	background-image: url('../img/magnifi-footer-hero-screenshot.jpg');
	background-color: #fff;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	min-height: 300px;
	position: relative;
	overflow: hidden;
} 

@media only screen and (max-width: 850px) {
.footer-cta .cta-screenshot
{
	margin: 30px 30px 0px 30px;
	border-width: 12px 12px 0px 12px !important;
	min-height: 220px;
}
.footer-cta .cta-screenshot::before
{
    top: -12px !important;
    bottom: 0px !important;
    left: -12px !important;
    right: -12px !important;
}
.footer-cta .cta-content
{
	padding: 20px !important;
	text-align: center !important;
}
}

.footer-cta .cta-screenshot::before
{
	content: '';
	 display: block;
    position: absolute;
    width: auto;
    height: auto;
    border-radius: 20px 20px 0px 0px;
    top: -18px;
    bottom: 0px;
    left: -18px;
    right: -18px;
    border: 2px solid #444;
    border-width: 2px 2px 0px 2px;
} 

.footer-cta .cta-content
{
	padding-right: 60px;
}

.footer-cta img.mag-glass
{
	position: absolute;
    bottom: -138px;
    left: 240px;
    width: 250px;
    transform: rotate(-50deg);
    transition: ease 1s;
}

.footer-cta:hover img.mag-glass
{
    bottom: -126px;
    left: 195px;
    transform: rotate(-58deg);
}


@media only screen and (max-width: 990px) {
.footer-cta img.mag-glass
{
    bottom: -178px;
    left: 280px;
}

.footer-cta:hover img.mag-glass
{
    bottom: -170px;
    left: 260px;
}
}

@media only screen and (max-width: 768px) {
.footer-cta img.mag-glass
{
    bottom: -128px;
    left: 200px;
    width: 200px;
}

.footer-cta:hover img.mag-glass
{
    bottom: -132px;
    left: 180px;
}
}

@media only screen and (max-width: 500px) {
.footer-cta img.mag-glass
{
    bottom: -118px;
    left: 140px;
    width: 180px;
}

.footer-cta:hover img.mag-glass
{
    bottom: -102px;
    left: 120px;
}
}


.page-footer ul li
{
	padding-left: 0 !important;
	padding-bottom: 12px;
}

.page-footer ul li:before,
.page-footer ul li:after
{
	display: none;
}

.page-footer a
{
	color: var(--grey-D) !important;
	transition: ease 0.2s;
}

.page-footer a:hover
{
	color: var(--brand-green-fluro) !important;
}

.page-footer .footer-copyright p
{
	font-size: 13px !important;
}

img.footer-logo
{
	max-width: 125px;
	margin-bottom: 20px;
}

.footer-wrapper
{
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #00656d;
  width: 100%;
}

@media only screen and (max-width: 800px) {
  .footer-wrapper
{
  flex-direction: column-reverse;
}
}

.footer-image
{
  width: 50%;
  background-image: url('../../images/Magnifi-Banner-Smart-Forecasting.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 300px;
}

.footer-content
{
  color: #fff;
  padding: 60px 20px;
  width: 50%;
  text-align: center;
}

@media only screen and (max-width: 800px) {
  .footer-content,
  .footer-image
  {
    width: 100%;
  }
}



.footer-content .title
{
  font-size: 28px;
  color: #74e4a0;
  margin-bottom: 12px;
}

.footer-content .content
{
  color: #ffffff;
  margin-bottom: 20px;
  padding: 0px 20px;
}

.footer-content button
{
  display: inline-block;
  margin: 6px;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
}

.footer-menu
{
  text-align: center;
  padding: 120px 40px;
  background: #f7fbfc;
}

button.primary
{
  background: #74e4a0;
  color: #00656d;
  border: none;
}

button.secondary
{
  background:  transparent;
  border: 1px solid #74e4a0;
  color: #ffffff;
}




/* -- XERO AREA STYLES -------------------------------------*/


.dark-bg
{
	background: var(--grey-A);
}

.dark-bg h2
{
	color: #fff !important;
}

#zsiq_byline
{
    margin-bottom: 0px !important;   
}