@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

@font-face {
    font-family: 'ClashGrotesk-Extralight';
    src: url('../fonts/ClashGrotesk-Extralight.woff2') format('woff2'),
    url('../fonts/ClashGrotesk-Extralight.woff') format('woff'),
    url('../fonts/ClashGrotesk-Extralight.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'ClashGrotesk-Light';
    src: url('../fonts/ClashGrotesk-Light.woff2') format('woff2'),
    url('../fonts/ClashGrotesk-Light.woff') format('woff'),
    url('../fonts/ClashGrotesk-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'ClashGrotesk-Regular';
    src: url('../fonts/ClashGrotesk-Regular.woff2') format('woff2'),
    url('../fonts/ClashGrotesk-Regular.woff') format('woff'),
    url('../fonts/ClashGrotesk-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'ClashGrotesk-Medium';
    src: url('../fonts/ClashGrotesk-Medium.woff2') format('woff2'),
    url('../fonts/ClashGrotesk-Medium.woff') format('woff'),
    url('../fonts/ClashGrotesk-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'ClashGrotesk-Semibold';
    src: url('../fonts/ClashGrotesk-Semibold.woff2') format('woff2'),
    url('../fonts/ClashGrotesk-Semibold.woff') format('woff'),
    url('../fonts/ClashGrotesk-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: 'ClashGrotesk-Bold';
    src: url('../fonts/ClashGrotesk-Bold.woff2') format('woff2'),
    url('../fonts/ClashGrotesk-Bold.woff') format('woff'),
    url('../fonts/ClashGrotesk-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'ClashGrotesk-Variable';
    src: url('../fonts/ClashGrotesk-Variable.woff2') format('woff2'),
    url('../fonts/ClashGrotesk-Variable.woff') format('woff'),
    url('../fonts/ClashGrotesk-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
}

:root {
    --font-clash: 'ClashGrotesk-Variable', sans-serif;
    --font-inter: "Inter", sans-serif;
}

@media only screen and (max-width:768px) {
    .main-header .navbar-brand {
        width: 200px;
    }
    .section-title {
        margin-bottom: 30px !important;
        text-align: center !important;
    }
    .section-title h2 {
        text-align: center !important;
        display: inline-grid !important;
        justify-content: center !important;
    }
    .section-title p {
        margin-bottom: 15px;
    }
    .about-footer-btn, .hero-slide .hero-content {text-align: center !important;}
    .hero.hero-slider .hero-slider-layout .hero-slide .hero-content {
        margin-top: 50%;
    }
}

.video-container {
    overflow: hidden;
    max-width: 100%;
}

.video-container iframe {
    width: 100%;
    height: 500px;
    border: 0;
}