body {
     font-family: 'Inter', sans-serif;
     background: #FDFDF9;
     color: #f8fafc;

 }

 h1,
 h2,
 h3,
 nav a {
     letter-spacing: 0px;
 }

 .hero {
     background: linear-gradient(135deg, #14bafc, #1b384b);
     padding: 100px 20px 80px;
     text-align: center;
 }

 .hero h1 {
     font-size: 3.5rem;
     font-weight: 800;
     margin-bottom: 20px;
 }

 .hero p {
     font-size: 1.25rem;
     max-width: 800px;
     margin: auto;
     line-height: 2.4rem;
 }

 .section {
     padding: 80px 20px;
 }
#clients {
         padding: 80px 20px 45px 20px;
}
 #services {
     padding: 80px 20px;
     background: linear-gradient(135deg, #0c148b, #0d073d);
 }




 h3 {
     font-weight: bold;
 }

 .service-card {
     background: #1e293b;
     border-radius: 20px;
     padding: 40px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
     color: #fff;
 }

 .service-card h3 {
     color: #fff;
     margin-bottom: 20px;
     font-size: 1.2em;
 }

 .service-card ul {
     list-style: none;
     padding: 0;
 }

 .service-card ul li::before {
     content: "\2022";
     color: #38bdf8;
     display: inline-block;
     width: 1em;
     margin-left: -1em;
 }


 #clients {
     background: #f7f6ef !important;
     text-align: center;
 }

 .portfolio-card {
     background: #fff;
     border-radius: 1rem;
     border: 0;
     transition: transform 0.3s, box-shadow 0.3s;

     background-image: linear-gradient(to bottom right, #fff 0%, #f6f8fc 80%);
 }

 .portfolio-card:hover {
     transform: translateY(-5px) !important;
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
 }

 .btn-cta {
     transition: transform 0.3s;
 }

 .btn-cta:hover {
     transform: translateY(-3px);
 }


 footer {
     background: #0f172a;
     color: #fff;
     padding: 60px 20px;
     text-align: center;
 }

 .btn-custom {
     background: #3b82f6;
     border: none;
     padding: 12px 24px;
     border-radius: 30px;
     color: #fff;
     font-weight: 600;
     transition: 0.3s;
     margin: 10px;
 }

 .btn-custom:hover {
     background: #2563eb;
 }

 .service-card.design {
     background: linear-gradient(135deg, #3b82f6, #1e3a8a);
     /*border:2px solid #1e3a8a;*/
 }

 .service-card.graphic {
     background: linear-gradient(135deg, #7c3aed, #4f46e5);
     /*border:2px solid #340f79;*/
 }

 .service-card.animation {
     background: linear-gradient(135deg, #ec4899, #8b5cf6);
     /*border:2px solid #661466;*/
 }

 .service-card.consulting {
     background: linear-gradient(135deg, #06c97e, #068d2e);
     /*border:2px solid #037726;*/
 }




 @keyframes animatedGradient {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }


 .hero,
 .btn-cta {
     background: linear-gradient(270deg,
             #14bafc,
             #9b59b6,
             #e74c3c,
             #f1c40f,
             #10b981,
             #14bafc);
     background-size: 1200% 1200%;
     animation: animatedGradient 20s ease infinite;

     text-align: center;
     color: #fff;
 }

 .btn-cta:hover {
     background: linear-gradient(135deg, #06c97e, #068d2e);
 }

 .no-line {
     text-decoration: none;
 }

 .navbar-brand {
     letter-spacing: 5px;
 }

 .navbar-brand span.colored {

     background: linear-gradient(270deg,
             #14bafc,
             #9b59b6,
             #e74c3c,
             #f1c40f,
             #10b981,
             #14bafc);
     background-size: 1200% 1200%;
     animation: animatedGradient 20s ease infinite;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     text-fill-color: transparent;
 }

 @keyframes cardGradient {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 @keyframes slideIn {
     0% {
         transform: translateY(30px);
         opacity: 0;
     }

     100% {
         transform: translateY(0);
         opacity: 1;
     }
 }

 @keyframes slideInHero {
     0% {
         transform: translateY(-30px);
         opacity: 0;
     }

     100% {
         transform: translateY(0);
         opacity: 1;
     }
 }

 .service-card {
     opacity: 0;
     animation: slideIn 1s ease forwards;
 }

 .hero p {
     opacity: 0;
     animation: slideInHero 1s ease forwards;
 }

 .service-card.design {
     background: linear-gradient(135deg, #3b82f6, #1e3a8a);
     background-size: 300% 300%;
     animation: cardGradient 8s ease infinite, slideIn 1s ease forwards;
     animation-delay: 0.1s;
 }

 .service-card.graphic {
     background: linear-gradient(135deg, #7c3aed, #4f46e5);
     background-size: 300% 300%;
     animation: cardGradient 8s ease infinite, slideIn 1s ease forwards;
     animation-delay: 0.25s;
 }

 .service-card.animation {
     background: linear-gradient(135deg, #ec4899, #8b5cf6);
     background-size: 300% 300%;
     animation: cardGradient 8s ease infinite, slideIn 1s ease forwards;
     animation-delay: 0.4s;
 }

 .service-card.consulting {
     background: linear-gradient(135deg, #06c97e, #068d2e);
     background-size: 300% 300%;
     animation: cardGradient 8s ease infinite, slideIn 1s ease forwards;
     animation-delay: 0.55s;
 }

 .portfolio-card {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.6s ease-out;
 }

 .portfolio-card.visible {
     opacity: 1;
     transform: translateY(0);
 }


 .hero {
     position: relative;
     overflow: hidden;
     z-index: 1;
 }

 .hero h1,
 .hero p {
     position: relative;
     z-index: 9999;
 }

 .logo-rain {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 0;
     pointer-events: none;
 }

 .logo-drop {
     display: block;
     position: absolute;
     top: -100px;
     width: 350px;
     opacity: 0;
     animation: drop 12s linear infinite;
     font-weight: bold;
     font-size: 2rem;
     color: #000;
 }

 .ld-smaller {
     font-size: 1.3rem;
 }

 @keyframes drop {
     0% {
         transform: translateY(50vh) scale(0.8);
         opacity: 0.1;
     }

     50% {
         opacity: 0.5;
     }

     100% {
         transform: translateY(-20vh) scale(1);
         opacity: 0;
     }
 }

 .active {
     font-weight: 800;
 }

 .no-line:hover {
     text-decoration: underline;
 }

 .btn-cta.no-line:hover {
     text-decoration: none;
 }


 .clients-container img {
     max-height: 120px;
     object-fit: contain;
 }