/* Reset e configurações gerais */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    --primary-color: #0066cc;

    --primary-dark: #0052a3;

    --primary-light: #4d94ff;

    --white: #ffffff;

    --light-gray: #f5f5f5;

    --dark-gray: #333333;

    --text-color: #444444;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    line-height: 1.6;

    color: var(--text-color);

    overflow-x: hidden;

}



.container {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 15px;

}



section {

    padding: 80px 0;

}



.section-title {

    text-align: center;

    font-size: 2.5rem;

    margin-bottom: 50px;

    color: var(--primary-color);

    position: relative;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: -10px;

    left: 50%;

    transform: translateX(-50%);

    width: 80px;

    height: 3px;

    background-color: var(--primary-color);

}



.btn {

    display: inline-block;

    padding: 12px 30px;

    background-color: var(--primary-color);

    color: var(--white);

    border: none;

    border-radius: 30px;

    text-decoration: none;

    font-weight: 600;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);

}



.btn:hover {

    background-color: var(--primary-dark);

    transform: translateY(-3px);

    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);

}



.btn-outline {

    background-color: transparent;

    border: 2px solid var(--primary-color);

    color: var(--primary-color);

}



.btn-outline:hover {

    background-color: var(--primary-color);

    color: var(--white);

}



.btn-buy {

    background-color: #ff6600;

    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);

}



.btn-buy:hover {

    background-color: #e55c00;

    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4);

}



.btn-register {

    background-color: #28a745;

    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);

}



.btn-register:hover {

    background-color: #218838;

    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);

}



/* WhatsApp Float Button */

.whatsapp-float {

    position: fixed;

    bottom: 25px;

    right: 25px;

    width: 60px;

    height: 60px;

    background-color: #25d366;

    color: var(--white);

    border-radius: 50%;

    text-align: center;

    font-size: 30px;

    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);

    z-index: 1000;

    display: flex;

    justify-content: center;

    align-items: center;

    animation: pulse 2s infinite;

    transition: all 0.3s ease;

}



.whatsapp-float:hover {

    transform: scale(1.1);

    animation: none;

}



@keyframes pulse {

    0% {

        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);

    }

    70% {

        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);

    }

    100% {

        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);

    }

    

}