* {
    box-sizing: border-box;
  }
body{
    display: flex;
    flex-direction: column;
    
    margin: 0;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FDFAF6;
}
.hero{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10vh;
    padding: 2em;

    h1{
        margin: 0;
        font-size: 5em;
        color: #8D0B41;
        font-family: 'Fredoka', sans-serif;
    }
    h2{
        margin: 0;
        font-size: 2em;
    }
    button {
        position: relative;
        margin-top: 10vh;
        background-color: black;
        color: white;
        cursor: pointer;
        font-size: 2em;
        padding: 10px 30px;
        border-radius: 10px;
        border: none;
        overflow: hidden;
        transition: color 0.3s ease-in-out;
        z-index: 1;
      }
      
      button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        background-color: yellow;
        z-index: 0;
        transition: width 0.4s ease-in-out;
        border-radius: 10px;
      }
      
      button:hover::before {
        width: 100%;
      }
      
      button:hover {
        color: black;
        border-style: solid;
      }
      
      button span {
        position: relative;
        z-index: 1;
      }
      h4{
        margin: 0;
        font-size: 2em;
      }

      .hero-aa{
        margin-top: 10vh;
        
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 10px;
        padding: 20px;
        background-color: #E8F9FF;
        h3{
            margin: 0;
            margin-right: 20vw;
            font-size: 4em;
          }

          img{
            border-radius: 50%;
            width: 150px;height: 150px;
            
            cursor: pointer;
            transition: .3s ease-in-out;
          }
          img:hover{
            scale: 1.1;
          }
          p{
            text-align: center;
            font-size: 1.4em;
            font-weight: bold;
          }
      }
    }

    .parent {
        width: 80%;
        height: 80vh;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 4px;
        border-radius: 15px;
        overflow: hidden;
        margin: auto;
        padding: 30px;
      }
      
      /* Base styling for all divs */
      .parent > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        border-radius: 30px;
        padding: 1em;
        font-family: sans-serif;
        overflow: hidden;
        transform-style: preserve-3d;
        perspective: 800px;
        transition:0.5s ease-in-out, box-shadow 0.4s ease;
        color: black;
        border: 1px solid #000000;
      
        h1 {
          margin: 0;
        }
      
        p {
          margin: 1;
          font-size: 1.1em;
        }
      }
      
      /* Removed background image & blur effects */
      .parent > div::before,
      .parent > div::after {
        display: none;
      }
      
      /* Text stays on top */
      .parent > div > * {
        position: relative;
        z-index: 2;
      }
      
      /* Unique tilts and shadows */
      .div1 {
        grid-area: 1 / 1 / 3 / 3;
        background-color: #a7e5fd; /* Light Blue */
        transform: rotateX(4deg) rotateY(-4deg);
        box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
      }
      
      .div2 {
        
        grid-area: 3 / 1 / 6 / 2;
        background-color: #ff94b4; /* Soft Pink */
        transform: rotateX(-5deg) rotateY(5deg);
        box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.
        1);
        
      }
      
      .div3 {
        grid-area: 3 / 2 / 6 / 4;
        background-color: #ffe987; /* Light Yellow */
        transform: rotateX(6deg) rotateY(3deg);
        box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
      }
      
      .div4 {
        grid-area: 1 / 3 / 3 / 6;
        background-color: #ffbf7b; /* Light Peach */
        transform: rotateX(-3deg) rotateY(-6deg);
        box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
      }
      
      .div5 {
        grid-area: 3 / 4 / 6 / 6;
        background-color: #b4ff96; /* Light Mint Green */
        transform: rotateX(2deg) rotateY(7deg);
        box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
      }
      
      /* Hover effect */
      .parent > div:hover {
        transform: rotateX(0deg) rotateY(0deg) scale(0.9);
        background-color: black;
        color: yellow;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        z-index: 5;
      }
      
      /* Responsive Layout for Mobile */
      @media (max-width: 1334px) {
        .parent {
          width: 95%;
          height: auto;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
      
        .parent > div {
          height: 300px;
          padding: 20px;
          width: 100%;
          transform: none !important;
          box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        }
      
        .div1, .div2, .div3, .div4, .div5 {
          grid-area: unset;
        }
      
        .parent > div:hover {
          transform: scale(1.03);
        }
      }

      .grid-container {
       
        display: grid;
        grid-template-columns: repeat(3,1fr); 
    
        gap: 15px;
        padding: 20px;
    }

    
    /* Grid Items Styling (Optional) */
    .grid-item {
        flex-grow: 1;
        background: rgba(255, 255, 0, 0.397); /* Light transparent background */
        backdrop-filter: blur(10px); /* Blurs the background behind */
        -webkit-backdrop-filter: blur(10px); /* Safari support */
        color: black;
        width: 20vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 200px;
        height: 20vh;
        text-align: center;
        padding: 40px;
        font-size: 1.5em;
        align-items: center;
        font-weight: bold;
        border-radius: 50px;

        h1{
            margin: 0;
            font-size: 3em;
        }
        p{
            margin: 0;
            font-size: 1em;
            font-weight: 100;
        }
    }

    .card-container {
        margin: 10vh 20px;
        display: flex;
        width: 90vw;
        flex-wrap: wrap;  /* Allows cards to wrap to the next row */
        justify-content: center;  /* Centers cards */
        gap: 10px;  /* Space between cards */
        padding: 20px;
    
    }
    .card {
        padding: 10px;
        position: relative;
        width: 200px;
        height: 150px; /* Fixed height */
        background-color: #ffffff; /* Tomato color */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: bold;
        color: white;
        border-radius: 50px; /* Rounded corners */
        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
        
    }
    .r5{
    
        width: 90%;
    }
    
    .heads{
        margin: 0;
        margin-top: 10vh;
        font-size: 4em;
        text-align: center;
    }
      

    .contactfoot{
        margin-top: 20px;
        background-color: rgb(0, 0, 0);
        display: flex;
        justify-content: center;
        width: 100%;
        color: white;
    }
    .contact-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        
        padding: 30px;
        border-radius: 12px;
        
        
        width: 100%;
    }
    
    .top-section {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
    }
    
    .box {
        flex: 1;
    
        padding: 20px;
        
        text-align: left;
        img{
          margin-bottom: 10px;
          margin-right: 10px;
            padding: 5px;
            width: 30px;
            height: 30px;
        }
        
        h3{
            margin: 10;
            font-size: 2em;
        } p{
            margin: 1px;
            font-size: 1.5em;
        }
    
        .wht{ 
            cursor: pointer;
            
            
            text-align: start;
            font-size: 20px;
        
        width: 70%;
        
        border-radius: 20px;
        }
    
    }
    
    .editors{
        
        margin-bottom: 20px;
        margin-top: 50px;
        display: flex;
        flex-wrap: wrap;
        div{
            
            margin-right: 30px;
            position: relative;
            max-height: 700px;
            background-color: white;
            width: 20vw;
            height: 65vh;
            border-radius: 20px;
            transition: 1s ease-out;
    
            .overlay{
                z-index: 5;
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: black;
                opacity: 0.8;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: 1s ease-out;
    
                h1{
                    font-size: 2em;
                }
            }
            .overlay:hover{
                opacity: 0;
            }
            video{
                width: 100%;
                height: 100%;
                border-radius: 20px;
                object-fit: cover;
                
            }
        }
        div:hover{
            scale: 1.3;
            z-index: 50;
            box-shadow: 0 4px 8px rgba(70, 70, 70, 0.2);
        }
        
    }
    

    nav {
        position: fixed;
        top: 0;
        margin-top: 30px;
        width: 80%;
        border-radius: 10px;
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.6);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.7rem 1.5rem;
        z-index: 1000;
        border-bottom: 1px solid #ddd;
      }
  
      .logo {
        font-size: 1.5rem;
        font-weight: bold;
        color: #222;
      }
  
      .nav-links {
        display: flex;
        gap: 1.5rem;
      }
  
      .nav-links a {
        text-decoration: none;
        color: #222;
        font-size: 1rem;
        position: relative;
      }
  
      .nav-links a::after {
        content: '';
        position: absolute;
        width: 0%;
        height: 2px;
        bottom: -3px;
        left: 0;
        background-color: #333;
        transition: width 0.3s;
      }
  
      .nav-links a:hover::after {
        width: 100%;
      }
  
      .menu-toggle {
        display: none;
        flex-direction: column;
        cursor: pointer;
      }
  
      .menu-toggle div {
        width: 25px;
        height: 3px;
        background-color: #333;
        margin: 4px 0;
        transition: all 0.3s;
      }
  
      /* Mobile Responsive */
      @media (max-width: 768px) {
        .nav-links {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(8px);
          flex-direction: column;
          text-align: center;
          display: none;
          border-bottom: 1px solid #ddd;
          padding: 1rem 0;
        }
  
        .nav-links.active {
          display: flex;
        }
  
        .menu-toggle {
          display: flex;
        }
      }

      .red {
        position: relative;
        margin-top: 5vh;
        margin-bottom: 20vh;
        background-color: black;
        color: white;
        cursor: pointer;
        font-size: 2em;
        padding: 10px 30px;
        border-radius: 10px;
        border: none;
        overflow: hidden;
        transition: color 0.3s ease-in-out;
        z-index: 1;
      }
      
      .red::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        background-color: deeppink;
        z-index: 0;
        transition: width 0.4s ease-in-out;
        border-radius: 10px;
      }
      
      .red:hover::before {
        width: 100%;
      }
      
      .red:hover {
        color: black;
        border-style: solid;
      }
      
      .red span {
        position: relative;
        z-index: 1;
      }

      .profile-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 1200px;
        margin: auto;
        padding: 10px;
      }
  
      .profile-card {
        display: grid;
        grid-template-rows: auto auto auto;
        gap: 10px;
        padding: 20px;
        text-align: center;
        
        border-radius: 16px;
        
        h1{
          font-size: 1.6em;
          font-weight: bold;
          color: #333;
          margin: 0;
        }
    
        p{
          font-size: 1em;
          margin: 0;
          font-weight: bold;
          color: orange;
        }
      }
  
      .profile-photo {
        width: 250px;
        height: 250px;
        border-radius: 10%;
        object-fit: cover;
        margin: 0 auto;
      }
  
      
  
      /* Tablet (2 columns) */
      @media (min-width: 768px) {
        .profile-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
  
      /* Laptop/Desktop (3 columns) */
      @media (min-width: 1024px) {
        .profile-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }