/* ============================================================
   STYLES — Main Entry Point
   Imports all modular CSS files in order.
   ============================================================ */
@import './tokens.css';
@import './base.css';
/* @import './footer.css'; */
@import './responsive.css';


/* navbar css */
.navbar {
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* links spacing image jaisa */
.nav-link {
   font-family: poppins, sans-serif;
   font-weight: 500;
   font-size: 15px;
   color: #111827 !important;
   padding: 8px 16px !important;
}

/* button same as before */
.navbar .btn-primary {
   background-color: var(--primary) !important;
   border-radius: 10px;
   font-size: 15px;
   border: none;
   font-weight: 400;
}

/* Bootstrap default dropdown arrow remove */
.dropdown-toggle::after {
   display: none !important;
}

.nav-link.dropdown-toggle {
   display: inline-flex;
   align-items: center;
   gap: 7px;
}

.dropdown-menu {
   padding: 7px 9px;
   border: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-item {
   font-size: 14px;
   font-weight: 500;
   padding: 5px;
}

/* hero part css */
/* ============================================================
   HERO SECTION – FINAL RESPONSIVE CSS
   ============================================================ */

.hero-section {
   background: var(--hero-gradient);
}

/* Badge */
.section-badge {
   font-family: var(--font-body);
   font-size: 16px;
   font-weight: 600;
   letter-spacing: 1.2px;
   color: var(--primary);
   text-transform: uppercase;
}

/* Heading */
.hero-heading {
   font-family: var(--font-heading);
   font-size: clamp(32px, 5vw, 68px);
   font-weight: 700;
   line-height: 1.2;
   color: var(--dark-text);
}

/* Description */
.hero-desc {
   font-family: poppins, sans-serif;
   font-size: 17px;
   font-weight: 500;
   line-height: 1.6;
   color: var(--gray);
}

/* Hero image */
.hero-diagram {
   max-width: 100%;
}

@media (max-width: 661px) {

   .btn-odoo-1,
   .btn-odoo-2 {
      width: 100%;
      justify-content: center;
   }
}

/* Beech mein 'and' add kiya gaya hai aur brackets balance kiye hain */
@media (min-width: 661px) and (max-width: 991px) {
   .hero-buttons {
      display: flex;
      /* Ensure flexbox is active */
      justify-content: center;
   }

   .hero-diagram {
      width: 600px;
   }

   .odoo-dia {
      display: flex;
      justify-content: center;
      ;
   }
}

/* ============================================================
   STATS BAR
   ============================================================ */

.stats-bar {
   margin-top: 56px;
}

.stat-item {
   text-align: center;
}

.stat-icon {
   width: 30px;
   height: 30px;
   margin-bottom: 6px;
}

.stat-number {
   font-size: clamp(24px, 4vw, 38px);
   font-weight: 700;
   color: var(--dark-text);
   line-height: 1.2;
}

.stat-label {
   font-size: 16px;
   color: var(--gray);
}

/* ============================================================
   MOBILE FIXES
   ============================================================ */
@media (max-width: 768px) {

   /* Hero content center */
   .hero-content {
      text-align: center;
      padding-top: 0 !important;
   }

   .hero-heading {
      line-height: 1.25;
   }

   .hero-desc {
      font-size: 16px;
      margin-bottom: 28px;
   }

   /* Buttons full width */
   .hero-section .btn {
      width: 100%;
      justify-content: center;
   }

   /* Hero image */
   .hero-diagram {
      max-width: 90%;
      margin: 0 auto;
   }

   /* Stats bar layout */
   .stats-bar {
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
   }

   .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
   }

   .stat-icon {
      width: 26px;
      height: 26px;
   }

   .stat-number {
      font-size: 26px;
   }

   .stat-label {
      font-size: 14px;
      text-align: center;
   }
}


/* what is odoo css */

/* What is Odoo - Custom styles */
.odoo-team-img {
   height: 380px;
   object-fit: cover;
   width: 100%;
}

.odoo-desc {
   font-family: var(--font-body);
   font-size: 16px;
   line-height: 1.8;
   color: var(--dark-text);
}

.check-icon {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
}

/* Button responsive logic Bootstrap class se bhi ho sakta hai (w-100), 
   lekin yahan thoda refine kar rahe hain */
@media (min-width: 768px) {
   .btn-primary.w-md-auto {
      width: auto !important;
      min-width: 250px;
   }
}

/* why choose css */

/* Why Choose Us - Minimal Style */
.why-choose {
   background: var(--light-bg);

}

.arc-deco {
   position: absolute;
   left: 0;
   top: 0;
   height: 320px;
   pointer-events: none;
   opacity: 0.6;
}

.why-card {
   transition: all 0.3s ease;
   border: 1.5px solid var(--border) !important;
   text-align: center;
}

.why-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
   border-color: var(--primary) !important;
   /* Optional: hover pe border color change */
}

