@media only screen and (max-width: 600px){
  /* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Helvetica, Sans-Serif;
  font-size: 18px
}

body {
  background: #f9f9f9;
  color: #333;
  font-family: Helvetica, Sans-Serif;
}

.desktop{
  display: none !important;
}

header.mobile{
  display: flex;
          justify-content: space-between;
          align-items: center;
          padding: .5rem 1rem;
          background: linear-gradient(135deg, #3d0d6d, #6b1ba7);
          color: #fff;
          box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#mobile-nav-bar{
  height: fit-content !important;
  position: fixed;
width: 100vw;
min-width: 320px;
top: 0;
z-index: 100000;
}

header.mobile .logo {
  font-size: 1.2rem;
  font-weight: bold;
}

header.mobile .menu-icon{
  font-size: 1.6rem;
        cursor: pointer;
        color: #fff;
        line-height: 1;
}
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #3d0d6d, #6b1ba7);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 50px;
  z-index: 2147483647;
}

.overlay-content {
  width: 100%;
  text-align: center;
  padding-top: 30px;
}

.overlay-content a {
  margin-top: 15px;
  padding: 8px;
  text-decoration: none;
  font-family: Helvetica, Sans-Serif;
  font-style: normal;
  font-weight: normal;
  font-size: 2rem;
  line-height: 3.5rem;
  text-align: center;
  color: #FFFFFF;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  width: 100%;
  text-align: center;
  font-size: 3rem;
  text-decoration: none;
  color: #f1f1f1;
}

.overlay .closebtn div{
  font-size: 3rem;

}

#nav-bar-icon{
  height: 50px;
  width: 50px;
  cursor: pointer;
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 1;
  transition: top 0.3s;
  border: 2px solid #FFFFFF;
  border-radius: 3px;
}



#mobile-nav-logo.unscrolled{ position:static; width:150px; height:40px; background:none; border:none; transition: all 0.3s ease; }

#mobile-nav-logo.unscrolled img{ width:100%; height:100%; object-fit:contain; object-position:left center; border-radius:0; transition: all 0.3s ease; }

#mobile-nav-logo.scrolled{ position:static; width:122px; height:32px; background:none; border:none; transition: all 0.3s ease; }

#mobile-nav-logo.scrolled img{ width:100%; height:100%; object-fit:contain; object-position:left center; border-radius:0; transition: all 0.3s ease; }
/* 
.hero {
  height: 80vh !important;
  text-align: center;
  background: linear-gradient(135deg, #6b1ba7, #3d0d6d);
  background-image: url('./images/college-students.webp');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;

}
.hero-container{
  padding: 3rem 1rem;
  padding-top: 40vh;
  background-color: rgba(0, 0, 0, 0.7);  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

.hero h1, .hero h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
}

.hero p {
  margin-bottom: 1.5rem;
}
section{
  height: 100vh;
  min-height: fit-content;
} */

.hero {
  position: relative;
  height: 80vh !important;
  text-align: center;
  background: linear-gradient(135deg, #6b1ba7, #3d0d6d);
  color: #fff;
  overflow: hidden;
  min-height: 625px;;
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-container {
  padding: 3rem 1rem;
  padding-top: 40vh;
  background-color: rgba(0, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 2;
}

.hero h1, .hero h2 {
  margin-bottom: 1rem;
  font-size: 2rem;
}

.hero p {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
}

.cta-button, .secondary-button {
  display: block;
  margin: 0.5rem auto;
  padding: 0.7rem 2rem;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  width: 250px;
  text-decoration: none;
}

.cta-button {
  background-color: #ff2e63;
}

.secondary-button {
  border: 2px solid white;
  background: transparent;
}

.about {
  padding: 3rem 2rem;
  height: 80vh !important;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.feature-box {
  background-color: #ECECEC;
  padding: 1rem 2rem;
  border: 0.5px solid #CCCCCC;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
}

#about-section-1{
  height: fit-content !important;
  padding: 2rem 1.5rem;
  line-height: 1.5rem;

  width: 100%;
  margin: 0;
  max-width: unset !important;
  background-color: #E5D1FC; 

}
.about-1-container{
  background-color: #F4E9FF;
  border-radius: 10px;
  padding: 1rem 0.5rem;
}
.about-1-container li{
  margin-bottom: 0.5rem;
}

.about-1-nested-list{
  padding-left: 3rem;
}

.about-1-list{
  padding-left: 1.5rem;
}


.about-1-container p{
  font-size: 1rem;
  line-height: 1.7rem;
  margin-bottom: 1rem;
}

.about-1-container h6{
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
}

#about-section{
  height: fit-content !important;
  background-color: #F1F1F1;
  background-image: url('./images/bg.webp');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#about-section p, #about-section ul{
  line-height: 1.5rem;;
}

#about-section h6{
  font-size: 1.2rem;
  margin: 1.5rem auto;
  text-align: center;
}

.founder{
margin: 2rem auto;
}

#about-section img{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 10px 15vw;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

#about-section h1{
  font-size: 2rem;
  margin-bottom: 1rem;;
}

.special-needs {
border-top: 1px solid #FFFFFF;
height: 90vh;
min-height: 720px;
width: 100%;
}

.special-needs-image{
  height: 90vh;
  min-height: 720px;
  min-width: 320px;
    position: absolute;
    width: 100%;
    object-fit: cover;
    z-index: 1;
}

.special-needs-container {
  margin: 0 auto;
  padding: 4rem 2rem;
  background-color: rgba(0, 0, 0, 0.7);
  min-height: 720px;
  width: 100%;
  height: 90vh;
  min-width: 320px;
  color: #fff;
  padding-bottom: 7rem;
  z-index: 2;
  position: absolute;
}

.special-needs h1, .special-needs h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  line-height: 2.4rem;
}

