.row {
margin: 0;
padding: 0;}

/* Second Nav Bar */
.navbar2 {
  background-color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1em;
  position: relative;
  z-index: 1000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 5%;
  font-size: 1rem;
   

}

.navbar2 .logo img {
  height: 93px;
  margin-right: 50px;
  
}

.navbar-left-group {
    display: flex; /* Makes the logo and ul sit next to each other */
    align-items: center;
    flex-shrink: 1;
}

.navbar2 .btn {
  background-color:#BA1C83 ;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  border: none;
  border-radius: 100px;
  padding-top: 12px;
  width: 250px;
  height: 50px;
  cursor: pointer;
   font-size: 1rem;
  font-weight: 500;
   letter-spacing: 5%;
  transition: background-color 0.2s ease;
 
  
}

.navbar2 .btn:hover {
  background-color: #68c6b4;
  color: white;
}

.navbar2 ul {
  list-style: none;
  padding: 0;
  display: flex;  
  text-transform: uppercase;
  padding-top: 40px;
  
}



.navbar2 li {
  margin-right: 50px;
  position: relative;
  
}

.navbar2 a {
  color: #585a5c;
  text-decoration: none;
  transition: color 0.2s ease;
  
  
}

.navbar2 a:hover {
  color:  #743C97;
}

.navbar2 .dropdown-content2 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid  #743C97;
  border-radius: 10px;
  padding: 0px 10px ;
  min-width: 150px;
  text-transform: none;
}

.navbar2 .dropdown-content2 a {
  display: block;
  padding: 10px;
  color:  #743C97;
  margin: 0 -10px; /* Add this line */
  width: calc(100% + 20px); /* Add this line */
   font-family: 'Open Sans', sans-serif;
   font-size: 0.9rem;
}

.navbar2 .dropdown-content2 a:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.navbar2 .dropdown-content2 a:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.navbar2 .dropdown-content2 a:hover {
 background-color: #743C97 !important;
  color: #fff !important;
  z-index: 1001;
}

.navbar2 .dropdown:hover .dropdown-content2 {
  display: block;
}

.hamburger-menu {
  cursor: pointer;
  display: none;
}

.hamburger-menu span {
  display: block;
  width: 25px;
  height: 3px;
  background-color:  #743C97;
  margin: 5px;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  padding: 20px;
   overflow-y: auto;
  z-index: 1001;
}

.mobile-menu.show {
  display: block;
}

body.menu-open {
  overflow: hidden;
}

.mobile-menu ul {
  list-style: none;
  
}

.mobile-menu li {
  margin-bottom: 20px;
}

.mobile-menu a {
  color: #743C97;
  text-decoration: none;
  border-bottom: 1px solid #6e3788 ;
  font-family: "Poppins", sans-serif;
}

.submenu-mobile a {
  border-bottom: none ;
  
}





.close-btn {
  position: absolute;
  top: 40px;
  right: 20px;
  cursor: pointer;
  color: #fff;
  font-size: 24px;
  z-index: 1004; /* increased z-index */
  background-color: #6e3788; /* add a background color */
  padding: 10px; /* add some padding */
}

.dropdown-mobile {
  position: relative;
}

.submenu-mobile {
  display: none;
  padding-left: 20px;
}

.submenu-mobile li {
  margin-bottom: 10px;
}

@media (max-width: 968px) {
  .navbar {
    display: none;
  }
  .navbar2 ul {
    display: none;
  }
  .hamburger-menu {
    display: block;
  }

  .navbar2 .logo img {
    height: 100px;
    margin-left: 0px;
  }

  .mobile-menu .logo img {
    height: 100px;
    width: auto;
}
}





/* index first part */
.left-col {
    /* 1. Responsiveness and Layout */
    width: 100%; 
    height: 924px; 
    max-width: 100vw; 
    overflow-x: hidden; /* Prevents horizontal scrollbar */
    
    /* 2. Position Context for the Overlay/Image */
    position: relative; 
    z-index: 1; 
    
    /* 3. Content Layout */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #000; 
    margin-top: 1rem;
}

/* Pseudo-element for the Background Image and the White Overlay */
.left-col::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 4. Multi-Layer Background (The Fix) */
    /* Layer 1: The white overlay color (on top) */
    /* Layer 2: The image URL (on bottom) */
    background: 
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
        url(images/group1.png);
        
    /* 5. Image Scaling and Positioning */
    background-size: cover;      /* Crucial: ensures the image covers the container */
    background-position: center; /* Centers the image content */
    background-repeat: no-repeat;
    
    /* 6. Send to the back */
    z-index: -1; 
}


