/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


/* ==========================================
   DESIGN TOKENS
========================================== */


:root{

    /* Brand */
    --primary:#D48A3B;
    --primary-hover:#8B5000;
    --secondary:#0E1330;

    /* Background */
    --background:#F8F9FA;
    --surface:#FFFFFF;
    --surface-light:#F3F4F5;

    /* Text */
    --text:#191C1D;
    --text-light:#46464D;

    /* Heading */
    --heading:#141936;

    /* Border */
    --border:#E1E3E4;
    --border-light:#C7C5CE;

    /* State */
    --error:#BA1A1A;

    /* Radius */
    --radius:4px;
    --radius-lg:8px;

}


/* ==========================================
   BODY
========================================== */

body{
    font-size:16px;
    line-height:1.7;
}


/* ==========================================
   HEADING
========================================== */

h1{
    font-size:clamp(36px, 5vw, 64px);
    line-height:1.1;
}

h2{
    font-size:clamp(28px, 4vw, 48px);
    line-height:1.2;
}

h3{
    font-size:clamp(22px, 3vw, 32px);
    line-height:1.25;
}

h4{
    font-size:clamp(18px, 2.5vw, 24px);
    line-height:1.3;
}


/* ==========================================
   PARAGRAPH
========================================== */

p,
li,
span{
    color:var(--text);
}


/* ==========================================
   LINK
========================================== */

a{
    color:var(--primary);
    transition:.25s;
}

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


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

.button,
button,
input[type=submit],
input[type=button]{

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

    color:#fff;

    border-radius:var(--radius);

    font-family:var(--font-body);

    font-weight:600;
}

.button:hover,
button:hover,
input[type=submit]:hover{

    background:var(--primary-hover);
    border-color:var(--primary-hover);
}


/* ==========================================
   HEADER
========================================== */

.header-main{
    background:var(--secondary);
}

.header-main .nav > li > a{
    color:#fff;
}

.header-main .nav > li > a:hover{
    color:var(--primary);
}


/* ==========================================
   FOOTER
========================================== */

.footer-wrapper{
    background:var(--secondary);
    color:#fff;
}

.footer-wrapper a{
    color:#fff;
}

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


/* ==========================================
   FORM
========================================== */

input,
textarea,
select{
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    color:var(--text);
    background:#fff;
}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 2px rgba(212,138,59,.15);
}


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

.box,
.box-text,
.product-small,
.blog-post-inner{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
}


/* ==========================================
   PRICE
========================================== */

.price{
    color:var(--primary);
    font-weight:700;
}


/* ==========================================
   BADGE
========================================== */

.badge,
.onsale{
    background:var(--error);
}


/* ==========================================
   DIVIDER
========================================== */

hr{
    border-color:var(--border);
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}