.hero-img-video {
          height: 100vh;
      }

      .hero-img-video-sec {
          position: relative;
      }

      .hero-img-video-sec .ply-btton {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }

      .parallax-section {
          background-image: url("{{ asset('assets/front/img/bg-img-sec.webp') }}");
          background-size: cover;
          background-position: center;
          background-attachment: fixed;
          height: 2400px;
      }

      .remove-dots::after {
          content: none;
      }

      span.tp-text-slide-title.remove-dots.remove-dots {
          font-weight: 600;
          font-size: 20px;
      }

      .des-project-banner img {
          margin-top: 0px;
      }

      .growth-img {
          position: absolute;
          top: 9%;
          z-index: 1;
          left: 0;
          right: 0;
          margin-right: auto;
          margin-left: auto;
          display: table;
      }

      .stand-out-scroll {
          position: absolute;
          z-index: 1;
          top: 41%;
      }

      .infulnsre-scroll {
          position: absolute;
          top: 50%;
          z-index: 1;
          width: 50%;
      }

      .arrow-scroll {
          position: absolute;
          z-index: 1;
          top: 66%;
          left: 0;
      }

      .impact-scroll {
          position: absolute;
          z-index: 1;
          top: 74%;
          left: 0;
      }

      .narrative-scroll {
          position: absolute;
          z-index: 1;
          top: 82%;
          right: 0;
      }

      .arrow-right-scroll {
          position: absolute;
          z-index: 1;
          bottom: 0;
          right: 0;
      }

      .des-portfolio-thumb::after {
          border-radius: 20px;
          background: linear-gradient(109.37deg,
                  rgba(255, 255, 255, 0.4) 12.9%,
                  rgba(255, 255, 255, 0.1) 77.62%);
          /* border: 3px solid; */
      }

      .des-portfolio-thumb.p-relative {
          backdrop-filter: blur(4px);
      }

      .des-portfolio-category.mainsec {
          position: absolute;
          top: 0px;
          left: 0px;
          z-index: 2;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      @media (min-width: 1200px) {
          .container-1140 {
              max-width: 1140px;
          }
      }

      .px-50 {
          padding: 0 92px;
      }

      .mainsec h3.tp_text_who {
          font-size: 50px;
          color: #fff;
      }

      .app-faq-wrap .ai-faq-accordion-wrap .accordion.accordion-design-studio {
          background: transparent;
      }

      .app-faq-wrap .ai-faq-accordion-wrap .accordion.accordion-design-studio .accordion-items:not(:last-child) {
          border-bottom: 1px solid rgb(247, 247, 253);
      }

      .app-faq-wrap .ai-faq-accordion-wrap .accordion.accordion-design-studio .accordion-items .accordion-header .accordion-buttons {
          font-weight: 300;
          color: #ffffff;
          padding: 26px 60px 28px 0px;
      }

      .app-faq-wrap .ai-faq-accordion-wrap .accordion.accordion-design-studio .accordion-items .accordion-body p {
          font-weight: 200;
          color: #f9f9f9;
      }

      .app-faq-wrap .ai-faq-accordion-wrap .accordion.accordion-design-studio .accordion-items .accordion-body {
          padding-left: 0px;
          padding-bottom: 20px;
      }

      .app-faq-wrap .ai-faq-accordion-wrap .accordion.accordion-design-studio .accordion-items .accordion-header .accordion-buttons .accordion-icon::before,
      .app-faq-wrap .ai-faq-accordion-wrap .accordion.accordion-design-studio .accordion-items .accordion-header .accordion-buttons .accordion-icon::after {
          background-color: #ffffff;
      }

      .app-faq-wrap .ai-faq-accordion-wrap .accordion.accordion-design-studio .accordion-items .accordion-header .accordion-buttons .accordion-icon {
          background-color: transparent;
          border: none;
      }

      .contact-container {
          /* max-width: 800px; */
          margin: 0 auto;
          padding: 40px 20px;
      }

      .form-control,
      .form-select {
          background-color: #ffffff;
          border: none;
          border-radius: 25px;
          padding: 15px 20px;
          font-size: 16px;
          color: #666;
          margin-bottom: 20px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .form-control:focus,
      .form-select:focus {
          background-color: #ffffff;
          border-color: #007bff;
          box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
          color: #333;
      }

      .form-control::placeholder {
          color: #999;
      }

      .dropdown-select {
          background-color: #666;
          border: none;
          border-radius: 25px;
          padding: 15px 20px;
          font-size: 16px;
          color: #ffffff;
          margin-bottom: 7px;
          cursor: pointer;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      .select2-search.select2-search--inline input::placeholder {
        color: #fff;
        margin-top: 0px !important;
    }


      .dropdown-select:after {
          content: ">";
          font-weight: bold;
          transform: rotate(90deg);
      }

     

      .select2-container .select2-search--inline .select2-search__field {
        margin-top: 17px !important;
        margin-left: 15px;
    }

      .message-textarea {
          background-color: #ffffff;
          border: none;
          border-radius: 20px;
          padding: 20px;
          font-size: 16px;
          color: #666;
          min-height: 120px !important;
          resize: vertical;
          margin-bottom: 20px;
      }

      .message-textarea:focus {
          background-color: #ffffff;
          border-color: #007bff;
          box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
          color: #333;
      }

      .custom-checkbox {
          margin: 20px 0;
      }

      .custom-checkbox input[type="checkbox"] {
          margin-right: 10px;
          transform: scale(1.2);
      }

      .checkbox-text {
          font-size: 16px;
          line-height: 1.4;
          color: #fff;
      }

      .checkbox-subtitle {
          font-size: 14px;
          color: #fff;
          font-style: italic;
          margin-top: 5px;
      }

      .btn-get-in-touch {
          background: linear-gradient(45deg, #007bff, #0056b3);
          border: none;
          border-radius: 25px;
          padding: 15px 40px;
          font-size: 18px;
          font-weight: 600;
          color: white;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
      }

      .btn-get-in-touch:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
          background: linear-gradient(45deg, #0056b3, #004085);
      }

      .contact-info {
          margin-top: 40px;
          padding-top: 30px;
          border-top: 1px solid #444;
      }

      .contact-email {
          color: #007bff;
          text-decoration: none;
          font-weight: 500;
      }

      .contact-email:hover {
          color: #0056b3;
          text-decoration: underline;
      }

      .phone-number {
          font-size: 18px;
          font-weight: 500;
          margin: 10px 0;
      }

      .social-icons {
          margin-top: 20px;
      }

      .social-icons a {
          color: #ffffff;
          font-size: 24px;
          margin-right: 15px;
          transition: color 0.3s ease;
      }

      .social-icons a:hover {
          color: #007bff;
      }

      .story-text {
          font-size: 18px;
          font-weight: 300;
          margin-top: 15px;
          color: #ccc;
      }

      @media (max-width: 768px) {
          .contact-container {
              padding: 20px 15px;
          }

          .row>div {
              margin-bottom: 10px;
          }

          
          .select2-container .select2-search--inline .select2-search__field {
            margin-top: 0px !important;
          }
      }

      .des-portfolio-item .img-portfolio {
          height: 845px;
      }

      .footer {
          background-image:  url('https://samastha.co.in/assets/front/img/footer-bg.webp');
          background-color: #2c2c2c;
          color: #ffffff;
          padding: 60px 0 30px 0;
      }

      .footer-links {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .footer-links li {
          margin-bottom: 12px;
      }

      .footer-links a {
          color: #ffffff;
          text-decoration: none;
          font-size: 16px;
          transition: color 0.3s ease;
      }

      .footer-links a:hover {
          color: #007bff;
      }

      .contact-info {
          font-size: 14px;
          line-height: 1.6;
      }

      /* .contact-info a {
          color: #ffffff;
          text-decoration: underline;
      } */

      .contact-info a:hover {
          color: #007bff;
      }

      .footer-bottom {
          border-top: 1px solid #444;
          padding-top: 20px;
          margin-top: 40px;
      }

      .footer-logo {
          width: 40px;
          height: 40px;
          /* background-color: #ffffff; */
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .footer-logo i {
          color: #2c2c2c;
          font-size: 20px;
      }

      .legal-links a {
          color: #ffffff;
          text-decoration: none;
          font-size: 14px;
      }

      .legal-links a:hover {
          color: #007bff;
      }

      .legal-links .separator {
          margin: 0 5px;
      }

      @media (max-width: 768px) {
          .footer {
              padding: 40px 0 20px 0;
          }

          .footer-bottom {
              text-align: center;
          }

          .legal-links {
              margin-top: 15px;
          }
      }

      /* client partner  */

      .client-partner-container {
          color: white;
          font-family: sans-serif;
      }

      .client-partner-container .label {
          font-size: 35px;
          line-height: 100%;
      }

      .title {
          font-size: 28px;
          padding: 30px;
      }

      .center-box {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: white;
          color: black;
          padding: 10px 20px;
          border-radius: 25px;
          font-weight: bold;
      }

      .label {
          position: absolute;
          white-space: nowrap;
          font-size: 14px;
          cursor: pointer;
      }

      .line {
          position: absolute;
          width: 2px;
          background: white;
          transform-origin: bottom center;
          opacity: 0.3;
      }

      .dot {
          position: absolute;
          width: 18px;
          height: 18px;
          background: white;
          border-radius: 50%;
      }

      /* Label positions */
      .item1 {
          top: 12%;
          left: 43%;
          transform: translateX(-50%);
      }

      .item2 {
          top: 16%;
          left: 77%;
          transform: translate(-50%, -50%);
      }

      .item3 {
          top: 44%;
          left: 81%;
          transform: translate(-50%, -50%);
      }

      .item4 {
          bottom: 30%;
          left: 76%;
          transform: translate(-50%, 50%);
      }

      .item5 {
          bottom: 22%;
          left: 54%;
          transform: translate(-50%, 50%);
      }

      .item6 {
          top: 73%;
          left: 30%;
          transform: translate(-50%, -50%);
      }

      .item7 {
          top: 45%;
          left: 23%;
          transform: translate(-50%, -50%);
      }

      /* Lines from center to each label */
      .line1 {
          top: 8%;
          left: 49%;
          height: 250px;
          transform: translateX(-50%) rotate(-46deg);
      }

      .line2 {
          top: 13%;
          left: 52%;
          height: 220px;
          transform: translateX(-50%) rotate(41deg);
      }

      .line3 {
          top: 15%;
          left: 57%;
          height: 220px;
          transform: translateX(-50%) rotate(83deg);
      }

      .line4 {
          top: 13%;
          left: 52%;
          height: 260px;
          transform: translateX(-50%) rotate(123deg);
      }

      .line5 {
          top: 35%;
          left: 52%;
          height: 120px;
          transform: translateX(-50%) rotate(165deg);
      }

      .line6 {
          top: 14%;
          left: 43%;
          height: 250px;
          transform: translateX(-50%) rotate(248deg);
      }

      .line7 {
          top: 12%;
          left: 43%;
          height: 235px;
          transform: translateX(-50%) rotate(-75deg);
      }

      /* Dots at the end of each line */
      .dot1 {
          top: 18%;
          left: 37%;
          transform: translateX(-50%);
      }

      .dot2 {
          top: 20%;
          left: 61%;
      }

      .dot3 {
          top: 43%;
          left: 71%;
      }

      .dot4 {
          bottom: 23%;
          left: 67%;
          transform: translateX(-50%);
      }

      .dot5 {
          bottom: 26%;
          left: 54%;
          transform: translateX(-50%);
      }

      .dot6 {
          top: 66%;
          left: 27%;
      }

      .dot7 {
          top: 37%;
          left: 27%;
      }

      .label,
      .dot {
          transition: all 0.3s ease;
          color: white;
          opacity: 1;
      }

      /* When hovering any .label */
      .client-partner-container:hover .label,
      .client-partner-container:hover .dot {
          opacity: 0.3;
      }

      /* Keep the hovered label full opacity */
      .label:hover {
          opacity: 1;
      }

      /* Now make only the corresponding dot full opacity */
      .label.item1:hover~.dot.dot1,
      .label.item2:hover~.dot.dot2,
      .label.item3:hover~.dot.dot3,
      .label.item4:hover~.dot.dot4,
      .label.item5:hover~.dot.dot5,
      .label.item6:hover~.dot.dot6,
      .label.item7:hover~.dot.dot7 {
          opacity: 1;
      }

      .label.item1:hover,
      .label.item2:hover,
      .label.item3:hover,
      .label.item4:hover,
      .label.item5:hover,
      .label.item6:hover,
      .label.item7:hover {
          opacity: 1;
      }

      /* popup  */
      .label-popup {
          color: white;
          padding: 16px 24px;
          border-radius: 8px;
          display: none;
          z-index: 9999;
          white-space: nowrap;
          font-size: 16px;
          pointer-events: auto;
          transition: opacity 0.5s ease;
      }

      .popup-inner {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
      }

      .label-popup.active {
          display: block;
      }

      .client-partner-container {
          opacity: 1;
          visibility: visible;
          transition: opacity 0.3s ease;
      }

      .client-partner-container.hidden {
          opacity: 0;
          visibility: hidden;
      }

      .popup-inner p {
          font-size: 48px;
          line-height: 100%;
      }

      .popup-close svg {
          width: 45px;
          height: 45px;
          background: white;
          padding: 14px;
          border-radius: 100px;
      }

      .popup-images {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 35px;
          width: 60%;
          flex-wrap: wrap;
      }

      /* pop logo  */
      .logo-img {
          max-width: 100px !important;
      }

      .popup-inner p {
          color: white;
          width: 40%;
          white-space: wrap;
      }

      .popup-made {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      #labelPopup {
          width: 78%;
      }