.left-col h2 {
  color:   #743E97;
  font-size: 1.75rem;
  margin-bottom: 10px;
  letter-spacing: 5%;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}

.left-col h1 {
  color: #743E97;
  font-size: 4.875rem;
  margin-bottom: 20px;
  font-weight: 600;
  line-height: 1;
  font-family: "Poppins", sans-serif;
}



.left-col .btn {
  background-color: #BA1C83;
  margin-top: 50px;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 100px;
  width: 296px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-weight: 500;
  letter-spacing: 5%;
}

.left-col .btn:hover {
 background-color: #68c6b4;
  color: white;
}
.botonnaranja{
  text-align: center;
}
.image-slider img {
  width: 100%; /* add width */
  height: auto; /* add height */
  margin-bottom: 20px; /* add margin */
}

@media (min-width: 769px) {
  .col-6 {
    flex-basis: 50%;
  }
  
}

@media (max-width: 968px) {
  .row {
    max-width: 100%; /* reset max-width */
    padding: 0 20px; /* add padding */

  }

  .left-col h1 {
    font-size:2.5rem;
    margin: 4%;
  }
  .left-col h2 {
    font-size:1.5rem;
    margin: 4%;
  }

  .left-col {
    /* 1. Responsiveness and Layout */
    width: 100%; 
    height: 462px;  }
  
}

/* experience */

.experience .row h3 {
  font-size: 1.5rem;
  font-family: "Poppins", sans-serif;
}
.experience .row h2 {
 
  font-size: 2.75rem;
  font-family: "Poppins", sans-serif;
  font-weight: bold;
}
.experience .row p {
  margin: 0 20% 0 0;
  font-size: 1.5rem;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  text-align: justify;
}

.experience .row img {
 
   margin: 0 auto;
  display: block;
  border-radius: 50%;
  border: 10px solid white;
}


@media (max-width: 968px) {
 .experience .row p {
  margin: 0 10% 0 0;
  font-size: 1.5rem;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  text-align: left;
}
  .experience .row h2 {
 
  font-size: 2rem;

}

.experience .row p {
  
  font-size: 1.2rem;
 
}
}


/* index second part */ 

.secondpart {
    font-family: "Poppins", sans-serif;
    text-align: center;
    
}

.levels h2 {
     font-size: 2.75rem;
    font-family: "Poppins", sans-serif;
    font-weight: bold;
    margin-bottom: 40px;
    color: #743E97;

}

.levels p {
    font-size: 1.188rem;
    font-weight: 400;
   color: #5E5E5E;
    
}

.card-custom h5 {
  font-size: 1.375rem;
  font-weight: 500;
  color: #BA1C83;
}

.card-custom p {
  font-size: 1.375rem;
  font-weight: 500;
  color: #BA1C83;
}



@media (max-width: 968px) {
  .levels h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 40px;
}

  
}

/*cards */

/* --- General Card Styling --- */
.card-custom {
    border: none;
    text-align: center;

    padding: 15px;
    height: 100%; /* Ensures all cards in the row have the same height */
    transition: transform 0.3s;
}

.card-custom:hover {
    transform: translateY(-5px); /* Subtle lift on hover */
}

/* Ensure images scale correctly */
.card-custom img {
    /* Use 'card-img-top' class from Bootstrap */
    width: 221px;
    height: 221px;
    margin-bottom: 15px;
}

/* --- Custom Button Styling --- */
.card-btn {
    /* Base Style */
    background-color: white; /* Purple background */
    color: #BA1C83; /* White letters */
    border: 2px solid #BA1C83; /* Ensure border is consistent */
    border-radius: 100px; /* Requested border radius */
    padding: 10px 20px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    
    height: 70px;
    width: 280px;
    /* 🎯 FIX: Vertically center text by setting line-height equal to height */
    line-height: 70px; 
    /* The padding is no longer needed for vertical spacing,
       but you may want to keep the horizontal padding. */
    padding-top: 0;
    padding-bottom: 0;
}

/* Hover Style */
.card-btn:hover {
    background-color: #BA1C83; /* White background */
    color: white; /* Purple letters */
    border-color: #BA1C83; /* Purple border */
}


@media (max-width: 968px) {
 .card-btn {
   margin-left: -20px;
}

  
}


