@font-face {
    font-family: 'Palco Light'; /* Specify the font family name for the light version */
    src: url('Fonts/Palco_Family-Normal-light.woff') format('woff'); /* Specify the font file path and format for the light version */
    font-weight: 300; /* Specify the font weight for the light version */
}

@font-face {
    font-family: 'Palco Bold'; /* Specify the font family name for the bold version */
    src: url('Fonts/Palco_Family-Normal-Bold.woff') format('woff'); /* Specify the font file path and format for the bold version */
    font-weight: 700; /* Specify the font weight for the bold version */
}


/* Reset default margin and padding */
body, ul, li {
    font-family: 'Palco', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #000000;
    height: 100%;
}

::-webkit-scrollbar {
    display: none;
  }

/* Define the container */
.container {
    display: none;
    background-color: #000000;
    font-family: 'Palco';
    position: absolute;
    right: 0;
    width: 35%;
    top: 20px;
    height: calc(50% - 20px);
    z-index: 0;
    overflow: auto;
}

.project-list-container {
    display: none;
    position: absolute;
    top: 0px;
    left: 0;
    width: 65%; /* Adjust the width as needed */
    height: 50%;
    overflow-y: auto; /* Enable vertical scrolling for the project list container */
    overflow-x: hidden; /* Hide the horizontal scrollbar */
    background-color: #000000;
    
}



/* Define the project list */
.project-list {
    list-style: none;
    width: 100%;
    height: 100%;
    background-color: #000000;
 }

 .project {
    top:20px;
    display: flex;
    height: auto;
    position: relative;
    background-color: #fffde6;
    color:#000000;
    text-align: left; /* Center-align the text */
    z-index: 0;
    font-size: 12.5pt;
    overflow-x: hidden;
    line-height: 1.31;
    border-bottom: 2px solid #000000;
    font-family: Palco Bold;
    
}
.project:hover{
    background-color: #000000;
    color:#ffffff;
    text-align: left; /* Center-align the text */
    z-index: 0;
    height: calc(100% / 2.5);
    font-size: 12.5pt;

}




.project-client,
.project-specs,
.project-year
{
    /* ... (other styles) */
    flex: 0 0 25%;  
    text-align: left;
    margin-left: 15px;
    hyphens: auto;
    color: #999999;
    
}

.project-title{
    flex: 0 0 25%;
    text-align: left;
    margin-left: 15px;
    hyphens: auto;
} 

.project:hover .project-client {
    display: none;
}   
.project:hover .project-specs {
    display: none;
}  
.project:hover .project-year {
    display: none;
}  


.project:hover .project-title {
    font-size: 25pt;
    white-space: nowrap; /* Prevent text from wrapping */
    text-overflow: ellipsis; /* Add ellipsis (...) for truncated text */
    margin-left: 15px;
    width: calc(50% + 15px);
    overflow: hidden; /* Hide overflowing content */
    left: 0; /* Position it relative to the .project container */
    position: absolute;
    background-color: #000000;
    z-index: 888888888;
    padding-left: 10px;
    line-height: 1;
    height: 40px;
}

@media (max-width: 600px) {
    .project:hover{
        left: 0;
        align-items: center;
        height: 150px;
        width: 100%;
        color: #ffffff;
        background-color: #000000;
}
}

@media (max-width: 600px) {
.project:hover .project-title {
    margin-left: 5px;
    font-size: 12.5pt;
    background-color: none;
    z-index: -233232;

}
}



/* Images container (hidden by default) */
.images-container {
    display: none;
}

/* Define the image container */
.image-container {
    position: fixed;
    right: 0;
    width: 100%;
    height: 0;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    overflow-x: scroll; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scrollbar */
    white-space: nowrap; /* Prevent images from wrapping to the next line */
    bottom: -50%; /* Start from -50% */
}

