/* Oiyaa Technologies Responsive Styling */

/* =============================================================================
   RESPONSIVE STYLES
   All responsive styles from style.css
============================================================================= */

/* Media query for about-logo */
@media (max-width: 767.98px) {
  .about-logo {
    margin: 0 auto;
    display: block;
  }
}

/* Partner Slider Responsive adjustments */
@media (max-width: 768px) {
  .partner-slide {
    width: 200px;
    height: 80px;
  }
  .partner-slide-track {
    width: calc(200px * 42);
  }
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-200px * 21));
    }
  }
}

/* Extra Large Devices (Large Desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
  
  .hero-section {
    padding-top: 0.5rem;
    padding-bottom: 10rem;
  }
  
  .hero-title {
    font-size: calc(var(--font-display-sm) * 1.2);
  }
  
  .hero-text {
    font-size: var(--font-xl);
  }
  
  .section-title {
    margin-bottom: 3rem;
  }
  
  .feature-box, .cta-box {
    padding: 3rem;
  }
}

@media (max-width: 991.98px) {
  .nav-bar-custom {
    padding: 0px 0.5rem;
    display: flex !important;
    align-items: center !important;
  }

  .hero-section {
    padding-top: 4rem;
    padding-bottom: 6rem;
  }
  
  .hero-title {
    font-size: var(--font-xxxl);
  }
  
  .navbar-collapse {
    background-color: var(--oiyaa-blue);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
  }
  
  .feature-boxes {
    margin-top: 2rem;
  }
  
  /* Navbar alignment and sizing */
  .navbar .navbar-nav {
    display: flex;
    align-items: flex-start;
  }

  .navbar .nav-item {
    display: flex;
    align-items: center;
  }

  .navbar {
    padding: 0.5rem 0;
  }
  
  .logo-img {
    height: 80px;
  }

  .about-logo {
    width: auto;
    height: 150px;
  }

  .cta-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 1rem;
  }

  .hero-content {
    text-align: center;
  }
  
  .hero-text {
    max-width: unset;
  }
}

@media (max-width: 767.98px) {
  .footer-logo {
    margin: 0 auto;
    display: block;
  }

  .hero-image {
    margin-top: 3rem;
  }
  
  .hero-section::after {
    height: 100px; 
  }

  .section-title {
    font-size: var(--font-xxl);
  }
  
  .footer-links {
    margin-top: 2rem;
  }
  
  .footer-text {
    max-width: 100%;
    text-align: center;
  }
  
  .footer-section .oiyaa-logo {
    display: block;
    text-align: center;
    margin: 0 auto;
  }

  .feature-boxes {
    margin-top: 30px;
  }
  
  .about-section,
  .diff-section,
  .partners-section,
  .cta-section {
    padding: 50px 0;
  }
}

