body {
  font-family: "Open Sans";
}
body .custom-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 30px;
}
@media (max-width: 767px) {
  body .custom-container {
    padding: 20px;
  }
}

@font-face {
  font-family: "CustomExtraBold";
  src: url("https://cdn.syncfusion.com/content/images/products/angularUIBlocks/OpenSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  /* Extra Bold weight */
  font-style: normal;
}
.mauiUIKit-banner-section {
  background-image: url(https://cdn.syncfusion.com/content/images/products/angularUIBlocks/angular-banner-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
@media (min-width: 2470px) {
  .mauiUIKit-banner-section {
    background-image: url(https://cdn.syncfusion.com/content/images/products/angularUIBlocks/4k-gradient.png) !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .mauiUIKit-banner-section {
    background-image: url(https://cdn.syncfusion.com/content/images/products/angularUIBlocks/tab-gradient.png) !important;
  }
}
@media (max-width: 767px) {
  .mauiUIKit-banner-section {
    background-image: url(https://cdn.syncfusion.com/content/images/products/angularUIBlocks/mobile-background.png) !important;
  }
}
@media (min-width: 1025px) {
  .mauiUIKit-banner-section .mauiUIKit-banner-image img {
    width: 852px !important;
    margin-left: -20px;
  }
}
@media (max-width: 380px) {
  .mauiUIKit-banner-section .supported-browsers img {
    margin-top: 15px !important;
  }
}
@media (max-width: 767px) {
  .mauiUIKit-banner-section .custom-container {
    flex-direction: column;
    padding: 50px 20px 20px !important;
  }
  .mauiUIKit-banner-section .custom-container .mauiUIKit-header {
    min-width: 90%;
    text-align: center;
  }
  .mauiUIKit-banner-section .custom-container .mauiUIKit-header h1 {
    line-height: 33px !important;
  }
  .mauiUIKit-banner-section .custom-container .mauiUIKit-header p {
    line-height: 26px !important;
  }
  .mauiUIKit-banner-section .custom-container .mauiUIKit-header .banner-buttons {
    display: flex;
    flex-direction: column;
  }
  .mauiUIKit-banner-section .custom-container .mauiUIKit-header .banner-buttons .github-banner {
    justify-content: center;
    margin: 0px 0px 20px 0px;
    align-items: center;
    font-size: 16px;
  }
  .mauiUIKit-banner-section .custom-container .mauiUIKit-header .banner-buttons .banner-online-demo {
    justify-content: center;
    margin-bottom: 20px;
    align-items: center;
    font-size: 16px;
  }
  .mauiUIKit-banner-section .custom-container .mauiUIKit-banner-image {
    max-width: 90% !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .mauiUIKit-banner-section .custom-container {
    padding: 50px 30px 20px !important;
    flex-direction: column;
  }
  .mauiUIKit-banner-section .custom-container .mauiUIKit-header {
    min-width: 90%;
    text-align: center;
  }
  .mauiUIKit-banner-section .custom-container .mauiUIKit-header h1 {
    line-height: 42px !important;
  }
  .mauiUIKit-banner-section .custom-container .mauiUIKit-header p {
    font-size: 14px;
  }
  .mauiUIKit-banner-section .custom-container .mauiUIKit-header .supported-browsers span {
    font-size: 12px;
  }
  .mauiUIKit-banner-section .custom-container .mauiUIKit-banner-image {
    max-width: 90% !important;
  }
}
.mauiUIKit-banner-section .custom-container {
  padding: 60px 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1025px) {
  .mauiUIKit-banner-section .custom-container {
    gap: 0px;
    padding-left: 30px !important;
    padding-right: 30px !important;
    padding-top: 30px !important;
    padding-bottom: 60px !important;
  }
}
.mauiUIKit-banner-section .custom-container .mauiUIKit-banner-image {
  flex: 1;
  max-width: 60%;
}
.mauiUIKit-banner-section .custom-container .banner-buttons {
  margin-bottom: 20px;
}
.mauiUIKit-banner-section .custom-container .banner-buttons .github-banner {
  color: #fff;
  background-color: #0057FF;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  display: inline-flex;
  letter-spacing: 0.2px;
  text-decoration: none;
  margin-right: 20px;
}
.mauiUIKit-banner-section .custom-container .banner-buttons .github-banner:hover {
  background-color: #0050EB;
}
.mauiUIKit-banner-section .custom-container .banner-buttons .github-banner img {
  margin-right: 10px;
}
.mauiUIKit-banner-section .custom-container .banner-buttons .banner-online-demo {
  border: 1px solid #0057ff;
  padding: 9.2px 16px;
  border-radius: 6px;
  display: inline-flex;
  text-decoration: none;
  color: #0057ff;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.mauiUIKit-banner-section .custom-container .banner-buttons .banner-online-demo:hover {
  background-color: #E0EAFF;
}
.mauiUIKit-banner-section .custom-container .banner-buttons .banner-online-demo img {
  margin-right: 10px;
}
.mauiUIKit-banner-section .custom-container .supported-browsers span {
  font-size: 13px;
  letter-spacing: 0.2px;
  color: #30364D;
  font-weight: 400;
  margin-right: 12px;
}
.mauiUIKit-banner-section .custom-container .mauiUIKit-header {
  flex: 1;
  max-width: 40%;
}
@media (min-width: 1025px) {
  .mauiUIKit-banner-section .custom-container .mauiUIKit-header {
    padding-top: 40px;
  }
}
.mauiUIKit-banner-section .custom-container .mauiUIKit-header .sub-header {
  margin-left: 2px;
  color: #475569;
  font-size: 14px;
}
.mauiUIKit-banner-section .custom-container .mauiUIKit-header h1 {
  color: #0F172A;
  margin: 5px 0px 20px 0px;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-family: "CustomExtraBold", sans-serif !important;
  font-size: 42px;
  line-height: 48px;
}
@media (min-width: 1090px) {
  .mauiUIKit-banner-section .custom-container .mauiUIKit-header h1 {
    font-size: 42px !important;
  }
}
.mauiUIKit-banner-section .custom-container .mauiUIKit-header h1 .highlight-words {
  color: #0057FF;
}
.mauiUIKit-banner-section .custom-container .mauiUIKit-header p {
  color: #64748B;
  font-size: 16px;
  display: block;
  margin-bottom: 30px;
}
.mauiUIKit-banner-section .custom-container .mauiUIKit-header p b {
  color: #475569;
}

@media (max-width: 767px) {
  .trusted-section .custom-container h2 {
    font-size: 14px !important;
    line-height: 26px !important;
  }
  .trusted-section .custom-container .mobile-trusted-section {
    display: block !important;
  }
  .trusted-section .desktop-section {
    display: none !important;
  }
}
.trusted-section .custom-container {
  padding-top: 0px !important;
  display: flex;
  flex-direction: column;
}
.trusted-section .custom-container .desktop-section {
  display: block;
}
.trusted-section .custom-container .mobile-trusted-section {
  display: none;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .trusted-section .custom-container {
    padding: 40px 30px;
  }
}
.trusted-section .custom-container img {
  margin: 0px auto;
}
.trusted-section h2 {
  font-size: 16px !important;
  text-align: center;
  font-weight: 600;
  margin-bottom: 15px;
  color: #595E71;
}

.how-it-works-section {
  background-color: #FAFBFF;
}
.how-it-works-section h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #0F172A;
}
.how-it-works-section .subtitle {
  text-align: center;
  color: #475569;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 20px;
}
.how-it-works-section .steps-container {
  display: grid;
  gap: 40px;
  padding: 20px 0;
  margin: 0px auto;
  align-content: center;
}
.how-it-works-section .step {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 20px;
  align-items: start;
}
.how-it-works-section .step-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-it-works-section .step-icon svg {
  width: 30px;
  height: 30px;
  fill: #0066ff;
}
.how-it-works-section .step-content {
  flex: 1;
}
.how-it-works-section .step-number {
  font-size: 11px;
  color: #5C6A7B;
  margin-bottom: 5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.how-it-works-section .step-title {
  font-size: 20px;
  font-weight: 700;
  color: #001F53;
  margin: 5px 0px 7px;
}
.how-it-works-section .step-description {
  color: #475569;
  line-height: 22px;
  font-weight: 400;
  font-size: 14px;
}
.how-it-works-section .step-description a {
  color: #0057FF;
  text-decoration: underline;
}
.how-it-works-section .step-description a:hover {
  color: #0450c2;
}
@media (min-width: 1440px) {
  .how-it-works-section .steps-container {
    width: 55%;
  }
}
@media (min-width: 1180px) {
  .how-it-works-section .steps-container {
    width: 58%;
  }
}
@media (max-width: 767px) {
  .how-it-works-section .steps-container .step {
    display: flex !important;
    flex-direction: column !important;
  }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .how-it-works-section .steps-container {
    width: 68%;
  }
}
@media (max-width: 768px) {
  .how-it-works-section .steps-container {
    width: 90%;
  }
  .how-it-works-section .subtitle {
    font-size: 14px;
  }
  .how-it-works-section .step-title {
    font-size: 18px !important;
    line-height: 26px;
  }
  .how-it-works-section .step-description {
    font-size: 12px !important;
  }
}
@media (min-width: 768px) and (max-width: 820px) {
  .how-it-works-section .steps-container {
    width: 90%;
  }
}
@media (min-width: 821px) and (max-width: 1024px) {
  .how-it-works-section .steps-container {
    width: 80%;
  }
}

@media (max-width: 767px) {
  .ui-feature-blocks .custom-container {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0px;
    padding-bottom: 20px;
  }
}
@media (min-width: 768px) {
  .ui-feature-blocks .custom-container {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0px;
    padding-bottom: 40px;
  }
}
@media (max-width: 768px) {
  .ui-feature-blocks .custom-container .features {
    display: flex;
    flex-direction: column !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .ui-feature-blocks h2 {
    font-size: 26px !important;
    max-width: 400px;
    margin: 0px auto;
    line-height: 38px !important;
  }
  .ui-feature-blocks .description {
    max-width: 600px !important;
  }
  .ui-feature-blocks .features {
    padding: 20px 30px !important;
  }
}
.ui-feature-blocks h2 {
  text-align: center;
  font-size: 32px;
  line-height: 30px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #0F172A;
}
@media (max-width: 767px) {
  .ui-feature-blocks h2 {
    font-size: 20px !important;
  }
}
.ui-feature-blocks .description {
  text-align: center;
  color: #475569;
  max-width: 760px;
  margin: 0px auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 25px;
}
@media (max-width: 768px) {
  .ui-feature-blocks .description {
    font-size: 14px !important;
  }
}
.ui-feature-blocks .features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  padding: 20px;
}
@media (min-width: 1024px) {
  .ui-feature-blocks .features {
    padding: 20px 0px;
  }
}
.ui-feature-blocks .features .feature h3 {
  font-size: 20px;
  font-weight: 700;
  color: #001F53;
  margin: 15px 0px 10px;
}
.ui-feature-blocks .features .feature p {
  color: #475569;
  line-height: 22px;
  font-weight: 400;
  font-size: 14px;
}
.ui-feature-blocks .features .feature p a {
  color: #0057FF;
  text-decoration: underline;
}
.ui-feature-blocks .features .feature p a:hover {
  color: #0450c2;
}
@media (max-width: 768px) {
  .ui-feature-blocks .features .feature h3 {
    font-size: 18px !important;
    line-height: 24px;
  }
  .ui-feature-blocks .features .feature p {
    font-size: 12px !important;
  }
}

@media (max-width: 767px) {
  .new-faq-segment {
    padding-right: 15px;
    padding-left: 15px;
  }
  .new-faq-segment #faq .faq-list h4 .question-content .faq-question {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 22px;
  }
}
.new-faq-segment {
  background-color: #FAFBFF !important;
  width: -webkit-fill-available;
}
.new-faq-segment #faq {
  background-color: #fff !important;
}
.new-faq-segment #faq .faq-list:hover {
  border: 1px solid #0057FF !important;
  box-shadow: 0px 4px 16px 0px rgba(0, 37, 110, 0.1607843137);
}
.new-faq-segment #faq .faq-list .answer-content p {
  font-family: Open Sans;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: #475569;
}
.new-faq-segment #faq .faq-list h4 .question-content .faq-question {
  font-family: Open Sans;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  color: #0F172A;
}

@media (max-width: 1024px) and (min-width: 768px) {
  #faq-segment .col-sm-12 {
    float: left !important;
  }
}
#faq h3 {
  font-size: 33px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 50px;
}

