.section-6 {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: var(--body-bg);
}

.section-6 .title-color {
color: var(--primary-gold);
}

.section-6 .title-color span {
color: var(--black);
}

.section-6 .companies-slider {
position: relative;
width: 100%;
}

.section-6 .companies-slider > div {
padding-left: var(--space-2);
padding-right: var(--space-2);
}

.section-6 .supporter-logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

.section-6 .supporter-logo img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
object-fit: contain;
}

@media (max-width: 1200px) {
.section-6 .slick-prev {
left: -20px;
}


.section-6 .slick-next {
    right: -20px;
}

}

@media (max-width: 768px) {
.section-6 .slick-prev,
.section-6 .slick-next {
width: var(--slick-mobile-arrow-size);
height: var(--slick-mobile-arrow-size);
}


.section-6 .slick-prev i,
.section-6 .slick-next i {
    font-size: var(--slick-mobile-icon-size);
}


}

@media (max-width: 576px) {
.section-6 .slick-prev {
left: -20px;
}


.section-6 .slick-next {
    right: -20px;
}


}

@media (prefers-reduced-motion: reduce) {
.section-6 .companies-slider .slick-slide img {
transition: none;
transform: none;
}
}


.services-slider-wrapper {
    position: relative;

    width: 100%;

    padding: 0 5px;
}

.services-slider {
    box-sizing: border-box;
}

.services-slider .slick-track {
    display: flex;
}

.services-slider .slick-slide {
    height: auto;
}

.services-slider .slick-slide > div {
    height: 100%;
}

.service-slide {
    height: 100%;
    padding: 10px;
}

.service-slide .card {
    height: 100%;
}

.slider-item {
    width: 100%;
}


/* =========================================================
   30. SERVICE CARD
========================================================= */

.service-card {
    position: relative;

    height: 100%;

    padding: 0;

    overflow: hidden;

    border:
        var(--service-card-border-width)
        solid
        var(--border-hover-color);

    background:
        linear-gradient(
            145deg,
            var(--gradient-start) 0%,
            var(--gradient-middle) 55%,
            var(--gradient-end) 100%
        );

    text-align: left;

    border-radius: var(--service-card-radius);

    isolation: isolate;

    transition:
        transform var(--transition-medium),
        border-color var(--transition-medium),
        box-shadow var(--transition-medium);
}

.service-card::before {
    content: "";

    position: absolute;

    top: var(--service-decoration-top);
    right: var(--service-decoration-right);

    width: var(--service-decoration-width);
    height: var(--service-decoration-height);

    background:
        linear-gradient(
            135deg,
            var(--gradient-start),
            var(--gradient-end)
        );

    transform: rotate(var(--service-decoration-rotation));

    z-index: -1;

    pointer-events: none;
}

.service-card::after {
    content: "";

    position: absolute;

    bottom: var(--service-decoration-bottom);
    left: var(--service-decoration-left);

    width: var(--service-decoration-width);
    height: var(--service-decoration-bottom-height);

    border:
        var(--service-decoration-border-width)
        solid
        var(--border-hover-color);

    transform: rotate(var(--service-decoration-bottom-rotation));

    z-index: -1;

    pointer-events: none;
}

.service-card:hover {
    border-color: var(--border-color);

    transform: translateY(var(--service-card-hover-y));

    box-shadow: none;
}


/* =========================================================
   31. SERVICE CARD IMAGE
========================================================= */

.service-card-image-link {
    position: relative;

    display: block;

    overflow: hidden;

    background: var(--dark-5);

    z-index: 2;
}

.service-card-image-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: var(--primary-gold);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--transition-medium);

    z-index: 3;
}

.service-card:hover .service-card-image-link::after {
    transform: scaleX(1);
}

.service-card-image-link .card-img-top {
    width: 100%;
    height: var(--service-card-image-height);

    object-fit: cover;

    transform: scale(1);

    transition:
        transform var(--transition-slow),
        filter var(--transition-slow);

    will-change: transform;
}

.service-card:hover .service-card-image-link .card-img-top {
    transform: scale(1.045);
    filter: brightness(0.9);
}


/* =========================================================
   32. SERVICE CARD BODY
========================================================= */

.service-card .card-body {
    position: relative;

    display: flex;

    flex-direction: column;
    align-items: flex-start;

    min-height: var(--service-card-body-min-height);

    padding: var(--service-card-body-padding);

    background:
        linear-gradient(
            180deg,
            rgba(15, 15, 15, 0.98),
            var(--dark-1)
        );

    z-index: 2;
}

.service-card .card-body::before {
    content: "";

    position: absolute;

    top: 0;
    left: var(--service-card-top-line-left);

    width: var(--service-card-top-line-width);
    height: var(--service-card-top-line-height);

    background: var(--primary-gold);
}


