/**IMPORTS CSS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');
/**------------- */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background: #101C25;
    font-size: 62.5%;
    overflow-x: hidden;
}

/**ANCHOR Variables */
:root {
    --primary: #0079C8;
    --primary-hv: #008FEC;
    --dark-primary: #242a31;
    --secondary: #DADADA;
    --secondary-hv: #dcdcdc;
    --light: #FAFAFA;
    --light-hv: #ffffff;
    --info: #00A998;
    --info-hv: #00b6a4;
    --success: #09B542;
    --success-hv: #0cc74a;
    --dark: #181E25;
    --dark-hv: #14181d;
    --warning: #E69C24;
    --warning-hv: #fca61a;
    --fnt-regular: 400;
    --fnt-medium: 500;
    --fnt-sBold: 600;
    --fnt-bold: 700;
    --poppins: 'Poppins', sans-serif;
    --raleway: 'Raleway', sans-serif;
    --trs-250-eio: 250ms ease-in-out;
    --trs-500-eio: 500ms ease-in-out;
    --trs-250-ln: 250ms linear;
    --trs-1-eio: 1s ease-in-out;
}

/**SECTION Typography */

h1{ 
    font-family: var(--raleway);
    font-size: 6em;
}
h2{
    font-family: var(--raleway);
    font-size: 4.5em;
}
h3{
    font-family: var(--raleway);
    font-size: 3.3em;
}
h4{
    font-family: var(--raleway);
    font-size: 2.7em;
}
h5{
    font-family: var(--raleway);
    font-size: 2em;
}
h6{
    font-family: var(--raleway);
    font-size: 1.8em;
}
p,
a,
label,
button,
input,
.text
{
    text-decoration: none;
    line-height: 1.5em;
    font-family: var(--poppins);
    font-size: 1.6em;
}
li{ font-family: var(--poppins); }

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
p::selection,
a::selection,
li::selection,
label::selection,
input::selection,
span::selection,
.text::selection{ background: var(--info);}

@media (max-width: 760px){
    h1{ 
        font-family: var(--raleway);
        font-size: 5.5em;
    }
    h2{
        font-family: var(--raleway);
        font-size: 3.5em;
    }
    h3{
        font-family: var(--raleway);
        font-size: 3em;
    }
    h4{
        font-family: var(--raleway);
        font-size: 2.4em;
    }
    h6{
        font-family: var(--raleway);
        font-size: 1.6em;
    }
    p,
    a,
    label,
    button,
    input,
    .text
    {
        text-decoration: none;
        font-family: var(--poppins);
        font-size: 1.5em;
    }
}
@media (max-width: 550px){
    h1{ font-size: 4.2em; }
}

/**SECTION ICONS */
.fas,
.far{
    font-size: 2em;
}

/**SECTION Colors */

.text-primary{ color: var(--primary); } 
.text-secondary{ color: var(--secondary); } 
.text-light{ color: var(--light); } 
.text-info{ color: var(--info); } 
.text-success{ color: var(--success); } 
.text-warning{ color: var(--warning); } 
.text-dark{ color: var(--dark); } 

.bg-primary{ background: var(--primary); } 
.bg-secondary{ background: var(--secondary); } 
.bg-light{ background: var(--light); } 
.bg-info{ background: var(--info); } 
.bg-success{ background: var(--success); } 
.bg-warning{ background: var(--warning); } 
.bg-dark{ background: var(--dark); } 

/**SECTION Alignments */
.text-left{ text-align: left;}
.text-right{ text-align: right;}

/**SECTION Buttons */
.main-btn{
    padding: 1em 0 1.5em;
    margin: 3em 0;
    text-align: center;
}
.btn {
    font-weight: var(--fnt-medium);
    text-transform: uppercase;
    padding: .8em 4em;
    width: 12em;
    cursor: pointer;
    border: .15em solid transparent;
    border-radius: .3em;
    transition: background 250ms ease-in;
}
.btn-primary{
    background: var(--primary);
    color: var(--light);
}
.btn-primary:hover{ background: var(--primary-hv); }

