/* Footer */
.gradient-background {
   background: rgb(235, 232, 232) !important;
}

.border-oneoffice {
   border-color: #512888 !important;
}

/* landing */
/* hero section */
.hero-section-product {
   /* background: rgba(0, 0, 0, 0.5); */
   background: radial-gradient(ellipse at center,
         rgba(0, 0, 0, 0.6) 0%,
         rgba(0, 0, 0, 0.3) 40%,
         rgba(0, 0, 0, 0.0) 100%);
   position: relative;
   overflow: hidden;
}

#hero-image-product {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -1;
}

.hero-content-product-wrapper {
   padding-top: 200px;
   padding-bottom: 200px;
}



.oneoffice-bg-image {
   position: relative;
   background-image: url('/images/block/oneoffice/oneoffice-hero2.webp');
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 90vh;

   display: flex;
   align-items: center;
   justify-content: flex-start;
   z-index: 1;
}

.oneoffice-bg-image::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(44, 40, 40, 0.4);
   z-index: 0;
}

.oneoffice-bg-image .container {
   position: relative;
   z-index: 1;
}

.oneoffice-color {
   color: #512888 !important;
}

.text-oneoffice-primary {
   color: #6d0bec !important;
}

.bg-oneoffice {
   background-color: #512888;
}

.oneoffice-hero-title {
   font-size: 3rem;
   font-weight: 700;
   line-height: 1.1;
   margin-bottom: 1.5rem;
   color: #fff;
}

.oneoffice-hero-mb-title {
   font-size: 2rem;
   font-weight: 500;
   line-height: 1.5;
   margin-bottom: 1rem;
   color: #020202;
}

.oneoffice-hero-subtitle {
   font-size: 1.25rem;
   color: #f5f5f5;
   line-height: 1.6;
   margin-bottom: 2rem;
   font-weight: 500;
}

/* Left-right section */
.tools-image-wrapper {
   width: 100%;
   max-width: 500px;
   position: relative;
   aspect-ratio: 1/1;
}

.tools-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
}

.right-small-card,
.left-small-card {
   position: absolute;
   top: 15%;
   max-width: 250px;
}

.right-small-card {
   right: -15%;
}

.left-small-card {
   left: -15%;
}

.learn-more-link {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   text-decoration: none;
   color: #512888;
   font-weight: 600;
   transition: transform 0.3s ease, color 0.3s ease;
}

.learn-more-link i {
   transition: transform 0.3s ease;
}

.learn-more-link:hover i {
   transform: rotate(-45deg);
}

.oneoffice-icon-img {
   width: 50px;
   height: 50px;
}

.oneoffice-icon-img img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

/* Responsive for small screens */
@media (max-width: 991px) {
   .oneoffice-icon-img {
      width: 40px;
      height: 40px;
   }
}

@media (max-width: 575px) {
   .oneoffice-icon-img {
      width: 30px;
      height: 30px;
   }
}

