/*
Theme Name: Logiapp
Description: Test thema voor logiConnect-app website
Author: Lukas Sliva
Version: 1.0
*/   

/* Color palette: */
:root {
    /* Buttons, titles and icons: */
    --primary: #40BDFF;/* Celestial Blue */
    /* 45a4e7 original */

    /*  Footer and text:*/
    --base: #2A2B2A;/*Jet */

    /*Background and white text*/
    --background: #f9f9f9;/*Seasalt:*/

    /* secondary, notifications */
    --secondary: #FECF2E;

  }

/* Adjust the height of the text field */
.acf-field-XXXXX .acf-input textarea {
    height: 300px; /* Adjust the height as needed */
}
.acf-field input[type="text"] {
    resize: vertical;
}
/* Major body styling: */
* {
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth; 
}

body:not(.wp-admin) {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background);
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: height 1s ease-in-out;
    max-width: 100vw;
    scroll-behavior: smooth;
    /* -webkit-scroll-snap-type: y mandatory;
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory; */
}
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, #adminmenu .wp-menu-arrow, #adminmenu .wp-menu-arrow div, #adminmenu li.current a.menu-top, #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu{
    background: var(--primary);
}
.subsubsub {
    float: none;
}

main {
    height: fit-content;
    min-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: height 1s ease-in-out;
}
.content {
    padding: 10px;
    margin-top: 20vh;
    margin-bottom: 50px;
    width: 75%;
    height: 100%;
    max-width: 80vw;
    overflow: visible;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    transition: height 1s ease-in-out;

}
article {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    -webkit-scroll-snap-type: y mandatory;
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
    z-index: 0;
}

/* Theme buttons */
.LogiButtonL, .LogiButtonM, .LogiButtonS, .LogiButtonLong {
    width: fit-content;
    top: 55px;
    left: 25%;
    background-color: var(--primary);
    border-radius: 15px;
    color:  var(--background);
    padding: 12px 16px 12px 16px; /* top right bottom left */
    margin: 8px;
    text-align: center; 
    text-decoration: none;
    cursor: pointer;
    transform: scale(0.90);
    transition: transform 0.5s, border-radius 0.4s;
}
.LogiButtonLong {
    display: inline-block;
    width: 100%;
    max-width: 200px;
}
.LogiButtonL {  
    font-weight: bolder;
    font-size: larger;
    padding: 20px 24px 20px 24px; /* top right bottom left */
    border-radius: 22px;
}
.LogiButtonL:hover {
    transform: scale(1);
    border-radius: 15px;
}
.LogiButtonM {
    font-size: medium;
}
.LogiButtonS {
    font-size: small;
}

.LogiButtonL a, .LogiButtonM a, .LogiButtonS a, .LogiButtonLong a {
    color:  var(--background);
    text-decoration: none;
}

.LogiButtonM:hover, .LogiButtonS:hover, .LogiButtonLong:hover {
    transform: scale(1);
    border-radius: 8px;
}
.LogiButtonM.off {
    background-color: grey;

}
.LogiButtonM.off:hover {
    cursor: default;
    transform: scale(0.9);
    border-radius: 15px;
}

/* navbar styling: */
nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    height: 0;
    max-height: 105px;
    top: 9px;
    left: 0;
    overflow: visible;
    z-index: 3;
}

.navContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    width: 100%;

}
.navLogo {
    position: relative;
    margin: 44px;
    padding: 0;
    z-index: 5;
}
.navLogo a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.navLogo img {
    height: 50px;
}
.logoImg {
    display: flex;
  }
  .logoIcon, .shortLogo {
    display: none;
  }
  .logoImg.moveAway {
    position: relative;
    left: -500px;
    transition: all 0.3s ease-in-out;
  }

 .nav-content {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    left: 75%;
    margin: 10px;
    padding: 10px;
    margin-right: 0;
    height: 100px;
    z-index: 50;
}

nav span {
    display: none;
   
}

.hoverbackground {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Small box shadow */
    background-color: white;
    border-radius: 30px;
    height: 80px;
    min-width: 120px;
    margin-left: 10vw;
    padding: 12px;
    justify-content: space-evenly;
    animation-name: navhoverReverse;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
}
.nav-content i {
    color: var(--primary);
}

.nav-content:hover {
    left: 50%;
}

.nav-item:has(#infoBefore) span {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    min-width: 100px;
    margin-left: 20px;
}

.nav-content:hover .nav-item {
    display: flex;
    opacity: 1;
    width: fit-content;
    animation-name: navhoverItems;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}
.nav-content:hover .nav-item:has(#infoBefore):not(.active) {
    display: none;
}
/* nav .active {
    display: flex;
    width: 60px;
    margin: 5px;
    opacity: 1;
} */
.nav-item:has(#infoBefore) {
    display: flex;
    width: 60px;
    margin: 5px;
}

.nav-content:hover .nav-item.navActive, .nav-content:hover .nav-link.navActive {
    left: 0;

}
.nav-content:hover .hoverbackground {
    animation-name: navhover;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-timeline: view();
    min-width: 50vw;
    width: fit-content;
    margin-left: 0vw;
    padding: 0 10vw 0 10px; /* top right bottom left */
}



@keyframes navhover {
    0%   { transform: translateX(100%); }
    50%  { transform: translateX(0); }
    100% { transform: translateX(0); }
  }
  @keyframes navhoverReverse {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(0); }
    100% { transform: translateX(0); }
  }
  @keyframes navhoverHome {
    0%   { transform: translateX(600%); }
    50%  { transform: translateX(0); }
    100% { transform: translateX(0); }
  }

  @keyframes navhoverItems {
    0%   { 
        transform: translateX(600%); 
        opacity: 0;
    }
    50%  { transform: translateX(0); 
        opacity: 1;
    }
    100% { transform: translateX(0); 
        opacity: 1;

    }
  }

  
  @keyframes opacityOn {
    0%   { opacity: 1; }
    100%   { opacity: 1; }
  }

.nav-item {
    position: relative;
    display: none;
    opacity: 0;

    flex-direction: row;
    padding: 5px;
    border-radius: 20px;
    width: 0;
    text-align: center;
    max-width: 100px;
    height: 40px;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all .4s ease;
}

.nav-item:has(.menu-item-home), .nav-item:has(#infoBefore) {
    display: flex;
    opacity: 1;

}
.nav-item:has(.menu-item-home) {
    position: relative;
}
.nav-content:hover .nav-item:has(.menu-item-home) {
    left: 0;
    animation-name: navhoverHome;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-delay: 0ms;
}
.nav-content:hover .nav-item {
    margin: 5px;
}

