<?php



use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if (!defined('ABSPATH')) exit; // Exit if accessed directly


class Categorycarouseltwentysixthstkaveh extends Widget_Base{

  public function get_name(){
    return 'categorycarouseltwentysixthstkaveh';
  }

  public function get_title(){
    return esc_html__( 'Category Carousel Style Twenty Six', 'kavehTheme' );
  }

  public function get_icon(){
    return 'eicon-archive-posts';
  }

  public function get_categories(){
    return ['kavehelements'];
  }

  protected function register_controls(){
    
    $this->start_controls_section(
        'contentcategorycarouseltwentysixthstkaveh',
        [
          'label' => esc_html__( 'Element Content', 'kavehTheme' ),
                  'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
      );
      $repeater = new \Elementor\Repeater();
      $repeater->add_control(
        'img1categorycarouselkaveh',
        [
          'label' => esc_html__( 'Background Image', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::MEDIA,
        ]
      );
      $repeater->add_control(
        'beftitle1categorycarouseltwentysixthstkaveh',
        [
          'label' => esc_html__( 'Pre Title', 'kavehTheme' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'default' => 'Surface',
  
        ]
      );
      $repeater->add_control(
        'beftagheading1categorycarouseltwentysixthstkaveh',
        [
          'label' => esc_html__( 'Subtitle Tag', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::SELECT,
          'default' => 'div',
          'options' => [
            'H1'  => esc_html__( 'H1', 'kavehTheme' ),
            'H2' => esc_html__( 'H2', 'kavehTheme' ),
            'H3' => esc_html__( 'H3', 'kavehTheme' ),
            'H4' => esc_html__( 'H4', 'kavehTheme' ),
            'H5' => esc_html__( 'H5', 'kavehTheme' ),
            'H6' => esc_html__( 'H6', 'kavehTheme' ),
            'p' => esc_html__( 'p', 'kavehTheme' ),
            'div' => esc_html__( 'div', 'kavehTheme' ),
            'span' => esc_html__( 'span', 'kavehTheme' ),
          ],
        ]
      );
      $repeater->add_control(
      'title1categorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__( 'Title', 'kavehTheme' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'default' => 'Microsoft',

      ]
    );
    $repeater->add_control(
      'tagheading1categorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__( 'Title Tag', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::SELECT,
        'default' => 'div',
        'options' => [
          'H1'  => esc_html__( 'H1', 'kavehTheme' ),
          'H2' => esc_html__( 'H2', 'kavehTheme' ),
          'H3' => esc_html__( 'H3', 'kavehTheme' ),
          'H4' => esc_html__( 'H4', 'kavehTheme' ),
          'H5' => esc_html__( 'H5', 'kavehTheme' ),
          'H6' => esc_html__( 'H6', 'kavehTheme' ),
          'p' => esc_html__( 'p', 'kavehTheme' ),
          'div' => esc_html__( 'div', 'kavehTheme' ),
          'span' => esc_html__( 'span', 'kavehTheme' ),
        ],
      ]
    );

    $repeater->add_control(
      'iconiamazingoffereightstkaveh',
      [
        'label' => esc_html__( 'Icon', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::ICONS,
        'skin' => 'inline',
        'exclude_inline_options' => [ 'svg' ],
        'default' => [
          'value' => 'icon-arrow-left-6',
        ],
      ]
    ); 

    $repeater->add_control(
      'linkcategorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__( 'Link', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::TEXT,
        'default' => '#',
      ]
    );

    $repeater->add_control(
      'show_rating_categorycarouseltwentysixthstkaveh',
      [
        'label'        => esc_html__('Show Rating', 'kavehTheme'),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => esc_html__('Yes', 'kavehTheme'),
				'label_off'    => esc_html__('No', 'kavehTheme'),
        'return_value' => 'yes',
        'default'      => 'yes',
      ]
    );    

    $repeater->add_control(
      'rate_number_categorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__('Rating Number', 'kavehTheme'),
        'type' => \Elementor\Controls_Manager::NUMBER,
        'condition' => [
          'show_rating_categorycarouseltwentysixthstkaveh' => 'yes',
        ],
        'min' => 0,
        'max' => 5,
        'step' => 0.1,
        'default' => 4.5,
      ]
    );    
    
    $repeater->add_control(
      'bgcolorcategorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__( 'Main Background Color', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} {{CURRENT_ITEM}} .bg::before' => 'background-color: {{VALUE}};',
          '{{WRAPPER}} {{CURRENT_ITEM}} .bg::after' => 'background-color: {{VALUE}};',
          '{{WRAPPER}} {{CURRENT_ITEM}} .bg span' => 'background-color: {{VALUE}};',
        ],
      ]
    );
    
