/* BUTTON PRIMARY BUTTON (GREEN BUTTON) */

.btn__primary {
  padding: 0.7rem 1.7rem;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border-radius: 10px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-weight: 500;
}

.btn__primary:hover {
  transform: scale(1);
  background: var(--accent-color);
  color: #000;
}

.btn__primary:active {
  border: 3px solid rgba(206, 179, 2, 0.453);
}

/* BUTTON ACCENT MAIN BUTTON (GOLD BUTTON) */

.btn__secondary {
  padding: 0.7rem 1.7rem;
  background: var(--accent-color);
  color: #000;
  border-radius: 10px;
  /* font-weight: 500; */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn__secondary:hover {
  transform: scale(1);
  background: var(--text-white-color);
  color: #000;
}

.btn__secondary:active {
  border: 3px solid rgb(255, 255, 255);
}

.sub-header {
  font-size: 1rem;
  color: var(--secondary-color);
  font-family: "Handlee", cursive;
  text-transform: uppercase;
  margin-bottom: o.5rem;
  /* text-align: left; */
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  /* border: 1px solid red; */
}

/* Each sections */

.section {
  margin-top: 5rem;
  /* border: 1px solid red; */
}

/* 

@media (min-width: 475px) {
  .container {
    width: 90%;
    max-width: 475px;
  }
}


@media (min-width: 640px) {
  .container {
    width: 90%;
    max-width: 640px;
  }
}


@media (min-width: 768px) {
  .container {
    width: 85%;
    max-width: 768px;
  }
}


@media (min-width: 1024px) {
  .container {
    width: 85%;
    max-width: 1024px;
  }

 
}


@media (min-width: 1289px) {
  .container {
    width: 75%;
    max-width: 1289px;
  }
}


@media (min-width: 1536px) {
  .container {
    width: 70%;
    max-width: 1536px;
  }
}

 */

.container {
  width: 100%; /* Full width for small screens */
  max-width: 100%; /* Prevent overflow on small screens */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* Equivalent to px-4 */
  padding-right: 1rem; /* Equivalent to px-4 */
}

/* sm: 640px */
@media (min-width: 640px) {
  .container {
    width: 90%; /* Slightly narrower width for alignment */
    max-width: 640px;
  }
}

/* md: 768px */
@media (min-width: 768px) {
  .container {
    width: 85%;
    max-width: 768px;
  }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .container {
    width: 80%;
    max-width: 1024px;
  }

  .section {
    margin-top: 7rem;
  }
}

/* xl: 1280px */
@media (min-width: 1280px) {
  .container {
    width: 85%;
    max-width: 1280px;
  }
}

/* 2xl: 1536px */
@media (min-width: 1536px) {
  .container {
    width: 80%;
    max-width: 1536px;
  }
}