@media (max-width: 1279px) and (min-width: 768px) {
  #faq h3 {
    font-size: 26px !important;
  }
}
@media (max-width: 1023px) and (min-width: 768px) {
  #faq h3 {
    margin-bottom: 40px;
  }
}
@media (max-width: 767px) {
  #faq {
    padding: 40px 0px !important;
  }
  #faq h3 {
    font-size: 22px !important;
    margin-bottom: 35px;
    margin-top: 0px;
    line-height: 35px;
  }
}
#faq {
  padding: 60px 0 55px;
}

#faq h2 {
  margin-bottom: 50px;
}

#faq .faq-list {
  border: 1px solid #d7ebff;
  background: #fff;
  border-radius: 5px;
  margin-bottom: 15px;
}

#faq .faq-list h4 .question-content {
  cursor: pointer;
  font-size: 16px;
  color: #1a1a1a;
  letter-spacing: 0;
  line-height: 23px;
  font-weight: 600;
  padding: 10px 20px 20px;
  display: table;
  width: 100%;
}

#faq .faq-list h4 .question-content .tick-icon {
  display: table-cell;
  font-size: 14px;
  width: 10px;
  padding-right: 10px;
}

#faq .faq-list h4 .question-content .faq-question {
  width: 84%;
  display: table-cell;
}

