/* ----------------
-------------------
-------------------
-------------------
    Header CSS 
-------------------
-------------------
-------------------
----------------- */
.oco-header {
  background: #2e1e39;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 9999;
  box-shadow: 0 2px 16px 0 rgba(30,20,60,0.12);
  width: 100%;
  min-height: 56px;
  font-family: 'Inter', 'Open Sans', Arial, sans-serif;
}

.oco-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  position: relative;
}

.oco-logo img {
  height: 56px;
  width: auto;
  display: block;
  border-radius: 8px;
  background: transparent;
  object-fit: contain;
  box-shadow: none;
  max-width: 170px;
  transition: height 0.2s, max-width 0.2s;
}

/* --- NAVIGATION DESKTOP --- */
.oco-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.oco-link {
  color: #fff !important;
  text-decoration: none !important;
  font-size: 1.09rem;
  font-weight: 600;
  padding: 7px 0;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.18s, background 0.18s;
  position: relative;
  display: inline-block;
}

.oco-link:hover,
.oco-link:focus {
  color: #ffc13b !important;
  background: rgba(255,193,59,0.08);
  text-decoration: none !important;
}

/* --- DOWNLOAD BUTTON --- */
.oco-btn.oco-download-btn {
  background: linear-gradient(90deg,#ffc13b,#ffad06 80%);
  color: #232129;
  border-radius: 30px;
  padding: 13px 44px;
  margin-left: 24px;
  font-weight: 700;
  border: none;
  font-size: 1.16rem;
  letter-spacing: 0.03em;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  outline: none;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
  box-shadow: 0 0 18px 6px rgba(255,210,58, 0.19), 0 0 0 0 rgba(255,193,59,0.10);
  animation: oco-glow-breath-final 2.7s cubic-bezier(.4,0,.2,1) infinite alternate;
}

.oco-btn.oco-download-btn:hover,
.oco-btn.oco-download-btn:focus {
  background: linear-gradient(90deg, #ffe666, #ffc13b 85%);
  color: #1e1a2a;
  animation-play-state: paused !important;
  box-shadow: 0 0 40px 14px rgba(255,210,58, 0.33), 0 2px 18px rgba(255,193,59,0.18);
  filter: brightness(1.13);
}

.oco-btn.oco-download-btn:active {
  background: #ffd96c;
  color: #2e1e39;
}

/* --- MENU TOGGLE (MOBILE ONLY) --- */
.oco-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 10px;
  padding: 6px 8px;
  z-index: 12000;
  position: relative;
}

.oco-menu-toggle span {
  width: 25px;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  display: block;
  transition: all 0.2s;
}

/* --- MOBILE STYLES --- */
@media (max-width: 900px) {
  .oco-header-inner {
    max-width: 100vw;
    padding: 0 10px;
  }
  .oco-btn.oco-download-btn {
    margin-left: 8px;
    padding: 9px 18px;
    font-size: 1.01rem;
  }
  .oco-menu-toggle {
    display: flex;
  }
}
@media (min-width: 901px) {
  .oco-menu-toggle {
    display: none !important;
  }
}

@media (max-width: 700px) {
  .oco-nav {
    display: none !important;
  }
  .oco-header-inner {
    padding: 0 6px;
    height: 54px;
  }
  .oco-logo img {
    height: 40px;
    max-width: 105px;
  }
  .oco-btn.oco-download-btn {
    margin-left: 0;
    padding: 7px 15px;
    font-size: 0.97rem;
    min-width: 98px;
    width: auto;
  }
}

/* --- MOBILE DROPDOWN --- */
.oco-mobile-dropdown {
  display: none;
  flex-direction: column;
  background: rgba(46, 30, 57, 0.97);
  position: absolute;
  top: 54px;
  right: 7px;
  left: 7px;
  width: auto;
  min-width: 90vw;
  max-width: 98vw;
  border-radius: 18px;
  box-shadow: 0 8px 24px 0 rgba(0,0,0,0.11), 0 1.5px 8px 0 rgba(60,0,60,0.09);
  z-index: 10000;
  padding: 12px 0 10px 0;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.08);
  animation: oco-slide-down 0.28s cubic-bezier(.6,1.6,.35,.95);
}
.oco-mobile-dropdown.open {
  display: flex;
}

.oco-mobile-dropdown .oco-link {
  display: block;
  padding: 13px 18px 13px 22px;
  border-radius: 10px;
  width: 98%;
  margin: 0 auto 3px auto;
  text-align: left;
  font-size: 1.04rem;
  font-weight: 600;
  color: #fff !important;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s;
  background: none;
  border: none;
  position: relative;
}

.oco-mobile-dropdown .oco-link:active,
.oco-mobile-dropdown .oco-link:hover {
  background: rgba(255, 193, 59, 0.12);
  color: #ffc13b !important;
}

.oco-mobile-dropdown .oco-link:not(:last-child)::after {
  content: "";
  display: block;
  height: 1px;
  width: 72%;
  margin: 8px auto 0 auto;
  background: linear-gradient(90deg,rgba(255,255,255,0.11) 0%,rgba(46,30,57,0.16) 100%);
  border-radius: 1px;
}

/* --- ANIMATIONS --- */
@keyframes oco-glow-breath-final {
  0% {
    box-shadow: 0 0 8px 2px rgba(255,210,58, 0.16), 0 0 0 0 rgba(255,193,59,0.11);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 54px 20px rgba(255,210,58, 0.45), 0 0 24px 8px rgba(255,193,59,0.19);
    filter: brightness(1.11);
  }
  100% {
    box-shadow: 0 0 8px 2px rgba(255,210,58, 0.13), 0 0 0 0 rgba(255,193,59,0.09);
    filter: brightness(1);
  }
}

@keyframes oco-slide-down {
  from { opacity: 0; transform: translateY(-14px) scale(0.96);}
  to   { opacity: 1; transform: translateY(0) scale(1);}
}


