@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

html, body {
    font-family: "Roboto", sans-serif;
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'BBN';
    src: url('../../assets/fonts/Bebas\ Neue\ Cyrillic\ Regular.ttf') format('truetype');
}

.bg-hero {
    background-image: url("/assets/gif/bg-desktop.gif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

@media (max-width: 600px) {
    .bg-hero {
        background-image: url("/assets/gif/bg-mob.gif");
    }
}

.case-single b, .case-single strong {
	font-weight: 600;
}

.case-single ol {
	list-style: numeric;
}

.case-single ul {
	list-style: disc;
}

.font-mont {
    font-family: "Montserrat", sans-serif;
}

.font-bbn {
    font-family: "BBN", sans-serif;
}

.font-osd {
    font-family: "Oswald", sans-serif;
}
  
.text-shadow-blue {
    text-shadow: 1px 5px 0 #0539FB;
}

.text-shadow-pink {
    text-shadow: 1px 5px 0 #FA1FF3;
}

.double-blue-border {
    border: 4px solid black; /* Same color border on all sides */
    box-shadow: 0px 4px 0px #0539FB; /* Bottom border *//* Extra bottom border (double) */
    outline: 4px solid transparent;
}

.glitch-overlay {
    position: absolute;
    top: 25%; /* Adjust as needed */
    left: 45%; /* Adjust as needed */
    width: 200px; /* Adjust as needed */
    height: 30px; /* Adjust as needed */
    background-color: rgba(255, 70, 70, 0.05); /* Replace with your glitch effect image */
    background-size: cover;
    mix-blend-mode: screen; /* Adjust blend mode as needed */
    animation: glitch 1s infinite;
}

@keyframes glitch {
    0% {
      transform: translate(-5px, 0);
    }
    25% {
      transform: translate(5px, 0);
    }
    50% {
      transform: translate(-5px, 0);
    }
    75% {
      transform: translate(5px, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }

.pulse {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    padding: 16px;
    background: black;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    animation: pulse 2s infinite;
}

.pulse:hover {
    animation: none;
}

#mobile-menu {
    width: 0px;
    height: 100vh;
    overflow: hidden;
    transition: width 0.5s ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 #FA1FF3
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(5, 81, 244, 0)
    }

    100% {
        transform: scale(0.9);
    }
}

.image-container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.image-container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.container-sm {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container-sm {
        width: 720px;
    }
}

@media (min-width: 992px) {
    .container-sm {
        width: 960px;
    }

}

@media (min-width: 1200px) {
    .container-sm {
        width: 1180px;
    }
}

@media (min-width: 1440px) {
    .container-sm {
        width: 1340px;
    }
}

.running-line-container {
    overflow: hidden;
    display: flex;
    gap: 20px;
}

.running-line-first {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    white-space: nowrap;
    animation: runLine 18s linear infinite; /* Adjust the duration as needed */
}

.running-line-second {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    white-space: nowrap;
    animation: runLine 18s linear infinite; /* Adjust the duration as needed */
}

@keyframes runLine {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.bg-linear {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(102, 102, 102, 0) 100%);
}

.awards-swiper {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.awards-swiper .swiper-slide {
    min-width: 0;
    display: flex;
}

.awards-slide-media {
    width: 100%;
    height: clamp(220px, 64vw, 280px);
    background: #F2F2F2;
}

.awards-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    max-width: 100%;
}

@media (min-width: 768px) {
    .awards-slide-media {
        height: 320px;
    }
}

@media (min-width: 1024px) {
    .awards-slide-media {
        height: 420px;
    }
}

@media (max-width: 767px) {
    .awards-swiper .swiper-slide {
        width: 100% !important;
        flex: 0 0 100%;
    }
}

/* ──────────────────────────────────────────
 * Service Pages
 * ────────────────────────────────────────── */

.service-cases-swiper {
    overflow: hidden;
    width: 100%;
}

.service-cases-swiper .swiper-slide {
    height: auto;
}

.svc-faq-item {
    border: 1px solid #e5e5e5;
    transition: border-color 0.2s;
}

.svc-faq-item.active {
    border-color: #0539FB;
}

.svc-faq-toggle {
    cursor: pointer;
    background: none;
    border: none;
}

.svc-faq-icon {
    flex-shrink: 0;
    transition: transform 0.3s;
}

.svc-faq-item.active .svc-faq-icon {
    transform: rotate(45deg);
}

.svc-faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.svc-faq-item.active .svc-faq-answer {
    max-height: 1000px;
}