/**
Theme Name: bedoott
Author: GC x Duplex
Author URI: duplexcreativity.com
Description: Child theme for bedoott
Version: 1
Text Domain: bedoott
Template: astra
*/

/* ============================
   GLOBAL STYLES
============================ */

html {
  scroll-behavior: smooth;
}

/* ============================
   COLOR THEMES
============================ */
.hero          { --accent-color: #F28F6D; }
.people        { --accent-color: #B1D5D5; }
.time          { --accent-color: #F7BCA7; }
.activity      { --accent-color: #F9ECAE; }
.engagement    { --accent-color: #B1D5D5; }
.talent        { --accent-color: #CFAFB9; }
.rewards       { --accent-color: #E3E7AB; }
.management    { --accent-color: #D0E3E3; }
.prm           { --accent-color: #7DBAB9; }

/* ============================
   ACCENT BACKGROUND ANIMATION
============================ */
.accent-bg {
  display: inline-block;
  isolation: isolate;
  line-height: 27px;
  max-width: 100%;
  padding: 0 10px;
  position: relative;
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
  z-index: 0;
  border-radius: 19px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.accent-bg::before {
  animation: fill-bg 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: var(--accent-color);
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
  z-index: -1;
}

.accent-bg > span {
  animation: fade-in 0.5s 1s forwards;
  opacity: 0;
}

/* ============================
   TAB STATES HOVER & ACTIVE
============================ */
#tab-people:hover,
#tab-people[aria-selected="true"] {
  background-color: #336084;
}

#tab-time:hover,
#tab-time[aria-selected="true"] {
  background-color: #F28F6D;
}

#tab-activity:hover,
#tab-activity[aria-selected="true"] {
  background-color: #F6DF79;
  color: #383737;
}

#tab-engagement:hover,
#tab-engagement[aria-selected="true"] {
  background-color: #7DBAB9;
  color: #383737;
}

#tab-talent:hover,
#tab-talent[aria-selected="true"] {
  background-color: #9F6175;
}

#tab-rewards:hover,
#tab-rewards[aria-selected="true"] {
  background-color: #D0D873;
  color: #383737;
}

#tab-management:hover,
#tab-management[aria-selected="true"] {
  background-color: #D0E3E3;
  color: #383737;
}

/* ============================
   CUSTOM SCROLLBAR
============================ */
::-webkit-scrollbar {
  background-color: #000;
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #336084;
  border-radius: 30px;
}

::-webkit-scrollbar-track {
  background-color: #fff;
}

/* ============================
   ANIMATED BUTTONS
============================ */
.button-animated {
  border: none;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  padding-bottom: 4px;
}

.button-animated::after {
  animation: loop-animation 1s linear infinite;
  background-color: var(--border-color);
  bottom: 0;
  content: '';
  height: 3px;
  left: 0;
  position: absolute;
  transition: width 0.1s linear;
  width: var(--border-progress);
  border-radius: 30px;
}

.button-animated:hover::after {
  width: 100%;
}

/* ============================
   EXPANDING CIRCLE BUTTON
============================ */
.btn-dyn {
  background: #fff;
  border-radius: 50px;
  height: 38px;
  position: relative;
  width: 215px;
  z-index: 1;
}

.circle {
  background: #7DBAB9;
  border: 1px solid #fff;
  border-radius: 50px;
  height: 38px;
  left: 0;
  position: absolute;
  top: 0;
  transition: 0.5s cubic-bezier(1, 0, 0.8, 1);
  width: 38px;
  z-index: 2;
}

.btn-dyn:hover .circle {
  width: 215px;
}

.arrow {
  left: 5px;
  position: absolute;
  right: 5px;
  top: 10px;
  transition: 0.5s;
}

.btn-dyn:hover .arrow {
  opacity: 0;
}

.text {
  font-size: 16px;
  font-weight: 400;
  left: 50px;
  line-height: 40px;
  position: absolute;
  top: 0;
  transition: 0.5s;
  z-index: 3;
}

.btn-dyn:hover .text {
  color: #fff;
  font-weight: 600;
  left: 35px;
}

/* ============================
   DEMO & LOGIN BUTTONS
============================ */
.demo a,
.login a {
  border: 1px solid #336084;
  border-radius: 50px;
  text-transform: none !important;
}

.demo a {
  background-color: #336084;
  color: #fff !important;
}

.demo a:hover {
  background-color: #7DBAB9;
  border-color: #7DBAB9;
}

.login a {
  color: #336084 !important;
  font-weight: 400 !important;
  margin-left: 15px !important;
}

.login a:hover {
  background-color: #336084;
  color: #fff !important;
}

/* ============================
   CUSTOM DEMO BUTTON WITH ICON
============================ */
.custom-demo-button {
  align-items: center;
  display: inline-flex;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  gap: 10px;
  text-decoration: none !important;
}

.button-text {
  background-color: #fff;
  border: 1px solid #336084;
  border-radius: 999px;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.arrow-icon {
  align-items: center;
  background-color: #fff;
  border: 1px solid #336084;
  border-radius: 100%;
  display: flex;
  height: 44px;
  justify-content: center;
  transition: all 0.3s ease;
  width: 44px;
}

.arrow-icon img {
  height: 16px;
  object-fit: contain;
  transition: all 0.3s ease;
  width: 16px;
}

.custom-demo-button:hover .button-text,
.custom-demo-button:hover .arrow-icon {
  background-color: #7DBAB9;
  color: #336084;
}

/* ============================
   PRM HOVER EFFECT
============================ */
.porque-prm {
  cursor: pointer;
}

.prm-title::before {
  background-color: #7DBAB9;
  border-radius: 50%;
  content: '';
  flex-shrink: 0;
  height: 10px;
  margin-left: -20px;
  width: 10px;
}

/* ============================
   MARQUEE ANIMATION
============================ */
.marquees {
  display: grid;
  gap: 0;
  justify-items: center;
  overflow: hidden;
  padding-top: 70px;
  width: 100%;
}

.marquee {
  color: transparent;
  cursor:none;
  margin: 0 auto;
  user-select: none;
  padding: 0;
  text-align: center;
  overflow: hidden;
  width: 100%;
  -webkit-text-stroke-color: #336084;
  -webkit-text-stroke-width: 2px;
}

.marquee--inner {
  align-items: center;
  animation: marquee-infinite var(--marquee-duration, 120s) linear infinite;
  display: flex;
  gap: 1.5em;
  width: max-content;
  transition: animation-duration 1s cubic-bezier(.4, 0, .2, 1);
}

.marquee:nth-child(2) .marquee--inner {
  animation-delay: -15s;
}

.marquee:nth-of-type(even) .marquee--inner {
  animation-direction: reverse;
}

.filled {
  color: #336084;
  transition: all 0.4s ease;
}

.filled:hover {
  color: transparent;
}

.marquee p {
  align-items: center;
  display: flex;
  font-family: "Poppins", sans-serif;
  font-size: 120px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.circle-img {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
}

.circle-img img {
  height: 178px;
  object-fit: cover;
  width: 178px;
}

.arrow-marquee-right,
.arrow-marquee-left {
  align-items: center;
  background: transparent;
  border: 1px solid #336084;
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
  height: 85px;
  justify-content: center;
  min-height: 85px;
  min-width: 85px;
  transition: all 0.4s ease;
  width: 85px;
}

.arrow-marquee-left {
  background: #336084;
}

.arrow-marquee-right img,
.arrow-marquee-left img {
  height: 33px;
  object-fit: contain;
  transition: all 0.4s ease, filter 0.4s;
  width: 33px;
}

.marquee:hover .arrow-marquee-left {
  background: #F6DF79;
}

.arrow-inverse {
  filter: brightness(0) invert(1);
  transform: scaleX(-1);
}

.marquee:hover .arrow-inverse {
  filter: none;
}

.marquee:hover .arrow-marquee-right {
  background-color: #F6DF79;
}

.marquee:hover {
  color: #336084;
}

.marquee--inner:hover {
  animation-play-state: paused;
}

/* ============================
   MEDIA QUERIES
============================ */
@media (min-width: 200px) and (max-width: 1024px) {
  .demo a,
  .login a {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  .circle-img img {
    height: 120px !important;
    width: 120px !important;
  }

  .marquee p {
    font-size: 90px !important;
  }

  .arrow-marquee-right,
  .arrow-marquee-left {
    height: 50px !important;
    min-height: 50px !important;
    min-width: 50px !important;
    width: 50px !important;
  }

  .arrow-marquee-right img,
  .arrow-marquee-left img {
    height: 23px !important;
    width: 23px !important;
  }
}