/* you can add your own custom css here if you don't want to worry about SASS/SCSS */
:root {

    /* Backgrounds */
    --bg: #D5D9D8;
    --bg-alt: #F2F4F5;
    --surface: #FFFFFF;

    /* Brand Colours */
    --primary: #383E49;
    --secondary: #566A7E;
    --accent: #EFA012;
    --accent-hover: #FF6B4A;

    /* Text */
    --text: #0F0803;
    --text-light: #FFFFFF;
    --text-muted: #74879C;

    /* Borders */
    --border: #B7C0C8;

    --bs-link-color: var(--secondary);
    --bs-link-hover-color: var(--accent);
    --bs-link-color-rgb: 86,106,126;
    --bs-link-hover-color-rgb: 239,160,18;

}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ensures body is full height */
  background: var(--bg-alt);
  color: var(--text);
  font-family: 'Alpino-Regular';
  font-size: 17px;
  /* font-family: Inter, Arial, sans-serif; */
}

header{

    background: var(--primary);

    color: var(--text-light);

}

.navbar a{

    color: white;

    transition: .3s;

}

.navbar a:hover{

    color: var(--accent);

}

.btn-primary{

    background: var(--primary);

    color: white;

    border: none;

}

.btn-primary:hover{

    background: var(--secondary);

}

.btn-outline-primary{

    color: var(--primary);

    border: 2px solid var(--primary);

    background: transparent;

    transition: all .3s ease;

}

.btn-outline-primary:hover,
.btn-outline-primary:focus{

    color: var(--text);

    background: var(--accent);

    border-color: var(--accent);

}

.btn-outline-primary:active{

    color: var(--text);

    background: var(--accent-hover);

    border-color: var(--accent-hover);

}

.btn-accent, .bg-accent{

    background: var(--accent);

    color: var(--text);

}

.btn-accent:hover{

    background: var(--accent-hover);

}

.btn-cta {

    background: var(--accent);
    border: 2px solid var(--accent);
    color: var(--text);

    font-weight: 600;

    transition: all .25s ease;

    box-shadow: 0 .25rem .75rem rgba(0,0,0,.12);

}

.btn-cta:hover,
.btn-cta:focus {

    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text);

    transform: translateY(-1px);

    box-shadow: 0 .5rem 1rem rgba(0,0,0,.18);

}

.btn-cta:active {

    transform: translateY(0);

    box-shadow: 0 .2rem .5rem rgba(0,0,0,.15);

}

.btn-link {

    color: var(--secondary);

    text-decoration: none;

    font-weight: 500;

    transition: color .3s ease;

}

.btn-link:hover,
.btn-link:focus {

    color: var(--accent);

    text-decoration: underline;

}

.btn-link:active {

    color: var(--accent-hover);

}

.btn-link:disabled,
.btn-link.disabled {

    color: var(--text-muted);

    pointer-events: none;

    opacity: .65;

}

.card{

    background: white;

    border: 1px solid var(--border);

    border-radius:12px;

}

a{

    color: var(--secondary);

}

a:hover{

    color: var(--accent);

}

footer{

    background: var(--primary);

    color: white;

}

input,
textarea,
select{

    border:1px solid var(--border);

    background:white;

}

input:focus,
textarea:focus{

    border-color: var(--accent);

    outline:none;

}

/* Success
background:#D8E8D9;

Warning
background:#FFF4D0;

Error
background:#F8D8D6; */

.site-wrapper {
  flex: 1; /* takes all available space */
}

.badge.bg-primary, .badge.text-bg-primary {
  background-color: #DFD164 !important;
  color: #212529;
}

.badge.bg-danger, .badge.text-bg-danger {
  background-color: #F8C6C6 !important;
  color: #212529;
}

.badge.bg-success, .badge.text-bg-success {
  background-color: #c8efd6 !important;
  color: #212529 !important;
}

.headerClasses .title-padding{
  padding: 10vh 25px;
}

.headerClasses :not(input):not(button) {
    color: var(--text-fanscribr-color);
}

.btn-primary {
  --bs-btn-bg: #DFD164;              /* button background */
  --bs-btn-border-color: #DFD164;    /* button border */
  --bs-btn-hover-bg: #D0C854;        /* hover background */
  --bs-btn-hover-border-color: #D0C854; /* hover border */
  --bs-btn-color: #2B2B2B;           /* text color */

  --bs-btn-active-bg: #c2bb48;
  --bs-btn-active-border-color: #c2bb48;

  --bs-btn-focus-shadow-rgb: 223, 209, 100;
}

.btn-success {
  --bs-btn-bg: #c8efd6;
  --bs-btn-border-color: #c8efd6;
  --bs-btn-hover-bg: #b4e7c5;
  --bs-btn-hover-border-color: #b4e7c5;
  --bs-btn-color: #2b3a42;
}

