/*==================================================
    GLOBAL CSS
==================================================*/

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

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

:root{

    /* Colors */
    --primary:#FF6900;
    --primary-hover:#E45F00;

    --secondary:#1E1E1E;

    --text:#333333;
    --heading:#18181B;

    --white:#ffffff;
    --border:#E5E7EB;
    --light:#F8F8F8;

    /* Typography */
    --font-family:'Inter',sans-serif;

    --h1:clamp(38px,5vw,60px);
    --h2:clamp(34px,4.5vw,56px);
    --h3:clamp(28px,4vw,44px);
    --h4:clamp(24px,3vw,36px);
    --h5:clamp(20px,2.5vw,28px);
    --h6:clamp(18px,2vw,22px);

    --body:16px;
    --small:14px;

    --transition:.3s ease;
    --radius:4px;

}

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

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--font-family);
    font-size:var(--body);
    line-height:1.7;
    font-weight:400;

    color:var(--text);
    background:#fff;
    overflow-x: hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

img{
    max-width:100%;
    display:block;
}

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

ul,
ol{
    list-style:none;
}

section{
    position:relative;
}

/*==================================================
    TYPOGRAPHY
==================================================*/

h1,
.h1{

    font-size:var(--h1);
    line-height:1.15;
    font-weight:700;
    color:var(--heading);
    margin-bottom:20px;
}

h2,
.h2{

    font-size:var(--h2);
    line-height:1.2;
    font-weight:700;
    color:var(--heading);
    margin-bottom:18px;
}

h3,
.h3{

    font-size:var(--h3);
    line-height:1.25;
    font-weight:700;
    color:var(--heading);
    margin-bottom:16px;
}

h4,
.h4{

    font-size:var(--h4);
    line-height:1.3;
    font-weight:600;
    color:var(--heading);
    margin-bottom:14px;
}

h5,
.h5{

    font-size:var(--h5);
    line-height:1.35;
    font-weight:600;
    color:var(--heading);
    margin-bottom:12px;
}

h6,
.h6{

    font-size:var(--h6);
    line-height:1.4;
    font-weight:600;
    color:var(--heading);
    margin-bottom:10px;
}

p{

    font-size:16px;
    line-height:1.8;
    color:var(--text);
    margin-bottom:20px;
}

strong{
    font-weight:700;
}

small{
    font-size:14px;
}

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

.a3-btn,
button,
.wp-element-button,
input[type="submit"]{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 36px;
    font-family:var(--font-family);
    min-height: 56px;
    border-radius:0px !important;
    border:2px solid transparent;
    cursor:pointer;
    transition:var(--transition);
    text-decoration:none;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.4px;
}

/* Primary */

.a3-btn--primary{

    background:var(--primary);
    color:#fff;
}

.a3-btn--primary:hover{

    background:var(--primary-hover);
    transform:translateY(-2px);
}

/* Secondary */

.a3-btn--secondary{

    background:#fff;
    color:var(--secondary);
    border:2px solid #fff;
}

.a3-btn--secondary:hover{

    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

/*==================================================
    FORMS
==================================================*/

input,
textarea,
select{

    width:100%;

    padding:16px 20px;

    font-family:var(--font-family);
    font-size:16px;

    border:1px solid var(--border);
    border-radius:4px;

    outline:none;
    transition:var(--transition);
}

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

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

textarea{

    resize:vertical;
    min-height:150px;
}

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

.container{

    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding:0 15px;
}

/*==================================================
    UTILITIES
==================================================*/

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

.d-flex{
    display:flex;
}

.align-center{
    align-items:center;
}

.justify-center{
    justify-content:center;
}

.justify-between{
    justify-content:space-between;
}

.a3-tag{
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
    display: flex;
    align-items: center;
    letter-spacing: 1.65px;
    text-transform: uppercase;
    color: #F54900;
    padding: 4px 8px;
    background: #FFF7ED;
    border-radius: 4px;
    display: inline-block;
}
/*==================================================
    SELECTION
==================================================*/

::selection{

    background:var(--primary);
    color:#fff;
}

/*==================================================
    RESPONSIVE
==================================================*/

@media (max-width:991px){

    .container{
        max-width:100%;
    }

    .a3-btn,
    button,
    .wp-element-button,
    input[type="submit"]{

        padding:10px 30px;
        font-size:17px;
    }

}

@media (max-width:767px){

    h1{
        line-height:1.2;
    }

    h2{
        line-height:1.25;
    }

    p{
        font-size:15px;
    }

    .a3-btn,
    button,
    .wp-element-button,
    input[type="submit"]{
        padding:10px 24px;
        font-size:16px;
    }

}