@charset "UTF-8";

.active-light-mode {
  background-color: var(--color-white);
  color: #65676b;
}
.active-light-mode h1,
.active-light-mode h2,
.active-light-mode h3,
.active-light-mode h4,
.active-light-mode h5,
.active-light-mode h6,
.active-light-mode .h1,
.active-light-mode .h2,
.active-light-mode .h3,
.active-light-mode .h4,
.active-light-mode .h5,
.active-light-mode .h6,
.active-light-mode .social-default li a,
.active-light-mode .rbt-single-widget .title,
.active-light-mode .rbt-single-widget.widget_recent_entries .inner a,
.active-light-mode .tagcloud a,
.active-light-mode .wp-block-tag-cloud a,
.active-light-mode .rainbow-portfolio-details .content-left .single-list-wrapper .single-list label,
.active-light-mode .blog-details-content .category-meta span.text,
.active-light-mode .demo-slider-area.slider-style-1 .inner .title,
.active-light-mode .rainbow-back-top svg,
.active-light-mode .popup-mobile-menu .inner .header-top .close-menu .close-button,
.active-light-mode .footer-style-default .footer-top .rainbow-footer-widget .title,
.active-light-mode .rainbow-call-to-action.style-8 .title,
.active-light-mode .rainbow-newsletter-default .newsletter-section-title .title,
/*.active-light-mode .rainbow-default-tab .tab-button .tabs__tab .nav-link,*/
.active-light-mode .rainbow-comment-form .section-title .title {
  color: #181818;
}

.active-light-mode .rainbow-default-tab .tab-button .tabs__tab .nav-link {
  color: var(--color-primary);
}

.active-light-mode .slider-style-1.variation-3 .inner .title span,
.active-light-mode .slider-style-1.variation-3 .inner .title {
  color: #181818 !important;
}
/*.active-light-mode .rainbow-default-tab .tab-button .tabs__tab .nav-link.active,*/
.active-light-mode .slider-style-3 .thumbnail::after {
  background: #f5f8fa;
}
.active-light-mode .slider-style-8 .inner a.btn-default.btn-border,
.active-light-mode .slider-style-8 .inner button.btn-default.btn-border {
  border-color: #d8d8d8;
  color: #65676b;
}
.active-light-mode .rainbow-slick-arrow button.slick-arrow {
  border: 2px solid #d8d8d8;
  color: #65676b;
}
.active-light-mode
  .rainbow-slick-arrow.testimonial-activation
  button.slick-arrow.prev-arrow::before,
.active-light-mode
  .rainbow-slick-arrow.testimonial-activation
  button.slick-arrow.next-arrow::before {
  filter: brightness(0);
}
.active-light-mode .rainbow-slick-arrow button.slick-arrow:hover {
  border-color: transparent !important;
}
.active-light-mode
  .rainbow-slick-arrow.testimonial-activation
  button.slick-arrow.prev-arrow:hover::before,
.active-light-mode
  .rainbow-slick-arrow.testimonial-activation
  button.slick-arrow.next-arrow:hover::before {
  filter: brightness(1);
}
.active-light-mode .slider-style-8 .inner a.btn-default.btn-border:hover,
.active-light-mode .slider-style-8 .inner button.btn-default.btn-border:hover {
  color: #fcfcfc;
  border-color: transparent;
}
.active-light-mode .slider-style-1.banner-company .inner .list-icon li .icon {
  background-color: #f5f8fa !important;
}
.active-light-mode .single-demo .thumbnail .image-light {
  display: block;
}
.active-light-mode .single-demo .thumbnail .image-dark {
  display: none;
}
.active-light-mode
  .mainmenu-nav
  .mainmenu
  li.has-droupdown
  .submenu
  li
  a.active {
  background: #d8d8d8;
}
.active-light-mode
  .mainmenu-nav
  .mainmenu
  li.with-megamenu
  .rainbow-megamenu
  .wrapper
  .mega-menu-item
  li
  a:hover,
