@media (max-width: 1400px) {
    body,
    .banner-area,
    .banner-area div {
        height: auto;
    }
    .it-banner {
        height: auto;
        min-height: 100vh;
        padding-top: 10px;
        padding-bottom: 80px;
    }
    .banner-area .double-items {
        padding-top: 100px;
        padding-bottom: 60px;
    }
    .banner-area.banner-style-three .double-items {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .it-banner .double-items{
        padding-top: 35px;
    }

}
@media (max-width: 1366px) {
    .container,
    .container-lg, 
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1140px;
    }
    .container-full {
        max-width: 1140px;
        width: 95%;
        padding: 0 15px;
    }
    .container-medium {
        max-width: 1140px;
        width: 95%;
        padding: 0 15px;
    }
    .container-fill {
        max-width: 1140px;
        width: 95%;
        padding: 0 15px;
    }
}
@media (max-width: 1366px) {
    .advanced-features-area .af-items .d-flex {
        gap: 20px;
    }
    .advanced-features-area .af-items .single-item {
        flex: 1 1 45%;
    }
    .our-features-area .feature-items .row {
        align-items: flex-start;
    }
    .innercolumn {
        top: 100px;
    }
    .features-style-four-area .feature-style-four h4 {
        font-size: 13px;
        min-height: 45px;
    }
    .software-feature-area .left-info {
        padding-right: 40px;
    }
    .software-feature-area .features-list {
        padding-left: 40px;
    }
    .about-area .thumb {
        padding-right: 40px;
        margin-left: -10%;
    }
    .advanced-features-area1 .af-items .item {
        padding: 25px 30px;
    }
    .process-area .thumb img {
        margin-left: -10%;
        max-width: 110%;
    }
}


/* ================================================================
   5. DEVELOPER PAGE (developer.ejs)
   ================================================================ */

@media (max-width: 1366px) {

    /* Hero heading */
    .double-items .info h1 {
        font-size: 38px;
        line-height: 54px;
        padding: 0 30px;
    }

    .double-items .info p.p1 {
        font-size: 17px;
        line-height: 26px;
        padding: 0 60px;
        max-width: 820px;
    }

    /* Key points — 5 cols overflows at 1280px, reduce to 3 */
    .key-points {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }

    .key-points li {
        width: calc(33.333% - 12px);
        padding: 18px 20px;
        flex-shrink: 0;
    }

    /* Solutions section cards */
    .solution-card {
        padding: 40px 30px;
    }

    /* How It Works steps — 4 steps in a row gets tight */
    .steps-list {
        gap: 16px;
    }

    .step-item {
        padding: 18px 14px;
    }

    .step-card h3 {
        font-size: 16px;
    }

    .step-card p {
        font-size: 13px;
    }

    /* Arrow connectors overflow — hide at this size */
    .step-item:not(:last-child)::after {
        display: none;
    }

    /* Benefits grid — 3 cols at 1280px effective is fine */
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Developer types section */
    .developer-types-section .section-title {
        font-size: 32px;
        line-height: 44px;
    }

    .developer-types-section .section-subtitle {
        font-size: 16px;
    }

    .rowBox {
        padding: 30px;
    }

    /* Developer illustration */
    .developer-illustration {
        padding: 20px;
    }

    /* Custom engine notice */
    .custom-engine-notice {
        padding: 20px;
        gap: 12px;
    }

    /* CTA section */
    .cta-title {
        font-size: 28px;
        line-height: 42px;
    }

    .cta-subtitle {
        font-size: 16px;
    }

    .btn-cta {
        padding: 8px 40px;
    }
}


/* ================================================================
   6. BRANDS PAGE (brands.ejs)
   ================================================================ */

