body{
width: 100%;
height: 100%; 
margin: 0;
padding: 0;
font-family: 'Archivo', sans-serif;
}    

a{
color: inherit;    
}

h1,h2,h3,h4{
margin: 0;   
}

h1{
font-family: 'Rokkitt', serif;
font-size: 12vh;
text-transform: uppercase;
}

h2{
font-size: 5vh;
font-weight: bold;
}

h3{
font-size: 3vh;
font-weight: 100;
}

h4{
font-size: 2vh;
font-weight: 100;
}

h5{
font-size: 2vh;
font-weight: 700;
}

button{
width: auto;
margin-top: 5%;
padding: 1% 5%;
border: none;
border-radius: 10px;
outline: none;  
background: #f8c500;  
color: #000;
font-size: 2.5vh;
font-weight: bold;
cursor: pointer;
}


@media only screen and (max-width: 1024px) {

h1{
font-size: 5vh;
}

h2{
font-size: 3vh;
}

h3{
font-size: 2.5vh;
}

h4{
font-size: 2.3vh;
}

h5{
font-size: 2.3vh;
}

button{
border-radius: 8px;
font-size: 2.2vh;
}

}



/* HEADER */

header{
width: 90%;
height: auto; 
display: flex;
justify-content: space-between;
align-items: center;
padding: 1% 5%;
}  

header img{
width: 15%;
align-self: center;
}

header button{
width: auto;
margin: 0;
padding: 1%;
font-size: 2.2vh;
}

@media only screen and (max-width: 1024px) {

header{
width: 90%;
height: auto; 
display: flex;
justify-content: space-between;
align-items: center;
padding: 2% 5%;
}  

header img{
width: 45%;
align-self: center;
}

header button{
width: auto;
margin: 0;
padding: 2%;
font-size: 2vh;
}
}

@media only screen and (max-width: 414px) {

header{
width: 100%;
height: auto; 
display: flex;
justify-content: space-around;
align-items: center;
padding: 3% 0%;
}  

header img{
width: 40%;
align-self: center;
}

header button{
width: auto;
margin: 0;
padding: 1.5%;
font-size: 1.8vh;
}
}



/* FORM */

.form{
width: 90%;  
height: 100%;
right: 0;
padding: 2% 5%;   
display: flex; 
justify-content: space-around;
align-items: center;
background: #f8c500;  
}

.form .form-text{
width: 50%;    
}

.form h2{
font-size: 7vh;
}

.form h3{
width: 70%; 
margin-top: 2.5%;
}

.form iframe{
width: 70vh; 
height: 40vh;  
margin-top: 5%; 
border: solid #000000; 
border-radius:10px;
}

.form .pwrcrm{
background: #FFF;
padding: 2%;
border-radius: 8px;
}


@media only screen and (max-width: 1024px) {

.form{
padding: 5% 5%;   
}

.form h2{
font-size: 4vh;
}

.form .form-text{
width: 70%;    
}

.form h3{ 
font-size: 2vh;
}

.form iframe{
width: 34vh; 
height: 20vh;  
margin-top: 5%; 
border-radius: 6px;
}

}

@media only screen and (max-width: 414px) {

.form{
width: 100%;  
height: 100%;
padding: 5% 0%;   
display: flex; 
flex-direction: column;
justify-content: space-around;
text-align: center;
}

.form .form-text{
width: 100%;    
}

.form h2{
font-size: 4vh;
}

.form h3{
width: 80%; 
margin: auto;
margin-top: 2.5%;
}

.form iframe{
width: 44vh; 
height: 25vh;  
margin-top: 5%; 
border-radius: 6px;
}

.form .pwrcrm{
margin-top: 5%;
background: #FFF;
padding: 2%;
border-radius: 8px;
}

}



/* COMPANY */

.company{
width: 100%; 
display: flex; 
justify-content: space-around; 
align-items: center;
flex-wrap: wrap;
padding: 2% 0%;  
}

.company h2{
flex: 0 0 100%;
text-align: center;
}

.company iframe{
width: 85vh; 
height: 45vh;  
margin-top: 5%;
border: solid #000000; 
border-radius: 10px;
}

.company .company-text{
width: 38%; 
margin-top: 5%;
}

.company .company-text h4{
font-size: 2.2vh;
}

.company .company-text button{
margin-top: 5%;    
}

@media only screen and (max-width: 1024px) {

.company iframe{
width: 35vh; 
height: 23vh;  
margin-top: 5%;
border-radius: 6px;
}
}

@media only screen and (max-width: 414px) {

.company{
width: 100%; 
display: flex; 
flex-direction: column;
justify-content: space-around; 
align-items: center;
flex-wrap: wrap;
padding: 3% 0%;  
text-align: center;
}

.company iframe{
width: 44vh; 
height: 25vh;  
margin-top: 5%;
border-radius: 6px;
}

.company .company-text{
width: 90%; 
margin-top: 5%;
}
}