.nav-link {
    margin: 2px;
    padding: 12px 5px 12px 5px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    transition-delay: 60ms;
    transition: all .4s ease;
    color: var(--primary);
    text-transform: capitalize;
}
.nav-item p {
    color: var(--primary);

}
.nav-item.navActive, .nav-link.navActive {
    padding: 5px;
    position: relative;
    display: flex;
    opacity: 1;
}
.nav-item:has(.nav-link.navActive) {
    display: flex;
    opacity: 1;
}
.nav-item:hover, .nav-item.navActive {
    background-color: var(--primary);
    padding: 6px;
    font-size: medium;
    color: white;
}
.nav-item:hover .nav-link, .nav-item:hover p, .nav-item.navActive .nav-link, .nav-item.navActive p {
    color: white;
    background-color: transparent;
}
.nav-item:hover .nav-link.navActive{
    background-color: transparent;
    padding: 5px;

}

.nav-link.navActive {
    color: white;
    background-color: var(--primary);
    border-radius: 20px;
    width: 30px;
    padding: 5px;
    justify-content: center;
}

.nav-link:hover {
    display: block;
    color: white;

}
/* hamburgmenu: */
.menu-icon {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    flex-direction: column;
    margin: 10px;
    font-size: 24px;
    cursor: pointer;
    color: white;
    background-color: white;
    border-radius: 10px;
    padding: 6px;
    z-index: 20;
}

.menu-icon span {
    position: relative;
    width: 20px;
    height: 3px;
    margin: 2px;
    background-color: var(--primary);
    border-radius: 10px; 
    transition: all 0.2s ease-in-out;
}
.menu-icon.active span{
    width: 18px;
    height: 3px;
    margin: 2px;
}
.menu-icon.active span:nth-child(1)  {
    transform: rotate(45deg);
    top: 4px;
}
.menu-icon.active span:nth-child(2)  {
    display: none;
}
.menu-icon.active span:nth-child(3)  {
    transform: rotate(-45deg);
    top: -3px;

}


/* dropdown content for navbar content information:*/
.dropdown {
    display: flex;
    justify-content: center;
    max-width: 60px;

}
.drop-link {
    position: relative;
}
.drpdwnContent {
    position: absolute;
    top: 90px;
    max-height: 0;
    width: 190px;
    height: 0;
    border-radius: 20px;
    background-color: var(--primary);
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Small box shadow */
    z-index: 1;

}

.drpdwnContent a {
    display: none;
    padding: 10px;
    padding-top: 0;
    padding-bottom: 0;
    color: white;
    text-decoration: none;
    transition: max-height 0.15s ease-out;
}


/* small pointer from the dropdown button to the dropped content */
.pointerContainer {
    position: absolute;
    top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 40px;
    background-color: transparent;
    display: none;

}
.pointer {
    position: relative;
    top: 0;
    display: none;
    opacity: 0;
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent;
    border-bottom-width: 2px; 
    transition: border-left 0.25s, border-right 0.25s, ease-in;
}

.dropdown:hover .pointer,.dropdown:hover .drpdwnContent a, .dropdown:hover .pointerContainer {
    display: block; 
}
.dropdown:hover .drpdwnContent, .dropdown:hover .drpdwnContent a {
    max-height: 75vh;
    height: auto;
    transition: max-height 0.5s ease-in;
    min-width: 50px;

}
ul .sub-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.nav-content:hover .drpdwnContent .nav-item {
    margin-bottom: 12px;
    max-width: 220px;
}

.drpdwnContent .nav-link {
    border-radius: 0;
    border-bottom: #f9f9f9 2px solid;
    transition: all 0.3s ease-in; 
}
.drpdwnContent .nav-link:hover {
    border-radius: 4px;
}
.drpdwnContent a {
    width: 220px;
    padding: 8px;
    padding-left: 10px;
    padding-right: 10px;
    transition: all 0.3s ease-in;
}
.nav-content:hover .drpdwnContent .nav-item {
    width: fit-content;
    max-width: 170px;

}
.dropdown:hover .drpdwnContent a {
    padding: 12px;
    height: auto;
    min-height: fit-content;

}

.dropdown:hover .pointer {
    border-bottom: 15px solid transparent; 
    opacity: 1;
    transition: border-bottom 0.25s ease-in;

}
.dropdown:hover .drpdwnContent {
    top: 66px;
}
/* message */
.messageContainer {
    position: absolute;
    top: -10px;
    left: 0;
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 100vw;
    overflow: hidden;
}
.message {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: white;
    padding: 12px;
    width: 100%;
    height: 6px;
    text-decoration-line: underline;
    transition: top 0.8s ease-in-out;
    z-index: 0;
}
.message.onScroll, .show .message {
    top: -40px;
    height: 0;
}
.message a {
    color: white;
}
/* All buttons: */

/* navbuttons */
.navButtons {
    position: fixed;
    top: 200px;
    right: 10px;
    padding: 10px;
    height: 6vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 3;
}
.navButtons a {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Logi buttons */
.LogiButtonL, .LogiButtonM, .LogiButtonS, .LogiButtonLong, .LogiButtonRound {
    width: fit-content;
    top: 55px;
    left: 25%;
    background-color: var(--primary);
    border-radius: 15px;
    color:  var(--background);
    padding: 12px 16px 12px 16px; /* top right bottom left */
    margin: 8px;
    text-align: center; 
    text-decoration: none;
    cursor: pointer;
    transform: scale(0.90);
    transition: transform 0.5s, border-radius 0.4s;
}
.LogiButtonLong {
    display: inline-block;
    width: 100%;
    max-width: 200px;
}
.LogiButtonL {  
    font-weight: bolder;
    font-size: larger;
    padding: 20px 24px 20px 24px; /* top right bottom left */
    border-radius: 22px;
}
.LogiButtonL:hover {
    transform: scale(1);
    border-radius: 15px;
}
.LogiButtonM, .LogiButtonRound {
    font-size: medium;
}
.LogiButtonS {
    font-size: small;
}
.LogiButtonRound {
    background-color: transparent;
    font-size: large;
}

.LogiButtonM:hover, .LogiButtonS:hover, .LogiButtonLong:hover {
    transform: scale(1);
    border-radius: 8px;
}
.LogiButtonRound:hover {
    transform: scale(1);
}

/* contentblock styling: */

/* Landingpage: */
.landingContainer {
    border-radius: 10px;
    transform: scale(0.8);
    width: 100%;
    height: 100vh;
    /* background-color: red; */
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    transition: transform 1s ease-in-out, margin-bottom 0.5s ease-in-out, z-index 1s ease-in-out, border-radius 1s ease-in-out;
    margin-bottom: 10px;
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    z-index: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    scroll-snap-align: center;
    overscroll-behavior: auto;
}
.landingStart, .landingEnd {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: height 0.3s ease;
}
.landingStart {
    height: 100%;
    background-color: var(--primary);
    color: white;
    z-index: 4;
}
.landingLogoContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    top: 45%;
    left: 0;

}
.landingEnd {
    height: 100%;
    background-color: var(--background);

}

