@charset "utf-8";



.header {
    overflow: hidden; /* To hide parts of images that go beyond the container */
    position: relative; /* To properly align the image-container */
}

.image-container {
    display: flex; /* This will arrange the images side by side */
    width: 118%; /* This will "zoom in" the images */
    position: relative; /* Required to move the image-container to the left */
    left: -10%; /* Move the image-container to the left */
}



.image-container .img-slide img {
    display: none;
    width: 100%;
    object-fit: cover;
    border-right: 3px solid white;  /* Add a border to the right side of each image */
}

.image-container .img-slide img:last-child {
    border-right: none; /* Remove border from the last image to prevent double border */
}


.image-container .img-slide img:first-child {
    display: block;
}

.image-container img {
    width: calc(100% / 6); /* This will distribute the images equally within the container */
    object-fit: cover; /* This will ensure images cover their whole area */
}

.skew {
    transform: skew(-12deg);
}




.splash-image::before,
.splash-image::after {
    content: '';
    position: absolute;
    top: 0;
    width: 15%; /* Adjust the width of the gradient */
    height: 100%;
    background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
    z-index: 1;
    pointer-events: none; /* Allow clicks to pass through */
}

.splash-image::after {
    right: 0;
    background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
}

.splash-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 227px;
    margin: 0 auto;
    box-sizing: border-box;
    background-image: url('splash-image.jpg');
    background-size: auto 100%; /* Ensure the image maintains its aspect ratio */
    background-repeat: repeat-x; /* Repeat the image horizontally */
    animation: moveBackground var(--animation-duration) linear infinite;
}
@keyframes moveBackground {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.table-container {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
  background-color: #025677;
  font-size: 20px;
  font-weight: lighter;
  cursor: pointer;
  border: none;
  margin: 0;
  padding: 0;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.table-cell:hover {
  background-color: #00aff4;
}

.table-cell a {
  color: white;
  text-decoration: none;
  font-family: Arial;
  display: inline-block;
}

.table-cell a:link,
.table-cell a:visited,
.table-cell a:active {
  color: white;
}

.table-cell img {
  max-width: 100%;
  height: auto;
}

.table-cell.left-cell {
  text-align: center;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.table-cell.right-cell {
  text-align: center;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.left-cell {
  margin-right: 0px;
}

.right-cell {
  margin-left: 0px;
}


img {
  display: block;
}

html, body {
  font-family: Montserrat, Verdana, Geneva, sans-serif;
  background-color: #fff;
  margin: 0;
  width: 100%;
    overflow-x: hidden;
}

#tsc_player {
  z-index: 9999;  
}

.glowing-link {
  display: inline-block;
  position: relative;
}

.glowing-link img {
  width: 100%;
}

.glowing-link span {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 4px solid black;
  box-shadow: inset 0 0 55px #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.glowing-link:hover span {
  opacity: 1;
}




.grid-container {
  display: flex;
  flex-wrap: wrap;
  z-index: 1; 
  justify-content: center;
  align-items: center;
  background-image: url('tradart_backdrop.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin: 0;
}

.grid-frame {
  transform: skew(-12deg);
  min-width: 200px;
  min-height: 120px;
  overflow: hidden;
  border: 3px solid #000;
}

.grid-item-img {
  position: absolute;
  filter: grayscale(100%);
  width: 100%;
  height: auto;
  transform: scale(1);
  transform-origin: middle;
}

.grid-item-img:hover {
  filter: none;
  transform: scale(1.1);
  transition: transform 1s ease-in-out, transform-origin 2s ease-in-out, top 2s ease-in-out;
}

.grid-item:hover {
  z-index: 2;
}


#animation {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.banner-text {
  font-size: 1.5em;
  position: absolute;
  width: 100%;
  height: auto;
  color: white;
  text-align: center;
  z-index: 2;
  margin: 0;
  bottom: 0; 
  padding: 10px;
  text-transform: uppercase;
}

#banner-container {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
}

.banner-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.p2 {
  font-size: 15px;
  color: gray;
}

.header-image {
  width: 100%;
  background-size: cover; 
  position: relative;
  top: 0;
  box-sizing: border-box;
}
h1 {
  font-weight: lighter;
  font-size: 65px;
  margin-bottom: 0;
}

h2 {
  font-weight: normal;
  font-style: italic;
}

a {
  color: gray;
}



.button-container {
  width: 100%;
  margin-left: 15%;
  z-index: 1; 
  position: relative;
  bottom: 50px;
}

.img-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 110px;
  align-self: flex-end;
  margin-top: 20px;
  margin-bottom: 20px;
}

.img-container{
  display: flex;
  justify-content: flex-end;
}



.parallax {
  background-image: url('background2.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: right;
}



  .img-container img {
    align-self: center;
  }

  .banner-text {
    font-size: 1.1em;
  }
  

.container {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.row {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.img-container,
.text-content {
  width: 100%;
}

.img-container.col-3 {
  padding: 20px;
}

.text-content {
  margin-left: 20px;
  margin-right: 20px;
}

@media (min-width: 767px) {
  .row {
    flex-direction: row;
  }

  .col-1, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex: 0 0 30%;
    max-width: 30%;
    margin: 20px;
  }

  .col-2 {
    flex: 0 0 50%;
    max-width: 45%;
    margin: 20px;
  }
  
  .text-content {
  margin-left: 20px;
  margin-right: 20px;
}
}





.container.projectshowcase {
  display: flex;
  flex-direction: row; /* Ensure horizontal alignment by default */
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap; /* Prevent stacking on larger screens */
  gap: 20px;
  padding: 40px;
}

.container.projectshowcase .image-left,
.container.projectshowcase .image-right {
  flex: 1; /* Equal distribution */
  max-width: 20%; /* Restrict image width */
}

.container.projectshowcase .image-left img,
.container.projectshowcase .image-right img {
  width: 100%; /* Scale images correctly */
  border-radius: 10px;
}

.container.projectshowcase .text-content {
  flex: 2; /* Allocate more space for text */
  max-width: 90%;
  text-align: left;
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  .container.projectshowcase {
    flex-direction: column; /* Stack vertically */
    flex-wrap: wrap;
    text-align: center; /* Center-align text */
  }

  .container.projectshowcase .image-left,
  .container.projectshowcase .image-right,
  .container.projectshowcase .text-content {
    flex: 1 1 100%; /* Make sections full-width */
    max-width: 100%; /* Remove width restrictions */
  }

  .container.projectshowcase .text-content {
    text-align: center; /* Center-align for better appearance */
  }
}




.image-right {
    width: 100%;
    height: auto; /* Or a fixed height */
    max-width: 500px; /* Adjust as needed */
    position: relative;
}











@media (max-width: 767px) {
	
  .grid-container {
    display: none;
  }
  
    .banner-container {
    display: none;
  }
  

  .img-container img {
    border-radius: 0;
  }
  
  .img-container,
  .img-container.col-3 {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .row {
    flex-direction: column;
  }

  .col-1,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    flex: 1 0 100%;
    max-width: 100%;
    margin: 0;
  }

  .col-2 {
    flex: 1 0 100%;
    max-width: 100%;
    margin: 0;
  }
  
  .container {
    padding-right: 20px;
    padding-left: 20px;
  }

  .text-wrapper {
    margin-right: 20px;
    margin-left: 20px;
  }

}