/* main Section Styles */
#home {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1079%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(255%2c 255%2c 255%2c 1)'%3e%3c/rect%3e%3cpath d='M1352.789%2c353.3C1367.085%2c353.373%2c1380.407%2c345.862%2c1387.549%2c333.478C1394.686%2c321.104%2c1393.932%2c306.138%2c1387.281%2c293.496C1380.088%2c279.824%2c1368.2%2c268.5%2c1352.789%2c267.414C1335.457%2c266.193%2c1316.723%2c272.544%2c1308.711%2c287.961C1301.093%2c302.621%2c1309.4%2c319.431%2c1318.639%2c333.127C1326.564%2c344.874%2c1338.619%2c353.228%2c1352.789%2c353.3' fill='rgba(189%2c 205%2c 223%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1161.22 212.97 a148.41 148.41 0 1 0 296.82 0 a148.41 148.41 0 1 0 -296.82 0z' fill='rgba(189%2c 205%2c 223%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M638.582%2c178.441C654.635%2c177.296%2c664.107%2c162.424%2c672.306%2c148.575C680.738%2c134.332%2c690.39%2c118.275%2c682.954%2c103.487C675.007%2c87.682%2c656.271%2c81.741%2c638.582%2c81.507C620.404%2c81.267%2c601.437%2c86.669%2c592.132%2c102.287C582.645%2c118.209%2c585.701%2c138.241%2c595.352%2c154.064C604.585%2c169.201%2c620.896%2c179.702%2c638.582%2c178.441' fill='rgba(189%2c 205%2c 223%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M990.4888896536277 257.56144947659783L1057.450520588533 432.5006003666867 1162.7033303057638 307.06518625554213z' fill='rgba(189%2c 205%2c 223%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1260.3 255.74 a140.96 140.96 0 1 0 281.92 0 a140.96 140.96 0 1 0 -281.92 0z' fill='rgba(189%2c 205%2c 223%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1165.4832548055015 88.51539923073679L1305.3468940936184 14.319473488479673 1189.273934158825-61.05918805808557z' fill='rgba(189%2c 205%2c 223%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1161.5939052023055 380.51743968308716L1149.6142654439232 295.2778736612239 1076.3543391804421 392.49707944146945z' fill='rgba(189%2c 205%2c 223%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M475.838%2c162.519C497.545%2c161.379%2c517.514%2c152.059%2c529.568%2c133.97C543.261%2c113.421%2c552.281%2c87.322%2c540.353%2c65.701C528.137%2c43.558%2c501.023%2c34.285%2c475.838%2c36.579C454.064%2c38.562%2c440.456%2c57.289%2c428.902%2c75.851C416.314%2c96.075%2c400.011%2c119.23%2c411.355%2c140.178C422.965%2c161.617%2c451.491%2c163.798%2c475.838%2c162.519' fill='rgba(189%2c 205%2c 223%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M507.31 270.82 a94.59 94.59 0 1 0 189.18 0 a94.59 94.59 0 1 0 -189.18 0z' fill='rgba(189%2c 205%2c 223%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1079'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
    padding: 20px;
    background-size: cover;
}

body {
    font-family: 'Poppins', Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
}

/* Hero Section */
.hero {
    background: white;
    min-height: 650px; /* Use min-height for flexibility */
    display: flex;
    flex-direction: column; /* Stack logo and content vertically on small screens */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgb(41, 38, 38);
    padding: 20px;
}


/* Logo styling */
.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* For 3D shadow positioning */
    margin-bottom: 20px; /* Space between logo and content */
}

.logo img {
    width: 100%; /* Responsive width */
    max-width: 400px; /* Limit maximum size */
    height: auto;
    filter: drop-shadow(0 0 20px rgba(53, 185, 218, 0.8)); /* Shine effect */
    animation: float 3s ease-in-out infinite; /* Floating effect */
}

@keyframes float {
    0%, 100% {transform: translateY(0);}
    50% {transform: translateY(-15px);}
}

/* 3D shadow effect */
.logo::after {
    content: '';
    position: absolute;
    bottom: -20px; /* Position shadow below the logo */
    left: 50%;
    transform: translateX(-50%);
    width: 50%; /* Shadow width relative to logo */
    height: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    filter: blur(10px);
}


/* Hero content styling */
.hero-content {
    text-align: left; /* Center text on small screens */
    max-width: 600px; /* Limit content width */
}

.hero-content h2 {
    font-size: 1.3rem; /* Responsive font size */
    margin-top: 10px;
    margin-bottom: 10px;
    color: #003366;
}

.hero-content p {
    font-size: 1rem; /* Responsive font size */
    margin-bottom: 20px;
    color: #353535;    
}

/* Image below the text */
.below-text-image {
    width: 100%; /* Responsive width */
    max-width: 350px; /* Limit maximum width */
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image horizontally */
}

/* Media Queries for Responsiveness */
@media (min-width: 768px) {
    /* Adjust layout for tablets and larger screens */
    .hero {
        flex-direction: row; /* Side-by-side layout */
        justify-content: space-between;
        text-align: left; /* Align text to the left */
    }

    .logo {
        flex: 1; /* Take up space on the left */
        margin-bottom: 0; /* Remove margin for side-by-side layout */
    }

    .hero-content {
        flex: 1; /* Take up space on the right */
        padding-left: 40px; /* Add spacing between logo and content */
    }

    .hero-content h2 {
        font-size: 2rem; /* Larger font size for larger screens */
    }

    .hero-content p {
        font-size: 1.3rem; /* Larger font size for larger screens */
    }
}

