.caveat{
  font-family: "Caveat" !important;
 }

#hero-mobile{
  display: none;
}

#arrows{
  position: absolute !important;
  z-index: 1000 !important;
}

ul{
  list-style-type: none;
}

.container{
  max-width: 90% !important;
}

.map{
  background-image: url(img/map-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 20vh;
  height: 80vh;
}

.map a{
  color: inherit;
  text-decoration: none;
}

small{
  display: block;
}

.sidenav2{
  width: 220px;
  position: sticky;
  top: 48px;
  margin-left: 100px;
}

.sidenav2 a{
  color: #27221B;
  padding: 16px;
  display: block;
  font-size: 1rem;
}

.sidenav2 a:hover{
  text-decoration: none;
  background-color: #E5DFD7;
  border-radius: 16px;
}

.submenu{
  position: sticky;
  top: 0;
  padding-top: 24px;
  padding-bottom: 24px;
  z-index: 1000;
  background: #faf4ec;
  margin-top: 12px;
}

.submenu a{
  padding: 12px;
  color: #27221B;
  margin-left: 24px;
}

.submenu a:hover{
  text-decoration: none;
  background-color: #E5DFD7;
  border-radius: 16px;
}

.bodymovinanim {
  width: 90%;
  max-width: 50px;
  margin-bottom: 30px;
  cursor: pointer;
}

b{
  font-weight: 600;
}

.ul{
  list-style-type: none;
  list-style: none;
}

.li{
  display: block;
}

#hire-me a{
  font-size: 20px !important;
}

#hire-me a:hover{
  text-decoration: none;
}

#right-nav{
  display: flex;
}

#menu nav{
  padding-top: 12px;
 }

 #menu .nav-list{
  list-style: none;
  display: inline-flex;
 }

 #menu .nav-list li{
  margin-left: 32px;
  padding-top: 5px;
 }

 #menu a{
  font-size: 1.4rem;
  color: #3C3730;
  text-decoration: none;
 }

 #menu a .active{
  color: #3C3730 !important;
 }

 #menu nav ul li a:hover{
  background-image: url(img/arrows/yellow-underline.png);
  background-repeat: no-repeat;
  width: 100%;
  color: grey;
 }

.menu{
  height: 30px;
  padding-top: 30px;
}

.menu a{
  display: block;
}

.menu #me{
  width: auto;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  text-align: right;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  width: 148px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 8px;
  text-align: right;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 1rem !important;
  text-align: right;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: rgba(5, 39, 39, 0.059)}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {color: black;
  background-color: rgba(5, 39, 39, 0.059);
  border: 2px solid black;
  }

.project_text{
  margin-bottom: -100px;
  position: relative;
  z-index: 1;
  margin-left: -12px;
  pointer-events: none;
  color: #333333;
}

#hero{
  height: 90vh;
  padding-top: 15vh;
}

#hero a{
  color: inherit;
  text-decoration: underline;
  font-size: 1.4rem;
  font-weight: 400;
}

#hero a:hover{
  color: rgb(190, 179, 163);
}

#hero p{
  color: #9FAB9F;
}

.project-hero{
  height: 380px;
  margin-top: -30px;
  background-repeat: no-repeat;
  background-position: center;
}

.mensaly-hero{
  background-color: #45BFBD;
}

.segfy-hero{
  background-color: #FF732A;
  background-image: url(img/segfy/dummy_hero.png);
}

.mynewinsurance-hero{
  background-color: #55F49F;
}