.rowcards {
    /* 1. Forces the element to take 100% of the parent's width */
    width: 100%; 
    
    /* 2. Centers the entire block horizontally (overrides offset margins) */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Ensures no horizontal overflow or unwanted spacing */
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/*locations*/ 

.locations {
  padding: 50px 0;
  background-image: url(images/greenbgscaled.webp);
}

.location-card {
  align-items: center;
}

.locations h2 {
  text-align: center;
  margin-bottom: 50px;
   color: white;
    font-size: 2.75rem;
  font-family: "Poppins", sans-serif;
  font-weight: bold;
}

.location-card {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 20px;
  color: #743C97;

  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.location-card p {
  color: #585a5c ;
}

.location-card img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.location-card h3 {
  margin-top: 20px;
  color: #743C97;
   font-family: "Poppins", sans-serif;
   font-size: 1.75rem;
}

.location-card p {
  font-family: "Poppins", sans-serif;
  margin-bottom: 10px;
  color: #743C97;
  font-size: 1rem;
}

.location-card .btn {
  background-color:  #68c6b4;
  color: #fff;
  border: none;
  width: 286px;
  padding: 10px 20px;
  border-radius: 100px;
  cursor: pointer;
}

.button-container {
  text-align: center;
}

.location-card .btn:hover {
  background-color: #bb0e82;
}

@media (max-width: 968px) {
  .location-card {
    margin: 20px 0;
  }

  .location-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.location-card .btn {
  
  width: 200px;
 
}

.locations h2 {
  
    font-size: 2rem;
 
}
}



/* carrousel */


/* --- Custom Text Styling --- */
.text-purple {
    color: #7d4199;
    font-weight: bold;
        font-size: 2.75rem;
  font-family: "Poppins", sans-serif;
 
}

.testimonial-content {
    text-align: center; /* Center all content blocks */
    max-width: 800px; /* Constrain width of the whole block */
    margin: 0 auto;
    padding-bottom: 50px; /* Add space for indicators below */
}

/* Constrain the image/icon size and center it */
.quote-icon {
    width: 60px; /* Adjust size as needed */
    height: 60px;
}

.comment-text {
    font-size: 1.25rem;
    line-height: 1.6;
    max-width: 600px; /* Constrain the width of the comment line for better readability */
    margin: 0 auto;
    font-family: "Poppins", sans-serif;
    color: #5E5E5E;

}

.author {
    font-size: 1.1rem;
    color: #5E5E5E;
    margin-top: 30px;
    margin-bottom: 0;
    font-family: "Poppins", sans-serif;
}

.role {
    font-size: 0.9rem;
    color: #666;
    font-family: "Poppins", sans-serif;
}


/* Custom Indicator (Purple Circles) Styling */
.carousel-indicators.custom-indicators button {
    background-color: #7d4199;
    width: 10px; 
    height: 10px;
    border-radius: 50%;
    margin: 0 5px;
    opacity: 0.3; 
    border: none;
}

.carousel-indicators.custom-indicators button.active {
    opacity: 1; 
}

.carousel-indicators {
    bottom: 0;
}

/* Arrow Control Styling (Borderless and functional) */
.carousel-control-prev,
.carousel-control-next {
    background: none !important; 
    border: none !important;
    box-shadow: none !important; 
    width: auto;
    opacity: 1;
}

/* 1. Left Arrow (Previous) Icon */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    filter: none; 
    height: 30px;
    width: 30px;
}

/* 2. Right Arrow (Next) Icon */
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    filter: none;
    height: 30px;
    width: 30px;
}


@media (max-width: 968px) {
 .comment-text {
    font-size: 1.2rem;  
    line-height: 1.6;
    max-width: 600px; /* Constrain the width of the comment line for better readability */
    margin: 0 auto;
    font-family: "Poppins", sans-serif;
    color: #5E5E5E;

}
 .testimonial-content {
  margin-left: 15%;
  margin-right: 20%;
 }

 .text-purple {
   
        font-size: 2rem;
 
 
}
}



/* we come to you */ 
.come-to-you .row h3 {
  font-size: 1.5rem;
  font-family: "Poppins", sans-serif;
}
.come-to-you .row h2 {
  
  font-size: 2.75rem!important;
  font-family: "Poppins", sans-serif;
  font-weight: bold;
}
.come-to-you .row p {
  margin: 0 20% 0 0;
    margin-bottom: 0px;
  font-size: 1.5rem;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  text-align: justify;
}


.come-to-you .btn:hover {
  background-color: #bb0e82;
  border-color:#bb0e82;
}

.come-to-you img {
  margin: 0 auto;
  display: block;
  border-radius: 50%;
  border: 10px solid white;
}

.come-to-you .btn {
background-color: #68c6b4;
border-radius: 100px;
padding: 10px 20px;
border-color:#68c6b4;
width: 300px;
}

@media (max-width: 968px) {
.come-to-you .btn {
background-color: #68c6b4;
border-radius: 20px;
padding: 10px 20px;
border-color:#68c6b4;
width: 300px;
margin-left: 6%;
}

.come-to-you .row p {
  margin: 0 10% 0 0;
    margin-bottom: 0px;
  font-size: 1.2rem;
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  text-align: left;


  }



.come-to-you .row h2 {
  
  font-size: 2rem!important;
 
}


}



