/*-----------------------------------------------------------------------------------

    Project : Ricksite Studio
    File    : ricksite.css
    Note    : Loaded AFTER assets/css/style.css.

              The Agenko template is the locked design system. This file does not
              restyle it - it only does two things:

                1. Re-points the accent token to the Ricksite green.
                2. Makes the original Agenko hero fit a longer headline, using
                   declarations the template already ships for its own 992-1200px
                   breakpoint.

              Nothing else is overridden. If a rule is not listed here, the page is
              running on stock Agenko CSS.

-----------------------------------------------------------------------------------*/

/*-------------------------------------
    ## Accent colour
    Agenko lime #9CFE4F -> Ricksite green #B6F24B.
    style.css declares the accent once, as a token, so this single line
    re-colours every button, hover, badge and active state in the template.
--------------------------------------*/
:root {
  --primary-color: #B6F24B;
}

/* The only place style.css hard-codes the old lime instead of using the token. */
.agenko-footer .shape.shape-blur_one span {
  background-color: rgba(182, 242, 75, 0.5);
}

/*-------------------------------------
    ## Hero headline fit

    Agenko's hero headline is two very short lines ("Digital Modern" / "Agency"),
    which is why the template can afford 140px type and can float the paragraph
    absolutely into the empty space on the right.

    The Ricksite headline is 28 characters per line, so the type is stepped down
    to the largest size that still fits the original container, and the paragraph
    returns to normal flow - which is exactly what Agenko itself does between
    992px and 1200px (see .hero-wrapper-two .hero-content .text-box in style.css).
    Composition, shapes, service list, hero image and animations are untouched.
--------------------------------------*/
.hero-wrapper-two .hero-content h1 {
  font-size: 96px;
  line-height: 108px;
}
@media (min-width: 1200px) and (max-width: 1450px) {
  .hero-wrapper-two .hero-content h1 {
    font-size: 88px;
    line-height: 100px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .hero-wrapper-two .hero-content h1 {
    font-size: 66px;
    line-height: 80px;
  }
}
@media screen and (max-width: 991px) {
  .hero-wrapper-two .hero-content h1 {
    font-size: 48px;
    line-height: 62px;
  }
}
@media (max-width: 767px) {
  .hero-wrapper-two .hero-content h1 {
    font-size: 34px;
    line-height: 46px;
  }
}

/* Same declaration the template applies at 992-1200px, extended to every width. */
.hero-wrapper-two .hero-content .text-box {
  position: relative;
  bottom: auto;
  right: auto;
  margin-top: 35px;
}

/* Spacing for the secondary link that sits next to a button (hero + final CTA). */
.hero-button .read-more,
.agenko-button .read-more {
  margin-left: 30px;
}
@media (max-width: 767px) {
  .hero-button .read-more,
  .agenko-button .read-more {
    margin-left: 0;
    margin-top: 25px;
  }
}

/*-------------------------------------
    ## Services CTA on small screens

    "PELAJARI SELENGKAPNYA" plus the arrow needs 281px, but the service card
    only offers 269px of content width below 768px, so the label wrapped to two
    lines inside the pill. Agenko's buttons are single-line everywhere else, so
    the horizontal padding is trimmed just for this button at that width rather
    than shortening the label.
--------------------------------------*/
@media (max-width: 767px) {
  .agk-services .card-button .theme-btn.style-one {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/*-------------------------------------
    ## Pricing + inquiry form

    Both sections are built from stock Agenko parts (agk-accordion,
    agenko-pricing-item style-three, agenko-contact-form, form_control,
    check-list). These rules only cover the few things the template has no
    equivalent for: the per-month suffix, the category note, the featured
    tier outline, select/label styling and the form panel.
--------------------------------------*/
.agk-pricing .accordion-content .row {
  margin-top: 10px;
}
.rs-price-note {
  margin-bottom: 25px;
  padding: 14px 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: var(--primary-black-color);
  font-size: 15px;
  line-height: 26px;
}
.agk-pricing .agenko-pricing-item .price .rs-period {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-color);
  margin-left: 4px;
}
.agk-pricing .agenko-pricing-item.rs-featured {
  border-color: var(--primary-color);
}
.agk-pricing .agenko-pricing-item .pricing-footer .theme-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* Inquiry form */
.rs-inquiry-box {
  padding: 40px;
  border: 1px solid var(--border-color);
  border-radius: 30px;
  background-color: var(--gray-dark);
}
@media (max-width: 767px) {
  .rs-inquiry-box {
    padding: 25px 20px;
  }
}
.rs-label {
  display: block;
  margin-bottom: 10px;
  font: 600 14px/24px var(--heading-font);
  letter-spacing: 0.4px;
  color: var(--white-color);
}
.rs-inquiry-box .form-group {
  margin-bottom: 25px;
}
.rs-inquiry-box .form_control {
  padding: 12px 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background-color: var(--primary-black-color);
  color: var(--white-color);
  line-height: 28px;
}
.rs-inquiry-box .form_control:focus {
  border-color: var(--primary-color);
}
.rs-inquiry-box select.form_control {
  /* Native arrow is invisible on the dark panel, so draw our own. */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B6F24B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}
.rs-inquiry-box select.form_control option {
  background-color: var(--primary-black-color);
  color: var(--white-color);
}
.rs-form-hint {
  margin-top: 18px;
  font-size: 14px;
  line-height: 24px;
}

/*-------------------------------------
    ## "Mulai dari" on the service card

    Price sits above the description inside the card's existing content column,
    so the template's three-part row (number + title, content, button) is
    unchanged. Matches the content padding so it lines up with the paragraph.
--------------------------------------*/
.agenko-card-item.style-one .content .rs-price-from {
  display: block;
  padding: 0 30px;
  margin-bottom: 10px;
  font: 600 15px/26px var(--heading-font);
  letter-spacing: 0.3px;
  color: var(--text-color);
}
.agenko-card-item.style-one .content .rs-price-from strong {
  color: var(--primary-color);
  font-weight: 700;
}
@media screen and (max-width: 1200px) {
  .agenko-card-item.style-one .content .rs-price-from {
    padding: 0;
  }
}

/*-------------------------------------
    ## Service landing pages

    Banner, deliverable cards and accordions are stock Agenko. These rules only
    cover the numbered problem list, which the template has no equivalent for,
    and trim the deliverable card down to icon + title.
--------------------------------------*/
.rs-problem-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-color);
}
.rs-problem-item:first-child {
  border-top: 1px solid var(--border-color);
}
.rs-problem-no {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  font: 700 20px/30px var(--heading-font);
  color: var(--primary-color);
}
.rs-problem-item p {
  color: var(--white-color);
  margin: 0;
}