/* =========================================================
   33. SERVICE CARD SUBCATEGORY
========================================================= */

.service-subcategory-name {
    margin-top: 2px;
    margin-bottom: 6px;

    color: var(--primary-gold);

    font-size: 13px;
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.5px;

    text-transform: uppercase;
}

.service-card .service-subcategory-name {
    margin-top: 5px;
    margin-bottom: 7px;

    font-size: var(--service-card-subcategory-size);
    font-weight: var(--font-weight-bold);

    letter-spacing: 1.5px;
}


/* =========================================================
   34. SERVICE CARD TITLE
========================================================= */

.service-card .card-title {
    width: 100%;

    margin: 3px 0 0;
}

.service-card .card-title a {
    display: block;

    min-height: 2.5em;

    color: var(--white);

    font-size: var(--service-card-title-size);
    font-weight: var(--font-weight-bold);

    line-height: 1.3;

    text-align: left;

    transition: color var(--transition-normal);
}

.service-card:hover .card-title a {
    color: var(--primary-gold);
}


/* =========================================================
   35. SERVICE CARD DESCRIPTION
========================================================= */

.service-card .content {
    width: 100%;
}

.service-card .card-text {
    width: 100%;

    min-height: 4.5em;

    margin: 10px 0 0;

    color: var(--white);

    font-size: var(--service-card-description-size);

    line-height: var(--line-height-normal);

    text-align: left;

    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}


/* =========================================================
   36. SERVICE ACTION BUTTON
========================================================= */

.service-action-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 30px !important;

    padding: var(--service-card-button-padding);

    border: 1px solid var(--primary-gold);
    border-radius: var(--service-card-button-radius);

    background: transparent;

    color: var(--primary-gold);

    font-size: 15px;
    font-weight: var(--font-weight-semibold);

    line-height: var(--line-height-tight);

    text-align: center;
    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.service-card .service-action-btn {
    margin-top: auto;
    align-self: flex-start;
}

.service-action-btn i {
    font-size: 13px;

    transition:
        transform var(--transition-normal),
        color var(--transition-normal);
}

.service-action-btn:hover,
.service-action-btn:focus {
    background-color: var(--primary-gold);

    border-color: var(--primary-gold);

    color: var(--text-dark);

    text-decoration: none;
}

.service-action-btn:hover i,
.service-action-btn:focus i {
    transform: translateX(4px);
}

.service-action-btn:active {
    transform: translateY(1px);
}


/* =========================================================
   37. SERVICE DETAIL
========================================================= */

.service-detail-section {
    padding: var(--service-detail-padding-y) 0;

    background-color: var(--white);
}

.service-main-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    width: 100%;

    margin-bottom: var(--service-main-row-margin-bottom);
}

.service-main-row > .col-12 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

