/* Hero Section */

.vqh-hero-section{
    padding: 80px 0;
}

.vqh-hero-section .hero-subtitle{
    font-family: 'Montserrat', sans-serif; 
    font-size: 20px; 
    line-height: 30px; 
    font-weight: 700; 
    color: #171A1FFF;
}

.vqh-hero-section .hero-title {
    font-size: clamp(36px, 5vw, 48px);
    font-weight: 700;
    color: var(--main-color);
    margin: 0 0 20px;
    line-height: 1.3;
}

.vqh-hero-section .hero-desc {
    font-size: 18px; 
    line-height: 28px;
    font-weight: 400; 
    color: #424856FF;
}

.btn-main {
    background: var(--main-color) !important;
    color: #fff !important;
    border: none
}

.vqh-hero-section .hero-media{
    text-align: center;
}

.vqh-hero-section .hero-media img{
    border-radius: 16px;
    max-width: 100%;
    width: 620px;
    object-fit: contain;
    /* aspect-ratio: 3/2; */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.vqh-hero-section .hero-media iframe{
    border-radius: 16px; 
}

.vqh-stats-section {
    background: #BA3737FF;
    padding: 20px 0;
    color: #fff
}

.vqh-stats-section .stat-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 15px;
    font-size: 18px;
    font-weight: 700;
}

.vqh-stats-section .stat-text{
    font-size: 18px; 
    font-weight: 500; 
    color: #FFFFFFFF;
    margin-bottom: 10px;
}

/* Projects Section */

.vqh-projects-section {
    padding: 60px 0;
    background: var(--light);
    background: #BA373712;
}

.section-title {
    text-align: center;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 35px;
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.2;
}

.project-filter {
    white-space: nowrap;
    overflow: auto;
    padding: 14px 0;
}

.project-filter a.nav-link, .project-filter a.filter-link {
    border: 1px solid #DE3B40FF;
    color: var(--main-color);
    background: #fff;
    padding: 6px 12px;
    font-size: 14px;
    margin: 3px;
    font-weight: 400;
    border-radius: 6px;
    line-height: 1.4;
    text-transform: uppercase;
    cursor: pointer;
}

.project-filter a.nav-link:hover, .project-filter a.filter-link:hover {
    background: var(--main-color);
    color: #fff;
}

.project-filter a.nav-link.active, .project-filter a.filter-link.active {
    background: var(--main-color);
    color: #fff;
    font-weight: 700;
}

.project-filter .nav-tabs{
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: auto;
    /* gap: 8px; */
    justify-content: center;
    color: var(--main-color);
    border-bottom: unset;
}

.project-filter .tab-content{
    background: transparent;
}

.project-filter .tab-content .tab-pane{
    line-height: unset;
    padding: 0;
    color: inherit;
}

.fade{
    opacity:0;
    transition:opacity .15s linear;
}

.fade.show{
    opacity:1;
}

.project-card {
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-bottom: 25px;
    margin-top: 5px;
}

.project-thumb {
    /* height: 230px; */
    width: 100%;
    min-height: 220px;
    height: fit-content;
    background: #d9d9d9
}

.project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 3/2;
    /* border-radius: 16px 16px 0 0; */
}

.project-body {
    padding: 15px
}

.project-body .name {
    font-size: 18px;
    font-weight: 600;
    color: #171A1FFF;
    letter-spacing: 0;
    margin-bottom: 4px;
}

.project-body .category {
    font-size: 16px;
    font-weight: 400;
    color: #171A1FFF;
}

.vqh-partners-section,
.vqh-advantages-section {
    padding: 90px 0
}

.vqh-partners-section .gutter-lg>*{
    margin-top: 20px;
}

/* .vqh-partners-section .partner-row a{
    margin-top: 15px;
} */

.vqh-partners-section .partner-row img {
    max-width: 100%;
    height: 90px;
    object-fit: contain;

}

.vqh-partners-section .partner-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    text-align: center;
    font-weight: 700
}

/* Advantages Section */

.vqh-advantages-section .adv-card {
    padding: 30px 20px;
    text-align: center;
    border-right: 1px solid #eee;
    /* height: 85% */
}

.vqh-advantages-section .row .col-md-6:nth-child(4n) .adv-card{
    border-right: none;
}

.vqh-advantages-section .adv-card i {
    font-size: 18px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-color);
    color: #fff;
    border-radius: 8px;
    margin: 0 auto 18px
}

.vqh-advantages-section .adv-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 6px;
}

.vqh-advantages-section .adv-card p {
    font-weight: 400; 
    color: #171A1FFF;
    margin-bottom: 0;
}

/* Testimonial Section */

.vqh-testimonial-section {
    /* background: var(--main-color); */
    position: relative;
    padding: 40px 0
}

.vqh-testimonial-section::before {
    content: '';
    width: 100%;
    height: 60%;
    background: #BA3737FF;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.vqh-testimonial-section .testimonial-title {
    font-size: clamp(20px, 4vw, 36px);
    text-align: center;
    color: #fff;
    font-weight: 700;
    text-overflow: inherit;
}

