/* Hero Section Override - IMPORTANT */
.hero {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   background-size: cover !important;
   background-position: center !important;
   height: 400px !important;
   position: relative !important;
}



.hero .container {
   width: 100% !important;
   max-width: 1200px !important;
   position: relative !important;
   z-index: 2 !important;
}

.hero-content {
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
   width: 100% !important;
   grid-template-columns: none !important;
   gap: 0 !important;
}

.hero-text {
   text-align: center !important;
   max-width: 800px !important;
}


.main-center-text .text-left {
   display: block !important;
   text-align: left !important;
   margin-bottom: 10px !important;
}

.main-center-text .text-right {
   display: block !important;
   text-align: right !important;
   margin-left: 50px !important;
}

/* Responsive - IMPORTANT */
@media (max-width: 768px) {
   .main-center-text {
       font-size: 28px !important;
   }
   
   .main-center-text .text-left,
   .main-center-text .text-right {
       text-align: center !important;
       margin-left: 0 !important;
   }
   
   .hero {
       height: 300px !important;
   }
}

@media (max-width: 480px) {
   .main-center-text {
       font-size: 24px !important;
   }
   
   .hero {
       height: 250px !important;
   }
}
.services-section {
 background: #f5f8fa;
 padding: 50px 0;
 text-align: center;
}

.section-description {
 font-size: 16px;
 margin-bottom: 35px;
 color: #2c5282;
 font-weight: 500;
}

.services-buttons {
 display: flex;
 justify-content: center;
 gap: 25px;
 flex-wrap: wrap;
}

.service-box {
 background: linear-gradient(135deg, #2c5282 0%, #3182ce 100%);
 color: white;
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 16px 24px;
 border-radius: 12px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 box-shadow: 0 4px 15px rgba(44, 82, 130, 0.2);
 border: none;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 min-width: 200px;
 justify-content: center;
}

.service-box:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 25px rgba(44, 82, 130, 0.3);
 background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
}

.service-icon {
 width: 24px;
 height: 24px;
 object-fit: contain;
 transition: all 0.3s ease;
 filter: brightness(0) invert(1); /* Makes icon white */
}

.service-box:hover .service-icon {
 transform: scale(1.1) rotate(5deg);
}

/* Active state */
.service-box:active {
 transform: translateY(-1px);
 box-shadow: 0 6px 20px rgba(44, 82, 130, 0.25);
}

/* Focus state for accessibility */
.service-box:focus {
 outline: 2px solid #f6ad55;
 outline-offset: 2px;
}

/* Responsive design */
@media (max-width: 768px) {
 .services-buttons {
   flex-direction: column;
   align-items: center;
   gap: 20px;
 }
 
 .service-box {
   min-width: 250px;
   padding: 18px 28px;
   font-size: 15px;
 }
 
 .service-icon {
   width: 26px;
   height: 26px;
 }
}

@media (max-width: 480px) {
 .service-box {
   min-width: 200px;
   padding: 16px 24px;
   font-size: 13px;
 }
 
 .service-icon {
   width: 22px;
   height: 22px;
 }
}

.service-box:nth-child(1) {
 background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.service-box:nth-child(1):hover {
 background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
 box-shadow: 0 8px 25px rgba(72, 187, 120, 0.3);
}

.service-box:nth-child(2) {
 background: linear-gradient(135deg, #2c5282 0%, #3182ce 100%);
}

.service-box:nth-child(2):hover {
 background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
 box-shadow: 0 8px 25px rgba(44, 82, 130, 0.3);
}

.service-box:nth-child(3) {
 background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
}

.service-box:nth-child(3):hover {
 background: linear-gradient(135deg, #ed8936 0%, #f6ad55 100%);
 box-shadow: 0 8px 25px rgba(246, 173, 85, 0.3);
}