:root {
	--display-font-family: Suez One;
	--body-font-family: Suez One;

	--font-size: 21px

	--logo-padding: 30px;
	--logo-height: 250px;

	--header-width: 1366px;
	--header-border-position: top;
	--header-border-size: 0;
	--header-bg-color: 238 228 197;
	--header-border-color: 0 0 0;

	--brand-color: 0 0 0;
	--brand-color-inverted: 255 255 255;

	--background-color: 255 15 ;
	--text-color: 61 61 61;
	--link-color: 0 0 0;

	--action-color: 255 0 0;
	--action-color-inverted: 0 0 0;

	--announcement-bar-bg-color: 0 0 0;
	--announcement-bar-text-color: 255 255 255;
	--announcement-bar-link-color: 255 255 255;

	--main-navigation-bg-color: 238 228 197;
	--main-navigation-link-color: 0 0 0;
	--main-navigation-link-color-hover: 0 0 0;
	--main-navigation-link-bg-color: 44 81 112;
	--main-navigation-link-font-size: 20px;
	--main-navigation-link-alignment: left;

	--auxiliary-bg-color: 0 0 0;
	--auxiliary-border-color: 0 0 0;
	--auxiliary-link-color: 0 0 0;

	--order-status-bg-color: 238 228 197;
	--order-status-color: 0 0 0;

	--store-menu-bg_color: 238 228 197;
	--store-menu-color: 0 0 0;

	--footer-bg-color: 255 255 255;
	--footer-color: 0 0 0;
	--footer-link-color: 0 0 0;
}

/*Custom Styles*/
ul {
  list-style: none;
}

.example-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.example-2 .icon-content {
  margin: 0 10px;
  position: relative;
  padding: 0.5rem;
}
.example-2 .icon-content .tooltip {
  position: absolute;
  top: 100%;
  right: 110%;
  transform: translateY(200%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
}
.example-2 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}
.example-2 .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-2 .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}
.example-2 .icon-content a:hover {
  color: white;
}
.example-2 .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
  height: 100%;
}

.example-2 .icon-content a[data-social="linkedin"] .filled,
.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
  background-color: #0274b3;
}

.example-2 .icon-content a[data-social="github"] .filled,
.example-2 .icon-content a[data-social="github"] ~ .tooltip {
  background-color: #24262a;
}
.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
  background: linear-gradient(
    45deg,
    #405de6,
    #5b51db,
    #b33ab4,
    #c135b4,
    #e1306c,
    #fd1f1f
  );
}
.example-2 .icon-content a[data-social="youtube"] .filled,
.example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
  background-color: #ff0000;
}