/*---------------------------------------------------------------
  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: 1.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 */
        --header-bg: #242864;
        --footer-bg:#242864;
        --dark-bg: #121436;
        --footer-copy:#121436;
        --body-bg: #FAFAFA;
        --tertiary-bg: #242864;
        --alt-bg: #F6F8FE;
        --input-bg: #F6F8FE;
        --prime-bg: #FF4880;
        --card-bg: #fff;

    /* text-colors */
        --head-text: #ffff; 
        --nav-text: #242864; 
        --prime-text: #FF4880;
        --banner-text: #fff;
        --heading-text: #1D2056;
        --headingalt-text: #FAFAFA; 
        --para-text: #6B6B6B;
        --paraalt-text: #FAFAFA;
        --input-text: #6B6B6B;
        --footer-text: #FAFAFA;
        --footercopy-text: #FAFAFA;

    /* RGB color */
    --prime-rgb: 227, 177, 48;
    --second-rgb: 152, 111, 4;
    --dark-rgb:18, 20, 54;

    /* prime-btn */
        --prime-btn:#FF4880;
        --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: #FF4880; 
        --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 */
            --header-bg: #242864;
            --footer-bg:#242864;
            --dark-bg: #121436;
            --footer-copy:#121436;
            --body-bg: #010410;
            --tertiary-bg: #242864;
            --alt-bg: #111227;
            --input-bg: #0E1025;
            --prime-bg: #FF4880;
            --card-bg :  #1F203E;
    
        /* text-colors */
            --head-text: #ffff; 
            --nav-text: #ffff; 
            --prime-text: #FF4880;
            --banner-text: #fff;
            --heading-text: #ffff;
            --headingalt-text: #FAFAFA; 
            --para-text: #D6D6D6;
            --paraalt-text: #FAFAFA;
            --input-text: #FAFAFA;
            --footer-text: #FAFAFA;
            --footercopy-text: #FAFAFA;
    
        /* RGB color */
        --prime-rgb: 227, 177, 48;
        --second-rgb: 152, 111, 4;
        --dark-rgb:18, 20, 54;
    
        /* prime-btn */
            --prime-btn:#FF4880;
            --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: #FF4880; 
            --second-border: #FAFAFA;
            --tertiary-border: #242864;
            --input-border: #F6F8FE;
    
        /* btn-radius */
            --btn-radius: 45px;
    
        /* font family*/
            --PrimaryFont: "Quicksand", sans-serif;
            --SecondaryFont: "Poppins", sans-serif;
        }
     

    /* Background Colors */

    .body-bg{
        background-color:var(--body-bg);
    }
    .prime-bg{
        background-color:var(--prime-bg) !important;
    }
    .tertiary-bg{
        background-color:var(--tertiary-bg);
    }
    .dark-bg{
        background-color: var(--dark-bg);
    }
    .alt-bg{
        background-color:var(--alt-bg);
    }
    .header-bg{
        background-color:var(--header-bg);
    }
    .footer-bg{
        background-color:var(--footer-bg);
    }
    .footer-copy{
        background-color: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);
    }

    /* 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);
    }