* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.7;
  color: #333;
  font-size: 15px;
  /* background-color: #f5f1eb; */
  /* background: linear-gradient(to right, #f6e3ff, #fff, #f6e3ff); */

  /* background-image: linear-gradient(to right, rgba(250, 200, 250, 0.8), rgba(255, 255, 255, 0.8), rgba(250, 200, 250, 0.8)), url("/assets/seamless-4f82b25b.jpg"); */
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("/assets/seamless-4f82b25b.jpg");
  background-size: 20% auto;
  background-position: top left;
  background-repeat: repeat-x repeat-y;

  /* background-image: linear-gradient(to right, rgba(250, 200, 250, 0.5), rgba(255, 255, 255, 0.5), rgba(250, 200, 250, 0.5)), url("/assets/flocks-b7c3f964.jpg");
  background-size: 20% auto;
  background-position: top 300px left 0px;
  background-repeat: no-repeat; */
}

/* Header */
header {
  /* background: linear-gradient(to bottom, #ff0 50%, #e1b9f3 100%); */
  background-image: url("/assets/banner-33-4b39defe.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(251, 252, 177, 0.8)), url("/assets/seamless-4f82b25b.jpg");
  background-size: 20% auto;
  background-position: center;
  background-repeat: repeat-x; */

  color: #235dc2;
  padding: 50px 20px;
  text-align: center;
  /* border-bottom: 8px solid #d0a4cc; */
}

header h1 {
  font-size: 4em;
  margin-bottom: 15px;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 2px;
  /* -webkit-text-stroke: 1px #fff; */
  text-shadow: -2px -2px 0 white,
  0px -2px 0 white,
  2px -2px 0 white,
  2px 0px 0 white,
  2px 2px 0 white,
  0px 2px 0 white,
  -2px 2px 0 white,
  -2px 0px 0 white;
}

header p {
  font-size: 2.2em;
  margin-bottom: 10px;
  font-style: italic;
  font-weight: bold;
  opacity: 0.95;
  text-shadow: -1px -1px 0 white,
  0px -1px 0 white,
  1px -1px 0 white,
  1px 0px 0 white,
  1px 1px 0 white,
  0px 1px 0 white,
  -1px 1px 0 white,
  -1px 0px 0 white;
}

.dates {
  font-size: 2.2em;
  font-weight: bold;
  margin-top: 15px;
  letter-spacing: 1px;
  text-shadow: -1px -1px 0 white,
  0px -1px 0 white,
  1px -1px 0 white,
  1px 0px 0 white,
  1px 1px 0 white,
  0px 1px 0 white,
  -1px 1px 0 white,
  -1px 0px 0 white;
}

/* Navigation */
nav {
  background: #bc6af5;
  padding: 15px 20px;
  text-align: center;
  font-weight: bold;
  /* border-bottom: 4px solid #6003a1; */
}

nav a {
  color: #f5f1eb;
  text-decoration: none;
  margin: 0 20px;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.3s;
}

nav a:hover {
  color: #6003a1;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Admin Navigation */
.active {color: #ddd; cursor: none;}
.none-active {color: yellow; cursor: pointer;}

/* Main content */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

section {
  /* color: #bc6af5; */
  color: #5943bb;
  margin: 50px 0;
  background: white;
  padding: 40px;
  border-top: 6px solid #d0a4cc;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

h2 {
  /* color: #bc6af5; */
  color: #5943bb;
  font-size: 2em;
  margin-bottom: 25px;
  font-weight: normal;
  letter-spacing: 1px;
  border-bottom: 3px solid #d0a4cc;
  padding-bottom: 15px;
}

h3 {
  color: #6b4423;
  font-size: 1.4em;
  margin-top: 25px;
  margin-bottom: 15px;
  font-weight: normal;
}

/* Hero section */
.hero-section {
  /* background: linear-gradient(135deg, #e8dcc8 0%, #f5f1eb 100%); */
  background: linear-gradient(to right, #daa8fc, #f1defc, #daa8fc);
  text-align: center;
  padding: 60px 40px;
  border-top: 6px solid #d0a4cc;
  margin-bottom: 30px;
}

.hero-section h1 {
  color: #5943bb;
  font-size: 2.5em;
  margin-bottom: 20px;
  font-weight: normal;
  letter-spacing: 1px;
}

.hero-section p {
  color: #5943bb;
  font-size: 1.5em;
  margin-bottom: 20px;
  font-style: italic;
}

.hero-image {
  margin: 40px 0;
  text-align: center;
}

.hero-image .video-box {
  max-width: 100%;
  height: auto;
  -webkit-box-shadow: 1px 9px 19px 2px rgba(122, 4, 126, 0.43);
  -moz-box-shadow: 1px 9px 19px 2px rgba(122, 4, 126, 0.43);
  box-shadow: 1px 9px 19px 2px rgba(122, 4, 126, 0.43);
  /* box-shadow: 0 4px 10px rgba(0,0,0,0.15); */
  /* -webkit-box-shadow: 1px 9px 19px 2px rgba(34, 60, 80, 0.43);
  -moz-box-shadow: 1px 9px 19px 2px rgba(34, 60, 80, 0.43);
  box-shadow: 1px 9px 19px 2px rgba(34, 60, 80, 0.43); */
}

p {font-size: 1.2em;}

/* Rays grid */
.rays-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin: 30px 0;
}

.ray-card {
  background: #faf8f5;
  padding: 25px;
  border-radius: 3px;
  border-top: 5px solid;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.ray-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.12);
}

.ray-card h4 {
  margin-bottom: 12px;
  font-size: 1.3em;
  font-weight: normal;
  color: #2c1810;
}

.ray-card ul {
  list-style-position: inside;
  font-size: 1.0em;
  line-height: 1.8;
  color: #555;
}

.ray-card img {
  width: 35px;
  float: left;
  margin-right: 10px;
}

/* Ray colors */
.ray-1 { 
  border-top-color: #0377d0;
  background: linear-gradient(to right bottom, #a7e5ff, #f7fdfe);
}
.ray-1 h4 { color: #0377d0; }
.ray-1 li { color: #0377d0; }

.ray-2 {
  border-top-color: #a07b35;
  background: linear-gradient(to right bottom, #fff8a9, #fcfee9);
}
.ray-2 h4 { color: #a07b35; }
.ray-2 li { color: #a07b35; }

.ray-3 {
  border-top-color: #d13692;
  background: linear-gradient(to right bottom, #fcbae1, #fefbfb);
}
.ray-3 h4 { color: #d13692; }
.ray-3 li { color: #d13692; }

.ray-4 {
  border-top-color: #5197b0;
  background: linear-gradient(to right bottom, #faecfa, #f9feff);
}
.ray-4 h4 { color: #5197b0; }
.ray-4 li { color: #5197b0; }

.ray-5 {
  border-top-color: #079471;
  background: linear-gradient(to right bottom, #a4fcdc, #f2fefa);
}
.ray-5 h4 { color: #079471; }
.ray-5 li { color: #079471; }

.ray-6 {
  border-top-color: #8425c6;
  background: linear-gradient(to right bottom, #e7c3fc, #fcf7ff);
}
.ray-6 h4 { color: #8425c6; }
.ray-6 li { color: #8425c6; }

.ray-7 {
  border-top-color: #c00e98;
  background: linear-gradient(to right bottom, #feacfb, #faecfa);
}
.ray-7 h4 { color: #c00e98; }
.ray-7 li { color: #c00e98; }

/* Feature boxes */
.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.feature-box {
  background: #faf8f6;
  padding: 25px;
  border-radius: 3px;
  border-bottom: 5px solid #d0a4cc;
  text-align: center;
  transition: transform 0.3s;
}

.feature-box:hover {
  transform: translateY(-3px);
}

.feature-box h3 {
  color: #5943bb;
  font-style: italic;
  margin-bottom: 12px;
}

.feature-icon {
  font-size: 2.8em;
  margin-bottom: 12px;
}
.feature-box img {
  /* width: 70px; */
  height: 70px;
  float: center;
  /* margin-bottom: 20px; */
}

.feature-box p {
  color: #5943bb;
  font-size: 1.0em;
}

/* Benefits section */
.benefits {
  /* background: linear-gradient(135deg, #e8dcc8 0%, #f5f1eb 100%); */
  background-color: faf8f6;
  padding: 40px;
  border-top: 6px solid #d0a4cc;
  margin: 30px 0;
}

.benefits ul {
  /* list-style-image: url("/assets/fl-2ac1e86f.png"); */
  list-style: none;
  margin-top: 20px;
  margin-left: 25px;
}

.benefits li {
  background-size: 20px;
  padding: 12px 0 12px 35px;
  position: relative;
  font-size: 1.2em;
  color: #5943bb;
}

.benefits li:before {
  /* content: "✦"; */
  content: '';
  display: inline-block;
  margin-right: 10px;
  height: 25px;
  width: 23px;
  background-image: url("/assets/fl-2ac1e86f.png");
  position: absolute;
  left: 0;
  color: #6b4423;
  font-weight: bold;
  font-size: 1.2em;
}

/* CTA Section */
.back-img {
  width: 100%;
  background-image: url("/assets/plane-0f6f62ad.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.back-img h2 {color: #000;}
.back-img p {color: #000;}

.col {display: flex; flex-direction: column; justify-content: center;}

.box {flex: 1; margin-bottom: 10px;}

::-webkit-input-placeholder {
  text-align:center;
  font-weight: bold;
  color: #934fce;
}
:-moz-placeholder { /* Firefox 18- */
  text-align:center;
  font-weight: bold;
  color: #934fce;
}
::-moz-placeholder {  /* Firefox 19+ */
  text-align:center;  
  font-weight: bold;
  color: #934fce;
}
:-ms-input-placeholder {  
  text-align:center; 
  font-weight: bold;
  color: #934fce;
}

.input-new {
  width: 45%;
  height: 45px;
  border: 2px solid #fff;
  border-radius: 20px;
  padding-left: 10px;
  font-size: 1.3em;
  /* background-color: #daa8fc8e; */
  background-color: transparent;
}

.btn-new {
  width: 80%;
  height: 80px;
  border: 3px solid #ccc;
  border-radius: 7px;
  padding-left: 10px;
  padding-left: 10px;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.7;
  font-size: 1.9em;
  text-transform: uppercase;
  /* background-color: #a805a0ff; */
  background: linear-gradient(to right, #934fce, #d298fa, #934fce);
  color: #fff;
  margin-top: 10px;
  transition: all 0.3s;
}

.btn-new:hover {
  color: yellow;
  cursor: pointer;
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* .cta-section {
  background: linear-gradient(to bottom, #2c1810 0%, #4a2f1a 100%);
  color: #f5f1eb;
  padding: 50px 40px;
  border-top: 6px solid #d0a4cc;
  text-align: center;
  margin: 40px 0;
}

.cta-section h2 {
  color: #f5f1eb;
  border-color: #d0a4cc;
}

.cta-section p {
  font-size: 1.05em;
  margin-bottom: 15px;
  color: #e8dcc8;
} */

/* .btn {
  display: inline-block;
  background: #d0a4cc;
  color: #2c1810;
  padding: 15px 45px;
  border-radius: 3px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.05em;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.btn:hover {
  background: #e8dcc8;
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
} */

/* Program details */
.program-details {
  background: #faf8f5;
  padding: 30px;
  border-left: 5px solid #d0a4cc;
  margin: 20px 0;
  border-radius: 3px;
}

.program-details p {
  margin: 12px 0;
  font-size: 1.2em;
  color: #5943bb;
}

.program-details strong {
  color: #6b4423;
}

/* Ideal-For */
.ideal-for ul {
  list-style: none;
  list-style-position: inside;
  line-height: 2;
  font-size: 1.2em;
}

.flake {color: #1604b6;}

/* FAQ */
.faq-item {
  margin: 25px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0d5c7;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item h3 {
  color: #5943bb;
  font-size: 1.1em;
  font-style: italic;
  font-weight: bold;
  margin-bottom: 10px;
}

.faq-item p {
  color: #5943bb;
  line-height: 1.7;
}

.faq-item img {
  height: 20px;
}

/* Footer */
footer {
  /* background: #2c1810; */
  background: linear-gradient(to right, #934fce, #bc6af5, #934fce);
  color: #fff;
  text-align: center;
  padding: 30px 20px;
  margin-top: 50px;
  border-top: 8px solid #d0a4cc;
  font-size: 0.95em;
}

footer p {
  margin: 8px 0;
}

/* Admin for Users */
.list {width: 100%; max-width: 900px;}
.col-users {width: 100%; display: flex; flex-direction: column; justify-content: center; margin-bottom: 20px;}

.col-users h3 {font-size: 1.7em;}

.line {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  font-size: 1.4em;
}

.line-date {
  font-size: 1.0em;
  margin-bottom: -15px;
  border-bottom: 0;
}

.line p {font-size: 1.8em;}

.box-1 {flex: 1;}
.box-3 {flex: 3;}

.not-underline {text-decoration: none;}

/* Admin for Settings */
.line-settings {
  font-size: 1.0em;
  margin-bottom: 0;
  border-bottom: 0;
}
.box-5 {flex: 5;}

.line-form {
  flex: 1;
  width: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  padding: 0;
  margin: 0;
}

.form-box-7 {flex: 7;}
.form-box-1 {flex: 1;}

.input-set {
  color: blue;
  font-size: 1.1em;
  width: 100%;
  min-width: 100%;
  border: 0;
  background-color: rgba(250, 250, 178, 1);
}
.btn-set, .btn-cancel{
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

/* Loader */
.classic-dots {
  width: 3.5em;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 3px;
}
.classic-dots div {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: transparent;
  animation: fade 0.8s ease-in-out alternate infinite;
}
.classic-dots div:nth-of-type(1) {
  animation-delay: -0.4s;
}
.classic-dots div:nth-of-type(2) {
  animation-delay: -0.2s;
}
@keyframes fade {
  from {opacity: 1;}
  to {opacity: 0;}
}

/* Responsive */
@media (max-width: 768px) {
  body {
    font-size: 11px;
  }

  header {
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("/assets/banner-33-4b39defe.jpg");
    background-position: center;
    background-size: 100% auto;
    background-repeat: repeat-y;
  }

  header h1 {
    font-size: 3em;
  }

  header p {
    font-size: 2.0em;
  }

  .dates {font-size: 2.0em;}

  .hero-section {
    padding: 0;
  }

  .hero-section h1 {
    font-size: 2.3em;
  }

  .hero-section p {
    font-size: 1.3em;
  }

  h1 {
    font-size: 2em;
  }
  
  h2 {
    font-size: 1.6em;
  }
  
  section {
    padding: 25px;
  }
  
  nav a {
    display: block;
    margin: 10px 0;
    font-size: 1.2em;
  }

  nav a:hover {
    color: #6003a1;
  }

  .rays-grid {
    grid-template-columns: 1fr;
  }

  .btn-new {
    width: 100%;
  }

  .line {
    flex-direction: column;
    justify-content: left;
    font-size: 1.6em;
  }

  .col-users h3 {
    font-size: 1.9em;
  }

  .line p {
    font-size: 1.2em;
  }

  .input-new {
    width: 98%;
  }
}