:root {
    --very-dark: #18171C;
    --dynamic-black: #201b1b;
    --stone-cold: #555555;
    --white: #ffffff;
    --apricot-ice: #fef7e9;
    --yellow: #F7AF24;
    --borage-blue: #5C64CF;
}

html {
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
}

body {
    color: var(--very-dark);
    font-size: 0.75rem;
    line-height: 1.5;
    font-weight: 300;
}

.bg-color {
    background-color: var(--white);
}

/*header*/
.border-header {
    display: flex;
    align-items: center;
    font-family: "Poppins", sans-serif;
    background-color: var(--white);
    border-bottom: 2px solid #18171C;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 70px;
}

.desktop-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.style-list {
    display: flex;
    align-items: center;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-navbar {
    display: none;
}

.dropdown.mobile-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown-item.link-active_mobile {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--very-dark);
    border-radius: 30px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0 30px;
    line-height: 55px;
}

.link-active {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--very-dark);
    border-radius: 30px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 9px 20px;
}

.link-active:active, .link-active:hover {
    background-color: var(--yellow);
    color: var(--very-dark);
}

.button-style {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    background-color: var(--yellow);
    border: 2px solid var(--very-dark);
    transition: ease all 0.35s;
    padding: 12px 28px;
}

.button-style:hover {
    background: var(--very-dark);
    border-color: var(--very-dark);
    color: var(--white);
}

/*main*/
.container-fluid.wrap-container {
    position: relative;
    padding: 0;
    margin: 0;
}

.icon-plus {
    background-image: url("../img/plus.svg");
    background-repeat: no-repeat;
    height: 69px;
    width: 69px;
    position: absolute;
    top: 1%;
    left: 5%;
    transform: rotate(350deg) skew(1deg, 0deg);
}

.icon-arrow {
    background-image: url("../img/lightning.svg");
    background-repeat: no-repeat;
    height: 144px;
    width: 153px;
    position: absolute;
    top: 7%;
    right: 4%;
    transform: rotate(205deg) skew(1deg, 0deg);
}

/*info section with portrait*/
.home-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 3rem 0;
}

.portrait-container {
    margin: 0 auto;
}

.portrait {
    background-image: url("../img/avatar.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 492px;
    border: 2px solid var(--very-dark);
    border-top: none;
}

.transform-text_hello, .transform-text {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--borage-blue);
    border: 1px solid var(--borage-blue);
    padding: 8px 20px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.transform-text_hello {
    transform: rotate(-35deg);
}

.transform-text {
    transform: rotate(-15deg);
}

.bs-header {
    font-size: 3.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--very-dark);
    margin-top: 15px;
}

.ms-header {
    font-size: 1.560rem;
    color: var(--stone-cold);
    margin-bottom: 30px;
}

.style-paragraph {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--dynamic-black);
    margin-bottom: 30px;
}

.icons-list {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--very-dark);
    padding: 12px;
    margin: 0;
}

.icon-purple {
    background-image: url(../img/circle-purple.svg);
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

.icon-yellow {
    background-image: url(../img/circle-yellow.svg);
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

.purple-button {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    background: var(--borage-blue);
    color: var(--white);
    border: 2px solid transparent;
    transition: ease all 0.35s;
    padding: 12px 28px;
}

.purple-button:hover {
    background: var(--very-dark);
    border-color: var(--very-dark);
    color: var(--white);
}

/*services section*/
.img-wave_inner,.img-wave_last {
    position: relative;
    display: inline;
    vertical-align: top;
    padding-bottom: 15px;
}
.img-wave_last::after {
    content: "";
    background-image: url("../img/wave-line.svg");
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 92px;
    height: 14px;
}

.feature-box {
    background: var(--white);
    border: 2px solid var(--very-dark);
    box-shadow: 0 0 0 0 var(--very-dark);
    height: 395px;
    transition: ease all 0.35s;
    padding: 30px!important;
}

.number {
    font-size: 3.475rem;
    font-weight: 700;
    color: var(--very-dark);
    line-height: 1;
    margin-bottom: 1.5rem;
}

.item-service {
    font-size: 1.375rem;
    color: var(--very-dark);
    margin-bottom: 10px;
}

.height-paragraph {
    height: 110px;
}

.box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--yellow);
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.icon-tablet, .icon-desktop, .icon-email {
    background-repeat: no-repeat;
    width: 32px;
    height: 33px;
}

.icon-tablet {
    background-image: url("../img/tablet.svg");
}

.icon-desktop {
    background-image: url("../img/desktop.svg");
}

.icon-email {
    background-image: url("../img/email.svg");
}

/*skills section*/
.container-fluid.container-section {
    background-color: var(--apricot-ice);
    padding: 0;
}

.row.skills-section {
    display: flex;
    justify-content: space-between;
}

.medium-header {
    font-size: 3.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--very-dark);
    margin-top: 15px;
    margin-bottom: 30px;
}

