/*=========================================
GOOGLE FONTS
=========================================*/

:root{
    --primary:#274F94;
    --secondary:#4A90E2;
    --dark:#1F2D3D;
    --text:#5B6574;
    --light:#F6F9FC;
    --white:#ffffff;
    --border:#E2EAF4;
    --success:#EAF4FF;
    --shadow:0 15px 45px rgba(0,0,0,.08);
    --radius:16px;
    --transition:.35s ease;
}

/*=========================================
RESET
=========================================*/




/*=========================================
BUTTON
=========================================*/






/*=========================================
MAIN AREA
=========================================*/
.page-box{background-image:url(../images/privacy-bg.png)!important;}
.policy-area{

    padding:80px 0;

    background:var(--light);

}

.policy-wrapper{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:40px;

}

.cards ul, .cards ol, .cards li{list-style-type:none; font-size:18px;}
.cards p{padding-bottom:20px; font-size:18px;}
.cards h2{font-size:30px; color:#274F94; padding-bottom:20px;}
.feature-box h4, .icon-boxs h4, .security-box h4{font-size:20px; font-family: Inter;}
.feature-box li{text-align:left; font-size:18px;} 

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

.policy-content{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.cards{

    background:#fff;

    border-radius:var(--radius);

    padding:45px;

    box-shadow:var(--shadow);

}

.cards h2{

    display:flex;

    align-items:center;

    gap:14px;

}

.cards h2 i{

    color:var(--primary);

}

.cards ul{

    margin-top:15px;

}

.cards li{

    margin-bottom:10px;

    padding-left:20px;

    position:relative;

}

.cards li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--secondary);

    font-weight:bold;

}

/*=========================================
GRIDS
=========================================*/

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:30px;

}

.icon-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:30px;

}

/*=========================================
FEATURE BOX
=========================================*/

.feature-box{

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

    border-radius:14px;

    padding:30px;

    transition:var(--transition);

}

.feature-box:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(39,79,148,.12);

}

.feature-box h4{

    margin-bottom:20px;

    display:flex;

    align-items:center;

    gap:10px;

}

.feature-box h4 i{

    color:var(--primary);

}

/*=========================================
ICON BOX
=========================================*/

.icon-boxs{

    text-align:center;

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

    border-radius:16px;

    padding:35px 25px;

    transition:.3s;

    background:#fff;

}

.icon-boxs:hover{

    transform:translateY(-8px);

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

}

.icon-boxs i, .contact-grid i{

    width:80px;
    height:80px;

    line-height:80px;

    border-radius:50%;

    background:#EDF5FF;

    color:var(--primary);

    font-size:34px;

    margin-bottom:20px;

}

.icon-boxs h4{

    margin-bottom:12px;

}

/*====================================================
HIGHLIGHT BOX (HIPAA & CONFIDENTIALITY)
====================================================*/

.highlight-box{
    display:flex;
    align-items:center;
    gap:30px;
    background:linear-gradient(135deg,#274F94,#4A90E2);
    color:#fff;
    padding:45px;
    border-radius:16px;
    box-shadow:0 15px 45px rgba(39,79,148,.20);
}

.highlight-box h2{
    color:#fff;
    margin-bottom:15px;
}

.highlight-box p{
    color:rgba(255,255,255,.95);
    margin:0;
}

.highlight-box .icon{
    width:95px;
    height:95px;
    min-width:95px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    display:flex;
    justify-content:center;
    align-items:center;
}

.highlight-box .icon i{
    font-size:42px;
    color:#fff;
}

/*====================================================
SECURITY BOXES
====================================================*/

.security-box{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:35px 25px;
    text-align:center;
    transition:.35s ease;
}

.security-box:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.security-box i{
    width:80px;
    height:80px;
    line-height:80px;
    border-radius:50%;
    background:#EDF5FF;
    color:var(--primary);
    font-size:34px;
    margin-bottom:20px;
}

.security-box h4{
    margin:0;
}

/*====================================================
CONTACT CARD
====================================================*/

.contact-card{
    background:#fff;
    border-radius:16px;
    padding:50px;
    text-align:center;
    box-shadow:var(--shadow);
}

.contact-card h2{
    margin-bottom:15px;
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:35px; font-weight:600;
}

.contact-grid div{
    padding:30px 20px;
    background:#F8FBFF;
    border:1px solid var(--border);
    border-radius:14px;
    transition:.35s;
}

.contact-grid div:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(39,79,148,.10);
}

.contact-grid i{
    display:block;
    font-size:30px;
    color:var(--primary);
   margin: 0 auto 15px;
}



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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#eef3f9;
}

::-webkit-scrollbar-thumb{
    background:#274F94;
    border-radius:20px;
}

/*====================================================
TEXT SELECTION
====================================================*/

::selection{
    background:#274F94;
    color:#fff;
}

/*====================================================
SMOOTH HOVER EFFECTS
====================================================*/

.cards,
.feature-box,
.icon-boxs,
.security-box,
.contact-grid div{
    transition:all .35s ease;
}

.cards:hover{
    transform:translateY(-5px);
}

/*====================================================
TABLET
====================================================*/

@media (max-width:991px){


    .policy-wrapper{
        grid-template-columns:1fr;
    }

    .policy-sidebar{
        position:relative;
        top:0;
    }

    .grid-2,
    .grid-3,
    .icon-grid,
    .contact-grid{
        grid-template-columns:1fr 1fr;
    }

    nav ul{
        gap:20px;
    }

}

/*====================================================
MOBILE
====================================================*/

@media (max-width:767px){

   .cards h2 {
  font-size: 22px;}
.cards h4 {
  font-size: 18px; text-align:left;}
   .security-box h4, .icon-boxs h4{text-align:center;} 
.contact-card h2{text-align:left!important;}
    .cards,
    .sidebar-card,
    .contact-card{
        padding:30px;
    }

    .grid-2,
    .grid-3,
    .icon-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .highlight-box{
        flex-direction:column;
        text-align:center;
        padding:35px 25px;
    }

    .highlight-box .icon{
        margin-bottom:10px;
    }

    .btn{
        width:100%;
    }

}

/*====================================================
SMALL DEVICES
====================================================*/

@media (max-width:480px){

  

    .icon-boxs,
    .feature-box,
    .security-box{
        padding:25px;
    }

    .icon-boxs i,
    .security-box i, .contact-grid i{
        width:70px;
        height:70px;
        line-height:70px;
        font-size:28px;
    }

}

/*====================================================
FADE-IN ANIMATION
====================================================*/

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.cards,
.highlight-box,
.contact-card{
    animation:fadeUp .6s ease both;
}