@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Oswald:wght@400;500&display=swap&subset=cyrillic');


html {
  scroll-behavior: smooth;
}

body {
    background-color: #0E3F42;
    display: flex;
    font-family: "Inter", sans-serif;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow
}


h1, .h1, h2, .h2 {
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
}















.header {}
    .header .logo {
        position: absolute;
        display: flex;
        /* padding: 10px; */
        padding: 20px 24px;
        align-items: center;
        gap: 36px;
    }
        .header .logo svg { color: #C8C1AC; }
    .header .contactBtn {
        position: absolute;
        right: 0px;
        display: flex;
        padding: 20px 24px;
        align-items: center;
        text-decoration: none;
        gap: 16px;
    }
        .header .contactBtn img {
            border-radius: 24px;
            display: flex;
            width: 48px;
            height: 48px;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        .header .contactBtn div {
            display: flex;
            flex-direction: row;
            leading-trim: both;
            text-edge: cap;
            font-family: Inter;
            font-size: 20px;
            font-style: normal;
            font-weight: 500;
            line-height: 125%;
            justify-content: center;
            align-items: flex-start;
            gap: 0px;
            color: #CAC1AA;
        }
        .header .contactBtn span {
            border-bottom: 2px solid #CAC1AA;
            display: inline-block;
            flex-basis: content;
        }
        @media (max-width: 750px) {
          .header .contactBtn div {
              flex-direction: column;
              font-size: 16px;
          }
          .header .contactBtn span.spacer {
              display: none;
          }
        }




.block {
    display: flex;
    padding: 120px 60px;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
    align-self: stretch;
}
@media (max-width: 750px) {
  .block {
      padding: 60px 10px;
  }
}
    h1, .h1 {
        //...
    }
    h2, .h2 {
        align-self: stretch;
        color: #C8C1AC;
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        font-size: 60px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 72px */
        text-transform: uppercase;
    }



#Hero {
    background-image: url('images/Background.png');
    animation: moveBackground 500s linear infinite;
    background-size: auto 100%;
    background-position: 0px 0;
    display: flex;
    height: 90vh;
    padding: 40px 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    align-self: stretch;
}
@media (max-width: 750px) {
    #Hero {
      padding: 40px 10px;
    }
}

@keyframes moveBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -12000px 0;
  }
}
    /* #Hero h1 { color: #C8C1AC; margin: 0 auto; text-transform: uppercase; position: relative; }
      #Hero h1 .line-1 { display: block; font-size: 120px; font-size: 120px; }
        #Hero h1 .word-1 { display: inline-block; }
        #Hero h1 .word-2 { display: inline-block;}
      #Hero h1 .line-2 { display: block; font-size: 110px;  }
        #Hero h1 .word-3 { display: inline-block; }
        #Hero h1 .word-4 { display: inline-block; }
        #Hero h1 .therest { display: inline-block; font-size: 43px; } */
    #Hero h1 { color: #C8C1AC; margin: 0 auto; text-transform: uppercase; position: relative; }
      #Hero h1 .line-1 { display: block; font-size: 8.4vw; }
        #Hero h1 .word-1 { display: inline-block; }
        #Hero h1 .word-2 { display: inline-block;}
      #Hero h1 .line-2 { display: block; font-size: 7.4vw;  }
        #Hero h1 .word-3 { display: inline-block; }
        #Hero h1 .word-4 { display: inline-block; }
        #Hero h1 .therest { display: inline-block; font-size: 3vw; }
    @media (max-width: 750px) {
      #Hero h1 .word-1 { display: block; font-size: 16.4vw; }
      #Hero h1 .word-2 { display: block; font-size: 18vw; }
      #Hero h1 .line-2 { display: block; font-size: 13.1vw;  }
      #Hero h1 .therest { display: block; font-size: 7.5vw; margin-top: 2.4vw; }
    }

#WhatWeDo {
  color: #C8C1AC;
  text-align: center;
  font-family: Oswald;
  font-size: 4vw;
  font-style: normal;
  font-weight: 300;
  line-height: 175%;
  margin: 0 auto;
  text-transform: uppercase;
  padding-top: 60px;
  position: relative;
}
@media (max-width: 750px) {
  #WhatWeDo {
    font-size: 4.4vw;
    padding: 60px 10px;
  }
}



