/*
Theme Name: BabylioPronos Theme
Theme URI: N/A
Author: Alan
Author URI: N/A
Description: Thème spécialisé au site web BabylioPronos
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, responsive-layout, accessibility-ready
Text Domain: mon-theme
*/

      .oswald {
            font-family: 'Oswald', sans-serif;
        }

        .roboto {
            font-family: 'Roboto', sans-serif;
        }

        .lato {
            font-family: 'Lato', sans-serif;
        }

        .anton {
            font-family: 'Anton', sans-serif;
        }

        .montserrat {
            font-family: 'Montserrat', sans-serif;
        }

        .robotoslap {
            font-family: 'Roboto Slab', serif;
        }

        .z-shape-btn {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 100%, calc(100% - 15px) 100%, 0 100%);
        }

        .z-shape-inverse-btn {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            clip-path: polygon(0 0%, 25px 0, 100% 0, 100% 100%, 18px 100%);
        }

        .custom {
            box-shadow: 0px 0px 10px 0px #565656;
        }

        .customtext {
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
        }

        .whitebox {
            box-shadow: 0px 0px 27px 0px rgba(255, 255, 255, 0.53);
        }

        .prev-btn {
            left: -30px;
        }

        .next-btn {
            right: -30px;
        }

        .box-vip {
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
        }

        .underline-yellow {
            position: relative;
        }
        .underline-yellow::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 2px;
            background-color: #FFC40C;
        }

        .active,
        .active>#chevron-icon,
        .active>span {
            color: #FFC40C;
        }

        .special {
            color: black;
        }
        
        .custom-gradient {
            background: linear-gradient(to bottom, #fdc620, #FFC40C, rgb(255, 198, 54), #f5b001);
        }


        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .diagonal-cut {
            clip-path: polygon(7.5% 0%, 100% 0, 93.5% 100%, 0% 100%);
        }

        @keyframes eyeAnimation {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.2);
            }
        }

        .caret-black ::placeholder {
            caret-color: black;
        }

/* WATERMARK */

.image-container {
    position: relative;
    display: inline-block;
}

.watermark-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.2);
    font-size: 25px;
    font-family: Arial, sans-serif;
    transform: rotate(-24deg);
    pointer-events: none;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.watermark-text span {
    white-space: nowrap;
    margin: 10px;
}

.image-container img {
    display: block;
    position: relative;
    z-index: 0;
}

.tik-id {
    position: absolute;
    bottom: 5px;
    left: 5px;
    color: rgba(26, 45, 57, 0.5);
    font-size: 12px;
    font-family: Arial, sans-serif;
    z-index: 2;
    pointer-events: none;
}