.MgpLink{
text-decoration: none;
}
.star-badge {
display: inline-flex;
align-items: center;
gap: 5px; 
font-size: 11px;
font-weight: 500;
background: #E6F1FB; 
color: #0C447C; 
padding: 3px 10px; 
border-radius: 20px; 
margin-bottom: 20px; 
width: fit-content; }


 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }

 :root {
 --primary-dark: #0a1628;
 --primary-medium: #1a365d;
 --primary-light: #2c5282;
 --accent-blue: #3182ce;
 --accent-gold: #d69e2e;
 --white: #ffffff;
 --gray-100: #f7fafc;
 --gray-200: #edf2f7;
 --gray-600: #718096;
 }

 html {
 scroll-behavior: smooth;
 }

 body {
 font-family: 'Inter', sans-serif;
 color: var(--primary-dark);
 line-height: 1.6;
 }

 h1, h2, h3, h4 {
 font-family: 'Poppins', sans-serif;
 }

 /* Header */
 header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1000;
 background: rgba(10, 22, 40, 0.95);
 backdrop-filter: blur(10px);
 transition: all 0.3s ease;
 }

 nav {
 max-width: 1400px;
 margin: 0 auto;
 padding: 1rem 2rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }

 .logo {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 color: var(--white);
 text-decoration: none;
 font-weight: 700;
 font-size: 1.5rem;
 }

 .logo img {
 height: 50px;
 width: auto;
 border-radius: 8px;
 }

 .logo-icon {
 width: 50px;
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, var(--primary-medium), var(--accent-blue));
 border-radius: 10px;
 }

 .logo-icon svg {
 width: 80%;
 height: 80%;
 }

 .nav-links {
 display: flex;
 gap: 2rem;
 list-style: none;
 }

 .nav-links a {
 color: var(--white);
 text-decoration: none;
 font-weight: 500;
 transition: color 0.3s ease;
 position: relative;
 }

 .nav-links a::after {
 content: '';
 position: absolute;
 bottom: -5px;
 left: 0;
 width: 0;
 height: 2px;
 background: var(--accent-gold);
 transition: width 0.3s ease;
 }

 .nav-links a:hover::after {
 width: 100%;
 }

 .nav-links a:hover {
 color: var(--accent-gold);
 }

 .menu-toggle {
 display: none;
 flex-direction: column;
 gap: 5px;
 cursor: pointer;
 padding: 5px;
 }

 .menu-toggle span {
 width: 25px;
 height: 3px;
 background: var(--white);
 transition: all 0.3s ease;
 }

 /* Hero Section */
 .hero {
 position: relative;
 height: 100vh;
 min-height: 700px;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 }

 .hero-animated-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -2;
 background: linear-gradient(45deg, 
 #0a1628 0%, 
 #1a365d 25%, 
 #2c5282 50%, 
 #1a365d 75%, 
 #0a1628 100%);
 background-size: 400% 400%;
 animation: gradientShift 15s ease infinite;
 }

 @keyframes gradientShift {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
 }

 .hero-animated-bg::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: 
 radial-gradient(circle at 20% 50%, rgba(49, 130, 206, 0.15) 0%, transparent 50%),
 radial-gradient(circle at 80% 50%, rgba(214, 158, 46, 0.15) 0%, transparent 50%);
 animation: pulse 8s ease-in-out infinite;
 }

 @keyframes pulse {
 0%, 100% { opacity: 0.5; transform: scale(1); }
 50% { opacity: 1; transform: scale(1.1); }
 }

 .hero-particles {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
 z-index: -1;
 }

 .particle {
 position: absolute;
 bottom: -100px;
 background: rgba(255, 255, 255, 0.1);
 border-radius: 50%;
 animation: floatParticle linear infinite;
 }

 .particle:nth-child(1) { left: 10%; width: 80px; height: 80px; animation-duration: 20s; animation-delay: 0s; }
 .particle:nth-child(2) { left: 20%; width: 40px; height: 40px; animation-duration: 15s; animation-delay: 2s; }
 .particle:nth-child(3) { left: 35%; width: 60px; height: 60px; animation-duration: 25s; animation-delay: 4s; }
 .particle:nth-child(4) { left: 50%; width: 50px; height: 50px; animation-duration: 18s; animation-delay: 1s; }
 .particle:nth-child(5) { left: 65%; width: 70px; height: 70px; animation-duration: 22s; animation-delay: 3s; }
 .particle:nth-child(6) { left: 75%; width: 45px; height: 45px; animation-duration: 17s; animation-delay: 5s; }
 .particle:nth-child(7) { left: 85%; width: 90px; height: 90px; animation-duration: 23s; animation-delay: 2s; }
 .particle:nth-child(8) { left: 15%; width: 55px; height: 55px; animation-duration: 19s; animation-delay: 4s; }
 .particle:nth-child(9) { left: 45%; width: 35px; height: 35px; animation-duration: 16s; animation-delay: 1s; }
 .particle:nth-child(10) { left: 70%; width: 65px; height: 65px; animation-duration: 21s; animation-delay: 3s; }

 @keyframes floatParticle {
 0% {
 transform: translateY(0) rotate(0deg);
 opacity: 0;
 }
 10% {
 opacity: 0.3;
 }
 90% {
 opacity: 0.3;
 }
 100% {
 transform: translateY(-120vh) rotate(720deg);
 opacity: 0;
 }
 }

 .hero-wave {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 200%;
 height: 150px;
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E") repeat-x;
 animation: wave 10s linear infinite;
 z-index: 0;
 }

 @keyframes wave {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%); }
 }

 .hero-content {
 text-align: center;
 color: var(--white);
 max-width: 900px;
 padding: 2rem;
 z-index: 1;
 animation: fadeInUp 1s ease-out;
 }

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

 .hero-content h1 {
 font-size: clamp(2.5rem, 6vw, 5rem);
 font-weight: 800;
 margin-bottom: 1.5rem;
 line-height: 1.2;
 }

 .hero-content h1 span {
 color: var(--accent-gold);
 }

 .hero-content p {
 font-size: clamp(1.1rem, 2.5vw, 1.5rem);
 margin-bottom: 2.5rem;
 opacity: 0.95;
 font-weight: 300;
 }

 .cta-button {
 display: inline-block;
 padding: 1rem 3rem;
 background: var(--accent-gold);
 color: var(--primary-dark);
 text-decoration: none;
 border-radius: 50px;
 font-weight: 600;
 font-size: 1.1rem;
 transition: all 0.3s ease;
 box-shadow: 0 4px 20px rgba(214, 158, 46, 0.4);
 }

 .cta-button:hover {
 transform: translateY(-3px);
 box-shadow: 0 6px 30px rgba(214, 158, 46, 0.6);
 }

 /* Sections */
 section {
 padding: 6rem 2rem;
 }

 .container {
 max-width: 1200px;
 margin: 0 auto;
 }

 .section-title {
 text-align: center;
 margin-bottom: 3rem;
 }

 .section-title h2 {
 font-size: clamp(2rem, 4vw, 3rem);
 color: var(--primary-dark);
 margin-bottom: 1rem;
 }

 .section-title p {
 font-size: 1.1rem;
 color: var(--gray-600);
 max-width: 700px;
 margin: 0 auto;
 }

 /* About Section */
 .about {
 background: var(--gray-100);
 }

 .about-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
 align-items: center;
 }

 .about-content h2 {
 font-size: 2.5rem;
 color: var(--primary-dark);
 margin-bottom: 1.5rem;
 }

 .about-content p {
 color: var(--gray-600);
 margin-bottom: 1.5rem;
 font-size: 1.1rem;
 line-height: 1.8;
 }

 .about-image {
 position: relative;
 }

 .about-image img {
 width: 100%;
 border-radius: 20px;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
 }

 /* Services Section */
 .services {
 background: var(--white);
 }

 .services-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
 gap: 1.5rem;
 }

 .service-card {
 background: var(--white);
 border-radius: 20px;
 padding: 2.5rem;
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
 transition: all 0.4s ease;
 border: 1px solid var(--gray-200);
 position: relative;
 overflow: hidden;
 }

 .service-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 4px;
 background: linear-gradient(90deg, var(--accent-gold), var(--accent-blue));
 transition: width 0.4s ease;
 }

 .service-card:hover::before {
 width: 100%;
 }

 .service-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
 }

 .service-icon {
 width: 70px;
 height: 70px;
 background: linear-gradient(135deg, var(--primary-medium), var(--accent-blue));
 border-radius: 15px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 1.5rem;
 font-size: 2rem;
 }

 .service-card h3 {
 font-size: 1.4rem;
 color: var(--primary-dark);
 margin-bottom: 1rem;
 }

 .service-card p {
 color: var(--gray-600);
 line-height: 1.7;
 }

 /* Identity Section */
 .identity {
 background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium));
 color: var(--white);
 position: relative;
 overflow: hidden;
 }

 .identity::before {
 content: '';
 position: absolute;
 top: -50%;
 right: -50%;
 width: 100%;
 height: 200%;
 background: radial-gradient(circle, rgba(49, 130, 206, 0.1) 0%, transparent 70%);
 animation: float 20s infinite ease-in-out;
 }

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

 .identity-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 3rem;
 position: relative;
 z-index: 1;
 }

 .identity-card {
 background: rgba(255, 255, 255, 0.05);
 backdrop-filter: blur(10px);
 border-radius: 20px;
 padding: 3rem;
 border: 1px solid rgba(255, 255, 255, 0.1);
 transition: all 0.3s ease;
 }

 .identity-card:hover {
 background: rgba(255, 255, 255, 0.1);
 transform: translateY(-5px);
 }

 .identity-card h3 {
 font-size: 1.8rem;
 margin-bottom: 1.5rem;
 color: var(--accent-gold);
 }

 .identity-card p {
 font-size: 1.05rem;
 line-height: 1.8;
 opacity: 0.95;
 }

 /* Purpose Section */
 .purpose {
 background: var(--white);
 }

 .purpose-content {
 max-width: 900px;
 margin: 0 auto;
 text-align: center;
 }

 .purpose-content h2 {
 font-size: 2.5rem;
 color: var(--primary-dark);
 margin-bottom: 2rem;
 }

 .purpose-content blockquote {
 font-size: 1.4rem;
 font-style: italic;
 color: var(--gray-600);
 line-height: 1.9;
 position: relative;
 padding: 2rem 0;
 }

 .purpose-content blockquote::before,
 .purpose-content blockquote::after {
 content: '"';
 font-size: 4rem;
 color: var(--accent-gold);
 opacity: 0.3;
 position: absolute;
 }

 .purpose-content blockquote::before {
 top: 0;
 left: -1rem;
 }

 .purpose-content blockquote::after {
 bottom: -1rem;
 right: -1rem;
 }

 /* Contact Section */
 .contact {
 background: var(--gray-100);
 }

 .contact-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
 }

 .contact-info h3 {
 font-size: 2rem;
 color: var(--primary-dark);
 margin-bottom: 2rem;
 }

 .contact-item {
 display: flex;
 align-items: flex-start;
 gap: 1rem;
 margin-bottom: 1.5rem;
 }

 .contact-item-icon {
 width: 50px;
 height: 50px;
 background: var(--primary-medium);
 border-radius: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 }

 .contact-item-icon span {
 font-size: 1.5rem;
 }

 .contact-item-content h4 {
 font-size: 1.1rem;
 color: var(--primary-dark);
 margin-bottom: 0.3rem;
 }

 .contact-item-content p {
 color: var(--gray-600);
 }

 .contact-form {
 background: var(--white);
 border-radius: 20px;
 padding: 3rem;
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
 }

 .form-group {
 margin-bottom: 1.5rem;
 }

 .form-group label {
 display: block;
 margin-bottom: 0.5rem;
 color: var(--primary-dark);
 font-weight: 500;
 }

 .form-group input,
 .form-group textarea {
 width: 100%;
 padding: 1rem;
 border: 2px solid var(--gray-200);
 border-radius: 10px;
 font-family: 'Inter', sans-serif;
 font-size: 1rem;
 transition: border-color 0.3s ease;
 }

 .form-group input:focus,
 .form-group textarea:focus {
 outline: none;
 border-color: var(--accent-blue);
 }

 .form-group textarea {
 resize: vertical;
 min-height: 150px;
 }

 .submit-btn {
 width: 100%;
 padding: 1rem;
 background: var(--primary-medium);
 color: var(--white);
 border: none;
 border-radius: 10px;
 font-size: 1.1rem;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 }

 .submit-btn:hover {
 background: var(--primary-light);
 transform: translateY(-2px);
 }

 /* Footer */
 footer {
 background: var(--primary-dark);
 color: var(--white);
 padding: 3rem 2rem 1.5rem;
 }

 .footer-content {
 max-width: 1200px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 2rem;
 margin-bottom: 2rem;
 }

 .footer-section h4 {
 font-size: 1.2rem;
 margin-bottom: 1rem;
 color: var(--accent-gold);
 }

 .footer-section p,
 .footer-section a {
 color: rgba(255, 255, 255, 0.7);
 text-decoration: none;
 display: block;
 margin-bottom: 0.5rem;
 transition: color 0.3s ease;
 }

 .footer-section a:hover {
 color: var(--accent-gold);
 }

 .footer-bottom {
 text-align: center;
 padding-top: 1.5rem;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 color: rgba(255, 255, 255, 0.5);
 }

 /* Floating Contact Buttons */
 .floating-buttons {
 position: fixed;
 bottom: 2rem;
 right: 2rem;
 display: flex;
 flex-direction: column;
 gap: 1rem;
 z-index: 999;
 }

 .floating-btn {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 text-decoration: none;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 transition: all 0.3s ease;
 }

 .floating-btn:hover {
 transform: translateY(-5px) scale(1.1);
 box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
 }

 .whatsapp-btn {
 background: #25D366;
 }

 .whatsapp-btn svg {
 width: 35px;
 height: 35px;
 fill: white;
 }

 .linkedin-btn {
 background: #0A66C2;
 }

 .linkedin-btn svg {
 width: 35px;
 height: 35px;
 fill: white;
 }

 /* Responsive */
 @media (max-width: 992px) {
 .about-grid,
 .contact-grid {
 grid-template-columns: 1fr;
 }

 .about-image {
 order: -1;
 }
 }

 @media (max-width: 768px) {
 .menu-toggle {
 display: flex;
 }

 .nav-links {
 position: fixed;
 top: 80px;
 left: 0;
 right: 0;
 background: var(--primary-dark);
 flex-direction: column;
 padding: 2rem;
 gap: 1.5rem;
 transform: translateY(-150%);
 transition: transform 0.3s ease;
 }

 .nav-links.active {
 transform: translateY(0);
 }

 section {
 padding: 4rem 1.5rem;
 }

 .identity-grid {
 gap: 2rem;
 }

 .identity-card {
 padding: 2rem;
 }

 .floating-buttons {
 bottom: 1.5rem;
 right: 1.5rem;
 }

 .floating-btn {
 width: 55px;
 height: 55px;
 }
 }

 @media (max-width: 480px) {
 .floating-buttons {
 bottom: 1rem;
 right: 1rem;
 }

 .floating-btn {
 width: 50px;
 height: 50px;
 }
 }

 /* Scroll animations */
 .fade-in {
 opacity: 0;
 transform: translateY(30px);
 transition: all 0.6s ease-out;
 }

 .fade-in.visible {
 opacity: 1;
 transform: translateY(0);
 }