.service-main-video {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* =========================================================
   38. MAIN VIDEO
========================================================= */

.main-video-card {
    position: relative;

    width: 100%;

    overflow: hidden;

    border: 1px solid var(--border-gold-light);

    border-radius: var(--service-card-radius);

    background:
        linear-gradient(
            145deg,
            var(--gradient-start) 0%,
            var(--gradient-middle) 55%,
            var(--gradient-end) 100%
        );

    cursor: pointer;

    transition:
        transform var(--transition-medium),
        border-color var(--transition-medium);
}

.main-video-card:hover {
    transform: translateY(var(--service-card-hover-y));

    border-color: var(--border-color);
}

.main-video-thumbnail {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.main-video-thumbnail img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform var(--transition-slow),
        filter var(--transition-slow);
}

.main-video-card:hover .main-video-thumbnail img {
    transform: scale(1.045);
    filter: brightness(0.75);
}


/* =========================================================
   39. MAIN VIDEO PLAY BUTTON
========================================================= */

.main-video-thumbnail .video-play-button {
    position: absolute;

    top: 50%;
    left: 50%;

    width: var(--main-video-play-size);
    height: var(--main-video-play-size);

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        var(--video-play-button-border-width)
        solid
        var(--primary-gold);

    border-radius: var(--radius-circle);

    background: var(--black-overlay-darker);

    color: var(--primary-gold);

    transform:
        translate(-50%, -50%)
        scale(1);

    transition:
        transform var(--transition-normal),
        background var(--transition-normal);
}

.main-video-card:hover .video-play-button {
    transform:
        translate(-50%, -50%)
        scale(1.1);

    background: var(--primary-gold-soft);
}

.main-video-thumbnail .video-play-button i {
    font-size: 23px;

    margin-left: 4px;
}


/* =========================================================
   40. MAIN SERVICE IMAGE
========================================================= */

.main-service-image {
    position: relative;

    overflow: hidden;

    border: 1px solid var(--border-gold-light);

    border-radius: var(--service-card-radius);
}

.main-service-image img {
    width: 100%;
    height: var(--main-media-height);

    display: block;

    object-fit: cover;
}


/* =========================================================
   42. SERVICE FULL DESCRIPTION
========================================================= */

.service-full-description {
    margin-top: var(--service-full-description-margin-top);
    margin-bottom: var(--service-full-description-margin-bottom);
}

.service-full-description h2 {
    margin-bottom: 20px;

    font-size: var(--service-full-description-title-size);
    font-weight: var(--font-weight-extrabold);
}

.description-content {
    color: var( --text-darkq);

    font-size: 25px;

    line-height: var(--line-height-content);
}

.description-content p,
.description-content strong,
.description-content b {
    color: var(--white);
}

.description-content span {
    color: inherit;
}

.description-content a {
    color: var(--primary-gold);
}


/* =========================================================
   43. SERVICE MEDIA SECTION
========================================================= */

.service-media-section {
    position: relative;

    width: 100%;

    margin-top: var(--service-media-section-margin-y);
    margin-bottom: var(--service-media-section-margin-y);
}

.service-media-heading {
    margin-bottom: var(--service-media-heading-margin-bottom);

    text-align: center;
}

.service-media-heading h2 {
    margin: 0 0 10px;

    font-size: var(--service-media-heading-size);
    font-weight: var(--font-weight-bold);
}

.service-media-slider-wrapper {
    position: relative;

    width: 100%;

    padding: 0 5px;
}


/* =========================================================
   44. MEDIA SLIDERS
========================================================= */

.service-gallery-slider .slick-track,
.additional-videos-slider .slick-track {
    display: flex;
}

.service-gallery-slider .slick-slide,
.additional-videos-slider .slick-slide {
    height: auto;
}

.service-gallery-slider .slick-slide > div,
.additional-videos-slider .slick-slide > div {
    height: 100%;
}

.service-media-slide {
    height: 100%;

    padding: 10px;
}


/* =========================================================
   45. MEDIA CARD
========================================================= */

.service-media-card {
    position: relative;

    width: 100%;
    height: var(--service-media-card-height);

    overflow: hidden;

    border: 1px solid var(--border-gold-light);

    border-radius: var(--service-media-card-radius);

    background:
        linear-gradient(
            145deg,
            var(--gradient-start) 0%,
            var(--gradient-middle) 55%,
            var(--gradient-end) 100%
        );

    isolation: isolate;

    transition:
        transform var(--transition-medium),
        border-color var(--transition-medium);
}

.service-media-card::before {
    content: "";

    position: absolute;

    top: var(--service-media-decoration-top);
    right: var(--service-media-decoration-right);

    width: var(--service-media-decoration-width);
    height: var(--service-media-decoration-height);

    background:
        linear-gradient(
            135deg,
            var(--primary-gold-subtle),
            var(--primary-gold-very-faint)
        );

    transform: rotate(var(--service-media-decoration-rotation));

    pointer-events: none;

    z-index: 1;
}

.service-media-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: var(--service-media-bottom-line-height);

    background: var(--primary-gold);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform var(--transition-medium);

    z-index: 10;
}

.service-media-card:hover {
    transform: translateY(var(--service-card-hover-y));

    border-color: var(--border-color);
}

.service-media-card:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   46. MEDIA IMAGE
========================================================= */

.service-gallery-image-link {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.service-media-image {
    width: 100%;
    height: var(--service-media-card-height);

    display: block;

    object-fit: cover;

    transition:
        transform var(--transition-slow),
        filter var(--transition-slow);
}

.service-media-card:hover .service-media-image {
    transform: scale(1.045);

    filter: brightness(0.9);
}


/* =========================================================
   47. VIDEO CARD
========================================================= */

.service-video-card {
    cursor: pointer;
}

.service-video-thumbnail {
    position: relative;

    width: 100%;
    height: var(--service-media-card-height);

    overflow: hidden;
}

.service-video-thumbnail .service-media-image {
    width: 100%;
    height: var(--service-media-card-height);

    object-fit: cover;
}


/* =========================================================
   48. VIDEO OVERLAY
========================================================= */

.service-video-overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--video-overlay-light);

    transition: background var(--transition-normal);
}

.service-video-card:hover .service-video-overlay {
    background: var(--video-overlay-hover);
}


/* =========================================================
   49. VIDEO PLAY BUTTON
========================================================= */

.service-video-play {
    position: absolute;

    top: 50%;
    left: 50%;

    width: var(--video-play-button-size);
    height: var(--video-play-button-size);

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        var(--video-play-button-border-width)
        solid
        var(--primary-gold);

    border-radius: var(--radius-circle);

    background: var(--black-overlay-darker);

    color: var(--primary-gold);

    transform:
        translate(-50%, -50%)
        scale(1);

    transition:
        transform var(--transition-normal),
        background var(--transition-normal),
        border-color var(--transition-normal);
}

