/* =======================
   Global Styles and Reset
   ======================= */

:root {
  /* Brand Colors */
  --color-primary: #ff0000;
  --color-primary-dark: #380000;
  --color-text-main: #6b0000;
  --color-gradient: linear-gradient(135deg, #380000 0%, #ff0000 100%);

  /* Grays and Neutrals */
  --color-white: #fff;
  --color-black: #000;
  --color-gray-light: #bfbfbf;
  --color-gray-medium: #b3b3b3;
  --color-gray-dark: #333;
  --color-gray-shadow: rgba(174, 174, 192, 0.4);
  --color-border-shadow: rgba(255, 255, 255, 0.1);

  /* Social Media Accent Colors */
  --color-twitter: #00acee;
  --color-instagram: #c13584;
  --color-linkedin: #4875b4;
  --color-codepen: #212121;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Montserrat", sans-serif
}

html {
   font-size: 62.5%;
   scroll-behavior: smooth
}

body {
   text-align: center;
   line-height: 1.5
}

h1 {
   font-weight: 700
}

p,
a {
   font-size: 1.6rem
}

a {
   text-decoration: none
}

a:hover {
   transition: all .3s ease-in-out
}

.section-title {
   margin-bottom: 4.5rem;
   font-size: 4rem;
   text-transform: uppercase
}


@media(max-width: 37.5em) {
   .section-title {
      font-size: 2.8rem
   }
}


.dark-blue-color {
   color: var(--color-text-main)
}

.text-color-main {
   margin-left: 1rem;
   color: var(--color-text-main);
   -webkit-text-fill-color: var(--color-text-main)
}

@supports((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
   .text-color-main {
      background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-text-main) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: rgba(0, 0, 0, 0);
      color: rgba(0, 0, 0, 0)
   }
}

@media(max-width: 37.5em) {
   .text-color-main {
      margin: 0;
      background-image: none;
      -webkit-text-fill-color: var(--color-text-main);
      box-shadow: none
   }
}

/* ===== CALL TO ACTION BUTTONS ===== */
.cta-btn {
   display: inline-block;
   position: relative;
   padding: .8rem 1.6rem;
   font-weight: bold;
   line-height: 1;
   z-index: 1;
   overflow: hidden;
   border-radius: 3px;
   transition: all cubic-bezier(0.19, 1, 0.22, 1) .6s
}

.cta-btn:hover {
   box-shadow: 1.5px 1.5px 3px rgba(174, 174, 192, .4), -1px -1px 3px #fff
}

@media(max-width: 37.5em) {
   .cta-btn:hover {
      box-shadow: none
   }
}

.cta-btn::after {
   content: "";
   display: block;
   position: absolute;
   background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-text-main) 100%);
   width: 0px;
   height: 100%;
   left: 0;
   top: 0;
   z-index: -1;
   transition: all cubic-bezier(0.19, 1, 0.22, 1) .6s
}

@media(max-width: 37.5em) {
   .cta-btn::after {
      width: 0;
      height: 0;
      background-image: none
   }
}

.cta-btn--hero {
   color: var(--color-text-main);
   -webkit-text-fill-color: var(--color-text-main);
   border: 2px solid rgba(0, 0, 0, 0);
   -o-border-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-text-main) 100%);
   border-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-text-main) 100%);
   border-image-slice: 1
}

@supports((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
   .cta-btn--hero {
      background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-text-main) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: rgba(0, 0, 0, 0);
      color: rgba(0, 0, 0, 0)
   }
}

@media screen and (-ms-high-contrast: active),
screen and (-ms-high-contrast: none) {
   .cta-btn--hero {
      color: var(--color-text-main)
   }

   .cta-btn--hero:hover {
      color: #fff
   }
}

@media(max-width: 37.5em) {
   .cta-btn--hero {
      background-image: none;
      border: 2px solid var(--color-text-main);
      box-shadow: none;
      -webkit-text-fill-color: var(--color-text-main)
   }
}

