:root {
	  --mc-black:#000;
	  --mc-grey:#555759;
	  --mc-grey-dark:#3b3b3b;
	  	--mc-over-grey-dark:#FFFFFF;
	  --mc-grey-light:#e5e5e5;
	  --mc-grey-light-light:#f8f8f8;
	  --mc-text:#222222;
	  --mc-white:#FFF;
	  --mc-primary:#183A39;
	  	--mc-over-primary:#FFF;
	  --mc-primary-light:#21504e;
	 	 --mc-over-primary-light:#FFF;
	  --mc-primary-dark:#102726;
	 	 --mc-over-primary-dark:#FFF;
	  --mc-secondary:#F4A801;
	  	--mc-over-secondary:#111111;
	  --mc-tertiary:lime;
	  --mc-danger:red;

	  --mf-primary:'Roboto Slab', sans-serif;
	  --mf-secondary:'Roboto Slab', sans-serif;
	  --mf-cursive:'Satisfy', sans-serif;
	  --mf-icons:'Font Awesome 6 Free', sans-serif;
	  

	  --bgc-title:red;
	  --c-title:var( --mc-secondary);
	  --c-title-h1:var(--mc-primary);
	  --c-title-h2:#2f2f2f;
	  --c-title-h3:#3f3f3f;
	  --bgc-page:transparent;
	  --c-page:var(--mc-text);

	  --footer-c-text:#FFF;
	  --footer-c-bg:var(--mc-primary);

	  --ariane-c-text:#e5e5e5;
	  --ariane-c-text-active:#FFDE59;
	  --ariane-c-sep:#3b3b3b;
	  
	  --swiper-navigation-color:#FFF;

	  --w-container:1290px;
}

/* *{
	background-color: rgba(255,0,0,0.2);
} */

/* BTN */

	.btn-first {
		--_effect-hover-border-color:var(--mc-primary);
		--_effect-hover-bg-color:var(--mc-over-primary);

		font-family: var(--mf-primary);
		background-color: var(--mc-primary);
		color: var(--mc-over-primary);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 1em;
		padding: 0.5rem 2rem 0.5rem 2rem;
		font-weight: 500;
		line-height: 2em;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		border: 0;	
		font-size: 1rem;
		cursor:pointer;
		border-radius: 10px;
		transition: 0.15s ease-in;
	}
	.btn-first:hover, .btn-first:focus, .btn-first:active {	
		color: var(--mc-over-primary);	
		box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
	}
	/* .btn-first i{margin-left: 1em;} */

	.btn-firstreverse{
		font-family: var(--mf-primary);
		background-color: var(--mc-over-primary);
		color: var(--mc-primary);
		border: 1px solid var(--mc-primary);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 1em;
		padding: 0.5rem 2rem 0.5rem 2rem;
		font-weight: 500;
		line-height: 2em;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		font-size: 1rem;
		cursor:pointer;
		border-radius: 10px;
		transition: 0.15s ease-in;
	}
	.btn-firstreverse:hover, .btn-firstreverse:focus, .btn-firstreverse:active {
		color: var(--mc-primary);		
		box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
	}
	/* .btn-firstreverse i{margin-left: 1em;} */

	.btn-second {
		--_effect-hover-border-color:var(--mc-white);
		--_effect-hover-bg-color:var(--mc-over-secondary);

		background-color: var(--mc-secondary);
		color: var(--mc-over-secondary);
		padding: 0.5rem 2rem 0.5rem 2rem;
		font-weight: 500;
		line-height: 2em;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 1em;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		transition: 0.15s ease-in;
		border-color: transparent;	
		font-size: 1rem;
		font-family: var(--mf-primary);
		cursor:pointer;
		border-radius: 10px;
	}
	.btn-second:hover, .btn-second:focus, .btn-second:active {	
		color: var(--mc-over-secondary);
		box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
	}
	/* .btn-second i{margin-left: 1em;} */

	.btn-secondreverse{
		font-family: var(--mf-secondary);
		background-color: var(--mc-over-secondary);
		color: var(--mc-secondary);
		border: 1px solid var(--mc-secondary);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 1em;
		padding: 0.5rem 2rem 0.5rem 2rem;
		font-weight: 500;
		line-height: 2em;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		font-size: 1rem;
		cursor:pointer;
		border-radius: 10px;
		transition: 0.15s ease-in;
	}
	.btn-secondreverse:hover, .btn-secondreverse:focus, .btn-secondreverse:active {	
		
		color: var(--mc-secondary);	
		box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
	}
	/* .btn-secondreverse i{margin-left: 1em;} */

	.btn-icon-reverse{
		flex-direction: row-reverse;
	}
	.btn-icon-reverse i{
		margin-left:0;
		margin-right: 1em;
	}

	/* Hover effect 1 */
	.btn-effect1{
		position: relative;
		
		&:hover{
			background-color: var(--_effect-hover-bg-color,transparent);
			box-shadow: none;
			color: var(--mc-white);
		}
		&::before{
			content: "";
			position: absolute;
			inset:0;
			border-radius: 10px;
			transition: opacity 0.3s, border 0.3s;
		}
		&:hover::before{
			opacity: 0;
		}
		&::after{
			content: "";
			position: absolute;
			inset:0;
			border-radius: 10px;
			border: 2px solid var(--_effect-hover-border-color,--mc-white);
			opacity: 0;
			transform: scaleX(1.1) scaleY(1.3);
			transition: transform 0.3s, opacity 0.3s;
		}
		&:hover::after{
			opacity: 1;
			transform: scaleX(1) scaleY(1);
		}
	}


	.icon-before{
		flex-direction: row-reverse;
	}
	.icon-after{
		flex-direction: row;
	}

	.btn-sm {
		font-size: 0.9rem;
		padding: 0.25rem 1.5rem 0.25rem 1.5rem;
		border-radius: 0.5rem;
	}

	@media (max-width: 768px) {
		.btn-first{
			font-size: 1rem;
		}
	}

/* IMG PLACEHOLDER */
	.placeholder-img {
		object-fit: scale-down !important;
		opacity: 0.3;
	}