/*Variables*/
:root {
    /*====| Color Palletes |====*/
    /*____Pallete 1____*/
    --P1_LightShade: #f9f9f7;
    --P1_LightAccent: #8a8679;
    --P1_MainShade: rgb(125, 140, 154);
    --P1_DarkShade: #887878;
    --P1_DarkAccent: #333940;
    /*____Pallete 2____*/
    --P2_LightShade: #f9f9f7;
    --P2_LightAccent: #8a8679;
    --P2_MainShade: #7d8c9a;
    --P2_DarkShade: #887878;
    --P2_DarkAccent: #333940;
    
    /*====| Hero Header Sizes |====*/
    --Primary_Hero_h1: 
}

p{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: .9em;
}

/*====| Base Styles |====*/
*{
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}

body{ 
    background-color: var(--P1_LightShade);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#HeroSect{
    padding: 0px 5em;
}
#ContentSect{
    margin: 2em 5em;
}

.V_Line{
    width: 3px;
    background-color: var(--P1_LightShade);
}
.H_Line{
    height: 3px;
    background-color: var(--P1_LightShade);
}

#CTA_Box{
    display: inline-flex;
    gap:.5em;
    width: 90%;
    margin: 0 auto;
    justify-content: center;
}

/*___Hero Section___*/
#HeroSect{
    background-color: var(--P1_DarkAccent);
    color: var(--P1_LightShade);
    text-align: center;
    font-size: 3rem;
    padding: 1em;
}
.PrimaryHero{
    font-size: 2em;
}
#Sub_Hero{
    font-size: 1em;
}

/*___Content Section___*/
#ContentSect{
    background-color: var(--P1_LightShade);
    padding: 2em 5em;
}