
.fixed-widget-upper-left-logo-indexes a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 26px !important;
    font-weight: 200 !important;
  }

.fixed-widget-upper-left-logo-indexes a:hover {
    background-color: var(--color2) !important;
  }

.fixed-widget-upper-left-link-indexes {
    font-weight: 200 !important;
    letter-spacing: -1px !important;
  }

.circles-nav-fixed-circle-indexes:hover {
    background-color: var(--color2) !important;
  }

.fixed-widget-lower-right-video-circles-nav-modal-circle {
      background-color: var(--color1) !important;
      box-shadow: 0px 10px 48px 8px rgb(0 0 0 / 15%), 0px 4px 12px 0px rgb(0 0 0 / 10%) !important;
  }

.fixed-widget-lower-right-video-circles-nav-modal-circle:hover {
      background-color: var(--color2) !important;
  } 

.tagline-index {
      font-weight: 700 !important;
      padding-top: 20px;
      font-family: 'Space Mono' !important;
      font-size: 18px !important;
      line-height: 1.3 !important;
      letter-spacing: -0.5px !important;
  }

.headline-index {
      line-height: 1.015 !important;
      letter-spacing: -2px !important;
      font-weight: 600 !important;
  }

.fixed-upper-left-logo-image img {
      position: fixed;
      top: 20px;
      left: 20px;
      background-color: transparent !important;
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 0px;
      padding-bottom: 0px;
      border-radius: 10px;
      box-shadow: 0px 10px 48px 8px rgb(0 0 0 / 5%), 0px 4px 12px 0px rgb(0 0 0 / 5%);
      max-height: 150px !important;
  }

.fixed-upper-left-logo-image:hover {
      color: var(--color-black)!important;
      background-color: transparent !important;
  }

.fixed-upper-left-logo-link {
      color: var(--color-black) !important;
  }

.fixed-upper-left-logo-link:hover {
      color: var(--color-black) !important;
  }

body {
      margin: 0;
      background: #ffffff;
  }

.grid-container-brands {
      padding: 30px;
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(2, 1fr);
  }

.grid-container-avatars {
      padding: 30px;
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(1, 1fr);
  }

.grid-item img {
      width: 100%;
      border-radius: 10px;
      box-shadow: 0px 10px 48px 8px rgb(0 0 0 / 5%), 0px 4px 12px 0px rgb(0 0 0 / 5%);
      display: block;
  }

.box-card-div-white-indexes {
      padding: 0px !important;
  }

.container-indexes {
      padding-right: 0px !important;
      padding-left: 0px !important;
  }

.footer-logo-image {
      width: 100%;
      overflow: hidden;
  }

.img-fluid {
      max-width: 80%;
  }

.custom-section {
      width: 100%;
      padding: 40px 0;
  }

.profile-image {
      width: 100%;
      aspect-ratio: 1 / 1;
      border: none;
      border-radius: 20px !important;
      object-fit: cover;
      box-shadow: 0px 10px 48px 8px rgb(0 0 0 / 5%), 0px 4px 12px 0px rgb(0 0 0 / 5%);
  }

.btn-group-custom a {
      width: 60px;
      height: 60px;
      border-radius: 100%;
      border: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      box-shadow: 0px 10px 48px 8px rgb(0 0 0 / 5%), 0px 4px 12px 0px rgb(0 0 0 / 5%);
  }

.text-section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      height: 100%;
      padding-left: 25px !important;
      padding-right: 25px !important;
  }

.container-fluid {
      padding-right: 20px !important;
      padding-left: 20px !important;
  }

@media (max-width: 899.99px) {
      
  .btn-group-custom a {
      margin: 0 5px;
  }

  .text-section {
      align-items: center;
      text-align: center;
      margin-top: 20px;
  }

  .profile-name {
      font-family: 'Italiana';
      font-size: 40px;
  }

  .profile-email {
      font-family: 'Space Mono', monospace;
      font-size: 20px;
  }
}

@media (min-width: 900px) {

      .btn-group-custom a {
            margin-left: 0px;
            margin-right: 10px;
            margin-top: 0px;
            margin-bottom: 0px; 
  }

      .grid-container-brands {
            grid-template-columns: repeat(5, 1fr);
  }

      .grid-container-avatars {
            grid-template-columns: repeat(3, 1fr);
  }

      .profile-name {
            font-family: 'Italiana';
            font-size: 72px;
  }

  .profile-email {
      font-family: 'Space Mono', monospace;
      font-size: 24px;
  }
}


