/* COLORS */
html {
    --color-white: #ffffff;
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-black: #000000;
    --color-blue: #151577;
    --color-blue-10: rgb(21, 21, 119, 0.1);
    --color-blue-20: rgb(21, 21, 119, 0.2);
    --color-blue-40: rgb(21, 21, 119, 0.4);
    --color-dblue: #000F33;
    --color-orange: #FB5F07;
    --color-orange-40: rgba(251, 95, 7, 0.4);
    --color-lorange: #fd843f;
    --color-lgray: #DEE5ED;
    --color-lblue: #dee5ed;
    --color-llblue: #DAE3ED;
    --color-llblue50: rgba(218, 227, 237, 0.5);
}
/* Background colors */
.bg-white {
    background: var(--color-white);
}
.bg-white-60 {
    background: var(--color-white-60);
}
.bg-white-50 {
    background: var(--color-white-50);
}
.bg-white-40 {
    background: var(--color-white-40);
}
.bg-white-20 {
    background: var(--color-white-20);
}
.bg-white-10 {
    background: var(--color-white-10);
}
.bg-black {
    background: var(--color-black);
}
.bg-blue {
    background: var(--color-blue);
}
.bg-dblue {
    background: var(--color-dblue);
}
.bg-orange {
    background: var(--color-orange);
}
.bg-orange-40 {
    background: var(--color-orange-40);
}
.bg-lorange {
    background: var(--color-lorange);
}
.bg-lgray {
    background: var(--color-lgray);
}
body, .bg-lblue {
    background: var(--color-lblue);
}
.bg-llblue {
    background: var(--color-llblue);
}
.bg-llblue-50 {
    background: var(--color-llblue-50);
}
/* Colors */
.color-white {
    color: var(--color-white);
}
.color-white-60 {
    color: var(--color-white-60);
}
.color-white-50 {
    color: var(--color-white-50);
}
.color-white-40 {
    color: var(--color-white-40);
}
.color-white-20 {
    color: var(--color-white-20);
}
.color-white-10 {
    color: var(--color-white-10);
}
.color-black {
    color: var(--color-black);
}
.color-blue {
    color: var(--color-blue);
}
.color-blue-10 {
    color: var(--color-blue-10);
}
.color-blue-20 {
    color: var(--color-blue-20);
}
.color-blue-40 {
    color: var(--color-blue-40);
}
.color-dblue {
    color: var(--color-dblue);
}
.color-orange {
    color: var(--color-orange);
}
.color-orange-40 {
    color: var(--color-orange-40);
}
.color-lorange {
    color: var(--color-lorange);
}
.color-lgray {
    color: var(--color-lgray);
}
.color-lblue {
    color: var(--color-lblue);
}
.color-llblue {
    color: var(--color-llblue);
}
.color-llblue-50 {
    color: var(--color-llblue-50);
}
/* GRADIENTS */
.bg-container-group {
    position: relative;
    /* overflow: hidden; */
}
.bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.bg-gradient-linear {
    background: -o-linear-gradient(206.27deg, #FB5F07 10.04%, #CE4406 22.06%, #9B2B0F 34.81%, #660E1B 46.1%, #360F43 57.75%, #00005A 85.79%);
    background: linear-gradient(243.73deg, #FB5F07 10.04%, #CE4406 22.06%, #9B2B0F 34.81%, #660E1B 46.1%, #360F43 57.75%, #00005A 85.79%);
    background-size: 150% 100%;
    background-position-x: 50%;
    -webkit-animation: linearGradient 5s linear infinite;
            animation: linearGradient 5s linear infinite;
}
@-webkit-keyframes linearGradient {
    0% {
        background-position-x: 50%;
    }
    50% {
        background-position-x: 99%;
    }
    100% {
        background-position-x: 50%;
    }
}
@keyframes linearGradient {
    0% {
        background-position-x: 50%;
    }
    50% {
        background-position-x: 99%;
    }
    100% {
        background-position-x: 50%;
    }
}
.bg-gradient-radial {
    /* background: url("/wp-content/uploads/2025/07/radial_blue-scaled.jpg") no-repeat center center; */
    background: #060661;
}
.bg-split {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
@media(min-width: 992px) {
    .bg-split {
        width: 50%;
    }
}
/* Radial Gradient */
:root {
    --color: #1348b0;
    --color-2: var(--color-blue);
    --color-3: var(--color-orange);
    --color-4: var(--color-lorange);
    --blur-1-size: clamp(400px, 40vw, 50%);
    --blur-2-size: clamp(400px, 40vw, 50%);
    --blur-3-size: clamp(400px, 40vw, 50%);
    --blur-amount: clamp(40px, 10vw, 180px);
}
.rad-grad {
    position: absolute;
    z-index: 1;
    border-radius: 900px;
    -webkit-filter: blur(var(--blur-amount));
            filter: blur(var(--blur-amount));
    background: var(--color);
    background: radial-gradient(circle, var(--color) 0%, transparent 70%);
    outline: none !important;
    will-change: transform, filter;
}
.rad-grad:nth-child(1) {
    height: var(--blur-1-size);
    width: var(--blur-1-size);
}
.rad-grad:nth-child(2) {
    -webkit-filter: blur(var(--blur-amount));
            filter: blur(var(--blur-amount));
    height: calc(var(--blur-2-size) * 3);
    width: calc(var(--blur-2-size) * 3);
    top: 20vh;
    right: 20vh;
}
.rad-grad:nth-child(3) {
    -webkit-filter: blur(var(--blur-amount));
    filter: blur(var(--blur-amount));
    /* height: var(--blur-3-size);
    width: calc(var(--blur-3-size) * 2); */
    height: calc(var(--blur-1-size) * 2);
    width: calc(var(--blur-1-size) * 2);
    top: 0;
    right: 0;
}
@media(min-width: 1200px) {
    .rad-grad:nth-child(2) {
        -webkit-filter: blur(var(--blur-amount));
                filter: blur(var(--blur-amount));
        height: calc(var(--blur-2-size) * 1.5);
        width: calc(var(--blur-2-size) * 1.25);
        top: 20vh;
        right: 20vh;
    }
}
/* Radial Gradient 2 */
.rad-grad.rad-grad-2 {
    background: var(--color-2);
}
.rad-grad.rad-grad-2:nth-child(1) {
    background: var(--color-3);
}
.rad-grad.rad-grad-2:nth-child(2) {
    background: var(--color-4);
}
.rad-grad.rad-grad-2:nth-child(3) {
    background: var(--color-4);
}
/* OVERLAYS */
.overlay {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
    display: none;
}
@media(min-width: 992px) {
    .overlay {
        display: block;
    }
}
.overlay-grad-blue {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(72.4%, rgba(0, 0, 104, 0)), to(#000068));
    background: -o-linear-gradient(top, rgba(0, 0, 104, 0) 72.4%, #000068 100%);
    background: linear-gradient(180deg, rgba(0, 0, 104, 0) 72.4%, #000068 100%);
}
.overlay-blue {
    background: linear-gradient(180deg, rgba(0, 15, 53, 0) 30%, #000F35 100%);
}
@media(min-width: 1200px) {
    .overlay-blue {
        background: linear-gradient(180deg, rgba(0, 15, 53, 0) 50%, #000F35 100%);
    }
}