/* ---------- Global ---------- */
 :root {
   --accent: #e43c5c;
   --darkblue: #0A3152;
   --hero-blue-a: #0d3b66;
   --hero-blue-b: #3ba4e6;
   --bg: #f5f7fa;
   --accent-color: #e43c5c;
   --text-color: #0A3152;
   --dark-gray: #4B5563;
   --medium-gray: #9CA3AF;
   --light-gray: #F3F4F6;
   --radius: 12px;
   --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 html,
 body {
   height: 100%
 }

 body {
   font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
   background: var(--bg);
   color: var(--darkblue);
   margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 /* Header */
 header.fixed {
   backdrop-filter: blur(6px);
   background: rgba(255, 255, 255, 0.86);
 }

 /* Stars */
 .checked {
   color: gold;
 }

 /* Buttons */
 .ok {
   background-color: var(--accent);
   transition: padding 0.25s ease, box-shadow .2s ease, transform .15s ease;
 }

 .ok:hover {
   padding: 12px 26px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
   transform: translateY(-2px);
 }

 /* Features icons */
 .icon-box {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 84px;
   height: 84px;
   border-radius: 999px;
   background: linear-gradient(135deg, rgba(59, 164, 230, 0.08), rgba(13, 59, 102, 0.06));
   box-shadow: 0 6px 18px rgba(13, 59, 102, 0.04);
 }

 /* Palette cards */
 .card {
   background: #fff;
   border-radius: 14px;
   overflow: hidden;
   box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
 }

 .card:hover {
   transform: translateY(-6px);
   transition: transform .25s ease, box-shadow .25s ease;
   box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
 }

 .palette {
   display: flex;
   height: 86px;
 }

 .color {
   flex: 1;
   position: relative;
   transition: all .22s ease;
   cursor: pointer;
 }

 .color::after {
   content: "";
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity .18s ease;
 }

 .color:hover::after {
   opacity: 0.06;
   background: #000;
 }

 /* show hex on hover using data-hex */
 .color:hover::before {
   content: attr(data-hex);
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
   padding: 6px 9px;
   border-radius: 6px;
   font-size: 12px;
 }

 .card-title {
   font-weight: 700;
   color: var(--darkblue);
 }

 .card-subtitle {
   color: #667085;
   font-size: 0.92rem;
   margin-top: 6px;
 }

 /* small hex bullets list - keep simple */
 .hex-list li {
   font-size: 0.86rem;
   color: #374151;
 }

 /* Toast */
 .toast {
   position: fixed;
   right: 22px;
   bottom: 26px;
   background: var(--darkblue);
   color: white;
   padding: 10px 14px;
   border-radius: 8px;
   box-shadow: 0 8px 28px rgba(15, 40, 80, 0.2);
   z-index: 9999;
   font-weight: 600;
   transform: translateY(10px);
   opacity: 0;
   transition: opacity .22s ease, transform .22s ease;
 }

 .toast.show {
   opacity: 1;
   transform: translateY(0);
 }

 /* Responsive adjustments for hero background overlay */
 .hero-bg {
   background-position: center;
   background-size: cover;
   min-height: 460px;
 }

 /* small UI polish */
 .pill {
   background: rgba(255, 255, 255, 0.06);
   padding: 6px 10px;
   border-radius: 999px;
   color: #fff;
   font-weight: 600;
 }

 /* Utility small */
 .lead {
   color: #e6eef8;
   opacity: 0.95;
 }

 @media (max-width: 768px) {
   .features-wrapper {
     grid-template-columns: repeat(2, 1fr);
     gap: 28px;
   }

   .hero-bg {
     min-height: 520px;
     padding-bottom: 40px;
   }
 }


 /* Style for star ratings */
 .checked {
   color: gold;
 }

 /* Style for buttons */
 .ok {
   background-color: #d13a51;
   transition: padding 0.5s;
 }

 .ok:hover {

   padding: 15px 30px;

   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .bi-shield {
   color: #3c98e4ff;
 }

 .bi-people {
   color: #3c98e4ff;
 }

 .bi-clock {
   color: #3c98e4ff;
 }

 /* General Styles */

 .shield {
   font-size: 20px;
   font-weight: 600;
   line-height: 26px;

 }

 .icon-box {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background-color: #e0e7ff;
   /* Light blue background */
   margin-bottom: 15px;
   transition: transform 0.3s, box-shadow 0.3s;
 }

 .icon-box:hover {

   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .btn-color {
   background-color: #d13a51;
   color: white;
   padding: 10px 20px;
   transition: background-color 0.3s, box-shadow 0.3s;
 }

 .btn-color:hover {
   background-color: #d13a51;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   transform: translateY(-2px);
 }

 /* Additional Styles for the Color Palette Section */

 body {
   font-family: "Inter", sans-serif;
   background-color: #fff;
   margin: 0;
   margin-bottom: 3px;
   padding: 0px;
   color: #0A3152;
 }

 header {
   margin-top: -3px;
 }

 .containery {
   background: #f5f7fa;
 }

 .swatch {
   position: relative;
   overflow: hidden;
 }

 .swatch::after {
   content: attr(data-hex);
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-weight: 600;
   background: rgba(0, 0, 0, 0.55);
   opacity: 0;
   transform: scale(0.95);
   transition: opacity .18s ease, transform .18s ease;
   pointer-events: none;
   font-size: .95rem;
 }

 .swatch:hover::after {
   opacity: 1;
   transform: scale(1);
 }

 /* tooltip */
 .copy-toast {
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
   bottom: 28px;
   background: #103b75;
   color: #fff;
   padding: 8px 14px;
   border-radius: 999px;
   font-size: 0.95rem;
   box-shadow: 0 8px 20px rgba(16, 59, 117, 0.18);
   z-index: 60;
   opacity: 0;
   pointer-events: none;
   transition: opacity .18s ease;
 }

 .copy-toast.show {
   opacity: 1;
   pointer-events: auto;
 }



 .section-valeurs {
   margin: 0;
   font-family: "Poppins", sans-serif;
   background: linear-gradient(180deg, #0c3d6c 0%, #2b87c3 100%);
   color: white;
 }

 .section-valeurs {
   text-align: center;
   padding: 60px 20px;
 }

 .section-valeurs h2 {
   font-size: 2em;
   margin-bottom: 10px;
 }

 .section-valeurs p.subtitle {
   color: #d0e3f1;
   margin-bottom: 60px;
 }

 .valeurs-container {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 100px;
 }

 .valeur {

   padding: 20px;
   width: 220px;
   transition: 0.3s ease;
 }

 .tag {
   background: rgba(255, 255, 255, 0.05);
   border-radius: 12px;
   color: #ff8000;
   padding: 6px 10px;
   font-size: 0.75em;
   font-weight: 600;
   display: inline-block;
   margin-top: 10px;
   transition: 0.3s ease;



 }

 .valeur-icon {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 15px;
   font-size: 30px;
   transition: 0.3s ease;
 }

 .valeur h3 {
   margin: 10px 0;
   font-size: 1.1em;
   font-weight: bold;
 }

 .valeur p {
   font-size: 0.9em;
   color: #d8e7f5;
   margin-bottom: 10px;
 }

 .valeur .tag {
   color: #ff8000;
   font-weight: bold;
   font-size: 0.85em;
   transition: 0.3s ease;
 }

 /* Effet Hover */
 .valeur:hover .valeur-icon {
   padding: 15px;
   transform: scale(1.2);
   transition: 0.3s ease;
 }

 .h3-valeur {
   color: #ffffffff;
   transform: scale(1.1);
 }

 .valeur:hover .h3-valeur {
   color: #ff8000;
 }

 /* Bloc d'appel à l'action */
 .cta {
   margin: 60px auto 0;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   padding: 30px;
   width: 80%;
   max-width: 700px;
 }

 .cta h3 {
   margin-bottom: 10px;
 }

 .cta p {
   color: #cde1ef;
   margin-bottom: 20px;
 }

 .cta button {
   background-color: #d13a51;
   color: white;
   border: none;
   padding: 12px 25px;
   border-radius: 25px;
   cursor: pointer;
   font-size: 1em;
   transition: 0.3s ease;
 }

 .cta button:hover {
   background-color: #d13a51;
   box-shadow: 0 4px 12px rgba(209, 58, 81, 0.4);
   transform: translateY(-2px);
   border: solid 2px #fff;
   outline: none;
 }

 /* Responsive */
 .process-section {
   text-align: center;

   padding: 60px 20px;
   background-color: #f8fafc;
   font-family: "Poppins", sans-serif;
 }

 .process-section h2 {
   color: #1e3a8a;
   font-size: 2em;
   margin-bottom: 10px;
 }

 .process-subtitle {
   color: #6b7280;
   margin-bottom: 60px;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
 }

 /* === Container === */
 .process-container {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   flex-wrap: nowrap;
   position: relative;
   gap: 10px;

 }

 /* Connectors */
 .connector {
   width: 60px;
   height: 3px;
   background: linear-gradient(to right, #f97316 50%, transparent 50%);
   align-self: center;
   margin-top: 130px;
 }

 /* === Cards === */
 .process-card {
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
   width: 320px;
   padding: 35px 20px 25px;
   position: relative;
   transition: 0.3s ease;
 }

 .process-card:hover {
   transform: translateY(-4px);
 }

 /* Step number */
 .process-number {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   color: #fff;
   font-weight: bold;
   font-size: 1.1em;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 10px;
 }

 /* Colors */
 .red {
   background: #e84c61;
 }

 .orange {
   background: #f59e0b;
 }

 .blue {
   background: #3b82f6;
 }

 .dark-blue {
   background: #0f4473;
 }

 /* Icons */
 .process-icon {
   font-size: 26px;
   margin-bottom: 10px;
 }

 /* Headings */
 .process-card h3 {
   color: #1e3a8a;
   font-size: 1.1em;
   font-weight: 600;
   margin-bottom: 10px;
 }

 /* Paragraph */
 .process-card p {
   color: #6b7280;
   font-size: 0.9em;
   line-height: 1.5em;
   margin-bottom: 20px;
 }

 /* Badges */
 .process-badge {
   display: inline-block;
   font-size: 0.8em;
   font-weight: 600;
   border-radius: 9999px;
   padding: 4px 12px;
 }

 .pink {
   background: #fee2e2;
   color: #e84c61;
 }

 .yellow {
   background: #fef3c7;
   color: #b45309;
 }

 .light-blue {
   background: #dbeafe;
   color: #2563eb;
 }

 .gray {
   background: #e5e7eb;
   color: #1e293b;
 }

 /* Responsive */
 @media (max-width: 1000px) {
   .process-container {
     flex-wrap: wrap;
     gap: 25px;
   }

   .connector {
     display: none;
   }

   .process-card {
     width: 250px;
   }
 }

 /* siledeck comparison slider styles */



 .containerr {
   width: 100%;
   max-width: 900px;
   margin: 60px auto;
   padding: 30px;
   background: white;
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   overflow: hidden;
 }

 .headerr {
   text-align: center;
   margin-bottom: 30px;
 }

 h1 {
   font-size: 28px;
   font-weight: 600;
   margin-bottom: 8px;
 }

 .subtitle {
   font-size: 16px;
   opacity: 0.85;
 }

 .carousell {
   position: relative;
   overflow: hidden;
 }

 .slidess {
   display: flex;
   transition: transform 0.5s ease;
 }

 .cardss {
   min-width: 100%;
   padding: 20px;
   display: none;
 }

 .cardss.active {
   display: block;
 }

 .comparison-containerr {
   position: relative;
   height: 450px;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow);
 }

 .image-before,
 .image-after {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .image-after {
   width: 50%;
   border-right: 3px solid white;
 }

 .slider {
   position: absolute;
   top: 0;
   left: 50%;
   width: 4px;
   height: 100%;
   background: white;
   cursor: col-resize;
   z-index: 10;
   transform: translateX(-50%);
 }

 .slider-handlered {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 44px;
   height: 44px;
   background: var(--accent-color);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
   cursor: grab;
   transition: transform 0.1s;
 }

 .slider-handlered:active {
   cursor: grabbing;
   transform: translate(-50%, -50%) scale(0.95);
 }

 .slider-handlered::before,
 .slider-handlered::after {
   content: "";
   position: absolute;
   width: 2px;
   height: 16px;
   background: white;
 }

 .slider-handlered::before {
   transform: translateX(-5px);
 }

 .slider-handlered::after {
   transform: translateX(5px);
 }

 .labels {
   position: absolute;
   top: 20px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   padding: 0 20px;
   color: white;
   font-weight: bold;
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
   z-index: 5;
 }

 .label {
   background: rgba(0, 0, 0, 0.6);
   padding: 6px 12px;
   border-radius: 4px;
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .cardss-info {
   padding: 20px 0;
 }

 .cardss-info h3 {
   color: var(--text-color);
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 6px;
 }

 .cardss-info span {
   font-size: 14px;
   color: var(--accent-color);
   font-weight: 600;
 }

 .cardss-info p {
   font-size: 15px;
   color: var(--dark-gray);
   margin-top: 10px;
   line-height: 1.6;
 }

 .navigation-containerr {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 20px 20px;
 }

 .nav-dots {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   flex-grow: 1;
 }

 .dot {
   width: 12px;
   height: 12px;
   background: var(--medium-gray);
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .dot.active {
   background: var(--accent-color);
   transform: scale(1.2);
 }

 .nav-btnred {
   background: white;
   border: none;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   cursor: pointer;
   box-shadow: var(--shadow);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: bold;
   transition: all 0.3s ease;
   z-index: 20;
 }

 .nav-btnred:hover {
   background: var(--accent-color);
   color: white;
 }

 @media (max-width: 768px) {
   .containerr {
     margin: 30px auto;
     padding: 20px;
   }

   .comparison-containerr {
     height: 350px;
   }

   .navigation-containerr {
     padding: 0 10px 20px;
   }

   .nav-btnred {
     width: 36px;
     height: 36px;
     font-size: 16px;
   }
 }




 /* Additional Styles for the Card Component */
 .cta-section {
   background-color: #ffffff;
   border-radius: 25px;
   padding: 50px 40px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   max-width: 1100px;
   margin: 60px auto;
   margin-top: 80px;
   margin-bottom: 60px;
   text-align: center;
   border-radius: 12px;





 }

 .cta-section h1 {
   color: #0f3c5f;
   font-size: 26px;
   font-weight: 700;
   margin-bottom: 12px;
 }

 .cta-section p {
   color: #4b5563;
   font-size: 16px;
   margin-bottom: 30px;
 }

 .cta-buttons {
   display: flex;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
 }

 .btn-primary {
   background-color: #e63946;
   color: white;
   padding: 14px 30px;
   border-radius: 50px;
   border: none;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s;
 }

 .btn-primary:hover {
   background-color: #d62839;
   transform: scale(1.05);
 }

 .btn-outline {
   background-color: transparent;
   color: #0f3c5f;
   padding: 14px 30px;
   border-radius: 50px;
   border: 2px solid #0f3c5f;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s;
 }

 .btn-outline:hover {
   background-color: #0f3c5f;
   color: white;
   transform: scale(1.05);
 }

 @media (max-width: 600px) {
   .cta-section {
     padding: 30px 20px;
   }

   .cta-section h1 {
     font-size: 22px;
   }

   .cta-buttons {
     flex-direction: column;
     gap: 15px;
   }

   .btn-primary,
   .btn-outline {
     width: 100%;
     padding: 12px 0;
   }
 }





 /*Prêt à donner vie à votre projet   Contact Footer Styles */

 body {
   margin: 0;
   font-family: 'Poppins', sans-serif;
   background-color: #fff;
 }

 .contact-footer {
   background: linear-gradient(90deg, #e9446a, #f38b1f);
   color: white;
   padding: 60px 20px;
   font-family: "Poppins", sans-serif;
 }

 /* Container */
 .container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-start;
   gap: 30px;
   max-width: 1200px;
   margin: auto;
 }

 /* Left side */
 .footer-left {
   flex: 1 1 350px;
 }

 .footer-left h2 {
   font-size: 2rem;
   margin-bottom: 10px;
 }

 .footer-left p {
   font-size: 1rem;
   margin-bottom: 20px;
   line-height: 1.6;
 }

 /* Button */
 .btn {
   background: white;
   color: #d3304a;
   border: none;
   padding: 12px 25px;
   border-radius: 25px;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.3s;
 }

 .btn:hover {
   background: #ffe2e7;
 }

 /* Right side */
 .footer-right {
   flex: 1 1 350px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
 }

 .info-item {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   text-align: left;
 }

 .info-item i {
   font-size: 1.5rem;
   color: white;
   background-color: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   padding: 10px;
   flex-shrink: 0;
 }

 .info-item h4 {
   margin: 0;
   font-size: 1.1rem;
 }

 .info-item p {
   margin: 3px 0 0;
   font-size: 0.95rem;
 }

 /* Divider */
 hr {
   border: 0;
   height: 1px;
   background-color: rgba(255, 255, 255, 0.4);
   margin: 40px 0;
 }

 /* Footer bottom */
 .footer-bottom {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   text-align: center;
   max-width: 1000px;
   margin: auto;
   gap: 20px;
 }

 .bottom-item h3 {
   font-size: 1.5rem;
   margin: 0;
 }

 .bottom-item p {
   margin: 5px 0 0;
   font-size: 0.9rem;
 }

 /* ====== Responsive ====== */

 /* Tablets */
 @media (max-width: 900px) {
   .footer-right {
     grid-template-columns: 1fr;
   }
 }

 /* Small tablets / large phones */
 @media (max-width: 700px) {
   .container {
     flex-direction: column;
     text-align: center;
   }

   .footer-left,
   .footer-right {
     flex: 1 1 100%;
   }

   .info-item {
     justify-content: center;
   }
 }

 /* Mobile small */
 @media (max-width: 480px) {
   .footer-left h2 {
     font-size: 1.5rem;
     line-height: 1.4;
   }

   .footer-left p {
     font-size: 0.85rem;
     line-height: 1.4;
   }

   .btn {
     padding: 8px 18px;
     font-size: 0.85rem;
   }

   .footer-right {
     grid-template-columns: 1fr;
     gap: 15px;
   }

   .info-item {
     flex-direction: row;
     justify-content: flex-start;
     gap: 10px;
   }

   .info-item i {
     font-size: 1.3rem;
     padding: 8px;
   }

   .info-item h4 {
     font-size: 0.95rem;
   }

   .info-item p {
     font-size: 0.8rem;
   }

   .footer-bottom {
     flex-direction: column;
     gap: 10px;
     font-size: 0.8rem;
   }

   .bottom-item h3 {
     font-size: 1.2rem;
   }

   .bottom-item p {
     font-size: 0.75rem;
   }
 }





 /*client*/

 .client {
   font-family: 'Poppins', sans-serif;
   background-color: #f9fafc;
   margin: 0;
   padding: 0;
 }

 .tm-section {
   text-align: center;
   padding: 60px 20px;
   max-width: 1000px;
   margin: auto;
 }

 .tm-section h2 {
   font-size: 26px;
   color: #002d5b;
   font-weight: 700;
   margin-bottom: 10px;
 }

 .tm-section .tm-subtitle {
   color: #666;
   font-size: 14px;
   margin-bottom: 40px;
 }

 .tm-slider {
   position: relative;
   overflow: hidden;
 }

 .tm-card {
   display: none;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
   padding: 40px 30px;
   transition: all 0.5s ease;
   max-width: 700px;
   margin: auto;
 }

 .tm-card.tm-active {
   display: block;
   animation: fadeIn 0.7s ease;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .tm-stars {
   color: #ffb400;
   font-size: 18px;
   margin-bottom: 15px;
 }

 .tm-quote {
   font-size: 15px;
   color: #333;
   line-height: 1.7;
   font-style: italic;
   margin-bottom: 25px;
   position: relative;
 }

 .tm-quote::before {
   content: "“";
   font-size: 40px;
   color: #f0a500;
   position: absolute;
   left: -15px;
   top: -15px;
 }

 .tm-client {
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .tm-initials {
   background: #ff6b35;
   color: #fff;
   font-weight: bold;
   border-radius: 50%;
   width: 45px;
   height: 45px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   margin-bottom: 10px;
 }

 .tm-name {
   font-weight: 600;
   color: #002d5b;
 }

 .tm-city {
   font-size: 13px;
   color: #666;
 }

 .tm-project {
   font-size: 12px;
   color: #aaa;
   margin-top: 4px;
 }

 .tm-arrows {
   margin-top: 20px;
   display: flex;
   justify-content: center;
   gap: 180px;
 }

 .tm-arrow {
   background: #fff;
   border: 1px solid #ddd;
   color: #ff6b35;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: 0.3s;
 }

 .tm-arrow:hover {
   background: #ff6b35;
   color: #fff;
 }

 .tm-nav {
   margin-top: -16px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
 }

 .tm-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   border: none;
   background: #ccc;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .tm-dot.tm-active {
   background: #ff6b35;
   transform: scale(1.2);
 }

 .stats-section {
   display: flex;
   justify-content: space-evenly;
   gap: 40px;
   padding: 50px 0;
   margin-top: 40px;
 }

 .stat h3 {
   font-size: 28px;
   font-weight: bold;
   margin: 0;
 }

 .stat p {
   margin-top: 5px;

   font-size: 15px;
   color: #666;
 }








 /* footer styles */
 .footer-spacer {
   background-color: #f5f5f5;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
 }

 .img-logo {
   
 }

 /* ======= FOOTER BASE ======= */
 .footer {
   background: linear-gradient(135deg, #0e3a64 0%, #1a4d7a 100%);
   color: #b7bcb6;
   padding: 60px 40px 25px;
   position: relative;
   overflow: hidden;
   font-family: "Poppins", sans-serif;
   font-size: 16px;
 }

 /* ======= CONTAINER ======= */
 .footer-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 40px;
   max-width: 1200px;
   margin: 0 auto;
   position: relative;
   z-index: 1;
 }

 /* ======= COLUMNS ======= */
 .footer-column {
   display: flex;
   flex-direction: column;
 }

 .footer-logo {
   width: 70px;
   margin-top: 2px;
   margin-bottom: 20px;

 }

 .footer-logo {
   background-color: #e5e7eb;
   border-radius: 95px;

 }

 .footer-description {
   font-size: 0.95rem;
   text-align: justify;

   line-height: 1.6;
   margin-bottom: 20px;
   color: #e0e0e0;
 }

 /* Certifications */
 .footer-certifications {
   list-style: none;
   padding: 0;
   margin-top: 10px;
 }

 .footer-certifications li {
   display: flex;
   align-items: center;
   font-size: 0.9rem;
   margin-bottom: 8px;
   transition: transform 0.3s;
 }

 .footer-certifications li:hover {
   transform: translateX(5px);
 }

 .footer-certifications i {
   font-size: 6px;
   margin-right: 10px;
   color: #ff8c00;
 }

 /* Titles */
 .footer-column h4 {
   color: #ffb347;
   margin-bottom: 20px;
   font-size: 1.2rem;
   position: relative;
   padding-bottom: 10px;
 }

 .footer-column h4::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 40px;
   height: 2px;
   background-color: #ff8c00;
 }

 .footer-column h5 {
   color: #ffffff;
   margin: 20px 0 15px;
   font-size: 1.1rem;
 }

 /* Links */
 .footer-column ul {
   list-style: none;
   padding: 0;
 }

 .footer-column ul li {
   margin-bottom: 12px;
   font-size: 0.95rem;
   cursor: pointer;
   transition: all 0.3s;
   display: flex;
   align-items: flex-start;
 }

 .footer-column ul li:hover {
   color: #ffffff;
   transform: translateX(5px);
 }

 /* Contact */
 .contact-info li {
   line-height: 1.5;
 }

 .contact-info i {
   color: #3ba4e6;
   margin-right: 10px;
   width: 16px;
   text-align: center;
 }

 /* Social icons */
 .social-icons {
   display: flex;
   gap: 12px;
   margin-top: 10px;
 }

 .social-icons a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   background: rgba(255, 255, 255, 0.1);
   color: white;
   font-size: 1rem;
   border-radius: 50%;
   backdrop-filter: blur(4px);
   transition: all 0.4s ease;
 }

 .social-icons a:hover {
   background: rgba(255, 255, 255, 0.35);
   color: #fff;
   transform: translateY(-4px);
   box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.3);
 }

 /* Divider */
 hr {
   border: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
   margin: 40px auto 20px;
   max-width: 1200px;
 }

 /* ======= FOOTER BOTTOM ======= */
 .footer-bottom {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 15px;
   font-size: 0.85rem;
   color: #cdd5e0;
   padding: 0 10px;
 }

 .footer-bottom p {
   margin: 0;
   line-height: 1.5;
 }

 .footer-legal {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   align-items: center;
 }

 .footer-legal span {
   transition: color 0.3s;
   cursor: pointer;
   white-space: nowrap;
 }

 .footer-legal span:hover {
   color: #d4af37;
 }
 .footer-credit {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 20px;
   margin-bottom: 20px;
   font-size: 0.85rem;
   color: #cdd5e0;
   font-weight: 500;
   text-align: center;
   text-decoration: none;
   transition: color 0.3s;
   flex-wrap: wrap;
   gap: 15px;
   align-items: center;
 }
  .footer-credit a {
    color: #cdd5e0;
    text-decoration: none;
    transition: color 0.3s;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: color 0.3s;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: color 0.3s;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: color 0.3s;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
  }
  .footer-credit a:hover {
    color: #d4af37;

  }
  .footer-credit a {
    color: #cdd5e0;
    text-decoration: none;
    transition: color 0.3s;
    
  }
  .footer-credit a:hover {
    color: #d4af37;
     
  }


 /* ======= RESPONSIVE MEDIA QUERIES ======= */

 /* 🌐 Tablets */
 @media (max-width: 992px) {
   .footer {
     padding: 50px 25px 20px;
   }

   .footer-logo {
     width: 100px;
   }

   .footer-container {
     gap: 35px;
   }

   .footer-column h4 {
     font-size: 1.1rem;
   }

   .footer-description {
     font-size: 0.9rem;
   }
 }

 /* 📱 Mobiles */
 @media (max-width: 768px) {
   .footer {
     padding: 40px 20px 15px;
     text-align: center;
   }

   .footer-description {
     max-width: 768px
   }

   .footer-logo {
     width: 50px;
   }

   .footer-container {
     grid-template-columns: 1fr;
     gap: 30px;
   }

   .footer-column {
     align-items: center;
   }

   .footer-column h4::after {
     left: 50%;
     transform: translateX(-50%);
   }

   .social-icons {
     justify-content: center;
   }

   .footer-legal {
     flex-direction: column;
     gap: 8px;
   }
 }

 /* 📱 Small phones */
 @media (max-width: 480px) {
   .footer {
     padding: 30px 15px 10px;
   }

   .footer-description {
     max-width: 468px
   }

   .footer-logo {
    width: 50px;
  }
  .footer-container {
    gap: 25px;
  }
  .footer-logo {
    width: 100px;
  }
  .footer-column h4 {
    font-size: 1rem;
  }
  .footer-description {
    font-size: 0.85rem;
  }
  .footer-bottom {
    font-size: 0.75rem;
  }
  .social-icons a {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
}