/*---------------------------------------------------------------
  Template Name: Magical-mirage One Page Magician Website Template
  Description: Magical-mirage One Page Magician Website Template
  Author: Lucid ThemesLab
  Author URL: https://www.templatemonster.com/store/lucid_themeslab/
  Version: 2.0.0
----------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&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');

/* ==================
  Color Variables
  ================== */

[data-theme="magical-mirage_light"] {
    /* bg colors */
    --header-bg: linear-gradient(to right, #024CAA, #6D00B6);
    --footer-bg: #242864;
    --dark-bg: #000;
    --dark-bg-rgb: 0, 0, 0;
    --footer-copy: linear-gradient(to right, #024CAA, #6D00B6);
    --body-bg: #FFFFFF;
    --secondary-bg: #DE9800;
    --alt-bg: #F5F9FD;
    --input-bg: #F2F5F8;
    --prime-bg: linear-gradient(to right, #024CAA, #6D00B6);
    --card-bg: #fff;
    --white-color: #fff;

    /* text-colors */
    --dark-text: #000;
    --head-text: #ffff;
    --nav-text: #ffff;
    --prime-text: #DE9800;
    --banner-text: #ffff;
    --heading-text: #00070F;
    --headingalt-text: #FAFAFA;
    --para-text: #6B6B6B;
    --paraalt-text: #FAFAFA;
    --input-text: #6B6B6B;
    --footer-text: #FAFAFA;
    --footercopy-text: #6B6B6B;
    --card-text: #000000;
    --danger-text:#ff4949;

    /* RGB color */
    --prime-rgb: 227, 177, 48; 
    --dark-rgb: 0, 0, 0;

    /* prime-btn */
    --prime-btn: #DE9800;
    --prime-btn-shade: #c38705;
    --prime-btn-text: #FAFAFA;

    /* second-btn */
    --second-btn: #FAFAFA;
    --second-btn-shade: #ffffff;
    --second-btn-text2: #000;
    --second-btn-text: #FAFAFA;

    /* border-colors */
    --prime-border: #DE9800;
    --second-border: #FAFAFA;
    --input-border: #F6F8FE;

    /* btn-radius */
    --btn-radius: 45px;

    /* font family*/
    --PrimaryFont: "Libre Baskerville", serif;
    --SecondaryFont: "Poppins", sans-serif;
}

[data-theme="magical-mirage_dark"] {
    /* bg colors */
    --header-bg: linear-gradient(to right, #024CAA, #6D00B6);
    --footer-bg: #242864;
    --dark-bg: #000;
    --dark-bg-rgb: 0, 0, 0;
    --footer-copy: linear-gradient(to right, #024CAA, #6D00B6);
    --body-bg: #060D27;
    --secondary-bg: #DE9800;
    --alt-bg: #0F1A34;
    --input-bg: #0F1A34;
    --prime-bg: linear-gradient(to right, #024CAA, #6D00B6);
    --card-bg: #132A46;
    --white-color: #fff;

    /* text-colors */
    --dark-text: #000;
    --head-text: #ffff;
    --nav-text: #ffff;
    --prime-text: #DE9800;
    --banner-text: #ffff;
    --heading-text: #ffff;
    --headingalt-text: #FAFAFA;
    --para-text: #ffff;
    --paraalt-text: #FAFAFA;
    --input-text: #ffff;
    --footer-text: #FAFAFA;
    --footercopy-text: #ffff;
    --card-text: #ffff;
    --danger-text:#ff4949;

    /* RGB color */
    --prime-rgb: 227, 177, 48; 
    --dark-rgb: 0, 0, 0;

    /* prime-btn */
    --prime-btn: #DE9800;
    --prime-btn-shade: #c38705;
    --prime-btn-text: #FAFAFA;

    /* second-btn */
    --second-btn: #FAFAFA;
    --second-btn-shade: #ffffff;
    --second-btn-text2: #000;
    --second-btn-text: #FAFAFA;

    /* border-colors */
    --prime-border: #DE9800;
    --second-border: #FAFAFA;
    --input-border: #F6F8FE;

    /* btn-radius */
    --btn-radius: 45px;

    /* font family*/
    --PrimaryFont: "Libre Baskerville", serif;
    --SecondaryFont: "Poppins", sans-serif;
}


/* Background Colors */

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

.header-bg {
    background-image: var(--header-bg);
}

.prime-bg {
    background-image: var(--prime-bg);
}

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

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

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

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

.footer-copy {
    background-image: var(--footer-copy);
}

.input-bg {
    background-color: var(--input-bg) !important;
}

.card-bg {
    background-color: var(--card-bg) !important;
}

/* Text Colors */

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

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

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

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

.heading-text {
    color: var(--heading-text) !important;
}

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

.subhead-text {
    color: var(--subheading-text);
}

.subheadalt-text {
    color: var(--subheadingalt-text);
}

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

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

.input-text {
    color: var(--input-text) !important;
}

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

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

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

/* Border Colors */

.prime-border {
    border-color: var(--prime-border) !important;
}

.second-border {
    border-color: var(--second-border) !important;
}

.input-border {
    border-color: var(--input-border) !important;
}

/* Prime Buttons */

.prime-btn {
    border: 1px solid var(--prime-btn) !important;
    background-color: var(--prime-btn) !important;
    color: var(--prime-btn-text) !important;
    font-size: var(--fs-7) !important;
    padding: 15px 30px;
    text-transform: capitalize;
}

.prime-btn:hover,
.prime-btn:focus,
.prime-btn:active {
    border: 1px solid var(--prime-btn-shade) !important;
    background-color: var(--prime-btn-shade) !important;
    color: var(--prime-btn-text) !important;
}

.primeoutline-btn {
    border: 1px solid var(--second-border) !important;
    color: var(--prime-btn-text) !important;
    font-size: var(--fs-7) !important;
    padding: 15px 30px !important;
    text-transform: capitalize;
}

.primeoutline-btn:hover,
.primeoutline-btn:focus,
.primeoutline-btn:active {
    border: 1px solid var(--prime-btn) !important;
    background-color: var(--prime-btn) !important;
    color: var(--prime-btn-text) !important;
}

/* Secondary Buttons */

.second-btn {
    color: var(--second-btn-text) !important;
    font-size: var(--fs-7) !important;
    padding: 15px 30px !important;
    border-color: var(--second-btn);
    text-transform: capitalize;
}

.second-btn:hover,
.second-btn:focus,
.second-btn:active {
    background-color: var(--second-btn-shade) !important;
    color: var(--second-btn-text2) !important;
}

/* Font Family */

.primary-font {
    font-family: var(--PrimaryFont);
}

.secondary-font {
    font-family: var(--SecondaryFont);
}