/* DPBABES General Layout */



:root {
    --first-color: #77EC03; /* Example code:  color: var(--first-color);  LIME */
    --second-color: #7803EC; /* Example code:  color: var(--second-color);  PURPLE */
    --third-color: #DDDDDD; /* Example code:  color: var(--third-color); Light Grey */
    --fourth-color: #333333; /* Example code:  color: var(--third-color); dark Grey */
}


body {
    padding: 0;
    font-family: 'Arial', sans-serif;
    background: #111;
    color: var(--third-color);    
    z-index: 900;
}


h1, h2, h3 {
    color: var(--first-color);
    text-shadow: 2px 2px #000;
}


h1 {
    font-size: 28px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
}


hr {
    border: none;
    border-top: 1px solid var(--first-color); /* Lime green color for the hr */
    margin: 20px auto; /* Center the hr and add vertical spacing */
    width: 80%; /* Adjust width to ensure it doesn't touch the sides */
}


.InBank { /* StylesSafekeeper */

/*  WORKING 240704 - 1558               */

    color: var(--first-color); /* Lime green */
    color: var(--second-color); /* Purple */
    text-shadow: 
        1px 1px 2px #000,  /* First layer: closer to text, less blur */
        2px 2px 4px #000,  /* Second layer: a bit further and more blur */
        3px 3px 6px #000,  /* Third layer: even further and more blur */
        4px 4px 8px #000;  /* Fourth layer: furthest and maximum blur */
}


/* Header Styles */
header {
    background: linear-gradient(to bottom, #333, #000);
    text-align: center;
    width: 100%;
}





/* Main Header Styles  ****************************************************************************************************************************** */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
}

.logo {
    flex: 0 1 auto;
    padding: 0.5rem;
    margin-right: 0.5rem;
    text-align: center;
}

.logo img {
    max-width: 80%;
    height: auto;
}

.title-and-banner {
    flex-grow: 1;
    padding: 0.5rem;
    text-align: center;
}

.title-and-banner .banner728-item {
    max-width: 728px; /* Ensures container doesn't exceed banner width */
    width: 100%; /* Responsive */
    margin: auto; /* Centering the banner */
    border: 2px solid var(--first-color); /* Lime green border */
    box-sizing: border-box; /* Include border in width and height */
}

.title-and-banner .banner728-item img {
    width: 100%;
    height: auto;
}

.site-title {
    color: var(--third-color);
    font-size: 1.5rem;
    margin: 0;
}

.site-subtitle {
    color: var(--third-color);
    font-size: 1rem;
    margin: 0;
}












/* Main Navigation Styles  ****************************************************************************************************************************** */
.navigation {
    display: flex;
    background: linear-gradient(to bottom, #222, #333);
    justify-content: space-around;
    padding: 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.nav-item {
    display: flex;
    align-items: center; /* Center items vertically */
}

.nav-item a {
    color: #888;
    text-decoration: none;
    padding: 5px 15px; /* Adjusted padding for smaller height */
    display: block;
    width: 100%;
    line-height: normal; /* Adjust line height as needed */
}

.nav-item a:hover, .nav-item a.active {
    background-color: var(--first-color);
    color: #000;
    display: block; /* Ensure the link covers the full area */
}

/* Dropdown Navigation */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--fourth-color);
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: #777;
    padding: 14px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    color: #555;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Hamburger Menu for Mobile */
.hamburger {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 2rem;
    color: white;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
}

.hamburger div {
    width: 2rem;
    height: 0.25rem;
    background-color: var(--fourth-color);
    margin: 5px 0; /* Add some margin to separate the lines */
}


/* Hide dropdown in hamburger menu */
.hamburger.active + .navigation .category-dropdown .dropdown-content {
    display: none;
}
















/* Container styles */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* Gap only in the main content area */
    padding: 0; /* No padding around the container */
}





/* Sidebar + right Column */
.sidebar, .advertisement-column, 
.advertisement-bottom-4, 
.advertisement-bottom-3, 
.advertisement-bottom-2 
{
    background-color: var(--fourth-color);
    background-image: url('images/ADVERTS-BACK.jpg');
    background-repeat: repeat;
    background-position: top left;
    color: #fff;
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding-top: 20px;
    padding: 0rem;
    margin: 0;
    box-sizing: border-box;
}