.vqh-testimonial-section .testimonial-subtitle {
    text-align: center;
    color: #ffe9e9
}

.vqh-testimonial-section .review-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    min-height: 220px;
    box-shadow: 0px 4px 9px #171a1f1C, 0px 0px 2px #171a1f1F;
}

.vqh-testimonial-section .review-card p {
    font-size: 16px; 
    line-height: 28px; 
    font-weight: 400; 
    color: #171A1FFF;
    margin: 12px 0;
    height: 112px;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* .vqh-testimonial-section .review-card .info-card{

} */

.vqh-testimonial-section .review-card .info-card .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffcbcb;
}

.vqh-testimonial-section .review-card .info-card .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vqh-testimonial-section .review-card .info-card .name {
    font-size: 16px; 
    line-height: 24px; 
    font-weight: 700; 
    color: #171A1FFF;
}

.vqh-testimonial-section .review-card .info-card .project-name{
    color: #424856FF;
}

.vqh-testimonial-section .review-card .stars {
    color: #f3b41b;
    font-size: 22px
}

.swiper-wrapper{
    height: auto;
}

.reviewSwiper{
    padding-bottom: 40px;
}

.reviewSwiper .swiper-pagination-bullet-active{
    background: var(--main-color);
}

.reviewSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
}

.vqh-contact-section {
    padding: 60px 0;
}

.contact-wrapper {
    overflow: hidden;
    border-radius: 16px
}

.contact-form {
    background: #fff;
    padding: 30px;
    border: 1px solid var(--main-color);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.contact-form .form-control {
    margin-bottom: 15px
}

.contact-form-title {
    font-size: clamp(24px, 4vw, 28px);
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 28px;
}

.contact-info {
    background: #BA3737FF;
    color: #fff;
    padding: 50px;
    font-size: 16px;
    height: 100%;
}

.contact-info .contact-title{
    color: #FFF;
    font-weight: 700;
    margin-bottom: 28px;
}

.contact-info .contact-title div {
    font-size: clamp(24px, 4vw, 30px);
    margin-bottom: 10px;
}

.contact-info .contact-title span {
    font-size: 18px;
}

.contact-stores {
    margin-top: 24px;
}

.contact-stores ul {
    padding-left: 1.2em;
    margin: 10px 0;
}

@media (max-width: 768px) {
    .vqh-hero-section {
        padding: 50px 0;
    }

    .hero-media{
        margin-top: 30px;
    }

    .vqh-stats-section .stat-badge {
        font-size: 16px;
        width: 56px;
        height: 56px;
    }

    .vqh-stats-section .stat-text {
        font-size: 16px;
    }

    .vqh-projects-section {
        padding: 50px 0;
    }

    .project-thumb {
        min-height: 180px;
    }

    .vqh-partners-section, .vqh-advantages-section {
        padding: 50px 0;
    }

    .vqh-partners-section .partner-row img {
        height: 54px;
    }

    .vqh-contact-section {
        padding: 30px 0;
    }

    .project-filter .nav-tabs{
        justify-content: flex-start;
    }

    .contact-form{
        border-top-right-radius: 16px;
        border-bottom-left-radius: unset;
    }

    .contact-info{
        padding: 20px 16px;
    }

    .contact-info .contact-title div {
        margin-bottom: 0px;
    }

    .contact-info .contact-title span {
        font-size: 15px;
    }
}

.page-project .page-header{
    height: 20rem;
    background-color: #BA3737FF;
}

.page-project .page-title {
    color: #fff;
    text-transform: uppercase;
    font-size: clamp(24px, 4vw, 36px);
}

.vqh-projects-all-section{
    padding: 20px 0 50px;
}

.page-project .page-item {
    margin-right: 0
}

.page-project .page-item.active {
    font-weight: 600;
    /* border: .0625rem solid #BA3737FF; */
    background-color: #BA3737FF;
    margin: .0625rem
}

.page-project .pagination .next,.page-project .pagination .prev {
    height: unset;
    min-width: unset;
    padding: 0
}

.page-project .toolbox-pagination .pagination {
    border: 1px solid #BA3737FF;
    border-radius: 4px
}

.page-project .toolbox-pagination .next svg,.page-project .toolbox-pagination .prev svg {
    width: 8px;
    fill: #BA3737FF;
    cursor: pointer
}

.page-project .toolbox-pagination .next.disabled svg,.page-project .toolbox-pagination .prev.disabled svg {
    cursor: unset;
    fill: #a9a9a9
}

.page-project .toolbox-pagination .pagination li {
    margin: 0px
}

.page-project .toolbox-pagination .pagination li.disabled a {
    cursor: unset
}

.page-project .toolbox-pagination .pagination li a {
    color: #BA3737FF;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 3.6rem;
    height: unset!important;
    min-width: unset!important;
    padding: 0 1.2rem;
    border: unset;
}

.page-project .toolbox-pagination .pagination li.active a {
    font-weight: 600;
    color: #fff;
}

.page-project .toolbox.toolbox-pagination {
    padding: 0;
    margin: 2rem 0 0rem;
    border-top: unset;
}