@import url("reset.css");
@import url("fonts.css");


html {
    box-sizing: border-box;
}

*, *::before, *::after{
    box-sizing: inherit;
}

body {

    font-family: 'NovemberPro';
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 150%;
    color: #141E29;
}
a {
    color: #141E29;
    text-decoration: underline;
}
a:hover, a:active {
    color: #E2CC81;
    text-decoration: underline;
}
a:disabled {
    color: #E0E2E9;
    text-decoration: underline;
}
ul li {
    margin-left: 20px;
    list-style-type: disc;
    background-position: 2px 2px;
    background-size: 1.6rem 1.6rem;
    background-repeat: no-repeat;
    margin-bottom: 8px;
  }
/* img {
    max-width: 100%;
    height: auto;
} */

/* navivation bar styles - start */
.nav-bar {
    height: 64px;
    width: 100%;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 201;
}

.nav-bar-block {
    display: flex;
    justify-content: end;
    align-items: center;
}
.novel-logo {
    width: 160px;
    height: auto;
    position: fixed;
    top: 54px;
    left: 0;
    z-index: 90;
}
.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 64px;
}
/* navivation bar styles - end */

/* menu style - start*/
.main-menu {
        margin-right: 72px;
}
.menu {
    display: flex; 
}
.menu li  {
    padding: 0 16px 0 16px;
    margin-left: 0;
    list-style-type: none;
    background: none;
    margin-bottom: 0;
}
.menu li a {
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #141E29;
    text-decoration: none;
    white-space: nowrap;
}

/* menu style - end*/
.base-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

.main-section {
    margin-top: 64px;
    height: 400px;
    background: url(../images/mainscreen_bg.png) no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.main-title {
    color: #FFFFFF;
}

.order-button .btn-primary {
    border: 1px solid #141E29;
}

.about-section {
    background: #f8f9ff url(../images/about_bg.png) no-repeat center;
    background-size: cover; 
}

.title-1 {   
    font-weight: 500;
    font-size: 56px;
    line-height: 110%;
    margin-bottom: 32px;
}
.title-2 {
    font-weight: 500;
    font-size: 48px;
    line-height: 120%;
    margin-bottom: 32px;
}
.title-3 {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    margin-bottom: 32px;
}
.title-4 {
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    margin-bottom: 16px;
}
.title-5 {
    font-weight: 500;
    font-size: 18px;
    line-height: 120%;
    margin-bottom: 16px;
}
.body-1 {
    font-size: 18px;
    line-height: 140%;
}
.body-2 {
    font-size: 16px;
    line-height: 140%;
}

.field-title {
    font-size: 12px;
    line-height: 16px;
    color: #9D99AC;
    margin-bottom: 8px;
}
.form-item input, .form-item textarea{
    width: 100%;
    height: 56px;
    padding-left: 20px;
    background: #FFFFFF;
    border-radius: 4px;
    border: solid 1px #9DD6D8;
    color: #212121;
}
.form-item textarea{
    min-height: 120px;
    font-family: 'NovemberPro';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
}
.form-item input:hover,  .form-item textarea:hover {
    border: 1px solid #E8E6F8;
}
.form-item input:focus,  .form-item textarea:focus {
    border: 1px solid #605DEC;
}
.form-item input:active {
    color: red;
}
.form-item input:disabled, .form-item input:disabled:hover{
    color: #C5C0DB;
    border: 1px solid #9DD6D8;
}
.form-item input:disabled::placeholder { 
    color: #C5C0DB;
}
.form-item input::placeholder, .form-item textarea::placeholder{
    font-family: 'NovemberPro';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #212121;
}
.form-item-with-label {
    position: relative;
}
.form-item-with-label input, .form-item-with-label textarea {
    padding-top: 16px;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.form-item-with-label label {
    position: absolute;
    top: 8px;
    left: 20px;
    z-index: 100;
}

.form-item-with-label label.error {
    position: relative;
}

.form-item.check {
    display: flex;
    align-items: center;
}

.form-item.check input{
    height: auto;
    width: auto;
    margin-right: 8px;
}

.form-checkbox {
    display: block;
    width: 24px;
    height: 24px;
    border: 1px solid #999AAB;
    box-sizing: border-box;
    border-radius: 4px;
    margin-right: 8px;
  }

.form-checkbox:hover {
    border: 1px solid #141E29;
}
  
.form-checkbox:checked,
.form-checkbox:not(:checked) {
    position: absolute;
    left: -9999999999px;
}
  
.form-checkbox:checked + label,
.form-checkbox:not(:checked) + label {
    position: relative;
    padding-left: 36px;
    cursor: pointer;
}
  
.form-checkbox:checked + label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background: url(../images/svg/checkbox-active-24.svg) no-repeat center left;
}

   
.form-checkbox:not(:checked) + label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background: url(../images/svg/checkbox-deactive-24.svg) no-repeat center left;
}

