/**
* Template Name: Myportfy
*/

/*============================================
1. Color veriables
2. General
3. Header 
4. Banner Section
5. Clint Logo Section
6. About Us Secton
7. Expert Areas Section
8. Project Section
9. Testimonial Section
10. Blog
11. Contact Us 
12. Footer
============================================*/

/*--------------------------------------------------------------
# Color veriables
--------------------------------------------------------------*/
[data-theme="light"] {
  --primary-color: #ffffff;
  --secondary-color: #fa614f;
  --tertiary-color: #8c01db;
  --quaternary-color: #170a24;
  --primary-gray: #4f4f4f;
  --secondary-gray: #c1c1c1;
  --tertiary-gray: #f4f5f8;
  --text-primary-color: #170a24;
  --text-secondary-color: #ffffff;

}

[data-theme="light"] {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--text-color-black);
}

.primary-custom-button:hover {
  background-color: var(--primary-color);
}

.red-border-text {
  color: var(--tertiary-color);
  text-shadow: 1px 2px #ffffff, -1px 4px #8C01DB;
}

.red-text {
  color: var(--tertiary-color);
  text-shadow: 1px 2px #ffffff, -1px 4px #8C01DB;
}

.primary-custom-button:hover {
  background-color: var(--secondary-color);
  color: var(--text-secondary-color);
}

.primary-custom-button:hover span svg path {
  fill: var(--primary-color);
}

/*--------------------------------------------------------------
# Header 
--------------------------------------------------------------*/
.lets-talk-btn,
.lets-talk-btn:hover {
  color: var(--text-secondary-color);
}

/*--------------------------------------------------------------
# Banner Section
--------------------------------------------------------------*/
.banner-section {
  background-image: url(../img/v2/wellcome-overlay.png);
}

/*--------------------------------------------------------------
# Clint Logo Section
--------------------------------------------------------------*/

.clint-logo {
  background-image: url(../img/v2/clint-section-bg.png);
}

/*--------------------------------------------------------------
# About Us Secton
--------------------------------------------------------------*/
.exercise-text h2 {
  color: var(--tertiary-color);
}

.span-with-icon {
  color: var(--tertiary-color);
}

.span-with-icon::after {
  content: url(../img/v2/span-icon.png);
}

.about-us-list p::before {
  content: url(../img/v2/about-us-list-icon.png.png);
}

/*--------------------------------------------------------------
#  Expert Areas Section
--------------------------------------------------------------*/
.expert-areas {
  background-position: left top 0px, right bottom 0px;
}

.area-img {
  background-image: url(../img/v2/area-img-bg.png);
}

.area-box {
  border-color: var(--secondary-gray);
}

.area-box:hover {
  background-color: var(--tertiary-color);
}

.area-box:hover .area-img {
  background-image: url(../img/v2/area-img-bg-hover.png);
}

.area-box:hover h4,
.area-box:hover p {
  color: var(--text-secondary-color);
}

.expert-slider-inner .swiper-button-next,
.expert-slider-inner .swiper-button-prev {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

/*--------------------------------------------------------------
#  Project Section
--------------------------------------------------------------*/
.tab-content p::before,
.tab-content p::after {
  background-image: url(../img/v2/Line.png);
}

/*--------------------------------------------------------------
#  Testimonial Section
--------------------------------------------------------------*/

.testimonial {
  background-image: url(../img/v2/testimonial-bg-1.png), url(../img/v2/testimonial-bg-2.png);
  background-position: left top, right bottom;
  background-size: contain;
}

/*--------------------------------------------------------------
#  Blog
--------------------------------------------------------------*/
.blog-div:hover .blog-box-content h4 {
  color: var(--text-secondary-color);
}

.blog-div:hover .blog-box-content span {
  color: var(--text-secondary-color);
}

.blog-box-content {
  border-color: var(--secondary-gray);
}

/*--------------------------------------------------------------
#  Contact Us 
--------------------------------------------------------------*/
.contact-us {
  background-color: var(--tertiary-gray);
  -webkit-box-shadow: 0px 5px 40px 0px rgba(23, 10, 36, 0.03), 5px 0px 40px 0px rgba(23, 10, 36, 0.03), -5px 0px 40px 0px rgba(23, 10, 36, 0.03), 0px -5px 40px 0px rgba(23, 10, 36, 0.03);
  box-shadow: 0px 5px 40px 0px rgba(23, 10, 36, 0.03), 5px 0px 40px 0px rgba(23, 10, 36, 0.03), -5px 0px 40px 0px rgba(23, 10, 36, 0.03), 0px -5px 40px 0px rgba(23, 10, 36, 0.03);
  background-image: url(../img/v2/footer-form-1.png), url(../img/v2/footer-form-2.png);
  background-position: left bottom -100px, right top -180px;
  background-repeat: no-repeat;
}

.contact-form {
  border: none;
  background-color: var(--tertiary-color);
}

.contact-form h4 {
  color: var(--text-secondary-color);
}

.contact-form label {
  color: var(--text-secondary-color);
  opacity: 0.5;
}

.contact-form .form-control {
  border-color: var(--primary-color);
  color: var(--text-secondary-color);
}

.contact-form .form-control::-webkit-input-placeholder {
  color: var(--secondary-gray)
}

.contact-form .form-control::-moz-placeholder {
  color: var(--secondary-gray)
}

.contact-form .form-control:-ms-input-placeholder {
  color: var(--secondary-gray)
}

.contact-form .form-control::-ms-input-placeholder {
  color: var(--secondary-gray)
}

.contact-form .form-control::placeholder {
  color: var(--secondary-gray)
}

.contact-form .form-control:focus::-webkit-input-placeholder {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  color: var(--text-primary-color);
}

.contact-form .form-control:focus::-moz-placeholder {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  color: var(--text-primary-color);
}

.contact-form .form-control:focus:-ms-input-placeholder {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  color: var(--text-primary-color);
}

.contact-form .form-control:focus::-ms-input-placeholder {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  color: var(--text-primary-color);
}

.contact-form .form-control:focus,
.contact-form .form-control:focus::placeholder {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  color: var(--text-primary-color);
}

.btn-submit {
  border-color: var(--primary-color);
  color: var(--text-secondary-color);
}

.btn-submit:hover {
  color: var(--text-secondary-color);
  border-color: var(--secondary-color);
}

/*--------------------------------------------------------------
#   Footer
--------------------------------------------------------------*/
.get-in-touch-content h2 {
  color: var(--text-secondary-color);
}

.get-in-touch-content .secondary-custom-button {
  color: var(--text-secondary-color);
  border-color: var(--primary-color);
}

.get-in-touch-content .secondary-custom-button:hover {
  background-color: var(--primary-color);
  color: var(--text-primary-color);
}