.subHeader {
    color: var(--primary);
    font-size: larger;
    position: -webkit-sticky;
    position: sticky;
    top: 65%;
    left: 50%;
    margin: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}
.subHeader h2 {
    font-size: 42px;
}

.subHeader span {
    font-size: 25.95px;
}
.logoIconDiv {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15vw;
    padding: 0;
    overflow: hidden;
    border-radius: 15px;
}

.logoIconDiv img {
    height: 100%;
}

.logoTextDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0;
    height: 100%;
    max-height: 16vw;
    max-width: 1300px;
    animation: reveal 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    overflow: hidden;
    padding: 6px 6px 6px 6px; /* top right bottom left */
}
.logoTextDiv img,
.logoTextDiv svg {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 220px;
    max-width: 70vw;
    animation: slidein 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    /* overflow: visible; */
}
.logoTextDiv svg,
.logoTextDiv img {
    position: relative;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logoText {
    animation: slidein 10s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.logoContainer {
    position: -webkit-sticky;
    position: sticky;
    margin-top: -200px;
    top: 150px;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50vh;
    background-color: transparent;
}
.logoWhite, .logoBlue {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    position: -webkit-sticky;
    position: sticky;
    top: 36vh;
    left: 0;
    margin-top: -200px;
    mix-blend-mode: difference;
    height: fit-content;
    align-self: center;
    z-index: 10;
    user-select: none;
    text-rendering: optimizeLegibility;
}
.logoWhite svg, .logoBlue svg, .logoBlue svg image, .logoWhite svg image {
    max-height: 250px;
    max-width: 250px;
}

.logoWhite h1, .logoBlue h1 {
    font-weight: bolder;
    font-size: 110px;
}
.logoWhite span, .logoBlue span {
    font-weight: bold;
    margin-top: 20px;
}

.logoBlue h1 {
    color: var(--primary);
    background-color: var(--primary);

}
.logoWhite h1{
    color: white;
    background-color: white;
}
.animateLanding {
    width: 100%;
    scroll-snap-type: mandatory;
    transform: scale(1);
    transition: transform 1s ease-in-out, margin-bottom 0.5s ease-in-out, z-index 1s ease-in-out, border-radius 1s ease-in-out;
    margin-bottom: 400px;
    z-index: 4;
    border-radius: 0;
    background-color: var(--primary);

}
.landingContainer ::-webkit-scrollbar {
    width: 10px;
    border-radius: 15px;
    background: transparent; 

}
.landingContainer ::-webkit-scrollbar-track, 
.landingContainer ::-webkit-scrollbar-thumb {
    background: transparent; 
}
.landingContainer ::-webkit-scrollbar-thumb:hover {
    background: transparent;
}
/* .landingTextContainer {
    display: none;
    top: 65vh;
    left: 0;
    min-width: 70vh;
    margin-left: 15vh;
    margin-right: 15vh;
} */
.blueText, .whiteText {
    display: none;
    position: sticky;
    left: 0;
    top: 65vh;
    mix-blend-mode: difference;
    margin-left: 25vw;
    margin-right: 25vw;
    padding: 20px;
    font-size: x-large;
    font-weight: bolder;
    text-decoration: none;
}

.blueText {
    color: var(--primary);
}

.whiteText {
    color: white;
}
.tip {
    position: sticky;
    top: 85vh;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
   z-index: 15;
}

.animateTip {
    animation: bounce 2s infinite ease-in-out;
}
.scrollTip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.scrollTip, .fa-solid, a.scrollTip, .scrollTip .fa-angles-down {
    text-decoration: none;
    color: white;
}
.scrollTip:hover .scrollTip a {
    font-weight: bold;
}

@keyframes slidein {
    0% { margin-left:-100vw;}
    20% { margin-left:-110vw; }
    35% { margin-left:0px;}
    100% { margin-left:0px;}
}

@keyframes reveal {
    0% {
        opacity:0;
        width: 0px;
    }
    20% {
        opacity:1;
    }
    30% {width:0px;}
    60% {
        opacity:1;
    }
    100% {
        width: 70vw;
    }
}

@keyframes bounce {
    0%, 100% {
        opacity: 0.5;
        transform: translateY(0); 
    }
    50% {
        transform: translateY(-10px);
    }
}

/* about logiapp phone animation */

/* animated about logiapp homepage card*/
.logiappContainer {
    margin: 8px 20px 60px 20px; /* top right bottom left */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 750px;
    max-height: 670px;
    width: 100%;
    max-width: 75vh;
    z-index: 0;
}
.textContainer {
    position: relative;
    top: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 8px;
    padding: 8px;
}
.textContainer h1, .textContainer p {
    margin: 4px;
    padding: 4px;
}

.box {
    height: 200px;
    position: relative; 
    top: 150px; 
    left: -275px;
    transform: rotate(20deg);
    padding: 20px;
    transition: z-index 2s ease-in-out; 
    z-index: 2;
}

.box img {
    height: 200px;
}

.logiappContainer .animate {
    animation: phone 2.5s ease;
    animation-delay: .3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transition: z-index 2s ease-in-out; 

}

.box img {
    max-width: 100%;
    object-fit: contain;
}

.card {
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    margin: 8px;
    padding: 20px;
    height: fit-content;
    width: fit-content;
    max-width: 500px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.card h2 {
    font-size: 26px;
    font-weight: bolder;
    color: var(--primary);
    margin: 12px;
    padding: 8px;
}
.card h3 {
    margin-top: 16px;
    font-size: 19.77px;
    font-weight: bold;
    color: #5B5B5B;
    margin: 12px;
}
.card ul {
    font-size: 12.22px;
    margin: 16px 16px 16px 50px; /* top right bottom left */
    padding: 16px 16px 16px 50px; /* top right bottom left */
    font-weight: bold;

}
.card li {
    padding: 8px;
    list-style-type: none;
}

.logiappContainer .LogiButtonL {
    left: 0;
    position: relative;
    top: -50px;
    z-index: 2;
}
:root {
    --phoneTop50: 325px;
    --phoneleft50: -280px;
    --phoneTop100: 410px;
    --phoneleft100: -250px;
    --rotate-deg50: -16deg;
    --rotate-deg100: -12deg;
}

@keyframes phone {
    0% {

    }
    50% {
        top: var(--phoneTop50);
        left: var(--phoneleft50);
        transform: rotate(var(--rotate-deg50));
    }

    100% {
        top: var(--phoneTop100);
        left: var(--phoneleft100);
        transform: rotate(var(--rotate-deg100));
    }
}

/* Card slider/ card carousel */

/* cards */
.cardContainer {
    position: relative;
    top: 0;
    left: 0;
    margin: 40px 10px 20px 10px; /* top right bottom left */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 80vw;
    z-index: 0;
    scroll-snap-align: center;

}
.carousel {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 80vw;
    height: 100%;
}
.cards {
    display: flex;
    height: 100%;
    max-width: 80vw;
    min-width: 300px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    position: relative;
}
.idle {
    flex-direction: row;
}
.cardM {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin: 20px;
    padding: 20px;
    height: 80vh;
    min-height: 30vh;
    max-height: 300px;
    width: 15vw;
    max-width: 220px;
    min-width: 220px;
    position: absolute;
    border-radius: 10px;
    margin: 10px;
    background-color: white;
    opacity: 0;
    transition: 
            width 0.5s ease-in-out,
            top 0.5s ease-in-out,
            left 0.5s ease-in-out,
            opacity 0.9s ease-in-out;
    overflow: hidden;
    background-color: white;
    z-index: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} 
.cardNumber {
    padding: 8px;
    margin: 8px;
    color: rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
    top: 0;

}
.cardImg {
    height: auto;
    max-height: 120px;
    max-width: 50%;
    padding: 8px;
    margin: 4px;
}
.cardImg img {
    object-fit: contain;
    width: 100%;
    max-height: 90px;
}

.cardM h3 {
    text-align: center;
    margin: 8px;
    color: var(--primary);
    font-size: x-large;
    font-weight: bolder;
}

/* card slider: */

.cardM.visible {
    height: 100vh;
    min-height: 30vh;
    max-height: 320px;
    width: 15vw;
    max-width: 240px;
    min-width: 240px;
    width: auto;
    opacity: 1;
    position: static;

    transition: 
            height 0.5s ease-in-out,
            min-height 0.5s ease-in-out,
            max-height 0.5s ease-in-out,
            min-width 0.5s ease-in-out,
            width 0.5s ease-in-out,
            top 0.5s ease-in-out,
            left 0.5s ease-in-out,
            right 0.5s ease-in-out,
            opacity 1s ease,
            z-index 1s ease;

    transform: translateX(0);
    z-index: 1;

}
.cardM li, .cardM p, .cardM.visible.middle-card li, .cardM.visible.middle-card p {
    transition: all 0.5s ease-in-out;

}
.cardM p {
    display: none;
    text-align: center;
    margin: 0;
    padding: 12px;
    font-size: 16px; 
}
.cardM li {
    font-size: 14px;
}

.cardM.visible.middle-card {
  height: 380px;
  min-height: 380px;
  max-height: 380px;
  width: 20vw;
  max-width: 280px;
  min-width: 240px;
  transform: translateX(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: z-index 0s;
  z-index: 2;
}

.cardM.visible:not(.middle-card):hover {
    transform: scale(1);

}

.middle-card p {
    display: flex;
}

.prev-button,
.next-button {
  background-color: var(--primary);
  color: white;
  padding: 8px;
  border-radius: 15px;
  cursor: pointer;
  border: none;
  
}

 .cardM.right {
  animation: moveRight 0.8s;
  transform: translateX(0, 0, 0); 

}
.cardM.left {
    animation: moveLeft 0.8s;
    transform: translateX(0, 0, 0);
}
.controlContainer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: fit-content;
}
.bulletsContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    max-width: 70vw;
    margin: 12px;
    overflow: scroll;
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}
.bulletsContainer a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 100%;
    background-color: rgba(70, 70, 70, 0.21);
    color: white;
    font-size: xx-small;
    font-weight: 100;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
    cursor: pointer;
    margin: 5px;
    flex-grow: 1; /* All bullets initially have equal space */
    transition: flex-grow 0.3s ease, 
                max-width 0.3s ease, 
                min-width 0.3s ease-in-out, 
                margin-left 0.3s ease, 
                margin-right 0.3s ease, 
                border-radius 0.3s ease, 
                background-color 0.3s ease;
}
.bulletsContainer a.active {
    min-width: 40px;
    max-width: 40px;
    background-color: var(--primary);
    border-radius: 10px;
    flex-grow: 2;

}
.bulletsContainer a.visible {
    background-color: var(--primary);
}

.reload-button {
    position: relative;
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    font: inherit;
}
.reload-button, .reload-news-button, .reload-brand-button {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    width: 25px;
    height: 25px;
    border-radius: 50px;
}
.reload-button:hover, .reload-news-button:hover, .reload-brand-button:hover {
    background-color: #cacaca6c;
}
/* regular card slider animations */

@keyframes moveLeft {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0); 
    }
}
  