.btn-secondary{
    background: var(--secondary);
    color: var(--dark);
}
.btn-secondary:hover{ background: var(--secondary-hv); }

.btn-trp--secondary{
    border: .15em solid var(--secondary);
    color: var(--light);
}
.btn-trp--secondary:hover{
    background: var(--secondary-hv);
    color: var(--dark);
}

.btn-success{
    background: var(--success);
    color: var(--light);
}
.btn-success:hover{ background: var(--success-hv); }

.btn-trp--success{
    border: .15em solid var(--success);
    background: transparent;
    color: var(--success);
}
.btn-trp--success:hover{
    color: var(--light);
    background: var(--success-hv); 
}

.btn-warning{
    background: var(--warning);
    color: var(--light);
}
.btn-warning:hover{ background: var(--warning-hv); }

.btn-info{
    background: var(--info);
    color: var(--light);
}
.btn-info:hover{ background: var(--info-hv); }

.btn-trp--info{
    border: .15em solid var(--info);
    background: transparent;
    color: var(--info);
}
.btn-trp--info:hover{
    color: var(--light);
    background: var(--info-hv); 
}
.btn-disabled{
    background:rgba(66, 66, 66, 0.26);
    color: rgb(66, 66, 66);
    border: 2px solid rgba(66, 66, 66, 0.26);
    pointer-events: none;
}
@media (max-width:860px){
    .btn {
        width: 100%;
        text-align: center;
    }
}
/**SECTION Font Weight */

.fnt-regular{ font-weight: var(--fnt-regular); }
.fnt-medium{ font-weight: var(--fnt-medium); }
.fnt-sBold{ font-weight: var(--fnt-sBold); }
.fnt-bold{ font-weight: var(--fnt-bold); }

/**SECTION Container */
.container {
    width: 95%;
    max-width: 130em;
    margin: 0 auto;
}
.container-nav {
    width: 95%;
    max-width: 130em;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 860px) {
    .container { width: 90%; }
}
.section {
    margin: 7.2em 0 0;
    max-height:100%;
    min-height: 90vh;
}
/** SECTION Some Facilities */
.text-uppercase{ text-transform: uppercase; }

.s-flex{
    display: flex;
    align-items: center;
}

.overlay{
    opacity: 0;   
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #14181dc2;
    backdrop-filter: blur(3px);
    transition: var(--trs-1-eio);
    z-index: -1;
}

/**ANCHOR JAVASCRIPT OVERLAY */
.overlay--show{
    z-index: 99;
    opacity: 1;   
    visibility: unset;
}

/** PADDINGS*/
.px-4{
    padding-right: 4em;
    padding-left: 4em;
}
/** MARGINS*/
.mr-1{
    margin-right: 1em;
}
.mx-1{
    margin-right: 1em;
    margin-left: 1em;
}

@media (max-width: 760px){ 
    .mobile-hide{display: none;}
}
/*ANCHOR TEXTS*/
.text-subtitle{ margin: 2em 0; }
.text-title{ margin: 2em 0; } 
.text-paragraph{ 
    width: 85em;
    margin: 1em 0; 
}
.text-paragraph p{ margin: 1em 0; }

@media (max-width:880px){
    .text-paragraph{ width: 100%; }
}

.form__success{
    width: 80%;
    margin: auto;
    display: none;
}
.form__success .s-flex{
    justify-content: center;
    border-radius: 10px;
    padding: 1rem;
    width: 100%;
    border-right: 2px solid var(--success);
    border-left: 2px solid var(--success);
}

.form_failed{
    width: 80%;
    margin: auto;
    display: none;
}
.form_failed .s-flex{
    justify-content: center;
    border-radius: 10px;
    padding: 1rem;
    width: 100%;
    border-right: 2px solid var(--warning);
    border-left: 2px solid var(--warning);
}

.lds-dual-ring {
    display: none;
    width: 40px;
    height: 40px;

  }
  .lds-dual-ring::after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    border-radius: 50%;
    border: 6px solid var(--info);
    border-color: var(--info) transparent var(--info) transparent;
    animation: lds-dual-ring 1.5s linear infinite;
  }
  @keyframes lds-dual-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  ._show{
      display: block !important;
  }