

@media (max-width: 1600px) {
   
    .headerMain:before,
    .headerCta {
        display: none;
    }

    .HeaderCtaPhoneEmail {
        border-left: 1px solid rgb(255 255 255 / 30%);
    }

    .logoMain img {
        max-width: 80%;
    }

    .logoMain {
        position: static;
        top: 15px;
        left: 0;
    }

    .logoMainWrap {
        display: flex;
        align-items: center;
        justify-content: start;
    }

    .headerMenuWrap ul li a, .headerMenuWrap ul li span {
        font-size: 14px;
        line-height: 24px;
        padding: 15px 0;
    }

    .HeaderCtaPhoneEmail a {
        font-size: 14px;
    }

    .ctaRight {
        width: 20%;
        flex: 0;
    }

    .headerMenuWrap ul li + li {
        margin-left: 15px;
    }

    .headerMenuMain {
        max-width: 63.333333%;
        flex: 1;
        padding: 0;
    }
    .headerMenuWrap ul.dropDown li a {
        font-size: 12px;
        line-height: 18px;
    }

    .headerMain:after {
        width: 100%;
        display: none;
    }

    .headerMenuWrap ul {
        padding: 0;
    }

    header {
        border-bottom: 1px solid rgb(255 255 255 / 30%);
    }
    .heading {
        font-size: 2.775rem;
    }
    .serviceCard h5 {
        font-size: 1.225rem;
    }
    .serviceCard {
        min-height: 250px;
    }
    .serviceCard span {
        font-size: 6.875rem;
    }
    .optionsSection img {
        bottom: -9%;
        width: 74%;
    }
    .contactSection .phoneBtn svg {
        left: -11%;
    }
    ul.socialFooter li a {
        width: 120px;
        font-size: 15px;
    }

    .worldSection .phoneBtn {
        font-size: 1rem;
    }
    .phoneBtn svg {
        left: -38%;
        width: 45px;
        height: 45px;
    }
    .ctaSection .phoneBtn {
        margin-left: 4rem;
        color: var(--white);
        font-size: 1.3rem;
    }
   .ctaSection .smallTitleLine {
        font-size: 0.685rem;
        padding-left: 23px;
    }
    .ctaSection .phoneBtn svg {
        left: -30%;
    }
    .ctaSection .btn-group {
        margin-top: 0;
    }
   .ctaSection .smallTitleLine:before {
        width: 20px;
    }
}

@media (max-width: 1440px) {
    html {
        font-size: 13px;
    }
    .hireSection {
        padding: 5rem 0 15rem 0;
    }
    .hireSection img {
        bottom: -45%;
        left: 3%;
    }
    .phoneBtn svg {
        left: -34%;
        top: 11%;
        width: 45px;
        height: 45px;
    }
    .sec-title {
        font-size: 1rem;
    }
    .sec-title::before {
        content: "";
        width: 30px;
        top: 7px;
    }
    .provideSection .provide2 {
        bottom: -5%;
    }
    .optionsSection img {
        bottom: -18%;
        width: 70%;
    }
    .worldSection .phoneBtn {
        font-size: 1.6rem;
    }
}

@media (max-width: 1366.98px) {
    .headerMenuWrap ul li a, .headerMenuWrap ul li span {
        font-size: 12px;
    }
    .HeaderCtaPhoneEmail a {
        font-size: 12px;
    }
    .main-banner {
        padding-top: 10.25rem;
    }
    .row.criclerow {
        height: 450px;
    }
    .heading {
        font-size: 3rem;
    }
    .serviceCard span {
        top: -7%;
        right: 8%;
    }
    .provideSection .provide1 {
        width: 12%;
    }
    .optionsSection img {
        bottom: -8%;
    }
    ul.socialFooter li a {
        width: 110px;
        font-size: 12px;
    }

}