@keyframes moveRight {
  from {
    transform: translateX(-100%);
    }
    to {
    transform: translateX(0);
    }
}
/* text container */
.textBlockContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80vw;
    max-width: 700px;
    height: auto;
    margin-top: 20px;
    margin-bottom: -30px;
}

/* all news article styling: */

/* news article full */
.content {
    margin-top: 10px;
}
.articlesParent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    z-index: 1;
}
.articleContainer {
    width: 99vw;
    max-width: 1200px;
    min-width: 200px;
    display: flex;
    height: fit-content;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    margin: 0 0px 92px 0px; /* top right bottom left */
    }
    .articleContainer:hover {
        box-shadow: rgba(14, 30, 37, 0.08) 0px 2px 4px 0px, rgba(14, 30, 37, 0.2) 0px 2px 16px 0px;
    }
    .newsContainer .articleContainer {
        margin: 0px;
    }

    .articleBanner {
        position: relative;
        max-height: 400px;
        height: 100%;
        width: 100%;
        min-height: 250px;
        min-width: 100%;
        max-height: 350px;
        overflow: hidden;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0px 22px 22px 22px; /* top right bottom left */
        z-index: 0;
    }
    .articleNavButton {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(202, 202, 202, 0.356);
        height: 100%;
        width: 10%;
        transition: all 0.3s ease-in-out;
        z-index: 1;
    }
    .articleNavButton:hover {
        background-color: #cacaca8c;
    }
    
    #back {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        height: 100%;
        width: 100%;
    }
    .rotate-left {
        transform: rotate(-180deg);
        color: white;
    }
    .articleBanner img {
       width: 100%;
        z-index: 0;
    }
    .newsArticleTeaser .image img {
        height: 100%;
        object-fit: contain;
        max-height: 180px;
        min-height: 180px;
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }
    .newsArticleTeaser:hover .image img {
        transform: scale(1);
    }
    .articleBanner img {
        border-radius: 5px;
    }
    .LogiButtonRound i {
        color: white;
    }
    .articleContentContainer{
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .articleContents {
        margin: 20px 40px 20px 40px;/* top right bottom left */
        border-radius: 15px;
        width: 75%;
        min-width: 250px;
        z-index: 1;
        padding-right: 26px;
        max-height: fit-content;
    }

    .articleContentContainer .image {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;        
        position: relative;
        top: -50px;
        width: 100%;
        min-width: 100px;
        max-width: 200px;
        max-height: 400px;
        border-radius: 4px;
        margin-left: 40px;
        background-color: white;
    }
    .articleContentContainer .image img {
        margin-bottom: 20px;
        max-width: 80%;
    }
    .articleInfo {
        width: fit-content;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .dot {
        position: relative;
        display: inline-block;
        align-self: center;
    }

    .dot::before {
        content: '';
        display: block;
        width: 4px; 
        height: 4px; 
        border-radius: 50%;
        background-color: black; 
    }

    .articleContents h1 {
        margin-top: 14px;
        margin-bottom: 16px;
        font-size: 26px;
        margin-left: 8px;
        padding-left: 8px;
    }
    .article h2 {
        font-size: 20px;
        margin: 22px 8px 8px 8px;/* top right bottom left */
        padding-left: 8px;
        color: #333333;
    }
    .introduction {
        font-weight: bold;
        color: #999999;
        margin: 8px 8px 28px 8px;/* top right bottom left */
    }
    .article p {
        padding-left: 8px;
        border-radius: 10px;
        font-size: 16px;
        color: #666666;
        line-height: 1.4;
    }
    .article ul {
        padding-left: 8px;
        margin: 16px 16px 16px 30px;
        line-height: 1.4;
        font-size: 16px;
        color: #666666;
    }
    .article li {
        margin: 12px;
    }
    .article .listHeader {
        font-weight: bolder;
    }
    .articleContents .date, #readingTime{
        margin: 10px 8px 8px 8px;/* top right bottom left */
        font-size: 14px;
        font-weight: bold;
        color: #333333;
    }
    .articleContents .date {
        padding-left: 8px;
    }
    .newsArticleLink {
        padding: 8px;
        margin-left: 12px;
        color: #40BDFF;
    }

    .highlight {
        font-weight: bold;
    }

    .underline {
        text-decoration: underline;
    }
    .paragraph {
        margin: 12px;
    }

    .sticky {
        position: sticky;
        border-radius: 5px;
        background-color: var(--background);
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
    }
    .LogiButtonLong {
        max-width: 75%;
    }

    /* discover contentblock*/
    .discoverContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 700px;
        height: 75vh;
        width: 100%;
        margin-top: 10vh;
        padding: 20px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: rgba(14, 30, 37, 0.08) 0px 2px 4px 0px, rgba(14, 30, 37, 0.2) 0px 2px 16px 0px;
    }
    
    .offersContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .offers a i {
        color: var(--primary);
    }
    .offer.active a i {
        color: white;
    }
    .offerSlider {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-evenly;
        width: auto;
        border-radius: 50px;
        z-index: 0;
    }
    .offers {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        background-color: white;
        height: 45px;
        width: auto;
        min-width: fit-content;
        border-radius: 50px;
    }
    .activeBackground {
        position: relative;
        top: 45px;
        width: 210px;
        height: 45px;
        background-color: var(--primary);
        border-radius: 50px;
        transition: transform 0.6s ease;
        z-index: 1;
    }
    
    .offer {
        text-align: center;
        width: fit-content;
        min-width: 185px;
        max-width: 185px;
        padding: 12px 12px 12px 10px;
        color: var(--primary);
        border-radius: 50px;
        list-style-type: none;
        z-index: 2;
    }
    .offer a {
        color: var(--primary);
        text-decoration: none;
        padding: 12px 0px 12px 0px;
    }

    .offer.active a {
        color: white;
        z-index: 2;
    }
    .offer a i {
        margin: 0 8px 0 8px;
    }
    .discoverContainer i {
        color: white;
    }
    .discoverContainer h1 {
        font-size: 30px;
        margin: 8px;
        color: var(--primary);
        text-align: center;
    }
    .discover {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        height: 100%;
        margin: 20px;
    }
    .discoverText {
        position: relative;
        top: 0;
        left: -12vw;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        width: 70%;
        max-width: 38vw;
        height: fit-content;
    }
    .base, .app, .salary, .charter {
        display: none;
    }
    .discoverText h2 {
        margin: 12px;
    }
    .iconCircle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        margin: 12px;
        color: var(--primary);
        border-radius: 50px;
        border: 0.5px solid var(--primary);
    }
    .iconCircle i {
        color: var(--primary);

    }
    .openButton {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    .openButton a {
        margin: 0;
    }
    .openButton i {
        font-size: 20px;
        padding: 4px;
    }
    .discoverImage {
        position: absolute;
        top: 170px;
        left: 40vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 50%;
        max-width: 500px;
        height: 200px;
    }
    .discoverPhone {
        position: relative;
        top: 45%;
        left: 82%;
        width: 70px;
        height: 180px;
        z-index: 1;
        transition: all 0.5s ease-in-out;
    }
    .discoverPhone img, .discoverLaptop img {
        width: 100%;
    }
    .discoverApp .iconCircle i, .discoverBase .iconCircle i, .discoverSalary .iconCircle i, .discoverCharter .iconCircle i {
        font-size: 22px;
        animation: grow 0.6s;
    }
    @keyframes grow {
        from {
            transform: scale(0.1);
    
        }
        to {
            transform: scale(1);
    
        }
    }
    .discoverApp .discoverPhone,  .discoverCharter .discoverPhone{
        top: 0;
        left: 25%;
        width: 120px;
    }
    
    .discoverSalary .discoverPhone {
        left: 75%;
    }
    .discoverBase .discoverLaptop, .discoverSalary .discoverLaptop {
        left: 0vw;
        width: 400px;
    }

    .discoverCharter .discoverLaptop {
        left: 2vw;
        width: 400px;
    }
    .discoverLaptop {
        position: relative;
        width: 330px;
        height: 130px;
        transition: all 0.6s ease-in-out;
    }

    /* about scroll */
    .aboutContainer {
        position: relative;
        top: 0;
        scroll-snap-align: center;

        width: 100vw;
        height: fit-content;
        max-height: 90vh;
        margin: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        transition: transform 0.4s ease-in, margin-top 0.5s ease-in, margin-bottom 0.5s ease-in;
        overscroll-behavior: auto;
    }
    .aboutContainer:not(.animate):hover {
        top: 0;
    }
    
    .aboutContainer.animate {
        margin-top: 100px;
        margin-bottom: 100px;
    }
    .aboutContent {
        position: relative;
        max-height: 70vh;
        overflow: hidden;
        -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        width: 100vw;
        height: fit-content;
        display: flex;
        flex-direction: row;
        justify-content: center;
        -webkit-scroll-snap-type: y mandatory;
        -ms-scroll-snap-type: y mandatory;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }
    .aboutContent img:hover {
        cursor: pointer;
    }
    .aboutContent.long {
        display: none;
    }
    .animate .aboutContent {
        overflow: scroll;
    }
    .aboutRow {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }
    .progress-container {
        width: 80vw;
        height: 8px;
        background: #cacaca20;
        border-radius: 5px;
    }

    .progress-bar {
        height: 8px;
        background: var(--primary);
        width: 0%;
        border-radius: 8px;
    }
    #myBar {
        width: 0;
        background-color: var(--primary);
    }

    .aboutTextContainer {
        position: relative;
        left: -20vw;
        height: fit-content;
        max-width: 25vw;
        width: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        opacity: 0;
        transition: left 0.5s ease-in-out, opacity 0.1s ease-in-out, width 0.3s ease-in-out;
        z-index: 0;
    }
    .animate .aboutTextContainer {
        display: flex;
        width: 25vw;
        opacity: 1;
        left: 0;
    }
    .aboutText {
        position: relative;
        height: 30vh;
        width: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 30vh;
        margin-bottom: 30vh;
        scroll-snap-align: center;
    }
    .aboutText h4 {
        margin: 8px;
        padding: 8px;

    }
    .aboutText p {
        margin: 8px;
        padding: 8px;
    }

    .aboutImageContainer {
        position: sticky;
        top: 10vh;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-height: 60vh;
        max-width: 900px;
        overflow: hidden;
        transform: scale(1.2);
        transition: all 0.8s ease-in;
        z-index: 2;
    }
    .aboutImageContainer.laptop {
        width: 53%;
    }
    .aboutImageContainer.phone {
        min-width: 180px;
        width: 40%;
    }
    .animate .aboutImageContainer {
        transform: scale(1);
    }
    .animate .aboutImageContainer.phone {
        width: 25%;
    }
    .animate .aboutImageContainer.laptop {
        width: 60%;
    }
    .aboutImages {
        position: relative;
        width: fit-content;
        height: 100%;
        transition: all 0.5s ease-in;

    }
    .laptop .aboutImage {
        left: 0;
    }

    .aboutImage {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        z-index: 0;
        background-color: var(--background);
    }
    .laptop .aboutImage img  {
        border-radius: 10px;
        max-width: 100%;
        max-height: 100%;
    }
    .animate .aboutImage {
        left: 0;
    }
    .aboutImage img {
        max-height: 50vh;
        width: 100%;
        object-fit: contain;
    }
    .laptop .aboutImage img {
        height: 55vh;
    }
    .activeImg {
        z-index: 2;
    }


    /* news preview state */

    .newsContainer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        scroll-behavior: smooth; 
        -webkit-scroll-snap-type: y mandatory;
        -ms-scroll-snap-type: y mandatory;
        scroll-snap-type: y mandatory;
    }
    .recentNews {
        padding: 8px;
        width: 100%;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    .recentArticleContainer {
        width: 80%;
        max-width: 85vh;
        min-width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        padding: 12px;
        margin: 32px 32px 92px 32px; /* top right bottom left */
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
        }
    .recentArticleContainer:hover, .previewArticleContainer:hover {
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    }
    .recentArticleImage {
        max-height: 400px;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        margin: 8px;
    }
    .recentArticleImage img {
        width: 100%;
        border-radius: 20px;
    }
    .recentArticleContents {
        border-radius: 15px;
        margin: 8px;
    }
    .recentArticleContents h3 {
        margin-top: 8px;
        margin-bottom: 14px;
        font-size: 26px;
        margin-left: 8px;
        padding-left: 8px;
    }
    .recentArticleContents p {
        margin-left: 8px;
        padding-left: 8px;
        border-radius: 10px;
        margin-top: 8px;
        margin-bottom: 8px;
        font-size: 16px;
        color: #666666;
    }
    .recentArticleContents .date {
        margin-top: 10px;
        font-size: 12px;
        font-weight: bold;
        color: #333333;
    }

    .previewArticleContainer {
        width: 90%;
        max-width: 700px;
        height: 300px;
        border-radius: 15px;
        padding: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;

        position: relative;
        top: 150px;
        margin-bottom: 100px;
        transition: top 0.7s, margin-top 0.5s, transform 1s, margin-bottom 1s;
        transform: scale(0.9);
        scroll-snap-align: center;
    }

    .previewAnimate, .previewArticleContainer:hover {
        top: 150px;
        margin-top: 50px;
        margin-bottom: 100px;
        transform: scale(1);
    }

    h2 {
        font-size: 24px;
        margin: 62px 32px 32px 32px; /* top right bottom left */
    }
    .newsArticleTeaser {
        scroll-margin-top: 200px; 
        height: 300px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .newsArticleTeaser .image, .newsInfo {
        height: 100%;
    }
    .newsArticleTeaser .image {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        left: -10%;
        top: 0;
        min-width: 150px;
        min-height: 150px;
        width: 100%;
        max-width: 250px;
        max-height: 250px;
        background-color: var(--background);
        border-radius: 20px;
        box-shadow: 4px 10px 30px 1px var(--primary);

    }

    .newsInfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px;
        max-height: 250px;
    }
    .newsInfo p {
        padding: 12px 16px 16px 16px; /* top, right, bottom, left */
        color: grey;
        margin: 0;
    }
    .newsInfo h3 {
        padding: 16px 16px 12px 16px; /* top, right, bottom, left */

    }

    .newsInfo p:first-child {
        font-weight: 600;
    }
    .image img {
        width: 100%;
        border-radius: 20px;
        padding: 8px;
    }

    .newsContainer .bulletsContainer {
        position: relative;
        top: 50px;
        margin: 50px;
    }

    /* news scroll slider: */
    .newsCardContainer {
        display: flex;
        flex-direction: row;
        position: relative;
        top: 0;
        left: 0;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 50vh;
      }
      
    .newsCards {
        position: relative;
        display: flex;
        height: fit-content;
        align-items: center;
        justify-content: center;
        position: relative;
        max-width: 846px;
        overflow-x: hidden;
    }
    .ribbon {
        font-size: 12px;
        font-weight: bold;
        color: #fff;
    }
    .ribbon {
        --f: .5em;
        
        position: absolute;
        top: 5px;
        right: 0;
        line-height: 1.8;
        padding-inline: 1lh;
        padding-bottom: var(--f);
        border-image: conic-gradient(#0008 0 0) 51%/var(--f);
        clip-path: polygon(
        100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
        transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
        transform-origin: 0% 100%;
        background-color: var(--secondary);
        z-index: 2;
    }
            
      .newsCardM {
        min-height: 165px;
        max-height: 155px;
        max-width: 380px;
        min-width: 380px;
        width: 100%;
        height: 50%;

        background-color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        margin: 5px;
        flex: 0 0 auto;
        padding: 18px;
        background-color: white;
        opacity: 0; 
        position: absolute;
        transition: 
        /* height 0.5s ease-in-out, */
                  width 0.5s ease-in-out,
                  top 0.5s ease-in-out,
                  left 0.5s ease-in-out,
                  /* opacity 0.9s ease-in-out; */
                  z-index 0s ease;
        z-index: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: start;
      
      }
      .newsCardM img {
          width: 120px;
      }
      .newsTop {
        display: flex;
        flex-direction: column;
        margin: 8px;

      }
      .newsCardM h2 {
        max-height: 50%;
        margin: 2px;
        color: var(--primary);
        font-size: 20px;
        font-weight: bolder;
      }
      
      .newsCardM.newsVisible {
        opacity: 1;
        position: static;
      
        transition: 
                height 0.5s ease-in-out,
                  width 0.5s ease-in-out,
                  top 0.5s ease-in-out,
                  left 0.5s ease-in-out,
                  right 0.5s ease-in-out;
        transform: translateX(0);
        z-index: 1;
      
      }
      .newsCardM p {
          font-size: 14.83px;
          max-width: 350px;
          font-weight: 500;
          padding: 8px;
          padding: 6px 6px 2px 6px; /* top, right, bottom, left */
          margin: 6px 6px 2px 6px; /* top, right, bottom, left */

      }
      
      .prev-news-button,
      .next-news-button {
          background-color: var(--primary);
          color: white;
          padding: 8px;
          border-radius: 15px;
          cursor: pointer;
          border: none;
          
      }
        .newsCardM.right {
       
          animation: moveNewsRight 0.8s;
          transform: translateX(0, 0, 0);
      
      }
      .newsCardM.left {
          animation: moveNewsLeft 0.8s;
          transform: translateX(0, 0, 0);
      }
      
      .newsEnd {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-height: 60px;
        min-height: 40px;
        overflow: hidden;
        padding: 4px;
        padding: 0px 4px 0px 4px; /* top, right, bottom, left */

      }
      .newsEnd img {
        padding: 8px;
        overflow: hidden;
        max-height: 160px;
      }
      .newsCardM .newsEnd img {
        width: 160px;
      }
      .reload-news-button {
        position: relative;
        top: -10vh;
        text-decoration: none;
        background: none;
        border: none;
        font: inherit;
        cursor: pointer;
      }
      
      .LogiButtonM a {
        color: white;
        text-decoration: none;
        font: inherit;
        margin: 5px;
        padding: 0;
      }
      
      /* news card slider animation */
      @keyframes moveNewsRight {
       
        0% {
            transform: translateX(100%);
        }
        100% {
    
            transform: translateX(0); 
        }

      }
      
      @keyframes moveNewsLeft {

        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(0);
        }
      }

      /* explain video */
    .videoContainer {
        margin: 60px 20px 20px 20px; /* top right bottom left */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 90vw;
        width: 100%;
        height: 100%;
        border-radius: 10px;        
    }
    
    .videoContainer h2 {
        font-size: x-large;
        margin: 4px;
        padding: 4px;
    }
    .videoContent {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: fit-content;
        margin: 8px 8px 8px 8px;
    
    }
    .videoContent p {
        max-width: 500px;
        margin: 8px;
    }
    .videoText {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 20px;
        padding: 8px;
    }
    .vid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 500px; 
        height: 100%;
    }
    .mainText {
      font-size: 18px;
      line-height: 1.6;
      font-weight: 500;
    }
    
    .subText {
      font-size: 16px;
      line-height: 1.4;
      color: #666;
    
    }
    
    p.actionText {
      font-size: 16px;
      font-weight: bold;
      text-decoration: underline;
      margin: 20px 8px 20px 8px;/* top, right, bottom, left */
    
    }
      


    /* scrollbar */
    /* width */
    ::-webkit-scrollbar {
        width: 10px;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
        border-radius: 10px;
    }
    ::-webkit-scrollbar-track:hover {
        background-color: rgb(223, 223, 223)
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
        background-color: #9b9b9b;
        border-radius: 10px;
    }
    
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #888; 
        width: 6px;
        border-radius: 10px;
    }



