/* Light mode (default) */
:root {
  --bg-color: #F5F5F7;
  --black: black;
  --text-color: #111111;
  --button-bg: #f0f0f0;
  --nav-bg: #0000000e;
  --blur-header: rgba(255, 255, 255, 0.475);
  --shadow-colro: rgba(0, 0, 0, 0.1);
  --cards: #F5F5F7;
  --ab_cards_border: #929292;
  --ab_cards: #F5F5F7;
  --white: #ffffff;


}

/* Dark mode */
[data-theme="dark"] {
  --bg-color: #161617;
  --black: #f8f8f8;
  --text-color: #ffffff;
  --button-bg: #333333;
  --blur-header: rgba(0, 0, 0, 0.441);
  --shadow-colro: rgba(255, 255, 255, 0.021);
  --card: rgb(31, 31, 31);
  --ab_cards_border: rgb(94, 94, 94);
  --ab_cards: rgb(22, 22, 22);
  --white: #000000;

}

[data-theme="dark"] .st-sunMoonThemeToggleBtn svg,
[data-theme="dark"] .st-sunMoonThemeToggleBtn svg .sunMoon,
[data-theme="dark"] .st-sunMoonThemeToggleBtn svg .sunRay {
  color: #fff;
  fill: #fff;
  stroke: #fff;
}


body {
  display: flex;
  width: 100%;
  margin: 0px;
  flex-direction: column;
  background-color: var(--bg-color);
  margin: 0px;
  color: var(--text-color);
  transition: ease-in-out 0.1s;
  font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  overflow-x: hidden;
}

nav {
  background-color: var(--nav-bg);
}

a {
  color: var(--accent-color);

}

h5 {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

.testo {
  display: block;
}

.header {
  position: fixed;
  width: 100%;
  padding-top: 30px;
  justify-content: center;
  z-index: 10;
  align-items: center;
  display: flex;
}

.con-1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 50px 0px 0px 0px;
}

.con0 {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.con {
  display: flex;
  width: 100%;
  max-width: 1200px;
  height: 590px;
  padding: 72px 0px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.con_left {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  gap: 10px;
  flex: 1 0 0;
  align-self: stretch;
}

.con_right {
  display: flex;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 10px 14px;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 20px;
  flex: 1 0 0;
  align-self: stretch;

}


.con_cards {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  align-items: center;
  width: 100%;
  padding: 70px 0px;
}

.card_top {
  display: flex;
  flex-direction: column;
  padding: 30px 20px;
  align-items: center;
  box-sizing: border-box;
}

.card_top h1 {
  text-align: center;
}

.card_top h3 {
  text-align: center;
}

.card_bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 20px;
  box-sizing: border-box;
}

.cards {
  display: flex;
  flex-direction: row;
  background-color: var(--card);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-radius: 20px;
  gap: 20px;
  padding: 30px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
}

.counter {
  font-size: 48px;
  font-weight: 400;
  margin: 20px 0;
  background: linear-gradient(130deg, var(--black), var(--bg-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1 {
  font-size: 50px;
  color: var(--black);
  font-weight: 600;
  margin: 0px;
}

h2 {
  margin: 0px;
  font-size: 30px;
  font-weight: 400;
}

h3 {
  margin: 0px;
  font-size: 20px;
  font-weight: 300;
}

p {
  font-size: 16px;
  font-weight: 400;
}


.con_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  padding: 30px;
  gap: 20px;
  box-sizing: border-box;

}

.products_1 {
  cursor: pointer;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
  border-radius: 20px;
  width: 100%;
  background: radial-gradient(197.02% 119.74% at 9.14% 16.93%, #ab6cfd 0%, #EEE0FF 100%);
  background-size: 200% 200%;
  background-position: left;
  transition: background-position 0.3s ease, background-size 0.3s ease;
  overflow: hidden;
  align-self: stretch;
  box-shadow: 0px 0px 40px var(--shadow-colro);

}

.products_1:hover {
  background-position: top;
  background-size: 300% 300%;
}

.products_1_con {
  display: flex;
  max-width: 1200px;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 20px;
}

.products_1_up {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 20px;
}

.products_1_up_right svg {
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1), fill 0.4s;
  fill: #C9A7FF;
  /* Light purple by default */
}

.products_1:hover .products_1_up_right svg {
  transform: translateX(12px);
  /* Move right on hover */
  fill: #8a50e7;
  /* Darker purple on hover */
}

.products_1_up_right {
  width: 100px;
}

.products_1_up_left {
  width: 100px;
}

.products_1_up_middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.products_1_down {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.ds_1 {
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);


}

.ds_2 {
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);

  margin: 0px -180px -80px -180px;
}

.ds_3 {
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);

}


.products_1:hover .ds_1 {
  transform: translateX(-20px);
  /* Move image up on hover */
}

.products_1:hover .ds_2 {
  transform: translateY(-20px);
  /* Move image up on hover */
}

.products_1:hover .ds_3 {
  transform: translateX(20px);
  /* Move image up on hover */
}

.products_1_h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0px;
  color: white;
}

