@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet');

*{
    /* font-family: 'Times New Roman', Times, serif;
    font-size: 1.05em;
    font-weight: lighter;
    line-height: 1.2; */

    font-family: "Roboto Mono", monospace;
    line-height:1.7em;
    color: rgb(60, 129, 146);

}

p {
    font-family: "PT Sans", sans-serif;
    font-weight:500;
    line-height: 1.4em;
    color: rgb(60, 129, 146);
}


/* Font */
h1{
 font-size: 2.3em;
 /* margin:0; */
}

h4{
 font-size: 0.9em;
}

h6{
font-size:0.75em;
color: rgb(60, 129, 146);
font-weight: normal;
line-height:1.6em;
/* margin:0; */
background-color: transparent;
}

.flex{
display:flex;
justify-content: space-between;
align-items: baseline;
}

.border{
    border-bottom: 1.5px dotted #dedede;
}

/* Link */
a:link {
color:grey;
}

a:hover {
color: grey;
text-decoration: none;
}

a:active {
    color:black;
}

a:visited {
    color:grey;
}



body {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #ffffff;
}

/* layout */
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Allow items to wrap if needed */
    justify-content: flex-start; /* Align columns horizontally */
    align-items: flex-start; /* Align items to the top */
    gap: 0px; 
    width: 100%; /* Full width container */
}

.column_smallsmall{
    flex: 1;
}

.column_small {
    position: sticky;
    top: 0;
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    padding:0px 40px 0px 70px;

    scrollbar-width: none; 
    -ms-overflow-style: none;
}

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

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

.column {
    flex: 5.1 ;
    display:grid;
    justify-content: center;
    align-items: center;

    padding: 10px; 
    overflow-y: auto; 
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

.column-left {
    flex: 5.1 ;
    display:grid;
    justify-content: left;
    align-items: left;

    padding: 10px; 
    overflow-y: auto; 
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

.column_text {
    padding:0px 5% 0px 5%;
}

.linear-layout {
    padding:60px 200px 130px 130px;
    min-height: 100vh;
    text-align: left;
    border-bottom: 1.5px dotted rgb(60, 129, 146);
    
}

.linear-layout h2 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.linear-layout img {
    width:100%;
    height: auto;
    margin-bottom: 5px;
}

.linear-layout p {
    font-size: 1rem;
    line-height: 1.5;
    padding-bottom: 0.5em;
    color: rgb(60, 129, 146);
}

.linear-layout a {
    font-size: 1rem;
}


/* Grid:Boxes */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* gap: 0px; */
    width: 100%;
    min-height: 100vh;
    /* max-width: 1200px; */
    
}


.grid2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* gap: 0px; */
    width: 100%;
    height: 95vh;
    padding-top: 20%;
    /* top:0; */
    /* z-index: 3000; */
    /* max-width: 1200px; */

    position: relative;
    background-color: transparent; /* Default background color */
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;

    
}
.grid-item2.active .blur-image {
    filter: blur(0);
    opacity: 1;
    /* Optionally change the background color */
    background-color: rgba(0, 0, 0, 0.6); /* Example background */
    transition: background-color 0.3s ease-in-out;
}

.grid-item,
.grid-item2 {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #ffffff;
    border: 0.5px solid rgb(60, 129, 146);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px; 
    box-sizing: border-box; 
}

.grid-item img,
.grid-item2 img {
    max-width: 100%;
    height: auto;
    margin-bottom: 5px; /* space between image and text */
    object-fit: contain; /* keeps the image proportions */
}


.grid-item .overlay,
.grid-item2 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.943);
    /* mix-blend-mode:exclusion; */
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    
}

.grid-item:hover .overlay,
.grid-item2:hover .overlay {
    opacity: 1;
}

.grid-item .overlay a,
.grid-item2 .overlay a {
    pointer-events: auto;
    color: rgb(60, 129, 146);
    text-decoration: none;
    font-size: 1em;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.grid-item .overlay a:hover,
.grid-item2 .overlay a:hover {
    text-decoration: underline;
    color: rgb(0, 0, 0); /* Example: Change link color on hover */
}

/* Setting */
mark{
    background-color: rgba(255, 255, 255, 0);
    color: rgb(60, 129, 146);
    font-weight: normal;
    font-size: 0.8em;
}

/* Home: Link Text */
.center{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    color:rgb(0, 0, 0);
}

.center a {
    color: grey; /* Default link color */
    text-decoration:underline; /* Remove underline by default */
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

.center a:hover {
    color: #000000; /* Change link color on hover */
    text-decoration: none;
}


/* blur:effects */
.blur-image {
    filter: blur(5px);
    opacity: 0.8;
    transition: filter 0.1s ease, opacity 0.5s ease;
}

/* Revealed state for the image on hover */
.grid-item:hover .blur-image {
    filter: blur(0);
    opacity: 1;
    transition-delay: 0s; /* No delay for unblurring the image */
}

/* Hide overlay by default */
.overlay {
    opacity: 0;
    transition: opacity 0.5s ease;
    /* transition-delay: 0s;  */
    pointer-events: none; /* Avoid interaction with hidden text */
}

/* Show overlay on hover */
.grid-item:hover .overlay {
    opacity: 1;
    /* transition-delay: 0.8s;  */
}


/* sliders */


/* Main image container */
.main-image-container {
    width: 100%;
    height:auto;
    text-align: center;
}

/* Thumbnail gallery */
.image-gallery {
    display: flex;
    justify-content: start; /* Align thumbnails to the left */
    overflow-x: auto; /* Enable horizontal scrolling */
    width: 100%;
    gap: 10px;
}

/* Hide scrollbar in Webkit browsers (Chrome, Safari, etc.) */
.image-gallery::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar in Firefox */
.image-gallery {
    scrollbar-width: none; /* For Firefox */
}

/* Style for thumbnails */
img.thumbnail{
    width: 15.6%;  /* Small fixed size for thumbnails */
    height: auto;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
    opacity: 25%;
}

.thumbnail:hover {
   opacity: 100%;
}

/* Highlight selected thumbnail */
.selected-thumbnail {
    opacity: 1 !important;  /* Set the opacity to 100% for the selected thumbnail */
    /* border: 2px solid #ffffff; */
}

/* Custom Cursor */
#main-image-container {
    pointer-events: none;
    cursor: none; /* Hide default cursor */
}

#main-image-container {
    position: relative; /* Ensure proper positioning */
    z-index: 10; /* Ensure it's above other elements if needed */
}

  



/* Responsive Design */
@media (max-width: 1200px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .row{
        display:grid;
    }

    .column_small{
        display: none;
    }

    .grid2 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* gap: 0px; */
        width: 100%;
        height: 20vh;
        padding-top: 7%;
        /* top:0; */
        /* z-index: 3000; */
        /* max-width: 1200px; */
    
        position: relative;
        background-color: transparent; /* Default background color */
        transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
      }

      .linear-layout {
        padding:70px;
        top:0;
        min-height: 0vh;
        text-align: left;
        border-bottom: 1.5px dotted rgb(60, 129, 146);
        
    }
}

@media (max-width: 992px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 576px) {
    .grid {
        grid-template-columns: 1fr;
    }
}