    $repeater->add_control(
      'bgovercolorcategorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__( 'Secondary Background Color', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} {{CURRENT_ITEM}} .bg-over::before' => 'background-color: {{VALUE}};',
          '{{WRAPPER}} {{CURRENT_ITEM}} .bg-over::after' => 'background-color: {{VALUE}};',
          '{{WRAPPER}} {{CURRENT_ITEM}} .bg-over span' => 'background-color: {{VALUE}};',
        ],
      ]
    );
    
    $repeater->add_control(
      'ratecolorcategorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__( 'Rating Number Color', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::COLOR,
        'condition' => [
          'show_rating_categorycarouseltwentysixthstkaveh' => 'yes',
        ],
        'selectors' => [
          '{{WRAPPER}} {{CURRENT_ITEM}} .rate span' => 'color: {{VALUE}};',
        ],
      ]
    );
    
    $repeater->add_control(
      'circlecolorcategorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__( 'Rating Circle Color', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::COLOR,
        'condition' => [
          'show_rating_categorycarouseltwentysixthstkaveh' => 'yes',
        ],
        'selectors' => [
          '{{WRAPPER}} {{CURRENT_ITEM}} .rate svg circle:last-child' => 'stroke: {{VALUE}};',
        ],
      ]
    );

    $repeater->add_control(
      'circle2colorcategorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__( 'Circle Border Color', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::COLOR,
        'condition' => [
          'show_rating_categorycarouseltwentysixthstkaveh' => 'yes',
        ],
        'selectors' => [
          '{{WRAPPER}} {{CURRENT_ITEM}} .rate circle:first-child' => 'stroke: {{VALUE}};',
        ],
      ]
    );
    
    $repeater->add_control(
      'titlecolorcategorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__( 'Title Color', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} {{CURRENT_ITEM}} .title' => 'color: {{VALUE}};',
        ],
      ]
    );
    
    $repeater->add_control(
      'titleencolorcategorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__( 'Subtitle Color', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} {{CURRENT_ITEM}} .title-en' => 'color: {{VALUE}};',
        ],
      ]
    );
    
    $repeater->add_control(
      'btniconbgcolorcategorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__( 'Button Background Color', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
          '{{WRAPPER}} {{CURRENT_ITEM}} .btn-view' => 'background-color: {{VALUE}};',
        ],
      ]
    );
    
    $this->add_control(
      'listcategorycarouseltwentysixthstkaveh',
      [
        'label' => esc_html__( 'Categories', 'kavehTheme' ),
        'type' => \Elementor\Controls_Manager::REPEATER,
        'fields' => $repeater->get_controls(),
        'default' => [
          [
            'title1categorycarouseltwentysixthstkaveh' => esc_html__( 'Title', 'kavehTheme' ),
				'title2categorycarouseltwentysixthstkaveh' => esc_html__( 'Subtitle', 'kavehTheme' ),
            'linkcategorycarouseltwentysixthstkaveh' => esc_html__( '#', 'kavehTheme' ),
          ],
      ]
      ]
    
    );
       $this->end_controls_section();


