.color-skyblue{color:#42C1D7;}
.footer-bg{background:#222324;}

/* Fonts */
.font-montserrat{font-family: Montserrat, sans-serif;}
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {padding: 60px 0;}
.section-bg {background-color: #f7f8fa;}
.section-title {text-align: center;padding-bottom: 30px;}
.section-title h2 {font-size: 32px;font-weight: bold;text-transform: uppercase;margin-bottom: 20px;padding-bottom: 20px;position: relative;}
.section-title h2::after {content: '';position: absolute;display: block;width: 50px;height: 3px;background: #ffc107;bottom: 0;left: calc(50% - 25px);}
.section-title p {margin-bottom: 0;font-size: 14px;color: #aab3c7;}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {position: fixed;display: none;right: 15px;bottom: 15px;z-index: 99999;text-decoration:none;}
.back-to-top i {display: flex;align-items: center;justify-content: center;font-size: 20px;width: 40px;height: 40px;border-radius: 50px;background: #42C1D7;color: #fff;transition: all 0.4s;text-decoration:none;}
.back-to-top i:hover {background: #2494A8;color: #fff;text-decoration:none;}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {transition: all 0.5s;z-index: 997;padding: 20px 0;background-color:#414C64;}
#header.header-transparent {background: transparent;}
#header.header-scrolled {background-color:#414C64;padding: 15px 0;}
#header .logo img {max-height: 40px;}
.btn-get-login {font-weight: 500;font-size: 15px;letter-spacing: 1px;display: inline-block;padding: 5px 25px;border-radius: 30px;transition: 0.5s;text-decoration:none;border: 2px solid #00660C;color: #fff;}
.btn-get-login:hover {background: #00660C;color: #fff;}
.btn-get-register {font-weight: 500;font-size: 15px;letter-spacing: 1px;display: inline-block;padding: 5px 25px;border-radius: 30px;transition: 0.5s;text-decoration:none;border: 2px solid #42C1D7;color: #fff;}
.btn-get-register:hover {background: #42C1D7;color: #fff;}
@media (max-width: 992px) {#header .logo {font-size: 28px;}}
/*--------------------------------------------------------------
# Banner Section
--------------------------------------------------------------*/
#banner {width: 100%;height: 100vh;background: url("../../../upload/banner/top_1.jpg") top center;background-size: cover;position: relative;}
#banner:before {content: "";position: absolute;bottom: 0;top: 0;left: 0;right: 0;}
#banner .container {text-align: center;padding-top: 50px;}
@media (max-width: 992px) {#banner .container {padding-top: 0;}}
#banner h1 {margin: 0;font-size: 48px;font-weight: 700;line-height: 56px;color: #fff;}
#banner h2 {color: #eee;margin: 15px 0 0 0;font-size: 22px;}
#banner .btn-get-started {font-weight: 500;font-size: 15px;letter-spacing: 1px;display: inline-block;padding: 9px 35px;border-radius: 50px;transition: 0.5s;margin-top: 40px;border: 2px solid #42C1D7;color: #fff;}
#banner .btn-get-started:hover {background: #42C1D7;}
@media (min-width: 1024px) {#banner {background-attachment: fixed;}}
@media (max-width: 768px) {#banner {height: 100vh;}
#banner h1 {ont-size: 28px;line-height: 36px;}
#banner h2 {font-size: 18px;line-height: 24px;}}
/*--------------------------------------------------------------
# Banner Pages Section
--------------------------------------------------------------*/
#banner-pages {width:100%;height: 400px;background: url("../../../upload/banner/top_1.jpg") top center;background-size: cover;position: relative;}
#banner-pages:before {content: "";position: absolute;bottom: 0;top: 0;left: 0;right: 0;}
#banner-pages .container {text-align: center;padding-top: 50px;}
#banner-pages h1 {margin: 0;font-size: 48px;font-weight: 700;line-height: 56px;color: #fff;}
#banner-pages h2 {color: #eee;margin: 15px 0 0 0;font-size: 22px;}
#banner-pages .btn-get-started {font-weight: 500;font-size: 15px;letter-spacing: 1px;display: inline-block;padding: 9px 35px;border-radius: 50px;transition: 0.5s;margin-top: 40px;border: 2px solid #ffc107;color: #fff;}
#banner-pages .btn-get-started:hover {background: #ffc107;}
#banner-pages h1 {ont-size: 28px;line-height: 36px;}
#banner-pages h2 {font-size: 18px;line-height: 24px;}}
/*--------------------------------------------------------------
# Signin Banner Section
--------------------------------------------------------------*/
#banner-signin {width: 100%;height: 400px;background: url("../../../upload/banner/top_1.jpg") top center;background-size: cover;position: relative;}
#banner-signin:before {content: "";position: absolute;bottom: 0;top: 0;left: 0;right: 0;}
#banner-signin .container {text-align: center;padding-top: 50px;}
@media (max-width: 992px) {#banner-signin .container {padding-top: 0;}}
#banner-signin h1 {margin: 0;font-size: 48px;font-weight: 700;line-height: 56px;color: #fff;}
#banner-signin h2 {color: #eee;margin: 15px 0 0 0;font-size: 22px;}
#banner-signin .btn-get-started {font-weight: 500;font-size: 15px;letter-spacing: 1px;display: inline-block;padding: 9px 35px;border-radius: 50px;transition: 0.5s;margin-top: 40px;border: 2px solid #ffc107;color: #fff;}
#banner-signin .btn-get-started:hover {background: #ffc107;}
@media (min-width: 1024px) {#banner-signin {background-attachment: fixed;}}
@media (max-width: 768px) {#banner-signin {height: 100vh;}
#banner-signin h1 {ont-size: 28px;line-height: 36px;}
#banner-signin h2 {font-size: 18px;line-height: 24px;}}
#signin {width: 100%;height: 100vh;background: url("../../../upload/banner/top_1.jpg") top center;background-size: cover;position: relative;}
#signin:before {content: "";background: rgba(45, 53, 69, 0.7);position: absolute;bottom: 0;top: 0;left: 0;right: 0;}
#signin .container {text-align: center;padding-top: 50px;}
@media (max-width: 992px) {#signin .container {padding-top: 0;}}
#signin h1 {margin: 0;font-size: 48px;font-weight: 700;line-height: 56px;color: #fff;}
#signin h2 {color: #eee;margin: 15px 0 0 0;font-size: 22px;}
#signin .btn-get-started {font-weight: 500;font-size: 15px;letter-spacing: 1px;display: inline-block;padding: 9px 35px;border-radius: 50px;transition: 0.5s;margin-top: 40px;border: 2px solid #ffc107;color: #fff;}
#signin .btn-get-started:hover {background: #ffc107;}
@media (min-width: 1024px) {#signin {background-attachment: fixed;}}
@media (max-width: 768px) {#signin {height: 100vh;}
#signin h1 {ont-size: 28px;line-height: 36px;}
#signin h2 {font-size: 18px;line-height: 24px;}}
/*--------------------------------------------------------------
# Signin Pages
--------------------------------------------------------------*/
.login-box{width:360px;margin:7% auto}
@media (max-width:768px){.login-box{width:90%;margin-top:20px}}
input[type=text],input[type=password] {width: 100%;padding: 12px 40px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;box-sizing: border-box;}  
button {background-color: #4CAF50;color: white;padding: 14px 20px;margin: 8px 0;border: none;cursor: pointer;width: 100%;}
button:hover {opacity: 0.8;}  
.container {padding: 16px;}  
.fontuser {position: relative;} 
.fontuser i{position: absolute;left: 15px;top: 25px;color: gray;} 
.fontpassword {position: relative;} 
.fontpassword i{position: absolute;left: 15px;top: 25px;color: gray;} 
/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box {padding: 20px;background: #fff;text-align: center;box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);border-radius: 5px;position: relative;overflow: hidden;border:#06C;}
.pricing h3 {font-weight: 400;margin: -20px -20px 20px -20px;padding: 20px 15px;font-size: 16px;font-weight: 600;color: #777777;background: #f8f8f8;}
.pricing h4 {font-size: 36px;color: #42C1D7;font-weight: 600;margin-bottom: 20px;}
.pricing h4 sup {font-size: 20px;top: -15px;left: -3px;}
.pricing h4 span {color: #bababa;font-size: 16px;font-weight: 300;}
.pricing ul {padding: 0;list-style: none;color: #444444;text-align: center;line-height: 20px;font-size: 14px;}
.pricing ul li {padding-bottom: 16px;}
.pricing ul i {color: #42C1D7;font-size: 18px;padding-right: 4px;}
.pricing ul .na {color: #ccc;text-decoration: line-through;}
.pricing .btn-wrap {margin: 20px -20px -20px -20px;padding: 20px 15px;background: #f8f8f8;text-align: center;}
.pricing .btn-buy {display: inline-block;padding: 10px 35px;border-radius: 4px;transition: none;font-size: 14px;font-weight: 400;font-weight: 600;transition: 0.3s;border: 2px solid #c8cedc;  color: #6c7c9f;}
.pricing .btn-buy:hover {background: #fff;}
.pricing .featured h3 {color: #fff;background: #42C1D7;}
.pricing .featured .btn-buy {background: #42C1D7;color: #fff;border: 2px solid #42C1D7;}
.pricing .featured .btn-buy:hover {background: #2494A8;}
.pricing .advanced {width: 200px;position: absolute;top: 18px;right: -68px;transform: rotate(45deg);z-index: 1;font-size: 14px;padding: 1px 0 3px 0;background: #42C1D7; color: #fff;}
/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta {width:100%;height: 500px;background: url("../../../upload/banner/block_one_bg.jpg") top center;background-size: cover;position: relative;}
.cta h3 {color: #fff;font-size: 28px;font-weight: 700;}
.cta p {color: #fff;}
.cta .cta-btn {font-family: "Raleway", sans-serif;font-weight: 500;font-size: 16px;letter-spacing: 1px;display: inline-block;padding: 10px 35px;border-radius: 25px;transition: 0.5s;  margin-top: 10px;border: 2px solid #ffc107;color: #fff;}
.cta .cta-btn:hover {background: #ffc107;}
/*--------------------------------------------------------------
# Frequently Asked Questions
--------------------------------------------------------------*/
.faq .faq-list {padding: 0 100px;}
.faq .faq-list ul {padding: 0;list-style: none;}
.faq .faq-list li + li {margin-top: 15px;}
.faq .faq-list li {padding: 20px;background: #fff;border-radius: 4px;position: relative;}
.faq .faq-list a {display: block;position: relative;font-family: "Poppins", sans-serif;font-size: 16px;line-height: 24px;font-weight: 500;padding: 0 30px;outline: none;color: #42C1D7;text-decoration:none;}
.faq .faq-list .icon-help {font-size: 24px;position: absolute;right: 0;left: 20px;color: #42C1D7;text-decoration:none;}
.faq .faq-list .icon-show, .faq .faq-list .icon-close {font-size: 24px;position: absolute;right: 0;top: 0;color: #42C1D7;}
.faq .faq-list p {margin-bottom: 0;padding: 10px 0 0 0;}
.faq .faq-list .icon-show {display: none;}
.faq .faq-list a.collapsed {color: #42C1D7;transition: 0.3s;text-decoration:none;}
.faq .faq-list a.collapsed:hover {color: #2494A8;text-decoration:none;}
.faq .faq-list a.collapsed .icon-show {display: inline-block;color: #42C1D7;}
.faq .faq-list a.collapsed .icon-close {display: none;color: #42C1D7;}
@media (max-width: 1152) {.faq .faq-list {padding: 0;color: #42C1D7;}}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {color: #414c64;font-size: 14px;background: #797C80;}
#footer .footer-top {padding: 60px 0 30px 0;background: #222324;color:#fff;}
#footer .footer-top .footer-contact {margin-bottom: 30px;}
#footer .footer-top .footer-contact h4 {font-size: 22px;margin: 0 0 30px 0;padding: 2px 0 2px 0;line-height: 1;font-weight: 700;color: #fff;}
#footer .footer-top .footer-contact p {font-size: 14px;line-height: 24px;margin-bottom: 0;font-family: "Raleway", sans-serif;color: #777777;}
#footer .footer-top h4 {font-size: 16px;font-weight: bold;color: #444444;position: relative;padding-bottom: 12px;}
#footer .footer-top .footer-links {margin-bottom: 30px;color: #fff;}
#footer .footer-top .footer-links ul {list-style: none;padding: 0;margin: 0;}
#footer .footer-top .footer-links ul i {padding-right: 2px;color: #ffc107;font-size: 18px;line-height: 1;}
#footer .footer-top .footer-links ul li {padding: 10px 0;display: flex;align-items: center;}
#footer .footer-top .footer-links ul li:first-child {padding-top: 0;}
#footer .footer-top .footer-links ul a {color: #777777;transition: 0.3s;display: inline-block;line-height: 1;text-decoration: none;}
#footer .footer-top .footer-links ul a:hover {text-decoration: none;color: #42C1D7;}
#footer .footer-newsletter {font-size: 15px;}
#footer .footer-newsletter h4 {font-size: 16px;font-weight: bold;color: #fff;position: relative;padding-bottom: 12px;}
#footer .footer-newsletter form {margin-top: 30px;background: #fff;padding: 6px 10px;position: relative;border-radius: 50px;text-align: left;border: 1px solid #e1e4ec;}
#footer .footer-newsletter form input[type="email"] {border: 0;padding: 4px 8px;width: calc(100% - 100px);}
#footer .footer-newsletter form input[type="submit"] {position: absolute;top: -1px;right: -1px;bottom: -1px;border: 0;background: none;font-size: 16px;padding: 0 20px;background: #42C1D7;color: #fff;transition: 0.3s;border-radius: 50px;box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);}
#footer .footer-newsletter form input[type="submit"]:hover {background: #2494A8;}
#footer .social-links a {font-size: 18px;display: inline-block;background: #e1e4ec;color: #5f6f92;line-height: 1;padding: 8px 0;margin-right: 4px;border-radius: 50%;text-align: center;width: 36px;height: 36px;transition: 0.3s;}
#footer .social-links a:hover {background: #42C1D7;text-decoration: none;}