.blockcerts-hero{
  background-image: linear-gradient(45deg, #AEDF23, #1AC034);
}

.tapclicks-hero{
  background-image: linear-gradient(45deg, #268BEA, #0D45A4);
}

.maestro-hero{
  background-image: linear-gradient(45deg, #A000FF, #BB80FF);
}

.humankind-hero{
  background-image: linear-gradient(45deg, #AD3F25, #E17324);
}

.margin{
  margin-right: 100px;
  margin-left: 100px;
}

h4{
  font-size: 1.4rem;
  color: #333;
  font-weight: 400;
}

h5{
  font-size: 1.2rem;
}

h6{
  font-size: 0.8rem;
  color: #ccc;
  text-transform: uppercase;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

p{
  font-size: 1.2rem;
  font-weight: 200;
}

p small{
  font-size: 1rem;
  display: block;
}

hr{
  background-color: #BEB3A3;
  height: 1px;
}

h1,h2,h3,h4,p,a{
  font-family: 'Poppins', sans-serif !important;
}

h1{
  font-size: 4em;
  font-weight: 600;
}

h1 small{
  display: block;
  font-weight: 200;
  margin-top: 20px;
  margin-bottom: 50px;
  line-height: 1.2;
  color: grey;
}

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

h2{
  font-size: 2.2em;
  font-weight: 600;

}

h2 small {
  display: block;
  color: grey;
  font-weight: 400;
}

h3{
  font-weight: 600;
  font-size: 1.6em;
}

h3 small {
  display: block;
  color: grey;
  font-weight: 200;
}

.image{
  font-size: 1rem !important;
  color: grey;
  text-align: center;
}

.zoom {
  transition: transform .5s;
}

.zoom:hover {
  transform: scale(1.05);
}

footer{
  height: 900px;
  padding-top: 10vh;
  background-image: url(img/metal.png);
  background-repeat: no-repeat;
  background-position: bottom center;
}

.wrapper{
    display: flex;
    align-items: flex-end;
}

.social{
  margin-top: 100px;
}

.title{
  padding-top: 50px;
  max-width: 940px;
}

#introduction{
  padding-top: 50px;
  padding-bottom: 100px;
}

.social a{
  padding: 15px;
  font-size: 2em;
}

.project a{
  text-decoration: none;
  color: #333333;
}

.blockcerts{
  background-color: #EFE6D9;
  background-position: bottom;
  background-size: cover;
  object-fit: contain;
}

.blockcerts:hover{
  background-color: #E9DFD1;
}

.blockcerts-text-gradient{
  background-image: linear-gradient(45deg, #AEDF23, #1AC034);
  background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.tapclicks{
  background-image: linear-gradient(45deg, #268BEA, #0D45A4);
  background-position: bottom;
  background-size: cover;
  object-fit: contain;
}

.tapclicks:hover{
  background-image: linear-gradient(45deg, #4F9BE3, #2C58A3);
}

.tapclicks-text-gradient{
  background-image: linear-gradient(45deg, #268BEA, #0D45A4);
  background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.maestro-text-gradient{
  background-image: linear-gradient(45deg, #A000FF, #BB80FF);
  background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.humankind-text-gradient{
  background-image: linear-gradient(45deg, #AD3F25, #E17324);
  background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.segfy{
  background-image: linear-gradient(45deg, #FF9D43, #FF6321);
}

.segfy:hover{
  background-image: linear-gradient(45deg, #E98325, #D7480C);
}

.segfy-text-gradient{
  background-image: linear-gradient(45deg, #FF9D43, #FF6321);
  background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.mensaly-text-gradient{
  background-image: linear-gradient(45deg, #45BFBD, #62D4D2);
  background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.msn{
  background-color: #EFE6D9;
  background-size: cover;
  background-position: bottom;
}

.msn:hover{
  background-color: #E9DFD1;
}

.blockcerts-gradient{
  background-image: linear-gradient(45deg, #AEDF23, #1AC034);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
}

.msn-text-gradient{
  background-image: linear-gradient(45deg, #55F49F, #19C3DA);
  background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.project{
  border-radius: 25px;
  height: 80vh;
  cursor: pointer;
}

.mensaly{
  background-color: #45BFBD;
}

.mensaly:hover{
  background-color: #62D4D2;
}

.text{
  max-width: 680px !important;
  margin-left: auto;
  margin-right: auto;
}

.text p{
  margin-top: 30px;
}

#about{
  height: 95vh;
}

.vertical-img{
  position: relative;
  margin-right: auto;
  margin-left: auto;
  margin-top: 7.5vh;
}

.shadow{
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2);
}

.password{
  height: 80vh;
  max-width: 600px;
  margin-top: 100px;
  padding-left: 50px;
  padding-right: 50px;
  border-radius: 10px;
  background-color: #F1f1f1;
}

.password p{
  color: #9FAB9F;
}

.img_bottom{
  bottom: 0px;
  position: absolute;
  max-width: 700px;
}

.yellow-bg{
  background-color: #FAF4EB !important;
}

.sidenav{
  width: 256px;
  height: 900px;
  position: fixed;
  overflow-y: scroll;
  padding-bottom: 32px;
  margin-top: 80px;
  bottom: 700px;
}

.sidenav a{
  color: #5C5852;
  font-weight: 500;
  display: block;
  padding: 8px;
  padding-left: 42px;
  margin-bottom: 4px;
}

.sidenav .active{
  color: #ffffff;
  background-color: #27221B;
  margin-left: 12px;
  margin-right: 12px;
  border-radius: 5px;
  padding-left: 30px;
}

.sidenav a:hover{
  text-decoration: none;
  color: #BEB3A3;
  background-color: #554E44;
  margin-left: 12px;
  margin-right: 12px;
  border-radius: 5px;
  padding-left: 30px;
}

.sidenav::-webkit-scrollbar {
  display: none;
}

.sidenav input{
  margin-left: 42px;
}

.sidenav p{
  font-size: 14px;
  font-weight: 600;
  margin-left: 42px;
  color: #393E42;
}

.blog{
  max-width: 600px;
}

.button {
  display: inline-block;
  border: none;
  font-size: 1rem;
  padding: 20px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  text-align: left;
  background-color: rgb(235, 235, 235);
  border-radius: 40px;
}

.button:hover{
  background-color: rgb(203, 203, 203);
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;    
}

.button span:after {
  content: '\203a';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.cta {
  position: relative;
  margin: auto;
  padding: 19px 22px;
  transition: all 0.2s ease;
}
.cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 28px;
  background: rgba(227, 227, 227, 0.5);
  width: 56px;
  height: 56px;
  transition: all 0.3s ease;
}
.cta span {
  position: relative;
  font-size: 16px;
  line-height: 18px;
  font-weight: 600;
  vertical-align: middle;
}
.cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #111;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}
.cta:hover:before {
  width: 100%;
  background: linear-gradient(90deg, rgba(220,220,220,1) 0%, rgba(220,220,220,0) 100%);
}
.cta:hover svg {
  transform: translateX(0);
}
.cta:active {
  transform: scale(0.96);
}

.btn{
  border-radius: 8px;
  font-size: 20px;
  text-decoration: none !important;
}

.btn-primary{
  background-color: #3C3730;
  border: 2px solid #3C3730;
  padding: 8px 24px;
}

.btn-primary:hover{
  background-color: #1b1a1a;
  border: 2px solid #2D2D2D;
}

.btn-secondary{
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid #3C3730;
  color: #3C3730 !important;
  padding: 8px 24px;
  border-radius: 8px;
  background-color: #FAF4EB;
}

.btn-secondary:hover{
  background-color: #DEDCD4;
}

.btn-tertiary{
  background-color: rgba(0, 0, 0, 0);
  color: #3C3730 !important;
  padding: 8px 24px;
  border-radius: 8px;
  background-color: #FAF4EB80;
}

.btn-tertiary:hover{
  background-color: #DEDCD4;
}

.btn-opacity{
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.717);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  padding: 16px;
  padding-left: 24px;
  padding-right: 24px;
  color: #fff;
}

.btn-opacity:hover{
background-color: #1b1a1a;
border: none;
}

.btn-opacity a{
  color: inherit;
  text-decoration: inherit;
}

.darker{
  background-color: #EDE6DB;
  padding-bottom: 100px;
}

.alert{
  color: #F322AC;
  background-color:#FCDBF1;
  width: 600px;
  margin-top: 30px;
  padding-bottom: 0px;
}

.spacing{
  margin-top: 24px;
}

#humankind{
  background-image: linear-gradient(45deg, #AD3F25, #E17324);
  padding-top: 40px;
}

#tapclicks{
  background-image: linear-gradient(45deg, #268BEA, #0D45A4);
  padding-top: 40px;
}

#maestro{
  background-image: linear-gradient(45deg, #A000FF, #BB80FF);
  padding-top: 40px;
}

.card h3{
  margin-bottom: 24px;
}

.card h3 small{
  color: #ffffff;
  font-size: 1.4rem;
}

#bcbcwallet{
  background-color: #EFE6D9;
  padding-top: 40px;
  padding-bottom: 40px;
}

a{
font-size: 20px;
}

#segfyfy{
  background-image: linear-gradient(45deg, #FF9D43, #FF6321);
  padding-top: 40px;

}

#mensalyly{
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #45BFBD;

}

#msnn{
  padding-top: 40px;
  background-color: #EFE6D9;
}

.prototype{
  background-color: #1E1E1E;
  background-image: url(img/tapclicks/figma.jpg);
  background-repeat: cover;
  background-position: center;
  background-attachment: fixed;
  padding-bottom: 48px;
  padding-top: 48px;
  margin-bottom: 48px;
}

#feedback .card h1{
  margin-bottom: -12px !important;
}

footer a{
  color: inherit;
  text-decoration: none;
}

footer a:hover{
  color: #000;
  text-decoration: none;
}

.table th, .table td {
  background-color: transparent;
}

.modal-body{
  padding: 0;
}

#pain, #needs{
  padding: 32px;
  border-radius: 8px;
  width: 49% !important;

}

#pain{
  background-color: #EAD0C4;

}

#needs{
  background-color: #DDE0C7;
  margin-left: auto;
}

#wireframes-tap{
  background-image: url(img/tapclicks/wireframesbg.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
}

.horizontal-scroll {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding-left: 200px;
  overflow-x: hidden; /* Hide the scrollbar */
  padding: 10px; /* Add padding to prevent content from touching the edges */
  padding-bottom: 96px;
}
.card {
  padding: 32px;
  width: 500px;
  height: 550px;
  border-radius: 16px;
  box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
  flex-shrink: 0; /* Prevent the card from shrinking */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  align-items: center;
  border: none;
  text-align: center;
}

.horizontal-scroll a{
  text-decoration: none !important;
}

.horizontal-scroll a:hover{
  opacity: 0.9;
  cursor: pointer;
}

.container-values {
  display: flex;
  align-items: center;
}

#values{
  display: flex;
}

#control-buttons{
  margin-left: auto;
}

#blank{
  width: 100px;
  background-color: transparent !important;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 20px;
}

.column-container {
  display: flex;
  padding: 25px;
}
.column {
  flex: 1;
  padding: 25px;
}

.animated-image {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  transition-delay: var(--animation-delay);
}

.animated-image.visible {
  opacity: 1;
  transform: translateY(0);
}

/*card*/

.card-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
  padding-right: 0px;
}

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

.card-wrapper {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  padding: 20px 0;
  width: 100%;
  scroll-behavior: smooth;
  transition: scroll 0.3s ease;
}

.card-2 {
  width: 440px;
  border-radius: 16px;
  padding: 20px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
}

.card-2 img{
  user-select: none;
  pointer-events: none;
}

.card-2 img.card-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  object-fit: cover;
  border-radius: 16px;
}

/*card3*/

.card-3 {
  width: 900px;
  border-radius: 8px;
  padding: 20px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
}

.card-3 img{
  user-select: none;
  pointer-events: none;
}

.card-3 img.card-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  object-fit: cover;
  border-radius: 16px;
}

.card-content p {
  margin-bottom: 20px;
  line-height: 1.5;
  font-size: 1rem;
}

.card-content .action-button {
  background-color: transparent;
  color: var(--bs-blue);
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding-left: 0;
}

.card-content .action-button:hover {
  opacity: 80%;
}

/* Swipe behavior */
.card-wrapper {
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.card-wrapper::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}

/* Show the grabbing cursor when dragging */
.card-wrapper.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

/* Default cursor over the cards */
.card-wrapper {
  cursor: grab;
  cursor: -webkit-grab;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Four columns */
  gap: 24px; /* Space between columns */
}

.grid-container div {
  padding: 8px;
}

.card-products{
  background-color: white;
  padding: 16px;
  border-radius: 16px;
}

.testimonial{
  background-color: white;
  border-radius: 16px;

}

.testimonial p{
  padding: 24px;
}

.grid-container2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 24px; /* Adds space between the columns */
  margin-top: 24px;
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

.waving-hand {
  display: inline-block;
  animation: wave 1.2s infinite ease-in-out;
  transform-origin: 70% 70%;
}

/* Fade-in animation */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Typing animation */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* h1 fade-in */
.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

/* Typing effect for h4 */
.typing-effect {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: s;
}

/* Human-centered text fade-in */
.human-centered-design {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 3s;
}

/* Neuroscience text fade-in */
.neuroscience {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 4s;
}

/* Buttons fade-in */
.fade-in-btn {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 5s;
}

/*submenu*/

#submenu{
  max-width: 90%;
  border-radius: 16px;
  border: 1px solid #DDDDDD;
  margin-top: 24px;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 24px;
  z-index: 1000;
}

#submenu li{
  text-decoration: none;
  list-style: none;
  margin-right: 24px;
}

#submenu a{
  font-weight: 600;
  font-size: 1rem;
  margin-top: 16px !important;
}

#submenu img{
  height: 32px;
  width: 32px;
}

#submenu .nav-list {
  list-style-type: none; /* Removes bullet points */
  display: flex; /* Aligns list items side by side */
  justify-content: space-around; /* Distributes space evenly */
  padding: 0; /* Removes default padding */
}

#submenu .nav-link {
  opacity: 0.4; /* Default opacity */
  transition: opacity 0.3s ease;
}

#submenu .nav-link:hover {
  opacity: 1 !important; /* Full opacity on hover */
}

