/*====================================*
  FADE-IN ANIMATIONS ON PAGE LOAD
 *====================================*/
@-webkit-keyframes fadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes fadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}

.PrPageTitle, .ProjSlider-Container, .ProjSlider-Containermob{
    opacity:0;  /* make things invisible upon start */
    -webkit-animation: fadeIn 1s ease-in;
    animation: fadeIn  1s  ease-in;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode:forwards;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

/*====================================*
Header Line Decoration
 *====================================*/
.line{
    width: 300px;
    height: 2px;
    background: rgba(0, 253, 219);
    transition: width 1.5s .1s ease;
    margin-bottom: 2%;
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) {
    
   .line {
    margin-top: 1em; 
    margin-bottom: 1em;/* adjust for breathing room */
    }
  }
/*====================================*
  PAGE TITLE & SUBTITLE
 *====================================*/
.PrPageTitle{
    width:85%;
    margin:3% auto;
    padding-right:6%;
    float:right;
    text-align:left;
    }
    @media screen and (max-width: 800px){
        .PrPageTitle{
            float:none;
            width:90%;
            margin:6% auto;
            padding-right:1%;
    }
    }
.ProjectsH1,.ProjectsH2  {
    font-size:3vw;
    font-weight:100;
    }
    @media screen and (max-width: 1280px){
        .ProjectsH1,.ProjectsH2{
            font-size:4vw;
    }
    }
    @media screen and (max-width: 800px){
        .ProjectsH1,.ProjectsH2  {
            font-size:4vw; 
    }
    }
    @media screen and (max-width: 600px){
        .ProjectsH1,.ProjectsH2  {
            font-size:6vw; 
    }
    }

    @media screen and (max-width: 450px){
        .ProjectsH1,.ProjectsH2  {
            font-size:7vw; 
    }
    }


/* === TItle === */
.ProjectsH1 {
  opacity: 0;
  animation: slideFadeIn 1s ease-out forwards;
  animation-delay: 0.5s;
}

.ProjectsH1 {
  white-space: nowrap; /* default behavior: one line */
  margin: 0;
}

/* subtitle default */
.ProjectSubtitle {
  color: grey;
  font-size: 0.65em;
  vertical-align: middle;
  margin: 0 0.2em;
  white-space: nowrap;
}

/* on small screens, break the line */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) {
    
  .ProjectsH1 {
    white-space: normal;
  }

  .ProjectSubtitle {
    display: block;
    margin-top: 0.3em;
    margin-left: 0;
    white-space: normal;
  }

  }

@media screen and (max-width: 600px) {
  .ProjectsH1 {
    white-space: normal;
  }

  .ProjectSubtitle {
    display: block;
    margin-top: 0.3em;
    margin-left: 0; /* align with CALLISTÓ */
    white-space: normal;
    font-size: 1em;
  }
}
/* Slide-in Animation for Title */
@keyframes slideFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*====================================*
  SLIDER
 *====================================*/
.ProjSlider-Container, .TheProject{
    display:block;
    
}
.ProjSlider-Containermob{
    display:none;
}


@media screen and (max-width: 600px){
    .ProjSlider-Container{
        display:none;
    }
    .ProjSlider-Containermob{
        display:block;
    }
    }
/*====================================*
  SLIDER NAVIGATION BUTTONS
 *====================================*/
button {
    margin: 0em;
    font: 100 13.3333px Sulphur Point;
    padding: 0;
    border-width: 0;
    background-color:rgb(61, 61, 61);
    -webkit-transition: background-color .3s ease-out;
    -moz-transition: background-color .3s ease-out;
    -o-transition: background-color .3s ease-out;
    transition: background-color .3s ease-out;
}
    button:hover{
        background-color:aquamarine;
        cursor:pointer;
    }
    .button-right, .button-left{
        width:60px;
        height:60px;
        color:rgb(161, 161, 161);
        margin-top:14%;   
    }
    .button-right:active, .button-left:active, .button-right:focus, .button-left:focus{
        background-color:rgb(69, 238, 182);
        border:none;
        outline:none;
    }
        @media screen and (max-width: 800px){
            .button-right, .button-left {
                position:absolute;
                top:70%;
                z-index:100;
                }
            .button-left {
                left:70px;  
                }
                .button-right{
                    margin-left:0;
                }
                }


/*====================================*
  SLIDES
 *====================================*/

.mySlides, .mySlidesmob{
   float: right;
  width: 85%; /* or whatever width you like */

    }
    @media screen and (max-width: 800px){
        .mySlides, .mySlidesmob{
            width:100%;
            position:relative;
    }
    }

/* Individual Slide Items 
  
  .mySlides {
    display: none;
  }*/
/*///////HEADER END//////////*/



