@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* Fonts */
.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
}

/* end Fonts */

/* Generic */
* {
    box-sizing: border-box;
}
body {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 1px;
    color: #9e9e9e;
}
h1 {
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #333;
}
h2 {
    font-family: "Roboto", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal;
    color: #bc8bc2;
    letter-spacing: 0.5px;
}
h3 {
    font-family: "Roboto", sans-serif !important;
    font-weight: 600 !important;
    font-style: normal;
    letter-spacing: 0.5px;
    color: #333;
}
h4 {
    font-family: "Roboto", sans-serif !important;
    font-weight: 600 !important;
    font-style: normal;
    letter-spacing: 0.5px;
    color: #333;
}
p strong {
    color: #000;
}
p a {
    color: #bc8bc2;
    text-decoration: underline;
}
ol li {
    list-style-type: decimal;
    list-style-position: outside;
    margin-bottom: 10px;
    margin-left: 20px;
}
ul li {
    list-style-type: disc;
    list-style-position: outside;
    margin-bottom: 10px;
    margin-left: 20px;
}
ul li strong {
    color: #333;
}
.bg-purple {
    background: #644267;
}
.bg-purple2 {
    background: #bc8bc2;
}
.text-subscribe {
    color: #bc8bc2;
}
.error {
    color: #ff0000;
}
.download-app {
    height: 50px;
}
.screen {
    width: auto;
    height: 500px;
}
.screen-horizontal {
    width: auto;
    max-width: auto;
    height: 240px;
}
.logo {
    width: auto;
    height: 30px;
    float: left;
    margin-right: 10px;
}
.material-symbols-outlined {
    color: #000;
}
.category-list .material-symbols-outlined {
    margin-right: 15px;
}
footer p {
    font-size: 12px !important;
}
footer p a {
    color: #9E9E9E;
    text-decoration: none;
}
.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.category-list div {
    flex: 1 1 15%;
    display: flex;
    align-items: center;
    padding: 0.5rem;
}
/* end Generic */

/* Header */
#header a {
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 1px;
    color: #333;
}
#menu-trigger {
    list-style: none;
    margin-top: 20px;
    margin-bottom: 0;
    padding-left: 0;
}
#menu-trigger li {
    font-weight: 300;
    font-size: 16px;
    margin-left: 15px;
    list-style: none;
}
#menu-trigger li a, #menu-trigger li a:hover, #menu-trigger li a:focus {
    display: inline-block;
}
#menu-trigger li a span {
    width: 15px;
    height: 15px;
    float: left;
    display: inline;
    margin-left: 3px;
    transition: all 0.5s ease-out;
}
#menu-trigger li a span:nth-child(1) {
    background: #aaaaaa;
}
#menu-trigger li a span:nth-child(2) {
    background: #7a7a7a;
}
#menu-trigger li a span:nth-child(3) {
    background: #444444;
}
/* end Header */

/* Sidebar */
#sidebar ul {
    position: fixed;
}
#sidebar ul li {
    list-style-type: none;
    margin-left: 0;
    margin-bottom: 10px;
}
#sidebar ul a.active {
    color: #000;
    font-weight: 500 !important;
}
/* end Sidebar */

@media (max-width: 480px) {
    #sidebar {
        display: none;
    }
    .category-list {
        flex-direction: column;
    }

    .category-list div {
        flex: 1 1 100%;
    }

    .image-container {
        flex-direction: column; /* Stack images on mobile screens */
    }

    .image-container img {
        width: 100%; /* Ensure images take full width */
    }

    .screen {
        width: auto;
        height: 200px;
    }
    .screen-horizontal {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}
/* end Media Queries */