/**
 * Student Projects Archive Styles
 * Program filter buttons with colors matching the design
 */

/* Force line break after program filters to separate them from enfoques */
.post-type-archive-proy_est .topics-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

/* Hide the divider between program and enfoques filters */
.post-type-archive-proy_est .filter-tax-divider {
    display: none !important;
}

/* Program filter button base styles */
.post-type-archive-proy_est .topic-button-filter[filter-type="programas"] {
    padding: 7.83px;
    min-width: 64.55px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 16.3px;
    color: #ffffff;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.post-type-archive-proy_est .topic-button-filter[filter-type="programas"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-type="programas"]:focus {
    outline: none;
}

/* Specific colors for each program based on design - DEFAULT STATE */
.post-type-archive-proy_est .topic-button-filter[filter-name="dis"]:not([status="active"]):not(:hover):not(:focus) {
    background-color: #00CED1; /* cyan/aqua */
}

.post-type-archive-proy_est .topic-button-filter[filter-name="arq"]:not([status="active"]):not(:hover):not(:focus) {
    background-color: #000000; /* black */
}

.post-type-archive-proy_est .topic-button-filter[filter-name="mdis"]:not([status="active"]):not(:hover):not(:focus) {
    background-color: #FF00FF; /* magenta */
}

.post-type-archive-proy_est .topic-button-filter[filter-name="marq"]:not([status="active"]):not(:hover):not(:focus) {
    background-color: #0000FF; /* blue */
}

.post-type-archive-proy_est .topic-button-filter[filter-name="mam"]:not([status="active"]):not(:hover):not(:focus) {
    background-color: #FF4500; /* orange-red */
}

/* Hover and Active states - WHITE background with colored outline and colored text */
.post-type-archive-proy_est .topic-button-filter[filter-type="programas"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-type="programas"]:focus,
.post-type-archive-proy_est .topic-button-filter[filter-type="programas"][status="active"] {
    background-color: #ffffff !important;
    opacity: 1;
}

.post-type-archive-proy_est .topic-button-filter[filter-name="dis"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-name="dis"]:focus,
.post-type-archive-proy_est .topic-button-filter[filter-name="dis"][status="active"] {
    color: #00CED1;
    outline: 2px solid #00CED1;
    outline-offset: -2px;
}

.post-type-archive-proy_est .topic-button-filter[filter-name="arq"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-name="arq"]:focus,
.post-type-archive-proy_est .topic-button-filter[filter-name="arq"][status="active"] {
    color: #000000;
    outline: 2px solid #000000;
    outline-offset: -2px;
}

.post-type-archive-proy_est .topic-button-filter[filter-name="mdis"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-name="mdis"]:focus,
.post-type-archive-proy_est .topic-button-filter[filter-name="mdis"][status="active"] {
    color: #FF00FF;
    outline: 2px solid #FF00FF;
    outline-offset: -2px;
}

.post-type-archive-proy_est .topic-button-filter[filter-name="marq"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-name="marq"]:focus,
.post-type-archive-proy_est .topic-button-filter[filter-name="marq"][status="active"] {
    color: #0000FF;
    outline: 2px solid #0000FF;
    outline-offset: -2px;
}

.post-type-archive-proy_est .topic-button-filter[filter-name="mam"]:hover,
.post-type-archive-proy_est .topic-button-filter[filter-name="mam"]:focus,
.post-type-archive-proy_est .topic-button-filter[filter-name="mam"][status="active"] {
    color: #FF4500;
    outline: 2px solid #FF4500;
    outline-offset: -2px;
}

/* Behance Stamped Box - Top Left Positioning (First 2 Columns) */
.post-type-archive-proy_est .student-projects-behance-box.stamped-content {
    border: 2px solid var(--arqdis-magenta);
    background-image: url('../assets/patron-grid-magenta.svg');
    background-size: 40px auto;
    padding: 1em;

    position: absolute;
    left: 0; /* Position on the left (first 2 columns) */

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr;
    grid-auto-flow: dense;
    grid-column-gap: 30px;
    grid-row-gap: 15px;
}

