:root {

    --brand: #ed7d31;

    --brand-dark: #c65d18;

    --navy: #17324d;

    --navy-2: #1d3557;

    --ink: #162536;

    --muted: #687585;

    --soft: #f5f7fa;

    --white: #fff;

    --line: #e7ebf0;

    --shadow: 0 18px 50px rgba(23, 50, 77, .10);

    --radius: 22px;

}



/* ============================================================

   GLOBAL

   ============================================================ */



html {

    scroll-behavior: smooth;

    width: 100%;

    max-width: 100%;

}



html,

body {

    width: 100%;

    max-width: 100%;

    margin: 0;

    padding: 0;

}



body {

    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    color: var(--ink);

    background: #fff;

    line-height: 1.7;

    overflow-x: hidden;

}



a {

    color: inherit;

}



img {

    max-width: 100%;

}



.skip-link {

    position: absolute;

    left: 12px;

    top: -100px;

    background: var(--navy);

    color: #fff;

    padding: 10px 14px;

    z-index: 3000;

    border-radius: 8px;

}



.skip-link:focus {

    top: 12px;

}





/* ============================================================
   NAVIGATION — COMPACT & RESPONSIVE
   ============================================================ */

.site-nav {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(23, 50, 77, .07);
    padding: 5px 0;
    transition: box-shadow .25s ease, padding .25s ease;
}

.site-nav.is-scrolled {
    box-shadow: 0 6px 22px rgba(23, 50, 77, .10);
    padding: 2px 0;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    margin: 0;
    color: var(--navy) !important;
    line-height: 1;
    flex-shrink: 0;
}

.site-brand span {
    display: flex;
    flex-direction: column;
}

.site-brand strong {
    font-size: 1.02rem;
}

.site-brand small {
    font-size: .55rem;
    letter-spacing: .18em;
    color: var(--brand);
    font-weight: 800;
    margin-top: 4px;
}

.site-brand .brand-logo {
    display: block;
    width: auto;
    height: 56px;
    max-width: 190px;
    object-fit: contain;
    object-position: left center;
}

.site-nav .nav-link {
    font-weight: 650;
    color: #45566a !important;
    padding: .45rem .7rem !important;
    line-height: 1.25;
    position: relative;
}

.site-nav .nav-link::after {
    content: "";
    position: absolute;
    left: .7rem;
    right: .7rem;
    bottom: .2rem;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after {
    transform: scaleX(1);
}

/* ============================================================

   BUTTONS

   ============================================================ */



.btn-brand {

    background: var(--brand);

    border-color: var(--brand);

    color: #fff !important;

    font-weight: 750;

    border-radius: 999px;

    box-shadow: 0 8px 18px rgba(237, 125, 49, .22);

}



.btn-brand:hover {

    background: var(--brand-dark);

    border-color: var(--brand-dark);

}



.btn-outline-brand {

    border: 1px solid var(--brand);

    color: var(--brand);

    font-weight: 700;

    border-radius: 999px;

}



.btn-outline-brand:hover {

    background: var(--brand);

    color: #fff;

}





/* ============================================================

   GENERIC HERO

   ============================================================ */



.hero {

    position: relative;

    min-height: 610px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--navy);

}



.hero-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        90deg,

        rgba(10, 27, 43, .88) 0%,

        rgba(10, 27, 43, .63) 45%,

        rgba(10, 27, 43, .24) 100%

    );

}



.hero-content {

    position: relative;

    z-index: 2;

    color: #fff;

    max-width: 780px;

}



.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-transform: uppercase;

    letter-spacing: .16em;

    font-size: .76rem;

    font-weight: 800;

    color: #ffd7bc;

}



.eyebrow:before {

    content: "";

    width: 28px;

    height: 2px;

    background: var(--brand);

}



.hero h1 {

    font-size: clamp(2.6rem, 6vw, 5rem);

    line-height: 1.02;

    font-weight: 850;

    letter-spacing: -.045em;

    margin: 18px 0;

}



