/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
    .timeline-step {
        opacity: 0;
        transform: translateY(10px);
        animation-name: bloggerFadeUp;
        animation-duration: 0.6s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes bloggerFadeUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .bg-lightgrey {
    background-color: lightgrey !important;
}
    /* Link2Star – Blogger Terms UI
   Uses Inter if available (falls back gracefully). */

/* Optional: load Inter (keep if you want) */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */

.terms{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  color: #1f2937;
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

/* Head */
.terms-head{
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  padding: 18px 16px;
}

.terms-head h1{
  margin: 0 0 10px 0;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.terms-lead{
  margin: 0 0 10px 0;
  font-size: 14.5px;
  color: rgba(31, 41, 55, 0.85);
}

.terms-lead:last-child{
  margin-bottom: 0;
}

/* Divider */
.terms-divider{
  border: 0;
  height: 1px;
  background: rgba(15, 23, 42, 0.10);
  margin: 16px 0;
}

/* Sections */
.terms-section{
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 14px 0;
}

.terms-section h2{
  margin: 0 0 12px 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Item blocks inside section */
.terms-item{
  border-radius: 12px;
  padding: 12px;
  background: rgba(2, 6, 23, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
  margin: 0 0 10px 0;
}

.terms-item:last-child{
  margin-bottom: 0;
}

.terms-item h3{
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(31, 41, 55, 0.85);
  letter-spacing: 0.01em;
}

.terms-item p{
  margin: 0;
  font-size: 14px;
}

.terms-item p + p{
  margin-top: 8px;
}

/* Lists */
.terms-list{
  margin: 10px 0 0 0;
  padding-left: 18px;
}

.terms-list li{
  margin: 6px 0;
  font-size: 14px;
}

.terms-list li::marker{
  color: rgba(31, 41, 55, 0.55);
}

/* Links (if any) */
.terms a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(31, 41, 55, 0.35);
  text-underline-offset: 2px;
}
.terms a:hover{
  text-decoration-color: rgba(31, 41, 55, 0.75);
}

/* Mobile-first tweaks */
@media (max-width: 480px){
  .terms{
    padding: 12px;
  }
  .terms-head{
    padding: 16px 14px;
    border-radius: 14px;
  }
  .terms-head h1{
    font-size: 19px;
  }
  .terms-section{
    padding: 14px;
    border-radius: 14px;
  }
  .terms-item{
    padding: 12px 10px;
  }
  .terms-item p,
  .terms-list li{
    font-size: 13.5px;
  }
}

/* Desktop polish */
@media (min-width: 992px){
  .terms{
    padding: 24px;
  }
  .terms-head{
    padding: 22px 22px;
  }
  .terms-section{
    padding: 18px 18px;
  }
  .terms-head h1{
    font-size: 26px;
  }
  .terms-lead{
    font-size: 15px;
  }
}