/* **************************************************************
*                     Xuuri Core CSS                             *
*****************************************************************/

/***** CSS Import *****/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;200;400;500;600&display=swap');

/***** End CSS Import *****/

/***** Root *****/
:root{
	--defaultFontSize: 14px;
	--white: #ffffff;
	--xuuriDef:#6366F1;
	--xuuriDark: #2B2C3F;
	--xuuriSecondary: #dee2e6;
	--xuuriDarker: #272737;
	--grey: #707070;
}

/***** End Root *****/

/***** General *****/
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/* white-space:nowrap !important; */
}

body{
	font-size: var(--defaultFontSize);
	font-family: 'Poppins', sans-serif;
	line-height: 1.6rem;
	/* line-height: 2; */
}

ul{
	list-style: none;
}

.separator{
	border: 1px solid #c4c4c4;
}

a{
	color: var(--xuuriDef);
	text-decoration: none;
}
/***** End General *****/

/***** Spacing *****/

.spacer{
	padding: 2rem 0;
}
/***** End Spacing *****/

/***** Typograohy *****/
.light{
	font-weight: 300;
}

.lighter{
	/* font-weight: 200; */
	font-weight: 300;
	opacity: 0.77;
}

.bolder{
	font-weight: 400;
}

.text-primary{
	color: var(--xuuriDark) !important;
}

.title-text{
	line-height: 3.2rem;
}

.semi-title{
	font-size: 1.25rem;
	font-weight: 400;
}
/***** End Typograohy *****/

/***** Colors *****/
.text-def{
	color: var(--xuuriDef) !important;
}

.text-primary{
	color: var(--xuuriDark);
}

.bg-primary{
	background-color: var(--xuuriDark) !important;
}

.grey-text{
	color: var(--grey);
}

/***** End Colors *****/

/***** Buttons *****/
.btn{
	font-size: var(--defaultFontSize);
	border-radius: 5rem;
	padding: .75rem 3rem;
}

.header-btn{
	padding: .4rem 3rem !important;
}

.btn.btn-primary{
	/* background: var(--xuuriDark); */
	/* border: 1px solid var(--xuuriDark); */
	background: var(--xuuriDef);
	border: 1px solid var(--xuuriDef);
}

.btn.btn-outline-primary{
	/* color: var(--xuuriDark); */
	color: var(--xuuriDef);
	border: 1px solid var(--xuuriDef) !important;
}

.btn.btn-outline-primary:hover{
	/* color: var(--white);
	background: var(--xuuriDark); */
	color: var(--white);
	background: var(--xuuriDef);
}

.btn.btn-primary, .btn.btn-outline-primary{
	border: 1px solid var(--xuuriDark);
}


.btn.btn-outline-secondary{
	color: var(--xuuriDark);
}

.btn.btn-outline-secondary:hover{
	/* color: var(--white); */
	background: var(--white);
	border: 1px solid var(--xuuriDark);
}

.btn.btn-primary, .btn.btn-outline-secondary{
	/* border: 1px solid var(--xuuriSecondary); */
	border: 1px solid var(--xuuriDef);
}

/***** End Buttons *****/

/***** Header Nav *****/
.logo-brand{
	height: 2.5em;
}
/***** End Header Nav *****/

/***** Cards *****/
.card-cta{
	border-radius: 1rem;
}

img.trending-card.img-responsive {
    width: 100%;
    height: auto;
}

.info-cards{
	z-index: 1000;
}

/* .info-cards img.trending-card, .info-cards img.product-card{
	height: 10rem;
	width: auto;
} */

/* .over-cards{
	position: absolute;
	margin-top: -20rem;
	width: 15rem;
}

.card2{
	margin-left: 14rem;
} */
/***** End Cards *****/

/***** Hero *****/

.hero-desc{
	line-height: 1.5rem;
}

.hero{
	margin-bottom: 5rem;
}

/* .hero img{
	height: 70vh;
} */

.hero-img-bg{
	background-image: url('https://res.cloudinary.com/https-business-xuuri-com/image/upload/v1655797445/images/default-home/woman-tablet-smiling_jgsrz3.jpg');
	height: 70vh;
	width: 50%;
	background-position: unset;
}

img.sell-image{
	height: 50vh;
	background-position: center;
	width: 100%;
}
/***** End Hero *****/

/***** Features *****/
.feature-title, a.policy-title{
	font-size: 17px;
	margin-bottom: .5rem;
}

.feature-desc{
	font-weight: 300;
	/* padding-right: 1.5rem; */
	/* text-align: justify;
	text-justify: inter-word; */
}

.feature-image{
	/* height: 400px; */
	/* height: 60vh; */
	width: 100%;
	object-fit: cover;
	/* object-fit: contain; */
}

.service-image{
	height: 40vh;
	width: 100%;
	object-fit: cover;
}

.illustration-image{
	height: 10rem;
	width: auto;
}

.placeholder-image{
	height: 40px;
	width: auto;
	object-fit: cover;
	margin-bottom: 1.5rem;
}

.header-icon{
	height: 2rem;
	width: auto;
	margin-bottom: 1.5rem;
}
/***** End Features *****/

