:root {
    --color-accent: #ffce71;
    --color-dark: #1d1d1d;
    --color-main: #2c2c2c;
    --color-white: #fff;

    --font-32: 32px;
    --font-24: 24px;
    --font-20: 20px;
    --font-18: 18px;
    --font-16: 16px;
    --font-14: 14px;
}
* {
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
}

.container {
    max-width: 1800px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}

body {
    background-color: var(--color-main);
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
h1,
h2,
h3,
h4,
h5,
p {
    margin: 0;
    padding: 0;
}
a {
    display: block;
    text-decoration: none;
    width: fit-content;
}

button {
    cursor: pointer;
}

/* ------------------- HEADER SECTION ----------------------------------*/

.header {
    position: relative;
    padding: 12px 0;
}
.header::before {
    height: 100%;
    width: 20px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-accent);
}
.header::after {
    height: 100%;
    width: 20px;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--color-accent);
}
.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__logo > img {
    height: 48px;
}
.header__menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}
.header__menu-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}
.header__menu-item,
.header__menu-item > * {
    font-weight: 200;
    font-size: var(--font-16);
    text-align: right;
    color: #fff;
    cursor: pointer;
}
.header__menu-item {
    position: relative;
    padding: 10px 20px;
}
.header__menu-subitem,
.header__menu-subitem > * {
    font-weight: 200;
    font-size: var(--font-14);
    text-align: left;
    color: #fff;
    width: 100%;
}

.header__menu-subitem{
    width: fit-content;
    margin: 15px 0;    
}
.header__menu-sublist {
    opacity: 0;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    width: fit-content;
    z-index: -1;
    background-color: var(--color-dark);
    padding: 0 20px;
}
.header__menu-contact {
    background: #ffce71;
    padding: 13px 40px;
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: var(--font-16);
    text-align: center;
    color: #1d1d1d;
    outline: none;
    border: 1px solid transparent;
}

/* ------------------- HERO SECTION ----------------------------------*/

.hero {
    height: calc(100vh - 76px);
    position: relative;
    overflow: hidden;
}
.hero > .container {
    height: 100%;
}
.hero__inner {
    height: 100%;
    position: relative;
}
.hero__wave {
    position: absolute;
    top: -4px;
    left: 0;
    z-index: 2;
    height: calc(100% + 9px);
    width: 60%;
}
.hero__image {
    height: 100%;
    width: 60%;
    position: absolute;
    object-fit: cover;
    right: 0;
    top: 0;
    z-index: 1;
}
.hero__content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100px;
    margin: auto;
    z-index: 3;
    max-width: 572px;
    width: 100%;
    height: fit-content;
}
.hero__title {
    font-weight: 800;
    font-size: 60px;
    line-height: 133%;
    color: var(--color-white);
}
.hero__title > span {
    font-weight: 800;
    color: var(--color-accent);
}
.hero__text {
    font-weight: 300;
    font-size: var(--font-24);
    letter-spacing: 0.1em;
    color: var(--color-white);
    margin-bottom: 30px;
}
.hero__link-main {
    background-color: var(--color-accent);
    font-weight: 800;
    font-size: var(--font-18);
    color: var(--color-dark);
    padding: 15px 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: fit-content;
    margin-bottom: 24px;
    border: 1px solid transparent;
}
.hero__link-regular {
    font-weight: 800;
    border: 1px solid var(--color-accent);
    background-color: transparent;
    padding: 15px 30px;
    font-weight: 800;
    font-size: var(--font-18);
    text-align: center;
    color: var(--color-white);
}

/* ------------------- PROJECT SECTION ----------------------------------*/