#Portfolio {
    background-color: #1A4E51;
    padding: 120px 0;
    gap: 0;
}
@media (max-width: 750px) {
    #Portfolio .h2 { font-size: 48px; }
    #Portfolio .h2 span { display: block; }
}
    #Portfolio .h2 { color: #C8C1AC; }
    #Portfolio .layout {
        display: flex;
        overflow-x: auto;
        justify-content: space-between;
        align-items: flex-start;
        align-self: stretch;
        gap: 36px;
        padding: 30px 60px;
        margin-bottom: 30px;
    }
    @media (max-width: 750px) {
        #Portfolio .layout {
            padding: 30px 10px;
            gap: 24px;
        }
    }
        #Portfolio .layout .Portfolio__Item {
            cursor: pointer;
            display: flex;
            width: 360px;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding-top: 30px;
            gap: 0;
            text-decoration: none;
        }
        #Portfolio .layout .Portfolio__Item:nth-child(even) {
            padding-top: 90px;
        }
        #Portfolio .layout .Portfolio__Item .cover {
            border-radius: 24px;
            background: #C8C1AC;
            box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.01);
            /* height: 380px; */
            align-self: stretch;
            transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
            transform: translateX(0px), scale(1);
            width: 100%;
            min-width: 300px;
          }
        #Portfolio .layout .Portfolio__Item:hover .cover {
            box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.24);
            transform: translateY(-6px) scale(1.01);
            top: -6px;
        }
        #Portfolio .layout .Portfolio__Item .name,
        #Portfolio .layout .Portfolio__Item .description {
            align-self: stretch;
            color: #C8C1AC;
            leading-trim: both;
            text-edge: cap;
            font-family: Inter;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 145%; /* 26.1px */
            display: flex;
            padding: 0px 12px;
        }
        #Portfolio .layout .Portfolio__Item .name {
            padding-top: 18px;
        }
        #Portfolio .layout .Portfolio__Item .description {
            opacity: 0.75;
        }

    #Portfolio .more {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        align-self: stretch;
    }
        #Portfolio .more a {
            background-color: transparent;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            display: flex;
            padding: 18px 36px 18px 33px;
            align-items: center;
            text-decoration: none;
            gap: 18px;
            transition: all 0.3s ease-in-out;
        }
        #Portfolio .more a:hover {
            border-color: #C8C1AC;
            background-color: #C8C1AC;
        }
            #Portfolio .more svg {
                height: 20px;
                width: 20px;
                transition: all 0.3s ease-in-out;
            }
            #Portfolio .more svg {
                color: #C8C1AC;
            }
            #Portfolio .more span {
                color: #C8C1AC;
                leading-trim: both;
                text-edge: cap;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 175%;
                transition: all 0.3s ease-in-out;
            }
            #Portfolio .more a:hover span {
                color: #0E3F42;
            }
            #Portfolio .more a:hover svg {
                color: #0E3F42;
            }
            #Portfolio .more span > span { opacity: 0.75; }



#Stages {
    background: #0E3F42;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-self: stretch;
}
@media (max-width: 960px) {
    #Stages { flex-direction: column; padding-left: 10px; padding-right: 10px; }
}
    #Stages .h2 {
        text-align: left;
        flex: 1;

    }
    #Stages .layout {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }
    @media (max-width: 960px) {
      #Stages .layout + .layout { border-top: 0; margin-top: -60px; }
    }
        #Stages .layout .Stages__Item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            display: flex;
            padding: 24px 0px;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            align-self: stretch;
        }
            #Stages .layout .Stages__Item__Head {
                display: flex;
                align-items: flex-start;
                gap: 24px;
                align-self: stretch;
            }
                #Stages .layout .Stages__Item__Head .number {
                    color: #C8C1AC;
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Oswald;
                    /* font-size: 24px; */
                    font-size: 48px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 120%; /* 28.8px */
                    text-transform: uppercase;
                    opacity: 0.48;
                    width: 48px;
                }
                #Stages .layout .Stages__Item__Head .title {
                    flex: 1 0 0;
                    color: #C8C1AC;
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Inter;
                    /* font-size: 24px; */
                    /* font-weight: 400; */
                    /* line-height: 120%; /* 28.8px */ */
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 175%; /* 28px */
                    /* text-transform: uppercase; */
                    gap: 0;
                    padding: 4px 0;
                }
                #Stages .layout .Stages__Item__Head .title div + div {
                    font-weight: 400;
                    line-height: 145%; /* 23.2px */
                    opacity: 0.75;
                }
                #Stages .layout .Stages__Item__Head svg {
                    color: #C8C1AC;
                    height: 40px;
                    width: 40px;
                    transition: transform .3s;
                }
                #Stages .layout .Stages__Item.-open .Stages__Item__Head svg {
                    transform: rotate(-180deg);
                }
            #Stages .layout .Stages__Item__Body {
                display: none;
                padding: 12px 72px;
                align-items: flex-start;
                gap: 60px;
                align-self: stretch;
                height: auto;
            }
            #Stages .layout .Stages__Item.-open .Stages__Item__Body {
                display: flex;
            }
                #Stages .layout .Stages__Item__Body .description {
                    display: flex;
                    padding: 12px 0px;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    flex: 1 0 0;
                    color: #C8C1AC;
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 175%; /* 31.5px */
                    opacity: 0.75;
                }
                #Stages .layout .Stages__Item__Body .result {
                    border-radius: 20px;
                    background: #256468;
                    display: flex;
                    max-width: 480px;
                    padding: 12px 10px;
                    align-items: flex-start;
                    flex: 1 0 0;
                }
                    #Stages .layout .Stages__Item__Body .result svg {
                        height: 60px;
                        width: 60px;
                    }
                    #Stages .layout .Stages__Item__Body .result div {
                        display: flex;
                        padding: 6px 12px;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 0px;
                        flex: 1 0 0;
                    }
                        #Stages .layout .Stages__Item__Body .result div span {
                            align-self: stretch;
                            color: #C8C1AC;
                            leading-trim: both;
                            text-edge: cap;
                            font-family: Inter;
                            font-size: 16px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: 145%; /* 31.5px */
                        }
                        #Stages .layout .Stages__Item__Body .result div span + span { opacity: 0.75; }



