/* Global Styles */
body {
  background-color: black;
  color: white;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
}

.header-bar {
  width: 100%;
  height: 84px;
  padding: 20px 44px;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(14px);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.header-logo {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: flex;
  width: 182px; /* Set the width */
  height: 44px; /* Set the height */
  background-image: url('images/Logo.svg'); /* Set the background image */
  background-size: contain; /* Ensure the image scales properly */
  background-repeat: no-repeat; /* Prevent repeating */
  background-position: center; /* Center the image */
  mix-blend-mode: exclusion; /* Apply blend mode for the effect */
}

.header-content {
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  display: flex;
} 

.hyperlinks {
  color: white;
  font-size: 18px;
  font-family: Montserrat;
  font-weight: 400;
  line-height: 23px;
  word-wrap: break-word;
} 

.buttonmd {
  mix-blend-mode: exclusion;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgb(255, 255, 255);
} 

.mdbuttontext {
  color: #ffffff;
  mix-blend-mode: exclusion;
  font-family: Montserrat;
  font-weight: 500;
  text-align: center;
} 

.small-arrow {
  width: 20px;
  mix-blend-mode: exclusion;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
} 

.hero-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh; /* Ensure it always fills the viewport even if there's content overflow */
  object-fit: cover;
  z-index: -1;
}


.hero1container {
  align-self: stretch;
  flex: 1 1 0; 
  flex-direction: column; 
  justify-content: flex-start; 
  align-items: center; 
  gap: 32px; 
  display: flex;
  padding-bottom: 44px;
}

.hero2container {
  align-self: stretch; 
  flex: 1 1 0; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  gap: 32px; 
  display: flex;
}

.heromaintext {
  align-self: stretch;
  mix-blend-mode: exclusion;
  text-align: center;
  color: white;
  word-wrap: break-word;
}

.herosubtext {
  align-self: stretch;
  mix-blend-mode: exclusion;
  text-align: center;
  color: white; 
  font-size: 34px; 
  font-family: Montserrat; 
  font-weight: 400; 
  line-height: 41px; 
  word-wrap: break-word;
  }

  .scroll-image {
    width: 30px;
    height: 48px;
    background-image: url("images/scroll.gif");
    background-size: contain; /* Maintain aspect ratio */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: center; /* Center the image */
}

.about-container {
  align-self: stretch;
  padding: 44px 44px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 44px;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding-top: 64px;

  /* Initial state: hidden and slightly moved down */
  opacity: 0;
  transform: translateY(50px); /* Start below the normal position */
  transition: opacity 3.6s ease-out, transform 3.6s ease-out; /* Smooth sliding effect */
}

/* When the container becomes visible */
.about-container.visible {
  opacity: 1;
  transform: translateY(0); /* Move to its original position */
}

/* When the container is out of view (and we want to reverse the effect) */
.about-container.hidden {
  opacity: 0;
  transform: translateY(50px); /* Move it back down */
}

.about-content {
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  align-items: flex-start; 
  gap: 32px;
}

.about-buttons {
  display: flex; 
  gap: 32px; 
  justify-content: flex-start; 
  align-items: center;
}

/* Container Styling */
.brands-section {
  position: relative;
  width: 100%; /* Full width */
  overflow: hidden; /* Hide overflowing content */
  height: 70px; /* Fixed height for logos */
}

/* Slider content */
.brands-slider {
  display: flex; /* Align logos in a row */
  gap: 40px; /* Spacing between logos */
  animation: slide 20s linear infinite; /* Smooth scrolling animation */
  will-change: transform; /* Optimize performance */
}

/* Logo Styling */
.brand-logo {
  width: 120px; /* Logo width */
  height: 70px; /* Logo height */
  object-fit: contain; /* Maintain aspect ratio */
  flex-shrink: 0; /* Prevent logos from shrinking */
  user-select: none; /* Prevent text selection */
}

