/* styles.css */
:root{
  --bg:#0b1220;
  --panel:rgba(255,255,255,.06);
  --panel-2:rgba(255,255,255,.08);
  --text:#e8eefc;
  --muted:rgba(232,238,252,.75);
  --border:rgba(232,238,252,.14);
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --accent:#46d39a;
  --accent-2:#7aa7ff;

  --max:1100px;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    /*background: radial-gradient(900px 500px at 20% 0%, rgba(122,167,255,.18), transparent 60%), radial-gradient(800px 500px at 90% 10%, rgba(70,211,154,.16), transparent 55%), var(--bg);*/
    background: radial-gradient(900px 500px at 20% 0%, rgba(182, 142, 101), transparent 50%), radial-gradient(800px 500px at 90% 10%, rgba(86, 52, 42), transparent 55%), var(--bg);
    /**/
    /*background: chocolate*/
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%;display:block}
strong{font-weight:650}

.container {
    width: min(var(--max), calc(100% - 48px));
    margin: 0 auto;
    color: white;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:12px;
  background:#fff;
  color:#000;
  padding:10px 12px;
  border-radius:10px;
}
.skip-link:focus{left:12px; z-index:9999}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(11,18,32,.62);
  border-bottom:1px solid var(--border);
}

.header-inner{
  height:200px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:230px;
  color: white
}

.brand-mark {
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(182, 142, 101), rgba(86, 52, 42));
    color: #06101a;
    border: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
    font-size: 80px;
}

.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-size:40px;font-weight:2000; letter-spacing:.3px} /* Name Mini Mega Minds*/
.brand-name2 {font-size: 41px; font-weight:bold;font-weight: 2000;letter-spacing: .3px} 
.brand-tag{font-size:20px; color:var(--muted); margin-top:4px}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background: rgba(255,255,255,.03);
}

.nav a{
  font-size:14px;
  color:var(--muted);
  padding:6px 8px;
  border-radius:10px;
}
.nav a:hover{background: rgba(255,255,255,.06); color:var(--text)}

.header-cta{
  display:flex;
  align-items:center;
  gap:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  font-weight:650;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform: translateY(1px)}
.btn-primary {
    background: linear-gradient(135deg, rgba(182, 142, 101), rgba(86, 52, 42));
    color: #06101a;
}
.btn-primary:hover{filter:saturate(1.05)}
.btn-ghost{
  background: rgba(255,255,255,.04);
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover{background: rgba(255,255,255,.07)}
.w-full{width:100%}

.menu-btn{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color:var(--text);
}
.menu-icon{
  display:block;
  width:18px;height:2px;
  background: var(--text);
  position:relative;
  margin:0 auto;
  border-radius:2px;
}
.menu-icon::before,.menu-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;height:2px;
  background: var(--text);
  border-radius:2px;
}
.menu-icon::before{top:-6px}
.menu-icon::after{top:6px}

.mobile-nav{
  display:none;
  border-top:1px solid var(--border);
  padding:14px 24px 18px;
  background: rgba(11,18,32,.86);
}
.mobile-nav a{
  display:block;
  padding:12px 10px;
  color:var(--muted);
  border-radius:12px;
}
.mobile-nav a:hover{background: rgba(255,255,255,.06); color:var(--text)}
.mobile-nav .btn{margin-top:10px}

/* Hero */
.hero{
  padding:64px 0 26px;
  color: white
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:26px;
  align-items:start;
}
.eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    /*color: rgba(232,238,252,.78);*/
    color: white;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    padding: 8px 12px;
    border-radius: 999px;
}
.Horse {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    /*color: rgba(232,238,252,.78);*/
    color: white;
    border: 0PX solid var(--border);
    background: rgba(255,255,255,.03);
    padding: 8px 0px;
    border-radius: 150px;
    width: 700px;
    height: 400px;
}
h1{
  font-size: clamp(34px, 4.2vw, 52px);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:14px 0 12px;
}
.lead{
  font-size: 17px;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 0 18px;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 18px 0 18px;
}
.trust{
  list-style:none;
  padding:0;
  margin: 18px 0 0;
  display:flex;
  flex-direction:column;
  gap:10px;
  color: var(--muted);
}
.trust li{
  padding-left:18px;
  position:relative;
}
.trust li::before{
  content:"";
  position:absolute;
  left:0; top:.6em;
  width:8px;height:8px;
  border-radius:3px;
  background: rgba(70,211,154,.9);
}

