@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --shadow-s:
        inset 0 1px 2px #ffffff30,
        0 1px 2px #00000030,
        0 2px 4px #00000015;
    --shadow-m:
        inset 0 1px 2px #ffffff50,
        0 2px 4px #00000030,
        0 4px 8px #00000015;
    --shadow-l:
        inset 0 1px 2px #ffffff70,
        0 4px 6px #00000030,
        0 6px 10px #00000015;
}
/*
NEW COLOURS ARE 
Primary:    #7b3e9e Purple
Secondary:  #e07b54 Starfish
Accent:     #d99a5e Sandy
Success:    #7c8a4e Nori
Warning:    #5f2a80 Darker Purple
Info:       #f1ede5 Light Beige
*/

/* Cookies */
:root {
    --primary-darker: color-mix(in srgb, var(--color-primary), #000 15%);
    --cc-text: #222222;
    --cc-btn-primary-bg: var(--color-primary);
    --cc-btn-primary-text: var(--cc-bg);
    --cc-btn-primary-hover-bg: var(--primary-darker);
    --cc-btn-toggle-bg-on: var(--cc-btn-primary-bg);
    --cc-btn-secondary-text: var(--cc-text);
    --cc-toggle-bg-on: var(--cc-btn-primary-bg);
}
/* END Cookies */

/*
OLD COLOURS WERE THIS
Primary:    #38256D (Core Purple) was #330072
Secondary:  #0099B2 (Core Teal)
Accent:     #FCB71C (Core Gold)
Success:    #A0D5C9 (Complementary Mint)
Warning:    #E31C79 (Complementary Pink)
Info:       #8B84D7 (Complementary Violet)
*/
:root,:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
    color-scheme: "light";
    --color-base-100: oklch(100% 0 0);
    --color-base-200: oklch(98% 0 0);
    --color-base-300: oklch(95% 0 0);
    --color-base-content: oklch(21% 0.006 285.885);
    --color-primary: #7b3e9e;
    /*--color-primary: #38256D;*/
    --color-primary-content: oklch(93% 0.034 280.800);
    --color-secondary: #e07b54;
    /*--color-secondary: #0099B2;*/
    --color-secondary-content: oklch(96.6% 0.007 237.700);
    --color-accent: #d99a5e;
    /*--color-accent: #FCB71C;*/
    --color-accent-content: oklch(38% 0.063 188.416);
    --color-neutral: oklch(14% 0.005 285.823);
    --color-neutral-content: oklch(92% 0.004 282.700);
    --color-info: #f1ede5;
    /*--color-info: #8B84D7;*/
    --color-info-content: oklch(100% 0.017 271.700);
    --color-success: #7c8a4e;
    /*--color-success: #a0d5c9;*/
    --color-success-content: oklch(37% 0.077 168.94);
    --color-warning: #5f2a80;
    /*--color-warning: #FCB71C;*/
    --color-warning-content: oklch(23.4% 0 299.700);
    --color-error: #e05454;
    /*--color-error: #E31C79;*/
    --color-error-content: oklch(100% 0.105 12.094);
    --radius-selector: 0.5rem;
    --radius-field: 1rem;
    --radius-box: 0.5rem;
    --size-selector: 0.3125rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}
:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] {
    color-scheme: "dark";
    --color-base-100: oklch(14% 0.005 285.823);
    --color-base-200: oklch(27% 0.006 286.033);
    --color-base-300: oklch(37% 0.013 285.805);
    --color-base-content: oklch(96% 0.001 286.375);
    --color-primary: #330072;
    --color-primary-content: oklch(96% 0.001 286.375);
    --color-secondary: #0099B2;
    --color-secondary-content: oklch(96.6% 0.007 237.700);
    --color-accent: #FCB71C;
    --color-accent-content: oklch(38% 0.063 188.416);
    --color-neutral: oklch(87% 0.006 286.286);
    --color-neutral-content: oklch(21% 0.006 285.885);
    --color-info: #8B84D7;
    --color-info-content: oklch(100% 0.017 271.700);
    --color-success: #a0d5c9;
    --color-success-content: oklch(37% 0.077 168.94);
    --color-warning: #FCB71C;
    --color-warning-content: oklch(23.4% 0 299.700);
    --color-error: #E31C79;
    --color-error-content: oklch(100% 0.105 12.094);
    --radius-selector: 0.5rem;
    --radius-field: 1rem;
    --radius-box: 0.5rem;
    --size-selector: 0.3125rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}
.poppins, .font-logo {
    font-family: "Poppins", sans-serif;
}
body, .open-sans {
    font-family: "Open Sans", sans-serif;
}
header {
    top: 0;
    transition: top 0.2s;
}
header nav {
    white-space: nowrap;
}
header nav a:not(.logo), header nav .dropdown div[role=button] {
    line-height: 4rem;
    padding-inline: .75rem;
}
.shadow-s {
    box-shadow: var(--shadow-s);
}
.shadow-m {
    box-shadow: var(--shadow-m);
}
.shadow-l {
    box-shadow: var(--shadow-l);
}
.word {
    background-size: 300%;
    animation: animatedgradient 9s ease infinite alternate;
    opacity: 1;
    transition: opacity .4s, width 1s;
}
.font-logo {
    background: url(../img/motif.png) no-repeat;
    background-size: auto 3.5rem;
    background-position: top right;
}
.logo .font-logo {
    background-size: auto 1.75rem;
}
.font-logo.white-logo {
    filter: brightness(0) saturate(100%) invert(94%) sepia(11%) saturate(450%) hue-rotate(315deg) brightness(115%) contrast(94%);
}
.font-logo.black-logo {
    filter: brightness(0) saturate(100%);
}
.marquee-parent:hover .marquee {
    animation-play-state: paused;
}
.fade-in {
    opacity: 1;
}
.fade-out {
    opacity: 0;
}
#course-search {
    transition: background 0.2s;
}
#welcome::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/nibg.jpg) no-repeat;
    transform: rotate(180deg);
    opacity: 0.05;
    z-index: 2;
}
.swoosh {
    width: 100%;
    background: linear-gradient(90deg,var(--color-success),var(--color-accent),var(--color-secondary),var(--color-primary));
}
/* success to accent to secondary to primary */
.swoosh.alt {
    background: linear-gradient(270deg,var(--color-success),var(--color-accent),var(--color-secondary),var(--color-primary));
}
.testimonials-swiper .swiper-wrapper {
    align-items: stretch;
}
.testimonials-swiper .swiper-slide {
    height: auto;
    display: flex;
}
.testimonials-swiper .swiper-slide > .card {
    height: 100%;
    width: 100%;
}
p {
    margin-bottom: 1rem;
}


@layer components {
  .ni-btn {
    @apply btn rounded-full text-white;
  }
}


@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}