/* =========================================================
   Tijocity45 — Light Professional Theme Overrides
   Loaded after style.css / ecommerce-shop.css
   ========================================================= */

:root {
  --body-bg: #F7F6F2;
  --bg-color: #FFFFFF;
  --headings-color: #1A2334;
  --text-color: #5D6673;
  --link-hover-color: #141C2B;

  /* Theme color overrides for light background */
  --theme-color2: #FFFFFF;
  --theme-color2-rgb: 255, 255, 255;
  --theme-color3: #F8FAFC;
  --theme-color3-rgb: 248, 250, 252;

  --theme-color-black: #FFFFFF;
  --theme-color-black-rgb: 255, 255, 255;

  --border-color1-rgba: rgba(20, 30, 48, 0.14);
  --border-color2-rgba: rgba(20, 30, 48, 0.08);

  --sec-title-subtitle-color: #8A93A3;
}

body {
  background-color: var(--body-bg);
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--headings-color);
}

.sec-title .title {
  color: var(--headings-color);
}

/* =========================================================
   1. Header (All states: normal, sticky, inner-solid, mobile)
   ========================================================= */
.main-header,
.header-1,
.main-header.header-1,
.main-header.header-home,
.main-header.header-inner-solid {
  background-color: #FFFFFF !important;
  box-shadow: 0 2px 14px rgba(20, 30, 48, 0.06) !important;
  border-bottom: 1px solid rgba(20, 30, 48, 0.08) !important;
}

/* Normal Desktop Header Navigation Links */
.header-1 .main-menu .navigation > li > a,
.main-header .main-menu .navigation > li > a,
.main-header.header-home .main-menu .navigation > li > a,
.main-header.header-inner-solid .main-menu .navigation > li > a {
  color: #1A2334 !important;
  font-weight: 600 !important;
}

.header-1 .main-menu .navigation > li > a:hover,
.main-header .main-menu .navigation > li > a:hover,
.main-header.header-home .main-menu .navigation > li > a:hover,
.main-header.header-inner-solid .main-menu .navigation > li > a:hover,
.header-1 .main-menu .navigation > li.current > a,
.main-header .main-menu .navigation > li.current > a,
.main-header.header-home .main-menu .navigation > li.current > a,
.main-header.header-inner-solid .main-menu .navigation > li.current > a {
  color: #16a34a !important;
}

/* Sticky Header on Scroll */
.sticky-header,
.header-1 .sticky-header,
.main-header .sticky-header,
.main-header.header-home .sticky-header,
.main-header.header-inner-solid .sticky-header {
  background-color: #FFFFFF !important;
  box-shadow: 0 4px 20px rgba(20, 30, 48, 0.08) !important;
  border-bottom: 1px solid rgba(20, 30, 48, 0.08) !important;
}

.sticky-header .main-menu .navigation > li > a,
.header-1 .sticky-header .main-menu .navigation > li > a,
.main-header .sticky-header .main-menu .navigation > li > a,
.main-header.header-home .sticky-header .main-menu .navigation > li > a,
.main-header.header-inner-solid .sticky-header .main-menu .navigation > li > a {
  color: #1A2334 !important;
  font-weight: 600 !important;
}

.sticky-header .main-menu .navigation > li > a:hover,
.header-1 .sticky-header .main-menu .navigation > li > a:hover,
.sticky-header .main-menu .navigation > li.current > a,
.header-1 .sticky-header .main-menu .navigation > li.current > a {
  color: #16a34a !important;
}

/* Header Auth Links (Login / Register) */
.main-header .auth-links a,
.header-1 .auth-links a,
.header-1 .auth-links .login-link,
.main-header.header-inner-solid .auth-links a {
  color: var(--headings-color) !important;
}

.main-header .auth-links .login-link:hover,
.header-1 .auth-links .login-link:hover {
  color: var(--theme-color1) !important;
}

.main-header .auth-links .auth-divider,
.header-1 .auth-links .auth-divider,
.main-header.header-inner-solid .auth-links .auth-divider {
  color: rgba(20, 30, 48, 0.3) !important;
}

.main-header .auth-links .register-link,
.header-1 .auth-links .register-link,
.main-header.header-inner-solid .auth-links .register-link {
  color: var(--theme-color1) !important;
  font-weight: 700 !important;
}

