@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

*{ margin: 0; font-family: 'Roboto', sans-serif; }
.regresar{ position: fixed; right: 20px; bottom: 20px; z-index: 1000; }
.regresar i{ font-size: 50px; background-color: rgb(250, 121, 0); border-radius: 100%; color: white; }
.socialBar{ position: fixed; top: 35%; right: 0; font-size: 1.5rem; display: flex; flex-direction: column; align-items: flex-end; z-index: 100; }
.socialBar .bx{ color: white; text-decoration: none; padding: .7rem; display: flex; transition: all .5s; }
.bx:first-child{ border-radius: 1rem 0 0 0; }
.bx:last-child{ border-radius: 0 0 0 1rem; }
.bxl-linkedin{ background: rgb(0, 162, 255); }
.bxl-facebook{ background: #1027c0; }
.bxl-instagram{ background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF); }
.socialBar .bx:hover{ padding-right: 3rem; border-radius: 1rem 0 0 1rem; box-shadow: 0 0 .5rem rgb(0, 0, 0, 0.42); }

/* ==================== VIDEO + NAVBAR =================== */

header{ width: 100%; }
.navBar{ color: white; justify-content: space-between; display: flex; align-items: center; background-color: #08135F; }
nav img{ padding: 0 80px; }
.navBarItems{ display: flex; list-style: none; margin-right: 30px; }
.navBarItems li{ border-radius: 3px; margin: 0 5px; }

.navBarItems li a{
    position: relative;
    padding: 7px 13px;
    text-decoration: none;
    font-size: 24px;
    display: block;
    color: white;
}

.navBarItems li a::after{
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 2px;
    width: 100%;
    background: white;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform 0.2s ease-in-out;
}

.navBarItems li a:hover:after{ transform-origin: left; transform: scaleX(1); }
.responsiveMenu{ margin-right: 30px; font-size: 25px; cursor: pointer; display: none; }
ul.show{ top: 65px; }

/* ==================== FORMULARIO =================== */

.formulario{ margin: auto; width: 85%; height: 1400px; }
.formulario select{ width: 250px; }
.section-form-one, .section-form-two, .section-form-three{ display: flex; }
.section-form-one > section{ margin: auto; width: 48%; }
.section-form-two > section, .section-form-three > section{ width: 24%; }
.section-form-two input, .section-form-three input{ width: 250px; }
.section-form-four > input{ display: block; margin: auto; width: 90%; }
.mensaje{ height: 100px; }
.title-form-initial{ margin-left: 30px; }
.title-form{ margin-left: 150px; }
section{ margin-left: 40px; }
.formulario > button{ width: 30%; margin-left: 30%; }

/* ==================== RESPONSIVE =================== */

@media screen and (max-width: 952px) {
    *{ overflow-x: hidden; }
    .navBarItems li a{ font-size: 20px; }

    .formulario{ width: 90%; height: 3000px; }
    .formulario select{ width: 80%; }
    .section-form-one > section{ width: 90%; width: 90%; margin-top: 10px; }
    .title-form-initial, .title-form{ margin-left: 0; }
    .section-form-one, .section-form-two, .section-form-three{ display: block; }
    .section-form-two > section, .section-form-three > section{ width: 90%; margin-top: 10px; }
    .section-form-two input, .section-form-three input{ width: 80%; }
}

@media screen and (max-width: 858px) {
    .responsiveMenu{ display: inline-block; }

    .navBarItems{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #000000;
        top: -100vh;
        text-align: center;
        transition: all .4s;
        flex-direction: column;
    }

    .navBarItems li{ margin: 10px 50px 10px 0; line-height: 30px; }
    .navBarItems li:hover{ background: none; }
    .navBarItems li a{ font-size: 20px; color: white; font-weight: bold; }
    .navBarItems li a:hover{ color: #E9183B; }
    .navBarItems li a::after{ bottom: 1px; }
}

@media screen and (max-width: 858px) and (orientation: landscape) {
    .navBarItems li{ margin: 5px 0 0 0; }
    .navBarItems{ overflow: scroll; height: calc(100% - 65px); }
}