/* =========================================
   SUNARTH MASTER LAPTOP RESPONSIVE LAYOUT
   ========================================= */

@media (min-width: 992px) and (max-width: 1440px) {

    .container,
    .split-inner,
    .filter-container,
    .series-grid,
    .footer-grid {
        width: 100%;
        max-width: 1280px !important;
        margin: 0 auto !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .navbar {
        padding: 16px 32px !important;
    }

    .nav-logo-img {
        height: 52px !important;
    }

    .nav-links {
        gap: 20px !important;
    }

    .nav-links a {
        font-size: 0.95rem !important;
    }

    .persistent-app-btn,
    .download-btn {
        padding: 10px 18px !important;
        font-size: 0.88rem !important;
    }

    .hero,
    .corp-hero,
    .careers-hero,
    .showcase-section,
    .hero-section {
        min-height: auto !important;
    }

    .hero {
        padding-top: 120px !important;
        padding-bottom: 80px !important;
    }

    .hero-content {
        max-width: 560px !important;
        z-index: 10 !important;
    position: relative;
    top: -35px !important;
}

    }

    .hero h1 {
        font-size: 3.8rem !important;
        line-height: 1.08 !important;
    }

    .hero p {
        font-size: 1.02rem !important;
        max-width: 520px !important;
    }

    .hero-buttons {
        flex-wrap: wrap !important;
        gap: 12px !important;
    margin-bottom: 18px !important;
}
    

  .hero-upper-layer-img {
    position: absolute;
    right: -2%;
    bottom: -2%;
    top: 12%;
    left: 50%;

    height: 85vh !important;
    width: auto !important;

    max-width: none !important;
    max-height: none !important;

    z-index: 1;

    animation: floatCar 5s ease-in-out infinite alternate;

    filter: drop-shadow(0 35px 60px rgba(0,0,0,0.16));
}
        


   .sunarth-horizontal-widget {

    max-width: 620px !important;

    padding: 14px 18px !important;

    border-radius: 22px !important;

    backdrop-filter: blur(18px);

    background: rgba(220, 255, 240, 0.35) !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.05),
        inset 0 0 0 1px rgba(255,255,255,0.35);

    margin-top: 8px !important;
}

   .widget-main-content {
    gap: 10px !important;
}

    .stats-wrapper {
        gap: 8px !important;
    }

    .stat-number {

    font-size: 0.95rem !important;

    letter-spacing: -0.3px;

    line-height: 1;
}

   .stat-label {

    font-size: 0.62rem !important;

    opacity: 0.85;
}

.widget-footer {

    padding-top: 6px !important;

    font-size: 0.55rem !important;
}

    .section-title,
    .page-header h1,
    .corp-hero h1,
    .careers-hero h1,
    .hero-title {
        font-size: 3rem !important;
        line-height: 1.1 !important;
    }

    .hero-subtitle,
    .page-header p,
    .careers-hero p {
        font-size: 1rem !important;
    }

    .stats-section,
    .about-section,
    .services-section,
    .products-section,
    .app-promo-section,
    .tech-section,
    .quote-wrap,
    .vision-section,
    .mission-section,
    .application-section {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    .split-inner {
        gap: 40px !important;
    }

    .vm-heading,
    .slide-text h2 {
        font-size: 2.3rem !important;
    }

    .slide-text p {
        font-size: 1rem !important;
    }

    .slides-container {
        height: 520px !important;
    }

    .slide {
        gap: 30px !important;
    }

    .watermark-num {
        font-size: 10rem !important;
        top: -50px !important;
    }

    .slide .phone-frame {
        width: 250px !important;
        height: 510px !important;
    }

    .timeline-tabs {
        gap: 10px !important;
    }

    .tab-btn {
        padding: 10px 18px !important;
        font-size: 0.85rem !important;
    }

    .roi-box {
        height: 580px !important;
    }

    .scrollable-col {
        padding: 20px !important;
    }

    .series-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 28px !important;
    }

    .series-card {
        padding: 30px !important;
    }

    .series-img-box {
        height: 200px !important;
    }

    .modal-box {
        max-width: 900px !important;
        height: 540px !important;
    }

    .sidebar {
        width: 320px !important;
    }

    .form-container {
        padding: 40px !important;
    }

    .video-section {
        height: 480px !important;
    }

    .team-card {
        flex: 0 0 clamp(240px, 28%, 280px) !important;
    }

    .footer-grid {
        gap: 24px !important;
    }