@media (max-width: 1366px) {

    /* Brand hero heading */
    .double-items .info h1.brand {
        font-size: 36px;
        line-height: 50px;
        padding: 0 20px;
        max-width: 840px;
        margin-bottom: 25px;
    }

    /* Engamix features card */
    .engamix-card {
        padding: 26px 30px 40px;
    }

    /* Cards grid — 4 cols shrinks fine but reduce gap */
    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .engamix-featues-section .feature-card {
        padding: 20px 16px 24px;
    }

    .feature-card h3 {
        font-size: 15px;
        padding-right: 0;
    }

    /* Brand illustration card */
    .brand-illustration img {
        border-width: 20px;
        border-radius: 30px;
    }

    /* Custom engine notice brand variant */
    .custom-engine-notice.brand {
        width: 280px;
        height: auto;
        padding: 16px;
    }

    /* Who its for section */
    .who-for .list li {
        font-size: 16px;
        line-height: 24px;
    }

    /* What You Get section */
    .developer-tags {
        gap: 10px;
    }

    .dev-tag {
        padding: 7px 16px;
        font-size: 13px;
    }
}


/* ================================================================
   7. PRICING PAGE (pricing.ejs)
   ================================================================ */

@media (max-width: 1366px) {

    /* Pricing cards — 4 cols at 1280px effective needs tighter padding */
    .pricing-card {
        padding: 16px 14px;
    }

    .pricing-card.popular {
        transform: scale(1.03);
    }

    .pricing-card.popular:hover {
        transform: scale(1.06) translateY(-10px);
    }

    .plan-price {
        font-size: 2.8rem;
    }

    .plan-price-trial {
        font-size: 1.6rem;
    }

    /* Features grid on pricing page — 3 cols is fine */
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    /* Toggle switch */
    .toggle-switch span {
        padding: 14px 32px;
        font-size: 1rem;
    }
}


/* ================================================================
   8. NAVIGATION — ensure navbar doesn't overflow
   ================================================================ */

@media (max-width: 1366px) {

    /* Reduce navbar link spacing if using validnavs */
    nav.navbar .navbar-nav > li > a {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 14px;
    }
}


/* ================================================================
   9. TYPOGRAPHY SCALE — slightly reduce large headings
   ================================================================ */

@media (max-width: 1366px) {

    h1 { font-size: 36px; }
    h2 { font-size: 32px; }
    h3 { font-size: 24px; }

    .banner-area h2 {
        font-size: 42px;
    }

    .section-title {
        font-size: 28px;
        line-height: 42px;
    }
    .section-subtitle{
        margin-bottom: 40px;
    }
    .area-title {
        font-size: 34px;
    }

    /* Developer page h1 override */
    .double-items .info h1 {
        font-size: 36px;
        line-height: 50px;
    }
}


/* ================================================================
   10. SPECIFIC OVERFLOW FIXES FROM HTML ANALYSIS
   ================================================================ */

@media (max-width: 1366px) {

    /* software-feature left thumb */
    .about-area .about-items .thumb {
        padding-right: 40px;
        margin-bottom: 40px;
        margin-left: -5%;
    }

    /* process area thumb overlap */
    .process-area .thumb img {
        margin-left: 0;
        max-width: 100%;
    }

    /* advanced-features1 (dark lifecycle section) */
    .advanced-features-area1 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    /* engamix features section negative margin-top */
    .engamix-featues-section {
        margin-top: -60px;
    }

    /* FAQ accordion */
    .accordion-button {
        font-size: 1rem;
        padding: 14px 18px;
    }

    /* btn-cta full width on tight layouts */
    .cta-buttons {
        gap: 12px;
    }

    /* Breadcrumb area */
    .breadcrumb-area h1 {
        font-size: 32px;
    }
}


/* ================================================================
   11. 125% WINDOWS DISPLAY SCALING FIX
   Target: DPR = 1.25 (Windows Settings → Display → Scale = 125%)
   At 125% scaling on a 1366px monitor, logical width = ~1093px
   At 125% scaling on a 1920px monitor, logical width = ~1536px
   Font-size formula: desired_size ÷ 1.25
   e.g. 60px target → set 48px so browser renders ~60px visually
   ================================================================ */