/* Sidebar + right Column *** TITLES *** */
.sidebar .titles, .advertisement-column .titles, 
.advertisement-bottom-4 .titles, 
.advertisement-bottom-3 .titles, 
.advertisement-bottom-2 .titles 
{
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-shadow: 2px 2px 5px #000; /* Thicker shadow with more blur */
    padding: 4px;
    display: block; /* Makes the title a block element, forcing content after it to the next line */
    margin-bottom: 4px; /* Adds some space after the title, creating a visual break */
    width: 100%; /* Ensure the title spans the full width */
}

.sidebar a, .advertisement-column a, 
.advertisement-bottom-4 a, 
.advertisement-bottom-3 a, 
.advertisement-bottom-2 a 
{
    color: var(--first-color);
    text-decoration: none;
}

.sidebar {
    flex: 0 0 140px;
}

/* Advertisement Column and Bottom Styles */
.advertisement-column {
    flex: 0 0 320px;
}


/* Tags Styles */
.tags {
    text-align: center; /* This will center all the tags inside the container */
    margin: 10px 0; /* Optional: Add some vertical space around the tags */
    width: 90%; /* Ensure it spans the full width */
}

.advertisement-column .tags a, 
.advertisement-bottom-4 .tags a, 
.advertisement-bottom-3 .tags a, 
.advertisement-bottom-2 .tags a 
{
    display: inline-block;
    margin: 5px;
    text-decoration: none;
    font-size: 14px;
    text-align: center;
}

.advertisement-column .tags a:not(:last-child):after, 
.advertisement-bottom-4 .tags a:not(:last-child):after, 
.advertisement-bottom-3 .tags a:not(:last-child):after, 
.advertisement-bottom-2 .tags a:not(:last-child):after 
{
    content: " * ";
}

.advertisement-column .tags a:last-child:after, 
.advertisement-bottom-4 .tags a:last-child:after, 
.advertisement-bottom-3 .tags a:last-child:after, 
.advertisement-bottom-2 .tags a:last-child:after 
{
    content: ""; /* Removes asterisk after the last link */
}

.advertisement-bottom-4, .advertisement-bottom-3, .advertisement-bottom-2 {
    display: none; /* Hidden by default */
    flex-direction: row; /* Arrange items horizontally */
    flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
    justify-content: space-between; /* Distribute space evenly between items */
    align-items: flex-start; /* Align items at the top */
    text-align: center; /* Center the text */
}

/* Advertisement Styles */

.banner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.full-banner-container {
    width: 100%;
    text-align: center; /* Center align the banner inside the container */
    margin: 10px; /* Ensure the container is centered within its parent */
    padding: 0; /* Remove any padding */
}



.banner120-item, .banner160-item, .banner468-item, .banner728-item, .banner728-item-head, .banner728-item-foot, .banner300-item, .banner300V-item, .banner728V-item, .sold-banner300, .sold-banner728 {
    padding: 2px;
    background-color: var(--fourth-color); /* Color inside the border */
    border: 2px solid var(--first-color); /* Color of the outer border */
    text-align: center;
    margin: 4px; /* Adjusted margin */
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-sizing: border-box; /* Include padding and border in the width */
}

.banner468-item {
    max-width: 468px; /* Ensures container doesn't exceed banner width */
    width: 100%; /* Responsive */
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Adds some space above the banner */
}

.banner160-item, .premium, .webcams, .dating {
    display: flex;
    max-width: 128px; /* Ensures container doesn't exceed banner width */
}

.banner728-item, .sold-banner728 {
    max-width: 728px; /* Ensures container doesn't exceed banner width */
    width: 100%; /* Responsive */
    display: flex;
    justify-content: center;
    margin: 10px;
    margin-bottom: 20px;
    margin: auto; /* Centering the banner */
}


.full-banner-container .banner728-item-foot {
    max-width: 728px; /* Ensures container doesn't exceed banner width */
    width: 100%; /* Responsive */
    margin: auto; /* Centering the banner */
    border: 2px solid var(--first-color); /* Lime green border */
    box-sizing: border-box; /* Include border in width and height */
}



.banner300-item, .sold-banner300 {
    max-width: 300px;
    width: 100%; /* Ensures the banner takes up the available width within its container */
    height: auto;
}

.banner300V-item {
    max-width: 308px;
    width: 100%; /* Ensures the banner takes up the available width within its container */
    height: 258px;
}

.banner728V-item {
    max-width: 736px;
    width: 100%; /* Ensures the banner takes up the available width within its container */
    height: 98px;
}



