body,ul{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
}

html, body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
  }

@media (max-width: 768px) {
.container {
    width: 100%; /* Adjust layout for smaller screens */
}
}
header {
    position: fixed;
    display: flex;
    width: 100%;
    height: auto;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    padding: 2px 20px;
    background-color: white;
    border-bottom: 1px solid #e0e0e0;
    transition: top 0.3s ease;
  }
  
  /* Logo image styles */
  .logo img {
    width: 177px;
    height: 66px;
  }
  
  /* Desktop navigation - default for larger screens */
  #desktopNav {
    display: flex;
  }
  
  #desktopNav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 60px;
  }
  
  #desktopNav ul li a {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgba(23, 26, 32, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  #desktopNav ul li a:hover {
    color: rgb(0, 0, 0);
  }
  
  /* Profile icon styles */
  .profile-icon {
    cursor: pointer;
    padding: 0px 35px;
  }
  .menu-icon {
    display: none; /* Hidden by default on desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 15px;
    cursor: pointer;
    margin-top: -20px;
  }
  
  
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999;
  }
  
  
  /* Mobile sliding menu (hidden by default) */
  #mobileMenu {
    position: fixed;
      top: 1px;
      right: -450px; /* Initially off-screen */
      width: 320px;
      height: 100vh;
      background-color: #fff;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
      transition: right 0.3s ease-in-out;
      padding-top: 10px; /* Offset to align with header */
      display: none; /* Hidden by default */
      z-index: 1000;
  }
  /* Active states */
  .menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  #mobileMenu.active {
    right: 0;
  }
  #mobileMenu ul {
    list-style: none;
    padding: 20px 0 60px 20px;
    gap: 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  
  #mobileMenu ul li {
    padding: 5px 20px;
  }
  
  #mobileMenu ul li a {
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    display: block;
    transition: color 0.3s ease;
  }
  
  #mobileMenu ul li a:hover {
    color: rgb(0, 0, 0);
  }
  
  #mobileMenu .close-btn {
    display: flex; /* Aligns children horizontally */
    align-items: center; /* Vertically centers items */
    padding: 15px 20px; /* Add some padding */
    font-size: 24px; /* Increase size of the close icon */
  }
  
  #mobileMenu .close-btn .menu-logo {
    width: 24px; /* Set the width of the image */
    height: 24px; /* Set the height of the image */
    margin-right: 10px; /* Add space between the image and the close icon */
  }
  
  #mobileMenu .close-btn span {
    cursor: pointer;
    font-size: 22px; /* Size of the close icon */
    color: #000; /* Close icon color */
  }
  /* Media query for mobile view (max-width: 768px) */
  @media screen and (max-width: 768px) {
    /* Hide the desktop navigation on mobile */
    #desktopNav {
        display: none;
    }
  
    /* Show the hamburger menu icon only on mobile */
    .menu-icon {
        display: flex;
        margin-right: 60px;
  
    }
  
    /* Mobile sliding menu styles when toggled */
    #mobileMenu {
        display: block;
    }
  
    .profile-icon {
        display: none;
  
    }
  }

/* Content*/

.info {
    width: 100%;
    height: 430px;
    top: 118px;
    gap: 0px;
    opacity: 0px;
    background-color:rgba(217, 217, 217, 0.8);
    text-align: center;
    padding-top: 180px;
}

.info h1{
    width: 100%;
    height: 29px;
    top: 212px;
    left: 582px;
    gap: 0px;
    opacity: 0px;
    color: rgba(0, 0, 0, 1);
    font-family: 'Montserrat';
    font-size: 40px;
    font-weight: 500;
    line-height: 48.76px;
    text-align: center;
    padding-bottom: 20px;
}

.info h2{
    width: 100%;
    height: 29px;
    top: 312px;
    left: 562px;
    gap: 0px;
    opacity: 0px;
    color: rgba(0, 0, 0, 1);
    font-family: 'Montserrat';
    font-size: 24px;
    font-weight: 500;
    line-height: 29.26px;
    text-align: center;    
}

.info p{
    width: 1081px;
    height: 132px;
    top: 405px;
    left: 180px;
    gap: 0px;
    opacity: 0px;
    margin: 0 auto;
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    justify-content: center;
    text-align: center;
    padding-top: 40px;
    color: rgba(0, 0, 0, 0.8);
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    
} 

.infotwo {
    background-color: #ffffff;
    padding: 60px 70px 0 70px;

}


.infotwo h1 {
    width: auto;
    height: 30px;
    margin-bottom: 25px;
    color: rgba(0, 0, 0, 0.8);
    font-family: 'Montserrat';
    font-size: 24px;
    font-weight: 500;
    line-height: 29.26px;
    text-align: center;
    padding: 0 70px 0 70px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}