.form-checkbox:not(:checked):hover + label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background: url(../images/svg/checkbox-hover-24.svg) no-repeat center left;
}

.form-item input.error {
    background: #FFF5F5;
    border: 1px solid #FFD8D8;
}

.form-item textarea.error {
    background: #FFF5F5;
    border: 1px solid #FFD8D8;
}

.form-item label.error {
    display: block;

    position: relative;
    top: 0;
    left: 0;
    font-size: 12px;
    line-height: 16px;
    color: #4c4b4b;
    padding-left: 24px;
    background-image: url(../images/svg/form-error-16.svg);
    background-repeat: no-repeat;
  
    margin-top: 8px;
    height: 16px;
}

#message {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* buttons styales - start */
button {
    margin: 0;
    padding: 0;
    border-width: 0;
    border-style: none;
 }
 
 .btn, a.btn {
    display: flex;
    align-items: center;
    text-align: center;
    text-decoration: none;
    width: -moz-fit-content;
    width: fit-content;
    box-sizing: border-box;
    border: inherit;
 }
 
 .btn:hover, .btn:focus, .btn.focus {
     /* color: #333; */
     text-decoration: none;
 }
 
 .btn:hover, a.btn:hover {
    text-decoration: none;
    cursor: pointer;
 }
 
 .btn-primary, .btn-primary:focus {
    color: #FFFFFF; 
    background: #141E29;
    border-radius: 4px;
 }
 
 .btn-primary:hover{
    background: #E2CC81;
    box-shadow: 0px 4px 4px rgba(20, 30, 41, 0.25);
    color: #141E29;
 }
 
 .btn-primary:active {
    background: #E2CC81;
    border: 1px solid #141E29;
    box-sizing: border-box;
    border-radius: 4px;
 }
 
 .btn-primary:disabled {
     color: #999AAB;
     background: #E0E2E9;
 }
 
 .btn-primary:disabled:hover  {
     color: #999AAB;
     background: #E0E2E9;
     cursor: auto;
     box-shadow: none;
 }
 
 .btn-secondary, .btn-secondary:focus {
     color:#141E29;
     background: #FFFFFF;
     border-radius: 4px;
 }
 
 .btn-secondary:hover{
     background: #E2CC81;
     color: #141E29;;    
     box-shadow: 0px 4px 4px rgba(20, 30, 41, 0.25);
     border-radius: 4px;
  }
  
  .btn-secondary:active {
     background: #9DD6D8;
     color:#141E29;
     border: 1px solid #141E29;
     box-sizing: border-box;
     border-radius: 4px;
  }
 
 .btn-normal, .btn-normal:focus {
     font-size: 20px;
     line-height: 24px;
     padding: 20px 32px;
     height: 56px;
 }
 
 .btn-medium, .btn-medium:focus {
     padding: 14px 32px;
     height: 48px;
     font-size: 16px;
     line-height: 20px;
 }
 
 .btn-small {
    padding: 12px 24px;
    height: 40px;
 }
 
 .btn-extra-small {
    padding: 8px 24px;
    height: 32px;
 }
 
 .btn-white {
    background: #FFFFFF;
    border: 1px solid #141E29;
    box-sizing: border-box;
    border-radius: 4px;
 }
 
 .btn-white:hover {
    background: #2F80ED;
    box-shadow: 0px 4px 4px rgba(20, 30, 41, 0.25);
    color: #FFFFFF;
 }
 
 .btn-tertiary {
    background: none;
    border: none;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #FFFFFF;
 
 }
 
 .btn-tertiary:hover {
    background: rgba(224, 226, 233, 0.24);
    border: 1px solid #141E29;
    color: #141E29;
 }
 
 .btn-medium.btn-right-icon .btn-content {
    margin-right: 8px;
 }
 .btn-medium.btn-left-icon .btn-content {
    margin-left: 8px;
 }
 
 
 .btn-only-icon.btn-secondary  {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;    
    border: 1px solid #ffffff;
    box-sizing: border-box;
    border-radius: 4px;
    background: none;
 }
 .btn-only-icon.btn-secondary:hover {
    box-sizing: border-box;
    border: 1px solid #141E29;
    background: #E0E2E9;
 }
 .btn-only-icon.btn-secondary.btn-medium {
    width: 48px;  
    height: 48px;
    padding: 0;
 
 }
 .btn, a.btn.btn-width-100{
     width: 100%;
     justify-content: center;
 }
 /* buttons styales - start */

