/*
MADE BY RLVNT DIGITAL 2025
TRASE E-MONEY TRANSFER SERVICES COPYRIGHT 2025
*/

/* Import and define custom fonts */
@font-face {
    font-family: 'Munale Loird';
    src: url('Munale Loird.woff2') format('woff2'),
         url('Munale Loird.woff') format('woff'),
         url('Munale Loird.ttf') format('truetype'),
         url('Munale Loird.eot') format('embedded-opentype'),
         url('Munale Loird.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NeueMontreal';
    src: url('NeueMontreal-Regular.woff2') format('woff2'),
         url('NeueMontreal-Regular.woff') format('woff'),
         url('NeueMontreal-Regular.ttf') format('truetype'),
         url('NeueMontreal-Regular.eot') format('embedded-opentype'),
         url('NeueMontreal-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Rest of your CSS starts here */

body {
  margin: 0;
  font-family: 'NeueMontreal', sans-serif;
  color: #fff;
  background: url('background.png') no-repeat right center, #000;
  background-size: cover;
}

/* Header */
header {
  background: transparent;
  z-index: 10;
}

.logo {
  height: 32px; /* Updated logo height */
}

/* Hero Section */
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 60px 0;
}

.hero-text {
  max-width: 50%;
}

@media (max-width: 768px) {
    .main-heading {
        font-family: 'Munale Loird', serif;
    }
}

.main-heading {
  font-family: 'Munale Loird', serif, Arial, sans-serif;
  font-size: 2.8rem;
  line-height: 1.2;
  font-weight: 700;
}

.hero p {
  margin: 20px 0;
  font-size: 1.2rem;
}

.app-buttons .app-store-img {
  height: 20px; /* Default size for desktop */
  margin-right: 10px;
}

.hero-image img {
  max-height: 600px;
  width: auto;
}

/* Footer */
footer {
  background: transparent;
}

.footer-paragraph {
  max-width: 610px; /* Restrict paragraph width */
  font-size: 0.9rem;
}

.footer-logo {
  color: white;
  font-weight: bold;
  font-size: 40px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-logo-section {
  display: flex;
  align-items: center;
}

.footer-bottom-text {
  margin: 0;
  font-size: 1rem;
}

.footer-copyright {
  margin: 0;
  font-size: 0.9rem;
}

.footer-links {
  margin-top: 10px;
  list-style: none;
  padding: 0;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .hero {
    flex-direction: column-reverse; /* Place mobile mockup below heading */
    text-align: center;
  }

  .hero-image img {
    max-width: 104%;
    margin: 39px 11px;
  }

  .app-buttons .app-store-img {
    height: 37px; /* Updated height for mobile */
    margin-right: 0px; /* No margin for mobile */
  }

  .footer-paragraph {
    max-width: 90%;
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    width: 100%;
  }

  .footer-logo-section {
    justify-content: center;
  }

  .footer-copyright {
    margin-top: 10px;
  }

  .footer-links {
    justify-content: center;
    margin-top: 10px;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .hero {
    flex-direction: column-reverse; /* Mobile mockup below the text */
    text-align: center;
  }

  .hero-text {
    max-width: 100%;
    text-align: center; /* Center-align title and subtitle */
    margin: 0 auto;
  }

  .main-heading {
    text-align: center; /* Center-align the main heading */
  }

  .hero p {
    text-align: center; /* Center-align the subtitle */
  }

  .hero-buttons {
    justify-content: center; /* Center-align the buttons */
    flex-wrap: wrap; /* Allow wrapping if needed */
    margin-top: 20px; /* Add spacing above the buttons */
    text-align: center;
  }

  .hero-buttons .btn {
    margin-bottom: 10px; /* Add space between buttons for mobile */
  }

  .app-buttons {
    display: flex;
    justify-content: center; /* Center-align the app store buttons */
    gap: 10px; /* Add space between the Google Play and App Store buttons */
    margin-top: 20px; /* Add space above */
  }

  .app-buttons .app-store-img {
    height: 37px; /* Adjust height for mobile view */
    max-width: 120px; /* Set a max width to prevent large buttons */
  }
}
@media (max-width: 768px) {
    .footer-paragraph {
        max-width: 100%;
        text-align: center;
    }
}
@media (max-width: 768px) {
    .hero-image img {
        max-width: 100%;
        margin: 39px 0px;
    }
}