/* ChattyFire Custom Color Palette */
:root {
  --chattyfire-red: #ef4926;
  --chattyfire-orange: #f89e2f;
  --chattyfire-yellow: #fce053;

  /* Gradient combinations */
  --gradient-primary: linear-gradient(135deg, #ef4926 0%, #f89e2f 100%);
  --gradient-secondary: linear-gradient(135deg, #f89e2f 0%, #fce053 100%);
  --gradient-full: linear-gradient(
    135deg,
    #ef4926 0%,
    #f89e2f 50%,
    #fce053 100%
  );
}

/* Button Gradient Styles */
.btn-gradient {
  background: var(--gradient-primary) !important;
  border: none !important;
  color: #fff !important;
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  background: var(--gradient-secondary) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(239, 73, 38, 0.4);
}

.btn-border {
  border: 2px solid var(--chattyfire-red) !important;
  color: var(--chattyfire-red) !important;
  background: transparent !important;
}

.btn-border:hover {
  background: var(--chattyfire-red) !important;
  color: #fff !important;
}

/* Feature Icons */
.feature-style-five-item i {
  color: var(--chattyfire-red);
  transition: all 0.3s ease;
}

.feature-style-five-item:hover i {
  color: var(--chattyfire-orange);
  transform: scale(1.1);
}

/* Process Icons */
.process-style-three .icon i {
  color: var(--chattyfire-red);
  background: rgba(239, 73, 38, 0.1);
}

/* Fun Fact Numbers */
.fun-fact .timer {
  color: #fff;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Banner Title */
.banner-style-five .title {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2),
    0 6px 30px rgba(0, 0, 0, 0.15);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Sub Heading */
.sub-heading {
  color: var(--chattyfire-red);
}

/* Accordion Active State */
.accordion-button:not(.collapsed) {
  background-color: rgba(239, 73, 38, 0.1);
  color: var(--chattyfire-red);
}

.accordion-button:not(.collapsed)::after {
  filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(1352%)
    hue-rotate(349deg) brightness(95%) contrast(92%);
}

/* Contact Form Focus */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--chattyfire-red);
  box-shadow: 0 0 0 0.2rem rgba(239, 73, 38, 0.25);
}

/* Social Icons Hover */
.social li a:hover {
  background: var(--gradient-primary);
  color: #fff;
}

/* Footer Styles */
footer {
  background: linear-gradient(
    135deg,
    rgba(30, 15, 10, 0.95) 0%,
    rgba(35, 20, 10, 0.95) 50%,
    rgba(40, 30, 15, 0.95) 100%
  ) !important;
  background-color: #1a0f0a !important;
  position: relative;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(239, 73, 38, 0.05) 0%,
    rgba(248, 158, 47, 0.05) 50%,
    rgba(252, 224, 83, 0.03) 100%
  );
  pointer-events: none;
  z-index: 0;
}

footer > * {
  position: relative;
  z-index: 1;
}

/* Remove blue background from footer */
footer.bg-dark::after {
  display: none !important;
}

/* Footer Widget Titles */
footer .widget-title {
  color: var(--chattyfire-orange) !important;
}

/* Footer Links */
footer .f-item.link ul li a {
  color: #cccccc;
  transition: all 0.3s ease;
}

footer .f-item.link ul li a:hover {
  color: var(--chattyfire-orange);
  padding-left: 5px;
}

/* Footer Social Icons */
footer .social li a {
  background: rgba(239, 73, 38, 0.2);
  color: var(--chattyfire-orange);
  transition: all 0.3s ease;
}

footer .social li a:hover {
  background: var(--gradient-primary);
  color: #fff;
  transform: translateY(-3px);
}

/* Footer Contact Info */
footer .contact-widget .icon i {
  color: var(--chattyfire-red);
}

footer .contact-widget a {
  color: #cccccc;
  transition: all 0.3s ease;
}

footer .contact-widget a:hover {
  color: var(--chattyfire-orange);
}

footer .contact-widget strong {
  color: var(--chattyfire-yellow);
}

/* Footer Text */
footer p {
  color: #cccccc;
}

/* Footer Links Hover */
.f-item.link ul li a:hover {
  color: var(--chattyfire-orange);
}

