main {

    @media (max-width: 750px) {
        padding-top: var(--header-top);
    }
}

.general-margin {
    margin: 0 auto;
    width: 90%;

    @media (max-width: 500px) {
        width: calc(100% - 40px);
    }
}

.bg-cover {
    background-color: var(--bg-cover);
}

section .general-margin,
.banner .general-margin {
    padding: var(--section-padding) 0;

    & p:not(:first-child) {
        margin-top: 10px;
    }
}

section {

    & .general-margin hgroup {
        padding-bottom: var(--padding);
        margin-bottom: var(--padding);

        & h2 {
            font-size: var(--f-fze-giant);
            font-weight: 900;
        }

        & h3 {
            font-size: var(--f-fze-normal);
            font-weight: normal;
            margin-bottom: calc(var(--padding) / 2);
            text-transform: uppercase;
        }

        &::after {
            background-color: var(--primary-c);
            bottom: 2px;
            content: "";
            height: 4px;
            position: absolute;
            width: 100px;
        }

        &.left {
            text-align: left;

            &::after {
                left: 0;
            }
        }

        &.center {
            text-align: center;

            &::after {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }

    &.gray {
        background-color: var(--gray-c);
    }
}

/* HEADER */

header {
    background-color: var(--white-c);
    height: var(--header-height);
    width: 100%;
    
    & .top-header {
        background-color: var(--white-c);
        height: var(--header-top);

        & .general-margin {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: calc(var(--padding) / 2) 0;

            & .logo-wrap {
                align-items: center;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                
                & .logo-image-wrap {
                    width: 70px;

                    & img {
                        display: block;
                        width: 100%;
                    }
                    
                    @media (max-width: 750px) {
                        width: 50px;
                    }
                }

                & p {
                    font-weight: bold;
                    margin-left: 20px;
                    font-size: var(--f-fze-title);

                    @media (max-width: 750px) {
                        font-size: var(--f-fze-big);
                    }
                }
            }

            & .media-links {
                align-items: flex-start;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                list-style: none;
                gap: var(--padding);

                & li {
                    align-items: center;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    & .media-image-wrap {
                        align-items: center;
                        background-color: var(--primary-c);
                        border-radius: 50%;
                        display: flex;
                        flex-wrap: wrap;
                        height: 40px;
                        justify-content: center;
                        width: 40px;

                        & i {
                            display: inline-block;
                            font-size: var(--f-fze-big);
                        }
                    }

                    & .media-text-wrap {
                        margin-left: 10px;

                        & p {
                            font-size: var(--f-fze-little);

                            &.media-header {
                                font-weight: bold;
                            }

                            &.media-desc {
                                & a {
                                    color: inherit;
                                }
                            }
                        }
                    }
                }
            }

            & .switch-nav {
                display: none;
            }
        }
    }

    & nav {
        bottom: calc(-var(--padding));
        margin-bottom: -30px !important;
        position: relative;
        width: 100%;
        z-index: 2;

        & ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            list-style: none;
            
            & li {
                width: calc(100% / 5);

                & a {
                    background-color: var(--gray-c);
                    color: var(--text-c);
                    display: block;
                    font-weight: 600;
                    text-align: center;
                    padding: 20px;
                    text-decoration: none;

                    & span {
                        display: inline-block;
                        padding-bottom: 4px;
                        border-bottom: 3px solid var(--darkgray-c);
                    }

                    @media (min-width: 751px) {
                        background-color: var(--gray-c);
                        color: var(--text-c);

                        & span {
                            border-bottom: 3px solid var(--darkgray-c);
                        }

                        &.current {
                            background-color: var(--primary-c);

                            & span {
                                border-bottom-color: var(--gray-c);
                            }
                        }

                        &:not(.current):hover span {
                            border-bottom-color: var(--primary-c);
                        }
                    }
                }
            }
        }

        @media (min-width: 751px) {
            transition: all 0s ease;

            &.fixed {
                position: fixed;
                top: 0;
                left: 50%;
                transform: translateX(-50%);

                & ul li a {
                    padding: 15px;
                }
            }
        }
    }

    @media (max-width: 750px) {
        background-color: transparent;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        height: var(--header-top);

        & .top-header {
            background-color: var(--white-c);

            & .media-links {
                display: none !important;
            }

            & .switch-nav {
                background-color: transparent;
                border: none;
                color: var(--darkgray-c);
                display: block !important;
                font-size: var(--f-fze-title);
                width: 26px;

                &.active,
                &:hover {
                    color: var(--primary-c);
                }
            }
        }

        & nav {
            align-items: center;
            background-color: var(--white-c);
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            height: calc(100dvh - var(--header-top));
            left: -100%;
            margin-bottom: 0 !important;
            position: relative;
            width: 100%;
            overflow-y: auto;

            & .general-margin {
                width: 100%;
                padding: var(--padding);

                & ul li {
                    width: 100%;

                    & a {
                        background-color: transparent;
                        color: var(--text-c);

                        & span {
                            border-bottom: 3px solid var(--gray-c);
                        }

                        &.current {
                            background-color: transparent;

                            & span {
                                border-bottom-color: var(--primary-c);
                            }
                        }

                        &:not(.current):hover span {
                            border-bottom-color: var(--primary-c);
                        }
                    }
                }
            }

            &.display {
                left: 0;
            }
        }
    }
}

/* BANNER */

.banner {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    & .bg-cover .general-margin {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: var(--section-padding) 0;
        min-height: calc(100dvh - var(--header-height));

        & .arrow {
            align-items: center;
            background-color: transparent;
            border: 3px solid var(--gray-c);
            border-radius: 50%;
            color: var(--gray-c);
            /*display: flex;*/ display: none;
            flex-wrap: wrap;
            font-size: var(--f-fze-big);
            height: 50px;
            justify-content: center;
            position: absolute;
            width: 50px;

            &.left-arrow {
                left: 0;
            }
            
            &.right-arrow {
                right: 0;
            }

            &:hover {
                color: var(--primary-c);
                border-color: var(--primary-c);
            }
        }

        & hgroup {
            color: var(--primary-c);
            display: block;
            font-size: var(--f-fze-giant);
            margin-bottom: var(--padding);
            padding-bottom: var(--padding);
            text-align: center;
            width: 100%;
            
            & h5 {
                font-family: var(--f-fmly-secondary);
                font-weight: normal;
            }

            &::after {
                background-color: var(--darkgray-c);
                bottom: 0;
                content: "";
                height: 5px;
                left: 50%;
                position: absolute;
                transform: translateX(-50%);
                width: 30px;
            }
        }

        & p {
            color: var(--white-c);
            font-size: var(--f-fze-title);
            margin-top: 0;
            text-align: center;
        }

        @media (max-width: 750px) {
            min-height: calc(100dvh - var(--header-top));

            & hgroup {
                font-size: var(--f-fze-title);
            }

            & p {
                font-size: var(--f-fze-big);
            }
        }
    }
}

/* ABOUT */

.about .general-margin {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    & .left-block {
        width: calc(100% - 400px - var(--padding) * 2);
        
        & hgroup {

            h2 {
                & span {
                    display: block;
                    font-weight: normal;
                }
            }

            &::after {
                display: none;
            }
        }

        & .menu {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            list-style: none;
            margin-bottom: var(--padding);
            
            & li {

                & button {
                    background-color: transparent;
                    border: none;
                    border-bottom: 3px solid var(--darkgray-c);
                    display: inline-block;
                    font-weight: bold;
                    padding-bottom: 4px;

                    &:hover,
                    &.current {
                        border-color: var(--primary-c);
                    }
                }
            }
        }

        & .content {
            & [data-content] {
                display: none;
                opacity: 0;

                & ul {
                    list-style: none;

                    & li {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        align-items: center;

                        & i {
                            color: var(--primary-c);
                            display: block;
                            width: 20px;
                        }
                        & span {
                            display: block;
                            width: calc(100% - 20px - 10px);
                        }

                        &:not(:first-child) {
                            margin-top: 10px;
                        }
                    }
                }

                &.display {
                    display: block;
                }

                &.show {
                    opacity: 1;
                }

                @media (max-width: 400px) {
                    & p {
                        text-align: center;
                    }
                }
            }
        }
    }

    & .right-block {
        background-color: var(--secondary-c);
        height: 500px;
        padding: var(--padding);
        width: 300px;

        & .bg-pair-image {
            background-position: center;
            background-size: cover;
            left: calc(var(--padding) * -3);
            height: 100%;
            width: calc(100% + var(--padding) * 3);
        }
    }

    @media (max-width: 930px) {
        flex-direction: column-reverse;

        & .left-block {
            width: 100%;

            & hgroup {
                
                text-align: center;

                &::after {
                    left: 50%;
                    transform: translateX(-50%);
                }
            }

            & .menu {
                justify-content: center;
            }

            & .content [data-content] ul {
                margin: 0 auto;
                width: 250px;
            }
        }

        & .right-block {
            width: 70%;
            margin-bottom: var(--padding);

            & .bg-pair-image {
                left: 0;
                width: 100%;
            }
        }
    }

    @media (max-width: 500px) {
        & .right-block {
            width: 100%;
        }

    }
}

/* PRODUCTS */

.products .general-margin {

    & .section-desc {
        margin: 0 auto;
        text-align: center;
        width: 80%;
        
        @media (max-width: 750px) {
            width: 100%;
        }
    }

    & .products-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: var(--padding);
        margin-top: var(--section-padding);

        & .item {
            background-color: var(--white-c);
            border: 2px dashed var(--text-c);
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: var(--padding);

            & .item-image {
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                border-radius: 50%;
                border: 5px solid var(--primary-c);
                width: 150px;
                height: 150px;        
            }

            & .item-name {
                font-weight: bold;
                font-size: var(--f-fze-big);
                margin-top: 10px;
                text-align: center;
                width: 100%;
            }
        }

        @media (max-width: 800px) {
            grid-template-columns: repeat(2, 1fr);
        }
        @media (max-width: 530px) {
            grid-template-columns: 1fr;
        }
    }

}