/* Show the image container when images are displayed */
.image-container.active {
    transition: bottom 1s cubic-bezier(0.19, 1, 0.22, 1);
    height: 50vh; /* 50% of the viewport height */
    bottom: 0;
}


/* Styles for the images container within image-container */
.images {
    height: 100%; /* Set the height to 100% of its parent container (image-container) */
    display: flex; /* Use flex to horizontally align images */
    align-items: flex-start; /* Align items to the top (left) */
    white-space: nowrap; /* Prevent images from wrapping to the next line */
    overflow-y: hidden; /* Hide vertical scrollbar */
}

/* Styles for the images within the images container */
.images img {
    max-height: 100%; /* Limit the height of both images and videos to 100% of the container */
    width: auto; /* Allow both images and videos to maintain their aspect ratio */
    opacity: 0.2;
}


/* Apply padding only to the last image */

.images img:hover {
    opacity: 1;
    filter: none; /* Remove the grayscale filter on hover */
}




.project-image-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}



.project-image-hover img {
    position: relative;
    left: 15px;
    top: 40px;
    height: calc(100% - 40px);
    width: auto;
    overflow-x: hidden;
    overflow-y: hidden;
}

.project:hover .project-image-hover {
    visibility: visible;
    filter: blur(0);
    z-index: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.project-image-hover-big {
    position:fixed;
    top: calc(50% + 100px);
    left: 0;
    display: none;
    filter: blur(5px);
    transition: filter 0.5s;
    z-index: 222222222222222999; /* Adjust the z-index as needed */
}


.project-image-hover-big img {
    position: relative;
    height: calc(100% - 90px);
    width: auto;
    overflow-x: hidden;
    overflow-y: hidden;
}


.project:hover .project-image-hover-big {
    filter: blur(0);
    height: 50%;
    width: auto;
    display: block;
    z-index: 222222222222222999; /* Adjust the z-index as needed */
}


.close-button {
    height: 20px;
    position: absolute;
    top: 0px; /* Adjust the top position as needed */
    left: 65%; /* Adjust the right position as needed */
    cursor: pointer;
    background-color:#000000;
    color: #ffffff; /* Red text color, change as needed */
    font-size: 12.5pt; /* Adjust the font size as needed */
    z-index: 1;
    border: none; /* Remove the button border */
    padding-left: 15px;
    font-family: Palco bold;
    font-weight: 700;
    line-height: 1;
}



.close-button:hover {
    height: 20px;
    position: absolute;
    top: 0px; /* Adjust the top position as needed */
    left: 65%; /* Adjust the right position as needed */
    cursor: pointer;
    background-color:#000000;
    color: #ff0000; /* Red text color, change as needed */
    font-size: 12.5pt; /* Adjust the font size as needed */
    z-index: 1;
    border: none; /* Remove the button border */
    padding-left: 15px;
    font-family: Palco bold;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 600px) {
.close-button:hover {
    height: 20px;
    position: absolute;
    top: 0px; /* Adjust the top position as needed */
    left: 0; /* Adjust the right position as needed */
    cursor: pointer;
    background-color:#000000;
    color: #ff0000; /* Red text color, change as needed */
    font-size: 12.5pt; /* Adjust the font size as needed */
    z-index: 1;
    border: none; /* Remove the button border */
    transition: transform 0.3s ease;
    padding-left: 15px;
    font-family: Palco bold;
    font-weight: 700;
    line-height: 1;
}
}

@media (max-width: 600px) {
    .close-button {
        height: 20px;
        position: absolute;
        top: 0px; /* Adjust the top position as needed */
        left: 0; /* Adjust the right position as needed */
        cursor: pointer;
        background-color:#000000;
        color: #ffffff; /* Red text color, change as needed */
        font-size: 12.5pt; /* Adjust the font size as needed */
        z-index: 1;
        border: none; /* Remove the button border */
        transition: transform 0.3s ease;
        padding-left: 15px;
        font-family: Palco bold;
        font-weight: 700;
        line-height: 1;
    }
    }



/* Style for the resize button */
.resize-button {
    height: 20px;
    position: absolute;
    top: 0; /* Adjust the top position as needed */
    padding-left: 15px; /* Adjust the right position as needed */
    cursor: pointer;
    background-color:#000000;
    color: #ffffff; /* Red text color, change as needed */
    font-size: 12.5pt; /* Adjust the font size as needed */
    z-index: 1;
    border: none; /* Remove the button border */
    font-family: Palco bold;
    font-weight: 700;
    line-height: 1;
    right: 0;
}

.resize-button:hover {
    height: 20px;
    position: absolute;
    top: 0; /* Adjust the top position as needed */
    padding-left: 15px; /* Adjust the right position as needed */
    cursor: pointer;
    background-color:#000000;
    color: #00ff2a; /* Red text color, change as needed */
    font-size: 12.5pt; /* Adjust the font size as needed */
    z-index: 1;
    border: none; /* Remove the button border */
    font-family: Palco bold;
    font-weight: 700;
    line-height: 1;
    right: 0;
}




/* Style for the full-height class */
.image-container.full-height {
    height: 100vh; /* Set the height to 100% of the viewport height */
    transition: height 0.7s cubic-bezier(0, 0, 0.32, 1);
    z-index: 11000;
}

.image-container.full-height .images img {
    opacity: 1;
    filter: none; /* Remove the grayscale filter */
    /* Add any other styling you want for full-height images */
}

.description {
    display: none; /* Hide the description initially */
    /* Add other styling properties as needed */
    position: absolute; /* Set the position to absolute */
    width: 100%; /* Set the width to 50% of the container */
    left: 0; /* Place it on the right side */
    padding: 15px;
    padding-top: 0px;  /* Add spacing around description */
    box-sizing: border-box; /* Include padding in the width */
    font-size: 25pt;
    z-index: 800000000000000000000;
    background-color: #000000;
    color: #fffde6;
    height: 100%;
    margin-top: 0;
    line-height: 1;
    text-align: left;
    font-family: Palco bold;
    font-weight: 700;

}


.background-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    color: #000000;
    z-index: -1;
    background-color: #f2f2f2ea;
}