.products_1_p {
  font-size: 13px;
  font-weight: 400;
  color: white;
}











.products_2 {
  display: flex;
  width: 50%;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
  border-radius: 20px;
  background: radial-gradient(197.02% 119.74% at 9.14% 16.93%, #7e7e7e 0%, #f3f3f3 100%);
  background-size: 200% 200%;
  background-position: left;
  transition: background-position 0.3s ease, background-size 0.3s ease;
  overflow: hidden;
  align-self: stretch;
  padding: 20px 30px 0px 20px;
  box-shadow: 0px 0px 40px var(--shadow-colro);

}

.products_2:hover {
  background-position: top;
  background-size: 300% 300%;
}

.products_2_con {
  display: flex;
  max-width: 1200px;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.products_2_up {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-content: start;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 20px;
}

.products_2_up_right svg {
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1), fill 0.4s;
  fill: #d6d6d6;
  /* Light purple by default */
}

.products_2:hover .products_2_up_right svg {
  transform: translateX(12px);
  /* Move right on hover */
  fill: #f3f3f3;
  /* Darker purple on hover */
}

.products_2_up_right {
  width: 100px;
  display: flex;
  justify-content: end;
}

.products_2_up_left {
  width: 100px;
}

.products_2_up_middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.products_2_down {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.am_1 {
  width: 150px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  margin-top: -30px;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);

}

.am_2 {
  width: 300px;
  margin: -35px;
  margin-top: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);

}

.am_3 {
  width: 150px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);

}



.products_2:hover .am_1 {
  transform: translateY(-20px);

  transition-delay: 0.09s;
  /* animates after am_1 */
}

.products_2:hover .am_2 {
  transform: translateY(20px);
  transition-delay: 0.0s;
  /* animates after am_2 */

}

.products_2:hover .am_3 {
  transform: translateY(-20px);

}

.products_2_h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0px;
  color: white;
}

.products_2_p {
  font-size: 13px;
  font-weight: 400;
  color: white;
}





.products_3 {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
  border-radius: 20px;
  width: 50%;
  background: radial-gradient(197.02% 119.74% at 9.14% 16.93%, #6DC38B 0%, #5CC4D7 100%);
  background-size: 200% 200%;
  background-position: left;
  transition: background-position 0.3s ease, background-size 0.3s ease;
  overflow: hidden;
  align-self: stretch;
  padding: 20px 30px 0px 20px;
  box-shadow: 0px 0px 40px var(--shadow-colro);

}

.products_3:hover {
  background-position: top;
  background-size: 300% 300%;
}


.products_3_up {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-content: start;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 20px;
}

.products_3_up_right svg {
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1), fill 0.4s;
  fill: #5ba876;
  /* Light purple by default */
}

.products_3:hover .products_3_up_right svg {
  transform: translateX(12px);
  /* Move right on hover */
  fill: #326544;
  /* Darker purple on hover */
}

.products_3_up_right {
  width: 100px;
  display: flex;
  justify-content: end;
}

.products_3_up_left {
  width: 100px;
}

