:root {
    --color-primary: #febd59;
    --color-primary-hover: #d18f29;
    --color-secondary: #385b6e;
    --color-secondary-hover: #2a9dcc;
    --color-secondary-opacity: #385b6ee6;
    --color-white: #fff;
}

.color-primary {
    color: var(--color-primary);
}

.color-secondary {
    color: var(--color-secondary);
}

.color-white {
    color: var(--color-white);
}


#home {
    max-height: 800px;
}

#home h1 {
    margin: 0 0 10px 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: #fff;
}

#home h2 {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 50px;
    font-size: 20px;
    font-weight: 400;
}

#home .btn-get-started {
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 28px 11px 28px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 10px 0 0 0;
    color: #fff;
    background: #47b2e4;
}

#home .container {
    padding-top: 72px;
}


.nav-link.active,
.about .content ul i,
.why-us .accordion-list span,
.services .icon-box .icon i {
    color:  var(--color-primary);
}

.navbar .getstarted {
    border-color: var(--color-primary);
}

#home .btn-get-started ,
.section-title h2::after,
.back-to-top {
    background-color: var(--color-primary);
}

#home .btn-get-started:hover ,
.navbar .getstarted:hover,
.back-to-top:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

#home ,
#preloader,
#footer,
.skills .progress-bar,
.pricing .featured .buy-btn,
.contact .php-email-form button[type="submit"],
#footer .footer-newsletter form input[type="submit"],
#footer .footer-top .social-links a {
    background-color: var(--color-secondary);
}

#header.header-scrolled, 
#header.header-inner-pages {
    background: var(--color-secondary-opacity);
}

a ,
.section-title h2,
.why-us .content h3,
.skills .content h3,
.skills .progress .skill,
.services .icon-box h4 a,
.team .member h4,
.team .member .social a i,
.pricing h4 span,
.faq .faq-list .icon-help,
.contact .info i,
.contact .info h4,
.contact .info p,
#footer .footer-top .footer-links ul i,
.pricing h6,
.services-erp h6 {
    color: var(--color-secondary);
}

a:hover,
.services .icon-box h4 a:hover,
#footer .footer-top .footer-links ul a:hover { 
    color: var(--color-secondary-hover);
}

.cta .cta-btn:hover,
.team .member .social a:hover,
.pricing .buy-btn:hover, 
.contact .info .email:hover i, 
.contact .info .address:hover i, 
.contact .info .phone:hover i,
.contact .php-email-form button[type="submit"]:hover,
#footer .footer-newsletter form input[type="submit"]:hover,
.about .content .btn-learn-more:hover,
#footer .footer-top .social-links a:hover {
    background-color: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
}

.pricing .buy-btn,
.about .content .btn-learn-more {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.pricing .featured,
.contact .php-email-form,
.contact .info {
    border-top-color: var(--color-secondary);
}

.contact .php-email-form,
.contact .info {
    border-bottom-color: var(--color-secondary);
}

.cta {
    background: linear-gradient(#385b6ee6, #385b6ee6), 
    url(../img/cta-bg.jpg) fixed center center;
}

#preloader:before {
    border-left-color: var(--color-secondary);
    border-right-color: var(--color-secondary);
}

.logo-icon {
    height: 25px;
    width: auto;
}

.getstarted:focus {
    padding: 8px 20px !important;
    color: var(--color-white) !important;
}

#header .logo {
    font-size: 24px;
}

section.clients{
    padding:30px 0;
}

.clients img {
    max-width: 45%;
    transition: all 0.4s ease-in-out;
    display: inline-block;
    padding: 15px 0;
    filter: grayscale(100);
    max-height: 60px;
}

.clients img:hover {
    filter: none;
    transform: scale(1.1);
}

.pricing .box ,
.services-erp .box {
    padding: 30px;
}
.pricing .box img,
.services-erp img {
    margin-bottom: 1rem;
}

.pricing .box, 
.services .icon-box{
    width: 100%;
}

.contact .php-email-form #sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}