/* CONSTANTS */
:root {
    --xb: 2rem; /* Header font size */
    --b: 1.5rem;     /* Paragraph font size */
    --m:1rem;
    --s:0.6rem;
  }

/* ABOUT US BANNER SECTION */

    /* Banner Section */
    #aboutUsBanner {
        position: relative;
        height: 60vh;
        background-image: url('/finalImages/ramnavmi/3.jpg'); /* Replace with your banner image URL */
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
    }
    
    #aboutUsBanner .banner-content {
        position: relative;
        z-index: 1;
        max-width: 700px;
        text-align: center;
        padding: 20px;
        background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
        border-radius: 10px;
    }
    
    #aboutUsBanner .banner-content h1 {
        font-size: var(--xb);
        margin-bottom: 10px;
        color: #f58634; /* Saffron color */
    }
    
    #aboutUsBanner .banner-content p {
        font-size: var(--b);
    }
    
    
    
    /* ABOUT US SECTION */
    /* Main Section Layout */
    #about-us-section {
        padding-top: 50px;
        display: flex;
        background-color: #fff;
        gap: 20px;
    }
    
    #about-us-section .about-us-content {
        display: flex;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }
    
    #about-us-section .text-content {
        flex: 1;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #about-us-section .text-content h2 {
        font-size: var(--xb);
        color: #f58634;
        margin-bottom: 10px;
    }
    
    #about-us-section .text-content p {
        font-size: var(--m);
        line-height: 1.6;
        color: #333;
    }
    
    /* Right Side with Central Image and Star Positioned Logos */
    #about-us-section .star-layout-container {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

    }

    #about-us-section img {
        width: 40vw;
    }
    
   
   
    
    
    /* Responsive Layout for Screens Under 768px */
    @media (max-width: 768px) {
        #about-us-section {
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
    
        /* Stack Text and Image Sections Vertically */
        #about-us-section .about-us-content {
            flex-direction: column;
            align-items: center;
        }
    
        #about-us-section .text-content {
            text-align: center;
            padding-bottom: 15px;
            margin-bottom: 15px;
        }
    
        
    #about-us-section img {
        width: 90vw;
    }
    
      
    }
    











/* IMAGE TEXT SECTION */
#image-text-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    background-color: #fff;
    padding: 20px;
    width: 100%;
}

/* Content inside the section */
#image-text-section .content {
    display: flex;
    width: 100%;
    max-width: 1200px; /* Optional max-width for large screens */
    justify-content: space-between;
    align-items: center;
}

/* Image container */
#image-text-section .image-container {
    position: relative;
    width: 50%; /* 50% width for desktop */
    display: flex;
    justify-content: center; /* Center images horizontally */
}

/* Individual Images */
#image-text-section .image-container img {
    position: absolute;
    width: auto;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

/* Text content */
#image-text-section .text-content {
    width: 50%; /* 50% width for desktop */
    padding: 20px;
}

#image-text-section .text-content h2 {
    font-size: var(--xb);
    color: #f58634;
    margin-bottom: 15px;
}

#image-text-section .description {
    font-size: var(--m);
    color: #333;
    line-height: 1.6;
}

/* Image positions */
#image-text-section .image-1 {
    top: -100px;
    left: 100px;
    z-index: 3;
}
#image-text-section .image-2 {
    top: 0;
    left: 200px;
    z-index: 2;
}
#image-text-section .image-3 {
    bottom: 0;
    left: 0;
    z-index: 1;
}

/* Mobile layout: Switch to stack and 100% width */
@media (max-width: 900px) {
    /* Stack content vertically */
    #image-text-section .content {
        flex-direction: column-reverse;
        align-items: center;
    }

    /* Full width for both sections */
    #image-text-section .image-container,
    #image-text-section .text-content {
        width: 100%;
        text-align: center; /* Center-align text on smaller screens */
    }

    /* Center images within their container */
    #image-text-section .image-container {
        margin-top: 30px;
    }
    
    /* Adjust image sizes and positioning for mobile */
    #image-text-section .image-container img {
        position: relative;
        height: 150px;
        margin: 10px 0; /* Add margin to space out images */
    }

    /* Image positions */
#image-text-section .image-1 {
    top: -60px;
    left: 220px;
    z-index: 3;
}
#image-text-section .image-2 {
    top: 0;
    left: 0px;
    z-index: 2;
}
#image-text-section .image-3 {
    bottom: -60px;
    left: -240px;
    z-index: 1;
}
    
}





    /* ABOUT US PERSON SECTION */
    
        /* About Us Section */
#about-us {
    background-color: #fff;
   padding-bottom: 50px;
    text-align: center;
}

/* Content Wrapper */
#about-us .about-us-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 20px; /* Space between columns */
    max-width: 1200px;
    margin: 0 auto;
}

/* Team Member Style */
#about-us .team-member {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Image Style */
#about-us .team-member img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    margin-bottom: 20px;
    object-position: top center; /* Align the image to the top and center horizontally */
}

/* Name and Designation Styling */
#about-us .team-member h3 {
    font-size: var(--b);
    color: #333;
    margin-bottom: 10px;
}

#about-us .team-member p {
    font-size: var(--m);
    color: #777;
}

/* Responsive Layout for Mobile */
@media (max-width: 768px) {
    #about-us .about-us-content {
        margin-top: 30px;
        grid-template-columns: 1fr; /* Stack in one column on mobile */
    }
}