.products_3_up_middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.products_3_down {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.us_1 {
  width: 380px;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
  margin-top: -150px;

}

.us_2 {
  width: 380px;
  margin-left: -270px;
  margin-right: -270px;
  margin-top: -75px;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.us_3 {
  width: 380px;
  z-index: 3;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.products_3:hover .us_1 {
  transform: translate(-10px, -40px);

  transition-delay: 0.0s;
}

.products_3:hover .us_2 {
  transform: translate(10px, -10px);
  transition-delay: 0.0s;

}

.products_3:hover .us_3 {
  transform: translate(10px, 20px);

}

.products_3_h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0px;
  color: white;
}

.products_3_p {
  font-size: 13px;
  font-weight: 400;
  color: white;
}




.products_3_con {
  display: flex;
  max-width: 1200px;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
}




.products_4 {
  /* Narrower */
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
  border-radius: 20px;
  width: 30%;
  background: radial-gradient(197.02% 119.74% at 9.14% 16.93%, #7045D3 0%, #e4f3ff 100%);
  background-size: 200% 200%;
  background-position: left;
  transition: background-position 0.3s ease, background-size 0.3s ease;
  overflow: hidden;
  align-self: stretch;
  padding: 20px 30px 0px 20px;
  box-shadow: 0px 0px 40px var(--shadow-colro);
}

.products_4:hover {
  background-position: top;
  background-size: 300% 300%;
}


.products_4_up {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-content: start;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 20px;
}

.products_4_up_right svg {
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1), fill 0.4s;
  fill: #b484ef;
  /* Light purple by default */
}

.products_4:hover .products_4_up_right svg {
  transform: translateX(12px);
  /* Move right on hover */
  fill: #5a30bd;
  /* Darker purple on hover */
}

.products_4_up_right {
  width: 100px;
  display: flex;
  justify-content: end;
}

.products_4_up_left {
  width: 100px;
}

.products_4_up_middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.products_4_down {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.ho_1 {
  width: 270px;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);


}

.ho_2 {
  width: 270px;
  z-index: 2;
  margin: 0px -250px 0px -250px;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);

}

.ho_3 {
  width: 270px;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);

}

.products_4:hover .ho_1 {
  transform: translate(-50px, -30px) rotate(-10deg);
}

.products_4:hover .ho_2 {
  transform: translateY(100px);


}

.products_4:hover .ho_3 {
  transform: translate(50px, -30px) rotate(10deg);

}

.products_4_h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0px;
  color: white;
}

.products_4_p {
  font-size: 13px;
  font-weight: 400;
  color: white;
}








.products_5 {
  display: flex;

  /* Wider*/
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
  border-radius: 20px;
  width: 70%;
  background: radial-gradient(197.02% 119.74% at 9.14% 16.93%, #a45fff 0%, #6b09ea 100%);
  background-size: 200% 200%;
  background-position: left;
  transition: background-position 0.3s ease, background-size 0.3s ease;
  overflow: hidden;
  align-self: stretch;
  padding: 20px 30px 0px 20px;
  box-shadow: 0px 0px 40px var(--shadow-colro);
}

.products_5:hover {
  background-position: top;
  background-size: 300% 300%;
}


.products_5_up {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-content: start;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 20px;
}

.products_5_up_right svg {
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1), fill 0.4s;
  fill: #C9A7FF;
  /* Light purple by default */
}

.products_5:hover .products_5_up_right svg {
  transform: translateX(12px);
  /* Move right on hover */
  fill: #8a50e7;
  /* Darker purple on hover */
}

.products_5_up_right {
  width: 100px;
  display: flex;
  justify-content: end;
}

.products_5_up_left {
  width: 100px;
}

.products_5_up_middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.products_5_down {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.ic_1 {
  width: 480px;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);

}

.ic_2 {
  width: 480px;
  margin: 0px -350px -200px -350px;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
}

.ic_3 {
  width: 480px;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
}

.products_5:hover .ic_1 {
  transform: translateY(-40px);

  transition-delay: 0.1s;
}

.products_5:hover .ic_2 {
  transform: translateY(-30px);
  transition-delay: 0.05s;

}

.products_5:hover .ic_3 {
  transform: translateY(-20px);

}

.products_5_h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0px;
  color: white;
}

.products_5_p {
  font-size: 13px;
  font-weight: 400;
  color: white;
}

.products_4_con {
  display: flex;
  max-width: 1200px;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 20px;
}


.products_6 {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
  border-radius: 20px;
  width: 100%;
  height: 200%;
  background: radial-gradient(197.02% 119.74% at 9.14% 16.93%, #000000 0%, #6b09ea 100%);
  background-size: 200% 200%;
  background-position: left;
  transition: background-position 0.3s ease, background-size 0.3s ease;
  overflow: hidden;
  align-self: stretch;
  padding: 20px;
  box-shadow: 0px 0px 40px var(--shadow-colro);

}

.products_6:hover {
  background-position: top;
  background-size: 300% 300%;
}

.products_6_con {
  display: flex;
  max-width: 1200px;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 20px;
}

.products_6_up {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 20px;
}

.products_6_up_right svg {
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1), fill 0.4s;
  fill: #2f1756;
  /* Light purple by default */
}

.products_6:hover .products_6_up_right svg {
  transform: translateX(12px);
  /* Move right on hover */
  fill: #28104e;
  /* Darker purple on hover */
}

.products_6_up_right {
  width: 100px;
}

.products_6_up_left {
  width: 100px;
}

.products_6_up_middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.products_6_down {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.ag_1 {
  width: 500px;

  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);


}

.ag_2 {
  width: 500px;
  margin: 0px -200px -80px -200px;
  z-index: 2;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);


}

.ag_3 {
  width: 500px;
  transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);


}


.products_6:hover .ag_1 {
  transform: translateX(-20px);
  /* Move image up on hover */
}

.products_6:hover .ag_2 {
  transform: translateY(-20px);
  /* Move image up on hover */
}

.products_6:hover .ag_3 {
  transform: translateX(20px);
  /* Move image up on hover */
}

.products_6_h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0px;
  color: white;
}

.products_6_p {
  font-size: 13px;
  font-weight: 400;
  color: white;
}
























































/* a clone from joshwcomeau.com 
 * but this version runs on pure CSS
 */
/* Disable animations on page load */
.st-sunMoonThemeToggleBtn.no-transition,
.st-sunMoonThemeToggleBtn.no-transition * {
  transition: none !important;
  animation: none !important;
}

.themeToggle {
  color: #000000;
  width: 3em;
}

.st-sunMoonThemeToggleBtn {
  position: relative;
  width: 32px;
  /* Smaller size */
  height: 32px;
  /* Smaller size */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  /* Adjust as needed */

}

.st-sunMoonThemeToggleBtn .themeToggleInput {
  opacity: 0;
  width: 100%;
  aspect-ratio: 1;
}

.st-sunMoonThemeToggleBtn svg {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
  transform: rotate(40deg);
}

.st-sunMoonThemeToggleBtn svg .sunMoon {
  transform-origin: center center;
  transition: inherit;
  transform: scale(1);
}

.st-sunMoonThemeToggleBtn svg .sunRay {
  transform-origin: center center;
  transform: scale(0);
}

.st-sunMoonThemeToggleBtn svg mask>circle {
  transition: transform 0.64s cubic-bezier(0.41, 0.64, 0.32, 1.575);
  transform: translate(0px, 0px);
}

.st-sunMoonThemeToggleBtn svg .sunRay2 {
  animation-delay: 0.05s !important;
}

.st-sunMoonThemeToggleBtn svg .sunRay3 {
  animation-delay: 0.1s !important;
}

.st-sunMoonThemeToggleBtn svg .sunRay4 {
  animation-delay: 0.17s !important;
}

.st-sunMoonThemeToggleBtn svg .sunRay5 {
  animation-delay: 0.25s !important;
}

.st-sunMoonThemeToggleBtn svg .sunRay5 {
  animation-delay: 0.29s !important;
}

.st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg {
  transform: rotate(90deg);
}

.st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg mask>circle {
  transform: translate(16px, -3px);
}

.st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg .sunMoon {
  transform: scale(0.55);
}

.st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg .sunRay {
  animation: showRay1832 0.4s ease 0s 1 forwards;
}

@keyframes showRay1832 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}



















.img_1 {
  width: 70%;
  border-radius: 15px;
  box-shadow: 0px 0px 20px var(--shadow-colro)
}

.header-con {
  width: 20px;
  position: fixed;
  display: flex;
  width: 100%;
  z-index: 3;
  padding-top: 30px;
  justify-content: center;
  align-items: center;
  display: flex;
  box-sizing: border-box;
}

.header-blur {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
  max-height: none;
  gap: 30px;
  display: flex;
  background-color: var(--blur-header);
  backdrop-filter: blur(20px);
  padding: 10px 15px;
  border-radius: 100px;
}

.btn-header {
  display: flex;
  font-size: 13px;
  padding: 10px 15px;
  border-radius: 100px;
  transition: all 0.1s ease-in-out;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-header:hover {
  background-color: #ffffff28;
  transition: all 0.1s;

}

.btn_main {
  font-weight: bold;
  color: var(--bg-color);
  border-radius: 10px;
  cursor: pointer;
  width: 120px;
  height: 45px;
  border: none;
  background-color: var(--black);
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn_main:hover {
  background-color: var(--black);
  transition: ease-in-out 0.3s;
}

.btn_main .span-mother {
  display: flex;
  overflow: hidden;
}

.btn_main:hover .span-mother {
  position: absolute;
}

.btn_main:hover .span-mother span {
  transform: translateY(1.2em);

}

.btn_main .span-mother span:nth-child(1) {
  transition: 0.2s;
}

.btn_main .span-mother span:nth-child(2) {
  transition: 0.3s;
}

.btn_main .span-mother span:nth-child(3) {
  transition: 0.4s;
}

.btn_main .span-mother span:nth-child(4) {
  transition: 0.5s;
}

.btn_main .span-mother span:nth-child(5) {
  transition: 0.6s;
}

.btn_main .span-mother span:nth-child(6) {
  transition: 0.7s;
}

.btn_main .span-mother2 {
  display: flex;
  position: absolute;
  overflow: hidden;
}

.btn_main .span-mother2 span {
  transform: translateY(-1.2em);
}

.btn_main:hover .span-mother2 span {
  transform: translateY(0);
}

.btn_main .span-mother2 span {
  transition: 0.2s;
}

.btn_main .span-mother2 span:nth-child(2) {
  transition: 0.3s;
}

.btn_main .span-mother2 span:nth-child(3) {
  transition: 0.4s;
}

.btn_main .span-mother2 span:nth-child(4) {
  transition: 0.5s;
}

.btn_main .span-mother2 span:nth-child(5) {
  transition: 0.6s;
}

.btn_main .span-mother2 span:nth-child(6) {
  transition: 0.7s;
}





.footer {
  display: flex;
  width: 100%;
  min-height: 70vh;
  justify-content: center;
  align-items: center;
}

.footer_con {
  display: flex;
  width: 100%;
  align-items: start;
  max-width: 1200px;
  justify-content: space-between;
  flex-direction: row;
  gap: 20px;
  box-sizing: border-box;
}

.footer_1 {
  display: flex;
  width: 40;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  gap: 30px;
  box-sizing: border-box;
}

.footer_2 {
  display: flex;
  width: 20%;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  box-sizing: border-box;
}

.footer_3 {
  display: flex;
  width: 20%;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  box-sizing: border-box;
}

.footer_icons {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 20px;
}

.footer_icons svg {
  width: 30px;
  height: 30px;
  fill: var(--black);
  transition: fill 0.3s ease;
}

.footer h3 {
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 10px;
}

.footer h4 {
  font-size: 16px;
  font-weight: 500;
  padding-top: 10px;
}

.footer_btn {
  background-color: none;
  font-size: 16px;
  color: var(--black);
  padding: 20px 0px;
  background-color: #00000000;
  border: none;
  text-decoration: none;
}

.footer_btn:hover {
  background-color: none;
  color: var(--accent-color);
  transition: all 0.1s ease-in-out;
}





















/* about page */
.con_about_hero {
  display: flex;
  width: 100%;
  max-width: 1200px;
  padding: 80px 0px 0px 0px;
  gap: 20px;
}

.con_right_ab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 30%;
  overflow: hidden;
}

.con_left_ab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
  width: 70%;
}


.img_2 {
  width: 100%;
  filter: grayscale(100%);
  border-radius: 15px;
  box-shadow: 0px 0px 20px var(--shadow-colro)
}

.con-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.con_2_1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 100%;
  gap: 20px;
  max-width: 1200px;
  padding: 50px 0px;
}

.con_2_1 h3 {
  font-size: 25px;
}

.con_2_2 {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: 0px 0px;
  gap: 20px;
}

.tools_con_1 {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  gap: 20px;

  gap: 20px;
  border-radius: 20px;
}

.tools_con_1 h2 {
  font-size: 20px;
  font-weight: 400;
  ;
}

.tools_kit_1 {
  display: flex;
  flex-direction: row;
  align-items: start;
  width: 100%;
  max-width: 1200px;
  gap: 20px;
}

.tool_img {
  width: 30px;
  box-shadow: 0px 0px 20px var(--shadow-colro);
}

.tools_names {
  display: flex;
  width: auto;
  align-items: center;
  justify-content: center;
  background-color: var(--ab_cards);
  border: var(--ab_cards_border) solid .5px;
  border-radius: 10px;
  padding: 10px 20px 10px 20px;
  gap: 10px;
}

.tools_names h3 {
  font-size: 13px;
  font-weight: 400;
  color: var(--black);
}


.con-3 {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  justify-content: center;
  align-items: center;
  width: 100%;

}

.con_3_1 {
  display: flex;
  padding: 30px 0px;
  width: 100%;
  flex-direction: column;
  max-width: 1200px;
  align-items: start;
  justify-content: start;
  gap: 10px;
}

.con_3_2 {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1200px;
  justify-content: space-around;
  gap: 30px;
  box-sizing: border-box;
}

.con_3_2_cards {
  display: flex;
  width: 100%;
  flex-direction: column;
  background-color: var(--card);
  padding: 30px 20px 20px 20px;
  border-radius: 20px;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s cubic-bezier(0.4, 0.2, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.con_3_2_cards:hover {
  transform: scale(1.02);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
}

.con_3_2_cards p {
  opacity: 90%;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}







/* Notes page */

.con_notes {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
  height: 500px;

}

.con_notes_1 {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 30px;
}

.con_notes_1 h1 {
  font-size: 80px;
}

.con_notes_1 h3 {
  text-align: center;
}

.con_notes_main {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.con_notes_cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  gap: 20px;
}


.p_notes {
  font-size: 16px;
  margin: 0px;
}

a {
  text-decoration: none;

}

.con_notes_cards h4 {
  font-size: 20px;
  font-weight: 500;
  margin: 0px;
}

.con_notes_cards P {
  font-size: 13px;
  opacity: 70%;
  font-weight: 500;
  margin: 0px;
}

.notes_cards {
  display: flex;
  width: 100%;
  width: 800px;
  align-items: center;
  gap: 70px;
  padding: 30px;
  height: 120px;
  border-radius: 20px;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s cubic-bezier(0.4, 0.2, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);


}

.notes_cards:hover {
  transform: scale(1.02);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
}

.notes_card_left {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;

}

.notes_card_right {
  width: 70px;
  height: 70px;
  overflow: hidden;
  flex-shrink: 0;     /* prevent shrinking */
  flex-grow: 0;       /* prevent growing */
  /* hide overflow if the image is larger */
  position: relative;
  box-sizing: border-box;
  border-radius: 100px;

}

.notes_card_right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* makes the image fill the box nicely */
  display: block;

}





/* coming Soon */

.contact_me {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
  height: 50vh;
  padding-top: 100px;
}

.con_coming {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
  height: 100vh;

}

.con_coming_up {
  padding: 10px;
}

.con_coming_up h3 {
  text-align: center;
}

.con_coming_mid {
  display: flex;
  flex-direction: row;
}

.coming-text {
  font-size: 100px;
}


.con_coming_bottom {
  padding-top: 50px;
}






























.blurry-dot {
  position: absolute;
  margin-top: -300px;
  top: 0;
  left: 0;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle at 50% 50%, var(--black) 60%, #00e0ff 100%);
  opacity: 0.3;
  filter: blur(100px);
  border-radius: 50%;
  pointer-events: none;
  z-index: -3;
  animation: dot-move 18s linear infinite alternate;
}

@keyframes dot-move {
  0% {
    transform: translate(0vw, 0px) scale(1) rotate(0deg);
  }

  8% {
    transform: translate(10vw, 10px) scale(1.08) rotate(8deg);
  }

  18% {
    transform: translate(22vw, -18px) scale(0.96) rotate(-6deg);
  }

  27% {
    transform: translate(30vw, 24px) scale(1.12) rotate(12deg);
  }

  38% {
    transform: translate(45vw, -8px) scale(1.04) rotate(-10deg);
  }

  50% {
    transform: translate(60vw, 18px) scale(1.15) rotate(18deg);
  }

  62% {
    transform: translate(70vw, -22px) scale(0.92) rotate(-14deg);
  }

  75% {
    transform: translate(80vw, 20px) scale(1.09) rotate(10deg);
  }

  87% {
    transform: translate(65vw, 8px) scale(1.03) rotate(-7deg);
  }

  100% {
    transform: translate(90vw, 0px) scale(1) rotate(0deg);
  }
}




@media (max-width: 1200px) {
  h1 {
    font-size: 36px;
    color: var(--black);
    font-weight: 600;
    margin: 0px;
  }

  h2 {
    font-size: 24px;
    margin: 0px;
    font-weight: 400;
  }

  h3 {
    font-size: 16px;
    margin: 0px;
    font-weight: 400;
  }

  p {
    font-size: 13px;
    font-weight: 400;
  }

  .con {
    max-width: 95%;
  }

  .con_right h1 {
    font-size: 42px;
  }

  .con_right h3 {
    font-size: 16px;
  }

  .card_top {
    align-items: center;
  }


  .cards h2 {
    font-size: 24px;
  }

  .card_bottom {
    width: 80%;
  }

  .counter {
    font-size: 36px;
  }

  .cards {
    padding: 20px 20px;

  }

  .con_title h3 {
    text-align: center;
  }

  .products_1_con {
    width: 90%;
  }

  .products_2_con {
    width: 90%;
  }

  .products_3_con {
    width: 90%;
  }

  .products_4_con {
    width: 90%;
  }

  .products_1 {
    height: 350px;
  }

  .products_2 {
    height: 350px;
  }

  .products_3 {
    height: 350px;
  }

  .products_4 {
    height: 350px;
    width: 35%;
  }

  .products_5 {
    height: 350px;
    width: 65%;
  }

  .products_6 {
    height: 350px;
    width: 100%;
  }

  .con_title {
    max-width: 1000px;
  }

  .ds_1 {
    width: 350px;
  }

  .ds_2 {
    width: 350px;
  }

  .ds_3 {
    width: 350px;
  }

  .products_1_con h2 {
    font-size: 26px;
  }

  .products_2 h2 {
    font-size: 24px;
  }

  .products_3 h2 {
    font-size: 24px;
  }

  .products_4 h2 {
    font-size: 24px;
  }

  .products_5 h2 {
    font-size: 24px;
  }


  .am_1 {
    width: 100px;
  }

  .am_2 {
    width: 200px;
  }

  .am_3 {
    width: 100px;
  }

  .us_1 {
    width: 270px;
    margin-top: -20px;
  }

  .us_2 {
    width: 270px;
    margin-left: -200px;
    margin-right: -200px;
    margin-top: -10px;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.4, 0.2, 0.2, 1);
  }


  .us_3 {
    width: 270px;
    margin-top: -2px;
  }

  .products_3:hover .us_1 {
    transform: translate(-20px, -10px);

    transition-delay: 0.0s;
  }

  .products_3:hover .us_2 {
    transform: translate(20px, -10px);
    transition-delay: 0.0s;

  }

  .products_3:hover .us_3 {
    transform: translate(20px, 10px);

  }

  .ho_1 {
    width: 200px;
  }

  .ho_2 {
    width: 200px;
  }

  .ho_3 {
    width: 200px;
  }

  .ic_1 {
    width: 400px;
  }

  .ic_2 {
    width: 400px;
  }

  .ic_3 {
    width: 400px;
  }

  .ag_1 {
    width: 360px;
  }

  .ag_2 {
    width: 360px;
  }

  .ag_3 {
    width: 360px;
  }

  .ic_1 {
    width: 300px;
  }

  .ic_2 {
    width: 300px;
  }

  .ic_3 {
    width: 300px;
  }

  .footer_con {
    width: 90%
  }

  .con_about_hero {
    width: 90%;
  }

  .con_3_1 {
    width: 90%;
    justify-content: start;
    align-items: start;

  }

  .con_3_2 {
    width: 90%;
  }

  .con_2_1 {
    width: 90%;
  }

  .con_2_2 {
    width: 90%;
    box-sizing: border-box;
  }

  .tools_kit_1 {
    flex-wrap: wrap;
  }


  .p_notes {
    font-size: 13px;
  }

  .coming-text {
    font-size: 100px;
  }

}

