@charset "utf-8";
/* CSS Document */

                                    /* Start of First Container */ 

/* Starting Environment */
*{ margin: 0; padding: 0; border: none; text-decoration: none; font-weight: normal; list-style: none;}

/* body style */
body{ background: #FFF; font-family: 'Times New Roman', Times, serif; color: #565656; }
#main { width: 1000px; margin: 0 auto; }
#mainFrame {width:100%; float: left; }

/* Top row */

/* Company Name */
#top { width: 100%; height: 100px; float: left; background-color: #06a; border: 1px #fff solid; }
#top-logo { width: 30%; height: 100px; float: left; padding-left: 50px; }
#top-logo h1 { color: #FFF; font-size: 24px; padding: 15px 0 0 0; }
#top-logo h1 span{ color: #FFF; font-size: 14px; }

/* Menu Bar */
#top-menu{ width: 60%; height: 40px; float: left; margin: 30px 0 0 0; }
#top-menu ul li{ float: right; }
#top-menu ul li a{ color: #FFF; line-height: 40px; text-transform: capitalize; padding: 0 20px; font-size: 12px; display: block; }
#top-menu ul li a:hover{ color: #666; background: #FFF; }

                                    /* End of First Container */ 

                                /* Starting of Second Container */ 

/* Header Row */
#header{ width: 100%; height: 375px; float: left; }

/* Slider */  
.slider{ float: left; margin: 20px 0 0 0; width: 1000px; }
.slider li{ list-style: none; float: left; position: absolute;}
.slider img{ height: 350px; width: 1000px; position: absolute !important; cursor: none; } 
.next{ display: none; }

                                    /* End of Second Container */ 

                                  /* Starting of Third Container */

/* Product Details */
#info{ width: 100%; background: #06a; float: left; border: 1px #FFF solid; }
.info-box{ width: 50%; float: left; border-left: #ccc 1x solid; padding-top: 20px; }
.info-box h1{ font-size: 32px; padding:5px 20px; color:#FFF; text-align: center; }
.info-box p{ font-size: 18px; padding: 5px 20px; text-align: justify; color: #ebebeb; }
.info-box a{ display: block; width: 100px; margin: 10px 0 10px 350px; color: #ebebeb; text-align: center; }
.info-box a:hover{ color: #666; background: #FFF; }

                                    /* End of Third Container */ 

                                  /* Starting of Fourth Container */

/* Main Body */
#mainBody{ width:100%; background: #fff; float: left; }

/* Main Body menu - Left */
#mainBody-left{ width: 25%; float: left; margin: 10px 0 10px 0; }
.leftBox{ width: 100%; float: left; }

.leftBox h1{ font-size: 24px; text-align: center; line-height: 30px; border-bottom: #ccc 1px solid; display: block; color: #06c; }
.leftBox ul{ margin: 20px 0; }
.leftBox a{ display: block; font-size: 14px; color: #333; padding: 0 0 0 20px; line-height: 22px; text-transform: capitalize; border-bottom: #ccc solid 1px; }
.leftBox a:hover{ color: #06c; background: #ccc; }

/* Right side Main body */
#mainBody-main{ width: 70%; float: left; margin: 10px 0 10px 2%; }
#mainBody-main h1{ font-size: 24px; line-height: 30px; border-bottom: #ccc 1px solid; color: #06c; padding: 0 0 0 20px; text-transform: capitalize; }
#mainBody-main p{ text-align: justify; font-size: 18px; padding: 10px 30px; color: #999; }
#mainBody-main p strong{ font-size: 18px; padding: 10px 30px; color: #06c; }
#mainBody-main strong{ font-size: 18px; padding: 10px 30px; color: #06c; }


#qr{ width: 70%; float: left; margin: 10px 0 10px 2%; }
#qr-left{width: 45%; float: left; margin: 2%; margin: 10px 0 10px 2%; }
#qr-left strong{ font-size: 18px; padding: 10px 30px; color: #06c; }
#qr-right{width: 50%; float: left; margin: 2%; text-align: justify; margin: 10px 0 10px 2%; }
#qr-left img {width: 100%; height: auto;}
#qr h1{ font-size: 24px; line-height: 30px; border-bottom: #ccc 1px solid; color: #06c; padding: 0 0 0 20px; text-transform: capitalize; }
#qr-right strong{ font-size: 18px; padding: 10px 30px; color: #06c; }

/* Main Body - Gallery */

/* Gallery */ 
#mainBody-main img {width: 25%; height: 150px; float: left; margin: 10px 0 0 2.5%; border: 5px #ccc solid; cursor: pointer;}
#gallery-bg { background-color: #000; position: fixed; width: 100%; height: 100%; left: 0; top: 0; opacity: 1.0; visibility: hidden; z-index: 100; }
#gallery-img { width: auto; position: fixed; border: #FFF 10px solid; margin: 12.5% 12.5%; visibility: hidden; z-index: 110; }

/* Application - Form */
#application { width: 350px; margin: 20px 40px; float: left; }
#application-label { width: 150px; float: left; }
#application-label label { display: block; font-size: 14px; color: #999; line-height: 40px; }
#application-form { width: 200px; float: left; }
#application-form input[type="text"],
#application-form textarea { width: 90%; height: 18px; border: #06c 1px solid; margin: 10px 0; color: #666; font-size: 14px; }
#application-form textarea { height: 60px !important; }
#application-form input[type="reset"],
#application-form input[type="submit"] { width: 80px; height: 22px; margin: 10px 0; color: #06c; background: #ccc; font-size: 14px; border-radius: 10px; cursor: pointer; }
#application-form input[type="reset"]:hover,
#application-form input[type="submit"]:hover { border: #06c 1px solid; color: #333; background: #FFF; }

.container{ background: #FFF; padding:15px 9%; padding-bottom: 100px; }
.container .box-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap:15px; }
.container .box-container .box{ border-radius: 5px; background: #fff; text-align: center; padding:10px 5px; }
.container .box-container .box img{ height: 80px; }
.container .box-container .box h3{ color:#444; font-size: 22px; padding:10px 0; }
.container .box-container .box p{ color:#777; font-size: 15px; line-height: 1.8;}
.container .box-container .box .btn{ margin-top: 10px; display: inline-block; background:#06a; color:#fff; font-size: 17px; border-radius: 5px; padding: 8px 25px; }
.container .box-container .box .btn:hover{ letter-spacing: 1px; }
.container .box-container .box:hover{ transform: scale(1.03); }
@media (max-width:768px){.container{ padding:20px; }}

                                  /* End of Fourth Container */ 

                                  /* Starting of Fifth Container */

/* Footer Row */
#footer{ width: 100%; height: 50px; background: #06a; float: left; }
.footer-box{ width: 100%; float: center; }
.footer-box li{ float: left; color: #FFF; }
.footer-box li a{ display: block; font-size: 14px; padding: 0 20px; color: #FFF; margin: 10px 0 0 0; border-left: #ebebeb 1px solid; }
.footer-box li a:hover{ color: #06a; background-color: #FFF; }
.footer-box p { text-align: right; font-size: 12px; margin: 10px 20px 0 0; color: #FFF; }

.footer-box-right { width: 100%; float: center; }
.footer-box-right li{ float: left; color: #FFF; }
.footer-box-right a{ display: block; font-size: 14px; padding: 0 20px; color: #FFF; margin: 10px 0 0 0; border-left: #ebebeb 1px solid; }
.footer-box-right li a:hover{ color: #06a; background-color: #FFF; }
.footer-box-right p { text-align: right; font-size: 12px; margin: 10px 20px 0 0; color: #FFF; }

                                    /* End of Fifth Container */