/*
 * Someet Gifts website styles
 *
 * This stylesheet defines the colour palette, typography and layout rules for
 * the Someet Gifts website. The design embraces a warm maroon and gold
 * palette inspired by the company's logo, combined with elegant serif
 * headings and clean sans‑serif body text. Responsive layouts ensure the
 * site looks beautiful on mobile, tablet and desktop devices.
 */

/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ------------------------------------------------------------------
   Additional custom styles introduced for the updated version of the
   Someet Gifts site. These rules add social media icons to the hero
   section and provide a layout and styling for the dedicated contact
   page. The colours and typography align with the existing brand
   palette defined above to ensure a cohesive experience.
   ------------------------------------------------------------------ */

/* Hero social icons */
/* Position the hero social icons centrally under the call to action.
   The icons should sit near the bottom of the hero overlay, horizontally centred
   rather than hugging the right edge. To achieve this we give the element the
   full width of the hero and use flexbox to centre its children. */
.hero-social-icons {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1rem;
  z-index: 1;
}

.hero-social-icons a {
  /* Use the brand gold accent colour for consistency across the site */
  color: var(--secondary);
  font-size: 1.5rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.hero-social-icons a:hover {
  /* Maintain the gold colour on hover and add a slight lift */
  color: var(--secondary);
  transform: translateY(-2px);
}

/* Contact page styles */
.contact-page {
  padding: 4rem 1rem;
  background-color: var(--light-bg);
}

.contact-header {
  text-align: center;
  margin-bottom: 2rem;
}

.contact-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.contact-header p {
  max-width: 650px;
  margin: 0 auto;
  font-size: 1rem;
  color: var(--dark-text);
}

/*
 * Layout for the main contact page. On larger screens the contact
 * information and form sit side‑by‑side with equal widths, creating a
 * balanced composition. On smaller screens they stack vertically.
 */
.contact-wrapper {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
  }
}

.contact-info h3,
.contact-form h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

/*
 * Set the default typography for paragraphs and links within the contact
 * information section. We exclude anchors with the .btn class from this
 * rule so that button styles can properly control their own colours.
 */
.contact-info p,
.contact-info a:not(.btn) {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--dark-text);
}

/*
 * Underline regular links in the contact information. Buttons are excluded
 * so their appearance remains consistent with the global button styles.
 */
.contact-info a:not(.btn) {
  text-decoration: underline;
}

.contact-info a:hover {
  color: var(--secondary);
}

/*
 * Layout for the "Prefer to Chat Directly?" action area on the contact page.
 * Align the buttons horizontally with consistent spacing, mirroring the hero
 * section’s call‑to‑action styling. Reset individual margins on the
 * buttons since the gap property handles spacing.
 */
