/* Comprehensive Section Styling Fixes */

/* Service Section Fixes */
.vl-service-area2 {
    padding: 80px 0 !important;
    background: #f8f9fa !important;
}

.vl-service-icon-bo2x {
    background: #ffffff !important;
    border-radius: 15px !important;
    padding: 40px 30px !important;
    text-align: center !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    position: relative !important;
    overflow: visible !important;
}

.vl-service-icon-bo2x:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 40px rgba(22, 26, 64, 0.15) !important;
}

.vl-service-icon-bo2x .icon {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 25px !important;
    background: linear-gradient(135deg, #FF3131 0%, #FF4949 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 40px !important;
    color: #ffffff !important;
}

.vl-service-icon-bo2x .icon i,
.vl-service-icon-bo2x .icon [class*="flaticon"] {
    color: #ffffff !important;
    line-height: 1 !important;
}

.vl-service-icon-bo2x .title {
    font-size: 22px !important;
    color: #161A40 !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
}

.vl-service-icon-bo2x .para {
    color: #666666 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
}

.vl-service-icon-bo2x .read-more {
    color: #FF3131 !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.3s ease !important;
}

.vl-service-icon-bo2x .read-more:hover {
    color: #161A40 !important;
    gap: 10px !important;
}

/* About Section Fixes */
.vl-about-area2 {
    padding: 80px 0 !important;
    background: #ffffff !important;
}

.vl-about-content2 h2 {
    color: #161A40 !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
}

.vl-about-content2 h5 {
    color: #FF3131 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 15px !important;
}

.vl-about-content2 p {
    color: #666666 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
}

.vl-about-icon-box2 {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 12px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.vl-about-icon-box2:hover {
    box-shadow: 0 10px 30px rgba(22, 26, 64, 0.1) !important;
    transform: translateX(5px) !important;
    border-color: transparent !important;
}

.vl-about-icon-box2 .icon {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    background: linear-gradient(135deg, #FF3131 0%, #FF4949 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    color: #ffffff !important;
}

.vl-about-icon-box2 .icon i {
    color: #ffffff !important;
}

.vl-about-icon-box2 .content h4 {
    color: #161A40 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.vl-about-icon-box2 .content p {
    color: #666666 !important;
    font-size: 14px !important;
    margin-bottom: 0 !important;
}

.vl-counter-box2 {
    text-align: center !important;
    padding: 30px 20px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
}

.vl-counter-box2:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(22, 26, 64, 0.12) !important;
}

.vl-counter-box2 h2 {
    color: #FF3131 !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.vl-counter-box2 p {
    color: #161A40 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
}

/* Team Section Fixes */
.vl-team-area2 {
    padding: 80px 0 !important;
    background: #f8f9fa !important;
}

.vl-single-team-bo2x {
    background: #ffffff !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    margin-bottom: 30px !important;
}

.vl-single-team-bo2x:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 40px rgba(22, 26, 64, 0.15) !important;
}

.vl-single-team-bo2x .team-thumb {
    position: relative !important;
    overflow: hidden !important;
    height: 350px !important;
    background: #f0f0f0 !important;
}

.vl-single-team-bo2x .team-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: all 0.3s ease !important;
}

.vl-single-team-bo2x:hover .team-thumb img {
    transform: scale(1.05) !important;
}

.vl-single-team-bo2x .team-social {
    position: absolute !important;
    bottom: -100% !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(22, 26, 64, 0.9) !important;
    padding: 15px !important;
    transition: all 0.3s ease !important;
}

.vl-single-team-bo2x:hover .team-social {
    bottom: 0 !important;
}