/* Key Features */
.feature-card {
   transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.feature-card:hover {
   transform: translateY(-15px);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.feature-card-img {
   transition: transform 1s ease;
   filter: brightness(0) saturate(100%) invert(21%) sepia(77%) saturate(5000%) hue-rotate(252deg) brightness(95%) contrast(95%);
}

.feature-card-img:hover {
   transform: rotate(360deg);
}


.selected-plan {
   border: 3px solid #512888;
   position: relative;
}

.recommended-badge {
   background-color: #512888;
   color: #fff;
   padding: 6px 14px;
   font-size: 0.85rem;
   font-weight: bold;
   border-radius: 20px;
   position: absolute;
   top: -15px;
   left: 50%;
   transform: translateX(-50%);
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}


/* Stories */
.overlay {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: rgba(27, 27, 27, 0.5);
}

.slider-section-new {
   position: relative;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 550px;
   transition: background-image 0.1s ease-in-out;
}

.slider-section-new .overlay {
   position: absolute;
   inset: 0;
   min-height: 550px;
   background: rgba(0, 0, 0, 0.6);
   z-index: 1;
}

.slider-section-new .z-index-2 {
   position: relative;
   z-index: 2;
}

.arrow-container .arrow {
   background-color: white;
   color: black;
   font-size: 24px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   line-height: 36px;
   text-align: center;
   cursor: pointer;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
   transition: background 0.5s;
   margin-right: 10px;
}

.arrow-container .arrow:last-child {
   margin-right: 0;
}

.arrow:hover {
   background: #ddd;
}

.see-all-link {
   font-weight: 500;
   text-decoration: none;
}

.transition-slide {
   transition: transform 0.5s ease, opacity 0.5s ease;
   display: inline-block;
}

.slide-left {
   transform: translateX(50px);
   opacity: 0;
}

.slide-right {
   transform: translateX(-50px);
   opacity: 0;
}



/* Sign up Free */
.freeTrail {
   background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   padding: 0 30px;
   aspect-ratio: 16/4;
   display: flex;
   align-items: center;
}

.freeTrail.oneoffice {
   background-image: url('/images/block/oneoffice/free-trail.webp');
}

.freeTrail.crm {
   background-image: url('/images/block/oneoffice/free-trail.webp');
}

.freeTrail.inventory {
   background-image: url('/images/block/oneoffice/free-trail.webp');
}

.freeTrail.accounting {
   background-image: url('/images/block/oneoffice/free-trail.webp');
}

.freeTrail.project {
   background-image: url('/images/block/oneoffice/free-trail.webp');
}

.freeTrail.production {
   background-image: url('/images/block/oneoffice/free-trail.webp');
}

.freeTrailBox {
   max-width: 700px;
   background: rgba(0, 0, 0, 0.6);
   border-radius: 10px;
   padding: 0 30px;
   color: white;
}

.review-card {
  background: white;
  color: black;
  padding: .5rem 2rem;
  border-radius: 8px;
  transition: background 0.3s ease;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px; 
}


.review-display-box {
  height: 300px; 
  
  display: flex;
  justify-content: center; 
  align-items: center;    
}

.center-content {
  display: flex;
  flex-direction: column;
}

.review-list {
  display: flex;
  flex-direction: column;
}

.review-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.review-cards {
  display: flex;
  flex-direction: column;
}

@keyframes infiniteScroll {
   0% {
      transform: translateY(0);
   }

   100% {
      transform: translateY(-50%);
   }
}

.platform-icon {
   width: 30px;
   height: 30px;
   object-fit: contain;
   margin-bottom: 4px;
}

.custom-stars {
   color: #512888;
   font-size: 18px;
   font-family: Arial, sans-serif;
}



/* FAQ */
.faq-answer {
   display: none;
   transition: all 0.3s ease;
   max-width: 100%;
   font-size: 1rem;
}

.faq-answer.show {
   display: block;
}

.faq-question {
   cursor: pointer;
   padding: 0.5rem 0;
   font-size: 1.05rem;
}

.faq-question span {
   transition: transform 0.3s ease;
}

.faq-question.open span {
   transform: rotate(180deg);
}

.faq-item {
   border-bottom: 1px dashed #ccc;
   padding: 0.5rem 0;
}


/* Media for Oneoffice Landing */
@media (max-width: 576px) {
   .faq-answer {
      max-width: 100%;
   }

   .tools-image-wrapper {
      max-width: 280px;
   }

   .right-small-card,
   .left-small-card {
      position: absolute;
      top: auto;
      bottom: -10%;
      max-width: 280px;
   }

   .right-small-card {
      right: 50%;
      transform: translateX(50%);
   }

   .left-small-card {
      left: 50%;
      transform: translateX(-50%);
   }

   .hero-content-product-wrapper {
      padding-top: 50px;
      padding-bottom: 50px;
   }

   .oneoffice-icon-img {
      width: 30px;
      height: 30px;
   }
}

@media (min-width: 577px) and (max-width: 767px) {
   .tools-image-wrapper {
      max-width: 300px;
   }

   .right-small-card,
   .left-small-card {
      position: absolute;
      top: auto;
      bottom: -10%;
      max-width: 300px;
   }

   .right-small-card {
      right: 50%;
      transform: translateX(50%);
   }

   .left-small-card {
      left: 50%;
      transform: translateX(-50%);
   }

   .oneoffice-icon-img {
      width: 35px;
      height: 35px;
   }
}

@media (min-width: 768px) and (max-width: 991px) {

   .right-small-card,
   .left-small-card {
      max-width: 200px;
   }

   .right-small-card {
      right: -10%;
   }

   .left-small-card {
      left: -10%;
   }

   .oneoffice-icon-img {
      width: 40px;
      height: 40px;
   }

}

@media (min-width: 768px) {
   .faq-answer {
      max-width: 700px;
      font-size: 1rem;
   }
}

@media (min-width: 1200px) {
   .faq-answer {
      max-width: 800px;
      font-size: 1.05rem;
   }
}



/* Features Section */
/* CRM */
.crm-hero-title {
   font-size: 3rem;
   font-weight: 500;
   line-height: 1.5;
   margin-bottom: 1.5rem;
   color: #000000;
}

.crm-hero-subtitle {
   font-size: 1.25rem;
   color: #131212;
   line-height: 1.6;
   margin-bottom: 2rem;
   font-weight: 500;
}

.todo-card {
   background: #fff;
   border-radius: 8px;
   padding: 0;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   display: flex;
   transition: transform 0.3s, box-shadow 0.3s;
   overflow: hidden;
}

.todo-card-img-left {
   width: 50%;
   flex-shrink: 0;
}

.todo-card-img-left img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.todo-card-img-left img:hover {
   transform: scale(1.1);
}

.todo-card-content {
   width: 50%;
   padding: 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.todo-card-right {
   background: #fff;
   border-radius: 10px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s, box-shadow 0.3s;
   overflow: hidden;
   display: flex;
   flex-direction: column;
}


.todo-card-right-img-wrapper {
   height: 50%;
   width: 100%;
}

.todo-card-right-img-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.todo-card-right-img-wrapper img:hover {
   transform: scale(1.1);
}

.todo-card-right-content {
   height: 50%;
}

.todo-section .todo-row {
   display: flex;
}

.todo-section .todo-left {
   display: flex;
   flex-direction: column;
}

.todo-section .todo-left>.todo-card {
   flex: 1;
   display: flex;
}

.todo-section .todo-right {
   display: flex;
}

.todo-section .todo-right>.todo-card-right {
   flex: 1;
   display: flex;
   flex-direction: column;
}

.icon-circle {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   border-radius: 15px;
   font-size: 18px;
   flex-shrink: 0;
}


.text-muted-custom {
   color: #6b7280;
}

.card-hover {
   transition: all 0.3s ease;
   border: 1px solid #e5e7eb;
}

.card-hover:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.icon-circle2 {
   width: 5rem;
   height: 5rem;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1rem;
}

.icon-circle3 {
   width: 4rem;
   height: 4rem;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 1rem 1rem 0;
}

.icon-circle-oneoffice {
   background-color: rgba(81, 40, 136, 0.1);
   color: #512888;
}

.process-step {
   transition: all 0.3s ease;
}

.process-step:hover .icon-circle2 {
   background-color: rgba(29, 4, 61, 0.1);
}

.bento-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
}

.bento-large {
   grid-column: span 2;
   grid-row: span 2;
}

.bento-wide {
   grid-column: span 2;
}

@media (max-width: 991px) {
   .bento-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .bento-large {
      grid-column: span 2;
      grid-row: span 1;
   }
}

@media (max-width: 575px) {
   .bento-grid {
      grid-template-columns: 1fr;
   }

   .bento-large,
   .bento-wide {
      grid-column: span 1;
   }
}

/* Media for CRM page */
@media (max-width: 576px) {
   .crm-hero-title {
      font-size: 2rem;
   }
}

@media (min-width: 577px) and (max-width: 767px) {
   .crm-hero-title {
      font-size: 2.1rem;
   }
}

@media (min-width: 768px) and (max-width: 991px) {
   .crm-hero-title {
      font-size: 2.2rem;
   }
}

@media (min-width: 992px) and (max-width: 1199px) {
   .crm-hero-title {
      font-size: 2.8rem;
   }
}

@media (min-width: 1200px) and (max-width: 1399px) {
   .crm-hero-title {
      font-size: 3rem;
   }
}

@media (min-width: 1400px) {
   .crm-hero-title {
      font-size: 3.2rem;
   }
}



/* Inventory Page */
.progress {
   height: 8px;
   background-color: #e2e8f0;
}

.icon-circle-sm {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}


.border-left-success {
   border-left: 4px solid #10b981 !important;
}

.border-left-danger {
   border-left: 4px solid #ef4444 !important;
}

.img-cover {
   object-fit: cover;
   width: 100%;
   border-radius: 0.5rem;
}

/* Accounting */
.scrolling-wrapper {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 1rem;
   scroll-behavior: smooth;
}

.card-wrapper {
   flex: 0 0 auto;
   width: 300px;
}

.feature-icon-circle {
   width: 32px;
   height: 32px;
   font-size: 14px;
}


.dashboard-image-container img {
   border-radius: 16px !important;
   transition: transform 0.3s ease;
}

.dashboard-image-container img:hover {
   transform: scale(1.02);
}

.floating-badge {
   position: absolute;
   padding: 6px 12px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 500;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 10;
}

.floating-badge-top {
   top: -16px;
   right: -16px;
}

.floating-badge-bottom {
   bottom: -16px;
   left: -16px;
}

@media (max-width: 991.98px) {
   .floating-badge {
      position: static;
      display: inline-block;
      margin: 8px 4px;
   }
}

/* Production */
.production-hero-title {
   font-size: 3rem;
   font-weight: 700;
   line-height: 1.4;
   margin-bottom: 1.5rem;
   color: #000000;
}

.image-container {
   height: 500px;
   overflow: hidden;
}

@media (max-width: 767px) {
   .image-container {
      height: auto;
   }
}

/* Web App Page Start */
.icon-wrapper {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: .5rem;
   margin-left: auto;
   margin-right: auto;
   background: rgba(81, 40, 136, 0.1);
}

.icon-wrapper i {
   color: var(--one-office) !important;
}

.web-feature-card {
   border: none !important;
}

.media i {
   width: 30px;
   height: 30px;
   font-size: 1.2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--one-office) !important;
}


.bg-gradient-blue-light {
   background: linear-gradient(to bottom, #f0fdf4, #ffffff);
}

.bg-gradient-blue-dark {
   background: linear-gradient(to right, #2d445a, #1b62a5);
}

.text-blue-600 {
   color: #055596;
}

.bg-blue-100 {
   background-color: #dceefc;
}

.text-blue-800 {
   color: #163f65;
}

.bg-blue-500 {
   background-color: #2276c5;
}

.text-blue-200 {
   color: #bbdcf7;
}

.text-blue-100 {
   color: #dce7fc;
}

.text-yellow-400 {
   color: #facc15;
}

.rounded-3xl {
   border-radius: 1.3rem;
}

.shadow-2xl {
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.shadow-xl {
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.badge-custom {
   padding: .5em .75em;
   font-size: 0.875rem;
   font-weight: 600;
}

.card-feature {
   background-color: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: white;
}

.card-feature .text-green-200 {
   color: #bbf7d0;
}

.main-section svg {
   color: inherit;
   stroke: currentColor;
   fill: white;
}

.last-section svg.lucide-star {
   color: inherit;
   stroke: #512888;
   fill: #512888;
   width: 16px;
   height: 16px;
}

.card-feature svg.lucide {
   color: #86c0ef;
   stroke: currentColor;
   fill: none;
   width: 36px;
   height: 36px;
}

.real-time-insights .lucide,
.manage-multiple-stores .lucide,
.in-depth-sales-analytics .lucide,
.monitor-active-staff-sessions .lucide,
.product-catalog-updates .lucide,
.order-history-access .lucide,
.generate-export-reports .lucide,
.manage-promotions-offers .lucide,
.customize-your-brand .lucide {
   color: inherit;
   stroke: currentColor;
   fill: none;
   width: 36px;
   height: 36px;
}

/* Web App Page End */

/* CRM App Page Start */
.crm-feature-card .crm-icon-wrapper {
   width: 60px;
   height: 60px;
   margin: auto;
   background: rgba(81, 40, 136, 0.1);
   border-radius: 10px;
}

/* Add right border except for every 3rd card */
.crm-feature-card i {
   color: var(--one-office) !important;
}

.crm-feature-card:not(:nth-child(3n)) {
   border-right: 1px solid #e0e0e0;
}

/* Add bottom border except for last row (cards 7,8,9) */
.crm-feature-card:not(:nth-child(n+7)) {
   border-bottom: 1px solid #e0e0e0;
}

/* Responsive: 2 columns on tablet, 1 column on mobile */
@media (max-width: 992px) {
   .crm-feature-card .crm-icon-wrapper {
      width: 40px;
      height: 40px;
      font-size: 14px !important;
   }

   .crm-feature-card {
      border-right: none;
      border-bottom: 1px solid #e0e0e0;
   }

   .crm-feature-card:nth-child(3n) {
      border-right: 1px solid #e0e0e0;
   }

   .crm-feature-card:nth-child(2n) {
      border-right: none;
   }

   .crm-feature-card:last-child {
      border-bottom: none;
   }
}

@media (max-width: 576px) {
   .crm-feature-card {
      border-right: none !important;
      border-bottom: 1px solid #e0e0e0;
   }

   .crm-feature-card:last-child {
      border-bottom: none;
   }
}

.collaboration-icon-wrapper {
   width: 40px;
   height: 40px;
   background: rgba(81, 40, 136, 0.1);
   color: var(--one-office);
}

.eco-card {
   background-color: rgba(47, 8, 97, 0.6);
   backdrop-filter: blur(5px);
   border: 1px solid #1F1F1F !important;
}

/* CRM App Page End */

/* Sales Modules */
.marketing-tools-header {
   display: flex;
   align-items: center;
}
/* Sales Modules End */

.bg-feature{
   background-color: #fcf1ff;
}