.soon-badge{
	background-color: #6366F1;
	color: white;
	padding:  0 .4rem;
	border-radius: 1rem;
}

/***** Policies *****/
a.policy-title{
	text-decoration: none !important;
	color: var(--xuuriDark);
}

.policy-scrollspy{
	width: 25%;
	right: 0%;
	top: 10%;
	/* position: absolute; */
}

.policy-content{
	width: 75%;
}

/***** End Policies *****/

/***** Lists *****/
.list-unstyled li a{
	font-size: 0.9rem;
    text-decoration: none;
    /* color: var(--grey); */
    color: #000000;
}

.list-unstyled li{
	margin-bottom: .75rem;
}
/***** End Lists *****/

/***** Megamenu *****/

.dropdown-toggle::after{
	border: none;
}

.col-megamenu{
	margin-bottom: 1.5rem;
}

.no-biz{
	font-size: .85rem;
    line-height: 2rem;
}

.nobiz span a{
	text-decoration: none;
}
/***** End Megamenu *****/

/***** Modal *****/
.countries{
	margin: 0rem 10rem;
}

.countries a{
	text-decoration: none;
	color: #000000;
}

#localeModal{	
	cursor: pointer;
}
/***** End Modal *****/

/***** Forms *****/
.login-form{
	max-width: 500px;
}

.check-section{
    background-color: var(--white);
	border: 1px solid #c4c4c4;
	border-radius: 8px;
    display: inline-block;
	height: 5rem;
}

#checkboxes input[type=checkbox]{
    display: none;
}

#checkboxes input[type=checkbox]:checked + .check-section{
    background-color: var(--xuuriDark);
	color: var(--white);
	border: none;
}

/***** End Forms *****/

/***** Footer *****/
ul.footer-social-icons li a i{
	font-size: 1.125rem;
	margin-right: 2rem;
}

.footer-dark ul li a{
	color: var(--white) !important;
	font-size: 0.7rem !important;
}

.footer-column-title{
	/* font-size: 1.25rem; */
	font-size: 0.875rem;
}

.footer-desc{
	font-size: 0.8rem;
	line-height: 1.5rem;
}

.footer-dark .darker-bg{
	background: var(--xuuriDarker);
	border-top: 1px solid #3A3A49;
}
/***** End Footer *****/	

/***** Media Query *****/
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

}
  
  /* 
	##Device = Laptops, Desktops
	##Screen = B/w 1025px to 1280px
  */
  
  @media (min-width: 1025px) and (max-width: 1280px) {
	
}
  
  /* 
	##Device = Tablets, Ipads (portrait)
	##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) {
	
}
  
  /* 
	##Device = Tablets, Ipads (landscape)
	##Screen = B/w 768px to 1024px
  */
  
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.pr-lg-5{
		padding-right: 4rem;
	}
	
	.pl-lg-5{
		padding-left: 4rem;
	}
	
	.hero-desc{
		max-width: 30rem;
	}
}

	@media (min-width: 768px) and (max-width: 2560px) and (orientation: landscape) {
	.hero-desc{
		max-width: 26rem;
	}
}
  
  /* 
	##Device = Low Resolution Tablets, Mobiles (Landscape)
	##Screen = B/w 481px to 767px
  */
  
  @media (min-width: 481px) and (max-width: 767px) {
	 
}
  
  /* 
	##Device = Most of the Smartphones Mobiles (Portrait)
	##Screen = B/w 320px to 479px
  */
  
  @media (min-width: 320px) and (max-width:768px){

	/* .hero img {
		height: 56vh;
	} */

	/* .info-cards{
		width: 100%;
    	height: 100px;
	} */

	.hero-title{
		font-size: 28px;
		line-height: 2.5rem;
	}

	/* .hero-desc{
		font-size: .75rem;
	} */

	.hero .info{
		/* text-align: center; */
		padding: 2rem;
	}

	img.trending-card.img-responsive{
		width: 16rem;
		height: auto;
		/* margin-top: -5rem; */
	}

	/* .feature-desc{
		padding: 0 2rem;
	} */

	.benefit, .footer-pad{
		text-align: center !important;
	}

	#localeModal{
		display: block !important;
		/* padding: 0.7rem; */
		/* margin: 1rem 0;
		border: 1px solid #ffffff38; */
	}

	.policy-content{
		width: 100%;
	}

	.countries{
		margin: 0rem;
	}
}

/***** Navbar w/ mega menu *****/
.navbar .megamenu{ padding: 1rem; }
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	
	.navbar .has-megamenu{
		position:static!important;
	}

	.navbar .megamenu{
		left:20%; 
		right:0; 
		width:56%; 
		margin-top:0;  
		box-shadow: 5px 5px 13px 4px #00000012;
		border: none;
	}

	
}	
/* ============ desktop view .end// ============ */


/* ============ mobile view ============ */
@media(max-width: 991px){
	.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
		overflow-y: auto;
	    max-height: 90vh;
	    margin-top:10px;
	}
}
/* ============ mobile view .end// ============ */
/***** End Navbar w/ mega menu *****/

/* Na Fx */
@media (min-width:768px){
	.footer-pad #locale{
		display: flex !important;
	}
}
/***** End Media Query *****/