.hero p {

    font-size: 1.12rem;

    color: rgba(255, 255, 255, .86);

    max-width: 700px;

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;

}





/* ============================================================

   HOMEPAGE HERO CAROUSEL

   Bootstrap handles the slide animation. These rules only define

   the hero's size, image layering and content layout so the

   carousel cannot inherit the generic .hero flex layout.

   ============================================================ */



.hero.hero-carousel {

    position: relative;

    display: block;

    width: 100%;

    min-height: 620px;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background: var(--navy);

}



.hero-carousel .carousel {

    width: 100%;

}



.hero-carousel .carousel-inner {

    width: 100%;

    overflow: hidden;

}



.hero-carousel .carousel-item {

    position: relative;

    width: 100%;

    min-height: 620px;

    overflow: hidden;

}



.hero-carousel .hero-bg {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center;

}



.hero-carousel .hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

}



.hero-carousel .hero-content {

    position: relative;

    z-index: 2;

    min-height: 620px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.hero-carousel .carousel-control-prev,

.hero-carousel .carousel-control-next {

    z-index: 3;

    width: 7%;

}



.hero-carousel .carousel-indicators {

    z-index: 3;

    margin-bottom: 1.25rem;

}



.hero-carousel .carousel-indicators button {

    width: 34px;

    height: 4px;

    border: 0;

    border-radius: 999px;

}



/* Keep the Bootstrap fade repaint inside the hero only. */

.hero.hero-carousel,

.hero-carousel .carousel,

.hero-carousel .carousel-inner {

    isolation: isolate;

}



.hero-carousel .carousel-item,

.hero-carousel .hero-bg {

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

}



/* ============================================================

   TOURS & TRAVEL SLIDE

   ============================================================ */



.hero-travel-slide {

    background: linear-gradient(

        135deg,

        #102a43 0%,

        #17324d 52%,

        #245b78 100%

    );

}



.hero-travel-slide .hero-travel-overlay {

    background: linear-gradient(

        90deg,

        rgba(10, 27, 43, .91) 0%,

        rgba(10, 27, 43, .76) 48%,

        rgba(10, 27, 43, .45) 100%

    );

}



.hero-travel-slide h2 {

    font-size: clamp(2.35rem, 5vw, 4.5rem);

    line-height: 1.05;

    font-weight: 800;

    max-width: 850px;

}



.hero-travel-slide p {

    max-width: 760px;

    font-size: 1.12rem;

    color: rgba(255, 255, 255, .88);

}





/* ============================================================

   TRAVEL FEATURE CARD

   ============================================================ */



.travel-feature-card {

    background: rgba(255, 255, 255, .1);

    border: 1px solid rgba(255, 255, 255, .2);

    backdrop-filter: blur(10px);

    padding: 2rem;

    border-radius: 24px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);

}



.travel-feature-card h3 {

    color: #fff;

    font-size: 1.35rem;

    margin: .75rem 0;

}



.travel-feature-card p {

    font-size: .98rem !important;

    margin-bottom: 1rem;

}



.travel-feature-card a {

    color: #fff;

    font-weight: 700;

    text-decoration: none;

}



.travel-feature-icon {

    width: 58px;

    height: 58px;

    border-radius: 16px;

    display: grid;

    place-items: center;

    background: var(--brand);

    color: #fff;

    font-size: 1.35rem;

}





/* ============================================================

   GENERAL SECTIONS

   ============================================================ */



.section {

    padding: 88px 0;

}



.section-soft {

    background: var(--soft);

}



.section-kicker {

    color: var(--brand);

    font-size: .76rem;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .16em;

}



.section-title {

    font-size: clamp(2rem, 4vw, 3.2rem);

    line-height: 1.12;

    font-weight: 820;

    letter-spacing: -.035em;

    color: var(--navy);

    margin: 8px 0 16px;

}



