body {
   background-color: #000;
   color: #fff;
 }

 /* Main navbar */
 nav {
   width: 100%;
   background-color: #00000046;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 40px;
   position: fixed;
   top: 0;
   z-index: 1000;
 }

 .logo {
   color: white;
   font-size: 24px;
   font-weight: bold;
   cursor: pointer;
 }

 .nav-links {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
 }

 .nav-links a {
   color: white;
   text-decoration: none;
   font-size: 16px;
   padding: 6px 18px;
   border-radius: 5px;
   transition: 0.3s;
 }

 .nav-links a:hover {
   color: white;
   background-color: #222;
 }

 .nav-links a.active {
   color: white;
   border-bottom: 2px solid #fff;
 }

 .search-box {
   position: relative;
 }

 .search-box .input1 {
   padding: 6px 30px 6px 10px;
   border: none;
   border-radius: 20px;
   outline: none;
   background-color: #ffffffc4;
 }

 .search-box button {
   position: absolute;
   right: 5px;
   top: 3px;
   background: none;
   border: none;
   color: #555;
   cursor: pointer;
   font-size: 16px;
 }

 /* Hamburger icon */
 .menu-icon {
   display: none;
   font-size: 26px;
   cursor: pointer;
   color: white;
 }

 /* Mobile menu overlay */
 .mobile-menu {
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   width: 100%;
   background: linear-gradient(to right,rgb(0, 0, 0),rgb(44, 43, 43), rgb(2, 2, 2));
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 30px;
   transform: translateX(-100%);
   transition: 0.4s ease;
   z-index: 99;
 }

 .mobile-menu.active {
   transform: translateX(0);
 }

 .mobile-menu a {
   color: #ffffff;
   font-size: 26px;
   text-decoration: none;
   transition: 0.3s;
   border-bottom: 1px solid #444;
   padding-bottom: 8px;
 }

 .mobile-menu a:hover {
   color: white;
 }

 .close-icon {
position: absolute;
top: 70px;
right: 25px;
font-size: 38px;
color: #f8f8f8;
cursor: pointer;
}

 /* Responsive */
 @media (max-width: 900px) {
   .nav-links, .search-box {
     display: none;
   }
   .menu-icon {
     display: block;
   }
 }
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
 }

 body {
   color: #333;
   line-height: 1.6;
 }

 header {
   text-align: center;
   padding: 60px 20px 20px;
 }

 header h1 {
   font-size: 2.5rem;
   color: #ffffff;
   margin-bottom: 10px;
 }

 header p {
   color: #666;
   font-size: 1.1rem;
 }

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

 .team-card {
   background: linear-gradient(to top,rgba(51, 50, 50, 0.753),rgb(0, 0, 0), rgba(43, 42, 42, 0.733));
   border-radius: 16px;
   box-shadow: 0 4px 15px rgba(0,0,0,0.1);
   width: 260px;
   text-align: center;
   padding: 25px 20px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

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

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

 .team-card h3 {
   font-size: 1.3rem;
   color: #ffffff;
   margin-bottom: 5px;
 }

 .team-card p.position {
   color: #ffffff;
   font-size: 0.95rem;
   margin-bottom: 15px;
 }

 .team-card p.bio {
   font-size: 0.9rem;
   color: #ffffff;
   margin-bottom: 15px;
 }

 .social-links {
   display: flex;
   justify-content: center;
   gap: 15px;
 }

 .social-links a {
   text-decoration: none;
   color: #636363;
   font-size: 1.2rem;
   transition: color 0.3s ease;
 }

 .social-links a:hover {
   color: #fafafa;
 }

 /* بخش پایین کارت‌ها */
 .team-footer {
   text-align: center;
   background: #f9f0e6;
   padding: 40px 20px;
   font-size: 1.1rem;
   color: #b68d40;
   margin-top: 40px;
   border-radius: 16px;
 }

 footer {
   text-align: center;
   background: #111;
   color: #ccc;
   padding: 30px 10px;
   font-size: 0.9rem;
   margin-top: 20px;
 }

 /* Responsive */
 @media (max-width: 1200px) {
   .team-card {
     width: 45%;
   }
 }

 @media (max-width: 768px) {
   header h1 {
     font-size: 2rem;
   }
   .team-card {
     width: 90%;
   }
 }

 
 /* footer */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
   box-shadow: none ;
 }

 footer {
   background:black;
   color: #fff;
   padding: 40px 20px;
   box-shadow: inset -1px -1px 15px 11px #958a8a !important;
 }

 .footer-container {
   max-width: 1200px;
   margin: auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 40px;
 }

 .footer-section {
   flex: 1 1 220px;
   min-width: 200px;
 }

 .footer-section h3 {
   margin-bottom: 15px;
   font-size: 16px;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #ffffff; /* رنگ طلایی-خاکی */
 }

 .footer-section ul {
   list-style: none;
 }

 .footer-section ul li {
   margin-bottom: 8px;
 }

 .footer-section ul li a {
   color: #ffffff;
   text-decoration: none;
   transition: color 0.3s;
 }

 .footer-section ul li a:hover {
   color: #8b8b88;
 }

 .payment-logos img {
   width: 45px;
   margin: 5px;
   filter: brightness(0) invert(1);
 }

 .social-icons a {
   color: #fff;
   margin-right: 12px;
   font-size: 20px;
   text-decoration: none;
   transition: color 0.3s;
 }

 .social-icons a:hover {
   color: #8b8b88;
 }

 .newsletter {
   display: flex;
   flex-direction: column;
   margin-top: 10px;
 }

 .newsletter p {
   font-size: 14px;
   margin-bottom: 10px;
   color: #ddd;
 }

 .newsletter input[type="email"] {
   padding: 10px;
   border: 1px solid #fff;
   border-radius: 3px;
   margin-bottom: 10px;
   background-color: #000;
   color: #fff;
   outline: none;
   width: 90%;
   margin-left: 20px;
 }

 .newsletter button {
   background-color: #000;
   color: #fff;
   border: 1px solid #fff;
   padding: 8px;
   cursor: pointer;
   transition: all 0.3s;
   width: 90%;
   margin-left: 20px;
 }

 .newsletter button:hover {
   background-color:#8b8b88;
   border-color: #8b8b88;
   color: #000;
 }

 .footer-bottom {
   text-align: center;
   margin-top: 30px;
   font-size: 14px;
   color: #8b8b88;
 }

 @media (max-width: 768px) {
   .footer-container {
     flex-direction: column;
     text-align: center;
   }
   .social-icons {
     justify-content: center;
   }
 }