/* responsive.css */

/* Desktop - Large Screens (> 1200px) */
@media (min-width: 1201px) {
  :root {
    --h1font-size: 54px;
    --h2font-size: 44px;
  }
}

/* Notebook (1024px - 1200px) */
@media (max-width: 1200px) {
  :root {
    --h1font-size: 56px;
    --h2font-size: 40px;
  }

  section {
    padding: 100px 0;
  }

  .hero-main-img {
    width: 440px;
  }
}

/* Tablet - Landscape (992px - 1023px) */
@media (max-width: 991px) {
  :root {
    --h1font-size: 48px;
    --h2font-size: 38px;
    --h3font-size: 28px;
  }

  section {
    padding: 80px 0;
  }

  /* Container adjustments */
  .container {
    padding: 0 24px;
  }

  /* Header scaling */
  .logo img {
    height: 30px;
  }

  .nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 40px;
  }

  .nav.active {
    left: 0;
  }

  .nav-links {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }

  .nav-links a {
    font-size: 1.2rem;
  }

  .hamburger {
    display: block;
    z-index: 2001;
  }

  .header-actions {
    display: none;
  }

  .mobile-actions {
    display: flex;
    margin-top: 20px;
  }

  /* Hero Refinement */
  .hero {
    padding: 60px 0 100px;
  }

  .hero-content {
    margin-bottom: 50px;
  }

  .hero-badge {
    margin: 0 auto 24px;
  }

  .hero-content h1 {
    margin-bottom: 24px;
  }

  .hero-content p {
    margin: 0 auto 40px;
  }

  .hero-image-container {
    padding: 0;
    justify-content: center;
  }

  .hero-main-img {
    width: 380px;
    margin-bottom: -100px;
  }

  .forex-hero {
    padding: 60px 0;
  }
}

