/* Reset some default styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Original styling */
body {
  font-family: 'Poppins', sans-serif;
  background: #F5F5F5;
}

.landing-container {
  max-width: none !important;
}

.hero-image2{
  display: none;
}

.hero-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: center;
}

.content-wrapper {
  margin-top:min(30px, 4vw);
  display: flex;
  width: 100%;
  padding-top: 56px;
  flex-direction: column;
  justify-content: center;
  padding: 0 7.222vw;
}

.main-content {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;

}

.text-content {
  display: flex;
  min-width: 240px;
  flex-direction: column;
  font-family: Poppins, sans-serif;
  justify-content: flex-start;
  flex: 1;
  flex-basis: 0%;
  max-width: 64.7vw;

@media (max-width: 1000px) {
  max-width: 1280px;
} 
}


.logo-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

.logo {
  width: max(24vw, 180px);
  padding-bottom: max(70px, 5vw);
}

.logo-image {
  width: 100%;
}

.logo-text {
  align-self: stretch;
  flex: 1;
  flex-basis: 0%;
  margin: auto 0;
}

.logo-spacer {
  align-self: stretch;
  display: flex;
  min-width: 240px;
  padding-top: 26px;
  align-items: center;
  gap: 10px;
  justify-content: center;
  width: 443px;
  margin: auto 0;
}

.hero-title-container{
  width: 100%;
}

.xxx{
  display: flex;
  gap: 4.167vw;
}