#submenu .nav-list li {
  text-align: center; /* Centers the text and image */
}

#submenu .nav-list li img {
  display: block; /* Ensures images are block-level elements */
  margin-bottom: 8px;
}

#submenu .nav-list li a {
  display: block; /* Ensures the link takes the whole width */
  margin-top: 8px; /* Adds space between image and text */
  text-decoration: none; /* Removes underline from links */
  color: inherit; /* Inherits color from parent */
}

#submenu .nav-link {
  opacity: 0.4;
  transition: opacity .25s ease;}
  
#submenu .nav-link.active {
  opacity: 1;}


/* branding */

.branding-container {
  display: flex;
  flex-wrap: wrap; /* permite quebrar linha se não couberem */
  gap: 24px; /* espaço entre os cards */
}


.branding-card{
  background-color: white;
  width: 344px;
  height: 600px;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.branding-card p, .branding-card h3{
  color: white;
  text-shadow: 1px 1px 2px black;
  text-align: center;
}

.text-button {
  margin-top: auto;
}

.branding-card button{
  width: 100%;
}

.logo-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#symbio-branding{
  background-image: url(img/branding/symbio/showcase.jpg);
  background-size: cover;
}

#maestro-branding{
  background-image: url(img/branding/maestro/showcase.jpg);
  background-size: cover;
}

