/* Custom Theme Koriphey Online HEAD v0.1.14 (2026-03-21) */

/* Source: custom-design-tokens.css */
:root {
/* Colors */
--theme-color-primary: #0085FF;
--theme-color-primary-hover: #0060B8;
--theme-color-primary-dark: #19355A;
--theme-color-primary-light: #BFE3FF99;
--theme-color-text: #4A5463;
--theme-color-headlines: #19355A;
--theme-color-border: #DBEEFF;
--theme-color-danger: #EF4444;
--theme-color-success: #10B981;
--theme-color-black: #000000;
--theme-color-bg: #F3F8FA;
--theme-color-accent: var(--theme-color-primary);
--theme-overlay-bg: #52acc8ca;

/* Typography */
--theme-font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--theme-font-size-base: 16px;
--theme-line-height-base: 1.6;

/* Buttons */
--theme-btn-primary-bg: var(--theme-color-primary);
--theme-btn-primary-hover-bg: var(--theme-color-primary-hover);
--theme-btn-text: #ffffff;

/* Links */
--theme-link-color: var(--theme-color-primary);
--theme-link-hover-color: var(--theme-color-primary-hover);

/* UI Controls */
--theme-ui-control-size: 40px;
--theme-ui-control-radius: 999px;
--theme-ui-control-bg: var(--theme-color-bg);
--theme-ui-control-bg-hover: var(--theme-color-primary-light);
--theme-ui-control-color: var(--theme-color-text);
--theme-ui-control-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
--theme-ui-icon-size: 20px;
--theme-ui-icon-stroke: 2;

/* UI Dots */
--theme-ui-dot-size: 10px;
--theme-ui-dot-bg: rgba(0, 0, 0, 0.2);
--theme-ui-dot-hover-bg: rgba(0, 0, 0, 0.4);
--theme-ui-dot-active-bg: var(--theme-color-primary);

/* UI Surfaces */
--theme-ui-surface-muted: rgba(227, 228, 230, 0.2);
--theme-ui-surface-muted-hover: rgba(227, 228, 230, 0.4);

/* Slider Defaults */
--theme-slider-dot-size: var(--theme-ui-dot-size);
--theme-slider-dot-bg: var(--theme-ui-dot-bg);
--theme-slider-dot-hover-bg: var(--theme-ui-dot-hover-bg);
--theme-slider-dot-active-bg: var(--theme-ui-dot-active-bg);
--theme-slider-dots-margin: 1rem;
--theme-slider-dots-margin-mobile: 0.75rem;
--theme-slider-arrow-size: var(--theme-ui-control-size);
--theme-slider-arrow-bg: var(--theme-ui-control-bg);
--theme-slider-arrow-hover-bg: var(--theme-ui-control-bg-hover);
--theme-slider-arrow-color: var(--theme-ui-control-color);
--theme-slider-arrow-radius: var(--theme-ui-control-radius);
--theme-slider-arrow-shadow: var(--theme-ui-control-shadow);
--theme-slider-arrow-offset: 0.5rem;
--theme-slider-arrow-icon-size: var(--theme-ui-icon-size);

/* Modal Defaults */
--theme-modal-close-size: var(--theme-ui-control-size);
--theme-modal-close-bg: var(--theme-ui-control-bg);
--theme-modal-close-hover-bg: var(--theme-ui-control-bg-hover);
--theme-modal-close-color: var(--theme-ui-control-color);
--theme-modal-close-radius: var(--theme-ui-control-radius);
--theme-modal-close-icon-size: 24px;
--theme-modal-close-icon-stroke: var(--theme-ui-icon-stroke);
}

/* Source: custom-ui.css */
/* Custom Theme CSS */
:root {
--gray-lighter: #F3F8FA;
--primary-light: var(--theme-color-primary-light);
--primary: var(--theme-color-primary);
--primary-dark: var(--theme-color-primary-dark);
--magenta: #E94381;
--magenta-light: #FFDEFB99;
--orange: #FF7700;
--orange-light: #FFE2D799;
--green: #10B981;
--green-light: #BDFFD099;
--yellow: #E6EC3A;
--yellow-light: #f8ff9d99;
--teal: #02B5D0;
--teal-light: #C1F4FF99;

--theme-grid-column-gap-desktop-large: 1.5rem;
}

body {
-webkit-font-smoothing: antialiased;
}

.txt p > img,
.media-image {
height: auto;
max-width: 100%;
}

.txt p > img {
margin: 1.5rem 0;
}

