.service-bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.service-bg img {width: 100%; height: 100%; object-fit: cover;}

.service-banner {height: 200px; position: relative;}
.service-banner .container {max-width: 1010px; position: relative;}
/*.service-banner::after {width: 100%; height: 6px; background-color: var(--_c-submit-anchor); position: absolute; top: 131px; left: 0; content: "";} */
/*.service-banner::before {width: 100%; height: 3px; background-color: #fff; position: absolute; top: 148px; left: 0; content: "";}*/
.service-banner .container > :first-child {font-size: 63px; line-height: 85px; color: #fff; text-transform: uppercase; margin-bottom: 0; position: absolute; top: 52px;}
.service-banner .container > :nth-child(2) {font-size: 19px; color: #fff; position: absolute; top: 167px;}

.service-hero {}
.service-hero .wrapper {max-width: 1010px; display: grid; grid-template-columns: repeat(3, 1fr); padding-inline: 15px; gap: 40px; margin-inline: auto;}
.service-hero .wrapper .service-box {background-color: #fff; z-index: 2;}
.service-hero .wrapper .service-box img {width: 100%; height: 100%; object-fit: cover;}
.service-hero .service-card {width: 100%; display: flex; flex-direction: column; position: relative;    margin-bottom: 50px;}
/*.service-hero .service-box::after {width: 45px; height: 100%; background-color: #fff; position: absolute; right: -40px; top: 0; content: ""; z-index: -1;}*/
.service-hero .wrapper > :last-child .service-box::after {content: unset;}
.service-hero .service-text {background-color: #fff; height: 100%; }
.service-hero .service-text > :first-child {display: block; font-size: 22px; color: var(--_c-service-heading); text-align: center; padding-block: 47px 31px;}
.service-hero .service-text p {font-size: 17px; text-align: center; line-height: 32px; color: var(--_c-service-heading); padding-inline: 10px; padding-bottom: 90px;}
.service-hero .services-line {max-width: 980px; height: 353px; margin-block: 56px 10px; margin-inline: auto; position: relative;}
.service-hero .services-line::after {width: 3px; height: 100%; background-color: #fff; position: absolute; top: 0; right: 33%; transform: translateX(50%); content: "";}
.service-hero .services-line::before {width: 3px; height: 100%; background-color: #fff; position: absolute; top: 0; right: 66%; transform: translateX(50%); content: "";}
/*.service-hero .second-wrapper .service-card::after {width: 3px; height: 353px; background-color: #fff; position: absolute; top: 260px; left: -12px; transform: translateX(50%); content: "";}*/
.service-hero .second-wrapper > :first-child::after {content: unset;}


.service-brand {position: relative; border-top: 10px solid #fff;}
.service-brand .carousel-item {height: 596px; position: relative;}
.service-brand .carousel-item > img {width: 100%; height: 100%; object-fit: cover;}
.service-brand .service-box {position: absolute; top: 34px; left: 50%; transform: translateX(-50%); z-index: 1;}
.service-brand .service-box > :first-child {font-size: 47px; font-family: 'Times New Roman', Times, serif; text-align: center; color: #fff;}
.service-brand .service-box > :nth-child(2) {font-size: 34px; font-family: 'Times New Roman', Times, serif; text-align: center; color: #fff;}
.service-brand .service-box > :nth-child(2) span {color: var(--_c-process-heading); text-transform: uppercase;}
.service-brand .service-card {width: 100%; max-width: 511px; padding-block: 47px 42px; margin-inline: auto; margin-top: 37px; background-color: var(--_c-service-bg);}
.service-brand .service-card > * {font-size: 18px; font-weight: 700; text-align: center; color: #fff;}
.service-brand .service-card > :first-child {display: block; color: var(--c-footer-text);}
.service-brand .service-card > :nth-child(2) {margin-block: 23px;}
.service-brand .service-card li {list-style: inside;}
.service-brand .service-card li span {color: var(--c-footer-text);}
.service-brand .carousel-inner >:first-child::after {width: 100%; height: 10px; background-color: var(--_c-service-after); position: absolute; bottom: 44px; left: 0; content: "";} 
.service-brand .carousel-item::before {width: 100%; height: 100%; background-color: var(--_c-service-bg-lg); position: absolute; top: 0; left: 0; content: "";}
.service-brand .service-text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.service-brand .service-text > :first-child {font-size: 50px; color: #fff; font-family: 'Times New Roman', Times, serif; font-weight: 400; text-align: center;}
.service-brand .service-text > :first-child span {color: var(--c-secondary);}
.service-brand .service-text > :nth-child(2) {width: 100%; max-width: 467px; font-size: 18px; text-align: center; color: #fff; margin-top: 58px;}

.service-brand .carousel-indicators button {width: 6px; height: 6px; border-radius: 50%; background-color: var(--_c-dots); border: 3px solid transparent; opacity: 1;}
.service-brand .carousel-indicators button.active {background-color: transparent; border: 3px solid var(--_c-dots);}
.service-brand :where(.carousel-control-next, .carousel-control-prev) {opacity: 1;}
.service-brand :where(.carousel-control-next, .carousel-control-prev):hover {opacity: 0.6;}
.service-brand :where(.carousel-control-next-icon, .carousel-control-prev-icon) {width: 3rem; height: 3rem; filter: var(--_c-arrows-filter);}


@media only screen and (max-width: 1200px) {
    .service-banner {height: 480px;}
    .service-hero > :first-child {margin-bottom: 20px;}
    .service-hero .services-line {display: none;}
}

@media only screen and (max-width: 991px) {
    .service-banner {height: 400px;}
    .service-hero .second-wrapper .service-card::after {content: unset;}
    .service-brand .service-text > :first-child {font-size: 40px;}
    .service-brand .service-box {width: calc(100% - 24px); }
    .service-brand .service-card {max-width: 960px;}
    .service-brand :where(.carousel-control-next-icon, .carousel-control-prev-icon) {width: 2rem; height: 2rem;}
}

@media only screen and (max-width: 768px) {
    .service-banner .container > :first-child {font-size: 50px;}
    .service-hero .wrapper {grid-template-columns: repeat(2, 1fr); gap: 20px; padding-inline: 12px;}
    .service-hero .wrapper > :nth-child(2) .service-box::after {content: unset;}
    .service-hero .service-text > :first-child {padding-block: 20px;}
    .service-hero .service-text p {font-size: 16px;}
    .service-brand .service-text > :first-child {font-size: 30px;}
    .service-brand .service-text > :nth-child(2) {margin-top: 35px;}
    .service-brand .service-box > :first-child {font-size: 40px;}
    .service-brand .service-box > :nth-child(2) {font-size: 28px;}
}

@media only screen and (max-width: 576px) {
    .service-banner .container > :first-child {font-size: 40px; top: 60px;}
    .service-banner .container > :nth-child(2) {font-size: 16px; top: 155px;}
    .service-hero .service-text > :first-child {padding-block: 16px;}
    .service-hero .service-box::after {content: unset;}
    .service-hero .wrapper {max-width: 390px; grid-template-columns: 1fr;}
    .service-brand .service-text > :nth-child(2) {font-size: 16px;}
    .service-brand .carousel-item {height: 640px;}
}