/* Video Play Button */
.video-play-button {
  background: var(--gradient-primary);
}

.video-play-button:hover {
  background: var(--gradient-secondary);
}

/* Brand Section */
.brand-style-five h3 strong {
  color: var(--chattyfire-red);
}

/* Testimonial Quote */
.testimonial-style-two .content p::before {
  color: var(--chattyfire-orange);
}

/* Navigation Active State */
.navbar-nav li.active a,
.navbar-nav li a:hover {
  color: var(--chattyfire-red) !important;
}

/* Smooth Scroll Indicator */
.smooth-menu:hover {
  color: var(--chattyfire-red) !important;
}

/* Contact Info Icons */
.contact-info .icon i {
  color: var(--chattyfire-red);
}

/* Blog/Feature Cards Gradient Overlay */
.blog-style-two .thumb > div,
.single-item .thumb > div {
  position: relative;
}

.blog-style-two .thumb > div::after,
.single-item .thumb > div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.blog-style-two:hover .thumb > div::after,
.single-item:hover .thumb > div::after {
  opacity: 0.1;
}

/* Tags */
.tags a {
  background: var(--gradient-primary);
  color: #fff;
}

/* Meta Icons */
.meta ul li a i {
  color: var(--chattyfire-orange);
}

/* Footer Bottom */
.footer-bottom {
  background: rgba(0, 0, 0, 0.3) !important;
  border-top: 1px solid rgba(239, 73, 38, 0.2);
}

.footer-bottom p {
  color: #cccccc;
}

.footer-bottom a {
  color: var(--chattyfire-orange);
  transition: all 0.3s ease;
}

.footer-bottom a:hover {
  color: var(--chattyfire-red);
}

.footer-bottom ul li a {
  color: #cccccc;
  transition: all 0.3s ease;
}

.footer-bottom ul li a:hover {
  color: var(--chattyfire-orange);
}

/* Preloader (if exists) */
.se-pre-con {
  background: var(--gradient-primary);
}

/* Selection Color */
::selection {
  background: var(--chattyfire-yellow);
  color: #000;
}

::-moz-selection {
  background: var(--chattyfire-yellow);
  color: #000;
}

/* Banner Background Overlay */
.banner-style-five-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 1;
}

.banner-style-five-area > * {
  position: relative;
  z-index: 2;
}

/* Feature Cards Hover Effect */
.feature-style-five-item {
  transition: all 0.3s ease;
}

.feature-style-five-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(239, 73, 38, 0.2);
}

/* Process Section Icons */
.process-style-three .icon {
  background: transparent;
  transition: all 0.3s ease;
}

.process-style-three li:hover .icon {
  background: transparent;
  transform: scale(1.1);
}

/* Testimonial Section */
.testimonial-area {
  position: relative;
}

.testimonial-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(239, 73, 38, 0.05) 0%,
    rgba(248, 158, 47, 0.05) 100%
  );
  z-index: 0;
}

.testimonial-area > * {
  position: relative;
  z-index: 1;
}

/* Testimonial Text Colors */
.testimonial-area .title,
.testimonial-area h2,
.testimonial-area h4,
.testimonial-area p,
.testimonial-area span {
  color: #ffffff !important;
}

/* FAQ Accordion */
.accordion-button {
  transition: all 0.3s ease;
}

.accordion-button:hover {
  background-color: rgba(239, 73, 38, 0.05);
}

/* Contact Form Submit Button */
.contact-form button[type="submit"] {
  background: var(--gradient-primary);
  border: none;
  transition: all 0.3s ease;
}

.contact-form button[type="submit"]:hover {
  background: var(--gradient-secondary);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(239, 73, 38, 0.4);
}

/* Scroll to Top Button (if exists) */
.scroll-top {
  background: var(--gradient-primary);
}

.scroll-top:hover {
  background: var(--gradient-secondary);
}

/* Loading Spinner */
.se-pre-con::after {
  border-top-color: var(--chattyfire-red);
  border-right-color: var(--chattyfire-orange);
  border-bottom-color: var(--chattyfire-yellow);
}

/* Link Hover Effects */
a:hover {
  color: var(--chattyfire-red);
  transition: color 0.3s ease;
}

/* Section Headings */
.heading {
  position: relative;
}

.heading::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

