/*============================  Font-Family  ============================*/

@font-face {
    font-family: "Roboto-Medium";
    src: url(../fonts/Roboto-Medium.woff2);
    font-display: swap;
}
@font-face {
    font-family: "Roboto-Regular";
    src: url(../fonts/Roboto-Regular.woff2);
    font-display: swap;
}

/*============================  NAVBAR  ============================*/

.navbar {
    .mobile-trigger {
        display: none;
    }
    .navbar-links {
        list-style: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 0;
    
        .sprite-icon {
            background-image: url(../images/sprite-icon.png) !important;
            background-repeat: no-repeat;
            background-color: transparent;
            display: inline-block;

            &.social-icon {
                width: 32px;
                height: 36px;
                border-radius: 2px;
                margin-bottom: 15px;
            }

            &.facebook {
                background-position: -206px -21px;
            }
            &.google {
                background-position: -203px -371px;
            }
            &.twitter {
                background-position: -205px -244px;
            }
            &.instagram {
                background-position: -207px -70px;
            }
            &.youtube {
                background-position: -209px -112px;
            }
            &.location {
                background-position: -209px -200px;
            }

            &.zalo {
                background-position: -210px -154px;
            }
            &.pinterest {
                background-position: -204px -324px;
            }
            &.websiteurl {
                background-position: -207px -289px;
            }
        }
    }   
}

/*============================  BANNER  ============================*/
.offer-area .slick-slider div {
    display: none;
}
.offer-area .slick-initialized.slick-slider div {
    display: block !important;
}

.offer-area {
    .slider_enterprise_banner_top  {
        img {
            width: 100%;
        }
        .slick-dots {
            margin-top: 2px;
            list-style: none;
            padding: 0;
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            li {
                margin: 0;
                margin-right: 10px;
                padding-top: 10px;
                &:last-child {
                    margin-right:0 ;
                }
                button {
                    text-indent: -9999px;
                    border-radius: 30px;
                    border: 0;
                    outline: 0;
                    background-color: #575757;
                    width: 10px;
                    height: 10px;
                    text-decoration: none;
                }
                &.slick-active {
                    button {
                        width: 33px;
                        border-radius: 20px;
                        background-color: #000;
                        &:before {
                            color: transparent;
                            opacity: 1;
                            background-color:  rgb(26, 24, 24);
                        }
                        
                    }
                }
                &:before {
                    color: transparent;
                    opacity: 1;
                    margin-top: 5px;
                    background-color: transparent;
                    border: 1px solid rgb(90, 90, 90);
                    border-radius: 20%;
                    display: inline-block;
                    height: 5px;
                    width: 10px;
                }
            }
        } 
                
    }
}

button.slick-prev.slick-arrow,
button.slick-next.slick-arrow {
    display: none !important;
}

/*============================  IMAGE CARD  ============================*/

.brands-card-section {
    padding: 30px 0px ;

    .section-heading {
        font-size: 38px;
        text-align: center;
        text-transform: uppercase;
        color: #000;
        padding-bottom: 10px;
        font-family: 'Roboto-Medium';
    }

    .images-list {
        display: flex;
        flex-wrap: wrap;

        .img-card {
            position: relative;           
            transition: 0.3s;
            flex: 0 0 calc(20% - 18px);
            min-width: calc(20% - 18px);
            /* max-width: 100%; */
            margin: 9px;
            margin-bottom: 20px;
            text-align: center;
            .img-top {
                width: 100%;
            }
        }

    }
}

/*============================  FOOTER  ============================*/

footer {
    background: #18181b;
    color: #fff;
    margin-top: 1px;
    .brand-footer {
        padding: 12px 0;
        .copyright {
            font-size: 14px;
            margin: 0;
            padding: 8px 0;
            line-height: 21px;
            font-weight: 400;
            font-family: 'Roboto-Regular';
            text-align: center;
        }
        .poweredby {
            font-size: 14px;
            padding: 8px 0;
            margin: 0;
            text-align: right;
            font-family: 'Roboto-Regular';

            a {
                color: #fff;
                &:hover {
                    text-decoration: none;
                }
            }
        }
    }
}


/*============================  MEDIA QUERIES  ============================*/

@media (max-width: 1199px) {
    .brands-card-section {
        .images-list{
            .img-card{
                flex: 0 0 calc(33.3333% - 18px);
                min-width: calc(33.3333% - 18px);
            }
        } 
    } 
}

@media (max-width: 991px) {
    footer .brand-footer .copyright ,footer .brand-footer .poweredby{
        text-align: center;
    }

    .navbar .mobile-trigger {
        display: inline-block;
        cursor: pointer;
    }
    .mobile-trigger .toggle {
        width: 30px;
        height: 3px;
        background-color: #000;
        margin: 5px 0;
        display: inline-block;
        position: relative;
    }

    .show-menu {
        .navbar-right {
            right: 0;
        }
        .menu-close {
            background-color: #000;
        }
        .menu-toggle {
            float: right;
            margin: 21px 27px 0 0;
            height: 30px;
            width: 30px;
            cursor: pointer;
            position: relative;
            z-index: 999;
        }
    } 
    .nav-right .nav-item, .navber-links .nav-item {
        margin: 0;
        padding: 15px 10px;
    }

    .menu-close::after, .menu-close::before {
        background-color: #000 !important;
    }
    .menu-close::before {
        transform: rotate(45deg);
        background-color: #000 !important;
    }

    .menu-close::after {
        transform: rotate(-45deg);
        background-color: #000 !important;
    }

    .mobile-trigger .toggle::before, 
    .mobile-trigger .toggle::after {
        content: "";
        width: 30px;
        height: 3px;
        background-color: #000;
        display: block;
        position: absolute;
        top: 8px;
    }
    .mobile-trigger .toggle::before {
        top: -8px !important;
    }
    .navbar .navbar-links {
        display: block;
        padding-left: 10px;
        padding-top: 35px;
        
    }
    
    .navbar-right {
        background: #fff;
        position: fixed;
        height: 100%;
        right: -100%;
        width: 100%;
        top: 0;
        z-index: 99999999;
        overflow-y: auto;
        transition: .3s ease all;
    }

    .menu-close:after,
    .menu-close:before,
    .mobile-trigger .toggle:after, 
    .mobile-trigger .toggle:before {
        content: "";
        width: 30px;
        height: 3px;
        background-color: #000;
        display: block;
        position: absolute;
        top: 8px;
    }
}

@media (max-width: 767px) {
    .brands-card-section {
        .images-list{
            .img-card{
                flex: 0 0 calc(50% - 18px);
                min-width: calc(50% - 18px);
            }
        } 
    } 
}
@media (max-width: 640px) {
    .brands-card-section {
        .section-heading {
            font-size: 28px;
        }
    } 
}

@media (max-width: 576px)  {
    .brands-card-section {
        .images-list{
            .img-card {
                flex: 0 0 calc(100% - 18px);
                min-width: calc(100% - 18px);
                .img-top {
                    width: auto;
    
                }
            }
        } 

    }
}