/* ===================================================
   Buzzle Legal Pages
   privacy-policy.php
   terms-and-conditions.php
=================================================== */

:root {

    --primary: #2d8a96;
    --primary-dark: #1d5c67;
    --secondary: #f5fafb;

    --text: #555;
    --heading: #333;

    --border: #e6ecf0;

    --shadow: 0 12px 35px rgba(0, 0, 0, .08);

    --radius: 18px;

}

html {
    scroll-behavior: smooth;
}

body {

    font-family: 'Gotham Narrow Book';
    background: #f6f8fb;
    color: var(--text);

}

/*---------------------------------------------------
Hero
---------------------------------------------------*/

.legal-hero {

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    color: #fff;

    padding: 80px 20px;

    text-align: center;

}

.legal-hero h1 {

    font-family: 'Gotham Narrow Medium';

    font-size: 42px;

    margin-bottom: 12px;

    color: #fff;

}

.legal-hero p {

    font-size: 17px;

    opacity: .9;

    margin: 0;

}

/*---------------------------------------------------
Wrapper
---------------------------------------------------*/

.legal-wrapper {

    max-width: 1100px;

    margin: auto;

    margin-top: -45px;

    margin-bottom: 80px;

}

/*---------------------------------------------------
Card
---------------------------------------------------*/

.legal-card {

    background: #fff;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 50px;

}

/*---------------------------------------------------
Table of contents
---------------------------------------------------*/

.toc {

    background: var(--secondary);

    border-left: 5px solid var(--primary);

    border-radius: 14px;

    padding: 30px;

    margin-bottom: 45px;

}

.toc h4 {

    color: var(--heading);

    font-family: 'Gotham Narrow Medium';

    margin-bottom: 18px;

}

.toc ul {

    margin: 0;

    padding-left: 20px;

}

.toc li {

    margin-bottom: 12px;

}

.toc a {

    color: var(--primary);

    text-decoration: none;

    transition: .25s;

}

.toc a:hover {

    color: var(--primary-dark);

    padding-left: 5px;

}

/*---------------------------------------------------
Content
---------------------------------------------------*/

section {

    margin-top: 55px;

}

section:first-of-type {

    margin-top: 20px;

}

section h2 {

    color: var(--primary);

    font-family: 'Gotham Narrow Medium';

    font-size: 30px;

    margin-bottom: 20px;

    position: relative;

    padding-bottom: 10px;

}

section h2::after {

    content: "";

    width: 70px;

    height: 3px;

    background: var(--primary);

    position: absolute;

    bottom: 0;

    left: 0;

    border-radius: 20px;

}

section h3 {

    font-family: 'Gotham Narrow Medium';

    color: var(--heading);

    margin-top: 30px;

    margin-bottom: 15px;

}

section h4 {

    font-family: 'Gotham Narrow Medium';

    color: var(--heading);

    margin-top: 25px;

    margin-bottom: 12px;

}

section p {

    line-height: 1.9;

    font-size: 16px;

    margin-bottom: 18px;

}

section ul {

    padding-left: 22px;

}

section li {

    line-height: 1.9;

    margin-bottom: 12px;

}

/*---------------------------------------------------
Info Box
---------------------------------------------------*/

.info-box {

    background: #f7fbfc;

    border-left: 4px solid var(--primary);

    padding: 20px 25px;

    border-radius: 12px;

    margin: 25px 0;

}

/*---------------------------------------------------
Contact
---------------------------------------------------*/

.contact-box {

    background: #f8fbfc;

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 30px;

}

.contact-box strong {

    color: var(--primary);

}

/*---------------------------------------------------
Tables
---------------------------------------------------*/

table {

    width: 100%;

    border-collapse: collapse;

    margin: 30px 0;

}

table th {

    background: var(--primary);

    color: #fff;

    padding: 14px;

    text-align: left;

}

table td {

    border: 1px solid var(--border);

    padding: 14px;

}

/*---------------------------------------------------
Blockquote
---------------------------------------------------*/

blockquote {

    border-left: 5px solid var(--primary);

    background: #fafafa;

    padding: 20px;

    font-style: italic;

    margin: 25px 0;

}

/*---------------------------------------------------
Links
---------------------------------------------------*/

a {

    color: var(--primary);

}

a:hover {

    color: var(--primary-dark);

}

/*---------------------------------------------------
Horizontal line
---------------------------------------------------*/

hr {

    border: none;

    height: 1px;

    background: #ececec;

    margin: 50px 0;

}

/*---------------------------------------------------
Print
---------------------------------------------------*/

@media print {

    .navbar,

    footer {

        display: none;

    }

    .legal-card {

        box-shadow: none;

    }

}

/*---------------------------------------------------
Responsive
---------------------------------------------------*/

@media(max-width:992px) {

    .legal-card {

        padding: 35px;

    }

}

@media(max-width:768px) {

    .legal-hero {

        padding: 60px 20px;

    }

    .legal-hero h1 {

        font-size: 32px;

    }

    .legal-hero p {

        font-size: 15px;

    }

    .legal-wrapper {

        margin-top: -25px;

        margin-bottom: 50px;

    }

    .legal-card {

        padding: 25px;

        border-radius: 14px;

    }

    .toc {

        padding: 20px;

    }

    section {

        margin-top: 40px;

    }

    section h2 {

        font-size: 24px;

    }

    section p,

    section li {

        font-size: 15px;

    }

}

@media(max-width:480px) {

    .legal-hero h1 {

        font-size: 28px;

    }

    .legal-card {

        padding: 20px;

    }

    .toc {

        padding: 16px;

    }

}