#uxpandy-branding{
  background-image: url(img/branding/uxpandy/showcase.jpg);
  background-size: cover;
}

#legacy-branding{
  background-image: url(img/branding/legacy/showcase.jpg);
  background-size: cover;
}

#mensaly-branding{
  background-image: url(img/branding/mensaly/showcase.jpg);
  background-size: cover;
}

#curls-branding{
  background-image: url(img/branding/curls/showcase.jpg);
  background-size: cover;
}

/*branding*/

#branding-showcase{
  margin-top: 48px;

}

#branding-showcase img{
  width: 200px;
}

#branding-showcase {
  margin-top: 48px;
}

#branding-showcase p{
  font-weight: 400;
  color: #BEB3A3;
}

.brand-card {
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  background-color: #FAF9F6;
  transition: background-color 0.25s ease;
}

.brand-card img {
  width: 200px;
  max-width: 100%;
  height: auto;
}

.brand-text {
  margin: 0;
}

.brand-btn {
  margin-top: 8px;
}

.brand-card:hover {
  background-color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


/* Trilho horizontal */
.brands-track{
  display: flex;
  flex-wrap: nowrap;         /* tudo numa linha só */
  gap: 16px;                 /* espaço entre cards */
  overflow-x: auto;          /* habilita scroll horizontal */
  overflow-y: hidden;
  scroll-snap-type: x mandatory; /* snap opcional */
  -webkit-overflow-scrolling: touch; /* scroll suave no iOS */
  padding-bottom: 48px;       /* respiro para não cortar sombra */
}

/* Cada “col” vira um item de largura fixa */
.brands-track > .col{
  flex: 0 0 auto;            /* não encolhe, não cresce */
  width: 240px;              /* ajuste conforme o card */
  scroll-snap-align: start;  /* alinha no snap */
}

/* Seu estilo existente */
#branding-showcase{ margin-top: 48px; }
#branding-showcase img{ width: 200px; }
#branding-showcase p{ font-weight: 400; }

.brand-card {
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: background-color 0.25s ease;
}

.brand-card img {
  width: 200px;
  max-width: 100%;
  height: auto;
}

/* Reserva de espaço para texto+botão, mas invisível até o hover */
.brand-info {
  min-height: 10px; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

.brand-text { margin: 0; }
.brand-btn { margin-top: 8px; }

.brand-card:hover .brand-info { opacity: 1; visibility: visible; }


.brands-track::-webkit-scrollbar { height: 8px; }
.brands-track::-webkit-scrollbar-thumb { background: #ccc; border-radius: 8px; }
@supports not selector(::-webkit-scrollbar) {
}

.brands-track{
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.brands-track::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */
.brands-track { scrollbar-width: none; }            /* Firefox */
.brands-track { -ms-overflow-style: none; }         /* IE/Legacy Edge */


#branding-showcase {
  max-width: 100% !important;
}

#gallery{
  margin-top: 100px;
}

#gallery img {
  border-radius: 24px;
  max-width: 100%;
  height: auto;
  display: block;
}

#gallery p{
  font-size: 1.4rem;
  margin-top: 24px;
  font-weight: 400;
  color: #787777;
}

