/* Services & Hire Developer mega menu layout + stacking fix */
.header { z-index: 1000; }
.main-banner, .home-slider, .service-block { position: relative; z-index: 1; }

/* iPad & Tablet Screen Size: Mega menu alignment and layout fixes (768px - 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .main-navigation ul ul, .main-navigation ul ul.big-menu { z-index: 1001; }
    
    /* Services Mega Menu Base Layout */
    .main-navigation > ul > li.services .big-menu.sr-menu {
        flex-direction: column !important;
        padding-bottom: 145px !important;
        position: absolute !important;
        box-sizing: border-box !important;
    }
    .services ul.big-menu.sr-menu > li {
        position: unset !important;
        background: transparent !important;
        float: none !important;
    }
    .services ul.big-menu.sr-menu > li > a.label {
        display: block !important;
        position: relative !important;
        z-index: 10 !important;
        cursor: pointer !important;
        width: 27% !important;
        min-width: 185px !important;
        max-width: 230px !important;
        white-space: normal !important;
        padding: 7px 14px !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        box-sizing: border-box !important;
        border-left: 2px solid transparent !important;
        transition: all 0.2s ease !important;
    }
    .services ul.big-menu.sr-menu > li:hover > a.label,
    .services ul.big-menu.sr-menu > li.active-category > a.label {
        border-left: 2px solid #7a3be6 !important;
        background: linear-gradient(135deg, hsl(266 83% 58%), hsl(245 58% 51%)) !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    .services ul.big-menu.sr-menu > li > ul.third-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        top: 25px !important;
        left: 28% !important;
        width: calc(72% - 15px) !important;
        height: auto !important;
        padding: 0 240px 0 0 !important;
        box-sizing: border-box !important;
        list-style: none !important;
        margin: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        flex-direction: column !important;
        gap: 3px !important;
        z-index: 10 !important;
    }
    /* Show first category by default ONLY when no other category is hovered/active */
    .main-navigation > ul > li.services:hover ul.big-menu.sr-menu:not(:has(> li:not(:first-child):hover)):not(:has(> li.active-category:not(:first-child))) > li:first-child > ul.third-menu,
    .main-navigation > ul > li.services ul.big-menu.sr-menu > li:hover > ul.third-menu,
    .main-navigation > ul > li.services ul.big-menu.sr-menu > li.active-category > ul.third-menu {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 10 !important;
    }
    /* Hide first-child when another category is hovered or active */
    .main-navigation > ul > li.services ul.big-menu.sr-menu:has(> li:not(:first-child):hover) > li:first-child > ul.third-menu,
    .main-navigation > ul > li.services ul.big-menu.sr-menu:has(> li.active-category:not(:first-child)) > li:first-child > ul.third-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    /* Disable mobile/tablet gray tap highlight rectangle across navigation */
    .main-navigation,
    .main-navigation * {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none;
    }

    .services ul.third-menu > li:not(.service-img) {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        float: none !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    .services ul.third-menu > li:not(.service-img) > a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        padding: 5px 12px !important;
        line-height: 1.25 !important;
        border-left: 2px solid #ccc !important;
        font-size: 14.5px !important;
        color: #2d2e34 !important;
        transition: all 0.25s ease !important;
    }
    .services ul.third-menu > li:not(.service-img) > a:hover {
        border-left: 2px solid #7a3be6 !important;
        background: linear-gradient(135deg, hsl(266 83% 58%), hsl(245 58% 51%)) !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    .big-menu .service-img {
        position: absolute !important;
        right: 15px !important;
        top: 0 !important;
        width: 220px !important;
        background: rgba(45, 46, 86, 0.08) !important;
        padding: 20px 10px !important;
        border-radius: 8px !important;
        height: max-content !important;
        text-align: center !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
    }
    .big-menu .service-img img {
        width: 100% !important;
        max-width: 200px !important;
        max-height: 140px !important;
        object-fit: contain !important;
        display: inline-block !important;
    }
    .services ul.big-menu.sr-menu > li:last-child {
        position: absolute !important;
        left: 20px !important;
        right: 20px !important;
        bottom: 20px !important;
        width: calc(100% - 40px) !important;
        margin: 0 !important;
        pointer-events: none !important;
    }
    .services ul.big-menu.sr-menu > li:last-child .main-cta {
        margin: 0 !important;
        pointer-events: auto !important;
    }

    /* Hire Developer Mega Menu Base Layout */
    .main-navigation ul .hire ul.big-menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 14px !important;
        row-gap: 2px !important;
        box-sizing: border-box !important;
        position: absolute !important;
    }
    .hire .big-menu > li:not(.cta) {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        position: unset !important;
        float: none !important;
    }
    .hire .big-menu > li:not(.cta) > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 4px 10px !important;
        border-left: 2px solid #ccc !important;
        font-size: 13.5px !important;
        line-height: 1.25 !important;
        color: #2d2e34 !important;
        white-space: normal !important;
        transition: all 0.25s ease !important;
    }
    .hire .big-menu > li:not(.cta) > a:hover {
        border-left: 2px solid #7a3be6 !important;
        background: linear-gradient(135deg, hsl(266 83% 58%), hsl(245 58% 51%)) !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    .hire .big-menu > li > span {
        position: absolute !important;
        right: 15px !important;
        top: 20px !important;
        width: 220px !important;
        background: rgb(234, 234, 238) !important;
        padding: 20px 10px !important;
        border-radius: 8px !important;
        height: max-content !important;
        text-align: center !important;
        box-sizing: border-box !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .hire .big-menu > li > span img {
        width: 100% !important;
        max-width: 200px !important;
        max-height: 140px !important;
        object-fit: contain !important;
        display: inline-block !important;
    }
    .main-navigation > ul > li.hire:hover ul.big-menu:not(:has(> li:not(:first-child):hover)):not(:has(> li.active-item:not(:first-child))) > li:first-child > span,
    .hire .big-menu > li.active-item > span,
    .main-navigation > ul > li.hire ul.big-menu > li:hover > span {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 5 !important;
    }
    .main-navigation > ul > li.hire ul.big-menu:has(> li:not(:first-child):hover) > li:first-child > span,
    .main-navigation > ul > li.hire ul.big-menu:has(> li.active-item:not(:first-child)) > li:first-child > span {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    .hire .big-menu > li.cta {
        grid-column: auto !important;
        grid-row: auto !important;
        position: absolute !important;
        left: 20px !important;
        right: 20px !important;
        bottom: 20px !important;
        width: calc(100% - 40px) !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
        pointer-events: none !important;
    }
    .hire .big-menu > li.cta .main-cta {
        margin: 0 !important;
        pointer-events: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* iPad Pro Landscape / Tablet 1024px (992px - 1024px) - Keep within viewport bounds */
@media only screen and (min-width: 992px) and (max-width: 1024px) {
    .main-navigation > ul > li.services .big-menu.sr-menu {
        width: 800px !important;
        left: -320px !important;
        padding-bottom: 145px !important;
    }
    .main-navigation ul .services ul.big-menu.sr-menu:before {
        left: 355px !important;
    }
    .services ul.big-menu.sr-menu > li > a.label {
        width: 28% !important;
        min-width: 175px !important;
        padding: 6px 12px !important;
        font-size: 14px !important;
    }
    .services ul.big-menu.sr-menu > li > ul.third-menu {
        left: 29% !important;
        width: calc(71% - 10px) !important;
        padding: 0 230px 0 0 !important;
    }
    .services ul.third-menu > li:not(.service-img) > a {
        font-size: 13.5px !important;
        padding: 4px 10px !important;
    }
    .big-menu .service-img {
        width: 210px !important;
        right: 15px !important;
    }
    .big-menu .service-img img {
        max-width: 190px !important;
    }

    .main-navigation ul .hire ul.big-menu {
        width: 800px !important;
        left: -440px !important;
        padding: 20px 230px 145px 20px !important;
    }
    .main-navigation ul .hire ul.big-menu:before {
        left: 480px !important;
    }
    .hire .big-menu > li:not(.cta) > a {
        font-size: 13px !important;
        padding: 3.5px 8px !important;
    }
    .hire .big-menu > li > span {
        width: 210px !important;
        right: 15px !important;
    }
    .hire .big-menu > li > span img {
        max-width: 190px !important;
    }
}

/* iPad Portrait / Tablet Mode (768px - 991px) - Hide side images so options never break */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .services ul.big-menu.sr-menu {
        width: 700px !important;
        left: -290px !important;
        padding-bottom: 145px !important;
    }
    .main-navigation ul .services ul.big-menu.sr-menu:before {
        left: 325px !important;
    }
    .services ul.big-menu.sr-menu > li > a.label {
        width: 36% !important;
        min-width: 160px !important;
        padding: 6px 10px !important;
        font-size: 14px !important;
    }
    .services ul.big-menu.sr-menu > li > ul.third-menu {
        left: 37% !important;
        width: calc(63% - 10px) !important;
        padding-right: 0 !important;
    }
    .services ul.third-menu > li:not(.service-img) > a {
        font-size: 13.5px !important;
        padding: 4px 10px !important;
    }
    .hire ul.big-menu {
        width: 700px !important;
        left: -390px !important;
        padding: 20px 20px 145px 20px !important;
    }
    .main-navigation ul .hire ul.big-menu:before {
        left: 430px !important;
    }
    .hire .big-menu > li:not(.cta) > a {
        font-size: 13px !important;
        padding: 4px 10px !important;
    }
    .big-menu .service-img,
    .hire .big-menu > li > span {
        display: none !important;
    }
}

/* Tablet Mode Only (768px - 1024px): Fix Cloud options display - render 9 items in 2 columns to prevent overlap with bottom CTA */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .services ul.big-menu.sr-menu > li.menu-cat-cloud > ul.third-menu,
    .services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="cloud-integration-company"]) > ul.third-menu,
    .services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="azienda-integrazione-cloud"]) > ul.third-menu,
    .services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="empresa-de-integracao-em-nuvem"]) > ul.third-menu {
        padding-right: 0 !important;
    }
    .main-navigation > ul > li.services ul.big-menu.sr-menu > li.menu-cat-cloud:hover > ul.third-menu,
    .main-navigation > ul > li.services ul.big-menu.sr-menu > li.menu-cat-cloud.active-category > ul.third-menu,
    .main-navigation > ul > li.services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="cloud-integration-company"]):hover > ul.third-menu,
    .main-navigation > ul > li.services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="cloud-integration-company"]).active-category > ul.third-menu,
    .main-navigation > ul > li.services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="azienda-integrazione-cloud"]):hover > ul.third-menu,
    .main-navigation > ul > li.services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="azienda-integrazione-cloud"]).active-category > ul.third-menu,
    .main-navigation > ul > li.services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="empresa-de-integracao-em-nuvem"]):hover > ul.third-menu,
    .main-navigation > ul > li.services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="empresa-de-integracao-em-nuvem"]).active-category > ul.third-menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 14px !important;
        row-gap: 3px !important;
    }
    .services ul.big-menu.sr-menu > li.menu-cat-cloud .service-img,
    .services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="cloud-integration-company"]) .service-img,
    .services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="azienda-integrazione-cloud"]) .service-img,
    .services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="empresa-de-integracao-em-nuvem"]) .service-img {
        display: none !important;
    }
    .services ul.big-menu.sr-menu > li.menu-cat-cloud > ul.third-menu > li:not(.service-img) > a,
    .services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="cloud-integration-company"]) > ul.third-menu > li:not(.service-img) > a,
    .services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="azienda-integrazione-cloud"]) > ul.third-menu > li:not(.service-img) > a,
    .services ul.big-menu.sr-menu > li:has(> ul.third-menu a[href*="empresa-de-integracao-em-nuvem"]) > ul.third-menu > li:not(.service-img) > a {
        font-size: 13px !important;
        padding: 4px 8px !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }
}