#faq .faq-list h4 .question-content .permalink {
  display: table-cell;
  position: relative;
  top: 2px;
  left: 7px;
  padding-right: 7px;
}

#faq .faq-list h4 .question-content .faq-arrow-icon {
  float: right;
  display: table-cell;
  top: 8px;
  position: relative;
}

#faq .faq-list .answer-content {
  padding: 0 20px 25px;
  font-size: 14px;
  color: #585858;
  letter-spacing: 0;
  line-height: 25px;
}

#faq .faq-list .answer-content a {
  color: #0057ff !important;
  font-weight: 600;
  text-decoration: none;
  outline: 0 !important;
}

#faq .faq-list .answer-content ul {
  padding: 0 15px;
}

#faq .faq-list .answer-content ul li {
  padding-bottom: 5px;
  line-height: 23px;
}

#faq .faq-list h4 .collapsed .faq-arrow-icon .faq-expand-icon,
#faq .faq-list h4 .faq-collapse-icon {
  display: block;
}

#faq {
  background-color: #fafafa;
}

#faq .faq-list h4 .collapsed .faq-arrow-icon .faq-expand-icon svg,
#faq .faq-list h4 .faq-collapse-icon svg {
  opacity: 1;
}

#faq .faq-list h4 {
  margin-bottom: 0;
  margin-top: 0;
}

