@media (min-width: 376px) {}

@media (min-width: 576px) {}

@media (min-width: 769px) {
    .svg-cloud {
        width: 908px;
    }

    .group-logo {
        max-width: 95px;
    }

    .active-photo {
        .card-columns {
            column-count: 3;
        }
    }
}

@media (min-width: 992px) {
    .dropdown-menu {
        display   : block !important;
        background: var(--bg-color) !important;
        border    : initial;

        &.show {
            // left: -80%;
            display: block;
            transform-origin: top left;
            box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
            border: 1px solid $yellow-400;
            transform: rotateX(90deg);
            transition: all .5s;

            &:before{
                content: '';
                position: absolute;
                width: 18px;
                height: 10px;
                top: -11px;
                left: 33px;
                background: $yellow-400;
                clip-path: polygon(50% 0, 0% 100%, 100% 100%);
            }

            li{
                .dropdown-item{
                    position: relative;
                    &:after{
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 0;
                        height: 2px;
                        background: $yellow-400;
                        transition: all 0.5s;
                    }

                    &:hover{
                        &:after{
                            width: 50%;
                            transition: all 0.5s;
                        }
                    }

                    &.active{
                        &:after{
                            width: 50%;
                            transition: all 0.5s;
                        }
                    }
                }
            }
        }
    }

    @include pkm-border-gradient('menu',linear-gradient(45deg, $danger, $warning));
    
    .dropdown{
        &:hover{
            .dropdown-menu{
                &.show{
                    // display: block !important;
                    transform: rotateX(0deg);
                    transition: all .5s;
                }
            }
        }
    }

    .w-lg-740 {
        width: 740px;
    }

    .dropdown-menu {
        &.list-flag {
            left: 8px;
        }
    }

    .navbar-nav {
        .nav-item {
            a {
                color: var(--text-color);
            }

            .pkm-border{
                position: relative;

                &:after{
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0.5rem;
                    background: $yellow-400;
                    width: 0;
                    height: 2px;
                    transition: all 0.5s;
                }

                &:hover{
                    &:after{
                        width: 80%;
                        transition: all 0.5s;
                    }
                }
                &.active{
                    &:after{
                        width: 80%;
                        transition: all 0.5s;
                    }
                }
            }

            .nav-link{
                &.show{

                    .bx-chevron-down{
                        transition: transform 0.5s;
                    }
                }
            }

            .dropdown{
                &:hover{
                    .nav-link{
                        &.show{
                            color: $warning !important;

                            .bx-chevron-down{
                                transform: rotate(180deg);
                            }
                        }
                    }
                }
            }
        }
    }

    .group-logo {
        max-width: 100px;

        img {
            width: 100px;
        }
    }

    .active-photo {
        .card-columns {
            column-count: 4;
        }
    }
}

@media (min-width: 1200px) {
    .navbar-brand {
        .logo {
            max-width: 120px;
        }
    }

    .navbar-expand-lg {
        .container-fluid {
            max-width: 1790px;
        }
    }

    .technology {
        margin: 50px 0;
    }

    .group-logo {
        max-width: 120px;

        img {
            width: 120px;
        }
    }
    .active-photo {
        .card-columns {
            column-count: 5;
        }
    }

    .google-map{
        .ratio-21x9{
            --bs-aspect-ratio: 25%;
        }
    }
}

@media (max-width: 375px) {
    .navbar-nav {
        .nav-item {
            margin: 0 10px;
        }
    }
}

@media (max-width: 768px) {
    .m-text-size {
        font-size  : 19px;
        line-height: 40px;
    }
}