/* Height Media Queries Start */

@media (max-height: 900px) {
    :is(.sliderBanner, .businessOfficial) {
        padding-top: 7rem !important;
    }

    .businessOfficial .row .businessOfficialDiv .businessSlider {
        margin-top: 1rem !important;
    }

    .workSection .row .workSectionDiv .heading h4 {
        margin-bottom: 2rem !important;
    }

    .review {
        padding-top: 7rem !important;
    }

    .review .row .reviewDiv {
        margin-top: 2rem !important;
    }

    .review .row .headingDiv {
        margin: 0 !important;
    }

    .headingDiv h4 {
        margin-bottom: 1rem;
    }

    .headingDiv :is(h6, p) {
        font-size: 1.25rem !important;
        margin: 0.25rem 0;
    }
}

/* Height Media Queries End */


/* Width Media Queries Start*/

@media only screen and (max-width: 1600px) {
    :is(.panel-1, .panel-2) .cardBox {
        max-width: 80% !important;
    }
}

@media only screen and (max-width: 1445px) {
    html {
        font-size: 15px;
    }
}

@media only screen and (max-width: 1366px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 1199.98px) {
    html {
        font-size: 13px;
    }

    .we-help__cardImg {
        width: 100px !important;
    }

    .contactForm .row .contactFormDiv .formBox {
        gap: 1rem !important;
        margin-top: 1rem !important;
    }

    .contactForm .row .contactFormDiv .formBox .box .phoneIcon {
        width: 100px !important;
    }

    .contactForm .row .contactFormDiv .formBox .box p {
        width: 100% !important;
    }

    .contactForm .row .contactFormDiv .formBox form {
        padding-left: 1rem !important;
    }
}