/* Mobile Nav Toggler & Hamburger Spans */
.mobile-nav-toggler,
.header-1 .mobile-nav-toggler,
.sticky-header .mobile-nav-toggler,
.main-header.header-inner-solid .mobile-nav-toggler {
  color: var(--headings-color) !important;
}

.header-1 .mobile-nav-toggler span,
.sticky-header .mobile-nav-toggler span,
.mobile-nav-toggler span,
.header-1 .mobile-nav-toggler span:first-child,
.header-1 .mobile-nav-toggler span:nth-child(2),
.header-1 .mobile-nav-toggler span:last-child {
  background: var(--headings-color) !important;
}

/* Mobile Menu Drawer */
.mobile-menu .menu-box {
  background-color: #FFFFFF !important;
}
.mobile-menu .navigation li a {
  color: var(--headings-color) !important;
}
.mobile-menu .close-btn {
  color: var(--headings-color) !important;
}
.mobile-menu .auth-list-mobile a {
  color: var(--headings-color) !important;
  font-weight: 600;
}

/* =========================================================
   2. Hero Section
   ========================================================= */
.hero-section.hero-1 {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F4F1EA 78%, var(--body-bg) 100%) !important;
}
.hero-1 .hero-content .hero-title,
.hero-1 .hero-content .hero-content .hero-title {
  color: var(--headings-color);
}
.hero-1 .hero-content .content-items .content .hero-text {
  color: rgba(20, 30, 48, 0.65);
}
.line-shape-animation span {
  background: rgba(20, 30, 48, 0.08);
}
.hero-1 .arrow-path {
  fill: var(--theme-color1);
}
.hero-section .circle-box .ani-circle {
  filter: invert(1) opacity(0.85);
}

/* =========================================================
   3. Feature cards
   ========================================================= */
.feature-section-2 {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(20, 30, 48, 0.08) !important;
  box-shadow: 0 24px 60px -30px rgba(20, 30, 48, 0.18) !important;
}
.feature-section-2 .feature-block .inner-block .content-box .title,
.feature-block .inner-block .content-box .title,
.feature-block .content-box .title {
  color: #111827 !important;
  font-weight: 600 !important;
}
.feature-section-2 .feature-block .inner-block .content-box .text,
.feature-block .inner-block .content-box .text,
.feature-block .content-box .text {
  color: #1F2937 !important;
}
.feature-section-2 .feature-block .inner-block .content-box .arrow-link,
.feature-block .inner-block .content-box .arrow-link {
  color: #111827 !important;
}
.feature-section-2 .feature-block .inner-block .content-box .arrow-link .text,
.feature-block .inner-block .content-box .arrow-link .text {
  color: #111827 !important;
}
.feature-block .inner-block .border-line {
  background: rgba(20, 30, 48, 0.12) !important;
}

/* =========================================================
   4. Service section
   ========================================================= */
.service-section.section-padding {
  background-image: none !important;
  background-color: #F7F6F2 !important;
}
.service-block-one .inner-block {
  background-color: #FFFFFF;
  border-color: var(--border-color2-rgba);
  box-shadow: 0 20px 45px -32px rgba(20, 30, 48, 0.25);
}
.service-block-one .inner-block .number {
  color: rgba(20, 30, 48, 0.08);
}
.service-block-one .inner-block .content-box .title a {
  color: var(--headings-color);
}
.service-block-one .inner-block .content-box .text,
.service-block-one .inner-block .content-box .arrow-link {
  color: var(--text-color);
}
.service-block-one .inner-block .content-box .arrow-link:hover {
  color: var(--theme-color1);
}

/* =========================================================
   5. About section
   ========================================================= */
.about-content .about-list-items ul li {
  color: var(--text-color);
}
.about-content .about-list-items ul li i {
  color: var(--theme-color1);
}
.about-content .about-text {
  color: var(--text-color);
}
.about-content .count-box {
  color: var(--headings-color);
}
.about-content .about-thumb-items .content p {
  color: var(--text-color);
}

/* =========================================================
   6. Work process steps
   ========================================================= */