// Complete styling for title and subtitle
$this->start_controls_section(
  'style_title_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Title and Subtitle Style', 'kavehTheme'),
      'tab' => \Elementor\Controls_Manager::TAB_STYLE,
  ]
);
$this->add_control(
  'title_color_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Title Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .title' => 'color: {{VALUE}}',
      ],
  ]
);
$this->add_group_control(
  \Elementor\Group_Control_Typography::get_type(),
  [
      'name' => 'title_typography_categorycarouseltwentysixthstkaveh',
      'label' => esc_html__('Title Typography', 'kavehTheme'),
      'selector' => '{{WRAPPER}} .title',
  ]
);
$this->add_control(
  'subtitle_color_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Subtitle Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .title-en' => 'color: {{VALUE}}',
      ],
  ]
);
$this->add_group_control(
  \Elementor\Group_Control_Typography::get_type(),
  [
      'name' => 'subtitle_typography_categorycarouseltwentysixthstkaveh',
      'label' => esc_html__('Subtitle Typography', 'kavehTheme'),
      'selector' => '{{WRAPPER}} .title-en',
  ]
);
$this->end_controls_section();

// Category image styling
$this->start_controls_section(
  'style_image_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Image Style', 'kavehTheme'),
      'tab' => \Elementor\Controls_Manager::TAB_STYLE,
  ]
);
$this->add_control(
  'image_width_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Image Width', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::SLIDER,
      'size_units' => ['px', '%'],
      'range' => [
          'px' => ['min' => 50, 'max' => 500],
      ],
      'selectors' => [
          '{{WRAPPER}} img' => 'width: {{SIZE}}{{UNIT}}',
      ],
  ]
);
$this->add_control(
  'image_height_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Image Height', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::SLIDER,
      'size_units' => ['px', '%'],
      'range' => [
          'px' => ['min' => 50, 'max' => 500],
      ],
      'selectors' => [
          '{{WRAPPER}} img' => 'height: {{SIZE}}{{UNIT}}',
      ],
  ]
);
$this->add_responsive_control(
  'image_margin_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Image Margin', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::DIMENSIONS,
      'size_units' => ['px', '%'],
      'selectors' => [
          '{{WRAPPER}} img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
      ],
  ]
);
$this->add_responsive_control(
  'image_padding_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Image Padding', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::DIMENSIONS,
      'size_units' => ['px', '%'],
      'selectors' => [
          '{{WRAPPER}} img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
      ],
  ]
);
$this->end_controls_section();

// Circular number styling
$this->start_controls_section(
  'style_circle_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Circular Number Style', 'kavehTheme'),
      'tab' => \Elementor\Controls_Manager::TAB_STYLE,
  ]
);
$this->add_control(
  'circle_color_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Circle Border Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .rate circle:first-child' => 'stroke: {{VALUE}}',
      ],
  ]
);
$this->add_control(
  'circle_fill_color_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Circle Inner Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .rate circle:first-child' => 'fill: {{VALUE}}',
      ],
  ]
);


$this->add_control(
  'circle_progress_color_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Circle Progress Bar Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .rate circle:last-child' => 'stroke: {{VALUE}}',
      ],
  ]
);
$this->add_control(
  'circle_text_color_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Number Color', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .rate span' => 'color: {{VALUE}}',
      ],
  ]
);

$this->add_control(
  'rate_stroke_width_categorycarouseltwentysixthstkaveh',
  [
    'label' => esc_html__('Rating Line Thickness', 'kavehTheme'),
    'type' => \Elementor\Controls_Manager::SLIDER,
    'range' => [
      'px' => [ 'min' => 1, 'max' => 15 ],
    ],
    'selectors' => [
      '{{WRAPPER}} .category-tech .rate svg circle' => 'stroke-width: {{SIZE}}{{UNIT}};',
    ],
  ]
);

$this->add_group_control(
  \Elementor\Group_Control_Typography::get_type(),
  [
      'name' => 'circle_text_typography_categorycarouseltwentysixthstkaveh',
      'label' => esc_html__('Number Typography', 'kavehTheme'),
      'selector' => '{{WRAPPER}} .rate span',
  ]
);

