@import url("../css/navbar.css");
@import url("../css/footer.css");
@import url("../css/variables.css");
@import url("../css/css_pages/about.css");
@import url("../css/css_pages/index.css");
@import url("../css/css_pages/services.css");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family-primary);
    user-select: none;
}

/* GLOBAL STYLE */
html {
    scroll-behavior: smooth;
}

section {
    padding-top: clamp(0px, 5vw, 5px);
    margin: 0 auto;
    width: 80%;
    scroll-margin-top: 180px;
}
@media (min-width: 769px) {
    section {
        scroll-margin-top: 200px;
    }
}

ul {
    list-style: none;
}

li a,
a {
    text-decoration: none;
}

body {
    max-width: 100%;
    width: 100%;
    background-color: var(--neutral-color-1);
    overflow-x: hidden;

    &:has(main .hero) header {
        background-color: transparent;

        .navbar {
            .logo {
                filter: invert(100%) sepia(100%) saturate(500%)
                    hue-rotate(180deg);
            }

            .btn-mobile {
                color: var(--neutral-color-1);
            }

            #navLinks {
                background-color: transparent;

                .nav-item {
                    text-align: justify;

                    .nav-link {
                        color: var(--neutral-color-1);

                        &:before {
                            background-color: var(--neutral-color-1);
                        }
                    }
                }
            }
        }
    }

    &:has(main .hero) header.scrolled {
        box-shadow: 0 6px 10px rgba(var(--neutral-color-rgb-5), 0.15);
        background-color: var(--neutral-color-1);
        transition: background-color 0.5s ease;

        .navbar {
            .btn-mobile {
                color: var(--primary-color-1);
            }

            .logo {
                filter: invert(0);
            }

            #navLinks {
                &.show {
                    display: flex;
                    box-shadow: 0 6px 10px
                        rgba(var(--neutral-color-rgb-5), 0.15);
                    transition: all 0.3s ease-in-out;
                    background-color: var(--neutral-color-1);
                }

                .nav-item {
                    .nav-link {
                        color: var(--primary-color-1);
                        margin-left: 4%;
                        transition: all 0.3s ease;

                        position: relative;

                        &:before {
                            content: "";
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            height: 2px;
                            width: 100%;
                            background-color: var(--primary-color-1);
                            transform: scaleX(0);
                            transform-origin: left;
                            transition: transform 0.5s ease;
                        }

                        &:hover::before {
                            transform: scaleX(1);
                        }

                        &.active::before {
                            transform: scaleX(1);
                        }

                        &.active:hover::before {
                            transform: scaleX(1);
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 769px) {
    body:has(main .hero) header {
        .navbar {
            #navLinks {
                &.show {
                    background: transparent;
                    backdrop-filter: blur(0);
                    border-top: none;
                    box-shadow: none;
                    border-radius: 0;
                }
            }
        }

        &:has(main .hero) header.scrolled {
            .navbar {
                #navLinks {
                    &.show {
                        background: transparent;
                        backdrop-filter: blur(0);
                        border-top: none;
                        box-shadow: none;
                        border-radius: 0;
                    }
                }
            }
        }
    }
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-block: 2rem;

    background-color: var(--neutral-color-2);
    box-shadow: 0 4px 8px rgba(var(--neutral-color-rgb-5), 0.3);
    border-radius: 10px;
}

@media (min-width: 769px) {
    .card {
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        gap: 2rem;
    }
}
.glass-panel-title,
.cta-banner-title,
.founder-name,
.why-choose-title,
.faq-title,
.journey-title,
.tabs-title,
.services-title,
.clients-title,
.methodology-title {
    font-size: var(--font-size-h2-mobile);
    font-weight: var(--font-weight-semibold);
}
@media (min-width: 769px) {
    .glass-panel-title,
    .cta-banner-title,
    .founder-name,
    .why-choose-title,
    .faq-title,
    .journey-title,
    .tabs-title,
    .services-title,
    .clients-title,
    .methodology-title {
        font-size: var(--font-size-h2-desktop);
    }
}