.background-left {
    display: none;
    position: absolute;
    width: 65%;
    height: calc(100% - 100px);
    overflow-y: auto;
    bottom: 0;
    z-index: -222;
    

}

.background-right {
    display: none;
    position: absolute;
    top: 100px;
    right: 0;
    width: 35%;
    height: 100%; 
    background-color: #ffffff;
    overflow: auto;
}



.background-text {
    position: relative;
    font-size: 12.5pt;
    height: 100%;
    overflow-y: auto;
    display: none;
    padding-left: calc(25% + 30px);
    padding-right: 15px;
    background-color:#000000;
    font-family: Palco bold;
    font-weight: 700;
    line-height: 1.2;
    color: #fffde6;
    
}




.right-column {
    float: left; /* Add this */
   width: 37%;
}

.left-column {
    display: inline-block; /* Add this */
    width: 63%;
}


.background-contact {
    position: absolute;
    font-size: 25pt;
    align-items: center;
    width: 100%;
    word-wrap: break-word;
    font-family: Palco bold;
    font-weight: 700;
    text-align: left;
    line-height: 0.9;
    margin-left: 15px;
}

/* Adjust other styles as needed */

/* Style for the index bar */
.index-bar {
    position: fixed;
    background-color: #000000; /* Background color of the index bar */
    color: #ffffff; /* Text color */
    display: flex;
    width: 65%;
    height: 20px;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    line-height: 1;
}

.index-label {
    flex: 0 0 25%;
    text-align: left; /* Center-align the text */
    z-index: 4;
    margin-left: 15px;
    font-size: 12.5pt;
    font-family: Palco bold;
    font-weight: 700;
    line-height: 1;
}

