/* variables */
:root{
  --primary: #c85103;
  --primary-muted:#ffe1ce;
  --secondary: #e7e4dd;
  --third: #896c3c;
  --third-muted: #faf4e6;
  --fourth: #cbb498;
  --fourth-muted: #e1d6cb;
  --black:#000000;
}

/*font style sizes */


/* reset */
body,p,a,ul,li{
  margin: 0;
  padding: 0;
  text-decoration: none;
}

li{
  list-style-type: none;
}

/* base styles */

html {
  scroll-padding: 120px; /* only works in firefox and google chrome, not so well in safari */
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden; /* Prevents horizontal scrolling */
}

body{
  overflow-x: hidden;
  font-family: 'Rubik Regular';
}


/* MAIN BUTTON STYLING */
.button{
  background: none;
  border: 2px solid var(--secondary);
  color: var(--secondary);
  padding: 6px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  box-shadow: 1px 2px 3px rgba(0,0,0,0.6);
  display: inline-block;
  font-size: 1em;
}
.button:hover{
  color: #222;
  background: var(--secondary);
  border: 2px solid var(--black)
}

/* MAIN FORM STYLING */
input,textarea{
  background:var(--secondary);
  padding: 10px 16px;
  border-radius: 20px;
  border: 2px solid var(--secondary);
  color: #f2f2f2;
  font-size: 1em;
}


/* fonts */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url("assets/fonts/BricolageGrotesque-VariableFont_opsz\,wdth\,wght.ttf") format("ttf"),
}

@font-face {
  font-family: 'Kelin_Eator';
  src: url("assets/fonts/Kelin_Eator.d3c28d72f9256fab12edf8f02505.7ffdb8d1947172ccb99a5ac149101d4.ttf") format("ttf"),
}

@font-face {
  font-family: 'Gistesy';
  src: url("assets/fonts/Gistesy.ttf") format("ttf"),
}



h1,h2,h3,h4{
  color: var(--primary);
  font-family: "Kelin_Eator";
  font-weight: bold;
  line-height: 1.4em;
}

h2{
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

p{
  color: var(--black);
  line-height: 1.4em;
  font-size: 1em;
  font-family: "Bricolage Grotesque";
}


/* List items (optional styling) */
li {
  line-height: 1.4em;
  font-size: 1em;
  font-family: "Kelin_Eator";
}

h1, h3{
  font-size: 1.2em;
}
h2{
  font-size: 1.6em;
}
h4{
  font-size: 1.1em;
}
.leading{
  font-size: 1.1em;
}

/* mobile styles */
.grid{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  box-sizing: border-box;
}

/* ==========NAVIGATION STYLIING============= */
nav.site-nav{
  width: 100vw; /* full viewport width */
  margin: 0 0px;
  position: fixed; /* or fixed/sticky depending on desired behavior */
  z-index: 100; /* this is used to ensure navigation bar is on top as scrolling and hovering images sit behind the navigation as you scroll through the website */
  background:var(--primary);
  padding: 20px;
}

.nav-inner {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 3px solid var(--secondary); /* underline here */
  padding-bottom: 0px;

}

.logo-container {
  grid-column: 1/ -1;/* spans all 8 columns */
  grid: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap; /* prevent wrapping inside container */
  overflow: hidden; /* optional: hides any overflow */
}

.logo {
  height: 100px; /* adjust size as needed */
  width: auto;
  flex-shrink: 0; /* don’t let the logo shrink too much */
}

.site-nav h1{
  margin: 0;
  padding: 0;
  border: none; /* moved border to container */
  white-space: nowrap;
  font-size: clamp(0.4rem, 3vw, 1rem); /* even smaller, responsive text sizing */
  overflow: hidden;
  text-overflow: ellipsis; /* add "..." if it does overflow */
  border:none;
  color:var(--secondary);
}

.site-nav ul{
  display: none;
}

/* ==========END NAVIGATION STYLIING============= */



/* ==========VIDEO HERO STYLIING============= */
#video-hero {
  position: relative;
  width: 100%;        /* Avoids overflow issues on some devices */
  height: 40vh;       /* Try reducing from 60vh to 50vh or less */
  margin-top: 60px;   /* Matches your navbar height */
  overflow: hidden;
  background-color: var(--primary);
}
.video-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-bg {
  position: absolute;
  top: 61%;
  left: 50%;
  transform: translate(-50%, -50%); /* center the video */
  width: 100%;
  height: 100%;
}

