/* === Landing Page Styles === */
/* Import Sao Torpes font */

/* Base styles */

html {
    scroll-behavior: smooth;
}

body {
    background-color: #0d0d0d;
    color: white;
    margin: 0;
    padding: 0;
    font-family: 'Sao Torpes', sans-serif; /* Updated font */
}
* {
    box-sizing: border-box;
  }

/* === Navbar === */
/* ====== Navbar ====== */
/* === Navbar Styles === */
.navbar {
    width: 100%;
    padding: 20px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0d0d0d;
    position: relative;
  }
  
  .navbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .logo {
    height: 32px;
  }
  
  .navbar-left span {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    color: white;
    font-family: 'Lexend', sans-serif;
  }
  
  .navbar-right {
    display: flex;
    align-items: center;
    gap: 25px;
  }
  
  .navbar-right a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
    font-family: 'Lexend', sans-serif;
  }
  
  .navbar-right a:hover {
    color: #ffcc00;
  }
  
  .search-icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
  }
  
  #navbar-search {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-left: 10px;
  }
  
  /* Hamburger */
  .hamburger {
    display: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
  }
  
  /* === Mobile Styles === */
  @media (max-width: 768px) {
    .navbar {
        position: relative; /* Make positioning context for hamburger */
      }
    
      .hamburger {
        position: absolute;
        top: 20px;           /* Align vertically with logo (adjust if needed) */
        right: 20px;         /* Align to the right edge */
        display: block;
        cursor: pointer;
      }
    
      .navbar-left {
        display: flex;
        align-items: center;
        gap: 10px;
      }
  
    .navbar-right {
      display: none;
      flex-direction: column;
      align-items: flex-end; /* Aligns children to the right */
      width: 100%;
      gap: 12px;
      margin-top: 10px;
      background-color: #0d0d0d;
      padding: 10px 20px 0 20px; /* Add horizontal padding */
    }
  
    .navbar-right.show {
      display: flex;
    }
  
    .navbar-right a {
      text-align: right;
      width: auto;
    }
  
    #navbar-search {
      width: auto;
      margin-top: 10px;
      align-self: flex-end;
    }
  }
  
  
/* Hero Section */
.hero {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;        /* Reduced padding */
    padding-bottom: 3rem;
    min-height: 45vh;         /* Smaller height on larger screens */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}

.hero-line.compact {
    gap: 0.4rem;
    margin-left: 6rem;
}

.hero-line:last-child {
    gap: 0.8rem;
}

.hero-word {
    font-family: 'Sao Torpes', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: bold;
    color: white;
}

.hero-line.compact .hero-word {
    transform: translateX(16px);
}

.hero-shape {
    width: clamp(2.5rem, 6vw, 4.5rem);
    height: auto;
    animation: floatRotate 4s ease-in-out infinite;
}

@keyframes floatRotate {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-8px) rotate(5deg);
    }
}

/* Larger screens */
@media (min-width: 1024px) {
    .hero {
        padding-top: 4rem;
        padding-bottom: 4rem;
        min-height: 55vh;  /* Slightly smaller height */
    }
    .hero-word {
        font-size: clamp(3rem, 5vw, 6rem);
    }
    .hero-shape {
        width: clamp(3rem, 5vw, 5rem);
    }
    .hero-line.compact {
        margin-left: 10rem; /* Slightly less margin */
        gap: 0.8rem;        /* Slightly wider gap */
    }
}