.connect-directly {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.connect-directly .btn {
  margin: 0;
}

.contact-form p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

/*
 * Give the contact information and form areas a card‑like appearance on the
 * contact page. By applying a white background, gentle padding, rounded
 * corners and a subtle shadow, these sections become visually distinct
 * without overwhelming the rest of the page. This aligns the contact page
 * with the card treatment used in the featured products and helps the
 * overall layout feel more polished.
 */
.contact-info,
.contact-form {
  background-color: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background-color: #fff;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 2px rgba(199, 166, 104, 0.3);
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button {
  align-self: flex-start;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: var(--dark-text);
  background-color: var(--light-bg);
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Colour palette */
:root {
  --primary: #430826; /* Brand maroon */
  --secondary: #c7a668; /* Gold accent */
  --accent: #dab3c7; /* Soft pink accent */
  --light-bg: #f8f4f0; /* Cream background */
  --dark-text: #2c2c2c;
  --light-text: #ffffff;
  --box-shadow: rgba(0, 0, 0, 0.05) 0 2px 6px;
  /* Soft pink background used for contact cards and form panels */
  --contact-card-bg: #fdf4f8;
}

/* Container */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Navigation */
.navbar {
  background-color: var(--light-bg);
  border-bottom: 1px solid #e6e0da;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo img {
  height: 48px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.nav-links a {
  font-weight: 500;
  color: var(--dark-text);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.nav-links a.active,
.nav-links a:hover {
  color: var(--primary);
}

.nav-links a.active::after,
.nav-links a:hover::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: var(--primary);
}

/* Hero Section */
.hero {
  /* Use the optimised maroon and gold pattern supplied by the user. */
  /* The original PNG has been converted to a JPEG to improve load times. */
  background-image: url('images/hero-pattern-optimized.jpg');
  background-size: cover;
  background-position: center;
  color: var(--light-text);
  /* Establish a positioning context for absolutely positioned elements
     within the hero, such as the social icons. */
  position: relative;
}

.hero-overlay {
  background: linear-gradient(to bottom right, rgba(67, 8, 38, 0.8), rgba(0, 0, 0, 0.6));
  width: 100%;
  height: 100%;
  padding: 6rem 0;
}

.hero-content {
  text-align: center;
  max-width: 800px;
}

.hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #f5eae1;
}

.hero-content p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  color: #f2dfd1;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--light-text);
  border: none;
}

.btn-primary:hover {
  background-color: #630c3d;
}

.btn-secondary {
  background-color: transparent;
  /* Use the gold accent colour for secondary buttons so they remain visible on dark backgrounds */
  color: var(--secondary);
  border: 2px solid var(--secondary);
}

/*
 * Improve the hover state for secondary buttons. Previously, the maroon text
 * on a gold background provided insufficient contrast, making the label
 * difficult to read. Switching the text colour to the light text colour
 * (white) ensures excellent readability on hover while preserving the gold
 * background. The border remains unchanged.
 */
.btn-secondary:hover {
  background-color: var(--secondary);
  color: var(--light-text);
}

/*
 * Outline buttons share the same pill‑shaped silhouette and uppercase typography as
 * the primary and secondary variants. Previously the outline style used a
 * single‑pixel border which felt lighter than the other button treatments. To
 * maintain a consistent visual weight across all buttons we bump the border
 * thickness to 2px – matching the secondary button – while retaining the
 * primary colour for the outline. This change ensures that outline buttons
 * still appear distinct from solid buttons without feeling under‑designed.
 */
.btn-outline {
  background-color: transparent;
  /* use a 2px border to match the secondary button and achieve a cohesive feel */
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--light-text);
}

/* ------------------------------------------------------------------
   Hero button customisation

   The default button styles defined above work well across most of the site.
   However, the hero section on the home page uses a richer visual treatment
   inspired by the provided mock‑ups. To achieve pill‑shaped buttons with
   contrasting borders and responsive colour changes on hover, we scope the
   following overrides to buttons inside the `.hero-buttons` container. This
   ensures that only the call‑to‑action buttons on the hero are affected.

   The “Shop Gifts” button uses a maroon fill with a gold border. When
   hovered, it inverts to a gold background with a maroon border and text,
   providing a clear interactive cue. The “Learn More” button starts as a
   transparent pill outlined in gold. On hover, it gains a gold fill with a
   maroon border and text, mirroring the interaction pattern of the primary
   button. A thicker border (3px) is used to match the weight seen in the
   screenshots.
   ------------------------------------------------------------------ */

.hero-buttons .btn-primary {
  background-color: #5d0a3e; /* dark maroon fill inspired by the mock‑up */
  border: 3px solid var(--secondary);
  color: var(--light-text);
}

.hero-buttons .btn-primary:hover {
  background-color: var(--secondary);
  border-color: var(--primary);
  color: var(--primary);
}

.hero-buttons .btn-secondary {
  background-color: transparent;
  border: 3px solid var(--secondary);
  color: var(--secondary);
}

.hero-buttons .btn-secondary:hover {
  background-color: var(--secondary);
  border-color: var(--primary);
  color: var(--primary);
}

/* Values Section */
.values {
  padding: 4rem 0;
  text-align: center;
  background-color: var(--light-bg);
}

.values h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--primary);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.value-item {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  transition: transform 0.3s ease;
}