/* footer */ 

.footer {
  background-color: #f2f2f2;
  color: #585a5c;
  padding: 60px 100px;
  font-family: 'Poppins', sans-serif;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-section {
  flex: 1 1 45%;
  margin-bottom: 30px;
}

.footer-section h3 {
  font-size: 20px;
  letter-spacing: 1px;
  margin-bottom: 30px;
  font-weight: 600;
}

.footer-columns {
  display: flex;
  gap: 100px;
}

.footer-columns h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.footer-columns ul {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
}

.footer-columns li {
  margin-bottom: 8px;
}

.footer-columns a {
  color: #585a5c;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-columns a:hover {
  color: #743C97;
}

/* Contact section */
.footer-contact {
  display: flex;
  gap: 80px;
  flex-wrap: wrap;
}

.footer-contact .location h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.footer-contact p {
  margin: 5px 0;
  font-size: 15px;
  color: #585a5c;
}

.footer-contact i {
  color: #743C97;
  margin-right: 8px;
}

/* Responsive */
@media (max-width: 968px) {
  .footer-container {
    flex-direction: column;
  }

  .footer-section {
    flex: 1 1 100%;
  }

  .footer-columns {
    flex-direction: column;
    gap: 40px;
  }

  .footer-contact {
    flex-direction: column;
    gap: 40px;
  }

  .footer {
    padding: 40px;
  }
}





.footer-columns {
    display: flex;
    flex-wrap: wrap; /* Allows the three columns (Music Programs, Company, Connect) to wrap */
    gap: 30px; /* Adds space between the columns */
    justify-content: flex-start;
}

.footer-columns > div {
    /* Set a flexible basis for each column */
    flex: 0 0 200px; /* Allows each column to shrink/grow and ensures a min-width of 150px */
}

/* Specific fix for the "Connect" section (Social Icons) */
.footer-columns div:last-child ul {
    /* Ensures social icons appear side-by-side */
    display: flex;
    list-style: none; 
    padding: 0;
    gap: 10px; /* Space between the social icons */
}

/* Important: Fix the "Connect" section list items to display inline */
.footer-columns div:last-child ul li {
    margin: 0; /* Remove default margins */
}
@media (max-width: 768px) {
    /* Force main sections to take up full width and stack */
    .footer-section {
        width: 100%;
        margin-bottom: 20px; /* Add space between stacked sections */
    }
    
    /* Ensure Quick Links columns stack on smaller screens */
    .footer-columns {
        flex-direction: column;
    }
    
    /* Ensure Contact Info locations stack on smaller screens */
    .footer-contact {
        flex-direction: column;
    }
}


@media (max-width: 992px) {
    /* When the screen is a bit smaller, force all quick links columns to stack vertically */
    .footer-columns {
        flex-direction: column;
        gap: 15px; /* Reduce vertical gap for stacking */
    }
    
    .footer-columns > div {
        width: 100%; /* Make them take full width */
        margin-bottom: 15px;
        flex: auto;
    }
}



.copyright {
  margin-left: 4%;
  margin-right: 4%;
}

.copyright-row {
   width: 100%;     
    display: flex;    
    justify-content: space-between;     
    align-items: center;     
    padding: 10px 0; 
    font-family: 'Poppins', sans-serif;
   font-size: 16px;
  font-weight: 400;
  color: #585a5c;
}


.copyright-text {

    text-align: left; 
    margin-left: 5%;
}

.website-design-text {

    text-align: right; 
    margin-right: 5%;
}

@media (max-width: 992px) {
  .copyright-row {
   width: 100%;
   
   
    display: inline;

    justify-content: space-between; 

    align-items: center; 
    
    padding: 10px 0; 
    margin: 5%;

}

.website-design-text {

    text-align: left; 
    margin-left: 5%;
}

.copyright-text {

    text-align: left; 
   margin-right: 5%;
}
}




/* FOUNDATIONS */

.foundations{
    /* 1. Responsiveness and Layout */
    width: 100%; 
    height: 924px; 
    max-width: 100vw; 
    overflow-x: hidden; /* Prevents horizontal scrollbar */
    
    /* 2. Position Context for the Overlay/Image */
    position: relative; 
    z-index: 1; 
    
    /* 3. Content Layout */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #000; 
    margin-top: 1rem;
}

/* Pseudo-element for the Background Image and the White Overlay */
.foundations::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: 
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
        url(images/group2.png);
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
    z-index: -1; 
}

