/*
 * File: responsive-v2.css
 * Purpose: Centralized responsive overrides for all V2 widgets
 * Breakpoints: 1024px (tablet), 768px (mobile), 480px (small mobile)
 * Date: 2026-04-30
 */

/* ===========================================
   GLOBAL HEADER OVERLAP FIX
   =========================================== */
section.equipment-section,
section.services-v2-header-section,
section.vision-v2-header-section,
section.about-v2-section,
section.project-details-v2-section {
    margin-top: 100px !important;
}

section.projects-v2-section,
section.projects-archive-section,
section.projects-slider-v2-section {
    margin-top: 0 !important;
    padding-inline-start: 40px;
}

/* ===========================================
   TABLET — max-width: 1024px
   =========================================== */
@media (max-width: 1024px) {

    /* --- Header --- */
    .header-container {
        padding: 0 24px;
        height: 70px;
    }

    /* --- Hero --- */
    .hero-section-v2 {
        min-height: 700px;
        padding: 80px 0;
    }

    .hero-v2-container {
        padding: 0 24px;
    }

    .hero-v2-title {
        font-size: 40px;
    }

    .hero-v2-desc {
        font-size: 16px;
    }

    .hero-cta-btn {
        padding: 16px 32px;
        font-size: 15px;
    }

    /* --- Partners --- */
    .partners-section-v2 {
        padding: 48px 0;
    }

    .partner-card {
        width: 200px;
    }

    /* --- About Section --- */
    .about-v2-section {
        padding: 48px 0;
        margin-top: 40px;
    }

    .about-v2-header-wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 40px;
        gap: 20px;
    }

    .about-v2-title {
        font-size: 30px;
    }

    .about-v2-main-row {
        gap: 40px;
    }

    /* --- Stats --- */
    .stats-section-v2 {
        padding: 80px 24px;
    }

    .stats-v2-title {
        font-size: 36px;
    }

    .stats-v2-header {
        margin-bottom: 40px;
    }

    .stats-large-number {
        font-size: 80px;
    }

    /* --- Vision Banner --- */
    .vision-section-v2 {
        padding: 80px 0;
    }

    .vision-v2-title {
        font-size: 36px;
    }

    .vision-v2-desc {
        font-size: 16px;
    }

    /* --- Idea to Impl --- */
    .idea-v2-section {
        padding: 64px 0;
    }

    .idea-v2-header {
        margin-bottom: 48px;
    }

    .idea-v2-main-title {
        font-size: 36px;
    }

    .idea-v2-step {
        margin-bottom: 48px;
        gap: 32px;
    }

    .idea-v2-step-card {
        padding: 32px;
    }

    /* --- Experience --- */
    .exp-v2-section {
        padding: 64px 0;
    }

    .exp-v2-header {
        margin-bottom: 40px;
    }

    .exp-v2-main-title {
        font-size: 36px;
    }

    /* --- Features --- */
    .feat-v2-section {
        padding: 80px 0;
    }

    .feat-v2-header {
        margin-bottom: 48px;
    }

    .feat-v2-title {
        font-size: 36px;
    }

    /* --- QA FAQ --- */
    .qa-v2-section {
        padding: 80px 0;
    }

    .qa-v2-grid {
        gap: 48px;
    }

    /* --- Contact Home --- */
    .contact-v2-welcome {
        padding: 80px 24px;
    }

    .contact-v2-welcome-title {
        font-size: 48px;
    }

    .contact-v2-form-screen {
        padding: 80px 0;
    }

    .contact-v2-grid {
        gap: 48px;
    }

    .contact-v2-title {
        font-size: 36px;
    }

    .contact-v2-form-wrapper {
        padding: 48px;
        border-radius: 32px;
    }

    /* --- Footer --- */
    .footer-v2 {
        padding: 80px 0 40px;
    }

    .footer-v2-container {
        padding: 0 24px;
    }

    .footer-v2-top-grid {
        gap: 40px;
        margin-bottom: 60px;
    }

    .footer-v2-slogan {
        font-size: 22px;
    }

    /* --- Leadership --- */
    .leader-v2-section {
        padding: 80px 0;
    }

    .leader-v2-message-text {
        font-size: 16px;
    }

    .leader-v2-info-card {
        padding: 36px;
    }

    /* --- Values --- */
    .values-v2-section {
        padding: 80px 0;
    }

    .values-v2-main-title {
        font-size: 36px;
    }

    /* --- Contact Page --- */
    .contact-v2-section-page {
        padding: 48px 0;
    }

    .contact-v2-main-title {
        font-size: 40px;
    }

    .contact-v2-main-row {
        gap: 48px;
    }

    /* --- Equipment --- */
    .equipment-section {
        padding: 64px 0;
    }

    /* --- Vision Slider --- */
    .vision-slider-widget.vision-v2-slider-modern {
        height: 680px;
        margin: 40px 0;
        border-radius: 32px;
    }

    /* --- Vision Content --- */
    .vision-v2-section {
        padding: 64px 0;
    }

    /* --- Projects Archive --- */
    .projects-v2-section {
        padding: 64px 0;
    }

    .projects-v2-title {
        font-size: 36px;
    }

    /* --- How We Serve --- */
    .hws-v2-section {
        padding: 80px 0;
    }

    .hws-v2-title {
        font-size: 36px;
    }

    /* --- Services Header --- */
    .services-v2-header-section {
        padding: 80px 0;
    }
}


