/* ================================================================================================================== */
/* INLINE VARS */ 
/* ================================================================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --clr-primary:           #e86e34; /*/ DARING ORANGE */
    --clr-secondary:         #253e4e; /*/ STEADFAST BLUE */
    --clr-tertiary:          #feefe8; /*/ OFF WHITE */
    
    --font-primary:         'Work Sans', Arial, sans-serif; 
    --font-secondary:       'Bricolage Grotesque', 'Work Sans', Arial, sans-serif; 

    --main-margin:          10px;
    --main-border-radius:   15px;
    
    --theme-bg:             #feefe8;
    --theme-text:           #253e4e;
}

@media only screen and (min-width: 768px) 
{
    :root { 
        --main-margin:           15px;
        --main-border-radius:    20px;
    }
}

@media only screen and (min-width: 992px) 
{
    :root { 
        --main-margin:           20px;
        --main-border-radius:    25px;
    }
}

@media only screen and (min-width: 1200px) 
{
    :root { 
        --main-margin:           25px;
        --main-border-radius:    30px;
    }
}

@media only screen and (min-width: 1600px) 
{
    :root { 
        --main-margin:           30px;
        --main-border-radius:    35px;
    }
}

/* ================================================================================================================== */
/* BASIC SETTINGS */
/* ================================================================================================================== */


html, body 
{ 
    font-family:    var(--font-primary);
    font-weight:    400;

    min-height:     100%;
    max-width:      100%;
    height:         100%;
    
    background:     var(--theme-bg);
    color:          var(--theme-text);
    position:       relative;
    
    padding:        0;
    margin:         0;
}


/* ##*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*# */
/* ##**  TYPOGRAPHYS *########################################################################### */
/* ##*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*# */

body { 
    font-size: clamp(15px, 2vw, 18px); 
    line-height: 1.5em; 
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
} 

@media only screen and (min-width : 768px)
{
    body { font-size: clamp(17px, 2vw, 19px); line-height: 1.5em; } 
}

@media only screen and (min-width : 992px)
{
    body { font-size: clamp(18px, 2vw, 20px); line-height: 1.5em; } 
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-secondary); letter-spacing: 1px; text-wrap: balance; }
h1 { font-weight: 600; font-size: 2.6em; line-height: 1.1em; margin-bottom: 0.5em; }
h2 { font-weight: 600; font-size: 2em; line-height: 1.1em; }
h3 { font-weight: 400; font-size: 1.5em; line-height: 1.1em; }

p { margin-bottom: 1.3em; }
b { font-weight: 600; }

.lead { font-weight: 400; }

/* ================================================================================================================== */
/* BASICS */
/* ================================================================================================================== */

.container {
    padding-top: var(--main-margin);
    padding-bottom: var(--main-margin);
    max-width: 100%;
}

.wrapper {
    background-color: white;
    border-radius: var(--main-border-radius);
    max-width: 100%;
}

.hero {
    background-color: var(--clr-secondary);
    color: var(--clr-primary);
    aspect-ratio: 3 / 1;
    min-height: 300px;
    max-width: 100%;
    position: relative;
    
    background-image: url('../img/background.jpg');
    background-position: center center;
    background-size: cover;
    
    border-top-left-radius: var(--main-border-radius);
    border-top-right-radius: var(--main-border-radius);
}

.hero::before,
.hero::after 
{
    content:  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2041%22%3E%3Cpath%20fill%3D%22%23feefe8%22%20d%3D%22M100%2C1c-28.48%2C0-44.19%2C12.15-50%2C40C44.19%2C13.15%2C28.5%2C1%2C0%2C1V0h100v1Z%22%2F%3E%3C%2Fsvg%3E");
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: -50px;
}  

.hero::after {
    transform: rotate(-90deg);
    left: -1px;
}

.hero::before {
    transform: rotate(90deg);
    right: -1px;
}

.cta { 
    background-color: var(--clr-primary);
    color: var(--clr-tertiary);
    border-bottom-left-radius: var(--main-border-radius);
    border-bottom-right-radius: var(--main-border-radius);
}

.padme { padding: var(--main-margin) calc(var(--main-margin) * 2); }


.cta-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: var(--main-margin);
}

.cta-item { 
    display: grid; 
    gap: calc(var(--main-margin) * 0.6);
    grid-template-columns: 1fr 4fr;
    align-content: center;
    align-items: center;
    justify-content: stretch;
    justify-items: center;
}