/* Style for the index labels */
.index-label2 {
    background-color:#000000;
    position: absolute;
    color: #ffffff;
    font-size: 12.5pt;
    margin-left: 15px;
    font-family: Palco bold;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
}

.index-label2:hover {
    color: #ff0000;
}
.local-time-container {
    color: #000000; /* Text color */
    display: flex;
    position: absolute;
    width: 35%;
    left: +65%;
    top: 0;
    height: 20px;
    background-color:#000000;

}

.local-time {
    background-color:#000000;
    position: absolute;
    color: #ffffff;
    font-size: 12.5pt;
    margin-left: 50%;
    font-family: Palco bold;
    font-weight: 700;
    line-height: 1;
}


.filters {
    position: absolute;
    width: auto; /* Set width to auto to fit the content */
    left: 0;
    top: 0;
    text-align: left;
    margin-bottom: 20px;
    z-index: 1;
    background-color: #f2f2f2;
    width: 100%;
    height: 100%;
    z-index: 1;
    font-family: Palco bold;
    font-weight: 700;
}

.intro-text {
    font-family: Palco bold;
    font-weight: 700;
    position: relative;
    margin-top: 0;
    top: 0;
    font-size: 25pt; /* Set the desired font size */
    color: #000000; /* Set the desired text color */
    text-align: left; /* Align the text to the left */
    margin-left: 15px; /* Remove any default margins */
    margin-right: 15px; /* Remove any default margins */
    display: block; /* Set display to "block" to make it visible initially */
    overflow: hidden; /* Hide any overflowing content */
    text-transform: uppercase;
    line-height: 0.9;
    text-align: center;
}
@media (max-width: 1200px) {
.intro-text {
    font-family: Palco bold;
    font-weight: 700;
    position: relative;
    margin-top: 0;
    top: 0;
    font-size: 12.5pt; /* Set the desired font size */
    color: #000000; /* Set the desired text color */
    text-align: left; /* Align the text to the left */
    margin-left: 15px; /* Remove any default margins */
    margin-right: 15px; /* Remove any default margins */
    display: block; /* Set display to "block" to make it visible initially */
    overflow: hidden; /* Hide any overflowing content */
    text-transform: uppercase;
    line-height: 0.9;
    text-align: center;
}
}
@media (max-width: 1200px) {
.background-contact {
    font-size: 12.5pt;
}
}

@media (max-width: 600px) {
    .background-contact-mobile {
        margin-left: 15px;
        top: 0;
    }
    }

@media (max-width: 600px) {
    .background-contact-mobile a {
        font-family: Palco bold;
        font-size: 12.5pt;
        text-decoration: none;
        line-height: 1;
        color: #fff;
    }
    }

@media (max-width: 1200px) {
    .description {
        font-size: 12.5pt;
    }
    }

.intro-text2 {
    position: absolute;
    font-size: 25pt; /* Set the desired font size */
    color: #000000; /* Set the desired text color */
    text-align: left; /* Align the text to the left */
    margin-left: 15px; /* Remove any default margins */
    display: block; /* Set display to "block" to make it visible initially */
    visibility: visible; /* Set visibility to "visible" */
}

/* Style the links within the introductory text */
.intro-text a {
    text-decoration: none; /* Remove underlines from links */
    color: #9b9b9b; /* Set the link color */
    font-weight: light; /* Make the links bold */
    margin: 5px; /* Add spacing between links */
}
.intro-text2 a {
    text-decoration: none; /* Remove underlines from links */
    color: #9b9b9b; /* Set the link color */
    font-weight: light; /* Make the links bold */
    margin: 5px; /* Add spacing between links */
}
.filter-category:hover {
    color:  #ff0000; /* Set the hover color */
  }
 

.background-contact a {
    color: #999999;; /* Set the text color to Instagram's brand color */
    text-decoration: none; /* Remove the default underline */
    font-family: Palco bold;
    font-weight: 700;
}

