/* Custom Fonts */
@font-face {
  font-family: Quicksand;
  font-weight: 500;
  src: url("/font/Quicksand-VariableFont_wght.ttf");
}

@font-face {
  font-family: Rancho;
  font-weight: 400;
  src: url("/font/Rancho-Regular.ttf");
}

body {
  font-family: Quicksand;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Rancho;
  text-transform: none !important;
  letter-spacing: normal !important;
}

h1 {
  font-size: 6rem !important;
}

h2 {
  font-size: 5rem !important;
}

h3 {
  font-size: 4rem !important;
}

h4 {
  font-size: 3rem !important;
}

h5 {
  font-size: 2.5rem !important;
}

h6 {
  font-size: 1rem !important;
}

p {
  font-size: 1.85rem;
}

.testimonial p {
  font-size: 1.6rem;
}

a.btn {
  margin-bottom: 1rem;
}

/* Nav bar */

.navbar-brand {
  align-content: center;
}

.navbar-brand h4 {
  margin: 0;
}

/* Home page carousel */

.home-carousel .owl-carousel {
    padding-top: 20px;
}

.home-carousel .dark-mask {
    opacity: 0.7;
}

.home-carousel .center {
    text-align: center;
}

.home-carousel .title {
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
}

.home-carousel .title:after {
    background-color: #2bc9ce;
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 40%;
    height: 1px;
    margin-left: -20%;
}

.home-carousel .subtitle {
    font-weight: 300;
}

/* Home page about */
.about-row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  gap: 5rem;
}

.about-item {
  flex: 1;
  margin: auto;
}

.about-text {
  flex: 2;
}

@media all and (max-width: 500px) {
  .about-row {
    flex-direction: column-reverse;
    gap: 1rem;
  }
}

/* Home page testimonials */

.bar.background-pentagon {
  background: #fff;
  border-top: none;
  border-bottom: none;
}

.testimonials .owl-item .item {
  background-color: #f0ffff;
}

/* Mobile navbar menu button */

.navbar-header .navbar-brand {
    margin-left: 50px;
}

.navbar-header .navbar-buttons {
    position: absolute;
}

.navbar-header .navbar-buttons .navbar-toggle {
    margin: 0px;
    padding: 20px;
}

/* Page heading */

#heading-breadcrumbs {
  position: relative;
  background: url('/img/texture-sheet-music.png') center center repeat;
}

#heading-breadcrumbs .heading-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-accent);
}

#heading-breadcrumbs .heading-mask-sheet {
  opacity: 0.9;
  filter: alpha(opacity=90);
}

#heading-breadcrumbs h1 {
  color: white;
  text-transform: none;
}


/* Speech Bubbles */

.bubble {
  --r: 25px; /* the radius */
  --t: 30px; /* the size of the tail */

  max-width: 300px;
  padding: calc(2*var(--r)/3);
  -webkit-mask:
    radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%)
      var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
    conic-gradient(at var(--r) var(--r),#000 75%,#0000 0)
      calc(var(--r)/-2) calc(var(--r)/-2) padding-box,
    radial-gradient(50% 50%,#000 98%,#0000 101%)
      0 0/var(--r) var(--r) space padding-box;
  background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
  color: #fff;
}
.left {
  --_d: 0%;
  border-left: var(--t) solid #0000;
  margin-right: var(--t);
  place-self: start;
}
.right {
  --_d: 100%;
  border-right: var(--t) solid #0000;
  margin-left: var(--t);
  place-self: end;
}