HTML, body {
  margin: 0px;
  padding: 0px;
  border: 0px;
}




body {
    font-family: 'Inter';
    font-size: 12px;
}

body {
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}


h0 {
  font-family: 'libre baskerville';
  font-size: 50px;
  font-weight: 600;
  color: #ffffff;
}


h1 {
  font-family: 'libre baskerville';
  font-size: 30px;
}

h2 {
  font-family: 'libre baskerville';
  font-size: 26px;
  padding-top: 40px;
  font-weight: 700;
}

#about-h2 {
  font-family: 'libre baskerville';
  font-size: 26px;
  padding-top: 0px;
  font-weight: 700;
}

h3 {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 600;
}

h4 {
  font-family: 'libre baskerville';
  margin-top: 60px;
  font-weight: 700;
  font-size: 20px;
}



#container {
  max-width: 1160px;
  margin: auto;
}

.two-columns {
  display: flex;
  margin-bottom: 80px;
}


nav {
  display: flex;
  justify-content: space-between; /* Spread the items evenly */
  padding: 20px;
  max-width: 1160px;
  margin: auto;
  padding-top: 40px;
  height: 30px;
}

nav div {
  display: flex;
  gap: 50px; /* Adjust the gap between items */
  align-items: center;
}

nav a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}

#contact-nav {
  border: 1px solid blue;
  color: blue;
  padding-top: 6px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 6px;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, padding-bottom 0.3s, margin-bottom 0.3s;

}

#contact-nav:hover {
  color: white;
  background-color: rgba(34, 81, 255, 1);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Adjust the shadow as needed */
}








#name-nav {
  font-size: 16px;
  font-weight: 600;
  text-decoration: none; /* Remove default underline */
  position: relative; /* Make sure pseudo-element is positioned relative to this */
}


#name-nav::after {
  content: ""; /* Required for pseudo-elements */
  position: absolute; /* Position the line */
  left: 0; /* Align the line to the left */
  bottom: -5px; /* Position the line just below the text */
  width: 100%; /* Make the line span the entire width */
  height: 1px; /* Set the height of the line */
  background-color: blue; /* Set the color of the line */
  visibility: hidden; /* Hide the line by default */
}

#name-nav:hover::after {
  visibility: visible; /* Make the line visible when hovered over */
}






#content {
  height: 500px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}





#footer {
  text-align: center;
  border-top: 1px solid black;
  padding-top: 20px;
  margin-bottom: 50px;
  height: auto;
}

footer div {
  margin-top: 0px;
}

footer a {
  color: rgb(53, 53, 53);
  text-decoration: none;
}




#footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#left-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#contact {
  padding-top: 20px;
}

#contact-div {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

#contact-p {
  font-weight: 600;
  margin:0px 15px 0px 0px;
  width: 40px;
  text-align: left;
}

.hover-links {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.hover-links:hover {
  opacity: 0.5;
  transform: translateX(5px);
}


#footer-icon {
  margin-right: 15px;
  width: 25px;
  height: 25px;
  transition: opacity 0.3s ease-in-out;
}

#footer-icon:hover {
  opacity: 0.5;
}


#right-footer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

#page-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 50px;
}

#page-links a {
  margin-bottom: 5px;
}





.header-section {
  padding-top: 100px;
  padding-bottom: 40px;
}

#centre-header {
  text-align: center;
}

.main-section {
  text-align: justify;
  padding-bottom: 50px;
  font-size: 14px;
}


.item-header-feature, .item-header {
  text-align: left;
  font-family: 'libre baskerville';
  font-weight: 700;
}


.para-header {
  padding-top: 20px;
}


#about-hero-image {
  width: 100%;
}

.top-banner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 100px;
  padding-bottom: 40px;
}




.main-section {
  flex: 1;
}

.main-section:last-child,
.two-columns:last-child {
  margin-right: 0; /* Remove margin on the last child element */
}

.right-align {
  width: 100%;
}

/* Additional styling for better visualization */
.top-banner {
  box-sizing: border-box;
}


.left-column {
  width: 70%;
  padding-right: 100px;
  text-align: justify;
}

.right-column {
  min-width: 30%;  
  max-width: 30%;

}


.left-column, .right-column {
  width: 100%;
}






.feature-article {
  display: flex;
  padding: 20px;
  transition: box-shadow 0.3s ease-in-out;
}