#About {
    background: #C8C1AC;
    display: flex;
    flex-direction: row;
    padding: 120px 60px;
    align-items: flex-start;
    gap: 60px;
    align-self: stretch;
}
@media (max-width: 1000px) {
    #About { flex-direction: column; }
}
@media (max-width: 750px) {
  #About {
      padding: 0;
      gap: 24px;
  }
  #About .layout {
      padding: 30px 10px 60px;
      gap: 24px;
  }
}
    #About .photo {
        border-radius: 20px;
        background-image: url('images/photo1.png');
        background-size: cover;
        box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
        width: 460px;
        height: 600px;
    }
    @media (max-width: 1080px) {
        #About .photo {
            border-radius: 0;
            background-image: url('images/photo1-mobile.png');
            width: 100vw;
            box-shadow: 0 0 0 transparent;;
            height: 67vw;
        }
    }
    #About .layout {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 60px;
        flex: 1 0 0;
    }
        #About .h2 {
            color: #0E3F42;
            text-align: left;
        }
        @media (max-width: 750px) {
            #About .h2 { font-size: 48px; }
        }
        #About p {
            color: #0E3F42;
            opacity: 0.75;
            color: #0E3F42;
            leading-trim: both;
            text-edge: cap;
            font-family: Inter;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 145%; /* 26.1px */
            padding: 0;
            margin: 0;
        }
        .about__youtube {
          margin-top: -30px;
        }
          .about__youtube__items {
            border-top: 1px solid rgba(14, 63, 66, 0.12);
            border-bottom: 1px solid rgba(14, 63, 66, 0.12);
            display: flex;
            padding: 18px 0px;
            align-items: center;
            gap: 18px;
            align-self: stretch;
          }
          @media (max-width: 600px) {
              .about__youtube__items {
                gap: 10px;
              }
          }
            .about__youtube__items a {
              text-decoration: none;
              flex: 1 0 0;
            }
              .about__youtube__items a img {
                width: 100%;
              }
          .about__youtube__caption {
            display: flex;
            padding: 18px 0px;
            align-items: center;
            gap: 5px;
            align-self: stretch;
          }
            .about__youtube__caption span {
              color: #0E3F42;
              padding-right: 5px;
            }
            .about__youtube__caption svg {
              color: #0E3F42;
            }
            .about__youtube__caption a {
              color: #0E3F42;
              font-weight: 500;
            }

    #About .more {
        display: flex;
        flex-direction: row;
        align-items: left;
        gap: 10px;
        align-self: stretch;
        width: auto;
    }
        #About .more a {
            background-color: transparent;
            border-radius: 50px;
            border: 1px solid rgba(0, 0, 0, 0.12);
            display: flex;
            padding: 18px 36px 18px 33px;
            align-items: center;
            text-decoration: none;
            gap: 18px;
            transition: all 0.3s ease-in-out;
            width: auto;
        }
        #About .more a:hover {
            border-color: #0E3F42;
            background-color: #0E3F42;
        }
            #About .more svg {
                height: 20px;
                width: 20px;
                transition: all 0.3s ease-in-out;
            }
            #About .more svg {
                color: #0E3F42;
            }
            #About .more span {
                color: #0E3F42;
                leading-trim: both;
                text-edge: cap;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 175%;
                transition: all 0.3s ease-in-out;
            }
            #About .more a:hover span {
                color: #C8C1AC;
            }
            #About .more a:hover svg {
                color: #C8C1AC;
            }
            #About .more span > span { opacity: 0.75; }