.infotwo p {
    width: 1174px;
    height: 125px;
    top: 911px;
    left: 143px;
    gap: 0px;
    opacity: 0px;
    margin: 0 auto;
    font-family: 'Poppins';
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    padding-top: 20px;
    color: rgba(0, 0, 0, 0.8);
    text-decoration-skip-ink: none;

}

.image-container {
    margin: auto;
    width: 350px;
    height: 460px;
    left: 543px;
    padding-top: 15px;
    border-radius: 18px;
    opacity: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(217, 217, 217);

}

.image-container img {
    width: 335px;
    height: 421.82px;
    top: 1093px;
    gap: 0px;
    opacity: 0px; 
    object-fit:fill;
    transform: translateX(-5px); 
    

}

.innovation-section {
    background-color: #ffffff;
    text-align: center;
    padding-top: 40px;
}

.innovation-section h2 {
    margin-bottom: 40px;
    color: rgba(0, 0, 0, 0.8);
    font-family: 'Poppins';
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    text-align: center;
}

.innovation-section  .card {
    width: 100%;
    text-align: center;
    padding: 0px 150px;
}

.innovation-section .card h3 {
    color:rgba(0, 0, 0, 0.8);
    font-family: 'Poppins';
    font-size: 22px;
    font-weight: 500;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.innovation-section .card p {
    width: 1174px;
    height: 82px;
    top: 1767px;
    left: 191px;
    gap: 0px;
    opacity: 0px;
    color: rgba(0, 0, 0, 0.8);
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    padding-bottom: 25px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.movement-section {
    padding: 20px 40px;
    background-color: #ffffff;
    text-align: center;
}

.movement-section h2 {
    margin-bottom: 30px;
    color:rgba(0, 0, 0, 0.8);
    font-family: 'Poppins';
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.movement-section p {
    width: 1174px;
    height: 82px;
    padding-left: 20px;
    top: 2282px;
    gap: 0px;
    opacity: 0px;
    color: rgba(0, 0, 0, 0.8);
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: center;
    margin-left:90px;

}

.team-section {
    padding: 10px 20px;
    background-color: #ffffff;
    text-align: center;
}


.team-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;
    padding-bottom: 20px;
}

.team-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 250px;
    height: 300px;
    text-align: center;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.team-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.team-card h3 {
    font-size: 22px;
    font-weight: 600;
    font-family: 'Montserrat';
    line-height: normal;
    color: #000;
    margin: 10px 0 5px 0;
}

.team-card p{
    font-size: 18px;
    font-weight: 200;
    font-family: 'Poppins';
    color: #000;
    line-height: normal;
    margin: 5px 0;
}

.team .member .social {
  margin-top: 15px;
}


.team .member .social a {
  color: #cc1616;
  transition: 0.3s;
}


.team .member .social a:hover {
  color: var(--accent-color);
}


.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}
.socials {
    display: flex;
    justify-content: center; /* Centers the icons horizontally */
    gap: 10px; /* Adds spacing between icons */
    margin-top: 10px; /* Optional: adds space between social icons and the content above */
}

.socials a {
    text-decoration: none; /* Removes the underline from the links */
}


.footer {
    background-color: #ffffff;
    border-top: 1px solid #ddd;
    padding-top: 20px;
  }
  
  .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    padding-top: 10px;
  }
  
  address {
    font-family: "Montserrat";
    font-size: 16px;
    font-weight: 500;
    line-height: 19.5px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    font-style: normal;
    color: #000;
    
  }
  
  a {
    color: #000;
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
    color: #000000;
  }
  
  .nav-links, .terms-links, .social-icons {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-section {
    text-align: center;
    
  }
  
  .footer-section h4 {
    margin-bottom: 30px;
    color: #000000;
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: 400;
    line-height: 23.44px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  }
  
  .nav-links  {
    list-style: none;
    margin-bottom: 30px;
    padding-top: 30px;
    display: flex;
    gap: 45px; /* Adjust spacing between items */
    font-family: 'Montserrat';
    font-size: 16px;
    color: rgba(23, 26, 32, 1)  ;
    font-weight: 600;
    line-height: 19.5px;
    text-align: left;
    font-style:solid;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  }
  
  .terms-links {
    margin-bottom: 30px;
    display: flex;
    gap: 45px; /* Adjust spacing between items */
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 16px;
    font-style:solid;
    line-height: 23.44px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(23, 26, 32, 1)  ;
  
  }
  
  .nav-links li, .terms-links li {
    display: inline;
  }
  
  .nav-links a, .terms-links a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
  }
  
  .nav-links a:hover, .terms-links a:hover {
    text-decoration: underline;
  }
  
  .social-media{
    margin-bottom: 30px;
    display: flex;
    gap: 10px; /* Adjust spacing between items */
    line-height: 23.44px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    font-size:20px;
    width: 300px;
    padding-left: 25px;
  }
  .logo1 img{
    margin-left:0px;
    margin-bottom: -10px;
  }
  .media{
    background-color: rgb(190, 190, 190);
    width: 52px;
    height: 52px;
    border-radius: 10px;
    transition: transform 0.3s ease;
  }
  .media:hover {
    transform: scale(0.9); /* Scales the element to 90% of its size */
  }
  
  .social-icon {
    display: flex;
    flex-direction: column;
  }
  
  .social-icon .circle {
    display: block;
    width: 20px;
    height: 20px;
    background-color: #000;
    border-radius: 50%;
  }
  
  .bottom {
    background-color: #ffffff; /* Footer background color */
    color: rgb(0, 0, 0); /* Text color */
    text-align: center; /* Center align the text */
    padding-top: 30px;
  }
  
  .bottom p {
    margin: 0; /* Remove extra spacing */
    white-space: nowrap; /* Prevent text wrapping */
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    line-height: 16.41px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  }
  
  .bottom hr {
    border: none;
    border-top: 1px solid #ccc; /* Line color */
    margin: 0 20px 10px; /* Line spacing and padding */
    width: auto;
  }
  
  .social-media {
    text-align: center;
    font-family: 'Montserrat';
    font-size: 14px;
    margin-left: -30px;
  
  }
  
  .social-icon {
    display: block;
    margin: 10px auto; /* Space between icons */
    font-size: 30px; /* Adjust size of icons */
    color: #000; /* Default icon color */
    transition: transform 0.3s ease, color 0.3s ease; /* Hover effects */
  }
  
  .social-icon:hover {
    transform: scale(1.2); /* Scale up on hover */
    color: #007bff; /* Change to your hover color */
  }
  