$this->add_control(
  'circle_size_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Circle Size', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::SLIDER,
      'size_units' => ['px', '%'],
      'range' => [
          'px' => ['min' => 20, 'max' => 200],
      ],
      'selectors' => [
          '{{WRAPPER}} .rate svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
      ],
  ]
);

$this->add_responsive_control(
  'circle_margin_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Circle Margin', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::DIMENSIONS,
      'size_units' => ['px', '%'],
      'selectors' => [
          '{{WRAPPER}} .rate' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
      ],
  ]
);

$this->add_responsive_control(
  'circle_padding_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Circle Padding', 'kavehTheme'),
      'type' => \Elementor\Controls_Manager::DIMENSIONS,
      'size_units' => ['px', '%'],
      'selectors' => [
          '{{WRAPPER}} .rate' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
      ],
  ]
);
$this->end_controls_section();



$this->start_controls_section(
  'style_arrow_categorycarouseltwentysixthstkaveh',
  [
      'label' => esc_html__('Controllers Style', 'kavehTheme'),
      'tab' => \Elementor\Controls_Manager::TAB_STYLE,
  ]
);

$this->add_control(
  'navigation_arrow_color',
  [
      'label' => __( 'Change Icon Color', 'your-text-domain' ),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .iconone' => 'color: {{VALUE}} !important;',
      ],
  ]
);

$this->add_control(
  'navigation_size_arrow_color',
  [
    'label' => esc_html__( 'Icon Size', 'kavehTheme' ),
    'type' => \Elementor\Controls_Manager::SLIDER,
    'size_units' => [ 'px' ] ,
    'range' => [
      'px' => [
        'min' => 0,
        'max' => 200,
        'step' => 1,
      ],
    ],
    'selectors' => [
      '{{WRAPPER}} .iconone' => 'font-size: {{SIZE}}{{UNIT}};',
    ],
  ]
);

$this->add_control(
  'navigation_background_color',
  [
      'label' => __( 'Change Icon Background', 'your-text-domain' ),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .category-tech .content .btn-view::after' => 'background-color: {{VALUE}} !important;',
      ],
  ]
);

$this->add_control(
  'navigationicon_background_color',
  [
      'label' => __( 'Icon Background Change Box', 'your-text-domain' ),
      'type' => \Elementor\Controls_Manager::COLOR,
      'selectors' => [
          '{{WRAPPER}} .category-tech .content .btn-view' => 'background-color: {{VALUE}} !important;',
      ],
  ]
);