#Contact {
    display: flex;
    padding: 120px 60px;
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
    align-self: stretch;
}
@media (max-width: 1000px) {
    #Contact { flex-direction: column-reverse; align-items: stretch; }
}
@media (max-width: 750px) {
  #Contact {
      padding: 60px 10px;
  }
  #Contact .layout {
        padding: 30px 10px;
        gap: 24px;
    }
  }
    @media (min-width: 1000px) {
      #Contact form#contactForm {
          display: block;
          width: 48%;
      }
    }
    #Contact .form {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        flex: 1 1 0;
    }
    @media (max-width: 1000px) {
        #Contact .form { margin-top: 60px;}
    }
        #Contact .form .wrap {
            border-radius: 20px;
            background: #1A4E51;
            display: flex;
            padding: 36px 24px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 24px;
            align-self: stretch;
        }
            #Contact .form .wrap .field {
              display: flex;
              padding: 0px;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              gap: 0px;
              align-self: stretch;
            }
            #Contact .form .wrap label.field {
              padding: 0px;
            }
                #Contact .form .wrap label.field input,
                #Contact .form .wrap label.field textarea {
                    background: transparent;
                    border: 0;
                    border-bottom: 2px solid rgba(200, 193, 172, 0.12);
                    padding: 12px 0px;
                    align-items: left;
                    outline: 0;
                  }
                  #Contact .form .wrap label.field textarea {
                    height: 120px;
                    resize: vertical;
                  }
                  #Contact .form .wrap .field input,
                  #Contact .form .wrap label.field textarea,
                  #Contact .form .wrap .field .field__label {
                    color: #C8C1AC;
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 24px;
                    width: 100%;
                }
                #Contact .form .wrap .field input:focus,
                #Contact .form .wrap .field textarea:focus {
                    border-bottom: 2px solid rgba(200, 193, 172, 1);
                }
                #Contact .form .wrap .field .field__label {
                    opacity: 0.75;
                }
                #Contact .form .wrap label.field .field__label {
                    margin: -37px 0 37px;
                    transition: all 0.3s ease-in-out;
                }
                #Contact .form .wrap label.field input:focus + .field__label,
                #Contact .form .wrap label.field input:not(:placeholder-shown) + .field__label,
                #Contact .form .wrap .field textarea:focus:focus + .field__label,
                #Contact .form .wrap .field textarea:not(:placeholder-shown) + .field__label {
                    font-size: 12px;
                    margin: -60px 0 60px;
                }
                #Contact .form .wrap .field input[type=radio] {
                    display: none;
                }

                #Contact .form .wrap .field .field__options {
                    display: flex;
                    align-items: flex-start;
                    gap: 5px;
                    padding: 12px 0 0;
                    width: 100%;
                }
                @media (max-width: 750px) {
                  #Contact .form .wrap .field .field__options {
                      flex-direction: column;
                  }
                }
                #Contact .form .wrap .field .option {
                    color: #C8C1AC;
                    cursor: pointer;
                    border-radius: 24px;
                    border: 1px solid rgba(200, 193, 172, 0.12);
                    display: flex;
                    height: 24px;
                    padding: 12px 21px 12px 15px;
                    justify-content: center;
                    align-items: center;
                    gap: 5px;
                    leading-trim: both;
                    text-edge: cap;
                    font-family: Inter;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 145%;
                    transition: all 0.3s ease-in-out;
                }
                    #Contact .form .wrap .field .option svg {
                      width: 0px;
                      height: 0px;
                      opacity: 0;
                      transition: all 0.3s ease-in-out;
                    }
                    #Contact .form .wrap .field .option span {

                    }
                #Contact .form .wrap .field .option:hover {
                    border: 1px solid rgba(200, 193, 172, 0.24);
                }
                #Contact .form .wrap .field input[type=radio]:checked + .option {
                    border-radius: 24px;
                    border: 1px solid rgba(200, 193, 172, 0.24);
                    background: #C8C1AC;
                    color: #0E3F42;
                    padding: 12px 24px 12px 15px;
                  }
                      #Contact .form .wrap .field input[type=radio]:checked + .option svg {
                          width: 24px;
                          height: 24px;
                          opacity: 1;
                      }
        #Contact .form .button {
            border-radius: 24px;
            border: 0;
            outline: 0;
            background: #C8C1AC;
            cursor: pointer;
            display: flex;
            padding: 30px 36px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            align-self: stretch;
            color: #0E3F42;
            text-align: center;
            leading-trim: both;
            text-edge: cap;
            font-family: Inter;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 120%; /* 21.6px */
            text-transform: uppercase;
            transition: all 0.3s ease-in-out;
        }
        #Contact .form .button.-submitted {
            background: #94C690;
            color: #21691C;
        }
    #Contact .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        flex: 1 1 0;
        gap: 36px;
        margin-top: -10px;
      }
      @media (min-width: 600px) {
        #Contact .info {
            min-height: 550px;
          }
      }
      @media (max-width: 1000px) {
          #Contact .info { margin-top: 0; }
      }
          #Contact .info__heading {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            align-self: stretch;
          }
              #Contact .info .h2 { text-align: left; }
              #Contact .info p {
                color: #C8C1AC;
                leading-trim: both;
                text-edge: cap;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 145%; /* 26.1px */
                opacity: 0.75;
                padding: 0;
                margin: 0;
                width: 100%;
                max-width: 630px;
              }
          #Contact .info__body {
            display: flex;
            max-width: 320px;
            /* height: 217px; */
            flex-direction: column;
            /* justify-content: center; */
            /* align-items: flex-start; */
            gap: 12px;
            flex-shrink: 0;
          }
          #Contact .info__body img {
              border-radius: 24px;
              width: 90px;
              height: 90px;
          }
          #Contact .info__body .info__body__text {
              color: #C8C1AC;
              leading-trim: both;
              text-edge: cap;
              font-family: Inter;
              font-size: 16px;
              font-style: normal;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: 0;
              align-self: stretch;
          }
            #Contact .info__body .info__body__text__name {
                font-style: normal;
                font-weight: 500;
                line-height: 175%; /* 28px */
            }
            #Contact .info__body .info__body__text__about {
                font-weight: 400;
                line-height: 145%; /* 23.2px */
                opacity: 0.75;
            }
          #Contact .info__body .info__body__links {
              display: flex;
              align-items: center;
              gap: 20px;
              margin-top: 10px;
          }
            #Contact .info__body .info__body__links a {}
              #Contact .info__body .info__body__links a svg {
                  color: #C8C1AC;
                  width: 24px;
                  height: 24px;
              }






