@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Ramaraja&family=Rubik+Dirt&display=swap');

:root {
  --base-font-size: 18px;
  --base-line-height: 1.5;

  /* Typography scale using clamp*/
  --p-font-size: clamp(1rem, 1.4vw, 1.25rem);
  --h4-font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  --h3-font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  --h2-font-size: clamp(2.5rem, 3.2vw, 3.5rem);
  --h1-font-size: clamp(2.8rem, 5vw, 4.2rem);

  /* Branding */
  --primary: hsl(45, 70%, 47%);
  --primary-hover: hsl(45, 70%, 70%);
  --secondary: hsl(0, 0%, 13.3%);
  --secondary-hover: hsl(0, 0%, 20%);
  --secondary-blurred: hsl(356, 30%, 69%);
  --font-color: var(--white);

  --gray-0: #222222;
  --gray-1: #361717;
  --gray-2: #666666;
  --gray-3: #999999;
  --gray-4: #efefef;

  --white: hsl(0, 0%, 87%);

  --btn-primary: black;
  --btn-primary-hover: #666666;

  --table-padding: 1.618rem;
}

* {
  box-sizing: border-box;
  position: relative;
}

html {
  font-size: var(--base-font-size);
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Ramaraja', 'open sans', sans-serif;
  font-weight: 400;
  line-height: var(--base-line-height);
  color: var(--primary);
}

h1, .h1 {
  margin: 10px 0px;
  font-size: var(--h1-font-size);
}

h2, .h2 {
  font-size: var(--h2-font-size);
}

h3, .h3 {
  font-size: var(--h3-font-size);
}

h4, .h4 {
  font-size: var(--h4-font-size);
}

a, p, li {
  font-family: 'Inter', 'Barlow', 'open sans', sans-serif;
  font-weight: 300;
  font-size: var(--p-font-size);
  letter-spacing: 1px;
  line-height: var(--base-line-height);
  color: var(--font-color);
}
/* End of Typography */
/*Lists*/
/*BOX */
li {  
  line-height: 1.6;
}

/*Branding */ 
.btn{
    display: inline-block;
    overflow: hidden;
    font-size: 1rem;
    line-height: var(--base-line-height);
    padding:.25rem .5rem;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--white);
    color:black;
    border:0 none;
    font-family:'Inter', 'open sans', sans-serif;
    font-weight: 300;
    font-size: var(--p-font-size);
    border-radius: 4px;
}


.btn.btn-primary{
    border: 1px solid var(--white);
    background-color: transparent;
   color:var(--white);
}
.btn.btn-primary:hover{
    background-color:var(--white);
    color: black;
    transition: all 0.3s ease;
}

.btn.btn-secondary{
    border: 1px solid black;
    background-color: transparent;
    color:black;
}
.btn.btn-secondary:hover{
    background-color: black;
     color:var(--white);
    transition: all 0.3s ease;
}

.btn.btn-tertiary {
    border: 1px solid var(--primary);
    background-color: transparent;
   color:var(--primary);
}
.btn.btn-tertiary:hover {
    background-color: var(--primary);
    color:black;
    transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  line-height: 1.6;
  margin: 0;
}

main{
  background-color: black;
}

a {
  text-decoration: none;
  color: inherit;
}

/* HEADER */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  background: linear-gradient(rgba(0, 0, 0, 0.85));
  color: var(--white);
}

.social-icons {
  display: flex;
  gap: 0.25rem;
}

.social-icons a {
  color: var(--white);
  font-size: var(--h4-font-size);
}

.social-icons a:hover {
  color: var(--primary);
  font-size: var(--h4-font-size);
}

.logo {
  left: 5%;
  transform: translateX(-20%);
}


.logo {
  position: absolute;
}

.logo img {
  width: var(--h1-font-size);
  height: auto;
}

.nav-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#menu-toggle {
  color: var(--primary);
  cursor: pointer;
}

/* NAV LINKS (default for desktop + tablet) */
.nav {
  display: flex;
  gap: 0.75rem;       
}

.nav a {
  color: var(--white);
  text-decoration: none;
  padding: 0.25rem;   
}

.nav a:hover {
  color: var(--primary);
}

.nav a.active {
  color: var(--primary);
}

.menu-toggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--white);
  cursor: pointer;
  display: none; 
}

/* MOBILE STYLING */
@media (max-width: 1020px) {
  .nav {
    display: none; /* Hide menu by default */
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    flex-direction: column;
    align-items: flex-start;
    width: 200px;
    padding: 1rem;
  }

  .nav.show {
    display: flex; /* Show menu when active */
  }

  .menu-toggle {
    display: block; /* Show hamburger on mobile */
  }
}


/* FOOTER */
.footer {
  text-align: center;
  padding: 1rem;
  background: #333;
  color: var(--white);
}

.footer-social-icons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding-bottom:5px;
}

.footer-social-icons a {
  color: var(--white);
  font-size: 1.2rem;
}


@media (min-width: 1024px) {
  .nav {
    display: flex;
    flex-direction: row;
    align-items:center;
    gap:1rem;
    padding-right:1rem;
    font-size: .875rem
  }
  .menu-toggle {
    display: none;
  }
  .hero{
    height:30rem;
  }
}