.post-type-archive-proy_est .student-projects-behance-box .grid-title {
    color: var(--arqdis-magenta);
    margin-top: 0 !important;
}

.post-type-archive-proy_est .student-projects-behance-box .grid-subtitle {
    color: var(--arqdis-blue);
}

.post-type-archive-proy_est .student-projects-behance-box p {
    grid-row: span 2;
}

.post-type-archive-proy_est .student-projects-behance-box a {
    background-color: var(--arqdis-blue);
    padding: 0.6em;
    display: block;
    transition: background-color 0.3s;
}

.post-type-archive-proy_est .student-projects-behance-box a:hover {
    background-color: var(--arqdis-magenta);
}

/* Responsive: make Behance box single-column at medium and smaller screens */
@media (max-width: 1500px) {
    /* Force stamped Behance box to single column width */
    .post-type-archive-proy_est .packery-layout-grid .stamped-content.double-width.student-projects-behance-box,
    .post-type-archive-proy_est .stamped-content.double-width.student-projects-behance-box {
        width: var(--grid-col-sz) !important; /* override global double-width rule */
    }

    /* Adjust internal layout to a single column */
    .post-type-archive-proy_est .student-projects-behance-box {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-column-gap: 16px;
    }

    .post-type-archive-proy_est .student-projects-behance-box p {
        grid-row: auto;
    }
}

/* When the stamped box takes only one grid column (medium and smaller screens),
   make it flow in document order and stack its internal elements. This
   uses 1500px to handle medium screens like 1400x900 properly.
*/
@media (max-width: 1500px) {
    /* Remove absolute positioning on narrower screens to allow normal flow */
    .post-type-archive-proy_est .student-projects-behance-box.stamped-content {
        position: relative;
        left: auto;
        width: 100% !important;
        margin-bottom: var(--grid-row-gap, 15px);
    }

    /* Ensure stamped box doesn't overlap and flows naturally */
    .post-type-archive-proy_est .student-projects-behance-box.stamped-content {
        position: static;
        left: auto;
        width: 100% !important;
        margin-bottom: 15px;
    }

    /* Reduce padding to match mobile grid-header */
    .post-type-archive-proy_est .student-projects-behance-box {
        padding: var(--min-side-margin);
        grid-column-gap: 12px;
        grid-row-gap: 12px;
    }
    /* Ensure stamped box doesn't overlap and flows naturally */
    .post-type-archive-proy_est .student-projects-behance-box.stamped-content {
        position: static;
        left: auto;
        width: 100% !important;
        margin-bottom: 15px;
    }
    
    /* Reduce padding to match mobile grid-header */
    .post-type-archive-proy_est .student-projects-behance-box {
        padding: var(--min-side-margin);
        grid-column-gap: 12px;
        grid-row-gap: 12px;
    }

    /* On very small screens, stack the Behance box content vertically (title, text, button)
       so it matches the layout of other stamped boxes */
    .post-type-archive-proy_est .student-projects-behance-box {
        /* switch from grid to column flow for stacking */
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .post-type-archive-proy_est .student-projects-behance-box .grid-title {
        order: 1;
        margin: 0 0 6px 0;
    }

    .post-type-archive-proy_est .student-projects-behance-box .grid-subtitle {
        order: 2;
        margin: 0 0 8px 0;
    }

    .post-type-archive-proy_est .student-projects-behance-box nav {
        order: 3;
        width: 100%;
    }

    /* Make the button appear as a normal block-level CTA under the text */
    .post-type-archive-proy_est .student-projects-behance-box nav .grid-button {
        display: block !important;
        width: 100% !important; /* fill the available width inside the stamped box padding */
        box-sizing: border-box; /* ensure padding doesn't push beyond container */
        padding: 0.9em 0 !important; /* vertical padding, no horizontal so the button fills width */
        text-align: center !important; /* center the CTA label */
    }
}

/* ===== STUDENT PROJECT THUMBNAIL CARDS ===== */
/* Note: Base card styles (.student-project-card, .student-thumb-image, .student-thumb-title) 
   are now in the main style.css to be available globally across all grids */

/* ===== STUDENT PROJECT DETAIL CARD ===== */
.post-type-archive-proy_est .student-project-detail-card {
    background-color: #ffffff;
    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.25);
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to top */
    
    /* Absolute positioning to place in top-right (last 2 columns) - will be overridden by JS for sticky behavior */
    position: absolute;
    right: 0;
    top: 0;
    
    /* Take up the full 2-column width (from Packery grid) - same as other double-width items */
    width: calc(var(--grid-col-sz)*2 + var(--grid-gutter-sz));
    
    /* Force card to always be full viewport height */
    height: 100vh;
    min-height: 100vh;
    
    /* When content overflows, allow scrolling but keep centering */
    overflow-y: auto;
    overflow-x: hidden; /* Hide horizontal scrollbar */
    
    /* Smooth transition when position changes */
    transition: none; /* We'll handle this with JS for better control */
    
    /* Z-index to keep it above grid content but below the navigation menu */
    z-index: 10;
}