@media (max-width: 1199.98px) {
    html {
        font-size: 13px;
    }
    .heading {
        font-size: 2.84rem;
    }
    .serviceCard p {
        font-size: 1rem;
    }
    .serviceCard {
        min-height: 225px;
    }
    .platformsSection img {
        max-width: 90%;
    }
    .optionsSection img {
        bottom: 0;
        width: 73%;
    }
    ul.socialFooter li + li {
margin: 0;
    }

    ul.socialFooter {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .footerRightWrap {
        width: 33%;
    }
  .worldSection  .btn-group {
        gap: 1rem;
        margin-top: 1rem;
        flex-wrap: wrap;
    }
  .worldSection .phoneBtn {
        margin-left: 4.25rem;
    }
}


@media (max-width: 991.98px) {
    header {
        padding: 1rem 0;
    }
    .logoMain {
        position: static;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .mobileMenuIcon img {
        height: 25px;
    }

    .mobileMenuIcon {
        display: block;
    }
    .headerMenuMain {
        display: none;
        position: fixed;
        left: 0;
        padding: 0;
        top: 0;
        height: 100vh;
        width: 100%;
        background: rgb(0 0 0 / 80%);
    }
    .headerMenuMain.showMenu {
        display: block;
    }
    .ctaRight{
        display: none;
    }
    .logoMain img {
        max-width: 250px;
    }
    .logoMainWrap {
        position: relative;
        max-width: 100%;
        flex: 1;
    }
    .headerMain:after,
    .headerMain:before{
        background: none;
    }
    .headerMenuWrap {
        width: 80%;
        height: 100%;
        background: #fff;
        overflow-y: auto;
    }

    .headerMenuWrap > ul {
        flex-direction: column;
        align-items: start;
        justify-content: start;
        padding: 15px 0;
    }

    .headerMenuWrap ul li a, .headerMenuWrap ul li span {
        color: #333 !important;
        text-align: left;
        padding: 0;
        display: block;
    }

    .headerMenuWrap > ul > li + li {
        margin: 0;
        border-top: 1px solid #eee;
    }

    .headerMenuWrap > ul > li {
        display: block;
        width: 100%;
        padding: 15px 20px;
    }

    .headerMenuWrap ul.dropDown {
        display: none;
        position: static;
        padding-top: 11px;
        min-width: 100%;
        background: #f6f6f6;
        margin-top: 12px;
    }

    .headerMenuWrap ul.dropDown li {
        border: none !important;
    }

    .headerMenuWrap ul.dropDown:before {
        display: none;
    }

    .headerMenuWrap ul > li.parentMenu a > svg,
    .headerMenuWrap ul > li.parentMenu span > svg {
        display: none !important;
    }

    .openDropdown {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 54px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .openDropdown svg {
        margin: 0 !important;
    }
    .closeMenu.mobileMenuIcon {
        position: absolute;
        right: 20px;
        top: 20px;
    }
    .parentMenu a i {
        display: none;
    }
    .btn-group {
        gap: 1rem;
        flex-wrap: wrap;
    }

    /* Below 992px the button group wraps, so the phone block starts its own
       line. The old left margins were spacing for the row layout and now just
       pushed "Call Us" out of line with the button above it. */
    .phoneBtn,
    .worldSection .phoneBtn,
    .ctaSection .phoneBtn,
    .contactSection .phoneBtn,
    .chooseSection .btn-group .phoneBtn {
        margin-left: 0;
    }

    .chooseSection .btn-group {
        margin-left: 0;
    }
    .hireSection img {
        bottom: -38%;
        left: -2%;
    }
    .serviceCard h5 {
        margin: 0;
    }
    .serviceCard div {
        flex-wrap: wrap;
    }
    .serviceCard {
        padding: 1.5rem 1rem;
    }
    .provideSection .provide2 {
        left: -8%;
    }
    .contactSection .phoneBtn svg {
        left: -16%;
    }
    .formFields input {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    html {
        font-size: 14px;
    }
    .bannerText p br {
        display: none;
    }
    .form-inline {
        justify-content: center;
    }
    .slider-form .form-group {
        width: 100%;
    }
    .heading {
        font-size: 3rem;
    }
    .sec-title {
        font-size: 1.25rem;
    }
    .serviceCard h5 {
        font-size: 2em;
    }
    .serviceCard div {
        gap: 1rem;
    }
    .serviceCard {
        padding: 3rem;
    }
    .serviceCard p {
        font-size: 1.25rem;
    }
    .serviceCard span {
        font-size: 10.875rem;
    }
    .serviceCard {
        min-height: fit-content;
    }
    .provideSection .provide2 {
        display: none;
    }
    .optionsSection,
    .provideSection {
        padding: 6rem 0;
    }
    .optionsSection img {
        display: none;
    }
    .review-img{
        display: flex;
        margin: auto;
    }
    .reviewLogos ul {
        gap: 1.5rem;
    }
    .chooseCard {
        padding: 2rem;
        border-bottom: 1px solid #e2e2e2;
    }
    .chooseCard img {
        margin-bottom: 1rem;
    }
    .chooseCard h4 {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    .chooseSection .btn-group {
        gap: 1.25rem;
    }
    .contactForm {
        margin: auto;
        margin-top: 3rem;
    }
    .footerRightTop {
        padding: 2rem 0 1rem;
    }
    .main-footer .col-md-4 {
        border: none;
        border-bottom: 1px solid #2C4D80;
        padding: 4rem 0 2rem;
    }
    .copyRighgtBottom {
        padding: 0;
        padding-bottom: 4rem;
    }
    ul.socialFooter li a {
        width: 120px;
        font-size: 14px;
    }
    .bannerForm {
        margin: 2rem 0;
    }
    .reviewManinHeader {
        background: url(../images/bannershadow.png);
    }
    .custom-tab-list-ghost .nav-tabs .nav-link.active {
        background: #e0dcdcb0;
    }
    .ghostdetails {
        background: #e0dcdcb0;
    }
    .ctaSection .review-img {
        width: 35%;
    }
    .ctaSection .btn-group {
        margin-bottom: 1rem;
    }
    .ctaSection .border-left{
        border: none !important;
    }
}

@media (max-width: 575.98px) {
    html {
        font-size: 13px;
    }
    .main-banner .heading {
        font-size: 3.625rem;
    }
    .serviceCard span {
        top: -16%;
        right: 4%;
    }
    .heading {
        font-size: 3.5rem;
    }
    .chooseSection .btn-group {
        margin-left: 0;
        gap: 2rem;
        justify-content: center;
    }
    .contactSection .phoneBtn svg {
        left: -13%;
    }
    .copyRighgtBottom ul {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    
    .copyRighgtBottom ul li {
        margin-bottom: 1rem;
    }
}

@media (max-width:480px) {
    .hireSection{
        padding: 5rem 0;
    }
    .hireSection img{
        display: none;
    }
    .servicesSection p br {
        display: none;
    }
    .review-img {
        width: 70%;
    }
    .contactSection .phoneBtn svg {
        left: -16%;
    }
}
@media (max-width:420px) {
    .footerRightTop{
        display: none;
    }
    
}
@media (max-width:380.99px) {
    .contactSection .phoneBtn svg {
        left: -22%;
    }
}

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

/* ==========================================================================
   Footer — rebuilt layout
   --------------------------------------------------------------------------
   This file loads after custom.css, so these rules also undo the old theme's
   footer behaviour: a non-wrapping 4-across flex row that squashed on tablets
   and was hidden outright below 420px.
   ========================================================================== */

.main-footer .col-lg-4 {
    border-right: 1px solid #2C4D80;
    padding: 4rem 2rem 4rem 0;
}

.main-footer .col-lg-8 {
    padding-left: 3rem;
}

.footerRightTop {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    align-items: start;
    padding: 4rem 0 2rem;
}

.footerRightWrap {
    min-width: 0;
    width: auto;
}

span.FooterMenuTitle {
    display: block;
    margin-bottom: 1rem;
    color: var(--white);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

span.FooterMenuTitle a {
    color: var(--white);
}

ul.FooterMenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.FooterMenu li {
    margin: 0 0 .7rem;
}

ul.FooterMenu li a {
    display: block;
    color: rgba(255, 255, 255, .8) !important;
    font-size: .95rem;
    line-height: 1.5;
    text-decoration: none !important;
}

ul.FooterMenu li a:hover {
    color: var(--primary) !important;
}

/* The dash marker the old theme draws to the left of each link */
ul.FooterMenu.lightMenu li a:before {
    top: 11px;
    opacity: .55;
}

/* ---------- Contact block ---------- */
ul.footerContactDetails li a {
    font-size: 1.15rem;
    line-height: 1.6;
    word-break: break-word;
}

ul.footerContactDetails li {
    margin-bottom: .75rem;
}

ul.footerContactDetails li.footer-address {
    font-size: 1.05rem;
}

ul.footerContactDetails li.footer-address a {
    font-size: 1.05rem;
    align-items: flex-start;
}

ul.footerContactDetails li.footer-address a svg {
    margin-top: .3em;
}

/* ---------- Social icons: circles, not the old 140px pills ---------- */
ul.socialFooter {
    display: flex;
    gap: .75rem;
    margin-top: 1.75rem;
}

ul.socialFooter li + li {
    margin-left: 0;
}

ul.socialFooter li a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .35) !important;
    font-size: 0;
}

ul.socialFooter li a svg {
    width: 19px;
    height: 19px;
}

/* ---------- Bottom bar ---------- */
.copyRighgtBottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    padding: 1.75rem 0 3rem;
    border-top: 1px solid #2C4D80;
}

.copyRighgtBottom ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.copyRighgtBottom ul li {
    margin: 0;
}

.copyRighgtBottom ul li a {
    color: rgba(255, 255, 255, .78);
    font-size: .9rem;
}

.copyRighgtBottom .copyRightContent p {
    margin: 0;
    color: rgba(255, 255, 255, .65);
    font-size: .875rem;
}

/* Brand watermark must never sit on top of the links */
footer .flogo {
    max-width: 260px;
    opacity: .5;
    pointer-events: none;
}

/* ==========================================================================
   Footer responsive
   ========================================================================== */

@media (max-width: 1199.98px) {
    .footerRightTop {
        gap: 1.5rem;
    }

    .main-footer .col-lg-8 {
        padding-left: 2rem;
    }
}

@media (max-width: 991.98px) {

    /* Stack the brand block above the link columns */
    .main-footer .col-lg-4 {
        border-right: none;
        border-bottom: 1px solid #2C4D80;
        padding: 3rem 0 2rem;
    }

    .main-footer .col-lg-8 {
        padding-left: 0;
    }

    .footerRightTop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
        padding: 2.5rem 0 1.5rem;
    }

    footer .flogo {
        max-width: 170px;
        opacity: .3;
    }
}

@media (max-width: 767.98px) {
    .footerRightTop {
        gap: 1.75rem 1.5rem;
        padding: 2rem 0 1rem;
    }

    ul.footerContactDetails li a {
        font-size: 1.05rem;
    }

    .copyRighgtBottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding-bottom: 6rem;
    }

    .copyRighgtBottom ul {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    footer .container-fluid {
        max-width: 100%;
        padding: 0 1.25rem;
    }

    .main-footer .col-lg-4 {
        padding: 2.5rem 0 1.75rem;
    }

    ul.footerContactDetails li a,
    ul.footerContactDetails li.footer-address,
    ul.footerContactDetails li.footer-address a {
        font-size: .98rem;
    }

    .copyRighgtBottom {
        align-items: center;
        text-align: center;
    }

    .copyRighgtBottom ul {
        justify-content: center;
    }

    footer .flogo {
        max-width: 120px;
    }
}

/* The old theme hid the footer menus entirely under 420px — override that. */
@media (max-width: 480px) {
    .footerRightTop {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
    }

    span.FooterMenuTitle {
        font-size: .85rem;
        margin-bottom: .75rem;
    }

    ul.FooterMenu li a {
        font-size: .88rem;
    }

    ul.socialFooter li a {
        width: 40px;
        height: 40px;
        font-size: 0;
    }
}