.project {
    background-image: url(../assets/project-background.webp);
    background-size: cover;
    padding: 70px 0;
}
.project__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}
.hero__content {
    max-width: 511px;
    width: 100%;
}
.project__content-title {
    font-weight: 800;
    font-size: var(--font-32);
    color: var(--color-accent);
    margin-bottom: 20px;
}
.project__content-text {
    font-weight: 300;
    font-size: var(--font-16);
    color: var(--color-white);
}
.project__content-text > span {
    font-weight: 300;
    font-size: var(--font-16);
    color: var(--color-accent);
}
.project__content-line {
    height: 3px;
    width: 100%;
    background-color: var(--color-accent);
    margin: 25px 0;
}
.project__boxes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.project__box {
    width: calc(50% - 20px);
}
.project__box-title {
    font-weight: 800;
    font-size: var(--font-32);
    color: var(--color-accent);
    margin-bottom: 10px;
}
.project__box-text {
    font-weight: 300;
    font-size: var(--font-16);
    color: var(--color-white);
}
.project__grid {
    max-width: 900px;
    width: 100%;
}
.project__grid-text {
    font-weight: 500;
    font-size: var(--font-18);
    color: var(--color-white);
    margin-bottom: 35px;
}
.project__items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
    position: relative;
}
.project__items > svg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
}
.project__item {
    max-width: 400px;
    width: 100%;
    padding: 15px;
    border: 1px solid var(--color-accent);
    background-color: var(--color-dark);
    min-height: 240px;
    position: relative;
    z-index: 2;
    transition: 0.2s all linear;
}
.project__item:hover {
    transform: scale(1.1);
}
.project__item-title {
    font-weight: 700;
    font-size: var(--font-18);
    color: var(--color-accent);
    margin: 40px 0 15px;
}
.project__item-text {
    font-size: var(--font-14);
    color: var(--color-white);
}
.slides__inner {
    display: flex;
    height: 650px;
}

.slides__box:nth-of-type(1) {
    transform-origin: left;
    background-image: url(../assets/slides-slide-1.webp);
}
.slides__box:nth-of-type(2) {
    transform-origin: center;
    background-image: url(../assets/slides-slide-2.webp);
}

.slides__box:nth-of-type(4) {
    transform-origin: center;
    background-image: url(../assets/slides-slide-4.webp);
}
.slides__box:nth-of-type(5) {
    transform-origin: right;
    background-image: url(../assets/slides-slide-5.webp);
}
.slides__box-title {
    text-align: center;
    font-weight: 800;
    font-size: var(--font-32);
    color: var(--color-accent);
    margin-bottom: 20px;
    opacity: 0;
    transition: 0.4s all linear;
}
.slides__box-text {
    text-align: center;
    font-weight: 300;
    font-size: var(--font-18);
    color: var(--color-white);
    opacity: 0;
    transition: 0.4s all linear;
    max-width: 50%;
}

.slides__box {
    width: 20%;
    height: 100%;
    background-size: cover;
    background-position: left;
    filter: grayscale(1);
    transition: 0.4s all linear;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* ------------------- Slides animations ----------------------------------*/

.slides__box:nth-of-type(3) {
    transform-origin: center;
    background-image: url(../assets/slides-slide-3.webp);
    filter: grayscale(0);
    width: 100%;
}
.slides__box:nth-of-type(3) > .slides__box-title,
.slides__box:nth-of-type(3) > .slides__box-text {
    opacity: 1;
}

.slides__box:hover {
    filter: grayscale(0);
    width: 100%;
}
.slides__box:hover > .slides__box-title,
.slides__box:hover > .slides__box-text {
    opacity: 1;
}

.slides__inner:has(.slides__box:not(:nth-of-type(3)):hover)
    .slides__box:nth-of-type(3) {
    filter: grayscale(1);
    width: 20%;
}
.slides__inner:has(.slides__box:not(:nth-of-type(3)):hover)
    .slides__box:nth-of-type(3)
    > .slides__box-title,
.slides__inner:has(.slides__box:not(:nth-of-type(3)):hover)
    .slides__box:nth-of-type(3)
    > .slides__box-text {
    opacity: 0;
}

/* ------------------- ABOUT SECTION ----------------------------------*/

.about {
    padding: 70px 0;
}
.about__logo {
    display: block;
    margin: 0 auto 30px;
}
.about__boxes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.about__text {
    max-width: 506px;
    width: 100%;
    font-style: italic;
    font-weight: 300;
    font-size: var(--font-16);
    color: var(--color-white);
}
.about__text > span {
    font-style: normal;
    font-weight: 700;
    color: var(--color-accent);
}
.about__text > b {
    font-style: normal;
}

/* ------------------- EXAMPLES SECTION ----------------------------------*/

.examples {
    padding: 70px 0;
    position: relative;
}
.examples > svg {
    position: absolute;
    left: 0;
    top: 0;
}
.example__slide {
    width: 100%;
}
.example__slide-image {
    width: 100%;
}
.examples__slide-text {
    font-weight: 300;
    font-size: var(--font-16);
    color: var(--color-white);
    margin-top: 20px;
}
.examples__slide-text > b {
    font-weight: 700;
    font-size: var(--font-20);
    color: var(--color-white);
}

.example__nav {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.example__nav-buttons,
.feedback__nav-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}
.example__btn,
.feedback__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    padding: 6px 13px;
    border: none;
    outline: none;
    border: 1px solid var(--color-accent);
}
.example__btn path,
.feedback__btn path {
    stroke: var(--color-accent);
}