.cta-btn--hero::after {
   height: 410%;
   width: 150%;
   transform: translate(-98%, -25%) rotate(45deg)
}

.cta-btn--hero:hover {
   -webkit-text-fill-color: #fff;
   text-decoration: none
}

@media(max-width: 37.5em) {
   .cta-btn--hero:hover {
      -webkit-text-fill-color: var(--color-text-main)
   }
}

.cta-btn--hero:hover::after {
   transform: translate(-9%, -25%) rotate(45deg)
}

.cta-btn--resume {
   border-radius: 0;
   color: #fff;
   background-color: #6b0000;
   border: 2px solid #fff
}

.cta-btn--resume::after {
   background: #fff
}

.cta-btn--resume:hover {
   color: var(--color-text-main);
   text-decoration: none;
   box-shadow: none
}

@media(max-width: 37.5em) {
   .cta-btn--resume:hover {
      color: #fff
   }
}

.cta-btn--resume:hover::after {
   width: 100%
}

.cta-btn--projects {
   box-shadow: inset 1px 1px 2px 2px rgba(174, 174, 192, .15), inset -2px -2px 2px rgba(255, 255, 255, .7);
   border: 2px solid rgba(0, 0, 0, 0)
}

@media(max-width: 37.5em) {
   .cta-btn--projects {
      border: none;
      box-shadow: 1.5px 1.5px 3px rgba(174, 174, 192, .4), -1px -1px 3px #fff
   }
}

.cta-btn--projects::after {
   height: 250%;
   width: 130%
}

.cta-btn--projects::after {
   transform: translate(-98%, -30%) rotate(45deg)
}

.cta-btn--projects:hover {
   box-shadow: 1.5px 1.5px 3px rgba(174, 174, 192, .4), -1px -1px 3px #fff
}

.cta-btn--projects:hover::after {
   transform: translate(-12%, -30%) rotate(45deg)
}

.footer {
   background-color: #333;
   padding: 4.8rem 0
}

.footer__text {
   font-size: 1.3rem;
   color: #b3b3b3
}

.footer__text a {
   font-size: 1.3rem;
   color: #bfbfbf;
   transition: all .2s ease-in-out;
   display: inline-block
}

.footer__text a:hover,
.footer__text a:active {
   color: var(--color-primary-dark)
}

.footer hr {
   margin: 1rem auto;
   border: 0;
   width: 50%;
   border-top: 2px solid rgba(255, 255, 255, .1)
}

.social-links {
   display: flex;
   justify-content: center
}

.social-links a {
   font-size: 3rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #fff;
   width: 5rem;
   height: 5rem;
   margin: 1.6rem 1.6rem;
   transition: all ease .2s
}

.social-links a i {
   transition: all ease-in-out .2s
}

.social-links a:hover {
   transform: scale(1.1) translateY(-2px)
}

.social-links a:hover .fa-twitter {
   color: #00acee
}

.social-links a:hover .fa-instagram {
   color: #c13584
}

.social-links a:hover .fa-linkedin {
   color: #4875b4
}

.social-links a:hover .fa-codepen {
   color: #212121
}

.back-to-top i {
   color: #fff;
   margin: 1rem 0 1.6rem;
   transition: all 200ms ease
}

.back-to-top i:hover {
   transform: translateY(-2px)
}

section {
   padding: 5rem 0rem
}

@media(max-width: 37.5em) {
   section {
      border: none;
      padding-left: 1rem;
      padding-right: 1rem
   }
}

section .row {
   display: grid;
   gap: 2rem;
   grid-template-columns: 1fr 2fr;
   grid-template-rows: 1fr;
   padding: 0 1.5rem
}

@media(max-width: 56.25em) {
   section .row {
      grid-template-columns: 1fr;
      grid-template-rows: auto
   }
}

@media(max-width: 37.5em) {
   section .row {
      padding: 0
   }
}

