/* global */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap');

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    /* Prevent horizontal overflow on body */
    font-family: 'Roboto Mono', monospace;
    background-color: #ffffff;
    color: #2e3136;
}

h2,
.color {
    color: #130303;
}

a {
    color: #2e3136;
    text-decoration: none;
    font-family: 'Roboto Mono', monospace;
}

.grid-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
}

/* Full-width for the image container */
.image-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Optional: Smooth scrolling */
    white-space: nowrap;
    /* Ensure images are in a row */
    width: 100vw;
    /* Full width of the viewport */
    padding: 0;
    /* Remove padding if added */
    box-sizing: border-box;
    /* Include padding in width calculation */
    margin: 0;
    /* Ensure no margin offsets the container */
}

/* Ensure image blocks align correctly */
.image-block {
    display: inline-block;
    /* Align images horizontally */
    margin: 0;
    /* Remove margin if added */
}

/* Style for images */
.image-scroll-wrapper img {
    max-width: 600px; /* Set max-width to 600px */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure images fit within the container without distortion */
    display: block; /* Remove bottom space/gap */
}

/*  --------------------- SCROLLBARRR ---------------------*/
/* Hide default scrollbar */
.image-scroll-wrapper::-webkit-scrollbar {
    width: 12px; /* Set width for vertical scrollbar */
    height: 12px; /* Set height for horizontal scrollbar */
}

/* Style the track (part the scrollbar moves along) */
.image-scroll-wrapper::-webkit-scrollbar-track {
    background: #fff; /* White background for the scrollbar track */
    border-radius: 0; /* Square edges */
}

/* Style the thumb (the draggable part of the scrollbar) */
.image-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #000; /* Black color for the scrollbar thumb */
    border-radius: 0; /* Square edges */
}

/* Optional: Style the thumb on hover */
.image-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #333; /* Darker black when hovering */
}
/*  --------------------- SCROLLBARRR ---------------------*/


.video-box {
    padding: 10px 5px;
    text-align: center;
}

.video-box-header {
    text-align: center;
}

.text-container {
    width: 600px;
    margin: 0 auto;
    /* Center the text container */
    text-align: center;
    /* Center text inside the container */
}

/* Ensure all direct child elements are centered */
.text-container>* {
    display: block;
    /* Ensures each element takes the full width available */
    margin-left: auto;
    /* Centers child elements horizontally */
    margin-right: auto;
    /* Centers child elements horizontally */
    width: fit-content;
    /* Ensures elements fit their content */
    /* Optional: Add padding or margin if needed */
    padding: 0;
}

/* Specific styling for paragraphs inside text-container */
.text-container p {
    margin: 0 auto;
    /* Center paragraph text */
    padding: 0 20px;
    /* Optional: Add padding if needed */
    text-align: left;
    /* Maintain left alignment for text */
}

.text-block {
    padding: 0 20px;
}

.section-1 p,
.section-2 p {
    padding-bottom: 10px;
    margin: 0;
}

.section-1 h2,
.section-2 h2 {
    font-size: 1.7rem;
    margin-bottom: 10px;
}

.section-1 a,
.section-2 a {
    font-size: 1.5rem;
    padding: 10px;
    display: block;
}

.section-2 a {
    font-size: 1.2rem;
    width: 100px;
}

.section-2 a:hover,
.section-1 a:hover {
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

.white:hover {
    position: relative;
    padding-left: 10px;
}

/* media queries */
@media(max-width: 780px) {
    .section-1 {
        padding: 0;
        padding-top: 2rem;
    }

    .section-2 {
        padding: 0;
        padding-top: 1rem;
        /* padding-left: 1.5rem; */
    }
}