@media
    (-webkit-device-pixel-ratio: 1.25),
    (resolution: 120dpi),
    (resolution: 1.25dppx) {

    /* --- Typography scale correction --- */
    h1 { font-size: 29px; }   /* 36 ÷ 1.25 */
    h2 { font-size: 26px; }   /* 32 ÷ 1.25 */
    h3 { font-size: 19px; }   /* 24 ÷ 1.25 */

    /* Your specific 60px element — fix for 128px blowup */
    .your-target-element {
        font-size: 48px;       /* 60 ÷ 1.25 = 48 → renders visually as ~60px */
    }

    .banner-area h2 {
        font-size: 34px;       /* 42 ÷ 1.25 */
    }

    .section-title {
        font-size: 22px;       /* 28 ÷ 1.25 */
        line-height: 34px;
    }

    .area-title {
        font-size: 27px;       /* 34 ÷ 1.25 */
    }

    .double-items .info h1 {
        font-size: 29px;       /* 36 ÷ 1.25 */
        line-height: 40px;
    }

    .double-items .info p.p1 {
        font-size: 18px;       /* 17 ÷ 1.25 */
        line-height: 21px;
    }

    /* --- Hero / Banner --- */
    .cta-title {
        font-size: 22px;       /* 28 ÷ 1.25 */
        line-height: 34px;
    }

    .cta-subtitle {
        font-size: 13px;
    }

    .developer-types-section .section-title {
        font-size: 26px;       /* 32 ÷ 1.25 */
        line-height: 35px;
    }

    /* --- Pricing --- */
    .plan-price {
        font-size: 2.2rem;     /* 2.8 ÷ 1.25 */
    }

    .plan-price-trial {
        font-size: 1.3rem;     /* 1.6 ÷ 1.25 */
    }

    /* --- Navbar --- */
    nav.navbar .navbar-nav > li > a {
        font-size: 11px;       /* 14 ÷ 1.25 */
        padding-left: 10px;
        padding-right: 10px;
    }

    /* --- Feature card heading --- */
    .feature-card h3 {
        font-size: 12px;       /* 15 ÷ 1.25 */
    }

    .step-card h3 {
        font-size: 13px;       /* 16 ÷ 1.25 */
    }

    .step-card p {
        font-size: 10px;       /* 13 ÷ 1.25 */
    }

    /* --- Tags & buttons --- */
    .dev-tag {
        font-size: 10px;       /* 13 ÷ 1.25 */
        padding: 6px 13px;
    }

    .toggle-switch span {
        font-size: 0.8rem;     /* 1rem ÷ 1.25 */
        padding: 11px 26px;
    }

    .accordion-button {
        font-size: 0.8rem;     /* 1rem ÷ 1.25 */
    }

    .breadcrumb-area h1 {
        font-size: 26px;       /* 32 ÷ 1.25 */
    }

    /* --- Containers — tighten on 125% scaled 1920px screens --- */
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1140px;
    }

    .container-full,
    .container-medium,
    .container-fill {
        max-width: 1140px;
        width: 95%;
        padding: 0 15px;
    }
}

/* ================================================================
   11b. 125% SCALING + min-width 1366px screens only
   (Targets large monitors at 125% — e.g. 1920px scaled to 1536px
    logical, or 1920px user who hasn't hit the 1366 breakpoints yet)
   ================================================================ */

@media
    (min-width: 1366px) and (-webkit-device-pixel-ratio: 1.25),
    (min-width: 1366px) and (resolution: 120dpi),
    (min-width: 1366px) and (resolution: 1.25dppx) {

    h1 { font-size: 29px; }
    h2 { font-size: 26px; }
    h3 { font-size: 19px; }

    /* The 60px → 128px problem element */
    .your-target-element {
        font-size: 48px;
    }

    .double-items .info h1 {
        font-size: 36px;
        line-height: 48px;
    }

    .section-title {
        font-size: 22px;
        line-height: 34px;
    }
    .section-subtitle{
        margin-bottom: 35px;
    }

    .features-grid{
        gap: 1rem;
    }
    .banner-area h2 {
        font-size: 34px;
    }

    nav.navbar .navbar-nav > li > a {
        font-size: 11px;
    }
}