/* === TItle Description === */
.Projectsp{
    font-size:1.1vw;
    color:grey
}
    @media screen and (max-width: 1366px){
        .Projectsp{
            font-size:2.0vw;  
            line-height: 1.3em;
    }
    }

    /* === iPad 11 Portrait View Adjustments === */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) {

  /* Text improvements */
  .Projectsp {
    font-size: 2.3vw;
    line-height: 1.6em;
  }
}
    @media screen and (max-width: 800px){
        .Projectsp{
            font-size:2.4vw;  

            font-weight:100;
    }
    }
    @media screen and (max-width: 600px){
        .Projectsp{
            font-size:3.8vw;  
    }
    }

    @media screen and (max-width: 450px){
        .Projectsp{
            font-size:5vw;  
    }
    }

/* === Project Description Section === */

.TheProject{
  width:70%;
  margin:0 auto;
  padding-top:5%;
}

    @media screen and (max-width: 1025px){
        .TheProject{
  width:90%;
    }
    }
.ProjectsH2{
    text-align:center;
    margin-bottom:3%;
    }

    @media screen and (max-width: 800px){
        .ProjectsH2{
            margin-top:5%;
    }
    }


.description{
  padding:2% 0;
  text-align: justify;
  text-align-last: center;
  line-height: 1.8em;
}


    @media screen and (max-width: 800px){
      .description{
        text-align: left;
        text-align-last: left;
        padding-bottom:5%;
    }
    }
.item{
  text-align:left;
  background-color:rgb(246, 244, 239);
  padding:2em;
  color:rgb(54, 54, 54)
} 

.list_Grid{
 /* display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:1em;*/
  display:flex;
  gap:1em;
  flex-wrap:wrap;
}

.list_Grid > *{
  flex-grow: 1;
  flex-basis:25%;
}
/* ========================================
   SECTION 1: SMALL GRID STYLING
======================================== */

#SMALL-GRID{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-gap:40px;
    width:70%;
    margin:3% auto;
    }

  @media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {

  /* === First Grid (SMALL-GRID) === */
  #SMALL-GRID {
    grid-gap: 8px;
  }
}

    @media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) {

  #SMALL-GRID {
    grid-gap: 6px;
    width: 80%;
  }
}

    @media screen and (max-width: 1025px){
        #SMALL-GRID{
        grid-gap:10px;
        width:90%;
        }
        }
        @media screen and (max-width: 600px){
            #SMALL-GRID{
                grid-template-columns:repeat(2,1fr);
            }
            }
            @media screen and (max-width: 450px){
                #SMALL-GRID{
                    grid-template-columns:repeat(2,1fr);
                margin:0 auto;
                }
                }

   /* ========================================
   SECTION 2: SMALL GRID THUMBNAILS
======================================== */         
.SMALL-GRID-THUBS{
    background:white;
}
.SMALL-GRID-THUBS img{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.8;
    -webkit-transition: filter .3s ease-out;
    -moz-transition: filter .3s ease-out;
    -o-transition: filter .3s ease-out;
    transition: filter .3s ease-out;
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    filter: contrast(150%) brightness(100%) grayscale(20%);
    }

    .SMALL-GRID-THUBS img:hover{
    opacity:1;
    cursor:pointer;
    filter: none;
    }

    @media only screen 
    and (min-device-width: 1024px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) { 
    .SMALL-GRID-THUBS {
        padding: 2px;
      }
    }

      @media only screen 
      and (min-device-width: 834px) 
      and (max-device-width: 834px) 
      and (orientation: portrait) {
      .SMALL-GRID-THUBS {
        padding: 2px;
      }
    }

    @media screen and (max-width: 800px){
        .SMALL-GRID-THUBS img{
            opacity:1;
        }
        }


/* ========================================
   SECTION 3: SCROLL RESTORE ANCHOR
   (for returning to grid after image close)
======================================== */
#RE-grid-Target{
    height:100px;
    width:100%;
}
@media screen and (max-width: 1120px){
    #RE-grid-Target{
        height:20px;
        width:100%;
    }
}
@media screen and (max-width: 800px){
    #RE-grid-Target{
        height:50px;
        width:100%;
    }
}

/* ========================================
   SECTION 4: INNER GRID CONTAINER
======================================== */
#Inner{
display:grid;
grid-template-columns:repeat(4,1fr);
grid-gap:30px;
width:70%;
margin:0% auto;
}



  @media screen and (max-width: 1025px){
  #Inner{
    width:90%;
      grid-gap: 6px;
      margin-bottom:5%;
      }
      }
    @media screen and (max-width: 600px){
         #Inner{
            grid-template-columns:repeat(2,1fr);
        }
        }
        @media screen and (max-width: 450px){
             #Inner{
                grid-template-columns:repeat(2,1fr);
            margin:0 auto;
            }
            }
        
/* ========================================
   SECTION 5: INNER GRID IMAGES
======================================== */
.Innerimg img{
width:100%;
height:100%;
object-fit:cover;
opacity:.8;
transition: opacity .3s ease-out;
}
@media screen and (max-width: 800px){
    .Innerimg img{
        opacity:1;
    }
    }

.Innerimg img:hover{
opacity:1;
cursor:pointer;
filter: none;
}

