/* manrope-200 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/manrope-v15-latin_latin-ext-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  font-display: swap;
}
/* manrope-300 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/manrope-v15-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  font-display: swap;
}
/* manrope-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/manrope-v15-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  font-display: swap;
}
/* manrope-500 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/manrope-v15-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  font-display: swap;
}
/* manrope-600 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/manrope-v15-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  font-display: swap;
}
/* manrope-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/manrope-v15-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  font-display: swap;
}
/* manrope-800 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/manrope-v15-latin_latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  font-display: swap;
}



:root{
--theme-color: #e11b29;
--light-accent: #f9f41f;
--secondary-color: #252525;	
--form-danger: #f38088;
--radius-standard: 15px;
--shadow-on-dark: 0px 10px 30px rgba(255,255,255,0.1);
--bs-link-color: white;
--bs-link-color-rgb: white;
--bs-link-hover-color: #e11b29;
--bs-link-hover-color-rgb: #e11b29;
}


body,
html{
font-family: 'Manrope', sans-serif;
}
body{
	background-color: var(--secondary-color);
	color: white;
	
}

section{
padding: 30px 0px;
}

ul{
	list-style: none;
	padding: 0px;
	margin: 0px;
}

a{
  text-decoration: none;
}
.service-packs .pack{
background-color: rgba(255,255,255,0.2);
display: block;
border-radius: var(--radius-standard);
box-shadow: var(--shadow-on-dark);
padding: 35px 10px 20px;
position: relative;
color: white;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 20px;
transition: 300ms ease;
transform: scale(1.0);
}

.service-packs .pack:hover{
background-color: var(--theme-color);
box-shadow:  0px 10px 30px rgba(225,27,41,0.3);
transition: 150ms ease;
transform: scale(1.05);
}

.service-packs .pack ul li{
text-align: left;
display: flex;
gap: 5px;
align-items: center;
line-height: 1;
font-size: 14px;
}
.service-packs .pack ul li:not(:last-of-type){
margin-bottom: 10px;

}
.service-packs .pack ul li span.icon{
background-color: rgba(0,0,0,0.3);
border-radius: 50%;
padding: 2px;
font-size: 16px;
}

.service-packs .pack .pack-row >*{
margin: 0px;
}
.service-packs .pack .pack-row{
	flex: 1;
}

.service-packs .pack .pack-row.main-btn p{
display: inline-block;
background-color: var(--theme-color);
padding: 5px 15px;
border-radius: var(--radius-standard);
font-weight: bold;
transition: 300ms ease;
}

.service-packs .pack:hover .main-btn p{
background-color: white;
color: var(--theme-color);
transition: 150ms ease;
}
.service-packs .pack:hover .price h3{
color: white;
}

.service-packs .pack .top-info{
	position: absolute;
	top: 5px;
	right: 5px;
}

.service-packs .pack .top-info p.tag{
display: inline-block;
margin: 0px 2px;
padding: 3px 10px;
background-color: rgba(0,0,0,0.5);
border-radius: var(--radius-standard);
font-size: 14px;
line-height: 1;
font-weight: 400;
letter-spacing: 1.2px;
}

.service-packs .pack .thumbnail img{
	height: 80px;
	width: auto;
}

.service-packs .pack .heading p.name{
font-size: 20px;
font-weight: bold;
}

.service-packs .pack .heading p.description{
font-size: 14px;
letter-spacing: 1.1px;
}

.service-packs .pack .price h3{
font-weight: 600;
color: var(--light-accent);
}



section.wizzard{
  background-color: var(--theme-color);
  color: white;
}

section.wizzard > *{
color: white;
}

section.wizzard .page-heading{
text-align: left;
}

.wizzard .steps{
display: flex;
justify-content: space-between;
gap: 15px;
}

.wizzard .steps .step{
display: flex;
align-items: center;
max-width: 170px;
width: 100%;
background-color: rgba(0,0,0,0.5);
gap: 10px;
padding: 5px 15px;
border-radius: var(--radius-standard);
border: 2px solid transparent;
}

.wizzard .steps .step .number{
font-size: 30px;
margin-bottom: 0px;
font-weight: 800;
}

.wizzard .steps .step .name{
text-align: left;
margin-bottom: 0px;
line-height: 1.2;
font-size: 14px;
}

.wizzard .steps .step.active{
background-color: #121111;
box-shadow: 0px 5px 30px rgba(0,0,0,0.4);
border-color: var(--light-accent);
}
:root{
--bs-body-bg: transparent;
--bs-border-width: 2px;
--bs-border-color: white;
--bs-body-color: white;
--bs-border-radius: 15px;
--bs-form-invalid-color: var(--form-danger);
   --bs-secondary-color: rgba(255,255,255,0.8);

}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--theme-color);
    --bs-btn-border-color: var(--theme-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-green);
    --bs-btn-hover-border-color: var(--bs-green);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

}

form .btn{
  --bs-btn-font-size: 20px;
  --bs-btn-font-weight: 800;
  --bs-btn-line-height: 1.4;
}

form a{
  font-weight: 800 ;
}
.btn-primary span{
border-radius: 50%;
background-color: rgba(0,0,0,0.3);
padding: 5px;
font-size: 85%;
font-weight: 800;
}
form{
  text-align: left;
}

form .feedback{
 font-weight: 800;
 letter-spacing: 1.2;
}
.form-check-input:checked{
border-color: white;
background-color: rgba(255,255,255,0.1);
color: var(--theme-color);
}
.form-check-input:focus{
  border-color: white;
  box-shadow: none;
}

form .nice-select{
  background-color: transparent;
  border-width: 2px;
}

form .nice-select .option{
color: white;
background-color: #000000;
}
form .nice-select .option:hover,
form .nice-select .option.focus,
form .nice-select .option.selected.focus{
background-color: #121111;
color: rgba(255,255,255,0.8);
}
form .nice-select .list:hover .option:not(:hover){
background-color: #1e1d1d!important;
}
.form-label{
  font-size: 20px;
  font-weight: 600;
}
.form-control:focus{
  border-color: var(--light-accent);
   box-shadow: none;
}
.form-control.is-invalid, .was-validated .form-control:invalid{
border-color: var(--form-danger);
}

.is-invalid~.invalid-feedback, .is-invalid~.invalid-tooltip, .was-validated :invalid~.invalid-feedback, .was-validated :invalid~.invalid-tooltip{

}


.nice-select .nice-select-dropdown{
  background-color: #000000;
}


.order-summary{
  background-color: rgba(255,255,255,0.1);
  border-radius: var(--radius-standard);
  padding: 15px;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
}

.order-summary p{
margin: 0px;
}

.order-summary .order-row:not(:last-of-type){
margin-bottom: 15px;
}

.order-summary .order-row{
  text-align: left;
}

.order-summary .order-row .row-tag{
opacity: 0.8;
font-size: 14px;
letter-spacing: 1.2px;
color: white;
}
.order-summary .order-row p.price{
font-size: 25px;
color: var(--light-accent);
font-weight: 800;
}

.order-summary .order-row p.registered-name{
font-size: 20px;
font-weight: 800;
}
.order-summary .order-row img.brand-logo{ 
  height: 100px;
  width: auto;
}


   @keyframes fade-in {
     from { opacity: 0; }
   }

   @keyframes fade-out {
     to { opacity: 0; }
   }

   @keyframes slide-from-top {
     from { transform: translateY(-90px); }
   }

   @keyframes slide-to-bottom {
     to { transform: translateY(90px); }
   }

   .slide-it {
     view-transition-name: slide-it;
   }

   ::view-transition-old(slide-it) {
     animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
   }
   ::view-transition-new(slide-it) {
     animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
   }