.section-lead {

    color: var(--muted);

    max-width: 700px;

    font-size: 1.05rem;

}





/* ============================================================

   IMAGES

   ============================================================ */



.image-frame {

    position: relative;

    border-radius: 28px;

    overflow: hidden;

    box-shadow: var(--shadow);

}



.image-frame img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.placeholder-image {

    min-height: 360px;

    background: linear-gradient(135deg, #dfe7ee, #f7f9fb);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #607286;

    text-align: center;

    padding: 30px;

}



.placeholder-image span {

    font-weight: 750;

}





/* ============================================================

   SERVICE CARDS

   ============================================================ */



.service-card {

    height: 100%;

    background: #fff;

    border: 1px solid var(--line);

    border-radius: var(--radius);

    padding: 28px;

    box-shadow: 0 10px 30px rgba(23, 50, 77, .055);

    transition: transform .28s, box-shadow .28s, border-color .28s;

}



.service-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow);

    border-color: rgba(237, 125, 49, .35);

}



.service-icon {

    width: 56px;

    height: 56px;

    border-radius: 16px;

    background: #fff0e6;

    color: var(--brand);

    display: grid;

    place-items: center;

    font-size: 1.25rem;

    margin-bottom: 22px;

}



.service-card h3 {

    font-size: 1.25rem;

    font-weight: 800;

    color: var(--navy);

}



.service-card p {

    color: var(--muted);

}



.service-link {

    color: var(--brand);

    font-weight: 800;

    text-decoration: none;

}



.service-link i {

    transition: transform .2s;

}



.service-link:hover i {

    transform: translateX(4px);

}





/* ============================================================

   FEATURES

   ============================================================ */



.feature-list {

    display: grid;

    gap: 18px;

}



.feature {

    display: flex;

    gap: 14px;

}



.feature-icon {

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #fff0e6;

    color: var(--brand);

    display: grid;

    place-items: center;

}



.feature h3 {

    font-size: 1rem;

    font-weight: 800;

    margin: 0 0 2px;

}



.feature p {

    margin: 0;

    color: var(--muted);

    font-size: .95rem;

}





/* ============================================================

   STATS

   ============================================================ */



.stats-section {

    background: var(--brand);

    color: #fff;

}



.stat {

    padding: 15px;

}



.stat-number {

    font-size: clamp(2.4rem, 5vw, 3.8rem);

    font-weight: 850;

    line-height: 1;

}



.stat-label {

    margin-top: 10px;

    color: rgba(255, 255, 255, .85);

}





/* ============================================================

   PROCESS

   ============================================================ */



.process-card {

    position: relative;

    padding: 28px;

    background: #fff;

    border: 1px solid var(--line);

    border-radius: 22px;

    height: 100%;

}



.process-number {

    font-size: .75rem;

    font-weight: 850;

    color: var(--brand);

    letter-spacing: .12em;

}



.process-card h3 {

    font-size: 1.12rem;

    font-weight: 800;

    color: var(--navy);

    margin-top: 12px;

}



.process-card p {

    color: var(--muted);

    margin: 0;

}





/* ============================================================

   CTA

   ============================================================ */



