/*------------------------------------------------------------------
Website: CCI
--------------------------------------------------------------------

-------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=Roboto:wght@100;400;500;700&display=swap");
/*----------------------------------
1. General
----------------------------------*/
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

html, body { overflow-x: hidden; margin: 0; padding: 0; }

body { background-color: #e9eaed; color: #fff; font-family: "Roboto", sans-serif; font-size: 12px; position: relative; background-image: url(../img/bg-pattern.png); background-size: 100%; background-attachment: fixed; background-position: bottom; background-repeat: no-repeat; }

.short-width { padding: 0 50px; margin: 0 auto; }

/* font */
p { font-size: 14px; margin-bottom: 0; }

ul { padding: 0; }
ul li { list-style-type: none; }

ol { padding-inline-start: 25px; margin-bottom: 0; }

:focus { outline: none; }

a, a:focus, a:hover, .btn, .btn:focus, .btn:hover, button, button:focus, button:hover, input:focus, .form-control:focus, button:focus, .btn-primary:hover, a:focus, select:focus { box-shadow: none; text-decoration: none; outline: none; border: unset; }

[type=reset], [type=submit], button, html [type=button] { -webkit-appearance: unset; }

/* col */
.container-no-padding { padding: 0; }

.row { margin: 0 -8px; }

.col, [class^="col-"] { padding: 0 8px; }

/*----------------------------------
2. Homepage
----------------------------------*/
main.front { padding: 15px 0; }
main.front section.product-verify { border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); padding: 15px; margin-bottom: 15px; }
main.front section.product-verify.suspended { background-color: #ed1c24; }
main.front section.product-verify.original { background-color: #3cb555; }
main.front section.product-verify.warning { background-color: #ff9f29; }
main.front section.product-verify .outer-wrap { display: flex; flex-direction: column; align-items: center; }
main.front section.product-verify .outer-wrap img.verifytag { width: 150px; }
main.front section.product-verify .outer-wrap > p.title { font-family: "Roboto Condensed", sans-serif; font-size: 30px; text-transform: uppercase; }
main.front section.product-verify .outer-wrap .content-wrap { padding-top: 10px; display: flex; flex-direction: column; align-items: center; }
main.front section.product-verify .outer-wrap .content-wrap p { font-size: 20px; text-align: center; font-weight: 500; }
main.front section.product-verify .outer-wrap .content-wrap p.cci-title { padding-bottom: 10px; }
main.front section.product-verify .outer-wrap .content-wrap .bottom-content { padding-top: 35px; width: 100%; }
main.front section.product-verify .outer-wrap .content-wrap .bottom-content .check-info .each { padding-bottom: 10px; }
main.front section.product-verify .outer-wrap .content-wrap .bottom-content .check-info .each p.check-title { text-transform: capitalize; font-weight: 500; }
main.front section.product-verify .outer-wrap .content-wrap .bottom-content .check-info .each:last-of-type { padding-bottom: 0; }
main.front section.product-verify .outer-wrap .content-wrap .bottom-content .check-details { display: flex; align-items: center; justify-content: space-between; margin: 0 -5px; padding-top: 10px; }
main.front section.product-verify .outer-wrap .content-wrap .bottom-content .check-details .each { width: calc(100% *1/3 - (10px)); margin: 0 5px; }
main.front section.product-verify .outer-wrap .content-wrap .bottom-content .check-details .each p.title { font-size: 12px; color: rgba(255, 255, 255, 0.8); text-transform: capitalize; padding-bottom: 10px; font-weight: 100; }
main.front section.product-verify .outer-wrap .content-wrap .bottom-content .check-details .each p.des { font-size: 16px; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
main.front section.gallery, main.front section.aboutus { border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); padding: 15px; background: #fff; }
main.front section.gallery { margin-bottom: 15px; }
main.front section.gallery .outer-wrap .title-wrap { display: flex; align-items: center; }
main.front section.gallery .outer-wrap .title-wrap .ico { display: flex; align-items: center; justify-content: center; }
main.front section.gallery .outer-wrap .title-wrap .ico img { width: 40px; border-radius: 50px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
main.front section.gallery .outer-wrap .title-wrap p { font-weight: 700; text-transform: capitalize; color: #000; font-size: 18px; margin-left: 10px; }
main.front section.gallery .outer-wrap .slick-slider { margin-top: 10px; }
main.front section.gallery .outer-wrap .slick-slider img { width: 100%; }
main.front section.gallery .outer-wrap .slick-slider .slick-dots li button:before { font-size: 12px; }
main.front section.qr { margin-bottom: 15px; }
main.front section.qr .outer-wrap { display: flex; align-items: center; justify-content: space-around; }
main.front section.qr .outer-wrap .each { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
main.front section.qr .outer-wrap .each .img { display: flex; align-items: center; justify-content: center; }
main.front section.qr .outer-wrap .each .img img { width: 50px; border-radius: 50px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
main.front section.qr .outer-wrap .each p { color: rgba(0, 0, 0, 0.8); font-weight: 100; font-size: 10px; }
main.front section.aboutus { margin-bottom: 50px; padding-bottom: 50px; }
main.front section.aboutus .outer-wrap .title-wrap { display: flex; align-items: center; }
main.front section.aboutus .outer-wrap .title-wrap .ico { display: flex; align-items: center; justify-content: center; }
main.front section.aboutus .outer-wrap .title-wrap .ico img { width: 40px; border-radius: 50px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
main.front section.aboutus .outer-wrap .title-wrap p { font-weight: 700; text-transform: capitalize; color: #000; font-size: 18px; margin-left: 10px; }
main.front section.aboutus .outer-wrap .logo { width: 100%; text-align: center; margin-top: 10px; }
main.front section.aboutus .outer-wrap .logo img { height: 100px; }
main.front section.aboutus .outer-wrap p.headline { text-align: center; font-weight: 500; text-transform: capitalize; color: #000; margin-top: 30px; font-size: 16px; }
main.front section.aboutus .outer-wrap .link { display: flex; align-items: center; margin: 60px 0; }
main.front section.aboutus .outer-wrap .link i.fa-globe { color: #007bff; }
main.front section.aboutus .outer-wrap .link a { font-size: 16px; margin-left: 5px; }

main.not-front { height: 100vh; display: flex; align-items: center; justify-content: center; }
main.not-front section.checkcode { margin: 15px 0; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); padding: 15px; background: #fff; }
main.not-front section.checkcode .outer-wrap .logo { width: 100%; text-align: center; margin-top: 10px; }
main.not-front section.checkcode .outer-wrap .logo img { height: 100px; }
main.not-front section.checkcode .outer-wrap p { color: #000; text-align: center; display: block; font-weight: 600; margin-top: 30px; }
main.not-front section.checkcode .outer-wrap .number { text-align: center; margin-top: 10px; }
main.not-front section.checkcode .outer-wrap .number input { border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.5); width: 80%; height: 50px; padding: 5px 20px; text-align: center; }
main.not-front section.checkcode .outer-wrap .btn-wrap { padding-top: 30px; text-align: center; }
main.not-front section.checkcode .outer-wrap .btn-wrap a.btn { width: 80%; margin: 0 auto; background: #ed6827; padding: 10px 20px; font-size: 14px; color: #fff; font-weight: 600; }