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

:root {
    --primary-color: #17202a;
    --dark-primary-color: #10161d;
    --secondary-color: #f2b10d;
    --shadow-color: #9d9fb3;
    --label-color: #ced4da;
    --white-color: #fbfbfb;
}

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

body {
    background-color: #000000;
    background-image: linear-gradient(
        135deg,
        #000000 0%,
        #000000 22%,
        #001220 49%,
        #001220 75%
    );
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: var(--white-color);
    font-family: "Lato", sans-serif;
}

::-webkit-scrollbar {
    width: 5px;
    background-color: rgb(51, 51, 51);
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 10px;
}

main {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1200px;
}

/* Typography Start  */
.header {
    font: 700 36px "Lato", sans-serif;
    color: var(--secondary-color);
    text-align: center;
    margin: 150px 0 50px 0;
}

h2 {
    font: 700 24px "Lato", sans-serif !important;
    color: var(--secondary-color) !important;
}

p,
ul li,
ol li {
    font: 400 16px "Roboto", sans-serif !important;
    color: var(--label-color) !important;
    margin: auto;
    line-height: 1.5;
}

span {
    font: 400 16px "Roboto", sans-serif !important;
    color: var(--secondary-color) ;
    margin: auto;
    line-height: 1.5;
}

p a {
    text-decoration: none;
    color: var(--secondary-color);
}

p a:hover {
    color: var(--label-color);
}
/* Typography End  */

/* Tabs Start */
.horizontal-tabs .nav {
    gap: 10px;
}

.horizontal-tabs .nav-pills .nav-item {
    width: 100%;
}

@media screen and (min-width: 426px) and (max-width: 1024px) {
    .horizontal-tabs .nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}