.btn-danger {
  --bs-btn-bg: #f8c6c6;
  --bs-btn-border-color: #f8c6c6;
  --bs-btn-hover-bg: #f3b1b1;
  --bs-btn-hover-border-color: #f3b1b1;
  --bs-btn-color: #2b3a42;
}

.badge-primary {
  --bs-badge-bg: #DFD164;          /* background */
  --bs-badge-color: #2B2B2B;       /* text color */
}

.badge-success {
  --bs-badge-bg: #C8E6C1;          /* soft mint green */
  --bs-badge-color: #2B2B2B;       /* text color */
}

/* Pastel danger badge */
.badge-danger {
  --bs-badge-bg: #F8C6C6;          /* soft pink */
  --bs-badge-color: #2B2B2B;       /* text color */
}

.contact h3,
.contact legend {
    display: none;
}

.form-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.form-row .control-group{
    flex: 4 1 300px;
}

.form-row button{
    flex: 1 1 auto;
}

button:disabled, .btn:disabled, .btn.disabled{
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #cccccc;
  border-color: #DFD164;
}

.pagination{
  overflow-x: auto;
  flex-wrap: nowrap;
}

.pagination li {
  display: inline-block;
}

label#entry_artist_name-lbl span.star{
  display: none;
}

body, .btn, .form-control, .form-select {
  font-family: 'Alpino-Regular';
  font-size: 17px;
}

.btn {
      font-family: 'Satoshi-Regular';
}


h1, h2, h3, h4, h5, h6{
  font-family: 'Alpino-Bold';
}

header a.brand-logo{
  text-decoration: none;
  font-family: 'Satoshi-Regular';
  font-size: 1.52em;
  margin-right: 50px;
}

header .container-nav{
  padding-top: 1em;
}

.listicon {
    margin: auto;
    width:50px;
    height: 54px;
    background-color: var(--accent-hover);
    border-radius: 25px;
    text-wrap: wrap;
    position: absolute;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  color: #EAE7DC;
  font-size: xx-large;
  
}

.listicon svg{
    margin: 5px;
    width: 40px;
}

.listbody{
    margin-left: 70px;
}

.section {
    margin: 32px 0;
}

.section h3{
    color: #5D4E49;
}

  .logo {
    max-width: 800px;
    width: 80%;
    font-size: 1.3em;
  }

  .hero .promise {
    font-size: 1.3em;
  }

  .hero .statement {
    padding-top: 16px;
  }

  .hero .banner{
    padding-top: 60px;
  }

  .hero .cta{
    padding-top: 40px;
  }

  .hero .benefits > div > div{
    text-align: center;
  }

.statement h1{
  font-size: 3.9em;
}

.cardicon {
    margin: auto;
    width: 50%;
    font-size: 3em;
    /* color: #567258; */
    color: var(--accent-hover);
    background-color: none;
    text-align: center;
}

.section {
    margin: 30px 0;
}

.section h3{
    color: #5D4E49;
}

.features {
    margin: 50px auto;
    max-width: 98%;
    padding: 32px 10px 24px;
  }

  .features .card{
    border: none;
  }

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

  .service {
    margin: 160px auto;
  }

  .about {
    margin: 160px auto;
  }

  .service ul li {
    padding: 32px 0;
  }

  .sitecontainer{
    max-width: 1400px;
    margin: auto;
  }

.service-image{
  padding: 16px;
}

.service-image > img{
  width: 100%;
  max-width: 300px;
  height: auto;
}

.hero .banner img{
  height: 360px;
}

.container-header .navbar-brand{
  margin-inline-end: revert;
}

@media (max-width: 576px){
  .hero .statement {
    font-size: 0.512em;
    text-align: center;
  }

  .hero .promise {
    font-size: 1em;
    text-align: justify;
  }

  .hero .banner img{
    height: 215px;
  }

  .service {
    margin: 96px auto;
  }

  .about {
    margin: 96px auto;
  }

  .hero {
    padding: 36px 20px;
  }

}

.list-group-item, div.features div.card{
  background: var(--bg-alt);
}

.container-header, .container-footer {
  background-image: linear-gradient(135deg, #7d9883 0%, #74896f 100%);
}

h1#enquiry{
  color: #EAE7DC;
    background-color: var(--accent);
    border-radius: 8px;
    padding-left: 12px;
}

.step-number{
    margin: auto;
    width: 50px;
    height: 54px;
    background-color: #7d9883;
    border-radius: 25px;
    text-wrap: wrap;
    position: absolute;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #EAE7DC;
    font-size: xx-large;
}

.v-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.v-steps li {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 50px;
    margin-bottom: 20px;
    min-height: 40px;
}

.v-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 32px;
    width: 2px;
    height: calc(100% - 8px);
    background: #ddd;
}

.v-step-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-hover);
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* .container-header .mod-menu>li>a, .container-header .mod-menu>li>span {
  color: black;
  text-decoration: none;
  position: relative;
}


.container-header, .container-footer {
  background-image: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
  color: black;
} */