@import url('variables.css');

/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

/* BODY */
body{
    font-family: var(--font-main);
    background: var(--white);
    color: var(--black);
    line-height: 1.6;
}
header{
    margin-bottom:0;
    padding-bottom:0;
}

/* CONTAINER SPACING */
section{
    padding: 80px 0;
}

/* HEADINGS */
h1,h2,h3,h4,h5{
    font-weight: 700;
    color: var(--black);
}

/* PARAGRAPH */
p{
    color: var(--text);
}

/* ================= BUTTONS ================= */

.btn-primary{
    background: var(--primary);
    color: var(--white);
    padding: 12px 26px;
    border-radius: 8px;
    text-decoration: none;
    display:inline-block;
    font-weight: 600;
    transition: 0.3s;
    border: none;
}

.btn-primary:hover{
    background: var(--primary-dark);
    color: var(--white);
}

/* OUTLINE BUTTON */
.btn-outline{
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 12px 26px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-outline:hover{
    background: var(--primary);
    color: var(--white);
}

/* ================= CARD ================= */

.card{
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    transition: 0.3s;
}

.card:hover{
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ================= INPUT ================= */

input, textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:8px;
    padding:12px 15px;
    font-size:14px;
    outline:none;
}

input:focus, textarea:focus{
    border-color: var(--primary);
}

/* ================= NAVBAR ================= */

.navbar{
    background: var(--white);
    border-bottom:1px solid var(--border);
}

.navbar a{
    color: var(--black);
    font-weight:500;
}

.navbar a:hover{
    color: var(--primary);
}

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

.hero{
    background: var(--bg-light);
}

.hero h1 span{
    color: var(--primary);
}

html, body{
    overflow-x:hidden;
    max-width:100%;
}