/* PROTECTION */

.protection{
width: 100%;
padding: 5% 0%;  
background: #F8F9FB;
text-align: center;  
}

.protection h3{
margin-top: 1%;
font-size: 2.5vh;
}


.protection .protection-details{
width: 80%;
margin: auto;
margin-top: 3%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start; 
}

.protection .protection-details-item{
width: 25%;
min-height: 15vh;
margin: 2.5% 2%;
padding: 2%;
border-radius: 8px;
background: #f8c500;  
}

.protection .protection-details-item img{
width: 10vh;
height: auto;
margin: auto;
margin-top: -25%;
}



.protection .protection-details-item h3{
margin-top: 5%;
font-weight: bold;    
}

.protection .protection-details-item h4{
margin-top: 2%;
color: #000;
font-weight: lighter;    
}


@media only screen and (max-width: 1024px) {

.protection .protection-details{
width: 80%;
margin-top: 8%;
}

.protection .protection-details-item{
width: 40%;
min-height: 20vh;
margin: 5% 2%;
padding: 2%;
}

.protection .protection-details-item img{
width: 8vh;
margin-top: -25%;
}
}

@media only screen and (max-width: 414px) {

.protection .protection-details{
width: 90%;
margin: auto;
margin-top: 10%;
display: flex;
flex-wrap: wrap;
justify-content: space-around; 
}


.protection .protection-details-item{
width: 44%;
min-height: 20vh;
margin: 5% 0%;
padding: 2%;
border-radius: 6px;
}


.protection .protection-details-item img{
width: 7vh;
height: auto;
margin: auto;
margin-top: -25%;
}
}


/* ASSITENCE */

.assistance{
width: 100%;
margin: auto;
padding: 2.5% 0%; 
}

.assistance h2{
text-align: center;    
}

.assistance h3{
margin-top: 1%;
text-align: center;  
font-size: 2.5vh;
}


.assistance .assistance-details{
width: 80%;
margin: auto;
margin-top: 2.5%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.assistance .assistance-details .assistance-details-item{
width: 30%;
margin-top: 2.5%;
}

.assistance .assistance-details-item h4{
margin-top: 1%;
}

@media only screen and (max-width: 1024px) {

.assistance .assistance-details .assistance-details-item{
width: 45%;
margin-top: 5%;
}

.assistance .assistance-details .assistance-details-item b{
font-size: 2.5vh;
}
}

@media only screen and (max-width: 414px) {

.assistance{
width: 100%;
margin: auto;
padding: 5% 0%; 
}

.assistance .assistance-details{
width: 80%;
margin: auto;
margin-top: 2.5%;
display: flex;
flex-direction: column;
justify-content: space-around;
flex-wrap: wrap;
}

.assistance .assistance-details .assistance-details-item{
width: 100%;
margin-top: 10%;
}
}


/* ACTION */

.container-action{
width: 100%;
margin: auto;
margin-top: 2%;
padding: 2.5% 0%; 
background: #f8c500;
text-align: center;  
}

.container-action h3{
margin-top: 1%;
font-size: 2.5vh;
}

.container-action button{
margin-top: 2.5%;    
padding: 1%;
background: #FFF;
font-size: 2.2vh;
}


@media only screen and (max-width: 414px) {

.container-action{
margin-top: 2%;
padding: 5% 0%; 
}

.container-action h3{
width: 80%;
margin: auto;
margin-top: 1%;
font-size: 2.2vh;
}

.container-action button{
margin-top: 2.5%;    
padding: 2%;
background: #FFF;
font-size: 2.2vh;
}
}


/* FOOTER */

footer{
width: 80%;
margin: auto;
padding: 2.5% 10% 1% 10%; 
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: #000;
text-align: center;  
}

footer img{
width: 15%;    
align-items: center;
}

footer p{
color: #FFF;    
}

footer div{
min-width: 25%;
max-width: 30%;
display: flex;
justify-content: space-around;
align-items: center;
}

footer i{
color: #f8c500;
font-size: 4vh;    
cursor: pointer;
}


footer b{
flex: 0 0 100%;
margin-top: 3%;
text-align: center;
color: #FFF;
}


@media only screen and (max-width: 1024px) {

footer img{
width: 30%; 
height: auto;   
align-items: center;
}

footer div{
min-width: 45%;
max-width: 45%;
}


footer i{
font-size: 2.5vh;    
}
}

@media only screen and (max-width: 414px) {

footer{
width: 80%;
margin: auto;
padding: 2.5% 10% 1% 10%; 
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
text-align: center;  
}

footer img{
width: 50%;  
height: auto;
margin: auto;  

}

footer div{
min-width: 90%;
max-width: 90%;
margin-top: 2.5%;
display: flex;
justify-content: space-around;
}

footer i{
font-size: 3vh;  
}

footer b{
font-size: 2vh;  
}
}