body.home-template section#services ul li:nth-child(1),
body.home-template section#services ul li:nth-child(2),
body.home-template section#services ul li:nth-child(3) {
    flex: 0 0 25%;
    width: 25%;
}

body.our-company-template section#need-to-know .content ul li .image img,
body.our-company-template section#service .content .left .image img {
    height: auto;
    max-height: 70px;
}

/* header styles */

header .container nav ul:nth-child(1)>li:nth-child(2) {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

header .mobile-dropdown-toggle-new {
    display: none;
    appearance: none;
    width: 2rem;
    height: 2rem;
    background-color: transparent;
    border: 1px solid white;
    border-radius: 50% 50%;
    opacity: .6;
    transform: translate3d(0, .35rem, 0);
    transition: opacity .2s ease;
}

header .mobile-dropdown-toggle-new:hover,
header .mobile-dropdown-toggle-new:active,
header .mobile-dropdown-toggle-new:focus {
    opacity: 1;
    cursor: pointer;
}

header .mobile-dropdown-toggle-new svg {
    transform: translate3d(0, 2px, 0);
}

header .mobile-dropdown-toggle-new.is-active svg {
    transform: rotate(180deg);
}

header .mobile-dropdown-toggle-new.is-active~.header-dropdown {
    max-height: 999px;
}

@media screen and (max-width: 1365px) {
    header .container nav ul:nth-child(1)>li:nth-child(2) {
        padding-top: 0;
        padding-bottom: 0;
    }

    header .mobile-dropdown-toggle-new {
        display: inline-block;
        pointer-events: auto;
    }

    header .mobile-dropdown-toggle-new.is-active~.header-dropdown {
        opacity: 1;
        transform: scaleY(1);
        pointer-events: auto;
    }
}

/* landing */
body.our-company-template section#landing {
    padding-top: calc(150px + 5%);
    padding-bottom: 100px;
    background-size: cover;
    background-image: url('/wp-content/themes/truemarket/assets/img/pages/fg-water-1.jpg');
    background-repeat: no-repeat;
    background-position: center center
}

body.our-company-template section#landing .content {
    max-width: 900px;
    text-align: left
}

@media screen and (max-width: 768px) {
    body.our-company-template section#landing .content {
        text-align: center
    }
}

body.our-company-template section#landing .content h1 {
    font-size: 47px;
    font-family: "Poppins-Bold";
    color: #f6f6f6;
    padding-bottom: .3em;
    position: relative;
    margin-bottom: .5em
}

@media screen and (max-width: 1040px) {
    body.our-company-template section#landing .content h1 {
        font-size: 39px
    }
}

@media screen and (max-width: 768px) {
    body.our-company-template section#landing .content h1 {
        font-size: 34px
    }
}

@media screen and (max-width: 500px) {
    body.our-company-template section#landing .content h1 {
        font-size: 30px
    }
}

@media screen and (max-width: 320px) {
    body.our-company-template section#landing .content h1 {
        font-size: 26px
    }
}

body.our-company-template section#landing .content h1::after {
    content: '';
    display: block;
    width: 50px;
    border-bottom: 5px dotted #c9c9c9;
    position: absolute;
    top: 100%;
    left: 3px
}

@media screen and (max-width: 768px) {
    body.our-company-template section#landing .content h1 {
        position: relative
    }
    body.our-company-template section#landing .content h1::after {
        content: '';
        display: block;
        width: 50px;
        border-bottom: 5px dotted #c9c9c9;
        position: absolute;
        top: 100%;
        left: 3px;
        left: calc(50% - 25px)
    }
}

body.our-company-template section#landing .content p {
    font-size: 15px;
    color: #ffffff;
    font-family: "Poppins-Light";
    line-height: 1.8em
}

@media screen and (max-width: 768px) {
    body.our-company-template section#landing .content p {
        font-size: 14px
    }
}

@media screen and (max-width: 320px) {
    body.our-company-template section#landing .content p {
        font-size: 13px
    }
}

body.our-company-template section#landing .content p:last-child .fancy-button {
    margin-top: 2rem
}

/* footer styles */

footer .footer__icons-wrapper {
    padding: 55px 0;
    background-color: white;
}

footer .main .content .left .column-1 ul li .icon-renovation::before {
    background-image: url('/wp-content/themes/truemarket/assets/img/icons/icon-new-build-white.svg') !important;
    left: 6px;
    width: 23px;
}

footer .footer__icons {
    max-width: 1730px;
    margin: 0 auto;
}


footer .footer__top-icons,
footer .footer__bottom-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    box-sizing: border-box;
    gap: 30px;
    padding: 0 10px;
}

footer .footer__top-icons {
    margin-bottom: 25px;
}

footer .footer__bottom-icons img,
footer .footer__top-icons img {
    max-width: 100%;
    height: auto;
    flex: 1 1 auto;
}

