/* =============== Variables ================ */
:root {
    --default-color: #007aff;
    scroll-padding: 66px;
}

/* =============== Typing Animation  ================ */
@keyframes freelancer {

    0%,
    33%,
    100% {
        width: 0%;
    }

    17%,
    23% {
        width: calc(12 * 14.36px);
    }
}

@keyframes developer {

    0%,
    33%,
    66%,
    100% {
        width: 0%;
    }

    50%,
    57% {
        width: calc(11* 14.36px);
    }
}

@keyframes designer {

    0%,
    66%,
    100% {
        width: 0%;
    }

    83%,
    90% {
        width: calc(10 * 14.36px);
    }

}

/*  ============== My utilities ============= */
.bg-smoke {
    background-color: whitesmoke;
}

.w-fit {
    width: fit-content;
}

.max-w {
    max-width: 100%;
}

/*  ============== Back-to-top Arrow Styles ============= */
.back-to-top {
    width: 40px;
    height: 40px;
    background-color: var(--default-color);
    left: 96%;
    top: 92%;
}

/*  ==============  All Section's Title Styles  ============= */
.title p::before {
    content: "";
    position: absolute;
    width: 15%;
    background-color: var(--default-color);
    height: 5px;
    bottom: -25px;
    transition: width 500ms;
    left: 50%;
    transform: translate(-50%);
}

.title h2 {
    font-size: 50px;
}

/*  ============== Header Section Styles ============= */
.header {
    background-image: linear-gradient(#00000080, #00000080), url(../images/hero-bg.jpg);
    background-attachment: fixed;   
    background-position: center;
    background-size: cover;
}

.header .hero-title {
    font-size: 3rem;
    font-weight: 500;
}

.header span {
    font-family: monospace;
}

.animation-container span:nth-of-type(1) {
    animation: freelancer 9s infinite steps(10);
}

.animation-container span:nth-of-type(2) {
    animation: developer 9s infinite steps(9);
}

.animation-container span:nth-of-type(3) {
    animation: designer 9s infinite steps(8);
}

nav ul li .nav-link::before {
    content: "";
    position: absolute;
    width: 0%;
    background-color: #fff;
    height: 1px;
    bottom: 0px;
    transition: width 500ms;
}

nav ul li .nav-link:hover::before {
    width: 60%;
}

.header span {
    font-size: 2rem;
}

/*  ============== About Section Styles ============= */
.skills .bar {
    background-color: #cde1f8;
    height: 15px;
    margin-top: 10px;
}

.bar .progress {
    width: 85%;
    height: 15px;
    background-color: var(--default-color);
}

.skills .java-bar div {
    width: 90%;
}

.title-box h2::before {
    content: "";
    position: absolute;
    width: 75%;
    background-color: var(--default-color);
    height: 3px;
    bottom: 0px;
    transition: width 500ms;
}

nav ul li .active::before {
    width: 75%;
}

/*  ============== Services Section Styles ============= */
.services .card-icon {
    background-color: #FFF;
    width: 95px;
    height: 95px;
    outline: var(--default-color) 9px solid;
    transition: outline 500ms, background-color 500ms;
}

.services-card:hover .card-icon {
    background-color: var(--default-color);
    outline-color: #007bff74;
}

.services-card:hover .card-icon i {
    color: #fff;
}

/*  ============== Counter Section Styles ============= */
.counter {
    background-image: linear-gradient(#007bffb8, #007bffcc), url(../images/post-3.jpg);
    background-attachment: fixed;
    padding: 140px 0px;
}

.counter .counter-icon {
    width: 70px;
    height: 70px;
    outline: 10px solid #ffffffc4;
}

/*  ============== Work Section Styles ============= */
.portfolio .card:hover .img img {
    transform: scale(1.35);
}

.portfolio .card .img img {
    transition: transform 1s;
}

.portfolio .card-body span {
    font-size: 13px;
}

/*  ============== Testimonial Section Styles ============= */
.testimonial {
    background-image: linear-gradient(#007bffb8, #007bffcc), url(../images/overlay-bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    padding: 140px 0px;
}

.carousel-item .img {
    width: 150px;
    height: 150px;
}

.carousel-indicators {
    bottom: -50px;
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/*  ============== Blog Section Styles ============= */
.blog-card h6 {
    transform: translate(-50%, -50%);
    left: 50%;
    font-size: 13px;
    padding: 5px 10px;
}

.card-footer img {
    width: 40px;
}

.card-footer {
    background-color: #f8f8f8;
}

/*  ============== Contact Section Styles ============= */
.contact {
    background-image: linear-gradient(#007bffb8, #007bffcc), url(../images/overlay-bg.jpg);
    background-attachment: fixed;
    padding: 100px 0px 0px;
}

.contact .title::before {
    content: "";
    position: absolute;
    width: 20%;
    background-color: var(--default-color);
    height: 4px;
    bottom: -15px;
    transition: width 500ms;
}

.contact .content p {
    font-size: 20px;
    font-weight: 100;
}

.contact textarea {
    resize: vertical;
    height: 150px;
    max-height: 500px;

}

.contact form input:focus,
textarea:focus {
    outline: none;
    box-shadow: 0px 0px 5px 0px var(--default-color);
}

.social-box ul li {
    width: 40px;
    height: 40px;
    outline: 3.5px solid var(--default-color);
    transition: outline 500ms, background-color 500ms;
    margin-top: 10px;
}

.social-box ul li:hover {
    background-color: var(--default-color);
    outline-color: #007bff74;
}

.social-box ul li:hover i {
    color: #fff;
}

.contact form .btn {
    transition: outline 300ms, background-color 300ms;
}

.contact form .btn:hover {
    background-color: #007bffe1;
    outline: 4px solid #007bff74;
}