section .row p+p {
   margin-top: 1rem
}

section .row span {
   margin-top: 2rem
}

.container {
   width: 100%;
   padding: 0 1.5rem;
   margin: 0 auto;
   max-width: 1140px
}

@media(max-width: 75em) {
   .container {
      max-width: 960px;
      width: 100%
   }
}

@media(max-width: 56.25em) {
   .container {
      max-width: 720px;
      width: 100%;
      justify-content: center
   }
}

@media(max-width: 48em) {
   .container {
      max-width: 720px;
      width: 100%
   }
}

@media(max-width: 37.5em) {
   .container {
      max-width: 540px;
      width: 100%
   }
}

#about {
   background-color: var(--color-primary-dark);
   background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-text-main) 100%);
   color: #fff;
   height: 100%;
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
   clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
   padding-bottom: 10%
}

@media(max-width: 75em) {
   #about {
      height: 100%;
      -webkit-clip-path: none;
      clip-path: none
   }
}

#about .about-wrapper {
   grid-template-columns: 1fr 1fr
}

@media(max-width: 37.5em) {
   #about .about-wrapper {
      padding-bottom: 5rem;
      grid-template-columns: 1fr
   }
}

#about .about-wrapper__image {
   display: flex;
   height: 100%;
   align-items: center;
   justify-content: center
}

#about .about-wrapper__image img {
   max-width: 350px;
   width: 100%
}

@media(max-width: 75em) {
   #about .about-wrapper__image {
      height: 100%
   }
}

@media(max-width: 48em) {
   #about .about-wrapper__image {
      padding-bottom: 4rem
   }
}

#about .about-wrapper__info {
   display: flex;
   height: 100%;
   justify-content: center;
   flex-direction: column;
   text-align: left
}

@media(max-width: 48em) {
   #about .about-wrapper__info {
      align-items: center;
      text-align: center
   }
}

/* ===== CONTACT SECTION ===== */
#contact {
   background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-text-main) 100%);
   padding: 15rem 0 10rem 0;
   margin-top: 0rem;
   margin-bottom: -1px;
   color: #fff;
  clip-path: none;
  -webkit-clip-path: none;
}

@media(max-width: 75em) {

   /* ===== CONTACT SECTION ===== */
   #contact {
      padding: 10rem 0;
      margin-top: 0;
      -webkit-clip-path: none;
      clip-path: none
   }
}

#contact .contact-wrapper {
   margin-top: 3.2rem;
   padding: 0 2rem;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden
}

#contact .contact-wrapper__text {
   margin-bottom: 2.5rem
}

#contact .contact-wrapper__text,
#contact .contact-wrapper a {
   font-size: 2.4rem
}

@media(max-width: 37.5em) {

   #contact .contact-wrapper__text,
   #contact .contact-wrapper a {
      font-size: 2rem
   }
}

/* ===== HERO SECTION ===== */
#hero {
   min-height: 100vh;
   height: 100vh;
   display: flex;
   align-items: center;
   background: #fff;
   font-weight: 400;
   color: var(--color-text-main);
   padding: 0rem 5.6rem;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   line-height: 1.2;
   animation: hidden 1000ms linear forwards
}

@media(max-width: 56.25em) {

   /* ===== HERO SECTION ===== */
   #hero {
      justify-content: center
   }
}

@media(max-width: 37.5em) {

   /* ===== HERO SECTION ===== */
   #hero {
      padding: 0rem 1.6rem
   }
}

#hero .hero-title {
   font-size: 5.6rem;
   font-weight: 700;
   margin-bottom: 3.2rem;
   text-align: left
}

#hero .hero-title span {
   margin: 0;
   display: inline-block
}

@media(max-width: 75em) {
   #hero .hero-title {
      font-size: 4rem
   }
}

@media(max-width: 56.25em) {
   #hero .hero-title {
      font-size: 3.6rem;
      text-align: center
   }
}

