/* ---------------------------------------
   ARCHIVO SEMI-CONDENSED – COMPLETE FAMILY
---------------------------------------- */
@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-Thin.ttf");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-ThinItalic.ttf");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-ExtraLight.ttf");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-ExtraLightItalic.ttf");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-Light.ttf");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-LightItalic.ttf");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-Regular.ttf");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-Italic.ttf");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-Medium.ttf");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-MediumItalic.ttf");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-SemiBold.ttf");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-SemiBoldItalic.ttf");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-Bold.ttf");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-BoldItalic.ttf");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-ExtraBold.ttf");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-ExtraBoldItalic.ttf");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-Black.ttf");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo_SemiCondensed-BlackItalic.ttf");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Default apply */
body {
    font-family: "Archivo", sans-serif;
    line-height: normal;
}

.font-inter {
    font-family: "Archivo", sans-serif;
}

.active {
    color: #f9da90;
}

.view {
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* sm breakpoint (640px) */
@media (min-width: 640px) {
    .view {
        padding-left: 3rem; /* px-12 */
        padding-right: 3rem;
    }
}

/* md breakpoint (768px) */
@media (min-width: 768px) {
    .view {
        padding-left: 4rem; /* px-16 */
        padding-right: 4rem;
    }
}

/* lg breakpoint (1024px) */
@media (min-width: 1024px) {
    .view {
        padding-left: 5rem; /* px-20 */
        padding-right: 5rem;
    }
}

/* xl breakpoint (1280px) */
@media (min-width: 1280px) {
    .view {
        padding-left: 5rem;
        padding-right: 5rem;
    }
    .animate-wave {
        animation: waveMove 6s linear infinite;
    }
}

/* 2xl breakpoint (1536px) */
@media (min-width: 1536px) {
    .view {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@keyframes waveMove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.swiper {
    width: 100%;
    height: 100%;
}