/* Page-specific styles for /hire-ruby-on-rails-developers, lifted from the Rails inline <style>. */
.form-box.prefix_profile.last {display: inline-block;vertical-align: top;}
  .mobile_col span.message {
  margin-left: -75px;}
  input#contact_mob_prefix1 {border-right:none;border-top-right-radius:initial;border-bottom-right-radius: initial;}
   .form-box.mobile_col.last {display: inline-block;width: calc(100% - 93px);}
  .form-box.prefix_profile.last{width: 90px;}
  input#contact_mobile {border-left: none;padding-left: 10px;letter-spacing:1px;}
  input#contact_mob_prefix1 {padding-left: 83px !important;}
  label span{color:red;}

.breadcrumb {position: absolute;top: 16%;left: calc(5% - 76px);z-index: 2; display: flex;align-items: center;gap: 10px; font-size: 18px;color: #fff;margin-top: 12px}
    .breadcrumb a{  color: #ffffff;  text-decoration: none;  font-size: 18px;}
  
  
    @media only screen and (max-width: 1500px){
      .breadcrumb {
        left: calc(7% - 76px);
        font-size: 14px;
        top: 19%;}
  
      .breadcrumb a {
          font-size: 14px;
        }
    }
    @media only screen and (max-width: 1000px) {
    .breadcrumb {left: calc(12% - 76px);}       
    .left-enq-box {position: fixed;top: 92%;}}
    @media only screen and (max-width: 1369px){
    .left-enq-box {position: fixed;top: 67%;}
    .ruby-banner.hire-ruby-banner .ruby-txt {
      margin-top: 12%;}}
    @media only screen and (max-width: 767px) {
      .breadcrumb {
        top: 8%;
        left: calc(12% - 76px);
        font-size: 13px;
        color: #fff;
        margin-top: 6px;}
  
      .breadcrumb a {
          font-size: 13px;
        }
      .left-enq-box {
      position: fixed;
      top: 92%;
      }}
    @media only screen and (max-width:  460px) {
      .breadcrumb {
      left: calc(23% - 76px);
      top: 9%;
      font-size: 12px;
  }
    .breadcrumb a{font-size: 12px}
  
  }

.chat-icon{height: 80px;width: 80px;right: 20px !important;bottom: 65px !important; z-index: 9}
  .chat-icon img {width: 45px;}
  .message {bottom: -8px;}
  .mobile_col span.message {
    margin-left: -91px;
  }
  .proactive {
    position: fixed;
    bottom: 99px !important;
    right: 86px !important;
    width: auto;
  }
  .closeColor{background: #6691e7;}
  .cc-color-override-259567231.cc-window{background: #333 !important;}
  marquee { background: rgba(0, 0, 0, 0.5)}
  
  .rightTI { background: #ff002b;
    animation: marquee 25s linear infinite;
    animation-play-state: running;
  }
  .rightTI:hover {
    animation-play-state: paused;
  }
  @-webkit-keyframes marquee {
    0% {text-indent: 100%;}
    100% {text-indent: -100%;}
  }
  
  .rightCSS { 
    background: #a35dc1;
    overflow: hidden;
  } 
  .rightCSS div {
    position: relative;
    animation: CSSright linear 18s infinite;
    animation-play-state: running;
  } 
  @keyframes CSSright {
    0% {
      transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
  }
  .rightCSS:hover div {
    animation-play-state: paused;
  }
  
  .rightJS { background: #ffa900; }
  
  .rightJQ { background: #00a753; }
  
  .li {
    width: 100%;
    padding: 4px;
    position: absolute;
    right: 0;
    left: 0;
    top: 67px;
    z-index: 99;
    font-size: 13px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  
  .b_color{color: red;}
  .sub-menu-item li .seo-menu{padding-right: 20px !important;}
  
  @media screen and (max-width: 1700px) {
    .chat-icon{right: 15px !important;bottom: 40px !important;}
  }
  @media screen and (max-width: 1599px) {
    .chat-icon {right: 12px !important;bottom: 25px !important;}
    .proactive{bottom: 60px !important;right: 80px !important;}
  }
  @media screen and (max-width: 1279px) {
    .chat-icon {bottom: 25px !important;}
  }
  
  @media screen and (max-width: 1024px) {
    .li{top: 60px;}
    .chat-icon {height: 65px;width: 65px; bottom: 47px !important; right: 4px !important}
    .wa-icon{bottom: 20%;}
    .proactive{bottom: 73px !important;right: 64px !important;}
  }
  
  @media screen and (max-width: 767px) {
    .chat-icon {right: -3px !important;}
    .proactive{width: auto;bottom: 71px !important;right: 54px !important;}
    .wa-icon {bottom: 110px;}
    .chat-icon img {width: 40px;}
  }
  .sub-menu2 .submenu-arrow:hover .sub-menu3{transform: translateX(0) !important;opacity: 1 !important;visibility: visible !important;}
  .sub-menu2 .submenu-arrow:hover .sub-menu4{transform: translateX(0) !important;opacity: 1 !important;visibility: visible !important;}
  .sub-menu2 .submenu-arrow:hover .sub-menu5{transform: translateX(0) !important;opacity: 1 !important;visibility: visible !important;}
  .sub-menu2 .submenu-arrow:hover .sub-menu6{transform: translateX(0) !important;opacity: 1 !important;visibility: visible !important;}
  .add-space{padding-left: 15px;position: relative}
  .add-space:before{content: "-";position: absolute;left: 5px;top: 0;}
  .nav-bar-new .container li .sub-menu li .sub-menu2 li:first-child a{border-top:0}
  .nav-bar-new .container li .sub-menu li .sub-menu2 li .sub-menu3 li a {
    border-top: 1px solid rgba(255, 255, 255, 0.3);}
  .nav-bar-new .container li .sub-menu li .sub-menu2 li .sub-menu3 li:first-child a{border-top: 0}
  .hide{display: none;}

/* ------------------------------------------------------------------------
   Hero rebuild, 24 Sep 2026 — reported "still broken": the huge "Ruby on
   Rails" heading and the pink promo card overlapped each other and the
   "Ratings and Review" section below.

   Root cause, confirmed by reading assets/ror-css/ruby-on-rails-style.min.css
   (a page-specific legacy stylesheet neither of us knew existed — it isn't
   application.css or adroit-fixes.css, it's its own file, enqueued only for
   ROR pages): that stylesheet makes `.ruby-banner .container` and `.onrails`
   both `position:absolute`, and `.txt` (the promo card) `position:absolute;
   bottom:-60%`. Every one of those relies on `.container` having a real,
   non-zero height to size percentages/positioning against — but nothing
   ever gives `.container` a height, and because ALL of its meaningful
   children are themselves `position:absolute` (removed from flow), the
   container naturally collapses to ~25px tall. Confirmed live:
   `.container_370` computed height 25px, `.onrails` ends up rendering
   ~255px below the (200px-tall) section, and `.txt` computed top:-464px —
   nowhere near where it's meant to be.

   Compared against the live production page (theadroit.in/hire-ruby-on-
   rails-developers, the actual source of truth for "what should this look
   like") to get the real target layout, since the ported CSS/markup
   doesn't match it: on production the eyebrow + heading stack normally
   (no absolute positioning at all), and the promo card is a full-width
   band directly below the heading, not a 400px card bottom-pinned to -60%.
   Production also shows a circular photo top-right with decorative rings
   that isn't in this page's ported markup at all — that's a missing-asset/
   missing-markup gap, out of scope for a CSS fix, flagged separately.

   This block takes .container_370 out of the broken absolute/percent
   scheme entirely and lets it size from its own (now normal-flow)
   content, matching the working production layout. */
.ruby-banner.hire-ruby-banner .container_370 {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  padding-bottom: 60px;
}
.ruby-banner.hire-ruby-banner .ruby-txt {
  position: static !important;
  text-align: left !important;
  width: auto;
}
.ruby-banner.hire-ruby-banner .rubydev {
  display: block;
  margin: 0 0 10px;
}
.ruby-banner.hire-ruby-banner .ruby_contain {
  height: auto !important;
}
.ruby-banner.hire-ruby-banner .onrails {
  position: static !important;
  display: block !important;
  transform: none !important;
  left: auto !important;
  font-size: 64px;
  line-height: 1.15 !important;
  margin: 0 0 36px;
}
.ruby-banner.hire-ruby-banner .hire-ror-box.hire-ror-box.hire-ror-box {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 16px;
  padding: 30px 36px;
}
.ruby-banner.hire-ruby-banner .hire-ror-box .schedule-box {
  margin-top: 14px;
}
.ruby-banner.hire-ruby-banner .hire-ror-box .btn.white-btn {
  display: inline-block;
  background: #eef0f5;
  color: #3a1d5c !important;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 8px;
  text-decoration: none;
}
.ruby-banner.hire-ruby-banner .hire-ror-box .btn.white-btn:hover {
  background: #ffffff;
}
@media screen and (max-width: 900px) {
  .ruby-banner.hire-ruby-banner .onrails {
    font-size: 40px;
  }
}

/* ------------------------------------------------------------------------
   Pricing cards, 25 Sep 2026 — reported with a screenshot: three price
   tiers rendering as plain stacked text on black, no cards, no columns, no
   visual hierarchy at all ("check the UI for section").

   Root cause: `.price-section`/`.price-container`/`.price-box` and their
   children have NO CSS anywhere in this codebase — not in application.css,
   not in either of this page's own ror-css files (grepped all three files,
   zero matches for "price-box" or "price-section"). This one section's
   styling was simply never ported from the Rails site, unlike everything
   else on this page — nothing here was ever overridden or broken by a
   later pass, it just never existed.

   Pulled the real rules verbatim from the still-live Rails production page
   (theadroit.in/hire-ruby-on-rails-developers — the same "source of truth"
   approach the hero rebuild above already used): its own unminified
   assets/ror-css/ruby-on-rails-style.css has the complete block. Confirmed
   live that the staging markup is byte-for-byte the structure this CSS
   targets (`.price-box` > `.price-box-row` > `.price-top-box` /
   `.price-bottom-box`, the middle tile's own `<span>STARTS WITH</span>`
   inside `.price-top-box`), so nothing needed adjusting to fit — this is a
   straight port, not a rebuild.

   Scoped to this page's own stylesheet rather than the shared ror-css
   file: the sibling ROR pages (ruby-on-rails-development-company-in-india
   and -in-mumbai) don't have a `.price-box` anywhere on the page, so this
   only belongs here. Verified live: three white cards in a row, the middle
   one raised with its pink "STARTS WITH" ribbon, matching production
   exactly at desktop, tablet and mobile (mobile stacks the three cards,
   per production's own ≤767px rule, reproduced below unchanged). */
.price-section {
  padding-bottom: 10px;
}
.price-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: flex-end;
}
.price-box {
  text-align: center;
  box-shadow: 0.9375rem 0 3.125rem rgba(0, 0, 0, .1);
  background-color: #fff;
  margin-top: 75px;
}
.price-box:nth-child(2) {
  position: relative;
  z-index: 9;
}
.price-box:nth-child(2) .price-top-box {
  padding-top: 75px;
}
.price-top-box {
  padding: 25px 15px;
  position: relative;
}
.price-top-box h3 {
  color: #ff1b6b;
  font-size: 44px;
  font-weight: 600;
}
.price-top-box p {
  color: #000;
  font-size: 18px;
  font-weight: 600;
}
.price-top-box span {
  background: #ff1b6b;
  font-weight: 600;
  padding: 4px 10px;
  font-size: 14px;
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: inline-block;
  width: 130px;
}
.price-bottom-box {
  padding: 25px 15px;
  border-top: solid 1px #ff1b6b;
}
.price-bottom-box p {
  color: #696969;
  font-size: 16px;
}
.schedule-box {
  margin-top: 35px !important;
  text-align: center;
}

@media screen and (max-width: 1300px) {
  .price-top-box h3 { font-size: 36px; }
  .price-top-box p { font-size: 16px; }
}
@media screen and (max-width: 1023px) {
  .price-top-box h3 { font-size: 28px; margin-bottom: 10px; }
  .price-bottom-box { height: 108px; }
  .price-bottom-box p { font-size: 15px; }
}
@media screen and (max-width: 767px) {
  .price-container { display: block; }
  .price-box { margin-top: 25px; }
  .price-top-box { padding: 20px 10px; }
  .price-bottom-box { padding: 15px 10px; height: auto; }
  .price-box:nth-child(2) .price-top-box { padding-top: 45px; }
  .price-bottom-box p { font-size: 13px; }
  .price-bottom-box p br { display: none; }
  .price-top-box span { font-size: 12px; width: 110px; }
}