.value-item:hover {
  transform: translateY(-6px);
}

.value-item i {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--secondary);
}

.value-item h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

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

/* Featured Products */
.featured-products {
  padding: 4rem 0;
  background-color: #fff;
}

.featured-products h2 {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--primary);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.product-card {
  background-color: var(--light-bg);
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-card img {
  border-radius: 8px;
  margin-bottom: 1rem;
  object-fit: cover;
  height: 200px;
}

.product-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.product-card .price {
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.product-card .description {
  font-size: 0.9rem;
  flex-grow: 1;
  margin-bottom: 1rem;
}

/* CTA Section */
.cta {
  background-color: var(--primary);
  color: var(--light-text);
  padding: 4rem 1rem;
  text-align: center;
}

/* Override button styling within the CTA so it stands out on the dark background */
.cta .btn-primary {
  background-color: var(--secondary);
  color: var(--primary);
  border: none;
}
.cta .btn-primary:hover {
  background-color: #e0c88d;
  color: var(--primary);
}

.cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.cta p {
  max-width: 650px;
  margin: 0 auto 2rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #f6dbe3;
}

/* Footer */
.footer {
  background-color: var(--primary);
  color: var(--light-text);
  padding: 3rem 1rem 1rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-col h4 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
  font-family: 'Playfair Display', serif;
  color: var(--secondary);
}

.footer-col p,
.footer-col a,
.footer-bottom p {
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--light-text);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--secondary);
}

.social-icons {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
}

.social-icons a {
  color: var(--secondary);
  font-size: 1.25rem;
  transition: color 0.2s ease;
}

.social-icons a:hover {
  color: #f8f4f0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
  text-align: center;
}

/* About Page Styles */
.about-hero {
  background-color: var(--primary);
  color: var(--light-text);
  padding: 4rem 0 3rem;
  text-align: center;
}

.about-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

.about-hero p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
  color: #f7e5e5;
}

.story {
  padding: 4rem 0;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.story-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

.story-text p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.story-image img {
  border-radius: 12px;
  box-shadow: var(--box-shadow);
}

.why-us {
  background-color: var(--light-bg);
  padding: 4rem 0;
}

.why-us h2 {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--primary);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.why-item {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  text-align: center;
}

.why-item i {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--secondary);
}

.why-item h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.why-item p {
  font-size: 0.9rem;
}

.contact-section {
  padding: 4rem 0;
  text-align: center;
}

.contact-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary);
}

.contact-section p {
  max-width: 650px;
  margin: 0 auto 2rem;
  font-size: 1rem;
}

.contact-details p {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.contact-details i {
  margin-right: 0.5rem;
  color: var(--secondary);
}

.contact-btns {
  margin-top: 1rem;
}

/* Products Page Styles */
.products-hero {
  background-color: var(--primary);
  color: var(--light-text);
  padding: 4rem 0 3rem;
  text-align: center;
}

.products-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

.products-hero p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
  color: #f7e5e5;
}

.products-list {
  padding: 4rem 0;
}

/* ------------------------------------------------------------------
   New contact page layout styles

   The redesigned contact page uses a series of cards to present quick
   contact information followed by a centred message form. These styles
   ensure the cards and form panels adopt a soft pink background, rounded
   corners and gentle shadows to complement the existing colour palette.
   The form inputs are arranged responsively: the name and email fields
   appear side‑by‑side on larger screens and stack on smaller devices. The
   Send Message button stretches to the full width of the form for a
   balanced call‑to‑action.
   ------------------------------------------------------------------ */

.contact-cards {
  /*
   * Position the quick contact cards centrally and align their width with the
   * message form below. Using a max-width and auto margins ensures the
   * cards sit in the middle of the page and do not stretch to the full
   * container width. A larger minimum column size gives each card more
   * breathing room and allows two cards to sit side-by-side on wider screens
   * while stacking vertically on narrow displays. Adjust the max-width to
   * match the form card’s width (700px).
   */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 3rem auto;
  max-width: 700px;
}