@media (max-width: 992px) {
  
.foundations{
    
    height: 460px; 
    

}

.website-design-text {

    text-align: left; 
    margin-left: 5%;
}

.copyright-text {

    text-align: left; 
   margin-right: 5%;
}
}

.foundations h1 {
  color: #743E97;
  font-size: 4.875rem;
  margin-bottom: 20px;
  font-weight: 600;
  line-height: 1;
  font-family: "Poppins", sans-serif;
}
.foundations h2 {
  color:   #743E97;
  font-size: 1.75rem;
  margin-bottom: 10px;
  letter-spacing: 5%;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}



#bclass-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;
}

/* -------------------------------------- */
/* Header Styles */
/* -------------------------------------- */
.bclass-header {
    text-align: center;
    padding-bottom: 30px;
    font-family: "Poppins", sans-serif;
}

.bclass-title {
    font-size: 2rem; 
    font-weight: 400;
    color: #743E97;
     font-family: "Poppins", sans-serif;
    margin-bottom: 25px;
    margin-top: 25px;
    line-height: 1.2;
   
}

.bclass-intro-text {
  font-family: "Poppins", sans-serif;
    font-size: 1.188rem; 
    max-width: 800px;
    margin: 0 auto;

}

/* -------------------------------------- */
/* Section Titles and Accents */
/* -------------------------------------- */
.bclass-section {
    padding: 40px 0;
}

.bclass-h2-title {
      font-size: 2rem; 
    font-weight: 400;
    color: #743E97;
     font-family: "Poppins", sans-serif;      
    margin-bottom: 30px;
}


/* -------------------------------------- */
/* Content Wrapper (Two Columns) */
/* -------------------------------------- */
.bclass-content-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* Align columns at the top */
    padding-top: 20px;
}

/* -------------------------------------- */
/* Image Column Styling */
/* -------------------------------------- */
.bclass-image-column {
    flex: 1; /* Allows image column to take up space */
    min-width: 0; /* Important for flex-items containing images */
}

.bclass-image {
    width: 100%;
    height: auto;
   

}

/* -------------------------------------- */
/* Text/List Column Styling */
/* -------------------------------------- */
.bclass-text-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.bclass-list-item {
    padding-bottom: 15px;
}

.bclass-list-title {
    font-size: 1.375rem;
    font-weight: 500;
    color: #BA1C83;
    margin-bottom: 25px;
    font-family: "Poppins", sans-serif;

}

.bclass-list-description {
    font-family: "Poppins", sans-serif;
    font-size: 1.188rem;
    color: #5E5E5E;
     line-height: 1.7;
}

/* Style for Section 1 list titles (What to Expect) */
.bclass-section-expect .bclass-list-title {
    color: #BA1C83; /* Use the primary blue for the titles in the first list */
    font-family: "Poppins", sans-serif;
  }


/* -------------------------------------- */
/* Dotted Divider Line */
/* -------------------------------------- */
.bclass-divider-top {
    /* Create a pseudo-element for the dotted line */
    position: relative;
}

.bclass-divider-top::before {
    content: "";
    position: absolute;
    top: -20px; /* Position it above the content wrapper */
    left: 10%;
    right: 10%;
    border-top: 2px dashed #ccc; /* Light gray dashed line */
}

/* -------------------------------------- */
/* Responsiveness (Mobile First) */
/* -------------------------------------- */

/* For screens 768px and wider (Tablets and Desktops) */
@media (min-width: 768px) {
    /* Reverse order for Section 2 (What You'll Learn) to match the visual layout: List on Left, Image on Right */
    .bclass-section-learn .bclass-content-wrapper {
        flex-direction: row-reverse;
    }
    
    /* Give slightly more padding to text column on desktop for better readability */
    .bclass-text-column {
        padding: 10px 0;
    }
}


/* For screens smaller than 768px (Mobile) */
@media (max-width: 767px) {
    
    .bclass-title {
        font-size: 1.8rem;
    }

    .bclass-h2-title {
        font-size: 1.5rem;
        margin-top: 25px;
    }

    /* Stack columns vertically on mobile */
    .bclass-content-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    /* Ensure the divider line spans the full width of the container on mobile */
    .bclass-divider-top::before {
        left: 0;
        right: 0;
        top: -10px; /* Move the line closer to the content */
    }

    .bclass-list-title {
        font-size: 1.15rem;
    }

    .bclass-list-description {
        font-size: 0.95rem;
    }
    .bclass-section {
    padding: 0 0;
}

.foundations h1 {
  
  font-size:2rem;
  }
}


