/* --- 1. Font Loading --- */
@font-face {
    font-family: 'Diavlo';
    src: local('Diavlo'), url('../fonts/woff2/Diavlo_BOLD_II_37.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* --- 2. Typography Utilities --- */
.font-diavlo {
    font-family: 'Diavlo', sans-serif;
}

.brand-gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.font-diavlo.brand-gradient-text {
    font-size: 3.5rem;
}

/* --- 3. The Frame (Container) --- */
.terms-frame {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 5rem 6rem; /* INCREASED: Wider spacing inside the white box */
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    margin-top: 3rem;
    margin-bottom: 5rem;
}

/* --- NEW: Main Header Area Spacing --- */
/* You will need to add this class to the div holding the "VARPIX" title in your blade file */
.terms-header-area {
    margin-bottom: 6rem; /* INCREASED: Huge gap between "VARPIX" and "1. Introduction" */
    text-align: center;
}

/* --- 4. Section Spacing (Between 1. Introduction and 2. Services...) --- */
.terms-section {
    margin-bottom: 5rem;  /* INCREASED: More space between numbered sections */
    padding-bottom: 3rem;
    border-bottom: 1px solid #f3f4f6;
}

.terms-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* --- 5. Title to Text Spacing --- */
.terms-section h2 {
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 2.5rem; /* INCREASED: Much more space below the section titles */
    font-size: 1.5rem;
}

.terms-section h3 {
    font-weight: 600;
    color: #374151;
    margin-top: 2.5rem;   /* Space above sub-headings (4.1, 4.2) */
    margin-bottom: 1.5rem; /* Space below sub-headings */
    font-size: 1.15rem;
}

/* --- 6. Content Spacing --- */
.terms-section p {
    margin-bottom: 1.5rem; /* Space between paragraphs */
    line-height: 1.8;
    color: #4b5563;
}

.terms-section ul, 
.terms-section ol {
    padding-left: 1.5rem;
    margin-top: 1.5rem;    /* Space between text and the list */
    margin-bottom: 2rem;   /* Space after the list */
}

.terms-section li {
    margin-bottom: 1.2rem; /* INCREASED: Space between list items */
    color: #4b5563;
    line-height: 1.7;
}