/* ===============================
   Privacy Hero Section
================================ */

.privacy-hero{
    width:100%;
    height:600px;
    padding-top:120px; /* space for fixed navbar */

    background-image: url("../img/hero-privacy.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* Center content */

.privacy-hero-content{
    max-width:850px;
    margin:auto;
    text-align:center;
    padding:0 20px;
}

/* Heading */

.privacy-hero h1{
    font-family:"Figtree", sans-serif;
    font-weight:600;
    font-size:64px;
    line-height:120%;
    letter-spacing:0%;
    text-align:center;
    text-transform:capitalize;
    margin-bottom:20px;
    color:#1E3B40;
}

/* Paragraph */

.privacy-hero p{
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:700;
    font-size:20px;
    line-height:140%;
    letter-spacing:0%;
    text-align:center;
    color:#316972;
    max-width:600px;
    margin:auto;
}

/* ===============================
   Responsive
================================ */

@media (max-width:992px){

.privacy-hero{
    height:500px;
    padding-top:110px;
}

.privacy-hero h1{
    font-size:48px;
}

.privacy-hero p{
    font-size:18px;
}

/* Fix navbar menu button */

.navbar-toggler{
    background:#173f42;
    color:#fff;
    border-radius:25px;
    padding:6px 16px;
    border:none;
    font-size:14px;
}

.navbar-toggler.is-active{
    background:#173f42;
    color:#fff;
}

.navbar-toggler:focus{
    box-shadow:none;
}

/* Keep navbar transparent on hero */

.header-top{
    background:transparent !important;
}

.header-scroll{
    background:transparent !important;
}

.navbar-expand-lg.header-is-active{
    background:transparent !important;
}

}

@media (max-width:768px){

.privacy-hero{
    height:420px;
    padding-top:100px;
    background-position:top center;
}

.privacy-hero h1{
    font-size:36px;
}

.privacy-hero p{
    font-size:16px;
}

/* keep navbar transparent */

.header-top{
    background:transparent !important;
    box-shadow:none !important;
}

.header-scroll{
    background:transparent !important;
}

.navbar-expand-lg.header-is-active{
    background:transparent !important;
}

.navbar{
    background:transparent !important;
}

}

@media (max-width:480px){

.privacy-hero{
    height:360px;
    padding-top:90px;
}

.privacy-hero h1{
    font-size:28px;
}

.privacy-hero p{
    font-size:15px;
}

}

/* ============================
   Device Compatibility Section
============================ */

.device-compatibility{
    padding:80px 0;
    background:#f5f7f8;
}

/* column spacing */

.device-column{
    margin-bottom:40px;
}

/* Center the compatibility content */

.devices-wrapper{
    max-width:1000px;
    margin:0 auto;
    display: block;
}

/* headings */

.device-column h4{
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight:600;
    font-size:20px;
    margin-bottom:15px;
    color:#316972;
}

.device-column h5{
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight:600;
    font-size:17px;
    margin-top:20px;
    margin-bottom:10px;
    color:#316972;
}

/* list styling */

.device-column ul{
    padding-left:18px;
    margin-bottom:10px;
}

.device-column ul li{
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:500;
    font-size:16px;
    line-height:160%;
    letter-spacing:0%;
    color:#316972;
}

/* ============================
   Responsive
============================ */

@media (max-width:992px){

.device-compatibility{
    padding:60px 30px;
}

}

@media (max-width:768px){

.device-column h4{
    font-size:18px;
}

.device-column ul li{
    font-size:15px;
}

}

/* ===============================
   Compatibility Check Section
================================ */

.compatibility-check{
    padding:80px 0 40px;
    text-align:center;
    background:#ffffff;
}

/* center box */

.compatibility-box{
    max-width:800px;
    margin:auto;
}

/* heading */

.compatibility-box h2{
    font-family:"Figtree", sans-serif;
    font-weight:600;
    font-size:40px;
    line-height:120%;
    margin-bottom:15px;
    color:#1E3B40;
}

/* paragraph */

.compatibility-box p{
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:500;
    font-size:16px;
    line-height:160%;
    color:#4b6b70;
    margin-bottom:30px;
}

/* button */

.btn-stuck{
    display:inline-block;
    background:#F6B400;
    color:#000;
    padding:12px 28px;
    border-radius:30px;
    font-family:"Bricolage Grotesque", sans-serif;
    font-weight:600;
    font-size:16px;
    text-decoration:none;
    transition:0.3s;
}

.btn-stuck:hover{
    background:#e2a500;
}

@media (max-width:768px){

.compatibility-check{
    padding:60px 0 20px;
}

.compatibility-box h2{
    font-size:30px;
}

.compatibility-box p{
    font-size:15px;
}

}