@media(max-width: 37.5em) {
   #hero .hero-title {
      font-size: 3.5rem;
      line-height: 1.5
   }
}

@media(max-width: 20em) {
   #hero .hero-title {
      font-size: 2.8rem
   }
}

#hero .hero-cta {
   display: flex
}

@media(max-width: 56.25em) {
   #hero .hero-cta {
      justify-content: center
   }
}

#hero .hero-cta a {
   font-size: 2.4rem
}

@media(max-width: 37.5em) {
   #hero .hero-cta a {
      font-size: 2rem
   }
}

.scroll-down-link {
   position: absolute;
   left: 50%;
   bottom: 20px;
   transform: translateX(-50%)
}

.scroll-down {
   height: 50px;
   width: 30px;
   border: 2px solid #000;
   border-radius: 50px;
   cursor: pointer
}

.scroll-down::before,
.scroll-down::after {
   height: 10px;
   width: 10px;
   content: "";
   position: absolute;
   top: 20%;
   left: 50%;
   border: 2px solid var(--color-text-main);
   transform: translate(-50%, -100%) rotate(45deg);
   border-top: none;
   border-left: none;
   animation: scroll-down 1s ease-in-out infinite
}

.scroll-down::after {
   top: 30%;
   animation-delay: .3s
}

@keyframes hidden {
   0% {
      opacity: 0
   }

   50% {
      opacity: 0
   }

   100% {
      opacity: 1
   }
}

@keyframes scroll-down {
   0% {
      opacity: 0
   }

   30% {
      opacity: 1
   }

   60% {
      opacity: 1
   }

   100% {
      opacity: 0;
      top: 90%
   }
}

/* ===== LESSONS/PROJECTS SECTION ===== */
#projects {
   background-color: #e5e5e5;
   color: var(--color-text-main);
   margin-top: -15rem;
   padding-top: 15rem;
}

@media(max-width: 75em) {

   /* ===== LESSONS/PROJECTS SECTION ===== */
   #projects {
      margin-top: 0;
      padding-top: 5rem
   }
}

@media(max-width: 37.5em) {

   /* ===== LESSONS/PROJECTS SECTION ===== */
   #projects {
      padding-bottom: 1px
   }
}

#projects .project-wrapper {
   margin-bottom: 15rem
}

@media(max-width: 37.5em) {
   #projects .project-wrapper {
      margin-bottom: 0rem
   }
}

#projects .project-wrapper .row {
   margin: 0;
   margin-bottom: 8rem
}

@media(max-width: 37.5em) {
   #projects .project-wrapper .row {
      margin-bottom: 4rem
   }
}

#projects .project-wrapper__text {
   width: 100%;
   text-align: left
}

@media(max-width: 75em) {
   #projects .project-wrapper__text {
      margin-bottom: 4.8rem
   }
}

@media(max-width: 37.5em) {
   #projects .project-wrapper__text {
      margin-bottom: 2.5rem
   }
}

#projects .project-wrapper__text-title {
   font-weight: bold;
   margin-bottom: 1.8rem;
   font-size: 2.5rem
}

@media(max-width: 37.5em) {
   #projects .project-wrapper__text-title {
      font-size: 2rem
   }
}

#projects .project-wrapper__text-info {
   margin-bottom: 1.5rem
}

#projects .project-wrapper__text-btns {
   width: 100%;
   display: flex;
   align-items: center;
   flex-wrap: wrap
}

#projects .project-wrapper__image {
   width: 90%;
   margin: 0 auto
}

@media(max-width: 75em) {
   #projects .project-wrapper__image {
      width: 100%;
      margin: 0
   }
}

#projects .project-wrapper__image .thumbnail {
   border: none;
   box-shadow: 8px 8px 9px 7px rgba(174, 174, 192, .4), -5px -5px 15px 7px #fff
}