.feature-image {
  flex: 1;
  padding-right: 20px
}

.feature-image img {
  width: 100%;
  height: auto;
}

.feature-content {
  flex: 1;
  padding-left: 20px
}

.feature-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}






.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.full-width-row {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  padding-top: 10px;
  padding-bottom: 30px;
  background-color: #fff;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: auto;
}

.anchor {
  text-decoration: none !important;
}


.full-width-row .item-content {
  flex: 1;
  padding: 0;
}

.full-width-row .item-header {
  font-size: 20px;
  margin-bottom: 5px;
  text-decoration: none;
}

.full-width-row .item-header:hover {
  text-decoration: underline;
}

.full-width-row .item-description {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  text-decoration: none;
}

.full-width-row:hover .item-description {
  text-decoration: none !important;
}

.grid-item {
  padding: 20px;
  text-align: left;
  transition: box-shadow 0.3s ease-in-out;
  padding-bottom: 60px;
  height: 400px;
}

.grid-item-footer {
  padding: 20px;
  text-align: left;
  transition: box-shadow 0.3s ease-in-out;
  padding-bottom: 60px;
  height: 250px;
  margin-bottom: 50px;
}


.item-header {
  color: black; /* or your preferred text color */
  text-decoration: none; /* Remove default underline */
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  line-height: 140%;
  margin-bottom: 10px;
  font-family: 'libre baskerville';

}

.item-arrow {
  width: 15px;
  height: 15px;
  margin-left: 5px; /* Adjust the margin as needed */
  transition: margin-left 0.3s ease-in-out; /* Add transition for smooth movement */

}

.item-header:hover .item-arrow {
  margin-left: 7px; /* Adjust the value as needed */
}


.item-header:hover {
  color: rgba(34, 81, 255, 1); /* Text color on hover */
  text-decoration: underline; /* Underline on hover */
}



.item-header-feature {
  color: black; /* or your preferred text color */
  text-decoration: none; /* Remove default underline */
  cursor: pointer;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
}

.item-header-feature:hover {
  color: rgba(34, 81, 255, 1); /* Text color on hover */
  text-decoration: underline; /* Underline on hover */
}

.item-photo {
  max-width: 100%;
  height: auto;
}

.item-description {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0cap;
  line-height: 150%;
}

.item-tags {
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 13px;
  font-weight: 400;
}


/* Hover effect for grid items */
.grid-item:hover {
  box-shadow: 0 0 20px rgb(174, 174, 174);
}

/* Hover effect for grid items */
.grid-item-footer:hover {
  box-shadow: 0 0 20px rgb(174, 174, 174);
}

/* Hover effect for feature article */
.feature-article:hover {
  box-shadow: 0 0 20px rgb(174, 174, 174);
}



.section-break{
  border-top: 1px solid black;
  font-size: 14px;
  text-transform: uppercase;
  margin: 60px 20px 20px 20px;
  
}








.contact-div {
  height: 200px;
  background-color: #f0f0f0; /* Optional background color */
  align-items: center;
  justify-content: center;
}


.contact-text {
  margin: 0;
  padding: 0;
  font-size: 30px;
  font-weight: 700;
  font-family: 'libre baskerville';
}

.contact-button {
  padding: 15px 60px;
  border: 1px solid rgba(34, 81, 255, 1);
  color: rgba(34, 81, 255, 1);
  cursor: pointer;
  font-size: 16px;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, padding-bottom 0.3s, margin-bottom 0.3s;
}

.contact-button:hover {
  color: white;
  background-color: rgba(34, 81, 255, 1);
  padding-bottom: 13px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Adjust the shadow as needed */
}

.button-link {
  height: 50px;
}

.max-1160 {
  max-width: 1160px;
  padding-top: 80px;
  margin: auto;
  display: flex;
  align-items:center;
  justify-content: space-between; /* Adjusted for spacing */
}


.thumbnail {
  text-decoration: none;
  color: inherit;
}