/* Extra large screens */
@media (min-width: 1440px) {
    .hero {
        min-height: 65vh;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .hero-word {
        font-size: 6rem;
    }
    .hero-shape {
        width: 5rem;
    }
}

/* Stats Section */
.stats {
    display: flex;
    justify-content: center;
    gap: 4rem; /* space between items */
    color: white;
    background-color: #222222;
    margin: 3rem 0; /* space above and below */
    padding: 2rem 0; /* internal vertical padding */
    flex-wrap: wrap; /* allow wrapping on smaller screens */
  }
  
  .stat-item {
    text-align: center;
    font-family: 'Lexend', sans-serif;
    flex: 1 1 150px; /* flexible width with a min of 150px */
    min-width: 120px;
    margin: 1rem 0; /* spacing when wrapped */
  }
  
  .number-plus {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15rem;
    font-weight: 900;
    font-size: 2.5rem;
    color: #ffcc00; /* yellow */
  }
  
  .plus {
    font-weight: 900;
    font-size: 2rem;
    color: white;
  }
  
  .label {
    margin-top: 0.3rem;
    font-weight: 400;
    font-size: 1rem;
    text-transform: uppercase;
    color: white;
    font-family: 'Lexend', sans-serif;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .stats {
      gap: 2rem;
      padding: 1.5rem 0;
    }
  
    .number-plus {
      font-size: 2rem;
    }
  
    .plus {
      font-size: 1.8rem;
    }
  
    .label {
      font-size: 0.9rem;
    }
  }
  
  @media (max-width: 480px) {
    .stats {
      flex-direction: column;
      align-items: center;
    }
  
    .stat-item {
      width: 100%;
    }
  }
  

/* About Section */
.about-section {
    min-height: 80vh;
    padding-left: 4rem;
  padding-right: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  

.about-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    flex-wrap: wrap;
    padding-left: 3rem;
    padding-right: 3rem;
}

.about-image-wrapper {
    position: relative;
    flex: 1;
    min-width: 300px;
    max-width: 550px;
}

.about-image {
    width: 100%;
    border: 4px solid #ff4bb0;
    border-radius: 20px;
    position: relative;
    z-index: 3;
}
.slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space dots and arrows across */
    gap: 1rem;
    margin-top: 1rem;
    width: 100%;             /* Take full width of the image wrapper */
    max-width: 500px;        /* Match your image/carousel width */
    padding: 0 0.8rem;       /* Add padding on both sides */
    box-sizing: border-box;
  }
  
  
  

/* Vector yellow shape - behind the image */
.about-vector {
    position: absolute;
    bottom: 140px;     /* closer to bottom of the image */
    left: -40px;      /* shift it into the image slightly */
    width: 100px;     /* scale down to avoid overwhelming image */
    z-index: 4;       /* make sure it’s behind the image */
  }
  
  
  

/* Star - top right */
.about-star {
    position: absolute;
    top: 10px;   /* or whatever distance from top */
    right: 10px; /* or whatever distance from right */
    width: 80px;
    z-index: 1000;
    pointer-events: none;
  }
  .about-dots {
    display: flex;
    gap: 8px;
  }
  .dot {
    width: 10px;
    height: 10px;
    background-color: #777;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
    cursor: pointer;
  }
  
  .dot.active {
    background-color: #ff4bb0;
  }
  
  .slider-nav {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 0.1rem;     /* reduced from 1rem to move upward */
    margin-right: 5rem;     /* already adjusted for horizontal position */
  }
  
  
  
  
  
/* Arrow controls */


.nav-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-circle.dark {
    transform: translateX(6px);
    background-color: #2c2c2c;
    color: white;
}

.nav-circle.pink {
    transform: translateX(-6px);
    background-color: #ff4bb0;
    color: white;
}

.about-text {
    flex: 1;
    min-width: 300px;
    padding: 1rem;
    font-family: 'Lexend', sans-serif;
}

.about-text h2 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #ff4bb0;
    margin-bottom: 1rem;
    font-family: 'Sao Torpes', sans-serif;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #fff;
}
.about-image-wrapper {
    padding-bottom: 3rem;  /* if you want more space below image */
}

.about-container {
    padding-top: 2rem;
}
.about-carousel {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4 / 5;
    overflow: visible; /* allows the border-radius edges to show */
    border-radius: 20px; /* add border-radius here too */
  }
  
  .about-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 4px solid #ff4bb0;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
    box-sizing: border-box;
  }
  
  
  .about-slide.active {
    opacity: 1;
    z-index: 2;
  }
  
  @media (max-width: 768px) {
    .about-container {
      flex-direction: column;
      align-items: center;
      gap: 2rem;
      padding: 2rem 1rem;
    }
  
    .about-text h2 {
      font-size: 1.8rem;
      text-align: center;
    }
  
    .about-text p {
      text-align: center;
    }
  
    .slider-nav {
      justify-content: center;
      margin-top: 1rem;
    }
  
    .about-vector {
      left: -20px;
      bottom: 10px;
      width: 80px;
    }
  
    .about-star {
      top: 0;
      right: 0;
      width: 60px;
    }
  }

  @media (max-width: 480px) {
    .dot {
      width: 8px;
      height: 8px;
    }
  
    .nav-circle {
      width: 36px;
      height: 36px;
      font-size: 1rem;
    }
  }
  
  
  @media (max-width: 768px) {
    .navbar {
      flex-direction: column;
      align-items: flex-start;
      padding: 1rem;
      
    }
  
    .nav-links {
      flex-direction: column;
     
      width: 100%;
    }
  
    .nav-links a {
      font-size: 14px;
    }
    .search-container {
        align-self: flex-end;
        margin-top: -1rem;
    }

  
    .search {
      
      height: 20px;
    }
  }