html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/*navbar icon style*/

#btnThemeToggle:focus,
#btnThemeToggle:active:focus {
    box-shadow: none;
}
/* ============================================= */
/* NAVBAR - ESTILOS MODERNOS                      */
/* ============================================= */

/* --- 1. Botón de tema (sol/luna) en forma de círculo --- */
/* Le da un fondo circular sutil al botón para que se vea como un
   "botón de acción" y no un ícono suelto flotando en el navbar */
#btnThemeToggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(120, 120, 120, 0.12); /* gris neutro, se ve en ambos temas */
    padding: 0;
    margin-left: 12px;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

    /* Al pasar el mouse: se pone azul clarito y crece un poco */
    #btnThemeToggle:hover {
        background-color: rgba(59, 130, 246, 0.25);
        transform: scale(1.08);
    }

    /* El ícono (sol/luna) gira levemente al hacer hover, efecto "vivo" */
    #btnThemeToggle i {
        font-size: 1.1rem;
        transition: transform 0.3s ease;
    }

    #btnThemeToggle:hover i {
        transform: rotate(20deg);
    }

/* --- 2. Links del menú (Home, About Us, etc.) con subrayado animado --- */
/* En vez de solo cambiar de color al hacer hover, aparece una linea
   azul que "crece" de izquierda a derecha debajo del link. Se ve
   muy moderno y es un patrón común en sitios corporativos */
.nav-link.nav-scroll {
    position: relative;
    padding-bottom: 4px;
}

    .nav-link.nav-scroll::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        background-color: #3b82f6;
        transition: width 0.25s ease;
    }

    .nav-link.nav-scroll:hover::after {
        width: 100%;
    }

/* --- 3. Botones "Our Services" / "Contact Us" con efecto de elevación --- */
/* Al pasar el mouse, el botón se levanta un poquito y le sale una
   sombra azul suave debajo, como si "flotara". Es un efecto muy
   usado en botones modernos de landing pages */
.btn-primary,
.btn-outline-light {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .btn-primary:hover,
    .btn-outline-light:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(59, 130, 246, 0.35);
    }