.banner-div {
  margin-top: 20px;
  height: 500px;
  background: url('/projects/voyage.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#walze-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/walze.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#continuum3d-banner {
  margin-top: 20px;
  height: 500px;
  background: linear-gradient(rgb(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)),url('/assets/continuum3d.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#bites-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/bites.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#arc-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/arc.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#datro-banner {
  margin-top: 20px;
  height: 500px;
  background: linear-gradient(rgb(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('/assets/datro.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#clipski-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/clipski.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#rccar-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/rccar.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#ergoclean-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/ergoclean.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#ohme-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/ohme.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#spacebit-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/spacebit.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}


#roa-banner {
  margin-top: 20px;
  height: 500px;
  background:   url('/assets/emissions.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#rocket-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/rocket.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#music-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/music.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#solar-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/solar.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#trading-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/trading.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#airport-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/airport.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#germany-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/germany.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

#tandem-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/tandem.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#hero-banner {
  margin-top: 20px;
  height: 90vh;
  background: url('/projects/hero1.jpg');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#hero1-banner {
  margin-top: 20px;
  height: 90vh;
  background: url('/projects/hero2.jpg');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#automotive-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/automotive.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#balancing-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/balancing.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#robotics-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/robotics.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#caravan-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/caravan.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#mobile-banner {
  margin-top: 20px;
  height: 500px;
  background: url('/assets/mobile.png');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}







.gradient {
  background: linear-gradient(to bottom, transparent 0%, black 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}


#white {
  color: #ffffff;
  padding-top: 15px;
  padding-bottom: 60px;
}

#vertical {
  display: flex;
  flex-direction: column;
  align-items: start;
}



.article-para {
  margin: 50px 200px 50px 200px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.01cap;
  line-height: 150%;
}

#para-two {
  padding-top: 40px;
}

.article-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* Adjusted for spacing */
}


.authors {
  width: 50%;
  font-size: 15px;
  font-weight: 300;
  line-height: 160%;
  letter-spacing: 0cap;
}

.author-link {
  border-bottom: 1.5px solid black;
  text-decoration: none;
  color: black;
  transition: background-color 0.3s ease
}

.author-link:hover {
  background-color: black;
  color: #ffffff;
}


.article-icon {
  margin-left: 15px;
  height: 30px;
  max-width: 30px;
  transition: fill 0.3s; /* Smooth transition effect */
}
.copy-button:hover .article-icon circle,
.copy-button:hover .article-icon line {
    stroke: blue;
}
.copy-button:hover .article-icon path {
  fill: blue;
}


.article-download {
  margin-left: 15px;
  height: 30px;
  max-width: 60px;
  transition: fill 0.3s; /* Smooth transition effect */
}
.copy-button:hover .article-download path {
  fill: blue;
}
.copy-button:hover #download-lines {
  stroke: blue;
}

svg {
  padding: 0px;
  margin: 0px;
}


#popup {
  display: none;
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(34, 81, 255, 1);
  color: #fff;
  padding: 10px 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  width: fit-content;
}



#copyButton, #downloadButton {
  color: black;
  background-color: transparent;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer; /* Change cursor to pointer on hover */
  text-decoration: none;
}

a {
  color: black;
}




.banner {
  position: fixed;
  top: -60px; /* Start position above the viewport */
  left: 0;
  width: 100%;
  padding-top: 5px;
  height: auto; /* Adjust height of the banner */
  background-color: white; /* Adjust background color */
  border-bottom: 1px solid #b6b6b6;
  transition: top 0.5s; /* Add transition effect */
  z-index: 1000;

}

.banner.fixed {
  top: 0; /* Fix the banner at the top */
}


.scroll-indicator {
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px; /* Adjust height of the bar */
  background-color: blue; /* Adjust color of the bar */
  transition: width 0.3s ease; /* Add smooth transition effect */
  bottom: -30px; /* Hide the scroll indicator initially */
  width: 100%;
}

.banner-content {
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* Adjusted for spacing */
  align-items: center;
}


b {
  font-weight: 600;
}



.outer {
  /*margin-bottom: -8px;*/
  overflow: hidden;
  position: relative;
  margin-top: 80px;
  margin-bottom: 40px;
}

.article-image {
  margin-top: 60px;
  margin-bottom: 20px;
}

.thanks {
  margin-top: 60px;
}


.table-caption {
  margin-bottom: 10px;
}

.video-caption {
  text-align: center;
  margin-bottom: 60px;
  margin-top: -20px;
}


.hover-effect {
  position: relative;
  display: inline-block;
  overflow: hidden; /* Clip content that overflows the boundaries */
}

.text-original, .text-hover {
  position: relative;
  transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s ease-out;
}

.text-original {
  top: 0;
  left: 0;
  display: inline-block;
}

