:root {

    --white-color: #fff;
    --black-color: #000;
    --primary-color: #9BF300;
    --secondry-color: #141414;

}

body, html {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
}

ul { margin: 0; padding: 0; list-style-type: none; }
a { text-decoration: none!important; }
button { background-color: transparent; border: 0; cursor: pointer; }

/* icons */
i.socialIcon { width: 14px; height: 14px; display: inline-block; background-size: cover; }
i.linkedinIcon { background-image: url(../img/icons/social@2x.png); background-position: 0; }
i.instagramIcon { background-image: url(../img/icons/social@2x.png); background-position: 38px; }
i.tiktokIcon { background-image: url(../img/icons/social@2x.png); background-position:14px; }

i.mouseIcon { content: ""; width: 32px; height: 33px; background: url(../img/icons/mouse-icon.png) no-repeat center / cover; display: inline-block; margin-top: 8px; }

div#main { position: relative; }


header { background: url(../img/header-bg.png) no-repeat center / cover; display: flex; align-items: flex-end; box-shadow: 0 4px 4px 0 rgba(0,0,0,0.50); height: 100vh; }
header h1 { font-size: 80px; color: var(--secondry-color); max-width: 349px; margin: 0 auto; text-align: center; font-weight: bold; position: relative; z-index: 1; line-height: 75px; margin-top: 55%; }
header h1::after { content: ""; max-width: 648px; width: 200%; background-color: #9BF300; height: 48px; display: block; position: absolute; top: 53%; left:-40%; right: 0; transform: translateY(-50%); z-index: -1; }
header p { font-size: 24px; color: var(--secondry-color); text-align: center; max-width: 635px; margin: 40px auto; }
header p.bgColorGreen { background-color: #9BF300; font-size: 16px; font-weight: bold; max-width: 549px; }
header span { color: var(--secondry-color); font-weight: bold; display: block; text-align: center; margin-top: 120px; }
header span div { margin-bottom: 40px; }

nav { padding: 10px 0; position: absolute; top: 0; left: 0; right: 0; }
nav ul { display: flex; }
nav ul.menuList li { margin-right: 48px; }
nav ul.menuList li a { color: var(--secondry-color); font-weight: 400;  }
nav ul.socialLinks li { margin-right: 12px; }
nav ul.socialLinks li:last-child { margin-right: 0; }
.sticky { 
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--white-color);
    box-shadow: 0px 6px 5px -6px #141414;
}

section h3.title,
section h2 { font-size: 24px; font-weight: bold; line-height: 24px; }
section h3 { font-size: 80px; font-weight: bold; line-height: 80px; margin-top: 0; }
section p { font-size: 24px; margin: 0; margin-bottom: 30px; }
section h4 { font-size: 40px; font-weight: bold; }


section.about { padding: 83px 0; position: relative; }
section.about h3 span { color: rgba(0,0,0,0.50); }
section.about p span { background-color: var(--primary-color); font-weight: bold; }
section.about p:first-child { background-color: var(--secondry-color); color: var(--white-color); padding: 0 8px; font-size: 16px; display: inline-block; } 
section.about p:nth-child(2) { color: var(--secondry-color); } 
section.about p:last-child { color: var(--secondry-color); } 

section.strategies { background: url(../img/strategies-bg.jpg) no-repeat center / cover; padding: 200px 0; }
section.strategies h3 { color: var(--white-color); }
section.strategies h3 span { color: rgba(255, 255, 255, 0.5); }
section.strategies h4 { color: var(--white-color); margin: 0; }
section.strategies h4::after { display: inline-block; content: ""; width: 24px; height: 24px; border-radius: 50%; background-color: var(--primary-color); margin-bottom: 5px; margin-left: 5px; }
section.strategies ul li { margin-bottom: 30px; }
section.strategies ul li p { margin: 0; color: var(--white-color); }

section.team { padding: 80px 0; background-color: #0C1B19; }
section.team h3 { color: var(--white-color); max-width: 450px; }
section.team h3 span { color: rgba(255,255,255,0.50); }
section.team p { color: var(--white-color); margin-bottom: 100px!important; }
section.team p.small { margin-top: 30px; margin-bottom: 0!important; font-size: 16px; }

section.solutions { padding: 120px 0; background-color: #102019; }
section.solutions h3 { color: var(--primary-color); }
section.solutions h3 span { color: rgba(255, 255, 255, 0.5); }
section.solutions h3.title { color: var(--white-color); }
section.solutions p { color: var(--white-color); max-width: 720px; margin: auto; }

section.list div.content div.list { padding: 80px 0; }
section.list div.content div.number { font-size: 240px; font-weight: bold; color: var(--primary-color); }
section.list div.content div.dark { background-color: #0C1B19; }
section.list div.content div.light { background-color: #102019; }
section.list div.content div.modal { height: 0; transition: all .2s ease-in-out; overflow: hidden; }
section.list div.content div.modal.opened { display: block; height: 870px; padding: 80px 0;  }


section.list div.content div.modal p { font-size: 22px; color: var(--secondry-color); line-height: 36px; font-weight: bold; margin-top: 30px; }
section.list div.content div.modal p span { background-color: var(--primary-color); }
section.list div.content div.modal ul { max-height: 500px; display: flex; flex-direction: column; flex-wrap: wrap; margin-top: 80px; }
section.list div.content div.modal ul li { width: 50%; margin-right: 100px; margin-bottom: 32px; display: flex; }
section.list div.content div.modal ul li::before { content: ""; width: 16px; height: 16px; background-color: var(--primary-color); border-radius: 50%; display: block; margin-top: 8px; margin-right: 15px; }
section.list div.content div.modal ul li p { font-size: 22px; font-weight: 400; margin: 0; flex: 1; }
section.list div.content div.modal p.note { font-size: 16px; background-color: var(--primary-color); display: inline-block; padding: 0 8px; }
section.list div.content div.modal p.small { font-weight: 400; margin: 45px 0; }
section.list div.content p.imgTitle { margin-left: 100px; font-size: 24px; color: #fff; letter-spacing: 2px; margin-top: 8px; }
section.list div.content p.imgTitle.m-remove { margin-left: 0; }

section.contact { background-color: rgba(155,243,0,0.10); padding: 80px 0; }
section.contact p { color: var(--secondry-color); margin-top: 140px; margin-bottom: 0; }
section.contact p.bgColorGreen { background-color: var(--primary-color); padding: 8px; display: inline-block; font-size: 16px; font-weight: bold; margin-top: 20px; }
section.contact p.copyright { font-size: 14px; font-weight: 200; }

section.contact div.formWrapper { padding: 32px; background-color: var(--white-color); border-radius: 20px; }
section.contact div.formWrapper label { display: block; font-size: 18px; color: var(--secondry-color); margin-bottom: 15px; margin-top: 24px; }
section.contact div.formWrapper form { width: 100%; }
section.contact div.formWrapper input { width: 100%; display: block; box-sizing: border-box; height: 56px; border: 1px solid #D8D8D8; box-shadow: none; border-radius: 5px; background-color: transparent; padding: 0 15px; font-size: 18px; }
section.contact div.formWrapper input:focus-visible { outline: none; }
section.contact div.formWrapper button[type="submit"] { background-color: var(--secondry-color); color: var(--primary-color); display: block; width: 100%; height: 56px; border-radius: 10px; font-size: 20px; font-weight: bold;  margin-top: 30px;}
section.contact .logo { margin-top: 140px; }
section.contact div.formWrapper p#result { margin: 5px 0; display: none; color: red; }
section.contact div.formWrapper label.error { color: red; margin-top: 0; }
.navButton { display: none; }

@media screen and (max-width: 960px) {
    div.mobileFlex { flex-direction: column; align-items: center; }
    div.mobileFlex > div { text-align: center; margin-bottom: 30px; }

    section.contact div.formWrapper { margin-top: 30px; }
    section.list div.content div.number { font-size: 100px; }

    section.list div.content p.imgTitle,
    section.list div.content p.imgTitle.m-remove { margin: 0; }
    
    section.list div.content div.modal ul { max-height: fit-content; }
    section.list div.content div.modal.opened { height: fit-content; }
    section.list div.content div.modal ul li { width: 100%; }
    section.list div.content div.modal ul li p { font-size: 24px; }
    .navButton { display: inline-block; }
    .navMenu { background-color: var(--white-color); position: absolute; left: -100%; width: calc(100% - 60px); transition: .2s all ease-in-out; top: 100px; padding: 30px; justify-content: space-between; z-index: 9999; }
    .navMenu.opened { left: 0; }
    .navMenu ul { flex-direction: column; }

    header h1::after { max-width: 100%; left: 0; }

    section h3 { font-size: 50px; line-height: 50px; }
    section.about p:first-child { margin-top: 30px; }
    section.contact p.copyright { margin-top: 30px; }
    section.contact div.formWrapper label { font-size: 16px; margin-bottom: 10px; margin-top: 15px; }

    header h1 { font-size: 50px; line-height: 50px; }
    section.contact div.formWrapper input { height: 46px; }

    header p { font-size: 18px; margin: 15px auto; }
    header span { margin-top: 40px; }
    
}