#faq .faq-list h4 .collapsed .faq-arrow-icon .faq-collapse-icon,
#faq .faq-list h4 .faq-expand-icon {
  display: none;
}

#faq .faq-list .answer-content a:hover {
  color: #0450c2 !important;
}

#faq h2 {
  font-size: 33px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
}

#faq-segment.pdf-framework,
#faq-segment.excel-framework,
#faq-segment.powerpoint-framework,
#faq-segment.word-framework {
  padding: 0;
}

#faq-segment.pdf-framework #faq,
#faq-segment.excel-framework #faq,
#faq-segment.powerpoint-framework #faq,
#faq-segment.word-framework #faq {
  background-color: #f4f8ff;
}

#faq-segment {
  padding: 0;
}

@media (max-width: 767px) {
  #faq .faq-list h4 .question-content {
    font-size: 14px;
    padding: 10px 20px 15px;
  }
}
@media (max-width: 1024px) {
  #faq .mobile-responsive {
    padding: 0px 30px;
  }
}
.free-trail-section {
  background-color: #FAFBFF;
}
.free-trail-section .custom-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .free-trail-section .custom-container {
    flex-direction: column;
  }
}
.free-trail-section h2 {
  color: #0F172A;
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
  margin-bottom: 20px;
}
.free-trail-section .content-wrapper,
.free-trail-section .image-wrapper {
  flex: 1 1 50%;
  padding: 10px;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .free-trail-section .image-wrapper {
    flex: 1 1 59% !important;
  }
  .free-trail-section .content-wrapper {
    flex: 1 1 41% !important;
  }
}
.free-trail-section .content-wrapper {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) and (max-width: 1111px) {
  .free-trail-section .content-wrapper {
    margin-top: -10px;
  }
}
@media (min-width: 1111px) {
  .free-trail-section .content-wrapper {
    margin-top: 10px;
  }
}
.free-trail-section .content-wrapper p {
  color: #475569;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  margin-bottom: 30px;
}
.free-trail-section .content-wrapper .free-trail-buttons .blue-btn {
  background-color: #0057FF;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 9.5px 20px;
  margin-right: 12px;
}
.free-trail-section .content-wrapper .free-trail-buttons .blue-btn:hover {
  background-color: #0450c2;
}
.free-trail-section .content-wrapper .free-trail-buttons .outline-btn {
  outline: 1.5px solid #0057FF;
  color: #0057FF;
  padding: 9.5px 20px;
  font-weight: 600;
}
.free-trail-section .content-wrapper .free-trail-buttons .outline-btn:hover {
  background-color: #E0EAFF;
}
.free-trail-section .image-wrapper img {
  max-width: 100%;
  /* Make the image responsive */
  height: auto;
  /* Maintain aspect ratio */
}
@media (max-width: 767px) {
  .free-trail-section .content-wrapper,
  .free-trail-section .image-wrapper {
    flex: 1 1 100%;
  }
  .free-trail-section .image-wrapper {
    text-align: center;
  }
  .free-trail-section .content-wrapper h2 {
    font-size: 22px !important;
    text-align: center;
    line-height: 32px;
  }
  .free-trail-section .content-wrapper p {
    font-size: 12px !important;
    margin-bottom: 20px;
    text-align: center;
  }
  .free-trail-section .content-wrapper .free-trail-buttons {
    display: flex;
    flex-direction: column;
  }
  .free-trail-section .content-wrapper .free-trail-buttons .blue-btn {
    margin: 0px 0px 15px 0px !important;
  }
  .free-trail-section .content-wrapper .free-trail-buttons .blue-btn,
  .free-trail-section .content-wrapper .free-trail-buttons .outline-btn {
    font-size: 12px !important;
  }
}
@media (min-width: 768px) and (max-width: 880px) {
  .free-trail-section .content-wrapper h2 {
    font-size: 24px !important;
  }
  .free-trail-section .content-wrapper p {
    font-size: 13px !important;
  }
  .free-trail-section .content-wrapper .blue-btn,
  .free-trail-section .content-wrapper .outline-btn {
    font-size: 12px !important;
  }
}

