.content {
    padding: 100px 200px;
}

.content h1 {
    font-size: 70px;
    padding-top: 100px;
    padding-bottom: 30px;
}

.content h2 {
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 600;
    padding-bottom: 60px;
}

.content p {
    font-size: 30px;
    padding-bottom: 40px;
}

.content img {
    width: 50%;
    padding-bottom: 30px;
    border-radius: 25px;
}

.web-dev-2025 {
    padding-top: 100px;
}

.how-to-now {
  padding-top: 100px;
}

.omnichannel {
  padding-top: 100px;
}


@media (min-width: 2560px) {
  .content { padding: 200px 200px; }
  .content h1 { font-size: 100px; padding-bottom: 10px; }
  .content h2 { font-size: 50px; padding-bottom: 120px; }
  .content p { font-size: 35px; padding-bottom: 80px; }
  .content img { width: 60%; padding-bottom: 60px; border-radius: 50px; }
  .web-dev-2025 { padding-top: 200px; }
  .omnichannel { padding-top: 200px; }
  .btn-art {font-size: 35px !important; padding: 20px 180px !important; }
}

@media (min-width: 1367px) and (max-width: 1600px) {
  .content { padding: 100px 40px; }
  .content h1 { font-size: 70px; padding-bottom: 70px; padding-top: 0; }
  .content h2 { font-size: 35px; padding-bottom: 20px; padding-top: 70px; }
  .content p { font-size: 25px; padding-bottom: 20px; }
  .content img { width: 55%; padding-bottom: 40px; border-radius: 35px; }
  .web-dev-2025 { padding-top: 0px; }
  .btn-art img { width: 60px; height: 60px; }
  .btn-art { font-size: 24px !important; padding: 0px 20px !important; border-radius: 55px; }
  .art { gap: 40px; padding-top: 20px;}
  .how-to-now {padding-top: 0;}
  .omnichannel {padding-top: 0;}
}

@media (min-width: 1024px) and (max-width: 1366px) {
  .content { padding: 100px 40px; }
  .content h1 { font-size: 60px; padding-bottom: 70px; padding-top: 0; }
  .content h2 { font-size: 25px; padding-bottom: 20px; }
  .content p { font-size: 20px; padding-bottom: 20px; }
  .content img { width: 55%; padding-bottom: 25px; border-radius: 20px; }
  .web-dev-2025 { padding-top: 50px; }
  .btn-art img { width: 40px; height: 40px; }
  .btn-art { font-size: 18px !important; padding: 0px 15px !important; border-radius: 55px; }
  .art { gap: 30px; padding-bottom: 30px;}
  .how-to-now {padding-top: 0px;}
  .omnichannel {padding-top: 50px;}
}

@media (min-width: 768px) and (max-width: 1023px) {
  .content { padding: 100px 20px; }
  .content h1 { font-size: 32px; padding-bottom: 40px; padding-top: 0; }
  .content h2 { font-size: 18px; padding-bottom: 20px; }
  .content p { font-size: 18px; padding-bottom: 15px; }
  .content img { width: 80%; padding-bottom: 10px; border-radius: 10px; }
  .web-dev-2025 { padding-top: 0px; padding-bottom: 0px; }
  .how-to-now {padding-top: 0;}
  .omnichannel {padding-top: 0;}
  .btn-art { font-size: 18px !important; padding: 10px 15px !important; border-radius: 55px; }
  .art { gap: 30px; padding-bottom: 50px;}
}

@media (max-width: 767px) {
  .content { padding: 100px 20px; }
  .content h1 { font-size: 40px; padding-bottom: 30px; padding-top: 0; }
  .content h2 { font-size: 25px; padding-bottom: 8px; }
  .content p { font-size: 20px; padding-bottom: 6px; }
  .content img { width: 100%; padding-bottom: 5px; border-radius: 5px; }
  .web-dev-2025 { padding-top: 50px; padding-bottom: 10px; }
  .btn-art { font-size: 20px !important; padding: 4px 40px !important; border-radius: 55px; }
  .art {padding-top: 20px; gap: 20px; }
  .art, .btn-art {
    overflow-x: auto;
  }
  .omnichannel {padding-top: 50px;}
  .how-to-now {padding-top: 50px;}
}

@media (max-width: 480px) {
  .content { padding: 100px 20px; }
  .content h1 { font-size: 30px; padding-bottom: 15px; padding-top: 0; }
  .content h2 { font-size: 18px; padding-bottom: 15px; }
  .content p { font-size: 18px; padding-bottom: 15px; }
  .content img { width: 100%; padding-bottom: 15px;}
  .web-dev-2025 { padding-top: 50px; padding-bottom: 15px; }
  .omnichannel { padding-top: 50px; padding-bottom: 15px; }
  .how-to-now {padding-top: 50px;}
  
}

.art {
  display: flex;
  justify-content: flex-start;
}

.art img {
  padding: 0;
  width: 20%;
}

.btn-art {
  background-color: #fff;
  display: flex;
  font-size: 25px;
  font-weight: 600;
  justify-content: center;
  align-items: center;
  gap: 50px;
  text-decoration: none;
  color: #151516;
  padding: 10px 90px;
  border-radius: 55px;
  cursor: pointer;
  z-index: 100;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-art:hover {
  transform: scale(1.08);
}

.btn-art img {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-art:hover img {
  transform: rotate(-12deg) translateY(-6px) translateX(6px);
}


.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}