/*---------------------------------------------------------------
   Template Name: Dazzlegold One Page Jewelry HTML Website Template
  Description: Dazzlegold One Page Jewelry HTML Website 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=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Quicksand:wght@300..700&display=swap');


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

  /* bg colors */
    --body-bg: #FFFFFF;
    --header-top-bg : #3D8480;
    --header-bg: #DFF0EC;
    --banner-bg: #eeeeee;
    --alt-bg: #DFF0EC;
    --tertiary-bg: #0A5753;
    --input-bg: #FFFFFF;
    --prime-shade-bg: #7E938E;
    --second-shade-bg: #FFFFFF;
    --footer-bg:#DFF0EC;
    --footer-copy:#3D8480;
    --card-bg:#ffff;
  

  /* text-colors */
    --header-top-txt : #FFFFFF;
    --nav-txt: #3E3E3E;
    --prime-txt: #3D8480;
    --banner-txt: #FFFFFF;
    --tertiary-txt: #FFFFFF;
    --head-txt: #3E3E3E;
    --headalt-txt: #3E3E3E;
    --para-txt: #3E3E3E;
    --paraalt-txt: #3E3E3E;
    --card-txt:#3e3e3e;
    /* --second-txt: #3E3E3E; */
    --subhead-txt:#3E3E3E;
    --subheadalt-txt:#3E3E3E;
    --input-txt: #3E3E3E;
    --header-icon: #3D8480;
    --quote-icon: #DFF0EC;
    --footer-txt: #3E3E3E;
    --footer-icon: #3D8480;
    --footercopy-txt: #ffffff;

  /* RGB color */
  --prime-rgb:61, 132, 128;
  --second-rgb: 255, 255, 255;
  --dark-rgb: 0, 0, 0;

  /* prime-btn */
    --prime-btn:#3D8480;
    --prime-btn-shade:#327A76;
    --prime-btn-text: #ffffff;
  /* primeoutline-btn */
  --prime-outline-btn:#3D8480;
  --primeoutline-btn-shade:#3D8480;
  --primeoutline-btn-text: #3E3E3E;

  /* second-btn */
    --second-btn:#ffffff;
    --second-btn-shade:#3D8480;
    --second-btn-text: #ffffff;

  /* border-colors */
    --prime-border: #3D8480;
    --second-border: #ffff;
    --input-border: #3E3E3E;
    --card-border: #3E3E3E;

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

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

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

  /* bg colors */
    --body-bg: #001817;
    --header-top-bg : #001817;
    --header-bg: #01302E;
    --banner-bg: #FFFFFF;
    --alt-bg: #01302E;
    --tertiary-bg: #001817;
    --input-bg: #051414;
    --prime-shade-bg: #7E938E;
    --second-shade-bg: #FFFFFF;
    --footer-bg:#01302E;
    --footer-copy:#001817;
    --card-bg:#051414;
  

  /* text-colors */
    --header-top-txt : #FFFFFF;
    --nav-txt: #FFFFFF;
    --prime-txt: #33DE6D;
    --banner-txt: #FFFFFF;
    --tertiary-txt: #FFFFFF;
    --head-txt: #FFFFFF;
    --headalt-txt: #FFFFFF;
    --para-txt: #FFFFFF;
    --paraalt-txt: #FFFFFF;
    --card-txt:#FFFFFF;
    /* --second-txt: #FFFFFF; */
    --subhead-txt:#FFFFFF;
    --subheadalt-txt:#FFFFFF;
    --input-txt: #FFFFFF;
    --header-icon: #3D8480;
    --quote-icon: #7E938E;
    --footer-txt: #FFFFFF;
    --footer-icon: #33DE6D;
    --footercopy-txt: #ffffff;

  /* RGB color */
  --prime-rgb:1, 29, 27;
  --second-rgb: 255, 255, 255;
  --dark-rgb: 0, 0, 0;

  /* prime-btn */
    --prime-btn:#3D8480;
    --prime-btn-shade:#327A76;
    --prime-btn-text: #ffffff;
  /* primeoutline-btn */
  --prime-outline-btn:#3D8480;
  --primeoutline-btn-shade:#3D8480;
  --primeoutline-btn-text: #FFFFFF;

  /* second-btn */
    --second-btn:#ffffff;
    --second-btn-shade:#3D8480;
    --second-btn-text: #ffffff;

  /* border-colors */
    --prime-border: #3D8480;
    --second-border: #ffff;
    --input-border: #3E3E3E;
    --card-border: #3E3E3E;

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

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