#ComingSoon {
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    align-self: stretch;
    height: 90vh;
}
    #ComingSoon .h2 {
      display: block;
      text-align: left;
      margin: 0 auto;
      max-width: 840px;
      width: 100%;
    }
    @media (max-width: 660px) {
      #ComingSoon .h2 {
          font-size: 48px;
      }
    }
    #ComingSoon p {
      color: #C8C1AC;
      leading-trim: both;
      text-edge: cap;
      font-family: Inter;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 145%; /* 26.1px */
      opacity: 0.75;
      width: 100%;
      padding: 0;
      margin: 0 auto;
      max-width: 840px;
      width: 100%;
    }
#ComingSoon .ComingSoon__links {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 10px auto;
    max-width: 840px;
    width: 100%;
}
  #ComingSoon .ComingSoon__links a {}
    #ComingSoon .ComingSoon__links a svg {
        color: #C8C1AC;
        width: 24px;
        height: 24px;
    }





#Credits {
    font-size: 12px;
    width: 100vw;
    z-index: 10;
}
.designedLabel {
    background-color: #0D3335;
    border-radius: 24px 0px 0px 0px;
    position: absolute;
    right: 0;
    padding: 18px 24px 16px;
    text-decoration: none;
}
#Credits .designedLabel span { color: #C8C1AC; opacity: 0.75; }
#Credits .designedLabel b { color: #C8C1AC; font-weight: 400; }



















body.PortfolioPage {
    background-position: top center;
    background-repeat: no-repeat;
}
#PortfolioHero {
    color: #CAC1AA;
    font-size: 16px;
    gap: 24px;
    line-height: 1.75;
    margin: 0 auto;
    padding: 100vh 10px 0;
    width: calc(100% - 20px);
    max-width: 960px;
}


body.PortfolioPage.-Ribas {
  background-image: url('images/ribas/ribas-bg.png');
  background-size: auto 100vh;
}
body.PortfolioPage.-SoulMarine {
  background-image: url('images/soul-marine/soul-marine-bg.png');
  background-size: auto 100vh;
}
body.PortfolioPage.-Agrosaf {
  background-image: url('images/agrosaf/agrosaf-bg.png');
  background-size: auto 100vh;
}
body.PortfolioPage.-Edu {
  background-image: url('images/edu/edu-b2b-bg.png');
  background-size: auto 100vh;
}
  @media (orientation: portrait) {
    body.PortfolioPage.-Ribas {
      background-image: url('images/ribas/ribas-bg-vertical.png');
      background-size: 100vw auto;
    }
    body.PortfolioPage.-SoulMarine {
      background-image: url('images/soul-marine/soul-marine-bg-vertical.png');
      background-size: 100vw auto;
    }
    body.PortfolioPage.-Agrosaf {
      background-image: url('images/agrosaf/agrosaf-bg-vertical.png');
      background-size: 100vw auto;
    }
    body.PortfolioPage.-Edu {
      background-image: url('images/edu/edu-b2b-bg-vertical.png');
      background-size: 100vw auto;
    }
    #PortfolioHero {
        padding: 180vw 10px 0;
    }
  }