.service-video-card:hover .service-video-play {
    transform:
        translate(-50%, -50%)
        scale(1.12);
    background: var(--white-faint);
}

.service-video-play i {
    font-size: 20px;

    margin-left: 3px;
}


/* =========================================================
   50. SERVICE MEDIA ARROWS
========================================================= */

.service-gallery-slider .slick-prev,
.additional-videos-slider .slick-prev {
    left: var(--slick-arrow-left);
}

.service-gallery-slider .slick-next,
.additional-videos-slider .slick-next {
    right: var(--slick-arrow-right);
}

.service-gallery-slider .slick-prev i,
.service-gallery-slider .slick-next i,
.additional-videos-slider .slick-prev i,
.additional-videos-slider .slick-next i {
    color: var(--primary-gold);

    font-size: var(--slick-icon-size);

    line-height: var(--line-height-tight);

    transition:
        color var(--transition-normal),
        transform var(--transition-normal);
}

.service-gallery-slider .slick-prev:hover i,
.additional-videos-slider .slick-prev:hover i {
    color: var(--white);

    transform: translateX(-3px);
}

.service-gallery-slider .slick-next:hover i,
.additional-videos-slider .slick-next:hover i {
    color: var(--white);

    transform: translateX(3px);
}


/* =========================================================
   51. VIDEO MODAL
========================================================= */

.video-modal {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: var(--video-modal-padding);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    z-index: 99999;

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal);
}

.video-modal.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}

.video-modal-overlay {
    position: absolute;

    inset: 0;

    background: var(--black-overlay-heavy);
}

.video-modal-content {
    position: relative;

    width: var(--video-modal-content-width);

    background: var(--dark-1);

    border:
        1px
        solid
        var(--border-gold-medium);

    border-radius: var(--video-modal-radius);

    padding: var(--video-modal-content-padding);

    z-index: 2;

    transform: scale(0.95);

    transition: transform var(--transition-normal);
}

.video-modal.active .video-modal-content {
    transform: scale(1);
}

.video-modal-close {
    position: absolute;

    top: var(--video-modal-close-top);
    right: 0;

    width: var(--video-modal-close-size);
    height: var(--video-modal-close-size);

    border: 1px solid var(--primary-gold);

    border-radius: var(--radius-circle);

    background: var(--text-dark);

    color: var(--primary-gold);

    font-size: 28px;

    line-height: var(--line-height-tight);

    cursor: pointer;

    z-index: 5;

    transition:
        background var(--transition-normal),
        color var(--transition-normal);
}

.video-modal-close:hover {
    background: var(--primary-gold);

    color: var(--text-dark);
}

.video-modal-wrapper {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: var(--video-modal-wrapper-radius);

    background: var(--text-dark);
}

.video-modal-wrapper iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}

body.video-modal-open {
    overflow: hidden;
}


/* =========================================================
   52. CATEGORY PAGE BUTTON
========================================================= */

.selected-category-action {
    display: flex;

    justify-content: center;
    align-items: center;

    margin-top: 25px;
    margin-bottom: 30px;
}

.category-page-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: var(--category-button-padding);

    border:
        2px
        solid
        var(--primary-gold);

    border-radius: var(--category-button-radius);

    background: transparent;

    color: var(--black);

    font-size: var(--category-button-font-size);
    font-weight: var(--font-weight-semibold);

    line-height: var(--line-height-tight);

    text-align: center;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}

.category-page-btn i {
    font-size: 13px;
    transition:
        transform var(--transition-normal),
        color var(--transition-normal);
}

.category-page-btn:hover,
.category-page-btn:focus {
    background-color: var(--primary-gold);

    border-color: var(--primary-gold);

    color: var(--text-dark);

    text-decoration: none;
}

.category-page-btn:hover i,
.category-page-btn:focus i {
    transform: translateX(4px);
}

.category-page-btn:active {
    transform: translateY(1px);
}

.category-description {
    max-width: 900px;

    margin: 10px auto 0;

    color: var(--black);

    font-size: 25px;

    line-height: var(--line-height-loose);

    text-align: center;
}

.category-description p {
    margin-bottom: 10px;
}

/* =========================================================
   62. NO SERVICES
========================================================= */

.no-services-found {
    padding: 80px 20px;
}

.no-services-found h3 {
    color: var(--white);

    margin-bottom: 10px;
}

.no-services-found p {
    color: var(--white);
}

.category-service-heading h3 {
    font-size: 32px;
    font-weight: 700;
}

.category-title span {
    color: var(--black);
}

.services-section-divider {
    width: 100%;
    height: 1px;
    background-color: var(--primary-gold);
    margin: 0;
}