.special-needs p {
  margin-bottom: 1.5rem;
  line-height: 1.5rem;
  font-weight: 550;
  font-size: 1rem;
}





.subject-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  width: 180px;
  opacity: 0;
  transition: .5s ease;
  background-color: #a03cff;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  margin: 5px;

}

.subject-container:hover .subject-overlay {
  opacity: 1;
}

.subject-container{
  position: relative;
}

.flip-text {
  color: white;
  font-size: 1rem;
  position: absolute;
  width: 95%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.subjects {
  background-color: #3d0d6d;
  color: #fff;
  padding: 2rem 1rem;
}

.subjects h1{
  font-size: 2rem;
  margin-bottom: 2rem;
}

.subject-list {
  display: flex;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.subject-box {
  background-color: #DBB5FF;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  height: 160px;
  width: 180px;
  color: #000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 5px;
  display: block;
}

.subject-box h6{
  font-size: 1.2rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.subjects p{
  font-size: 1.1rem;
  line-height: 1.5rem;
  margin: 1rem auto;
}
.subject-bottom-text{
  line-height: 1.6rem;
  background-color: #DBB5FF;
  padding: 1.5rem;
    border-radius: 10px;
    color: #000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.subject-bottom-text h3{
  font-size: 1.2rem;
  font-weight: 900;
}

.subject-bottom-text p {
  padding: unset;
}

.difference-heading{
  font-size: 1.2rem;
  margin: 1rem auto;
  font-weight: bold;
}


.testimonials {
  text-align: center;
  padding: 2rem 1rem;
}

.testimonial-section {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
min-height: 900px;
height: fit-content !important;
}

.testimonial-section h2 {
font-size: 1.8rem;
margin-bottom: 20px;
}


.testimonial-card {
min-width: 100%;
padding: 20px;
background-color: #f4ebff;
border-radius: 12px;
transition: transform 0.5s ease-in-out;
height: 750px;
border: 2px solid #FEFEFE;
}

.testimonial-card.active {
display: block;
}

.testimonial-avatar {
width: 110px;
height: 120px;
border-radius: 50%;
margin-bottom: 15px;
border: 10px solid #FEFEFE;
}

.testimonial-name {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 10px;
}

.testimonial-text {
font-size: 1rem;
color: #555;
line-height: 1.5;
padding: 0.5rem;
}

.google-reviews-link{
  display: block;
  margin: 2rem auto;
  margin-top: 4rem;
  width: 240px;
  height: 80px;
}
.google-reviews-link img{
  width: 100%;
  height: 100%;
}

#contact-us-form{
padding: 1rem;
}

#contact-us-form h1{
font-size: 2rem;
font-family: Helvetica, Sans-Serif;
margin: 1rem 0;
}

#contact-us-form h6{
font-size: 1.2rem;
font-family: Helvetica, Sans-Serif;
margin: 0.5rem 0;
}

#contact-us-form {
font-size: 1rem;
font-family: Helvetica, Sans-Serif;
line-height: 1.1rem;
}

