:root{
    --color-primary: #ad2831;
    --primary-color: #ad2831;
    --primary-color-light: #140c1c;
    --secondary-color: #800e13;
    --russo: "Russo One", sans-serif;
    --body-color: #525252;
    --headline-color: #262626;
    --light-color: #F4F4F4;
}


body{
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    color: #404040;
    background-color: #F4F4F5;
}



* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--secondary-color);
}

.text-justify{
    text-align: justify;
}


.scrollbar-track{
    background-color: var(--secondary-color) !important;
}

.scrollbar-thumb{
    background-color: var(--primary-color) !important;   
}

.navbar{
    position: fixed;
    top: 0;
    width: 100vw;
    box-shadow: 0 1px 10px rgba(0,0,0,.1);
    z-index: 99;
}

.navbar, .navbar .container, .navbar .logo img{
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .3s;
}

.navbar .logo img{
    display: inline;
}

.navbar .logo img:not(.light){
    opacity: 0;
    display: none;
}

.navbar .logo img{
    height: 55px;
}


.navbar-nav {
    column-gap: 2.8125rem;
}

.nav-link:after{
    content: "";
    background-image: linear-gradient(260deg, #fff, #ddd);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .5s;
    bottom: 25px;
    position: absolute;
    height: .125rem;
    width: 0%;
    right: 0;
}

.nav-link:hover:after{
    left: 0;
}

.nav-item:hover .nav-link:after, .nav-item.active .nav-link:after {
    width: 100%;
}

.navbar-top{
    background: transparent;
    box-shadow: none;
}


.navbar-top .nav-link{
    color: #fff;
}

.scrolled .navbar .logo img.light{
    opacity: 0;
    display: none;
}

.scrolled .navbar .logo img:not(.light){
    opacity: 1;
    display: block;
}


.scrolled .navbar-top .nav-link:after{
    background-image: linear-gradient(260deg, #ad2831, #640d14);
}

.scrolled .navbar{

    background: rgba( 255, 255, 255, 0.01 ) !important;
    backdrop-filter: blur(10px);
    background: none;
    padding-bottom: 0 !important;
}

.scrolled .navbar .container{
    box-shadow: 0 0 30px rgba(0, 0, 0, .05);
    backdrop-filter: blur(10px);
    background: rgba( 255, 255, 255, 0.9 ) !important;
    padding: 0 40px !important;
    border-radius: 100px;
}

.scrolled .navbar .nav-link{
    color: #140c1c;
}

.landing-page:after{
    content: "";
    background-image: url(../images/wave.svg);
        background-size: cover;
    height: 200px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -5px;
}

.landing-page h1{
    font-size: 50px;
}


h1,h2,h3,h4,h5,h6{
    font-family: 'DM Sans', sans-serif;
}

.landing-page{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(90deg, #ad2831, #800e13);
}

.bg-primary-gradient{
    background: linear-gradient(90deg, #ad2831, #800e13);
}

.default-padding{
    padding-top:80px;
    padding-bottom: 80px;
}

.tx-hl{
    background-color: #ad2831;
}

.mx-text {
    max-width: 720px;
}
a {
    color: inherit;
    text-decoration: none;
}

.progress-wrap {
	position: fixed;
    right: 10px;
    bottom: 20px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset 0 0 0 2px rgba(243, 214, 215, 0.5);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.progress-wrap::after {
	position: absolute;
	font-family: bootstrap-icons!important;
	content: '\F145';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	color: var(--primary-color); /* --- Pijl kleur --- */
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 1;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::after {
	opacity: 0;
}
.progress-wrap::before {
	position: absolute;
	font-family: bootstrap-icons!important;
	content: '\F145';
	text-align: center;
	line-height: 46px;
	font-size: 24px;
	opacity: 0;
	background: var(--primary-color); /* --- Pijl hover kleur --- */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	left: 0;
	top: 0;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	z-index: 2;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::before {
	opacity: 1;
}
.progress-wrap svg path { 
	fill: none; 
}


.progress-wrap svg.progress-circle path {
	stroke: var(--primary-color); /* --- Lijn progres kleur --- */
	stroke-width: 4;
	box-sizing:border-box;
	-webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}



.domain-card{
    padding: 20px;
    border-radius: 16px;
    border: 2px solid #F4F4F4;
    margin-bottom: 30px;
    background-color: #fff;
}

.domain-card .name{
    font-size: 20px;
    font-weight: bold;
    color: var(--headline-color);
}

.domain-card .price{
    font-size: 20px;
    font-weight: bold;
    color: var(--color-primary);
}

.domain-card span{
    font-size: 12px;
    color: var(--disabled-color);
}

.domain-card .progress-circle {
    font-size: 18px;
    position: relative;
    padding: 0;
    width:4.5em;
    height: 4.5em;
    background-color: #f5f5f5;
    border-radius: 50%;
    line-height: 4.5em; }
    .domain-card .progress-circle span {
      position: absolute;
      line-height: 4.5em;
      width: 4.5em;
      text-align: center;
      display: block;
      font-size: 20px;
      font-weight: bold;
      color: var(--headline-color);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2; }
    .domain-card .progress-circle.over-50 .first50-bar {
      position: absolute;
      clip: rect(0, 4.5em, 4.5em, 2em);
      background-color: var(--color-primary);
      border-radius: 50%;
      width: 4.5em;
      height: 4.5em; }
    .domain-card .progress-circle .left-half-clipper {
      border-radius: 50%;
      width: 4.5em;
      height: 4.5em;
      position: absolute;
      clip: rect(0, 4.5em, 4.5em, 2em); }
    .domain-card .progress-circle:after {
      border: none;
      position: absolute;
      top: .55em;
      left: .55em;
      text-align: center;
      display: block;
      border-radius: 50%;
      width: 3.5em;
      height: 3.5em;
      background-color: #fff;
      content: " "; }
    .domain-card .progress-circle .value-bar {
      position: absolute;
      clip: rect(0, 2em, 4.5em, 0);
      width: 4.5em;
      height: 4.5em;
      border-radius: 50%;
      border: 0.45em solid var(--color-primary);
      box-sizing: border-box; }

      .domain-card .progress-circle.over-50 .left-half-clipper {
        clip: rect(auto,auto,auto,auto);
     }

     .domain-card .progress-circle:not(.over-50) .first50-bar{ display: none; }


.bg-light{
    background-color: #f5f5f5 !important;
}

.service-card{
    padding: 30px 16px;
    border-radius: 16px;
    border: 2px solid #F4F4F4;
    margin-bottom: 30px;
    background-color: #fff;
}

.service-card .icon{
    display: inline-block;
    margin: auto;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    vertical-align: middle;
    font-size: 25px;
}

.service-card .icon-1{
    background-color: 	rgba(227, 242, 253, .5);
    color: 	#0D47A1;
}

.service-card .icon-2{
    background-color: 	rgba(232, 245, 233, .5);
    color: 	#1B5E20;
}


.service-card .icon-3{
    background-color: 	rgba(243, 229, 245, .5);
    color: 	#4A148C;
}


.service-card .icon-4{
    background-color: 	rgba(255, 245, 231, 0.6);
    color: 	#F57F17;
}



.service-card .icon-5{
    background-color: 	rgba(0, 150, 136, .05);
    color: 		rgb(0, 104, 87);
}



.service-card .icon-6{
    background-color: 	rgba(244, 67, 54, .1);
    color: 		rgb(183, 28, 28);
}

.wave-bottom{
    padding-top: 250px;
}

.wave-bottom:before{
    content: "";
    background-image: url(../images/wave\ \(6\).svg);
        background-size: cover;
    height: 200px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0px;
}

.wave-bottom-2{
    padding-bottom: 180px;
}


.wave-bottom-2:after{
   content: "";
    background-image: url(../images/wave\ \(4\).svg);
        background-size: contain;
    height: 120px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -5px;
}

.md-stepper-horizontal {

	display:table;
	width:100%;
	margin:0 auto;
	background-color:#FFFFFF;
    border-radius: 20px;
	box-shadow: 0 3px 8px  rgba(0,0,0,.05);
}
.md-stepper-horizontal .md-step {
	display:table-cell;
	position:relative;
	padding:24px;
    transition: all .3s ease;
}
.md-stepper-horizontal .md-step:hover,
.md-stepper-horizontal .md-step:active {
	background-color:rgba(0,0,0,0.02);
	border-radius: 5%;
    transform: translateY(-1px);
}


.md-stepper-horizontal .md-step:hover .md-step-circle {
	background-color:#757575;
}
.md-stepper-horizontal .md-step:first-child .md-step-bar-left,
.md-stepper-horizontal .md-step:last-child .md-step-bar-right {
	display:none;
}
.md-stepper-horizontal .md-step .md-step-circle {
	width:50px;
	height:50px;
	margin:0 auto;
	background-color:#999999;
	border-radius: 50%;
	text-align: center;
	line-height:48px;
	font-size: 25px;
	font-weight: 600;
	color:#FFFFFF;
    vertical-align: middle;
    position: relative;
    z-index: 5;
}
.md-stepper-horizontal.green .md-step.active .md-step-circle {
	background-color:#00AE4D;
}
.md-stepper-horizontal.orange .md-step.active .md-step-circle {
	background-color:var(--color-primary);
}
.md-stepper-horizontal .md-step.active .md-step-circle {
	background-color: rgb(33,150,243);
}
.md-stepper-horizontal .md-step.done .md-step-circle:before {
	font-family:'FontAwesome';
	font-weight:100;
	content: "\f00c";
}
.md-stepper-horizontal .md-step.done .md-step-circle *,
.md-stepper-horizontal .md-step.editable .md-step-circle * {
	display:none;
}
.md-stepper-horizontal .md-step.editable .md-step-circle {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
.md-stepper-horizontal .md-step.editable .md-step-circle:before {
	font-family:'FontAwesome';
	font-weight:100;
	content: "\f040";
}
.md-stepper-horizontal .md-step .md-step-title {
	margin-top:16px;
	font-size:21px;
	font-weight:700;
}
.md-stepper-horizontal .md-step .md-step-title,
.md-stepper-horizontal .md-step .md-step-optional {
	text-align: center;
	color:rgba(0,0,0,.26);
}
.md-stepper-horizontal .md-step.active .md-step-title {
	font-weight: 600;
	color:rgba(0,0,0,.87);
}
.md-stepper-horizontal .md-step.active.done .md-step-title,
.md-stepper-horizontal .md-step.active.editable .md-step-title {
	font-weight:600;
}
.md-stepper-horizontal .md-step .md-step-optional {
	font-size:12px;
}
.md-stepper-horizontal .md-step.active .md-step-optional {
	color:rgba(0,0,0,.54);
}
.md-stepper-horizontal .md-step .md-step-bar-left,
.md-stepper-horizontal .md-step .md-step-bar-right {
	position:absolute;
	top:46px;
	height:1px;
	border-top:4px solid rgba(229, 132, 137, 0.5);
    z-index: 1;
}
.md-stepper-horizontal .md-step .md-step-bar-right {
	right:0;
	left:50%;
	margin-left:20px;
}
.md-stepper-horizontal .md-step .md-step-bar-left {
	left:0;
	right:50%;
	margin-right:20px;
}

.sb-form .form-control{
        border: none;
    border-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

.sb-form .form-floating>label{
       padding-left: 20px;
    padding-right: 20px;
}

.btn-buy{
    background-color: var(--primary-color);
    border-radius: 100px;
}

.btn-buy:hover{
    background-color: var(--secondary-color) !important  ;
}

.btn-buy img{
  height: 25px;   
}

.page-link{
    --bs-pagination-color: var(--primary-color);
    --bs-pagination-focus-bg: #fdefef;
    --bs-pagination-focus-color: var(--primary-color);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(173, 40, 49, 0.25);
    --bs-pagination-hover-color: var(--secondary-color);
}

.active>.page-link{
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
}

.sort-container {
    position: relative;
    display: inline-block;
}

.sort-button {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: background-color 0.2s;
}
.sort-clear{
    transition: background-color 0.2s;

}

.sort-button:hover {
    background-color: #f8f9fa;
}

.sort-clear:hover {
    background-color: #f8d7da;
    color: #a71d2a;
}

.sort-dropdown {
    position: absolute;
    top: 110%;
    right: 0;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 0;
    width: 180px;
    display: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    z-index: 99;
}

.sort-option {
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.sort-option:hover {
    background-color: #f1f1f1;
}

.sort-option.active {
    background-color: var(--color-primary);
    color: white;
}

.sort-option.active i {
    color: white;
}

@media (max-width: 720px){
    .default-padding{
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (min-width: 720px){
    #main-scrollbar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}