#PortfolioHero a {
    color: #CAC1AA84;
}
#PortfolioHero ul,
#PortfolioHero ol {
    margin: 0;
    padding: 0;
    padding-left: 30px
}
#PortfolioHero b {
    display: block;
    font-family: "Oswald", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    font-style: normal;
    margin: 0 0 12px;
    line-height: 1.2;
    text-edge: cap;
}
#PortfolioHero p {
    display: block;
}
#PortfolioHero .separator {
    font-size: 36px;
    margin: 36px 0;
    text-align: center;
    width: 100%;
}
#PortfolioHero > img {
    display: block;
    margin-bottom: 120px;
    width: 100%;
}
#PortfolioHero .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}








#PortfolioTextLeft,
#PortfolioTextCenter,
#PortfolioTextRight,
#PortfolioBigImage,
#Portfolio3Images,
#Portfolio-2x1,
#Portfolio1x1,
#PortfolioCredits {
  display: flex;
  padding: 24px 60px;
  align-items: flex-start;
  align-self: stretch;
}
@media (max-width: 1000px) {
  #PortfolioTextLeft,
  #PortfolioTextCenter,
  #PortfolioTextRight,
  #PortfolioBigImage,
  #Portfolio3Images,
  #Portfolio-2x1,
  #Portfolio1x1,
  #PortfolioCredits {
    padding: 24px 24px;
  }
}
@media (max-width: 500px) {
  #PortfolioTextLeft,
  #PortfolioTextCenter,
  #PortfolioTextRight,
  #PortfolioBigImage,
  #Portfolio3Images,
  #Portfolio-2x1,
  #Portfolio1x1,
  #PortfolioCredits {
    padding: 10px;
  }
}

#PortfolioTextLeft {}
#PortfolioTextCenter {
  align-items: center;
  text-align: center;
}
#PortfolioTextRight {
  align-items: flex-end;
}
#PortfolioBigImage {
  padding-top: 10px;
  padding-bottom: 10px;
}
  #PortfolioBigImage img {
    border-radius: 12px;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
    width: 100%;
  }


#Portfolio3Images {
  flex-direction: row;
  gap: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
}
  #Portfolio3Images img.Image-1 {
    border-radius: 12px;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
    flex-basis: 50%;
    width: calc(50% - (24px * 2 / 3));
  }
  #Portfolio3Images img.Image-2 {
    border-radius: 12px;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
    flex-basis: 25%;
    width: calc(25% - (24px * 2 / 3));
  }
  #Portfolio3Images img.Image-3 {
    border-radius: 12px;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
    flex-basis: 25%;
    width: calc(25% - (24px * 2 / 3));
  }
@media (max-width: 1000px) {
  #Portfolio3Images {
    gap: 12px;
  }
}
@media (max-width: 500px) {
  #Portfolio3Images {
    gap: 6px;
  }
    #Portfolio3Images img {
      border-radius: 6px !important;
    }
}

#Portfolio-2x1 .Wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-self: stretch;
  padding: 0;
  gap: 0px;
}
  .Portfolio-2x1__Cover,
  .Portfolio-2x1__Slider {
    border-radius: 12px;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
    flex-shrink: calc(66% - 60px);
    width: calc(66% - 60px);
  }
  .Portfolio-2x1__Slider {
    border-radius: 0;
    box-shadow: 0 0 0 0 transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    padding: 0;
    gap: 0px;
  }
    .Portfolio-2x1__Cover.-slider:not(.-active) {
      display: none;
    }
    iframe.Portfolio-2x1__Cover {
      height: 410px;
      width: 100%;
    }
  .Portfolio-2x1__Previews {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 10px;
    gap: 10px;
  }
    .Portfolio-2x1__Previews__Item {
      border: 5px solid #0E3F42;
      border-radius: 4px;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity ease-in-out .3s;
    }
    .Portfolio-2x1__Previews__Item:hover,
    .Portfolio-2x1__Previews__Item.-active { opacity: 1; }
    .Portfolio-2x1__Previews__Item.-active { outline: 2px solid #C8C1AC; }

  .Portfolio-2x1__Grid {
    display: flex;
    flex-shrink: calc(66% - 60px);
    width: calc(66% - 60px);
    align-items: flex-start;
    align-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }
    .Portfolio-2x1__Grid a {
      flex-shrink: calc(20% - (10px * 4 / 5));
      width: calc(20% - (10px * 4 / 5));
    }
      .Portfolio-2x1__Grid a img {
        border-radius: 4px;
        display: block;
        width: 100%;
        max-width: 160px;
      }
  .Portfolio-2x1__Body {
    /* border-right: 1px solid rgba(200, 193, 172, 0.12); */
    display: flex;
    padding: 60px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex: 1 0 0;
    align-self: stretch;
    flex-shrink: 33%;
  }
    .Portfolio-2x1__Body__Title {}
    .Portfolio-2x1__Body {}
    .Portfolio-2x1__Body a {
      color: #C8C1AC;
      display: flex;
      /* padding: 18px 36px; */
      align-items: center;
      gap: 12px;
      margin-top: -6px;
      margin-bottom: -6px;
    }
      .Portfolio-2x1__Body a span {}
      .Portfolio-2x1__Body a svg {}
@media (max-width: 1000px) {
  #Portfolio-2x1 .Wrap {
    flex-direction: column;
    gap: 0px;
  }
  .Portfolio-2x1__Cover {
    flex-shrink: 100%;
    width: 100%;
  }
  .Portfolio-2x1__Grid {
    flex-shrink: 100%;
    width: 100%;
    gap: 10px;
  }
  .Portfolio-2x1__Grid a {
    flex-shrink: calc(20% - (10px * 4 / 5));
    width: calc(20% - (10px * 4 / 5));
  }
  .Portfolio-2x1__Grid a img {
    width: 100%;
    max-width: 148px;
  }
  .Portfolio-2x1__Body {
    border: 0;
    padding: 24px;
    flex-shrink: auto;
  }
  .Portfolio-2x1__Slider {
    width: 100%;
  }
}
@media (max-width: 800px) {
  .Portfolio-2x1__Slider .Portfolio-2x1__Cover {
    height: 50vw;
  }
}


