/* Root colors */
:root {
  --primary: #2c3e50;
  --accent: #6C5CE7;
  --highlight: #F7B733;
  --light: #ecf0f1;
  --dark: #34495e;
  --hover:#5a4bcf;
}

/* Global */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Roboto', sans-serif;
  color: var(--dark);
  line-height: 1.6;
}
a {
  text-decoration: none;
  color: inherit;
}


/* Buttons */
.btn {
  background: var(--accent);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 700;
  transition: background .3s;
  font-size: 1rem;
}
.btn:hover {
  background: var(--hover);
}

/* Sections */
section {
  padding: 0rem 0;
}
h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--primary);
}


/* Marquee banner */
.marquee {
  position: relative;
  left: 50%;
  right: 50%;
  margin: 1rem 0;                /* vertical spacing */
  padding: .5rem 0;              /* inner padding */
  width: 100vw;                  /* full viewport width */
  transform: translateX(-50%);   /* recenter it */
  
  overflow: hidden;
  background: var(--highlight);
  color: var(--text-dark);
  white-space: nowrap;
  box-sizing: border-box;
}

.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 50s linear infinite;
  font-weight: 500;
}

/* Keyframes to scroll */
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Divider between sections */
.section-divider {
  width: 100%;             
  height: 4px;             /* thickness of the stripe */
  background: var(--highlight);
  margin: 3rem 0;          /* space above & below */
  border-radius: 2px;      /* soften the edges */
}


/* 1. Ensure global images & iframes don’t overflow */
img, video, iframe {
  max-width: 100%;
  height: auto;
}


@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* ensure the hero CTA is visible on tablet */
  .hero-text .find-out-more {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 1.5rem auto 0;        /* center it under your text */
    padding: 0.75rem 1.5rem;      /* match your button sizing */
    font-size: 1rem;
  }
}

html {
  scroll-behavior: smooth;
}