.hover-effect:hover .text-original {
  transform: translate(0, -15px);
}


.text-hover {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
}

.hover-effect:hover .text-hover {
  top: 0;
  opacity: 1;
}





.download-button {
  padding: 15px 60px;
  text-decoration: none;
  border: 1px solid rgba(34, 81, 255, 1);
  color: rgba(34, 81, 255, 1);
  background-color: white;
  cursor: pointer;
  font-size: 16px;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, padding-bottom 0.3s, margin-bottom 0.3s;
}

.download-button:hover {
  color: white;
  background-color: rgba(34, 81, 255, 1);
  padding-bottom: 13px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Adjust the shadow as needed */
}

.download-div {
  padding-top: 50px;
  text-align: center;
  height: 100px;
  text-decoration: none;
}


/* CSS to adjust font size of code snippet */
pre {
  font-size: 10px; /* Adjust font size as needed */
  line-height: 140%;
  overflow-y: auto !important;
    overflow-x: auto !important;
    max-height: 600px;
}

.code-caption {
  margin-top: 60px;
  text-align: center;
}










.video-container {
  margin-top: 80px;
  margin-bottom: 40px;
  position: relative;
  width: 100%;
}

.video-container video {
  width: 100%;
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: url('projects/play_icon.png') no-repeat;
  background-size: cover;
  cursor: pointer;
}






/* Style for the container holding the images */
.slideshow-container {
    padding-top: 40px;
    position: relative;
    max-width: 100%;
}

/* Style for the images */
.slideshow-container img {
    width: 100%;
    height: auto;
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}


.hiddenimg {
  width: 100%;
  height: auto;
}










.container-lottie {
  position: relative;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-wrapper {
  position: relative;
  width: 80%;
  margin-top: 80px;
  margin-bottom: 80px;

}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.lottie-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}





.contact-flex {
  display: flex;
  margin-bottom: 100px;
  margin-top: 100px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.01cap;
  line-height: 150%;
}


#form-outline {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 2;
  margin-right: 100px;
  padding-right: 50px;
  padding-left: 50px;
  transition: box-shadow 0.3s ease-in-out;

}

/* Hover effect for grid items */
#form-outline:hover {
  box-shadow: -10px 10px 30px rgb(234, 234, 234);
}

.fcf-form-group {
  padding-bottom: 40px;
}

#side-info {
  flex: 1;
}



.fcf-input-group {
  width: 100%;
}

.fcf-form-control {
  width: 100%;
  box-sizing: border-box; /* Include padding and border in the element's total width */
  height: 50px;
}

#Message {
  width: 100%;
  box-sizing: border-box; /* Include padding and border in the element's total width */
  height: 120px;
}



#fcf-button {
  padding: 15px 60px;
  border: 1px solid rgba(34, 81, 255, 1);
  color: rgba(34, 81, 255, 1);
  cursor: pointer;
  font-size: 16px;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, padding-bottom 0.3s, margin-bottom 0.3s;
  float: right;
  background-color: #ffffff;

}

#fcf-button:hover {
  color: white;
  background-color: rgba(34, 81, 255, 1);
  padding-bottom: 13px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Adjust the shadow as needed */
}

#button-div {
  height: 50px;
}



.contact-headings {
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}




/* Placeholder styling */
.fcf-form-control::placeholder {
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 300;
  padding: 10px;
}

/* Placeholder and input text styling */
.fcf-form-control, .fcf-form-control::placeholder {
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 300;
  padding: 10px;
}

.fcf-form-control:focus {
  border-color: rgba(34, 81, 255, 1); /* Change to blue color or any other color you prefer */
  border-style: solid; /* Make the original border solid */
  border-width: 1px; /* Adjust the original border width as needed */
  outline: 2px solid rgba(34, 81, 255, 1) /* Add an outline outside the original border */
}


.error-message {
  color: red;
  font-size: 14px;
}

.invalid-input {
  border: 1px solid red;
}



/* Placeholder and input text styling */
.about-para {
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 300;
  line-height: 150%;

}

/* Placeholder and input text styling */
.about-CV {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 400;

}

#cv-upper::after{
  content: "\a";
  white-space: pre;
}


#cv-lower::before{
  content: "\a";
  white-space: pre;
}

.cv-lower {
  font-weight: 300;

}

