@use '../utils' as *;
.project-area {
    @media #{$md} {
        .section-title__column-two {
            display: block;
            align-items: inherit;
            justify-content: inherit;
        }
        .section-title__two-title {
            margin-bottom: 70px;
        }
    }
    @media #{$sm} {
        .section-title__column-two {
            display: block;
            align-items: inherit;
            justify-content: inherit;
        }
        .section-title__two-title {
            margin-bottom: 70px;
        }
    }
    @media #{$xs} {
        .section-title__column-two {
            display: block;
            align-items: inherit;
            justify-content: inherit;
        }
        .section-title__two-title {
            margin-bottom: 70px;
        }
    }
}

.portfolio-active .col-xl-4:nth-child(1) .portfolio__single,
.portfolio-active .col-xl-4:nth-child(3) .portfolio__single,
.portfolio-active .col-xl-4:nth-child(6) .portfolio__single {
    height: 240px;
}

.portfolio-active .col-xl-4:nth-child(2) .portfolio__single,
.portfolio-active .col-xl-4:nth-child(4) .portfolio__single,
.portfolio-active .col-xl-4:nth-child(5) .portfolio__single {
    height: 420px;
}

.portfolio__single {
    position: relative;
}

.portfolio__single-content {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 0px;
    height: 80px;
    padding: 22px 30px;
    border-radius: 10px;
    background: #FFF;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0px 10px 80px 0px rgba(11, 23, 40, 0.24);
    @include transition(.3s);
    h3 {
        color: #0B1728;
        font-family: $montserrat;
        font-size: 18px;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 0px;
        &:hover a {
            color: $theme-secondary;
        }
    }
    span {
        display: block;
        color: #0B1728;
        font-family: $montserrat;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-bottom: 5px;
        &:before {
            content: "";
            display: inline-block;
            background-color: $theme-secondary;
            width: 18px;
            height: 5px;
            border-radius: 10px;
            margin-bottom: 2px;
            margin-right: 6px;
        }
    }
}

.portfolio__single:hover .portfolio__single-content {
    bottom: 25px;
    visibility: visible;
    opacity: 1;
    @include transition(.3s);
}

.portfolio-menu {
    button {
        position: relative;
        color: #0B1728;
        font-family: $montserrat;
        font-size: 14px;
        font-weight: 600;
        line-height: normal;
        border: none;
        background-color: transparent;
        &.active {
            color: $theme-secondary;
        }
    }
}

.portfolio-menu button.active .short-message span {
    border-radius: 2px;
    color: #fff;
    background: $theme-secondary;
    padding: 5px 7px;
    box-shadow: 0px 3px 3px 0px rgba(18, 104, 235, 0.24);
    visibility: visible;
    opacity: 1;
    display: block;
}

.portfolio-menu button.active .short-message span:after {
    content: "";
    display: block;
    position: absolute;
    left: 4px;
    bottom: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 5px 0 5px;
    border-color: #4a5ee1 transparent transparent transparent;
}

.portfolio-menu button.active .short-message {
    position: absolute;
    top: -50px;
    @media #{$xxl} {
        top: -50px;
    }
    @media #{$xl} {
        top: -50px;
    }
    @media #{$lg} {
        top: -50px;
    }
    @media #{$md} {
        top: -50px;
    }
}

.short-message span {
    border-radius: 2px;
    color: #fff;
    background: $theme-secondary;
    padding: 5px 7px;
    box-shadow: 0px 3px 3px 0px rgba(18, 104, 235, 0.24);
    display: none;
    visibility: hidden;
    opacity: 0;
}