.cta-band {

    background: linear-gradient(135deg, var(--navy), #244d70);

    color: #fff;

    border-radius: 30px;

    padding: 54px;

}



.cta-band h2 {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 820;

    letter-spacing: -.035em;

}



.cta-band p {

    color: rgba(255, 255, 255, .78);

}





/* ============================================================

   PAGE HERO

   ============================================================ */



.page-hero {

    background: linear-gradient(135deg, var(--navy), #28516f);

    color: #fff;

    padding: 92px 0 86px;

    position: relative;

    overflow: hidden;

}



.page-hero:after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    right: -180px;

    top: -220px;

    background: rgba(237, 125, 49, .22);

}



.page-hero .container {

    position: relative;

    z-index: 1;

}



.page-hero h1 {

    font-size: clamp(2.5rem, 5vw, 4rem);

    font-weight: 850;

    letter-spacing: -.04em;

}



.page-hero p {

    color: rgba(255, 255, 255, .8);

    max-width: 680px;

}





/* ============================================================

   VALUE CARDS

   ============================================================ */



.value-card {

    height: 100%;

    padding: 30px;

    border-radius: 24px;

    background: #fff;

    border: 1px solid var(--line);

    box-shadow: 0 12px 30px rgba(23, 50, 77, .06);

}



.value-card i {

    font-size: 1.4rem;

    color: var(--brand);

}



.value-card h3 {

    font-size: 1.15rem;

    font-weight: 800;

    margin-top: 18px;

}



.value-card p {

    color: var(--muted);

    margin: 0;

}





/* ============================================================

   SERVICE DETAILS

   ============================================================ */



.service-detail {

    scroll-margin-top: 110px;

    background: #fff;

    border: 1px solid var(--line);

    border-radius: 24px;

    padding: 30px;

    height: 100%;

}



.service-detail:target {

    border-color: var(--brand);

    box-shadow: 0 0 0 4px rgba(237, 125, 49, .10);

}



.service-detail h2 {

    font-size: 1.45rem;

    font-weight: 820;

    color: var(--navy);

}



.service-detail p,

.service-detail li {

    color: var(--muted);

}



.service-detail ul {

    padding-left: 1.1rem;

}





/* ============================================================

   FORMS

   ============================================================ */



.quote-shell,

.contact-shell {

    background: #fff;

    border: 1px solid var(--line);

    border-radius: 28px;

    box-shadow: var(--shadow);

    overflow: hidden;

}



.form-section {

    padding: 34px;

}



.form-section + .form-section {

    border-top: 1px solid var(--line);

}



.form-label {

    font-weight: 700;

    color: var(--navy);

}



.form-control,

.form-select {

    border: 1px solid #d9e0e7;

    border-radius: 12px;

    padding: .78rem .9rem;

}



.form-control:focus,

.form-select:focus {

    border-color: var(--brand);

    box-shadow: 0 0 0 .2rem rgba(237, 125, 49, .13);

}



.form-check-input:checked {

    background-color: var(--brand);

    border-color: var(--brand);

}



.inventory-table input {

    min-width: 80px;

}



.result-box {

    border-radius: 16px;

    padding: 18px;

}





/* ============================================================

   FAQ

   ============================================================ */



.faq .accordion-item {

    border: 1px solid var(--line) !important;

    border-radius: 14px !important;

    margin-bottom: 10px;

    overflow: hidden;

}



.faq .accordion-button {

    font-weight: 750;

    color: var(--navy);

    box-shadow: none !important;

}



.faq .accordion-button:not(.collapsed) {

    background: #fff5ed;

    color: var(--navy);

}





/* ============================================================

   FOOTER

   ============================================================ */



.site-footer {

    background: var(--navy-2);

    color: #fff;

}



.footer-brand {

    font-size: 1.25rem;

    font-weight: 850;

}



.footer-brand span {

    color: #ffc29a;

}



.footer-muted {

    color: rgba(255, 255, 255, .68);

}



.footer-heading {

    font-size: .8rem;

    text-transform: uppercase;

    letter-spacing: .14em;

    color: #ffc29a;

    font-weight: 800;

    margin-bottom: 16px;

}



.site-footer a {

    text-decoration: none;

    color: rgba(255, 255, 255, .8);

    display: block;

    margin-bottom: 8px;

}



.site-footer a:hover {

    color: #fff;

}



.footer-social a {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .09);

    display: grid;

    place-items: center;

    margin: 0;

}



.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, .1);

    color: rgba(255, 255, 255, .58);

    font-size: .84rem;

}





/* ============================================================

   FLOATING BUTTONS / LOADER

   ============================================================ */



.floating-whatsapp,