.why-icon {
   width: 48px;
   height: 48px;
   margin: 0 auto;
   /* 🔥 icon center */
   display: block;

}

.section-about-label {
   color: #714B67 !important;
}

.why-title {
   color: #017E84;
   font-weight: 500;
   font-size: 18px;
}

.why-desc {
   font-size: 14px;
   line-height: 1.6;
   color: var(--dark-text);
   max-width: 260px;
   /* 🔥 text narrow like image */
   margin: 0 auto;
}

/* services css */

.our-services {
   background: #1a1a1a;
   /* Bootstrap ke default font ko override karne ke liye */
   font-family: poppins, sans-serif !important;
}

/* Section Text Styling */
.section-label-center {
   font-family: var(--font-body), sans-serif !important;
   /* Font Fix */
   color: white;
   font-size: 16px;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-weight: 600;
}

.section-heading-center {
   /* Heading ke liye heading font */
   font-family: var(--font-heading), sans-serif !important;
   color: #fff;
   font-size: 49px;
   font-weight: 700;
}

.teal-text {
   font-family: var(--font-heading), sans-serif !important;
   color: #017E84;
   /* text-decoration: underline; */
}

.section-subtitle {
   font-family: var(--font-body), sans-serif !important;
   color: #ccc;
   max-width: 600px;
   margin: 0 auto;
   font-size: 16px;
}

/* Card Styling */
.service-card {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   height: 100%;
   transition: all 0.3s ease;
}

.service-card:hover {
   background: rgba(255, 255, 255, 0.07);
   border-color: var(--primary);
   /* Hover par primary color ki border */
}

.service-text h3 {
   /* Card Title ke liye font */
   font-family: poppins, sans-serif !important;
   font-size: 20px;
   font-weight: 600;
   /* Medium-Bold look */
   color: #fff;
   margin-bottom: 5px;
}

.service-text p {
   font-family: var(--font-body), sans-serif !important;
   font-size: 14px;
   color: #aaa;
   line-height: 1.5;
   margin: 0;
}

/* Icon Box */
.service-icon-wrap {
   background: #333;
   padding: 12px;
   border-radius: 8px;
   flex-shrink: 0;
}

.service-icon-wrap img {
   width: 22px;
   height: 22px;
   filter: brightness(0) invert(1);
   /* 🔥 dark bg pe white icon */
}

/* approach css */

.approach-section {
   background: var(--white);
}

/* Connector line hata di gayi hai jaisa aapne pehle kaha tha */

.approach-img {
   height: 230px;
   width: 100%;
   object-fit: cover;
   border-radius: 12px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   margin-bottom: 20px;
}

/* Steps ki Heading - Ab normal font hai */
.approach-step-title {
   /* "sans-serif" use karne se font ekdum clean aur normal dikhega */
   font-family: poppins, sans-serif !important;
   /* Poppins ko priority dene ke liye */
   font-size: 18px;
   font-weight: 600;
   color: #714B67;
   margin-bottom: 12px;
}

.approach-step-desc {
   font-family: poppins, sans-serif !important;
   /* Poppins ko priority dene ke liye */
   font-size: 15px;
   line-height: 1.6;
   color: var(--gray);
}

.section-subtitle-dark {
   font-size: 19px;
}

/* Mobile responsive height */
@media (max-width: 991px) {
   .approach-img {
      height: 200px;
   }
}

/* industries css */

/* INDUSTRIES WE SERVE - Poppins Font Update */
.industries-section {
   background: var(--industries-bg);
}

.industry-card {
   background: var(--white);
   border-radius: 12px;
   overflow: hidden;
   transition: all 0.3s ease;
}

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

.industry-img {
   width: 100%;
   height: 180px;
   object-fit: cover;
}