.active-light-mode
  .mainmenu-nav
  .mainmenu
  li.with-megamenu
  .rainbow-megamenu
  .wrapper
  .mega-menu-item
  li
  a.active {
  background: #d8d8d8;
}
.active-light-mode p,
.active-light-mode input[type="text"],
.active-light-mode input[type="password"],
.active-light-mode input[type="email"],
.active-light-mode input[type="number"],
.active-light-mode input[type="tel"],
.active-light-mode textarea,
.active-light-mode .breadcrumb-inner ul.page-list li a,
.active-light-mode .rainbow-address .inner p a,
.active-light-mode .error-inner .description,
.active-light-mode .rbt-single-widget.widget_recent_comments ul li a,
.active-light-mode .rbt-single-widget.widget_recent_entries ul li a,
.active-light-mode .rbt-single-widget.widget_archive ul li a,
.active-light-mode .rbt-single-widget.widget_categories ul li a,
.active-light-mode .rbt-single-widget.widget_meta ul li a,
.active-light-mode .rbt-single-widget.widget_pages ul li a,
.active-light-mode .rbt-single-widget.widget_nav_menu ul li a,
.active-light-mode .rbt-single-widget.widget_recent_entries .inner span,
.active-light-mode .rbt-single-widget.widget_recent_comments ul li span,
.active-light-mode .rbt-single-widget.widget_recent_entries ul li span,
.active-light-mode .rbt-single-widget.widget_archive ul li span,
.active-light-mode .rbt-single-widget.widget_categories ul li span,
.active-light-mode .rbt-single-widget.widget_meta ul li span,
.active-light-mode .rbt-single-widget.widget_pages ul li span,
.active-light-mode .rbt-single-widget.widget_nav_menu ul li span,
.active-light-mode .post-page-banner .rainbow-meta-list li a,
.active-light-mode .post-page-banner .rainbow-meta-list li,
.active-light-mode
  .breadcrumb-inner
  ul.page-list
  li.rainbow-breadcrumb-item.active,
.active-light-mode .slider-style-1.bg-transparent .inner .subtitle,
.active-light-mode .slider-style-1.bg-transparent .inner .description,
.active-light-mode .popup-mobile-menu .mainmenu li a,
.active-light-mode
  .footer-style-default
  .footer-top
  .rainbow-footer-widget
  .footer-link
  li
  a,
.active-light-mode
  .footer-style-default
  .footer-top
  .rainbow-footer-widget
  .subtitle,
.active-light-mode .rainbow-call-to-action.style-8 .content .subtitle,
.active-light-mode
  .rainbow-newsletter-default
  .newsletter-section-title
  .description,