/* diagrama de clases */ 


 /* --- Global Component Styling --- */
        .schedule-section {
            padding-top: 4rem;
            padding-bottom: 4rem;
            background-color: var(--km-light-bg);
            font-family: var(--font-sans);
        }
        
        /* Max-width centering container */
        .container {
            max-width: 1800px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        /* Card container for the table */
        .schedule-card {
            background-color: white;
            border-radius: 1rem; /* Equivalent to rounded-xl */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-2xl */
            overflow: hidden;
        }

        /* --- Header Styling --- */
        .schedule-header {
            background-color: var(--km-purple);
            padding: 1.5rem;
        }

        .header-title {
            font-size: 1.5rem; /* Equivalent to text-2xl */
            font-weight: 700; /* Equivalent to font-bold */
            color: white;
            letter-spacing: 0.05em; /* Equivalent to tracking-wide */
        }
        
        .card-body {
            padding: 1rem;
        }
        
        /* Inner titles */
        .main-title {
            font-size: 1.875rem; /* Equivalent to text-3xl */
            font-weight: 600; /* Equivalent to font-semibold */
            margin-bottom: 1.5rem; /* Equivalent to mb-6 */
        }

        .subtitle-link {
            font-size: 0.875rem; /* Equivalent to text-sm */
            font-weight: 600; /* Equivalent to font-semibold */
            color: gray;
            margin-bottom: 1rem; /* Equivalent to mb-4 */
        }

        .subtitle-link span {
            color:#68C6B4;
          
            padding-bottom: 0.25rem;
        }

        /* --- Table Styling --- */
        .table-container {
            overflow-x: auto;
            padding-bottom: 0.5rem;
        }
        
        /* Custom scrollbar style for the class table */
        .table-container::-webkit-scrollbar {
            height: 6px;
        }
        .table-container::-webkit-scrollbar-thumb {
            background-color: var(--km-purple);
            border-radius: 3px;
        }
        .table-container::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        table {
            min-width: 100%;
            border-collapse: collapse;
            border-radius: 0.5rem; /* Equivalent to rounded-lg */
            overflow: hidden;
            /* Sets up the border/divider styles */
            border-bottom: 1px solid #e5e7eb; 
        }

        /* Table Head */
        thead {
            background-color: #bfd8d4;
            position: sticky;
            top: 0;
        }

        th {
            padding: 0.75rem 1.5rem;
            text-align: left;
            font-size: 0.75rem; /* Equivalent to text-xs */
            font-weight: 600; /* Equivalent to font-semibold */
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #4b5563; /* Equivalent to text-gray-700 */
        }

        /* Table Body Rows */
        tbody tr {
            border-top: 1px solid #e5e7eb; /* Equivalent to divide-y divide-gray-100 */
            transition: background-color 150ms ease-in-out;
        }
        
        tbody tr:hover {
            background-color: #f9fafb; /* Equivalent to hover:bg-gray-50 */
        }

        td {
            padding: 1rem 1.5rem; /* Equivalent to px-6 py-4 */
            white-space: nowrap;
            font-size: 0.875rem; /* Equivalent to text-sm */
            color: #4b5563; /* Equivalent to text-gray-600 */
        }

        .class-name {
            font-weight: 500; /* Equivalent to font-medium */
            color: var(--km-purple);
        }

        /* Status colors */
        .status-enrolling {
            color: var(--km-link-green);
            font-weight: 600; /* Equivalent to font-semibold */
        }
        .status-full {
            color: #ef4444; /* Equivalent to text-red-500 */
            font-weight: 600;
        }

        /* Join Anytime Link */
        .join-link {
            display: block;
            text-align: center;
            font-weight: 600; /* Equivalent to font-semibold */
            color: #68C6B4;
            text-decoration: none;
            transition: color 150ms ease-in-out;
        }
        .join-link:hover {
            color: var(--km-purple);
        }

        :root {
            /* Primary Dark Purple: Header background, bold text */
            --km-purple: #7D4199;
            /* Light Mint: Table header background */
            --km-mint: #D9F5E3;
            /* Link Green: "Join Anytime" text/link color, "Enrolling" status */
            --km-link-green: #4CAF50;
            /* Light Background: Section background */
            --km-light-bg: #fcfcfd;
          
            
        }


 .foundationend .btn {
  background-color: #BA1C83;
  margin-top: 0;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 100px;
  width: 296px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-weight: 500;
  letter-spacing: 5%;
}


.foundationend .btn:hover {
 background-color: #68c6b4;
  color: white;
}       



/* Images for levels */

.leveloneback::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: 
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
        url(images/background10.png);
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
    z-index: -1; 
}

@media (max-width: 992px) {
  .leveloneback {
    height: 460px;
  }
}

.leveltwoback::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: 
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
        url(images/background20.png);
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
    z-index: -1; 
}