/* Play/Pause Button Styling */
#play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--black);
  color: var(--primary);
  border: 2px solid var(--black);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 30px;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.3s ease, background 0.3s ease;
  opacity: 1; /* Visible initially */
}

#play-button:hover {
  background: var(--secondary);
  color: var(--black);
  border: 2px solid var(--black);
}

/* Mobile First - the above is good for mobile already */
@media (min-width: 960px) {
  #play-button {
    width: 90px;
    height: 90px;
    font-size: 40px;
  }
}

.hero-content {
  position: absolute;
  top: 50%; /* Centers content vertically */
  left: 50%; /* Centers content horizontally */
  transform: translate(-50%, -50%); /* Perfect centering */
  text-align: center;
  color: var(--secondary); /* White text color for contrast on video */
  background: rgba(255, 255, 255, 0.388); /* lighter fade */
  padding:10px 20px; /* softer padding */
  border-radius: 8px; /* small rounding to smooth edges */
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.hero-button {
  background: var(--third);
  border: 2px solid var(--secondary);
  color: var(--secondary);
  padding: 12px 24px;
  border-radius: 20px;
  text-transform: uppercase;
  font-size: 1.2rem;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
  text-decoration: none;
  display: inline-block;
}

.hero-button:hover {
  color: var(--black);
  background: var(--primary);
  border: 2px solid var(--black);
  margin-bottom: 0px;
}

/* ==========END VIDEO HERO STYLIING============= */

/* ==========ABOUT STYLIING============= */

#about-section {
  background:var(--primary-muted);
  position: relative;
  display: grid;
  gap: 1.5rem;
  padding: 30px 20px;
  padding-bottom: 50px;
  border-top: 6px solid var(--primary);
  border-bottom: 6px solid var(--primary);
  
}

/* MOBILE layout */
.about-heading {
  text-align: center;
  font-size: 2.5rem;
  margin: 0;
  grid-column: 1 / -1; /* Make heading span full width */
}

.about-text {
  font-family: "Bricolage Grotesque";
  text-align: left;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 750px;
  grid-column: 1 / -1; /* Make text span full width */
  color:#c85103;
  color: var(--black);
  font-family: "Bricolage Grotesque";
}

.about-text p {
  margin-bottom: 15px;
}

.about-text ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.about-text li {
  margin-bottom: 20px;
}

.image-grid {
  display: grid;
  gap: 1rem;
  grid-column: 1 / -1; /* Make image grid span full width */
}

.image-grid .large {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.small-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.small-images img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}


/* ==========END ABOUT STYLIING============= */



/* ==========THE GUIDE STYLIING============= */

#the-guide {
  position: relative;
  padding: 30px 20px;
  padding-bottom: 50px;
  display: grid;
  gap: 20px;
  background:white;
  border-bottom: 6px solid var(--third);
}

.guide-heading {
  grid-column: 1 / -1;
  font-size: 2rem;
  text-align: center;
  color:var(--third);
}

.guide-text {
  grid-column: 1 / -1;
  font-size: 1rem;
  text-align: left;
  max-width: 800px;
}

.guide-text p {
  margin-bottom: 15px;
}

.guide-text ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.guide-text li {
  margin-bottom: 20px;
}


.guide-text .hero-button {
  display: inline-block;
  margin: 20px auto 0;
  text-align: center;
}

/* Override hover margin for the #guide-button */
#guide-button:hover {
  margin-bottom: 0 !important; /* Ensure it takes precedence */
}


/* Optional: center the button horizontally */
.guide-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guide-text p {
  text-align: left;
  width: 100%;
  max-width: 600px;
}

.guide-carousel {
  grid-column: 1 / -1;
  width: 100%;
  overflow: hidden;
}

/* =====FLIP BOOK STYLING===== */

/* Wrapper for the book, centers the book on the screen */
.book-wrapper {
  padding-top: 40px;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 5 / 9;
}

/* The book itself */
.book {
  width: 100%;
  max-width: 960px; /* Maximum width for desktop */
  aspect-ratio: 3 / 4;
  position: relative;
  perspective: 1000px; /* Depth for the 3D flip effect */
}

