.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-size: 1.125rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 5%;
  
  

}

.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;
  
  border: none;
  border-radius: 100px;
  width: 296px;
  cursor: pointer;
  font-size: 1.125rem;
  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 */
}


.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%;
}
}