/* =====================================================
   GENERAL
===================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}

body {
    min-width: 320px;
}


/* =====================================================
   HEADER
===================================================== */

.site-header {

    position: sticky;
    top: 0;

    z-index: 1000;

    width: 100%;

    background: #ffffff;

    border-bottom: 2px solid #111111;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15);
}


.header-inner {

    width: 100%;

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 6px 30px;

}


/* =====================================================
   LOGO
===================================================== */

.logo {

    display: block;

    flex-shrink: 0;
}

.logo img {

    display: block;

    width: 360px;

    max-width: 40vw;

    height: auto;
}


/* =====================================================
   DESKTOP NAVIGATION
===================================================== */

.desktop-menu {

    display: flex;

    align-items: center;

    gap: 25px;
}


.desktop-menu a {

    color: #102c67;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color 0.2s ease;
}


.desktop-menu a:hover {

    color: #d71920;
}


/* =====================================================
   HAMBURGER
===================================================== */

.hamburger {

    display: none;

    width: 48px;
    height: 48px;

    padding: 7px;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.hamburger span {

    display: block;

    width: 100%;

    height: 3px;

    margin: 5px 0;

    background: #111111;

    border-radius: 3px;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* Hamburger -> X */

.hamburger.open span:nth-child(1) {

    transform:
        translateY(8px)
        rotate(45deg);
}


.hamburger.open span:nth-child(2) {

    opacity: 0;
}


.hamburger.open span:nth-child(3) {

    transform:
        translateY(-8px)
        rotate(-45deg);
}


/* =====================================================
   MOBILE MENU
===================================================== */

.mobile-menu {

    display: none;

    width: 100%;

    background: #ffffff;

    border-top: 1px solid #dddddd;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.15);
}


.mobile-menu.open {

    display: block;
}


.mobile-menu a {

    display: block;

    padding: 17px 25px;

    color: #102c67;

    text-decoration: none;

    font-size: 17px;

    font-weight: 700;

    border-bottom: 1px solid #eeeeee;
}


.mobile-menu a:hover {

    background: #f5f5f5;

    color: #d71920;
}


/* =====================================================
   SLIDER
===================================================== */

.slider-wrapper {

    position: relative;

    width: 100%;
}


.slider {

    display: flex;

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    scrollbar-width: none;

    overscroll-behavior-x: contain;
}


.slider::-webkit-scrollbar {

    display: none;
}


/* =====================================================
   INDIVIDUAL SLIDE
===================================================== */

.slide {

    flex: 0 0 100%;

    width: 100%;

    scroll-snap-align: start;

    scroll-snap-stop: always;

    overflow: hidden;
}


.slide picture {

    display: block;

    width: 100%;

    line-height: 0;
}


.slide img {

    display: block;

    width: 100%;

    height: auto;

    margin: 0;

    user-select: none;

    -webkit-user-drag: none;
}


/* =====================================================
   ARROW BUTTONS
===================================================== */

.slider-arrow {

    position: fixed;

    top: 50%;

    transform: translateY(-50%);

    z-index: 500;

    width: 50px;

    height: 70px;

    border: none;

    border-radius: 8px;

    background: rgba(0, 0, 0, 0.35);

    color: white;

    font-size: 34px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        opacity 0.2s ease;
}


.slider-arrow:hover {

    background: rgba(0, 0, 0, 0.65);
}


.arrow-left {

    left: 12px;
}


.arrow-right {

    right: 12px;
}


/* =====================================================
   DOTS
===================================================== */

.slider-dots {

    position: fixed;

    left: 50%;

    bottom: 15px;

    transform: translateX(-50%);

    z-index: 600;

    display: flex;

    gap: 8px;

    padding: 8px 12px;

    border-radius: 20px;

    background: rgba(0, 0, 0, 0.35);
}


.dot {

    width: 10px;

    height: 10px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.6);

    cursor: pointer;
}


.dot.active {

    background: #ffffff;

    transform: scale(1.2);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {


    /* HEADER */

    .header-inner {

        min-height: 58px;

        padding:
            5px
            10px;
    }


    .desktop-menu {

        display: none;
    }


    .hamburger {

        display: block;

        flex-shrink: 0;
    }


    .logo {

        min-width: 0;
    }


    .logo img {

        width: 330px;

        max-width:
            calc(100vw - 70px);

        max-height: 48px;

        object-fit: contain;

        object-position: left center;
    }


    /* ARROWS */

    .slider-arrow {

        width: 38px;

        height: 55px;

        font-size: 25px;

        background:
            rgba(0, 0, 0, 0.25);
    }


    .arrow-left {

        left: 5px;
    }


    .arrow-right {

        right: 5px;
    }


    /* DOTS */

    .slider-dots {

        bottom: 10px;

        gap: 6px;

        padding: 6px 9px;
    }


    .dot {

        width: 8px;

        height: 8px;
    }
}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 400px) {

    .slider-arrow {

        display: none;
    }

}