@media (max-width: 480px) {
    /* Adjust layout for small mobile devices */
    header h1 {
        font-size: 1rem; /* Smaller font size for small screens */
    }

    header h1 .highlight {
        font-size: 1.5rem; /* Smaller font size for small screens */
    }

    nav button {
        padding: 8px 10px; /* Smaller padding for small screens */
        font-size: 0.9rem; /* Smaller font size for small screens */
    }

    .hero-content h2 {
        font-size: 1.8rem; /* Smaller font size for small screens */
    }

    .hero-content p {
        font-size: 1rem; /* Smaller font size for small screens */
    }
}

/* Section container styles */
.mission-vision-section{
  padding: 50px 20px;
  background: white;
  text-align: center;
  color: #003366;
  margin-top: -40px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.core-values-section {
  padding: 50px 20px;
  background: white;
  text-align: center;
  margin-top: -55px;
  color: #003366;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }

/* Section titles */
.mission-vision-section h2,
.core-values-section h2 {
  font-size: 2em;
  margin-bottom: 20px;
  color: #003366;
}

/* Card container - flex layout for larger screens */
.mission-vision-cards,
.core-values-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  background-color: white;  
}

/* Card styles */
.card {
  background:rgba(240, 240, 250, 0.8);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  flex: 1 1 300px;
  max-width: 350px;  
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}

/* Icon styles */
.card .icon {
  font-size: 2em;
  margin-bottom: 15px;
  color: #007BFF; /* Customize this color */
}

/* Card titles */
.card h3 {
  font-size: 1.3em;
  margin-bottom: -10px;
  margin-top: -10px;
}

/* Card text */
.card p {
  font-size: 0.95em;
  line-height: 1.5;
  color: #353535;
 
}

/* Responsive styles */
@media (max-width: 768px) {
  .mission-vision-cards,
  .core-values-cards {
    flex-direction: column;
    align-items: center;
  }

  .card {
    max-width: 90%;
  }

  .mission-vision-section h2,
  .core-values-section h2 {
    font-size: 1.75em;
  }
}

@media (max-width: 480px) {
  .mission-vision-section h2,
  .core-values-section h2 {
    font-size: 1.5em;
  }

  .card {
    padding: 15px;
  }

  .card h3 {
    font-size: 1.2em;
  }

  .card p {
    font-size: 0.9em;
  }
}

/* Leadership section container */
.leadership-section {
  padding: 50px 20px;
  background-color: white;
  text-align: center;
}

/* Title */
.leadership-section h2 {
  font-size: 2em;
  margin-top: -25px;
  margin-bottom: 30px;
  color: #003366;
}

/* Flex container for content and image */
.leadership-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}

/* Image styles */
.leadership-image {
  flex: 1 1 250px;
  min-width: 250px;
  max-width: 350px;
  background-color: #d0e6ff; /* fallback color */
  display: flex;
  align-items: center;
  justify-content: center;
}

.leadership-image img {
  width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: cover;
}

/* Content styles */
.leadership-content {
  flex: 2 1 400px;
  padding: 30px;
  text-align: left;
}

.leadership-content h3 {
  font-size: 1.3em;
  color: #003366;
  margin-bottom: 5px;
}

.leadership-content h4 {
  font-size: 1.1em;
  color: #007BFF; /* highlight color */
  margin-bottom: 15px;
}

.leadership-content p {
  font-size: 1em;
  color: #333333;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .leadership-container {
    flex-direction: column;
    align-items: center;
  }

  .leadership-image,
  .leadership-content {
    max-width: 100%;
  }

  .leadership-content {
    padding: 20px;
  }

  .leadership-section h2 {
    font-size: 1.75em;
  }
}

@media (max-width: 480px) {
  .leadership-section h2 {
    font-size: 1.5em;
  }
  .leadership-content
 {
    padding: 15px;
  }
  .leadership-content h3 {
    font-size: 1.2em;
  }
  .leadership-content h4 {
    font-size: 1em;
  }
  .leadership-content p {
    font-size: 0.9em;
  }
}

.our-team {
  padding: 80px 20px;
  background: white;
  font-family: Arial, sans-serif;
}

.our-team .container {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.our-team h2 {
  font-size: 36px;
  color: #003366;
  margin-bottom: 10px;
}

.our-team .subtitle {
  font-size: 16px;
  color: #383838;
  margin-bottom: 50px;
}

.team-row {
  display: grid;
  gap: 30px;
  margin-bottom: 50px;
}

/* First row: 3 members */
#seniorTeam {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Second row: 4 members */
#juniorTeam {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.team-card {
  background:rgba(240, 240, 250, 0.8);
  border-radius: 12px;
  padding: 25px 20px;
  box-shadow: 0 10px 25px rgba(26, 115, 232, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(26, 115, 232, 0.2);
}

.team-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #3a79cf;
  margin-bottom: 15px;
}

.team-card h3 {
  font-size: 18px;
  color: #222;
  margin-bottom: 5px;
}

.team-card p {
  font-size: 14px;
  color: #003366;
  font-weight: 600;
}


/* Research Approach Section Styling */
.research-approach-section {
  padding: 4rem 2rem;
  background-color: white;
  text-align: center;
  margin-top: -10px;
}

.research-approach-section h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  margin-top: -20px;
  color: #003366;
}

.approach-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;  
}

.approach-card {
  background-color: rgba(240, 240, 250, 0.8);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  flex: 1 1 250px; /* Responsive min width */
  max-width: 300px;
  padding: 1rem;
  display: flex;
  gap: 1px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease;
}

.approach-card:hover {
  transform: translateY(-5px);
}

.approach-icon {
  background-color: #1d8cf8;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 5px;
}

.approach-card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #003366;
}

.approach-card p {
  font-size: 0.95rem;
  color: #333333;
  line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .approach-cards-container {
    flex-direction: column;
    align-items: center;
  }
}