/*Fonts*/
@font-face {
  font-family: ZillaSlab-Bold;
  src: url('fonts/ZillaSlab-Bold.ttf');
}

@font-face {
  font-family: ZillaSlab-Medium;
  src: url('fonts/ZillaSlab-Medium.ttf');
}

@font-face {
  font-family: ACaslonPro-Bold;
  src: url('fonts/ACaslonPro-Bold.otf');
}

@font-face {
  font-family: ACaslonPro-Regular;
  src: url('fonts/ACaslonPro-Regular.otf');
}

@font-face {
  font-family: WorkSans-Regular;
  src: url('fonts/WorkSansRegular.ttf');
}

@font-face {
  font-family: WorkSans-Medium;
  src: url('fonts/WorkSansMedium.ttf');
}

@font-face {
  font-family: WorkSans-SemiBold;
  src: url('fonts/WorkSansSemibold.ttf');
}

@font-face {
  font-family: WorkSans-Black;
  src: url('fonts/WorkSansBlack.ttf');
}

/*Variables*/
:root {
    --light-green: #97bc1f;
    --medium-green: #638c00;
    --medium-green-2: #3f8949;
    --other-green: #07676a;
    --dark-green: #006633;
    --light-blue: #3fabdb;
    --dark-blue: #1f5682;
    --brown: #6e5b39;
    --background-color: #eef4e9;
    --dark-grey: #5b5b5b;    
    --white: white;
}

a, a:hover{
    text-decoration: none;
    color: inherit;
}

/*Mensagem*/
.alert{
    position: fixed;
    top:30%;
    border-radius: 3px;
    padding:2rem;
    margin: 1%;
    margin-right:1%;
    z-index: 4;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5); 
    display: none;
}

.alert ul{
    padding:0 0 0 1%;
    margin: 0;
}

.btn-close-div{
    position: absolute;
    top: 7%;
    right: 2%;
    cursor: pointer;
}



/*Caslon Regular*/
#lbl-com-voce, .lbl-conheca{
    font-family: 'ACaslonPro-Regular';
}


/*Caslon Bold*/
#lbl-fim-recomeco, .lbl-associados{
    font-family: 'ACaslonPro-Bold';
}


/*Zilla Regular*/
#btn-whats{
    font-family: 'ZillaSlab-Medium';
}

/*Zilla Bold*/
#lbl-tranquilidade, #btn-conheca{
    font-family: 'ZillaSlab-Bold';
}

#lbl-voce-sua-familia{
    font-family: 'ZillaSlab-Medium';
}

.lbl-a-partir{
    font-family: 'WorkSans-Regular';
}


/*WorkSans SemiBold*/
footer ul{
    font-family: 'WorkSans-Medium';
}

/*WorkSans SemiBold*/
.spn-mes, .lbl-description, footer label{
    font-family: 'WorkSans-SemiBold';
}


/*WorkSans Black*/
.lbl-price{
    font-family: 'WorkSans-Black';
}

/*WorkSans Black*/
.lbl-card-title{
    font-family: 'WorkSans-Regular';
}


/*White*/
#btn-conheca, #btn-whats, .lbl-description, .lbl-conheca, .lbl-associados, .lbl-card-desc, .lbl-depoiment, #btn-proteger, #btn-loading, footer{
    color: white;
}

.div-price, .lbl-card-title{
    background-color: white;
}


/*Light green*/
#lbl-tranquilidade{
    color: var(--light-green);
}

#coverage{
    background-color: var(--light-green);
}



/*Medium green*/
#lbl-com-voce, #lbl-voce-sua-familia{
    color: var(--medium-green);
}

#btn-conheca, #depoiments{ 
    background-color: var(--medium-green);
}


/*Dark green*/
#lbl-fim-recomeco, #frm-register, #lbl-frm-cadastre{
    color: var(--dark-green);
}

#btn-whats, .lbl-associados, .lbl-card-desc, .lbl-depoiment, #btn-proteger, #btn-loading{
    background-color: var(--dark-green);
}


/*Dark Grey*/
.lbl-a-partir, .lbl-card-title{
    color: var(--dark-grey);
}


/*Border-radius*/
#btn-conheca, #btn-whats, .div-price, .vl{
   border-radius: 1.5rem;
}

/*Border-radius*/
.lbl-associados, .lbl-card-title, .lbl-card-desc, .lbl-depoiment, #btn-proteger, #btn-loading, .frm-register-control{
   border-radius: 1rem;
}


/*General*/
html, body {
    height: 100%;
    width: 100%;
    font-size: 1em;
    letter-spacing: 0.09em;
    overflow-x: hidden;
    background-color: var(--background-color);
}

html {
  scroll-behavior: smooth;
}


/*Header*/
#logo-pax{
    width: 15rem;
    margin-top: 2rem;
}

#description{
    position: relative; 
    z-index: 1;
    margin-top: 3rem;
}

#description-image{
    margin-top: -37rem;
}