/* Add a hover effect for the link when the mouse is over it */
.background-contact a:hover {
    color: #ff0000; /* Change the color on hover */
}



@media (max-width: 600px) {
    /* Hide the .container when the screen size is iPhone size */
    .container {
        display: none;
    }
}




@media (max-width: 600px) {
    /* Hide the .container when the screen size is iPhone size */
    .project-list-container {
        display: block !important;
        position: absolute;
        background-color: #000000;
        width: 100%;
        height: calc(100% - 50px);
        top: 50px;
    }
}
@media (max-width: 600px) {
    /* Hide the .container when the screen size is iPhone size */
    .project-list{
        top: 100px;
        height: 100%;
    }
}

@media (max-width: 600px) {
    /* Hide the .container when the screen size is iPhone size */
    .project-image-hover {
        position: relative;
        visibility: visible;
        display: flex;
        align-items: center;
        left: 0px;
        top: -5.5px;
    }
}

@media (max-width: 600px) {
    /* Hide the .container when the screen size is iPhone size */
    .project-image-hover img {
       margin-inline: 5px;
    }
}

@media (max-width: 600px) {
    /* Hide the .container when the screen size is iPhone size */
    .project {
        position: relative;
        height: 150px;
        color: #000000;
        display: block; 
        background-color: #000000;
      }
}


@media (max-width: 600px) {
    /* Hide the .containe when the screen size is iPhone size */
    .project-specs,
    .project-year,
    .project-client {
        display: none;
    }
}

@media (max-width: 600px) {
    /* Hide the .container when the screen size is iPhone size */
    .project-title {
        font-size: 12.5pt;
    }
}



@media (max-width: 600px) {
    .copyright {
        display: none;
    }
    }

    @media (max-width: 600px) {
        .local-time-container {
            z-index: 333333333;
            top: 0;
            left: 0;
            position: fixed;
            width: 100%;
            height: 50px;
            background-color: #000000;
        }
        }



    @media (max-width: 600px) {
        .index-label2 {
            display: none;
        }
        }

        @media (max-width: 600px) {
            .local-time {
                font-size: 12.5pt;
                margin-top: 15px;
                top: 0;
                right: 0;
                color: #ffffff;
                z-index: 333333333333;
            }
            }

            @media (max-width: 600px) {
                .index-bar {
                   display: none;
                }
                }


    @media (max-width: 600px) {
        .images img {
            opacity: 1;
            max-height: 100%; /* Limit the height of both images and videos to 100% of the container */
            width: auto; /* Allow both images and videos to maintain their aspect ratio *//* Add padding around both images and videos */
        }
        }

    @media (max-width: 600px) {
        .image-container.full-height {
            height: calc(100% - 50px); /* Set the height to 100% of the viewport height */
            transition: height 0.5s ease-in-out; /* Smoothly transition height */
            z-index: 44444444441000;
        }
    }

    @media (max-width: 600px) {
    .project:hover .project-image-hover {
        position: relative;
        height: 100%;
        width: auto;
        visibility: visible;
        top:16.5px;
    }
}



@media (max-width: 600px) {
    .background-overlay {
        display: none;
    }
}

@media (max-width: 600px) {
    .background-right {
        right: 0;
        position: absolute;
        width: 100%;
        font-weight: lighter;
        height: 100%; 
    }
}

@media (max-width: 600px) {
    .background-left {
        display: none;
    }
}

@media (max-width: 600px) {
    .image-container {
        position: fixed;
        right: 0;
        width: 100%;
        height: 0;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: left;
        overflow-x: scroll; /* Enable horizontal scrolling */
        overflow-y: hidden; /* Hide vertical scrollbar */
        white-space: nowrap; /* Prevent images from wrapping to the next line */
        bottom: 0; /* Start from the bottom */
        z-index: 3444;
        background-color: #000000;
    }
}



@media (max-width: 600px) {
    .background-mobile {
        position: relative;
        height: 100%;
        background-color: #000000;
    }
}

