@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');

* {
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

html {
    font-size: 62.5% !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
    transition: all .2s linear !important;
}

.nav,
.fas {
    cursor: pointer !important;
}

body {
    font-family: 'Poppins', sans-serif !important;
}

html::-webkit-scrollbar {
    width: 1rem !important;
}

html::-webkit-scrollbar-track {
    background: transparent !important;
}

html::-webkit-scrollbar-thumb {
    background: #000 !important;
}

body {
    padding-left: 30rem !important;
}

section {
    padding: 2rem 5% !important;
}

section:nth-child(even) {
    background: #f6f6f6 !important;
}

section .bg-primary {
    background: #43978D !important;
}

/* widths */
.w-40 {
    width: 40%;
}

.w-55 {
    width: 55%;
}

.w-60 {
    width: 60%;
}

.w-60 {
    width: 60%;
}

.w-65 {
    width: 65%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.h-120 {
    height: 120%;
}

/* margins */
.my-6 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
}

.my-7 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
}

.my-8 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}

.header {
    text-transform: capitalize;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
    background: #1a281d !important;
    width: 30rem !important;
    height: 100% !important;
    padding: 3rem !important;
}

.header .logo {
    text-decoration: none !important;
    font-size: 2.5rem !important;
    color: #fff !important;
    margin: 2% !important;
}

.header .img-thumbnail {
    max-width: 13%;
}

.header .navbar {
    padding: 5% 0 !important;
}

.header .navbar a {
    text-decoration: none;
    transition: transform 0.2s ease;
    /* Add transition for the movement */
    display: block !important;
    font-size: 2rem !important;
    margin: 1rem 0 !important;
    color: #fff !important;
}

.header .navbar a i {
    color: #43978D !important;
    padding-right: .5rem !important;
}

.header .navbar a:hover {
    color: #43978D !important;
    transform: translateX(5px) !important;
    /* Move 5 pixels to the right */

}

.header .social-medias {
    text-align: center !important;
}

.header .social-medias a {
    text-decoration: none !important;
    height: 4.5rem !important;
    width: 4.5rem !important;
    line-height: 4.5rem !important;
    font-size: 1.8rem !important;
    color: #fff !important;
    margin: 0 .1rem !important;
}

.header .social-medias a:hover {
    color: #fff !important;
    background: #43978D !important;
    border-radius: 10% !important;
}

.header .credit {
    text-align: center !important;
    color: #fff !important;
    font-size: 1.6rem !important;
    padding-top: 5% !important;
}

.header .credit span a {
    padding: 5px !important;
}

.header .credit span a:hover {
    color: #fff !important;
    background-color: black !important;
    padding: 5px !important;
}

#menu-btn {
    position: fixed !important;
    top: 1rem !important;
    right: 2rem !important;
    height: 5rem !important;
    width: 5rem !important;
    line-height: 5rem !important;
    font-size: 2.5rem !important;
    color: #253528 !important;
    cursor: pointer !important;
    text-align: center !important;
    z-index: 10000 !important;
    display: none !important;
    background: #f6f6f6;
    border-radius: 25%;
}

.introduction .logo {
    text-decoration: none !important;
    font-size: 2rem !important;
    color: #253528 !important;
    margin: 2% !important;
}


.introduction .img-thumbnail {
    max-width: 10%;
}

/* self background section */
.self-background {
    color: #1a281d;
}

.self-background .card:hover {
    background-color: #43978D;
    color: #fff;
}

/* career timeline section */
.timeline-with-icons {
    border-left: 1px solid hsl(0, 0%, 90%);
    position: relative;
    list-style: none;
}

.timeline-with-icons .timeline-item {
    position: relative;
}

.timeline-with-icons .timeline-item:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline-with-icons .timeline-icon {
    position: absolute;
    left: -4.5rem;
    background-color: #43978D;
    border-radius: 50%;
    height: 5rem;
    width: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:3;
}

.timeline-with-icons .timeline-icon-3-custom {
    position: relative;
    z-index: 3;
    height: 5.5rem;
    width: 5.5rem;
    left: -0.003rem;
}

.timeline-with-icons .timeline-icon-3-custom::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 70%;
    width: 70%; 
    background-color: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}




/* expertise section */
.progress {
    height: 1.5rem !important;
}

.progress-bar {
    background-color: rgb(67, 151, 141) !important;
}

/* other interests section */
/* .interests object {
    height: 30rem;
} */

/* #expertise-pic-1 {
    transition: data 1s ease; 
} */

/* contact section */

.contact input[type="text"]:focus,
.contact input[type="email"]:focus {
    height: 5rem !important;
    font-size: small !important;
}

.contact textarea:focus {
    padding-top: 2rem !important;
    height: 5rem !important;
    font-size: small !important;
}

.contact .fa-mobile {
    color: #43978D !important;
}

#menu-btn.fa-times {
    background: none;
    color: #f6f6f6 !important;
}

.form-control.is-valid, .was-validated .form-control:valid {
    background-image: url('../icons/check-solid.svg') !important;
}
.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: url('../icons/xmark-solid.svg') !important;
}

@media (max-width: 1200px) {
    html {
        font-size: 55% !important;
    }
}

@media (max-width: 991px) {
    body {
        padding-left: 0 !important;
    }

    #menu-btn {
        display: block !important;
    }

    .header {
        left: -110% !important;
    }

    .header.active {
        left: 0 !important;
        -webkit-box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.7) !important;
        box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.7) !important;
        width: 35rem !important;
    }
}