/* =========================================
   1366px SMALL LAPTOP OPTIMIZATION
   ========================================= */

@media (min-width: 992px) and (max-width: 1366px) {

    .navbar {
        padding: 14px 24px !important;
    }

    .nav-links {
        gap: 16px !important;
    }

    .nav-links a {
        font-size: 0.88rem !important;
    }

    .persistent-app-btn,
    .download-btn {
        padding: 8px 15px !important;
        font-size: 0.82rem !important;
    }

    .hero {
        padding-top: 110px !important;
    }

    .hero-content {
        max-width: 500px !important;
    }

    .hero h1 {
        font-size: 3.3rem !important;
        line-height: 1.05 !important;
    }

    .hero p {
        font-size: 0.95rem !important;
    }

    .hero-upper-layer-img {
        width: 44% !important;
        left: 46% !important;
        bottom: 20% !important;
        top: 10%;
    }

   .sunarth-horizontal-widget {

    width: 700px !important;
    bottom: 25%;

    max-width: 630px !important;

    padding: 18px 24px !important;

    border-radius: 24px !important;

    background: rgba(220, 255, 240, 0.38) !important;

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,0.25);

    box-shadow:
        0 12px 35px rgba(0,0,0,0.05),
        inset 0 0 0 1px rgba(255,255,255,0.22);
}
.widget-main-content {

    display: flex;

    align-items:left;

    justify-content: space-between;

    gap: 8px !important;
}
.stats-wrapper {

    gap: 5px !important;
}
.stat-content {

    gap: 2px !important;
}

.live-pulse-container {

    padding-right: 8px !important;
}

    .stat-number {
        font-size: 0.92rem !important;
    }

    .stat-label {
        font-size: 0.6rem !important;
    }

    .section-title,
    .page-header h1,
    .corp-hero h1,
    .careers-hero h1,
    .hero-title {
        font-size: 2.6rem !important;
    }

    .slide-text h2,
    .vm-heading {
        font-size: 2rem !important;
    }

    .slides-container {
        height: 470px !important;
    }

    .slide .phone-frame {
        width: 220px !important;
        height: 450px !important;
    }

    .timeline-tabs {
        padding: 8px !important;
    }

    .tab-btn {
        padding: 8px 15px !important;
        font-size: 0.8rem !important;
    }

    .series-grid {
        gap: 22px !important;
    }

    .series-card {
        padding: 24px !important;
    }

    .series-name {
        font-size: 1.3rem !important;
    }

    .modal-box {
        height: 500px !important;
    }

    .sidebar {
        width: 290px !important;
    }

    .form-container {
        padding: 32px !important;
    }

    .video-section {
        height: 420px !important;
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
    }
}


/* =========================================
   HEIGHT FIXES FOR SHORT LAPTOPS
   ========================================= */

@media (max-height: 800px) and (min-width: 992px) {

    .hero {
        min-height: auto !important;
        padding-top: 110px !important;
        padding-bottom: 60px !important;
    }

    .hero h1 {
        font-size: 3rem !important;
    }

    .hero-upper-layer-img {
        width: 62% !important;
        bottom: 2% !important;
    }

    .roi-box {
        height: 500px !important;
    }

    .slides-container {
        height: 430px !important;
    }

    .slide .phone-frame {
        width: 210px !important;
        height: 420px !important;
    }

    .modal-box {
        height: 85vh !important;
    }

    .showcase-section,
    .careers-hero,
    .corp-hero,
    .hero-section {
        padding-top: 100px !important;
    }
}

/* =========================================
   HERO BUTTON SIZE FIX
   ========================================= */

.hero-buttons {

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px !important;

    margin-bottom: 18px !important;
}

.hero-buttons .btn,
.hero-buttons a {

    padding: 12px 24px !important;

    font-size: 0.92rem !important;

    border-radius: 18px !important;

    min-width: auto !important;

    height: auto !important;

    white-space: nowrap !important;
}


/* VIEW LOCATION BUTTON */

.hero-buttons .btn-outline {

    padding: 10px 22px !important;

    font-size: 0.9rem !important;
}




@media (max-width: 1366px) {

    .hero-buttons {

        gap: 10px !important;
    }

    .hero-buttons .btn,
    .hero-buttons a {

        padding: 10px 20px !important;

        font-size: 0.85rem !important;
    }

    .hero-buttons .btn-outline {

        padding: 9px 18px !important;

        font-size: 0.82rem !important;
    }
}