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

html, body {
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

body{
  background:#000;
  color:white;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#navbar{
position:absolute;
top:10px;
left:50%;
transform:translateX(-50%);
width:95%;
display:flex;
justify-content:space-between;
align-items:center;
padding:1vh 10px;
background:rgba(128,128,128,0.6);
backdrop-filter:blur(8px);
border-radius:20px;
z-index:1000;
position:relative;
}

#navbar.closed{
border-radius:20px;
}

#navbar.open{
border-radius:20px 20px 0 0;
}

.logo{
font-size:2rem;
font-weight:bold;
color:white;
}

#menu-btn{
display:block;
font-weight:bold;
color:white;
background:none;
border:none;
cursor:pointer;
padding:10px;
font-size:clamp(12px,2vh,14px);
}

#dropdown-menu{
position:absolute;
top:100%;
left:0;
width:100%;
background:rgba(128,128,128,0.6);
flex-direction:column;
border-radius:0 0 20px 20px;
display:flex;
}

#dropdown-menu.hidden{
display:none;
}

.nav-link{
color:white;
font-size:15px;
padding:10px 20px;
text-decoration:none;
display:block;
}

.relative{
position:relative;
width:100%;
}

#language-btn{
color:white;
font-size:15px;
padding:10px 20px;
background:none;
border:none;
cursor:pointer;
text-align:left;
width:100%;
}

#language-dropdown{
display:none;
position:absolute;
top:100%;
left:10px;
margin-top:5px;
background:white;
border-radius:20px;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
width:200px;
z-index:1001;
}

#language-dropdown.hidden{
display:none;
}

#language-dropdown:not(.hidden){
display:block;
}

.language-link{
display:block;
padding:10px 15px;
color:black;
text-decoration:none;
}

.language-link:first-child{
border-radius:20px 20px 0 0;
}

.language-link:last-child{
border-radius:0 0 20px 20px;
}

.language-link:hover{
color:#ff1978;
}

.hero{
  width:100%;
  margin-top:-80px;
}

.hero-top, .hero-brand{
  position: relative;
  padding:140px 20px 120px;
  text-align:center;
  overflow: hidden; 
}

.hero-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://pub-61fc579dd1b34337825d49e443f261d9.r2.dev/groopal-blue.webp') center/cover no-repeat;
  filter: blur(2.5px) brightness(0.75);
  z-index: -1;
}

.hero-brand::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://pub-61fc579dd1b34337825d49e443f261d9.r2.dev/rizee-001.webp') center/cover no-repeat;
  filter: blur(2.5px) brightness(0.75);
  z-index: -1;
}

.hero-top * , .hero-brand * {
  position: relative;
  z-index: 1;
}

.hero-top h1,
.hero-brand {
  font-size: clamp(40px, 5.8vw, 60px);
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.05;
  letter-spacing: -1px;
  hyphens: auto;
}

.hero-image{
  margin-bottom: -80px;
  display:flex;
  justify-content:center;
}

.hero-image img{
  width:30%;
  max-width:250px;
}

.main-content-about{
  display:flex;
  flex-direction:column;
}

.section{
  width:100%;
  padding:30px 20px;
  text-align:center;
}

.section h2{
  font-size: clamp(30px, 5vw, 25px);
  padding:20px 10px 40px;
}

.section p{
  padding:20px 10px 60px;
  font-size: clamp(15px, 2vw, 20px);
}

.marquee {
  width: 100%;
  overflow: hidden;
  padding: 25px 0;
  position: relative;
  display: flex;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.06), transparent 50%),
    radial-gradient(rgba(255,255,255,0.25) 1.5px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
    linear-gradient(135deg, #2b2f77, #6a3df0, #ff1978);
    background-size:
    100% 100%,
    100% 100%,
    clamp(30px, 4vw, 60px) clamp(30px, 4vw, 60px),
    clamp(60px, 6vw, 120px) clamp(60px, 6vw, 120px),
    100% 100%;
    background-position:
    center,
    center,
    0 0,
    20px 20px,
    center;
    background-blend-mode: overlay;
}

.marquee {
  width: 100%;
  overflow: hidden;
  padding: 25px 0;
  position: relative;
  display: flex;
  background: linear-gradient(135deg, #ff1978, #ff4d9d, #ff8fab);
}

.marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.7) 2px, transparent 2px),
    radial-gradient(rgba(255,255,255,0.5) 1.5px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.3) 1px, transparent 1px);
 background-size:
    60px 60px,
    40px 40px,
    25px 25px;
  animation: fall 10s linear infinite;
}