.version-block {
    display: flex;
}

.version-block>div:not(last-child) {
    margin-right: 8px;
}


/* - start */
.proposal {
    display: flex;
}

.proposal>div {
    width: 100%;
    max-width: 588px;

}
.proposal>div:first-child {
    margin-right: 24px;
    
}
/*  - end*/

#partners {
    padding-top: 80px;
}

/* projects styles - start */

.projects{
    width: 100%;
    max-width: 800px;
    margin: 0 auto;    
    position: relative;
    min-height: 200px;
}

.prev {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: -80px;
    box-sizing: border-box;
    border: 1px solid #999AAB;
    border-radius: 4px;
    opacity: 0.5;
}
.next {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: -80px;
    box-sizing: border-box;
    border: 1px solid #999AAB;
    border-radius: 4px;
    opacity: 0.5;
}

.prev:hover, .next:hover {
    background: #999AAB;
    color: #141E29;
    cursor: pointer;
}


.project-card {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
}

.project-card.active {
    opacity: 1;
    z-index: 99;
}

.project-card>div:first-child {
    margin-right: 24px;
}

.project-logo {

}
.project-description {
    font-weight: 500;
}

.project-text {
    color: #E0E2E9;
}
.project-link {
}
.project-link a {
}

.project-link .btn-tertiary:hover {
    color: #FFF; 
 }

.project-link .btn-tertiary {
    color: #FFF; 
    border: 1px solid #141E29;
 }

 .project-img {
     height: auto;
 }

.project-img img{
    border-radius: 9px;    
}

/* projects styles - end */
.partner_logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.partner_logos>div {
    margin-right: 32px;
    margin-bottom: 32px;
}

.partner_logos>div img {
    height: 70px;
}
/* order styles - start  */

.order-content {
    display: flex;
}

.order-content>div {
    width: 100%;
    max-width: 588px;
}
.order-content>div:first-child {
    margin-right: 24px;    
}

/* order style - end */

.g__map {
    width: 382px; 
    height: 200px; 
    background: #cccccc;
}

.system-hide {
    display: none;
}

.menu-burger {
    height: 32px;
    width: 32px;
    position: absolute;
    top: 11px;
    right: 24px;
    display: none;

}

.menu-close {
    height: 32px;
    width: 32px;
    position: absolute;
    top: 11px;
    right: 24px;
    display: none;
}

.hide {
    display: none;
}

.slider-pager {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
}

.slider-pager>div {
    margin-right: 12px;
}

.slider-pager>div:last-child {
    margin-right: 0;
}

.circle.active {
    background: #141E29;
    border: 1px solid #E0E2E9;
}

.circle {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 12px;
    box-sizing: border-box;
    background: #E0E2E9;
    border: 1px solid #141E29;
}