#contact-us-form ul{
margin: 1rem;
line-height: 2rem;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */ 
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}

/* Add a background color and some padding around the form */
.form-container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-top: 2rem;
}

.actions input{
  border: 1px solid #FFFFFF !important;
  background-color: #3d0d6d !important;
}

[data-application-name="embedded-viral-link-ui"]{
  display: none !important;
}

/* Navigation Buttons */
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 50%;
cursor: pointer;
font-size: 1.5rem;
padding: 10px;
color: #333;
}

.nav-button.left {
left: 10px;
}

.nav-button.right {
right: 10px;
}

.nav-button:hover {
background-color: #ddd;
}

footer {
  padding: 2rem 1rem;
  background-color: #333;
  color: #fff;
  text-align: center;
}

footer nav a {
  color: #ddd;
  text-decoration: none;
  margin: 0 0.5rem;
}

footer p{
  font-size: 0.8rem;
  margin-top: 1rem;
}

.social-icons {
  width: 146px;
  padding: 0;
  display: flex;
  margin: 1rem auto;
  align-items: center; /* Add this line */
}

.social-icons span {
  margin-right: 8px; /* Add this block */
  line-height: 50px; /* Match the height of social icons */
  text-wrap: nowrap;
  margin-left: -1.5rem;
}

.social-icons a {
  color: #fff;
  margin: 0 0.5rem;
  font-size: 1.5rem;
}

.social-icons img{
  height: 46px;
  width: 46px;
}
.faq-section {
  max-width: 600px;
  margin-top: 50px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.faq-section h1, .faq-section h2 {
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  color: #333;
  margin-bottom: 1.5rem;
}

.faq-container {
  margin-top: 20px;
}

.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-question h3 {
  margin: 0;
  font-size: 1rem;
  color: #444;
}

.faq-question .icon {
  font-size: 20px;
  color: #666;
  transition: transform 0.3s ease;
}

.faq-answer {
  display: none;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  color: #555;
  font-size: 0.8rem;
  line-height: 1.6;
}

.faq-subtext{
  line-height: 1.6rem;
  background-color: rgb(244, 233, 255);
  padding: 1rem;
    border-radius: 10px;
    text-decoration: none;
}

.faq-subtext-item{
  margin-top: 0.7rem;
}
.faq-subtext img{
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 50%;
}
.faq-answer ul {
  padding-left: 20px;
}

.faq-answer ul li {
  list-style: disc;
  margin-bottom: 8px;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .icon {
  transform: rotate(45deg);
  color: #333;
}
/* General Reset */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  min-width: 320px;
}

/* Contact Widget Container */
.contact-widget {
  position: fixed;
  bottom: 100px;
  right: 20px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  z-index: 1000;
  height: fit-content
}

/* Contact Item Styling */
.contact-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.3s ease;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-item a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-item a img {
  width: 20px;
  height: 20px;
}

.contact-item:hover {
  background-color: #f0f0f0;
}


html{
  scroll-behavior: smooth;
}
}

