/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
:root {
    --bg-gradient: linear-gradient(135deg, #ffe3ec 0%, #ffb6c1 40%, #a0e0ff 100%);
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(255, 255, 255, 0.6);
    --text-main: #334e68;
    --text-highlight: #ff477e;
    --gloss-highlight: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 50%);

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html, body {
    cursor: none; 
    height: 100%;
}

a, button {
    cursor: none;
}
body {
    background: var(--bg-gradient);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    cursor: none
}


  .bubble-cursor {
    position: fixed; 
    pointer-events: none; 
    width: 25px;
    height: 25px;
    border: 2px solid pink;
    border-radius: 50%;
    background-color: rgba(255, 192, 203, 0.4);
    transform: translate(-50%, -50%); 
    z-index: 10000; /* Make sure it stays on top */
  }


  .bubble-trail {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(173, 216, 230, 0.4); 
    transform: translate(-50%, -50%);
    animation: fadeAndShrink 1s forwards;
    z-index: 9999;
  }

  @keyframes fadeAndShrink {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    
    
.bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    z-index: -1; 
    pointer-events: none;
    backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.bubble-1 {
    width: 80px;
    height: 80px;
    left: 10%;
    top: 20%;
    animation: float 15s infinite ease-in-out;
}

.bubble-2 {
    width: 120px;
    height: 120px;
    right: 15%;
    top: 50%;
    animation: float 20s infinite ease-in-out reverse;
}

.bubble-3 {
    width: 60px;
    height: 60px;
    left: 40%;
    bottom: 10%;
    animation: float 18s infinite ease-in-out;
}


@keyframes float {
    0% {
        transform: translateY(0px) translateX(0px) scale(1);
    }
    33% {
        transform: translateY(-50px) translateX(20px) scale(1.05);
    }
    66% {
        transform: translateY(20px) translateX(-20px) scale(0.95);
    }
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
    }
}
      

        


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 10%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

.logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.logo i { color: #2d9cdb; font-size: 2rem; }
.logo span { color: var(--text-highlight); }

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

.nav-links a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.nav-links a:hover, .nav-links a.active {
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-highlight);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.8), 0 2px 10px rgba(255, 71, 126, 0.15);
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 5rem;
}

.hero-content {
    flex: 1;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(255,255,255,0.8);
}

.hero-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}


.btn-glossy {
    padding: 0.8rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to bottom, #ff758c 0%, #ff477e 100%);
    border: 1px solid #ff1a56;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 71, 126, 0.4), inset 0 1px 0 rgba(255,255,255,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}


.btn-glossy::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: var(--gloss-highlight);
    border-radius: 30px 30px 0 0;
}

.btn-glossy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 71, 126, 0.6), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* --- 3D Glass Sphere Visual --- */
.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

.glass-sphere {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.9) 0%, rgba(255, 143, 177, 0.5) 45%, rgba(45, 156, 219, 0.6) 90%);
    box-shadow: 
        inset 0 -20px 50px rgba(0,0,0,0.1),
        inset -10px -10px 30px rgba(45, 156, 219, 0.3),
        0 20px 40px rgba(0,0,0,0.1);
    position: relative;
}

.glass-sphere::after {
    content: '';
    position: absolute;
    top: 5%; left: 15%;
    width: 70%; height: 35%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
    border-radius: 50% / 100% 100% 0% 0%;
}


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

.card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.04), inset 0 4px 4px rgba(255,255,255,0.4);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}


.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.card:hover {
    transform: translateY(-5px);
}

.card-icon {
    font-size: 3rem;
    color: var(--text-highlight);
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
}

.card h3 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    color: #2c3e50;
}


footer {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.2);
    border-top: 1px solid var(--glass-border);
    margin-top: 5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

  
  
@media (max-width: 768px) {
    .hero {
        flex-direction: column-reverse;
        text-align: center;
    }
    .navbar {
        flex-direction: column;
        gap: 1rem;
    }
    .glass-sphere {
        width: 200px;
        height: 200px;
    }
}