/* =====================================================
   AGAPE FAMILY KINGDOM
   EQUALITY PAGE CSS
   CLEAN VERSION
====================================================== */


/* =====================================================
   GLOBAL
====================================================== */


::selection{

    background:var(--verde-salvia);

    color:white;

}



/* =====================================================
   PAGE
====================================================== */


.equality-page{

    background:var(--fundo-pagina);

    overflow:hidden;

}



.container{

    width:100%;

    max-width:1100px;

    margin:0 auto;

    padding:0 20px;

}



.narrow{

    max-width:850px;

}





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


.equality-hero{

    background:var(--verde-salvia);

    padding:150px 20px;

    text-align:center;

}



.equality-hero .section-tag{

    color:white;

}



.equality-hero h1{


    max-width:900px;

    margin:25px auto;


    font-family:"Cormorant Garamond",serif;


    font-size:4rem;


    font-weight:600;


    line-height:1.1;


    color:white;


    letter-spacing:.5px;


}



.equality-hero p{


    max-width:750px;


    margin:30px auto 0;


    color:white;


    font-family:"Inter",sans-serif;


    font-size:1.15rem;


    line-height:1.8;


}







/* =====================================================
   INTRODUCTION
====================================================== */


.page-intro{


    padding:100px 20px;


    text-align:center;


}



.page-intro h2{


    font-family:"Cormorant Garamond",serif;


    font-size:3rem;


    font-weight:600;


    color:var(--texto-contraste);


    line-height:1.2;


    margin:25px 0;


}



.page-intro p{


    font-size:1.1rem;


    line-height:1.9;


    color:#555;


    margin-bottom:20px;


}







/* =====================================================
   SECTION STRUCTURE
====================================================== */


.commitment,
.equality-law,
.christian-identity,
.reporting,
.policy-review,
.company-information{


    padding:100px 20px;
    align-items:center;
    text-align:center;


}







/* =====================================================
   SECTION TAG
====================================================== */


.section-tag{


    display:inline-block;


    color:#c8873d;


    font-family:"Inter",sans-serif;


    font-size:.85rem;


    font-weight:700;


    letter-spacing:3px;


    text-transform:uppercase;


    margin-bottom:15px;


}







/* =====================================================
   TITLES
====================================================== */


.commitment h2,
.principles h2,
.equality-law h2,
.christian-identity h2,
.reporting h2,
.policy-review h2{


    font-family:"Cormorant Garamond",serif;


    font-size:2.8rem;


    font-weight:600;


    color:var(--texto-contraste);


    line-height:1.2;


    margin-bottom:25px;


}







/* =====================================================
   PARAGRAPHS
====================================================== */


.commitment p,
.equality-law p,
.christian-identity p,
.reporting p,
.policy-review p{


    font-family:"Inter",sans-serif;


    font-size:1.05rem;


    line-height:1.9;


    color:#555;


    margin-bottom:20px;


}







/* =====================================================
   DIVIDER
====================================================== */


.divider{


    width:80px;


    height:3px;


    background:#d18b47;


    margin:30px auto 45px;

    


}
/* =====================================================
   PRINCIPLES SECTION
====================================================== */


.principles{


    background:var(--bege-areia);


    padding:110px 20px;

    text-align:center;


}






/* =====================================================
   PRINCIPLES GRID
====================================================== */


.principles-grid{


    display:grid;


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


    gap:30px;


    margin-top:55px;


}






/* =====================================================
   PRINCIPLE CARD
====================================================== */


.principle-card{


    background:white;


    padding:40px 30px;


    text-align:center;


    border-radius:18px;


    border:1px solid transparent;


    box-shadow:0 10px 30px rgba(0,0,0,.06);


    transition:.35s ease;


}






.principle-card:hover{


    transform:translateY(-10px);


    border-color:var(--verde-salvia);


    box-shadow:0 20px 40px rgba(0,0,0,.12);


}







/* =====================================================
   PRINCIPLE SYMBOL
====================================================== */


.principle-symbol{


    width:70px;


    height:70px;


    margin:0 auto 25px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:var(--verde-salvia);


    color:white;


    font-family:"Cormorant Garamond",serif;


    font-size:2rem;


    font-weight:700;


    transition:.35s ease;


}






.principle-card:hover .principle-symbol{


    transform:scale(1.1);


}







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


.principle-card h3{


    font-family:"Cormorant Garamond",serif;


    font-size:1.8rem;


    font-weight:600;


    color:var(--texto-contraste);


    margin-bottom:18px;


}






.principle-card p{


    font-family:"Inter",sans-serif;


    font-size:.98rem;


    line-height:1.7;


    color:#555;


    margin:0;


}

/* =====================================================
   PROTECTED CHARACTERISTICS
====================================================== */

.protected-list{

    margin-top:40px;

    padding-top:25px;

    border-top:1px solid #d7d7d7;

}

.protected-list p{

    font-family:"Inter",sans-serif;

    font-size:1.05rem;

    line-height:2;

    color:#555;

}

.protected-list strong{

    color:var(--texto-contraste);

    font-weight:600;

}




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


.principle-card{


    animation:fadeUp .7s ease both;


}






@keyframes fadeUp{


    from{


        opacity:0;


        transform:translateY(25px);


    }



    to{


        opacity:1;


        transform:translateY(0);


    }


}
/* =====================================================
   CHRISTIAN IDENTITY
====================================================== */