/* ========================================
   SECTION 6: GRID IMAGE PLACEMENT
   (LARGE SCREEN ONLY)
======================================== */
#first{
grid-column: 1 / 3;
grid-row:1/3;
}
#second{
grid-column: 3 / 4;
grid-row:1/2;
}
#third{
grid-column: 4 / 5;
grid-row:1/2;
}
#fourth{
grid-column: 3 / 4;
grid-row:2/3;
}
#fifth{
grid-column: 4 / 5;
grid-row:2/3;
}

/* Responsive rearrangement for small screens */
@media screen and (max-width: 600px){
    #first{
        grid-column: 1 / 3;
        grid-row:1/2;
        }
    #second{
    grid-column: 1 / 2;
    grid-row:2/3;
    }
    #third{
    grid-column: 2 / 3;
    grid-row:2/3;
    }
    #fourth{
    grid-column: 1 / 2;
    grid-row:3/4;
    }
    #fifth{
    grid-column: 2 / 3;
    grid-row:3/4;
}
}
/* ========================================
   SECTION 7: BOTTOM PAGE NAVIGATION BUTTONS
   Sticky buttons for navigating between projects
======================================== */
  
/* Main Button Styling */
#PRJ-button{
    background-color: rgba(246, 244, 239, 0.9);
    width:5vw;
    height:5vw;
    z-index: 9999;
    border-style: none;
  }
  #PRJ-button:hover{
    background-color:var(--background);
  }

  /* Container for the buttons (flex and sticky position) */
  #PG-Buttons{
    display:flex;
    position:sticky;
    bottom: 0;
    right:0;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 1px;
    padding-right:0;
  }

/* ---------- RESPONSIVE STYLES ---------- */

/* Screens <= 1536px */
@media screen and (max-width: 1536px){
    #PRJ-button {
        width:7vw;
        height:7vw;
  }
}

/* Screens <= 1024px */
@media screen and (max-width: 1024px){
    #PRJ-button {
        width:10vw;
        height:10vw;
  }
}

/* Screens <= 768px */
@media screen and (max-width: 768px){
    #PRJ-button {
        width:12vw;
        height:12vw;
  }
  #PRJ-button p{
    font-size:12px;

  }
}

/* Screens <= 600px */
@media screen and (max-width: 600px){
    #PRJ-button {
        width:11vw;
        height:10vw; 
        margin:0;              
    }
    #PRJ-button p{
        font-size:11px;  
    }
    #PG-Buttons{
        bottom: 0;
        right:0;
    }
}

/* Screens <= 414px */
@media screen and (max-width: 414px){
    #PRJ-button {
        width:16vw; 
    }
    #PRJ-button p{
        font-size:9px;  
    }
    #PG-Buttons{
        gap: 0;
        padding-right:0;
    }
}




/* ========================================
   SECTION 8: MODAL CAROUSEL STYLING
   Fullscreen image viewer with navigation
======================================== */

/* Modal Background Overlay */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #f6f6f6;
  }
  
/* Modal Content (Carousel Container) */
  .modal-content {
    position: relative;
     background-color: rgba(253, 253, 253, 0.5); /* Corrected from invalid value */
    margin: auto;
    padding: 0;
    padding-bottom:20px;
    width: 90%;
    aspect-ratio:4/3;
    max-width: 1200px;
  }
  
 /* Close Button (X) */
  .close {
    color: black;
    background-color:white;
    position: absolute;
    top: 50px;
    right: 450px;
    height: 5vw;
    width: 5vw;   
    font-size: 35px;
    font-weight: bold;
    text-align:center;
    line-height:5vw;
    z-index:1500;
  }

    .close:hover,
  .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
  }

  /* Responsive Close Button Positioning */
  @media screen and (max-width: 1920px){
    .close {
        top: 50px;
        right: 20%;
  }
}

@media screen and (max-width: 1668px){
    .close {
        right: 15%;
  }
}

@media screen and (max-width: 1536px){
    .close {
        right: 8%;
        top: 30px;
  }
}

@media screen and (max-width: 600px){
    .close {
        height: 11vw;
        width: 11vw; 
        line-height:11vw;
  }
}
@media screen and (max-width: 414px){
    .close {
        height: 10vw;
        width: 10vw; 
        line-height:10vw;
  }
}

@media screen and (max-width: 315px){
    .close {
        height: 15vw;
        width: 15vw; 
        line-height:15vw;
        top: 25px;       
  }
}


  
/* Add cursor pointer on hoverable items */
  .cursor {
    cursor: pointer;
  }
  
/* ========================================
   SECTION 9: SLIDE NAVIGATION ARROWS
======================================== */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: rgb(43, 43, 43);
    background-color:rgba(253, 253, 253, 0.5);
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  
 /* Position the "next" button on the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(253, 253, 253, 0.8);
  }
  
/* ========================================
   SECTION 10: SLIDE NUMBER OVERLAY
======================================== */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  

  /* Reset image spacing in modal */
  img {
    margin-bottom: -4px;
  }