body {
    background-color: #04000C;
}

.hero-section-slider {
    width: 100vw;
    height: 100vh;
}

.swiper-slide {
    background-color: #fcfcfc;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: #fcfcfc;
    font-size: 24px;
}

.swiper-slide>.swiper-slide-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent no-repeat 50% 50% /cover;
}

body {
    text-align: center;
}

.swiper-slide>div:first-child {
    transform-origin: 50% 50%;
}

.swiper-slide>div:nth-child(2) {
    transform-origin: 50% 50%;
}

.swiper-slide>div:nth-child(3) {
    transform-origin: 50% 50%;
}

.swiper-scale-effect .swiper-slide-cover {
    transition-timing-function: linear;
    transition-duration: 20s;
    transform: scale(1);
}

.swiper-scale-effect .swiper-slide.swiper-slide-active .swiper-slide-cover {
    transform: scale(1.3);
}

:root {
    --swiper-pagination-bottom: 40px;
    --swiper-theme-color: rgba(252, 252, 252, 0.85) !important;
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #FCFCFC;
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #262626;
}

.swiper-button-prev,
.swiper-button-next {
    background: transparent;
    opacity: 0.55;
    --swiper-navigation-color: rgba(252, 252, 252, 0.85);
    transition: opacity 0.3s ease, color 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: transparent;
    opacity: 0.85;
    --swiper-navigation-color: #fcfcfc;
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 10px)) !important;
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 10px)) !important;
    box-shadow: inset 1px 1px 1px rgba(38, 38, 38, 0.85);
    background: var(--swiper-pagination-bullet-inactive-color, rgba(252, 252, 252, 0.85)) !important;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.55) !important;
    --swiper-pagination-bullet-horizontal-gap: 6px;
}

.swiper-pagination-bullet-active {
    box-shadow: inset 1px 1px 1px rgba(38, 38, 38, 0.85);
    background: var(--swiper-pagination-bullet-active-color, rgba(252, 252, 252, 0.85)) !important;
    opacity: var(--swiper-pagination-bullet-active-opacity, 0.85) !important;
    --swiper-pagination-bullet-horizontal-gap: 10px;
}

.content-section-slider {
    position: relative;
    max-width: 1140px;
    width: 100vw;
    height: 520px;
    margin: auto;
    --border-width: 1px;
    border: 1px solid transparent;
    border-radius: 12px;
}

.content-section-slider .swiper-wrapper {
    border-radius: 12px;
    overflow: hidden;
}

.hg_section {
    padding: 80px 0;
}

.control-label {
    margin-bottom: 0;
}

.control-label h2 {
    margin-bottom: 24px;
}

.max-w-1140 {
    max-width: 1140px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.border-style-1 {
    border: 1px solid #4B4B4D;
    border-radius: 12px;
    overflow: hidden;
}

.overflow-hidden {
    overflow: hidden;
}

.mb-48 {
    margin-bottom: 48px;
}

.content-section-slider::before {
    content: " ";
    position: absolute;
    inset: calc(var(--border-width) * -1);
    border: inherit;
    border-radius: inherit;
    background-image: conic-gradient(from var(--angle), #4B4B4D 80%, #fff 88%, #fff 92%, #4B4B4D 100%);
    background-origin: border-box;
    -webkit-mask:
        linear-gradient(black, black) content-box,
        linear-gradient(black, black);
    mask: linear-gradient(black, black),
        linear-gradient(black, black);
    -webkit-mask-clip: content-box, border-box;
    mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin 5s linear infinite;
}

.about .info:hover::before {
    animation-play-state: paused;
}

@property --angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

@keyframes spin {
    to {
        --angle: 1turn;
    }
}
.hoverBorderWrapper{
    height: 240px;
}
.hoverBorderWrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}