/**
 * Global
 **/

body {
  font-family: "Raleway", sans-serif;
/*
  background: repeating-linear-gradient(
    135deg,
    #fcfcfc 0,
    #fcfcfc 10%,
    transparent 0,
    transparent 50%
  );
*/
  background-size: 1em 1em;
  background-color: #ffffff;
  opacity: 1;

  padding-top: 70px;
}

a {
  color: #a022a3;
  text-decoration: none;
}

h2,
h3,
h4,
h5 {
  color: #590f56;
  text-transform: uppercase;
}

h1 {
  font-size: 60px;
  color: #a022a3;
  text-transform: uppercase;

  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
}

footer {
  background: #c766c9;
}

/******************
 * Theme
 ******************/

/**
 * Navbar
 */
.navbar {
  /* background-color: #c766c9; */
  background-color: #FFFFFF;
}

.navbar-brand {
  font-size: 30px;
  text-transform: uppercase;
  color: #590F56;
}

.navbar-light .navbar-nav .nav-link {
    color: #000000; /* Set the color of the nav links */
    font-size: 20px;
    text-transform: uppercase;
  }
  
  .navbar-light .navbar-nav .nav-link:hover {
    color: #590F56; /* Hover color for nav links */
  }

.navbar-dark .navbar-nav .nav-link {
  color: #000000; /* Set the color of the nav links */
  font-size: 20px;
  text-transform: uppercase;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #ccc; /* Hover color for nav links */
}

footer h2 {
  color: #ffffff;
}

h1.header-hero {
  font-size: 120px;
  color: #c69aff;
  text-transform: uppercase;

  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;

  color: #ffffff;
  background-image: -webkit-radial-gradient(
    circle,
    #ffffff 0%,
    #eac7eb 0%,
    #ffffff 53%
  );
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}

p.lead-larger {
  font-size: 40px;
}

/* Hero Section */
.hero {
  height: 100vh; /* Full viewport height */
  background-image: url("/images/christine-chan-3.jpg"); /* Replace with your image */
  background-size: cover; /* Ensure the image covers the whole section */
  background-position: center top; /* Center the image */
  background-repeat: no-repeat; /* Prevent repeating */
  position: relative; /* For potential overlays */
}

/* Optional: Overlay to darken the image */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(
    89,
    22,
    128,
    0.2
  ); /* Darken the image with a semi-transparent overlay */
  z-index: 1;
}

/* Hero Content Styling */
.hero .col-12 {
  position: relative;
  z-index: 2; /* Place the content above the overlay */
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: center; /* Center items vertically */
}

#player {
  background: #fbfbfb;
  padding: 10px;
  text-align: center;
}





/*Embed from embedresponsively.com*/
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* Backgrounds*/

.bg-white {
	background: #FFFFFF;
}

.bg-black {
	background: #000000;
}


.bg-light-gray {
	background: #FAFAFA;
}

.bg1 {
    background: #590F56;
}

.bg1 h2, h3, h4, h5 {
    color: #FFFFFF;
}

.bg1 a {
    color: #C69AFF;
}


.bg2 {
    background: #88D0F0;
}

.bg2 h2, h3, h4, h5 {
    color: #FFFFFF;
}


.bg3 {
	background: #EBE6C9;
}


.bg-piano {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)),
    url('/images/bg-piano-1.jpg') no-repeat center center;
    background-size: cover;
}


.btn-cta {
    background-color: #590F56;
    border-color: #590F56;
    color: #fff; /* Text color */
}

.btn-cta:hover {
    background-color: #790A75; /* Replace this with your desired hover color */
    border-color: #790A75; /* Match the hover border color */
    color: #fff; /* Text color on hover */
}




.stylized {
    box-shadow: 5px 5px #C69AFF99;
}



.work-list {
}

.work-list li {
/* 	background-color: #fdf9e2; */
	background-color: #FFFFFFAA;
}



/**
 * Form
 */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't affect the total width */
    padding: 10px; /* Optional: Adds padding inside the fields */
    margin-bottom: 15px; /* Optional: Adds space below each field */
    border: 1px solid #ccc; /* Optional: Adds a border */
    border-radius: 4px; /* Optional: Adds rounded corners */
    font-size: 16px; /* Optional: Sets the font size */
}

.starlabel label:after {
  content:" *";
  color: red;
  font-size: 20px;
}



/******************
 * Mobile Specific Adjustments
 ******************/

@media (max-width: 767.98px) {
  h1.header-hero {
	margin-top: 40px;
    font-size: 40px;
    color: #590F56;
    background-image: none;
    -webkit-text-fill-color: inherit;
  }
}