/* import fonts from fonts.css file */
    
    @import url(./fonts.css);
    /* css variables */
    
    @import url(./partials/_variables.css);
    /* import global styling */
    
    @import url(./partials/_global.css);
    /* Start navigation */
    
    .header_area .main-menu .navbar .navbar-brand {
        padding: 0 2rem 0 5rem;
    }
    
    .header_area .main-menu .navbar {
        padding: 1rem 20rem;
    }
    
    .header_area .main-menu .nav-item .nav-link {
        font: normal 500 15px/2px var(--roboto);
        text-transform: uppercase;
        padding: 1.7rem;
        color: var(--title-color);
    }
    
    .header_area .main-menu .navbar-nav a:hover {
        background: var(--gradient-color);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    /* End navigation */
    /* Start Banner Area */
    
    .site-main .site-banner .site-title h3 {
        font-weight: 500;
    }
    
    .site-main .site-banner .site-title h3::after {
        content: " ";
        height: 2px;
        width: 18vw;
        background: black;
        display: inline-block;
        margin-left: 5%;
        transform: translateY(-10px);
    }
    
    .site-main .site-banner .site-title h1 {
        font-size: 2.5rem;
    }
    
    .site-main .site-banner .site-title h4 {
        font-size: 1.5rem;
        line-height: 2.5rem;
    }
    /* End Banner Area */
    /* Start About Area */
    
    .site-main .about-area {
        padding: 8rem 5rem;
    }
    
    .site-main .about-area .about-title h2>span {
        display: block;
        font-size: 2.5rem;
        font-weight: 600;
        /*     font: normal bold 49px/ 60px var(--roboto);
   letter-spacing: 10px;*/
    }
    
    .site-main .about-area .about-title .paragraph>p {
        padding: .4rem 0;
    }
    /* End About Area */
    /* Start Project Area */
    
    .site-main .project-area {
        padding: 4rem 0;
    }
    
    .site-main .project-area .grid .project>.title h4 {
        font: normal 700 25px/25px var(--roboto);
    }
    /* End Project Area */
    /* Start Qualification Area */
    
    .qualification-area .section_title {
        font-size: 2.5rem;
        font-weight: 600;
        /*padding-left : 50rem;*/
    }
    
    .qualification_tabs {
        display: flex;
        justify-content: space-evenly;
    }
    
    .qualification_icon {
        font-size: 1.8rem;
    }
    
    .qualification_button {
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
    }
    
    .qualification_button:hover {
        color: var(--primary-color2);
    }
    
    .qualification_button.qualification_active {
        color: var(--primary-color2);
    }
    
    .qualification_data {
        display: grid;
        grid-template-columns: 1fr max-content 1fr;
        column-gap: 1.5rem;
    }
    
    .qualification_title {
        font-size: 1rem;
        font-weight: 500;
    }
    
    .qualification_subtitle {
        display: inline-block;
        font-size: 0.8rem;
    }
    
    .qualification_calendar {
        font-size: 0.8rem;
        color: var(--text-color)
    }
    
    .qualification_rounder {
        display: inline-block;
        width: 13px;
        height: 13px;
        background-color: var(--primary-color2);
        border-radius: 50%;
    }
    
    .qualification_line {
        display: block;
        width: 1px;
        height: 100%;
        background-color: var(--primary-color2);
        transform: translate(6px, -7px);
    }
    /* End Qualification Area */
    /* Start Skills Area */
    
    .skills-area .section_title {
        font-size: 2.5rem;
        font-weight: 600;
        /*padding-left : 30rem;*/
    }
    
    .skills-area .section_subtitle {
        /*padding-left : 30rem;*/
        display: inline-block;
    }
    /* End Skills Area */
    /* Start PF Addons */
    
    .logo_site {
        max-height: 60px;
    }
    
    .photo_profil {
        max-width: 300px;
    }
    
    .img-hover-zoom {
        overflow: hidden;
    }
    
    .img-hover-zoom img {
        transition: transform .5s ease;
    }
    
    .img-hover-zoom:hover img {
        transform: scale(1.1);
    }
    
    h2.section_title,
    .project-area h2.section_title {
        font-size: 2.5rem !important;
        font-weight: 600;
        /*padding-left : 50rem;*/
    }
    
    .badge-primary {
        color: #fff;
        background: var(--gradient-color);
        border-color: #0d6efd;
        border-radius: 10px;
        padding: 2px 8px 4px 8px;
    }
    /* Start Timeline */
    
    .main-timeline {
        position: relative;
        transition: all 0.4s ease 0s;
    }
    
    .main-timeline:before {
        content: "";
        width: 2px;
        height: 100%;
        background: #bfbfbf;
        position: absolute;
        top: 0;
        left: 50%;
    }
    
    .main-timeline .timeline {
        position: relative;
    }
    
    .main-timeline .timeline:before,
    .main-timeline .timeline:after {
        content: "";
        display: block;
        width: 100%;
        clear: both;
    }
    
    .main-timeline .timeline-icon {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background-color: var(--primary-color2);
        position: absolute;
        top: 0;
        left: 3px;
        right: 0;
        margin: 0 auto;
        overflow: hidden;
    }
    
    .main-timeline .timeline-content {
        width: 47%;
        padding: 0px 0px 20px 0px;
        margin-bottom: 10px;
        /*border-radius: 5px;*/
        text-align: right;
        /*-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);*/
        transition: all 0.3s ease 0s;
    }
    
    .main-timeline .date {
        display: inline-block;
        font-size: 16px;
        font-weight: 300;
        color: #fff;
        padding: 12px 33px;
        background: #0a90d7;
        border-radius: 30px;
    }
    
    .main-timeline .title {
        font-size: 24px;
        font-weight: 500;
        color: #5c5151;
        margin-top: 30px;
    }
    
    .main-timeline .description {
        font-size: 14px;
        color: #606060;
        line-height: 2;
    }
    
    .main-timeline .timeline-content.right {
        float: right;
        text-align: left;
    }
    /* End Timeline */
    /* Start Footer */
    
    .pr-2 {
        padding-right: 20px;
    }
    
    .back-to-top {
        position: fixed;
        bottom: 25px;
        right: 25px;
        display: none;
        background: var(--gradient-color);
        color: #fff;
        z-index: 10;
    }
    
    .progressbar {
        background: var(--gradient-color);
    }
    /* End Footer */
    /* Start Offset ancres avec la navbar fixe */
    
    section,
    footer {
        position: relative;
    }
    
    a.anchor {
        display: block;
        position: absolute;
        top: 0px;
        visibility: hidden;
    }
    
    a.anchor.first {
        display: block;
        position: absolute;
        top: -92px;
        visibility: hidden;
    }
    /* End Offset ancres avec la navbar fixe */
    /* progressbar*/
    
    .progress {
        display: flex;
        height: 7px;
        overflow: hidden;
        font-size: 0.75rem;
        background-color: #e9ecef;
        border-radius: 10px;
    }
    
    .progress-bar {
        background: var(--gradient-color);
    }
    
    .skills_title {
        padding-top: 1rem;
        ;
    }
    
    h3 .badge {
        font-size: 10px;
        margin-top: 5px;
        vertical-align: top;
    }
    
    h3 .badge:hover {
        cursor: pointer;
    }
    
    .skills_data .skills_name {
        margin-bottom: 0px;
    }
    
    .skills_subtitle {
        font-style: italic;
        font-size: 0.75rem;
        line-height: 0.75rem;
    }
    
    .accordion-button {
        background: var(--gradient-color);
        border-radius: 15px;
        color: #fff !important;
        font-weight: bold;
    }
    
    .accordion-button i {
        margin-right: 10px;
    }
    /* */
    /* End PF Addons */