.navbar {
    transition: top 0.5s;
}
ul .active{
    letter-spacing: 1px;
    font-weight: 700;
}
/* about bar */
.about_bar ul li.active a .icon svg {
    transform: translateY(-24px) rotate(360deg);
    width: 38px;
    height: 38px;
    transition: all 0.7s;
}

.about_bar ul li a .text {
    transform: translateY(15px);
}

.about_bar ul li.active a .text {
    transform: translateY(-2px);
    font-weight: 700;
    color: #ffffff !important;
    opacity: 1;
}
.about_bar ul li:not(.active):hover a .icon svg {
    transform: translateY(-4px);
    width: 25px;
    height: 25px;
    transition: all 0.8s;
}
.about_bar ul li:not(.active):hover a .text {
    transform: translateY(10px);
    font-weight: 700;
    opacity: 1;
}

.indicator {
    position: absolute;
    top: -30%;
    left: 11.3%;
    width: 82px;
    height: 85px;
    background: #1F387E;
    border-radius: 50%;
    z-index: 1;
    transition: 0.5s;
}

.about_bar ul li:nth-child(1).active ~ .indicator {
    transform: translateX(calc(120px * 0));
}
.about_bar ul li:nth-child(2).active ~ .indicator {
    transform: translateX(calc(120px * 1));
}
.about_bar ul li:nth-child(3).active ~ .indicator {
    transform: translateX(calc(120px * 2));
}
.about_bar ul li:nth-child(4).active ~ .indicator {
    transform: translateX(calc(120px * 3));
}
.about_bar ul li:nth-child(5).active ~ .indicator {
    transform: translateX(calc(120px * 4));
}

// gallery
.gallery_mask{
    -webkit-mask-image: linear-gradient(0deg, transparent , white 20%, white 80%, transparent);
    mask-image: linear-gradient(180deg, transparent , white 20%, white 80%, transparent );
}
.animate-scroll {
    animation: scroll 30s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-70%);
    }
}

@media screen and (max-width: 1379px) and (min-width: 1279px) {
    .about-title::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 440px;
        height: 2px;
        background-color: #1F387E;
    }
    .about_bar ul li.active a .icon svg {
        transform: translateY(-24px) rotate(360deg);
        width: 38px;
        height: 38px;
        color: #67deff !important;
        transition: all 0.5s;
    }
    .about_bar ul li.active a .text {
        transform: translateY(-2px);
        font-weight: 700;
        opacity: 1;
        color: #1f387e;
    }
    .about_bar ul li:not(.active):hover a .text {
        transform: translateY(0px);
        font-weight: 700;
        color: #1f387e !important;
        opacity: 1;
    }
}

@media screen and (max-width: 1279px) and (min-width: 1024px) {
    .about-title::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 440px;
        height: 2px;
        background-color: #1F387E;
    }
    .about_bar ul li.active a .icon svg {
        transform: translateY(-24px) rotate(360deg);
        width: 38px;
        height: 38px;
        color: #67deff !important;
        transition: all 0.5s;
    }
    .about_bar ul li.active a .text {
        transform: translateY(-2px);
        font-weight: 700;
        opacity: 1;
        color: #1f387e;
    }
    .about_bar ul li:not(.active):hover a .text {
        transform: translateY(0px);
        font-weight: 700;
        color: #1f387e !important;
        opacity: 1;
    }
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
    .about-title::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 440px;
        height: 2px;
        background-color: #1F387E;
    }
    .about_bar ul li.active a .icon svg {
        transform: translateY(-24px) rotate(360deg);
        width: 38px;
        height: 38px;
        transition: all 0.5s;
    }
    .about_bar ul li.active a .text {
        transform: translateY(-2px);
        font-weight: 700;
        opacity: 1;
    }
    .about_bar ul li:not(.active):hover a .text {
        transform: translateY(0px);
        font-weight: 700;
        color: #1f387e !important;
        opacity: 1;
    }
}

@media screen and (max-width: 767px) and (min-width: 640px) {
    .about-title::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 440px;
        height: 2px;
        background-color: #1F387E;
    }

    .about_bar ul li.active a .icon svg {
        transform: translateY(-26px) rotate(360deg);
        width: 30px;
        height: 30px;
        transition: all 0.5s;
    }

    .about_bar ul li a .text {
        transform: translateY(15px);
    }

    .about_bar ul li.active a .text {
        transform: translateY(-2px);
        font-weight: 700;
        opacity: 1;
    }

    .about_bar ul li:not(.active):hover a .text {
        transform: translateY(0px);
        font-weight: 700;
        color: #1f387e !important;
        opacity: 1;
    }

    .indicator {
        position: absolute;
        top: -30%;
        left: 2%;
        width: 82px;
        height: 85px;
        background: #1F387E;
        border-radius: 50%;
        z-index: 1;
        transition: 0.5s;
    }

    .about_bar ul li:nth-child(1).active ~ .indicator {
        transform: translateX(calc(100px * 0));
    }
    .about_bar ul li:nth-child(2).active ~ .indicator {
        transform: translateX(calc(100px * 1));
    }
    .about_bar ul li:nth-child(3).active ~ .indicator {
        transform: translateX(calc(100px * 2));
    }
    .about_bar ul li:nth-child(4).active ~ .indicator {
        transform: translateX(calc(100px * 3));
    }
    .about_bar ul li:nth-child(5).active ~ .indicator {
        transform: translateX(calc(100px * 4));
    }
    /* History */
    .firm_title {
        position: relative;
    }
}

@media screen and (max-width: 639px) {
    .about_bar ul li.active a .icon svg {
        transform: translateY(-24px) rotate(360deg);
        width: 30px;
        height: 30px;
        transition: all 0.5s;
    }

    .about_bar ul li a .text {
        transform: translateY(15px);
    }

    .about_bar ul li.active a .text {
        transform: translateY(-2px);
        font-weight: 700;
        opacity: 1;
    }

    .about_bar ul li:not(.active):hover a .text {
        transform: translateY(13px);
        font-weight: 700;
        color: #1f387e !important;
        opacity: 1;
    }

    .indicator {
        position: absolute;
        top: -25%;
        left: 3%;
        width: 62px;
        height: 65px;
        background: #1F387E;
        border-radius: 50%;
        z-index: 1;
        transition: 0.5s;
    }

    .about_bar ul li:nth-child(1).active ~ .indicator {
        transform: translateX(calc(70px * 0));
    }
    .about_bar ul li:nth-child(2).active ~ .indicator {
        transform: translateX(calc(70px * 1));
    }
    .about_bar ul li:nth-child(3).active ~ .indicator {
        transform: translateX(calc(70px * 2));
    }
    .about_bar ul li:nth-child(4).active ~ .indicator {
        transform: translateX(calc(70px * 3));
    }
    .about_bar ul li:nth-child(5).active ~ .indicator {
        transform: translateX(calc(70px * 4));
    }
}