@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Gabarito:wght@400..900&display=swap');

/* common css starts here */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
ol,
ul,
dl,
fieldset,
pre {
    margin: 0;
}

a:hover {
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

.field-error {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}

.error_field {
    border-color: red;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.iti {
    display: inline-flex;
    width: 100%;
}

input.error_field::placeholder {
    color: red !important;
}

.error_field {
    border-bottom: 1px solid red !important;
}

.req_check {
    border-bottom: 1px solid red !important;
}

.alert {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    z-index: 5;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
}

.alert-danger {
    background-color: #bb1b1b;
    text-align: center;
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
    z-index: 5;
}

.alert-success {
    background-color: #109610;
    text-align: center;
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
    z-index: 5;
}

.redBtn {
    color: #FFF;
    text-align: center;
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    background-color: #E00304;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 13px 37px;
    border: none;
    outline: none;
}

.redBtn:hover {
    color: #FFF;
}

.blueBtn {
    color: #FFF;
    text-align: center;
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #203884;
    padding: 13px 40px;
    border: none;
    outline: none;
}

.blueBtn:hover {
    color: #FFF;
}

.mainHeadingWhite {
    color: #FFF;
    text-align: center;
    font-family: Gabarito;
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.blueHeading {
    color: #203884;
    text-align: center;
    font-family: Gabarito;
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.whitePara {
    color: #FFF;
    text-align: center;
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

.whiteParaLeft {
    color: #FFF;
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

.blackPara {
    color: #231F20;
    font-family: Arimo;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

.commonHeroLinkWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* common css ends here */

/* desktop header css starts here */
.desktopHeader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #00003D;
    z-index: 15;
}

.destkopNavContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 100px;
}

.siteLogoContainer {
    max-width: 299px;
}

.siteLogoContainer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.desktopNavLinkList {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    list-style: none;
}

.desktopNavLink {
    color: #FFF;
    font-family: Gabarito;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.desktopNavLink:hover {
    color: #FFF;
}

.desktopPhoneListItem {
    background-color: #203884;
    padding: 14px 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.desktopNavPhoneText {
    color: #FFF;
    text-align: center;
    font-family: Gabarito;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.desktopNavPhone {
    color: #FFF;
    font-family: Gabarito;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.desktopNavPhone:hover {
    color: #FFF;
}


/* desktop header css ends here */

/* desktop mega menu css starts here */
.toggleServiceMegaMenu {
    position: relative;
}

.serviceMegaMenu {
    background-color: #fff;
    min-width: 300px;
    position: absolute;
    top: 310%;
    left: -5%;
    display: none;
}

.toggleCompanyMegaMenu {
    position: relative;
}

.companyMegaMenu {
    background-color: #fff;
    min-width: 300px;
    position: absolute;
    top: 310%;
    left: -5%;
    display: none;
}

.desktopMenuLink {
    color: #161616;
    font-family: Gabarito;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.desktopMenuLink:hover {
    color: #161616;
}

.desktopMegaMenuLinkList {
    list-style: none;
    padding: 20px 10px 30px 20px;
}

.desktopMegaMenuLinkList li {
    margin-bottom: 20px;
}

/* desktop mega menu css ends here */

/* mobile nav css starts here */
.mobileHeader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #00003D;
    z-index: 15;
}

.mobileNavContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 15px 13px 15px;
}

.mobileNavLogoWrapper {
    max-width: 200px;
}

.mobileNavLogoWrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.burgerLine {
    background-color: #fff;
    width: 40px;
    height: 2px;
    margin-bottom: 10px;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* the cross effect  */
.cross .lineOne {
    transform: rotate(45deg) translateY(15px);
}

.cross .lineThree {
    transform: rotate(-45deg) translateY(-15px);
}

.cross .lineTwo {
    opacity: 0;
}

/* the cross effect  */

.mobileNavPhoneBarWrap {
    background-color: #1F2154;
    padding: 11px 30px 8px 30px;
    border-top: 0.1px solid #9e9a9a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.4s;
}

.mobileNavPhone {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobileNavPara {
    color: #FFF;
    text-align: right;
    font-family: Gabarito;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.mobileNavPhoneText {
    color: #FFF;
    font-family: Gabarito;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.mobileNavSearchWrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.navBarSearchInput {
    color: rgba(35, 31, 32, 0.60);
    font-family: Gabarito;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    outline: none;
    border: none;
    border-radius: 4px;
    padding: 5px;
    display: none;
}

.mobileNavSearchIcon {
    cursor: pointer;
}

.searchIcon {
    color: #fff;
}

/* mobile nav css ends here */

/* mobile mega menu css starts here */
.mobileMegaMenuContainer {
    background-color: #00003D;
    position: absolute;
    left: 0;
    top: 95px;
    z-index: 300;
    width: 100%;
    padding: 20px 0px;
    display: none;
}

.mobMegaMenu {
    color: #fff;
    font-family: Gabarito;
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 0.5px;
    text-align: left;
    text-decoration-skip-ink: none;

}

.mobMegaMenu:hover {
    color: #fff;
}

.mobMegaMenuLink {
    color: #fff;
    font-family: Gabarito;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0.5px;
    text-align: left;
    text-decoration-skip-ink: none;
}

.mobMegaMenuLink:hover {
    color: #fff;
}


.mobileMegaMenuContainer ul {
    list-style: none;
}

.mobileMegaMenuContainer ul li {
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobMenuBreakLine {
    background-color: #fff;
}

.innerDropDown {
    margin: 5px 0;
}

.innerMenuList {
    padding: 0 15px;
    margin: 10px 0;
    display: none;
}

/* mobile mega menu css ends here */

/* footer css starts here */
.mainFooterWrapper {
    background-color: #161616;
    padding: 60px 0 100px 100px;
}

.footerLogoWrapper {
    max-width: 349px;
}

.footerLogoWrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footerHeading {
    color: #FFF;
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    letter-spacing: 3.2px;
}

.footerSiteMapList {
    list-style: none;
}

.footerSiteMapList li {
    margin-bottom: 5px;
}

.footerLinks {
    color: #FFF;
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.footerLinks:hover {
    color: #FFF;
}

.customFooterMargin {
    margin-top: 40px;
}

.footerPara {
    color: #FFF;
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.newsLetterFormContainer {
    margin-top: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.newsEmailInputWrap {
    min-width: 400px;
}

.newsEmailInput {
    background-color: #fff;
    outline: none;
    border: none;
    width: 100%;
    padding: 10px 20px;
}

.socilaIconsContainer {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 39px;
}

.socialIcons {
    color: #fff;
    font-size: 20px;
}

.footerBottom {
    background-color: #1E1E1E;
    padding: 11px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.footeBottomLink {
    color: rgba(255, 255, 255, 0.60);
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-right: 40px;
}

.footeBottomLink:hover {
    color: rgba(255, 255, 255, 0.60);
}

.footerBottomOtherLinks {
    list-style: none;
    display: flex;
    align-items: center;
}

.footerAfterLine {
    position: relative;
    padding-right: 40px;
}
.footerAfterLine a {
    color: rgba(255, 255, 255, 0.60);
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.footerAfterLine a:hover {
    color: rgba(255, 255, 255, 0.60);
}
.footerAfterLine + .footerAfterLine::after {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 15px;
    background-color: rgba(255, 255, 255, 0.60);
}

/* footer css ends here */

/* home page css starts here */
.homeHeaderSection {
    /* background-color: #00003D; */
    background-color: #fff;
    padding: 0 30px 60px 30px;
    margin-top: 132px;
}

.homeHeaderInnerWrapper {
    position: relative;
    padding-top: 41%;
    min-height: 500px;
}

.homeHeaderInnerWrapper::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: rgba(0, 0, 0, 0.30);
}

.homeHeaderInnerWrapper .homeHeaderMedia {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homeHeadercontent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 2;
}

.homeHeaderHeading {
    color: #FFF;
    text-align: center;
    font-family: Gabarito;
    font-size: 60px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.homeHeaderLinkWrap {
    margin-top: 40px;
}

.homeHeroSection {
    /* background-color: #00003D; */
     background-color: #fff;
    margin: -1px 0;
}

.heroBrandLogoContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

.heroBrandLogo {
    max-width: 214px;
}

.heroBrandLogo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.homeBrandSeparator {
    background-color: rgba(255, 255, 255, 0.40);
    margin-top: 40px;
}

.introTextContainer {
    /* background-color: #00003D; */
     background-color: #fff;
    padding: 50px 15px 0 15px;
}

.introTextInnerWrap {
    max-width: 1000px;
    margin: 0 auto;
}

.introParawrap {
    margin: 30px 0 40px 0;
}

.hiringImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.servicesCardSection {
    /* background-color: #00003D; */
     background-color: #fff;
    padding: 80px 0 70px 0;
}

.serviceCard {
    height: 100%;
    margin-bottom: 30px;
}

.serviceCardImageContainer {
    position: relative;
    height: 400px;
}

.serviceCardImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.serviceCardContent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.serviceCardLinkBtn {
    color: #FFF;
    text-align: center;
    font-family: Gabarito;
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    background-color: #203884E5;
    padding: 11px 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.serviceCardLinkBtn:hover {
    color: #FFF;
}

.hiringSection {
    background-image: url("https://cdn.mdsbrand.com/mean-wesco-marine/assets/images/home/hiring-bg.webp");
    padding: 125px 0;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hiringSection::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: rgba(1, 1, 51, 0.90);
    z-index: 2;
}

.hiringTextContainer {
    height: 100%;
    display: flex;
    align-items: center;
}

.hiringTextInnerWrap {
    max-width: 550px;
    height: 100%;
}

.hiringParaWrap {
    margin: 30px 0 40px 0;
}

.hiringContent {
    position: relative;
    z-index: 5;
}

.hiringImageContainer image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* home page css ends here */

/* servcice department page css starts here */
.commonHeaderSection {
    margin-top: 132px;
    padding: 0 30px;
    background-color: #00003D;
}

.commonHeaderInnerWrap {
    position: relative;
    padding-top: 27%;
    min-height: 400px
}

.commonHeaderInnerWrap .commonHeaderMedia {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.commonHeroSection {
    background-color: #00003D;
    padding: 60px 0;
}

.commHeroTextContainer {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
}

.commonHeroParaWrapper {
    margin: 30px 0 40px 0;
}

.commonLogoSection {
    background-color: #00003D;

}

.commonLogoContainer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.40);
    border-bottom: 1px solid rgba(255, 255, 255, 0.40);
}

.servicesSection {
    background-color: #00003D;
    padding: 60px 0 80px 0;

}

.servicesCardsContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 30px;
}

.serviceTitle {
    color: #FFF;
    text-align: center;
    font-family: Gabarito;
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.servicePageCard {
    flex: 0 0 320px;
}

.serviceImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.serviceTitleWrap {
    margin-top: 10px;
}

.formSectionWrapper {
    padding: 60px 15px 120px 15px;
}

.formHeadingWrap {
    margin-bottom: 32px;
}

.formHeading {
    color: #203884;
    text-align: center;
    font-family: Gabarito;
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.formSectionHeadingWrap {
    margin-bottom: 20px;
}

.formSectionHeading {
    color: #00003D;
    text-align: center;
    font-family: Gabarito;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.formFieldsContainer {
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.formField {
    color: rgba(22, 22, 22, 0.60);
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    outline: none;
    border: 1px solid #CCC;
    background-color: #FAFAFA;
    padding: 11px 20px;
    width: 100%;
}

.formFieldWrapper {
    width: 50%;
    max-width: 400px;
}

.formOuterWrap {
    max-width: 820px;
    margin: 0 auto;
}

.selectField {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('https://cdn.mdsbrand.com/mean-wesco-marine/assets/images/service-department/down-arrow.png');
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    border: 1px solid #000;
}

.messageFieldContainer {
    margin-bottom: 30px;
}

#serviceFormLink {
    scroll-margin-top: 100px;
}

/* service department page css ends here */

/* repower page css starts here */
.engineInventorySection {
    padding: 60px 0 50px 0;
}

.engineInventoryHeadingWrap {
    margin-bottom: 40px;
}

.selectEnginesFieldsContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.engineInventoryFields {
    color: #161616;
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('https://cdn.mdsbrand.com/mean-wesco-marine/assets/images/service-department/down-arrow.png');
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
    outline: none;
    border: 1px solid #000;
    padding: 11px 20px;
    min-width: 250px;
}

.engineInventoryCardsContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 60px;
    padding: 0 15px;
}

.engineInventoryCard {
    flex: 0 0 280px;
}

.engineIvnetoryImageWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.engineInventoryContentWrap {
    margin-top: 10px;
    text-align: center;
}

.engineTitle {
    color: #161616;
    text-align: center;
    font-family: Gabarito;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 25px;
}

.enginePrice {
    color: #203884;
    font-family: Gabarito;
    font-size: 18px;
    font-style: normal;
    font-weight: 900;
    line-height: 25px;
}

.enginePrice:hover {
    color: #203884;
}

.enginePowerInfo {
    color: rgba(22, 22, 22, 0.60);
    font-family: Gabarito;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

/* repower page css ends here */

/* installation page css starts here */
.servicesInfoSection {
    background-color: #00003D;
    padding-bottom: 80px;
    margin-top: -1px;
}

.serviceInfoItemsWrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    column-gap: 100px;
    row-gap: 60px;
    flex-wrap: wrap;
}

.serviceInfoItem {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex: 1 1 calc(50% - 50px);
    max-width: calc(90% - 50px);
    min-width: 600px;
    box-sizing: border-box;
}

.serviceInfoHeading {
    color: #FFF;
    font-family: Gabarito;
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.serviceInfoPara {
    color: #FFF;
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

.serviceInfoImageContainer {
    max-width: 320px;
}

.serviceInfoImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.serviceInfoTextContainer {
    max-width: 400px;
}

.additionalInfoBtnWrap {
    margin-top: 30px;
}

.additionalInfoWrapper {
    padding: 35px 43px 40px 43px;
    border: 1px solid #FFF;
    max-width: 736px;
}

/* installation page css ends here */

/* pods drives page css starts here */
.podsSeparator {
    background-color: #FFFFFF;
    margin: 60px 0;
}

.podsBottomParaWrap {
    max-width: 1000px;
    margin: 0 auto;
}

/* pods drives page css ends here */

/* status pages css starts here */
.commonSection {
    margin-bottom: 60px;
}



.commonSectionTextWrapper {
    max-width: 600px;
}

.commonSectionImageWrapper {
    max-width: 860px;
}

.commonSectionImageWrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.commonParaWrap {
    margin: 30px 0 40px 0;
}


.commonSectionLinkWrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.firstSectionTopMargin {
    margin-top: 192px;
}

.commonSectionOuterWrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* status pages css starts here */

/* about page css starts here */
.aboutGallerySection {
    background-color: #00003D;
    padding: 40px 20px 100px 20px;
}

.aboutGalleryImageContainer {
    margin: 0 10px;
    position: relative;
    padding-top: 70%;
}

.aboutGalleryImageContainer img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* about page css ends here */

/* contact page css starts here */
.contactImageContainer {
    min-height: 400px;
}

.contactImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px;
}

.contactMapContainer {
    height: 100%;
    min-height: 400px;
}

.contactMap {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contactAddressFormSection {
    margin-top: 212px;
    margin-bottom: 100px;
}

.contactSectionWrapper {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.contactSectionTextWrap {
    max-width: 350px;
}

.contactSectionFormWrap {
    min-width: 350px;
}

.contactInfoWrap {
    margin-top: 40px;
}

.phoneNumber {
    color: #203884;
    font-family: Gabarito;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

.phoneNumber:hover {
    color: #203884;
}

.hoursHeading {
    color: #000;
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 25px;
    letter-spacing: 1.6px;
}

.contactFormHeadingWrap {
    margin-bottom: 20px;
}

.contactFormHeading {
    color: #00003D;
    text-align: center;
    font-family: Gabarito;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.contactFieldWrapper {
    width: 100%;
    margin-bottom: 15px;
}

.contactSubmitBtnWrap {
    margin-top: 5px;
}

/* contact page css ends here */

/* team page starts here */
.teamHeaderSection {
    background-color: #00003D;
    padding: 152px 0 80px 0;
}

.teamCard {
    display: flex;
    background-color: #fff;
    height: 200px;
    margin-bottom: 30px;
}

.teamImageContainer {
    max-width: 180px;
}

.teamImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teamTextWrapper {
    padding-left: 36px;
    height: 100%;
    display: flex;
    align-items: center;
}

.teamMemberName {
    color: #00003D;
    font-family: Gabarito;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.teamMemberPosition {
    color: rgba(0, 0, 61, 0.60);
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.teamMemberPhone {
    color: #203884;
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.teamMemberPhone:hover {
    color: #203884;
}

.teamHeadingWrap {
    margin-bottom: 60px;
}

.joinTeamSection {
    margin: 60px 0 100px 0;
}

.joinTeamImageContainer {
    max-width: 550px;
}

.joinTeamImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.joinTeamTextContainer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.joinTextTextWrap {
    max-width: 550px;
}

.joinTeamParaWrap {
    margin: 30px 0;
}


#applyModal .modal-header {
    border: none;
}

#applyModal .modal-footer {
    border: none;
}


.applyModalWrapper {
    max-width: 560px;
}

.applyModalTitle {
    color: #1F2154;
    text-align: center;
    font-family: Gabarito;
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    line-height: 50px;
    letter-spacing: -0.8px;
    text-transform: capitalize;
}

.modalTitleWrap {
    margin-bottom: 60px;
}

.resumeFormInput {
    color: rgba(22, 22, 22, 0.60);
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    outline: none;
    border: 1px solid #CCC;
    background-color: #FAFAFA;
    padding: 11px 20px;
    width: 100%;
}

#uploadButton {
    width: 40%;
}

.inputWrapper {
    margin-bottom: 30px;
}

.resumeFileWrapper {
    width: 60%;
}

.upload-container {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    justify-content: center;
}

.fileInputForResume {
    color: rgba(22, 22, 22, 0.60);
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    outline: none;
    border: 1px solid #CCC;
    background-color: #FAFAFA;
    padding: 11px 20px;
    display: inline-flex;
    width: 100%;
}

.resumeBtn {
    color: #fff;
    text-align: center;
    font-family: Gabarito;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    text-transform: uppercase;
    padding: 8px 15px;
    border: 1px solid #00003D;
    background-color: #00003D;
}

#applyModal .modal-body {
    padding: 40px 80px 40px 80px;
}

#joinTeam {
    scroll-margin-top: 80px
}

.staffModalHeader .close {
    padding: 0;
    margin: 0;
}

.certifiedLinkWrapper {
    margin-bottom: 20px;
}

.listBoldText {
    color: #1F2154;
    font-family: Gabarito;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 25px;
}

/* team page ends here */

/* warranty page css starts here */
.warrantySection {
    background-color: #00003D;
    padding: 0 0 80px 0;
}

.warrantyHeading {
    color: #FFF;
    text-align: center;
    font-family: Gabarito;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.warrantyHeadingWrap {
    margin-bottom: 40px;
}

.warrantyCard {
    padding: 0 30px;
}

.warrantyImageContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.warrantyContent {
    margin-top: 20px;
}

.warrantyCardTitle {
    color: #FFF;
    font-family: Gabarito;
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.privacySection{
    background-color: #161616;
}

/* warranty page css ends here */

.grecaptcha-badge {
    display: none;
}

.recaptcha-disclaimer {
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding: 5px 0;
}

.termly-page {
    padding-top: 150px;
    padding-bottom: 60px;
}

@media(max-width: 1700px) {
    .destkopNavContainer {
        padding: 10px 50px;
    }

    .mainFooterWrapper {
        padding: 60px 0 100px 50px;
    }
}

@media(max-width: 1600px) {
    .destkopNavContainer {
        padding: 10px 30px;
    }

    .mainFooterWrapper {
        padding: 60px 0 100px 30px;
    }

}

@media(max-width: 1440px) {
    .destkopNavContainer {
        padding: 10px 15px;
    }

    .mainFooterWrapper {
        padding: 60px 0 100px 15px;
    }

    .newsLetterFormContainer {
        flex-wrap: wrap;
    }
}

@media(max-width: 1350px) {
    .newsEmailInputWrap {
        min-width: 300px;
    }
}

@media(max-width: 1200px) {
    .footerAfterLine {
        padding-right: 30px;
    }
    .footerAfterLine + .footerAfterLine::after {
        left: -15px;
    }
    .footerBottom {
        padding: 11px 50px;
    }
    .siteLogoContainer {
        max-width: 250px;
    }

    .footerLogoWrapper {
        max-width: 300px;
    }

    .desktopNavLinkList {
        gap: 20px;
    }

    .homeHeaderSection {
        margin-top: 112px;
    }

    .commonHeaderSection {
        margin-top: 112px;
    }

}

@media(max-width: 991px) {
    .footerBottom {
        justify-content: center;
        flex-direction: column;
    }
    .footerAfterLine {
        padding-right: 0;
    }
    .footerBottomOtherLinks {
        flex-direction: column;
        gap: 10px;
    }
    .footerAfterLine + .footerAfterLine::after {
        display: none;
    }
    .footeBottomLink {
        padding-right: 0;
    }
    .desktopHeader {
        display: none;
    }

    .mobileHeader {
        display: block;
    }

    .homeHeaderSection {
        margin-top: 101px;
    }

    .homeHeaderHeading {
        font-size: 50px;
        font-weight: 700;
    }

    .serviceCardLinkBtn {
        font-size: 36px;
        font-weight: 700;
    }

    .hiringSection {
        padding: 60px 0;
    }

    .hiringTextContainer {
        justify-content: center;
        text-align: center;
    }

    .hiringParaWrap {
        margin: 30px 0 40px 0;
    }

    .footerLogoWrapper {
        margin: 0 auto;
    }

    .newsLetterBlock {
        text-align: center;
    }

    .newsLetterFormContainer {
        justify-content: center;
    }

    .mainFooterWrapper {
        padding: 60px 0 60px 15px;
    }

    .teamHeaderSection {
        padding: 120px 0 40px 0;
    }

    .teamHeadingWrap {
        margin-bottom: 30px;
    }

    .joinTextTextWrap {
        text-align: center;
    }

    .joinTeamImageContainer {
        max-width: unset;
        width: 100%;
    }

    .joinTeamSection {
        margin: 40px 0 60px 0;
    }

    .commonHeroSection {
        padding: 40px 0;
    }

    .formSectionWrapper {
        padding: 40px 15px 80px 15px;
    }

    .formOuterWrap {
        max-width: unset;
    }

    .formFieldWrapper {
        max-width: unset;
        width: 100%;
    }

    .formHeading {
        font-size: 36px;
        font-weight: 700;
    }

    .formSectionHeadingWrap {
        margin-bottom: 10px;
    }

    .formFieldsContainer {
        margin-bottom: 20px;
        gap: 10px;
    }

    .commonHeaderSection {
        padding: 0 15px;
    }

    .engineInventorySection {
        padding: 40px 0;
    }

    .blueHeading {
        font-size: 36px;
        font-weight: 700;
    }

    .engineInventoryCard {
        flex-grow: 1;
    }

    .engineInventoryCardsContainer {
        gap: 20px;
    }

    .commonHeaderSection {
        margin-top: 102px;
    }

    .commonHeroParaWrapper {
        margin: 20px 0 30px 0;
    }

    .serviceInfoItem {
        max-width: unset;
    }

    .servicesInfoSection {
        padding-bottom: 40px;
    }

    .podsSeparator {
        margin: 40px 0;
    }

    .aboutGallerySection {
        padding: 40px 0 40px 0;
    }

    .contactAddressFormSection {
        margin-top: 152px;
        margin-bottom: 60px;
    }

    .contactSectionWrapper {
        justify-content: center;
    }

    .commonSectionTextWrapper {
        text-align: center;
    }

    .commonParaWrap {
        margin: 20px 0 30px 0;
    }

    .commonSectionLinkWrap {
        justify-content: center;
    }

    .commonSectionImageWrapper {
        max-width: unset;
    }

    .firstSectionTopMargin {
        margin-top: 132px;
    }
}

@media(max-width: 767px) {
    .termly-page {
        padding-top: 100px;
    }
    .homeHeaderHeading {
        font-size: 40px;
        font-weight: 700;
    }

    .redBtn {
        font-weight: 700;
        padding: 12px 32px;
    }

    .blueBtn {
        font-weight: 700;
        padding: 12px 32px;
    }

    .homeHeaderSection {
        padding: 0 15px 30px 15px;
    }

    .mainHeadingWhite {
        font-size: 36px;
        font-weight: 700;
    }

    .homeBrandSeparator {
        margin-top: 20px;
    }

    .introTextContainer {
        background-color: #00003D;
        padding: 40px 15px 0 15px;
    }

    .servicesCardSection {
        background-color: #00003D;
        padding: 40px 0 40px 0;
    }

    .footerBottom {
        padding: 11px 15px;
    }

    .mainFooterWrapper {
        padding: 40px 0 40px 15px;
    }

    .servicesSection {
        padding: 40px 0;
    }

    .serviceInfoItem {
        gap: 20px;
        flex-direction: column;
        min-width: unset;
        flex: 1 1 100%;
    }

    .serviceInfoTextContainer {
        max-width: 500px;
        text-align: center;
    }

    .serviceInfoItemsWrapper {
        gap: 40px;
    }

    .additionalInfoWrapper {
        text-align: center;
        padding: 35px 15px 40px 15px;
    }

    .contactSectionWrapper {
        flex-direction: column-reverse;
        gap: 40px;
    }

    .contactSectionTextWrap {
        max-width: unset;
    }

    .contactInfoWrap {
        margin-top: 20px;
    }

    .warrantyContent{
        text-align: center;
    }

    .warrantySection {
        padding: 0 0 40px 0;
    }

    .warrantyCard {
        padding: 0 15px;
    }
}

@media(max-width: 576px) {
    .heroBrandLogoContainer {
        gap: 40px;
        flex-wrap: wrap;
    }

    .heroBrandLogo {
        max-width: 120px;
    }

    .mainHeadingWhite {
        font-size: 32px;
        font-weight: 700;
    }

    .introParawrap {
        margin: 30px 0 30px 0;
    }

    .serviceCardLinkBtn {
        font-size: 30px;
        font-weight: 600;
    }

    .footerBottom {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .applyModalTitle {
        font-size: 36px;
        font-weight: 700;
        line-height: 40px;
    }

    #applyModal .modal-body {
        padding: 40px 15px 40px 15px;
    }

    .upload-container {
        gap: 10px;
    }

    .teamTextWrapper {
        padding-left: 15px;
    }

    .commonLogoContainer {
        padding: 20px 15px;
        gap: 40px;
    }

    .formHeading {
        font-size: 30px;
    }

    .blueHeading {
        font-size: 30px;
    }

    .selectEnginesFieldsContainer {
        flex-wrap: wrap;
    }

    .contactSectionFormWrap {
        min-width: unset;
        width: 100%;
        padding: 0 15px;
    }
}

@media(max-width: 450px) {
    .upload-container {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .resumeFileWrapper {
        width: 100%;
    }

    #uploadButton {
        width: 100%;
    }

    .commonLogoContainer {
        flex-wrap: wrap;

    }
}

@media(max-width: 400px) {
    .newsEmailInputWrap {
        min-width: unset;
        width: 100%;
    }

    .footerBottom {
        flex-direction: column;
        gap: 10px;
    }

    .footerBottomOtherLinks {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .footerAfterLine::after {
        display: none;
    }
}