@media only screen and (min-width: 601px){
  /* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Helvetica, Sans-Serif;
  font-size: 18px
}

.mobile{
  display: none !important;
}

body {
  font-family: Helvetica, Sans-Serif;
  background: #f9f9f9;
  color: #333;
}




#desktop-nav-bar{
  position: fixed;
  top: 0;
  width: 100%;
  height: 64px;
  padding: 0.2rem;
  background: linear-gradient(135deg, #3d0d6d, #6b1ba7);
  color: #fff;
  box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.2);
  z-index: 1;
  transition: top 0.3s;
}

.nav-wrapper{
  max-width: 1200px;
  margin: 0 auto;
  height: 64px;
  display: flex;
  justify-content: space-between;
}

#nav-logo.unscrolled{ display:inline-block; height:58px; width:263px; margin:7px 0 0; background:none; border:none; transition: all 0.3s ease; }

#nav-logo.unscrolled img{ width:100%; height:100%; object-fit:contain; border-radius:0; transition: height 0.3s ease, width 0.3s ease; }

#nav-logo.scrolled{ display:inline-block; height:44px; width:200px; margin:5px 0 0; background:none; border:none; transition: all 0.3s ease; }

#nav-logo.scrolled img{ width:100%; height:100%; object-fit:contain; border-radius:0; transition: height 0.3s ease, width 0.3s ease; }

.nav-link-container{
  height: fit-content;
}

.nav-link-container ul{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  height: fit-content;
  width: fit-content;
}

.nav-link-container ul li{
  padding-top: 15px;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 134.77%;
  text-align: center;
  color: #8E8E8E;
  transition: transform 0.3s;
  margin-right: 20px;
}

.nav-link-container ul li:hover{
  color: #ff2e63;
  transform: scale(1.1);
}


.nav-link-container ul a{
  text-decoration: none;
}



#nav-btn{
  padding-top: 8px;
  width: 140px;
  height: 40px;
  margin-top: 11px;
  background: #E23744;
  border-radius: 5px;
  text-align: center;
  color: #FFFFFF;
}

#nav-btn a{
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 24px;
  text-decoration: none;
  color: #FFFFFF;
}

#nav-btn:hover{
  background: #b42c36;
  transition: 0.5s;
}

.hero {
  text-align: center;
  background-image: url('./images/college-students.webp');
  color: #fff;
  background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 80vh !important;
min-height: fit-content
}
.hero-image{
  display: none;
}

.hero-container{
  padding: 3rem 1rem;
  height: 100%;
  width: 100%;
  padding-top: 35vh;
  background-color: rgba(0, 0, 0, 0.7);  height: 100%;  background-size: contain;

  border-bottom: 1px solid #FFFFFF;
}

.hero h1, .hero h2 {
  margin-bottom: 1rem;
  font-size: 3rem;
}

.hero p {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
}
section{
  height: 100vh;
  min-height: 800px;
}



.cta-button, .secondary-button {
  display: inline-block;
  margin: 0.5rem 1rem;
  padding: 0.7rem 2rem;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  width: 250px;
  text-decoration: none;
  font-size: 1rem;
}

.cta-button {
  background-color: #ff2e63;
}

.secondary-button {
  border: 2px solid white;
  background: transparent;
}

.about {
  padding: 3rem 2rem;
  height: 80vh !important;
  width: 80vw;
  max-width: 1200px;
  margin: auto;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.feature-box {
  margin-top: 15px;
}

#about-section-1{
  height: fit-content !important;
  padding: 2rem 1rem;
  line-height: 1.5rem;
  width: 100%;
  margin: 0;
  max-width: unset !important;
  height: fit-content !important;
  background-color: #E5D1FC;

}

.about-1-container{
  padding: 1rem 5%;
  width: 100%;
  font-size: 1rem;
  line-height: 1.5rem;
  max-width: 1250px;
  margin: 0 auto;
  background-color: #F4E9FF;
  border-radius: 10px;
}

.about-1-container li{
  margin-bottom: 0.5rem;
}

.about-1-nested-list{
  padding-left: 3rem;
}

.about-1-list{
  padding-left: 1.5rem;
}

.about-1-container p{
  font-size: 1rem;
  line-height: 1.7rem;
  margin-bottom: 1rem;
}

.about-1-container h6{
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
}

#about-section{
  height: fit-content !important;
  background-color: #F1F1F1;
  background-image: url('./images/bg.webp');
  background-attachment: fixed;
  margin: 0;
  width: 100% !important;
  max-width: unset !important;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.about-section-container{
  width: fit-content;
  height: 100%;
  max-width: 1200px;
  margin: 4rem auto;
}

#about-section p{
  line-height: 1.5rem;
  text-align: left;
  padding: 1rem 0;
}

#about-section img{
  width: 210px;
  height: 200px;
  border-radius: 50%;
  margin: 10px auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

#about-section h1{
  font-size: 2rem;
  margin-bottom: 1rem;;
}

#about-section h6{
  font-size: 1.2rem;
  margin: 1.5rem auto;
  text-align: center;
}

.founders-container{
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder{
  height: fit-content;
  margin: 1rem;
  padding: 1rem;
  border-radius: 20px;
  min-height: 750px;
  width: 45%;
  background-color: rgba(0, 0, 0, 0.1);
}

.about-section-container > p{
  padding: 1rem 2rem !important;
}


.special-needs {
background-image: url('./images/autism.webp');
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-top: 1px solid #FFFFFF;
color: #fff;
min-height: 900px;
}

.special-needs-image{
display: none;
}

.special-needs-container {
  background-color: rgba(0, 0, 0, 0.8);
  margin: 0 auto;
  width: 100%;
  height: 100%;
  padding: 10rem 7rem;
}

.special-needs h1, .special-needs h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 5rem;
  line-height: 2.4rem;
}

.special-needs p {
  margin-bottom: 1.5rem;
  line-height: 2rem;
}



.subjects-section-container{
  width: fit-content;
  height: 100%;
  max-width: 1200px;
  margin: 4rem auto;
}

.subjects.desktop{
  height: fit-content;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 100px;
}

.subject-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  width: 280px;
  opacity: 0;
  transition: .75s ease;
  background-color: #a03cff;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
  margin: 5px;

}

.subject-container:hover .subject-overlay {
  opacity: 1;
  box-shadow: #FCFCFC 0 0 10px;
}

.subject-container{
  position: relative;
}

.flip-text {
  color: white;
  font-size: 1rem;
  position: absolute;
  width: 95%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.subjects {
  background-color: #3d0d6d;
  color: #fff;
  padding: 2rem 1rem;
}

.subjects h1{
  font-size: 2rem;
  line-height: 2.5rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
}

.subjects p{
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 1.5rem auto;
  padding-left: 1rem;
}
.difference-heading{
  font-size: 1.2rem;
  margin: 1rem auto;
  font-weight: bold;
  padding-left: 1rem;
}



.subject-list {
  display: flex;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}



.subject-box {
  background-color: #DBB5FF;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  height: 160px;
  width: 280px;
  color: #000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  border: 2px solid #FFFFFF;
  margin: 5px;
  display: block;
}

.subject-box h6{
  font-size: 1.2rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.subject-bottom-text{
  line-height: 1.6rem;
  background-color: #DBB5FF;
  padding: 1.5rem;
    border-radius: 10px;
    color: #000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.subject-bottom-text h3{
  font-size: 1.2rem;
  font-weight: 900;
}

.subject-bottom-text p {
  padding: unset;
}



.testimonials {
  text-align: center;
  padding: 2rem 1rem;
}

.testimonial-section {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
min-height: 900px;
height: fit-content !important;
}

.testimonial-carousel{
  max-width: 1200px;
  width: 80vw;
  margin: 50px auto;
  height: 650px;
}

.testimonial-section h2 {
font-size: 1.8rem;
margin: 50px;
}


.testimonial-card {
width: 480px;
padding: 20px;
background-color: #f4ebff;
border-radius: 12px;
transition: transform 0.5s ease-in-out;
height: 550px;
margin: 1px 35px;
filter: blur(2px);
overflow: hidden;
transition: all 0.5s ease-in-out;
}


.testimonial-card.is-selected{
  filter: blur(0);
  height: 550px !important;
  overflow: scroll;
}

.testimonial-avatar {
width: 110px;
height: 120px;
border-radius: 50%;
margin-bottom: 15px;
border: 5px solid #FEFEFE;
}

.testimonial-name {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 10px;
}

.testimonial-text {
font-size: 1rem;
color: #555;
line-height: 1.5;
padding: 0.5rem;
}

.google-reviews-link{
  display: block;
  margin: 2rem auto;
  margin-top: 4rem;
  width: 240px;
  height: 80px;
}
.google-reviews-link img{
  width: 100%;
  height: 100%;
}

#contact-us-form{
padding: 1rem;
}
.contact-us-container{
  width: 100%;
  max-width: 1200px;
  height: fit-content;
  margin: 10px auto;
}

#contact-us-form h1{
font-size: 2rem;
font-family: Helvetica, Sans-Serif;
margin: 1rem 0;
text-align: center;

}

#contact-us-form h6{
font-size: 1.2rem;
font-family: Helvetica, Sans-Serif;
margin: 0.5rem 0;
}

#contact-us-form {
font-size: 1rem;
font-family: Helvetica, Sans-Serif;
line-height: 1.1rem;
height: fit-content;

}

#contact-us-form ul{
margin: 1rem;
line-height: 2rem;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */ 
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}

