* {
          box-sizing: border-box;
        }

        :root {
          /* COLORS */
          --basics-dark_grey: #434242;
          --basics-white2: #f2f3fa;
          --basics-black: #05070b;
          --basics-white: #fefefe;
          --basics-ultra_dark_grey: #333232;
          --basics-wite_m: #f4f2f2;

          --transparent-dark_grey25: rgba(67 66 66 / 0.25);
          --transparent-black1: rgba(0 0 0 / 0.01);
          --transparent-black80: rgba(0 0 0 / 0.8);
          --transparent-white2: rgba(255 255 255 / 0.02);
          --transparent-black20: rgba(0 0 0 / 0.2);
          --transparent-black30: rgba(0 0 0 / 0.1);
          --transparent-white80: rgba(254 254 254 / 0.8);
          --transparent-dark_blue98: rgba(1 5 20 / 0.98);

          --svg-filter: none;
          --svg-filter-colors: none;


          /* SHADOWS */
          --shadow_black30: 1px 2px 2px 0px var(--transparent-black30);

          /* GLASS EFFECT BLUR*/
          --glas8: blur(8px) brightness(100%);
          --glas18: blur(18px) brightness(100%);
          --glas22: blur(22px) brightness(100%);

          /* GLASS EFFECT SHADOW*/
          --glass18-shadow: 0.2px 0.2px 1.2px 0px var(--transparent-black20);

          /* TEXT_TYPE */
          --font-family-lexend: "Lexend", Helvetica;

          --font-style-normal: normal;

          --font-size-s: 10px;
          --font-size-m: 12px;
          --font-size-l: 14px;
          --font-size-xl: 16px;
          --font-size-xxl: 20px;

          --font-size-m-rem: 0.75rem;
          --font-size-l-rem: 0.875rem;
          --font-size-xl-rem: 1rem;
          --font-size-xxl-rem: 1.25rem;

          --font-weight-light: 300;
          --font-weight-reg: 400;
          --font-weight-bold: 700;
        }

        .xxl-reg {
          font-family: var(--font-family-lexend);
          font-size: var(--font-size-xxl);
          font-style: var(--font-style-normal);
          font-weight: var(--font-weight-reg);
        }

        .xl-reg {
          font-family: var(--font-family-lexend);
          font-size: var(--font-size-xl);
          font-style: var(--font-style-normal);
          font-weight: var(--font-weight-reg);
        }

        .l-bold {
          font-family: var(--font-family-lexend);
          font-size: var(--font-size-l);
          font-style: var(--font-style-normal);
          font-weight: var(--font-weight-bold);
        }

        .l-reg {
          font-family: var(--font-family-lexend);
          font-size: var(--font-size-l);
          font-style: var(--font-style-normal);
          font-weight: var(--font-weight-reg);
        }

        .m-reg {
          font-family: var(--font-family-lexend);
          font-size: var(--font-size-m);
          font-style: var(--font-style-normal);
          font-weight: var(--font-weight-reg);
        }

        .m-light {
          font-family: var(--font-family-lexend);
          font-size: var(--font-size-m);
          font-style: var(--font-style-normal);
          font-weight: var(--font-weight-light);
        }

        .s-light {
          font-family: var(--font-family-lexend);
          font-size: var(--font-size-s);
          font-style: var(--font-style-normal);
          font-weight: var(--font-weight-light);
        }

        .section-name {
          font-family: var(--font-family-lexend);
          font-size: var(--font-size-xl);
          font-style: var(--font-style-normal);
          font-weight: var(--font-weight-reg);
          letter-spacing: 4.8px;
        }

        body {
          margin: 0px;
          background-color: var(--basics-white) !important;
          overflow-x: hidden;
          font-family: var(--font-family-lexend);
        }

        .dark-mode {
          --basics-white: #131313;
          --basics-black: #f8f0f0;
          --basics-dark_grey: var(--basics-white2);
          --basics-ultra_dark_grey: #f3f3f3;
          --transparent-white80: var(--transparent-black80);
          --svg-filter: invert(1) hue-rotate(180deg);
          --svg-filter-colors: brightness(1.2) saturate(1.3) contrast(1.1);

        }

        .buttons-container {
          z-index: 100;
          position: fixed;
          top: 50px;
          right: 20px;
          display: flex;
          flex: 0 0 auto;
          flex-direction: row;
          max-width: 1100px;
          gap: 8px;
          justify-content: flex-end;

        }

        .toogle-button {
          width: 40px;
          height: 40px;
          border: none;
          cursor: pointer;
          -webkit-backdrop-filter: var(--glas18);
          backdrop-filter: var(--glas18);
          background-color: var(--transparent-white2);
          color: var(--basics-black);
          border-radius: 20px;
          box-shadow: var(--glass18-shadow);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 8px;
          position: relative;
        }

        .button-icon {
          filter: var(--svg-filter);
          transition: opacity 3.3s ease;
        }

        .break-word {
          overflow-wrap: break-word;
        }

        /* general */
        .main {
          align-items: center;
          background-color: transparent;
          display: flex;
          flex-direction: column;
          gap: 16px;
          justify-content: center;
          max-width: 786px;
          min-width: 100%;
          overflow: hidden;
          overflow-x: hidden;
          padding: 48px 16px 16px 16px;
          position: relative;
          top: 0px;
          left: 0px;
        }

        @media (max-width:1330px) {
          .main {
            padding: 108px 16px 16px 16px;
          }
        }

        /* BACKGROUND-VECTOR  */
        .main .background-vector {
          background-color: transparent;
          height: 1632px;
          left: 705px;
          position: fixed;
          top: -310px;
          width: 605px;
          z-index: -20;
          /* transform: rotate(45deg); */
        }

        /* HEADER */
        .main .header-device {
          -webkit-backdrop-filter: blur(22px) brightness(100%);
          align-items: center;
          backdrop-filter: blur(22px) brightness(100%);
          background-color: var(--transparent-white80);
          border-radius: 20px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          justify-content: center;
          max-width: 1100px;
          min-width: 340px;
          padding: 4px 12px;
          width: 100%;
        }

        .header-device .about-me {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          flex-wrap: wrap;
          gap: 0px 32px;
          justify-content: space-between;
          position: relative;
          width: 100%;
        }

        .about-me .f1 {
          align-items: center;
          background-color: transparent;
          display: inline-flex;
          flex: 0 0 auto;
          gap: 16px;
          margin-right: -10.00px;
          min-width: 164px;
          height: fit-content;
          padding: 0px 16px 0px 0px;
          position: relative;
        }

        .about-me .f1 .picture {
          background-color: transparent;
          position: relative;
          width: 94px;
          height: 94px;
          object-fit: cover;
          border-radius: 50px;
        }

        .about-me .f2 {
          align-items: flex-start;
          align-self: stretch;
          background-color: transparent;
          display: inline-flex;
          flex: 0 0 auto;
          flex-direction: column;
          gap: 4px;
          justify-content: flex-end;
          min-width: 164px;
          height: fit-content;
          padding: 20px 0px;
          position: relative;
        }

        .about-me .f2 .name {
          background-color: transparent;
          color: var(--basics-black);
          line-height: normal;
          position: relative;
          text-align: left;
          width: fit-content;
        }

        .about-me .f2 .role {
          background-color: transparent;
          color: var(--basics-dark_grey);
          line-height: normal;
          position: relative;
          text-align: left;
          width: fit-content;
        }


        .about-me .description {
          align-items: center;
          background-color: transparent;
          display: flex;
          flex: 1;
          flex-grow: 1;
          gap: 10px;
          justify-content: center;
          max-width: 620px;
          min-width: 260px;
          padding: 20px 0px;
          position: relative;
        }

        .about-me .description .text {
          background-color: transparent;
          color: var(--basics-black);
          flex: 1;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          margin-top: -1.00px;
          position: relative;
          text-align: center;
        }

        .contacts {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          height: 16px;
          justify-content: center;
          position: relative;
          width: 100%;
          padding: 16px 32px;
          position: fixed;
          /* Fija el div en la pantalla */
          top: 0;
          /* Lo coloca en la parte superior */
          left: 0;
          /* Lo alinea a la izquierda */
          z-index: 100;
          /* Asegura que esté por encima de otros elementos */
          -webkit-backdrop-filter: var(--glas22);
          backdrop-filter: var(--glas22);
          background-color: var(--transparent-white80);
          margin: 0px auto;
        }

        .contacts_f1 {
          display: flex;
          gap: 16px;
          max-width: 1000px;
          justify-content: flex-end;
          width: 100%;
        }

        .contact {
          align-items: center;
          background-color: transparent;
          display: inline-flex;
          flex: 0 0 auto;
          gap: 10px;
          justify-content: center;
          position: relative;
          color: var(--cape-cod);
        }

        .contact-icon {
          filter: var(--svg-filter);
          border-radius: 3px;
          height: 16px;
          position: relative;
          width: 16px;
        }

        .contact-icon_circle {
          border-radius: 30px;
        }

        .contact-text {
          background-color: transparent;
          color: var(--basics-black);
          font-style: normal;
          font-weight: 300;
          line-height: normal;
          margin-top: -0.50px;
          position: relative;
          text-align: left;
          width: fit-content;
        }

        /* ***************************SECTIONS******************************* */
        .main .sections {
          max-width: 1100px;
          min-width: 330px;
          padding: 16px;
          position: relative;
          width: 100%;
        }

        .blurry-frame {
          -webkit-backdrop-filter: var(--glas8);
          backdrop-filter: var(--glas8);
          background-color: var(--transparent-white2);
          border-radius: 20px;
          padding: 16px 16px 32px 16px;
        }

        .modal-blurry-top {
          -webkit-backdrop-filter: var(--glas8);
          backdrop-filter: var(--glas8);
          background-color: rgba(255, 255, 255, 0.6) !important;
          padding: 16px 16px 0px 16px;
          border-radius: 20px 20px 0px 0px;
        }

        .modal-blurry-down {
          -webkit-backdrop-filter: var(--glas8);
          backdrop-filter: var(--glas8);
          background-color: rgba(255, 255, 255, 0.2) !important;
          padding: 0px 16px 32px 16px;
          border-radius: 0px 0px 20px 20px !important;
        }

        .my-modal-content {
          position: relative;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-direction: column;
          flex-direction: column;
          width: 100%;
          pointer-events: auto;
          background-color: #ffffff02;
          background-clip: padding-box;
          border: 1px solid rgba(0, 0, 0, .2);
          outline: 0;
          border-radius: 20px !important;
        }



        .cards-container {
          display: flex;
          flex-wrap: wrap;
          gap: 16px;
          margin-bottom: 16px;
          justify-content: flex-start;
          align-items: center;
          height: fit-content;
        }

        .main .section_header {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          border-radius: 20px 20px 17px 17px;
          display: flex;
          flex: 0 0 auto;
          gap: 16px;
          justify-content: flex-start;
          padding: 0px 0px 0px 8px;
          position: relative;
          width: 100%;
          height: fit-content;
        }

        .main .section_header .f2 {
          -webkit-backdrop-filter: var(--glas18);
          align-items: center;
          backdrop-filter: var(--glas18);
          background-color: var(--transparent-white80);
          border-radius: 20px;
          box-shadow: var(--glass18-shadow);
          display: inline-flex;
          flex: 0 0 auto;
          flex-direction: column;
          justify-content: center;
          padding: 5.400000095367432px 8px;
          position: relative;
        }

        .main .section_header .f2 .icon {
          filter: var(--svg-filter);
          background-color: transparent;
          height: 16px;
          position: relative;
          width: 16px;
        }

        .main .section_header .f2 .chevron {
          filter: var(--svg-filter);
          background-color: transparent;
          height: 5px;
          position: relative;
          width: 9.5px;
        }

        .main .section__title {
          background-color: transparent;
          color: var(--basics-dark_grey);
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          position: relative;
          text-align: center;
          width: fit-content;
        }

        .section__card {
          -webkit-backdrop-filter: var(--glas18);
          backdrop-filter: var(--glas18);
          background-color: var(--transparent-white80);
          border-radius: 20px;
          box-shadow: var(--glass18-shadow);
          display: flex;
          gap: 8px;
          min-width: 296px;
          padding: 8px;
          position: relative;
          /* text-decoration: none; */
        }

        .main .language__back {
          -webkit-backdrop-filter: var(--glas18);
          align-items: center;
          backdrop-filter: var(--glas18);
          background-color: var(--basics-white);
          border-radius: 30px;
          box-shadow: var(--glass18-shadow);
          display: inline-flex;
          flex: 0 0 auto;
          flex-direction: row;
          justify-content: center;
          padding: 0px;
          position: relative;
        }

        .language__f1 {
          display: flex;
          flex-direction: row;
          gap: 8px;
          padding: 2px 8px;
          width: fit-content;
          height: fit-content;
          align-items: center;
          border-radius: 30px;
        }

        .language__f1 .icon {
          height: 16px;
          width: 16px;
          background-color: var(--basics-dark_grey);
          border-radius: 30px;
        }

        .language__name {
          color: var(--basics-ultra_dark_grey);
          height: 25px;
        }

        .language__f2 {
          padding: 0 8px 0 2px;
          width: fit-content;
          height: fit-content;
        }

        .language__level {
          color: var(--basics-dark_grey);
        }

        /* //TODO */
        /* voy revisando por aquí */

        .main .section-certifications {
          /* min-width: 638px; */
        }

        .main .section_body-certifications {
          display: block;

        }

        .main .certifications__f1 {
          display: flex;
          align-items: flex-start;
          flex-wrap: wrap;
          gap: 16px 16px;
          justify-content: center;
          min-width: 296px;
          flex-grow: 1;
        }

        .main .section__card-N {
          align-items: flex-start;
          flex: 1;
          flex-grow: 1;
        }

        .main .certification__degree-date-XejEPL {
          margin-top: -1.00px;
        }

        .main .card__degree-0gnyH1 {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          gap: 16px;
          justify-content: center;
          padding: 0px 3px;
          position: relative;
          width: 100%;
        }

        .main .section-experience {
          min-width: 304px;
        }

        .main .section_body-lAscOp {
          align-items: flex-start;
          flex-wrap: wrap;
          gap: 16px 16px;
          justify-content: center;
        }

        .main .card__experience-nDjm12 {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          flex-direction: column;
          gap: 8px;
          padding: 0px 8px;
          position: relative;
          width: 100%;
        }

        .main .experience__company-zc9L1q {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          gap: 18px;
          position: relative;
          width: 100%;
        }

        .main .icons-xU1IDg {
          height: 28px;
          width: 28px;
        }

        .main .certification__company-name-xU1IDg {
          background-color: transparent;
          color: var(--basics-dark_grey);
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          position: relative;
          text-align: left;
          width: fit-content;
        }

        .main .certification__degree-zc9L1q {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          gap: 16px;
          justify-content: center;
          padding: 0px 3px;
          position: relative;
          width: 100%;
        }

        .main .certification {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          gap: 16px;
          justify-content: center;
          position: relative;
          width: 100%;
        }

        .main .section-PSojmK {
          max-width: 1100px;
          min-width: 754px;
        }

        .main .section_body-dQDVSo {
          align-items: flex-start;
          flex-wrap: wrap;
          gap: 16px 16px;
          justify-content: center;
        }

        .main .section-QKH3sU {
          max-width: 1100px;
          min-width: 754px;
        }

        .main .section_body-jvfWA6 {
          align-items: center;
          flex-direction: column;
          gap: 16px;
        }

        /* TECH TOOL STACK  */

        .main .section__card-Techs {
          align-items: center;
          align-self: stretch;
          flex: 0 0 auto;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          justify-content: flex-start;
          align-items: center;
          height: fit-content;
        }

        .tech .icon {
          height: 16px;
          width: 16px;
        }

        .main .tech-odoo {
          background: linear-gradient(180deg, rgba(46, 1, 34, 0.1), rgba(80, 68, 78, 0.1) 45.89996337890625%, rgba(129.62499797344208, 15.554993525147438, 98.62772047519684, 0.1) 90.12361764907837%);
        }

        .main .tech-python {
          background: linear-gradient(180deg, rgba(239, 235, 12, 0.1), rgba(255, 202.00000315904617, 29.000000171363354, 0.1) 45.89996337890625%, rgba(7.729325797408819, 82.75820642709732, 144.92499858140945, 0.1) 90.12361764907837%);
        }

        .main .tech-figma {
          background: linear-gradient(180deg, rgba(200, 26, 203, 0.1), rgba(255, 114.0000008046627, 98.00000175833702, 0.1) 45.89996337890625%, rgba(10.000000353902578, 207.00000286102295, 131.00000739097595, 0.1) 90.12361764907837%);
        }

        .main .tech-git {
          background: linear-gradient(180deg, rgba(238.00000101327896, 81.00000277161598, 59.00000028312206, 0.1), rgba(255, 171.79200410842896, 162.3499819636345, 0.1) 45.89996337890625%, rgba(206.12500101327896, 34.97599080204964, 10.993323102593422, 0.1) 90.12361764907837%);
        }

        .main .tech-vsc {
          background: linear-gradient(180deg, rgba(63.000000044703484, 139.0000069141388, 190.0000038743019, 0.1), rgba(86.00000247359276, 180.00000447034836, 244.0000006556511, 0.1) 45.89996337890625%, rgba(8.907992150634527, 103.52920666337013, 167.0250079035759, 0.1) 90.12361764907837%);
        }

        .main .tech-js {
          background: linear-gradient(180deg, rgba(50.000000819563866, 51.00000075995922, 48.000000938773155, 0.1), rgba(147, 132, 31, 0.1) 47.999998927116394%, rgba(203.57500344514847, 178.2608985900879, 9.500177074223757, 0.1) 100%);
        }

        .main .tech-css {
          background: linear-gradient(180deg, rgba(31.000000052154064, 98.00000175833702, 174.00000482797623, 0.1), rgba(52.000000700354576, 125.00000014901161, 198.00000339746475, 0.1) 45.89996337890625%, rgba(5.906410189345479, 68.25323715806007, 138.97501945495605, 0.1) 90.12361764907837%);
        }

        .main .tech-html {
          background: linear-gradient(180deg, rgba(228.0000016093254, 77.00000301003456, 38.0000015348196, 0.1), rgba(255, 108.00000116229057, 57.00000040233135, 0.1) 45.89996337890625%, rgba(228.0000016093254, 38.0000015348196, 38.0000015348196, 0.1) 90.12361764907837%);
        }

        .main .tech-qweb {
          background: linear-gradient(180deg, rgba(43.00000123679638, 63.000000044703484, 77.00000301003456, 0.1), rgba(16.000000946223736, 161.0000056028366, 225.00000178813934, 0.1) 45.89996337890625%, rgba(29.06432691961527, 67.7176558971405, 94.77501600980759, 0.1) 90.12361764907837%);
        }

        .main .tech-bootstrap {
          background: linear-gradient(180deg, rgba(43, 1, 66, 0.1), rgba(208, 120, 245, 0.1) 45.89996337890625%, rgba(133, 7, 168, 0.1) 90.12361764907837%);
        }

        .main .tech-jquery {
          background: linear-gradient(180deg, rgba(7.000000057742, 105.00000134110451, 173.00000488758087, 0.1), rgba(120.00000044703484, 207.00000286102295, 245.00000059604645, 0.1) 45.89996337890625%, rgba(4.9810197204351425, 75.55518373847008, 124.5250104367733, 0.1) 90.12361764907837%);
        }

        .main .tech-docker {
          background: linear-gradient(180deg, rgba(37, 2, 134, 0.1), rgba(10, 70, 190, 0.1) 45.89996337890625%, rgba(2, 65, 110, 0.1) 90.12361764907837%);
        }

        .main .tech-scss {
          background: linear-gradient(180deg, rgba(243, 5, 148, 0.1), rgba(242, 88, 188, 0.1) 45.89996337890625%, rgba(145, 4, 126, 0.1) 90.12361764907837%);
        }

        .main .tech-less {
          background: linear-gradient(180deg, rgba(77, 144, 186, 0.1), rgba(46, 65, 102, 0.1) 45.89996337890625%, rgba(69, 148, 205, 0.1) 90.12361764907837%);
        }


        /* FOOTER */
        .footer {
          -webkit-backdrop-filter: var(--glas22);
          align-items: center;
          align-self: center;
          backdrop-filter: var(--glas22);
          background-color: var(--transparent-white80);
          display: flex;
          flex: 0 0 auto;
          flex-direction: column;
          gap: 8px;
          justify-content: center;
          min-width: 304px;
          padding: 8px 16px;
          width: 100%;
        }

        .footer__text {
          align-self: stretch;
          background-color: transparent;
          color: var(--basics-dark_grey);
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          margin: -1.00px;
          position: relative;
          text-align: center;
        }

        .span0-tCK2lO {
          font-style: normal;
        }

        .span1-tCK2lO {
          font-family: var(--font-family-lexend);
          font-size: var(--font-size-m);
          font-style: normal;
          font-weight: 600;
          letter-spacing: 0.00px;
        }


        .main .about-me__contact {
          align-items: center;
          background-color: transparent;
          display: inline-flex;
          flex: 0 0 auto;
          gap: 10px;
          justify-content: center;
          position: relative;
        }

        .main .about-me__contact-icon {
          filter: var(--svg-filter);
          background-color: transparent;
          height: 16px;
          position: relative;
          width: 16px;
        }

        .main .about-me__contact-text {
          background-color: transparent;
          color: var(--basics-dark_grey);
          font-style: normal;
          font-weight: 300;
          line-height: normal;
          margin-top: -0.50px;
          position: relative;
          text-align: left;
          width: fit-content;
        }

        .card-f1 {
          display: flex;
          flex-direction: column;
          gap: 2px;
          flex: 1;
        }


        .main .card__certification {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          flex-direction: column;
          gap: 8px;
          justify-content: center;
          padding: 0px 8px;
          position: relative;
          width: 100%;
        }

        .main .card__project {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          flex-direction: column;
          gap: 8px;
          justify-content: center;
          padding: 0px 8px;
          position: relative;
          width: 100%;
        }

        .main .certification__degree {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          gap: 16px;
          justify-content: center;
          padding: 0px 3px;
          position: relative;
          width: 100%;
        }

        .main .certification__degree-date {
          background-color: transparent;
          color: var(--basics-dark_grey);
          font-style: normal;
          font-weight: 300;
          line-height: normal;
          position: relative;
          text-align: left;
          width: fit-content;
        }

        .main .certification__degree-icon {
          filter: var(--svg-filter);
          background-color: transparent;
          height: 24px;
          position: relative;
          width: 24px;
        }

        .main .certification__degree-text {
          background-color: transparent;
          color: var(--basics-dark_grey);
          flex: 1;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          position: relative;
          text-align: left;
        }

        .main .certification__degree-date {
          background-color: transparent;
          color: var(--basics-dark_grey);
          font-style: normal;
          font-weight: 300;
          line-height: normal;
          position: relative;
          text-align: left;
          width: fit-content;
        }

        .main .certification__degree-icon {
          background-color: transparent;
          height: 24px;
          position: relative;
          width: 24px;
        }

        .main .certification__degree-text {
          background-color: transparent;
          color: var(--basics-dark_grey);
          flex: 1;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          position: relative;
          text-align: left;
        }

        .main .certification__institution {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          gap: 18px;
          justify-content: center;
          position: relative;
          width: 100%;
        }

        .main .certification__institution-icon {
          background-color: transparent;
          height: 28px;
          position: relative;
          width: 28px;
        }

        .main .certification__institution-name {
          background-color: transparent;
          color: var(--basics-dark_grey);
          flex: 1;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          position: relative;
          text-align: left;
        }

        .main .icons {
          background-color: transparent;
          position: relative;
        }

        .main .icons-faded {
          filter: var(--svg-filter-colors);
          background-color: transparent;
          position: relative;
          opacity: 80%;
          width: 28px;
          height: 28px;
        }

        .main .project__button {
          filter: var(--svg-filter);
          background-color: transparent;
          height: 25.239990234375px;
          margin-bottom: -1.24px;
          position: relative;
          width: 24px;
        }

        .main .project__description {
          align-self: stretch;
          background-color: transparent;
          color: var(--basics-dark_grey);
          flex: 1;
          font-style: normal;
          font-weight: 300;
          line-height: normal;
          position: relative;
          text-align: left;
        }

        .main .project__f1 {
          align-items: flex-start;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          gap: 10px;
          justify-content: center;
          position: relative;
          width: 100%;
        }

        .main .project__f2 {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 1;
          flex-direction: column;
          flex-grow: 1;
          gap: 10px;
          overflow: hidden;
          position: relative;
        }

        .main .project__f3 {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          gap: 10px;
          justify-content: center;
          position: relative;
          width: 100%;
        }

        .main .project__image--frame {
          position: relative;
          width: 110px;
          height: 110px;
        }

        .main .project__image {
          display: block;
          height: 110px;
          width: 110px;
          border-radius: 20px;
          border: 3px solid var(--basics-dark_grey);
        }

        .main .project__image--overlay {
          position: absolute;
          background-color: var(--transparent-dark_grey25);
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 20px;
        }

        .main .project__name {
          align-self: stretch;
          background-color: transparent;
          color: var(--basics-dark_grey);
          flex: 1;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          margin-top: -1.00px;
          position: relative;
          text-align: left;
        }

        .main .project__tech {
          align-items: center;
          background-color: var(--basics-ultra_dark_grey);
          border-radius: 30px;
          display: flex;
          flex: 1;
          flex-grow: 1;
          gap: 10px;
          justify-content: center;
          padding: 2px 8px;
          position: relative;
        }

        .main .project__tech-text {
          background-color: transparent;
          color: var(--basics-white);
          font-style: normal;
          font-weight: 300;
          line-height: normal;
          margin-top: -1.00px;
          position: relative;
          text-align: center;
          width: fit-content;
        }

        .main .project__techs {
          align-items: flex-start;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          flex-wrap: wrap;
          gap: 8px 8px;
          justify-content: center;
          position: relative;
          width: 100%;
        }

        .main .section {
          align-items: flex-start;
          background-color: transparent;
          display: flex;
          flex: 1;
          flex-direction: column;
          flex-grow: 1;
          gap: 16px;
          padding: 16px;
          position: relative;
        }

        .main .section_body {
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          position: relative;
          width: 100%;
        }

        .main .tech {
          align-items: center;
          background-color: transparent;
          border-radius: 30px;
          display: inline-flex;
          flex: 0 0 auto;
          gap: 8px;
          padding: 4px;
          position: relative;
        }

        .main .tech__back {
          -webkit-backdrop-filter: var(--glas18);
          align-items: center;
          backdrop-filter: var(--glas18);
          background-color: var(--basics-white);
          border-radius: 30px;
          box-shadow: var(--glass18-shadow);
          display: inline-flex;
          flex: 0 0 auto;
          flex-direction: column;
          gap: 10px;
          justify-content: center;
          padding: 2px 8px;
          position: relative;
        }



        .main .tech__f1 {
          align-items: center;
          align-self: stretch;
          background-color: transparent;
          display: flex;
          flex: 0 0 auto;
          gap: 8px;
          justify-content: center;
          position: relative;
          width: 100%;
        }

        .main .tech__name {
          background-color: transparent;
          color: var(--basics-dark_grey);
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          margin-top: -1.00px;
          position: relative;
          text-align: left;
          width: fit-content;
        }

        /* MEDIA QUERIES */
        @media (max-width:888px) {

          /* BACKGROUND-VECTOR  */
          .main .background-vector {
            width: 358.83px;
            height: 1549.65px;
            position: fixed;
            left: 22.24px;
            top: -300.81px;
            transform: rotate(-45deg);
          }
        }

        @media (max-width:525px) {

          /* BACKGROUND-VECTOR  */
          .main .background-vector {
            width: 358.83px;
            height: 1549.65px;
            position: fixed;
            left: 22.24px;
            top: -155.81px;
            transform: rotate(-45deg);
          }

          .cards-container {
            margin-bottom: 32px;
          }
        }