/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

#content p { font-size: 1.2rem; }

@media (max-width: 767.98px) {
#page-title h1 {
    line-height: 1.5;
    font-size: 2rem;
}
}

.section {
	background-color: #fff;
}
.rounded-image {
	border-radius: 1rem !important;
}

/*	----------------------------------------------------------------
	Menu
----------------------------------------------------------------*/
	/*	Space between menu items & font size & lowercase */
	.menu-link {
		padding: 14px 30px;
		font-size: 1.2rem;
		font-weight: 600;
		text-transform: none;
	}
	
	/*	Remove thin grey right border at right of logo */
	
	.full-header #logo {
			border-right: 1px solid #fff;
		}
	
	/*	Remove thin grey right border at far right of menu options */
	.full-header .primary-menu .menu-container {
		border-right: 1px solid #fff;
	}
	
	@media only screen and (max-width: 575.98px) {
		#logo img {
			
			max-height: 75px;
		}
	}
	#header {
		background-color: #FFF;
		border-bottom: 1px solid #Fff;
	}

	#heading-block span {
		font-size: 24px;
	}
	
	.heading-block h2 {
		text-transform: none;
		}

	@media (min-width: 992px) {
	.sticky-header.full-header #header-wrap {
		border-bottom: 1px solid #fff;
		}
	}
	@media (min-width: 992px) {
	#header.full-header:not(.transparent-header) {
		border-bottom-color: #fff;
	}
	}
	@media (min-width: 992px) {
	.sticky-header #header-wrap {
		
		background-color: #FFF;
		box-shadow: none;
	}
	}

	
	/*	Menu - to change color of mobile menu toggle switch */
	.svg-trigger path {
		fill: none;
		transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
		stroke: #ff6400;
		stroke-width: 5;
		stroke-linecap:round;
	}
/*	----------------------------------------------------------------
	Video right height/ width on all screen sizes
----------------------------------------------------------------*/


@media screen and (max-width: 576px) {
	.vh-xs-35 {
		height: 35vh !important;
	}
}

/*	----------------------------------------------------------------
	Slider Arrows
----------------------------------------------------------------*/
/*	Get rid of background */

.slider-arrow-left,
.slider-arrow-right
{
		background-color:  rgba(0, 0, 0, 0) !important;
	
	transform: none !important;
	-webkit-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}
.slider-arrow-left:hover,
.slider-arrow-right:hover { background-color: rgba(0, 0, 0, 0) !important; }
/*	----------------------------------------------------------------
	Page Title
----------------------------------------------------------------*/
/*	Changing font, padding & colors of heading block (menu) and page title */

#page-title h1 {
	text-transform: none;
	color: #444;
}


#page-title {
    padding: 3rem 0;
    background-color: #fff;
    border-bottom: 1px solid #fff;
}
#page-title-help {
	margin-top: 0.5rem;
    padding: 1.5rem 0;
    background-color: rgba(68, 192, 204, 0.12);
    border-bottom: 1px #fff;
}

/*	illustration in title section */
.image-header {
    z-index: 3;
	padding-top: 15px;
}
@media only screen and (max-width: 420px){
.image-header {
    max-width: 40%;
}
}


/*	----------------------------------------------------------------
	Try for Free panel image sizes
----------------------------------------------------------------*/