/* Fix Hero Banner Header Overlap & Alignment */
.main-banner.new-banner {
    min-height: 100vh;
    width: 100%;
    position: relative;
}
.main-banner.new-banner .container {
    min-height: 100vh;
    padding-top: 130px !important;
    padding-bottom: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.home-slider, .home-slider .swiper-slide {
    min-height: 100vh;
    height: 100%;
    width: 100%;
}
.small-header .header {
    background-color: #191951 !important;
}
@media (max-height: 750px) {
    .main-banner.new-banner .container {
        align-items: flex-start;
        padding-top: 110px !important;
    }
}
@media (max-width: 767px) {
    .main-banner.new-banner .container {
        min-height: auto;
        padding-top: 90px !important;
        align-items: flex-start;
    }
    .home-slider, .home-slider .swiper-slide {
        min-height: auto;
    }
}

/* Trusted section logos - matching original site compact dimensions */
.trusted-sec .exp-box-list {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.trusted-sec ul.exp-box-list li {
    flex: 0 0 20%;
    max-width: 20%;
    padding: 10px 12px;
    box-sizing: border-box;
}
.trusted-sec .exp-box-list li span {
    display: flex;
    background: linear-gradient(135deg, rgba(136, 59, 237, 0.1), rgba(70, 58, 203, 0.1));
    border: 1px solid rgba(136, 59, 237, 0.2);
    padding: 10px 20px;
    border-radius: 12px;
    text-align: center;
    min-height: 82px !important;
    height: 82px !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.trusted-sec .exp-box-list li span img {
    max-width: 130px !important;
    max-height: 45px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: all 0.3s ease-in-out 0s;
}
.trusted-sec .exp-box-list li span:hover img {
    filter: none;
    transform: scale(1.06);
}
@media (max-width: 991px) {
    .trusted-sec ul.exp-box-list li {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}
@media (max-width: 575px) {
    .trusted-sec ul.exp-box-list li {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Contact Us page & Consultation form spacing matching original site */
.service-block.before-purple {
    position: relative;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}
.service-block.before-purple::before,
.before-purple::before {
    display: none !important;
    content: none !important;
}
.service-block.before-purple > .container {
    position: relative;
    z-index: 1;
}
.inner-banner.contact-details .container {
    padding-bottom: 35px;
}

/* ==========================================================================
   Landing Pages (LP) & Hire Azure Developers Mobile Experience Fixes
   ========================================================================== */
@media only screen and (max-width: 767px) {
    /* Hero Banner: eliminate flex vertical centering clamp and height constraints */
    .main-banner.new-banner.lp,
    .main-banner.lp,
    .home-slider.lp,
    .home-slider.lp .swiper-slide,
    .home-slider.lp .swiper-slide.second,
    #hero-sec {
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* Proper clearance below 73px fixed header */
    .home-slider.lp .swiper-slide.second,
    .home-slider.lp .second {
        padding-top: 100px !important;
        padding-bottom: 45px !important;
    }

    .main-banner.new-banner.lp .container,
    .home-slider.lp .second .container,
    .main-banner.lp .container,
    #hero-sec .container {
        min-height: auto !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        display: block !important;
    }

    /* Content order matching original website: Lead Form ABOVE, Headline & Content BELOW */
    .main-banner.lp .row,
    .main-banner.new-banner.lp .row,
    #hero-sec .row {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 35px !important;
        margin: 0 !important;
        align-items: stretch !important;
    }

    .main-banner.lp .main-banner-box,
    #hero-sec .main-banner-box {
        text-align: left !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .main-banner.lp .main-banner-box h1.head-bannertls,
    #hero-sec .main-banner-box h1.head-bannertls {
        font-size: 25px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
        word-break: break-word !important;
        color: #ffffff !important;
    }

    .main-banner.lp .main-banner-box p,
    #hero-sec .main-banner-box p {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
        color: rgba(255, 255, 255, 0.88) !important;
    }

    .main-banner.lp .main-banner-box .sublist,
    #hero-sec .main-banner-box .sublist {
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
    }

    .main-banner.lp .main-banner-box .sublist li,
    #hero-sec .main-banner-box .sublist li {
        font-size: 14px !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
        color: #ffffff !important;
    }

    .main-banner.lp .main-banner-box .btn,
    #hero-sec .main-banner-box .btn {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        display: block !important;
        margin-bottom: 5px !important;
        box-sizing: border-box !important;
    }

    /* Lead Form Box: Clean spacing and full visibility */
    .main-banner.new-banner .container .form-box.lp,
    .main-banner.lp .form-box.lp,
    #hero-sec .form-box.lp {
        background: #ffffff !important;
        border-radius: 16px !important;
        padding: 24px 16px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28) !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .main-banner.new-banner .container .form-box.lp .head-text,
    .main-banner.lp .form-box.lp .head-text,
    #hero-sec .form-box.lp .head-text {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 14px !important;
        color: #06080e !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    .form-box.lp input,
    .form-box.lp select,
    .form-box.lp textarea,
    .form-box.lp .hs-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .form-box.lp .hs-button,
    .form-box.lp input[type="submit"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ensure subsequent section (bg-light-grey bm-block) starts cleanly with NO overlap */
    .main-banner.lp + section,
    .main-banner.new-banner.lp + section,
    #hero-sec + section {
        position: relative !important;
        z-index: 2 !important;
        clear: both !important;
        margin-top: 0 !important;
    }

    /* Value / metrics grid (50+ projects, 5+ years, etc.) readable 2x2 grid */
    .section-space.lp .value-cls {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        margin: 20px 0 !important;
    }

    .section-space.lp .value-cls li {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 10px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    /* Developer Profiles on mobile */
    .hire-devbox .top-head {
        flex-wrap: wrap !important;
        gap: 15px !important;
    }

    .hire-devbox .top-head .name-title {
        width: 100% !important;
    }

    .hire-devbox .top-head .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Calendly schedule iframe */
    .schedule-form iframe {
        max-width: 100% !important;
        border-radius: 12px !important;
    }
}