.theme-slider-wrapper {
padding-bottom: 2rem;
}

.rounded .frame img {
border-radius: .75rem !important;
}

@media (max-width: 736px) {
div#site-cover {
background-image: none;
}
}

.buttons-component.style-1 {
margin-top: -2rem !important;
position: relative !important;
z-index: 10;
}

.buttons-component.style-8 a {
padding-left: .5 !important;
padding-right: .5 !important;
}

@media (min-width: 736px) {
.icon-next.right li {
position: absolute;
right: -1rem;
bottom: 2.5rem;
}
}

@media (max-width: 736px) {
.icon-next.right.down li {
transform: rotate(90deg);
}
}

.gallery-component.style-1 {
overflow: hidden;
padding-bottom: 3rem;
}

.gallery-component.style-1 .caption {
top: 2.5rem !important;
}

.video-component>.frame.with-overlay::before {
background-image: none;
}

.video-component .player.thumbnail {
opacity: 1;
}

.video-component:hover .player.thumbnail {
opacity: .8;
}

/* UTILITIES */

.blob {
background: var(--gray-lighter);
padding: calc(var(--padding-vertical) / 2) calc(var(--padding-horizontal) / 2);
border-radius: .5rem;
}

.float-left {
float: left;
margin-right: 1.5rem;
}

.overflow-hidden {
overflow: hidden;
}

/* COLORS */
.inverse li>p,
.inverse .text-component {
color: #ffffff !important;
}

.text-component.text-magenta,
.text-magenta .p,
.text-magenta .text-component {
color: var(--magenta);
}

.text-component.text-orange,
.text-orange .p,
.text-orange .text-component {
color: var(--orange);
}

.text-component.text-green,
.text-green .p,
.text-green .text-component {
color: var(--green);
}

.text-component.text-yellow,
.text-yellow .p,
.text-yellow .text-component {
color: var(--yellow);
}

.text-component.text-teal,
.text-teal .p,
.text-teal .text-component {
color: var(--teal);
}

.text-component.text-primary,
.text-primary .p,
.text-primary .text-component {
color: var(--theme-color-primary);
}

.border-magenta,
.border-magenta li>a,
.border-magenta .wrapper {
border-color: var(--magenta) !important;
}

.border-orange,
.border-orange li>a,
.border-orange .wrapper {
border-color: var(--orange) !important;
}

.border-green,
.border-green li>a,
.border-green .wrapper {
border-color: var(--green) !important;
}

.border-yellow,
.border-yellow li>a,
.border-yellow .wrapper {
border-color: var(--yellow) !important;
}

.border-teal,
.border-teal li>a,
.border-teal .wrapper {
border-color: var(--teal) !important;
}

.border-primary,
.border-primary li>a,
.border-primary .wrapper {
border-color: var(--theme-color-primary) !important;
}

.blob.background-magenta,
.background-magenta.buttons-component.style-1>li>a,
.divider-component.magenta::before,
.divider-component.border-magenta::before,
.background-magenta .wrapper {
background-color: var(--magenta) !important;
}

.blob.background-magenta-light,
.background-magenta-light.buttons-component.style-1>li>a,
.divider-component.magenta-light::before,
.divider-component.border-magenta-light::before,
.background-magenta-light .wrapper {
background-color: var(--magenta-light) !important;
}

.blob.background-orange,
.background-orange.buttons-component.style-1>li>a,
.divider-component.orange::before,
.divider-component.border-orange::before,
.background-orange .wrapper {
background-color: var(--orange) !important;
}

.blob.background-orange-light,
.background-orange-light.buttons-component.style-1>li>a,
.divider-component.orange-light::before,
.divider-component.border-orange-light::before,
.background-orange-light .wrapper {
background-color: var(--orange-light) !important;
}

.blob.background-green-light,
.background-green.buttons-component.style-1>li>a,
.divider-component.green::before,
.divider-component.border-green::before,
.background-green .wrapper {
background-color: var(--green) !important;
}

.blob.background-green-light,
.background-green-light.buttons-component.style-1>li>a,
.divider-component.green-light::before,
.divider-component.border-green-light::before,
.background-green-light .wrapper {
background-color: var(--green-light) !important;
}

.blob.background-yellow,
.background-yellow.buttons-component.style-1>li>a,
.divider-component.yellow::before,
.divider-component.border-yellow::before,
.background-yellow .wrapper {
background-color: var(--yellow) !important;
}