.skill-text {
    color: var(--very-dark);
    font-size: 2rem;
    font-weight: 400;
    padding: 38px 0;
    margin: 0;
}

.img-wave_inner::after {
    content: "";
    background-image: url("../img/wave-line.svg");
    background-repeat: no-repeat;
    width: 92px;
    height: 14px;
    position: absolute;
    right: 0;
}


.skill-item {
    display: flex;
    align-items: center;
    border: 2px solid var(--very-dark);
    box-shadow: 0 0 0 0 var(--very-dark);
    transition: ease all 0.35s;
    padding: 15px;
}

.skill-item:hover, .feature-box:hover {
    box-shadow: 3px 3px 0 0 var(--very-dark);
}

.icon-html {
    background-image: url("../img/html5.svg");
}

.icon-css {
    background-image: url("../img/css3.svg");
}

.icon-bootstrap {
    background-image: url("../img/bootstrap.svg");
}

.icon-git {
    background-image: url("../img/git.svg");
}

.icon-figma {
    background-image: url("../img/figma.svg");
}

.icon-sass {
    background-image: url("../img/sass.svg");
}

.icon-javascript {
    background-image: url("../img/javascript.svg");
}

.icon-react {
    background-image: url("../img/react.svg");
}

.icon-jquery {
    background-image: url("../img/jquery.svg");
}

.icon-oop {
    background-image: url("../img/oop.svg");
}

.icon-tailwind {
    background-image: url("../img/tailwind.svg");
}

.icon-alpine {
    background-image: url("../img/alpine.svg");
}

.icon-framer_motion {
    background-image: url("../img/framer_motion.svg");
}

.icon_router {
    background-image: url("../img/router.svg");
}

.icon_react_bootstrap {
    background-image: url("../img/react_bootstrap.svg");
}

.icon_styled_components {
    background-image: url("../img/styled-components.svg");
}

.icon-typescript {
    background-image: url("../img/typescript.svg");
}

.icon-redux {
    background-image: url("../img/redux.svg");
}

.icon-next {
    background-image: url("../img/nextjs.svg");
}

.icon-vercel {
    background-image: url("../img/vercel.svg");
}

.icon-vue {
    background-image: url("../img/vue.svg");
}

.icon-html, .icon-css, .icon-bootstrap, .icon-git,
.icon-figma, .icon-sass, .icon-javascript,
.icon-jquery, .icon-react, .icon-oop,
.icon-tailwind, .icon-alpine, .icon-typescript,
.icon-redux, .icon-next, .icon-vercel, .icon-vue {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 50px;
    height: 50px;
}

.icon-framer_motion, .icon_router,.icon_react_bootstrap, .icon_styled_components {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 40px;
    height: 40px;
}

.style-text {
    font-weight: 700;
    color: var(--very-dark);
    padding-left: 15px;
    margin: 0;
}

.grid-skills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
}

.grid-skills_learning {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 15px;
}