/* Add a background color and some padding around the form */
.form-container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-top: 2rem;
}

.faq-section {
  max-width: 1200px;
  margin-top: 50px !important;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.faq-section h1, .faq-section h2 {
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  color: #333;
  margin-bottom: 1.5rem;
}

.faq-container {
  margin-top: 20px;
}

.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-question h3 {
  margin: 0;
  font-size: 1rem;
  color: #444;
}

.faq-question .icon {
  font-size: 20px;
  color: #666;
  transition: transform 0.3s ease;
}

.faq-answer {
  display: none;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  color: #555;
  font-size: 0.8rem;
  line-height: 1.6;
}

.faq-subtext{
  line-height: 1.6rem;
  background-color: rgb(244, 233, 255);
  padding: 1rem;
    border-radius: 10px;
}

.faq-subtext img{
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  border-radius: 50%;
}

.faq-answer ul {
  padding-left: 20px;
}

.faq-answer ul li {
  list-style: disc;
  margin-bottom: 8px;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .icon {
  transform: rotate(45deg);
  color: #333;
}

/* Navigation Buttons */
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 50%;
cursor: pointer;
font-size: 1.5rem;
padding: 10px;
color: #333;
}

.nav-button.left {
left: 10px;
}

.nav-button.right {
right: 10px;
}

.nav-button:hover {
background-color: #ddd;
}

footer {
  padding: 2rem 1rem;
  background-color: #333;
  color: #fff;
  text-align: center;
}

footer nav a {
  color: #ddd;
  text-decoration: none;
  margin: 0 0.5rem;
}
footer p{
  font-size: 0.8rem;
  margin-top: 1rem;
}

.social-icons a {
  color: #fff;
  margin: 0 0.5rem;
  font-size: 1.5rem;
}

.social-icons {
  width: 146px;
  padding: 0;
  display: flex;
  margin: 1rem auto;
  align-items: center; /* Add this line */
}

.social-icons span {
  margin-right: 8px; /* Add this block */
  line-height: 50px; /* Match the height of social icons */
  text-wrap: nowrap;
  margin-left: -1.5rem;
}

.social-icons img{
  height: 50px;
  width: 50px;
}

/* General Reset */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Contact Widget Container */
.contact-widget {
  position: fixed;
  bottom: 100px;
  right: 20px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  z-index: 1000;
  height: fit-content;
}

/* Contact Item Styling */
.contact-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.3s ease;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-item a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-item a img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

.contact-item:hover {
  background-color: #f0f0f0;
}


html{
  scroll-behavior: smooth;
}
}
/* --------------------------------------------------------------------------
   Contact form. Replaces the HubSpot embed with a form posted to the site's
   own Worker, so submissions arrive by email with no third-party script.
   Styled to sit inside the existing .form-container.
   -------------------------------------------------------------------------- */