.active-light-mode .slider-style-5 .inner .subtitle,
.active-light-mode .slider-style-5 .inner .title,
.active-light-mode .single-progress .title,
.active-light-mode .radial-progress .circle-text span.count,
.active-light-mode .radial-progress .circle-text span.count::after,
.active-light-mode .radial-progress-single .circle-info .subtitle,
.active-light-mode .copyright-style-one .copyright-text a {
  color: #000000;
}
.active-light-mode .header-transparent.sticky .mainmenu-nav .mainmenu > li > a,
.active-light-mode .clltoaction-style-default.style-7 .content .subtitle,
.active-light-mode .copyright-style-one .ft-menu li a,
.active-light-mode
  .footer-style-default
  .footer-top
  .rainbow-footer-widget
  .text-big {
  color: #65676b;
}
.active-light-mode .form-group input,
.active-light-mode .form-group textarea,
/*.active-light-mode .rainbow-accordion-style.rainbow-accordion-02 .card .card-header,*/
.active-light-mode .mainmenu-nav .mainmenu li.with-megamenu .rainbow-megamenu .wrapper .mega-menu-item,
.active-light-mode .breadcarumb-style-1,
/*.active-light-mode .rainbow-accordion-style.rainbow-accordion-03 .card .card-header,
.active-light-mode .rainbow-accordion-style.rainbow-accordion-04 .card,*/
.active-light-mode .rainbow-pricing .pricing-table-inner,
.active-light-mode input[type=text],
.active-light-mode input[type=password],
.active-light-mode input[type=email],
.active-light-mode input[type=number],
.active-light-mode input[type=tel],
.active-light-mode textarea,
.active-light-mode .rbt-single-widget,
.active-light-mode .rbt-single-widget.widget_recent_comments ul li + li,
.active-light-mode .rbt-single-widget.widget_recent_entries ul li + li,
.active-light-mode .rbt-single-widget.widget_archive ul li + li,
.active-light-mode .rbt-single-widget.widget_categories ul li + li,
.active-light-mode .rbt-single-widget.widget_meta ul li + li,
.active-light-mode .rbt-single-widget.widget_pages ul li + li,
.active-light-mode .rbt-single-widget.widget_nav_menu ul li + li,
.active-light-mode .tagcloud a,
.active-light-mode .wp-block-tag-cloud a,
.active-light-mode .section-title-2 .title,
.active-light-mode .popup-mobile-menu .mainmenu li + li,
.active-light-mode .clltoaction-style-default.style-7 .content-wrapper,
.active-light-mode .copyright-style-one,
.active-light-mode .footer-style-default .newsletter-form .form-group input,
.active-light-mode .newsletter-area .border-top-bottom,
.active-light-mode .rainbow-comment-form .inner .rnform-group textarea,
.active-light-mode .rainbow-portfolio-details .content-left .single-list-wrapper .single-list + .single-list {
  border-color: #00000024;
}
.active-light-mode .service.service__style--1.with-working-process .line {
  background-color: #00000024;
  width: 83%;
}
.active-light-mode
  .mainmenu-nav
  .mainmenu
  li.has-droupdown
  .submenu
  li
  a:hover {
  background: #d8d8d8;
}
.active-light-mode
  .mainmenu-nav
  .mainmenu
  li.with-megamenu
  .rainbow-megamenu
  .wrapper
  .mega-menu-item
  li
  a:hover {
  background: #d8d8d8;
  color: var(--color-primary);
}
.active-light-mode .btn-read-more span::after {
  background: #00000024;
}
.active-light-mode .breadcrumb-inner ul.page-list li a:hover,
.active-light-mode .rainbow-address .inner p a:hover,
.active-light-mode .post-page-banner .rainbow-meta-list li a:hover,
.active-light-mode .header-top-bar .header-left p a:hover {
  color: var(--color-primary);
}
.active-light-mode .social-default li a:hover,
.active-light-mode .tagcloud a:hover,
.active-light-mode .wp-block-tag-cloud a:hover,
.active-light-mode .header-top-news .btn-read-more span {
  color: var(--color-white);
}
.active-light-mode .tagcloud a:hover,
.active-light-mode .wp-block-tag-cloud a:hover {
  border-color: var(--color-primary);
}
.active-light-mode a.btn-default.text-underline,
.active-light-mode button.btn-default.text-underline {
  border-color: #181818;
  color: #181818;
}
.active-light-mode .single-demo .thumbnail .image-active-light-mode {
  display: block;
}
.active-light-mode .single-demo .thumbnail .image-dark {
  display: none;
}
.active-light-mode .footer-style-default .social-default li a,
.active-light-mode .copyright-style-one .social-default.color-lessdark li a,
.active-light-mode
  .rainbow-newsletter-default
  .rainbow-newsletter
  .form-group
  input {
  background: #fcfcfc;
}
.active-light-mode .copyright-style-one .ft-menu li + li::after {
  background: #c5c1c1;
}
.active-light-mode .copyright-style-one .ft-menu li a:hover,
.active-light-mode
  .footer-style-default
  .footer-top
  .rainbow-footer-widget
  .footer-link
  li
  a:hover {
  color: var(--color-primary);
}
.active-light-mode .header-transparent-with-topbar .header-top-bar,
.active-light-mode .header-transparent-with-topbar .header-default {
  background: transparent;
}
.active-light-mode
  [class*="col"]:nth-child(2)
  .counter-style-2.color-variation
  .count-number {
  background-color: #f9f5f5;
}
.active-light-mode
  [class*="col"]:nth-child(3)
  .counter-style-2.color-variation
  .count-number {
  background-color: #eef2f3;
}
.active-light-mode
  .service-wrapper
  > [class*="col"]:nth-child(4)
  .service.service__style--1.icon-circle-style
  .icon {
  background-color: #eb008b24;
}
.active-light-mode .logo a img.logo-light {
  display: none;
}
.active-light-mode .rainbow-back-top i {
  color: #333;
}
.active-light-mode
  .service-wrapper
  > [class*="col"]:nth-child(5)
  .service.service__style--1.icon-circle-style
  .icon {
  background-color: #009aff29;
}
.active-light-mode
  .service-wrapper
  > [class*="col"]:nth-child(6)
  .service.service__style--1.icon-circle-style
  .icon {
  background-color: #3000ff29;
}
.active-light-mode .bg-lessdark-gradient {
  background: #f5f8fa;
}
.active-light-mode .header-top-news-2 .btn-read-more span {
  color: var(--color-white);
}
.active-light-mode .preview-accordion-area .service .content .liststyle span {
  color: #333;
}
.active-light-mode .envato-white {
  display: none;
}
.active-light-mode .envato-black {
  display: block;
  margin-left: auto;
  text-align: center;
  margin-right: auto;
}