/* Fading edges for aesthetic */
.brands-section::before,
.brands-section::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px; /* Width of the fade effect */
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgb(0, 0, 0), transparent);
}

.brands-section::after {
  left: unset;
  right: 0;
  background: linear-gradient(to left, rgb(0, 0, 0), transparent);
}

.projects-header {
  align-self: stretch;
  justify-content: flex-start;
  align-items: center;
  gap: 44px;
  display: inline-flex
}

.section-headline {
  flex: 1 1 0;
  height: 62px;
  color: white;
  font-size: 41px;
  font-family: Pano;
  font-weight: 400;
  line-height: 52px;
  word-wrap: break-word
}

.projectcard {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease; /* Smooth transitions */
  opacity: 0; /* Initially hidden */
  transform: translateY(100px); /* Initially shifted down */
}

/* Slide-Up Effect */
.projectcard.slide-up {
  transform: translateY(0); /* Move to original position */
  opacity: 1; /* Fully visible */
}

/* Slide-Down Effect */
.projectcard.slide-down {
  transform: translateY(100px); /* Shift down */
  opacity: 0; /* Fade out */
}


.projects-section {
  align-self: stretch;
  padding-bottom: 64px;
  padding-left: 44px;
  padding-right: 44px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 44px;
  display: flex;
}

.project-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  }

  .project-button {
    text-decoration: none;
    mix-blend-mode: exclusion;
    padding: 10px 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #E5E5E5;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .project-button span {
    color: #000;
    font-size: 14px;
    font-family: Montserrat;
    font-weight: 500;
  }

  .project-button-icon {
  width: 20px;
  height: 20px;
  background: url('images/eye.svg') no-repeat center / contain;
  }

  .contact-section {
    align-self: stretch;
    padding-bottom: 64px;
    padding-left: 44px;
    padding-right: 44px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 44px;
    display: flex
  } 

  .contact-text {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    display: flex
  } 

.section-headline2 {
  align-self: stretch;
  text-align: center;
  color: white;
  font-size: 41px;
  font-family: Pano;
  font-weight: 400;
  line-height: 52px;
  word-wrap: break-word
}  

.section-subheadline2 {
  align-self: stretch;
  text-align: center;
  color: #BBBBBB;
  font-size: 18px;
  font-family: Montserrat;
  font-weight: 400;
  line-height: 23px;
  word-wrap: break-word
} 

.social-icons-container {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  display: inline-flex
} 

.footer {
  align-self: stretch;
  padding-left: 44px;
  padding-right: 44px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px rgba(255, 255, 255, 0.20) solid;
  justify-content: flex-start;
  align-items: center;
  gap: 633px;
  display: inline-flex
} 

.footer span {
  flex: 1 1 0;
  text-align: center;
  color: #808080;
  font-size: 14px;
  font-family: Montserrat;
  font-weight: 400;
  word-wrap: break-word
} 

/* Buttons */

