/* =====================================
   SOBOK RESPONSIVE DESIGN
===================================== */

/* ============================
   LARGE LAPTOP
============================ */

@media (max-width: 1200px) {
  .navbar {
    padding-left: 40px;
    padding-right: 40px;
  }

  .hero {
    padding: 0 40px;
  }

  .hero h1 {
    font-size: 52px;
  }
}

/* ============================
   TABLET
============================ */

@media (max-width: 992px) {
  section {
    padding: 80px 30px;
  }

  /* Navbar */

  .nav-links {
    gap: 20px;
  }

  /* Hero */

  .hero {
    grid-template-columns: 1fr;

    text-align: center;

    min-height: auto;

    padding-top: 60px;
  }

  .hero p {
    margin-left: auto;

    margin-right: auto;
  }

  .hero-image {
    max-width: 600px;

    margin: auto;
  }

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

  /* About */
  .about-hero {
    min-height: 50vh;
  }

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

  .about-hero p {
    font-size: 16px;
  }

  /* Preview */

  .preview {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .preview-box {
    height: 300px;
  }

  /* Steps */

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing */

  .pricing-container {
    grid-template-columns: 1fr;

    max-width: 500px;
  }

  .pricing-card.popular {
    transform: none;
  }

  .pricing-card.popular:hover {
    transform: translateY(-10px);
  }

  /* Footer */

  footer {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ======================
   FOOTER BRAND
====================== */

.footer-brand {
  display: flex;
  flex-direction: column;
}

.footer-brand img {
  width: 110px;
  height: auto;

  object-fit: contain;

  margin-bottom: 15px;
}

.footer-brand p {
  color: var(--muted);

  font-size: 14px;
}

/* ============================
   MOBILE
============================ */

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  section {
    padding: 70px 20px;
  }

  /* =================
 NAVBAR MOBILE
================= */

  .navbar {
    padding: 15px 20px;
  }

  .logo img {
    height: 80px;
  }

  .nav-links {
    position: absolute;

    top: 75px;

    left: 0;

    width: 100%;

    background: #09090b;

    flex-direction: column;

    gap: 25px;

    padding: 30px;

    border-bottom: 1px solid var(--border);

    transform: translateY(-120%);

    opacity: 0;

    pointer-events: none;

    transition: 0.4s;
  }

  .nav-links.active {
    transform: translateY(0);

    opacity: 1;

    pointer-events: auto;
  }

  .hamburger {
    display: block;
  }

  /* HERO */

  .hero {
    gap: 40px;
  }

  .hero h1 {
    font-size: 38px;

    line-height: 1.2;
  }

  .hero p {
    font-size: 16px;
  }

  .hero-button {
    display: flex;

    flex-direction: column;

    gap: 15px;
  }

  .btn-outline {
    margin-left: 0;
  }

  /* Dashboard */

  .dashboard-card {
    padding: 20px;
  }

  .stats {
    flex-direction: column;
  }

  /* Heading */

  h2 {
    font-size: 32px;
  }

  /* Feature cards */

  .cards {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 25px;
  }

  /* Steps */

  .steps {
    grid-template-columns: 1fr;
  }

  .steps div {
    margin-bottom: 25px;
  }

  /* Preview */

  .preview-box {
    height: 250px;

    font-size: 22px;
  }

  .preview ul {
    text-align: left;

    display: inline-block;
  }

  .preview li {
    font-size: 14px;
  }

  /* Testimonial */

  .testimonial {
    padding: 25px;
  }

  /* Contact */

  .contact-section {
    grid-template-columns: 1fr;
  }

  /* Footer */

  footer {
    grid-template-columns: 1fr;

    text-align: center;

    padding: 40px 20px;
  }

  .footer-brand {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
  }

  .footer-brand img {
    width: 90px;

    margin: 0 auto 15px;
  }

  /* SCROLL TO TOP */

  .scroll-to-top {
    width: 45px;

    height: 45px;

    right: 20px;

    bottom: 20px;

    font-size: 21px;
  }
}

/* ============================
   SMALL PHONE
============================ */

@media (max-width: 400px) {
  .hero h1 {
    font-size: 32px;
  }

  .hero p {
    font-size: 15px;
  }

  .btn,
  .btn-outline {
    width: 100%;

    text-align: center;
  }

  .job {
    flex-direction: column;

    gap: 8px;
  }

  .stats div {
    padding: 15px;
  }

  h2 {
    font-size: 28px;
  }
}

```css
/* ======================
   PRODUCTS RESPONSIVE
====================== */


@media(max-width:992px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .section-header {
    margin-bottom: 40px;
  }

  .section-header h2 {
    font-size: 32px;
  }

  .section-header p {
    font-size: 15px;
  }

  .products-grid {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .product-card {
    padding: 28px;
  }

  .product-card h3 {
    font-size: 21px;
  }
}

@media (max-width: 400px) {
  .section-header h2 {
    font-size: 28px;
  }

  .product-card {
    padding: 25px;
  }

  .product-icon {
    width: 55px;

    height: 55px;
  }
}
```

/* =====================================
   COMPANY PROFILE RESPONSIVE
===================================== */


/* ============================
   TABLET
============================ */

@media(max-width:992px) {
  .about-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .career-section {
    padding: 60px 35px;
  }

  .contact-section {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .contact-info {
    text-align: center;
  }

  .contact-info h2 {
    text-align: center;
  }

  .contact-item {
    justify-content: center;
  }
}

/* ============================
   MOBILE
============================ */

@media (max-width: 768px) {
  section {
    padding: 70px 20px;
  }

  .section-header {
    margin-bottom: 40px;
  }

  .section-header h2 {
    font-size: 32px;
  }

  .section-header p {
    font-size: 15px;
  }

  /* ABOUT */

  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-grid .card {
    min-height: auto;
  }

  /* PRODUCTS */

  .products-grid {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .product-card {
    padding: 28px;
  }

  .product-card h3 {
    font-size: 21px;
  }

  /* TECHNOLOGY */

  #technology .cards {
    grid-template-columns: 1fr;
  }

  #technology .card {
    min-height: auto;
  }

  /* CAREER */

  .career-section {
    padding: 50px 25px;

    border-radius: 22px;
  }

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

  /* CONTACT */

  .contact-section {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .contact-info {
    text-align: center;
  }

  .contact-info h2 {
    text-align: center;

    font-size: 30px;
  }

  .contact-item {
    justify-content: center;
  }

  .contact-form {
    padding: 25px;
  }
}

/* ============================
   SMALL PHONE
============================ */

@media (max-width: 400px) {
  .section-header h2 {
    font-size: 28px;
  }

  .product-card {
    padding: 25px;
  }

  .product-icon {
    width: 55px;

    height: 55px;
  }

  .career-content h2 {
    font-size: 27px;
  }

  .contact-form {
    padding: 20px;
  }
}