/*
 Theme Name:     RYNO Child Theme
 Theme URI:      http://rynoss.com/
 Description:    RYNO Child Theme
 Author:         Ryno SS - Jerad Shepherd
 Author URI:     http://www.rynoss.com
 Template:       theme-3
 Text Domain:    ryno-theme-three-child
 Version:        1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

.home-banner-cta {
  display: inline-flex;
  flex-direction: row;
  gap: 10px;
}
@media (max-width: 767px) {
  .home-banner-cta {
    flex-direction: column;
  }
}
@media (max-width: 991px) {
  .home-banner-cta {
    margin-top: 10px;
  }
}
.page-id-3716 .header--sticky {
  position: static;
}
.page-id-3716 .header--sticky.sticky-active {
  position: sticky;
}
.page-id-3716 .content-wrapper {
  margin-top: 0;
}
.page-id-3716 .header--sticky {
  position: static;
}
.home-banner-cta .btn-customize {
  position: relative !important;
  overflow: hidden !important;
}

.home-banner-cta .btn-customize .ryno-btn__label {
  position: relative;
  z-index: 3;
}

.home-banner-cta .btn-customize::before,
.home-banner-cta .btn-customize::after {
  content: "";
  position: absolute;
  top: -40%;
  width: 45px;
  height: 220%;
  transform: rotate(25deg);
  z-index: 1;
  display: block;

  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.home-banner-cta .btn-customize::before {
  left: -120px;
  animation: doubleShine1 3s infinite linear;
  display: block;
}

.home-banner-cta .btn-customize::after {
  left: -220px;
  animation: doubleShine2 3s infinite linear;
  display: block;
}

@keyframes doubleShine1 {
  0% {
    left: -120px;
  }

  100% {
    left: calc(100% + 120px);
  }
}

@keyframes doubleShine2 {
  0% {
    left: -220px;
  }

  100% {
    left: calc(100% + 220px);
  }
}
.btn-customize-secondary {
  background: rgb(224, 30, 55);
  color: rgb(255, 255, 255);
}
.btn-customize-secondary:hover {
  background: rgb(160, 23, 40);
  color: rgb(255, 255, 255);
}
.btn-customize-primary {
  background: rgb(15, 72, 128);
  color: rgb(255, 255, 255);
}
.btn-customize-primary:hover {
  background: rgb(0, 27, 53);
  color: rgb(255, 255, 255);
}
