* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', sans-serif;
     ;
     background: #f5f5f5;
     overflow-x: hidden;
 }

 .container-box {
     width: 100%;
     max-width: 1500px;
     margin: auto;
     padding-left: 20px;
     padding-right: 20px;
 }

 .hero-overlay {
     background: linear-gradient(to right,
             rgba(0, 0, 0, 0.85),
             rgba(0, 0, 0, 0.55));
 }

 .main-btn {
     background: #f6a400;
     color: #000;
     transition: 0.3s;
 }

 .main-btn:hover {
     background: #ffb61e;
 }

 .dark-btn {
     background: #08142f;
     transition: 0.3s;
 }

 .dark-btn:hover {
     background: #0f214b;
 }

 .service-card:hover,
 .blog-card:hover,
 .feature-card:hover {
     transform: translateY(-5px);
 }

 .service-card,
 .blog-card,
 .feature-card {
     transition: 0.3s;
 }

 @media (max-width: 768px) {
     section {
         padding-left: 15px;
         padding-right: 15px;
     }
 }








 @keyframes floatImage {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-15px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 .hero-animation {
     animation: floatImage 6s ease-in-out infinite;
 }

 @keyframes popupZoom {

     0% {
         opacity: 0;
         transform: scale(0.9);
     }

     100% {
         opacity: 1;
         transform: scale(1);
     }

 }

 .animate-popup {
     animation: popupZoom 0.3s ease;
 }


 @keyframes popupZoom {

     0% {
         opacity: 0;
         transform: scale(0.92);
     }

     100% {
         opacity: 1;
         transform: scale(1);
     }

 }

 .animate-popup {
     animation: popupZoom .3s ease;
 }