/* ==========================
   ROOT VARIABLES
========================== */

:root{

    /* Colors */
    --primary:#0B3A75;
    --secondary:#F2B705;
    --dark:#1F2937;
    --text:#555555;
    --bg:#F8FBFF;
    --white:#FFFFFF;
    --border:#E5E7EB;

    /* Layout */
    --radius:20px;
    --container:1200px;

    /* Effects */
    --shadow:0 15px 35px rgba(0,0,0,.08);
    --transition:.35s ease;

}

/* ==========================
   RESET
========================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--dark);
    line-height:1.6;
    overflow-x:hidden;

}

img{

    display:block;
    max-width:100%;
    height:auto;

}

a{

    text-decoration:none;
    color:inherit;
    transition:var(--transition);

}

ul{

    list-style:none;

}

button{

    font-family:inherit;
    cursor:pointer;
    transition:var(--transition);

}

input,
textarea,
select{

    font-family:inherit;

}

/* ==========================
   CONTAINER
========================== */

.container{
    width:90%;
    max-width:var(--container);
    margin:0 auto;

}

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

section{

    padding:100px 0;

}

/* ==========================
   HEADINGS
========================== */

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--dark);
    font-weight:700;
    line-height:1.3;

}

p{

    color:var(--text);

}

/* ==========================
   COMMON BUTTON
========================== */

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 30px;
    border:none;
    border-radius:var(--radius);
    background:var(--primary);
    color:var(--white);
    font-weight:600;
    box-shadow:var(--shadow);
    transition:var(--transition);

}

.btn:hover{
    background:var(--secondary);
    color:var(--dark);
    transform:translateY(-3px);

}

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

.card{

    background:var(--white);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:var(--transition);

}

.card:hover{
    transform:translateY(-6px);

}