.full-banner-container .banner728V-item {
    max-width: 736px; /* Ensures container doesn't exceed banner width */
    max-height: 98px;
    width: 100%; /* Responsive */
    margin: auto; /* Centering the banner */
    border: 2px solid var(--first-color); /* Lime green border */
    box-sizing: border-box; /* Include border in width and height */
    margin-bottom: 20px;
}



.banner120-item img, .banner160-item img, .banner468-item img, .banner728-item img, .banner728-item-head img, .banner300-item img {
    display: block; /* Ensures the image behaves as a block-level element */
    width: 100%; /* Makes the image stretch to the container's width */
    height: auto; /* Maintains the aspect ratio */
}

.banner120-item:hover, .banner160-item:hover, .banner468-item:hover, .banner728-item:hover,  .banner728-item-head:hover, .banner300-item:hover {
    box-shadow: inset 0 0 0 2px #000; /* 77EC03 Purple border on hover */ 
    border: 2px solid var(--second-color); /* Color of the outer border */
}

.banner {
    display: flex; /* Use flex to center the content */
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically, if needed */
    width: 100%; /* Take the full width of the container */
    margin-top: 1px; /* Optional: Adds some space above the banner */
    box-sizing: border-box; /* Include padding and border in the width */
}







/* Main Content */
.main-content {
    flex: 1;
    flex-wrap: wrap;
    justify-content: center; /* This centers the child elements (cards) */
    display: flex;
    padding-top: 40px;
    gap: 0.25rem; /* Your gap size */
    box-sizing: border-box; /* Include padding and border in the width */
}

.gallery-top, .gallery-bottom {
    width: 98%;
    font-family: Arial, sans-serif;
    color: #eee;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    background-color: var(--fourth-color);
    border-radius: 10px;
    margin: 14px;
    padding: 12px;
}

.gallery-top a, .gallery-bottom a {
    color: var(--first-color);
    text-decoration: none;
}

.gallery-top a:hover, .gallery-bottom a:hover {
    text-decoration: underline;
}

.gallery-top h3, .gallery-bottom h3 {
    font-size: 20px;
    color: var(--first-color);
    text-shadow: 2px 2px #000;
}



.section-title, .section-text {
    font-family: Arial, sans-serif;
    font-size: 24px;
    line-height: 1.5;
    color: #eee;
    width: 99%;
    height: 40px;
    background-color: var(--fourth-color);
    text-align: center;
    text-shadow: 
        2px 2px 4px #000;  /* Fourth layer: furthest and maximum blur */
    vertical-align: middle;
    border-radius: 10px;
    margin: 20px;
    padding: 10px;
}

.section-text {
    font-size: 18px;
    line-height: 1.2;
    background-color: transparent;
    text-shadow: none;
    width: 80%;
    margin: 10px;
    margin-bottom: 20px;
    padding: 10px;
    height: auto; /* or simply remove the height property */
}

.section-title a {
    color: var(--first-color);
    text-decoration: none;
}

.section-text, .medium {
    font-size: 14px;
}

.color-text {
    color: var(--first-color);
}

.small-text {
    font-size: 12px;
    color: #eee;
    text-align: center;
}








/* Container for Cards and TGP Galleries Thumbnails   ****************************************************************************************************************************** */
.gallery-container {
    width: 99%; 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.gallery-title {
    font-size: 20px;
    color: var(--first-color);
    text-shadow: 2px 2px #FF0000;
    width: 100%;
    text-align: center;
    margin: 0.5rem 0;
}






/* General Styles for TGP Thumbnails and Cards   ****************************************************************************************************************************** */

.card, .cardbig, .cardsmall, .cardmed, .thumbnail, .thumbnailbig, .thumbnailsmall, .thumbnailmed  {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

 .card-image, .thumbnail-image {
    width: 100%;
    height: auto;
    border: 1px solid var(--first-color);
    box-sizing: border-box;
}

 .card-image:hover, .thumbnail-image:hover {
    border: 1px solid var(--second-color);
}


.card-link, .thumbnail-link {
    text-decoration: none;
    position: relative;
}

.card .card-title {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 1rem;
    display: block; /* Ensures it's a block-level element if needed */
}




/* Play Icon Style */
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78px; /* Example size, adjust as needed */
    height: 78px; /* Example size, adjust as needed */
    cursor: pointer;
    display: none; /* Correct default state */
}

.thumbnail-link:hover .play-icon, .card-link:hover .play-icon {
    display: block; /* Ensure the icon is only shown on hover */
}







/* Card Styles   ********************************** IMPORTANT ******************************************************************************************** */
.card {
    _width: 324px;
    width: 30%;
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: 2px;
    margin: 0.5rem;
}


/* Video Container Layout */
.video-container {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start; /* Align items at the start of the container vertically */
}


.card-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    max-height: 360px;
    transform: translate(-50%, -50%);
    object-fit: cover;
}







