/**
 * VentroTech Theme - Enhanced Responsive Styles
 * Additional responsive improvements for better mobile/tablet experience
 */

/* =============================================
   Base Responsive Improvements
   ============================================= */

/* Smooth scrolling for all devices */
html {
    scroll-behavior: smooth;
}

/* Better touch targets for mobile */
@media (max-width: 991px) {
    a, button, .thm-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* =============================================
   Header Responsive Improvements
   ============================================= */

/* Mobile header improvements */
@media (max-width: 1199px) {
    .main-header-one__bottom {
        padding: 10px 15px;
    }
    
    .site-ligo img {
        max-width: 120px;
        height: auto;
    }
    
    .mobile-nav-toggler i {
        font-size: 28px;
        color: var(--thm-white);
    }
    
    .sticky-menu .mobile-nav-toggler i {
        color: var(--thm-teal);
    }
}

@media (max-width: 767px) {
    .site-ligo img {
        max-width: 100px;
    }
    
    .main-header-one__bottom-right {
        display: none !important;
    }
}

/* Mobile menu improvements */
.mobile-menu {
    z-index: 9999;
}

.mobile-menu .menu-box {
    padding-bottom: 30px;
}

.mobile-menu .navigation li > a {
    font-size: 15px;
    padding: 12px 50px 12px 20px;
}

.mobile-menu .contact-info {
    border-top: 1px solid rgba(0,0,0,0.1);
    margin-top: 20px;
    padding-top: 20px;
}

/* =============================================
   Hero Section Responsive
   ============================================= */

@media (max-width: 991px) {
    .hero-slider-item {
        min-height: 80vh;
        height: auto;
    }
    
    .hero-content {
        padding: 0 15px;
    }
    
    .hero-content h1.hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .hero-content p {
        font-size: 16px;
        line-height: 1.6;
    }
    
    .hero-btn-area {
        flex-direction: column;
        gap: 15px;
    }
    
    .hero-btn-area .thm-btn {
        width: 100%;
        max-width: 250px;
        justify-content: center;
    }
    
    .hero-btn-area a.thm-btn:last-child {
        margin-left: 0 !important;
    }
}

@media (max-width: 576px) {
    .hero-slider-item {
        min-height: 70vh;
    }
    
    .hero-content h1.hero-title {
        font-size: 1.8rem;
    }
    
    .hero-content p {
        font-size: 14px;
    }
    
    .hero-slider .owl-nav {
        display: none;
    }
}

/* =============================================
   Service Categories Responsive
   ============================================= */

@media (max-width: 991px) {
    .service-cat-sec {
        margin-top: 0;
        padding: 60px 0;
    }
    
    .service-cat-sec .single-service {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .service-cat-sec .single-service .service-content i {
        font-size: 45px;
    }
    
    .service-cat-sec .single-service .service-content a.service-title {
        font-size: 16px;
    }
}

/* =============================================
   About Section Responsive
   ============================================= */

@media (max-width: 991px) {
    .about-sec .sec-content {
        margin-left: 0;
        margin-top: 40px;
    }
    
    .about-sec .sec-images .sec-img-one {
        width: 100%;
    }
    
    .about-sec2 .sec-images .sec-img-info {
        width: 150px;
        height: 150px;
        padding: 20px;
    }
    
    .about-sec2 .sec-images .sec-img-info span {
        font-size: 36px;
        margin-bottom: 10px;
    }
    
    .about-sec2 .sec-images .sec-img-info p {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .about-sec2 .sec-images .sec-img-info {
        width: 120px;
        height: 120px;
        padding: 15px;
    }
    
    .about-sec2 .sec-images .sec-img-info span {
        font-size: 28px;
        margin-bottom: 5px;
    }
    
    .about-sec2 .sec-images .sec-img-info p {
        font-size: 14px;
    }
    
    .sec-list-item li {
        font-size: 14px;
    }
}

/* =============================================
   Services Section Responsive
   ============================================= */

@media (max-width: 991px) {
    .single-service-style2 {
        margin-bottom: 30px;
    }
    
    .single-service-style2 .content-box {
        padding: 20px;
    }
    
    .single-service-style2 .content-box .single-service-content h5 {
        font-size: 18px;
        line-height: 1.4;
    }
}

@media (max-width: 576px) {
    .single-service-style2 .content-box .single-service-content p {
        font-size: 14px;
    }
    
    .custom-list li {
        font-size: 14px;
    }
}

/* =============================================
   Stats Section Responsive
   ============================================= */

@media (max-width: 991px) {
    .company-qinfo-raaper {
        flex-wrap: wrap;
        padding: 40px 20px;
    }
    
    .company-qinfo-raaper .single-info {
        width: 50%;
        padding: 20px 15px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    
    .company-qinfo-raaper .single-info:nth-child(2n) {
        border-left: 1px solid rgba(255,255,255,0.2);
    }
    
    .company-qinfo-raaper .single-info:last-child,
    .company-qinfo-raaper .single-info:nth-last-child(2) {
        border-bottom: none;
    }
}

@media (max-width: 576px) {
    .company-qinfo-raaper .single-info {
        width: 100%;
        border-left: none !important;
        text-align: center;
    }
    
    .company-qinfo-raaper .single-info .info h2 span {
        font-size: 2rem;
    }
    
    .company-qinfo-raaper .single-info .info span {
        font-size: 16px;
    }
    
    .company-qinfo-raaper .single-info i {
        font-size: 40px;
        margin-right: 15px;
    }
}

/* =============================================
   Testimonials Section Responsive
   ============================================= */

@media (max-width: 991px) {
    .single-testimonial .feedback {
        padding: 25px 20px;
    }
    
    .single-testimonial .feedback .comment {
        font-size: 15px;
        line-height: 1.6;
    }
}

@media (max-width: 576px) {
    .single-testimonial .customar-info {
        flex-direction: row;
        padding: 15px;
    }
    
    .single-testimonial .customar-info .customar-img {
        width: 50px;
        height: 50px;
    }
    
    .single-testimonial .customar-info .customar-title h5 {
        font-size: 16px;
    }
    
    .single-testimonial .com-logo {
        top: 15px;
        right: 15px;
    }
    
    .single-testimonial .com-logo i {
        font-size: 40px;
    }
}

/* =============================================
   FAQ Section Responsive
   ============================================= */

@media (max-width: 991px) {
    .faq-sec .sec-images {
        margin-left: 0;
        margin-top: 40px;
    }
    
    .faq-sec .sec-images .sec-img-one {
        height: auto;
    }
}

@media (max-width: 767px) {
    .faq-sec #accordion h4.accordion-title {
        font-size: 14px;
        padding: 12px 40px 12px 15px;
    }
    
    .faq-sec #accordion h4.accordion-title::before,
    .faq-sec #accordion h4.accordion-title::after {
        right: 15px;
        width: 12px;
    }
    
    .faq-sec #accordion .accordion-content {
        padding: 0 15px;
        font-size: 14px;
    }
}

/* =============================================
   Contact Section Responsive
   ============================================= */

@media (max-width: 991px) {
    .contact-page-sec .sec-content {
        margin-bottom: 40px;
    }
    
    .get-in-touch .qinfo-item {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .contact-page-sec .get-in-touch .qinfo-item {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-page-sec .get-in-touch .qinfo-item .qinfo-icon {
        margin-bottom: 10px;
    }
    
    .contact-page-sec .get-in-touch .qinfo-item .qinfo-box {
        margin-left: 0;
    }
    
    form.itco-cform .contact-field input,
    form.itco-cform .contact-field textarea {
        font-size: 14px;
        padding: 12px 15px;
    }
    
    .itco-form-btn .thm-btn {
        width: 100%;
    }
}

/* =============================================
   Footer Responsive
   ============================================= */

@media (max-width: 991px) {
    .footer-sec .section-overlay {
        padding-top: 60px;
    }
    
    .footer-widget {
        margin-bottom: 40px;
    }
    
    .footer-widget.pages-links {
        margin-left: 0;
    }
}

@media (max-width: 767px) {
    .footer-widget h4.footer-widget-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .footer-widget-content .footer-social-icon {
        margin-top: 20px;
    }
    
    .footer-widget-content .footer-social-icon a {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .footer-copyright-text p {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .footer-widget {
        text-align: center;
    }
    
    .footer-widget-content .footer-social-icon {
        justify-content: center;
    }
    
    .footer-widget-content .footer-links ul li {
        margin-bottom: 10px;
    }
}

/* =============================================
   Breadcrumb Responsive
   ============================================= */

@media (max-width: 991px) {
    #site-breadcumb .site-breadcumb-wrapper {
        padding: 120px 20px 60px;
    }
    
    .breadcumb-content h1.breadcumb-title {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    #site-breadcumb .site-breadcumb-wrapper {
        padding: 100px 15px 40px;
    }
    
    .breadcumb-content {
        flex-direction: column;
        text-align: center;
    }
    
    .breadcumb-content h1.breadcumb-title {
        font-size: 28px;
        margin-bottom: 15px;
    }
    
    .breadcumb-content ul.page-navigator {
        margin-left: 0;
    }
    
    .breadcumb-content ul.page-navigator li {
        font-size: 14px;
    }
}

/* =============================================
   Blog/Posts Responsive
   ============================================= */

@media (max-width: 991px) {
    .blog-page-sec .blog-item {
        margin-bottom: 40px;
    }
    
    .blog-item .content-box .title-box h3 {
        font-size: 22px;
        line-height: 1.4;
    }
}

@media (max-width: 576px) {
    .blog-item .img-box .blog-date {
        width: 60px;
        height: 60px;
    }
    
    .blog-item .img-box .blog-date span.data {
        font-size: 22px;
    }
    
    .blog-item .content-box {
        margin: 15px;
    }
    
    .blog-item .content-box .title-box h3 {
        font-size: 18px;
    }
    
    .blog-item .content-box .meta-box ul.meta-info li {
        font-size: 13px;
        margin-right: 15px;
    }
}

/* =============================================
   WhatsApp Button Responsive
   ============================================= */

@media (max-width: 767px) {
    #whatsapp {
        width: 50px;
        height: 50px;
        bottom: 80px;
        right: 15px;
    }
    
    #whatsapp img {
        width: 50px;
        height: 50px;
    }
    
    .scroll-top {
        width: 40px;
        height: 40px;
        line-height: 40px;
        right: 15px;
        font-size: 14px;
    }
}

/* =============================================
   Buttons Responsive
   ============================================= */

@media (max-width: 576px) {
    .thm-btn {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .thm-btn i {
        font-size: 14px;
    }
}

/* =============================================
   Typography Responsive
   ============================================= */

@media (max-width: 991px) {
    body {
        font-size: 16px;
        line-height: 1.6;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2, .sec-title {
        font-size: 2rem;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    h4 {
        font-size: 1.25rem;
    }
    
    h5 {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    h2, .sec-title {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    h4 {
        font-size: 1.1rem;
    }
    
    h5 {
        font-size: 1rem;
    }
    
    .sec-sub-title {
        font-size: 16px;
    }
}

/* =============================================
   Utility Classes for Responsive
   ============================================= */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 992px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Text alignment responsive */
@media (max-width: 767px) {
    .text-center-mobile {
        text-align: center !important;
    }
}

/* Spacing adjustments */
@media (max-width: 767px) {
    .sec-ptb {
        padding: 50px 0;
    }
    
    .sec-pt {
        padding-top: 50px;
    }
    
    .sec-pb {
        padding-bottom: 50px;
    }
    
    .mb-5 {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-5 {
        margin-top: 1.5rem !important;
    }
}

/* =============================================
   Owl Carousel Responsive
   ============================================= */

@media (max-width: 767px) {
    .owl-nav .owl-prev,
    .owl-nav .owl-next {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    .owl-nav .owl-prev {
        margin-right: 15px;
    }
    
    .testimonial-slider .owl-dots .owl-dot span,
    .testimonial-slider3 .owl-dots .owl-dot span {
        width: 8px;
        height: 8px;
    }
}

/* =============================================
   Form Elements Responsive
   ============================================= */

@media (max-width: 576px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* =============================================
   Images Responsive
   ============================================= */

img {
    max-width: 100%;
    height: auto;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* =============================================
   Container Responsive Adjustments
   ============================================= */

@media (max-width: 576px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* =============================================
   Service Detail Page Responsive
   ============================================= */

@media (max-width: 991px) {
    .service-sidebar {
        margin-top: 40px;
    }
    
    .sidebar-widget {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .service-list li a {
        font-size: 14px;
        padding: 10px 15px;
    }
}

/* =============================================
   Progress Bars Responsive
   ============================================= */

@media (max-width: 767px) {
    .progressbar-tooltip {
        margin-top: 30px;
    }
    
    .ab-progress .progress-title {
        font-size: 14px;
    }
}

/* =============================================
   Print Styles
   ============================================= */

@media print {
    .main-header,
    .footer-sec,
    #whatsapp,
    .scroll-top,
    #preloader {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
}