$this->end_controls_section();


  }
        protected function render() {
          $settings = $this->get_settings_for_display();
          $clsid = $this->get_id();
          ?>
          <div class="container">
              <div class="categories-tech-wrapper position-relative">
                  <!-- Start Carousel -->
                  <div class="swiper swiper-categories-tech swiper-visible swiper-visibled-mobile swiper-initialized swiper-horizontal swiper-pointer-events swiper-autoheight swiper-rtl swiper-watch-progress swiper-backface-hidden">
                      <div class="swiper-wrapper" id="swiper-wrapper-<?php echo esc_attr($clsid); ?>" aria-live="polite" style="height: 230px; transform: translate3d(0px, 0px, 0px);">
                          <?php foreach ($settings['listcategorycarouseltwentysixthstkaveh'] as $item): ?>
                              <!-- Start Slide -->
                              <div class="swiper-slide swiper-slide-visible swiper-slide-active" role="group" style="width: 239.75px; margin-left: 61px;">
                                  <div class="category-tech position-relative elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>">
                                      <a href="<?php echo esc_url($item['linkcategorycarouseltwentysixthstkaveh']); ?>" class="stretched-link" aria-label="name category"></a>
                                      <div class="bg position-absolute top-0 end-0 w-100 h-100">
                                          <span class="position-absolute"></span>
                                      </div>
                                      <div class="bg bg-over position-absolute w-100 h-100">
                                          <span class="position-absolute"></span>
                                      </div>
                                      <?php
                                      $rating = floatval($item['rate_number_categorycarouseltwentysixthstkaveh']);
                                      $max_rating = 5;
                                      $radius = 45.14;
                                      $circumference = 2 * M_PI * $radius;
                                      $progress = min($rating / $max_rating, 1) * $circumference;
                                      ?>
                                      <?php if ($item['show_rating_categorycarouseltwentysixthstkaveh'] === 'yes' && $rating): ?>
                                      <div class="rate position-absolute d-flex align-items-center justify-content-center start-0">
                                          <span><?php echo number_format($rating, 1); ?></span>
                                          <svg class="position-absolute top-0 start-0" viewBox="0 0 100 100" width="62" height="62">
                                              <circle cx="50" cy="50" r="45.14" stroke="#EBE6DB" stroke-width="7" fill="none"></circle>
                                              <circle cx="50" cy="50" r="45.14" stroke="#0057FF" stroke-width="7" fill="none" 
                                              stroke-dasharray="<?php echo round($progress, 2) . ' ' . round($circumference, 2); ?>"></circle>
                                          </svg>
                                      </div>
                                      <?php endif; ?>
                                      <div class="content text-truncate">
                                          <<?php echo esc_html($item['beftagheading1categorycarouseltwentysixthstkaveh']); ?> class="title text-truncate">
                                              <?php echo esc_html($item['beftitle1categorycarouseltwentysixthstkaveh']); ?>
                                          </<?php echo esc_html($item['beftagheading1categorycarouseltwentysixthstkaveh']); ?>>
                                          <<?php echo esc_html($item['tagheading1categorycarouseltwentysixthstkaveh']); ?> class="title-en text-truncate">
                                              <?php echo esc_html($item['title1categorycarouseltwentysixthstkaveh']); ?>
                                          </<?php echo esc_html($item['tagheading1categorycarouseltwentysixthstkaveh']); ?>>
                                          <div class="btn-view d-flex align-items-center justify-content-center position-relative">
                                              <i class="<?php echo  esc_attr($item['iconiamazingoffereightstkaveh']['value']); ?> lh-1 iconone"></i>
                                          </div>
                                      </div>
                                      <?php if (!empty($item['img1categorycarouselkaveh']['url'])): ?>
                                          <img src="<?php echo esc_url($item['img1categorycarouselkaveh']['url']); ?>" alt="<?php echo esc_attr($item['title1categorycarouseltwentysixthstkaveh']); ?>" class="position-absolute top-50 end-0">
                                      <?php endif; ?>
                                  </div>
                              </div>
                              <!-- End Slide -->
                          <?php endforeach; ?>
                      </div>
                      <div class="swiper-button-prev top-50 translate-middle-y m-0 d-none d-lg-flex align-items-center justify-content-center start-0 bg-white swiper-button-disabled swiper-button-lock" tabindex="-1" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-<?php echo esc_attr($clsid); ?>" aria-disabled="true">
                          <i class="icon-angle-right-3 lh-1"></i>
                      </div>
                      <div class="swiper-button-next top-50 translate-middle-y m-0 d-none d-lg-flex align-items-center justify-content-center end-0 bg-white swiper-button-disabled swiper-button-lock" tabindex="-1" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-<?php echo esc_attr($clsid); ?>" aria-disabled="true">
                          <i class="icon-angle-left-3 lh-1"></i>
                      </div>
                      <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                  </div>
                  <!-- End Carousel -->
              </div>
          </div>      
          <style>
              .categories-products-item .image img {
                  object-fit: contain !important;
              }
              .categories-products-item .btn::before {
                  background-size: contain !important;
              }
              .category-tech img {
              transform: translate(-25px, -50%);
              width: 137px;
              height: 175px;
              object-fit: contain;
              margin-left: -45px;
              }
          </style>
         
          <?php
      }
    }
