/* Import Source Sans Pro font */
  @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');
        
  body {
      font-family: 'Source Sans Pro', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #77c2f7;
      line-height: 1.6;
      animation: fadeIn 2s ease-in-out;
      transition: background-color 0.3s ease;
      
  }
  
  html {
      scroll-behavior: smooth;
  }
  
  
  header {
      background-color: #77c2f7;
      color: white;
      padding: 20px 0;
      text-align: center;
      animation: fadeIn 1s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transition: background-color 0.3s ease;
  }
  
  .header-container {
      display: flex;
      align-items: center;
  }
  
  .logo {
      max-width: 60px; /* Reduced size */
      position: absolute; /* Positioned relative to header */
      top: 0px; /* Adjusted position */
      right: 10px; /* Positioned to the right */
      border-radius: 50%;
      transition: transform 0.3s ease;
  }
  
  .logo:hover {
      transform: scale(1.1) rotate(10deg);
  }
  
  header h1 {
      font-size: 2em;
      margin: 0;
      transition: color 0.3s ease;
  }
  
  header p {
      margin: 0;
      font-size: 1.2em;
      transition: color 0.3s ease;
  }
  
  section {
      padding: 60px 20px;
      margin: 20px 0;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: none;
      transition: all 0.3s ease;
      animation: fadeIn 1s ease-in-out;
  }
  
  section.active {
      display: block;
      animation: fadeInUp 1s ease-in-out;
  }
  
  section h1, section h2, section p {
      border-bottom: 1px solid #1e3c72;
      padding-bottom: 10px;
      margin-bottom: 20px;
      animation: fadeIn 1s ease-in-out;
      transition: border-color 0.3s ease, transform 0.3s ease;
  }
  
  section h1:hover, section h2:hover, section p:hover {
      border-color: #14508e;
      transform: scale(1.02);
  }
  
  h1, h2 {
      text-align: center;
      font-size: 2em;
      color: #1e3c72;
      transition: color 0.3s ease, transform 0.3s ease;
  }
  
  h1:hover, h2:hover {
      color: #14508e;
      transform: scale(1.1);
  }
  
  h3, p {
      text-align: center;
      transition: transform 0.3s ease;
  }
  
  p:hover {
      transform: scale(1.05);
  }
  
  footer {
      text-align: center;
      padding: 10px 0;
      background: #051e30;
      color: white;
      animation: fadeIn 2s ease-in-out;
      transition: background-color 0.3s ease;
  }
  
  footer a {
      color: white;
      text-decoration: none;
      margin: 0 10px;
      font-size: 20px;
      transition: color 0.3s ease, transform 0.3s ease;
  }
  
  footer a:hover {
      color: #77c2f7;
      transform: scale(1.1);
  }
  
  .instagram-icon {
      color: purple;
  }
  
  .contact-form {
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      animation: bounceIn 1.5s ease-in-out;
  }
  
  .contact-form label {
      font-weight: bold;
  }
  
  .contact-form input, .contact-form textarea {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  .contact-form input:focus, .contact-form textarea:focus {
      border-color: #1e3c72;
      box-shadow: 0 0 8px rgba(30, 60, 114, 0.5);
  }
  
  .contact-form button {
      padding: 10px 20px;
      border: none;
      background-color: #1e3c72;
      color: white;
      font-size: 16px;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  .contact-form button:hover {
      background-color: #14508e;
      transform: scale(1.05);
  }
  
  .parallax {
      background: url('your-image.jpg') no-repeat center center fixed;
      background-size: cover;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
      font-size: 3em;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  
  .carousel {
      position: relative;
      max-width: 800px;
      margin: auto;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      background-color: #fff;
    }
  
    .carousel-inner {
      display: flex;
      transition: transform 0.5s ease-in-out;
      animation: fadeIn 2s ease-in-out;
    }
  
    .carousel-item {
      min-width: 100%;
      display: none;
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
      animation: fadeInUp 1.5s ease-in-out;
    }
  
    .carousel-item.active {
      display: block;
      opacity: 1;
    }
  
    .project {
      background: white;
      border-radius: 16px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
      padding: 30px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .project:hover {
      transform: translateY(-15px) rotate(-1deg);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  }
  
  .project img {
      max-width: 100%;
      border-radius: 16px;
      transition: transform 0.3s ease;
  }
  
  .project img:hover {
      transform: scale(1.1) rotate(3deg);
  }
  
  .project h3 {
      margin-top: 20px;
      font-size: 1.8rem;
      color: #333;
  }
  
  .project p {
      font-size: 1.1rem;
      color: #666;
      margin: 20px 0;
  }
  
  .project a {
      display: inline-block;
      margin-top: 20px;
      padding: 12px 24px;
      background-color: #14508e;
      color: white;
      text-decoration: none;
      border-radius: 8px;
      transition: all 0.3s ease;
  }
  
  .project a:hover {
      background-color: #1e3c72;
      transform: scale(1.1);
  }
  
    .carousel-control-prev,
    .carousel-control-next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 2rem;
      background: none;
      border: none;
      color: #333;
      opacity: 0.6;
      transition: opacity 0.3s ease;
      z-index: 1000;
    }
  
    .carousel-control-prev {
      left: 10px;
    }
  
    .carousel-control-next {
      right: 10px;
    }
  
    .carousel-control-prev:hover,
    .carousel-control-next:hover {
      opacity: 1;
    }
  
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      display: none;
    }
  
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  
    @keyframes fadeInUp {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
  
    @keyframes float {
      0%, 100% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-10px);
      }
  }
  
  .project {
      animation: float 6s ease-in-out infinite;
  }
  
    
    
  @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
  }
  
  @keyframes slideInDown {
      from { transform: translateY(-100%); }
      to { transform: translateY(0); }
  }
  
  @keyframes slideInUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
  }
  
  @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes bounceIn {
      from { opacity: 0; transform: scale(0.3); }
      50% { opacity: 1; transform: scale(1.05); }
      70% { transform: scale(0.9); }
      to { transform: scale(1); }
  }
  
  nav {
      position: relative;
      width: 100%;
  }
  
  nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      background-color: #051e30;
      animation: slideInLeft 0.3s ease-in-out;
      transition: transform 0.3s ease;
  }
  
  nav ul li {
      margin: 0;
  }
  
  nav ul li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      transition: 0.3s ease, transform 0.3s ease;
      background-color: #051e30;
      transform: scale(1);
  }
  
  nav ul li a:hover {
      background-color: #77c2f7;
      transform: scale(1.1);
  }
  
  nav .menu-icon {
      display: block; /* Ensure the menu icon is visible */
      cursor: pointer;
      font-size: 24px;
      color: white;
      padding: 2px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #051e30;
      position: absolute;
      top: -10px; /* Adjusted position */
      left: 10px; /* Positioned to the right */
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
  }
  
  
  nav .menu-icon:hover {
      transform: scale(1.1);
  }
  
  @media (max-width: 768px) {
      nav ul {
          display: none;
          flex-direction: column;
          position: absolute;
          top: 40px;
          left: 0px;
          width: 100%;
          background-color: #77c2f7;
          transition: left 0.1s ease-in-out;
      }
  
      nav ul li {
          width: 100%;
      }
  
      nav .menu-icon {
          display: block;
      }
  }
  
  @keyframes slideInLeft {
      from {
          transform: translateX(-100%);
          opacity: 0;
      }
      to {
          transform: translateX(0);
          opacity: 1;
      }
  }
  
  .menu-icon.active i {
      content: '✖';
  }
  
  nav ul.active {
      display: flex;
  }
  
  .menu-icon i {
      transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .menu-icon i.fa-times {
      transform: rotate(180deg);
      opacity: 1;
  }