:where([class^="ri-"])::before {
     content: "\f3c2";
 }

 body {
     font-family: 'Inter', sans-serif;
 }

 html {
     scroll-behavior: smooth;
 }

 .hero-bg {
     background-image: url('https://readdy.ai/api/search-image?query=Professional%20business%20transformation%20concept%20with%20modern%20office%20setting%2C%20strategic%20planning%20elements%2C%20growth%20charts%2C%20leadership%20symbols%2C%20clean%20corporate%20environment%2C%20success%20metrics%20visualization%2C%20contemporary%20consulting%20workspace&width=1920&height=1080&seq=hero001&orientation=landscape');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }

 .card-3d {
     transform: perspective(1000px) rotateX(0deg);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card-3d:hover {
     transform: perspective(1000px) rotateX(5deg) translateY(-10px);
     box-shadow: 0 20px 40px rgba(43, 44, 79, 0.15);
 }

 .floating-element {
     animation: float 6s ease-in-out infinite;
 }

 @keyframes float {
     0%, 100% {
         transform: translateY(0px);
     }

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

 .gradient-text {
     background: linear-gradient(135deg, #2b2c4f 0%, #4338ca 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .glass-effect {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .shadow-3d {
     box-shadow: 0 8px 32px rgba(43, 44, 79, 0.12), 0 2px 8px rgba(43, 44, 79, 0.08);
 }

 .button-3d {
     transform: translateY(0);
     transition: all 0.2s ease;
     box-shadow: 0 4px 15px rgba(43, 44, 79, 0.2);
 }

 .button-3d:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(43, 44, 79, 0.3);
 }

 .section-divider {
     position: relative;
 }

 .section-divider::before {
     content: '';
     position: absolute;
     top: -50px;
     left: 0;
     right: 0;
     height: 100px;
     background: linear-gradient(45deg, transparent 49%, rgba(43, 44, 79, 0.05) 50%, transparent 51%);
 }



 .flip-card {
     background: transparent;
     width: 100%;
     height: 220px;
     perspective: 1000px;
 }

 .flip-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 0.6s;
     transform-style: preserve-3d;
 }

 .flip-card:hover .flip-card-inner {
     transform: rotateY(180deg);
 }

 .flip-card-front,
 .flip-card-back {

     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 12px;
     display: flex;
     justify-content: center;
     align-items: center;

     backface-visibility: hidden;
     padding: 20px;
 }

 .flip-card-front {
     color: white;
 }

 .flip-card-back {
     background: white;
     color: #333;
     transform: rotateY(180deg);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
     text-align: center;
 }




 .service-flip-card {
     perspective: 1000px;
     height: 260px;
 }

 .service-flip-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 0.7s;
     transform-style: preserve-3d;
 }

 .service-flip-card:hover .service-flip-inner {
     transform: rotateY(180deg);
 }

 .service-flip-front,
 .service-flip-back {

     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 16px;
     backface-visibility: hidden;

     display: flex;
     flex-direction: column;
     justify-content: center;

     padding: 28px;
 }

 .service-flip-front {
     background: white;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
 }

 .service-flip-back {

     background: linear-gradient(135deg, #0f766e, #1d4ed8);
     color: white;
     transform: rotateY(180deg);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
 }




 .tool-card {

     height: 260px;
     border-radius: 18px;

     background: white;

     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

     transition: all 0.35s ease;

     position: relative;

     overflow: hidden;

 }


 /* Hover lift */
 .tool-card:hover {

     transform: translateY(-10px);

     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

 }


 /* inner */
 .tool-card-inner {

     padding: 30px;

     height: 100%;

     display: flex;

     flex-direction: column;

     align-items: center;

     justify-content: center;

     text-align: center;

 }


 /* icon */
 .tool-icon {

     width: 70px;
     height: 70px;

     display: flex;
     align-items: center;
     justify-content: center;

     border-radius: 16px;

     margin-bottom: 16px;

     transition: all 0.3s ease;

 }


 /* icon hover */
 .tool-card:hover .tool-icon {

     transform: scale(1.1);

 }


 /* title */
 .tool-title {

     font-size: 18px;
     font-weight: 600;

     margin-bottom: 16px;

     color: #1e293b;

 }


 /* tags container */
 .tool-tags {

     display: flex;
     flex-wrap: wrap;

     gap: 6px;

     justify-content: center;

     opacity: 0;

     transform: translateY(10px);

     transition: all 0.35s ease;

 }


 /* show tags on hover */
 .tool-card:hover .tool-tags {

     opacity: 1;

     transform: translateY(0);

 }


 /* tags */
 .tool-tags span {

     background: #eef2ff;

     color: #4338ca;

     padding: 4px 10px;

     font-size: 12px;

     border-radius: 999px;

 }





 .award-card {

     background: white;

     border-radius: 18px;

     padding: 30px 20px;

     text-align: center;

     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

     transition: all 0.4s ease;

     cursor: pointer;

     position: relative;

     overflow: hidden;

     min-height: 200px;

 }


 /* hover lift */
 .award-card:hover {

     transform: translateY(-12px);

     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.18);

 }


 /* icon */
 .award-icon {

     width: 70px;
     height: 70px;

     margin: 0 auto 15px;

     display: flex;
     align-items: center;
     justify-content: center;

     border-radius: 50%;

     background: linear-gradient(135deg, #f59e0b, #fbbf24);

     color: white;

     font-size: 30px;

     transition: all 0.4s ease;

 }


 /* icon hover */
 .award-card:hover .award-icon {

     transform: scale(1.2) rotate(8deg);

 }


 /* title */
 .award-title {

     font-size: 16px;

     font-weight: 600;

     color: #1e293b;

     margin-bottom: 6px;

 }


 /* year */
 .award-year {

     color: #64748b;

     font-size: 14px;

     margin-bottom: 10px;

 }


 /* hidden details */
 .award-details {

     opacity: 0;

     max-height: 0;

     overflow: hidden;

     transition: all 0.4s ease;

     color: #475569;

     font-size: 14px;

 }


 /* show details on hover */
 .award-card:hover .award-details {

     opacity: 1;

     max-height: 100px;

     margin-top: 10px;

 }


 /* responsive */
 @media(max-width:768px) {

     .award-card {

         min-height: 180px;

     }

 }




 /* CARD CONTAINER */
 .project-card {

     perspective: 1200px;
     height: 380px;
 }


 /* INNER */
 .project-inner {

     position: relative;
     width: 100%;
     height: 100%;

     transition: transform 0.8s ease;

     transform-style: preserve-3d;
 }


 /* FLIP */
 .project-card:hover .project-inner {

     transform: rotateY(180deg);
 }


 /* FRONT + BACK */
 .project-front,
 .project-back {

     position: absolute;

     width: 100%;
     height: 100%;

     padding: 25px;

     border-radius: 16px;

     backface-visibility: hidden;

     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

 }


 /* FRONT */
 .project-front {

     background: white;

     display: flex;
     align-items: center;
     justify-content: center;

     text-align: center;
 }


 /* BACK */
 .project-back {

     background: linear-gradient(135deg, #1e3a8a, #0f766e);

     color: white;

     transform: rotateY(180deg);

     overflow-y: auto;

     font-size: 14px;
 }


 /* hover glow */
 .project-card:hover .project-front {

     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
 }


 /* responsive */
 @media(max-width:768px) {

     .project-card {

         height: auto;
     }

     .project-inner {

         transform: none !important;
     }

     .project-front,
     .project-back {

         position: relative;
         transform: none;
     }

     .project-back {

         margin-top: 10px;
     }

 }





 /* FOOTER MAIN */
 .footer-modern {

     background: linear-gradient(180deg, #0f172a, #020617);

     color: #94a3b8;

     padding: 50px 20px 25px;

     border-top: 3px solid transparent;

     border-image: linear-gradient(90deg, #6366f1, #14b8a6) 1;

 }


 /* CONTAINER */
 .footer-container {

     max-width: 1200px;

     margin: auto;

     display: flex;

     flex-wrap: wrap;

     justify-content: space-between;

     align-items: center;

     gap: 20px;

 }


 /* LOGO / NAME */
 .footer-brand {

     font-size: 20px;

     font-weight: 600;

     color: white;

 }


 /* LINKS */
 .footer-links {

     display: flex;

     gap: 20px;

     flex-wrap: wrap;

 }

 .footer-links a {

     text-decoration: none;

     color: #94a3b8;

     font-size: 14px;

     transition: 0.3s;

 }

 .footer-links a:hover {

     color: #14b8a6;

 }


 /* SOCIAL ICONS */
 .footer-social {

     display: flex;

     gap: 15px;

 }

 .footer-social a {

     width: 40px;
     height: 40px;

     display: flex;
     align-items: center;
     justify-content: center;

     border-radius: 50%;

     background: #0f172a;

     color: #94a3b8;

     font-size: 18px;

     transition: 0.3s;

     border: 1px solid #1e293b;

 }


 /* SOCIAL HOVER */
 .footer-social a:hover {

     color: white;

     background: linear-gradient(135deg, #6366f1, #14b8a6);

     transform: translateY(-3px);

     box-shadow: 0 10px 20px rgba(20, 184, 166, 0.3);

 }


 /* COPYRIGHT */
 .footer-bottom {

     text-align: center;

     margin-top: 25px;

     padding-top: 15px;

     border-top: 1px solid #1e293b;

     font-size: 14px;

 }


 /* RESPONSIVE */
 @media(max-width:768px) {

     .footer-container {

         flex-direction: column;

         text-align: center;

     }

     .footer-links {

         justify-content: center;

     }

     .footer-social {

         justify-content: center;

     }

 }




 /* CARD BASE */
 .cert-card {

     background: white;

     border-radius: 18px;

     padding: 25px;

     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

     transition: all 0.35s ease;

     position: relative;

     overflow: hidden;

 }


 /* HOVER EFFECT */
 .cert-card:hover {

     transform: translateY(-8px);

     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.18);

 }


 /* GRADIENT BORDER EFFECT */
 .cert-card::before {

     content: "";

     position: absolute;

     top: 0;
     left: 0;

     width: 100%;
     height: 4px;

     background: linear-gradient(90deg, #6366f1, #14b8a6);

 }


 /* ICON */
 .cert-icon {

     width: 55px;
     height: 55px;

     display: flex;

     align-items: center;
     justify-content: center;

     border-radius: 12px;

     margin-bottom: 15px;

     font-size: 24px;

     color: white;

     background: linear-gradient(135deg, #6366f1, #14b8a6);

 }


 /* TAG */
 .cert-tag {

     background: #f1f5f9;

     color: #334155;

     padding: 6px 12px;

     border-radius: 999px;

     font-size: 13px;

     transition: 0.3s;

 }


 /* TAG HOVER */
 .cert-tag:hover {

     background: linear-gradient(135deg, #6366f1, #14b8a6);

     color: white;

 }


 /* RESPONSIVE */
 @media(max-width:768px) {

     .cert-card {

         padding: 20px;

     }

 }





 /* NAVBAR BASE */
 .navbar {

     position: fixed;
     top: 0;
     left: 0;
     right: 0;

     z-index: 1000;

     background: rgba(255, 255, 255, 0.7);

     backdrop-filter: blur(12px);

     border-bottom: 1px solid rgba(0, 0, 0, 0.05);

     transition: all 0.3s ease;

 }


 /* SCROLL EFFECT */
 .navbar.scrolled {

     background: rgba(255, 255, 255, 0.95);

     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

 }


 /* NAV CONTAINER */
 .nav-container {

     max-width: 1200px;

     margin: auto;

     padding: 14px 24px;

     display: flex;

     align-items: center;

     justify-content: space-between;

 }


 /* LOGO */
 .nav-logo {

     font-size: 22px;

     font-weight: 700;

     background: linear-gradient(135deg, #4f46e5, #14b8a6);

     -webkit-background-clip: text;

     color: transparent;

 }


 /* LINKS */
 .nav-links {

     display: flex;

     gap: 28px;

     align-items: center;

 }


 /* LINK STYLE */
 .nav-link {

     position: relative;

     color: #475569;

     font-weight: 500;

     text-decoration: none;

     transition: 0.3s;

 }


 /* HOVER COLOR */
 .nav-link:hover {

     color: #4f46e5;

 }


 /* UNDERLINE EFFECT */
 .nav-link::after {

     content: "";

     position: absolute;

     bottom: -6px;

     left: 0;

     width: 0%;

     height: 2px;

     background: linear-gradient(135deg, #4f46e5, #14b8a6);

     transition: 0.3s;

 }

 .nav-link:hover::after {

     width: 100%;

 }


 /* CTA BUTTON */
 .nav-cta {

     background: linear-gradient(135deg, #4f46e5, #14b8a6);

     color: white;

     padding: 8px 16px;

     border-radius: 8px;

     text-decoration: none;

     font-size: 14px;

     transition: 0.3s;

 }

 .nav-cta:hover {

     transform: translateY(-2px);

     box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);

 }


 /* MOBILE BUTTON */
 .mobile-btn {

     display: none;

     font-size: 26px;

     cursor: pointer;

 }


 /* MOBILE MENU */
 .mobile-menu {

     display: none;

     background: white;

     padding: 20px;

     border-top: 1px solid #eee;

 }

 .mobile-menu a {

     display: block;

     margin: 12px 0;

     color: #475569;

     text-decoration: none;

 }


 /* MOBILE RESPONSIVE */
 @media(max-width:768px) {

     .nav-links {

         display: none;

     }

     .mobile-btn {

         display: block;

     }

     .mobile-menu.active {

         display: block;

     }

 }




 /* CONTACT SECTION */
 .contact-section {

     background: linear-gradient(180deg, #f8fafc, #eef2ff);

 }


 /* CONTACT CARD */
 .contact-card {

     background: rgba(255, 255, 255, 0.8);

     backdrop-filter: blur(10px);

     border-radius: 20px;

     padding: 30px;

     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);

     transition: 0.3s;

 }

 .contact-card:hover {

     transform: translateY(-5px);

     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);

 }


 /* ICON BOX */
 .contact-icon {

     width: 45px;
     height: 45px;

     display: flex;
     align-items: center;
     justify-content: center;

     border-radius: 12px;

     background: linear-gradient(135deg, #6366f1, #14b8a6);

     color: white;

     margin-right: 12px;

 }


 /* SOCIAL ICON */
 .social-icon {

     width: 42px;
     height: 42px;

     display: flex;
     align-items: center;
     justify-content: center;

     border-radius: 10px;

     color: white;

     transition: 0.3s;

 }

 .social-icon:hover {

     transform: translateY(-3px) scale(1.1);

     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

 }


 /* INPUT */
 .contact-input {

     width: 100%;

     padding: 12px 15px;

     border-radius: 10px;

     border: 1px solid #cbd5e1;

     outline: none;

     transition: 0.3s;

 }

 .contact-input:focus {

     border-color: #6366f1;

     box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);

 }


 /* BUTTON */
 .contact-btn {

     width: 100%;

     padding: 14px;

     border-radius: 10px;

     background: linear-gradient(135deg, #6366f1, #14b8a6);

     color: white;

     font-weight: 600;

     border: none;

     transition: 0.3s;

 }

 .contact-btn:hover {

     transform: translateY(-2px);

     box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);

 }


 /* RESPONSIVE */
 @media(max-width:768px) {

     .contact-grid {

         grid-template-columns: 1fr;

     }

 }




 /* MODAL BACKGROUND */
 .consult-modal {

     display: none;

     position: fixed;

     top: 0;
     left: 0;

     width: 100%;
     height: 100%;

     background: rgba(0, 0, 0, 0.5);

     backdrop-filter: blur(6px);

     justify-content: center;
     align-items: center;

     z-index: 9999;

     animation: fadeIn 0.3s ease;

 }


 /* MODAL BOX */
 .consult-modal-content {

     background: white;

     padding: 30px;

     border-radius: 16px;

     width: 90%;
     max-width: 450px;

     position: relative;

     animation: slideUp 0.4s ease;

 }


 /* CLOSE */
 .consult-close {

     position: absolute;

     right: 15px;
     top: 15px;

     font-size: 24px;

     cursor: pointer;

 }


 /* TITLE */
 .consult-title {

     font-size: 22px;

     font-weight: 600;

     margin-bottom: 10px;

 }


 /* SUBTITLE */
 .consult-subtitle {

     color: #64748b;

     margin-bottom: 20px;

     font-size: 14px;

 }


 /* FORM */
 .consult-form {

     display: flex;

     flex-direction: column;

     gap: 12px;

 }


 /* INPUT */
 .consult-form input,
 .consult-form select,
 .consult-form textarea {

     padding: 12px;

     border-radius: 8px;

     border: 1px solid #cbd5e1;

     outline: none;

 }


 /* BUTTON */
 .consult-form button {

     background: linear-gradient(135deg, #4f46e5, #14b8a6);

     color: white;

     padding: 12px;

     border-radius: 8px;

     border: none;

     cursor: pointer;

     font-weight: 600;

 }


 /* ANIMATION */
 @keyframes fadeIn {

     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }

 }

 @keyframes slideUp {

     from {

         transform: translateY(50px);
         opacity: 0;

     }

     to {

         transform: translateY(0);
         opacity: 1;

     }

 }