@media screen and (max-width: 992px) {

    footer .footer__top-icons,
    footer .footer__bottom-icons {
        gap: 20px;
    }

    footer .footer__icon {
        width: 16%;
    }
}

@media screen and (max-width: 500px) {
    footer .footer__icons-wrapper {
        padding: 25px 0;
    }

    footer .footer__top-icons {
        gap: 15px;
    }

    footer .footer__icon {
        width: 40%;
    }
}


/* our-company-template */
body.our-company-template section#subnav {
    background-color: #131f6b;
    padding: 25px 0;
}

/* Leading the way section styles */
.leading-the-way {
    padding: 90px 0 60px 0;

    @media screen and (max-width: 767px) {
        padding: 50px 0 60px 0;
    }
}

.leading-the-way .content {
    max-width: 1100px;
    margin: 0 auto;
}

.leading-the-way .content h2 {
    font-size: 27px;
    color: #131f6b;
    margin-bottom: 0.8em;
}

.leading-the-way .content p {
    font-size: 13px;
    color: #7a7a7a;
    line-height: 1.6em;
    flex: 0 0 85%;
}

.leading-the-way__top {
    position: relative;
}

.leading-the-way__top-left {
    max-width: 665px;

    @media screen and (max-width: 992px) {
        max-width: none;
    }
}

.leading-the-way__top p {
    font-size: 16px !important;
}

.leading-the-way__top-icon {
    position: absolute;
    right: 0;
    top: -10px;

    @media screen and (max-width: 992px) {
        display: none;
    }
}

.leading-the-way__top-icon svg {
    width: 110px;
    height: auto;
}

.leading-the-way__bottom .icon {
    margin-bottom: 18px;

    @media screen and (max-width: 992px) {
        margin-bottom: 15px;
    }
}

.leading-the-way__bottom .step-title {
    display: flex;
    white-space: nowrap;
    font-family: "Poppins-Medium";

    @media screen and (max-width: 992px) {
        display: inline-flex;
    }
}

.leading-the-way__bottom .step-description-bottom {
    color: #7a7a7a;
}

.leading-the-way__bottom .step-title__suffix {
    font-size: 25px;
    vertical-align: super;
    margin-left: 2px;
    color: #131f6b;
}

.leading-the-way__bottom .step-title p {
    color: #131f6b;
    font-size: 43px;
}

.leading-the-way__bottom ul {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;

    @media screen and (max-width: 1020px) {
        flex-direction: column;
        margin-top: 40px;
    }
}

.leading-the-way__bottom ul li {
    border-left: 1px solid rgba(19, 31, 107, 0.15);
    padding: 30px 70px;

    @media screen and (max-width: 1020px) {
        text-align: center;
        border-left: none;
        border-bottom: 1px solid rgba(19, 31, 107, 0.15);
    }
}