/* Background Colors */
.header-top-bg{
  background-color:var(--header-top-bg);
}
.header-bg{
  background-color:var(--header-bg);
}
.body-bg{
  background-color:var(--body-bg);
}
.alt-bg{
  background-color:var(--alt-bg);
}
.banner-bg{
  background-color:var(--banner-bg);
}
.footer-bg{
  background-color:var(--footer-bg);
}
.footer-copy{
  background-color:var(--footer-copy);
}
.input-bg{
  background-color:var(--input-bg) !important;
}
.prime-shade-bg{
  background-color: var(--prime-shade-bg);
}
.second-shade-bg{
  background-color: var(--second-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);
}
.card-bg{
  background-color: var(--card-bg);
}

/* Text Colors */
.header-top-txt{
  color: var(--header-top-txt);
}
.banner-txt{
  color: var(--banner-txt);
}
.nav-txt{
  color:var(--nav-txt);
}
.prime-txt{
  color:var(--prime-txt);
}
.second-txt{
  color:var(--second-txt);
}
.head-txt{
  color:var(--head-txt);
}
.headalt-txt{
  color:var(--headalt-txt);
}
.subhead-txt{
  color:var(--subhead-txt);
}
.subheadalt-txt{
  color:var(--subheadalt-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);
}
.card-txt{
  color: var(--card-txt);
}
.quote-icon{
  color: var(--quote-icon);
}
.tertiary-txt{
  color: var(--tertiary-txt);
}
/* 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;
}
.card-border{
  border-color: var(--card-border) !important;
}

/* Prime Buttons */

.prime-btn{
  background-color: var(--prime-btn) !important;
  color: var(--prime-btn-text) !important;
  font-size: var(--fs-7) !important;
  border: 1px solid var(--prime-btn) !important;
  text-transform: capitalize;
  padding: 10px;
  border-radius: 150px;
  min-width: 150px;
  font-weight: 500;
}
.prime-btn:hover, .prime-btn:focus, .prime-btn:active{
  background-color: var(--prime-btn-shade) !important;
  color: var(--prime-btn-text) !important;
  border: 1px solid var(--prime-btn-shade) !important;
}

.prime-outline-btn{
  background-color: transparent !important;
  color: var(--primeoutline-btn-text) !important;
  font-size: var(--fs-7) !important;
  border: 1px solid var(--prime-outline-btn);
  text-transform: capitalize;
  padding: 10px;
  border-radius: 150px;
  min-width: 150px;
  font-weight: 500;
}
.prime-outline-btn:hover, .prime-btn:focus, .prime-btn:active{
  background-color: var(--primeoutline-btn-shade) !important;
  color: var(--prime-btn-text) !important;
  border: 1px solid var(--primeoutline-btn-shade) !important;
}

/* Secondary Buttons */

.second-outline-btn{
  background-color: transparent !important;
  color: var(--second-btn-text) !important;
  font-size: var(--fs-7) !important;
  border: 1px solid var(--second-btn);
  text-transform: capitalize;
  padding: 10px;
  border-radius: 150px;
  min-width: 150px;
  font-weight: 500;
}
.second-outline-btn:hover, .second-btn:focus, .second-btn:active{
  background-color: var(--second-btn-shade) !important;
  color: var(--second-btn-text) !important;
  border: 1px solid var(--second-btn-shade) !important;
}

/* Font Family */

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