* { 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: 80px 20px 48px; position: relative; background-color: #194558; color: #D9E6EA; }
footer .footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1fr; gap: 40px; align-items: start; width: 100%; }
footer h3 { font-family: 'Parkinsans', Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #A9C6CF; margin: 0 0 16px; }

footer a { text-decoration: none; font-size: 13px; margin: 0; color: #D9E6EA; transition: color 0.2s ease; }
footer p { font-size: 13px; margin: 0; color: #B9D2D9; line-height: 160%; }
footer .footer-brand .logo { display: inline-block; margin-bottom: 16px; }
footer .footer-brand .logo img { height: 44px; width: auto; display: block; margin-left: -7px; }
footer .footer-tagline { max-width: 300px; }

footer .footer-social { display: flex; gap: 10px; margin-top: 20px; }
footer .footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); transition: background-color 0.2s ease, transform 0.2s ease; }

footer .footer-social a:hover { background-color: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
footer .footer-social a img { filter: invert(1); display: block; }

footer .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
footer .footer-col a:hover { color: #FFFFFF; }

footer .footer-bottom-bar { margin-top: 60px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
footer .footer-bottom-bar span { font-size: 12px; color: #9FBEC7; }
footer .footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
footer .footer-legal a { font-size: 12px; color: #9FBEC7; }
footer .footer-legal a:hover { color: #FFFFFF; }

/* Width of the website is set below*/
section { padding-left: calc((100vw - 996px) / 2); padding-right: calc((100vw - 996px) / 2); }
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: 1045px) {

    .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 .footer-main { grid-template-columns: 1fr 1fr; gap: 40px 24px; }


    
    /*fixing padding*/
    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; padding-left: 20px; padding-right: 20px; }
    nav .top-bar { padding-left: 30px; padding-right: 30px; }
    nav .top-bar .top-bar-contact a:last-child { display: none; }
    section { padding: 20px; }
    footer { padding: 20px; }

}

@media (max-width:500px) {


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

    footer .footer-main { grid-template-columns: 1fr; gap: 32px; }
    footer .footer-bottom-bar { flex-direction: column; align-items: flex-start; }

}