.avatar-container {
    display: flex;
    justify-content: space-around;
    gap: 100px;
}

.code-svg {
    background-image: url("../img/code.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 100px;
    height: 90px;
    transform: rotate(350deg) skew(1deg, 0deg);
}

.zigzag-svg {
    background-image: url("../img/zigzag.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(301deg) skew(1deg, 0deg);
    width: 100px;
    height: 90px;
    position: relative;
    top: 60px;
}

.position-svg {
    position: relative;
    left: 34px;
    top: -40px;
}

.flex-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.experience-list {
    list-style: none;
    border-top: 2px solid var(--very-dark);
    border-bottom: 2px solid var(--very-dark);
    padding: 17px 0;
    margin: 0;
}

.flex-container {
    display: flex;
}

.sm-header {
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    color: var(--very-dark);
    margin: 0;
}

.sm-header .units {
    margin-bottom: 3px;
}

.extra-info {
    font-size: 14px;
    font-weight: 400;
    color: var(--stone-cold);
    margin: 0;
}

.info-text {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

.work-place {
    font-size: 0.875rem;
    color: var(--stone-cold);
}

/*project section*/
.feature-box_portfolio {
    background: var(--white);
    border: 2px solid var(--very-dark);
    box-shadow: 0 0 0 0 var(--very-dark);
    transition: ease all 0.35s;
}

.img-wrap {
    height: 345px;
    border-bottom: 2px solid var(--very-dark);
}

.img-style_coming {
    width: 100%;
    height: 345px;
    object-fit: cover;
}

.img-react_films, .img-react_portfolio, .img-ecommerce, .img-yummy_restaurant, .img-colmary,
.img-fotomatic, .img-sole_shoes, .img-email_template, .img-prototype, .img-artemis,
.img-earthstormmedia, .img-assetcool, .img-react_form, .img-coming, .img-react_arthome, .img-printforge {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 345px;
    border-bottom: 2px solid var(--very-dark);
}

.img-coming {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    border-bottom: 2px solid var(--very-dark);
}

.img-react_portfolio {
    background-image: url("../img/react_portfolio.png");
}

.img-react_films {
    background-image: url("../img/react_films.png");
}

.img-ecommerce {
    background-image: url("../img/stellar.png");
}

.img-yummy_restaurant {
    background-image: url("../img/yummy_restaurant.png");
}

.img-colmary {
    background-image: url("../img/colmary.png");
}

.img-sole_shoes {
    background-image: url("../img/jQuery.png");
}

.img-fotomatic {
    background-image: url("../img/fotomatic.png");
}

.img-email_template {
    background-image: url("../img/email_template.png");
    background-position: bottom;
}

.img-prototype {
    background-image: url("../img/prototype.png");
}

.img-artemis {
    background-image: url("../img/artemis.png");
}

.img-earthstormmedia {
    background-image: url("../img/earthstormmedia.png");
}

.img-assetcool {
    background-image: url("../img/assetcool.png");
}

.img-react_form {
    background-image: url("../img/react_form.png");
}

.img-react_arthome {
    background-image: url("../img/arthome.png");
}

.img-printforge {
    background-image: url("../img/printforge.png");
}

.info-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.title-item {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--very-dark);
    margin: 0 0 8px;
}

.website-title {
    font-family: "Rubik", sans-serif;
    font-weight: 400;
    color: #555555;
}

.box-icon_purple {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--borage-blue);
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.icon-right-arrow {
    background-image: url("../img/right-arrow.svg");
    background-repeat: no-repeat;
    width: 32px;
    height: 33px;
}

.btn.button-style {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    background-color: var(--yellow);
    border: 2px solid var(--very-dark);
    border-radius: 0;
    transition: ease all 0.35s;
    padding: 12px 28px;
}

.btn.button-style:hover {
    background: var(--very-dark);
    border-color: var(--very-dark);
    color: var(--white);
}

/*contact form*/
.white-box {
    border: 2px solid var(--very-dark);
    padding: 35px;
}

.form-header {
    font-size: 2rem;
    font-weight: 600;
    color: var(--very-dark);
    margin: 0 0 5px;
}

.support-text {
    font-family: "Rubik", sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--stone-cold);
}

.label-style {
    font-weight: 500;
    color: var(--stone-cold);
    margin-bottom: .5rem;
}

.input-control.input-style {
    border-radius: 0;
    border: 1px solid var(--very-dark);
    box-shadow: none;
}

.input-control.success input {
    border-color: #09c372;
}

.input-control.error input {
    border-color: #ff3860;
}

.input-control .error {
    color: #ff3860;
    margin-top: 2px;
}

.input-control.error textarea {
    border-color: #ff3860;
}

.flex-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.flex-box:nth-last-child(2) {
    margin-bottom: 5rem;
}

.bg-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--borage-blue);
    width: 51px;
    height: 50px;
    border-radius: 50%;
}