.industry-body {
   position: relative;
   padding: 20px;
}

.industry-corner-deco {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 70px;
   opacity: 0.5;
   pointer-events: none;
}

/* Poppins Font Styling */
.industry-title {
   font-family: 'Poppins', sans-serif !important;
   font-size: 18px;
   font-weight: 600;
   /* Semi-bold look */
   color: var(--primary);
   margin-bottom: 8px;
}

.industry-desc {
   font-family: 'Poppins', sans-serif !important;
   font-size: 14px;
   line-height: 1.6;
   /* Thoda space badha diya readabilty ke liye */
   color: var(--dark-text);
   margin: 0;
   font-weight: 400;
   /* Regular weight */
}

.section-subtitle-dark {

   font-size: 18px;
}


/* why partner css */

.why-partner {
   background: #111;
   /* Dark Background */
   position: relative;
   overflow: hidden;
}

/* Background dots pattern */
.why-partner::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
   background-size: 30px 30px;
   pointer-events: none;
}

.partner-subtitle {
   font-family: 'Poppins', sans-serif !important;
   font-size: 18px;
   max-width: 600px;
   margin: 10px auto 0;
}

/* Number Circle */
.partner-num {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   background: #714B67;
   /* Odoo Purple Shade */
   color: #fff;
   font-family: 'Poppins', sans-serif !important;
   font-size: 14px;
   font-weight: 700;
   border-radius: 50%;
   z-index: 2;
}

/* Vertical Line */
.partner-vline {
   width: 2px;
   height: 60px;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
   margin-top: -5px;
   /* Circle ke thoda upar overlap karne ke liye */
}

/* Text Styling */
.partner-text h3 {
   font-family: 'Poppins', sans-serif !important;
   font-size: 18px;
   font-weight: 600;
   color: #fff;
   margin-bottom: 8px;
}

.partner-text p {
   font-family: 'Poppins', sans-serif !important;
   font-size: 14px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.7);
   margin: 0;
}

/* Hover effect on items */
.partner-item:hover .partner-num {
   background: var(--primary);
   /* Hover par color change */
   transform: scale(1.1);
   transition: 0.3s ease;
}


/* case studies css */

/* ============================================================
   CASE STUDIES / WHAT MAKES US DIFFERENT (FINAL)
   ============================================================ */

.case-studies-section {
   background: var(--case-studies-bg);
   padding: var(--section-pad) 0;
}

.case-studies-section .section-heading-center {
   color: var(--dark-text);
   margin-top: 8px;
}

/* ===============================
   CAROUSEL LAYOUT
   =============================== */

.carousel-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   gap: 16px;
   margin-top: 40px;
}

.carousel-viewport {
   overflow: hidden;
   flex: 1;
   width: 100%;
   touch-action: pan-y;
}

.carousel-track {
   display: flex;
   gap: 32px;
   transition: transform 0.4s ease;
}

/* ===============================
   CASE CARD (IMAGE LIKE)
   =============================== */

.case-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 26px 24px;
   /* 🔥 compact padding */
   display: flex;
   flex-direction: column;
   gap: 14px;
   /* 🔥 tight spacing */
   box-shadow: var(--shadow-card);
   flex: 0 0 auto;
   min-width: 0;
}

/* HEADER */
.case-card-header {
   display: flex;
   align-items: center;
   gap: 12px;
}