.christian-identity{


    background:white;


}







/* =====================================================
   REPORTING
====================================================== */


.reporting{


    background:#f7f7f7;


}







/* =====================================================
   POLICY REVIEW
====================================================== */


.policy-review{


    text-align:center;


}



.policy-review .divider{


    margin-left:auto;


    margin-right:auto;


}







/* =====================================================
   COMPANY INFORMATION
====================================================== */


.company-information{


    background:#2f332c;


    text-align:center;


    padding:110px 20px;


}






.company-information h3{


    font-family:"Cormorant Garamond",serif;


    font-size:2.3rem;


    font-weight:600;


    color:white;


    margin-bottom:25px;


}






.company-information p{


    max-width:650px;


    margin:0 auto 15px;


    color:#dddddd;


    font-family:"Inter",sans-serif;


    font-size:1.05rem;


    line-height:1.8;


}






.company-information strong{


    color:white;


}







/* =====================================================
   ACCESSIBILITY
====================================================== */


.principle-card:focus-within,
.protected-item:focus-within{


    outline:2px solid var(--verde-salvia);


    outline-offset:4px;


}







/* =====================================================
   SMOOTH ELEMENTS
====================================================== */


a,
button,
.principle-card,
.protected-item,
.principle-symbol{


    transition:.35s ease;


}







/* =====================================================
   INTERNAL ANCHOR OFFSET
====================================================== */


.commitment,
.principles,
.equality-law,
.christian-identity,
.reporting,
.policy-review{


    scroll-margin-top:100px;


}







/* =====================================================
   STRONG TEXT
====================================================== */


.commitment strong,
.equality-law strong,
.christian-identity strong,
.reporting strong,
.policy-review strong{


    color:var(--texto-contraste);


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



/* =====================================================
   LARGE DESKTOP
====================================================== */


@media(max-width:1400px){


    .container{

        max-width:1000px;

    }



    .equality-hero h1{

        font-size:3.6rem;

    }


}







/* =====================================================
   DESKTOP / LAPTOP
====================================================== */


@media(max-width:1200px){

 .navbar {
    background-color: rgba(0, 0, 0, 0.8) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 0 20px;
    justify-content: space-between;
  }

    .principles-grid{


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


    }




    .equality-hero{


        padding:130px 20px;


    }



    .equality-hero h1{


        font-size:3.2rem;


    }




    .commitment h2,
    .principles h2,
    .equality-law h2,
    .christian-identity h2,
    .reporting h2,
    .policy-review h2{


        font-size:2.5rem;


    }


}







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


@media(max-width:992px){



    .equality-hero{


        padding:110px 20px;


    }





    .equality-hero h1{


        font-size:2.9rem;


    }





    .page-intro{


        padding:80px 20px;


    }





    .commitment,
    .principles,
    .equality-law,
    .christian-identity,
    .reporting,
    .policy-review,
    .company-information{


        padding:80px 20px;


    }



}







/* =====================================================
   TABLET PORTRAIT / IPAD
====================================================== */


@media(max-width:768px){



    .equality-hero{


        padding:90px 20px;


    }





    .equality-hero h1{


        font-size:2.5rem;


        line-height:1.15;


    }





    .equality-hero p{


        font-size:1rem;


    }





    .page-intro h2{


        font-size:2.2rem;


    }





    .page-intro p{


        font-size:1rem;


        line-height:1.8;


    }





    .principles-grid{


        grid-template-columns:1fr;


        gap:25px;


    }





    .commitment h2,
    .principles h2,
    .equality-law h2,
    .christian-identity h2,
    .reporting h2,
    .policy-review h2{


        font-size:2.1rem;


    }





    .principle-card{


        padding:35px 25px;


    }



}







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


@media(max-width:576px){



    .container{


        padding:0 18px;


    }





    .equality-hero{


        padding:75px 18px;


    }





    .equality-hero h1{


        font-size:2.1rem;


    }





    .section-tag{


        font-size:.75rem;


        letter-spacing:2px;


    }





    .page-intro h2{


        font-size:2rem;


    }





    .commitment,
    .principles,
    .equality-law,
    .christian-identity,
    .reporting,
    .policy-review,
    .company-information{


        padding:65px 18px;


    }





    .company-information h3{


        font-size:1.9rem;


    }




}







/* =====================================================
   EXTRA SMALL MOBILE
====================================================== */


@media(max-width:430px){



    .equality-hero h1{


        font-size:1.85rem;


    }





    .equality-hero p{


        font-size:.95rem;


    }





    .page-intro h2{


        font-size:1.8rem;


    }





    .principle-card h3{


        font-size:1.5rem;


    }





    .protected-item{


        font-size:.95rem;


    }



}







/* =====================================================
   PRINT VERSION
====================================================== */


@media print{



    body{


        background:white;


        color:black;


    }






    .navbar,
    .top-bar,
    .main-footer,
    .prayer-modal{


        display:none !important;


    }





    .equality-hero{


        background:white;


        padding:40px 0;


    }





    .equality-hero h1,
    .equality-hero p{


        color:black;


    }





    .principle-card,
    .protected-item{


        box-shadow:none;


        border:1px solid #ccc;


    }





    .company-information{


        background:white;


    }





    .company-information h3,
    .company-information p,
    .company-information strong{


        color:black;


    }





    .divider{


        background:black;


    }


}