*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;  
    font-family: "Gabarito", sans-serif;
    font-optical-sizing: auto;   
}


:root{
    --primercolor: #092635;
    --segundocolor: #FFF80A;
    --tercercolor: #D61C4E;
    --cuartocolor: #EE5007;
    --tab-color: #191919;
    --white-color: #fff;
    --home-icon-color: #00f7ff;
    --heart-icon-color: #ff0000;
    --plus-icon-color: #255df7;
    --user-icon-color: #8bee82;
    --bell-icon-color: #ffff00;
    --quintocolor: #E81C2E;
}


.about-img {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 30px 30px 30px 30px ;
    overflow: hidden;
}

.about-img::before {
    content: "";
    width: 100%;
    height: 40%;
    background: var(--segundocolor);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    border-radius: 10px 10px 10px 10px;
}


.about-img::after {
    content: "";
    width: 100%;
    height: 60%;
    background: #0245fc;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    border-radius: 10px 10px 10px 10px;
}

.rotate-left {
    width: 150px;
    height: 100px;
    position: absolute;
    top: 28%;
    left: -10%;
    rotate: 25deg;
    z-index: 2;
}

.rotate-right {
    width: 150px;
    height: 100px;
    position: absolute;
    top: 28%;
    right: -10%;
    rotate: -25deg;
    z-index: 2;
}

.about-img img {
    position: relative;
    z-index: 2;
    border-radius: 10px;
}

.experiences {
    width: 160px;
    height: 200px;
    position: absolute;
    top: -0;
    right: 0;
    padding: 35px 35px;
    text-align: center;
    border-radius: 10px;
    z-index: 3;
    animation: mymove 5s infinite;
    animation-timing-function: ease-in-out;
}

@keyframes mymove {
    from {top: -202px;}
    to {top: 102%;}
}

#experiencia{
    background: var(--primercolor) !important;
    color: var(--white-color);
}

#cajas{
    background-color: var(--cuartocolor);
   max-width: 100%! important;
    
}

#iconos {
    color: var(--white-color);
   font-size: 5em;   
}

#subtitulo{
    font-size: 16px;
    font-weight: 600;
    
}

#cajas2{
    max-width: 120em;
}

#cajas3{
    max-width: 100em;
}


@media (max-width: 991.98px) {
    #acerca {
        width: 100%;
        height: 400px;
        margin: auto;
        bottom: 10px;            
    }

    #iconos {
        font-size: 3em;   
    }

    #cajas{
        max-width: 100%! important;
        font-size: 12px;
       
                   
    }

    #subtitulo{
       font-size: 20px;
       text-align: left;
       font-weight: 700;
       margin: auto ;
                    
    }

    #cajas2{
        width: 105%;
        
    }
    
    #cajas3{
        width: 100%;
    }
    
}

@media (max-width: 575.98px) {
    #subtitulo{
        font-size: 12px;
        }
    }

/*** About End ***/