/*                                              MOBILE RESPONSIVE VIEW                                     */
/*Content*/
@media only screen and (max-width: 768px) {
    .info {
        width: 100%;
        height: 335px;
        top: 50px;
        gap: 20px;
        opacity: 1;
        background-color: rgba(217, 217, 217, 0.8);
        text-align: center;
        padding-top: 80px;
    }

    .info h1 {
        font-size: 24px; /* Adjusting font size for smaller screens */
        font-weight: 500;
        line-height: 48.76px;
        padding-bottom: 10px;
        color: rgba(0, 0, 0, 1);
    }

    .info h2{
        font-size: 20px; /* Adjusting font size for smaller screens */
        font-weight: 500;
        line-height: 29.26px;
        color: rgba(0, 0, 0, 1);
    }

    .info p {
        width: 90%;
        height: 132px;
        font-size: 12.8px; /* Adjusting font size for smaller screens */
        font-weight: 400;
        line-height: 30px;
        padding-top: 10px;
        color: rgba(0, 0, 0, 0.8);
        margin: 0 20px;
    }

    .infotwo {
        background-color: #ffffff;
        padding: 30px 20px; /* Adjusted padding for mobile screens */
    }

    .infotwo h1 {
        font-size: 24px; /* Adjusting font size */
        margin-bottom: 5px;
        padding: 0 20px;
    }

    .infotwo p {
        width: 100%; /* Adjusting width for mobile */
        height: 105px;
        font-size: 14px; /* Adjusting font size for readability */
        padding-top: 10px;
        padding-bottom: 50px;
        text-align: center;
        color: rgba(0, 0, 0, 0.8);
        margin: 0 auto 100px auto;
    }

    .image-container {
        margin: auto;
        width: 95%;
        height: 95%;
        left: 543px;
        padding-top: 15px;
        border-radius: 18px;
        opacity: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgb(217, 217, 217);
    }

    .image-container img {
        width: 85%;
        height: 80%;
        top: 1093px;
        gap: 0px;
        opacity: 0px; 
        object-fit:fill;
        transform: translateX(-9px); 
    }
}