.video-container h2 {
    color: var(--first-color);
    text-align: center;
    font-size: 24px;
    text-shadow: 2px 2px #000;
    width: 100%;
    margin-top: 0; /* Add this line */
    margin-bottom: 10px; /* Ensure there's no bottom margin pushing content down */
}

.video-container h2 a {
    color: var(--first-color);
    text-align: center;
    font-size: 24px;
    text-shadow: 2px 2px #000;
    width: 100%;
    margin-top: 0; /* Add this line */
    margin-bottom: 10px; /* Ensure there's no bottom margin pushing content down */
}

.video-titles {
    text-align: center;
    margin: 0;
    font-size: 1.5rem;
    color: var(--first-color);
    text-shadow: 2px 2px #000;
    width: 100%;
}


/*********** Card Styles (General, Big, Small)   ****************************************************************************************************************************** **/
.card, .cardbig, .cardsmall, .cardmed {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers child elements horizontally */
    justify-content: center; /* Centers child elements vertically */
    margin-bottom: 1rem;
    box-sizing: border-box; /* Includes padding and border in the element's size */
}

.cardbig:hover .play-icon {
    display: block; /* Show play-icon on hover */
}

.cardbig.overlay-active .play-icon {
    display: none; /* Hide play-icon when overlay is active */
}

.cardbig:not(.overlay-active):hover .play-icon {
    display: block; /* Only show on hover when overlay not active */
}

/*********** Selected and Watched Videos Styles **************/
.selected-video, .watched-videos {
    align-items: flex-start; /* Align items to the start of the container on the cross axis */
    padding-top: 10px; /* Remove any padding that might affect alignment */
    width: calc(49% - 5px);
    padding: 5px;
}


.selected-video .visit-site-button {
    display: none;
}



.watched-videos {
    display: flex;
    flex-wrap: wrap; /* Ensure cards can wrap onto the next line */
    justify-content: space-around; /* This will ensure even spacing around items */
    align-items: flex-start; /* Align items at the start of the container */
}

.watched-form {
    max-height: 500px;  /* Limit height to keep the layout tidy */
    overflow-y: auto;  /* Add scrollbar if content exceeds the max height */
}

.selected-video, .watched-videos a {
    color: var(--first-color); /* Lime green links */
    text-align: center;
    text-decoration: none; /* No underline */
    display: block; /* Block-level for individual line */
    margin-bottom: 2px; /* Space between links */
}

.selected-video, .watched-videos a:hover {
    text-decoration: none; /* No underline on hover for clarity */
    color: #fff; 
}

.watched-videos .cardsmall {
    width: calc(49% - 6px);
    margin-bottom: 12px;
    margin-right: 12px; /* Add right margin to create space between the cards */
    flex: 0 0 auto;
}

/* Specific styles for each related video */
.related-video-1 a:hover {
    /* Styles for the first related video */
}

.related-video-2 {
    /* Styles for the second related video */
}

.related-video-3 {
    /* Styles for the third related video */
}

.related-video-4 {
    /* Styles for the fourth related video */
}




/* Target the second child in every row */
.cardsmall:nth-child(2n) {
    margin-right: 0; /* Remove the right margin from the second element */
}

/* Target the first child in every row if you want space on the left of the first card */
.cardsmall:nth-child(2n+1) {
    margin-left: 10px;
}

/* Clear the left margin for the first item in a row */
.cardsmall:nth-child(2n+1):first-child {
    margin-left: 0;
}

/* Styles for individual small cards */
.cardsmall {
    flex: 1 0 48%; /* Takes up 48% of the container's width, allowing two per row with some space for margins */
    margin-bottom: 14px; /* Space below each card */
    margin-right: 1%; /* Right margin for spacing between two cards */
}

/* Ensure that every second card clears the right margin for alignment */
.cardsmall:nth-child(odd) {
    margin-right: 2%; /* Adjust as necessary to align correctly */
}