/* footer: */
footer {
    margin-top: 100px;
    width: 100%;
    height: 100%;
    min-height: 400px;
    background-color: var(--base );
    color: var(--background);
    transition: height 1s ease-in-out;

}
.footerContainer {
    transition: height 1s ease-in-out;
}

/* brand slider */
.brandContainer {
    position: relative;
    top: 100px;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    max-width: 1000px;
    min-width: 300px;
    width: 80vw;
    overflow: hidden;
    z-index: 0;
    
}
.border {
    margin: 0;
    display: flex;
    align-items: center;
    width: 50px;
    height: 100%;
}
.border:first-child {
    box-shadow: 10px 0 3px -2px rgba(0, 0, 0, 0.06);
}

.border:last-child {
    box-shadow: -10px 0 3px -2px rgba(0, 0, 0, 0.06);
}
.allBrands {
    width: auto;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;    
    justify-content: center;
    position: relative;
    padding-left: 280px;
}

.brand {
    opacity: 0;
    flex: 0 0 auto;
    position: absolute;
    top: 100px;
    margin-right: 12px;
    max-height: 100px;
    max-width: 260px;
    transition: 
        width 0.5s ease-in-out,
        top 0.5s ease-in-out,
        left 0.5s ease-in-out;
    z-index: 0;
}
.brand.visible {
    width: auto;
    opacity: 1;
    position: static;

    transition: 
            height 0.5s ease-in-out,
                width 0.5s ease-in-out,
                top 0.5s ease-in-out,
                left 0.5s ease-in-out,
                right 0.5s ease-in-out,
                z-index 1s ease;

    transform: translateX(0);
    z-index: 1;
}
.brand img {
    height: 100px;
    width: 260px;
}
.prev-brand-button,
.next-brand-button {
    background-color: var(--primary);
    color: white;
    padding: 8px;
    border-radius: 15px;
    cursor: pointer;
    border: none;
    margin: 10px;
}
.brand.right {
    animation: moveRight 2s;
    transform: translateX(0, 0, 0);
}
.brand.left {
    animation: moveLeft 2s;
    transform: translateX(0, 0, 0);
}
.reload-brand-button {
    position: relative;
    cursor: pointer;
    top: 12vh;
    text-decoration: none;
    background: none;
    border: none;
    font: inherit;
}
.swipe {
    color: #c8c8c8;
    position: absolute;
    top: 35%;
    left: 30%;
    display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    opacity: 0.6;
    width: 120px;
    font-size: xx-large;
    z-index: 2;
}
#swipe-icon {
    color: #858585;
}
/* brand slider animations */
@keyframes moveLeft{
    0% {
        transform: translateX(100%);
    }
    100% {

        transform: translateX(0); 
    }
}

