/* .navbar-custom {
    background-color: #2C3E50;
    background-image: url("./images/Tutoring\ Nav\ Bar.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.white-text {
    color: white;
}

.gray-background {
    background-color: #ECF0F1;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.hover:hover {
    color: #F1C40F;
}

.logo {
    font-size: 2rem;
}

.hero-image {
    width: 100%;
    aspect-ratio: 32 / 9;
    background-image: url('./images/beach-1866992_1280.jpg');
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

.hero-text {
    font-size: clamp(16px, 2vw, 64px);
}

.body-text {
    font-size: 24px;
}

.copyright {
    background-image: url("./images/Tutoring\ Nav\ Bar.png");
    height: 50px;
}

@media (max-width: 768px) {
    .hero-image {
      height: 20vh;
    }
  } */
:root {
      --brand-navy: #1a2b4c;
      --brand-accent: #f5a623;
      --brand-light: #f7f9fc;
    }

    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    .text-brand { color: var(--brand-navy) !important; }
    .bg-brand { background: var(--brand-navy) !important; }
    .bg-brand-soft { background: var(--brand-light); }

    .btn-accent { background: var(--brand-accent); color: #111; font-weight: 600; }
    .btn-accent:hover { background: #d7901d; color: #111; }
    .btn-outline-accent { border: 2px solid var(--brand-accent); color: var(--brand-accent); font-weight: 600; }
    .btn-outline-accent:hover { background: var(--brand-accent); color: #111; }

    .hero .badge { background: rgba(255,255,255,0.2); }

    .service-card { border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: transform .2s; }
    .service-card:hover { transform: translateY(-5px); }
    .service-card .icon { font-size: 2rem; }

    .step { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    .step-num { background: var(--brand-navy); color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }

    footer { background: var(--brand-navy); color: white; }
    footer a { color: var(--brand-accent); text-decoration: none; }
    footer a:hover { text-decoration: underline; }

.hero {
  /* gradient overlay on top of the photo */
  background-image:
    linear-gradient(135deg, rgba(26,43,76,.6) 0%, rgba(15,26,46,.6) 100%),
    url("images/beach-1866992_1280.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  color: white;
  min-height: 65vh;   
  position: relative;
}

.text-accent { color: var(--brand-accent) !important; }

.about-photo-wrapper {
  width: 180px;          /* final visible size */
  height: 180px;         /* keep square */
  border-radius: 50%;    /* makes it circular */
  overflow: hidden;      /* hides everything outside circle */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* optional */
}

.about-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fills the circle */
  object-position: 15% 20%; /* adjust vertical focus: 50% X, 20% Y */
  display:block;
}

.hero-services {
  /* gradient overlay on top of the photo */
  background-image:
    linear-gradient(135deg, rgba(26,43,76,.6) 0%, rgba(15,26,46,.6) 100%),
    url("images/elisa-calvet-b-S3nUOqDmUvc-unsplash.jpg");
  background-size: cover;
  background-position: center 0%;
  background-repeat: no-repeat;
  color: white;
  min-height: 40vh;   
  position: relative;
}