/*********** Text Description Styles **************/
.card-title, .card-desc, .card-stats {
    color: #999; 
    text-align: center;
    line-height: 1.2; /* Reduced line spacing */
    padding: 0;
    margin-top: 1px;
    margin-bottom: 0;
}

.card, .cardbig, .card-title {
    font-size: 20px; /* Base size for big card */
    text-align: center;
    text-decoration: none; /* No underline */
}

.cardsmall .card-title {
    font-size: 18px; /* Base size for small card */
}

.card-title {
    text-align: center; /* Centers the text */
    font-size: 24px;
    font-weight: bold;
    color: var(--first-color); /* Lime green */
    margin-top: 0.5rem;
    text-decoration: none;
}


.card-title-med {
    color: var(--first-color); 
    font-size: 16px; 
    font-weight: bold;
    text-align: center;
    text-decoration: none; 
}

.card-desc {
    font-size: 11px; /* Base size for big card */
}

.card-desc a {
    font-size: 11px; 
    color: var(--first-color); /* Lime green links */
    text-decoration: none; /* No underline */
    margin-bottom: 5px; /* Space between links */
}

.card-stats {
    font-size: 14px; /* Base size for big card */
}

/*********** Overlay Styles *******  ***********************************************************************************************************************************/
.cardbig {
    position: relative;
}

.cardbig .card-image {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.cardbig .card-image img {
    width: 100%; /* Make the image fill the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove any inline spacing */
}

.cardbig .overlay-content {
    display: none;
    position: absolute;
    top: 40px; left: 40px; right: 40px; bottom: 40px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
}

.cardbig .overlay-content.light {
    background-color: rgba(255, 255, 255, 0.4);
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    position: absolute;
    display: flex; /* Initially shows the overlay content = none for hide */
    justify-content: center;
    align-items: center;
}

.cardbig .overlay-content.light .play-icon {
    display: none; /* Initially hide the play icon */
}

.cardbig:hover .overlay-content.light {
    display: flex; /* Show the overlay content when hovering over the card */
}

.cardbig:hover .overlay-content.light .play-icon {
    display: block; /* Show the play icon when hovering over the card */
    max-width: 100px; /* Adjust the size of the play icon if needed */
    max-height: 100px; /* Adjust the size of the play icon if needed */
    pointer-events: none; /* Prevent the play icon from interfering with the hover state */
}

.cardbig.overlay-visible .overlay-content {
    display: flex;
}

.cardbig.overlay-visible .play-icon {
    display: none;
}

/* Overlay Content Styling */
.cardbig .overlay-content h2, 
.cardbig .overlay-content p,
.cardbig .overlay-content .join-now-button {
    color: #FFF;
    text-align: center;
    display: block;
    margin: 10px 0;
}

.cardbig .overlay-content h2 {
    color: var(--first-color);
    font-size: 36px;
    text-shadow: 2px 2px #000;
}

.cardbig .overlay-content p {
    font-size: 14px;
    color: #FFF;
}

.cardbig .overlay-content .join-now-button {
    display: inline-block;
    background-color: var(--first-color);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
    margin: 20px 0;
    cursor: pointer; /* Ensure it's clear the button is clickable */
}

.cardbig .overlay-content .join-now-button:hover {
    background-color: #222;
}











/* Videos Page - Cards Medium   *************************************************************************************************************** */
.video-row {
    display: flex;
    width: 100%; /* Set width to 100% */
    margin-bottom: 20px;
    align-items: flex-start;
    border-bottom: 1px solid var(--first-color); /* Add a lime green line between rows */
    padding-bottom: 20px;
    box-sizing: border-box; /* Ensure padding and borders are included in the width and height */
    overflow: hidden; /* Prevent overflow */
}

.video-left {
    flex: 1;
    max-width: 30%;
    box-sizing: border-box; /* Ensure padding and borders are included in the width and height */
}

.video-right {
    flex: 2;
    padding: 0 20px;
    box-sizing: border-box; /* Ensure padding and borders are included in the width and height */
}

.cardmed {
    margin-bottom: 20px;
}

.cardmed .card-link {
    display: block;
    position: relative;
}

.cardmed .card-image {
    width: 100%;
    height: auto;
    display: block;
}

.cardmed .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.cardmed:hover .play-icon {
    opacity: 1;
    z-index: 2;
}

.cardmed .carddesc {
    padding: 10px;
}

.cardmed .card-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 5px;
}