.working-block-one .inner-block .step {
  background-color: var(--theme-color1);
  color: #fff;
}
.working-block-one .inner-block .content-box .title {
  color: var(--headings-color);
}
.working-block-one .inner-block .content-box .text {
  color: var(--text-color);
}

/* Video section */
.video-section .video-light-shape-1 {
  display: none;
}

/* =========================================================
   7. Choose-us feature list card & counter badge
   ========================================================= */
.choose-us-content-1 .feature-box-wrapper {
  background-color: #FFFFFF;
  border-color: var(--border-color2-rgba);
  box-shadow: 0 20px 45px -32px rgba(20, 30, 48, 0.25);
}
.choose-us-content-1 .feature-box-wrapper .feature-box .inner-box.border-add {
  border-bottom-color: var(--border-color2-rgba);
}
.choose-us-content-1 .feature-box-wrapper .feature-box .inner-box .content-box .title {
  color: var(--headings-color);
}
.choose-us-content-1 .feature-box-wrapper .feature-box .inner-box .content-box .text {
  color: var(--text-color);
}

/* Circular Badge in Choose-Us section (was dark #1E2A3B) */
.choose-us-image-1 .choose-counter {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(20, 30, 48, 0.08) !important;
  box-shadow: 0 14px 40px rgba(20, 30, 48, 0.12) !important;
}
.choose-us-image-1 .choose-counter .count-box {
  color: var(--theme-color1) !important;
}
.choose-us-image-1 .choose-counter p {
  color: var(--headings-color) !important;
}

/* =========================================================
   8. Platform Stats (was black container & black cards)
   ========================================================= */
.testimonial-wrapper.testimonial-one,
.testimonial-one {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(20, 30, 48, 0.08) !important;
  box-shadow: 0 20px 50px -25px rgba(20, 30, 48, 0.1) !important;
}

.testimonial-wrapper.testimonial-one .testi-bg-shape,
.testimonial-wrapper.testimonial-one .testi-light-shape-1,
.testimonial-wrapper.testimonial-one .testi-shape-1 {
  display: none !important;
}

.testimonial-wrapper.testimonial-one .sec-title .title {
  color: var(--headings-color) !important;
}

.testimonial-wrapper.testimonial-one .sec-title .title span {
  color: var(--theme-color1) !important;
}

.testimonial-wrapper.testimonial-one .sec-title .sub-title {
  color: var(--sec-title-subtitle-color) !important;
}

.testimonial-block-one .inner-box {
  background-color: #F8FAFC !important;
  border: 1px solid rgba(20, 30, 48, 0.08) !important;
  box-shadow: 0 10px 30px -15px rgba(20, 30, 48, 0.08) !important;
}

.testimonial-block-one .inner-box .text {
  color: #334155 !important;
}

.testimonial-block-one .inner-box .infu .name {
  color: #0F172A !important;
}

.testimonial-block-one .inner-box .infu span {
  color: #64748B !important;
}

.testimonial-block-one .inner-box .star {
  color: #F59E0B !important;
}

.testimonial-wrapper .left-content .ani-circle {
  filter: invert(1) opacity(0.85);
}

.testimonial-wrapper .left-content .icon {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(20, 30, 48, 0.08) !important;
  box-shadow: 0 8px 24px rgba(20, 30, 48, 0.08) !important;
}

.testimonial-one .slider-box .array-button .array-prev,
.testimonial-one .slider-box .array-button .array-next {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(20, 30, 48, 0.14) !important;
  color: var(--headings-color) !important;
}

.testimonial-one .slider-box .array-button .array-prev:hover,
.testimonial-one .slider-box .array-button .array-next:hover {
  background-color: var(--theme-color1) !important;
  color: #FFFFFF !important;
  border-color: var(--theme-color1) !important;
}

.social-share-widget {
  color: var(--headings-color) !important;
}

.social-share-widget a {
  color: #475569 !important;
}

.social-share-widget a:hover {
  color: var(--theme-color1) !important;
}

/* =========================================================
   9. Answers You're Looking For (FAQ Section - was black)
   ========================================================= */
.faq-section {
  background-color: var(--body-bg) !important;
}

.faq-section .sec-title .title {
  color: var(--headings-color) !important;
}