/* Optional sticky mode (not enabled by default). Add class .sticky-mode via JS or markup to
   switch to CSS-native sticky positioning for resilience if absolute layout misbehaves. */
.post-type-archive-proy_est .student-project-detail-card.sticky-mode {
    position: sticky;
    top: 0;
    right: unset;
}
/* Low-risk stabilization styles */
.post-type-archive-proy_est .student-project-detail-card.pending-layout {
    opacity: 0;
}
.post-type-archive-proy_est .student-project-detail-card.layout-stable {
    opacity: 1;
    transition: opacity .35s ease;
}

/* Hide scrollbar for the detail card */
.post-type-archive-proy_est .student-project-detail-card::-webkit-scrollbar {
    display: none;
}

.post-type-archive-proy_est .student-project-detail-card {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Invisible blocker element that reserves space for Packery without visual white space */
.post-type-archive-proy_est .detail-card-spacer {
    position: absolute;
    right: 0;
    top: 0;
    /* Same width as the detail card - 2 columns + 1 gutter */
    width: calc(var(--grid-col-sz)*2 + var(--grid-gutter-sz));
    min-height: 120vh;
    pointer-events: none;
    z-index: -1;
    /* Invisible but takes up space for Packery stamping */
}

/* Inner wrapper for padding and gap - needed to maintain spacing when scrolling */
.post-type-archive-proy_est .student-project-detail-card > * {
    padding-left: 16px;
    padding-right: 16px;
}

/* Add top/bottom padding for spacing from card edges */
.post-type-archive-proy_est .student-project-detail-card > :first-child {
    padding-top: 64px;
}

.post-type-archive-proy_est .student-project-detail-card > :last-child {
    padding-bottom: 32px;
}

.post-type-archive-proy_est .detail-card-gallery,
.post-type-archive-proy_est .detail-card-content {
    margin-bottom: 16px;
}

/* Gallery Section */
.detail-card-gallery {
    display: flex;
    gap: 10px;
    padding: 32px;
    align-items: center; /* Center thumbnails and main image vertically */
    justify-content: center; /* Center horizontally as well */
    margin-top: 0;
}

.detail-card-main-image {
    flex: 1;
    position: relative;
    max-width: 600px; /* Limit the width to make the image smaller */
    display: flex;
    align-items: center; /* Center image vertically within container */
    justify-content: center; /* Center image horizontally */
}

.detail-card-main-image img {
    width: 100%;
    height: auto;
    max-height: 600px; /* Limit height to match max-width for square aspect ratio */
    display: block;
    object-fit: contain; /* Changed from cover to contain to preserve aspect ratio */
    transition: opacity 0.3s ease-in-out;
}


/* Navigation Arrows */
.detail-card-nav-arrows {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.detail-card-main-image:hover .detail-card-nav-arrows {
    opacity: 1;
}

.detail-nav-arrow {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 0;
}

.detail-nav-arrow:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.detail-nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.detail-nav-arrow svg {
    width: 24px;
    height: 24px;
}

.detail-card-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
}

/* Hide scrollbar for thumbnails */
.detail-card-thumbnails::-webkit-scrollbar {
    display: none;
}

.detail-card-thumbnails {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.detail-card-thumbnails img {
    width: 69px;
    height: auto;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
    border: 2px solid transparent;
}

.detail-card-thumbnails img:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.detail-card-thumbnails img.active {
    opacity: 1;
    border-color: transparent; /* Remove black border */
    transform: scale(1.1); /* Slightly larger when active */
}

/* Content Section */
.detail-card-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 53px;
}

.detail-card-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Topics/Tags */
.detail-card-topics {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.detail-card-topic {
    background-color: var(--arqdis-blue);
    padding: 7.83px;
    color: #ffffff;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 16.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Title */
.detail-card-title {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    color: #000000;
    text-transform: uppercase;
    margin: 0;
}

/* Metadata - using global post-metadata styles matching h6.post-subtitle */
#detail-project-meta.post-metadata {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
    text-transform: uppercase;
    margin: 0;
}

/* Override separator to add space before the vertical bar */
#detail-project-meta.post-metadata span:not(:last-child):after {
    content: ' | ';
}

/* Remove any special styling from program and course spans */
#detail-project-meta.post-metadata .detail-meta-program,
#detail-project-meta.post-metadata .detail-meta-course {
    color: #000000;
    font-style: normal;
}

