@import "../fonts/poppins/style.css";


@font-face {
    font-family: 'Archivo Black';
    font-style: normal;
    font-weight: normal;
    src: url('/fonts/Archivo_Black/ArchivoBlack-Regular.ttf');
}


.big-accent{ padding: 15px 25px; font-size: x-large; background-color: #3e4242c7; color: #fff; border-radius: 2em; border: none; text-align: center; text-decoration: none; &:hover{color: orange;}}

.big-accent2{ padding: 15px 25px; font-size: x-large; background-color: #4a73c0c7; color: #fff; border-radius: 2em; border: none; text-align: center; text-decoration: none; &:hover{color: orange;}}

.font-light{font-family: 'Poppins ExtraLight'; letter-spacing: 3px;}

.font-light strong{ font-family: 'Poppins SemiBold';}

.text-teal{color: rgb(87, 126, 126);}

.bg-text{background-color: #fff; color: #0f4e75;}

#main-section, #demo, #usp-form, #form-section { display: flex; justify-content: center; overflow: hidden;}

#main-section .video-poster{object-fit: cover; object-position: top; height: 100%; position: relative; z-index: -10;}

#main-section .section-content{position: absolute; color: white; width: full;}

#main-section .section-content .bg-poster{display: flex; position: relative; flex-direction: column; height: 100%;}
#main-section .section-content .promo-tag{font-size: 20px; text-align: end; margin-top: 22rem; 
    p{display: inline-block; padding-left: 2em; padding-right: 1em; border-radius: 0.5rem;}}
#main-section .section-content .promo-tag2{font-size: 20px; margin-top: 8rem;}

#main-section .section-content .navbar-nav{display: flex; flex-direction: row;}

#main-section .bg-poster{ display: flex; flex-direction: column; justify-content: space-between; padding-top: 20px;}

#demo, #usp-form{background-color: rgb(244, 244, 244);}

#demo .demo-content, #usp-form .usp-form-content{display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100%; position: relative;}
#demo .demo-content .demo-image{display: flex; align-items: center; justify-content: center; width: 100%; flex-grow: 1;}
#demo .demo-content .demo-image figure{display: flex; align-items: center; justify-content: center; width: 100%;}
#demo .demo-content .demo-image img{width: 100%;}

#demo .demo-content .demo-description{display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; flex-grow: 1;}
#demo .demo-content .demo-description .text-container{display: flex; width: 90%;}
#demo .demo-content .demo-description .text-container p{letter-spacing: normal; line-height: 1.3em;}

#usp-form .usp-form-content .usp-content{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%;}
#usp-form .usp-form-content .usp-content ul{display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#usp-form .usp-form-content .usp-content ul li{display: flex; flex-direction: column; justify-content: center;}
#usp-form .usp-form-content .usp-content ul li p{display: inline-flex; padding-left: 3.5em; font-family: 'Poppins Light'; letter-spacing: normal;}
#usp-form .usp-form-content .usp-content h1{font-size: 10em; font-weight: 900; letter-spacing: -13pt; font-family: 'Archivo Black';}
.form-content{display: flex; justify-content: center; align-items: center; width: 100%;}
.form-content .contact-form{display: flex; flex-direction: column; gap: 1em; padding: 2em; justify-content: center; align-items: center; background: #5C7786; height: 100%; width: 100%;}
.contact-form input, .contact-form textarea{ width: 100%; padding: 15px 20px; font-size: 16px;}
.contact-form h2{ align-self: flex-start; font-weight: 900; font-size: 2.5em;}
.contact-form button{ font-size: 25px; font-weight: 700; align-self: flex-end; background-color: inherit; border: none; color: #fff;
    &:hover{ color: #04497e;}}


#countries { display: flex; justify-content: center; background-color: #202020; }
#countries .country-list { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1em; padding: 2em;}
#countries .country-list .other-info{ display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1em; padding: 2em; font-size: 1.3rem; a{background-color: #fff; color: #272727; cursor: pointer; &:hover{color: orange;}}}
#countries .country-list .country-heading h6{ font-size: 2.3rem; color: #fff; font-weight: 700; margin: 0;}
#countries .country-list .country-heading p{ margin: 0;}
#countries .country-list .country-items { display: flex; justify-content: flex-start; gap: 3em; padding: 2em; width: 80%; flex-wrap: wrap;}
#countries .country-list .country-items .country{ display: flex; flex-direction: column; justify-content: center; text-align: center; color: #fff;}
#countries .country-list .country-items .country img{ display: flex;}
#countries .country-list .country-items .country .country-name{ display: inline-flex; flex-direction: column; justify-content: center; gap: 0.5em; font-family: 'Archivo Black'; font-size: 18px; font-weight: 700; color: #fff; margin: 0; span{font-family: "Poppins Light"; font-size: 12px; text-wrap: nowrap;}}

#bedatos-policy { display: flex; justify-content: center; background-color: rgb(244, 244, 244); padding: 2em 0em;}
#bedatos-policy h6{ font-weight: 900; font-size: 1.6em; font-family: 'Poppins Bold'; color: #04497e;}
#bedatos-policy .policy-feature{display: flex; flex-direction: column; align-items: center; justify-content: center;}
#bedatos-policy .policy-feature img{width: 60%;}
#bedatos-policy .policy-feature p{font-size: large; font-weight: 600; color: #a52929; text-wrap: wrap; text-align: center;}


#form-section{align-items: center;}
#form-section .help-text-content{ display: flex; flex-direction: column; justify-content: center;
    h6{ text-wrap: wrap; font-family: 'Poppins Bold'; line-height: 90%; font-size: 5rem;};
    p{ text-wrap: wrap; font-family: 'Poppins ExtraLight'; font-size: 1.5rem;}}

footer nav ul{font-size: 16px;}

@media (max-width: 1024px){
    #main-section .section-content .promo-tag {text-align: end; margin-top: 15rem; 
        p{margin: 0px; letter-spacing: normal; padding-right: 1em;}}
    #main-section .section-content .promo-tag2 { margin-top: 1rem; 
        p{margin: 0px; letter-spacing: normal; padding-right: 1em;}}
    #countries .country-list .country-heading p{ font-size: 16px; color: #fff; font-weight: 700; margin: 0;}
    #countries .country-list .country-items{ gap: 2rem; padding: 1em; width: 100%; justify-content: center;}
}

@media (max-width: 992px) {

    .text-1x{font-size: 1rem;}

    .font-light{font-family: 'Poppins ExtraLight'; letter-spacing: 2px;}

    .navbar-nav .nav-item{font-size: 10px;}
    #main-section .bg-poster{ display: flex; flex-direction: column; justify-content: flex-start; padding-top: 0px;}
    #main-section .section-content .promo-tag {font-size: 12px; text-align: end; margin-top: 4rem; 
        p{margin: 0px; line-height: 0.8rem;letter-spacing: normal; padding-right: 1em;}}
    #main-section .section-content .promo-tag2 {font-size: 12px; margin-top: 1rem; 
        p{margin: 0px; line-height: 0.8rem;letter-spacing: normal; padding-right: 1em;}}

    .big-accent{ padding: 5px 15px; font-size: 12px; background-color: #3e4242c7; color: #fff; border-radius: 2em; border: none; text-align: center; text-decoration: none;}
    .big-accent2{ padding: 5px 15px; font-size: 12px; background-color: #4a73c0c7; color: #fff; border-radius: 2em; border: none; text-align: center; text-decoration: none;}


    #demo .demo-content, #usp-form .usp-form-content{display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; position: relative;}
    #demo .demo-content .demo-description .text-container p{letter-spacing: normal; line-height: 1.3em; text-align: center;}

    #countries .country-list .other-info{ display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1em; padding: 2em; font-size: 0.8rem; text-align: justify; p{line-height: normal;}}
    #countries .country-list .country-heading h6{ font-size: 1rem; color: #fff; font-weight: 700; margin: 0;}
    #countries .country-list .country-heading p{ font-size: 10px; color: #fff; font-weight: 700; margin: 0;}
    #countries .country-list .country-items{ gap: 15px; padding: 1em; width: 100%; justify-content: space-around;}
    #countries .country-list .country-items .country{ width: 45%; height: 50%;
        .country-name{font-size: 10px;}
        p{font-size: 8px; margin: 0;}}


    .form-content .contact-form{display: flex; flex-direction: column; gap: 1em; padding: 2em; justify-content: center; align-items: center; background: #5C7786; height: 100%; width: 100%;}
    .contact-form input, .contact-form textarea{ width: 100%; padding: 10px 15px; font-size: 12px;}
    .contact-form h2{ align-self: flex-start; font-weight: 900; font-size: 1.5rem;}
    .contact-form button{ align-self: flex-end; background-color: inherit; border: none; color: #fff;
        &:hover{ color: #04497e;}}
    
    #form-section .d-flex{flex-direction: column-reverse;}

    #form-section .help-text-content{ display: flex; flex-direction: column; justify-content: center;
    h6{ text-wrap: wrap; font-family: 'Poppins Bold'; line-height: 90%; font-size: 1.5rem;};
    p{ text-wrap: wrap; font-family: 'Poppins ExtraLight'; font-size: 0.6rem; line-height: normal;}}

    #bedatos-policy .policy-feature p{font-size: 10px; line-height: 1rem;}

    footer nav ul{font-size: 12px;}
}