/* Brand colors */
    :root {
      --primary-color: #344d82;
      --secondary-color: #b9cef1;
      --accent-color: #f0e6ff;
      --text-color: #333;
      --hover-scale: 1.05;
    }

    body {
      font-family: "Karla", sans-serif;
      background: var(--accent-color);
      color: var(--text-color);
      margin: 0;
      padding: 0;
    }
        .logo-img {
          max-width: 200px;
        }
    
        @media (min-width: 768px) {
          .logo-img {
            max-width: 300px;
          }
        }

             /* 🌸 Soft Cute Navbar Background */
             .cute-navbar {
               background: linear-gradient(135deg, #B9CEF1 0%, #F6E8FF 50%, #FCECF5 100%);
               border-radius: 0 0 25px 25px;
             }
      
             /* 🌈 Brand / Logo Styling */
             .cute-brand {
               font-size: 26px;
               color: #5948b8;
               text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
             }
      
             /* 💜 NAV LINKS */
             .cute-link {
               font-size: 18px;
               color: #5948b8 !important;
               margin-left: 22px;
               padding: 8px 12px;
               border-radius: 12px;
               transition: 0.25s ease-in-out;
               position: relative;
             }
      
             /* 💫 Hover Glow Effect */
             .cute-link:hover {
               background: #ffffffcc;
               color: #ee5151 !important;
               box-shadow: 0 4px 12px rgba(255, 182, 193, 0.4);
               text-decoration: none;
             }
      
             /* ❤️ Active Page */
             .cute-link.active {
               color: #ee5151 !important;
               background: #fff4f7;
               font-weight: 600;
               box-shadow: inset 0 0 6px rgba(255, 100, 130, 0.3);
             }
      
             /* 📱 Responsive Spacing */
             @media (max-width: 768px) {
               .cute-link {
                 margin: 10px 0;
               }
      
               .cute-navbar {
                 border-radius: 0;
               }
             }
  

    /* Hero Section */
    .hero-section {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      padding: 96px 32px;
    }

    .hero-section h1 {
      font-weight: 700;
      font-size: 56px;
      margin-bottom: 16px;
    }

    .hero-section p {
      font-size: 20px;
      max-width: 600px;
      margin-bottom: 32px;
      line-height: 1.5;
    }

    .btn-branding {
      background-color: white;
      color: var(--primary-color);
      font-weight: 600;
      padding: 12px 32px;
      border-radius: 50px;
      transition: background-color 0.3s ease, color 0.3s ease;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .btn-branding:hover,
    .btn-branding:focus {
      background-color: var(--primary-color);
      color: white;
      text-decoration: none;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

    /* Mini About Preview */
    .about-preview {
      background: white;
      padding: 48px 32px;
      margin-top: -4rem;
      margin-bottom: 64px;
      border-radius: 15px;
      box-shadow: 0 8px 20px rgba(52, 77, 130, 0.15);
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .about-preview p {
      font-size: 18px;
      line-height: 1.6;
      margin: 0;
    }

    /* Hobbies Gallery */
    .hobbies-gallery {
      max-width: 900px;
      margin: 0 auto 5rem auto;
      text-align: center;
    }

    .hobbies-gallery h2 {
      margin-bottom: 32px;
      color: var(--primary-color);
      font-weight: 700;
    }

    .hobby-img {
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(52, 77, 130, 0.2);
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      max-width: 100%;
    }

    .hobby-img:hover,
    .hobby-img:focus {
      transform: scale(var(--hover-scale));
      box-shadow: 0 10px 30px rgba(52, 77, 130, 0.4);
      outline: none;
    }

    .hobby-caption {
      margin-top: 12px;
      font-weight: 600;
      color: var(--primary-color);
    }

    /* Featured Project */
    .featured-project {
      background: white;
      max-width: 900px;
      margin: 0 auto 5rem auto;
      padding: 48px 32px;
      border-radius: 15px;
      box-shadow: 0 8px 20px rgba(52, 77, 130, 0.15);
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      align-items: center;
    }

    .featured-project img {
      max-width: 300px;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(52, 77, 130, 0.2);
    }

    .featured-project-content {
      flex: 1 1 400px;
    }

    .featured-project-content h2 {
      color: var(--primary-color);
      font-weight: 700;
      margin-bottom: 16px;
    }

    .featured-project-content p {
      font-size: 18px;
      line-height: 1.6;
      margin-bottom: 24px;
    }

    .btn-learn-more {
      background-color: var(--primary-color);
      color: white;
      font-weight: 600;
      padding: 0.75rem 2rem;
      border-radius: 50px;
      transition: background-color 0.3s ease;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      text-decoration: none;
      display: inline-block;
    }

    .btn-learn-more:hover,
    .btn-learn-more:focus {
      background-color: var(--secondary-color);
      color: var(--primary-color);
      text-decoration: none;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      outline: none;
    }



    /* Responsive tweaks */
    @media (max-width: 768px) {
      .hero-section {
        padding: 4rem 1.5rem;
      }

      .hero-section h1 {
        font-size: 2.5rem;
      }

      .featured-project {
        flex-direction: column;
        text-align: center;
      }

      .featured-project img {
        margin-bottom: 1.5rem;
        max-width: 100%;
      }
    }
        .cute-section {
            background: linear-gradient(135deg, #FDE2F3, #E4D7FF, #D6F6FF);
            border-radius: 20px;
        }
    
        /* Main Title */
        .cute-title {
            font-size: 48px;
            font-weight: 700;
            color: #6C5DD3;
            margin-bottom: 15px;
        }
    
        /* Subtitle */
        .cute-subtitle {
            font-size: 28px;
            font-weight: 600;
            color: #FF6FB5;
            margin-bottom: 10px;
        }
    
        /* Paragraph */
        .cute-paragraph {
            background: #ffffffb8;
            padding: 25px;
            border-radius: 20px;
            font-size: 18px;
            line-height: 1.6;
            border-left: 5px solid #B9CEF1;
            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
        }
    
        /* Cute rounded image */
        .cute-img {
            border: 6px solid #FFE6FA;
            padding: 5px;
        }
                .hobby-card {
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                }
        
                .hobby-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
                }
                                .hobby-card img {
                                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                                    cursor: pointer;
                                }
                
                                .hobby-card img:hover {
                                    transform: scale(1.05);
                                    box-shadow: 0 10px 20px rgba(108, 93, 211, 0.3);
                                    /* Soft purple shadow */
                                    border-radius: 16px;
                                    /* keeps the rounded corners smooth on hover */
                                }
                                                                .project-card {
                                                                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                                                                }
                                
                                                                .project-card:hover {
                                                                    transform: translateY(-8px);
                                                                    box-shadow: 0 12px 24px rgba(108, 93, 211, 0.25);
                                                                }
                                
                                                                /* Buttons consistent with your branding */
                                                                .btn-primary {
                                                                    background-color: #6C5DD3;
                                                                    border: none;
                                                                }
                                
                                                                .btn-primary:hover {
                                                                    background-color: #5948b8;
                                                                }
                                
                                                                .btn-outline-primary {
                                                                    color: #6C5DD3;
                                                                    border-color: #6C5DD3;
                                                                }
                                
                                                                .btn-outline-primary:hover {
                                                                    background-color: #6C5DD3;
                                                                    color: white;
                                                                }
                                
                                                                /* Responsive tweaks */
                                                                @media (max-width: 767px) {
                                                                    .project-card {
                                                                        text-align: center;
                                                                    }
                                                                }
                                                                                                                                /* 🌙 Dark Mode Footer Wrapper */
                                                                                                                                .cute-footer-dark {
                                                                                                                                  background: #1A1D2E;
                                                                                                                                  border-radius: 25px 25px 0 0;
                                                                                                                                  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
                                                                                                                                  border-top: 2px solid rgba(255, 255, 255, 0.08);
                                                                                                                                }
                                                                
                                                                                                                                /* ✨ Title */
                                                                                                                                .footer-title-dark {
                                                                                                                                  font-size: 28px;
                                                                                                                                  color: #B9CEF1;
                                                                                                                                  font-weight: 700;
                                                                                                                                  text-shadow: 0px 0px 10px rgba(185, 206, 241, 0.4);
                                                                                                                                }
                                                                
                                                                                                                                /* 🌸 Paragraph */
                                                                                                                                .footer-text-dark {
                                                                                                                                  font-size: 16px;
                                                                                                                                  max-width: 550px;
                                                                                                                                  margin: 0 auto;
                                                                                                                                  color: #dcdfff;
                                                                                                                                  opacity: 0.9;
                                                                                                                                }
                                                                
                                                                                                                                /* 💖 Social Icons */
                                                                                                                                .footer-icon-dark {
                                                                                                                                  display: inline-block;
                                                                                                                                  margin: 0 12px;
                                                                                                                                  font-size: 30px;
                                                                                                                                  color: #B9CEF1;
                                                                                                                                  transition: 0.3s ease;
                                                                                                                                  text-shadow: 0px 0px 10px rgba(185, 206, 241, 0.25);
                                                                                                                                }
                                                                
                                                                                                                                .footer-icon-dark:hover {
                                                                                                                                  color: #ee5151;
                                                                                                                                  transform: translateY(-4px) scale(1.1);
                                                                                                                                  text-shadow: 0px 0px 12px rgba(238, 81, 81, 0.5);
                                                                                                                                }
                                                                
                                                                                                                                /* 🌙 Copyright */
                                                                                                                                .footer-copy-dark {
                                                                                                                                  font-size: 14px;
                                                                                                                                  color: #dcdfff;
                                                                                                                                  opacity: 0.65;
                                                                                                                                }
                                                                
                                                                                                                                /* 📱 Responsive Adjustments */
                                                                                                                                @media (max-width: 768px) {
                                                                                                                                  .footer-title-dark {
                                                                                                                                    font-size: 24px;
                                                                                                                                  }
                                                                
                                                                                                                                  .footer-icon-dark {
                                                                                                                                    font-size: 26px;
                                                                                                                                  }
                                                                                                                                }