@keyframes moveRight {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
/* Swipe icon animation */
@keyframes rightIcon{
    0% {
        transform: translateX(0%); 
    }
    50% {
        transform: translateX(50%); 

    }
    100% {

        transform: translateX(0%); 
    }
}

@keyframes leftIcon {
    0% {
        transform: translateX(10%); 
    }
    50% {
        transform: translateX(-50%); 

    }
    100% {

        transform: translateX(10%); 
    }
}
    /* extra: */
    .extra {
        margin-top: 20px;
        margin-bottom: 50px;
        padding: 10px;
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        flex-direction: column;
        transition: height 1s ease-in-out;

    }
    .line {
        margin: 50px;
        width: 70vw;
        max-width: 600px; 
        height: 1px;
        background-color: black;
    }
        /* contact form: */

        .formContainer {
            flex-direction: column;
            align-items: center;
            margin-top: 100px;
            max-height: 70px;
            height: 70px;
            max-width: 600px;
            width: 70vw;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            border-top: 10px solid var(--primary);
            margin: 10px;
            padding: 10px;
            transition: max-height 0.5s ease-in-out, height 0.5s ease-in-out;            
        }
        .formContainer:has(.contactActive) {
            max-height: 100%;
            height: 600px;
        }

        .formClass {
            display: none;
        }
        .contactActive {
            display: flex;
            max-height: 100%;
            height: auto;
        }  
    
        .contactForm, .formContainer, form {
            display: flex;
            opacity: 1;
            flex-direction: column;
        }
        .contactForm {
            justify-content: center;
            align-items: center;
            overflow-y: hidden;
        }
        .contactForm h3 {
            text-align: center;
            margin: 10px;
            padding: 10px;
        }
        .formContainer form {
            height: fit-content;
            margin: 10px;
            padding: 10px;
        }
        .formContainer label {
            margin-top: 10px;
        }
        .formContainer input {
            margin-top: 10px;
            padding: 10px;
            max-width: 500px;
        }
        .formContainer input[type="text"],
        .formContainer input[type="tel"],
        .formContainer input[type="email"],
        .formContainer textarea {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
            padding: 5px;
            border: 0px;
            background-color: transparent;
            border-bottom: 1px solid #ccc;
        }
        .formContainer input[type="text"]:focus,
        .formContainer input[type="tel"]:focus,
        .formContainer input[type="email"]:focus,
        .formContainer textarea:focus {
            outline: none;
            border-bottom-color: var(--primary);
        }
        .formContainer textarea {
            max-width: 240px;
            min-width: 100px;
            min-height: 30px;
            max-height: 60px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .formContainer textarea:focus {
            border: 1px solid var(--primary);
    
        }
        .formContainer input[type="submit"] {
            width: fit-content;
            display: inline-block;
            width: 100%;
            max-width: 100%;
            top: 55px;
            left: 25%;
            background-color: var(--primary);
            border-radius: 15px;
            color:  var(--background);
            padding: 12px 16px 12px 16px; /* top right bottom left */
            /* margin: 8px; */
            text-align: center; 
            text-decoration: none;
            cursor: pointer;
            transform: scale(0.90);
            transition: transform 0.5s, border-radius 0.4s;
            border: none;
           
        }
        .formContainer input[type="submit"]:hover {
            background-color: var(--primary);
            transform: scale(1);
            border-radius: 8px;
        }
        .formContainer small {
            font-size: 10px;
            font-weight: bold;
            color: #cacaca;
        }
    
    
        #toggleButton {
            position: relative;
            top: 0;
            left: 0;
            cursor: pointer;
            background-color: var(--background);
            border-radius: 10px;
            padding: 5px;
            text-align: center;
            transition: all 0.5s ease-in;
        }
        .contactForm ::-webkit-scrollbar {
            width: 10px;
            border-radius: 15px;
        }
        .contactForm ::-webkit-scrollbar-track, 
        .contactForm ::-webkit-scrollbar-thumb {
            background: transparent; 
        }
        .contactForm ::-webkit-scrollbar-thumb:hover {
            background: #e40000;
        }
        
        /* 404 */
        .notFoundContainer {
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            background: var(--secondary);
            
        }
        .supportView {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .supportView {
            width: 100%;
            max-width: 100%;
        }
        h1 {
            margin: 10px;
        }
        p {
            font-size: 18px;
            margin: 10px;
        }
        .small {
            padding: 10px;
            font-weight: lighter;
            font-size: 14px;
            color: #5c5a5a;
        }
        .supportView img {
            max-width: 30%;
            margin-top: 40px;
        }
        .rotate-left {
            transform: rotate(-180deg);
        }
        .fas, .fa-solid {
            text-decoration: none;
            color: black;
        }   
        .notFoundContainer a {
            margin-left: 20px;
            margin-right: 20px;
        }

        /* footer */
        .footerContainer {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; 
            color: var(--background);
        }
        .columnContainer {
            width: 100%;
            max-width: 1200px;
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-evenly;
            margin-top: 40px; 
        }
        .footerColumn {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center; 
            padding: 8px;
            margin: 8px;
            width: 16ch;
        }
        .footerColumn h4 {
            font-size: 18px;
            font-weight: bold;
            margin: 6px 4px 8px 4px; /* top right bottom left */
            padding: 6px;
        }
        .footerColumn a , .footerLink {
            font-size: 12px;
            margin: 6px 8px 6px 8px; /* top right bottom left */
            padding: 4px;
            color: #cacaca;
            text-decoration: none;
            border-bottom: 2px solid transparent;
            transition: border-bottom 0.4s ease-in-out, color 0.3s ease;
        }
        .footerColumn a:hover , .footerLink:hover {
            border-bottom: 2px solid transparent;
            color: var(--background);
        }
        .footerContainer .line {
            background-color: var(--background);
            width: 80vw;
            max-width: none;
        }
        .footerBottom {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        .footerBottom img {
            width: 18vh;
            margin: 20px 20px 20px 20px; /* top right bottom left */
            border-radius: 50%;
        }
        .footerLink {
            margin: 6px 12px 8px 12px; /* top right bottom left */
            width: 140px;
            text-align: center;
            text-decoration: underline;
        }