/*---------------------------------------------------------------
  Template Name: PetKing | One Page Pet Store Template
  Description: PetKing | One Page Pet Store Template
  Author: Lucid Solutions
  Author URL: https://www.templatemonster.com/store/lucid_solutions/
  Version: 1.0.0
  -----------------------------------------------------------------
  CSS INDEX
  ==================
  1. Basic CSS
    a.  Color Variables
    b.  Background Colors
    c.  Text Colors
    d.  Border Colors
    e.  Prime Buttons
    f.  Secondary Buttons
    g.  Font Sizes

----------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Holtwood+One+SC&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

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

[data-theme="petking-light"]{

  /* bg colors */
    --header-bg: #FFDAE5;
    --body-bg: #F5F5F5;
    /* --alt-bg: #75B9BF; */
    --alt-bg: #629da2;
    --tertiary-bg: #FFFFFF;
    --input-bg: #ffffff;
    --prime-shade-bg: #ffb4cc;
    --second-shade-bg: #B1E4E9;
    --tertiary-shade-bg: #ffffffb0;
    --footer-icon-bg: #00575F;
    --footer-bg:#F6A5BD;
    --footer-copy:#5d0d25;
    --modal-headerbg:#5b9ba1;
    --modal-bodybg:#75B9BF;

  /* text-colors */
    --nav-txt: #000000;
    --header-icon: #F6A5BD;
    --prime-txt: #9e2b4f;
    --second-txt: #75B9BF;
    --heading-txt: #3A3A3A;
    --headingalt-txt: #FFFFFF;
    --subheading-txt:#3A3A3A;
    --subheadingalt-txt:#FFFFFF;
    --para-txt: #3F3F3F;
    --paraalt-txt: #FFFFFF;
    --input-txt: #000000;
    --footer-txt: #000000;
    --footer-icon: #F6A5BD;
    --footercopy-txt: #FAFAFA;

  /* RGB color */
  --prime-rgb: 158, 43, 79;
  --second-rgb: 177, 228, 233;
  --dark-rgb: 24, 24, 24;

  /* prime-btn */
    --prime-btn:#62001F;
    --prime-btn-shade:#4d021a;
    --prime-btn-text: #FFCDDD;

  /* primealt-btn */
    --primealt-btn:#62001F;
    --primealt-btn-shade:#4d021a;
    --primealt-btn-text: #FFCDDD;

  /* primeoutline-btn */
    --primeoutline-btn:#62001F;
    --primeoutline-btn-shade:#62001F;
    --primeoutline-btn-text: #FFCDDD;

  /* primeoutlinealt-btn */
    --primeoutlinealt-btn:#62001F;
    --primeoutlinealt-btn-shade:#62001F;
    --primeoutlinealt-btn-text: #FFCDDD;

  /* second-btn */
    --second-btn:#75B9BF;
    --second-btn-shade:#5d9fa5;
    --second-btn-text: #000000;

  /* secondalt-btn */
    --secondalt-btn:#62001F;
    --secondalt-btn-shade:#4d021a;
    --secondalt-btn-text: #FFCDDD;

  /* secondoutline-btn */
    --secondoutline-btn:#62001F;
    --secondoutline-btn-shade:#4d021a;
    --secondoutline-btn-text: #FFCDDD;

  /* secondoutlinealt-btn */
    --secondoutlinealt-btn:#62001F;
    --secondoutline-btn-shade:#4d021a;
    --secondoutlinealt-btn-text: #FFCDDD;

  /* border-colors */
    --prime-border: #FFCDDD;
    --second-border: #1f7279;
    --tertiary-border: #62001F;
    --input-border: #FFCDDD;

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

  /* font family*/
    --PrimaryFont: "Holtwood One SC", serif;
    --SecondaryFont: "Nunito", sans-serif;

  /* font-size */
    --fs-1: 70px;
    --fs-2: 60px;
    --fs-3: 50px;
    --fs-4: 40px;
    --fs-5: 30px;
    --fs-6: 24px;
    --fs-7: 20px;
    --fs-8: 18px;
    --fs-9: 16px;
    --fs-10: 14px;
    --fs-11: 12px;
    --fs-12: 10px;
}