.icon-outlook {
    background-image: url("../img/outlook_email.svg");
    width: 30px;
    height: 30px;
}

.icon-location {
    background-image: url("../img/location.svg");
    width: 30px;
    height: 30px;
}

.size-box {
    width: 85%;
}

.contact-list {
    list-style: none;
    border-bottom: 2px solid var(--very-dark);
    padding: 0;
    margin-left: 20px;
}

.title-list {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--stone-cold);
    line-height: 1.2;
    margin: 0 0 5px;
}

.list-info {
    font-size: 1.375rem;
    color: var(--very-dark);
    font-weight: 600;
    margin-bottom: 1rem;
}

.img-contact {
    background-image: url("../img/contact.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    height: 252px;
}

.submit-style {
    margin-top: 1rem !important;
}

/*footer*/
.footer-top {
    border-top: 2px solid var(--very-dark);
    padding: 15px;
}

.wrap-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-list {
    display: flex;
    align-items: center;
    gap: 20px;
}

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

.icon-linkedin, .icon-github {
    background-size: contain;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

.icon-linkedin {
    background-image: url("../img/linkedin.svg");
}

.icon-github {
    background-image: url("../img/github.svg");
}

.color-text {
    color: var(--stone-cold);
    margin: 0;
}

/*media query*/
@media screen and (max-width: 992px) {
    .desktop-navbar {
        display: none;
    }
    .mobile-navbar {
        display: flex;
        justify-content: flex-end;
    }
    .icon-menu {
        display: block;
        background-image: url("../img/menu.svg");
        background-repeat: no-repeat;
        width: 30px;
        height: 30px;
    }
    .dropdown.mobile-list {
        display: none;
        z-index: 1000;
        background-color: var(--white);
        border-bottom: 2px solid var(--very-dark);
        border-top: 2px solid var(--very-dark);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
    }
    .col-lg-8.mobile-home_section {
        text-align: center;
        padding-top: 0!important;
        padding-bottom: 2rem!important;
    }
    .list-info {
        font-size: 1.125rem;
    }
    .img-contact {
        background-position: center;
    }

    .flex-box:nth-last-child(2) {
        margin-bottom: 3rem;
    }

    .img-style_coming {
        object-fit: contain;
    }

    .flex-container {
        gap: 10px;
    }
}

@media screen and (max-width: 767px){
    .icon-plus, .icon-arrow {
        display: none;
    }
    .mobile-transform_text {
        transform: rotate(0deg);
    }
    .col-md-6.mobile-form {
        margin-top: 1rem;
    }
}

@media screen and (max-width: 420px) {
    .avatar-container {
        gap: 0;
    }
    .code-svg, .zigzag-svg {
        display: none;
    }
    .grid-skills, .grid-skills_learning {
        grid-template-columns: 1fr;
    }
    .white-box {
        padding: 15px;
    }
    .list-info {
        font-size: 1rem;
    }
    .wrap-footer {
        flex-direction: column;
        gap: 10px;
    }
}