.swiper-pagination-bullet {
    border-radius: 50px;
    width: 60px;
    height: 10px;
    background: rgba(255, 255, 255, 0.7);
}
.swiper-pagination-bullet-active {
    border-radius: 50px;
    width: 100px;
    height: 10px;
    background: var(--color-accent);
}

/* ------------------- FEEDBACK SECTION ----------------------------------*/

.feedback {
    padding: 0 0 70px;
}
.feedback__title {
    font-weight: 800;
    font-size: var(--font-32);
    color: var(--color-white);
    text-align: center;
}
.feedback__header {
    padding: 50px 0;
    position: relative;
}
.feedback__header::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--color-accent);
}
.feedback__header::after {
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--color-accent);
}
.feedback__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 0 0;
    gap: 40px;
}
.feedback__static {
    max-width: 316px;
    width: 100%;
}
.feedback__static-header {
    display: flex;
    align-items: center;
    gap: 20px;
    font-weight: 800;
    font-size: var(--font-24);
    color: var(--color-white);
    margin-bottom: 30px;
}
.feedback__static-text {
    font-weight: 500;
    font-size: var(--font-16);
    color: var(--color-white);
    max-width: 236px;
    width: 100%;
}
.feedback__static-footer {
    font-weight: 200;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--color-accent);
}
.feedback__slide {
    background: var(--color-dark);
    min-height: 375px;
}
.feedback__slider-wrapper {
    padding: 20px 0;
}
.feedback__slide-body {
    position: relative;
    padding: 21px;
}
.feedback__slide-name {
    font-weight: 800;
    font-size: var(--font-24);
    color: var(--color-white);
    margin-bottom: 10px;
    display: block;
}
.feedback__slide-topic {
    font-weight: 600;
    font-size: var(--font-20);
    color: var(--color-white);
    min-height: 53px;
}
.feedback__slide-text {
    margin-top: 20px;
    font-size: var(--font-16);
    color: var(--color-white);
}
.feedback__slide-icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}
.feedback__nav-buttons {
    display: flex;
    justify-content: flex-end;
}

/* ------------------- CONTACT SECTION ----------------------------------*/

