:root {
    --cv-primary-color: #455b7a;
    /*--cv-secondary-color: #7a4575;*/
    --cv-secondary-color: #45737a;
}

@font-face {
    font-family: Vazirmatn;
    src: url('/Assets/font/vazirmatn/Vazirmatn-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Vazirmatn;
    src: url('/Assets/font/vazirmatn/Vazirmatn-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Vazirmatn;
    src: url('/Assets/font/vazirmatn/Vazirmatn-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Vazirmatn;
    src: url('/Assets/font/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Vazirmatn;
    src: url('/Assets/font/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Vazirmatn;
    src: url('/Assets/font/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Vazirmatn;
    src: url('/Assets/font/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Vazirmatn;
    src: url('/Assets/font/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Vazirmatn;
    src: url('/Assets/font/vazirmatn/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap
}



body {
    font-family: Vazirmatn;
    background: #fafafa;
    overflow-x: hidden;
    background-image: url('/Assets/template/FaraCvTheme/img/bg.png');
    font-size: 0.935rem;
}

.profileCard {
    border: 1px solid #dbdbdb;
    border-radius: 0.5em;
}

    .profileCard .profileBanner {
        border-top-right-radius: 0.5em;
        border-top-left-radius: 0.5em;
        min-height: 8em;
        width: 100%;
        background-color: var(--cv-primary-color);
        display: flex;
    }

.profilePic {
    max-width: 100px;
    max-height: 100px;
    margin: auto;
    position: relative;
    top: -4em;
    right: 33%;
    box-shadow: 0px 0px 0px 4px #d8d8d8;
    background-color: #f9f9f9;
}

.profileCard .profileInfo {
    margin-top: -3em;
    text-align: center;
    padding: 0.5rem;
    border-bottom-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
}

    .profileCard .profileInfo ul {
        font-size: 0.9rem;
        list-style-type: none;
        padding: 0;
        text-align: right;
        margin: 8px 35px 8px 0px;
    }

        .profileCard .profileInfo ul li {
            border-right: solid 2px #eee;
            padding: 0 20px 11px 0;
            color: #787878;
        }

            .profileCard .profileInfo ul li:before {
                content: "";
                border: solid 2px;
                width: 8px;
                height: 8px;
                border-radius: 50px;
                -moz-border-radius: 50px;
                -webkit-border-radius: 50px;
                font-size: 8px;
                margin-right: -25px;
                margin-top: 2px;
                font-weight: 400;
                background: #fff;
                display: block;
                position: absolute;
                border-color: var(--cv-primary-color);
            }

            .profileCard .profileInfo ul li:first-child {
                padding-top: 1em
            }

            .profileCard .profileInfo ul li:last-child {
                border: 0;
                margin-right: 2px;
            }






nav {
    border-radius: 0.5rem;
    border-right: 10px solid var(--cv-primary-color);
}

footer {
    background: var(--bs-light);
    min-height: 70px;
    color: var(--bs-secondary);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    line-height: 72px;
}

    footer .copyright {
        color: #9c9c9c;
        font-size: 12px;
        text-align: right;
    }

        footer .copyright a {
            text-decoration: none;
        }


.navbar-brand {
    font-weight: 800;
    color: var(--cv-secondary-color);
}


.profile-socials ul {
    display: flex;
    list-style-type: none;
    justify-content: center;
    margin: 0;
    padding: 1rem 0 0;
    border-top: 1px solid #eaeaea;
}

    .profile-socials ul li {
        padding: 0 0.5rem 0.5rem;
    }

.profile-socials a {
    color: #777777;
    font-size: 1.1rem;
}

.home-service {
    cursor: pointer;
    background-color: var(--cv-primary-color);
    color: var(--bs-light);
}

    .home-service:hover {
        background-color: var(--cv-secondary-color);
        color: var(--bs-light);
    }

.service-icon {
    padding: 1rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.progress {
    --bs-progress-height: 0.5rem;
    --bs-progress-bar-bg: var(--cv-primary-color);
}

.service-box {
    padding: 1rem 0.5rem;
    margin: 1rem 0;
    min-height: 10rem;
    cursor: pointer;
    transition: all 0.5s linear;
    font-size: 0.8rem;
    display: flex;
    position: relative;
}


.service-box-front {
    margin: auto;
    display: block;
    text-align: center;

}

.service-box-back {
    display: none;
}
.service-box:hover {
    background-color: var(--cv-primary-color);
}
    .service-box:hover .service-box-back {
        display: block;
        color: var(--bs-light);
    }

.service-box:hover .service-box-front {
    display: none;
}

.service-box-icon {
    font-size: 2rem;
    color: var(--bs-secondary);
}
.service-box-title {
    font-weight: bold;
}
.service-box-show-more {
    position: absolute;
    bottom: 0.5rem;
    left: 0.8rem;
    font-size: 0.635rem;
}

.navbar {
    --bs-navbar-nav-link-padding-x: 0.5rem;
}

.nav-link {
    font-size: 0.835rem;
    font-weight: 600;
    margin: auto 0.235rem;
}

.service-column {
    display: none;
}

.service-column-show {
    display: block;
}

.service-cat-btn {
    font-weight: 600;
    margin-right: 5px;
    padding: 10px 20px;
    font-size: 12px;
    display: inline-block;
    border: 1px solid #e6e6e6;
    cursor: pointer;
    text-align: center;
}

    .service-cat-btn:hover {
        background-color: var(--cv-secondary-color);
        color: var(--bs-light);
    }

.album-col-overlay {
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    display: none;
}

.album-col:hover .album-col-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
}

.form-control {
    font-size: 0.8rem;
}