:root {
  --primary-purple: #5c2d5f;
  --berry: #6B2D5C; 
  --primary-orange: #e87722;
  --dark-orange: #c66516; 
  --light-orange: #ffb366; 
  --light-purple: #8b4a8e;
  --cream: #faf7f2;
  --dark: #2a1a2e;
  --gray: #6b6b6b;
}

body {
  font-family: 'Work Sans'; 
  box-sizing: border-box;
  margin: 0; 
  padding: 0; 
  background-color: var(--cream); 
}

/* links */

.nav-links a {
  color: white; 
  font-weight: 600;
  font-size: 1rem; 
  position: relative; 
}

a {
  text-decoration: none; 
}

.nav-links a:hover {
  /* color: var(--primary-orange); */
  transition: all 0.3s ease; 
}

.nav-links a::after {
  content: '';
  position: absolute; 
  bottom: -5px; 
  left: 0; 
  width: 0; 
  height: 1.5px; 
  background-color: var(--primary-orange); 
  transition: width 0.3s ease; 
}

.nav-links a:hover::after {
  width: 100%; 
}

/* buttons */

.nav-button {
  background-color: var(--primary-orange);
  border: none; 
  border-radius: 8px; 
  padding: 1rem 2rem; 
  color: white; 
  font-weight: 700;
  font-size: 0.9rem; 
}

.cta-button {
  background-color: var(--primary-orange);
  border: none; 
  border-radius: 8px; 
  padding: 1.5rem 4rem;
  color: white; 
  font-weight: 700;
  font-size: 1.2rem; 
}

.send-email-btn {
  background-color: var(--primary-orange);
  border: none; 
  border-radius: 8px; 
  padding: 1.5rem 4rem;
  color: white; 
  font-weight: 700;
  font-size: 1.2rem; 
  width: 100%; 
  margin-top: 0.2rem; 
  cursor: pointer; 
}

.cta-button:hover, .nav-button:hover, .send-email-btn:hover {
  background-color: var(--dark-orange); 
  transition: all 0.3s ease; 
}

/* nav bar */

nav {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%; 
  /* border-bottom: 2px solid var(--primary-orange);  */
  background-color: var(--berry); 
}

.nav-container {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  padding: 2.2rem 2rem; 
  max-width: 1400px;
  margin: 0 auto;
}

.nav-links {
  padding: 0; 
  margin: 0; 
  display: flex; 
  list-style-type: none; 
  gap: 36px;
}

/* index.html start */

.main-container {
  width: 1200px; 
  max-width: calc(100% - 10rem);
  margin: auto;
}

/* hero section */

.hero-content-container {
  width: 1200px; 
  max-width: calc(100% - 10rem);
  margin: auto;
}

.hero {
  background: linear-gradient(135deg, #6B2D5C 0%, #4A1F3F 100%);
  color: white; 
  padding: 10rem 2rem 4rem; 
  text-align: center; 
}

.hero-text {
  animation: fadeInUp 0.8s ease;
}

.hero h1 {
  margin: 0; 
  font-weight: 600; 
  font-size: 4rem; 
}

.hero p {
  font-size: 1.3rem;
}

.hit-text {
  color: var(--light-orange);  
}

/* About the Coalition */

.about-the-coalition {
  padding: 2.5rem 2rem 1.5rem; 
}

.about-the-coalition h2 {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--berry);
  margin-bottom: 2.3rem;
  text-align: center; 
}

.about-the-coalition p {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 0;
  color: var(--dark);
}

.coalition-members-container {
  display: flex; 
  justify-content: center;
  gap: 175px; 
  background-color: white;
  padding: 1rem; 
  border-radius: 20px;  
  width: 75%; 
  margin: 30px auto 0px; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.coalition-members-container ul {
  list-style-type: none;
  text-align: center;  
  padding: 0; 
}

.coalition-members-container li {
  margin: 0.5em; 
  font-size: 1.2rem;
  font-weight: 600; 
  color: var(--primary-orange); 
}

/* what is hit? */

.emphasis {
  font-weight: 700; 
  color: var(--dark-orange)
}

.what-is-hit {
  padding: 1rem 2rem 1.5rem; 
}

.what-is-hit h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--berry);
  margin-bottom: 1rem;
  margin-top: 0;
}

.what-is-hit h2 {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--berry);
  margin-bottom: 1.5rem;
  text-align: center; 
}

.what-is-hit h4 {
  color: var(--berry);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.3rem; 
}

.what-is-hit p {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 0;
  color: var(--dark);
}

.need-this-now {
  background: rgba(232, 119, 34, 0.08);
  padding: 2rem 2rem 2rem 2rem;
  border-radius: 8px;
  margin: 2rem 0;
}