/* Make links inside the detail card italic, but do not change the CTA button */
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button) {
    font-style: italic;
}

/* Ensure all links in detail card are always blue - override visited states */
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button),
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button):link,
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button):visited,
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button):hover,
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button):focus,
.post-type-archive-proy_est .student-project-detail-card a:not(.detail-card-button):active {
    color: var(--arqdis-blue) !important;
}

/* Authors */
.detail-card-authors {
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 1.5em;
    line-height: 32px;
    color: #000000;
    text-transform: uppercase;
    font-style: italic;
}

/* Description */
.detail-card-description {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: #000000;
}

.detail-card-description p {
    margin: 0;
    white-space: pre-wrap;
}

/* Call to Action Button */
.detail-card-cta {
    width: 100%;
}

.detail-card-button {
    background-color: var(--arqdis-blue);
    color: #ffffff;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    text-transform: uppercase;
    transition: background-color 0.3s;
}

.detail-card-button:hover,
.detail-card-button:focus {
    cursor: pointer;
    opacity: 0.9;
}

/* Ensure CTA button stays blue in all states */
.detail-card-button,
.detail-card-button:link,
.detail-card-button:visited,
.detail-card-button:hover,
.detail-card-button:focus,
.detail-card-button:active {
    background-color: var(--arqdis-blue) !important;
    color: #ffffff !important;
}

