/*========== FONT FACE ==========*/
@font-face { font-family: 'titillium'; font-weight: 400; src: url('./webfonts/TitilliumWeb-Regular.ttf'); }
@font-face { font-family: 'titillium'; font-weight: 500; src: url('./webfonts/TitilliumWeb-Bold.ttf'); }
@font-face { font-family: 'titillium'; font-weight: 600; src: url('./webfonts/TitilliumWeb-Black.ttf'); }
@font-face { font-family: 'fontawesome'; src: url('./webfonts/fa-brands-400.ttf'); }
@font-face { font-family: 'fontawesome'; src: url('./webfonts/fa-regular-400.ttf'); }
@font-face { font-family: 'fontawesome'; src: url('./webfonts/fa-solid-900.ttf'); }
@font-face { font-family: 'fontawesome'; src: url('./webfonts/fa-v4compatibility.ttf'); }
@font-face { font-family: 'slick'; src: url('./webfonts/slick.ttf'); }


/*========== DEFAULT ==========*/
html { scroll-behavior: smooth; }
body { background-image: url('../images/ye-panel-body-bg.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; font-family: 'titillium', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: 300; font-size: 16px; letter-spacing: 1.3px; outline: none; scroll-behavior: smooth; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
a, button { cursor: pointer; outline: none; text-decoration: none; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }


/*========== BUTTON EFFECT ==========*/
/*
  Button Effect from Codepen:
  https://codepen.io/Marina_Os/pen/OJyWPbL?editors=1100
*/
.nav-link { background-color: transparent; border: none; cursor: pointer; margin: 0px 25px 15px; position: relative; width: auto; height: auto; }
.nav-link span { display: inline-block; position: relative; text-transform: uppercase; transition: 0.3s; top: 0; left: 0; width: 100%; }
.btn-effect::before { background-color: #0d529a; content: ''; position: absolute; transition: 0.3s ease-out; }
.btn-effect span { color: #0d529a; transition: 0.2s; }
.btn-effect:hover span { color: #ffffff; transition: 0.2s 0.1s; }
.nav-link.hover-slide-right::before { bottom: 0; content: ''; position: absolute; left: 0; height: 100%; top: 0; width: 0%; }
.nav-link.hover-slide-right:hover::before { content: ''; position: absolute; width: 100%; }


/*========== NAVIGATION ==========*/
nav.navbar { background-color: #ffffff; left: 0; margin: 1.5rem auto; max-width: 70%; position: fixed; right: 0; transition: 0.3s; top: 0; z-index: 10; }
nav.navbar .navbar-brand.mobile-brand { display: none; }
nav.navbar .navbar-nav { justify-content: flex-end; width: 100%; }
nav.navbar .navbar-nav a { color: #0d529a; font-size: 18px; margin: 0 10px; text-transform: uppercase; }
nav.navbar .navbar-nav li.active a span { color: #0d529a; font-weight: 600; }
nav.navbar .navbar-nav li.active a:hover:before { content: ''; position: absolute; width: 0; }
nav.navbar.sticky-menu { left: 0; margin: 0 auto; max-width: 100%; padding: 8px 16px; position: fixed; right: 0; width: 100%; z-index: 10; }
nav.navbar.sticky-menu a span { font-size: 16px; }
nav.navbar .hamburger { display: none; }


/*========== SLIDER ==========*/
.content-wrap { margin: auto; max-width: 70%; }
.content-wrap.slide { margin: 10rem auto auto; }
.home-slide { margin: 0 0 4rem !important; }
.home-slide .slide-item .slide-bg { display: none; }
.home-slide .slide-item .slide-bg > div { background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 300px; height: 700px; }
.home-slide .slick-prev,
.home-slide .slick-next { background-color: #0d529a; height: 60px; width: 40px; z-index: 1; }
.home-slide .slick-prev:before { color: #ffffff; content: '\f053'; font-family: 'fontawesome'; font-size: 24px; left: 0; position: absolute; top: 20px; width: 40px; }
.home-slide .slick-next:before { color: #ffffff; content: '\f054'; font-family: 'fontawesome'; font-size: 24px; left: 0; position: absolute; top: 20px; width: 40px; }
.home-slide .slick-dots { bottom: 10px; }
.home-slide .slick-dots li button:before { color: #0d529a; font-size: 12px; height: 20px; width: 20px; }

/*
  Use to disable slide when it's not load complete
*/
.slick-initialized.slick-slider .slide-bg { display: block; }


/*========== HOME PRODUCT ==========*/
.home-product { background-color: #0d529a; padding: 4rem 0; position: relative; }
.home-product h1 { color: white; font-size: 70px; line-height: 1.2; margin: 0 0 3rem; padding: 20px 0 0; position: relative; text-transform: uppercase; }
.home-product h1:before { border-top: 2px solid #ffffff; content: ''; left: 0; max-width: 30%; position: absolute; top: 0; width: 100%; }
.home-product .product-bg { height: 300px; margin: 0 0 10px; overflow: hidden; position: relative; }
.home-product .product-bg > div { background-position: center; background-repeat: no-repeat; background-size: cover; height: 300px; transition: transform .5s ease; }
.home-product .product-bg:hover > div { transform: scale(1.5); }
.home-product h2 { color: #ffffff; font-size: 20px; margin: 0 0 20px; text-align: center; text-transform: uppercase; }
.home-product a button.nav-link { margin: 0; text-align: center; }
.home-product a button.nav-link { background-color: #ffffff; border: 1px solid #ffffff; color: #0d529a; font-weight: 600; letter-spacing: 1.5px; margin: auto; max-width: 200px; padding: 10px 15px; width: 100%; }
.home-product a button.nav-link:hover { background-color: #ffffff; color: #0d529a; }


/*========== ABOUT ==========*/
.about { padding: 4rem 0; position: relative; }
.about .content-wrap { background-color: #ffffff; }
.about .bg-image { background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; }
.about h1 { background-color: #0d529a; color: #ffffff; font-size: 50px; font-weight: 500; margin: 2rem 0 20px -30px; padding: 15px 30% 15px 30px; position: relative; width: fit-content; width: -webkit-fit-content; text-transform: uppercase; }
.about h1:before { border-top: 2px solid #0d529a; content: ''; left: 0; max-width: 40%; position: absolute; top: -15px; width: 100%; }


/*========== PRODUCT ==========*/
.product { align-items: center; background-color: #0d529a; display: flex; height: 100%; justify-content: center; padding: 16rem 0 8rem; }
.product h1.page-title { color: #ffffff; font-size: 50px; padding: 0 0 1rem; position: relative; text-transform: uppercase; width: fit-content; width: -webkit-fit-content; }
.product h1.page-title:before { bottom: 0; border-bottom: 1px solid #ffffff; content: ''; left: 0; position: absolute; right: 0; width: 100%; }
.product-cate { padding: 4rem 0; }
.product-cate .container { max-width: 900px; }
.product-cate .col { margin: 0 0 2rem; }
.product-cate .product-bg { border: 1px solid #0d529a; height: 400px; margin: 0 0 20px; overflow: hidden; position: relative; }
.product-cate .product-bg > div { background-position: center; background-repeat: no-repeat; background-size: cover; height: 400px; transition: transform .5s ease; }
.product-cate .product-bg:hover > div { transform: scale(1.5); }
.product-cate h2 { color: #0d529a; font-size: 30px; margin: 0 0 20px; text-align: center; text-transform: uppercase; }
.product-cate a button.nav-link { background-color: #0d529a; border: 1px solid #0d529a; font-weight: 600; letter-spacing: 1.5px; margin: auto; max-width: 200px; padding: 10px 15px; width: 100%; }
.product-cate a button.nav-link span { color: #ffffff; }
.product-cate a button.nav-link:hover:before { background-color: #ffffff; }
.product-cate a button.nav-link:hover span { color: #0d529a; }


/*========== PRODUCT DETAILS ==========*/
.product-info { padding: 14rem 0 2rem; }
.product-info h1.page-title { color: #0d529a; font-size: 60px; text-transform: uppercase; }
.product-gallery h2,
.product-spec h2 { color: #0d529a; font-size: 30px; font-weight: 400; margin: 0 0 2rem; position: relative; }
.product-gallery h2:before,
.product-spec h2:before { border-bottom: 2px solid #0d529a; content: ''; height: 1px; left: 240px; position: absolute; top: 50%; width: 200px; }
.product-spec .spec-info { background-color: #ffffff; margin: 0 0 4rem; padding: 20px; }
.product-spec .spec-info .list-point { background-color: #F7F7F7; margin: 15px 0; padding: 10px; }
.product-spec .spec-info .list-point h3 { font-size: 28px; margin: 0; }
.product-spec .spec-info .list-point p { align-items: center; display: flex; font-size: 20px; height: 100%; line-height: 1.6; margin: 0; }
.product-spec .spec-info .list-point p a { color: #0d529a; font-weight: 500; text-decoration: underline; }
.product-spec .spec-info .list-point ul { padding: 0 0 0 20px; }
.product-spec .spec-info .list-point ul li { margin: 0 0 10px; }

/* PRODUCT GALLERY SLIDE */
/* .product-slide .product-bg { display: none; } */
.product-gallery .product-bg { height: 300px; margin: 0 0 1.5rem; overflow: hidden; position: relative; }
.product-gallery .product-bg > div { background-position: center; background-repeat: no-repeat; background-size: cover; height: 300px; transition: transform .5s ease; }
.product-gallery .product-bg:hover > div { transform: scale(1.5); }
.product-slide { margin: 0 0 4rem; }
.product-slide .product-bg > div { background-position: center; background-repeat: no-repeat; background-size: cover; margin: 5px; min-height: 300px; height: 300px; }
.product-slide .slick-prev,
.product-slide .slick-next { background-color: #0d529a; height: 60px; width: 40px; z-index: 1; }
.product-slide .slick-prev:before { color: #ffffff; content: '\f053'; font-family: 'fontawesome'; font-size: 24px; left: 0; position: absolute; top: 20px; width: 40px; }
.product-slide .slick-next:before { color: #ffffff; content: '\f054'; font-family: 'fontawesome'; font-size: 24px; left: 0; position: absolute; top: 20px; width: 40px; }


/*========== CONTACT ==========*/
.contact { align-items: center; background-color: #0d529a; display: flex; height: 100%; justify-content: center; padding: 16rem 0 8rem; }
.contact h1.page-title { color: #ffffff; font-size: 50px; padding: 0 0 1rem; position: relative; text-transform: uppercase; width: fit-content; width: -webkit-fit-content; }
.contact h1.page-title:before { bottom: 0; border-bottom: 1px solid #ffffff; content: ''; left: 0; position: absolute; right: 0; width: 100%; }
.contact-info { padding: 4rem 0; }
.contact-info h2 { color: #0d529a; font-size: 40px; font-weight: 500; margin: 0 0 1rem; text-transform: uppercase; }
.contact-info h3 { color: #0d529a; font-weight: 400; margin: 0 0 1rem; }
.contact-info form { background-color: #ffffff; padding: 30px 20px; }
.contact-info form label { display: block; margin: 0 0 15px; width: 100%; }
.contact-info form label p { color: #0d529a; font-size: 16px; font-weight: 500; margin: 0; text-transform: uppercase; }
.contact-info form label input { background-color: #0d529a1c; border: 0; color: #0d529a; font-size: 16px; padding: 10px; width: 100%; }
.contact-info form label textarea { background-color: #0d529a1c; border: 0; color: #0d529a; font-size: 16px; padding: 5px 10px; width: 100%; }
.contact-info form label .error { color: #ff0000; font-size: 12px; }
.contact-info form .submit label { margin: auto; max-width: 200px; text-align: center; width: 100%; }
.contact-info form .submit input { background-color: #0d529a; border: 1px solid #0d529a; color: #ffffff; margin: auto; max-width: 200px; padding: 10px; text-transform: uppercase; transition: 0.4s; }
.contact-info form .submit input:hover { background-color: #ffffff; color: #0d529a; }


/*========== FOOTER ==========*/
.footer .content-wrap { border-top: 2px solid #0d529a; padding: 4rem 0 1rem; position: relative; text-align: center; }
.footer img { margin: 0 0 1rem; width: 260px; }
.footer p span { font-size: 20px; font-weight: 600; text-transform: uppercase; }
.footer ul { align-items: center; display: flex; justify-content: center; margin: 1rem 0; padding: 0; }
.footer ul li { list-style: none; margin: 0 10px; }
.footer ul li p { font-size: 16px; }
.footer ul li p a { color: #000000; }
footer p { color: #0d529a; font-size: 12px; margin: 0; }
footer p b { font-weight: bold; }



@media screen and (max-width: 1023px) {
  /*========== NAVIGATION ==========*/
  nav.navbar { max-width: 90%; }
  nav.navbar .navbar-nav a { font-size: 16px; }
  /*========== SLIDER ==========*/
  .home-slide .slide-item .slide-bg > div { height: 500px; }
  .content-wrap { max-width: 90%; }
  .home-slide .slick-prev { left: 10px; }
  .home-slide .slick-next { right: 10px; }
  /*========== HOME PRODUCT ==========*/
  .home-product h1 { font-size: 50px; }
  /*========== ABOUT ==========*/
  .about h1 { font-size: 40px; }
  .about p { font-size: 14px; }
  /*========== PRODUCT DETAILS ==========*/
  .product-slide .slick-prev { left: 10px; }
  .product-slide .slick-next { right: 10px; }
  /*========== PRODUCT GALLERY ==========*/
  .product-gallery .product-bg > div { margin: 0 auto; max-width: 300px; width: 100%; }
}

@media screen and (max-width: 991px) {
  /*========== NAVIGATION ==========*/
  nav.navbar { margin: 1rem auto; }
  nav.navbar .navbar-brand { display: none; }
  nav.navbar .navbar-brand.mobile-brand { display: block; }
  nav.navbar .navbar-brand.mobile-brand img { width: 200px; }
  nav.navbar .hamburger { align-items: center; display: flex; justify-content: center; padding: 0; }
  .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { background-color: #0d529a; height: 3px; width: 35px; }
  nav.navbar .navbar-nav a { padding: 8px; }
  /*========== HOME PRODUCT ==========*/
  .home-product .p-1 { margin: 0 0 1rem; }
  /*========== PRODUCT ==========*/
  .product { padding: 10rem 0 4rem; }
  .product h1.page-title { font-size: 40px; }
  .product-cate .product-bg { height: 300px; }
  .product-cate .product-bg > div { height: 300px; }
  .product-cate h2 { font-size: 20px; }
  /*========== PRODUCT DETAILS ==========*/
  .product-info { padding: 10rem 0 2rem; }
  .product-info h1.page-title { font-size: 40px; }
  .product-spec .spec-info { padding: 10px; }
  .product-spec .spec-info .list-point h3 { margin: 0 0 15px; padding: 0 0 10px; position: relative; }
  .product-spec .spec-info .list-point h3:before { border-bottom: 2px solid #0d529a; bottom: 5px; content: ''; left: 0; position: absolute; width: 100px; }
  /*========== CONTACT ==========*/
  .contact { padding: 10rem 0 4rem; }
  .contact h1.page-title { font-size: 40px; }
  /*========== FOOTER ==========*/
  .footer .content-wrap { padding: 3rem 0 1rem; }
  .footer ul { display: block; }
}

@media screen and (max-width: 767px) {
  /*========== NAVIGATION ==========*/
  nav.navbar { margin: 0 auto 1rem; max-width: 100%; }
  .content-wrap { max-width: 100%; }
  /*========== SLIDER ==========*/
  .content-wrap.slide { margin: 5rem auto auto; }
  /*========== PRODUCT DETAILS ==========*/
  .product-gallery h2:before, .product-spec h2:before { content: unset; }
  /*========== FOOTER ==========*/
  .footer .content-wrap { text-align: left; }
  .footer ul li { margin: 0; }
  footer { margin: 4rem 0 0; padding: 0 15px; }
}