.hero-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}
.hero-card-inner{padding:18px}
.stat{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(232,238,252,.10);
  margin-bottom:10px;
}
.stat-num{font-size:18px; font-weight:750}
.stat-label{font-size:13px; color:var(--muted)}
.divider{
  height:1px;
  background: var(--border);
  margin: 14px 0;
}
.mini-title{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(232,238,252,.72);
  margin:0 0 10px;
}

/* Strip */
.strip{padding: 14px 0 0}
.strip-inner{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.chip{
  font-size:13px;
  color: var(--muted);
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  padding:10px 12px;
  border-radius:999px;
}

/* Sections */
.section{padding: 60px 0}
.section-alt {
    position: center;
    background: rgba(255,255,255,.02);
    border-top: 1px solid rgba(232,238,252,.08);
    border-bottom: 1px solid rgba(232,238,252,.08);
}
.section-head{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width: 72ch;
  margin-bottom: 22px;
  color: white;
}
.section-picture {
    padding:18px;
}
.section-head h2{
  margin:0;
  font-size: clamp(24px, 2.5vw, 34px);
  letter-spacing:-.02em;
}
.section-head p{margin:0; color: var(--muted)}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  color: white;
  padding:18px;
}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0 0 12px; color:var(--muted)}
.bullets{
  margin:0; padding-left: 18px;
  color: var(--muted);
}
.bullets li{margin:8px 0}

/* Steps */
.steps{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.step{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  padding:18px;
  display:flex;
  gap:12px;
}
.step-num{
  width:38px;height:38px;
  border-radius:12px;
  display:grid;place-items:center;
  background: rgba(70,211,154,.12);
  border:1px solid rgba(70,211,154,.25);
  font-weight:800;
}
.step h3{margin:0 0 6px}
.step p{margin:0; color:var(--muted)}

/* Pricing */
.pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  align-items:stretch;
}
.price-card{
  position:relative;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  padding:18px;
  color: white;
}
.price-card-center {
    position: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,.04);
    padding: 18px;
    color: white;
}
.price-card.featured{
  background: linear-gradient(180deg, rgba(70,211,154,.12), rgba(255,255,255,.04));
  border-color: rgba(70,211,154,.32);
  box-shadow: 0 28px 80px rgba(0,0,0,.38);
}
.badge{
  position:absolute;
  top:14px; right:14px;
  font-size:12px;
  color:#06101a;
  background: rgba(70,211,154,.95);
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
}
.price{
  font-size:34px;
  font-weight:850;
  letter-spacing:-.02em;
  margin: 10px 0 2px;
}
.price span{opacity:.85}
.price-sub{margin:0 0 12px; color:var(--muted)}
.note{color:var(--muted); margin-top:16px}

/* Lists */
.checklist{
  list-style:none;
  padding:0;
  margin: 10px 0 16px;
}
.checklist li{
  padding-left:24px;
  margin:10px 0;
  position:relative;
  color: var(--muted);
}
.checklist li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  color: rgba(70,211,154,.95);
  font-weight:900;
}

/* About */
.about{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:start;
}
.about-card,.testimonial-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  padding:18px;
  color: white;
}
.about-card h2{margin:0 0 10px}
.about-card p{margin:0 0 12px; color:var(--muted)}
.about-highlights{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:12px;
}
.mini{
  border:1px solid rgba(232,238,252,.10);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding:12px;
}
.mini-title{
  margin:0 0 6px;
  font-size:11px;
}
.mini-text{color:var(--muted); font-size:13px}

.quote{margin:0 0 14px}
.quote blockquote{
  margin:0;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(232,238,252,.10);
  color: var(--text);
}
.quote figcaption{margin-top:8px; color:var(--muted); font-size:13px}