.contact {
    padding: 50px 0;
    background-image: url(../assets/contact-background.webp);
    background-size: cover;
}
.contact__form {
    max-width: 587px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contact__form-title {
    font-weight: 800;
    font-size: var(--font-24);
    color: var(--color-white);
    margin-bottom: 30px;
    text-align: center;
}
.contact__form-input {
    font-size: var(--font-16);
    color: var(--color-white);
    border: 1px solid var(--color-accent);
    padding: 13px 20px;
    background: var(--color-main);
    width: 100%;
    display: block;
}
.contact__form-input:focus {
    outline: none;
}
.contact__form-textarea {
    font-size: var(--font-16);
    color: var(--color-white);
    border: 1px solid var(--color-accent);
    padding: 13px 20px;
    background: var(--color-main);
    width: 100%;
    display: block;
    min-height: 285px;
}
.contact__form-textarea:focus {
    outline: none;
}
.contact__form-submit {
    font-weight: 700;
    font-size: var(--font-24);
    color: var(--color-dark);
    background: var(--color-accent);
    padding: 11px 20px;
    text-align: center;
    cursor: pointer;
    outline: none;
    border: 1px solid transparent;
    transition: 0.2s all linear;
}
.contact__form-submit:hover {
    background-color: var(--color-dark);
    border: 1px solid var(--color-accent);
    color: var(--color-white);
}

.contact__hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ------------------- FOOTER SECTION ----------------------------------*/

.footer__top {
    padding: 40px 0;
    border-bottom: 3px solid var(--color-accent);
}
.footer__top > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.footer__menu {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 745px;
    width: 100%;
}

.footer__column-title {
    font-weight: 700;
    font-size: var(--font-16);
    color: var(--color-white);
    border-bottom: 1px solid var(--color-accent);
    margin-bottom: 25px;
}
.footer__column-link {
    font-size: var(--font-16);
    color: var(--color-white);
}
.footer__column-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.footer__column-contact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: right;
    width: 100%;
}
.footer__bottom {
    padding: 20px 0;
}
.footer__bottom > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.footer__copyright,
.footer__copyright > * {
    font-weight: 200;
    font-size: var(--font-16);
    color: #fff;
}
.footer__bottom-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* ------------------- FOOTER SECTION ----------------------------------*/
.notification {
    position: fixed;
    bottom: 40px;
    right: 40px;
    padding: 30px;
    border: 1px solid var(--color-main);
    background-color: var(--color-main);
    display: none;
}
.notification__title {
    font-size: var(--font-20);
    font-weight: 700;
    text-align: center;
    color: var(--color-white);
    display: block;
}
.notification__text {
    font-size: var(--font-14);
    font-weight: 300;
    color: var(--color-white);
}

/* ------------------- ANIMATIONS ----------------------------------*/

.text-animations {
    transition: 0.2s all linear;
}

.text-animations:hover {
    color: var(--color-accent);
}

.button-animations-accent {
    transition: 0.4s all linear;
}
.button-animations-accent:hover {
    border: 1px solid #e0dd00;
    background-color: #e0dd00;
    color: var(--color-dark);
}
.example__btn,
.feedback__btn {
    transition: 0.2s all linear;
}
.example__btn:hover,
.feedback__btn:hover {
    background-color: var(--color-accent);
}
.example__btn:hover path,
.feedback__btn:hover path {
    stroke: var(--color-dark);
}

/* ------------------- SOME ADAPTIVE ----------------------------------*/

.header__menu-button {
    display: none;
    width: 20px;
    flex-direction: column;
    gap: 5px;
}
.header__menu-line {
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
    transition: 0.2s all linear;
}
.header__menu-button.is-active .header__menu-line:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.header__menu-button.is-active .header__menu-line:nth-child(2) {
    opacity: 0;
}

.header__menu-button.is-active .header__menu-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}
.header__menu > .header__logo {
    display: none;
}
.header__menu-item:has(.header__menu-sublist):hover{
    border-bottom: 1px solid var(--color-accent);
}
.header__menu-item:hover > .header__menu-sublist {
    opacity: 1;
    z-index: 15;
}
.explain{
    padding: 70px 0;
}
.explain__content{
    width: 40%;
}
.explain__inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}
.explain__text,
.explain__text *{
    font-size: var(--font-14);
    color: var(--color-white);
}
.explain__text > ul{
    list-style: circle;
    padding-left: 20px;
    margin: 10px 0;
}
.explain__image{
    width: 50%;
}