#Portfolio-1x1 {
  padding-top: 0;
  padding-bottom: 0;
}
#Portfolio-1x1 .Wrap {
  border-top: 1px solid rgba(200, 193, 172, 0.12);
  border-bottom: 1px solid rgba(200, 193, 172, 0.12);
  display: flex;
  flex-direction: row;
  padding: 24px 0px;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  gap: 0px;
}
  #Portfolio-1x1 img {
    border-radius: 12px;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
    flex-shrink: 50%;
    width: 50%;
  }
  .Portfolio-1x1__Body {
    border-left: 1px solid rgba(200, 193, 172, 0.12);
    display: flex;
    padding: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
    align-self: stretch;
    flex-shrink: calc(50% - (60px*2));
    width: calc(50% - (60px*2));
  }
  .Portfolio-1x1__Body .LargeText { display: block; }
  .Portfolio-1x1__Body .MediumText { display: none; }
    .Portfolio-1x1__Body a {
      color: #C8C1AC;
      display: flex;
      /* padding: 18px 36px; */
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }
      .Portfolio-1x1__Body a span {}
        .Portfolio-1x1__Body a span span {
          opacity: 0.75;
        }
      .Portfolio-1x1__Body a svg {}
@media (max-width: 1000px) {
  #Portfolio-1x1 .Wrap {
    flex-direction: row-reverse;
    padding: 24px 0px;
    gap: 24px;
  }
    #Portfolio-1x1 img {
      flex-shrink: calc(50% - 24px);
      width: calc(50% - 24px);
    }
    .Portfolio-1x1__Body  {
      border-left: 0;
      padding: 0px;
      gap: 24px;
      flex-shrink: 50%;
      width: 50%;
    }
      .Portfolio-1x1__Body .LargeText { display: none; }
      .Portfolio-1x1__Body .MediumText { display: block; }
}
@media (max-width: 500px) {
  #Portfolio-1x1 .Wrap {
    border-top: 1px solid rgba(200, 193, 172, 0.12);
    border-bottom: 1px solid rgba(200, 193, 172, 0.12);
    flex-direction: column-reverse;
  }
    #Portfolio-1x1 img {
      flex-shrink: 100%;
      width: 100%;
    }
    .Portfolio-1x1__Body  {
      border-left: 0;
      padding: 0px 24px;
      gap: 24px;
      flex-shrink: 100%;
      width: 100%;
    }
      .Portfolio-1x1__Body .LargeText { display: none; }
      .Portfolio-1x1__Body .MediumText { display: block; }
}