/* Tablet - Portrait (768px - 991px) */
@media (max-width: 768px) {
  :root {
    --h1font-size: 42px;
    --h2font-size: 34px;
    --h3font-size: 24px;
  }
  .about-hero-v3 h1 {
    font-size: 44px;
  }
  .about-hero-v3,
  .forex-hero {
    background:
      radial-gradient(circle, rgb(255 255 255 / 0%) 60%, rgb(255 255 255 / 49%) -50%), url(../assets/bgpattrn.svg);
    padding: 50px 0 80px;
  }
  .about-hero-v3 p {
    font-size: 18px;
  }
  .about-solution-card-v3 {
    margin-bottom: 20px;
  }
  .vision-mission-v3 h3 {
    font-size: 22px;
  }
  .pillar-card-v3 h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .hero-sub{
    font-size: 17px;
  }
  .reveal-text{
    font-size: 24px;
  }
  .features-title-v4,
  .steps-title-v4{
    font-size: 28px;
  }
  .step-card-v4 h4{
    font-size: 19px;
  }
  .feature-card-v4{
    height: 530px;
}
main{
    overflow-x: hidden;
}
.contact-hero{
  padding: 50px 0 100px;
}
.support-section-header h2{
  font-size: 32px;
}
.support-card-v2 h4{
  font-size: 18px;
}
.support-card-v2 p{
  font-size: 14px;
}
.card-description{
  font-size: 15px;
}
.coin-visual-v4{
  width: 270px;
}
:root{
  --avatar-size:calc(74px * var(--base-scale));
}
  .cta-text {
    font-size: 1.1rem;
  }
  .links-col a,
  .footer-brand p {
    font-size: 14px;
  }
  .forex-hero h1 {
    font-size: 36px;
  }
  .links-col h4 {
    font-size: 1rem;
  }
  .footer-brand-title {
    font-size: 17px;
  }
  .about-main-text-v3 {
    font-size: 18px;
  }

  .decoration-metal.left {
    display: none;
  }

  .decoration-metal.right {
    display: none;
  }

  .about-main-text {
    font-size: 20px;
  }
  .btn-primary,
  .btn-secondary,
  .btn-outline-white {
    padding: 6px 8px 6px 14px !important;
  }
  .arrow {
    font-size: 1rem;
    width: 36px;
    height: 36px;
  }
  .method-timeline-container {
    padding-top: 0;
  }
  .vision-desc p {
    font-size: 1rem;
  }
  .vision-logo-side {
    padding: 10px;
  }
  .eco-arrow {
    width: 36px;
    height: 36px;
  }
  .btn-eco {
    font-size: 1rem;
    height: 54px;
    padding: 0 10px 0 14px;
  }
  .btn-primary {
    font-size: 14px;
  }
  .card-box {
    padding: 60px 30px;
    min-height: unset;
    margin-bottom: 30px;
  }

  .play-overlay {
    position: absolute;
    top: 35%;
  }

  .card-img img {
    width: 160px;
  }

  .method-list-v2 li,
  .method-row-v2.reverse-v2 .method-list-v2 li {
    justify-content: start;
  }

  .choose-icon-box {
    width: 50px;
    height: 50px;
  }

  .choose-icon-box img {
    width: 30px;
  }

  .prof-card-alt {
    padding: 24px;
    gap: 20px;
  }

  .prof-icon-box {
    width: 32px;
    height: 32px;
  }

  .prof-icon-box img {
    width: 20px;
  }

  .prof-card-alt p {
    font-size: 16px;
  }

  .method-row-v2 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px;
  }

  .method-media-v2,
  .method-info-v2 {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .method-row-v2.reverse-v2 .method-info-v2 {
    text-align: center !important;
  }

  .method-marker-v2 {
    display: none;
  }

  .timeline-line-v2 {
    display: none;
  }

  .method-info-v2 {
    padding: 0 !important;
  }

  .method-list-v2 li,
  .method-row-v2.reverse-v2 .method-list-v2 li {
    justify-content: center;
  }

  .method-title-v2 {
    font-size: 32px !important;
  }

  .method-desc-v2 {
    font-size: 15px !important;
  }

  .mb-100 {
    margin-bottom: 50px !important;
  }

  .feature-card-v4 {
    padding: 30px;
    min-height: unset;
  }

  .feature-card-v4 h3 {
    font-size: 20px;
  }

  .feature-visual img {
    max-width: 100%;
    height: auto;
  }

  .video-card-v7 {
    width: 260px;
  }

  .media-grid img {
    max-width: 100px;
    margin: 10px auto;
  }

  .method-media-v2 img {
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
  }

  .vision-logo-side {
    margin-bottom: 40px;
    text-align: center;
  }

  .testi-title {
    font-size: 32px;
  }
}

