/*!
CSS Portal TPSD
*/

:root {
    /* Style Warna */
    --main-color: #1F2D57;
    --accent-color-1: #364268;
    --accent-color-2: #FF9900;
    --accent-color-8: #ffc56d;
    --accent-color-4: #4B2F04;
    --accent-color-6: #94AE40;
    --accent-color-7: #2EC439;
  
    /* Style Warna light & dark*/
    --dark-color: #393c47;
    --dark-opacity: rgba(255, 255, 255, 0.8);
    --accent-color-3: #FFFBF3;
    --accent-color-5: #F2F4FF;
  
    /* Source Aset */
    --img-hero: url(https://cdn.siap.id/s3/PAUD/diklat-teknis-paud/img_hero.svg);
    --img-separator: url(https://cdn.siap.id/s3/PAUD/diklat-teknis-paud/img_separator.svg);
    --img-foot: url(https://cdn.siap.id/s3/PAUD/diklat-teknis-paud/img_foot.svg);
  }
  
  * {
    font-family: 'Poppins', sans-serif;
  }
  
  body {
    color: var(--dark-color)
  }
  
  p {
    line-height: 1.8rem;
  }
  
  ol li,
  ul li {
    margin: 1rem 0;
    padding-left: 1rem;
  }
  
  #aktivitas ul,
  #jadwal ul {
    list-style-type: none;
    position: relative;
  }
  
  #aktivitas ul li::marker,
  #jadwal ul li::marker {
    font-family: 'Font Awesome 5 Free';
    color: var(--accent-color-7);
  }
  
  #aktivitas ul li::marker {
    content: "\f058";
  }
  
  #jadwal ul li::marker {
    content: "\f192";
  }
  
  #jadwal ul::before {
    content: ' ';
    background-color: #f1f3ff;
    display: inline-block;
    position: absolute;
    left: .88rem;
    width: 4px;
    height: 100%;
    z-index: -99;
  }
  
  .bg-main {
    background-color: var(--main-color);
  }
  
  .bg-accent-1 {
    background-color: var(--accent-color-1);
  }
  
  .bg-card-lini {
    background-color: var(--accent-color-5);
    color: var(--main-color);
  }
  
  .bg-dark-opacity {
    background-color: var(--dark-opacity);
    border: 10px solid rgba(255, 255, 255, 0.5) !important;
  }
  
  .txt-color-main {
    color: var(--main-color);
  }
  
  .img_sertif {
    margin: 0;
    top: -40px;
    right: -100px;
  }
  
  .navbar .nav-link,
  .navbar figcaption {
    color: #fff !important;
  }
  
  /* ===================================================================================================== */
  /*==== css ubah navbar jadi solid ketika di scroll ====*/
  .navbar.scrolled .container {
    background-color: var(--main-color);
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.4s;
    border-radius: 10rem;
  }
  
  .navbar .navbar-brand .logo2 {
    display: none;
  }
  
  .navbar.scrolled .logo1 {
    display: none;
  }
  
  .navbar.scrolled .navbar-brand .logo2 {
    display: block;
  }
  
  /* ===================================================================================================== */
  
  .btn {
    padding: .78rem 1.6rem;
  }
  
  .hero,
  .separator,
  .footer {
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }
  
  .hero {
    /* background-image: var(--img-hero); */
    background: linear-gradient(90deg, rgba(31, 45, 87, 100), rgba(31, 45, 87, 0.3)), var(--img-hero);
    background-size: cover;
    background-color: var(--main-color);
    background-repeat: no-repeat;
    height: 100vh;
  }
  
  .separator {
    background-image: var(--img-separator);
    height: 25rem;
  }
  
  .footer {
    background-image: var(--img-foot);
    background-color: var(--accent-color-6);
    height: 42rem;
    padding-top: 10rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  
  .accordion-header button {
    font-weight: 500;
  }
  
  .accordion-button:not(.collapsed) {
    background-color: white;
    box-shadow: none;
  }
  
  #sertif .card::before,
  #sertif .card::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: transparent;
    z-index: -2;
  }
  
  #sertif .card::before {
    top: 2rem;
    left: -6rem;
    border: 50px solid var(--accent-color-2);
  }
  
  #sertif .card::after {
    top: 9rem;
    right: -8rem;
    border: 50px solid var(--accent-color-8);
  }
  
  .obj_lini {
    position: absolute;
    top: -4rem;
    right: 0;
    height: 8rem;
  }
  
  .accordion-item:not(:first-of-type) {
    border: 1px solid rgb(220, 221, 228);
    margin-top: 10px;
  }
  
  /* ===================================================================================================== */
  /*==== Media Query Responsive ====*/
  
  /* XX-Large devices (larger desktops, 1920px and up) */
  @media (min-width: 1920px) {
    .hero {
      height: 130vh;
    }
  
    .footer {
      height: 58rem;
    }
  
    .separator {
      height: 35rem;
    }
  
  }
  
  
  /* `lg` applies to medium devices (tablets, less than 992px) */
  @media (max-width: 991.98px) {
    .hero {
      height: 70vh;
    }
  
    .img_sertif {
      margin: 0;
      top: -51px;
      right: -50px;
    }
  
    #sertif .card::before {
      top: -4rem;
      left: -3rem;
    }
  
    #sertif .card::after {
      top: 14rem;
      right: -3rem;
    }
  
    .separator {
      height: 15rem;
    }
  
    .footer {
      padding-top: 2rem;
      height: 25rem;
    }
  
    .navbar-toggler {
      background-color: #fff;
      border-radius: 100% !important;
    }
  
    .navbar-collapse .nav-link {
      color: #2c2b2b !important;
    }
  }
  
  /* Small devices (landscape phones, 576px and down) */
  @media (max-width: 576px) {
    .hero {
      height: 100vh;
      margin-top: 5rem;
    }
  
    #sertif .card::before,
    #sertif .card::after {
      display: none;
    }
  
    .accent_obj img {
      transform: rotate(90deg);
      height: 3rem;
      position: absolute;
      left: 0;
    }
  
    .separator {
      height: 8rem;
    }
  
    .obj_lini {
      height: 4rem;
      top: -2rem;
    }
  
    .text-lini {
      font-size: 1rem;
    }
  
    .footer {
      height: 30rem;
      padding-top: 10rem;
    }
  
    .footer .fs-1 {
      color: #fff;
    }
  
    .footer p {
      font-size: .8rem;
    }
  
    .navbar-toggler {
      background-color: #fff;
      border-radius: 100% !important;
    }
  
    .navbar-toggler-icon {
      width: .7em;
      stroke: #fff;
    }
  
    .offcanvas-header,
    .offcanvas-body,
    .offcanvas {
      width: 260px !important;
    }
  
    .navbar.scrolled .nav-link {
      color: var(--dark-color) !important;
    }
  
    #linimasa .lini-mobile {
      max-width: 100%;
      height: auto;
    }
  
  }