@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

* {
  font-family: "Raleway", sans-serif;

  margin: 0;

  padding: 0;

  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  margin: 0px !important;
}

@media (max-width: 998px) {
  body {
    margin: 0px !important;
  }
}

/* home hero section */

.home-hero-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
}

.home-hero-left {
  display: flex;
  flex-direction: column;
  padding-left: 175px;
  padding-top: 152px;
}

.home-hero-text {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.home-hero-text p {
  width: 26%;
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  font-size: 21px;
  line-height: 27px;
  letter-spacing: 0.4px;
  color: #6d6488;
}

.home-hero-image {
  max-width: 720px;
  height: auto;
  padding-top: 64px;
  left: 38%;
  position: absolute;
}

.home-hero-text h1 {
  font-family: Rubik;
  font-size: 80px;
  font-weight: 500;
  line-height: 84px;
  text-align: left;
  color: #443476;
  margin: 0;
  padding: 0px;
  line-height: 105%;
}

.home-hero-text h1 span {
  color: #8056f6;
  font-family: Rubik;
}
.home-hero-button:hover {
  color: white;
  background-color:#7f56d9;
}
.home-hero-button:hover svg path{
  fill: white;
}


.home-hero-button {
  width: 233px;
  display: flex;
  flex-direction: row;
  height: 56px;
  padding: 15.15px 38.97px 15.15px 38.97px;
  gap: 4.33px;
  border-radius: 36px;
  font-family: Rubik;
  font-size: 21px;
  font-weight: 600;
  line-height: 25.98px;
  text-align: center;
  border: none;
  background-color: #8056f6;
  cursor: pointer;
  color: #f9f9f9 !important;
  text-decoration: none;
}
a.card-button:hover {
  background-color: #5a43c3;
  text-decoration: none;
  color: white;
  transform: scale(1.1);
}
@media (max-width: 998px) {
  .home-hero-section {
    width: 100%;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
  }

  .home-hero-left {
    padding: 2rem;
    gap: 20px;
  }

  .home-hero-image {
    width: 100%;
    height: 450px;
    padding: 15px;
    position: static;
  }
  
  .home-hero-text h1 {
    margin: 0;
  }

  .home-hero-text p {
    margin: 0;
    width: 100%;
  }

  .home-hero-button:hover {
    color: white;
    background-color: #38266d;
  }

  .home-hero-button:hover svg path{
    fill: white;
  }
  
}

@media (min-width: 1600px) {
  .home-hero-section {
    justify-content: center;
    gap: 53rem;
  }
  .home-hero-left {
    max-width: 650px;
    padding-left: 70px;
  }
  .home-hero-text p {
    width: 60%;
  }

  .home-hero-image {
    left: 48%;
    max-width: 742px;
  }
}

/* programs section */

.programs-section-area {
  height: 1010px;
  background-color: #f6f8ff;
  margin-top: 7rem;
}

.programs-area {
  display: flex;
  justify-content: center;
}

.programs-section {
  margin-left: 124px;

  margin-right: 122px;

  display: flex;

  flex-direction: column;

  gap: 65px;

  padding-top: 217px;
}

.programs-section h2 {
  font-family: Rubik;

  font-size: 50px;

  font-weight: 600;

  line-height: 52px;

  text-align: left;

  color: #443476;
}

.home-program-card {
  width: 378px;

  height: 506px;

  border-radius: 25px;

  background-color: #8056f6;
}

.program-cards {
  display: flex;

  flex-direction: row;

  gap: 31px;

  /* justify-content: center; */
}

.home-program-card-text h4 {
  font-family: Rubik;

  font-size: 28px;

  font-weight: 600;

  line-height: 35px;

  letter-spacing: 0.4px;

  text-align: left;

  color: #f9f9f9;
}

.home-program-card-text p {
  font-family: Raleway;

  font-size: 16px;

  font-weight: 400;

  line-height: 23px;

  letter-spacing: 0.4px;

  text-align: left;

  color: #f9f9f9;
}

.card-button {
  border: 2px solid var(--White, #f9f9f9);
  color: #f9f9f9 !important;
  background-color: transparent;
  width: 164px;
  height: 40px;
  padding: 8px 26px 8px 26px;
  border-radius: 34px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: Rubik;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  line-height: 24px;
  text-decoration: none;
  transform: perspective(1px) translateZ(0);
  transition-duration: 0.3s;
  transition-property: transform;
}

.home-program-card-text {
  padding: 42px 31px;
  display: flex;
  flex-direction: column;
  gap: 37px;
}

.home-program-card-text .card-button span {
  display: flex;
}

.card-text {
  display: flex;

  flex-direction: column;

  gap: 9px;

  width: 316px;

  height: 157px;
}

@media (max-width: 998px) {
  .programs-section-area {
    margin-top: 0;
  }

  .programs-section {
    padding-top: 100px;
    margin: 1px 10px 0px 10px;
  }

  .programs-area {
    display: block;
  }

  .program-cards {
    flex-direction: column;
  }

  .home-program-card {
    width: 100%;
  }

  .programs-section h2 {
    font-size: 45px;
  }
}

/* philosophy section */

.philosophy-section {
  display: flex;

  flex-direction: row;

  gap: 58px;

  justify-content: center;

  margin-top: 139px;
}

.philosophy-section p {
  width: 722px;

  height: 229px;

  font-family: Raleway;

  font-size: 16px;

  font-weight: 400;

  line-height: 23px;

  letter-spacing: 0.4px;

  text-align: justify;
}

.philosophy-section h5 {
  font-family: Rubik;

  font-size: 28px;

  font-weight: 400;

  line-height: 29.67px;

  text-align: left;

  color: #8056f6;
}

.philosophy-section h4 {
  font-family: Rubik;

  font-size: 40px;

  font-weight: 600;

  line-height: 50px;

  text-align: left;

  color: #443476;

  width: 414px;

  height: 150px;
}

@media (max-width: 998px) {
  .philosophy-section {
    flex-direction: column;
    margin: 60rem 1rem 2rem 1rem;
    gap: 50px;
  }

  .philosophy-section h4 {
    font-size: 35px;
    line-height: 45px;
    width: 100%;
  }

  .philosophy-section p {
    width: 100%;
    height: auto;
  }
}

/* Who we are section */

.who-we-are-section {
  display: flex;

  flex-direction: row;

  gap: 58px;

  justify-content: center;

  margin-top: 168px;
}

.who-we-are-section h5 {
  font-family: Rubik;

  font-size: 28px;

  font-weight: 400;

  line-height: 29.67px;

  text-align: left;

  color: #8056f6;
}

.who-we-are-section h4 {
  font-family: Rubik;

  font-size: 40px;

  font-weight: 600;

  line-height: 50px;

  text-align: left;

  color: #443476;
}

.who-we-are-section p {
  font-family: Raleway;

  font-size: 16px;

  font-weight: 400;

  line-height: 23px;

  letter-spacing: 0.4px;

  text-align: justify;

  color: #6d6488;
}

.who-we-are-section-text {
  width: 493px;

  height: 475px;

  display: flex;

  flex-direction: column;

  gap: 24px;
}

.who-we-are-section-headings {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.who-we-are-section-content {
  display: flex;

  flex-direction: column;

  gap: 40px;
}

.who-we-are-button {
  width: 164px;

  height: 40px;

  padding: 8px 26px 8px 26px;

  gap: 4px;

  border-radius: 34px;

  border: 2px solid var(--Purple, #8056f6);

  color: #8056f6;

  font-family: Rubik;

  font-size: 14px;
  cursor: pointer;
  font-weight: 400;

  line-height: 24px;

  text-align: center;

  background-color: transparent;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;
  text-decoration: none;
}
.who-we-are-button:hover,
.teaching-staff-button:hover {
  background-color: #8056f6;
  color: white;
}
.who-we-are-button:hover svg path,
.teaching-staff-button:hover svg path {
  fill: white;
}
@media (max-width: 998px) {
  .who-we-are-section {
    flex-direction: column;
    margin: 5rem 1rem 2rem 1rem;
    gap: 0;
  }

  .who-we-are-section h4 {
    font-size: 35px;
    line-height: 45px;
  }

  .who-we-are-section p {
    width: 100%;
    height: auto;
    margin-bottom: 0;
  }

  .who-we-are-section img {
    max-width: 100%;
  }

  .who-we-are-image {
    display: flex;
    justify-content: center;
  }


  .who-we-are-section-text {
    width: 100%;
  }
}

/* Teaching Staff Section */

.teaching-staff-section {
  display: flex;

  flex-direction: row;

  gap: 58px;

  justify-content: center;

  margin-top: 85px;
}

.teaching-staff-section h5 {
  font-family: Rubik;

  font-size: 28px;

  font-weight: 400;

  line-height: 29px;

  text-align: left;

  color: #8056f6;
}

.teaching-staff-section h4 {
  font-family: Rubik;

  font-size: 40px;

  font-weight: 600;

  line-height: 50px;

  text-align: left;

  color: #443476;
}

.teaching-staff-section p {
  font-family: Raleway;

  font-size: 16px;

  font-weight: 400;

  line-height: 23px;

  letter-spacing: 0.4px;

  text-align: justify;

  color: #6d6488;
}

.teaching-staff-section-text {
  width: 493px;

  height: 475px;

  display: flex;

  flex-direction: column;

  gap: 24px;
}

.teaching-staff-section-headings {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.teaching-staff-section-content {
  display: flex;

  flex-direction: column;

  gap: 40px;
}

.teaching-staff-button {
  width: 164px;

  height: 40px;

  padding: 8px 26px 8px 26px;

  gap: 4px;

  border-radius: 34px;
  cursor: pointer;
  border: 2px solid var(--Purple, #8056f6);

  color: #8056f6;

  font-family: Rubik;

  font-size: 14px;

  font-weight: 400;

  line-height: 24px;

  text-align: center;

  background-color: transparent;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;
  text-decoration: none;
}

@media (max-width: 998px) {
  .teaching-staff-section {
    flex-direction: column;
    margin: 10rem 1rem 2rem 1rem;
    gap: 65px;
  }

  .teaching-staff-section h4 {
    font-size: 35px;
    line-height: 45px;
  }

  .teaching-staff-section p {
    width: 100%;
    height: auto;
    margin-bottom: 0;
  }

  .teaching-staff-section-text {
    width: 100%;
    height: auto;
  }
}

/* FAQ */

.faq-section {
  max-width: 1200px;

  margin: auto;

  padding-top: 122px;

  padding-bottom: 127px;
}

.faq-header {
  text-align: left;

  margin-bottom: 30px;
}

.faq-header h5 {
  font-family: Rubik;

  font-size: 28px;

  font-weight: 400;

  line-height: 29.67px;

  text-align: left;

  color: #8056f6;
}

.faq-header h4 {
  font-family: Rubik;

  font-size: 40px;

  font-weight: 600;

  line-height: 50px;

  text-align: left;

  color: #443476;
}

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

.faq-item {
  border-bottom: 1px solid #e0e0e0;

  margin-bottom: 10px;
}

.faq-title {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 15px 0;

  font-family: Rubik;

  font-size: 25.7px;

  font-weight: 500;

  line-height: 30.83px;

  text-align: left;

  color: #38266d;

  cursor: pointer;
}

.faq-title .faq-icon {
  font-size: 40px;

  transition: transform 0.3s ease;

  font-weight: 200;
}

.faq-content {
  max-height: 0;

  overflow: hidden;

  transition: max-height 0.5s ease;
}

.faq-item input[type="checkbox"] {
  display: none;
}

.faq-item input[type="checkbox"]:checked ~ .faq-content {
  max-height: 150px;

  padding: 10px 0;
}

.faq-item input[type="checkbox"]:checked ~ .faq-title .faq-icon {
  transform: rotate(45deg);
}

/* Mobile Responsive Styles */

@media screen and (max-width: 998px) {
  .faq-section {
    max-width: 100%;

    padding: 1rem;

    margin: 0;

    margin-top: 6rem;
  }

  .faq-title {
    font-size: 16px;
  }

  .faq-title .faq-icon {
    font-size: 20px;
  }
}

/* contact section */

.home-contact-section {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 168px;
  justify-content: space-between;
  padding: 0px 50px;
}

.home-contact-form {
  width: 630px;
  height: auto;
  background-color: #8056f6;
  border-radius: 25px 25px 25px 25px;
}

.home-contact-form button {
  margin-bottom: 70px;
  cursor: pointer;
}

.home-contact-form-texts h3 {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 600;
  font-size: 50px;
  line-height: 125%;
  color: #f9f9f9;
}

.home-contact-form-texts {
  margin-left: 82px;

  margin-top: 70px;
}

.form-container {
  margin-left: 82px;

  margin-top: 70px;

  width: 426px;
}

.home-contact-form-texts p {
  width: 426px;

  font-family: "Raleway";

  font-style: normal;

  font-weight: 400;

  font-size: 16px;

  line-height: 23px;

  letter-spacing: 0.4px;

  color: #f9f9f9;
}

.form-container {
  width: 100%;

  max-width: 600px;
}

.responsive-form {
  display: flex;

  flex-direction: column;

  gap: 15px;
}

.form-row {
  display: flex;

  flex-wrap: wrap;

  gap: 15px;
}

input,
select {
  padding: 12px 14px 12px 14px;

  border-radius: 10px;

  border: 1px solid #ccc;

  font-size: 16px;
}

#email,
#mobile,
#year,
#school,
#drop-down {
  width: 426px;
}

input:focus,
select:focus {
  border-color: #7f56d9;

  outline: none;
}
.home-contact-form .form-feilds-area {
  padding: 0px 82px;
}
.home-contact-form .form-feilds-area label {
  display: none !important;
}
.home-contact-form .contact-programs label {
  display: block !important;
  color: white;
  font-size: 20px;
  font-weight: 600;
}
.home-contact-form .form-feilds-area input,
.home-contact-form .form-feilds-area select {
  color: #38266d;
  /* font-family: Inter; */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.16px;
  height: 58px;
}

.home-contact-form #form_contact-form .frm_submit button.frm_button_submit {
  display: flex;

  align-items: center;
  cursor: pointer;
  padding: 15px 39px;

  width: 154px;

  height: 56px;

  background: #38266d;

  border-radius: 36px;

  font-family: "Rubik";

  font-style: normal;

  font-weight: 600;

  font-size: 21px;

  line-height: 26px;

  text-align: center;

  color: #f9f9f9;
  margin-top: 0px !important;
}
.tutor-area {
  padding: 50px 130px;
  display: flex;
  justify-content: center;

}
.tutor-area .tutor-details {
  max-width: 1440px;
  display: flex;
  align-items: center;
  align-content: center;
/*   justify-content: space-between;
  gap: 9rem; */
}
.tutor-area .tutor-content {
  display: flex;
  align-content: center;
  align-items: center;
  width: 80%;
}
.tutor-area .tutor-content p {
  color: #38266d;
  font-feature-settings: "liga" off, "clig" off;
  font-family: Rubik;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.26px;
  width: 75%;
  margin: 0px;
}
.home-contact-section .contact-section-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}
.tutor-area .tutor-logo img {
  width: 50%;
}
@media (max-width: 998px) {
	.tutor-area .tutor-logo img {
	  width: 70%;
	}
  .tutor-area .tutor-details {
    flex-direction: column;
    gap: 4rem;
  }
  .tutor-area {
    padding: 20px;
    margin-top: 45px;
  }

  .tutor-details{
    gap: 3rem;
  }

  .tutor-logo{
    margin-left: 5rem;
    margin-bottom: 2rem;
  }

  .tutor-area .tutor-content p {
    width: 100%;
  }
  .home-contact-section {
    flex-direction: column;
    margin-top: 50px;
    gap: 40px;
    padding: 0;
  }

  .contact-section-img {
    margin: 6rem 1rem 2rem 1rem;
  }

  .home-contact-section .contact-section-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-contact-form {
    border-radius: 0;
    width: 100%;
  }

  .home-contact-form-texts {
    padding: 2rem;
    margin: 0;
  }

  .home-contact-form-texts p {
    width: 100%;
  }

  .home-contact-form .form-feilds-area {
    padding: 0px 25px;
  }
}

@media (min-width: 1650px) {
	.tutor-area .tutor-content {
		width:100%;
	}
  .home-contact-section {
    justify-content: center;
    gap: 50px;
  }

  .home-contact-form {
    border-radius: 25px 25px 25px 25px;
  }
}