.parameters-container {
  display: flex; 
  gap: 2rem; 
  margin-top: 2rem; 
}

.parameters-left {
  flex: 1 1 0;
  align-self: stretch; 
  position: relative; 
  padding-left: 2.5rem; 
}

.parameters-right {
  flex: 1 1 0;
  align-self: stretch; 
  position: relative; 
  padding-left: 2rem; 
}

.parameter {
  position: relative;
}

.vertical-timeline-left{
  position: absolute; 
  left: 0.8rem; 
  top: 0; 
  bottom: 0; 
  width: 2px; 
  /* height: 380px;  */
  margin-top: 20px; 
  background: var(--primary-orange);
}

.vertical-timeline-right{
  position: absolute; 
  left: 0.3rem; 
  top: 0; 
  bottom: 0; 
  width: 2px; 
  /* height: 380px;  */
  margin-top: 20px; 
  background: var(--primary-orange);
}

.timeline-number{
  position: absolute; 
  left: -2.6rem; 
  top: -0.3rem; 
  width: 30px; 
  height: 30px; 
  background: var(--primary-orange); 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: white; 
  font-weight: 700; 
  font-size: 0.9rem;
}

/* Resources & Reports */

.resources {
  padding: 1rem 0rem 2rem;
  /* background-color: #F5F5F5 */
}

.resources h2 {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--berry);
  margin: 0rem 0 3rem;
  text-align: center; 
}

.resource-item {
  background-color: white;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex: 1; 
}

.resource-item h3 {
  color: var(--berry)
}

.download-link {
  padding-bottom: 1rem; 
  display: block; 
  color: var(--primary-orange); 
  font-weight: 600; 
}

/* proven results */

.proven-results {
  padding: 5rem 0rem 4rem 1.5rem; 
}

.proven-results h2 {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--berry);
  margin: 0rem 0 3rem;
  text-align: center; 
}

.students-served-container {
  background: rgba(139, 74, 142, 0.12);
  padding: 2rem 2rem;
  border-radius: 8px;
  margin-left: auto; 
  margin-right: auto; 
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 900px;
}

.students-served-container * {
  margin: 0; 
}

.students-served-container h2 {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--primary-orange);
  line-height: 1;
  flex-shrink: 0;
  margin-bottom: 0; 
}

.students-served-container h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--berry);
  padding-bottom: 0.7rem; 
}

.city-card-container {
  display: flex; 
  gap: 2rem; 
}

.city-card {
  flex: 1 1 0;
  align-self: stretch; 
  border-left: 5px solid var(--primary-orange);
  padding: 0.8rem 1.5rem;
  margin-bottom: 1.5rem;
  background: rgba(232, 119, 34, 0.08);
  border-radius: 0 8px 8px 0;
  /* max-width: 900px; */
}

.city-card h3 {
  color: var(--berry);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

/* cta */

.cta-section {
  background: linear-gradient(135deg, #6B2D5C 0%, #4A1F3F 100%); 
  text-align: center; 
}

.cta-bar {
  background: var(--primary-orange);
  height: 10px;
}

.cta-content {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 3rem 2rem 5rem;
  text-align: center;
  color: white; 
}

.cta-content h1 {
  margin: 0; 
  font-weight: 600; 
  font-size: 3.2rem; 
}

.cta-content p {
  font-size: 1.3rem;
  line-height: 1.5;
  padding: 0.5rem; 
  margin-bottom: 3.5rem;
}

/* index.html end */

/* take-action.html start */

.email-form-container {
  display: flex; 
  width: 1400px; 
  max-width: calc(100% - 20rem);
  margin: 6rem auto 2rem;
}

.text-column, .form-column {
  flex: 1 1 0; 
}

/* text column */

.text-column {
  background: rgba(139, 74, 142, 0.08);  
  margin: 2.8rem 0 0.5rem; 
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  padding: 0 2.2rem; 
  color: #412042; 
}

.text-column h1 {
  font-size: 2.7rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.text-column h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  margin-top: 2rem;
}

.recipients-card {
  border-left: 5px solid var(--primary-orange);
  padding: 1.8rem 1.5rem 0.7rem; 
  margin-bottom: 1.5rem;
  background: var(--cream);
  border-radius: 0 8px 8px 0;
  max-width: 900px;
  color: var(--dark)
}

.recipients-card h2 {
  margin: 0; 
  color: var(--dark-orange); 
}

.recipient-list {
  list-style-type: none;
  padding: 0; 
}

.recipient-list li {
  color: var(--dark);
  font-weight: 600; 
  font-size: 1rem;  
  padding: 0 0 1rem 2rem; 
  position: relative;
}

.recipient-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--primary-orange);
  font-weight: 700;
}