.faq-section .sec-title .title span {
  color: var(--theme-color1) !important;
}

.faq-section .sec-title .sub-title {
  color: var(--sec-title-subtitle-color) !important;
}

.faq-block-one {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(20, 30, 48, 0.08) !important;
  box-shadow: 0 10px 25px -10px rgba(20, 30, 48, 0.06) !important;
}

.faq-block-one .title-box .content .title {
  color: var(--headings-color) !important;
  font-weight: 600 !important;
}

.faq-block-one .inner .text {
  color: var(--text-color) !important;
}

.faq-block-one .title-box .icon {
  background-color: #F1F5F9 !important;
}

.faq-block-one .title-box .icon i {
  color: var(--headings-color) !important;
}

.faq-block-one.active {
  background-color: #FFFFFF !important;
  border-color: rgba(255, 107, 30, 0.35) !important;
  box-shadow: 0 14px 35px -12px rgba(255, 107, 30, 0.12) !important;
}

.faq-block-one.active .title-box .content .title,
.faq-block-one.active .title {
  color: var(--headings-color) !important;
}

.faq-block-one.active .title-box .icon,
.faq-block-one.active .icon {
  background-color: var(--theme-color1) !important;
}

.faq-block-one.active .title-box .icon i,
.faq-block-one.active .icon i {
  color: #FFFFFF !important;
}

/* =========================================================
   10. Platform Highlights (was black cards)
   ========================================================= */
.feature-section {
  background-color: var(--body-bg) !important;
}

.feature-box-style1 {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(20, 30, 48, 0.08) !important;
  box-shadow: 0 20px 50px -25px rgba(20, 30, 48, 0.1) !important;
}

.feature-box-style1 .feature-frame {
  opacity: 0.12 !important;
}

.feature-box-style1 .sub-title {
  color: var(--sec-title-subtitle-color) !important;
}

.feature-box-style1 .title {
  color: var(--headings-color) !important;
}

.feature-box-style1 .title span {
  color: var(--theme-color1) !important;
}

.feature-box-style2 {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(20, 30, 48, 0.08) !important;
  box-shadow: 0 20px 50px -25px rgba(20, 30, 48, 0.1) !important;
}

.feature-box-style2 .content .title {
  color: var(--headings-color) !important;
}

.feature-box-style2 .content .text {
  color: var(--text-color) !important;
}

/* =========================================================
   11. Team section
   ========================================================= */
.team-section.section-padding {
  background-image: none !important;
  background-color: #F7F6F2 !important;
}

/* =========================================================
   12. Contact section (was black)
   ========================================================= */
.contact-section {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(20, 30, 48, 0.08) !important;
  box-shadow: 0 20px 50px -25px rgba(20, 30, 48, 0.1) !important;
}

.contact-section .sec-title .sub-title {
  color: var(--sec-title-subtitle-color) !important;
}

.contact-section .sec-title .title {
  color: var(--headings-color) !important;
}

.contact-section .sec-title .title span {
  color: var(--theme-color1) !important;
}

.contact-section .contact-text {
  color: var(--text-color) !important;
}

.contact-content-1 .contact-list-items .contact-list .title {
  color: var(--headings-color) !important;
}

.contact-content-1 .contact-list-items .contact-list .contact-icon p,
.contact-content-1 .contact-list-items .contact-list .contact-icon p a {
  color: var(--text-color) !important;
}

.contact-content-1 .contact-list-items .contact-list .contact-icon p a:hover {
  color: var(--theme-color1) !important;
}

.contact-content-1 .contact-list-items .line {
  background-color: rgba(20, 30, 48, 0.12) !important;
}