#gallery h5{
  margin-top: 12px;
}

.accordion-button{
  background-color: #FAF9F6;
}

.accordion-button:focus{
  display: none;
}

.accordion-button:hover{
  background-color: #E9E8DE;
}

.accordion-button:not(.collapsed) {
  background-color: #E9E8DE;
  color: #212529;
  box-shadow: none;
}

.accordion-item {
  border: 4px solid #FAF4EB;
  background-color: #fff;
}

/*humankind*/

.survey h4{
  font-weight: 600;
}

.hk-survey-bg{
    background-color: white;
    border-radius: 16px;
    margin-top: 98px;
    padding: 48px;
}

.hk-survey-bg p{
    background-color: #FCF9F4;
    padding: 16px;
    border-radius: 8px;

}

.hk-survey-take-away{
    background-color: #FCF9F4;
    padding: 24px;
    border-radius: 16px;
    margin-top: 24px;
}

:root{
    --track: #EDE8DF;         /* cor do trilho */
    --fill:  11 64.8% 41.2%;     /* HSL (roxo de exemplo) */
    --radius: 12px;
}

.result{
    position: relative;
    background: var(--track);
    border-radius: var(--radius);
    padding: 8px;
    padding-left: 16px;
    padding-right: 16px;
    margin: .625rem 0;
    overflow: hidden;

    /* layout do texto */
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: .75rem;
    align-items: center;
}