/* Medium screen adjustments for 1400x900 and similar resolutions */
@media (max-width: 1500px) and (min-width: 1200px) {
    /* Detail card image size variables - adjust these to change all image sizes */
    .post-type-archive-proy_est .student-project-detail-card {
        --detail-image-width: 330px;
        --detail-image-height: 300px;
        --detail-image-min-width: 250px;
        --detail-thumbnail-size: 60px;
        --detail-thumbnail-height: 210px;
        --detail-image-top-padding: 32px;
    }
    
    /* Completely restructure gallery for smaller image */
    .detail-card-gallery {
        margin-top: 16px; /* Reduced from 32px */
        padding: 5px; /* Reduced from 10px */
        gap: 8px; /* Reduced from 10px */
    }
    
    /* Make main image container much smaller and remove flex growth */
    .detail-card-main-image {
        flex: 0 0 auto; /* Don't grow, don't shrink, auto basis */
        max-width: var(--detail-image-width);
        max-height: var(--detail-image-height);
        min-width: var(--detail-image-min-width);
        padding-top: var(--detail-image-top-padding);
    }
    
    /* Aggressively constrain image size - uses container variables */
    .detail-card-main-image img {
        max-height: var(--detail-image-height);
        max-width: var(--detail-image-width);
        width: auto; /* Don't force 100% width */
        height: auto;
        object-fit: cover; /* Use cover instead of contain for better space usage */
    }
    
    /* Reduce thumbnails significantly - uses variables */
    .detail-card-thumbnails {
        max-height: var(--detail-thumbnail-height);
        gap: 5px; /* Smaller gap */
    }
    
    .detail-card-thumbnails img {
        width: var(--detail-thumbnail-size);
    }
    
    /* Remove spacing overrides - let centering handle vertical spacing */
    .post-type-archive-proy_est .student-project-detail-card > :first-child {
        padding-top: 0; /* Let flexbox centering handle spacing */
    }
    
    .post-type-archive-proy_est .student-project-detail-card > :last-child {
        padding-bottom: 0; /* Let flexbox centering handle spacing */
    }
    
    .post-type-archive-proy_est .detail-card-gallery,
    .post-type-archive-proy_est .detail-card-content {
        margin-bottom: 8px; /* Reduced from 16px */
    }
    
    /* Reduce content gaps */
    .detail-card-content {
        gap: 16px; /* Much smaller gap */
        padding: 8px; /* Reduced padding */
    }
    
    .detail-card-info {
        gap: 8px; /* Smaller gaps between elements */
    }
    
    /* Make topics more compact */
    .detail-card-topics {
        gap: 8px; /* Smaller gap between topics */
    }
    
    .detail-card-topic {
        padding: 4px 6px; /* Smaller topic badges */
        font-size: 14px; /* Smaller font */
    }
}

/* Hide detail card on tablet and mobile screens where grid becomes too cramped */
@media (max-width: 1200px) {
    #project-detail-card,
    .student-project-detail-card {
        display: none !important;
    }
}

/* ===== LIGHTBOX STYLES ===== */
.detail-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.detail-lightbox.active {
    display: flex;
    opacity: 1;
}

/* Prevent body scroll when lightbox is open */
body.lightbox-open {
    overflow: hidden;
}

.lightbox-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 95vh;
    object-fit: contain;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    animation: lightboxZoomIn 0.3s ease;
}

@keyframes lightboxZoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Close button */
.lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    color: #ffffff; /* Start as white */
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.lightbox-close:hover {
    background-color: transparent;
    border: none;
    color: var(--arqdis-blue); /* Turn blue on hover */
    transform: scale(1.1);
}

.lightbox-close svg {
    width: 31px;
    height: 31px;
}

/* Navigation arrows */
.lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.lightbox-nav svg {
    width: 33px;
    height: 33px;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-nav:hover {
    background-color: transparent;
    border: none;
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
}

/* Counter */
.lightbox-counter {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 20px;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    z-index: 10001;
}

/* Make images in detail card appear clickable */
#detail-main-image,
.detail-card-thumbnails img {
    cursor: pointer;
}

#detail-main-image:hover {
    opacity: 0.9;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        font-size: 32px;
    }
    
    .lightbox-nav {
        width: 50px;
        height: 50px;
        font-size: 40px;
    }
    
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }
    
    .lightbox-counter {
        bottom: 20px;
        font-size: 12px;
        padding: 8px 16px;
    }
    
    .lightbox-content {
        max-width: 100vw;
        max-height: 100vh;
    }
    
    .lightbox-image {
        max-height: 100vh;
    }
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
    .lightbox-close,
    .lightbox-nav {
        background-color: rgba(255, 255, 255, 0.2);
    }
}