.leading-the-way__bottom ul li:last-child {
    border-right: 1px solid rgba(19, 31, 107, 0.15);

    @media screen and (max-width: 1020px) {
        border-right: none;
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* family-matters */
.family-matters {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.family-matters .left {
    flex: 0 0 50%;
    padding: 110px 0 80px 0;
    background-color: #f7f7f7;

    @media screen and (max-width: 1200px) {
        flex: 0 0 100%;
        padding: 80px 0 20px 0;
    }

    @media screen and (max-width: 767px) {
        flex: 0 0 100%;
        padding: 50px 0 20px 0;
    }
}

.family-matters .left .tm-c-grid {
    padding: 0;

    @media screen and (max-width: 1200px) {
        padding-left: 45px;
        padding-right: 45px;
    }

    @media screen and (max-width: 500px) {
        padding-left: 25px;
        padding-right: 25px;
    }
}

.family-matters .left h2 {
    font-size: 29px;
    color: #131f6b;
    line-height: 1.3em;
    margin-bottom: 1em;
}

.family-matters .left .description {
    font-size: 15px;
    color: #7a7a7a;
    line-height: 1.8em;
    margin-bottom: 2em;
}

.family-matters .left .content {
    max-width: calc(0vw + 550px);
    margin-left: auto;
    padding-right: 135px;

    @media screen and (max-width: 1200px) {
        max-width: 100%;
        padding-right: 0;
    }
}

.family-matters .left .description p {
    font-size: 15px;
    color: #7a7a7a;
    line-height: 1.8em;
    margin-bottom: 2em;
}

.family-matters .right {
    flex: 0 0 50%;
    position: relative;

    @media screen and (max-width: 1200px) {
        flex: 0 0 100%;
        width: 100%;
        max-height: 400px;
        height: 48vw;
    }
}

.family-matters .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* customer-service */
.customer-service {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 150px 0 150px 0;
    background-color: #131f6b;
    color: #fff;
    margin-bottom: 135px;

    @media screen and (max-width: 992px) {
        padding: 70px 0;
        margin-bottom: 80px;
    }

    @media screen and (max-width: 767px) {
        margin-bottom: 50px;
    }
}

.customer-service .left {
    flex: 0 0 40%;

    @media screen and (max-width: 992px) {
        flex: 0 0 100%;
    }
}

.customer-service .left .tm-c-grid {
    padding: 0;

    @media screen and (max-width: 992px) {
        padding-left: 45px;
        padding-right: 45px;
    }

    @media screen and (max-width: 500px) {
        padding-left: 25px;
        padding-right: 25px;
    }
}

.customer-service .left .content {
    max-width: calc(0vw + 360px);
    margin-left: auto;
    padding-right: 90px;

    @media screen and (max-width: 992px) {
        max-width: none;
        margin-bottom: 30px;
    }

    @media screen and (max-width: 767px) {
        padding-right: 0;
    }
}

.customer-service .left h2 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 1rem;
}

.customer-service .left img {
    width: 110px;
    height: auto;
    margin-bottom: 1.8rem;

    @media screen and (max-width: 767px) {
        display: none;
    }
}

.customer-service .right {
    flex: 0 0 38%;
    position: relative;
    border-left: dotted 5px;
    padding-left: 100px;

    @media screen and (max-width: 1500px) {
        flex: 0 0 50%;
    }

    @media screen and (max-width: 992px) {
        flex: 0 0 100%;
        border-left: 0;
        padding-right: 45px;
        padding-left: 45px;
    }

    @media screen and (max-width: 500px) {
        padding-right: 25px;
        padding-left: 25px;
    }
}

.customer-service .right img {
    position: absolute;
    right: -45px;
    top: -55px;
    width: 230px;
    height: auto;
    opacity: .1;

    @media screen and (max-width: 992px) {
        right: 45px;
        top: -80px;
        width: 80px;
    }
}

.customer-service .right .quote-description {
    font-size: 30px;
    margin-bottom: 2rem;
    line-height: 1.3;

    @media screen and (max-width: 500px) {
        font-size: 23px;
    }
}

.customer-service .right .quote-author {
    font-size: 14px;
    font-family: "Poppins-Medium";
}

/* service-restoration */
.service-restoration {
    margin-bottom: 140px;

    @media screen and (max-width: 992px) {
        margin-bottom: 50px;
    }
}

.service-restoration__top {
    position: relative;
    margin-bottom: 70px;

    @media screen and (max-width: 992px) {
        margin-bottom: 40px;
    }

    @media screen and (max-width: 767px) {
        margin-bottom: 20px;
    }
}

.service-restoration__top-icon {
    width: 100px;
    position: absolute;
    right: 0;
    top: -10px;
}

.service-restoration__top-icon img {
    width: 100%;
    height: auto;

    @media screen and (max-width: 992px) {
        display: none;
    }
}

.service-restoration__top-left {
    max-width: 665px;

    @media screen and (max-width: 992px) {
        max-width: none;
    }
}

.service-restoration .content h2 {
    font-size: 27px;
    color: #131f6b;
    margin-bottom: 0.8em;
}

.service-restoration .content {
    max-width: 1100px;
    margin: 0 auto;
}

.service-restoration .content p {
    font-size: 16px;
    color: #7a7a7a;
    line-height: 1.6em;
    flex: 0 0 85%;
}

.service-restoration  .service-restoration__bottom {

}

.service-restoration  .service-restoration__bottom > ul {
    display: flex;
    justify-content: space-between;

    @media screen and (max-width: 992px) {
        flex-direction: column;
        align-items: center;
    }
}

.service-restoration .service-restoration__bottom > ul > li {
    border-left: 1px solid rgba(19, 31, 107, 0.15);
    padding: 25px 15px 25px 45px;
    width: 25%;

    @media screen and (max-width: 992px) {
        width: 100%;
        padding: 25px 45px 25px 0;
        border-left: none;
        border-bottom: 1px solid rgba(19, 31, 107, 0.15);
    }
}

.service-restoration .service-restoration__bottom > ul > li:last-child {
    border-right: 1px solid rgba(19, 31, 107, 0.15);

    @media screen and (max-width: 992px) {
        border-right: none;
        border-bottom: none;
    }
}

.service-restoration .service-restoration__bottom .icon {
    margin-bottom: 30px;
}

.service-restoration .service-restoration__bottom .icon img {
    max-height: 52px;
}

.service-restoration .service-restoration__bottom .step-title {
    font-size: 21px;
    color: #131f6b;
    margin-bottom: 1.3em;
}

.service-restoration .step-description ul {
    /*display: flex;*/
    /*flex-direction: column;*/
}

.service-restoration .step-description ul li {
    position: relative;
    padding-left: 25px;
    font-size: 16px;
    color: #7a7a7a;
    margin-bottom: 10px;
}

.service-restoration .step-description ul li:before {
    content: '';
    width: 9px;
    height: 15px;
    background-image: url('/wp-content/themes/truemarket/assets/img/icons/icon-list-arrow-2x.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    top: 1px;
    left: 0;
}