/*Innovation*/
@media (max-width: 768px) {
    .innovation-section {
        background-color: #ffffff;
        text-align: center;
        padding-top: 20px;
    }
    
    /* Heading styles */
    .innovation-section h2 {
        margin-bottom: 40px;
        color: rgba(0, 0, 0, 0.8);
        font-family: 'Poppins';
        font-size: 14px;
        font-weight: 500;
        line-height: 36px;
        text-align: center;
    }
    
    /* Card styles */
    .innovation-section .card {
        width: 100%;
        text-align: center;
        padding: 0px 150px; /* Desktop padding */
    }
    
    .innovation-section .card h3 {
        color: rgba(0, 0, 0, 0.8);
        font-family: 'Poppins';
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
        text-align: left;
    }
    
    .innovation-section .card p {
        width: 90%; /* Make text width responsive */ 
        height: auto; /* Remove fixed height */
        margin: 0; /* Center content */
        color: rgba(0, 0, 0, 0.8);
        font-family: 'Poppins';
        font-size: 12px;
        font-weight: 400;
        line-height: 30px;
        text-align: left;
        padding-bottom: 25px;
    }
    
    .innovation-section {
        padding-top: 20px; /* Reduce padding for smaller screens */
    }

    .innovation-section h2 {
        font-size: 20px; /* Adjust font size */
        line-height: 28px; /* Adjust line height */
        margin-bottom: 25px; /* Reduce bottom margin */
    }

    .innovation-section .card {
        padding: 10px 10px; /* Reduce horizontal padding */
    }

    .innovation-section .card h3 {
        font-size: 14px; /* Smaller font size */
        line-height: 24px; /* Adjust line height */
        text-align: left; /* Center-align headings for mobile */
        padding-left: 10px;
    }

    .innovation-section .card p {
        font-size: 14px; /* Smaller font size */
        line-height: 24px; /* Adjust line height */
        text-align: left; /* Left-align text */
        width: 90%; /* Ensures space on both sides (10px padding on each side) */
        margin: 10px 10px; /* Adjust space around the text */
        padding: 0 5px; /* Adds padding to left and right for mobile */
        box-sizing: border-box; /* Ensures padding is included in the width calculation */
    }
    
}


/*Movement*/
/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
    .movement-section {
        padding: 20px 20px; /* Reduce padding for smaller screens */
        background-color: #ffffff;
        text-align: center;
    }
    
    .movement-section h2 {
        margin-bottom: 20px; /* Reduce the margin for smaller screens */
        color: rgba(0, 0, 0, 0.8);
        font-family: 'Poppins';
        font-size: 20px; /* Smaller font size for mobile */
        font-weight: 600;
        line-height: 28px; /* Adjust line height */
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
    }
    
    .movement-section p {
        width: 100%; /* Ensure text spans the full width */
        margin: auto; /* Center the paragraph */
        color: rgba(0, 0, 0, 0.8);
        font-family: 'Poppins';
        font-size: 16px; /* Smaller font size for mobile */
        font-weight: 400;
        line-height: 24px; /* Adjust line height for readability */
        text-align: center;
    }
    
    .movement-section {
        padding: 15px 10px; /* Adjust padding for smaller devices */
    }

    .movement-section h2 {
        font-size: 18px; /* Further reduce font size for very small screens */
        line-height: 26px;
    }

    .movement-section p {
        width: 90%;
        height: auto;
        font-size: 14px; /* Smaller text for mobile */
        line-height: 22px;
        padding: 0 2px ; /* Add some padding for better readability */
        margin-left: 10px;
    }
}

@media (max-width: 600px) {
    .team-card {
        width: 100%; /* Full width for smaller screens */
        height: auto; /* Adjust height automatically */
        padding: 15px; /* Slightly smaller padding */
    }

    .team-card img {
        width: 120px; /* Reduce image size */
        height: 120px;
    }

    .team-card h3 {
        font-size: 18px; /* Reduce heading size */
    }

    .team-card p {
        font-size: 16px; /* Adjust paragraph font size */
    }

    .team-container {
        gap: 25px; /* Reduce gap further */
        margin: 0 auto;
        padding: 30px;
    }
}


@media (max-width: 768px) {
    .footer-container {
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px;

}
.footer-section2{
max-width:85%;
}
.logo1 img{
margin-left: -10px;
}

address {
  font-size: 12px; /* Smaller font size for better readability */
  line-height: 1.5; /* Adjust line height for better spacing */
  padding: 0 10px; /* Add padding for a consistent layout */
}

a {
  font-size: 12px; /* Adjust font size for mobile screens */
}

.nav-links,
.terms-links {
flex-direction: column;
gap: 10px;
align-items: center;
}
.social-media {
  justify-content: space-evenly; /* Space items evenly for smaller screens */
  gap: 10px; /* Adjust spacing for mobile */
  margin: 0 auto;
  padding-right: 20px;
}

.media {
  width: 50px; /* Reduce size on smaller screens 40*/
  height: 50px;
}



.footer-section h4 {
font-size: 18px;
text-align: center;
}

.nav-links a,
.terms-links a {
font-size: 16px;
}

.social-icon {
font-size: 30px;/*22*/
margin-bottom: 5px;
}

.bottom {
  text-align: center; /* Center align text */
  padding: 5px 20px;
}

.bottom p {
      margin: 0; /* Remove extra spacing */
      font-family: 'Roboto';
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5; /* Add spacing between lines */
      word-wrap: break-word; /* Allow text wrapping */
      white-space: normal; /* Enable wrapping */
}
}