/* Individual pages */
.page {
  width: 50%; /* Each page will occupy half of the book */
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  border: 1px solid #ccc;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
}

/* Assigning z-index based on the page's order */
.page:nth-child(1) { z-index: 10; } /* Page 1 (Cover page) */
.page:nth-child(2) { z-index: 9; } /* Page 2 */
.page:nth-child(3) { z-index: 8; } /* Page 3 */
.page:nth-child(4) { z-index: 7; } /* Page 4 */
.page:nth-child(5) { z-index: 6; } /* Page 5 */
.page:nth-child(6) { z-index: 5; } /* Page 6 */
.page:nth-child(7) { z-index: 4; } /* Page 7 */
.page:nth-child(8) { z-index: 3; } /* Page 8 */
.page:nth-child(9) { z-index: 2; } /* Page 9 */
.page:nth-child(10) { z-index: 1; } /* Page 10 (Back cover) */

/* Each page's front and back */
.page-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden; /* Prevent the back face from showing when flipped */
}

.page-content.front {
  transform: rotateY(0deg); /* Front face (normal) */
}

.page-content.back {
  transform: rotateY(180%); /* Back face (flipped) */
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
}

/* When the page is flipped */
.page.flipped .front {
  transform: rotateY(180deg); /* Flip the front face */
}

.page.flipped .back {
  transform: rotateY(0deg); /* Show the back face */
}


/* When the page is flipped */
.page.flipped {
  transform: rotateY(-180deg);
  z-index: 0 !important;
}

/* Content of the page */
.page-content {
  width: 100%;
  height: 100%;
  transform: rotateY(0deg);
  backface-visibility: hidden;
}

/* Images inside the page */
.page-content img {
  width: 100%;
  height: 100%;
  display: block;
}

/* The backface of the page, ensuring it's a solid color */

/* The backface of the page, ensures we have content on the back (image) */
.page-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/pdf_pages/background-page.png'); /* Path to the background image */
  background-size: cover; /* Ensure the image covers the entire back of the page */
  background-position: center; /* Center the background image */
  background-repeat: no-repeat; /* Prevent repeating the image */
  transform: rotateY(180deg); /* Flip the back face */
  backface-visibility: hidden; /* Hide the backface to keep it hidden when flipped */
  z-index: -1; /* Ensure the background is behind the content of the page */
}

/* Mobile first: pages take up the full width, one page per side */
@media (max-width: 960px) {
  .page {
    width: 100%; /* Make the pages full width on mobile */
    height: auto; /* Let the height adjust */
    max-width: 320px; /* Maximum width for phones */
    aspect-ratio: 3 / 4; /* Maintain 3:4 aspect ratio */
  }
}

/* For larger screens, pages will remain on the left and right */
@media (min-width: 960px) {
  .page {
    width: 100%; /* Pages will be side by side */
  }
}

/* =====END FLIP BOOK STYLING===== */


/* ==========END THE GUIDE STYLIING============= */


/* ==========END TUTORIALS STYLIING============= */
#tutorials {
  position: relative;
  padding: 30px 20px;
  padding-bottom: 50px;
  display: grid;
  gap: 20px;
  background-color: var(--third-muted);
  border-bottom: 6px solid var(--fourth);
}

.tutorials-heading {
  grid-column: 1 / -1;
  font-size: 2.5rem;
  text-align: center;
  color:var(--third)
}

.tutorials-text {
  grid-column: 1 / -1;
  font-size: 1rem;
  text-align: left;
}

.tutorials-text p {
  margin-bottom: 15px;
}

.tutorials-text ul {
  padding-left: 20px;
  margin-bottom: 5px;
}

.tutorials-text li {
  margin-bottom: 20px;
}


.tutorials-text .hero-button {
  display: inline-block;
  margin: 20px auto 0;
  text-align: center;
}

/* Optional: center the button horizontally */
.tutorials-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tutorials-text p {
  text-align: left;
  width: 100%;
  max-width: 600px;
}

.tutorials-carousel {
  grid-column: 1 / -1;
  width: 100%;
  overflow: hidden;
  align-self: center;
}

.video-container2 {
  position: relative;
  width: 100%;
  height:auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 20px;
}

.video-bg {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border: 2px solid var(--primary); /* or any color */
  box-sizing: border-box;
  }


