/* General styling for the About page */
/* General styling for the About page */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main {
    padding: 20px;
    background-color: #ffffff;
}

.company-description-history {
    background-color: #ffffff; /* Light background color */
    padding: 70px 20px 120px; /* Padding around the section, adjust for mobile view */
    margin: 50px 0; /* Margin above and below the section */
    position: relative; /* Allows positioning of child elements */
    overflow: visible; /* Ensures content doesn’t overflow */
}

.history-box {
    max-width: 1200px; /* Maximum width for the box */
    margin: 0 auto; /* Center the box horizontally */
    background-color: #f0f5f7; /* White background for the box */
    padding: 60px; /* Padding inside the box */
    text-align: center; /* Center-align the section titles and box content */
    position: relative; /* Allows positioning of child elements */
    z-index: 0; /* Ensures the box is above the image */
    min-height: 900px; /* Minimum height of the box */
    overflow: visible; /* Ensures the box content can overflow */
}

.history-box h1 {
    font-size: 3em;
    color: #607750; /* Match with your brand color */
    margin-bottom: 20px; /* Space below the main title */
  
    font-weight:normal;
}

.description-history {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.description, .history {
    margin-bottom: 20px; /* Space between sections */
}

.description h2, .history h2 {
  font-size: 30px;
  margin-bottom: 20px;
  color: #2c3e50;/* Space below the section title */
  font-family: 'Arial', sans-serif;
}

.description p, .history p {
    font-size: 1em;
    line-height: 1.6;
    color: #333; /* Dark text color for readability */
    margin: 0 auto; /* Center the text within its container */
    text-align: justify; /* Justify the text */
    max-width: 80%; /* Adjusted for better readability */

    font-weight:normal;
}



.image-bottom img {
    width: 100%; /* Ensure image fits the container */
    height: auto; /* Maintain aspect ratio */
    transform: translateY(0); /* Initial position */
    transition: transform 0.5s ease-out; /* Smooth transition */
}

.image-bottom.parallax{
     /* Will add JavaScript dynamically */
}

/*expert area*//*expert area*//*expert area*//*expert area*//*expert area*//*expert area*//*expert area*//*expert area*//*expert area*//*expert area*//*expert area*/

.expert-areas-mission {
    margin: 0 auto;
    background-color: #e2f5d9; /* Light background color */
    padding: 70px 30px; /* Padding around the section */
    margin: 50px 0; /* Margin above and below the section */
    position: relative; /* Allows positioning of child elements */
    max-width:1400px;
}

.expert-areas-mission-box {
    max-width: 1200px; /* Maximum width for the box */
    margin: 0 auto; /* Center the box horizontally */
    background-color: #ffffff; /* White background for the box */
    padding: 60px; /* Padding inside the box */
    display: flex; /* Flexbox for layout */
    gap: 20px; /* Space between images and text */
    z-index: 0; /* Ensures the box is above the image */
    overflow: visible; /* Ensures the box content can overflow */
}

.images-container {
    flex: 1; /* Take up one part of the flex container */
    position: relative; /* For absolute positioning of images */
    margin-right:20px;
    margin-top: 70px;
}

.expert-image {
    width: 100%; /* Full width of the container */
    height: auto; /* Maintain aspect ratio */
    position: absolute; /* Overlap images */
    top: 0; /* Position at the top */
    left: 0; /* Position at the left */
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start off-screen */
    animation: fadeIn 1s ease-out forwards; /* Apply animation */
}

.expert-image.visible {
    opacity: 1; /* Ensure it's visible when animated */
    transform: translateY(0); /* Ensure it's in the final position */
}

.expert-image:nth-child(1) {
    top: 0; /* Position at the top */
    left: 0; /* Position at the left */
    z-index: 1; /* Ensure it's behind the second image */
}

.expert-image:nth-child(2) {
    top: 300px; /* Offset the second image */
    left: 150px; /* Offset the second image */
    z-index: 2; /* Ensure it's in front of the first image */
}

.text-container {
    flex: 2; /* Take up two parts of the flex container */
    text-align: left; /* Align text to the left */
    padding-left:180px;
    margin-right: -30px;

}

.expert-areas-mission h1 {
    font-size: 2em;
    color: #607750; /* Match with your brand color */
    margin-bottom: 15px; /* Space below the main title */

    font-weight:normal;
}

.expert-areas, .mission {
    margin-bottom: 20px; /* Space between sections */
}

.expert-areas h2, .mission h2 {
    font-size: 1.5em;
    color: #607750; /* Match with your brand color */
    margin-bottom: 30px; /* Space below the section title */

    font-weight:normal;
}

.expert-areas p, .mission p {
    font-size: 1em;
    line-height: 1.6;
    color: #333; /* Dark text color for readability */
    margin: 0 auto; /* Center the text within its container */
    text-align: justify; /* Justify the text */
    max-width: 80%; /* Adjusted for better readability */
 
    font-weight:normal;
}

.expert-areas ul {
    list-style-type: disc; /* Display bullet points */
    margin: 20px auto; /* Center the list */
    padding: 0; /* Remove padding */
    max-width: 80%; /* Adjusted for better readability */
    text-align: left; /* Align list items to the left */

    font-weight:normal;
}

.expert-areas li {
    font-size: 1em;
    line-height: 1.6;
    color: #333; /* Dark text color for readability */
    margin-bottom: 10px; /* Space between list items */

    font-weight:normal;
}

/* Team Section */
/* Team Section */
.team-section {
    background-color: #dceae9; /* Light grey background color */
    padding: 10px 70px; /* Padding around the section */
    margin: 20px 10px; /* Margin above and below the section */
    position: relative; /* Position relative for overlapping elements */
    min-height: 800px;
    max-width: 1400px;
}

.team-intro {
    position: relative; /* Position relative for overlap */
    max-width: 400px; /* Maximum width for the intro */
    margin: 0 auto; /* Center the intro */
    background-color: #ffffff; /* White background for the box */
    padding: 3px 5px; /* Padding inside the box */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for a 3D effect */
    z-index: 1; /* Ensure it is above the team box */
    transform: translateY(30px); /* Overlap with team box */
    text-align: center; /* Center align the title */
}


.team-box {
    max-width: 1200px; /* Maximum width for the box */
    margin: -30px auto 0; /* Center the box and adjust margin for overlap */
    background-color: #ffffff; /* White background for the box */
    padding: 60px 60px 10px 60px; /* Padding inside the box */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for a 3D effect */
    position: relative; /* Position relative for z-index */
    z-index: 0; /* Ensure it is below the intro box */
}

.team-member {
    display: flex; /* Flexbox for layout */
    gap: 20px; /* Space between image and text */
    margin-bottom: 40px; /* Space between team members */
    background-color: #ffffff; /* White background for each member box */
    padding: 20px; /* Padding inside each member box */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for a 3D effect */
}

.team-image {
    width: 150px; /* Set width for the image */
    height: 150px; /* Set height for the image */
    border-radius: 50%; /* Circular image */
    object-fit: cover; /* Cover the container without stretching */
}

.sentence{
    text-align:center;

    font-weight:normal;
    font-size: 20px;
}

.team-text {
    flex: 1; /* Take up remaining space */

    font-weight:normal;  
}

.team-section h1 {

    font-weight:normal;
    Font-size: 3em;
}

.team-text h2 {
    font-size: 1.5em;
    color: #607750; /* Match with your brand color */
    margin-bottom: 10px; /* Space below the name */

    font-weight:normal;
}

.team-text p {
    font-size: 1em;
    line-height: 1.6;
    color: #333; /* Dark text color for readability */
    text-align: justify;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .company-description-history {
        flex-direction: column;
    }

    .company-description-history .text, .company-description-history .image {
        margin: 0;
        padding: 0;
        
    }

    .team {
        flex-direction: column;
        align-items: center;
    }
}

.features {
    font-family: 'Arial', sans-serif;
    padding: 20px;
    text-align: center;
  }
  
  .feature-icons {
    display: flex;
    justify-content: center;
    gap: 40px; /* Adjust spacing between icons */
    margin-bottom: 20px;
    margin-right:80px ;
    margin-left: 80px;

  }
  
  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
    text-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .feature-item:hover {
    transform: scale(1.05);
    opacity: 0.85;
  }
  
  .feature-item .feature-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
  }
  
  .feature-item:hover .feature-icon {
    transform: translateY(-5px); /* Icon moves upwards on hover */
  }
  
  .feature-item .feature-text {
    font-weight: bold;
    color: #333;
    font-size: 14px;
  }
  
  .technology { 
    font-family: 'Arial', sans-serif;
    padding: 40px 10px;
    background-color: #f5f5f5;
    text-align: center;
  }
  
  .technology h2 {
    font-size: 30px;
    margin-bottom: 20px;
    color: #2c3e50;
  }
  
  .tech-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
  }
  
  .tech-text {
    max-width: 500px;
    text-align: left;
  }
  
  .tech-text p {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
  }
  
  .tech-image img {
    width: 500px;
    max-width: 90%;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
  
  .adv-title {
    color: #28a745;
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .adv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto 40px;
    padding: 0 10px;
  }
  
  .adv-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 15px;
  }
  
  .adv-card:hover {
    transform: translateY(-5px);
  }
  
  .adv-card img {
    width: 40px;
    height: 40px;
  }
  
  .adv-card h4 {
    margin: 0 0 5px;
    font-size: 16px;
    color: #28a745;
  }
  
  .adv-card p {
    margin: 0;
    font-size: 14px;
    color: #555;
  }
  
  .market-impact {
    font-size: 16px;
    color: #333;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
  }
  
  .tech-flip-section {
    text-align: center;
    padding: 20px 20px;
    font-family: 'Segoe UI', sans-serif;
    background-color: #f0f5f7;
  }
  
  .tech-flip-section h2 {
    font-size: 28px;
    margin-bottom: 30px;
    color: #222;
  }
  
  .flip-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  
  .flip-card {
    background-color: transparent;
    width: 180px;
    height: 220px;
    perspective: 1000px;
  }
  
  .flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  .flip-card:hover .flip-inner {
    transform: rotateY(180deg);
  }
  
  .flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 12px;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .flip-front {
    background-color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  .flip-front img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }
  
  .flip-front h3 {
    color: #4b9ff4;
    font-size: 18px;
    margin: 0;
  }
  
  .flip-back {
    background-color: #4b9ff4;
    color: white;
    transform: rotateY(180deg);
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .market-impact {
    font-family: 'Segoe UI', sans-serif;

    padding: 30px 15px;
    text-align: center;
    border-radius: 12px;
    max-width: 960px;
    margin: 0 auto;
  }
  
  .market-impact h2 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 24px;
  }
  
  .impact-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px;
  }
  
  .impact-card {
    background: white;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    width: 180px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
  }
  
  .impact-card:hover {
    transform: translateY(-4px);
  }
  
  .impact-icon {
    font-size: 30px;
    margin-bottom: 8px;
  }
  
  .impact-info h3 {
    font-size: 16px;
    color: #333;
    margin-bottom: 4px;
  }
  
  .impact-info p {
    font-size: 14px;
    color: #555;
  }
  
  .market-conclusion {
    margin-top: 20px;
    font-size: 18px;
    color: #222;
    font-weight: 500;
  }

  .application-example {
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    padding: 50px 20px;
  }
  
  .application-example h2 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 18px;
  }
  
  .example-intro {
    font-size: 16px;
    color: #333;
    max-width: 700px;
    margin: 0 auto 30px;
    line-height: 1.6;
  }


  .team-section-alt {
    background: linear-gradient(to right, #f0f4f8, #e9f1f6);
    padding: 40px 20px;
    text-align: center;
    margin-top: 60px;
  }
  
  .section-title {
    font-size: 30px;
    margin-bottom: 50px;
    color: #2c3e50;
    font-weight: 600;
  }
  
  .team-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
  }
  
  .member-card {
    background: #f2f7f9;
    padding: 25px 20px;
    border-radius: 16px;
    width: 340px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
  }
  
  .member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }
  
  .member-photo {
    width: 40%;
    border-radius: 12px;
    margin-bottom: 15px;
  }
  
  .member-name {
    font-size: 20px;
    color: #1c2833;
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .member-title {
    font-size: 15px;
    color: #6c7a89;
    margin-bottom: 15px;
  }
  
  .member-bio {
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.8;
  }