.vl-single-team-bo2x .team-social ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.vl-single-team-bo2x .team-social ul li a {
    width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.vl-single-team-bo2x .team-social ul li a:hover {
    background: #FF3131 !important;
    border-color: #FF3131 !important;
}

.vl-single-team-bo2x .team-content {
    padding: 25px !important;
    text-align: center !important;
}

.vl-single-team-bo2x .name {
    font-size: 22px !important;
    color: #161A40 !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
}

.vl-single-team-bo2x .desig {
    font-size: 14px !important;
    color: #FF3131 !important;
    font-weight: 500 !important;
}

/* Testimonial Section Fixes */
.vl-testimonial-area2 {
    padding: 80px 0 !important;
    background: #ffffff !important;
}

.vl-testimonial-slide2 {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 15px !important;
    padding: 40px 35px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
}

.vl-testimonial-slide2:hover {
    box-shadow: 0 10px 35px rgba(22, 26, 64, 0.12) !important;
}

.vl-testimonial-slide2 .testimonial-text {
    color: #666666 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    margin-bottom: 25px !important;
}

.vl-testimonial-slide2 .client-info {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.vl-testimonial-slide2 .client-img {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.vl-testimonial-slide2 .client-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.vl-testimonial-slide2 .name {
    font-size: 20px !important;
    color: #161A40 !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
}

.vl-testimonial-slide2 .desig {
    font-size: 14px !important;
    color: #FF3131 !important;
}

.vl-testimonial-ratting ul {
    display: flex !important;
    gap: 5px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.vl-testimonial-ratting ul li i {
    color: #FFB800 !important;
    font-size: 16px !important;
}

/* Blog Section Fixes */
.vl-blog-area2 {
    padding: 80px 0 !important;
    background: #f8f9fa !important;
}

.vl-single-blog-box2 {
    background: #ffffff !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
}

.vl-single-blog-box2:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 40px rgba(22, 26, 64, 0.12) !important;
}

.vl-single-blog-box2 .blog-thumb {
    height: 250px !important;
    overflow: hidden !important;
    background: #f0f0f0 !important;
}

.vl-single-blog-box2 .blog-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: all 0.3s ease !important;
}

.vl-single-blog-box2:hover .blog-thumb img {
    transform: scale(1.05) !important;
}

.vl-single-blog-box2 .blog-content {
    padding: 30px !important;
}

.vl-single-blog-box2 .blog-meta {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 15px !important;
}

.vl-single-blog-box2 .date,
.vl-single-blog-box2 .author {
    color: #FF3131 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.vl-single-blog-box2 .date i,
.vl-single-blog-box2 .author i {
    color: #FF3131 !important;
}

.vl-single-blog-box2 .title {
    font-size: 22px !important;
    color: #161A40 !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
}

.vl-single-blog-box2 .title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.vl-single-blog-box2 .title a:hover {
    color: #FF3131 !important;
}

.vl-single-blog-box2 .desc {
    color: #666666 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
}

.blog-learnmore {
    color: #FF3131 !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.blog-learnmore:hover {
    color: #161A40 !important;
    gap: 10px !important;
}

/* FAQ Section Fixes */
.vl-faq-area2 {
    padding: 80px 0 !important;
    background: #ffffff !important;
}

.accordion-item {
    border: 1px solid #e9ecef !important;
    border-radius: 10px !important;
    margin-bottom: 15px !important;
    overflow: hidden !important;
}

.accordion-button {
    background: #ffffff !important;
    color: #161A40 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    padding: 20px 25px !important;
    border: none !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background: #161A40 !important;
    color: #ffffff !important;
}

.accordion-button::after {
    background-image: none !important;
    content: "+" !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    color: #FF3131 !important;
    transition: all 0.3s ease !important;
}

.accordion-button:not(.collapsed)::after {
    content: "-" !important;
    color: #ffffff !important;
    transform: rotate(0) !important;
}

.accordion-body {
    padding: 25px !important;
    color: #666666 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
}

/* Work Section (How it works) Fixes */
.vl-work-area {
    padding: 80px 0 !important;
    background: #ffffff !important;
}

.vl-work-tab2 .nav-link {
    padding: 0 !important;
    margin-bottom: 20px !important;
    border: none !important;
    background: transparent !important;
}

.vl-tab-icon-box {
    padding: 30px !important;
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.nav-link.active .vl-tab-icon-box {
    background: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 35px rgba(22, 26, 64, 0.12) !important;
}

.vl-tab-icon-box .title {
    color: #161A40 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.vl-tab-icon-box .para {
    color: #666666 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 0 !important;
}

/* CTA Section Fixes */
.vl-appointment-area2 {
    padding: 100px 0 !important;
    background: linear-gradient(135deg, #161A40 0%, #1a1f47 100%) !important;
    position: relative !important;
}

.vl-appointment-content2 h2 {
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.vl-appointment-content2 h5 {
    color: #FF3131 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 15px !important;
}

.vl-appointment-content2 p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
}

.vl-appointment-form2 {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 45px !important;
}

.vl-appointment-form2 .form-control,
.vl-appointment-form2 .form-select {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #161A40 !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
}

.vl-appointment-form2 .form-control:focus,
.vl-appointment-form2 .form-select:focus {
    background: #ffffff !important;
    border-color: #FF3131 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 49, 49, 0.25) !important;
}

/* Swiper Navigation Fixes */
.swiper-button-next,
.swiper-button-prev {
    background: #ffffff !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #FF3131 !important;
    box-shadow: 0 5px 20px rgba(255, 49, 49, 0.3) !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px !important;
    color: #161A40 !important;
    font-weight: 700 !important;
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
    color: #ffffff !important;
}

/* General Section Title Fixes */
.vl-section-title2 {
    text-align: center !important;
    margin-bottom: 60px !important;
}

.vl-section-title2 .subtitle {
    color: #FF3131 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    margin-bottom: 15px !important;
    display: inline-block !important;
}

.vl-section-title2 .title {
    color: #161A40 !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Fix margins between sections */
.vl-service-area2 + *,
.vl-about-area2 + *,
.vl-team-area2 + *,
.vl-testimonial-area2 + *,
.vl-blog-area2 + *,
.vl-faq-area2 + * {
    margin-top: 0 !important;
}

/* Ensure all sections have proper spacing */
section[class*="vl-"] {
    position: relative !important;
    z-index: 1 !important;
}

/* Fix Bootstrap column gaps */
.row {
    --bs-gutter-x: 30px !important;
    --bs-gutter-y: 30px !important;
}

/* Ensure images don't break layout */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix button group spacing */
.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
    margin-top: 0 !important;
}

/* Responsive fixes */
@media (max-width: 991px) {
    .vl-section-title2 .title {
        font-size: 32px !important;
    }
    
    .vl-service-icon-bo2x,
    .vl-single-team-bo2x,
    .vl-single-blog-box2 {
        margin-bottom: 30px !important;
    }
    
    .vl-about-content2 h2,
    .vl-appointment-content2 h2 {
        font-size: 32px !important;
    }
}