/* responsive */
@media (max-width: 991px) {
  .inner-hero {
    padding: 50px 0 80px;
  }

  .inner-section {
    padding: 60px 0;
  }

  .contact-wrapper {
    margin-top: 0;
  }

  .timeline-line-v2 {
    display: none;
  }

  .method-row-v2,
  .method-row-v2.reverse-v2 {
    flex-direction: column;
    gap: 50px;
    margin-bottom: 100px;
  }

  .method-media-v2,
  .method-info-v2,
  .method-row-v2.reverse-v2 .method-media-v2,
  .method-row-v2.reverse-v2 .method-info-v2 {
    padding: 0;
    text-align: center;
  }

  .method-marker-v2 {
    display: none;
  }

  .method-list-v2 li,
  .method-row-v2.reverse-v2 .method-list-v2 li {
    justify-content: center;
    flex-direction: row;
  }

  .forex-hero h1 {
    font-size: 48px;
  }

  .video-card-v7 {
    width: 260px;
    height: 400px;
  }

  .info-badges-divider {
    display: none;
  }

  .info-badge-item {
    padding: 40px 20px;
    text-align: center;
  }

  .info-badge-item a {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .inner-hero h1 {
    font-size: 36px !important;
  }

  .strategies-title-v5,
  .team-title-v6 {
    font-size: 36px;
  }

  .strategy-card-v5 {
    flex-direction: column;
    gap: 30px;
    padding: 40px;
  }

  .strategy-num-v5 {
    font-size: 64px;
  }

  .team-info-card-v6 {
    padding: 40px;
  }

  .text-content h2 {
    font-size: 30px;
  }

  .contact-info,
  .contact-form {
    padding: 40px 30px;
  }

  .team-grid,
  .blog-list,
  .course-features {
    gap: 20px;
  }

  .contact-info h3,
  .contact-form h3 {
    font-size: 26px;
    margin-bottom: 25px;
  }
}

@media (max-width: 1199px) {
  .strategy-card-v5 {
    padding: 50px;
    gap: 50px;
  }

  .team-info-card-v6 {
    padding: 50px;
  }
}

@media (max-width: 991px) {
  .info-badges-divider {
    display: none;
  }

  .nav-links {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .info-badge-item {
    padding: 40px 20px;
    text-align: center;
  }

  .info-badge-item a {
    justify-content: center;
  }

  .strategy-card-v5 {
    flex-direction: column;
    text-align: center;
  }

  .strategy-content-v5 {
    text-align: center;
  }

  .strategy-content-v5 ul li {
    display: inline-block;
    margin: 10px 15px;
  }
}

@media (max-width: 768px) {
  .testi-title,
  .strategies-title-v5,
  .team-title-v6 {
    font-size: 38px;
  }

  .testi-card-new {
    width: 320px;
    padding: 30px;
  }

  .team-info-card-v6 {
    padding: 40px;
  }

  .stat-num-v6 {
    font-size: 48px;
  }

  .hero-badge {
    margin: 0 auto 30px;
  }
}

@media (max-width: 991px) {
  .info-badges-row-v6 {
    flex-direction: column;
    gap: 80px;
  }

  .badge-divider-v6 {
    width: 60px;
    height: 1px;
    margin: 0 auto;
  }

  .info-badge-col-v6 {
    align-items: center;
    text-align: center;
    padding: 0 20px;
  }
  .card-content h3 {
    font-size: 23px;
  }
  .card-content p {
    padding-left: 20px;
  }
  .card-content p::after {
    left: 0;
  }
}

@media (max-width: 576px) {
  :root {
    --h1font-size: 32px;
    --h2font-size: 30px;
    --h3font-size: 22px;
  }

  section {
    padding: 60px 0;
  }

  .hero-main-img {
    width: 320px;
  }

  .about-main-text {
    font-size: 18px;
    line-height: 1.4;
  }

  .tag {
    font-size: 14px;
    padding: 8px 16px;
  }

  .course-card-alt {
    min-height: unset;
  }

  .choose-card-new {
    padding: 24px;
  }

  .choose-card-new h3 {
    font-size: 18px;
  }

  .method-media-v2,
  .method-info-v2 {
    align-items: start;
  }

  .high-method {
    padding: 100px 0 0;
  }

  .app-title {
    font-size: 26px;
  }

  .method-row-v2 {
    align-items: flex-start !important;
  }

  .method-media-v2,
  .method-info-v2,
  .method-row-v2.reverse-v2 .method-info-v2 {
    text-align: left !important;
  }

  .method-list-v2 li,
  .method-row-v2.reverse-v2 .method-list-v2 li {
    justify-content: start;
    flex-direction: row;
  }

  .contact-form-panel {
    padding: 60px 30px;
  }

  .forex-hero h1 {
    font-size: 32px;
  }

  .about-hero-v3 h1 {
    font-size: 32px;
  }

  .hero-sub {
    font-size: 17px;
  }

  .cta-banner {
    padding: 50px 24px;
  }

  .cta-title {
    font-size: 28px;
  }
  .arrow {
    font-size: 1rem;
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  :root {
    --h1font-size: 32px;
    --h2font-size: 28px;
  }

  .hero-main-img {
    width: 100%;
    max-width: 280px;
  }

  .method-list-v2 li,
  .method-row-v2.reverse-v2 .method-list-v2 li {
    justify-content: start;
    flex-direction: row;
  }

  .btn {
    width: fit-content;
    padding: 6px 6px 6px 13px !important;
  }

  .btn-nav-mobile {
    font-size: 1rem !important;
  }

  .about-subtitle {
    font-size: 14px;
  }

  .methods-list-v2 li {
    font-size: 14px;
  }

  .media-item img {
    max-width: 80px;
  }

  .store-btn {
    width: fit-content;
    justify-content: center;
  }

  .app-store-buttons {
    flex-direction: column;
    gap: 12px;
  }
}