/* Mochatomic - playful bubble theme */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;800&display=swap');

:root{
  --bubble-1: #ff6a00; /* orange */
  --bubble-2: #ff3b30; /* red */
  --bubble-3: #ffd166; /* yellow */
  --bubble-4: #2d9cdb; /* blue */
  --bubble-5: #34d399; /* green */
  --bg-soft: #fffdf7;
  --text: #0f1724;
}

*{box-sizing:border-box}
body{
  font-family: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  color:var(--text);
  background: linear-gradient(120deg, #fff 0%, #fffaf6 100%);
  -webkit-font-smoothing:antialiased;
}

.topbar{ background:#000; padding-top:1.25rem; padding-bottom:1.25rem; border-bottom:1px solid rgba(255,255,255,0.06); }
.navbar{ background:#000; padding-top:1.25rem; padding-bottom:1.25rem; border-bottom:1px solid rgba(255,255,255,0.06); }
/* Bootstrap's .bg-transparent uses !important; add a more specific selector and !important to override it */
.navbar.bg-transparent{ background-color:#000 !important; }
.site-brand{ color:var(--bubble-1); font-size:2.25rem; font-weight:800; letter-spacing:-1px; }
/* make navbar container a positioning context so the brand can be centered */
.navbar .container{ position:relative; }
/* center the brand in the navbar */
.site-brand{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
}
.nav-link{ color: #444 !important; font-weight:600 }
.nav-link:hover{ color:var(--bubble-4) !important }

/* Hero */
.hero{
  background: radial-gradient(circle at 10% 20%, rgba(255,106,0,0.12) 0%, transparent 20%),
              radial-gradient(circle at 90% 80%, rgba(52,211,153,0.10) 0%, transparent 20%),
              linear-gradient(180deg, #fff 0%, #fffdf7 100%);
  min-height:68vh; display:flex; align-items:center;
  text-align:center; padding:4rem 0;
}
.hero .display-1{
  font-size:4.5rem; line-height:1; color:var(--bubble-4); letter-spacing:-2px;
}
.hero .lead{ color:#6b6b6b; font-weight:600 }

/* CTA buttons */
.btn-cta{ background:linear-gradient(90deg,var(--bubble-1),var(--bubble-4)); color:#fff; border:none; border-radius:40px; padding:0.75rem 1.6rem; }
.btn-outline-cta{ border:2px solid var(--bubble-1); color:var(--bubble-1); background:transparent; border-radius:40px; padding:0.6rem 1.4rem; }
.btn-cta:hover{ transform:translateY(-3px); }

/* Sections */
section{ padding:3.5rem 0; }
.bg-soft{ background:var(--bg-soft); }

/* Center text in the customsoftware section */
#customsoftware { text-align: center; }

/* Services section — soft green background matching the palette */
#services{
  background: linear-gradient(180deg, rgba(52,211,153,0.12) 0%, rgba(52,211,153,0.05) 100%);
}

/* About section — soft blue background (matches --bubble-4) */
#about{
  background: linear-gradient(180deg, rgba(45,156,219,0.10) 0%, rgba(45,156,219,0.04) 100%);
}

.h2, h2{ font-size:2rem; color:var(--bubble-4); margin-bottom:1rem }
.card{ border:none }
.card-title{ color:var(--bubble-2); font-weight:700 }
.card-text{ color:#555 }

/* Service card images (larger on desktop, responsive on smaller screens) */
.service-img{ width:220px; height:160px; object-fit:cover; border-radius:12px; display:block; margin-left:auto; margin-right:auto; box-shadow:0 8px 24px rgba(18,24,34,0.08); }

@media (max-width:992px){
  .service-img{ width:180px; height:130px; }
}

@media (max-width:576px){
  .service-img{ width:140px; height:100px; }
}

.bubble-image{ width:180px; height:180px; background:linear-gradient(135deg,var(--bubble-4),var(--bubble-5)); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:3rem; color:#fff }

/* About section image */
.about-image{ max-width:320px; border-radius:12px; box-shadow:0 6px 20px rgba(18,24,34,0.06); }

.brain-container{ max-width:420px; }
.brain-svg{ width:100%; height:auto; display:block; }

/* Brain stack: logic image on left overlapping art image on right */
.brain-stack{ position:relative; display:inline-block; }
.brain-left{ position:absolute; left:-14%; top:6%; width:38%; max-width:180px; z-index:2; transform:translateX(0); }
.brain-right{ position:relative; z-index:1; width:100%; max-width:420px; }

@media (max-width:768px){
  .brain-left{ display:none; }
  .brain-container{ max-width:300px; }
}


/* Forms */
.form-control{ border-radius:12px; box-shadow:none; border:1px solid #eee }

/* Footer */
footer{ background:linear-gradient(90deg,#fff,#fffaf6); color:#555 }

@media (max-width:768px){
  .hero .display-1{ font-size:3rem }
  .site-brand{ font-size:1.4rem; position:static; transform:none; }
}

/* Title area with logo + subtitle */
.title-area{ display:block; text-align:center; margin:0 auto; max-width:960px; padding:0.6rem 0; }
/* make the brand itself horizontal: logo + title on one line */
.site-brand{ display:inline-flex; align-items:center; gap:12px; }
.brand-text{ display:inline-block; font-size:2.6rem; font-weight:900; color:var(--bubble-1); font-family: 'Baloo 2', cursive; line-height:1; }

/* Logo to the left of the brand */
.nav-logo{ width:56px; height:56px; object-fit:cover; border-radius:8px; display:inline-block; }

/* Remove link underline and default link color from title anchor */
.site-brand, .site-brand:link, .site-brand:visited, .site-brand:hover, .site-brand:active, .site-brand:focus {
  text-decoration: none !important;
  color: inherit !important;
}

@media (max-width:768px){
  .title-area{ display:block; text-align:center; max-width:420px; }
  .site-brand{ display:block; }
  .brand-text{ font-size:2rem }
  .site-sub{ font-size:1rem }
}

@media (max-width:480px){
  .nav-logo{ width:48px; height:48px; }
  .brand-text{ font-size:1.4rem }
  .site-sub{ font-size:0.9rem }
}