@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bellota+Text:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap');

/* ------------- EAGLE LAKE ------------- */


.eagle-lake-regular {
  font-family: "Eagle Lake", serif;
  font-weight: 400;
  font-style: normal;
}

/* ------------- BELLOTA ------------- */


.bellota-text-light {
  font-family: "Bellota Text", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.bellota-text-regular {
  font-family: "Bellota Text", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.bellota-text-bold {
  font-family: "Bellota Text", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.bellota-text-light-italic {
  font-family: "Bellota Text", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.bellota-text-regular-italic {
  font-family: "Bellota Text", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.bellota-text-bold-italic {
  font-family: "Bellota Text", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* ------------- ZAIN ------------- */


.zain-extralight {
  font-family: "Zain", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.zain-light {
  font-family: "Zain", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.zain-regular {
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zain-bold {
  font-family: "Zain", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zain-extrabold {
  font-family: "Zain", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.zain-black {
  font-family: "Zain", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.zain-light-italic {
  font-family: "Zain", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.zain-regular-italic {
  font-family: "Zain", sans-serif;
  font-weight: 400;
  font-style: italic;
}

/* --------- PROTEST GUERRILLA --------- */

.protest-guerrilla-regular {
  font-family: "Protest Guerrilla", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* ------------------ CSS ---------------------------------------------- */

html{
    font-size: 12px;
    color: #ffffff;
    position: relative;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    scroll-behavior: smooth; 
}

body{
    height: auto;
    overflow-x: hidden;
    background-image: linear-gradient(150deg, #24305A, #171B37);
    min-height: 100vh;
    
    margin-bottom: 6rem;
}

.display-flex{
    display: flex;
    flex-wrap: wrap;
}

main{
    margin: 1rem;
    padding: 2rem;
    border: 0.1rem dashed #ffffff;
    border-radius: 1rem;
    box-shadow: inset 0.1rem -0.1rem 0.5rem #28675b;
    background-color: #ffffff;

    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows:   auto auto auto auto;
    gap: 2rem;

}

/* HEADER */

#mainheader{
   min-height: 8rem;
    border-bottom: 0.1rem solid #ffffff; 
    padding: 0.5rem;
    align-items: center;
    
    background-image: linear-gradient(150deg, #24305A, #171B37); 
}


#mainheader p{
    flex: 7;
    padding-left: 1rem;
    
}

#mainheader nav{ 
    flex: 3;
    justify-content: end;
    padding: 0;
    margin-right: 1rem;
    gap: 1rem;
}

#mainheader nav a{
    font-size: clamp(1rem, calc(1rem + 4vw), 2.5rem);
    border-radius: 0;
    border-left: solid 0.3rem #fff;
}


/* FOOTER */

footer{
    padding: 1rem;
    justify-content: space-between;
    position: absolute;
    inset: auto auto 0 0;
    width: 90%;
    flex-wrap: nowrap;
}

footer a{
    background: none;
    text-decoration: underline;
}

@media only screen and (max-width: 500px) and (min-width: 0px) {
    footer{
        flex-wrap: wrap;
    }

}

.blue-cont{
    min-height: fit-content;
    height: fit-content;
    position: relative;
    padding: 1.5rem;
    border: 0.1rem solid #ffffff;
    border-radius: 1rem;
    
    background-image: linear-gradient(150deg, #24305A, #171B37);
    
    box-shadow:  -0.1rem -0.1rem 1rem #28675b;    
}

.second-cont{
    max-width: fit-content;
    padding: 1rem;
    border: solid 0.1rem #fff;
    background-image: linear-gradient(150deg, #2e3f7c, #24305A);
    box-shadow:  inset 0.1rem 0.1rem 1rem #0d211e; 
    color: #fff;
    border-radius: 1rem;
    gap: 1rem;
    flex-wrap: nowrap;
    flex-direction: column;
    flex: 1;
    flex-basis: 31%;
}

h1, 
.logo-title{
    font-size: clamp(1rem, calc(1rem + 5vw), 3rem);
}

h1
{
    font-family: "Bellota Text", sans-serif;
    font-weight: 400;
    font-style: italic;  
}

h2{
    font-family: "Bellota Text", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(0.9rem, calc(1rem + 2vw), 2.5rem);
    margin-bottom: 2rem;
}

h3{
    font-family: "Bellota Text", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(0.7rem, calc(1rem + 2vw), 2rem);
}

h4{
    font-family: "Bellota Text", sans-serif;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 0.5rem;
    font-size: clamp(0.5rem, 1.6rem, 2.5rem);
}

p, ul, li{
    font-family: "Zain", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(1rem, 1.6rem, 2.2rem);
}

a, button{
    max-width: fit-content;
    background-color: #113498;
    color: #fff;
    text-decoration: none;
    padding:  0.5rem 1rem;
    border-radius: 1rem;
    cursor: pointer;
    font-size: clamp(1rem, calc(1rem + 4vw), 1.6rem);
}

.consultTitle{  
    border-bottom: #ffffff solid 0.1rem;
    margin: 1rem 0;
}

.top-li{
    margin-top: 2rem;
}


.accent{
    color: #E0BE6D;
}


.third-cont, .faq{
    padding: 1rem;
    border: solid 0.1rem #000;
    border-radius: 1rem;
    box-shadow: 0.1rem 0.1rem 1rem #0d211e;  
    margin: 1rem 0;
    background-color: #fff;
    color: #000;
    gap: 1rem;
}

.faq{
    margin: 1rem;
    padding: 2rem;
}