/* system styles - start */
.wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.column-790 {
    max-width: 790px;
}
.mb-8 {
    margin-bottom: 8px;
}
.mb-16 {
    margin-bottom: 16px;
}
.mb-24 {
    margin-bottom: 24px;
}
.mb-32 {
    margin-bottom: 32px;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-72 {
    margin-bottom: 80px;
}
.mb-80 {
    margin-bottom: 80px;
}
.blue-backgound {
    background: #9DD6D8
}

.deep-sea-background {
    background: #141E29;
    color: #FFFFFF;
}

.light-gray-background {
    background: #f5f6f8;
    color: #141E29;
}

/* system styles - start */


@media screen and (max-width: 1024px) { 
    .base-section {
        padding-top:40px;
        padding-bottom:40px;
    }
   
    .wrapper {
        padding-left: 32px;
        padding-right: 32px;
    }

    .title-1 {
        font-size: 48px;
        line-height: 110%;
    }

    .title-2 {
        font-size: 32px;
        line-height: 120%;
    }

    .title-3 {
        font-size: 24px;
        line-height: 120%;
    }

    .title-4 {
        font-size: 18px;
        line-height: 120%;
    }

    .title-5 {
        font-size: 16px;
        line-height: 120%;
    }

    .nav-content {
        display: block;
    }

    
    .nav-bar {
        display: block;
        overflow: hidden;
        transition: height 0.2s ease-in-out;

    }

    .order-button {
        margin: 0 auto;
        width: -moz-fit-content;
        width: fit-content;
    }

    .nav-bar .wrapper {
        padding: 0;
    }

    .genomenal-logo {
        width: calc(100% - 64px);
        margin: 0 auto;
    }

    .nav-bar.open {
        height: 280px;
        background: #FFFFFF
    }

    .nav-bar .genomenal-logo {
        height: 54px;
        display: flex;
        align-items: center;
    }

    .nav-bar-block {
        padding-bottom: 24px;        
    }

    .nav-bar.open .nav-bar-block {     
        background: #e0e2e9;
    }

    .menu {
        display: block;
    }
    .main-menu {
        margin-right: 0px;
    }
    .menu li  {
        padding: 16px 0 16px 0;
        margin-left: 0;
        list-style-type: none;
        background: none;
        margin-bottom: 0;
    }
    .menu li a {
        font-size: 16px;
        line-height: 20px;
        justify-content: center;
        white-space: nowrap;
    }
    .nav-bar-block {
        display: block;  
    }

    .menu-burger {
        display: block;
    }

    .nav-bar.open .menu-close{
        display: block;
    }

    .nav-bar.open .menu-burger{
        display: none;
    }

    .mb-40 {
        margin-bottom: 24px;
    }

    .mb-80 {
        margin-bottom: 54px;
    } 

    .proposal {
        display: block;
    }

    .partner_logos {
   
    }

    .project-card {
        display: block;
    }

    .order-content {
        display: block;
    }

    .order-information {
        margin-bottom: 32px;
    }

    .project-logo {
        width: 100%;   
    }
    .project-text {
        width: 100%; 
    }
    .project-link {
        width: 100%;   
    }

    .project-link {
        margin-bottom: 16px;
    }

    .project-img img{
        width: 100%;
    }

    .prev {
        left: 16px;
        z-index: 102;
    }

    .next {
        right: 16px;
        z-index: 102;

    }

    .proposal>div:first-child {
        margin-bottom: 54px;        
    }

    .order-content>div {
        width: 100%;
        max-width: 100%;
    }

    .order-content button.btn-width-100 {
        width: -moz-fit-content;
        width: fit-content;
    }

}

@media screen and (max-width: 480px) { 

    .wrapper {
        padding-left: 24px;
        padding-right: 24px;
    }

    .base-section {
        padding-top:54px;
        padding-bottom:54px;
    }
    
    .title-1 {
        font-size: 24px;
        line-height: 120%;
        margin-bottom: 16px;
    }

    .main-title {
        font-size: 40px;
        line-height: 120%;
        margin-bottom: 16px;
    }

    .title-2 {
        font-size: 20px;
        line-height: 120%;
    }

    .title-3 {
        font-size: 18px;
        line-height: 120%;
    }

    .title-4 {
        font-size: 18px;
        line-height: 120%;
        margin-bottom: 8px;
    }
    
    .title-5 {
        font-size: 16px;
        line-height: 120%;
        margin-bottom: 8px;
    }

    .mb-80 {
      margin-bottom: 54px;
    }

    .body-1 {
        font-weight: normal;
        font-size: 16px;
        line-height: 130%;
    }

    .body-2 {
        font-size: 14px;
        line-height: 130%;
    }

    .btn, a.btn {
        width: 100%;
    }

    .btn-normal, .btn-normal:focus   {
        font-size: 16px;
        line-height: 20px;
    }

    .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus  { 
        width: 100%;
        justify-content: center;
    }

    .btn-secondary, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus  {
        width: 100%;
        justify-content: center;
    }

    /* .form-item.check, .form-item.check a {
        font-size: 10px;
    } */

    .nav-bar.open {
        /* height: 100vh; */
        background: #FFFFFF;
    }

    .project-img img {
        width: 100%;
        height: auto;
    }

    .project-logo img {
        height: 44px;
    }
    #partners {
        padding-top: 24px;
    }

    .about-section {
        background: #f8f9ff url(../images/about_bg.png) no-repeat center;
        background-size: cover; 
    }

    .partner_logos>div {
        margin-right: 32px;
        margin-bottom: 16px;
    }

    .partner_logos>div img {
        height: 32px;
        max-width: 300px;
    }

    .nav-bar .genomenal-logo {
        height: 64px;
    }

    .nav-bar .genomenal-logo img {
        height: 24px;
    }

    .nav-bar-block {
        padding-bottom: 24px;  
        padding-left: 24px;      
        padding-right: 24px;
    }

    .order-button .btn-primary {
        width: 100%;
    }

    .order-content button.btn-width-100 {
        width: 100%;
    }

}