@media (max-width: 900px) {
  .con {
    width: 80%;
    align-items: center;
    justify-content: center;

    flex-direction: column;
  }

  .con_right {
    order: 1;
    align-items: center;
    justify-content: center;
  }

  .con_left {
    align-items: center;
    justify-content: center;
  }

  .con_right h1 {
    text-align: center;
    font-size: 32px;
  }

  .con_right h3 {
    text-align: center;
    font-size: 16px;
  }

  .img_1 {
    width: 50%;

  }

  .notes_card_left h5 {
    font-size: 20px;
  }

  .notes_cards {
    gap: 20px;
  }

  .notes_card_left p {
    font-size: 13px;
  }

  .p_notes {
    font-size: 10px;
  }

  .products_2_con {
    flex-direction: column;
  }

  .products_2 {
    width: 100%;
    box-sizing: border-box;

  }

  .products_3 {
    width: 100%;
    box-sizing: border-box;
  }

  .products_3_con {
    flex-direction: column;

  }

  .products_4 {
    width: 100%;
    box-sizing: border-box;
  }

  .products_5 {
    width: 100%;
    box-sizing: border-box;
  }

  .card_bottom {
    flex-direction: column;
  }

  .cards {
    width: 80%;
  }

  .card_top h1 {
    font-size: 36px;
  }

  .card_top h3 {
    font-size: 16px;
  }

  .con_cards {
    padding: 0px;
  }

  .footer_con {
    flex-direction: column;
    box-sizing: border-box;
    padding: 100px 0px;
    box-sizing: border-box;
  }

  .footer_1,
  .footer_2,
  .footer_3 {
    width: 100%;
  }

  .con_about_hero {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 00px
  }

  .con_3_1 h1,
  .con_3_1 h3 {
    text-align: start;
  }

  .con_3_2 {
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
  }

  .notes_cards {
    width: 100%;
    height: 100%;
  }

  .con_notes_cards {
    display: flex;
    width: 90%;
    align-items: center;
    justify-content: center;
  }

  .notes_cards h4 {
    font-size: 20px;

  }

  .con_coming_mid {
    width: 90%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
  }


  .products_1_up_left {
    display: none;

  }

  .products_1_up {
    justify-content: space-between;
  }

  .products_1_up_middle {
    justify-content: center;
    align-items: flex-start;
  }

  .products_1_up_right {
    display: flex;
    justify-content: end;
  }

  .products_1 {
    padding: 20px;
    box-sizing: border-box;
  }

  .header-blur {
    gap: 0px;
    box-sizing: border-box;
    /* include padding/borders in width */



  }

  .coming-text {
    font-size: 36px;
  }

  .btn-header {
    display: flex;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
  }


  .notes_card_right {
    width: 70px;
    height: 70px;
  }

  .notes_card_right img {
    width: 70px;
    aspect-ratio: 1 / 1;

  }
}

@media (max-width: 500px) {
  

  .con_3_1 h1,
  .con_3_1 h3 {
    text-align: center;
  }

  .con_3_1 {
    justify-content: center;
    align-items: center;
  }

  .con_3_1 h1 {
    font-size: 30;
  }

  .header-blur {
    padding: 3px 5px;
  }

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

  .notes_card_left {
    order: 1;
  }

  .notes_card_left h5 {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
  }

  .notes_card_left p {
    font-size: 11px;
    font-weight: 300;
    text-align: center;
  }

  .p_notes {
    font-size: 8px;
  }

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


.a_con {
  display: block;
  /* Makes <a> behave like a div */
  text-decoration: none;
  width: 100%;
}