#description-image .img-fluid{
    width: 40%;
    /* height: 55rem; */
}

#lbl-com-voce{
    margin-top: 4rem;
}

#lbl-tranquilidade{
    margin-top: 3rem;
}

#lbl-com-voce, #lbl-fim-recomeco, #lbl-tranquilidade, #lbl-voce-sua-familia{
    font-size: 2.5rem;
    line-height: 1;
}


/*Planos*/
#btn-conheca, #btn-whats{
    margin-top: 3rem;
    padding: 0.3rem 2rem;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    font-size: 1.4rem;
}

#btn-whats{
    font-size: 1.4rem;
    padding: 0.8rem 2rem;
    letter-spacing: 0.2rem;
}

.div-price{
    margin-top: 1rem;
    padding: 1.5rem 5rem;
    border: 0.1rem solid;
}

.img-selo{
    width: 10rem;
    margin-top: 2rem;
}

.lbl-a-partir{
    font-size: 1.2rem;    
    line-height: 1;
}

.lbl-price{
    font-size: 2.4rem;
    line-height: 1;
}

.lbl-description{
    border-radius: 50px 50px 15px 15px; 
    padding: 0.5rem; 
    margin-top: -0.9rem;
    font-size: 1rem;     
    min-width: 25rem;
    text-align: center;
}

.spn-mes{
    font-size: 1rem;
    margin-top: 0.5rem;
}

.vl {
    border-left: 6px solid;
    height: 4rem;
    margin-right: 1rem;
}


/*Cobertura*/
#coverage{    
    --border-radius: 50%;
    margin-top: 2rem;
    padding: 3rem 0rem;    
    height: 24rem;
    /* border-top-left-radius: var(--border-radius); */
    /* border-top-right-radius: var(--border-radius); */
}

#coverage-border{
    --border-radius: 50%;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    background-color: var(--background-color);
    margin-top: -10rem;
    height: 70rem;
    width: 150%;
    margin-left: -25%;
}

#coverage-cards{
    margin-top: -68rem;
}

.lbl-conheca{
    font-size: 3rem;
}

.lbl-associados{
    font-size: 1.5rem;
    padding: 0.3rem 0.5rem 0rem 0.5rem;
}

.img-card{
    width: 3rem;
    position: relative;
    z-index: 2;
    margin-top: 1rem;
}

.lbl-card-title{
    font-size: 1rem;
    padding: 0.3rem 0.5rem;
    width: 20rem;
    text-align: center;
    position: relative;
    z-index: 1;
    margin-top: -0.5rem;
}

.lbl-card-desc{
    padding: 2rem 1rem 1rem 1rem;
    width: 23rem;
    text-align: center;
    margin-top: -1rem;
    font-size: 1rem;
}


/*Depoimentos*/
#depoiments{
    margin-top: 2rem; 
    padding-top: 2rem;
    padding-bottom: 2.5rem;
}

.img-depoiment{
    width: 25rem;
}

.card-depoiment{
    margin-top: 2rem;  
}

.lbl-depoiment{
    font-size: 1rem;
    padding: 0.2rem 1rem;
    margin-top: -0.8rem;
    margin-left: 15rem;
    width: 7rem;    
}


/*Cadastro*/
#register{
    --border-radius: 50%;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    position: relative;
    z-index: 1;
    background-color: var(--background-color);
    padding-top: 5rem;
    padding-bottom: 2rem;
    height: 45rem;    
    width: 120%;
    margin-left: -10%;

}

#back-register{
    background-image: url('assets/bg-form.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 35rem;   
    padding-left: 1.4rem;
}

#frm-register{
    
    height: 35rem;
    width: 28rem;
    padding: 0rem 2rem;
    font-size: 1.2rem;
}

#lbl-frm-cadastre{
    font-family: 'ACaslonPro-Bold';    
    /* padding: 0.2rem 0.2rem 0.0rem 0.2rem; */
    font-size: 1.4rem;
}

#lbl-frm-planos{
    font-family: 'ACaslonPro-Bold';
    font-size: 1.4rem;
}

#frm-cadastro-title{
    padding: 1rem 0rem;
}

#btn-proteger, #btn-loading{
    margin: 1rem 0rem;
    padding: 0.1rem 1rem;
    font-size: 1.2rem;
    border: 1px solid var(--dark-green);
    width: 16rem;
}

#btn-loading{
    display: none;
}

.frm-register-control{
    border: 0.1rem solid var(--dark-green);
}


/*Rodapé*/
footer{
    margin-top: -30rem;
    height: 40rem;
    background: linear-gradient(80deg, var(--dark-green) 0%, var(--medium-green) 20%, var(--light-green) 70%);
}

footer ul{
    list-style: none;
    font-size: 1.2rem;
    text-align: left;
}


/*Loading*/
#loading {
    background: url("assets/logo_pax.png") center no-repeat;
    background-color: white;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 3;
}