.buttonxl {
  overflow: hidden;
  display: inline-flex; /* Flexbox layout */
  justify-content: space-between; /* Enlarge space between items */
  align-items: center; /* Center items vertically */
  gap: 16px; /* Maintain gap between elements */
  background-color: #ffffff;
  background-image: url("images/Ellipse.svg");
  background-position: 50% -50%;
  background-repeat: no-repeat;
  background-size: 110%;
  border: 0px solid #fff;
  border-radius: 14px;
  margin-top: 0;
  padding: 20px 32px;
  line-height: 1.2;
  transition: .5s;
}
  
  .buttonxl-text {
    color: #ffffff; 
    mix-blend-mode: exclusion;
    text-align: center;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-family: Montserrat;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
  }
  
  .buttonxl-icon {
    mix-blend-mode: exclusion; /* Apply blending mode to the icon */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .buttonxl-icon img {
    width: auto; /* Set the icon size */
    height: 32px; /* Set the icon size */
  }

  .buttonxl:hover {
    color: #ffffff;
    background-position: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Glow effect */
  }  

  .secbuttonxl {
    overflow: hidden;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
    color: #fff;
    background-color: #3898ec00;
    background-image: url("images/wEllipse.svg");
    background-position: 50% -50%;
    background-repeat: no-repeat;
    background-size: 110%;
    border: 1px solid #fff;
    border-radius: 14px;
    margin-top: 0;
    padding: 32px 48px;
    transition: color .5s, background-position .5s, background-color .5s;
  }

  .secbuttonxl-text {
    mix-blend-mode: exclusion;
    text-align: center;
    color: white;
    font-size: 20px;
    font-family: Montserrat;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word
  }
  
  .secbuttonxl-icon {
    mix-blend-mode: exclusion; /* Apply blending mode to the icon */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .secbuttonxl-icon img {
    width: auto; /* Set the icon size */
    height: 32px; /* Set the icon size */
  }
  
  .secbuttonxl:hover {
    color: #000000;
    background-position: 50%;
  }

.buttonl {
  overflow: hidden;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 16px;
  color: #000000; /* Default text color */
  background-color: #ffffff; /* Button background color */
  background-image: url("images/Ellipse.svg");
  background-position: 50% -50%;
  background-repeat: no-repeat;
  background-size: 110%;
  border: 0px solid #fff;
  border-radius: 14px;
  margin-top: 0;
  padding: 16px 24px;
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  transition: color .5s, background-position .5s, background-color .5s;
}

.buttonl-text {
  color: #ffffff; 
  mix-blend-mode: exclusion;
  text-align: center;
}

.buttonl-icon {
  mix-blend-mode: exclusion; /* Apply blending mode to the icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttonl-icon img {
  width: 20px; /* Set the icon size */
  height: 20px; /* Set the icon size */
}


.buttonl:hover {
  color: #ffffff;
  background-position: 50%;
}

.secbuttonl {
  display: flex; 
  align-items: center; 
  gap: 16px;
  color: #fff;
  background-color: #3898ec00;
  background-image: url("images/wEllipse.svg");
  background-position: 50% -50%;
  background-repeat: no-repeat;
  background-size: 110%;
  border: 1px solid #fff;
  border-radius: 14px;
  margin-top: 0;
  padding: 16px 24px;
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  transition: color .5s, background-position .5s, background-color .5s;
}

.secbuttonl-text {
  color: #ffffff; 
  mix-blend-mode: exclusion;
  text-align: center;
}

.secbuttonl-icon {
  mix-blend-mode: exclusion; /* Apply blending mode to the icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

.secbuttonl-icon img {
  width: 20px; /* Set the icon size */
  height: 20px; /* Set the icon size */
}

.secbuttonl:hover {
  color: #000000;
  background-position: 50%;
}

.buttonmd {
  color: #fff;
  background-color: #ffffff;
  background-image: url("images/Ellipse.svg");
  background-position: 50% -50%;
  background-repeat: no-repeat;
  background-size: 110%;
  border: 0px solid #fff;
  border-radius: 8px;
  margin-top: 0;
  padding: 16px 24px;
  font-family: Montserrat;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  transition: color .5s, background-position .5s, background-color .5s;
}

.buttonmd-text {
  color: #ffffff; 
  mix-blend-mode: exclusion;
  text-align: center;
}

.buttonmd-icon {
  mix-blend-mode: exclusion; /* Apply blending mode to the icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttonmd-icon img {
  width: 20px; /* Set the icon size */
  height: 20px; /* Set the icon size */
}

.buttonmd:hover {
  color: #ffffff;
  background-position: 50%;
}

/* End Buttons */

a:hover {
  text-decoration: none; /* Remove underline when hovered */
}

.hyperlinks:hover {
  color: #ffffff;
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8))
drop-shadow(0 0 20px rgba(255, 255, 255, 0.8))
drop-shadow(0 0 40px rgba(0, 128, 255, 0.8))
drop-shadow(0 0 80px rgba(0, 128, 255, 0.8));
transform: scale(1.1); /* Slight scaling for effect */
transition: all 0.5s ease; /* Smooth transition */
}