.cv-lower {
  font-weight: 300;
  font-size: 14px;
  color: #7d7d7d;
}





#about-1 {
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 400;
  padding-top: 100px;
}

#about-2 {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 400;
  color: #7d7d7d;
  padding-bottom: 20px;
}


#about-max-1160 {
  margin-bottom: 140px;
}


.skills-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
}

.skill {
  border: 1px solid black;
  padding: 5px 8px;
  margin: 0px 0;
}




.hero-contact-button {
  margin-top: 10px;
  margin-bottom: 80px;
  padding: 15px 60px;
  border: 0px solid;
  color: rgba(34, 81, 255, 1);
  cursor: pointer;
  font-size: 16px;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, padding-bottom 0.3s, margin-bottom 0.3s;
  color: white;
  background-color: rgba(34, 81, 255, 1);
}

.hero-contact-button:hover {
  color: white;
  background-color: rgb(0, 38, 175);
}

.hero-p {
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 300;
  color: #ffffff;
  padding-bottom: 20px;
  padding-top: 10px;

}


.index-section {
  margin-top: 120px;
  margin-bottom: 160px;
  display: flex;
  justify-content: space-between;
  gap: 80px; /* Adjust the gap between elements */
}


.section {
  flex: 1;

}

.section h2,
.section p,
.section button {
  width: 100%;
}

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



.home-item-arrow {
  width: 8px;
  height: 8px;
  margin-left: 9px; /* Adjust the margin as needed */
  transition: margin-left 0.3s ease-in-out; /* Add transition for smooth movement */
  transform: translateY(1px);

}

.home-item-header:hover .home-item-arrow {
  margin-left: 11px; /* Adjust the value as needed */
}

.home-item-header:hover {
  color: rgba(34, 81, 255, 1); /* Text color on hover */
}

.home-item-header {
  color: black; /* or your preferred text color */
  text-decoration: none; /* Remove default underline */
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}

.home-p {
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 300;
  line-height: 150%;
  margin-bottom: 20px;
}


.home-h1 {
  font-family: 'libre baskerville';
  font-size: 36px;
  margin-bottom: 0px;
}



html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}











.bar {
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 4px 0;
  transition: transform 0.3s ease; /* Add transition for smooth animation */
}

/* Styles for the close (cross) icon */
.cross-icon .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.cross-icon .bar:nth-child(2) {
  opacity: 0;
}

.cross-icon .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}



/* Styles for the burger icon */
.burger-icon {
  display: none; /* Hide burger icon by default */
}


.menu {
  display: flex;
  gap: 50px;
  align-items: center;
  overflow: hidden; /* Hide overflowing content */
}



