:root {
    --white: #fff;

    /**! *****DARK THEME********/
    --text-dark: #c4c4c4;

    /******HERO , Our Services,*******/
    --background-gradient-dark: linear-gradient(
        219.84deg,
        #474747 4.14%,
        #222222 44.22%
    );

    /*****About block*****/
    --card-gradient-grey: linear-gradient(
        219.84deg,
        #ffffff 4.14%,
        #cbcbcb 82.76%
    );

    /*******projects-background**********/
    --projects-background-dark: linear-gradient(
        219.84deg,
        #474747 4.14%,
        #222222 44.22%
    );

    /*****BACKGROUN OF PAGE*********/
    --basic-background-grey: #484848;

    /**! **WHITE THEME*******/
    --text-grey: #3f3f3f;

    /******HERO , Our Services,*******/
    --card-gradient-dark: linear-gradient(
        219.84deg,
        #474747 4.14%,
        #222222 44.22%
    );

    /*****About block*****/
    --background-gradient-grey: linear-gradient(
        219.84deg,
        #ffffff 4.14%,
        #cbcbcb 82.76%
    );

    /*******projects-background**********/
    --projects-background-white: linear-gradient(
        219.84deg,
        #ffffff 4.14%,
        #cbcbcb 82.76%
    );

    /*****BACKGROUND OF PAGE*********/
    --basic-background-white: #f8f8f8;

    /**! ***OVERALL STYLEs**********/

    /*******HERO BLOCK**********/
    --background-gradient-red: linear-gradient(
        97.73deg,
        #c66565 -6.96%,
        #ca2225 40.89%,
        #830002 73.64%
    );

    /*******ALL buttons ********/
    --background-gradient-red-button: linear-gradient(
        97.65deg,
        #c66565 0.33%,
        #830002 93.35%
    );

    /******ALL lines*********/
    --background-gradient-red-line: linear-gradient(
        97.73deg,
        #c66565 -6.96%,
        #ca2225 40.89%,
        #830002 73.64%
    );

    --basic-red: #df0615;
    --black: #000;

    /******ALL swiper's arrows*********/
    --arrows-swiper: linear-gradient(97.65deg, #c66565 0.33%, #830002 93.35%);

    /******Forms background*****/
    --form-background: linear-gradient(
        38.67deg,
        #474747 11.49%,
        #222222 76.87%
    );

    /**! *****Fonts and radiuses**/
    --button-radius: 5px;
}
.projects__main__section {
    min-height: 100vh;
    width: 100%;
    background: var(--background-gradient-dark);
    min-height: 1000px;
}
.projects__portfolio__paceholder {
    width: 100%;
    height: 149px;
}
.projects__portfolio__navigation {
    width: 100%;
    height: 149px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 68px 0px 68px;
}
.projects__portfolio__name {
    font-size: 64px;
    font-weight: 600;
    text-align: left;
    color: #000;
}
.projects__portfolio__nav {
    display: flex;
    justify-content: space-evenly;
}
.projects__portfolio__nav-element {
    display: flex;
    align-items: center;
    height: 22px;
    border-left: 3px solid #fff;
    padding-left: 10px;
    margin: 0px 15px;

    font-size: 24px;
    font-weight: 500;
    line-height: 28.15px;
    text-align: center;
    color: #c2c7d6;

    text-decoration: none;
}
.projects__portfolio__nav-element:hover {
    border-left: 3px solid var(--basic-red);
    color: var(--basic-red);
}
.projects__portfolio__wrapper {
    display: flex;
    justify-content: space-between;
    width: calc(456px * 3 + 7.8px * 2);
    margin: 0 auto;
    margin-top: 20px;
    flex-wrap: wrap;
}
.projects__element {
    width: 456px;
    height: 456px;

    margin-bottom: 7.8px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.projects__element__image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--text-grey);
    z-index: 100;
}
.projects__element__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.projects__element__container {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 200;
    border: 8.5px solid #d9d9d9;
    border-radius: 5px;
    opacity: 0;
}
.projects__element__container:hover{
    opacity: 1;
}
.projects__element__desc {
    position: absolute;
    height: 50%;
    width: 100%;
    background: #1e1e1e80;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.projects__element__desc-name {
    font-size: 28px;
    font-weight: 500;
    line-height: 31px;
    max-width: 324px;
    text-align: center;
    color: #fff;
    height: 60px;
}
.projects__element__desc-more {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

}
.projects__element__desc-more a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0px;
    background: var(--background-gradient-red-button);
    width: 181px;
    height: 64px;
    border-radius: var(--button-radius);
    margin-top: 37px;

    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    color: #fff;
}
.projects__portfolio__bottom-placeholder{
    height: 270px;
}
.projects__portfolio__nav-element.active {
    color: var(--basic-red);
    font-weight: bold;

    text-decoration: none;
}