/* ================================================================
   12. ~1200px RANGE (125% scaling = 1536px effective → 1200px logical)
   ================================================================ */

@media (max-width: 1280px) {

    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .key-points li {
        width: calc(20% - 12px);
    }

    .steps-list {
        flex-wrap: wrap;
        gap: 16px;
    }

    .step-item {
        flex: 0 0 calc(25% - 16px);
        max-width: calc(25% - 16px);
    }
    .how-it-works-section{
        padding: 60px 0;
    }
    .how-it-works-section .section-subtitle{
        margin-bottom: 30px;
    }
    .notice-content.brand h4{
        font-size: 18px;
    }
    .double-items .info h1 {
        font-size: 30px;
        line-height: 44px;
        padding: 0 10px;
    }

    .engamix-card {
        padding: 20px 20px 30px;
    }

    /* Pricing 4 cols → 2x2 at this width */
    /* Bootstrap handles col-lg-3 col-md-6 so this is automatic */
}

@media (max-width: 1024px) {

    /* Developer page hero heading */
    .double-items .info h1 {
        font-size: 30px;
        line-height: 44px;
        padding: 0 10px;
    }

    /* Engamix features card */
    .engamix-card {
        padding: 20px 20px 30px;
    }

    /* Key points — reduce to 2 cols at this width */
    .key-points li {
        width: calc(50% - 12px);
    }
}


