/* * {margin: 0;padding: 0;border: 0;outline: 0;text-decoration: none;list-style: none;box-sizing: border-box;}:root {--color-primary: #75A387;--color-primary-variant: rgba(135, 218, 135, 0.2);--color-white: #fff;--color-light: #f5f5f5;--color-black: #0f0f1b;--color-dark: #4b4a53;--container-width-lg: 82%;--container-width-md: 90%;--container-width-sm: 92%;}html {scroll-behavior: smooth;}body {font-family: "Poppins", sans-serif;font-weight: 300;color: var(--color-dark);line-height: 1.7;}h1, h2, h3 {color: var(--color-black);}h1 {font-size: 4.4rem;line-height: 1.1;}h2 {font-size: 2rem;}h3 {font-size: 1.6rem;}img {width: 100%;object-fit: cover;}.container {width: var(--container-width-lg);max-width: 1800px;margin: 0 auto;}section {padding: 6rem 0;}.btn {background: var(--color-black);color: var(--color-white);display: inline-block;width: fit-content;padding: 0.8rem 1.6rem;border: 1px solid transparent;cursor: pointer;transition: all 400ms ease;}.btn:hover {background: var(--color-light);color: var(--color-black);}.btn-primary {background: var(--color-primary);color: var(--color-black);}.btn-primary:hover {border-color: var(--color-primary);background: var(--color-light);color: var(--color-black);}nav {width: 100vw;height: 5rem;display: grid;place-items: center;position: fixed;z-index: 2;opacity: 0;transform: translateY(-30px);animation: apparition 0.8s 0.7s ease-out forwards;}nav a {color: var(--color-black);font-size: 0.9rem;transition: all 400ms ease;}nav a:hover {color: var(--color-primary);}.nav__container {display: flex;justify-content: space-between;align-items: center;}nav button {display: none;}.nav__menu {display: flex;justify-content: space-between;align-items: center;gap: 4rem;}header {height: calc(100vh - 5rem);position: relative;top: 5rem;display: grid;place-items: center;overflow: hidden;}.header__container {display: grid;grid-template-columns: 40% 60%;height: 100%;}.header__left {display: flex;align-items: center;height: 100%;}.header__left_div h1 span {display: inline-block;opacity: 0;transform: translateY(-30px);}.header__left_div h1>span:nth-child(1) {animation: apparition 0.8s 0.3s ease-out forwards;}.header__left_div h1>span:nth-child(2) {animation: apparition 0.8s 0.5s ease-out forwards;}.header__left_div p {margin: 1.2rem 0 2rem;opacity: 0;transform: translateY(-30px);animation: apparition 0.8s 0.7s ease-out forwards;color: #000000;z-index: 100000;}.header__right {position: relative;height: 100%;}.header__right-bg {width: 70rem;height: 70rem;border-radius: 50%;background: var(--color-primary);position: absolute;right: -30rem;bottom: -30rem;z-index: -1000000;opacity: 0;transform: translateX(30px);animation: apparition 0.4s 1.6s ease-out forwards;}.nb_a {color: var(--color-primary);text-decoration: none;font-weight: bold;margin: 0 10px;font-size: 15px;display: flex;align-items: center;position: relative;}.nb_a::after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 2px;bottom: -4px;left: 0;background-color: var(--color-primary);transform-origin: bottom right;transition: transform 0.3s ease-out;}.nb_a:hover::after {transform: scaleX(1);transform-origin: bottom left;}@keyframes apparition {100% {opacity: 1;transform: none;}}section#companies {position: relative;top: 5rem;padding: 0;background: var(--color-light);margin: 0;height: 100%;}.companies__container {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;height: 100%;}.companies__container span {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;margin: 10px 5px;}.companies__container img {width: 100%;max-width: 250px;margin: 15px;padding: 5px;}.competences_head {margin: 2rem 0;}.competences-container {display: grid;grid-template-columns: repeat(5, 1fr);gap: 15px;}.competence-item {display: flex;justify-content: center;align-items: center;padding: 5px;background-color: #f9f9f9;overflow: hidden;transition: transform 0.6s ease;box-shadow: 0 0 10px var(--color-primary-variant);}.competence-item img {max-width: 55%;height: 200px;object-fit: contain;}.competence-item:hover {transform: scale(1.1);box-shadow: none;}@media (max-width: 768px) {.competences-container {grid-template-columns: repeat(2, 1fr);}}@media (max-width: 480px) {.competences-container {grid-template-columns: 1fr;}}#portfolio {background: var(--color-light);}.portfolio__head {display: flex;justify-content: space-between;gap: 3rem;}.portfolio__head h3 {width: 25%;}.portfolio__head-right {width: 49%;}.portfolio__head-right a {margin-top: 1.4rem;display: inline-block;color: var(--color-primary);transition: all 400ms ease;}.portfolio__head-right a:hover {margin-left: 1rem;}.portfolio__projects {margin-top: 4rem;display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;}.portfolio__project {display: flex;flex-direction: column;align-items: space-between;gap: 1rem;}.portfolio__project-image {height: 20rem;display: block;border: 1rem solid var(--color-white);overflow: hidden;box-shadow: 0 0 1.6rem var(--color-primary-variant);transition: all 400ms ease;}.portfolio__project-image:hover {box-shadow: none;}.portfolio__project-image img {transform: 0;transition: all 12s ease;}.portfolio__cta {display: flex;gap: 1rem;}.portfolio__project-image:hover img {transform: translateY(calc(-100% + 18rem));}#contact {background: var(--color-primary);color: var(--color-black);margin: 0;}.contact__container {display: grid;grid-template-columns: 1fr 1fr;gap: 8rem;font-size: 0.9rem;}.contact__container h2 {color: var(--color-black);}.contact__container p {margin: 1rem 0 2rem;}.contact__socials {display: flex;gap: 1rem;}.contact__socials a {color: var(--color-black);font-size: 1.3rem;transition: all 400ms ease;}.contact__socials a:hover {color: var(--color-black);}footer {text-align: center;background: var(--color-primary);padding: 1.2rem 0;color: var(--color-black);}@media screen and (max-width: 1024px) {h1 {font-size: 3.6rem;}h2 {font-size: 1.6rem;}.container {width: var(--container-width-md);}nav {background: var(--color-black);}.nav__container {position: relative;width: 100vw;}.nav__logo h3 {color: var(--color-white);margin-left: 2rem;}.nav__menu {position: fixed;top: 5rem;right: 0;height: fit-content;width: 18rem;flex-direction: column;gap: 0;z-index: 3;display: none;perspective: 400px;}.nav__menu li {width: 100%;height: 5.4rem;opacity: 0;animation: flipNavItem 200ms 0s ease forwards;transform-origin: top;}.nav__menu li:nth-child(2) {animation-delay: 100ms;}.nav__menu li:nth-child(3) {animation-delay: 200ms;}.nav__menu li:nth-child(4) {animation-delay: 300ms;}.nav__menu li:nth-child(5) {animation-delay: 400ms;}@keyframes flipNavItem {from {transform: rotateX(90deg);}to {transform: rotateX(0deg);opacity: 1;}}.nav__menu li a {background: var(--color-primary);box-shadow: -2rem 2rem 8rem var(--color-primary);color: var(--color-white);width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}.nav__menu li a:hover {background: var(--color-light);color: var(--color-black);}nav button {display: inline-block;margin-right: 1.4rem;background: transparent;color: var(--color-white);cursor: pointer;font-size: 2.4rem;}nav button#close-menu-btn {display: none;}header {height: 100%;padding: 14rem 0 0;}.header__container {align-items: flex-end;height: 100%;}.header__left {margin-bottom: 6rem;}.header__right {align-self: flex-end;height: 100%;}.portfolio__head h3 {width: 40%;}.portfolio__head-right {width: auto;}.contact__container {gap: 2rem;}.contact__socials a {font-size: 1.7rem;}}@media screen and (max-width: 600px) {.container {width: var(--container-width-sm);}section {padding: 4rem 0;margin: 4rem 0;}h1 {font-size: 2.8rem;}h2 {font-size: 1.4rem;}h3 {font-size: 1.2rem;}nav button {margin: 0;font-size: 1.9rem;}.nav__logo h3 {margin-left: 4px;}header {height: 100vh;padding: 0;}.header__container {grid-template-columns: 1fr;margin-top: 4.4rem;gap: 0;}.header__left {text-align: center;margin-bottom: 2rem;}.header__left p {margin: 0.5rem 0 1.2rem;}.companies__container {flex-direction: column;align-items: center;}.companies__container span {flex-direction: column;align-items: center;}.companies__container img {padding: 10px 0;max-width: 200px;}.portfolio__head {flex-direction: column;gap: 1fr;}.portfolio__head h3, .portfolio__head-right {width: var(--container-width-sm);}.portfolio__projects {grid-template-columns: 1fr;}.portfolio__cta {justify-content: center;}.contact__container {grid-template-columns: 1fr;gap: 2rem;text-align: center;}.contact__socials {justify-content: center;}}.window-scroll {background: var(--color-black);box-shadow: 0 1.5rem 1.5rem rgba(36, 0, 64, 0.2);}.window-scroll a {color: var(--color-white);}.window-scroll .nav__logo h3 {color: var(--color-white);} */