.ui-block-section {
  padding: 70px;
  background-image: url(https://cdn.syncfusion.com/content/images/products/angularUIBlocks/github-section-background.svg);
  background-size: cover;
}
@media (max-width: 768px) {
  .ui-block-section {
    padding: 60px 20px;
  }
}
.ui-block-section .content {
  text-align: center;
}
.ui-block-section .content .subtitle {
  font-size: 16px;
  font-weight: 400;
  color: #D2D2D2;
  letter-spacing: 0.8px;
}
.ui-block-section h2 {
  font-weight: 700;
  color: #fff;
  font-size: 30px;
  max-width: 800px;
  margin: 0 auto 30px;
  line-height: 44px;
  font-size: 30px;
}
@media (max-width: 767px) {
  .ui-block-section .buttons {
    display: flex;
    flex-direction: column;
  }
  .ui-block-section .buttons .github {
    margin: 0px 0px 25px 0px !important;
  }
}
.ui-block-section .buttons .github {
  background-color: #FFD018;
  padding: 8px 24px;
  color: #0F172A;
  font-weight: 600;
  border-radius: 6px;
  margin-right: 15px;
}
.ui-block-section .buttons .github:hover {
  background-color: #E1BD00;
}
.ui-block-section .buttons .github img {
  margin-right: 10px;
}
.ui-block-section .buttons .demo {
  color: #FFD018;
  font-weight: 600;
  outline: 1px solid #FFD018;
  border-radius: 4px;
  padding: 8px 24px;
}
.ui-block-section .buttons .demo:hover {
  background-color: #FFD018;
  color: #0A162F !important;
}
.ui-block-section .buttons .demo:hover #visual-studio-icon {
  background-image: url(https://cdn.syncfusion.com/content/images/LandingPages/mauiuikit/visual-studio-hover-maui.svg);
}
.ui-block-section .buttons .demo:hover #vs-code-icon {
  background-image: url(https://cdn.syncfusion.com/content/images/LandingPages/mauiuikit/vs-code-v1-hover.svg);
}
.ui-block-section .buttons .demo .play-btn-support {
  width: 22px;
  height: 22px;
  background-size: cover;
  margin-right: 10px;
  display: inline-flex;
  vertical-align: middle;
}
.ui-block-section .buttons .demo #visual-studio-icon {
  background-image: url(https://cdn.syncfusion.com/content/images/LandingPages/mauiuikit/visual-studio-v1.svg);
}
.ui-block-section .buttons .demo #vs-code-icon {
  background-image: url(https://cdn.syncfusion.com/content/images/LandingPages/mauiuikit/vs-code-v1.svg);
}

.ui-block-section .buttons .demo.focus,
.ui-block-section .buttons .demo:focus {
  outline: 1px solid #FFD018 !important;
}

.free-trail-section .content-wrapper .free-trail-buttons .outline-btn.active,
.free-trail-section .content-wrapper .free-trail-buttons .outline-btn:focus {
  background-color: #E0EAFF;
  outline: 1.5px solid #0057FF !important;
  box-shadow: none;
}

.unleash-power {
  margin-top: 60px !important;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .unleash-power {
    line-height: 38px !important;
  }
}

.filter-height {
  height: auto !important;
}

.no-padding {
  padding: 0px !important;
}

.img-gallery-car {
  display: none;
}

.filter-gallery-area {
  display: block;
}

.carousel-res-view {
  display: none;
}

.gallery-title {
  font-size: 36px;
  color: #42B32F;
  text-align: center;
  font-weight: 500;
  margin-bottom: 70px;
}

.gallery-title:after {
  content: "";
  position: absolute;
  width: 7.5%;
  left: 46.5%;
  height: 45px;
  border-bottom: 1px solid #5e5e5e;
}

.filter-button {
  font-size: 16px;
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
  letter-spacing: 0.1px;
  border: none;
  font-weight: 500;
  border-radius: 20px;
  padding: 6px 16px;
  text-align: center;
  margin-right: 8px;
  margin-bottom: 30px;
}

.carousel-button {
  font-size: 16px;
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
  letter-spacing: 0.1px;
  border: none;
  font-weight: 500;
  border-radius: 20px;
  padding: 6px 16px;
  text-align: center;
  margin-right: 8px;
  margin-bottom: 16px;
}

.btn-default {
  color: #FFFFFF;
  background-color: #3F3F4C;
  border-color: #3F3F4C;
}

.btn-default.focus,
.btn-default:focus {
  outline: none !important;
  box-shadow: none;
}

.btn-default.active:focus {
  outline: none !important;
  box-shadow: none;
}

.btn-default.active:focus {
  background-color: #0073DC;
  color: white;
  outline: none !important;
}

.btn-default:active .filter-button:active {
  background-color: #42B32F;
  color: white;
  outline: none;
  box-shadow: none;
}

.btn-default.active:hover {
  background-color: #0073DC;
  color: white;
}

.port-image {
  width: 100%;
}

.gallery_product {
  margin-bottom: 30px;
}

.gallery_product img {
  cursor: pointer;
}

.btn.active {
  background-color: #0073DC;
  color: white;
}

.filter.catalog {
  display: none;
}

.filter.detail {
  display: none;
}

.filter.chat {
  display: none;
}

.filter.chat {
  display: none;
}

.filter.article {
  display: none;
}

.filter.reviews-and-ratings {
  display: none;
}

.filter.contact-us {
  display: none;
}

.filter.about-us {
  display: none;
}

.filter.navigation {
  display: none;
}

.filter.error-and-empty {
  display: none;
}

.filter.transaction {
  display: none;
}

.filter.bookmarks {
  display: none;
}

.filter.history {
  display: none;
}

.filter.social {
  display: none;
}

.filter.profile {
  display: none;
}

.filter.tracking {
  display: none;
}

.filter.settings {
  display: none;
}

.filter.notification {
  display: none;
}

.filter.dashboard {
  display: none;
}

.filter.onboard {
  display: none;
}

.carousel-gallery.catalog {
  display: none;
}

.carousel-control.left {
  background-image: none;
}

.carousel-control.right {
  background-image: none;
}

.carousel-cell {
  width: 55%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-cell img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  opacity: 0.7;
  transform: scale(0.85);
  filter: blur(5px);
  transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}

.carousel-cell.is-selected img {
  opacity: 1;
  transform: scale(1);
  filter: none;
}

@media screen and (min-width: 768px) {
  .carousel-cell {
    height: 400px;
  }
}
@media screen and (min-width: 960px) {
  .carousel-cell {
    width: 40%;
  }
}
.flickity-prev-next-button {
  width: 60px;
  height: 60px;
  background: transparent;
  opacity: 0.6;
}

.flickity-prev-next-button:hover {
  background: transparent;
  opacity: 1;
}

.flickity-prev-next-button .arrow {
  fill: white;
}

.flickity-prev-next-button.no-svg {
  color: white;
}

.flickity-prev-next-button.previous {
  left: 0;
  display: none;
}

.flickity-prev-next-button.next {
  right: 0;
  display: none;
}

.flickity-prev-next-button:disabled {
  display: none;
}

#carousel2.catalogadd {
  visibility: visible;
  height: 400px !important;
}

