/* ================ VARIABLES ================ */
:root {
    --primary: #fa28d5;
    --secondary: #0a263d;
    --transition: 0.3s ease-in-out;
}

/* ================ FONTS ================ */
* {
      font-family: "Poppins", sans-serif;
}

/* ================ COLORS ================ */

.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.bg-primary {
    background-color: var(--primary);
}

.bg-secondary {
    background-color: var(--secondary);
}

/* ================ BUTTONS ================ */

.btn-primary {
    background-color: var(--primary);
    padding: 10px 30px;
    color: #ffffff;
    transition: 0.3s ease-in-out;
}

.btn-primary:hover {
    background-color: #ffffff;
    color: #000000;
}

.btn-white {
    background-color: #ffffff;
    padding: 10px 30px;
    color: #000000;
    transition: 0.3s ease-in-out;
}

.btn-white:hover {
    background-color: var(--primary);
    color: #ffffff;
}

/* ================ LINKS ================ */

.link-header {
    color: #ffffff;
    text-decoration: none;
    background-image: linear-gradient(#ffffff, #ffffff);
    background-size: 0% 0.1em;
    background-position-y: 100%;
    background-position-x: 100%;
    background-repeat: no-repeat;
    transition: background-size var(--transition);
}

.link-header:hover,
.link-header:focus,
.link-header:active {
    background-size: 100% 0.1em;
    background-position-x: 0%;
}

.link-header-dark {
    color: #3a3a3a;
    text-decoration: none;
    background-image: linear-gradient(#3a3a3a, #3a3a3a);
    background-size: 0% 0.1em;
    background-position-y: 100%;
    background-position-x: 100%;
    background-repeat: no-repeat;
    transition: background-size var(--transition);
}

.link-header-dark:hover,
.link-header-dark:focus,
.link-header-dark:active {
    background-size: 100% 0.1em;
    background-position-x: 0%;
}

/* ================ CONTENT ================ */

.content-box p {
    text-align: justify;
}

.content-box h1 {
    font-size: 28px;
    margin-bottom: 15px;
}

.content-box h2 {
    font-size: 24px;
    margin-bottom: 12px;
    margin-top: 15px;

}

.content-box h3 {
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 15px;

}

.content-box h4 {
    font-size: 18px;
    margin-bottom: 8px;
}

.content-box h5 {
    font-size: 16px;
    margin-bottom: 6px;
}

.content-box h6 {
    font-size: 14px;
    margin-bottom: 4px;
}

.content-box ol,
.content-box ul {
    margin-bottom: 15px;
}

.content-box ol {
    list-style-type: decimal;
}

.content-box ul {
    list-style-type: disc;
}

.content-box li {
    margin-left: 20px;
}

.content-box ul ul,
.content-box ol ol,
.content-box ul ol,
.content-box ol ul {
    margin-left: 20px;
}

/* ================ COOKIE YES ================ */

.cky-revisit-bottom-left {
    bottom: 15px;
    right: 15px;
    left: auto !important;
}

/* ================ ANIMATION ================ */

.hero-zoom {
    animation: heroZoom 12s ease-in-out infinite;
}

@keyframes heroZoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}