/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,700i,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,800i&display=swap');

/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/


/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* { box-sizing: border-box !important; }

html { scroll-behavior: smooth; }

body { color: #666666; font-size: 14px; font-family: Roboto, sans-serif; line-height: 1.80857; font-weight: normal; background: #f5f6f6 }

a { color: #1f1f1f; text-decoration: none !important; outline: none !important; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

h1,
h2,
h3,
h4,
h5,
h6 { letter-spacing: 0; font-weight: normal; position: relative; padding: 0 0 10px 0; font-weight: normal; line-height: normal; color: #111111; margin: 0 }

h1 { font-size: 24px; }

h2 { font-size: 16px; }

h3 { font-size: 18px; }

h4 { font-size: 16px }

h5 { font-size: 14px }

h6 { font-size: 13px }

*,
*::after,
*::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a { color: #212121; text-decoration: none !important; opacity: 1 }

button:focus { outline: none; }

ul,
li,
ol { margin: 0px; padding: 0px; list-style: none; }

a { color: #222222; text-decoration: none; outline: none !important; }

a,
.btn { text-decoration: none !important; outline: none !important; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

:focus { outline: 0; }

.btn-custom { margin-top: 20px; background-color: transparent !important; border: 2px solid #ddd; padding: 12px 40px; font-size: 16px; }

.lead { font-size: 18px; line-height: 30px; color: #767676; margin: 0; padding: 0; }

.form-control:focus { border-color: #ffffff !important; box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25); }

.navbar-form input { border: none !important; }

.badge { font-weight: 500; }

blockquote { margin: 20px 0 20px; padding: 30px; }

button { border: 0; margin: 0; padding: 0; cursor: pointer; }

.full { float: left; width: 100%; }

.full { width: 100%; float: left; margin: 0; padding: 0; }


/**-- heading section --**/


/*---------------------------- preloader area ----------------------------*/

.loader_bg { position: fixed; z-index: 9999999; background: #fff; width: 100%; height: 100%; }

.loader { height: 100%; width: 100%; position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; }

    .loader img { width: 280px; }


/*-- header area --*/


/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- layout new css ---------------------------------------------------------------------*/


/*-- navigation--*/

.navigation.navbar { float: right; background: #fff; clear: both; padding: 23px 25px !important; border-radius: 64px; }

.navigation.navbar-dark .navbar-nav .nav-link { padding: 0 20px; color: #070404; font-size: 17px; line-height: 20px; }

    .navigation.navbar-dark .navbar-nav .nav-link:focus,
    .navigation.navbar-dark .navbar-nav .nav-link:hover { color: #03cafc; }

    .navigation.navbar-dark .navbar-nav .active > .nav-link,
    .navigation.navbar-dark .navbar-nav .nav-link.active,
    .navigation.navbar-dark .navbar-nav .nav-link.show,
    .navigation.navbar-dark .navbar-nav .show > .nav-link { color: #03cafc; }

.navbar-expand-md .navbar-nav { padding-right: 10px; }

.navigation .navbar-collapse { background: #fff; }

.login_btn a { background: #03cafc; padding: 9px 32px !important; display: inline; border-radius: 20px; color: #fff !important; margin: 0 10px; }

    .login_btn a:hover { background: #000 !important; }

.sea_icon a { color: #8c8c8c !important; }

.header { max-width: 1200px; margin: auto; padding: 10px 0; background: #f5f6f6; width: 100%; padding-bottom: 0px; }

.logo { padding-top: 10px; }

.main-container { max-width: 1200px; margin: 0 auto; width: 100%; }
.main-page { padding: 50px }

/** banner section **/
.banner_main { background: #f5f6f6; padding: 50px 0px 50px 0px }

.text-bg { text-align: center; }

    .text-bg h1 { color: #070404; font-size: 60px; line-height: 76px; padding-bottom: 45px; font-weight: bold; text-transform: uppercase; }

    .text-bg .read_more { border: #1a1a1a solid 2px; color: #1a1a1a !important; font-weight: 500; display: block; margin: 0 auto; margin-top: 44px; }

.carousel-indicators li { background: #eee; }

.carousel-item img { width: 100%; }

.carousel-indicators .active { background: #03cafc }

#banner1 .carousel-caption { position: inherit; padding: 0; }

#banner1 .carousel-control-prev,
#banner1 .carousel-control-next { width: 62px; height: 60px; background: transparent; opacity: 1; font-size: 30px; color: #131215; border-radius: 60px; top: 43%; }

    #banner1 .carousel-control-prev:hover,
    #banner1 .carousel-control-next:hover,
    #banner1 .carousel-control-prev:focus,
    #banner1 .carousel-control-next:focus { background: transparent; border: #03cafc solid 2px; color: #03cafc; }

#banner1 a.carousel-control-prev { position: absolute; left: 20px; bottom: 10px; }

#banner1 a.carousel-control-next { position: absolute; right: 20px; bottom: 10px; }


/** end banner section **/

.titlepage h2 { font-size: 35px; color: #2a2a2c; line-height: 45px; font-weight: bold; padding: 0; }

.d_flex { display: flex; align-items: center; flex-wrap: wrap; }

.read_more { background-color: transparent; border: #ffffff solid 2px; color: #1a1a1a; padding: 5px 0px; width: 100%; max-width: 200px; text-align: center; display: inline-block; transition: ease-in all 0.5s; font-weight: 500; border-radius: 40px; }

    .read_more:hover { background: #03cafc; color: #fff !important; transition: ease-in all 0.5s; }


/** about section **/

.about .about_img figure { margin: 0; }

.about .titlepage { border: #000 solid 1px; padding: 40px 40px; z-index: 10018; background: #fff; margin-right: 40px; }

    .about .titlepage p { color: #2a2a2c; font-size: 17px; line-height: 35px; font-weight: 400; padding-top: 20px; }

.about .read_more { border: #1a1a1a solid 2px; color: #1a1a1a; font-weight: 500; margin-top: 44px; }


/** end about section **/


/** Our  Glasses section **/

.hot-sale { background: #fff; margin-top: 90px; }

    .hot-sale .titlepage { text-align: center; padding-bottom: 60px; }

        .hot-sale .titlepage p { font-size: 17px; line-height: 30px; font-weight: 400; padding-top: 10px; }

.blu { color: #03cafc; text-transform: initial; }

.product_box { padding: 0px; margin-bottom: 15px; position: relative; }

    .product_box figure { margin: 0; }

    .product_box h3 { color: #100d0d; padding: 5px 0 5px 0; margin-left: 5px; text-transform: uppercase; font-size: 14px; }

    .product_box p { color: #2a2a2c; font-size: 18px; line-height: 28px; font-weight: 400; }

    .product_box .price { margin: 0px 20px; font-size: 15px; }
    .product_box .old-price { color: red; font-size: 14px; text-decoration: line-through; margin-right: 15px; }
    .product_box .new-price { color: green; font-weight: bold; }
    .product_box .content { position: absolute; opacity: 0.7; background: #fff; bottom: 0px; left: 0px; width: 100%; height: 55px; }

    .product_box img { width: 100%; height: 245px; transition: all 300ms ease-in-out; }

        .product_box img:hover { margin-bottom: 10px; margin-top: -10px; }

        .product_box img.sale { width: 60px; height: 60px; position: absolute; top: 0; left: 0; }


.section.hot-sale { padding: 15px 7.5px 0 7.5px; }
.hot-sale .read_more { border: #03cafc solid 2px; font-weight: 500; display: block; margin: 0 auto; margin-top: 44px; }
.hot-sale .product_box { padding: 0px 7.5px; margin-bottom: 15px; }

/** end Our  Glasses section **/
/** Our shop section **/
.shop { margin-top: 90px; background: #fefdf9; border-top: #f2f1ed solid 1px; border-bottom: #f2f1ed solid 1px; }

    .shop .shop_img figure { margin: 0; }

        .shop .shop_img figure img { width: 100%; }

.padding_right0 { padding-right: 0; }

.shop .max_width { text-align: left; background: #030404; height: 100%; padding-top: 86px; padding-left: 50px; padding-bottom: 90px; display: flex; flex-wrap: wrap; }

.shop .titlepage { max-width: 612px; width: 100%; float: left; }

    .shop .titlepage h2 { color: #fff; border-bottom: #fff solid 1px; padding-bottom: 10px; float: left; clear: both; }

    .shop .titlepage p { color: #fff; font-size: 17px; line-height: 30px; padding: 40px 0px 80px 0; width: 100%; display: inline-block; }

    .shop .titlepage .read_more { color: #fff !important }


/** end Our shop section **/


/** clients section **/

.clients { padding: 90px 0 70px 0; }

    .clients .titlepage { text-align: center; padding-bottom: 60px; }

        .clients .titlepage p { color: #2a2a2c; font-size: 17px; line-height: 29px; padding-top: 10px; }

.clients_box h3 { color: #2a2a2c; font-size: 26px; line-height: 30px; padding-top: 23px; font-weight: 600; }

.clients_box p { color: #2a2a2c; font-size: 17px; line-height: 30px; }

.clients_Carousel .carousel-caption { position: inherit; padding: 0; }

.clients_box { border: #606060 solid 1px; padding: 40px 32px 40px 0px; float: left; text-align: left; margin-left: 89px; }

    .clients_box figure { margin: 0; float: left; margin-left: -102px; padding-right: 30px; }

#myCarousel .carousel-indicators { bottom: -70px; }

    #myCarousel .carousel-indicators li { width: 20px; height: 20px; border-radius: 20px; background: #111; }

    #myCarousel .carousel-indicators .active { background: #8c8a8a; }

#myCarousel .carousel-control-prev,
#myCarousel .carousel-control-next { display: none; }

.contact p { line-height: 14px; margin-bottom: 10px; }

.footer { padding-top: 20px; text-align: center; }

ul.location_icon { text-align: center; }

    ul.location_icon li { display: inline-block; font-size: 17px; line-height: 20px; color: #fff; text-align: center; padding: 0 40px; }

        ul.location_icon li a { font-size: 40px; color: #fff; line-height: 30px; display: block; }

.copyright { padding-bottom: 20px; }

    .copyright p { color: #292929; font-size: 18px; line-height: 22px; padding-top: 25px; font-weight: normal; }

    .copyright a { color: #292929; }

        .copyright a:hover { color: #03cafc; }

.position_head .header { position: inherit; background: #03cafc; }

.position_head .glasses { margin-bottom: 90px; }

.section { margin-top: 15px; background: #fff; padding: 15px; }
    .section h1 { text-align: center; text-transform: uppercase; font-size: 30px; margin-bottom: 17px; }
    .section h2 { font-size: 16px; }

.product-page img { width: 100%; }

.product-images img { width: 100%; border: 1px solid #eee; margin-bottom: 15px; }

.view-product .old-price { color: red; font-size: 14px; text-decoration: line-through; margin-right: 15px; }
.view-product .new-price { color: green; font-weight: bold; }

.product-group .item { position: relative; }

    .product-group .item img { max-width: 100%; width: 100%; height: auto; }
    .product-group .item h2 { color: #100d0d; padding: 15px; text-transform: uppercase; font-size: 16px; position: absolute; opacity: 0.8; background: #fff; bottom: 10px; left: 0px; width: 100%; }

    .product-group .item img { width: 100%; height: 245px; transition: all 300ms ease-in-out; }

        .product-group .item img:hover { margin-bottom: 10px; margin-top: -10px; }

.view-group h1 { text-transform: uppercase; font-size: 19px; text-align: left; margin-bottom: 20px; }
    .view-group h1 a { text-align: right; float: right; color: #03cafc; font-size: 16px; margin-top: 3px; }
        .view-group h1 a .icon { margin-left: 10px; }
.view-group h2 { margin: 18px 0; border-bottom: 1px solid #eee; }
.view-group img { width: 100%; margin-bottom: 15px; }

@media (max-width: 575px) {
    .navigation.navbar-dark .navbar-nav .nav-link { color: #2a2a2c }
}

.float-contact { position: fixed; bottom: 20px; left: 20px; z-index: 99999; }
.chat-zalo { background: #0084ff; border-radius: 5px; padding: 0 18px; color: white; display: inline-block; margin-bottom: 6px; }
.chat-face { background: #125c9e; border-radius: 5px; padding: 0 18px; color: white; display: inline-block; margin-bottom: 6px;}
.float-contact .hotline { background: #d11a59 !important; border-radius: 5px; padding: 0 18px; color: white; display: inline-block; margin-bottom: 6px; }