@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root {
    --pause-on-hover: paused;
    --pause-on-click: paused;
    --width: 100%;
    --transform: none;
    --play: running;
    --direction: normal;
    --duration: 40.44s;
    --delay: 0s;
    --iteration-count: infinite;
    --min-width: 100%;
    --angle: 45deg;
    --opacity: 0.5;
}
body {
    overflow-x: hidden;
}
.hero_section_height {
    width: 100%;
}

.usa_trad_fair_slider img {
    height: 400px;
    object-fit: contain;
}
.swiper-pagination-bullet-active {
    background: #2B9865 !important;
}
.swiper-pagination-bullet {
    background-color: #1E6D91;
}
.main-slider-five .image-column .image {
    z-index: 0;
}
@font-face {
    font-family: 'Norwester';
    src: url({{ asset('../frontend/css/fonts/norwester.otf') }}) format('opentype');
font-weight: normal;
font-style: normal;
}
.together {
    font-size: 100px !important;
    line-height: 100px !important;
    /*font-family: 'Norwester', sans-serif !important;*/
    font-family: 'Poppins', sans-serif !important;
    transition: 2s;
}
.together span {
    margin: 20px auto;
    text-align: center;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px white;
    position: relative;
}
/*.together:hover {*/
/*    font-size: 120px !important;*/
/*    line-height: 120px !important;*/
/*    transition: 2s;*/
/*}*/
.winbridge_hero_wrapper:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

.portfolio_item {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 20px;
    --border-size: 0.3rem;
    border: var(--border-size) solid transparent;

    /* Paint an image in the border */
    border-image: conic-gradient(
            from var(--angle),
            #2B9865 0deg 90deg,
            #1E6D91 90deg 180deg,
            #405cff 180deg 270deg,
            #6d2bff 270deg 360deg
    )
    1 stretch;
}
@supports (background: paint(houdini)) {
    @property --opacity {
        syntax: "<number>";
        initial-value: 0.5;
        inherits: false;
    }
    @property --angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }
    @keyframes opacityChange {
        to {
            --opacity: 1;
        }
    }
    @keyframes rotate {
        to {
            --angle: 360deg;
        }
    }
    .portfolio_item {
        animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;
    }
}

.portfolio_item h3 {
    font-size: 25px;
    line-height: 35px;
    margin-bottom: 20px;
}
#prop,
#workOrders {
    font-size: 50px;
    margin-top: 20px;
    font-weight: bold;
}
.marquee-container {
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    position: relative;
    width: var(--width);
    transform: var(--transform);
}
.marquee-container:hover div {
    animation-play-state: var(--pause-on-hover);
}
.marquee-container:active div {
    animation-play-state: var(--pause-on-click);
}

.marquee {
    flex: 0 0 auto;
    min-width: var(--min-width);
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
    animation-play-state: var(--play);
    animation-delay: var(--delay);
    animation-direction: var(--direction);
}
@keyframes scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.initial-child-container {
    flex: 0 0 auto;
    display: flex;
    min-width: auto;
    flex-direction: row;
}

.child {
    transform: var(--transform);
}
.item {
    margin: 1rem;
    transition-duration: 300ms;
    width: 400px;
}
.item:hover {
    transform: scale(1.05)
}
.image-gallery {
    border-radius: 0.25rem;
    width: 100%;
    height: auto;
    min-height: 335px;
}
.footer-style .links {
    position: relative;
    list-style: none;
}
.mySwipertwo .swiper-wrapper .swiper-slide {
    background-color: #fff;
}
.ventures_section_area .inner-box {
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fffffff0;
}
.icon-box a img {
    width: 80%;
}
.ventures_section_area p {
    font-size: 25px;
    width: 100%;
    max-width: 525px;
    margin-top: 15px;
}

.main-slider-five .color-layer {
    animation: zoomInOut 5s ease-in-out infinite;
}
@keyframes zoomInOut {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.2, 1.2); /* Adjust the scale as needed for the zoom in effect */
    }
    100% {
        transform: scale(1, 1);
    }
}

@media screen and (max-width: 576px) {
    .together {
        font-size: 60px !important;
        line-height: 70px !important;
    }

    .hero_section_height {
        height: 600px;
        width: 100%;
        flex-direction: column;
        justify-content: center;
    }
    .image-column {
        display: none;
    }
    .sec-title .title:before {
        display: none;
    }
    .sec-title .title {
        padding: 0px 15px;
    }
    .sec-title {
        text-align: center;
    }

}