@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

:root {
  --tone-color: #DF4D24;
  --tone-dark: #C02626;
  --tone-highlight: #31D0A810;
  --tone-sea: #3e98aa;
  
  --white: #FFF;
  --dark: #54595F;
  --darker: #333;
  --dark-grey: #E0E0E0;
  --text-light: #c1c1c1;
  --success: #3DECB5;
  --error: #FF3E83;
  
  --border-grey: #f2f2f2;
  --light-grey: #f8f8f8;
  --border-radius: 8px

}

[v-cloak] {opacity: 0;}
html{
	font-size: 62.5% !important;
}
body{
	
	font-size: 1.6rem !important;
	
}
body,html{
	overflow-x: hidden;
    font-family: 'Poppins', sans-serif !important;
    margin: 0;
}
hr{border: solid 1px #323232;}


/*********************************************/
/****************STRUCTURES*******************/
/*********************************************/
.container{
	max-width: 1188px !important;
    padding-right: var(--bs-gutter-x,1.75rem) !important;
    padding-left: var(--bs-gutter-x,1.75rem) !important;
}
.row.large-gutter{
	--bs-gutter-x: 3.5rem;
}
.flex-between{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/*********************************************/
/****************FONT UTILITIES***************/
/*********************************************/
.tone{color: var(--tone-color);}
.white{color: white;}
.dark{color: var(--dark);}
.dark-grey{color: var(--dark-grey);}
.light-grey{color: var(--text-light);}

.success{color: var(--success);}
.error{color: var(--error);}

.italic{font-style: italic}
.uppercase{text-transform: uppercase}
.bold{font-weight: bold;}
.medium{font-weight: 600;}
.light{font-weight: 300;}

.fs10{font-size:1.0rem !important;}
.fs14{font-size:1.4rem !important;}
.fs12{font-size:1.2rem !important;}
.fs16{font-size:1.6rem !important;}

.fs20{font-size:2.0rem !important;}
.fs24{font-size:2.4rem !important;}
.fs26{font-size:2.6rem !important;}
.fs28{font-size:2.8rem !important;}
.fs36{font-size:3.6rem !important;}
.fs48{font-size:4.8rem !important;}


.page-section{
	padding: 80px 0;
}
.page-section.lg{
	padding: 120px 0;
}
.section-title{
	color: var(--darker);
	font-size: 6.4rem;
	font-family: 'Abel', Sans-Serif;
	line-height: 6.4rem;
}
.section-title.sm{
	color: var(--darker);
	font-size: 4.4rem;
	font-family: 'Abel', Sans-Serif;
	line-height: 4.4rem;
}
.section-subtitle{
	color: var(--dark-grey);
	font-size: 4.4rem;
	letter-spacing: 10px;
	font-family: 'Abel', Sans-Serif;

}

.abel{
	font-family: 'Abel', Sans-Serif;

}

/*********************************************/
/**************LINKS AND BUTTONS**************/
/*********************************************/
.pointer{cursor: pointer;}
a {color: var(--tone-color) !important;}
a:hover {color: var(--tone-dark) !important;}

a.dark {color: var(--darker) !important;}
a.dark:hover {color: var(--tone-dark) !important;}

.btn {
	cursor: pointer;
	padding-top: .85rem;
	padding-bottom: .85rem;
	font-weight: 500;
	color: #333;
	background-color: transparent;
	border: none !important;
	border-radius: var(--border-radius);
	min-width: 130px;
    max-width: 100%;
    line-height: 2.5rem;
    font-size: 1.8rem;
    font-family: 'Abel', Sans-Serif;

}
.btn.btn-tone {
  background-color: var(--tone-color);
  color: white;
}
.btn.btn-tone:hover {
	background-color: var(--tone-dark);
}

.btn.btn-default {
  background-color:#f2f2f2 !important;
  color: var(--dark);
}
.btn.btn-default:hover {
	background-color: var(--tone-dark);
}

.btn.btn-white {
  background-color: var(--white);
  color: black;
}
.btn.btn-white:hover {
	background-color: var(--light-grey);
}
.btn.btn-black {
  background-color: #000;
  color: white;
}
.btn.btn-black:hover {
	background-color: var(--darker);
}
.btn.btn-lg {
	min-width: 200px;
    line-height: 3.2rem;
}
.btn.btn-sm {
	min-width: 100px;
	font-size: 1.6rem;
    line-height: 1.8rem;
}
.btn.btn-block{
	width: 100%;
}

.btn:disabled{
	cursor: not-allowed;
	opacity: 0.8;
}


/*********************************************/
/******************NAVIGATION*****************/
/*********************************************/
.main-nav{
	padding: 15px 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: transparent;
	z-index: 30;
	transition: all 0.5s;
}
.main-nav.fixed{
	padding: 5px 0;
	background-color: #3e98aaba;
	backdrop-filter: blur(10px);
}
.main-nav.toggled{
	background-color: var(--tone-sea) !important;
	backdrop-filter: blur(10px);
}

.main-nav .container{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.main-nav .nav-left{
	display : flex;
	align-items: center;
}
.main-nav .nav-right{
	align-items: center;
	display : flex;
}
.main-nav .toggler{
	cursor: pointer;
	padding: 0px 10px 0 10px;
	border-radius: 4px;
	border: solid 1px var(--dark);
	display: none;
}
.main-nav .toggler:hover{
	background-color: #00000014;
}
.main-nav .toggler i{
	font-size: 30px;
}
.main-nav .mobile-nav{
	display: none;
	background-color: var(--tone-sea) !important;
	width: 100%;
	flex-direction: column;
	position: fixed;
	padding: 25px;
}

.main-nav .mobile-nav .nav-item{
	margin-bottom: 8px;
}
.main-nav .mobile-nav .nav-item{
	color: white !important;
}
.main-nav .mobile-nav .nav-item:hover{
	color: var(--tone-color) !important;
	font-weight: bold;
}
.main-nav .brand{
	width: 80px;
}
.main-nav .nav-right .nav-item{
	font-size: 14px;
	font-weight: 500;
	margin: 0 15px;
	color: white !important;
}
.main-nav .nav-right .nav-item:hover{
	margin: 0 15px;
	color: var(--tone-color) !important;
}

@media (max-width: 992px) {
	.main-nav .nav-right{
		display : none;
	}
	.main-nav .toggler{
		display: block;
	}
	.main-nav .mobile-nav.active{
		display: flex;
		top: 80px;
	}
	.main-nav.fixed .mobile-nav.active{
		display: flex;
		background-color: var(--tone-sea) !important;
		top: 70px !important;
	}
}


/*********************************************/
/*****************FORMS***********************/
/*********************************************/
.form-group{
	margin-bottom: 1.5rem;
}

/*********************************************/
/**************ECOMMERCE STYLES***************/
/*********************************************/

.product-card .image-container{
	position: relative;
	overflow: hidden;
}
.product-card .image-container:hover .shop-btn, .product-card .image-container:hover .quick-view{
	visibility: visible;
}
.product-card .shop-btn{
	visibility: hidden;
	position: absolute;
	bottom: 0;
	padding: 15px 0;
}
.product-card .quick-view{
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	backdrop-filter: blur(10px);
	background-color: #FFFFFF90;
	font-size: 1.4rem !important;
	border: none !important;
	transition: transform 0.3s;
	transform-origin: center;
}
.product-card .quick-view:hover{
	background-color: white;
}
.product-card .image-container img{
	transition: all 0.3s;
}
.product-card:hover .image-container img{
	transform: scale(1.12);
}
.product-card .crossed-price{
	text-decoration: line-through;
	font-size: 1.4rem;
}
.product-card .discount-price{
	color: var(--error);
	font-weight: bold;
}

/*********************************************/
/****************OTHER UTLITIES***************/
/*********************************************/
.card{
	box-shadow: none !important;
	position: relative;
    background-color: #fff;
    border: 1px solid #c2c2c2;
    border-radius: var(--border-radius) !important;
}
.promo-code{
 	cursor: pointer;
    font-size: 12px;
    padding: 5px 15px;
    border-radius: 5px;
    background-color: rgb(41 188 151 / 11%);
    border: dashed 1px #29bc97;
    color: #29bc97;
    width: 100%;
}
.discount-tag{
	background: #D01717;
	color: white;
	font-size: 12px;
	padding: 2px 4px;
	border-radius: 5px;
}
.crossed-out-price{
	text-decoration: line-through;
}

.empty-state-message{
	padding: 120px 0;
	width: 600px;
	max-width: 100%;
	margin: auto;
	text-align: center;
}
.empty-state-message .icon{
	color: var(--text-light);
	font-size: 7.8rem;
    width: 78px;
}
.empty-state-message .message-title{
	font-size: 1.8rem;
	font-weight: bold;
	color: var(--dark);
}

/**COOKIES AND AGE BANNERS**/
.cookies-banner{
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	padding: 25px;
	border-radius: 10px;
	background-color: black;
	color: white;
	max-width: 100%;
	z-index: 9999;
}
@media (min-width: 575.98px) {
	.cookies-banner{
		width: 400px;
		left: 25px;
		right: unset;
		bottom: 25px;
	}
	
}

.contact-whatsapp{
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 25px;
	right: 25px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #25d366;
	z-index: 25;
}
.contact-whatsapp:hover{
	background-color: #1f9f4f;
}
.contact-whatsapp a{
	color: white !important;
}
.contact-whatsapp i{
	margin-top: 3px;
	font-size: 36px;
}
/*Text editor content fix*/
.text-editor-content p{
	margin-bottom: 0px;
}


/*********************************************/
/****************FOOTER***************/
/*********************************************/
footer {
  color: var(--white);
  background: var(--tone-sea);
}
footer a{color: var(--dark-grey) !important;}
footer a:hover{text-decoration: underline;}
footer .logo{
	width: 140px;
	max-width: 100%;
}
footer .footer-title{
	font-weight: bold;
	font-size: 1.8rem;
}


/*********************************************/
/****************LANDING PAGE***************/
/*********************************************/
.main-hero{
	font-family: 'Abel', Sans-Serif;
	height: 700px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.main-hero h2{
	letter-spacing: 15px;
	opacity: 0.8;
	color: white;
	font-size: 42px;
}
.main-hero h1{
	letter-spacing: 5px;
	margin-top: -18px;
	font-weight: bold;
	color: white;
	font-size: 62px;
}

.page-hero{
	position: relative;
	font-family: 'Abel', Sans-Serif;
	height: 400px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.page-hero h2{
	letter-spacing: 15px;
	opacity: 0.8;
	color: white;
	font-size: 42px;
}
.page-hero h1{
	letter-spacing: 5px;
	margin-top: -18px;
	font-weight: bold;
	color: white;
	font-size: 62px;
}
.page-hero .overlay{
	background-color: #000000;
    opacity: 0.2;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
        height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

@media (max-width: 575.98px) {
	.page-hero h1{
		font-size: 41px;
	}
	
}




/*********************************************/
/****************BUEFY EDITS***************/
/*********************************************/
.select{
	font-size: 1.6rem !important;
}
.b-checkbox.checkbox.is-small{
	font-size: 1.4rem !important;
}
.b-checkbox.checkbox input[type=checkbox]:checked+.check{
	border: solid 1px var(--tone-color) !important;
	background: var(--tone-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
}
.pagination a{
	font-size: 1.6rem;
	color: var(--darker) !important;
}
.pagination-link.is-current{
	background-color: transparent !important;
	border: solid 1px var(--tone-color) !important;
	color: var(--tone-color) !important;
}
.input{
	font-size: 1.6rem !important;
}
.textarea{
	font-size: 1.6rem !important;
}
.help{
	font-size: 1.4rem !important;
}
.b-radio.radio.is-small{
	font-size: 1.4rem !important;
}

.datepicker-content{
	font-size: 1.4rem !important;
}
.datepicker-content a{
	color: #604c39 !important;
}
.datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selected{
	color: white !important;
	background-color: var(--tone-color) !important;
}
.tag:not(body){
	font-size: 1.4rem !important;
	border: solid 2px white;
}
.tag:not(body).active{
	border: solid 2px black;
}
.tag:not(body):hover{
	border: solid 2px black;
}

.b-steps .steps .step-items .step-item{
	font-size: 1.4rem !important;
}
.b-steps .steps .step-items .step-item .step-marker {
    height: 3rem !important;
    width: 3rem !important;
}
.b-steps .steps  .step-title{
	font-size: 1.4rem !important;
	color: var(--dark-grey);
}

.b-steps .steps .step-items .step-item.is-active .step-marker {
	font-size: 1.4rem !important;
	background-color: #fff;
    border-color: var(--tone-color) !important;
    color: var(--tone-color) !important;
}

.b-steps .steps  .step-title{
	font-size: 1.4rem !important;
	color: var(--dark-grey);
}
.b-steps .steps .step-items .step-item.is-active .step-title{
	color: var(--tone-color) !important;
}
.b-steps .step-item::after {
	   background: linear-gradient(to left,#dbdbdb 50%,#e91e63 50%) !important;
}
.b-tooltip .tooltip-content{
	font-size: 1.4rem!important;
}
.b-numberinput .control button{
	height: 40px !important;
    width: 40px !important; 
    background-color: var(--dark) !important;
}