/* ================================
   KIMBER CONSULTING PREMIUM STYLE
================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #1c1c1c;
    background: #ffffff;
}


/* ================================
   HERO SECTION
================================ */

.hero {
    height: 100vh;
    background:
    linear-gradient(
        rgba(0,35,70,.75),
        rgba(0,0,0,.65)
    ),
    url("../images/background.jpg");

    background-size: cover;
    background-position: center;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;
    overflow:hidden;
}


.hero-content {
    text-align:center;
    color:white;
    max-width:900px;
    padding:20px;

    animation: fadeUp 1.5s ease;
}


.logo {
    width:160px;
    margin-bottom:30px;

    animation: floating 4s infinite ease-in-out;
}


.hero h1 {

    font-size:clamp(2.5rem,5vw,4rem);
    font-weight:700;
    line-height:1.2;

}


.hero p {

    margin:25px auto;
    font-size:1.2rem;
    opacity:.9;

}


/* BUTTONS */

.buttons {

    margin-top:35px;

}


.btn {

    display:inline-block;
    padding:15px 35px;
    margin:10px;

    border-radius:50px;

    text-decoration:none;
    font-weight:600;

    transition:.4s;

}



.primary {

    background:#c9a227;
    color:white;

}


.primary:hover {

    transform:translateY(-5px);
    box-shadow:0 15px 30px rgba(0,0,0,.3);

}



.outline {

    border:2px solid white;
    color:white;

}


.outline:hover {

    background:white;
    color:#003366;

}



/* ================================
   SECTIONS
================================ */

section {

    padding:90px 8%;

}


h2 {

    text-align:center;
    font-size:2.5rem;
    margin-bottom:30px;
    color:#003366;

}



.about {

    text-align:center;
    max-width:900px;
    margin:auto;

}



.about p {

    font-size:1.1rem;
    line-height:1.8;

}



/* ================================
   SERVICES CARDS
================================ */

.services {

    background:#f5f7fa;

}



.grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(230px,1fr));

    gap:30px;

}



.card {

    background:white;

    padding:35px 20px;

    text-align:center;

    border-radius:18px;

    font-weight:600;

    color:#003366;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    transition:.5s;

    cursor:pointer;

    opacity:0;
    transform:translateY(40px);

}



.card.show {

    opacity:1;
    transform:translateY(0);

}



.card:hover {

    transform:
    translateY(-12px)
    scale(1.03);

    background:#003366;

    color:white;

    box-shadow:
    0 20px 40px rgba(0,0,0,.2);

}



/* ================================
   CONTACT
================================ */

.contact {

    text-align:center;

}



form {

    max-width:600px;
    margin:40px auto;

    display:flex;
    flex-direction:column;
    gap:15px;

}


input {

    padding:15px;

    border-radius:10px;

    border:1px solid #ddd;

    font-size:1rem;

}


button {

    padding:15px;

    border:none;

    border-radius:50px;

    background:#003366;

    color:white;

    font-size:1rem;

    cursor:pointer;

    transition:.3s;

}


button:hover {

    background:#c9a227;

}

button:disabled {

    background:#8a99a8;
    cursor:not-allowed;

}


/* Message de retour du formulaire */

#form-message {

    margin-top:5px;
    font-size:.95rem;
    font-weight:600;
    min-height:1.2em;

}


#form-message.success {

    color:#1e7e34;

}


#form-message.error {

    color:#c0392b;

}



/* FOOTER */

.footer {
    background: #0f172a;
    color: #cbd5e1;
    text-align: center;
    padding: 40px 20px;
    font-size: 14px;
}

.footer .brand {
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
}

.footer .tagline {
    font-size: 13px;
    opacity: 0.7;
    margin-bottom: 15px;
}

.footer .credits {
    font-size: 12px;
    opacity: 0.5;
}



/* WHATSAPP */

.whatsapp {

    position:fixed;

    right:25px;
    bottom:25px;

    width:60px;
    height:60px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:30px;

    text-decoration:none;

    box-shadow:0 10px 30px rgba(0,0,0,.3);

    animation:pulse 2s infinite;

}



/* ================================
   ANIMATIONS
================================ */


@keyframes fadeUp {

from {

opacity:0;
transform:translateY(50px);

}

to {

opacity:1;
transform:none;

}

}



@keyframes floating {

50% {

transform:translateY(-15px);

}

}



@keyframes pulse {

50% {

transform:scale(1.1);

}

}


/* MOBILE */

@media(max-width:768px){

.hero h1{

font-size:2.2rem;

}

section{

padding:60px 5%;

}

}