.cardmed .card-desc {
    margin: 10px;
    margin-bottom: 5px;
}

.cardmed .card-stats {
    font-size: 0.9em;
    color: #999;
}

.video-right h2 {
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 0;
    text-align: center;
    color: var(--first-color); /* Use your desired color */
}

.video-right h2 a {
    color: var(--first-color);
    text-decoration: none;
}

.video-right h2 a:hover {
    text-decoration: none;
    color: var(--second-color);
}

.video-right .desc {
    text-align: justify;
    margin-bottom: 10px;
    margin-top: 0;
}

.video-right .site-name {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 10px;
}

.video-right .site-name a {
    color: var(--first-color);
    text-decoration: none;
}

.video-right .site-name a:hover {
    text-decoration: none;
    color: var(--second-color);
}

.video-right .site-desc {
    margin-bottom: 5px;
    margin-top: 0;
}

.video-right .small-text {
    font-size: 0.9em;
    color: gray;
    margin-top: 0;
}



/* Center the buttons within the block */
.alt-buttons {
    display: flex;
    justify-content: center;  /* Center horizontally */
    flex-wrap: wrap;  /* Wrap buttons if they don't fit in one line */
    margin-top: 10px;
}

.alt-button {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    background-color: var(--fourth-color);
    border: 1px solid #ccc;
    border-radius: 3px;
    text-decoration: none;
    color: var(--third-color);
    font-size: 12px;
}

.alt-button:hover {
    background-color: var(--second-color);
    border-color: var(--first-color);
    color: var(--first-color);
}


.alt-button.active {
    background-color: var(--fourth-color); /* Highlight active button */
    color: var(--first-color);
    font-size: 14px;
    font-weight:bold ;
}







/* Styles for Thumbnails and Cards ******************************************** */
.thumbnail, .thumbnailbig, .thumbnailsmall, .thumbnailmed, .card, .cardbig, .cardsmall, .cardmed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-sizing: border-box;
}






.thumbnail-link, .card-link {
    text-decoration: none;
    position: relative;
}

/* Title Style */
.card-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: var(--first-color); /* Lime green */
    text-align: justify ;
    margin-top: 0.5rem;
    text-decoration: none;
}

.card-title:hover {
    color: var(--second-color); /* Purple */
    text-decoration:none;
}

/* Description Style */
.card-desc {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin: 0.5rem 0;
}

/* Stats Style */
.card-stats {
    font-size: 14px;
    color: #999;
    text-align: center;
    margin: 0.5rem 0;
}

/* Site Style */
.card-site {
    font-size: 12px;
    font-weight: bold;
    color: #999;
    text-align: center;
}

.card-site a {
    color: var(--first-color); /* Lime green */
    text-decoration: none;
}

.card-site a:hover {
    color: var(--second-color); /* Purple */
}







/* TGP Thumbnail Styles ********************************************************/
.thumbnail {
    width: 15%; /* Default to 6 wide */
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: 2px;
    margin: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.thumbnail-image {
    width: 100%; /* Ensures image takes full width of the container */
    height: auto;
}

.thumbdesc .thumb-title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0.1rem;
    font-size: 16px;
    font-weight: bold;
    color: var(--first-color); /* Lime green color */
    width: 100%;
}

.thumbdesc .thumb-title a {
    color: var(--first-color); /* Lime green color */
    text-decoration: none;
}

.thumbdesc .thumb-title a:hover {
    color: var(--second-color); /* Purple color on hover */
}

.thumbdesc .thumb-desc {
    font-size: 12px;
    color: #999;
    text-align: center;
    width: 100%;
}

.thumbdesc .thumb-stats {
    font-size: 10px;
    color: #999;
    text-align: center;
    width: 100%;
}

.thumbdesc .thumb-site {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #999;
    width: 100%;
}

.thumbdesc .thumb-site a {
    color: var(--first-color); /* Lime green color */
    text-decoration: none;
}

.thumbdesc .thumb-site a:hover {
    color: var(--second-color); /* Purple color on hover */
}














/* Join Forms Styles *************************************************************/
.form-container {
    max-width: 420px; /* Adjust based on the space the 4 mini cards occupied */
    margin: 0 auto; /* Centers the form in the available horizontal space */
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers items vertically if needed */
}

.form-row {
    width: 98%; /* Ensures form rows use the full width of the form */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distributes space between label and input */
    margin-bottom: 10px;
}