#carousel3.detailadd {
  visibility: visible;
  height: 400px !important;
}

#carousel4.chatadd {
  visibility: visible;
  height: 400px !important;
}

#carousel5.articleadd {
  visibility: visible;
  height: 400px !important;
}

#carousel6.reviewsadd {
  visibility: visible;
  height: 400px !important;
}

#carousel7.contactusadd {
  visibility: visible;
  height: 400px !important;
}

#carousel8.aboutusadd {
  visibility: visible;
  height: 400px !important;
}

#carousel9.navigationadd {
  visibility: visible;
  height: 400px !important;
}

#carousel10.erroradd {
  visibility: visible;
  height: 400px !important;
}

#carousel11.transactionadd {
  visibility: visible;
  height: 400px !important;
}

#carousel12.bookmarksadd {
  visibility: visible;
  height: 400px !important;
}

#carousel13.historyadd {
  visibility: visible;
  height: 400px !important;
}

#carousel14.socialadd {
  visibility: visible;
  height: 400px !important;
}

#carousel15.profileadd {
  visibility: visible;
  height: 400px !important;
}

#carousel16.trackingadd {
  visibility: visible;
  height: 400px !important;
}

#carousel17.settingsadd {
  visibility: visible;
  height: 400px !important;
}

#carousel18.notificationadd {
  visibility: visible;
  height: 400px !important;
}

