* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'BuenosAires';
}



/* navbar */


/* herosection */

.heroSection {
  margin: 90px auto 0;
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* ---------- Stats Bar ---------- */
.heroStatsBar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  padding: 18px 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.statItem { display: flex; align-items: center; gap: 12px; }

.statIcon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #195057;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.statText { display: flex; flex-direction: column; line-height: 1.3; }
.statNumber, .statLabelBold { font-weight: 800; font-size: 16px; color: #252525; }
.statLabel { font-size: 13px; color: #6b6b6b; max-width: 190px; }

.statDivider { width: 1px; height: 40px; background: #e2e2e2; }

@media (max-width: 768px) {
  .heroStatsBar { flex-direction: column; gap: 14px; padding: 16px; }
  .statDivider { width: 80%; height: 1px; }
  .heroSection {margin-top: 0;}
}

/* ---------- Main Hero Content ---------- */
.heroContent {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.imageColumn { flex: 0 0 26%; display: flex; }
.heroImage { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }

.textColumn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 5px 10px;
}

.hero-title {
  font-size: 46px !important;
  line-height: 1.15;
  font-weight: 800;
  color: #252525;
}

.hero-title .highlight { color: #1D8BA1; }
.hero-title .dot, .hero-tagline .dot { color: #f4a623; }

.hero-tagline {
  font-size: 17px;
  font-weight: 700;
  color: #2c2c2c;
  margin-bottom: 0px;
}

.hero-divider-accent {
  width: 60px;
  height: 3px;
  background: #f4a623;
  border-radius: 2px;
  margin: -2px 0;
}

.hero-subtitle {
  font-size: 20px;
  font-weight: 700;
  color: #195057;
}

.hero-description {
  font-size: 15px;
  color: #5a5a5a;
  line-height: 1.7;
  max-width: 480px;
}

.heroButtons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

@media (max-width: 992px) {
  .heroContent { flex-direction: column; }
  .imageColumn { flex: none; width: 100%; height: 220px; }
  .heroImage { border-radius: 16px; }
}

/* ---------- Feature Strip ---------- */
.heroFeatureGrid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  padding: 22px 26px;
  margin-top: 40px;
  gap: 16px;
  flex-wrap: wrap;
}

.featureItem { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; }
.featureIcon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #195057;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.featureText h4 { font-size: 14px; font-weight: 700; margin: 0 0 4px; color: #252525; }
.featureText p { font-size: 12.5px; color: #6b6b6b; margin: 0; }
.featureDivider { width: 1px; height: 44px; background: #eaeaea; }

@media (max-width: 768px) {
  .heroFeatureGrid { flex-direction: column; align-items: stretch; }
  .featureDivider { display: none; }
}

/* ---------- Bottom CTA Bar ---------- */
.heroBottomCTA {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  padding: 20px 26px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ctaLeft h3 { font-size: 19px; font-weight: 800; color: #252525; margin: 0 0 4px;  margin-left: 120px;}
.ctaLeft p { font-size: 14px; color: #1D8BA1; font-weight: 600; margin: 0; max-width: 400px; margin-left: 120px; }

.ctaRight { display: flex; gap: 30px; flex-wrap: wrap; margin-right: 120px; }

.ctaLink {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #252525;
  padding: 8px 4px;
}

.ctaLinkIcon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #f2f2f2;
  color: #195057;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.ctaLinkText { display: flex; flex-direction: column; line-height: 1.3; }
.ctaLinkText strong { font-size: 13.5px; }
.ctaLinkText small { font-size: 11.5px; color: #8a8a8a; }
.ctaChevron { color: #b5b5b5; font-size: 14px; }

@media (max-width: 768px) {

  .heroBottomCTA{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ctaLeft{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .ctaLeft h3,
  .ctaLeft p{
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    max-width: 100%;
  }

  .ctaRight{
    width: 100%;
    flex-direction: column;
    margin-right: 0;
  }

  .ctaLink{
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 1300px) {
  .ctaRight {margin-right: 0px; }
  .ctaLeft {align-items: center; text-align: center;}
  .ctaLeft h3{margin-left: 0px; text-align: center;}
  .ctaLeft p{margin-left: 0px; max-width: 300px; text-align: center;}
}

.primaryBtn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #195057 0%, #4ED0E1 100%);
  border: none;
  color: white;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.3s ease;
  width: fit-content;
  height: 40px;
  width: 250px;
  font-size: 15px;
}

.primaryBtn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  animation: whiteLightSweep 2s linear infinite; 
}


.primaryBtn:hover::before {
  animation: shimmer 0.5s linear infinite;
}


@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}


@keyframes whiteLightSweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}


.secondaryBtn {
  background: transparent;
  color: #287781;
  border: 2px solid #287781;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 40px;
  width: 250px;
}



.secondaryBtn:hover {
 background-color: #1d5e65;
  color: white;
}

/* modal bg */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  padding: 20px; 
}


.modal-content {
  background: white;
  display: flex;
  border-radius: 15px;
  overflow: hidden;
  max-width: 800px;
  width: 90%;
  position: relative;
}


.modal-left {
  flex: 1;
}

.modal-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.modal-right {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.modal-right h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}


.modelLinks {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  background: #287781;
  border: none;
  border-radius: 25px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 28px;
  height: 28px;
  background: #ccc;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close:hover {
  background: #999;
  color: white;
}


@media (max-width: 768px) {

  .secondaryBtn {
    width: 100%;
}
  .modal {
    padding: 10px; 
  }

  .modal-content {
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
  }

  .modal-left {
    display: none;
  }

  .modal-right {
    padding: 20px;
  }

  .modal-right h2 {
    font-size: 18px;
  }

  .modelLinks {
    font-size: 13px;
    padding: 10px;
  }
}


@media (max-width: 480px) {
  .modal-left {
    height: 150px;
  }

  .modal-right {
    padding: 15px;
  }

  .modal-right h2 {
    font-size: 16px;
  }

  .modelLinks {
    font-size: 12px;
    padding: 8px;
  }
}


.testimonial {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
}


@media (max-width: 768px) {
  .textColumn {
    text-align: center;
    padding: 20px;
  }

  .textColumn h1 {
    font-size: 24px;
  }

  .textColumn p {
  font-size: 12px;
}

   .trustBadge {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0 auto 16px auto;
  }

   .heroButtons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .heroButtons button {
    flex: 1 1 auto;
  }

  .testimonial {
    justify-content: center;
  }

  .hero-divider {
    margin: 16px 0;
  }
}

.scrollingBanner {
  width: 100%;
  height: 30px;
  background: #195057;
  color: #fff;
  padding: 20px 0 ;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


.scrollText {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 20s linear infinite; 
  font-size: 14px; 
  font-weight: 400;
  align-items: center;
}

.scrollText span {
  display: inline-block;
  margin-right: 100px;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .scrollingBanner {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #195057;
    color: #fff;
    padding: 10px 0 ;
    overflow: hidden;
    align-items: center;
    justify-content: center;
  }

  .scrollText {
    font-size: 1rem; 
  }

  .scrollText span {
    margin-right: 60px; 
  }
}



/* why choose us */

.whySection {
  padding: 60px 20px;
  background-color: #fff;
}

.headingContent {
  text-align: center;
  margin-bottom: 40px;
}

.heading {
  font-size: 34px;
  font-weight: 700;
  color: #424242;
}

.subheading {
  font-size: 18px;
  color: #666;
  margin-top: 10px;
}

.gridContainer{
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:20px;
}

.card{
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:18px;
    padding:28px 24px;
    min-height:250px;

    display:flex;

    transition:.3s;
    box-shadow:0 5px 20px rgba(0, 0, 0, 0.282);
}

.cardContent{
    display:flex;
    flex-direction:column;

    align-items:center;
    text-align:center;

    width:100%;
    height:100%;
}


.why-icon{

    width:74px;

    height:74px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

}

.why-icon i{

    font-size:34px;

}
.green{

    background:#eafaf0;

    color:#16a34a;

}

.purple{

    background:#f3edff;

    color:#7c3aed;

}

.yellow{

    background:#fff8e8;

    color:#d97706;

}

.orange{

    background:#fff3ea;

    color:#f97316;

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(37,99,235,.10);

    border-color:#dbeafe;

}


.icon {
  width: 50px;
  margin-bottom: 20px;
}

.cardTitle{

    font-size:20px;

    font-weight:700;

    margin-bottom:10px;

    color:#102a63;

}
.cardSubtitle{

    font-size:16px;

    font-weight:600;

    margin-bottom:10px;

    color:#006e93;

}
.cardDesc{

    color:#6b7280;
    font-size:14px;
    line-height:1.7;

    margin-bottom:24px;

    flex-grow:1;
}
@media(max-width:1100px){

.gridContainer{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.gridContainer{

grid-template-columns:1fr;

}

}
.buttonGroup{

    display:flex;
    justify-content:center;
    gap:10px;

    width:100%;
    margin-top:auto;
}

.exploreBtn,
.knowMoreBtn{

    flex:1;

    max-width:125px;

    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    font-size:13px;
    font-weight:600;

    text-decoration:none;

    transition:.25s ease;
}

.exploreBtn{

    background:#287781;
    color:#fff;
    border:1px solid #287781;
}

.exploreBtn:hover{

    background:#195057;
    border-color:#195057;
    color:#fff;

    transform:translateY(-2px);
}

.knowMoreBtn{

    background:#f8fbfc;

    color:#287781;

    border:1px solid #d6e8eb;
}

.knowMoreBtn:hover{

    background:#287781;

    border-color:#287781;

    color:#fff;

    transform:translateY(-2px);
}

@media screen and (max-width: 1024px) {
  .gridContainer {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 768px) {
  .gridContainer {
    grid-template-columns: 1fr;
  }

  .cardContent {
    align-items: center;
    text-align: center;
  }

  .buttonGroup {
    justify-content: center;
  }
}



/* service-section */

/* testTab */

 .servicesSection {
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #fff;
}

.serviceSectionHeading {
    font-size: 2.125rem;
    font-weight: 700;
    text-align: center;
    color: #424242;
    margin-bottom: 10px;
}

.serviceSectionSubHeading {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 30px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
  color: #424242;
}

       

.toggleButtons {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 1px; 
  border-bottom: 0.5px dotted #424242; 
  gap: 1rem;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.433);
}

       
.toggleBtn {
  padding: 10px;
  line-height: 25px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
  border-image-source: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, rgba(102, 102, 102, 0.32) 100%);
  border-radius: 10px 10px 0 0px;
  background-color: #fff;
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 1rem;
  height: 3rem;
  align-items: center;
  margin-bottom: -1px;
  width: fit-content;
  flex:1;
  box-shadow: 0 5px 5px 0px rgba(0.433, 0, 0, 0.433);
}

.toggleBtn.active {
  background: linear-gradient(90deg, #195057 0%, #4ED0E1 100%);
  color: white;
}

.toggleBtn.inactive {
  color: #424242;
  background-color: white;
  border: 1px dotted #000;
}

.service-divider {
  display: none;
}
        
@media (max-width: 768px) {

.serviceSectionHeading {
    font-size: 1.5rem;
}

.serviceSectionSubHeading {
  font-size: 1rem;
}

.toggleButtons{
  gap: 0.25rem;
}

.toggleBtn {
  padding: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-wrap: nowrap;
}
}




/* testTab */

.Servicecard {
  margin-top: 30px;
  background: #fff;
  padding: 20px;
  border-radius: 10px; 
  height: auto;
}

.cardHeading {
  font-size: 2rem;
  font-weight: 700;
  margin: 1.5rem auto;
  text-align: center;
}

.cardText {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 25px;
}

.cardLoanApplyBtn {
  text-decoration: none;
  background: linear-gradient(90deg, #195057 0%, #4ED0E1 100%);
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  margin: 20px auto; 
}





.testCardContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
  overflow-x: auto;
}

.testCardCarouselContainer {
  overflow-x: auto;    
  overflow-y: hidden;     
  -webkit-overflow-scrolling: touch; 
  scrollbar-width: thin;  
  scrollbar-color: #287781 transparent;
  padding-bottom: 10px;
}

.testCardCarouselContainer::-webkit-scrollbar {
  height: 8px;
}
.testCardCarouselContainer::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 50%;
}
.testCardCarouselContainer::-webkit-scrollbar-track {
  background: transparent;
}

.testCardCarouselTrack {
  display: flex;
  gap: 20px;
  width: max-content; 
}

.testCard {
  position: relative;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
  height: fit-content;
  width: fit-content;

  
  border-radius: 12px;
  border: 1px solid #287781;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}




/* .testCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
} */

/* Image */
.testCardImg img {
  width: 30rem;
  height: 20rem;
  object-fit: fill;
}

/* Header */
.testCardHeader {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  color: #000;
}

/* Sub Header */
.testCardSubHeader {
  font-size: 1rem;
  color: #000;
  margin: 0;
}

/* Link Button */
.testCardLink {
  margin-top: auto;
  text-decoration: none;
  background: #287781;
  color: #fff;
  padding: 1rem;
  border-radius: 6px;
  font-size: 0.75rem;
  transition: background 0.3s ease;
  display: inline-block;
  font-weight: 1rem;
}

.testCardLink:hover {
  background: #1f5f63;
}

/* .testCard-1 {
  background-image: url(/assets/Images/Home/test/gre.jpg);
}
.testCard-2 {
  background-image: url(/assets/Images/Home/test/gmat.jpg);
}
.testCard-3 {
  background-image: url(/assets/Images/Home/test/ielts.jpg);
}
.testCard-4 {
  background-image: url(/assets/Images/Home/test/sat.jpg);
}
.testCard-5 {
  background-image: url(/assets/Images/Home/test/pte.jpg);
}
.testCard-6 {
  background-image: url(/assets/Images/Home/test/toefl.jpg);
} */

.testCardOverlay {
  position: absolute;
  inset: 0; 
  background: rgba(0, 0, 0, 0.4); 
  display: flex;
  align-items: flex-end; 
  justify-content: flex-start; 
  padding: 15px;
}

.testCardContent {
  color: #fff;
}

.farLeftTestCardHeader {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.farLeftTestCardSubHeader {
  font-size: 16px;
  font-weight: 400;
  margin: 2px 0 0 0;
}

.testCardIndicators {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  gap: 8px;
}

.testCardIndicator {
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.testCardIndicator.ellipse {
  width: 24px;
  border-radius: 20px;
}

.testCardIndicator.active {
  background: #287781;
}



@media (max-width: 768px) {  

  .testCardImg img {
  width: 15rem;
  height: 10rem;
  object-fit: fill;
}

/* Header */
.testCardHeader {
  font-size: 1.5rem;
  }

/* Sub Header */
.testCardSubHeader {
  font-size: 1.25rem;
}

/* Link Button */
.testCardLink {
  margin-top: auto;
  text-decoration: none;
  background: #287781;
  color: #fff;
  padding: 0.5rem;
  border-radius: 6px;
  font-size: 1rem;
  transition: background 0.3s ease;
  display: inline-block;
}

.testCardLink:hover {
  background: #1f5f63;
}

}


/* admission-tab */

.admissionGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 2rem;
  justify-content: center;
}


.admissionCard {
  width: 18.75rem;
  height: 376px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}


.countrySpecificImg {
  width: 18.75rem;
  height: 417px;
  border-radius: 20px;
  position: absolute;
  top: 59px;
  left: 0;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.3s ease;
}


.countryImgWrapper {
  position: absolute;
  top: 0;
  left: 101px;
  width: 118px;
  height: 118px;
  z-index: 2;
}

.countryImg {
  width: 118px;
  height: 118px;
  border: 1px solid #ccc;
  border-radius: 50%;
  opacity: 1;
}



.admissionCard .countryNameLabel {
  position: absolute;
  top: 90%;
  left: 5%;
  width: 18.75rem;
  height: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.3s ease;
  line-height: 20px;
  padding: 0 1px;
  border-radius: 4px;
}



.admissionCard:hover .countryNameLabel {
  display: none;
}


.admissionCard:hover .countrySpecificImg {
  opacity: 0;
}

.admissionCard:hover .hoverContent {
  opacity: 1;
  pointer-events: all;
}


.hoverContent {
  position: absolute;
  top: 59px;
  width: 18.75rem;
  height: 417px;
  background-color: #E4F7FA;
  border-radius: 20px;
  text-align: center;
  padding-top: 140px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}


.hoverContent h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #000;
}


.hoverContent p {
  font-size: 14px;
  margin: 0 20px 20px;
  color: #444;
}


.visitCountry {
  background: linear-gradient(90deg, #195057 0%, #4ED0E1 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.visitCountry img {
  width: 16px;
  height: 16px;
}


.hiddenCard {
  display: none;
}


#viewMoreBtn {
  display: none;
}


@media (max-width: 768px) {
  .admissionGrid {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  #viewMoreBtn {
    display: block;
    margin: 20px auto 0;
    padding: 12px 20px;
    background-color: #287781;
    color: white;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
  }
}


/* admission-consulting */

.admConsultWrapper {
  margin-left: calc(-1 * ((100vw - 100%) / 2)); 
  width: 100vw;
  padding: 2rem;
  background-color: #092A2E;
  color: #fff;
}

.admConsultHeading {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2rem auto;
  color: #fff;
  text-align: left;
}

.admConsultSubheading {
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #fff;
  text-align: left;
}

.admConsultGrid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
  
}

.admConsultCard {
  background-color: #092A2E;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 28px 24px;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  text-align: left;
  animation: flashAnim 2.5s infinite linear;
  color: #fff;
}

.admConsultCard:hover {
  transform: scale(1.02);
}


.admConsultCard::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}


.admConsultCard:hover::before {
  animation: fullFlash 0.7s ease forwards;
}


@keyframes fullFlash {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.admConsultCard .cardNumber {
  font-weight: 700;
  font-size: 2rem;
  background-image: linear-gradient(to bottom,#FFFFFF,rgba(153, 153, 153, 0.11) );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 1;
  line-height: 100%;
  letter-spacing: 0%;
}

.admConsultCard .cardTitle {
  opacity: 1;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1.75rem auto;
  color: #fff;
}

.admConsultCard .cardDesc {
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  opacity: 1;
}


@keyframes flashAnim {
  0%, 100% {
    box-shadow: 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.2);
  }
}


@media (max-width: 768px) {

  .admConsultWrapper {
    height: auto;
  }

  .admConsultGrid {
    grid-template-columns: 1fr; 
  }

  .admConsultCard .cardDesc {
  font-size: 0.95rem;
  color: #fff;
  width: auto;
  height: 75px;
  opacity: 1;
  margin-top: 5%;
  font-weight: 400;
  font-style: Bold;
}
}


/* loan-tab */

.loanCardsContainer {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.loanCard {
  border-radius: 20px;
  padding: 30px 20px;
  box-shadow: 0px 4px 7.6px 0px #0000001A;
}

.loanCardInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  flex-direction: row;
}

.loanCardInner.reverse {
  flex-direction: row-reverse;
}

.loanTextColumn {
  flex: 1;
  min-width: 280px;
}

.loanCardHeading {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #424242;
}

.loanCardSubheading {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 15px;
  color: #424242;
}

.loanCardList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.loanCardList li {
  display: flex;
  align-items: center;
  font-size: 15px;
  margin-bottom: 10px;
  color: #333;
}

.loanCardList img {
  width: 16px;
  margin-right: 10px;
}

.loanImageColumn {
  flex: 1;
  min-width: 280px;
  display: flex;
  justify-content: center;
}

.loanImageColumn img {
  width: 100%;
  max-width: 300px; 
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

.scrollingBankBanner {
  overflow: hidden;
  width: 100%;
  background: #fff; 
}

.scrollBankWrapper {
  display: flex;
  width: 100%;
}

.scrollImg {
  display: flex;
  animation: scrollLeft 20s linear infinite;
}

.scrollImg span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
}

.scrollImg img {
  height: 50px; 
  width: auto;
}


@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}




@media (max-width: 768px) {

  .loanCardInner,
  .loanCardInner.reverse {
    flex-direction: column;
  }

  .loanTextColumn,
  .loanImageColumn {
    width: 100%;
  }

  .loanImageColumn img {
    width: 60%;
    height: 350px;
  }
}


/* testimonial */



/* footer         */



/* chatbot  */





   /*====================================================
AI BANNER
====================================================*/

.ai-banner{

max-width:1400px;
margin:30px auto;

background:#0d5c63;

border-radius:22px;

padding:30px 40px;

display:flex;
justify-content:space-between;
align-items:center;
gap:40px;

color:#fff;

overflow:hidden;
height: 200px;

}

.ai-left{

display:flex;
align-items:center;
gap:30px;

flex:1;

}

.ai-robot{

width:190px;

}

.ai-left h2{

font-size:34px;
font-weight:700;
margin-bottom:10px;

}

.ai-left p{

opacity:.9;
line-height:1.8;
font-size:16px;

max-width:650px;

}

.ai-right{

display:flex;
flex-direction:column;
align-items:flex-end;
gap:20px;

}

.ai-btn{

background:#58c443;

padding:16px 28px;

border-radius:12px;

font-weight:700;

text-decoration:none;

color:white;

transition:.3s;

}

.ai-btn:hover{

background:#47b334;

color:white;

transform:translateY(-3px);

}

.ai-users{

display:flex;
align-items:center;
gap:12px;

}

.ai-users img{

width:90px;

}



/*====================================================
HOW IT WORKS
====================================================*/

.how-section{

max-width:1450px;

margin:30px auto;

}

.section-title{

text-align:center;

font-size:42px;

font-weight:700;

margin-bottom:40px;

}

.how-grid{

display:flex;

justify-content:space-between;

align-items:center;

gap:12px;

}

.how-card{

flex:1;

text-align:center;

position:relative;

}

.step-number{

width:32px;
height:32px;

background:#0d5c63;

border-radius:50%;

color:#fff;

font-weight:700;

display:flex;
align-items:center;
justify-content:center;

margin:0 auto 15px;

}

.how-icon{

width:95px;
height:95px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

margin:auto;

margin-bottom:18px;

}

.how-card h4{

font-size:20px;

font-weight:700;

margin-bottom:10px;

}

.how-card p{

font-size:15px;

line-height:1.6;

color:#666;

padding:0 10px;

}

.how-arrow{

font-size:34px;

color:#bdbdbd;

margin-top:40px;

}



/* colors */

.teal{

background:#e6fbf9;
color:#0f766e;

}

.yellow{

background:#fff7df;
color:#f59e0b;

}

.purple{

background:#f5edff;
color:#8b5cf6;

}

.blue{

background:#edf5ff;
color:#2563eb;

}

.red{

background:#ffecef;
color:#ef4444;

}

.green{

background:#e9fff0;
color:#16a34a;

}

.sky{

background:#eef8ff;
color:#0ea5e9;

}



/*======================
Responsive
======================*/

@media(max-width:1100px){

.ai-banner{

flex-direction:column;
text-align:center;

}

.ai-left{

flex-direction:column;

}

.ai-right{

align-items:center;

}

.how-grid{

flex-wrap:wrap;

}

.how-card{

min-width:220px;

margin-bottom:40px;

}

.how-arrow{

display:none;

}

}



/* ── Redesigned Test Prep & Loan Tabs ── */
.redesignedServiceWrap {
  display: grid;
  grid-template-columns: 320px 1fr 280px;
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}
.redesignedLeftPanel{
    background-image:url(/assets/Images/Home/herosection/test-hero.png);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    min-height:500px;
    border-radius:18px;
    padding:32px;
    display:flex;
    flex-direction:column;
}
.redesignedHeading {
  font-size: 2rem;
  font-weight: 800;
  color: #195057;
  margin-bottom: 4px;
  text-align: center;
}

.redesignedSubheading {
  font-size: 1rem;
  font-weight: 700;
  color: #287781;
  margin-bottom: 12px;
}

.redesignedText {
  font-size: 0.9rem;
  color: #424242;
  line-height: 1.6;
  margin-bottom: 18px;
}

.redesignedFeatureList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.redesignedFeatureList li {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.redesignedFeatureIcon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.redesignedFeatureList strong {
  font-size: 0.9rem;
  color: #195057;
  display: block;
}

.redesignedFeatureList p {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 2px 0 0;
}

.redesignedCtaBox {
  background: #195057;
  color: #fff;
  border-radius: 10px;
  padding: 16px;
  margin-top: 18px;
}

.redesignedCtaBox strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.redesignedCtaBox p {
  font-size: 0.8rem;
  opacity: 0.85;
  margin-bottom: 10px;
}

.redesignedCtaBtn {
  display: inline-block;
  background: #fff;
  color: #195057;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
}

.redesignedSectionTitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: #424242;
  margin-bottom: 14px;
}

/* Exam grid */
.examGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.examCard {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  transition: box-shadow 0.2s ease;
  display: flex;
    flex-direction: column;
    height: 100%;
}

.examCard:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.examCardTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.examCardTop h5 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
}

.examCardSub {
  font-size: 0.75rem;
  color: #6b7280;
}

.examCardIcon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.examCardPoints {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.examCardPoints li {
  font-size: 0.78rem;
  color: #374151;
  margin-bottom: 4px;
}

.examCardBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  padding: 10px 16px;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;

  color: #0f5f63;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;

  transition: all 0.3s ease;
  margin-top: auto;
}

.examCardBtn i {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.examCardBtn:hover {
  background: #0f5f63;
  color: #fff;
  border-color: #0f5f63;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 95, 99, 0.18);
}

.examCardBtn:hover i {
  transform: translateX(4px);
}

/* Test stats bar */
.testStatsBar {
  display: flex;
  justify-content: space-between;
  background: #f0fafa;
  border-radius: 12px;
  padding: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.testStatItem {
  display: flex;
  align-items: center;
  gap: 8px;
}

.testStatIcon { font-size: 1.2rem; }

.testStatItem strong {
  display: block;
  font-size: 0.9rem;
  color: #195057;
}

.testStatItem p {
  font-size: 0.7rem;
  color: #6b7280;
  margin: 0;
}

/* Right sidebar (shared by test + loan) */
.redesignedRightPanel { display: flex; flex-direction: column; gap: 16px; }

.rightPanelCard {
  background: #f0fafa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px;
}

.rightPanelCard h5 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #195057;
  margin-bottom: 14px;
}

.rightPanelItem { margin-bottom: 14px; }
.rightPanelItem strong { font-size: 0.85rem; color: #424242; display: block; }
.rightPanelItem p { font-size: 0.75rem; color: #6b7280; margin: 2px 0 0; }

.testimonialCard p {
  font-size: 0.82rem;
  font-style: italic;
  color: #374151;
  margin-bottom: 10px;
}

.testimonialCard strong { font-size: 0.82rem; color: #195057; display: block; }
.testimonialCard span { font-size: 0.72rem; color: #9ca3af; }

/* Loan-specific */
.loanFilterTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.loanFilterBtn {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.loanFilterBtn.active {
  background: #195057;
  color: #fff;
  border-color: #195057;
}

.bankList { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.bankRow {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 16px;
}

.bankLogo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }

.bankInfo { flex: 1; display: flex; flex-direction: column; }
.bankInfo strong { font-size: 0.88rem; color: #195057; }
.bankInfo span { font-size: 0.72rem; color: #9ca3af; }

.bankRate { text-align: right; margin-right: 14px; }
.bankRateLabel { display: block; font-size: 0.68rem; color: #9ca3af; }
.bankRateValue { display: block; font-size: 0.82rem; font-weight: 700; color: #059669; }

.bankCheckBtn {
  background: #f0fafa;
  color: #195057;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}

.viewAllPartnersBtn {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #195057;
  text-decoration: none;
}

.eligibilityList { list-style: none; padding: 0; margin: 0 0 14px; }
.eligibilityList li { font-size: 0.82rem; color: #374151; margin-bottom: 8px; }

.checkEligibilityBtn {
  display: block;
  text-align: center;
  background: #195057;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 9px;
  border-radius: 8px;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .redesignedServiceWrap {
    grid-template-columns: 1fr;
  }
  .examGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .examGrid {
    grid-template-columns: 1fr;
  }
  .testStatsBar {
    flex-direction: column;
  }
}

.exam-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;

    background:color-mix(in srgb, var(--icon-color) 15%, white);
}

.exam-icon i{
    font-size:28px;
    color:var(--icon-color);
}

.successStats{

    padding:40px 4%;

}

.successStatsCard{

    background-color: #e5f6f9;

    border-radius:22px;

    box-shadow:0 8px 30px rgba(0,0,0,.08);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:28px 40px;

}

.successStatItem{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

}

.successIcon{

    width:58px;
    height:58px;

    border-radius:50%;

    background:#EAF7F6;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.successIcon i{

    font-size:28px;

    color:#0B6C67;

}

.successContent h3{

    margin:0;

    font-size:2rem;

    font-weight:700;

    color:#18212A;

}

.successContent p{

    margin:4px 0 0;

    color:#666;

    font-size:.95rem;

    font-weight:500;

}

.successDivider{

    width:1px;

    height:55px;

    background:#E5E5E5;

}

@media(max-width:992px){

    .successStatsCard{

        flex-wrap:wrap;

        gap:25px;

        padding:25px;

    }

    .successStatItem{

        flex:1 1 calc(50% - 20px);

        justify-content:flex-start;

    }

    .successDivider{

        display:none;

    }

}

@media(max-width:576px){

    .successStatsCard{

        flex-direction:column;

        align-items:flex-start;

    }

    .successStatItem{

        width:100%;

    }

}