/* Deliverable card: icon + title only, no body copy. */
.agenko-iconic-box.style-four.rs-deliverable {
  height: 100%;
  padding: 30px;
}
.agenko-iconic-box.style-four.rs-deliverable .icon {
  font-size: 40px;
  color: var(--primary-color);
  margin-bottom: 15px;
}
.agenko-iconic-box.style-four.rs-deliverable .content h4.title {
  margin-bottom: 0;
  font-size: 20px;
  line-height: 30px;
}

/* Page banner copy */
.agenko-page-banner .page-content .text-box p {
  font-size: 18px;
  line-height: 32px;
}

/*-------------------------------------
    ## Pricing tabs (service pages)

    Bootstrap nav-tabs ships unstyled for a dark theme, so this dresses the
    strip to match the Agenko pill language: same radius, border and accent as
    the buttons elsewhere.
--------------------------------------*/
.rs-price-tabs {
  border: none;
  gap: 10px;
  margin-bottom: 40px;
}
.rs-price-tabs .nav-link {
  padding: 12px 26px;
  border: 1px solid var(--border-color);
  border-radius: 30px;
  background-color: var(--primary-black-color);
  color: var(--white-color);
  font: 600 15px/24px var(--heading-font);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.rs-price-tabs .nav-link:hover {
  border-color: var(--primary-line);
}
.rs-price-tabs .nav-link.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--heading-color);
}
@media (max-width: 767px) {
  .rs-price-tabs .nav-link {
    padding: 10px 18px;
    font-size: 14px;
  }
}

