@font-face {
    font-family: 'Orbitron';
    src: url(../assets/fonts/Orbitron/Orbitron-VariableFont_wght.ttf);
}


* {
    margin: 0;
    padding: 0;
}

body {

    background-image: url('../assets/images/technology/background-technology-mobile.jpg');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;

    height: 958px;
    color: white;

    header{
        
        position: relative;

        .iconMenu{

            width: 40px;

            margin-top: 10px;
            margin-left: 20px;

        }

        .menu{

            transform: translateX(-100%);
            transition: 0.3s easy all;
       
            background: linear-gradient(to right,  rgba(46, 46, 46, 0.26), rgba(161, 161, 161, 0.185));
            /* width: 270px;
            height: 60px; */

            position: absolute;


            button{

                background: none;
                border: none;

                color: white;
                height: 50px;

                margin-left: 10px;
                font-size: 10px;

                cursor: pointer;

                &:hover{

                    border-bottom: 2px solid;

                }

            }

            ul{

                margin: auto;

                list-style: none;
                display: flex;
                flex-direction: column;

            }
        }

        .hamburguesa {
            display: flex; /* Ocultar en pantallas grandes */
            flex-direction: column;
            justify-content: space-around;
            width: 30px;
            height: 25px;
            cursor: pointer;
            position: absolute;
            top: 15px;
            right: 20px;
        
            span {
                width: 30px;
                height: 4px;
                background-color: white;
                margin-bottom: 5px;
                border-radius: 2px;
                transform-origin: 5px 0px;
                transition: all 0.2s linear;
            }
        }

        .open {
            transform: translateX(370%) !important; 
        }
    
        /* Opciones de rotación y traslación de los diferentes elementos que forman el icono del menu hamburguesa */
        .hamburguesa.close span:nth-child(1) { 
            transform: rotate(45deg) translateY(1px);
        }
        
        .hamburguesa.close span:nth-child(2) {
            opacity: 0;
        }
        
        .hamburguesa.close span:nth-child(3) {
            transform: rotate(-45deg) translateY(-5px);
        }
    }

    .contenedorHomeSpace{

        text-align: center;

        .contenedorBotones{

            button{

                background-color: #0B0E17;
                border: 2px solid gray;
                color: white;

                border-radius: 100%;

                width: 40px;
                height: 40px;
    
                cursor: pointer;

            }

            .dos, .tres{

                margin-left: 20px;

            }
        }

        .titleSpace{

            font-size: 25px;

            margin-top: 20%;

            .number{

                color: gray;
                padding-right: 10px;

            }

        }

        .vehiculo{

            width: 400px;
            height: 200px;

            margin-top: 30px;
            margin-bottom: 30px;

        }
    }

    .contenedorInformacion{

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        h4{

            margin-top: 30px;
            color: gray;

        }

        h1{

            margin-top: 10px;
            margin-bottom: 25px;

        }

        p{

            text-align: center;

            font-size: 18px;

            width: 350px;
            color: gray;

        }

    }



  
}

@media (min-width: 768px) {

    body{

        background-image: url('../assets/images/technology/background-technology-tablet.jpg');
        height: 1142px;

        header{

            .iconMenu{

                width: 70px;

                margin-top: 20px;
                margin-left: 30px;

            }

            .menu{
        
                width: 550px;
                height: 110px;

                left: 770px;
                top: 20px;

                button{

                    height: 110px;

                    margin-left: 30px;
                    font-size: 20px;

                    &:hover{

                        border-bottom: 3px solid;

                    }
                }

                ul{

                    flex-direction: row;                  
    
                }

            }

            .hamburguesa{

                display: none;

            }



        }

        .contenedorHomeSpace{

            text-align: center;
    
            .contenedorBotones{
    
                button{
    
                    background-color: #0B0E17;
                    border: 2px solid gray;
                    color: white;
    
                    border-radius: 100%;
    
                    width: 60px;
                    height: 60px;
        
                    cursor: pointer;

                    &:hover{

                        background-color: white;
                        color: black;

                    }
    
                }
    
                .dos, .tres{
    
                    margin-left: 40px;
    
                }
            }
    
            .titleSpace{

                text-align: left;
                margin-left: 40px;
    
                font-size: 25px;
    
                margin-top: 10%;
    
                .number{
    
                    color: gray;
                    padding-right: 10px;
    
                }
    
            }
    
            .vehiculo{
    
                width: 800px;
                height: 250px;
    
                margin-top: 30px;
                margin-bottom: 30px;
    
            }
        }
    
        .contenedorInformacion{
    
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
    
            h4{
    
                margin-top: 30px;
                color: gray;
    
            }
    
            h1{
    
                margin-top: 10px;
                margin-bottom: 25px;
    
            }
    
            p{
    
                text-align: center;
    
                font-size: 18px;
    
                width: 400px;
                color: gray;
    
            }
    
        }

    }
}

@media (min-width: 1440px){

    body{

        background-image: url('../assets/images/technology/background-technology-desktop.jpg');
        height: 865px;

        header{

            .iconMenu{

                width: 70px;

                margin-top: 80px;
                margin-left: 60px;

            }

            .menu{

                background: rgba(255, 255, 255, 0.055);
                backdrop-filter: blur(10px);

                margin-top: 60px;

                text-align: left;
        
                width: 1500px;
                height: 110px;

                left: 2370px;
                top: 20px;

                button{

                    height: 110px;
                
                    margin-left: 120px;
            
                    font-size: 25px;

                    &:hover{

                        border-bottom: 3px solid;

                    }

                }

                ul{

                    margin: 0;
    
                }

            }
        }

        .contenedorHomeSpace{

            .contenedorBotones{

                display: flex;
                flex-direction: column;

                position: absolute;
                top: 530px;
                left: 250px;
    
                button{
               
                    border-radius: 50px;

                    font-size: 30px;
        
                    width: 100px;
                    height: 100px;

    
                }
    
                .dos, .tres{

                    margin-top: 20px;
    
                    margin-left: 0px;
    
                }
            }

    
            .titleSpace{
    
                font-size: 40px;
    
                margin-top: 15%;

                position: absolute;
                left: 210px;
                top: -20px;
    
                .number{
    
                    padding-right: 20px;
    
                }
    
            }
    
            .vehiculo{  
    
                width: 750px;
                height: 500px;

                position: absolute;
                bottom: 250px;
                left: 1650px;
    
            }
        }
    
        .contenedorInformacion{

            position: absolute;

            top: 500px;
            left: 450px;
     
            h4{

                text-align: left;
                width: 750px;
    
                font-size: 35px;

                margin-top: 30px;
                color: gray;
    
            }
    
            h1{

                font-size: 80px;
    
                margin-top: 10px;
                margin-bottom: 25px;
    
            }
    
            p{

                font-size: 30px;
    
                text-align: left;
    
                width: 760px;
                color: gray;
    
            }
    
        }

        
    }
}