[data-theme="petking-dark"]{

  /* bg colors */
    --header-bg: #50041C;
    --body-bg: #011112;
    --alt-bg: #032023;
    --tertiary-bg: #EAEAEA;
    --input-bg: #181818;
    --prime-shade-bg: #FFBAD0;
    --second-shade-bg: #C8FAFF;
    --tertiary-shade-bg: #000000;
    --footer-icon-bg: #00575F;
    --footer-bg:#620E27;
    --footer-copy:#2E0310;
    --modal-headerbg:#2E0310;
    --modal-bodybg:#620E27;

  /* text-colors */
    --nav-txt: #000000;
    --header-icon: #F6A5BD;
    --prime-txt: #E37396;
    --second-txt: #75B9BF;
    --heading-txt: #FFFFFF;
    --headingalt-txt: #FFFFFF;
    --subheading-txt:#3A3A3A;
    --subheadingalt-txt:#FFFFFF;
    --para-txt: #FFFFFF;
    --paraalt-txt: #FFFFFF;
    --input-txt: #000000;
    --footer-txt: #FFFFFF;
    --footer-icon: #620E27;
    --footercopy-txt: #FFFFFF;

  /* RGB color */
  --prime-rgb: 158, 43, 79;
  --second-rgb: 177, 228, 233;
  --dark-rgb: 24, 24, 24;

  /* prime-btn */
    --prime-btn:#62001F;
    --prime-btn-shade:#780b2e;
    --prime-btn-text: #FFCDDD;

  /* second-btn */
    --second-btn:#75B9BF;
    --second-btn-shade:#5d9fa5;
    --second-btn-text: #000000;

  /* border-colors */
    --prime-border: #FFCDDD;
    --second-border: #1f7279;
    --tertiary-border: #62001F;
    --input-border: #FFCDDD;

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

  /* font family*/
    --PrimaryFont: "Holtwood One SC", serif;
    --SecondaryFont: "Nunito", sans-serif;

  /* font-size */
    --fs-1: 70px;
    --fs-2: 60px;
    --fs-3: 50px;
    --fs-4: 40px;
    --fs-5: 30px;
    --fs-6: 24px;
    --fs-7: 20px;
    --fs-8: 18px;
    --fs-9: 16px;
    --fs-10: 14px;
    --fs-11: 12px;
    --fs-12: 10px;
}


/* Background Colors */

  .body-bg{
    background-color:var(--body-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);
  }
  .prime-shade-bg{
    fill: var(--prime-shade-bg);
  }
  .tertiary-shade-bg{
    background-color: var(--tertiary-shade-bg);
  }
  .tertiary-bg{
    background-color: var(--tertiary-bg);
  }
  .modal-headerbg{
    background-color: var(--modal-headerbg);
  }
  .modal-bodybg{
    background-color: var(--modal-bodybg);
  }

/* Text Colors */

  .nav-txt{
    color:var(--nav-txt);
  }
  .prime-txt{
    color:var(--prime-txt);
  }
  .second-txt{
    color:var(--second-txt);
  }
  .heading-txt{
    color:var(--heading-txt);
  }
  .headingalt-txt{
    color:var(--headingalt-txt);
  }
  .subhead-txt{
    color:var(--subheading-txt);
  }
  .subheadalt-txt{
    color:var(--subheadingalt-txt);
  }
  .para-txt{
    color:var(--para-txt);
  }
  .paraalt-txt{
    color:var(--paraalt-txt);
  }
  .input-txt{
    color: var(--input-txt);
  }
  .footer-txt{
    color:var(--footer-txt);
  }
  .footercopy-txt{
    color:var(--footercopy-txt);
  }
  .footer-icon{
    color: var(--footer-icon);
  }

/* 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{
    background-color: var(--prime-btn) !important;
    color: var(--prime-btn-text) !important;
    font-size: var(--fs-7) !important;
    padding: 8px 10px 8px 10px;
    border: 0px;
    min-width: 150px;
    text-transform: capitalize;
  }
  .prime-btn:hover, .prime-btn:focus, .prime-btn:active{
    background-color: var(--prime-btn-shade) !important;
    color: var(--prime-btn-text) !important;
    border: 0px !important;
  }

/* Secondary Buttons */

  .second-btn{
    background-color: var(--second-btn) !important;
    color: var(--second-btn-text) !important;
    font-size: var(--fs-7) !important;
    padding: 8px 10px 8px 10px;
    border: 0px;
    min-width: 150px;
    text-transform: capitalize;
  }
  .second-btn:hover, .second-btn:focus, .second-btn:active{
    background-color: var(--second-btn-shade) !important;
  }

/* Font Sizes */

  .fs-1{
    font-size: var(--fs-1) !important;
  }
  .fs-2{
    font-size: var(--fs-2) !important;
  }
  .fs-3{
    font-size: var(--fs-3) !important;
  }
  .fs-4{
    font-size: var(--fs-4) !important;
  }
  .fs-5{
    font-size: var(--fs-5) !important;
  }
  .fs-6{
    font-size: var(--fs-6) !important;
  }
  .fs-7{
    font-size: var(--fs-7) !important;
  }
  .fs-8{
    font-size: var(--fs-8) !important;
  }
  .fs-9{
    font-size: var(--fs-9) !important;
  }
  .fs-10{
    font-size: var(--fs-10) !important;
  }
  .fs-11{
    font-size: var(--fs-11) !important;
  }

/* Font Family */

  .primary-font{
    font-family: var(--PrimaryFont);
    letter-spacing: 2px;
  }
  .secondary-font{
    font-family: var(--SecondaryFont);
  }