/* ============================================================
   TaKo Studio brand colors.

   This is the ONE file to edit if you ever want to change the
   site's theme color. It overrides the template's default coral
   (#ff5c5c) and pastel section backgrounds with our own brand
   purple + gold. Everything else (fonts, spacing, borders,
   shadows, layout) lives in style.css / responsive.css and is
   not affected by this file.

   Brand purple : #5C3FA8  (light tint #F2EFFA / #E6DFF6, dark #3E2B6E)
   Accent gold  : #D6A13F  (light tint #FBF1DD, dark #B3842E)
   ============================================================ */

/* Preloader (page-load splash screen) */
.preloader {
    background-color: #5C3FA8;
}

/* Header nav link hover */
.top-bar ul li a:hover, .top-bar a:hover {
    color: #5C3FA8;
}

/* Pale panel behind the header, right side */
header:before {
    background-color: #F2EFFA;
}

/* Main call-to-action button, used everywhere (nav, hero, footer, pricing) */
.btn {
    background-color: #5C3FA8;
}

/* Small eyebrow/label text above section headings, e.g. "How it works?" */
.heading span {
    color: #5C3FA8;
}

/* Hero section background wash */
.hero-section {
    background-color: #FBF1DD;
}

/* "How it works" step-number bubble */
.consulting-business-img span {
    background-color: #5C3FA8;
}

/* "How it works" section background wash */
.consulting-business {
    background-color: #FBF1DD;
}

/* Services section background wash */
.services {
    background-color: #F2EFFA;
}

/* Testimonial quotation-mark icon background (kept for whenever reviews are added) */
.quotation-mark img {
    background-color: #5C3FA8;
}
.quotation button.owl-dot.active {
    border-color: #5C3FA8;
}

/* Pricing plan icon circle */
.pricing-pr i {
    background-color: #5C3FA8;
}

/* Pricing card header band (was lavender/lime/sky per plan - now brand tints) */
.pricing-pr {
    background-color: #F2EFFA;
}
.pricing-pr.two {
    background-color: #FBF1DD;
}
.pricing-pr.three {
    background-color: #E6DFF6;
}

/* Pricing section background wash */
.pricing-plan {
    background-color: #F2EFFA;
}

/* "40% discount" style highlight text */
.join-now-text span {
    color: #B3842E;
}

/* FAQ accordion +/- icon circle and open-state background */
.accordion-item .icon {
    background-color: #5C3FA8;
}
.accordion-item.active .heading {
    color: #3E2B6E;
}
.accordion-item.active .icon:before,
.accordion-item.active .icon:after {
    background: #fff;
}
.accordion-item.active:not(:first-of-type), .accordion-item.active {
    background-color: #FBF1DD;
}
.accordion {
    background-color: #F2EFFA;
}

/* Scroll-to-top button - #progress is the outer ring (JS repaints it with a
   conic-gradient once you scroll), #progress-value is the solid inner disc,
   which stays whatever color.css says since JS never touches it. */
#progress {
    background-color: #5C3FA8;
}
#progress-value {
    background-color: #5C3FA8;
}

/* Footer contact cards (was lavender/lime/sky - now brand tints) */
.address.phone {
    background-color: #FBF1DD;
}
.address.email {
    background-color: #E6DFF6;
}

/* "Services" module icon circles (home page, 3-left/3-right layout) */
.service-text i {
    background-color: #F2EFFA;
}
.service-text.two i {
    background-color: #FBF1DD;
}
.service-text.three i {
    background-color: #E6DFF6;
}
.service-text.for i {
    background-color: #FBF1DD;
}