/*
 * Contact cards display quick ways to reach the business. They adopt the
 * same appearance as the values cards on the home page: a white panel with
 * a soft shadow, centred gold icon and clear typography. When wrapped in
 * anchor tags they remain clickable without underlines.
 */
.contact-card {
  background-color: #fff;
  padding: 2rem 1.5rem;
  text-align: center;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: rgba(0, 0, 0, 0.08) 0 4px 12px;
}

.icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--light-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1rem;
}

.contact-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

/* Style the icons within contact cards. Icons are gold and larger to match
   the value cards on the home page. */
.contact-card i {
  font-size: 2.5rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}

.contact-card p,
.contact-card p a {
  font-size: 0.95rem;
  color: var(--dark-text);
}

.contact-form-section {
  text-align: center;
  margin-bottom: 4rem;
}

.contact-form-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.contact-form-section p {
  max-width: 600px;
  margin: 0 auto 2rem;
  font-size: 1rem;
  color: var(--dark-text);
}

.contact-form-card {
  /* Use a white panel for the form to align with the home page cards */
  background-color: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  max-width: 700px;
  margin: 0 auto;
}

.contact-form-card form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Feedback messages for the contact form. A soft coloured panel appears above
   the form to acknowledge successful submission or to display validation
   errors. The border and text use brand colours for a cohesive look. */
.form-response {
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  border-left: 4px solid var(--secondary);
  background-color: #fdf4f8;
  color: var(--primary);
  font-size: 1rem;
}

.form-response.error {
  border-left-color: #e07a5f; /* soft red for errors */
  background-color: #fdecea;
  color: #a94442;
}

.contact-form-card .form-row {
  display: flex;
  gap: 1rem;
}

.contact-form-card .form-row input {
  flex: 1;
}

.contact-form-card input,
.contact-form-card textarea {
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background-color: #fff;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 2px rgba(199, 166, 104, 0.3);
}

.contact-form-card textarea {
  resize: vertical;
}

.send-message-btn {
  margin-top: 1rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@media (max-width: 600px) {
  .contact-form-card .form-row {
    flex-direction: column;
  }
}

.product-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-bottom: 4rem;
  background-color: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
}

.product-detail:nth-child(even) {
  flex-direction: row-reverse;
}

.product-image {
  flex: 1 1 300px;
}

.product-info {
  flex: 1 1 400px;
}

.product-info h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.product-info .price {
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 1rem;
}

.product-info p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .story-grid {
    grid-template-columns: 1fr;
  }
  .product-detail {
    flex-direction: column;
  }
  .product-detail:nth-child(even) {
    flex-direction: column;
  }
}


/* =========================================================
   MOBILE FIXES (Hero buttons + social icons)
   Applied 2025-11-09 by ChatGPT — safe minimal patch
   ========================================================= */
@media (max-width: 768px) {
  /* Keep hero button colours consistent on mobile */
  .hero .btn-primary {
    background-color: #5b1046 !important;
    color: #ffffff !important;
    border: 3px solid #c7a668 !important;
  }
  .hero .btn-secondary {
    background-color: transparent !important;
    color: #c7a668 !important;
    border: 3px solid #c7a668 !important;
  }
  .hero .btn-primary:hover,
  .hero .btn-secondary:hover {
    background-color: #c7a668 !important;
    color: #5b1046 !important;
  }

  /* Center hero social icons under buttons */
  .hero .hero-social-icons {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
    gap: 1.5rem !important;
  }

  /* Stack buttons vertically on smaller screens */
  .hero .hero-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }
}

/* ------------------------------------------------------------
   Fix: Center hero social icons for iPad / tablet view
   (Between 769px and 1024px width)
------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-social-icons {
    justify-content: center !important;
    align-items: center !important;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
  }
}