.video-control {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Play/Pause Button Styling */

.video-control {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--black);
  color: var(--primary);
  border: 2px solid var(--black);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 30px;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.3s ease, background 0.3s ease;
  opacity: 1; /* Visible initially */
}


.video-control:hover {
  background: var(--secondary);
  color: var(--black);
  border: 2px solid var(--black);
}


/* end video carosuel styling*/

sl-carousel {
  width:100%;
  height:270px; /* or whatever height you want */
  --track-gap: 1rem;
  --slides-to-show: 1;
}

sl-carousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;  /* Ensure items span the full width */
}


sl-carousel::part(base) {
  position: relative;
}

sl-carousel::part(pagination) {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
}

sl-carousel::part(previous-button), sl-carousel::part(next-button) {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  padding: 10px;
}

sl-carousel::part(previous-button):hover, sl-carousel::part(next-button):hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* ==========END TUTORIALS STYLIING============= */


/* ==========SECTION - BOOST TIPS============= */

#boost-tips {
  padding: 30px 20px;
  padding-bottom: 50px;
  background: var(--primary-muted);
  border-bottom: 6px solid var(--primary);
}

#boost-tips h2 {
  text-align: center;
  font-size: 2.5rem;
}

#boost-tips p.leading {
  text-align: center;
  margin: 0;
}

#boost-tips h3 { 
 color:white;
 font-size: 1.2em;
}


/* UL Flip card styling */
#boost-tips ul {
  margin: 40px 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* responsive */
  gap: 40px;
  padding: 0;
  list-style: none;
  justify-items: center; /* center cards horizontally */
}

/* LI + Flip Card base */
#boost-tips li {
  padding: 0; /* override to let card handle spacing */
  text-align: center;
  grid-column: auto;
  border-radius: 12px;
  padding-top: 10px;
}

/* Flip container - make flip centered and stable */
.flip-card {
  perspective: 1000px;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
}

/* Front Flip card paragraph text */
.front-card-text {
  font-size: 1em;
  text-align: center;
}

/* Back Flip card paragraph text */
.back-card-text {
  font-size: 1em;
  text-align: center;
}

.flip-card-inner img{
  width: 150px;
  padding-top: 5px;
}

.colored-icon{
  filter: brightness(0) invert(1);
}

/* Flip mechanism - lock to container without padding trick */
.flip-card-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg); /* Default state */
  transform-style: preserve-3d;
  transition: transform 0.6s;
  top: 0;
  left: 0;
}

/* Base: No transform unless .flipped is present */
.flip-card .flip-card-inner {
  transform: rotateY(0deg);
}

/* Flip effect (Y axis, in-place) */
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* Hover flips card back to front (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .flip-card:hover .flip-card-inner {
    transform: rotateY(0deg) !important;
  }
}

/* Front/back faces */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
}

/* Specific faces */
.flip-card-front {
  background: var(--primary);
}

.flip-card-back {
  background: var(--secondary);
  color: white;
  transform: rotateY(180deg);
  border: solid 5px var(--primary);
}

/* Image styling */
.flip-card img {
  height: 50px;
  margin-bottom: 5px;
}


/* ==========END SECTION - BOOST TIPS============= */






/* ========== INSTAGRAM FEED STYLING ========== */

/* Main container */
#insta-feed {
  display: flex;
  flex-wrap: nowrap;
  margin: 0 auto;
  padding: 20px;
  max-width: 1400px;
  flex-direction: column;
  align-items: center;
}

/* Heading styling */
.insta-heading {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

/* ==========END INSTAGRAM FEED STYLIING============= */


/* Social media carousel styling  */

.carousel-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.carousel {
  width:65vw;         /* Small on mobile */
  max-width: 1000px;     /* Restrict size on desktop */
  overflow: hidden;
  background: none;
  border-radius: 10px;
  height: 700px;        /* Fixed height */
  position: relative;
  object-fit: cover;
}

.carousel-track {
  display: flex;
  transition: transform 3.0s ease-in-out;
  height: 100%;
}

.carousel-slide {
  flex: 0 0 100%; /* Mobile: one at a time */
  padding: 10px;
  height: 95%;
  background-color: var(--third-muted);
}

.carousel-slide iframe, 
.carousel-slide blockquote {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  border: none;
}

.carousel-button {
  font-size: 40px;
  background: none;
  border: none;
  color: var(--third);
  cursor: pointer;
  padding: 10px;
  transition: color 0.3s;
}

.carousel-button:hover {
  color: var(--black);
  border-radius: 4px #ffffff;
}

.carousel-button.prev {
  left: 10px;
}

.carousel-button.next {
  right: 10px;
}

/* Desktop: 4 posts side by side */
@media (min-width: 960px) {
  .carousel {
    width: 1500px;
    max-width: 90vw;
    height: 750px;        /* Fixed height */
  }

  .carousel-slide {
    flex: 0 0 25%;
  }
}


/* ========== TIKTOK FEED STYLING ========== */

/* Main container */
#tiktok-feed {
  display: flex;
  flex-wrap: nowrap;
  margin: 0 auto;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  background-color: var(--third-muted);
  border-bottom: 6px solid var(--fourth);
}