.form-row label {
    width: 55%; /* Labels take up 55% of the form row */
    color: #FFFFFF;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row select {
    width: 45%; /* Inputs take up 45% of the form row */
    background-color: #FFFFFF; /* White background */
    border: 1px solid var(--first-color); /* Lime green border */
    border-radius: 8px; /* Rounded corners */
    padding: 8px; /* Padding inside the inputs */
    font-size: 12px; /* Font size */
    color: #222222; /* Dark text for inputs */
}

.form-row input[type="text"]:focus,
.form-row input[type="email"]:focus,
.form-row input[type="password"]:focus,
.form-row select:focus {
    border-color: #66cc00; /* border on focus */
}

.join-now-button {
    width: 70%;       /* Make the button fill the container */
    padding: 10px 20px;
    background-color: #222; /* Lime green */
    color: #fff;
    border-radius: 5px;
    border-color: #66cc00; 
    cursor: pointer;
    text-align: center;
    width: auto; /* Adjust to fit content */
    margin-top: 10px;
    display: block;    /* Allows margin auto to center the button */
    margin: 10px auto; /* Top and bottom margin 10px, auto for left and right to center */
}

.join-now-button a {
    color: #000;
}

.join-now-button:hover {
    background-color: var(--second-color); /* #66cc00 Darker green on hover */
}

/* Switch styles */
.switch {
    margin: 5px;
    position: relative;
    display: inline-block;
    width: 22px;  /* Slightly wider than the button */
    height: 40px;  /* Height of the switch */
    vertical-align: middle;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #666;  /* Gray background when not checked */
    transition: .4s;
    border-radius: 11px;  /* Rounded corners */
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;  /* Size of the button */
    width: 20px;  /* Size of the button */
    left: 1px;  /* Center the button horizontally */
    top: 18px;  /* Position the button at the bottom initially */
    background-color: white;
    transition: .4s;
    border-radius: 50%;  /* Keeps the circle shape */
}

input:checked + .slider {
    background-color: var(--first-color);  /* Lime green background when checked */
}

input:checked + .slider:before {
    transform: translateY(-18px);  /* Move the button to the top when checked */
}

.slider.round {
    border-radius: 11px;  /* Rounded corners for the slider */
}

.slider.round:before {
    border-radius: 50%;
}

/* TOS and Legals Styles */
.tos-container {
    width: 80%;
    margin: 40px;
}

h1, h2 {
    color: #eee;
}

h1 a, h2 a {
    color: var(--first-color);
    text-decoration: none;
}

    a {
        text-decoration: none;
        color: var(--first-color); /* Replace #008000 with your preferred shade of green */
    }

    a:hover {
        text-decoration: underline; /* Optional: Add underline on hover for better user experience */
        color: #006400; /* Optional: Darker green on hover */
    }