/* Swiper Pagination */
.swiper-pagination-bullet-active {
  background: var(--chattyfire-red);
}

/* Swiper Navigation */
.swiper-button-next,
.swiper-button-prev {
  color: var(--chattyfire-red);
}

/* Mobile Menu Toggle */
.navbar-toggle {
  border-color: var(--chattyfire-red) !important;
  background: transparent !important;
}

.navbar-toggle:hover {
  background-color: rgba(239, 73, 38, 0.1) !important;
  border-color: var(--chattyfire-orange) !important;
}

.navbar-toggle .fa-bars,
.navbar-toggle i {
  color: var(--chattyfire-red) !important;
}

.navbar-toggle:hover .fa-bars,
.navbar-toggle:hover i {
  color: var(--chattyfire-orange) !important;
}

/* Hamburger Menu Close Button */
.navbar-toggle .fa-times {
  color: var(--chattyfire-red) !important;
}

.navbar-toggle:hover .fa-times {
  color: var(--chattyfire-orange) !important;
}

/* Form Input Focus Ring */
.form-control:focus {
  border-color: var(--chattyfire-red);
  box-shadow: 0 0 0 0.2rem rgba(239, 73, 38, 0.25);
}

/* Badge/Tag Colors */
.badge,
.tag {
  background: var(--gradient-primary);
  color: #fff;
}

/* Progress Bar */
.progress-bar {
  background: var(--gradient-primary);
}

/* Tooltip */
.tooltip-inner {
  background: var(--chattyfire-red);
}

.tooltip.bs-tooltip-top .arrow::before {
  border-top-color: var(--chattyfire-red);
}

.tooltip.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--chattyfire-red);
}

.tooltip.bs-tooltip-left .arrow::before {
  border-left-color: var(--chattyfire-red);
}

.tooltip.bs-tooltip-right .arrow::before {
  border-right-color: var(--chattyfire-red);
}

/* Mobile Navbar Logo - Override height to prevent stretching */
@media only screen and (max-width: 1023px) {
  a.navbar-brand {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 40px;
  }

  .navbar-brand > img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
  }

  /* Mobile Side Menu Logo */
  .navbar-collapse img {
    height: auto !important;
    max-height: 40px !important;
    width: auto !important;
    margin-bottom: 20px;
  }

  /* Hide shape on mobile */
  .shape-left-bottom-animated {
    display: none !important;
  }

  /* Contact heading margin on mobile */
  .contact-info .heading,
  #contact .heading {
    margin-top: 30px !important;
  }

  /* Contact section - heading before content on mobile */
  #contact .row.align-center {
    display: flex;
    flex-direction: column;
  }

  #contact .col-lg-6.text-right {
    order: -1;
    text-align: left !important;
    margin-bottom: 30px;
  }

  /* Footer copyright - Proto Yazılım on new line */
  .footer-bottom p a {
    display: block;
    margin-top: 5px;
  }

  /* Show Get Started in mobile menu */
  .mobile-get-started {
    display: block !important;
    text-align: center;
    padding: 15px 0;
  }

  /* Hide Get Started button in header on mobile */
  .attr-right .attr-nav {
    display: none !important;
  }
}

/* Navbar Get Started Button - White by default */
.navbar .attr-right .attr-nav li.button a::after {
  background: transparent !important;
  background-size: 220% 150% !important;
}

.navbar .attr-right .attr-nav li.button a {
  background: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}

.navbar .attr-right .attr-nav li.button a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Navbar Sticked State - Corporate Colors */
.navbar.sticked .attr-right .attr-nav li.button a::after {
  background: var(--gradient-primary) !important;
  background-size: 220% 150% !important;
}

.navbar.sticked .attr-right .attr-nav li.button a {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
}

.navbar.sticked .attr-right .attr-nav li.button a:hover::after,
.navbar.sticked .attr-right .attr-nav li.button a:active::after {
  background: var(--gradient-secondary) !important;
  background-position: -70% 0 !important;
}

/* Banner Get Started Button - Corporate Colors - Mobile Only */
.banner-style-five .button {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .banner-style-five .button {
    display: block;
  }
}