/* Heading styling */
.tiktok-heading {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: var(--third)
}

/* ==========END TIKTOK FEED STYLIING============= */

/* ==========SECTION 3 - CONTACT STYLIING============= */

#contact {
  padding: 30px 20px;
  padding-bottom: 10px;
  background: var(--primary);
}

.contact-heading {
  text-align: center;
  font-size: 2.5rem;
}

#contact h2, #contact p {
  text-align: center;
  color: var(--secondary)
}
#contact form {
  width: 80%;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
}
#contact input,#contact textarea {
  width: 100%;
  margin: 10px 0;
}
#contact textarea {
  max-width: 100%;
  height: 200px;
}
#contact .button {
  margin-top: 10px;
}

/* parts of the following css coding for a form was taken from 

    Cornman, Josh. 2018. “HTML/CSS Form (Formspree).” GitHub Gist. 2018. https://gist.github.com/joshcornman/882a16c173ecfbea699683884ce6c518.
*/

/* Centering items, font + background */

#contact_form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
}

/*label styling */ 
label {
  display: block;
  text-align:start;
  font-family: sans-serif;
}

/* form styling */

#contact-us-form {
  width: 80%;
  max-width: 400px;
  height: 60vh;
  padding: 2vh;
  border: none;
  font-family: sans-serif;
}

.contact-us-form-inputs {
  width: 60vh;
  align-items: center;
  border: none;
  font-family: sans-serif;
}

/* Input field styling */

.inputfield {
  font-family: sans-serif;
  font-size: 1.5vh;
  font-weight: bold;
  display: block;
  height: 4.5vh;
  width: 80vh;
  outline: none;
  border-radius: 1vh;
  transition: all 1s;
  border: 3px solid #66339900;
  color: #1c1c1c;
  padding-top: 0.5vh;
  padding-left: 2vh;
}

input[type="text"]:focus, input[type="email"]:focus {
  border: none;
}

/* Input message field styling */

.inputmessage {
  font-family: sans-serif;
  font-size: 1.5vh;
  width: 80vh;
  height: 15vh;
  padding:1vh;
  font-weight: bold;
  outline: none;
  border-radius: 10px;
  color: #1c1c1c;
}

#contact-us-form {
  font-size: 2vh;
  text-align: left;
  align-content: center;
  margin: 5vh;
}


#contact .hero-button{
  padding: 12px 9px;
  border-radius: 20px;
  width: 70%;
  margin: 10px 0;
}

/* ==========END SECTION 3 - CONTACT STYLIING============= */


/* ==========STICKY SIDE NAVIGATION BAR============= */ 

#side-navbar {
  position: fixed; /* Position fixed so it can slide in/out */
  top: 135px;
  left: -80px; /* Start off-screen */
  width: 65px;
  height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  z-index: 1000;
  background-color: var(--secondary);
  transition: left 0.5s ease-in-out; /* Smooth transition when sliding in/out */
}

/* Social Icons Styling */


#side-navbar .social {
  list-style: none;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
}

#side-navbar .social li {
  margin: 2px 0;
}

#side-navbar {
  border-radius: 4px solid 50%; /* Make it a circle */
  margin: 5px 0;
  padding: 3px;
}

/* Mobile-First Layout (Sticky Sidebar on Mobile) */
@media screen and (max-width: 767px) {
  #side-navbar {
    left: -70px; /* Start off-screen for mobile */
  }

  #side-navbar .social_button {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    margin: 10px 0;
  }
}

