/*
Theme Name:     Test Child
Theme URI:      n/a
Template:       kadence
Author:         Pro Author
Author URI:     n/a
Description:    Child Theme Description
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* rotating text */
.outer-headings {display: flex; flex-direction: column; width: 100%;}

.outer-headings p {font-size: 4em; color: var(--global-palette9); z-index: 1; margin-bottom: 0; margin-left: 2em;}

.inner-headings {height: 90px; font-weight: bold; overflow: hidden; margin: 0 auto;}

.inner-headings strong {display: block; position: relative; color: #FF6945; animation: words-animation 10s infinite cubic-bezier(0.68, -0.55, 0.27, 0.55); text-align: center; font-size: 4em; line-height: 1.5}

.white {color: var(--global-palette9);  font-size: inherit;}

@keyframes words-animation {
0%, 16.67% {top: 0;}
20%, 36.67% {top: -98px;}
40%, 56.67% {top: -194px;}
60%, 76.67% {top: -290px;}
80%, 96.67% {top: -386px;}
100% {top: 0;}}


/* divider scroll */
.scroll-line-container {display: flex; justify-content: center; margin-top: 10px;}

.scroll-line {height: 80px; width: 1px; overflow: hidden;}

.scroll-line::after {content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(transparent, white, transparent); animation: scroll-line-glow 2s infinite;}

@keyframes scroll-line-glow {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(100%);}}

/* scrolling text */
.scrolling-text-container {overflow: hidden; width: 70%; rotate: -3deg;}
.one {float: right; margin: 24px 0; border-left: 1px solid rgba(0, 0, 0, 0.1);}
.two {float: left; border-right: 1px solid rgba(0, 0, 0, 0.1);}
.three {position: absolute; top: 220px; left: 40%; border-left: 1px solid rgba(0, 0, 0, 0.1);}

.scrolling-text-inner {display: flex;
white-space: nowrap; font-size: 2.5em; font-weight: bold; text-transform: uppercase; padding: 8px 0;}

.text-black-scrolling {color: var(--global-palette3);}

.text-orange-scrolling {-webkit-text-stroke: 1px var(--global-palette1); color: var(--global-palette7);}

.scrolling-text {display: flex; align-items: center;}

.scrolling-text-item {padding: 0 16px;}

.scrolling-text-inner > div {animation: var(--direction) var(--marquee-speed) linear infinite;}

@keyframes scroll-left {0% {transform: translateX(0%);} 100% {transform:translateX(-100%);}}

@keyframes scroll-right {0% {transform:translateX(-100%);}
100% {transform:translateX(0%);}}

.text-dot {width: 32px; height: 32px; background-color: var(--global-palette1); border-radius: 50%; display: flex;}


/* hover blocs */
.blocs {list-style: none; padding-left: 0 !important;}

.blocs .text-container {display: flex; position: relative; border-bottom: 2px solid rgba(255, 255, 255, 0.1); padding-top: 32px; padding-bottom: 32px; width: auto; transition: background-color 0.5s ease, padding-left 0.5s ease; overflow: hidden; text-decoration: none; align-items: center;}

.blocs .text-container:hover {padding-left: 32px}

.blocs .text-container::before {content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: var(--global-palette1); transition: width 0.5s ease; z-index: 0;}

.blocs .text-container:hover::before {width: 100%;}

.blocs .arrow {transition: margin-right 0.3s ease; display: flex;}

.blocs .arrow-svg {width: 32px; height: 14px; transition: width 0.3s ease; z-index: 1}

.blocs .text {font-size: 2rem; font-weight: bold; color: var(--global-palette9); text-align: left; width: 42rem; z-index: 1; padding-left: 32px}

.blocs .en-savoir-plus {font-size: 1em; color: var(--global-palette9); text-decoration: none; position: absolute; right: 32px; opacity: 0; transition: opacity 0.6s ease; z-index: 1;}

.blocs .text-container:hover .en-savoir-plus {opacity: 1; color: var(--global-palette9);}

/* testimonials */
.testimonials::after {content: ''; position: absolute; bottom: -29px; left: 30px; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid var(--global-palette8);}

.img-quote {transform: rotate(-15deg);}

@media only screen and (max-width: 812px) {
    .outer-headings p {font-size: 3em; line-height: 1.2; margin-left: 0;}
    
    .inner-headings {height: 114px; margin-top: 16px;}
    
    .inner-headings strong {font-size: 3em; line-height: 1.2;}
    
    @keyframes words-animation {
    0%, 16.67% {top: 0;}
    20%, 36.67% {top: -115px;}
    40%, 56.67% {top: -232px;}
    60%, 76.67% {top: -347px;}
    80%, 96.67% {top: -462px;}
    100% {top: 0;}}

.scrolling-text-container {width: 82%}

.blocs .text {font-size: 1.5rem;}

}