@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Open Sans", sans-serif;
      transition: background 0.3s, color 0.3s;
    }



    body[data-theme="light"] {
      --heading-color: #1c2336;
      --paragraph-color: #333;
      --paragraph-color-grey: #666;
      --body-bg: #f2f3f4;
      --text-primary: #333;
      color: var(--text-primary);
    }

    body[data-theme="dark"] {
      --heading-color: #61be7d;
      --paragraph-color: #f2f3f4;
      --paragraph-color-grey: #d6d6dbd4;
      --body-bg: #1C2336;
      --text-primary: #f2f3f4;
      background-color: var(--body-bg);
      color: var(--text-primary);
    }

    .bg-light{
      background-color: var(--body-bg);
    }
    .bg-dark{
      background-color: var(--body-bg);
    }
    .mahirut-logo {
      background-color: white;
      border-radius: 10px;
      margin: 5px;
      padding: 10px;
    }
    .ts-heading,
    .ts-heading-secondary {
      color: var(--heading-color);
      font-weight: 600;
    }

    .ts-paragraph {
      color: var(--paragraph-color-grey);
      line-height: 26px;
    }

    .navbar-nav .nav-link,
    .dropdown-menu .dropdown-item,
    .list-group-item {
      color: var(--text-primary);
      border:none;
      padding:5px;
    }
    .nav-item{
      padding:0 10px;
    }
    .nav-item a{
      text-decoration: none;
    }
    .navbar-brand {
      font-size: 40px;
      font-weight: 700;
      color: var(--heading-color);
    }
    .dropdown-menu, .list-group-item {
      background-color: rgba(26, 26, 26, 0.13) !important;
      backdrop-filter: blur(15px) !important;
      border-bottom: 1px solid #ffffff2e !important;
    }
    .sliderbanner {
      height: auto;
    }

    .swiper-slide img {
      width: 100%;
      height: auto;
      object-fit: cover;
      max-height: 386px;
    }

    #mobile-view .swiper-slide img {
      max-height: 579px;
    }

    .theme-toggle-wrapper {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .toggle-switch {
      position: relative;
      width: 52px;
      height: 26px;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #468a74;
      transition: 0.4s;
      border-radius: 26px;
      transform: rotate(180deg);
    }

    .slider::before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 4px;
      top: 4px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }

    .toggle-switch input:checked + .slider::before {
      transform: translateX(26px);
    }

    .bi-theme {
      font-size: 16px;
    }

    .swiper {
      width: 100%;
      height: fit-content;  
    }

    .swiper-wrapper {
      transition-timing-function: linear;
    }

    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    @media (max-width: 767px) {
      .swiper-button-next, .swiper-button-prev {
        display: none;
      }
      #desktop {
        display: none;
      }
      #mobile-view {
        display: block;
      }
    }

    @media (min-width: 768px) {
      #desktop {
        display: block;
      }
      #mobile-view {
        display: none;
      }
    }
    #remove-bg,.dropdown-item{
      background-color: transparent !important;
      backdrop-filter: none !important;
      padding: 10px 0px;
      border-radius:0px;
    }
    #list-heading{
      font-weight: 600;
      margin-bottom: 20px;  
      font-size:22px;
    }
    .list-group{
      padding: 5px 15px 5px 0px;
    }
    .list-group-item:hover,.dropdown-item:hover {
        color: var(--heading-color);
        font-size: 17.5px;
        font-weight: 500;
        transition: 0.2s;
        padding-right: 30px;
    }
    .list-group-item:hover::after, .dropdown-item:hover::after {
        content: ' \f061';
        font-family: 'Font Awesome 5 Free';
        font-weight: 600;
        font-size: 14px;
        color: #61be7d;
    }

    body[data-theme="light"] #list-heading, .list-group-item, #remove-bg, .dropdown-item {
      color: white !important;
    }   
    body[data-theme="dark"] .solution-content .text .title{
      color: #61be7d;
    }
    body[data-theme="dark"] .solution-content h6  {
      color: #61be7d;
    }
    body[data-theme="dark"] .text-content {
      background: #161c2cc9 ;
    }    
    body[data-theme="light"] .text-content {
      background: white;
      box-shadow: 0 0 20px rgb(0 0 0 / 20%) !important;
    }    

  
  /* <!-- vertical tab --> */
   
        ::selection {
          background: #61be7d;
          color: #fff;
        }
        .topic {
          font-size: 32px;
          font-weight: 600;
          margin-bottom: 30px;
        }
         .solution-content {
        display: flex;
        justify-content: space-between;
        }

        .solution-content .list {
        display: flex;
        flex-direction: column;
        width: 20%;
        margin-right: 50px;
        position: relative;
        }

        .solution-content .list label {
        height: 60px;
        font-size: 16px;
        font-weight: 500;
        line-height: normal;
        /* line-height: 60px; */
        cursor: pointer;
        padding-left: 25px;
        transition: all 0.5s ease;
        /* color: #333; */
        color: var(--heading-color);
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 10px;
        }

        #powerElectronics:checked ~ .list label.powerElectronics,
        #CAD:checked ~ .list label.CAD,
        #EMAG:checked ~ .list label.EMAG,
        #civil:checked ~ .list label.civil,
        #about:checked ~ .list label.about {
        color: #fff;
        /* background: #61be7d;
        border-radius: 15px; */
        }

        .solution-content .list label:hover {
        color: #61be7d;
        }

        .solution-content .slider1 {
        position: absolute;
        left: 0;
        top: 0;
        height: 60px;
        width: 100%;
        border-radius: 12px;
        background: #61be7d;
        transition: all 0.4s ease;
        z-index: 1;
        }

        #powerElectronics:checked ~ .list .slider1 {
        top: 0;
        }
        #CAD:checked ~ .list .slider1 {
        top: 60px;
        }
        #EMAG:checked ~ .list .slider1 {
        top: 120px;
        }
        #civil:checked ~ .list .slider1 {
        top: 180px;
        }
        #about:checked ~ .list .slider1 {
        top: 240px;
        }

        .solution-content .text-content {
          width: 80%;
          height: 82vh;
          padding: 20px 20px;
          overflow-y: auto;
          border-radius: 10px;
        }

        .solution-content .text {
        display: none;
        }

        .solution-content .text .title {
        font-size: 28px;
        margin-bottom: 10px;
        font-weight: 600;
        }

        .solution-content .text p {
          text-align: justify;
          font-weight: 400;
        }

        .solution-content .text-content .powerElectronics {
        display: block;
        }

        #powerElectronics:checked ~ .text-content .powerElectronics,
        #CAD:checked ~ .text-content .CAD,
        #EMAG:checked ~ .text-content .EMAG,
        #civil:checked ~ .text-content .civil,
        #about:checked ~ .text-content .about {
        display: block;
        }

        #CAD:checked ~ .text-content .powerElectronics,
        #EMAG:checked ~ .text-content .powerElectronics,
        #civil:checked ~ .text-content .powerElectronics,
        #about:checked ~ .text-content .powerElectronics {
        display: none;
        }

        .solution-content input {
        display: none;
        }

        @media (max-width: 768px) {
          .solution-content {
              flex-direction: column;
              align-items: stretch;
          }

          .solution-content .list {
              flex-direction: row;
              width: 100%;
              margin: 0 0 20px;
              overflow-x: auto;
              /* border-bottom: 1px solid #ddd; */
          }

          .navbar-nav .nav-link{
              padding: 10px 15px;
          }

          .solution-content .list label {
            z-index: 2;
            flex: 1 0 auto;
            text-align: center;
            height: 60px;
            height: auto;
            padding: 10px;
            font-size: 16px;
            font-weight: 500;
            line-height: normal;
            white-space: nowrap;
            justify-content: center;
            cursor: pointer;
            padding-left: 25px;
            transition: all 0.5s ease;
            color: var(--heading-color);
            display: flex;
            align-items: center;
            gap: 10px;
          }

          .solution-content .slider1 {
            height: auto;
            width: 20%;
            top: 0;
            bottom: auto;
            left: 0;
            border-radius: 2;
            z-index: 1;
            background: #61be7d;
            transition: transform 0.3s ease;
          }

          #powerElectronics:checked ~ .list .slider1 {
              transform: translateX(0%);
          }
          #CAD:checked ~ .list .slider1 {
              transform: translateX(100%);
          }
          #EMAG:checked ~ .list .slider1 {
              transform: translateX(200%);
          }
          #civil:checked ~ .list .slider1 {
              transform: translateX(300%);
          }
          #about:checked ~ .list .slider1 {
              transform: translateX(400%);
          }

          .solution-content .text-content {
              width: 100%;
          }

             #powerElectronics:checked ~ .list label.powerElectronics,
            #CAD:checked ~ .list label.CAD,
            #EMAG:checked ~ .list label.EMAG,
            #civil:checked ~ .list label.civil,
            #about:checked ~ .list label.about {
            color: #fff;
            background-color: var(--heading-color);            
            border-radius: 15px;
          }

          #vertical-tab{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }
          #solution-image {
              width: 100%;
              height: auto;
              max-height: 414px;
          }
        }

        @media (max-width: 480px) {
          .topic {
            font-size: 24px;
            text-align: center;
          }

          .solution-content .list label {
              font-size: 14px;
              padding: 8px 10px;
            }

            .solution-content .text .title {
              font-size: 20px;
          }

          .solution-content .text p {
              font-size: 14px;
              font-weight: 400;
          }
          #solution-image{
            width: 100%;
            height: auto;
            max-height: 414px;
          }

        }

        
        .text-content {
          /* For Webkit browsers (Chrome, Safari, Edge) */
          overflow-y: auto; /* Ensure scrolling is enabled */
          -webkit-overflow-scrolling: touch; /* Enhance scrolling on touch devices */
        }

        .text-content::-webkit-scrollbar {
          display: none; /* Hide the scrollbar */
          width: 0; /* For vertical scrollbars */
          height: 0; /* For horizontal scrollbars */
        }

        /* For Firefox */
        .text-content {
          scrollbar-width: none;  /* Hide scrollbar */
        }

        /* Optional: For IE and Edge (legacy) */
        .text-content {
          -ms-overflow-style: none;  /* Hide scrollbar */
        }

        #footer-social-icons{
          color: var(--paragraph-color);
          text-decoration:none;
        }

        .btn-mahirut{
          margin-top:-5px;
          background:#61be7d;
          color:#ffffff !important;
          border-radius:10px;
          padding:10px 36px !important;
          width: fit-content;
          border: 1px solid #61be7d;
        }
        .btn-mahirut:hover{
          background:#ffffff ;
          color:#61be7d !important;
          border-radius:10px;
          width: fit-content;
          padding:10px 35px !important;
          text-decoration:none;
          border: 1px solid #61be7d;
        }
        #solution-image{
          /* width: 100%;  */
          height: auto;
          max-height: 414px;
        }