/* SERVICES  */

.services .bg-cover .general-margin {
    & hgroup {
        color: var(--white-c);
    }

    & .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: var(--padding);
        margin-top: var(--section-padding);

        & .item {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            border: 1px solid var(--white-c);
            background-color: rgba(255,255,255,.05);
            padding: var(--padding);

            & .item-image {
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                width: 150px;
                height: 150px;        
            }

            & .item-name {
                color: var(--primary-c);
                font-weight: bold;
                font-size: var(--f-fze-big);
                margin-top: 30px;
                text-align: center;
                width: 100%;
            }
        }
        
        @media (max-width: 800px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 600px) {
            grid-template-columns: 1fr;
        }
    }
}

/* GALLERY  */

.gallery .general-margin {
    & .top-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        & hgroup {
            width: calc(100% - 150px - var(--padding));
        }

        & .gallery-buttons-wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 10px;
            width: 150px;

            & button {
                background-color: var(--gray-c);
                border: none;
                display: block;
                height: 70px;
                width: 70px;

                &:hover {
                    background-color: var(--primary-c);
                }
            }
        }

        @media (min-width: 801px) {
            & hgroup {
                margin-bottom: 0;
            }
        }

        @media (max-width: 800px) {
            & hgroup,
            & .gallery-buttons-wrap {
                width: 100%;
            }

            & hgroup {
                text-align: center;

                &::after {
                    left: 50%;
                    transform: translateX(-50%);
                }
            }

            & .gallery-buttons-wrap {
                justify-content: center;
            }
        }
    }

    & .gallery-wrap {
        margin-top: var(--section-padding);
        overflow: hidden;

        & .gallery-grid {
            display: flex;
            flex-wrap: nowrap;
            gap: 10px;
            justify-content: space-between;

            & .item {
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                height: 200px;
                width: 200px;
            }
        }
    }
}

