/* =========================================
   VARIÁVEIS DE CORES & TIPOGRAFIA INFOBASYS
   ========================================= */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap");

:root {
    --infobasys-green: #9CBE1C; 
    --infobasys-green-hover: #83a116; 
    --infobasys-dark: #474747; /* Cinza da logo */
    --infobasys-light: #f8f9fc;
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--infobasys-dark);
}

/* =========================================
   UTILITIES PERSONALIZADOS
   ========================================= */
.text-green-custom { color: var(--infobasys-green) !important; }
.bg-green-custom { background-color: var(--infobasys-green) !important; }
.border-green-custom { border-color: var(--infobasys-green) !important; }
.text-dark-custom { color: var(--infobasys-dark) !important; }
.bg-light-custom { background-color: var(--infobasys-light) !important; }

.tracking-wide { letter-spacing: 1px; }

.btn-green-custom {
    background-color: var(--infobasys-green);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.btn-green-custom:hover {
    background-color: var(--infobasys-green-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(156, 190, 28, 0.4) !important;
}

.divider {
    height: 4px;
    width: 60px;
    background-color: var(--infobasys-green);
    border-radius: 2px;
}

/* =========================================
   HERO SECTION 
   ========================================= */
.hero-section {
    min-height: 70vh;
    /* Fundo branco e limpo para dar o aspecto de "ar" e respiro, como na sua referência */
    background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
    position: relative;
    border-bottom: 5px solid var(--infobasys-green);
}

/* =========================================
   UNIDADES DE NEGÓCIO (Cards & Flexbox)
   ========================================= */
/* Aplicação das regras de agrupamento de cards do material didático */
.card-hover {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-bottom: 4px solid transparent !important;
}

.card-hover:hover {
    transform: translateY(-10px);
    border-bottom: 4px solid var(--infobasys-green) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

.icon-circle {
    width: 70px;
    height: 70px;
    background-color: rgba(156, 190, 28, 0.1);
    color: var(--infobasys-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    transition: all 0.3s ease;
}

.card-hover:hover .icon-circle {
    background-color: var(--infobasys-green);
    color: #fff;
    transform: scale(1.1);
}

/* =========================================
   FORMULÁRIO (Contato)
   ========================================= */
.form-control:focus {
    box-shadow: 0 0 0 3px rgba(156, 190, 28, 0.2);
    border: 1px solid var(--infobasys-green) !important;
}