/* ==========================================================================
*
* Custom CSS Stylesheet. This is where you should add your own styles!
*
** ========================================================================== */

/* Simple style overrides or custom adds */

.some-css-selector {font-size:13px;}

:root {
	--mdm-primary: #f26a2e;
	--mdm-primary-dark: #d95217;
}

.mdm-nav {
	display: flex;
	gap: 18px;
	align-items: center;
}

.mdm-nav a {
	color: #ffffff;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	font-size: 12px;
	transition: color .2s ease;
}

.mdm-nav a:hover,
.mdm-nav a:focus {
	color: var(--mdm-primary);
}

.mdm-hero-cta,
.mdm-hero-cta-secondary {
	margin-top: 16px;
	margin-right: 10px;
}

.mdm-hero-cta {
	background: var(--mdm-primary);
	border-color: var(--mdm-primary);
}

.mdm-hero-cta:hover,
.mdm-hero-cta:focus {
	background: var(--mdm-primary-dark);
	border-color: var(--mdm-primary-dark);
}

.whatsapp-float {
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 20px;
	right: 20px;
	background-color: #25d366;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	font-size: 30px;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
	z-index: 1000;
	transition: all 0.3s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
	background-color: #1ebe5b;
	transform: scale(1.1);
}

.whatsapp-float i {
	margin-top: 15px;
}





/* ==========================================================================
** Responsive styles custom rules
* These rules are ready to be used for either overrides
* or just your own custom rules.
========================================================================== */


/** Higher screens+ **/
@media only screen and (min-width : 1921px){

}


/** Desktop+ **/
@media (min-width: 1200px) {

}


/** Laptop **/
@media (max-width: 1200px) {

}


/** Laptop+ **/
@media (min-width: 991px) {

}


/** Laptop **/
@media (min-width: 992px) and (max-width: 1199px) {

}


/** Large Tablets **/
@media (max-width: 992px) {

}


/** Tablets (landscape mode)  **/
@media (min-width: 768px) and (max-width: 991px) {

}


/** Tablets+  **/
@media (min-width: 768px) {

}


/** Tablets (portrait mode)  **/
@media (min-width : 481px) and (max-width : 768px) {

}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 767px) {
	.mdm-nav {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
	}

	.mdm-nav a {
		font-size: 11px;
	}

	.mdm-hero-cta,
	.mdm-hero-cta-secondary {
		margin-right: 0;
		margin-bottom: 10px;
		display: inline-block;
	}

}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 600px) {

}


/** Smartphone portrait mode **/
@media (max-width: 480px) {

}


/** Normal phone portrait mode+ **/
@media (min-width: 320px) {
	
}