/* ==== main header ====*/
.main-header {
    background-image: var(--gradient-blue-right);
    padding: 20px 0px 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px
}


.main-header-frame-top {
    display: flex;
    flex-direction: row;
    justify-content: start;
    color: white;
    gap: 30px
}


.photo-me {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    border:4px solid var(--border-color)
}


.main-header-frame-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h1{
    line-height: 64px;
    font-size: 64px !important;
    transform: translateX(-2px);
}
.main-header-subtitle {
    font-size: 24px;
}



.main-header-contact {
    width: 70%;
    display: flex;
    flex-direction: row;
    color: white;
    gap: 17%
}


.message-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 24px
}

.arrow-left {
    transform: rotate(-90deg)
}

.arrow-right {
    transform: rotate(90deg);
}