/* Global Styles and Imports */
@import url("https://www.w3schools.com/w3css/4/w3.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("https://api.fonts.coollabs.io/css2?family=Lato&display=swap");

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", sans-serif;
}

body,
main {
  color: #777;
  line-height: 1.8;
}

h3 {
  font-weight: bold;
}

/* Base W3 Overrides & Utilities */
.w3-wide {
  letter-spacing: 10px;
}

.w3-hover-opacity {
  cursor: pointer;
}

/* Parallax Effect */
.bgimg-1,
.bgimg-2,
.bgimg-3,
.bgimg-4,
.bgimg-5 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Specific Images */
.bgimg-1 {
  background-image: url("img/Heraklion_Dalle_small.png");
  min-height: 100vh;
}

.bgimg-2 {
  background-image: url("img/Abstract_Dalle.jpg");
  min-height: 100vh;
}

.bgimg-3 {
  background-image: url("img/Munich_Dalle.png");
  min-height: 100vh;
}

.bgimg-4 {
  background-image: url("img/Heraklion_small_2.png");
  min-height: 100vh;
}

.bgimg-5 {
  background-image: url("img/imprint.png");
  min-height: 110vh;
}

/* Profile Image */
.selfimg {
  background-image: url("img/profile.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 500px;
  /* approximates the 50% height/width intent from original */
}

/* Partner Images */
.partner-image {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 300px;
}

.skad {
  background-image: url("img/SKAD.png");
}

.beyondbots {
  background-image: url("img/Beyondbots.png");
}

.okeanos {
  background-image: url("img/okeanos.png");
}

/* Carousel / Technology Icons */
.tech-icon {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 150px;
  display: block;
  margin: 0 auto;
}

/* Icon Specifics */
.other {
  background-image: url("img/other.png");
}

.svelte {
  background-image: url("img/svelte.png");
}

.fedex {
  background-image: url("img/fedextnt.jpg");
  background-size: cover;
}

.pega {
  background-image: url("img/pega.png");
}

.jumbo {
  background-image: url("img/jumbo.jpg");
  background-size: cover;
}

.scailable {
  background-image: url("img/scailable.png");
}

.jads {
  background-image: url("img/jads.png");
}

.ippen {
  background-image: url("img/ippen.jpg");
  background-size: cover;
}

.deta {
  background-image: url("img/deta.png");
}

.base {
  background-image: url("img/base.png");
}

.fastapi {
  background-image: url("img/fastapi.png");
}

.KIVerband {
  background-image: url("img/KIVerband.png");
}

.tf {
  background-image: url("img/tf.png");
}

.pytorch {
  background-image: url("img/pytorch.png");
}

.mongodb {
  background-image: url("img/mongodb.png");
}

.ecodia {
  background-image: url("img/ecodia.jfif");
}

.NLTK {
  background-image: url("img/NLTK.png");
}

.d3 {
  background-image: url("img/d3.png");
}

.sklearn {
  background-image: url("img/sklearn.png");
}

.jupyter {
  background-image: url("img/jupyter.png");
}

.pytest {
  background-image: url("img/pytest.png");
}

.github {
  background-image: url("img/github.png");
}

.openai {
  background-image: url("img/openai.png");
}

/* Section Spacing */
.section-spacing {
  padding-top: 32px;
  padding-bottom: 32px;
}

.extra-padding-bottom {
  padding-bottom: 96px;
}

/* Charts */
.chart-container {
  width: 100%;
  overflow: visible;
}

/* Responsive Turn off Parallax */
@media only screen and (max-device-width: 1200px) {

  .bgimg-1,
  .bgimg-2,
  .bgimg-3,
  .bgimg-4,
  .bgimg-5 {
    background-attachment: scroll;
    min-height: 400px;
  }
}

/* Helpers */
.w3-bar-item.active {
  background-color: #ccc;
  color: #000;
}

.hidden {
  display: none;
}

/* Carousel Improvements */
.carousel-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  background: white;
  /* Ensure content is readable on hover */
  position: relative;
  /* Stacking context */
  z-index: 1;
  overflow: visible;
  /* changed from hidden to visible so it can expand if needed, or controlled by max-height */
  border-radius: 8px;
  /* Optional polish */
  height: 100%;
  /* Fill the grid column */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Hover Effect: Pop and Expand */
.carousel-item:hover {
  transform: scale(1.05);
  z-index: 100;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  /* Expand logic: 
       If the container has a fixed height, we might need absolute positioning to break out?
       But user said "enlarge beautifully". 
       If we use absolute, we lose layout flow. 
       Let's try 'max-height' trick or 'position: absolute' overlay?
       For now, 'scale' + z-index is the 'pop'. 
       'Text cut off' is likely due to fixed height on parent or item.
       We will remove fixed heights in JS and let it flow, but constrain in CSS.
    */
}

.carousel-text-expanded {
  /* Optional class if we want to toggle explicit expansion logic */
}

/* Fade Transition Wrapper */
.carousel-fade-wrapper {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
  display: flex;
  justify-content: center;
  width: 100%;
}

.carousel-fade-out {
  opacity: 0;
}

/* Carousel Navigation */
.carousel-content-wrapper {
  position: relative;
  width: 100%;
  /* Ensure space for arrows if we want them inside or outside? 
       Design decision: Arrows absolute positioned on edges. 
    */
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 101;
  /* Above items */
  cursor: pointer;
  font-size: 24px;
  color: #555;
  background: rgba(255, 255, 255, 0.7);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  user-select: none;
}

.carousel-arrow:hover {
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  color: black;
  transform: translateY(-50%) scale(1.1);
}

.carousel-arrow-prev {
  left: -15px;
  /* Pull slightly outside */
}

.carousel-arrow-next {
  right: -15px;
  /* Pull slightly outside */
}

@media (max-width: 600px) {
  .carousel-arrow-prev {
    left: 0;
  }

  .carousel-arrow-next {
    right: 0;
  }
}