/* barra preenchida */
.result::before{
    content: "";
    position: absolute;
    inset: 0;
    width: calc(var(--p, 0) * 1%);
    background: hsl(var(--fill) / 0.18);
    /* gradiente opcional mais forte no começo */
    background-image:
            linear-gradient(90deg,
            hsl(var(--fill) / 0.35),
            hsl(var(--fill) / 0.20) 40%,
            hsl(var(--fill) / 0.18));
    border-radius: inherit;
    transform: translateZ(0); /* ajuda na suavização */
}

/* ===== Marquee base ===== */
.wf-marquee {
  --gap: 20px;           /* espaço entre imagens */
  --h: 400px;            /* altura das imagens (ajuste) */
  --duration: 120s;       /* velocidade do loop (maior = mais lento) */

  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: var(--h);  /* evita “buraco” enquanto carrega */
  box-sizing: border-box;
  user-select: none;
}

.wf-track {
  display: inline-flex;
  gap: var(--gap);
  align-items: center;
  /* Dica de performance */
  will-change: transform;
  /* A pista começa já preenchida na tela */
  animation: wf-scroll var(--duration) linear infinite;
  width: max-content; /* deixa a pista do tamanho exato do conteúdo */
}

.wf-marquee.rtl .wf-track {
  animation-direction: reverse; /* direita -> esquerda */
}

