/* =========================================================
   VENETS MEDIA - GLOBAL RESPONSIVE OVERRIDES
   Desktop behaviour/hover effects are preserved.
   Mobile gets touch-friendly, stacked layouts instead of
   squeezing desktop cards into narrow screens.
========================================================= */

html { overflow-x: hidden; }
body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { max-width: 100%; }

/* Keep desktop hover interactions, but don't force hover movement on touch devices. */
@media (hover: none) {
  a:hover, button:hover { transform: none !important; }
}

/* =========================================================
   HEADER / NAVIGATION
========================================================= */
@media (max-width: 991.98px) {
  .header-area { display: none !important; }
  .mobile-header.mobile-haeder1 {
    min-height: 68px;
    padding: 0;
  }
  .mobile-header .container-fluid { padding: 0 15px; }
  .mobile-header-elements {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .mobile-logo img {
    width: 92px !important;
    height: auto !important;
    object-fit: contain;
  }
  .mobile-nav-icon { flex: 0 0 auto; }
  .mobile-nav-icon i { font-size: 23px; }
  .mobile-sidebar.mobile-sidebar1 {
    width: min(88vw, 380px) !important;
    max-width: 380px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-sidebar .logosicon-area {
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
  }
  .mobile-sidebar .logos img {
    width: 88px !important;
    height: auto !important;
  }
  .mobile-nav-list > li > a,
  .mobile-service-toggle,
  .mobile-sub-toggle {
    min-height: 46px;
    display: flex;
    align-items: center;
  }
  .mobile-inner-menu a { min-height: 42px; display: flex; align-items: center; }
  .allmobilesection { padding-bottom: 30px; }
}

/* =========================================================
   COMMON CONTAINERS / ROWS
========================================================= */
@media (max-width: 767.98px) {
  .container,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
  }

  .container { padding-left: 15px; padding-right: 15px; }

  .row { margin-left: -8px; margin-right: -8px; }
  .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

  .section-title,
  .section-heading,
  .section-header { max-width: 100% !important; }

  h1 { font-size: clamp(30px, 9vw, 44px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(26px, 7.5vw, 38px) !important; line-height: 1.12 !important; }
  h3 { line-height: 1.2; }

  .btn,
  .header-btn1,
  .banner-button,
  .payment-btn,
  .contact-btn {
    min-height: 44px;
  }

  table { width: 100% !important; }
}

/* =========================================================
   SERVICE-PAGE HEROES
   Desktop carousel/animations remain intact. On mobile the
   text and visual become a clean vertical composition.
========================================================= */
@media (max-width: 767.98px) {
  .business-banner,
  .hero { min-height: auto !important; }

  .banner-container,
  .hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 28px !important;
    padding: 55px 15px 45px !important;
  }

  .banner-content,
  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left;
  }

  .banner-content h1,
  .hero-copy h1,
  .hero h1 { font-size: clamp(31px, 9vw, 45px) !important; }

  .banner-description,
  .hero-description {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .hero-visual,
  .hero-image,
  .cards-area,
  .image-carousel {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* Prevent decorative desktop back-cards from creating horizontal overflow. */
  .back-card,
  .back-card-2 {
    max-width: 86% !important;
  }

  .notifications-container {
    width: min(100%, 390px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .notification-card {
    max-width: calc(100% - 16px) !important;
  }
}

/* =========================================================
   COMMON CARD GRIDS
   Desktop: cards stay horizontal.
   Mobile: one comfortable card per row / swipe-friendly group.
========================================================= */
@media (max-width: 767.98px) {
  .cards,
  .uses-cards,
  .three-column,
  .section-grid,
  .payment-container,
  .growth-capital-grid,
  .why-grid,
  .industry-grid,
  .feature-grid,
  .capabilities-panel,
  .channel-tabs,
  .industry-grid,
  .capital-card-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  .cards,
  .uses-cards,
  .three-column,
  .section-grid,
  .payment-container,
  .growth-capital-grid,
  .why-grid,
  .industry-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .card,
  .use-card,
  .capital-card,
  .feature-card,
  .column-box,
  .industry,
  .why-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .card,
  .use-card,
  .feature-card,
  .column-box,
  .industry,
  .why-item {
    min-height: auto !important;
  }

  .card:hover,
  .use-card:hover,
  .feature-card:hover,
  .industry:hover,
  .why-item:hover {
    transform: none;
  }
}

/* =========================================================
   SMS / PAYMENT SECTIONS
========================================================= */
@media (max-width: 767.98px) {
  .payment-section,
  .growth-capital-section,
  .faq-section,
  .capabilities-section,
  .process,
  .uses,
  .three-column,
  .payment-copy {
    width: 100% !important;
  }

  .payment-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .payment-left,
  .payment-right,
  .payment-copy,
  .feature-card,
  .image-card-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .payment-title { font-size: clamp(30px, 8vw, 42px) !important; }
  .payment-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }

  .image-card-wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .image-card { width: 100% !important; min-width: 0 !important; }

  .feature-list { padding-left: 18px !important; }

  .faq-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  .faq-item { width: 100% !important; }
  .faq-question { gap: 12px !important; padding: 16px !important; }
  .faq-answer-inner { padding: 0 16px 16px !important; }
}

/* =========================================================
   VOICE / WHATSAPP / MODERN CUSTOM SECTIONS
========================================================= */
@media (max-width: 767.98px) {
  .section-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .section-image,
  .section-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .fake-phone {
    width: min(100%, 340px) !important;
    margin-inline: auto !important;
  }

  .feature-bar {
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .feature-bar::-webkit-scrollbar { display: none; }
  .feature-item { flex: 0 0 auto; }

  .capability-tabs,
  .channel-tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
  }
  .capability-tabs::-webkit-scrollbar,
  .channel-tabs::-webkit-scrollbar { display: none; }
  .capability-tab,
  .channel { flex: 0 0 auto !important; }

  .capability-stage,
  .capability-media,
  .capability-points {
    width: 100% !important;
    max-width: 100% !important;
  }

  .process-list { width: 100% !important; }
  .process-item { grid-template-columns: 44px minmax(0, 1fr) !important; }

  .capital-marquee-wrap { overflow: hidden !important; }
  .capital-marquee-track { width: max-content !important; }
}

/* =========================================================
   HOME PAGE CUSTOM SECTIONS
========================================================= */
@media (max-width: 767.98px) {
  .hero1-section-area .container,
  .hero1-section-area .row { width: 100% !important; }

  .hero1-section-area .col-lg-6,
  .hero1-section-area .col-xl-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .testimonial-section,
  .testimonial-container { width: 100% !important; }

  .testimonial-slider { width: 100% !important; }
  .testimonial-card { min-width: 0 !important; }
}

/* =========================================================
   FORMS
========================================================= */
@media (max-width: 767.98px) {
  form { width: 100%; }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  textarea { min-height: 130px; resize: vertical; }

  .contact-section,
  .feedback-section { padding-left: 15px !important; padding-right: 15px !important; }
}

/* =========================================================
   BLOG / LONG CONTENT
========================================================= */
@media (max-width: 767.98px) {
  .blog-grid,
  .blog-list,
  .blog-details,
  .post-content { width: 100% !important; max-width: 100% !important; }
  .blog-card img,
  .post-content img { width: 100% !important; height: auto !important; }
  .post-content { overflow-wrap: anywhere; }
}

/* =========================================================
   VERY SMALL PHONES
========================================================= */
@media (max-width: 420px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .mobile-header-elements { padding-inline: 2px; }
  .mobile-logo img { width: 82px !important; }
  .mobile-sidebar.mobile-sidebar1 { width: 92vw !important; }
  .banner-container,
  .hero-inner { padding-left: 12px !important; padding-right: 12px !important; }
  .payment-actions { flex-direction: column !important; align-items: stretch !important; }
  .payment-actions .payment-btn { width: 100% !important; }
}

/* =========================================================
   FEEDBACK / CONTACT / ALL TESTIMONIALS PAGES
========================================================= */
@media (max-width: 767.98px) {
  .feedback-wrap,
  .feedback-card,
  .contact-form-wrapper,
  .contact-card,
  .contact-info,
  .testimonials-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  .feedback-wrap { padding-left: 14px !important; padding-right: 14px !important; }
  .feedback-card { padding: 22px !important; border-radius: 18px !important; }
  .google-box { width: 100% !important; }
  .field { width: 100% !important; }
  .rating { flex-wrap: wrap !important; }

  .contact-hero { min-height: 250px !important; }
  .contact-hero-content { padding: 52px 16px !important; }
  .contact-hero h1 { font-size: 38px !important; }
  .contact-section { padding: 50px 0 !important; }
  .contact-section .container { max-width: 100% !important; }
  .contact-card { padding: 22px !important; }

  .testimonials-page { padding: 48px 14px 65px !important; }
  .page-head { margin-bottom: 30px !important; }
  .page-head h1 { font-size: clamp(31px, 9vw, 44px) !important; }
  .review-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 20px !important;
  }
  .review-row .profile { width: 56px !important; flex: 0 0 auto; }
  .review-content { width: 100% !important; min-width: 0 !important; }
  .reviewer { width: 100% !important; }
  .review-text { overflow-wrap: anywhere !important; word-break: break-word !important; }
}

/* =========================================================
   ADMIN - ACTUAL CLASS NAMES USED BY THIS PROJECT
========================================================= */
@media (max-width: 767.98px) {
  .topbar,
  .top { padding: 18px 14px !important; }
  .toprow {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .nav-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .nav-btn { width: 100% !important; min-width: 0 !important; text-align: center; }
  .wrap { width: 100% !important; max-width: 100% !important; padding: 0 14px !important; }
  .stats { grid-template-columns: 1fr !important; gap: 12px !important; }
  .stat { min-width: 0 !important; }
  .panel { width: 100% !important; min-width: 0 !important; }
  .panel-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .search { width: 100% !important; max-width: 100% !important; }
  .query-table { min-width: 760px !important; }
  .modal { width: calc(100vw - 28px) !important; max-width: 600px !important; }
}
@media (max-width: 430px) {
  .nav-actions { grid-template-columns: 1fr !important; }
}

/* =========================================================
   FINAL PRODUCTION MOBILE NAVIGATION
   One hamburger control owns both open and close states.
   The drawer no longer renders a second logo or close icon.
========================================================= */
@media (max-width: 991.98px) {
  body.mobile-menu-open { overflow: hidden !important; }

  .mobile-header.mobile-haeder1 {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    min-height: 68px !important;
    z-index: 1000 !important;
    background: #fff !important;
  }

  .mobile-header-elements {
    min-height: 68px !important;
    padding: 0 2px !important;
  }

  .mobile-nav-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    cursor: pointer !important;
    border: 1px solid #161616 !important;
    background: #fff !important;
    color: #161616 !important;
    z-index: 1002 !important;
    transition: none !important;
  }

  .mobile-nav-icon i {
    font-size: 25px !important;
    line-height: 1 !important;
  }

  .mobile-sidebar.mobile-sidebar1 {
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - 68px) !important;
    min-height: 0 !important;
    padding: 24px 20px 30px !important;
    background: #fff !important;
    z-index: 999 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-sidebar.mobile-sidebar1:not(.mobile-menu-active) {
    pointer-events: none !important;
  }

  /* No duplicate logo / cross inside the drawer. */
  .mobile-sidebar .logosicon-area,
  .mobile-sidebar .menu-close { display: none !important; }

  .mobile-sidebar.mobile-sidebar1 .mobile-nav {
    width: 100% !important;
    margin: 0 !important;
  }

  .mobile-sidebar.mobile-sidebar1 ul.mobile-nav-list {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .mobile-sidebar.mobile-sidebar1 .mobile-nav-list > li {
    width: 100% !important;
    margin: 0 !important;
  }

  .mobile-sidebar.mobile-sidebar1 .mobile-nav-list > li > a,
  .mobile-sidebar.mobile-sidebar1 .mobile-service-toggle,
  .mobile-sidebar.mobile-sidebar1 .mobile-sub-toggle {
    width: 100% !important;
    min-height: 54px !important;
    padding: 13px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #161616 !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  /* Keep exactly one down-arrow control; never show the old generated +/- control. */
  .mobile-sidebar .submenu-button { display: none !important; }
  .mobile-sidebar.mobile-sidebar1 .mobile-service-toggle i,
  .mobile-sidebar.mobile-sidebar1 .mobile-sub-toggle i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 24px !important;
    margin-left: 16px !important;
    font-size: 16px !important;
    transition: transform .2s ease !important;
  }

  .mobile-sidebar .mobile-service-toggle.submenu-opened i,
  .mobile-sidebar .mobile-sub-toggle.submenu-opened i,
  .mobile-sidebar .mobile-service-toggle i.rotated,
  .mobile-sidebar .mobile-sub-toggle i.rotated {
    transform: rotate(180deg) !important;
  }

  .mobile-sidebar.mobile-sidebar1 .mobile-services-menu,
  .mobile-sidebar.mobile-sidebar1 .mobile-inner-menu {
    display: none;
    width: 100% !important;
    padding: 0 0 4px 18px !important;
    margin: 0 !important;
    border-left: 1px solid #e5e5e5;
  }

  .mobile-sidebar.mobile-sidebar1 .mobile-inner-menu a {
    min-height: 42px !important;
    padding: 9px 0 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    color: #4b4b4b !important;
  }

  /* Contact information must not appear inside the open menu. */
  .mobile-sidebar.mobile-sidebar1 .allmobilesection .single-footer { display: none !important; }
  .mobile-sidebar.mobile-sidebar1 .allmobilesection {
    padding: 20px 0 0 !important;
    margin: 0 !important;
  }

  .mobile-sidebar.mobile-sidebar1 .allmobilesection > .header-btn1 {
    width: 100% !important;
    max-width: 293px !important;
    min-height: 54px !important;
    margin: 16px auto 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* =========================================================
   SERVICE / BLOG / CONTACT MOBILE SIDE SPACING
========================================================= */
@media (max-width: 767.98px) {
  /* Service pages: restore horizontal breathing room after page-level reset styles. */
  .hero-inner,
  .hero-features,
  .section-grid,
  .capabilities-section > .container,
  .faq-section > .container,
  .cta-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .hero-copy,
  .hero-visual,
  .section-image,
  .capability-copy,
  .capability-media,
  .capability-points,
  .faq-wrapper,
  .cta-inner {
    min-width: 0 !important;
  }

  .industry-grid,
  .feature-bar,
  .capability-tabs,
  .channel-tabs {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Blog page: content and sidebar never touch the viewport edges. */
  .blog-list-page {
    padding: 20px 15px 55px !important;
  }
  .blog-list-page > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .blog-layout {
    width: 100% !important;
    max-width: 100% !important;
    gap: 20px !important;
  }
  .blog-list-card,
  .blog-side-box {
    width: 100% !important;
    max-width: 100% !important;
  }
  .blog-list-card { padding: 14px !important; }

  /* Contact page: form/card/map get consistent left/right spacing. */
  .contact-section {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .contact-section > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .contact-form-wrapper,
  .contact-card,
  .map {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  .mobile-sidebar.mobile-sidebar1 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero-inner,
  .hero-features,
  .section-grid,
  .capabilities-section > .container,
  .faq-section > .container,
  .cta-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .blog-list-page,
  .contact-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}