/*-------------------------------------
    ## Brand lockup

    The logo is an inline <svg> (so the page's Poppins reaches the wordmark),
    which means the template's `.brand-logo img` sizing no longer applies.
    The branding pill is widened a little because the lockup is wider than the
    placeholder wordmark it replaces, and the type would otherwise render too
    small to read.
--------------------------------------*/
.rs-logo {
  display: block;
  width: 100%;
  height: auto;
}
.header-navigation .site-branding {
  max-width: 150px;
  padding: 6px 14px;
}
.header-navigation .site-branding .brand-logo .rs-logo {
  max-width: 112px;
}
.agenko-footer .footer-logo .rs-logo {
  max-width: 170px;
}

/*-------------------------------------
    ## Intro loader

    The brand loading sequence: the mark draws itself, the accent dot travels
    along the same arc, then the wordmark fades in. Uses its own class rather
    than Agenko's `.preloader` so theme.js's fixed 500ms fade-out does not cut
    the animation short mid-draw — theme.js is left untouched.

    Plays once per session (see the head script in BaseLayout); on repeat views
    and for prefers-reduced-motion it is removed before first paint.
--------------------------------------*/
.rs-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--primary-black-color);
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
.rs-preloader.is-done {
  opacity: 0;
  pointer-events: none;
}
/* Decided before first paint, so the loader never flashes on repeat views. */
.rs-intro-skip .rs-preloader {
  display: none;
}

.rs-intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 26px;
}
.rs-intro-mark {
  position: relative;
  width: 132px;
  height: 132px;
}
.rs-intro-mark svg {
  display: block;
  width: 132px;
  height: 132px;
  overflow: visible;
}
.rs-intro-mark path {
  -webkit-animation: rs-draw 1.5s cubic-bezier(0.34, 0.05, 0.2, 1) 0.15s both;
          animation: rs-draw 1.5s cubic-bezier(0.34, 0.05, 0.2, 1) 0.15s both;
}
.rs-intro-dot {
  position: absolute;
  width: 23.76px;
  height: 23.76px;
  border-radius: 50%;
  background-color: var(--primary-color);
  /* Fallback for browsers without offset-path: rest at the arc's end point. */
  left: 108.24px;
  top: 21.12px;
  margin: -11.88px 0 0 -11.88px;
}
@supports (offset-path: path("M0 0")) {
  .rs-intro-dot {
    left: 0;
    top: 0;
    margin: 0;
    offset-path: path("M23.76 105.6 A 42.24 42.24 0 0 1 66 63.36 A 42.24 42.24 0 0 0 108.24 21.12");
    offset-rotate: 0deg;
    -webkit-animation: rs-travel 1.5s cubic-bezier(0.34, 0.05, 0.2, 1) 0.15s both, rs-pop 0.3s ease-out 0.15s both;
            animation: rs-travel 1.5s cubic-bezier(0.34, 0.05, 0.2, 1) 0.15s both, rs-pop 0.3s ease-out 0.15s both;
  }
}
.rs-intro-word {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3px;
  -webkit-animation: rs-intro-fade 0.6s ease-out 1.72s both;
          animation: rs-intro-fade 0.6s ease-out 1.72s both;
}
.rs-intro-word span {
  color: #f4f4f1;
  font-size: 20px;
  line-height: 1;
  font-family: "Poppins", sans-serif;
}
.rs-intro-word-thin {
  font-weight: 300;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}
.rs-intro-word-bold {
  font-weight: 700;
  letter-spacing: 0.21em;
  text-indent: 0.21em;
}

@-webkit-keyframes rs-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes rs-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@-webkit-keyframes rs-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes rs-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@-webkit-keyframes rs-pop { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes rs-pop { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } }
@-webkit-keyframes rs-intro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rs-intro-fade { from { opacity: 0; } to { opacity: 1; } }