@media (max-width: 900px) {


  #container {
    max-width: 90%;
    margin: auto;
  }
  body {
    font-family: 'Inter';
    font-size: 10px;
  }


  .menu.show {
    display: flex; /* Display the menu items when the 'show' class is applied */
    position: absolute; /* Position the menu absolutely */
    top: 100%; /* Position the menu below the nav */
    left: 0;
    background-color: #ffffff;
    padding-top: 40px;
    padding-bottom: 30px;
    width: 100%;
    z-index: 1000; /* Set a high z-index to ensure it appears above other content */
  }
  
  .menu {
    display: none; /* Hide menu items by default on small screens */
    flex-direction: column; /* Stack items vertically */
    position: fixed; /* Change position to fixed */
    top: 100%; /* Position the menu below the nav */
    left: 0;
    background-color: #f9f9f9;
    z-index: 1000; /* Set a high z-index to ensure it appears above other content */
    transition: height 0.5s ease-in-out, opacity 2s ease-in-out; /* Add transitions for height and opacity */
    border-bottom: 1px solid black;
    height: 0px;
  }



  .menu a {
    opacity: 0; /* Initially hide the menu items by setting opacity to 0 */
    transition: opacity 2s ease-in-out; /* Add a transition for opacity */
  }

  #contact-nav {
    display: none;
  }

  .burger-icon {
    display: block; /* Show burger icon on small screens */
    cursor: pointer;
    transform: translateY(-5px);
  }

  nav {
    position: relative; /* Ensure burger icon position relative to nav */
    justify-content: space-between; /* Spread the items evenly */
    padding: 20px;
    max-width: 1160px;
    margin: auto;
    padding-top: 20px;
    height: 10px;
  }


  nav div {
    flex-direction: column; /* Stack items vertically */
  }

  nav a {
    text-align: center; /* Center text for mobile */
  }

  #contact-nav {
    margin-top: 20px; /* Add margin to separate contact link from other menu items */
  }



  #right-footer {
    display: none;
  }
  #footer {
    flex-direction: column;
  }


  

  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
  }

  .grid-item-footer {
    padding: 0px;
    text-align: left;
    transition: box-shadow 0.3s ease-in-out;
    height: 100%;
  }
  .item-header {
    font-size: 16px;
  }

  .item-tags {
    margin-top: 10px;
    padding-bottom: 10px;
    font-size: 11px;
    font-weight: 400;
    color: #5c5c5c;
  }
  .section-break{
    margin: 0px;
    margin-top: 80px;
    margin-bottom: 40px;
  }




  .contact-text {
  text-align: center;
  }
  .max-1160 {
    flex-direction: column;
    text-align: left;
    padding-top: 40px;
    max-width: 90%;
    margin: auto;
  }
  .button-link {
    margin-top: 20px; /* Adjust the spacing between text and button */
  }
  .contact-text {
    font-size: 20px;
    font-weight: 700;
    font-family: 'libre baskerville';
  }
  .contact-div {
    height: 200px;
  }
  #about-max-1160 {
    margin-bottom: 120px;
  }



  #about-1 {
    font-size: 14px;
  }
  #about-2 {
    font-size: 12px;
  }
  .two-columns {
    flex-direction: column;
  }
  .left-column, .right-column {
    width: 100%;
    padding-right: 0;
  }
  .right-column {
    width: 100%;
    max-width: unset;
    margin-top: 20px; /* Adjust the spacing between the columns */
  }






  .contact-flex {
    flex-direction: column;
    align-items: center;
  }
  #form-outline {
    width: 100%;
    margin-right: 0;
    padding: 0 20px; /* Adjust padding as needed */
    margin-bottom: 0px; /* Add margin between the stacked elements */
  }
  #side-info {
    width: 100%;
    margin-top: 50px; /* Add margin between the stacked elements */
  }




  h0 {
    font-size: 36px;
  }


 

  .index-section {
    flex-direction: column;
    align-items: center;
    gap: 00px; /* Adjust the gap between elements */
    margin-top: 80px;
    margin-bottom: 80px;
  }
  #analysis-section .section:first-child {
    order: 2;
  }
  #analysis-section .section:last-child {
      order: 1;
  }
  .section {
    margin-bottom: 40px; /* Add margin between stacked elements */
  }
  .home-h1 {
    font-family: 'libre baskerville';
    font-size: 30px;
    margin-bottom: 0px;
  }
  .index-section .section {
    width: 100%; /* Set width to 100% to make each section stack on top of each other */
  }
  .home-p {
    font-size: 18px; /* Font size for screens under 700px */
  }
  #hero-banner {
    min-height: 550px;
    height: 85vh;
    /* Create the parallax scrolling effect */
    background-position:right;
    background-size: cover;
    position: relative;
  }

  #hero1-banner {
    min-height: 550px;
    height: 85vh;
    background-position:right;
    background-size: cover;
    position: relative;
  }




  .feature-article {
    flex-direction: column; /* Stack items vertically */
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .feature-content,
  .feature-image {
    width: 100%; /* Take up full width */
    padding: 0; /* Remove padding */
  }
  .feature-image {
    padding-top: 0px; /* Add space between content and image */
  }
  .item-header-feature {
    font-size: 26px;
  }

  .grid-item {
    padding: 0px;
  }
  .item-description {
    font-size: 14px;
  }
  .item-arrow {
    display: none;
  }

  .about-para {
    font-size: 16px;
  }

  .article-para {
    margin: 50px 0px 50px 0px;
    font-size: 16px;
  }
  .authors {
    width: 60%;
    font-size: 14px;
    font-weight: 300;
    line-height: 160%;
    letter-spacing: 0cap;
  }


  .banner-content {
    flex-direction: column;
    align-items: center;
  }

  .article-icon-bar:nth-of-type(1) {
    display: none; /* Hide the icon bar */
  }

  /* Adjust h3 width to cover the whole width */
  .banner-content h3 {
    width: 100%;
  }
  .banner {
    padding-top: 0px;
  }
  .download-button {
    padding: 15px 30px;
  }




  .banner-div {
    background-attachment: unset !important;
  }



  h2 {
    font-size: 24px;
    text-align: left;
    line-height: 140%;
  }

  h4 {
    font-size: 18px;
    text-align: left;
  }


  /* Hover effect for grid items */
  .grid-item:hover {
    box-shadow: 0 0 0px rgb(255, 255, 255);
  }

  /* Hover effect for grid items */
  .grid-item-footer:hover {
    box-shadow: 0 0 0px rgb(255, 255, 255);
  }

  /* Hover effect for feature article */
  .feature-article:hover {
    box-shadow: 0 0 0px rgb(255, 255, 255);
  }

}