.hero-title {
  font-size: max(7.25vw, 32px);
  font-weight: 500;
  background: linear-gradient(90deg, #ec6c64 0%, #f7a57e 69.01%, #f1af92 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
  letter-spacing: -0.1vw;
}

.animatedText {
  opacity: 0;  /* Initially hidden */
}

.animatedImage {
   /* Initially hidden */
}

.text-focus-in {
  -webkit-animation: text-focus-in 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
          animation: text-focus-in 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.fade-in-bottom {
	-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.scale-up-ver-bottom {
	-webkit-animation: scale-up-ver-bottom 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-ver-bottom 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

 @-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

 @-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

 @-webkit-keyframes scale-up-ver-bottom {
  0% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
}
@keyframes scale-up-ver-bottom {
  0% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
}


.divider {
  object-fit: contain;
  object-position: top left;
  width: max(5.3vw, 55px);
  margin-top: min(40px,3vw);
  max-width: 100%;
  min-height: 2px;
}

.welcome-text {
  color: rgba(64, 60, 58, 0.85);
  font-size: max(3.1vw, 26px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: max(0.035vw, 0.22px);
  margin-top: 2vw;
  margin-bottom: max(70px, 7.8vw);
}

.intro-text{
  color:#403C3A;
  font-size: max(17px,1.4vw);
  font-weight: 400;
  line-height:1.8;
  letter-spacing: 0.72px;
}

.intro-text1 {
  color:#403C3A;
  font-size: max(17px,1.4vw);
  font-weight: 400;
  line-height:1.8;
  letter-spacing: 0.72px;
  margin-top:min(30px, 4vw);
}

.project-links {
  color: #ed6e66 !important;
  font-weight: 500;
  line-height: 1.4;
  font-size: max(17px,1.4vw);
  letter-spacing: 0.72px;
  margin-top: max(30px, 4vw);

  a {
      color: #ed6e66 !important; /* Your desired color */
      text-decoration: none; /* Customize text decoration as needed */
      display: inline-block; /* or use inline-block if you don't want them to take full width */
      margin-bottom: max(2vw, 30px);
      text-decoration: none; /* Remove default underline */
      border-bottom: 2px solid transparent; /* Set a transparent border initially */
      transition: border-color 0.3s ease, border-width 0.3s ease;
    }

    a:hover {
      background: linear-gradient(270deg, rgba(255, 157, 0, 0.8), rgba(255, 0, 0, 0.8));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block; /* or use inline-block if you don't want them to take full width */
      margin-bottom: max(2vw, 30px);
      border-bottom: 2px solid currentColor;
     
    }
    a:after {
       transition: border-color 0.3s ease, border-width 0.3s ease;
    }

    @media (max-width: 768px) { /* Adjust this width as needed for mobile */
      a {
        background: linear-gradient(270deg, rgba(255, 157, 0, 0.8), rgba(255, 0, 0, 0.8));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: inline-block;
        border-bottom: 1px solid rgba(255, 0, 0, 0.8); /* Simulates an underline */
        padding-bottom: 1px; /* Optional: Adjusts spacing for the underline */      
      }
    }

}

.image-container {
  display: block;
  min-height: 220px;
  min-width: 140px;
  align-content: flex-end;
  width: 19.5vw;
  height: fit-content;
  background-image: url(img/My_profile_image.jpg?v=1.1);
  aspect-ratio: 0.75;
  /* object-fit: contain; */
  /* object-position: center; */
  border-radius: max(20px, 1.8vw);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  clip-path: inset(100% 0 0 0 round 1.8vw); /* Start fully hidden with rounded corners */
  border-radius: 1.8vw; /* Maintain the rounded corners */
  filter: blur(5px); /* Initial blur */
  animation: reveal-from-bottom-with-blur 1.6s ease-in-out forwards;
}

/* Reveal animation with blur effect (bottom to top) */
@keyframes reveal-from-bottom-with-blur {
  0% {
    clip-path: inset(100% 0 0 0 round 1.8vw); /* Fully hidden */
    filter: blur(5px); /* Start blurry */
  }
  50% {
    filter: blur(2.5px); /* Reduce blur halfway through */
  }
  100% {
    clip-path: inset(0 0 0 0 round 1.8vw); /* Fully visible */
    filter: blur(0); /* No blur at the end */
  }
}

.hero-image {
  aspect-ratio: 0.75;
  object-fit: contain;
  object-position: center;
  width: 100%;
  border-radius: 1.8vw;
}

.cta-section {
  display: flex;
  width: 100%;
  flex-direction: column;
  color: rgba(64, 60, 58, 0.85);
  letter-spacing: 0.7px;
  justify-content: center;
  font: 300 70px/86px Poppins, sans-serif;
  gap: 2vw;
}

.cta-text {
  align-self: stretch;
  flex-grow: 0;
  font-family: Poppins;
  font-size: max(3.1vw, 26px);
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.36;
  letter-spacing: max(0.035vw, 0.22px);
  text-align: left;
  color: rgba(64, 60, 58, 0.8);
}

.footer {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.33) 0%, rgba(255, 255, 255, 0.33) 100%), linear-gradient(111deg, #f0e7e2 1.32%, #e9d6cb 43.5%, #f3d0b7 100%);
  display: flex;
  width: 100%;
  padding-bottom: 6px;
  flex-direction: column;
}

.footer-curve {
  border-radius: 0 0 max(5vw, 35px) max(5vw, 35px);
  background-color: #f5f5f5;
  display: flex;
  height: max(6.818vw, 60px);
}

.footer-content {
  align-self: center;
  display: flex;
  margin-top: max(4.141vw, 60px);
  max-width: 1644px;
  flex-direction: column;
  justify-content: flex-start;
}

.footer-content_inner {
  align-self: center;
  display: flex;
  margin-top: max(5vw, 60px);
  flex-direction: row;
  justify-content: flex-start;
  gap:5vw;
}

.contact-header {
  width: 100%;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  text-align: center;
  justify-content: flex-start;
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  margin: 0 auto;
}

.Get-in-Touch {
  align-self: stretch;
  flex-grow: 0;
  background-image: linear-gradient(to right, #ec6d65 66%, #f09062 84%), linear-gradient(to right, #f1af92, #cc9891 31%, #ec6c64), linear-gradient(to right, #ffb283, #f2af8a 50%, #6d5481);
  font-family: Poppins;
  font-size: max(7.25vw, 32px);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-align: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 576px) {
  .Get-in-Touch {
    margin-bottom: 16px;
  }
  .Rectangle-6956{
    display: none;
  }
}

@media (max-width: 1200px) {
  .Rectangle-6956{
    display: none;
  }
}

.contact-subtitle {
  color: #a67872;
  font-size: max(20.7px, 1.818vw);
  line-height: 1;
  letter-spacing: 0.72px;
  margin: 2.02vw auto 0;
}

.frame-container {
  position: relative;
  top: 73.63px;
  left: 138px;
  /* width: 1644px; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 60px;
}

.your-name {
  position: relative;
  line-height: 160%;
  font-weight: 300;
  text-align: center;
  color: #403C3A;
}

.your-name-wrapper {
  width: 380px;
  border-radius: 30px;
  background: linear-gradient(#fefdfd, #fefdfd), #f0e7e2;
  border: 1px solid #af9e95;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 20px;
}
.your-company-name-wrapper {
  width: 381px;
  border-radius: 30px;
  background: linear-gradient(#fefdfd, #fefdfd), #f0e7e2;
  border: 1px solid #af9e95;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 20px;
}


.inner {
  width: 15px;
  border-bottom: 1px solid rgba(0, 75, 135, 0);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.div {
  width: 131px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0px 10px 0px 0px;
  box-sizing: border-box;
}
.wrapper {
  width: 158px;
  height: 153px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0px 0px 10px;
  box-sizing: border-box;
}
.your-message-parent {
  width: 800px;
  border-radius: 30px;
  background: linear-gradient(#fefdfd, #fefdfd), #f0e7e2;
  border: 1px solid #af9e95;
  box-sizing: border-box;
  height: 166px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 20px 0px;
}
.send {
  position: relative;
  line-height: 60%;
  font-weight: 500;
  z-index: 0;
}
.btn-send-child {
  width: 10px;
  position: absolute;
  margin: 0 !important;
  top: 24px;
  left: 163px;
  height: 10px;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}
.btn-send {
  width: 197px;
  border-radius: 30px;
  background-color: #131313;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 21px 20px 20px;
  box-sizing: border-box;
  position: relative;
  gap: 10px;
  font-size: 24px;
  color: #fefdfd;
}

.frame-parent1 {
  width: 800px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 30px 39px;
}

.contact-form {
  display: flex;
  min-width: 240px;
  align-items: flex-start;
  gap: 30px 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 800px;
  padding: 30px 0;
}

.form-fields {
  display: flex;
  min-width: 240px;
  width: 761px;
  align-items: flex-start;
  gap: 30px 39px;
  color: #131313;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-grow: 1;
  font: 300 20px/1.6 Poppins, sans-serif;
}

.form-input {
  align-self: stretch;
  border-radius: 30px;
  background-color: #f0e7e2;
  min-width: 240px;
  gap: 10px;
  flex-grow: 1;
  width: 304px;
  padding: 10px 20px;
  border: 1px solid #af9e95;
}

.message-container {
  border-radius: 30px;
  background-color: #f0e7e2;
  display: flex;
  min-width: 240px;
  min-height: 166px;
  align-items: flex-start;
  gap: 40px 100px;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-grow: 1;
  width: 761px;
  padding: 10px 20px 0;
  font: 300 20px/1.6 Poppins, sans-serif;
  border: 1px solid #af9e95;
}

.message-label {
  color: #131313;
}

.file-upload {
  display: flex;
  min-height: 153px;
  padding-bottom: 10px;
  flex-direction: column;
  align-items: center;
  color: #131313;
  justify-content: flex-end;
  width: 158px;
}

.file-upload-button {
  display: flex;
  width: 131px;
  max-width: 100%;
  padding-right: 10px;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}

.file-upload-icon-container {
  border-color: rgba(0, 75, 135, 0);
  border-bottom-width: 1px;
  align-self: stretch;
  display: flex;
  width: 15px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin: auto 0;
}

.file-upload-icon-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  aspect-ratio: 3.969;
  width: 100%;
  padding: 0 2px;
}

.file-upload-icon {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.send-button {
  border-radius: 30px;
  background-color: #131313;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: center;
  flex-grow: 1;
  width: 158px;
  padding: 21px 20px 20px;
}
.send-text {
  color: #fefdfd;
  /* Remove unsupported properties */
  /* leading-trim: both; */
  /* text-edge: cap; */
  
  z-index: 0;
  margin: auto 0;
  font: 500 24px/1.4 Poppins;
  
  /* Use line-height and margin adjustments for similar effect */
  line-height: 1.4; /* Adjust this to manage vertical spacing */
  padding: 0; /* Ensure no extra padding around the text */
}

.send-icon {
  align-self: flex-start;
  position: absolute;
  z-index: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  right: 24px;
  bottom: 24px;
  width: 10px;
  height: 10px;
}

.send-icon-inner {
  background-color: #fefdfd;
  border-radius: 50%;
  display: flex;
  width: 10px;
  height: 10px;
}


.company-details {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.02em;
  line-height: 2.828vw;
  opacity: 0.8;
  color: #403C3A;
}

.details1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
  font-size: max(1.818vw, 22px);
  margin-top: 4.01vw;
  margin-bottom: 4.01vw;

  @media (max-width: 768px) {

    margin-top: 0px;
  }
}

.we-are-based {
  align-self: stretch;
  position: relative;
  line-height: 140%;
  color: #403C3A;
}
.we-are-based-in-tel-aviv-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 25px;
  font-size: max(1.2vw, 17px);
}
.company-details-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: max(3vw, 30px);
  margin-top:60px;
}

/* Default styling for the link */
.facebook a {
  cursor: pointer;
  transition: .3s;
  color: inherit;          /* Uses the parent element's color */
  text-decoration: none;   /* Removes underline */
  color: #403C3A;
  position: relative;      /* Needed for positioning the pseudo-element */
}

.facebook a:before {
  content: "";
  position: absolute;
  height: 0.15vw; /* Line thickness in vw for responsiveness */
  width: 100%; /* Full width of the text */
  background: #ed6e66; /* Line color */
  bottom: -1vw; /* Position the line just below the text */
  left: 0;
  scale: 0 1; /* Initially hidden */
  transition: 0.3s, transform 0s 0.3s; /* Animation for line appearance */
}

/* Hover effect for desktop */
.facebook a:hover {
  color: #131313;
}

.facebook a:hover:before {
  scale: 1 1; /* Show line on hover */
  transform: translateY(0); /* Ensure line stays below the text */
}

/* Mobile styling */
@media (max-width: 768px) {
  /* Ensure the line is always visible and simulates hover */
  .facebook a:before {
    scale: 1 1; /* Make line visible by default on mobile */
    transform: translateY(0); /* Ensure the line is at the bottom of the text */
    background: #ed6e66; /* Line color red */
    height: 0.3vw;
  }

  .facebook a {
    color: #131313; /* Keep the text color changed as hover on mobile */
    font-weight: 400;
  }
}

.material-symbolsarrow-insert-icon {
  position: relative;
  border-radius: 32.59px;
  height: max(14px, 1.042vw);
  object-fit: contain;
  scale: 1.8;
  bottom: -1px;
}

.facebook-parent {
  border-bottom: 1px solid rgba(19, 19, 19, 0);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: max(4px, 0.521vw);
}

.socoal-media-links-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0px 10px 0px 0px;
  box-sizing: border-box;
}

.socoal-media-links {
  display: flex;
  flex-direction: row;
  gap:max(1.515vw, 32px);
  font-size:max(1.2vw, 17px);
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  justify-content: space-evenly;
  font-weight: 500;
}

.frame-div {
  width: 800px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 30px 0px;
  box-sizing: border-box;
  gap: 30px 10px;
}

.cookie-policy {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.cookie-policy-parent {
  margin-top: max(5vw, 40px);
  align-self: stretch;
  border-top: 1px solid rgb(166, 120, 114, 0.5);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  font-size: max(12px, 0.833vw);
  margin-left: 5.8vw;
  margin-right: 5.8vw;
}

.Rectangle-6956 {
  width: 28vw;
  height: auto;
  flex-grow: 0;
  border-radius: 1.8vw;
  background-image: url("img/Peach-Analyses2.jpg"); 
  clip-path: inset(100% 0 0 0 round 1.8vw); /* Start fully hidden with rounded corners */
  border-radius: 1.8vw; /* Maintain the rounded corners */
  filter: blur(10px); /* Initial blur */
  animation: reveal-from-bottom-with-blur 2s ease-in-out forwards;
  background-size: cover; /* Ensures the image covers the entire container */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
}


/* Grid Container */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Columns scale with viewport width */
  gap: 3.5vw 2vw; /* Vertical gap: 3.5vw, Horizontal gap: 2vw */
  margin-top: max(70px, 7vw);
  box-sizing: border-box;
  margin-bottom: max(50px, 5vw);
}

/* Individual Image Divs */
.image {
  width: 100%; /* Automatically adjust to the grid column size */
  aspect-ratio: 520 / 511.5; /* Maintain aspect ratio */
  background-size: contain; /* Make sure the SVG fits inside without clipping */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  transition: 0.3s;
}

/* Mobile Viewport */
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: 1fr; /* Single column layout for small screens */
    gap: 3.5vw; /* Keep the vertical gap only */
  }

  .image {
    width: 100%; /* Full width */
    aspect-ratio: 520 / 511.5; /* Keep the aspect ratio */
  }
}