@import url(header.css);
@import url(footer.css);
@import url(media-quries.css);

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

:root {
    --main-color: #ffd000;
    --black: #13131a;
    --bg: #010103;
    --border: 1 rem solid rgba(255,255,255,.3);
}

.space {
    width: 100%;
    height: 100vh;

}
* {
    font-family: 'Roboto', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    text-transform: capitalize;
    transition: .2s linear;
}

.active {
    color: var(--main-color);
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 9rem;
    scroll-behavior: smooth;
}

html::-webkit-scrollbar {
    width: .8rem;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 5rem;
}

body {
    /* background: #fff; */
}

section{
    padding:2rem 7%;
}


.btn {
    margin-top: 0;
    border-radius: 4px;
    display: inline-block;
    padding: .7rem 1.8rem;
    font-size: 1.5rem;
    color: #000;
    background: var(--main-color);
    cursor: pointer;
    border: 1px solid var(--main-color);
}

.btn:hover {
    /* letter-spacing: 0.2rem; */
    font-size: 1.5rem;
    /* color: var(--main-color); */
    /* background-color: #fff; */
    /* border: 1px solid black; */
}

.box-btn {
    margin-top: 0;
    border-radius: 4px;
    display: inline-block;
    padding: .4rem 1.2rem;
    font-size: 1.5rem;
    color: #000;
    background: var(--main-color);
    cursor: pointer;
    border: 1px solid var(--main-color);
}

.box-btn:hover {
    /* background-color: #ddb70b; */
    border: 1px solid black;
    /* box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px; */
}

.box-btn::after {
    /* content: ".."; */
}




/* =========================================================== */
/* import */