@keyframes Rotate {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes MoveInRight {
    0% {
        transform: translate(0);
    }

    50% {
        transform: translate(-5rem, 5rem);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes MoveInLeft {
    0% {
        transform: translate(0);
    }

    50% {
        transform: translate(5rem, -5rem);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes Left {
    0% {
        transform: translate(0);
    }

    50% {
        transform: translateX(-5rem);
    }

    100% {
        transform: translate(0);
    }
}

.btn:link,
.btn:visited {
    color: #fff4e0;
    transition: all 0.4s ease-out;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.6rem;
    position: relative;
}

.btn::before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 4rem;
    height: 4rem;
    border: 1px solid currentColor;
    transform: translate(-130%, -15%);
    transform-origin: left bottom;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
}

.btn:hover::before {
    width: 170%;
    border-radius: 100px;
    height: 4.5rem;
    transform: translate(-18%, -20%);
}

.btn.btn--blue {
    color: #052123;
}

@media (max-width: 42.5em) {

    .btn:link,
    .btn:visited {
        font-size: 1.6rem;
    }
}

@media (max-width: 31.25em) {

    .btn:link,
    .btn:visited {
        margin-left: 8rem !important;
    }

    .btn::before {
        width: 5rem;
        height: 5rem;
        transform: translate(-115%, -25%);
    }

    .btn:hover::before {
        transform: translate(-18%, -20%);
    }
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

*::selection {
    background-color: #052123;
    color: #ffffff;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    font-size: 1.6rem;
    background-color: #fff4e0;
    line-height: 1.7;
    position: relative;
    overflow-x: hidden;
}

a {
    display: inline-block;
    text-decoration: none;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

@media (max-width: 56.25em) {
    html {
        font-size: 56.25%;
    }
}

@media (max-width: 42.5em) {
    html {
        font-size: 50%;
    }

    body {
        font-size: 1.8rem;
    }
}

.container {
    width: 120rem;
    max-width: 100%;
    margin: 0 auto;
}

.section {
    width: 100%;
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 1rem;
}

.section--2 {
    grid-template-columns: 30% 70%;
}

.separation-line {
    margin: 2rem 0;
    height: 7rem;
    border-left: 1px solid #052123;
    display: flex;
    align-items: center;
    padding: 1rem;
}

.separation-line--2 {
    border-color: #fff4e0;
    margin-bottom: 0;
}

.description {
    margin-bottom: 5rem;
}

.description p {
    margin-bottom: 2rem;
}

.description span {
    font-weight: 700;
}

.icon__plus,
.icon__close {
    font-size: 2.2rem;
    font-weight: 700;
    color: #052123;
}

.icon__close {
    display: none;
    opacity: 0;
    transition: all 0.4s ease-out;
}

.open .icon__plus {
    display: none;
}

.open .icon__close {
    display: block;
    opacity: 1;
}

.icon__experience {
    font-size: 2.4rem;
    color: #052123;
}

.smallcircle {
    width: 3rem;
    height: 3rem;
    border: 1px solid #fff4e0;
    border-radius: 50%;
    position: relative;
}

.smallcircle::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate(-10px, -10px);
    border: 1px solid #fff4e0;
    border-radius: 50%;
}

.copy {
    text-align: center;
}

.info {
    background-color: #ffffff;
    position: relative;
}

.text {
    padding: 8rem;
}

.square__text {
    font-size: 2.2rem;
    font-weight: 900;
}

.circleBox {
    position: absolute;
    top: 8%;
    right: 8%;
    width: 7rem;
    height: 7rem;
    border: 3px solid #052123;
    border-radius: 50%;
    animation: MoveInRight 2s infinite ease-out;
    transition: all 0.4s ease-out;
}

.zigzagBox {
    position: absolute;
    bottom: 8%;
    left: 8%;
    animation: MoveInLeft 2s infinite ease-out;
    transition: all 0.4s ease-out;
}

.zigzagBox img {
    height: 7rem;
}

.rectangleBox {
    position: absolute;
    bottom: 10%;
    right: 15%;
    width: 8rem;
    height: 5rem;
    border: 3px solid #fff;
    animation: Left 2s infinite ease-out;
}

@media (max-width: 56.25em) {
    .circleBox {
        width: 6rem;
        height: 6rem;
    }

    .zigzagBox img {
        height: 6rem;
    }
}

@media (max-width: 42.5em) {
    .rectangleBox {
        display: none;
    }

    .text {
        padding: 8rem 4rem;
    }

    .section {
        width: calc(100% + 1rem);
        gap: 0;
        grid-template-columns: 1fr;
    }

    .aside__containerSection {
        grid-row: 1/2;
        height: 20rem;
    }
}

@media (max-width: 31.25em) {
    .section__presentation .circleBox {
        right: -10%;
        top: 13%;
    }
}

h1,
h2,
h3 {
    font-family: "Prata", sans-serif;
    font-weight: 400;
    line-height: 1.2;
    line-height: 1.5;
}

h1 {
    font-size: 6rem;
    margin-bottom: 3rem;
}

h2 {
    font-size: 4rem;
}

h3 {
    font-size: 2.4rem;
}

.hero__info h1 {
    font-family: "Prata", sans-serif;
    font-size: 7rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 3rem;
}

.blog__header h2 {
    font-size: 3rem;
    text-align: center;
    font-weight: 400;
}

.studio h3 {
    font-size: 1.4rem;
}

.project__info h3 {
    /*line-height: 0;*/
}

.section__blog-widget h3 {
    line-height: 1.3;
}

.aside__containerSection h3,
.aside--top h3 {
    color: #ffffff;
    text-transform: uppercase;
}

.blog-widget h4 {
    margin-bottom: 1rem;
}

@media (max-width: 56.25em) {
    h2 {
        font-size: 3.4rem;
    }

    h3 {
        line-height: 1.4;
    }

    .hero__info h1 {
        font-size: 5rem;
        margin-bottom: 6rem;
    }
}

@media (max-width: 42.5em) {
    .hero__info h1 {
        font-size: 5rem;
    }

    h2 {
        margin-bottom: 3rem;
    }

    .studio h3 {
        font-size: 2rem;
    }
}

@media (max-width: 31.25em) {
    h3 {
        font-size: 2rem;
    }
}

.flex {
    display: flex !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.margin-top-md {
    margin-top: 8rem !important;
}

.margin-top-bg {
    margin-top: 10rem !important;
}

.margin-left-sm {
    margin-left: 4rem !important;
}

.margin-left-md {
    margin-left: 5rem !important;
}

@media (max-width: 42.5em) {
    main.margin-left-md {
        margin: 0 !important;
    }
}

.margin-left-bg {
    margin-left: 12rem !important;
}

.relative {
    position: relative !important;
}

.none {
    display: none;
}

@media (max-width: 42.5em) {
    .none {
        display: block;
    }
}

.header {
    width: 131rem;
    max-width: 100%;
    position: fixed;
    z-index: 999;
    margin: 0 auto;
    display: flex;
    background-color: #fff4e0;
}

@media (max-width: 48em) {
    .header {
        padding: 2rem 0;
        justify-content: space-between;
        align-items: center;
    }
}

.line {
    background-color: #052123;
    padding: 1.5px;
    margin-bottom: 5px;
}

.line--1 {
    width: 80%;
    transition: all 0.4s ease-out;
}

.line--2 {
    width: 50%;
    transition: all 0.4s ease-out;
}

.line--3 {
    width: 100%;
    transition: all 0.4s ease-out;
}

.menu {
    padding: 0 10rem;
    background-color: #fff4e0;
    height: 7.7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 1s ease-out;
    width: 120rem;
}

.menu__social {
    display: none;
}

.menu .hero__squareBox {
    display: none;
}

.menu__icons {
    display: flex;
    padding: 1rem;
}

.menu-logo {
    margin: auto;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
}

.menu-logo:hover .line--1,
.menu-logo:hover .line--2,
.menu-logo:hover .line--3 {
    width: 100%;
}

.menu__list {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.menu__link:link,
.menu__link:visited {
    font-size: 1.6rem;
    font-weight: 600;
    color: #052123;
    transition: all 0.4s ease-out;
}

.menu__link:hover,
.menu__link:active {
    color: #114e53;
}

.close.menu {
    transform: translateY(-400%);
}

.close.menu-logo .line--1 {
    width: 100%;
    transform: rotate(45deg) translate(6px, 5px);
}

.close.menu-logo .line--2 {
    width: 100%;
    transform: rotate(-45deg);
}

.close.menu-logo .line--3 {
    display: none;
}

@media (max-width: 75em) {

    .menu__link:link,
    .menu__link:visited {
        font-size: 1.4rem;
    }

    .menu__list {
        justify-content: unset;
    }
}

@media (max-width: 48em) {
    .menu {
        position: fixed;
        padding: 0 5rem;
        width: 60%;
        height: 100vh;
        top: 0;
        left: 40%;
        box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
        text-align: center;
    }

    .menu__social {
        margin-top: 10rem;
        width: 80%;
        display: flex;
        justify-content: center;
        gap: 5rem;
        font-size: 4rem;
    }

    .menu__social a {
        color: #052123;
    }

    .close.menu-logo .line--1 {
        width: 105%;
        transform: rotate(45deg) translate(6px, 6px);
    }

    .menu-logo {
        width: 4rem;
        height: 4rem;
    }

    .line {
        padding: 1.8px;
    }

    .menu__list {
        display: flex;
        flex-direction: column;
    }

    .menu__link:link,
    .menu__link:visited {
        font-size: 2rem;
    }

    .close.menu {
        transform: translateX(400%);
    }
}

@media (max-width: 27em) {
    .menu {
        left: 30%;
        width: 80%;
        padding: 0 5rem;
    }

    .menu__list {
        gap: 5rem;
    }

    .menu__link:link,
    .menu__link:visited {
        font-size: 2rem;
    }
}

.aside {
    position: fixed;
    z-index: 999;
    width: 3%;
    padding: 10rem 0;
    margin-right: 2rem;
    margin-top: 5rem;
}

.aside__container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aside__container ul {
    display: flex;
    transform: rotate(270deg);
    gap: 5rem;
}

.aside__name {
    width: 20rem;
    display: inline-block;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    margin-bottom: 20rem;
    transform: rotate(270deg);
    color: #052123;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.aside__link:link,
.aside__link:visited,
.aside__link:link,
.aside__link:visited {
    color: #052123;
    transition: all 0.4s ease-out;
}

.aside__link:hover,
.aside__link:active,
.aside__link:hover,
.aside__link:active {
    color: #114e53;
}

.aside__containerSection {
    background-color: #8ca1aa;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.aside--2 {
    background-color: #3e534c;
}

.aside--top {
    padding: 4rem;
    color: #fff4e0;
    background-color: #052123;
}

.myNamePhone {
    display: none;
}

@media (max-width: 48em) {
    .aside {
        display: none;
    }

    .myNamePhone {
        display: block;
        padding-right: 3rem;
        font-size: 2rem;
        font-weight: bold;
    }
}

@media (max-width: 31.25em) {

    .aside__containerSection {
        height: 30rem;
    }
}

.section-hero {
    display: grid;
    /* grid-template-columns: 45% 55%; */
    gap: 1rem;
    width: calc(100% + 1rem);
    position: relative;
    background-color: #052123;
}

.hero__img img {
    width: 100%;
    height: 100%;
}

.hero__info {
    background-color: #052123;
    color: #fff4e0;
    padding: 5rem 15rem 5rem 5rem;
}

.hero__text {
    margin-bottom: 5rem;
}

.hero__squareBox {
    position: absolute;
    /* animation: Rotate 2.5s ease-out infinite; */
    top: 10%;
    right: 8%;
    border: 3px solid #ffffff;
    width: 7rem;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero__squareBox.rotate {
    animation: Rotate 2.5s ease-out infinite;
}

@media (max-width: 56.25em) {
    .section-hero {
        grid-template-columns: 1fr;
    }

    .hero__img {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 65rem;
    }

    .hero__img img {
        width: 60%;
    }

    .hero__info {
        padding-right: 10rem;
    }

    .hero__text {
        margin-bottom: 6rem;
    }

    .hero__squareBox {
        display: none;
    }
}

@media (max-width: 48em) {
    .hero__img {
        height: 65rem;
    }

    .hero__img img {
        width: 80%;
    }

    .hero__info {
        padding: 5rem;
    }
}

@media (max-width: 31.25em) {
    .hero__img {
        height: 60rem;
    }

    .hero__img img {
        width: 90%;
    }

    .hero__info {
        padding-bottom: 5rem;
    }
}

.features {
    background-color: #052123;
    padding: 4rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 3rem;
}

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

.feature img {
    height: 10rem;
}

.feature p {
    color: #fff4e0;
    font-size: 1.6rem;
}

@media (max-width: 31.25em) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .feature {
        margin-bottom: 5rem;
    }
}

.experience__container {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.experience__header {
    cursor: pointer;
    padding: 1rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #052123;
}

.experience__title {
    display: flex;
    gap: 1.6rem;
}

.experience__title p {
    font-size: 1.6rem;
    font-weight: 400;
}

.experience__content {
    margin-top: 2rem;
    position: absolute;
    z-index: -1;
    padding: 2rem;
    opacity: 0;
    transition: all 0.3s ease-out;
}

.experience__content p {
    margin-bottom: 3rem;
}

.experience__grid {
    display: grid;
    grid-template-columns: 3.5fr 1fr;
    gap: 2.5rem;
}

.open.experience__content {
    height: auto;
    position: relative;
    z-index: 1;
    transform: translateY(0);
    opacity: 1;
}

.iconHappyBox {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon__happy {
    font-size: 8rem;
    font-weight: 300;
    color: #052123;
}

.studios {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.studio {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 1rem;
}

.studio p {
    margin-bottom: 0;
}

.studio div {
    align-self: center;
    justify-self: center;
}

.studio picture {
    display: flex;
    justify-content: center;
}

.studio img {
    height: 11rem;
    object-fit: cover;
    filter: opacity(0.6);
    filter: grayscale(0.5);
}

.studio img:nth-child(1) {
    width: 9rem;
}

.studio img:nth-child(2) {
    width: 15rem;
}

@media (max-width: 56.25em) {
    .studio picture {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .studio h3 {
        margin-bottom: 1rem;
    }

    .studio img:nth-child(1) {
        width: 7rem;
        margin-right: 2rem;
    }

    .experience__grid {
        gap: 0;
    }

    .experience__title p {
        font-size: 2rem;
    }

    .experience__grid div {
        width: 90%;
    }
}

@media (max-width: 31.25em) {
    .studios {
        gap: 3rem;
    }

    .studio,
    .experience__grid {
        grid-template-columns: 1fr;
    }

    .experience__grid {
        gap: 6rem;
    }

    .experience__content p {
        margin-bottom: 6rem;
    }
}

.section-projects {
    width: calc(100% + 1rem);
    margin-top: 1rem;
}

.section-projects__description {
    background-color: #ffffff;
    padding: 6rem 3rem;
}

.section__experience{
    margin-top: 1rem;
}

.gallery {
    background-color: #ffffff;
    /* padding-bottom: 8rem; */
    transition: all 0.4s ease-out;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.gallery img {
    object-fit: cover;
    width: 100%;
    height: 40rem;
}

.gallery__imgBox {
    display: block;
    position: relative;
    cursor: pointer;
    border: 1px solid #fff4e0;
}

.gallery__imgBox:hover .gallery__text {
    opacity: 1;
}

.gallery__imgBox::after {
    position: absolute;
    content: "";
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: linear-gradient(to right bottom, rgba(255, 244, 224, 0.4), rgba(255, 244, 224, 0.2)); */
}

.gallery__imgBox:nth-child(1) {
    grid-column: 1/5;
}

.gallery__imgBox:nth-child(2) {
    grid-column: 5/7;
}

.gallery__imgBox:nth-child(3),
.gallery__imgBox:nth-child(10) {
    grid-column: 1/4;
}

.gallery__imgBox:nth-child(4),
.gallery__imgBox:nth-child(11) {
    grid-column: 4/7;
}

.gallery__imgBox:nth-child(5) {
    grid-column: 1/5;
}

.gallery__imgBox:nth-child(6) {
    grid-column: 5/7;
    /* grid-row: 3/5; */
}

.gallery__imgBox:nth-child(6) img {
    /* height: 80rem; */
}

.gallery__imgBox:nth-child(7) {
    grid-column: 1/5;
}

.gallery__imgBox:nth-child(8) {
    grid-column: 1/3;
}

.gallery__imgBox:nth-child(9) {
    grid-column: 3/7;
}

.gallery__imgBox:nth-child(12) {
    grid-column: 1/5;
    grid-row: 7/8;
}

.gallery__imgBox:nth-child(13) {
    grid-column: 5/7;
}

.gallery__imgBox:nth-child(14) {
    grid-column: 1/3;
    grid-row: 8/10;
}

.gallery__imgBox:nth-child(14) img {
    height: 80rem;
}

.gallery__imgBox:nth-child(15) {
    grid-column: 3/7;
    grid-row: 8/9;
    height: 40rem;
}

.gallery__imgBox:nth-child(16) {
    grid-column: 3/7;
    grid-row: 9/10;
    height: 40rem;
}

.gallery__imgBox:nth-child(17) {
    grid-column: 1/5;
    grid-row: 10/11;
    height: 40rem;
}

.gallery__imgBox:nth-child(18) {
    grid-column: 5/7;
    grid-row: 10/11;
    height: 40rem;
}

.gallery__text {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(5, 33, 35, 0.9);
    text-transform: uppercase;
    font-size: 1.6rem;
    text-align: center;
    color: #ffffff;
    opacity: 0;
    transition: all 0.4s ease-out;
}

.project__infoBox {
    opacity: 0;
    transition: all 0.4s ease-in;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.close .project__infoBox {
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.678);
    padding: 6rem 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project__info {
    overflow: hidden;
    background-color: #ffffff;
    width: 80%;
    height: 100%;
    padding: 5rem;
    overflow-y: scroll;
}

.project__info header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.project__info button {
    background: none;
    line-height: 0;
    border: none;
    font-size: 4rem;
    cursor: pointer;
}

.project__info p {
    margin-bottom: 8rem;
}

.project-slides {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
    margin-bottom: 8rem;
}

.project-slides.mobile-project{
    grid-template-columns: repeat(12, 1fr);
}

.project-slides img {
    /* border: 1px solid rgba(0, 0, 0, 0.1); */
    width: 100%;
    height: 50rem;
    object-fit: cover;
    border-radius: 1rem;
    transition: all 0.4s ease-out;
}

.project-slides img:nth-child(1) {
    grid-column: 1/5;
    grid-row: 1/2;
}

.project-slides img:nth-child(2) {
    grid-column: 1/7;
    grid-row: 2/3;
}

.project-slides img:nth-child(3) {
    grid-column: 5/7;
    grid-row: 1/3;
    /* height: 102rem; */
    border-radius: 11px;
}

.project-slides img:nth-child(4) {
    grid-column: 3/7;
    grid-row: 3/4;
}

.project-slides img:nth-child(5) {
    grid-column: 1/3;
    grid-row: 3/5;
    /* height: 102rem; */
    border-radius: 11px;
}

.project-slides img:nth-child(6) {
    grid-column: 1/7;
    grid-row: 4/5;
}

.project-slides.mobile-project img:nth-child(1) {
    grid-column: 1/9;
    grid-row: 1/2;
}

.project-slides.mobile-project img:nth-child(2) {
    grid-column: 1/5;
    grid-row: 2/3;
}

.project-slides.mobile-project img:nth-child(3) {
    grid-column: 9/13;
    grid-row: 1/3;
    /* height: 102rem; */
    border-radius: 11px;
}

.project-slides.mobile-project img:nth-child(4) {
    grid-column: 5/9;
    grid-row: 2/3;
}

.project-slides.mobile-project img:nth-child(5) {
    grid-column: 9/13;
    grid-row: 2/3;
    /* height: 102rem; */
    border-radius: 11px;
}

.project-slides.mobile-project img:nth-child(6) {
    grid-column: 1/7;
    grid-row: 4/5;
    display: none;
}

.project__buttons {
    margin-right: 3rem;
    display: flex;
    justify-content: flex-end;
    gap: 15rem;
}

@media (max-width: 75em) {
    .project__info {
        width: 90%;
    }

    .project__info {
        padding: 4rem;
        padding-bottom: 5rem;
        width: 100%;
        height: 90%;
    }

    .project__info .project-slides img {
        /*height: 50rem;*/
        grid-column: 1/7;
    }

    .project__info .project-slides img:nth-child(1) {
        grid-row: 1/2;
    }

    .project__info .project-slides img:nth-child(2) {
        grid-row: 2/3;
    }

    .project__info .project-slides img:nth-child(4) {
        grid-row: 3/4;
    }

    .project__info .project-slides img:nth-child(6) {
        grid-row: 4/5;
    }

    .project__info .project-slides img:nth-child(3),
    .project__info .project-slides img:nth-child(5) {
        /*display: none;*/
    }

    .project__info header {
        flex-direction: column-reverse;
        gap: 3rem;
        margin-bottom: 5rem;
    }

    .project__info h3 {
        font-size: 1.8rem;
    }

    .project__buttons {
        flex-direction: column;
        gap: 5rem;
    }

    .project__buttons .btn:hover::before {
        width: 100%;
    }
}

@media (max-width: 31.25em) {
    .gallery {
        padding: 2rem 2rem 6rem 2rem;
        row-gap: 1rem;
    }

    .project-slides {
        /* gap: 5rem; */
        gap: 1.5rem;
    }
    
    .project-slides img {
        height: inherit;
    }

    .section-projects .gallery .gallery__imgBox {
        grid-column: 1/7;
    }

    .gallery__imgBox:nth-child(6) img {
        background-position: top;
        /*height: 70rem;*/
    }

    .section-projects .gallery .gallery__imgBox:nth-child(14) {
        grid-row: 17/19;
    }

    .project__info .project-slides img {
        /*height: 100rem;*/
        /*grid-column: 1/7;*/
    }

    .project__info .project-slides img:nth-child(3) {
        display: block;
        /*grid-row: 1/5;*/
        grid-row: unset;
    }

    .project__info .project-slides img:nth-child(5) {
        display: block;
        grid-row: 5/9;
    }

    .project__info .project-slides img:nth-child(1),
    .project__info .project-slides img:nth-child(2),
    .project__info .project-slides img:nth-child(4),
    .project__info .project-slides img:nth-child(6) {
        /*display: none;*/
    }

    .project__close {
        font-size: 6rem;
    }
}

.section__skills {
    width: calc(100% + 1rem);
    margin-bottom: 1rem;
    margin-top: 1rem
}

.skills__container {
    background-color: #ffffff;
    padding: 4rem 4rem 15rem 4rem;
}

.skills__squareBox {
    top: 10%;
    right: 10%;
    border-color: #052123;
}

.skill__description {
    width: 70%;
    margin-bottom: 10rem;
}

.skill__description span {
    font-weight: 700;
}

.skill__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 5rem;
    justify-content: space-evenly;
    align-items: space-evenly;
}

.icon__skill {
    font-size: 6rem;
    justify-self: center;
    color: #052123;
}

@media (max-width: 31.25em) {
    .skill__description {
        width: 100%;
    }
}

.section__presentation .description {
    margin-top: 5rem;
}

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

.signature__box img {
    height: 3rem;
}

.section__blog-widget .separation-line {
    margin-bottom: 5rem;
}

.blogs-widget__container {
    display: flex;
    flex-direction: column;
}

.blog-widget {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    border-bottom: 1px solid #052123;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}

.blog-widget:last-child {
    margin-bottom: 0;
    border: none;
}

.blog-widget p {
    margin-bottom: 2rem;
}

.blog-widget__img {
    position: relative;
}

.blog-widget__img::after {
    position: absolute;
    content: "";
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right bottom, rgba(255, 244, 224, 0.2), rgba(255, 244, 224, 0.1));
}

.blog-widget__description {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.blog-widget__description .btn--blue {
    width: 35%;
}

@media (max-width: 75em) {
    .blog-widget {
        grid-template-columns: 1fr;
    }

    .blog-widget__description {
        grid-row: 2/3;
    }
}

@media (max-width: 42.5em) {
    .blog-widget h4 {
        font-size: 2rem;
    }

    .blog-widget p {
        font-size: 1.6rem;
    }

    .blog-widget__description {
        padding: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
    }

    .blog-widget__description .btn--blue {
        width: 25%;
    }

    .section__blog-widget h3 {
        line-height: 1.6;
    }
}

@media (max-width: 31.25em) {
    .section__blog-widget h2 {
        margin-bottom: 5rem;
    }

    .section__blog-widget .separation-line {
        margin-bottom: 10rem;
    }
}

.section__contact {
    width: calc(100% + 1rem);
    background-color: #052123;
    color: #ffffff;
    padding: 8rem;
}

.section__contact .rectangleBox {
    top: 15%;
    right: 5%;
}

.contact__grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
}

.contact__description {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.contact__text {
    font-size: 1.2rem;
    margin-top: 7rem;
}

.contact__textBold {
    font-weight: 700;
}

.contact__info {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 2.2;
}

.contact__info address {
    font-style: normal;
}

.contact__info span {
    font-weight: 400;
}

.contact__icons {
    justify-self: center;
    align-self: center;
    padding: 5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.contact__icons div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    border: 1px solid #fff4e0;
    border-top-left-radius: 11px;
    border-bottom-right-radius: 11px;
}

.contact__icons a {
    color: #fff4e0;
    font-size: 1.2rem;
}

.contact__icon {
    font-size: 6rem;
}

@media (max-width: 48em) {
    .section__contact {
        padding: 8rem 4rem;
    }

    .contact__grid {
        grid-template-columns: 1fr;
        gap: 8rem;
    }

    .contact__description {
        width: 80%;
        margin-top: 5rem;
    }

    .contact__text,
    .contact__textBold,
    .contact__info {
        font-size: 1.6rem;
    }

    .contact__text {
        margin-top: 0;
    }

    .contact__icons {
        padding: 0;
    }
}

.blog {
    padding: 5rem;
    background-color: #ffffff;
}

.blog__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    align-items: center;
    margin-bottom: 5rem;
}

.blog__headerInfo {
    font-size: 1.2rem;
    display: flex;
    gap: 2rem;
}

.blog__headerInfo cite {
    font-weight: 700;
}

.blog__headerInfo cite::after {
    position: absolute;
    content: "";
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #114e53;
    opacity: 0.6;
}

.blog__imageBox {
    margin-bottom: 5rem;
    display: block;
}

.blog__image {
    width: 100%;
    object-fit: cover;
    height: 50rem;
}

.blog__info {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 5rem;
}

.blog__info p {
    margin-bottom: 3rem;
}

.blog__focus {
    background-color: #052123;
    color: #fff4e0;
    padding: 2rem;
    font-weight: 600;
}

.blog__feature {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 3rem;
    margin: 5rem 0 8rem 0;
}

.blog__feature-ImgBox {
    justify-self: center;
}

.blog__feature-ImgBox img {
    height: 45rem;
}

.blog__nextPre {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.blog__nextPre p {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.blog__nextPre a {
    font-size: 1.6rem;
    font-weight: 600;
    color: #052123;
}

.blog__next {
    padding: 0 2rem;
    border-left: 1px solid #052123;
}

@media (max-width: 48em) {
    .blog__info {
        width: 90%;
    }

    .blog__feature {
        grid-template-columns: 1fr;
    }

    .blog__nextPre {
        grid-template-columns: 1fr;
        row-gap: 3rem;
    }

    .blog__next {
        border: none;
        padding: 0;
    }
}

@media (max-width: 27em) {
    .blog__info {
        width: 100%;
    }

    .blog__nextPre {
        grid-template-columns: 1fr;
        gap: 5rem;
    }

    .blog__next {
        padding: 0;
        border: none;
    }
}

.footer {
    padding: 6rem;
}

.footer__icons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer__icon {
    font-size: 2.4rem;
    color: #052123;
}

@media (max-width: 31.25em) {
    .footer__icon {
        font-size: 4rem;
        color: #052123;
    }
}

.tooltip {
    background-color: #ffaffc;
    border-radius: 10px;
    padding: 10px 15px;
    position: relative;
    margin: 15px;
    text-align: center;
}

.tooltip::after {
    background-color: #333;
    border-radius: 10px;
    color: #b254ff;
    display: none;
    padding: 10px 15px;
    position: absolute;
    text-align: center;
    z-index: 999;
}

.tooltip.top::after {
    content: 'top';
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% - 10px));
}

.tooltip.bottom::after {
    content: 'bottom';
    bottom: 0;
    left: 50%;
    transform: translate(-50%, calc(100% + 10px));
}

.tooltip.right::after {
    content: 'right';
    top: 0;
    right: 0;
    transform: translateX(calc(100% + 10px));
}

.tooltip.left::after {
    content: 'left';
    top: 0;
    left: 0;
    transform: translateX(calc(-100% - 10px));
}

.tooltip:hover::after {
    display: block;
}

.tooltip::before {
    background-color: #333;
    content: ' ';
    display: none;
    position: absolute;
    width: 15px;
    height: 15px;
    z-index: 999;
}

.tooltip:hover::before {
    display: block;
}

.tooltip.top::before {
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
}

.tooltip.bottom::before {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, calc(100% + 5px)) rotate(45deg);
}

.tooltip.right::before {
    top: 50%;
    right: 0;
    transform: translate(calc(100% + 5px), -50%) rotate(45deg);
}

.tooltip.left::before {
    top: 50%;
    left: 0;
    transform: translate(calc(-100% - 5px), -50%) rotate(45deg);
}

.icon-card{
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.iconscontainer .icon {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    /* box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.07); */
  }

.iconscontainer .icon span {
    position: absolute;
    top: 60%;
    margin-top: 10px;
    padding: 0.55rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
    border-radius: 50px;
    background-color: #3e534c;
    box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0;
    transition: all 0.2s ease-in-out;
  }
  .iconscontainer .icon:hover span {
    top: 100%;
    opacity: 1;
  }

  .iconscontainer .icon:not(:hover) {
    /* opacity: 0.5; */
  }

  .hexagon {
    top: 30vh;
    left: 40%;
    position: absolute;
    margin: 0 auto;
    background-color: dodgerblue;
    border-radius: 10px;
    width: 100px; 
    height: 63px;
    box-sizing: border-box;
    transition: all 1s;
    border: 0.4vh solid transparent;
}
  
/* Creating pseudo-class */
.hexagon:before, .hexagon:after {
    content: "";
    border: inherit;
    position: absolute;
    top: -0.5vh;
    left: -0.5vh;
    background-color: dodgerblue;
    border-radius: inherit;
    height: 100%;
    width: 100%;
}
  
/* Align them in such a way
that they form a hexagon */
.hexagon:before {
    transform: rotate(60deg);
}
.hexagon:after {
    transform: rotate(-60deg);
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
}
.modal-btn:checked + label,
.modal-btn:not(:checked) + label{
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 2;
  height: 50px;
  transition: all 200ms linear;
  border-radius: 4px;
  width: 240px;
  letter-spacing: 1px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  text-align: center;
    -ms-flex-item-align: center;
    align-self: center;
  border: none;
  cursor: pointer;
  background-color: #102770;
  color: #ffeba7;
  box-shadow: 0 12px 35px 0 rgba(16,39,112,.25);
}
.modal-btn:not(:checked) + label:hover{
  background-color: #ffeba7;
  color: #102770;
}
.modal-btn:checked + label .uil,
.modal-btn:not(:checked) + label .uil{
	margin-left: 10px;
	font-size: 18px;
}
.modal-btn:checked + label:after,
.modal-btn:not(:checked) + label:after{
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 110;
  width: 40px;
  border-radius: 3px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  background-color: #ffeba7;
  color: #102770;
  font-family: 'unicons';
  content: '\eac6'; 
  box-shadow: 0 12px 25px 0 rgba(16,39,112,.25);
  transition: all 200ms linear;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}
.modal-btn:checked + label:hover:after,
.modal-btn:not(:checked) + label:hover:after{
  background-color: #102770;
  color: #ffeba7;
}
.modal-btn:checked + label:after{
  transition: opacity 300ms 300ms ease, transform 300ms 300ms ease, background-color 250ms linear, color 250ms linear;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.modal{
  position: fixed;
  display: block;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow-x: hidden;
  background-color: rgba(31,32,41,.75);
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms 700ms ease;
}
.modal-btn:checked ~ .modal{
  pointer-events: auto;
  opacity: 1;
  transition: all 300ms ease-in-out;
}
.modal-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  padding-bottom: 20px;
  background-color: #fff;
    -ms-flex-item-align: center;
    align-self: center;
    box-shadow: 0 12px 25px 0 rgba(199,175,189,.25);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 250ms 250ms ease, transform 300ms 250ms ease;
}
.modal-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.modal-wrap p {
  padding: 20px 30px 0 30px;
}
.modal-btn:checked ~ .modal .modal-wrap{
  opacity: 1;
  transform: scale(1);
  transition: opacity 250ms 500ms ease, transform 350ms 500ms ease;
}


.logo {
	position: absolute;
	top: 25px;
	left: 25px;
	display: block;
	z-index: 1000;
	transition: all 250ms linear;
}
.logo img {
	height: 26px;
	width: auto;
	display: block;
  	filter: brightness(10%);
	transition: filter 250ms 700ms linear;
}
.modal-btn:checked ~ .logo img {
  	filter: brightness(100%);
	transition: all 250ms linear;
}


@media screen and (max-width: 500px) {
	.modal-wrap {
		width: calc(100% - 40px);
		padding-bottom: 15px;
	}
	.modal-wrap p {
	  padding: 15px 20px 0 20px;
	}
}

/* TYPEWRITER */


/* Animation */
    
    
   @media only screen and (min-width:769px){
       .line-1{
            position: relative;
            /* top: 50%; */
            /* width: 24em; */
            /* margin: 0 auto; */
            border-right: 2px solid rgba(255,255,255,.75);
            /* font-size: 180%; */
            /* text-align: center; */
            white-space: nowrap;
            overflow: hidden;
            /* transform: translateY(-50%); */
        }
        
        .anim-typewriter{
      animation: typewriter 2s steps(19) 1.4s 1 normal both,
                 blinkTextCursor 500ms steps(19) 2s infinite both;
    }
    .anim-typewriter2{
        animation: typewriter2 0.35s steps(3) 1s 1 normal both,
                   blinkTextCursor 500ms steps(3) 0s 3 normal both;
      }
    
   }
   
   @keyframes typewriter{
      from{width: 0;}
      to{width: 9.5em;}
    }
    
    @keyframes typewriter2{
        from{width: 0;}
        to{width: 2.2em;}
      }
    
    @keyframes blinkTextCursor{
        0%{border-right-color: transparent;}
        50%{border-right-color: rgba(255,255,255,.75);}
        100%{border-right-color: transparent;}
    }
/* TYPEWRITER */

/* SCROLL */
/*@media only screen and (min-width:769px){*/
    .hidden {
        opacity: 0;
        filter: blur(0.6rem);
        transition: all 0.65s ease-in-out;
    }
    .hidden.bottom {
        transform: translateY(100%);
    }
    .hidden.left {
        transform: translateX(-100%);
    }
    .hidden.right {
        transform: translateX(100%);
    }
    
    .show{
        filter: blur(0);
        opacity: 1;
    }
    
    .show:not(.rotate){
        transform: translate(0) !important;
    }
/*}*/
/* SCROLL */