/* Large Devices (Desktops, 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container {
    max-width: 960px;
  }
  
  .hero-section {
    padding-top: 2rem;
    padding-bottom: 8rem;
  }

  .nav-link, .btn-partner {
    font-size: var(--font-lg);
  }

  .hero-title {
    font-size: 30px;
  }

  .hero-text {
    font-size: var(--font-lg);
  }

  .hero-image img {
    max-width: 100%;
    height: 40vw;
  }

  .diff-section {
    padding: 80px 1vw;
  }

  .diff-box {
    padding: 1rem;
  }
  
  .nav-link {
    padding: 0.5rem 1rem !important;
  }
}

/* Medium Devices (Tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-section {
    padding: 4rem 2rem 6rem 2rem;
  }
  
  .hero-title {
    font-size: var(--font-display-sm);
  }
  
  .hero-text {
    font-size: var(--font-md);
    margin-bottom: 3rem;
  }
  
  .nav-link {
    font-size: var(--font-lg);
    padding: 0.4rem 0.8rem !important;
  }
  
  .feature-title, .diff-title, .cta-title {
    font-size: var(--font-xl);
  }
  
  .section-title {
    font-size: var(--font-xxl);
  }
  
  .about-content {
    font-size: var(--font-md);
    text-align: center;
  }
  
  .about-section, .diff-section, .partners-section, .cta-section {
    padding: 60px 0;
  }

  .about-section {
    text-align: center;
  }
  
  .feature-box, .cta-box, .diff-box {
    padding: 1.5rem;
    margin-bottom: 20px;
  }
}

/* Small Devices (Landscape Phones, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hero-section {
    padding: 3rem 1.5rem 0rem 1.5rem;
    text-align: center;
  }
  
  .hero-image img {
    height: 50vw;
    margin: 0 auto;
    display: block;
  }
  
  .hero-title {
    font-size: var(--font-xxxl);
  }
  
  .hero-text {
    font-size: var(--font-md);
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
  }
  
  .navbar-collapse {
    padding: 1rem;
  }
  
  .nav-link {
    font-size: var(--font-lg);
    padding: 0.5rem 1rem !important;
  }
  
  .section-title {
    font-size: var(--font-xl);
    margin-bottom: 1.5rem;
  }
  
  .section-title::after {
    height: 4px;
    bottom: -8px;
  }
  
  .about-section, .diff-section, .partners-section, .cta-section {
    padding: 50px 0;
    text-align: center;
  }
  
  .feature-box, .cta-box, .diff-box {
    padding: 1.5rem;
    margin-bottom: 20px;
  }
  
  .feature-title, .diff-title, .cta-title {
    font-size: var(--font-lg);
  }
  
  .about-content {
    font-size: var(--font-sm);
    text-align: center;
  }
  
  .partner-logo {
    max-height: 50px;
    max-width: 120px;
    margin: 1rem;
  }
  
  .footer-section {
    text-align: center;
    padding: 3rem 0 1.5rem;
  }
  
  .footer-links {
    margin-top: 2rem;
  }
}

/* Extra Small Devices (Portrait Phones, less than 576px) */
@media (max-width: 575.98px) {
  .hero-section {
    padding: 2rem 1rem 0rem 1rem;
    text-align: center;
  }

  .about-logo {
    width: auto;
    height: 100px;
  }  
  
  .hero-image img {
    height: 60vw;
    margin: 0 auto;
    display: block;
  }
  
  .hero-title {
    font-size: var(--font-xxl);
    margin-top: 1rem;
  }
  
  .hero-text {
    font-size: var(--font-sm);
    margin-bottom: 2rem;
  }
  
  .navbar-collapse {
    padding: 1rem;
  }
  
  .nav-link {
    font-size: var(--font-md);
    padding: 0.4rem 0.8rem !important;
  }
  
  .btn-partner {
    font-size: var(--font-md);
    padding: 0.4rem 1rem !important;
    margin-top: 0.5rem;
  }
  
  .section-title {
    font-size: var(--font-xl);
    margin-bottom: 1.5rem;
  }
  
  .section-title::after {
    height: 3px;
    bottom: -6px;
  }
  
  .about-section, .diff-section, .partners-section, .cta-section {
    padding: 40px 0;
    text-align: center;
  }
  
  .about-content {
    font-size: var(--font-sm);
    text-align: center;
  }
  
  .feature-box, .cta-box, .diff-box {
    padding: 1.25rem;
    margin-bottom: 15px;
  }

  .diff-link {
        width: 80%;
  }

  .cu-box-center-sm{
    display: flex;
    align-items: center;
  }

  .feature-link, .cta-link {
      width: 70%;
  }

  .box_alignment_center {
    display: flex;
    justify-content: center;
  }

  .feature-title, .diff-title, .cta-title {
    font-size: var(--font-md);
  }
  
  .feature-icon, .diff-icon {
    width: 100px;
    height: 100px;
  }
    .partner-logo {
    margin: 0.75rem;
  }
  
  .footer-section {
    text-align: center;
    padding: 2.5rem 0 1rem;
  }
  
  .footer-section .oiyaa-logo {
    font-size: var(--font-xl);
  }
  
  .footer-text, a {
    /* font-size: var(--font-xs); */
  }
  
  .footer-links {
    margin-top: 1.5rem;
  }
  
  .social-link {
    font-size: var(--font-xxs);
    margin: 0 0.5rem;
  }
  
  h1, h2 {
    font-size: var(--font-xl);
  }
  
  h3 {
    font-size: var(--font-lg);
  }
    h4 {
    font-size: var(--font-md);
  }
}

/* Print Styles */
@media print {
  .navbar, .footer-section, .cta-section {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    color: #000;
  }
  
  a {
    text-decoration: underline;
    color: #000;
  }
  
  .container {
    max-width: 100%;
    width: 100%;
  }
  
  .hero-section, .about-section, .diff-section, .partners-section {
    padding: 20pt 0;
    page-break-inside: avoid;
  }
  
  .hero-image img, .about-logo, .partner-logo {
    max-width: 100%;
    height: auto;
  }
  
  .section-title::after {
    display: none;
  }
}