/* ===========================================
   MOBILE — max-width: 768px
   =========================================== */
@media (max-width: 768px) {

    /* --- Header --- */
    .header-container {
        padding: 0 16px;
        height: 64px;
    }

    .logo-wrapper {
        height: 32px;
    }

    .brand-text {
        font-size: 18px;
    }

    /* --- Hero --- */
    .hero-section-v2 {
        min-height: 550px;
        padding: 60px 0;
    }

    .hero-v2-container {
        padding: 0 16px;
    }

    .hero-v2-title {
        font-size: 28px;
    }

    .hero-v2-desc {
        font-size: 15px;
    }

    .hero-cta-btn {
        padding: 14px 28px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }

    .hero-v2-actions {
        padding-top: 24px;
    }

    .hero-glass-badge {
        font-size: 13px;
    }

    .hero-scroll-indicator {
        display: none;
    }

    /* --- Partners --- */
    .partners-section-v2 {
        padding: 32px 0;
    }

    .partners-v2-container {
        padding: 0 16px;
    }

    .partner-card {
        width: 160px;
        padding: 8px;
    }

    .partner-card-inner {
        height: 90px;
        padding: 12px;
        border-radius: 8px;
    }

    /* --- About Section --- */
    .about-v2-section {
        padding: 40px 0;
        margin-top: 30px;
    }

    .about-v2-container {
        padding: 0 16px;
    }

    .about-v2-header-wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: start !important;
        margin-bottom: 40px;
        gap: 24px;
    }

    .about-v2-title {
        font-size: 26px;
        padding-inline-start: 40px;
    }

    .about-v2-description {
        font-size: 15px;
        margin-bottom: 24px;
        padding-inline-start: 40px;
    }

    .about-v2-subtitle-wrapper {
        padding-inline-start: 40px;
    }

    .about-v2-heading-box h2 {
        font-size: 26px;
    }

    .about-v2-description {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .about-v2-bento {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 24px;
    }

    .about-v2-bento-card {
        padding: 20px;
    }

    .about-v2-main-row {
        gap: 32px;
    }

    .about-v2-badge-top {
        max-width: 100%;
    }

    /* --- Stats --- */
    .stats-section-v2 {
        padding: 48px 16px;
    }

    .stats-v2-title {
        font-size: 28px;
    }

    .stats-v2-header {
        margin-bottom: 32px;
    }

    .stats-large-number {
        font-size: 56px;
        margin-top: 16px;
    }

    .stats-large-label {
        font-size: 18px;
    }

    .stats-v2-card {
        padding: 24px;
    }

    .stats-vert-number {
        font-size: 36px;
    }

    .stats-small-number {
        font-size: 36px;
    }

    .stats-v2-banner {
        height: 180px;
    }

    .stats-banner-overlay {
        padding: 16px;
    }

    .stats-banner-text {
        font-size: 14px;
    }

    /* --- Vision Banner --- */
    .vision-section-v2 {
        padding: 60px 0;
        min-height: 400px;
    }

    .vision-v2-content-container {
        padding: 0 16px;
    }

    .vision-v2-title {
        font-size: 28px;
    }

    .vision-v2-desc {
        font-size: 15px;
        margin-bottom: 32px;
    }

    .vision-v2-btn {
        padding: 16px 32px;
        font-size: 15px;
        width: 100%;
        justify-content: center;
    }

    .vision-v2-glass-circle {
        width: 100px;
        height: 100px;
        margin-bottom: 24px;
    }

    .vision-v2-glass-text {
        font-size: 36px;
    }

    /* --- Idea to Impl --- */
    .idea-v2-section {
        padding: 48px 0;
    }

    .idea-v2-container {
        padding: 0 16px;
    }

    .idea-v2-header {
        margin-bottom: 32px;
    }

    .idea-v2-main-title {
        font-size: 28px;
    }

    .idea-v2-step {
        margin-bottom: 32px;
        gap: 24px;
    }

    .idea-v2-step-card {
        padding: 24px 40px;
        padding-inline-start: 40px;
    }

    .idea-v2-step-title {
        font-size: 20px;
    }

    .idea-v2-step-number {
        font-size: 80px;
    }

    .idea-v2-step-img-col {
        width: 100%;
    }

    .idea-v2-header-btn {
        padding: 14px 28px;
        font-size: 14px;
    }

    .idea-v2-path {
        display: none;
    }

    /* --- Experience --- */
    .exp-v2-section {
        padding: 48px 0;
    }

    .exp-v2-container {
        padding: 0 16px;
    }

    .exp-v2-header {
        margin-bottom: 32px;
        gap: 20px;
    }

    .exp-v2-main-title {
        font-size: 28px;
    }

    .exp-v2-nav-btn {
        width: 44px;
        height: 44px;
    }

    .exp-v2-overlay {
        padding: 20px;
    }

    .exp-v2-card-title {
        font-size: 18px;
    }

    .exp-v2-pagination-wrapper {
        margin-top: 32px;
    }

    /* --- Features --- */
    .feat-v2-section {
        padding: 48px 0;
    }

    .feat-v2-container {
        padding: 0 16px;
    }

    .feat-v2-header {
        margin-bottom: 32px;
    }

    .feat-v2-title {
        font-size: 28px;
    }

    .feat-v2-card-inner {
        padding: 32px 24px;
        border-radius: 24px;
    }

    .feat-v2-card-title {
        font-size: 20px;
    }

    .feat-v2-card-desc {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .feat-v2-header-btn {
        padding: 14px 24px;
        font-size: 14px;
    }

    /* --- QA FAQ --- */
    .qa-v2-section {
        padding: 48px 0;
    }

    .qa-v2-container {
        padding: 0 16px;
    }

    .qa-v2-grid {
        gap: 32px;
    }

    /* KEY FIX: Add margin-bottom to the info column when stacked */
    .qa-v2-info-col {
        position: static;
        margin-bottom: 8px;
        padding-inline-start: 40px;
    }

    .qa-v2-title-box,
    .qa-v2-title-box h2,
    .qa-v2-title-box .section-title {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .qa-v2-acc-header {
        padding: 20px;
        gap: 16px;
    }

    .qa-v2-acc-question {
        font-size: 16px;
    }

    .qa-v2-acc-content {
        padding-inline-start: 56px;
        padding-inline-end: 20px;
    }

    .qa-v2-acc-toggle {
        width: 36px;
        height: 36px;
    }

    .qa-v2-quote-btn,
    .qa-v2-quote-toggle-btn {
        padding: 14px 28px;
        font-size: 14px;
        margin-top: 24px;
        width: 100%;
        justify-content: center;
    }

    .qa-v2-form-card {
        padding: 24px;
        border-radius: 24px;
    }

    .qa-v2-form-header h3 {
        font-size: 24px;
    }

    /* --- Contact Home --- */
    .contact-v2-section {
        min-height: auto;
    }

    .contact-v2-welcome {
        padding: 60px 16px;
    }

    .contact-v2-welcome-title {
        font-size: 32px;
        margin-bottom: 32px;
    }

    .contact-v2-btn-glass {
        padding: 18px 32px;
        font-size: 16px;
    }

    .contact-v2-form-screen {
        padding: 48px 0;
    }

    .contact-v2-container {
        padding: 0 16px;
    }

    .contact-v2-grid {
        gap: 32px;
    }

    .contact-v2-title {
        font-size: 28px;
    }

    .contact-v2-desc {
        font-size: 15px;
        margin-bottom: 32px;
    }

    .contact-v2-form-wrapper {
        padding: 28px;
        border-radius: 24px;
    }

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

    .contact-v2-info-icon {
        width: 44px;
        height: 44px;
    }

    /* --- Footer --- */
    .footer-v2 {
        padding: 48px 0 24px;
    }

    .footer-v2-container {
        padding: 0 16px;
    }

    .footer-v2-top-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 40px;
    }

    .footer-v2-top-grid>div {
        padding: 10px 0;
    }

    .footer-v2-col-about {
        grid-column: span 1;
        text-align: center;
    }

    .footer-v2-social {
        justify-content: center;
    }

    .footer-v2-slogan {
        font-size: 20px;
        margin-bottom: 32px;
    }

    .footer-v2-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* --- Leadership --- */
    .leader-v2-section {
        padding: 48px 0;
    }

    .leader-v2-container {
        padding: 0 16px;
    }

    .leader-v2-row {
        gap: 32px;
    }

    .leader-v2-message-text {
        font-size: 15px;
    }

    .leader-v2-text-wrapper {
        padding-right: 20px;
    }

    .leader-v2-info-card {
        padding: 24px;
    }

    .leader-v2-info-title {
        font-size: 16px;
        margin-bottom: 20px;
    }

    /* --- Values --- */
    .values-v2-section {
        padding: 60px 0;
    }

    .values-v2-container {
        padding: 0 24px;
    }

    .values-v2-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 48px;
    }

    .values-v2-content-part {
        max-width: 600px;
    }

    .values-v2-main-title {
        font-size: 32px;
        margin-bottom: 24px;
    }

    .values-v2-description {
        font-size: 17px;
        margin: 0 auto;
    }

    .values-v2-divider {
        justify-content: center;
        margin: 32px 0;
    }

    .values-v2-stats-part {
        width: 100%;
    }

    .values-v2-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .values-v2-stat-card {
        padding: 24px 40px;
        padding-inline-start: 40px;
        gap: 15px;
        min-height: auto;
    }

    .values-v2-stat-number {
        font-size: 32px;
    }

    /* --- Contact Page --- */
    .contact-v2-section-page {
        padding: 40px 0;
    }

    .contact-v2-header-wrapper {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 32px;
        gap: 20px;
    }

    .contact-v2-main-title {
        font-size: 32px;
    }

    .contact-v2-main-row {
        flex-direction: column;
        gap: 32px;
        margin-bottom: 48px;
    }

    .contact-v2-bento-info {
        grid-template-columns: 1fr;
    }

    .contact-v2-card-full {
        grid-column: span 1;
    }

    .contact-v2-card {
        padding: 24px;
        border-radius: 20px;
    }

    /* --- Equipment --- */
    .equipment-section {
        padding: 48px 0;
    }

    .equipment-category-group {
        margin-bottom: 48px;
    }

    .category-header {
        margin-bottom: 24px;
    }

    .equipment-list-title {
        font-size: 24px;
    }

    .equipment-item-title {
        font-size: 20px;
    }

    .equipment-right-column {
        padding: 15px 40px 24px;
        padding-inline-start: 40px;
    }

    .equipment-image-wrapper {
        border-radius: 16px;
    }

    /* --- Vision Slider --- */
    .vision-slider-widget.vision-v2-slider-modern {
        height: 550px;
        border-radius: 20px;
        margin: 30px 0;
    }

    /* --- Vision Content --- */
    .vision-v2-section {
        padding: 48px 0;
    }

    .vision-v2-title-wrapper h3 {
        font-size: 28px;
    }

    .vision-v2-list li {
        font-size: 16px;
        margin-bottom: 12px;
        padding-inline-start: 40px;
    }
    
    .vision-v2-title-wrapper {
        padding-inline-start: 40px;
    }

    .vision-v2-image-wrapper {
        border-radius: 20px;
    }

    /* --- Projects Archive --- */
    .projects-v2-section {
        padding: 48px 0;
    }

    .projects-v2-title {
        font-size: 28px;
    }

    .projects-v2-container {
        padding: 0 16px;
    }

    /* --- How We Serve --- */
    .hws-v2-section {
        padding: 48px 0;
    }

    .hws-v2-title {
        font-size: 28px;
    }

    .hws-v2-container {
        padding: 0 16px;
    }

    /* --- Services Header --- */
    .services-v2-header-section {
        padding: 48px 0;
    }

    /* --- Section margin-top fix for fixed header --- */
    section.equipment-section,
    section.services-v2-header-section,
    section.vision-v2-header-section,
    section.about-v2-section,
    section.project-details-v2-section {
        margin-top: 140px !important;
    }

    /* --- Vision Header V2 --- */
    .vision-v2-header-section {
        padding: 48px 0;
    }

    /* --- About V2 Badge --- */
    .about-v2-badge-col {
        max-width: 100%;
    }

    /* --- Floating WhatsApp --- */
    .whatsapp-v2-float {
        bottom: 20px;
        inset-inline-end: 16px;
    }

    .whatsapp-v2-float a {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}


/* ===========================================
   SMALL MOBILE — max-width: 480px
   =========================================== */
@media (max-width: 480px) {

    /* --- Hero --- */
    .hero-section-v2 {
        min-height: 480px;
        padding: 48px 0;
    }

    .hero-v2-title {
        font-size: 24px;
    }

    .hero-v2-desc {
        font-size: 14px;
    }

    .hero-glass-badge {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* --- Stats --- */
    .stats-v2-title {
        font-size: 24px;
    }

    .stats-large-number {
        font-size: 42px;
    }

    .stats-vert-number,
    .stats-small-number {
        font-size: 30px;
    }

    /* --- Vision --- */
    .vision-v2-title {
        font-size: 24px;
    }

    .vision-v2-glass-circle {
        width: 80px;
        height: 80px;
    }

    .vision-v2-glass-text {
        font-size: 28px;
    }

    /* --- Idea to Impl --- */
    .idea-v2-main-title {
        font-size: 24px;
    }

    .idea-v2-step-card {
        padding: 20px;
    }

    .idea-v2-step-number {
        font-size: 60px;
    }

    .idea-v2-step-title {
        font-size: 18px;
    }

    /* --- Experience --- */
    .exp-v2-main-title {
        font-size: 24px;
    }

    .exp-v2-card-title {
        font-size: 16px;
    }

    /* --- Features --- */
    .feat-v2-title {
        font-size: 24px;
    }

    .feat-v2-card-inner {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .feat-v2-card-title {
        font-size: 18px;
    }

    /* --- QA FAQ --- */
    .qa-v2-title-box,
    .qa-v2-title-box h2,
    .qa-v2-title-box .section-title {
        font-size: 24px;
    }

    .qa-v2-acc-header {
        padding: 16px;
        gap: 12px;
    }

    .qa-v2-acc-question {
        font-size: 14px;
    }

    .qa-v2-acc-content {
        padding-inline-start: 44px;
        padding-inline-end: 16px;
    }

    .qa-v2-acc-inner {
        font-size: 14px;
    }

    .qa-v2-acc-num {
        width: 24px;
        font-size: 12px;
    }

    /* --- Contact --- */
    .contact-v2-welcome-title {
        font-size: 26px;
    }

    .contact-v2-title {
        font-size: 24px;
    }

    .contact-v2-btn-glass {
        padding: 14px 24px;
        font-size: 14px;
    }

    .contact-v2-form-wrapper {
        padding: 20px;
        border-radius: 20px;
    }

    .contact-v2-submit-btn {
        font-size: 15px;
        padding: 16px;
    }

    /* --- Footer --- */
    .footer-v2-slogan {
        font-size: 18px;
    }

    .footer-v2-wa-inner {
        padding: 14px;
        font-size: 14px;
    }

    .footer-v2-social-btn {
        width: 40px;
        height: 40px;
    }

    /* --- Leadership --- */
    .leader-v2-message-text {
        font-size: 14px;
    }

    .leader-v2-info-card {
        padding: 20px;
    }

    .leader-v2-text-wrapper {
        padding-right: 16px;
    }

    /* --- Values --- */
    .values-v2-main-title {
        font-size: 24px;
    }

    .values-v2-stat-number {
        font-size: 24px;
    }

    .values-v2-stat-card {
        padding: 20px;
    }

    /* --- Contact Page --- */
    .contact-v2-main-title {
        font-size: 26px;
    }

    .contact-v2-card {
        padding: 20px;
    }

    /* --- Equipment --- */
    .equipment-list-title {
        font-size: 20px;
    }

    .equipment-item-title {
        font-size: 18px;
    }

    .equipment-description {
        font-size: 14px;
    }

    /* --- Vision Slider --- */
    .vision-slider-widget.vision-v2-slider-modern {
        height: 480px;
        border-radius: 16px;
    }

    /* --- Vision Content --- */
    .vision-v2-title-wrapper h3 {
        font-size: 24px;
    }

    .vision-v2-list li {
        font-size: 15px;
    }

    /* --- Projects Archive --- */
    .projects-v2-title {
        font-size: 24px;
    }

    /* --- How We Serve --- */
    .hws-v2-title {
        font-size: 24px;
    }

    /* --- Services Header --- */
    .about-v2-title {
        font-size: 22px;
    }

    /* --- QA Form --- */
    .qa-v2-form-header h3 {
        font-size: 20px;
    }

    .qa-v2-form-submit {
        font-size: 15px;
        padding: 16px;
    }

    /* --- General utility --- */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}