/* ===========================================================
   JRR GO
   Shared Legal Pages Stylesheet
   Version : 1.0
   =========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#f4f7fb;

    color:#333333;

    line-height:1.8;

}

a{

    color:#0b63ce;

    text-decoration:none;

    transition:.3s;

}

a:hover{

    color:#084298;

}

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

/* ===========================
   HEADER
=========================== */

.header{

    background:#0B63CE;

    color:#ffffff;

    padding:50px 20px;

    text-align:center;

    box-shadow:0 4px 15px rgba(0,0,0,.15);

}

.header h1{

    font-size:42px;

    margin-bottom:12px;

    font-weight:bold;

}

.header p{

    font-size:20px;

    opacity:.95;

}

/* ===========================
   NAVIGATION
=========================== */

.navbar{

    background:#ffffff;

    border-bottom:1px solid #e4e4e4;

    position:sticky;

    top:0;

    z-index:999;

}

.navbar .container{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:25px;

    padding:18px;

}

.navbar a{

    font-weight:600;

    color:#222;

    font-size:15px;

}

.navbar a:hover{

    color:#0B63CE;

}

/* ===========================
   HERO
=========================== */

.hero{

    background:linear-gradient(135deg,#0B63CE,#1F8FFF);

    color:#ffffff;

    text-align:center;

    padding:70px 20px;

}

.hero h2{

    font-size:40px;

    margin-bottom:20px;

}

.hero p{

    font-size:18px;

    max-width:900px;

    margin:15px auto;

}

/* ===========================
   CONTENT
=========================== */

.card{

    background:#ffffff;

    margin:35px 0;

    padding:35px;

    border-radius:12px;

    box-shadow:0 6px 20px rgba(0,0,0,.08);

}

.card h2{

    color:#0B63CE;

    margin-bottom:18px;

    font-size:30px;

}

.card h3{

    margin-top:25px;

    margin-bottom:12px;

    color:#222;

    font-size:22px;

}

.card p{

    margin-bottom:18px;

    text-align:justify;

}

.card ul{

    margin-left:25px;

    margin-bottom:20px;

}

.card ol{

    margin-left:25px;

    margin-bottom:20px;

}

.card li{

    margin-bottom:10px;

}

/* ===========================
   TABLE
=========================== */

table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

    margin-bottom:20px;

}

table th{

    background:#0B63CE;

    color:#ffffff;

    padding:15px;

}

table td{

    border:1px solid #dddddd;

    padding:15px;

}

/* ===========================
   BUTTONS
=========================== */

.button{

    display:inline-block;

    background:#0B63CE;

    color:#ffffff;

    padding:14px 28px;

    border-radius:8px;

    font-weight:bold;

}

.button:hover{

    background:#084298;

    color:#ffffff;

}

/* ===========================
   ALERT BOXES
=========================== */

.notice{

    background:#eaf4ff;

    border-left:5px solid #0B63CE;

    padding:20px;

    margin:20px 0;

    border-radius:8px;

}

.warning{

    background:#fff8e5;

    border-left:5px solid #ffc107;

    padding:20px;

    margin:20px 0;

    border-radius:8px;

}

.danger{

    background:#fdecec;

    border-left:5px solid #dc3545;

    padding:20px;

    margin:20px 0;

    border-radius:8px;

}
/* ===========================
   CONTACT SECTION
=========================== */

.contact-card{

    background:#ffffff;

    border:1px solid #dfe7f1;

    border-radius:12px;

    padding:25px;

    margin:25px 0;

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

}

.contact-card h3{

    color:#0B63CE;

    margin-bottom:15px;

}

.contact-card p{

    margin-bottom:10px;

}

/* ===========================
   CODE BLOCKS
=========================== */

pre{

    background:#f7f7f7;

    border:1px solid #dddddd;

    border-radius:8px;

    padding:20px;

    overflow-x:auto;

    margin:20px 0;

}

code{

    font-family:Consolas, monospace;

    color:#c7254e;

}

/* ===========================
   BLOCKQUOTE
=========================== */

blockquote{

    border-left:5px solid #0B63CE;

    background:#eef5ff;

    padding:20px;

    margin:25px 0;

    font-style:italic;

}

/* ===========================
   IMAGES
=========================== */

img{

    max-width:100%;

    height:auto;

    border-radius:10px;

}

/* ===========================
   HORIZONTAL RULE
=========================== */

hr{

    border:none;

    border-top:1px solid #dddddd;

    margin:35px 0;

}

/* ===========================
   UTILITIES
=========================== */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-left{

    text-align:left;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mt-40{

    margin-top:40px;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-40{

    margin-bottom:40px;

}

/* ===========================
   FOOTER
=========================== */

footer{

    background:#0B63CE;

    color:#ffffff;

    margin-top:60px;

    padding:35px 20px;

    text-align:center;

}

footer p{

    margin:8px 0;

    font-size:15px;

}

footer a{

    color:#ffffff;

    text-decoration:underline;

}

footer a:hover{

    opacity:.85;

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eeeeee;

}

::-webkit-scrollbar-thumb{

    background:#0B63CE;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#084298;

}

/* ===========================
   SIMPLE FADE ANIMATION
=========================== */

.card{

    animation:fadeIn .5s ease-in-out;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
   RESPONSIVE DESIGN
=========================== */

@media (max-width:992px){

    .header h1{

        font-size:34px;

    }

    .hero h2{

        font-size:32px;

    }

    .card{

        padding:28px;

    }

}

@media (max-width:768px){

    .container{

        width:95%;

    }

    .header{

        padding:35px 15px;

    }

    .header h1{

        font-size:30px;

    }

    .header p{

        font-size:18px;

    }

    .hero{

        padding:50px 20px;

    }

    .hero h2{

        font-size:28px;

    }

    .hero p{

        font-size:16px;

    }

    .navbar .container{

        gap:15px;

        padding:15px;

    }

    .navbar a{

        font-size:14px;

    }

    .card{

        padding:22px;

    }

    .card h2{

        font-size:24px;

    }

    .card h3{

        font-size:20px;

    }

    table{

        display:block;

        overflow-x:auto;

    }

}

@media (max-width:480px){

    .header h1{

        font-size:26px;

    }

    .hero h2{

        font-size:24px;

    }

    .card{

        padding:18px;

    }

    .button{

        display:block;

        width:100%;

        text-align:center;

    }

}

/* ===========================
   PRINT FRIENDLY
=========================== */

@media print{

    .navbar{

        display:none;

    }

    .hero{

        padding:20px;

    }

    body{

        background:#ffffff;

        color:#000000;

    }

    .card{

        box-shadow:none;

        border:1px solid #cccccc;

        break-inside:avoid;

    }

    footer{

        background:#ffffff;

        color:#000000;

        border-top:1px solid #cccccc;

    }

}

/* ===========================================================
   END OF STYLESHEET
=========================================================== */