/* Media Query for Screens Above 960px (Larger Screens) */
@media screen and (min-width: 960px) {
  #side-navbar {
    left: -80px; /* Start off-screen for larger screens */
  }

  #side-navbar {
    width: 60px;
    height: 120px;
    font-size: 1.8rem;
    margin: 1px 0;
  }
}


/* ==========END STICKY SIDE BNAVIGATION BAR============= */ 




/* ==========FOOTER STYLIING============= */
footer {
  padding: 20px 20px;
  background-color: var(--secondary);
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: top center;
}

footer .grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 4px;
  box-sizing: border-box;
}
footer .copyright {
  grid-column: 2/3;
  font-size: 0.8em;
}
footer .social {
  grid-column: 7/9;
  display: flex;
  justify-content: flex-end;
}
footer li { 
  margin: 0 6px;
}

.social_button::part(base) {
  font-size: 30px;
  color:var(--primary);
}

.social_button::part(base):hover {
  font-size: 30px;
  color:var(--secondary);
  border: 1px solid var(--black);
  background: var(--primary)
}

/* ==========END FOOTER STYLIING============= */


/* small tablet styles */
@media screen and (min-width: 620px){
  #video-hero {
    position: relative;
    width: 100%;        /* Avoids overflow issues on some devices */
    height: 40vh;       /* Try reducing from 60vh to 50vh or less */
    margin-top: 60px;   /* Matches your navbar height */
    overflow: hidden;
  }
  #boost-tips{
    padding: 30px 100px;
  }
  footer{
    background-size: 20%;
  }

}

/* large tablet & laptop styles */
@media screen and (min-width: 960px){

  body{
    font-size: 18px;
  }
  .grid{
    margin: 0 auto;
    padding: 4rem;
  }
  .leading{
    margin: 20px 0;
  }


  .site-nav ul li a {
    color: var(--secondary);
    text-decoration: underline;
    line-height: 1.4em;
    font-size: 1em;
    font-family: "Kelin_Eator";
    transition: all 0.3s ease;
  }
  
  /* Hover styles */
  .site-nav ul li a:hover, 
  .site-nav ul li a:focus,
  .site-nav ul li a:active {
    color: var(--third); /* or any other hover color */
    background-color: var(--secondary); /* makes the link stand out */
    text-decoration: underline; /* keeps underline on hover */
    padding: 13px;
    padding-bottom: 40px;
  }
  
  /* Focus style override (if needed) */
  .site-nav ul li a:focus {
    outline: 2px solid var(--third); /* Example focus border */
    background-color: var(--secondary); /* You can also change background on focus */
    padding: 13px;
    padding-bottom: 40px;
  }

/* ==========NAVIGATION STYLIING============= */

  .nav-inner {
    grid-template-columns: repeat(8, 1fr);
  }

  .logo-container {
    grid-column: 1 / 5;
  }

  .logo {
    height: 100px; /* adjust size as needed */
    width: auto;
    flex-shrink: 0; /* don’t let the logo shrink too much */
  }

  .site-nav h1 {
    margin: 0;
    white-space: nowrap;
    font-size: clamp(1rem, 5vw, 0.8rem);
  }
  .site-nav ul {
    display: flex;
    grid-column: 5 / -1;
    justify-content: flex-end;
    align-self: center;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-right:30px;
  }

  .site-nav li {
    margin-left: 20px;
  }

/* ==========END NAVIGATION STYLIING============= */

/* ==========VIDEO HERO STYLIING============= */
#video-hero {
  height: auto;              /* Let it grow naturally based on video */
  aspect-ratio: 16 / 9;      /* Keep proper video ratio */
}

.video-bg {
  position: static;          /* No need to center absolutely on smaller screens */
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
}

.hero-content {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 20px 20px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero-content h1 {
  font-size: 4rem;
  margin-bottom: 30px;
}

.hero-button {
  font-size: 1.4rem;
  padding: 14px 28px;
  border: 2px solid var(--secondary);
  border-radius: 20px;

}

.hero-button:hover {
  background: var(--secondary);
  color: var(--black);
  border: 2px solid var(--black);
}


/* ==========END VIDEO HERO STYLIING============= */

/* ==========ABOUT STYLIING============= */

#about-section {
  grid-template-columns: repeat(8, 1fr); /* 8-column grid */
  align-items: center;
}