.back-to-top {

    position: fixed;

    width: 52px;

    height: 52px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    z-index: 1050;

    border: 0;

    box-shadow: 0 12px 25px rgba(0, 0, 0, .18);

    text-decoration: none;

}



.floating-whatsapp {

    right: 20px;

    bottom: 20px;

    background: #25d366;

    color: #fff;

    font-size: 1.5rem;

}



.back-to-top {

    right: 20px;

    bottom: 82px;

    background: var(--navy);

    color: #fff;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: .25s;

}



.back-to-top.show {

    opacity: 1;

    visibility: visible;

    transform: none;

}



.page-loader {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: var(--brand);

    transform: scaleX(0);

    transform-origin: left;

    opacity: 0;

    z-index: 5000;

    transition: .2s;

}



.page-loader.loading {

    opacity: 1;

    transform: scaleX(.65);

    animation: loader 1s ease-in-out infinite alternate;

}



@keyframes loader {

    to {

        transform: scaleX(1);

    }

}



.htmx-request .page-loader {

    display: block;

}





/* ============================================================

   RESPONSIVE

   ============================================================ */



@media (max-width: 1199.98px) {



    .hero-carousel .hero-content {

        max-width: 960px;

    }



}



@media (max-width: 991.98px) {



    .site-brand .brand-logo {
        height: 46px;
        max-width: 160px;
    }

    .site-nav .navbar-collapse {
        padding-top: 8px;
    }

    .site-nav .nav-link {
        padding: .55rem .65rem !important;
    }

    .site-nav .nav-link::after {
        display: none;
    }



    .nav-link:after {

        display: none;

    }



    .hero {

        min-height: 560px;

    }



    .section {

        padding: 68px 0;

    }



    .cta-band {

        padding: 38px 26px;

    }



    .hero.hero-carousel {

        min-height: 560px;

    }



    .hero-carousel .carousel-item,

    .hero-carousel .hero-content {

        min-height: 560px;

    }



    .hero-carousel .carousel-control-prev,

    .hero-carousel .carousel-control-next {

        width: 10%;

    }



    .floating-whatsapp {

        bottom: 18px;

    }



    .back-to-top {

        bottom: 78px;

    }



}



@media (max-width: 767.98px) {



    .hero-carousel .carousel-item,

    .hero-carousel .hero-content {

        min-height: 610px;

    }



    .hero-carousel .carousel-control-prev,

    .hero-carousel .carousel-control-next {

        width: 12%;

    }



    .hero-carousel .carousel-indicators {

        margin-bottom: .75rem;

    }



    .hero-travel-slide h2 {

        font-size: 2.25rem;

    }



}



@media (max-width: 575.98px) {



    
    .site-brand .brand-logo {
        height: 42px;
        max-width: 145px;
    }
.site-brand strong {

        font-size: .9rem;

    }



    .site-brand small {

        font-size: .48rem;

    }



    .hero {

        min-height: 540px;

    }



    .hero h1 {

        font-size: 2.55rem;

    }



    .hero p {

        font-size: 1rem;

    }



    .hero-actions .btn {

        width: 100%;

    }



    .page-hero {

        padding: 68px 0;

    }



    .section {

        padding: 58px 0;

    }



    .hero-carousel,

    .hero-carousel .carousel-item,

    .hero-carousel .hero-content {

        min-height: 540px;

    }



    .floating-whatsapp,

    .back-to-top {

        width: 48px;

        height: 48px;

        right: 16px;

    }



}





/* ============================================================

   PRINT

   ============================================================ */



@media print {



    .site-nav,

    .site-footer,

    .floating-whatsapp,

    .back-to-top,

    .page-loader,

    .no-print {

        display: none !important;

    }



    .hero {

        min-height: auto;

    }



    .quote-shell {

        box-shadow: none;

        border: 0;

    }



}



/* Services: visual feature rows with image placeholders */

.service-feature-list {

    display: grid;

    gap: 34px;

}