.marquee-content {
  position: relative;
  z-index: 1;
}

@keyframes fall {
  0% {
    background-position:
      0 0,
      0 0,
      0 0;
  }
  100% {
    background-position:
      0 200px,
      0 300px,
      0 400px;
  }
}

.marquee-content {
  display: flex;
  align-items: center;
  gap: 50px; 
  width: max-content !important;
  will-change: transform;
  animation: scroll linear infinite; 
}

.marquee-content {
  transform: translate3d(0,0,0);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 50px;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--move)); } /* ⬅️ clave */
}

.marquee-content span {
  white-space: nowrap;
  font-family:'Montserrat' !important;
  font-size: 35px;
  font-weight: 600;
  color: white;
}

.marquee-content img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .marquee-content span { font-size: 24px; }
  .marquee-content img { width: 30px; height: 30px; }
  .marquee-content, .marquee-track { gap: 30px; }
}

.marquee {
  user-select: none;
}

.social-icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  margin-top:20px;
}

.icon {
  width: 25px !important;
  height: 25px !important;
  border-radius: 50%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: white;
  font-size: 12px !important;
  transition: all 0.3s ease;
}

.icon:hover {
  transform: scale(1.1);
}

.icon.facebook:hover {
  background: #1877F2;
}

.icon.instagram:hover {
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
}

.icon.twitter:hover {
  background: black;
}

.icon.tiktok:hover {
  background: linear-gradient(45deg, #25F4EE, #FE2C55);
}

.facebook { background-color: black; color: white; }
.instagram { background-color: black; color: white; }
.twitter { background-color: black; color: white; }
.tiktok{ background-color: black; color: white; }

.footer {
  text-align: center;
  font-size: 10.5px !important;
  text-align: center !important;
  padding: 20px;
  background-color: #ff1978;
  font-family:sans-serif !important;
  font-stretch: normal;
  letter-spacing: normal;
  line-height: 1.4; 
}

.footer a {
  font-size: 10.5px !important;
  font-family: 'Montserrat' !important;
  font-weight: 600;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.footer-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-row a {
  text-decoration: none;
  color: white;
  transition: color 0.3s;
}

.footer-row a:hover {
  color: white;
}

.footer-info {
  color: white;
  font-size: 9px !important;
  font-family:sans-serif !important;
  font-stretch: normal;
  letter-spacing: normal;
  line-height: 1.4; 
  font-weight: 500;
}

@media (min-width:1024px){

  #menu-btn{
    display:none;
  }

  #dropdown-menu{
    display:flex!important;
    position:static;
    background:transparent;
    flex-direction:row;
    align-items:center;
    gap:30px;
    width:auto;
    padding: 0 15px;
  }

  
  .nav-link{
    padding:0;
  }

  .relative{
    width:auto;
  }

  #language-btn{
    padding:0;
    text-align:center;
    width:auto;
  }

  #language-dropdown{
    left:50%;
    transform:translateX(-50%);
    margin-top:8px;
  }
}

.btt{
   background:#ff1978;
   color:white;
   padding:25px;
   border-radius:999px;
   text-decoration:none;
   font-weight:600;
   letter-spacing:1px;
   transition:0.3s;
   display:inline-block;
   margin-bottom:40px;
}

.bttview{
   background:#35C8FE;
   color:white;
   padding:25px;
   border-radius:999px;
   text-decoration:none;
   font-weight:600;
   letter-spacing:1px;
   transition:0.3s;
   display:inline-block;
   margin-bottom:40px;
}

.logo-section{
  margin-top:20px;
  width:50%;
  max-width:250px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
  transition: transform 0.3s;
}

.logo-section:hover{
  transform: scale(1.05);
}

.logo-section1{
  margin-top:20px;
  width:80%;
  max-width:350px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
  transition: transform 0.3s;
}

.logo-section1:hover{
  transform: scale(1.05);
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.color-card {
  border-radius: 25px;
  padding: 40px 20px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.color-card:hover {
  transform: translateY(-5px);
}

.color-card span {
  display: block;
  font-size: 18px;
  font-weight: 600;
}

.color-card small {
  font-size: 14px;
  opacity: 0.8;
}

.pink {
  background: #FF1978;
  color: white;
}

.black {
  background: #000000;
  color: white;
  border: 1px solid #333;
}

.yellow {
  background: #FFD600;
  color: black;
}

.sky {
  background: #35C8FE;
  color: black;
}