* { color: #313131; font-family: 'Fira Sans'; }
* { -webkit-tap-highlight-color: transparent; }

h1, h2, h3 { margin-bottom: 10px; font-family: 'Parkinsans', Arial, Helvetica, sans-serif; }
body, html { overflow-x: hidden; background-color: #FFFFFF; } /*FFFFFF  F6FBFD*/
.wrapper { background-color: #FFFFFF; }
p { line-height: 160%; margin-top: 10px; margin-bottom: 20px; }
/* section:nth-child(3n-2) {  }#3B424A */
/* section:nth-child(3n-2) h2 { color: #ededed !important; } */
/* section:nth-child(3n-2) p, section:nth-child(3n-2) a,  */
/* section:nth-child(3n-2) h3, section:nth-child(3n-2) h4, */
/* section:nth-child(3n-2) h5, section:nth-child(3n-2) h6, */
/* section:nth-child(3n-2) i { color: #dfdfdf; } */
/* section:nth-child(3n-1) { background-color: #F8F8F8; } */
/* section:nth-child(3n) { background-color: #ffffff; } */
section {
    /* min-height: 90vh; */
    /* max-height: 700px; */
    padding: 40px;
    display: flex; justify-content: start; align-items: center; position: relative;
    flex-direction: column; gap: 30px;
}
.first-fold canvas { position: absolute; z-index: -1; } 

/* .first-fold { display: flex; justify-content: right; align-items: center; position: relative; flex-direction: row-reverse; }
.first-fold canvas { max-width: 100%; } 
.first-fold .panel { width: 400px; height: 100%; overflow: hidden; position: relative; flex-shrink: 0;}
.first-fold .panel img { height: 100%; position: absolute; left: 0; top: 0; } */


.row {
    display: flex;
    width: 100%;
    gap: 40px;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.row .col {
    display: flex;
    flex-direction: column;
}


nav .logo span { font-weight: 500; }

nav { position: fixed; z-index: 10; top: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; padding: 40px; padding-top: 30px; padding-bottom: 5px; border-bottom: 1px solid #EAECF0; background-color: rgba(100%,100%,100%,100%); }
nav.scrolled { padding-left: 20px; padding-right: 20px; padding-top: 0px; padding-bottom: 0px; background-color: rgba(100%,100%,100%,0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all 0.4s cubic-bezier(0,.65,0,1);  }
nav ul { list-style: none; display: flex; gap: 20px; }
nav a { text-decoration: none; color: #313131; font-weight: 400; font-size: 14px; } /*fdfefe*/
nav.scrolled a { color: #313131; transition: all 0.4s cubic-bezier(0,.65,0,1); }

/* Top bar */
nav .top-bar { flex-basis: 100%; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 6px; padding-bottom: 6px; max-height: 40px; overflow: hidden; 
    background-color: #eff4f4; position: absolute; top: 0; left: 0; padding-left: 40px; padding-right: 40px;
    transition: max-height 0.4s cubic-bezier(0,.65,0,1), padding 0.4s cubic-bezier(0,.65,0,1), border-width 0.4s cubic-bezier(0,.65,0,1), opacity 0.3s, visibility 0.4s; }
nav.scrolled .top-bar { max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; opacity: 0; visibility: hidden; pointer-events: none; }
nav .top-bar a { font-size: 12px; color: #28282A; } /*fdfefe*/  /*28282A*/
nav .top-bar a:hover { color: #ddd; }
nav .top-bar .top-bar-contact { display: flex; align-items: center; gap: 20px; opacity: 0.6; }
nav .top-bar .top-bar-social { margin: 0; padding: 0; gap: 14px; opacity: 0.4; }
nav .top-bar .top-bar-social li a { display: flex; align-items: center; }
nav .top-bar .top-bar-social img { display: block; width: 14px; height: 14px; }

nav .logo a span{ color: #313131; }
nav.scrolled .logo { opacity: 1; transition: all 0.4s cubic-bezier(0,.65,0,1); }
nav.scrolled .logo a span{ color: #313131; }
nav ul li { position: relative; }
nav ul li ul{ display: flex; flex-direction: column; position: absolute; z-index: -1; left: 0px; top: -4px; width: 240px; margin: 0; padding: 0px; padding-top: 39px; gap: 0; border-radius: 8px; }
nav ul.desk li ul li { border-bottom: 1px solid #EAECF0; background-color: rgba(248, 248, 248, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-top: 10px; padding-bottom: 14px; padding-left: 18px; padding-right: 18px; }
nav ul li ul a { color: #313131; }

nav .burger { display: none; width: 20px; height: 15px; padding: 0; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: space-between; }
nav .burger span { display: block; width: 100%; height: 2.5px; background: #000; transition: 0.3s; border-radius: 20px; }

nav .burger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
nav .burger.active span:nth-child(2) { opacity: 0; }
nav .burger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

nav ul.mob { display: none; position: relative; }
nav ul.mob > li > a > img{ width: 24px; height: 24px; position: absolute; right: 10px; top: 10px; }

footer { padding-top: 80px; padding-bottom: 80px; padding-left: 20px; padding-right: 20px; position: relative; background-color: #efefef; }
footer .bottom-bar { padding: 8px; justify-content: center; width: 100%; background-color: #ddd; position: absolute; bottom: 0; left: 0; }
footer .bottom-bar a { color: #28282A; opacity: 0.6; }

footer h3 { font-weight: 500; }
footer a, footer p { text-decoration: none; font-size: 12px; margin: 0; }
footer .content { padding-left: 0px; padding-right: 40px; }
footer .content ul { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; list-style: none; padding: 0; }
footer .content ul li ul { flex-direction: column; padding: 0; }

footer .contact { margin-top: 40px; display: flex; gap: 20px; align-items: center; }
footer .contact h3 { margin: 0; }

footer .logo img { margin-left: -10px; max-width: 20vw; }

/* Width of the website is set below*/
section { padding-left: calc((100vw - 996px) / 2) !important; padding-right: calc((100vw - 996px) / 2) !important; }
nav { padding-left: calc((100vw - 996px) / 2); padding-right: calc((100vw - 996px) / 2); }
nav.scrolled { padding-left: calc((100vw - 996px) / 2); padding-right: calc((100vw - 996px) / 2); }
nav .top-bar { padding-left: calc((100vw - 996px) / 2); padding-right: calc((100vw - 996px) / 2); }
footer { padding-left: calc((100vw - 996px) / 2); padding-right: calc((100vw - 996px) / 2); }

@media (min-width:1600px) {
    
    /* footer > * { position: relative; z-index: 2; } */
    /* footer .bg-color { width: 200vw; position: absolute; left: -50vw; top: 0; background-color: #f8f8f8; height: 100%; z-index: 0; } */
}

@media (max-width: 800px) {

    .row { flex-wrap: wrap; }
    nav ul.desk { display: none; }
    nav ul.mob { display: flex; }
    nav ul.mob li ul{ z-index: 4; }

    nav .top-bar { padding-top: 4px; padding-bottom: 4px; }
    nav .top-bar a { font-size: 11px; }
    nav .top-bar .top-bar-contact { gap: 12px; }
    nav .top-bar .top-bar-social { gap: 12px; }

    nav .burger {
        display: flex;
    }
    nav > ul a { color: #313131; } /*fdfefe*/

    nav ul.mob {
        position: absolute; top: 100%; right: 0; width: calc(100vw - 60px);
        display: flex; flex-direction: column; gap: 0;
        /* Hidden initially */
        max-height: 0; overflow: hidden; padding-left: 0px; margin-left: 30px; margin-right: 30px; border-radius: 6px;
        transition: max-height 0.3s ease;
    }

    nav ul.mob > li { border-bottom: 1px solid #EAECF0; background-color: rgba(248, 248, 248, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-top: 10px; padding-bottom: 14px; padding-left: 18px; padding-right: 18px; }
    nav ul.mob > li > a { font-weight: 500; font-size: 16px; }
    nav ul li ul { position: unset; padding-top: 10px; }
    nav ul.mob li ul li { padding-left: 20px; padding-right: 0; padding-bottom: 10px; width: max-content; border-bottom: 0px; background-color: rgba(248, 248, 248, 0.0); }
    /* Open menu */
    nav ul.active { max-height: 1000px; border: 1px solid #EAECF0; }

    footer {  }

}

@media (max-width:500px) {

    nav { padding-top: 40px; padding-bottom: 20px; padding-left: 30px; padding-right: 30px; background-color: rgba(100%,100%,100%,0.8); }
    nav.scrolled { padding-top: 20px; padding-bottom: 20px; }
    nav .top-bar { padding-left: 30px; padding-right: 30px; }
    nav .top-bar .top-bar-contact a:last-child { display: none; }
    
    

    section { padding: 20px; }

    .row { flex-wrap: wrap; gap: 20px; }

    footer .content > ul { gap: 30px; }
    footer .contact { flex-direction: column; align-items: flex-start; gap: 10px; }

    footer .content { padding-left: 20px; padding-right: 20px; }

    footer .logo img { margin-left: -15px; }

}