@media (max-width: 600px) {
    
    .scroll-to-bottom-bar {
        z-index: 500000;
        position: fixed;
        left: 15px;
        width: 100%;
        color: #fff; /* Change the text color as needed */
        text-align: left;
    }
    
    .scroll-to-bottom-bar a {
        left: 0;
        z-index: 500000;
        top: 0;
        font-size: 25pt;
        color: #fff; /* Change the link color as needed */
        text-decoration: none;
    }
}

@media (min-width: 600px) {
    .scroll-to-bottom-bar {
        display: none;
    }
}

@media (min-width: 600px) {
    .scroll-to-top-bar {
        display: none;
    }
}

@media (max-width: 600px) {
    .scroll-to-top-bar {
        position: relative;
        left: 0;
        width: 100%;
        background-color: #000000;
        color: #000000;
        text-align: center;
        bottom: 0;


    }
    
    .scroll-to-top-bar a {
        font-family: Palco bold;
        font-weight: 700;
        font-size: 25pt;
        color: #fff; /* Change the link color as needed */
        text-decoration: none;

    }
}





.horizontal-scroll-container {
    position: absolute;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    height: 50% ;
    overflow-x: hidden; 
    overflow-y: hidden; 
    z-index: 2000000;
    background-color: #000000;
    z-index: -1;
}



.horizontal-scroll-container:hover {
    position: absolute;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    height: 50% ;
    background-color: #000000;
    z-index: -1;
    
}

.horizontal-scroll-container img {
    overflow-y: hidden;
    width: auto;
    height: 100%;


}

.close-button-intro {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 2; /* Set a reasonable z-index value */
    background-color: #000000;
    border: none; /* Remove border */
    font-size: 16px; /* Adjust the font size */
    cursor: pointer; /* Add cursor pointer on hover */
    color: #ffffff; /* Set the text color */
    padding-left: 15px;
    font-family: Palco bold;
    font-weight: 700;
    z-index: 44444444;
}

.close-button-intro:hover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 2; /* Set a reasonable z-index value */
    background-color: #000000;
    border: none; /* Remove border */
    font-size: 16px; /* Adjust the font size */
    cursor: pointer; /* Add cursor pointer on hover */
    color: #ff0000; /* Set the text color */
    padding-left: 15px;
    font-family: Palco bold;
    font-weight: 700;
}

.show-background-text-link {
    font-size: 70.5pt;
    display: flex;
    position: relative;
    background-color: #000000;
    width: 100%;
    left: 0;
    height: 100px;
    line-height: 1;
    bottom: 0;
}

@media (max-width: 1300px) {
.show-background-text-link {
    font-size: 25pt;
    display: flex;
    position: relative;
    background-color: #000000;
    width: 100%;
    left: 0;
    height: 100px;
    line-height: 1;
    bottom: 0;
}
}

.show-background-text-link a {
    font-family: Palco bold;
    font-weight: 700;
    color: #ffffff; /* Text color */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make it an inline-block element */

}

.show-background-text-link a:hover {
    color:  #6b6b6b;
}

.show-horizontal-scroll-link a {
    color: #000000; /* Text color */
    text-decoration: none; /* Remove underline */
    font-family: Palco bold;
    font-weight: 700;
    display: inline-block; /* Make it an inline-block element */

}
.show-horizontal-scroll-link a:hover {
    color:  #6b6b6b;
}

#showHorizontalScrollLink {
    margin-left: 10px;
}

#showBackgroundTextLink {
    position: absolute;
    margin-left: 15px;
    left: calc(32.50% + 15px);
}




@media (max-width: 600px) {
.project-image-hover-big img {
    display: none;
}
}