/* FOOTER  */

footer {
    background-color: var(--text-c);

    & .general-margin {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: calc(var(--section-padding) / 2) 0;

        & .rights {
            width: calc(100% - 188px);
        }

        & p {
            margin-top: 10px;
            color: var(--white-c);
            width: max-content;

            & span,
            & a {
                color: var(--primary-c);
                font-weight: bold;
            }
            & b {
                font-weight: normal;
                color: var(--primary-c);
            }
        }

        @media (max-width: 650px) {
            & .rights {
                width: 100%;
            }

            & p {
                text-align: center;
                width: 100%;

                &.numbers {
                    font-size: var(--f-fze-little);
                }

                &.developed-by {
                    margin-top: 20px;
                }
            }
        }
    }
}


@media (max-width: 1400px) {
    /* SERVICES */
        .services .service {
            width: calc((100% - 20px * 3) / 4);
        }
}
@media (max-width: 1270px) {
    /* SECTION: TOPICS OF INTEREST */
        /* topic articles */
        .topics-of-interest .article-text h2 {
            font-size: var(--fze-big);
        }
}
@media (max-width: 1165px) {
    /* SECTOON: COMMENT LINE */
        .comment-line h2 {
            font-size: var(--fze-title);
        }
}
@media (max-width: 1150px) {
    /* SECTION: SERVICES */
        .services .service {
            width: calc((100% - 20px * 2) / 3);
        }
}
@media (max-width: 945px) {
    /* SECTOON: COMMENT LINE */
    .comment-line h2 {
        font-size: var(--fze-subtitle);
    }
    .comment-line i {
        margin-right: 15px;
    }
}
@media (max-width: 900px) {
    /* SECTION: BANNER */
        /* banner content */
        .banner-list .text-content-wrapper.code {
            min-width: 0;
            width: 100%;
        }
        .banner-list .text-content-wrapper.code h2,
        .banner-list .text-content-wrapper.code p {
            text-align: center !important;
        }
        .banner-list .text-content-wrapper.code p span {
            display: block;
        }
        .banner-list .text-content-wrapper.code p a {
            margin: 20px 0 0 0;
        }
    /* SECTION: TOPICS OF INTEREST */
        .topics-of-interest .article {
            width: calc((100% - 20px) / 2);
        }
        .topics-of-interest .article:last-child {
            display: none;
        }
    /* SECTION: SERVICES */
        .services .service {
            width: calc((100% - 20px) / 2);
        }
    /* SECTION: HISTORY */
        .history .image-wrapper,
        .history .text-wrapper {
            width: 100%;
        }
        .history .text-wrapper {
            text-align: center;
        }
        .history .image-wrapper {
            height: 300px;
        }
        .history p {
            text-align: left;
        }
}
@media (max-width: 800px) {
    /* SECTION: BANNER */
    .banner-list .text-content-wrapper.code h2 {
        font-size: var(--fze-almost-giant);
    }
    .banner-list .text-content-wrapper.code p {
        font-size: var(--fze-big);
    }
    .banner-list .text-content-wrapper.code p a {
        margin: 10px 0 0 0;
    }
}
@media (max-width: 790px) {
    .comment-line h2 {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .comment-line i {
        display: block;
        font-size: var(--fze-giant);
        width: 54px;
    }
    .comment-line h2 span.t-w-i {
        display: block;
    }
}
@media (max-width: 600px) {
    /* SECTION: TOPICS OF INTEREST */
        .topics-of-interest .article-text h2,
        .topics-of-interest .article-text a {
            font-size: var(--fze-normal);
        }
    /* SECTION: SERVICES */
        .services .service {
            width: 100%;
        }
        .services .service .desc,
        .services .service a {
            font-size: var(--fze-normal);
        }
}
@media (max-width: 500px) {
    /* SECTOON: COMMENT LINE */
        .comment-line .general-margin {
            padding-top: var(--section-padding);
            padding-bottom: var(--section-padding);
        }
}
@media (max-width: 430px) {    
    /* SECTION: TOPICS OF INTEREST */
        /* topic articles */
        .topics-of-interest .article {
            width: 100%;
        }
        .topics-of-interest .article:last-child {
            display: block;
        }
        .topics-of-interest .article-text h2,
        .topics-of-interest .article-text a {
            font-size: var(--fze-big);
        }
}
@media (max-width: 400px) {
    .comment-line i {
        display: none;
    }
}
@media (max-width: 360px) {
    /* SECTOON: COMMENT LINE */
    .comment-line h2 .t-w-i-d {
        display: block;
    }
}