:root {
  --color-primary: #16203f;
  --color-light-primary: #5d627d;
  --color-secondery: #215065;
  --color-secondery-light:#395A73;
  --color-gray: #ecf4fa;
  --color-gray-200:#EAECF0;
  --color-white: #fff;
  --font-size: 16px;
  --text-gradient: linear-gradient(90deg, #6B7C3F 0%, #A8C63E 100%);
  --color-accent: #6B7C3F;
  --color-accent-light: #A8C63E;
  --color-accent-bg: #F5F8EE;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style-type: none;
  padding: 0;
}
a {
  text-decoration: none;
}
/******gradient********/
.orange-gradient{
  background: linear-gradient(180deg, var(--color-accent-bg) 0%, #FFFFFF 100%);
}
.dark-gradient{
  background: linear-gradient(92.44deg, #183959 0%, #215065 100%);


}

/* Section background tones. Pages alternate .sec-white / .sec-gray down the
   page so no two neighbouring sections share a background (dark bands via
   .dark-gradient stay as accents between them). Replaces the old diagonal
   white->gray / accent->white section gradients, whose white endpoints made
   adjacent sections bleed together. */
.sec-white { background: #fff; }
.sec-gray  { background: var(--color-gray); }
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-primary);
  font-weight: 700;
}
h5{
  font-weight: 500;
}
.border-radius {
  border-radius: 8px;
}
p {
  line-height: 1.6;
}
.border-radius {
  border-radius: 8px;
}
.secton-header {
  text-align: center;
  margin: 0 0 60px;
}
.secton-header.text-left {
  text-align: left;
  max-width: auto;
  margin: 0;
}
.secton-header h2 {
  font-weight: 600;
}
.bg-grap {
  background-color: var(--color-gray);
}
body {
  font-size: 15px;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.3;
  color: var(--color-light-primary);
}
.drop-in {
  animation: TextAnimateUp 0.8s cubic-bezier(0, 0.55, 0.45, 1) 0s 1 normal
    forwards;
}
@keyframes TextAnimateUp {
  0% {
    clip-path: inset(0 0 100% 0);
    transform: translateY(90px);
  }
  100% {
    clip-path: inset(0 0 -25% 0);
    transform: translateY(0);
  }
}
input,
select {
  height: 50px;
  color: var(--color-light-primary) !important;
}
.dark-btn {
  padding:8px 22px;
  font-size: 14px;
  color: var(--color-white);
  background: var(--color-secondery);
  border-radius: 8px;
  text-transform: capitalize;
  line-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: none;
  font-weight: 600;
  border-radius: 50px;
}
.user-icon {
  margin-right: 8px;
}
.transperant-btn { 
  font-size: 14px;
  color: var(--color-secondery);
  border-radius: 8px;
  text-transform: capitalize;
  line-height: 24px;
  display:inline-flex;
  font-weight: 600;
}
.form-control:disabled {
  background-color: #ffffff;
  opacity: 1;
}
.transperant-btn img,.dark-btn img {
  margin-left:8px;
  transition: 0.5s all;
}

.transperant-btn:hover img {
  margin-left: 12px;
}
.secton-header h3 {
  text-transform: capitalize;
}
p a {
  color:var(--color-primary);
}
html {
  scroll-behavior: smooth;
}
/*******Header*****/
header {
  padding: 10px 0;
  z-index: 1;
  position: relative;
}
header .dark-btn {
  display: inline-flex;
  align-items: center;
}
header .nav-link {
  color: var(--color-light-primary);
}
/* audit-quality-sweep H13 — top-level menu items are <button> for keyboard
   a11y (aria-haspopup/aria-expanded). Reset native button chrome so they
   still render as text matching the legacy <span class="nav-link">. */
.nav-link-button {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
  text-align: inherit;
}
.nav-link-button:focus-visible {
  outline: 2px solid var(--color-primary, #fb823e);
  outline-offset: 2px;
}
header .nav-link:hover,.main-menu .nav > .nav-item:hover > .nav-link{
  /* background: var(
    --Primary-Color,
    linear-gradient(91deg, #ff63ae -1.75%, #fb823e 105.82%, #ff8f51 105.82%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  color: var(--color-primary);
}
header .row {
  align-items: center;
}
.logo img {
  max-width: 70px;
  /* height must track the width — the img carries width/height attributes
     (CLS hints), and without this the attribute height (140) wins over the
     max-width'd width, stretching the round logo. */
  height: auto;
}
.logo a.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.logo-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}
.logo-wordmark-top {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-primary);
  white-space: nowrap;
}
.logo-wordmark-bottom {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}
@media (max-width: 400px) {
  .logo-wordmark-top {
    font-size: 15px;
  }
  .logo-wordmark-bottom {
    font-size: 11px;
    letter-spacing: 0.28em;
  }
  .logo a.logo-lockup {
    gap: 9px;
  }
}
.main-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btn-wrap.register-now .dark-btn {
  background-color: transparent;
  padding: 10px 0;
}
.submenu-dropdown {
  position: absolute; 
  transition: 0.5s all;
  opacity: 0;
  min-width: 220px;
  border-radius: 8px;
  visibility: hidden;
  max-height: 0;

  transform: translatey(10px);
  background-color: var(--color-white);
  box-shadow: 0px 12px 16px -4px #10182814;
  background-color: var(--color-white);
}
.submenu-dropdown ul {
  border: 1px solid var(--color-gray-200);
  overflow-y: auto;
  border-radius: 8px;
  max-height: 80vh;
  -webkit-overflow-scrolling: touch;
}
.submenu-dropdown .nav-link {
  color: var(--color-light-primary);
  border-bottom: 1px solid #e2e7ee;
  font-weight: 400;
  font-size: 14px;
  transition: 0.5s all;
  background-color: var(--color-white);
}
.submenu-dropdown .nav-link:hover {
  /* background: linear-gradient(90deg, #ff63ae 0%, #ff8f51 100%);

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  color: var(--color-primary);
}
.submenu-dropdown .nav-item:last-child .nav-link {
  border: none;
}
.main-menu .nav-item .nav-link {
  position: relative;
  padding:24px 12px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}
.submenu-dropdown ul .nav-item .nav-link {
  padding:12px 16px;
}
.nav-wrappers {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.custom_badge span {
  color: var(--color-secondery);
  font-size: 14px;
  font-weight: 500;
}
.custom_badge {
  border-radius: 16px;
  border: 1px solid #2150650D;
  ;
  background: #2150650D;;
  mix-blend-mode: multiply;
  padding: 4px 12px;
  display: inline-flex;
  line-height: 1.3;
}
/* .main-menu .nav-item .nav-link::after {
  box-sizing: border-box;
  position: absolute;
  right: 0;
  top: 17px;
  content: "";
  height: 8px;
  width: 8px;
  border-style: solid;
  border-color: var(--color-light-primary);
  border-width: 0px 1px 1px 0px;
  transform: rotate(45deg);
  transition: 0.5s all;
} */

.select-wrap {
  position: relative;
}
.select-wrap::after {
  box-sizing: border-box;
  position: absolute;
  right: 15px;
  top: 17px;
  content: "";
  height: 8px;
  width: 8px;
  border-style: solid;
  border-color: var(--color-white);
  border-width: 0px 1px 1px 0px;
  transform: rotate(45deg);
  transition: border-width 150ms ease-in-out;
  pointer-events: none;
}
.submenu-dropdown .nav-link::after {
  display: none;
}
.main-menu .nav > .nav-item {
  margin-right:4px;
}
.toggle-menu {
  display: none;
  background-color: transparent;
  border: none;
  outline: none;
}
.toggle-menu span {
  display: flex;
  width: 30px;
  height: 3px;
  margin-bottom: 7px;
  position: relative;
  background: var(--color-primary);
  border-radius: 10px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
.home .toggle-menu span {
  background-color: var(--color-white);
}
.toggle-menu span:nth-last-child(2) {
  transform-origin: 0% 100%;
}
.toggle-menu.active span {
  opacity: 1;
  transform: rotate(45deg) translate(1px, 2px);
  background: #000;
}
.toggle-menu.active span:nth-child(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
.toggle-menu.active span:nth-child(3) {
  transform: rotate(-45deg) translate(0px, -4px);
}
/*****home******/
.hero-section {
  padding:100px 0px;
  background: var(--color-gray);
  margin-bottom:15px;
}
/* When a breadcrumb sits at the top of the hero, tuck it up near the header
   instead of leaving the full 100px of empty top padding above it. */
.hero-section.has-breadcrumb {
  padding-top: 36px;
}
.hero-section .title {
  color: var(--color-primary);
  font-weight: 700;
}
/* Slim hero variant (research/trust pages): tighter vertical padding since the
   tall registration form no longer sets the section height. */
.hero-section.hero-compact {
  padding: 64px 0 48px;
}
.hero-compact .hero-content .description {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
/* When the compact-hero CTA jumps to the bottom registration form, leave a
   little breathing room above it (header is not sticky, so a small offset is
   all that's needed). */
#top-registration-form {
  scroll-margin-top: 24px;
}
.hero-content .description {
  font-size: 16px;
}
.client-data-wrap {
  display: flex;
  align-items: center;
  padding-right: 15px;
  margin-right: 15px;
}
.client-data-wrap .student-img img {
  width: 80px;
}
.client-data-wrap .student-img {
  margin-right: 15px;
}
.happy-student .value {
  margin: 0 0 3px;
  letter-spacing: -1px;
  color: var(--color-primary);
  font-weight: 700;
}
.star-rating {
  display: flex;
  align-items: center;
}
.star-rating img {
  margin-right: 10px;
}
.happy-student {
  margin-top: 50px;
  display: flex;
}
.client-data-wrap p {
  margin: 0;
}
.register-form-wrap {
  background-color: var(--color-secondery);
  border-radius: 6.88px;
  padding: 32px;
}
.register-form-wrap h5 {
  font-size: 32px;
  font-weight: 700;
  line-height: 28.9px;
  display: flex;
  /* font-style: italic; */
}
.register-form-wrap h3 {
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  color: #EAECF0B2;
}
.register-form-wrap h5 .custom_badge {
  margin-left: 8px;
  font-style: normal;
}
.submit-btn-wrap .dark-btn {
  /* width: 100%; */
  margin-top: 15px;
  background: var(--color-white);
  color: #16203f;
  padding: 15px 69px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20.64px;
}

.register-form-control{
    border: 0.86px solid #EAECF066;
    border-radius: 5.16px;
    background: transparent;
    color: #EAECF0 !important;
}
input.form-control.register-form-control::placeholder {
  color: #5A7E8E !important;
}
.input-wrap label {
  font-size: 13px;
  font-weight: 500;
  line-height: 25.6px;
  color: #EAECF0;
}
.hero-content {
  padding-right: 60px;
}
.shape-line svg {
  width: 100%;
}
.shape-line path {
  fill: var(--color-gray);
  width: 100%;
}

.secton-header p {
  margin: 18px 0 0;
}
.choose-box-wrap .box-wrap {
  display: flex;
}
.choose-box-wrap .img-wrap {
  margin-right: 20px;
  width: 50px;
}
.choose-box-wrap .img-wrap img{ 
  width:100%;
}
.choose-box-wrap .box-wrap {
  display: flex;
}
.choose-box-wrap .box-wrap .content-wrap {
  max-width: 80%;
}
.choose-box-wrap .box-wrap h5 {
  margin-bottom: 11px;
}
.testimonials .item {
  border-radius: 8px;
  background-color: var(--color-secondery-light);
  min-height: 240px;
  color: var(--color-white);
}
.testimonials .item h5, .testimonials-wrap .secton-header h2 {
  color:var(--color-white);
}

.about-data {
  padding-left:40px;
}
.faq-wrap-main {
  margin: 0 0 80px;
}
.testimonials-wrap {
  padding: 80px 0;
}
.faq-wrap .box-wrap {
  padding-right: 20px;
}
.owl-carousel .owl-dots .owl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50px;
  background-color:var(--color-secondery-light);
  margin: 0 5px;
}
.owl-carousel .owl-dots {
  text-align: center;
  margin-top: 20px;
}
.owl-carousel .owl-dots .owl-dot.active {
  background-color: #5180A3  ;
}
.blog {
  margin: 80px 0;
}
.blog a {
  color: var(--color-light-primary);
}
.blog h5 {
  position: relative;
  font-size: 18px;
}
.blog h5 .link-arrow {
  position: absolute;
  right: 0;
}
.blog-box-wrap .image-wrap {
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}
.blog-box-wrap:hover .image-wrap img {
  transform: scale(1.1);
}
.blog-box-wrap .image-wrap img {
  transition: 0.5s all;
}
.read-more-wrap {
  text-align: center;
  margin: 50px 0 0;
}
.read-more-wrap .dark-btn {
  color: var(--color-white);
}
footer {
  background: linear-gradient(97.04deg, #183959 0%, #215065 100%);
  color: var(--color-white);
  padding: 60px 0 0px;  
}
footer h5,
footer h6,
footer h4 {
  color: var(--color-white);
}
footer p,
footer ul,
footer ul a {
  color: #eaecf0;
  font-size: 12px;
}

.history_wrap {
  background-color: var(--color-gray);
  background: linear-gradient(103.26deg, #FFFFFF -5.76%, #ECF4FA 99.99%);

  padding: 80px 0;
}
.connect-box li b {
  font-weight: 500;
}
.connect-box h6 {
  font-size: 14px;
  font-weight: 600;
}
.copyright .copyright-container {
  border-top: 1px solid rgb(255 255 255 / 10%);
  color: #eaecf0;
}
.copyright-container ul {
  margin: 0;
}
.connect-box h6 {
  font-size: 14px;
  font-weight: 600;
}
.connect-box ul {
  margin: 0;
}
.connect-box li {
  margin: 10px 0;
}
.connect-box .icon {
  margin-right: 5px;
}
.connect-box li a,
.connect-box li,
.connect-box p {
  font-size: 12px;
}

.social-links li:not(:last-child) {
  margin-right: 20px;
}
.policy-links li:not(:last-child) {
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.card-profile {
  display: flex;
  margin-top: 24px;
  align-items: center;
}
.profile-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
}
.card-profile-info {
  margin-left: 12px;
}
.profile-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.date {
  font-size: 14px;
  margin: 0;
  line-height: 1.2;
}
.why-choose-us {
  margin: 80px 0;
  background: var(--color-gray);
  padding: 80px 0;
}
.perfect-tutors-card {
  background-color: #e8f3f94d;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #26618230;
}
.perfect-tutors-card:not(:last-child) {
  margin-bottom: 16px;
}
.tutors-img-wrap img {
  border-radius: 4px;
  max-height: 144px;
  width: 100%;
}
.tutors-img-wrap {
  width: 160px;
  min-width: 160px;
  margin-right: 15px;
  display: flex
;
  align-items: center;
}
.find-tutors {
  margin-bottom: 80px;
}
.details-wrap .name-wrap li {
  color: var(--color-primary);
  margin-right: 15px;
  display: flex;
  align-items: center;
}
.details-wrap .name-wrap li .icon-wrap {
  margin-right: 8px;
}
.mr-top {
  margin-top: 80px;
}
.mr-bottom {
  margin-bottom: 80px;
}
.mr-top-50 {
  margin-top:50px;
}
.mr-bottom-50 {
  margin-bottom:50px;
}
.meet-via-zoom {
  background:#45C646;
  color: var(--color-white);
  font-weight: 500;
  font-size: 11px;
  border-radius: 4px;
  padding:2px 4px;
  box-sizing: border-box;
  display: inline-block;
  margin-left: 10px;
}
.tutors-content-wrap .name-wrap h5 {
  display: flex;
  align-items: center;
}
.feature-wrap h5 {
  font-weight: 500;
  margin-bottom: 1rem;
}
.card-grid-wrappers p b {
  font-weight: 400;
  color: var(--color-primary);
}
.form-control:focus {
  border-color: var(--color-secondery) !important;
  outline: 0;
  box-shadow: 0 0 0 1px var(--color-secondery) !important;
}
.form-control.register-form-control:focus {
  background: transparent;
  border: 0.86px solid #EAECF0;
  border-color: #EAECF0 !important;
}
.register-form-control option {
  color: #215065;
}
.register-form-control:disabled {
  background: transparent;
  color: #5A7E8E !important;
  opacity: 1;
  -webkit-text-fill-color: #5A7E8E;
  cursor: not-allowed;
}
.contact-details h6 {
  font-weight: 500;
}
.search-wrap {
  text-align: right;
}
.history_wrap .history-data {
  padding-right:40px;
}
.mentor-box {
  padding: 12px;
  border: 1px solid #26618230;
  border-radius: 8px;
  background: #E8F3F94D;
  height:100%;
}
.mentor-box ul li {
  margin: 10px 0;
}
.mentor-box ul {
  list-style-type: disc;
  padding-left: 15px;
  margin: 0;
}
.mentore-box-wrap .container .row {
  margin: 0 -25px;
}
.testimonials-video video{
  width: 100%;
}
.faq-wrap-main .faq-col {
  margin-bottom:40px !important;
}

.faq-wrap-main .faq-col:last-child,
.faq-wrap-main .faq-col:nth-last-child(2) {
  margin-bottom: 0 !important;
}
.fc .fc-col-header-cell-cushion,.fc .fc-daygrid-day-number{
  color: var(--color-light-primary);
}
.fc .fc-button {
  text-transform: capitalize;
}
.fc .fc-button:focus {
  box-shadow: none !important;
}
.review-col .box-wrap .image-wrap {
  max-width: 180px;
  min-width: 180px;
  margin-right: 20px;
}
.review-col .box-wrap  {
display: flex;
align-items: center;
}
.location-type-block {
  margin: 80px -30px 0;
}
.location-type-block .col-wrap {
  padding: 0 30px;
}
.why-choose .why-choose-us {
  margin-bottom: 0;
}
.login-section .login-field {
  padding-right: 100px;
}
.forot-password a{
  color: var(--color-primary);
  font-weight: 600;
}
.login-section .description,.login-btn-wrap{
  margin-bottom: 30px;
}

.input-wrap .icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 25px;
}
.input-wrap {
  position: relative;
}
.card-grid-wrappers .card-col-wrap:not(:last-child) {
  margin-top:50px;
  margin-bottom: 20px;
}
.card-grid-wrappers .card-col-wrap:last-child{
  margin-bottom:30px;
}
.card-img-wrap .img-fluid {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  object-position: center;
}
.hero-banner-section{
  margin-top: 32px;
}
.hero-banner-section .row{
  padding:80px;
  margin-bottom: 20px;
  background:linear-gradient(45deg, #204D63 40%, transparent), url("../images/sat_workshop_sandiego.900a050eb0ed.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  color: var(--color-white);
}
.hero-banner-section .hero-content{
  padding: 0;
}
.hero-banner-section .hero-content h1{
  color: var(--color-white);
  margin-bottom: 20px;
}
.hero-banner-section .hero-content .description{
  margin-bottom: 40px;
}
.services-wrap .list-type li {
  display: flex;
  align-items: center;
  margin:15px 0;
}
.services-wrap .list-type li p{
  margin:0px;
}
.services-wrap .list-type .icon {
  margin-right: 10px;
}
.services-wrap .list-type .icon {
  margin-right: 10px;
}
.services-wrap .list-type li p a{
  color: var(--color-light-primary);
}
.audio-player {
  background-color: #fff; 
}
.audio-tag {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translatex(-50%);
  width: 80%;
}
.audio-tag audio {
  width: 100%;
}
.forgot-login{
  color: var(--color-light-primary);
}
.forgot-login a{
  color: var(--color-secondery);
}
.tutorprofile{
  padding: 80px 0 0;
}
.tutorprofile .name-wrap h5 {
  display: flex;
  align-items: center;
}
.service-data-wrap .zoom-link:hover {
  color: var(--color-secondery);
}

.fc .fc-button-primary,.fc .fc-button-primary:disabled {
  background-color: #215065;
  border-color: #215065;
  color: var(--fc-button-text-color);  
}
.fc .fc-toolbar-title {
  font-size: 1.35em;
  margin: 0px;
  font-weight: 500;
}
@media (min-width: 1200px) {
  header .nav-item:hover .submenu-dropdown {
    opacity: 1;
    margin-top: 0px;
    transform: translatey(0px);
    visibility: visible;
    height: auto;
    
    max-height: fit-content;
  }
  header .nav-item:hover > .nav-link:after {
    transform: rotate(225deg);
    top: 20px;
  }
  .login-btn {
    display: inline-flex;
    align-items: center;
}
}
@media (max-width: 1024px) {
  .login-section .login-field {
    padding-right: 30px;
}
  .card-grid-wrappers .row:nth-child(even) .col-lg-6.col-md-12:first-child {
    order: 2;
  }
  .happy-student {
    justify-content: center;
  }
  .register-form-wrap h5 {   
    justify-content: center;
}
  .main-menu .nav-item .nav-link {
    padding: 10px 16px;
}
  .main-menu {
    align-items: flex-start;
    justify-content: flex-end;
    position: fixed;
    right: -100%;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    flex-wrap: wrap;
    height: 100vh;
    width: 100%;
    transition: 0.5s all;
  }
  .main-menu.active {
    right: 0;
  }
  .main-menu .nav {
    flex-wrap: wrap;
    width: 100%;
  }
  .main-menu .nav > .nav-item {
    margin-right: 0;
    width: 100%;
  }
  .nav-wrappers {
    width: 320px;
    background-color: var(--color-white);
    height: 100%;
    padding-top: 70px;
    display: inline-block;
  }
  .main-menu .nav-item .nav-link::after {
    right: 15px;
  }
  .login-btn {
    /* Was `margin: 10px 7px 0` — the lone top margin staggered Log In
       5px below Book Free Session in the mobile menu's flex row, and
       the side margins fought the flex gap. The row's spacing comes
       from .header-actions below. */
    margin: 0;
  }
  /* Inset the buttons row to match the nav links' 16px text inset —
     without this the Log In pill sits flush against the panel edge.
     (Pill-width trims live in elite.css's mobile block — it loads
     later and owns button styling.) */
  .header-actions {
    padding: 0 16px;
  }
  .toggle-menu {
    display: block;
    z-index: 1;
  }
  .logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .hero-content {
    padding-right: 0;
  }
  .about-data {
    padding-left: 0;
  }
  .hero-section {
    padding: 80px 0 30px;
    margin-bottom: 0;
}
  .policy-links li:not(:last-child) {
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 15px;
  }
  .card-profile {
    margin-top: 17px;
    align-items: center;
    margin-bottom: 15px;
  }
  li.nav-item .submenu-dropdown {
    width: 100%;
    position: static;
    transform: inherit;
  }
  li.nav-item.active .submenu-dropdown {
    max-height: fit-content;
    visibility: visible;
    opacity: 1;
  }
  header .nav-item.active > .nav-link:after {
    transform: rotate(225deg);
    top: 20px;
  }
  .about-img img {
    width: 100%;
  }
  .history_wrap .history-data {
    padding-right: 0px;
}
}
@media(max-width:991px){
  .tutors-img-wrap {
    margin: 0 0 15px;
}
.tutors-content-wrap .btn-wrap {
  margin-bottom: 15px;
}
.faq-wrap-main .faq-col:nth-last-child(2) {
  margin-bottom:40px !important;
}
}
@media (max-width: 767px) {
  .review-other-website .review-col {
    margin-bottom: 50px !important;
}
.review-other-website .secton-header h3 {
  text-align: center;
}
  .tutors-img-wrap img {    
    width: 100%;
    max-height: 300px;
}
.search-tutors  .input-wrap {
  margin: 15px 0;
}
 .search-tutors .select-type {
  margin-top: 15px;
}
.perfect-tutors-card {  
  width: 95%;
  margin: 0 auto;
}
.ps-0 {
  padding-left: 15px!important;
}
.tutors-img-wrap {
  margin: 0 0 15px;
  width: 100%;
  min-width: 100%;
}
.details-wrap .name-wrap li {
  margin: 5px 0px;
}

  .secton-header {
    margin: 0 0 30px;
  }
  .shap-wrap svg {
    height: 18px;
  }
  .blog {
    margin: 50px 0;
  }
  footer {
    padding: 50px 0 0px;
  }
  .register-form-wrap {
    padding: 25px 15px;
  }
  .happy-student {
    margin-top: 50px;
    flex-wrap: wrap;
    text-align: left;
  }
  .client-data-wrap {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
    width: 100%;
    justify-content: center;
  }
  .rating {
    margin-top: 15px;
    margin: 15px auto 0;
  }
  .hero-section {
    padding: 50px 0 50px;
  }
  .faq-wrap-main .faq-col {
    padding: 0 14px !important;
}
.faq-wrap-main .secton-header {
  text-align: left;
}
 h3 br {
  display: none;
}
  .why-choose-us {
    margin: 50px 0;
  }
  .choose-box-wrap .box-wrap {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .choose-box-wrap .box-wrap .content-wrap {
    max-width: 100%;
  }
  .choose-box-wrap .img-wrap {
    margin: 0 0 20px;
  }
  .choose-box-wrap.row {
    margin: 0 0px;
  }
  .faq-wrap-main {
    margin: 0 0 50px;
  }
  .testimonials-wrap {
    padding: 50px 0 50px;
  }
  .history_wrap {
    padding: 50px 0;
  }
  .card-grid-wrappers .pe-0 {
    padding-right: 0.75rem !important;
  }
  .card-grid-wrappers .ps-0 {
    padding-left: 0.75rem !important;
  }
  .read-more-wrap {
    margin: 30px 0 0;
  }
  .mr-bottom {
    margin-bottom: 50px;
  }
  .card-grid-wrappers .contact-details .ps-0 {
    padding: 0 !important;
  }
  .mentore-box-wrap .container .row {
    margin: 0 -10px;
}
.review-col .box-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.review-col .box-wrap .image-wrap {
  margin: 0 0 15px;
}
.location-type-block {
  margin:50px 0px 0;
  flex-wrap: wrap;
}
.location-type-block .col-wrap {
  padding: 0 0px;
}
.location-type-block .col-wrap:not(:last-child) {
  margin-bottom:20px;
}
.login-section .login-field {
  padding-right:0px;
}
.login-field-wrap .col-sm-12:first-child {
  order: 2;
  margin-top: 20px;
}
.mr-top{
  margin-top: 50px;
}
.login-section {
  margin-top: 0;
}
.card-col-wrap .card-col-text{
  order: 2;
}
.meet-via-zoom {  
  margin-left: 8px;
}
.fc .fc-toolbar-title {
  font-size: 1.3em;
  margin: 0px;
}
.faq-wrap-main .faq-col,.faq-wrap-main .faq-col:nth-last-child(2) {
  margin-bottom: 10px !important;
}
.hero-banner-section .row {
  padding: 30px 15px;  
}
.hero-banner-section {
  margin-top: 10px;
}
.card-img-wrap .img-fluid {
  max-height:auto;
 
}
.location-services .secton-header {
  text-align: left;
}
.tutorprofile {
  padding:50px 0 0;
}
.dark-btn.search-btn {
  margin-top:30px;
}
}

/* Blog */
.blog-content { font-size: 16px; line-height: 1.8; color: var(--color-primary); }
.blog-content h2 { margin-top: 36px; margin-bottom: 16px; font-size: 1.5rem; }
.blog-content h3 { margin-top: 28px; margin-bottom: 12px; font-size: 1.25rem; }
.blog-content p { margin-bottom: 18px; }
.blog-content ul, .blog-content ol { margin-bottom: 18px; padding-left: 28px; }
/* Restore list markers inside post bodies (the global `ul {list-style:none}`
   reset for nav menus otherwise strips bullets/numbers). */
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { margin-bottom: 6px; display: list-item; }
.blog-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0; }
.blog-content blockquote {
  border-left: 4px solid var(--color-accent-light);
  padding: 16px 24px;
  margin: 24px 0;
  background: var(--color-accent-bg);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.blog-content a { color: var(--color-secondery); text-decoration: underline; }

/* Quick-link cards (e.g. the 404 "Popular Pages" grid) — matches the
   white icon-card style used across the info pages, with a hover lift. */
.quick-link-card {
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  height: 100%;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.quick-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.quick-link-card i {
  font-size: 2rem;
  color: var(--color-accent);
}
.quick-link-card h5 {
  margin: 0;
}

/* Breadcrumb nav — sits at the top of the hero on regional pages */
.hero-breadcrumb {
  margin-bottom: 20px;
}
.hero-breadcrumb .breadcrumb {
  font-size: 0.85rem;
  margin: 0;
  flex-wrap: wrap;
}
.hero-breadcrumb .breadcrumb-item a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.hero-breadcrumb .breadcrumb-item a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
.hero-breadcrumb .breadcrumb-item.active {
  color: var(--color-light-primary);
}
.hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "\203A"; /* › */
  color: var(--color-accent);
  padding-right: 0.5rem;
}

/* FAQ section band — a soft tinted background so the FAQ visibly separates
   from the (often white) sections above/below. Blue by default; the --green
   variant is used on the homepage, where the section directly above is already
   blue, so the FAQ still contrasts its neighbour. */
.faq-section {
  background: var(--color-gray);
  padding: 60px 0;
}
.faq-section--green {
  background: var(--color-accent-bg);
}
.faq-section--white {
  background: #fff;
}

/* FAQ accordion — theme the Bootstrap accordion to match the site (its
   default is a blue that clashes with the green/navy palette). */
.faq-accordion .accordion-item {
  border: 1px solid var(--color-gray);
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.faq-accordion .accordion-button {
  font-weight: 600;
  color: var(--color-secondery);
  background: #fff;
}
.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--color-secondery);
  background-color: var(--color-accent-bg);
  box-shadow: none;
}
.faq-accordion .accordion-button:focus {
  border-color: var(--color-accent-light);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.05);
}
.faq-accordion .accordion-button:not(.collapsed)::after {
  /* tint the chevron toward the accent color when open */
  filter: hue-rotate(90deg);
}
.faq-accordion .accordion-body {
  font-size: 15px;
  color: var(--color-light-primary);
}

/* Grouped "Subjects" dropdown — category headers + clean inner lists.
   Single-column + sectioned (works identically on desktop and mobile). */
.submenu-grouped .submenu-group-header {
  display: block;
  padding: 10px 16px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent);
  font-weight: 700;
}
.submenu-grouped .submenu-group > ul {
  border: none;
  max-height: none;
}
.submenu-grouped .submenu-group:not(:last-child) > ul {
  border-bottom: 1px solid var(--color-gray-200);
}

/* On-page "Explore Subjects" grid — per-group category titles */
/* Subject cross-link mesh (includes/subject_links.html) — compact, left-aligned
   rows of pill links, one row per category. Replaces the old wide centered
   button grid. */
.subject-mesh {
  margin-top: 6px;
}
.subject-mesh-group {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(28, 36, 75, 0.08);
}
.subject-mesh-group:first-child {
  border-top: none;
}
.subject-mesh-label {
  flex: 0 0 116px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent);
  font-weight: 700;
  padding-top: 5px;
}
.subject-mesh-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.subject-pill {
  display: inline-block;
  padding: 6px 15px;
  border-radius: 20px;
  background: var(--color-gray);
  color: var(--color-secondery);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.subject-pill:hover {
  background: var(--color-accent);
  color: #fff;
}
/* On a gray section the gray pills would disappear — flip them to white. */
.subject-mesh--on-gray .subject-pill {
  background: #fff;
}
.subject-mesh--on-gray .subject-pill:hover {
  background: var(--color-accent);
  color: #fff;
}
@media (max-width: 767px) {
  .subject-mesh-group {
    flex-direction: column;
    gap: 8px;
  }
  .subject-mesh-label {
    flex-basis: auto;
    padding-top: 0;
  }
}

/* Keep the Log in button text on one line (it squished to two in the
   nav's tight-width transition zone). */
.login-btn {
  white-space: nowrap;
}

/* Nav breakpoint unification: the desktop nav only fits on one line at ~1200px+
   (Bootstrap's 992px col split + the old 1025px nav breakpoint created a broken
   middle zone). Keep the mobile hamburger + off-canvas menu all the way up to
   1199px, then the desktop nav (col-xl split + the min-width:1200 hover block)
   takes over. These mirror the <=1024px mobile-nav rules — NAV ONLY, so page
   content layout is untouched. */
@media (min-width: 1025px) and (max-width: 1199.98px) {
  .toggle-menu {
    display: block;
    z-index: 1;
  }
  .logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .main-menu {
    align-items: flex-start;
    justify-content: flex-end;
    position: fixed;
    right: -100%;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    flex-wrap: wrap;
    height: 100vh;
    width: 100%;
    transition: 0.5s all;
  }
  .main-menu.active {
    right: 0;
  }
  .main-menu .nav {
    flex-wrap: wrap;
    width: 100%;
  }
  .main-menu .nav > .nav-item {
    margin-right: 0;
    width: 100%;
  }
  .main-menu .nav-item .nav-link {
    padding: 10px 16px;
  }
  .nav-wrappers {
    width: 320px;
    background-color: var(--color-white);
    height: 100%;
    padding-top: 70px;
    display: inline-block;
  }
  .main-menu .nav-item .nav-link::after {
    right: 15px;
  }
  li.nav-item .submenu-dropdown {
    width: 100%;
    position: static;
    transform: inherit;
  }
  li.nav-item.active .submenu-dropdown {
    max-height: fit-content;
    visibility: visible;
    opacity: 1;
  }
  header .nav-item.active > .nav-link:after {
    transform: rotate(225deg);
    top: 20px;
  }
  .login-btn {
    /* Was `margin: 10px 7px 0` — the lone top margin staggered Log In
       5px below Book Free Session in the mobile menu's flex row, and
       the side margins fought the flex gap. The row's spacing comes
       from .header-actions below. */
    margin: 0;
  }
  /* Inset the buttons row to match the nav links' 16px text inset —
     without this the Log In pill sits flush against the panel edge.
     (Pill-width trims live in elite.css's mobile block — it loads
     later and owns button styling.) */
  .header-actions {
    padding: 0 16px;
  }
}