.center-block {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.center-block-sm {
	display: block;
	margin-right: auto;
	margin-left: auto;
	max-width: 40%;
}

	@media only screen and (max-width: 430px){
		.app-icon, .cloud {
    max-width: 90%;}
	}
	@media (max-width: 576px) and (min-width: 430px){
		.app-icon, .cloud {
			max-width: 60%;}
	}
	@media (max-width: 768px) and (min-width: 576px){
		.app-icon, .cloud {
			max-width: 100%;}
	}

	@media (max-width: 991px) and (min-width: 768px){
		.app-icon, .cloud {
		max-width: 70%;}
	}
	@media (min-width: 991px) {
		.app-icon, .cloud {
		max-width: 60%;}
	}
/*	Feature card elements from Canvas Co-Working theme) */

.heading-block::after {
    border-top: none;
}
.card {
	border-radius: 1rem;
	border: none;
	background-color: rgba(68, 192, 204, 0.12);
}



.card-title-bg {
    background-color: rgba(255, 100, 0, 0.12);
}
.card-title-bg-apps {
    background-color: rgba(68, 192, 204, 0.12);
}
.card-title-bg-contact {
    background-color:  #ff96bb47;
}

.card-img-top {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.card-body {
	border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}
.card-header {
	background-color: rgba(68, 192, 204, 0.12);
	border-bottom: none;
}
.card-header:first-child {
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
    border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

/*	----------------------------------------------------------------
	Testimonial section
----------------------------------------------------------------*/

	.testi-content {
		margin-left: 1rem;
		margin-right: 1rem;
	}
	.testi-content p {
		
		font-style: normal;
		font-weight: bold;
		font-size: 1.3rem;}
	
	.testi-meta::before {
			content: none;
		}
	
	/*	 stars color */

[class^="icon-"], [class*=" icon-"], [class^="icon-line-"], [class*=" icon-line-"], [class^="icon-line2-"], [class*=" icon-line2-"], .side-header .primary-menu ul > li.sub-menu > a:after, .docs-navigation ul ul li.current a:after {
	color: #ff6400;}

	.testimonial {
		padding: 20px;
		background-color:rgba(255, 100, 0, 0.12);
		border: none;
		border-radius: 1.25rem;
		box-shadow: none;
	}
	.testimonial.white {
		background-color: transparent !important;
	}
	.testimonial.blue {
		background-color: rgba(68, 192, 204, 0.12);
	}
	.testimonial.pink {
		background-color:  #ff96bb47;
	}
	
/*	----------------------------------------------------------------
	Our promise section & About page
----------------------------------------------------------------*/

.fbox-icon i, .fbox-icon img {
	border-radius: unset;
	background-color: #fff;}

.fbox-icon {
    width: 8rem;
    height:auto;
    padding: 0 0.75rem;
}
.fbox-center .fbox-icon {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}


.fbox-content {
	max-width: 90%;
}
.fbox-content p {
	color: #555;
}
@media (min-width: 768px){
.fbox-content.narrow {
    max-width: 60%;
}
}


/*	----------------------------------------------------------------
	Footer 
----------------------------------------------------------------*/
/*	to minimise white gap between content and footer */
.content-wrap {
    padding: 72px 0px 20px 0;
}
/*	to creat white gap at bottom to allow room for go-to-top rocket */
footer {
    padding: 0 0 40px 0;
}
#copyrights {
	background-color: #fff;
}
.copyright-links a:hover {
	color: #ff6400;
}
#footer {
    background-color: #fff;
    border-top: none;
}
/* ----------------------------------------------------------------
	Go To Top
-----------------------------------------------------------------*/

#gotoTop {
	transform: rotate(-45deg);
	background-color:  #fff !important;
    background-color: rgba(0,0,0,0) !important;
    font-size: 4rem;
    color: rgba(255, 102, 0, 0.685);
}
.stretched #gotoTop {
    bottom: 3rem;
}
@media only screen and (max-width: 768px){
	#gotoTop {font-size: 2.5rem;}
	.stretched #gotoTop {bottom: 2rem;}
}
#gotoTop:hover { 
	background-color: #fff !important;
	background-color: rgba(0,0,0,0) !important;
	color: #FF6400;
}


/* ----------------------------------------------------------------
	About Page
-----------------------------------------------------------------*/
.section.about {
    height: 400px;
}
@media screen and (max-width: 576px) {
	.section.about {
		height: 300px;
	}
}

.div-wrapper {
    position: relative;
    height: inherit;
    width: inherit;
}
.div-wrapper img {
    width: 100%;
    max-width: 400px;
    min-width: 140px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
}
@media screen and (max-width: 576px) {
	.div-wrapper img {
		width: 100%;
		max-width: 260px;
		min-width: 140px;
		position: absolute;
		left: -50px;
		bottom: 0;
		z-index: 2;
	}
	}



@media screen and (min-width: 576px) and (max-width: 767px) {
.div-wrapper img {
    width: 100%;
    max-width: 300px;
    min-width: 140px;
    position: absolute;
    left: -50px;
    bottom: 0;
    z-index: 2;
}
}
/*	Form style*/
.sm-form-control {
    padding: 8px 14px;
	color: #555555;
	font-weight: bold;
    background-color:  rgba(68, 192, 204, 0.12);
    border: none;
    border-radius: 10px !important;
}
label {
	text-transform: none;
	font-size: 16px;
}

/*	Button style*/
.button {
	display: inline-block;
	position: relative;
	cursor: pointer;
	outline: none;
	white-space: nowrap;
	margin: 5px;
	padding: 8px 22px;
	font-size: 0.875rem;
	line-height: 24px;
	background-color: #ff4b89;
	color: #FFF;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 1px;
	border: none;
	text-shadow: none;
	border-radius: 1rem;
}
.button:hover {
	background-color:#e6447c ;
}





.button {
    border-radius: 15px;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}
/* ----------------------------------------------------------------
	Help Page
-----------------------------------------------------------------*/
.accordion-border {
    border-radius: 20px;
}

.iconlist > li [class^="icon-"]:first-child, .iconlist > li [class*=" icon-"]:first-child {
    
	margin-right: 1.25rem;
	transform: scale(1.5);
    -webkit-transform: scale(1.5);
	
}
/*	To make video embeds have curved border*/
.media-box .fbox-media iframe {
	border-radius: 1rem;}

/*	To create responsive line breaks*/

	@media all and (min-width:551px) {
			.desktop-br {display: inline;}
			.mobile-br {display: none;}
		}
	
	@media all and (max-width:550px) {
			.desktop-br {display: none;}
			.mobile-br {display: inline;}
		}