* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Arial, sans-serif;
}

:root {
   --primary: #ff004c;
   --secondary: #0d47a1;
   --accent: #ff004c;
   --text: #172B4D;
   --light: #ffffff;
}

body {
   min-height: 100vh;
   overflow-x: hidden;
   direction: ltr !important;
   background-image: url(bg6.jpg);
}

/* Animated Background Balls */
.bg-animation {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: 1;
}

.bg-ball {
   position: absolute;
   border-radius: 50%;
   filter: blur(40px);
   opacity: 0.5;
}

.ball-1 {
   width: 600px;
   height: 600px;
   background: linear-gradient(45deg, #e5469d, #f00495);
   animation: moveBall1 20s infinite;
}

.ball-2 {
   width: 500px;
   height: 500px;
   background: linear-gradient(45deg, #2563eb, #3b82f6);
   animation: moveBall2 25s infinite;
}

.ball-3 {
   width: 400px;
   height: 400px;
   background: linear-gradient(45deg, #3b82f6, #60a5fa);
   animation: moveBall3 30s infinite;
}

@keyframes moveBall1 {
   0% { transform: translate(0, 0); }
   25% { transform: translate(50vw, 20vh); }
   50% { transform: translate(80vw, 50vh); }
   75% { transform: translate(20vw, 70vh); }
   100% { transform: translate(0, 0); }
}

@keyframes moveBall2 {
   0% { transform: translate(80vw, 0); }
   25% { transform: translate(20vw, 40vh); }
   50% { transform: translate(0, 60vh); }
   75% { transform: translate(50vw, 20vh); }
   100% { transform: translate(80vw, 0); }
}

@keyframes moveBall3 {
   0% { transform: translate(50vw, 80vh); }
   25% { transform: translate(0, 30vh); }
   50% { transform: translate(80vw, 20vh); }
   75% { transform: translate(20vw, 50vh); }
   100% { transform: translate(50vw, 80vh); }
}

.navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1.5rem 4rem;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   position: fixed;
   width: 100%;
   top: 0;
   z-index: 1000;
   direction: ltr !important;
}


.logo {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--light);
}

.nav-content {
   display: flex;
   align-items: center;
   gap: 3rem;
   margin-left: auto; /* Push to right side */
   direction: ltr !important;
}

/* Navigation links container */
.nav-links {
   display: flex;
   gap: 2.5rem;
   margin-right: 2rem; /* Space between links and language buttons */
   direction: ltr !important;
}

/* Individual nav links */
.nav-link {
   text-decoration: none;
   color: var(--light);
   font-weight: 600;
   font-size: 1.1rem;
   position: relative;
   padding: 0.5rem 0;
   white-space: nowrap; /* Prevent text wrapping */
   direction: ltr !important;
}

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

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

.language-select {
   display: flex;
   gap: 0.5rem;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   padding: 0.25rem;
   background: rgba(255, 255, 255, 0.1);
   /* Add these properties */
   position: relative;
   order: 2; /* Control ordering */
}
.lang-btn {
   padding: 0.5rem 1rem;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   font-weight: 500;
   transition: all 0.3s ease;
   color: var(--light);
}

.lang-btn.active {
   background: #ffe600;
}

.lang-btn:not(.active) {
   background: transparent;
}

.lang-btn:hover:not(.active) {
   background: rgba(255, 255, 255, 0.1);
}

.hero {
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   padding: 2rem;
   position: relative;
   z-index: 2;
}

.main-title {
   font-size: 5rem;
   font-weight: 800;
   margin-bottom: 1.5rem;
   background: linear-gradient(45deg, #fff, #e2e8f0);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.subtitle {
   font-size: 1.8rem;
   color: #e2e8f0;
   font-weight: 500;
   max-width: 700px;
   line-height: 1.6;
   margin: 0 auto 3rem auto;
}

.cta-button {
   padding: 1rem 2.5rem;
   font-size: 1.2rem;
   font-weight: 600;
   color: white;
   background: linear-gradient(-45deg, #ff0080, #e75c85, #ec0349, #f10597);
   background-size: 300% 300%;
   animation: gradientBG 5s ease infinite;
   border: none;
   border-radius: 50px;
   cursor: pointer;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   box-shadow: 0 4px 20px #ff0077;

}



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

.cta-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 30px #ff004c;
}



@media (max-width: 1024px) {
   .main-title {
       font-size: 4rem;
   }

   .subtitle {
       font-size: 1.6rem;
       padding: 0 1rem;
   }
}

@media (max-width: 768px) {
   .navbar {
       padding: 1rem;
   }

   .mobile-menu-btn {
       display: block;
       background: none;
       border: none;
       color: var(--light);
       font-size: 1.5rem;
       cursor: pointer;
       z-index: 1001;
   }

   .nav-content {
       position: fixed;
       top: 0;
       right: -100%;
       width: 80%;
       max-width: 300px;
       height: 100vh;
       background: #ff004c;
       backdrop-filter: blur(10px);
       flex-direction: column;
       padding: 5rem 2rem;
       gap: 2rem;
       transition: 0.3s ease-in-out;
       z-index: 1000;
   }

   .nav-content.active {
       right: 0;
   }

   .nav-links {
       flex-direction: column;
       align-items: center;
       gap: 2rem;
   }

   .language-select {
       margin: 0;
   }

   .main-title {
       font-size: 3rem;
   }

   .subtitle {
       font-size: 1.3rem;
       padding: 0 1rem;
   }

   .cta-button {
       padding: 0.8rem 2rem;
       font-size: 1.1rem;
   }

   .bg-ball {
       filter: blur(80px);
   }

   .ball-1 { width: 300px; height: 300px; }
   .ball-2 { width: 250px; height: 250px; }
   .ball-3 { width: 200px; height: 200px; }
}

@media (max-width: 480px) {
   .main-title {
       font-size: 2.5rem;
   }

   .subtitle {
       font-size: 1.1rem;
   }

   .hero {
       padding: 1rem;
   }

   .navbar {
       padding: 0.8rem;
   }

   .logo {
       font-size: 1.2rem;
   }

   .nav-content {
       width: 100%;
       max-width: none;
   }
}

/* Mobile Menu Overlay */
.menu-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(3px);
   opacity: 0;
   visibility: hidden;
   transition: 0.3s ease-in-out;
   z-index: 999;
}

.menu-overlay.active {
   opacity: 1;
   visibility: visible;
}


@media (max-width: 768px) {
   .nav-link {
       transform: translateX(50px);
       opacity: 0;
       transition: all 0.3s ease-in-out;
   }

   .nav-content.active .nav-link {
       transform: translateX(0);
       opacity: 1;
   }

   .nav-content.active .nav-link:nth-child(1) { transition-delay: 0.1s; }
   .nav-content.active .nav-link:nth-child(2) { transition-delay: 0.2s; }
   .nav-content.active .nav-link:nth-child(3) { transition-delay: 0.3s; }
}

img{
   width: 60px;
   height: 48px;
}