/* Cookie Popup Styles *********************************************************/
.blurred {
    filter: blur(8px); /* Changed from 80px to 8px for usability */
    -webkit-filter: blur(8px); /*
    pointer-events: none; /* Prevent interactions with blurred content */
    z-index: 999; /* Make sure the blur effect is behind the overlay */
    position: relative; /* Ensure positioning is correct */
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup {
    background: #000;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: #888;
    z-index: 1001;
}

.popup button {
    width: 200px;
    margin: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.accept-button {
    background-color: var(--first-color);
    font-weight: bold;
    color: #000;
}

.exit-button {
    background-color: var(--second-color);
    color: #fff;
}

.link-button {
    width: 300px;
    background-color: transparent;
    color: #888;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.checkbox-container, .radio-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.checkbox-container input[type="checkbox"], .radio-container input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    position: relative;
    margin-right: 10px;
}

.checkbox-container input[type="checkbox"]:checked, .radio-container input[type="radio"]:checked {
    border: none;
    background-color: var(--first-color); /* Green color */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
}

.checkbox-container input[type="checkbox"]:unchecked, .radio-container input[type="radio"]:unchecked {
    background-color: transparent; 
}

.checkbox-container.color input[type="checkbox"]:checked, .radio-container.color input[type="radio"]:checked {
    background-color: #ff0000; /* Secondary color */
}

.checkbox-container input[type="checkbox"]:disabled {
    background-color: #ccc; /* Greyed out color */
    cursor: not-allowed; /* Change cursor to indicate it is not clickable */
}

.checkbox-container input[type="checkbox"]:disabled + .checkbox-label {
    color: #aaa; /* Greyed out label color */
}

.checkbox-label, .radio-label {
    font-weight: normal;
    color: #444; /* Changed from #eee to #444 for better visibility */
}







/* Sort Form Styles ************************************************************/
.sort-container {
    width: 90%;
    margin: 0 auto;
    padding: 15px;
    display: flex;  /* Ensures horizontal layout */
    align-items: center; /* Aligns items vertically in the center */
    justify-content: space-around; /* Distributes space evenly */
    color: #fff;
}

.sort-part {
    display: flex;
    align-items: center;
    justify-content: center; /* Center contents of each part */
    flex: 1; /* Each part takes equal space */
    padding: 15px;
}

.sort-part label {
    color: #FFFFFF;
    margin-right: 10px; /* Space after label */
}

.sort-part select, 
.sort-part input[type="radio"], 
.sort-part input[type="radio"] + label {
    background-color: #FFFFFF;
    border: 1px solid var(--first-color);
    border-radius: 8px;
    padding: 8px;
    flex: 1;
    color: #222222;
    font-size: 12px;
}

.sort-now-button {
    padding: 10px 20px;
    background-color: var(--first-color); /* Lime green for visibility */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%; /* Full width of its container */
}

.sort-part select, .sort-part input[type="radio"] {
    flex-grow: 1;
}






/* Download Links Styling ******************************************************/
.download-links {
    width: 100%;
    font-family: Arial, sans-serif;
    color: #eee;
    font-size: 16px;
    line-height: 1;
    margin-top: 24px; 
    margin: 10px;
    padding: 10px;
}

.download-links a {
    color: var(--first-color); /* Lime green links */
    text-align: justify;
    text-decoration: none; /* No underline */
    display: block; /* Block-level for individual line */
    margin-bottom: 5px; /* Space between links */
}

.download-links a:hover {
    text-decoration: none; /* No underline on hover for clarity */
    color: #eee;
}






/* Pagination and Button Styles ************************************************/
.centered-button, .pagination {
    text-align: center;
    margin: 20px;
}

.button, .pagination-button, .current-page {
    background: linear-gradient(to bottom, #777, #222);
    padding: 10px 20px;
    font-family: Arial, sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 14px; /* Keep font size consistent */
    font-weight: bold;
    text-align: center;
    border-radius: 10px;
    border: 2px solid #fff;
    display: inline-block;
    margin-right: 5px; /* Add margin for spacing */
}

.button {
    font-size: 18px; 
}

.pagination-button {
    background-color: transparent; /* Buttons are transparent by default */
    color: #000;
    border: 2px solid #000;
}

.button:hover, .pagination-button:hover {
    background-color: #222;
    color: #fff;
    text-decoration: none;
}

.current-page {
    background-color: #eee; /* Different background to stand out */
    color: #000; /* Text color for current page */
    border: 2px solid #000; /* Matching border style */
}




/* Footer Styles ***************************************************************/
footer {
    width: 100%;
    background: var(--third-color); /* Example background color */
    background: linear-gradient(to bottom, #444, #222);
    padding: 20px 0;
    color: #fff; /* Text color */
    font-family: Arial, sans-serif; /* Footer text font */
}

.footer-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 1000px; /* Or any other max-width or none */
    margin: auto;
    text-align: center;
}

.footer-container a {
    font-size: 16px; /* Font size for list items */
    text-decoration: none; /* No underline for links */
    color: var(--first-color); /* Text color for links */
}

.footer-column {
    margin: 10px; /* Space between columns */
    box-sizing: border-box;
}

.footer-column h3 {
    font-weight: bold; /* Make the title bold */
    text-align: center;
    margin-bottom: 10px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li a {
    line-height: 1.6; /* Space between list items */
    text-align: center;
    font-size: 14px; /* Font size for list items */
    text-decoration: none; /* No underline for links */
    color: var(--first-color); /* Text color for links */
}

.footer-column ul li a:hover {
    text-decoration: none; /* No underline on hover */
}


/* Scrollbar Styling */
::-webkit-scrollbar-track {
    background-color: var(--fourth-color); /* Dark grey background */
}

::-webkit-scrollbar-thumb {
    background-color: var(--first-color); /* Lime green scroller */
    border-radius: 10px; 
    border: 3px solid #333;
}

::-webkit-scrollbar {
    width: 18px; /* Adjust the width of the scrollbar here */
    height: 12px; /* Needed for horizontal scrollbars */
}