#carousel19.dashboardadd {
  visibility: visible;
  height: 400px !important;
}

#carousel20.onboardadd {
  visibility: visible;
  height: 400px !important;
}

#carousel2 {
  visibility: hidden;
  height: 0px !important;
}

#carousel3 {
  visibility: hidden;
  height: 0px !important;
}

#carousel4 {
  visibility: hidden;
  height: 0px !important;
}

#carousel5 {
  visibility: hidden;
  height: 0px !important;
}

#carousel6 {
  visibility: hidden;
  height: 0px !important;
}

#carousel7 {
  visibility: hidden;
  height: 0px !important;
}

#carousel8 {
  visibility: hidden;
  height: 0px !important;
}

#carousel9 {
  visibility: hidden;
  height: 0px !important;
}

#carousel10 {
  visibility: hidden;
  height: 0px !important;
}

#carousel11 {
  visibility: hidden;
  height: 0 !important;
}

#carousel12 {
  visibility: hidden;
  height: 0px !important;
}

#carousel13 {
  visibility: hidden;
  height: 0px !important;
}

#carousel14 {
  visibility: hidden;
  height: 0px !important;
}

#carousel15 {
  visibility: hidden;
  height: 0 !important;
}

#carousel16 {
  visibility: hidden;
  height: 0px !important;
}

#carousel17 {
  visibility: hidden;
  height: 0px !important;
}

#carousel18 {
  visibility: hidden;
  height: 0 !important;
}

#carousel19 {
  visibility: hidden;
  height: 0 !important;
}

#carousel20 {
  visibility: hidden;
  height: 0 !important;
}

.filter.error {
  display: none;
}

.btn-default:hover {
  color: #fff;
  background-color: #5b5b68;
  border-color: #5b5b68;
}

.btn-default:active {
  color: #fff;
  background-color: #5b5b68;
  border-color: #5b5b68;
}

.btn-default:active:focus {
  color: #fff;
  background-color: #5b5b68;
  border-color: #5b5b68;
}

.btn-default.focus,
.btn-default:focus {
  color: #fff;
  background-color: #5b5b68;
  border-color: #5b5b68;
}

*:focus {
  outline: none !important;
}

.unleash-power {
  margin-top: 0px;
  padding-bottom: 20px;
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
  font-weight: 700;
  font-size: 33px;
  color: #fff;
  letter-spacing: 0.1px;
  text-align: center;
  line-height: 44px;
}

.unleash-power-p {
  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
  letter-spacing: 0.1px;
  text-align: center;
  line-height: 26px;
  max-width: 890px;
  margin: 0 auto;
}

.screen-filters {
  background: #252532;
  padding-bottom: 100px;
}
@media screen and (min-width: 375px) and (max-width: 424px) {
  .screen-filters {
    padding-bottom: 20px !important;
  }
}
@media screen and (min-width: 425px) and (max-width: 768px) {
  .screen-filters {
    padding-bottom: 60px !important;
  }
}

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100% !important;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

draggable .flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}