@media (max-width: 600px) {
    .project-image-hover img {
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        position: relative;
        
    }
    }

    @media (max-width: 600px) {
        .project:hover .project-image-hover img{
            top: 0;
        left: 0;
        width: 100%;
        height: auto;
        position: relative;
        }
    }

    @media (max-width: 600px) {
    .horizontal-scroll-container {
        display: none;
    }
    .horizontal-scroll-container:hover {
        position: absolute;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        width: 100%;
        height: 100%;
        transition: filter 0.7s, visibility 0.0s;
        filter: blur(5px);
        background-color: #000000;
        opacity: 0.8;
        
    }

    .horizontal-scroll-container img {
        overflow-y: hidden;
        width: auto;
        height: 100%;
    
    
    }
}
.show-project-link {
    font-family: Palco Bold;
    position: absolute;
    left: 15px;
    color: #ffffff; /* Text color */
    text-decoration: none; /* Remove underlines from the link */
    font-size: 70pt;
    font-weight: bold;
    z-index: 21;
    line-height: 1;
}

.show-project-link:hover{
    font-family: Palco Bold;
    position: absolute;
    left: 15px;
    color: #6b6b6b; /* Text color */
    text-decoration: none; /* Remove underlines from the link */
    font-size: 70pt;
    font-weight: bold;
}

#showContactContainerLink{
    font-family: Palco Bold;
    position: absolute;
    top:-25px;
    left: 65%;
    color: #ffffff; /* Text color */
    text-decoration: none; /* Remove underlines from the link */
    font-size: 70pt;
    font-weight: bold;
    z-index: 21;

}

.windows #showContactContainerLink:hover {
    font-family: Palco Bold;
    position: absolute;
    left: 65%;
    color: #ffffff; /* Text color */
    text-decoration: none; /* Remove underlines from the link */
    font-size: 70pt;
    font-weight: bold;
    z-index: 21;

}
#showContactContainerLink:hover{
    font-family: Palco Bold;
    position: absolute;
    top:-25px;
    left: 65%;
    color: #6b6b6b; /* Text color */
    text-decoration: none; /* Remove underlines from the link */
    font-size: 70pt;
    font-weight: bold;
    z-index: 21;

}


@media (max-width: 1300px) {
#showContactContainerLink{
    font-family: Palco Bold;
    position: absolute;
    top: -10px;
    left: 65%;
    color: #ffffff; /* Text color */
    text-decoration: none; /* Remove underlines from the link */
    font-size: 25pt;
    font-weight: bold;
    z-index: 21;

}
#showContactContainerLink:hover{
    font-family: Palco Bold;
    position: absolute;
    top:-10px;
    left: 65%;
    color: #6b6b6b; /* Text color */
    text-decoration: none; /* Remove underlines from the link */
    font-size: 25pt;
    font-weight: bold;
    z-index: 21;

}
}
@media (max-width: 1300px) {
.show-project-link {
    font-family: Palco Bold;
    position: absolute;
    left: 15px;
    color: #ffffff; /* Text color */
    text-decoration: none; /* Remove underlines from the link */
    font-size: 25pt;
    font-weight: bold;
    z-index: 21;
    line-height: 1;
}

.show-project-link:hover{
    font-family: Palco Bold;
    position: absolute;
    left: 15px;
    color: #6b6b6b; /* Text color */
    text-decoration: none; /* Remove underlines from the link */
    font-size: 25pt;
    font-weight: bold;
}
}

@media (max-width: 600px) {
.background-mobile p {
    padding-top: 15px;
    font-family: Palco Bold;
    font-size: 12.5pt; /* Set the font size for the text */
    line-height: 1.2; /* Set the line height for better readability */
    color: #ffffff; /* Set the text color */
    margin-left: 15px;
    margin-right: 15px;
}
}

@media (min-width: 600px) {
    .background-mobile p {
        display: none; /* Show the <p> element */
    }
}

@media (min-width: 600px) {
    .background-contact-mobile  {
        display: none; /* Show the <p> element */
    }
}
    
.loader {
    /* Add your styling for the loading element */
    display: block;
}