.contact-section .contact-image::before {
  background: linear-gradient(360deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
}

.contact-form-style-1 .contact-form-box .form-clt input,
.contact-form-style-1 .contact-form-box .form-clt textarea {
  border-bottom: 1px solid rgba(20, 30, 48, 0.16) !important;
  color: var(--headings-color) !important;
}

.contact-form-style-1 .contact-form-box .form-clt input::-webkit-input-placeholder,
.contact-form-style-1 .contact-form-box .form-clt textarea::-webkit-input-placeholder,
.contact-form-style-1 .contact-form-box .form-clt input::placeholder,
.contact-form-style-1 .contact-form-box .form-clt textarea::placeholder {
  color: var(--sec-title-subtitle-color) !important;
}

.contact-form-style-1 .contact-form-box .form-clt input:focus,
.contact-form-style-1 .contact-form-box .form-clt textarea:focus {
  border-bottom-color: var(--theme-color1) !important;
}

/* =========================================================
   13. Footer (was black card)
   ========================================================= */
.foorer-area {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(20, 30, 48, 0.08) !important;
  box-shadow: 0 20px 50px -25px rgba(20, 30, 48, 0.1) !important;
}

.foorer-area .footer-line {
  opacity: 0.05 !important;
  filter: invert(1);
}

.foorer-area .footer-top-wrapper {
  border-bottom-color: rgba(20, 30, 48, 0.08) !important;
}

.foorer-area .footer-top-wrapper .footer-info .mail,
.foorer-area .footer-top-wrapper .footer-info .phone {
  color: var(--headings-color) !important;
}

.foorer-area .footer-top-wrapper .footer-info .mail:hover,
.foorer-area .footer-top-wrapper .footer-info .phone:hover {
  color: var(--theme-color1) !important;
}

.foorer-area .footer-content .title {
  color: var(--headings-color) !important;
}

.foorer-area .footer-content .title span {
  color: var(--theme-color1) !important;
}

.foorer-area .footer-content .title-2 {
  color: var(--text-color) !important;
}

.foorer-area .widget-title,
.foorer-area .footer-widget-items h4,
.foorer-area .footer-widget-items h5 {
  color: var(--headings-color) !important;
}

.foorer-area .footer-widget-items .user-links li a {
  color: var(--text-color) !important;
}

.foorer-area .footer-widget-items .user-links li a:hover {
  color: #16a34a !important;
}

.foorer-area .footer-content .form-group input {
  background: #F4F1EA !important;
  border: 1px solid rgba(20, 30, 48, 0.12) !important;
  color: var(--headings-color) !important;
}

.foorer-area .footer-content .form-group input::-webkit-input-placeholder,
.foorer-area .footer-content .form-group input::placeholder {
  color: var(--sec-title-subtitle-color) !important;
}

.foorer-area .footer-content .form-group .circle-btn {
  background-color: var(--theme-color1) !important;
  color: #FFFFFF !important;
}

.foorer-area .footer-bottom {
  border-top-color: rgba(20, 30, 48, 0.08) !important;
}

.foorer-area .footer-bottom p,
.foorer-area .footer-bottom .footer-bottom-wrapper p {
  color: var(--sec-title-subtitle-color) !important;
}

.foorer-area .footer-bottom p a {
  color: var(--headings-color) !important;
}

.foorer-area .footer-bottom .footer-bottom-wrapper .social-icon a {
  background: #F1F5F9 !important;
  color: var(--headings-color) !important;
  border: 1px solid rgba(20, 30, 48, 0.08) !important;
}

.foorer-area .footer-bottom .footer-bottom-wrapper .social-icon a:hover {
  background-color: var(--theme-color1) !important;
  color: #FFFFFF !important;
}

/* =========================================================
   14. Pricing page cards (was black)
   ========================================================= */
.pricing-section-2 {
  background-color: var(--body-bg) !important;
}

.pricing-block .inner-box {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(20, 30, 48, 0.08) !important;
  box-shadow: 0 15px 40px -20px rgba(20, 30, 48, 0.1) !important;
}

.pricing-block .inner-box .pricing-header {
  background-color: #F8FAFC !important;
  border: 1px solid rgba(20, 30, 48, 0.06) !important;
}

.pricing-block .inner-box .pricing-header .sub-title {
  color: var(--sec-title-subtitle-color) !important;
}

.pricing-block .inner-box .pricing-header .price {
  color: var(--headings-color) !important;
}

.pricing-block .inner-box .pricing-header .price sub {
  color: var(--text-color) !important;
}

.pricing-block .inner-box .pricing-list li {
  color: var(--text-color) !important;
}

.pricing-block.style-2 .inner-box {
  border-color: rgba(255, 107, 30, 0.3) !important;
}