/* ==========================================
   GOOGLE FONT
========================================== */

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


/* ==========================================
   CSS VARIABLES
========================================== */

:root{

    /* Brand Colors */

    --primary:#EA580C;

    --primary-dark:#C2410C;

    --secondary:#1F2937;

    --white:#FFFFFF;

    --black:#111111;

    --text:#6B7280;

    --light:#F8F9FA;

    --border:#E5E7EB;

    /* Layout */

    --container-width:1320px;

    --header-height:100px;

    --section-padding:120px;

    --border-radius:8px;

    /* Transition */

    --transition:all .35s ease;

}


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

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


/* ==========================================
   HTML
========================================== */

html{

    scroll-behavior:smooth;

    scrollbar-width:none;

}


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

body{

    font-family:'Poppins',sans-serif;

    font-size:16px;

    font-weight:400;

    line-height:1.7;

    color:var(--text);

    background:var(--white);

    overflow-x:hidden;

    -ms-overflow-style:none;

}

body::-webkit-scrollbar{

    display:none;

}


/* ==========================================
   IMAGES
========================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

}


/* ==========================================
   LINKS
========================================== */

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}


/* ==========================================
   LISTS
========================================== */

ul,
ol{

    list-style:none;

}


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

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

    color:var(--secondary);

    font-weight:700;

    line-height:1.2;

}

h1{

    font-size:64px;

}

h2{

    font-size:42px;

}

h3{

    font-size:28px;

}


/* ==========================================
   PARAGRAPHS
========================================== */

p{

    font-size:17px;

    color:var(--text);

}


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

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}


/* ==========================================
   INPUTS
========================================== */

input,
textarea{

    font-family:inherit;

    outline:none;

}


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

.container{

    width:100%;

    max-width:1320px;

    margin:0 auto;

    padding:0 20px;

}


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

section{

    position:relative;

    padding:var(--section-padding) 0;

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:var(--border-radius);

    font-size:16px;

    font-weight:600;

    transition:var(--transition);

    cursor:pointer;

}

.btn-primary{

    background:var(--primary);

    color:var(--white);

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

.btn-outline{

    border:2px solid var(--white);

    color:var(--white);

}

.btn-outline:hover{

    background:var(--white);

    color:var(--secondary);

}


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

.text-center{

    text-align:center;

}

.text-white{

    color:var(--white);

}

.bg-light{

    background:var(--light);

}


/* ==========================================
   SELECTION
========================================== */

::selection{

    background:var(--primary);

    color:var(--white);

}