.flickity-button {
  position: absolute;
  background: rgba(255, 255, 255, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}

.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: absolute;
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous {
  left: 10px;
}

.flickity-prev-next-button.next {
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

button.flickity-prev-next-button.next svg {
  display: none;
}

button.flickity-prev-next-button.previous svg {
  display: none;
}

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
  display: none;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

@media (max-width: 991px) {
  .img-gallery {
    display: none;
  }
  .img-gallery-car {
    display: block;
  }
  .filter-gallery-area {
    display: none;
  }
  .carousel-res-view {
    display: block;
  }
  .unleash-power {
    padding: 0px 20px 20px;
    line-height: 30px;
    font-size: 28px;
  }
  .unleash-power-p {
    padding: 12px;
  }
}
@media screen and (max-width: 479px) and (min-width: 448px) {
  .carousel-button {
    font-size: 14px;
    margin-right: 2px;
  }
  .screen-filters {
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 447px) and (min-width: 320px) {
  .carousel-button {
    font-size: 14px;
    margin-right: 1px;
  }
  .screen-filters {
    padding-bottom: 0px;
  }
}
@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-next {
    margin-right: -30px;
  }
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .icon-prev {
    margin-left: -30px;
  }
}
.filter-modal .modal-dialog {
  width: 990px;
}

.filter-modal .modal-dialog .modal-content {
  background: #252532;
}

.filter-modal .modal-title {
  color: #fff;
}

.filter-modal .modal-header {
  border: none;
}

.filter-modal .modal-footer {
  border: none;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: hidden;
}

.mfp-counter {
  display: none;
}

.mfp-arrow-left {
  left: 30%;
  background-image: url("//cdn.syncfusion.com/content/images/LandingPages/xamarinuikit/left-arrow-button.png") !important;
  width: 48px;
  height: 48px;
  background-size: cover !important;
}

.mfp-arrow-right {
  right: 30%;
  background-image: url("//cdn.syncfusion.com/content/images/LandingPages/xamarinuikit/right-arrow-button.png") !important;
  width: 48px;
  height: 48px;
  background-size: cover !important;
}

.mfp-arrow:before {
  opacity: 0.7;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  border: medium inset transparent;
}

img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 0px 0 40px;
  margin: 0 auto;
}

.mfp-figure figure {
  margin: 0;
  width: 400px;
  margin-top: 64px;
  padding: 0px 40px 40px 40px;
  background: #252532;
  border-radius: 0px 0px 8px 8px;
  max-height: 640px !important;
  overflow-x: hidden;
}

.mfp-figure figure::-webkit-scrollbar-track {
  background: rgba(255, 0, 0, 0);
  border-radius: 10px;
}

.mfp-figure figure::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.mfp-figure figure::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #3d3d44;
  border: 3px solid #232330;
}

.mfp-figure figure::-webkit-scrollbar-thumb:hover {
  background-color: #585863;
}

.mfp-figure figure::-webkit-scrollbar-thumb:active {
  background-color: #585863;
}

.mfp-bottom-bar {
  margin-top: 8px;
  position: absolute;
  border-radius: 8px 8px 0px 0px;
  bottom: 100%;
  top: 0%;
  height: 56px;
  background: #252532;
  padding: 20px;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  font-size: 18px;
  text-align: center;
  padding-right: 0px;
}

.mfp-figure figure img {
  margin: 0;
  max-height: 1200px !important;
  overflow: scroll;
  width: 100%;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.26);
  background: #252532;
  padding-bottom: 0px;
}

@media screen and (max-width: 447px) and (min-width: 320px) {
  .kit-res {
    margin-top: 40px;
  }
}
.filter-height {
  height: 8200px;
}

@media screen and (max-width: 1199px) and (min-width: 992px) {
  .filter-height {
    height: 6200px;
  }
}
.back-to-top {
  position: fixed;
  width: 3.71428571em;
  height: 3.71428571em;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  right: 1.85714286em;
  bottom: 8.714286em;
  padding-top: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.04);
  z-index: 99;
  border: 1px solid #ececec;
  transition: 0.2s ease-out;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.3s ease;
  background-color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.image-overlay-bg:hover .overlay {
  opacity: 1;
}

@media (min-width: 768px) {
  .mauiUIKit-banner-section .mauiUIKit-header .banner-buttons #banner-vscode {
    margin-left: 18px;
  }
  .ui-block-section .buttons #visual-studio-demo-link {
    margin-right: 15px;
  }
}
.btn-text-align-center {
  position: relative;
  top: 1.1px;
}

@media (max-width: 767px) {
  #visual-studio-demo-link {
    margin-bottom: 25px;
  }
}/*# sourceMappingURL=MauiUIKit.css.map */