/* =================================== */
/*  ABOUT US BANNER                  */
/* =================================== */

.au-banner-section {
    position: relative; /* Acts as an anchor for absolutely positioned children */
    min-height: 70vh; /* Set a good default height */
    padding: 4rem 1rem; /* Padding for content */
    
    /* Background image setup. Replace the URL with your own image. */
    background-image: url('/assets/b3.jpg');
    background-size: cover;
    background-position: center;
    
    /* Flexbox to center the main content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    color: white; /* Default text color */
    text-align: center;
    overflow: hidden; /* Ensures the shape doesn't leak out */
}

/* * Dark overlay with lens flare effect
  * This ::before pseudo-element darkens the image for text readability
  * and adds a subtle glow effect like in the image.
*/
.au-banner-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* Sits above the background image */

    /* * A radial gradient for the lens flare (top-left)
      * combined with a linear gradient for the overall dark overlay.
    */
    background: 
        radial-gradient(
            circle at 15% 20%, 
            rgba(255, 255, 255, 0.15), 
            transparent 50%
        ),
        linear-gradient(
            rgba(0, 0, 0, 0.4), 
            rgba(0, 0, 0, 0.4)
        );
}

/* * Abstract orange shape 
  * This is the decorative element behind the text.
*/
.au-banner-shape {
    position: absolute;
    top: 0;
    left: 50%;
    
    /* Adjust width and height as needed */
    width: 220px; 
    height: 350px;
    
    /* Gradient matching the image */
    background: linear-gradient(180deg, #f7b733, #e1701a);
    
    /* * A clip-path to create the specific curved/pointed bottom.
      * This polygon traces the shape:
      * 1. Top-left (0 0)
      * 2. Top-right (100% 0)
      * 3. Bottom-right curve point 1 (100% 70%)
      * 4. Bottom-right curve point 2 (90% 85%)
      * 5. Bottom tip (50% 100%)
      * 6. Bottom-left curve point 1 (10% 85%)
      * 7. Bottom-left curve point 2 (0 70%)
      * ...and back to top-left
    */
    clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 85%, 50% 100%, 10% 85%, 0 70%);
    
    transform: translateX(-50%); /* Centers the shape */
    z-index: 2; /* Sits above the overlay */
}

/* * Main content container 
  * Holds the heading and paragraph.
*/
.au-banner-content {
    position: relative;
    z-index: 3; /* Sits on top of the orange shape */
    max-width: 600px; /* Constrains text width for readability */
}

.au-banner-heading {
    /* Using clamp() for responsive font size */
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.au-banner-text {
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    line-height: 1.6;
    opacity: 0.9; /* Makes it slightly softer than pure white */
}

/* * Logo container 
  * Positioned at the bottom-right.
*/
.au-banner-logo {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 3; /* Sits on top of the overlay */
    text-align: right;
}

.au-banner-logo-main {
    font-size: 1.75rem;
    font-weight: 700;
    font-style: italic;
}

.au-banner-logo-sub {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* * Responsive adjustments for smaller screens
*/
@media (max-width: 768px) {
    .au-banner-section {
        min-height: 60vh;
        padding: 3rem 1rem;
    }

    /* On smaller screens, move the logo to be centered at the bottom */
    .au-banner-logo {
        position: relative; /* Change from absolute */
        bottom: auto;
        right: auto;
        text-align: center;
        margin-top: 3rem; /* Add space above it */
    }

    .au-banner-shape {
        /* Scale the shape down slightly */
        width: 180px;
        height: 300px;
    }
}

@media (max-width: 480px) {
      .au-banner-shape {
        width: 150px;
        height: 250px;
    }
}

/* =================================== */
/* ART SECTION                         */
/* =================================== */

.art-scope.art-section-wrapper {
  width: 100%;
  background-color: #f8f8f8;
  padding: 60px 0;
}

/* --- Introductory Text Block --- */
.art-scope .intro-text-block {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 40px auto;
  padding: 0 20px;
}

.art-scope .intro-text-block h1 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #d9534f;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.art-scope .intro-text-block h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #2c2c2c;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.art-scope .intro-text-block p {
  font-size: 1rem;
  color: #777;
  max-width: 700px;
  margin: 0 auto 25px auto;
}

/* --- Buttons --- */
.art-scope .btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  text-transform: capitalize;
}

.art-scope .btn-light {
  background-color: #e0e0e0;
  color: #555;
}

.art-scope .btn-light:hover {
  background-color: #cccccc;
}

.art-scope .btn-dark {
  background-color: #555;
  color: #ffffff;
}

.art-scope .btn-dark:hover {
  background-color: #777;
}

/* --- Features Grid (2x2) --- */
.art-scope .features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1400px;
  margin: 0 auto;
  background-color: #2c2c2c;
  overflow: hidden;
}

/* --- Grid Image --- */
.art-scope .grid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Grid Text Box --- */
.art-scope .grid-text-box {
  background-color: #2c2c2c;
  color: #ffffff;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.art-scope .grid-text-box h3 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 25px;
}

/* --- Offered Courses --- */
.art-scope .courses-list p {
  font-size: 1rem;
  font-weight: 500;
  color: #f0f0f0;
  margin: 0;
}

.art-scope .courses-list .separator {
  color: #888;
  text-align: center;
  margin: 8px 0;
  font-size: 0.9rem;
}

.art-scope .courses-list .btn {
  margin-top: 25px;
}

/* --- Open Enrollment --- */
.art-scope .enroll-text p {
  font-size: 0.9rem;
  color: #ccc;
  margin-bottom: 2px;
}

