/*

	Theme: Tank
	Author: QBIT Ltd
	Date: 09/07/2022
	Version: 1.0.0.0

*/

/* Set font styles */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@600&display=swap');

/* Global styles */
*{ box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-size: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { color: #333; word-wrap: break-word !important; letter-spacing: 0.2em; line-height: 2.0em; font-family: 'Open Sans', sans-serif; font-size: 1.0em; }
h1,h2,h3,h4,h5,h6 { font-family: 'Poppins', sans-serif; font-size: 1.2em; letter-spacing: inherit; line-height: inherit; margin-bottom: 20px; }
p { margin-bottom: 20px; }
li { list-style: none; }
a { color: #333; text-decoration: none; }
img { width: 100%; vertical-align: bottom; }

/* Main styles */
#wrapper { width: 100%; }
#widgets,#reviews,#contact { text-align: center; padding: 100px 20px 100px 20px; }
.main { max-width: 1200px; text-align: center; margin: auto; }
.col-1,.col-2,.col-3 { display: inline-block; vertical-align: top; margin-right: -5px; padding: 20px; }
.col-1 { width: 25%; }
.col-2 { width: 50%; }
.col-3 { width: 75%; }
.col-4 { width: 100%; text-align: center; padding: 20px; }
.btn { border: solid 1px #333; color: #333; font-family: 'Poppins', sans-serif; font-size: 0.7em; cursor: pointer; display: inline-block; background-color: transparent; padding: 10px; }

/* Header styles */
.logo { width: 130px; height: 55px; display: block; background: url('../../../uploads/svg/logo.svg') center center / 130px no-repeat; text-indent: -9999px; margin: 30px auto; }

/* Carousel styles */
#carousel { color: #fff; text-align: center; }
#carousel a { color: #fff; }
#carousel .col-3 { padding: 300px 20px 300px 20px; }
#carousel .btn { border-color: #fff; color: #fff; }
#carousel .social { margin-top: 40px; }
#bg { position: fixed; left: 0; top: 0; background-size: cover; z-index: -9999; }
.gradient { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); z-index: -1; }

/* Page styles */
#about { padding: 100px 0 100px 0; }

/* Navigation styles */
.nav-bar { position: fixed; width: 100%; height: 100px; left: 0; top: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); z-index: 1; }
nav { margin-top: 30px; }
nav a { font-family: 'Poppins', sans-serif; font-size: 1.2em; color: #999; line-height: 2.4em; }
nav a:hover { border-bottom: solid 2px; }
.burger { width: 40px; height: 40px; position: absolute; right: 20px; top: 20px; cursor: pointer; background: #333 url('../../../uploads/svg/burger.svg') center center / 18px no-repeat; text-indent: -9999px; z-index: 1000; }
.sidenav { width: 0; height: 100%; position: fixed; top: 0; right: 0; transition: 0.2s; text-align: center; background: #333; overflow-x: hidden; padding-top: 30px; z-index: 1001; }
.sidenav .contact { margin-top: 50px; }
.close-nav { width: 40px; height: 40px; background: url('../../../uploads/svg/close.svg') center center / 30px no-repeat; display: block; text-indent: -9999px; margin: 20px auto 0; }

/* About styles */
#about { background-color: #fff; }

/* Parallax styles */
#parallax { height: 300px; }

/* Widget styles */
#widgets { background-color: #f0f0f0; }
#widgets img { width: 25%; margin-bottom: 20px; }

/* Ad styles */
#ads { background-color: #fff; }
.ads { width: 100%; position: relative; text-align: center; color: #fff; padding: 250px 20px 250px 20px; }
.ads .btn { border-color: #fff; color: #fff; }

/* Review styles */
#reviews { background-color: #f0f0f0; clear: both; }
.review { display: none; }
.rating { width: 150px; height: 30px; display: block; margin: 20px auto 0; background-color: red; }
.name { display: block; margin-top: 20px; }

/* Form styles */
#contact{ background-color: #fff; }
form { margin: auto; }
input[type=text],textarea { width: 100%; border: solid 1px #999; font-family: 'Poppins', sans-serif; font-size: 1.0em; border-radius: 0; color: #999; background-color: transparent; margin-bottom: 10px; padding: 20px; }
textarea { height: 200px; }
input[type=submit] { width: auto; border: solid 1px #999; border-radius: 0; font-family: 'Poppins', sans-serif; font-size: 1.0em; color: #999; cursor: pointer; background-color: transparent; padding: 20px; }
.success { width: 100%; position: fixed; left: 0; bottom: 0; background-color: green; color: #fff; padding: 20px; z-index: 1; }

/* Checkbox styles */
.checkbox { display: block; position: relative; padding-left: 35px; text-align: left; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input[type=checkbox] { display: none; }
.checkmark { border: solid 1px #f0f0f0; background: #fff; position: absolute; top: 0; left: 0; height: 25px; width: 25px; }
.checkmark:after { content: ""; position: absolute; display: none; }
.checkbox input:checked ~ .checkmark:after { display: block; }
.checkbox .checkmark:after { left: 7px; top: 3px; width: 5px; height: 10px; border: solid #333; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* Gallery styles */
#gallery { background: #f0f0f0; text-align: center; padding-top: 100px; }
.image { margin: 0; padding: 0; }

/* Google map styles */
#map { background-color: #f0f0f0; }
#google-container { width: 100%; height: 500px; }
#zoom-in, #zoom-out { cursor: pointer; margin-left: 20px; text-align: center; font-size: 1.6em; color: #999; background: #333; padding: 10px 12px 10px 15px; }
#zoom-in { background-position: 50% 0; margin: 20px 0 2px 20px; }
#zoom-out { background-position: 50% -32px; }

/* Footer styles */
footer { font-size: 0.7em; background-color: #333; color: #999; text-align: center; padding-top: 30px; }
footer a { color: #999; }
.copyright { max-width: 1200px; border-top: solid 1px #444; margin: auto; padding: 20px; }

/* Social styles */
.social li { width: 40px; height: 40px; background-color: #444; background-position: center center; background-size: 30px; display: inline-block; margin: 0 5px 0 5px; }
.social a { display: block; text-indent: -9999px; }
.facebook { background: url('../../../uploads/svg/facebook.svg') no-repeat; }
.twitter { background: url('../../../uploads/svg/twitter.svg') no-repeat; }
.instagram { background: url('../../../uploads/svg/instagram.svg') no-repeat; }
.linkedin { background: url('../../../uploads/svg/linkedin.svg') no-repeat; }
.youtube { background: url('../../../uploads/svg/youtube.svg') no-repeat; }

/* Back to top styles */
.top { width: 40px; height: 40px; position: fixed; bottom: 20px; left: 0; right: 0; display: none; cursor: pointer; background: #333 url('../../../uploads/svg/top.svg') center center / 20px no-repeat; text-indent: -9999px; margin: 5% auto 0; padding: 10px;  }

/* Cookie bar styles */
#cookie { width: 100%; position: fixed; left: 0; top: 0; text-align: center; background: rgba(20,20,20,0.8); display: none; padding: 20px; z-index: 1000; }
#close { border: solid 1px #999; display: inline-block; cursor: pointer; transition: 2s; margin: 10px 10px 0 10px; padding: 10px; }

/* Popup styles */
#popup { display: block; visibility: hidden; text-align: center; }
.popup { width: 100%; height: 100%; display: none; position: fixed; top: 0; left: 0; z-index: 10; }
.popup .col-1 { position: relative; width: 25%; top: 25%; background: #fff; }
.bg { width: 100%; height: 100%; position: fixed; background: #000; opacity: 0.8; }
.close-popup { position: absolute; top: -10px; right: -10px; width: 40px; height: 40px; border-radius: 100px; background: #fff url('../../../uploads/svg/close.svg') center center / 18px no-repeat; box-shadow: 0 0 3px 3px rgba(68,68,68,0.2); text-indent: -9999px; }

/* Media queries */
@media (max-width: 64em) 
{

	/* Popup styles */
	.popup .col-1 { width: 90%; }

	/* Main styles */
	.col-1,.col-2,.col-3 { width: 100%; margin: 0; }

	/* Carousel styles */
	#carousel .col-3 { padding: 150px 20px 150px 20px; }

	/* Widget styles */
	#widgets div { margin: 30px 0 30px 0; }

	/* Gallery styles */
	#gallery { padding: 100px 20px 0 20px; }
	.image { margin: 0 auto 20px; }

	/* Footer styles */
	.copyright { width: 90%; }

	/* Cookie bar styles */
	#close { display: block; }

}