/* Start Banner Section */

.banner {
    background-image: url(../../img/testimonial/banner-bg.webp);
    background-size: cover;
}

.banner .banner-container .breadcrumb li a {
    color: var(--black) !important;
}

.banner .breadcrumb li:first-child a {
    width: 18px;
    height: 18px;
}

/* End Banner Section */

/* Start Popular Section */

.popular .popular-container {
    background-image: url(../../img/location/dot.svg);
    background-repeat: no-repeat;
    background-position: bottom 4px left 9px;
}

.popular .location-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 15px;
    cursor: pointer;
}

.popular .location-item:nth-child(1) {
    margin-top: 0;

}

.popular .location-item.active {
    background-color: var(--primaryColor);
    border: none;
}

/* .popular .content-item{
    display: none;
} */

.popular .location-item.active::after {
    background-color: var(--greenColor);
}
.popular .popular-list {
    counter-reset: location-counter;
}
.popular .location-item::after {
    counter-increment: location-counter;
    content: counter(location-counter);
    width: 30px;
    height: 30px;
    background-color: var(--white);
    border-radius: 50px;
    position: absolute;
    right: 17px;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    font-weight: 500;
    align-items: center;
}
.popular .popular-info {
    background-color: rgba(255, 255, 255, 0.06);
    margin-top: 2rem;
}

.popular .popular-info .content-item p span,
.popular .popular-info .content-item a span {
    min-width: 16px;
    height: 15px;
}


.popular .popular-info .content-item h4 {
    font-size: 22px;
}

.popular .map {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.popular .dot {
    width: 8px;
    height: 8px;
    background-image: linear-gradient(90deg, var(--primaryColor) 0%, var(--greenColor) 100%);
    transform: translate(-50%, -50%);
}

/* End Popular Section */

/* Start Location Section */
.location .location-list b {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--white), var(--white)) padding-box,
        linear-gradient(90deg, var(--primaryColor) 0%, var(--greenColor) 100%) border-box;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.141) inset;
    padding: 1.5rem 2.5rem 1.5rem 5rem;
    transition: 0.7s all;
}

.location .location-list b::before {
    content: '';
    background-image: url(../../img/location/locate.svg);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    background-size: 16px 27px;
    height: 50px;
    width: 50px;
    border: 1px solid var(--darkGreyColor);
    background-color: var(--white);
    position: absolute;
    left: 15px;
    z-index: 1;
}

.location .location-list b::after {
    content: '';
    height: 100%;
    width: 40px;
    background-color: var(--lightGreyColor);
    position: absolute;
    border-radius: 10px 0 0 10px;
    left: 0;
    top: 0;
    transition: 0.7s all;
}

.location .location-list b:hover::before {
    background-image: url(../../img/location/locate-dark.svg);
}

.location .location-list b:hover::after {
    background-color: var(--darkBlue);
    left: -1px;
}

.location .location-list b {
    display: none;
}

.location .location-list b:nth-child(-n+12) {
    display: flex;
}

.location-list.show-all b {
    display: flex;
}

.location .location-list b:hover {
    border: 1px solid var(--darkBlue);
}
.location{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* End Location Section */

/* Start Fact Section */
.fact .fact-list .fact-info strong {
    font-size: 22px;
}

.fact .fact-list .fact-item {
    width: 45%;
}

/* End Fact Section */

@media screen and (min-width: 768px) {
    /* Start Location Section */

    .location .location-list b {
        margin-top: 2rem !important;
        margin-right: 2rem;
    }

    .location .location-list b:nth-of-type(2n) {
        margin-right: 0;
    }

    .location .location-list b:last-child {
        margin-right: 0 !important;
    }

    .location .location-list b {
        width: 44%;
    }

    /* End Location Section */

    /* Start Fact Section */
    .fact .fact-list .fact-item {
        width: 32%;
    }

    /* End Fact Section */

}

@media screen and (min-width: 1024px) {

    /* Start Banner Section */
    .banner .banner-container h1::after {
        content: "";
        background-image: url(../../img/testimonial/arrow.webp);
        background-size: 100% 100%;
        min-width: 85px;
        height: 82px;
        margin-left: 3rem;
    }

    /* End Banner Section */

    /* Start Popular Section */
    .popular .popular-container {
        padding: 3rem 4rem !important;
    }

    .popular .popular-container::before {
        content: "";
        width: 20px;
        height: 20px;
        position: absolute;
        box-shadow: 0px 0px 0px 12px rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        right: 23px;
        animation: moveUpDown 8s ease-in-out infinite;
    }

    /* End Popular Section */

    /* Start Location Section */
    .location .location-list b:nth-of-type(2n) {
        margin-right: 2rem;
    }

    .location .location-list b:nth-of-type(3n) {
        margin-right: 0;
    }

    .location .location-list b {
        width: 30%;
    }

    /* End Location Section */

    /* Start Fact Section */

    .fact .heading {
        margin-bottom: 2.5rem;
    }

    .fact .fact-container {
        width: 70%;
        z-index: 1;
    }

    .fact .fact-container::before {
        content: "";
        background-image: url(../../img/location/location.webp);
        background-size: 100% 100%;
        width: 220px;
        height: 207px;
        position: absolute;
        right: -43%;
        bottom: 0;
    }

    .fact .fact-container::after {
        content: "";
        background-image: radial-gradient(65.74% 65.74% at 50% 16.67%,
                rgba(255, 255, 255, 0.7) 0%,
                rgba(239, 236, 236, 0.7) 100%);
        width: 90px;
        height: 90px;
        position: absolute;
        border-radius: 100%;
        right: -16.4%;
        top: 49px;
        z-index: -1;
        animation: pulse 2s infinite ease-in-out;
    }

    /* End Fact Section */

}

@media screen and (min-width: 1366px) {

    /* Start Banner Section */
    .banner {
        background-size: 100% 100%;
    }

    .banner .banner-container h1 {
        font-size: 50px;
    }

    /* End Banner Section */

    /* Start Popular Section */

    .popular .heading {
        margin-bottom: 2.5rem;
    }

    .popular .map {
        border-right: 1px solid rgba(255, 255, 255, 0.3);
        border-bottom: none;
    }

    .popular .popular-info .popular-content {
        width: 262px;
    }

    .popular .list-group {
        width: 233px;
    }

    .popular .popular-info {
        width: 73%;
        padding: 1.5rem 2.5rem !important;
    }

    /* End Popular Section */

    /* Start Location Section */
    .location .location-list b {
        width: 23%;
    }

    .location .location-list b:nth-of-type(3n) {
        margin-right: 2rem;
    }

    .location .location-list b:nth-of-type(4n) {
        margin-right: 0;
    }

    /* End Location Section */

    /* Start Fact Section */

    .fact .fact-container::before {
        width: 245px;
        height: 230px;
    }

    .fact .fact-container::after {
        right: -19%;
        top: 68px;
    }

    .fact .fact-list .fact-info strong {
        font-size: 30px;
    }

    .fact .fact-list .fact-item p {
        font-size: 18px !important;
    }

    /* End Fact Section */

}