#projects .project-wrapper__image .thumbnail .img-fluid {
   width: 100%;
   height: auto;
   vertical-align: middle;
   border-radius: 2px
}

@media(max-width: 37.5em) {
   #projects .project-wrapper__image .thumbnail {
      box-shadow: none;
      border: 1px solid #d2d2d2;
      margin-bottom: 3.2rem;
      transform: none
   }
}

.search-container {
  max-width: 600px;
  margin: 3rem auto 3rem auto;
  text-align: left;
  padding: 0 1rem;
}

.search-input-wrapper {
  position: relative;
  width: 100%;
}

.search-result-class {
  display: block;
  font-size: 1.4rem;
  color: #666;
  margin-top: 0.2rem;
}

#lessonSearch {
  width: 100%;
  padding: 1rem 3rem 1rem 1rem; /* extra right-padding for the clear button */
  font-size: 1.6rem;
  border: 2px solid var(--color-text-main);
  border-radius: 6px;
}

#searchResults {
  list-style: none;
  margin-top: 1rem;
  padding: 0;
  max-height: 250px;            /* Limit the height */
  overflow-y: auto;             /* Scroll when overflowing */
  border: 1px solid #ccc;       /* Optional: define edge */
  border-radius: 6px;
  background: white;            /* Optional: background color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

#searchResults li {
  margin: 0;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #eee;
}

#searchResults li:last-child {
  border-bottom: none;
}

#searchResults a {
  display: block;
  color: var(--color-text-main);
  font-weight: bold;
  text-decoration: none;
}

#searchResults a:hover {
  text-decoration: underline;
  background-color: #f8f8f8;
}

#clearSearch {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: #999;
  display: none; /* hidden by default */
}

#searchResults:empty {
  display: none;
}

/* ------------------------------
   Responsive Fixes and Enhancements
   ------------------------------ */

/* 1. Make project rows stack on smaller screens */
section .row {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

@media (max-width: 768px) {
  section .row {
    flex-direction: column;
    align-items: center;
  }
}

/* 2. Responsive YouTube iframe container */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 3rem;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  border-radius: 8px; /* Optional: rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Optional: add depth */
  margin-bottom: 2rem;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* 3. Hero section improvements for mobile */
#hero {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

@media (max-width: 768px) {
  #hero .hero-cta {
    flex-direction: column;
    gap: 1rem;
  }
}

/* 4. Typography scaling for smaller screens */
body {
  font-size: 1.6rem;
}

@media (max-width: 600px) {
  body {
    font-size: 1.4rem;
  }

  .section-title {
    font-size: 2.4rem;
  }

  .project-wrapper__text-title {
    font-size: 1.8rem;
  }
}

/* 5. Adjust container padding */
@media (max-width: 600px) {
  .container {
    padding: 0 1rem;
  }
}

.lesson-section-heading {
  background: var(--color-gradient);
  padding: 1rem 2rem;
  border-radius: 8px;
  margin: 4rem 0 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.lesson-section-heading h2 {
  color: white;
  font-size: 3.2rem;
  margin: 0;
}

@media (max-width: 37.5em) {
  .lesson-section-heading h2 {
    font-size: 2.2rem;
    text-align: center;
  }
}

/* ------------------------------
   CSN Tutoring Contact Info
   ------------------------------ */
.contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.5rem 0 3rem;
  justify-content: center;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  font-size: 1.6rem;
  color: var(--color-text-main);
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-text-main);
  box-shadow: 0 5px 10px rgba(0,0,0,0.12);
  background: linear-gradient(135deg, #fff 0%, #fdfdfd 100%);
}

.contact-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.contact-text {
  font-weight: 600;
  font-size: 1.6rem;
}

/* Stack items vertically on mobile */
@media (max-width: 540px) {
  .contact-item {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ===============================
   Schedule Section
   =============================== */
.schedule-wrapper {
  text-align: center;
  margin: 2rem 0 4rem;
}

.schedule-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}