@media (max-width: 600px) {
  .article-para img {
    width: 100% !important;
  }
}







@media (min-width: 901px) and (max-width: 1200px) {
  /* styles for screen sizes between 700px and 1200px go here */


  .max-1160 {
    max-width: 90%;
    margin: auto;
  }

  #container {
    max-width: 90%;
    margin: auto;
  }


  .home-h1 {
    font-size: 30px;
    margin-top: 0px;
  }

  nav {
    max-width: 90%;
    margin: auto;
  }


  .contact-button {
    padding: 15px 30px;
  }

  .article-para {
    margin: 50px 100px 50px 100px;
  }


  .contact-text {
    font-size: 24px;
  }


  .item-description {
    font-size: 14px;
  }
  .item-arrow {
    display: none;
  }

  .item-header-feature {
    font-size: 24px;
  }

  .item-header {
    font-size: 17px;
  }

  .feature-image img {
    height: 100%; /* Ensure the image fills the container */
    object-fit: cover; /* Maintain aspect ratio while covering the container */
  }


  .index-section .section img#picture {

    width: 100%;
    height: 100%;
    object-fit: cover;

  }

}


@media (min-width: 901px) and (max-width: 1000px) {

  .index-section {
    gap: 40px; /* Adjust the gap between elements */
  }
}








#post-date {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.01cap;
  line-height: 150%;
  font-style: italic;
  margin-bottom: 30px; /* adjust to your liking */

}

.article-para h3 {
  font-size: 18px;
  letter-spacing: 0.01cap;
  padding-top: 20px;
}



.separator {
  border-top: 1px solid #ccc; /* Thin grey line */
  margin: 0 200px 0 200px;
}


.post {
  transition: box-shadow 0.3s ease-in-out;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.01cap;
  line-height: 150%;
}



.post h2 {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0.5em; /* optional: still gives breathing room */
  font-weight: 600;
}

.post h2:hover {
  color: rgba(34, 81, 255, 1);
  text-decoration: underline
}

.post h3 {
  font-size: 18px;
  letter-spacing: 0.01cap;
  padding-top: 20px;
}



ul {
  list-style-position: outside;
  padding-left: 20px;
  margin: 0px
}



.notion-image-wrapper {
  display: flex;
  justify-content: center;
  margin: 1em 0;
}

.notion-image {
  width: 100%;
  max-width: 600px;
  height: auto;
}






.skeleton {
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 10px;
}

.skeleton-title,
.skeleton-date,
.skeleton-summary {
  height: 20px;
  animation: shimmer 0.3s infinite linear;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
}

.skeleton-title {
  width: 60%;
  height: 30px;
  margin: 16px 0 18px;
}

.skeleton-date {
  width: 20%;
  margin-bottom: 8px;
}

.skeleton-summary {
  width: 100%;
  height: 20px;
  margin: 10px 0;
}



.header-section .skeleton {
  margin-left: auto;
  margin-right: auto;
}

.header-section #skeleton-title {
  width: 50%;
}

.header-section #skeleton-date {
  width: 10%;
  margin-bottom: 50px;
}


h2 a:hover {
  color: rgba(34, 81, 255, 1);
  text-decoration: underline;
}




h2:hover .item-arrow {
  margin-left: 7px; /* Moves the arrow to the right when the h2 is hovered */
}





.post-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: background-color 0.2s ease;
}



.post-link h2,
.post-link p {
  transition: color 0.2s ease;
}

.post-link:hover h2 {
  color: rgba(34, 81, 255, 1);
  text-decoration: underline;
}


.post-link:hover p {
  color: #494949; /* or your preferred shade of grey */
}

.post-preview {
  margin-bottom: -6px;
}