:root {
    --main_color: #343434;
    --bg_section: #f7f7f7;
    --p_color: #879293;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Lato", sans-serif;

    font-family: "Montserrat", sans-serif;

    font-family: "Poppins", sans-serif;
}

/* navbar */
.navbar .navbar-nav a {
    color: black;
    font-size: 14px;
    font-weight: bold;
    font-family: "Poppins", sans-serif;
}

.navbar .active {
    width: 43px;
    height: 3px;
    background-color: var(--main_color);
    margin-left: 8px;
}

.navbar .line {
    width: 0;
    height: 0;
    background-color: var(--main_color);
    margin-left: 8px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.navbar .ancor:hover>.line {
    width: 43px;
    height: 3px;
}

/* navbar */
/* start home */
.home {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url(../imgas/bg.jpg);
    background-position: center center;
    background-size: cover;
    height: 100vh;
}

.home .caption h5 {
    font-size: 70px;
    font-weight: 800;
    margin-bottom: 10px;
}

.home .caption h1 {
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    animation: write 0.5s infinite;
    -webkit-animation: write 0.5s infinite;
}

.home .caption h1::after {
    content: "";

}

/* .home .social span {
    font-size: 14px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
} */

.home .social span i {
    font-size: 20px;
    margin-right: 15px;
    color: white;
}

/* start home */

/* start about */

.about {
    margin-top: 100px;
}

.about img {
    box-shadow: -27px 39px 43px -43px var(--main_color);
}

.content h3 {
    font-family: "Montserrat", sans-serif;
}

.content .head span {
    color: var(--p_color);
    letter-spacing: 2px;
    font-size: 18px;
}

.content p {
    color: var(--p_color);
    font-size: 18px;
    font-family: "Poppins", sans-serif;
}

.content .progress {
    height: 25px;
    margin-bottom: 20px;
}

content .skills .span {
    font-family: "Poppins", sans-serif;

}

.content .progress .progress-bar {
    background-color: var(--main_color);
    color: white !important;
    font-size: 14px !important;
    font-weight: 200;
    font-family: "Poppins", sans-serif;
}

.button .one {
    background-color: var(--main_color);
    color: white;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.button .one:hover {
    background-color: white;
    color: black;
    border: 1px solid black;
}

.button .tow {
    background-color: white;
    color: black;
    border: 1px solid black;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.button .tow:hover {
    background-color: var(--main_color);
    color: white;
}

/* End About */

/* start services */
.services {
    background-color: var(--bg_section);
    margin-top: 100px;
}

.services .heading h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 40px;
}

.services .card {
    border: none;
    box-shadow: 0px 0px 10px -7px #343434;
    padding: 10px;
    text-align: center;
}

.services .card .card-body h5 {
    font-weight: 800;
    font-size: 18px;
    font-family: "Montserrat", sans-serif;
}

.services .card .card-body p {
    color: var(--p_color);
    font-family: "Poppins", sans-serif;
}

.services .card .card-body div {
    width: 80px;
    height: 80px;
    background-color: var(--bg_section);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin: 0px auto 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.services .card i {
    font-size: 40px;
    color: var(--main_color);
}

.services .card:hover>.card-body div {
    background-color: var(--main_color);
}

.services .card:hover>.card-body div i {
    color: white;
}

/* End services */

/* start Portfolio */
.Portfolio {
    margin-top: 100px;
}

.Portfolio .heading h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 40px;
}

.Portfolio .container .links .nav-item .nav-link {
    color: var(--main_color) !important;
}

.Portfolio .container .links .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: white;
    color: var(--main_color);
}

.Portfolio .container .overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.Portfolio .container .item-task:hover>.overlay {
    background-color: white;
    color: black;
    opacity: 1;
}

.Portfolio .container .img {
    margin-bottom: 20px;
}

/* End Portfolio */

/* start Testimonials */
.Testimonials {
    margin-top: 100px;
    background-color: var(--bg_section);
}

.Testimonials .heading h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 40px;
}

.Testimonials p,
span {
    color: var(--p_color);
}

/* End Testimonials */

/* start items */
.my-work .itm {
    font-family: "Montserrat", sans-serif;
    margin-top: 50px;

}

.my-work .itm p {
    color: var(--p_color);
}

/* End items */

/* start blog */
.blog {
    background-color: var(--bg_section);
    margin-top: 100px;
}

.blog .heading h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 40px;
}

/* End blog */

/* start contact */
.contact {
    margin-top: 100px;
}

.contact .h_icon {
    width: 80px;
    height: 80px;
    background-color: var(--bg_section);
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
}

.contact .h_icon:hover {
    background-color: var(--main_color);
    color: white;
}

.contact .heading h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 40px;
}

.contact .detals h5 {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 20px;
}

.contact .detals p {
    color: var(--p_color);
    font-family: "Poppins", sans-serif;
}

.contact input,
textarea {
    background-color: var(--bg_section);
}

.contact textarea {
    background-color: var(--bg_section);
}

/* End contact */