#contact-form { text-align: left; max-width: 560px; margin: 0 auto; }

#contact-form .sw-field { margin: 0 0 1rem; }

#contact-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #3d0d6d;
}

#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font: inherit;
  font-size: 1rem;
  color: #222;
  background: #FFFFFF;
  border: 1px solid #C9B6DD;
  border-radius: 6px;
  box-sizing: border-box;
}

#contact-form input:focus,
#contact-form textarea:focus {
  outline: 3px solid #6b1ba7;
  outline-offset: 1px;
  border-color: #6b1ba7;
}

#contact-form .field__error { border-color: #B3261E; }

#contact-form .sw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

#contact-form .sw-submit { margin: 1.25rem 0 0; }

#contact-form button {
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: #FFFFFF;
  background: #3d0d6d;
  border: 2px solid #3d0d6d;
  border-radius: 6px;
  padding: 0.75rem 1.8rem;
  cursor: pointer;
  min-height: 44px;
}

#contact-form button:hover { background: #6b1ba7; border-color: #6b1ba7; }

#contact-form .form__note {
  margin-top: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #3d0d6d;
}

/* --------------------------------------------------------------------------
   Header logo fit. The bar is 64px and the logo lockup is 58px tall with a
   7px top margin, so the emblem's lower gear overhung the bar and sat on the
   hero image. Give the bar the height the lockup needs and centre it, rather
   than shrinking the logo.
   -------------------------------------------------------------------------- */
#desktop-nav-bar { height: 78px; }

#nav-logo.unscrolled { height: 56px; width: 254px; margin: 9px 0 0; }
#nav-logo.scrolled   { height: 46px; width: 209px; margin: 8px 0 0; }

/* The fixed bar is taller now, so anything anchored under it moves down too. */
#desktop-nav-bar + *,
.hero { scroll-margin-top: 78px; }

/* Mobile bar: same treatment, smaller numbers. */
@media (max-width: 767px) {
  header.mobile { min-height: 62px; align-items: center; }
  #mobile-nav-logo.unscrolled { width: 150px; height: 40px; }
}