/* ✅ FULL MOBILE VIEW FIX */
@media only screen and (max-width: 480px) {

    /* ===== GLOBAL ===== */
    html, body {
      font-size: 14px;
      overflow-x: hidden;
    }
  
    * {
      box-sizing: border-box;
    }
  
    /* ===== NAVBAR ===== */
    nav {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 1rem;
    }
  
    .logo img {
      height: 60px;
      width: auto;
    }
  
    .nav-right ul {
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
  
    /* ===== HERO ===== */
    .hero {
      flex-direction: column;
      padding: 20px;
      min-height: auto;
      text-align: center;
      justify-content: center;
    }
  
    .card-container {
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 0;
      margin-top: 40px;
    }
  
    .card {
      width: 80%;
      height: auto;
      margin-bottom: 20px;
    }
  
    .card img {
      width: 100%;
      height: auto;
    }
  
    .get-started-button {
      position: relative;
      margin: 40px auto 20px;
      display: block;
      transform: none;
      font-size: 16px;
      padding: 10px 24px;
      background-color: grey;
      color: black;
      border-radius: 30px;
      text-align: center;
    }
  
    .footer-text {
      position: relative;
      text-align: right;
      margin: 10px 20px;
      color: red;
    }
  
    .social-links {
      position: relative;
      text-align: left;
      margin: 10px 20px;
      display: flex;
      justify-content: flex-start;
      gap: 15px;
    }
  
    /* ===== PAGE 2 (PROFILE SECTION) ===== */
    .container {
      padding: 80px 20px;
      height: auto;
      position: relative;
    }
  
    .profile-image {
      position: relative;
      width: 100%;
      height: 250px;
      object-fit: cover;
    }
  
    .text-container {
      position: relative;
      top: auto;
      right: auto;
      width: 100%;
      max-width: 100%;
      transform: none;
      text-align: right;
      margin-top: 20px;
      padding-right: 10px;
    }
  
    .text-container .title {
      font-size: 24px;
      right: 0;
    }
  
    .text-container .subtitle {
      font-size: 16px;
    }
  
    .text-container .description {
      font-size: 14px;
      text-align: right;
      left: auto;
    }
  
    /* ===== RED BOX SECTION ===== */
    .red-box-container {
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 20px;
    }
  
    .red-box {
      display: none;
    }
  
    .area-info-box {
      width: 100%;
      max-width: 350px;
      text-align: center;
    }
  
    .text-layer {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      justify-items: center;
    }
  
    .hover-item {
      max-width: 140px;
      height: 50px;
    }
  
    .empty-grid-item {
      display: none;
    }
  
    /* ===== CIRCLE SECTION ===== */
    .circle-wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
    }
  
    .circle {
      width: 80px;
      height: 80px;
    }
  
    .circle-text {
      font-size: 14px;
    }
  
    /* ===== FORM SECTION ===== */
    .investment-section {
      padding: 60px 20px;
      text-align: center;
    }
  
    .form-inputs {
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: center;
    }
  
    .form-inputs input {
      width: 90%;
      font-size: 14px;
      padding: 10px;
    }
  
    .form-inputs button {
      width: 90%;
      font-size: 14px;
      padding: 10px;
      background: linear-gradient(to right, #faae2b, #f75e1a);
      border: none;
      color: white;
      font-weight: bold;
      border-radius: 4px;
      cursor: pointer;
    }
  
    .form-description {
      font-size: 13px;
      margin-top: 10px;
      color: #ccc;
    }
  
    /* ===== FOOTER SECTION ===== */
    .footer {
      flex-direction: column;
      text-align: center;
      padding: 30px 15px;
    }
  
    .footer-column {
      width: 100%;
      margin-bottom: 20px;
    }
  
    .footer-column h3 {
      font-size: 14px;
    }
  
    .footer a {
      font-size: 13px;
    }
  
    .logo-img {
      height: 60px;
    }
  
    .social-icons {
      justify-content: center;
      gap: 12px;
    }
  }