/*---------------------------------------------------------------
  Template Name: nannylance one page babysitter website template
  Description: nannylance one page babysitter website template for babysitters
  Author: Lucid Themeslab
  Author URL: https://www.templatemonster.com/store/lucid_themeslab/
  Version: 2.0.0
----------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?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&family=Quicksand:wght@300..700&display=swap');

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

[data-theme="nannylance_light"] {
    /* bg colors */
    --body-color: #FFFFFF;
    --primary-color: #f52464;
    --secondary-color: #3d4073;
    --alt-color: #F6F8FE;
    --card-color: #fff;
    --light-color:#f1f1f1;
    --white-color:#fff;
    --dark-color: #151625;
    --input-bg: #f5f6ff;
    --input-text: #000000;

    /* text-colors */
    --white-text: #ffff;
    --secondary-text: #242864;
    --prime-text: #f52464;
    --heading-text: #1D2056;
    --para-text: #6B6B6B;


    /* RGB color */
    --prime-rgb: 227, 177, 48;
    --second-rgb: 152, 111, 4;
    --dark-rgb: 61, 64, 115;

    /* prime-btn */
    --prime-btn: #f52464;
    --prime-btn-shade: #e33d6f;
    --prime-btn-text: #FAFAFA;

    /* second-btn */
    --second-btn: #242864;
    --second-btn-shade: #1c204f;
    --second-btn-text: #FAFAFA;

    /* border-colors */
    --prime-border: #f52464;
    --second-border: #FAFAFA;
    --tertiary-border: #242864;
    --input-border: #F6F8FE;

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

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

[data-theme="nannylance_dark"] {
    /* bg colors */
    --body-color: #15151a;
    --primary-color: #f52464;
    --secondary-color: #3d4073;
    --alt-color:  #272733;
    --card-color: #3a3a50;
    --light-color:#595979;
    --white-color:#fff;
    --dark-color: #151625;
    --input-bg: #5a5c7c;
    --input-text: #ffffff;

    /* text-colors */
    --white-text: #ffff;
    --secondary-text: #ffffff;
    --prime-text: #f52464;
    --heading-text: #ffffff;
    --para-text: #ffffff;

    /* RGB color */
    --prime-rgb: 227, 177, 48;
    --second-rgb: 152, 111, 4;
    --dark-rgb: 61, 64, 115;

    /* prime-btn */
    --prime-btn: #f52464;
    --prime-btn-shade: #e33d6f;
    --prime-btn-text: #FAFAFA;

    /* second-btn */
    --second-btn: #242864;
    --second-btn-shade: #1c204f;
    --second-btn-text: #FAFAFA;

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

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

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


/* Background Colors */

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

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

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

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

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

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

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

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

/* Text Colors */

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

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

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

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

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

/* Border Colors */

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

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

.tertiary-border {
    border-color: var(--tertiary-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;
    border-radius: 100px;
    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;
    border-radius: 100px;
    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 {
    background-color: var(--second-btn) !important;
    color: var(--second-btn-text) !important;
    font-size: var(--fs-7) !important;
    padding: 15px 30px !important;
    border-radius: 100px;
    text-transform: capitalize;
}

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

/* Font Family */

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

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