.form-instructions {
  margin-top: 2rem; 
  line-height: 1.5;
  background-color: var(--cream);
  padding: 2rem; 
  border-radius: 8px;
  color: var(--dark)
}

.form-instructions h2 {
  margin: 0rem 0rem 1rem; 
  color: var(--dark-orange)
}

/* form column */

.form-column { 
  background-color: var(--berry); 
  margin-top: 2.2rem;
  border-radius: 7px;  
  padding: 2.5rem; 
}

.form-column-header h2 {
  font-size: 1.7rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.form-column-header p {
  color: white;
  font-size: 0.95rem;
  opacity: 0.9;
}

.required {
  color: var(--primary-orange); 
}

.input-group {
  margin-bottom: 1.5rem;
  flex: 1 
}

.address-group {
  display: flex; 
  gap: 2em; 
  width: 96%
}

label {
  display: block;
  color: white;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

input {
  width: 94%;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  background: white;
  color: var(--dark);
}

.email-container {
  background-color: white; 
  border-radius: 8px; 
  margin-top: 2rem; 
  padding: 2rem; 
  position: relative; 
}

.email-subject {
  font-weight: 600; 
  margin-top: 0; 
}

.email-content {
  height: 200px; 
  overflow-y: scroll; 
}

#letter-name {
  margin-top: 16px; 
  margin-bottom: 0px; 
}

#letter-organization, #letter-title, #letter-email {
  margin: 0; 
}

.title-organization {
  display: flex; 
  margin: 0; 
  /* gap: 6px;  */
}

.form-submit-modal {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); 
  display: flex; 
  align-items: center; 
  justify-content: center;
  z-index: 1000; 
}

.modal-content {
  background-color: white;
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
  border-radius: 12px;
  border: 3px solid var(--primary-orange);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  width: 500px;
  max-width: 90%;
  min-height: 300px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #aaa;
  font-size: 1.2rem; 
  font-weight: bold;
  transition: all 0.3s ease;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.5rem;
}


.modal-close:hover,
.modal-close:focus {
  color: rgb(171, 17, 17);
  transform: scale(1.1);
}

.modal-content h3 {
  color: var(--berry); 
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  text-align: center;
} 

#send-email-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#user-senator-modal-container,
#user-assembly-modal-container {
  text-align: center;
}

#user-senator-modal-container div,
#user-assembly-modal-container div {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: var(--dark);
}

#user-senator-modal,
#user-assembly-member-modal {
  font-weight: 700;
  color: var(--berry);
}

#send-email-btn-senator,
#send-email-btn-assembly {
  background-color: var(--primary-orange);
  border: none;
  border-radius: 8px;
  padding: 1rem 2rem;
  color: white;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

#send-email-btn-senator:hover,
#send-email-btn-assembly:hover {
  background-color: var(--dark-orange);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(232, 119, 34, 0.3);
}

/* take-action.html end */

/* footer */

footer {
  background: var(--cream);
  color: var(--dark);
  padding: 1.5rem;
  text-align: center;
  margin: 0; 
}

/* fades */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-right {
    animation: fadeInRight 0.8s ease;
}

/* universal classes */

.hidden {
  display: none !important;  
}

/* media queries */

@media (max-width: 1000px) {
  /* index.html start */
  .main-container{
    width: 1400px; 
    max-width: calc(100% - 1rem);
    margin: auto;
  }

  .parameters-container {
    display: block; 
    gap: 2rem; 
    margin-top: 2rem; 
  }

  .parameters-right {
    flex: 1 1 0;
    align-self: stretch; 
    position: relative; 
    padding-left: 3rem; 
  }

  .vertical-timeline-right{
    position: absolute; 
    left: 1.3rem; 
    top: 0; 
    bottom: 0; 
    width: 2px; 
    background: var(--primary-orange);
  }

  .proven-results {
    padding: 1rem 0rem 4rem 1.5rem; 
    margin-right: 2rem; 
  }


  .city-card-container {
    display: block; 
    gap: 2rem; 
  }

  /* index.html end */

  /* take-action.html start */

  .email-form-container {
    display: block; 
    max-width: calc(100% - 5rem);
    margin: 8rem auto 1rem;
  }

  .text-column {
    padding: 2.2rem 2.2rem 1rem; 
    margin: 3rem 0 1rem; 
    border-radius: 7px;  
/*  
    border-top-left-radius: 7px;
    border-top-right-radius: 7px; */
  }


  .form-column { 
    margin-top: 0rem;
    border-radius: 7px;  
    /* border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px; */
  }

}

