/*==================================================
  OFFICIAL YOGI
  THEME.CSS
  Brand Identity
==================================================*/


/*==================================================
  COLOR SYSTEM
==================================================*/

:root{

    /* Primary Colors */
    --bg:#0b0b0b;
    --section:#151515;
    --section-light:#1d1d1d;
    --card:#1f1f1f;

    /* Accent */
    --gold:#FFC107;
    --gold-hover:#ffd54f;

    /* Text */
    --white:#ffffff;
    --light:#f5f5f5;
    --grey:#bdbdbd;
    --dark-grey:#8b8b8b;

    /* Borders */
    --border:#323232;

    /* Effects */
    --shadow:0 15px 40px rgba(0,0,0,.45);
    --shadow-lg:0 25px 70px rgba(0,0,0,.55);

    /* Radius */
    --radius-sm:8px;
    --radius:16px;
    --radius-lg:24px;

    /* Transition */
    --transition:.35s ease;

}



/*==================================================
  RESET
==================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);
color:var(--white);

font-family: 'Poppins', sans-serif;

line-height:1.7;

overflow-x:hidden;

}



/*==================================================
  CONTAINER
==================================================*/

.container{

width:100%;
max-width:1200px;
margin:auto;

}



/*==================================================
  IMAGES
==================================================*/

img{

max-width:100%;
height:auto;
display:block;

}



/*==================================================
  LINKS
==================================================*/

a{

color:var(--white);

text-decoration:none;

transition:var(--transition);

}

a:hover{

color:var(--gold);

text-decoration:none;

}



/*==================================================
  TYPOGRAPHY
==================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

font-weight:700;

line-height:1.2;

margin-bottom:20px;

}

h1{

font-size:60px;

}

h2{

font-size:42px;

}

h3{

font-size:32px;

}

h4{

font-size:24px;

}

p{

margin-bottom:20px;

color:var(--grey);

font-size:18px;

}



/*==================================================
  SECTION TITLES
==================================================*/

.section-subtitle{

display:inline-block;

color:var(--gold);

text-transform:uppercase;

letter-spacing:4px;

font-size:14px;

font-weight:600;

margin-bottom:10px;

}

.section-title{

font-size:48px;

font-weight:700;

margin-bottom:20px;

}

.section-description{

max-width:760px;

margin:auto;

font-size:20px;

color:var(--grey);

}



/*==================================================
  SECTIONS
==================================================*/

section{

padding:100px 0;

}

.dark-section{

background:var(--bg);

}

.section-dark{

background:var(--section);

}

.section-light{

background:var(--section-light);

}



/*==================================================
  BUTTONS
==================================================*/

.btn{

border-radius:50px;

padding:14px 32px;

font-weight:600;

transition:var(--transition);

}

.btn-gold{

background:var(--gold);

color:#111;

border:none;

}

.btn-gold:hover{

background:var(--gold-hover);

color:#111;

transform:translateY(-2px);

}

.btn-outline-gold{

background:none;

border:2px solid var(--gold);

color:var(--gold);

}

.btn-outline-gold:hover{

background:var(--gold);

color:#111;

}



/*==================================================
  FORMS
==================================================*/

input,
textarea,
select{

width:100%;

padding:15px;

border-radius:10px;

border:1px solid var(--border);

background:#202020;

color:#fff;

margin-bottom:20px;

}

input:focus,
textarea:focus,
select:focus{

outline:none;

border-color:var(--gold);

}



/*==================================================
  LISTS
==================================================*/

ul{

padding-left:20px;

}

li{

margin-bottom:10px;

}



/*==================================================
  UTILITIES
==================================================*/

.text-white{

color:var(--white)!important;

}

.text-gold{

color:var(--gold)!important;

}

.text-grey{

color:var(--grey)!important;

}

.bg-dark{

background:var(--bg)!important;

}

.bg-section{

background:var(--section)!important;

}

.bg-card{

background:var(--card)!important;

}

.shadow{

box-shadow:var(--shadow);

}

.shadow-lg{

box-shadow:var(--shadow-lg);

}

.rounded{

border-radius:var(--radius);

}

.rounded-lg{

border-radius:var(--radius-lg);

}

.border-gold{

border:1px solid var(--gold);

}



/*==================================================
  DIVIDERS
==================================================*/

.divider{

width:80px;

height:4px;

background:var(--gold);

margin:25px auto;

border-radius:10px;

}



/*==================================================
  SELECTION
==================================================*/

::selection{

background:var(--gold);

color:#111;

}



/*==================================================
  SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#444;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--gold);

}