.stylish-group {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 6px;
    background: #2c2c2c; /* Fondo oscuro para el contenedor. */
    border-radius: 0.5rem;
    border: 1px solid #666; /* Borde oscuro. */
}

.stylish-input-container {
    position: relative;
    flex: 1;
}

.stylish-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #fff !important;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    z-index: 2; /* Esto asegura que el ícono esté por encima del input. */
}

.stylish-input {
    position: relative;
    padding-left: 40px;
    border: none !important;
    background: #2c2c2c !important; /* Fondo oscuro para el input. */
    color: #fff !important; /* Texto claro para el input. */
    box-shadow: none !important;
    border-radius: 0.5rem 0 0 0.5rem !important; /* Borde redondeado solo en la izquierda. */
    z-index: 1; /* Menor que el z-index del ícono. */
}

.stylish-btn {
    color: #ffffff;
    background-color: #666;
    border-color: #666;
    border-radius: 4px;
    margin-left: -1px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.stylish-btn:hover {
    background-color: #555;
    border-color: #555;
    border-radius: 4px;
}

.stylish-btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(102, 102, 102, 0.5);
}


.style-whois {
    border-top-left-radius: 2.25rem !important;
    border-top-right-radius: 2.25rem !important;
    background-color: #343a40;
    }
.domain-tlds {
    padding: 20px 0;
}

.domain-tld {
    border: 1px solid #e0e0e0; /* Borde sutil */
    padding: 15px;
    border-radius: 5px; /* Bordes redondeados */
    text-align: center; /* Centrar el contenido */
    transition: transform 0.3s; /* Efecto de transición al pasar el mouse */
    background-color: #dadada; /* Fondo blanco para cada recuadro */
    margin-bottom: 15px; /* Espacio entre recuadros */
}

.domain-tld:hover {
    transform: scale(1.05); /* Efecto de zoom al pasar el mouse */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil al pasar el mouse */
}

.tld-name {
    font-size: 24px; /* Tamaño de fuente más grande */
    font-weight: bold; /* Texto en negrita */
    color: #4a90e2; /* Color azul suave para el nombre del dominio */
    margin-bottom: 10px; /* Espacio entre el nombre del dominio y el precio */
}

.tld-name span {
    color: #b75601; /* Azul marino oscuro para el punto */
    font-size: 35px; /* Tamaño más grande para el punto */
}

.tld-price span {
    color: #333; /* Color oscuro para el precio */
    font-size: 18px; /* Tamaño de fuente más grande para el precio */
}