.art-scope .enroll-text h4 {
  font-size: 1.2rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 25px;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .art-scope .features-grid {
    grid-template-columns: 1fr;
  }

  .art-scope .intro-text-block h2 {
    font-size: 1.8rem;
  }

  .art-scope .grid-text-box {
    padding: 40px;
    min-height: 300px;
  }
}

/* =================================== */
/* VISION • MISSION • VALUE SECTION    */
/* =================================== */

.vmv-scope.vmv-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 50%, #1e1e1e 100%);
  padding: 80px 20px;
  color: #fff;
  text-align: center;
}

/* Container */
.vmv-scope .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* Headings */
.vmv-scope h2,
.vmv-scope h3 {
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.vmv-scope h2 {
  font-size: 2.5rem;
  text-transform: uppercase;
  font-weight: 700;
}

.vmv-scope h3 {
  font-size: 1.6rem;
  font-weight: 500;
}

/* Text styling */
.vmv-scope p {
  font-size: 1.1rem;
  color: #ddd;
  line-height: 1.7;
  margin-bottom: 0;
}

/* Each VMV block */
.vmv-scope .vmv-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px 30px;
  margin: 30px 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  backdrop-filter: blur(6px);
}

.vmv-scope .vmv-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
}

/* Divider line between sections */
.vmv-scope .divider {
  height: 3px;
  width: 60%;
  margin: 50px auto;
  background: linear-gradient(90deg, #ff8a00, #e52e71);
  border-radius: 5px;
}

.vmv-scope .vmv-hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s ease;
  margin-top: 0;
}

.vmv-scope .vmv-item:hover .vmv-hidden {
  opacity: 1;
  max-height: 300px; /* adjust if text is longer */
  margin-top: 20px;
}

/* Optional subtle slide-in motion */
.vmv-scope .vmv-hidden p {
  transform: translateY(10px);
  transition: transform 0.4s ease;
}
.vmv-scope .vmv-item:hover .vmv-hidden p {
  transform: translateY(0);
}

/* ============================= */
/* SVG DECORATIVE CORNER SHAPES  */
/* ============================= */

/* Top-left corner shape */
.vmv-scope .vmv-decor-top {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 180px;
  height: 180px;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><path fill='%23e52e71' fill-opacity='0.1' d='M43.3,-70.8C54.9,-63.6,63.9,-54.2,69.3,-43.2C74.7,-32.2,76.4,-19.6,77.4,-6.2C78.5,7.1,78.9,20.5,74.1,32.5C69.3,44.4,59.3,55,47.7,61.8C36,68.6,22.6,71.6,8.3,71.2C-6,70.7,-20.1,66.8,-33.5,61.1C-46.8,55.5,-59.5,48.2,-66.8,37.4C-74.2,26.6,-76.2,12.3,-74.5,-1.1C-72.7,-14.5,-67.3,-27.1,-59.2,-38C-51.1,-49,-40.3,-58.3,-28.2,-65.8C-16.1,-73.2,-8,-78.8,2.4,-82.1C12.9,-85.4,25.7,-86.3,43.3,-70.8Z' transform='translate(100 100)'/></svg>") no-repeat center/contain;
  z-index: 1;
  opacity: 0.5;
}

/* Bottom-right corner shape */
.vmv-scope .vmv-decor-bottom {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><path fill='%23ff8a00' fill-opacity='0.1' d='M39.4,-64.1C51.5,-57.4,63.7,-51.3,70.7,-41.4C77.6,-31.6,79.3,-18,78.3,-4.8C77.3,8.4,73.6,21.2,68,33.4C62.3,45.7,54.7,57.4,43.6,64.8C32.5,72.1,18,75.1,4,70.3C-10,65.5,-20.1,52.8,-30.2,42.3C-40.4,31.8,-50.6,23.4,-59,12.2C-67.3,1,-73.8,-13,-72.9,-27.5C-72,-41.9,-63.7,-56.8,-50.8,-64.8C-38,-72.9,-19,-74.2,-1.3,-72.5C16.4,-70.8,32.8,-66,39.4,-64.1Z' transform='translate(100 100)'/></svg>") no-repeat center/contain;
  z-index: 1;
  opacity: 0.5;
}

/* Ensure shapes don't block clicks */
.vmv-scope .vmv-decor-top,
.vmv-scope .vmv-decor-bottom {
  pointer-events: none;
}



/* =================================== */
/* TEAM SECTION                        */
/* =================================== */

.team-scope.team-section {
  padding: 60px 0;
}

.team-scope .section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.team-scope .team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.team-scope .team-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- Hover effect for card --- */
.team-scope .team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* --- Team Image --- */
.team-scope .team-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  background-color: #f0f0f0;
}

/* Middle card gray background */
.team-scope .team-image.gray-bg img {
  background-color: #aaaaaa;
}

/* --- Team Info --- */
.team-scope .team-info {
  background-color: #4a4a4a;
  color: #ffffff;
  padding: 20px;
}

.team-scope .team-info h3 {
  font-size: 1.3rem;
  font-weight: 700;
}

.team-scope .team-info .title {
  font-size: 0.9rem;
  font-weight: 300;
  margin: 2px 0 5px;
}

.team-scope .team-info .email {
  font-size: 0.8rem;
  color: #ccc;
  margin-bottom: 15px;
}

/* --- More Info Toggle (on hover) --- */
.team-scope .more-info {
  color: #e0e0e0;
  font-size: 0.9rem;
  line-height: 1.5;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding-top 0.4s ease-out;
}

.team-scope .team-card:hover .more-info {
  max-height: 300px;
  opacity: 1;
  padding-top: 15px;
}

/* --- Responsive Layout --- */
@media (max-width: 900px) {
  .team-scope .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .team-scope .team-grid {
    grid-template-columns: 1fr;
  }
}