.socialicons {
  width: 32px;
  height: 32px;
  }

.socialicons:hover {
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8))
drop-shadow(0 0 20px rgba(255, 255, 255, 0.8))
drop-shadow(0 0 40px rgba(0, 128, 255, 0.8))
drop-shadow(0 0 80px rgba(0, 128, 255, 0.8));
transform: scale(1.1); /* Slight scaling for effect */
transition: all 0.5s ease; /* Smooth transition */
}

@font-face {
  font-family: 'Pano';
  src: url('fonts/Pano-Regular.woff2') format('woff2'), /* Modern browsers */
       url('fonts/Pano-Regular.woff') format('woff');   /* Older browsers */
  font-weight: 400;
  font-style: regular;
}

@font-face {
  font-family: 'Pano';
  src: url('fonts/Pano-Bold.woff2') format('woff2'), /* Modern browsers */
       url('fonts/Pano-Bold.woff') format('woff');   /* Older browsers */
  font-weight: 700;
  font-style: regular;
}

@font-face {
  font-family: 'Pano';
  src: url('fonts/Pano-Light.woff2') format('woff2'), /* Modern browsers */
       url('fonts/Pano-Light.woff') format('woff');   /* Older browsers */
  font-weight: 300;
  font-style: regular;
}

/* Responsive Styles */

