/* Base styles */
   :root {
       --primary: #306998;
       --secondary: #FFD43B;
       --dark: #4B8BBE;
       --light: #f5f5f5;
       --accent: #FFE873;
   }


   .container {
       width: 100%;
       max-width: 1366px;
       margin: 0 auto;
       padding: 0;
   }


   /* Hero section */
   .hero {
       /* background-color: #f0f5f0; */
       /* min-height: 80vh; */
       display: flex;
       justify-content: center;
       align-items: center;
       /* padding: 2rem; */
       text-align: center;
       margin-top: 50px;
   }



   .hero-title {
       font-size: 2.5rem;
       color: #333;
       margin-bottom: 1rem;
   }

   .hero-subtitle {
       font-size: 1.2rem;
       color: #666;
       line-height: 1.6;
       margin-bottom: 2rem;
   }

   .hero-buttons {
       display: flex;
       justify-content: center;
       gap: 1rem;
   }

   .btn {
       padding: 0.8rem 1.5rem;
       border-radius: 25px;
       font-size: 1rem;
       cursor: pointer;
       transition: all 0.3s ease;
       text-decoration: none;
       font-weight: 500;
   }

   .btn-primary {
       background-color: #4CAF50;
       color: white;
       border: none;
   }

   .btn-primary:hover {
       background-color: #3e8e41;
   }

   .btn-secondary {
       background-color: transparent;
       color: #4CAF50;
       border: 1px solid #4CAF50;
   }

   .btn-secondary:hover {
       background-color: rgba(76, 175, 80, 0.1);
   }

   /* Slider */

   .hero-slider {
       background-color: #ecf4e9;
   }

   .hero-content {
       margin-top: 150px;
       margin-bottom: 70px;
   }

   .slider-container {
       position: relative;
       width: 100%;
       max-width: 1366px;
       margin: 0 auto;
       overflow: hidden;
       margin-bottom: 50px;
   }

   .slider-wrapper {
       position: relative;
       width: 100%;
       height: 0;
       margin: 0px 0px 0px 0px;
       padding-bottom: 56.25%;
       border-radius: 10px;
       /* 16:9 aspect ratio */
   }

   .slider {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       display: flex;
       transition: transform 0.5s ease-in-out;
   }

   .slide {
       min-width: 100%;
       position: relative;

   }



   .slide img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 10px;
   }

   .slider-nav {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 50px;
       height: 50px;
       background-color: rgba(255, 255, 255, 0.5);
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
       z-index: 100;
       transition: background-color 0.3s;
   }

   .slider-nav:hover {
       background-color: rgba(255, 255, 255, 0.8);
   }

   .slider-nav.prev {
       left: 20px;
   }

   .slider-nav.next {
       right: 20px;
   }

   .slider-nav svg {
       width: 24px;
       height: 24px;
   }