* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Ensures the body takes full height of the viewport */
}

.content-box {
    width: 80%;
    border: none;
    padding: 16px 24px;

    /* horizontal centering */
    margin-left: auto;
    margin-right: auto;

    /* keep it at the top */
    margin-top: 20px;
}

.content-box p {
    text-align: justify;
    text-justify: inter-word;
}


.common-header {
    margin-top: 16px;
    margin-bottom: 6px;
}

.common-p {
    margin-bottom: 12px;
}

.common-ul {
    padding-left: 24px;   /* required for bullet indentation */
    margin-bottom: 16px;
}

.use-case h4 {
    margin-bottom: 6px;
}

.content-box h3.common-header {
    margin-top: 40px;  /* more space above main sections */
    margin-bottom: 16px; /* space below the heading */
}

.content-box h4 {
    margin-top: 20px;   /* space above each use case title */
    margin-bottom: 6px; /* space below each use case title */
}

.use-case {
    margin-bottom: 20px;  /* space between use cases */
    padding-left: 20px;   /* indentation for readability */
}


.cta-section {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn {
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

.btn-primary {
    background-color: #57b894;
    color: white;
}

.btn-secondary {
    border: 2px solid #57b894;
    color: #57b894;
}
.btn-primary:hover{
    background-color: #459c7a;
}

.btn-secondary:hover{
    background-color: #E3E4E5;
}