nav.navbar {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;

    .container-fluid {
        width: 90%;

        .navbar-collapse ul {
            .nav-item {
                a {
                    position: relative;

                    &:hover::before {
                        width: 80%;
                    }

                    &::before {
                        content: "";
                        width: 0;
                        height: 5%;
                        background-color: white;
                        position: absolute;
                        bottom: 0;
                        transition: all 0.3s ease;
                    }
                }

                a.active::before {
                    content: "";
                    width: 80%;
                    height: 5%;
                    background-color: white;
                    position: absolute;
                    bottom: 0;
                }
            }
        }
    }
}

.home {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images_ass6/ass6\ images01.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;


    .caption {
        text-align: center;

        h1 {
            font-size: 4.5rem;
        }
    }
}

.home .caption .typewriter {
    display: inline-block;
}

.home .caption .typewriter h2 {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    border-right: 2px solid white;
    font-family: monospace;
    animation:
        typing 3s steps(10, end) alternate infinite,
        blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: white;
    }
}

.about {
    background-color: #F5F5F5;

    .container {
        .inner {
            box-shadow: 1px 1px 10px lightgrey, -1px -1px 10px lightgrey;

            .personal-data {
                width: 50%;

                .skills {
                    .level-html {
                        height: 0.7rem;
                        background-image: linear-gradient(to right, #0078FF 0% 85%, #CDE0F8 85%);
                    }

                    .level-css {
                        height: 0.7rem;
                        background-image: linear-gradient(to right, #0078FF 0% 75%, #CDE0F8 75%);
                    }

                    .level-php {
                        height: 0.7rem;
                        background-image: linear-gradient(to right, #0078FF 0% 50%, #CDE0F8 50%);
                    }

                    .level-javascript {
                        height: 0.7rem;
                        background-image: linear-gradient(to right, #0078FF 0% 90%, #CDE0F8 90%);
                    }

                }
            }

            .about-me {
                width: 50%;

                h3::before {
                    content: "";
                    width: 100px;
                    height: 0.3rem;
                    background-color: #0078FF;
                    position: absolute;
                    bottom: -30%;
                }
            }
        }
    }
}

.services {
    background-color: #F5F5F5;

    .container {
        .caption {
            p.mb-5 {
                position: relative;

                &::before {
                    content: '';
                    width: 50px;
                    height: 5px;
                    background-color: #0078FF;
                    position: absolute;
                    bottom: -90%;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }

        .items {
            .item {
                width: calc(100%/3);

                .inner {
                    box-shadow: 1px 1px 10px lightgrey, -1px -1px 10px lightgrey;

                    .icon {
                        i {
                            padding: 20px;
                            border: 10px solid #0078FF;
                            border-radius: 50%;
                            transition: all 0.3s ease;
                        }
                    }

                    &:hover .icon i {
                        background-color: rgb(0, 120, 255);
                        border-color: #CDE0F8;
                    }
                }
            }
        }
    }
}

.achievements {
    background-image: linear-gradient(rgb(0, 120, 255, 0.5), rgb(0, 120, 255, 0.5)), url(../images_ass6/ass6\ images03.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;

    .container {
        .row {
            .col-sm-12 {
                .item {
                    .icon {
                        i {
                            padding: 20px;
                            border: 10px solid rgb(255, 255, 255, 0.75);
                            border-radius: 50%;
                        }
                    }
                }
            }
        }
    }
}

.portfolio {
    background-color: #F5F5F5;

    .container {
        .caption {
            p.mb-5 {
                position: relative;

                &::before {
                    content: '';
                    width: 50px;
                    height: 5px;
                    background-color: #0078FF;
                    position: absolute;
                    bottom: -90%;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }

        .row {
            .col-sm-12 {
                .card {
                    border: 0 solid transparent;
                    box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);

                    .card-image {
                        overflow: hidden;
                    }

                    img {
                        transition: all 0.5s ease;
                    }

                    &:hover .card-image img {
                        transform: scale(1.15);
                    }


                    .card-body {
                        display: flex;
                        flex-flow: row nowrap;
                        flex: 1 1 100%;
                        padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
                        color: var(--bs-card-color);

                        .icon {
                            i {
                                font-size: 2.5rem !important;
                            }
                        }
                    }
                }
            }
        }
    }
}

.feedback {
    background-image: linear-gradient(rgb(0, 120, 255, 0.5), rgb(0, 120, 255, 0.5)), url(../images_ass6/ass6\ images10.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    padding-block: 12.5rem;
}

.blog {
    .container {
        .caption {
            p.mb-5 {
                position: relative;

                &::before {
                    content: '';
                    width: 50px;
                    height: 5px;
                    background-color: #0078FF;
                    position: absolute;
                    bottom: -90%;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }

        .row {
            .col-sm-12 {
                .card {
                    box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);

                    .list-group {
                        .list-group-item.image-for-card {
                            &::before {
                                content: "Travel";
                                background-color: #0078FF;
                                padding: 5px 10px;
                                border-radius: 5px;
                                position: absolute;
                                bottom: 0;
                                left: 50%;
                                z-index: 2;
                                color: white;
                                transform: translateX(-50%) translateY(50%);
                            }
                        }
                    }
                }
            }
        }
    }
}

.user-message {
    background-image: linear-gradient(rgb(0, 120, 255, 0.5), rgb(0, 120, 255, 0.5)), url(../images_ass6/ass6\ images10.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;

    .container {
        .row {
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);

            .col-sm-12 {
                .inner {
                    h3::before {
                        content: "";
                        width: 100px;
                        height: 0.3rem;
                        background-color: #0078FF;
                        position: absolute;
                        bottom: -30%;
                    }

                    form {
                        .form-btn {
                            .btn-bill {
                                --bs-btn-border-radius: 20px;
                                --bs-btn-padding-x: 1.25rem;
                                --bs-btn-padding-y: 0.5rem;
                            }
                        }
                    }

                    .icons {
                        a {
                            color: black;
                            transition: all 0.3s ease;

                            i {
                                border: 4px solid #0078FF;
                                border-radius: 50%;
                                transition: all 0.3s ease;
                            }

                            &:hover i {
                                background-color: #0078FF;
                                border-color: #CDE0F8;
                            }

                            &:hover {
                                color: white;
                            }
                        }
                    }
                }
            }
        }
    }

}

.footer {
    background-image: linear-gradient(to bottom, rgba(44, 44, 44, 0.15) 3%, rgba(0, 0, 0, 0) 20%);
}