.wf-marquee img {
  height: var(--h);
  width: auto;
  flex: 0 0 auto;
  display: block;
}

/* Loop contínuo: a pista anda metade do próprio comprimento
   (porque duplicamos o conteúdo), e recomeça sem “pulo”. */
@keyframes wf-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Acessibilidade: se o usuário prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .wf-track { animation: none; }
}

/* Responsivo básico */
@media (max-width: 768px) {
  .wf-marquee { --h: 140px; --gap: 12px; --duration: 45s; }
}


#research{
  padding-top: 98px;
  padding-bottom: 98px;
}


/* rótulos acima da barra */
.result .label,
.result .pct{
    position: relative; /* fica acima do ::before */
    z-index: 1;
}

.take-away{
  background-color: #FCF9F4;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);

}

/* highlight com vibe artesanal (ideal para UMA linha) */
.marker {
  --marker-color: 255, 234, 0;
  --marker-opacity: .55;

  position: relative;
  display: inline-block;
  padding: 0 .2em;
}
.marker::before {
  content: "";
  position: absolute;
  left: -.1em; right: -.1em;
  height: 80%;
  background: rgba(var(--marker-color), var(--marker-opacity));
  border-radius: .25em;
  transform: rotate(-2deg);
  z-index: -1;
}

/*strenghts and weaknesses*/

.strenghts{
  background-color: #B8EEB8;
  padding: 32px;
  border-radius: 16px 0px 0px 16px;
}

.weaknesses{
  background-color: #EEC3B8;
  padding: 32px;
  border-radius: 0px 16px 16px 0px;
}







/* gallery 2*/

.image-row {
  display: flex;
  gap: 16px;
  margin-top: 48px;
}

.image-row {
  display: flex;
  gap: 16px;
  overflow: hidden; /* esconde imagens que saem da tela */
}

.image-row-inner {
  display: flex;
  gap: 16px;
  animation: scroll 20s linear infinite; /* 20s = velocidade */
}

.fixed-img {
  width: 900px;  /* tamanho fixo menor pra caber melhor */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-5%); /* move metade do conteúdo */
  }
}



@media only screen and (max-width: 768px){

  #hero{
    display: none;
  }

  #contact-button{
    display: none;
  }

  #hero-mobile{
    text-align: center;
    display: contents;
  }

  #hero-mobile a{
    text-decoration: none !important;
    color: inherit;
  }

  .project h1{
    font-size: 3rem;
  }

  .project h3{
    font-size: 1.4rem;
  }

  #arrow{
    display: none;
  }

  .segfy, .msn{
    margin-top: 32px;
  }

  .segfy{
    height: 450px;
  }

  .segfy img{
    max-width: 300px;
  }

  .mensaly{
    height: 450px;
  }

  .blockcerts{
    height: 450px;
  }

  .msn{
    height: 450px;
  }
  
  #getintouch{
    display: none;
  }

  #footer-menu{
    display: none;
  }

  footer button{
    width: 100%;
  }

  footer h1, h3{
    text-align: center;
  }

  footer{
    background-image: url(img/metal-opacity.png);
  }

@media only screen and (max-width: 2200px) and (min-width: 769px){

}
}