.about-heading {
  grid-column: 1 / -1; /* Still spans full width */
  text-align: center;
  margin-bottom: 2rem;
}

.about-text {
  grid-column: 1 / 5; /* LEFT side now */
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding-right: 2rem;
  padding-left: 40px;
}

.image-grid {
  grid-column: 5 / 9; /* RIGHT side now */
  align-self: center;
  padding-right: 60px;
}

.image-grid .large {
  height: 400px;
}

.small-images img {
  height: 200px;
}


/* ==========END ABOUT STYLIING============= */


/* ==========THE GUIDE STYLIING============= */

#the-guide {
  grid-template-columns: repeat(8, 1fr);
  align-items: center;

}

.guide-heading {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.guide-text {
  grid-column: 1 / 5;
  margin:0;
  align-items: flex-start;
  text-align: left;
  display: flex;
  flex-direction: column;
  padding-left: 40px;
}

.guide-text p {
  width: 100%;
}

.guide-text .hero-button {
  align-self: center;
  margin-top: 20px;
}


.book-wrapper {
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 7 / -1;
}
/* ==========END THE GUIDE STYLIING============= */




/* ==========THE TUTORIALS STYLIING============= */

#tutorials {
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
}

.tutorials-heading {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.tutorials-text {
  grid-column: 1 / 5;
  align-items: flex-start;
  text-align: left;
  display: flex;
  flex-direction: column;
  padding-left: 40px;
}

.tutorials-text p {
  width: 100%;
}

.tutorials-text .hero-button {
  align-self: center;
  margin-top: 20px;
}

.tutorials-carousel {
  grid-column: 5 / -1;
}


sl-carousel {
  width:100%;
  height:450px; /* or whatever height you want */
  --track-gap: 1rem;
  --slides-to-show: 1;
  padding-right: 60px
}

/* ==========END TUTORIALS STYLIING============= */


/* ==========BOOST TIPS STYLIING============= */

/* For screens 960px and above, switch to 4 cards in a row */
  #boost-tips ul {
    grid-template-columns: repeat(4, 1fr); /* 4 columns in row for larger screens */
  }

  /* Flip container */
.flip-card {
  width: 300px;
  height: 300px;
}

/* ==========END BOOST TIPS STYLIING============= */

/* ==========CONTACT STYLING============= */

#contact-section {
  grid-template-columns: repeat(8, 1fr); /* 8-column grid */
  align-items: center;
}

/* form styling */
#contact form {
  width: 100%;
}

.contact-us-form-inputs {
  width: 300vw;
  align-items: center;
  border: none;
}

/* Input field styling */

.inputfield {
  width: 90vh;
}


/* Input message field styling */

.inputmessage {
  font-size: 1.5vh;
  width: 200vh;
  height: 60vh;
}


/* ==========END CONTACT STYLING============= */


/* ==========FOOTER STYLIING============= */
  footer{
    background-size: 20%;
    padding: 5px 60px;
    padding-bottom: 10px;
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: top center;
  }

  #social_platforms li{
    padding: 2px;
    grid-column: span 1;
  }

  
  /* mobile styles */
  #social_platforms .grid{
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
  }
  

  footer .social {
    grid-column: 10/9;
  }
  footer li { 
    margin: 0;
  }
  
  .social_button {
    font-size: 30px;
    color:var(--primary);
    align-items: flex-start;
    padding-bottom: 5px;
  }
  
  .social_button::part(base) {
    font-size: 30px;
    color:var(--primary);
  }


  .social_button::part(base):hover {
    font-size: 30px;
    color:var(--secondary);
    border: 1px solid var(--black);
    background: var(--primary)
  }

}

/* desktop styles */
@media screen and (min-width: 1200px){

  body{
    font-size: 20px;
  }
  .site-nav{
    padding: 0;
  }
  #welcome, #portfolio, #skills, #contact{
    padding: 90px 0;
  }
  .leading{
    margin: 20px 0;
  }
  .projects a:nth-child(1){
    grid-column: 1/3;
  }
  .projects a:nth-child(2){
    grid-column: 4/6;
    padding-top: 140px;
  }
  .projects a:nth-child(3){
    grid-column: 7/9;
  }
  .projects a *{
    max-width: 100%;
    margin: 30px 0%;
  }

 sl-icon-button {
    height: 4vh;
    width:4vh;
    margin: 0 6px;
  }


}