@media (max-width: 991.98px) {
    html {
        font-size: 12px;
    }

    html,
    body {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: clip !important;
    }

    .scroll-container {
        scroll-snap-type: none !important;
        scroll-behavior: auto !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow: visible !important;
    }

    section,
    .videoBanner,
    .threeBanner1,
    .threeBanner2,
    .threeBanner3,
    .serviceSection,
    .serve,
    .contactForm,
    .faq,
    .sliderBanner .sliderBannerDiv .bannerSlider :is(.firstBanner, .secondBanner, .thirdBanner) {
        height: auto !important;
        overflow: visible !important;
        scroll-snap-align: none !important;
    }

    .scroll-pagination {
        display: none;
    }

    .header {
        position: relative;
    }

    .videoBanner {
        height: 500px !important;
        padding: 0 !important;
    }

    .sliderBanner .sliderBannerDiv .bannerSlider .content {
        text-align: center;
        margin: 0 !important;
    }

    .bannerSlider :is(.firstBanner, .secondBanner, .thirdBanner) .content :is(h2, p) {
        margin: 0 auto;
        text-align: center !important;
    }

    .sliderBanner .sliderBannerDiv .bannerSlider .content h2::before {
        display: none;
    }

    .sliderBanner .sliderBannerDiv .bannerSlider .content h2 {
        margin-bottom: 1rem;
    }

    .businessOfficial .row .businessOfficialDiv {
        margin: 0 !important;
    }

    .businessOfficial .row .businessOfficialDiv .businessSlider .item .content {
        max-width: 50% !important;
    }

    .businessOfficial {
        padding: 5rem 0 !important;
    }

    .businessOfficial .row .businessOfficialDiv button.custom-prev {
        left: 20% !important;
    }

    .businessOfficial .row .businessOfficialDiv button.custom-next {
        right: 20% !important;
    }

    .navbar-toggler {
        border: 1px solid var(--white);
        outline: none;
        color: var(--white);
    }

    .header-main__nav {
        gap: 0;
        align-items: center;
    }

    header .themeBtn {
        display: block;
        margin: 1rem auto 1rem;
    }

    .banner .banner-content h1 {
        font-size: 4.5rem !important;
    }

    .industry-content h3 {
        padding: 30px 0;
    }

    :is(.choose-sjp__content, .cta) .sec_heading h2 {
        font-size: 3rem !important;
    }

    .footer .row {
        gap: 1rem 0;
    }

    .col-lg-2:not(:last-child) .footer-content::before {
        height: 70px;
    }

    .col-lg-2:nth-child(3) .footer-content::before {
        content: unset;
    }

    .business-sec-points {
        column-count: unset !important;
        margin: 3rem auto 0 !important;
    }

    .sliderBanner {
        padding: 0 !important;
    }

    .sliderBanner .row .sliderBannerDiv .bannerSlider {
        margin: 0 !important;
    }

    .review .row .reviewDiv .boxTwo,
    .contactForm .row .contactFormDiv .formBox {
        width: 100% !important;
    }

    .contactForm {
        padding: 5rem 0 !important;
    }

    .contactForm .row .contactFormDiv {
        margin: 0 !important;
    }

    .contactForm .row .contactFormDiv .formBox .box .phoneIcon {
        width: 70px !important;
        top: 0 !important;
        left: 0 !important;
    }

    .workSection .row .workSectionDiv .rowOne,
    .workSection .row .workSectionDiv .rowTwo {
        width: 100% !important;
    }

    .workSection .row .workSectionDiv .rowOne .boxOne,
    .workSection .row .workSectionDiv .rowTwo .boxOne {
        flex-direction: column-reverse;
    }

    .workSection .row .workSectionDiv .rowOne .boxTwo,
    .workSection .row .workSectionDiv .rowTwo .boxTwo {
        flex-direction: column;
    }

    .workSection .row .workSectionDiv .rowTwo .boxOne h4 {
        margin-top: 0 !important;
    }

    .workSection .row .workSectionDiv .heading h4 {
        margin-bottom: 4rem !important;
    }

    .workSection .row .workSectionDiv {
        margin: 0 !important;
        padding: 0 !important;
    }

    .review .row .reviewDiv .boxTwo .content {
        align-items: center !important;
    }

    .bannerSlider :is(.firstBanner, .secondBanner, .thirdBanner) .content {
        max-width: 100% !important;
        margin: 0 0 0 9rem !important;
    }

    .bannerSlider .secondBanner .content {
        margin: 0 9rem 0 0 !important;
    }

    .bannerSlider :is(.firstBanner, .secondBanner, .thirdBanner) {
        padding: 15rem 0 5rem !important;
    }

    .review,
    .workSection {
        padding: 5rem 0 !important;
    }

    .banner {
        height: auto;
        padding: 5rem 0 !important;
        margin: 0;
    }

    .banner .row .bannerDiv h1 {
        margin-bottom: 3rem !important;
    }

    .banner .row .bannerDiv {
        margin: 0 !important;
    }

    .differentPoint .row .differentPointDiv {
        margin: 0 !important;
    }

    .differentPoint {
        padding: 5rem 0 !important;
    }

    .differentPoint .row .differentPointDiv .heading {
        margin: 0 0 4rem !important;
    }

    .coreValue {
        padding: 5rem 0 !important;
    }

    .coreValue .row .coreValueDiv {
        margin: 0 !important;
    }

    .coreValue .row .coreValueDiv .coreValueSlider {
        margin-top: 3rem !important;
    }

    .coreValue .row .coreValueDiv button.custom-prev {
        left: 15% !important;
    }

    .coreValue .row .coreValueDiv button.custom-next {
        right: 15% !important;
    }

    .services .row .servicesDiv .columns .boxOne {
        padding: 1rem !important;
    }

    .services .row .servicesDiv .columns .boxOne .serviceIcon {
        margin-bottom: 0.5rem !important;
    }

    .animationDiv .panel {
        width: 100% !important;
        position: unset !important;
        transform: unset !important;
        opacity: 1 !important;
        padding: 0 !important;
        margin-bottom: 3rem;
    }

    .panel .cardBox {
        max-width: 100% !important;
        margin: 0 !important;
        gap: 2rem !important;
    }

    .animation-container .row .animationDiv {
        display: unset !important;
    }

    .animation-container {
        background: url(/assets/images/panel1.jpg) no-repeat center center/cover;
        padding: 5rem 0;
    }

    .panel::before,
    .panel::after {
        display: none;
    }

    .formSection {
        padding: 5rem 0;
    }

    .formSection .row .formSectionDiv {
        margin: 0 !important;
    }

    .formSection .row .formSectionDiv .formBox .content {
        max-width: 100% !important;
    }

    .formSection .row .formSectionDiv .formBox {
        gap: 1rem;
    }

    .serve {
        padding: 5rem 0;
    }

    .serve .row .serveDiv {
        margin: 0 !important;
    }

    .serve .row .serveDiv .listing {
        width: 100%;
        gap: 1rem !important;
        padding: 1.5rem !important;
    }

    .faq .row .faqDiv {
        margin: 0 !important;
    }

    .faq {
        padding: 5rem 0 !important;
    }

    .banner .row .bannerDiv .content {
        padding: 0 !important;
    }

    .banner .row .bannerDiv .content p {
        max-width: 100% !important;
    }

    .formBox {
        padding: 0 0 5rem !important;
    }

    .formBox .row .formBoxDiv {
        margin: 0 !important;
    }

    .location {
        padding: 0 0 5rem;
    }

    .location .row .locationDiv .box {
        width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    html {
        font-size: 11px;
    }

    .banner .banner-content h1 {
        font-size: 4rem !important;
    }

    .industry_icon_box {
        margin: 0;
    }

    .footer .row {
        gap: 4rem 0;
        justify-content: center;
    }

    .footer-content__logo img {
        width: 200px;
        margin: 0 auto;
        display: block;
    }

    .col-lg-2:is(:nth-child(1), :nth-child(4)) .footer-content::before {
        content: unset;
    }

    .col-lg-2:nth-child(3) .footer-content::before {
        content: '';
    }

    .reviewProfilePic {
        width: 100px;
        aspect-ratio: 1;
        object-fit: cover;
    }

    .contactForm .row .contactFormDiv .formBox {
        flex-direction: column;
    }

    .contactForm .row .contactFormDiv .formBox form {
        width: 100%;
        padding: 0 !important;
        border: none !important;
    }

    .custom-select {
        width: 100% !important;
    }

    .contactForm .row .contactFormDiv .formBox form a {
        width: 100%;
        text-align: center;
    }

    .formSection .row .formSectionDiv {
        padding: 3rem 2rem !important;
    }

    .formSection .row .formSectionDiv .formBox {
        flex-direction: column;
        gap: 1rem !important;
    }

    .formSection .row .formSectionDiv .formBox form {
        max-width: 100% !important;
    }

    .panel .cardBox .card .imgBox img {
        width: 60px !important;
        height: 60px !important;
    }

    .serve .row .serveDiv .listing {
        width: 100%;
        flex-direction: column;
    }

    .serve .row .serveDiv .listing ul {
        width: 100%;
    }

    .serve .row .serveDiv .content {
        width: 100%;
    }

    .serve .row .serveDiv .listing ul li::before {
        top: -25px !important;
    }

    .banner .row .bannerDiv :is(.downArrow, .blubIcon) {
        display: none;
    }

    .banner .row .bannerDiv :is(.downArrow, .blubIcon) {
        display: none;
    }

    .formBox .row .formBoxDiv {
        flex-direction: column-reverse;
    }

    .formBox .row .formBoxDiv .boxTwo {
        height: auto !important;
        gap: 1rem !important;
        padding: 0 !important;
        margin-bottom: 3rem;
    }

    .formBox .row .formBoxDiv .boxOne {
        border: none !important;
        padding: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .choose-sjp__contentList {
        padding: 0;
        margin-top: 1rem;
    }

    .platforms-card__img {
        height: 70px !important;
    }

    .footer-content__logo img {
        margin: 0;
    }

    .footer .row {
        gap: 2rem 0;
        justify-content: start;
    }

    .footer-content__links {
        text-align: left;
    }

    .footer-copyright__content {
        flex-direction: column;
        gap: 1rem;
    }

    .banner-content h1 {
        font-size: 4rem !important;
    }

    .businessOfficial .row .businessOfficialDiv .businessSlider .item .content {
        max-width: 80% !important;
    }

    .businessOfficial .row .businessOfficialDiv button.custom-prev {
        left: 2rem !important;
    }

    .businessOfficial .row .businessOfficialDiv button.custom-next {
        right: 2rem !important;
    }

    .workSection .row .workSectionDiv .rowOne {
        flex-direction: column;
        padding: 0 1rem !important;
    }

    .workSection .row .workSectionDiv .rowOne :is(.boxOne, .boxTwo) {
        max-width: 100% !important;
        border-right: none !important;
        border-left: none !important;
    }

    .workSection .row .workSectionDiv .rowTwo :is(.boxOne, .boxTwo) {
        max-width: 100% !important;
        border: none !important;
        border-bottom: 2px solid #73BF45 !important;
    }

    .workSection .row .workSectionDiv .rowTwo {
        flex-direction: column;
        padding: 0 1rem !important;
    }

    .review .row .reviewDiv .boxTwo .content {
        flex-direction: column;
        align-items: start !important;
    }

    .sliderBanner .row .sliderBannerDiv .heading {
        top: 20% !important;
    }

    .headingDiv p {
        width: 80% !important;
    }

    .coreValue .row .coreValueDiv .heading p {
        max-width: 100% !important;
    }

    .services {
        padding-top: 2rem;
    }

    .banner .row .bannerDiv h2 {
        text-align: center;
    }

    .services .row .servicesDiv .columns {
        flex-direction: column;
    }

    .services .row .servicesDiv .columns .borderRight {
        border: none !important;
    }

    .services .borderRow {
        border: none !important;
    }

    .services .row .servicesDiv .heading {
        margin: 0 0 2rem !important;
    }

    .coreValue .row .coreValueDiv button.custom-prev {
        left: 5% !important;
        top: auto !important;
        bottom: 2rem;
    }

    .coreValue .row .coreValueDiv button.custom-next {
        right: 5% !important;
        top: auto !important;
        bottom: 2rem;
    }

    .differentPoint .row .differentPointDiv .box .contentIconDiv .contentIcon {
        display: none;
    }

    .banner .row .bannerDiv .paraBox {
        max-width: 80% !important;
    }

    .services .row .servicesDiv .columns .boxOne {
        height: auto !important;
        margin-bottom: 1rem !important;
    }

    .banner .row .bannerDiv h1 {
        font-size: 3.5rem !important;
    }

    .banner .row .bannerDiv h2 {
        font-size: 2.5rem !important;
    }

    .coreValue .row .coreValueDiv .coreValueSlider .item .content {
        max-width: 100% !important;
    }

    .panel .cardBox {
        flex-direction: column;
    }

    .panel .cardBox .card .content {
        height: auto !important;
    }

    .panel .cardBox .card {
        max-width: 100% !important;
    }

    .review .row .reviewDiv .boxTwo .content .details {
        align-items: center !important;
        text-align: center;
    }

    .review .row .reviewDiv .boxTwo .content {
        align-items: center !important;
    }
}

@media (max-width: 440.98px) {
    .banner .banner-content h1 {
        font-size: 3rem !important;
    }

    .banner .banner-content p {
        font-size: 1.25rem;
        line-height: 1.75;
    }

    .industry-content h3 {
        font-size: 2rem;
    }

    .bannerSlider :is(.firstBanner, .thirdBanner) .content {
        margin: 0 0 0 6rem !important;
    }

    .bannerSlider .secondBanner .content {
        margin: 0 6rem 0 0 !important;
    }

    .sliderBanner .sliderBannerDiv .bannerSlider .content h2::before {
        display: none !important;
    }

    .sliderBanner .sliderBannerDiv .bannerSlider .content p {
        margin-top: 0 !important;
    }

    .sliderBanner .row .sliderBannerDiv .heading h2 {
        border: none !important;
    }

    .review .row .reviewDiv .boxTwo .downBox {
        flex-direction: column !important;
        gap: 1rem !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 320.98px) {}

/* Width Media Queries End*/