/* @media (max-width: 1400px) {
    body,
    .banner-area,
    .banner-area div {
        height: auto;
    }
    .it-banner {
        height: auto;
        min-height: 100vh;
        padding-top: 10px;
        padding-bottom: 80px;
    }
    .banner-area .double-items {
        padding-top: 100px;
        padding-bottom: 60px;
    }
    .banner-area.banner-style-three .double-items {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .it-banner .double-items{
        padding-top: 35px;
    }

}
@media (max-width: 1366px) {
    .container,
    .container-lg, 
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1140px;
    }
    .container-full {
        max-width: 1140px;
        width: 95%;
        padding: 0 15px;
    }
    .container-medium {
        max-width: 1140px;
        width: 95%;
        padding: 0 15px;
    }
    .container-fill {
        max-width: 1140px;
        width: 95%;
        padding: 0 15px;
    }
}
@media (max-width: 1366px) {
    .advanced-features-area .af-items .d-flex {
        gap: 20px;
    }
    .advanced-features-area .af-items .single-item {
        flex: 1 1 45%;
    }
    .our-features-area .feature-items .row {
        align-items: flex-start;
    }
    .innercolumn {
        top: 100px;
    }
    .features-style-four-area .feature-style-four h4 {
        font-size: 13px;
        min-height: 45px;
    }
    .software-feature-area .left-info {
        padding-right: 40px;
    }
    .software-feature-area .features-list {
        padding-left: 40px;
    }
    .about-area .thumb {
        padding-right: 40px;
        margin-left: -10%;
    }
    .advanced-features-area1 .af-items .item {
        padding: 25px 30px;
    }
    .process-area .thumb img {
        margin-left: -10%;
        max-width: 110%;
    }
}

@media (max-width: 1366px) {

    .double-items .info h1 {
        font-size: 38px;
        line-height: 54px;
        padding: 0 30px;
    }

    .double-items .info p.p1 {
        font-size: 17px;
        line-height: 26px;
        padding: 0 60px;
        max-width: 820px;
    }

    .key-points {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }

    .key-points li {
        width: calc(33.333% - 12px);
        padding: 18px 20px;
        flex-shrink: 0;
    }

    .solution-card {
        padding: 40px 30px;
    }

    .steps-list {
        gap: 16px;
    }

    .step-item {
        padding: 18px 14px;
    }

    .step-card h3 {
        font-size: 16px;
    }

    .step-card p {
        font-size: 13px;
    }

    .step-item:not(:last-child)::after {
        display: none;
    }

    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .developer-types-section .section-title {
        font-size: 32px;
        line-height: 44px;
    }

    .developer-types-section .section-subtitle {
        font-size: 16px;
    }

    .rowBox {
        padding: 30px;
    }

    .developer-illustration {
        padding: 20px;
    }

    .custom-engine-notice {
        padding: 20px;
        gap: 12px;
    }

    .cta-title {
        font-size: 28px;
        line-height: 42px;
    }

    .cta-subtitle {
        font-size: 16px;
    }

    .btn-cta {
        padding: 8px 40px;
    }
}

@media (max-width: 1366px) {

    .double-items .info h1.brand {
        font-size: 36px;
        line-height: 50px;
        padding: 0 20px;
        max-width: 840px;
    }

    .engamix-card {
        padding: 26px 30px 40px;
    }

    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .engamix-featues-section .feature-card {
        padding: 20px 16px 24px;
    }

    .feature-card h3 {
        font-size: 15px;
        padding-right: 0;
    }

    .brand-illustration img {
        border-width: 20px;
        border-radius: 30px;
    }

    .custom-engine-notice.brand {
        width: 280px;
        height: auto;
        padding: 16px;
    }

    .who-for .list li {
        font-size: 16px;
        line-height: 24px;
    }

    .developer-tags {
        gap: 10px;
    }

    .dev-tag {
        padding: 7px 16px;
        font-size: 13px;
    }
}


@media (max-width: 1366px) {

    .pricing-card {
        padding: 16px 14px;
    }

    .pricing-card.popular {
        transform: scale(1.03);
    }

    .pricing-card.popular:hover {
        transform: scale(1.06) translateY(-10px);
    }

    .plan-price {
        font-size: 2.8rem;
    }

    .plan-price-trial {
        font-size: 1.6rem;
    }

    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .toggle-switch span {
        padding: 14px 32px;
        font-size: 1rem;
    }
}

@media (max-width: 1366px) {

    nav.navbar .navbar-nav > li > a {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 14px;
    }
}

@media (max-width: 1366px) {

    h1 { font-size: 36px; }
    h2 { font-size: 32px; }
    h3 { font-size: 24px; }

    .banner-area h2 {
        font-size: 42px;
    }

    .section-title {
        font-size: 28px;
        line-height: 42px;
    }
    .section-subtitle{
        margin-bottom: 40px;
    }
    .area-title {
        font-size: 34px;
    }

    .double-items .info h1 {
        font-size: 36px;
        line-height: 50px;
    }
}

@media (max-width: 1366px) {

    .about-area .about-items .thumb {
        padding-right: 40px;
        margin-bottom: 40px;
        margin-left: -5%;
    }

    .process-area .thumb img {
        margin-left: 0;
        max-width: 100%;
    }

    .advanced-features-area1 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .engamix-featues-section {
        margin-top: -60px;
    }

    .accordion-button {
        font-size: 1rem;
        padding: 14px 18px;
    }

    .cta-buttons {
        gap: 12px;
    }

    .breadcrumb-area h1 {
        font-size: 32px;
    }

}

@media (max-width: 1280px) {

    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .key-points li {
        width: calc(20% - 12px);
    }

    .steps-list {
        flex-wrap: wrap;
        gap: 16px;
    }

    .step-item {
        flex: 0 0 calc(25% - 16px);
        max-width: calc(25% - 16px);
    }
    .how-it-works-section{
        padding: 60px 0;
    }
    .how-it-works-section .section-subtitle{
        margin-bottom: 30px;
    }
    .notice-content.brand h4{
        font-size: 18px;
    }
    .double-items .info h1 {
        font-size: 30px;
        line-height: 44px;
        padding: 0 10px;
    }

    .engamix-card {
        padding: 20px 20px 30px;
    }
    .double-items .info h1{
        font-size: 30px;
        line-height: 44px;
        padding: 0 10px;
    }

}

@media (max-width: 1024px) {

    .double-items .info h1 {
        font-size: 30px;
        line-height: 44px;
        padding: 0 10px;
    }

    .engamix-card {
        padding: 20px 20px 30px;
    }

    .key-points li {
        width: calc(50% - 12px);
    }
} */