#PortfolioCredits {
  align-items: center;
}
  #PortfolioCredits .Wrap {
    gap: 0;
    width: 100%;
    max-width: 720px;
  }
  #PortfolioCredits .h2 {
    padding-bottom: 60px;
  }
  #PortfolioCredits .h2 + .PortfolioCredits__Item {
    border-top: 1px solid rgba(200, 193, 172, 0.12);
  }
  .PortfolioCredits__Item {
    border-bottom: 1px solid rgba(200, 193, 172, 0.12);
    display: flex;
    padding: 24px 0px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  .PortfolioCredits__Item.-More {
    border-bottom: 0;
  }

    .PortfolioCredits__Item__Name {
      display: flex;
      align-items: center;
      color: #C8C1AC;
      leading-trim: both;
      text-edge: cap;
      font-family: Inter;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 145%; /* 26.1px */
    }
      .PortfolioCredits__Item__Name svg {
        width: 24px;
        height: 24px;
      }
    .PortfolioCredits__Item__Role,
    .PortfolioCredits__Item__More {
      color: #C8C1AC;
      text-align: right;
      leading-trim: both;
      text-edge: cap;
      font-family: Inter;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 145%; /* 26.1px */
      opacity: 0.75;
    }
    .PortfolioCredits__Item__More { text-align: center; width: 100%; }
@media (max-width: 600px) {
  .PortfolioCredits__Item {
    flex-direction: column;
    gap: 6px;
  }
  .PortfolioCredits__Item__Name {
    /* font-size: 14px; */
  }
    .PortfolioCredits__Item__Name svg {
      display: none;
      /* width: 20px;
      height: 20px; */
    }
  .PortfolioCredits__Item__Role,
  .PortfolioCredits__Item__More {
    font-size: 14px;
  }
}



body.PortfolioPage .Wrap {
  display: flex;
  padding: 60px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
}
#PortfolioTextLeft .Wrap,
#PortfolioTextCenter .Wrap,
#PortfolioTextRight .Wrap {
  width: calc(66% - (60px*2));
}
#PortfolioTextLeft .Wrap {
  border-right: 1px solid rgba(200, 193, 172, 0.12);
}
#PortfolioTextRight .Wrap {
  border-left: 1px solid rgba(200, 193, 172, 0.12);
}
@media (max-width: 1000px) {
  body.PortfolioPage .Wrap {
    display: flex;
    padding: 24px;
  }
  #PortfolioTextLeft .Wrap,
  #PortfolioTextCenter .Wrap,
  #PortfolioTextRight .Wrap {
    border: 0;
    width: auto;
  }
}
@media (max-width: 500px) {
  body.PortfolioPage .Wrap {
    padding: 10px 0;
  }
}

body.PortfolioPage .LargeText {
  color: #C8C1AC;
  font-family: Oswald;
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 57.6px */
  text-transform: uppercase;
  padding-bottom: 0px;
}
body.PortfolioPage .MediumText {
  color: #C8C1AC;
  font-family: Oswald;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 38.4px */
  text-transform: uppercase;
  padding-bottom: 0px;
}
@media (max-width: 840px) {
  body.PortfolioPage .LargeText {
    font-size: 20px;
  }
  body.PortfolioPage .MediumText {
    font-size: 16px;
  }
}
body.PortfolioPage p,
body.PortfolioPage ol,
body.PortfolioPage ul {
  color: #9AA192;
  leading-trim: both;
  text-edge: cap;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 145%; /* 26.1px */
  margin: 0;
  padding: 0;
}
body.PortfolioPage ol,
body.PortfolioPage ul {
  margin: 0 0 24px;
  padding: 0;
  padding-left: 30px
}
body.PortfolioPage p a,
body.PortfolioPage ol a,
body.PortfolioPage ul a {
  color: #9AA192;
}

body.PortfolioPage .Date {
  display: flex;
  padding-bottom: 24px;
  align-items: flex-start;
  gap: 10px;
}
  body.PortfolioPage .Date svg {
    color: #C8C1AC;
    display: inline-block;
    width: 20px;
    height: 20px;
  }
  body.PortfolioPage .Date span {
    display: inline-block;
    flex: 1 0 0;
    color: #C8C1AC;
    leading-trim: both;
    text-edge: cap;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 145%; /* 26.1px */
  }
body.PortfolioPage .Feature {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  text-decoration: none;
}
    body.PortfolioPage .Feature svg {
      color: #C8C1AC;
      flex-shrink: 0;
      width: 100%; /* Встановлює ширину SVG на 100% контейнера */
      height: auto; /* Зберігає пропорції SVG */
      max-width: 60px; /* Максимальна ширина відповідає контейнеру */
      max-height: 60px; /* Максимальна висота для запобігання обрізанню */
      display: block; /* Усуває зайві проміжки навколо SVG */
      box-sizing: border-box; /* Враховує padding та border у розмірах */
    }
    body.PortfolioPage .Feature__Body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 6px;
      flex-shrink: calc(100% - 60px);
      width: calc(100% - 60px);
    }
    body.PortfolioPage .Feature__Title {
      color: #C8C1AC;
      font-family: Oswald;
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
      line-height: 160%; /* 38.4px */
      text-transform: uppercase;
    }
    @media (max-width: 500px) {
      body.PortfolioPage .Feature__Title {
        font-size: 16px;
      }
    }
    body.PortfolioPage .Feature__Description {
      color: #9AA192;
      leading-trim: both;
      text-edge: cap;
      font-family: Inter;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 145%; /* 26.1px */
    }





#scrollTopButton {
  background-color: #C8C1AC;
  border-radius: 100px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.01);
  cursor: pointer;
  display: block;
  transition: all .3s ease-in-out;
  position: fixed;
  right: 20px;
  bottom: -120px;
  padding: 0px;
  z-index: 99;
}
#scrollTopButton:hover {
  opacity: 0.84;
}
#scrollTopButton.-visible {
  bottom: 20px;
}
  #scrollTopButton svg {
    color: #0E3F42;
    transform: scale(0.75);
  }