.case-avatar {
   width: 44px;
   height: 44px;
   background: var(--primary);
   color: var(--white);
   font-family: var(--font-body);
   font-size: 18px;
   font-weight: 700;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.case-company-name {
   font-family: var(--font-body);
   font-size: 16px;
   font-weight: 600;
   color: var(--dark-text);
}

.case-company-type {
   font-family: var(--font-body);
   font-size: 13px;
   font-weight: 400;
   color: var(--gray);
   margin-top: 2px;
}

/* DIVIDER (THIN & TIGHT) */
.case-divider {
   border: none;
   border-top: 1px solid #EAE8EE;
   margin: 6px 0;
}

/* SECTIONS */
.case-section-label {
   font-family: var(--font-body);
   font-size: 14px;
   font-weight: 500;
   text-transform: uppercase;
   color: var(--primary);
   margin-bottom: 4px;
}

.case-section-text {
   font-family: var(--font-body);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   margin-bottom: 4px;
   color: var(--gray);
}

/* RESULTS */
.case-results {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.case-result-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: var(--font-body);
   font-size: 14px;
   font-weight: 400;
   color: var(--dark-text);
}

.result-icon {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
}

/* ===============================
   ARROWS
   =============================== */

.carousel-arrow {
   background: var(--primary);
   border: 1px solid var(--border);
   border-radius: 50%;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   flex-shrink: 0;
   transition: transform 0.2s ease;
   box-shadow: var(--shadow-btn);
}

.carousel-arrow:hover {
   transform: scale(1.05);
}

.carousel-arrow img {
   width: 10px;
   height: 16px;
   object-fit: contain;
}

/* CTA */
.carousel-cta {
   display: flex;
   justify-content: center;
   margin-top: 48px;
}

/* ===============================
   MOBILE SAFE
   =============================== */
@media (max-width: 768px) {
   .carousel-arrow {
      display: none !important;
   }

   .carousel-wrapper {
      gap: 0;
   }

   .carousel-track {
      gap: 0;
   }

   .case-card {
      width: 100% !important;
      flex: 0 0 100%;
      padding: 22px 20px;
   }
}


/* testimonials css */

/* ============================================================
   TESTIMONIALS – IMAGE MATCHED
   ============================================================ */

.testimonials-section {
   background: var(--light-bg);
   padding: var(--section-pad) 0;
}

.testimonial-wrap {
   height: 100%;
   display: flex;
   flex-direction: column;
}

/* MAIN CARD */
.testimonial-card {
   background: var(--cta-gradient);
   border-radius: 14px;
   padding: 32px 30px 42px;
   display: flex;
   flex-direction: column;
   gap: 20px;
   position: relative;
   flex-grow: 1;
   /* Border hatane ke liye agar koi default aa raha ho */
   border: none;
}

/* SPEECH BUBBLE ARROW (The "Cut" look) */
.testimonial-card::after {
   content: '';
   position: absolute;
   bottom: -23px;
   /* Thoda neeche push karne ke liye */
   left: 36px;
   width: 25px;
   height: 25px;
   background: inherit;
   /* Yeh card ka gradient color automatically pick kar lega */

   /* Yeh property triangle ko curved aur sharp look degi */
   clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

   /* Agar aapko thoda sa 'curved' effect chahiye toh niche wala use karein: */
   /* clip-path: path('M 0 0 L 25 0 C 20 15 12 25 0 25 Z'); */
}

/* AUTHOR SECTION FIX */
.testimonial-author {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 10px 0 0;
   /* Padding thodi kam ki hai alignment ke liye */
   margin-top: 15px;
   margin-left: 0;
   /* Pehle wala negative margin hata diya taaki layout clean rahe */
}

/* STAR ICON */
.testimonial-star {
   width: 34px;
   height: 34px;
}

/* TEXT */
.testimonial-text {
   font-family: poppins, sans-serif;
   font-size: 17px;
   line-height: 1.55;
   color: #fff;
   flex-grow: 1;
   /* 🔥 equal height magic */
}



.author-avatar {
   width: 44px;
   height: 44px;
   background: var(--primary);
   color: #fff;
   font-size: 17px;
   font-weight: 600;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* NAME + ROLE */
.author-name {
   font-size: 17px;
   font-weight: 600;
   color: var(--dark-text);
}

.author-role {
   font-size: 15px;
   color: var(--gray);
}



/* cta css */

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-section {
   padding: 52px 0;
   background: var(--white);
}

.cta-card {
   background: var(--cta-gradient);
   border-radius: 24px;
   padding: 80px 48px;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.cta-heading {
   font-family: poppins, sans-serif;
   font-size: 36px;
   font-weight: 600;
   line-height: 42px;
   color: var(--white);
   margin-bottom: 19px;
}

.cta-desc {
   font-family: var(--font-body);
   font-size: 18px;
   font-weight: 400;
   line-height: 26px;
   color: rgba(255, 255, 255, 0.85);
   margin-bottom: 40px;
}

.cta-buttons {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   flex-wrap: wrap;
}

.first-btn {
   display: flex;
   align-items: center;
   gap: 5px;
}



/* faq css */

.faq-accordion .accordion-item {
   border: none;
   border-radius: 10px;
   background: #f5f6f8;
   margin-bottom: 16px;
}

.faq-accordion .accordion-button {
   background: #EAE8EE;
   border-radius: 10px;
   padding: 22px 22px;
   font-size: 15px;
   font-weight: 500;
   color: #111827;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.faq-accordion .accordion-button::after {
   background-size: 14px;
}

.faq-accordion .accordion-button:not(.collapsed) {
   box-shadow: none;
   background: #f5f6f8;
}

.faq-accordion .accordion-body {
   padding: 0 22px 18px;
   font-size: 14px;
   line-height: 22px;
   color: #6b7280;
}

.faq-accordion .accordion-button:focus {
   box-shadow: none;
}


/* footer css */

.site-footer {
   background: var(--dark-section);
}

.footer-heading {
   font-size: 20px;
   font-weight: 600;
   color: #fff;
   margin-bottom: 20px;
}

.footer-links {
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.footer-links a,
.footer-links span {
   font-size: 16px;
   color: #d1d5dc;
   line-height: 1.5;
   transition: color 0.2s;
}

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

.footer-contact-icon {
   width: 22px;
   height: 22px;
   flex-shrink: 0;
   margin-top: 2px;
}

.footer-social {
   height: 50px;
}

.footer-copy,
.footer-legal {
   font-size: 16px;
   color: #d1d5dc;
}

.footer-legal:hover {
   color: #fff;
}

@media (max-width: 768px) {

   /* Arrows ko hide karne ke bajaye unhe bottom ya side me settle karein */
   .carousel-arrow {
      display: flex !important;
      /* Inhe wapas dikhayen */
      width: 36px;
      height: 36px;
      position: absolute;
      z-index: 10;
      top: 50%;
      /* transform: translateY(-50%); */
   }

   .carousel-prev {
      left: -10px;
   }

   .carousel-next {
      right: -10px;
   }

   .carousel-wrapper {
      gap: 0;
      padding: 0 10px;
      /* Thoda space side me */
   }

   .carousel-track {
      gap: 20px;
      /* Mobile me cards ke beech thoda gap */
   }

   .case-card {
      width: 100% !important;
      flex: 0 0 100%;
      padding: 22px 20px;
   }
}

@media (min-width: 768px) {
   .section-label-center {
      margin-bottom: -10px;
   }

   .section-heading-center {
      margin-bottom: 0;
   }


}

.custom-svg-underline-1 {
   position: relative;
   display: inline-block;
}

.custom-svg-underline-1::after {
   content: "";
   position: absolute;
   left: 4px;
   bottom: -3px;
   /* Isse aap underline ki height adjust kar sakte hain */
   width: 100%;
   height: 12px;
   /* SVG ki height ke hisaab se rakhein */
   background-image: url('../images/underline-1.svg');
   /* Aapka path */
   background-repeat: no-repeat;
   background-size: 100% 100%;
   z-index: 0;
}
.custom-svg-underline-2::after {
   background-image: url('../images/underline-2.svg');
   bottom: -3px !important;

}

.underline-us::after {
   background-image: url('../images/underline-3.svg');
   bottom: -3px !important;

}

.custom-svg-underline-3::after {
   background-image: url('../images/underline-4.svg');
   bottom: -3px !important;

}
.custom-svg-underline-4::after {
   background-image: url('../images/underline-5.svg');
   bottom: -3px !important;

}
.custom-svg-underline-5::after {
   background-image: url('../images/underline-6.svg');
   bottom: -3px !important;

}
.custom-svg-underline-6::after {
   background-image: url('../images/underline-7.svg');
   bottom: -3px !important;

}
.custom-svg-underline-7::after {
   background-image: url('../images/underline-8.svg');
   bottom: -3px !important;

}
.custom-svg-underline-8::after {
   background-image: url('../images/underline-9.svg');
   bottom: -3px !important;

}
.custom-svg-underline-9::after {
   background-image: url('../images/underline-10.svg');
   bottom: -3px !important;

}
.underline-us,
.custom-svg-underline-3,
.custom-svg-underline-4,
.custom-svg-underline-5,
.custom-svg-underline-6,
.custom-svg-underline-7,
.custom-svg-underline-8,
.custom-svg-underline-9 {
      line-height: 61px!important;
}