@media (max-width: 992px) {
  .leveltwoback {
    height: 460px;
  }
}

.levelthreeback::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: 
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
        url(images/background30.png);
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
    z-index: -1; 
}

@media (max-width: 992px) {
  .levelthreeback {
    height: 460px;
  }
}


.levelfourback::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: 
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
        url(images/background40.png);
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
    z-index: -1; 
}

@media (max-width: 992px) {
  .levelfourback {
    height: 460px;
  }
}

.levelfiveback::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: 
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
        url(images/background50.png);
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
    z-index: -1; 
}

@media (max-width: 992px) {
  .levelfiveback {
    height: 460px;
  }
}


/* LOCATIONS WEB */

.location-subpage h2 {
  text-align: center;
  margin-bottom: 50px;
  color: white;
  font-size: 2.75rem;
  font-family: "Poppins", sans-serif;
  font-weight: bold;
}

.location-subpage {
  background-image: url(images/fondoverde.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}


.location-subpage .location-card {
  padding: 0;
  border: none;
  border-radius: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 20px;
  color: #743C97;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
 
     }

.location-subpage .location-card img {
  width: 100%;
  
  object-fit: cover;
  border-radius: 50px 50px 0 0;
   }

.centrado-locations {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.centrado-locationstwo {
  display: flex;
  flex-direction: row-reverse;
  justify-content: left;
}

.marginarriba {
padding-top: 40px;
}

.location-subpage .row {
  padding-bottom: 50px;
}

@media (max-width: 968px) {
  .location-subpage .location-card {
    margin: 20px 0;
  }

  .location-subpage .location-card h3 {
    margin: 15px;
  }

  .location-subpage  .location-card p {
   margin: 15px;
}
}

.location-card {
  position: relative;
  transition: all 0.3s ease;
}

.location-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.3s ease;
  pointer-events: none; /* Add this line */
   border-radius: 50px;
}

.location-wrapper:hover .location-card::after {
  background-color: rgba(14, 67, 54, 0.5); /* #0E4336 with 50% opacity */
}

.hover-button-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  width: 100%;
  z-index: 1; /* Add this line */
}

.location-wrapper:hover .hover-button-container {
  visibility: visible;
  opacity: 1;
}

.visit-button {
  background-color: #68c6b4;
  border-radius: 100px;
  padding: 10px 20px;
  border-color: #68c6b4;
  width: 300px;
  transition: background-color 0.2s ease;
  pointer-events: auto; /* Add this line */
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
}

.visit-button:hover {
  background-color: #bb0e82;
  border-color: #bb0e82;
}

/* about us  */