.service-feature-row {

    display: grid;

    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);

    align-items: stretch;

    scroll-margin-top: 110px;

}



.service-feature-row-reverse {

    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);

}



.service-feature-row-reverse .service-feature-image {

    order: 2;

}



.service-feature-row-reverse .service-feature-card {

    order: 1;

}



.service-feature-image {

    min-height: 390px;

    position: relative;

    z-index: 1;

}



.service-image-placeholder {

    position: relative;

    height: 100%;

    min-height: 390px;

    overflow: hidden;

    border-radius: 28px 0 0 28px;

    background: linear-gradient(135deg, #e5ebf0, #f8fafb);

    box-shadow: 0 18px 45px rgba(23, 50, 77, .10);

}



.service-feature-row-reverse .service-image-placeholder {

    border-radius: 0 28px 28px 0;

}



.service-image-placeholder img {

    width: 100%;

    height: 100%;

    min-height: 390px;

    display: block;

    object-fit: cover;

}



.service-image-placeholder::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, rgba(13, 36, 56, .04), rgba(237, 125, 49, .16));

    pointer-events: none;

}



.service-image-label {

    position: absolute;

    left: 22px;

    bottom: 22px;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 14px;

    border-radius: 999px;

    background: rgba(13, 36, 56, .88);

    color: #fff;

    font-size: .82rem;

    font-weight: 800;

    backdrop-filter: blur(8px);

}



.service-image-label i {

    color: #ffc29a;

}



.service-feature-card {

    position: relative;

    z-index: 2;

    align-self: center;

    margin: 28px 0 28px -38px;

    padding: 34px;

    border-radius: 24px;

    box-shadow: 0 20px 55px rgba(23, 50, 77, .12);

}



.service-feature-row-reverse .service-feature-card {

    margin: 28px -38px 28px 0;

}



.service-feature-row:target .service-feature-card {

    border-color: var(--brand);

    box-shadow: 0 0 0 4px rgba(237, 125, 49, .10), 0 20px 55px rgba(23, 50, 77, .12);

}



.service-card-topline {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    margin-bottom: 22px;

}



.service-request-indicator {

    display: inline-flex;

    align-items: center;

    padding: 8px 12px;

    border-radius: 999px;

    background: #fff3e9;

    color: var(--brand);

    font-size: .72rem;

    font-weight: 850;

    white-space: nowrap;

}



.service-feature-card h2 {

    font-size: clamp(1.45rem, 2.2vw, 2rem);

    font-weight: 850;

    color: var(--navy);

    margin-bottom: 12px;

}



.service-feature-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 26px;

}



.prefilled-service-badge {

    display: inline-flex;

    align-items: center;

    padding: 5px 9px;

    border-radius: 999px;

    background: #fff3e9;

    color: var(--brand);

    font-size: .68rem;

    font-weight: 850;

    white-space: nowrap;

}



@media (max-width: 991.98px) {

    .service-feature-row,

    .service-feature-row-reverse {

        grid-template-columns: 1fr;

    }



    .service-feature-row-reverse .service-feature-image,

    .service-feature-row-reverse .service-feature-card {

        order: initial;

    }



    .service-image-placeholder,

    .service-feature-row-reverse .service-image-placeholder {

        border-radius: 28px 28px 0 0;

    }



    .service-feature-card,

    .service-feature-row-reverse .service-feature-card {

        margin: -24px 18px 0;

        border-radius: 24px;

    }

}



@media (max-width: 575.98px) {

    .service-feature-image,

    .service-image-placeholder,

    .service-image-placeholder img {

        min-height: 280px;

    }



    .service-feature-card,

    .service-feature-row-reverse .service-feature-card {

        margin: -18px 10px 0;

        padding: 24px;

    }



    .service-card-topline {

        align-items: flex-start;

        flex-direction: column;

    }



    .service-feature-actions .btn {

        width: 100%;

    }



    .service-feature-actions {

        align-items: stretch;

    }

}