.banner-style-five .button .btn-gradient,
.banner-style-five .button a.btn-gradient,
.banner-style-five .button a.btn,
.banner-style-five .button .btn {
  background: linear-gradient(135deg, #ef4926 0%, #f89e2f 100%) !important;
  background-image: linear-gradient(
    135deg,
    #ef4926 0%,
    #f89e2f 100%
  ) !important;
  border: none !important;
  color: #ffffff !important;
  position: relative;
}

.banner-style-five .button .btn-gradient::after,
.banner-style-five .button a.btn-gradient::after,
.banner-style-five .button a.btn::after,
.banner-style-five .button .btn::after {
  background-color: #ef4926 !important;
  background: linear-gradient(to right, #ef4926, #f89e2f, #ef4926) !important;
  background-size: 220% 150% !important;
}

.banner-style-five .button .btn-gradient:hover,
.banner-style-five .button a.btn-gradient:hover,
.banner-style-five .button a.btn:hover,
.banner-style-five .button .btn:hover {
  background: linear-gradient(135deg, #f89e2f 0%, #fce053 100%) !important;
  background-image: linear-gradient(
    135deg,
    #f89e2f 0%,
    #fce053 100%
  ) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(239, 73, 38, 0.4);
}

.banner-style-five .button .btn-gradient:hover::after,
.banner-style-five .button a.btn-gradient:hover::after,
.banner-style-five .button a.btn:hover::after,
.banner-style-five .button .btn:hover::after {
  background: linear-gradient(to right, #f89e2f, #fce053, #f89e2f) !important;
  background-position: -70% 0 !important;
}

/* Mobile Menu Get Started Button - Corporate Colors */
.mobile-get-started .btn-gradient,
.mobile-get-started a.btn-gradient,
.mobile-get-started a.btn,
.mobile-get-started .btn {
  background: linear-gradient(135deg, #ef4926 0%, #f89e2f 100%) !important;
  background-image: linear-gradient(
    135deg,
    #ef4926 0%,
    #f89e2f 100%
  ) !important;
  border: none !important;
  color: #ffffff !important;
  position: relative;
}

.mobile-get-started .btn-gradient::after,
.mobile-get-started a.btn-gradient::after,
.mobile-get-started a.btn::after,
.mobile-get-started .btn::after {
  background-color: #ef4926 !important;
  background: linear-gradient(to right, #ef4926, #f89e2f, #ef4926) !important;
  background-size: 220% 150% !important;
}

.mobile-get-started .btn-gradient:hover,
.mobile-get-started a.btn-gradient:hover,
.mobile-get-started a.btn:hover,
.mobile-get-started .btn:hover {
  background: linear-gradient(135deg, #f89e2f 0%, #fce053 100%) !important;
  background-image: linear-gradient(
    135deg,
    #f89e2f 0%,
    #fce053 100%
  ) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(239, 73, 38, 0.4);
}

.mobile-get-started .btn-gradient:hover::after,
.mobile-get-started a.btn-gradient:hover::after,
.mobile-get-started a.btn:hover::after,
.mobile-get-started .btn:hover::after {
  background: linear-gradient(to right, #f89e2f, #fce053, #f89e2f) !important;
  background-position: -70% 0 !important;
}

/* Override any blue/purple colors from template */
.banner-style-five .button a,
.banner-style-five .button .btn,
.mobile-get-started a,
.mobile-get-started .btn {
  background-color: #ef4926 !important;
  background: linear-gradient(135deg, #ef4926 0%, #f89e2f 100%) !important;
}

.banner-style-five .button a:hover,
.banner-style-five .button .btn:hover,
.mobile-get-started a:hover,
.mobile-get-started .btn:hover {
  background-color: #f89e2f !important;
  background: linear-gradient(135deg, #f89e2f 0%, #fce053 100%) !important;
}

/* Global override for all btn-gradient::after to use corporate colors */
.btn.btn-gradient::after {
  background-color: #ef4926 !important;
  background: linear-gradient(to right, #ef4926, #f89e2f, #ef4926) !important;
  background-size: 220% 150% !important;
}

.btn.btn-gradient:hover::after {
  background: linear-gradient(to right, #f89e2f, #fce053, #f89e2f) !important;
  background-position: -70% 0 !important;
}

/* Navbar collapse button top position override */
nav.navbar.validnavs .navbar-collapse.collapse button {
  top: 33px !important;
}