/* Small devices (320px - 799px) */
@media (max-width: 799px) {

  .header-bar {
    width: 100%;
    height: 60px;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(14px);
    justify-content: center; /* Center-align items horizontally */
    align-items: center; /* Center-align items vertically */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

  .header-content {
    display: none;
  } 

  .hyperlinks {
    display: none;
  } 

  .buttonmd {
    display: none;
  } 

  .header-logo {
    justify-content: center;
    align-items: center;
    width: 130px; /* Set the width */
    height: 32px; /* Set the height */
    background-image: url('images/Logo.svg'); /* Set the background image */
    background-size: contain; /* Ensure the image scales properly */
    background-repeat: no-repeat; /* Prevent repeating */
    background-position: center; /* Center the image */
    mix-blend-mode: exclusion; /* Apply blend mode for the effect */
  }

  .hero-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80vh; /* Ensure it always fills the viewport even if there's content overflow */
    object-fit: cover;
    z-index: -1;
  }

  .hero1container {
    align-self: stretch;
    flex: 1 1 0; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 32px; 
    display: flex;
  }
  
  .hero2container {
    align-self: stretch; 
    flex: 1 1 0; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 32px; 
    display: flex;
  }  

  .herosubtext {
    align-self: stretch;
    mix-blend-mode: exclusion;
    text-align: center;
    color: white;
    font-size: 20px;
    font-family: Montserrat;
    font-weight: 400;
    line-height: 1.2;
    word-wrap: break-word
    }

    .heromaintext {
      font-size: 32px;
      font-family: Pano;
      font-weight: 700;
      line-height: 38px;
      }

      .scroll-image {
        width: 32px;
        height: 32px;
        padding-bottom: 130px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .abtext-large {
      display: none;
    }
    .abtext-small {
      width: 100%; 
      font-size: 22px;
      font-family: Pano;
      font-weight: 400;
      line-height: 1.2;
    }

    .about-container {
      align-self: stretch; 
      padding: 20px;
        flex-direction: column; 
        justify-content: flex-start; 
        align-items: center; 
        gap: 32px; 
        display: flex; 
        box-sizing: border-box; 
        width: 100%;
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .about-background {
      width: 100%; 
      height: 550px;
      padding: 20px; 
      border: 3px #434446 solid; 
      background-image: url('images/Header_Mobile.jpg'); 
      background-size: cover; 
      background-position: center; 
      display: flex; 
      justify-content: flex-start; 
      align-items: top; 
      gap: 16px; 
      box-sizing: border-box;
    }

    .about-content {
      display: flex;
      flex-direction: column; /* Stack items vertically */
      justify-content: flex-start; /* Align items to the top */
      align-items: flex-start; /* Align items to the left */
      gap: 16px; /* Ensure exactly 12px space between items */
  }
  

  .about-buttons {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next row if needed */
    gap: 16px; /* Add consistent spacing between items */
    justify-content: flex-start; /* Align items to the start horizontally */
    align-items: flex-start; /* Align items to the start vertically */
  }

/* Container Styling */
.brands-section {
  height: 40px; /* Fixed height for logos */
}

/* Slider content */
.brands-slider {
  gap: 20px; /* Spacing between logos */
}

/* Logo Styling */
.brand-logo {
  width: 60px; /* Logo width */
  height: 40px; /* Logo height */
}

/* Fading edges for aesthetic */
.brands-section::before,
.brands-section::after {
  width: 40px; /* Width of the fade effect */
}

    .projects-section {
      align-self: stretch;
      padding-bottom: 44px;
      padding-left: 20px;
      padding-right: 20px;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 32px;
      display: flex;
    }
    
    .projects-header {
      flex-direction: column;
      display: flex; /* Flex container for layout */
      justify-content: center; /* Center items on the x-axis */
      align-items: center; /* Align items vertically in the center */
      gap: 20px; /* Space between the two items */
  }
    
    .section-headline {
      text-align: center;
      color: white;
      font-size: 26px;
      font-family: Pano;
      font-weight: 500;
      line-height: 31px;
      word-wrap: break-word
    }

    .projectcard {
      display: flex;
      border: 3px solid #434446;
      height: auto;
      width: 100%;
      mix-blend-mode: exclusion;
      flex-direction: column;
      }
  
      .project-image-container {
        width: 100%; /* Full width of the container */
        height: 194px; /* Fixed height */
        justify-content: center;
        align-items: center;
        box-sizing: border-box; /* Include padding and border in size */
        overflow: hidden; /* Hide any overflow to crop the image */
        display: flex; /* Optional: For centering content, if needed */
    }
    
    .project-image-container img {
        width: 100%; /* Scale image to container width */
        height: 100%; /* Scale image to container height */
        object-fit: cover; /* Crop image to fit the container */
        object-position: center; /* Center the image within the container */
    }

    .project-content {
      flex: 1;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      mix-blend-mode: exclusion;
      gap: 20px;
      }
  
      .project-tags {
        padding: 2px 8px;
        border-radius: 24px;
        border: 1px solid #E5E5E5;
        text-align: center;
        color: white;
        font-size: 10px;
        font-family: Montserrat; font-weight: 500;
      }  
  
        .project-title {
          color: white;
          font-size: 18px;
          font-family: Montserrat;
          font-weight: 400;
          line-height: 23px;
          word-wrap: break-word;
          mix-blend-mode: exclusion;  
          }    

    .project-footer {
      display: flex;
      flex-direction: column; /* Stack items vertically */
      align-items: flex-start; /* Align items to the left */
      justify-content: flex-start; /* Align items to the top */
      gap: 12px;
  }
  
      .project-logo {
display: none;
      }

      .project-button {
        text-decoration: none;
        mix-blend-mode: exclusion;
        padding: 6px 12px;
        background: white;
        border-radius: 8px;
        border: 1px solid #E5E5E5;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .project-button span {
        color: #000;
        font-size: 12px;
        font-family: Montserrat;
        font-weight: 500;
      }

      .project-button-icon {
      width: 12px;
      height: 12px;
      background: url('images/eye.svg') no-repeat center / contain;
      }

      .contact-section {
        align-self: stretch;
        padding-bottom: 44px;
        padding-left: 20px;
        padding-right: 20px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        display: flex
      } 

          .section-headline2 {
            text-align: center;
            color: white;
            font-size: 26px;
            font-family: Pano;
            font-weight: 500;
            line-height: 31px;
            word-wrap: break-word
          }   
          
          .section-subheadline2 {
            align-self: stretch;
            text-align: center;
            color: #BBBBBB;
            font-size: 14px;
            font-family: Montserrat;
            font-weight: 400;
            word-wrap: break-word
          } 

          .social-icons-container {
            justify-content: flex-start;
            align-items: flex-start;
            gap: 22px;
            display: inline-flex;
            flex-wrap: wrap; 
          } 

          .socialicons {
            width: 24px;
            height: 24px;
            }

            .footer {
              align-self: stretch;
              padding-left: 20px;
              padding-right: 20px;
              padding-top: 20px;
              padding-bottom: 20px;
              border-top: 1px rgba(255, 255, 255, 0.20) solid;
              justify-content: flex-start;
              align-items: center;
              gap: 633px;
              display: inline-flex
            } 
            
            .footer span {
              flex: 1 1 0;
              text-align: center;
              color: #808080;
              font-size: 12px;
              font-family: Montserrat;
              font-weight: 400;
              word-wrap: break-word
            } 
  
/* Buttons */

.buttonxl {
  overflow: hidden;
  justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
    background-color: #ffffff;
    background-image: url("images/Ellipse.svg");
    background-position: 50% -50%;
    background-repeat: no-repeat;
    background-size: 110%;
    border: 0px solid #fff;
    border-radius: 14px;
    margin-top: 0;
    padding: 12px 24px;
    line-height: 1.2;
    transition: .5s;
  }
  
  .buttonxl-text {
    color: #ffffff; 
    mix-blend-mode: exclusion;
    text-align: center;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    font-family: Montserrat;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word;
  }
  
  .buttonxl-icon {
    mix-blend-mode: exclusion; /* Apply blending mode to the icon */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .buttonxl-icon img {
    width: auto; /* Set the icon size */
    height: 24px; /* Set the icon size */
  }

  .buttonxl:hover {
    color: #ffffff;
    background-position: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Glow effect */
  }  

  .secbuttonxl {
    overflow: hidden;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
    color: #fff;
    background-color: #3898ec00;
    background-image: url("images/wEllipse.svg");
    background-position: 50% -50%;
    background-repeat: no-repeat;
    background-size: 110%;
    border: 1px solid #fff;
    border-radius: 14px;
    margin-top: 0;
    padding: 16px 24px;
    transition: color .5s, background-position .5s, background-color .5s;
  }

  .secbuttonxl-text {
    mix-blend-mode: exclusion;
    text-align: center;
    color: white;
    font-size: 14px;
    font-family: Montserrat;
    font-weight: 500;
    line-height: 1.2;
    word-wrap: break-word
  }
  
  .secbuttonxl-icon {
    mix-blend-mode: exclusion; /* Apply blending mode to the icon */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .secbuttonxl-icon img {
    width: 32px; /* Set the icon size */
    height: 32px; /* Set the icon size */
  }
  
  .secbuttonxl:hover {
    color: #000000;
    background-position: 50%;
  }

.buttonl {
  overflow: hidden;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 8px;
  color: #000000; /* Default text color */
  background-color: #ffffff; /* Button background color */
  background-image: url("images/Ellipse.svg");
  background-position: 50% -50%;
  background-repeat: no-repeat;
  background-size: 110%;
  border: 0px solid #fff;
  border-radius: 8px;
  margin-top: 0;
  padding: 12px 16px;
  font-family: Montserrat;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  transition: color .5s, background-position .5s, background-color .5s;
}

.buttonl-text {
  color: #ffffff; 
  mix-blend-mode: exclusion;
  text-align: center;
}

.buttonl-icon {
  mix-blend-mode: exclusion; /* Apply blending mode to the icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttonl-icon img {
  width: 16px; /* Set the icon size */
  height: 16px; /* Set the icon size */
}


.buttonl:hover {
  color: #ffffff;
  background-position: 50%;
}

.secbuttonl {
  display: flex; 
  align-items: center; 
  gap: 8px;
  color: #fff;
  background-color: #3898ec00;
  background-image: url("images/wEllipse.svg");
  background-position: 50% -50%;
  background-repeat: no-repeat;
  background-size: 110%;
  border: 1px solid #fff;
  border-radius: 8px;
  margin-top: 0;
  padding: 12px 16px;
  font-family: Montserrat;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  transition: color .5s, background-position .5s, background-color .5s;
}

.secbuttonl-text {
  color: #ffffff; 
  mix-blend-mode: exclusion;
  text-align: center;
}

.secbuttonl-icon {
  mix-blend-mode: exclusion; /* Apply blending mode to the icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

.secbuttonl-icon img {
  width: 16px; /* Set the icon size */
  height: 16px; /* Set the icon size */
}

.secbuttonl:hover {
  color: #000000;
  background-position: 50%;
}

.buttonmd {
  color: #fff;
  background-color: #ffffff;
  background-image: url("images/Ellipse.svg");
  background-position: 50% -50%;
  background-repeat: no-repeat;
  background-size: 110%;
  border: 0px solid #fff;
  border-radius: 8px;
  margin-top: 0;
  padding: 16px 24px;
  font-family: Montserrat;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  transition: color .5s, background-position .5s, background-color .5s;
}

.buttonmd-text {
  color: #ffffff; 
  mix-blend-mode: exclusion;
  text-align: center;
}

.buttonmd-icon {
  mix-blend-mode: exclusion; /* Apply blending mode to the icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttonmd-icon img {
  width: 20px; /* Set the icon size */
  height: 20px; /* Set the icon size */
}

.buttonmd:hover {
  color: #ffffff;
  background-position: 50%;
}

/* End Buttons */
  
}

/* Medium devices (800px - 1199px) */
@media (min-width: 800px) and (max-width: 1199px) {

  .heromaintext {
    font-size: 72px;
  font-family: Pano;
  font-weight: 700;
  line-height: 83px;
  }
  .abtext-large {
    display: none;
  }
  .abtext-small {
    width: 350px; 
    font-size: 37px;
    font-family: Pano;
    font-weight: 400;
    line-height: 50px;
  }
  .about-background {
    width: 100%; 
    padding: 44px; 
    border: 3px #434446 solid; 
    background-image: url('images/Header_Tablet.jpg'); 
    background-size: cover; 
    background-position: center; 
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 
    gap: 32px; 
    box-sizing: border-box;
  }

  .buttontext {
    font-size: 14px; 
  }

  .projectcard {
    display: flex;
    border: 3px solid #434446;
    height: 259px;
    width: 100%;
    mix-blend-mode: exclusion;
    color: #fff;
    background-color: #000000;
    background-image: url("images/wEllipse.svg");
    background-position: 50% -50%;
    background-repeat: no-repeat;
    background-size: 110%;
    transition: .5s;
    }
    
    .projectcard:hover {
    color: #000000;
    background-position: 50%;
    }
    
    .projectcard:hover .project-button {
    transform: scale(1.1); /* Slight scaling for effect */
    transition: all 0.5s ease; /* Smooth transition */
    transform-origin: left; /* Ensures scaling starts from the right */
    }

    .project-image-container {
      width: 350px; /* Full width of the container */
      height: 100%; /* Fixed height */
      justify-content: center;
      align-items: center;
      box-sizing: border-box; /* Include padding and border in size */
      overflow: hidden; /* Hide any overflow to crop the image */
      display: flex; /* Optional: For centering content, if needed */
  }
  
  .project-image-container img {
      width: 100%; /* Scale image to container width */
      height: 100%; /* Scale image to container height */
      object-fit: cover; /* Crop image to fit the container */
      object-position: center; /* Center the image within the container */
  }

    .project-logo {
    width: 100px;
    height: 32px;
    background-size: contain; /* Scale the logo while maintaining aspect ratio */
    background-repeat: no-repeat;
    background-position: bottom right;
    mix-blend-mode: exclusion;
    }

    .project-content {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    mix-blend-mode: exclusion;
    gap: 8px;
    }

    .project-tags {
      padding: 2px 10px;
      border-radius: 24px;
      border: 1px solid #E5E5E5;
      text-align: center;
      color: white;
      font-size: 12px;
      font-family: Montserrat; font-weight: 500;
    }  

      .project-title {
        color: white;
        font-size: 26px;
        font-family: Montserrat;
        font-weight: 400;
        line-height: 33px;
        word-wrap: break-word;
        mix-blend-mode: exclusion;  
        }

}

/* Large devices (1200px and up) */
@media (min-width: 1200px) {

  .heromaintext {
  font-size: 90px;
  font-family: Pano;
  font-weight: 700;
  line-height: 100px;
  }
  .abtext-large {
    width: 618px; 
    font-size: 41px; 
    font-family: Pano; 
    font-weight: 400; 
    line-height: 52px;
  }
  .abtext-small {
    display: none;
  }

  .about-background {
    width: 100%; 
    padding: 44px; 
    border: 3px #434446 solid; 
    background-image: url('images/about-desktop.jpg'); 
    background-size: cover; 
    background-position: center; 
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 
    gap: 44px; 
    box-sizing: border-box;
  }

  .project-image-container {
    flex: 0 0 548px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .project-image {
    width: 548px;
    height: 100%;
    object-fit: cover;
  }

  .buttontext {
  font-size: 14px; 
  }

  .projectcard {
    display: flex;
    border: 3px solid #434446;
    height: 259px;
    width: 100%;
    mix-blend-mode: exclusion;
    color: #fff;
    background-color: #000000;
    background-image: url("images/wEllipse.svg");
    background-position: 50% -50%;
    background-repeat: no-repeat;
    background-size: 110%;
    transition: .5s;
    }
    
    .projectcard:hover {
    color: #000000;
    background-position: 50%;
    }
    
    .projectcard:hover .project-button {
    transform: scale(1.2); /* Slight scaling for effect */
    transition: all 0.5s ease; /* Smooth transition */
    transform-origin: left; /* Ensures scaling starts from the right */
    }

    .project-image-container {
      width: 548px; /* Full width of the container */
      height: 100%; /* Fixed height */
      justify-content: center;
      align-items: center;
      box-sizing: border-box; /* Include padding and border in size */
      overflow: hidden; /* Hide any overflow to crop the image */
      display: flex; /* Optional: For centering content, if needed */
  }
  
  .project-image-container img {
      width: 100%; /* Scale image to container width */
      height: 100%; /* Scale image to container height */
      object-fit: cover; /* Crop image to fit the container */
      object-position: center; /* Center the image within the container */
  }

    .project-content {
    flex: 1;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    mix-blend-mode: exclusion;
    }

    .project-tags {
      padding: 6px 16px;
      border-radius: 24px;
      border: 1px solid #E5E5E5;
      text-align: center;
      color: white;
      font-size: 14px;
      font-family: Montserrat; font-weight: 500;
      }  

      .project-title {
      color: white;
      font-size: 34px;
      font-family: Montserrat;
      font-weight: 400;
      line-height: 41px;
      mix-blend-mode: exclusion;  
      }

      .project-logo {
        width: 140px;
        height: 40px;
        background-size: contain; /* Scale the logo while maintaining aspect ratio */
        background-repeat: no-repeat;
        background-position: bottom right;
        mix-blend-mode: exclusion;
    }
    


}