.blob.background-yellow-light,
.background-yellow-light.buttons-component.style-1>li>a,
.divider-component.yellow-light::before,
.divider-component.border-yellow-light::before,
.background-yellow-light .wrapper {
background-color: var(--yellow-light) !important;
}

.blob.background-teal,
.background-teal.buttons-component.style-1>li>a,
.divider-component.teal::before,
.divider-component.border-teal::before,
.background-teal .wrapper {
background-color: var(--teal) !important;
}

.blob.background-teal-light,
.background-teal-light.buttons-component.style-1>li>a,
.divider-component.teal-light::before,
.divider-component.border-teal-light::before,
.background-teal-light .wrapper {
background-color: var(--teal-light) !important;
}

.blob.background-primary,
.background-primary.buttons-component.style-1>li>a,
.divider-component.primary::before,
.divider-component.border-primary::before,
.background-primary .wrapper {
background-color: var(--theme-color-primary) !important;
}

.blob.background-primary-light,
.background-primary-light.buttons-component.style-1>li>a,
.divider-component.primary-light::before,
.divider-component.border-primary-light::before,
.background-primary-light .wrapper {
background-color: var(--primary-light) !important;
}

/*
* File: Carrd Theme UI
* Version: 0.1.12
* Purpose: Shared UI styles and utilities for Mini theme plugins.
* Admin placement: Code element in HEAD (load after theme-design-tokens.css).
*/

/* Slider dots */
.theme-slider-dot {
width: var(--theme-slider-dot-size, var(--theme-ui-dot-size, 10px));
height: var(--theme-slider-dot-size, var(--theme-ui-dot-size, 10px));
border-radius: 50%;
background: var(--theme-slider-dot-bg, var(--theme-ui-dot-bg, rgba(0, 0, 0, 0.2)));
border: none;
padding: 0;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}

.theme-slider-dot:hover {
background: var(--theme-slider-dot-hover-bg, var(--theme-ui-dot-hover-bg, rgba(0, 0, 0, 0.4)));
}

.theme-slider-dot.is-active {
background: var(--theme-slider-dot-active-bg, var(--theme-ui-dot-active-bg, var(--theme-color-primary, #EF4444)));
transform: scale(1.2);
}

/* Slider arrows */
.theme-slider-nav {
width: var(--theme-slider-arrow-size, var(--theme-ui-control-size, 40px));
height: var(--theme-slider-arrow-size, var(--theme-ui-control-size, 40px));
background: var(--theme-slider-arrow-bg, var(--theme-ui-control-bg, var(--theme-color-bg, #ffffff)));
border: none;
border-radius: var(--theme-slider-arrow-radius, var(--theme-ui-control-radius, 999px));
color: var(--theme-slider-arrow-color, var(--theme-ui-control-color, var(--theme-color-text, #5D6878)));
box-shadow: var(--theme-slider-arrow-shadow, var(--theme-ui-control-shadow, 0 2px 8px rgba(0, 0, 0, 0.15)));
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.theme-slider-nav:hover {
background: var(--theme-slider-arrow-hover-bg, var(--theme-ui-control-bg-hover, var(--theme-color-primary-light, #f5f5f5)));
}

.theme-slider-nav svg {
width: var(--theme-slider-arrow-icon-size, var(--theme-ui-icon-size, 20px));
height: var(--theme-slider-arrow-icon-size, var(--theme-ui-icon-size, 20px));
stroke: currentColor;
stroke-width: var(--theme-ui-icon-stroke, 2);
fill: none;
}

/* Modal close button */
.theme-modal-close {
width: var(--theme-modal-close-size, var(--theme-ui-control-size, 40px));
height: var(--theme-modal-close-size, var(--theme-ui-control-size, 40px));
border: none;
border-radius: var(--theme-modal-close-radius, var(--theme-ui-control-radius, 999px));
background: var(--theme-modal-close-bg, var(--theme-ui-control-bg, var(--theme-color-bg, #ffffff)));
color: var(--theme-modal-close-color, var(--theme-ui-control-color, var(--theme-color-text, #5D6878)));
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}

.theme-modal-close:hover {
background: var(--theme-modal-close-hover-bg, var(--theme-ui-control-bg-hover, var(--theme-color-primary-light, #f5f5f5)));
transform: scale(1.1);
}

.theme-modal-close svg {
width: var(--theme-modal-close-icon-size, 24px);
height: var(--theme-modal-close-icon-size, 24px);
stroke: currentColor;
stroke-width: var(--theme-modal-close-icon-stroke, var(--theme-ui-icon-stroke, 2));
fill: none;
}