/* FAQ */
.faq{
  display:grid;
  gap:10px;
  max-width: 78ch;
}
.faq-item{
  border:1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  padding: 0;
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer;
  padding:14px 16px;
  font-weight:700;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{
  margin:0;
  padding: 0 16px 16px;
  color: var(--muted);
}

/* Contact */
.section-cta{padding-bottom: 76px}
.cta{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
}
.cta-copy h2{margin:0 0 10px}
.cta-copy p{margin:0 0 14px; color:var(--muted)}
.contact-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:14px;
}
.contact-card{
  border:1px solid rgba(232,238,252,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding:14px;
  color: white;
}
.contact-card h3{margin:0 0 6px; font-size:16px; text-align: center;}
.contact-card p{margin:0; color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:12px}

.form{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  padding:18px;
}
.form-row{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
label{font-size:13px; color: rgba(232,238,252,.88); font-weight:650}
input,select,textarea{
  border:1px solid rgba(232,238,252,.16);
  background: rgba(11,18,32,.55);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(122,167,255,.55);
  box-shadow: 0 0 0 4px rgba(122,167,255,.12);
}
textarea{resize:vertical; min-height:120px}

/* Footer */
.footer {
    border-top: 1px solid var(--border);
    background: rgba(11,18,32,.75);
    padding: 22px 0;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footer-brand{font-weight:750}
.footer-links{display:flex; gap:14px; color:var(--muted)}
.footer-links a:hover{color:var(--text)}

/* Responsive */
@media (max-width: 980px){
  .nav, .header-cta{display:none}
  .menu-btn{display:inline-flex; align-items:center; justify-content:center}
  .mobile-nav{display:block}
  .hero-grid{grid-template-columns: 1fr; }
  .cards{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr}
  .pricing{grid-template-columns: 1fr}
  .about{grid-template-columns: 1fr}
  .about-highlights{grid-template-columns: 1fr}
  .cta{grid-template-columns: 1fr}
  .contact-cards{grid-template-columns: 1fr}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .btn{transition:none}
}

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}

    /* On mouse-over, add a deeper shadow */
    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

/* Add some padding inside the card container */
.container {
    padding: 2px 16px;
}


/*Scheduling styles*/


.body_form {
    
    font-family: sans-serif;
    max-width: 550px;
    margin: 20px auto;
    padding: 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.form-card_schedule {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

input::placeholder {
    font-size: 18px; /* for placeholder bigger (name and phone num and email*/
}

select {
    font-size: 20px; /* Makes text and box bigger */
    padding: 10px; /* Adds space inside the box */
    width: 250px; /* Sets a fixed width */
}

label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    color: #333;
}

input {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 17px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.btn-choice {
    padding: 10px;
    border: 1px solid #007bff;
    background: white;
    color: #007bff;
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
    transition: 0.2s;
}

    .btn-choice:hover {
        background: #e7f1ff;
    }

    .btn-choice.selected {
        background: linear-gradient(135deg, rgba(182, 142, 101), rgba(86, 52, 42));
        color: #06101a;
        border-color: #0056b3;
    }

button#submit-btn {
    width: 100%;
    background-color: #28a745;
    color: white;
    border: none;
    padding: 15px;
    margin-top: 30px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
}

.note {
    font-size: 0.8em;
    color: #666;
    margin-top: 4px;
}

/*Booked apps*/


.form-group {
    margin-bottom: 15px;
}

.label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.input[type="date"], select {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.time-slot {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #e3f2fd;
    color: #000000;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    grid-template-columns: repeat(3, 1fr);
}

    .time-slot:not(:disabled):hover {
        background-color: #2196f3;
        color: #fff;
    }

    .time-slot:disabled {
        background-color: #e0e0e0;
        color: #9e9e9e;
        border-color: #ccc;
        cursor: not-allowed;
        text-decoration: line-through;
    }

    .time-slot.selected {
        background-color: #0d47a1;
        color: #fff;
        border-color: #0d47a1;
    }

.message-box {
    grid-column: span 3;
    text-align: center;
    color: black;
    padding: 20px;
    font-weight: bold;
    background: #ffebee;
    border-radius: 4px;
}

.info-box {
    grid-column: span 3;
    text-align: center;
    color: black;
    padding: 20px;
    background-color:lightgray;
}


/*Slide Show */

.Slideshow {
    box-sizing: border-box;

}

/* Position the image container (needed to position the left and right arrows) */
.container {
    position: relative;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
    cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Container for image text */
.caption-container {
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Six columns side by side */
.column {
    float: left;
    width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
    opacity: 0.6;
}

    .active,
    .demo:hover {
        opacity: 1;
    }