@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap');

:root {
    --header-height: 100px;

    --color-black: #1b1b1b;
    --color-grey: #2b2b2b;
    --color-white: #fafafa;

    --font-family: "Sen", sans-serif;

    --font-size-logo: 28px;
    --font-size-h1: 26px;
    --font-size-h2: 22px;
    --font-size-primary: 19px;

    --gap-s: 10px;
    --gap-m: 16px;
    --gap-x: 24px;
}

header {
    height: var(--header-height);
    width: 100%;
    background-color: var(--color-black);

    color: var(--color-white);
}

header .layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    padding: var(--gap-x) var(--gap-m);
}

footer {
    width: 100%;
    height: var(--header-height);

    color: var(--color-white);
    background-color: var(--color-black);
}

footer .layout {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

footer p {
    width: 100%;

    padding: var(--gap-x);

    font-size: calc(var(--font-size-logo) * 0.5);
    text-align: center;
}

body {
    width: 100%;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    font-family: var(--font-family);

    font-size: var(--font-size-primary);
    background-color: var(--color-white);
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

button {
    border: none;
    background: none;
    padding: 0;
}

a {
    text-decoration: none;
    color: var(--color-white);
}

nav {
    display: none;
}

main {
    color: var(--color-black);
}

table {
    width: 100%;
    border-spacing: 0;
}

table caption {
    padding: 0 0 var(--gap-x) 0;
}

td, th {
    padding: var(--gap-s);
    border-bottom: 1px solid var(--color-black);
}

table th {
    text-align: left;
}

.layout {
    width: 100%;
}

.container-row-start-center {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.container-row-sb-center {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.container-row-se-center {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.container-col-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container-col-center-start {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.logo-container {
    height: 100%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--gap-m);


}

.logo-title {
    font-family: "Kdam Thmor Pro", sans-serif;
    font-size: var(--font-size-logo);
}

.logo-container img {
    height: 100%;
}

.image-fit {
    width: auto;
    height: 100%;
    object-fit: contain;
}

#sidebar-open-button, #sidebar-close-button {
    height: 36px;
}

#sidebar {
    width: 100%;
    height: 100%;

    position: fixed;
    top: 0;
    left: 100%;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: var(--gap-m);

    padding: var(--gap-x) var(--gap-m);

    background: rgba(27, 27, 27, 0.7);
    backdrop-filter: blur(6px);

    font-size: 24px;

    transition: left 0.3s ease-in-out;
}

#sidebar.active {
    left: 0;
}

.menu {
    width: 100%;

    overflow: hidden;
}

.menu-title {
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: var(--gap-s);

    background: var(--color-black);
    border: 1px solid var(--color-white);
}

.arrow {
    transition: transform 0.3s;
}

.submenu {
    height: 0;

    display: flex;
    flex-direction: column;
    gap: var(--gap-m);

    margin: var(--gap-s);

    background-color: transparent;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

.submenu-item {

    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: var(--gap-s);

    background: var(--color-black);
    border: 1px solid var(--color-white);
}

.submenu-item:hover {
    background: #444;
}

.submenu-item a {
    width: 100%;
}

.has-submenu.active .arrow {
    transform: rotate(180deg);
}

.link-icon-text {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-s);
}

.link-icon {
    height: 24px;
}

.contacts-and-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--gap-m);
}

#contacts-and-links-large {
    display: none;

    font-size: 20px;
}

#contacts-and-links-mobile {
    width: 100%;

    gap: var(--gap-s);
}

#contacts-and-links-mobile div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--gap-x);
}

#contacts-and-links-mobile img {
    height: 48px;
}

.swiper-pagination-bullet-active {
    background-color: var(--color-white);
}

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

.swiper-slide img {
    /*width: 100%;*/
    height: 100%;
    object-fit: contain;
    justify-self: center;
}

.swiper-pagination-bullet-active {
    background-color: var(--color-black);
    border: 1px solid var(--color-white);
}

.content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-x);

    padding: calc(var(--gap-x) * 3) var(--gap-x);
}

.images-slider {
    width: 100%;
    border: 1px solid var(--color-black);
}

.slider-characteristics-container {
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--gap-x);
}

#header-placeholder {
    width: 100%;
    padding: 0;
    margin: 0;
}

.description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--gap-x);
}

.benefits {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-x);

    padding:  var(--gap-x) 0;
}

.benefits-item {
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;

    border: 1px solid var(--color-black);
}

.benefits-item-reversed {
    flex-direction: row-reverse;
}

.benefits-item-reversed .benefits-item-text-container {
    align-items: flex-end;
}

.benefits-item-reversed p {
    text-align: end;
}

.benefits-item img {
    height: 70px;
}

.benefits-item-text-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);

    padding: var(--gap-m);
}

.fill-vertical-line {
    width: 20px;
    background-color: var(--color-black);
}

.contact-call {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
}

.contact-call a{
    color: var(--color-black);
}

.contact-call img{
    filter: brightness(0) saturate(100%) invert(0%) sepia(72%) saturate(19%) hue-rotate(347deg) brightness(91%) contrast(79%);
}

.index-hero {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap:  var(--gap-s);
}

@media (min-width: 768px) {
    :root {
        --font-size-h1: 30px;
    }
}

/* Laptop L*/
@media (min-width: 1440px) {

    :root {
    }

    body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    main, header, footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .layout {
        width: 1440px;
    }

    nav {
        display: block;
    }

    #sidebar {
        display: none;
    }

    #sidebar-open-button {
        display: none;
    }

    .arrow {
        height: var(--gap-m);
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a, .dropdown-button {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li.dropdown {
        display: inline-block;
    }

    .dropdown-button {

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--gap-s);

        cursor: pointer;
    }

    .dropdown-button img {
        height: 8px;
    }

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        right: 0;
        background-color: var(--color-black);
        min-width: 240px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1000;
    }

    .dropdown-content a {
        padding: var(--gap-m);
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {background-color: var(--color-grey);}
    .dropdown:hover .dropdown-content {display: block;}

    #contacts-and-links-large {
        display: flex;
    }

    .slider-characteristics-container {
        flex-direction: row;
    }

    .images-slider {
        width: 50%;
    }

    .swiper {
        height: 60vh;
    }

    .content-container {
        gap: calc(var(--gap-x) * 3);
    }
}