/* ─── Header Styles (With Sticky Slide-Down) ───────────────────────── */

/* Import your typeface */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');

body {
  margin: 0;
  background-color: #000;
  font-family: 'Poppins', sans-serif;
}

/* ─── Header Styles ───────────────────────────────────────────────── */

/* ─── Header Styles ───────────────────────────────────────────────── */

/* Base header */
.header {
  width: 1170px;
  height: 95px;
  background: #111111;
  border-radius: 20px;
  margin: 16px auto;
  display: flex;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
  position: relative; /* keep it static until sticky */
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
}
.logo__img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.logo__text {
  font-size: 24px;
  font-weight: 500;
  margin-left: 12px;
  line-height: 1;
}
.logo__tiger { color: #fff; }
.logo__pay   { color: #FF4500; }

/* Navigation */
.header__nav {
  display: flex;
  margin-left: auto;
}
.header__nav a {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  margin: 0 12px;
  white-space: nowrap;
}
.header__nav a:hover {
  color: #FF4500;
}

/* Tools dropdown */
.header__nav .dropdown {
  position: relative;
  margin: 0 12px;
}
.header__nav .dropbtn {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.header__nav .dropbtn i {
  margin-left: 4px;
  font-size: 0.75em;
}
.header__nav .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  /* applied your gradient background here */
  background: linear-gradient(
    180deg,
    rgba(68, 18, 2, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  min-width: 160px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1000;
}
.header__nav .dropdown:hover .dropdown-content {
  display: block;
}
.header__nav .dropdown-content a {
  display: block;
  padding: 12px 16px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}
.header__nav .dropdown-content a:hover {
  background: #222;
  color: #fff;
}

/* Get Started button */
.btn--start {
  display: inline-block;
  background: #FF4500;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 15px 50px;
  border-radius: 20px;
  white-space: nowrap;
}
.btn--start:hover {
  background: #411102;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background 0.2s, box-shadow 0.2s;
}
.btn--start:active {
  background: #cc4f00;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
}

/* Sticky state: fixed off-screen and animated down */
.header.sticky {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 1172px;
  margin: 0 auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.4s ease-out forwards;
}

/* Slide‐down keyframes */
@keyframes slideDown {
  from { top: -100px; }
  to   { top:     0; }
}



/* ─── Hero Section (Fixed Container, Image Fits Inside) ─────────── */

.hero-section {
  width: 1170px;
  height: 390px;             
  margin: 16px auto;
  background: #FF4500;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 20px 40px 20px 20px; /* top right bottom left */
  box-sizing: border-box;
  overflow: hidden;
}

.hero-section__content {
  flex: 1;
  text-align: left;
}

.hero-section__subtitle {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
}

.hero-section__title {
  font-size: 55px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1;
}

.hero-section__image {
  flex: none;
}

.hero-section__image img {
  max-height: 300px;     /* 310px container – 20px top – 20px bottom */
  width: auto;           
  margin: 0 20px 0 0;    /* space right */
  display: block;
  object-fit: contain;
}

/* ─── Pricing Section ────────────────────────────────────────────────── */
.pricing-section {
  width: 1170px;
  margin: 50px auto;
  padding: 40px;
  background: linear-gradient(
    180deg,
    rgba(68, 18, 2, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  border-radius: 20px;
  box-sizing: border-box;
  color: #fff;
}
.pricing-section__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.pricing-section__header {
  text-align: center;
}
.pricing-section__sub {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #aaa;
  margin: 0 0 8px;
}
.pricing-section__title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 16px;
}
.pricing-section__lead {
  font-size: 1rem;
  color: #ddd;
  margin: 0 0 24px;
}
.billing-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── Cards Grid ────────────────────────────────────────────────────── */
.pricing-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

/* ─── Individual Card ───────────────────────────────────────────────── */
.pricing-card {
  background: #111;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  flex: 1 1 260px;
  max-width: 350px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  color: #fff;
}

.pricing-card h3 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.pricing-card .limit {
  font-size: 1rem;
  color: #ccc;
  margin-bottom: 1rem;
}

/* Recommended Banner */
.pricing-card.starter {
  position: relative;
}
.pricing-card.starter .recommended-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: .75rem 0;
  background: #FF4500;
  color: #fff;
  font-weight: 700;
  text-align: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.pricing-card.starter h3 {
  margin-top: 2.5rem;
}

/* Prices */
.prices .price {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 .25rem;
}
.prices .price span {
  font-size: 1rem;
  font-weight: 500;
  color: #777;
}



/* Features List */
.features-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
  text-align: left;
  flex-grow: 1;
}
.features-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .5rem;
  color: #ddd;
}
.features-list li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: #FF4500;
  font-weight: 700;
}

/* CTA Button */
.pricing-card .btn-cta {
  margin-top: auto;
  padding: .75rem 2rem;
  border-radius: 50px;
  background: #FF4500;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform .3s, box-shadow .3s;
  border: none;
}
/* Hover & Active Effects */
.pricing-card .btn-cta:hover {
  background: #411102;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}
.pricing-card .btn-cta:active {
  background: #cc4f00;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
}

/* ─── See It In Action Section (Video Full-Width Fix) ──────────────── */

.action-section {
  width: 1170px;
  margin: 15px auto;
  border-radius: 20px;
  padding: 40px;
  box-sizing: border-box;
}

.action-section__title {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 24px;
}

/* Expand the video container out to the edges of .action-section */
.action-section__video-container {
  width: calc(100% + 80px); /* 100% of content + both 40px side paddings */
  margin: 0 -40px;          /* pull it back into the section’s padding area */
  overflow: hidden;
}

.action-section__video-container video {
  display: block;
  width: 100%;   
  height: 500px;
  object-fit: cover;
}


/* ─── How It Works Section ───────────────────────────────────────── */
.how-section {
  width: 1170px;
  margin: 50px auto 0;
  padding: 40px;
  background: #000;
  border-radius: 20px;
  box-sizing: border-box;
  color: #fff;
}

.how-section__heading {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0 0 32px;
}

.how-section__steps {
  display: flex;
  gap: 40px;
  justify-content: space-between;
}

/* Single Step */
.how-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Step Number */
.how-step__number {
  width: 60px;
  height: 60px;
  background: #FF4500;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}

/* Step Title */
.how-step__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #fff;
}

/* Step Description */
.how-step__text {
  font-size: 14px;
  color: #ddd;
  line-height: 1.5;
  margin: 0;
}


/* ─── Grow With Section (Complete Updated CSS) ─────────────────────── */

.grow-section {
  width: 1170px;
  margin: 32px auto 0;
  background: #000;
  border-radius: 35px;
  padding: 40px;
  box-sizing: border-box;
}

.grow-section__container {
  display: flex;
  gap: 40px;
}

/* add vertical gap between the two rows */
.grow-section__container + .grow-section__container {
  margin-top: 40px;
}

/* — Left Column: Feature Cards — */
.grow-section__features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* align flush under padded neighbor */
  margin-left: -40px;
}

.feature {
  background: linear-gradient(
    to bottom,
    rgba(17, 17, 17, 1) 0%,
    rgba(17, 17, 17, 0) 100%
  );
  border-radius: 20px;
  width: 400px;       
  height: 120px;      
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.feature__icon {
  font-size: 36px;
  color: #FF4500;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.feature__title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.2;
}

.feature__desc {
  font-size: 14px;
  color: #fff;
  margin: 0;
  line-height: 1.4;
}

/* — Right Column: Call-to-Action — */
.grow-section__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.grow-section__title {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.2;
}

.grow-section__title .highlight {
  color: #FF4500;
}

.grow-section__text {
  font-size: 14px;
  color: #fff;
  margin: 0 0 24px;
  line-height: 1.5;
}

.grow-section__btn {
  background: #FF4500;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  width: 200px;       
  padding: 12px 0;    
  border-radius: 15px;
  text-align: center;  
  white-space: nowrap;
}

/* Hover & Active Effects */
.grow-section__btn:hover {
  background: #411102;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}
.grow-section__btn:active {
  background: #cc4f00;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
}

/* — Second Row: Illustration on Left — */
.grow-section__image {
  flex: none;
  width: 450px;         /* increased from 400px */
  margin-left: -40px;   /* flush under features */
  margin-right: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grow-section__image img {
  display: block;
  width: 450px;         /* enlarged image */
  height: auto;
  object-fit: contain;
  border-radius: 20px;  
}


/* ─── Powerful Reporting Tools Section ────────────────────────────── */
.reporting-section {
  width: 1170px;
  height: 600px;
  margin: 50px auto 0;
  background: linear-gradient(
    180deg,
    rgba(68, 18, 2, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  border-radius: 20px;
  padding: 40px;
  box-sizing: border-box;
}

.reporting-section__container {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 100%;
}

/* Text Column */
.reporting-section__content {
  flex: 1;
}

.reporting-section__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 24px;
  color: #fff; /* default white */
}

.reporting-section__title--orange {
  color: #FF4500;
}

.reporting-section__text {
  font-size: 15px;
  color: #fff;
  line-height: 1.5;
  margin: 0px;
}

/* Image Column */
.reporting-section__image {
  flex: none;
}

.reporting-section__image img {
  max-height: 450px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ─── Testimonials Section (Static Layout) ───────────────────────────────── */
.testimonials-section {
  width: 1170px;
  margin: 50px auto;
  padding: 0px;
  background: #000;
  border-radius: 20px;
  box-sizing: border-box;
  height: 600px;             /* increased height */
}

/* Section Heading */
.testimonials-section__heading {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 32px;
  color: #fff;
}
.testimonials-section__heading--orange {
  color: #FF4500;
  display: inline-block;
}

/* Cards Container */
.testimonials-section__container {
  display: flex;
  gap: 40px;
  /* no scrolling, static three-in-row */
}

/* Each Testimonial Card */
.testimonial {
  background: #111;
  border-radius: 20px;
  padding: 32px;
  flex: 1;                             /* equal width */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 300px;                        /* fill parent height */
}

/* Quote Icon (double-comma) */
.testimonial__quote-icon {
  font-size: 48px;                     /* larger “,,” icon */
  color: #FF4500;
}

/* Testimonial Text */
.testimonial__text {
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  margin: 16px 0;
  flex-grow: 1;
}

/* Author Block */
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.testimonial__author-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.testimonial__author-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.testimonial__author-role {
  font-size: 14px;
  color: #777;
  margin: 0;
}




/* ─── Get In Touch Section ─────────────────────────────────────────── */
.contact-section {
  width: 1170px;
  margin: 50px auto;
  padding: 40px;
  background: #000;
  border-radius: 20px;
  box-sizing: border-box;
}

/* Container: two columns */
.contact-section__container {
  display: flex;
  gap: 40px;
}

/* ─ Col 1: heading + contact items ───────────────────────────────── */
.contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-info__heading {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.contact-info__heading--orange {
  color: #FF4500;
}

.contact-info__item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.contact-info__item i {
  font-size: 24px;
  color: #FF4500;
}
.contact-info__item span {
  font-size: 14px;
  color: #fff;
}

/* ─ Col 2: form ────────────────────────────────────────────────────── */
.contact-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Row with inline inputs */
.contact-form__row--inline {
  display: flex;
  gap: 20px;
}

/* Shared styles for inputs & textarea */
.contact-form__row input,
.contact-form__row textarea {
  background: transparent;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}

/* Name + Email fields share the width equally */
.contact-form__row--inline input {
  flex: 1;
}

/* Message textarea full-width */
.contact-form__row textarea {
  width: 100%;
  height: 100px;
  resize: none;
}

/* Submit button */
.contact-form__submit {
  align-self: flex-start;
  background: #FF4500;
  color: #fff;
  border: none;
  border-radius: 15px;
  padding: 12px 70px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
/* Hover & Active Effects */
.contact-form__submit:hover {
  background: #411102;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}
.contact-form__submit:active {
  background: #cc4f00;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
}

/* ─── FAQ Section ───────────────────────────────────────────────────── */
.faq-section {
  width: 1170px;
  margin: 50px auto 0;
  padding: 40px;
  background: #000;
  border-radius: 20px;
  box-sizing: border-box;
  color: #fff;
}

.faq-section__heading {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 32px;
  color: #fff;
}

/* ─── Accordion List ───────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ─── Each Accordion Item ─────────────────────────────────────────── */
.faq-item {
  border-bottom: 1px solid #333;
  padding-bottom: 24px;
}

/* Remove bottom border on last item */
.faq-item:last-child {
  border-bottom: none;
}

/* ─── Summary (Question) ──────────────────────────────────────────── */
.faq-question {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  list-style: none;
  position: relative;
  padding-left: 2em;
  cursor: pointer;
  outline: none;
}
/* Hide default marker */
.faq-question::-webkit-details-marker {
  display: none;
}

/* Custom “+” icon */
.faq-question::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 24px;
  line-height: 1;
  color: #FF4500;
}

/* When open, show “–” instead */
.faq-item[open] .faq-question::before {
  content: "–";
}

/* ─── Answer ──────────────────────────────────────────────────────── */
.faq-answer {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #ddd;
  padding-left: 2em;
}

/* Labels */
.faq-question__label,
.faq-answer__label {
  color: #FF4500;
  margin-right: 8px;
  font-weight: 700;
}



/* ─── Footer Styles ───────────────────────────────────────────────── */

/* Gradient container */
.footer-section {
  width: 1170px;
  margin: 50px auto 0;
  padding: 40px;
  background: linear-gradient(
    180deg,
    rgba(68, 18, 2, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  border-radius: 20px;
  box-sizing: border-box;
  color: #fff;
}

/* Three‐column layout */
.footer-container {
  display: flex;
  align-items: flex-start;   /* top-align all columns */
  justify-content: space-between;
  gap: 40px;
  text-align: left;          /* ensure left alignment */
}

/* ─ Col 1: Logo & Name ──────────────────────────────────────────── */
.footer-logo {
  flex: 0 0 250px;           /* fixed wider column */
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.footer-logo__img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.footer-logo__text {
  font-size: 24px;
  font-weight: 500;
  margin: 0;
  line-height: 1;
}
.footer-logo__tiger {
  color: #fff;
}
.footer-logo__pay {
  color: #FF4500;
}

/* ─ Col 2: About & Social ───────────────────────────────────────── */
.footer-about {
  flex: 1;                   /* fluid middle column */
  text-align: left;
}
.footer-about__text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 24px;
}
.footer-social {
  display: flex;
  gap: 16px;
}
.footer-social a i {
  font-size: 20px;
  color: #fff;
  transition: color 0.2s;
}
.footer-social a:hover i {
  color: #FF4500;
}

/* ─ Col 3: Quick Links ──────────────────────────────────────────── */
.footer-links {
  flex: 0 0 250px;           /* fixed wider column */
  text-align: left;
}
.footer-links__heading {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #fff;
}
.footer-links__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links__list a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  transition: color 0.2s;
}
.footer-links__list a:hover {
  color: #FF4500;
}

/* ─ Bottom Bar ─────────────────────────────────────────────────── */
.footer-base {
  width: 1170px;
  margin: 0 auto 50px;
  padding-top: 16px;
  border-top: 1px solid #FF4500;
  text-align: center;
  box-sizing: border-box;
}
.footer-base p {
  font-size: 14px;
  color: #fff;
  margin: 0;
}


/* ─── About Page Styles ─────────────────────────────────────────── */

/* Hero banner */
.about-hero {
  width: 1170px;
  margin: 50px auto 0;
  padding: 60px 40px;
  background: #FF4500;
  border-radius: 20px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
}
.about-hero__title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 16px;
}
.about-hero__subtitle {
  font-size: 1rem;
  color: #ccc;
  margin: 0;
}

/* About section */
.about-section {
  width: 1170px;
  margin: 40px auto 0;
  padding: 20px 20px 20px 0px;
  background: #000;
  border-radius: 20px;
  box-sizing: border-box;
  color: #fff;
}
.about-section .section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.about-section p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 16px;
  color: #ddd;
}

/* Mission & Vision */
.mission-vision {
  width: 1170px;
  margin: 50px auto 0;
  padding: 40px;
  background: linear-gradient(180deg, rgba(68,18,2,1) 0%, rgba(0,0,0,1) 100%);
  border-radius: 20px;
  box-sizing: border-box;
  display: flex;
  gap: 40px;
  color: #fff;
}
.mission-vision .mv-item {
  flex: 1;
  text-align: center;
}
.mission-vision h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.mission-vision p {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Team */
.team-section {
  width: 1170px;
  margin: 50px auto 0;
  padding: 40px;
  background: #000;
  border-radius: 20px;
  box-sizing: border-box;
  color: #fff;
}
.team-section .section-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 32px;
}
.team-container {
  display: flex;
  gap: 40px;
  justify-content: center;
}
.team-member {
  flex: 1;
  text-align: center;
}
.team-member img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
}
.team-member h4 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.team-member p {
  font-size: 0.875rem;
  color: #777;
  margin: 0;
}

/* ─── Contact Page Styles (Updated with Submit Hover) ───────────────────────────────── */
.contact-page {
  width: 1170px;
  margin: 30px auto;
  padding: 40px;
  background: linear-gradient(
    180deg,
    rgba(68, 18, 2, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  border-radius: 20px;
  box-sizing: border-box;
  color: #fff;
}

.contact-page__container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Center the main heading */
.contact-page__heading {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 32px;
  text-align: center;
}

/* Form */
.contact-form-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form-page input,
.contact-form-page textarea {
  background: transparent;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}

.contact-form-page textarea {
  resize: none;
  height: 100px;
}

/* Submit Button */
.contact-page-submit {
  align-self: center;
  background: #FF4500;
  color: #fff;
  border: none;
  border-radius: 15px;
  padding: 12px 70px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Hover & Active Effects */
.contact-page-submit:hover {
  background: #411102;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}
.contact-page-submit:active {
  background: #cc4f00;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
}

/* Success message styling */
.form-message {
  margin-bottom: 16px;
  font-size: 14px;
  color: #28a745;
  text-align: center;
}


/* ─── Privacy Policy Page Styles (Updated) ─────────────────────────── */

/* Section wrapper */
.policy-page {
  width: 1170px;
  margin: 20px auto 0;            
  padding: 20px 40px 40px 20px;
  background: linear-gradient(
    180deg,
    rgba(68, 18, 2, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  border-radius: 20px;
  box-sizing: border-box;
  color: #fff;
}

/* Inner container centered */
.policy-page__container {
  max-width: 900px;
  margin: 0 auto;                 
  padding: 0;
}

/* Main heading centered */
.policy-page__heading {
  font-size: 42px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #FF4500;
  text-align: center;
}

/* Sub-headings centered */
.policy-page__container h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 24px 0 12px;
  color: #fff;
  text-align: center;
}

/* Paragraph text */
.policy-page__container p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 16px;
  color: #ddd;
}

/* Lists */
.policy-page__container ul {
  margin: 0 0 16px 20px;
  padding: 0;
}
.policy-page__container ul li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #ddd;
  margin: 0 0 8px;
}

/* Links */
.policy-page__container a {
  color: #FF4500;
  text-decoration: none;
}
.policy-page__container a:hover {
  text-decoration: underline;
}

/* ─── Terms & Conditions Page Styles (Updated) ────────────────────── */
.terms-page {
  width: 1170px;
  margin: 20px auto 0;
  padding: 20px 40px 40px 20px;
  background: linear-gradient(
    180deg,
    rgba(68, 18, 2, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  border-radius: 20px;
  box-sizing: border-box;
  color: #fff;
}

.terms-page__container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}

/* Main heading centered */
.terms-page__heading {
  font-size: 42px;
  font-weight: 700;
  margin: 0 0 16px;
  text-align: center;
  color: #FF4500;
}

/* Sub-headings centered */
.terms-page__container h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 24px 0 12px;
  color: #fff;
  text-align: center;
}

/* Paragraph text */
.terms-page__container p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 16px;
  color: #ddd;
}

/* Lists */
.terms-page__container ul {
  margin: 0 0 16px 20px;
  padding: 0;
}
.terms-page__container ul li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #ddd;
  margin: 0 0 8px;
}

/* Links */
.terms-page__container a {
  color: #FF4500;
  text-decoration: none;
}
.terms-page__container a:hover {
  text-decoration: underline;
}


/* ─── Disclaimers Page Styles (Updated) ───────────────────────────── */
.disclaimers-page {
  width: 1170px;
  margin: 20px auto 0;
  padding: 20px 40px 40px 20px;
  background: linear-gradient(
    180deg,
    rgba(68, 18, 2, 1) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  border-radius: 20px;
  box-sizing: border-box;
  color: #fff;
}

.disclaimers-page__container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}

/* Main heading centered */
.disclaimers-page__heading {
  font-size: 42px;
  font-weight: 700;
  margin: 0 0 16px;
  text-align: center;
  color: #FF4500;
}

/* Sub-headings centered */
.disclaimers-page__container h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 24px 0 12px;
  color: #fff;
  text-align: center;
}

.disclaimers-page__container p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 16px;
  color: #ddd;
}

/* Lists */
.disclaimers-page__container ul {
  margin: 0 0 16px 20px;
  padding: 0;
}
.disclaimers-page__container ul li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #ddd;
  margin: 0 0 8px;
}

.disclaimers-page__container a {
  color: #FF4500;
  text-decoration: none;
}
.disclaimers-page__container a:hover {
  text-decoration: underline;
}