/* ----------------
-------------------
-------------------
-------------------
 Section Features 
-------------------
-------------------
-------------------
----------------- */
/* ===== Features Section (Landing) ===== */
.oco-features-section {
  background: linear-gradient(120deg, #f8fafc 0%, #eaf1fb 100%);
  padding: 56px 0 0 0;
  width: 100%;
}
.oco-features-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  min-height: 350px;
  position: relative;
  padding-left: 12px;
  padding-right: 12px;
}
.oco-features-text {
  flex: 1 1 52%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 54%;
}
.oco-features-headline {
  font-size: 3.2rem;
  font-weight: 800;
  color: #181b1f;
  margin-bottom: 24px;
  margin-top: 0;
  line-height: 1.13;
  letter-spacing: -1.5px;
  text-align: left;
  word-break: break-word;
}
.oco-features-subheadline {
  font-size: 1.4rem;
  color: #475063;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.54;
  text-align: left;
  max-width: 540px;
}
.oco-features-visual {
  flex: 1 1 46%;
  min-width: 240px;
  max-width: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oco-features-video {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 16/10;
  height: auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 6px 38px 0 rgba(80,120,200,0.14), 0 2px 6px rgba(60,40,120,0.07);
  border: 2.2px solid #e8f0fb;
  object-fit: cover;
  display: block;
  transition: box-shadow 0.2s;
}
.oco-features-video:hover {
  box-shadow: 0 12px 38px 0 #a9b7ce3a, 0 0 0 1.5px #e5e9f8;
}
/* ==== Marquee ==== */
.oco-features-marquee-outer {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 46px;
  padding-bottom: 18px;
  background: none;
}
.oco-features-marquee {
  background: #fff;
  border-radius: 80px;
  box-shadow: 0 2px 20px 0 #c9d7f333, 0 0 0 1px #e2ebfa33;
  padding: 0;
  width: 93%;
  max-width: 1100px;
  min-width: 220px;
  min-height: 58px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.oco-features-marquee-track {
  display: flex;
  gap: 58px;
  align-items: center;
  font-size: 1.34rem;
  font-weight: 700;
  color: #23262e;
  animation: oco-features-marquee 18s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.oco-features-marquee-track span {
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  border-radius: 40px;
  background: none;
  font-size: 1.17em;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: none;
  opacity: 0.97;
  transition: background 0.18s;
}
.oco-features-marquee-track span b {
  font-weight: 700;
  margin-left: 7px;
  color: #183086;
  background: linear-gradient(90deg, #f77d38 15%, #7035d5 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
@keyframes oco-features-marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* ======= Responsive ======= */
@media (max-width: 1100px) {
  .oco-features-inner { gap: 16px; }
  .oco-features-marquee { width: 98%; }
  .oco-features-video { max-width: 340px; }
}

@media (max-width: 900px) {
  .oco-features-section {
    padding-top: 34px !important;
    padding-bottom: 8px !important;
  }
  .oco-features-inner {
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: flex-start;
    min-height: unset;
    padding: 0 3vw;
  }
  .oco-features-text {
    width: 100%;
    align-items: center;
    text-align: center;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 14px;
  }
  .oco-features-headline,
  .oco-features-subheadline {
    text-align: center;
    max-width: 98vw;
    margin-left: auto;
    margin-right: auto;
  }
  .oco-features-headline { 
    font-size: 2.8rem !important;
    margin-bottom: 18px !important;
    margin-top: 2px !important;
    line-height: 1.22 !important;
    letter-spacing: -1.2px;
    font-weight: 900;
  }
  .oco-features-subheadline { 
    font-size: 1.45rem !important;
    color: #23262e !important;
    margin-bottom: 18px !important;
    line-height: 1.42 !important;
    font-weight: 600 !important;
  }
  .oco-features-visual {
    width: 100%;
    max-width: 99vw;
    justify-content: center;
    margin-bottom: 8px;
    margin-top: 10px;
  }
  .oco-features-video {
    max-width: 96vw;
    min-width: 120px;
    aspect-ratio: 16/10;
  }
  .oco-features-marquee-outer {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    padding-bottom: 8px !important;
  }
  .oco-features-marquee {
    min-height: 38px;
    border-radius: 20px;
    width: 98vw;
    max-width: 99vw;
    min-width: 70vw;
  }
  .oco-features-marquee-track {
    font-size: 1.32rem !important;
    gap: 26px !important;
    animation-duration: 22s !important;
  }
  .oco-features-marquee-track span {
    font-size: 1.16em !important;
    padding: 0 15px !important;
  }
}

@media (max-width: 600px) {
  .oco-features-section { padding: 16px 0 0 0 !important; }
  .oco-features-inner { padding: 0 2vw; gap: 0 !important; }
  .oco-features-headline {
    font-size: 2.25rem !important;
    margin-bottom: 15px !important;
    margin-top: 2px !important;
    line-height: 1.17 !important;
    letter-spacing: -0.7px;
    text-align: center !important;
  }
  .oco-features-subheadline {
    font-size: 1.28rem !important;
    color: #36394d !important;
    margin-bottom: 16px !important;
    line-height: 1.35 !important;
    padding: 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
  }
  .oco-features-visual {
    width: 100%;
    justify-content: center;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    max-width: 100vw;
  }
  .oco-features-video {
    max-width: 99vw;
    min-width: 80px;
    border-radius: 9px;
    aspect-ratio: 16/10;
  }
  .oco-features-marquee-outer {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
  }
  .oco-features-marquee {
    min-height: 28px;
    border-radius: 13px;
    width: 96vw;
    max-width: 99vw;
    min-width: 60vw;
  }
  .oco-features-marquee-track {
    font-size: 1.15rem !important;
    gap: 18px !important;
    animation-duration: 25s !important;
  }
  .oco-features-marquee-track span {
    font-size: 1.07em !important;
    padding: 0 10px !important;
  }
}

/* Ultra-small: iPhone SE, 375px, etc. */
@media (max-width: 430px) {
  .oco-features-section { padding-top: 8px !important; }
  .oco-features-headline { font-size: 1.54rem !important; margin-bottom: 6px !important; }
  .oco-features-subheadline { font-size: 1.08rem !important; margin-bottom: 12px !important; }
  .oco-features-marquee { min-height: 21px; }
}


/* ----------------
-------------------
-------------------
-------------------
 Video Tutorial Section (Landing)
-------------------
-------------------
-------------------
----------------- */

.oco-video-tutorial-section {
  background: #fff;
  padding: 56px 0 40px 0;
  width: 100%;
  border-bottom: 1px solid #eaf1fb;
}

.oco-video-tutorial-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0; /* No extra gap between columns */
  box-sizing: border-box;
}

.oco-video-tutorial-left,
.oco-video-tutorial-right {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Slightly more space for left (text), less for right (video) */
.oco-video-tutorial-left {
  flex: 1 1 62%;
  min-width: 320px;
  max-width: 670px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

.oco-video-tutorial-heading {
  font-size: 2.2rem;
  font-weight: 800;
  color: #21242c;
  margin: 0 0 3px 0;
  font-family: 'Inter', 'Open Sans', Arial, sans-serif;
  line-height: 1.16;
}

.oco-video-tutorial-subheadline {
  color: #6f7787;
  font-size: 1.16rem;
  line-height: 1.7;
  font-weight: 500;
  margin: 0 0 8px 0;
  font-family: 'Inter', 'Open Sans', Arial, sans-serif;
  width: 100%;
  max-width: unset;
  word-break: break-word;
  text-align: justify;
}

.oco-video-tutorial-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
  border-radius: 32px;
  background: linear-gradient(94deg, #b5e2f6 0%, #8ce99a 100%);
  color: #244457;
  font-size: 1.17rem;
  font-weight: 700;
  box-shadow: 0 4px 22px 0 rgba(140,233,154,0.10);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, box-shadow 0.18s, color 0.14s;
  outline: none;
  letter-spacing: 0.01em;
  width: 100%;
  text-align: center;
  margin: 16px 0 0 0;
}

.oco-video-tutorial-btn:hover,
.oco-video-tutorial-btn:focus {
  background: linear-gradient(94deg, #8ce99a 0%, #b5e2f6 100%);
  color: #111e29;
  box-shadow: 0 6px 36px 0 rgba(140,233,154,0.16);
}

.oco-video-tutorial-right {
  flex: 1 1 38%;
  min-width: 270px;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oco-video-tutorial-video-wrapper {
  width: 100%;
  max-width: 550px; /* Increased from 410px to 550px */
  aspect-ratio: 16/9; /* Keeps the correct proportions */
  background: #f3f7fa;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 36px 0 rgba(33, 62, 108, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
}

.oco-video-tutorial-video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  border-radius: 20px;
  background: #e6eef6;
  margin: 0 !important;
  padding: 0 !important;
}

/* Responsive: stack columns, full width button after video on mobile */
@media (max-width: 980px) {
  .oco-video-tutorial-inner {
    flex-direction: column;
    gap: 0;
    padding: 0 2vw;
    align-items: stretch;
  }
  .oco-video-tutorial-left,
  .oco-video-tutorial-right {
    width: 100%;
    max-width: 100%;
    flex: unset;
  }
  .oco-video-tutorial-heading {
    font-size: 1.38rem;
  }
  .oco-video-tutorial-btn {
    font-size: 1.08rem;
    padding: 15px 0;
    margin-top: 12px;
  }
  .oco-video-tutorial-subheadline {
    font-size: 1.01rem;
  }
}

@media (max-width: 700px) {
  .oco-video-tutorial-section {
    padding: 22px 0 7px 0;
  }
  .oco-video-tutorial-inner {
    gap: 0;
    padding: 0 2vw;
  }
  .oco-video-tutorial-heading {
    font-size: 1.12rem;
  }
  .oco-video-tutorial-subheadline {
    font-size: 0.98rem;
  }
  .oco-video-tutorial-btn {
    font-size: 0.97rem;
    padding: 10px 0;
    margin-bottom: 7px;
    margin-top: 7px;
    width: 100%;
    align-self: stretch;
  }
  .oco-video-tutorial-left {
    gap: 7px;
  }
}

@media (max-width: 440px) {
  .oco-video-tutorial-heading {
    font-size: 0.99rem;
  }
}



/* ----------------
-------------------
-------------------
-------------------
 COMPARE PLANS
-------------------
-------------------
-------------------
----------------- */

.oco-compare-plans-section {
  background: #fff;
  padding: 70px 0 48px 0;
  width: 100%;
  display: block;
}

.oneclickorder-compare-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background: #fafdff;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(36, 61, 99, 0.10), 0 1.5px 0 #e9ecf1;
  padding: 32px 28px 38px;
}

.oneclickorder-table-heading {
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 26px;
  color: #2e1e39;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  letter-spacing: 0.02em;
}

.compare-icon {
  font-size: 2.4rem;
  margin-right: 7px;
  filter: drop-shadow(0 2px 8px #d5c1ff44);
}

.compare-heading-text {
  font-weight: 900;
  color: #2e1e39;
  font-size: 2.06rem;
  letter-spacing: 0.01em;
  display: inline-block;
  line-height: 1.13;
}

/* ==== Responsive Table & Beautiful Scrollbar ==== */
.oneclickorder-plan-table-wrapper {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 18px rgba(70,124,238,0.09),
              inset 10px 0 20px -10px #8ae7fa22,
              inset -10px 0 20px -10px #8ae7fa22;
  padding: 0;
  overflow-x: auto;
  margin-bottom: 18px;
  position: relative;
  scrollbar-color: #38bdf8 #f3f8ff;
  scrollbar-width: thin;
}

/* Beautiful custom scrollbar (Webkit browsers) */
.oneclickorder-plan-table-wrapper::-webkit-scrollbar {
  height: 10px;
  background: #f3f8ff;
  border-radius: 8px;
}
.oneclickorder-plan-table-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg,#8ce99a,#38bdf8 60%);
  border-radius: 8px;
  box-shadow: 0 2px 10px #38bdf833;
}
.oneclickorder-plan-table-wrapper::-webkit-scrollbar-thumb:active {
  background: linear-gradient(90deg,#38bdf8,#8ce99a 80%);
}

/* Scroll hint for mobile/tablet with perfect spacing */
@media (max-width: 1024px) {
  .oneclickorder-plan-table-wrapper {
    max-width: 99vw;
    padding: 30px 2vw 32px 2vw;
  }
  .oneclickorder-plan-table th, .oneclickorder-plan-table td {
    padding: 12px 8px;
    font-size: 1.05em;
  }
  .oneclickorder-plan-table-wrapper::before,
  .oneclickorder-plan-table-wrapper::after {
    content: "← Swipe to see more →";
    display: block;
    text-align: center;
    color: #38bdf8;
    font-size: 1.08em;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
    opacity: 0.85;
    text-shadow: 0 3px 10px #fff, 0 1px 3px #38bdf866;
    animation: scrollhintfade 2.5s infinite alternate;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 22;
    width: 100%;
    background: transparent;
    line-height: 1.85;
  }
  .oneclickorder-plan-table-wrapper::before {
    top: 2px;
  }
  .oneclickorder-plan-table-wrapper::after {
    bottom: 2px;
  }
  .oneclickorder-plan-table {
    margin-top: 22px !important;
    margin-bottom: 18px !important;
  }
}
@keyframes scrollhintfade {
  0% { opacity: 0.82; }
  65% { opacity: 1; }
  100% { opacity: 0.3; }
}

/* ==== Table Core ==== */
.oneclickorder-plan-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1.09rem;
  margin: 0;
  background: none;
  min-width: 780px;
  table-layout: auto;
}

.oneclickorder-plan-table th,
.oneclickorder-plan-table td {
  padding: 16px 20px;
  text-align: center;
  border: none;
  background: none;
  vertical-align: middle;
  font-size: 1.08rem;
}

.oneclickorder-plan-table thead th {
  background: linear-gradient(90deg, #2e1e39 40%, #c3a6f7 100%);
  color: #fff;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom: 0;
  text-align: center;
  vertical-align: middle;
}

.oneclickorder-plan-table th.feature-col,
.oneclickorder-plan-table td.feature-col {
  text-align: left;
  padding-left: 28px;
}

.oneclickorder-plan-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: #2e1e39;
  background: none;
}

.oneclickorder-plan-table tbody tr:nth-child(even) td {
  background: #f3f8ff;
}
.oneclickorder-plan-table tbody tr:nth-child(odd) td {
  background: #fafdff;
}

/* Table icons */
.oc-check, .oc-cross {
  display: inline-block;
  font-size: 1.33em;
  line-height: 1;
  font-weight: 800;
  vertical-align: middle;
  border-radius: 50%;
  min-width: 28px;
  min-height: 28px;
  text-align: center;
  padding: 0 2px;
}
.oc-check {
  color: #27c76f;
  background: #e8fbee;
}
.oc-cross {
  color: #f35c76;
  background: #fbe9ec;
}

/* Upgrade/download buttons */
.oneclickorder-upgrade-buttons-bottom {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 32px 0 0 0;
  width: 100%;
}

.oneclickorder-upgrade-btn {
  background: linear-gradient(90deg, #2e1e39 0%, #a18ee5 100%);
  color: #fff !important;
  padding: 15px 48px 15px 38px;
  font-size: 1.18rem;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  outline: none;
  box-shadow: 0 4px 20px rgba(36, 124, 246, 0.10);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.21s, box-shadow 0.19s, transform 0.18s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.oneclickorder-upgrade-btn .upgrade-emoji {
  font-size: 1.45em;
  margin-right: 2px;
  margin-top: 1px;
  filter: drop-shadow(0 2px 6px #fff6);
}

.oneclickorder-upgrade-btn:hover, .oneclickorder-upgrade-btn:focus {
  background: linear-gradient(90deg, #543b7a 0%, #8c6ece 100%);
  box-shadow: 0 7px 32px rgba(46, 30, 57, 0.13);
  transform: translateY(-2px) scale(1.04);
  color: #fff !important;
  outline: none;
}

.oneclickorder-download-btn {
  background: linear-gradient(90deg, #38bdf8 0%, #8ce99a 100%);
  color: #14304a !important;
  padding: 15px 40px 15px 32px;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  outline: none;
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.08);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.21s, box-shadow 0.19s, transform 0.18s;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.oneclickorder-download-btn .download-emoji {
  font-size: 1.35em;
  margin-right: 2px;
  margin-top: 1px;
  filter: drop-shadow(0 2px 6px #fff6);
}

.oneclickorder-download-btn:hover,
.oneclickorder-download-btn:focus {
  background: linear-gradient(90deg, #06b6d4 0%, #3be378 100%);
  color: #181828 !important;
  box-shadow: 0 7px 32px rgba(36, 181, 246, 0.16);
  transform: translateY(-2px) scale(1.04);
  outline: none;
}

/* ===== Responsive Tweaks ===== */
@media (max-width: 1024px) {
  .oneclickorder-table-heading { font-size: 1.64rem; gap: 10px; }
  .oneclickorder-plan-table th, .oneclickorder-plan-table td {
    padding: 12px 8px;
    font-size: 1.05em;
  }
}
@media (max-width: 700px) {
  /* Hide the 📊 icon on mobile */
  .oneclickorder-table-heading .compare-icon {
    display: none !important;
  }
  /* Heading size + layout adjustments */
  .oneclickorder-table-heading,
  .compare-heading-text {
    font-size: 1.04rem !important;
    gap: 3px !important;
    line-height: 1.1 !important;
    padding: 0 !important;
    margin-bottom: 13px !important;
  }
  .compare-heading-text {
    font-size: 1.02rem !important;
    line-height: 1.14 !important;
  }
  /* Reduce padding/margins in wrappers */
  .oco-compare-plans-section {
    padding: 32px 0 28px 0 !important;
  }
  .oneclickorder-compare-wrapper {
    padding: 12px 3vw 16px 3vw !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 12px rgba(36, 61, 99, 0.08), 0 0.7px 0 #e9ecf1 !important;
  }
  /* Table min width for better swipe UX */
  .oneclickorder-plan-table {
    min-width: 470px !important;
    font-size: 0.97rem !important;
    table-layout: auto !important;
  }
  .oneclickorder-plan-table th, 
  .oneclickorder-plan-table td {
    padding: 8px 6px !important;
    font-size: 0.97em !important;
    line-height: 1.2 !important;
    word-break: break-word;
    white-space: nowrap !important; /* prevent break everywhere by default */
  }
  .oneclickorder-plan-table th:first-child,
  .oneclickorder-plan-table td:first-child {
    padding-left: 10px !important;
    text-align: left;
    font-size: 0.97rem !important;
    width: 34vw !important;
    min-width: 105px !important;
    max-width: 150px !important;
    white-space: normal !important; /* allow only features to wrap */
  }
  .oneclickorder-plan-table th:not(:first-child),
  .oneclickorder-plan-table td:not(:first-child) {
    min-width: 120px !important;
    width: 33vw !important;
    max-width: 180px !important;
    text-align: center !important;
    white-space: nowrap !important; /* force Free/Pro to never break */
  }
  /* === FIX: Allow wrapping in all plan columns for price row only === */
  .oneclickorder-plan-table tr:nth-child(2) td:not(:first-child) {
    white-space: normal !important;
    word-break: break-word !important;
  }
  /* Buttons tweaks */
  .oneclickorder-upgrade-buttons-bottom {
    margin: 14px 0 0 0 !important;
    gap: 12px !important;
    flex-direction: column;
    align-items: stretch;
  }
  .oneclickorder-upgrade-btn,
  .oneclickorder-download-btn {
    font-size: 1em !important;
    padding: 11px 10px !important;
    border-radius: 9px !important;
    width: 100%;
    justify-content: center;
  }
  /* Fix scrollbars: minimal on mobile */
  .oneclickorder-plan-table-wrapper {
    padding: 7px 0 13px 0 !important;
    border-radius: 10px !important;
    max-width: 100vw !important;
  }
  /* Table scroll hint size */
  .oneclickorder-plan-table-wrapper::before,
  .oneclickorder-plan-table-wrapper::after {
    font-size: 0.99em !important;
    top: 1px !important;
    bottom: 1px !important;
    line-height: 1.3 !important;
    padding: 0 2px !important;
  }
}


/* ----------------
-------------------
-------------------
-------------------
 All Features
-------------------
-------------------
-------------------
----------------- */


.oco-all-features-section {
  background: #fafcff;
  padding: 72px 0 54px 0;
  width: 100%;
}

.oco-features-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background: #fcfdff;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(36, 61, 99, 0.09), 0 1.5px 0 #e9ecf1;
  padding: 34px 36px 42px 36px;
}

.oco-features-heading {
  font-size: 2rem;
  font-weight: 900;
  color: #2e1e39;
  margin-bottom: 26px;
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.17;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.oco-feature-list {
  list-style: none;
  padding: 0;
  margin-bottom: 36px;
  font-size: 1.14rem;
  font-weight: 500;
}

.oco-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(90deg, #f8fbff 0%, #e9f1fa 100%);
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 13px 18px 13px 13px;
  font-size: 1.08rem;
  line-height: 1.65;
  color: #232942;
  box-shadow: 0 1px 5px rgba(45,124,246,0.04);
  transition: background 0.17s, color 0.12s, box-shadow 0.13s;
  position: relative;
}

.oco-feature-list li:hover {
  background: linear-gradient(90deg, #e5f0ff 0%, #f6fafe 100%);
  color: #144cab;
  box-shadow: 0 3px 12px rgba(30, 87, 218, 0.08);
}

.oco-feature-list li .feature-check {
  font-size: 1.15em;
  color: #23bb74;
  margin-right: 8px;
  margin-top: 1px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px #5ef7a677);
  transition: transform 0.13s;
}

.oco-feature-list li:hover .feature-check {
  transform: scale(1.07) rotate(-7deg);
}

/* Feature actions/buttons */
.oco-features-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 22px;
  flex-wrap: wrap;
}

.oco-feature-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #e0e7ff 0%, #ede9fe 100%);
  color: #38255b !important;
  padding: 13px 34px;
  font-size: 1.07rem;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  outline: none;
  box-shadow: 0 2px 10px rgba(80, 79, 194, 0.09);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.17s, box-shadow 0.13s, color 0.12s, transform 0.12s;
  gap: 7px;
  min-width: 140px;
}

.oco-upgrade-btn {
  background: linear-gradient(90deg, #a18ee5 0%, #8b5cf6 100%);
  color: #fff !important;
}
.oco-download-btn {
  background: linear-gradient(90deg, #38bdf8 0%, #8ce99a 100%);
  color: #14304a !important;
}
.oco-compare-btn {
  background: linear-gradient(90deg, #c3a6f7 0%, #a5b4fc 100%);
  color: #38255b !important;
}

.oco-feature-btn:hover, .oco-feature-btn:focus {
  box-shadow: 0 6px 22px rgba(126, 80, 228, 0.15);
  transform: translateY(-2px) scale(1.04);
  color: #19133e !important;
  outline: none;
}
.oco-upgrade-btn:hover, .oco-upgrade-btn:focus {
  background: linear-gradient(90deg, #8b5cf6 0%, #a18ee5 100%);
  color: #fff !important;
}
.oco-download-btn:hover, .oco-download-btn:focus {
  background: linear-gradient(90deg, #06b6d4 0%, #3be378 100%);
  color: #14304a !important;
}
.oco-compare-btn:hover, .oco-compare-btn:focus {
  background: linear-gradient(90deg, #a5b4fc 0%, #c3a6f7 100%);
  color: #38255b !important;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .oco-features-wrapper {
    padding: 18px 8vw 22px 8vw;
    max-width: 98vw;
  }
  .oco-features-heading {
    font-size: 1.27rem;
    gap: 6px;
  }
  .oco-feature-list { font-size: 1.04rem; }
  .oco-feature-btn { font-size: 0.97em; padding: 11px 15px; min-width: 96px; }
}
@media (max-width: 600px) {
  .oco-features-heading { font-size: 1.04rem; }
  .oco-feature-list li { font-size: 0.94rem; }
  .oco-features-wrapper { padding: 10px 3vw 14px 3vw; }
}



/* ----------------
-------------------
-------------------
-------------------
 Testimonials Section
-------------------
-------------------
-------------------
----------------- */
.oco-testimonials-section {
  background: #fff;
  padding: 68px 0 58px 0;
  width: 100%;
  overflow-x: hidden;
}
.oco-testimonials-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.oco-section-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: #172132;
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: -0.01em;
  width: 100%;
}

.oco-testimonials-carousel-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 10px;
}
.oco-testimonials-carousel {
  display: flex;
  gap: 40px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 6px 0;
  width: 100%;
  max-width: 1200px;
  align-items: stretch;
  position: relative;
}

.oco-testimonial-card {
  flex: 0 0 370px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 6px 38px 0 rgba(80,120,200,.13), 0 2.5px 8px 0 rgba(60,40,120,.07);
  padding: 40px 30px 34px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: center;
  min-height: 270px;
  margin: 10px 0;
  position: relative;
  transition: box-shadow .3s cubic-bezier(.6,1.6,.35,.95), transform .28s cubic-bezier(.6,1.6,.35,.95);
}
.oco-testimonial-card:hover {
  box-shadow: 0 18px 60px 0 rgba(70,110,230,0.20), 0 4px 10px 0 rgba(80,110,160,.08);
  transform: scale(1.035);
}

.oco-testimonial-text {
  font-size: 1.22rem;
  color: #172132;
  margin-bottom: 22px;
  line-height: 1.67;
  font-family: inherit;
  font-weight: 500;
  text-align: center;
  word-break: break-word;
}

.oco-testimonial-stars {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.8rem;
  color: #FFD600;
  margin: 0 0 28px 0;
  letter-spacing: 4px;
  filter: drop-shadow(0 1px 4px #ffe06690);
  text-shadow: 0 0 6px #ffe06670, 0 0 2px #fff;
  animation: oco-star-glow 3s cubic-bezier(.77,0,.18,1) infinite alternate;
  width: 100%;
  transition: filter .3s;
}
@keyframes oco-star-glow {
  0%   { color: #FFD600; filter: drop-shadow(0 1px 5px #ffe06670); }
  100% { color: #FFC100; filter: drop-shadow(0 3px 12px #ffe06670); }
}
.oco-testimonial-author {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  justify-content: center;
  width: 100%;
}
.oco-testimonial-name {
  font-weight: 700;
  color: #2763ff;
  font-size: 1.16rem;
  margin-right: 3px;
}
.oco-testimonial-role {
  color: #94a3b8;
  font-size: 1.06rem;
  font-weight: 400;
}

.oco-carousel-arrow {
  background: linear-gradient(120deg, #f8fafc 60%, #eaf1fb 100%);
  border: none;
  color: #2763ff;
  font-size: 2.5rem;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  box-shadow: 0 1px 6px 0 rgba(80,120,200,.13);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow .16s, background .16s, color .18s;
  z-index: 2;
  margin: 0 10px;
  opacity: 0.92;
  position: relative;
}
.oco-carousel-arrow:hover {
  color: #fff;
  background: linear-gradient(120deg, #2763ff 40%, #4F8CFF 100%);
  box-shadow: 0 2px 12px 0 rgba(80,120,200,.24);
  opacity: 1;
}

.oco-arrow-left { order: 0; }
.oco-arrow-right { order: 2; }

/* ----------- MOBILE RESPONSIVE IMPROVEMENTS ----------- */
@media (max-width: 900px) {
  .oco-testimonials-carousel { gap: 22px; }
  .oco-testimonial-card { flex: 0 0 320px; padding: 24px 7vw 24px 7vw; min-height: 170px; }
  .oco-section-title { font-size: 1.45rem; }
  .oco-carousel-arrow { font-size: 2rem; width: 40px; height: 40px; }
}
@media (max-width: 600px) {
  .oco-testimonials-section {
    padding: 16px 0 12px 0;
    width: 100vw;
    margin-left: -8px;
  }
  .oco-section-title {
    font-size: 1.02rem;
    margin-bottom: 17px;
    padding: 0 3vw;
  }
  .oco-testimonials-inner {
    padding: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    max-width: 100vw !important;
  }
  .oco-testimonials-carousel-wrap {
    gap: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
  }
  .oco-testimonials-carousel {
    gap: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    max-width: 100vw !important;
  }
  .oco-testimonial-card {
    flex: 0 0 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    width: 100vw !important;
    padding: 7vw 4vw 7vw 4vw !important;
    margin: 6px 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 13px 0 rgba(80,120,200,.09), 0 1.2px 5px 0 rgba(60,40,120,.05);
    box-sizing: border-box !important;
  }
  .oco-testimonial-text {
    font-size: 1.03rem !important;
    line-height: 1.45 !important;
    margin-bottom: 13px !important;
    word-break: break-word !important;
    padding: 0 2vw !important;
    text-align: center !important;
  }
  .oco-testimonial-stars {
    font-size: 1.65rem !important;
    margin-bottom: 14px !important;
    letter-spacing: 1.4px !important;
  }
  .oco-testimonial-author {
    font-size: 0.94rem !important;
    margin-top: 8px !important;
    gap: 2px !important;
    flex-wrap: wrap !important;
  }
  .oco-testimonial-name {
    font-size: 1.04rem !important;
    margin-right: 1px !important;
  }
  .oco-testimonial-role {
    font-size: 0.97rem !important;
  }
  .oco-carousel-arrow {
    font-size: 1.13rem !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 1vw !important;
    min-width: 24px !important;
  }
}

/* Hide native scrollbars */
.oco-testimonials-carousel::-webkit-scrollbar { display: none !important; }
.oco-testimonials-carousel { -ms-overflow-style: none; scrollbar-width: none; }



/* ----------------
-------------------
-------------------
-------------------
 FAQ
-------------------
-------------------
-------------------
----------------- */

/* ===== FAQ Section (Compact & Elegant) ===== */
.oco-faq-section {
  padding-top: 44px;
  padding-bottom: 56px;
  background: #fff;
}
.oco-faq-title {
  font-size: 2.7rem;
  font-weight: 800;
  letter-spacing: -1.2px;
  margin-bottom: 8px;
  margin-top: 0;
  color: #161032;
}
.oco-faq-subtitle {
  text-align: center;
  color: #61709a;
  font-size: 1.18rem;
  font-weight: 500;
  margin-bottom: 28px;
  margin-top: 2px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.oco-faq-list {
  max-width: 690px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px; /* LESS GAP */
}
.oco-faq-item {
  background: #f7faff;
  border-radius: 18px;
  box-shadow: 0 2px 10px 0 rgba(27, 71, 144, 0.07);
  border: 1.1px solid #e6edfc;
  transition: box-shadow 0.21s, border-color 0.16s, min-height 0.2s;
  position: relative;
  overflow: hidden;
}
.oco-faq-item.open {
  box-shadow: 0 6px 18px 0 rgba(26, 71, 167, 0.12), 0 1px 4px 0 rgba(33, 85, 161, 0.10);
  border-color: #FFD600;
}
.oco-faq-question {
  width: 100%;
  text-align: left;
  font-size: 1.10rem;
  font-weight: 800;
  padding: 16px 38px 16px 22px;  /* LESS PADDING! */
  background: none;
  border: none;
  color: #17416e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  outline: none;
  transition: background 0.14s, padding 0.18s;
  border-radius: 18px;
  z-index: 2;
  min-height: 0;
}
.oco-faq-item.open .oco-faq-question {
  padding: 20px 38px 8px 22px; /* Extra top/bottom padding when open */
}
.oco-faq-question:focus {
  background: #f0f6fe;
}
.oco-faq-icon {
  display: flex;
  align-items: center;
  margin-left: 16px;
  transition: transform 0.17s cubic-bezier(.7,1.5,.35,.9);
}
.oco-faq-plus,
.oco-faq-minus {
  display: block;
  transition: opacity 0.17s;
}
.oco-faq-minus { opacity: 0; }
.oco-faq-item.open .oco-faq-plus { opacity: 0; }
.oco-faq-item.open .oco-faq-minus { opacity: 1; }

.oco-faq-answer {
  font-size: 1.03rem;
  line-height: 1.68;
  color: #405389;
  padding: 0 38px 16px 22px;
  max-height: 0;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  border-left: 3.5px solid transparent;
  transition: max-height 0.36s cubic-bezier(.6,1.6,.35,.95), padding-top 0.19s, opacity 0.12s, border-left 0.18s;
}
.oco-faq-item.open .oco-faq-answer {
  padding-top: 4px;
  max-height: 260px;
  opacity: 1;
  pointer-events: auto;
  border-left: 3.5px solid #FFD600;
  transition-delay: 0.02s;
}

/* Responsive — mobile */
@media (max-width: 700px) {
  .oco-faq-section {
    padding: 28px 0 10px 0;
  }
  .oco-faq-title {
    font-size: 2.02rem;
    margin-bottom: 6px;
  }
  .oco-faq-subtitle {
    font-size: 1.01rem;
    margin-bottom: 16px;
  }
  .oco-faq-list {
    gap: 7px;
    padding: 0 3px;
  }
  .oco-faq-item {
    border-radius: 11px;
  }
  .oco-faq-question,
  .oco-faq-answer {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 0.99rem;
  }
}



/* ----------------
-------------------
-------------------
-------------------
 Call To Action Buttons CTA
-------------------
-------------------
-------------------
----------------- */

.oco-cta-section .oco-section-title { 
  text-align: center;
  margin-bottom: 10px;
}

.oco-cta-section .oco-section-subtitle {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.13rem;
  color: #64748b;
  font-weight: 400;
  letter-spacing: 0.01em;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.oneclickorder-upgrade-buttons-bottom {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 0 auto 18px auto;
  width: 100%;
  max-width: 900px;
}

/* Improve button readability */
.oneclickorder-download-btn,
.oneclickorder-upgrade-btn {
  font-family: inherit;
  font-weight: 600 !important;
  font-size: 1.19rem;
  letter-spacing: 0.01em;
  line-height: 1.18;
  width: 340px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  justify-content: center;
  padding: 18px 10px;
  margin: 0;
}

.oco-section-note.oco-cta-note {
  text-align: center;
  color: #475569;
  font-size: 1.03rem;
  margin-top: 18px;
  letter-spacing: 0.01em;
  font-weight: 500;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .oneclickorder-upgrade-buttons-bottom {
    gap: 14px;
    max-width: 98vw;
  }
  .oneclickorder-download-btn,
  .oneclickorder-upgrade-btn {
    width: 90vw;
    font-size: 1.10rem;
    padding: 15px 4vw;
  }
}
@media (max-width: 700px) {
  .oco-cta-section .oco-section-title { font-size: 1.36rem; }
  .oneclickorder-upgrade-buttons-bottom {
    flex-direction: column;
    gap: 13px;
    margin: 0 0 10px 0;
    max-width: 99vw;
    width: 100%;
  }
  .oneclickorder-download-btn,
  .oneclickorder-upgrade-btn {
    width: 100%;
    font-size: 1.08rem;
    padding: 13px 2vw;
    border-radius: 10px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }
}
@media (max-width: 430px) {
  .oneclickorder-download-btn,
  .oneclickorder-upgrade-btn {
    font-size: 1.01rem;
    padding: 11px 2vw;
  }
}


/* ----------------
-------------------
-------------------
-------------------
 Contact US 
-------------------
-------------------
-------------------
----------------- */
/* ===== Contact Form Section Styling ===== */
.oco-contact-section {
  background: #f8fafc;
  padding: 70px 0 55px 0;
}

.oco-contact-wrapper {
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 8px 44px 0 rgba(36,61,99,0.10), 0 1.5px 0 #e9ecf1;
  padding: 40px 34px 36px 34px;
}

.oco-contact-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.oco-form-row {
  display: flex;
  gap: 32px;
  margin-bottom: 19px;
}

.oco-form-group {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.oco-form-group label {
  font-weight: 600;
  color: #2e1e39;
  margin-bottom: 8px;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.oco-form-group input[type="text"],
.oco-form-group input[type="email"],
.oco-form-group input[type="file"],
.oco-form-group textarea {
  font-family: inherit;
  font-size: 1.08rem;
  border: 1.5px solid #e7e9f3;
  border-radius: 12px;
  padding: 13px 14px 12px 14px;
  background: #fafdff;
  color: #2e1e39;
  box-shadow: 0 2px 9px 0 rgba(36,61,99,0.06);
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
  resize: none;
}

.oco-form-group input[type="text"]:focus,
.oco-form-group input[type="email"]:focus,
.oco-form-group input[type="file"]:focus,
.oco-form-group textarea:focus {
  border-color: #ffc13b;
  box-shadow: 0 0 0 2px #ffe39b44;
}

.oco-form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.oco-form-note {
  display: block;
  font-size: 0.99rem;
  color: #7e8ba3;
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.oco-form-full {
  width: 100%;
  margin-bottom: 18px;
}

.oco-contact-form .oco-btn {
  width: 100%;
  margin-top: 12px;
  font-size: 1.13rem;
  padding: 15px 0;
  border-radius: 26px;
  font-weight: 700;
}

.oco-form-success, .oco-form-error {
  margin-top: 18px;
  border-radius: 13px;
  padding: 18px 18px 17px 62px;
  font-size: 1.11rem;
  font-weight: 600;
  background-repeat: no-repeat;
  background-position: 19px 16px;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.oco-form-success {
  background-color: #f0ffe9;
  color: #238324;
  background-image: url('data:image/svg+xml;utf8,<svg fill="green" viewBox="0 0 20 20" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.629 15.433a1.3 1.3 0 0 1-1.84 0l-3.157-3.256a1.304 1.304 0 1 1 1.842-1.846l2.238 2.308 6.385-7.297a1.303 1.303 0 1 1 1.967 1.707l-7.435 8.384z"></path></svg>');
}
.oco-form-error {
  background-color: #fff6f1;
  color: #e12c0c;
  background-image: url('data:image/svg+xml;utf8,<svg fill="red" viewBox="0 0 20 20" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 1 0 0 16A8 8 0 0 0 10 2zm2.54 10.54a1 1 0 1 1-1.42 1.42L10 11.41l-1.12 1.13a1 1 0 1 1-1.41-1.42l1.13-1.12-1.13-1.12a1 1 0 1 1 1.41-1.42L10 8.59l1.12-1.13a1 1 0 1 1 1.42 1.42L11.41 10l1.13 1.12z"></path></svg>');
}

@media (max-width: 700px) {
  .oco-contact-wrapper {
    padding: 18px 7px 18px 7px;
  }
  .oco-form-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ----------------
-------------------
-------------------
-------------------
 Footer 
-------------------
-------------------
-------------------
----------------- */
/* ===== Premium Footer Section (All Left Aligned, Consistent Left Padding) ===== */
.oco-footer {
  background: #2e1e39;
  color: #fff;
  font-family: 'Inter', 'Open Sans', Arial, sans-serif;
  padding: 0;
  width: 100%;
  box-shadow: 0 -2px 24px 0 rgba(30,20,60,0.10);
}
.oco-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 40px 38px 32px;
  width: 100%;
  box-sizing: border-box;
  gap: 0;
}
.oco-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 12px;
  box-sizing: border-box;
}
.oco-footer-about { 
  width: 46%; 
  max-width: 650px; 
  padding-right: 44px;
}
.oco-footer-links, .oco-footer-connect { 
  width: 24%; 
  min-width: 180px; 
  max-width: 340px; 
}
.oco-footer-links { padding-right: 22px; }
.oco-footer-connect { padding-left: 14px; }

.oco-footer-title {
  font-size: 1.21rem;
  font-weight: 700;
  color: #ffc13b;
  letter-spacing: 0.01em;
  margin-bottom: 22px;
  margin-top: 0;
  text-align: left;
  width: 100%;
}

.oco-footer-text {
  font-size: 1.11rem;
  line-height: 1.65;
  color: #fff;
  opacity: 0.96;
  font-weight: 400;
  margin: 0 0 1.2em 0;
  text-align: left;
}

.oco-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.oco-footer-link {
  color: #fff;
  text-decoration: none !important;
  font-size: 1.15rem;
  font-weight: 500;
  opacity: 0.96;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 12px 0;
  transition: color 0.17s, opacity 0.17s;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  text-align: left;
  justify-content: flex-start;
}
.oco-footer-link:focus,
.oco-footer-link:hover {
  color: #ffc13b;
  opacity: 1;
  text-decoration: underline;
}

.oco-footer-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 9px;
  vertical-align: middle;
  object-fit: contain;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.oco-footer-contact-list .oco-footer-link {
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  padding: 12px 0 12px 0;
}

.oco-footer-bottom {
  text-align: center;
  color: #fff;
  opacity: 0.88;
  font-size: 1.10rem;
  font-weight: 400;
  border-top: 1.5px solid rgba(255,255,255,0.09);
  margin-top: 0;
  padding: 18px 0 14px 0;
  letter-spacing: 0.01em;
  background: #271d34;
  width: 100%;
  position: relative;
  z-index: 2;
  box-shadow: 0 -1px 10px rgba(0,0,0,0.04);
}

/* ----- Responsive: tablet/mobile stacking and spacing ----- */
@media (max-width: 1100px) {
  .oco-footer-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 40px 7vw 12px 7vw;
    gap: 0;
  }
  .oco-footer-col {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: 24px;
  }
  .oco-footer-about,
  .oco-footer-links,
  .oco-footer-connect {
    padding: 0;
    margin-bottom: 18px;
    width: 100%;
    max-width: 100%;
  }
  .oco-footer-title {
    margin-bottom: 13px;
    font-size: 1.12rem;
  }
}

/* --------- MOBILE: next-level perfect, all align left, tight but readable --------- */
@media (max-width: 600px) {
  .oco-footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 22px 2vw 8px 4vw !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
  }
  .oco-footer-col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 13px 0 !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
  }
  .oco-footer-about, .oco-footer-links, .oco-footer-connect {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: 11px !important;
  }
  .oco-footer-title {
    font-size: 1.01rem !important;
    margin-bottom: 7px !important;
    margin-top: 0 !important;
    text-align: left !important;
    width: 100% !important;
    padding-left: 0 !important;
  }
  .oco-footer-text {
    font-size: 0.97rem !important;
    margin-bottom: 1em !important;
    text-align: left !important;
    line-height: 1.48 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .oco-footer-list {
    width: 100% !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }
  .oco-footer-link,
  .oco-footer-contact-list .oco-footer-link {
    font-size: 0.99rem !important;
    padding: 9px 0 9px 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    border: none !important;
    background: none !important;
    gap: 10px !important;
  }
  .oco-footer-icon {
    width: 18px !important;
    height: 18px !important;
    margin-right: 6px !important;
  }
  .oco-footer-bottom {
    font-size: 0.93rem !important;
    padding: 10px 0 7px 0 !important;
    letter-spacing: 0.01em !important;
    background: #271d34 !important;
    margin: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
}