/*---------------------------------------------------------------
  Template Name: Weconnect One Page Podcast HTML Website Template
  Description: Weconnect One Page Podcast 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=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');



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

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

  /* bg colors */
    --banner-bg: #eeeeee;
    --body-bg: #ffffff;
    --alt-bg: #e9e9e9;
    --tertiary-bg: #FFFFFF;
    --input-bg: #ffffff00;
    --prime-shade-bg: #ffdbdb;
    --second-shade-bg: #dbdfff;
    --tertiary-shade-bg: #ffffffb0;
    --footer-icon-bg: #00575F;
    --footer-bg:#080808;
    --footer-copy:#000000;
    --modal-headerbg:#5b9ba1;
    --modal-bodybg:#75B9BF;

  /* text-colors */
    --nav-txt: #575757;
    --header-icon: #F6A5BD;
    --prime-txt: #b923be;
    --second-txt: #000000;
    --head-txt: #09031b;
    --headalt-txt: #09031b;
    --subhead-txt:#ffffff;
    --subheadalt-txt:#ffffff;
    --para-txt: #2b2b2b;
    --paraalt-txt: #2b2b2b  ;
    --input-txt: #3e3e3e;
    --footer-txt: #ffffff;
    --footer-icon: #ffffff;
    --footercopy-txt: #FAFAFA;

  /* RGB color */
  --prime-rgb:15, 4, 50;
  --second-rgb: 177, 228, 233;
  --dark-rgb: 24, 24, 24;

  /* prime-btn */
    --prime-btn:#0f0432;
    --prime-btn-shade:#1b0a52;
    --prime-btn-text: #ffffff;


  /* second-btn */
    --second-btn:#2e187a;
    --second-btn-shade:#3b209d;
    --second-btn-text: #ffffff;

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

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

  /* font family*/
    --PrimaryFont: "Roboto", sans-serif;
    --SecondaryFont: "Raleway", 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="weconnect-dark"]{

  /* bg colors */
    --banner-bg: #79a3ac;
    --body-bg: #6f8b91;
    --alt-bg: #44646a;
    --tertiary-bg: #acacac;
    --input-bg: #ffffff00;
    --prime-shade-bg: #fdd0ff;
    --second-shade-bg: #c7f5ff;
    --tertiary-shade-bg: #ffffffb0;
    --footer-icon-bg: #00575F;  
    --footer-bg:#214d55;
    --footer-copy:#001417;
    --modal-headerbg:#5b9ba1;
    --modal-bodybg:#75B9BF;

  /* text-colors */
    --nav-txt: #ffffff;
    --header-icon: #a171ff;
    --prime-txt: #02262e;
    --second-txt:  #0e1c1f;
    --head-txt: #000000;
    --headalt-txt: #FFFFFF;
    --subhead-txt:#000000;
    --subheadalt-txt:#FFFFFF;
    --para-txt: #000000;
    --paraalt-txt: #FFFFFF;
    --input-txt: #3e3e3e;
    --footer-txt: #ffffff;
    --footer-icon: #ffffff;
    --footercopy-txt: #FAFAFA;

  /* RGB color */
  --prime-rgb:15, 4, 50;
  --second-rgb: 177, 228, 233;
  --dark-rgb: 24, 24, 24;

  /* prime-btn */
    --prime-btn:#05262c;
    --prime-btn-shade:#083138;
    --prime-btn-text: #ffffff;


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

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

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

  /* font family*/
    --PrimaryFont: "Roboto", sans-serif;
    --SecondaryFont: "Raleway", 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);
  }
  .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);
  }

/* Text Colors */

  .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);
  }

/* 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;
    border: 0px;
    text-transform: capitalize;
    padding: 12px 35px;
    border-radius: 8px;
  }
  .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);
  }
  .secondary-font{
    font-family: var(--SecondaryFont);
  }