.teachers-section {
  max-width: 1800px;
  margin: 0 auto;
  padding: 60px 20px 0 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.teachers-title {
  text-align: center;
  font-size: 2.75rem;
  margin-bottom: 40px;
  color: #743E97;
    font-family: "Poppins", sans-serif;
    font-weight: 600;

}

/* Card base */
.teacher-card {
 
  display: flex;
  gap: 24px;
  background: #F2F2F2;
  border-radius: 18px;
  padding: 24px 22px;
  margin-bottom: 26px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

/* Left: image area */
.teacher-media {
  flex: 0 0 120px;      /* reserve space for picture */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.teacher-photo {
  width: 300px;
  height: 400px;
  border-radius: 16px;
  object-fit: cover;
}

/* Right: text area */
.teacher-content {
  flex: 1 1 auto;
}

.teacher-name {
  font-size: 2rem;
  margin: 0 0 4px;
  color: #743E97;
   font-family: "Poppins", sans-serif;

}

.teacher-role {
   font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1rem;
  color: #BA1C83;
  margin: 0 0 14px;
}

.teacher-text {
  font-size: 1.1875rem,;
  line-height: 1.6;
  color: #5E5E5E;
  margin: 0 0 8px;
    font-family: "Poppins", sans-serif;
}

/* Responsive: stack image on top for small screens */
@media (max-width: 720px) {
  .teacher-card {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .teacher-media {
    flex: 0 0 auto;
  }

  .teacher-photo {
    width: 140px;
    height: 140px;
  }

  .teacher-content {
    width: 100%;
  }
}


/* contact-section.css */

.km-contact {
  padding: 60px 20px;
  background: url(images/fondoverde.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
}

.km-contact-inner {
  max-width: 1800px;
  width: 100%;
  display: flex;
  gap: 40px;
  align-items: stretch;
}

/* Left image area */
.km-contact-image {
  flex: 1 1 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.km-contact-image img {
  width: 439px;
  height: 610px;

  object-fit: cover;
  border-radius: 26px;
}

/* Form area */
.km-contact-form-wrapper {
  flex: 1 1 60%;
 
  padding: 32px 32px 36px;
  color: #ffffff;

}

.km-contact-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.km-contact-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  margin: 0 0 16px;
  font-size: 2.75rem;
}

.km-contact-help {
  font-family: "Poppins", sans-serif;
  margin: 0 0 24px;
  font-size: 1.5rem;
  line-height: 1.5;
}

/* Form layout */
.km-contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.km-form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.km-form-field {
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.km-form-field-full {
  flex-basis: 100%;
}

.km-contact-form label {
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  text-transform: none;
}

.km-hidden-label {
  position: absolute;
  left: -9999px;
}

/* Inputs */
.km-contact-form input,
.km-contact-form select {
  background-color: #89C3B5;
  
  border-radius: 6px;
  border:  1px solid #FFFFFF ;
  padding: 10px 12px;
  font-size: 0.95rem;
  outline: none;
  

}

.km-contact-form input::placeholder,
.km-contact-form select {
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
}

/* Button */
.km-submit-btn {
  margin-top: 10px;
  background-color: #BA1C83;
  font-size: 1.125rem;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 100px;
  width: 296px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-weight: 500;
  letter-spacing: 5%;
  transition: background 0.2s ease, transform 0.1s ease;
}

.km-submit-btn:hover {
  background-color: #68c6b4;
  color: white;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 900px) {
  .km-contact-inner {
    flex-direction: column;
  }

  .km-contact-image {
    order: -1;
  }
  .km-contact-image img {
  width: 339px;
  height: 310px;

  object-fit: cover;
  border-radius: 26px;
}
}

@media (max-width: 600px) {
  .km-contact-form-wrapper {
    padding: 24px 20px 28px;
  }

  .km-form-row {
    flex-direction: column;
  }

  .km-form-field {
    flex-basis: 100%;
  }

  .km-submit-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}


/* message-section.css */

.msg-contact {
  padding: 60px 20px 40px;
  display: flex;
  justify-content: center;
  background: #ffffff; /* change to match your page */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.msg-contact-inner {
  max-width: 1800px;
  width: 100%;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* Left text side */
.msg-contact-text {
  flex: 1 1 45%;
  color: #743E97;
}

.msg-contact-eyebrow {
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.msg-contact-title {
   font-family: "Poppins", sans-serif;
  font-size: 2.75rem;
  font-weight: 600;
  margin: 0 0 18px;
}

.msg-contact-copy {
   font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1.6;
  color: #743E97;
  margin: 0 0 10px;
}

.msg-contact-link {
  color: #7a439e;
  text-decoration: none;
}

.msg-contact-link:hover {
  text-decoration: underline;
}

/* Right form side */
.msg-contact-form-wrapper {
  flex: 1 1 55%;
}

.msg-contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.msg-form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.msg-form-field {
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msg-form-field-full {
  flex-basis: 100%;
}

.msg-contact-form label {
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  color: #743E97;
}

.msg-contact-form input {
  border-radius: 6px;
  border: 1px solid #743E97;
  padding: 10px 12px;
  font-size: 0.95rem;
  outline: none;
  color: #4a4a4a;
  height: 63px;
}

.msg-contact-form input,
.msg-contact-form textarea {
  border-radius: 6px;
  border: 1px solid #743E97;
  padding: 10px 12px;
  font-size: 0.95rem;
  outline: none;
  color: #4a4a4a;

}

.msg-contact-form input::placeholder,
.msg-contact-form textarea::placeholder {
  color: #743E97;
    font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
}

.msg-contact-form input:focus,
.msg-contact-form textarea:focus {
  border-color: #743E97;
}

/* Button */
.msg-submit-btn {
  margin-top: 10px;
  background-color: #BA1C83;
  font-size: 1.125rem;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 100px;
  width: 296px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-weight: 500;
  letter-spacing: 5%;
  transition: background 0.2s ease, transform 0.1s ease;
}

.msg-submit-btn:hover {
  background-color: #68c6b4;
  color: white;
  transform: translateY(-1px);

}

/* Full-width bottom image */
.msg-contact-image-wrap {
  width: 100%;
  margin: 0;
}

.msg-contact-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 900px) {
  .msg-contact-inner {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .msg-contact {
    padding: 40px 16px 28px;
  }

  .msg-submit-btn {
    width: 100%;
    text-align: center;
  }
}


.benefitsback::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), url(images/benefits1.jpg);
    background-position-x: 0%, 0%;
    background-position-y: 0%, 0%;
    background-repeat: repeat, repeat;
    background-size: auto, auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1; }

.benefits img.bclass-image {
    border-radius: 50px !important;
    display: block; /* Removes tiny gaps at the bottom of images */
}