/* 
-------------------------------------------------------------
VARIABLES
-------------------------------------------------------------
*/
:root {
  --skin-light-background-color: linear-gradient(
      rgba(255, 255, 255, 0.466) 100%,
      rgba(253, 8, 82, 0.219) 100%
    ),
    url("../img/background-img.png");

  --skin-light-header-color: #ffffff;
  --skin-light-content-color: #ffffff;
  --skin-light-border-color: #ffffff;
  --skin-light-active-color: SandyBrown;
  --skin-light-inactive-color: #fdc3ef;

  --border-color: rgba(113 119 144 / 25%);
  --theme-color: #f9fafb;
  --inactive-color: rgb(113 119 144 / 78%);

  --skin-light-title-color: #e49797;
  --skin-light-subtitle-color: #0000000;
  --skin-light-text-color: #000000;
  --skin-light-text-slider: #ffffff;

  --body-font: "Poppins", sans-serif;
  --hover-menu-bg: rgba(12 15 25 / 30%);
  --content-title-color: #999ba5;
  --content-bg: rgb(146 151 179 / 13%);
  --button-inactive: rgb(249 250 251 / 55%);
  --dropdown-bg: #21242d;
  --dropdown-hover: rgb(42 46 60);
  --popup-bg: rgb(22 25 37);
  --search-bg: #14162b;
  --overlay-bg: rgba(36, 39, 59, 0.3);
  --scrollbar-bg: rgb(1 2 3 / 40%);
}

/* 
-------------------------------------------------------------
GENERAL 
-------------------------------------------------------------
*/
body {
  background: var(--skin-light-background-color);
}

/*
-------------------------------------------------------------
HEADER
-------------------------------------------------------------
*/

.skin-light header nav {
  background: var(--skin-light-header-color);
}

.skin-light .navbar .logo h3 {
  color: var(--skin-light-title-color);
}

.skin-light header nav .site-title {
  color: var(--skin-light-title-color);
}

.skin-light header .navbar .navbar-brand {
  font-size: 2rem;
  font-weight: 100;
  line-height: 60px;
  position: absolute;
  top: 0;
  left: 2%;
  font-family: var(--font-family-cursive);
  color: transparent !important;
}

.skin-light header .navbar .navbar-brand.visible-title {
  color: var(--skin-light-title-color) !important;
}

/*
-------------------------------------------------------------
SLIDER
-------------------------------------------------------------
*/

.skin-light .hero-slider .swiper-button-prev,
.skin-light .hero-slider .swiper-button-next {
  border: 2px solid var(--skin-light-inactive-color);
  background: transparent;
}

.skin-light .hero-slider .swiper-button-prev:before {
  color: #d4d3d3;
}

.skin-light .hero-slider .swiper-button-next:before {
  color: #d4d3d3;
}

.skin-light .hero-slider .swiper-pagination-bullet {
  color: #000;
  background: #fff;
}

/* TITLE SUBTITLE SLIDER */

.skin-light .hero-style .slide-title h2 {
  color: var(--skin-light-text-slider);
}

.hero-style .slide-text p {
  color: var(--skin-light-text-slider);
}

.slide-bg-image::before {
  background-color: rgba(20, 16, 17, 0.5);
}

.swiper-pagination-bullet {
  background-color: white;
}

.swiper-pagination-bullet-active {
  background-color: #007aff;
}

.autoplay-progress {
  background-color: #ffffff;
}

.autoplay-progress .progressBar {
  background-color: #777777;
}

/*
-------------------------------------------------------------
CONTAINER
-------------------------------------------------------------
*/

.skin-light .content {
  background: var(--skin-light-content-color);
}

.skin-light .content .scroll-el {
  border-bottom: 5px solid var(--skin-light-active-color);
}

.skin-light .content .scroll-el .container .row {
  border: 1px solid var(--skin-light-border-color);
}

.skin-light .content .scroll-el .container .row h1,
.skin-light .content .scroll-el .container .row h2 {
  color: var(--skin-light-title-color);
}

.content .scroll-el .container .row h4 {
  color: var(--content-title-color);
}

.skin-light .content .scroll-el .container .line {
  border-right: 1.5px solid var(--skin-light-inactive-color);
}

.skin-light .content .scroll-el .container .line::before {
  background-color: var(--skin-light-inactive-color);
}

/*
-------------------------------------------------------------
SCROLL POINT
-------------------------------------------------------------
*/

.skin-light .content .scroll-control a:link,
.skin-light .content .scroll-control a:visited {
  background-color: var(--skin-light-inactive-color);
  border: 1px solid var(--skin-light-inactive-color);
}
.skin-light .content .scroll-control a:link,
.skin-light .content .scroll-control a:visited,
.skin-light .content .scroll-control a:hover,
.skin-light .content .scroll-control a:active {
  background-color: var(--skin-light-inactive-color);
}

.skin-light .content .scroll-selected {
  background-color: var(--skin-light-active-color) !important;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-bg);
}

@media only screen and (max-width: 960px) {
  .skin-light .content .scroll-el .container .line {
    border-right: 0;
  }
}

/*
-----------------------------------------------------------
 © Maicol | 2024 
-----------------------------------------------------------
*/