.active-light-mode .service.service__style--1.icon-circle-style .icon {
  background-color: #059dff0f;
}

.active-light-mode
  .service-wrapper
  > [class*="col"]:nth-child(2)
  .service.service__style--1.icon-circle-style
  .icon {
  background-color: #fb53431a;
}

.active-light-mode
  .service-wrapper
  > [class*="col"]:nth-child(3)
  .service.service__style--1.icon-circle-style
  .icon {
  background-color: #6549d51f;
}
.active-light-mode .service__style--1 h4,
.active-light-mode .service__style--1 h4 a {
  color: var(--color-heading) !important;
}
.active-light-mode .service__style--1 h4 a:hover {
  color: var(--color-primary) !important;
}

.active-light-mode .timeline-dot::after {
  background: radial-gradient(50% 50% at 50% 50%, #f5f8fa 48.96%, #f5f8fa 100%);
}

.active-light-mode .header-top-bar {
  background-color: var(--color-white);
}

.active-light-mode .single-timeline .single-content,
.active-light-mode .rainbow-card,
.active-light-mode .clltoaction-style-default.style-5 .content-wrapper,
.active-light-mode .header-default,
.active-light-mode .mainmenu-nav .mainmenu li.has-droupdown .submenu,
/*.active-light-mode .service.gallery-style,*/
.active-light-mode .rainbow-box-card .inner,
/*.active-light-mode .team-style-default .inner,*/
/*.active-light-mode .rainbow-accordion-style .card,*/
.active-light-mode .section-title .subtitle,
/*.active-light-mode .card-box.card-style-1,*/
.active-light-mode .list-icon li .icon,
.active-light-mode .counter-style-2 .count-number,
.active-light-mode .rainbow-pricing.style-2 .pricing-table-inner,
/*.active-light-mode .rainbow-default-tab .rainbow-tab-content,
.active-light-mode .rainbow-default-tab .tab-button .react-tabs__tab.react-tabs__tab--selected,
.active-light-mode .advance-tab-button-1 .tab-button-list .tab-button::before,*/
.active-light-mode .advance-pricing .pricing-left,
.active-light-mode .rainbow-pricing.style-5 .pricing-table-inner,
.active-light-mode .about-style-5 .about-wrapper,
.active-light-mode .rainbow-sub-badge,
.active-light-mode .about-style-6 .wrapper::after,
.active-light-mode .box-grid-layout .rainbow-card,
.active-light-mode .mainmenu-nav .mainmenu li.with-megamenu .rainbow-megamenu .wrapper,
.active-light-mode .social-default li a,
.active-light-mode .clltoaction-style-default.style-4 .content-wrapper,
.active-light-mode .rainbow-address,
.active-light-mode .rbt-single-widget .title,
.active-light-mode .frame-image,
.active-light-mode .rainbow-back-top,
.active-light-mode .popup-mobile-menu .inner,
.active-light-mode .rainbow-call-to-action.style-8,
.active-light-mode .bg-overlay-solid::before {
  background: #f5f8fa;
}

.active-light-mode .rainbow-header.sticky {
  background: #f5f8fa !important;
}

/*.active-light-mode .bg-color-blackest {
  background: #f5f8fa !important;
}*/

.active-light-mode .footer-style-default,
.active-light-mode .copyright-style-one {
  background: #f5f8fa;
}

.active-light-mode .slider-style-2 .list-icon li .icon {
  background: var(--color-blackest);
}

.active-light-mode .rainbow-pricing .pricing-table-inner::before,
.active-light-mode
  .rainbow-timeline-single.dark-line
  .rainbow-timeline
  .progress-dot
  .dot-level,
.active-light-mode
  .rainbow-timeline-single.dark-line
  .rainbow-timeline
  .progress-line
  .line-inner,
.active-light-mode
  .card-style-default.testimonial-style-one
  .inner
  .thumbnail::after,
.active-light-mode .advance-pricing,
.active-light-mode .rainbow-pricing.style-5 .pricing-table-inner .pricing,
.active-light-mode
  .popup-mobile-menu
  .inner
  .header-top
  .close-menu
  .close-button,
.active-light-mode .hamberger-button {
  background: #d8d8d8;
}

.active-light-mode .single-demo {
  background: #e9f8fe;
}

/*.active-light-mode .rainbow-accordion-style .card .card-body,*/
.active-light-mode .brand-style-1 li {
  border-color: #d8d8d8;
}

.active-light-mode hr {
  border-top: 1px solid #00000024;
}

.active-light-mode .rainbow-card {
  border-color: #f5f8fa;
}

.active-light-mode .rainbow-pricing.active .pricing-table-inner .pricing-header,
.active-light-mode .rainbow-pricing .pricing-table-inner .pricing-header {
  border-color: #0000000a;
}

.active-light-mode .advance-tab-button-1 .tab-button-list .tab-button::after {
  border-left: 20px solid #f5f8fa;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.active-light-mode a.btn-default.btn-border,
.active-light-mode button.btn-default.btn-border {
  border-color: #00000024;
  color: #181818;
}

.active-light-mode a.btn-default.btn-border:hover,
.active-light-mode button.btn-default.btn-border:hover {
  border-color: var(--color-primary-alt);
  color: #fcfcfc;
}

.active-light-mode .rainbow-box-card .inner .thumbnail
/*.active-light-mode .team-style-default .inner .thumbnail*/ {
  border: 6px solid var(--color-white);
}

.active-light-mode .filter-button-default button,
.active-light-mode .testimonial-style-two .content .client-info .subtitle,
.active-light-mode .single-timeline .single-content .inner .content .date-of-timeline,
/*.active-light-mode .service.gallery-style .content p,*/
.active-light-mode .rainbow-box-card .inner .social-icon li a,
/*.active-light-mode .team-style-default .inner .social-icon li a,*/
/*.active-light-mode .rainbow-accordion-style .card .card-body,*/
.active-light-mode .mainmenu-nav .mainmenu > li > a,
.active-light-mode .mainmenu-nav .mainmenu li.has-droupdown .submenu li a,
.active-light-mode .list-icon li,
.active-light-mode ul li,
.active-light-mode .rainbow-pricing.active .pricing-table-inner .pricing-body ul.list-style--1 li,
.active-light-mode .rainbow-pricing.active .pricing-table-inner .pricing-body ul.list-style--1 li svg,
.active-light-mode .advance-tab-button-1 .tab-button-list .tab-button .title,
.active-light-mode .advance-pricing .pricing-left .subtitle,
.active-light-mode .header-top-bar .header-left p a,
.active-light-mode .header-top-bar .header-right .address-content p a,
.active-light-mode .header-top-bar .social-default.icon-naked li a,
.active-light-mode .progress-info .title,
.active-light-mode .progress-info span.progress-number,
.active-light-mode .mainmenu-nav .mainmenu li.with-megamenu .rainbow-megamenu .wrapper .mega-menu-item li a,
.active-light-mode .clltoaction-style-default.style-4 .content .subtitle {
  color: #000000;
}

.active-light-mode .team-style-default .inner {
  background: var(--color-black);
}
.active-light-mode .team-style-default .inner .title,
.active-light-mode .team-style-default .inner .subtitle,
.active-light-mode .team-style-default .inner .description {
  color: var(--color-white);
}

.active-light-mode .service.gallery-style h4,
.active-light-mode .service.gallery-style h4 a {
  color: var(--color-heading);
}
.active-light-mode .service.gallery-style h4 a:hover {
  color: var(--color-primary);
}

.active-light-mode .card-box.card-style-1 .inner .content .description {
  color: #65676b !important;
}
.active-light-mode .card-box.card-style-1 .inner .content h4,
.active-light-mode .card-box.card-style-1 .inner .content h4 a {
  color: var(--color-heading) !important;
}
.active-light-mode .card-box.card-style-1 .inner .content h4 a:hover {
  color: var(--color-primary) !important;
}

.active-light-mode .clltoaction-style-default.style-5 .content .subtitle,
/*.active-light-mode .rainbow-accordion-style .card .card-header button,*/
.active-light-mode .counter-style-2 .count-number,
.active-light-mode .rainbow-pricing .pricing-table-inner .pricing-header .pricing span.price,
.active-light-mode .rainbow-pricing.active .pricing-table-inner .pricing-header .title,
.active-light-mode .rainbow-pricing.active .pricing-table-inner .pricing-header .pricing span.currency,
.active-light-mode .rainbow-pricing.active .pricing-table-inner .pricing-header .pricing span.subtitle,
.active-light-mode .rainbow-pricing .pricing-table-inner .pricing-header .pricing span.subtitle,
/*.active-light-mode .rainbow-default-tab .tab-button .rainbow-tab-button button,*/
.active-light-mode .rainbow-pricing .pricing-table-inner .pricing-header .pricing span.currency,
.active-light-mode .card-style-default.testimonial-style-one .inner .thumbnail::after,
.active-light-mode .clltoaction-style-default.style-6 .content .title,
.active-light-mode .rainbow-splite-style .split-inner .title,
.active-light-mode .advance-tab-button-1 .tab-button-list .react-tabs__tab--selected .tab-button .title,
.active-light-mode .advance-pricing .pricing-left .price-wrapper .price-amount,
.active-light-mode .btn-read-more span,
.active-light-mode .section-title-2 .title,
.active-light-mode .box-grid-layout .rainbow-card .inner .content .title,
.active-light-mode .clltoaction-style-default.style-5 .content .title,
.active-light-mode .clltoaction-style-default.style-4 .content .title,
.active-light-mode .hamberger-button {
  color: #181818;
}

.active-light-mode .rainbow-default-tab p {
  color: var(--color-body);
}

.active-light-mode .about-style-6 .maintitle {
  color: #181818 !important;
}

.active-light-mode .slider-style-1 .inner .title {
  color: var(--color-white);
}

.active-light-mode .testimonial-style-two .content::after {
  color: #f5f8fa;
}

.active-light-mode .header-transparent .mainmenu-nav .mainmenu > li > a {
  color: var(--color-body);
}

.active-light-mode .header-top-bar .header-right .address-content p a:hover {
  color: var(--color-primary);
}

.active-light-mode
  .rainbow-pricing
  .pricing-table-inner
  .pricing-header
  .pricing
  span.currency {
  opacity: 0.8;
}

.active-light-mode .mainmenu-nav .mainmenu li.has-droupdown .submenu li a:hover,
.active-light-mode .btn-read-more:hover span {
  color: var(--color-primary);
}

.active-light-mode .CircularProgressbar .CircularProgressbar-text {
  fill: #181818 !important;
}

.active-light-mode .logo-active-light-mode {
  display: none;
}

.active-light-mode .logo-dark {
  display: block;
}

.active-light-mode .slider-area.bg-transparent .inner a.btn-default.btn-border,
.active-light-mode
  .slider-area.bg-transparent
  .inner
  button.btn-default.btn-border {
  border-color: #00000024;
  color: #181818;
}

.active-light-mode
  .slider-area.bg-transparent
  .inner
  a.btn-default.btn-border:hover,
.active-light-mode
  .slider-area.bg-transparent
  .inner
  button.btn-default.btn-border:hover {
  color: var(--color-white);
}

.active-light-mode .service.service-eight h4,
.active-light-mode .service.service-eight h4 a,
.active-light-mode .timeline-style-two h6,
.active-light-mode .timeline-style-two .description {
  color: var(--color-heading);
}
.active-light-mode .service.service-eight h4 a:hover {
  color: var(--color-primary);
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:weight@100;200;300;400;500;600;700;800&display=swap");

.search {
  position: relative;
  box-shadow: 0 0 40px rgba(51, 51, 51, 0.1);
}

.search input {
  height: 60px;
  text-indent: 25px;
  border: 2px solid #d6d4d4;
}

.search input:focus {
  box-shadow: none;
  border: 2px solid #8dc63f;
}

.search .feather-search {
  position: absolute;
  top: 20px;
  left: 16px;
}

.search button {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 50px;
  width: 110px;
  background: var(--color-primary);
}