/* ---------------------header-------------------- */
/* -------------swiper----------------- */
.box{
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--bs-gray-300);
    flex: 0 0 2.5rem;
}

.box::before{
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 10.6rem;
    background-color: var(--bs-gray-300);
}

.aboutThumbs .swiper-slide-thumb-active .box , .aboutThumbs .swiper-slide-thumb-active .box::before{
    background-color: var(--bs-black);
}

.aboutThumbs .swiper-slide,
.aboutThumbs .swiper-slide h2,
.aboutThumbs .swiper-slide p,
.aboutThumbs .swiper-slide .box::before,
.aboutThumbs .swiper-slide .box{
    transition:
        color .5s ease,
        background-color .5s,
        opacity .5s ease;
}


.aboutThumbs .swiper-slide h2{
    color: var(--bs-gray-200);
}

.aboutThumbs .swiper-slide-thumb-active h2{ color: var(--bs-black); }

.aboutThumbs .swiper-slide p{
    color: var(--bs-gray-100);
}

.aboutThumbs .swiper-slide-thumb-active p{
    color: var(--bs-gray-400);
}

.aboutThumbs .swiper-slide:first-child .box::before{
    display: none;
}

.aboutThumbs {
    max-height: 60rem;
}

.aboutThumbs .swiper-slide{
    height: 11.1rem !important;
}

.text-side{
    flex:1;
}

.aboutSlider img{
    width:100%;
    height:60rem;
    object-fit:cover;
}

/* ------------------------main-------------------- */
.line-yellow {
    background-color: var(--bs-yellow-100);
    width: 7.8rem;
    height: 1px;
    margin: 0 auto 2rem auto;
}