/* Colors Palette

#b8b8b8 grey
#ffffff white
#000000 black
#ffb3c7 light pink
#ff7c9f  pink */



body {
    background-color: white;
    margin: 0;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 30px 40px;
}

nav li {
    margin-bottom: 10px;
}

a {
    color: black;
    text-decoration: none;
    font-size: 20px;
    padding: 5px;
    font-family: 'Inter', sans-serif;
      
}

a:hover {
    text-decoration: underline;
    color: #fddde6;
}

ul {
    line-height: 1.8;
}

/* HERO LAYOUT */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 50px;
    padding: 40px;
    box-sizing: border-box;
    flex-wrap: wrap;
}

/* LEFT SIDE IMAGE */
.hero-left img {
    width: 500px;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
}

/* RIGHT SIDE TEXT */
.hero-right {
    color: black;
    max-width: 500px;
}

/* NAME TEXT */
.type {
    font-size: 60px;
    font-family: 'Inter', sans-serif;
    display: inline-block;
    margin: 0 0 20px 0;
}

/* BLINKING CURSOR */
.type::after {
    content: "|";
    margin-left: 8px;
    color: #ff7c9f;
    animation: blink 1s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* SMALL TEXT */
.hero-right p {
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    color: black;
    margin-bottom: 20px;
}

.btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    background-color: #E89EB8;
    color: black;
    border-radius: 25px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn:hover {
    background-color: #ffb3c7;
    color: black;
}


/* ===== Mobile Styles ===== */
@media (max-width: 768px) {
    /* Layout: stack columns vertically */
    .container, .row {
      flex-direction: column !important;
    }
  
    .col {
      flex: 1 1 100% !important;
      margin-bottom: 20px;
    }
  
    /* Navigation: stack menu items vertically */
    nav ul {
      flex-direction: column !important;
      gap: 10px !important;
      align-items: center;
    }
  
    /* Make images scale to screen */
    img {
      max-width: 100% !important;
      height: auto !important;
    }
  
    /* Adjust fonts for readability */
    body {
      font-size: 16px !important;
      line-height: 1.5 !important;
    }
  
    h1, h2, h3 {
      font-size: 1.3em !important;
    }
  
    /* Buttons: bigger and tappable */
    button, a.btn {
      padding: 12px 18px !important;
      font-size: 18px !important;
    }
  
    /* reduce padding/margin for mobile */
    header, main, footer {
      padding: 10px !important;
    }
  }