.imagery {

  position: relative;
  width: 100%;
  height: auto;
  min-height: 35rem;

  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;


}

.intro{
  
 background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(18, 66, 101, 0.5) 80%, rgba(255, 255, 255, 0.5) 100%), url("../img/optimised/reinebringen-9710168.webp");
  background-color: white;

}



.ccsIMAGE {
  height: 100vh !important;
  color: white;
  background:linear-gradient(20deg, rgb(0, 0, 0) 0%,  rgba(0, 0, 0, 0.726) 25%, rgba(0, 0, 0, 0.164) 45%,transparent 100%), url("../img/optimised/ccslandscape.webp") no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: flex-end; /* Align children to the bottom */
  padding-bottom: 3rem; /* 2rem from bottom */
}


.imigarytext {
  width: 100%;
}

.daccsIMAGE {
  height: 100vh !important;
  color: white;
  background:linear-gradient(20deg, rgb(0, 0, 0) 0%,  rgba(0, 0, 0, 0.726) 25%, rgba(0, 0, 0, 0.164) 45%,transparent 100%), url("../img/optimised/ccsplant.webp") no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: flex-end; /* Align children to the bottom */
  padding-bottom: 3rem; /* 2rem from bottom */
}

.bccsIMAGE{
          height: 100vh !important;
  color: white;
  background:linear-gradient(20deg, rgb(0, 0, 0) 0%,  rgba(0, 0, 0, 0.726) 25%, rgba(0, 0, 0, 0.164) 45%,transparent 100%), url("../img/optimised/SEIZEDbccs.webp") no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: flex-end; /* Align children to the bottom */
  padding-bottom: 3rem; /* 2rem from bottom */
}

.nsIMAGE{
       height: 100vh !important;
  color: white;
  background:linear-gradient(20deg, rgb(0, 0, 0) 0%,  rgba(0, 0, 0, 0.726) 25%, rgba(0, 0, 0, 0.164) 45%,transparent 100%), url("../img/optimised/SEIZEDns.webp") no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: flex-end; /* Align children to the bottom */
  padding-bottom: 3rem; /* 2rem from bottom */
}


@media (max-width:600px) {
  .ccsIMAGE {
   background:linear-gradient(22deg, rgb(0, 0, 0) 0%,  rgba(0, 0, 0, 0.726) 25%, rgba(0, 0, 0, 0.164) 45%,transparent 100%), url("../img/optimised/horizontalcsslandscape.webp") no-repeat center center;
  }

.daccsIMAGE {
 background:linear-gradient(0deg, rgb(0, 0, 0) 0%,  rgba(0, 0, 0, 0.726) 50%, transparent 100%), url("../img/optimised/horizontalcssplant.webp") no-repeat center center;
  }

.bccsIMAGE{
   background:linear-gradient(20deg, rgb(0, 0, 0) 0%,  rgba(0, 0, 0, 0.726) 25%, rgba(0, 0, 0, 0.164) 45%,transparent 100%), url("../img/optimised/horizontalLake.webp") no-repeat center center;
}


  .nsIMAGE{
      background:linear-gradient(20deg, rgb(0, 0, 0) 0%,  rgba(0, 0, 0, 0.726) 25%, rgba(0, 0, 0, 0.164) 45%,transparent 100%), url("../img/optimised/horizontalforest.webp") no-repeat center center; 
  }

}

  .glass {
    background: rgba(255, 255, 255, 0.1); /* transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* for Safari support */
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    
   
  }


.glassIMG{
   border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.blue-glass{

    background: rgba(18, 66, 101, 0.2); /* transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* for Safari support */
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  
    color: white;
  
}

.dark-glass{

    background: rgba(255, 255, 255, 0.1); /* transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* for Safari support */
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    color: white;
  
}
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
  z-index: 10000;
}
.bottom-left a{

  color: white; /* This color will invert via blending */
  mix-blend-mode: difference;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.top-right a{

  color: white; /* This color will invert via blending */
  mix-blend-mode: difference;
}


.differencemode{
    color: white; /* This color will invert via blending */
  mix-blend-mode: difference;
}

/* 16:9 IMAGE WIDE */


  .responsive-image-wrapper {
    position: relative;
    overflow: hidden;
  }

  /* Default: e.g. fluid square */
  .responsive-image-wrapper::before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 aspect ratio */
  }


  .responsive-image-wrapper2 {
    position: relative;
    overflow: hidden;
  }

  /* Default: e.g. fluid square */
  .responsive-image-wrapper2::before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 aspect ratio */
  }


    .responsive-image-wrapper3 {
    position: relative;
    overflow: hidden;
  }

  /* Default: e.g. fluid square */
  .responsive-image-wrapper3::before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 aspect ratio */
  }




  /* md: 4:5 aspect ratio */
  @media (min-width: 768px) {
    .responsive-image-wrapper::before {
      padding-top: 125%; /* 4:5 */
    }

      .responsive-image-wrapper2::before{
        padding-top:125%; /* 4:5 */
      }

        /* Default: e.g. fluid square */
  .responsive-image-wrapper3::before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 aspect ratio */
  }

  }

  /* lg: 16:9 aspect ratio */
  @media (min-width: 992px) {
    .responsive-image-wrapper::before {
      padding-top: 56.25%; /* 16:9 */
    }

  .responsive-image-wrapper2::before {
      padding-top: 80.25%; /* 16:9 */      
    }    

      /* Default: e.g. fluid square */
  .responsive-image-wrapper3::before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 aspect ratio */
  }

  }

  .responsive-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
   
  }

    .responsive-image-wrapper2 img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;   
  }

   .responsive-image-wrapper3 img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;   
  }

/* 9:16 TALL AND THIN */

.responsive-image-tall {
  position: relative;
  overflow: hidden;
}

/* Default (xs to md): 5:4 aspect ratio */
.responsive-image-tall::before {
  content: "";
  display: block;
  padding-top: 80%; /* 5:4 aspect ratio */
}

@media (max-width: 1399px) {
  .responsive-image-tall::before {
  content: "";
  display: block;
  padding-top: 120%; /* 5:4 aspect ratio */
}

}


@media (max-width: 1188px) {
  .responsive-image-tall::before {
  content: "";
  display: block;
  padding-top: 180%; /* 5:4 aspect ratio */
}

}


@media (max-width: 992px) {
  .responsive-image-tall::before {
  content: "";
  display: block;
  padding-top: 80%; /* 5:4 aspect ratio */
}

}



/* lg and up: 9:16 aspect ratio */

.responsive-image-tall img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}




  .parallax {

  /* Set a specific height */
  min-height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}