@media (max-width: 480px) {
  /* Navigation */
  .nav-container {
    padding: 2rem 1rem;
    flex-direction: row;
    /* gap: 1rem; */
    align-items: center;
  }

  .nav-links {
    gap: 1rem;
    font-size: 0.9rem;
    max-width: 100px;  
    white-space: normal; 
  }

  .nav-links a {
    font-size: 0.9rem;
    /* white-space: normal;  */


  }

  .nav-button {
    padding: 0.7rem 1.2rem;
    font-size: 0.8rem;
    max-width: 100px;
    text-align: center;
    white-space: normal; 
  }

  .hide-on-mobile {
    display: none;
  }

  /* Hero Section */
  .hero {
    padding: 7.5rem 1rem 2rem;
  }

  .hero h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero p {
    padding-top: 1rem; 
    font-size: 1rem;
    line-height: 1.5;
  }

  .hero-content-container {
    max-width: 100%;
  }

  /* Main Container */
  .main-container {
    max-width: calc(100% - 2rem);
  }

  /* section headings */
  .about-the-coalition h2,
  .what-is-hit h2,
  .resources h2,
  .proven-results h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }

  .about-the-coalition,
  .what-is-hit,
  .resources {
    padding: 1.5rem 1rem;
  }

  .about-the-coalition p,
  .what-is-hit p {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* What is hit */

  .what-is-hit h2 {
    margin-top: 0.5rem; 
  }

  .what-is-hit h3 {
    font-size: 1.4rem;
  }

  .what-is-hit h4 {
    font-size: 1rem;
  }

  /* Need This Now Box */
  .need-this-now {
    padding: 1.5rem 1rem;
    margin: 1.5rem 0;
  }

  /* Parameters */
  .parameters-container {
    display: block;
    margin-top: 1.5rem;
  }

  .parameters-left,
  .parameters-right {
    padding-left: 2.5rem;
  }

  .timeline-number {
    left: -2.2rem;
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
  }

  .vertical-timeline-left {
    left: 1rem;
  }

  .vertical-timeline-right {
    left: 1rem;
  }

  /* Proven Results */
  .proven-results {
    padding: 2rem 1rem 1.5rem 1rem;
    margin-right: 0;
  }

  .students-served-container {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
    text-align: center;
  }

  .students-served-container h2 {
    font-size: 2.5rem;
    margin-bottom: 0; 
  }

  .students-served-container h3 {
    font-size: 1rem;
    padding-bottom: 1rem;
  }

  .students-served-container p {
    font-size: 0.9rem;
  }

  .city-card-container {
    display: block;
  }

  .city-card h3 {
    font-size: 1.1rem;
  }

  .city-card p {
    font-size: 0.95rem;
  }

  /* Resources */

  .resource-item {
    padding: 1rem;
  }

  .resource-item h3 {
    font-size: 1.1rem;
  }

  .resource-item p {
    font-size: 0.95rem;
  }

  /* CTA Section */
  .cta-content {
    padding: 2rem 1rem 3rem;
  }

  .cta-content h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .cta-content p {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .cta-button {
    padding: 1rem 2rem;
    font-size: 1rem;
    width: 100%;
  }

  /* Take Action Page */
  .email-form-container {
    max-width: calc(100% - 2rem);
    margin: 5rem auto 1rem;
  }

  .text-column {
    padding: 1.5rem;
    margin: 2rem 0 1rem;
  }

  .text-column h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .text-column h2 {
    font-size: 1rem;
    margin-top: 1.5rem;
  }

  .recipients-card {
    padding: 1.2rem 1rem 0.5rem;
  }

  .recipients-card h2 {
    font-size: 1rem;
  }

  .recipient-list li {
    font-size: 0.9rem;
  }

  .form-instructions {
    padding: 1.5rem;
  }

  .form-instructions h2 {
    margin-top: 0rem;
    font-size: 1rem;
  }

  .form-instructions p {
    font-size: 0.9rem;
  }

  .form-column {
    padding: 1.5rem;
  }

  .form-column-header h2 {
    font-size: 1.3rem;
  }

  .form-column-header p {
    font-size: 0.85rem;
  }

  .address-group {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  input {
    width: 90%;
    padding: 0.8rem;
    font-size: 0.95rem;
  }

  .email-container {
    padding: 1.5rem;
  }

  .email-subject {
    font-size: 0.95rem;
  }

  .email-content {
    font-size: 0.9rem;
    height: 180px;
  }

  .send-email-btn {
    padding: 1rem 2rem;
    font-size: 1rem;
  }

  /* form submit modal */

  .modal-content {
    width: 75%; 
  }

  #send-email-btn-assembly {
    padding: 1rem; 
  }

  /* Footer */
  footer {
    font-size: 0.9rem;
    padding: 1rem;
  }

  footer p {
    font-size: 0.85rem;
  }
}