html {
font-size: 1.171vw;
}
video::-webkit-media-controls {
  display: none !important;
}

video::-webkit-media-controls-enclosure {
  display: none !important;
}

video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
video {
  pointer-events: none;
}
/* Font */
@font-face {
    font-family: "myfont";
    src: url('font/Verdana.woff2');
}

/* Reset */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "myfont";
}

body {
    --primary-clr: #096EB7;
    --dark-blue: #004D84;
    --secondry-clr: #6BC06A;
    background-color: var(--dark-blue);
    background-image: url('../images/icons/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Media */
img,
video,
svg {
    max-width: 100%;
}

/* Containers */
.thm-container-fluid{
    padding: 0 1.46vw; /* 20px */
}

.thm-container {
    padding: 0 0.69vw; /* 9.375px */
    width: 65%;
    margin: auto;
    max-width: 124.45vw; /* 1700px */
}

/* Sections */
section{
    min-height: 100vh;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    display: none;
        /* padding-top: 0.5855vw;
    padding-bottom: 0.5855vw; */
}

section.active {
    display: flex;
}

/* Title */
.title{
    position: absolute;
    top: 5vh;
    left: 0;
    background-image: linear-gradient(to right, #0C71B9, #4CABDB);
    color: #fff;
    padding: 0.73vw 2.93vw; /* 10px 40px */
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}

/* Header */
header{
    position: fixed;
    z-index: 999;
    width: 100%;
    bottom: 0;
    transition: all 0.5s;
    padding: 0.46vw 0 2.197vw; /* 6.25px */
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Logo */
header nav .logo {
    max-width: 18.31vw; /* 250px */
}

/* Navigation */
header nav ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(min-content, max-content));
    list-style-type: none;
}

header nav ul li{
    cursor: pointer;
    background-color: var(--secondry-clr);
    padding: 1.0vw 1.46vw; /* 15px 20px */
    margin: 0.36vw; /* 5px */
    max-width: 14.65vw; /* 200px */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
header nav ul li.active{
    background-color: var(--primary-clr);
}

header nav ul li img {
max-width: 1.171vw;
display: block;
margin: auto;
}

header nav ul li:last-child img{
    max-width: 6.22vw; /* 85px */
}

/* Swiper */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper img {
    display: block;
    width: 100%;
    user-select: none;
}

.swiper-button-disabled {
       display: none !important;
}

/* Padding utility */
.pt-45 {
    padding-top: 2.81vw; /* 45px */
}

/* Main */
main {
    position: relative;
    min-height: 100vh;
    width: 100%;
    height: 100%;
}

/* Video */
.video-sec {
    position: relative;
}

.video-sec video {
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
}

/* Product */
.product {
    position: relative;
}

/* Arrows */
.arrow {
    width: var(--size);
    height: var(--size);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    cursor: pointer;
    max-width: 3.32vw; /* 100px */
    display: flex;
    align-items: center;
}

.arrow.left {
    left: 0;
}

.arrow.right {
    right: 0;
}

/* Content box */
.content-box {
    --size: 5vw;
    padding-left: calc(var(--size) + 1vw);
    padding-right: calc(var(--size) + 1vw);
    position: relative;
margin-top: -2.197vw;
}

/* Brocher */
.brocher{
    position: relative;
}

.brocher .card{
    width: 8%;
    position: absolute;
    bottom: 15%;
    right: 2%;
}

.brocher .card img{
    display: block;
    width: 100%;
}

.brocher svg{
    cursor: pointer;
    background-color: var(--secondry-clr);
    fill: #fff;
    padding: 1.09vw; /* 15px */
    width: 4.03vw; /* 55px */
    text-align: right;
}

.brocher .scaner.active svg.download,
.brocher .scaner svg.close{
    display: none;
}

.brocher .scaner svg.download,
.brocher .scaner.active svg.close{
    display: block;
}

/* Responsive */
@media (max-width: 61.93rem) {
    main {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    header nav,
    header nav ul {
        flex-wrap: wrap;
    }

    .brocher .scaner{
        position: relative;
        transform: translateY(0);
    }
}